.index-banner-list span{
  transform: scale(1,1);
  opacity: 0.2;
}
.index-banner-list.slick-active  span{
  animation: banner-slick 3s ease 0s 1 both;

}

@keyframes banner-slick {
  from {
    opacity: 0.2;
      transform: scale(1.1,1.1);
  }

  to {
    opacity: 1;
      transform: scale(1,1);
  }
}

/*--------------------------------*/
.index-about-img-box,
.index-v-info-box,
.index-v-info-icon,
.index-products-list-box,
.footer-box{
  opacity: 0;
}

.index-about-info-box,
.index-products-list-box{
  opacity: 0.4;
  transform: translate3d(0, 100px, 0);
}
.index-about-img-box.active{
  opacity: 1;
}

.index-about-info-box.active{
  animation: fadeInUp2 .8s ease 0s 1 both;
}

.index-v-info-box.active{
  opacity: 1;
}

.index-v-info-box.active .index-v-info-icon:nth-child(1){
  opacity: 1;
}
.index-v-info-box.active .index-v-info-icon:nth-child(2){
  opacity: 1;
  transition-delay: .4s ;
}
.index-v-info-box.active .index-v-info-icon:nth-child(3){
  opacity: 1;
  transition-delay: .7s ;
}
.index-v-info-box.active .index-v-info-icon:nth-child(4){
  opacity: 1;
  transition-delay: 1.1s ;
}
.index-products-list-box.active{
  animation: fadeInUp2 .8s ease 0s 1 both;
}
.index-products-list-box.active .index-products-link-top{
  animation: line .5s linear 0s 1 both;
}
.index-products-list-box.active .index-products-link-right{
  animation: line2 .3s linear .5s 1 both;
}
.index-products-list-box.active .index-products-link-bottom{
  animation: line .5s linear .8s 1 both;
}
.index-products-list-box.active .index-products-link-left{
  animation: line2 .3s linear 1.3s 1 both;
}
.main-title-en{
  animation: fadeInUp .8s ease 0s 1 both;
}
.main-title-cn{
  animation: fadeInUp .8s ease 0.2s 1 both;
}
.about-line-box{
  animation: line .8s ease 0s 1 both;
}
.about-list-box,
.patent-box{
  animation: fade .8s ease .2s 1 both;
}
.about-main-box{
  animation: main-box-bg  .5s ease 0s 1 both;
}
.public_box{
  animation: fadeInUp .8s ease 0s 1 both;
}

.products-title-box{
  animation: fadeInUp .8s ease 0s 1 both;
}
.products-class-box{
  animation: fade .8s ease .2s 1 both;
}
.products-list-box{
   animation: fade .8s ease .4s 1 both;
}
.achievement-list{
  animation: fade .8s ease .4s 1 both;
}
.achievement-page-line-mid{
  animation: line2 .8s ease 0s 1 both;
  transform-origin: top;
}
.achievement-page-line2{
  animation: line2 .8s ease .5s 1 both;
  transform-origin: top;
}
.achievement-page-line-bottom{
  animation: line .8s ease .5s 1 both;
}
.achievement-page-title{
  animation: fadeInUp .5s ease 0s 1 both;
}
.achievement-page-en-title{
  animation: fadeInUp .5s ease .2s 1 both;
}
.achievement-page-right{
  animation: fade .8s ease 0s 1 both;
}
.achievement-edit-box,
.about-back-box{
  animation: fade .8s ease .2s 1 both;
}
#contact .recruiter-page-box,
.member-list-box{
  animation: fadeInUp .8s ease .2s 1 both;
}
.map-box{
   animation: fade .8s ease .4s 1 both;
}
.member-title{
  animation: fade .8s ease .2s 1 both;
}
.recruiter-page-box{
  animation: fade .8s ease .3s 1 both;
}
.member-title-line{
   animation: line .8s ease .2s 1 both;
}
.member-title-line span{
  animation: line .8s ease 1s 1 both;
}
.footer-top-box span{
  transform: scale(0,1);
}
.products-icon-box i{
  transition: all .5s ease;
  padding-left: 1px;
}
.products-icon-box.open i{
  transform: rotate(-180deg);
}
.index-v-info-icon-box,
.index-v-info-icon-box span{
  transition: all 1s ease;
}
.index-v-info-icon-v {
  transform: rotate(0deg);
}
.index-v-info-icon-u {
  transform: rotate(-90deg);
}
.index-v-info-icon-u span{
  transform: rotate(90deg);
}
.index-v-info-icon-c {
  transform: rotate(-180deg);
}
.index-v-info-icon-c span{
  transform: rotate(180deg);
}
.index-v-info-icon-a {
  transform: rotate(90deg);
}
.index-v-info-icon-a span{
  transform: rotate(-90deg);
}

footer.active .footer-top-box span:nth-child(1){
    animation: line .5s linear 0s 1 both;
    transform-origin: right;
}
footer.active .footer-top-box span:nth-child(3){
    animation: line .5s linear 0s 1 both;
    transform-origin: left;
}
footer.active .footer-box.active{
    animation: fade .5s ease 0s 1 both
}
@keyframes main-box-bg {
 from {
    background-color: transparent;
  }

  to {
    background-color: #FFF;
  }
}


@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}