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-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;
}
@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;
}

body{
   font-family: 'Kanit-Light';
	cursor: default;
	position: relative;
	line-height:1.5;
	font-size: 1rem;
	color: #282828;
	overflow-x: hidden;
}
body img{
	max-width: 100%;
}
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: 5px;
	width: 100%;
    background: #20479f;
    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: 90%;*/
    background: #ee2628;
}
#nav-icon3 span:nth-child(4) {
	top: 20px;
    background: #ffc010;
	/*width: 80%;*/
}
#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%;
    background: #ffc010;
}
#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///////////////*/
.headersocialbar{
	background: #FFF;
	padding: 9px 0;
	border-bottom: 2px solid #e8e8e7;
}
.headbar-main{
    padding: 1rem 0;
	display: block;
    transition: all 0.6s;
	background-color:#FFF;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.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: space-between;
}
.headbar-main .row{margin: auto;}
.navbar-brand {
    width: auto;
    text-align: left;
    color: #FFF;
    margin: 0;
	padding: 0;
}
.navbar-brand img{
	width: 200px;
	transition: all 0.5s;
	margin: auto;
}

.navbar-collapse .navbar-brand{
	padding: 1rem ;
	margin: auto;
	text-align: center;
	display: block;
	width: 100%;
	background: #FFF;
}
.navbar-collapse .navbar-brand img{width: auto;max-width: 100%;}

.navbar-nav li{
	padding: 0;
	position: relative;
	transition: all 0.5s;
}
.navbar-nav li a p{
	margin: 0;
	font-size: .9rem;
	font-family: 'Kanit-Regular';
}
.navbar-nav li a{
	padding: 8px 15px;
	display: block;
	text-align: center;
	text-decoration: none;
	transition: all 0.5s;
	position: relative;
	font-family: 'Kanit-Medium';
	border-bottom: 6px solid transparent; 
}
.navbar-nav li a.active, .navbar-nav a:hover{
	color: #000 ;
	background: #e8e8e7;
	border-color: #fbbe0e;
}
.navbar-nav li .dropdown-menu{
	padding: 0;
	border-radius: 0;
	border: none;
	background: #f5f5f5;
	font-size: .9rem;
	margin: 0;
}
.navbar-nav li .dropdown-menu a{
	padding: 10px 15px;
	display: block;
	text-align: center;
	color: #000;
	border-radius: 0; 
	border-bottom: none;
	background-color: transparent;
	font-family: 'Kanit-Light';
	font-size: .9rem;
}
.navbar-nav li .dropdown-menu a.active {
	color: #FFF;
	background: #20479f;
}
  
.navbar-nav li .dropdown-menu a:hover{
	color: #FFF ;
	background: #20479f ;
}
.social-header{
	text-align: left;
	padding: 0 15px;
	margin: 2rem auto 0;
	width: 100%;
}
.social-header img{
	width: 40px;
	transition: all 0.6s;
}
.social-header img:hover{
	transform: scale(.95);
	filter: none;
}
.social-header a:hover{color: #000;}
.social-header ul img{width: 25px;margin: 0 5px 0 0;}
.social-header ul{list-style: none;}
.social-header ul li a:hover{color: #fec110;}
.social-header ul li{margin-bottom: 10px;}
.headersocialbar{display: none;}
.social-header .icsize{
	font-size: 20px;
	margin-right: 5px;
}
/*///////////End-Header///////////////*/

/*///////////Start-mainSlide///////////////*/
#carouselmainSlide{position: relative;}
#carouselmainSlide .carousel-item{
	position: relative;
	overflow: hidden;
	background-size: 100% !important;
}
#carouselmainSlide .carousel-item.banner1{
	background: url("../images/bg-banner1.png") center center no-repeat;
}
/*#carouselmainSlide .carousel-item.banner2{
	background: url("../images/banner-2.png") center center no-repeat;
}
#carouselmainSlide .carousel-item.banner3{
	background: url("../images/banner-3.png") center center no-repeat;
}*/
#carouselmainSlide .carousel-item img{
	width: 100%;
	object-fit: cover;
}
#carouselmainSlide .carousel-control-next, 
#carouselmainSlide .carousel-control-prev{
	z-index: 5;
	opacity: 1;
}
#carouselmainSlide .carousel-control-next img, 
#carouselmainSlide .carousel-control-prev img{
	width: 35px;
	filter: brightness(0) invert(1);
}

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

.captoinbanner{
	width: 100%;
	text-align: center;
	left: 0;
	top: 0;
	z-index: 1;
	position: absolute;
	padding-top: 5%;
}
#carouselmainSlide .carousel-item .captoinbanner h1{
	font-size: 30px;
	margin: 0;
	line-height: 1;
	color: transparent;
	margin-left: 1rem;
	font-family: 'Kanit-Medium';
	background-image: linear-gradient(#a0a0a0, #FFF, #a0a0a0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 0 rgb(255 255 255 / 45%), -1px -1px 0 rgb(160 160 160 / 9%), 1px 1px 3px #0000001f, 2px 1px 4px #0000000d;
}
#carouselmainSlide .carousel-item.banner2 .captoinbanner{text-align: left;}
#carouselmainSlide .carousel-item.banner3 .captoinbanner{
	text-align: left;
	bottom: 0;
	top: auto;
	padding-top: 0;
	padding-bottom: 7%;
	padding-left: 5%;
}
#carouselmainSlide .carousel-item.banner3 .captoinbanner h1{
	text-shadow: 0 0 0 rgb(255 255 255 / 51%), -1px 1px 0 rgb(160 160 160 / 20%), 2px 3px 3px #0000000a, 2px 2px 4px #00000000;
}
#carouselmainSlide .carousel-item .captoinbanner img{width: 65px;margin-bottom: 2rem;}


#carouselmainSlide .carousel-item.banner1 .captoinbanner{
	width: auto;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
}
#carouselmainSlide .carousel-item.banner1 .captoinbanner img {
    display: block;
    position: relative;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
	transform: translateX(0);
    animation-name: slide-in-left;
	margin: auto;
}
#carouselmainSlide .carousel-item.banner1 .captoinbanner img#bannerlogo2{
	width: 65%;
	transform: translateX(0%);
    animation-name: slide-in-right;
}
#carouselmainSlide .carousel-item.banner1 .captoinbanner img#bannerlogo1{
	transform: translateX(-100%);
    animation-name: slide-in-left;
}
@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}
/*///////////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: left;
	margin-bottom: 2.5rem;
}
.title-box h1,.bannerpage .title-box h1{
	font-size: 26px;
	margin: 0;
	color: #20479e;
	text-transform: uppercase;
	font-family: 'Kanit-Medium';
}
.bannerpage .title-box h1{
	color: #3f3f3f;
	font-size: 1rem;
	 text-shadow: 0px 0px 0 #585858, 0px 0px 0 #585858, 0px 0px 0 #ffffff, 1px 1px 4px #ffffff;
}
.title-box h2{
	font-size: 20px;
	margin:0;
	text-transform: uppercase;
	font-family: 'Kanit-Regular';
}
.subtitle-box {
	font-size: 0.7rem;
    color: #1f2e4e;
    font-family: 'Kanit-Regular';
}

.title-box p{margin: 0;}
.title-box ul{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.title-box ul li{
	margin: 0 5px;
	opacity: .5;
	color: #000;
	font-size: .45rem;
}
.title-box ul li a{padding: 0 5px;}
.title-box ul li.active,
.title-box ul li:hover{opacity: 1;}

.subtitle{margin-bottom: 2rem;}
.subtitle h2{
	font-size: 24px;
	margin: 0;
	font-family: 'Kanit-Medium';
}
.content-gray{background: #ececec;}
.readmore-btn{
	/*width: 165px;*/
	width: auto;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    margin: 1rem 0 2rem 0;
    
	/*margin: 2rem 0 1rem 0;
	padding: 8px;*/
	text-align: center;
	overflow: hidden;
	border: 1px solid #000;
	background: #fbbe0e;
	font-family: 'Kanit-Regular';
	float: right;

}
.readmore-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
}
.readmore-btn img{
	width: 20px;
	margin: 0 5px;
	filter: invert(22%) sepia(24%) saturate(5418%) hue-rotate(209deg) brightness(92%) contrast(93%);
}
/* Skew Forward */
.hvr-skew-forward {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Backward */
.hvr-skew-backward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active {
  -webkit-transform: skew(10deg);
  transform: skew(10deg);
}


.content-box.abouthome{padding-bottom: 0;}
.textabout-home h1{
	font-size: 26px;
	margin-bottom: .5rem;
	color: #20479e ;
	font-family: 'Kanit-Medium';
}
.textabout-home span{
	color: #20479e ;
	font-style: italic;
	font-family: 'Kanit-Medium';
}
.textabout-home p{margin-bottom: 1rem;}
.textabout-home h2{
	font-size: 18px;
	margin: 0;
	font-family: 'Kanit-Medium';
}



.solutions-box{
	overflow: hidden;
	position: relative;
	transition: all 0.6s;
	border: 4px solid transparent;
	margin-bottom: 1rem;
	height: 251px;
	max-width: 100%;
}
.solutions-box:hover{border-color: #20479e ;}
.solutions-box img{
	width: 100%;
	object-fit: cover;
	height: 100%;
	transition: all 0.6s;
}
.solutions-box img.arrowimg{
	width: 18px;
	position: absolute;
	z-index: 2;
	left: 1rem;
	bottom: 1rem;
	height: auto !important;
	object-fit: scale-down !important;
}
.solutions-box:hover img.arrowimg{
	transform: translateX(5px);
	filter: invert(22%) sepia(24%) saturate(5418%) hue-rotate(209deg) brightness(92%) contrast(93%);
}
.solutions-box:hover img{transform: scale(1.05);}
.textdetail{
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	position: absolute;
	padding: 1rem;
	transition: all 0.6s;
	
}

.solutions-box:hover .textdetail{
	background:-webkit-linear-gradient(left, rgb(255 255 255) 15%, rgba(255, 255, 255, 0) 100%);
	background:-o-linear-gradient(left, rgb(255 255 255) 15%, rgba(255, 255, 255, 0) 100%);
	background:linear-gradient(to right, rgb(255 255 255) 15%, rgba(255, 255, 255, 0) 100%);
}
.textdetail p{
	font-size: .9rem;
	margin: .5rem 0;
	font-family: 'Kanit-Regular';
	text-shadow: 0 0 11px #FFF,0 0 11px #FFF,0 0 11px #FFF,0 0 11px #FFF,0 0 11px #FFF,0 0 11px #FFF;
}
.solutions-box.solutions-boxlong{
	aspect-ratio:2;
}
.solutions-box.solutions-boxlong img{
	object-fit: cover;
	height: 100%;
}
.solutions-box.itemsbox .textdetail p{text-shadow: none;}


.solutions-box span img,
.solutions-box span img{
	width: auto !important; 
	height: 25px !important;
	max-width: 100%;
	 
	object-fit: scale-down!important;
}
/*.solutions-box.itemsbox1 img.arrowimg,
.solutions-box.itemsbox img.arrowimg{
	filter: brightness(0) invert(1);
}
 */


.bannerpage{
	padding: 3% 0;
	background-size: cover !important;
	background-attachment: fixed !important;
}
.bannerpage.aboutpage{
	background: url("../aboutus/images/bannerabout.png") center center no-repeat;
}
.bannerpage .title-box{
	margin: 0;
}
.content-box.aboutpageone{
	/*background: url("../aboutus/images/bg1-aboutus.png") top right no-repeat;
	background-size: 100% !important;*/
}

.title-pagebox{margin-bottom: 2rem;}
.title-pagebox h1{
	font-size: 2rem;
	margin: 0;
	line-height: 1;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.title-pagebox p{
	margin: 0;
	font-size: 1.5rem;
	text-transform: uppercase;
}
.text-aboutpage h1{
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.text-aboutpage h2{
	font-size: 24px;
	margin-bottom: 1rem;
	/*font-style: italic;
	color: #20479e;*/
	font-family: 'Kanit-Medium';
	 
}
.text-aboutpage p{margin-bottom: 1rem;}
.text-aboutpage span{
	/*color: #20479e;
	font-style: italic;*/
	font-size: 18px;
	font-family: 'Kanit-Medium';
	 
}
.text-aboutpage ul{list-style: none;}

.content-box.aboutpagetwo{
	/*background: url("../aboutus/images/bg2-aboutus.png") top right -4rem no-repeat #eaeaea;
	background-size: 100% !important;*/
	background: #eaeaea;
}
.subtitle-page{margin-bottom: 2rem;}
.aboutpagetwo .subtitle-page{margin-bottom: 0;}
.subtitle-page h1{
	font-size: 2rem;
	margin: 0;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.aboutpagetwo .subtitle-page h1{font-size: 1.6rem;}
.subtitle-page p {
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Kanit-Regular';
}
.aboutpagetwo .subtitle-page p{font-size: 1.2rem;}
.content-box.aboutpage .text-vision{margin-bottom: 2.5rem;}
.text-vision p{margin: 0;}
.text-vision span{
	color: #20479e;
	font-family: 'Kanit-Medium';
}

/*.tagline{
	background: url("../aboutus/images/tagline.png") right bottom no-repeat;
	background-size: 100% !important;
}*/
.tagline h2{
	font-size: 60px;
	margin: 0;
	color: #ec2428;
	font-family: 'Kanit-Medium';
}
.tagline h1{
	font-size: 60px;
	margin: 0;
	color: #20479e;
	font-family: 'Kanit-Medium';
}

.textcenter-products{
	text-align: center;
	margin-bottom: 2rem;
}
.textcenter-products h1{
	color: #20479e;
	font-size: 1.5rem;
	font-family: 'Kanit-Medium';
}
.textcenter-products h2{
	font-size: 1.2rem;
	font-style: italic;
	margin: 0;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.textcenter-products p{margin: 0;}
.textcenter-products img{
	width:auto;
	max-width: 100%;
}
.solutions-box.products-box .textdetail p{
	font-size: 1.2rem;
	text-shadow: 0 0 5px #FFF, -1px -1px 3px rgb(255 255 255), 0 0 5px #FFF;
	text-transform: uppercase;
	margin: 0;
	font-family: 'Kanit-Medium';
	line-height: 1.2;
}
.solutions-box.products-box{aspect-ratio:3/2;}
.solutions-box.products-box {background: #20479e;}
.solutions-box.products-box img{opacity: 1;}
.solutions-box.products-box:hover img{opacity: 1;}



.bannerpage.productpage{background: url("../productsconsumers/images/bannerpro.jpg") center center no-repeat;}
.bannerpage.productpage-2{
	background-image: url("../productsconsumers/images/bannerpro2.jpg"); /* Specify the path to your image */
	    background-repeat: no-repeat; /* Optional: Prevents image from repeating if it doesn't fill the height */
        background-position: center top; /* Optional: Adjusts image positioning */
        background-size: 100% auto !important;
      
      background-attachment: inherit  !important;
}
.textview-pro{
	text-align: center;
	margin-bottom: 2rem;
	overflow: hidden;
}
.textview-pro img{
	width: auto;
	max-width: 100%;
	margin: 1rem auto;
}
.textview-pro ul{
	/*list-style: none;*/
	list-style: inherit;
    margin-left: 40px;
    display: inline-block;
    text-align: inherit;
}
.textview-pro p{margin: 0;}
.textview-pro h1{
	font-size: 33px;
	margin: 0;
	color: #20479e;
	text-transform: uppercase;
	font-family: 'Kanit-Medium';
	line-height: normal;
}
.productview{
	/*text-align: center;*/
	margin-bottom: 2rem;
}
.productview:hover .img-box{box-shadow: 0 0 10px rgba(0,0,0,0.15);}
.productview:hover img{transform: scale(1.05);}
.productview h1{
	font-size: 1.2rem;
	margin: 1rem auto;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.productview h1:hover{
	color: #fec110;
}
.title-details{
	text-align: center;
	margin-bottom: 2rem;
}
.title-details img{
	width: 33px;
	margin-left: 10px;
}
.title-details a{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top:1rem;
}

.title-details-2 {
	margin-bottom: 5px;
}
.title-details-2 a{
	display: flex;
	align-items: normal;
	justify-content: normal;

}
.title-details a:hover{text-decoration: underline;}
.title-details h1{
	font-size: 1.8rem;
	margin-bottom: .5rem;
	color: #20479e;
	font-family: 'Kanit-Medium';
	text-transform: uppercase;
}
.title-details h2{
	font-size: 24px;
	margin-bottom: 0;
	color: #000;
	font-family: 'Kanit-Regular';
	text-transform: uppercase;
}
.title-details p{margin: 0;}
.img-gallery{
	text-align: center;
	margin-bottom: 2rem;
	overflow: hidden;
}
.img-gallery img{
	width: 100%;
	transition: all 0.6s;
}
.img-gallery-s{
	text-align: center;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio:3/2;
	background: #FFF;
	margin-bottom: 1rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.img-gallery-s a{width: 100%;height: 100%;display: block;object-fit: cover;}
.img-gallery-s h1{
	font-size: 1rem;
	margin: 0;
	color: #7a7a7a;
	text-transform: uppercase;
}
.img-gallery-s img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.img-gallery-s:hover img{transform: scale(1.05);}
.videopresent{
	width: 100%;
	height: 315px;
	overflow: hidden;
}
.videopresent iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.textdetail-products h1{
	font-size: 1.4rem;
	margin-bottom: 1rem;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.textdetail-products span{
	color: #ee2628;
	/*font-style: italic;*/
	font-family: 'Kanit-Regular';
}
.textdetail-products p{margin: 0;}
/*.textdetail-products ul{
	list-style: none;
}*/
.textdetail-products ul {
    list-style: inherit;
    margin-left: 40px;
}
.textdetail-products ul li{margin-bottom: 5px;}





.bannerpage.contactpage{background: url( "../contactus/images/bannercontact.png") center bottom no-repeat;}
.mapbox{
	width: 100%;
	height: 285px;
	overflow: hidden;
}
.mapbox iframe{
	width: 100%;
	height: 100%;
}
.address-box{margin-bottom: 3rem;}
.address-box h1{
	font-size: 28px;
	margin-bottom: 0;
	color: #20479e;
	font-family: 'Kanit-Medium';
}
.address-box img{
	width: 45px;
	transition: all 0.6s;
}
.address-box a:hover{color: #ffc010;}
.address-box img:hover{filter: invert(83%) sepia(12%) saturate(3889%) hue-rotate(348deg) brightness(101%) contrast(99%);}
.address-box ul{
	list-style: none;
	margin: 1rem auto;
}
.address-box ul li{margin-bottom: 5px;}
.content-box.contactpage{
	/*background: url("../contactus/images/bg2-contact.png") right top no-repeat;
	background-size: 50% !important;*/
}

.formcontact{
	color: #FFF;
	padding:2rem ;
	background-color: #20479f;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.formcontact h1 {
    font-size: 33px;
    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: #F00;
	display: initial;
}
.detail-form p{margin-bottom: 10px;}
.detail-form .custom-file-input,
.detail-form .custom-file{height: auto;}
.form-text, .custom-file-label{
    padding: 8px 10px;
	border: 1px solid #FFF;
    width: 100%;
	color: #FFF;
	border-radius: 5px;
	height: auto;
	margin: 0;
	line-height: normal;
    background-color:#20479f;
}
.form-text:focus{
	outline: none;
	box-shadow: none;
	border-color: #ffc010;
	color: #FFF;
}
.form-text::placeholder{color: #c0c0c0;}
.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 #FFF;
    color: #20479f;
    background: #FFF;
    margin:1rem auto;
    cursor: pointer;
    transition: all 0.5s;
	border-radius: 20px;
}
.sendus-btn:hover{
    background: #20479f;
	color: #FFF;
	
}



.bannerpage.newspage{background: url("../newsandpromotions/images/bannernews.png") center center no-repeat;}
.news-box{margin-bottom: 1rem;}
.news-box .img-box {
    margin-bottom: 1.5rem;
}
.textnews h1{
	font-size: 1rem;
	color: #20479f;
    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.2* 2);
    margin-bottom: 0;
}
.textnews p{
	margin: 0;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem* 1.2* 2);
}
.news-box .img-box{
	aspect-ratio:3/2;
	border: 3px solid #ffffff;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	overflow: hidden;
}
.news-box .img-box img{height: 100%;object-fit: cover;}
.news-box:hover .img-box img{transform: scale(1.05);}
.news-box:hover .img-box{border: 3px solid #20479f;}
.content-box.newspage{
	/*background: url("../newsandpromotions/images/bgnews.png") top right no-repeat;
	background-size: 100% !important;*/
}
.textview-pro h2{
	font-size: 1.2rem;
	margin: 0;
	color: #000;
    font-family: 'Kanit-Regular';
}


.title-news{margin-bottom: 3rem;}
.title-news h1{
	font-size: 26px;
	margin-bottom: .75rem;
    font-family: 'Kanit-Medium';
}
.title-news ul{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: .9rem;
	color: #5f5f5f;
}
.title-news ul li{
	width: auto;
	margin: 0 15px 0 0;
}

.textdetail-news h1{
	font-size: 1.4rem;
	margin-bottom: 1rem;
    font-family: 'Kanit-Medium';
}
.textdetail-news .fa-circle{
	font-size: 12px;
	margin-right: 10px;
}
.textdetail-news p{margin-bottom: 1rem;}
.textdetail-news ul{
	/*list-style: none;*/
	margin-left: 3%;
	margin-top: 3%;
	margin-bottom: 3%;
}
.textdetail-news ul span{
	color: #ee2628;
    font-family: 'Kanit-Regular';
}
.textdetail-news ul li{margin-bottom: 5px;}
.textdetail-news h2 a{/*color: #ee2628;*/}
.textdetail-news h2{
	font-size: 1.2rem;
	margin-bottom: 1rem;
    font-family: 'Kanit-Regular';
}
.content-box.relatedbox{background: #f5f5f5;}
.readmore-btn.readmore-news{margin: 2rem auto;}

.pageclick{margin-top: 2rem;}
.pageclick .page-link{
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	color: #20479f;
	border: 1px solid #20479f !important;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
	transition: all 0.6s;
}
.pageclick .page-link:hover{
	color: #FFF;
	background: #ee2628;
	border-color: #ee2628 !important;
	transform: scale(.9);
}
.pageclick ul{justify-content: center;}





.text-policy{margin-bottom: 1rem;}
.text-policy h1{
	font-size: 1.1rem;
	margin-bottom: .75rem;
	font-family: 'Kanit-Medium';
}
.text-policy h2{
	font-size: 1rem;
	margin-bottom: .75rem;
	font-family: 'Kanit-Medium';
}
.text-policy h3{
	font-size: 1rem;
	margin-bottom: 0;
	font-family: 'Kanit-Regular';
}
.text-policy a:hover{color: #ee2628;}
.text-policy ul{
	list-style: none;
	padding-left: 3%;
	margin: 1rem auto;
}
.text-policy ul li{margin-bottom: 8px;}
.text-policy .fa-circle-chevron-right{
	font-size: .9rem;
	margin-right: 10px;
	vertical-align: middle;
}
.text-policy p{
	margin-bottom: 1rem;
	text-indent: 1%;
}
/*///////////Start-Policy///////////////*/
.policy-box{
    position: fixed;
    bottom: 0%;
    right: 0%;
    width: 100%;
	height: 100%;
    text-align: left;
    color: #000 ;
    z-index: 1234;
    font-size: 0.8rem;	
	background: rgba(0,0,0,0.1);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	 
}
.policy-box .container{
    padding:1rem 1rem 0.5rem 1rem ;
	background:#FFF;
	position: relative;
	max-width: none;
	margin: 0;
	box-shadow: 0 0 15px rgba(0,0,0,0.10);
}
.closebtn{
	position: absolute;
	right: 1rem;
	top: .5rem;
	z-index: 1;
}
.closebtn:hover{color: #f00;}
.policy-box ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.policy-box ul li{padding: 0 10px;}
.policy-box p{
	font-size: 1rem !important; 
	color: #20479f;
	margin-bottom: 0;
	font-family: 'Kanit-Medium';
}
.policy-box a{color: #20479f;}
.policy-box a:hover{color: #ee2628;}
.policy-box .btn-policy{
    width: 150px;
    padding: 8px;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
    color: #FFF ;
    margin:  auto 1rem;
	display: flex;
    align-items: center;
    justify-content: center;
	text-transform: uppercase;
	border: 1px solid #20479f;
	background: #20479f;
}
.btn-policy:hover{
	color: #FFF;
	background: #ffc010;
	border-color: #ffc010;
	 
}
.btn-unasept{
    width: 150px;
    padding: 8px;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
    color: #FFF ;
    /*margin: .5rem auto;*/
	display: flex;
    align-items: center;
    justify-content: center;
	text-transform: uppercase;
	border: none;
	background: #868686;
}
.btn-unasept:hover{
	color: #FFF;
 	background: #ee2628;
	border-color: #ee2628;
}

/*///////////End-Policy///////////////*/
/***************************/
 
 
.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:30%;
  left:0;
  right:0;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}
/********************/
/*////////////// //////////////////////////////pagelist//////// /////////////////////////////////////////////////*/
.text-notfound{
	margin:30px auto;
	font-size: 1.4rem;
    text-align: center;
}
.pagelist{
	text-align: center;
	padding:5px;
	border-radius:0px;
	/* margin:0 5px 20px 5px;*/
	margin: 20px auto;
	justify-content: center;
	display: flex;
}
.pagelist li{
	display:inline-block;
	font-size:18px;
	cursor:pointer;
	padding: 0.1rem 0rem;
	margin: 0.2rem;
	border:1px solid #ffffff;
	border-radius: 5px;

	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	color: #20479f;
	border: 1px solid #20479f !important;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
	transition: all 0.6s;


}
.pagelist li.disabled a,
.pagelist li.disabled a:hover{
	 color:#0e0e0e;
	 transition: all 0.4s;
}
.pagelist li.disabled a,
.pagelist li.disabled a:hover{
 color:#d4d4d4;
}
.pagelist li a{
	color: #20479f;
	display:block;
	padding:0px 12px;
	font-weight:bold;
}
.pagelist li a i.fa{
 font-size:18px;
 vertical-align: middle;
}

.pagelist>li:first-child>a, .pagelist>li:first-child>span , .pagelist>li:last-child>a, .pagelist>li:last-child>span {
 border-radius:0px;
}
.pagelist li.active{
    background: #ee2628;
	transition: all 0.4s;
}
.pagelist li a:hover{
    color: #ffffff ;
	transition: all 0.4s;
}
.pagelist li.active a {
    color: #ffffff;
}
.pagelist li:hover{
	color: #FFF;
	background: #ee2628;
	border-color: #ee2628 !important;
	transform: scale(.9);
}
 
/********************/
.gallery-box{
	text-align: center;
	overflow: hidden;
	aspect-ratio:3/2;
	margin-bottom: 1rem;
}
.gallery-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*///////////Start-Footer///////////////*/
.footer{
	color: #FFF;
	padding: 10% 0 5%;
	background: #20479e;
}
.footer ul{
	list-style: none;
	margin: .5rem auto;
}
.footer h1{
	font-size: 1rem;
	color: #fec110;
	margin-bottom: .5rem;
	text-transform: uppercase;
	font-family: 'Kanit-Regular';
}
.footer hr{
	width: 3em;
	margin: .5rem 0 .75rem;
	opacity: 1;
	border-color: #000;
}
.footer p{margin-bottom: 0rem;}
.footer a:hover{color: #fec110;}
.footer ul li{padding-bottom: 5px;}
.contact-footer{margin: 2rem auto;}
.address-footer img{
	width: 150px;
}
.social-footer  img{
	width: 35px;
	filter: brightness(0) invert(1);
	transition: all 0.6s;
}
.social-footer img:hover{
	transform: scale(.95);
	filter: invert(83%) sepia(12%) saturate(3889%) hue-rotate(348deg) brightness(101%) contrast(99%);
}
.copyright-box{
	text-align: center;
	margin-top: 2rem;
}
.text-right{text-align: right;}
.text-left{text-align: left;}



.alltext-vision > div{
	margin: 1rem auto;
}

/**************************************/
img.arrowimg{
	width: 18px;
	height: auto !important;
	object-fit: scale-down !important;
	transition: all 0.6s;
 
}
a:hover img.arrowimg{
	transform: translateX(5px);
	filter: invert(22%) sepia(24%) saturate(5418%) hue-rotate(209deg) brightness(92%) contrast(93%);
}

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

.slideproductshow .slider-for{margin-bottom: 1rem;}
.slideproductshow .slider-for .slick-slide{
	aspect-ratio:3/2;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.slideproductshow .slider-for .slick-slide div,
.slideproductshow .slider-for .slick-slide .img-box{
	margin: 0;
	height: 100%;
	background: #f5f5f5;
}
.slideproductshow .slider-for .slick-slide .img-box img{height: 100%;object-fit: scale-down;}
.slideproductshow .slick-prev:before, .slideproductshow .slick-next:before{display: none;}
.slideproductshow .slick-prev, .slideproductshow .slick-next{
	width: 35px;
	height: 35px;
	background-size: 100% !important;
	border-radius: 50%;
	z-index: 1;
}
.slideproductshow .slick-prev{left: 0rem;background: url( "../images/left-arrow.png") center center no-repeat;}
.slideproductshow .slick-next{right:0rem;background: url("../images/right-arrow.png") center center no-repeat;}
.slideproductshow .slick-prev:hover,
.slideproductshow .slick-next:hover{filter:none;}

.slideproductshow .img-box{padding: .5rem; border-radius: 10px;}
.slideproductshow .slider-nav .slick-slide{
	margin: 0 5px;
	aspect-ratio:3/2;
	border: 1px solid #0380ff;
}
.slideproductshow .slider-nav{padding: 1rem;}
.slideproductshow .slider-nav .slick-slide{opacity: .4;transform: scale(.95);background: #FFF;}
.slideproductshow .slider-nav .slick-slide div,
.slideproductshow .slider-nav .slick-slide .img-box{
	margin: 0;
	height: 100%;
	background: #FFF;
	transition: all 0.6s; 
	cursor: pointer;
}
.slideproductshow .slider-nav .slick-slide .img-box img{height: 100%;object-fit: scale-down;}
.slideproductshow .slider-nav .slick-slide:hover,
.slideproductshow .slider-nav .slick-slide.slick-current.slick-active{
	opacity: 1;
	transform: scale(1);
	transition: all 0.6s;
}
.contact-detail{
	margin: 10px auto;
}
.contact-detail img{
 	height: 30px;
 	transition: all 0.6s;
}

.contact-detail img:hover{
 	transform: scale(1.1);
}
.contact-detail > a:last-child {
  margin:  auto 3px;
}


.bt-sendorder{
	display: inline-block;
	background: #fbbe0e;
	padding: 5px 10px;
	margin: 10px auto;
}
/***********************************/

.btn-cookiepolicy .small{
	font-size: 0.68rem;
}
.boxcontactus-social a{
	margin: auto 2px ; 
}
/***********************************/

/*///////////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;
	}

	
}




@media (min-width:400px) {
}


.pagelaod{
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.8);
	position: absolute;
	z-index: 4444;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loader {
  color: #FFF;
  font-size: 20px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
	display: flex;
	align-items: center;
	justify-content: center;
}
.loader img{
	width: 75px;
	animation: scaleblogo 1.3s infinite linear;
}
@keyframes scaleblogo{
	0%{transform: scale(1);}
	25%{transform: scale(.8);}
	100%{transform: scale(1);}
}
@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 
    2em -2em 0 0em, 3em 0 0 -1em, 
    2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 
    2em -2em 0 0, 3em 0 0 0.2em, 
    2em 2em 0 0, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}