/*css reset*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;margin: 0;padding: 0;}
html,body{ padding: 0; margin: 0; font-family: "思源黑体","Source Han Sans CN","微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 12px;line-height: 1;}
ol, ul {list-style: none; padding: 0; margin: 0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0;}
th,td { vertical-align: middle;padding: 0;}
a{text-decoration:none;	outline: none;hlbr:expression(this.onFocus=this.blur());}
input, select,textarea {vertical-align: middle;padding: 0;margin: 0 ;border: 0 none;outline: none; box-shadow: none;-webkit-appearance: none;appearance: none;-ms-appearance: none;-moz-appearance: none;-o-appearance: none;border-radius: 0;}
img, iframe {border: none; text-decoration:none;}
img{vertical-align: top;}
strong {font-weight: bold;}
h1,h2,h3,h4,h5,h6{padding: 0; margin: 0;}
:focus {outline: 0;}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ccc;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ccc;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #ccc;
}
/*css common*/
.f-left {float: left;}
.f-right {float: right;}
.clearfix:after{content: "";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;font-size:0;}
.clearfix{*zoom:1;}
html{margin: 0 auto;overflow: hidden;background-color: #fff;}
html, body{height: 100%;}
.inner{width: 92%;margin: 0 auto;}
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%; -o-text-size-adjust: 100%;text-size-adjust: 100%;  font-size: 16px;}
body{
	 font-size: 62.5%;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
}
sup{
  font-size: 0.5em;
}



.noani{
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
.swiper-container{
  width: 100%;
  height: 100%;
}
.swiper-slide{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
}
.logo{
  position: absolute;
  left: 0.625rem;
  top: 1.6875rem;
  width: 12.90625rem;
}
.main{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bgline{
  position: absolute;
  right: 100%;
}
.bgline.red{
  top: 21%;
  width: 3.6875rem;
}
.swiper-slide.active .bgline.red{
  -webkit-animation: bgline 1.5s linear infinite;
  -moz-animation: bgline 1.5s linear infinite;
  -o-animation: bgline 1.5s linear infinite;
  animation: bgline 1.5s linear infinite;
}
.bgline.cyan{
  top: 21.89%;  
  width: 2.4375rem;
}
.swiper-slide.active .bgline.cyan{
  -webkit-animation: bgline 1s 0.25s linear infinite;
  -moz-animation: bgline 1s 0.25s linear infinite;
  -o-animation: bgline 1s 0.25s linear infinite;
  animation: bgline 1s 0.25s linear infinite;
}
@-webkit-keyframes bgline {
  0%{
    -webkit-transform: translateX(0);
  }
  50%{
    -webkit-transform: translateX(30rem);
  }
  100%{
    -webkit-transform: translateX(30rem);
  }
}
@-moz-keyframes bgline {
  0%{
    -moz-transform: translateX(0);
  }
  50%{
    -moz-transform: translateX(30rem);
  }
  100%{
    -moz-transform: translateX(30rem);
  }
}
@-o-keyframes bgline {
  0%{
    -o-transform: translateX(0);
  }
  50%{
    -o-transform: translateX(30rem);
  }
  100%{
    -o-transform: translateX(30rem);
  }
}
@keyframes bgline {
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(30rem);
  }
  100%{
    transform: translateX(30rem);
  }
}
.bgtext{
  position: absolute;
}
.bgtext.version{
  width: 72.4%;
  top: 14.318%;
  left: -15%;
}
.bgtext.era{
  width: 68.4%;
  left: 41.333%;
  bottom: 18.9655%;
  -webkit-animation-delay: 50ms;
  -moz-animation-delay: 50ms;
  -o-animation-delay: 50ms;
  animation-delay: 50ms;
}
.bgplanet{
  position: absolute;
}
.bgplanet.one{
  width: 1.75rem;
  top: 22.114%;
  right: 23.6%;
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.bgplanet.two{
  width: 2.5625rem;
  left: 8.8%;
  top: 41.3%;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.bgplanet.three{
  width: 1.75rem;
  right: 8.8%;
  top: 46.03%;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
.bgplanet.four{
  width: 1.75rem;
  left: 13.866%;
  top: 62.668%;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.bgplanet.five{
  width: 1.0625rem;
  right: 17.066%;
  top: 59.67%;
}
.swiper-slide.active .bgplanet.one{
  -webkit-animation: planetone 10s linear infinite both;
  -moz-animation: planetone 10s linear infinite both;
  -o-animation: planetone 10s linear infinite both;
  animation: planetone 10s linear infinite both;
}
.swiper-slide.active .bgplanet.two{
  -webkit-animation: planettwo 20s linear infinite both;
  -moz-animation: planettwo 20s linear infinite both;
  -o-animation: planettwo 20s linear infinite both;
  animation: planettwo 20s linear infinite both;
}
.swiper-slide.active .bgplanet.three{
  -webkit-animation: planetwoe 15s linear infinite both;
  -moz-animation: planettwo 15s linear infinite both;
  -o-animation: planettwo 15s linear infinite both;
  animation: planettwo 15s linear infinite both;
}
.swiper-slide.active .bgplanet.four{
  -webkit-animation: planetone 10s linear infinite both;
  -moz-animation: planetone 10s linear infinite both;
  -o-animation: planetone 10s linear infinite both;
  animation: planetone 10s linear infinite both;
}
.swiper-slide.active .bgplanet.five{
  -webkit-animation: planetone 5s linear infinite both;
  -moz-animation: planetone 5s linear infinite both;
  -o-animation: planetone 5s linear infinite both;
  animation: planetone 5s linear infinite both;
}
@-webkit-keyframes planetone {
  0% {
      -webkit-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg) translate(-100%) rotate(-360deg);
  }
}
@-moz-keyframes planetone {
  0% {
      -moz-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -moz-transform: rotate(360deg) translate(-100%) rotate(-360deg);
  }
}
@-o-keyframes planetone {
  0% {
      -o-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -o-transform: rotate(360deg) translate(-100%) rotate(-360deg);
  }
}
@keyframes planetone {
  0% {
      transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      transform: rotate(360deg) translate(-100%) rotate(-360deg);
  }
}
@-webkit-keyframes planettwo {
  0% {
      -webkit-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(-360deg) translate(-100%) rotate(360deg);
  }
}
@-moz-keyframes planettwo {
  0% {
      -moz-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -moz-transform: rotate(-360deg) translate(-100%) rotate(360deg);
  }
}
@-o-keyframes planettwo {
  0% {
      -o-transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      -o-transform: rotate(-360deg) translate(-100%) rotate(360deg);
  }
}
@keyframes planettwo {
  0% {
      transform: rotate(0deg) translate(-100%) rotate(0deg);
  }
  100% {
      transform: rotate(-360deg) translate(-100%) rotate(360deg);
  }
}
.bgshap{
  position: absolute;
}
.bgshap.one{
  width: 18.8%;
  top: -2.7%;
  right: -4%;
}
.bgshap.two{
  opacity: 0.1;
  width: 28.5333%;
  top: 35.6%;
  right: -24%;
}
.bgshap.three{
  opacity: 0.1;
  width: 28.5333%;
  top: 50%;
  left: -24%;
}
.bgshap.four{
  opacity: 0.3;
  width: 28.5333%;
  left: -9.5%;
  bottom: -1.874%;
}
.bgshap.five{
  width: 55.2%;
  bottom: -19.115%;
  right: -13.2%;
}
.swiper-slide.active .bgshap{
  -webkit-animation: fullrotate 20s linear infinite both;
  -moz-animation: fullrotate 20s linear infinite both;
  -o-animation: fullrotate 20s linear infinite both;
  animation: fullrotate 20s linear infinite both;
}
@-webkit-keyframes fullrotate {
  0%{
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes fullrotate {
  0%{
    -moz-transform: rotate(0deg);
  }
  100%{
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes fullrotate {
  0%{
    -o-transform: rotate(0deg);
  }
  100%{
    -o-transform: rotate(360deg);
  }
}
@keyframes fullrotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.bgray-box{
  width: 100%;
  position: absolute;
  left: 0;
  top: 28.86%;
  overflow: hidden;
}
.bgray-box .bg{
  width: 100%;
}
.bgray-box .moveray{
  position: absolute;
  height: 100%;
  right: 100%;
  top: 0;
}
.swiper-slide.active .bgray-box .moveray.one{
  -webkit-animation: bgraymove 3s linear infinite;
  -moz-animation: bgraymove 3s linear infinite;
  -o-animation: bgraymove 3s linear infinite;
  animation: bgraymove 3s linear infinite;
}
.swiper-slide.active .bgray-box .moveray.two{
  -webkit-animation: bgraymove 3s 1s linear infinite;
  -moz-animation: bgraymove 3s 1s linear infinite;
  -o-animation: bgraymove 3s 1s linear infinite;
  animation: bgraymove 3s 1s linear infinite;
}
.swiper-slide.active .bgray-box .moveray.three{
  -webkit-animation: bgraymove 3s 2s linear infinite;
  -moz-animation: bgraymove 3s 2s linear infinite;
  -o-animation: bgraymove 3s 2s linear infinite;
  animation: bgraymove 3s 2s linear infinite;
}
@-webkit-keyframes bgraymove {
  0%{
    -webkit-transform: translateX(0);
  }
  100%{
    -webkit-transform: translateX(70rem);
  }
}
@-moz-keyframes bgraymove {
  0%{
    -moz-transform: translateX(0);
  }
  100%{
    -moz-transform: translateX(70rem);
  }
}
@-o-keyframes bgraymove {
  0%{
    -o-transform: translateX(0);
  }
  100%{
    -o-transform: translateX(70rem);
  }
}
@keyframes bgraymove {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(70rem);
  }
}
.bgtri-box{
  width: 1.24rem;
  position: absolute;
  left: 50%;
  bottom: 3.3%;
  margin-left: -0.725rem;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.swiper-slide.active .bgtri-box{
  -webkit-animation: bgtriboxani 0.75s infinite both;
  -moz-animation: bgtriboxani 0.75s infinite both;
  -o-animation: bgtriboxani 0.75s infinite both;
  animation: bgtriboxani 0.75s infinite both;
  opacity: 1;
}
@-webkit-keyframes bgtriboxani {
  0%{
    -webkit-transform: translateY(0);
  }
  50%{
    -webkit-transform: translateY(0.5rem);
  }
  100%{
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes bgtriboxani {
  0%{
    -moz-transform: translateY(0);
  }
  50%{
    -moz-transform: translateY(0.5rem);
  }
  100%{
    -moz-transform: translateY(0);
  }
}
@-o-keyframes bgtriboxani {
  0%{
    -o-transform: translateY(0);
  }
  50%{
    -o-transform: translateY(0.5rem);
  }
  100%{
    -o-transform: translateY(0);
  }
}
@keyframes bgtriboxani {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(0.5rem);
  }
  100%{
    transform: translateY(0);
  }
}
.bgtri-box.small{
  width: 0.833rem;
  bottom: 5.2%;
  margin-left: -0.5rem;
}
.bgtri-box img{
  width: 100%;
}
.bgtri-box .img,.bgtri-box .white,.bgtri-box .cyan,.bgtri-box .purple{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.bgtri-box .white,.bgtri-box .cyan,.bgtri-box .purple{
  height: 100%;
}
/*.swiper-slide.active  .bgtri-box .purple{
  -webkit-animation: bgtripurple 1s infinite;
  -moz-animation: bgtripurple 1s infinite;
  -o-animation: bgtripurple 1s infinite;
  animation: bgtripurple 1s infinite;
}
.swiper-slide.active  .bgtri-box .cyan{
  -webkit-animation: bgtricyan 1s infinite;
  -moz-animation: bgtricyan 1s infinite;
  -o-animation: bgtricyan 1s infinite;
  animation: bgtricyan 1s infinite;
}*/
@-webkit-keyframes bgtricyan {
  0%{
    -webkit-transform: translateY(0%);
  }
  10%{
    -webkit-transform: translateY(20%);
  }
  20%{
    -webkit-transform: translateY(0%);
  }
  30%{
    -webkit-transform: translateY(20%);
  }
  40%{
    -webkit-transform: translateY(0%);
  }
  100%{
    -webkit-transform: translateY(0%);
  }
}
@-moz-keyframes bgtricyan {
  0%{
    -moz-transform: translateY(0%);
  }
  10%{
    -moz-transform: translateY(20%);
  }
  20%{
    -moz-transform: translateY(0%);
  }
  30%{
    -moz-transform: translateY(20%);
  }
  40%{
    -moz-transform: translateY(0%);
  }
  100%{
    -moz-transform: translateY(0%);
  }
}
@-o-keyframes bgtricyan {
  0%{
    -o-transform: translateY(0%);
  }
  10%{
    -o-transform: translateY(20%);
  }
  20%{
    -o-transform: translateY(0%);
  }
  30%{
    -o-transform: translateY(20%);
  }
  40%{
    -o-transform: translateY(0%);
  }
  100%{
    -o-transform: translateY(0%);
  }
}
@keyframes bgtricyan {
  0%{
    transform: translateY(0%);
  }
  10%{
    transform: translateY(20%);
  }
  20%{
    transform: translateY(0%);
  }
  30%{
    transform: translateY(20%);
  }
  40%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(0%);
  }
}
@-webkit-keyframes bgtripurple {
  0%{
    -webkit-transform: translateY(0%);
  }
  10%{
    -webkit-transform: translateY(-20%);
  }
  20%{
    -webkit-transform: translateY(0%);
  }
  30%{
    -webkit-transform: translateY(-20%);
  }
  40%{
    -webkit-transform: translateY(0%);
  }
  100%{
    -webkit-transform: translateY(0%);
  }
}
@-moz-keyframes bgtripurple {
  0%{
    -moz-transform: translateY(0%);
  }
  10%{
    -moz-transform: translateY(-20%);
  }
  20%{
    -moz-transform: translateY(0%);
  }
  30%{
    -moz-transform: translateY(-20%);
  }
  40%{
    -moz-transform: translateY(0%);
  }
  100%{
    -moz-transform: translateY(0%);
  }
}
@-o-keyframes bgtripurple {
  0%{
    -o-transform: translateY(0%);
  }
  10%{
    -o-transform: translateY(-20%);
  }
  20%{
    -o-transform: translateY(0%);
  }
  30%{
    -o-transform: translateY(-20%);
  }
  40%{
    -o-transform: translateY(0%);
  }
  100%{
    -o-transform: translateY(0%);
  }
}
@keyframes bgtripurple {
  0%{
    transform: translateY(0%);
  }
  10%{
    transform: translateY(-20%);
  }
  20%{
    transform: translateY(0%);
  }
  30%{
    transform: translateY(-20%);
  }
  40%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(0%);
  }
}
/*.swiper-slide.active .bgtri-box .img.small1{
  -webkit-animation: bgtripurple 1s infinite;
  -moz-animation: bgtripurple 1s infinite;
  -o-animation: bgtripurple 1s infinite;
  animation: bgtripurple 1s infinite;
}
.swiper-slide.active .bgtri-box .img.small2{
  -webkit-animation: bgtricyan 1s infinite;
  -moz-animation: bgtricyan 1s infinite;
  -o-animation: bgtricyan 1s infinite;
  animation: bgtricyan 1s infinite;
}*/




.swiper-slide.active .douyinhorizonleftsmall{
  -webkit-animation: douyinhorizonleftsmall 1s infinite;
  -moz-animation: douyinhorizonleftsmall 1s infinite;
  -o-animation: douyinhorizonleftsmall 1s infinite;
  animation: douyinhorizonleftsmall 1s infinite;
}
.swiper-slide.active .douyinhorizonrightsmall{
  -webkit-animation: douyinhorizonrightsmall 1s infinite;
  -moz-animation: douyinhorizonrightsmall 1s infinite;
  -o-animation: douyinhorizonrightsmall 1s infinite;
  animation: douyinhorizonrightsmall 1s infinite;
}
.swiper-slide.active .douyinhorizonleftbig{
  -webkit-animation: douyinhorizonleftbig 1s infinite;
  -moz-animation: douyinhorizonleftbig 1s infinite;
  -o-animation: douyinhorizonleftbig 1s infinite;
  animation: douyinhorizonleftbig 1s infinite;
}
.swiper-slide.active .douyinhorizonrightbig{
  -webkit-animation: douyinhorizonrightbig 1s infinite;
  -moz-animation: douyinhorizonrightbig 1s infinite;
  -o-animation: douyinhorizonrightbig 1s infinite;
  animation: douyinhorizonrightbig 1s infinite;
}


@-webkit-keyframes douyinhorizonleftsmall {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -webkit-transform: translateX(-1px);
  }
  20%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -webkit-transform: translateX(-1px);
  }
  40%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes douyinhorizonleftsmall {
  0%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -moz-transform: translateX(-1px);
  }
  20%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -moz-transform: translateX(-1px);
  }
  40%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes douyinhorizonleftsmall {
  0%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -o-transform: translateX(-1px);
  }
  20%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -o-transform: translateX(-1px);
  }
  40%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -o-transform: translateX(0);
  }
}
@keyframes douyinhorizonleftsmall {
  0%{
    opacity: 0;
    transform: translateX(0);
  }
  10%{
    opacity: 1;
    transform: translateX(-1px);
  }
  20%{
    opacity: 0;
    transform: translateX(0);
  }
  30%{
    opacity: 1;
    transform: translateX(-1px);
  }
  40%{
    opacity: 0;
    transform: translateX(0);
  }
  100%{
    opacity: 0;
    transform: translateX(0);
  }
}
@-webkit-keyframes douyinhorizonrightsmall {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -webkit-transform: translateX(1px);
  }
  20%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -webkit-transform: translateX(1px);
  }
  40%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes douyinhorizonrightsmall {
  0%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -moz-transform: translateX(1px);
  }
  20%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -moz-transform: translateX(1px);
  }
  40%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes douyinhorizonrightsmall {
  0%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -o-transform: translateX(1px);
  }
  20%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -o-transform: translateX(1px);
  }
  40%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -o-transform: translateX(0);
  }
}
@keyframes douyinhorizonrightsmall {
  0%{
    opacity: 0;
    transform: translateX(0);
  }
  10%{
    opacity: 1;
    transform: translateX(1px);
  }
  20%{
    opacity: 0;
    transform: translateX(0);
  }
  30%{
    opacity: 1;
    transform: translateX(1px);
  }
  40%{
    opacity: 0;
    transform: translateX(0);
  }
  100%{
    opacity: 0;
    transform: translateX(0);
  }
}

@-webkit-keyframes douyinhorizonleftbig {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -webkit-transform: translateX(-5%);
  }
  20%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -webkit-transform: translateX(-5%);
  }
  40%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes douyinhorizonleftbig {
  0%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -moz-transform: translateX(-5%);
  }
  20%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -moz-transform: translateX(-5%);
  }
  40%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes douyinhorizonleftbig {
  0%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -o-transform: translateX(-5%);
  }
  20%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -o-transform: translateX(-5%);
  }
  40%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -o-transform: translateX(0);
  }
}
@keyframes douyinhorizonleftbig {
  0%{
    opacity: 0;
    transform: translateX(0);
  }
  10%{
    opacity: 1;
    transform: translateX(-5%);
  }
  20%{
    opacity: 0;
    transform: translateX(0);
  }
  30%{
    opacity: 1;
    transform: translateX(-5%);
  }
  40%{
    opacity: 0;
    transform: translateX(0);
  }
  100%{
    opacity: 0;
    transform: translateX(0);
  }
}
@-webkit-keyframes douyinhorizonrightbig {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -webkit-transform: translateX(5%);
  }
  20%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -webkit-transform: translateX(5%);
  }
  40%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes douyinhorizonrightbig {
  0%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -moz-transform: translateX(5%);
  }
  20%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -moz-transform: translateX(5%);
  }
  40%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes douyinhorizonrightbig {
  0%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  10%{
    opacity: 1;
    -o-transform: translateX(5%);
  }
  20%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  30%{
    opacity: 1;
    -o-transform: translateX(5%);
  }
  40%{
    opacity: 0;
    -o-transform: translateX(0);
  }
  100%{
    opacity: 0;
    -o-transform: translateX(0);
  }
}
@keyframes douyinhorizonrightbig {
  0%{
    opacity: 0;
    transform: translateX(0);
  }
  10%{
    opacity: 1;
    transform: translateX(5%);
  }
  20%{
    opacity: 0;
    transform: translateX(0);
  }
  30%{
    opacity: 1;
    transform: translateX(5%);
  }
  40%{
    opacity: 0;
    transform: translateX(0);
  }
  100%{
    opacity: 0;
    transform: translateX(0);
  }
}


.titlefall{
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.swiper-slide.active .titlefall{
  -webkit-animation: titlefall 1s ease-in forwards;
  -moz-animation: titlefall 1s ease-in forwards;
  -o-animation: titlefall 1s ease-in forwards;
  animation: titlefall 1s ease-in forwards;
}
@-webkit-keyframes titlefall {
  0%{
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    -webkit-transform: translateY(25%);
    opacity: 1;
  }
  60%{
    -webkit-transform: translateY(-20%);
  }
  70%{
    -webkit-transform: translateY(15%);
  }
  80%{
    -webkit-transform: translateY(-10%);
  }
  90%{
    -webkit-transform: translateY(5%);
  }
  100%{
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
}
@-moz-keyframes titlefall {
  0%{
    -moz-transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    -moz-transform: translateY(25%);
    opacity: 1;
  }
  60%{
    -moz-transform: translateY(-20%);
  }
  70%{
    -moz-transform: translateY(15%);
  }
  80%{
    -moz-transform: translateY(-10%);
  }
  90%{
    -moz-transform: translateY(5%);
  }
  100%{
    -moz-transform: translateY(0%);
    opacity: 1;
  }
}
@-o-keyframes titlefall {
  0%{
    -o-transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    -o-transform: translateY(25%);
    opacity: 1;
  }
  60%{
    -o-transform: translateY(-20%);
  }
  70%{
    -o-transform: translateY(15%);
  }
  80%{
    -o-transform: translateY(-10%);
  }
  90%{
    -o-transform: translateY(5%);
  }
  100%{
    -o-transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes titlefall {
  0%{
    transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    transform: translateY(25%);
    opacity: 1;
  }
  60%{
    transform: translateY(-20%);
  }
  70%{
    transform: translateY(15%);
  }
  80%{
    transform: translateY(-10%);
  }
  90%{
    transform: translateY(5%);
  }
  100%{
    transform: translateY(0%);
    opacity: 1;
  }
}
.btn-music img{ position:absolute; top:10px; right:2%; width:6%; z-index:7;}
.btn-music img.play{animation:rond 2400ms infinite;-webkit-animation:rond 2400ms infinite;animation-delay:1s;-moz-animation-delay: -1s /* Firefox */;-webkit-animation-delay: -1s;animation-timing-function: linear;-moz-animation-timing-function: linear;-webkit-animation-timing-function: linear;}
.btn-music .stop{  display: none;}
.btn-music.muted img{display:none;}
.btn-music.muted img.stop{display: block;}
@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

@-webkit-keyframes rond {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}
}


.loading-page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 55;
  background-color: #1d0037;
  background-repeat: no-repeat;
  background-image: url(../images/loading_bg.jpg);
  background-size: 100% 100%;
  -webkit-display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  -moz-display: flex;
  -moz-align-items: center;
  -moz-justify-content: center;
  -moz-flex-direction: column;
  -o-display: flex;
  -o-align-items: center;
  -o-justify-content: center;
  -o-flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.loading-page.hide{
  opacity: 0;
}
.loading-page h5{
  font-size: 1.4375rem;
  color: #ff53f2;
  font-weight: bold;
  margin-bottom: 1.125rem;
}
.loading-page .loading-bar{
  width: 86.266%;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 1px 5px 0px rgba(77, 37, 11, 0.89);
  border-radius: 1.03125rem;
  padding: 0.25rem;
}
.loading-page .loading-bar .bg{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.loading-page .loading-bar .line{
  height: 1.5625rem;
  width: 1%;
}



.share-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 55;
  display: none;
  background-color: rgba(0,0,0,0.7);
}
.share-box.active{
  display: block;
}
.share-box img{
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  width: 8.375rem;
}