html{font-size:16px;}
@font-face {
   font-family: 'Kanit-Light';
   src: url('fonts/Kanit-Light.eot');
   src: url('fonts/Kanit-Light.eot?#iefix') format('embedded-opentype'),
      url('fonts/Kanit-Light.woff') format('woff'),
      url('fonts/Kanit-Light.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Kanit-Medium';
   src: url('fonts/Kanit-Medium.eot');
   src: url('fonts/Kanit-Medium.eot?#iefix') format('embedded-opentype'),
      url('fonts/Kanit-Medium.woff') format('woff'),
      url('fonts/Kanit-Medium.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Kanit-Regular';
   src: url('fonts/Kanit-Regular.eot');
   src: url('fonts/Kanit-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Kanit-Regular.woff') format('woff'),
      url('fonts/Kanit-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

body{
   font-family: 'Kanit-Light';
	cursor: default;
	position: relative;
	line-height:1.5;
	font-size: 1rem;
	color: #282828;
}
ul{
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
	/*cursor: pointer;*/
	color: inherit;
	
}

#nav-icon3{
	z-index: 56;
	width: 35px;
	height: 25px;
	position: relative;
    top: 0rem;
    right: 0;
	left: auto;
	margin:0px 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	box-shadow: none;
	background: none;
	border: none; 
}
#nav-icon3 span{
	display: block;
	position: absolute;
	height: 3px;
	width: 60%;
    background: #053c62;
    border-radius: 6px;
	opacity: 1;
	right: 0%;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
	top: 0;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
	top: 10px;
	width: 100%;
}
#nav-icon3 span:nth-child(4) {
	top: 20px;
}
#nav-icon3.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}
#nav-icon3.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 80%;
}
#nav-icon3.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 80%;
}
#nav-icon3.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}
/*#nav-icon3.open{
	top: -1.5rem;
    right: .0rem;
}*/
/*///////////Start-Header///////////////*/
.headbar-main{
    padding: 0;
	display: block;
    transition: all 0.6s;
	background-color:#FFF;
}
.slim.headbar-main{box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.hamburgers-box{
    width: 100%;
	height: 100%;
	padding: 0;
    position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.headbar-main .row{margin: auto;}
.navbar-brand {
	width: 100%;
    text-align: left;
	color: #FFF;
    margin: 0 ;
	padding: 0;
    transition: all 0.5s;
}
.navbar-brand img{
	width: 170px;
	transition: all 0.5s;
	margin: auto;
}

.navbar-collapse .navbar-brand{
	padding: 1rem ;
	margin: auto;
	text-align: center;
	display: block;
	width: 100%;
}
.navbar-nav li{
	padding: 0 15px;
	margin-bottom: 1rem;
	position: relative;
	transition: all 0.5s;
	text-transform: uppercase;
}
.navbar-nav li a{
	padding: 8px 15px;
	display: block;
	color: #282828;
	text-align: left;
	text-decoration: none;
	transition: all 0.5s;
	position: relative;
}
.navbar-nav li.active a, .navbar-nav a:hover{
	color: #662e91;
}
.navbar-nav li .dropdown-menu{
	padding: 0;
	border: none;
	background: #f5f5f5;
	border-radius: 0;
	margin: 0 -15px;
}
.navbar-nav li .dropdown-menu a{
	display: block;
	text-align: left;
	padding: 15px 30px;
}
.navbar-nav li .dropdown-menu a.active,
.navbar-nav li .dropdown-menu a:hover{
	color: #FFF;
	background: #f68b30;
}
.social-header{
	text-align: center;
	padding: 0 10px;
	color: #662e91;
	margin: 2rem auto;
	width: 100%;
}
.social-header p img{
	width: 25px;
	margin-right: 5px;
	filter: invert(18%) sepia(35%) saturate(2457%) hue-rotate(177deg) brightness(95%) contrast(97%);
}
.social-header img{
	width: 45px;
	margin: auto;
	transition: all 0.8s;
}
.social-header img:hover{
	transform: scale(.95);
}
.social-header ul{
	list-style: none;
	text-align: center;
	color: #000;
}
.contactbar{
	padding: 5px 0;
	color: #FFF;
	text-align: center;
	background: #662e91;
}
.languagemb-box{
	position: absolute;
	right: 3rem;
	top: 1.5rem;
}
.language-box{display: none;}
.language-box .dropdown-menu,
.languagemb-box .dropdown-menu{
	padding: 0;
	border: none;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	border-radius: 10px;
	min-width: inherit;
	overflow: hidden;
}
.language-box .dropdown-menu a,
.languagemb-box .dropdown-menu a{
	display: block;
	padding: 15px;
}
.language-box,
.languagemb-box img{width: 35px;}
.language-box .dropdown-menu a:hover,
.language-box .dropdown-menu a.active,
.languagemb-box .dropdown-menu a.active,
.languagemb-box .dropdown-menu a:hover{
	background: #f68b30;
	color: #FFF;
}
/*///////////End-Header///////////////*/
/********************/
 
.box-loading #overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#000;/*rgba(0,0,0,0.9);*/
  transition: 1s 0.4s;
}
 
.box-loading #progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

/*///////////Start-mainSlide///////////////*/
#carouselmainSlide .carousel-item{position: relative;}
#carouselmainSlide .carousel-item img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
#carouselmainSlide .carousel-control-next, 
#carouselmainSlide .carousel-control-prev{z-index: 5;}

#carouselmainSlide .carousel-indicators {
    align-items: center;
    margin-bottom: 0;
    justify-content: center;
    bottom: .75rem;
	z-index: 4;
}
#carouselmainSlide .carousel-indicators button{
	width: 12px;
	height: 12px;
	margin: 0 3px;
	opacity: .6;
	border: none;
	background: #662e91;
	border-radius: 50%;
}
#carouselmainSlide .carousel-indicators button.active{
	opacity: 1;
}

/*///////////End-mainSlide///////////////*/

/*///////////Start-Content///////////////*/
.content-box{
	padding: 10% 0;
	background-size: cover !important;
}
.img-box{
	text-align: center;
	overflow: hidden;
	margin-bottom: 1rem;
}
.img-box img{
	width: 100%;
	transition: all 0.6s;
}
.title-box{
	text-align: center;
	margin-bottom: 2.5rem;
}
.title-box h1{
	font-size: 33px;
	margin: 0;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.title-box h3{
	font-size: 28px;
	margin: 0;
	color: #662e91;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.title-box p{margin: 0;}
.content-box.abouthome {padding: 0;background: #f8f8f8;}
.content-box.abouthome .row{justify-content: center;}

.imgabout-home{
	text-align: center;
	overflow: hidden;
	aspect-ratio:3/3;
	position: relative;
}
.imgabout-home img{
	max-width: 100%;
	max-height: 100%;
	object-fit: scale-down;
	
}
.textabout-home{margin: 2rem 0;}
.textabout-home h1{
	color: #662e91;
	font-size: 33px;
	margin-bottom: 1rem;
	text-transform: uppercase;
	font-family: 'Kanit-Medium';
}
.textabout-home h2{
	font-size: 1rem;
	margin: 0;
	color: #f68b30;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.textabout-home h3{
	font-size: 20px;
	margin: 0;
	color: #662e91;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.textabout-home p{margin-bottom: 1rem;}
.readmore-btn{
	padding: 6px;
	width: 160px;
	text-align: center;
	border-radius: 30px;
	overflow: hidden;
	margin: 2rem 0;
	color: #FFF;
	font-family: 'Kanit-Regular';
	border: 1px solid #662e91;
}
.readmore-btn img{
	width: 33px;
	margin-left: 10px;
	transition: all 0.5s;
	filter: brightness(0) invert(1);
}
.readmore-btn:hover img{
	transform: translateX(10px);
	filter: invert(20%) sepia(45%) saturate(2520%) hue-rotate(253deg) brightness(97%) contrast(95%);
}
.readmore-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Shutter Out Vertical */
.hvr-shutter-out-vertical {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #662e91;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-out-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active {
  color: #662e91;
}
.hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}





.title-box h1{color: #662e91;}
.title-box p{color: #f68b30;}
/*.content-box.sustainabilitypage{
	background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
	background: -o-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
	background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
}*/
.content-box.whatwedo-home{
	margin: 2rem auto;
	background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
	background: -o-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
	background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(248, 248, 248, 1) 30%, rgba(248, 248, 248, 1) 100%);
}
.content-box.whatwedo-home .row{justify-content: center;}
.content-box.sustainabilitypage .imgabout-home{margin-bottom: 3rem;}
.whatwedo-box {
	margin-top: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #f68b30;
}
.whatwedo-box h1{
	color: #662e91;
	font-size: 24px;
	margin-bottom:0;
	font-family: 'Kanit-Medium';
}
.whatwedo-box a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.whatwedo-box:hover h1{color: #f68b30;}
.whatwedo-box img{
	width: 35px;
	transform: rotate(-45deg);
	transition: all 0.6s;
	filter: invert(20%) sepia(45%) saturate(2520%) hue-rotate(253deg) brightness(97%) contrast(95%);
}
.whatwedo-box:hover img{
	transform: rotate(0);
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}
.whatwedo-box p{
	margin: 0;
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.3* 3);
}
.whatwedo-box:last-child{border-bottom: none;padding-bottom: 0;margin-bottom: 0;}

.img-work{
	text-align: center;
	overflow: hidden;
	background: #662e91;
	aspect-ratio:3/2;
}
.work-box{text-align: center;}
.work-box h1{
	font-size: 1rem;
	margin: .75rem 0;
	font-family: 'Kanit-Medium';
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.2* 1);
	text-transform: uppercase;
	position: relative;
	padding-bottom: 2rem;
}
.work-box h1::after{
	content: '';
	width: 60%;
	height: 4px;
	background: #662e91;
	left: 50%;
	bottom: 0;
	z-index: 1;
	position: absolute;
	transform: translate(-50% , 0);
}
.img-work img{
	width: 100%;
	height: 100%;
	opacity: .5;
	object-fit: cover;
}
.content-box.parkwork-home{overflow: hidden;}
.slidework .slick-list{overflow: inherit;}
.slidework .slick-slide{
	transform: scale(.85);
	transition: all 0.6s;
}
.slidework .slick-slide.slick-current.slick-active{
	transform: scale(1);
	transition: all 0.6s;
}
.slidework .slick-slide.slick-current.slick-active img{opacity: 1;}
.slidework .slick-prev:before, .slidework .slick-next:before{display: none;}
.slidework .slick-prev, .slidework .slick-next{
	width: 45px;
	height: 45px;
	background-size: 100% !important;
	border-radius: 50%;
	z-index: 1;
	filter: brightness(0) invert(1);
}
.slidework .slick-prev{left: 0;background: url( "../images/arrow-prev.png") center center no-repeat;}
.slidework .slick-next{right: 0;background: url("../images/arrow-next.png") center center no-repeat;}


.content-box.consult-home{background: #F8F8F8;}
.mapbox iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mapbox{
	width: 100%;
	overflow: hidden;
	aspect-ratio:3/3;
}

.contactform{
	padding: 2rem 1rem;
	color: #FFF;
	background-color: #662e91;
}
.contactform h1{
	font-size: 24px;
	margin-bottom: 2rem;
	text-transform: uppercase;
	font-family: 'Kanit-Medium';
}


.detail-form{margin-bottom: 1rem;}
.detail-form #captcha-refresh{
    cursor: pointer;
    color: #FFF;
	font-size: 1.4rem;
	vertical-align: middle;
}
.detail-form span, 
.detail-form p.red-text, 
.control-label span{
	color: #f68b30;
	display: initial;
}
.detail-form p{margin-bottom: 5px;}
.detail-form .custom-file-input,
.detail-form .custom-file{height: auto;}
.form-text, .custom-file-label{
    padding: 8px 15px;
	border: none;
	border-bottom: 1px solid #FFF;
    width: 100%;
	color: #FFF;
	border-radius: 0;
	height: auto;
	margin: 0;
	line-height: normal;
    background-color:transparent;
}
.form-text:focus{
	outline: none;
	box-shadow: none;
	border-color: #f68b30;
	color: #FFF;
}
.form-text::placeholder{color: #B4B4B4;}
.detail-form ul{list-style: none;}
.detail-form ul li{padding-bottom: 5px;}
.sendus-btn{
	width: 190px;
    padding: 8px;
    display: block;
    box-shadow: none;
    border: 1px solid #f68b30;
    color: #FFF;
    background: #f68b30;
    margin:1rem 0;
    cursor: pointer;
    transition: all 0.5s;
	border-radius: 30px;
}
.sendus-btn:hover{
    background: #FFF;
	color: #f68b30;
	border-color: #FFF;
}

.content-box.aboutpage{
	padding: 0;
	background: #f5f5f5;
}
.content-box.aboutpage .row{justify-content: center;}
.banner-otherpage{
	padding: 10% 0;
	background: url("../aboutus/images/bg-banner.png") center center no-repeat;
	background-attachment: fixed !important;
	background-size: cover !important;
}
.banner-otherpage .title-box{margin: 0;}
.banner-otherpage .title-box h1{color: #FFF;}


.imgabout-aboutpage{
	text-align: center;
	overflow: hidden;
	aspect-ratio:3/3;
	position: relative;
}
.imgabout-aboutpage img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.service{display: block;}
.removeservice{display: none;}

.textabout-aboutpage{margin-bottom: 2rem;}
.title-vision h1,
.textabout-aboutpage h1{
	font-size: 29px;
	margin-bottom: 1rem;
	color: #662e91;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.textabout-aboutpage span{
	color: #662e91;
	font-family: 'Kanit-Regular';
}
.textvision-aboutpage p,
.textabout-aboutpage p{margin-bottom: 1rem;}
.content-box.missionpage{background: #f5f5f5;}

/*.content-box.visionmissionpage{
	background: url("../aboutus/images/bggray.png") center center no-repeat;
	background-size: cover !important;
	background-attachment: fixed !important;
}*/
.textvision-aboutpage.text-right{text-align: left;}


.services-box{
	border-radius: 10px;
	margin-bottom: 2rem;
	background: #FFF;
	overflow: hidden;
	padding-bottom: 2rem;
	transition: all 0.6s;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.services-box .img-box{
	margin: 0;
	aspect-ratio:3/2;
}
.services-box .img-box img{
	height: 100%;
	object-fit: cover;
}
.services-box:hover {transform: translateY(-10px);}
.services-box:hover img{transform: scale(1.03);}
.text-service {padding: .5rem;}
.text-service h1{
	font-size: 1rem;
	color: #662e91;
	margin-bottom: .5rem;
	font-family: 'Kanit-Medium';
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.text-service h1 img{
	width: 35px;
	transform: rotate(-45deg);
	transition: all 0.6s;
	filter: invert(20%) sepia(45%) saturate(2520%) hue-rotate(253deg) brightness(97%) contrast(95%);
}
.services-box:hover  h1{color: #f68b30;}
.services-box:hover  h1 img{
	transform: rotate(0deg) scale(1);
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}
.text-service p{
	margin: 0;
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.2* 3);
	font-size: .9rem;
	color: #555555;
}

.textdetail-service{
	margin: 2rem auto;
}
.textdetail-service h1{
	font-size: 1.2rem;
	color: #662e91;
	margin-bottom: .5rem;
	font-family: 'Kanit-Medium';
}
.textdetail-service p{
	margin: 0;
	text-indent: 3%;
}
.textdetail-service .readmore-btn img{margin-left: 0;margin-right: 5px;}
.textdetail-service .readmore-btn:hover img{transform: translateX(-10px);}


.portfolio-tabs ul{
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
.portfolio-tabs ul li{
	width: auto;
	margin: auto;
}
.portfolio-tabs ul li a img{
	width: 60px;
	filter: invert(20%) sepia(45%) saturate(2520%) hue-rotate(253deg) brightness(97%) contrast(95%);
}
.portfolio-tabs ul li a{
	display: block;
	padding: 0 15px;
	text-align: center;
}
.portfolio-tabs ul li p{margin:1rem 0;}
.portfolio-tabs ul li a.active img,
.portfolio-tabs ul li a:hover img{ 
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}
.portfolio-tabs ul li a:hover img{transform: scale(1.03);}
.portfolio-tabs ul li a.active,
.portfolio-tabs ul li a:hover{color: #f68b30;}


.content-box.portfoliopage{padding: 10% 0;}
.content-box.portfoliopage:nth-child(2n+1){background: #f5f5f5;}
.port-box{
	margin-bottom: 2rem;
	border-radius: 10px;
	background: #FFF;
	overflow: hidden;
	padding-bottom: 1rem;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.port-box .img-box{
	margin: 0;
	aspect-ratio:3/2;
}
.port-box .img-box img{
	height: 100%;
	object-fit: cover;
}
.text-port{
	padding: .5rem;
}
.port-box.sustabox .text-port h1{
    -webkit-line-clamp: 1;
    height: calc(1rem* 1.5* 1);
}
.text-port h1{
	font-size: 1rem;
	margin-bottom: .5rem;
	color: #662e91;
	font-family: 'Kanit-Medium';
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.5* 2);
	text-transform: uppercase;
}
.text-port h2{
	font-size: .9rem;
	margin-bottom: .5rem;
	color: #f68b30;
	font-family: 'Kanit-Light';
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.2* 1);
}
.text-port p{
	margin: 0;
	font-size: .9rem;
	color: #838383;
	
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    height: calc(1rem* 1.3* 2);
}
.text-port img{
	width: 35px inherit;
	transform: rotate(-45deg);
	transition: all 0.6s;
	filter: invert(20%) sepia(45%) saturate(2520%) hue-rotate(253deg) brightness(97%) contrast(95%);
}
.port-box:hover img{transform: scale(1.06);}
.port-box:hover .text-port img{
	transform: rotate(0deg) scale(1);
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}


.text-port.textsusta .hvr-shutter-out-vertical:hover, .text-port.textsusta .hvr-shutter-out-vertical:focus, .text-port.textsusta .hvr-shutter-out-vertical:active{
	color: #f68b30;
	border-color: #f68b30;
}
.text-port.textsusta p,
.text-port.textsusta h1,
.text-port.textsusta h2{
	display: block;
    -webkit-line-clamp: inherit;
    height: auto;
}

.text-port.textsusta img{
	width: 33px;
	filter: brightness(0) invert(1);
	transform: rotate(0deg);
}
.text-port.textsusta .readmore-btn:hover img{
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}

.title-port .fa-angle-up{
	font-size: 23px;
	color: #662e91;
	transition: all 0.6s;
}
.title-port h1{
	font-size: 1.4rem;
	color: #662e91;
	margin: 0;
	font-family: 'Kanit-Medium';
}
.title-port{margin-bottom: 2rem;}
.title-port[aria-expanded="true"] .fa-angle-up{
	transform: rotate(0deg);
}
.title-port[aria-expanded="false"] .fa-angle-up{
	transform: rotate(180deg);
}

.collapsed#collapseport .card.card-body,
.collapse#collapseport .card.card-body{
	border: none;
	border-radius: 0;
	background: none;
	padding: 0;
}
.collapsed#collapseport .card.card-body:focus-visible,
.collapse#collapseport .card.card-body:focus-visible {outline: none;}



.pageclick{margin: 2rem auto 0;}
.pageclick ul{
	justify-content: center;
	align-items: center;
}
.pageclick ul li{
	width: auto;
	margin: 0;
}
.pageclick ul li a{
	margin: 0 5px;
	width: 40px;
	height: 40px;
	border: 1px solid #662e91;
	color: #662e91;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	background-color: transparent;
	border-radius: 50% !important;
	cursor:pointer;
}
.pageclick ul li.active a,
.pageclick ul li a:hover{
	color: #FFF;
	background: #662e91;
}

.content-box.relatedbox{background: #f5f5f5;}
.content-box.relatedbox .readmore-btn{margin: 2rem auto;}
.title-box h2{
	font-size: 1.4rem;
	margin: 0;
	color: #662e91;
	font-family: 'Kanit-Regular';
}
.textdetail-port h1{
	font-size: 1.2rem;
	color: #662e91;
	margin-bottom: 0;
	font-family: 'Kanit-Medium';
}
.textdetail-port h2{
	font-size: 1rem;
	color: #f68b30;
	margin-bottom: 1rem;
	font-family: 'Kanit-Regular';
}
.textdetail-port span{
	color: #000;
	font-family: 'Kanit-Regular';
}
.textdetail-port p{
	margin: 0;
	color: #828282;
}
.textdetail-port ul{list-style: none;}
.download-btn{
	padding: 6px;
	text-align: center;
	color: #FFF;
	border: 1px solid #662e91;
	overflow: hidden;
	width: 200px;
	border-radius: 30px;
	transition: all 0.6s;
	margin: 2rem 0;
}
.download-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
}
.download-btn img{
	filter: brightness(0) invert(1);
	width: 30px;
	margin-right: 10px;
	transition: all 0.6s;
}
.download-btn:hover{border-color: #f68b30;color: #f68b30;}
.download-btn:hover img{
	transform: translateX(-10px);
	filter: invert(62%) sepia(62%) saturate(942%) hue-rotate(336deg) brightness(97%) contrast(99%);
}
.logo-customers{
	text-align: center;
	margin-bottom: 1rem;
	border: 1px solid #e9d7f7;
	aspect-ratio:3/2;
	padding: .5rem;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo-customers img{
	width: 100%;
	height: 100%;
	transition: all 0.6s;
	object-fit: scale-down;
}
.logo-customers:hover{box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px;}
.logo-customers:hover img{transform: scale(.95);}

.video-present{
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio:3/2;
	margin-top: 2rem;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.video-present iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mapbox-contactpage{
	text-align: center;
	overflow: hidden;
	width: 100%;
	height: 280px;
}
.mapbox-contactpage iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mapbtn{
	width: 230px;
	padding: 6px;
	text-align: center;
	border-radius: 30px;
	border: 1px solid #f68b30;
	background: #FFF;
	margin: 1rem 0 2rem;
	color: #f68b30;
	transition: all 0.6s;
}
.mapbtn:hover{
	color: #662e91;
	border-color: #662e91;
}
.mapbtn a{
	display: flex;
	align-items: center;
	justify-content: center;
}
.mapbtn img{
	width: 33px;
	margin-right: 10px;
}
.address-box,
.social-box,
.contact-box{margin-bottom: 1rem;}
.social-box img{width: 40px;}
.social-box h1,
.contact-box h1,
.address-box h1{
	color: #662e91;
	font-size: 1.2rem;
	margin-bottom: .75rem;
	font-family: 'Kanit-Medium';
}
.contact-box a:hover{color: #f68b30;}
.address-box p{margin: 0;}
.address-box ul{list-style: none;}
.contact-box ul{list-style: none;margin-bottom: 1rem;}
.contact-box p{
	margin: 0;
	font-family: 'Kanit-Regular';
}
.contact-box img{width: 135px;}

.contactuspage .contactform{margin-bottom: 2rem;}
.contactuspage .contactform h1{
	font-size: 1.2rem;
	margin: 0;
	font-family: 'Kanit-Medium';
}
.contactuspage .contactform h2{
	font-size: 1rem;
	margin-bottom: 2rem;
	font-family: 'Kanit-Regular';
}

.text-policy{margin-bottom: 2rem;}
.text-policy h1{
	font-size: 1.2rem;
	margin-bottom: .5rem;
	font-family: 'Kanit-Medium';
}
.text-policy h2{
	font-size: 1rem;
	margin: 0;
	font-family: 'Kanit-Regular';
}
.text-policy a:hover{color: #662e91;}
.text-policy p{
	margin-bottom: 1rem;
	text-indent: 3%;
}
.text-policy .fa-circle{
	font-size: 10px;
	margin-right: 15px;
}
.text-policy .fa-angles-right{
	font-size: 14px;
	margin-right: 15px;
}
.text-policy ul{
	list-style: none;
	margin: 1rem auto;
	padding-left: 3%;
}

.slideprosucts .slider-for {margin-bottom: 1rem;}
.slideprosucts .slider-for .slick-slide{
	aspect-ratio:3/2;
}
.slideprosucts .slider-for .slick-slide div,
.slideprosucts .slider-for .slick-slide .img-box{
	margin: 0;
	height: 100%;
}
.slideprosucts .slider-for .slick-slide .img-box img{height: 100%;object-fit: cover;}
.slideprosucts .slick-prev:before, .slideprosucts .slick-next:before{display: none;}
.slideprosucts .slick-prev, .slideprosucts .slick-next{
	width: 25px;
	height: 25px;
	background-size: 100% !important;
	border-radius: 50%;
	z-index: 1;
	filter: invert(21%) sepia(19%) saturate(4853%) hue-rotate(250deg) brightness(103%) contrast(98%);
}
.slideprosucts .slick-prev{left: -.5rem;background: url( "../images/arrow-prev.png") center center no-repeat;}
.slideprosucts .slick-next{right: -.5rem;background: url("../images/arrow-next.png") center center no-repeat;}
.slideprosucts .slick-prev:hover{filter: invert(67%) sepia(76%) saturate(1955%) hue-rotate(335deg) brightness(97%) contrast(100%);}
.slideprosucts .slick-next:hover{filter: invert(67%) sepia(76%) saturate(1955%) hue-rotate(335deg) brightness(97%) contrast(100%);}
.slideprosucts .slider-nav .slick-slide{
	margin: 0 5px;
	aspect-ratio:3/2;
}
.slideprosucts .slider-nav{padding: 1rem;}
.slideprosucts .slider-nav .slick-slide{opacity: .4;}
.slideprosucts .slider-nav .slick-slide div,
.slideprosucts .slider-nav .slick-slide .img-box{
	margin: 0;
	height: 100%;
}
.slideprosucts .slider-nav .slick-slide .img-box img{height: 100%;object-fit: cover;}
.slideprosucts .slider-nav .slick-slide:hover,
.slideprosucts .slider-nav .slick-slide.slick-current.slick-active{opacity: 1;}

.textdetailsus{margin-top: 2rem;}
.textdetailsus h1{
	margin-bottom: 1rem;
}
.textdetailsus p{margin-bottom: 1rem;}



.content-box.visionpage{
	background: url("../aboutus/images/bggray.png") top center no-repeat;
	background-size: cover !important;
}
.taglinebox{
	padding: 8% 0;
	color: #FFF;
	text-align: center;
	background: url("../aboutus/images/bgtagline.png") center center no-repeat;
	background-attachment: fixed !important;
	background-size: cover !important;
}
.taglinebox h1{
	font-size: 28px;
	margin-bottom: .5rem;
	font-family: 'Kanit-Medium';
}
.taglinebox h2{
	font-size: 22px;
	margin: 0 ;
	font-family: 'Kanit-Regular';
}
.taglinebox img{
	width: 40px;
	filter: brightness(0) invert(1);
}
/*///////////Start-Policy///////////////*/
.policy-box{
    position: fixed;
    bottom: 0%;
    right: 0%;
    width: 100%;
    text-align: left;
    padding: 1rem ;
    color: #000 ;
    z-index: 1234;
    display: block;
    font-size: 1rem;	
	background:#FFF;
	box-shadow: 0 0 15px rgba(0,0,0,0.10);
}
.policy-box ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.policy-box ul li{padding: 0 10px;}
.policy-box p{
	font-size: 1.1rem !important; 
	margin-bottom: 0;
	color: #662e91;
	font-family: 'Kanit-Regular';
}
.policy-box a{text-decoration: underline;}
.policy-box a:hover{text-decoration: none;}
.policy-box .btn-policy{
    width: 150px;
    padding: 8px;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
    color: #FFF ;
    margin: .5rem auto;
	display: flex;
    align-items: center;
	border: 1px solid #662e91;
    justify-content: center;
	border-radius: 30px;
	background:#662e91;
	text-transform: uppercase;
}
.btn-policy:hover{
	transform: scale(.96);
	background:#FFF;
	color: #662e91;
}


/*///////////End-Policy///////////////*/

/*///////////Start-Footer///////////////*/
.footer{
	color: #282828;
	padding: 10% 0 5%;
	background: #FFF;
}
.footer ul{list-style: none;}
.footer h1{
	font-size: 18px;
	color: #662e91;
	margin-bottom: .5rem;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.footer p{margin-bottom: 0rem;}
.footer a:hover{color: #f68b30;}
.address-footer{margin-bottom: 2rem;}

.footer ul li{padding-bottom: 8px;}
.copyright-box{
	text-align: center;
	padding-top:1rem;
	margin:1rem auto 0;
	border-top:1px solid #f68b30;
}
.social-footer{
	text-align: center;
	margin: 0 auto 2rem;
}
.social-footer img{
	width: 33px;
	margin: auto;
	transition: all 0.6s;
}
.social-footer img:hover{transform: scale(1.02);}
.text-right{text-align: right;}
.text-left{text-align: left;}


.logo-footer{
	text-align: center;
	margin-bottom: 1rem;
}
.logo-footer img{
	width: 150px;
}

.contact-footer img{width: 100px;}


.subcate{
	padding: 8px 20px;
    text-align: center;
    color: #662e91;
    border: 1px solid #662e91;
    margin: 2rem auto;
    transition: all 0.6s;
	display:inline-block;
}
.subcate.active,
.subcate:hover{
	color: #f68b30;
    border-color: #f68b30;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.subcate.active{
	color: #FFF;
	background:#662e91;
    border-color: #662e91;
}


.video-presents{
	overflow: hidden;
	width: 100%;
	aspect-ratio:3/2;
	border-radius: 10px;
	margin-bottom: 3rem;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.video-presents iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.view-detail {
word-wrap: break-word;
}
.view-detail table,.view-detail img{
	max-width:100%;
}
.view-detail ul{
	padding-left:30px;
}

/*///////img-box-2///////*/
.pic-box,
.pic-box-2,
.pic-box-3 {
    text-align: center;
    position: relative;
    overflow: hidden;
    /* height: 220px; */
    padding-bottom: 100%;
}
.pic-box-2 {
    padding-bottom: 65%;
}
.pic-box-3 {
    padding-bottom: 60%;
}
.pic-box div ,
.pic-box-2 div ,
.pic-box-3 div {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-content: center;
    /* height: auto; */
    height: 100%;
    width: 100%;
    /* width: auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.pic-box div img ,
.pic-box-2 div img ,
.pic-box-3 div img  {
	/*max-height: 100% !important;
    width: auto !important;
    max-width: none !important;*/
	/*width: 100% !important;
	height: auto !important;
    max-width: none !important;
	max-width: 100%;*/
    max-height: 100%;
    /*width: auto;
    height: 100%;*/
	/*width: 100%;
    height: 100%;*/
	
	height: 100%;
    width: 100%;
    transition: all 0.5s;
    flex-grow: 0;
    object-fit: cover;
}



/*///////////End-Footer///////////////*/
@media (max-width: 920px) {
	body{max-width: 100% !important;}
	.navbar-collapse{
        position: fixed;
        width: 80%;
		background: #FFF;
        height: 100% !important;
        max-height: none !important;
        top: 0%;
        display: block;
        left: -100%;
		opacity: 0;
        margin: 0 !important;
        z-index: 55;
		transition: all .5s;
        overflow-y: scroll;
        box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.1);
	}
	.navbar-collapse::-webkit-scrollbar{width: 0;}
	.navbar-collapse.in{
		left: 0;
		opacity: 1;
		transition: all .5s;
	}
	.navbar-collapse.show {
		left: 0;
		opacity: 1;
		transition: all .5s;
	}
	.all-container{
		width: 100%;
	}
	.all-container.-collapse{
		transition: all .5s;
	}
	.navbar-expand-lg, .navbar-collapse, .navbar-collapse.collapsing, .all-container.all-container.all-container {
		transition: all .5s !important;
	}
	.navbar-expand-lg.-collapse {
		width:100%;
		transition: all .5s;
	}

	
}