.index-banner-slong{
  opacity: 0;
}

.traffic-list4-box,
.about-info-title,
.about-info-p,
.guarantee-title,
.guarantee-title span,
.guarantee-list-box li,
.program-title-box,
.program-info-box li,
.question-title-box,
.question-list-box li,
.contact-title,
.contact-ps,
.contact-list li{
 opacity: 0;
}

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

/* banner */

.slick-active .index-banner-slong{
  animation: fade 1s linear 0s 1 forwards;
}

.banner-arrow{
  animation: InDown2 1s linear 0s infinite alternate;
}

@-webkit-keyframes InDown2 {
  from {
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

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

@keyframes InDown2 {
  from {

    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {

    -webkit-transform: none;
    transform: none;
  }
}


/* about */
.about-info-box.active .about-title-box span:nth-child(1){
  transform-origin: left;
  animation: line .5s linear 0s 1 forwards;
}
.about-info-box.active .about-title-box span:nth-child(2){
  transform-origin: top;
  animation: line2 .2s linear 0.5s 1 forwards;
}
.about-info-box.active .about-title-box span:nth-child(3){
  transform-origin: right;
  animation: line .5s linear 0.7s 1 forwards;
}
.about-info-box.active .about-title-box span:nth-child(4){
  transform-origin: bottom;
  animation: line2 .2s linear 1.2s 1 forwards;
}
.about-info-box.active .about-info-title{
  animation: fade .8s linear 0s 1 forwards;
}
.about-info-box.active .about-info-p:nth-child(1){
  animation: fade .8s linear .3s 1 forwards;
}
.about-info-box.active .about-info-p:nth-child(2){
  animation: fade .8s linear 0.5s 1 forwards;
}
.about-info-box.active .about-info-p:nth-child(3){
  animation: fade .8s linear 0.7s 1 forwards;
}
.about-info-box.active .about-info-p:nth-child(4){
  animation: fade .8s linear 0.9s 1 forwards;
}


/* guarantee */
.guarantee-info-box.active .guarantee-title{
  animation: fade .8s linear 0s 1 forwards;
}
.guarantee-title span{
  transform: scale(1.2);

}
.guarantee-info-box.active .guarantee-title span
{
  animation: scale-b-fade .8s linear 0.4s 1 forwards;
  display: inline-block;
}
.guarantee-info-box.active .guarantee-list-box li span{
  display: inline-block;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(1){
  animation: fadeInUp .8s linear 0.3s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(2){
  animation: fadeInUp .8s linear 0.5s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(3){
  animation: fadeInUp .8s linear 0.7s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(4){
  animation: fadeInUp .8s linear 0.9s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(5){
  animation: fadeInUp .8s linear 1.1s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(6){
  animation: fadeInUp .8s linear 1.3s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(7){
  animation: fadeInUp .8s linear 1.5s 1 forwards;
}
.guarantee-info-box.active .guarantee-list-box li:nth-child(8){
  animation: fadeInUp .8s linear 1.7s 1 forwards;
}


/* problem */
.program-box.active .program-title-box{
  animation: fade .8s linear 0s 1 forwards;
}
.program-box.active .program-line-top{
  transform-origin: left;
  animation: line .8s linear 0.2s 1 forwards;
}

.program-box.active .program-line-bottom{
  transform-origin: right;
  animation: line .8s linear 0.2s 1 forwards;
}

.program-box.active  .program-info-box li:nth-child(1){
  animation:fadeInLeft2 .8s linear 0.2s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(2){
  animation:fadeInLeft2 .8s linear 0.4s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(3){
  animation:fadeInLeft2 .8s linear 0.6s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(4){
  animation:fadeInLeft2 .8s linear 0.8s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(5){
  animation:fadeInLeft2 .8s linear 1s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(6){
  animation:fadeInLeft2 .8s linear 1.2s 1 forwards;
}
.program-box.active  .program-info-box li:nth-child(7){
  animation:fadeInLeft2 .8s linear 1.4s 1 forwards;
}

.question-box.active .question-title-box{
 animation: fade .8s linear 0s 1 forwards;
}

.question-box.active .program-line-top{
  transform-origin: right;
  animation: line .8s linear 0.2s 1 forwards;
}
.question-box.active .question-list-box li:nth-child(1){
   animation: fade .8s linear 0.2s 1 forwards;
}
.question-box.active .question-list-box li:nth-child(2){
   animation: fade .8s linear 0.4s 1 forwards;
}
.question-box.active .question-list-box li:nth-child(3){
   animation: fade .8s linear 0.6s 1 forwards;
}
.question-box.active .question-list-box li:nth-child(4){
   animation: fade .8s linear 0.8s 1 forwards;
}
.question-box.active .question-list-box li:nth-child(5){
   animation: fade .8s linear 1s 1 forwards;
}

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

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

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

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



/* contact */

.contact-box.active .contact-title{
  animation: fade .8s linear 0s 1 forwards;
}

.contact-box.active .contact-line{
  animation: line .8s linear 0.2s 1 forwards;
}

.contact-box.active .contact-ps{
  animation: fade .8s linear 0.2s 1 forwards;
}
.contact-box.active .contact-list li{
  animation: fade .8s linear 0.4s 1 forwards;
}