.contact-info-form,
.index-ideal-title,
.index-ideal-article,
.index-title,
.index-service-box,
.index-service-title,
.index-project-box,
.index-project-more,
.main-title,
.about-logo,
.about-info-title,
.staute-list-b-box,
.staute-info-box,
.page,
.service-list-box,
.staute-page-edit{
  opacity: 0;
}
.index-ideal-line-top1,
.index-ideal-line-top2,
.index-ideal-line-left,
.index-ideal-line-right,
.index-ideal-line-bottom1,
.index-ideal-line-bottom2{
  transform: scale(0, 0);
}
/* ----------------------------------------------- */
.index-banner-arrow{
  animation: fadeInUp2 1.5s linear 0s infinite alternate;
}

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

.index-ideal-box.active .index-ideal-line-top1{
  transform-origin: right;
  animation: line .3s linear 0s 1 forwards;
}
.index-ideal-box.active .index-ideal-line-top2{
  transform-origin: left;
  animation: line .3s linear 0s 1 forwards;
}
.index-ideal-box.active .index-ideal-line-left,
.index-ideal-box.active .index-ideal-line-right{
  transform-origin: top;
  animation: line2 .4s linear .3s 1 forwards;
}
.index-ideal-box.active .index-ideal-line-bottom1{
  transform-origin: left;
  animation: line .3s linear .7s 1 forwards;
}
.index-ideal-box.active .index-ideal-line-bottom2{
  transform-origin: right;
  animation: line .3s linear .7s 1 forwards;
}
.index-ideal-box.active .index-ideal-article{
  animation: fade .5s linear 0.5s 1 forwards;
}
.index-service-box.active{
   animation: fade .5s linear 0s 1 forwards;
}
.index-service-box.active .index-service-title{
  animation: fade .5s linear .3s 1 forwards;
}
.index-project-box.active{
  animation: fade .5s linear 0s 1 forwards;
}
.index-title-box.active .index-project-more{
  animation: fadeInLeft .8s linear 0s 1 forwards;
}

/* ---------------about--------------- */
.main-title{
  animation: fade .8s linear 0s 1 forwards;
}
.about-logo{
  animation: fade .8s linear 0.3s 1 forwards;
}
.about-info-title{
  animation: fade .5s linear 0.5s 1 forwards;
}


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

.index-ideal-box .index-title-box .index-title{
  opacity: 1;
}
.staute-list-b-box{
  animation: fade .5s linear 0s 1 forwards;
}

.staute-info-box,
.page{
  animation: fade .5s linear 0.3s 1 forwards;
}
.staute-box .index-title,
.service-box .index-title{
  animation: title-skew 1s linear 0s 1 forwards;
}
.index-service-box.active .index-service-title {
    animation: fade .5s linear .3s 1 forwards;
}
#index-serivce .index-title-box.active .index-title,
#index-project .index-title-box.active .index-title{
  animation: title-skew 1s linear 0s 1 forwards;
}
.service-list-box{
   animation: fade .5s linear 0s 1 forwards;
}
.service-list-box .index-service-title {
    animation: fade .5s linear .3s 1 forwards;
}
@keyframes fadeInUp2 {
  from {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

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

@keyframes title-skew {
  from {
    opacity: 0;
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }

  to {
    opacity: 1;
      -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
}


.service-page-info-img{
  animation: fade 1s linear 0s 1 forwards;
}
.staute-page-edit{
  animation: fade 1s linear 0s 1 forwards;
}