@charset "UTF-8";
@import "easy_animation.scss";
@import "compass/reset";
//@import "compass/css3/animation";
$max-width: 640px;
$body-width: 640px;
$body-height: 1006px;
$real-body-width: 640px !default;
$real-body-height: 1006px !default;
$container-body-width: 640px !default;
$container-body-height: 1006px !default;
$r: ($real-body-width / $container-body-width);
$ea-prefix-for-mozilla: false !global;
$ea-prefix-for-microsoft: true !global;
$ea-prefix-for-opera: false !global;
$ea-prefix-for-spec: false !global;
@function minus_topbar($x) {
  @return $x - 124px;
}

//
//@function torem($px) {
//  @return $px / 100px * 1rem;
//}
//@mixin image_bounds_by_pos($img, $x, $y) {
//  position: absolute;
//  display: inline-block;
//  left: torem($x);
//  top: torem($y);
//  background: url($img) left top no-repeat;
//  width: torem(image_width($img));
//  height: torem(image_height($img));
//}

//
//@mixin bounds_by_pos($x, $y, $w, $h) {
//  position: absolute;
//  display: inline-block;
//  left: torem($x);
//  top: torem($y);
//  width: torem($w);
//  height:torem($h);
//}
@function torem($px) {
  @return $px
}

@mixin bounds_by_pos($x, $y, $w, $h) {
  position: absolute;
  display: inline-block;
  left: torem($x);
  top: torem($y);
  width: torem($w);
  height: torem($h);
}

@mixin image_bounds_by_pos($img, $x, $y) {
  position: absolute;
  display: inline-block;
  left: torem($x);
  top: torem($y);
  background: url($img) left top;
  width: torem(image_width($img));
  height: torem(image_height($img));
}

@mixin image_bounds_by_pos_right($img, $x, $y) {
  position: absolute;
  display: inline-block;
  right: torem($x);
  top: torem($y);
  background: url($img) left top no-repeat;
  width: torem(image_width($img));
  height: torem(image_height($img));
}

@mixin full_page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@mixin animate_forwards() {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  //  user-select: none;
  //  -webkit-user-select: none;
}

html, body {
  margin: 0;
  height: 100%;
  //height: 1008px;
  width: 100%;
  //overflow-x: hidden;
  user-select: none;
  padding: 0;
  //  -webkit-overflow-scrolling: touch;
  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: $container-body-width;
  //height: 100%;
  max-width: $max-width;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.dialog {
  @include full_page;
  display: none;
}

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

.page_home {
  position: relative;
  height: 1238px;
  .game-bj {
    @include image_bounds_by_pos("../images/bj.jpg", 0px, 0px);
  }
  .word {
    opacity: 0;
    @include image_bounds_by_pos("../images/home-word.png", 60px, 427px);
    -webkit-animation: rotateIn 0.5s 1 linear;
    animation-fill-mode: forwards

  }
  .hand {
    opacity: 0;
    @include image_bounds_by_pos("../images/hand.png", 390px, 641px);
    -webkit-animation: y_c 1s linear 0s infinite;
    @include animate_forwards;
  }
  .btn-next-map {
    position: absolute;
    top: 731px;
    left: 415px;
    width: 137px;
    height: 224px;
  }
}
.page-through {
  position: relative;
  height: 1238px;
  overflow: hidden;
  background: #9bc2f6;
  .through-map {
    @include image_bounds_by_pos("../images/x-k-map.jpg",-271px, -53px);
    -webkit-transform: scale(0.5);
    animation: planetz_two 6s ease-in 0s infinite forwards;
    -webkit-animation: planetz_two 6s ease-in 0s infinite forwards;
  }

  //dos code
  .map-1 {
    @include image_bounds_by_pos("../images/2-1.png", -173px, 74px);
    -webkit-transform: scale(0);
    animation: planet 4s ease-in 0s infinite forwards;
    -webkit-animation: planet 4s ease-in 0s infinite forwards;
  }

  .map-2 {
    @include image_bounds_by_pos("../images/2-2.png", -35px, 182px);
    -webkit-transform: scale(0);
    animation: planet 4s ease-in 0.5s infinite forwards;
    -webkit-animation: planet 4s ease-in 0.5s infinite forwards;

  }
  .map-3 {
    @include image_bounds_by_pos("../images/2-3.png", 65px, 332px);
    -webkit-transform: scale(0);
    animation: planet 4s ease-in 1s infinite forwards;
    -webkit-animation: planet 4s ease-in 1s infinite forwards;
  }
  .map-4 {
    @include image_bounds_by_pos("../images/2-4.png", 147px, 460px);
    -webkit-transform: scale(0);
    animation: planet 4s ease-in 1.5s infinite forwards;
    -webkit-animation: planet 4s ease-in 1.5s infinite forwards;
  }
  .map-5 {
    @include image_bounds_by_pos("../images/f-c.png", 254px, 554px);
    -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;
  .side-1, .side-2, .side-3, .side-4 {
    width: 515px;
    height: 671px;
  }
  .t-s {
    @include image_bounds_by_pos("../images/btn-z-y-1.png", 234px, 975px);
  }
  .btn-right {
    z-index: 1;
    @include image_bounds_by_pos("../images/arrow-right.png", 28px, 477px);
  }

  .btn-left {
    z-index: 1;
    @include image_bounds_by_pos("../images/arrow-left.png", 586px, 477px);
  }
  .btn-next {
    @include image_bounds_by_pos("../images/btn-z-y-1.png", 219px, 1020px);
  }
  .word {
    @include image_bounds_by_pos("../images/word-1.png", 226px, 907px);

  }
}

.page-x-z {
  background: url("../images/m-b-bj-1.jpg") no-repeat center;
  width: 640px;
  height: 1238px;
  .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;
    img {
      margin-bottom: 10px;
    }
  }
  .b-j {
    position: absolute;
    left: 60px;
    top: 190px;
    width: 515px;
    height: 671px;
  }
  .map {
    width: 515px;
    height: 671px;
  }
  .w-p {

    padding: 10px 0 10px 0;
    position: absolute;
    top: 463px;
    left: 274px;
    width: 96px;
    height: 83px;
    background: white;
  }
  .btn-x-map {
    transition: all .5s ease-in;
  }
  .btn-x-map:active {
    -webkit-transform: scale(0.1);
  }
  .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;
    img {
      margin-left: 10px;
      width: 114px;
      height: 134px;
    }

  }
  .b-y {
    @include image_bounds_by_pos("../images/btn-b-y.png", 94px, 997px);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    .btn-sate {
      height: 50px;
      flex: 1;
    }

  }
  .btn-w-p {
    @include image_bounds_by_pos("../images/word-2.png", 94px, 1047px);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    .btn-sate {
      height: 50px;
      flex: 1;
    }

  }
}

.page-s-c {
  width: 640px;
  height: 1238px;
  .btn-s {

    @include image_bounds_by_pos("../images/f-h.png", 41px, 98px);

  }
  .btn {
    justify-content: space-around;
    @include image_bounds_by_pos("../images/btn.png", 68px, 1025px);
    display: flex;
    .btn-sate {
      flex: 1;
      height: 50px;
    }
  }
}

@-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;
  .head{
    @include image_bounds_by_pos("../images/head.png", 0px, 0px);
  }
  .word {
    @include image_bounds_by_pos("../images/word-3.png", 214px, 334px);

  }

  .arrow {
    @include image_bounds_by_pos("../images/arrow.png", 273px, 630px);
    -webkit-animation: down_two 1s linear 0s infinite;
    @include animate_forwards;
  }
  .bj {
    @include image_bounds_by_pos("../images/lang.jpg", 21px, 1160px);

  }
  .map-1 {
    opacity: 0;
    @include image_bounds_by_pos("../images/1.png", 71px, 1222px);
    -webkit-animation: left 0.5s  linear 0.5s 1;
    animation-fill-mode: forwards
  }
  .map-2 {
    opacity: 0;
    @include image_bounds_by_pos("../images/2.png", 116px, 1466px);
    -webkit-animation: right 0.5s  linear 0.5s 1;
    animation-fill-mode: forwards
  }

  .map-3 {
    opacity: 0;
    @include image_bounds_by_pos("../images/3.png", 39px, 1725px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-4 {
    opacity: 0;
    @include image_bounds_by_pos("../images/4.png", 215px, 2258px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-5 {
    opacity: 0;
    @include image_bounds_by_pos("../images/5.png", 57px, 2468px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-6 {
    opacity: 0;
    @include image_bounds_by_pos("../images/6.png", 242px, 2522px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }

  .map-7 {
    opacity: 0;
    @include image_bounds_by_pos("../images/7.png", 69px, 3233px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-8 {
    opacity: 0;
    @include image_bounds_by_pos("../images/8.png", 99px, 3439px);
    -webkit-animation: down 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-9 {
    opacity: 0;
    @include image_bounds_by_pos("../images/9.png", 117px, 3672px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-10 {
    @include image_bounds_by_pos("../images/10.png", 125px, 3885px);
    -webkit-animation: left 0.5s 1 linear;
    animation-fill-mode: forwards
  }
  .map-11 {
    opacity: 0;
    @include image_bounds_by_pos("../images/11.png", 185px, 4302px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-12 {
    opacity: 0;
    @include image_bounds_by_pos("../images/12.png", 89px, 4474px);
    -webkit-animation: down 0.5s 1 linear;
    animation-fill-mode: forwards
  }
  .map-13 {
    opacity: 0;
    @include image_bounds_by_pos("../images/13.png", 70px, 4674px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-14 {
    opacity: 0;
    @include image_bounds_by_pos("../images/14.png", 105px, 4876px);
    -webkit-animation: down 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-18 {
    opacity: 0;
    @include image_bounds_by_pos("../images/18.png", 149px, 6170px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-16 {
    opacity: 0;
    @include image_bounds_by_pos("../images/16.png", 65px, 5227px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-17 {
    opacity: 0;
    @include image_bounds_by_pos("../images/17.png", 70px, 5474px);
    -webkit-animation: down 1s 1 linear;
    animation-fill-mode: forwards
  }

  .map-19 {
    opacity: 0;
    @include image_bounds_by_pos("../images/19.png", 39px, 6361px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-20 {
    opacity: 0;
    @include image_bounds_by_pos("../images/20.png", 70px, 6691px);
    -webkit-animation: down 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-21 {
    opacity: 0;
    @include image_bounds_by_pos("../images/21.png", 74px, 7268px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-22 {
    opacity: 0;
    @include image_bounds_by_pos("../images/22.png", 463px, 7239px);
    -webkit-animation: top 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-23 {
    opacity: 0;
    @include image_bounds_by_pos("../images/23.png", 54px, 7557px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-24 {
    opacity: 0;
    @include image_bounds_by_pos("../images/24.png", 319px, 8096px);
    -webkit-animation: right 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-25 {
    opacity: 0;
    @include image_bounds_by_pos("../images/25.png", 35px, 8215px);
    -webkit-animation: left 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-26 {
    opacity: 0;
    @include image_bounds_by_pos("../images/26.png", 85px, 8481px);
    -webkit-animation: top 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-27 {
    opacity: 0;
    @include image_bounds_by_pos("../images/27.png", 20px, 8693px);
    -webkit-animation: top 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-28 {
    @include image_bounds_by_pos("../images/28.png", 193px, 9317px);
    -webkit-animation: height 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-29 {
    opacity: 0;
    @include image_bounds_by_pos("../images/btn-1.png", 200px, 9855px);
    -webkit-animation: down 1s 1 linear;
    animation-fill-mode: forwards
  }
  .map-30 {

    opacity: 0;
    @include image_bounds_by_pos("../images/word-two.png", 214px, 10017px);
    -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;
  }
}

//background:url("../images/loding.jpg") top center no-repeat;
//$img: url("../images/btn_map.png");
//@include image_bounds_by_pos("../images/page_end.jpg", 333px, 933px);

@-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;
  .bj {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .map {

      width: 461px;
      height: 642px;

    }
    .btn-close, .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;
  }

  .btn-close-two {
    top: 91px !important;
    left: 472px !important;
  }
}

.zhou {
  z-index: 98;
  @include image_bounds_by_pos("../images/y.png", 605px, 20px);
}

.c-d {
  z-index: 97;
  @include image_bounds_by_pos("../images/x.png", 564px, 23px);
}

.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-transform-origin: 46% 51%;
}

@-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;
  .btn {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 990px;
    left: 116px;
    width: 422px;
    height: 60px;
    div {
      flex: 1;
      height: 60px;
    }
  }
}

.dialog-share {

  z-index: 999;

  background: rgba(0, 0, 0, 0.7);
  width: 640px;
  img {
    position: absolute;
    top: 126px;
    left: 349px;
    width: 252px;
    height: 191px;

  }
}

.page-prize {
  position: relative;
  height: 1238px;
  width: 640px;
  .prize-map {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .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;

  .yes-prize {
    position: absolute;
    left: 80px;
    top: 111px;
    width: 496px;
    height: 865px;
  }
  input {
    position: absolute;
    left: 185px;
    width: 341px;
    height: 49px;
    font-size: 30px;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
  }
  .name {
    top: 535px;
  }
  .address {
    top: 649px;
  }

  .tel {
    top: 767px;
    left: 236px;
    width: 299px;
  }
  .btn-submit {
    width: 172px;
    height: 90px;
    position: absolute;
    left: 227px;
    top: 950px;
  }
}
.page-loading {
  position: relative;
  height: 1238px;
  .ball {
    width: 135px;
    height: torem(90px);
    position: absolute;
    top: 443px;

    left: 257px;
    -webkit-animation: down_two 3s linear 0s infinite;
    @include animate_forwards;
  }
  .loading {
    width: 118px;
    height: 24px;
    position: absolute;
    top: 546px;
    left: 282px;
    -webkit-animation: zoomIn 1s linear 0s infinite;
    @include animate_forwards;
    opacity: 0;
  }
  .x-h {
    width: 640px;
    height: 495px;
    position: absolute;
    top: 369px;
    left: 0px;
    -webkit-animation: zoomIn 3s linear 0s infinite;
    @include animate_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)
  }
}
