.p1-bg-fix{
  width: 100%;
  height: 100vh;
  background: url("../images/p1-bg.png")center bottom ;
  background-size: 100% 100%;
  position: fixed;
  z-index: -1;
  background-position: 50% 0;
}
body{
  min-width: 1200px;

}
.w{
  width: 1280px;
  margin: 0 auto;
  position: relative;
}
.nav-ul li:hover{
  color: #999;
}
.w2{
  width: 1280px;
  margin: 0 auto;
  position: relative;
  height: 100vh;
}
.p2-bg{
  height: 100vh;
  background: url("../images/p2-bg.png")center bottom no-repeat;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.p2-girl{
  height: 90vh;
  position: absolute;
  bottom: 0;
  right: -20vh;
  z-index: 5;
}
.p3-bg{
  height: 100vh;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.nav{
  position: fixed;
  width: 1280px;
  left: 50%;
  margin-left: -640px;
  z-index: 50;
  img{
    margin-top:15px;
    cursor: pointer;
  }
  ul{
    float: right;
    margin-top: 42px;
    margin-right: 10px;
    li{
      cursor: pointer;
      float: left;
      color: #fff;
      margin-left: 28px;
    }
  }
}
.p1-text{
  position: absolute;
  top: 19.5vh;
  left: 350px;
}
.p1-bg{
  height: 100vh;
  position: relative;
  z-index: 1;
}
.down-ul{
  position: fixed;
  width: 1280px;
  left: 50%;
  margin-left: -640px;
  z-index: 2;
  top:73vh;
  li:hover{
    background: rgba(255,255,255,0.2);
  }
  li{
    cursor: pointer;
    height: 65px;
    width: 220px;
    border: 1px solid #8EA5C0;
    float: left;
    text-align: center;
    line-height: 65px;
    color: #ffffff;
    border-radius: 8px;
    font-size: 22px;
    img{
      vertical-align: middle;
      margin-right:5px;
    }
  }
  .app-down-btn{
    margin-left: 290px;
    margin-right: 20px;
    img{
      margin-top: -5px;
    }
  }
  .google-down-btn{
    margin-right: 20px;
  }
}
.p1-gift1{
  position: absolute;
  top: 21vh;
  left: 195px;
  transition: 0.5s all;
}
.p1-gift1-box{
  position: absolute;
  top: 21vh;
  left: 195px;
  width: 165px;
  height: 195px;
  background: url("../images/p1-gift1.png")no-repeat;
  animation: show1 2s infinite linear  ;
}
.p1-gift2-box{
  position: absolute;
  top: 18.2vh;
  right: 175px;
  width: 190px;
  height: 163px;
  background: url("../images/p1-gift2.png")no-repeat;
  animation: show2 2s infinite linear  ;
}
.p1-gift2{
  position: absolute;
  top: 18.2vh;
  right: 175px;
  transition: 0.5s all;
}
.p1-gift3{
  position: absolute;
  top: 41vh;
  right: 280px;
  transition: 0.5s all;
}
.p1-gift3-box{
  position: absolute;
  top: 41vh;
  right: 280px;
  width: 151px;
  height: 237px;
  background: url("../images/p1-gift3.png")no-repeat;
  animation: show3 2s infinite linear  ;
}
.p1-gift4{
  position: absolute;
  top: 49vh;
  left: 226px;
  transition: 0.5s all;
}
.p1-gift4-box{
  position: absolute;
  top: 49vh;
  left: 226px;
  width: 170px;
  height: 182px;
  background: url("../images/p1-gift4.png")no-repeat;
  animation: show4 2s infinite linear  ;
}
@keyframes show1 {
  0%{
    background: url("../images/p1-gift1.png")no-repeat;
  }
  50%{
    background: url("../images/p1-gift1-show.png")no-repeat;
  }
  100%{
    background: url("../images/p1-gift1.png")no-repeat;
  }
}
@keyframes show2 {
  0%{
    background: url("../images/p1-gift2.png")no-repeat;
  }
  50%{
    background: url("../images/p1-gift2-show.png")no-repeat;
  }
  100%{
    background: url("../images/p1-gift2.png")no-repeat;
  }
}
@keyframes show3 {
  0%{
    background: url("../images/p1-gift3.png")no-repeat;
  }
  50%{
    background: url("../images/p1-gift3-show.png")no-repeat;
  }
  100%{
    background: url("../images/p1-gift3.png")no-repeat;
  }
}
@keyframes show4 {
  0%{
    background: url("../images/p1-gift4.png")no-repeat;
  }
  50%{
    background: url("../images/p1-gift4-show.png")no-repeat;
  }
  100%{
    background: url("../images/p1-gift4.png")no-repeat;
  }
}
.p3-ul{
  :nth-child(1){
    background: rgb(24,149,242);
  }
  :nth-child(2){
    background: rgb(215,182,89);
  }
  :nth-child(3){
    background: rgb(131,109,245);
  }
  :nth-child(4){
    background: rgb(249,192,217);
  }
  li{
    float: left;
    height: 100vh;
    width: 24.97%;
    position: relative;

    img{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transition: 1.2s all;

    }
  }
}
.p4-bg{
  background: #1A1A1A;
  height: 100vh;
  position: relative;
  z-index: 3;
  overflow: hidden;
  position: relative;
  top: -2px;
}
.p4-logo{
  position: absolute;
  left: 50%;
  margin-left: -46.5px;
  top: 174px;
}
.p4-text{
  font-size: 80px;
  color: #fff;
  text-align: center;
  margin-top: 290px;
}
.p4-ul{
  width: 502px;
  margin: 80px auto;
  li{
    float: left;
    color: #808080;
    text-align: center;
    cursor: pointer;
    p{
      margin-top: 18px;
    }
  }
  .p4-ul-li1-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i1-act.png")no-repeat;
  }
  .p4-ul-li2-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i2-act.png")no-repeat;
  }
  .p4-ul-li3-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i3-act.png")no-repeat;
  }
  .p4-ul-li4-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i4-act.png")no-repeat;
  }
}
.p4-ul-li{
  color: #fff !important;
  .p4-ul-li1-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i1.png")no-repeat;
  }
  .p4-ul-li2-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i2.png")no-repeat;
  }
  .p4-ul-li3-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i3.png")no-repeat;
  }
  .p4-ul-li4-img{
    width: 70px;
    height: 70px;
    background: url("../images/p4-i4.png")no-repeat;
  }
}

.p4-b-text{
  padding-top: 10px;
  text-align: center;
  color: #808080;
  :nth-child(2){
    font-size: 22px;
    margin-top: 5px;
  }

}
.p2-text{

}
.p2-text-box{
  position: absolute;
  top: 35vh;
  left: 4vh;
  p{
    color: #fff;
    text-align: center;
    font-size: 26px;
    margin-top: 15px;
  }
}
.p3-text-box{
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 2;
  top: 80vh;
  img{
    width: 25vw;
  }
  p{
    color: #fff;
    font-size: 1.5vw;
    margin-top: 1vh;
  }
}

.p3-track1{
  height: 11vh;
  position: absolute;
  width: 100%;
  z-index: 30;
  top: 51vh;

}
.bilibi-box{

}
@media screen and (max-width: 1400px) {
  .bilibi-box{
    img{
      width: 290px;
    }
  }
  .p2-girl{
    right: -5vh;
  }
  .down-ul{
    top: 80vh;
  }
}
.p3-track2{
  height: 11vh;
  position: absolute;
  width: 100%;
  top: 61vh;
  z-index: 3;
}
.p3-track3{
  height: 11vh;
  position: absolute;
  width: 100%;
  top: 71vh;
  z-index: 30;
}
.p3-track4{
  height: 11vh;
  position: absolute;
  width: 100%;
  top: 81vh;
  z-index: 3;
}
.p3-img-show-top{
  position: absolute;
  z-index: 3;
  right: -30vw;
  animation: bilibil 10s linear;
}
.p3-img-show-top2{
  position: absolute;
  z-index: 30;
  right: -30vw;
  animation: bilibil 10s linear;
}
@keyframes bilibil  {
  0%{
    right: -30vw;
  }
  100%{
    right: 130vw;
  }
}
.iosDown-box{
  width: 110px;
  height: 110px;
  position: absolute;
  background: #fff;
  right: 336px;
  top: -120px;
  border-radius: 8px;
  display: none;
}
.iosDown{
  width: 100px;
  margin-top: 5px;
  margin-left: 5px;
}
.anDown-box{
  width: 110px;
  height: 110px;
  position: absolute;
  background: #fff;
  right: 578px;
  top: -120px;
  border-radius: 8px;
  display: none;
}
.anDown{
  width: 100px;
  margin-top: 5px;
  margin-left: 5px;
}