.index-team-slong-title,
.index-team-slong-en-title,
.index-team-slong-p,
.index-ch-title,
.index-en-title,
.index-team-title,
.index-team-info-list:before,
.index-team-info-title,
.index-team-info,
.index-service-list-box,
.index-works-list-box,
.about-title,
.about-article-p,
.about-title2,
.about-article-p2,
.about-info-img-box,
.works-class-box,
.works-show-list,
.service-slong,
.products-class-box,
.team-list,
.team-page-img,
.edit-box,
.products-back,
.products-page-info,
.products-slong,
.products-show-list,
.page,
.service-list-img,
.service-title,
.service-p,
.problem-list,
.works-page-img-box,
.products-page-info-title,
.works-page-p{
  opacity: 0;
}
.index-team-info-list:after,
.products-page-info-line{
  transform: scale(0, 1);
}
.index-team-line{
  transform: scale(1, 0);
}

.index-team-slong-title.active,
.index-team-slong-en-title.active,
.index-team-slong-p.active,
.index-ch-title.active,
.index-en-title.active,
.index-service-list-box.active,
.index-works-list-box.active,
.about-title.active,
.works-show-list.active,
.service-slong.active,
.products-class-box.active,
.team-list.active,
.team-page-img.active,
.edit-box.active,
.products-page-info.active,
.products-slong.active,
.products-show-list.active,
.page.active,
.works-class-box.active,
.problem-list.active{
  animation: fade .8s linear 1 0s forwards;
}

.about-info2-box.active .about-title2{

  animation:  fade 1s linear 1 .3s forwards;
}

.about-info2-box.active .about-article-p2{
  animation:  fade 1s linear 1 .5s forwards;
}

.index-team-box.active .index-team-title{
  animation: fade .8s linear 1 0s forwards;
}

.index-team-box.active .index-team-info-list:before{
  animation: fade .8s linear 1 .2s forwards;
}

.index-team-box.active .index-team-info-list:after{
  transform-origin: right;
  animation: line .5s linear 1 .4s forwards;
}
.index-team-box.active .index-team-info-list:nth-child(2):after{
  transform-origin: left;
  animation: line .5s linear 1 1.2s forwards;
}
.index-team-box.active .index-team-info-list:nth-child(3):after{
  transform-origin: left;
  animation: line .5s linear 1 1.8s forwards;
}
.index-team-box.active .index-team-line{
  transform-origin: top;
  animation: line2 1s linear 1 .8s forwards;
}

.index-team-box.active .index-team-info-title{
  animation: fade .8s linear 1 .4s forwards;
}
.index-team-box.active .index-team-info{
  animation: fade .8s linear 1 .4s forwards;
}

.banner-img{
  animation: scale-b-fade 1s linear 1 0s forwards;
}

.about-article-p.active{
  animation: fade .8s linear 1 .2s forwards;
}

.banner-scroll img{
  animation: fadeUpout-banner-arrow 1s linear 0s infinite alternate;
}

.about-info-img-box.active {
  animation: fade 1s linear 1 0s forwards;
}

#works .works-class-box{
  animation: fade .8s linear 1 0s forwards;
}

.products-back.active{
  opacity: 1;
}

.service-list-box .service-list:nth-child(odd) .service-list-img.active{
   animation: fadeInLeft 1s linear 1 0s forwards;
}

.service-list-box .service-list:nth-child(odd) .service-title.active{
  animation: fadeInRight 1s linear 1 0s forwards;
}


.service-list-box .service-list:nth-child(even) .service-list-img.active{
   animation: fadeInRight 1s linear 1 0s forwards;
}

.service-list-box .service-list:nth-child(even) .service-title.active{
  animation: fadeInLeft 1s linear 1 0s forwards;
}

.service-list-box .service-list .service-p.active{
  animation: fade 1s linear 1 .6s forwards;
}


/* banner箭頭上下移動 */
@keyframes fadeUpout-banner-arrow2 {
  from {
   
    -webkit-transform: none;
    transform: none;
  }

  to {
 
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
}

.index-banner-list span{
  transition: all .3s linear;
}


.index-banner-list.slick-active span{
  animation: scale-b-fade 1.5s linear 0s 1 forwards;
}
.products-page-img,
.product-page-p{
  opacity: 0;
}
.works-page-img-box,
.products-page-info-title,
.products-page-img{
  animation: fade .8s linear 1 0.2s forwards;
}
.products-page-info-line{
  transform-origin: left;
  animation: line .5s linear 1 .3s forwards;
}

.works-page-p,
.product-page-p{
   animation: fade .8s linear 1 0.4s forwards;
}