input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px rgba(ff,ff,ff,1) inset; /*淡淡的白*/
    transition: background-color 5000s ease-in-out 0s; /*透明*/
}

/* [2026-09-11] 目的：註冊頁改為與新版登入頁一致的雙欄會員介面，並統一 LINE、Google、Email 註冊操作。 */
body #ContentData {
    min-height: calc(100vh - 138px) !important;
    margin: 0 !important;
    padding: 56px 32px 72px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 18% 42%, rgba(93, 140, 225, .12), transparent 31%),
        radial-gradient(circle at 84% 82%, rgba(75, 201, 151, .10), transparent 27%),
        #f7f9fc !important;
}

body #ContentData .SignupBlock {
    width: min(1080px, 100%) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 470px) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(56px, 8vw, 120px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #ContentData .SignupLogoBlock,
body #ContentData .SignupTypeBlockMob,
body #ContentData .SignupTypeBlockMobOl {
    display: none !important;
}

body #ContentData .SignupShowBlock {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    text-align: center !important;
}

body #ContentData .SignupShowBlock::before {
    content: "MEMBER REGISTRATION";
    display: block;
    margin-bottom: 14px;
    color: #3569b2;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .22em;
}

body #ContentData .SignupShowTxt {
    display: block !important;
    float: none !important;
    width: auto !important;
    color: #12233f !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -.04em !important;
}

body #ContentData .SignupShowSubTxt {
    max-width: 470px !important;
    margin: 22px auto 0 !important;
    color: #72809a !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
}

body #ContentData .SignupTypeBlock,
body #ContentData .SignupInputBlock {
    grid-column: 2 !important;
    position: relative !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-color: #dde4ef !important;
}

body #ContentData .SignupTypeBlock {
    grid-row: 1 !important;
    padding: 36px 38px 20px !important;
    border: 1px solid #dde4ef !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 22px 60px rgba(32, 54, 88, .13) !important;
}

body #ContentData .SignupTypeBlock::before {
    content: "建立會員帳號";
    display: block;
    margin-bottom: 24px;
    color: #12233f;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

body #ContentData .SignupType {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #ContentData .SignupType > li {
    width: 100% !important;
    height: 48px !important;
    margin: 0 0 10px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body #ContentData .SignupThirdPartyLine {
    color: #fff !important;
    background: #43cf7c !important;
    border: 1px solid #43cf7c !important;
}

body #ContentData .SignupThirdPartyLine::before {
    content: "LINE";
    margin-right: 12px;
    font-size: 11px;
    font-weight: 800;
}

body #ContentData .SignupThirdPartyGoogle {
    color: #26334b !important;
    background: #fff !important;
    border: 1px solid #d6deea !important;
}

body #ContentData .SignupThirdPartyGoogle:hover,
body #ContentData .SignupThirdPartyLine:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(30, 53, 86, .10) !important;
}

body #ContentData .SignupInputBlock {
    grid-row: 2 !important;
    padding: 10px 38px 36px !important;
    border: 1px solid #dde4ef !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 28px 60px rgba(32, 54, 88, .13) !important;
}

body #ContentData .SignupInputBlock::before {
    content: "或使用 Email 註冊";
    display: block;
    margin: 0 0 22px !important;
    padding-top: 18px;
    border-top: 1px solid #e5eaf2;
    color: #8a96aa;
    text-align: center;
    font-size: 13px;
}

body #ContentData .SignupInputEMAIL,
body #ContentData .SignupInputPW {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

body #ContentData .SignupInputTitle,
body #ContentData .SignupInputPASSWORD {
    width: 100% !important;
    margin: 0 0 7px !important;
    float: none !important;
}

body #ContentData .SignupInputTitleTxt {
    color: #26334b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body #ContentData .SignupInputValue {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

body #ContentData .SignupInputValueTxt {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    color: #1f2d45 !important;
    background: #fff !important;
    border: 1px solid #d6deea !important;
    border-radius: 11px !important;
    outline: none !important;
    font-size: 14px !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

body #ContentData .SignupInputValueTxt:focus {
    border-color: #3b78cf !important;
    box-shadow: 0 0 0 3px rgba(59, 120, 207, .12) !important;
}

body #ContentData #AgreePolicy {
    margin: 2px 6px 0 0 !important;
    accent-color: #214b85;
}

body #ContentData label[for="AgreePolicy"] {
    color: #697790 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

body #ContentData label[for="AgreePolicy"] a {
    color: #285fae !important;
}

body #ContentData .SignupBtn {
    width: 100% !important;
    margin: 24px 0 0 !important;
}

body #ContentData .SignupBtn > div,
body #ContentData .Signup {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
}

body #ContentData .Signup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: #182946 !important;
    border: 0 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: background .18s ease, transform .18s ease !important;
}

body #ContentData .Signup:hover {
    background: #0f1d33 !important;
    transform: translateY(-1px) !important;
}

/* [2026-09-11] 目的：認證信寄送期間反灰註冊按鈕並顯示旋轉提示，避免等待 SMTP 時誤認頁面失效。 */
body #ContentData .Signup.is-submitting,
body #ContentData .Signup.is-submitting:hover {
    background: #8793a6 !important;
    cursor: wait !important;
    pointer-events: none !important;
    transform: none !important;
}

body #ContentData .Signup.is-submitting .SIGN-IN {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body #ContentData .Signup.is-submitting .SIGN-IN::before {
    content: "";
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: signupSubmittingSpin .7s linear infinite;
}

@keyframes signupSubmittingSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
    body #ContentData {
        min-height: auto !important;
        padding: 34px 18px 52px !important;
    }

    body #ContentData .SignupBlock {
        max-width: 470px !important;
        display: block !important;
    }

    body #ContentData .SignupShowBlock {
        margin: 0 0 26px !important;
    }

    body #ContentData .SignupShowBlock::before {
        margin-bottom: 8px;
        font-size: 11px;
    }

    body #ContentData .SignupShowTxt {
        font-size: 30px !important;
    }

    body #ContentData .SignupShowSubTxt {
        margin-top: 12px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    body #ContentData .SignupTypeBlock {
        padding: 28px 24px 18px !important;
    }

    body #ContentData .SignupTypeBlock::before {
        font-size: 24px;
    }

    body #ContentData .SignupInputBlock {
        padding: 8px 24px 28px !important;
    }
}

a {
    text-decoration: none;
    color: #4a4a4a;
}
.PopupWindow {
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0%;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
}

.PopupContent {
    border-color: #d0d1d1;
    border-image: none;
    border-style: solid;
    border-width: 1px 3px 3px 1px;
    box-sizing: border-box;
    width: auto;
    z-index: 2000;
    display: inline-block;
    background-color: #fff;
    max-width: 90%;
    min-width:200px;
    max-height: calc(100% - 20px);
    overflow: auto;
    text-align: left;
    padding: 5px;
    
}
    .PopupContent li {
        list-style-type: none;
    }
.PopupBG {
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0%;
    opacity: 0.8;
    z-index: 1000;
    display: block;
    position: fixed;
    background-color: #FFFFFF;
}
.PopupMessage {
    min-height: 30px;
    margin: 10px 0;
    text-align: center;
}
.PopupTitleTr {
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.5;
    text-align: center;
    color: #000000;
    height: 27px;
    letter-spacing: 1px;
    position: relative;
}
.nipLine {
    background-color: #d0d1d1;
    height: 1px;
    margin: 0 auto;
    width: 270px;
}
#block {
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0%;
    opacity: 0.8;
    z-index: 1000;
    position: fixed;
    background-color: #FFFFFF;
}
.BtnConfirm {
    width: 196px;
    height: 40px;
    background-color: #000000;
    letter-spacing: 0.5px;
    text-align: center;
    color: #ffffff;
    line-height: 40px;
    cursor:pointer;
    margin:0 auto;
}
body {
    font-family: Jaldi, Helvetica, 微軟正黑體, sans-serif;
    font-size:14px;
}
/*.logo {
    font-size: 36px;
}*/
@media screen and (min-width: 768px) {
    .SignupThirdParty {
        -webkit-transition: all .5s linear;
        -moz-transition: all .5s linear;
        -o-transition: all .5s linear;
        -ms-transition: all .5s linear;
        transition: all .5s linear;
    }

    .SignupBlock {
        margin-top: 180px; /*width:50%;
        background:gray;*/
        width: 420px;
        height: 640px;
    }

    .SignupLogoBlock, .SignupShowBlock {
        width: 100%;
    }

    .SignupLogo {
        width: 30%;
        max-width: 86px;
        max-height: 25px;
        cursor: pointer;
    }

    .SignupShowBlock {
        margin-top: 20px;
    }

    .SignupShowTxt {
        width: 30%;
        max-width: 365px;
        max-height: 18px;
        object-fit: contain;
        font-weight: normal;
        
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }

    .SignupTypeBlock {
        width: 100%;
        margin-top: 1em;
    }

    .SignupTypeBlockMob, .SignupTypeBlockMobOl {
        display: none;
    }

    .SignupType {
        width: 70%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .SignupThirdPartyTwitter, .SignupThirdPartyWeibo {
        line-height: 40px;
        margin-top: 20px;
        background-color: rgba(236, 239, 241, 0.8);
        max-width: 280px;
        max-height: 40px;
        vertical-align: center;
        color: #4a4a4a;
        cursor: pointer;
    }

    .SignupThirdPartyFB {
        line-height: 40px;
        margin-top: 32px;
        background-color: rgba(236, 239, 241, 0.8);
        max-width: 280px;
        max-height: 40px;
        vertical-align: center;
        color: #4a4a4a;
        cursor: pointer;
    }

    .SignupThirdPartyTxtFB, .SignupThirdPartyTxtWB, .SignupThirdPartyTxtTW {

        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: center;
        text-transform: uppercase;
        position: relative;
       
        cursor: pointer;
    }

    .SignupLogo {
        content: url("/images/store/iohll/iohll-logo.svg");
    }

        .SignupLogo:hover {
            content: url("/images/store/iohll/iohll-logo-over.svg");
        }

    .SignupThirdPartyTwitter:hover, .SignupThirdPartyWeibo:hover, .Signup:hover {
        background-color: #000000;
        color: #ffffff;
    }

    .SignupThirdPartyFB:hover {
        background-color: #000000;
        color: #ffffff;
    }

    .SignupThirdPartyTxtFB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        /*background: url("/images/store/iohll/fblogo.svg") no-repeat 0px center;*/ /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .SignupThirdPartyTxtWB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/weiboLogo.svg") no-repeat 0px center; /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .SignupThirdPartyTxtTW::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/twitterLogo.svg") no-repeat 0px center; /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .SignupThirdPartyFB:hover .SignupThirdPartyTxtFB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        /*background: url("/images/store/iohll/fblogo-over.svg") no-repeat 0px center;*/
    }

    .SignupThirdPartyWeibo:hover .SignupThirdPartyTxtWB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/weiboLogo-over.svg") no-repeat 0px center;
    }

    .SignupThirdPartyTwitter:hover .SignupThirdPartyTxtTW::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/twitterLogo-over.svg") no-repeat 0px center;
    }

    .SignupThirdPartyFB:active .SignupThirdPartyTxtFB::before, .SignupThirdPartyWeibo:active .SignupThirdPartyTxtWB::before, .SignupThirdPartyTwitter:active .SignupThirdPartyTxtTW::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0px;
        border-radius: 4px 0 0 4px;
        background: url("") no-repeat 0px center;
    }

    .SignupThirdPartyTxtFB:active, .SignupThirdPartyTxtWB:active, .SignupThirdPartyTxtTW:active {
        position: relative;
        padding: 12px 0px 11px 0px;
    }

    .Remember-me-Copy {
        width: 82px;
        height: 15px;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-align: center;
        color: #4a4a4a;
        vertical-align: top;
    }

    .Signup {
        height: 40px;
        background-color: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        font-weight: 600;
        cursor: pointer;
    }
        .Signup:hover {
            background-color: rgba(0, 0, 0, 1);
        }
    .SignupForgetPassword {
        height: 14px;
        font-size: 12px;
        font-style: italic;
        text-align: center;
        color: #000000;
        float: right;
    }

    .SignupCheckBox {
        float: left;
    }

    .SignupLabelWeb {
        margin-top: 7px;
        width: 70%;
        max-width: 280px;
    }

    .SignupLabelMob {
        display: none;
    }

    .SignupLabel {
        margin-top: 7px;
        width: 70%;
        max-width: 280px;
    }

    .SignupBtn {
        width: 70%;
        max-width: 280px;
        padding-top: 17px;
        cursor: pointer;
    }

    .New-Customer {
        width: 90px;
        height: 18px;
        font-size: 14px;
        font-style: italic;
        text-align: center;
        color: #4a4a4a;
    }

    .Start-Here {
        margin-left: 18px;
        width: 62px;
        height: 18px;
        font-size: 14px;
        font-style: italic;
        text-align: center;
        color: #000000;
    }

    .NewOrStart {
        margin-top: 33px;
    }

    .RemberCheckBox {
        margin: 0;
    }

    .SIGN-IN {
        width: 40px;
        height: 15px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: center;
        color: #ffffff;
        line-height: 3.5em;
    }

    a {
        text-decoration: underline;
        color: #4a4a4a;
    }

        a:hover {
            text-decoration: underline;
            color: #000000;
        }

        a:active {
            text-decoration: underline;
            width: 91px;
            font-weight: bold;
            color: #000000;
        }

    .SignupInputTitleTxt {
        float: left;
        height: 15px;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: 0.5px;
        text-align: center;
        color: #000000;
    }

    .SignupInputValueTxt {
        height: 45px;
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        border-bottom: 1px solid #9b9b9b;
    }

    .SignupInputTitle {
        margin-top: 18px;
        width: 70%;
        max-width: 280px;
    }

    .SignupInputPASSWORD {
        margin-top: 15px;
        width: 70%;
        max-width: 280px;
    }

    .SignupInputValue {
        width: 70%;
        max-width: 280px;
    }

    .jardsonaraujogmail {
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: 0.5px;
        color: #4a4a4a;
    }

    .SignupTypeMore {
        margin-top: 22.6px;
        margin-bottom: 65px;
        cursor: pointer;
    }

    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        opacity: 0;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        opacity: 0;
    }

    :-ms-input-placeholder {
        /* IE 10+ */
        opacity: 0;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        opacity: 0;
    }

    .Already-Have-an-acco {
        height: 18px;
        font-size: 14px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }

    u {
        text-decoration: none;
    }
}

@media screen and (max-width: 767px) {
    .SignupThirdParty {
        -webkit-transition: all .5s linear;
        -moz-transition: all .5s linear;
        -o-transition: all .5s linear;
        -ms-transition: all .5s linear;
        transition: all .5s linear;
    }

    .SignupBlock {
        margin-top: 70px;
        max-width: 750px;
    }

    .SignupLogoBlock {
        width: 100%;
    }

    .SignupShowBlock {
        width: 215px;
        margin-top: 47px;
    }

    .SignupLogo {
        max-height: 37px;
        cursor: pointer;
    }

    .SignupShowTxt {
        min-height: 18px;
        font-size: 15px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }

    .SignupTypeBlock {
        display: none;
        width: 100%;
        margin-top: 1em;
    }

    .SignupTypeBlockMob {
        width: 100%;
        margin-top: 52px;
    }

    .SignupTypeBlockMobOl {
        width: 100%;
        margin-top: 27px;
    }

    .SignupType {
        width: 80.5%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .SignupThirdPartyTxtFB, .SignupThirdPartyTxtWB, .SignupThirdPartyTxtTW {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: center;
        text-transform: uppercase;
        position: relative;
        padding: 12px 0px 11px 43px;
        cursor: pointer;
        font-style: normal;
        font-stretch: normal;
    }

    .SignupLogo {
        content: url("/images/store/iohll/mob-iohll-logo.svg");
    }

    .SignupThirdPartyTxtFB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 43px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/mob-fb.svg") no-repeat 0px center; /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .SignupThirdPartyTxtWB::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 43px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/mob-wb.svg") no-repeat 0px center; /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .SignupThirdPartyTxtTW::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 43px;
        border-radius: 4px 0 0 4px;
        background: url("/images/store/iohll/mob-tw.svg") no-repeat 0px center; /*background-size: 20px 20px;
        background-position: 0px center;*/
    }

    .slide-wrapper:active .SignupThirdPartyTxtFB::before, .slide-wrapper:active .SignupThirdPartyTxtWB::before, .slide-wrapper:active .SignupThirdPartyTxtTW::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0px;
        border-radius: 4px 0 0 4px;
        background: url("") no-repeat 0px center;
    }

    .slide-wrapper:active, .Signup:active {
        background-color: #000000;
        color: #ffffff;
    }

    .Remember-me-Copy {
        width: 82px;
        height: 15px;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-align: center;
        color: #4a4a4a;
        vertical-align: top;
    }

    .Signup {
        height: 43px;
        background-color: rgba(236, 239, 241, 0.8);
        color: rgb(74, 74, 74);
        cursor: pointer;
    }

    .SignupForgetPassword {
        height: 18px;
        font-size: 15px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
        float: right;
    }

    .SignupCheckBox {
        float: left;
    }

    .SignupLabel {
        margin-top: 7px;
        width: 80.5%;
        max-width: 610px;
    }

    .SignupLabelWeb {
        display: none;
    }

    .SignupLabelMob {
        margin-top: 15px;
        width: 80.5%;
        max-width: 610px;
    }

    .SignupBtn {
        width: 80.5%;
        max-width: 610px;
        max-height: 43px;
        padding-top: 17px;
        cursor: pointer;
    }

    .New-Customer {
        width: 97px;
        height: 18px;
        font-size: 15px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }

    .Start-Here {
        margin-left: 10px;
        width: 67px;
        height: 18px;
        font-size: 15px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }

    .NewOrStart {
        margin-top: 34px;
    }

    .RemberCheckBox {
        margin: 0;
    }

    .SIGN-IN {
        width: 52px;
        height: 20px;
        font-size: 15px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        text-align: center;
        color: #ffffff;
        line-height: 3em;
    }

    a {
        text-decoration: underline;
        color: #4a4a4a;
    }

        a:hover {
            text-decoration: underline;
            color: #000000;
        }

        a:active {
            text-decoration: underline;
            width: 91px;
            font-weight: bold;
            color: #000000;
        }

    .SignupInputTitleTxt {
        float: left;
        width: 35px;
        height: 15px;
        font-size: 11px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: 0.5px;
        text-align: center;
        color: #000000;
    }

    .SignupInputValueTxt {
        height: 43px;
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        border-bottom: 1px solid #9b9b9b;
    }

    .SignupInputTitle {
        display: none;
        margin-top: 18px;
        width: 80.5%;
        max-width: 610px;
    }

    .SignupInputPASSWORD {
        display: none;
        margin-top: 15px;
        width: 80.5%;
        max-width: 610px;
    }

    .SignupInputValue {
        width: 80.5%;
        max-width: 610px;
    }

    .jardsonaraujogmail {
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: 0.5px;
        color: #4a4a4a;
    }

    .SignupTypeMore {
        margin-top: 22.6px;
        margin-bottom: 65px;
        cursor: pointer;
    }

    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        opacity: 0.5;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        opacity: 0.5;
    }

    :-ms-input-placeholder {
        /* IE 10+ */
        opacity: 0.5;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        opacity: 0.5;
    }

    .SignupInputEMAIL {
        margin-top: 43px;
    }

    .SignupInputPW {
        margin-top: 18px;
    }

    @ import url(http: // fonts.googleapis.com / css?family=Josefin + Slab:100);

    .animate {
        transition: transform 0.3s ease-out;
    }

    .slider-wrap {
        width: 80.5%;
        max-width: 610px;
    }

    .slider {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .ms-touch.slider {
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none; /* Hides the scrollbar. */
        -ms-scroll-chaining: none; /* Prevents Metro from swiping to the next tab or app. */
        -ms-scroll-snap-type: mandatory; /* Forces a snap scroll behavior on your images. */
        -ms-scroll-snap-points-x: snapInterval(0%, 100%); /* Defines the y and x intervals to snap to when scrolling. */
    }

    .holder {
        width: 300%;
        height: 100%;
        overflow-y: hidden;
    }

    .slide-wrapper {
        width: 33.333%;
        height: 100%;
        float: left;
        position: relative;
        overflow: hidden;
        line-height: 43px;
        background-color: rgba(236, 239, 241, 0.8);
        max-height: 43px;
        color: #4a4a4a;
        cursor: pointer;
    }

    .slide {
        height: 100%;
        position: relative;
    }

    .dots li {
        border-radius: 8px;
        cursor: pointer;
        display: inline-block;
        height: 10px;
        width: 10px;
        margin: 0 4px;
        opacity: 1;
        text-indent: -999em;
        transition: background 0.5s ease 0s, opacity 0.5s ease 0s;
        background-color: #d7d7d7;
    }

        .dots li.active {
            background-color: #4a4a4a;
        }

    .Already-Have-an-acco {
        height: 18px;
        font-size: 14px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        text-align: center;
        color: #4a4a4a;
    }
}

.canSend {
    color: #4a4a4a;
}

/* [2026-03-24] 目的：註冊頁補上 footer 顯示樣式（品牌 footer 或 fallback footer） */
#Footer,
#SignupFooter {
    width: min(460px, 94vw);
    margin: 8px auto 28px;
    color: #666;
}

.SignupFooterInner {
    border-top: 1px solid #e8e3d8;
    padding-top: 12px;
    text-align: center;
}

.SignupFooterLinks {
    font-size: 13px;
    line-height: 1.8;
}

.SignupFooterLinks a {
    color: #4a4a4a;
    text-decoration: underline;
}

.SignupFooterCopy {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8a8a;
}

/* [2026-03-24] 目的：註冊頁第一版視覺升級（僅 HTML/CSS，不調整任何後端或 JS 流程） */
body {
    background: #f6f5f1;
    color: #222;
}

/* [2026-03-24] 目的：避免影響站台既有 header 版面，主容器不改成 flex */
#MainContent {
    min-height: 0;
    display: block;
    padding: 0;
}

.SignupBlock {
    width: min(460px, 94vw) !important;
    height: auto !important;
    margin: 110px auto 40px !important;
    background: #fff;
    border: 1px solid #ece8df;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
    padding: 32px 30px 30px;
    box-sizing: border-box;
}

.SignupLogoBlock {
    margin-bottom: 8px;
}

.SignupShowBlock {
    margin-top: 0 !important;
    margin-bottom: 14px;
}

.SignupShowTxt {
    display: block;
    font-size: 22px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: #181818 !important;
    letter-spacing: .01em;
    line-height: 1.25;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    text-align: center !important;
    white-space: normal;
    word-break: keep-all;
}

/* [2026-03-24] 目的：註冊頁主標下方補充副標，清楚說明註冊價值 */
.SignupShowSubTxt {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6c6c6c;
    line-height: 1.6;
    text-align: center;
    width: 100%;
}

.SignupType {
    width: 100% !important;
}

.SignupTypeBlock {
    margin-top: 12px !important;
}

.SignupThirdPartyFB {
    max-width: none !important;
    margin-top: 0 !important;
    border: 1px solid #e6e2d8;
    border-radius: 10px;
    background: #f8f7f3 !important;
}

.SignupThirdPartyFB:hover {
    background: #111 !important;
}

/* [2026-08-07] 目的：Google 註冊按鈕取代 Facebook，桌機與手機共用同一個清楚的第三方入口。 */
.SignupThirdPartyGoogle,
.SignupThirdParty.GOOGLESIGNUP {
    max-width: none !important;
    margin-top: 0 !important;
    border: 1px solid #dadce0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3c4043 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer;
}

.SignupThirdPartyTxtGoogle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    color: #3c4043 !important;
    font-weight: 500;
}

.SignupThirdPartyTxtGoogle::before {
    content: "G";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    color: #4285f4;
    background: #fff;
    font: 700 16px/1 Arial, sans-serif;
}

.SignupThirdPartyGoogle:hover,
.SignupThirdPartyGoogle:focus,
.SignupThirdParty.GOOGLESIGNUP:hover,
.SignupThirdParty.GOOGLESIGNUP:focus {
    background: #f8f9fa !important;
    border-color: #c5c8cc !important;
}

.SignupInputBlock {
    margin-top: 22px;
}

.SignupInputEMAIL,
.SignupInputPW {
    margin-top: 0 !important;
}

.SignupInputTitle,
.SignupInputPASSWORD,
.SignupInputValue,
.SignupBtn,
.SignupLabel {
    width: 100% !important;
    max-width: none !important;
}

/* [2026-03-24] 目的：註冊欄位標題與同意條款改為左對齊，提升閱讀節奏 */
.SignupInputTitle,
.SignupInputPASSWORD,
.SignupInputValue,
.SignupInputBlock > div {
    text-align: left !important;
}

.SignupInputTitle {
    margin-top: 18px !important;
}

.SignupInputPASSWORD {
    margin-top: 18px !important;
}

.SignupInputTitleTxt {
    float: none !important;
    display: inline-block;
    font-size: 14px !important;
    color: #555 !important;
    text-align: left !important;
    width: 100% !important;
}

.SignupInputValueTxt {
    height: 46px !important;
    border: 1px solid #ddd7ca !important;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff !important;
    box-sizing: border-box;
}

.SignupInputValueTxt:focus {
    border-color: #89b4ff !important;
    box-shadow: 0 0 0 3px rgba(53, 120, 230, .15);
}

.SignupInputValue {
    margin-top: 8px;
}

.SignupBtn {
    padding-top: 24px !important;
}

.Signup {
    height: 46px !important;
    border-radius: 999px;
    background: #111 !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.SIGN-IN {
    font-size: 15px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

.SignupLabel.NewOrStart {
    margin-top: 24px !important;
    text-align: center;
}

.Already-Have-an-acco {
    font-size: 14px !important;
    color: #666 !important;
}

#AgreePolicy {
    margin-top: 2px;
}

#AgreePolicy + label {
    font-size: 14px;
    color: #555;
    line-height: 1.75;
    text-align: left !important;
    display: inline-block;
}

@media (max-width: 767px) {
    #Footer,
    #SignupFooter {
        width: min(94vw, 460px);
        margin: 8px auto 20px;
    }

    .SignupFooterLinks {
        font-size: 12px;
    }

    .SignupFooterCopy {
        font-size: 11px;
    }

    /* [2026-03-24] 目的：修正註冊頁手機 header logo 與漢堡按鈕垂直對齊 */
    #HeaderContentMobile {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 58px !important;
        padding: 10px 12px 10px 14px !important;
        box-sizing: border-box;
        border-bottom: 1px solid #ece9e2;
        position: relative !important;
    }

    #HeaderContentMobile .HeaderLeft {
        margin: 0 !important;
        line-height: 1 !important;
        display: flex;
        align-items: center;
        font-size: 30px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
    }

    #HeaderContentMobile .HeaderLeft a,
    #HeaderContentMobile .HeaderLeft span {
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .SignupBlock {
        /* [2026-03-24] 目的：註冊主視覺貼近 header 下方，避免首屏留白過大 */
        margin: 12px auto 22px !important;
        padding: 24px 16px 22px;
    }
    .SignupTypeBlock {
        display: block !important;
    }
    .SignupTypeBlockMob,
    .SignupTypeBlockMobOl {
        display: none !important;
    }
    .SignupInputTitle,
    .SignupInputPASSWORD {
        display: block !important;
    }

    /* [2026-03-24] 目的：手機版註冊頁第二輪優化，提升可讀性與點擊舒適度 */
    .SignupBlock {
        width: min(94vw, 460px) !important;
        border-radius: 16px;
        padding: 22px 14px 20px !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
    }

    .SignupLogoBlock {
        margin-bottom: 6px;
    }

    .SignupShowTxt {
        font-size: 20px !important;
        line-height: 1.3 !important;
        letter-spacing: .01em;
        font-style: normal !important;
    }

    .SignupShowSubTxt {
        font-size: 13px;
        line-height: 1.65;
        margin-top: 5px;
    }

    .SignupTypeBlock {
        margin-top: 10px !important;
    }

    .SignupThirdPartyFB {
        line-height: 42px !important;
        max-height: 42px !important;
        border-radius: 10px;
    }

    .SignupThirdPartyTxtFB {
        font-size: 13px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 42px !important;
    }

    .SignupInputBlock {
        margin-top: 18px;
    }

    .SignupInputTitle {
        margin-top: 14px !important;
    }

    .SignupInputPASSWORD {
        margin-top: 14px !important;
    }

    .SignupInputTitleTxt {
        font-size: 13px !important;
    }

    .SignupInputValue {
        margin-top: 7px;
    }

    .SignupInputValueTxt {
        height: 44px !important;
        font-size: 15px !important;
    }

    #AgreePolicy + label {
        font-size: 13px;
        line-height: 1.7;
    }

    .SignupBtn {
        padding-top: 18px !important;
    }

    .Signup {
        height: 44px !important;
    }

    .SIGN-IN {
        font-size: 15px !important;
    }

    .SignupLabel.NewOrStart {
        margin-top: 18px !important;
    }

    .Already-Have-an-acco {
        font-size: 13px !important;
    }

    /* [2026-03-24] 目的：修正手機版 Facebook 按鈕文字偏移，維持置中可讀 */
    .SignupThirdPartyTxtFB {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .SignupThirdPartyTxtFB::before {
        display: none !important;
    }

    /* [2026-03-24] 目的：第二輪修正手機版漢堡按鈕越界與主選單被註冊區塊覆蓋 */
    #Header,
    header {
        z-index: 5000 !important;
        overflow: visible !important;
    }

    #HeaderContentMobile,
    header .header-inner {
        position: relative !important;
        overflow: visible !important;
        z-index: 5010 !important;
    }

    #MainContent {
        position: relative;
        z-index: 1;
    }

    #Header .menu-mobile {
        position: relative;
    }

    #Header .menu-mobile .navbar-toggle,
    #HeaderContentMobile .navbar-toggle,
    header .menu-mobile .navbar-toggle {
        /* [2026-03-24] 目的：漢堡按鈕保留右側留白並與 logo 垂直置中 */
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        float: none !important;
        margin: 0 !important;
        margin-right: 0 !important;
        z-index: 5120 !important;
        transform: translateY(-50%) !important;
        align-self: auto !important;
        width: 38px !important;
        height: 38px !important;
        padding: 8px 7px !important;
        border-radius: 8px !important;
        border: 1px solid #e2ded4 !important;
        background: #f8f7f4 !important;
        box-sizing: border-box;
    }

    #Header .menu-mobile .navbar-toggle .icon-bar,
    #HeaderContentMobile .navbar-toggle .icon-bar,
    header .menu-mobile .navbar-toggle .icon-bar {
        width: 22px !important;
        height: 2px !important;
        margin-top: 4px !important;
        background-color: #8f8f8f !important;
    }

    #Header .menu-mobile .HeaderCenter,
    #HeaderContentMobile .HeaderCenter,
    header .menu-mobile .HeaderCenter {
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        z-index: 5110 !important;
        background: #fff !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
    }

    /* [2026-03-24] 目的：避免手機選單展開時把 header 當成積木撐高，改為覆蓋層 */
    header .menu-mobile {
        position: relative !important;
        min-height: 40px;
    }

    /* [2026-03-24] 目的：保留原生 collapse 顯示邏輯，僅在展開時調整為覆蓋層 */
    #main_manu {
        display: block !important;
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* [2026-03-24] 目的：修正註冊頁手機選單僅顯示登入/購物車，補強 LeftMenu 顯示 */
    #HeaderContentMobile .HeaderCenter .menu,
    #Header .menu-mobile .HeaderCenter .menu,
    #main_manu .menu,
    #HeaderContentMobile .HeaderCenter .cbp-hrmenu,
    #Header .menu-mobile .HeaderCenter .cbp-hrmenu,
    #main_manu .cbp-hrmenu {
        display: block !important;
        width: 100% !important;
    }

    /* [2026-03-24] 目的：避免 bootstrap collapse 把手機 menu 隱藏，強制展開於註冊頁檢視 */
    #main_manu.collapse,
    #main_manu.collapse:not(.in),
    #main_manu.collapsing,
    #HeaderContentMobile .HeaderCenter .collapse,
    #HeaderContentMobile .HeaderCenter .collapse:not(.in),
    #HeaderContentMobile .HeaderCenter .collapsing {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    /* [2026-03-24] 目的：修正手機點擊後 Facebook 註冊按鈕變黑（避免 sticky hover） */
    .SignupThirdPartyFB:hover,
    .SignupThirdPartyFB:active,
    .SignupThirdPartyFB:focus,
    .SignupThirdPartyFB:focus-visible {
        background: #f8f7f3 !important;
        color: #4a4a4a !important;
    }
}