@charset "utf-8";


/* 로그인팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.login_popup {width:680px;}
.login_popup * {word-break:keep-all;}

.login_layer {
	width:100%; max-width:600px; max-height:90vh; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99; 
	padding:8rem 4rem 6rem 4rem; border-top:5px solid var(--subcolor); background:var(--white); overflow:auto;
}
.login_layer .login_close {position:absolute; top:-5px; right:0; display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; width:50px; height:50px; background:var(--subcolor);}
.login_layer .login_close i {font-size:2.4rem; color:var(--white);}
.login_layer .login_form > h1 {font-size:2.8rem; font-weight:500; color:var(--fontcolor1); text-align:center;}
.login_layer .login_form > h1 strong {font-weight:bold;}
.login_layer .login_form > p {font-size:1.5rem; line-height:1.4; text-align:center; color:var(--fontcolor2); margin-top:1.5rem;}
.login_layer .login_box {width:500px; text-align:center; margin:3rem auto 0 auto; padding-top:3rem; border-top:1px solid #ddd; overflow:hidden;}
.login_layer .login_box div {display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; font-size:1.6rem; color:var(--fontcolor2); margin-bottom:2rem;}
.login_layer .login_box ul {width:100%; overflow:hidden;}
.login_layer .login_box ul li {width:100%; border:1px solid #ddd;}
.login_layer .login_box ul li + li {margin-top:1rem;}
.login_layer .login_box ul li input {width:100%; height:5rem; border:none;}
.login_layer .login_box ul li input.lgID {background:url('../images/content/icn_id.jpg') 15px center no-repeat; padding-left:4.5rem;}
.login_layer .login_box ul li input.lgPW {background:url('../images/content/icn_pwd.jpg') 15px center no-repeat; padding-left:4.5rem;}
.login_layer .login_box button {display:block; width:100%; font-size:1.8rem; text-align:center; color:var(--white); padding:1.5rem 0; margin-top:1rem; border:none; background:var(--subcolor);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.login_popup {top:0; left:0; width:100% !important; -height:100vh !important;}
	.login_layer {width:100%; max-width:100%; height:100vh; max-height:100vh; left:0; top:0; transform:none; display:flex; justify-content:center; align-items:center; padding:8rem 3rem 6rem 3rem;}
	.login_layer .login_form > h1 strong {display:block;}
	.login_layer .login_box {width:100%;}
}
@media screen and (max-width: 481px){
	.login_layer .login_form > p br {display:none;}
}


/* 팝업창 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.web_popup {position:fixed; left:0; height:0; width:100%; min-width:320px; height:100%; background:var(--white); overflow:hidden;}

/* 타이틀 */
.popup_title {position:fixed; left:0; top:0; z-index:5; width:100%; height:50px; display:flex; justify-content:space-between; align-items:center; gap:0 50px; padding:10px 10px 10px 15px; background:var(--black); box-shadow:0 0 15px 0 rgba(0,0,0,0.2);}
.popup_title h3 {flex:1; font-size:18px; color:#eee; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.popup_title button {font-size:20px; color:var(--white); opacity:0.4;}

/* 내용영역 */
.popup_cont {width:100%; height:calc(100vh - 110px); padding:30px 20px; margin:50px auto 60px; background:var(--white); overflow-y:auto;}
.popup_cont.no_btns {height:calc(100vh - 60px);} /* 버튼이 존재하지 않는 경우 */

/* 버튼영역 */
.popup_btns {
	width:100%; height:60px; position:fixed; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:3px; 
	text-align:center; padding:10px 20px; border-top:1px solid #eee; background:#f2f3f8;
}
.popup_btns a, .popup_btns button {height:30px !important; font-size:14px !important; border-radius:50em;}


/* 레이어팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.layer_popup {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99; min-width:50%; max-width:1000px; max-height:90vh; border-radius:10px; background:var(--white); overflow:auto;}

/* 타이틀 */
.layer_title {width:100%; display:flex; justify-content:space-between; align-items:center; gap:0 50px; padding:15px 20px; border-bottom:1px solid #ccc; background:var(--white);}
.layer_title h3 {flex:1; font-size:18px; font-weight:bold; color:var(--fontcolor1); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.layer_title button {font-size:20px; color:var(--fontcolor1); opacity:0.3;}

/* 내용영역 */
.layer_cont {width:100%; min-height:200px; padding:30px;}

/* 버튼영역 */
.layer_btns {
	width:100%; height:60px; position:sticky; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:3px; 
	text-align:center; padding:10px 20px; border-top:1px solid #eee; background:#f2f3f8;
}
.layer_btns a, .layer_btns button {height:30px !important; font-size:14px !important; border-radius:50em;}

@media screen and (max-width :1200px) {
}
@media screen and (max-width :1025px) {
	.layer_popup {top:0; left:0; transform:unset; width:100% !important; height:100% !important; max-width:100%; max-height:100vh;}
	.layer_title {position:sticky; left:0; top:0; z-index:2;}
	.layer_cont {min-height:100vh;}
}
@media screen and (max-width :769px) {
}
@media screen and (max-width :481px) {
}