@charset "UTF-8";
/*reset*/
html, body, div, p, ul, li, dl, dt, dd, em, i, span, a, img, input, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0; }

a, img, input {
  border: none; }

body {
  font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

a {
  text-decoration: none; }

ul, li {
  list-style: none; }

a {
  -webkit-touch-callout: none;
  /* 禁止长按链接与图片弹出菜单 */ }

html, body {
  -webkit-user-select: none;
  /* 禁止选中文本（如无文本选中需求，此为必选项） */
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none; }

body {
  overflow: hidden; }

.bs100 {
  background-repeat: no-repeat;
  background-size: 100% 100%; }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.pa {
  position: absolute;
  z-index: 5; }

img {
  width: 100%;
  height: auto; }

html, body, .wrap, .loading {
  width: 100%;
  height: 100%;
  font-size: 0.2rem; }

.cloud-top, .cloud-bot {
  width: 100%;
  position: absolute;
  left: 0;
  pointer-events: none; }

.cloud-top {
  background-image: url(../images/cloud-top.png);
  height: 5.12rem;
  top: 0; }
@-webkit-keyframes cloud1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); } }
@keyframes cloud1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); } }
.cloud-bot {
  background-image: url(../images/cloud-bot.png);
  height: 5.27rem;
  bottom: 0; }
@-webkit-keyframes cloud2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); } }
@keyframes cloud2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); } }
.loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99; }
  .loading .sence {
    display: none; }
  .loading .coupon {
    background: url(../images/loading-coupon.png) no-repeat 100%/100%;
    width: 11.02rem;
    height: 4.96rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.48rem 0 0 -5.56rem; }
    .loading .coupon-time {
      width: 1.72rem;
      height: 0.63rem;
      color: #000;
      font-size: 0.26rem;
      line-height: 0.3rem;
      top: 2.17rem;
      left: 5.02rem; }
    .loading .coupon-jdt {
      width: 0.19rem;
      height: 4.11rem;
      top: 0.42rem;
      left: 8.07rem; }
      .loading .coupon-jdt .per {
        background: url(../images/loading-jdt.png) no-repeat;
        background-size: 0.19rem auto;
        width: 100%;
        left: 0;
        bottom: 0; }
    .loading .coupon-num {
      width: 2.24rem;
      text-align: center;
      color: #000;
      font-size: 0.56rem;
      line-height: 0.66rem;
      font-weight: bold;
      left: 8.51rem;
      top: 2.24rem; }
  .loading .login {
    background-image: url(../images/login.png);
    width: 10.22rem;
    height: 4.56rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: 1.57rem;
    top: 1.21rem;
    top: 50%;
    left: 50%;
    margin: -2.16rem 0 0 -5.11rem; }
    .loading .login .user-id {
      height: 0.6rem;
      font-size: 0.3rem; }
      .loading .login .user-id .lab {
        color: #9c1b1e;
        font-weight: bold; }
      .loading .login .user-id .ipt {
        width: 5.7rem;
        height: 0.6rem;
        background: #FFF;
        border: solid 1px #000;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 0 0.2rem;
        color: #9c1b1e;
        font-weight: bold;
        margin: 0 0.3rem 0 0; }
        .loading .login .user-id .ipt::-webkit-input-placeholder {
          color: #9c1b1e;
          font-weight: bold; }
      .loading .login .user-id .btn-qus {
        background-image: url(../images/btn-qus.png);
        width: 0.62rem;
        height: 0.59rem; }
    .loading .login .btn-login {
      background-image: url(../images/btn-login.png);
      width: 2.74rem;
      height: 1.06rem;
      margin: 0.4rem auto 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      color: #ffffff;
      font-size: 0.48rem;
      letter-spacing: 0.46rem;
      padding-left: 0.46rem;
      font-weight: bold; }
  .loading .star {
    width: 100%;
    height: 100%; }
    .loading .star-in {
      width: 100%;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    .loading .star .logo {
      background-image: url(../images/logo.png);
      width: 2.1rem;
      height: 1.06rem;
      top: 0.28rem;
      left: 2.26rem; }
    .loading .star .star-ship {
      width: 5.02rem;
      height: 3.87rem; }
    .loading .star .btn-star {
      background-image: url(../images/btn-star.png);
      width: 3.86rem;
      height: 1.24rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      margin: 0.58rem auto 0;
      -webkit-animation: star 0.5s ease infinite alternate;
              animation: star 0.5s ease infinite alternate; }
  .loading.ani .star-in {
    display: none; }
  .loading.ani .cloud-top {
    -webkit-animation: cloud1 1s linear;
            animation: cloud1 1s linear; }
  .loading.ani .cloud-bot {
    -webkit-animation: cloud2 1s linear;
            animation: cloud2 1s linear; }

.wrap {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: none; }
  .wrap .inner {
    width: 16.5rem;
    height: 7.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }

.index {
  background-size: auto 7.5rem; }
  .index .map {
    background: url(../images/bg.jpg) no-repeat 0 0/auto 7.5rem;
    width: 158.56rem;
    height: 7.5rem;
    position: relative; }
  .index .ship {
    width: 3.52rem;
    height: 2.74rem;
    position: fixed;
    top: 0.5rem;
    left: 0.72rem;
    z-index: 6;
    -webkit-animation: ship 1s linear infinite alternate;
            animation: ship 1s linear infinite alternate; }
  .index .ship-in {
    background-image: url(../images/ship.png);
    width: 100%;
    height: 100%;
    position: relative; }
    .index .ship-in.rota {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg); }
    .index .ship-in .ship-gear1 {
      background-image: url(../images/ship-gear1.png);
      width: 0.7rem;
      height: 0.7rem;
      top: 0.37rem;
      left: 0.76rem;
      -webkit-animation: gear 10s linear infinite;
              animation: gear 10s linear infinite; }
    .index .ship-in .ship-gear2 {
      background-image: url(../images/ship-gear2.png);
      width: 0.58rem;
      height: 0.59rem;
      top: 0.79rem;
      left: 1.28rem;
      -webkit-animation: gear 10s linear infinite;
              animation: gear 10s linear infinite; }
    .index .ship-in .ship-gear3 {
      background-image: url(../images/ship-gear3.png);
      width: 0.53rem;
      height: 0.52rem;
      top: 0.27rem;
      left: 2.18rem;
      -webkit-animation: gear 10s linear infinite;
              animation: gear 10s linear infinite; }
    .index .ship-in .ship-flag {
      background-image: url(../images/ship-flag.png);
      width: 0.66rem;
      height: 0.54rem;
      top: 1.42rem;
      left: 0.54rem;
      -webkit-animation: flag 5s linear infinite;
              animation: flag 5s linear infinite;
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }
  .index .cloud-top, .index .cloud-bot {
    z-index: 101;
    display: none; }
  .index .main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    .index .main .page {
      background: url(../images/p-bg.png) no-repeat 100%/100%;
      width: 12.00rem;
      height: 4.14rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding: 0.92rem 0 0 2.4rem;
      position: fixed;
      left: 50%;
      top: 0.27rem;
      margin-left: -5.99rem;
      z-index: 6;
      display: none; }
      .index .main .page.page17 {
        background-image: url(../images/p-bg2.png);
        width: 6.32rem;
        height: 2.56rem;
        top: 0.64rem;
        text-align: center;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 0.04rem 0 0 0;
        margin-left: -3.16rem; }
        .index .main .page.page17 .end {
          height: 100%;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column; }
        .index .main .page.page17 .end-text {
          font-size: 0.24rem;
          line-height: 0.3rem;
          color: #c62626; }
        .index .main .page.page17 .btn-end {
          background-image: url(../images/end-tip.png);
          width: 2.0rem;
          height: 0.63rem;
          display: block;
          margin: 0.1rem auto 0;
          text-indent: -99.99rem;
          -webkit-animation: star 0.5s ease infinite alternate;
                  animation: star 0.5s ease infinite alternate; }
    .index .main .tit {
      width: 2.4rem;
      height: 1.74rem;
      top: 1.56rem;
      left: 9.46rem; }
      .index .main .tit img {
        width: auto;
        height: 100%; }
    .index .main .text {
      height: 1.74rem;
      color: #161616;
      font-size: 0.24rem;
      line-height: 0.4rem; }
      .index .main .text span {
        color: #9c1b1e;
        margin: 0 0.16rem;
        font-style: normal;
        font-weight: bold; }
        em{font-weight: normal;font-style: normal;}
        .index .main .text span.mg0 {
          margin-left: 0; }
      .index .main .text.none {
        display: none; }
  .index .btn-prev, .index .btn-next {
    width: 0.73rem;
    height: 0.73rem;
    position: fixed;
    top: 4.3rem;
    z-index: 100;
    -webkit-animation: next 1s linear alternate infinite;
            animation: next 1s linear alternate infinite; }
    .index .btn-prev:before, .index .btn-next:before {
      content: "";
      width: 0.99rem;
      height: 0.99rem;
      position: absolute;
      top: -0.13rem;
      left: -0.13rem; }
  .index .btn-prev {
    background-image: url(../images/btn-prev.png);
    left: 2.34rem;
    display: none; }
  .index .btn-next {
    background-image: url(../images/btn-next.png);
    right: 2.34rem; }
  .index .bot {
    background-image: url(../images/bot.png);
    width: 4.47rem;
    height: 0.53rem;
    position: fixed;
    bottom: 0.18rem;
    left: 50%;
    margin-left: -2.23rem;
    z-index: 9;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-bottom: 0.03rem; }
    .index .bot .music-control, .index .bot .btn-back, .index .bot .page-num {
      opacity: 0.5; }
    .index .bot .music-control {
      width: 0.37rem;
      height: 0.37rem;
      position: relative;
      margin: 0 0.41rem 0 0.63rem; }
      .index .bot .music-control .ico-control {
        background-image: url(../images/music-control.png);
        width: 0.16rem;
        height: 0.27rem;
        position: absolute;
        top: -0.02rem;
        right: -0.03rem;
        -webkit-transform-origin: 50% 20%;
                transform-origin: 50% 20%;
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear; }
      .index .bot .music-control.playing img {
        -webkit-animation: magic 4s linear infinite;
                animation: magic 4s linear infinite; }
      .index .bot .music-control.playing .ico-control {
        -webkit-transform: rotate(0);
                transform: rotate(0); }
    .index .bot .btn-back {
      width: 1.66rem;
      height: 0.3rem;
      background: url(../images/btn-back.png) no-repeat 50% 50%/1.12rem auto; }
    .index .bot .page-num {
      background: url(../images/bot-line.png) no-repeat 50% 50%/0.3rem auto;
      width: 0.3rem;
      height: 0.3rem;
      color: #448787;
      font-size: 0.2rem;
      font-weight: bold;
      position: relative;
      margin-left: 0.56rem; }
      .index .bot .page-num .cur {
        width: 0.3rem;
        top: -0.04rem;
        left: -0.28rem;
        text-align: right; }
      .index .bot .page-num .total {
        top: 0.08rem;
        right: -0.16rem; }
  .index .music {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0; }
  .index .box {
    width: 7.8rem;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    opacity: 0; }

.review {
  width: 152.56rem;
  height: 7.5rem;
  top: 0;
  left: 0; }
  .review .moto {
    background-image: url(../images/moto.png);
    width: 0.38rem;
    height: 0.36rem;
    top: 5.48rem;
    left: 10.98rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  .review .gua {
    background-image: url(../images/gua.png);
    width: 0.6rem;
    height: 0.61rem;
    top: 4.1rem;
    left: 23.02rem;
    -webkit-animation: gua 2s linear infinite;
            animation: gua 2s linear infinite; }
  .review .gua-face {
    background-image: url(../images/gua-face.png);
    width: 0.35rem;
    height: 0.36rem;
    top: 4.18rem;
    left: 23.14rem;
    -webkit-animation: guaface 2s linear infinite;
            animation: guaface 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  .review .face1 {
    background-image: url(../images/face1.png);
    width: 0.54rem;
    height: 0.5rem;
    top: 5.02rem;
    left: 32.46rem;
    -webkit-animation: gua 1.2s ease infinite;
            animation: gua 1.2s ease infinite; }
  .review .face2 {
    background-image: url(../images/face2.png);
    width: 0.53rem;
    height: 0.57rem;
    top: 4.4rem;
    left: 33.98rem;
    -webkit-animation: gua 1.2s 0.4s ease infinite;
            animation: gua 1.2s 0.4s ease infinite; }
  .review .face3 {
    background-image: url(../images/face3.png);
    width: 0.58rem;
    height: 0.51rem;
    top: 5.2rem;
    left: 34.66rem;
    -webkit-animation: gua 1.2s 0.8s ease infinite;
            animation: gua 1.2s 0.8s ease infinite; }
  .review .happy7 {
    background-image: url(../images/happy7.png);
    width: 0.35rem;
    height: 0.29rem;
    top: 5.6rem;
    left: 41.6rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .happy8 {
    background-image: url(../images/happy8.png);
    width: 0.3rem;
    height: 0.34rem;
    top: 5.37rem;
    left: 42.71rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .voice1 {
    background-image: url(../images/voice1.png);
    width: 0.5rem;
    height: 0.49rem;
    top: 5.61rem;
    left: 45.13rem; }
  .review .ico-voice {
    background-image: url(../images/ico-voice.png);
    width: 0.15rem;
    height: 0.2rem;
    top: 5.76rem;
    left: 45.26rem;
    -webkit-animation: icoVoice 0.5s linear infinite alternate;
            animation: icoVoice 0.5s linear infinite alternate; }
@-webkit-keyframes icoVoice {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); } }
@keyframes icoVoice {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); } }
  .review .happy3 {
    background-image: url(../images/happy3.png);
    width: 0.38rem;
    height: 0.35rem;
    top: 5.17rem;
    left: 51.39rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .happy4 {
    background-image: url(../images/happy4.png);
    width: 0.34rem;
    height: 0.36rem;
    top: 5.1rem;
    left: 52.78rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .happy5 {
    background-image: url(../images/happy5.png);
    width: 0.35rem;
    height: 0.38rem;
    top: 5.44rem;
    left: 65.55rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .happy6 {
    background-image: url(../images/happy6.png);
    width: 0.46rem;
    height: 0.3rem;
    top: 5.75rem;
    left: 66.55rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .love1 {
    background-image: url(../images/love1.png);
    width: 0.19rem;
    height: 0.18rem;
    top: 5.21rem;
    left: 56.12rem;
    -webkit-animation: gua 1.2s ease infinite;
            animation: gua 1.2s ease infinite; }
  .review .love2 {
    background-image: url(../images/love2.png);
    width: 0.15rem;
    height: 0.13rem;
    top: 5.14rem;
    left: 55.95rem;
    -webkit-animation: gua 1.2s 0.4s ease infinite;
            animation: gua 1.2s 0.4s ease infinite; }
  .review .love3 {
    background-image: url(../images/love3.png);
    width: 0.09rem;
    height: 0.08rem;
    top: 5.11rem;
    left: 56.17rem;
    -webkit-animation: gua 1.2s 0.8s ease infinite;
            animation: gua 1.2s 0.8s ease infinite; }
  .review .love4 {
    background-image: url(../images/love4.png);
    width: 0.19rem;
    height: 0.17rem;
    top: 5.27rem;
    left: 57.27rem;
    -webkit-animation: gua 1.2s 0.1s ease infinite;
            animation: gua 1.2s 0.1s ease infinite; }
  .review .love5 {
    background-image: url(../images/love5.png);
    width: 0.15rem;
    height: 0.13rem;
    top: 5.11rem;
    left: 57.53rem;
    -webkit-animation: gua 1.2s 0.4s ease infinite;
            animation: gua 1.2s 0.4s ease infinite; }
  .review .love6 {
    background-image: url(../images/love6.png);
    width: 0.11rem;
    height: 0.1rem;
    top: 4.99rem;
    left: 57.36rem;
    -webkit-animation: gua 1.2s 0.8s ease infinite;
            animation: gua 1.2s 0.8s ease infinite; }
  .review .love7 {
    background-image: url(../images/love7.png);
    width: 0.19rem;
    height: 0.17rem;
    top: 5.21rem;
    left: 58.09rem;
    -webkit-animation: gua 1.2s 0.2s ease infinite;
            animation: gua 1.2s 0.2s ease infinite; }
  .review .voice2 {
    background-image: url(../images/voice2.png);
    width: 1.75rem;
    height: 0.96rem;
    top: 3.38rem;
    left: 62.31rem;
    -webkit-animation: fish 1.2s ease infinite;
            animation: fish 1.2s ease infinite; }
  .review .flag {
    background-image: url(../images/flag.png);
    width: 0.87rem;
    height: 1.29rem;
    top: 4.84rem;
    left: 5.33rem;
    -webkit-animation: flag 5s linear infinite;
            animation: flag 5s linear infinite;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  .review .lantern {
    background-image: url(../images/lantern.png);
    width: 4.74rem;
    height: 2.18rem;
    top: 3.98rem;
    left: 16.71rem;
    -webkit-animation: opac 1.5s ease infinite alternate;
            animation: opac 1.5s ease infinite alternate; }
  .review .car {
    background-image: url(../images/car.png);
    width: 2.13rem;
    height: 0.93rem;
    top: 5.33rem;
    left: 29.56rem;
    -webkit-animation: opac1 1s linear infinite alternate;
            animation: opac1 1s linear infinite alternate; }
  .review .balloon1 {
    background-image: url(../images/balloon1.png);
    width: 0.71rem;
    height: 1.28rem;
    top: 4.49rem;
    left: 43.7rem;
    -webkit-animation: flag 5s linear infinite;
            animation: flag 5s linear infinite;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  .review .balloon2 {
    background-image: url(../images/balloon2.png);
    width: 0.63rem;
    height: 1.17rem;
    top: 5.52rem;
    left: 43.78rem;
    -webkit-animation: flag 4s linear infinite;
            animation: flag 4s linear infinite;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  .review .door-gear1 {
    background-image: url(../images/door-gear1.png);
    width: 0.63rem;
    height: 0.64rem;
    top: 4.36rem;
    left: 69.03rem;
    -webkit-animation: gear 10s linear infinite;
            animation: gear 10s linear infinite; }
  .review .door-gear2 {
    background-image: url(../images/door-gear2.png);
    width: 0.45rem;
    height: 0.45rem;
    top: 4.96rem;
    left: 69.07rem;
    -webkit-animation: gear 10s linear infinite;
            animation: gear 10s linear infinite; }
  .review .door-gear3 {
    background-image: url(../images/door-gear3.png);
    width: 0.51rem;
    height: 0.5rem;
    top: 3.84rem;
    left: 70.35rem;
    -webkit-animation: gear 10s linear infinite;
            animation: gear 10s linear infinite; }
  .review .door-gear4 {
    background-image: url(../images/door-gear4.png);
    width: 0.35rem;
    height: 0.37rem;
    top: 5.17rem;
    left: 70.73rem;
    -webkit-animation: gear 10s linear infinite;
            animation: gear 10s linear infinite; }
  .review .happy1 {
    background-image: url(../images/happy1.png);
    width: 0.52rem;
    height: 0.49rem;
    top: 4.66rem;
    left: 73.67rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%; }
  .review .happy2 {
    background-image: url(../images/happy2.png);
    width: 0.57rem;
    height: 0.57rem;
    top: 4.63rem;
    left: 74.61rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%; }
  .review .qus {
    background-image: url(../images/qus.png);
    width: 0.86rem;
    height: 0.43rem;
    top: 4.51rem;
    left: 75.99rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  .review .amaze1 {
    background-image: url(../images/amaze1.png);
    width: 0.27rem;
    height: 0.36rem;
    top: 5.15rem;
    left: 83.78rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%; }
  .review .amaze2 {
    background-image: url(../images/amaze2.png);
    width: 0.35rem;
    height: 0.43rem;
    top: 5.26rem;
    left: 96.98rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .amaze3 {
    background-image: url(../images/amaze3.png);
    width: 0.39rem;
    height: 0.46rem;
    top: 4.8rem;
    left: 98.48rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite; }
  .review .amaze4 {
    background-image: url(../images/amaze4.png);
    width: 0.48rem;
    height: 0.43rem;
    top: 4.2rem;
    left: 99.0rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%; }
  .review .amaze5 {
    background-image: url(../images/amaze5.png);
    width: 0.47rem;
    height: 0.47rem;
    top: 4.17rem;
    left: 99.83rem;
    -webkit-animation: happy 0.8s linear infinite;
            animation: happy 0.8s linear infinite;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%; }
  .review .magic {
    background-image: url(../images/magic.png);
    width: 1.71rem;
    height: 1.72rem;
    top: 5.15rem;
    left: 77.89rem;
    -webkit-animation: magic 8s linear infinite;
            animation: magic 8s linear infinite; }
  .review .upon {
    background-image: url(../images/upon.png);
    width: 1.21rem;
    height: 1.24rem;
    top: 5.37rem;
    left: 78.17rem; }
  .review .dragon {
    background-image: url(../images/dragon.png);
    width: 0.75rem;
    height: 0.45rem;
    top: 5.82rem;
    left: 78.4rem;
    -webkit-animation: dragon 1s ease infinite;
            animation: dragon 1s ease infinite; }
  .review .fish {
    background-image: url(../images/fish.png);
    width: 0.5rem;
    height: 0.41rem;
    top: 4.15rem;
    left: 105.22rem;
    -webkit-animation: fish 2s linear infinite;
            animation: fish 2s linear infinite;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%; }
@-webkit-keyframes fish {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); } }
@keyframes fish {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); } }
  .review .fork {
    background-image: url(../images/fork.png);
    width: 0.36rem;
    height: 0.37rem;
    top: 4.35rem;
    left: 105.41rem;
    -webkit-animation: fork 2s linear infinite;
            animation: fork 2s linear infinite;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%; }
  .review .cat {
    background-image: url(../images/cat.png);
    width: 1.52rem;
    height: 1.3rem;
    top: 2.22rem;
    left: 118.39rem;
    -webkit-animation: car 1s linear infinite alternate;
            animation: car 1s linear infinite alternate; }
@-webkit-keyframes car {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem); } }
@keyframes car {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem); } }
  .review .smoke {
    background-image: url(../images/smoke.png);
    width: 0.49rem;
    height: 0.47rem;
    width: 0.26rem;
    height: 0.25rem;
    top: 3.12rem;
    left: 128.2rem;
    -webkit-animation: smoke 5s linear infinite;
            animation: smoke 5s linear infinite; }
    .review .smoke.smoke2 {
      -webkit-animation-delay: 2s;
              animation-delay: 2s; }
  .review .angry1 {
    background-image: url(../images/angry1.png);
    width: 0.23rem;
    height: 0.28rem;
    top: 5.3rem;
    left: 135.55rem;
    -webkit-animation: happy 0.7s linear infinite;
            animation: happy 0.7s linear infinite; }
  .review .angry2 {
    background-image: url(../images/angry2.png);
    width: 0.37rem;
    height: 0.38rem;
    top: 5.18rem;
    left: 136.04rem;
    -webkit-animation: happy 0.7s linear infinite;
            animation: happy 0.7s linear infinite; }
  .review .angry3 {
    background-image: url(../images/angry3.png);
    width: 0.2rem;
    height: 0.21rem;
    top: 5.55rem;
    left: 136.83rem;
    -webkit-animation: happy 0.7s linear infinite;
            animation: happy 0.7s linear infinite; }
  .review .amaze6 {
    background-image: url(../images/amaze6.png);
    width: 0.4rem;
    height: 0.49rem;
    top: 3.88rem;
    left: 142.79rem;
    -webkit-animation: happy 0.6s linear infinite;
            animation: happy 0.6s linear infinite; }
  .review .amaze7 {
    background-image: url(../images/amaze7.png);
    width: 0.54rem;
    height: 0.61rem;
    top: 3.01rem;
    left: 148.12rem;
    -webkit-animation: happy 0.6s linear infinite;
            animation: happy 0.6s linear infinite;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%; }

.sign {
  background-image: url(../images/sign-bg.jpg);
  overflow: hidden; }
  .sign:before {
    content: "";
    background: url(../images/sign-box.png) no-repeat 50% 50%/auto 7.5rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  .sign .sign-tit {
    color: #7f653c;
    font-size: 0.33rem;
    font-weight: bold;
    top: 0.59rem;
    left: 4.57rem; }
    .sign .sign-tit:before, .sign .sign-tit:after {
      content: "";
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 0.65rem; }
    .sign .sign-tit:before {
      background-image: url(../images/sign-jtl.png);
      width: 0.33rem; }
    .sign .sign-tit:after {
      background-image: url(../images/sign-jtr.png);
      width: 0.34rem; }
  .sign .btn-selok {
    background-image: url(../images/btn-selok.png);
    width: 2.17rem;
    height: 0.74rem;
    top: 0.76rem;
    right: 2.9rem; }
    .sign .btn-selok.gray {
      background-image: url(../images/btn-selok-gray.png); }
  .sign .sign-list {
    width: 9.24rem;
    top: 2.02rem;
    left: 4.66rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
    .sign .sign-list li {
      width: 1.21rem;
      margin: 0 -0.04rem; }
      .sign .sign-list li.on img {
        -webkit-filter: drop-shadow(0 0 0.06rem #951b10) drop-shadow(0 0 0.06rem #951b10) drop-shadow(0 0 0.06rem #951b10);
                filter: drop-shadow(0 0 0.06rem #951b10) drop-shadow(0 0 0.06rem #951b10) drop-shadow(0 0 0.06rem #951b10); }
  .sign .sign-tip {
    color: #7f653c;
    font-size: 0.24rem;
    line-height: 0.28rem;
    top: 6.88rem;
    right: 2.66rem; }

.build {
  background-image: url(../images/build-bg.jpg); }
  .build .logo {
    background-image: url(../images/build-logo.png);
    width: 4.29rem;
    height: 0.64rem;
    top: 0.83rem;
    left: 2.66rem; }
  .build .player {
    background: url(../images/build-tit.png) no-repeat 100%/100%;
    width: 4.65rem;
    height: 2.22rem;
    top: 2.44rem;
    left: 2.64rem; }
    .build .player .player-name {
      color: #32487d;
      font-size: 0.5rem;
      line-height: 0.56rem;
      margin: -0.06rem 0 0 0.29rem;
      position: relative;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
  .build .btns {
    top: 5.06rem;
    left: 2.33rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .build .btns a {
      display: block;
      width: 2.72rem;
      height: 0.93rem; }
    .build .btns .btn-build {
      background-image: url(../images/btn-build.png);
      margin-right: 0.5rem; }
    .build .btns .btn-restar {
      background-image: url(../images/btn-restar.png); }
  .build .build-tip {
    background-image: url(../images/build-tip.png);
    width: 5.95rem;
    height: 0.65rem;
    color: #dd3b4c;
    font-size: 0.18rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0.06rem 0 0 0.5rem;
    top: 6.33rem;
    left: 2.36rem;
    opacity: 0;
  }

.result-in {
  width: 100%;
  height: 100%; }
.result .result-bg {
  background: url(../images/result-bg.jpg) no-repeat 100%/100%;
  width: 22.5rem;
  height: 7.5rem;
  position: absolute;
  top: 0;
  left: -3.0rem;
  z-index: 1; }
.result .list {
  top: 1.34rem;
  left: 3.52rem;
  width: 5.6rem; }
  .result .list li {
    position: relative;
    padding-bottom: 0.03rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
    .result .list li .lab {
      background: url(../images/lab-sign.png) no-repeat 100%/100%;
      width: 1.21rem;
      height: 0.45rem;
      position: absolute;
      top: 50%;
      left: -1.32rem;
      margin-top: -0.22rem;
      color: #FFF;
      font-size: 0.23rem;
      font-weight: normal; }
    .result .list li p {
      color: #24170d;
      font-size: 0.26rem;
      line-height: 0.31rem; }
      .result .list li p span {
        color: #931505;
        font-weight: bold;
        margin: 0 0.06rem; }
        .result .list li p span.mg0 {
          margin-left: 0; }
    .result .list li.font22 p {
      font-size: 0.22rem;
      line-height: 0.25rem; }
    .result .list li:nth-child(2n+1) .lab {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg); }
    .result .list li:nth-child(2n+2) .lab {
      -webkit-transform: rotate(-2deg);
              transform: rotate(-2deg); }
    .result .list li:nth-child(1) {
      height: 1.4rem; }
    .result .list li:nth-child(2) {
      height: 1.37rem; }
    .result .list li:nth-child(3) {
      height: 1.34rem; }
    .result .list li:nth-child(4) {
      height: 1.36rem; }
.result .ewm {
  width: 1.07rem;
  top: 4.89rem;
  left: 12.96rem; }
.result .user-name {
  width: 2.7rem;
  color: #32487d;
  font-size: 0.33rem;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  top: 4.4rem;
  left: 9.4rem;
  -webkit-transform: rotate(-19deg);
          transform: rotate(-19deg);
  z-index: 6;

   }
.result .btns {
  width: 1.9rem;
  height: 1.54rem;
  top: 0.12rem;
  right: 0.02rem;
  z-index: 9; }
  .result .btns a {
    background: url(../images/btn-share.png) no-repeat 100%/100%;
    width: 1.9rem;
    height: 0.74rem;
    color: #ffffff;
    font-size: 0.3rem;
    margin: 0.02rem 0; }
.result .save-tip {
  /* background-image: url(../images/save-tip.png); */
  width: 2.37rem;
  height: 0.69rem;
  bottom: 0;
  left: 50%;
  margin-left: -1.58rem;

   }
.result .dom2img-result {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  opacity: 0;
  -webkit-touch-callout: default; }

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

@keyframes ship {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0.2rem);
            transform: translateY(0.2rem); } }
@-webkit-keyframes gear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@keyframes gear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@-webkit-keyframes flag {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  80% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); } }
@keyframes flag {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  80% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); } }
@-webkit-keyframes opac {
  0% {
    opacity: 1;
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1); }
  100% {
    opacity: 0.7;
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7); } }
@keyframes opac {
  0% {
    opacity: 1;
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1); }
  100% {
    opacity: 0.7;
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7); } }
@-webkit-keyframes opac1 {
  0% {
    opacity: 0.6;
    -webkit-filter: brightness(0.8);
            filter: brightness(0.8); }
  100% {
    opacity: 0.3;
    -webkit-filter: brightness(0.4);
            filter: brightness(0.4); } }
@keyframes opac1 {
  0% {
    opacity: 0.6;
    -webkit-filter: brightness(0.8);
            filter: brightness(0.8); }
  100% {
    opacity: 0.3;
    -webkit-filter: brightness(0.4);
            filter: brightness(0.4); } }
@-webkit-keyframes happy {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
@keyframes happy {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
@-webkit-keyframes magic {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@keyframes magic {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@-webkit-keyframes dragon {
  0%,50%,100% {
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1); }
  25% {
    -webkit-transform: translate(-0.1rem) scale(1.1);
            transform: translate(-0.1rem) scale(1.1); }
  75% {
    -webkit-transform: translate(0.1rem) scale(1.1);
            transform: translate(0.1rem) scale(1.1); } }
@keyframes dragon {
  0%,50%,100% {
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1); }
  25% {
    -webkit-transform: translate(-0.1rem) scale(1.1);
            transform: translate(-0.1rem) scale(1.1); }
  75% {
    -webkit-transform: translate(0.1rem) scale(1.1);
            transform: translate(0.1rem) scale(1.1); } }
@-webkit-keyframes fork {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); } }
@keyframes fork {
  0%,50%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); } }
@-webkit-keyframes smoke {
  0% {
    -webkit-transform: translate(0, 0) scale(0);
            transform: translate(0, 0) scale(0);
    opacity: 0; }
  25% {
    -webkit-transform: translate(0, -0.1rem) scale(1);
            transform: translate(0, -0.1rem) scale(1);
    opacity: 1; }
  50% {
    -webkit-transform: translate(0.1rem, -0.3rem) scale(1.2);
            transform: translate(0.1rem, -0.3rem) scale(1.2);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0.4rem, -0.8rem) scale(1.5);
            transform: translate(0.4rem, -0.8rem) scale(1.5);
    opacity: 0; } }
@keyframes smoke {
  0% {
    -webkit-transform: translate(0, 0) scale(0);
            transform: translate(0, 0) scale(0);
    opacity: 0; }
  25% {
    -webkit-transform: translate(0, -0.1rem) scale(1);
            transform: translate(0, -0.1rem) scale(1);
    opacity: 1; }
  50% {
    -webkit-transform: translate(0.1rem, -0.3rem) scale(1.2);
            transform: translate(0.1rem, -0.3rem) scale(1.2);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0.4rem, -0.8rem) scale(1.5);
            transform: translate(0.4rem, -0.8rem) scale(1.5);
    opacity: 0; } }
@-webkit-keyframes star {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }
@keyframes star {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }
@-webkit-keyframes next {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }
@keyframes next {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }
@-webkit-keyframes gua {
  0% {
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem);
    opacity: 0; }
  50%,100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }
@keyframes gua {
  0% {
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem);
    opacity: 0; }
  50%,100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }
@-webkit-keyframes guaface {
  0%,70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes guaface {
  0%,70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*弹窗*/
.pop_mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 299;
  cursor: pointer; }

.pop {
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: none;
  outline: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  .pop img {
    display: block;
    width: 100%;
    height: auto; }
  .pop .pop-clo {
    background-image: url(../images/close.png);
    width: 0.56rem;
    height: 0.56rem;
    top: -0.6rem;
    right: -0.7rem; }
  .pop .pop-bd {
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0.11rem 0.1rem 0.21rem; }
  .pop.pop-id {
    width: 10.45rem;
    height: 5.48rem; }
    .pop.pop-id .pop-clo {
      top: -0.7rem;
      right: -0.46rem; }
  .pop.pop-share, .pop.pop-copy, .pop.pop-tip {
    background-image: url(../images/pop-share-bg.png);
    width: 7rem;
    height: 2.14rem; }
    .pop.pop-share .pop-p1, .pop.pop-copy .pop-p1, .pop.pop-tip .pop-p1 {
      color: #c62626;
      font-size: 0.3rem;
      line-height: 0.4rem; }
  .pop.pop-copy .pop-p1 {white-space: nowrap;font-size: .22rem;
    padding-top: 0.2rem; }
  .pop.pop-copy .btn-copy {
    background-image: url(../images/btn-copy.png);
    width: 1.46rem;
    height: 0.64rem;
    color: #FFF;
    font-size: 0.23rem;
    margin-top: 0.12rem; }

.hid-pop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .hid-pop img {
    display: inline-block;
    width: 261px;
    height: 220px;
    background-size: 261px auto; }


.login-error{
  text-align: center;
  position: absolute;
  left: 50%;
  top: 2.25rem;
  color: #9c1b1e;
  display: none;
  width: 100%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.hide{
  display: none;
}
.dfjjc_top_rank_0{
  font-style: normal;
  font-weight: normal;
}