@charset "UTF-8";

::placeholder {font-size: 14px;}
input[type='text'], input[type='password'], input[type='search'], input[type='date'], input[type='email'], input[type='tel'], select {font-size: 16px;}

#login_wrap {position: relative; width: 100%; max-width: 500px; margin: 0 auto;}

.move-area {display: grid; grid-template-columns: repeat(2, 1fr);}
.move-area .btn-move {width: 100%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid var(--highlight); font-size: 16px;}
.move-area .btn-move.on {background: var(--highlight); color: #fff;}

#login_wrap .box {padding: 36px 26px 14px; background: #F8F8F8;}
#login_wrap .box .top {width: 100%; margin-bottom: 20px; font-weight: 700; font-size: 18px; line-height: 1; color: #1E1E1E; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end; column-gap: 20px;}
#login_wrap .box .top .logo {display: block; height: 40px;}
#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; font-size: 18px;}

.ul-check {display: -webkit-flex; display: flex; justify-content: start; align-items: center; column-gap: 20px;}
.check-area {margin-top: 10px;}
input[type=checkbox] + label {font-size: 16px; gap: 10px;}
input[type=checkbox] + label::before {font-size: 20px;}
input[type=checkbox]:checked + label::before {font-size: 20px;}

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

.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(--gray); margin: 0 10px;}
.etc li:last-child::after {display: none;}
.etc li .btn-popup {font-size: 14px; color: #686868;}

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





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    #login_wrap .box .top .txt {margin-left: 20px;}
    .check-area {margin-right: 20px;}
    .check-area:last-child {margin-right: 0;}
    input[type=checkbox] + label::before {margin-right: 10px;}
}



@media screen and (min-width:993px){
    #login_wrap {margin: 100px auto;}
    .move-area .btn-move {height: 50px; padding: 15px;}
}

@media screen and (max-width:992px){
    .wrap {padding-bottom: 0;}
    input, select {height: 40px; line-height: 40px;}
    .move-area .btn-move {height: auto; padding: 12px 15px; font-size: 14px;}
    #login_wrap .box .top .logo {height: 36px;}
}

@media screen and (min-width:769px) and (max-width:992px){
    #login_wrap {margin: 80px auto;}
}

@media screen and (max-width:768px){
}

@media screen and (min-width:481px) and (max-width:768px){
    #login_wrap {margin: 60px auto;}
}

@media screen and (min-width:481px){
    .wrap {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
    #login_wrap .box {border: 1px solid var(--border); border-radius: 0 0 6px 6px;}
    .move-area .btn-move.login {border-radius: 6px 0 0 0;}
    .move-area .btn-move.join {border-radius: 0 6px 0 0;}
}

@media screen and (max-width:480px){
    .wrap {background: #F8F8F8;}
    input, select {height: 40px; line-height: 40px;}
    #login_wrap .box {padding: 32px 16px 14px; border-bottom: 1px solid var(--border);}
    #login_wrap .box .top .logo {height: 30px;}

    .etc {padding-left: 16px; padding-right: 16px;}
}