.index-banner-list span,
#about .banner-list span{
  transform: scale(1,1);
}
.index-banner-list.slick-active  span,
#about .banner-img-slick-list.slick-active  span,
.banner-img-box .banner-img{
  animation: banner-slick 3s ease 0s 1 ;
}

@keyframes banner-slick {
  from {
      transform: scale(1.05,1.05);
  }

  to {
      transform: scale(1,1);
  }
}

.index-list1-ifno,
.index-list1-img,
.index-list2-info-box,
.index-list4-info,
.about-list-info-bg, 
.about-list-info-bg2,
.about-list-info,
.about-list-info-box,
.about-list-info-box2,
.about-list,
.about-list2,
.lohas-list1,
.lohas-list1-info-title,
.lohas-list1-p,
.lohas-list2,
.lohas-list2-info-box,
.lohas-list2-info,
.lohas-list2-info-process-content-box,
.lohas-list3-title,
.lohas-list3-process-info,
.lohas-list5-info,
.lohas-list5-line-drawings-box,
.lohas-list6-title,
.lohas-list6-p,
.lohas-list6-img img,
.lohas-list6-info-box,
.lohas-list6-info,
.production-title,
.production-list-box,
.production-patent-list-box,
.production-list,
.production-link-box,
.contact-info-title-box,
.contact-info-form,
.contact-map,
.vip-banner-title,
.vip-list,
.vip-thanks-box,
.index-list3-list,
.index-list5-title,
.index-list5-p,
.banner-title1,
.banner-title2,
.lohas-list4-img,
.lohas-slove-info-p,
.lohas-chang-info-title,
.lohas-chang-info-list-box{
  opacity: 0;
}

.index-list1-info-box.active .index-list1-ifno{
  animation: fadeInDown 1s ease 0s 1 both;
}
.index-list1-info-box.active .index-list1-img{
  animation: fadeInRight 1s ease .5s 1 both;

}

.index-list2-info-box.active{
  animation: fadeInUp 1s ease .5s 1 both;
}
.index-list2-bg-box.active .index-list2-mask{
  animation: right 1s ease .5s 1 both;
}
.index-list4-info.active{
   animation: fadeInLeft 1s ease .0s 1 both;
}
@keyframes right {
  from {
    transform:rotate(-6deg) translate(0,222px);
  }

  to {
    transform:rotate(-6deg) translate(0,0px);
  }
}

/*-------------------------------------------*/

.about-list.active .about-list-info-box{
  animation: fadeInLeft .8s ease .0s 1 both;
}
.about-list.active .about-list-info-box2{
  animation: fadeInRight .8s ease .0s 1 both;
}
.about-list.active .about-list-info-bg{
  animation: fade .5s ease .8s 1 both;
}

.about-list.active .about-list-info{
  animation: fadeInUp 1s ease .5s 1 both;
}
.about-list.active{
  animation: fadeInUp .5s ease 0s 1 both;
}
.about-list2.active{
  animation: fadeInUp 1s ease 0s 1 both;
}
.lohas-list1.active,
.lohas-list4_5.active .lohas-list5-info,
.lohas-list5.active .lohas-list5-info{
  animation: fade 1s ease 0s 1 both;
}

.lohas-list1.active .lohas-list1-info-box .lohas-list1-info-title:nth-child(1){
  opacity: 1;
  transition: all .8s linear;
  transition-delay: .5s;
}

.lohas-list1.active .lohas-list1-info-box .lohas-list1-p:nth-child(2){
  opacity: 1;
  transition: all .8s linear;
  transition-delay: .7s;
}

.lohas-list1.active .lohas-list1-info-box .lohas-list1-info-title:nth-child(3){
  opacity: 1;
  transition: all .8s linear;
  transition-delay: .9s;
}

.lohas-list1.active .lohas-list1-info-box .lohas-list1-p:nth-child(4){
  opacity: 1;
  transition: all .8s linear;
  transition-delay: 1.1s;
}

.lohas-list2.active{
  animation: fadeInUp 1s ease 0s 1 both;
}

.lohas-list2.active .lohas-list2-info-box{
  opacity: 1;
  transition: all 1s linear;
  transition-delay: .5s;
}

.lohas-list2.active .lohas-list2-info {
  animation: fadeInUp .5s ease .7s 1 both;
}

.lohas-list2.active .lohas-list2-info-process-content-box{
 
  opacity: 1;
  transition: all .8s ease;
  transition-delay: 1s;
}
.lohas-list2-info-process-border-box span{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #FFF;
  transform: scale(0,1);
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border1 span{
  transform: scale(1,1);
  transition: all .5s linear;
  transition-delay: 1s ;
}
.lohas-list2-info-process-border1 span{
  transform-origin: left;
}
.lohas-list2-info-process-border2 span{
  transform-origin: left;
}
.lohas-list2-info-process-border3 span{
  transform-origin: right;
}
.lohas-list2-info-process-border4 span{
  transform-origin: right;
}
.lohas-list2-info-process-border5 span{
  transform-origin: left;
}
.lohas-list2-info-process-border6 span{
  transform-origin: right;
}

.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border1 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1s ;
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border2 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1.1s ;
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border3 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1.2s ;
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border4 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1.3s ;
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border5 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1.4s ;
}
.lohas-list2.active .lohas-list2-info-process-border-box .lohas-list2-info-process-border6 span{
  transform: scale(1,1);
  transition: all .1s linear;
  transition-delay: 1.5s ;
}
.lohas-list2-info-process-border-box:after{
  transform: scale(1,0);
  transform-origin: left;
}
.lohas-list2.active .lohas-list2-info-process-border-box:after{
  transform: scale(1,1);
  transition-delay: 1.5s;
  transition: all .5s linear;
}

.lohas-list3.active .lohas-list3-title{
  opacity: 1;
  transition: all .5s ease;
}
.lohas-list3.active .lohas-list3-process .lohas-list3-process-info{
  animation: fadeInLeft 1s ease 0s 1 both;
}
.lohas-list3.active .lohas-list3-process:nth-child(even) .lohas-list3-process-info{
  animation: fadeInRight 1s ease 0s 1 both;
}


.lohas-list4-bg-box{
  transform: rotate(-9deg) translate(-438px,-365px);
}

.lohas-list4.active .lohas-list4-bg-box{
  
  transition: all .8s ease;
  transform: rotate(0deg) translate(0px,0px);
}
    
.lohas-list4-bg2{
  opacity: 0;
}

.lohas-list4.active .lohas-list4-bg2{
  opacity: 1;
  transition: all .5s ease;
  transition-delay: .8s;
}

.lohas-list5-m-box.active .lohas-list5-info,
.lohas-list5-m-box.active .lohas-list5-info{
  animation: fadeInUp .8s ease 0s 1 both;
}

.lohas-list5.active .lohas-list5-line-drawings-box,
.lohas-list4_5.active .lohas-list5-line-drawings-box{
  animation: fadeInLeft .8s ease 0s 1 both;
}

.lohas-list6.active .lohas-list6-title,
.lohas-list6-info-box.active {
  opacity: 1;
  transition: all .8s ease;
}

.lohas-list6.active .lohas-list6-p{
  animation: fadeInUp .8s ease 0s 1 both;
}
.lohas-list6.active .lohas-list6-img img{
  opacity: 1;
  transition: all .8s ease;
}
.lohas-list6-info-box.active .lohas-list6-info{
  animation: fadeInUp .8s ease 0s 1 both;
}
 
.production-process-box.active .production-title,
.production-patent-box.active .production-title,
.production-list3-box.active .production-title,
.production-table-box.active .production-title{
  opacity: 1;
  transition: all .8s ease;
}
.production-title:after, .production-title:before{
  transform: scale(0,1);
  transition: all .5s linear;
  transition-delay: 0.3s;
}
.production-title:before{
  transform-origin: right;
}
.production-title:after{
  transform-origin: left;
}
.production-process-box.active .production-list-box,
.production-patent-box.active .production-patent-list-box{
  animation: fadeInUp .8s ease 0s 1 both;
}
.production-process-box.active .production-title:after,
.production-process-box.active .production-title:before,
.production-patent-box.active .production-title:after,
.production-patent-box.active .production-title:before,
.production-list3-box.active .production-title:after,
.production-list3-box.active .production-title:before,
.production-table-box.active .production-title:after,
.production-table-box.active .production-title:before{
  transform: scale(1,1);
}
.production-list.active,
.production-link-box.active{
  opacity: 1;
  transition: all .8s ease;
}

.contact-box.active .contact-info-title-box{
  animation: fadeInUp .8s ease 0s 1 both;
}
.contact-box.active .contact-info-form{
  animation: fadeInUp .8s ease .2s 1 both;
}
.contact-map.active{
  animation: fade .8s ease 0s 1 both;
}
.vip-banner-title{
  animation: fade .8s ease 0s 1 both;
}
.vip-list.active{
  opacity: 1;
  transition: all .8s linear;
}
.vip-thanks-box.active{
  animation: fadeInUp .8s ease 0s 1 both;
}
.index-list3-list-box.active .index-list3-list:nth-child(odd){
  animation: fadeInLeft .8s ease 0s 1 both;
}
.index-list3-list-box.active .index-list3-list:nth-child(even){
  animation: fadeInRight .8s ease 0s 1 both;
}
.index-list5-info.active .index-list5-title{
  animation: fade .8s ease 0s 1 both;
}
.index-list5-info.active .index-list5-p:nth-child(2){
  animation: fade .8s ease .2s 1 both;
}
.index-list5-info.active .index-list5-p:nth-child(3){
  animation: fade .8s ease .4s 1 both;
}
.index-list5-info.active .index-list5-p:nth-child(4){
  animation: fade .8s ease .6s 1 both;
}

.travel-page-title,
.travel-fb-box,
.travel-page-img,
.travel-page-edit,
.travel-page-back
{
  opacity: 0;
}
.travel-page-line{
  transform: scale(0,1);
}
.travel-more-box{
  animation: fadeInUp .8s ease 0s 1 both;
}
.travel-page-title.active{
  animation: fade .5s ease 0s 1 both;
}
.travel-fb-box.active{
  animation: fade .5s ease 0s 1 both;
}
.travel-page-img.active{
  animation: fade .5s ease 0s 1 both;
}
.travel-page-edit.active{
  animation: fadeInUp .8s ease 0s 1 both;
}
.travel-page-line.active{
  animation: line .8s ease 0s 1 both;
}
.travel-page-back.active{
  animation: fade .5s ease 0s 1 both;
}

.banner-title1{
  animation: fade .8s linear 0s 1 both;
}
.banner-title2{
  animation: fade .8s linear .2s 1 both;
}
.lohas-list4-img{
  animation: fade .8s linear 0s 1 both;
}

.lohas-chang-info-title.active{
  animation: fade .8s ease 0s 1 both;
}
.lohas-chang-info-list-box.active{
  animation: fadeInUp .8s ease 0s 1 both;
}
.lohas-slove-info-p.active{
  animation: fadeInUp .8s ease 0s 1 both;
}