﻿@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 #3a7ecd; background:#fff; 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:#3a7ecd;}
.login_layer .login_close i {font-size:2.4rem; color:#fff;}
.login_layer .login_form > h1 {font-size:2.8rem; font-weight:500; color:#333; 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:#555; 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:#555; 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:#fff; padding:1.5rem 0; margin-top:1rem; border:none; background:#3a7ecd;}

@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:48px; display:flex; justify-content:space-between; align-items:center; gap:0 50px; padding:10px 10px 10px 15px; background:var(--black);}
.popup_title h3 {flex:1; font-size:16px; font-weight:500; color:#eee; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.popup_title button {font-size:18px; color:var(--white); opacity:0.4;}

/* 내용영역 */
.popup_cont {width:100%; height:calc(100vh - 96px); padding:20px; margin:48px auto; background:var(--white); overflow-y:auto;}
.popup_cont.no_btns {height:calc(100vh - 48px);} /* 버튼이 존재하지 않는 경우 */

/* 버튼영역 */
.popup_btns {
	width:100%; height:48px; position:fixed; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:4px; 
	text-align:center; padding:8px 16px; border-top:1px solid #eee; background:#f2f3f8;
}
.popup_btns a, .popup_btns button {height:30px !important; font-size:13px !important; border-radius:50em;}


/* 레이어팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.layer_popup {
	position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99; 
	width:auto; min-width:480px; 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:12px 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.5;}

/* 내용영역 */
.layer_cont {width:100%; min-height:200px; padding:20px;}

/* 버튼영역 */
.layer_btns {
	width:100%; height:50px; position:sticky; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:4px; 
	text-align:center; padding:8px 16px; 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) {
	.layer_popup {min-width:80vw;}
}
@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; padding:20px;}
}
@media screen and (max-width :769px) {
}
@media screen and (max-width :481px) {
}

/* 반려사유 */
.reject_popup .layer_cont, .reject_popup .popup_cont {display:flex;}
.reject_popup .rejectbox {flex:1; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.4; padding:8px; border-radius:3px; border:1px solid #ddd; background:#f7f8fc;}
.reject_popup .rejectbox textarea {flex:1; height:100%;}
.reject_popup .rejectbox .reject_pre {flex:1; height:100%; padding:8px; border:1px solid #ddd; background:var(--white);}
.reject_popup .rejectbox pre {font-family:var(--fontKor); white-space:pre-wrap;}

