* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

a, a:active, a:hover {
  text-decoration: none
}

html, body {
  padding: 0;
  margin: 0;
  color: #333;
  font-family: "Source Han Sans", Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", Heiti, sans-serif !important
}

.ani {
  will-change: transform
}

.animated {
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-transition: all .8s ease-out;
  transition: all .8s ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.fix-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: .2rem .4rem;
  width: 100%;
  height: 1.41333333rem;
  line-height: 1.01333333rem;
  font-size: .4rem;
  background: #f8f8fa;
  -webkit-box-shadow: 0 3px .37333333rem rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0 3px .37333333rem rgba(0, 0, 0, 0.44);
  box-shadow: 0 3px .37333333rem rgba(0, 0, 0, 0.44)
}

.fix-header img {
  float: left;
  margin-right: .26666667rem;
  width: 1.01333333rem;
  height: 1.01333333rem
}

.fix-header .btn {
  margin-top: .18666667rem;
  float: right;
  width: 2.02666667rem;
  height: .66666667rem;
  line-height: .61333333rem;
  text-align: center;
  color: #ea2b3a;
  font-size: .32rem;
  border: 1px solid #ea2b3a;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.center {
  text-align: center
}

.wrapper {
  padding-top: 1.41333333rem
}

.text-logo {
  margin-top: 1.17333333rem;
  text-align: center
}

.text-logo img {
  width: 3.57333333rem;
  height: 137rem 75
}

.app-download {
  margin-top: 1.09333333rem
}

.app-download .ios, .app-download .android {
  display: inline-block;
  margin: 0 .33333333rem;
  width: 3.33333333rem;
  height: .86666667rem
}

.app-download .ios:active, .app-download .android:active {
  opacity: .6
}

.app-download .ios {
  background: url("../media/wap-app/ios-btn.png") no-repeat;
  -webkit-background-size: contain;
  background-size: contain
}

.app-download .android {
  background: url("../media/wap-app/android-btn.png") no-repeat;
  -webkit-background-size: contain;
  background-size: contain
}

.sub-title {
  margin-top: 1rem;
  text-align: center;
  font-size: .56rem
}

.stage {
  position: relative;
  padding-top: 1.33333333rem
}

.stage .title {
  padding-bottom: .33333333rem;
  font-size: .53333333rem;
  text-align: center
}

.stage .sub-title {
  margin-top: .2rem;
  font-size: .32rem;
  text-align: center
}

.stage-1 {
  margin-top: 1.45rem;
  height: 7.96rem;
  overflow: hidden
}

.stage-1 .ios {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-1.3rem);
  -moz-transform: translateX(-1.3rem);
  -ms-transform: translateX(-1.3rem);
  -o-transform: translateX(-1.3rem);
  transform: translateX(-1.3rem);
  width: 5.30666667rem;
  height: 7.96rem;
  opacity: 0
}

.stage-1 .android {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-1.45rem);
  -moz-transform: translateX(-1.45rem);
  -ms-transform: translateX(-1.45rem);
  -o-transform: translateX(-1.45rem);
  transform: translateX(-1.45rem);
  width: 5.21333333rem;
  height: 7.81333333rem;
  opacity: 0
}

.stage-2 {
  height: 13.12rem;
  background: #f2f2f2;
  overflow: hidden
}

.stage-2 .animated {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out
}

.stage-2 .p {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-1.3rem) translateY(11.06666667rem);
  -moz-transform: translateX(-1.3rem) translateY(11.06666667rem);
  -ms-transform: translateX(-1.3rem) translateY(11.06666667rem);
  -o-transform: translateX(-1.3rem) translateY(11.06666667rem);
  transform: translateX(-1.3rem) translateY(11.06666667rem);
  width: 4.72rem;
  height: 11.02666667rem
}

.stage-2 .ps {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-1.5rem) translateY(0.7rem);
  -moz-transform: translateX(-1.5rem) translateY(0.7rem);
  -ms-transform: translateX(-1.5rem) translateY(0.7rem);
  -o-transform: translateX(-1.5rem) translateY(0.7rem);
  transform: translateX(-1.5rem) translateY(0.7rem);
  width: 4.16rem;
  height: 8.76rem;
  opacity: 0
}

.stage-3 {
  height: 13.12rem;
  overflow: hidden
}

.stage-3 img {
  position: absolute;
  left: 50%;
  width: 8rem;
  height: 4.92rem;
  opacity: 0
}

.stage-3 .l-1 {
  z-index: 900;
  -webkit-transform: translateX(-3.86666667rem) translateY(0.5rem);
  -moz-transform: translateX(-3.86666667rem) translateY(0.5rem);
  -ms-transform: translateX(-3.86666667rem) translateY(0.5rem);
  -o-transform: translateX(-3.86666667rem) translateY(0.5rem);
  transform: translateX(-3.86666667rem) translateY(0.5rem)
}

.stage-3 .l-2 {
  z-index: 899;
  -webkit-transform: translateX(-3.86666667rem) translateY(0.8rem);
  -moz-transform: translateX(-3.86666667rem) translateY(0.8rem);
  -ms-transform: translateX(-3.86666667rem) translateY(0.8rem);
  -o-transform: translateX(-3.86666667rem) translateY(0.8rem);
  transform: translateX(-3.86666667rem) translateY(0.8rem)
}

.stage-3 .l-3 {
  z-index: 898;
  -webkit-transform: translateX(-3.86666667rem) translateY(1.1rem);
  -moz-transform: translateX(-3.86666667rem) translateY(1.1rem);
  -ms-transform: translateX(-3.86666667rem) translateY(1.1rem);
  -o-transform: translateX(-3.86666667rem) translateY(1.1rem);
  transform: translateX(-3.86666667rem) translateY(1.1rem)
}

.stage-4 {
  height: 13.12rem;
  background: #f2f2f2;
  overflow: hidden
}

.stage-4 .animated {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out
}

.stage-4 img {
  position: absolute;
  left: 50%;
  opacity: 0
}

.stage-4 .center {
  z-index: 900;
  width: 4.24rem;
  height: 6.94666667rem;
  -webkit-transform: translateX(-2.12rem) translateY(1rem);
  -moz-transform: translateX(-2.12rem) translateY(1rem);
  -ms-transform: translateX(-2.12rem) translateY(1rem);
  -o-transform: translateX(-2.12rem) translateY(1rem);
  transform: translateX(-2.12rem) translateY(1rem)
}

.stage-4 .left {
  z-index: 899;
  width: 4rem;
  height: 6.50666667rem;
  -webkit-transform: translateX(-2rem) translateY(1rem);
  -moz-transform: translateX(-2rem) translateY(1rem);
  -ms-transform: translateX(-2rem) translateY(1rem);
  -o-transform: translateX(-2rem) translateY(1rem);
  transform: translateX(-2rem) translateY(1rem)
}

.stage-4 .right {
  z-index: 899;
  width: 4rem;
  height: 6.50666667rem;
  -webkit-transform: translateX(-2rem) translateY(1rem);
  -moz-transform: translateX(-2rem) translateY(1rem);
  -ms-transform: translateX(-2rem) translateY(1rem);
  -o-transform: translateX(-2rem) translateY(1rem);
  transform: translateX(-2rem) translateY(1rem)
}

.stage-5 {
  padding-bottom: 1rem
}

.stage-5 img {
  margin-top: 1rem;
  width: 3.49333333rem;
  height: 3.49333333rem
}

.footer {
  padding: .8rem 0 .62666667rem 0;
  height: 3.17333333rem;
  color: #999;
  text-align: center;
  background: #23282d
}

.footer div:first-child {
  margin-bottom: .10666667rem
}

.footer div:last-child {
  margin-top: .4rem
}

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

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

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

@-webkit-keyframes fadeRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-1.45rem);
    transform: translateX(-1.45rem)
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(-4rem);
    transform: translateX(-4rem)
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-1.45rem);
    transform: translateX(-1.45rem)
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(-4rem);
    transform: translateX(-4rem)
  }
}

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

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateX(-1.3rem) translateY(9.2rem);
    transform: translateX(-1.3rem) translateY(9.2rem)
  }
  to {
    -webkit-transform: translateX(-1.3rem) translateY(0.3rem);
    transform: translateX(-1.3rem) translateY(0.3rem)
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: translateX(-1.3rem) translateY(9.2rem);
    transform: translateX(-1.3rem) translateY(9.2rem)
  }
  to {
    -webkit-transform: translateX(-1.3rem) translateY(0.3rem);
    transform: translateX(-1.3rem) translateY(0.3rem)
  }
}

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

@-webkit-keyframes slideLeft {
  to {
    opacity: 1;
    -webkit-transform: translateX(-3.3rem) translateY(0.5rem);
    transform: translateX(-3.3rem) translateY(0.5rem)
  }
}

@keyframes slideLeft {
  to {
    opacity: 1;
    -webkit-transform: translateX(-3.3rem) translateY(0.5rem);
    transform: translateX(-3.3rem) translateY(0.5rem)
  }
}
.ios-download-link{
  display: none;
  position: fixed;
  top:0;
  left:0;
  z-index:2000;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.75);
}
.ios-download-link img{
  float: right;
  margin-right:.3rem;
  vertical-align: top;
  width:7.28rem;
  height:9.506666666666666rem;
}
.android-download-link{
  display: none;
  position: fixed;
  top:0;
  left:0;
  z-index:2000;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.75);
}
.android-download-link img{
  float: right;
  margin-right:.3rem;
  vertical-align: top;
  width:7.28rem;
  height:9.506666666666666rem;
}