﻿/* CSS Document */


/**********************************************************/
/************************ home ****************************/
/**********************************************************/


.introcaption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 1630px; width: 100%; }
.introcaption h1, .introcaption h2{ font-size: 70px; font-weight: 500; color: #116c5b; margin-bottom: 10px; }
.introcaption h5{ font-size: 30px; font-weight: normal; width: 50%; }

.introcaption-btn{ margin-top: 50px; }
.introcaption-btn a{ display: inline-block; background-color: #fff; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.1); font-size: 30px; color: #116c5b; font-weight: 500; width: 290px; padding: 27px 0 23px 65px; text-align: center; position: relative; border-radius: 50px; margin-right: 30px; }
.introcaption-btn i{ position: absolute; top: 5px; left: 5px; border-radius: 50%; }
.introcaption-btn i img{ width: 70px; }
.introcaption-btn a:hover{ background-color: #ff8041; color: #fff; }
.introcaption-btn a:last-of-type:hover{ background-color: #116c5b; color: #fff; }

.introcaption h5{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.divHome-banner img{ width: 100%; }

.section-home-intro .carousel-indicators{ margin: 0; bottom: 3px; }
.section-home-intro .carousel-indicators li{ width: 100%; background-color: #116c5b; border: 0; position: relative; }
.section-home-intro .carousel-indicators li.active::before{ content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 3px; background-color: #ff8041; }





@media (max-width: 1600px){
  
  .introcaption h1, .introcaption h2{ font-size: 60px; }
  .introcaption h5{ font-size: 26px; }

}
@media (max-width: 1199px){
  
  .introcaption h1, .introcaption h2{ font-size: 50px; }
  .introcaption-btn{ margin-top: 30px; }
  .introcaption-btn a{ font-size: 26px; width: 240px; padding: 19px 0 15px 45px; }
  .introcaption-btn i img{ width: 50px; }


}
@media (max-width: 991px){
  
  .introcaption h1, .introcaption h2{ font-size: 44px; }
  .introcaption-btn{ margin-top: 20px; }
  .introcaption-btn a{ font-size: 24px; width: 220px; padding: 17px 0 13px 40px; margin-right: 20px; }
  .introcaption-btn i img{ width: 44px; }

}
@media (max-width: 576px){

  .divHome-banner{ background-color: #f7f8fa; padding-bottom: 30px; }
  .introcaption{ position: relative; top: 0; left: 0; transform: translate(0,0); }
  .introcaption h1, .introcaption h2{ font-size: 40px; }
  .introcaption h5{ width: 100%; }
  .introcaption-btn{ text-align: center; }
  .introcaption-btn a{ margin-bottom: 20px; margin-right: 0; }

}
@media (max-width: 320px){

  .introcaption h1, .introcaption h2{ font-size: 36px; }

}




/**********************************************************/
/**********************************************************/

.divHome-package{ background-color: #fff; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.1); border-radius: 30px; margin-bottom: 30px; margin-top: 50px; transition: all 0.5s ease; }
.divHome-package figure img{ border-top-left-radius: 30px; border-top-right-radius: 30px; }
.divHome-package--detail{ padding: 20px 30px 30px; }
.divHome-package--detail h4{ color: #006a5b; margin-bottom: 10px; }
.package-price{ font-size: 24px; color: #ffffff; margin-bottom: 20px; }
.package-price span{ font-size: 40px; font-weight: 500; color: #ff8041; }
.package-btn a{ display: inline-block; padding: 8px 30px 4px; border-radius: 30px; font-size: 28px; background-color: #808284; border: 1px solid transparent; color: #fff; margin-right: 10px; }
.package-btn a:last-of-type{ margin-right: 0; }
.package-btn a:first-of-type{ background-color: #ff8041; }
.package-btn a:hover{ border: 1px solid #006a5b; color: #006a5b; background-color: #fff; }
.divHome-package--footer{ font-size: 24px; color: #ff8041; font-weight: 500; padding: 20px 30px; border-top: 1px solid #d1d2d4; }
.divHome-package--footer a:hover{ color: #006a5b; }
.divHome-package:hover{ margin-top: 0; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; }


.slider-package .owl-carousel .owl-nav{ width: 90%; left: 50%; transform: translate(-50%,-50%); }


@media (max-width: 991px){
  
  .divHome-package{ margin-top: 30px; }
  .divHome-package:hover{ margin-top: 30px; }
  .divHome-package--detail{ padding: 20px 20px 30px; }
  .package-price{ font-size: 22px;  }
  .package-price span{ font-size: 32px; }
  .package-btn a{ font-size: 22px; }
  .divHome-package--footer{ font-size: 20px; }

}
@media (max-width: 320px){

  .slider-package{ padding: 0 20px; }
  .package-btn a{ padding: 8px 20px 4px; font-size: 18px; }
  
}

/**********************************************************/
/**********************************************************/

.info-list{ padding-top: 30px; margin-bottom: 30px; margin-left: -5px; margin-right: -5px; overflow: hidden; }
.info-list ul{ overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%; overflow-y: hidden; white-space: nowrap; position: relative; }
.info-list ul li{ display: inline-block; padding-left: 5px; padding-right: 5px; }
.info-list ul li a{ display: block; padding: 10px 30px 7px; background-color: #fff; font-size: 24px; font-weight: 500; border-radius: 30px; cursor: pointer; }
.info-list ul li a.active{ background-color: #006a5b; color: #fff; }

/* Hide scrollbar for Chrome, Safari and Opera */
.info-list ul::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.info-list ul{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

.health-info{ margin-bottom: 30px; }
.health-info img{ border-radius: 30px; margin-bottom: 20px; }
.health-info--detail h3{ color: #006a5b; margin-bottom: 10px; }
.health-info--detail .txt-more{ font-size: 24px; color: #ff8041; font-weight: 500; }
.health-info a:hover h3,
.health-info--detail h3 a:hover{ color: #ff8041; }

.health-info--detail p{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}




@media (max-width: 576px){

  .info-list ul li a{ font-size: 20px; }
  
}


/**********************************************************/
/**********************************************************/


.service-intro{ max-width: 700px; width: 100%; padding: 0 20px 20px; }
.service-intro h2{ color: #116c5b; margin-bottom: 20px; }
.service-intro--txt{ font-size: 40px; }



.section-service{ overflow: hidden; }

.allService-container{ position: relative; }


.divHome-homecare{ padding: 20px; }
.divHome-homecare h3{ color: #ff8041; margin-bottom: 10px;}



.slider-homecare ul li{ border-radius: 20px; background: #116c5b; position: relative; }
.slider-homecare ul li:first-of-type{ margin-left: 0; }
.slider-homecare ul li .f-img img{ border-top-left-radius: 20px; border-top-right-radius: 20px; }
.slider-homecare ul li .f-detail{ padding: 20px 10px; font-size: 28px; color: #fff; text-align: center; }

.slider-homecare ul li:hover, .slider-homecare ul li.active{ background: #ff8041; }


.slider-homecare .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -45px!important; }
.slider-homecare .owl-carousel .owl-stage{ left: -50px; }
.slider-homecare .owl-carousel .owl-nav{ width: 110px; top: -60px; transform: translateY(0); right: 0; }
.slider-homecare .owl-carousel .owl-nav button.owl-prev,
.slider-homecare .owl-carousel .owl-nav button.owl-next{ width: 50px; height: 50px; }
.item2{ right: 0!important;}




@media (max-width: 1600px){

  .service-intro--txt{ font-size: 32px; }

}
@media (max-width: 1199px){

  .service-intro--txt{ font-size: 30px; }

}
@media (max-width: 991px){

  .service-intro{ padding-top: 30px; }
  .service-intro--txt{ font-size: 28px; }

}
@media (max-width: 767px){
  
  .slider-homecare .owl-carousel .owl-stage.pos-right{ right: -30px!important; }
  .slider-homecare .owl-carousel .owl-stage{ left: -30px; }

}
@media (max-width: 576px){

  .service-intro--txt{ font-size: 24px; }
  
}



/**********************************************************/
/**********************************************************/


.divHome-impress{ background-color: #fff; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.1); border-radius: 30px; margin-bottom: 30px; margin-top: 30px; overflow: hidden; padding: 10px; opacity: 0.7; }
.divHome-impress--figure{ float: left; width: 40%; margin-bottom: 0; position: relative; }
.divHome-impress--detail{ float: left; width: 60%; margin-bottom: 0; position: relative; }
.divHome-impress figure img{ border-radius: 30px; }

.divHome-impress--detail{ padding: 30px; }
.divHome-impress--detail h3{ color: #006a5b; margin-bottom: 10px; }
.divHome-impress--detail a{ font-size: 24px; color: #ff8041; font-weight: 500; margin-top: 20px; }
.divHome-impress--detail p{
  font-size: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.impress-name{ font-size: 26px; font-weight: 400; margin-bottom: 5px; letter-spacing: 1.2px;}
.impress-subject{ font-size: 30px; }


.slider-impress .owl-carousel .owl-item.active .divHome-impress{ opacity: 1; }

.slider-impress .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -200px!important; }
.slider-impress .owl-carousel .owl-stage{ left: -200px; }
.slider-impress .owl-carousel .owl-nav{ width: 90%; left: 50%; transform: translate(-50%,-50%); }

.item1{ left: 0!important; right: 0!important;}

.icon-play{ position: absolute; top: calc(50% - 10px); left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; }


@media (max-width: 1600px){

  .divHome-impress--detail{ padding: 20px 30px 0; }

  .slider-impress .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -150px!important; }
  .slider-impress .owl-carousel .owl-stage{ left: -150px; }
  
}
@media (max-width: 1300px){

  .slider-impress .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -200px!important; }
  .slider-impress .owl-carousel .owl-stage{ left: -200px; }
  
}
@media (max-width: 1199px){

  .slider-impress .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -100px!important; }
  .slider-impress .owl-carousel .owl-stage{ left: -100px; }
  
  .divHome-impress--detail p{
    font-size: 26px;
    -webkit-line-clamp: 3;
  }
  .impress-subject{ font-size: 26px; }
  .impress-name{ font-size: 24px; }

  .icon-play{ width: 60px; height: 60px; }
  
}
@media (max-width: 991px){

  .divHome-impress{ margin: 30px 20px; }

  .slider-impress .owl-carousel .owl-stage.pos-right{ left: inherit!important; right: 0px!important; }
  .slider-impress .owl-carousel .owl-stage{ left: 0px; }

  .divHome-impress--detail p{ font-size: 24px; }
  .impress-subject{ font-size: 24px; }
  
}
@media (max-width: 767px){

  .divHome-impress--figure, .divHome-impress--detail{ float: none; width: 100%; }
  .divHome-impress--detail{ padding: 20px 10px; }
  
  .impress-name{ font-size: 26px; }
  
}




/**********************************************************/
/**********************************************************/

.divHome-subscribe{ max-width: 500px; width: 100%; margin: 20px auto; text-align: center; }
.divHome-subscribe .form-control{ font-size: 30px; line-height: 1; color: #fff; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 30px; margin-bottom: 20px; padding: 5px 20px; }

.divHome-subscribe .form-control::-webkit-input-placeholder {
  color: #fff;
}
.divHome-subscribe .form-control::-moz-placeholder {
  color: #fff;
}
.divHome-subscribe .form-control:-ms-input-placeholder {
  color: #fff;
}
.divHome-subscribe .form-control::-ms-input-placeholder {
  color: #fff;
}
.divHome-subscribe .form-control::placeholder {
  color: #fff;
}

.btn-subscribe{ font-size: 48px; line-height: 1; font-weight: 500; background-color: #ff8041; color: #fff; border-radius: 50px; padding: 5px 50px; }
.btn-subscribe:hover{ background-color: #fff; border-color: #ff8041; color: #ff8041; }



@media (max-width: 1600px){

  .btn-subscribe{ font-size: 40px; }
  .divHome-subscribe .form-control{ font-size: 26px; }
  
}
@media (max-width: 991px){

  .btn-subscribe{ font-size: 35px; }
  
}
@media (max-width: 576px){

  .divHome-subscribe .form-control{ font-size: 24px; }
  .btn-subscribe{ font-size: 30px; }
  
}



/**********************************************************/
/**********************************************************/


