/*
 * File       : style-hee.css
 * Author     : STUDIO-JT (HEE)
 * Guideline  : JTstyle.1.0
 *
 *
 * SUMMARY:
 * 1) 제보하기 (tip-off)
 * 2)
 */

/* **************************************** *
 *  제보하기 (tip-off)
 * **************************************** */
.tipoff {background:#fafafa; padding-top: 136px;}
.tipoff div {font-size: 0;}
.tipoff .sub_header:after {color: rgba(34, 34, 34, 0.3);}
#sub_header_title.single_sub_title {color: #222; font-size: 35px;  text-align: center; padding: 0; margin-bottom: 54px;}
#sub_header_title.single_sub_title span:after {display: none;}

.tipoff_part {max-width: 1030px; margin: 0 auto; background-color: #fafafa; }
.tipoff_agree_sct {padding-bottom: 50px;}
.nicescroll_area_outer {width: 100%;  height: 266px; padding: 32px 28px; background: #f6f6f6; border: 1px solid #ddd; overflow: hidden;}
.nicescroll_area {width: 100%; height: 100%; padding-right: 40px; position: relative;}
.jt_agree_rule_box ol {counter-reset: item;}
.jt_agree_rule_box ol li {position: relative; padding-left:18px;}
.jt_agree_rule_box ol li:before {counter-increment: item; content: counter(item)'.'; position: absolute; top: 0; left: 0; font-size: 16px; font-weight: 400; line-height: 1.75; color: #666;}
.jt_agree_rule_box ol li b {font-size: 16px; line-height: 1.75; display: block; font-weight: 400; color: #666;}
.jt_agree_rule_box ol li p {font-size: 16px; line-height: 1.75;}
.jt_agree_rule .jt_agree_check {text-align: right;  font-size: 0; padding-top:15px;position: relative;}
.jt_agree_rule .jt_agree_check label {display: inline-block;}
.jt_error_msg {font-size: 15px;display: block;/*display: inline-block;position: absolute;left: 0;bottom: 0;*/color: #dc372b;font-weight: bold; margin-top: 10px; word-wrap: break-word; word-break: break-all;}
.jt_agree_check label span {font-size: 15px; line-height: 1.866; color: #666; vertical-align: middle;}
.jt_agree_check b {font-size: 15px; line-height: 1.75; color: #222; display: inline-block; padding-right: 28px; vertical-align:  middle; padding-top: 3px;}
.jt_agree_check > label + label {padding-left: 30px;}
.iradio_minimal {top: 1px;}
div[class^="icheckbox"] + span, div[class^="iradio"] + span {display: inline-block; vertical-align: middle; font-size: 14px; line-height: 1; color: #666; cursor: pointer; padding-left: 8px; padding-top: 1px;}
.safari.ios div[class^="icheckbox"] + span, div[class^="iradio"] + span {padding-top: 4px;}

.tipoff_form_sct {padding-bottom: 150px;}
.tipoff_form_sct p.info {color: #222; padding-left: 14px; position: relative; line-height: 1.4;}
.tipoff_form_sct p.info:before {content: ''; display: block; width: 4px; height: 4px; position: absolute; top:6px; left: 0; background: #dc372b;}
.tipoff_form_sct .info_list {margin-top: 14px;}
.tipoff_form_sct .info_list li {font-size: 14px; color: #666; line-height: 1.4; position: relative; padding-left: 10px; margin-bottom: 9px;}
.tipoff_form_sct .info_list li:last-child {margin-bottom: 0;}
.tipoff_form_sct .info_list li:before {content: '*'; top: 2px; left: 0; position: absolute; }

.tipoff_form {margin-top: 38px;}
.jt_form {display: table; width: 100%; border-top: 2px solid #dc372b;}
.jt_form > li {display: table-row; width: 100%; font-size: 0;}
.jt_form > li > div {display: table-cell; border-bottom: 1px solid #ddd;  padding: 18px 0; vertical-align: middle;}
.jt_form > li > div:first-child {padding-left: 30px; width: 180px;}
.jt_form span.explain{font-size: 14px; color: #666; display: inline-block; line-height: 45px; vertical-align:middle;}
.jt_form label {font-size: 15px; letter-spacing: -0.025em; font-weight: 600; color: #222;}
.tipoff_form .form_control_wrap {display: inline-block; vertical-align: top;}
.tipoff_form .form_field_wrap {display: inline-block; vertical-align: top;}
.tipoff_form .jt_form_field {display: inline-block; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 15px; vertical-align: middle; height: 45px; padding: 4px 10px; color: #666;}
.tipoff_form .jt_form_field.jt_form_full_field {width:100%;}
.tipoff_form .jt_select_wrap {display: inline-block; vertical-align: top; margin-left: 10px; width: 177px;}
.tipoff_form .selectric {border:1px solid #e6e6e6; box-sizing:border-box; height: 45px; background:#fff;}
.tipoff_form .selectric-hover .selectric {border-color: #e6e6e6;}
.tipoff_form .selectric-open .selectric {border-color: #dc372b;}
.tipoff_form .selectric-focus .selectric {border-color: #dc372b;}
.tipoff_form .selectric .label {height: 45px; line-height: 45px; font-size: 15px; padding: 0 10px; margin: 0; color: #666;}
.tipoff_form .selectric .button {width: 30px; height: 45px; line-height: 45px; background-color: #fff;}
.tipoff_form .selectric-items {border: 0;}
.tipoff_form .selectric-items ul , .tipoff_form .selectric-items li {font-size: 15px;}
.tipoff_form .selectric-items li {border: solid #ddd; border-width: 0 1px 1px 1px ;}
.tipoff_form .selectric-items li:hover {background: rgba(220, 55, 43, 0.1); color: #666;}
.tipoff_form .selectric-items li.highlighted {background: #dc372b; color: #fff; border-color: #dc372b;}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=url], textarea {-webkit-appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; font-family: sans-serif;}
.tipoff_form textarea.jt_form_field {height: 248px; padding: 8px 10px; overflow: auto; resize: none; font-size: 15px;}

.contant_row_name .jt_form_field {width: 387px;}
.contant_row_name span.explain {margin-left: 13px;}
.contact_row_tel .jt_form_field {width: 118px;}
.contact_row_tel .tel_desinence {width: 20px; height: 45px; display: inline-block; position: relative;}
.contact_row_tel .tel_desinence:after {content: ''; display: block; width: 4px; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); background: #222;}
.contact_row_mail .field_mail_01 {width: 118px;}
.contact_row_mail .field_mail_02 {width: 178px;}
.contact_row_mail .mail_desinence {width: 20px; height: 45px; display: inline-block; position: relative;;}
.contact_row_mail .mail_desinence:after {font-size: 14px; content: '@'; position: absolute; color: #222; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
.jt_radio_wrap {padding: 9px 0;}
.jt_radio_wrap > label + label {padding-left: 30px;}
.jt_radio_wrap > span.explain {vertical-align: top; line-height: 1.86; margin-left: 49px; position: relative;}
.jt_radio_wrap > span.explain:before {content: '*'; position: absolute; top: 0; left: -9px;}
.jt_radio_wrap > span.explain > br {display: none;}
.contact_row_title .form_control_wrap , .contact_row_content .form_control_wrap {width:100%;}
.contact_row_file .form_control_wrap {width:100%;}
.contact_row_file .form_control_wrap:nth-child(n+2) {margin-top: 10px;}
.contact_row_file .jt_file_upload_input {width: calc(100% - 150px); display: inline-block; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 15px; vertical-align: middle; height: 45px; padding: 0 10px; color: #666; background:#f8f8f8;}
.jt_file_upload_wrapper { width: calc(100% - 78px); display: inline-block;}
.jt_file_upload_button {display: inline-block; width: 140px; height: 45px; margin-left: 10px; padding: 12px 0; vertical-align: top; font-family: 'NotoSansKR', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.025em; text-align: center; color: #fff; outline: none; border: none; background: #888; cursor: pointer; -webkit-transition: background 300ms; transition: background 300ms;}
label.jt_file_upload_button {font-size: 14px ; font-weight:400; letter-spacing: 0.025em; color: #fff; padding: 12px 0; font-family: NotoSansCJKkr,"Malgun Gothic", sans-serif} /* ie9, ie10 */
.add_file , .del_file {display: inline-block; width: 68px; height: 45px; border: 1px solid #ddd;  vertical-align: top; margin-left: 10px; color: #666; font-size: 15px; font-weight: 500; text-align:  center;  line-height: 45px;}
.add_file span , .del_file span {position: relative; display: inline-block; padding-left: 14px;}
.add_file span:before {display: block; content: url(../images/sub/ethics/add-file-icon.png); position: absolute; top: 0; left: 0;}
.del_file span:before {display: block; content: url(../images/sub/ethics/del-file-icon.png); position: absolute; top: 0; left: 0;}
.form_control_wrap + .file_upload_list {margin-top: 16px;}
.file_upload_list {margin: 7px 0px;}
.file_upload_list span{display: inline-block; font-size: 14px; color: #222; padding-right: 20px;}
.file_upload_list a {display:inline-block; background: url(../images/sub/ethics/file-del-btn-v2.png) no-repeat; width: 23px; height: 21px; vertical-align: top; border: 1px solid #ddd;}
.file_upload_list a:hover {background: url(../images/sub/ethics/file-del-btn-h-v2.png) no-repeat; border: 1px solid #dc372b;}
.contact_row_pw .jt_form_field {width:201px;}
.contact_row_pw span.explain {margin-left:21px; position:relative;}
.contact_row_pw span.explain:before {content: '*'; position: absolute; top: 0; left: -9px;}
.contact_row_pw span.explain > br {display: none;}

.tipoff_submit_btn {display: block; margin-top: 40px;}
.tipoff_submit_btn a, .tipoff_submit_btn button[type=submit] {display:block; width: 190px; margin: 0 auto; padding: 12px 0; text-align: center; font-size: 14px; letter-spacing: 0.025em; color: #fff; background: #dc372b; cursor: pointer; border: 1px solid #dc372b;}

/* 유의사항 */
.tipoff_note {position: fixed; width: 600px; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); background: #fff; z-index: 1000; padding: 40px;}
.tipoff_black_bg { width: 100%; height: 100%; position: fixed; display: block; background: rgba(0, 0, 0, .7); top: 0; left:0; right:0; bottom:0; z-index: 999;}
.tipoff_note_close {display: inline-block; width: 45px; height: 45px; background: #dc372b; position: absolute; top: 33px; right: 40px;}
.tipoff_note_close img {vertical-align: top;}
.note_title {font-size: 25px; color: #dc372b; border-bottom: 2px solid #dc372b; padding-bottom: 26px; margin: 0;}
.note_content {padding-top: 23px;}
.note_content > div {padding-bottom: 18px;}
.note_content > div:last-child {padding-bottom: 0;}
.note_content b {font-size: 14px; color: #222; line-height:1.86; color: #222; margin-bottom:9px; display: block;}
.note_content b.example {color: #dc372b;}
.note_content p {font-size: 14px; color: #888; line-height: 1.86; margin: 0;}

button {font-family: NotoSansCJKkr,"Malgun Gothic", sans-serif;}

/* **************************************** *
 *  접수 및 결과확인 (tip-off-check)
 * **************************************** */
.tipoff_chk {background:#fafafa;}
.tipoff_chk div {font-size: 0;}
.tipoff_chk .sub_header:after {color: rgba(34, 34, 34, 0.3);}
.tipoff_chk_part {max-width: 1030px; margin: 0 auto;}



/* **************************************** *
 *  MEDIAQUERY
 * **************************************** */
/* .tipoff_note , .tipoff_black_bg {display: none;} */

@media (max-width: 1400px){
	/* 제보하기 */
	.tipoff {padding-top: 100px;}
	.tipoff #sub_header_title.single_sub_title {margin: 0 auto 50px;}
}
@media (max-width: 1340px){
	/* 제보하기 */
	
}

@media (max-width: 1250px){
	/* 제보하기 */
	.tipoff_part {width: 90%;}
	.tipoff #sub_header_title.single_sub_title {font-size: 30px; width: 90%;}
	.tipoff_chk #sub_header_title.single_sub_title {font-size: 30px; width: 90%;}
	.jt_radio_wrap > span.explain > br {display: block;}
}

@media (max-width: 1150px){
	/* 제보하기 */
	.jt_form > li > div:first-child {vertical-align: top; padding-top: 28px;}
	.contact_row_pw span.explain {line-height: 1.6;}
	.contact_row_pw span.explain > br {display: block;}
}

@media (max-width: 1010px){
	/* 제보하기 */
	.tipoff #sub_header_title span {display: block;}
	.tipoff_chk #sub_header_title span {display: block;}
	.contant_row_name .jt_form_field {width: 310px;}
	.contant_row_name span.explain {margin-left: 5px;}
}
@media (max-width: 900px){
	/* 제보하기 */	
	.jt_radio_wrap > span.explain {display: block; line-height: 1.6; margin-top: 10px; margin-left: 10px;}
	.jt_radio_wrap > span.explain > br {display: none;}
	.jt_form span.explain {font-size: 12px;}		
	.jt_error_msg {font-size: 13px;}
	.contact_row_tel .form_field_wrap {width: calc(33.3% - 12px);}
	.contact_row_tel .jt_form_field {width: 100%}
	.contact_row_tel .tel_desinence {width: 18px; height: 38px;}
	.contact_row_mail .field_mail_01 , .contact_row_mail .field_mail_02 {width: 100%;}
	.contact_row_mail .form_control_wrap {width: 100%;}
	.contact_row_mail .form_field_wrap {width: calc(33.3% - 8px);}
	.contact_row_mail .jt_select_wrap {width: calc(33.3% - 8px); margin-left: 5px;}
	.contact_row_mail .mail_desinence {width: 19px; height: 38px;}
}

@media (max-width: 768px){
	/* 제보하기 */	
	.tipoff #sub_header_title.single_sub_title {font-size: 24px; margin: 0 auto 30px;}
	.nicescroll_area_outer {padding: 20px; height: 240px;}
	.nicescroll_area {padding-right: 35px;}
	.jt_agree_rule_box ol li b ,  .jt_agree_rule_box ol li p , .jt_agree_rule_box ol li:before {font-size: 15px; line-height: 1.6;}
	.tipoff_agree_sct {padding-bottom: 30px;}
	.tipoff_form {margin-top: 20px;}
	.tipoff_form .jt_form_field {font-size: 14px;}
	.tipoff_form textarea.jt_form_field {font-size: 14px;}
	.jt_form > li {display: block; border-bottom: 1px solid #ddd; padding: 20px 0;}
	.jt_form > li > div:first-child {padding-left: 0; padding-bottom: 10px; padding-top: 0;}
	.jt_form > li > div {display: block; border-bottom: 0; padding: 0;}
	.jt_radio_wrap {padding: 0;}
	.jt_error_msg {font-size: 12px;}
	.tipoff_submit_btn a, .tipoff_submit_btn button[type=submit] {width: 150px; padding: 10px 15px;}

	.tipoff_popup_open {position: fixed;}
	.tipoff_note {top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; transform: none; cursor: auto;}
	.note_title {padding-right: 60px; font-size: 20px; padding-bottom: 20px;}
	.note_content {padding-top: 18px;}
	.tipoff_form .selectric .label {font-size: 14px;}
	.tipoff_form .selectric-items ul, .tipoff_form .selectric-items li {font-size: 14px;}
	.file_upload_list a , .file_upload_list a:hover {background-size: 19px 17px; background-position: 1px 1px;}

}

@media (max-width: 720px){
	/* 제보하기 */
	.tipoff {padding-top: 50px;}
	.tipoff #sub_header_title.single_sub_title {position: relative; top: 0; left: 0; margin: 0 auto 40px;}
}

@media (max-width: 600px){
	/* 제보하기 */
	/* h1#sub_header_title.single_sub_title {position: relative; top: 0; left: 0;} */
	.jt_agree_rule .jt_agree_check {padding-top: 10px;}
	.jt_agree_check b {font-size: 14px;}
	.tipoff_form .form_control_wrap {width: 100%;}
	.tipoff_form .jt_form_field {height: 38px;}
	.tipoff_form .selectric {height: 38px;}
	.tipoff_form .selectric .label {height: 38px; line-height: 38px;}
	.tipoff_form .selectric .button {height: 38px; line-height: 38px;}
	.jt_form label {font-size: 14px;}
	.jt_form span.explain {margin-top: 10px;}
	.jt_form .jt_radio_wrap > span.explain {margin-left: 10px;}
	div[class^="icheckbox"] + span, div[class^="iradio"] + span {font-size: 13px;}
	.contant_row_name span.explain {display: block; line-height: 1.6; margin-left: 0;}
	.contant_row_name .jt_form_field {width: 100%;}
	.contact_row_file .jt_file_upload_input {height: 38px; width: calc(100% - 105px);}
	.contact_row_pw span.explain {display: block; margin-left: 10px;}
	.contact_row_pw span.explain > br {display: none;}
	.jt_file_upload_wrapper {width: calc(100% - 73px);}
	.jt_file_upload_button {height: 38px; padding: 0; width: 100px; margin-left: 5px; font-size: 13px;}
	.add_file, .del_file {height: 38px; line-height: 38px; margin-left: 5px; font-size: 13px;}
}

@media (max-width: 540px){
	/* 제보하기 */
	.tipoff h1#sub_header_title.single_sub_title {font-size: 22px;}
	.tipoff_form_sct {padding-bottom: 15%;}
	.jt_agree_rule_box ol li b, .jt_agree_rule_box ol li p, .jt_agree_rule_box ol li:before {font-size: 14px;}
	.tipoff_note {padding: 40px 30px;}
	.tipoff_note_close {right: 33px;}
	.note_content b , .note_content p {line-height: 1.6;}
	.note_content b {margin-bottom: 4px;}

	.tipoff_note_close {width: 40px; height: 40px;}
	.tipoff_note_close img {width: 40px; height: 40px;}
	
}

@media (max-width: 480px){
	/* 제보하기 */
	.tipoff {padding-top: 30px;}
	.tipoff #sub_header_title.single_sub_title {margin: 0 auto 20px;}
	.nicescroll_area_outer {padding: 20px 15px; height: 200px;}
	.jt_agree_check b {padding-right: 20px;}
	.jt_agree_check > label + label {padding-left: 15px;}
	.tipoff_submit_btn a, .tipoff_submit_btn button[type=submit] {width: 130px; padding: 10px 15px;}
	.tipoff_note {padding: 30px 20px;}
	.tipoff_note_close {top: 21px; right: 20px;}
}

@media (max-width: 380px){
	/* 제보하기 */
	.contact_row_file .jt_file_upload_input {height: 38px; width: calc(100% - 75px);}
	.jt_file_upload_button {width: 70px;}
	
}

@media(max-width: 360px){
	.jt_agree_check b {padding-right: 7px;}
	.jt_agree_check > label + label {padding-left: 7px;}
}

@media(max-height: 690px){
	/* 제보하기 */
	.tipoff_note {position: absolute; top: 20px; transform: translate(-50%,0);} 
}

@media(max-height: 690px) and (max-width: 768px){
	/* 제보하기 */
	.tipoff_note {position: fixed; top:0; transform: none;}
}