/* 動畫透明 */
.index-service-list-title,
.index-service-list-text,
.index-service-list-title:after,
.index-products-title,
.index-products-line:after,
.index-products-en-title,
.en-title,
.about-title span,
.ch-title,
.about-p,
.service-title-box,
.serivce-list-info,
.products-class-box,
.news-list-box,
.products-list-box,
.contact-info-form{
  opacity: 0;
}

.index-service-list-title:before,
.index-products-line,
.contact-border-top1,
.contact-border-top2,
.contact-border-bottom1,
.contact-border-bottom2{
  transform: scale(0, 1);
}
.index-products-more-box{
  transform: scale(1, 0);
}

/* -----------index-products------------ */
.index-products-box.active .index-products-title{
  animation: fade 1s linear 0s 1 forwards;
}
.index-products-box.active .index-products-line{
  animation: line .8s linear 0s 1 forwards;
  transform-origin: right;
}
.index-products-box.active .index-products-line:after{
  animation: fade .5s linear .8s 1 forwards;
}

.index-products-box.active .index-products-en-title{
  animation: fade .5s linear .8s 1 forwards;
}
.index-products-box.active .index-products-more-box{
  animation: line2 .5s linear .5s 1 forwards;
  transform-origin: top;
}



.slick-active .index-banner-img{
  animation: scale-b-fade 2s linear 0s 1 forwards;
}
.banner-logo-box{
  animation: fadeInout 1s linear 4s 1 forwards;
}
.index-works-more a:after{
  opacity: 0;
}

.products-page-info-line{
    transform: scale(0, 0);
}

.loading-logo-title:after{
  content: 'normal';
  font-size: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  display: block;
  position: absolute;
  top: 0;
  animation: right-out .8s linear 0s 1 forwards;
}

.index-service-list.active .index-service-mask1{
  animation: line-out .5s linear 0s 1 forwards;
  transform-origin: right; 
}
.index-service-list.active .index-service-mask2{
  right: -54.5%;
    transition-delay: .5s;
}
.index-service-list.active.index-service-list-2 .index-service-mask2{
  left: -47.5%;
    transition-delay: .5s;
}
.index-service-list.active.index-service-list-2  .index-service-mask1{
  transform-origin: left;

}

.index-service-list.active .index-service-list-title{
  animation: fade .5s linear .8s 1 forwards;
}
.index-service-list.active .index-service-list-text{
  animation: fade .5s linear 1s 1 forwards;
}

.index-service-list.active .index-service-list-title:before{
  animation: line 1s linear .8s 1 forwards;
  transform-origin: right;
}
.index-service-list.active .index-service-list-title:after{
  animation: fade .5s linear 1.8s 1 forwards;
}

.index-service-list.active.index-service-list-2 .index-service-list-title:before{
  animation: line 1s linear .8s 1 forwards;
  transform-origin: left;
}



/* -----------------about-------------------- */
.about-title .en-title{
  animation: fade .8s linear 0s 1 forwards;
}
.about-title span{
  animation: fade .8s linear .5s 1 forwards;
}
.about-title .ch-title{
  animation: fadeInRight  .8s linear .5s 1 forwards;
}

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


/* -------------------service----------------------- */
.service-list-box .service-list-info-box{
  animation: width-50 .5s linear 0s 1 forwards;
}
.service-list-box .serivce-list-info{
  animation: fade .8s linear .8s 1 forwards;
}
.service-list-box .service-title-box{
  animation: fade .8s linear .5s 1 forwards;
}


/* ----------------------products----------------------- */
.products-box{
  animation: translate-top .5s linear 0s 1 forwards;
}
.products-class-box{
  animation: fade .8s linear 0s 1 forwards;
}
.news-list-box{
  animation: fade .8s linear .5s 1 forwards;
}
.products-list-box{
  animation: fade .8s linear .5s 1 forwards;
}

.contact-border-top1,
.contact-border-top2,
.contact-border-bottom1,
.contact-border-bottom2{
  animation: line .5s linear 0s 1 forwards;
}

.contact-border-left1,
.contact-border-left2,
.contact-border-right1,
.contact-border-right2{
  animation: line2  .5s linear 0s 1 forwards;
}
.contact-border-top1,
.contact-border-bottom1{
  transform-origin: left;
}
.contact-border-top2,
.contact-border-bottom2{
  transform-origin: right;
}

.contact-border-left1,
.contact-border-right1{
  transform-origin: top;
}
.contact-border-left2,
.contact-border-right2{
  transform-origin: bottom;
}
.contact-info-form{
  animation: fade .5s linear 0s 1 forwards;
}

.button input:hover{
  border-radius: 20px;
}