/* CSS Document */


/***********************************************************/
/************************* facility ************************/


.section-facility{ background-color: #D9D9D9; background-image: url('../images/facility/bg-facility.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center bottom; width: 100%; overflow: hidden; }


.divFacility-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -15px; margin-right: -15px;
}
.divFacility-col-left{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding-left: 15px; padding-right: 15px;
}
.divFacility-col-right{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 66.666666%;
  flex: 0 0 66.666666%;
  max-width: 66.666666%;
  padding-left: 15px; padding-right: 15px;
}


.divFacility-header{ margin-bottom: 100px; }
.divFacility-intro{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; position: relative; padding-left: 40px; }
.divFacility-intro::before{ content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-color: var(--primary2); }


.divFacility-nav ul{ display: flex; flex-direction: column; gap: 25px; }
.divFacility-nav ul li a{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; color: var(--black); }
.divFacility-nav ul li a.active,
.divFacility-nav ul li a:hover{ color: var(--primary2); }



@media (max-width: 991px) {

  .divFacility-header{ margin-bottom: 50px; }

  .divFacility-intro{ padding-left: 25px; }
  .divFacility-intro::before{width: 6px; }

  .divFacility-nav ul{ gap: 20px; }

}
@media (max-width: 576px) {

  .divFacility-col-left,
  .divFacility-col-right{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .divFacility-nav ul{ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; margin-bottom: 40px; flex-direction: row; }

}

/***********************************************************/
/***********************************************************/

.divGallery-item img{ margin-bottom: 50px; }
.divGallery-item figure figcaption{ display: none; flex-flow: row wrap; }
.divGallery-item figure figcaption .title{ width: 250px; font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; }
.divGallery-item figure figcaption p{ width: calc(100% - 250px); font-size: 15px; line-height: 1.6; font-weight: 300; }



.divFacility--gallery{ position: relative; width: 175%; }
.divFacility--gallery .swiper-button-prev{ left: -5%; }
.divFacility--gallery .swiper-button-next{ right: 20%; }


.divGallery-slide .swiper-slide-active .divGallery-item figure figcaption{ display: flex; }



@media (max-width: 1999px) {

  .divFacility--gallery{ width: 135%; }
  .divFacility--gallery .swiper-button-prev{ left: -7%; }
  .divFacility--gallery .swiper-button-next{ right: 19%; }


}
@media (max-width: 1599px) {

  .divFacility--gallery{ width: 135%; }
  .divFacility--gallery .swiper-button-prev{ left: -8%; }
  .divFacility--gallery .swiper-button-next{ right: 24%; }


}
@media (max-width: 1199px) {

  .divGallery-item img{ margin-bottom: 30px; }
  .divGallery-item figure figcaption .title{ width: 200px; }
  .divGallery-item figure figcaption p{ width: calc(100% - 200px); }

  .divFacility--gallery{ width: 150%; }
  .divFacility--gallery .swiper-button-prev{ left: -8%; }
  .divFacility--gallery .swiper-button-next{ right: 37%; }

}
@media (max-width: 991px) {


  .divGallery-item figure figcaption .title{ width: 100%; margin-bottom: 10px; }
  .divGallery-item figure figcaption p{ width: 100%; }

  .divFacility--gallery{ width: 130%; }
  .divFacility--gallery .swiper-button-prev{ left: -9%; }
  .divFacility--gallery .swiper-button-next{ right: 17%; }

}
@media (max-width: 820px) {

  .divFacility--gallery{ width: 120%; }

}
@media (max-width: 767px) {

  .divFacility--gallery{ width: 135%; }

}
@media (max-width: 576px) {

  .divFacility-detail .div-container{ padding-left: 0; padding-right: 0; }
  .divFacility-nav,
  .divGallery-item{ padding-left: 15px; padding-right: 15px; }
  
  .divFacility--gallery{ width: 100%; }

}



/***********************************************************/
/***********************************************************/

body.single-facility .menu-item-object-facility a{
  color: var(--primary);
}
body.single-facility .menu-item-object-facility a::before,
body.single-facility .menu-item-object-facility:hover a::before{
  transform: scaleX(1) translateZ(0); transform-origin: 0 50%;
}

