html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei", "宋体", "黑体", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
em,
img,
strong,
sub,
sup,
tt,
dd,
dl,
dt,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
ul,
li,
p,
a,
section {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

input,
select,
textarea {
    vertical-align: middle;
    -ms-behavior: url(css/PIE.htc);
    behavior: url(css/PIE.htc);
    outline: none;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
}

ul,
li {
    list-style-type: none;
}

a {
    blr: expression(this.onFocus=this.blur());
    text-decoration: none;
}

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

div,
a {
    tap-highlight-color: rgba(0, 0, 0, 0);
    focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-focus-ring-color: rgba(0, 0, 0, 0);
}
#audio-player {
    width: 6.9%;
    left: 4.5%;
    top: 2.6%;
    position: absolute;
    z-index: 300;
}
.music_btn{
  box-shadow:0px 3px 8px rgba(0, 0, 0, 0.1);
  border-radius:50%;
}
.music_btn,.music_btn img{
  width:100%;
}
.music-cover {
    width:100;
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.music-cover img {
    width:100%;
}
.an{
  animation:an 4s infinite linear;
  -webkiat-animation:an 4s infinite linear;
}
@keyframes an{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.arrow{
  position:absolute;
  width:8.5%;
  left:44.3%;
  bottom:4%;
  z-index:300;
}
.swiper-container{
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
}
.swiper-slide{
  transform:translate3d(0,0,0);
}
.swiper-container img {
  width:100%;
}
.container{
  position:relative;
  width:100%;
  height:100%;
  background-color:#012069;
  background-size: 100% 100%;
  overflow: hidden;
  transform:translate3d(0,0,0);
}
.container img{
  width:100%;
}
.logo {
    width:15.3%;
    position: absolute;
    top:3.4%;
    right:5.9%;
}
.p0-g1 {
    width: 75.4%;
    position: absolute;
    top: 19.8%;
    right: -13%;
    opacity: 0;
}
.p0-t1 {
    width:89.7%;
    position: absolute;
    top:15.5%;
    left:5.7%;
}
.p0-t2 {
    width:43.4%;
    position: absolute;
    top:0;
    right:0;
}
.p0-g2 {
    width: 76%;
    position: absolute;
    top: 80%;
    right: -64%;
}
.p0-g2-1 {
    width: 76%;
    position: absolute;
    top: 75.5%;
    left: -64%;
}
.p0-g4 {
    width:100%;
    position: absolute;
    top:75.8%;
    right: 0;
}
.p0-t3 {
    width:89.8%;
    position: absolute;
    top:24.3%;
    left:0;
    right:0;
    margin:0 auto;
}
.p0-g3-mask {
    width:80%;
    position: absolute;
    top:70.8%;
    left:0;
    right:0;
    margin:0 auto;
}
.p0-g3 {
    width: 14.5%;
    position: absolute;
    top: -5%;
    left: 42.2%;
}
.p0-t4 {
    width:100%;
    position: absolute;
    top:0;
    left:0;
}
.p0-t5 {
    width:100%;
    position: absolute;
    top:0;
    left:0;
}
.p0-img {
    width:78.1%;
    position: absolute;
    top:45.2%;
    left:0;
    right:0;
    margin:0 auto;
}
.p0-img>img {
    position: relative;
    z-index: 1;
}
.p0-img-g1 {
    width: 6.5%;
    position: absolute;
    top:38.8%;
    left:0.7%;
}
.p0-img1 {
    width:10.7%;
    position: absolute;
    top:31.2%;
    left:1.7%;
}
.p0-img2 {
    width:10.7%;
    position: absolute;
    top:71.9%;
    left:30.2%;
}
.p0-img3 {
    width:10.7%;
    position: absolute;
    top:53.3%;
    left:79.6%;
}
.p0-img4 {
    width:10.7%;
    position: absolute;
    top:2.4%;
    left:72%;
}
.p0-img5 {
    width:10.7%;
    position: absolute;
    top:3.1%;
    left:32.7%;
    z-index: 1;
}
.p0-img-g0 {
    width:15.9%;
    position: absolute;
    top:-12%;
    left: 4.7%;
}
.p0_img_dh1 {
    animation:p0_img_dh1 3s linear infinite;
}
@keyframes p0_img_dh1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}
.p0_img_dh2 {
    animation:p0_img_dh2 2s linear infinite;
    transform-origin: center 90%;
}
@keyframes p0_img_dh2 {
    0% {
        opacity: 1;
        transform:scale(1);
    }
    50% {
        opacity: 0.8;
        transform:scale(0.8);
    }
    100% {
        opacity: 1;
        transform:scale(1);
    }
}
.p0_img_dh3 {
    animation:p0_img_dh3 0.5s;
    animation-fill-mode: forwards;
}
@keyframes p0_img_dh3 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.p0_img_dh4 {
    animation:p0_img_dh4 0.5s;
    animation-fill-mode: forwards;
}
@keyframes p0_img_dh4 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(45%);
    }
}
.p0_img_dh5 {
    animation:p0_img_dh5 2s linear infinite;
}
@keyframes p0_img_dh5 {
    0% {
        opacity: 1;
        transform:scale(1);
    }
    50% {
        opacity: 0.8;
        transform:scale(0.9);
    }
    100% {
        opacity: 1;
        transform:scale(1);
    }
}
.p0_img_dh6 {
    animation:p0_img_dh6 1s;
    animation-fill-mode: forwards;
}
@keyframes p0_img_dh6 {
    0% {
        opacity: 1;
        transform: translateX(10vw);
    }
    70% {
        opacity: 1;
        transform: translateX(-100vw);
    }
    71% {
        opacity: 0;
        transform: translateX(10vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.p0_img_dh7 {
    animation:p0_img_dh7 3s linear infinite;
    animation-fill-mode: forwards;
}
@keyframes p0_img_dh7 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-1vw);
    }
    100% {
        transform: translateX(0);
    }
}
.p0_img_dh8 {
    animation:p0_img_dh8 3s linear infinite;
    animation-fill-mode: forwards;
}
@keyframes p0_img_dh8 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(1vw);
    }
    100% {
        transform: translateX(0);
    }
}


/* P3 P4 -高健*/
.p1-sz{
  width:100%;
  position: absolute;
  top:0%;
  left:0%;
}
.p1-mask{
  position:relative;
  width:100%;
  height:100%;
  z-index:300;
}
.p1-img0{
  width:33.3%;
  position: absolute;
  top:13.3%;
  left:10.5%;
}
.p1-img1{
  width:41.8%;
  position: absolute;
  top:12%;
  left:47.4%;
}
.p1-img2{
  width:78.4%;
  position: absolute;
  top:21.6%;
  left:10.7%;
}
.p1-img3{
  width:50.4%;
  position: absolute;
  top:38.6%;
  left:0.7%;
  z-index: 2;
}
.p1-g{
  width:100%;
  position: absolute;
  top:33.5%;
  left:0%;
}
.p1-g2{
  width:100%;
  position: absolute;
  top:50.5%;
  left:0%;
}
.p1-g3{
  width:100%;
  position: absolute;
  top:68.5%;
  left:0%;
}
.p1-img4{
  width:31.4%;
  position: absolute;
  top:37.8%;
  left:52.4%;
}
.p1-img4-5{
  width:26.3%;
  position: absolute;
  top:31.8%;
  left:36.4%;
}
.p1-img5{
  width:26.3%;
  position: absolute;
  top:48.6%;
  left:36.4%;
  z-index: 2;
}
.p1-img6{
  width:9.7%;
  position: absolute;
  top:56.9%;
  left:17.2%;
}
.p1-img7{
  width:15.5%;
  position: absolute;
  top:55.5%;
  left:29.4%;
}
.p1-img6-2{
  width:9.7%;
  position: absolute;
  top:56.9%;
  left:55.6%;
}
.p1-img8{
  width:15.5%;
  position: absolute;
  top:55.5%;
  left:67.2%;
}
.p1-img9{
  width:6.6%;
  position: absolute;
  top:67.3%;
  left:31.1%;
}
.p1-img10{
  width:17.5%;
  position: absolute;
  top:66.9%;
  left:40.8%;
  z-index: 2;
}
.p1-img11{
  width:6.6%;
  position: absolute;
  top:67.3%;
  left:61.1%;
}
.p1-img12{
  width:57.8%;
  position: absolute;
  top:74.3%;
  left:21.1%;
}

/* p2 */
.p2-img1{
  width:50%;
  position: absolute;
  top:5.4%;
  left:25%;
}
.p2-img2{
  width:50%;
  position: absolute;
  top:5.4%;
  left:25%;
}
.p2-img3{
  width:84.7%;
  position: absolute;
  top:16.4%;
  left:7.4%;
}
.p2-img4{
  width:10.2%;
  position: absolute;
  top:8.4%;
  left:8.7%;
}
.p2-img5{
  width:21.9%;
  position: absolute;
  top:7.4%;
  left:21.5%;
}
.p2-img6{
  width:57.7%;
  position: absolute;
  top:12.6%;
  left:21.7%;
}
.p2-img7{
  width:10%;
  position: absolute;
  top:14.5%;
  left:82.6%;
}
.p2-img8{
  width:20%;
  position: absolute;
  top:21.5%;
  left:70.7%;
}
.p2-img9{
  width:71.1%;
  position: absolute;
  top:27%;
  left:21%;
}
.p2-img10{
  width:14.5%;
  position: absolute;
  top:44.4%;
  left:15.8%;
}
.p2-img11{
  width:28.4%;
  position: absolute;
  top:51.4%;
  left:8.2%;
}
.p2-img12{
  width:86%;
  position: absolute;
  top:44%;
  left:7.4%;
}
.p2-img16{
  width:26.2%;
  position: absolute;
  top:66.7%;
  left:65.3%;
}
.p2-img17{
  width:86%;
  position: absolute;
  top:72.8%;
  left:7.4%;
}
.p2-img20{
  width:27.8%;
  position: absolute;
  top:63.7%;
  left:6.7%;
}
.p2-img21{
  width:34.5%;
  position: absolute;
  top:89.6%;
  left:9.1%;
}
.p2-img22{
  width:9.5%;
  position: absolute;
  top:90.8%;
  left:49%;
}
.p2-img23{
  width:19.1%;
  position: absolute;
  top:90.8%;
  left:62.5%;
}
/* P3 */
.p3-img3{
  width:23.1%;
  position: absolute;
  top:7.2%;
  left:39.4%;
}
.p3-img4{
  width:17%;
  position: absolute;
  top:8.4%;
  left:18.9%;
}
.p3-img4-1{
  left: 65.6%;
}
.p3-img5{
  width:17%;
  position: absolute;
  top:8.4%;
  left:21.6%;
} 
.p3-img13{
  width:74%;
  position: absolute;
  top:14.1%;
  left:13%;
} 
.p3-img14{
  width:79.2%;
  position: absolute;
  top:23.5%;
  left:10%;
} 
.p3-img14-0{
  width:8.7%;
  position: absolute;
  top:0%;
  left:0%;
} 
.p3-img14-1{
  top:16.3%;
} 
.p3-img14-2{
  top:42.3%;
} 
.p3-img14-3{
  top:57.5%;
} 
.p3-img15{
  width:90%;
  position: absolute;
  top:63.6%;
  left:6.5%;
} 
.p6-t1 {
    width: 49.8%;
    position: absolute;
    left: 25%;
    top: 5.5%;
}

.p6-xbg {
    width: 84.5%;
    position: absolute;
    left: 8%;
    top: 16.6%;
}

.p6-jp1 {
    width: 46.3%;
    position: absolute;
    left: 15%;
    top: 17%;
}

.p6-t1 {
    width: 49.8%;
    position: absolute;
    left: 25%;
    top: 5.5%;
}

.p6-xbg {
    width: 84.5%;
    position: absolute;
    left: 8%;
    top: 16.6%;
    z-index: 300;
}

.p6-jp1 {
    width: 46.3%;
    position: absolute;
    left: 15%;
    top: 17%;
    z-index: 300;
}

.p6-jp2 {
    width: 46.3%;
    position: absolute;
    left: 41%;
    top: 38%;
    z-index: 300;
}

.p6-jp3 {
    width: 46.3%;
    position: absolute;
    left: 14%;
    top: 64%;
    z-index: 300;
}

.p6-jp {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 300;
}

.p6-mc1 {
    width: 26.1%;
    position: absolute;
    left: 59.1%;
    top: 27%;
    z-index: 300;
}

.p6-mc2 {
    width: 30.7%;
    position: absolute;
    left: 12.1%;
    top: 46%;
    z-index: 300;
}

.p6-mc3 {
    width: 30.7%;
    position: absolute;
    left: 58%;
    top: 72.1%;
    z-index: 300;
}

.p6-tz2 {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -5px;
    animation: kz 3s linear infinite;
    z-index: 300;
}

.p5-t2 {
    width: 56.7%;
    position: absolute;
    left: 50%;
    margin-left: -28.35%;
    top: 21.3%;
    z-index: 300;
}

.p5-t3 {
    width: 50.6%;
    position: absolute;
    left: 50%;
    margin-left: -25.3%;
    top: 27%;
    z-index: 300;
}

.p5-t4 {
    width: 56.7%;
    position: absolute;
    left: 50%;
    margin-left: -28.35%;
    top: 36%;
    z-index: 300;
}

.p5-t5 {
    width: 68%;
    position: absolute;
    left: 50%;
    margin-left: -34%;
    top: 41.6%;
    z-index: 300;
}

.p5-t6 {
    width: 56.7%;
    position: absolute;
    left: 50%;
    margin-left: -28.35%;
    top: 64%;
    z-index: 300;
}

.p5-t7 {
    width: 21.4%;
    position: absolute;
    left: 50%;
    margin-left: -10.7%;
    top: 70.4%;
    z-index: 300;
}

.p5-t8 {
    width: 68%;
    position: absolute;
    left: 50%;
    margin-left: -34%;
    top: 74.4%;
    z-index: 300;
}

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



.p1-scale{
  animation: p1-scale 1.25s linear ;
  -webkit-animation: p1-scale 1.25s linear infinite;
}
@keyframes p1-scale{
  0% {
      transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.p1-move0{
  animation: p1-move0 10s linear infinite;
  -webkit-animation: p1-move0 10s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move0{
  0% {
      transform:translateY(0);
      opacity: 1;
  }
  100% {
    transform:translateY(90vw) ;
    opacity: 0;
  }
}
.p1-move{
  animation: p1-move 1.25s linear infinite;
  -webkit-animation: p1-move 1.25s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move{
  0% {
      transform:translateX(0vw);
  }
  50% {
    transform:translateX(-1vw);
  }
  100% {
    transform:translateX(0vw) ;
  }
}
.p1-move1{
  animation: p1-move1 1.25s linear infinite;
  -webkit-animation: p1-move1 1.25s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move1{
  0% {
      transform:translateX(0vw);
  }
  50% {
    transform:translateX(1vw);
  }
  100% {
    transform:translateX(0vw) ;
  }
}
.p1-move2{
  animation: p1-move2 2.5s linear infinite;
  -webkit-animation: p1-move2 2.5s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move2{
  0% {
      transform:translateY(0vw);
  }
  50% {
    transform:translateY(1vw);
  }
  100% {
    transform:translateY(0vw);
  }
}
.p1-move3{
  animation: p1-move3 2s linear infinite;
  -webkit-animation: p1-move3 2s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move3{
  0% {
      transform:translateX(0vw);
  }
  50% {
    transform:translateX(0.5vw);
  }
  100% {
    transform:translateX(0vw);
  }
}
.p1-move4{
  animation: p1-move4 2s linear infinite;
  -webkit-animation: p1-move4 2s linear infinite;
  animation-delay: 2s;
}
@keyframes p1-move4{
  0% {
      transform:translateX(0vw);
  }
  50% {
    transform:translateX(-0.5vw);
  }
  100% {
    transform:translateX(0vw);
  }
}
.p2-move0{
  animation: p2-move0 1.5s linear infinite;
  -webkit-animation: p2-move0 1.5s linear infinite;
}
@keyframes p2-move0{
  0% {
      transform:translateX(0vw);
  }
  50% {
    transform:translateX(1vw);
  }
  100% {
    transform:translateX(0vw);
  }
}
.p2-move1{
  animation: p2-move1 1.5s linear infinite;
  -webkit-animation: p2-move1 1.5s linear infinite;
}
@keyframes p2-move1{
  0% {
      transform:translateY(0vw);
  }
  50% {
    transform:translateY(-1.2vw);
  }
  100% {
    transform:translateY(0vw);
  }
}
.p2-move2{
  animation: p2-move2 1.5s linear infinite;
  -webkit-animation: p2-move2 1.5s linear infinite;
  transform-origin: left;
}
@keyframes p2-move2{
  0% {
      transform:rotate(0deg);
  }
  50% {
    transform:rotate(10deg);
  }
  100% {
    transform:rotate(0deg);
  }
}
.p2-move3{
  animation: p2-move3 1.5s linear infinite;
  -webkit-animation: p2-move3 1.5s linear infinite;
  transform-origin: left;
}
@keyframes p2-move3{
  0% {
      transform:scale(1);
  }
  50% {
    transform:scale(1.05);
  }
  100% {
    transform:scale(1);
  }
}








.p3-big1{
  animation: p3-big1 3s linear infinite;
  -webkit-animation: p3-big1 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-big1 {
    0% {
       transform: scale(1);
    }
    33.33% {
      transform: scale(1.04);
    }
    66.66% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
}
.p3-big2{
  animation: p3-big2 3s linear infinite;
  -webkit-animation: p3-big2 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-big2 {
    0% {
       transform: scale(1);
    }
   33.33% {
      transform: scale(1);
    }
   66.66% {
      transform: scale(1.04);
    }
    100% {
      transform: scale(1);
    }
}


.p3-sc1{
  animation: p3-sc1 3s linear infinite;
  -webkit-animation: p3-sc1 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc1 {
    0% {opacity: 0;}14.2% {opacity:1;}28.4% { opacity:1;}42.6% {opacity:1;}
    56.8% {opacity:1;}71% {opacity:1;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-sc2{
  animation: p3-sc2 3s linear infinite;
  -webkit-animation: p3-sc2 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc2 {
    0% {opacity: 0;}14.2% {opacity:0;}28.4% { opacity:1;}42.6% {opacity:1;}
    56.8% {opacity:1;}71% {opacity:1;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-sc3{
  animation: p3-sc3 3s linear infinite;
  -webkit-animation: p3-sc3 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc3{
    0% {opacity: 0;}14.2% {opacity:0;}28.4% { opacity:0;}42.6% {opacity:1;}
    56.8% {opacity:1;}71% {opacity:1;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-sc4{
  animation: p3-sc4 3s linear infinite;
  -webkit-animation: p3-sc4 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc4{
    0% {opacity: 0;}14.2% {opacity:0;}28.4% { opacity:0;}42.6% {opacity:0;}
    56.8% {opacity:1;}71% {opacity:1;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-sc5{
  animation: p3-sc5 3s linear infinite;
  -webkit-animation: p3-sc5 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc5{
    0% {opacity: 0;}14.2% {opacity:0;}28.4% { opacity:0;}42.6% {opacity:0;}
    56.8% {opacity:0;}71% {opacity:1;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-sc6{
  animation: p3-sc6 3s linear infinite;
  -webkit-animation: p3-sc6 3s linear infinite;
  animation-delay: 2s;
}
@keyframes p3-sc6{
    0% {opacity: 0;}14.2% {opacity:0;}28.4% { opacity:0;}42.6% {opacity:0;}
    56.8% {opacity:0;}71% {opacity:0;}85.2% {opacity:1;}100% {opacity:1;}
}
.p3-xz{
  animation: p3-xz 1.5s linear infinite;
  -webkit-animation: p3-xz 1.5s linear infinite;
}
@keyframes p3-xz{
  0% {
      transform:rotate(0deg);
  }

  100% {
    transform:rotate(360deg);
  }
}



.xx-title{
  position:absolute;
  width:44.5%;
  left:27.8%;
  top:5.5%;
}
.xx-main{
  position:absolute;
  width:84.8%;
  left: 7.1%;
  top:16.3%;
}

.xx{
  position:absolute;
  width:100%;
  left:0;
  top:7%;
}
.xx-title1{
  width:47.3%;
  margin-left:14.1%;
  margin-bottom:3%;
}
.xx-int{
  position:relative;
  width:79.4%;
  margin:0 auto 7%;
}
.xx-int input{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  line-height:100%;
  text-align:left;
  text-indent:1em;
  font-size:4vw;
  background:none;
  color:#fff;
  outline:none;
}

.xx-int select{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  line-height:100%;
  text-align:left;
  text-indent:1em;
  font-size:4vw;
  background:none;
  color:#fff;
  outline:none;
  -webkit-appearance:none;

-moz-appearance:none;

appearance:none; /*去掉下拉箭头*/ 
}
.xx-int select option{
  font-size:4vw;
}
.xx-title2{
  width:27.7%;
  margin-left:14.1%;
  margin-bottom:4%;
}


.xx-title3{
  width:21.3%;
  margin-left:14.1%;
  margin-bottom:4%;
}

.xx-title4{
  width:16.7%;
  margin-left:14.1%;
  margin-bottom:4%;
}
.xx-title5{
  width:31.5%;
  margin-left:14.1%;
  margin-bottom:4%;
}
.xx-btn{
  width:30.8%;
  margin:5% auto 0;
}

.xx-t1{
  width:44%;
  margin:5% auto 0;
}
.xx-box{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:300;
}

.tj{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
  left:0;
  top:0;
  display:none;
  z-index:500;
}

.tj-close{
  position:absolute;
  width:6.6%;
  right:6.3%;
  top:3.3%;
}

.tj-img{
  position:absolute;
  width:50%;
  left:25%;
  top:50%;
  transform:translateY(-50%);
}

.xx-bm-tip{
  position:absolute;
  width:58%;
  left:21%;
  top:50%;
  transform:translateY(-50%);
  display:none;
  z-index:500;
}
.p7-bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-image:url(../images/p7-bg.png);
  background-size:cover;
  background-position:50% 100%;
  animation:bg 60s infinite linear;
  z-index:300;
}
.p8-bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-image:url(../images/bg1.png);
  background-size:cover;
  background-position:50% 100%;
  animation:bg 60s infinite linear;
  z-index:300;
}
.container{
  overflow:hidden;
}
@keyframes bg{
  0%{
    transform:scale(1)
  }
  100%{
    transform:scale(1.5);
  }
}
.p7-img{
  position:absolute;
  width:81.6%;
  left:9.3%;
  top:15%;
}
.p7-t1,.p7-t2,.p7-t3{
  position:absolute;
  width:100%;
  left:0;
  top:0;
}
.p7-btn{
  position:absolute;
  width:38.6%;
  left:31.6%;
  top:51.6%;
}
.p7-btn>img{
  animation:p7btn 2s infinite linear;
}

@keyframes p7btn{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}
.p7-t4{
  position:absolute;
  width:36.7%;
  left:31.4%;
  top:68%;
}
  
.p7-tip{
  position:absolute;
  width:100%;
  left:0;
  bottom:9%;
} 
  
.zo{
  animation:zo 0.65s;
  opacity:0;
  animation-fill-mode: forwards;
} 
.p7-box{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:300;
}
  
@keyframes zo{
  0%{
    opacity:0;
    transform:scale(1.2);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}
canvas{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:0;
}
.p1-sz img{
  opacity:0;
}

.xx-wrong{
  width:100%;
  height:100%;
  z-index:800;
  background-color:rgba(0,0,0,0.7);
  left:0;
  top:0;  
  position:absolute;
  display:none;
}

.xx-c{
  position:absolute;
  width:80%;
  left:50%;
  transform:translate(-50%,-50%);
  top:50%;
  background-color:#fff;
  padding:6% 0;
  border-radius:20px;
}
.xx-c p{
  font-size:5vw;
  text-align:center;
}

.xx-line{
  width:80%;
  border-bottom:1px dashed #808080;
  margin:7% auto  ;
}

.qd{
  width:20%;
  margin:0 auto;
}
.js-box{
   position:absolute;
   z-index:999;
  width:100%;
  height:100%;
  background-color:#012069;
  background-size: 100% 100%;
  overflow: hidden;
  background-image:url(../images/bg1.png);
  display:none;
}
.js-tip img{
  width:100%;
}
.js-tip{
  position:absolute;
  width:100%;
  left:0;
  top:50%;
  transform:translateY(-50%);
}