/*
|----------------------------------------------------------------
| header
|----------------------------------------------------------------
*/
.bnr .wrapper  {
  background-image: url(../images/architecture/Exterior_1.jpg);
  height: 100vh;
}

.top-menu > a {
  z-index: 1;
}

.top-menu {
  padding: 50px 70px 0px;
  /* padding-right: 70px; */
  align-items: center;
}
.top-menu-container {
  padding-top: 0px;
}
.bnrTopMenu .register-btn {
  border: 1.5px solid #373E29;
  color: #373E29;
}
.burger-menu .line {
  background-color: #373E29;
}

/*
|----------------------------------------------------------------
| ARCHITECTURE-intro
|----------------------------------------------------------------
*/
.architecture-intro {
  padding: 150px 9vw 210px;
}
.architecture-intro .detail{ 
  width: 96%;
}
.architecture-intro .exterior-birdeye {
  margin: 190px auto 194px;
}
.architecture-intro .Biophilic-design {
  text-align: center;
}
.architecture-intro .Biophilic-design h3 {
  font-size: 36px;
  line-height: 44px;
  margin: 48px auto 0px;
  width: 65%;
}

/*
|----------------------------------------------------------------
| for-family
|----------------------------------------------------------------
*/
.for-family {
  padding: 200px 9vw 310px;
  background-color: #373E29;
}
.for-family .exterior {
  margin-bottom: 150px;
} 
.for-family h2 {
  color: #FFFFFF;
}
.for-family h3 {
  font-size: 36px;
  line-height: 44px;
  margin-top: 40px;
  margin-bottom:50px ;
}
.for-family .detail {
  color: #FFFFFF;
  width: 96%;
}

/*
|----------------------------------------------------------------
| lifestle --Flickity
|----------------------------------------------------------------
*/
.lifestyle {
  margin-left: 9vw;
  margin-bottom: 200px;
}
.lifestyle .wrapper {
  margin-top: -160px;
}
.carousel-cell {
  width: 1560px;
  height: 761px;
  margin-right: 110px;
  counter-increment: carousel-cell;
}
.lifestyle .carousel-cell:nth-child(1) {
  background-image: url(../images/architecture/Exterior_4.jpg);
} 
.lifestyle .carousel-cell:nth-child(2) {
  background-image: url(../images/architecture/Exterior_2.jpg);
} 

.carousel-container {
  overflow: hidden;

}

.circle-cursor {
  width: 260px;
  height: auto;
  z-index: 100;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .2s cubic-bezier(.25,.74,.22,.99), transform 1s cubic-bezier(.25,.74,.22,.99);
  pointer-events: none;
}


/* counter */
.lifestyle .content-row {
  padding: 0px 5vw 90px;
  align-items: flex-start;
}
.lifestyle .count-wrapper {
  width: 60px;
  transform: rotate(90deg) translate(-25px, -35%);
  transform-origin: left top;
}

.lifestyle .counter {
  font-size: 60px;
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  color: #9A9E8A;
  margin-bottom: -15px;
  margin-left: 40px;
}

.lifestyle .counter .total-items {
  font-size: 30px;
}

.lifestyle .count div{
  transform: rotate(-90deg);

}


/*
|----------------------------------------------------------------
| Query media
|----------------------------------------------------------------
*/

@media (max-width: 1890px) {
  
  /* sync flicity */
  .carousel-cell {
    width: 1420px;
    height: 693px;
    margin-right: clamp(60px,6vw,110px);
  }
}

@media (max-width: 1700px) { 
  .architecture-intro {
    padding: clamp(80px,8vw,150px) 9vw clamp(125px,9.5vw,210px);
  }
  .architecture-intro .exterior-birdeye {
    margin: clamp(115px,9vw,190px) auto clamp(117px,9.1vw,194px);
  }

  .for-family h3,
  .architecture-intro .Biophilic-design h3 {
    font-size: clamp(24px,2.1vw,36px);
    line-height: clamp(32px,2.9vw,44px);
  }

  .for-family {
    padding: clamp(120px,9.3vw,200px) 9vw clamp(180px,20vw,310px);
  }
  .for-family .exterior {
    margin-bottom: clamp(80px,8vw,150px);
  }
  .for-family h3 {
    margin-top:  clamp(20px,2vw,40px);
    margin-bottom: clamp(30px,2.5vw,50px);
  }

  /* lifestyle */
  .lifestyle {
    margin-left: 9vw;
    margin-bottom: clamp(120px,10vw,200px);
  }

  /* sync flickity */
  /* counter */
  .lifestyle .count-wrapper {
    width: 47px;
  }
  .lifestyle .counter {
    font-size:clamp(40px,3.5vw, 60px);
  }

  .carousel-cell {
    width: 1260px;
    height: 615px;
  }
}

@media (max-width: 1500px) { 
  .architecture-intro {
    padding: clamp(80px,8vw,150px) 5vw clamp(125px,9.5vw,210px);
  }

  /* sync flicity */
  
  /* counter */
  .lifestyle .count-wrapper {
    width: 48px;
  }

  .carousel-cell {
    width: 1100px;
    height: 537px;
  }


}

@media (max-width: 1300px) { 

  .lifestyle .count-wrapper {
    width: 43px;
  }
  .carousel-cell {
    width: 940px;
    height: 459px;
  }
}

@media (max-width: 1100px) { 
  .lifestyle .count-wrapper {
    width: 38px;
  }
  .carousel-cell {
    width: 780px;
    height: 380.5px;
  }
}

@media (max-width: 991px) {
  .desktop-version991 {
    display: none!important;
  }
  .mobile-version991 {
    display: block;
  }
}

@media (max-width: 900px) { 
  .lifestyle .count-wrapper {
    width: 33px;
  }
  .carousel-cell {
    width: 620px;
    height: 302.4px;
  }

}

@media (max-width: 767px) {
  h5 {
    font-size: 14px;
    line-height: 23px;
    color: #48503A;
  }
  .top-menu {
    padding: 30px 5% 0px;
  }
  .for-family h3, .architecture-intro .Biophilic-design h3 {
    font-size: 30px;
    line-height: 36px;
  }
  .architecture-intro .Biophilic-design h3 {
    width: 68%;
    margin-top: 24px;
    margin-bottom: 0px!important;
  }

  /*  architecture-intro*/
  .architecture-intro {
    padding: 100px 0px 117px;
  }
  .architecture-intro .row {
    padding: 0px 12vw;
  }
  .architecture-intro .detail {
    width: 100%;
  }
  .architecture-intro .exterior-birdeye {
    margin: 93px 0 95px;
  }
  /* forfamily */
  .for-family {
    padding: 60px 5vw 132px;
  }
  .for-family .row {
    padding-left: 7vw;
    padding-right: 7vw;
  }
  .for-family h2 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 0px;
  }
  .for-family .exterior {
  margin: 66px 0 31px;
  }
  .for-family h3 {
    margin: 0px 0px 25px;
  }
  .for-family .detail {
    width: 101%;
  }

  /* lifestyle */
  .lifestyle {
    margin: -60px 5vw 120px;
  }
  .lifestyle img:first-of-type {
    margin-bottom: 10px;
  }

}