@font-face {
    font-family: "jcyt";
    src: url("../fonts/jcyt.ttf?v=202601211612");
}

@font-face {
    font-family: "maru";
    src: url("../fonts/maru.ttf?v=202601211612");
}

.font_preload {
    position: absolute;
    left: -999vw;
    opacity: 0;
}

.font_maru {
    font-family: "maru";
}

.font_jcyt {
    font-family: "jcyt";
}

/** 动画 **/
@keyframes fadeInRightSmall {
    0% {
        opacity: 0;
        transform: translate3d(10vw, 0, 0)
    }

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

.fadeInRightSmall {
    animation-name: fadeInRightSmall
}

@keyframes fadeOutRightSmall {
    100% {
        opacity: 0;
        transform: translate3d(10vw, 0, 0)
    }

    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeOutRightSmall {
    animation-name: fadeOutRightSmall
}

@keyframes fadeInLeftSmall {
    0% {
        opacity: 0;
        transform: translate3d(-10vw, 0, 0)
    }

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

.fadeInLeftSmall {
    animation-name: fadeInLeftSmall
}

@keyframes fadeOutLeftSmall {
    100% {
        opacity: 0;
        transform: translate3d(-10vw, 0, 0)
    }

    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeOutLeftSmall {
    animation-name: fadeOutLeftSmall
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        transform: translate3d(0, 10vw, 0)
    }

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

.fadeInUpSmall {
    animation-name: fadeInUpSmall
}

@keyframes fadeInUpSmaller {
    0% {
        opacity: 0;
        transform: translate3d(0, 2vw, 0)
    }

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

.fadeInUpSmaller {
    animation-name: fadeInUpSmaller
}

@keyframes fadeInDownSmall {
    0% {
        opacity: 0;
        transform: translate3d(0, -10vw, 0)
    }

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

.fadeInDownSmall {
    animation-name: fadeInDownSmall
}

@keyframes zoomInSmall {
    0% {
        opacity: 0;
        transform: none;
    }

    to {
        opacity: 1;
        transform: scale(1.1, 1.1)
    }
}

.zoomInSmall {
    animation-name: zoomInSmall
}

@keyframes scaleInBig {
    0% {
        opacity: 0;
        transform: scale(1.5, 1.5)
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.scaleInBig {
    animation-name: scaleInBig
}

@keyframes zoomOutBig {
    0% {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scale(2.5, 2.5)
    }
}

.zoomOutBig {
    animation-name: zoomOutBig
}

@keyframes rotateAni {
    0% {
        transform: none;
    }

    100% {
        transform: rotateZ(359deg);
    }
}

.rotateAni {
    animation-name: rotateAni;
    animation-timing-function: linear;
}

@keyframes upDownAni {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: translateY(-2vw)
    }
}

.upDownAni {
    animation-name: upDownAni;
    animation-timing-function: linear;
}

@keyframes downUpAni {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: translateY(2vw)
    }
}

.downUpAni {
    animation-name: downUpAni;
    animation-timing-function: linear;
}

@keyframes upDownBigAni {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: translateY(-4vw)
    }
}

.upDownBigAni {
    animation-name: upDownBigAni;
    animation-timing-function: linear;
}

@keyframes leftRightAni {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: translateX(2vw)
    }
}

.leftRightAni {
    animation-name: leftRightAni;
    animation-timing-function: linear;
}

@keyframes pulseBig {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.06, 1.06, 1.06);
        transform: scale3d(1.06, 1.06, 1.06)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulseBig {
    -webkit-animation-name: pulseBig;
    animation-name: pulseBig
}

@keyframes pulseBiger {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulseBiger {
    -webkit-animation-name: pulseBiger;
    animation-name: pulseBiger
}

@keyframes pulseSmall {
    0% {
        -webkit-transform: none;
        transform: none
    }

    50% {
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform: scale3d(1.02, 1.02, 1.02)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.pulseSmall {
    -webkit-animation-name: pulseSmall;
    animation-name: pulseSmall
}

@keyframes giftSwingAni {

    0%,
    50%,
    100% {
        transform: none;
    }

    25% {
        transform: rotateZ(-2.5deg);
    }

    75% {
        transform: rotateZ(2.5deg);
    }
}

.giftSwingAni {
    animation-name: giftSwingAni;
}

@keyframes starLightAni {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scaleY(-1);
    }
}

.starLightAni {
    animation-name: starLightAni;
    animation-timing-function: steps(1);
}

/**page**/
/**popTop**/
/**popTop**/
.popTop {
    background: none;
    pointer-events: none;
}

.btn_music {
    width: 7.037vw;
    height: 7.037vw;
    right: 3.6111vw;
    top: 5.8333vw;
    background-image: url(../images/enter/btn_music.png?v=202606151702);
    pointer-events: all;
    display: none;
}

.btn_music.play {
    animation: rotateAni 2s linear both infinite;
}

@keyframes playBgm {

    0%,
    100% {
        transform: scaleY(0);
    }

    50% {
        transform: scaleY(1);
    }
}

.btn_music span {
    display: block;
    width: 0.53vw;
    height: 4.80vw;
    background: #fff;
    position: absolute;
    border-radius: 0.27vw;
    left: 50%;
    margin-left: -0.27vw;
    top: 50%;
    margin-top: -2.4vw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.btn_music span:nth-child(1) {
    margin-left: -2.40vw;
    animation-delay: 0s;
    transform: scaleY(0.3);
}

.btn_music span:nth-child(2) {
    margin-left: -1.33vw;
    animation-delay: 0.2s;
    transform: scaleY(0.6);
}

.btn_music span:nth-child(3) {
    animation-delay: 0.4s;
}

.btn_music span:nth-child(4) {
    margin-left: 0.80vw;
    animation-delay: 0.6s;
    transform: scaleY(0.6);
}

.btn_music span:nth-child(5) {
    margin-left: 1.87vw;
    animation-delay: 0.8s;
    transform: scaleY(0.3);
}

.btn_music.play span {
    animation-name: playBgm;
}

.page_canvasBox {
    left: 0;
    top: 0;
    transform: translate3d(0);
}

.page_canvasBox canvas {
    width: 100%;
    height: 100%;
}

.page {
    /* background-image: linear-gradient(to bottom, rgba(34, 23, 44, .82), rgba(34, 23, 44, 0) 54%), linear-gradient(to bottom, rgba(34, 23, 44, .76), rgba(34, 23, 44, 0) 78.6%); */
    background-size: 100% 100%;
    background-color: #fff;
}


/***page0***/

/* .gameRes_bg {
    width: 160vw;
    height: 226.67vw;
    left: 50%;
    margin-left: -80vw;
    top: 0;
    background-image: url('../images/enter/gameRes_bg.jpg?v=202606151702');
} */

.load_bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.load_bg>.page_decor_inner {
    background-size: 100% 100%;
    background-position: center top;
    background-image: url(../images/enter/load/1.png?v=202606151702);
}

.page_bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-image: url(../images/enter/page_bg.jpg?v=202606151702);
}

.page_bgMask {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .2);
}

.page_logo {
    width: 26.27vw;
    height: 7.73vw;
    left: 5vw;
    top: 5vw;
    background-image: url(../images/logo.png?v=202606151702)
}



.page-container .page0 {
    display: block;
}


@keyframes dotAni {

    0%,
    100% {
        width: 0;
    }

    25% {
        width: 1vw;
    }

    50% {
        width: 2.1vw;
    }

    75% {
        width: 4vw;
    }
}

.dotAni {
    animation-name: dotAni;
    animation-timing-function: steps(1);
}

.page0_txt {
    width: 52vw;
    height: 67.47vw;
    left: 50%;
    margin-left: -26vw;
    top: 45.33vw;

}

.p0Txt_inner {
    width: 100%;
    height: 9vw;
    background-size: 52vw 67.47vw;
    background-image: url(../images/enter/loadTxt.png?v=202512151830);
    background-repeat: no-repeat;
    background-position: center;
    /* background-color: red; */
}

.page0_txt1 {
    background-position: center 0%;
}

.page0_txt2 {
    background-position: center -10vw;
}

.page0_txt3 {
    margin-top: 3vw;
    background-position: center -24vw;
}

.page0_txt4 {
    background-position: center -34vw;
}

.page0_txt5 {
    margin-top: 3vw;
    background-position: center -48.5vw;
}

.page0_txt6 {
    background-position: center -58.5vw;
}

.page0_loadingBarBox {
    width: 44.6296vw;
    height: 6.9444vw;
    left: 50%;
    margin-left: -22.3148vw;
    top: 50%;
    margin-top: -8vw;
    box-sizing: border-box;
    padding: 0.9259vw;
    display: none;
    background-image: url(../images/enter/page0_loadingBarBg.png?v=202606151702)
}

.loaded .page0_loadingBarBox {
    display: none !important;
}

.page0_loadingBar {
    width: 0;
    height: 100%;
    background: url(../images/enter/page0_loadingBar.png?v=202606151702) left center/auto 4.1vw repeat-x;
}

.page0_loadingDot {
    width: 3.4259vw;
    height: 1.0185vw;
    left: 50%;
    margin-left: 6.2037vw;
    top: 50%;
    margin-top: 8.8vw;
    background-image: url(../images/enter/page0_loadingDot.png?v=202606151702);
    background-size: auto 100%;
    background-position: left top;
    display: none;
}

.loading_barBox {
    width: 60vw;
    height: 3vw;
    left: 50%;
    margin-left: -30vw;
    top: 60vw;
    background-color: #fff;
    border-radius: 2vw;
    overflow: hidden;
}

.loading_bar {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #f27140;
}

.loaded .loading_barBox {
    display: none !important;
}

.loaded .page0_loadingDot {
    display: none !important;
}



.page0_txt {
    display: none;
}

.loaded .page0_txt {
    display: block;
}

.page0_loadingText {
    width: 13.7963vw;
    height: 4.1667vw;
    left: 50%;
    margin-left: -9.537vw;
    top: 50%;
    margin-top: 7vw;
    display: none;
}

.loaded .page0_loadingText {
    display: none !important;
}

.page0_loadingText>.page_decor_inner {
    background-image: url(../images/enter/page0_loadingText.png?v=202606151702)
}


.loadingBallAni {
    transform-origin: center center;
    animation-name: loadingBallAni;
}



.page0_btnBox {
    width: 24vw;
    height: 24vw;
    left: 50%;
    margin-left: -12vw;
    top: 50%;
    margin-top: 22.8981vw;
    display: none;
    pointer-events: all;
}

.page0_btnBox .page_decor {
    pointer-events: none;
}

.loaded .page0_btnBox {
    display: block;
}

@keyframes page0BtnAni {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.5, 1.5);

    }

    99.99% {
        opacity: 0;
        transform: scale(3, 3);
    }
}

.page0BtnAni {
    animation-name: page0BtnAni;
}

.page0_btnDecor1 {
    width: 10vw;
    height: 10vw;
    left: 50%;
    margin-left: -5vw;
    top: 50%;
    margin-top: -5vw;
}

.page0_btnDecor1>.page_decor_inner {
    border-radius: 50%;
    background: rgba(252, 255, 255, 1);
}

/* .page0_btnDecor2 {
    width: 11.2963vw;
    height: 11.2963vw;
    left: 50%;
    margin-left: -5.6481vw;
    top: 50%;
    margin-top: -5.6481vw;
}

.page0_btnDecor2>.page_decor_inner {
    background-image: url(../images/enter/page0_btnDecor2.png?v=202606151702)
}

.page0_btnDecor3 {
    width: 15.5556vw;
    height: 15.5556vw;
    left: 50%;
    margin-left: -7.7778vw;
    top: 50%;
    margin-top: -7.7778vw;
}

.page0_btnDecor3>.page_decor_inner {
    background-image: url(../images/enter/page0_btnDecor3.png?v=202606151702)
} */

.page0_btn.disable .page0_btnDecor1 {
    animation: none !important;
}

.jrdd {
    background-image: url(../images/enter/btn_music.png?v=202606151702);
    color: transparent;
    opacity: 0;
}