.page1-3 .part-total, .preload_show .loadding_icon, .preload_show .progress, .loadEffect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; }

.page .down, .page2-3 .part-total, .page2-3 .part-content, .page3-3 .part-total, .page4-1 .word-all, .page4-3 .part-total {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto; }

.main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.content {
  position: relative;
  width: 7.5rem;
  height: 12.06rem;
  margin: auto;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden; }

.content-in {
  position: relative;
  width: 7.5rem;
  height: 12.06rem;
  margin: auto;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden; }

@media only screen and (min-width: 600px) {
  .content-out {
    position: relative;
    width: 7.5rem;
    height: 12.06rem;
    margin: auto;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden; } }

.swiper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .5s;
  transition: all .5s; }

.swiper-container {
  width: 100%;
  height: 100%; }

.swiper-slide {
  width: 100%;
  height: 100%; }

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center; }

.page {
  background: #000; }
  .page .down {
    z-index: 6;
    bottom: .7rem;
    width: 1.18rem;
    height: 1rem; }
  .page .down-y {
    background: url("../img/down-y.png") no-repeat;
    background-size: 100%; }
  .page .down-b {
    background: url("../img/down-b.png") no-repeat;
    background-size: 100%; }
  .page .down-r {
    background: url("../img/down-r.png") no-repeat;
    background-size: 100%; }
  .page .down-p {
    background: url("../img/down-p.png") no-repeat;
    background-size: 100%; }
  .page .down-more {
    background: url("../img/down-more.png") no-repeat;
    background-size: 100%; }
  .page .down-to {
    background: url("../img/down-to.png") no-repeat;
    background-size: 100%; }
  .page .down-more {
    bottom: .8rem;
    width: 1.63rem;
    height: 1.43rem; }
  .page .down-to {
    bottom: .8rem;
    width: 1.69rem;
    height: 1.46rem; }
  .page .downMove {
    -webkit-animation: downMove 1s linear infinite;
    animation: downMove 1s linear infinite; }
  .page .down-more.downMove {
    -webkit-animation: downMove 1s linear infinite;
    animation: downMove 1s linear infinite; }

@keyframes shake {
  0%, 20%, 40% {
    transform: rotate(0deg); }
  5%, 25% {
    transform: rotate(-10deg); }
  15%, 35% {
    transform: rotate(10deg); } }

.shake {
  animation: shake 2s ease-in-out infinite; }

.page0-1 .action {
  position: absolute;
  left: 5.61rem;
  top: 4.84rem;
  width: .98rem;
  height: 2.91rem;
  background: url("../img/btn-action.png") no-repeat;
  background-size: 100%; }

.page0-1 .bg {
  background-image: url(../img/index.jpg); }

.page1-1 .word-all {
  position: absolute;
  left: 0.88rem;
  top: 0.28rem;
  width: 1.71rem;
  height: 5.18rem;
  background: url("../img/p1-1-word.png") no-repeat;
  background-size: 100%; }

.page1-3 .part-total {
  width: 6.52rem;
  height: 10.72rem;
  background: url("../img/part-1-sum.png") no-repeat;
  background-size: 100%; }

.page2-1 .word-all {
  position: absolute;
  left: 3rem;
  width: 1.82rem;
  height: 6.49rem;
  background: url("../img/p2-1-word.png") no-repeat;
  background-size: 100%; }

.page2-3 .part-total {
  top: .2rem;
  width: 6.02rem;
  height: 11.45rem;
  background: url("../img/part-2-sum.png") no-repeat;
  background-size: 100%; }

.page2-3 .part-content {
  top: 4.9rem;
  width: 6.64rem;
  height: 3.79rem;
  background: url("../img/p2-3-content.png") no-repeat;
  background-size: 100%; }
  .page2-3 .part-content .btn-read {
    position: absolute;
    top: 3.05rem;
    right: 0.05rem;
    width: 2.55rem;
    height: .62rem;
    background: url("../img/btn-read.png") no-repeat;
    background-size: 100%; }

.page3-1 .word-all {
  position: absolute;
  left: 4.15rem;
  top: 1.4rem;
  width: 1.72rem;
  height: 4.49rem;
  background: url("../img/p3-1-word.png") no-repeat;
  background-size: 100%; }

.page3-3 .part-total {
  top: .2rem;
  width: 6.52rem;
  height: 11.39rem;
  background: url("../img/part-3-sum.png") no-repeat;
  background-size: 100%; }

.page4-1 .word-all {
  position: absolute;
  top: .5rem;
  width: 2.05rem;
  height: 5.39rem;
  background: url("../img/p4-1-word.png") no-repeat;
  background-size: 100%; }

.page4-3 .part-total {
  top: .2rem;
  width: 6.66rem;
  height: 10.92rem;
  background: url("../img/part-4-sum.png") no-repeat;
  background-size: 100%; }

.page5 .rotateTips {
  position: absolute;
  left: 4.2rem;
  top: .5rem;
  width: 1.32rem;
  height: 4.36rem;
  transition: all .3s;
  animation: flicker 1.6s linear infinite;
  background: url("../img/lock.png") no-repeat;
  background-size: 100%; }

.page6 .btn-bubble {
  position: absolute;
  left: .5rem;
  top: 9.7rem;
  width: 1.44rem;
  height: 1.44rem;
  background: url("../img/btn-bubble.png") no-repeat;
  background-size: 100%; }

.page6 .shareTips {
  position: absolute;
  top: .3rem;
  right: .8rem;
  width: 1.9rem;
  height: 1.67rem;
  background: url("../img/share.png") no-repeat;
  background-size: 100%; }

@keyframes flicker {
  0% {
    opacity: 1; }
  50% {
    opacity: .2; } }

@-webkit-keyframes downMove {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(0.5rem);
    transform: translateY(0.5rem); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes downMove {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(0.5rem);
    transform: translateY(0.5rem); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.bubble_bg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9.86rem;
  height: 11.92rem;
  margin: auto 1.5rem;
  background: url("../img/bubble.png") no-repeat;
  background-size: 100%; }
  .bubble_bg .close {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.8rem;
    width: .66rem;
    height: .66rem;
    margin: auto 0;
    background: url("../img/close.png") no-repeat;
    background-size: 100%; }

.preload_show {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f0d8e2;
  z-index: 20; }
  .preload_show .loadding_icon {
    width: 2.72rem;
    height: 2.57rem;
    font-size: .32rem;
    -webkit-animation: catRock 2s linear infinite;
    animation: catRock 2s linear infinite;
    background: url("../img/loadding.png") no-repeat;
    background-size: 100%;
    top: -2.8rem; }
  .preload_show .progress {
    width: 2rem;
    height: .5rem;
    color: #000;
    font-size: .48rem;
    text-align: center;
    top: 1.5rem; }

@keyframes catRock {
  0% {
    transform: rotate(0); }
  25% {
    transform: rotate(-15deg); }
  75% {
    transform: rotate(15deg); }
  100% {
    transform: rotate(0); } }

@-webkit-keyframes loadding {
  0% {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem); }
  50% {
    -webkit-transform: translateY(0.2rem);
    transform: translateY(0.2rem); }
  100% {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem); } }

@keyframes loadding {
  0% {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem); }
  50% {
    -webkit-transform: translateY(0.2rem);
    transform: translateY(0.2rem); }
  100% {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem); } }

.loadEffect {
  position: absolute;
  width: 1rem;
  height: 1rem; }

.loadEffect span {
  display: inline-block;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background: #000;
  position: absolute;
  opacity: 0;
  -webkit-animation: load 1.04s ease infinite;
  animation: load 1.04s ease infinite; }

@-webkit-keyframes load {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes load {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

.loadEffect span:nth-child(1) {
  left: 0;
  top: 50%;
  margin-top: -0.08rem;
  -webkit-animation-delay: 0.13s;
  animation-delay: 0.13s; }

.loadEffect span:nth-child(2) {
  left: .16rem;
  top: .12rem;
  -webkit-animation-delay: 0.26s;
  animation-delay: 0.26s; }

.loadEffect span:nth-child(3) {
  left: 50%;
  top: 0;
  margin-top: -0.04rem;
  margin-left: -0.04rem;
  -webkit-animation-delay: 0.39s;
  animation-delay: 0.39s; }

.loadEffect span:nth-child(4) {
  top: .12rem;
  right: .14rem;
  -webkit-animation-delay: 0.52s;
  animation-delay: 0.52s; }

.loadEffect span:nth-child(5) {
  right: 0;
  top: 50%;
  margin-top: -0.08rem;
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s; }

.loadEffect span:nth-child(6) {
  right: .14rem;
  bottom: .14rem;
  -webkit-animation-delay: 0.78s;
  animation-delay: 0.78s; }

.loadEffect span:nth-child(7) {
  bottom: 0;
  left: 50%;
  margin-top: -0.08rem;
  margin-left: -0.05rem;
  -webkit-animation-delay: 0.91s;
  animation-delay: 0.91s; }

.loadEffect span:nth-child(8) {
  bottom: .14rem;
  left: .14rem;
  -webkit-animation-delay: 1.04s;
  animation-delay: 1.04s; }

.loadEffect {
  width: 1rem;
  height: 1rem; }
  .loadEffect span {
    background: #fff; }

.bigImg {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.5rem; }

.close-tips {
  position: fixed;
  right: .3rem;
  top: .5rem;
  width: 1.92rem;
  height: .22rem;
  animation: flicker 1.6s linear infinite;
  background: url("../img/close-tips.png") no-repeat;
  background-size: 100%; }