.main-title,
.about1-logo-box,
.about1-info-p,
.about-say-p,
.about-say-img,
.year-ifno-title,
.contact-info-form,
.contact-info-box,
.contact-logo,
.problem-box,
.index-img-slong2-1,
.index-img-slong2-2,
.index-about-img-box,
.index-about-info-title-img1,
.index-about-info-title span,
.index-about-info-title-img2,
.index-about-info,
.index-recommend-title,
.index-recommend-list-box
{
  opacity: 0;
}
/* about */

.main-title{
  animation: fade .5s linear 0s 1 forwards;
}
.main-line:after{

  animation: fade .5s linear 0s 1 forwards;
}
.about1-logo-box{
  animation: fade .8s linear 0.3s 1 forwards;
}
.about1-info .about1-info-p:nth-child(1){
  animation: fade .8s linear 0.5s 1 forwards;  
}
.about1-info .about1-info-p:nth-child(2){
  animation: fade .8s linear 0.7s 1 forwards;  
}
.about1-info .about1-info-p:nth-child(3){
  animation: fade .8s linear 0.9s 1 forwards;  
}


.about-say-p{
   animation: fade .8s linear 0.3s 1 forwards;
}
.about-say-p-line{
  transform: scaleX(0);
  transform-origin: left;
  animation: line .8s linear 0.5s 1 forwards;
}

.about-say-p-name{
  opacity: 0;
  animation: fade .8s linear 1s 1 forwards;
}
.about-say-img{
  animation: fade .8s linear .8s 1 forwards;
}

/* 圓夢事紀 */
.year-ifno-title{
   animation: fade .8s linear .5s 1 forwards;
}
.year-ifno-title:before{
  animation: fade .5s linear .6s 1 forwards;
}
.year-ifno-title.active:after{
  transform: scaleX(1);
  transform-origin: right;
}
.year-ifno-title.active .year-info-line{
  transform: scaleY(1);
}

.products-list-title:after{
  transform-origin: left;
  transform: scaleX(0);
  animation: line .8s linear 0s 1 forwards;
}

.products-list-title:before{
  transform-origin: top;
  transform: scaleY(0);
  animation: line2 .8s linear 0s 1 forwards;
}

.products-page-info:before{
  transform-origin: right;
  transform: scaleX(0);
  animation: line .8s linear 0s 1 forwards; 
}
.products-page-info:after{
  transform-origin: top;
  transform: scaleY(0);
  animation: line2 .8s linear 0s 1 forwards;
}
.contact-info-form{
   animation: fade .8s linear .3s 1 forwards;
}
.contact-info-box{
  animation: fadeInUp .8s linear .3s 1 forwards;
}
.contact-logo{
  animation: fade .8s linear 1s 1 forwards;
}
.problem-box{
   animation: fade .8s linear .3s 1 forwards;
}
.index-img-slong2-1{
   animation: fade .8s linear 0s 1 forwards;
}
.index-img-slong2-2{
   animation: fade .8s linear 0.5s 1 forwards;
}
.index-about-box.active .index-about-img-box{
  animation: fade .8s linear 0s 1 forwards;
}
.index-about-box.active .index-about-info-title-img1{
  animation: fade .8s linear 0.3s 1 forwards;
}
.index-about-box.active .index-about-info-title span{
  animation: fade .8s linear 0.5s 1 forwards;
}
.index-about-box.active .index-about-info-title-img2{
  animation: fade .8s linear 0.3s 1 forwards;
}
.index-about-box.active .index-about-info{
  animation: fade .8s linear 0.6s 1 forwards;
}
.index-about-line1{
  transform: scale(0,0);
  transform-origin: left;
}
.index-about-line2{
  transform: scale(0,0);
  transform-origin: top;
}
.index-recommend-line-box{
  transform: scale(0, 0);
}
.index-about-box.active .index-about-line1{
  animation: line .8s linear .8s 1 forwards;
}

.index-about-box.active  .index-about-line2{
  animation: line2 .8s linear .8s 1 forwards;
}
.index-recommend-box.active .index-recommend-title{
  animation: fade .8s linear 0s 1 forwards;
}
.index-recommend-box.active .index-recommend-line-box{
  animation:  line .8s linear .3s 1 forwards;
}
.index-recommend-box.active .index-recommend-list-box{
  animation: fade .8s linear .4s 1 forwards;
}
.header2{
  position: fixed;
  opacity: 0;
  animation-name: fade ;
  animation-duration:.5s;
  animation-timing-function:linear;
  animation-delay:0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition: all .3s linear;
}

header{
  transition:all  0s linear;
}