/*禁止雙擊放大*/
html {
    touch-action: manipulation;
}
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?9gy4l7');
    src:  url('fonts/icomoon.eot?9gy4l7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?9gy4l7') format('truetype'),
    url('fonts/icomoon.woff?9gy4l7') format('woff'),
    url('fonts/icomoon.svg?9gy4l7#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

li,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none
}

button {
    outline: none;
    border: none
}

input {
    border-radius: 4px;
    background-color: initial;
    text-align: center;
    height: 32px;
    border: none
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input.ie-clearX::-ms-clear {
    display: none
}

input:focus {
    outline: none
}

label {
    margin-bottom: 0
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 1px none;
    background-color: initial;
    font-size: 14px
}

::-webkit-input-placeholder {
    color: #494f56;
    opacity: .32
}

::-moz-placeholder {
    color: #494f56;
    opacity: .32
}

:-ms-input-placeholder {
    color: #494f56;
    opacity: .32
}

input:-moz-placeholder {
    color: #494f56;
    opacity: .32
}

textarea:focus {
    outline: 0
}

a:focus {
    text-decoration: none;
    outline: none
}

* {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    user-select: none
}
.g-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.loginPage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/login_bg2.jpg);
    background-position: top;
    background-size: cover
}

.loginPage,.loginPage .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.loginPage .main-content {
    width: 100%;
    height: 100%
}

.loginPage .logo-box {
    width: 80vw;
    height: 80vw;
    max-width: 360px;
    max-height: 360px;
    background-image: url(../img/logo-kbb.23abbd76.png);
    background-size: 100% 100%
}

.loginPage .btns-box,.loginPage .logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.loginPage .btns-box {
    width: 240px;
    margin: 16px auto 0
}

.loginPage .btns-box>div {
    margin-bottom: 24px;
    position: relative
}

.loginPage .btns-box>div>button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.loginPage .btns-box .btn-login-line {
    width: 210px;
    height: 56px;
    background-color: #fafafa;
    padding: 4px;
    border-radius: 28px;
    cursor: pointer
}

.loginPage .btns-box .btn-login-line .text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0 16px;
    border-radius: 24px;
    background-color: #06c755;
    box-shadow: 0 8px 16px 0 rgba(6,199,85,.48),inset -2px -4px 6px 0 rgba(6,199,85,.72),inset 0 2px 1px 0 rgba(255,253,247,.48);
    color: #fafafa;
    text-shadow: 1px 1px 0 rgba(69,34,1,.48);
    font-size: 14px;
    font-weight: 500;
    font-stretch: 100%
}

.loginPage .btns-box .btn-login-line .icon-line:before {
    font-size: 24px;
    color: #fafafa;
    margin-right: 8px
}

.loginPage .btns-box .btn-login-line:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage .btns-box .btn-login-twitter {
    width: 210px;
    height: 56px;
    background-color: #fafafa;
    padding: 4px;
    border-radius: 28px;
    cursor: pointer
}

.loginPage .btns-box .btn-login-twitter .text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0 16px;
    border-radius: 24px;
    background-color: #4267b2;
    box-shadow: 0 8px 16px 0 rgba(66,103,178,.48),inset -2px -4px 2px 0 rgba(83,131,227,.72),inset 0 2px 1px 0 rgba(255,253,247,.48);
    color: #fafafa;
    text-shadow: 1px 1px 0 rgba(69,34,1,.48);
    font-size: 14px;
    font-weight: 500;
    font-stretch: 100%
}

.loginPage .btns-box .btn-login-twitter .icon-twitter:before {
    content: "\e951";
    font-family: "icomoon"!important;
    font-size: 24px;
    color: #fafafa;
    margin-right: 8px
}

.loginPage .btns-box .btn-login-twitter:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage .btns-box .btn-login-account{
    width: 210px;
    height: 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    background-color: #fafafa;
    box-shadow: 0 8px 16px 0 rgba(69,34,1,.32);
    padding: 4px;
    border-radius: 28px;
    cursor: pointer
}

.loginPage .btns-box .btn-login-account .text {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    background-image: linear-gradient(121deg,#fbc323,#fb8d23);
    box-shadow: 0 8px 16px 0 rgba(251,141,35,.48),inset -2px -4px 2px 0 rgba(251,195,35,.72),inset 0 2px 1px 0 rgba(255,253,247,.32);
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    border-radius: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    font-weight: 800;
    font-stretch: 90%
}

.loginPage .btns-box .btn-login-account .text .icon-account:before {
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 24px;
    margin-right: 8px
}

.loginPage .btns-box .btn-login-account:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}
.loginPage .btns-box .btn-login-register:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage .btns-box .btn-login-sms {
    width: 210px;
    height: 56px;
    background-image: linear-gradient(135deg,#fafafa,#e9f0f4);
    box-shadow: 0 8px 16px 0 rgba(69,34,1,.32),inset -2px -4px 2px 0 rgba(127,63,2,.16),inset 0 2px 1px 0 #fafafa;
    text-shadow: 1px 1px 0 #fff8e4;
    color: #452201;
    border-radius: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 4px;
    cursor: pointer
}

.loginPage .btns-box .btn-login-sms .text {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    font-weight: 800;
    font-stretch: 90%
}

.loginPage .btns-box .btn-login-sms .text .icon-chat:before {
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 24px;
    margin-right: 8px
}

/*.loginPage .btns-box .btn-login-sms:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}*/

@media screen and (orientation: landscape) and (min-width:500px) and (max-height:768px) {
    .loginPage .btns-box {
        width:80%;
        min-width: 600px;
        position: absolute;
        bottom: 5%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row
    }

    .loginPage .btns-box>div {
        margin: 0 4px 24px
    }
}

@media screen and (orientation: landscape) and (min-width:400px) and (max-height:500px) {
    .loginPage .btns-box {
        width:80%;
        min-width: 600px;
        position: absolute;
        bottom: -8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row
    }

    .loginPage .btns-box>div {
        margin: 0 4px 24px
    }
}

@media screen and (max-width: 375px) and (max-height:667px) {
    .loginPage .logo-box {
        width:75vw;
        height: 75vw
    }

    .loginPage .btns-box {
        margin: 0 auto
    }

    .loginPage .btns-box>div {
        margin-bottom: 8px
    }
}


.loginPage-v2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/login_bg.jpg?t=20250217);
    background-position: top;
    background-size: cover
}

.loginPage-v2 .light-box {
    width: 100vh;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}
.loginPage-v2 .light-box:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../img/bg-light.png?t=20250217);
    background-position: 50%;
    background-size: cover;
    -webkit-animation: rotate-animation 30s linear 2.5s infinite;
    animation: rotate-animation 30s linear 2.5s infinite;
    opacity: 1;
    -webkit-transform: scale(.1);
    transform: scale(.1)
}

.loginPage-v2 .light-box img {
    width: 100%;
    height: 100%
}

.loginPage-v2 .logo-box,.loginPage-v2 .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.loginPage-v2 .main-content {
    width: 100%;
    height: 100%;
}
.loginPage-v2 .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loginPage-v2 .logo-box {
    width: 100vw;
    height: 80vw;
    max-width: 360px;
    max-height: 360px
}

.loginPage-v2 .logo-box img{
    width: 100%;
    height: auto;
}

.loginPage-v2 .logo-area {
    position: relative;
}
/*禮花*/
audio,canvas,progress,video {
    display: inline-block;
    vertical-align: initial
}
.ribbon {
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.money-box,.ribbon {
    width: 100%;
    position: absolute;
    left: 0;
    z-index: -1
}

/*光*/
.loginPage-v2 .light-box {
    width: 100vh;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.loginPage-v2 .light-box:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../img/login_bg.png);
    background-position: 50%;
    background-size: cover;
    -webkit-animation: rotate-animation 30s linear 2.5s infinite;
    animation: rotate-animation 30s linear 2.5s infinite;
    opacity: 1;
    -webkit-transform: scale(.1);
    transform: scale(.1)
}

.loginPage-v2 .light-box img {
    width: 100%;
    height: 100%
}
/*飛天元寶*/
.honbaoflakes {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.honbaoflake {
    width: 72px;
    height: 72px;
    position: absolute;
    top: -72px;
    left: -72px;
    z-index: -1;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: honbaoflakes-fall,honbaoflakes-shake;
    animation-name: honbaoflakes-fall,honbaoflakes-shake;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear,ease-in-out;
    animation-timing-function: linear,ease-in-out;
    -webkit-animation-iteration-count: infinite,infinite;
    animation-iteration-count: infinite,infinite;
    -webkit-animation-play-state: running,running;
    animation-play-state: running,running
}

.honbaoflake img {
    width: 100%;
    height: 100%
}

.honbaoflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 1s,0s;
    animation-delay: 1s,0s
}

.honbaoflake:first-of-type {
    left: 10%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.honbaoflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 4s,.5s;
    animation-delay: 4s,.5s
}

.honbaoflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s,2s;
    animation-delay: 4s,2s
}

.honbaoflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s,2s;
    animation-delay: 2s,2s
}

.honbaoflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 2s,4s;
    animation-delay: 2s,4s
}

.honbaoflake:nth-of-type(5),.honbaoflake:nth-of-type(6) {
    -webkit-transform: rotate(265deg);
    transform: rotate(265deg)
}

.honbaoflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 5s,3s;
    animation-delay: 5s,3s
}

.honbaoflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 1s,5s;
    animation-delay: 1s,5s
}

.honbaoflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s,0s;
    animation-delay: 1s,0s
}

.honbaoflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s,1.5s;
    animation-delay: 3s,1.5s
}

.honbaoflake:nth-of-type(10) {
    left: 10%;
    -webkit-animation-delay: 2s,2s;
    animation-delay: 2s,2s
}

.honbaoflake:nth-of-type(11) {
    left: 5%;
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
    -webkit-transform: rotate(265deg);
    transform: rotate(265deg)
}

.honbaoflake:nth-of-type(12) {
    left: 20%;
    -webkit-animation-delay: 4s,.5s;
    animation-delay: 4s,.5s
}

@-webkit-keyframes honbaoflakes-fall {
    0% {
        top: -10%
    }

    to {
        top: 100%
    }
}

@keyframes honbaoflakes-fall {
    0% {
        top: -10%
    }

    to {
        top: 100%
    }
}

@-webkit-keyframes honbaoflakes-shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(40px);
        transform: translateX(40px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes honbaoflakes-shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(40px);
        transform: translateX(40px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

/*底部錢海*/
.money-box {
    height: 50vh;
    bottom: -40px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: hidden;
    align-items: flex-end;
    flex-direction: column
}

.money-box,.money-box>div {
    display: flex;
    justify-content: center
}

.money-box>div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    flex-direction: row;
	z-index: 1;
}

.money-box>div img {
    width: 150%
}

.money-box .moneyF {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
    -webkit-animation: moneyF-shake 5s ease-in-out infinite;
    animation: moneyF-shake 5s ease-in-out infinite
}

.money-box .moneyC {
    -webkit-transform: translateZ(250px);
    transform: translateZ(250px);
    -webkit-animation: moneyC-shake 5s ease-in-out infinite;
    animation: moneyC-shake 5s ease-in-out infinite
}

.money-box .moneyB {
    -webkit-transform: translateZ(500px);
    transform: translateZ(500px);
    -webkit-animation: moneyB-shake 5s ease-in-out infinite;
    animation: moneyB-shake 5s ease-in-out infinite
}

@-webkit-keyframes moneyB-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes moneyB-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes moneyC-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes moneyC-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes moneyF-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes moneyF-shake {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    75% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}
/*按鈕*/

.loginPage-v2 .btns-box {
    width: 240px;
    margin: 16px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.loginPage-v2 .btns-box>div {
    margin-bottom: 15px;
    opacity: 0
}

.loginPage-v2 .btns-box .btn-login-line {
    width: 210px;
    height: 56px;
    background-color: #fafafa;
    padding: 4px;
    border-radius: 28px;
    -webkit-animation: bounce-btn .6s ease-in .5s forwards;
    animation: bounce-btn .6s ease-in .5s forwards;
    cursor: pointer
}

.loginPage-v2 .btns-box .btn-login-line .text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0 16px;
    border-radius: 24px;
    background-color: #06c755;
    box-shadow: 0 8px 16px 0 rgba(6,199,85,.48),inset -2px -4px 6px 0 rgba(6,199,85,.72),inset 0 2px 1px 0 rgba(255,253,247,.48);
    color: #fafafa;
    text-shadow: 1px 1px 0 rgba(69,34,1,.48);
    font-size: 14px;
    font-weight: 500;
    font-stretch: 100%
}

.loginPage-v2 .btns-box .btn-login-line .icon-line:before {
    font-size: 24px;
    color: #fafafa;
    margin-right: 8px
}

.loginPage-v2 .btns-box .btn-login-line:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage-v2 .btns-box .btn-login-fb {
    width: 210px;
    height: 56px;
    background-color: #fafafa;
    padding: 4px;
    border-radius: 28px;
    -webkit-animation: bounce-btn .6s ease-in 1s forwards;
    animation: bounce-btn .6s ease-in 1s forwards;
    cursor: pointer
}

.loginPage-v2 .btns-box .btn-login-fb .text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0 16px;
    border-radius: 24px;
    background-color: #4267b2;
    box-shadow: 0 8px 16px 0 rgba(66,103,178,.48),inset -2px -4px 2px 0 rgba(83,131,227,.72),inset 0 2px 1px 0 rgba(255,253,247,.48);
    color: #fafafa;
    text-shadow: 1px 1px 0 rgba(69,34,1,.48);
    font-size: 14px;
    font-weight: 500;
    font-stretch: 100%
}

.loginPage-v2 .btns-box .btn-login-fb .icon-fb:before {
    content: "\e92f";
    font-family: "icomoon"!important;
    font-size: 24px;
    color: #fafafa;
    margin-right: 8px
}

.loginPage-v2 .btns-box .btn-login-fb:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage-v2 .btns-box .btn-login-twitter {
    width: 210px;
    height: 56px;
    background-color: #fafafa;
    padding: 4px;
    border-radius: 28px;
    -webkit-animation: bounce-btn .6s ease-in 1s forwards;
    animation: bounce-btn .6s ease-in 1s forwards;
    cursor: pointer
}

.loginPage-v2 .btns-box .btn-login-twitter .text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0 16px;
    border-radius: 24px;
    background-color: #4267b2;
    box-shadow: 0 8px 16px 0 rgba(66,103,178,.48),inset -2px -4px 2px 0 rgba(83,131,227,.72),inset 0 2px 1px 0 rgba(255,253,247,.48);
    color: #fafafa;
    text-shadow: 1px 1px 0 rgba(69,34,1,.48);
    font-size: 14px;
    font-weight: 500;
    font-stretch: 100%
}

.loginPage-v2 .btns-box .btn-login-twitter .icon-facebook:before {
    content: "\e951";
    font-family: "icomoon"!important;
    font-size: 24px;
    color: #fafafa;
    margin-right: 8px
}

.loginPage-v2 .btns-box .btn-login-twitter:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage-v2 .btns-box .btn-login-account, .loginPage-v2 .btns-box .btn-login-register,.loginPage-v2 .btns-box .btn-login-forget {
    width: 210px;
    height: 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    background-color: #fafafa;
    box-shadow: 0 8px 16px 0 rgba(69,34,1,.32);
    padding: 4px;
    border-radius: 28px;
    -webkit-animation: bounce-btn .6s ease-in 1.5s forwards;
    animation: bounce-btn .6s ease-in 1.5s forwards;
    cursor: pointer
}

.loginPage-v2 .btns-box .btn-login-account .text {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    background-image: linear-gradient(121deg,#fbc323,#fb8d23);
    box-shadow: 0 8px 16px 0 rgba(251,141,35,.48),inset -2px -4px 2px 0 rgba(251,195,35,.72),inset 0 2px 1px 0 rgba(255,253,247,.32);
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    border-radius: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    font-weight: 800;
    font-stretch: 90%
}

.loginPage-v2 .btns-box .btn-login-register .text {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    background-image: linear-gradient(121deg,#e9c79a,#e7bd88);
    /*box-shadow: 0 8px 16px 0 rgba(251,141,35,.48),inset -2px -4px 2px 0 rgba(251,195,35,.72),inset 0 2px 1px 0 rgba(255,253,247,.32);*/
    color: #241201;
    text-shadow: 1px 1px 0 #fff8e4;
    border-radius: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    font-weight: 800;
    font-stretch: 90%
}

.loginPage-v2 .btns-box .btn-login-account .text .icon-user:before {
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 24px;
    margin-right: 8px
}
.loginPage-v2 .btns-box .btn-login-register .text .icon-edit:before{
    color: #241201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 29px;
    margin-right: 8px
}

.loginPage-v2 .btns-box .btn-login-forget .text .icon-help-circle:before{
    color: #241201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 22px;
    margin-right: 8px
}

.loginPage-v2 .btns-box .btn-login-account:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}

.loginPage-v2 .btns-box .btn-login-sms, .loginPage-v2 .btns-box .btn-login-forget {
    /*width: 210px;
    height: 56px;
    background-image: linear-gradient(135deg,#fafafa,#e9f0f4);
    box-shadow: 0 8px 16px 0 rgba(69,34,1,.32),inset -2px -4px 2px 0 rgba(127,63,2,.16),inset 0 2px 1px 0 #fafafa;
    text-shadow: 1px 1px 0 #fff8e4;
    color: #452201;
    border-radius: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 4px;
    -webkit-animation: bounce-btn .6s ease-in 1.5s forwards;
    animation: bounce-btn .6s ease-in 1.5s forwards;
    cursor: pointer*/
    
    width: 100%;
    height: auto;
    color: #ffff;
    display: flex;
    -webkit-animation: bounce-btn .6s ease-in 1.5s forwards;
    animation: bounce-btn .6s ease-in 1.5s forwards;
    cursor: pointer;
    margin-bottom: 10px;
}

.loginPage-v2 .btns-box .btn-login-sms .text, .loginPage-v2 .btns-box .btn-login-forget .text {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    font-weight: 800;
    font-stretch: 90%
}

.loginPage-v2 .btns-box .btn-login-sms .text .icon-sms:before {
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    font-size: 24px;
    margin-right: 8px
}

/*.loginPage-v2 .btns-box .btn-login-sms:active {
    -webkit-transform: scale(.9)!important;
    transform: scale(.9)!important
}*/


@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

    10%,20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

    10%,20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-webkit-keyframes bounce-btn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

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

    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounce-btn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

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

    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg) scale(.4);
        transform: rotate(0deg) scale(.4);
        opacity: .64
    }

    25% {
        -webkit-transform: rotate(-90deg) scale(1);
        transform: rotate(-90deg) scale(1);
        opacity: .64
    }

    50% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: .64
    }

    75% {
        -webkit-transform: rotate(-270deg);
        transform: rotate(-270deg);
        opacity: .64
    }

    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
        opacity: .64
    }
}

@keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg) scale(.4);
        transform: rotate(0deg) scale(.4);
        opacity: .64
    }

    25% {
        -webkit-transform: rotate(-90deg) scale(1);
        transform: rotate(-90deg) scale(1);
        opacity: .64
    }

    50% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: .64
    }

    75% {
        -webkit-transform: rotate(-270deg);
        transform: rotate(-270deg);
        opacity: .64
    }

    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
        opacity: .64
    }
}


/*--- 跳出視窗 ---*/
#root .modal-dialog {
    width:100%;
    height: 100%;
    margin: 0;
    /* overflow-y: scroll; */
}
.modal {
    z-index: 16 !important;
}
.modal-backdrop {
    z-index: 15 !important;
}
@media (min-width: 800px) {
    .golifu_Box .modal-dialog {
        max-width:100% !important;
        height: 100%;

        margin: 0;
    }
}
#root .modal-dialog .modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 101%;
    height: 100%;

    pointer-events: auto;
    background-color:rgba(255, 255, 255, 0);
    /*background:  radial-gradient(transparent, #FFF 20px);*/
    /*backdrop-filter:blur(10px);*/
    background-clip: unset;
    border:none;
    border-radius:0;
    outline: 0;
}

#root .modal-body.MBody2nd {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/modalBg.png) no-repeat;
    background-size: cover;
}

#root .modal-body.MBody2nd .mbContBox{
    width: 90%;
    /*min-height: -136px;*/
    padding: 35px 5px 15px 5px;
    border: 7px solid #ff4d00;
    border-radius: 20px;
    background-color: #FFF;
    box-shadow: 0px 10px 25px 4px #242424;
    -webkit-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    -moz-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    -o-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    position: relative;
    top: -8%;
    z-index: 1;
}
#root .modal-body.MBody2nd .mbContBox .mbCont {
    width: 100%;
    /*min-height: 150px;*/
    font-size: 16px;
    text-align: center;
    margin: 5px 0;
    position: relative;
    z-index: 1;
}
#root .modal-body.MBody2nd .mbContBox .mbCont2 {
    width: 50%;
    /*min-height: 150px;*/
    font-size: 16px;
    text-align: center;
    margin: 5px 0;
    position: relative;
    z-index: 1;
    display: inline-block;
}
#root .modal-body.MBody2nd .mbContBox .mbTitle{
    width: 98%;
    min-height: 85px;
    line-height: 47px;
    font-size: 21px;
    font-weight: bolder;
    color: #FFF;
    text-align: center;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/mbTitle.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -55px;
    z-index: 1;
}
#root .modal-body .modalCont .myBoxCont .tmbCont{
    width:100% !important;
    max-width: unset !important;
    height: 75vh;
    margin: 0 !important;
    padding: 2rem 0 0 0  ;
    overflow-y: unset !important;
}
#root .modal-body.MBody2nd .mbContBox .mbCont .textboxB{
    width: 90%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border: 2px solid rgb(143, 143, 143);
    border-radius: 15px;
    padding: 10px;
    margin: 5px 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
}
#root .modal-body.MBody2nd .mbContBox .mbCont2 .textboxB{
    width: 88%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border: 2px solid rgb(143, 143, 143);
    border-radius: 15px;
    padding: 10px;
    margin: 5px 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
    margin-right: 0px;
}
#root .modal-body .confirmBtn{
    width: 100%;
    height: 45px;
    font-size: 16px;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-03.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 4px 5px #696969);
    margin-bottom: 10px;
    border: none;
    right: 15px;
    position: relative;
    z-index: 1;
}
#root .modal-body .confirmBtn.send{
    font-size:14px !important;
    color: #0b0b0a;
    background-size: 86% 100% !important;
    text-shadow: 2px 0px 2px rgba(255, 255, 255, 0.8);
    left: -1rem;
}
#root .modal-body .cancelBtn{
    width: 100%;
    height: 45px;
    font-size: 16px;
    color: #414141;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-02.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 4px 5px #696969);
    margin-bottom: 10px;
    border: none;
    left: 10px;
    position: relative;
    z-index: 1;
}
#root .modal-body.MBody2nd .mbContBox h4{
    width: 88%;
    line-height: 18px;
    margin: 0 6%;
    font-size: 16px;
    font-weight: 400;
}

#root .modal-body.MBody2nd .mbContBox h3{
    width: 88%;
    line-height: 16px;
    margin: 0 6% 10px 6%;
    font-size: 14px;
}
#root .modal-body.MBody2nd .mbContBox h2{
    font-size: 2rem;
    font-weight: bold;
}
#root .modal-body.MBody2nd .mbContBox .checkboxLogin{
    width: 100%;
    height: 100%;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 12px;
    color: #0b0b0a;
    font-weight: 800;
    font-stretch: 90%;
}
#root .modal-body.MBody2nd .mbContBox .checkboxLogin a{
    color: #0b0b0a !important;
}
.message-verify-btn{
    width: 100%;
    height: 48px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
.message-verify-mbCont2{
    background-image: url(../img/btn-04.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.aka-span{
    float: right;
    color: red;
    margin-top: 10px;
}

.sms-verify-mbCont2 {
    /*background-image: url(../img/btn-04.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: table-cell;*/
    background-color: #76bdef;
    border-radius: 51px;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    border: 5px solid #ffffff;
    box-shadow: 0px 0px 10px 2px #bfbdbd;
}

.sms-verify-btn {
    width: 100%;
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 36px;
}
/*會員條款*/
.Membership_Terms_title{
    font-size: 35px;
    font-weight: bolder;
}