.index-video-slong1,
.index-video-slong2,
.loading-title{
  opacity: 0;
}

.index-title,
.products-list-box,
.index-products-prev,
.index-products-next,
.title,
.products-page-title,
.products-page-back,
.products-page-img-box,
.products-page-editor,
.contact-info-form,
.about-info-p,
.about-list-box li,
.about-list-title-box{
	opacity: 0;
}

.line{
  transform: scale(0);
}

/* banner */

.slick-active .index-video-slong1{
  animation: fade .8s linear 0s 1 forwards;
}
.slick-active .index-video-slong2{
  animation: fade .8s linear 0.5s 1 forwards;
}
.index-arrow{
  animation: InDown2 2s linear 0s infinite alternate;
}

@keyframes InDown2 {
  from {

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

  to {

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

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

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

.line-top1-1,
.line-bottom1-1{
	transform-origin: left;
}
.line-top1-2,
.line-bottom1-2{
	transform-origin: right;
}
.line-right1-1,
.line-left1-1{
	transform-origin: top;
}
.line-right1-2,
.line-left1-2{
	transform-origin: bottom;
}

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

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

.index-box.active .line-right1-1,
.index-box.active .line-left1-1,
.index-box.active .line-right1-2,
.index-box.active .line-left1-2{
	animation: line2 .5s linear 0s 1 forwards;
}

.index-box.active .products-list-box{
	animation: fade .8s linear .3s 1 forwards;
}

.index-box.active .index-products-prev,
.index-box.active .index-products-next{
	animation: fade .8s linear .5s 1 forwards;
}

.title-box .title-line:nth-child(1){
	transform-origin: right;
}
.title-box .title-line:nth-child(3){
	transform-origin: left;
}
.products-page-box.active .title-box .title-line:nth-child(1),
.products-page-box.active .title-box .title-line:nth-child(3){
	animation: line .5s linear 0s 1 forwards;
}

.index-box.active .title-box .title-line:nth-child(1),
.index-box.active .title-box .title-line:nth-child(3),
.contact-box.active .title-box .title-line:nth-child(1),
.contact-box.active .title-box .title-line:nth-child(3),
.about-box.active .title-box .title-line:nth-child(1),
.about-box.active .title-box .title-line:nth-child(3){
	animation: line .5s linear 0s 1 forwards;
}

.products-page-box.active .title{
	animation: fade .8s linear 0s 1 forwards;
}
.index-box.active .title,
.about-box.active .title{
	animation: fade .8s linear 0s 1 forwards;
}
#service .index-video-slong1{
	animation: fade .8s linear 0s 1 forwards;
}

.products-page-box.active .products-page-title{
	animation: fade .8s linear .3s 1 forwards;
}
.products-page-box.active .products-page-back{
	animation: fade .8s linear .4s 1 forwards;
}

.products-page-box.active .products-page-img-box{
	animation: fade .8s linear .5s 1 forwards;
}


.products-page-box.active .products-page-editor{
    animation: fade .8s linear .6s 1 forwards;
}

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

.contact-box.active .contact-bottom-line{
	animation: line .5s linear 0s 1 forwards;
}

.contact-box.active .contact-info-form{
	animation: fade .8s linear 0.3s 1 forwards;
}


.about-box.active .about-info-box .about-info-p{
	animation: fade .8s linear 0.3s 1 forwards;
}
.about-box.active .about-list-title-box{
	animation: fade .8s linear 0.5s 1 forwards;
}
.about-list-box li:nth-child(2){
	animation: fadeInLeft3 .8s linear 0.5s 1 forwards;
}
.about-list-box li:nth-child(3){
	animation: fadeInLeft3 .8s linear 0.6s 1 forwards;
}
.about-list-box li:nth-child(4){	
	animation: fadeInLeft3 .8s linear 0.7s 1 forwards;
}
.about-list-box li:nth-child(5){	
	animation: fadeInLeft3 .8s linear 0.8s 1 forwards;
}
.about-list-box li:nth-child(6){
	animation: fadeInLeft3 .8s linear 0.9s 1 forwards;
}
.about-list-box li:nth-child(7){	
	animation: fadeInLeft3 .8s linear 1s 1 forwards;
}
.about-list-box li:nth-child(8){	
	animation: fadeInLeft3 .8s linear 1.1s 1 forwards;
}
.about-list-box li:nth-child(9){	
	animation: fadeInLeft3 .8s linear 1.2s 1 forwards;
}

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

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