@charset "utf-8";

#hd-login{background-color:transparent;position:absolute;left:20px;top:20px;font-size:1.875rem;font-weight:600;z-index:10;font-family:'Paperlogy-8ExtraBold'}
#ft-logo{position:absolute;right:20px;bottom:20px;display:flex;gap:30px;align-items:center;z-index:10}
#ft-logo .img{height:30px}
#ft-logo .img:last-child{height:50px}
#ft-logo .img img{height:100%}
.login-wrap{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;background-color:#eff1fb}
.login-wrap .login-frm{position:absolute;max-height:90vh;max-width:850px;background:url('../img/bg-login.png') #fff right center no-repeat;top:50%;left:50%;border-radius:var(--radius);padding:100px 500px 100px 50px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.2);box-shadow:5px 5px 25px #333}
.login-wrap .subject{font-size:1.875rem;font-weight:600;margin-bottom:20px}
.login-wrap .input-text{width:300px;height:45px}
.login-wrap .input-text::placeholder{color:rgba(255,255,255,.8)}
.login-wrap .input-text:focus{border:1px solid #fff;outline:0;background-color:transparent}
.login-wrap input.input-text:not(:placeholder-shown){padding-left:5px;background-image:none}
.login-wrap .input-id{background:url('../img/comm/ico-user.png') rgba(255,255,255,.25) 10px center/16px no-repeat;padding-left:40px}
.login-wrap .input-pw{background:url('../img/comm/ico-pw.png') rgba(255,255,255,.25) 10px center/16px no-repeat;padding-left:40px}
.login-wrap .input-id:focus{background-image:none;padding-left:10px}
.login-wrap .input-pw:focus{background-image:none;padding-left:10px}
.login-wrap .check-box{padding-left:25px}
.login-wrap .radio-wrap{justify-content:center;width:100%}
.login-wrap .check-box input[type="checkbox"] + label::before{background-color:transparent;width:18px;height:18px}
.login-wrap .check-box input[type="checkbox"]:checked + label::before{color:var(--color-m)}
.login-wrap .btn-basic{width:100%;margin-top:50px}
.login-wrap .flex-justify-spc{width:100%;display:flex;justify-content:space-between}
.login-wrap .flex-column{display:flex;gap:5px;flex-direction:column}

@media (max-width:1024px){
	.login-wrap .login-frm{max-width:90vw;padding:50px 20px;background-size:70%;background-position-y:bottom}
	.login-wrap .input-text{min-width:220px;width:100%;height:35px}
	.login-wrap .btn-basic{height:35px;margin-top:0}
	.login-wrap .check-box input[type="checkbox"] + label::before{top:2px;line-height:1.4}

	#ft-logo{gap:5px}
	#ft-logo .img{height:15px}
	#ft-logo .img:last-child{height:20px}
}