@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ 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);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform,height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop:always}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper: before {
    height:100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper: before {
    width:100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom,#00000080,#0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.banner {
    height: .78rem;
    border-radius: .12rem;
    width: 3.43rem;
    margin: .18rem auto .05rem;
    overflow: hidden
}

.banner .swiper-slide a {
    display: flex;
    justify-content: center
}

.banner img {
    height: .78rem
}

.lucky-grid-container {
    direction: ltr!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: .13rem;
    overflow-y: auto;
    position: relative
}

.lucky-grid-container .lucky-grid-box {
    z-index: 1;
    position: relative
}

.lucky-grid-container .lucky-grid-box .lucky-grid-box-ticket {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-weight: 400;
    font-size: .24rem;
    line-height: .22rem;
    padding-top: .03rem;
    z-index: 1;
    color: #fff;
    background-image: var(--grid-draw-btn-img);
    width: .97rem;
    height: 1.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .06rem;
    font-weight: 700;
    z-index: 2
}

.lucky-grid-container .lucky-grid-box .lucky-grid-box-ticket .finger,.lucky-grid-container .lucky-grid-box .lucky-grid-box-ticket .draw-effects {
    position: absolute;
    bottom: 0;
    right: -10%
}

.lucky-grid-container .lucky-grid-box .lucky-grid-box-ticket .finger {
    width: var(--grid-draw-btn-width);
    height: var(--grid-draw-btn-height);
    z-index: 1;
    bottom: -9%;
    background-image: var(--grid-finger-img);
    animation: breathe 1.8s infinite ease-in-out
}

.lucky-grid-container .lucky-grid-box .lucky-grid-box-ticket .draw-effects {
    width: .83rem;
    height: .83rem;
    z-index: 0;
    bottom: -5%;
    background-image: var(--grid-draw-effects-img);
    animation: rotate 2.5s infinite linear
}

.lucky-grid-container .lucky-grid-bottom {
    position: relative;
    margin-top: -.36rem;
    width: 3.27rem;
    height: 1.26rem;
    background-image: var(--grid-bottom-img);
    background-size: 3.27rem 1.26rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0 .13rem .1rem;
    flex-shrink: 0
}

.lucky-grid-container .lucky-grid-bottom>div {
    z-index: 1
}

.lucky-ton-rewards-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: #000c
}

.lucky-ton-rewards-modal .container {
    position: relative;
    width: 3.27rem;
    padding: .32rem .29rem;
    box-shadow: 0 -2px 10px #0000001a;
    z-index: 100;
    border-radius: .4rem;
    background: transparent;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

.lucky-ton-rewards-modal .container .title {
    position: relative;
    white-space: normal;
    width: 100vw;
    font-weight: 700;
    font-size: var(--modal-draw-rewards-title-size);
    line-height: .36rem;
    letter-spacing: 0%;
    text-align: center;
    color: var(--modal-draw-rewards-title-color);
    text-shadow: var(--modal-draw-rewards-text-shadow)
}

.lucky-ton-rewards-modal .container .title .title-bg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: var(--modal-draw-rewards-title-width);
    height: var(--modal-draw-rewards-title-height);
    background-image: var(--modal-draw-rewards-title-img)
}

.lucky-ton-rewards-modal .container .title .orange {
    color: var(--modal-draw-rewards-title-second-color)
}

.lucky-ton-rewards-modal .container .content {
    width: 2.63rem;
    height: 100%;
    border-radius: .06rem .06rem .24rem .24rem;
    background: transparent;
    color: #000;
    font-weight: 400;
    font-size: .16rem;
    line-height: .2rem;
    letter-spacing: 0%;
    text-align: center
}

.lucky-ton-rewards-modal .container .content .rewards-info {
    margin-bottom: .28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-weight: 700;
    font-size: .5rem;
    line-height: .36rem;
    letter-spacing: 0%;
    text-align: center;
    text-shadow: var(--modal-draw-rewards-text-shadow)
}

.lucky-ton-rewards-modal .container .content .rewards-info .rewrads-info-img {
    width: var(--modal-draw-rewards-light-width);
    height: var(--modal-draw-rewards-light-width);
    background: var(--modal-draw-rewards-light-img);
    display: flex;
    align-items: center;
    justify-content: center
}

.lucky-ton-rewards-modal .container .content .rewards-info .rewrads-info-img .bgi {
    width: var(--modal-draw-rewards-ton-width);
    height: var(--modal-draw-rewards-ton-width);
    background-image: url(/imgs/ton.png)
}

.lucky-ton-rewards-modal .container .content .rewards-info .rewards-info-text {
    margin-top: -.3rem;
    color: var(--modal-draw-rewards-text-color)
}

.lucky-ton-rewards-modal .container .content .rewards-min-withdraw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .03rem;
    font-weight: 700;
    font-size: .16rem;
    line-height: .26rem;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    margin-bottom: .08rem
}

.lucky-ton-rewards-modal .container .content .rewards-min-withdraw img {
    width: .18rem;
    height: .18rem
}

.lucky-ton-rewards-modal .container .close-btn {
    position: absolute;
    bottom: -.5rem;
    right: 50%;
    transform: translate(50%)
}

.lucky-ton-rewards-modal .container .close-btn .close-icon {
    display: block;
    width: .24rem;
    height: .24rem;
    background-image: url(/imgs/rewards_close.png);
    background-size: contain;
    background-repeat: no-repeat
}

.shop-popup {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent
}

.shop-popup .shop-popup-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--signin-popup-height);
    background: var(--signin-popup-bg);
    border-top-left-radius: .12rem;
    border-top-right-radius: .12rem;
    padding-top: .48rem
}

.shop-popup .shop-popup-container .shop-icon,.shop-popup .shop-popup-container .shop-title {
    display: none
}

.shop-popup .shop-popup-container .shop-popup-close {
    position: absolute;
    right: .12rem;
    top: .12rem;
    width: .2rem;
    height: .2rem;
    background-image: var(--signin-popup-close-img);
    z-index: 1
}

.shop-popup .shop-popup-container .shop-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: initial
}

.shop-popup .shop-popup-container .shop-popup-content .sigin-icon {
    position: absolute;
    left: 50%;
    top: var(--signin-popup-title-bg-img-top);
    transform: translate(-50%);
    width: var(--signin-popup-title-bg-img-width);
    height: var(--signin-popup-title-bg-img-height);
    background-image: var(--signin-popup-title-bg-img)
}

.shop-popup .shop-popup-container .shop-popup-content .sigin-title {
    margin: var(--signin-popup-title-text-margin);
    font-weight: 700;
    font-size: var(--signin-popup-title-text-font-size);
    line-height: .2rem;
    letter-spacing: 0%;
    color: var(--signin-popup-title-text-color);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem
}

.shop-popup .shop-popup-container .shop-popup-content .sigin-title .star {
    width: .16rem;
    height: .16rem;
    flex-shrink: 0;
    background: var(--signin-popup-title-star-bg)
}

.shop-popup .shop-popup-container .shop-list-title {
    display: var(--shop-popup-list-title-display)
}

.shop-popup .shop-popup-container .shop-list-container {
    width: 100%;
    padding-top: .34rem;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    gap: .24rem;
    font-size: .24rem;
    line-height: .36rem;
    color: #000
}

.shop-popup .shop-popup-container .shop-list-container .shop-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .14rem;
    padding: 0 .12rem .2rem;
    height: var(--shop-popup-list-height);
    overflow-y: auto
}

.shop-popup .shop-popup-container .shop-list-container .shop-list .list-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: .01rem solid #f48133;
    border-radius: .12rem;
    padding: .08rem .08rem .08rem .12rem;
    background: #faf7e8
}

.shop-popup .shop-popup-container .shop-list-container .shop-list .list-item .item-reward {
    display: flex;
    align-items: center;
    gap: .04rem;
    color: #f48133;
    line-height: .24rem;
    font-size: .22rem;
    font-weight: 400
}

.shop-popup .shop-popup-container .shop-list-container .shop-list .list-item .item-reward .bgi {
    background: var(--shop-popup-reward-img);
    width: var(--shop-popup-reward-img-width);
    height: var(--shop-popup-reward-img-width)
}

.shop-popup .shop-popup-container .shop-list-container .shop-list .list-item .item-price {
    display: flex;
    align-items: center
}

.shop-popup .shop-popup-container.tonFortune-popup-container {
    padding-top: 0
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-icon {
    display: block;
    position: absolute;
    left: 50%;
    top: var(--signin-popup-title-bg-img-top);
    transform: translate(-50%);
    width: var(--signin-popup-title-bg-img-width);
    height: var(--signin-popup-title-bg-img-height);
    background-image: var(--signin-popup-title-bg-img)
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-title {
    margin: var(--signin-popup-title-text-margin);
    font-weight: 700;
    font-size: var(--signin-popup-title-text-font-size);
    line-height: .2rem;
    letter-spacing: 0%;
    color: var(--signin-popup-title-text-color);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-title .star {
    width: .16rem;
    height: .16rem;
    flex-shrink: 0;
    background: var(--signin-popup-title-star-bg)
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-list-container {
    padding-top: .28rem
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-list-container .shop-list {
    flex-direction: row;
    flex-wrap: wrap
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-list-container .shop-list .list-item {
    flex-direction: column;
    width: 1.6rem;
    gap: .12rem;
    background: transparent;
    border: none
}

.shop-popup .shop-popup-container.tonFortune-popup-container .shop-list-container .shop-list .list-item .item-reward {
    width: 100%;
    border: .08rem solid #1ab770;
    background: #fff;
    border-radius: .06rem;
    padding: .06rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .04rem;
    font-size: .16rem;
    box-shadow: 0 .04rem .067px #00000040;
    color: #222
}

.shop-popup-mask {
    position: fixed;
    background: #000c;
    inset: 0;
    z-index: 9
}

.sigin-popup {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent
}

.sigin-popup .sigin-popup-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--signin-popup-height);
    background: var(--signin-popup-bg);
    border-top-left-radius: .12rem;
    border-top-right-radius: .12rem
}

.sigin-popup .sigin-popup-container .sigin-popup-close {
    position: absolute;
    right: .12rem;
    top: .12rem;
    width: .2rem;
    height: .2rem;
    background-image: var(--signin-popup-close-img);
    z-index: 1
}

.sigin-popup .sigin-popup-container .sigin-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: initial
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-icon {
    position: absolute;
    left: 50%;
    top: var(--signin-popup-title-bg-img-top);
    transform: translate(-50%);
    width: var(--signin-popup-title-bg-img-width);
    height: var(--signin-popup-title-bg-img-height);
    background-image: var(--signin-popup-title-bg-img)
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-title {
    margin: var(--signin-popup-title-text-margin);
    font-weight: 700;
    font-size: var(--signin-popup-title-text-font-size);
    line-height: .2rem;
    letter-spacing: 0%;
    color: var(--signin-popup-title-text-color);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-title .star {
    width: .16rem;
    height: .16rem;
    flex-shrink: 0;
    background: var(--signin-popup-title-star-bg)
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .12rem;
    width: 100%;
    justify-content: center;
    padding: 0 .18rem;
    margin-bottom: .18rem
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item {
    flex: 0 0 calc(33.333% - .08rem);
    background: #faf7e8;
    border-radius: .06rem;
    display: flex;
    flex-direction: var(--signin-popup-item-flex);
    align-items: center;
    border: .01rem solid #fff;
    height: .86rem;
    position: relative;
    overflow: hidden
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .sigin-item-signed {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000000b2;
    display: flex;
    align-items: center;
    justify-content: center
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .sigin-item-signed .finish-icon {
    width: var(--signin-popup-item-finish-img-width);
    height: var(--signin-popup-item-finish-img-width);
    background: var(--signin-popup-item-finish-img)
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item:last-child {
    flex: 0 0 100%;
    max-width: 100%
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .item-header {
    font-weight: 700;
    font-size: .14rem;
    line-height: .26rem;
    letter-spacing: 0%;
    height: .26rem;
    color: #fff;
    text-align: center;
    width: 100%;
    border-radius: var(--signin-popup-item-header-radius)
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .item-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .item-icon {
    width: .42rem;
    height: .42rem;
    flex-shrink: 0;
    background-image: url(/imgs/sign_reward.png);
    margin: 0
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-list .sigin-item .item-rewards {
    color: var(--signin-popup-item-reward-text-color);
    font-size: .14rem;
    line-height: .2rem;
    margin-top: -.05rem
}

.sigin-popup .sigin-popup-container .sigin-popup-content .sigin-button {
    display: flex
}

.sigin-popup-mask {
    position: fixed;
    background: #000c;
    inset: 0;
    z-index: 9
}

.home-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--home-bg-img)
}

.home-container .home-header,.home-container .home-banner {
    width: 100%
}

.home-container .home-lucky {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center
}

.home-container .home-lucky .lucky-aureole {
    position: absolute;
    left: 50%;
    top: -.3rem;
    transform: translate(-50%);
    width: 100vw;
    height: 4.3rem;
    background-image: var(--grid-aureole-img);
    z-index: 0
}

.home-container .home-lucky .more-spins {
    z-index: 2;
    position: absolute;
    left: .08rem;
    top: .03rem;
    font-weight: 700;
    font-size: .1rem;
    line-height: .18rem;
    letter-spacing: 0px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.home-container .home-lucky .more-spins .more-spins-icon {
    width: var(--home-more-spins-width);
    height: var(--home-more-spins-height);
    background-image: var(--home-more-spins-img)
}

.home-container .home-lucky .more-spins>span {
    border: .01rem solid var(--home-more-spins-border-color);
    background: var(--home-more-spins-bg-color);
    border-radius: var(--home-more-spins-border-radius);
    padding: 0 .04rem;
    margin-top: -.12rem
}

.home-container .home-lucky .signin-icon {
    z-index: 2;
    position: absolute;
    right: .08rem;
    top: .09rem;
    width: var(--home-signin-width);
    height: var(--home-signin-height);
    background-image: var(--home-signin-img)
}

.home-container .home-lucky .coin-animation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 0
}

.home-container .home-nav {
    width: 100%
}