@charset "UTF-8";
/* easy-animation.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html {
  font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC';
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  user-select: none;
  padding: 0;
  background-color: #72a2e2;
  font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC';
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  html, body {
    height: 1030px;
  }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  html, body {
    height: 1030px;
  }
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
  html, body {
    height: 1041px;
  }
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
  html, body {
    height: 1041px;
  }
}
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#container {
  width: 640px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.dialog {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.dialog .inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.page_home {
  position: relative;
  height: 1238px;
}
.page_home .game-bj {
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 0px;
  background: url("../images/bj.jpg") left top;
  width: 640px;
  height: 1143px;
}
.page_home .word {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 60px;
  top: 427px;
  background: url("../images/home-word.png") left top;
  width: 527px;
  height: 132px;
  -webkit-animation: rotateIn 0.5s 1 linear;
  animation-fill-mode: forwards;
}
.page_home .hand {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 390px;
  top: 641px;
  background: url("../images/hand.png") left top;
  width: 198px;
  height: 131px;
  -webkit-animation: y_c 1s linear 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.page_home .btn-next-map {
  position: absolute;
  top: 731px;
  left: 415px;
  width: 137px;
  height: 224px;
}

.page-through {
  position: relative;
  height: 1238px;
  overflow: hidden;
  background: #9bc2f6;
}
.page-through .through-map {
  position: absolute;
  display: inline-block;
  left: -271px;
  top: -53px;
  background: url("../images/x-k-map.jpg") left top;
  width: 1177px;
  height: 1375px;
  -webkit-transform: scale(0.5);
  animation: planetz_two 6s ease-in 0s infinite forwards;
  -webkit-animation: planetz_two 6s ease-in 0s infinite forwards;
}
.page-through .map-1 {
  position: absolute;
  display: inline-block;
  left: -173px;
  top: 74px;
  background: url("../images/2-1.png") left top;
  width: 983px;
  height: 1142px;
  -webkit-transform: scale(0);
  animation: planet 4s ease-in 0s infinite forwards;
  -webkit-animation: planet 4s ease-in 0s infinite forwards;
}
.page-through .map-2 {
  position: absolute;
  display: inline-block;
  left: -35px;
  top: 182px;
  background: url("../images/2-2.png") left top;
  width: 735px;
  height: 876px;
  -webkit-transform: scale(0);
  animation: planet 4s ease-in 0.5s infinite forwards;
  -webkit-animation: planet 4s ease-in 0.5s infinite forwards;
}
.page-through .map-3 {
  position: absolute;
  display: inline-block;
  left: 65px;
  top: 332px;
  background: url("../images/2-3.png") left top;
  width: 539px;
  height: 605px;
  -webkit-transform: scale(0);
  animation: planet 4s ease-in 1s infinite forwards;
  -webkit-animation: planet 4s ease-in 1s infinite forwards;
}
.page-through .map-4 {
  position: absolute;
  display: inline-block;
  left: 147px;
  top: 460px;
  background: url("../images/2-4.png") left top;
  width: 368px;
  height: 357px;
  -webkit-transform: scale(0);
  animation: planet 4s ease-in 1.5s infinite forwards;
  -webkit-animation: planet 4s ease-in 1.5s infinite forwards;
}
.page-through .map-5 {
  position: absolute;
  display: inline-block;
  left: 254px;
  top: 554px;
  background: url("../images/f-c.png") left top;
  width: 154px;
  height: 147px;
  -webkit-transform: scale(0);
  animation: planet 4s ease-in 1.5s infinite forwards;
  -webkit-animation: planet 4s ease-in 2s infinite forwards;
}

.page-m-b {
  background: url("../images/m-b-bj-1.jpg") no-repeat center;
  width: 640px;
  height: 1238px;
}
.page-m-b .side-1, .page-m-b .side-2, .page-m-b .side-3, .page-m-b .side-4 {
  width: 515px;
  height: 671px;
}
.page-m-b .t-s {
  position: absolute;
  display: inline-block;
  left: 234px;
  top: 975px;
  background: url("../images/btn-z-y-1.png") left top;
  width: 220px;
  height: 90px;
}
.page-m-b .btn-right {
  z-index: 1;
  position: absolute;
  display: inline-block;
  left: 28px;
  top: 477px;
  background: url("../images/arrow-right.png") left top;
  width: 25px;
  height: 43px;
}
.page-m-b .btn-left {
  z-index: 1;
  position: absolute;
  display: inline-block;
  left: 586px;
  top: 477px;
  background: url("../images/arrow-left.png") left top;
  width: 24px;
  height: 44px;
}
.page-m-b .btn-next {
  position: absolute;
  display: inline-block;
  left: 219px;
  top: 1020px;
  background: url("../images/btn-z-y-1.png") left top;
  width: 220px;
  height: 90px;
}
.page-m-b .word {
  position: absolute;
  display: inline-block;
  left: 226px;
  top: 907px;
  background: url("../images/word-1.png") left top;
  width: 198px;
  height: 79px;
}

.page-x-z {
  background: url("../images/m-b-bj-1.jpg") no-repeat center;
  width: 640px;
  height: 1238px;
}
.page-x-z .b-t {
  display: flex;
  /* justify-content: center; */
  flex-wrap: wrap-reverse;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 57px;
  top: 878px;
  width: 510px;
  background: white;
  border-radius: 15px;
  padding: 13px 10px 2px 10px;
}
.page-x-z .b-t img {
  margin-bottom: 10px;
}
.page-x-z .b-j {
  position: absolute;
  left: 60px;
  top: 190px;
  width: 515px;
  height: 671px;
}
.page-x-z .map {
  width: 515px;
  height: 671px;
}
.page-x-z .w-p {
  padding: 10px 0 10px 0;
  position: absolute;
  top: 463px;
  left: 274px;
  width: 96px;
  height: 83px;
  background: white;
}
.page-x-z .btn-x-map {
  transition: all .5s ease-in;
}
.page-x-z .btn-x-map:active {
  -webkit-transform: scale(0.1);
}
.page-x-z .w-p {
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  position: absolute;
  left: 63px;
  top: 886px;
  width: 510px;
  height: 134px;
  border-radius: 15px;
}
.page-x-z .w-p img {
  margin-left: 10px;
  width: 114px;
  height: 134px;
}
.page-x-z .b-y {
  position: absolute;
  display: inline-block;
  left: 94px;
  top: 997px;
  background: url("../images/btn-b-y.png") left top;
  width: 435px;
  height: 97px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.page-x-z .b-y .btn-sate {
  height: 50px;
  flex: 1;
}
.page-x-z .btn-w-p {
  position: absolute;
  display: inline-block;
  left: 94px;
  top: 1047px;
  background: url("../images/word-2.png") left top;
  width: 425px;
  height: 49px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.page-x-z .btn-w-p .btn-sate {
  height: 50px;
  flex: 1;
}

.page-s-c {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 640px;
  height: 100%;
}
.page-s-c .b-j-two {
  display: block;
  width: 599px;
  height: 1091px;
}
.page-s-c .h-b {
  position: absolute;
}
.page-s-c .btn-s {
  position: absolute;
  display: inline-block;
  left: 41px;
  top: 98px;
  background: url("../images/f-h.png") left top;
  width: 59px;
  height: 59px;
}
.page-s-c .btn {
  justify-content: space-around;
  position: absolute;
  display: inline-block;
  left: 130px;
  top: 1060px;
  background: url("../images/btn.png") left top;
  width: 292px;
  height: 59px;
  display: flex;
}
.page-s-c .btn .btn-sate {
  flex: 1;
  height: 80px;
}

@-webkit-keyframes planet {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(3);
  }
}
@keyframes planet {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(3);
  }
}
@-webkit-keyframes planetz_two {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(0deg) translate3d(0, 0px, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(3) rotate(360deg) translate3d(80px, -50px, 0);
  }
}
.swiper-container {
  position: absolute;
  left: 60px;
  top: 190px;
  width: 517px;
  height: 782px;
}

.page_checking {
  width: 100%;
}

.checking {
  width: 250px;
  height: 250px;
  position: fixed;
  border-radius: 20px;
  background-color: black;
  opacity: .6;
  top: 50%;
  left: 50%;
  margin-top: -137px;
  margin-left: -126px;
}

.checking .text_ {
  color: white;
  line-height: 33px;
  text-align: center;
  font-size: 22px;
}

.checking .checkShow {
  width: 50px;
  height: 50px;
  -webkit-animation: checking 0.5s infinite linear;
  margin: 70px auto 40px auto;
}

.checking .checkShow div {
  width: 100%;
  height: 100%;
  background-color: yellow;
  -webkit-transform: skew(45deg);
}

/*animation*/
@-webkit-keyframes checking {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1, -1);
  }
}
.page-lang {
  overflow-y: scroll;
  background: #72a2e2;
  height: 10194px;
}
.page-lang .head {
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 0px;
  background: url("../images/head.png") left top;
  width: 640px;
  height: 1154px;
}
.page-lang .word {
  position: absolute;
  display: inline-block;
  left: 214px;
  top: 334px;
  background: url("../images/word-3.png") left top;
  width: 206px;
  height: 125px;
}
.page-lang .arrow {
  position: absolute;
  display: inline-block;
  left: 273px;
  top: 630px;
  background: url("../images/arrow.png") left top;
  width: 97px;
  height: 133px;
  -webkit-animation: down_two 1s linear 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.page-lang .bj {
  position: absolute;
  display: inline-block;
  left: 21px;
  top: 1160px;
  background: url("../images/lang.jpg") left top;
  width: 599px;
  height: 9004px;
}
.page-lang .map-1 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 71px;
  top: 1222px;
  background: url("../images/1.png") left top;
  width: 267px;
  height: 147px;
  -webkit-animation: left 0.5s linear 1;
  animation-fill-mode: forwards;
}
.page-lang .map-2 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 116px;
  top: 1466px;
  background: url("../images/2.png") left top;
  width: 486px;
  height: 384px;
  -webkit-animation: right 0.5s linear 1;
  animation-fill-mode: forwards;
}
.page-lang .map-3 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 39px;
  top: 1725px;
  background: url("../images/3.png") left top;
  width: 396px;
  height: 408px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-4 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 215px;
  top: 2258px;
  background: url("../images/4.png") left top;
  width: 367px;
  height: 147px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-5 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 57px;
  top: 2468px;
  background: url("../images/5.png") left top;
  width: 294px;
  height: 565px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-6 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 242px;
  top: 2522px;
  background: url("../images/6.png") left top;
  width: 344px;
  height: 507px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-7 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 69px;
  top: 3233px;
  background: url("../images/7.png") left top;
  width: 478px;
  height: 147px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-8 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 99px;
  top: 3439px;
  background: url("../images/8.png") left top;
  width: 461px;
  height: 189px;
  -webkit-animation: down 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-9 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 117px;
  top: 3672px;
  background: url("../images/9.png") left top;
  width: 355px;
  height: 176px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-10 {
  position: absolute;
  display: inline-block;
  left: 125px;
  top: 3885px;
  background: url("../images/10.png") left top;
  width: 388px;
  height: 246px;
  -webkit-animation: left 0.5s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-11 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 185px;
  top: 4302px;
  background: url("../images/11.png") left top;
  width: 394px;
  height: 148px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-12 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 89px;
  top: 4474px;
  background: url("../images/12.png") left top;
  width: 257px;
  height: 183px;
  -webkit-animation: down 1.5s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-35 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 341px;
  top: 4495px;
  background: url("../images/35.png") left top;
  width: 225px;
  height: 196px;
  -webkit-animation: right 1.5s 1 linear 1s;
  animation-fill-mode: forwards;
}
.page-lang .map-13 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 70px;
  top: 4674px;
  background: url("../images/13.png") left top;
  width: 198px;
  height: 169px;
  -webkit-animation: right 0.5s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-36 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 225px;
  top: 4678px;
  background: url("../images/36.png") left top;
  width: 138px;
  height: 161px;
  -webkit-animation: down 0.5s 1 linear 1s;
  animation-fill-mode: forwards;
}
.page-lang .map-37 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 384px;
  top: 4730px;
  background: url("../images/37.png") left top;
  width: 172px;
  height: 113px;
  -webkit-animation: right 0.5s 1 linear 1s;
  animation-fill-mode: forwards;
}
.page-lang .map-14 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 105px;
  top: 4876px;
  background: url("../images/14.png") left top;
  width: 454px;
  height: 160px;
  -webkit-animation: down 2s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-18 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 149px;
  top: 6170px;
  background: url("../images/18.png") left top;
  width: 427px;
  height: 147px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-16 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 65px;
  top: 5227px;
  background: url("../images/16.png") left top;
  width: 315px;
  height: 147px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-17 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 70px;
  top: 5474px;
  background: url("../images/17.png") left top;
  width: 262px;
  height: 484px;
  -webkit-animation: down 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-31 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 260px;
  top: 5512px;
  background: url("../images/31.png") left top;
  width: 337px;
  height: 420px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-19 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 320px;
  top: 6361px;
  background: url("../images/19.png") left top;
  width: 276px;
  height: 304px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-32 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 40px;
  top: 6415px;
  background: url("../images/map-19.png") left top;
  width: 263px;
  height: 196px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-20 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 289px;
  top: 6708px;
  background: url("../images/33.png") left top;
  width: 285px;
  height: 399px;
  -webkit-animation: down 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-33 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 68px;
  top: 6691px;
  background: url("../images/32.png") left top;
  width: 234px;
  height: 186px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-34 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 68px;
  top: 6946px;
  background: url("../images/34.png") left top;
  width: 197px;
  height: 167px;
  -webkit-animation: left 1s 1 linear 0.5s;
  animation-fill-mode: forwards;
}
.page-lang .map-21 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 74px;
  top: 7268px;
  background: url("../images/21.png") left top;
  width: 267px;
  height: 147px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-22 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 463px;
  top: 7239px;
  background: url("../images/22.png") left top;
  width: 103px;
  height: 411px;
  -webkit-animation: top 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-23 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 54px;
  top: 7557px;
  background: url("../images/23.png") left top;
  width: 517px;
  height: 364px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-24 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 319px;
  top: 8096px;
  background: url("../images/24.png") left top;
  width: 259px;
  height: 148px;
  -webkit-animation: right 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-25 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 35px;
  top: 8215px;
  background: url("../images/25.png") left top;
  width: 371px;
  height: 255px;
  -webkit-animation: left 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-26 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 85px;
  top: 8481px;
  background: url("../images/26.png") left top;
  width: 470px;
  height: 186px;
  -webkit-animation: top 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-27 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 20px;
  top: 8693px;
  background: url("../images/27.png") left top;
  width: 598px;
  height: 435px;
  -webkit-animation: top 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-28 {
  position: absolute;
  display: inline-block;
  left: 193px;
  top: 9317px;
  background: url("../images/28.png") left top;
  width: 271px;
  height: 388px;
  -webkit-animation: height 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-29 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 200px;
  top: 9855px;
  background: url("../images/btn-1.png") left top;
  width: 268px;
  height: 126px;
  -webkit-animation: down 1s 1 linear;
  animation-fill-mode: forwards;
}
.page-lang .map-30 {
  opacity: 0;
  position: absolute;
  display: inline-block;
  left: 214px;
  top: 10017px;
  background: url("../images/word-two.png") left top;
  width: 247px;
  height: 24px;
  -webkit-animation: down 1s 1 linear 1s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes left {
  from {
    opacity: 0;
    -webkit-transform: translate(-100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes right {
  from {
    opacity: 0;
    -webkit-transform: translate(100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes down {
  from {
    opacity: 0;
    -webkit-transform: translate(0px, -100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes top {
  from {
    opacity: 0;
    -webkit-transform: translate(0px, 100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes height {
  from {
    height: 0px;
  }
  to {
    height: 388px;
  }
}
@-webkit-keyframes down_two {
  0% {
    -webkit-transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 10px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -10px, 0);
  }
}
@-webkit-keyframes y_c {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.dialog_rule, .dialog_game_rule {
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  width: 640px;
}
.dialog_rule .bj, .dialog_game_rule .bj {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.dialog_rule .bj .map, .dialog_game_rule .bj .map {
  width: 461px;
  height: 642px;
}
.dialog_rule .bj .btn-close, .dialog_rule .bj .btn-close-two, .dialog_game_rule .bj .btn-close, .dialog_game_rule .bj .btn-close-two {
  position: absolute;
  top: 320px;
  left: 472px;
  width: 70px;
  height: 70px;
}

.dialog_game_rule .map {
  position: relative;
  top: -116px;
  width: 489px !important;
  height: 870px !important;
}
.dialog_game_rule .btn-close-two {
  top: 91px !important;
  left: 472px !important;
}

.zhou {
  z-index: 98;
  position: absolute;
  display: inline-block;
  left: 605px;
  top: 20px;
  background: url("../images/y.png") left top;
  width: 17px;
  height: 28px;
}

.c-d {
  z-index: 97;
  position: absolute;
  display: inline-block;
  left: 564px;
  top: 23px;
  background: url("../images/x.png") left top;
  width: 61px;
  height: 61px;
}

.m-b-zhou-sate {
  left: 585px !important;
  top: 91px !important;
}

.m-b-sate {
  left: 542px !important;
  top: 94px !important;
}

.rotate-sate {
  -webkit-animation: rotate 2s infinite linear;
}

@-webkit-keyframes rotate {
  0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.page-no-prize {
  position: relative;
  height: 1238px;
  width: 640px;
  background: url("../images/no-prize.jpg") top center no-repeat;
}
.page-no-prize .btn {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 990px;
  left: 116px;
  width: 422px;
  height: 60px;
}
.page-no-prize .btn div {
  flex: 1;
  height: 60px;
}

.dialog-share {
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  width: 640px;
}
.dialog-share img {
  position: absolute;
  top: 126px;
  left: 349px;
  width: 252px;
  height: 191px;
}

.page-prize {
  position: relative;
  height: 1238px;
  width: 640px;
}
.page-prize .prize-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-prize .btn-info {
  position: absolute;
  top: 1022px;
  left: 188px;
  width: 271px;
  height: 77px;
}

.page-info {
  background: url("../images/prize-info.jpg") no-repeat center;
  width: 640px;
  height: 1238px;
}
.page-info .yes-prize {
  position: absolute;
  left: 80px;
  top: 111px;
  width: 496px;
  height: 865px;
}
.page-info input {
  position: absolute;
  left: 185px;
  width: 341px;
  height: 49px;
  font-size: 30px;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
}
.page-info .name {
  top: 535px;
}
.page-info .address {
  top: 649px;
}
.page-info .tel {
  top: 767px;
  left: 236px;
  width: 299px;
}
.page-info .btn-submit {
  width: 172px;
  height: 90px;
  position: absolute;
  left: 227px;
  top: 950px;
}

.page-loading {
  position: relative;
  height: 1238px;
}
.page-loading .ball {
  width: 135px;
  height: 90px;
  position: absolute;
  top: 443px;
  left: 257px;
  -webkit-animation: down_two 3s linear 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.page-loading .loading {
  width: 118px;
  height: 24px;
  position: absolute;
  top: 546px;
  left: 282px;
  -webkit-animation: zoomIn 1s linear 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}
.page-loading .x-h {
  width: 640px;
  height: 495px;
  position: absolute;
  top: 369px;
  left: 0px;
  -webkit-animation: zoomIn 3s linear 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes down_two {
  0% {
    -webkit-transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 10px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -10px, 0);
  }
}
