@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    bottom: .6em;
  }
  25%,
  75% {
    opacity: 0;
    filter: alpha(opacity=0);
    bottom: 2em;
  }
}
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    bottom: .6em;
  }
  25%,
  75% {
    opacity: 0;
    filter: alpha(opacity=0);
    bottom: 2em;
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: scale(0.2) translate(0%, -200%);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
}
@-webkit-keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(0.2) translate(200%, 0%);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}
@-webkit-keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: scale(0.2) translate3d(-200%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
  }
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate3d(-200%, 0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate3d(0, 0, 0);
  }
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes fadeInRightDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
  }
}
@keyframes fadeInRightDown {
  from {
    opacity: 0;
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fly {
  0%,
  50%,
  100% {
    -webkit-transform: translate3d(2%, 4%, 0);
  }
  25%,
  75% {
    -webkit-transform: none;
  }
}
@keyframes fly {
  0%,
  50%,
  100% {
    transform: translate3d(2%, 4%, 0);
  }
  25%,
  75% {
    transform: none;
  }
}
@-webkit-keyframes float {
  from {
    right: -10%;
  }
  to {
    right: 110%;
  }
}
@keyframes float {
  from {
    right: -10%;
  }
  to {
    right: 110%;
  }
}
* {
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  vertical-align: middle;
}
html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
html {
  width: 100%;
  background: url(//static.jjoobb.cn/images/mobile/touch/adv-bg.jpg);
  background-size: cover;
}
body {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.arrow {
  position: absolute;
  z-index: 88;
  bottom: 1em;
  left: 50%;
  width: 2.7rem;
  margin-left: -1.35rem;
  -webkit-animation: flash 3s ease-in-out infinite;
  animation: flash 3s ease-in-out infinite;
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: none;
}
.page.active {
  display: block;
}
.page > * {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img-1-1 {
  position: absolute;
  top: 6.25%;
  left: 50%;
  width: 13.75rem;
  margin-left: -6.875rem;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}
.img-1-2 {
  position: absolute;
  top: 25.390625%;
  left: 50%;
  width: 9.75rem;
  margin-left: -4.875rem;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.img-1-3 {
  position: absolute;
  top: 33.90625%;
  left: 50%;
  width: 14.8125rem;
  margin-left: -7.40625rem;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}
.img-1-4 {
  z-index: 7;
  position: absolute;
  top: 44.21875%;
  right: 1.3125rem;
  width: 6.875rem;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.img-1-5 {
  z-index: 7;
  position: absolute;
  top: 80.3125%;
  left: 2.875rem;
  width: 3rem;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.img-1-6 {
  z-index: 6;
  position: absolute;
  top: 50%;
  right: 0rem;
  width: 17.1875rem;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.float-text {
  z-index: 5;
  position: absolute;
  top: 44.53125%;
  left: 0;
  width: 100%;
  height: 50%;
  color: rgba(255, 255, 255, 0.2);
  font-size: small;
}
.float-text span {
  position: absolute;
  white-space: nowrap;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.show-tit {
  position: absolute;
  top: 6.25%;
  text-align: center;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}
.show-sub {
  position: absolute;
  top: 78.125%;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.show-pic {
  position: absolute;
  top: 18.75%;
  left: 50%;
  width: 340px;
  margin-left: -170px;
  border: 0.3125rem solid #ABDDFF;
  border-radius: 1em;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}
.img-2-1 {
  left: 50%;
  width: 19.0625rem;
  margin-left: -9.53125rem;
}
.img-2-2 {
  left: 50%;
  width: 13.75rem;
  margin-left: -6.875rem;
}
.img-3-1 {
  left: 50%;
  width: 19.25rem;
  margin-left: -9.625rem;
}
.img-3-2 {
  left: 50%;
  width: 17.625rem;
  margin-left: -8.8125rem;
}
.img-4-1 {
  left: 50%;
  width: 20.625rem;
  margin-left: -10.3125rem;
}
.img-4-2 {
  left: 50%;
  width: 17.1875rem;
  margin-left: -8.59375rem;
  z-index: 3;
}
.img-4-3 {
  z-index: 4;
  position: absolute;
  top: 35.9375%;
  right: 0.3125rem;
  width: 8.0625rem;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}
.img-5-1 {
  left: 50%;
  width: 19.875rem;
  margin-left: -9.9375rem;
}
.img-5-2 {
  left: 50%;
  width: 13.625rem;
  margin-left: -6.8125rem;
}
@media screen and (max-width: 320px) {
  .show-pic {
    width: 300px;
    margin-left: -150px;
  }
}
.active .spaceInUp {
  -webkit-animation-name: spaceInUp;
  animation-name: spaceInUp;
}
.active .spaceInLeft {
  -webkit-animation-name: spaceInLeft;
  animation-name: spaceInLeft;
}
.active .spaceInRight {
  -webkit-animation-name: spaceInRight;
  animation-name: spaceInRight;
}
.active .spaceInDown {
  -webkit-animation-name: spaceInDown;
  animation-name: spaceInDown;
}
.active .pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
.active .fadeInRightDown {
  -webkit-animation-name: fadeInRightDown;
  animation-name: fadeInRightDown;
}
.active .fly {
  -webkit-animation-name: fly;
  animation-name: fly;
}
.active .float {
  -webkit-animation-name: float;
  animation-name: float;
}
.loading {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.loading .wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 3px solid rgba(30, 115, 226, 0.84);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-animation: spin 0.6s infinite linear;
  animation: spin 0.6s infinite linear;
}