@charset "utf-8";

/* admin login */
html, body {height: 100%;}

#adminWrap {position: relative; display: flex; justify-content: center; align-items: center; background: #3A5FF2; width: 100%; min-height: 100%; z-index: 0; padding: 60px 0;}
.login_cont {width: 100%; max-width: 480px; height: 100%; margin: 0 auto;}
.login_box {position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 60px 60px; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border-radius: 20px; z-index: 100; backdrop-filter: blur(10px);}
.login_box .logo {display: block; text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #E6EBF1;}
.login_box .logo > img {height: 32px; margin: 0 auto;}
.login_cont .login_top {margin-bottom: 50px; text-align: center;}
.login_cont .login_top .logo {display: block; background: url('/images/logo.png') no-repeat 50% 50%; background-size: contain; width: 100%; height: 35px;}
.login_cont .login_top h1 {font-size: 40px; font-weight: 700; color: #fff;}
.login_cont .login_top p {font-size: 1rem; color: rgba(255, 255, 255, .8); margin-top: 10px;}
.login_cont .btn {margin-left: 0; margin-right: 0;}

.login_cont .tab {display: flex; justify-content: center;}

.login_tab {position: relative; width: 100%; max-width: 360px; font-size: 0; margin: 0 auto 30px;}
.login_tab:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ddd;}
.login_tab .tab_item {position: relative; width: 50%; display: inline-block; font-size: 1rem; text-align: center; padding: 10px 0; color: #666;}
.login_tab .tab_item.active {color: #111; font-weight: 800;}
.login_tab .tab_item.active:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #111; z-index: 10;}

.login_input {margin-bottom: 15px;}
.login_input > label {display: block; font-size: 15px; font-weight: 600; color: #000; margin-bottom: 5px;}
.login_input > input,
.login_input .input_group > input {width: 100%; height: 50px; border: 0; background-color: var(--ad-light); padding: 0 20px; border-radius: 5px; margin-left: 0; margin-right: 0;}

.login_form {width: 100%; max-width: 360px; margin: 0 auto;}
.login_form {display: block;}


.admin_check {display: flex; justify-content: space-between;}
.admin_check a {font-size: 14px; color: #666; text-decoration: underline; text-underline-position : under;}

.copyright {display: block; font-size: 14px; color: rgba(255, 255, 255, .8); text-align: center; word-break: keep-all; margin-top: 40px;}


/* 아이디/비밀번호 찾기 결과 */
.find_box .check {position: relative; display: block; width: 60px; height: 60px; border: 3px solid var(--ad-success); margin: 0 auto 20px; border-radius: 50%;}
.find_box .check:after {content: ''; display: block; height: 10px; width: 20px; position: absolute; top: 50%; margin-top: -3px; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -ms-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -moz-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 4px solid var(--ad-success); border-left: 4px solid var(--ad-success); border-radius: 0;}
.find_box p {color: #666; text-align: center; word-break: keep-all;}
.find_box p > b {font-weight: 800;}

/* 회원가입 */
.login_cont.join {max-width: 1400px;}
.login_cont.join .login_form {max-width: none;}

.join_wrap {display: flex; gap: 0 40px;}
.join_box {position: relative; width: 100%; padding: 60px 60px; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border-radius: 20px; z-index: 100; backdrop-filter: blur(10px);}
.join_box > img {display: block; width: 120px; margin: 0 auto 30px;}
.join_box > p {font-size: 1rem; color: var(--ad-gray); margin-top: 10px; margin-bottom: 30px;}

/* 약관동의 */
.policy_list li {font-size: 1rem; word-break: keep-all;}
.policy_list > li {margin-bottom: 30px;}
.policy_list > li > p {margin-bottom: 10px; color:#666;}
.policy_list .line_box {padding: 25px 25px; border: 1px solid #eee; background: #fff; margin-bottom: 40px; border-radius:10px}
.policy_list .tit {display: inline-block; position: relative; font-weight: 800; font-size: 16px; margin-bottom: 10px; color:#2e2e2e;}
.policy_list .txt {padding-left: 0;}
.policy_list .line_box {margin-bottom: 0;}
.policy_list .line_box {padding-bottom: 20px;}
.policy_list .line_box strong {display: block; font-weight: 800;}
.policy_list .line_box strong ~ p {padding-bottom: 10px;}
.policy_list .line_box > ul > li + li {margin-top: 10px;}
/* .policy_list .line_box ul li + li {margin-bottom: 5px;} */
.policy_list .line_box ul li > ul {margin: 5px 0;}
.policy_list .line_box ul li > ul > li {margin-left: 10px;}

.policy_list table {width: 100%; border-top: 1px solid #eee; margin-top: 10px;}
.policy_list table th,
.policy_list table td {padding: 6px 10px; text-align: center; vertical-align: middle;}
.policy_list table th {font-weight: 600; background-color: #f8f8f8; border-bottom: 1px solid #eee;}
.policy_list table td {border-bottom: 1px solid #eee; color: #666;}
.policy_list table td[rowspan] {border-left: 1px solid #eee;}

/* 메인용 팝업 - 멀티_싱글 팝업 */
.main_popup{width:100%; height:100%; position:fixed; top:0; right:0; z-index: 80;}
.ms_popup_wrap{width:fit-content; max-width:calc(100% - 40px); min-width:340px; height:fit-content; max-height:90vh; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border-radius:15px; overflow:hidden;}
.ms_popup_con{background:#000; display: flex; flex-wrap: wrap; justify-content: space-between;}
.ms_slide img{max-width:100%; max-height:100%;}
.ms_slide{font-size:0;}
.ms_slide a{display:block; width:100%;}

.ms_tab{background:#000; width:calc(100% - 64px); margin:0 auto; order:3;}
.ms_tab ul{display:flex; min-width:100%; width:fit-content !important;}
.ms_tab ul li + li{border-left: 1px solid #333;}
.ms_tab ul li.swiper-slide:only-child{width:100% !important;}
.ms_tab ul li.swiper-slide{width:fit-content !important; min-width:calc(500px / 3); max-width:500px; text-align:center; padding:5px; font-size:0;}
.ms_tab ul li.swiper-slide span{display:inline-block; color:#fff; font-size:15px; opacity: 0.4; cursor: pointer; padding:0 10px;}
.ms_tab ul li.swiper-slide-thumb-active span{opacity:1;}

.ms_remote{display:block; width:32px; height:32px; text-align: center; line-height: 34px;}
.ms_remote.prev{order:2; border-right: 1px solid #333;}
.ms_remote.next{order:4; border-left:1px solid #333;}

.ms_popup_foot{background:#fff; padding:10px; font-size:14px; display:flex; justify-content: space-between; align-items: center;}
.ms_popup_foot .modal_close{border:1px solid #ddd; border-radius:4px; padding:5px 15px;}

/* swiper */
.swiper, .swiper-container {margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block}

/* **************************************** *
 * responsive
 * **************************************** */

@media (max-width:1400px){

	/* admin login type02 */
	#adminWrap {padding: 4% 4%;}

	/* 회원가입 */
	.join_wrap {max-width: none; width: 100%;}

}

@media (max-width: 1024px) {
	.ms_slide img{width:100% !important; height:auto; max-height:100%; object-fit: contain;}
}

@media (max-width:1200px){
	.login_box,
	.join_box {padding: 60px 40px;}

}

@media (max-width: 992px) {

}

@media (max-width:767px){


}

@media (max-width:576px){
	.adminLoginArea form{padding: 26px 24px 33px;}
	.message{padding:12px;}

	/* 회원가입 */
	.join_wrap {flex-direction: column; gap: 20px 0;}
	.ms_slide img{width:100% !important; height:auto; max-height:100%; object-fit: contain;}
}

@media (max-width: 420px) {
	/* admin login type02 */
	.login_box,
	.join_box {padding: 40px 8%;}
	.login_tab {max-width: none;}
	.login_form {max-width: none;}
}