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

@font-face {
  font-family: 'fz';
  src: url('fz-Bold.eot'); /* IE9 Compat Modes */
  src: url('fz-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fz-Bold.woff') format('woff'), /* Modern Browsers */
  url('fz.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('fz-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

  //appearance:none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
}

input {
  border: none;
}

* {
  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;
  overflow-y: hidden;
  user-select: none;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  background-color: black;
  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;
}

.page {
  @include full_page;
  display: none;
  overflow-x: hidden;
  height: 100%;
}

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

.page .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

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

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

.page_home {
  background: url("../images/bj.jpg") top center no-repeat;
  .head {

    @include image_bounds_by_pos("../images/home_head.png", 60px, 247px);
    -webkit-animation: fadeInDown 1s ease 0s 1;
    @include animate_forwards;
  }
  .word {
    @include image_bounds_by_pos("../images/head_word.png", 100px, 433px);
    -webkit-animation: airpla 1s ease 0.5s 1;
    @include animate_forwards;
    opacity: 0;
  }

  .btn_play {

    @include image_bounds_by_pos("../images/btn_play.png", 223px, 598px);
    -webkit-animation: airpla 1s linear 1s 1, tada 1s linear 1.5s infinite;
    @include animate_forwards;
    opacity: 0;

  }
  .logo {
    @include image_bounds_by_pos("../images/logi.png", 34px, 25px);
  }

}

.page_two {

  background: url("../images/bj.jpg") top center no-repeat;

  .man {
    @include image_bounds_by_pos("../images/page_two_man.png", 246px, 102px);

  }
  .line {

    @include image_bounds_by_pos("../images/line.png", 43px, 233px);

  }
  .map {
    @include image_bounds_by_pos("../images/page_two_map.png", 43px, 273px);

  }
  .t-s {

    @include image_bounds_by_pos("../images/page_two_word.png", 43px, 454px);

  }
  .left {
    @include image_bounds_by_pos("../images/left.png", 43px, 511px);

  }
  .left_word {

    @include image_bounds_by_pos("../images/left_word.png", 79px, 577px);

  }
  .right {
    @include image_bounds_by_pos("../images/right.png", 267px, 511px);

  }
  .right_word {
    @include image_bounds_by_pos("../images/right_eord.png", 306px, 577px);

  }
  .arrow {
    @include image_bounds_by_pos("../images/arrow.png", 271px, 925px);

  }

  &.swiper-slide-active {
    .man {
      width: 0px;
      -webkit-animation: man 0.7s linear 0.4s 1;

      @include animate_forwards;
    }
    .line {
      width: 0px;
      -webkit-animation: line 1s linear 0s 1;

      @include animate_forwards;
    }
    .map {

      -webkit-animation: rotateInUpRight 0.7s linear 0.9s 1;

      @include animate_forwards;
      opacity: 0;

    }
    .t-s {

      -webkit-animation: airpla 1s linear 1.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .left {

      -webkit-animation: rollIn 0.6s linear 2s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .left_word {

      height: 0;
      -webkit-animation: left_word 0.6s linear 2.4s 1;
      @include animate_forwards;
    }
    .right {
      @include image_bounds_by_pos("../images/right.png", 267px, 511px);
      -webkit-animation: rollIn 0.6s linear 2s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .right_word {

      height: 0;
      -webkit-animation: right_word 0.6s linear 2.6s 1;
      @include animate_forwards;
    }
    .arrow {
      -webkit-animation: airpla 1s linear 2.9s 1, bounce 1s linear 3.2s infinite;
      @include animate_forwards;
      opacity: 0;
    }

  }

}

.page_3 {

  background: url("../images/bj.jpg") top center no-repeat;

  .map {

    @include image_bounds_by_pos("../images/page_3_map.png", 207px, 187px);

  }
  .n-1 {
    @include image_bounds_by_pos("../images/1-1.png", 72px, 94px);

  }
  .n-2 {

    @include image_bounds_by_pos("../images/1-2.png", 250px, 95px);

  }
  .n-3 {

    @include image_bounds_by_pos("../images/1-3.png", 371px, 118px);

  }
  .n-4 {
    @include image_bounds_by_pos("../images/1-8.png", 561px, 214px);

  }
  .n-5 {

    @include image_bounds_by_pos("../images/1-5.png", 109px, 305px);

  }
  .n-6 {
    @include image_bounds_by_pos("../images/1-4.png", 493px, 310px);

  }
  .n-7 {
    @include image_bounds_by_pos("../images/b-x.png", 217px, 448px);

  }
  .n-8 {
    @include image_bounds_by_pos("../images/1-7.png", 91px, 410px);

  }
  .n-9 {
    @include image_bounds_by_pos("../images/g-j-s.png", 472px, 390px);

  }
  .map_bj {

    @include image_bounds_by_pos("../images/page_3.png", 42px, 555px);

  }
  .t-s {
    @include image_bounds_by_pos("../images/page_3_word.png", 193px, 620px);

  }
  .arrow {

    @include image_bounds_by_pos("../images/page_3_arrow.png", 269px, 926px);

  }
.hand{
  @include image_bounds_by_pos("../images/hand_big.png", 257px, 510px);

}
  &.swiper-slide-active {

    .map {

      -webkit-animation: zoomIn 0.6s linear 0s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .n-1 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .n-2 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .n-3 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .n-4 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .n-5 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .n-6 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .n-7 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1, scale 1s linear 0.5s infinite;;
      @include animate_forwards;
      opacity: 0;
    }

    .hand{
      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .n-8 {

      -webkit-animation: zoomIn 0.6s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .n-9 {

      -webkit-animation: zoomIn 0.6s linear 0.5s;
      @include animate_forwards;
      opacity: 0;

    }
    .map_bj {

      -webkit-animation: airpla 1s ease 1s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .t-s {
      -webkit-animation: airpla 1s ease 0s 1, scale 1s linear 0.5s infinite;
      @include animate_forwards;
      opacity: 0;
    }
    .arrow {

      -webkit-animation: airpla 1s linear 1.5s 1, bounce 1s linear 2s infinite;
      @include animate_forwards;
      opacity: 0;
    }

  }

}
.page_4_1 {
  background: url("../images/bj.jpg") top center no-repeat;
.hand_two{

  @include image_bounds_by_pos("../images/hand_two.png", 533px, 196px);
}
  .left_man {
    @include image_bounds_by_pos("../images/2-3.png", 29px, 268px);

  }
  .right_man {

    @include image_bounds_by_pos("../images/2-1.png", 280px, 253px);

  }
  .map {

    @include image_bounds_by_pos("../images/page_4_1.png", 47px, 654px);

  }
  .btn_money {
    width: 184px;
    height: 177px;
    position: absolute;
    top: 231px;
    left: 272px;
  }
  .btn_q_t {
    width: 178px;
    height: 177px;
    position: absolute;
    top: 231px;
    left: 455px;

  }
  &.swiper-slide-active {
    .left_man {

      -webkit-animation: airpla 1s linear 0s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .right_man {

      -webkit-animation: airpla 1s linear 1s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .hand_two{
      -webkit-animation: airpla 1s linear 1.5s 1,bounce 1s linear 2s infinite;;

      @include animate_forwards;
      opacity: 0;
    }
    .map {

      height: 0;
      -webkit-animation: four 1s linear 1.5s 1;
      @include animate_forwards;
    }

  }
}

.page_4_2 {
  background: url("../images/bj.jpg") top center no-repeat;
  .left_man {
    @include image_bounds_by_pos("../images/2-4.png", 29px, 268px);
    -webkit-animation: airpla 1s linear 0s 1;
    @include animate_forwards;
    opacity: 0;
  }
  .btn_c-x {
    width: 640px;
    height: 127px;
    position: absolute;
    top: 782px;

  }
  .right_man {

    @include image_bounds_by_pos("../images/2-5.png", 280px, 251px);
    -webkit-animation: airpla 1s linear 1s 1;
    @include animate_forwards;
    opacity: 0;
  }
  .map {

    @include image_bounds_by_pos("../images/page_4_3.png", 47px, 654px);
    -webkit-animation: zoomIn 0.5s linear 1.5s 1;
    @include animate_forwards;
    opacity: 0;

  }
}

.page_4_3 {
  background: url("../images/bj.jpg") top center no-repeat;
  .left_man {
    @include image_bounds_by_pos("../images/2-7.png", 29px, 268px);

  }
  .right_man {

    @include image_bounds_by_pos("../images/2-6.png", 280px, 251px);

  }
  .map {

    @include image_bounds_by_pos("../images/page_4_2.png", 47px, 654px);

  }
  .head {

    @include image_bounds_by_pos("../images/page_4_word.png", 199px, 82px);

  }
  .arrow {

    @include image_bounds_by_pos("../images/page_3_arrow.png", 269px, 926px);

  }

  &.swiper-slide-active {

    .left_man {

      -webkit-animation: airpla 1s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .right_man {

      -webkit-animation: airpla 1s linear 1s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .map {

      -webkit-animation: zoomIn 0.5s linear 1.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .head {

      -webkit-animation: rotateIn 0.5s linear 0s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .arrow {

      -webkit-animation: airpla 1s linear 2s 1, bounce 1s linear 2.1s infinite;
      @include animate_forwards;
      opacity: 0;
    }

  }
}

.page_5 {
  background: url("../images/bj.jpg") top center no-repeat;
  .head {
    @include image_bounds_by_pos("../images/page_4_word.png", 199px, 82px);

  }
  .hand_5{
    @include image_bounds_by_pos("../images/hand_big.png", 492px, 463px);

  }
  .head_two {


    @include image_bounds_by_pos("../images/page_5_head.png", 208px, 146px);


  }
  .w-t {

    @include image_bounds_by_pos("../images/page_5_1.png", 48px, 274px);

  }
  .d-a {
    @include image_bounds_by_pos("../images/page_5_2.png", 76px, 421px);

  }
  .word {

    @include image_bounds_by_pos("../images/page_5_word_.png", 107px, 556px);

  }
  .hand {
    @include image_bounds_by_pos("../images/hand.png", 245px, 688px);

  }

  .arrow {
    @include image_bounds_by_pos("../images/page_5_arrow.png", 245px, 927px);

  }
.word_two{

  @include image_bounds_by_pos("../images/three.png", 125px, 556px);

}


  &.swiper-slide-active {

    .head {

      -webkit-animation: bounceInLeft 1s linear 0s 1;
      @include animate_forwards;

    }
    .head_two {

      -webkit-animation: bounceInRight 1s linear 0s 1;
      @include animate_forwards;
    }

    .word_two{
      -webkit-animation: airpla 1s ease 0s 1, scale 1s linear 0.5s infinite;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      opacity: 0;
    }
    .hand_5{


      -webkit-animation: airpla 1s linear 1.5s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .w-t {

      -webkit-animation: fadeInDown 0.5s linear 0.5s 1;
      @include animate_forwards;
      opacity: 0;

    }
    .d-a {
      width: 0;
      -webkit-animation: five 0.5s linear 1s 1;
      @include animate_forwards;
      //opacity: 0;
    }
    .word {

      -webkit-animation: airpla 1s linear 1.4s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .hand {
      -webkit-animation: airpla 1s linear 0s 1;
      @include animate_forwards;
      opacity: 0;
    }
    .arrow {

      -webkit-animation: airpla 1s linear 2s 1, bounce 1s linear 2.1s infinite;
      @include animate_forwards;
      opacity: 0;
    }

  }
}
.dialog_t{
background: rgba(0,0,0,0.8);
  width: 640px;
  height: 1041px;
  z-index: 99;
.map{

  @include image_bounds_by_pos("../images/t-s-y.png", 110px, 283px);
}
  .btn_t_close{
    width: 421px;
    height:102px;
    position:absolute;
    top:468px;
    left: 110px;
  }
}
.dialog_end {
  font-family: 'fz';
z-index: 99;
  background: url("../images/end_.jpg") top center no-repeat;
  .btn_close{

    width: 89px;
    height: 40px;
    position: absolute;
    top:50px;
    left:521px;
  }
  .d-h {

    width: 640px;
    height: 79px;

    position: absolute;
    top: 123px;
    display: flex;
    align-items: center;
    background: #9a181a;
    .d-c {
      font-size: 22px;
      width: 134px;
      height: 79px;
      color: white;
      //line-height: 51px;
      text-align: center;
      border-right: 1px solid white;
      display:-webkit-flex;

      justify-content: center;
      align-items: center;
    }

    .d-2 {
      flex-shrink: 30;
    }
  }

  .list {
    width: 640px;
    height: 828px;

    overflow-y: scroll;
    position: absolute;
    top: 203px;
    display: flex;

    .list-c {
      font-size: 18px;
      width: 134px;
      height: auto;

      .c-l {

        //width: 134px;
        overflow-x: auto;
        overflow-y: hidden;
        height: 59px;
        font-size: 18px;
        color: black;
        text-align: center;
        line-height: 59px;
        //border-bottom: 1px solid #9a181a;
        border: 1px solid #9a181a;
      }
    }
    .list-1 {
      .c-l{

        //font-size: 20px;
      }
    }
    .list-2 {
      flex-shrink: 30;
    }
  }
}

.page_6 {
  background: url("../images/bj.jpg") top center no-repeat;
  .h-s {
    .info {

      width: 535px;
      height: 59px;

      position: absolute;
      top: 43px;
      left: 53px;
      line-height: 59px;
      color: black;
      font-size: 28px;
      font-family: 'fz';
    }
    .list {

      width: 544px;
      height: 143px;
      font-family: 'fz';
      color: white;
      font-size: 26px;
      position: absolute;
      top: 315px;
      left: 50px;

      .btn_d {
        width: 175px;
        height: 65px;
        line-height: 65px;
        background-color: #bb6869;
        float: left;

        text-align: center;
        margin-left: 5px;
        margin-bottom: 5px;
      }
      .black{

        background-color: #a32e2f;
      }
      .h-s{

        background-color: rgb(160, 160, 160);


      }
    }
    .sate {
      color: #9a181a;
    }
    .btn-end {
      width: 640px;
      height: 133px;
      position: absolute;
      top: 735px;

    }
    .s-r {

      width: 244px;
      height: 58px;
      position: absolute;
      top: 176px;
      text-align: center;
      line-height: 58px;
      color: black;
      font-size: 25px;
      overflow-x: auto;
    }
    .money {
      left: 52px;

    }
    .count_money {

      left: 374px;
    }
    .list_info {
      width: 545px;
      height: 54px;
      position: absolute;
      top: 637px;
      left: 50px;
      .y-s {

        width: 129px;
        height: 54px;
        text-align: center;
        line-height: 54px;
        font-size: 16px;
        color: black;
        float: left;
        overflow-x: scroll;
        font-family: 'fz';
        margin-left: 4px;

      }
    }
    .s_map {

      @include image_bounds_by_pos("../images/money_.png", 50px, 127px);
    }
    .bottom_two {
      @include image_bounds_by_pos("../images/bottom_two.png", 50px, 521px);
    }
  }
  .map {
    -webkit-overflow-scrolling: touch;
    width: 640px;
    height: 800px;
    overflow-y: scroll;
    /* padding-left: 29px; */
    /* padding-bottom: 115px; */
    position: absolute;
    top: 100px;
  }
  .data {

    @include image_bounds_by_pos("../images/3-4.png", 58px, 115px);
    .btn_x {

      width: 131px;
      height: 50px;

      position: absolute;
      top: 214px;
      img {
        width: 51px;
        height: 39px;

      }
    }
    .btn_x_left {
      left: 72px;

    }
    .btn_x_right {

      left: 232px;
    }
  }
  .b-k {
    width: 91px;
    height: 61px;

    position: absolute;
    top: 377px;
    line-height: 61px;
    text-align: center;
    font-size: 27px;

  }
  .year {
    left: 43px;

  }
  .yue {

    left: 207px;
  }
  .r-r {
    left: 370px;
  }
  .btn_s {
    width: 328px;
    height: 105px;
    position: absolute;
    top: 521px;
    left: 88px;

  }
}

.y-y {
  @include image_bounds_by_pos("../images/y-y.png", 0px, 0px);
  overflow: hidden;
}

.one {
  background: url(../images/d-h.png) no-repeat 0 0;
  width: 640px;
  overflow: hidden;
  height: 1009px;
  position: absolute;
  top: 0;

  //-webkit-animation: run 0.4s steps(3) infinite 0s;
}

.btn-bottom {
  background: url(../images/bottom.png) left top no-repeat;
  width: 640px;
  height: 128px;

  position: absolute;
  bottom: 0;
  font-family:'fz';
  .btn {

    width: 128px;
    height: 128px;
    border-right: 1px solid #cd8c8d;
    float: left;
    font-size: 28px;
    text-align: center;
    color: white;
    line-height: 1.3;
    /* margin-top: 33px; */
    padding-top: 34px;

  }
  .btn_sate {
    color: #cd8c8d;
  }

}
//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 run {

  100% {
    background-position: 0px -1920px;
  }
}


@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@-webkit-keyframes airpla {
  0% {
    @include ea-transform(translate3d(0px, 0px, 0));
    opacity: 0;
  }
  100% {

    opacity: 1;
  }
}

@-webkit-keyframes line {
  100% {
    width: 551px;
  }

}

@-webkit-keyframes four {
  100% {
    height: 363px;
  }

}

@-webkit-keyframes man {
  100% {
    width: 146px;
  }

}

@-webkit-keyframes five {
  100% {
    width: 500px;
  }

}

@-webkit-keyframes big {
  100% {
    -webkit-transform: scale(1.1, 1.1);
  }

}

@-webkit-keyframes left_word {
  100% {
    height: 123px;
  }

}

@-webkit-keyframes right_word {
  100% {
    height: 222px;
  }
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }
}

@-webkit-keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0)
  }
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
  }
  100% {
    -webkit-transform: scale(1, 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
  }
}

@-webkit-keyframes bounceInLeft {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0)
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0)
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0)
  }
  100% {
    -webkit-transform: none;
    transform: none
  }
}

@-webkit-keyframes bounceInRight {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0)
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0)
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0)
  }
  100% {
    -webkit-transform: none;
    transform: none
  }
}

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

.swiper-slide {
  text-align: center;
  font-size: 18px;
  //background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
