@charset "utf-8";

/* 푸터 하단 */
html{position:relative;min-height:100%;overflow-x: hidden;}


/* 슬라이드 */
.swiper-height{height:100%}
.swiper-container .contains{height:100%}


/* 스크롤 */
.custom_scroll{overflow:hidden;overflow-y:auto}
.custom_scroll::-webkit-scrollbar{width:8px}
.custom_scroll::-webkit-scrollbar-track{-webkit-border-radius:4px;border-radius:4px;background:#fafafa}
.custom_scroll::-webkit-scrollbar-thumb{-webkit-border-radius:4px;border-radius:4px;background:rgba(21, 21, 21, 0.1)}
.custom_scroll_x::-webkit-scrollbar{width:0;height:8px}



/* .etc #header {box-shadow: 0 5px 10px rgba(0,0,0,0.05); background:#000; top:0} 
.etc #header + .mobile_btn_menu { right:10px; top:10px;background:#000 } */


#btn_top{position:fixed;right:30px;bottom:30px;width:60px;height:60px; border-radius: 60px; border:1px solid rgba(102, 102, 102, 0.15);background-color:rgba(0, 0, 0, 0.6);backdrop-filter:blur(8px);z-index:610;text-indent: -9999px; cursor: pointer;}
#btn_top:before{display:block;content:"";position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;width:24px;height:24px;background:url("../img/icon/top_w.png") no-repeat center center}
#btn_top.hide{opacity:0;visibility:hidden}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   #btn_top{border:0;background:url("../img/icon/top_circle.png") no-repeat center center}
}

#btn_top.bottom { background: transparent; backdrop-filter:inherit; border: 0; right:30px; bottom:25px; opacity: 0.8; }
#btn_top.bottom:hover { opacity: 1;}
#btn_top.bottom:before { background-image:url("../img/icon/top_w.png"); }





/* checkbox */
input.checkbox[type="checkbox"] { position:absolute; width:1px; height:1px; padding:0; margin:1px 0 0 0; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
input.checkbox[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:30px; cursor:pointer;  } 
input.checkbox[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:50%; margin-top:-11px; width:22px; height:22px; text-align:center; background:#fff; border: 1px solid #e2e2e2; box-sizing:border-box; border-radius: 24px;}
input.checkbox[type="checkbox"]:checked + label span { color:#151515; font-weight: 700;}
input.checkbox[type="checkbox"]:checked + label:after{ content: ''; position:absolute; top:50%; margin-top:-11px; left:0; width:22px; height:22px; background:#151515 url(../img/icon/check_w.png) center no-repeat;border-radius: 24px; background-size: 11px auto; }





/* 서브 *******************************************************************************/

.gnb .menu_box .btn_menu.active:after{display:block;content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#ED1B23}

.btn_box {overflow: hidden; text-align: center;}
.btn_box.right {text-align: right;}
.btn_box.left {text-align: left;}
.btn_box .btn_left {float:left;}
.btn_box .btn_right {float:right;}


/* radio */
.radiobox_wrap ul li {display: inline-block; vertical-align: middle; margin-right: 20px; }
.radiobox_wrap input[type="radio"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
.radiobox_wrap input[type="radio"] + label{ display:inline-block; position:relative; padding-left:24px; cursor:pointer;  } 
.radiobox_wrap input[type="radio"] + label span {display:inline-block; position:relative; font-size: 14px; color:#666 }
.radiobox_wrap input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:3px; width:18px; height:18px; text-align:center; background:#fff; border: 1px solid #e2e2e2; box-sizing:border-box; border-radius: 18px;}
.radiobox_wrap input[type="radio"]:checked + label span { color:#151515; font-weight: 700;}
.radiobox_wrap input[type="radio"]:checked + label:before {background:#151515;border-color:#151515}
.radiobox_wrap input[type="radio"]:checked + label:after{ content: ''; position:absolute; top:9px; left:6px; width:6px; height:6px; background:#fff; border-radius:18px; }

/* 자주하는 질문 */
.faq_wrap ul.faq li.f_list { padding:20px 0; border-top: 1px solid #e2e2e2;/* border-bottom: 1px solid #e2e2e2;*/ border-collapse: collapse; overflow:hidden;}
.faq_wrap ul.faq li.f_list:nth-child(1){border-top:2px solid #151515}
.faq_wrap ul.faq li.f_list a.f_tit { color:#151515; padding:0 20px 0; display:block; position: relative; }
.faq_wrap ul.faq li.f_list a.f_tit span { vertical-align:middle; display:inline-block}
.faq_wrap ul.faq li.f_list a.f_tit span.point {color:#ED1B23}
.faq_wrap ul.faq li.f_list a.f_tit span.subject {width:100%; font-size:18px; font-weight:700; line-height: 1.3em;}	
.faq_wrap ul.faq li.f_list a.f_tit span.arrow { text-indent: -9999px; background: url("../img/icon/ic_arrow_down.png") center no-repeat; width:24px; height:24px; position:absolute;top: 50%;  margin-top: -10px; right:20px; background-size: 14px auto;}
.faq_wrap ul.faq li.f_list a.active .arrow { transform:rotate(180deg); color:#333}
.faq_wrap ul.faq li.f_list .answer {display:none; font-size:16px; padding:20px 20px 10px; color:#151515; font-weight:400;}

.faq_wrap ul.faq li.f_list .f_tit .category{color:#222d5b; margin-right: 10px; font-size: 0.9em;}
.faq_wrap ul.faq li.f_list .answer .answer_btn{float:right}
.faq_wrap ul.faq li.f_list .answer .answer_btn a{font-size:14px; color:#222d5b; padding:0 15px}
.faq_wrap ul.faq li.f_list .answer .answer_btn a:nth-child(1){border-right:1px solid #e2e2e2}
.faq_wrap ul.faq li.f_list .answer .answer_btn a span + span{ padding-left: 8px; position: relative; top: -2px;}
.faq_wrap ul.faq li.f_list .answer span.point {color:#ED1B23}

.faq_wrap ul.faq li.f_list:last-child {border-bottom: 1px solid #e2e2e2;}

/* check_list */
ul.comm_checklist li { padding-left: 27px; position: relative;}
ul.comm_checklist li + li { margin-top:10px}
ul.comm_checklist li::before { display: block; position: absolute; top:6px; left: 0; content: ""; background: url(../img/icon/check2.png) top center no-repeat; background-size: 100% auto; width: 18px; height: 14px;}
ul.comm_checklist li p { font-size: 20px; color: #151515; position: relative; display: inline;}
ul.comm_checklist li p span { z-index: 10;  color: #222d5b; position: relative; box-shadow: inset 0 -8px 0 #caebf0; line-height: 21px}
ul.comm_checklist li p span.arrow {color:#ED1B23; font-weight: 700;}
ul.comm_checklist li p b { font-weight: 700;}

/* dot_list */
ul.comm_dotlist li { font-size: 16px; position: relative; padding-left: 12px; font-size: 16px; line-height: 1.4em;}
ul.comm_dotlist li b { font-weight: 700;}
ul.comm_dotlist li + li { margin-top: 10px;}
ul.comm_dotlist li::before { content: ""; width:4px; height: 4px; border-radius: 4px; background:#151515; position:absolute; top: 9px; left: 0;}

/* dot_list */
div.comm_dotlist > p { font-size: 16px; position: relative; padding-left: 12px; font-size: 16px; line-height: 1.4em;}
div.comm_dotlist > p b { font-weight: 700;}
div.comm_dotlist > p + p { margin-top: 10px;}
div.comm_dotlist > p::before { content: ""; width:4px; height: 4px; border-radius: 4px; background:#151515; position:absolute; top: 9px; left: 0;}
div.comm_dotlist > p .desc { color:#666; display: block; position: relative; padding-left: 14px; font-size: 15px; line-height: 1.3em;}
div.comm_dotlist > p .desc::before { content: "-"; position: absolute; top:0; left:0;}

/*btn_box*/
.btn_box {text-align: center}
.btn_box a { min-width: 140px; display: inline-block; margin: 0 auto; position: relative; background: #0162ff;}
.btn_box a span {color:#fff;  font-size: 16px; height: 50px; line-height: 48px; }
.btn_box a span.txt { display: block; }

.btn_box p.btn { min-width: 140px; display: inline-block; margin: 0 auto; position: relative; background: #0162ff;}
.btn_box p.btn span {color:#fff;  font-size: 16px; height: 50px; line-height: 48px; }
.btn_box p.btn span.txt { display: block; }

.btn_box .w span { color:#fff}
.btn_box .w::before,
.btn_box .w::after { background: #fff;}

.btn_box .btn_download span { display: inline-block; position: relative; padding-right: 25px;} 
.btn_box .btn_download span::after { content:""; width:17px; height:100%; position: absolute; top:0; right:15px; background: url(../img/icon/ic_download.png) center no-repeat; }

.btn_box .btn_black { background: #333;}
.btn_box .btn_gray { background: #f8f8f8;}
.btn_box .btn_gray span { color:#666}

.bbs_btn .btn_box a span {font-family: 'Inter', sans-serif; letter-spacing: 0;}

.btn_box .btn.btn_line {background: #fff; border:1px solid #eee}
.btn_box .btn.btn_line span {color:#222; }


/* error */
.error_wrap {  padding:100px 0 66px; margin:0 auto; text-align:center}
.error_wrap p { color:#333; font-size: 17px;    font-weight: 700; letter-spacing:-0.5px;}
.error_wrap p span {color:#0162ff}

@media screen and (min-width:1024px) {
.btn_box .btn.btn_line:hover{background: #0162ff;}
.btn_box .btn.btn_line:hover span {color:#fff; }
}

@media screen and (max-width:1220px) {



	/* check_list */
	ul.comm_checklist li { padding-left: 23px; }
    ul.comm_checklist li p { font-size: 15px;}
    ul.comm_checklist li p span { box-shadow: inset 0 -4px 0 #caebf0; }
    ul.comm_checklist li::before { width:16px; height: 13px;}
	
	/* dot_list */
	ul.comm_dotlist li { font-size: 14px; padding-left: 10px; }
    ul.comm_dotlist li + li { margin-top: 5px;}
    ul.comm_dotlist li::before { width: 3px; height: 3px; top: 8px;}

	/* dot_list */
	div.comm_dotlist > p { font-size: 14px; padding-left: 10px; }
    div.comm_dotlist > p + p { margin-top: 5px;}
    div.comm_dotlist > p::before { width: 3px; height: 3px; top: 8px;}

	div.comm_dotlist > p .desc { font-size: 13px;}

	

}


@media screen and (max-width:1044px) {
	


	#btn_top { display: none!important;}

}

@media screen and (max-width:767px) {
	

	#btn_top{right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(102, 102, 102, 0.15)}

	

	/* popup */
	.popup_window {min-width: 100%; height: 100%;}
	.popup_window .popup_inner {padding:20px 0}

	.popup_window .popup_inner .popup_header {padding:0 20px;}
	.popup_window .popup_inner .popup_header .top .btn_close { width:22px; height: 22px; top:2px}
	.popup_window .popup_inner .popup_header .top .btn_close span,
	.popup_window .popup_inner .popup_header .top .btn_close span::after {width:22px;}

	.popup_window .popup_inner .popup_contents {padding:0 20px 100px 20px; margin-top:20px;max-height: calc(100vh - 78px );}
	.popup_window .popup_inner .popup_contents .title {font-size: 24px;}
	
	.popup_window .email_box .icon {padding:20px 0}
	.popup_window .email_box .icon img {width:20%}

	.popup_window .subscribe_box .privacy_box .privacy_scroll {  height: 160px;}


    /* 자주하는 질문 */
    .faq_wrap{margin-top:20px}
    .faq_wrap ul.faq li.f_list { padding:20px 0; border-top: 1px solid #e2e2e2; /*border-bottom: 1px solid #e2e2e2; */border-collapse: collapse; overflow:hidden;}
    .faq_wrap ul.faq li.f_list a.f_tit{padding:0}
    .faq_wrap ul.faq li.f_list a.f_tit span.subject {font-size:16px; padding-right: 20px;}	
    .faq_wrap ul.faq li.f_list a.f_tit span.arrow {right:0px; background-image: url(../img/icon/ic_arrow_down_m.png);}
    .faq_wrap ul.faq li.f_list .f_tit .category {display: none;}

    .faq_wrap ul.faq li.f_list .answer {font-size:14px; padding:10px 0 0px;}
    .faq_wrap ul.faq li.f_list .answer .answer_btn{float:none; margin-top:20px;}
    .faq_wrap ul.faq li.f_list .answer .answer_btn a {padding: 0 16px 0 0;}
    .faq_wrap ul.faq li.f_list .answer .answer_btn a + a {margin-left: 14px;}

	/* 자주하는 질문 > 질문 */
	.faq_wrap ul.faq li.f_list .answer .faq_wrap2 .answer{ padding-top: 0px; padding-bottom: 30px;}
	.faq_wrap ul.faq li.f_list .answer .f_list2 + .f_list2 {margin-top:10px;}
	.faq_wrap ul.faq li.f_list .answer a.f_tit2{ position: relative; display: block;}
	.faq_wrap ul.faq li.f_list .answer a.f_tit2 span.arrow { text-indent: -9999px; background: url("../img/icon/ic_arrow_down_m.png") center no-repeat; width:24px; height:24px; position:absolute;top: 50%;  margin-top: -15px; right:0; background-size: 14px auto;}
	.faq_wrap ul.faq li.f_list .answer a.f_tit2.active .arrow { transform:rotate(180deg); color:#333}
	


}

@media screen and (max-width:588px) {

	.btn_box a {min-width: 120px;}
	.btn_box a span { font-size: 16px; line-height: 50px; height: 50px;}

	.btn_box a.btn_download span::after {background-image: url(../img/icon/ic_download_m.png); background-size: 100% auto; right:12px}

}

