html {
  overflow: hidden;
}
body {
  background: #565f81;
  overflow: hidden;
}
.page {
  width: 6.4rem;
  height: 10.08rem;
  position: relative;
}
.page .next {
  width: 100%;
  height: .8rem;
  position: absolute;
  top: 9rem;
  left: 0;
  opacity: 0;
  background: url('../images/down_ico.png') top center no-repeat;
  background-size: .5rem;
  font-size: .2rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  -webkit-animation: 'down_animation' 1.4s linear 1.5s infinite alternate;
}
.page .next:before {
  content: '向上滑动';
}
@-webkit-keyframes down_animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-8px);
  }
}
.page > div {
  position: absolute;
}
.page > div img {
  display: block;
  width: 100%;
  height: 100%;
}
.page.p1 {
  background: #565f81;
}
.page.p1 .w1 {
  width: 1.26rem;
  height: .99rem;
  top: 2.5rem;
  left: 2.63rem;
}
.page.p1 .w2 {
  width: 1.26rem;
  height: .89rem;
  left: 2.63rem;
  top: 3.72rem;
}
.page.p1 .w3 {
  width: 1.61rem;
  height: .94rem;
  top: 5rem;
  left: 2.46rem;
}
.page.p2 .w1 {
  top: 3.34rem;
  left: .83rem;
  width: 4.48rem;
  height: 4.48rem;
}
.page.p2 .w1 img {
  display: block;
}
.page.p2 .w2 {
  width: 3.59rem;
  height: 2.27rem;
  left: 2.04rem;
  top: 1.55rem;
}
.page.p2 .w2 img {
  height: 2.27rem;
}
.page.p2 .w3 {
  height: 1.3rem;
  width: 2.82rem;
  left: 2.46rem;
  top: 1.88rem;
}
.page.p3 .w1,
.page.p4 .w1 {
  width: 4.48rem;
  height: 4.48rem;
  overflow: hidden;
  position: absolute;
  border-radius: 100%;
  top: 1.3rem;
  left: .95rem;
}
.page.p3 .w1 .w1-inner,
.page.p4 .w1 .w1-inner {
  width: 4.48rem;
  height: 4.48rem;
  background: #474e6b;
  border-radius: 100%;
  overflow: hidden;
}
.page.p3 .w2,
.page.p4 .w2 {
  width: 3.96rem;
  height: .73rem;
  top: 6.36rem;
  left: 1.28rem;
}
.page.p3 .w3,
.page.p4 .w3 {
  top: 7.09rem;
  left: 1.28rem;
  width: 3.96rem;
  height: .65rem;
}
.page.p3 .w4,
.page.p4 .w4 {
  top: 7.74rem;
  left: 1.28rem;
  width: 3.96rem;
  height: .65rem;
}
.page.p4 .w1 .w1-inner {
  background: #6f789b;
}
.page.p5 {
  background: #ff775c;
}
.page.p5 .w1,
.page.p5 .w2,
.page.p5 .w3,
.page.p5 .w4 {
  width: 4.03rem;
  left: 1.31rem;
}
.page.p5 .w1 {
  height: .65rem;
  top: .45rem;
}
.page.p5 .w2 {
  height: .57rem;
  top: 1.10rem;
}
.page.p5 .w3 {
  height: .64rem;
  top: 1.64rem;
}
.page.p5 .w4 {
  height: .54rem;
  top: 2.28em;
}
.page.p5 .w5 {
  height: 3.89rem;
  width: 4.07rem;
  top: 3.4rem;
  left: 1.07rem;
}
.page.p5 .w6 {
  width: 2.63rem;
  height: 3.51rem;
  left: 1.47rem;
  top: 5.4rem;
  z-index: 2;
}
.page.p5 .w7 {
  width: .62rem;
  height: .84rem;
  left: 4.17rem;
  top: 6.36rem;
}
.page.p5 .w8 {
  width: .62rem;
  height: .62rem;
  left: 3.76rem;
  top: 4.07rem;
}
.page.p5 .w9 {
  left: 1.41rem;
  top: 8.81rem;
  width: 2.89rem;
  height: .16rem;
}
.page.p6 {
  background: #565f81;
}
.page.p6 .btn {
  position: absolute;
  left: .71rem;
  top: 6.94rem;
  width: 5rem;
  height: .9rem;
  font-size: .36rem;
  line-height: .9rem;
  color: #fff;
  background: #fd897d;
  text-align: center;
  text-decoration: none;
  border-radius: .04rem;
  z-index: 2;
}
.page.p6 .gifframe {
  width: 6.4rem;
  height: 11.36rem;
  overflow: hidden;
}
.page.p6 .gifframe img {
  position: absolute;
  width: 6.4rem;
  top: -1.5rem;
}
.page.p6 .showResult {
  width: 4.3rem;
  height: 4.97rem;
  font-size: .36rem;
  color: #ababab;
  line-height: .6rem;
  text-align: center;
  position: absolute;
  top: 1.71rem;
  left: 50%;
  margin-left: -2.15rem;
}
.page.p6 .showResult span {
  color: #ff775c;
  font-size: .6rem;
}
.page.p6 .showResult .inner {
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  border-radius: .04rem;
  color: #fff;
  padding-top: .8rem;
  padding-bottom: .8rem;
  width: 4.3rem;
  box-sizing: border-box;
  display: none;
}
.page.p6 .showResult .inner .noinapp {
  margin-top: .67rem;
  text-align: center;
}
.page.p6 .showResult .inner .noinapp p {
  font-size: .24rem;
  line-height: .36rem;
}
.page.p6 .showResult .inner .go {
  display: block;
  width: 2.8rem;
  height: .7rem;
  margin: 0 auto;
  line-height: .7rem;
  font-size: .24rem;
  background: #8fc31f;
  color: #fff;
  text-align: center;
  text-decoration: none;
  margin-top: .4rem;
}
.animate-appear {
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-in;
}
.animate-appear-css3 {
  -webkit-transition: all 0.5s ease-in;
}
.animate-appear[data-appear-from=left] {
  -webkit-transform: translate(-100px, 0);
}
.animate-appear[data-appear-from=top] {
  -webkit-transform: translate(0, -100px);
}
.animate-appear[data-appear-from=right] {
  -webkit-transform: translate(100px, 0);
}
.animate-appear[data-appear-from=bottom] {
  -webkit-transform: translate(0, 100px);
}
.animate-appear[data-appear-from="slideup"] {
  height: 0;
}
.animate-appear[data-appear-from=fade] {
  opacity: 0;
}
.animate-appear[data-appear-from=large] {
  width: 0;
  height: 0;
  opacity: 1;
}
.animate-css3-show {
  top: 0!important;
  opacity: 1!important;
  background: rgba(0, 0, 0, 0.5) !important;
}