@charset "utf-8";

/* login */
body {background:#151A2A url("/theme/deltasc/img/bg_member.png") center no-repeat; background-size:cover; color:#fff; height: 100vh;}
#login_fs {overflow: hidden;}
.mbskin {width:100%; max-width:46rem; height:auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mbskin_box {width:100%; height:auto; padding: 7rem 5rem; background: #060E1A; border-radius: 3rem; box-shadow: 8px 12px 15px -10px rgb(0 0 0 / 40%);}
.mbskin_box h2 {text-align:center;}
.mbskin_box h3 {font-size:3.4rem; font-weight: 300; font-family:"poppins"; text-align:center; margin-top:2rem; color:#E7E7E9;}
.mbskin_box ul {width:100%; padding:50px 0 25px;}
.mbskin_box li {display:flex; width:100%; padding:11px 32px; border:1px solid #5D6167; border-radius:5rem;}
.mbskin_box li label {display:flex; color:#83878D; width: 2.5rem;}
.mbskin_box li.ico_id label svg {width:2.5rem;}
.mbskin_box li.ico_pw label svg {width:2rem;}

.mbskin_box li input {padding:5px; color:#fff; font-weight: 500; outline:none; background:none; box-sizing:border-box; margin-left: 1rem;}
.mbskin_box li:last-child {margin-top:15px;}
.mbskin_box span {display:block; text-align:right; font-size:12px; letter-spacing:0; color:#b75454;}
.mbskin_box span a:hover {color:#D6000F !important;}
.mbskin_box button {display:block; width:100%; height:59px; padding: 2rem; border-radius:50px; font-size:2rem; font-weight:600; position:relative; z-index:0; text-transform:uppercase; letter-spacing:0.03em; background:#666; color:#fff; overflow:hidden; z-index:0;}
.mbskin_box button:after {content: '';  display: block; position: absolute; top: 0; left: 0; width:0; height: 59px; background-color:#D6000F; color:#fff;  transition: all .3s; z-index:-1;}
.mbskin_box button:hover:after {width:100%;}
.mbskin_box button:hover {color:#fff;} 
.chk_box input[type="checkbox"] + label span {width:22px; height:22px; border:1px solid #6A6E76; background:none;}
.chk_box input[type="checkbox"]:checked + label span {background: url("/theme/deltasc/img/chk2.png") no-repeat 50% 50%;}
#login_info {display: flex; justify-content: flex-end; padding: 1rem 1rem;}
.login_if_lpl {text-decoration: underline; color: #696E75; font-weight: 500;}
.btn_card {position: relative; overflow: hidden; width:100%; height:auto;  padding: 2rem; border-radius: 50px; font-size: 2rem; font-weight: 600; display: flex; justify-content: center; align-items: center;  background: #fff; color: #000; margin-top: 3rem; z-index:0;}
.btn_card:after {content: '';  display: block; position: absolute; top: 0; left: 0; width:0; height: 62px; background-color:#D6000F; color:#fff; transition: all .3s; z-index:-1;}
.btn_card:hover:after {width:100%;}
.btn_card:hover {color:#fff;}


/* 아이디/비밀번호 찾기 */
#captcha {display:flex; margin: 1rem 0 25px; padding: 9px 32px; border: 1px solid #5D6167; border-radius: 5rem;}
#captcha #captcha_mp3 {font-size: 0; margin:0 0.4rem; filter: invert(1) contrast(2); opacity: .5;} 
#captcha #captcha_reload {font-size: 0; filter: invert(1) contrast(2); opacity: .5;} 
#captcha_info {display: none !important;}
#captcha button:hover:after {display: none;}
#info_fs {display: flex; align-items: center; width: 100%; padding: 9px 32px; border: 1px solid #5D6167; border-radius: 5rem; margin-top:5rem;}
.sound_only {position: relative; width: 25px; height: auto;}
.sound_only img {display: block; max-width:100%; opacity: .5;}
#mb_email {padding: 5px; color: #fff; font-weight: 500; outline: none; background: none; box-sizing: border-box; margin-left: 1rem; border: 0;}
#captcha #captcha_key {background:#151A2A;border: none;}
#captcha #captcha_img {border: 0; filter: invert(1);}

#max_header {display: none;}
#max_footer {display: none;}

@media screen and (max-width: 568px) {
	.mbskin {width:100%;}
	.mbskin_box {width: 90%; margin: 0 auto; padding:5rem 2rem;}
	.mbskin_box h2 img {display: block; text-align: center; margin: 0 auto; max-width: 50%; width: 18%;}
	.mbskin_box h3 {font-size: 2.5rem;}
	.mbskin_box ul {padding: 30px 0 25px;}
	.mbskin_box li {padding: 11px 20px;}
	.mbskin_box li.ico_id label svg {width:2rem;}
	.mbskin_box li.ico_pw label svg {width:1.7rem;}
	.mbskin_box li input {padding: 0; width: calc(100% - 20px);}
	.mbskin_box button, .btn_card {height: auto; font-size:1.8rem; padding: 1.5rem;}
	.login_if_lpl a {font-size:1.4rem;}
	#info_fs {margin-top: 3rem; padding: 3px 20px;}
	#captcha {padding: 0; border: 0; flex-wrap: wrap;}
	#captcha.m_captcha audio {height: 48px;}
	#captcha.m_captcha #captcha_img {width: 120px; height: auto;}
	#captcha.m_captcha #captcha_key {height: 48px; border-radius: 50px;}
}