@charset "utf-8";
/*
  [템플릿 B] 레이어팝업 전용 스타일
  - B 는 common_re.css 를 로드하지 않는데(디자인 충돌) 팝업 스타일이 그 파일에만 있어 필요한 규칙만 옮겨왔다.
  - 선택자는 원본 그대로 div[id^="layer_"] / .pop_box / .popup_btn 스코프라 B 디자인에 영향을 주지 않는다.
  - 원본 : /resource/css/common_re.css
*/
div[id^="layer_"]{position:fixed; top:0; left:0; z-index:99999999;}
div[id^="layer_"] .pop_box{position:absolute; left:100px; top:100px; min-width:540px; padding:20px 20px 50px; border-radius:20px; box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.2); overflow:hidden; box-sizing:border-box; background-color:#fff; background-image:url(/resource/image/popup/popup_skin_05_large.jpg); background-repeat:no-repeat; background-size:cover;}
div[id^="layer_"] .pop_box > h4{color:#333; font-size:20px; font-weight:700;}
div[id^="layer_"] .pop_box .btn_close{display:block; position:absolute; right:20px; top:20px; width:19px; height:19px; background:none; cursor:pointer;}
div[id^="layer_"] .pop_box .btn_close:before{content:''; display:block; position:absolute; left:0; top:0; width:19px; height:19px; background:url(/resource/image/main/popup/btn_close.png) no-repeat;}
div[id^="layer_"] .pop_box .popup_btn{position:absolute; bottom:0; left:0; width:100%;}
div[id^="layer_"] .pop_box.pop_img .popup_btn{position:relative; width:100%;}
div[id^="layer_"] .pop_box .popup_btn .btn_box{display:flex; border-top:1px solid #ddd;}
div[id^="layer_"] .pop_box .popup_btn button{width:50%; padding:12px 10px; text-align:center; background:#fff; cursor:pointer;}
div[id^="layer_"] .pop_box .popup_btn button:nth-child(3){border-left:1px solid #ddd;}
div[id^="layer_"] .pop_box .popup_btn button span{display:inline-block; position:relative; margin:0 auto; padding-left:20px; color:#333; font-size:0.813rem; text-align:center; letter-spacing:-0.5px;}
div[id^="layer_"] .pop_box .popup_btn button span:before{content:''; display:block; position:absolute; left:0; top:50%; width:16px; height:12px; margin-top:-6px; background-image:url(/resource/image/popup/ico_popup_btn01.png); background-repeat:no-repeat;}
div[id^="layer_"] .pop_box .popup_btn button:nth-child(3) span:before{background-image:url(/resource/image/popup/ico_popup_btn02.png);}
div[id^="layer_"].layer_privacy{width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:999999;}
div[id^="layer_"] .pop_box.privacy_pop{left:50%; top:50%; height:600px !important; transform:translate(-50%, -50%); padding:0; background:#fff;}
div[id^="layer_"] .pop_box.privacy_pop h4{width:100% !important; margin-top:0 !important; padding:15px 20px; color:#fff; background:#003964; box-sizing:border-box;}
div[id^="layer_"] .pop_box.privacy_pop .cont{height:calc(100% - 60px) !important; margin-top:0 !important; padding:20px 20px 40px; margin-bottom:0 !important;}
div[id^="layer_"] .pop_box.privacy_pop .cont h5{margin-top:20px; color:#003964; font-size:17px; font-weight:700;}
div[id^="layer_"] .pop_box.privacy_pop .cont h5:first-child{margin-top:0;}
div[id^="layer_"] .pop_box.privacy_pop .cont h5 + p{margin-top:5px; color:#555; font-size:15px;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree{margin-top:30px; padding-top:25px; text-align:center; border-top:1px solid #ddd;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree p{color:#555; font-size:15px;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree p span{color:#003964;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree ul{margin-top:10px;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree ul li{display:inline-block; margin-left:10px;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree ul li:first-child{margin-left:0;}
div[id^="layer_"] .pop_box.privacy_pop .cont .agree ul li label{font-size:15px;}
div[id^="layer_"] .pop_box.privacy_pop .btn_close{top:20px;}
div[id^="layer_"] .pop_box.privacy_pop .btn_close:before{background:url(/resource/image/main/popup/btn_close_w.png) no-repeat;}
@media screen and (max-width: 800px){
    .popup_btn button{padding:20px 10px; background:#3c76ed; color:#fff;}
    .popup_btn button:nth-child(3){background:#003964;}
    .popup_btn button span{font-size:1rem; font-weight:700;}
    .popup_btn button span:before{width:19px; height:15px; background-image:url(/resource/image/popup/ico_popup_btn01_m.png);}
    .popup_btn button:nth-child(3) span:before{background-image:url(/resource/image/popup/ico_popup_btn02_m.png);}
    div[id^="layer_"] .pop_box{display:none;}
    div[id^="layer_"] .pop_box.privacy_pop{display:block; min-width:90%;}
    div[id^="layer_"] .pop_box.privacy_pop h4{font-size:1rem;}
    div[id^="layer_"] .pop_box.privacy_pop .cont h5,
	div[id^="layer_"] .pop_box.privacy_pop .cont h5 + p,
	div[id^="layer_"] .pop_box.privacy_pop .cont .agree p,
	div[id^="layer_"] .pop_box.privacy_pop .cont .agree ul li label{font-size:0.875rem;}
}
.pop_box .cont,
.pop_box .cont h4{font-weight:400;}
.pop_box .cont .title{font-size:18px;}
.pop_box .cont .title .blue_bold{font-size:20px; font-weight:700;}
.pop_box .cont .title_h3{position:relative; padding-left:24px;}
.pop_box .cont .title_h3:before{content:''; display:block; position:absolute; left:0; top:7px; width:7px; height:7px; border:5px solid #1a54cb; border-radius:50%;}
.pop_box .cont em{font-style:normal;}
.pop_box .cont .ul_list{margin-top:10px; padding:15px; border:1px solid #ddd; border-radius:10px; background:rgba(255, 255, 255, 0.5); box-sizing:border-box;}
.pop_box .cont .ul_list li{position:relative; margin-top:5px; padding-left:10px;}
.pop_box .cont .ul_list li:before{content:''; display:block; position:absolute; left:0; top:11px; width:3px; height:3px; background:#888; border-radius:50%;}
.pop_box .cont .ul_list li:first-child{margin-top:0;}
.pop_box .cont .img_box{margin-top:10px; border:1px solid #ddd; border-radius:10px; overflow:hidden;}
.pop_box .cont .img_box img{display:block; width:100%;}
.pop_box .cont .p_txt{margin-top:5px; font-size:14px; font-weight:400;}
div[id^="layer_"] .pop_box > h4{width:calc(100% - 30px);}
div[id^="layer_"] .pop_box .popup_btn .allCloseBtn{border-left:1px solid #ddd; box-sizing:border-box;}
div[id^="layer_"] .pop_box .popup_btn .allCloseBtn span{margin-right:5px;}
div[id^="layer_"] .pop_box .popup_btn .closeCnt{display:inline-block; padding:2px 5px; color:#fff; font-style:normal; font-size:0.7rem; font-weight:500; text-align:center; border-radius:50px; background:#888;}
div[id^="layer_"]{left:0 !important; top:0 !important; width:100%; height:100%; background:rgba(0, 0, 0, 0.4);}
div[id^="layer_"] .pop_box{left:50% !important; top:50% !important; transform:translate(-50%, -50%);}
div[id^="layer_"] .pop_box{padding:40px 0 50px; background-position:center bottom;}
div[id^="layer_"] .pop_box .btn_close{right:20px; top:12px;}
div[id^="layer_"] .pop_box > h4{width:100%; margin-top:5px; padding:0 20px; color:#111; font-family:'G-sans'; font-size:22px; line-height:1.8rem; box-sizing:border-box;}
div[id^="layer_"] .pop_box .cont{padding:0 20px; color:#333; font-size:17px; box-sizing:border-box;}
div[id^="layer_"] .pop_box.txt_white > h4,
div[id^="layer_"] .pop_box.txt_white .cont{color:#fff;}
div[id^="layer_"] .pop_box.txt_white .btn_close:before{background:url(/resource/image/main/popup/btn_close_w.png) no-repeat;}
div[id^="layer_"] .pop_box.pop_position{background-position:center top;}
div[id^="layer_"] .pop_box.txt_center > h4{margin-top:40px; text-align:center;}
div[id^="layer_"] .pop_box.txt_center .cont{text-align:center;}
div[id^="layer_"] .pop_box:not(.pop_img) .cont{height:calc(100% - 80px); margin-top:15px; margin-bottom:40px; overflow:hidden; overflow-y:auto;}
div[id^="layer_"] .pop_box:not(.pop_img) .cont span{font-weight:500;}
div[id^="layer_"] .pop_box.pop_img,
div[id^="layer_"] .pop_box.pop_img .cont{height:calc(100% - 43px); padding:0;}
div[id^="layer_"] .pop_box.pop_img .cont h4{height:100%;}
div[id^="layer_"] .pop_box.pop_img > h4{display:none;}
div[id^="layer_"] .pop_box.pop_img br{display:none;}
div[id^="layer_"] .pop_box .popup_btn .btn_box{border-top:0; background:rgba(0, 0, 0, 0.8);}
div[id^="layer_"] .pop_box .popup_btn button{position:relative; border:0 !important; background:none;}
div[id^="layer_"] .pop_box .popup_btn button:before{content:''; display:block; position:absolute; left:0; top:50%; width:1px; height:35%; border-left:1px solid rgba(255, 255, 255, 0.3); transform:translateY(-50%);}
div[id^="layer_"] .pop_box .popup_btn button:first-child:before{display:none;}
div[id^="layer_"] .pop_box .popup_btn button span{color:#fff;}
div[id^="layer_"] .pop_box .popup_btn button span:before{width:14px; height:11px; margin-top:-5.5px; background-image:url(/resource/image/popup/ico_popup_hide.png);}
div[id^="layer_"] .pop_box .popup_btn .closeBtn span:before{width:13px; height:13px; margin-top:-6.5px; background-image:url(/resource/image/popup/ico_popup_dismiss.png) !important;}
div[id^="layer_"] .pop_box .popup_btn .allCloseBtn span:before{width:13px; height:13px; margin-top:-6.5px; background-image:url(/resource/image/popup/ico_popup_allclose.png) !important;}
div[id^="layer_"] .pop_box:not(.pop_img) img{display:block; width:100%;}
div[id^="layer_"] .pop_box.pop_img .img_scroll{height:100%; overflow-y:auto; overflow-x:hidden;}
div[id^="layer_"] .pop_box.pop_img img{display:block; width:100% !important; height:auto !important;}
@media screen and (max-width:1024px){
    div[id^="layer_"] .pop_box{width:auto !important; max-height:70%;}
    /* div[id^="layer_"] .pop_box.pop_img,
	div[id^="layer_"] .pop_box.pop_img .cont{height:100%;}
    */
	div[id^="layer_"] .pop_box > h4{font-size:20px;}
}
@media screen and (max-width:800px){
    div[id^="layer_"] .pop_box{display:block;}
    div[id^="layer_"] .pop_box > h4{font-size:18px;}
    div[id^="layer_"] .pop_box .cont{font-size:16px;}
    div[id^="layer_"] .pop_box.pop_img,
	div[id^="layer_"] .pop_box.pop_img .cont{height:calc(100% - 42px);}
}
@media screen and (max-width:620px){
    div[id^="layer_"] .pop_box{min-width:80% !important;}
    div[id^="layer_"] .pop_box > h4{font-size:17px;}
    div[id^="layer_"] .pop_box .cont{font-size:15px;}
    div[id^="layer_"] .pop_box .popup_btn button{padding:8px;}
    div[id^="layer_"] .pop_box .popup_btn button span{font-size:0.75rem}
    div[id^="layer_"] .pop_box.pop_img,
	div[id^="layer_"] .pop_box.pop_img .cont{height:calc(100% - 33px);}
}
@media screen and (max-width:540px){
    div[id^="layer_"] .pop_box.pop_img,
	div[id^="layer_"] .pop_box.pop_img .cont{height:calc(100% - 32px);}
    div[id^="layer_"] .pop_box .popup_btn button span{font-size:0.6rem}
}
@media screen and (max-width:500px){
    div[id^="layer_"] .pop_box .popup_btn button span{padding-left:0;}
    div[id^="layer_"] .pop_box .popup_btn button span:before{display:none;}
}


/* [템플릿 B 메인] A 컴포넌트(회원정보/검색 팝업)가 쓰는 공통 유틸 (원본: common_re.css) */
.scroll_box{ overflow: hidden; overflow-y: auto; }
.flr{ float: right!important }
.fll{ float: left!important }
.txt_hidden{overflow: hidden!important; position: absolute!important; clip: rect(0 0 0 0)!important; width: 1px!important; height: 1px!important; margin: -1px!important;}
.tal{ text-align: left!important }
.tac{ text-align: center }
.tar{ text-align: right }
.mt5{ margin-top: 5px!important; }
.mt10{ margin-top: 10px!important; }
.mt20{ margin-top: 20px!important; }
.mt30{ margin-top: 30px!important; }
.mt40{ margin-top: 40px!important; }
.mb5{ margin-bottom: 5px!important; }
.mb10{ margin-bottom: 10px!important; }
.mb20{ margin-bottom: 20px!important; }
.mb30{ margin-bottom: 30px!important; }
.mb40{ margin-bottom: 40px!important; }
.ml5{ margin-left: 5px!important; }
.ml10{ margin-left: 10px!important; }
.ml20{ margin-left: 20px!important; }
.pl10{ padding-left: 10px!important; }
.w100{ width: 100px!important; }
.w130{ width: 130px!important; }
.w310{ width: 310px!important; }
.h300{ height: 300px!important; }
.h380{ height: 380px!important; }
.btn_wrap{ width: 100%; text-align: center; }
.btn_regist{ display: inline-block; margin-top:-10px; vertical-align: middle; width: 100%; max-width: 160px; height: 45px; line-height: 45px; text-align: center; padding: 0 7px; text-align: center; color:#fff; font-size: 1.063rem; border-radius: 30px; }
.clearfix::after { content: ''; display: block; clear: both; }
.btn_basic.btn_white { color: #333; border: 1px solid #9d9d9d; }
.btn_wrap .btn_basic.btn_white { background:#dfe4ea !important; color: #2a4175; border-color: #dfe4ea; }