/*音乐*/
.music_blk{z-index:999;position:fixed;right:5px;top:5px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;}
.music_on{
            -webkit-animation:rotate 1.2s linear infinite;
            animation:rotate 1.2s linear infinite;
}
@keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
      }
}
@-webkit-keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
    }
}
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loadWrap{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../images/load.gif);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
}
.load{
  position: absolute;
  width: 50%;
  height: 0.5%;
  left: 25%;
  top: 60%;
  background-color: darkgray;
}
.loaded{
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0%;
  top: 0%;
  background-color: orange;
}
.page0{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../images/p0/p0.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  contain: strict;
}
.p0_1{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../images/p0/p0_1.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
}
.p0_2{
  position: absolute;
  width: 24%;
  height: 13.5%;
  left: 38%;
  top: 73%;
  background-image: url(../images/p0/tap.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
  animation: flash 2s linear infinite alternate;
  -webkit-animation: flash 2s linear infinite alternate;
}
#video1{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    contain: strict;
}
.slide_l{
    position: absolute;
    width:45%;
    height: 3.5%;
    left: 50%;
    top: 3.6%;
    background-image: url(../images/l_h.png);
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    animation: slide_l 2s linear infinite;
    -webkit-animation: slide_l 2s linear infinite;
}
@keyframes slide_l{
    0%{
        transform: translate3d(-10%,0,0);
        -webkit-transform: translate3d(-10%,0,0);
    }
    100%{
        transform: translate3d(10%,0,0);
        -webkit-transform: translate3d(10%,0,0);
    }
}
@-webkit-keyframes slide_l{
    0%{
        transform: translate3d(-10%,0,0);
        -webkit-transform: translate3d(-10%,0,0);
    }
    100%{
        transform: translate3d(10%,0,0);
        -webkit-transform: translate3d(10%,0,0);
    }
}
.slide_t{
    position: absolute;
    width:40%;
    height: 3.2%;
    left: 60%;
    top: 19.5%;
    background-image: url(../images/t_h.png);
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    animation: slide_t 2s linear infinite;
    -webkit-animation: slide_t 2s linear infinite;
}
@keyframes slide_t{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(0,-20%,0);
        -webkit-transform: translate3d(0,-20%,0);
    }
}
@-webkit-keyframes slide_t{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(0,-20%,0);
        -webkit-transform: translate3d(0,-20%,0);
    }
}
.swiper-container {
    position: absolute;
    width: 100%;
    height: 20%;
    top: 5%;
}
.swiper-slide {
    width: 23%;
    height: 50%;
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    will-change: transform;
}
.swiper-slide:nth-of-type(1){
   background-image: url(../images/1.png);
}
.swiper-slide:nth-of-type(2){
   background-image: url(../images/3.png);
}
.swiper-slide:nth-of-type(3){
   background-image: url(../images/2.png);
}
.swiper-slide:nth-of-type(4){
   background-image: url(../images/4.png);
}
.h_y{
   position: absolute;
   width: 80%;
   height: 2%;
   left: 10%;
   top: 16%;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-image: url(../images/yin.png);
   z-index: 1;    
}
.page1_1{
  position: absolute;
  width: 100%;
  height: 440%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1.jpg);
  contain: strict;
}
.p1_1_1{
  position: absolute;
  width: 9%;
  height: 11%;
  left: 9%;
  top: 6%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_4.png);
  animation: fadeInLeft 1s linear both;
  -webkit-animation: fadeInLeft 1s linear both;
  will-change: auto;
}
.p1_1_2{
  position: absolute;
  width: 18%;
  height: 3.2%;
  left: 24%;
  top: 6%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_3.png);
  opacity: 0;
  animation: bounceIn 1s 0.5s linear both;
  -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_1_3{
  position: absolute;
  width: 14%;
  height: 2.2%;
  left: 29%;
  top: 8.2%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_2.png);
  opacity: 0;
  animation: bounceIn 1s 1s linear both;
  -webkit-animation: bounceIn 1s 1s linear both;
}
.p1_1_4{
  position: absolute;
  width: 10%;
  height: 3.5%;
  left: 24%;
  top: 11%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_1.png);
  opacity: 0;
  animation: fadeInUp 1s 1.5s linear both;
  -webkit-animation: fadeInUp 1s 1.5s linear both; 
  will-change: auto;
}
.p1_1_5{
  position: absolute;
  width: 48%;
  height: 8%;
  left: 41%;
  top: 8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/img.png);
  opacity: 0;
  animation: fadeIn 1s 2s linear both;
  -webkit-animation: fadeIn 1s 2s linear both;   
}
.p1_1_6{
  position: absolute;
  width: 60%;
  height: 2.6%;
  left: 34%;
  top: 16%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_5.png);
  opacity: 0;
  animation: fadeIn 1s 2.5s linear both;
  -webkit-animation: fadeIn 1s 2.5s linear both; 
}
.p1_1_7{
  position: absolute;
  width: 18%;
  height: 1%;
  left: 9%;
  top: 24.5%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/icon1.png);
  animation: car_move 3s linear infinite;
  -webkit-animation: car_move 3s linear infinite;
  will-change: transform;
}
@keyframes car_move{
    0%{ transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0)
    }
    100%{
        transform: translate3d(350%,0,0);
        -webkit-transform: translate3d(350%,0,0)
    }
}
@-webkit-keyframes car_move{
    0%{ transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0)
    }
    100%{
        transform: translate3d(350%,0,0);
        -webkit-transform: translate3d(350%,0,0)
    }
}
.vid1{
    position: absolute;
    width: 82.5%;
    height: 7.9%;
    left: 8.8%;
    top: 25.6%;
    border-radius: 10px;
    overflow: hidden;
}
.vid1>video{
    position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_1_8{
  position: absolute;
  width: 38%;
  height: 1.5%;
  left: 16%;
  top: 62%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/q1_1.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_1_8{
    animation: bounceIn 1s linear both;
    -webkit-animation: bounceIn 1s linear both;
}
.p1_1_9{
  position: absolute;
  width: 24%;
  height: 1.4%;
  left: 50%;
  top: 63.2%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/q1_2.png);
     opacity: 0;
  will-change: transform;
}
.ani .p1_1_9{
    animation: bounceIn 1s 0.5s linear both;
    -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_1_10{
  position: absolute;
  width: 16%;
  height: 1.1%;
  left: 84%;
  top: 60.8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/q1_3.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_1_10{
    animation: fadeInLeft 0.5s 0.5s linear both;
    -webkit-animation: fadeInLeft 0.5s 0.5s linear both;
}
.p1_1_11{
  position: absolute;
  width: 18%;
  height: 1.3%;
  left: 0%;
  top: 65%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/q1_4.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_1_11{
    animation: fadeInRight 0.5s 0.5s linear both;
    -webkit-animation: fadeInRight 0.5s 0.5s linear both;
}
.p1_1_12{
  position: absolute;
  width: 19%;
  height: 3%;
  left: 25%;
  top: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/icon2.png);
  opacity: 0;
}
.p1_1_12.ani{
    animation: fadeInUp 1s linear both;
    -webkit-animation: fadeInUp 1s linear both;
}
.p1_1_13{
  position: absolute;
  width: 82.5%;
  height: 23.5%;
  left: 8.5%;
  top: 69%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_6.png)
}
.p1_1_14{
  position: absolute;
  width: 25%;
  height: 1.3%;
  left: 34.5%;
  top: 95.8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/btn.png)
}
.test1>div{
   position: absolute;
   width: 100%;
   height: 6%;
   left: 0%;
}
.test1 .t1_hand{
    position: absolute;
    width: 22%;
    height: 10%;
    left: 43%;
    top: 23%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.test1 .t1_true{
  position: absolute;
  width: 11%;
  height: 6%;
  left: -1%;
  top: 8%;
  background-image: url(../images/p1/icon3.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
}
.test1 .t1_1{
  top: 8%;
}
.test1 .t1_2{
  top: 14.5%;
}
.test1 .t1_3{
  top: 21%;
}
.test1 .t1_4{
  top: 27.5%;
}
.test1 .t1_5{
  top: 34%;
}
.test1 .t1_6{
  top: 40.5%;
}
.test1 .t1_7{
  top: 47%;
}
.test2>div{
   position: absolute;
   width: 100%;
   height: 6%;
   left: 0%;
}
.test2 .t2_true{
  position: absolute;
  width: 11%;
  height: 6%;
  left: 0%;
  top: 76%;
  background-image: url(../images/p1/icon3.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
}
.test2 .t2_1{
  top: 76%;
}
.test2 .t2_2{
  top: 82.5%;
}
.test2 .t2_3{
  top: 89%;
}
.test2 .t2_4{
  top: 95.5%;
}
.p1_echarts{
  display: none;
  position: absolute;
  width: 82.5%;
  height: 23.5%;
  left: 8.5%;
  top: 69%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/p1_6_1.png) 
}
.echarts_hand1{
    position: absolute;
    width: 22%;
    height: 10%;
    left: 56%;
    top: 115%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#echarts1{
  position: absolute;
  top: 12%;
  width: 100%;
  height: 40%;
}
#echarts2{
  position: absolute;
  top: 82%;
  width: 100%;
  height: 40%;
}
.page1_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 440%;
    background-image: url(../images/p2/p2.jpg?1);
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    contain: strict;
}
.p1_2_first{
  position: absolute;
  width: 100%;
  height: 18%;
  left: 0%;
  top: 4%;
}
.p1_2_1{
  position: absolute;
  width: 10%;
  height: 53%;
  left: 8%;
  top: 14%;
  background-image: url(../images/p2/p2.4.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
  animation: fadeInLeft 1s linear both;
  -webkit-animation: fadeInLeft 1s linear both;
  will-change: auto;
}
.p1_2_2{
  position: absolute;
  width: 25%;
  height: 26%;
  left: 20%;
  top: 8%;
  background-image: url(../images/p2/p2.1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: bounceIn 1s 0.5s linear both;
  -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_2_3{
  position: absolute;
  width: 12%;
  height: 18%;
  left: 20%;
  top: 49%;
  background-image: url(../images/p2/p2.2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeInUp 1s 1s linear both;
  -webkit-animation: fadeInUp 1s 1s linear both; 
  will-change: auto;
}
.p1_2_4{
  position: absolute;
  width: 50%;
  height: 55%;
  left: 45%;
  top: 16%;
  background-image: url(../images/p2/p2.7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
opacity: 0;
  animation: fadeIn 1s 1.5s linear both;
  -webkit-animation: fadeIn 1s 1.5s linear both;
}
.p1_2_5{
  position: absolute;
  width: 50%;
  height: 20%;
  left: 40%;
  top: 74%;
  background-image: url(../images/p2/p2.9.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 1s 2s linear both;
  -webkit-animation: fadeIn 1s 2s linear both; 
}
.p1_2_6{
  position: absolute;
  width: 20%;
  height: 1%;
  left: 10%;
  top: 23.8%;
  background-image: url(../images/p2/p2.8.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
  animation: panzer_move 3s linear infinite;
  -webkit-animation: panzer_move 3s linear infinite;
  will-change: transform;
}
@keyframes panzer_move{
    0%{ transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0)
    }
    100%{
        transform: translate3d(300%,0,0);
        -webkit-transform: translate3d(300%,0,0)
    }
}
@-webkit-keyframes panzer_move{
    0%{ transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0)
    }
    100%{
        transform: translate3d(300%,0,0);
        -webkit-transform: translate3d(300%,0,0)
    }
}
.vid2{
    position: absolute;
    width: 82.5%;
    height: 8.2%;
    left: 8.8%;
    top: 25%;
    border-radius: 10px;
    overflow: hidden;
}
.vid2>video{
   position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_2_7{
  position: absolute;
  width: 19%;
  height: 3%;
  left: 25%;
  top: 53%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/icon2.png);
  opacity: 0;
}
.p1_2_7.ani{
    animation: fadeInUp 1s linear both;
    -webkit-animation: fadeInUp 1s linear both;
}
.vid3{
    position: absolute;
    width: 78%;
    height: 6.5%;
    left: 11%;
    top: 55.5%;
    border-radius: 10px;
    overflow: hidden;
}
.vid3>video{
   position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_2_second{
    position: absolute;
    width: 100%;
    height: 8%;
    top: 69%;
}
.p1_2_8{
  position: absolute;
  width: 33%;
  height: 16%;
  left: 20%;
  top: 20%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p2/p2.12.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_2_8{
    animation: bounceIn 1s linear both;
    -webkit-animation: bounceIn 1s linear both;
}
.p1_2_9{
  position: absolute;
  width: 19%;
  height: 16%;
  left: 49%;
  top: 36%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p2/p2.3.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_2_9{
    animation: bounceIn 1s 0.5s linear both;
    -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_2_10{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 83%;
  top: 9%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p2/p2.10.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_2_10{
    animation: fadeInLeft 0.5s 0.5s linear both;
    -webkit-animation: fadeInLeft 0.5s 0.5s linear both;
}
.p1_2_11{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 0%;
  top: 53%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p2/p2.11.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_2_11{
    animation: fadeInRight 0.5s 0.5s linear both;
    -webkit-animation: fadeInRight 0.5s 0.5s linear both;
}
.p1_2_third{
    position: absolute;
    width: 82%;
    height: 17%;
    top: 77%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2/p2.13.png) 
}
.test3>div{
    position: absolute;
    width: 100%;
    height: 8%;
}
.test3 .t3_true{
    position: absolute;
    width:11%;
    height: 8%;
    top: 18%;
    left: -1%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test3 .t3_1{
    top:18%;
}
.test3 .t3_2{
    top:26.7%;
}
.test3 .t3_3{
    top:35.5%;
}
.test4>div{
    position: absolute;
    width: 100%;
    height: 8%;
}
.test4 .t4_true{
    position: absolute;
    width:11%;
    height: 8%;
    top: 76%;
    left: 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test4 .t4_1{
    top:76%;
}
.test4 .t4_2{
    top:85%;
}
.test4 .t4_3{
    top:94%;
}
.p2_echarts{
    display: none;
    position: absolute;
    width: 82%;
    height: 17%;
    top: 77%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2/p2.13_1.png) 
}
.echarts_hand2{
    position: absolute;
    width: 20%;
    height: 13%;
    left: 51%;
    top: 113%;
    background-image: url(../images/hand1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#echarts3{
  position: absolute;
  top: 15%;
  width: 100%;
  height: 40%;
}
#echarts4{
  position: absolute;
  top: 82%;
  width: 100%;
  height: 40%;
}
.p1_2_btn{
  position: absolute;
  width: 25%;
  height: 1.3%;
  left: 34.5%;
  top: 96.8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p2/p2.5.png)
}
.page1_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 440%;
    background-image: url(../images/p3/p3.jpg);
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    contain: strict;
}
.p1_3_first{
  position: absolute;
  width: 100%;
  height: 18%;
  left: 0%;
  top: 4%;
}
.p1_3_1{
  position: absolute;
  width: 17%;
  height: 77%;
  left: 8%;
  top: 13%;
  background-image: url(../images/p3/p3.4.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
  animation: fadeInLeft 1s linear both;
  -webkit-animation: fadeInLeft 1s linear both;
  will-change: auto;
}
.p1_3_2{
  position: absolute;
  width: 25%;
  height: 19%;
  left: 19%;
  top: 13%;
  background-image: url(../images/p3/p3.1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: bounceIn 1s 0.5s linear both;
  -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_3_3{
  position: absolute;
  width: 71%;
  height: 37%;
  left: 29%;
  top: 31%;
  background-image: url(../images/p3/p3.2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 1s 1s linear both;
  -webkit-animation: fadeIn 1s 1s linear both; 
}
.p1_3_4{
  position: absolute;
  width: 68%;
  height: 11%;
  left: 29%;
  top: 70%;
  background-image: url(../images/p3/p3.3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 1s 1.5s linear both;
  -webkit-animation: fadeIn 1s 1.5s linear both;
}
.p1_3_second{
  position: absolute;
  width: 19%;
  height: 2.4%;
  left: 41%;
  top: 22.5%;
  background-image: url(../images/p3/p3.15.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%;
}
.vid4{
    position: absolute;
    width: 82.5%;
    height: 8.2%;
    left: 8.8%;
    top: 24.8%;
    border-radius: 10px;
    overflow: hidden;
}
.vid4>video{
   position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_3_5{
  position: absolute;
  width: 24%;
  height: 24%;
  left: 14%;
  top: 3.5%;
  background-image: url(../images/p3/p3.5.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: music_move1 1s linear infinite;
  -webkit-animation: music_move1 1s linear infinite;
  opacity: 0;
  will-change: transform;
}
@keyframes music_move1{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(-100%,-100%,0);
        -webkit-transform: translate3d(-100%,-100%,0);
    }
}
@-webkit-keyframes music_move1{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(-100%,-100%,0);
        -webkit-transform: translate3d(-100%,-100%,0);
    }
}
.p1_3_6{
  position: absolute;
  width: 18%;
  height: 19%;
  left: 37%;
  top: -7%;
  background-image: url(../images/p3/p3.6.png);
  background-repeat: no-repeat;;
  background-size: 100% 100%; 
  animation: music_move2 1.5s linear infinite;
  -webkit-animation: music_move2 1.5s linear infinite;
  will-change: transform;
}
@keyframes music_move2{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(-20%,-100%,0);
        -webkit-transform: translate3d(-20%,-100%,0);
    }
}
@-webkit-keyframes music_move2{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(-20%,-100%,0);
        -webkit-transform: translate3d(-20%,-100%,0);
    }
}
.p1_3_7{
  position: absolute;
 width: 18%;
  height: 24%;
  left: 20%;
  top: -29.5%;
  background-image: url(../images/p3/p3.7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: music_move3 1.2s linear infinite;
  -webkit-animation: music_move3 1.2s linear infinite;
  will-change: transform;
}
@keyframes music_move3{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(20%,-50%,0);
        -webkit-transform: translate3d(20%,-50%,0);
    }
}
@-webkit-keyframes music_move3{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(20%,-50%,0);
        -webkit-transform: translate3d(20%,-50%,0);
    }
}
.p1_3_8{
  position: absolute;
  width: 19%;
  height: 3%;
  left: 25%;
  top: 51.5%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/icon2.png);
  opacity: 0;  
}
.p1_3_8.ani{
    animation: fadeInUp 1s linear both;
    -webkit-animation: fadeInUp 1s linear both;
}
.vid5{
    position: absolute;
    width: 78%;
    height: 6%;
    left: 11%;
    top: 54%;
    border-radius: 10px;
    overflow: hidden;
}
.vid5>video{
   position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_3_third{
    position: absolute;
    width: 100%;
    height: 8%;
    top: 67.5%;
}
.p1_3_9{
  position: absolute;
  width: 33%;
  height: 16%;
  left: 20%;
  top: 20%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p3/p3.8.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_3_9{
    animation: bounceIn 1s linear both;
    -webkit-animation: bounceIn 1s linear both;
}
.p1_3_10{
  position: absolute;
  width: 19%;
  height: 16%;
  left: 49%;
  top: 36%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p3/p3.9.png);
     opacity: 0;
  will-change: transform;
}
.ani .p1_3_10{
    animation: bounceIn 1s 0.5s linear both;
    -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_3_11{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 83%;
  top: 9%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p3/p3.10.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_3_11{
    animation: fadeInLeft 0.5s 0.5s linear both;
    -webkit-animation: fadeInLeft 0.5s 0.5s linear both;
}
.p1_3_12{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 0%;
  top: 53%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p3/p3.12.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_3_12{
    animation: fadeInRight 0.5s 0.5s linear both;
    -webkit-animation: fadeInRight 0.5s 0.5s linear both;
}
.p1_3_forth{
    position: absolute;
    width: 82%;
    height: 18.5%;
    top: 75%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p3/p3.13.png) 
}
.test5>div{
    position: absolute;
    width: 100%;
    height: 7%;
}
.test5 .t5_true{
    position: absolute;
    width:11%;
    height: 7%;
    top: 16.5%;
    left: -1%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test5 .t5_1{
    top:16.5%;
}
.test5 .t5_2{
    top:24.2%;
}
.test5 .t5_3{
    top:31.7%;
}
.test5 .t5_4{
    top:39.2%;
}
.test5 .t5_5{
    top:46.9%;
}
.test6>div{
    position: absolute;
    width: 100%;
    height: 7%;
}
.test6 .t6_true{
    position: absolute;
    width:11%;
    height: 7%;
    top: 79%;
    left: 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test6 .t6_1{
    top:79%;
}
.test6 .t6_2{
    top:86.8%;
}
.test6 .t6_3{
    top:94.5%;
}
.p1_3_btn{
  position: absolute;
  width: 25%;
  height: 1.3%;
  left: 34.5%;
  top: 96.8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p3/p3.14.png)
}
.p3_echarts{
    display: none;
    position: absolute;
    width: 82%;
    height: 18.5%;
    top: 75%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p3/p3.13_1.png) 
}
.echarts_hand3{
    position: absolute;
    width: 20%;
    height: 12%;
    left: 50%;
    top: 113%;
    background-image: url(../images/hand1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#echarts5{
  position: absolute;
  top: 15%;
  width: 100%;
  height: 40%;
}
#echarts6{
  position: absolute;
  top: 82%;
  width: 100%;
  height: 40%;
}
.page1_4{
    display: none;
    position: absolute;
    width: 100%;
    height: 420%;
    background-image: url(../images/p4/p4.jpg);
    background-repeat: no-repeat;;
    background-size: 100% 100%;
    contain: strict;
}
.p1_4_first{
  position: absolute;
  width: 100%;
  height: 18%;
  left: 0%;
  top: 4%;
}
.p1_4_1{
  position: absolute;
  width: 7.5%;
  height: 54%;
  left: 8%;
  top: 13%;
  background-image: url(../images/p4/p4.3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: fadeInLeft 1s linear both;
  -webkit-animation: fadeInLeft 1s linear both;
  will-change: auto;
}
.p1_4_2{
  position: absolute;
  width: 18%;
  height: 16%;
  left: 25%;
  top: 13%;
  background-image: url(../images/p4/p4.1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: bounceIn 1s 0.5s linear both;
  -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_4_3{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 22%;
  top: 31%;
  background-image: url(../images/p4/p4.2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: bounceIn 1s 1s linear both;
  -webkit-animation: bounceIn 1s 1s linear both;
}
.p1_4_4{
  position: absolute;
  width: 8%;
  height: 21%;
  left: 21%;
  top: 49%;
  background-image: url(../images/p4/p4.4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeInUp 1s 1.5s linear both;
  -webkit-animation: fadeInUp 1s 1.5s linear both; 
  will-change: auto;
}
.p1_4_5{
  position: absolute;
  width: 76%;
  height: 65%;
  left: 22%;
  top: 33%;
  background-image: url(../images/p4/p4.7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 1s 2s linear both;
  -webkit-animation: fadeIn 1s 2s linear both; 
}
.p1_4_6{
  position: absolute;
  width: 64%;
  height: 15%;
  left: 30%;
  top: 84%;
  background-image: url(../images/p4/p4.5.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 1s 2.5s linear both;
  -webkit-animation: fadeIn 1s 2.5s linear both; 
}
.p1_4_7{
  position: absolute;
  width: 3%;
  height: 0.6%;
  left: 48%;
  top: 23.5%;
  background-image: url(../images/p4/p4.6.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  animation: flower_move1 2.5s linear infinite;
  -webkit-animation: flower_move1 2.5s linear infinite;
}
@keyframes flower_move1{
    0%{
        transform: translate3d(600%,-200%,0);
        -webkit-transform: translate3d(600%,-200%,0);
    }
    100%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes flower_move1{
    0%{
        transform: translate3d(600%,-200%,0);
        -webkit-transform: translate3d(600%,-200%,0);
    }
    100%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
}
.p1_4_8{
  position: absolute;
  width: 4%;
  height: 0.3%;
  left: 51%;
  top: 24%;
  background-image: url(../images/p4/p4.8.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  animation: flower_move2 3s linear infinite;
  -webkit-animation: flower_move2 3s linear infinite;
}
@keyframes flower_move2{
    0%{
        transform: translate3d(200%,-600%,0);
        -webkit-transform: translate3d(200%,-600%,0);
    }
    100%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes flower_move2{
    0%{
        transform: translate3d(200%,-600%,0);
        -webkit-transform: translate3d(200%,-600%,0);
    }
    100%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
}
.vid6{
    position: absolute;
    width: 82.5%;
    height: 8.6%;
    left: 8.8%;
    top: 26.4%;
    border-radius: 10px;
    overflow: hidden;
}
.vid6>video{
    position: absolute;
    width: 100%;
    top:50%;
    transform: translate3d(0,-50%,0);
    -webkit-transform: translate3d(0,-50%,0);
    object-fit: contain;
}
.p1_4_9{
  position: absolute;
  width: 19%;
  height: 3%;
  left: 25%;
  top: 58%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p1/icon2.png);
  opacity: 0;
}
.p1_4_9.ani{
    animation: fadeInUp 1s linear both;
    -webkit-animation: fadeInUp 1s linear both;
}
.p1_4_second{
    position: absolute;
    width: 100%;
    height: 8%;
    top: 68.5%;
}
.p1_4_10{
  position: absolute;
  width: 33%;
  height: 16%;
  left: 20%;
  top: 20%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p4/p4.9.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_4_10{
    animation: bounceIn 1s linear both;
    -webkit-animation: bounceIn 1s linear both;
}
.p1_4_11{
  position: absolute;
  width: 19%;
  height: 16%;
  left: 49%;
  top: 36%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p4/p4.10.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_4_11{
    animation: bounceIn 1s 0.5s linear both;
    -webkit-animation: bounceIn 1s 0.5s linear both;
}
.p1_4_12{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 83%;
  top: 9%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p4/p4.11.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_4_12{
    animation: fadeInLeft 0.5s 0.5s linear both;
    -webkit-animation: fadeInLeft 0.5s 0.5s linear both;
}
.p1_4_13{
  position: absolute;
  width: 17%;
  height: 14%;
  left: 0%;
  top: 53%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p4/p4.12.png);
  opacity: 0;
  will-change: transform;
}
.ani .p1_4_13{
    animation: fadeInRight 0.5s 0.5s linear both;
    -webkit-animation: fadeInRight 0.5s 0.5s linear both;
}
.p1_4_third{
/*    display: none;*/
    position: absolute;
    width: 82%;
    height: 18%;
    top: 77%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p4/p4.14.png) 
}
.test7>div{
    position: absolute;
    width: 100%;
    height: 8%;
}
.test7 .t7_true{
    position: absolute;
    width:11%;
    height: 8%;
    top: 20%;
    left: -1%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test7 .t7_1{
    top:20%;
}
.test7 .t7_2{
    top:28.7%;
}
.test7 .t7_3{
    top:35.7%;
}
.test8>div{
    position: absolute;
    width: 100%;
    height: 8%;
}
.test8 .t8_true{
    position: absolute;
    width:11%;
    height: 8%;
    top: 77%;
    left: 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1/icon3.png) 
}
.test8 .t8_1{
    top:77%;
}
.test8 .t8_2{
    top:85.5%;
}
.test8 .t8_3{
    top:94%;
}
.p4_echarts{
    display: none;
    position: absolute;
    width: 82%;
    height: 18%;
    top: 77%;
    left: 9%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p4/p4.14_1.png) 
}
.echarts_hand4{
    position: absolute;
    width: 20%;
    height: 13%;
    left: 50%;
    top: 108%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#echarts7{
  position: absolute;
  top: 17%;
  width: 100%;
  height: 40%;
}
#echarts8{
  position: absolute;
  top: 77%;
  width: 100%;
  height: 40%;
}
.p1_4_btn{
  position: absolute;
  width: 25%;
  height: 1.3%;
  left: 34.5%;
  top: 96.8%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/p4/p4.13.png)
}