:root {
    --color-1: #0F2A4A;
    --vw: 1920 * 100vw;
}

.login-page,
.register-page,
.page {
    --p-t: clamp(40px, calc(107 / var(--vw)),107px);
    --p-b: clamp(40px, calc(140 / var(--vw)),140px);
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: var(--p-t) 0 var(--p-b);
    background: url(../images/bg-1.jpg) no-repeat center / cover;
}

.login-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, calc(80 / var(--vw)),80px);
    padding-top: clamp(20px, calc(40 / var(--vw)),40px);
    border-bottom: 1px solid #ececec;
}

.login-tab {
    position: relative;
    padding-bottom: clamp(8px, calc(14 / var(--vw)),14px);
    font-size: 16px;
    color: #8b8b8b;
    cursor: pointer;
}

.login-tab.active {
    color: #1f2f4f;
    font-size: clamp(18px, calc(22 / var(--vw)),22px);
    font-weight: 600;
}

.login-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    background: #163868;
    transform: translateX(-50%);
}

.login-desc {
    font-size: 14px;
    line-height: calc(20 / 14);
    text-align: center;
    color: #9ca3af;
    margin-bottom: 20px;
}

.captcha-img {
    width: 96px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
    color: #111827;
    user-select: none;
    cursor: pointer;
}

.captcha-code {
    min-width: 96px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #111827;
    user-select: none;
    cursor: pointer;
}

.captcha-img img {
    max-width: 100%;
    max-height: 100%;
}

.login-extra {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.login-extra a {
    font-size: 14px;
    color: #666;
    text-decoration: none;
}

.register-box {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: #666;
}

.agreement-box {
    justify-content: flex-start;
}

.check-box {
    --l: 25px;
    width: var(--l);
    height: var(--l);
    position: relative;
    margin-right: 12px;
}

.check-box input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}

.check-box .check-box__content {
    border: 1px solid #0F2A4A;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.check-box input[type="checkbox"]:checked+.check-box__content {
    background: #0F2A4A;
}

.agreement-box a,
.register-box a {
    color: #00529A;
    text-decoration: none;
    font-weight: 500;
}

.layer {
    width: 540px;
    max-width: calc(100vw - 40px);
}

.layer-header {
    margin-bottom: clamp(12px, calc(33 / var(--vw)),33px);
}

.layer-title {
    text-align: center;
    font-size: clamp(28px, calc(36 / var(--vw)),36px);
    font-weight: 700;
    line-height: calc(54 / 36);
    color: #000;
}

.form-box {
    overflow: hidden;
    box-shadow: 0 5px 20px 0 rgba(15, 42, 74, .1);
    background-color: #fff;
    margin: auto;
}

.form-box__title {
    font-size: clamp(24px, calc(36 / var(--vw)),36px);
    font-weight: bold;
    color: var(--color-1);
    text-align: center;
    margin: clamp(12px, calc(30 / var(--vw)),30px) 0;
}

.form-box__content {
    --p-t: clamp(12px, calc(20 / var(--vw)),20px);
    --p-lr: clamp(12px, calc(40 / var(--vw)),40px);
    --p-b: clamp(12px, calc(40 / var(--vw)),40px);
    width: 460px;
    padding: var(--p-t) var(--p-lr) var(--p-b);
    margin: 0 auto;
    box-sizing: content-box;
}

.form {
    width: 100%;
    margin: 0 auto;
}

.form-item {
    position: relative;
}

.form-item__label {
    font-size: clamp(16px, calc(18 / var(--vw)),18px);
}

.form-item+.form-item {
    margin-top: 20px;
}

.form-item__wrapper {
    width: 100%;
    height: 60px;
    padding: 0 10px 0 clamp(16px, calc(22 / var(--vw)),22px);
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid transparent;
}

.form-item.error .form-item__wrapper {
    border-color: red;
}

.form-item__content {
    height: 100%;
}

.form-item__error {
    font-size: 12px;
    text-align: left;
    color: red;
}

.form-item__inner {
    color: #111827;
    font-size: 16px;
    height: 100%;
    border: none;
    outline: none;
    flex: 1 0 0;
    background: transparent;
    padding: 0 12px;
}

.form-item__inner::placeholder {
    color: #9ca3af;
}

.form-submit__btn {
    width: 100%;
    height: clamp(48px, calc(64 / var(--vw)),64px);
    margin-top: clamp(20px, calc(34 / var(--vw)),34px);
    border: none;
    border-radius: 999px;
    background: var(--color-1);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.form-submit__btn:active {
    transform: scale(1.05);
}

.login-page .form {
    display: none;
}

.login-page .form[data-value="0"] {
    display: block;
}

.register-page .form-box__content {
    font-size: clamp(16px, calc(18 / var(--vw)), 18px);
    translate: 2.5em 0;
}

.register-page .layer-register {
    width: 740px;
}

.register-page .form-box__title {
    text-align: center;
}

.register-page .form-item__label {
    width: 5em;
    text-align: right;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - 20px), -50%);
}
.register-page .form-box {
    padding-bottom: 20px;
}

.forget-password-page .form {
    display: none;
}

.forget-password-page .form[data-step="1"] {
    display: block;
}

.remember-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}
.remember-box .check-box {
    --l: 20px;
}

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

    .login-page,
    .register-page,
    .page {
        min-height: calc(100vh - 50px);
    }
}

@media (max-width: 768px) {
    .register-page .form-box__content {
        translate: 0;
    }
    .register-page .form-item__label {
        width: 100%;
        padding-left: clamp(16px, calc(22 / var(--vw)), 22px);
        margin-bottom: 4px;
        text-align: left;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        display: block  ;
    }
    .login-content {
        padding: 24px 20px 32px;
    }

    .form-box__content {
        width: 100%;
        box-sizing: border-box;
    }
}