@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1.8;
  font-family: 'Microsoft Yahei',arial,verdana,sans-serif;
  font-size: 14px;
  background-color: #090909;
  color: #1B1D2F;  
}
a{
  text-decoration: none;
}

ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
@keyframes bannerScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -1457px;
  }
}
@keyframes downArrow {
  0% {
    transform: scale(0.2);
    opacity: 0;    
  }
  0.01% {
    transform: scale(0.2);
    opacity: 0.2;    
  }  
  50% {
    transform: scale(1) translateY(40px);
    opacity: 1;    
  }
  99.9%{
    transform: scale(0.6) translateY(90px);
    opacity: 0.6;
  }
  100%{
    transform: scale(0.2) translateY(0);
    opacity: 0;
  }  
} 

@keyframes textLoading{
  0%{
    content:'...';
  }
  25%{
    content:'';
  }  
  50%{
    content:'.';
  }
  75%{
    content:'..';
  }
  100%{
    content:'...';
  }
}

.wrapper{
  min-width: 1425px;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.bg-box{
  position: relative;
  z-index: 10;
  width: 100%;
  margin-bottom: -900px;
  min-width: 1425px;
}
.bg-box .bg{
  height: 900px;
  font-size: 0;
  animation: bannerScroll 25s linear infinite;
  background: url(../images/game-photo.jpg) repeat center center;  
  opacity: 0.5;
}

.bg-box .mask{
  content: '';
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/mask.png) no-repeat center center / 100% 100%;
}
.header-wrapper{
  height: 80px;
}
.header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: 80px;
  box-sizing: border-box;
}
.header.fixed{
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1425px;
  background: rgba(9, 9, 9, 0.50);
}
.header .logo{
  width: 157px;
  height: 52px;
  background: url(../images/logo.png) no-repeat center center;
}
.go-home-btn, .top-join-btn{
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
.top-join-btn{
  width: 150px;
  color: #fff;
  background: linear-gradient( 90deg, #FFBE21 0%, #FF9B0D 100%);
  margin-right: 16px;
  transition: all linear 200ms;
}
.top-join-btn:before{
  content: '';
  display: inline-block;
  vertical-align: -3px;
  width: 14px;
  height: 15px;
  background: url(../images/icon-qq.png) no-repeat 0 0;
  margin-right: 8px;
}
.top-join-btn:hover{
  filter: brightness(105%);
}
.go-home-btn{
  width: 109px;
  color:#D6D4D2;
  background: rgba(255,255,255,0.1);
  transition: color linear 200ms;
}
.go-home-btn:hover{
  color: #fff;
}
/*
.container{
  width: 1425px;
  margin: 0 auto;
}
  */
.footer{
  text-align: center;
  color: #B1B3C4;
  line-height: 54px;
  background: #1B1E3D;
}
.section01{
  padding: 60px 0 120px;
  height: 624px;
  box-sizing:border-box;
}
.section01 .txt01{
  margin: 0 auto 35px;
  width: 600px;
  height: 56px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/section01-txt01.png) no-repeat center center;
}
.section01 .txt02{
  margin: 0 auto 35px;
  width: 1171px;
  height: 96px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/section01-txt02.png) no-repeat center center;
}
.section01 .txt03{
  font-size: 20px;
  color:rgba(255,255,255,0.7);
  text-align: center;
  margin-bottom: 60px;
}
.section01 .txt03 span{
  margin:0 40px;
}
.join-btn{
  width: 260px;
  line-height: 64px;
  margin: 0 auto 60px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.join-btn i{
  color: #FC990E;
  margin-left: 5px;
}
.join-btn:hover{
  background: linear-gradient( 157deg, #FFBE21 0%, #FF9B0D 100%);
  transform: translate(0,-10px);
}
.join-btn:hover i{
  color: #fff;
}
.down-arrow{
  position: relative;
  width: 48px;
  margin: 0 auto;
}
.down-arrow span{
  position:absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  width: 48px;
  height: 34px;
  background: url(../images/down-arrow.png) no-repeat center center;
  transform: scale(0);
  opacity: 0;
  animation: downArrow 1.5s linear infinite;
}
.section-head{
  font-weight: bold;
  font-size: 54px;
  color: #FFFFFF;
  text-align: center;
}
.section02{
  padding: 60px 0;
  height: 1118px;
  box-sizing: border-box;
  background:linear-gradient( to bottom, #16161A 0%, #090909 100%);
}
.section03{
  padding: 200px 0 80px;
  background:linear-gradient( to bottom, #1E204D 0%, #2A2E75 100%);
  position: relative;
  height: 1485px;
  box-sizing: border-box;

}
.section-top-arrow{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1280px;
  width: 2560px;
  height: 135px;
  background: url(../images/section-top-arrow.png) no-repeat center center;
}
.section-bottom-arrow{
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1280px;
  width: 2560px;
  height: 208px;
  background: url(../images/section-bottom-arrow.png) no-repeat center center;
}
.section-top-arrow2{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1280px;
  width: 2560px;
  height: 208px;
  background: url(../images/section-bottom-arrow.png) no-repeat center center;
  transform: rotate(180deg);
}
.section03 .txt02{
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 55px;
}
.section03 .img-intro, .section03 .icon-intro {
  width:1425px;
  margin: 0 auto 64px;
}
.section03 .img-intro ul{
  margin: 0 -35px 0 -34px;
}
.section03 .img-intro ul:after, .section03 .icon-intro ul:after{
  clear: both;
  display: block;
  height: 0;
  content: ".";
  visibility: hidden;
}
.section03 .img-intro li{
  float: left;
  margin: 0 35px 0 34px;
  transition: all .2s;
}
.section03 .img-intro li:hover{
  transform: translateY(-10px);
}
.section03 .img-intro img{
  vertical-align: top;
}
.section03 .icon-intro li{
  float: left;
  text-align: center;
  margin: 0 78px 70px;
  width: 200px;
  cursor: default;
  transition: all .2s;
}
.section03 .icon-intro li:hover{
  transform: translateY(-10px);
}
.section03 .icon-intro li:hover span{
  color: #FFA526;
}
.section03 .icon-intro li i{
  display: block;
  margin: 0 auto 15px;
  width: 135px;
  height: 135px;
  background-color: rgba(255,255,255,0.2);
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 48px;
}
.section03 .icon-intro li span{
  font-size: 20px;
  color: #FFFFFF;
}
.section03 .icon-intro li .icon01{
  background-image: url(../images/icon01.png);
}
.section03 .icon-intro li .icon02{
  background-image: url(../images/icon02.png);
}
.section03 .icon-intro li .icon03{
  background-image: url(../images/icon03.png);
}
.section03 .icon-intro li .icon04{
  background-image: url(../images/icon04.png);
}
.section03 .icon-intro li .icon05{
  background-image: url(../images/icon05.png);
}
.section03 .icon-intro li .icon06{
  background-image: url(../images/icon06.png);
}
.section03 .icon-intro li .icon07{
  background-image: url(../images/icon07.png);
}
.section03 .icon-intro li .icon08{
  background-image: url(../images/icon08.png);
}
.section03 .icon-intro li:hover .icon01{
  background-image: url(../images/icon01-hover.png);
}
.section03 .icon-intro li:hover .icon02{
  background-image: url(../images/icon02-hover.png);
}
.section03 .icon-intro li:hover .icon03{
  background-image: url(../images/icon03-hover.png);
}
.section03 .icon-intro li:hover .icon04{
  background-image: url(../images/icon04-hover.png);
}
.section03 .icon-intro li:hover .icon05{
  background-image: url(../images/icon05-hover.png);
}
.section03 .icon-intro li:hover .icon06{
  background-image: url(../images/icon06-hover.png);
}
.section03 .icon-intro li:hover .icon07{
  background-image: url(../images/icon07-hover.png);
}
.section03 .icon-intro li:hover .icon08{
  background-image: url(../images/icon08-hover.png);
}
.section04{
  padding: 80px 0;
  background:linear-gradient(to bottom, #1C1F48 0%, #090909 100%);
  position: relative;
  height: 1044px;
  box-sizing: border-box;  
}
.section-tab-group{
  width: 1428px;
  margin: 0 auto;
}
.section-tab-box{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin: 0 -80px;
  padding: 20px 0 0;
}
.section-tab-box span{
  font-size: 18px;
  color: #fff;
  width: 240px;
  text-align: center;
  margin: 0 15px;
  cursor: pointer;
  line-height: 54px;
  opacity: 0.5;
}
.section-tab-box span:hover{
  opacity: 1;
}
.section-tab-box span.active{
  font-weight: bold;
  opacity: 1;
  border-bottom: 2px solid #fff;
}
.icon-game, .icon-safe, .icon-service{
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 10px;
  vertical-align: -4px;
}
.icon-game{
  background: url(../images/icon-game.png) no-repeat center center;
}
.icon-safe{
  background: url(../images/icon-safe.png) no-repeat center center;
}
.icon-service{
  background: url(../images/icon-service.png) no-repeat center center;
}
.section-tab-content{
  height:710px;
  position: relative;
}
.section-tab-content .content-item{
  position: absolute;
  left: 0;
  top: 65px;;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: all .5s;
}
.section-tab-content .content-item.active{
  opacity: 1;
  z-index: 10;
}
.section-tab-content .content-item .title{
  font-weight: bold;
  font-size: 48px;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.section-tab-content .content-item .desc{
  font-size: 20px;
  color: rgba(255,255,255,0.8);
  line-height: 30px;
  margin-bottom: 50px;
}
.section-tab-content .content-item .photo img{
  border-radius: 32px;
}
.minor-join-btn{
  display: block;
  width: 260px;
  line-height: 65px;
  background: linear-gradient( 152deg, #FFBE21 0%, #FF9B0D 100%);
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  color: #111324;
  position: relative;
  top:0;
  transition: all linear 200ms;
}
.minor-join-btn i{
  color:#fff;
  margin-left: 5px; 
}
.minor-join-btn:hover{
  background: linear-gradient( 152deg, #fec33b 0%, #fca525 100%);
  top: -10px;
}
.section05{
  padding: 0 0 100px;
  height: 597px;
  box-sizing: border-box;
}
.section05 .txt01{
  margin: 0 auto 45px;
  width: 740px;
  height: 72px;
  background: url(../images/section05-txt01.png) no-repeat center center;
  text-indent: -9999px;
  overflow: hidden;
}
.section05 .txt02{
  margin: 0 auto 45px;
  width: 980px;
  height: 81px;
  background: url(../images/section05-txt02.png) no-repeat center center; 
  text-indent: -9999px;
  overflow: hidden;  
}
.section05 .txt03{
  margin: 0 auto 88px;
  width: 980px;
  height: 101px;
  background: url(../images/section05-txt03.png) no-repeat center center;
  text-indent: -9999px;
  overflow: hidden;  
}
.section05 .minor-join-btn{
  margin: 0 auto;
}

.swiper-container {
  width: 1360px;
  margin: 0 auto;
  height: 900px;
}
.swiper-slide {
  font-size: 18px;
  color:#fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 60px 40px;
  text-align: center;
}
.swiper-slide .swiper-title{
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 60px;
}
.swiper-slide .swiper-title strong{
  color: #E0901F;
}
.swiper-slide .swiper-content{
  height: 730px;
  width: 1100px;
  margin: 0 auto;
}
.swiper-slide .swiper-img{
  border-radius: 48px;
  border: 19px solid rgba(255,255,255,0.2);
}
.graph-box{
  width: 1100px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  border-radius: 48px;
  overflow: hidden;
}
.graph-bg{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 720px;
  background: linear-gradient( to bottom, #FEBD20 0%, #FE9B0E 100%);
  transition: all 800ms ease-in-out 500ms;
}
.graph-box .graph{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.swiper-slide-active .graph-bg{
  width: 99%;
}
.swiper-pagination-bullet{
  height: 6px;
  width: 88px;
  border-radius: 3px;
  background: rgba(255,255,255,0.3);
  margin: 0 8px;
  transition: background linear 200ms;
}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover{
  background: rgba(255,255,255,0.6);
}
.swiper-pagination-bullet-active{
  background: rgba(255,255,255,0.6);
}
.swiper-content .rent-box{
  border-radius: 48px;
  background: rgba(255,255,255,0.2);
  padding: 207px 189px 134px;
  box-sizing: border-box;
  width: 1100px;
  margin: 0 auto;
}
.swiper-content .rent-content{
  height: 388px;
  border-radius: 55px;
  background: #FFFFFF;
  position: relative;
  padding: 140px 0 0 357px;
  text-align: left;
  box-sizing: border-box;
}
.swiper-content .rent-content:before{
  content: "";
  width: 380px;
  height: 461px;
  background: url(../images/girl.png) no-repeat center center;
  position: absolute;
  left: -25px;
  bottom: 0;
}
.swiper-content .rent-content .renting{
  font-weight: bold;
  font-size: 36px;
  color: #1B1D2F; 
}
.swiper-slide-active .rent-content .renting{
  cursor: not-allowed;
  &:after{
    content:'...';
    position: absolute;
    -wekit-animation: textLoading 1s infinite linear;
    animation: textLoading 1s infinite linear;    
  }
}
.swiper-content .rent-content .desc{
  font-size: 24px;
  color: #84858C; 
}
.swiper-button-prev, .swiper-button-next{
  position: absolute;
  top: 50%;
  margin-top: -26px;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 100%;
  background: rgba(255,255,255,.2) url(../images/swiper-arrow.png) no-repeat center center;
}
.swiper-button-prev:hover, .swiper-button-next:hover{
  border: 1px solid rgba(255, 255, 255, 0.60);
}
.swiper-button-prev{
  left: 10px;
  transform: rotate(180deg);
}
.swiper-button-next{
  right: 10px;
}

// 动画
@-webkit-keyframes fadeInUpXs {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeInUpXs {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.fadeInUpXs {
  -webkit-animation-name: fadeInUpXs;
  animation-name: fadeInUpXs
}

@-webkit-keyframes fadeInRightXs {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeInRightXs {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.fadeInRightXs {
  -webkit-animation-name: fadeInRightXs;
  animation-name: fadeInRightXs
}

@-webkit-keyframes bgSlideLeft {
  from {
    width: 836px
  }

  to {
    width: 861px
  }
}

@keyframes bgSlideLeft {
  from {
    width: 836px
  }

  to {
    width: 861px
  }
}

.bgSlideLeft {
  -webkit-animation-name: bgSlideLeft;
  animation-name: bgSlideLeft
}

@-webkit-keyframes bgSlideRight {
  from {
    width: 836px
  }

  to {
    width: 811px
  }
}

@keyframes bgSlideRight {
  from {
    width: 836px
  }

  to {
    width: 811px
  }
}

.bgSlideRight {
  -webkit-animation-name: bgSlideRight;
  animation-name: bgSlideRight
}

@-webkit-keyframes ppMove {
  0% {
    transform: translate(0, 0)
  }

  20% {
    transform: translate(50px, 30px)
  }

  40% {
    transform: translate(120px, -10px)
  }

  60% {
    transform: translate(-100px, 0)
  }

  80% {
    transform: translate(-150px, 50px)
  }

  100% {
    transform: translate(0, 30)
  }
}

@keyframes ppMove {
  0% {
    transform: translate(0, 0)
  }

  20% {
    transform: translate(50px, 30px)
  }

  40% {
    transform: translate(120px, -10px)
  }

  60% {
    transform: translate(-100px, 0)
  }

  80% {
    transform: translate(-150px, 50px)
  }

  100% {
    transform: translate(0, 30)
  }
}

.ppMove {
  -webkit-animation-name: ppMove;
  animation-name: ppMove;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 25s !important;
  animation-duration: 25s !important;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0)
  }

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

@keyframes rotate {
  0% {
    transform: rotate(0)
  }

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

.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 25s !important;
  animation-duration: 25s !important;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

@keyframes shake {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }    
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s
}

@media (print),(prefers-reduced-motion:reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important
  }
}

.wrapper .section-box>*{
  display: none;
}
.wrapper .section-box.show>*{
  display: block;
}

.go-top{
  position: fixed;
  z-index: 1000;
  right: 10px;
  bottom: 10px;
  width: 48px;
  height: 48px;
  box-sizing:border-box;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 6px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  padding-top: 6px;
  transition: all linear 200ms;
  border: 1px solid transparent;
  display: none;
}
.go-top:before{
  content:'';
  display: block;
  margin: 0 auto;
  width: 13px;
  height: 19px;
  background: url(../images/icon-top-arrow.png) no-repeat 0 0;
}
.go-top:hover{
  color:rgba(255, 163, 34, 1);
  border-color: rgba(255, 163, 34, 1);
}
.go-top:hover:before{
  background-image: url(../images/icon-top-arrow-hover.png);
}

.modal-wrapper{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.modal{
  width: 518px;
  background: #373847;
  border-radius: 32px;
  position: relative;
}
.modal-head{
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, rgba(29,32,77,0) 0%, #4A4C6C 100%);
  border-radius: 32px 32px 0px 0px;
}
.qrcode-title{
  width: 213px;
  height: 34px;
  background: url(../images/modal-title.png) no-repeat center center;
}
.modal-content{
  padding: 50px 0 40px;
}
.modal-content img{
  display: block;
  margin: 0 auto;
  border: 15px solid #5E5F6C;
  border-radius: 30px;
  margin-bottom: 25px;
}
.modal-content .desc{
  text-align: center;
  color:#fff;
  font-size: 20px;
}
.modal-close{
  position: absolute;
  width: 48px;
  height: 39px;
  top: 0;
  right: -75px;
  cursor: pointer;
  background: url(../images/modal-close.png) no-repeat 0 0;
}
.modal-close:hover{
  background-image: url(../images/modal-close-hover.png);
}

/* 小屏幕 */
@media screen and (max-width: 1600px) {
  .bg-box{
    margin-bottom: -720px;
  }
  .bg-box .bg{
    height: 720px;
  }
  .section01, 
  .modal,
  .scale-box{
    transform:scale(0.8);
    transform-origin: top center;
  }
  .header .logo{
    transform:scale(0.8);
    transform-origin: center left;
  }
  .header .fn{
    transform:scale(0.8);
    transform-origin: center right;
  }
  .header-wrapper, .header{
    height: 64px;
  }
  .section01{
    height: 500px;
  }
  .section02{
    height: 765px;
  }
  .section03{
    height: 1050px;
  }
  .section04{
    height: 700px;
  }
  .section05{
    height: 478px;
  }
  .wrapper, .bg-box, .header.fixed{
    min-width:1140px;
  }
  .section-tab-group, .section03 .img-intro, .section03 .icon-intro{
    width: 1140px;
  }
  .section-tab-content .photo img{
    width: 540px;
  }
  .img-intro img{
    width: 530px;
  }
  .section03 .icon-intro li{
    margin: 0 39px 35px;
  }
  .section03 .icon-intro li i{
    width: 100px;
    height: 100px;
    border-radius: 30px;
    background-size: 40% auto;
  }
  .footer{
    line-height: 40px;
    font-size: 12px;
  }
  .swiper-container{
    width: 1088px;
    height: 760px;
  }
  .swiper-slide .swiper-content{
    height: 564px;
    width: 880px;
  }
  .swiper-slide .swiper-content .swiper-img{
    width: 840px;
  }
  .graph-box{
    width: 880px;
  }
  .swiper-content .rent-box{
    width: 880px;
    padding:140px 120px 88px;
  }

  .swiper-content .rent-content{
    height: 310px;
    padding: 90px 0 0 307px;
  }
  .graph-bg{
    height: 550px;
  }
  .swiper-content .rent-content:before{
    content: "";
    width: 304px;
    height: 369px;
    background-size: 100% 100%;
    left: -15px;
    bottom: 0;
  }
  
}