.index-banner-slong-list-box{
  opacity: 0;
}
.pages-main-bg{
  animation: banner-slick2 1s ease-out 0s 1 both;
}


.index-banner-slong-list.slick-active .index-banner-slong-list-box{
  animation: index-banner-slong-p 1s ease .3s 1 forwards;
}


@keyframes banner-slick2 {
  from {
      opacity: 0.5;

      transform: scale(1.1) translate(0px , -40px);
  }
  to {
      opacity: 1;
      transform: scale(1) translate(0px , 0px);
  }
}
@keyframes index-banner-slong-p {
  from {
      opacity: 0;
      -webkit-transform: translate3d(0, 10%, 0) ;
      transform: translate3d(0, 10%, 0) ;
  }
  to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0%, 0) ;
      transform: translate3d(0, 0%, 0) ;
  }
}


/*--------------------------------------*/
.main-title-en,
.main-title-cn,
.about-info-article,
.about-right-bg,
.service-list-info-title,
.service-list-info-article,
.cases-list-title,
.contact-phone-title,
.contact-phone-list,
.contact-info-form,
.news-page-title,
.news-page-time,
.news-page-img,
.news-page-edit-box,
.news_back_box,
.cases-page-info-right{
  opacity: 0;
}

.cases-list-border-top,
.cases-list-border-bottom{
  transform: scale(0,1);
  transition-delay: .3s;
}
.cases-list-border-left,
.cases-list-border-right{
  transform: scale(1,0);
  transition-delay: .3s;
}
.cases-list.active .cases-list-border-top,
.cases-list.active .cases-list-border-bottom,
.cases-list.active .cases-list-border-left,
.cases-list.active .cases-list-border-right{
  transform: scale(1,1);
}
.cases-list.active .cases-list-title{
  animation: fade .8s ease .6s 1 forwards;
}


.main-title-box.active .main-title-en{
  animation: fade 1s linear 0s 1 forwards;
}
.main-title-box.active .main-title-cn{
  animation: fadeInRight .8s linear .2s 1 forwards;
}
.about-info-article.active{
  animation: fadeInUp .8s ease .4s 1  forwards;
}

.about-right-bg-box.active .about-right-bg{
  animation: flipInY .8s ease 0s 1 forwards;
}
.about-right-bg-box.active .about-right-bg2{
  animation: about-right-bg2 .5s linear .8s 1 forwards;
}
.about-right-bg-box.active .about-right-bg3{
  animation: about-right-bg3 .5s linear .8s 1 forwards;
}
.about-right-bg-box.active .about-right-bg4{
  animation: about-right-bg4 .5s linear .8s 1 forwards;
}
.service-list.active .service-list-img-mask{
  animation: animate-right .8s ease 0s 1 forwards;
}
.service-list.active .service-list-info-title{
  animation: fade .8s ease 0s 1 forwards;
}

.service-list.active .service-list-info-article{
  animation: fadeInUp .8s ease .2s 1 forwards;
}

.cases-list-mask{
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f5f5f5;
  transform-origin: left;

}

.cases-list.active .cases-list-mask{
  animation: mask-right .8s ease .2s 1 forwards;
}
.cases-list.active .cases-list-img{

  animation: img-right .8s ease .2s 1 forwards;
}
.contact-phone-box.active .contact-phone-title{
  animation: fadeInUp .8s ease 0s 1 forwards;
}

.contact-phone-box.active .contact-phone-list:nth-child(odd){
  animation: fadeInLeft .8s ease 0s 1 forwards;
}

.contact-phone-box.active .contact-phone-list:nth-child(even){
  animation: fadeInRight .8s ease 0s 1 forwards;
}


.contact-info-form.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}

.cases-page-info-left.active .news-page-title{
  animation: fade .8s ease 0s 1 forwards; 
}
.cases-page-info-left.active .news-page-time{
  animation: fade .8s ease .2s 1 forwards;
}
.cases-page-info-left.active .news-page-img{
  animation: fadeInUp .8s ease .4s 1 forwards;
}
.cases-page-info-left.active .news-page-edit-box{
   animation: fadeInUp .8s ease .6s 1 forwards;
}

.news_back_box{
  animation: fade .8s ease 0s 1 forwards;
}

.cases-page-info-right.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}


/*-------------------------------------------------*/


@keyframes about-right-bg2{
    0%{
      background-position: -140px 0px;
      margin-top: 0px;
    }
    100%{
      background-position: -140px -35px;
      margin-top: 35px;
    }
}
@keyframes about-right-bg3{
    0%{
      background-position: -280px 0px;
      margin-top: 0px;
    }
    100%{
      background-position: -280px -70px;
      margin-top: 70px;
    }
}
@keyframes about-right-bg4{
    0%{
      background-position: -420px 0px;
      margin-top: 0px;
    }
    100%{
      background-position: -420px -105px;
      margin-top:105px;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in
    }


    to {
         opacity: 1;
        transform: perspective(400px)
    }
}

@keyframes animate-right{
    0%{
      left: 0;
    }
    100%{
      left: 100%;
    }
}


/*@keyframes mask-right{
    0%{
      transform: scale(1,1);
    }
    100%{
      transform: scale(0,1);
    }
}*/

@keyframes img-right{
    0%{
      width: 0;
    }
    100%{
      width: 100%;
    }
}