@charset "UTF-8";

#login_wrap {width: 100%; max-width: 500px;}

#login_wrap .box {padding: 36px 26px 14px; background: var(--white-gray);}
#login_wrap .box .top {width: 100%; margin-bottom: 20px; font-weight: 500; font-size: 1.125rem; line-height: 1; color: #1E1E1E; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
#login_wrap .box .top .logo {display: block; height: 60px;}
#login_wrap .box .top .logo img {display: block; height: 100%; object-fit: contain;}

.ul-login .td {margin-bottom: 10px;}
.ul-login .td-pw {margin-bottom: 4px;}

.btn-login {width: 100%; margin-top: 30px;}

.check-area {margin-top: 10px;}
input[type=checkbox] + label {font-size: 0.875rem; gap: 6px;}
input[type=checkbox] + label::before {font-size: 1rem;}
input[type=checkbox]:checked + label::before {font-size: 1rem;}

.info {text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin-top: 40px;}
.info li a {font-size: 0.875rem; color: var(--primary);}
.info li::after {content: ''; display: inline-block; width: 1px; height: 10px; background: var(--bone); margin: 0 10px;}
.info li:last-child::after {display: none;}

.etc {text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin-top: 14px;}
.etc li::after {content: ''; display: inline-block; width: 1px; height: 10px; background: var(--bone); margin: 0 10px;}
.etc li:last-child::after {display: none;}
.etc li .btn-popup {font-size: 0.875rem; color: #686868;}

.error {font-weight: 600; font-size: 0.813rem; color: var(--red);}





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    input[type=checkbox] + label::before {margin-right: 6px;}
}



@media screen and (min-width:501px){
    .wrap {overflow-y: auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

    #login_wrap .box {border: var(--border-solid); border-radius: 6px;}
}

@media screen and (max-width:480px){
    .wrap {background: var(--white-gray);}

    #login_wrap .box {padding: 6.25% 3.3% 2.9%;}
    #login_wrap .box .top .logo {height: 30px;}

    .etc {width: calc(100% - 6.6%); margin: 0 auto; padding-top: 2.9%; border-top: var(--border-solid);}
}