@charset "utf-8";
/* ==========================================================================
   modal.css — 공통 모달/팝업 베이스 (was popup.css)
   도메인별 확장: pages/{domain}/{domain}_popup.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   shell — 오버레이 + 풀스크린 래퍼
   -------------------------------------------------------------------------- */
.modal-wrap {overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10001;box-sizing:border-box;}
/* modalPopup 이 .open + prop('hidden',false) — 패치 없이 표시 */
.modal-wrap.open {display:block;}
.overlay {display:block;position:fixed;left:0;top:0;width:100%;bottom:0;background:#000;opacity:0.7;filter:alpha(opacity='70');z-index:10000;}

/* --------------------------------------------------------------------------
   content — 패널 / 타이틀 / 닫기
   -------------------------------------------------------------------------- */
.modal-wrap .modal-content {padding:60px 40px 60px;margin:0 auto;position:relative;width:100%;min-width:300px;background:#fff;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;-webkit-perspective:1000;-moz-perspective:1000;-o-perspective:1000;perspective:1000;border-radius:0;}
.modal-content {max-width:660px;}
.modal_popup_close {position:absolute;right:20px;top:20px;display:block;width:20px;height:20px;background:url(/resources/images/common/mnav_close.png) no-repeat center center;background-size:100% 100%;}
.modal-title {font-size:24px;color:#000;font-family:'yoonb';padding-bottom:10px;}
.modal-content.type_titS {padding:60px 35px 35px;}
.modal-content.type_titS .modal-title {font-size:17px;padding:0 0 60px 0;font-family:yoonb;}
.modal-content.type_titS .modal-cont {padding:0 65px;}

/* --------------------------------------------------------------------------
   actions — 하단 버튼
   -------------------------------------------------------------------------- */
.modal-content .btn_area {text-align:center;}
.btn_area button {display:inline-block;height:50px;line-height:50px;max-width:180px;width:100%;margin:0 0;font-size:14px;font-family:'Marian','yoon','roboto','돋움','AppleGothic',Dotum;}
.btn_area button.full {width:100%;max-width:inherit;}
.btn_black {background:#000;color:#fff;border:1px solid #000;}
.btn_area.trans ul {margin-left:0;}
.btn_area.trans ul li {float:none;width:auto;padding:0 0 0 0;display:inline;margin:0 3px;}
.btn_area.trans ul li button {max-width:180px;}

/* --------------------------------------------------------------------------
   main_popup_noti — 본문 위 고정 공지 팝업 (#content 기준)
   -------------------------------------------------------------------------- */
#content {position:relative;}
.main_popup_noti {position:absolute;z-index:25;top:20px;left:50%;transform:translateX(-50%);width:100%;max-width:560px;min-width:320px;background:#fff;border:1px solid #333;}
.main_popup_noti .chk_PU_inner {text-align:center;padding:55px 30px 25px;}
.main_popup_noti .chk_PU_inner img {width:100%;max-width:100%;}
.main_popup_noti h2 {font-size:17px;font-family:'yoonb';margin-bottom:10px;color:#000;}
.main_popup_noti .pop_close {background:url('/resources/images/common/mnav_close.png') no-repeat center center;width:20px;height:20px;position:absolute;right:20px;top:20px;background-size:100% 100%;}
.main_popup_noti p.grayt {padding-top:5px;font-size:13px;color:#a0a0a0;}
.main_popup_noti dl {text-align:center;vertical-align:middle;}
.main_popup_noti dt {border-bottom:1px solid #a0a0a0;padding-bottom:40px;}
.main_popup_noti dd {padding:35px 0;}
.main_popup_noti .btn_area {margin-top:20px;}

/* --------------------------------------------------------------------------
   viewport helpers — 모달 내 PC/MO 노출 전환
   -------------------------------------------------------------------------- */
.w_img {display:inline;}
.m_img {display:none;}
.w_only {display:block;}
.m_only {display:none;}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */
@media (max-width:768px) {
	.w_img {display:none;}
	.m_img {display:inline;}
	.w_only {display:none;}
	.m_only {display:block;}
}

@media (max-width:640px) {
	.main_popup_noti {width:calc(100% - 20px);max-width:100%;min-width:300px;left:10px;top:10px;transform:translateX(0);}
	.btn_area.trans ul {margin-left:-5px;}
	.btn_area.trans ul li {float:left;width:50%;padding:0 0 0 5px;margin:0 0;}
	.btn_area.trans ul li button {max-width:100%;line-height:43px;height:42px;font-size:14px;}
	.btn_area button {height:42px;line-height:43px;}
	.modal-content.type_titS .modal-title {padding:0 0 35px 0;}
}

@media (max-width:320px) {
	.left_con .step_finish .btn_area button {max-width:130px;}
}

/* --------------------------------------------------------------------------
   dialogs — message / confirm / layer popup
   초기 숨김은 HTML hidden / prop('hidden') — display:none 과 이중 관리하지 않음
   -------------------------------------------------------------------------- */
#commonMessageBox {position : absolute;background-color: #fff;z-index:10002}
#commonMessageBox .btn_layer_close {position: absolute;
	right: 20px;
	top: 20px;
	display: block;
	width: 20px;
	height: 20px;
	background: url(/resources/images/common/mnav_close.png) no-repeat center center;
	background-size: 100% 100%;text-indent:-99999px}
#commonMessageBox .head{padding-bottom: 15px;font-size: 18px;font-family: 'yoonb';line-height: 1.4;color: #000;text-align: center;}
#commonMessageBox .head h1{font-size:24px;}
#commonMessageBox .pop-contents{max-width: 360px;padding: 55px 30px 25px;}
#commonMessageBox .txt_message {font-size: 14px;color: #000;text-align: center;line-height: 1.5;}
#commonMessageBox .btn_area{text-align: center;margin-top:20px;}
#commonMessageBoxBg {display: block;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url(/resources/images/bg_cover.png) repeat 0 0;z-index: 10001;}

#commonConfirmBox {position : absolute;background-color: #fff;z-index:10002}
#commonConfirmBox .btn_layer_close {position: absolute;
	right: 20px;
	top: 20px;
	display: block;
	width: 20px;
	height: 20px;
	background: url(/resources/images/common/mnav_close.png) no-repeat center center;
	background-size: 100% 100%;text-indent:-99999px}
#commonConfirmBox .head{padding-bottom: 15px;font-size: 18px;font-family: 'yoonb';line-height: 1.4;color: #000;text-align: center;}
#commonConfirmBox .head h1{font-size:24px;}
#commonConfirmBox .pop-contents{max-width: 360px;padding: 55px 30px 25px;}
#commonConfirmBox .txt_message {font-size: 14px;color: #000;text-align: center;line-height: 1.5;}
#commonConfirmBox .btn_area{text-align: center;margin-top:20px;}
#commonConfirmBoxBg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:url('/resources/images/bg_pop.png') repeat; z-index:10001}

#commonConfirmBox .btn_area, #commonMessageBox .btn_area {text-align: center}
#commonConfirmBox .btn_area .btn_black, #commonMessageBox .btn_area .btn_black {min-width:115px;padding:0 10px;margin:0 auto;background:#000;color:#fff;font-size:14px;display:inline-block;height:40px;line-height:40px;vertical-align:top;}
#commonConfirmBox .btn_area .btn_gray, #commonMessageBox .btn_area .btn_gray {min-width:115px;padding:0 10px;margin:0 auto;background:#777;color:#fff;font-size:14px;display:inline-block;height:40px;line-height:40px;vertical-align:top;}
.ui-iframe-style {margin:50px auto 0 auto}
#commonConfirmBox > .btn_area, #commonMessageBox > .btn_area {margin-bottom:20px;}
.common_layer_popup {overflow:auto;overflow-y:scroll;position:fixed;top:0;left:50%;width:100%;height:100%;z-index:10002;}
.common_layer_popup:not(.open) {display:none;}
.common_layer_popup.open {display:block;}
.common_layer_popup .pop_con {position:absolute;width:760px;top:50%;left:50%;margin:50px 0;padding:40px;background:#fff}
.common_layer_popup .btn_popClose {display:block;position:absolute;width:21px;height:21px;top:15px;right:15px;font-size:0;background:url(/resources/images/common/btn_wpopclose.png) no-repeat center center;}
#common_layer_popupBg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:url('/resources/images/bg_cover.png') repeat; z-index:10000}

@media screen and (max-width: 768px) {
#commonMessageBox .head{padding-bottom: 15px;font-size: 16px;font-family: 'yoonb';line-height: 1.4;color: #000;text-align: center;}
#commonMessageBox .head h1{font-size:24px;}
#commonMessageBox .pop-contents{max-width: 360px;padding:35px 15px 15px;}
#commonMessageBox .txt_message {font-size: 13px;color: #000;text-align: center;line-height: 1.5;}
#commonConfirmBox .btn_area{text-align: center;margin:15px;}
#commonConfirmBox .btn_area .btn_black, #commonMessageBox .btn_area .btn_black {width:100%;min-width:inherit;padding:0 5px;font-size:13px;display:inline-block;height:40px;line-height:40px;border-radius:0}
#commonConfirmBox .btn_area .btn_gray, #commonMessageBox .btn_area .btn_gray {width:100%;min-width:inherit;padding:0 5px;font-size:13px;display:inline-block;height:40px;line-height:40px;border-radius:0}
#commonConfirmBox .btn_area span{width:50%;float:left}
}