body {
  opacity: 0;
}
#banner {
  width: 100%;
  overflow: hidden;
  margin-top: -1px;
}
#banner.loaded .swiper-container .firstSlide .eye {
  opacity: 1;
  -webkit-transition: all 1.3s 1s ;
  -o-transition: all 1.3s 1s ;
  -moz-transition: all 1.3s 1s ;
  transition: all 1.3s 1s ;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner.loaded .swiper-container .firstSlide .robot {
  opacity: 1;
  -webkit-transition: all 1.3s 1s;
  -o-transition: all 1.3s 1s;
  -moz-transition: all 1.3s 1s;
  transition: all 1.3s 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner.loaded .swiper-container .firstSlide .starWars1 {
  margin-top: 1rem;
  opacity: 1;
  -webkit-transition: all 1.3s 2.3s;
  -o-transition: all 1.3s 2.3s;
  -moz-transition: all 1.3s 2.3s;
  transition: all 1.3s 2.3s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner.loaded .swiper-container .firstSlide .starWars2 {
  opacity: 1;
  -webkit-transition: all 1.3s 2.8s;
  -o-transition: all 1.3s 2.8s;
  -moz-transition: all 1.3s 2.8s;
  transition: all 1.3s 2.8s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container {
  width: 100%;
  height: 100%;
}
#banner .swiper-container .swiper-wrapper,
#banner .swiper-container .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#banner .swiper-container .swiper-wrapper a,
#banner .swiper-container .swiper-slide a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#banner .swiper-container .blackBj {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#banner .swiper-container .eye {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
}
#banner .swiper-container .starWars1 {
  margin: 0 auto;
  width: 4.38rem;
  height: 3.45rem;
  background: url(../images/index/starWars/1.html) no-repeat;
  -moz-background-size: cover;
       background-size: cover;
  position: relative;
  z-index: 4;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container .starWars2 {
  position: absolute;
  z-index: 4;
  width: 1.86rem;
  height: 1.91rem;
  background: url(../images/index/starWars/2.html) no-repeat;
  -moz-background-size: cover;
       background-size: cover;
  bottom: 0.44rem;
  left: 0.47rem;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container .robot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 1;
}
#banner .swiper-container .firstSlide .robot {
  opacity: 0;
}
#banner .swiper-container .message {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: #fff;
  overflow: hidden;
  text-align: center;
  z-index: 4;
}
#banner .swiper-container .message h3 {
  margin: 2.1rem auto 0.2rem;
  text-align: center;
  font-size: 0.48rem;
  line-height: 0.48rem;
  opacity: 0;
  -webkit-transform: translateY(-1rem);
     -moz-transform: translateY(-1rem);
      -ms-transform: translateY(-1rem);
       -o-transform: translateY(-1rem);
          transform: translateY(-1rem);
}
#banner .swiper-container .message p {
  font-size: 0.36rem;
  line-height: 0.36rem;
  opacity: 0;
  -webkit-transform: translateY(-1.3rem);
     -moz-transform: translateY(-1.3rem);
      -ms-transform: translateY(-1.3rem);
       -o-transform: translateY(-1.3rem);
          transform: translateY(-1.3rem);
}
#banner .swiper-container .message .messageMsg {
  font-size: 0.24rem;
}
#banner .swiper-container .message.cruzr h3 {
  width: 100%;
  height: 0.56rem;
  margin: 2.02rem auto 0.2rem;
  text-align: center;
  background: url(../images/index/bannerCruzr.html) no-repeat center;
  -moz-background-size: 2.01rem 0.56rem;
       background-size: 2.01rem 0.56rem;
}
#banner .swiper-container .message.cruzr .titleP {
  color: #fff;
  line-height: 0.36rem;
  margin-bottom: 0.2rem ;
}
#banner .swiper-container .message.cruzr .messageMsg {
  color: #a0a0a0;
  line-height: 0.24rem;
}
#banner .swiper-container .message.qalpha {
  color: #333;
}
#banner .swiper-container .message.qalpha .titleP {
  line-height: 0.36rem;
  margin-bottom: 0.2rem ;
}
#banner .swiper-container .message.qalpha .messageMsg {
  color: #a8a9a8;
  line-height: 0.24rem;
}
#banner .swiper-container .message6 h3 {
  margin: 2.5rem auto 0.2rem;
}
#banner .swiper-container .swiper-slide.swiper-slide-active .message h3 {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1s ;
  -o-transition: all 1s ;
  -moz-transition: all 1s ;
  transition: all 1s ;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container .swiper-slide.swiper-slide-active .message p {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container .swiper-slide.swiper-slide-active .firstSlide h3 {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1s 2.3s;
  -o-transition: all 1s 2.3s;
  -moz-transition: all 1s 2.3s;
  transition: all 1s 2.3s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-container .swiper-slide.swiper-slide-active .firstSlide p {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1s 2.3s;
  -o-transition: all 1s 2.3s;
  -moz-transition: all 1s 2.3s;
  transition: all 1s 2.3s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
#banner .swiper-pagination .swiper-pagination-bullet {
  width: 0.48rem;
  height: 0.06rem;
  border: 1px solid #fff;
  -webkit-border-radius: 0.06rem;
     -moz-border-radius: 0.06rem;
          border-radius: 0.06rem;
  background: none;
}
#banner .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}


@-webkit-keyframes mapMove {
  0% {
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
  100% {
    -webkit-transform: translateY(1.1rem);
            transform: translateY(1.1rem);
  }
}
@-moz-keyframes mapMove {
  0% {
    -moz-transform: translateY(1rem);
         transform: translateY(1rem);
  }
  100% {
    -moz-transform: translateY(1.2rem);
         transform: translateY(1.2rem);
  }
}
@-o-keyframes mapMove {
  0% {
    -o-transform: translateY(1rem);
       transform: translateY(1rem);
  }
  100% {
    -o-transform: translateY(1.2rem);
       transform: translateY(1.2rem);
  }
}
@-webkit-keyframes showEye {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes showEye {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes showEye {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showEye {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .navMessage::after {
    -webkit-transform: scaleY(0.7);
       -moz-transform: scaleY(0.7);
        -ms-transform: scaleY(0.7);
         -o-transform: scaleY(0.7);
            transform: scaleY(0.7);
  }
  .more i {
    -webkit-transform: scale(0.7);
       -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
         -o-transform: scale(0.7);
            transform: scale(0.7);
  }
  .footNavLi section::after {
    -webkit-transform: scaleY(0.5);
       -moz-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
         -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  .footNavLi a::after {
    -webkit-transform: scaleY(0.7);
       -moz-transform: scaleY(0.7);
        -ms-transform: scaleY(0.7);
         -o-transform: scaleY(0.7);
            transform: scaleY(0.7);
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .navMessage::after {
    -webkit-transform: scaleY(0.5);
       -moz-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
         -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  .more i {
    -webkit-transform: scale(0.5);
       -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
         -o-transform: scale(0.5);
            transform: scale(0.5);
  }
  .footNavLi section::after {
    -webkit-transform: scaleY(0.5);
       -moz-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
         -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  .footNavLi a::after {
    -webkit-transform: scaleY(0.5);
       -moz-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
         -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
}