.mainpage{min-width:320px;position:relative;width:100%;height:100%;overflow-x:auto;padding:0;float:left;}
#bg-home{background:#fff url(../images/bg.jpg)no-repeat center -60px;background-size:1200px;}
#bg-page{background:#fff url(../images/bg-page.jpg)no-repeat center top;background-size:1200px}

/* header */
.h-home{display:grid;grid-template-columns:20% 1fr;grid-template-areas:"h-left h-right";max-width:1200px;margin:0 auto;padding: 0 5%;
text-align:center;align-items:center;}
.head-left{grid-area:h-left;display:grid;padding:10px;text-align:left;overflow:hidden;border-radius:0 0 12px 12px;
	background: rgba(18,151,71,1);
background: -moz-linear-gradient(top, rgba(18,151,71,1) 0%, rgba(18,151,71,1) 35%, rgba(31,67,39,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,151,71,1)), color-stop(35%, rgba(18,151,71,1)), color-stop(100%, rgba(31,67,39,1)));
background: -webkit-linear-gradient(top, rgba(18,151,71,1) 0%, rgba(18,151,71,1) 35%, rgba(31,67,39,1) 100%);
background: -o-linear-gradient(top, rgba(18,151,71,1) 0%, rgba(18,151,71,1) 35%, rgba(31,67,39,1) 100%);
background: -ms-linear-gradient(top, rgba(18,151,71,1) 0%, rgba(18,151,71,1) 35%, rgba(31,67,39,1) 100%);
background: linear-gradient(to bottom, rgba(18,151,71,1) 0%, rgba(18,151,71,1) 35%, rgba(31,67,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#129747', endColorstr='#1f4327', GradientType=0 );
	}
		.hl-tx1{margin-top:6px;color:#fff;font-family:'thai_sans_literegular', sans-serif;font-weight:900;font-size:1em;line-height:0.8}
		.hl-tx2{color:#fff;font-family:'thai_sans_literegular', sans-serif;font-weight:100;font-size:0.7em;line-height:0.8}		
	.head-right{grid-area:h-right;background:none;display:block;position:relative;background:rgba(255, 255, 255, 0.7);
	-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.head-fix{position:fixed;top:0;left:0;width:100%;z-index:8887;box-shadow:0 3px 40px rgba(0, 0, 0, 0.2);background:#1f3f82;}
.head-fix ul li a.menu-main{color:#fff;padding:0 15px;}
.head-fix ul li.nav-menu:hover{background:#00b8f5}
/* main */
.tx-topic{color:#fff;font-family:'thai_sans_literegular', sans-serif;font-size:0.96em;}
.tx-c2{color:#fff;font-family:'thai_sans_literegular', sans-serif;font-size:0.8em;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.55);}
.tx-big{font-size:2.8em;font-family:'Fjalla One','thai_sans_literegular', sans-serif;color:#ffd104;font-weight:900;text-align:center;}
.tx-ct{font-size:0.9rem;line-height:1;color:#444;text-indent:60px;font-family:'thai_sans_literegular', sans-serif;}
.tx-ct2{font-size:0.9rem;line-height:1.2;color:#444;text-indent:60px;font-family:'thai_sans_literegular', sans-serif;margin:10px auto 20px}

.sec-1{margin:15% auto 40px;display:grid;width:100%;grid-gap:20px;
grid-template-columns:1fr 1fr 1fr;grid-template-areas:"sec1-1 sec1-2 sec1-3";}
	.sec-1-1{grid-area:sec-1-1;}.sec-1-2{grid-area:sec-1-2;}.sec-1-3{grid-area:sec-1-3;}
	.at-1-box{color:#0681dc;text-align:center;background:#fff;box-shadow:0 2px 30px rgba(0, 0, 0, 0.1);padding:0 0 20px;
	-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
	.at-1-box:hover{margin-top:-15px;box-shadow:0 8px 60px rgba(0, 0, 0, 0.3);
	-webkit-filter:contrast(110%);filter:contrast(110%);-webkit-filter:brightness(115%);filter:brightness(115%);}
.h-at-topic{width:80%;font-size:0.9em;text-align:left;padding:20px 15px 10px;position: relative;display:block;
font-family:'Fjalla One','thai_sans_literegular', sans-serif;color:#0075be;
-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.at-1-box:hover .h-at-topic{width:100%;}
.h-at-topic:after{content: '';width:100%;height:5px;position: absolute;bottom:5px;left:0;
background: rgba(19,194,242,1);
background: -moz-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,194,242,1)), color-stop(100%, rgba(102,55,141,1)));
background: -webkit-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -o-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -ms-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: linear-gradient(to right, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13c2f2', endColorstr='#66378d', GradientType=1 );
}
.at-1-cover1{width:100%;overflow:hidden;height:120px;position:relative;display:block;margin-top:-5px;
background:#f3f3f3 url(../images/banner/sec1-1.png)no-repeat center center;background-size:cover;}	
.at-1-cover2{width:100%;overflow:hidden;height:120px;position:relative;display:block;margin-top:-5px;
background:#f3f3f3 url(../images/banner/sec1-2.png)no-repeat center center;background-size:cover;}	
.at-1-cover3{width:100%;overflow:hidden;height:120px;position:relative;display:block;margin-top:-5px;
background:#f3f3f3 url(../images/banner/sec1-3.png)no-repeat center center;background-size:cover;}	
.p-at1{width:100%;overflow:hidden;position:relative;display:block;margin:0 auto;padding:25px 10%;}

.sec2{margin:0 auto;display:grid;width:100%;grid-gap:20px;align-items:center;
grid-template-columns:1fr 30%;grid-template-areas:"sec2-ct sec2-img";}
	.sec2-ct{grid-area:sec2-ct;}.sec2-img{grid-area:sec2-img;margin-right:-40px;}
.sec2-2{margin:0 auto 30px;display:grid;width:100%;grid-gap:20px;align-items:center;
grid-template-columns:25% 1fr;grid-template-areas:"sec2-2-img sec2-2-ct";}
	.sec2-2-ct{grid-area:sec2-2-ct;}.sec2-2-img{grid-area:sec2-2-img;}

.sec3-box{display:grid;width:100%;grid-gap:10px;padding:5px;align-items:center;margin:0 auto 20px;padding:0 30px;border-top:1px solid #7c7c7c;
grid-template-columns:1fr 200px;grid-template-areas:"fb-box qr-code";background:#f3f3f3;}
	.qr-code{grid-area:qr-code;padding:10px;}
	.fb-box{grid-area:fb-box;min-height:200px;padding:15px 30px;}

.ft-banner{display:grid;width:100%;grid-gap:10px;padding:5px;min-height:90px;align-items:center;margin:40px auto 60px;
grid-template-columns:23% 1fr auto 180px;grid-template-areas:"ftbn-1 ftbn-2 ftbn-3 ftbn-4";justify-content:center;max-width:900px;}
	.ftbn-1{grid-area:ftbn-1;}.ftbn-2{grid-area:ftbn-2;}.ftbn-3{grid-area:ftbn-3;}.ftbn-4{grid-area:ftbn-4;}
	.ftbn-1{margin:-30px 0 -30px -80px;}
	.ftbn-2{padding-left:60px;text-align:left;color:#fff;font-size:1.1em;font-family:'Fjalla One','thai_sans_literegular', sans-serif;line-height:1;
	background:url(../images/icon/call.png)no-repeat center left;background-size:55px;}
	.ftbn-3{padding:15px;border-left:1px solid #fff;border-right:1px solid #fff;}
		.ftbn-3-p1{text-align:right;color:#fff;font-size:0.7em;font-weight:300;}
		.ftbn-3-p2{text-align:right;color:#fff;font-size:0.9em;font-weight:700;letter-spacing: -1px;}
	.ftbn-4{padding:0 5px;}

	
/* footer */
.ft-01{display:grid;align-items:center;grid-gap:2%;margin:0 auto;width:100%;position:relative;height:100%;padding:15px 10% 10px;
grid-template-columns:40% 1fr;grid-template-areas:"ft1 ft2";background:#20407d;}
	.tx-ft1{grid-area:ft1;font-size:0.6em;font-weight:100;text-align:left;color:#fff;}
	.ft2{grid-area:ft2;font-size:0.6em;text-align:right;}

/* page */
.page-ct{width:100%;position:relative;display:block;overflow:hidden;min-height:480px;margin-top:30px;}
.ph-topic{width:100%;font-size:1.9em;text-align:left;padding:5px 0 15px;position: relative;display:block;
font-family:'Barlow Semi Condensed','thai_sans_literegular', sans-serif;letter-spacing:-1px;color:#bababa;font-weight:900;}
.ph-topic:after{content: '';width:100%;height:5px;position: absolute;bottom:10px;left:0;
background: rgba(19,194,242,1);
background: -moz-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,194,242,1)), color-stop(100%, rgba(102,55,141,1)));
background: -webkit-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -o-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -ms-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: linear-gradient(to right, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13c2f2', endColorstr='#66378d', GradientType=1 );
}
.page-box{display:grid;align-items:start;grid-gap:40px;margin:0 auto;padding:10px;width:100%;position:relative;
grid-template-columns:22% 1fr;grid-template-areas:"pb-left pb-right";align-items:start;}
.page-box-full{display:grid;position:relative;width:100%;margin:0 auto;padding:0;position:relative;}
.pb-left{grid-area:pb-left;}
.pb-right{grid-area:pb-right;}
.topic-h2{font-size:1.3em;font-family:'thai_sans_literegular', sans-serif;font-weight:700;color:#024fa8;width:100%;padding-bottom: 10px;border-bottom:1px solid #cecece;}
.tx-box-ct{font-size:1em;font-family:'thai_sans_literegular', sans-serif;font-weight:100;color:#444;padding:10px;text-align:center;margin:20px auto;
width:100%;border:1.4px solid #c5c5c5;background:#f8f8f8}
p.pb-left-menu{color:#0071b9;font-size:0.94em;font-family:'Fjalla One','thai_sans_literegular', sans-serif;font-weight:400;
letter-spacing: -1px;border-bottom: 2px solid;}
button.btn-pb-left{width:100%;max-width:300px;text-align:left;color:#fff;padding:6px;margin:10px auto;position:relative;display:block;
border-radius:6px;cursor:pointer;-webkit-transition:all .3s;transition:all .3s;padding:10px 5px 10px 70px;}
button.btn-pb-left:hover{box-shadow:0 5px 0px rgba(0,0,0,0.1);padding:10px 5px 10px 75px;}
.pb-tx-btn1{font-size:1em;font-family:'Fjalla One','thai_sans_literegular', sans-serif;color:#fff;font-weight:600;line-height:1.3}
.pb-tx-btn2{font-size:1.1em;font-family:'thai_sans_literegular', sans-serif;color:#fff;font-weight:100;line-height:0.6}
#icon-product{background:#1fa3ca url(../images/icon/icon-product.png)no-repeat 10px center;background-size:40px;}
#icon-product:hover{background:#2ab0d8 url(../images/icon/icon-product.png)no-repeat 5px center;background-size:50px;}
#icon-service{background:#1fa3ca url(../images/icon/icon-service.png)no-repeat 10px center;background-size:40px;}
#icon-service:hover{background:#2ab0d8 url(../images/icon/icon-service.png)no-repeat 5px center;background-size:50px;}
#icon-catalog{background:#1fa3ca url(../images/icon/icon-catalog.png)no-repeat 10px center;background-size:40px;}
#icon-catalog:hover{background:#2ab0d8 url(../images/icon/icon-catalog.png)no-repeat 5px center;background-size:50px;}

button.btn-brand{width:100%;max-width:300px;text-align:left;color:#fff;padding:6px;margin:10px auto 5px;padding:10px;
position:relative;display:block;background:#1fa3ca;border-radius:6px;cursor:pointer;-webkit-transition:all .3s;transition:all .3s;}
button.btn-brand:hover{background:#2ab0d8;box-shadow:0 5px 0px rgba(0,0,0,0.1);padding:10px 5px 10px 15px;}
button.btn-brand2{width:100%;max-width:300px;text-align:left;color:#fff;padding:6px;margin:5px auto;padding:3px 10px;
position:relative;display:block;background:#f3f3f3;border-radius:0px;cursor:pointer;-webkit-transition:all .3s;transition:all .3s;}
button.btn-brand2:hover{background:#2ab0d8;}button.btn-brand2:hover .tx-content{color:#fff;}

.video-box{width:100%;margin:0 auto 20px;padding:10px 5%;position:relative;display:block;background: #f2f2f2;}
	.video{width:100%;height:340px;background: #000;border: 1px solid #1e1e1e;padding: 5px 20px;}

/* Product */
.product-box{display:grid;position:relative;width:100%;min-height:240px;background:#f3f3f3;margin-bottom:30px;}
.product-listbox{display:grid;align-items:center;grid-gap:15px;margin:10px auto 20px;width:100%;position:relative;
grid-template-columns:1fr 1fr 1fr;grid-auto-rows: auto;}
.plb-model{width:100%;height:100%;background:#fff;margin:2px auto 0px;-webkit-transition:all .3s;transition:all .3s;
-webkit-filter:contrast(95%);filter:contrast(95%);-webkit-filter:brightness(100%);filter:brightness(100%);}
.plb-model:hover{background:#2ab0d8;margin:0px auto 2px;box-shadow:0 2px 30px rgba(0,0,0,0.1);
-webkit-filter:contrast(105%);filter:contrast(105%);-webkit-filter:brightness(103%);filter:brightness(103%);}
.plb-model a{display: grid;width:100%;height:100%;align-items:start;}
li.plb-model:hover a{color:#fff;}
.tx-model{width:100%;text-align:center;font-size:0.58em;font-family:'Fjalla One','thai_sans_literegular',arial,sans-serif;overflow:hidden;
color:#999;line-height:1;padding:10px 5px 7px;font-weight:100;white-space: nowrap;
-webkit-transition:all .3s;transition:all .3s;}
.tx-model2{width:100%;height:100%;text-align:center;font-size:0.7em;font-family:'Fjalla One','thai_sans_literegular',arial,sans-serif;overflow:hidden;
color:#444;line-height:1.2;padding:10px;font-weight:100;display:grid;align-items:center;border:1px solid #e1e1e1;
-webkit-transition:all .3s;transition:all .3s;}
.plb-model:hover p.tx-model{color:#fff}
.plb-model:hover p.tx-model2{color:#fff;border:1px solid #22a9df;}

.product-ph{width:100%;display:grid;position:relative;padding:0 20px;color:#fff;font-weight:600;margin:0 auto 30px;
font-size:1.2em;font-family:'thai_sans_literegular', sans-serif;
background: rgba(19,194,242,1);
background: -moz-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,194,242,1)), color-stop(100%, rgba(102,55,141,1)));
background: -webkit-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -o-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: -ms-linear-gradient(left, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
background: linear-gradient(to right, rgba(19,194,242,1) 0%, rgba(102,55,141,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13c2f2', endColorstr='#66378d', GradientType=1 );
}

.product-cover{width:100%;display:grid;margin:0 auto 10px;text-align:center;align-items:center;
grid-template-columns:1fr 40%;grid-template-areas:"p-cover-left p-cover-right";}
	.p-cover-left{z-index:65;grid-area:p-cover-left;}.p-cover-right{z-index:66;grid-area:p-cover-right;text-align:left;}
	.nm1{font-size:5em;font-family:'Teko','thai_sans_literegular', sans-serif;color:#15bff0;font-weight:900;line-height:1;margin-left:-45px}
	.nm2{font-size:3.2em;font-family:'Teko',arial;color:#20407d;font-weight:900;line-height:0.8;margin-top:-10px;}
button.btn-brand2 p.tx-content{font-size:14px;}	
.mann-box-3col{width:100%;display:grid;margin:0 auto 30px;text-align:center;align-items:start;grid-gap:20px;
grid-template-columns:1fr 1fr 1fr 1fr;}
.mann-img{width:100%;height:100%;border:1px solid #eaeaea;padding:15px;align-items:center;max-height:260px;overflow:hidden;}
	
	
/* Responsive */
@media only screen and (max-width:780px){
.col-50{width:100%;}
html,#mainpage{min-width:240px}
.box-slide{display:none;}
.nameweb2{text-align:center;}
#toggle + label{display:block;}
.h-home{padding: 0 55px;grid-template-columns:1fr 220px 1fr;grid-template-areas: ". h-left .";}
.head-right{display:none;}
.at-1-box{padding: 5px 0 20px;}
.h-at-topic{width:100%;font-size: 1em;padding: 0 15px 6px;}
.sec2{grid-template-columns:100%;grid-template-areas: "sec2-ct";}
.sec2-2{grid-template-columns:100%;grid-template-areas: "sec2-2-ct";}
.sec2-img,.sec2-2-img{display:none;}
.ft-banner{grid-template-columns:1fr auto 80px;grid-template-areas: "ftbn-2 ftbn-3 ftbn-4";padding: 5px 10px;}
.ftbn-1{display:none;}.ftbn-2{font-size: 1.6em;}
.sec3-box{padding: 0;grid-template-columns: 1fr 160px;}
.fb-box{min-height: 100px;padding: 10px;}
.ft-01{grid-template-columns:100%;grid-template-areas: "ft2""ft1";padding:15px 5% 10px;}
.tx-ft1,.ft2{text-align:center;}
.page-box{grid-template-columns:100%;grid-gap:20px;grid-template-areas: "pb-right""pb-left";}
.pb-left{text-align: center;}
button.btn-pb-left{display: inline-block;max-width: 31.33%;    padding: 10px 5px 10px 50px;}
#icon-product,#icon-service,#icon-catalog{background-size:30px;}
button.btn-brand{display: inline-block;max-width: 31.33%;}
.product-box{min-height: 90px;}
.product-cover{grid-template-columns: 100%;grid-template-areas:"p-cover-left""p-cover-right";}
.p-cover-left{padding: 0 15%;}
.nm1{margin:0;font-size: 1.6em;display:inline-block;}
.nm2{margin:0;font-size: 2.4em;display:inline-block;}
.mann-box-3col{grid-template-columns: 1fr 1fr 1fr;}.mann-img{max-height: 200px;}


}
@media only screen and (max-width:1024px)and (min-width:780.01px){
#toggle + label{display:block;}
.h-home{padding: 0 10%;grid-template-columns:30% 1fr;grid-template-areas: "h-left .";}
.head-right{display:none;}
article{padding:0 8%;}
.ft-banner{grid-template-columns:1fr auto 140px;grid-template-areas: "ftbn-2 ftbn-3 ftbn-4";padding: 5px 20px;}
.ftbn-1{display:none;}.ftbn-2{font-size: 1.6em;}
.ft-01{padding:15px 3% 10px;}
.page-box{grid-template-columns:100%;grid-gap:20px;grid-template-areas: "pb-right""pb-left";}
.pb-left{text-align: center;}
button.btn-pb-left{display: inline-block;max-width: 31.33%;    padding: 10px 5px 10px 50px;}
#icon-product,#icon-service,#icon-catalog{background-size:30px;}
button.btn-brand{display: inline-block;max-width: 31.33%;}

}
@media only screen and (max-width:1280px)and (min-width:1024.01px){
#toggle + label{display:none;}
}
@media only screen and (min-width:1024.01px){
#toggle + label{display:none;}
}
@media (max-width:624px){
.ft-banner{grid-template-columns:1fr 1fr;grid-template-areas: "ftbn-2 ftbn-2""ftbn-4 ftbn-3";padding: 30px 20px;}
.ftbn-1{display:none;}.ftbn-2{font-size:2.2em;background-size: 35px;padding-left: 40px;text-align: center;}
button.btn-pb-left,button.btn-brand{display: block;max-width: 300px;}
.product-listbox{grid-template-columns: 1fr 1fr;}
}
@media (max-width:480px){
.sec-1{grid-template-columns: 1fr;grid-template-areas: "sec1-1""sec1-2""sec1-3";}
.p-at1{width: 70%;}
.ft-banner{grid-template-columns:100%;grid-template-areas: "ftbn-2""ftbn-3""ftbn-4";padding: 30px 10%;}
.ftbn-1{display:none;}.ftbn-2{font-size:2em;background-size: 35px;padding-left: 40px;text-align: center;}
.ftbn-3-p1,.ftbn-3-p2{text-align:center;}.ftbn-4{padding: 0 20%;}
.sec3-box{padding: 0;grid-template-columns:100%;grid-template-areas: "qr-code""fb-box";}
.qr-code{padding: 10px 20%;}
.fb-box{min-height: 100px;padding: 10px;}
.nm1{margin:0;font-size: 1em;display:block;}
.nm2{margin:0;font-size: 1.4em;display:block;}

}