body{background: #fff;width: 100%;height: 100vh;}
.relative{position: relative;}
.absolute{position: absolute;}
.absolute.top{top:0;}
.absolute.bottom{bottom:0;}
.hidden{display: none;}
.zimg{position: relative;z-index: 1;}
.z20{z-index: 20;}
.opacity{opacity: 0;}
.ellip{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.transition{transition: transform .3s ,opacity .3s;}
.loopmove{transition: opacity .3s,transform .3s;animation: loopMove 1s linear infinite forwards;}
@keyframes loopMove {
  50%{
    transform: translate3d(0,0,0) scale(1) rotate(0);
    opacity: 1;
  }
}
.oncemove{transition: opacity .3s,transform .3s;animation: onceMove 1s linear forwards;}
@keyframes onceMove {
  100%{
    transform: translate3d(0,0,0) scale(1) rotate(0);
    opacity: 1;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.container{width: 100%;height: 100vh;position: relative;overflow: hidden;background-color: #d5001c;}
.page{width: 100%;height: 100%;background-position: 0 0 ;background-repeat: no-repeat;background-size:  100% 100%;}

.p0{background-image: url(../img/p0/bg.jpg);z-index: 500;position: absolute;top: 0;z-index: 801;background-color: red;}
.p0 .center{top: 40%;}
.loading_num{font-size: 38px;color: #e6d679;text-align: center;margin-top: 0px;font-weight: bold;margin-left: 10px;}
.perload-text{font-family: sys-r;color: #f9001e;opacity: .3;}
.p0-xi{width: 300px;margin: 20px auto 0px;position: relative;}
.p0-xi img{position: absolute;top: 0;left: 0;width: 100%;opacity: 0;}
.p0-xi .xi-img-1{position: relative;}
.p0-bin{width: 100px;margin: 0 auto;opacity: 0.2;transition: opacity .3s;
  animation:p0-bin 3.5s linear 1 forwards;margin-bottom: 30px;
}
@keyframes p0-bin {
  0%{opacity: 0.2;}
  70%,100%{opacity: 1;}
}
.p0-text{align-items: center;margin-top: 0px;height: 70px;}
.p0-open{font-size: 38px;text-align: center;width: 240px;margin:0px auto 0;font-weight: bold;color: #e6d679;opacity: 1;display: none;}

@font-face {
  font-family: sys-r;
  src: url(../font/SourceHanSerifCN-Regular.otf);
}

.main{overflow: hidden;width: 100%;height: 100vh;}
.main.on{overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
/* .p1{background-image: url(../img/bg2.jpg);position: relative;} */
.swiper{height: 100vh;}
.arrow{width: 130px;bottom: 3%;left: calc(50% - 65px);transform: translate3d(0,8px,0);animation-duration: .8s;}
/* .arrow.delay-1 img{animation-delay: 6s;} */
.p1 .arrow{display: block;bottom: 1%;}
.video-box{width: 100%;}
#video{width: 100%;}
.bg-gif{width: 100%;height: 1500px;overflow:hidden;opacity: 1;display: none;}
#bg-gif{position: absolute;width: 100%;bottom: 0;}
.btn-list{width: 250px;left: calc(50% - 125px);bottom: 6.5%;}

.xizi-long{position: relative;z-index: 2;background-image: url(../img/bg3.jpg);}
.xizi-long > .center{width: 100%;top: 53%;}
.rule-main{width: 96%;left: 2%;}
.rule-reel{width: 100%;height: 60px;overflow:hidden;position: relative;background:url(../img/reel-4.png) no-repeat 0 0 / 100% auto;transition: height .3s;
}
.rule-reel.active{animation: p3-reel 1.5s forwards .8s;}
.rule-reel-bottom{position: relative;width:100%;bottom: 0px;;background:inherit;height: 48px;background:url(../img/reel-4.png) no-repeat 0 100% / 100% auto;}
@keyframes p3-reel {
  to{height: 1080px;}
}

.xizi-long .arrow{width: 120px;bottom: 1%;left: calc(50% - 60px);}
.p1-el{display: none;}
.text-5{width: 300px;left: calc(50% - 150px);bottom: 6%;position: absolute;}

.swiper-1 .swiper-slide{overflow: hidden;}
.line2{top: -6%;pointer-events: none;}
.dl{width: 130px;
  animation: dl 2.8s linear infinite;
transform-origin: 50% 10%;}
.dl-1{top: 18%;left: -2%;}
.dl-2{top: 33%;left: 22.5%;}
.dl-3{top: 30%;left: 45%;}
.dl-4{top: 20%;left: 65.5%;}
.dl-5{top: 2%;left: 86.5%;}
@keyframes dl {
  0%,100%,50%{
    transform: rotate(0deg) translateZ(1px);
  }
  25%{
    transform: rotate(-2deg) translateZ(1px);
  }
  75%{
    transform: rotate(2deg) translateZ(1px);
  }
  
}

.p1-el-1{width: 180px;right: 13px;top: 4%;transform: translate3d(3px,3px,0);animation-duration: 1.5s;}
.p1-el-2{width: 150px;right: -2%;top: 15%;transform: translate3d(2px,-3px,0);animation-duration: 1.5s;}
.p1-el-3{width: 165px;left: 0%;top: 56%;transform: translate3d(-3px,3px,0);animation-duration: 1.5s;}
.p1-el-4{width: 145px;left: 0%;top: 72%;transform: translate3d(-3px,3px,0);animation-duration: 1.5s;}

.yanhua-1{width: 240px;top: 1%;right: 25%;animation: yanhua 2.4s linear infinite;}
.yanhua-2{width: 240px;top: 5%;left: 5%;animation: yanhua 2.4s linear infinite .3s;}
.yanhua-3{width: 380px;top: 8%;right: -5%;animation: yanhua 2.4s linear infinite 1s;}
@keyframes yanhua{
  0%{
    transform: translate3d(0,180px,0) scale(0);opacity: 0;
  }
  50%{
    transform: translate3d(0,0px,0) scale(.8);opacity: 1;
  }
  100%{
    transform: translate3d(0,0px,0) scale(1);opacity: 0;
  }
}
.baixi{margin: 60px auto 30px;width: 94%;}
.thumb-list{width: 70%;left: 15%;height: 81%;overflow-y: scroll;-webkit-overflow-scrolling: touch;background-color: none;top: 8%;}
.thumb-list li{flex-wrap: wrap;justify-content: center;}
.thumb{width: 33.33%;padding: 12px;position: relative;}
.thumb-box{width: 36%;overflow: hidden;height: 50%;background-position: center 150%;background-repeat: no-repeat;background-size: 126% auto;}

.form{top: 0;left: 0;background-image: url(../img/bg2.jpg);z-index: 20;display: none;}
.logo{width: 340px;top: 5%;left: 5%;z-index:10;}
.form-box{top: 15%;width: 100%;}
.form .btn-back{left: 50px;}
.reel{width: 675px;height: 57px;margin:0 auto;background: url(../img/reel-2.png) no-repeat 0 0 / 100% auto;
  animation: open-reel 1s linear forwards ;
}
@keyframes open-reel {
  to{height: 780px;}
}
.form-wrap{width: 54%;left:22%;top: 17%;animation-delay: 1s;}
.form-item{position: absolute;justify-content: space-between;align-items: flex-end;}
.form-item input{appearance: none;-webkit-appearance: none;padding: 0;box-sizing: border-box;font-size: 28px;color: #333;background: none;flex:1;height: 40px;min-width: 150px;}
.icon-pen{width: 36px;}
.code{top: -2%;width: 72%;left: 26%;}
.name{top:-3%;width: 80%;left: 20%;}
.phone{top: 16.5%;width: 80%;left: 20%;}
.yzm{top: 37%;width: 75%;left: 26%;}
.yzm p{font-size: 24px;width: 100px;border-radius: 10px;background: #940012;padding: 10px 0;text-align: center;color: #fff;margin-left: 10px;}
.yzm p.on{background: #999;}
.address{top: 57%;left: 20%;width: 78%;}
.address textarea{appearance: none;-webkit-appearance: none;padding: 0;box-sizing: border-box;font-size: 28px;color: #333;background: none;opacity:1;flex:1;height: 180px;min-width: 150px;line-height: 60px;}
.address .icon-pen{right: -10px;}
.reel-img1{width: 300px;left: calc(50% - 150px);top: 12%;animation-delay: 1s;}
.form .text{width: 360px;left:calc(50% - 180px);bottom:21%;animation-delay: 1.5s;}
.form .btns{width: 300px;bottom: 8%;left: calc(50% - 150px);}
.btn-submit{width: 100%;margin: 0 0 40px;}
.btn-submit img{animation-delay: 1.8s;}

.page-xizi{background-image: url(../img/bg.jpg);top: 0;left: 0;z-index: 10;display: block;}
.page-xizi.z98{z-index: -99;}
.btn-back{width: 130px;top: 1.5%;left: 3%;}
.btn-gift{width: 50px;top: 7%;right: 3%;z-index: 99;}
.page-xizi .text{width: 400px;margin: 0 auto;}
.page-xizi .text.on{transform: translate3d(-10px,0,0);}
.page-xizi .text.on.on2{transform: translate3d(0px,0,0);}
.page-xizi .text-2{width: 200px;margin: 20px auto 0;}
.swiper-box{top: 50%;width: 100%;}
.swiper-2{margin: 40px auto 40px;padding: 40px 0 0!important;height: 700px;}
.swiper-2 .swiper-slide{width: 100%;height: 100%;}
.card{width: 440px;transition: transform .6s;left: calc(50% - 220px);will-change: transform;display: none;}
/* .card-els{display: none;} */
.xizi-img{width: 80%;left: 10%;top: 16%;}
.card-el-1{width: 40px;top: 10%;left: 0;}
.card-el-2{width: 150px;bottom: 0;right: -30px;}
.card-el-3{width: 80px;bottom: 10px;right: 22px;}
.brid{width: 130px;top: -25px;left: -36px;transform-origin: 60% 90%;transform: rotate(-4deg);animation-duration: 2s;}
.card .animated {animation-delay: .6s;}

.card-left{transform: scale(.9);left: -45%;top: 0;width: 440px;animation: fadeIn .3s linear .5s forwards;opacity: 0;}
.card-right{transform: scale(.9);right: -45%;top: 0;width: 440px;animation: fadeIn .3s linear .5s forwards;opacity: 0;}
.swiper-2 .swiper-slide.overflow{overflow: hidden;}

.swiper-2 .swiper-slide-active .card{display: block;}
.swiper-2 .swiper-slide-next.on .card{transform: scale(.9) translate(-270px,0) translateZ(1px);display: block;}
.swiper-2 .swiper-slide-prev.on .card{transform: scale(.9) translate(270px,0) translateZ(1px);display: block;}
.num-box{text-align: center;position: relative;}
.num-box span{color: #ffdfb1;font-size: 32px;display: inline-block;}
.dot{width: 30px;margin: 10px auto;position: relative;z-index: 2;opacity: .7;}
.line{bottom: 13px;}
.baixi-2{width: 96%;margin: 0 auto 0;padding-top: 80px;position: relative;}
.baixi-2 .card-el-1{left: 5%;top: 15%;}
.baixi-2 .brid{left: 1%;top: 5%;}
.baixi-2  .card-el-2{width: 150px;bottom: 3%;right: 2%;}
.baixi-2  .card-el-3{width: 80px;bottom: 3%;right: 7%;}
.baixi-2 .xizi-img{top: 80px;width: 100%;left: 0;}
.baixi-2 .card-text{text-align: center;font-size: 36px;}
.baixi-2 .card-text p{font-size: inherit;font-weight: bold;}

.card-box{transition: transform .5s;}
.card-box.filp{transform: scaleX(-1) translateZ(1px);}
.card-text{width: 80%;display: none;animation: fadeIn .5s linear forwards .2s;opacity: 0;}
.xizi-img{animation: fadeIn .5s linear forwards .2s;opacity: 0;}
.card-box.filp .card-text{display: block;}
.card-text p{font-size: 28px;color: #333;line-height: 1.5;text-decoration: none;text-underline-offset: 2px;font-family: sys-r;}
.card-text p.avatar{text-align: right;text-decoration: none;}
.card-box.filp .card-text img{transform: scaleX(-1) translateZ(1px);}
.card-box.filp .card-text p{transform: scaleX(-1) translateZ(1px);}
.card-box.filp .xizi-img{display: none;}
.card-text-item{margin-bottom: 10px;}

.swiper-3{height: 110px;padding: 4px 0 0!important;width: 100%;z-index: 50;}
.xizi-thumb{width: 106px;height: 106px;padding: 4px;border: 1px solid #ffdfb1;border-radius: 50px;transform: scale(.7);position: relative;transition: transform .2s;}
.xizi-thumb::after{content: '';width: 110%;height: 110%;background-color: rgba(0, 0, 0, .5);top: -5%;left: -5%;position: absolute;border-radius: 50%;}
.xizi-thumb-box{width: 100%;height: 100%;background-color: #ffdfb1;border-radius: 50%;overflow: hidden;position: relative;}
.xizi-thumb-box img{position: absolute;bottom: 14%;left: 0;width: 80%;left: 10%;}
.swiper-3 .swiper-slide-active .xizi-thumb{transform: scale(.9);margin: 0 0px;}
.swiper-3 .swiper-slide-active .xizi-thumb::after{opacity: 0;}

.click-list{bottom: 6%;justify-content: space-between;width: 95%;left: 2.5%;z-index: 50;}
.click-list li{width: 65px;height: 65px;background-color: #fff;opacity: 0;}

.not-touch{pointer-events: none;}
.page-el{top: 0;right: 0;width: 80%;}
.page-el-2{width: 200px;bottom: 3%;right: 0;transform: translate3d(5px,-3px,0);animation-duration: 1.5s;}
.page-el-3{width: 90%;left: 0;bottom: 0;}
.page-el-4{width: 430px;transform: translate3d(-5px,3px,0);animation-duration: 1.5s;left: 0;bottom: 0;}
.page-el-5{width: 130px;bottom: -2%;left: 3%;animation-delay: .8s;}
.page-el-6{width: 140px;bottom: 0;left: 16%;animation-delay: 1.2s;}
.page-el-9{top: 0;right: 0;transform: translate3d(4px,-3px,0);animation-duration: 1.8s;}
.page-el-10{bottom: 0;left: 0;transform: translate3d(-4px,3px,0);animation-duration: 1.8s;}

.poster{top: -100vh;z-index: -99;width: 100%;
/* top: 0;z-index: 99; */
}
.qrcode{width: 120px;height: 120px;bottom: 7%;left: 17.5%;}
.save-img{width: 100%;height: 100%;z-index: 30;opacity: 0;top:0;left: 0;}
.save-img img{pointer-events: auto;height: 100%;}


/* ================弹窗==================== */
/* .tc-tip3{display: block;z-index: 5000;} */

.tc .center{width: 70%;}
.close{width: 70px;margin: 50px auto 0;animation-delay: .8s;}
.btn-gift2{width: 360px;top: 90px;right: 20px;}

.tc-zhong .center{width: 80%;top: 45%;}
.tc-zhong .close{position: absolute;top: -60px;right: -30px;}
.tc-zhong .btns{justify-content: center;align-items: center;top: 11%;}
.tc-zhong .btns .btn{width: 180px;margin: 0 20px;}
.tc-zhong .btns .btn img:nth-of-type(2){display: none;}
.tc-zhong .btns .btn.on img:nth-of-type(1){display: none;}
.tc-zhong .btns .btn.on img:nth-of-type(2){display: block;}
.btn-change{width: 250px;left: calc(50% - 125px);bottom: -100px;}
.list{position: absolute;width: 500px;left: 7%;height: 68%;overflow-y: scroll;background:none;top: 27%;}
.list li{justify-content: space-between;align-items: center;height: 50px;border-bottom: 1px dashed #666;margin-bottom: 20px;}
.list li span{font-size: 24px;color: #333;display: block;}
.list li span:nth-of-type(1){width: 120px;text-align: center;}
.list li span:nth-of-type(2){width: 180px;text-align: center;}
.list li span:nth-of-type(3){width: 150px;text-align: center;}
.page-el-7{right: 0;width: 160px;right: -80px;top: -60px;transform: translate3d(5px,-3px,0);animation-duration: 1.5s;}
.page-el-8{right: 0;width: 220px;left: -80px;bottom: -240px;transform: translate3d(-3px,2px,0);animation-duration: 1.2s;}

.tc-tip2 .center{width: 300px;}
.tc-tip3 .center{width: 240px;}
.icon-hand{width: 100px;top: 37%;left: 45%;transform: translate3d(0,20px,0);animation-duration: 1.2s;}

/* =======================页面宽度固定750的兼容适配====================== */

/* 640 */
@media screen and (max-height:1280px){
}

/* 620 */
@media screen and (max-height:1240px){
  .form .btns{bottom: 1%;}

  .bg-gif{top: 54%;}
  .video-box{top: 54%;}
 
}
/* 589 */
@media screen and (max-height:1178px){
 .form-box{top: 10%;transform: scale(.95);}
 .btn-submit{margin-bottom: 20px;}

 .bg-gif{top: 58%;}
 .video-box{top: 58%;}
}
/* 560 */
@media screen and (max-height:1120px){

}

/* 672 i8p */
@media screen and (max-height:1344px){

}

/* 700 */
@media screen and (min-height:1400px){
  .form .btns{bottom: 12%;}
}


/* =======================兼容适配====================== */

/* 小屏安卓 */
@media screen and (max-height:620px) and (min-width:359px){
  
}
/* 小屏安卓 */
@media screen and (max-height:589px) and (min-width:359px){
  
}
/* 小屏安卓 */
@media screen and (max-height:560px) and (min-width:359px){
   
}

/* 大屏安卓 */
@media screen and (min-height:700px) and (min-width:360px){
  
}

/* ip6/7/8p  414 * 736  wx:414 * 672 wx+:414 * 622 */
@media screen and (min-width:400px) and (min-height:600px) and (max-height:700px){  
}

/* ipxr  414 * 808  wx:414 * 808 wx+:414 * 759 */
@media screen and (min-width:400px) and (min-height:700px){

}