@charset "utf-8";

/* admin login type02 */
html, body {height: 100%;}
#adminWrap {background-color: #f1f5f8; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100%;}
.login_cont {width: 100%; max-width: 1440px; height: 840px; overflow: hidden; box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .08); border-radius: 20px;}
.login_box {position: relative; display: flex; flex-direction: column; justify-content: center; float: left; width: 480px; padding: 0 60px; background-color: #fff; height: 100%;}
.login_box .login_top {margin-bottom: 50px;}
.login_box .login_top .admin_logo {margin-bottom: 40px;}
.login_box .login_top .admin_logo img {height: 40px;}
/* .login_box h2 {} */

.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: #666; margin-bottom: 5px;}
.login_input input {width: 100%; height: 50px; border: 0; background-color: #f4f4f4; padding: 0 20px; margin: 0; border-radius: 5px;}

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


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

.login_box .copyright {font-size: 14px; color: #999; text-align: center; word-break: keep-all; margin-top: 40px;}

.login_bg {position: relative; float: left; width: calc(100% - 480px); height: 100%; background: url('/images/cms/common/login_bg.jpg') no-repeat 50% 50%; background-size: cover; background-color: #111; padding: 60px 60px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);}
.login_bg .admin_logo {position: absolute; top: 40px; left: 40px;} 
.login_bg .admin_logo img {height: 40px;}

/* 아이디/비밀번호 찾기 결과 */
.find_box .check {position: relative; display: block; width: 60px; height: 60px; border: 3px solid var(--ad-primary); 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-primary); border-left: 4px solid var(--ad-primary); border-radius: 0;}
.find_box p {color: #666; text-align: center; word-break: keep-all;}
.find_box p > b {font-weight: 800;}

/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width: 1440px) {
	#adminWrap {padding: 4% 4%;}
	.login_cont {height: 680px;}
}

@media (max-width:1200px){

	/* admin login type02 */
	.login_cont {max-width: none;}

}

@media (max-width: 1024px) {
	/* admin login type02 */
	.login_box {width: 50%;}
	.login_bg {width: 50%;}
}

@media (max-width:768px){

	/* admin login type02 */
	.login_cont {max-width: 420px;}
	.login_box {width: 100%;}
	.login_bg {display: none;}

}


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

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