@charset "UTF-8";

.wrap {overflow-y: auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

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

#login_wrap .box {padding: 30px 26px 14px; background: #F9F9F9; border: var(--border-solid);}
#login_wrap .box h1 {width: 100%; height: 30px; margin-bottom: 14px; font-weight: 500; font-size: 1.125em; color: #555555; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
#login_wrap .box h1 .logo {width: 100%; max-width: fit-content; height: 100%;}
#login_wrap .box h1 .logo img {width: 100%; height: 100%;}

#login_box {width: 100%;}
#id_box {margin-bottom: 10px;}
#pw_box {margin-bottom: 4px;}
#id_box input, #pw_box input {border: var(--border-solid); padding: 10px; width: 100%;}

#loginBtn {width: 100%; padding: 10px 0; background: var(--highlight); color: white; cursor: pointer; font-size: 1.125em; margin-top: 30px; border-radius: 6px;}

.auto_login_area {margin: 10px 0 40px;}
.auto_login_area input[type=checkbox] + label {font-size: 14px;}
.auto_login_area input[type=checkbox] + label::before {font-size: 16px; margin-right: 6px;}
.auto_login_area input[type=checkbox]:checked + label::before {font-size: 16px; margin-right: 6px;}

.info {text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.info li a {font-size: 0.875em; color: #707070;}
.info li::after {content: ''; display: inline-block; width: 1px; height: 10px; background: #707070; 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: 20px;}
.etc li::after {content: ''; display: inline-block; width: 1px; height: 10px; background: #707070; margin: 0 10px;}
.etc li:last-child::after {display: none;}
.etc li a {font-size: 0.875em; color: #707070;}

.error {font-size: 0.813em; color: red; font-weight: 600;}



@media screen and (min-width:1201px){
    .popup {min-width: 1000px;}
}

@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
    .wrap {padding: 100px 50px;}
    .popup {min-width: calc(100% - 100px);}
}

@media screen and (max-width:480px){
    .wrap {padding: 100px 16px;}
    #login_wrap .box h1 {height: 24px;}
    .popup {min-width: calc(100% - 32px);}
}