.HomePageDiv {
    position: absolute;
    width: calc(var(--vw,1vw)*6);
    height: 100%;
}

/*PC*/
@media screen and (min-width: 800px) {
    body {
        height: calc(var(--vh,1vh)*100);
        width: calc(calc(var(--vh,1vh)*100)*2.319090909090909);
        overflow: hidden;
        background: url("./Image/UI/LoginPageBackground.png");
        background-size: calc(calc(var(--vh,1vh)*100)*2.319090909090909) calc(var(--vh,1vh)*100);
        /*        position: fixed;*/
    }

    #LonginPageDiv {
        position: relative;
        left: calc(var(--vw,1vw)*28.5);
        top: calc(var(--vh,1vh)*-2);
        /*margin: calc(var(--vh,1vh)*0) 0vh 0vh calc(var(--vh,1vh)*58);*/
        /*position: absolute;*/
    }

    #LoginPageDecoration {
        height: calc(var(--vh,1vh)*90);
        width: calc(var(--vh,1vh)*90*1.087272727272727);
        background: url("./Image/UI/LoginPageDecoration.png");
        background-size: calc(calc(var(--vh,1vh)*90)*1.087272727272727) calc(var(--vh,1vh)*90);
    }

    .LoginButtonAreaDiv {
        position: relative;
        left: calc(var(--vw,1vw)*38);
        top: calc(var(--vh,1vh)*-5);
        /*margin: calc(var(--vh,1vh)*-38) 0vh 0vh calc(var(--vh,1vh)*156);*/
        /*position: absolute;*/
    }

    .LoginButton {
        height: calc(var(--vh,1vh)*11.5);
        width: calc(calc(var(--vh,1vh)*12.5)*2.317460317460317);
        font-size: calc(var(--vh,1vh)*2);
        border: none;
        outline: none;
        font-weight: bold;
        /*position: absolute;*/
        color: white;
        padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0);
    }

    #LineButton {
        background: url("./Image/UI/Button_Green.png");
        background-size: calc(calc(var(--vh,1vh)*12.5)*2.317460317460317) calc(var(--vh,1vh)*12.5);
        margin: calc(var(--vh,1vh)*0) 0vh 0vh calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #FbButton {
        /*        background: url("./Image/UI/Button_3.png");
        background-size: calc(calc(var(--vh,1vh)*12.5)*2.317460317460317) calc(var(--vh,1vh)*12.5);*/
        margin: calc(var(--vh,1vh)*3)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*3);
        text-align: center;
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13);
        display:none;
    }

    #AACButton {
        background: url("./Image/UI/Button_Purple.png");
        background-size: calc(calc(var(--vh,1vh)*12.5)*2.317460317460317) calc(var(--vh,1vh)*12.5);
        margin: calc(var(--vh,1vh)*0) 0vh 0vh calc(var(--vh,1vh)*35);
        position: absolute;
    }

    .OrganizationLoginPanel {
        width: calc(calc(var(--vh,1vh)*40)*1.053511705685619);
        height: calc(var(--vh,1vh)*40);
        background: url("./Image/UI/Frame_Login.png");
        background-size: calc(calc(var(--vh,1vh)*40)*1.053511705685619) calc(var(--vh,1vh)*40);
        margin: calc(var(--vh,1vh)*25) 0vh 0vh calc(var(--vw,1vw)*42);
        position: absolute;
        display: none;
    }

    #CloseButton {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        background: url("./Image/UI/Button_Close_Blue.png");
        background-size: contain;
        margin: calc(var(--vh,1vh)*-2) 0vh 0vh calc(var(--vh,1vh)*36);
        position: absolute;
    }

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

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

    #AccountText {
        font-weight: bold;
        /*position: absolute;*/
        color: white;
    }

    #PasswordText {
        font-weight: bold;
        /*position: absolute;*/
        color: white;
    }

    .UserLoingTextBox {
        font-size: calc(var(--vh,1vh)*2.35);
        text-align: left;
        padding-left: 15px; /*讓文字往右 */
        /*padding-bottom: 5px;*/ /*文字往上*/
        width: calc(calc(var(--vh,1vh)*5)*5.325581395348837);
        height: calc(var(--vh,1vh)*5);
        background: url("./Image/UI/Frame_Login_Type.png");
        background-size: cover;
        border: none;
        outline: none;
    }

    #OrganizationLoginButton {
        width: calc(calc(var(--vh,1vh)*10)*2.295081967213115);
        height: calc(var(--vh,1vh)*9);
        background: url('./Image/UI/Button_Login.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*2.295081967213115) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*28) 0vh 0vh calc(var(--vh,1vh)*9);
        position: absolute;
        border: none;
        outline: none;
        font-weight: bold;
        color: white;
        font-size: calc(var(--vh,1vh)*2.8);
    }

    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./Image/UI/Frame_Text_Normal.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*28)*1.700787401574803) calc(var(--vh,1vh)*28);
        display: none;
        margin: calc(var(--vh,1vh)*38) auto auto auto;
        padding: 0px;
    }

    #HintFrameAACDiv {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-89);
    }
}
/*手機*/
@media screen and (max-width: 799px) {
    body {
        overflow: hidden;
        background: url("./Image/UI/LoginPageBackground.png") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #LonginPageDiv {
        position: absolute;
        left: calc(var(--vh,1vh)*0);
        top: calc(var(--vh,1vh)*9);
        /*        margin: calc(var(--vh,1vh)*9) 0vh 0vh calc(var(--vh,1vh)*-8);*/
        /*position: absolute;*/
    }

    #LoginPageDecoration {
        height: calc(var(--vh,1vh)*55);
        width: calc(var(--vh,1vh)*55*1.087272727272727);
        background: url("./Image/UI/LoginPageDecoration.png");
        background-size: calc(calc(var(--vh,1vh)*55)*1.087272727272727) calc(var(--vh,1vh)*55);
    }

    .LoginButtonAreaDiv {
        position: absolute;
        left: calc(var(--vw,1vw)*28);
        top: calc(var(--vh,1vh)*63);
        /*position: absolute;*/
    }

    .LoginButton {
        height: calc(var(--vh,1vh)*11);
        width: calc(calc(var(--vh,1vh)*8.5)*3.161016949152542);
        font-size: calc(var(--vh,1vh)*1);
        border: none;
        outline: none;
        font-weight: bold;
        /*position: absolute;*/
        color: white;
        padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2.5) calc(var(--vh,1vh)*0);
    }

    #LineButton {
        background: url("./Image/UI/Button_Green.png?id=1");
        background-size: calc(calc(var(--vh,1vh)*8.5)*3.161016949152542) calc(var(--vh,1vh)*11);
        margin: 0vh 0vh 0vh 0vh;
    }

    #FbButton {
        /*        background: url("./Image/UI/Button_3.png");
        background-size: calc(calc(var(--vh,1vh)*7.5)*3.161016949152542) calc(var(--vh,1vh)*7.5);*/
        display: none;
        margin: calc(var(--vh,1vh)*2) 0vh 0vh calc(var(--vw,1vw)*-11);
    }

    #AACButton {
        background: url("./Image/UI/Button_Purple.png?id=1");
        background-size: calc(calc(var(--vh,1vh)*8.5)*3.161016949152542) calc(var(--vh,1vh)*11);
        margin: calc(var(--vh,1vh)*2) 0vh 0vh 0vh;
    }

    .OrganizationLoginPanel {
        width: calc(calc(var(--vh,1vh)*40)*1.053511705685619);
        height: calc(var(--vh,1vh)*40);
        background: url("./Image/UI/Frame_Login.png");
        background-size: calc(calc(var(--vh,1vh)*40)*1.053511705685619) calc(var(--vh,1vh)*40);
        margin: calc(var(--vh,1vh)*25) 0vh 0vh calc(var(--vw,1vw)*12);
        position: absolute;
        display: none;
    }

    #CloseButton {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        background: url("./Image/UI/Button_Close_Blue.png");
        background-size: contain;
        margin: calc(var(--vh,1vh)*-2) 0vh 0vh calc(var(--vh,1vh)*36);
        position: absolute;
    }

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

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

    #AccountText {
        font-weight: bold;
        /*position: absolute;*/
        color: white;
    }

    #PasswordText {
        font-weight: bold;
        /*position: absolute;*/
        color: white;
    }

    .UserLoingTextBox {
        font-size: calc(var(--vh,1vh)*2.35);
        text-align: left;
        padding-left: 15px; /*讓文字往右 */
        /*padding-bottom: 5px;*/ /*文字往上*/
        width: calc(calc(var(--vh,1vh)*5)*5.325581395348837);
        height: calc(var(--vh,1vh)*5);
        background: url("./Image/UI/Frame_Login_Type.png");
        background-size: cover;
        border: none;
        outline: none;
    }

    #OrganizationLoginButton {
        width: calc(calc(var(--vh,1vh)*10)*2.295081967213115);
        height: calc(var(--vh,1vh)*9);
        background: url('./Image/UI/Button_Login.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*2.295081967213115) calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*28) 0vh 0vh calc(var(--vh,1vh)*9);
        position: absolute;
        border: none;
        outline: none;
        font-weight: bold;
        color: white;
        font-size: calc(var(--vh,1vh)*2.8);
    }

    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./Image/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;*/
    }

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

/*#region 通用提示框面版*/
.CommonMask {
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
    display: none;
}

.HintFrameCloseButton {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./Image/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 {
}

.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('./Image/UI/Button_Green.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('./Image/UI/Button_Purple.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);
}

#HintLineButton {
    height: calc(var(--vh,1vh)*7);
    width: calc(calc(var(--vh,1vh)*7)*2.317460317460317);
    font-size: calc(var(--vh,1vh)*2.5);
    background: url("./Image/UI/Button_Green.png");
    background-size: calc(calc(var(--vh,1vh)*7)*2.317460317460317) calc(var(--vh,1vh)*7);
    margin: 0vh 0vh 0vh 12vh;
}

#HintFrameWaiting {
    height: calc(var(--vh,1vh)*8);
    width: calc(var(--vh,1vh)*8);
    background: url("./Image/UI/Waiting.gif");
    background-size: contain;
}

/*#endregion*/

.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;
}

/*#region 動畫區*/

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

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

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

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

@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);
    }
}

/*#endregion*/