﻿@charset "UTF-8";
/*禁用样式，加important*/
/*定义media-queries的最大和最小宽度*/
/*定义animation的@keyframe*/
/*关于属性的浏览器兼容写法*/
.pic .pc_img .moveImg > div {
  opacity: 0;
}

.pic .pc_img .moveImg2 a >div {
  opacity: 0;
} 

.pic .pc_img .moveImg4 .ban_text3 {
  opacity: 1;
}

.pic .pc_img .moveImg4 .ban_text3 > img {
  opacity: 0;
}

.pic .pc_img .moveImg4 .ban_text3 .innPic img,
.pic .pc_img .moveImg4 .ban_text3 .innPic div {
  opacity: 0;
}

.pic .pc_img .swiper-slide.animate .moveImg1 .top_pic {
  animation: slideInLeft 0.8s ease 0s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg1 .ban_text1 {
  animation: slideInUp 0.8s ease 0.8s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg1 .ban_text2 {
  animation: slideInUp 0.8s ease 1s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg1 .ban_text3 {
  animation: slideInUp 0.8s ease 1.2s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg2 a .top_pic {
  animation: slideInLeft 0.8s ease 0s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg2 a .ban_text3 {
  animation: slideInRight 0.8s ease 0.8s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg3 .top_pic {
  animation: slideInLeft 0.8s ease 0s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg3 .ban_text3 {
  animation: slideInRight 0.8s ease 0.5s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg4 .top_pic {
  animation: slideInRight 0.8s ease 1.2s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg4 .ban_text3 .rtmove {
  animation: slideInUp 0.8s ease 0s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg4 .ban_text3 .innPic .glb {
  animation: slideInLeft 0.8s ease 0.4s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg4 .ban_text3 .innPic .ph {
  animation: slideInLeft 0.8s ease 0.8s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg5 .top_pic {
  animation: slideInLeft 0.8s ease 0s forwards;
}

.pic .pc_img .swiper-slide.animate .moveImg5 .ban_text3 {
  animation: slideInRight 0.8s ease 0.8s forwards;
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.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);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    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);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
