/* ============================================
           ÊÖ»ú¶ËÊÊÅä
           ============================================ */
@media screen and (max-width: 768px) {
    .middleArea {
        gap: 30px;
        padding: 15px;
    }

    .main-title {
        width: 90vw;
    }

    .login-section {
        width: 90vw;
        border-radius: 16px;
        padding: 40px 20px 30px;
    }

    .login-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .form-input {
        height: 48px;
        font-size: 16px;
        border-radius: 24px;
        padding-left: 42px;
    }

    #itemKey .form-input {
        padding-right: 42px;
    }

    .input-icon {
        top: 24px;
        left: 14px; /* 14px */
        width: 20px;
        height: 20px;
    }

        .input-icon svg {
            width: 18px;
            height: 18px;
        }

    .eye-icon {
        width: 20px;
        height: 20px;
        right: 12px;
    }

    .captcha-img {
        width: 100px;
        height: 48px;
    }

    .submit-btn {
        padding: 12px 0;
        font-size: 18px;
        margin-top: 20px;
    }

    .error-tip {
        font-size: 12px;
    }

    .footer-text {
        font-size: 12px;
        padding: 0 10px;
    }

    .logo {
        top: 20px;
        left: 20px;
        width: 100px;
        height: 48px;
    }
}