/* mobile - login */
#login {display: flex; align-items: center; justify-content: center; width: 100%;min-height: calc(100vh - 231px); padding: 0 20px; box-sizing: border-box;}
#login .login-box {width: 100%; height: 100%; margin: 60px auto; max-width: 600px;}
#login .login-box-title h2 {display: block; font-size: 24px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px;}
#login .login-form{display: flex; flex-direction: column;}
#login .login-form input{outline: none; appearance: none; border: none; border: 1px solid #aaa; height: 45px; padding: 0 15px; box-sizing: border-box; max-width: 600px; margin: 0 auto 10px; width: 100%;}
#login .login-form input::placeholder{color: #aaa; font-size: 16px; font-weight: 400; padding: 0; margin: 0; line-height: 45px;}

#login .login-form-text{display: flex; align-items: center; justify-content: flex-end; margin-bottom: 26px;}
#login .login-form-text a{display: block; font-size: 12px; color: #333;}
#login .login-form-text a:first-child{margin-right: 6px; padding-right: 6px; position: relative;}
#login .login-form-text a:first-child::after{content: ''; display: block; width: 1px; height: 10px; background-color: #999; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

#login .login-form button {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 600px; margin: 0 auto; height: 45px; background-color: #333; color: #fff; font-size: 16px; font-weight: 500; border: none; cursor: pointer;}
#login .login-form button.login-btn, #login .login-form button.pw-btn, #login .login-form button.id-btn{background-color: #4cbdc6; color: #fff; margin-bottom: 10px;}
#login .login-form button.join-btn{background-color: #fff; color: #333; border: 1px solid #666;}

/* 비밀번호 찾기 */
#login ul.login-tab{display: flex; align-items: center; justify-content: center; margin-bottom: 40px; border-bottom: 1px solid #eeeeee;}
#login ul.login-tab li{width: 50%; text-align: center;}
#login ul.login-tab li.on{position: relative;}
#login ul.login-tab li.on::after{content: ''; display: block; width: 100%; height: 2px; background-color: #4cbdc6; position: absolute; bottom: -1px; left: 0;}
#login ul.login-tab li a {font-size: 16px; color: #ccc; font-weight: 400; display: flex; align-items: center; justify-content: center; height: 45px;;}
#login ul.login-tab li.on a{color: #4cbdc6; font-weight: 600;}  

#login .pw-form .input-box.tel, #login .id-form .input-box.tel {display: flex; align-items: center; justify-content: space-between;}
#login .pw-form .input-box.tel select, #login .id-form .input-box.tel select{height: 45px; border: 1px solid #aaa; border-radius: 0; padding: 0 15px; box-sizing: border-box; width: 100%; font-size: 14px; background: url('../../img/2024/join/select-arrow.png') no-repeat 90% 50% / 12px 12px; appearance: none; outline: none;}
#login .pw-form .input-box.tel select, #login .pw-form .input-box.tel input, #login .id-form .input-box.tel select, #login .id-form .input-box.tel input{flex: 1; margin: 0;}
#login .pw-form .input-box.tel span.acc, #login .id-form .input-box.tel span.acc{display: block; width: 8px; height: 1.5px; background-color: #444444; margin: 0 5px;}
#login .info-box{margin: 16px 0 40px;}
#login .info-box ol {margin: 0;padding: 0; list-style: none;}
#login .info-box li{margin-bottom: 6px; list-style: none; display: flex; line-height: 1.5;}
#login .info-box li:nth-of-type(3){margin-bottom: 0;}
#login .info-box li span{display: block; font-size: 12px; color: #626262; margin-bottom: 5px;}
#login .info-box li p{font-size: 12px; color: #626262; margin: 0; }


@media (max-width: 500px) {
    #login .login-box-title h2{font-size:18px; margin-bottom: 30px;}
}