@charset "utf-8";

/* Info
 ========================================================================== */
/**
    * 1. Writer: Lee A Jin. (Weaverloft Corp.)
    * 2. Production Date: 2025-09
    * 3. Client: (주)원터치
    * 4. Description: login Style
 */

/*========== login ==========*/
#login {min-height: auto;margin: 0;padding: 0;}
.login-content {display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh;background-color: #fff;}
.login-section-left {display: flex;justify-content: center;align-items: center; width: 100%; max-width: 1060px;}
.login-section-left .login-section { width: 100%; max-width: 525px; margin: 0 40px; background-color: #fff;}
.login-tit-wrap {display: flex; flex-direction: column; gap: 12px;}
.login-tit-wrap .login-logo {width: 150px;}
.login-tit-wrap .login-title {font-size: 16px;font-weight: 600; font-variation-settings: 'wght' 600; color:#707070;}
.login-form-wrap {margin: 60px 0 0;}
.login-form-list {display: flex; flex-direction: column; }
.login-form-list li + li:not(.error-li) {margin-top: 20px;}
.login-form-list li + li.login-btn-list {margin-top: 70px;}
.login-form-list li.password-input {margin-top: 12px;}
.login-form-list .input-box-area {flex-direction: column; gap: 5px;}
.login-form-list .login-btn-list {margin: 25px 0 0;}
.login-form-list .input-label {height: auto; font-size: 18px;font-weight: 600; font-variation-settings: 'wght' 600; color: #707070;}
.login-form-list .input-box {height: 50px;}
.login-form-list .input-box input {height: 50px;padding: 10px 20px;font-size: 16px;}
.login-form-list .input-box input::placeholder {color: #ccc;}
.login-form-list .input-box.password input {padding-right: 44px;}
.login-form-list .input-box.password .eye-btn {right: 10px;width: 34px;background-size: 22px auto;}
.login-section .basic-check-box input[type="checkbox"] + label::before {width: 18px; height: 18px;}
.login-section .basic-check-box input[type="checkbox"] + label {font-size: 16px;font-weight: 600; font-variation-settings: 'wght' 600; color: #aaa;}
.login-section .login-btn .btn-wrap button {font-size: 16px;font-weight: 600; font-variation-settings: 'wght' 600; color: #1460CC; transition: opacity 0.3s;}
.login-section .login-btn .btn-wrap button:hover {opacity: 0.6;}

.login-section-inner .copyright { position: relative;display: flex; align-items: center; justify-content: center; margin: 30px 0 0;}
.login-section-inner .copyright span {position: relative; z-index: 1; font-size: 14px;font-weight: 300; font-variation-settings: 'wght' 300; color: #aaa;}

/* error */
.error-li {margin-top: 20px;}
.login-form-list:has(.input-box-wrap.error) .error-wrap {display: block;}

@media screen and (max-width: 768px) {
    .login-section-left .login-section {margin: 0 24px;}
    .login-tit-wrap .login-logo {width: 120px;}
    .login-tit-wrap .login-title {font-size: 14px;}
    .login-form-list li + li:not(.error-li) {margin-top: 15px;}
    .login-form-list li + li.login-btn-list {margin-top: 40px;}
    .login-form-list .input-label {font-size: 14px;}
    .login-form-list .input-box {height: 42px;}
    .login-form-list .input-box input {height: 42px; font-size: 14px;}
    .login-form-list .input-box.password .eye-btn {width: 28px; background-size: 20px auto;}
    .login-section .basic-check-box input[type="checkbox"] + label {font-size: 14px;}
    .login-section .login-btn .btn-wrap button {font-size: 14px;}
    .login-section-inner .copyright {margin: 20px 0 0;}
    .login-section-inner .copyright span {font-size: 11px;}
}