body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: #000;
}

#wrap {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}
#page_4 {
    -webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}


div, input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

#orientLayer {
    display: none;
}

@media screen and (min-aspect-ratio: 13/8) {
    #orientLayer {
        display: block;
        z-index: 10001
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center
}

.mod-orient-layer__icon-orient {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');
    display: inline-block;
    width: 67px;
    height: 109px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 67px;
    background-size: 67px
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff
}

#box {
    position: fixed;
    width: 750px;
    height: 1440px;
    left: 0;
    top: 0;
    /* overflow: hidden; */
    z-index: 2;
}

#loading {
    opacity: 0;
    width: 750px;
    height: 1440px;
    position: absolute;
    left: 0;
    top: 0;
}


div[id^=title_] {
    position: absolute;
    left: 90px;
    top: 275px;
    width: 531px;
    /* font-size: 40px;     */
    line-height: 40px;
    font-size: 36px;
    font-weight: bold;
    text-align: justify;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#result {
    position: absolute;
    z-index: 999;
    width: 750px;
    height: 1240px;
    left: 0;
    top: 0;
    display: none;
}



input, textarea {
    border: 0;
    outline: 0;
    background-color: transparent;
    appearance: none;
    /*下拉框去掉右侧图标*/
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    text-align: left;
    /*resize: none;*/
    /*box-sizing: border-box;*/
}

#inputName{
    position: absolute;
    left: 211px;
    top: 683px;
    width: 356px;
    height: 61px;
    color: #fff;
    font-size: 45px;
}
#inputContact{
    position: absolute;
    left: 217px;
    top: 615px;
    width: 346px;
    height: 61px;
    color: #fff;
    font-size: 26px;
}

input::-webkit-input-placeholder {
    color: #fff;
}

#page_8{
    pointer-events: none;
}
#music_box {
    position: absolute;
    z-index: 999;
    display: none;
}

#music_on {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
}

#music_off {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    display: none;
}


* {
    padding: 0;
    margin: 0;
    border: 0;
}

div.panel {
    width: 750px;
    height: 1440px;
    display: block;
    background: rgba(255, 255, 255, 0.5);
}

div.btn {
    width: 200px;
    height: 50px;
    background: green;
    line-height: 50px;
    text-align: center;
}

div.page {
    /* width: 750px;
    height: 1440px; */
    left: -32px;
    top: 55px;
    /* left: -4%;
    top: 3%; */
    display: block;
    /* background: rgba(255, 255, 255, 0.5); */
}
.button_1 {
    position: absolute;
    left: 412px;
    top: 1299px;
    width: 215px;
    height: 64px;
    z-index: 9;
  }
  .button_2 {
    position: absolute;
    left: 123px;
    top: 1301px;
    width: 215px;
    height: 65px;
    z-index: 8;
  }
  #result{
    position: absolute;
    width: 750px;
    height: 1440px;
    background: #000;
  }

  .result_tips {
    position: absolute;
    left: 423px;
    top: 1218px;
    width: 177px;
    height: 22px;
    z-index: 6;
  }
  
  .right{
    transform: translate3d(0, 0, 0);

    animation: scalecolor1 0.1s linear both;
    transform-origin: left;
    

  }
  .wrong{
    transform: translate3d(0, 0, 0);

    animation: scalecolor 0.1s linear both;
    transform-origin: left;


}
.right0{
    transform: translate3d(0, 0, 0);

    animation: scale1 0.1s linear both;
    transform-origin: right;
 }
.wrong0{
    transform: translate3d(0, 0, 0);

    animation: scale1 0.1s linear both;
    transform-origin: right;


}
.justRight{
    transform: translate3d(0, 0, 0);

    filter: invert(55%) sepia(95%) saturate(1968%) hue-rotate(75deg) brightness(125%) contrast(98%);
  
}

@keyframes scale1 {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.88);
        
    }
    100%{
        transform: scale(1);
       
    }
    
  }
  @keyframes scalecolor {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.88);
        
    }

    99%{
        filter:'none'
    }
    100%{
        transform: scale(1);
        filter: invert(40%) sepia(22%) saturate(6233%) hue-rotate(276deg) brightness(105%) contrast(109%);


    }
    
  }
  @keyframes scalecolor1 {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.88);
        
    }
    99%{
        filter:'none'
    }
    100%{
        transform: scale(1);

        filter: invert(55%) sepia(95%) saturate(1968%) hue-rotate(75deg) brightness(125%) contrast(98%);


    }
    
  }
  .black{
    filter:  brightness(0);
  }


  #container_video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* display: none; */
}
#video1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
#video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    object-fit: fill;
}
#video_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    object-fit: fill;
    z-index: 2;
}
#root2 {
    /*overflow: hidden;*/
    width: 750px;
    height: 1440px;
    /* pointer-events: none; */
}
#page_7{
    background: rgba(0,0,0,0.7);
}
.result_bg{
    position: absolute;
    z-index: 1;
}
#mergePic{
    position: absolute;
    z-index: 2;
    top: 70px;
}
.sprite1{
    position: absolute;
    left: 31px;
    top: -30px;
    width:350px; 
    height:350px;
    background: url('./star_2-0.png') no-repeat;
    -webkit-animation: sprite_ani1 1s step-start infinite alternate;
    animation: sprite_ani1 1s step-start infinite alternate;
    overflow: hidden;
    z-index: 2;
    pointer-events: none !important;

}

@keyframes sprite_ani1 {
    0%{background-position: -1px -1px};
    4%{background-position: -1px -353px;}
    8%{background-position: -1px -705px;}
    12%{background-position:-1px -1057px;}
    16%{background-position:-1px -1409px;}
    20%{background-position:-353px -1px;}
    25%{background-position:-705px -1px;}
    29%{background-position:-1057px -1px;}
    33%{background-position:-1409px -1px;}
    37%{background-position:-353px -353px;}
    41%{background-position:-353px -705px;}
    45%{background-position:-353px -1057px;}
    50%{background-position:-353px -1409px;}
    54%{background-position:-705px -353px;}
    58%{background-position:-1057px -353px;}
    62%{background-position:-1409px -353px;}
    66%{background-position:-705px -705px;}
    70%{background-position:-705px -1057px;}
    75%{background-position:-705px -1409px;}
    79%{background-position:-1057px -705px;}
    83%{background-position:-1409px -705px;}
    87%{background-position:-1057px -1057px;}
    91%{background-position:-1057px -1409px;}
    95%{background-position:-1409px -1057px;}
    100%{background-position:-1409px -1409px;}
}

.sprite2{
    position: absolute;
    left: 21px;
    top: 18px;
    width:350px; 
    height:350px;
    background: url('./star_3-0.png') no-repeat;
    -webkit-animation: sprite_ani2 1s step-start infinite alternate;
    animation: sprite_ani2 1s step-start infinite alternate;
    overflow: hidden;
    z-index: 9;
    pointer-events: none !important;

    

}

@keyframes sprite_ani2 {
    0% {background-position: -1px -1px;}
    4% {background-position: -1px -353px;}
    8% {background-position: -1px -705px;}
    12%{background-position: -1px -1409px;}
    16%{background-position: -1px -1057px;}
    20%{background-position: -353px -1px;}
    25%{background-position: -1057px -1px;}
    29%{background-position: -705px -1px;}
    33%{background-position: -1409px -1px;}
    37%{background-position: -353px -353px;}
    41%{background-position: -353px -705px;}
    45%{background-position: -353px -1057px;}
    50%{background-position: -705px -353px;}
    54%{background-position: -353px -1409px;}
    58%{background-position: -1057px -353px;}
    62%{background-position: -1409px -353px;}
    66%{background-position: -705px -705px;}
    70%{background-position: -705px -1057px;}
    75%{background-position: -705px -1409px;}
    79%{background-position: -1409px -705px;}
    83%{background-position: -1057px -705px;}
    87%{background-position: -1057px -1057px;}
    91%{background-position: -1057px -1409px;}
    100%{background-position: -1409px -1057px;}
 
}
.sprite3{
    position: absolute;
    left: -44px;
    top: -59px;
    width: 350px;
    height: 350px;
    background: url('./star_4.png') no-repeat;
    -webkit-animation: sprite_ani3 1s step-start infinite alternate;
    animation: sprite_ani3 1s step-start infinite alternate;
    overflow: hidden;
    z-index: 9;
    pointer-events: none !important;

}

@keyframes sprite_ani3 {
0%{background-position: -1px -1px;}
4%{background-position: -1px -353px;}
8%{background-position: -1px -705px;}
12%{background-position: -1px -1409px;}
16%{background-position: -1px -1057px;}
20%{background-position: -353px -1px;}
25%{background-position: -1057px -1px;}
29%{background-position: -705px -1px;}
33%{background-position: -1409px -1px;}
37%{background-position: -353px -353px;}
41%{background-position: -353px -705px;}
45%{background-position: -353px -1057px;}
50%{background-position: -705px -353px;}
54%{background-position: -353px -1409px;}
58%{background-position: -1057px -353px;}
62%{background-position: -1409px -353px;}
66%{background-position: -705px -705px;}
70%{background-position: -705px -1057px;}
75%{background-position: -705px -1409px;}
79%{background-position: -1409px -705px;}
83%{background-position: -1057px -705px;}
87%{background-position: -1057px -1057px;}
91%{background-position: -1057px -1409px;}
95%{background-position: -1409px -1057px;}
100%{background-position: -1409px -1409px;}
}

.sprite4{
    position: absolute;
    left: 14px;
    top: -60px;
    width: 350px;
    height: 350px;
    background: url('./star_1.png') no-repeat;
    -webkit-animation: sprite_ani4 1.5s step-start infinite alternate;
    animation: sprite_ani4 1.5s step-start infinite alternate;
    overflow: hidden;
    z-index: 9;
    pointer-events: none !important;

}
@keyframes sprite_ani4 {
0%{ background-position: -1px -1px;}
4%  { background-position: -1px -353px;}
8%  { background-position: -1px -705px;}
12%{ background-position: -1px -1409px;}
16%{ background-position: -1px -1057px;}
20%{ background-position: -353px -1px;}
25%{ background-position: -1057px -1px;}
29%{ background-position: -705px -1px;}
33%{ background-position: -1409px -1px;}
37%{ background-position: -353px -353px;}
41%{ background-position: -353px -705px;}
45%{ background-position: -353px -1057px;}
50%{ background-position: -705px -353px;}
54%{ background-position: -353px -1409px;}
58%{ background-position: -1057px -353px;}
62%{ background-position: -1409px -353px;}
66%{ background-position: -705px -705px;}
70%{ background-position: -705px -1057px;}
75%{ background-position: -705px -1409px;}
79%{ background-position: -1409px -705px;}
83%{ background-position: -1057px -705px;}
87%{ background-position: -1057px -1057px;}
91%{ background-position: -1057px -1409px;}
95%{ background-position: -1409px -1057px;}
100%{ background-position: -1409px -1409px;}
}

.pingmu_left{
    position: absolute;
    left: 588px;
    top: 1287px;
    background: url('./pingmu_left.png') no-repeat;
    -webkit-animation: pingmu_left 8s step-start infinite;
    animation: pingmu_left 8s step-start infinite;
    overflow: hidden;
    z-index: 9;
    /* display: none; */
}
@keyframes pingmu_left {
    0%{width:8px; height:9px; background-position: -246px -239px;}
2%{width:8px; height:9px; background-position: -246px -250px;}
5%{width:18px; height:9px; background-position: -234px -445px;}
7%{width:18px; height:9px; background-position: -234px -467px;}
10%{width:18px; height:9px; background-position: -234px -456px;}
13%{width:45px; height:28px; background-position: -204px -821px;}
15%{width:53px; height:28px; background-position: -132px -915px;}
18%{width:45px; height:28px; background-position: -204px -851px;}
21%{width:34px; height:9px; background-position: -218px -626px;}
23%{width:34px; height:9px; background-position: -218px -637px;}
26%{width:53px; height:28px; background-position: -187px -915px;}
28%{width:79px; height:46px; background-position: -137px -626px;}
31%{width:53px; height:42px; background-position: -1px -1051px;}
34%{width:70px; height:44px; background-position: -132px -869px;}
36%{width:70px; height:46px; background-position: -132px -821px;}
39%{width:79px; height:46px; background-position: -132px -773px;}
42%{width:87px; height:55px; background-position: -137px -569px;}
44%{width:95px; height:59px; background-position: -137px -508px;}
47%{width:95px; height:61px; background-position: -137px -445px;}
50%{width:104px; height:62px; background-position: -140px -239px;}
52%{width:104px; height:62px; background-position: -137px -381px;}
55%{width:113px; height:62px; background-position: -141px -76px;}
57%{width:113px; height:73px; background-position: -141px -1px;}
60%{width:117px; height:76px; background-position: -137px -303px;}
63%{width:126px; height:80px; background-position: -129px -1034px;}
65%{width:126px; height:80px; background-position: -129px -952px;}
68%{width:134px; height:80px; background-position: -1px -489px;}
71%{width:129px; height:98px; background-position: -1px -652px;}
73%{width:138px; height:98px; background-position: -1px -101px;}
76%{width:129px; height:98px; background-position: -1px -752px;}
78%{width:134px; height:79px; background-position: -1px -571px;}
81%{width:134px; height:90px; background-position: -1px -397px;}
84%{width:134px; height:94px; background-position: -1px -301px;}
86%{width:126px; height:97px; background-position: -1px -952px;}
89%{width:137px; height:98px; background-position: -1px -201px;}
92%{width:138px; height:98px; background-position: -1px -1px;}
94%{width:129px; height:98px; background-position: -1px -852px;}
97%{width:120px; height:97px; background-position: -132px -674px;}
100%{width:112px; height:97px; background-position: -141px -140px;}
}
.pingmu_right{
    position: absolute;
    left: 20px;
    top: 1297px;
    background: url('./pingmu_right.png') no-repeat;
    -webkit-animation: pingmu_right 10s step-start infinite;
    animation: pingmu_right 10s step-start infinite;
    overflow: hidden;
    z-index: 9;
    /* display: none; */
}
@keyframes pingmu_right {
    0%{width:13px; height:4px; background-position: -935px -76px;}
2%{width:13px; height:7px; background-position: -712px -158px;}
5%{width:25px; height:9px; background-position: -37px -245px;}
8%{width:34px; height:10px; background-position: -970px -131px;}
11% {width:34px; height:9px; background-position: -1px -245px;}
14% {width:42px; height:10px; background-position: -657px -216px;}
17% {width:50px; height:24px; background-position: -970px -105px;}
20% {width:50px; height:27px; background-position: -970px -76px;}
22% {width:59px; height:28px; background-position: -961px -148px;}
25% {width:66px; height:29px; background-position: -589px -216px;}
28% {width:59px; height:28px; background-position: -961px -178px;}
31% {width:73px; height:28px; background-position: -935px -46px;}
34% {width:73px; height:42px; background-position: -898px -209px;}
37% {width:82px; height:43px; background-position: -935px -1px;}
40% {width:91px; height:44px; background-position: -712px -209px;}
42% {width:91px; height:44px; background-position: -805px -209px;}
45% {width:101px; height:56px; background-position: -609px -158px;}
48% {width:101px; height:59px; background-position: -858px -148px;}
51% {width:110px; height:62px; background-position: -858px -84px;}
54% {width:118px; height:61px; background-position: -738px -84px;}
57% {width:118px; height:60px; background-position: -738px -147px;}
60% {width:135px; height:74px; background-position: -452px -165px;}
62% {width:127px; height:72px; background-position: -609px -84px;}
65% {width:135px; height:79px; background-position: -472px -84px;}
68% {width:142px; height:81px; background-position: -647px -1px;}
71% {width:142px; height:81px; background-position: -791px -1px;}
74% {width:142px; height:80px; background-position: -164px -165px;}
77% {width:151px; height:81px; background-position: -494px -1px;}
80% {width:142px; height:80px; background-position: -328px -83px;}
82% {width:151px; height:80px; background-position: -341px -1px;}
85% {width:142px; height:81px; background-position: -308px -165px;}
88% {width:165px; height:79px; background-position: -174px -1px;}
91% {width:158px; height:81px; background-position: -168px -82px;}
94% {width:161px; height:80px; background-position: -1px -163px;}
97% {width:165px; height:79px; background-position: -1px -82px;}
100% {width:171px; height:79px; background-position: -1px -1px;}
}
.show_3,.show_25,.show_26,.show_27{
    opacity: 0;
}
.play_video{
    position: absolute;
    z-index: 2;
    width: 750px;
    height: 1440px;

}
.star{
    opacity: 0.5;
}

.scale{
    animation: scaleAni 2s infinite linear both;
    -webkit-animation: scaleAni 2s infinite linear both;

}
.fadeIn{
    opacity: 0;
    animation: fadeIn 0.4s linear both;
    -webkit-animation: fadeIn 0.4s linear both;
}
@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
  
    
  }
.fadeInOut{
    animation: fadeInOut 2s infinite linear both;
    -webkit-animation: fadeInOut 2s infinite linear both;

}
.fadeInOut2{
    animation: fadeInOut 1s 2 linear both;
    -webkit-animation: fadeInOut 1s 2 linear both;
 
}
.scaleIn{
    animation: scaleIn 0.5s ease-out both;
    -webkit-animation: scaleIn 0.5s ease-out both;
    transform-origin: 350px 750px;
}
.cloudFly{
    animation: cloudFly 5s 1s infinite linear both;
    -webkit-animation: cloudFly 5s 1s infinite linear both;

}
.fadeInbottom{
    animation: fadeInbottom 1s 0.5s linear both;
    -webkit-animation: fadeInbottom 1s 0.5s linear both;

}
@keyframes fadeInbottom {
    0%{
        transform: translate(0,100%);

    }
  
    100%{
        transform: translate(0%,0)

    }
    
  }
  .fadeInRight{
    animation: fadeInRight 1s 0.5s linear both;
    -webkit-animation: fadeInRight 1s 0.5s linear both;

}
@keyframes fadeInRight {
    0%{
        transform: translate(100%,0);

    }
  
    100%{
        transform: translate(0%,0)

    }
    
  }
  .rotate{
    animation: rotate 12s 1s  linear infinite both;
    -webkit-animation: rotate 12s 1s  linear infinite both;

}
@keyframes rotate {
    0%{
        transform: rotate(0);

    }
  
    100%{
        transform: rotate(360deg)

    }
    
  }
  .updown{
    animation: upanddown 6s 2s  linear infinite both;
    -webkit-animation: upanddown 6s 2s  linear infinite both;

}

  .opacity7{
    opacity: 0.7;
  }
@keyframes cloudFly {
    0%{
        transform: translate(0,0);
        opacity: 1;

    }
  
    100%{
        transform: translate(-150%,150%);
        opacity: 0;

    }
    
  }
@keyframes scaleIn {
    0%{
        transform: scale(0) translate3d(0,0,0);
        opacity: 0;

    }
    50%{
        opacity: 0.2;
    }
  
    100%{
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;

    }
    
  }
@keyframes scaleAni {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.9);
        
    }
    100%{
        transform: scale(1);
    }
    
  }

  @keyframes fadeInOut {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;

    }
    
  }

  #plane {
    width: 102px;
    height: 43px;
    display: block;
    background-size: contain;
    /* background-image: url('../images/plane.png'); */
    background-repeat: no-repeat;
 
}
.planeimg{
    width: 102px;
    height: 43px;
    -webkit-animation: upanddown 3s infinite linear both;
    animation: upanddown 3s infinite linear both;
}
@keyframes upanddown {
    0%{
       transform: translateY(0px);
    }
  
    50%{
       transform: translateY(-5px);

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


    }
}
.slideOut{
    -webkit-animation: slideOut 0.8s linear both;
    animation: slideOut 0.8s linear both;
}
@keyframes slideOut {
    0%{
       transform: translate(0px,0px) scale(1);
       opacity: 1;
    }
  

    100%{
       transform: translate(230px,230px) scale(1.4);
       opacity: 0;



    }
}
.bg_1,.bg_2,.bg_3,.bg_4,.bg_5,.bg_6,.bg_7,.bg_8,.bg_9,.bg_10{
    pointer-events: none !important;
    /* left: -8% !important;
    top: 8% !important; */
}
.bg_4_xq{
    left: -43px;
    top: 836px;
    position: fixed;
    transform: scale(0);
}
.bg_3_xq{
    left: -100px;
    top: 669px;
    position: fixed;
    transform: scale(0);
}
.bg_6_xq{
    left: -75px;
    top: 1111px;
    position: fixed;
    transform: scale(0);
}
.bg_1_xq{
    left: -64px;
    top: 819px;
    position: fixed;
    transform: scale(0);
}
.wangge_box{
    overflow: hidden;
}
.wangge{
    -webkit-animation: wangge 3s step-start infinite;
    animation: wangge 3s step-start infinite;
    background: url('./wangge.png') no-repeat;
   
}

@keyframes wangge {
    0%   { background-position: -1px -1px;}
    4%   { background-position: -752px -1px;}
    8%   { background-position: -1px -140px;}
    12% { background-position: -1px -279px;}
    16% { background-position: -752px -140px;}
    20%{ background-position: -752px -279px;}
    25%{ background-position: -752px -418px;}
    29%{ background-position: -1px -418px;}
    33%{ background-position: -1px -557px;}
    37%{ background-position: -752px -557px;}
    41%{ background-position: -1px -696px;}
    45%{ background-position: -752px -696px;}
    50%{ background-position: -752px -835px;}
    54%{ background-position: -1px -835px;}
    58%{ background-position: -1px -974px;}
    62%{ background-position: -752px -974px;}
    66%{ background-position: -1px -1113px;}
    70%{ background-position: -752px -1113px;}
    75%{ background-position: -1px -1252px;}
    79%{ background-position: -1px -1391px;}
    83%{ background-position: -752px -1252px;}
    87%{ background-position: -752px -1391px;}
    91%{ background-position: -1px -1530px;}
    95%{ background-position: -752px -1530px;}
    100%{ background-position: -1px -1669px;}
}
#page_4{
    overflow-y: scroll;
}

.longpage{
        /* background: url('../images/bg_1.jpg'); */
        /* display: none !important; */
        background: rgba(0, 0, 0, 0);
    /* background: linear-gradient(rgba(0,0,0,0.3),rgba(244,244,244,0.3)) */
}
.mask_bg{
    position: fixed !important;
}

.loading_1 {
    position: absolute;
    left: 258px;
    top: 746px;
    width: 228px;
    height: 30px;
    z-index: 8;
  }
  .loading_2 {
    position: absolute;
    left: 211px;
    top: 624px;
    width: 328px;
    height: 101px;
    z-index: 7;
  }
  .loading_3 {
  position: absolute;
  left: 306px;
  top: 478px;
  width: 139px;
  height: 136px;
  z-index: 6;
}


div[id^= "bg_topic_" ]{
    pointer-events: none;
}
div[id^= "bg_topic_" ]>image{
    pointer-events: none;
}
canvas{
    position: absolute;
    z-index: 1;
}
.press_tips2,.press_tips1{
    pointer-events: none;

}
.notouch{
    pointer-events: none;

}
.isright{
    filter: invert(55%) sepia(95%) saturate(1968%) hue-rotate(75deg) brightness(125%) contrast(98%);
}
#page_6{
    background: rgba(0,0,0,0.9);
}