@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333333;
        --main-block-color: #162938;
        --main-text-white-color :#fff;
        --main-red-color: #AE0000;
        --main-err-msg-color: #AE0000;
        --main-success-msg-color: #00A600;
        --main-padding: 10px;
    }

    *{
        margin:0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins','sans-serif';
    }

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: url('https://www.littlebai86.synology.me/littlebai86_storage/imgsortable/image/background/background.jpg') no-repeat;
        background-size: cover;
        background-image: center;
    }

    header{
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        padding: 20px 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 99;
    }

    .invalid-err-msg{
        color:var(--main-err-msg-color);
        margin-top: 10px;
    }

    .invalid-success-msg{
        color:var(--main-success-msg-color);
        margin-top: 10px;
    }

    input:-internal-autofill-previewed,
    input:-internal-autofill-selected {
        transition: background-color 5000s ease-in-out 0s !important;
    }


    .logo{
        font-size: 2em;
        color: var(--main-text-white-color);
        user-select: none;
    }
    .navigation a{
        position: relative;
        font-size: 1.1em;
        color: var(--main-text-white-color);
        text-decoration: none;
        font-weight: 500;
        margin-left: 40px;
    }

    .navigation a::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 3px;
        background: var(--main-text-white-color);
        border-radius: 5px;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s;
    }

    .navigation a:hover::after{
        transform-origin: left;
        transform: scaleX(1);
    }

    .navigation .btnMember-popup{
        padding: 0 5px;
        height: 50px;
        background: transparent;
        border: 2px solid var(--main-text-white-color);
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.1em;
        color: var(--main-text-white-color);
        font-weight: 500;
        /* margin-left: 40px; */
        transition: .5s;
    }
    .navigation .btnLogin-popup{
        width: 130px;
        height: 50px;
        background: transparent;
        border: 2px solid var(--main-text-white-color);
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.1em;
        color: var(--main-text-white-color);
        font-weight: 500;
        margin-left: 40px;
        transition: .5s;
    }
    .navigation .btnMember-popup:hover,
    .navigation .btnLogin-popup:hover{
        background: var(--main-text-white-color);
        color: var(--main-block-color);
    }

    .member-wrapper{
        position: relative;
        width: 400px;
        height: 440px;
        background: transparent;
        border: 2px solid rgba(255,255,255,.5);
        border-radius: 20px;
        backdrop-filter: blur(20px);
        box-shadow: 0 0 30px rgba(0,0,0,.5);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transform: scale(0);
        transition: transform .5s ease,height .2s ease;
        z-index: 100;
    }

    .member-wrapper.active-btnPopup{
        transform: scale(1);
    }

    .member-wrapper.register{
        height: 750px;
    }

    .member-wrapper .form-box{
        width: 100%;
        padding:40px
    }
    /* 登入框 */
    .member-wrapper .form-box.login{
        transition: transform .18s ease;
        transform: translateX(0);
        /* display: none; */
    }
    /* 註冊框 Start 會將登入框向左移400px 然後隱藏 */
    .member-wrapper.register .form-box.login{
        transition: none;
        transform: translateX(-400px);
        /* display: none; */
    }
    /* 註冊框一開始在400px位子 */
    .member-wrapper .form-box.register{
        position: absolute;
        transition: none;
        transform: translateX(400px);
    }
    /* 將註冊框平滑移動到登入框位子 */
    .member-wrapper.register .form-box.register{
        transition: transform .18s ease;
        transform: translateX(0);
    }
    /* 註冊框 End */

    /* 忘記密碼框 Start */
    .member-wrapper.forgot_password .form-box.login{
        transition: none;
        transform: translateX(-400px);
        /* display: none; */
    }

    .member-wrapper .form-box.forgot_password{
        position: absolute;
        transition: none;
        transform: translateX(400px);
    }

    .member-wrapper.forgot_password .form-box.forgot_password{
        transition: transform .18s ease;
        transform: translateX(0);
    }
    /* 忘記密碼框 End */

    /* 驗證密碼框 Start */
    .member-wrapper.verify_code .form-box.login{
        transition: none;
        transform: translateX(-400px);
        /* display: none; */
    }

    .member-wrapper .form-box.verify_code{
        position: absolute;
        transition: none;
        transform: translateX(400px);
    }

    .member-wrapper.verify_code .form-box.verify_code{
        transition: transform .18s ease;
        transform: translateX(0);
    }
    /* 驗證密碼框 End */

    /* 修改密碼框 Start */
    .member-wrapper.password_update .form-box.login{
        transition: none;
        transform: translateX(-400px);
        /* display: none; */
    }

    .member-wrapper .form-box.password_update{
        position: absolute;
        transition: none;
        transform: translateX(400px);
    }

    .member-wrapper.password_update .form-box.password_update{
        transition: transform .18s ease;
        transform: translateX(0);
    }
    /* 修改密碼框 End */
    .member-wrapper .icon-close{
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
        height: 45px;
        background: var(--main-block-color);
        font-size: 2em;
        color: var(--main-text-white-color);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-bottom-left-radius: 20px;
        cursor: pointer;
        z-index: 1;
    }

    .member-wrapper .form-box h2{
        font-size: 2em;
        color: var(--main-block-color);
        text-align: center;
    }

    .member-wrapper .input-box{
        position: relative;
        width: 100%;
        height: 50px;
        border-bottom: 2px solid var(--main-block-color);
        margin-top: 20px;
    }

    .member-wrapper .input-box label{
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        font-size: 1em;
        color: var(--main-block-color);
        font-weight: 500;
        pointer-events: none;
        transition: .5s;
    }

    .member-wrapper .input-box label.active,
    .member-wrapper .input-box input:focus~label{
        top: -5px;
    }

    .member-wrapper .input-box input{
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        font-size: 1em;
        color: var(--main-block-color);
        font-weight: 600;
        padding: 0 35px 0 5px;
    }

    .member-wrapper .input-box .icon{
        position: absolute;
        right: 8px;
        font-size: 1.2em;
        color: var(--main-block-color);
        line-height: 57px;
    }

    .member-wrapper .remember-forgot{
        font-size: .9em;
        color: var(--main-block-color);
        font-weight: 500;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }

    .member-wrapper .remember-forgot label input{
        accent-color: var(--main-block-color);
        margin-right: 3px;
    }

    .member-wrapper .remember-forgot a{
        color: var(--main-block-color);
        text-decoration: none;
    }

    .member-wrapper .remember-forgot a:hover{
        text-decoration: underline;
    }

    .member-wrapper .customized-btn{
        width: 100%;
        height: 45px;
        background: var(--main-block-color);
        border: none;
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1em;
        color: var(--main-text-white-color);
        font-weight: 500;
    }

    .member-wrapper .member-wrapper-switch-form-box
    .member-wrapper .login-forgot_password,
    .member-wrapper .login-register{
        font-size:.9em;
        color: var(--main-block-color);
        text-align: center;
        font-weight: 500;
        margin: 25px 0 10px;
    }

    .member-wrapper .member-wrapper-switch-form-box,
    .member-wrapper .login-forgot_password,
    .member-wrapper .login-register p a{
        color: var(--main-block-color);
        text-decoration: none;
        font-weight: 600;
    }

    .member-wrapper .member-wrapper-switch-form-box:hover,
    .member-wrapper .login-forgot_password p a:hover,
    .member-wrapper .login-register p a:hover{
        text-decoration: underline;
    }