@charset "utf-8";

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

#adminWrap {position: relative; display: flex; justify-content: center; align-items: center; background: #004a9a; background-image: url('/images/cms/common/login_bg.jpg'); background-size: cover; background-position: center center; 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: auto; margin: 0 auto;}
.login_box .logo > span {display: inline-block; margin: 0 auto; padding: 4px 16px; background-color: var(--ad-border); border-radius: 10px; font-weight: 600; margin-top: 5px;}
.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;}


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

@media (max-width:1400px){

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

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

}

@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;}
}

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