body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    margin: 0;

    
}

body.layout-mobile {
    background-color: #fff7e8;
    padding-bottom: 3.41333rem;
    overflow-x: hidden;
    max-width: 450px;
    margin: 0px auto;
}

.header {
    align-items: center;
    display: flex;
    height: 1.5rem;
    justify-content: space-between;
    left: 50%;
    position: fixed;
    right: 0;
    top: 0;
    transform: translate(-50%);
    width: 100%;
    max-width: 450px;
    z-index: 100;
}

.user-info-box {
    align-items: center;
    display: flex        ;
    flex: 1;
    margin-left: .10667rem;
}

.user-info{
    font-size: .29333rem;
    font-weight: 400;
    line-height: 1;
}

.userid, .username {
    color: #fff;
}

.logo {
    display: block;
    height: .8rem;
    width: 1.6rem;
    margin-left: .10667rem;
}

img {
    display: block;
    height: .64rem;
    width: .64rem;
}

img.small {
    height: .53333rem;
    width: .53333rem;
}

.balance-info-box {
    align-items: center;
    /*background: linear-gradient(90deg, #ffb30d, #f20);
    border: .01333rem solid #fff;
    border-radius: .69333rem;
    box-shadow: inset 0 .10667rem .10667rem #fffca166, inset 0 -.04rem .11467rem #841d00cc;*/
    background-image: url(/phone/images/money_windows.webp);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex        ;
    height: .69333rem;
    margin-left: .10667rem;
    padding: 0 .05333rem;
    position: relative;
    z-index: 2;
}

.icon-coin {
    background-image: url(/phone/images/icon_coin.png?1);
    background-position: 43% 57%;
    background-size: 100% 100%;
    height: .7rem;
    position: relative;
    width: .7rem;
    z-index: 2;
    left: -0.2rem;
}

.balance {
    color: #fff;
    font-family: FZLanTingHei-B-GBK;
    font-size: .35rem;
    font-style: normal;
    font-weight: 400;
    padding: 0 .08rem;
    text-shadow: 0 .02667rem .02667rem rgba(0, 0, 0, .25);
}

.refresh {
    background-image: url(/phone/images/refresh.png);
    background-position: 39% 28%;
    background-size: 100% 100%;
    height: .65rem;
    width: .65rem;
}

.settings {
    background-image: url(/phone/images/icon_settings.webp);
    background-repeat: no-repeat;
    background-size: contain;
    height: .64rem;
    margin-left: .05333rem;
    margin-right: .10667rem;
    width: .64rem;
}

.btn {
    align-items: center;
    border-radius: .61333rem;
    color: #fff;
    display: flex        ;
    font-family: PingFang SC;
    font-size: .32rem;
    font-style: normal;
    font-weight: 400;
    height: .74667rem;
    justify-content: center;
    letter-spacing: .0256rem;
    line-height: 120%;
    text-align: center;
    text-shadow: 0 .05333rem .05333rem rgba(164, 52, 52, .6);
    width: 1.81333rem;
}

.btn.login {
    background: linear-gradient(180deg, #dc4d1f, #ee7210);
    box-shadow: inset 0 0 .21333rem #ec5122, inset 0 -.10667rem .10667rem #ffddcf, inset 0 .10667rem .10667rem #ffffff40, 0 .02667rem .02667rem #00000080;
    margin-left: .16rem;
}

.btn.regist {
    background: linear-gradient(180deg, #efb42f, #ff8f02);
    box-shadow: inset 0 0 .21333rem #ece322, inset 0 -.10667rem .10667rem #fff, inset 0 .10667rem .10667rem #ffffff40, 0 .02667rem .02667rem #00000080;
    margin-left: .21333rem;
    margin-right: .10667rem;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

.banner-container, .swiper-container {
    position: relative;
}

.home-swiper-wrapper {
    height: 4.5rem;
}

.home-swiper-wrapper .swiper-container {
    width: 100%;
    height: 100%;
    box-shadow: 0px 2px 3px 0px #92766073;
}

.home-swiper-wrapper .swiper-slide img {
    -o-object-fit: fill;
    object-fit: fill;
    height: 100%;
    width: 100%;
}

.marquee-broadcast-container {
    display: flex;
}

.marquee, .swiper-mask {
    left: 0;
    position: absolute;
}
.marquee {
    bottom: .72rem;
    padding: 0 .32rem;
    right: 0;
    z-index: 1;
    overflow-x: hidden;
}

.marquee-text {
    align-items: center;
    display: flex;
    width: fit-content;
    position: absolute;
}

.marquee-text .text {
    color: #fff8e4;
    font-size: .32rem;
    margin-left: .21333rem;
    text-shadow: .02667rem .02667rem 0 rgba(69, 34, 1, .48);
    white-space: nowrap;
}


.icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAgL9ARyeO/QAAAPpJREFUSMfllVEOgyAMhsXtAOg4AJk7AJk7gGDvf6ZVqsFklP9hjzYRQT5/2kBLd1G7IWAE8yYxMzcAl/ihSRegDOiE2wHymsABUKgLFCAqAgzwazNbExBAiFgVEEB6oSYggBKIoQKY2hpOgDKoCAjw2Ef2V0AAN8lwOabez82oAFsAn+IE98UK4GUNFciecj+oAFlpdWBBQMxffRO4s44OJARwhD1S6P9aAju5ojA9AngXXty2NutGLYC1+9N2m4FtPAFJ/orqkbNddmHRDu3ciQseHfuAEgemHkxekP4rLCCoBMEiBsqgBYU0glI8tIv5YMF1gC6US9oXZpGXQbAy6q0AAAAASUVORK5CYII=);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 .42667rem;
    height: .42667rem;
    width: .42667rem;
}

.channel-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: -.29333rem;
    position: sticky;
    top: 1.49333rem;
    z-index: 110;
}

.channel-bar {
    align-items: center;
    background: #fff;
    border-radius: .53333rem;
    border-radius: 20px;
    box-shadow: 0 .10667rem .24267rem #57381e40, inset 0 -.10667rem .05333rem #00000014;
    display: flex;
    height: 1.06667rem;
    justify-content: space-between;
    max-width: 9.22667rem;
    min-width: 6.24rem;
    overflow: hidden;
}

.channel-bar .search-btn{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAPFBMVEUAAABdNg9gOBBdNg5dNQ9dOBBeNg9cNg9dNg9cNhBeNg9dNw9dNg9gQBBdNg9dNhBgMBBdNxBeNhBdNg9OCQ3YAAAAE3RSTlMA3yCf70CAcGAwz7+QELBQEL/PPAvdxAAAAVxJREFUSMfVVFuShCAMNAFBkIcO97/r7pYgGwg4NX/Tf8buokOaLF8AH7UTwqlo3mEbBemGDPGBvu6pAWwTOhL6s2STiYfwLF+lIQDnfPkSSrkTiGLMP1dPboxX6JuOtF76spSPuS51d3PlEEfKIfOZ2R4iK/7/22qNQZ7O3pf0wuLIrtaanzyfYWDaLrLLej+8KXkP/DoyTDJJPeH1OYulJJ7iJfATgSAeNDNKNghAYnSyTGqCnCemL/FDwUeWaEfzpi09DyeCQK71GEevMK7BKRqVfSzYmriq+s0DSpfUE4zCobr4hxJ4FpguYF9SLB+Y9+WIguUDcs82CWQWLhcdU+qwjda/6666SETelajp+hedokJaC/3yt55GGNITLLb3wULq2iE2tjhJ+CUZGCiwlciwltOrgmJ1r5sttO/8ArexzRq3aDzfoV3eBFrq6RmHZfhzCIY/h/rj/wBcfTWmVQI4eAAAAABJRU5ErkJggg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: .32rem;
    flex: 0 0 .85333rem;
    height: .85333rem;
    margin-right: .10667rem;
    position: relative;
    top: -.05333rem;
    width: .85333rem;
}

.channel-bar .search-btn.active {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADABAMAAACg8nE0AAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAgEC/+QGcAgAAAfFJREFUeNrs1L0Ng1AMAOH8DUAiFkDKACkYAIL3nykRjYsUh3VVJF/9LL8PEKeu67qu67qu67qu67DL9Kgcn+6nWueI2I7fZo6IobRgjm/r0dPjz2nqFnvDUe7eUlgwxt5aOr2V3gAR+DQ/oSQwYG+pL4ihAIh34RUUCKNakAQGxFpYAENwFntGNjCg/ohuka0MqH9F10BCArLX8Z9XICEBWflXwYQz3EQMwkUEQQBgVAB4VgJ42AJ4WgJ43AJ4XgKYYAFMkAAmWAATJIAJHsAED2ACAxyBAYrAAElAgCUQwBMA4AkE8AQAeAIBPAEAnkAATwCAJwDAEwDgCQAQBAA4AgE8AQCeQABPAIAnEMATAOAJBPAEBngCAzwhAX+34NOuud0wCAQxkBYSpYD7SAkUAKL/niiAx639NSt5GohE4G7XnusjavYn37ymvT6026Oi02H3cFz3uXAer8wul/7L2NJj8HodHTsMv5Pxnb+ATFco+hJYWGPZi3gpSiCHIcU4hxtIlSM1aigoxJrMYFaKlonhuBjv8woKuWKhlURGzcUq6qyqkVSWenUvqbD2KvfBkQZc7YEjbrjqCUee+Uv6j/MDnsC0cRQsWyIrszoa3E4S+ZafriIeukw5hEeq35kfTQf9jiWEEEIIIYQQQggzTg4hjbGEGrGwAAAAAElFTkSuQmCC), linear-gradient(115deg, #61a2ff, #03f);
    background-size: .48rem, 100% 100%;
    border-radius: 1.33333rem;
    box-shadow: 0 .10667rem .21333rem #3359f27a, inset -.02667rem -.05333rem .02667rem #23a3fbb8, inset 0 .02667rem #fffdf752;
}

.channel-container .search-box {
    background: linear-gradient(#feda8d, #f9e1ae);
    border-bottom: .05333rem solid #fff9dd;
    border-radius: .26667rem;
    box-shadow: 0 0 .26667rem .05333rem #00000061;
    height: 1.33333rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 1.12rem;
    transform: translate(-50%);
    width: 8rem;
}

.channel-container .search-box, .channel-container .search-form {
    align-items: center;
    display: flex;
}

.channel-container .search-form {
    background-color: #fff7e3;
    border: .02667rem solid #d0b67f;
    border-radius: .2rem;
    height: .90667rem;
    justify-content: space-between;
    padding: 0 .13333rem;
    position: relative;
    top: .04rem;
    width: 7.33333rem;
}

.channel-container .search-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAPFBMVEUAAABdNg9gOBBdNg5dNQ9dOBBeNg9cNg9dNg9cNhBeNg9dNw9dNg9gQBBdNg9dNhBgMBBdNxBeNhBdNg9OCQ3YAAAAE3RSTlMA3yCf70CAcGAwz7+QELBQEL/PPAvdxAAAAVxJREFUSMfVVFuShCAMNAFBkIcO97/r7pYgGwg4NX/Tf8buokOaLF8AH7UTwqlo3mEbBemGDPGBvu6pAWwTOhL6s2STiYfwLF+lIQDnfPkSSrkTiGLMP1dPboxX6JuOtF76spSPuS51d3PlEEfKIfOZ2R4iK/7/22qNQZ7O3pf0wuLIrtaanzyfYWDaLrLLej+8KXkP/DoyTDJJPeH1OYulJJ7iJfATgSAeNDNKNghAYnSyTGqCnCemL/FDwUeWaEfzpi09DyeCQK71GEevMK7BKRqVfSzYmriq+s0DSpfUE4zCobr4hxJ4FpguYF9SLB+Y9+WIguUDcs82CWQWLhcdU+qwjda/6666SETelajp+hedokJaC/3yt55GGNITLLb3wULq2iE2tjhJ+CUZGCiwlciwltOrgmJ1r5sttO/8ArexzRq3aDzfoV3eBFrq6RmHZfhzCIY/h/rj/wBcfTWmVQI4eAAAAABJRU5ErkJggg==);
    background-size: cover;
    flex: 0 0 .48rem;
    height: .48rem;
    width: .48rem;
}

.channel-container .search-input {
    background: none;
    border: none;
    flex: 1;
    font-size: .32rem;
    height: 100%;
    outline: none;
    padding: 0 .13333rem;
}

.channel-container .search-close {
    background-color: #0003;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAD1BMVEUAAABGIgJEJABFIQFFIgEJe+6CAAAABHRSTlMAgEC/+QGcAgAAAQdJREFUWMPt1sENwjAMheEUMUCpOkBbmAB1AEK9/0xQcbBku/oP5lIp7+gofAmExKWlpeUsucxDVF5uU4mzijx99S5SS5irfNPbardXX+GEcR+qYXULdyASEN2vqrtwQ9UAOEF6LOqSPDHyBB1UIF5SWZWwwFaiPJSwwLtoAr8qEG/Bj/tPAIIATxDgCQ8A4QAiLMCEAZgwABMGYIIAJQAgQgEmFGDCA0wowIQDmGCAJ+SXxJtmgAn+4fJHgw8fH28GiOC/aP4S4Gsmf5HxVckAEHTdMwAEP1n5R5Gf3fzD3sWtw/+bk7j96bMNln5LFRq7VJNYxqM2dDtqdG9LVJ6HqbS0tJwkH6Ol260G5XiKAAAAAElFTkSuQmCC);
    background-position: 50%;
    background-size: .32rem;
    border-radius: .24rem;
    flex: 0 0 .48rem;
    height: .48rem;
    width: .48rem;
}

.channel-wrap {
    flex: 1;
    height: 2.13333rem;
    overflow: hidden;
    position: relative;
    top: -.01333rem;
}

.channels {
    display: flex;
    height: 100%;
    overflow-x: auto;
    padding: 0 .16rem;
    white-space: nowrap;
}

.channels, .link {
    align-items: center;
}

.link {
    color: #5d360f;
    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
    font-family: FZLanTingHei-B-GBK;
    font-size: .32rem;
    font-style: normal;
    font-weight: 600;
    height: .82667rem;
    justify-content: center;
    line-height: .82667rem;
    padding: 0 .32rem;
    text-decoration: none;
}

.link.active {
    background: linear-gradient(90deg, #4dbeff, #1441ff);
    border-radius: 2.66667rem;
    box-shadow: inset 0 -.05333rem .02667rem #99fffa40;
    color: #fff;
    min-width: 1.28rem;
    text-shadow: 0 .02667rem .02667rem rgba(0, 0, 0, .4);
}

.game-list-container {
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(auto-fill, 2.8rem);
    grid-template-rows: repeat(auto-fill, 2.8rem);
    justify-content: center;
    margin: .1rem auto 0;
}

.game-card-container {
    position: relative;
}

.game-card {
    cursor: pointer;
    height: 2.6rem;
    width: 2.6rem;
}

.game-card.big {
    grid-column: span 2;
    grid-row: span 2;
    transform: scale(2.0857);
    transform-origin: top left;
}

.game-card-img {
    height: 100%;
    padding: 5%;
    position: relative;
    width: 100%;
}

.game-card-img .game-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: .21333rem;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.game-card-img .layer-img {
    background-size: 100% 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.home-btn {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 2.13333rem;
    position: fixed;
    width: 2.13333rem;
    z-index: 10;
}

.home-btn.teach {
    background-image: url(/phone/images/btn_teach.webp);
    bottom: 5.06667rem;
    /*left: 0;*/
}

.home-btn.line {
    background-image: url(/phone/images/btn_line.webp);
    bottom: 5.22667rem;
    right: 0;
}

.menu-container {
    background-image: url(/phone/images/bg_menu.webp?1);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 0;
    left: 0;
    padding-bottom: 32.177777%;
    pointer-events: none;
    position: fixed;
    right: 0;
    /*width: 100%;*/
    max-width: 450px;
    margin: 0px auto;
    z-index: 200;
}

.menu-box {
    padding-bottom: 21%;
    pointer-events: auto;
}

.menu-box, .menu-list {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}

.menu-list {
    align-items: flex-end;
    display: flex        ;
    justify-content: space-around;
    top: 0;
}

.menu-btn {
    align-items: center;
    display: flex        ;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: .25rem;
    position: relative;
    width: 1.70667rem;
}

.menu-btn.bill {
    height: 100%;
    width: 20%;
}

.menu-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: .74667rem;
    width: .74667rem;
}

.menu-icon.activity {
    background-image: url(/phone/images/icon_menu_activity.webp);
}

.menu-icon.rank {
    background-image: url(/phone/images/icon_menu_rank.webp);
}
.menu-icon.alert {
    background-image: url(/phone/images/icon_menu_alert.webp);
}
.menu-icon.person {
    background-image: url(/phone/images/icon_menu_person.webp);
}
.menu-icon.bill {
    background-image: url(/phone/images/u99-icon2.gif);
    width: 2.3rem;
    height: 2.3rem;
}

.stroke-text-container {
    display: inline-block;
    position: relative;
}

.menu-text {
    color: #fff;
    font-family: PingFang TC;
    font-size: .29333rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: .10667rem;
    text-align: center;
}

.stroke {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.fill {
    position: relative;
}


/*彈窗*/

.popup-container {
    -webkit-backdrop-filter: blur(.13333rem);
    backdrop-filter: blur(.13333rem);
    background-color: #45220129;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 250;
}
.popup-container, .popup-wrap {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.popup-wrap {
    animation: popup-zoomIn .5s;
    max-height: 20.26667rem;
    position: relative;
}
@keyframes popup-zoomIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.p-header {
    align-items: center;
    background-image: url(/phone/images/bg_pop_head_1.webp);
    background-position: top;
    background-size: 100%;
    border-radius: .42667rem;
    display: flex;
    flex-direction: row;
    font-size: .37333rem;
    font-stretch: 90%;
    font-weight: 800;
    height: 5.92rem;
    justify-content: center;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: -.32rem;
    transform: translate(-50%);
    width: 9.33333rem;
    z-index: 1;
}
.p-header.game-start {
    background-image: url(/phone/images/bg_pop_head_2.webp);
}
.header-box {
    align-items: center;
    display: flex;
    height: .93333rem;
    justify-content: center;
    position: relative;
    top: 1.05333rem;
    width: 4.8rem;
}
.p-header.game-start .header-box {
    top: 1.17333rem;
}
.tab-btn {
    border-radius: 2.66667rem;
    color: #fff;
    flex: 1;
    font-family: FZLanTingHei-B-GBK;
    font-size: .42rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.01333rem;
    line-height: 1;
    /*padding-bottom: .13333rem;*/
    padding-top: .13333rem;
    text-shadow: 0 .02667rem 0 rgba(0, 0, 0, .25);
}
.tab-btn.l2 {
    font-size: .37333rem;
    margin: 0 .32rem;
}
.tab-btn.active {
    -webkit-backdrop-filter: blur(.05333rem);
    backdrop-filter: blur(.05333rem);
    background-color: #45220129;
    box-shadow: .08rem .21333rem .42667rem #fff8e429, .02667rem .02667rem .05333rem #fff8e452, inset .02667rem .05333rem .10667rem #4522013d;
    color: #f5ff3a;
}
.popup {
    border-image: url(/phone/images/bg_pop.png?3) 90 14 160 fill stretch;
    border-image-width: .58667rem .37333rem .90667rem .37333rem;
    border-radius: .64rem;
    border-style: solid;
    border-width: .32rem .61333rem .96rem .64rem;
    flex: 1;
    margin-top: 3.73333rem;
    overflow: hidden;
    position: relative;
    width: 9rem;
}
.p-content {
    border-radius: .32rem;
    height: 100%;
    overflow-y: auto;
}

/* 登入 彈窗*/
.popup-account-container {
    display: flex;
    justify-content: center;
    padding: 1.70667rem 0 .64rem;
}
.form {
    width: 80%;
}
.input-container {
    align-items: center;
    display: flex;
    margin-top: .4rem;
}
.input-wrap {
    background: #fcf1df;
    border-radius: .21333rem;
    box-shadow: 0 .05333rem .10667rem #00000014, inset 0 -.05333rem .10667rem #261d051f, inset 0 .02667rem .05333rem #fff;
    flex: 1;
    height: 1.17333rem;
    overflow: hidden;
}
.input-wrap .icon, .input-wrap {
    align-items: center;
    display: flex;
}
.input-wrap .icon {
    background-image: url(/phone/images/input.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 1.06667rem;
    height: 100%;
    justify-content: center;
    width: 1.06667rem;
}
.input-wrap .icon img {
    display: block;
    height: .53333rem;
    width: .53333rem;
}
.input-wrap .input {
    background: none;
    border: none;
    color: #b97531;
    flex: 1;
    font-family: FZLanTingHei-DB-GBK;
    font-size: .32rem;
    font-style: normal;
    font-weight: 400;
    outline: none;
    padding: 0 .32rem;
}
.popup-account-container .forget {
    display: flex;
    justify-content: flex-end;
    margin-top: .26667rem;
}
.popup-account-container .forget button {
    font-size: .32rem;
    text-decoration: underline;
}
.form .submit {
    display: flex;
    justify-content: center;
    margin-top: .26rem;
}
.custom-button {
    align-items: center;
    border-radius: 2.66667rem;
    color: #fff;
    display: flex;
    font-family: FZLanTingHei-H-GBK;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    letter-spacing: .06021rem;
}
.custom-button.default {
    border-image: url(/phone/images/bg_btn.webp) 4 20 fill stretch;
    border-image-width: .10667rem;
    border-style: solid;
    border-width: .26667rem;
    font-size: .42667rem;
    height: 1.26667rem;
    min-width: 2.93333rem;
    padding: 0 .48rem;
}

.close-footer {
    animation: fadeInUp 1s;
    display: flex;
    justify-content: center;
    padding: .32rem 0;
    width: 100%;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
    transform: translateY(1.33333rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn-close {
    background-image: url(/phone/images/btn_close.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.49333rem;
    width: 1.49333rem;
}

/* 註冊談窗*/
.popup-account-container .prepend {
    align-items: center;
    display: flex    ;
}
.popup-account-container .input-select {
    background: none;
    border: none;
    color: #452201;
    outline: none;
}
.popup-account-container .verify-code-container {
    align-items: center;
    display: flex    ;
}
.popup-account-container .agree, .submit {
    display: flex    ;
    justify-content: center;
}
.popup-account-container .agree {
    margin-top: .42667rem;
}
.popup-account-container .checkbox-container {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: .32rem;
    font-weight: 400;
}
.popup-account-container .checkbox-container.small {
    font-size: .26667rem;
}
.popup-account-container .checkbox {
    background-color: #fff2e8;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: .42667rem .42667rem;
    border: .02667rem solid #cfc2c3;
    border-radius: .10667rem;
    display: inline-block;
    height: .37333rem;
    margin-right: .05333rem;
    width: .37333rem;
}
.popup-account-container .checkbox.checked {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACABAMAAAAxEHz4AAAAD1BMVEUAAABGIgJFIQFEJABFIgFLl8ShAAAABHRSTlMAgL9ARyeO/QAAAPpJREFUaN7t1ctxwkAQBuFlcADYcgJ2KQBRRQKSJv+Y4EL1wo3eG0yf9fgu+2+rqqqqqurj+563qQ10yFunwfdzbbrfTAgakLkPAnLVgHsacG8UkMsgIEcB2yhgcwDaHYBOg4C1AAV4c8Dh53+yAG4dB+DJbdGAI2PhAF8srgK0OSEIAB/IxQEak+kAx+7eUYCWENwpSFoMoP/bbgDt0hME4PHuUjsw9wSzA9ETBOCJ8Ax4mSAAj4TzywAIBEAQ1BSHBUBwAAoLgOAAFBYAwQEoLACCA1BYAAQHoNAACABUYQEQALgCgCUAcAUA2QWA7Pw3taqqqqqqPrIrR9v7s3MflzUAAAAASUVORK5CYII=);
}
.popup-account-container .checkbox-container.small .checkbox {
    border-radius: .08rem;
    height: .32rem;
    width: .32rem;
}
.popup-account-container a {
    text-decoration: none;
}
.popup-account-container .checkbox-container a {
    color: #76351e;
}
.popup-account-container input[type=checkbox] {
    display: none;
}
/*設定視窗*/
.popup-settings-container {
    padding: 1.12rem .32rem;
}
.popup-settings-container .van-cell {
    box-sizing: border-box;
    color: #452201;
    display: flex;
    font-size: .37333rem;
    line-height: .64rem;
    overflow: hidden;
    padding: .22667rem .42667rem;
    position: relative;
    width: 100%;
    align-items: center;
}
.popup-settings-container .van-cell:after {
    border-bottom: .02667rem solid #ebedf0;
    bottom: 0;
    box-sizing: border-box;
    content: " ";
    left: .42667rem;
    pointer-events: none;
    position: absolute;
    right: .42667rem;
    transform: scaleY(.5);
}
.popup-settings-container .van-cell__title, .van-cell__value {
    flex: 1;
}
.popup-settings-container .van-cell--large .van-cell__title {
    font-size: 14px;
}
.popup-settings-container .van-switch {
    border-radius: 1em;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    font-size: .69333rem;
    height: calc(1em + .10667rem);
    position: relative;
    transition: background-color .3s;
    width: calc(1.8em + .10667rem);
    background-color: rgba(120, 120, 128, 0.36);
}
.popup-settings-container .van-switch--on {
    background: rgb(235, 92, 16);
}
.popup-settings-container .van-switch__node {
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 .08rem .02667rem 0 rgba(0,0,0,.05);
    font-size: inherit;
    height: 1em;
    left: .05333rem;
    position: absolute;
    top: .05333rem;
    transition: transform .3s cubic-bezier(.3, 1.05, .4, 1.05);
    width: 1em;
}

.popup-settings-container .van-switch--on .van-switch__node {
    transform: translate(calc(calc(1.8em + .10667rem) - 1em - .10667rem));
}

.van-cell-group, .van-cell-group .van-cell {
    background: transparent;
}

/*我的彈窗*/
.popup-userinfo-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 1.17333rem .7rem .7rem;
}
.popup-userinfo-container .avatar-box, .info-line {
    align-items: center;
    display: flex;
}
.popup-userinfo-container .avatar-box {
    flex-direction: column;
}

.popup-userinfo-container .avatar {
    border: .08rem solid #b97531;
    border-radius: .82667rem;
    box-shadow: inset 0 .10667rem .10667rem #550c0c40;
    display: block;
    height: 1.65333rem;
    width: 1.65333rem;
}

.popup-userinfo-container .change-avatar {
    background: linear-gradient(180deg, #fff, #c8c8c8);
    border-radius: .50667rem;
    box-shadow: 0 0 .16rem #00000057;
    box-shadow: 0 .10667rem .10667rem #00000040;
    color: #76351e;
    font-family: FZLanTingHei-B-GBK;
    font-size: .26667rem;
    font-style: normal;
    font-weight: 400;
    line-height: .50667rem;
    margin-top: -.18667rem;
    padding: 0 .34667rem;
    text-align: center;
}

.popup-userinfo-container .info-box {
    flex: 1;
    margin-left: .56rem;
}

.popup-userinfo-container .info-text {
    color: #76351e;
    font-family: FZLanTingHei-DB-GBK;
    font-size: .38rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.popup-userinfo-container .info-text.bold {
    font-weight: 600;
}

.popup-userinfo-container .info-text+.info-text {
    margin-top: .05333rem;
}

.popup-userinfo-container .property-line {
    background-color: #f1e0ff;
    border-radius: .21333rem;
    font-family: FZLanTingHei-DB-GBK;
    margin-top: .48rem;
    overflow: visible;
    padding: 1.38667rem .37333rem .37333rem;
    position: relative;
    width: 100%;
}

.popup-userinfo-container .property-head, .property-line {
    align-items: center;
    display: flex;
}

.popup-userinfo-container .property-head {
    background: linear-gradient(180deg, #ff6523, #8d271b);
    border: .10667rem solid #f4f4f4;
    border-radius: 1.46667rem;
    box-shadow: inset 0 .10667rem .10667rem #ffffff80, 0 .10667rem .39467rem #00000040;
    color: #fff;
    font-size: .34667rem;
    font-style: normal;
    font-weight: 400;
    height: 1.17333rem;
    left: -.10667rem;
    padding: 0 .34667rem;
    position: absolute;
    right: -.10667rem;
    top: -.10667rem;
}

.popup-userinfo-container .property-info {
    flex: 1;
}

.popup-userinfo-container .property-info .balance {
    color: #76351e;
    font-size: .42667rem;
}

.popup-userinfo-container .property-info .balance, .property-info .income {
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.popup-userinfo-container .property-info .income {
    color: #999;
    font-size: .29333rem;
    margin-top: .16rem;
}

.popup-userinfo-container .refresh {
    background-image: url(/phone/images/refresh.png);
    /*background-position: 39% 28%;*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: .05333rem solid #fff;
    border-radius: .85333rem;
    height: .85333rem;
    width: .85333rem;
}

.popup-userinfo-container .oper-line {
    display: flex;
    justify-content: space-around;
    margin-top: .34667rem;
    width: 100%;
}

.popup-userinfo-container .oper-btn {
    align-items: center;

    background-image: url(/phone/images/message_cube.webp);
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;
    height: 1.62667rem;
    justify-content: center;
    width: 1.62667rem;
}

.popup-userinfo-container .oper-btn .icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: .64rem;
    width: .64rem;
}

.popup-userinfo-container .oper-btn .icon.verify {
    background-image: url(/phone/images/d.webp);
}

.popup-userinfo-container .oper-btn .icon.detail {
    background-image: url(/phone/images/c.webp);
}

.popup-userinfo-container .oper-btn .icon.limit {
    background-image: url(/phone/images/b.webp);
}

.popup-userinfo-container .oper-btn .icon.pwd {
    background-image: url(/phone/images/a.webp);
}

.popup-userinfo-container .btn-line {
    margin-top: .32rem;
}

.popup-userinfo-container .oper-btn .text {
    color: #000;
    font-size: .29333rem;
    font-style: normal;
    font-weight: 400;
    line-height: .37333rem;
    line-height: 120%;
    margin-top: .13333rem;
}
.popup-userinfo-container .custom-button.default {
    height: 1.5rem;
}


.popup-password-container {
    display: flex;
    justify-content: center;
    padding: 1.17333rem 0 .42667rem;
}

.form p {
    font-size: .34667rem;
    text-align: center;
}

/* 活動公告視窗(活動部分) */

.popup-upcoming-activities-container {
    padding: .85333rem .50667rem 0;
}
.popup-upcoming-activities-container ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.popup-upcoming-activities-container .active-card {
    background-image: linear-gradient(#ffe9d0, #a26009);
    border-radius: .21333rem;
    margin-bottom: .42667rem;
    overflow: hidden;
    padding: .05333rem;
    position: relative;
}
.popup-upcoming-activities-container .active-img {
    border-radius: .21333rem;
    display: block;
    width: 100%;
    height: auto;
}
.active-card .text {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent);
    bottom: 0;
    color: #fff;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    height: 2.13333rem;
    left: 0;
    letter-spacing: -.01333rem;
    line-height: .53333rem;
    padding: .58667rem .42667rem 0;
    position: absolute;
    right: 0;
    text-shadow: 0 .05333rem .05333rem rgba(0, 0, 0, .5);
}
.active-card .text .title {
    font-size: .42667rem;
}
.active-card .text .title2 {
    font-size: .29333rem;
}

/* 活動公告視窗(公告部分) */

.popup-upcoming-announce-container {
    align-items: stretch;
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: .64rem .18667rem 0;
}
.popup-upcoming-announce-container .menu-l {
    flex: 0 0 1.84rem;
    font-size: .32rem;
    overflow-y: auto;
    width: 1.84rem;
    -webkit-overflow-scrolling: touch;
    margin-top: .48rem;
}
.popup-upcoming-announce-container .menu-item {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: row;
    font-family: FZLanTingHei-H-GBK;
    font-size: .32rem;
    font-style: normal;
    font-weight: 400;
    justify-content: flex-start;
    letter-spacing: .01333rem;
    line-height: .53333rem;
    min-height: 1.28rem;
    padding: .21333rem;
    text-shadow: 0 .05333rem .10667rem rgba(0, 0, 0, .18);
}
.popup-upcoming-announce-container .menu-item.active {
    background: #33000026;
    border-radius: .4rem;
    box-shadow: inset 0 .10667rem .10667rem #550c0c40;
}
.popup-upcoming-announce-container .r {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: .16rem;
}
.popup-upcoming-announce-container .r .r-box {
    background-image: url(/phone/images/bg_announce.webp);
    background-size: 100% 100%;
    height: 8.37333rem;
    overflow: hidden;
    padding: .64rem;
}
.popup-upcoming-announce-container .r .r-text-box {
    height: 100%;
    overflow-y: auto;
    padding: .10667rem;
}
.popup-upcoming-announce-container .r .text {
    color: #401b14;
    font-family: FZLanTingHei-DB-GBK;
    font-size: .32rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.01333rem;
    line-height: .53333rem;
}

.popup-upcoming-announce-container .menu-text {
    color: #401b14;
}

.popup-upcoming-announce-container .r p {
    margin-bottom: .10667rem;
    min-height: .10667rem;
    word-break: break-word;
}
.popup-upcoming-announce-container .r h5 {
    color: #c06a30;
    font-size: .37333rem;
    margin-bottom: .32rem;
}
.popup-upcoming-announce-container .r p+h5 {
    margin-top: .53333rem;
}

/* 活動視窗 */

.popup-activity-container {
    font-family: PingFang SC;
    padding: 1.12rem .56rem;
}

.active-card {
    background-image: linear-gradient(#ffe9d0, #a26009);
    border-radius: .21333rem;
    margin-bottom: .42667rem;
    overflow: hidden;
    padding: .05333rem;
    position: relative;
}

.active-card .active-img {
    border-radius: .21333rem;
    display: block;
    width: 100%;
    height: auto;
}

.popup-activity-container h4 {
    color: #401b14;
    font-size: .42667rem;
    margin-top: .42667rem;
}

.popup-activity-container h6 {
    color: #401b14b3;
    font-size: .29333rem;
}

.popup-activity-container h4, .popup-activity-container h6 {
    font-style: normal;
    font-weight: 400;
    line-height: .53333rem;
}

.popup-activity-container .text {
    color: #401b14;
    font-size: .32rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin-top: .37333rem;
    white-space: pre-wrap;
}

/* 遊戲紀錄視窗 */

.popup-details-record-container{
    padding: 1.17333rem .32rem 0;
}
.popup-details-record-container .desc{
    color: #a35200;
    font-size: .29333rem;
    line-height: .53333rem;
    text-align: center;
}
.popup-details-record-container .field-box{
    align-items: center;
    background: #fcf1df;
    border-radius: .21333rem;
    box-shadow: 0 .05333rem .10667rem #00000014, inset 0 -.05333rem .10667rem #261d051f, inset 0 .02667rem .05333rem #fff;
    display: flex;
    font-size: .32rem;
    height: 1.17333rem;
    justify-content: space-between;
    margin-top: .32rem;
    overflow: hidden;
    padding: 0 .42667rem;
}
.popup-details-record-container .field-input{
    align-items: center;
    display: flex;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}
.popup-details-record-container .date-picker-line{
    padding: 0 .21333rem;
}
.popup-details-record-container .field-box .icon img{
    display: block;
    height: .53333rem;
    width: .53333rem;
}
.popup-details-record-container .van-icon-arrow-down:before {
    content: "";
}
.popup-details-record-container .quick-box{
    align-items: center;
    display: flex;
    margin-top: .32rem;
}

.popup-details-record-container .quick-box .field-box {
    flex: 1;
    margin-top: 0;
}

.popup-details-record-container .search-btn {
    margin-left: .21333rem;
}
.popup-details-record-container .custom-button.small {
    background-image: url(/phone/images/search.webp);
    background-size: 100% 100%;
    width: 1.8rem;
    font-size: .29333rem;
    height: .8rem;
    padding: 0 .32rem;
}

.popup-details-record-container .dashboard {
    display: grid;
    gap: .16rem;
    grid-template-areas:
        "a a b b c c"
        "d d d e e e";
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: repeat(2, 1.78667rem);*/
    grid-template-rows: repeat(1, 1.78667rem);
    margin-top: .32rem;
}

.popup-details-record-container .dashboard-item {
    background: #3300004d;
    border-radius: .4rem;
    box-shadow: inset 0 .10667rem .10667rem #550c0c40;
    color: #fff;
    font-size: .34667rem;
    font-style: normal;
    font-weight: 400;
    line-height: .53333rem;
    padding: .32rem;
}
.popup-details-record-container .dashboard-label {
    letter-spacing: -.01333rem;
}
.popup-details-record-container .dashboard-text {
    letter-spacing: .01333rem;
}

.popup-details-record-container .detail-list {
    margin-top: .53333rem;
}
.popup-details-record-container .detail-item {
    background-color: #fcf1df;
    border-radius: .21333rem;
    box-shadow: 0 0 .08rem #0009;
    box-shadow: 0 .02667rem .16rem -.05333rem #4f4f4f99;
    display: flex;
    justify-content: space-between;
    padding: .32rem;
    position: relative;
}
.popup-details-record-container .game-name {
    font-size: .42667rem;
    font-weight: 700;
}
.popup-details-record-container .factory-name {
    color: gray;
    font-size: .32rem;
    font-weight: 400;
}
.popup-details-record-container .create-time {
    color: gray;
    font-size: .32rem;
    margin-top: .21333rem;
}
.popup-details-record-container .amount {
    color: red;
    font-size: .42667rem;
    font-weight: 700;
}
.popup-details-record-container .status, .popup-details-record-container  .win-icon {
    position: absolute;
    right: .32rem;
}
.popup-details-record-container  .win-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1.70667rem 1.22667rem;
    bottom: .18667rem;
    height: .72rem;
    width: .72rem;
}
.popup-details-record-container .win-icon.lose {
    background-position: -.48rem -.26667rem;
}
/*認證視窗*/
.popup-vefiry-container {
    display: flex;
    justify-content: center;
    padding-top: 1.38667rem;
}
.label {
    font-size: .32rem;
    font-weight: 400;
    margin-right: .16rem;
}
.input-select {
    background: none;
    border: none;
    color: #452201;
    outline: none;
}
.upload-wrap {
    align-items: center;
    display: flex;
    margin-top: .53333rem;
}
.upload-label {
    font-size: .32rem;
    font-weight: 400;
    margin-right: .16rem;
}
.upload-box {
    align-items: center;
    display: flex;
    flex: 1;
}
.upload-container+.upload-container {
    margin-left: .21333rem;
}

.quick-box .van-dropdown-menu {
    flex: 1;
}

.quick-box .van-dropdown-menu .van-dropdown-menu__bar {
    align-items: center;
    background: #fcf1df;
    border-radius: .21333rem;
    box-shadow: 0 .05333rem .10667rem #00000014, inset 0 -.05333rem .10667rem #261d051f, inset 0 .02667rem .05333rem #fff;
    display: flex;
    font-size: .32rem;
    height: 1.17333rem;
    justify-content: space-between;
    margin-top: .32rem;
    overflow: hidden;
    padding: 0 .42667rem;
}

/*近期爆獎*/

.index-games-icons-row {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
}

.group-content {
    margin: 0 auto;
    position: relative;
   

    min-height: 220px;
    font-size: 14px;
}
.group-content .group-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    padding-top: .2rem;
}

.group-content .group-title img {
    height: 1.9rem;
    width: auto;
}
.group-content .group-body {
    width: 90%;
    margin: 0 auto;
    /*height: 200px;*/
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}