@charset "UTF-8";

.full-width:has(.wrap-login-box) {padding:10rem;}
.full-width:has(.wrap-login-box)::before {content:''; position: absolute; left:0; top:0; z-index:-1; width:62.6rem; height:100%; background:#ECF3FD url('../images/obj-logo.png') no-repeat left 5rem center / 32.5rem auto; border-radius:0 5rem 0 0;}
.wrap-login-box {display: flex; gap:8rem; max-width:144rem; width:100%; margin:0 auto; padding-top:2.5rem;} 
.wrap-login-box::before {content:''; display: inline-block; flex-shrink:0; width:60rem; background:url('../images/img-thumb.png') no-repeat left center / 60rem auto; border-radius:1rem;}
.wrap-login {max-width:60rem;}
.wrap-login .title-box::before {content:''; position: absolute; right:0; top:0; z-index: -1; width:17.1rem; height:11.5rem; background:url('../images/obj-login.png') no-repeat right top / 17.1rem auto;}
.wrap-login h2 {font-weight: 800; font-size: 4.6rem; line-height: 1; color:#111;}
.wrap-login h2 strong {color:#1174FF;}
.wrap-login .login-text {margin-top: 2rem; font-weight: 400; font-size: 2rem; color:#666;}
.wrap-login .find-box {display: flex; justify-content: end; max-width:60rem; margin-top: 2.5rem;}
.wrap-login .find-box > a {margin-left:4.5rem;}
.wrap-login .find-box > a:first-child::after {display: none;}
.wrap-login .find-box > a::after {content:''; position: absolute; left:-2.3rem; top:0.5rem; width:1px; height:1.5rem; background:#C5C5C5;}
.wrap-login .id-find,
.wrap-login .pw-find {position: relative; padding-left:2.5rem; font-size: 1.7rem; color:#333;}
.wrap-login .id-find span,
.wrap-login .pw-find span {background:linear-gradient(#1174ff, #1174ff) no-repeat left bottom; background-size:0 1px; transition: background-size .3s; }
.wrap-login .id-find:hover,
.wrap-login .pw-find:hover {color:#1174FF;}
.wrap-login .id-find:hover span,
.wrap-login .pw-find:hover span {background-size:100% 1px;} 
.wrap-login .id-find::before {content:''; position: absolute; left:0; top:0.4rem; width:1.5rem; height:1.5rem; background:url('../images/ic-search.png') no-repeat center / 1.5rem auto;}
.wrap-login .pw-find::before {content:''; position: absolute; left:0; top:0.4rem; width:1.3rem; height:1.6rem; background:url('../images/ic-pw.png') no-repeat center / 1.3rem auto;}
.wrap-login .login-form {position: relative; margin-top: 2.5rem;}
.wrap-login .login-form input {max-width:60rem; width:100%; height:7rem; margin-bottom: 1rem; padding:0 5.5rem; border:0.2rem solid #eee; border-radius:1rem; font-weight: 500; font-size: 1.8rem; color:#111;}
.wrap-login .login-form input:last-child {margin-bottom: 0;}
.wrap-login .login-form input::placeholder {color:#999;}
.wrap-login .login-form input:focus {border:0.2rem solid #111;}
.wrap-login .login-form input[type="text"] {background:url('../images/ic-people.png') no-repeat left 2rem center / 2.1rem auto;}
.wrap-login .login-form input[type="text"]:focus {background:url('../images/ic-people-on.png') no-repeat left 2rem center / 2.1rem auto;}
.wrap-login .login-form input[type="password"] {margin-bottom: 0; background:url('../images/ic-pw2.png') no-repeat left 2rem center / 1.8rem auto;}
.wrap-login .login-form input[type="password"]:focus {background:url('../images/ic-pw2-on.png') no-repeat left 2rem center / 1.8rem auto;}

.wrap-login .login-btn { min-width: 13rem; max-width:60rem; width:100%; line-height: 1; padding: 2.5rem 2rem; text-align: center; color: #fff !important; font-size: 1.7rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; border-radius: 5rem; position: relative; background: none; border: 0.1rem solid #003377; }
.wrap-login .login-btn:before { content:''; width: calc(100% - 1rem); height: calc(100% - 1rem); position: absolute; left: 0.5rem; top: 0.5rem; background: #003377; z-index: -1; border-radius: 5rem; transition: 0.25s; }
.wrap-login .login-btn:hover:before { width: 100%; height: 100%; left: 0; top: 0;}
.wrap-login .login-btn { border-color:#003377; }
.wrap-login .login-btn::before{ background:#003377; }

@media screen and (max-width:1440px) {
    .full-width:has(.wrap-login-box) {padding:8rem 2rem !important;}
    .full-width:has(.wrap-login-box)::before {width:32.6rem;}
}
@media screen and (max-width:1300px) {
    .wrap-login-box {gap:4rem;}
    .wrap-login .title-box::before {display: none;}
}
@media screen and (max-width:1200px) {
    .wrap-login-box::before {width:45rem; background-size:cover;}
}
@media screen and (max-width:1000px) {
    .full-width:has(.wrap-login-box)::before {height:0rem; width:70%; padding-bottom:60%;}
    .wrap-login-box {align-items:center; flex-direction:column; }
    .wrap-login-box::before {width:60rem; height:0; padding-bottom:53%;}
    .wrap-login {max-width:100%;}
    .wrap-login .login-text br {display: none;}
    .wrap-login .find-box {max-width:unset;}
    .wrap-login .login-form input {max-width:unset;}
    .wrap-login .login-btn {max-width:unset;}
}
@media screen and (max-width:768px) {
    .wrap-login h2 {font-size: 3.8rem;}
    .wrap-login .login-text {font-size: 1.8rem;}
}
@media screen and (max-width:650px) {
    .full-width:has(.wrap-login-box) {padding:3rem 2rem 10rem 2rem !important;}
    .full-width:has(.wrap-login-box)::before {padding-bottom: 70%; background:#ECF3FD url('../images/obj-logo.png') no-repeat left -5rem top -5rem / 32.5rem auto;}
    .wrap-login-box {padding-top: 0;}
    .wrap-login-box::before {width:100%; padding-bottom:80%;}
}