#index .header-style1{
	position: absolute;
}
#index .header-style1.header2{
	position: fixed;
	animation: headerDown 1s ease 0s 1 forwards;
}
@keyframes headerDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.banner-info-mask1 span:nth-child(1){
  animation: banner-mask1 .8s ease 2.5s 1 forwards;
}
.banner-info-mask1 span:nth-child(2){
  animation: banner-mask1 .8s ease 2.8s 1 forwards;
}

@keyframes banner-mask1 {
  from {
    -webkit-transform: translate(300px, 0);
    transform: translate(300px, 0);
  }

  to {
    -webkit-transform:  translate(0, 0);
    transform: translate(0, 0);
  }
}
.banner-info-mask2 span{
  -webkit-transform:  translate(-100%, -100%);
    transform: translate(-100%, -100%);
}
.banner-info-mask2 span:nth-child(1){
  animation: banner-mask2 .8s ease 2.5s 1 forwards;
}
.banner-info-mask2 span:nth-child(2){
  animation: banner-mask2 .8s ease 2.8s 1 forwards;
}
@keyframes banner-mask2 {
  from {
    -webkit-transform:  translate(-100%, -100%);
    transform: translate(-100%, -100%);
  }

  to {
    -webkit-transform:  translate(0, 0);
    transform: translate(0, 0);
  }
}


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

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

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


.index-banner-slong-left{
  transform: scale(1,0);
  transition: all .3s linear;
  transform-origin: top;
}
.index-banner-slong-bottom{
  width: 0;
  transition: all 2s linear;
  transform-origin: left;

}
.slick-active .index-banner-slong-left{
  transform: scale(1,1);
}
.slick-active .index-banner-slong-bottom{
  width: 100%;
}
.slick-active .index-banner-slong-left{
  animation: line2 .3s linear 0s 1;
}
.slick-active .index-banner-slong-bottom{
  transition-delay: .3s;
  animation:banner-slick-slong2 2s linear .3s 1;
}
.index-banner-slong-p{
  opacity: 0;
  transform: translate(50px,0);
  transition: all 2s ease;
}
.slick-active .index-banner-slong-p{
  opacity: 1;
  transform: translate(0,0);
  animation: banner-slick-slong-p 2s ease 0s 1;
}
@keyframes banner-slick-slong2 {
  from {
      width: 0%;
  }

  to {
      width: 100%;
  }
}

@keyframes banner-slick-slong-p {
  from {
      opacity: 0;
      transform: translate(50px,0);
  }

  to {
      opacity: 1;
      transform: translate(0,0);
  }
}

.banner-contact-box{
  animation: fadeInLeft 1s linear 2.5s 1 forwards;
}
.banner-phone-box{
  animation: fadeInRight 1s linear 2.5s 1 forwards; 
}
.banner-logo{
  animation: fade 2s linear 3s 1 forwards;
}
/*-----------------------------------------------*/

.banner-contact-box,
.banner-phone-box,
.banner-logo,
.index-about-bg-title,
.index-about-title,
.index-about-article,
.index-works-title,
.index-works-list-box,
.main-en-title,
.main-title,
.service-list,
.index-works-list,
.works-title,
.works-class-title,
.works-class-list-box,
.works-page-img-box,
.works-page-info,
.works-page-info-list,
.contact-info-form li input,
.contact-select,
.contact-textarea textarea,
.button,
.news-list-img,
.news-info-box,
.news-page-info,
.news-next-link,
.news-prev-link,
.index-works-link-box{
  opacity: 0;
}

.index-about-line-left,
.index-about-line-right,
.news-page-line-left,
.news-page-line-right,
.service-list:after{
  transform: scale(1,0);
  transform-origin: top;
}

.index-about-line-right{
  transform: scale(1,0);
  transform-origin: bottom;
}
.index-about-line1{
  transform: scale(0,1);
  transform-origin:right;
}
.index-about-line2{
  transform: scale(0,1);
  transform-origin: left;
}


.index-about-box.active .index-about-line-left,
.index-about-box.active .index-about-line-right{
  animation: line2 1s linear 0s 1 forwards;
}

.index-about-box.active .index-about-line1,
.index-about-box.active .index-about-line2{
  animation: line 1s linear 0s 1 forwards;
}

.index-about-bg-title{
  animation: index-about-bg-title 1.5s linear 0s 1 forwards;
}

.index-about-box.active .index-about-title{
  animation: fade 1s linear 0s 1 forwards;
}
.index-about-title-line{
  width: 100%;
  transition: all 1s linear;
}
.index-about-box.active .index-about-title-line{
  width: 5px;

}
.index-about-box.active .index-about-article{
  animation: fadeInUp 1s linear 0s 1 forwards;
}

@keyframes index-about-bg-title {
  from {
      opacity: 0;
      
  }

  to {
      opacity: 0.2;
      
  }
}

/*-------------------------------------*/
.index-works-box.active .index-works-title{
  animation: index-works-title 1s linear 0s 1 forwards;
}
.index-works-box.active .index-works-list-box{
  animation: fade 1s linear 0s 1 forwards;
}
@keyframes index-works-title {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

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


/*.........service..........*/
.news-page-line-left,
.news-page-line-right{
  animation: line2 1s linear 0s 1 forwards;
}
.main-title{
  animation: fade 1s linear 0s 1 forwards;
}
.main-en-title{
  animation: index-works-title  1s linear 0s 1 forwards;
}
.service-list.active{
  animation:fade .8s linear 0s 1 forwards;
}

.service-list.active{
  animation:fade .8s linear 0s 1 forwards;
}
.service-list:after{
  transition: all .4s linear;
  transform-origin: top;
  transition-delay: .2s ;
}
.service-list.active:after{
  transform: scale(1,1);
}

.index-works-list{
  animation: fadeInUp 1s linear 0s 1 forwards;
}

/*-----------works--------*/
.works-title{
  animation: index-works-title  1s linear 0s 1 forwards;
}
.works-class-title,
.works-class-list-box{
  animation: fade 1s linear .2s 1 forwards;
}


.works-page-img-box{
  animation: fade 1s linear 0s 1 forwards;
}
.works-page-info{
  animation: fade 1s linear 0s 1 forwards;
}
.works-page-info-list{
  animation: fadeInUp 1s ease .2s 1 forwards;
}



.contact-info-form li input,
.button,
.contact-select,
.contact-textarea textarea,
.news-list-img,
.news-info-box{
  animation: fade 1s linear 0s 1 forwards;
}
.news-list:nth-child(even):after{
  transform-origin:right;
}
.news-list:after{
  transform: scale(0,1);
  transform-origin:left;
  animation: line 1s linear 0s 1 forwards;
}
.news-page-line-top{
  transform: scale(0,1);
  animation: line 1s linear 0s 1 forwards;
}
.news-page-info{
  animation: fadeInUp 1s ease .2s 1 forwards;
}

.news-next-link,
.news-prev-link{
  animation: fade 1s linear 0s 1 forwards;
}
.index-works-link-box{
  animation: fade 1s linear 0s 1 forwards;
}


.index-about-svg-box{
  animation: index-about-svg-box 20s linear 0s infinite alternate;
}
@keyframes index-about-svg-box {
  0% {
    transform: rotateX(20deg) rotateY(46deg) ;
   
  }
  20% {
    transform: rotateX(36deg) rotateY(42deg) ;
 
  }
  40% {
    transform: rotateX(78deg) rotateY(20deg)  ;

  }
  60% {
    transform: rotateX(50deg) rotateY(30deg) ;
  }
  80% {
    transform: rotateX(48deg) rotateY(0deg) ;
  }
  100% {
    transform: rotateX(20deg) rotateY(46deg) ;
  }
}
.index-about-img{
  animation: index-about-img 20s linear infinite alternate;
}

@keyframes index-about-img {
  0% {
    transform: rotateX(20deg) rotateY(0deg) ;
  }

  100% {
    transform: rotateX(20deg) rotateY(-360deg) ;
  }
}