@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUpSmall {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0)
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
  }
}

@keyframes fadeInUpSmall {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      -ms-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0)
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none
  }
}

.fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
  animation-name: fadeInUpSmall
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

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

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}


/*css 增加的动画*/
@-webkit-keyframes shanshuo{ 
  0%{ 
  opacity: 1; 
  } 
  50%{ 
    opacity: 0.5; 
  } 
  100%{ 
  opacity: 1; 
  } 
} 
@keyframes shanshuo{ 
    0%{ 
      opacity: 1; 
      } 
      50%{ 
        opacity: 0.5; 
      } 
      100%{ 
      opacity: 1; 
      } 
} 
@-webkit-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-moz-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-o-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
}
@keyframes warn {
    100% {
        transform: scale(1);
        -webkit-transform: scale(1.2);
        opacity: 1;
    }
 
    75% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.8;
    }
 
    50% {
        transform: scale(1);
        -webkit-transform: scale(1.1);
        opacity: 0.6;
    }
 
    25% {
        transform: scale(1);
        -webkit-transform: scale(1.05);
        opacity: 0.4;
    }
 
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes icon-shaking {
 0%, 100% {
 -moz-transform: rotate(0deg) translateY(-12px);
 -ms-transform: rotate(0deg) translateY(-12px);
 -webkit-transform: rotate(0deg) translateY(-12px);
 transform: rotate(0deg) translateY(-12px);
}
 50% {
 -moz-transform: rotate(0) translateY(0);
 -ms-transform: rotate(0) translateY(0);
 -webkit-transform: rotate(0) translateY(0);
 transform: rotate(0) translateY(0);
}
}
@-webkit-keyframes scale-bg{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	50%{
		-webkit-transform:scale(1.5);
		transform:scale(1.05);
	}
  100%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
@keyframes scale-bg{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	50%{
		-webkit-transform:scale(1.05);
		transform:scale(1.05);
	}
  100%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
@keyframes scaleIn {
  0% {
    -webkit-transform:scale(1.5); transform:scale(1.5); transition:500ms;
}
50% {
-webkit-transform:scale(1.2); transform:scale(1.2); transition:500ms;
}
100% {
    -webkit-transform:scale(1); transform:scale(1); transition:500ms;
  }
}
@-webkit-keyframes scaleIn {
  0% {
      -webkit-transform:scale(1.5); transform:scale(1.5); transition:500ms;
  }
  50% {
  -webkit-transform:scale(1.2); transform:scale(1.2); transition:500ms;
  }
  100% {
      -webkit-transform:scale(1); transform:scale(1); transition:500ms;
  }
}
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
@keyframes turn2{
  0%{-webkit-transform:rotate(270deg) scale(0.2);opacity: 0.5;}
  100%{-webkit-transform:rotate(360deg) scale(1);opacity: 1;}
}
@-webkit-keyframes scaleAnimate {
  0% {
    -webkit-transform: scale(1);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(1.3);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes guang {
  0% {
  -moz-transform: scale(0);
  transform: scale(0);
  opacity: 1;
 }
  100% {
  -moz-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0;
 }
 }
 @keyframes guang2 {
  0% {
  -moz-transform: scale(0);
  transform: scale(0);
  opacity: 1;
 }
  100% {
  -moz-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0;
 }
 }
@-webkit-keyframes icon-left {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
 }
 50% {
  -moz-transform: translateX(80%);
  -ms-transform: translateX(80%);
  -webkit-transform: translateX(80%);
  transform: translateX(80%);
}
  100% {
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -webkit-transform: translateX(200%);
    transform: translateX(200%);
 }
}
@keyframes yr {
  0% {transform: rotate(135deg);}
  50%,
  100% {transform: rotate(315deg);}
}
@keyframes yl {
  0%,
  50% {transform: rotate(135deg);}
  100% {transform: rotate(315deg);}
}

/*滑过图标左右晃动效果 s*/
.ico-bounce:hover .ico,.ico-bounce:hover img,.item:hover .ico-bounce img{
  -webkit-animation: icon-bounce 0.5s alternate;
  -moz-animation: icon-bounce 0.5s alternate;
  -o-animation: icon-bounce 0.5s alternate;
  animation: icon-bounce 0.5s alternate;
}

.ico-rotate .ico{
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.ico-rotate .i1,
.ico-rotate .i2 {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.ico-rotate:hover .ico{
  transform: rotateY(180deg);
}

.ico-rotate .i2 {
  z-index: 3;
  transform: rotateY(180deg);
}


/*一个一个出*/
.font-fadeIn {
  display: flex;
  perspective: 250px
  overflow: hidden;
}
.font-fadeIn span{
  overflow: hidden;
  display: block;
  position: relative;
  font:inherit;
}

.font-fadeIn font{
  display: block;
/*min-width: .5em;*/
  font:inherit;
}

.font-fadeIn[data-word='1'] font{
  margin-right: .5em;
}

.font-fadeIn font{
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
/*    运动速率*/
}

/*图片缩小*/
@keyframes scaleI {
  0% {
      transform: scale(1.1);
  }
  100% {
      transform: none;

  }
}

.scaleI {
  -webkit-animation-name: scaleI;
  animation-name: scaleI;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}