@charset "utf-8";

/* 팝업 */
#modal_wrap{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1002;font-size:15px;line-height:1.5;letter-spacing:-.5px;background-color:rgba(0,0,0,.4);font-family:'notokr-regular'}
#modal{overflow:hidden;position:relative;top:50%;transform:translateY(-50%);max-width:768px;height:85vh;margin:20px auto 0;border-radius:20px;background-color:#fff}
#modal.active{margin-top:0}
#modal .inner{overflow-y:scroll;height:100%;padding:30px 70px 145px}
#modal .tit_area{margin-bottom:25px;text-align:center;color:#333}
#modal .tit_area img{width:150px;margin-bottom:10px}
#modal .tit_area .tit{margin-bottom:5px;font-size:24px;font-family:'notokr-medium'}
#modal .alert{visibility:hidden;padding:8px 0;border-radius:8px;font-size:12px; word-break:keep-all;text-align:center;color:#ff2222;letter-spacing:-.1px}

/* 탭 */
#modal .modal_tabs{overflow:hidden;margin-bottom:10px}
#modal .modal_tabs label{float:left;width:47.5%;height:52px;border-radius:8px;border:1px solid #e5e5e5;font-size:16px;color:#5b5b5d;text-align:center;line-height:50px;background-color:#fff;font-family:'notokr-medium'}
#modal .modal_tabs label.on{border-color:#00c73c;color:#fff;background-color:#00c73c}
#modal .modal_tabs label:hover{cursor:pointer}
#modal .modal_tabs input{display:none}

#modal dl{position:relative;padding-left:110px}
#modal dl.first{padding-bottom:20px;margin-bottom:30px;border-bottom:2px solid #f2f2f2}
#modal dl dt{position:absolute;left:0;top:0;width:85px;font-size:19px;color:#222;line-height:1.4;text-align:center;white-space:pre-line;font-family:'notokr-medium'}

/* 폼 */
#modal input::placeholder{color:#9f9daa}
#modal .md_cont{display:none}
#modal .md_cont.cont01{display:block}
#modal .md_cont ul:after{display:block;content:"";visibility:hidden;clear:both}
#modal .md_cont .form_area li{float:left;width:calc(50% - 5px);margin-bottom:10px}
#modal .md_cont .form_area li:nth-child(even){float:right}
#modal .md_cont select, #modal input[type=text]{width:100%;height:52px;padding-left:20px;margin-right:12px;border:1px solid #e5e5e5;border-radius:8px;font-size:14px;color:#5b5b5d;background-color:#f9f9f9;box-shadow:none;font-family:'notokr-regular'}
#modal input[type=text]::placeholder{color:#5b5b5d}
#modal .md_cont select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(/sh_img/include/search/arr_down.png) 92% center no-repeat;background-size:14px}
#modal .rad_tabs select{float:left;width:50%}
#modal .md_cont .form_area li.full{width:100%}
#modal .md_cont .form_area li.tel{float:left}
#modal .full input,#modal .full select{width:calc((100% / 3) - 9px);margin-right:0}
#modal .full select{margin-left:7px}
#modal .rad_tabs label{width:calc(25% - 11px)}
#modal .rad_tabs label.mgl{margin-left:10px}
#modal .tel select, #modal .tel input[type=text]{width:30%;margin-right:0}

/* 약관동의 */
#modal .agr_area{margin:10px 0 0}
#modal .agr_area li{float:left;width:calc(50% - 5px);margin-bottom:10px;font-size:14px;letter-spacing:-1px;color:#222}
#modal .agr_area li:nth-child(even){float:right}
#modal .agr_area li input{margin-right:5px}
#modal .agr_area li em{padding-left:10px;font-style:normal;color:#046fd9}
#modal .agr_area li a{color:#046fd9;vertical-align:222}
#modal .agr_area li a:hover{text-decoration:underline;cursor:pointer}

/* 버튼 */
#modal .comp_btn{display:block;width:calc(50% - 5px);height:55px;margin:0 auto;border:none;border-radius:8px;font-size:16px;color:#fff;text-align:center;line-height:55px;background-color:#60686e;font-family:'notokr-medium'}
#modal .comp_btn_mo{display:none;position:fixed;bottom:0;left:0;width:100%;height:55px;border:none;border-radius:0;font-size:15px;color:#fff;line-height:55px;background-color:#046fd9;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:'notokr-medium'}

#modal .cancel{position:absolute;right:20px;top:20px;z-index:101}
#modal .cancel:hover{cursor:pointer}

/* 안내 */
#modal .guide{display:flex;justify-content:center;align-items:center;position:absolute;left:0;bottom:0;width:100%;height:145px;padding-top:15px;font-size:14px;color:#7c7c7c;background-color:#fff}
#modal .guide img {height:100%;margin-right:50px}

/* 완료 */
#modal.comp{display:table;height:470px;margin-top:-235px}
#modal.comp .txt_area{display:table-cell;vertical-align:middle;text-align:center}
#modal.comp .txt_area .btxt{margin-bottom:10px;font-size:24px;font-family:'notokr-bold'}
#modal.comp .txt_area .comp_btn{width:47.5%;height:55px;margin:60px auto 0;border:none;border-radius:8px;font-size:16px;color:#fff;text-align:center;line-height:55px;background-color:#92c9ee;font-family:'notokr-medium'}
#modal.comp .txt_area .comp_btn:hover{cursor:pointer}

/* 반응형 [s] */
@media (max-width:768px){
#modal{position:absolute;top:auto;bottom:0;height:calc(100% - 55px);transform:none;padding-top:35px;border-radius:16px 16px 0 0}
#modal_wrap{padding:0;font-size:14px}
#modal .inner{padding:0 24px 65px}
#modal dl{padding:0}
#modal dl dt{position:relative;left:auto;top:auto;width:100%;margin-bottom:10px;white-space:normal;font-size:16px;text-align:left}
#modal .md_cont select, #modal input[type=text]{padding-left:10px;margin-right:6px}
#modal .md_cont .form_area li{width:calc(50% - 3px);margin-bottom:6px}
#modal .md_cont .form_area li.tel{width:100%}
#modal .tel select, #modal .tel input[type=text]{width:calc((100% / 3) - 7px);margin:0}
#modal .full input,#modal .full select{margin-right:0}
#modal .full select{margin-left:6px}
#modal .rad_tabs label{width:calc(25% - 6px);font-size:14px}
#modal .rad_tabs label.mgl{margin-left:6px}
#modal .agr_area li{font-size:13px}
#modal .guide{position:relative;bottom:auto;left:auto;height:65px;padding-top:5px;border:1px solid #e1e1e1;border-radius:15px;font-size:12px;letter-spacing:-1px}
#modal .guide img {margin-right:5px}
#modal .comp_btn{display:none}
#modal .comp_btn_mo{display:block}
#modal .cancel{top:10px;right:12px}
#modal .cancel svg{width:30px;height:30px}
}
@media (max-width:480px){
#modal{height:calc(100% - 10px)}
#modal .md_cont .form_area li.tel{width:100%}
#modal .md_cont select, #modal input[type=text]{font-size:13px}
#modal .rad_tabs label{font-size:13px}
#modal .agr_area li{float:none;width:100%}
#modal .cancel svg{width:24px;height:24px}
}
@media (max-width:365px){
#modal .inner{padding:0 20px 65px}
#modal .md_cont .form_area li{width:100%}
}
/* 반응형 [e] */