@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;
  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: #a9d0fe;
  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 {

    @include image_bounds_by_pos("../images/home-word.png", 60px, 427px);

  }
  .hand {

    @include image_bounds_by_pos("../images/hand.png", 390px, 641px);

  }

}

.page-through {
  position: relative;
  height: 1238px;
  overflow: hidden;
  background: #a9d0fe;
  .through-map {
    @include image_bounds_by_pos("../images/x-k-map.jpg", 0px, 0px);
    -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", 0px, 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", 0px, 153px);
    -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", 73px, 303px);
    -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", 134px, 369px);
    -webkit-transform: scale(0);
    animation: planet 4s ease-in 1.5s infinite forwards;
    -webkit-animation: planet 4s ease-in 1.5s 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", 226px, 1000px);
  }
  .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 {

    position: absolute;
    left: 63px;
    top: 878px;
    width: 512px;
    //height: 87px;
    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;
  }

  .w-p {
    overflow-x: scroll;
    display: flex;
    align-items: center;
    position: absolute;
    left: 63px;
    top: 886px;
    width: 492px;
    height: 87px;
    img {
      margin-left: 10px;
      width: 96px;
      height: 83px;
    }
  }
  .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, 997px);
    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, 107px);

  }
  .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;

}

.checking {
  width: 300px;
  height: 300px;
  position: fixed;
  border-radius: 20px;
  background-color: black;
  opacity: .6;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
  display: none;
}

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

  }

  .arrow {
    @include image_bounds_by_pos("../images/arrow.png", 273px, 630px);

  }
  .bj {
    @include image_bounds_by_pos("../images/lang.jpg", 21px, 1160px);

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

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

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



