/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../img/footer/contact-us/KV_footer_contact-us.jpg')}

/* 공통 */
#CONTACT-US .gu_line {margin:60px auto;}
#CONTACT-US .gu_btn_area.submit {margin-top:70px; text-align:center;}

/* popup */
#POP_CONTACT_US_SUCCESS.popup {position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow-y: auto;display: none;z-index: 9999;}
#POP_CONTACT_US_SUCCESS.popup.show {display: block;}
#POP_CONTACT_US_SUCCESS.popup .dim {position: fixed; width: 100%;height: 100vh;left: 0;top: 0;background: rgba(0, 0, 0, .8);}
#POP_CONTACT_US_SUCCESS.popup .pop_contents {position: relative;margin: 20px auto;background-color: #fff;text-align: left;width: 90%;max-width: 560px;min-height: 300px;padding: 60px 56px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; text-align:center;}
#POP_CONTACT_US_SUCCESS.popup .pop_inner {width: 100%;position: relative;left: 0;right: 0;top: 50%;}
#POP_CONTACT_US_SUCCESS.popup .pop_inner.active {opacity: 1}
#POP_CONTACT_US_SUCCESS.popup .pop_inner .popup_click_bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#POP_CONTACT_US_SUCCESS.popup .pop_inner .pop_detail_box {position: relative}
#POP_CONTACT_US_SUCCESS.popup .pop_contents .pop_detail_box .pop_cnt_head {border-bottom: 1px solid #000;padding-bottom: 32px}
#POP_CONTACT_US_SUCCESS.popup .pop_contents .pop_detail_box .pop_cnt_head .cnt_head_tit {font-size: 32px}
#POP_CONTACT_US_SUCCESS.popup .pop_contents .pop_detail_box .pop_cnt_head .cnt_head_sub {font-size: 18px;color: #666;margin-top: 12px}

/* form */
#CONTACT-US form ul li {font-size:0;margin:40px 0;}
#CONTACT-US form ul li > div {display:inline-block; vertical-align:top;}
#CONTACT-US form ul li > div.input_tit {width:200px;line-height:50px; padding-top:6px; height:50px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#CONTACT-US form ul li > div.input_tit span.required {color: #ff3333; font-size:18px; line-height:30px; margin-left:6px;}
#CONTACT-US form ul li > div.input_box {width:calc(100% - 200px);font-size:18px; font-size:0;}
#CONTACT-US form ul li > div.input_box input {font-size:18px;width:100%; height:50px;border-bottom:2px solid #d9d9d9; vertical-align:bottom;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

/* mail */
#CONTACT-US form ul li.mail_area > div.input_box input.input_mail_id {width:200px;}
#CONTACT-US form ul li.mail_area > div.input_box input.input_mail_domain {width:calc(100% - 251px);}
#CONTACT-US form ul li.mail_area > div.input_box span.cform {padding:0 12px; margin-bottom:18px; color:#222;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:inline-block;width:40px; font-size:16px;}

/* country */
#CONTACT-US form ul li.country_area > div.input_box .gu_sort_area {width:230px;}
#CONTACT-US form ul li.country_area > div.input_box .gu_sort_area .gu_sort_name {width:230px;}
#CONTACT-US form ul li.country_area > div.input_box .gu_sort_area .gu_sort_name a {width:230px;height: 50px;padding: 15px 20px 17px 0}
#CONTACT-US form ul li.country_area > div.input_box .gu_sort_area .gu_sort_name:before {top: 50%;transform: translateY(-50%)}
#CONTACT-US form ul li.contents_area textarea {width:100%; height:300px; line-height:28px; padding:40px 30px; font-size:18px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;background:#f7f7f7;resize: none}

/* category */
#CONTACT-US form ul li.category_area > div.input_box .gu_sort_area {width:320px;}
#CONTACT-US form ul li.category_area > div.input_box .gu_sort_area .gu_sort_name {width:320px;}
#CONTACT-US form ul li.category_area > div.input_box .gu_sort_area .gu_sort_name a {width:320px;height: 50px;padding: 15px 20px 17px 0}
#CONTACT-US form ul li.category_area > div.input_box .gu_sort_area .gu_sort_name:before {top: 50%;transform: translateY(-50%)}

/* contents */
#CONTACT-US form ul li.contents_area {margin:50px 0;}
#CONTACT-US form ul li.contents_area > div.input_tit {padding-top:0;}

/* file */
#CONTACT-US form ul li.file_area {position: relative;}
#CONTACT-US form ul li.file_area .upload_area {position: relative; font-size:0;}
#CONTACT-US form ul li.file_area .upload_area .input_file_name {width: calc(100% - 140px);background: #fff; margin-left:20px;border:none; height:50px; font-size:16px;}
#CONTACT-US form ul li.file_area .upload_area label {display:inline-block;min-width: 120px;padding: 0 24px;height: 50px;line-height: 50px;font-size: 16px;text-align: center;margin: 0 auto;border: 1px solid #bcbcbc;background-color: #fff;cursor:pointer;color:#222;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
#CONTACT-US form ul li.file_area .upload_area #file {position: absolute;left: 0;top: 0;display: inline-block;width:120px;height:50px;cursor:pointer;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}
#CONTACT-US form ul li.file_area .upload_area .btn_delete {position: absolute; right: 0; top: 50%; display: inline-block; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); display:none;}
#CONTACT-US form ul li.file_area .upload_area .btn_delete span {font-size:16px;color:#999;}
#CONTACT-US form ul li.file_area p.caption {color: #999; margin-top:25px;}

/* agree */
#CONTACT-US .agree_area .gu_box_title {margin-bottom:30px;}
#CONTACT-US .agree_area .agree_box_inner {padding:36px 25px 35px 40px;background:#f7f7f7;height:420px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#CONTACT-US .agree_area .agree_box_inner .textarea {height:348px;overflow-y:scroll; padding-right:25px;color:#555;overflow-x:hidden;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar {width: 4px;height: 36px;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar-track {background-color: #f7f7f7;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar-track-piece {background-color: #f7f7f7;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar-thumb {background-color: #a8a8a8;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar-button:start {background-color: #f7f7f7;}
#CONTACT-US .agree_area .agree_box_inner .textarea::-webkit-scrollbar-button:end {background-color: #f7f7f7;}
#CONTACT-US .agree_area .agree_box_inner .textarea strong {display:block;}
#CONTACT-US .agree_area .agree_box_inner .textarea [class*='type_bullet'] li {position:relative; padding-left:10px;}
#CONTACT-US .agree_area .agree_box_inner .textarea [class*='type_bullet'] li:before {content:'-'; position:absolute;left:0;}
#CONTACT-US .agree_area .agree_box_inner .textarea .gu_box_sub_title {margin:20px 0 15px;}

#CONTACT-US .agree_area .agree_desc {padding-top:30px;color:#222;}
#CONTACT-US .agree_area .agree_desc.agree_all {padding-top:40px;}
#CONTACT-US .agree_area .agree_desc > div {display:inline-block; vertical-align:middle;}
#CONTACT-US .agree_area .agree_desc .btn_agree {position:relative;float:right;cursor:pointer;}
#CONTACT-US .agree_area .agree_desc .btn_agree:before {content:''; position:absolute; width:20px;height:20px;left:-30px;top:50%;border:1px solid #c8c8c8; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
#CONTACT-US .agree_area .agree_desc .btn_agree.on:after {content:''; position:absolute; width:12px;height:12px;left:-25px;top:50%;background:#222; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}

.category_area.category2 {display:none;}
.category_area.category2.active {display:block;}
.category_area.category2.active .gu_selectbox .gu_selectbox_inner a {display:none;}
.category_area.category2.active .gu_selectbox .gu_selectbox_inner a.active,
.category_area.category2.active .gu_selectbox .gu_selectbox_inner a.on {display:block;}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #CONTACT-US form ul li {margin:30px 0;}
    #CONTACT-US form ul li > div.input_tit {width:150px;}
    #CONTACT-US form ul li > div.input_box {width:calc(100% - 150px);}
    #CONTACT-US form ul li > div.input_box input {font-size:14px;}
    #CONTACT-US form ul li.contents_area textarea {font-size:14px;}
    #CONTACT-US form ul li.file_area .upload_area .input_file_name {font-size:14px;}
    #CONTACT-US form ul li.file_area p.caption {font-size:13px;}
    #CONTACT-US form ul li.file_area .upload_area #file {width:80px; height:40px;}
    #CONTACT-US form ul li.file_area .upload_area label {font-size:12px;height:40px; line-height:40px;min-width:80px; padding:0 10px;}
    #CONTACT-US form ul li.file_area .upload_area .input_file_name {height:40px;}
    #CONTACT-US form ul li.file_area p.caption {margin-top:15px;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #CONTACT-US .gu_line {margin:50px auto;}
    #CONTACT-US form ul li {margin:20px 0;}
    #CONTACT-US form ul li.contents_area {margin:20px 0;}
    #CONTACT-US form ul li > div.input_tit {width:100%; padding-top:0; height:35px;}
    #CONTACT-US form ul li > div.input_tit span.required {margin-left:4px;}
    #CONTACT-US form ul li > div.input_box {width:100%;}
    #CONTACT-US form ul li.mail_area > div.input_box input.input_mail_id {width:36%;}
    #CONTACT-US form ul li.mail_area > div.input_box input.input_mail_domain {width:calc(64% - 40px);}
    #CONTACT-US form ul li.contents_area textarea {margin-top:15px;}
    #CONTACT-US form ul li.country_area > div.input_box .gu_sort_area,
    #CONTACT-US form ul li.country_area > div.input_box .gu_sort_area .gu_sort_name,
    #CONTACT-US form ul li.country_area > div.input_box .gu_sort_area .gu_sort_name a,
    #CONTACT-US form ul li.category_area > div.input_box .gu_sort_area,
    #CONTACT-US form ul li.category_area > div.input_box .gu_sort_area .gu_sort_name,
    #CONTACT-US form ul li.category_area > div.input_box .gu_sort_area .gu_sort_name a {width:100%;}
    #CONTACT-US form ul li.file_area .upload_area {margin-top:15px;}
    #CONTACT-US form ul li.file_area .upload_area .btn_delete span {font-size:13px;}
    #CONTACT-US form ul li.file_area p.caption {font-size:12px;}
    #CONTACT-US .agree_area .gu_box_title {font-size:16px; margin-bottom:20px;}
    #CONTACT-US .agree_area .agree_box_inner {padding:30px 10px 30px 20px; height:250px;}
    #CONTACT-US .agree_area .agree_box_inner .textarea {height:178px;}
    #CONTACT-US .agree_area .agree_desc {font-size:14px; line-height:24px; padding-top:12px;}
    #CONTACT-US .agree_area .agree_desc .btn_agree:before {width:16px; height:16px;left:-26px;}
    #CONTACT-US .agree_area .agree_desc .btn_agree.on:after {width:10px; height:10px;left:-22px;}
    .gu_content .gu_box_sub_title {font-size:14px; line-height:24px;}
    #CONTACT-US .gu_btn_area.submit {margin-top:50px;}
}