.header-logo,
.header-menu li,
.index-about-info-img1,
.index-about-info-img2-box span,
.index-about-service-title,
.index-about-service-list li,
.index-construction-list-title,
.index-construction-icon,
.index-construction-icon2,
.index-construction-icon3,
.index-construction-icon4,
.index-construction-icon5,
.index-construction-logo,
.banner-img,
.banner-slong,
.main-list-title,
.main-list-title:after,
.main-list li,
.main-products-title,
.main-products-title:after,
.main-products-path,
.main-products-list-box,
.engineering-page-left,
.engineering-page-title,
.engineering-page-edit,
#engineering-page .back,
.works-title,
.works-list-box,
.works-page-img-box,
.works-page-edit,
#works-page .back,
.processing-title,
.a1, .a2, .a3,
.contact-title,
.contact-info-form,
.contact-info-box,
.rwd-menu{
	opacity: 0;
}
/*header*/
.header-contact-box{
	animation: InDown 0.5s linear 0s 1 forwards;
}

.header-logo{
	animation: fade 0.5s linear .2s 1 forwards;
}
.header-menu li,
.rwd-menu{
	animation: fade 0.5s linear .3s 1 forwards;
}
.index-banner-list.slick-active .index-banner-img{
	animation: scale-b-fade2 3.5s linear 0s 1 forwards;
}
.index-about-info-img1.active{
	animation: fade 0.5s linear 0s 1 forwards;
}
.index-about-info-img2-box.active span{
	animation:  aboutInRight 1s linear 0s 1 forwards;
}
.index-about-service-title.active{
	animation: fade 0.5s linear 0s 1 forwards;
}

.index-about-service-list.active li:nth-child(1){
	animation: fade 0.5s linear .3s 1 forwards;
}
.index-about-service-list.active li:nth-child(2){
	animation: fade 0.5s linear .5s 1 forwards;
}
.index-about-service-list.active li:nth-child(3){
	animation: fade 0.5s linear .7s 1 forwards;
}
.index-about-service-list.active li:nth-child(4){
	animation: fade 0.5s linear .9s 1 forwards;
}
.index-about-service-list.active li:nth-child(5){
	animation: fade 0.5s linear 1.1s 1 forwards;
}
.index-about-service-list.active li:nth-child(6){
	animation: fade 0.5s linear 1.3s 1 forwards;
}
.construction-active .index-construction-list-title{
	animation: fade 0.5s linear 0s 1 forwards;
}

.construction-active .index-construction-icon{
	animation: fadeInRight 0.5s linear 0.5s 1 forwards;
}
.construction-active .index-construction-icon2{
	animation: fadeInLeft 0.5s linear 0.5s 1 forwards;
}
.construction-active .index-construction-icon3{
	animation: fadeInDown 0.5s linear 0.5s 1 forwards;
}
.construction-active .index-construction-icon4{
	animation: fadeInUp 0.5s linear 0.5s 1 forwards;
}
.construction-active .index-construction-icon5{
	animation: fadeInLeft 0.5s linear 0.5s 1 forwards;
}
.construction-active .index-construction-logo{
	animation: fade 1s linear 0.5s 1 forwards;
}
@keyframes aboutInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
  }

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

@keyframes scale-b-fade2 {
 0%{
    transform: scale(1.2);
    opacity: 0.1;
  }
  20%{
  	opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* ---------------------------------- */
.banner-img{
	animation: scale-b-fade3 1.5s linear 0s 1 forwards;
}
.banner-slong{
	animation: fade .8s linear 1s 1 forwards;
}
.main-list-title{
	animation: fade .8s linear .5s 1 forwards;
}
.main-list-title:after{
	animation: InRight2 0.5s linear 1s 1 forwards;
}
.main-list li{
	animation: fade .8s linear .8s 1 forwards;
}
.main-products-title{
	animation: fade .8s linear .5s 1 forwards;
}
.main-products-title:after{
	animation: fadeInLeft .8s linear .8s 1 forwards;
}
.main-products-path{
	animation: fade .8s linear .8s 1 forwards;
}
.main-line{
	transform-origin: left;
	transform: scale(0);
	animation: line .8s linear .8s 1 forwards;
}
.main-products-list-box{
	animation: fade .8s linear 1s 1 forwards;
}

.engineering-page-left{
  animation: fade .8s linear .8s 1 forwards;
}
.engineering-page-title:after{
  transform: scale(0);
  animation: line2 .5s linear .8s 1 forwards;
}
.engineering-page-title{
  animation: fade .8s linear .5s 1 forwards;
}
.engineering-page-edit{
  animation: fade .8s linear .7s 1 forwards;
}
#engineering-page .back{
   animation: fade .8s linear .7s 1 forwards;
}
@keyframes scale-b-fade3 {
 0%{
    transform: scale(1.2);
    opacity: 0.1;
  }
  50%{
  	opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*---------------- work ----------------*/
.works-title{
  animation: fade .8s linear .7s 1 forwards;
}
.works-box, .works-page-box{
  animation: top2 .8s linear .5s 1 forwards;
}
.works-list-box{
  animation: fade .8s linear 1s 1 forwards;
}
.works-page-img-box{
  animation: fade .8s linear 1s 1 forwards;
}
.works-page-edit{
  animation: fade .8s linear 1s 1 forwards;
}
#works-page .back{
  animation: fade .8s linear 1.3s 1 forwards;
}
/*top進入*/
@-webkit-keyframes top2 {
  from {
    top: 0;
  }

  to {
 
    top: -40px;
  }
}

@keyframes top2 {
  from {
    top: 0px;
  }

  to {
    top: -40px;
  }
}

.fade{
	opacity: 1;
	transition: all .4s linear;
}
.down{
	opacity: 1;
	top: 0;
	transition: all .4s linear;

}

/* processing */
.processing-title{
  animation: fade .8s linear .5s 1 forwards;
}


.a1{
  animation: fade .8s linear .7s 1 forwards;
}

.a2{
  animation: fade .8s linear 1.2s 1 forwards;
}

.a3{
  animation: fade .8s linear 1.7s 1 forwards;
}


/* contact */
.contact-title{
   animation: fade .8s linear .5s 1 forwards;
}

.contact-title:after{
  animation: InRight3 1.5s linear .8s infinite alternate;
}
.contact-line{
  transform: scale(0);
  animation: line 1s linear .8s 1 forwards;
}
.contact-info-form{
  animation: fade .8s linear .6s 1 forwards;
  
}
.contact-info-box{
  animation: fade .8s linear 1s 1 forwards;
}
@keyframes InRight3 {
  from {
    -webkit-transform: none;
    transform: none;
  }
  to {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}