@charset "utf-8";
/* CSS Document */
.banner_area{ overflow: hidden;}
.slider, .slide { }
.banner_area .slide { position: relative;}
.banner_area .slide .slide__img { width: 100%; height: 100%; overflow: hidden; transform: translateY(0%); }
.banner_area .slide .slide__img img { width: 100%; height: 100%; opacity: 1 !important; animation-duration: 3s; transition: all 1s ease; }


.banner_area .slide .slide__content { position: absolute; top: 50%;}
.banner_area .slide .slide__content.slide__content__left { left: 50%;  transform: translate(-50%, -50%); width: 70%;}
.banner_area .slide .slide__content--headings .animated { transition: all 0.5s ease;}
.banner_pro01, .banner_pro02, .banner_pro03, .banner_pro04{ position: absolute;}
.banner_pro01{ right: 2%; top: 0px;}
.banner_pro02{ right: 22%; top:-10%;}
.banner_pro03{ right: 0%; top: -30%;}
.banner_pro04{ right: 15%;}
.banner_area .slide .slide__content--headings .top-title { font-weight: 600; font-size: 36px; color: #8dbc88; margin-bottom: 34px;}
.banner_area .slide .slide__content--headings .title { font-weight: 600; text-transform: uppercase; font-size: 58px; color: #00775d; margin-bottom: 30px;}
.banner_area .slide .slide__content--headings .text_info { max-width: 490px; width: 100%; font-weight: 500; color: #4a1068; font-size: 26px; margin-bottom: 30px;}
.banner_area .slide .slide__content--headings .banner_more { font-size: 24px; font-weight: 500; width: 170px; text-align: center;}
.banner_area .slide .slide__content--headings .banner_more a{ display: block; text-decoration: none; color: #fff; background-color: #4a1068; line-height: 42px;}
.banner_area .slide .slide__content--headings .banner_more a:hover, .banner_area .slide .slide__content--headings .banner_more a:focus{ background-color: #00775d;}
.banner_area .slide .slide__content--headings .banner_more .bi-plus-square::before{ padding-top: 14px!important; padding-left: 15px;}

.banner_area .slider [data-animation-in] { opacity: 0; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.banner_area .slick-dotted.slick-slider{ margin-bottom: 0px;}
.banner_area .slick-dotted .slick-slider { margin-bottom: 0px;}

.banner_area .slick-dots { z-index: 99; position: absolute; top: 50%; right: 2%; width: 20px;}
.banner_area .slick-dots li { list-style: none;  display: block; width: 8px; height: 30px; margin: 15px auto;}
.banner_area .slick-dots li button{ width: 4px; padding: 4px; height: 30px; background-color: #cacaca; border-radius: 10px;}
.banner_area .slick-dots li button::before{ font-family: inherit; font-size: inherit; line-height: inherit; }
.banner_area .slick-dots li.slick-active button{ background-color: #00775d;}





/* /////////// IMAGE ZOOM /////////// */
@keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
.zoomInImage {
  animation-name: zoomInImage;
}
@keyframes zoomOutImage {
  from {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.zoomOutImage {
  animation-name: zoomOutImage;
}

@keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}
@keyframes arrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%, 80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}
@keyframes arrowUp {
  0%, 100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@keyframes arrowDown {
  0%, 100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}

/****/
@media all and (max-width: 1536px) {
	.banner_area .slide .slide__content.slide__content__left{left: 42%;}
	.banner_pro01 img, .banner_pro02 img, .banner_pro03 img, .banner_pro04 img{ max-width: 80%;}
	.banner_area .slide .slide__content--headings .title{ font-size: 48px;}
	.slick-slide img{ margin: auto 0px auto auto;}

}
@media all and (max-width: 1440px) {
	.banner_area .slide .slide__content.slide__content__left{left: 50%;}
	.banner_area .slide .slide__content--headings .title{ max-width: 500px; width: 100%; line-height: 40px; margin-bottom: 10px;}
	.banner_pro02{ right: 10%;}
	.banner_pro03 img{ max-width: 70%;}
}
@media all and (max-width: 1280px) {
	.banner_area .slide .slide__content--headings .top-title{ font-size: 30px; margin-bottom: 15px;}
	.banner_area .slide .slide__content--headings .title{ font-size: 40px;}
	.banner_area .slide .slide__content--headings .text_info{ font-size: 20px; max-width: 400px; line-height: 26px;}
	.banner_area .slide .slide__content.slide__content__left{top: 55%;}
	.banner_pro02 { top: -40%; }
	.banner_pro03{ top: -40%;}
	.banner_pro04{ top: -32%;}
}
@media all and (max-width: 1024px) {
	.banner_area .slide .slide__content.slide__content__left{ left: 40%; top: 60%;}
	.banner_area .slide .slide__content--headings .top-title{ font-size: 26px;}
	.banner_area .slide .slide__content--headings .title {font-size: 36px;}
	.banner_pro01 img, .banner_pro02 img, .banner_pro03 img, .banner_pro04 img { max-width: 56%;}
	.banner_pro01{ right: -11%;}
	.banner_pro02{ top: -17%; right: 5%;}
	.banner_pro03 { top: -12%;}
	.banner_pro04{ top: -20%; right: 8%;}
	.banner_area .slide .slide__content--headings .banner_more{font-size: 20px; width: 100px;}
	.banner_area .slide .slide__content--headings .banner_more a{ line-height: 36px;}
}
@media all and (max-width: 991px) {
	.banner_area{ position: relative; }
	.banner_area .slide .slide__content.slide__content__left { left: 50%; top: 10%!important; bottom: 0px; width: 90%; display: flex; flex-direction: column-reverse;}
	.banner_pro01, .banner_pro02, .banner_pro03, .banner_pro04 {  right: 0px; top: 80%;}
	.banner_pro01 img, .banner_pro02 img, .banner_pro03 img, .banner_pro04 img{ max-width: inherit; width: 80%;}
}
@media all and (max-width: 540px) {
	.banner_area .slide .slide__content--headings .top-title{ margin-bottom: 0px;}
	.banner_area .slide .slide__content--headings .title{ margin-bottom: 0px;}
	.banner_area .slide .slide__content--headings .banner_more .bi-plus-square::before{ padding-top: 7px !important;}
	.banner_pro01 img, .banner_pro02 img, .banner_pro04 img { max-width: inherit; width: 68%;}
	.banner_pro03 img{width: 80%;}
}
@media all and (max-width: 430px) {
	.banner_area .slide .slide__content--headings .title { font-size: 22px; line-height: 22px; }
	.banner_area .slide .slide__content--headings .text_info{ font-size: 16px; line-height: 18px;}
	.banner_area .slick-dots li{ height: 15px;}
	.banner_area .slick-dots li button{ width: 2px; padding: 2px; height: 20px;}
	.banner_area .slide .slide__content--headings .banner_more a {line-height: 26px;}
	.banner_area .slide .slide__content--headings .banner_more .bi-plus-square::before { font-size: 15px;}
	.banner_pro04 img{ width: 50%;}
}
@media all and (max-width: 412px) {
	.banner_area .slide .slide__content.slide__content__left{top: 20%!important;}
	.banner_area .slide .slide__content--headings .title { font-size: 28px; line-height: 28px; }
	.banner_area .slide .slide__content--headings .text_info{ font-size: 17px; line-height: 20px;}
	.banner_pro02{ top: 76%;}
	
}

@media all and (max-width: 320px) {
	.banner_area .slide .slide__content--headings .title { font-size: 22px; line-height: 22px;}
}
@media all and (max-width: 280px) {
	.banner_area .slide .slide__content--headings .top-title { font-size: 16px;}
	.banner_area .slide .slide__content--headings .title { font-size: 18px; line-height: 18px; }
	.banner_area .slide .slide__content--headings .text_info { font-size: 16px; line-height: 18px; margin-bottom: 10px;}
	.banner_area .slide .slide__content--headings .banner_more{ width: 80px;}
	.banner_area .slide .slide__content--headings .banner_more a{ font-size: 80%;}
}