.about1-img-box,
.about-title,
.about1-title,
.about1-info-p p,
.about2-img-box,
.about2-info,
.contact-title,
.idear-title2,
.idear-img-box,
.contact-title2-box,
.contact-info-form li,
.index-banner-slong-1,
.index-banner-slong-2{
  opacity: 0;
}
.line,
.contact-box> span{
  transform: scale(0);

}

.about-title-box span,
.program-line-top,
.program-line-bottom,
.contact-line{
  transform: scale(0);
}

/* banner */
.slick-active .index-banner-slong-1{
  animation: fade 1s linear 0.5s 1 forwards;
}
.slick-active .index-banner-slong-2{
  animation: fade 1s linear 1s 1 forwards;
}

/* about */
.about1-box.active .about1-img-box,
.about1-box.active .about1-title{
  animation: fade .8s linear 0s 1 forwards;
}
.about1-box.active .about1-line1-1{
  animation: line .4s linear 0.3s 1 forwards;
  transform-origin: left;
}
.about1-box.active .about1-line1-2{
  animation: line .3s linear 0s 1 forwards;
  transform-origin: left;
}
.about1-box.active .about1-line2{
  animation: line2 .4s linear .7s 1 forwards;
  transform-origin: top;
}
.about1-box.active .about1-line3{
  animation: line .4s linear 1.1s 1 forwards;
  transform-origin: right;
}
.about1-box.active .about1-line2-1{
  animation: line2 .4s linear 1.5s 1 forwards;
  transform-origin: bottom;
}
.about1-box.active .about1-line2-2{
  animation: line2 .4s linear 1.6s 1 forwards;
  transform-origin: bottom;
}
.about1-box.active .about1-title-line{
 animation: line2 .4s linear .3s 1 forwards;
}

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

.id-about2.active .about-title,
.id-about4.active .about-title{
  animation: fade .5s linear 0s 1 forwards;
}
.id-about2.active .about2-title-box span,
.id-about4.active .about2-title-box span{
  animation: line .4s linear 0.1s 1 forwards;
  transform-origin: left;
}

.id-about2.active .about2-img-box,
.id-about4.active .about2-img-box{
  animation:  fadeInRight2 1s linear 0.1s 1 forwards;
 
}
.id-about2.active .about2-info,
.id-about4.active .about2-info{
  animation: fade .8s linear 0.5s 1 forwards;
}
.id-about2.active .about2-line-bottom,
.id-about4.active .about2-line-bottom{
  transform-origin: right;
  animation: line .8s linear 0.5s 1 forwards;
}


.id-about3.active .about-title,
.id-about5.active .about-title{
  animation: fade .5s linear 0s 1 forwards;
}


.id-about3.active .about2-title-box span,
.id-about5.active .about2-title-box span{
  animation: line .4s linear 0.1s 1 forwards;
  transform-origin: left;
}

.id-about3.active .about2-img-box,
.id-about5.active .about2-img-box{
  animation:  fadeInLeft2 1s linear 0.1s 1 forwards;
 
}
.id-about3.active .about2-info,
.id-about5.active .about2-info{
  animation: fade .8s linear 0.5s 1 forwards;
}
.id-about3.active .about2-line-bottom,
.id-about5.active .about2-line-bottom{
  transform-origin: right;
  animation: line .8s linear 0.5s 1 forwards;
}




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

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

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

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



/*左邊進入*/
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

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

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

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



/* --------------------idear-------------------- */
.contact-title-box.active .contact-line-box span:nth-child(2){
  animation: clockwise 1s linear 0s 1 forwards;
  
}
.contact-title-box.active .contact-line-box span:nth-child(1){
  transform-origin: right;
  animation: line 1s linear 0s 1 forwards;
}
.contact-title-box.active .contact-title{
  animation:  fadeInLeft2 1s linear 0s 1 forwards;
}
.id-idear2.active .about2-title-box span,
.id-idear4.active .about2-title-box span{
  animation: line .4s linear 0.1s 1 forwards;
  transform-origin: left;
}

.id-idear2.active .about-title,
.id-idear4.active .about-title{
  animation: fade .5s linear 0s 1 forwards;
}



.id-about2.active .about2-img-box,
.id-about4.active .about2-img-box,
.id-idear2.active .about2-img-box,
.id-idear4.active .about2-img-box{
  animation:  fadeInRight2 .5s linear 0.1s 1 forwards;
 
}
.id-about2.active .about2-info,
.id-about4.active .about2-info,
.id-idear2.active .about2-info,
.id-idear4.active .about2-info{
  animation: fade .8s linear 0.5s 1 forwards;
}
.id-about2.active .about2-line-bottom,
.id-about4.active .about2-line-bottom,
.id-idear2.active .about2-line-bottom,
.id-idear4.active .about2-line-bottom{
  transform-origin: right;
  animation: line .8s linear 0.5s 1 forwards;
}



.id-idear3.active .about-title,
.id-idear5.active .about-title{
  animation: fade .5s linear 0s 1 forwards;
}



.id-idear3.active .about2-title-box span,
.id-idear5.active .about2-title-box span{
  animation: line .4s linear 0.1s 1 forwards;
  transform-origin: left;
}

.id-idear3.active .about2-img-box, 
.id-idear5.active .about2-img-box{
  animation:  fadeInLeft2 1s linear 0.1s 1 forwards;
 
}

.id-idear3.active .about2-info, 
.id-idear5.active .about2-info{
  animation: fade .8s linear 0.5s 1 forwards;
}

.id-idear3.active .about2-line-bottom, 
.id-idear5.active .about2-line-bottom{
  transform-origin: right;
  animation: line .8s linear 0.5s 1 forwards;
}

.id-idear6.active .idear-line-box{
  transform-origin: left;
  animation: line .5s linear 0s 1 forwards;
}

.id-idear6.active .idear-title2{
  animation: fade .5s linear 0.5s 1 forwards;
}
.id-idear6.active .idear-img-box{
  animation: fade .5s linear .8s 1 forwards;
}


.contact-box.active .contact-line-top1-1,
.contact-box.active .contact-line-bottom1-1{
  animation: line .5s linear 0s 1 forwards;
  transform-origin: left;
}

.contact-box.active .contact-line-top1-2,
.contact-box.active .contact-line-bottom1-2{
  animation: line .5s linear 0s 1 forwards;
  transform-origin: right;
}

.contact-box.active .contact-line-right1-1,
.contact-box.active .contact-line-left1-1{
   animation: line2 .5s linear 0s 1 forwards;
   transform-origin: top;
}
.contact-box.active .contact-line-right1-2,
.contact-box.active .contact-line-left1-2{
   animation: line2 .5s linear 0s 1 forwards;
   transform-origin: bottom;
}


.contact-box.active .contact-title2-box{
  animation: fade .5s linear .5s 1 forwards;
}

.contact-box.active .contact-info-form li:nth-child(1){
  animation: fade .5s linear .5s 1 forwards;
}
.contact-box.active .contact-info-form li:nth-child(2){
  animation: fade .5s linear .7s 1 forwards;
}
.contact-box.active .contact-info-form li:nth-child(3){
  animation: fade .5s linear .7s 1 forwards;
}
.contact-box.active .contact-info-form li:nth-child(4){
  animation: fade .5s linear .9s 1 forwards;
}
.contact-box.active .contact-info-form li:nth-child(5){
  animation: fade .5s linear .9s 1 forwards;
}
.contact-box.active .contact-info-form li:nth-child(6){
  animation: fade .5s linear 1.1s 1 forwards;
}
.button input{
  cursor: pointer;
  transition: all .3s linear;
}
.button input:hover{
  border-radius: 10px;
  background-color: #17434c;
  box-shadow: rgba(0, 0, 0, 0.7) 2px 2px 2px;
}