﻿/* CSS Document */


/**********************************************************/
/************************* about **************************/
/**********************************************************/

.divAbout-history--intro{ padding: 80px 0 150px; }
.divAbout-history--intro img, .section-history img{ border-radius: 20px; }

.divAbout-intro{ padding: 0 30px; }
.divAbout-intro h2{ font-size: 70px; margin-bottom: 20px; }
.divAbout-intro p{ font-size: 40px; font-weight: 500; margin-bottom: 0; }


.section-history{ position: relative; margin-top: -200px; }
.section-history h3{ font-size: 50px; color: #116c5b; margin-bottom: 20px; }
.section-history h3 span{ color: #ff8041; }
.section-history p{ font-size: 30px; }

.about-history--txt1{ padding-top: 250px; max-width: 600px; width: 90%; }
.about-history--txt2{ padding-top: 100px; padding-left: 30px; }

.about-history--img{ position: relative; top: -50px; }

.history--img1{ margin-left: 30px; }
.history--img2{ max-width: 425px; width: 100%; }
.history--img3{ position: absolute; bottom: -100px; right: 40px; max-width: 400px; width: 100%; }



@media (max-width: 1600px) {

  .divAbout-intro h2{ font-size: 60px; }
  .divAbout-intro p{ font-size: 36px; }
  
  .section-history h3{ font-size: 46px; }
  .about-history--txt1{ padding-top: 200px; }

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

  .divAbout-history--intro{ padding: 50px 0 100px; }
  .divAbout-intro h2{ font-size: 50px; }
  .divAbout-intro p{ font-size: 32px; }

  .section-history{ margin-top: -150px; }
  .section-history h3{ font-size: 40px; }
  .section-history p{ font-size: 28px; }
  .about-history--txt1{ padding-top: 150px; }
  .about-history--txt2{ padding-top: 80px; }

  .about-history--img{ top: 0; }
  .history--img2{ max-width: 325px; }
  .history--img3{ max-width: 300px; }

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

  .divAbout-history--intro{ padding: 30px 0; }
  .divAbout-intro{ padding: 30px; }
  .divAbout-intro h2{ font-size: 46px; }
  .divAbout-intro p{ font-size: 30px; }

  .section-history{ margin-top: 0px; margin-bottom: 50px; }
  .section-history h3{ font-size: 35px; }
  .section-history p{ font-size: 26px; }
  .about-history--txt1{ padding-top: 0px; margin: 0 auto; }
  .about-history--txt2{ padding: 0px; max-width: 600px; width: 90%; margin: 30px auto; }
  .history--img1{ margin: 0 auto; text-align: center; }

  .about-history--img{ width: 90%; margin: 0 auto; }
  .history--img2{ max-width: 400px; }
  .history--img3{ max-width: 350px; }

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

  .history--img2{ max-width: 325px; }
  .history--img3{ max-width: 300px; }

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

  .divAbout-intro{ padding: 10px; }
  .divAbout-intro h2{ font-size: 40px; }
  .divAbout-intro p{ font-size: 28px; }

  .history--img2{ max-width: 250px; }
  .history--img3{ max-width: 200px; right: 0; }


}


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


.bg-standard{ background-image: url('../images/about/bg-standard.jpg'); background-position: right center; background-repeat: no-repeat; background-size: contain; }

.about-std{ overflow: hidden; width: 100%; padding: 30px; }
.about-std--detail{ float: left; width: 60%; padding-right: 100px; padding-top: 30px; display: none; }
.about-std--logo{ float: left; width: 40%; background-color: #fff; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.1); padding: 100px 20px; margin-top: 30px; border-radius: 20px; }
.about-std--logo img{ max-width: 180px; margin: 0 auto; }

.about-std--detail h3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 50px; margin-bottom: 30px; color: #116c5b;
}
.about-std--detail p{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 30px;
}




.slider-standard .owl-carousel .owl-item.active .about-std--detail{ display: block; }
.slider-standard .owl-carousel .owl-item.active .about-std--logo img{ max-width: 240px; }
.slider-standard .owl-carousel .owl-item.active .about-std--logo{ box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3); margin-top: 0; }

.slider-standard .owl-carousel .owl-stage{ left: -30px; }
.slider-standard .owl-carousel .owl-nav{ width: 130px; top: auto; bottom: 30px; left: 250px; }




@media (max-width: 1599px){

  .about-std--logo{ padding: 75px 0; }
  .slider-standard .owl-carousel .owl-item.active .about-std--logo{ padding: 80px 0; }

  .slider-standard .owl-carousel .owl-stage{ left: -100px; }
  .slider-standard .owl-carousel .owl-nav{ left: 80px; bottom: 0; }
  
}
@media (max-width: 1199px){

  .about-std{ width: 95%; margin: 0 auto; }
  .about-std--detail h3{ font-size: 44px; }

  .slider-standard .owl-carousel .owl-item.active .about-std--logo img{ max-width: 180px; }

  .slider-standard .owl-carousel .owl-stage{ left: auto; }
  .slider-standard .owl-carousel .owl-nav{ left: 5%; }

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

  .about-std--detail{ padding-right: 50px; padding-top: 20px; }
  .about-std--detail h3{ font-size: 36px; margin-bottom: 20px; }
  .about-std--detail p{ font-size: 28px; -webkit-line-clamp: 5; }
  .about-std--logo,
  .slider-standard .owl-carousel .owl-item.active .about-std--logo{ padding: 60px 0; margin-top: 0; }

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

  .about-std{ padding: 25px; }
  .about-std--detail{ float: none; width: 100%; padding-right: 0px; padding-top: 0px; padding-bottom: 10px; }
  .about-std--logo{ float: none; width: 100%; }
  .about-std--detail{ display: block; }
  .about-std--detail h3{ font-size: 30px;}
  .about-std--detail p{ font-size: 26px; -webkit-line-clamp: inherit; }

  .about-std--logo,
  .slider-standard .owl-carousel .owl-item.active .about-std--logo{ padding: 30px 0; }
  .about-std--logo img,
  .slider-standard .owl-carousel .owl-item.active .about-std--logo img{ max-width: 150px; }

}



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


.bg-awards{ background-image: url('../images/about/bg-award.png'); background-position: center; }

.slider-awards{ background-image: url('../images/about/box-award.png'); background-repeat: no-repeat; background-position: center bottom; background-size: contain; width: 100%; height: 100%; padding: 90px; margin-top: 80px; }
.divAaward-list figure{ max-width: 250px; width: 100%; margin: 0 auto 20px; }
.divAaward-list .divAaward-caption{ text-align: center; max-width: 350px; width: 90%; margin: 0 auto; }
.divAaward-list .divAaward-caption h4{ color: #116c5b; margin-bottom: 10px; }
.divAaward-list .divAaward-caption p{ font-size: 30px; min-height: 100px; height: 100px; overflow: hidden; }





@media (max-width: 1600px){

  .slider-awards{ padding: 70px; }

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

  .slider-awards{ padding: 50px 0; }
  .divAaward-list figure{ max-width: 200px; }
  .divAaward-list .divAaward-caption p{ font-size: 26px; min-height: 90px; height: 90px; }

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

  .divAaward-list figure{ max-width: 150px; }
  .divAaward-list .divAaward-caption p{ font-size: 24px; min-height: 80px; height: 80px; }

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

  .slider-awards{ padding: 25px 0; }
  .divAaward-list figure{ max-width: 100px; }

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

  .slider-awards{ padding: 25px; background-size: cover; }

}



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


.bg-policy{ background-image: url('../images/about/bg-policy.png'); background-position: center top; }

.divAbout-polilcy{ margin-top: 60px; }
.divAbout-polilcy ul li{ margin-bottom: 20px; }
.divAbout-polilcy ul li a{ display: block; background-color: #fff; padding: 15px 30px; font-size: 32px; color: #116c5b; font-weight: 500; overflow: hidden; border-radius: 20px; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.1); position: relative; top: 0; }
.divAbout-polilcy ul li a:hover{ color: #ff8041; box-shadow: 15px 10px 30px rgba(0, 0, 0, 0.3); top: -5px; }
.divAbout-polilcy .policy-1{ width: calc(100% - 155px); float: left; position: relative; padding-left: 40px; }
.divAbout-polilcy .policy-1 img{ width: 25px; position: absolute; top: 0; left: 0; }
.divAbout-polilcy .policy-2{ width: 155px; float: right; text-align: right; color: #ff8041; }




@media (max-width: 1199px){

  .divAbout-polilcy ul li a{ font-size: 30px; }

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

  .divAbout-polilcy ul li a{ font-size: 28px; padding: 15px 20px; }
  .divAbout-polilcy .policy-1,
  .divAbout-polilcy .policy-2{ float: none; width: 100%; }
  .divAbout-polilcy .policy-2{ text-align: left; margin-top: 5px; margin-left: 40px; }

}



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

