.index-logo,
.about-box .title,
.about-box .about-p1,
.about-box .about-p2,
.about-box .about-p3,
.about-box .about-p4,
.about-box .about-p5,
.about-box .about-service,
.products-list-box,
.products-info-box,
.contact-box .title,
.contact-info-form li:nth-child(1),
.contact-info-form li:nth-child(2),
.contact-info-form li:nth-child(3),
.contact-info-form li:nth-child(4),
.contact-info-form li:nth-child(5),
.contact-info-form li:nth-child(6),
.contact-info-title,
.contact-info-list li:nth-child(2),
.contact-info-list li:nth-child(3),
.contact-info-list li:nth-child(4),
.contact-info-list li:nth-child(5),
.map-box,
.contact-box,
.about-box,
.products-box
{
    opacity: 0;
}
.products-list-box{
    animation: fadeInLeft 1s ease-in 0s 1 forwards;
}
.products-info-box{
    animation: fadeInUp 1s ease-in 1s 1 forwards;
}
.index-logo{
    animation: fade 1s ease-in 1s 1 forwards;
}
.index-header-menu-box{
    animation: fadeInRight 1s ease-in 0s 1 forwards;
}
.header-box{
    animation: fadeInDown 1.5s ease-in 0s 1 forwards;
}
.contact-box,
.about-box,
.products-box{
    animation: fade 1s ease-in .5s 1 forwards;
}
.about-box .title,
.contact-box .title
{
    animation: fade 1s ease-in 1s 1 forwards;
}
.about-box .about-p1,
.contact-info-form li:nth-child(1),
.contact-info-title{
    animation: fade 1s ease-in 1.5s 1 forwards;
}
.about-box .about-p2,
.contact-info-form li:nth-child(2),
.contact-info-list li:nth-child(2){
    animation: fade 1s ease-in 2s 1 forwards;
}
.about-box .about-p3,
.contact-info-form li:nth-child(3),
.contact-info-list li:nth-child(3){
    animation: fade 1s ease-in 2.5s 1 forwards;
}
.about-box .about-p4,
.contact-info-form li:nth-child(4),
.contact-info-list li:nth-child(4){
    animation: fade 1s ease-in 3s 1 forwards;
}
.about-box .about-service,
.contact-info-form li:nth-child(5),
.contact-info-list li:nth-child(5){
    animation: fade 1s ease-in 3.5s 1 forwards;
}
.about-box .about-p5,
.contact-info-form li:nth-child(6),
.map-box{
    animation: fade 1s ease-in 4s 1 forwards;
}
/*淡入*/
@-webkit-keyframes fade {
  from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
@keyframes fade {
 from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
/*右邊快速進入*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

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

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*左邊進入*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

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

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

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

/*上方進入*/

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

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

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

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

/*下方進入*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

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

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

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