.index-banner-icon1,
.index-banner-icon2,
.index-banner-slong,
.index-banner-slong-box{
  opacity: 0;
}
.about-info,
.about-info-img-box,
.about-title,
.service-title,
.service-box li,
.contact-arrow-icon2,
.contact-title,
.contact-info-box{
  opacity: 0;
}
.works-title,
.works-menu-box,
.works-list-box{
  opacity: 0;
}



.banner-animate-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  overflow: hidden;
  pointer-events: none;
}
.banner-animate{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #9a0004;
  animation: banner-width 1s linear 0s 1 forwards;
}

@keyframes banner-width{
 0% {
    opacity: 1;
    margin-left: -100%;
  }
  50% {
    opacity: 1;
    margin-left: 0%; }
 
  100% {
    opacity: 0;
    margin-left: 0%; } 
}
.index-banner-slong-box{
  animation: fade .8s linear 2s 1 forwards;
}
.index-banner-icon1{
  animation: fadeIn-height .8s linear 1s 1 forwards;
}
.index-banner-icon2{
  animation: fade2 .8s linear 1.8s 1 forwards;
}
.header-bg1{
  animation: width 1s linear 0s 1 forwards;
}
.header-bg2{
  transform: scale(0);
  transform-origin: left;
  animation: line 1s linear 1s 1 forwards;
}
.header-title{
  color: #FFF;
  animation: color-black .5s linear 1.7s 1 forwards;
}
.header-title:before{
  background-color: #FFF;
    animation: color-red .5s linear 1.7s 1 forwards;
}
@keyframes color-black {
  from {
    color: #FFF;
  }
  to {
    color: #000;
  }
}
@keyframes color-red {
  from {
    background-color: #FFF;
  }
  to {
     background-color: #9a0004;
  }
}
@keyframes fadeIn-height {
  from {
    opacity: 0.7;
    height: 0;
  }
  to {
    opacity: 1;
    height: 100%;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
 
  }
  to {
    opacity: 0.7;
  
  }
}
@keyframes width {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
/* banner */
.slick-active .index-video-slong{
  animation: fade 1s linear 0s 1 forwards;
} 

.index-news-title:before{
  animation: fadeInRight 1.5s linear 0s infinite alternate;
}



/* about */

.about-box.active .about-info{
  animation: fadeInRight2 1s linear .3s 1 forwards;
}

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

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

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

.about-title-box.active .about-title{
  animation: fade 1s linear .5s 1 forwards;
}
.about-title-box.active .about-title-line{
  animation: line 1s linear .5s 1 forwards;
}
.sevice-title-box.active .service-line {
  animation: line .5s linear 0s 1 forwards; 
}
.sevice-title-box.active .service-title{
  animation: fade .8s linear .5s 1 forwards;
}
.service-box.active li{
  animation: fade .8s linear .6s 1 forwards;
}
.contact-arrow-box.active .contact-arrow-icon1{
  animation: height .8s linear 0s 1 forwards;
}
.contact-arrow-box.active .contact-arrow-icon2{
  animation: fade2 .8s linear 1s 1 forwards;
}
.contact-box.active .contact-title{
  animation: fade .8s linear .5s 1 forwards;
}
.contact-box.active .contact-info-box{
  animation: fadeInUp .8s linear 0s 1 forwards;
}
@keyframes height{
  from {
    height: 0%;
  }

  to {
    height: 100%;
  }
}



.about-bg-box.active .about-mask2{
 
  animation: left-in .3s linear 0s 1 forwards;
}


.about-bg-box.active .about-mask1{
   animation:  right-in .3s linear 0s 1 forwards;
}

@keyframes right-in{
  from {
    opacity: 1;
    right: -100%;
  }

  to {
    opacity: 0.95;
    right: 0%;
  }
}
@keyframes left-in{
  from {
    opacity: 1;
    left: -100%;
  }

  to {
    opacity: 0.95;
    left: 0%;
  }
}

.works-box.active .works-title{
  animation: fade .8s linear 0s 1 forwards;
}
.works-box.active .works-menu-box{
  animation: fadeInUp .8s linear 0.5s 1 forwards;
}
.works-box.active .works-list-box{
  animation: fade .8s linear 0s 1 forwards;
}