/**/@charset "utf-8";
/* CSS Document */
/*CSS Import*/
/*@import url("fonts.css");
@import url("back-to-top.css");
@import url("helper-class.css");*/
html {font-size: 15px;}
body {font-family: 'Noto Sans Thai'; font-weight: 400; font-style: normal; line-height: 1.6; color: #62748e;}
.loader {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loading.gif) 50% 50% no-repeat rgba(249, 249, 249, 1);}
a {color: #0089f7; transition: all 0.2s;}
a:hover {text-decoration: underline; }
h1,h2,h3 {/*font bold*/}

/* ////////// Main Class ////////// */
.wrap-bg-index {background: #0936cb;}
    /*sec-bg1 header page*/
.sec-bg1 {background: #f2f7fc; position: relative;}
.sec-bg1.with-bg:before {content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background-image: url(../images/sec-header-02.webp); background-size: cover; background-repeat: no-repeat; background-position: center;}
.sec-bg1 > .container {position: relative; z-index: 2;}
    /*sec-bg2, sec-bg3 home & product detail*/
.sec-bg2 {position: relative; background-image: url("../images/sec-bg-01.webp"); background-repeat: no-repeat; background-position: center;}
.sec-bg2:before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00D7E0; background: linear-gradient(0deg,rgba(0, 215, 224, 0.7) 0%, rgba(0, 137, 247, 0.7) 100%);}
.sec-bg2 > .container {position: relative; z-index: 1;}
.sec-bg3 {background: #0089f7;}
    /*sec-bg-header1 page news only*/
.sec-bg-header1 {position: relative; background-image: url("../images/sec-header-01.webp"); background-repeat: no-repeat; background-position: center;}
.sec-content {padding-top: 70px; padding-bottom: 70px;}
.sec-content.half-top {padding-top: 20px;}
.sec-content.half-bottom {padding-bottom: 20px;}
.sec-content.double {padding-top: 90px; padding-bottom: 90px;}
.sec-content.no-top {padding-top: 0;}
.sec-content.no-bottom {padding-bottom: 0;}
.br-t {border-top: 1px solid #eaeaea;}

.footer-page {background: linear-gradient(to right, #0089f7, #00d7e0, #0089f7); background-size: 200% 100%; background-position: left center;}
.footer-page .inner-caption {}
.footer-page .inner-caption h1 {color: #ffffff;font-size: 2.53rem;font-weight: 700;margin-top: 0px;margin-bottom: 20px;}
.footer-page .inner-caption h1 + p {color: #ffffff;}
.footer-page .btn-carousel-one {background: #ffffff; color: #008bf6;}
.footer-page .btn-carousel-one:hover {color: #008bf6 !important;background: #d0eff6;border-color: #ffffff;}
.footer-page .btn-carousel-one:after {background-color: #008bf6;}
.footer-page .btn-carousel-two {color: #ffffff; border-color: #ffffff;}
.footer-page .btn-carousel-two:hover {background: #005c6b;border-color: #005c6b;}
.footer-page .btn-carousel-two:after {background-color: #ffffff;}


#home_carousel {}
#home_carousel .carousel-item {height: 540px;}
#home_carousel .carousel-item > span {position: absolute; z-index: 1000; background-position: center center; display: block; top: 0; bottom: 0; left: 0; right: 0; height: 540px;}
.carousel-control-prev, .carousel-control-next {z-index: 1100;}
#home_carousel .carousel-caption { z-index: 1050; top: 50%; left: 50%; right: auto; bottom: auto; width: 100%; text-align: left; transform: translate(-50%, -50%);}
#home_carousel .carousel-caption h1 {color: #ffffff; font-size: 2.66rem; font-weight: 700; margin-bottom: 10px; text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5), 2px 2px 0px rgba(255, 255, 255, 0);}
#home_carousel .carousel-caption h1 + p {font-size: 1.125rem; line-height: 24px; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 0px rgba(255,255,255,0);}
#home_carousel .carousel-caption .inner-caption {}
#home_carousel .carousel-caption .inner-caption .top-title, .top-title {font-size: 0.8rem; text-transform: uppercase; font-weight: 600; display: inline-block; line-height: 1; height: 35px; background: rgba(8, 145, 178, 0.3); border: 2px solid #0891b2; padding: 8px 15px 5px 30px; border-radius: 30px; align-content: center; position: relative;}
#home_carousel .carousel-caption .inner-caption .top-title:before, .top-title:before {content: ""; position: absolute; top: 50%; left: 16px; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #06b6d4; border-radius: 30px; animation: pingDot 1.5s cubic-bezier(0, 0, .2, 1) infinite;}
@keyframes pingDot {0% {box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);} 70% {box-shadow: 0 0 0 9px rgba(6, 182, 212, 0);} 100% {box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);}} 
#home_carousel .carousel-indicators, .carousel-indicators {margin-bottom: 2.66rem;} .carousel-indicators {margin-bottom: 1rem;}
#home_carousel .carousel-indicators [data-bs-target], .carousel-indicators [data-bs-target] {width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; margin-left: 6px;}
#home_carousel .carousel-indicators .active, .carousel-indicators .active {background-color: #0093f4;}

.btn-carousel-one {color: #ffffff;}
.btn-carousel-two {background: none; color: #00cce3; border: 2px solid #00cce3;}
.btn-carousel-one,
.btn-carousel-two {max-width: max-content;}
.btn-carousel-one:after,
.btn-carousel-two:after {content: ""; display: block; margin-left: 10px; width: 17px; height: 17px; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.btn-carousel-one:after {background-color: #ffffff; mask-image: url(../images/icon-arrow-right.svg); -webkit-mask-image: url(../images/icon-arrow-right.svg); transform: translateX(0); transition: transform 0.4s ease;}
.btn-carousel-one:hover:after {animation: arrowMove 0.8s ease-in-out infinite;}
@keyframes arrowMove {0%{transform: translateX(0); }50%{ transform: translateX(6px);}100% {transform: translateX(0);}}
.btn-carousel-two:after {background-color: #00cce3; mask-image: url(../images/icon-tel.svg); -webkit-mask-image: url(../images/icon-tel.svg); transition: all 0.2s;}
.btn-carousel-two:hover {background: #00cce3; border: 2px solid #00cce3;}
.btn-carousel-two:hover:after {background: #ffffff;}
.sup-title {font-size: 0.93rem; display: inline-block; color: #0088c4; font-weight: 600; background: #d6efff; text-transform: uppercase; padding: 5px 14px; border-radius: 30px; margin-bottom: 25px;}
.sup-title img {width: 16px; margin-top: -3px;}
.sec-title {color: #253656; font-size: 2.53rem; font-weight: 700; margin-top: 0px; margin-bottom: 20px;}
.sec-title.white {color: #fff;}
.sec-title span.text-gradient {display: block;}
.sec-title span.text-gradient.inline {display: inline-block;}
.sup-title.style-2 {background: none; padding: 0;}

/*Sec Who We Are*/
.media-img {position: relative;}
.media-img > img {border-radius: 20px; height: 500px;}
.media-img .media-info {position: absolute; font-size: 0.86rem; color: #212121; font-weight: 700; z-index: 1; left: -30px; bottom: -15px; background: #ffffff; border-radius: 8px; min-width: 200px; padding: 30px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.media-img .media-info span {}
.media-img .media-info h3 {font-weight: 700; margin: 10px 0;}
.media-img .media-info .info-img {position: absolute; top: 30px; right: 30px;}
.media-img .media-info .info-img img {width: 30px; height: 30px;}
.list-media {font-size: 0.86rem; font-weight: 700; color: #212121;}
.list-media li {position: relative; background: #fff; border: 2px solid #ebf0f5; border-radius: 8px; padding: 25px 15px; margin-bottom: 15px;}
.list-media li img {}
.list-media .list-inline-item:not(:last-child) {margin-right: 10px;}
.txt-foot-sec {position: relative; padding-left: 15px;}
.txt-foot-sec h2 {position: relative; font-size: 1.2rem; font-weight: 700; color: #212121; margin-bottom: 0;}
.txt-foot-sec:before {content: ""; display: block; position: absolute; top: -5px; bottom: -5px; left: 0; width: 3px; margin-right: 15px; background: #0093f4;}

/*Sec why choose*/
.media-box {}
.media-box .item {font-size: 0.93rem;border: 1px solid #dae0e7; background: #ffffff; padding: 20px;border-radius: 10px;line-height: 1.33rem;}
.media-box .item img {width: 80px; margin-bottom: 20px;}
.media-box .item h2 {font-size: 1.46rem;color: #212121;}
.media-box .item h2.style-2 {font-size: 1.06rem;font-weight: 600;}


/*Sec Our Partners*/
.media-carousel.owl-carousel .owl-item {padding: 15px;}
.media-carousel.owl-carousel .owl-item .item {display: flex; text-align: center; background: #ffffff; border-radius: 8px; min-height: 160px; flex-direction: column; align-items: center; justify-content: center; -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.10);}
.media-carousel.owl-carousel .owl-item .item a {position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; margin: 15px;}
.media-carousel.owl-carousel .owl-item .item img {width: 170px;}
.media-carousel.owl-carousel .owl-nav button.owl-next, 
.media-carousel.owl-carousel .owl-nav button.owl-prev {position: absolute; display: flex; font-size: 2rem; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; background: #d6efff; color: #0093f4; margin: 0; border-radius: 50%; justify-content: center; align-items: center;}
.media-carousel.owl-carousel .owl-nav button.owl-next {right: -40px;} 
.media-carousel.owl-carousel .owl-nav button.owl-prev {left: -40px;}
.media-carousel.owl-carousel .owl-nav button.owl-next:hover,
.media-carousel.owl-carousel .owl-nav button.owl-prev:hover {background: #8fd3ff;}
.media-carousel.owl-carousel .owl-nav button.owl-prev span {line-height: 1; margin-top: -2px; margin-left: -2px;}
.media-carousel.owl-carousel .owl-nav button.owl-next span {line-height: 1; margin-top: -2px; margin-right: -2px;} 
.media-carousel.owl-theme .owl-dots .owl-dot span {width: 12px; height: 12px;}
.media-carousel.owl-theme .owl-dots .owl-dot.active span {background: #0093f4;}

/*Sec Highlight*/
.text-highlight {font-weight: 700; font-size: 2.66rem; color: #fff; text-shadow: 4px 4px 1px rgba(255,255,255,0.3); font-style: italic;}

/*PAGE*/
/*ABOUT US*/
.media-img.inpage {position: relative; height: 380px; border-radius: 20px;}
.media-img.inpage:before {content: ""; display: block; position: absolute; z-index: 1; top: 20px; bottom: -20px; left: 20px; right: -20px; border: 4px solid #6acfee; border-radius: 26px;}
.media-img.inpage .media-info {z-index: 3; bottom: 20px; left: 20px;}
.media-img.inpage .media-info .media-icon {display: inline-block;background: #eeeeee;width: 30px;height: 30px;border-radius: 50px;padding: 5px 5px;margin-right: 5px;}
.media-img.inpage .media-info .media-icon img {width: 20px;}
.media-img.inpage .media-info .media-icon + span {display: inline-block;}
.media-img.inpage .media-info .media-icon + span + small {display: block;padding-left: 40px;}
.media-img.inpage .media-info span {display: block; margin-bottom: 5px; font-size: 1rem;}
.media-img.inpage .media-info small {font-size: 100%; font-weight: 500; color: #62748e;}
.media-img.inpage > img {position: relative; z-index: 2; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; o-object-position: center; object-position: center;}
.media-box-about {border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.media-box-about .img {position: relative;overflow: hidden;border-radius: 10px 10px 0 0;}
.media-box-about .img:before {content:"";display: block;position: absolute;z-index: 1;top:0;bottom:0;left: 0;right: 0;background: #0089F7;background: linear-gradient(0deg, rgba(0, 137, 247, 1) 0%, rgba(0, 215, 224, 0) 70%);}
.media-box-about .img img {border-radius: 10px 10px 0px 0px}
.media-box-about .img h2 {position: absolute; z-index: 2; bottom: 30px; left: 30px; color: #ffffff; font-weight: 700; font-size: 1.73rem;}
.media-box-about .text {padding: 30px;/* min-height: 290px; */}

.team-list {}
.team-list .item {border-radius: 10px; border: 1px solid #dae0e7;}
.team-list .item .img {border-radius: 10px 10px 0 0; overflow: hidden;}
.team-list .item .img img {}
.team-list .item:hover {}
.team-list .item:hover .img img {}
.team-list .item .text {padding: 20px;}
.team-list .item .text h3 {font-size: 1.2rem; font-weight: 600; color: #253656;}
.team-list .item .text p {text-transform: uppercase;margin-bottom: 0;color: #0092b8;font-weight: 600;font-size: 0.93rem;}


/*PRODUCTS*/
.media-box.inpage .item h2 {font-size: 1.06rem; font-weight: 600; margin-top: 25px;}
.media-box.inpage .item {overflow: hidden;}
.media-box.inpage .item img {width: 100%;}
.media-box.inpage .item .zoom {overflow: hidden;}
.media-box.inpage .item .zoom img {margin-bottom: 0px;}
.media-box-product {border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.media-box-product .img {position: relative;overflow: hidden;border-radius: 10px 10px 0 0;}
.media-box-product .img:before {content:"";display: block;position: absolute;z-index: 1;top:0;bottom:0;left: 0;right: 0;background: #0089F7;background: linear-gradient(0deg, rgba(0, 137, 247, 1) -50%, rgba(0, 215, 224, 0) 40%);}
.media-box-product .img img {border-radius: 10px 10px 0px 0px}
.media-box-product .img h2 {position: absolute; z-index: 2; bottom: 30px; left: 30px; color: #ffffff; font-weight: 700; font-size: 1.73rem;}
.media-box-product .text {padding: 30px; background: #ffffff; border-radius: 0 0 10px 10px;/* min-height: 290px; */}
.media-box-product .text h2 {font-size: 1.33rem; font-weight: 600; color: #004b87;}

.download-list {list-style: none; padding-left: 0;}
.download-list li {border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;}
.download-list li a {position: relative; color: #253656; font-weight: 500; display: block; padding: 20px 0 20px 45px;}
.download-list li a:hover {background: #eeeeee; text-decoration: none;}
.download-list li a:before {content: "\f1c1"; position: absolute; top: 50%; margin-top: -9px; left: 20px; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.head-content {font-size: 1.2rem; color: #253656; font-weight: 700; margin-top: 15px;} /*product detail*/


/*NEWS*/
.media-box-news {position: relative; border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.media-box-news a {position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; right: 0;}
.media-box-news .img {position: relative; overflow: hidden; border-radius: 10px 10px 0 0;}
.media-box-news .img:before {content:"";display: block;position: absolute;z-index: 1;top:0;bottom:0;left: 0;right: 0;background: #0089F7;background: linear-gradient(0deg, rgba(0, 137, 247, 1) -50%, rgba(0, 215, 224, 0) 40%);}
.media-box-news .text {padding: 30px; background: #ffffff; border-radius: 0 0 10px 10px;}
.media-box-news .text h2 {font-size: 1.2rem; font-weight: 600; color: #212121; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-box-news .text p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.media-box-news .text .footer {font-size: 0.93rem; color: #8697b0; font-weight: 500; margin-top: 25px;}

.media-box-news:hover .zoom img {-ms-transform: scale(1.04); -webkit-transform: scale(1.04); transform: scale(1.04);}
.media-box-news:hover .text h2 {color: #004b87;}
.media-box-news .read-icon:after {content: "\f00e"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease-in-out; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: 1.6rem; color: #ffffff; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.media-box-news:hover .read-icon:after {opacity: 1; }

/*NEWS DETAIL*/
.news-title {color: #253656; font-size: 2rem; font-weight: 700; margin-top: 0px; margin-bottom: 10px;}
.tag-date {font-size: 0.93rem; color: #8697b0; font-weight: 500;}
.editor-control {}
.editor-control h2,
.editor-control h3 {color: #253656; font-weight: 700;}
.editor-control h2 {font-size: 1.46rem; background: -webkit-gradient(linear, left top, right top, from(#0089f7), to(#00d7e0)); background: linear-gradient(to right, #0089f7 0%, #00d7e0 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.editor-control h3 {font-size: 1.2rem;}


/*CAREER*/
.heading-table {background: #cbecff; color: #348abc; padding: 15px; font-size: 0.93rem; font-weight: 600; margin-bottom: 15px;}
.accordion-career > .accordion-item:first-child  {border-top: 1px solid #dee2e6;  border-bottom: 1px solid #dee2e6;}
.accordion-career > .accordion-item:not(:first-of-type) {border-top: 1px solid #dee2e6;  border-bottom: 1px solid #dee2e6;  margin: 15px 0;}
.accordion-career .accordion-button {font-weight: 500;  font-family: inherit;}
.accordion-career .accordion-button:hover,
.accordion-career .accordion-button[aria-expanded="true"] {background: #0093f4;  color: #ffffff;}
.accordion-career .accordion-button .job {}
.accordion-career .accordion-body {background: #eeeff2;  padding: 30px;}
.accordion-career .accordion-body h3 {font-size: 1.06rem; font-weight: 600; color: #253656;}
.accordion-career ul {margin-bottom: 0;}
.accordion-career ul li p {margin-bottom: 0;}
.career-info-list {font-size: 0.93rem; margin-bottom: 0;}
.career-info-list li {border-bottom: 1px solid #eeeeee; padding: 10px 0 10px 15px;}
.career-info-list li:last-child {border: none;}
.wrap-career-contact {position: sticky; border-radius: 10px; top: 100px; padding: 20px 15px;}


/*CONTACT*/    
.wrap-contact-icon {}
.wrap-contact-icon h6 {color: #253656; font-weight: 600;}
.wrap-contact-icon .contact-icon {display: flex; width: 35px; height: 35px; background: #f4f4f4; border: 1px solid #009689; justify-content: center; align-items: center; border-radius: 5px;}
.wrap-contact-icon .contact-icon img {width: 22px;}
.contact-icon.loc {}
.contact-icon.loc img {}
.contact-icon.email {}
.contact-icon.email img {    width: 20px;}
.contact-icon.tel {}
.contact-icon.tel img {width: 19px;}
.contact-icon.time {}
.contact-icon.time img {    width: 20px;}


/*//////////////////Media Query//////////////////*/
/* xs (Extra small)*/
@media (max-width: 575px) {
    /*PAGE*/
    /*ABOUT US*/
    .media-img.inpage:before {right: 15px;}
}
/* sm (Small)*/
@media (min-width: 576px) and (max-width: 767px) { 
	
}
@media (max-width: 767px) { 
	/*Sec Who We Are*/
	.list-media li {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
	.list-media li img {margin-right: 5px;}	
}
/* md (Medium)*/	
@media (min-width: 768px) and (max-width: 991px) {
	
}
@media (min-width: 768px) {
	#home_carousel .carousel-caption .inner-caption {padding-left: 40px;}	
}
@media (max-width: 991px) {
    #home_carousel .carousel-caption {}
    #home_carousel .carousel-caption h1 {font-size: 2rem;}
	#home_carousel .carousel-indicators {margin-bottom: 1.66rem;}
	
	/*Sec Who We Are*/
	.media-img > img {height: 450px;}
}
/* lg (Large)*/	
@media (min-width: 992px) and (max-width: 1199px) {
	
}
/* xl (Extra large) */
@media (min-width: 1200px) and (max-width: 1399px) {
	
}
/* xxl (Extra extra large) */
@media (min-width: 1400px) {
	 	
}
/* ////////////// for Screen Size 18.5 ////////////*/
@media (max-height: 768px) {
}
/*for Screen Size 18.5 // xs (Extra small) */ 
@media (max-height: 768px) and (max-width: 575px) { 
  
}
/*for Screen Size 18.5 // sm (Small) */
@media (max-height: 768px) and (min-width: 576px) and (max-width: 767px) { 
  
}
/*for Screen Size 18.5 // md (Medium) */
@media (max-height: 768px) and (min-width: 768px) and (max-width: 991px) { 
  
}
/*for Screen Size 18.5 // lg (Large) */
@media (max-height: 768px) and (min-width: 992px) and (max-width: 1199px) { 
  
}
/*for Screen Size 18.5 // xl (Extra large) */
@media (max-height: 768px) and (min-width: 1200px) and (max-width: 1399px) { 
  
}
/*for Screen Size 18.5 // xxl (Extra extra large) */
@media (max-height: 768px) and (min-width: 1400px) { 
  
}