.application-class-list{
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.application-class-list a{
    -webkit-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -moz-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -ms-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
.application-class-box.active .application-class-list a{
  animation: past .5s linear 0s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(1) a{
  animation: past 1s linear 1.1s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(2) a{
  animation: past 1s linear .9s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(3) a{
  animation: past 1s linear .7s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(4) a{
  animation: past 1s linear 0.5s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(5) a{
  animation: past 1s linear .3s 1 backwards;
}
.application-class-box.active .application-class-list:nth-child(6) a{
  animation: past 1s linear .1s 1 backwards;
}
.application-class-move.move-active .application-class-list a{
  -webkit-transform: perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    -moz-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    -ms-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
}
/*.application-class-list{
  transition: all .5s ease;
  transform: rotate3d(0, 1, 0 ,0deg) translate3d(0, 0, 66px)
}
*/
@keyframes past {
 from {
     -webkit-transform: perspective(550px) translate3d(-40%,0%,0) rotateY(-70deg);
    -moz-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-70deg);
    -ms-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-70deg);
    transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-70deg);
        -moz-transform-origin: 50% 50% 0;
    -ms-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
  }

  to {
    -webkit-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -moz-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -ms-transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    transform: perspective(550px) translate3d(0,0,0) rotateY(0);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
  }
}
.application-class-list.past a{
  -webkit-transform: perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    -moz-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    -ms-transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
    transform:  perspective(550px) translate3d(-40%,0%,0) rotateY(-60deg);
        -moz-transform-origin: 50% 50% 0;
    -ms-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
.application-class-list.future a{
  -webkit-transform: perspective(550px) translate3d(40%,0%,0) rotateY(60deg);
    -moz-transform: perspective(550px) translate3d(40%,0%,0) rotateY(60deg);
    -ms-transform: perspective(550px) translate3d(40%,0%,0) rotateY(60deg);
    transform: perspective(550px) translate3d(40%,0%,0) rotateY(60deg);
        -moz-transform-origin: 0 50% 0;
    -ms-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
}
.application-class-move{
      position: absolute;
}

/*-----------------------------------------------------------------*/
.header-style4{
  transition: all .5s ease;
   border-bottom: 0px solid #c0a264;
}
.header-style4.header2{

  border-bottom: 1px solid #c0a264;
}

.header-style4.header2 .header-line-box{
  display: none;
}
.header-style4.header2 .header-link-box{
  display: none;
}


/*---------------------------------------------------------------------*/
.index-service-title,
.index-slong1,
.index-slong2,
.service-img-box,
.news-list-img-box,
.news-list-info-box,
.news-list-img2,
.news-style3 .news-list,
.news-page-title-box,
.news-page-info-box,
.products-bg2-box,
.products-bg2-box span,
.products-info-logo,
.products-ifno-article,
.products-box,
.products-modern-title,
.products-modern-p-box,
.products-our-title,
.products-our,
.products-page-info-box,
.application-class-box,
.application-narrative-box,
.application-narrative-p,
.application-narrative-title,
.application-s-class-box,
.about-us-img,
.about-us-info-box,
.about-history-title,
.about-history-img-box,
.about-vision-info-box,
.about-vision-img-box,
.about-mission-list-box,
.about-mission-title,
.about-why-list-box,
.about-core-img,
.about-core,
.about-we-are-title,
.about-we-are-p,
.about-we-are-p2,
.contact-box,
.map-box,
.application2-box
{
  opacity: 0;
}
.products-modern-line,
.about-we-are-line,
.about-line,
.service-line{
  transform: scale(0,1); 
}
.index-service-box.active .index-service-title{
  animation: fade .8s ease 0s 1 forwards;
}

.index-service-box.active .index-service-list{
  opacity: 1;
  box-shadow: rgba(0,0,0,0.8)7px 7px 11px;
  transition-delay: .2s;
}

.index-slong-box.active .index-slong1{
  animation: index-slong 1s linear 0s 1 forwards;
}
.index-slong-box.active .index-slong2{
  animation: index-slong 1s linear .2s 1 forwards;
}

.service-box.active .service-img-box,
.about-us-box.active .about-us-img{
  animation: fadeInLeft .8s ease 0s 1 forwards;
}
.service-box.active .service-info-box,
.about-us-box.active .about-us-info-box{
  animation: fadeInRight .8s ease-out 0s 1 forwards;
}
.service-line{
  transform-origin: left;
}
.service-box.active .service-line{
  animation: line .5s ease 0.4s 1 forwards;
}

.news-style1 .news-list:nth-child(odd).active .news-list-img-box,
.news-style1 .news-list:nth-child(even).active .news-list-info-box,
.news-style2 .news-list:nth-child(odd).active .news-list-img-box,
.news-style2 .news-list:nth-child(even).active .news-list-info-box{
  animation: fadeInRight .8s ease 0s 1 forwards;
}
.news-style1 .news-list:nth-child(odd).active .news-list-info-box,
.news-style1 .news-list:nth-child(even).active .news-list-img-box,
.news-style2 .news-list:nth-child(odd).active .news-list-info-box,
.news-style2 .news-list:nth-child(even).active .news-list-img-box{
  animation: fadeInLeft .8s ease 0s 1 forwards;
}

.news-style1 .news-list.active .news-list-img2{
  animation: fade .8s ease .2s 1 forwards;
}
.news-style3 .news-list-img-box,
.news-style3 .news-list-info-box{
  opacity: 1;
}
.news-style3 .news-list.active:nth-child(3n+1){
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.news-style3 .news-list.active:nth-child(3n+2){
  animation: fadeInRight .8s ease .1s 1 forwards;
}
.news-style3 .news-list.active:nth-child(3n+3){
  animation: fadeInRight .8s ease .2s 1 forwards;
}

.news-page-box.active .news-page-title-box{
  animation: fade .8s ease 0s 1 forwards;
}

.news-page-box.active .news-page-info-box{
  animation: fadeInUp .8s ease .2s 1 forwards;
}

.products-box.active .products-bg2-box{
  animation: fadeInLeft .8s ease 0s 1 forwards;
}

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

.products-box.active .products-info-logo{
  animation: fadeInRight .8s ease 0s 1 forwards;
}

.products-box.active .products-ifno-article{
  animation: fadeInUp .8s ease .2s 1 forwards;
}
.products-box.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}

.products-modern.active .products-modern-title{
  animation: fadeInDown .8s ease 0s 1 forwards;
}

.products-modern.active .products-modern-line{
  animation: line .8s linear 0s 1 forwards;
}
.products-modern.active .products-modern-p-box{
 animation: fadeInUp .8s ease 0s 1 forwards;
}
.products-our-box.active  .products-our-title{
  animation: fade .8s ease 0s 1 forwards;
}
.products-our-box.active  .products-our{
  animation: fadeInUp .8s ease 0s 1 forwards;
}

.products-page-info-box{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.application-class-box.active{
  opacity: 1;
}

.application-narrative-box.active{
  animation: fade .8s ease 0s 1 forwards;
}
.application-narrative-box.active .application-narrative-p{
  animation: fadeInRight .8s ease .2s 1 forwards;
}
.application-narrative-box.active .application-narrative-title{
  animation: fadeInLeft .8s ease .2s 1 forwards;
}
.application-s-class-box.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.application2-box.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.about-line{
  transform-origin: left;
}
.about-us-box.active .about-line,
.about-vision-box.active .about-line{
  animation: line .5s ease .2s 1 forwards;
}
.about-history-box.active .about-history-title{
  animation: fade .8s ease 0s 1 forwards;
}
.about-history-box.active .about-history-img-box{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.about-vision-box.active .about-vision-info-box{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.about-vision-box.active .about-vision-img-box{
  animation: fade .8s ease 0s 1 forwards;
}
.about-mission-box.active .about-mission-title,
.about-why-us-box.active .about-mission-title{
  animation: fade .8s ease 0s 1 forwards;
}
.about-mission-box.active .about-mission-list-box,
.about-why-us-box.active .about-why-list-box{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.about-core-box.active .about-core-img{
  animation: fade .8s ease 0s 1 forwards;
}
.about-core-box.active .about-core:nth-child(1){
  animation: fadeInLeft .8s ease .2s 1 forwards;
}
.about-core-box.active .about-core:nth-child(3){
  animation: fadeInRight .8s ease .2s 1 forwards;
}

.about-we-are.active .about-we-are-title{
  animation: fade .8s ease 0s 1 forwards;
}
.about-we-are.active .about-we-are-line{
  animation: line .5s ease 0s 1 forwards;
}
.about-we-are.active .about-we-are-p,
.about-we-are.active .about-we-are-p2{
  animation: fadeInUp .8s ease .2s 1 forwards;
}
.contact-box.active{
  animation: fadeInUp .8s ease 0s 1 forwards;
}
.map-box.active{
  animation: fade .8s ease 0s 1 forwards;
}

.index-banner-slick-box.slick-active .about-banner-info-img{
  opacity: 1;
  transform: translateX(0);
}
.about-banner-info-img{
  opacity: 0;
  transform: translateX(-50%);
  transition: all 1s ease;
}
.index-banner-slick-box.slick-active .about-slong1,
.index-banner-slick-box.slick-active .about-slong2,
.index-banner-slick-box.slick-active .about-article{
  opacity: 1;
  transform: translateY(0);
}
.about-slong1{
  opacity: 0;
  transform: translateY(20%);
  transition: all 1s ease;
  transition-delay: 0.2s;
}
.about-slong2{
  opacity: 0;
  transform: translateY(20%);
  transition: all 1s ease;
  transition-delay: 0.4s;
}
.index-banner-slick-box .about-article{
  opacity: 0;
  transform: translateY(20%);
  transition: all 1s ease;
  transition-delay: 0.6s;
}
.index-banner-slick-box.slick-active:nth-child(1) .about-banner-info-img{
  animation: index-banner-slick-box 1s ease 0s 1 both;
}
.index-banner-slick-box.slick-active:nth-child(1) .about-slong1{
  animation: about-slong1 1s ease .2s 1 both;
}
.index-banner-slick-box.slick-active:nth-child(1) .about-slong2{
  animation: about-slong1 1s ease .4s 1 both;
}
.index-banner-slick-box.slick-active:nth-child(1) .about-article{
  animation: about-slong1 1s ease .6s 1 both;
}
@keyframes about-slong1 {
 from {
    opacity: 0;
  transform: translateY(20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes index-banner-slick-box {
 from {
     opacity: 0;
  transform: translateX(-50%);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}