.index-about-info-p,
.index-products-box,
.index-news-box .index-title,
.index-news-list-box,
.banner-title,
.main-list-box li,
.main-info-title,
.main-info-text,
.sales-title,
.sales-list-title,
.sales-list,
.products-list-box,
.prodcuts-page-img,
.products-page-info-text,
.products-specification,
.products-buyadd,
.products-page-more-box .products-page-more-title,
.products-page-more-box .products-page-more,
.news-list-box,
.news-page-info-title,
.news-page-info-img,
.news-page-info-text,
.contact-list li,
.contact-info-title,
.contact-info li,
.map-box,
.index-banner-solgan,
.header-logo,
.header-menu-list,
.index-banner-box,
.hot,
.language-box li
{
    opacity: 0;
}
.header-logo{
    animation: fade 1s ease-in 1 forwards;
}
.header-menu-list:nth-child(1){
    animation: fade  1s ease-out 0.3s 1 forwards;
}
.header-menu-list:nth-child(2){
    animation: fadeInUp2  1s ease-out 0.5s 1 forwards;
}
.header-menu-list:nth-child(3){
    animation: fadeInUp2  1s ease-out 0.7s 1 forwards;
}
.header-menu-list:nth-child(4){
    animation: fadeInUp2  1s ease-out 0.9s 1 forwards;
}
.header-menu-list:nth-child(5){
    animation: fadeInUp2  1s ease-out 1.1s 1 forwards;
}
.header-menu-list:nth-child(6){
    animation: fadeInUp2  1s ease-out 1.2s 1 forwards;
}
.header-menu-list:nth-child(7),
.language-box li:nth-child(2){
    animation: fadeInUp2  1s ease-out 1.5s 1 forwards;
}
.header-menu-list:nth-child(8),
.language-box li:nth-child(3){
    animation: fadeInUp2  1s ease-out 1.7s 1 forwards;
}
.index-banner-box{
    animation: fade 1.5s ease-in 0.5s 1 forwards;
}
.hot{
    animation: fade 1.5s ease-in 1.3s 1 forwards;
}
.header-menu-line{
    transform-origin: left;
    animation: line 1s ease-in 1 forwards;
}
.index-about-info-p.active{
    animation: fade 1s ease-in 1 forwards;
}
.index-products-box.active{
    animation: fade 1s ease-in 1 forwards;
}
.index-news-box.active .index-title{
    animation: fade 1s ease-in 1 forwards;
}
.index-news-list-box.active{
    animation: fade 1s ease-in 1 forwards;
}
.banner-title{
    animation: fade 1s ease-in 1 forwards;
}
.main-title-box span{
    animation: bottom 1.3s linear 1 forwards;
}
.main-list-box li{
    animation: fadeInDown 1s ease-in 1s 1 forwards;
}
.main-info-title,
.sales-title,
.news-page-info-title,
.prodcuts-page-img,
.products-page-info-title,
.products-page-more-box.active .products-page-more-title{
    animation: fade 1s ease-in 1 forwards;
}

.products-list-box,
.products-page-more-box.active .products-page-more,
.news-list-box,
.news-page-info-img{
    animation: fade 1s ease-in .8s 1 forwards;
}
.main-info-title:after,
.sales-title:after,
.products-page-info-title:after,
.news-page-info-title:after{
    animation: line 1s ease-in .5s 1 forwards;
}
.main-info-text,
.sales-list-title,
.products-page-info-text,
.news-page-info-text{
    animation: fade 1s ease-in 1s 1 forwards;
}

.sales-list,
.products-specification,
.products-buyadd{
    animation: fade 1s ease-in 1.5s 1 forwards;
}
.main-title-box{
    animation: fade 1s ease-in  1 forwards;
}
.contact-list li:nth-child(1){
    animation: fadeInDown 1s ease-out 1.3s 1 forwards;
}
.contact-list li:nth-child(2){
    animation: fadeInDown 1s ease-out 1.8s 1 forwards;
}
.contact-list li:nth-child(3){
    animation: fadeInDown 1s ease-out 2.3s 1 forwards;
}
.contact-list li:nth-child(4){
    animation: fadeInDown 1s ease-out 2.8s 1 forwards;
}
.contact-list li:nth-child(5){
    animation: fadeInDown 1s ease-out 3.3s 1 forwards;
}
.contact-info-title{
    animation: fade 1s ease-in 1 forwards;
}
.contact-info li:nth-child(2){
    animation: fade 1s ease-in 1.3s 1 forwards;
}
.contact-info li:nth-child(3){
    animation: fade 1s ease-in 1.8s 1 forwards;
}
.contact-info li:nth-child(4){
    animation: fade 1s ease-in 2.3s 1 forwards;
}
.contact-info li:nth-child(5){
    animation: fade 1s ease-in 2.8s 1 forwards;
}
.contact-info .map-box{
    animation: fade 1s ease-in 3.3s 1 forwards;
}
.fadeInDown{
    animation: fadeInDown2 1s ease-out 0s 1 forwards;
}
/*上方進入*/

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

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

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

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


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

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

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

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