/* header */
.header-animation{
  transition: none;
  background-color: #FFF;
      padding: 20px 0;
}
.header-animation.ready{
  transform: rotateX(90deg);
  transition: all .5s ;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  transform-origin: center top;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.header-block.active{
  position: fixed;
}
.header-block.active .header-animation.ready{
  transform: rotateX(0deg);
}
.header-animation.ready{
  padding: 10px 0;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 2px;
}

/* 動畫透明 */
.index-about-line:after,
.index-about-p,
.index-make-title,
.index-make-list,
.index-works-list-box,
.products-list-box,
.products-back-title,
.products-back-icon,
.products-page-info-title,
.products-page-info-p,
.works-list-box,
.contact-info-form,
.index-banner-slong,
.index-make-line span:nth-child(2):after,
.index-works-more a:after{
  opacity: 0;
}
.index-make-line span,
.index-about-line,
.index-about-line:before,
.index-works-title:before,
.index-works-title-line-left span,
.index-works-title-line-right span,
.index-works-more:before,
.index-works-line,
.products-title:after,
.products-page-info-line{
    transform: scale(0, 0);
}


/* index-about */
.index-about-line{
  transform-origin: right;
}
.index-about-box.active .index-about-line{
  animation: line .5s linear 0s 1 forwards;
}

.index-about-line:before{

  transform-origin: right;
}
.index-about-box.active .index-about-line:before{
  animation: line .1s linear .5s 1 forwards;
}

.index-about-box.active .index-about-line:after{
  animation: fade .2s linear .6s 1 forwards;
}
.index-about-p.active{
  animation: fade .5s linear 0s 1 forwards;
}

/* --------------index-make----------- */
.index-make-line.active .index-make-line1{
  transform-origin: top;
  animation: line2 .2s linear 0s 1 forwards;
}
.index-make-line.active .index-make-line2{
  transform-origin: top;
  animation: line2 .2s linear 0.2s 1 forwards;
}
.index-make-line.active span:nth-child(2):after{
  animation: fade .2s linear 0.4s 1 forwards;
}

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

.index-make-box.active .index-make-list-box:nth-child(2) .index-make-list:nth-child(1){
  animation: fade .5s linear 0s 1 forwards;
}
.index-make-box.active .index-make-list-box:nth-child(2) .index-make-list:nth-child(2){
  animation: fade .5s linear .2s 1 forwards;
}
.index-make-box.active .index-make-list-box:nth-child(2) .index-make-list:nth-child(3){
  animation: fade .5s linear .4s 1 forwards;
}

.index-make-box.active .index-make-list-box:nth-child(3) .index-make-list:nth-child(1){
  animation: fade .5s linear .6s 1 forwards;
}
.index-make-box.active .index-make-list-box:nth-child(3) .index-make-list:nth-child(2){
  animation: fade .5s linear .8s 1 forwards;
}
.index-make-box.active .index-make-list-box:nth-child(3) .index-make-list:nth-child(3){
  animation: fade .5s linear 1s 1 forwards;
}


.index-work-box.active .index-works-title:before{
  transform-origin: right;
  animation: line .3s linear 0s 1 forwards;
}
.index-work-box.active .index-works-line2{
  transform-origin: bottom;
  animation: line2 .3s linear 0.3s 1 forwards;
}
.index-work-box.active .index-works-line1{
  transform-origin: bottom;
  animation: line2 .3s linear 0.6s 1 forwards;
}
.index-work-box.active .index-works-more:before{
  transform-origin: left;
  animation: line .3s linear 0s 1 forwards;
}
.index-work-box.active .index-works-more a:after{
  animation: fade .5s linear .3s 1 forwards;
}


.index-work-box.active .index-works-line{
  animation: line .5s linear 0s 1 forwards;
}
.index-work-box.active .index-works-list-box{
  animation: fade .5s linear 0s 1 forwards;
}

/* --------------products----------------- */
.products-title:after{
  animation: line .5s linear 0s 1 forwards;
}

.products-class-list:hover:after{
  transform: scale(1, 1)
}

.products-list-box{
  animation: fade .5s linear 0s 1 forwards;
}
.products-back-title{
  animation: fade .5s linear .2s 1 forwards;
}
.products-back-icon{
  animation: fade .5s linear .5s 1 forwards;
}



.products-page-info-title{
  animation: fade .5s linear .2s 1 forwards;
}
.products-page-info-line{
  transform-origin: left;
  animation: line .5s linear .4s 1 forwards;  
}
.products-page-info-p{
  animation: fade .5s linear .6s 1 forwards;
}

/* ---------------works------------------- */
.works-list-box{
  animation: fade .5s linear .2s 1 forwards;
}

.contact-info-form{
  animation: fade .5s linear .2s 1 forwards;
}


.slick-active .index-banner-slong{
  animation: fadeInDown .8s linear .3s 1 forwards;

 }

.slick-active .index-banner-slong-out{
  animation: fadeUpout .8s linear 3.3s 1 forwards;
}