.preload {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ef1a17;
  background-image: url(img/p0-bg.jpg);
  background-size: cover;
  background-position: center center;
  z-index: 1000; }
  .preload .load-area {
    position: absolute;
    width: 400px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -80px; }
    .preload .load-area .bar {
      position: absolute;
      width: 100%;
      height: 4px;
      left: 0;
      bottom: 0;
      background-color: #999;
      overflow: hidden; }
      .preload .load-area .bar .progress {
        position: absolute;
        width: 0%;
        top: 0;
        height: 100%;
        background-color: #fff100;
        border-radius: 100px; }
    .preload .load-area .num {
      color: white;
      font-family: Helvetica;
      position: absolute;
      width: 100%;
      top: 0;
      text-align: center;
      font-size: 30px;
      line-height: 4px; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; }

.clearfix:after {
  display: block;
  clear: both;
  content: ".";
  visibility: hidden;
  height: 0; }

.kc-motion {
  width: 1312px;
  height: 830px;
  background-image: url(img/kc-motion-53.png);
  background-size: cover; }

.tip_hand {
  width: 48px;
  height: 52px;
  background-image: url(img/tip_hand.png); }

.left-arrow {
  width: 22px;
  height: 40px;
  background-image: url(img/left-arrow.png); }

.kc0 {
  width: 481px;
  height: 830px;
  background-image: url(img/kc0.png); }

.kc1 {
  width: 640px;
  height: 830px;
  background-image: url(img/kc1.png); }

.kc2 {
  width: 605px;
  height: 830px;
  background-image: url(img/kc2.png); }

.kc3 {
  width: 640px;
  height: 830px;
  background-image: url(img/kc3.png); }

.kc4 {
  width: 640px;
  height: 830px;
  background-image: url(img/kc4.png); }

.kc5 {
  width: 640px;
  height: 830px;
  background-image: url(img/kc5.png); }

.kc6 {
  width: 618px;
  height: 830px;
  background-image: url(img/kc6.png); }

.jt {
  position: absolute;
  left: 440px;
  top: 740px;
  z-index: 10;
  background: url(img/jt.png);
  width: 83px;
  height: 49px;
  opacity: 0; }

.kc0, .kc1, .kc2, .kc3, .kc4, .kc5, .kc6 {
  background-size: cover; }

.white-mask {
  position: absolute;
  left: 0px;
  right: 24px;
  top: 0px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6); }

.left-arrow.white {
  background-image: url(img/left-arrow-white.png); }

.p1-bg {
  width: 640px;
  height: 830px;
  background-image: url(img/p1-bg.jpg); }

.bg {
  width: 640px;
  height: 830px;
  background-image: url(img/bg.jpg); }

.p0-p0 {
  width: 640px;
  height: 830px;
  background-image: url(img/p0-p0.png); }

.p0-p1 {
  width: 640px;
  height: 830px;
  background-image: url(img/p0-p1.png); }

.p0-p2 {
  width: 640px;
  height: 830px;
  background-image: url(img/p0-p2.png); }

.p0-p3 {
  width: 640px;
  height: 830px;
  background-image: url(img/p0-p3.jpg); }

.p10-bg {
  width: 640px;
  height: 317px;
  background-image: url(img/p9-bg.gif); }

.p10-p0 {
  width: 268px;
  height: 30px;
  background-image: url(img/p10-p0.png); }

.p10-p1 {
  width: 384px;
  height: 96px;
  background-image: url(img/p10-p1.png); }

.p10-p2 {
  width: 174px;
  height: 265px;
  background-image: url(img/p10-p2.png); }

.p10-p3 {
  width: 390px;
  height: 164px;
  background-image: url(img/p10-p3.png); }

.p11-bg {
  width: 640px;
  height: 317px;
  background-image: url(img/p9-bg.gif); }

.p11-p0 {
  width: 256px;
  height: 56px;
  background-image: url(img/p11-p0.png); }

.p11-p1 {
  width: 358px;
  height: 145px;
  background-image: url(img/p11-p1.png); }

.p11-p2 {
  width: 391px;
  height: 106px;
  background-image: url(img/p11-p2.png); }

.p11-p3 {
  width: 340px;
  height: 381px;
  background-image: url(img/p11-p3.png); }

.p12-p0 {
  width: 494px;
  height: 113px;
  background-image: url(img/p12-p0.png); }

.p12-p1 {
  width: 235px;
  height: 108px;
  background-image: url(img/p12-p1.png); }

.p12-p2 {
  width: 340px;
  height: 85px;
  background-image: url(img/p12-p2.png); }

.p12-p3 {
  width: 456px;
  height: 87px;
  background-image: url(img/p12-p3.png); }

.p12-p4 {
  width: 459px;
  height: 171px;
  background-image: url(img/p12-p4.png); }

.p12-p5 {
  width: 400px;
  height: 400px;
  background-image: url(img/p12-p5.png); }

.p12-p6 {
  width: 400px;
  height: 400px;
  background-image: url(img/p12-p6.png); }

.p13-p0 {
  width: 356px;
  height: 109px;
  background-image: url(img/p13-p0.png); }

.p13-p1 {
  width: 289px;
  height: 164px;
  background-image: url(img/p13-p1.png); }

.p13-p2 {
  width: 471px;
  height: 670px;
  background-image: url(img/p13-p2.png); }

.p13-p3 {
  width: 492px;
  height: 386px;
  background-image: url(img/p13-p3.png); }

.p14-bg {
  width: 640px;
  height: 830px;
  background-image: url(img/p14-bg.jpg); }

.p14-p0 {
  width: 144px;
  height: 54px;
  background-image: url(img/p14-p0.png); }

.p14-p1 {
  width: 249px;
  height: 38px;
  background-image: url(img/p14-p1.png); }

.p14-p2 {
  width: 156px;
  height: 46px;
  background-image: url(img/p14-p2.png); }

.p1-p0 {
  width: 409px;
  height: 1px;
  background-image: url(img/p1-p0.png); }

.p1-p1 {
  width: 407px;
  height: 80px;
  background-image: url(img/p1-p1.png); }

.p1-p2 {
  width: 305px;
  height: 64px;
  background-image: url(img/p1-p2.png); }

.p1-p3 {
  width: 640px;
  height: 86px;
  background-image: url(img/p1-p3.png); }

.p1-p4 {
  width: 253px;
  height: 438px;
  background-image: url(img/p1-p4.png); }

.p1-p5 {
  width: 640px;
  height: 414px;
  background-image: url(img/p1-p5.png); }

.p2-bg {
  width: 640px;
  height: 830px;
  background-image: url(img/p2-bg-2.jpg); }

.p2-p0 {
  width: 237px;
  height: 83px;
  background-image: url(img/p2-p0.png); }

.p2-p1 {
  width: 140px;
  height: 119px;
  background-image: url(img/p2-p1.png); }

.p2-p2 {
  width: 131px;
  height: 151px;
  background-image: url(img/p2-p2.png); }

.p2-p3 {
  width: 451px;
  height: 600px;
  background-image: url(img/p9-bg.gif);
  background-size: 100% 100%; }

.p2new-bg {
  width: 640px;
  height: 830px;
  background-image: url(img/p2new-bg3.jpg);
  background-size: cover; }

.p2-p4 {
  width: 451px;
  height: 620px;
  background-image: url(img/p2-p4.png); }

.p3-p0 {
  width: 510px;
  height: 135px;
  background-image: url(img/p3-p0.png); }

.p3-p1 {
  width: 278px;
  height: 95px;
  background-image: url(img/p3-p1.png); }

.p3-p2 {
  width: 133px;
  height: 121px;
  background-image: url(img/p3-p2.png); }

.p3-p3 {
  width: 470px;
  height: 345px;
  background-image: url(img/p3-p3-2.png); }

.p4-p0 {
  width: 510px;
  height: 110px;
  background-image: url(img/p4-p0.png); }

.p4-p1 {
  width: 254px;
  height: 96px;
  background-image: url(img/p4-p1.png); }

.p4-p2 {
  width: 121px;
  height: 126px;
  background-image: url(img/p4-p2.png); }

.p4-p3 {
  width: 470px;
  height: 259px;
  background-image: url(img/p4-p3.png); }

.p5-p0 {
  width: 510px;
  height: 105px;
  background-image: url(img/p5-p0.png); }

.p5-p1 {
  width: 230px;
  height: 95px;
  background-image: url(img/p5-p1.png); }

.p5-p2 {
  width: 121px;
  height: 126px;
  background-image: url(img/p4-p2.png); }

.p5-p3 {
  width: 470px;
  height: 221px;
  background-image: url(img/p5-p3.png); }

.p5-p4 {
  width: 470px;
  height: 179px;
  background-image: url(img/p5-p4-2.png); }

.p6-bg {
  width: 640px;
  height: 830px;
  background-image: url(img/p6-bg.png); }

.p6-p0 {
  width: 342px;
  height: 131px;
  background-image: url(img/p6-p0.png); }

.p6-p1 {
  width: 292px;
  height: 339px;
  background-image: url(img/p6-p1.jpg); }

.p6-p2 {
  width: 327px;
  height: 92px;
  background-image: url(img/p6-p2.png); }

.p7-p0 {
  width: 640px;
  height: 645px;
  background-image: url(img/p7-p0.png); }

.p7-p1 {
  width: 274px;
  height: 530px;
  background-image: url(img/p7-p1-2.png); }

.p7-p2 {
  width: 402px;
  height: 663px;
  background-image: url(img/p7-p2.png); }

.p8-bg {
  width: 640px;
  height: 336px;
  background-image: url(img/p8-bg.png); }

.p8-p0 {
  width: 252px;
  height: 283px;
  background-image: url(img/p8-p0.png); }

.p8-p1 {
  width: 17px;
  height: 377px;
  background-image: url(img/p8-p1.png); }

.p8-p2 {
  width: 482px;
  height: 233px;
  background-image: url(img/p8-p2.png); }

.p9-bg {
  width: 640px;
  height: 317px;
  background-image: url(img/p9-bg.gif); }

.p9-p0 {
  width: 30px;
  height: 268px;
  background-image: url(img/p9-p0.png); }

.p9-p1 {
  width: 88px;
  height: 354px;
  background-image: url(img/p9-p1.png); }

.p9-p2 {
  width: 241px;
  height: 233px;
  background-image: url(img/p9-p2.png); }

.p9-p3 {
  width: 128px;
  height: 334px;
  background-image: url(img/p9-p3.png); }

.p9-p4 {
  width: 334px;
  height: 80px;
  background-image: url(img/p9-p4.png); }

.swiper-slide {
  width: 640px;
  height: 830px;
  background-image: url(img/bg.jpg); }

.music {
  width: 40px;
  height: 40px;
  background-image: url(img/music.png); }

.music.off {
  background-position: -40px 0px; }

.tip_hand {
  left: 97px;
  top: 752px; }

.music {
  position: absolute;
  top: 30px;
  right: 90px;
  z-index: 100; }

.p1-p2 {
  left: 166px;
  top: 212px; }

.p1-p1 {
  left: 119px;
  top: 103px; }

.p1-p0 {
  left: 119px;
  top: 198px; }

.p1-p3 {
  left: 0px;
  top: 744px; }

.p1-p4 {
  left: 194px;
  top: 392px; }

.p1-p5 {
  left: 0px;
  top: 0px; }

.p2new-bg {
  left: 0px;
  top: 0px; }

.p2-p2 {
  left: 300px;
  top: 360px; }

.p2-p1 {
  left: 215px;
  top: 296px; }

.p2-p3 {
  left: 95px;
  top: 126px; }

.p2-p0 {
  left: 204px;
  top: 195px; }

.p2-p4 {
  left: 95px;
  top: 110px; }

.p2-bg {
  left: 0px;
  top: 0px; }

.p3-p3 {
  left: 85px;
  top: 389px; }

.p3-p2 {
  left: 87px;
  top: 237px; }

.p3-p1 {
  left: 226px;
  top: 234px; }

.p3-p0 {
  left: 65px;
  top: 80px; }

.p4-p3 {
  left: 85px;
  top: 407px; }

.p4-p2 {
  left: 115px;
  top: 249px; }

.p4-p1 {
  left: 254px;
  top: 246px; }

.p4-p0 {
  left: 65px;
  top: 98px; }

.p5-p4 {
  left: 85px;
  top: 590px; }

.p5-p3 {
  left: 85px;
  top: 339px; }

.p5-p2 {
  left: 115px;
  top: 199px; }

.p5-p1 {
  left: 254px;
  top: 197px; }

.p5-p0 {
  left: 65px;
  top: 75px; }

.p6-p1 {
  left: 174px;
  top: 252px; }

.p6-p0 {
  left: 149px;
  top: 76px; }

.p6-p2 {
  left: 157px;
  top: 647px; }

.p6-bg {
  left: 0px;
  top: 0px; }

.p7-p2 {
  left: 96px;
  top: 83px; }

.p7-p1 {
  left: 243px;
  top: 63px; }

.p7-p0 {
  left: 0px;
  top: 185px; }

.p8-p2 {
  left: 80px;
  top: 411px; }

.p8-p0 {
  left: 194px;
  top: 120px; }

.p8-p1 {
  left: 312px;
  top: 342px; }

.p8-bg {
  left: 0px;
  top: 0px; }

.p9-p3 {
  left: 253px;
  top: 450px; }

.p9-p4 {
  left: 150px;
  top: 513px; }

.p9-p2 {
  left: 107px;
  top: 105px; }

.p9-p1 {
  left: 401px;
  top: 105px; }

.p9-p0 {
  left: 493px;
  top: 74px; }

.p9-bg {
  left: 0px;
  top: 514px; }

.p10-p3 {
  left: 126px;
  top: 550px; }

.p10-p2 {
  left: 239px;
  top: 254px; }

.p10-p1 {
  left: 127px;
  top: 139px; }

.p10-p0 {
  left: 183px;
  top: 94px; }

.p10-bg {
  left: 0px;
  top: 514px; }

.p11-p3 {
  left: 147px;
  top: 341px; }

.p11-p2 {
  left: 128px;
  top: 173px; }

.p11-p1 {
  left: 141px;
  top: 156px; }

.p11-p0 {
  left: 191px;
  top: 79px; }

.p11-bg {
  left: 0px;
  top: 514px; }

.p12-p4 {
  left: 105px;
  top: 544px; }

.p12-p3 {
  left: 108px;
  top: 405px; }

.p12-p2 {
  left: 164px;
  top: 299px; }

.p12-p1 {
  left: 220px;
  top: 174px; }

.p12-p0 {
  left: 76px;
  top: 61px; }

.p12-p5 {
  left: 78px;
  top: 146px; }

.p12-p6 {
  left: 163px;
  top: 344px; }

.p13-p1 {
  left: 237px;
  top: 541px; }

.p13-p2 {
  left: 85px;
  top: 80px; }

.p13-p0 {
  left: 122px;
  top: 129px; }

.p13-p3 {
  left: 95px;
  top: 264px; }

.p14-p2 {
  left: 262px;
  top: 497px; }

.p14-p1 {
  left: 262px;
  top: 400px; }

.p14-p0 {
  left: 258px;
  top: 288px; }

.p14-bg {
  left: 0px;
  top: 0px; }

.kc-wrapper {
  z-index: 100; }

.left-arrow {
  left: 309px;
  top: 774px; }

.animated {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-640px, 0);
    transform: translate(-640px, 0); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-640px, 0);
    transform: translate(-640px, 0); } }

.fadeInUp, .up-arrow {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: .4s;
  animation-duration: .4s; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeftDown {
  -webkit-animation-name: fadeInLeftDown;
  animation-name: fadeInLeftDown;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes fadeInLeftDown {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); } }

@keyframes fadeInLeftDown {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); } }

.fadeInRightUp {
  -webkit-animation-name: fadeInRightUp;
  animation-name: fadeInRightUp;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes fadeInRightUp {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); } }

@keyframes fadeInRightUp {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: .4s;
  animation-duration: .4s; }

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

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

.d0 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }

.d1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.d2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.d3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.d4 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.d5 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

.d6 {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s; }

.d7 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s; }

.d8 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

.d9 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s; }

.d10 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s; }

.d11 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s; }

.d12 {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s; }

.d13 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s; }

.d14 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s; }

.d15 {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s; }

.d16 {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s; }

.d17 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s; }

.d18 {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s; }

.d19 {
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s; }

.d120 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s; }

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; }

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes rotateIn {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes rotateIn {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: .4s;
  animation-duration: .4s; }

@-webkit-keyframes zoomIn {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@keyframes zoomIn {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes zoomOut {
  0% {
    -webkit-transform: scale(0);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
    opacity: 0; } }

.zoomOut {
  -webkit-animation: zoomOut .4s both;
  animation: zoomOut .4s both; }

.scaleXIn {
  -webkit-animation-name: scaleXIn;
  animation-name: scaleXIn;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes scaleXIn {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(100%);
    transform: scaleX(100%); } }

@keyframes scaleXIn {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(100%);
    transform: scaleX(100%); } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: .4s;
  animation-duration: .4s; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation-duration: .8s;
  animation-duration: .8s; }

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
    transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
    transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: .8s;
  animation-duration: .8s; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1; } }

.scaleInX {
  -webkit-animation-name: scaleInX;
  animation-name: scaleInX;
  -webkit-animation-duration: .6s;
  animation-duration: .6s; }

@-webkit-keyframes scaleInX {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1); } }

@keyframes scaleInX {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1); } }

.scaleYInfinite {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: scaleYInfinite;
  animation-name: scaleYInfinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes scaleYInfinite {
  0%, 20%, 50%, 75%, 100% {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    opacity: 1; }
  15%, 30% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 0.6; }
  60% {
    -webkit-transform: scaleY(1.2);
    transform: scaleY(1.2);
    opacity: 0.5; } }

@keyframes scaleYInfinite {
  0%, 20%, 50%, 75%, 100% {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    opacity: 1; }
  15%, 30% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 0.6; }
  60% {
    -webkit-transform: scaleY(1.2);
    transform: scaleY(1.2);
    opacity: 0.5; } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s; }

.fadeOutLeft.slow {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s; }

@-webkit-keyframes fadeOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-640px);
    transform: translateX(-640px); } }

@keyframes fadeOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-640px);
    transform: translateX(-640px); } }

.fadeOutLeft2 {
  -webkit-animation-name: fadeOutLeft2;
  animation-name: fadeOutLeft2;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear; }

@-webkit-keyframes fadeOutLeft2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-1312px, 0);
    transform: translate(-1312px, 0); } }

@keyframes fadeOutLeft2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-1312px, 0);
    transform: translate(-1312px, 0); } }

.flagMotion {
  -webkit-animation-name: flagMotion;
  animation-name: flagMotion;
  -webkit-animation-duration: 5s;
  animation-duration: 5s; }

@-webkit-keyframes flagMotion {
  0% {
    -webkit-transform: translateX(640px);
    transform: translateX(640px); }
  100% {
    -webkit-transform: translateX(-360px);
    transform: translateX(-360px); } }

@keyframes flagMotion {
  0% {
    -webkit-transform: translateX(640px);
    transform: translateX(640px); }
  100% {
    -webkit-transform: translateX(-360px);
    transform: translateX(-360px); } }

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.6em solid rgba(255, 255, 255, 0.2);
  border-right: 0.6em solid rgba(255, 255, 255, 0.2);
  border-bottom: 0.6em solid rgba(255, 255, 255, 0.2);
  border-left: 0.6em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear; }

.loader,
.loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em; }

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.arrowMotion {
  -webkit-animation: arrowMotion 1.6s .2s ease infinite;
  animation: arrowMotion 1.6s .2s ease infinite; }

@-webkit-keyframes arrowMotion {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    opacity: 1;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes arrowMotion {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    opacity: 1;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate(2000px, 0);
    transform: translate(2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate(2000px, 0);
    transform: translate(2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate(0, -1600px);
    transform: translate(0, -1600px);
    opacity: 0; }
  10% {
    -webkit-transform: translate(0, -1600px);
    transform: translate(0, -1600px);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes slideInDown {
  0% {
    -webkit-transform: translate(0, -1600px);
    transform: translate(0, -1600px);
    opacity: 0; }
  10% {
    -webkit-transform: translate(0, -1600px);
    transform: translate(0, -1600px);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 4s;
  animation-duration: 4s; }

@font-face {
  font-family: "ultralight";
  src: url("./font/ultralight.eot");
  src: url("./font/ultralight.eot?#font-spider") format("embedded-opentype"), url("./font/ultralight.woff") format("woff"), url("./font/ultralight.ttf") format("truetype"), url("./font/ultralight.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

html {
  font-family: "Microsoft YaHei"; }

section {
  position: absolute;
  top: 0;
  left: 0; }
  section div {
    position: absolute; }

.defSize {
  width: 640px;
  height: 830px; }

.defHide {
  display: none; }

.swiper-container {
  width: 640px;
  height: 830px; }

.swiper-slide {
  overflow: hidden; }

.origin00 {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0; }

.origin10 {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0; }

html {
  background-color: #333; }

.centerH {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

#main {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden; }

.item {
  position: absolute; }

.up-arrow {
  left: 298px;
  top: 784px; }

.p14 a {
  position: absolute; }

.p14-p0,
.p14-p1,
.p14-p2 {
  cursor: pointer; }