body {
    height: 100%;
    overflow: hidden;
    background-image: url("./img/UI/Background_Main.png");
    background-size: cover;
    /*    position: fixed;*/
}


.bgImageStyle /*背景圖片的比例調整*/ {
    width: auto;
    height: auto;
    max-width: 100%;
    min-width: 100%; /*使用者即使縮小比例 也是固定畫面背景大小*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 輸入框容器使用絕對定位 */
.input-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
}
/*PC*/
@media screen and (min-width: 800px) {

    .wrap {
        width: 800px;
        height: 500px;
        margin: 10px auto;
        top: calc(var(--vh,1vh)*12);
        /*         left: 15%;*/
        padding: 0px;
        position: absolute;
    }

    .card {
        margin: 3px;
        width: calc(calc(var(--vh,1vh)*100)/4);
        height: calc(calc(var(--vh,1vh)*100)/4);
        float: left;
        text-align: center;
        position: relative;
    }

    .cardFor16_20 {
        margin: 2px;
        width: calc(calc(var(--vh,1vh)*100)/6);
        height: calc(calc(var(--vh,1vh)*100)/6);
        float: left;
        text-align: center;
        position: relative;
    }

    .cardFor20 {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio064_075 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.6);
        height: calc(calc(var(--vw,1vw)*100)/3.6);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio075_08 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.7);
        height: calc(calc(var(--vw,1vw)*100)/3.7);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio08_087 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4);
        height: calc(calc(var(--vw,1vw)*100)/4);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio087_109 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
        float: left;
        text-align: center;
        position: relative;
    }

    .cardFor12 {
        margin: 5px;
        width: calc(calc(var(--vh,1vh)*100)/4.5);
        height: calc(calc(var(--vh,1vh)*100)/4.5);
        float: left;
        text-align: center;
        position: relative;
    }

    .cardFor16_20_Large {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.2);
        height: calc(calc(var(--vw,1vw)*100)/4.2);
        float: left;
        text-align: center;
        position: relative;
    }


    #tiktok {
        position: absolute;
        width: 400px;
        height: 37px;
        margin: auto;
        top: 3%;
        left: 0;
        right: 0;
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        z-index: 3;
        display: none;
    }

    #counter {
        width: 100%;
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
    }

    /*       .card {
              margin-right: 10px;
              margin-bottom: 10px;
          }*/
    .StartPageHeaderImage {
        width: calc(calc(var(--vh,1vh)*40)*2.1459854);
        height: calc(var(--vh,1vh)*40);
        background: url('./img/UI/Decor_Main_Ribbon.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*40)*2.1459854) calc(var(--vh,1vh)*40);
        margin: calc(var(--vh,1vh)*0) auto 0 auto;
        padding: 0px;
    }


    .StartPageLogoImage {
        width: calc(calc(var(--vh,1vh)*36)*1.85377);
        height: calc(var(--vh,1vh)*36);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*36)*1.85377) calc(var(--vh,1vh)*36);
        margin: calc(var(--vh,1vh)*-39) auto 0 auto;
        padding: 0px;
    }

    .StartPageUserImage {
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Frame_Main_Login.png') no-repeat;
        background-size: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*15);
        margin: calc(var(--vh,1vh)*-36) 0 0 auto;
        padding: 0px;
        border-radius: 50%
    }

    #StartPageUserLoginDiv {
        margin: calc(var(--vh,1vh)*21) 0 0 auto;
        position: absolute;
        z-index: 2;
    }

    .StartPageUserLoginStyle {
        width: calc(calc(var(--vh,1vh)*5)*3.058823);
        height: calc(var(--vh,1vh)*5);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_Login.png');
        background-size: calc(calc(var(--vh,1vh)*5)*3.058823) calc(var(--vh,1vh)*5);
        margin: calc(var(--vh,1vh)*-10) auto 0 auto;
        font-size: calc(var(--vh,1vh)*2);
        color: white;
        font-weight: bold;
        font-family: PumpkinGames;
    }

    .StartPageDecorationImage {
        width: calc(calc(var(--vh,1vh)*70)*0.9808102);
        height: calc(var(--vh,1vh)*70);
        background: url('./img/UI/Decor_Main_Telly.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*70)*0.9808102) calc(var(--vh,1vh)*70);
        margin: calc(var(--vh,1vh)*-23) calc(var(--vh,1vh)*-7) 0 auto;
        padding: 0px;
    }

    .StartPageSmallDecorationImage {
        width: calc(calc(var(--vh,1vh)*30)*1.60477);
        height: calc(var(--vh,1vh)*30);
        background: url('./img/UI/StartPageSmallDecoratoin.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*30)*1.60477) calc(var(--vh,1vh)*30);
        margin: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*2) 0 auto;
        padding: 0px;
    }

    .StartPageStandardButtonImage {
        width: calc(calc(var(--vh,1vh)*25)*2.28104);
        height: calc(var(--vh,1vh)*25);
        background: url('./img/UI/Button_Main_Purple.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*25)*2.28104) calc(var(--vh,1vh)*25);
        margin: calc(var(--vh,1vh)*-60) calc(var(--vh,1vh)*80) 0 auto;
        padding: 0px;
    }

    #StartPageStandardLabelDiv {
        margin: calc(var(--vh,1vh)*14) auto auto calc(var(--vh,1vh)*30);
        position: absolute;
        z-index: 2;
    }

    #StandardLabel {
        font-size: calc(var(--vh,1vh)*4);
        color: white;
        font-weight: bold;
    }

    #StartPageStandardButtonGifDiv {
        width: calc(var(--vh,1vh)*24);
        height: calc(var(--vh,1vh)*24);
        background: url('./img/UI/Rank.gif') no-repeat;
        background-size: calc(var(--vh,1vh)*24) calc(var(--vh,1vh)*24);
        margin: calc(var(--vh,1vh)*-4) auto auto calc(var(--vh,1vh)*4);
        position: absolute;
        z-index: 2;
    }

    .StartPagePracticeButtonImage {
        width: calc(calc(var(--vh,1vh)*20)*1.536);
        height: calc(var(--vh,1vh)*20);
        background: url('./img/UI/Button_Main_Blue.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*20)*1.536) calc(var(--vh,1vh)*20);
        margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*106) 0 auto;
        padding: 0px;
    }

    #StartPagePracticeLabelDiv {
        margin: calc(var(--vh,1vh)*12) auto auto calc(var(--vh,1vh)*12);
        position: absolute;
        z-index: 2;
    }

    #PracticeLabel {
        font-size: calc(var(--vh,1vh)*3);
        color: white;
        font-weight: bold;
    }

    #StartPagePracticeButtonGifDiv {
        width: calc(var(--vh,1vh)*14);
        height: calc(var(--vh,1vh)*14);
        background: url('./img/UI/Practice.gif') no-repeat;
        background-size: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*14);
        margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
    }


    .StartPageBattleButtonImage {
        width: calc(calc(var(--vh,1vh)*20)*1.536);
        height: calc(var(--vh,1vh)*20);
        background: url('./img/UI/Button_Main_Red.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*20)*1.536) calc(var(--vh,1vh)*20);
        margin: calc(var(--vh,1vh)*-20) calc(var(--vh,1vh)*81) 0 auto;
        padding: 0px;
    }

    #StartPageBattleButtonLock {
        width: calc(calc(var(--vh,1vh)*10)*0.7894736842105263);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Icon_Lock.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*0.7894736842105263) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*-3) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*21);
        padding: 0px;
        position: absolute;
    }

    #StartPageBattleLabelDiv {
        margin: calc(var(--vh,1vh)*12) auto auto calc(var(--vh,1vh)*14);
        position: absolute;
        z-index: 2;
    }

    #BattleLabel {
        font-size: calc(var(--vh,1vh)*3);
        color: white;
        font-weight: bold;
    }

    #StartPageBattleButtonGifDiv {
        width: calc(var(--vh,1vh)*14);
        height: calc(var(--vh,1vh)*14);
        background: url('./img/UI/PVP.gif') no-repeat;
        background-size: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*14);
        margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
    }

    .StartPageEventModeButtonImage {
        width: calc(calc(var(--vh,1vh)*20)*1.07843137254902);
        height: calc(var(--vh,1vh)*20);
        background: url('./img/UI/Button_Activity_Travel.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*20)*1.07843137254902) calc(var(--vh,1vh)*20);
        margin: calc(var(--vh,1vh)*-50) calc(var(--vh,1vh)*58) 0 auto;
        padding: 0px;
    }

    #StartPageEventModeLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #StartPageEventModeLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: white;
        font-weight: bold;
    }

    .StartPageRankingButtonImage {
        width: calc(var(--vh,1vh)*20);
        height: calc(var(--vh,1vh)*20);
        background: url('./img/UI/Button_Main_Rank.png') no-repeat;
        background-size: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*20);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*60) 0 auto;
        padding: 0px;
    }

    #StartPageRankingLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #RankingLabel {
        --min-size: 15;
        --max-size: 18;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
        font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
        color: white;
        font-weight: bold;
    }

    .StartPageTutorialButtonImage {
        width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
        height: calc(var(--vh,1vh)*7);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_AboutUs.png');
        background-size: calc(calc(var(--vh,1vh)*7)*3.159090909090909) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*110) 0 auto;
        font-size: calc(var(--vh,1vh)*2);
        color: brown;
        font-weight: bold;
padding:0px;
    }

    #StartPageTutorialLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #TutorialImage {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Button_PK_Tutorial.png') no-repeat;
        background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*-8) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*-3);
    }

    #TutorialLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: brown;
        font-weight: bold;
        top: calc(var(--vh,1vh)*-4);
    }

    .TutorialSingleHeaderDiv {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*11);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*20);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialDoubleHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.15) auto auto calc(var(--vh,1vh)*21);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialPracticeHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.25) auto auto calc(var(--vh,1vh)*14);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #StartPageAboutDiv {
        margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*-21) 0 calc(var(--vh,1vh)*-44);
    }

    .StartPageAboutButtonStyle {
        width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
        height: calc(var(--vh,1vh)*7);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_AboutUs.png');
        background-size: calc(calc(var(--vh,1vh)*7)*3.159090909090909) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*106) 0 auto;
        font-size: calc(var(--vh,1vh)*2);
        color: brown;
        font-weight: bold;
    }

    #PrivacyPolicyDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*90);
        text-align: center;
        position: absolute;
        user-select: none;
    }

    #PrivacyPolicyGuideText {
        width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
        height: calc(var(--vh,1vh)*7);
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: white;
    }

    /*#region 結算面板 推薦按鈕*/
    #sLineFrame {
        margin: calc(var(--vh,1vh)*33) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #sQRcodeFrame {
        margin: calc(var(--vh,1vh)*48) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #fLineFrame {
        margin: calc(var(--vh,1vh)*25) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #fQRcodeFrame {
        margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }
    /*#endregion*/

    #FailureRecommonFrame {
        margin: auto auto auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #SuccessRecommonFrame {
        margin: auto auto auto calc(var(--vh,1vh)*4);
        position: absolute;
        position: absolute;
    }

    #AccountAvatar {
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-30);
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Frame_Main_Login.png ');
        background-size: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*15);
        position: absolute;
        padding: 0;
        border-radius: 50%;
    }

    #ComboParentDiv {
        position: absolute;
        background-size: cover;
        z-index: 7;
        display: none;
        margin: calc(var(--vh,1vh)*-50) auto auto calc(var(--vw,1vw)*40);
    }

    /*   .SuccessPanel {
        width: calc(calc(var(--vh,1vh)*55)*0.89);
        height: calc(var(--vh,1vh)*55);
        background: url('./img/UI/Frame_Success.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.89) calc(var(--vh,1vh)*55);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*16) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    /*.FailurePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.982);
        height: calc(var(--vh,1vh)*55);*/
    /*                        top: 0px;*/
    /*background: url('./img/UI/Frame_Failure.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.982) calc(var(--vh,1vh)*55);*/
    /*background: rgba(255,255,255,0.9);*/
    /*white-space: pre-line;
        margin: calc(var(--vh,1vh)*16) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    .EncyclopediaPanel {
        width: calc(calc(var(--vh,1vh)*80)*1.397188049209139);
        height: calc(var(--vh,1vh)*80);
        background: url('./img/UI/Frame_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*80)*1.397188049209139) calc(var(--vh,1vh)*80);
        margin: calc(var(--vh,1vh)*25) auto 0 auto;
        display: none;
        padding: 0px;
    }

    #EncyclopediaTitle {
        width: calc(calc(var(--vh,1vh)*15)*3.117647058823529);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Title_Mine_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*3.117647058823529) calc(var(--vh,1vh)*15);
        display: block;
        border: none;
        font-size: calc(var(--vh,1vh)*4);
        color: white;
        font-weight: bold;
        position: absolute;
        margin: calc(var(--vh,1vh)*-9) auto 0 calc(var(--vh,1vh)*31);
    }

    #EncyclopediaCloseButton {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        background: url('./img/UI/Button_Close.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);
        margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*103);
        z-index: 2;
        position: absolute;
    }

    #CardCategoryDiv {
        position: relative;
        margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
    }

    #EncyclopediaGridContainerLeft {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #EncyclopediaGridContainerRight {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*61);
        position: absolute;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh,1vh)*11);
        height: calc(var(--vh,1vh)*11);
    }

    .EncyclopediaCover {
        border: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        border-radius: 5%;
    }

    #EncyclopediaPageDIV {
        margin: calc(var(--vh,1vh)*65) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*40);
    }

    #CardCategorySelect {
        appearance: none;
        /*  safari  */
        -webkit-appearance: none;
        /*  other styles for aesthetics */
        width: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463);
        height: calc(var(--vh,1vh)*5.5);
        font-size: calc(var(--vh,1vh)*2.5);
        padding: 0.35em 1em 0.35em 1em;
        background: url('./img/UI/Button_Book_Choose.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463)calc(var(--vh,1vh)*5.5);
        border: 0;
        border-radius: 0;
        cursor: pointer;
        margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    select::-ms-expand {
        display: none;
    }

    #TutorialPracticeContentLabel {
        font-size: calc(var(--vh,1vh)*2.2);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    #TutorialSingleContentLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    /*#region 雙人進關面板*/
    #BattleModeRanking {
        margin: calc(var(--vh,1vh)*-5.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*82.5);
        position: absolute;
        display: none;
    }

    .BattleRankAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: calc(var(--vh,1vh)*10);
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        border-radius: 50%;
        position: absolute;
    }

    .BattleRankNumber {
        width: calc(calc(var(--vh,1vh)*3)*0.796);
        height: calc(var(--vh,1vh)*3);
        margin: calc(var(--vh,1vh)*-0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-0.5);
        z-index: 2;
        position: absolute;
    }

    #BattleRank1Number {
        background: url('./img/UI/Number/Fever_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank2Number {
        background: url('./img/UI/Number/Fever2_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank3Number {
        background: url('./img/UI/Number/Fever2_3.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank1ContentDiv {
        margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank2ContentDiv {
        margin: calc(var(--vh,1vh)*22) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank3ContentDiv {
        margin: calc(var(--vh,1vh)*35) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    .BattleRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
    }

    .BattleRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        top: -27%;
        color: white;
    }

    #BattleRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*48) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        border: none;
    }

    #BattleInvitationArea {
        position: absolute;
        display: none;
        margin: calc(var(--vh,1vh)*39) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
    }

    #BattleInvitationCodeInputBoxContent {
        margin: calc(var(--vh,1vh)*-5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    }

    #BattleInvitationContentDiv {
        background: url('./img/UI/Frame_Text_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.75609756097561) calc(var(--vh,1vh)*10);
        width: calc(calc(var(--vh,1vh)*10)*3.75609756097561);
        height: calc(var(--vh,1vh)*10);
        user-select: none; /* 標準語法 */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
        /*        text-align:center;*/
    }

    #BattleInvitationLabel {
        font-size: calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
    }

    #BattleInvitationHint {
        font-size: calc(var(--vh,1vh)*1.85);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14);
    }
    /*#endregion*/

    /*#region 雙人結算面板的推薦區*/
    .BattleRecommonFrame {
        margin: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*7);
        position: absolute;
    }

    .BattleLineStickerFrame {
        width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
        height: calc(var(--vh,1vh)*13);
        background: url('./img/UI/Frame_Text_2.png');
        background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
        margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*49);
        position: absolute;
    }

    .BattleLineStickerExample {
        width: calc(calc(var(--vh,1vh)*6)*1);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/Questions/GIF/01/4.gif');
        background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
        position: absolute;
        margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*4);
    }

    .BattleLineStickerText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*12);
        position: absolute;
        width: calc(var(--vh,1vh)*11);
    }

    .BattleQRcodeFrame {
        width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Frame_Text_3.png');
        background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*33) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*49);
        position: absolute;
    }

    .BattleQRcodeImg {
        width: calc(calc(var(--vh,1vh)*7)*1);
        height: calc(var(--vh,1vh)*7);
        background: url('./img/UI/QRcode.png');
        background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*15.5);
        position: absolute;
    }

    .BattleQRcodeText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        width: calc(var(--vh,1vh)*11);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家資料(共同)*/

    .pvpModePlayerArea {
        top: calc(var(--vh,1vh)*50);
        position: relative;
        /*        display: none;*/
    }

    .pvpModePlayerFrame {
        width: calc(calc(var(--vh,1vh)*25)*1.024844720496894);
        height: calc(var(--vh,1vh)*25);
    }

    .pvpModePlayerIdDiv {
        width: calc(var(--vh,1vh)*35);
        font-size: calc(var(--vh,1vh)*2);
        color: white;
        font-weight: bold;
        position: absolute;
        font-family: PumpkinGames;
        top: calc(var(--vh,1vh)*17.5);
        text-align: center;
    }

    .pvpModePlayerAvatorDiv {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .PvpProgressBar {
        position: absolute;
        width: calc(calc(var(--vh,1vh)*3)*10.81081081081081);
        height: calc(var(--vh,1vh)*3);
        top: calc(var(--vh,1vh)*16);
        left: calc(var(--vh,1vh)*-4);
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*10.81081081081081) calc(var(--vh,1vh)*3);
        z-index: 3;
    }

    .PvpProgressBarCounter {
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*10.81081081081081) calc(var(--vh,1vh)*3);
    }

    .pvpModeScoreAnimArea {
        margin: calc(var(--vh,1vh)*-20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
        position: absolute;
        display: none;
    }

    .ScorePlus {
        width: calc(calc(var(--vh,1vh)*4)*1.087912087912088);
        height: calc(var(--vh,1vh)*4);
        background: url('./img/UI/Number/Fever_plus.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*4)*1.087912087912088) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    .PvpScoreLoserNumber {
        width: calc(calc(var(--vh,1vh)*5)*0.796);
        height: calc(var(--vh,1vh)*5);
        background: url('./img/UI/Number/Fever2_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
        position: absolute;
    }

    .PvpScoreWinnerNumber {
        width: calc(calc(var(--vh,1vh)*5)*0.796);
        height: calc(var(--vh,1vh)*5);
        background: url('./img/UI/Number/Fever_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
        position: absolute;
    }

    #pvpModeHost {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
    }

    #pvpModeVisitor {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
    }

    /*#endregion*/

    /*#region 雙人模式 遊戲中 對手區*/
    #pvpModeVisitorDiv {
        left: calc(var(--vw,1vw)*10);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameVisitor {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*25)*1.024844720496894)calc(var(--vh,1vh)*25);
    }

    #pvpModeVisitorScoreArea {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #VisitorScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #VisitorScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.75);
        position: absolute;
    }

    #VisitorScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
        position: absolute;
    }

    #VisitorScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.25);
        position: absolute;
    }

    #VisitorScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*18);
        position: absolute;
    }

    #pvpModeVisitor {
    }

    #pvpModeVisitorAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #VisitorBarCounter {
        width: 0%;
        position: absolute;
    }

    #VisitorScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #VisitorScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
        position: absolute;
    }

    #VisitorScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #VisitorScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家區*/
    #pvpModeHostDiv {
        right: calc(var(--vw,1vw)*20);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameHost {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*25)*1.024844720496894)calc(var(--vh,1vh)*25);
    }

    #pvpModeHostScoreArea {
        /*        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;*/
    }

    .pvpModeScoreArea {
        top: calc(var(--vh,1vh)*-4);
        position: absolute;
        z-index: 10;
    }

    #HostScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #HostScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.75);
        position: absolute;
    }

    #HostScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
        position: absolute;
    }

    #HostScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.25);
        position: absolute;
    }

    #HostScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*18);
        position: absolute;
    }

    #pvpModeHost {
    }

    #pvpModeHostAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #HostBarCounter {
        width: 0%;
        position: absolute;
    }

    #HostScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #HostScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #HostScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
        position: absolute;
    }

    #HostScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #HostScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
        position: absolute;
    }
    /*#endregion*/
    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./img/UI/Frame_Text_Normal.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*28)*1.700787401574803) calc(var(--vh,1vh)*28);
        /*    z-index: 100;*/
        /*    position: absolute;*/
        display: none;
        /*    top: 36%;
    left: 36%;*/
        margin: calc(var(--vh,1vh)*38) auto auto auto;
        padding: 0px;
        /*    float: right;*/
    }

    /*#region 通用進關面板*/
    .intro {
        width: calc(calc(var(--vh,1vh)*55)*0.922);
        height: calc(var(--vh,1vh)*55);
        background: url('./img/UI/Frame_Play.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.922) calc(var(--vh,1vh)*55);
        /*background: rgba(255,255,255,0.9);*/
        /*        white-space: pre-line;*/
        margin: calc(var(--vh,1vh)*25) auto 0 auto;
        font-weight: bolder;
        font-size: 20px;
        line-height: 40px;
        font-family: "微軟正黑體";
        padding: 0px;
        display: none;
    }

    .introHeader {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.85);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        background: url('./img/UI/Title_RedRibbon.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.85) calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        /*    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*4);*/
        right: calc(var(--vh,1vh)*4);
        top: calc(var(--vh,1vh)*-5.5);
        position: absolute;
    }

    .IntroBtnClose {
        width: calc(var(--vh,1vh)*6);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/UI/Button_Close_2.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*6) calc(var(--vh,1vh)*6);
        /*    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*44.5);*/
        position: absolute;
        z-index: 2;
        top: -2%;
        right: 0%;
    }

    .introImage {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.65);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.65) calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        /*    margin: calc(var(--vh,1vh)*-23) auto 0 calc(var(--vh,1vh)*9);*/
        position: absolute;
        right: calc(var(--vh,1vh)*10.5);
        top: calc(var(--vh,1vh)*-13);
    }

    .modePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.922*0.4);
        height: calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        background: url('./img/UI/Title_Mode.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.922*0.4) calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        /*    margin: calc(var(--vh,1vh)*-7) auto 0 auto;*/
        padding: 0.4em 1em 1em 1em;
        text-align: center;
        font-size: calc(var(--vh,1vh)*1.8);
        line-height: calc(var(--vh,1vh)*3);
        font-weight: bold;
        color: white;
        border: 0;
        font-family: PumpkinGames;
    }

    #modePanelDiv {
        margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*20.5);
        position: absolute;
        /*        top: -3%;*/
    }

    #introWordContent {
        margin: auto auto 0 auto;
        position: absolute;
        padding: 2.5em 4em 4.5em 5.5em;
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: 125%;
        top: 10%
    }

    #introTodayCanPlayCountHintDiv {
        width: calc(var(--vh,1vh)*45);
        position: absolute;
        text-align: center;
        margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*10);
    }

    #introTodayCanPlayCountHint {
        padding: 3.5em 3em 4.5em 0.5em;
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: 125%;
        top: 10%;
    }

    #introSubWordDiv {
        /*margin: calc(var(--vh,1vh)*-4) auto 0 auto;*/
        width: calc(var(--vh,1vh)*28);
        position: absolute;
        text-align: right;
        padding: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    }

    #introSubWordContent {
        font-size: calc(var(--vh,1vh)*1.8);
        font-weight: initial;
        font-weight: bold;
    }

    .introQRCode {
        top: 70%;
        left: 10%;
        width: 100px;
        height: 100px;
        background: url('./img/onlink_to_rs67jz_small.png') no-repeat;
    }

    /*.buttonShareStyle {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        display: block;
        border: none;
        background: url('./img/UI/Button_Share.png');
        background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);*/
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    /*}

    .buttonStyle {
        width: calc(calc(var(--vh,1vh)*6)*2.31);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Play.png');
        background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);*/
    /*        margin: calc(var(--vh,1vh)*0) auto 0 auto;*/
    /*font-size: calc(var(--vh,1vh)*2.5);
        color: white;
        font-weight: bold;
    }

    .buttonPlayConfirmStyle {
        width: calc(calc(var(--vh,1vh)*7.5)*2.31);
        height: calc(var(--vh,1vh)*7.5);
        display: block;
        border: none;
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);*/
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    /*font-size: calc(var(--vh,1vh)*3);
        color: white;
        font-weight: bold;
    }*/

    #DiffictyDefinitonAreaComboBox {
        position: absolute;
        margin: calc(var(--vh,1vh)*-35) auto 0 calc(var(--vh,1vh)*29);
    }

    #DiffictyDefinitonAreaSlider {
        position: absolute;
        /*        margin: calc(var(--vh,1vh)*-4) auto 0 calc(var(--vh,1vh)*19);*/
        top: calc(var(--vh,1vh)*52);
        right: calc(var(--vh,1vh)*36);
    }

    #brownLine {
        margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*4)*2.7058);
        height: calc(var(--vh,1vh)*4);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_01.png');
        background-size: calc(calc(var(--vh,1vh)*4)*2.7058) calc(var(--vh,1vh)*4);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #EasyBtn {
        margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*-1);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_04.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*         margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #HardBtn {
        margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*7);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_05.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #EventWeeklyRewardDiv {
        margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*32);
        display: none;
        position: absolute;
    }

    #WeeklyRewardsText {
        width: calc(var(--vh,1vh)*19);
        font-size: calc(var(--vh,1vh)*2.2);
        font-weight: bold;
        color: maroon;
        margin: calc(var(--vh,1vh)*4) auto 0 calc(var(--vh,1vh)*-21);
        position: absolute;
    }

    #WeeklyRewardImage {
        margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        width: calc(calc(var(--vh,1vh)*12)*0.9414634146341463);
        height: calc(var(--vh,1vh)*12);
        background: url('./img/UI/Icon_Gold_box.png');
        background-size: calc(calc(var(--vh,1vh)*12)*0.9414634146341463) calc(var(--vh,1vh)*12);
    }
    /*#endregion*/

    #buttonDiv {
        /*    top: 87%;*/
        position: absolute;
        margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*21);
    }
    #RoomButtonPlay {
        margin: calc(var(--vh,1vh)*-7.5) auto 0 calc(var(--vh,1vh)*11);
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    }
    #GoogleButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13);
    }

    #FacebookButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*11) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13);
    }
}
/*手機*/
@media screen and (max-width: 799px) {


    .wrap {
        width: 420px;
        height: 680px;
        margin: 10px auto;
        top: calc(var(--vh,1vh)*10);
        left: 2%;
        padding: 0px;
        position: relative;
    }

    .card {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_TwoOfOneLine {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3);
        height: calc(calc(var(--vw,1vw)*100)/3);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_ThreeOfOneLine {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.2);
        height: calc(calc(var(--vw,1vw)*100)/3.2);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_RatioLessThen051 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.15);
        height: calc(calc(var(--vw,1vw)*100)/3.15);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio051_056 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/2.6);
        height: calc(calc(var(--vw,1vw)*100)/2.6);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio056_061 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/2.8);
        height: calc(calc(var(--vw,1vw)*100)/2.8);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio061_064 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.15);
        height: calc(calc(var(--vw,1vw)*100)/3.15);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio064_075 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.25);
        height: calc(calc(var(--vw,1vw)*100)/3.25);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio075_08 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.65);
        height: calc(calc(var(--vw,1vw)*100)/3.65);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio08_087 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.9);
        height: calc(calc(var(--vw,1vw)*100)/3.9);
        float: left;
        text-align: center;
        position: relative;
    }

    .card_Ratio087_109 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.25);
        height: calc(calc(var(--vw,1vw)*100)/4.25);
        float: left;
        text-align: center;
        position: relative;
    }

    .cardFor16_20 {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.2);
        height: calc(calc(var(--vw,1vw)*100)/4.2);
        float: left;
        text-align: center;
        position: relative;
    }

    #tiktokContainer {
        position: absolute;
        margin: auto;
        top: 3%;
        /*bottom: 82%;*/
        left: 0;
        right: 0;
        z-index: 3;
    }

    #tiktok {
        position: absolute;
        width: 240px;
        height: 22.15384615384615px;
        margin: auto;
        top: 3%;
        /*bottom: 82%;*/
        left: 0;
        right: 0;
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: 240px 22.15384615384615px;
        z-index: 3;
    }

    #counter {
        width: 100%;
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: 240px 22.15384615384615px;
    }


    /*          .card {
              margin-right: 10px;
              margin-bottom: 10px;
          }*/

    .StartPageHeaderImage { /*準備改用vw排版測試窄版*/
        width: calc(calc(var(--vw,1vw)*50)*2.1459854);
        height: calc(var(--vw,1vw)*50);
        background: url('./img/UI/Decor_Main_Ribbon.png') no-repeat;
        background-size: calc(calc(var(--vw,1vw)*50)*2.1459854) calc(var(--vw,1vw)*50);
        margin: calc(var(--vh,1vh)*0) auto 0 auto;
        padding: 0px;
    }


    .StartPageLogoImage {
        width: calc(calc(var(--vw,1vw)*45)*1.85377);
        height: calc(var(--vw,1vw)*45);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vw,1vw)*45)*1.85377) calc(var(--vw,1vw)*45);
        margin: calc(var(--vw,1vw)*-48) auto 0 auto;
        padding: 0px;
    }

    .StartPageUserImage {
        width: calc(var(--vw,1vw)*18);
        height: calc(var(--vw,1vw)*18);
        background: url('./img/UI/Frame_Main_Login.png') no-repeat;
        background-size: calc(var(--vw,1vw)*18) calc(var(--vw,1vw)*18);
        margin: calc(var(--vw,1vw)*-45) 0 0 auto;
        padding: 0px;
        border-radius: 50%
    }

    #StartPageUserLoginDiv {
        margin: calc(var(--vw,1vw)*21) 0 0 auto;
        position: absolute;
        z-index: 2;
    }

    .StartPageUserLoginStyle {
        width: calc(calc(var(--vw,1vw)*6)*3.058823);
        height: calc(var(--vw,1vw)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_Login.png');
        background-size: calc(calc(var(--vw,1vw)*6)*3.058823) calc(var(--vw,1vw)*6);
        margin: calc(var(--vw,1vw)*-8) auto 0 auto;
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        font-family: PumpkinGames;
    }

    .StartPageDecorationImage {
        width: calc(calc(var(--vh,1vh)*40)*0.9808102);
        height: calc(var(--vh,1vh)*40);
        background: url('./img/UI/Decor_Main_Telly.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*40)*0.9808102) calc(var(--vh,1vh)*40);
        margin: calc(var(--vh,1vh)*-14) calc(var(--vh,1vh)*-9) 0 auto;
        padding: 0px;
    }

    .StartPageSmallDecorationImage {
        width: calc(calc(var(--vh,1vh)*20)*1.60477);
        height: calc(var(--vh,1vh)*20);
        background: url('./img/UI/StartPageSmallDecoratoin.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*20)*1.60477) calc(var(--vh,1vh)*20);
        margin: calc(var(--vh,1vh)*45) calc(var(--vh,1vh)*-4) auto auto;
        padding: 0px;
    }

    .StartPageStandardButtonImage {
        width: calc(calc(var(--vw,1vw)*35)*2.28104);
        height: calc(var(--vw,1vw)*35);
        background: url('./img/UI/Button_Main_Purple.png') no-repeat;
        background-size: calc(calc(var(--vw,1vw)*35)*2.28104) calc(var(--vw,1vw)*35);
        margin: calc(var(--vh,1vh)*-73) auto auto auto;
        padding: 0px;
    }

    #StartPageStandardLabelDiv {
        margin: calc(var(--vw,1vw)*16) auto auto calc(var(--vw,1vw)*44);
        position: absolute;
        z-index: 2;
    }

    #StandardLabel {
        font-size: calc(var(--vw,1vw)*5);
        color: white;
        font-weight: bold;
    }

    #StartPageStandardButtonGifDiv {
        width: calc(var(--vw,1vw)*35);
        height: calc(var(--vw,1vw)*35);
        background: url('./img/UI/Rank.gif') no-repeat;
        background-size: calc(var(--vw,1vw)*35) calc(var(--vw,1vw)*35);
        margin: calc(var(--vh,1vh)*-4) auto auto calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
    }


    .StartPagePracticeButtonImage {
        width: calc(calc(var(--vw,1vw)*28)*1.536);
        height: calc(var(--vw,1vw)*28);
        background: url('./img/UI/Button_Main_Blue.png') no-repeat;
        background-size: calc(calc(var(--vw,1vw)*28)*1.536) calc(var(--vw,1vw)*28);
        margin: calc(var(--vh,1vh)*0) calc(var(--vw,1vw)*47) 0 auto;
        padding: 0px;
    }

    #StartPagePracticeLabelDiv {
        margin: calc(var(--vw,1vw)*17.5) auto auto calc(var(--vw,1vw)*19);
        position: absolute;
        z-index: 2;
    }

    #PracticeLabel {
        font-size: calc(var(--vw,1vw)*4.5);
        color: white;
        font-weight: bold;
    }

    #StartPagePracticeButtonGifDiv {
        width: calc(var(--vw,1vw)*20);
        height: calc(var(--vw,1vw)*20);
        background: url('./img/UI/Practice.gif') no-repeat;
        background-size: calc(var(--vw,1vw)*20) calc(var(--vw,1vw)*20);
        margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
    }


    .StartPageBattleButtonImage {
        width: calc(calc(var(--vw,1vw)*28)*1.536);
        height: calc(var(--vw,1vw)*28);
        background: url('./img/UI/Button_Main_Red.png') no-repeat;
        background-size: calc(calc(var(--vw,1vw)*28)*1.536) calc(var(--vw,1vw)*28);
        margin: calc(var(--vw,1vw)*-28) calc(var(--vw,1vw)*11) auto auto; /*跟StartPagePracticeButtonImage的寬度有關*/
        padding: 0px;
    }

    #StartPageBattleButtonLock {
        width: calc(calc(var(--vh,1vh)*8)*0.7894736842105263);
        height: calc(var(--vh,1vh)*8);
        background: url('./img/UI/Icon_Lock.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*0.7894736842105263) calc(var(--vh,1vh)*8);
        margin: calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*17);
        padding: 0px;
        position: absolute;
    }

    #StartPageBattleLabelDiv {
        margin: calc(var(--vw,1vw)*17.5) auto auto calc(var(--vw,1vw)*19);
        position: absolute;
        z-index: 2;
    }

    #BattleLabel {
        font-size: calc(var(--vw,1vw)*4.5);
        color: white;
        font-weight: bold;
    }

    #StartPageBattleButtonGifDiv {
        width: calc(var(--vw,1vw)*20);
        height: calc(var(--vw,1vw)*20);
        background: url('./img/UI/PVP.gif') no-repeat;
        background-size: calc(var(--vw,1vw)*20) calc(var(--vw,1vw)*20);
        margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
    }

    .StartPageRankingButtonImage {
        width: calc(var(--vh,1vh)*16);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Button_Main_Rank.png') no-repeat;
        background-size: calc(var(--vh,1vh)*16) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*-16) calc(var(--vw,1vw)*37) 0 calc(var(--vw,1vw)*13);
        padding: 0px;
    }

    .StartPageEventModeButtonImage {
        width: calc(calc(var(--vh,1vh)*16)*1.07843137254902);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Button_Activity_Travel.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*16)*1.07843137254902) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*-24) calc(var(--vh,1vh)*10) 0 auto;
        padding: 0px;
    }

    #StartPageEventModeLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #StartPageEventModeLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: white;
        font-weight: bold;
    }

    #StartPageRankingLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*11.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #RankingLabel {
        --min-size: 14;
        --max-size: 16;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
        font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
        color: white;
        font-weight: bold;
    }

    .StartPageTutorialButtonImage {
        width: calc(calc(var(--vh,1vh)*6)*3.159090909090909);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_AboutUs.png');
        background-size: calc(calc(var(--vh,1vh)*6)*3.159090909090909) calc(var(--vh,1vh)*6);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*105) 0 calc(var(--vh,1vh)*27);
        font-size: calc(var(--vh,1vh)*2);
        color: brown;
        font-weight: bold;
    }

    #StartPageTutorialLabelDiv {
        text-align: center;
        padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #TutorialLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: maroon;
        font-weight: bold;
    }

    #TutorialImage {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Button_PK_Tutorial.png') no-repeat;
        background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*-8) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*-3);
    }

    .TutorialSingleHeaderDiv {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*11);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*20);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialDoubleHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.15) auto auto calc(var(--vh,1vh)*21);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialPracticeHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.25) auto auto calc(var(--vh,1vh)*14);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #StartPageAboutDiv {
        margin: calc(var(--vh,1vh)*25) calc(var(--vh,1vh)*-21) 0 calc(var(--vh,1vh)*10);
    }

    .StartPageAboutButtonStyle {
        width: calc(calc(var(--vh,1vh)*6)*3.159090909090909);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Main_AboutUs.png');
        background-size: calc(calc(var(--vh,1vh)*6)*3.159090909090909) calc(var(--vh,1vh)*6);
        margin: calc(var(--vh,1vh)*-6) calc(var(--vh,1vh)*105) 0 calc(var(--vh,1vh)*-4);
        font-size: calc(var(--vh,1vh)*2);
        color: brown;
        font-weight: bold;
    }

    #PrivacyPolicyDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*18);
        text-align: center;
        position: absolute;
    }

    #PrivacyPolicyGuideText {
        width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
        height: calc(var(--vh,1vh)*7);
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: white;
    }

    #sLineFrame {
        margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #sQRcodeFrame {
        margin: calc(var(--vh,1vh)*9) auto auto calc(var(--vh,1vh)*27);
        position: absolute;
    }

    #fLineFrame {
        margin: calc(var(--vh,1vh)*75) auto auto calc(var(--vh,1vh)*-1);
        position: absolute;
    }

    #fQRcodeFrame {
        margin: calc(var(--vh,1vh)*73) auto auto calc(var(--vh,1vh)*26);
        position: absolute;
    }

    #FailureRecommonFrame {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*5);
        position: absolute;
    }

    #SuccessRecommonFrame {
        margin: calc(var(--vh,1vh)*63) auto auto auto;
        position: absolute;
    }

    #AccountAvatar {
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-30);
        width: calc(var(--vw,1vw)*26);
        height: calc(var(--vw,1vw)*26);
        background-size: calc(var(--vw,1vw)*26) calc(var(--vw,1vw)*26);
        background: url('./img/UI/Frame_Main_Login.png ');
        position: absolute;
        border-radius: 50%;
    }

    #ComboParentDiv {
        position: absolute;
        background-size: cover;
        z-index: 7;
        display: none;
        margin: calc(var(--vh,1vh)*-50) auto auto calc(var(--vh,1vh)*2);
        float: right;
    }

    /*    .SuccessPanel {
        width: calc(calc(var(--vh,1vh)*65)*0.89);
        height: calc(var(--vh,1vh)*65);
        background: url('./img/UI/Frame_Success.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*12) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    /*    .FailurePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.982);
        height: calc(var(--vh,1vh)*55);
                                top: 0px;
        background: url('./img/UI/Frame_Failure.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.982) calc(var(--vh,1vh)*55);
        background: rgba(255,255,255,0.9);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*14) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    .EncyclopediaPanel {
        width: calc(calc(var(--vh,1vh)*77)*0.7491408934707904);
        height: calc(var(--vh,1vh)*77);
        background: url('./img/UI/Frame_Book_Mb.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*77)*0.7491408934707904) calc(var(--vh,1vh)*77);
        /*background: rgba(255,255,255,0.9);*/
        margin: calc(var(--vh,1vh)*16) auto 0 calc(var(--vh,1vh)*0);
        padding: 0px;
        display: none;
    }

    #EncyclopediaTitle {
        width: calc(calc(var(--vh,1vh)*10)*3.117647058823529);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Title_Mine_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.117647058823529) calc(var(--vh,1vh)*10);
        display: block;
        border: none;
        font-size: calc(var(--vh,1vh)*2.75);
        color: white;
        font-weight: bold;
        position: absolute;
        margin: calc(var(--vh,1vh)*-5) auto 0 calc(var(--vh,1vh)*15);
    }

    #EncyclopediaCloseButton {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Button_Close.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*47);
        z-index: 2;
        position: absolute;
    }

    #CardCategoryDiv {
        position: absolute;
        margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
    }

    #EncyclopediaGridContainerLeft {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
        position: absolute;
    }

    #EncyclopediaGridContainerRight {
        display: none;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .EncyclopediaCover {
        border: 0;
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        background-color: rgba(0,0,0,0.85);
        margin: auto auto auto auto;
        border-radius: 5%;
    }

    #EncyclopediaPageDIV {
        margin: calc(var(--vh,1vh)*72) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #CardCategorySelect {
        appearance: none;
        /*  safari  */
        -webkit-appearance: none;
        /*  other styles for aesthetics */
        width: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463);
        height: calc(var(--vh,1vh)*5.5);
        font-size: calc(var(--vh,1vh)*2.75);
        padding: 0.35em 1em 0.35em 1.5em;
        background: url('./img/UI/Button_Book_Choose.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463)calc(var(--vh,1vh)*5.5);
        border: 0;
        border-radius: 0;
        cursor: pointer;
    }

    #TutorialPracticeContentLabel {
        /*        --min-size: 13.5;
        --max-size: 15;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );*/
        font-size: calc(var(--vh,1vh)*2.18);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    #TutorialSingleContentLabel {
        /*        --min-size: 12.5;
        --max-size: 14;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 799px) / (1920 - 799)) );*/
        font-size: calc(var(--vh,1vh)*1.8);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    /*#region 雙人進關面板*/
    #BattleModeRanking {
        top: calc(var(--vh,1vh)*69);
        right: calc(var(--vh,1vh)*25);
        position: absolute;
        display: none;
    }

    .BattleRankAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: calc(var(--vh,1vh)*10);
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        border-radius: 50%;
        position: absolute;
    }

    .BattleRankNumber {
        width: calc(calc(var(--vh,1vh)*3)*0.796);
        height: calc(var(--vh,1vh)*3);
        margin: calc(var(--vh,1vh)*-0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-0.5);
        z-index: 2;
        position: absolute;
    }

    #BattleRank1Number {
        background: url('./img/UI/Number/Fever_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank2Number {
        background: url('./img/UI/Number/Fever2_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank3Number {
        background: url('./img/UI/Number/Fever2_3.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    }

    #BattleRank1ContentDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank2ContentDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-13);
        position: absolute;
    }

    #BattleRank3ContentDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
        position: absolute;
    }

    .BattleRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
    }

    .BattleRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        color: white;
    }

    #BattleRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.75);
        border: none;
    }

    #BattleInvitationArea {
        position: absolute;
        display: none;
        margin: calc(var(--vh,1vh)*39) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
    }

    #BattleInvitationCodeInputBoxContent {
        margin: calc(var(--vh,1vh)*-5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    }

    #BattleInvitationContentDiv {
        background: url('./img/UI/Frame_Text_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.75609756097561) calc(var(--vh,1vh)*10);
        width: calc(calc(var(--vh,1vh)*10)*3.75609756097561);
        height: calc(var(--vh,1vh)*10);
        user-select: none; /* 標準語法 */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
    }

    #BattleInvitationLabel {
        font-size: calc(var(--vh,1vh)*2);
        position: absolute;
        z-index: 2;
        top: calc(var(--vh,1vh)*0);
        right: calc(var(--vh,1vh)*8);
    }

    #BattleInvitationHint {
        font-size: calc(var(--vh,1vh)*1.85);
        position: absolute;
        z-index: 2;
        top: calc(var(--vh,1vh)*3);
        right: calc(var(--vh,1vh)*15);
    }
    /*#endregion*/

    /*#region 雙人結算面板的推薦區*/
    .BattleRecommonFrame {
        margin: calc(var(--vh,1vh)*73) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*29);
        position: absolute;
        scale: 85%
    }

    .BattleLineStickerFrame {
        width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
        height: calc(var(--vh,1vh)*13);
        background: url('./img/UI/Frame_Text_2.png');
        background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*-26);
        position: absolute;
    }

    .BattleLineStickerExample {
        width: calc(calc(var(--vh,1vh)*6)*1);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/Questions/GIF/01/4.gif');
        background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
        position: absolute;
        margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*4);
    }

    .BattleLineStickerText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*12);
        position: absolute;
        width: calc(var(--vh,1vh)*11);
    }

    .BattleQRcodeFrame {
        width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Frame_Text_3.png');
        background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*0);
        position: absolute;
    }

    .BattleQRcodeImg {
        width: calc(calc(var(--vh,1vh)*7)*1);
        height: calc(var(--vh,1vh)*7);
        background: url('./img/UI/QRcode.png');
        background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*15.5);
        position: absolute;
    }

    .BattleQRcodeText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        width: calc(var(--vh,1vh)*11);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家資料(共同)*/

    .pvpModePlayerArea {
        top: calc(var(--vh,1vh)*90);
        position: relative;
        /*        display:none;*/
    }

    .pvpModePlayerFrame {
        width: calc(calc(var(--vh,1vh)*15)*1.024844720496894);
        height: calc(var(--vh,1vh)*15);
    }

    .pvpModePlayerIdDiv {
        width: calc(var(--vh,1vh)*35);
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        position: absolute;
        font-family: PumpkinGames;
        top: calc(var(--vh,1vh)*10.5);
        text-align: center;
    }

    .pvpModePlayerAvatorDiv {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .PvpProgressBar {
        position: absolute;
        width: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081);
        height: calc(var(--vh,1vh)*1.5);
        top: calc(var(--vh,1vh)*5);
        left: calc(var(--vh,1vh)*-0.5);
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081) calc(var(--vh,1vh)*1.5);
        z-index: 3;
    }

    .PvpProgressBarCounter {
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081) calc(var(--vh,1vh)*1.5);
    }

    .pvpModeScoreAnimArea {
        margin: calc(var(--vh,1vh)*-16) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
        display: none;
    }

    .ScorePlus {
        width: calc(calc(var(--vh,1vh)*3)*1.087912087912088);
        height: calc(var(--vh,1vh)*3);
        background: url('./img/UI/Number/Fever_plus.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*1.087912087912088) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    .PvpScoreLoserNumber {
        width: calc(calc(var(--vh,1vh)*3.2)*0.796);
        height: calc(var(--vh,1vh)*3.2);
        background: url('./img/UI/Number/Fever2_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.2)*0.796) calc(var(--vh,1vh)*3.2);
        position: absolute;
    }

    .PvpScoreWinnerNumber {
        width: calc(calc(var(--vh,1vh)*3.5)*0.796);
        height: calc(var(--vh,1vh)*3.5);
        background: url('./img/UI/Number/Fever_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*0.796) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #pvpModeHost {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #pvpModeVisitor {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    /*#endregion*/


    /*#region 雙人模式 遊戲中 對手區*/
    #pvpModeVisitorDiv {
        left: calc(var(--vh,1vh)*5);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameVisitor {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*1.024844720496894)calc(var(--vh,1vh)*15);
    }

    #pvpModeVisitorScoreArea {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #VisitorScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #VisitorScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #VisitorScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #VisitorScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.5);
        position: absolute;
    }

    #VisitorScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #pvpModeVisitor {
    }

    #pvpModeVisitorAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #VisitorBarCounter {
        width: 0%;
        position: absolute;
    }

    #VisitorScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #VisitorScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*9);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家區*/
    #pvpModeHostDiv {
        right: calc(var(--vh,1vh)*20);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameHost {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*1.024844720496894)calc(var(--vh,1vh)*15);
    }

    #pvpModeHostScoreArea {
        /*        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;*/
    }

    .pvpModeScoreArea {
        top: calc(var(--vh,1vh)*-2);
        position: absolute;
        z-index: 10;
    }

    #HostScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #HostScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #HostScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #HostScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
        position: absolute;
    }

    #HostScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #pvpModeHost {
    }

    #pvpModeHostAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #HostBar {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #HostBarCounter {
        width: 0%;
        position: absolute;
    }

    #HostScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #HostScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1.5);
        position: absolute;
    }

    #HostScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #HostScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.5);
        position: absolute;
    }

    #HostScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*9);
        position: absolute;
    }
    /*#endregion*/

    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./img/UI/Frame_Text_Normal.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*28)*1.700787401574803) calc(var(--vh,1vh)*28);
        /*    z-index: 100;*/
        /*    position: absolute;*/
        display: none;
        /*    top: 36%;
    left: 36%;*/
        margin: calc(var(--vh,1vh)*32) auto auto auto;
        padding: 0px;
        /*    float: right;*/
    }

    /*#region 通用進關面板*/
    .intro {
        width: calc(calc(var(--vh,1vh)*60)*0.922);
        height: calc(var(--vh,1vh)*60);
        background: url('./img/UI/Frame_Play.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*60)*0.922) calc(var(--vh,1vh)*60);
        /*background: rgba(255,255,255,0.9);*/
        /*        white-space: pre-line;*/
        margin: calc(var(--vh,1vh)*20) auto 0 auto;
        font-weight: bolder;
        font-size: calc(var(--vh,1vh)*2.75);
        line-height: calc(var(--vh,1vh)*5.5);
        font-family: "微軟正黑體";
        padding: 0px;
        display: none;
    }

    .introHeader {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.85);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        background: url('./img/UI/Title_RedRibbon.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.85) calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        /*    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*4);*/
        position: absolute;
        top: calc(var(--vh,1vh)*-5.5);
        right: calc(var(--vh,1vh)*6.25);
    }

    .IntroBtnClose {
        width: calc(var(--vh,1vh)*6);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/UI/Button_Close_2.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*6) calc(var(--vh,1vh)*6);
        /*    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*44.5);*/
        position: absolute;
        z-index: 2;
        top: calc(var(--vh,1vh)*-1.5);
        right: calc(var(--vh,1vh)*-0.35);
    }

    .introImage {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.65);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.65) calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        /*    margin: calc(var(--vh,1vh)*-23) auto 0 calc(var(--vh,1vh)*9);*/
        position: absolute;
        top: calc(var(--vh,1vh)*-13);
        right: calc(var(--vh,1vh)*11);
    }

    .modePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.922*0.4);
        height: calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        background: url('./img/UI/Title_Mode.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.922*0.4) calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        margin: calc(var(--vh,1vh)*6) auto 0 auto;
        padding: 0.4em 1em 1em 1em;
        text-align: center;
        font-size: calc(var(--vh,1vh)*1.8);
        line-height: calc(var(--vh,1vh)*3);
        font-weight: bold;
        color: white;
        border: 0;
        font-family: PumpkinGames;
    }

    #modePanelDiv {
        margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*17);
        position: absolute;
        top: calc(var(--vh,1vh)*0.25);
    }

    #introWordContent {
        margin: auto auto 0 auto;
        position: absolute;
        padding: 3.5em 4.5em 4.5em 4.5em;
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vh,1vh)*2.5);
        top: calc(var(--vh,1vh)*4);
    }

    #introTodayCanPlayCountHintDiv {
        margin: calc(var(--vh,1vh)*32) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        text-align: center;
    }

    #introTodayCanPlayCountHint {
        padding: 3.5em 5.5em 4.5em 6em;
        font-size: calc(var(--vh,1vh)*2.5);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vh,1vh)*3);
        top: calc(var(--vh,1vh)*4);
    }

    #introSubWordDiv {
        width: calc(var(--vh,1vh)*34);
        position: absolute;
        text-align: right;
        padding: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*9);
    }

    #introSubWordContent {
        font-size: calc(var(--vh,1vh)*2.5);
        font-weight: initial;
        font-weight: bold;
    }

    .introQRCode {
        top: 70%;
        left: 10%;
        width: 100px;
        height: 100px;
        background: url('./img/onlink_to_rs67jz_small.png') no-repeat;
    }

    #DiffictyDefinitonAreaComboBox {
        position: absolute;
        margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*34);
    }

    #DiffictyDefinitonAreaSlider {
        top: calc(var(--vh,1vh)*47);
        position: absolute;
        margin: 0 auto 0 auto;
        right: calc(var(--vh,1vh)*57);
    }

    #brownLine {
        top: 66%;
        margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*21);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*4)*2.7058);
        height: calc(var(--vh,1vh)*4);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_01.png');
        background-size: calc(calc(var(--vh,1vh)*4)*2.7058) calc(var(--vh,1vh)*4);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #EasyBtn {
        margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*19);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_04.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*        margin: auto 0 auto calc(var(--vh,1vh)*20);*/
    }

    #HardBtn {
        margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*28);
        position: absolute;
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_05.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
    }

    #EventWeeklyRewardDiv {
        margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*30);
        display: none;
        position: absolute;
    }

    #WeeklyRewardsText {
        width: calc(var(--vh,1vh)*20);
        font-size: calc(var(--vh,1vh)*2.5);
        font-weight: bold;
        color: maroon;
        margin: calc(var(--vh,1vh)*4) auto 0 calc(var(--vh,1vh)*-20);
        position: absolute;
    }

    #WeeklyRewardImage {
        margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*3);
        position: absolute;
        width: calc(calc(var(--vh,1vh)*12)*0.9414634146341463);
        height: calc(var(--vh,1vh)*12);
        background: url('./img/UI/Icon_Gold_box.png');
        background-size: calc(calc(var(--vh,1vh)*12)*0.9414634146341463) calc(var(--vh,1vh)*12);
    }

    /*#endregion*/

    #buttonDiv {
        /*    top: 87%;*/
        position: absolute;
        margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*18);
    }

    #RoomButtonPlay {
        margin: calc(var(--vh,1vh)*-7.5) auto 0 calc(var(--vh,1vh)*13);
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    }
    #GoogleButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*11);
    }

    #FacebookButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*11) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*11);
    }
}

#Setting {
    position: absolute;
    width: calc(calc(var(--vh,1vh)*6)*0.98769);
    height: calc(var(--vh,1vh)*6);
    /*background:white;*/
    margin: auto;
    left: 0;
    top: calc(var(--vh,1vh)*1.6);
    float: left;
    background: url('./img/UI/Button_Setting.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6)*0.98769) calc(var(--vh,1vh)*6);
    z-index: 3;
    display: none;
}


#timer {
    position: absolute;
    width: calc(calc(var(--vh,1vh)*8)*1.17647);
    height: calc(var(--vh,1vh)*8);
    /*    width: 60px;
    height: 51px;*/
    margin: auto;
    left: 0;
    top: 1.5%;
    float: left;
    background: url('./img/UI/Frame_Time.png?id=1') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*1.17647) calc(var(--vh,1vh)*8);
    z-index: 3;
}

#timerNum {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*2.7) auto 0 calc(var(--vh,1vh)*0);
    text-align: center;
    left: 0;
    right: 0;
}

#timerLabel {
    font-weight: bold;
    color: maroon;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.back {
    /*/避免開始就載入預設圖片，之後又馬上被新的取代，畫面更換過多，移除預設設定*/
    /*    background: url('./img/Cover/Cover_9.png') no-repeat;
    background-size: contain;*/
    width: 100%;
    height: 100%;
    position: absolute;
}

.front {
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

#wall {
    width: 1140px;
    height: 680px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

.custom-select {
    min-width: calc(var(--vh,1vh)*10);
    position: relative;
}

select {
    appearance: none;
    /*  safari  */
    -webkit-appearance: none;
    /*  other styles for aesthetics */
    /*    width: 100%;*/
    font-size: 1rem;
    padding: 0.35em 1em 0.35em 0.5em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
}

.custom-select::before,
.custom-select::after {
    --size: 0.3rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
}

.custom-select::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid black;
    top: 40%;
}

.custom-select::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid black;
    top: 55%;
}

/*#region 動畫區*/

@keyframes opa {
    from {
        filter: opacity(100%);
    }

    to {
        filter: opacity(0%);
    }
}

@keyframes ComparedWrong {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

@keyframes ComparedSuccess {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes SlideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SlideFromRight {
    0% {
        opacity: 0;
        transform: translateX(250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes BounceIn {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(-250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(-65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(-28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(-8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

@keyframes SlideTop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-250px);
    }
}

@keyframes flip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

@keyframes FadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-125px);
    }
}

@keyframes ZoomIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ZoomOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ComboAnim {
    0% {
        opacity: 0;
        transform: scale(0.6);
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-125px);
    }
}

@keyframes BounceInRight {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateX(250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateX(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateX(68px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateX(32px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateX(8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }
}

@keyframes BounceInBottom {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

@keyframes ScaleInCenter {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/*#endregion*/

@font-face {
    font-family: 'PumpkinGames';
    src: url('./Font/GenSenMaruGothicTW-Light.ttf');
    /* 可以添加其他格式的字体，以提供更好的兼容性 */
}

.StartPageParentDiv {
    position: absolute;
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    top: 0;
    z-index: 1;
}


.fireworksParentDiv {
    position: relative;
    background-size: auto calc(var(--vh,1vh)*100);
    width: 100%;
    height: calc(var(--vh,1vh)*100/0.95);
    z-index: 1;
}

.fireworksDiv {
    position: absolute;
    background-size: auto calc(var(--vh,1vh)*100);
    width: 100%;
    height: calc(var(--vh,1vh)*100/0.95);
    z-index: 2;
}


.mask {
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5)
}

.CommonMask {
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
    display: none;
}

/*#region COMBO*/

#ComboTextContent {
    width: calc(calc(var(--vh,1vh)*9)*4.285714285714286);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Number/Combo.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*4.285714285714286) calc(var(--vh,1vh)*9);
    margin: 0 auto auto calc(var(--vh,1vh)*-2);
    padding: 0px;
}

#ComboNumberOne {
    width: calc(calc(var(--vh,1vh)*9)*0.796);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*0.796) calc(var(--vh,1vh)*9);
    margin: calc(var(--vh,1vh)*-9) auto auto calc(var(--vh,1vh)*37);
}

#ComboNumberTwo {
    width: calc(calc(var(--vh,1vh)*9)*0.796);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*0.796) calc(var(--vh,1vh)*9);
    margin: calc(var(--vh,1vh)*-9) auto auto calc(var(--vh,1vh)*45);
}

/*#endregion*/

/*#region 遊戲暫停*/

.PausePanel {
    width: calc(calc(var(--vh,1vh)*65)*0.7807);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Book_Small.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.7807) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.BtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*39.5);
    position: absolute;
    z-index: 2;
}

.PausePanelHaderImage {
    width: calc(calc(var(--vh,1vh)*22)*1.24401);
    height: calc(var(--vh,1vh)*22);
    background: url('./img/UI/Title_Rank_Today.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*22)*1.24401) calc(var(--vh,1vh)*22);
    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*11.5);
    position: absolute;
    z-index: 2;
}

.PausePanelHeadImage {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Frame_Main_Login.png') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*19);
    position: absolute;
    z-index: 2;
    border-radius: 50%;
}

#PausePanelSubjectDiv {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*24.5) auto 0 calc(var(--vh,1vh)*19);
    text-align: center;
    position: absolute;
    z-index: 2;
}

#PausePanelSubjectLabel {
    font-weight: bold;
    color: black;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: PumpkinGames, sans-serif;
    text-align: center;
}

#PausePanelSubTitleDiv {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*31) auto 0 calc(var(--vh,1vh)*22);
    text-align: center;
    position: absolute;
    z-index: 2;
}

#PausePanelSubjectTitleLabel {
    font-weight: bold;
    color: black;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: PumpkinGames, sans-serif;
    text-align: center;
}

.PausePanelSpeakerImage {
    width: calc(calc(var(--vh,1vh)*7)*0.98076);
    height: calc(var(--vh,1vh)*7);
    background: url('./img/UI/Button_Music_On.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7)*0.98076) calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*37) auto 0 calc(var(--vh,1vh)*22);
    position: absolute;
    z-index: 2;
}

#PausePanelGiveUpDiv {
    margin: calc(var(--vh,1vh)*46) auto 0 calc(var(--vh,1vh)*6);
    position: absolute;
    z-index: 1;
}

.PausePanelGiveUpButtonStyle {
    width: calc(calc(var(--vh,1vh)*10)*3.2987);
    height: calc(var(--vh,1vh)*10);
    display: block;
    border: none;
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*10)*3.2987) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
}

/*#endregion*/

/*#region 排行榜總面板*/

.RankingTotalPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6587591240875912);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_Rank_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6587591240875912) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#RankingHeaderTitleDiv {
    padding: calc(var(--vh,1vh)*1) 0 0 0;
    text-align: center;
    z-index: 2;
}

#RankingHeaderTitleLabel {
    font-weight: bold;
    color: white;
    font-size: calc(var(--vh,1vh)*3.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

.RankingBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*43.5);
    position: absolute;
    z-index: 2;
}

#RankingPanelContainerDiv {
    margin: calc(var(--vh,1vh)*18) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*4.5);
    position: absolute;
    z-index: 1;
}

#RankingPanelTodayDiv {
    margin: calc(var(--vh,1vh)*2) auto 0 calc(var(--vh,1vh)*1);
}

.RankingPanelTodayButtonStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_Today.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

#RankingPanelThisWeekDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

.RankingPanelThisWeekButtonStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_Week.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

#RankingPanelEventDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

.RankingPanelEventStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_Activity.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

#RankingPanelHistoryDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

.RankingPanelHistoryStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_Total.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*3) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

#RankingPanelLuckyDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

.RankingPanelLuckyStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_Lucky.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

#RankingPanelRank_PKDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

#RankingpanelRankButtonLock {
    width: calc(calc(var(--vh,1vh)*8)*0.7894736842105263);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_Lock.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.7894736842105263) calc(var(--vh,1vh)*8);
    /*margin: calc(var(--vh,1vh)*-15) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*37);*/
    padding: 0px;
    position: absolute;
}

.RankingPanelRank_PKStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background: url('./img/UI/Button_Rank_PK.png');
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    /*margin: calc(var(--vh,1vh)*7) auto 0 calc(var(--vh,1vh)*0);*/
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

/*#endregion*/

/*#region 教學面板*/

.TutorialPanel {
    width: calc(calc(var(--vh,1vh)*90)*0.6173780487804878);
    height: calc(var(--vh,1vh)*90);
    background: url('./img/UI/Frame_Tutorial.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*90)*0.6173780487804878) calc(var(--vh,1vh)*90);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#TutorialHeaderDiv {
    width: calc(calc(var(--vh,1vh)*15)*2.633663366336634);
    height: calc(var(--vh,1vh)*15);
    margin: calc(var(--vh,1vh)*-7.5) auto auto calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Title_Tutorial.png');
    background-size: calc(calc(var(--vh,1vh)*15)*2.633663366336634) calc(var(--vh,1vh)*15);
    position: absolute;
    z-index: 2;
}


.TutorialHeaderContentDiv {
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*11);
    position: absolute;
    z-index: 2;
    text-align: center;
    width: calc(var(--vh,1vh)*22);
}


#TutorialHeaderLabel {
    font-size: calc(var(--vh,1vh)*3.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*3) auto 0 calc(var(--vh,1vh)*43.5);
    position: absolute;
    z-index: 2;
}


#TutorialSingleDiv {
    width: calc(calc(var(--vh,1vh)*25)*1.971428571428571);
    height: calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*12.5) auto auto calc(var(--vh,1vh)*1.3);
    background: url('./img/UI/Frame_Tutorial_1.png');
    background-size: calc(calc(var(--vh,1vh)*25)*1.971428571428571) calc(var(--vh,1vh)*25);
    position: absolute;
    z-index: 2;
}




#TutorialSingleHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialSingleContentDiv {
    margin: calc(var(--vh,1vh)*3.5) auto auto auto;
    text-align: left;
    padding: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    z-index: 2;
    line-height: calc(var(--vh,1vh)*2.25);
}


#TutorialDoubleDiv {
    width: calc(calc(var(--vh,1vh)*23)*2.03448275862069);
    height: calc(var(--vh,1vh)*23);
    margin: calc(var(--vh,1vh)*37.5) auto auto calc(var(--vh,1vh)*3);
    background: url('./img/UI/Frame_Tutorial_2.png');
    background-size: calc(calc(var(--vh,1vh)*23)*2.03448275862069) calc(var(--vh,1vh)*23);
    position: absolute;
    z-index: 2;
}




#TutorialDoubleHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialDoubleContentDiv {
    z-index: 2;
    text-align: left;
    padding: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*2.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
    line-height: calc(var(--vh,1vh)*3);
}


#TutorialDoubleContentLabel {
    font-size: calc(var(--vh,1vh)*2.2);
    color: maroon;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

#TutorialPracticeDiv {
    width: calc(calc(var(--vh,1vh)*25)*2.022857142857143);
    height: calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*60) auto auto calc(var(--vh,1vh)*1.3);
    background: url('./img/UI/Frame_Tutorial_3.png');
    background-size: calc(calc(var(--vh,1vh)*25)*2.022857142857143) calc(var(--vh,1vh)*25);
    position: absolute;
    z-index: 2;
}



#TutorialPracticeHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialPracticeContentDiv {
    z-index: 2;
    padding: calc(var(--vh,1vh)*4.5) calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    text-align: left;
    line-height: calc(var(--vh,1vh)*2.6);
}

/*#endregion*/

/*#region 關於我們*/

.AboutPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6173780487804878);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_AboutUs.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6173780487804878) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#AboutHeaderDiv {
    width: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634);
    height: calc(var(--vh,1vh)*13.5);
    margin: calc(var(--vh,1vh)*-6) auto auto calc(var(--vh,1vh)*7);
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634) calc(var(--vh,1vh)*13.5);
    position: absolute;
    z-index: 2;
}

.AboutHeaderContentDiv {
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*13);
    position: absolute;
    z-index: 2;
}

#AboutHeaderLabel {
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.AboutBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*41.5);
    position: absolute;
    z-index: 2;
}

.AboutScrollContent {
    /*    text-align: center;*/
    margin: auto;
}

.AboutIntroduceContentDiv {
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    text-align: justify;
}

#AboutIntroduceContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

#AboutFutureHeaderDiv {
    width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
    height: calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*11);
    background: url('./img/UI/Button_Main_AboutUs.png');
    background-size: calc(calc(var(--vh,1vh)*7)*3.159090909090909) calc(var(--vh,1vh)*7);
    /*    position: absolute;*/
    z-index: 2;
}

.AboutFutureHeaderContentDiv {
    /*    font-size: calc(var(--vh,1vh)*2.65);*/
    /*    margin: calc(var(--vh,1vh)*0.75) auto auto calc(var(--vh,1vh)*3.5);*/
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*1) 0px calc(var(--vh,1vh)*0);
    text-align: center;
}

#AboutFutureHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.5);
    color: saddlebrown;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.AboutFutureContentDiv {
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*5) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    text-align: justify;
}

#AboutFutureContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

/*#endregion*/

/*#region 隱私權政策面板*/

.PrivacyPolicyPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6173780487804878);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_AboutUs.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6173780487804878) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#PrivacyPolicyHeaderDiv {
    width: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634);
    height: calc(var(--vh,1vh)*13.5);
    margin: calc(var(--vh,1vh)*-6) auto auto calc(var(--vh,1vh)*7);
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634) calc(var(--vh,1vh)*13.5);
    position: absolute;
    z-index: 2;
}

.PrivacyPolicyHeaderContentDiv {
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*12);
    z-index: 2;
}

#PrivacyPolicyLabel {
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.PrivacyPolicyBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*41.5);
    position: absolute;
    z-index: 2;
}

.privacypolicyScrollbar {
    /*    text-align: center;*/
    margin: auto;
}

.PrivacyPolicyContentDiv {
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*1);
    z-index: 2;
}

#PrivacyPolicyContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}
/*#endregion*/

/*#region 測驗結果面板*/

.QuizResultPanel {
    width: calc(calc(var(--vh,1vh)*75)*0.7969283276450512);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Personality.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*75)*0.7969283276450512) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*15) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}

#QuizResultHeaderDiv {
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*23);
    font-size: calc(var(--vh,1vh)*3.5);
    color: white;
    position: absolute;
    z-index: 2;
}

.QuizResultHeaderLabel {
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*22);
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    position: absolute;
    z-index: 2;
}

.QuizResultBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*4.5) auto 0 calc(var(--vh,1vh)*46.5);
    position: absolute;
    z-index: 2;
}

.QuizResultMemoryDiv {
    float: left;
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*0.5);
}

.QuizResultPasstimeDiv {
    float: right;
    margin: calc(var(--vh,1vh)*3) auto auto auto;
}

.QuizResultLuckyDiv {
    float: left;
    margin: calc(var(--vh,1vh)*3) auto auto calc(var(--vh,1vh)*0.5);
}

/*#endregion*/

/*#region 登入頁面*/

.LoginPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.8198924731182796);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Login.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.8198924731182796) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}

#LoginTitleContenDiv {
    margin: calc(var(--vh,1vh)*2.5) auto auto auto;
    position: absolute;
    width: calc(var(--vh,1vh)*52);
    text-align: center;
}

#LoginTitleContent {
    font-size: calc(var(--vh,1vh)*3);
    color: maroon;
    font-weight: bold;
}

.LoginPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*41);
    position: absolute;
    z-index: 2;
}

.LoginButton {
    width: calc(calc(var(--vh,1vh)*10)*2.929824561403509);
    height: calc(var(--vh,1vh)*10);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;
}

#FacebookButton {
    background: url('./img/UI/Button_Blue.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.31) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*15);
}

#LineButton {
    background: url('./img/UI/Button_Line.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.929824561403509) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*32) auto 0 calc(var(--vh,1vh)*11.5);
}



#GoogleButton {
    /*    background: url('./img/UI/Button_Purple.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.31) calc(var(--vh,1vh)*10);*/
    /*    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*0);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;*/
}

#LoginGuestContentDiv {
    margin: calc(var(--vh,1vh)*12) auto auto auto;
    text-align: center;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
}

#LoginGuestContent {
    /*    --min-size: 13;
    --max-size: 16;
    --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);*/
    font-size: calc(var(--vh,1vh)*2.25);
    color: red;
    font-weight: bold;
    z-index: 2;
}

#GuestButton {
    background: url('./img/UI/Button_Visitor.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.929824561403509) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11.5);
}

/*#endregion*/

/*#region 我的帳戶頁面*/

.MyAccountPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}

.MyAccountPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*36);
    position: absolute;
    z-index: 2;
}

#AccuountTitleContent {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*35);
    position: absolute;
}

#AccountIdContentDiv {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-10);
    position: absolute;
    width: calc(var(--vh,1vh)*19);
}

#AccountIdContent {
    font-size: calc(var(--vh,1vh)*2.8);
    color: saddlebrown;
    position: absolute;
    font-weight: bold;
    z-index: 2;
}

.BindChefBearInputBox {
    font-size: calc(var(--vh,1vh)*1.35);
    text-align: left;
    padding-left: 15px; /* 讓文字往右 */
    padding-bottom: 5px; /*文字往上*/
    width: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Frame_Text_1.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-3);
    font-weight: bold;
    position: absolute;
    border: none;
    outline: none;
    -webkit-appearance: textfield; /* Chrome, Safari, Opera */
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

    .BindChefBearInputBox::-webkit-inner-spin-button, /* Firefox */
    .BindChefBearInputBox::-webkit-outer-spin-button { /* For WebKit (Chrome, Opera, Safari, ... ) */
        -webkit-appearance: none;
        margin: 0;
    }

    .BindChefBearInputBox::-ms-clear,
    .BindChefBearInputBox::-ms-reveal { /* Internet Explorer */
        display: none;
        width: 0;
        height: 0;
    }

    .BindChefBearInputBox::-ms-clear { /* Microsoft Edge */
        display: none;
    }

.BattleInvitationCodeInputBox {
    font-size: calc(var(--vh,1vh)*1.35);
    text-align: left;
    padding-left: 15px; /* 讓文字往右 */
    padding-bottom: 5px; /*文字往上*/
    width: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Frame_Text_1.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-3);
    font-weight: bold;
    position: absolute;
    border: none;
    outline: none;
    -webkit-appearance: textfield; /* Chrome, Safari, Opera */
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

    .BattleInvitationCodeInputBox::-webkit-inner-spin-button, /* Firefox */
    .BattleInvitationCodeInputBox::-webkit-outer-spin-button { /* For WebKit (Chrome, Opera, Safari, ... ) */
        -webkit-appearance: none;
        margin: 0;
    }

    .BattleInvitationCodeInputBox::-ms-clear,
    .BattleInvitationCodeInputBox::-ms-reveal { /* Internet Explorer */
        display: none;
        width: 0;
        height: 0;
    }

    .BattleInvitationCodeInputBox::-ms-clear { /* Microsoft Edge */
        display: none;
    }

.BindChefBearButton {
    width: calc(var(--vh,1vh)*2.5);
    height: calc(var(--vh,1vh)*2.5);
    background: url('./img/UI/Button_Search.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*2.5) calc(var(--vh,1vh)*2.5);
    margin: calc(var(--vh,1vh)*4.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
    font-weight: bold;
    position: absolute;
    border: none;
}

#ChefBearIdDiv {
    width: calc(var(--vh,1vh)*20);
    position: absolute;
}

#ChefBearId {
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*-3);
    font-size: calc(var(--vh,1vh)*1.8);
    color: saddlebrown;
    position: absolute;
    font-weight: bold;
    z-index: 2;
    display: none;
}

.MyAccountButton {
    width: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019) calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
}

#MemoryAnalyzeButton {
    margin: calc(var(--vh,1vh)*21) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#MyRewardButton {
    margin: calc(var(--vh,1vh)*31) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#EncyclopediaButton {
    margin: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#LogOutButton {
    width: calc(calc(var(--vh,1vh)*5.5)*3.058823529411765);
    height: calc(var(--vh,1vh)*5.5);
    background: url('./img/UI/Button_Main_Login.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5.5)*3.058823529411765) calc(var(--vh,1vh)*5.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*49) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15.5);
    position: absolute;
    font-family: PumpkinGames;
}

#MyAccountTodayCanPlayCountDiv {
    margin: calc(var(--vh,1vh)*55) auto 0 calc(var(--vh,1vh)*8);
    width: calc(var(--vh,1vh)*32);
    position: absolute;
}

#MyAccountTodayCanPlayCountHint {
    font-size: calc(var(--vh,1vh)*1.5);
    font-weight: bold;
    font-family: PumpkinGames;
    color: saddlebrown;
    text-align: center;
}

/*#endregion*/

/*#region 我的獎勵面板*/

.MyRewardPanel {
    width: calc(calc(var(--vh,1vh)*75)*0.6787658802177858);
    height: calc(var(--vh,1vh)*75);
    background: url('./img/UI/Frame_Mine_Bag.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*75)*0.6787658802177858) calc(var(--vh,1vh)*75);
    margin: calc(var(--vh,1vh)*15) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}


#MyRewardTitleIcon {
    width: calc(calc(var(--vh,1vh)*8.5)* 3.954545454545455 );
    height: calc(var(--vh,1vh)*8.5);
    background: url('./img/UI/Title_Mine_Bag.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8.5)* 3.954545454545455 ) calc(var(--vh,1vh)*8.5);
    margin: calc(var(--vh,1vh)*-4) auto auto calc(var(--vh,1vh)*9);
    padding: 0px;
    z-index: 3;
    position: absolute;
}

#MyRewardTitleContentDiv {
    margin: calc(var(--vh,1vh)*2.5) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
    width: calc(var(--vh,1vh)*25);
    text-align: center;
}

#MyRewardTitleContent {
    font-size: calc(var(--vh,1vh)*2.75);
    color: white;
    position: absolute;
    z-index: 2;
    font-weight: bold;
}

.MyRewardPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*40);
    position: absolute;
    z-index: 2;
}

.MyRewardButton {
    width: calc(calc(var(--vh,1vh)*5)*3.41025641025641);
    height: calc(var(--vh,1vh)*5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    position: absolute;
    z-index: 3;
}

#VirtualReward {
    margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#EntityReward {
    margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

.RewardScrollContent {
    text-align: center;
    margin: auto;
}

.RewardObjectContent {
    width: calc(calc(var(--vh,1vh)*11.25)*3.482352941176471);
    height: calc(var(--vh,1vh)*11.25);
    background: url('./img/UI/Button_Bag_Icon.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*11.25)* 3.482352941176471 ) calc(var(--vh,1vh)*11.25);
    margin: calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0.25);
    visibility: visible;
}

.RewardObjectCover {
    width: calc(calc(var(--vh,1vh)*11.25)*3.482352941176471);
    height: calc(var(--vh,1vh)*11.25);
    background: url('./img/UI/Button_Bag_Icon_Cover.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*11.25)* 3.482352941176471 ) calc(var(--vh,1vh)*11.25);
    position: absolute;
    z-index: 4;
}

#OneClickSendReward {
    width: calc(calc(var(--vh,1vh)*7.5)*3.2);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*3.2) calc(var(--vh,1vh)*7.5);
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13.5);
    position: absolute;
    font-family: PumpkinGames;
}
/*#endregion*/

/*#region 通用提示框面版*/


.HintFrameCloseButton {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*38);
    z-index: 2;
    position: absolute;
}

#HintContentDiv {
    text-align: center;
    padding: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#HintContent {
    /*    font-size: calc(var(--vh,1vh)*3);
    color: saddlebrown;
    font-weight: bold;*/
}

.commonButtonStyle {
    width: calc(calc(var(--vh,1vh)*6)*2.31);
    height: calc(var(--vh,1vh)*6);
    display: block;
    border: none;
    position: absolute;
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
}

#commonHintFrameButtonArea {
    position: absolute;
    margin: calc(var(--vh,1vh)*14) auto 0 calc(var(--vh,1vh)*17);
    display: none;
}

#YesButton {
    background: url('./img/UI/Button_Orange.png');
    background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*-10);
}

#NoButton {
    background: url('./img/UI/Button_Blue.png');
    background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*10);
}
/*#endregion*/

/*#region 關卡提示面板*/
.StageHintSingleTopicPanel {
    width: calc(calc(var(--vh,1vh)*25)*1.7925);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Frame_Hint.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.7925) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.StageHintSingleTopicLogoCenter {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Number/Fever_Add.png') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*18);
    /*  top: 21%;*/
    top: 32%;
    position: absolute;
    z-index: 2;
}

.StageHintPanel {
    width: calc(calc(var(--vh,1vh)*25)*1.7925);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Frame_Hint.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.7925) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.StageHintHaderImage {
    width: calc(calc(var(--vh,1vh)*35)*0.3*3.169);
    height: calc(calc(var(--vh,1vh)*35)*0.3);
    background: url('./img/UI/Title_Level1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*35)*0.3*3.169) calc(calc(var(--vh,1vh)*35)*0.3);
    margin: calc(var(--vh,1vh)*-6) auto 0 calc(var(--vh,1vh)*7);
    /*top: 22%;*/
    /*    top: -23%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoLeft {
    width: calc(var(--vh,1vh)*14);
    height: calc(var(--vh,1vh)*14);
    background: url('./img/UI/Hint/TW.png') no-repeat;
    background-size: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*14);
    margin: calc(var(--vh,1vh)*6) auto 0 calc(var(--vh,1vh)*8);
    /*  top: 21%;*/
    /*    top: 37%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoCenter {
    width: calc(var(--vh,1vh)*4);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever_Add.png') no-repeat;
    background-size: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*22.5);
    /*  top: 21%;*/
    /*    top: 43%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoRight {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Hint/Sticker_V1.gif') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*6) auto 0 calc(var(--vh,1vh)*27);
    /*  top: 21%;*/
    /*    top: 27%;*/
    position: absolute;
    z-index: 2;
}
/*#endregion*/

/*#region 詳細排行榜面板*/

.RankingScrollPanel {
    width: calc(calc(var(--vh,1vh)*80)*0.6870503597122302);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Rank_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*80)*0.6870503597122302) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*18) auto 0 auto;
    display: none;
}

#RankingScrollTitle {
    position: absolute;
    margin: calc(var(--vh,1vh)*-16) auto auto calc(var(--vh,1vh)*13);
}

#RankingTitleDecration {
    /*width: calc(calc(var(--vh,1vh)*22)*1.244019138755981);
    height: calc(var(--vh,1vh)*22);
    background: url('./img/UI/Title_Rank_Today.png');
    background-size: calc(calc(var(--vh,1vh)*22)*1.244019138755981) calc(var(--vh,1vh)*22);*/
}

#RankingScrollTitleContent {
    margin: calc(var(--vh,1vh)*-6.5) auto auto auto;
    text-align: center;
}

#RankingScrollTitleLabel {
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#RankingScrollBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*4) auto auto calc(var(--vh,1vh)*42.5);
    position: absolute;
    z-index: 2;
}

.RankingScrollContent {
    text-align: center;
    margin: auto;
}

/*#endregion*/

/*#region 記憶健康面板*/

.MemoryAnalysisPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.8426966292134831);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Mine_Small.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.8426966292134831) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*16) auto 0 auto;
    display: none;
}

#MemoryAnalysisTitle {
    width: calc(calc(var(--vh,1vh)*9)*3.428571428571429);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*3.428571428571429) calc(var(--vh,1vh)*9);
    height: calc(var(--vh,1vh)*9);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    position: absolute;
    z-index: 3;
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    font-family: PumpkinGames;
}

#MemoryAnalysisTitleContent {
    text-align: center;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11.5);
}

#MemoryAnalysisTitleLabel {
    width: calc(var(--vh,1vh)*30.5);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
    z-index: 3;
    position: absolute;
}

.MemoryAnalysisButton {
    width: calc(calc(var(--vh,1vh)*9)*4.188679245283019);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*4.188679245283019) calc(var(--vh,1vh)*9);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.5);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
}

.MemoryAnalysisCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*43);
    z-index: 2;
    position: absolute;
}

#MemoryAnalysisToday {
    margin: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#MemoryAnalysisWeek {
    margin: calc(var(--vh,1vh)*27) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#MemoryAnalysisTotal {
    margin: calc(var(--vh,1vh)*38) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

/*#endregion*/

/*#region 記憶報告面板*/

.MemoryScrollPanel {
    width: calc(calc(var(--vh,1vh)*80)*0.598993288590604);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Note.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*80)*0.598993288590604) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    display: none;
}

#MemoryScrollTitle {
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7.75);
    width: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019) calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;
}

#MemoryScrollCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*39);
    z-index: 2;
    position: absolute;
}

.MemoryScrollContent {
    text-align: center;
    margin: auto;
}


/*#endregion*/

/*#region 失敗結算面板*/

.FailurePanel {
    width: calc(calc(var(--vh,1vh)*60)*0.982);
    height: calc(var(--vh,1vh)*60);
    background: url('./img/UI/Frame_Failure.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982) calc(var(--vh,1vh)*60);
    margin: calc(var(--vh,1vh)*14) auto 0 auto;
    display: none;
}

.FailurePanelHaderImage {
    width: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.954);
    height: calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    background: url('./img/UI/Decor_Failure_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.954) calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    margin: calc(var(--vh,1vh)*0) 0 0 calc(var(--vh,1vh)*3);
    /*top: 22%;*/
    top: -6%;
    position: absolute;
    z-index: 2;
}

.FailurePanelLogoImage {
    width: calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    height: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.755);
    background: url('./img/UI/Decor_Failure_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982*0.3) calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.755);
    margin: calc(var(--vh,1vh)*0.5) auto 0 calc(var(--vh,1vh)*17);
    /*  top: 21%;*/
    top: -9%;
    position: absolute;
    z-index: 2;
}

.FailureScoreArea {
    margin: calc(var(--vh,1vh)*16) auto 0 calc(var(--vh,1vh)*15);
    position: absolute;
    /*            top: 45%;*/
}

.FailureScoreTitleArea {
    width: calc(calc(var(--vh,1vh)*4)*3.571);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Score2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*3.571) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*9.5);
    position: absolute;
}

.FailureScoreNumberOne {
    width: calc(calc(var(--vh,1vh)*4)*0.8);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*0.796) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*24);
    position: absolute;
}

.FailureScoreNumberTwo {
    width: calc(calc(var(--vh,1vh)*4)*0.8);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*0.796) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*27);
    position: absolute;
}

.FailureScoreNumberThree {
    width: calc(calc(var(--vh,1vh)*4)*0.8);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*0.796) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*30);
    position: absolute;
}

.FailureScoreNumberFour {
    width: calc(calc(var(--vh,1vh)*4)*0.8);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*0.796) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*33);
    position: absolute;
}

.FailureSepratorLineOne {
    margin: calc(var(--vh,1vh)*38) auto 0 calc(var(--vh,1vh)*12);
    width: calc(calc(var(--vh,1vh)*0.48)*77.6);
    height: calc(var(--vh,1vh)*0.48);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.48)*77.6) calc(var(--vh,1vh)*0.48);
    /*      top: 61%;*/
    position: absolute;
}

.BriefFailureDescription {
    /*width: calc(calc(var(--vh,1vh)*10)*1.708860759493671);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*20);
    background: url('./img/UI/QuizResultExample.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*10)*1.708860759493671)calc(var(--vh,1vh)*10);
    line-height: calc(var(--vh,1vh)*2.3);
    position: absolute;*/
    /*         top: 51.5%;*/
    /*top: 46.5%;*/
}

.CharacterFailIcon {
    width: calc(var(--vh,1vh)*5);
    height: calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*9);
    background: url('./img/UI/Icon_Telly.png') no-repeat;
    background-size: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*5);
    /*            top: 60.5%;*/
    top: 64.5%;
    position: absolute;
    z-index: 3;
}

.FailureRecommandationArea {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.2*3.756);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.19);
    background: url('./img/UI/Frame_Text_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.19*3.756) calc(calc(var(--vh,1vh)*60)*0.89*0.19);
    margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*11);
    position: absolute;
    /*            top: 61.5%;*/
}

.FailureRecommandationDetail {
    width: calc(calc(var(--vh,1vh)*63)*0.89*0.2*3);
    height: calc(calc(var(--vh,1vh)*35)*0.89*0.19);
    text-align: left;
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*2) 0 calc(var(--vh,1vh)*2.5);
    font-size: calc(var(--vh,1vh)*1.65);
    line-height: calc(var(--vh,1vh)*2.5);
    color: #805300;
    /*    padding: 2px 2px 2px 2px;*/
    position: absolute;
    /*top: 18%;*/
    font-family: PumpkinGames;
}

.FailureRemainingContinuesmask {
    width: calc(var(--vh,1vh)*400);
    height: calc(var(--vh,1vh)*200);
    position: absolute;
    top: calc(var(--vh,1vh)*50);
    left: calc(var(--vh,1vh)*136);
    transform: translate( calc(var(--vh,1vh)*-150), calc(var(--vh,1vh)*-50));
    z-index: 99;
    background: rgba(0,0,0,0.5);
    margin: calc(var(--vh,1vh)*-40) auto auto calc(var(--vh,1vh)*-70);
    display: none;
}

.FailureRemainingContinuesPanel {
    width: calc(calc(var(--vh,1vh)*45)*0.6885245901639344);
    height: calc(var(--vh,1vh)*35);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*45)*0.6885245901639344) calc(var(--vh,1vh)*35);
    margin: calc(var(--vh,1vh)*58) auto auto calc(var(--vh,1vh)*98);
    position: absolute;
    display: none;
    z-index: 3;
}

.FailureRemainingContinuesPanelCloseButton {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*23);
    position: absolute;
    z-index: 2;
    border: none;
    outline: none;
}

#watchAdButton {
    width: calc(calc(var(--vh,1vh)*10)* 2.281045751633987);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Main_Purple.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*10)* 2.281045751633987) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*7) auto 0 calc(var(--vh,1vh)*4);
    position: absolute;
    z-index: 2;
    border: none;
    outline: none;
    font-size: calc(var(--vh,1vh)*2.8);
    color: white;
    position: absolute;
    font-weight: bold;
    z-index: 2;
}

#FailureBindChefInputBoxDiv {
    margin: calc(var(--vh,1vh)*14) auto 0 calc(var(--vh,1vh)*7);
    position: absolute;
    scale: 1.5;
}
/*#endregion*/

/*#region 成功結算面板*/
.SuccessPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Success.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    /*    white-space: pre-line;*/
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

.SuccessScoreArea {
    margin: calc(var(--vh,1vh)*13) auto 0 calc(var(--vh,1vh)*4);
    position: absolute;
    /*            top: 36%;*/
    /*    top: 20%;*/
}

.SuccessScoreTitleArea {
    width: calc(calc(var(--vh,1vh)*5)*3.571);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Score.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*3.571) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*8.5);
    position: absolute;
}

.SuccessScoreNumberOne {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*26);
    top: 5%;
    position: absolute;
}

.SuccessScoreNumberTwo {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*29.5);
    top: 5%;
    position: absolute;
}

.SuccessScoreNumberThree {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*33);
    top: 5%;
    position: absolute;
}

.SuccessScoreNumberFour {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*36.5);
    top: 5%;
    position: absolute;
}

.SuccessScoreNumberFive {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*40);
    top: 5%;
    position: absolute;
}

.SuccessSepratorLineOne {
    width: calc(calc(var(--vh,1vh)*0.48)*77.6);
    height: calc(var(--vh,1vh)*0.48);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*11);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.48)*77.6) calc(var(--vh,1vh)*0.48);
    /*   top: 40%;*/
    top: 28%;
    position: absolute;
}

.SuccessSepratorLineTwo {
    width: calc(calc(var(--vh,1vh)*0.48)*77.6);
    height: calc(var(--vh,1vh)*0.48);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*11);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.48)*77.6) calc(var(--vh,1vh)*0.48);
    /* top: 61.5%;*/
    top: 67.5%;
    position: absolute;
}

.CharacterIcon {
    width: calc(var(--vh,1vh)*5);
    height: calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*7);
    background: url('./img/UI/Icon_Telly.png') no-repeat;
    background-size: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*5);
    /*top: 60.5%;*/
    top: 64.5%;
    position: absolute;
    z-index: 3;
}

.SuccessPanelHaderImage {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.95);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.95*0.412);
    background: url('./img/UI/Decor_Success_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.95) calc(calc(var(--vh,1vh)*60)*0.89*0.95*0.412);
    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*14);
    position: absolute;
    /*top: 14%;*/
    /*    top: -19%;*/
    z-index: -1;
}

.SuccessPanelLogoImage {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.65);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.65*0.485);
    background: url('./img/UI/Decor_Success_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.65) calc(calc(var(--vh,1vh)*60)*0.89*0.65*0.485);
    margin: calc(var(--vh,1vh)*-4) auto 0 calc(var(--vh,1vh)*12);
    position: absolute;
    /*top: 21%;*/
    /*top: -7%;*/
    z-index: 1;
}

.SuccessCategory {
    position: absolute;
    /* top: 40.5%;*/
    /*    top: 28.5%;*/
    margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*-1);
}

.SuccessCategory_Memory {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.981);
    height: calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    background: url('./img/UI/Mask_Score_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.981) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*10.5);
    top: 5%;
    position: absolute;
}

.SuccessCategory_Luck {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*1.11);
    height: calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    background: url('./img/UI/Mask_Score_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*1.11) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*22.25);
    top: 5%;
    position: absolute;
}

.SuccessCategory_PassTimeRanking {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.972);
    height: calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    background: url('./img/UI/Mask_Score_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.972) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*35.75);
    top: 5%;
    position: absolute;
}

.BriefDescription {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.8*0.8);
    height: calc(calc(var(--vh,1vh)*35)*0.89*0.25);
    margin: calc(var(--vh,1vh)*35) auto 0 calc(var(--vh,1vh)*10);
    font-size: calc(var(--vh,1vh)*1.8);
    /*    line-height: calc(var(--vh,1vh)*2.3);*/
    font-family: PumpkinGames;
    font-weight: bold;
    color: #805300;
    position: absolute;
    /*    top: 52.5%;*/
    z-index: 5;
    display: none;
}

.RecommandationArea {
    width: calc(calc(var(--vh,1vh)*67.5)*0.89*0.2*3.756);
    height: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    background: url('./img/UI/Frame_Text_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19*3.756) calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    margin: calc(var(--vh,1vh)*0.5) auto 0 calc(var(--vh,1vh)*7.5);
    position: absolute;
    /*     top: 62%;*/
    top: 67%;
}

.RecommandationDetail {
    width: calc(calc(var(--vh,1vh)*67.5)*0.89*0.2*3);
    height: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    text-align: left;
    margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*2) 0 calc(var(--vh,1vh)*3.5);
    font-size: calc(var(--vh,1vh)*1.85);
    line-height: calc(var(--vh,1vh)*2.5);
    color: #805300;
    /*    padding: 2px 2px 2px 2px;*/
    position: absolute;
    /*    top: 18%;*/
    z-index: 5;
    font-family: PumpkinGames;
}

.SettlementRewardButton {
    width: calc(calc(var(--vh,1vh)*8)*0.819047619047619);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_DropItem.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.819047619047619) calc(var(--vh,1vh)*8);
    position: absolute;
    border: none;
    z-index: 10;
    display: none;
}

#SuccessPanelRewardButton {
    margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*46);
}

/*#endregion*/

/*#region 圖鑑面板*/
#EncyclopediaPreviousPage {
    transform: scaleX(-1);
    margin: calc(var(--vh,1vh)*-3) auto 0 calc(var(--vh,1vh)*-3.5);
    position: absolute;
}

#EncyclopediaNextPage {
    margin: calc(var(--vh,1vh)*-3) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
}

#EncyclopediaPageView {
    width: calc(calc(var(--vh,1vh)*6)*3.41025641052641);
    height: calc(var(--vh,1vh)*6);
    background: url('./img/UI/Button_Bag_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6)*3.41025641052641)calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*5.5);
    position: absolute;
    color: white;
    font-size: calc(var(--vh,1vh)*2.5);
    border: none;
}

.EncyclopediaPageImage {
    width: calc(calc(var(--vh,1vh)*9)*0.8771929824561404);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Button_Book_Next.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*0.8771929824561404)calc(var(--vh,1vh)*9);
    border: none;
}

/*#endregion*/

/*#region 雙人模式結算面板 共用素材*/

.BattleSettlementRankIcon {
    background: url('./img/UI/Button_Rank.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
    width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
    height: calc(var(--vh,1vh)*8);
    position: absolute;
    border: none;
    z-index: 3;
    margin: calc(var(--vh,1vh)*24) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*36.75);
}

.ScoreWinnerTitle {
    width: calc(calc(var(--vh,1vh)*2.5)*3.571);
    height: calc(var(--vh,1vh)*2.5);
    background: url('./img/UI/Number/Score.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*2.5)*3.571) calc(var(--vh,1vh)*2.5);
    position: absolute;
}

.ScoreLoserTitle {
    width: calc(calc(var(--vh,1vh)*2.5)*3.571);
    height: calc(var(--vh,1vh)*2.5);
    background: url('./img/UI/Number/Score2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*2.5)*3.571) calc(var(--vh,1vh)*2.5);
    position: absolute;
}

.ScoreWinnerNumber {
    width: calc(calc(var(--vh,1vh)*3)*0.796);
    height: calc(var(--vh,1vh)*3);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    position: absolute;
}

.ScoreLoserNumber {
    width: calc(calc(var(--vh,1vh)*3)*0.796);
    height: calc(var(--vh,1vh)*3);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    position: absolute;
}

.CategoryMemory {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.981);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.981) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*7.5);
    position: absolute;
}

.CategoryLucky {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.972);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.972) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*30.4);
    position: absolute;
}

.CategoryPasstime {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*1.11);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*1.11) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*18.25);
    position: absolute;
}

.DecorationLine {
    width: calc(calc(var(--vh,1vh)*0.35)*77.66666666666667);
    height: calc(var(--vh,1vh)*0.35);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.35)*77.66666666666667) calc(var(--vh,1vh)*0.35);
    margin: calc(var(--vh,1vh)*32) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*18);
    position: absolute;
}

.BattleSettlementFullView {
    font-size: calc(var(--vh,1vh)*1.5);
    color: maroon;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*29) auto auto calc(var(--vh,1vh)*33);
    width: calc(var(--vh,1vh)*11);
    position: absolute;
}

.buttonBattlePlayConfirmDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
    position: absolute;
}

.buttonBattlePlayAgainDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
    position: absolute;
}

.buttonBattleShareDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*44);
    position: absolute;
}
/*#endregion*/

/*#region 雙人模式 成功結算面板*/
.BattleSuccessPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Success.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#BattleSuccessHeadDiv {
    margin: calc(var(--vh,1vh)*-20) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#BattleSuccessHeadDecoration1 {
    width: calc(calc(var(--vh,1vh)*15)*2.525862068965517);
    height: calc(var(--vh,1vh)*15);
    background: url('./img/UI/Decor_PVP_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*15)*2.525862068965517) calc(var(--vh,1vh)*15);
    margin: calc(var(--vh,1vh)*17) auto 0 calc(var(--vh,1vh)*-2);
    position: absolute;
    z-index: 2;
}

#BattleSuccessHeadDecoration2 {
    width: calc(calc(var(--vh,1vh)*25)*1.973262032085561);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Decor_PVP_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.973262032085561) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*4) auto 0 calc(var(--vh,1vh)*-7);
    position: absolute;
    z-index: -1;
}

#BattleSuccessMyScoreArea {
    margin: calc(var(--vh,1vh)*12) auto 0 calc(var(--vh,1vh)*29.5);
    position: absolute;
    z-index: 4;
}

#SuccessMyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#SuccessMyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#SuccessMyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#SuccessMyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#SuccessMyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

.BattleSuccessMyCategoryArea {
    margin: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
    position: absolute;
}

.EnemyHeaderDiv {
    margin: calc(var(--vh,1vh)*26) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*8);
    position: absolute;
}

.EnemyHeaderContent {
    background: url('./img/Animal/Lucky_A.png') no-repeat;
    background-size: contain;
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*1);
    border-radius: 50%;
    position: absolute;
}

.EnemyUID {
    font-size: calc(var(--vh,1vh)*2.2);
    color: maroon;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*9);
    width: calc(var(--vh,1vh)*11);
    position: absolute;
}

#BattleSuccessEnemyScoreArea {
    margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*29.5);
    position: absolute;
    z-index: 4;
}

#SuccessEnemyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#SuccessEnemyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#SuccessEnemyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#SuccessEnemyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#SuccessEnemyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}


.BattleSuccessEnemyCategoryArea {
    margin: calc(var(--vh,1vh)*39) auto 0 calc(var(--vh,1vh)*3.5);
    position: absolute;
}

/*#endregion*/

/*#region 雙人模式 失敗結算面板*/

.BattleFailPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Failure_PVP.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#BattleFailHeadDiv {
    margin: calc(var(--vh,1vh)*-20) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#BattleFailHeadDecoration1 {
    width: calc(calc(var(--vh,1vh)*16)*2.525862068965517);
    height: calc(var(--vh,1vh)*16);
    background: url('./img/UI/Decor_PVP_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*16)*2.525862068965517) calc(var(--vh,1vh)*16);
    margin: calc(var(--vh,1vh)*18) auto 0 calc(var(--vh,1vh)*-4);
    position: absolute;
    z-index: 2;
}

#BattleFailHeadDecoration2 {
    width: calc(calc(var(--vh,1vh)*27)*1.973262032085561);
    height: calc(var(--vh,1vh)*27);
    background: url('./img/UI/Decor_PVP_4.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*27)*1.973262032085561) calc(var(--vh,1vh)*27);
    margin: calc(var(--vh,1vh)*7) auto 0 calc(var(--vh,1vh)*-17);
    position: absolute;
    z-index: -1;
}

#BattleFailMyScoreArea {
    margin: calc(var(--vh,1vh)*12) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
    z-index: 4;
}

#BattleFailEnemyScoreArea {
    margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
    z-index: 4;
}

.BattleFailMyCategoryArea {
    margin: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
    position: absolute;
}

.BattleFailEnemyCategoryArea {
    margin: calc(var(--vh,1vh)*39) auto 0 calc(var(--vh,1vh)*3.5);
    position: absolute;
}

#FailMyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#FailMyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#FailMyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#FailMyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#FailMyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

#FailEnemyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#FailEnemyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#FailEnemyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#FailEnemyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#FailEnemyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

/*#endregion*/

/*#region 每日提示面板*/

.DailyTipsPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#DailyTipsHeaderDiv {
    text-align: center;
    position: absolute;
    padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    width: calc(var(--vh,1vh)*52);
}

#DailyTipsHeaderTitleContent {
    font-size: calc(var(--vh,1vh)*2);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#DailyTipsCloseButton {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Button_Close.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*8) calc(var(--vh,1vh)*8);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*39);
    position: absolute;
    z-index: 2;
}

#DailyTipsType1HeaderDiv {
    margin: calc(var(--vh,1vh)*8.5) auto 0 calc(var(--vh,1vh)*10);
    position: absolute;
}

.DailyTipsTypeHeader {
    width: calc(calc(var(--vh,1vh)*6.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*6.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6.5)*4.188679245283019) calc(var(--vh,1vh)*6.5);
    border: none;
    position: absolute;
    text-align: center;
}

#DailyTipsType1Title {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsType2HeaderDiv {
    margin: calc(var(--vh,1vh)*33) auto 0 calc(var(--vh,1vh)*10);
    position: absolute;
}

#DailyTipsType2Title {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsType1Content {
    margin: calc(var(--vh,1vh)*14.5) auto 0 calc(var(--vh,1vh)*0);
    position: absolute;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*7);
}

#DailyTipsType2Content {
    margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*0);
    position: absolute;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*7);
}

#DailyTipsCheckboxDiv {
    margin: calc(var(--vh,1vh)*58) auto 0 calc(var(--vh,1vh)*15);
    position: absolute;
}

#DailyTipsCheckbox {
    /*  user-select: none;
    font-size: calc(var(--vh,1vh)*2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;*/
    transform: scale(2);
}

#DailyTipsCheckboxLabel {
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2);
    user-select: none;
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
}

.DailyTipsCardCollectionContainerItem {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/Questions/PNG/Dish/JP/BuckwheatNoodles_LV1.png') no-repeat;
    background-size: 100%;
    position: absolute;
}

#DailyTipsSmallCard1 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsSmallCard2 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsSmallCard3 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2);
}

#DailyTipsSmallCard4 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
}

.DailyTipsCatdCollectionGif {
    background: url('./img/UI/Book_GIF.gif') no-repeat;
    background-size: 100%;
    width: calc(var(--vh,1vh)*18);
    height: calc(var(--vh,1vh)*18);
    position: absolute;
}

#DailyTipsSmallCardGif {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19);
}

.DailyTipsMyRewardGif {
    margin: calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-6);
    background: url('./img/UI/Item.gif') no-repeat;
    background-size: 100%;
    width: calc(var(--vh,1vh)*18);
    height: calc(var(--vh,1vh)*18);
    position: absolute;
}

.DailyTipsMyRewardItem {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    position: absolute;
    background: url('./img/Activity/Item_Ticket_PB_01.png') no-repeat;
    background-size: 100%;
}

#DailyTipsMyReward1 {
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*16);
}

#DailyTipsMyReward2 {
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

#DailyTipsMyReward3 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13);
}

#DailyTipsMyReward4 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*22);
}

#DailyTipsBigCaraCollectionHeaderDiv {
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*3);
    position: absolute;
}

#DailyTipsBigCaraCollectionTitle {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsBigCard1 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsBigCard2 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsBigCard3 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*17);
}

#DailyTipsBigCard4 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*26);
}

#DailyTipsBigCard5 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsBigCard6 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsBigCard7 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*17);
}

#DailyTipsBigCard8 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*26);
}

#DailyTipsBigCardGif {
    margin: calc(var(--vh,1vh)*26) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}
/*#endregion*/

/*#region 結算獎勵面板*/

.SettleRewardBlackMask {
    background: rgba(0,0,0,0.85);
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
}

.SettleRewardFrame {
    width: calc(var(--vh,1vh)*40);
    height: calc(var(--vh,1vh)*40);
    background: url('./img/UI/Frame_Book_Small.png') no-repeat;
    background-size: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*40);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#SettleRewardHintHeaderDiv {
    width: calc(calc(var(--vh,1vh)*70)*0.922*0.4);
    height: calc(calc(var(--vh,1vh)*70)*0.922*0.4*0.291);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.922*0.4) calc(calc(var(--vh,1vh)*70)*0.922*0.4*0.291);
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
    position: absolute;
}

#SettleRewardHintHeaderContent {
    width: calc(calc(var(--vh,1vh)*40));
    text-align: center;
    padding: calc(var(--vh,1vh)*1.25) calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardHintHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardFrameArea {
    margin: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14);
    position: absolute;
}

.SettleRewardHintDiv {
    position: absolute;
    margin: calc(var(--vh,1vh)*32) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4.5);
    text-align: center;
}

#SettleRewardHintText {
    font-size: calc(var(--vh,1vh)*2);
    color: red;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardFrameConfirmButton {
    position: absolute;
    margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
}

.SettleRewardPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#SettleRewardHeaderDiv {
    width: calc(calc(var(--vh,1vh)*65)*0.922*0.4);
    height: calc(calc(var(--vh,1vh)*65)*0.922*0.4*0.291);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.4) calc(calc(var(--vh,1vh)*65)*0.922*0.4*0.291);
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#SettleRewardHeaderDecoration {
    width: calc(calc(var(--vh,1vh)*8)*0.819047619047619);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_DropItem.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.819047619047619) calc(var(--vh,1vh)*8);
    position: absolute;
    margin: calc(var(--vh,1vh)*-6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    border: none;
    z-index: 10;
}

#SettleRewardHeaderContent {
    width: calc(calc(var(--vh,1vh)*40));
    text-align: center;
    padding: calc(var(--vh,1vh)*1.25) calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleRewardContent {
    /*    text-align: center;*/
    margin: auto;
}

#RewardArea {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#RewardAreaTitle {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    font-size: calc(var(--vh,1vh)*2.25);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleRewardItem {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    /*    position: absolute;*/
    background: url('./img/Activity/Item_Ticket_PB_01.png') no-repeat;
    background-size: 100%;
}
/*
#SettleRewardItem1 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleRewardItem2 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
}

#SettleRewardItem3 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*20);
}
#SettleRewardItem4 {
    margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleRewardItem5 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
}

#SettleRewardItem6{
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*20);
}*/

#CardArea {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#CardAreaTitle {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    font-size: calc(var(--vh,1vh)*2.25);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleCardItem {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/Questions/PNG/Dish/JP/BuckwheatNoodles_LV1.png') no-repeat;
    background-size: 100%;
    /*position: absolute;*/
}

/*#SettleCardItem1 {
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleCardItem2 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12.5);
}

#SettleCardItem3 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

#SettleCardItem4 {
    margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleCardItem5 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12.5);
}

#SettleCardItem6 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}*/

#SettleRewardBindAccountHint {
    width: calc(calc(var(--vh,1vh)*46));
    text-align: center;
    margin: calc(var(--vh,1vh)*55) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardBindAccountHintLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: red;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardConfirmButton {
    position: absolute;
    margin: calc(var(--vh,1vh)*69) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*16);
}
/*#endregion*/

#buttonFailurePlayConfirmDiv {
    /*         top: 87%;*/
    /*    top: 112%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*8);
    position: absolute;
    z-index: 1;
}

#buttonFailurePlayAgainDiv {
    /*        top: 87%;*/
    /*    top: 94%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*28);
    position: absolute;
    z-index: 1;
}

#buttonFailureShareDiv {
    /*      top: 87%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*48);
    position: absolute;
    z-index: 1;
}

#buttonSuccessPlayConfirmDiv {
    /*top: 87%;*/
    /*    top: 113%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*7);
    position: absolute;
    z-index: 1;
}

#buttonSuccessPlayAgainDiv {
    /*top: 87%;*/
    /*    top: 95%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*26);
    position: absolute;
    z-index: 1;
}

#buttonSuccessShareDiv {
    /*top: 87%;*/
    /*    top: 113%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*45);
    position: absolute;
    z-index: 1;
}


.buttonShareStyle {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Share.png');
    background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
}

.buttonStyle {
    width: calc(calc(var(--vh,1vh)*7.5)*2.31);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Play.png');
    background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}

.buttonPlayConfirmStyle {
    width: calc(calc(var(--vh,1vh)*7.5)*2.31);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Orange.png');
    background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    font-weight: bold;
}

.LineStickerFrame {
    width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
    height: calc(var(--vh,1vh)*13);
    background: url('./img/UI/Frame_Text_2.png');
    background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
}

.LineStickerExample {
    width: calc(calc(var(--vh,1vh)*6)*1);
    height: calc(var(--vh,1vh)*6);
    background: url('./img/Questions/GIF/01/4.gif');
    background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
    position: absolute;
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*3.5);
}

.LineStickerText {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*10);
    position: absolute;
    width: calc(var(--vh,1vh)*14.5);
}

.QRcodeFrame {
    width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
    height: calc(var(--vh,1vh)*16);
    background: url('./img/UI/Frame_Text_3.png');
    background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
}

.QRcodeImg {
    width: calc(calc(var(--vh,1vh)*7)*1);
    height: calc(var(--vh,1vh)*7);
    background: url('./img/UI/QRcode.png');
    background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*17);
    position: absolute;
}

.QRcodeText {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*2.5)calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
    width: calc(var(--vh,1vh)*14);
    position: absolute;
}

.LanguageButton {
    width: calc(var(--vh,1vh)*6);
    height: calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 auto;
    font-size: calc(var(--vh,1vh)*2);
    color: black;
    font-weight: bold;
}

/*#region 卷軸區設定*/

/*#region 舊版客製化卷軸(棄用)*/
#wrapper {
    text-align: center;
    margin: auto;
}

.scrollbar {
    display: block;
    margin: calc(var(--vh,1vh)*9) auto auto calc(var(--vh,1vh)*5);
    max-height: calc(var(--vh,1vh)*46);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    overflow: visible;
    overflow-y: scroll;
    overflow-x: hidden;
    float: left;
}

#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar {
    width: calc(var(--vh,1vh)*1);
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb {
    border-radius: calc(var(--vh,1vh)*2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

.force-overflow {
}

/*#endregion*/

/*#region 測驗結果卷軸*/

#customScrollbar {
    max-height: calc(var(--vh,1vh)*46);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*9) auto auto auto;
}

#scrollableElement {
    max-height: calc(var(--vh,1vh)*58);
    width: calc(calc(var(--vh,1vh)*57.5)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*14) auto auto calc(var(--vh,1vh)*-4.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #scrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 隱私權政策卷軸*/

#totalrankScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*-15) auto auto calc(var(--vh,1vh)*0);
    position: absolute;
}

#totalrankscrollableElement {
    max-height: calc(var(--vh,1vh)*60);
    width: calc(var(--vh,1vh)*46);
    margin: calc(var(--vh,1vh)*4) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #totalrankscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 排行榜卷軸*/

#rankingScrollbar {
    max-height: calc(var(--vh,1vh)*57);
    width: calc(calc(var(--vh,1vh)*57)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*3) auto auto calc(var(--vh,1vh)*7);
    position: absolute;
}

#rankingscrollableElement {
    max-height: calc(var(--vh,1vh)*57);
    width: calc(calc(var(--vh,1vh)*57)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*11) auto auto calc(var(--vh,1vh)*-0.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #rankingscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 我的獎勵卷軸*/

#rewardScrollbar {
    max-height: calc(var(--vh,1vh)*55);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*10);
    position: absolute;
}

#rewardscrollableElement {
    max-height: calc(var(--vh,1vh)*50);
    width: calc(calc(var(--vh,1vh)*50)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*14) auto auto calc(var(--vh,1vh)*-5.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #rewardscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 記憶分析卷軸*/
#memoryScrollbar {
    max-height: calc(var(--vh,1vh)*58);
    width: calc(var(--vh,1vh)*41.5);
    margin: calc(var(--vh,1vh)*11) auto auto calc(var(--vh,1vh)*2);
    position: absolute;
}

#memoryscrollableElement {
    max-height: calc(var(--vh,1vh)*60);
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*0);
    float: left;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

    #memoryscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 關於我們卷軸*/

#aboutScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*26) auto auto calc(var(--vh,1vh)*4);
    position: absolute;
}

#aboutscrollableElement {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*43);
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #aboutscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 隱私權政策卷軸*/

#privacypolicyScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*26) auto auto calc(var(--vh,1vh)*4);
    position: absolute;
}

#privacypolicyscrollableElement {
    max-height: calc(var(--vh,1vh)*43);
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #privacypolicyscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 結算獎勵面板卷軸*/

#settleRewardScrollbar {
    max-height: calc(var(--vh,1vh)*40);
    width: calc(var(--vh,1vh)*35.5);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*6);
    position: absolute;
}

#settleRewardscrollableElement {
    max-height: calc(var(--vh,1vh)*40);
    width: calc(var(--vh,1vh)*43);
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #settleRewardscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#endregion 卷軸區設定*/

/*#region 下拉式選單設定*/

.Encyclopediaoption {
    color: saddlebrown;
    background: url("./img/UI/Button_Mine.png") rgba(0,0,0,0);
    background-size: calc(calc(var(--vh,1vh)*5.5)*4.188679245283019)calc(var(--vh,1vh)*5.5);
    width: calc(calc(var(--vh,1vh)*5.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*5.5);
}

#SelectCardNumsInsidePanel {
    appearance: none;
    -webkit-appearance: none;
    font-size: calc(var(--vh,1vh)*2);
    padding: 0em 1em 1em 0.8em;
    /*background-color: #fff;*/
    border: 0;
    cursor: pointer;
    background: url('./img/UI/Button_Choose_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6.5)*1.463414634146341)calc(var(--vh,1vh)*6.5);
    width: calc(calc(var(--vh,1vh)*6.5)*1.463414634146341);
    height: calc(var(--vh,1vh)*6.5);
    text-align: center;
}
/*#endregion*/

/*#region 外框文字功能*/
.strokeText {
    position: relative;
    display: inline-block;
}

    .strokeText::before {
        content: attr(data-stroke);
        position: absolute;
        z-index: -1;
        -webkit-text-stroke: 5px #FF7800;
        text-stroke: 5px #cb9f62;
    }


/*#endregion*/

#bg {
    /*opacity: 0.75;*/
}