.banner-title1,
.banner-title2,
.about1-title,
.about1-title2,
.about-letter-bg,
.about-letter-info,
.about-letter-title,
.about2-title2,
.about2-title3,
.about-2-info-p,
.about-3-title,
.about-3-p-box,
.spirit1-title,
.spirit1-p-box,
.spirit3-title,
.spirit3-data-list ul,
.vr-title,
.vr-p,
.vr-title2,
.vr-img1,
.vr-img2,
.vr-title3,
.vr-p2,
.vr-img4 img,
.vr-img-tr,
.vr-img-6 img,
.vr-img-last img,
.materials-title,
.materials-list1-title,
.materials-list1-p p,
.materials-list1-last-p p,
.materials-list1-img,
.materials-list1-img span,
.materials-list2-img,
.materials-list2-img span,
.materials-title2,
.materials-img2 img,
.materials-list2-title,
.materials-list2-box li,
.materials-list3-img1,
.materials-list3-img2,
.materials-list3-img3,
.materials-list3-img-title,
.materials-list4-img,
.materials-list2-s-title,
.materials-list4-info p,
.materials-list4-info li,
.materials-list5-info-left p,
.materials-list5-img1-box,
.materials-list5-info-left,
.materials-list5 li,
.materials-list5,
.materials-list5-info2 li,
.materials-list-s-title,
.materials-list5-respectively ul,
.materials-list5-b-title,
.materials-door-img,
.materials-door-info-img,
.materials-door-info-p,
.bathroom-img1,
.bathroom-img2,
.bathroom-img3,
.bathroom-title,
.bathroom-p,
.materials-kitchen-img img,
.materials-title4,
.m10-list-img1-1,
.m10-list-img1-2,
.m10-list-img1-3,
.m10-2-img,
.m11-drink-img,
.m11-drink-title,
.m11-drink-list li{
  opacity: 0;
}
/*header*/

.header-contact-box{
	animation: InDown 0.5s linear 0s 1 forwards;
}

.slick-active .banner-title1{
  animation: fade 0.8s linear 0.3s 1 forwards;
}
.slick-active .banner-title2{
  animation: fade 0.8s linear 0.8s 1 forwards;
}

.slick-active .banner-img{
  animation: scale-b-fade 0.8s linear 0s 1 forwards;
}

.banner-arrow{
  animation: banner-arrow 3s linear 0s infinite;
}


.header-box.fixd{
  position: fixed;
  top: 0;
  z-index: 999;
  animation: fadeInDown .5s linear 0s 1 forwards;
  box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 2px;
}

@-webkit-keyframes banner-arrow {
  0% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  50%{
    -webkit-transform: translateY(0);
    -webkit-transform: translateY(0);
  }


   100%{
   -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
 
}


/* -------about------ */
.about-1.active .about1-title{
  animation: scale-b-fade 0.8s linear 0s 1 forwards;
}

.about-1.active .about1-title2{
  animation:  fadeInUp2 0.5s linear .3s 1 forwards;
}

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

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


.about-1.active .about-letter-bg{
  animation: fade 1s linear 0s 1 forwards;
}
.about-1.active .about-letter-title{
  animation: fade .8s linear 0.5s 1 forwards;
}
.about-1.active .about-letter .about-letter-info:nth-child(2){
  animation: fade .8s linear 0.8s 1 forwards;
}
.about-1.active .about-letter .about-letter-info:nth-child(3){
  animation: fade .8s linear 1s 1 forwards;
}
.about-1.active .about-letter .about-letter-info:nth-child(4){
  animation: fade .8s linear 1.3s 1 forwards;
}
.about-1.active .about-letter .about-letter-info:nth-child(5){
  animation: fade .8s linear 1.5s 1 forwards;
}

.about2-img{
  overflow: hidden;
}

.about-2.active .about2-title2{
  animation: fadeInDown 0.8s linear 0s 1 forwards;
}
.about-2.active .about2-title3{
  animation: fade .8s linear 0.5s 1 forwards;
}

.about2-img img{
  transform: scale(1.2);
}
.about-2.active .about2-img img{
  transform-origin: right;
  animation: scale-b .8s linear 0s 1 forwards;
}
.about-2-info-title{
  transform: scale(1.05);
  letter-spacing: 5px;
}
.about-2 .about-2-info-title.active{
  animation: word .8s linear 0s 1 forwards;
}
.a2-1-active .about-2-info-p:nth-child(2){
  animation: fade .8s linear 0.3s 1 forwards;
}
.a2-1-active .about-2-info-p:nth-child(3){
  animation: fade .8s linear 0.5s 1 forwards;
}
.a2-1-active .about-2-info-p:nth-child(5){
  animation: fade .8s linear 0.3s 1 forwards;
}
.a2-1-active .about-2-info-p:nth-child(6){
  animation: fade .8s linear 0.5s 1 forwards;
}


@keyframes word {
  from {
    letter-spacing: 5px;
    transform: scale(1.05);
  }

  to {
    letter-spacing: 2px;
    transform: scale(1);
  }
}


.about-3-info.active .about-3-title:nth-child(1){
   animation: fadeInUp .8s linear 0s 1 forwards;
}
.about-3-info.active .about-3-title:nth-child(2){
   animation: fadeInUp .8s linear .8s 1 forwards;
}
.about-3-info.active .about-3-p-box:nth-child(3){
   animation: fade .8s linear 1.3s 1 forwards;
}

.about-4-img{
  overflow: hidden;
}

.about-4.active .about-4-img img{
    transform-origin: bottom;
  animation: scale-b .8s linear 0s 1 forwards;
}
.about-4.active .about-2-info-title.active{
  animation: word .8s linear 0.5s 1 forwards;
}

.about-4.active .about-2-info-p{
  animation: fade .8s linear .7s 1 forwards;
}



/* ------spirit----- */
.spirit1.active .spirit1-title{
  animation: fade .8s linear 0s 1 forwards;
}

.spirit1.active .spirit1-p-box{
  animation: fade .8s linear 0.3s 1 forwards;
}

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

.spirit2.active .spirit1-p-box{
  animation: fade .8s linear 0.3s 1 forwards;
}
.spirit3-title.active{
   animation: fade .8s linear 0s 1 forwards;
}


.spirit3-data-list.active ul:nth-child(1){
   animation: fade .8s linear .5s 1 forwards;
}
.spirit3-data-list.active ul:nth-child(2){
   animation: fade .8s linear .8s 1 forwards;
}
.spirit3-data-list.active ul:nth-child(3){
   animation: fade .8s linear 1s 1 forwards;
}


/* -----vr----- */
.vr-title.active{
  animation: fade .8s linear 0s 1 forwards;
}
.vr-p.active{
  animation: fade .8s linear 0.3s 1 forwards;
}
.vr-title2.active{
   animation: fade .8s linear 0s 1 forwards;
}

.vr-img1.active{
    animation: fade .8s linear 0s 1 forwards;
}


.vr-img2.active{
    animation: fade .8s linear 0s 1 forwards;
}
.v3-active .vr-title3{
  animation: fade .8s linear 0s 1 forwards;
}

.v3-active .vr-p2{
    animation: fade .8s linear 0.3s 1 forwards;
}
.vr-img4{
  overflow: hidden;
}
.vr-img4 img{
  transform: scale(1.2);
}
.vr-img-6{
  overflow: hidden;
}
.vr-img4.active img,
.v6-active img,
.v7-active img,
.v8-active img,
.v9-active img,
.v11-active img
{
   animation: scale-b-fade .8s linear 0s 1 forwards;
}

.v5-active .vr-img-tr:nth-child(1),
.v10-active .vr-img-tr:nth-child(1){
  animation: fadeInLeft .8s linear 0s 1 forwards;
}

.v5-active .vr-img-tr:nth-child(2),
.v10-active .vr-img-tr:nth-child(2){
  animation: fadeInRight .8s linear 0s 1 forwards;
}

.vr-img-last{
  overflow: hidden;
}

/* ---------materials------- */

.m1-active .materials-title:nth-child(2){
   animation: fadeInUp .8s linear 0s 1 forwards;
}

.m1-active .materials-title:nth-child(3){
   animation: fadeInUp .8s linear 0.5s 1 forwards;
}

.m2-1-active .materials-list1-title,
.m2-2-active .materials-list1-title,
.m2-3-active .materials-list1-title,
.m2-4-active .materials-list1-title{
  animation: fade .8s linear 0s 1 forwards;
}

.m2-1-active .materials-list1-p p,
.m2-2-active .materials-list1-p p,
.m2-3-active .materials-list1-p p,
.m2-4-active .materials-list1-last-p p{
  animation: fade .8s linear 0.3s 1 forwards;
}


.m2-1-active .materials-list1-img:nth-child(1),
.m2-3-active .materials-list1-img:nth-child(1){
  animation: fadeInLeft .8s linear 0.3s 1 forwards;
}
.m2-1-active .materials-list1-img:nth-child(1) span,
.m2-3-active .materials-list1-img:nth-child(1) span{
    animation: fade .8s linear 1s 1 forwards;
}
.m2-1-active .materials-list1-img:nth-child(2),
.m2-3-active .materials-list1-img:nth-child(2){
  animation: fadeInLeft .8s linear 0.5s 1 forwards;
}

.m2-1-active .materials-list1-img:nth-child(2) span,
.m2-3-active .materials-list1-img:nth-child(2) span{
    animation: fade .8s linear 1s 1 forwards;
}


.m2-2-active .materials-list2-img:nth-child(1){
  animation: fadeInRight .8s linear 0.5s 1 forwards;
}
.m2-2-active .materials-list2-img:nth-child(1) span{
    animation: fade .8s linear 1s 1 forwards;
}
.m2-2-active .materials-list2-img:nth-child(2){
  animation: fadeInRight .8s linear 0.3s 1 forwards;
}

.m2-2-active .materials-list2-img:nth-child(2) span{
  animation: fade .8s linear 1s 1 forwards;
}

.m3-active .materials-title2:nth-child(1){
  animation: fade .8s linear 0s 1 forwards;
}
.m3-active .materials-title2:nth-child(2){
  animation: fade .8s linear 0.3s 1 forwards;
}
.materials-img2{
  overflow: hidden;
}

.m3-1-active img{
  animation: scale-b-fade 0.8s linear 0s 1 forwards;
}

.m4-active .materials-list2-title{
  animation: word2 0.8s linear 0s 1 forwards;
}


@keyframes word2 {
  from {
    opacity: 0;
    letter-spacing: 5px;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    letter-spacing: 2px;
    transform: scale(1);
  }
}

.m4-active .materials-list2-box li:nth-child(1){
  animation: fade .8s linear 0.3s 1 forwards;
}
.m4-active .materials-list2-box li:nth-child(2),
.m4-active .m10-list-img1-1{
  animation: fade .8s linear 0.5s 1 forwards;
}
.m4-active .materials-list2-box li:nth-child(3),
.m4-active .m10-list-img1-2{
  animation: fade .8s linear 0.7s 1 forwards;
}
.m4-active .materials-list2-box li:nth-child(4),
.m4-active .m10-list-img1-3{
  animation: fade .8s linear 0.9s 1 forwards;
}
.m4-active .materials-list2-box li:nth-child(5){
  animation: fade .8s linear 1.1s 1 forwards;
}

.m4-active .materials-list3-img1{
   animation: fade .8s linear 0.3s 1 forwards;
}
.m4-active .materials-list3-img2{
   animation: fade .8s linear 0.5s 1 forwards;
}
.m4-active .materials-list3-img3{
  animation: fade .8s linear 0.7s 1 forwards;
}

.m4-active .materials-list3-img-title{
  animation: fade .8s linear 0s 1 forwards;
}

.m4-2-active .materials-list4-img{
  animation: fade .8s linear 0s 1 forwards;
}

.m4-2-active .materials-list2-s-title{
  animation: fade .8s linear 0s 1 forwards;
}


.m4-2-active .materials-list4-info p,
.m4-2-active .materials-list4-info li{
   animation: fade .8s linear 0.3s 1 forwards;
}
.m4-active .materials-list2-s-title{
  animation: fade .8s linear 0s 1 forwards;
}

.m5-active .materials-title2:nth-child(1){
  animation: fade .8s linear 0s 1 forwards;
}

.m5-active .materials-title2:nth-child(2){
  animation: fade .8s linear 0.3s 1 forwards;
}

.m5-1-active .materials-list2-s-title{
  animation: fade .8s linear 0s 1 forwards;
}

.m5-1-active .materials-list5-info-left p{
  animation: fade .8s linear 0.3s 1 forwards;
}

.m5-1-active .materials-list5-img1-box{
  animation: fadeInRight .8s linear 0s 1 forwards;
}

.m5-1-active .materials-list5-info-left{
  animation: fadeInLeft .8s linear 0s 1 forwards;
}

.m5-1-active .materials-list5-info1:nth-child(2) .materials-list5-info-left{
  animation: fadeInLeft .8s linear 0.5s 1 forwards;
}
.m5-1-active .materials-list5{
  animation: fade .8s linear 0s 1 forwards;
}
.m5-1-active .materials-list5 li:nth-child(1){
  animation: fade .8s linear 0.5s 1 forwards;
}
.m5-1-active .materials-list5 li:nth-child(2){
  animation: fade .8s linear 0.7s 1 forwards;
}
.m5-1-active .materials-list5 li:nth-child(3){
  animation: fade .8s linear 0.9s 1 forwards;
}


.m5-1-active .materials-list5-info2 li:nth-child(1){
  animation: fade .8s linear 0.5s 1 forwards;
}
.m5-1-active .materials-list5-info2 li:nth-child(2){
  animation: fade .8s linear 0.8s 1 forwards;
}
.materials-list-s-title.m5-1-active{
  animation: fade .8s linear 0s 1 forwards;
}
.materials-list5-respectively.m5-1-active ul:nth-child(1){
  animation: fade .8s linear 0s 1 forwards;
}
.materials-list5-respectively.m5-1-active ul:nth-child(2){
  animation: fade .8s linear .3s 1 forwards;
}
.materials-list5-respectively.m5-1-active ul:nth-child(3){
  animation: fade .8s linear .5s 1 forwards;
}

.materials-list5-b-title.m5-1-active{
  animation: fade .8s linear 0s 1 forwards;
}

.m5-1-active .materials-title3{
  animation: fadeInDown .8s linear 0s 1 forwards;
}

.m6-active .materials-door-img{
  animation: fade .8s linear 0s 1 forwards;
}

.m6-active .materials-door-info-img{
  animation: fade .8s linear 0.3s 1 forwards;
}

.m6-active .materials-door-info-p{
  animation: fade .8s linear 0.5s 1 forwards;
}

.m7-active .bathroom-img1{
  animation: fade .8s linear 0s 1 forwards;
}
.m7-active .bathroom-img2{
  animation: fade .8s linear 0.3s 1 forwards;
}
.m7-active .bathroom-img3{
  animation: fade .8s linear 0s 1 forwards;
}
.m7-active .bathroom-title{
  animation: fade .8s linear 0.3s 1 forwards;
}
.m7-active .bathroom-p{
  animation: fade .8s linear 0.5s 1 forwards;
}

.materials-kitchen-img{
  overflow: hidden;
}
.materials-kitchen-img.m8-active img{
  animation: scale-b-fade .8s linear 0s 1 forwards;
}

.m9-active .materials-title2:nth-child(1){
    animation: fade .8s linear 0s 1 forwards;
}
.m9-active .materials-title2:nth-child(2){
    animation: fade .8s linear 0.3s 1 forwards;
}
.m9-active .materials-title4{
    animation: fade .8s linear 0.5s 1 forwards;
}
.m4-active .m10-2-img:nth-child(1){
    animation: fade .8s linear 0s 1 forwards;
}
.m4-active .m10-2-img:nth-child(2){
    animation: fade .8s linear 0.3s 1 forwards;
}
.m4-active .m11-drink-img{
  animation: fade .8s linear 0s 1 forwards;
}
.m4-active .m11-drink-title{
  animation: fade .8s linear 0s 1 forwards;
}
.m4-active .m11-drink-list li:nth-child(2){
  animation: fade .8s linear 0.2s 1 forwards;
}
.m4-active .m11-drink-list li:nth-child(3){
  animation: fade .8s linear 0.3s 1 forwards;
}
.m4-active .m11-drink-list li:nth-child(4){
  animation: fade .8s linear 0.4s 1 forwards;
}
.m4-active .m11-drink-list li:nth-child(5){
  animation: fade .8s linear 0.5s 1 forwards;
}
.m4-active .m11-drink-list li:nth-child(6){
  animation: fade .8s linear 0.6s 1 forwards;
}