html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #13152a;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
figure {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

.pr {
  position: relative;
}
.pa {
  position: absolute;
}
#wrap {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/*loading*/
.loading {
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
}
.loading img {
  width: 100%;
}

.flash-box {
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.piao-box {
  top: -40px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.piao-box div {
  top: 0;
  right: 0;
  width: 1334px;
  height: 750px;
  -webkit-transform: translate3d(1334px, -750px, 0);
}

.flash1 {
  bottom: 0;
  left: 0;
  width: 445px;
  height: 295px;
  background: url(../image/flash1.png)
    no-repeat;
  background-size: 100%;
}
.flash2 {
  top: 0;
  right: 0;
  width: 615px;
  height: 453px;
  background: url(../image/flash2.png)
    no-repeat;
  background-size: 100%;
}
.piao1 {
  background: url(../image/piao1.png)
    no-repeat;
  background-size: 100%;
}
.piao2 {
  background: url(../image/piao2.png)
    no-repeat;
  background-size: 100%;
}
.piao3 {
  background: url(../image/piao3.png)
    no-repeat;
  background-size: 100%;
}
.btn-start {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  display: none;
  width: 187px;
  height: 54px;
  margin: 191px 0 0 -78px;
  background: url(../image/btn.png);
  background-size: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.loading.ani {
  background: transparent;
}
.loading.ani img,
.loading.ani .flash-box {
  display: none;
}

.gpu {
  -webkit-transform: translate3d(0, 0, 0);
}

.rotate1 {
  -webkit-animation: rotate 4s cubic-bezier(0.29, -0.01, 0.65, 1.01);
  -webkit-transform-origin: 0 96.8%;
}
.rotate2 {
  -webkit-animation: rotate2 2s cubic-bezier(0.35, 0.01, 0.69, 1.03);
  -webkit-transform-origin: 100% 23%;
}
/*.piaof1{ -webkit-animation: piao 50s -30s infinite; }
.piaof2{ -webkit-animation: piao2 50s -30s infinite; }
.piaof3{ -webkit-animation: piao3 50s -30s infinite; }
.piaof4{ -webkit-animation: piao 50s -15s infinite; }
.piaof5{ -webkit-animation: piao2 50s -15s infinite; }
.piaof6{ -webkit-animation: piao3 50s -15s infinite; }
.piaof7{ -webkit-animation: piao 50s infinite; }
.piaof8{ -webkit-animation: piao2 50s infinite; }
.piaof9{ -webkit-animation: piao3 50s infinite; }*/

.rotate3 {
  -webkit-animation: rotate3 50s -30s cubic-bezier(0.29, -0.01, 0.65, 1.01)
    infinite;
}
.rotate4 {
  -webkit-animation: rotate4 50s -30s cubic-bezier(0.29, -0.01, 0.65, 1.01)
    infinite;
}

.fadeOut {
  -webkit-animation: fadeOut 1s linear both;
}
.fadeDown {
  -webkit-animation: fadeDown 3s ease-in-out both;
}
.bling {
  -webkit-animation: bling 2s linear infinite alternate;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}

@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0.5deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}

@-webkit-keyframes rotate3 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}

@-webkit-keyframes rotate4 {
  0% {
    -webkit-transform: rotate(0deg) rotateY(180deg);
  }
  50% {
    -webkit-transform: rotate(10deg) rotateY(180deg);
  }
  100% {
    -webkit-transform: rotate(0) rotateY(180deg);
  }
}

@-webkit-keyframes piao {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1334px, -750px, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-1334px, 750px, 0);
  }
}
@-webkit-keyframes piao2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1334px, -750px, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-1000px, 750px, 0);
  }
}
@-webkit-keyframes piao3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1334px, -750px, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-500px, 750px, 0);
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeDown {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
  }
}

@-webkit-keyframes fadeDown2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(10px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes bling {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-filter: brightness(2);
  }
}

/*ending落地页*/
.fadel {
  -webkit-animation: fadeLeft 1s ease-in-out both;
}
.fadeDown01 {
  -webkit-animation: fadeDown2 1.5s 1.9s ease-in-out both;
}
.fadeDown02 {
  -webkit-animation: fadeDown2 1.5s 1.7s ease-in-out both;
}
.fadeDown03 {
  -webkit-animation: fadeDown2 1.5s 1.5s ease-in-out both;
}
.fadeDown04 {
  -webkit-animation: fadeDown2 1.5s 1.4s ease-in-out both;
}
.fadeDown05 {
  -webkit-animation: fadeDown2 1.5s 1s ease-in-out both;
}

.ending {
  top: 0;
  left: 0;
  z-index: 997;
  width: 100%;
  height: 100%;
}
.ending img {
  width: 100%;
}
.ending .flicker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 752px;
  height: 626px;
  -webkit-transform: translate(-60%, -45%);
  background: url(../image/flicker.png)
    no-repeat;
  background-size: 100%;
}
.ending .piao-box {
  top: -200px;
}
.ending .tab-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  width: 555px;
  height: 334px;
  margin: -257px 31px 0 0;
}
.ending .tab-box h4 {
  position: absolute;
  top: 0;
  right: 0;
  width: 76px;
  height: 336px;
  background: url(../image/title.png)
    no-repeat;
  background-size: 100%;
}
.ending .btn-box {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 478px;
}
.ending .btn-box a {
  width: 71px;
  height: 275px;
  margin: 0 auto;
  background: url(../image/tab1.png)
    no-repeat;
  background-size: 474px;
  -webkit-tap-highlight-color: transparent;
}
.ending .btn-box .btn1 {
  background-position: 0 0;
}
.ending .btn-box .btn2 {
  background-position: -101px 0;
}
.ending .btn-box .btn3 {
  background-position: -201px 0;
}
.ending .btn-box .btn4 {
  background-position: -302px 0;
}
.ending .btn-box .btn5 {
  margin-right: 24px;
  background-position: -403px 0;
}
.ending .btn-box a.on,
.ending .btn-box a:hover {
  background: url(../image/tab2.png)
    no-repeat;
  background-size: 474px;
}

.ending .btn-box .btn1.on,
.ending .btn-box .btn1:hover {
  background-position: 0 0;
}
.ending .btn-box .btn2.on,
.ending .btn-box .btn2:hover {
  background-position: -101px 0;
}
.ending .btn-box .btn3.on,
.ending .btn-box .btn3:hover {
  background-position: -201px 0;
}
.ending .btn-box .btn4.on,
.ending .btn-box .btn4:hover {
  background-position: -302px 0;
}
.ending .btn-box .btn5.on,
.ending .btn-box .btn5:hover {
  background-position: -403px 0;
}

/*弹窗*/
.dia {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
}
.dia .dia-close {
  position: absolute;
  top: 19px;
  right: -45px;
  z-index: 2;
  display: block;
  width: 70px;
  height: 70px;
  background: url(../image/dia-close.png)
    no-repeat center center;
  background-size: 37px auto;
  -webkit-tap-highlight-color: transparent;
}
.dia .dia-con {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  width: 956px;
  height: 579px;
  background: url(../image/dia-bg.png)
    no-repeat;
  background-size: 100%;
}
.dia .dia-con .main {
  width: 818px;
  height: 460px;
  margin: 57px 0 0 69px;
}
.dia .dia-con .main .txt {
  width: 818px;
  height: 460px;
  background: url(../image/dia-txt.png)
    no-repeat;
  background-size: 100%;
}
.dia-video .video,
.dia-video .video > div {
  width: 100%;
  height: 100%;
}
.dia-video .dia-close {
  top: 0.4rem;
  right: 0.4rem;
  z-index: 10011;
  width: 0.5rem;
  height: 0.5rem;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避;*/
.compatibleStyle {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Chrome 和 Safari */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -webkit-perspective: 0;
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible;
}
.share-wx,
.share-yx {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.share-yx img {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 368px;
  height: 71px;
  -webkit-transform: translateX(-50%);
}
.share-wx img {
  position: absolute;
  top: 0.1rem;
  right: 0.4rem;
  z-index: 2;
  width: 4.19rem;
  height: 1.26rem;
}