@import url('style_color.css');
/**{ -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}*/

body{margin:0px; padding:0px; border:0px; width:100%; -webkit-font-smoothing:antialiased; font-size:1.6rem; font-family: 'Kanit'; font-weight:300; }
button, input, select, textarea{  font-family: 'Kanit'; font-weight:300; }
p, div{ padding:0px;}

h1{ font-size:30px; margin:0px; padding:0px; border:0px; font-weight:normal;}
h2{ font-size:28px; margin:0px; padding:0px; border:0px; font-weight:normal;}
h3{ font-size:26px; margin:0px; padding:0px; border:0px; font-weight:normal;}
h4{ font-size:24px; margin:0px; padding:0px; border:0px; font-weight:normal;}
h5{ font-size:20px; margin:0px; padding:0px; border:0px; font-weight:normal;}
h6{ font-size:14px; margin:0px; padding:0px; border:0px; font-weight:normal;}

a{ text-decoration:none; border:none;}
a:link{ text-decoration:none; border:none;}
a:visited{ text-decoration:none; border:none;}
a:hover{ text-decoration:none; border:none;}
a:active{ text-decoration:none; border:none;}

hr{ background:#ddd; height:1px;}

header{ margin:0 auto; margin:0 30px;}
section{ margin:0 auto; padding:20px 0 30px 0;}
footer{margin:0 auto; color:#fff; font-weight:200;}
footer .sitemap{ background:#232323; padding:30px 0 20px 0;}
footer .copy{ background:#181818; padding:30px 0 20px 0; text-align:center;}
footer a{color:#9a9da2; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
footer a:hover{ color:#fff;}
footer .follow{ margin:20px 0 0 0;}
footer .follow a i{font-size:40px; padding:0 5px; color:#fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
footer .follow a:hover i{ color:#999;}
footer .follow a img{ width:40px; margin:-15px 5px 0 5px; opacity: 1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s; }
footer .follow a:hover img{opacity: 0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s; }
footer .copytxt{ line-height:19px;}
footer ul.footerfix{ padding:0; list-style:none; text-decoration:none;}
footer ul.footerfix li{ line-height:36px;}
footer ul.footerfix li a{ color:#fff;}
footer ul.footerfix li a:hover{ color:#999;}
footer .footercontact-company{ font-size:30px; font-weight:400;}
footer .footercontact-address{ margin:7px 0 20px 0;}
footer .footercontact-contact i{ font-size:14px;}
footer .footercontact-h_time{ float:left; width:30%; margin:20px 0 0 0;}
footer .footercontact-d_time{ float:left; width:70%; margin:20px 0 0 0;}



#banner{ width:100%; padding:20px; background:rgba(0,0,0,0.2);}

.main{ width:1260px; box-shadow:0 0 7px rgba(0,0,0,0.12); margin:0 auto; background:url(../images/template/bgwebmain.jpg) repeat;}
.topmobile{ float:right; height:32px;}

.logo{ margin:10px 0 10px 0; float:left;}
.logo img{ height:85px;} 

/* menu bar */
nav.bgcolor{ height:50px;  display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; -webkit-justify-content: center;
background: rgba(95,95,95,1);
background: -moz-linear-gradient(top, rgba(95,95,95,1) 0%, rgba(47,47,47,1) 70%, rgba(47,47,47,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(95,95,95,1)), color-stop(70%, rgba(47,47,47,1)), color-stop(100%, rgba(47,47,47,1)));
background: -webkit-linear-gradient(top, rgba(95,95,95,1) 0%, rgba(47,47,47,1) 70%, rgba(47,47,47,1) 100%);
background: -o-linear-gradient(top, rgba(95,95,95,1) 0%, rgba(47,47,47,1) 70%, rgba(47,47,47,1) 100%);
background: -ms-linear-gradient(top, rgba(95,95,95,1) 0%, rgba(47,47,47,1) 70%, rgba(47,47,47,1) 100%);
background: linear-gradient(to bottom, rgba(95,95,95,1) 0%, rgba(47,47,47,1) 70%, rgba(47,47,47,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f5f5f', endColorstr='#2f2f2f', GradientType=0 );}
nav.bgcolor ul.menufix{	list-style:none; font-size:18px; padding:0;}
nav.bgcolor ul.menufix li{float:left; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; padding:13px 35px;}
nav.bgcolor ul.menufix li a{ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; color:#fff;}
nav.bgcolor ul.menufix li a:hover{ color:#999;}

.content{ width:1170px; margin:0 auto;}

/*---------------------------------------------------------------------------------------------------------------------------*/
.title{ font-size:38px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; font-style:italic; background: -webkit-linear-gradient(#666, #262626); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} 

.title-other{ font-size:26px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; font-style:italic; background: -webkit-linear-gradient(#666, #262626); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} 

.bgarticlehome{ background:rgba(0,0,0,0.15); padding:10px 20px 15px 20px; margin:35px 0 0 0;}

.viewmore-btn{ text-align:right; color:#262626; margin:15px 0 0 0;}
.viewmore-btn:hover{opacity:0.75; filter:alpha(opacity=75);}

.back{ margin:50px 0 0 0; text-align:center;}
.back:hover{ color:#666;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.detail{ line-height:24px; margin:15px 0 0 0;}

.gallery{ margin:15px 0;}
.galleryinnertitle{ font-size:20px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; text-align:center;} 

.gallery-title{ font-size:26px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; margin:30px 0 0 0; } 
.galleryhome{ position:relative;}
.galleryhome-img{margin:15px 0; line-height:0; text-align:center; position:relative;}
.galleryhome-img img{ width:370px; height:245px;  opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.galleryhome-img img:hover{opacity:0.7; - webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s; }
.galleryhome-arrowleft{ position:absolute; top:50%; left:0; margin:-31px 0 0 -25px; cursor:pointer;}
.galleryhome-arrowleft i{ font-size:100px; cursor:pointer;}
.galleryhome-arrowright{ position:absolute; top:50%; right:0; margin:-31px -25px 0 0; cursor:pointer;}
.galleryhome-arrowright i{ font-size:100px;}
.galleryhome-img p{ background:rgba(0,0,0,0.7); position:absolute; font-weight:400; bottom:0; display:flex; align-items: center; justify-content:center; height:35px; width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:100%; opacity:0;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.galleryhome-img:hover p{ opacity:1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.producthome{ text-align:center; background:#000; margin:15px 0 15px 0;}
.producthome-img{ line-height:0; opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.producthome-img img{ width:270px; height:225px;}
.producthome-topic{ background:#2f2f2f; height:45px; color:#fff; font-size:18px; padding:10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.radius .producthome-topic{ background:#2f2f2f; height:45px; color:#fff; font-size:18px; padding:10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -moz-border: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; border-radius:0px 0px 10px 10px;}
.producthome:hover .producthome-img{ opacity:0.5;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.product-title{ font-size:26px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; margin:15px 0 0 0; } 
.product-img{line-height:0; text-align:center; margin:15px 0 0 0;}
.product-img img{ width:570px; height:475px;}
.product-vdo{ line-height:0; text-align:center; margin:30px 0 0 0;}
.product-vdo iframe{ width:470px; height:300px;}
.pdfdownload{ margin:30px 0 0 0; font-weight:400; opacity:1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.pdfdownload i{ font-size:20px; font-weight:700;}
.pdfdownload:hover{opacity:0.7;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s; text-decoration:underline;}
.product-imgview{ padding:20px 30px 0 30px; display: flex;  display:-webkit-flex;  flex-wrap:wrap;  -webkit-flex-wrap:wrap;  justify-content:center;  -webkit-justify-content: center; position:relative;}
.product-img-s{ line-height:0; text-align:center; padding:0 5px; cursor:pointer;}
.product-img-s img{ width:90px; height:75px; border:solid 1px #eee;}
.product-arrowleft{ position:absolute; top:0; left:0; cursor:pointer; margin:15px 0 0 0;}
.product-arrowleft i{ font-size:80px; cursor:pointer;}
.product-arrowright{ position:absolute; top:0; right:0; cursor:pointer; margin:15px 0 0 0;}
.product-arrowright i{ font-size:80px;}
.linkhover{opacity:1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.linkhover:hover{opacity:0.7;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.articlehome{ background:url(../images/template/icon-article.png) no-repeat top left; padding:12px 0 12px 43px; color:#262626; height:61px; overflow:hidden; border-bottom:dotted 1px #262626; font-size:15px; opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.articlehome:hover{ opacity:0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.article-title{ font-size:26px; font-family: 'Kanit'; font-weight:600; text-transform:uppercase; margin:30px 0 0 0; } 

.article-other{ background:url(../images/template/icon-article.png) no-repeat top left; padding:12px 0 12px 43px; color:#262626; height:60px; overflow:hidden; font-size:15px; opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.article-other:hover{ opacity:0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.newshome{ padding:13px 0; height:101px; border-bottom:dotted 1px #262626;  opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.newshome-img{ width:100px; float:left;}
.newshome-img img{ width:100%;}
.newshome-detail{ width:410px; float:left; margin:0 0 0 20px; font-size:15px; height:75px; line-height:19px; overflow:hidden; color:#262626;}
.newshome:hover{ opacity:0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.news-other{ padding:13px 0; height:100px; opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.news-other-detail{ width:250px; float:left; margin:0 0 0 20px; font-size:15px; height:75px; line-height:19px; overflow:hidden; color:#262626;}
.news-other:hover{ opacity:0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.news{ padding:13px 0; height:101px; border-bottom:dotted 1px #262626;  opacity:1;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}
.news-img{ width:100px; float:left;}
.news-img img{ width:100%;}
.news-detail{ width:450px; float:left; margin:0 0 0 20px; font-size:15px; height:75px; line-height:19px; overflow:hidden; color:#262626;}
.news:hover{ opacity:0.7;- webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;}

.hotline{ float:right; margin:15px 0 0 0;}
.iconhotline{ font-size:24px; float:right; height:35px; background:url(../images/template/iconhotlne.png) no-repeat; padding:0 0 0 50px;}
.txthotline{ font-size:40px; font-weight:600; text-align:right; line-height:40px;}

/* layout list */
.layoutlist-01{ margin:40px 0 0 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.layoutlist-01-img{ float:left; line-height:0; text-align:center;}
.layoutlist-01-img img{ width:170px; height:170px; border:solid 1px #eee;}
.layoutlist-01-detail{ width:380px; float:left; margin:0 0 0 20px;}
.layoutlist-01-h{ font-size:24px; font-weight:400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layoutlist-01-d{ color:#333; margin:10px 0 0 0; height:118px; overflow:hidden;}
.layoutlist-01:hover{opacity:0.5; filter:alpha(opacity=50);}

.layoutlist-02{ margin:40px 0 0 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.layoutlist-02-img{line-height:0; text-align:center;}
.layoutlist-02-img img{border:solid 1px #eee;}
.layoutlist-02-detail{ margin:10px 0 0 0;}
.layoutlist-02-h{ font-size:24px; font-weight:400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layoutlist-02-d{ color:#333; margin:5px 0 0 0; height:43px; overflow:hidden;}
.layoutlist-02:hover{opacity:0.5; filter:alpha(opacity=50);}

.layoutlist-03{ padding:20px 0; border-bottom:dotted 1px #eee; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.layoutlist-03-h{ font-size:24px; font-weight:400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layoutlist-03-d{ color:#333; padding:0 0 0 40px; height:43px; overflow:hidden;}
.layoutlist-03:hover{opacity:0.5; filter:alpha(opacity=50);}

/* layout faq */
.layoufaq-01{ padding:20px 0; border-bottom:dotted 1px #ccc;}
.layoufaq-01-h{ font-size:24px; font-weight:400;}
.layoufaq-01-d{ color:#333; padding:0 0 0 40px;}

/* layout contact */
.contactaddress{ margin:15px 0 0 0;}
.contactfrom{ margin:48px 0 0 0;}
.contactimg{ margin:48px 0 0 0; height:835px;display: flex; align-items: flex-end; }
.contactimg img{ max-height:835px;}
.contactimg img{display: flex; align-items: flex-end;}
.title-contact{ font-weight:500; font-size:32px;}
.contact_address{ font-size:16px; margin:5px 0 0 0;}
.contact_h{width:25%; float:left; margin:10px 0 0 0; padding:0 0 0 30px;}
.contact_colon{width:5%; float:left; margin:10px 0 0 0;}
.contact_d{width:70%; float:left; margin:10px 0 0 0;}
.contact_information{ margin:10px 0 0 0; font-size:20px; font-weight:400;}
.contactform_h{color:#666; width:25%; float:left; margin-top:10px; padding-top:20px;}
.contactform_input{ width:75%; float:left; margin-top:10px;}
.contactform_input input{ width:100%; border:solid 1px #ccc; padding:10px; margin-top:10px;}
.contactform_input textarea{ width:100%; border:solid 1px #ccc; padding:10px; margin-top:10px;}
.contactform_input .contact-btn{text-align:center; border:none; padding:10px 0; width:150px; margin:0px 0 0 0; cursor:pointer;}
.contact-tabmap-over{border-width:1px; border-style:solid; border-bottom:none; text-align:center; float:left; margin-left:5px; width:120px; -moz-border:5px 5px 0px 0px; -webkit-border-radius:5px 5px 0px 0px; border-radius:5px 5px 0px 0px; padding-top:3px; cursor:pointer;}
.contact-tabmap{background:#fff; border:solid 1px #ccc; border-bottom:none; text-align:center; float:left; margin-left:5px; width:120px; -moz-border:5px 5px 0px 0px; -webkit-border-radius:5px 5px 0px 0px; border-radius:5px 5px 0px 0px; padding-top:3px; cursor:pointer;}
.contact-tabmap:hover{background:#666; color:#fff;}
.contact-map{ width:100%; height:200px; border:solid 1px #ccc; background:#f5f5f5;}
.contact-map img{ width:570px; height:200px;}
.contact-map iframe{ width:570px; height:200px;}

/* layout product - category */
.category-title{ margin:30px 0 0 0; font-size:20px; padding:12px 15px;}
.category{ padding:12px 15px; border-bottom:solid 1px #eee; color:#262626;  -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.category:hover{ color:#999; background:#f5f5f5;}
.category-over{ padding:12px 15px; color:#999; background:#f5f5f5; border-bottom:solid 4px #ccc; border-top:solid 4px #ccc;}

.categorysub-1{ cursor:pointer;}
.category-icon{ float:left; width:25px;}
.category-name{ float:left; width:200px; color:#262626;}
.category-arrow{ float:right; font-size:16px;}
.categorysub-detail{ margin:10px 0 0 0;}
.categorysub-2{ padding:5px 0; margin:0 0 0 25px; border-bottom:dotted 1px #eee; color:#666;}
.categorysub-icon{ float:left; width:20px; font-size:12px;}
.categorysub-name{ float:left; width:195px;}
.categorysub-2:hover{ color:#999;}

/* layout content */
.contentdetail{ margin:30px 0 0px 0; line-height:24px;}

.contentimg{ line-height:0; margin:30px 0px 0px 0; text-align:center;}
.contentimg01{ line-height:0; margin:30px 0px 30px 0; text-align:center;}
.contentimg02-left{ line-height:0; margin:0 30px 0px 0; width:30%; float:left; text-align:center;}
.contentimg02-right{ line-height:0; margin:0 0px 0px 30px; width:30%; float:right; text-align:center;}
.contentimg03-left{ line-height:0; margin:0 40px 10px 0; width:40%; float:left; text-align:center;}
.contentimg03-right{ line-height:0; margin:0 0px 10px 40px; width:40%; float:right; text-align:center;}

.contentimg-circle{ line-height:0; margin:30px 0px 30px 0; text-align:center;}
.contentimg01-circle{ line-height:0; margin:30px 0px 30px 0; text-align:center;}
.contentimg02-left-circle{ line-height:0; margin:0 30px 0px 0; width:30%; float:left; text-align:center;}
.contentimg02-right-circle{ line-height:0; margin:0 0px 0px 30px; width:30%; float:right; text-align:center;}
.contentimg03-left-circle{ line-height:0; margin:0 40px 10px 0; width:40%; float:left; text-align:center;}
.contentimg03-right-circle{ line-height:0; margin:0 0px 10px 40px; width:40%; float:right; text-align:center;}


.numpage{ width:35px; height:35px; text-align:center; color:#fff; float:left; border:solid 1px #4e4e4e; padding:7px 0 0 0; margin:30px 2px 0 2px; background:#4e4e4e;cursor:pointer; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;-moz-border: 7px; -webkit-border-radius:7px; border-radius:7px;}
.numpage:hover{background:#232323; color:#fff; border:solid 1px #232323; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.numpage-over{ width:35px; height:35px; text-align:center; color:#fff; float:left; border:solid 1px #232323; padding:7px 0 0 0; margin:30px 2px 0 2px; background:#232323; cursor:pointer;-moz-border: 7px; -webkit-border-radius:7px; border-radius:7px;}
.numpage-next{ width:85px; height:35px; text-align:center; color:#fff; float:left; border:solid 1px #4e4e4e; padding:7px 0 0 0; margin:30px 2px 0 2px; background:#4e4e4e; cursor:pointer;-moz-border: 7px; -webkit-border-radius:7px; border-radius:7px;}


.categorymobile{ padding:3px 12px; margin:7px 7px 0 0; float:left; background:#000; color:#fff; -moz-border: 5px; -webkit-border-radius:5px; border-radius:5px;}
/*######################################################################################################################################################*/
@media (max-width:767px){
header{ width:100%; border-bottom:solid 1px #ddd; margin:0;}
nav ul{ list-style:none; padding:0;}
footer .txtfooter{width:100%; text-align:center; margin:10px 0 0 0;}

.copytxt{ margin:30px 0 0 0;}

.main{ width:100%; box-shadow:none;}

#banner{padding:10px; margin:15px 0 0 0;}

.bgarticlehome{ margin:15px 0 15px 0;}

.producthome-img img{ width:100%; height:auto;}

.galleryhome-img img{ width:100%; height:auto}

.galleryhome-arrowleft{margin:-31px 0 0 25px;}
.galleryhome-arrowright{margin:-31px 25px 0 0;}

.article-other{ height:61px; border-bottom:dotted 1px #262626;}

.producthome{ margin:15px 0 15px 0;}

.product-img img{ width:100%; height:auto;}

.newshome-img{ width:35%; max-width:100px;}
.newshome-detail{ width:60%; margin:0 0 0 5%;}

.news-img{ width:35%; max-width:100px;}
.news-detail{ width:60%; margin:0 0 0 5%;}

.news-other{ height:101px; border-bottom:dotted 1px #262626; }
.news-other-detail{ width:60%; margin:0 0 0 5%}

/* layout list */
.layoutlist-01-img{ float:none;}
.layoutlist-01-img img{ width:100%; height:inherit; border:solid 1px #eee;}
.layoutlist-01-h{ margin:15px 0 0 0;}
.layoutlist-01-detail{ width:100%; margin:0 0 0 0px; height:inherit; overflow:inherit;}

.layoutlist-02{ margin:40px 0 0 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.layoutlist-02-img{line-height:0; text-align:center;}
.layoutlist-02-img img{border:solid 1px #eee;}
.layoutlist-02-detail{ margin:10px 0 0 0;}
.layoutlist-02-h{ font-size:24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layoutlist-02-d{ color:#333; margin:5px 0 0 0; height:43px; overflow:hidden;}
.layoutlist-02:hover{opacity:0.5; filter:alpha(opacity=50);}

/* layout contact */
.title-contact{font-size:26px;}
.contact_h{width:25%; margin:10px 0 0 0; padding:0 0 0 0;}
.contact_colon{width:5%; float:left; margin:10px 0 0 0;}
.contact_d{width:70%; float:left; margin:10px 0 0 0;}
.contactform_h{width:100%; margin-top:20px; padding-top:0px;}
.contactform_input{ width:100%; margin-top:-5px;}

/* layout product */
.product-h{ font-size:14px; padding:5px 0;}
.product-tab{ height:30px; margin:-61px 0 30px 0; display:block;}
.product-tab-1{ padding:5px 0 0 0; height:35px;}
.product-tab-2{ padding:7px 0 0 0; height:35px;}
.product-tab-1 span{ display:none;}
.product-tab-2 span{ display:none;}
.product-tab-1 i{ font-size:20px;}
.product-tab-2 i{ font-size:20px;}

/* layout content */
.contentimg-left{margin:0 0px 30px 0; width:100%;}
.contentimg-right{margin:0 0px 30px 0; width:100%;}

.contentimg01{ margin:30px 0px 30px 0; width:100%;}
.contentimg02-left{ margin:30px 0px 30px 0; width:100%;}
.contentimg02-right{ margin:30px 0px 30px 0; width:100%;}
.contentimg03-left{ margin:30px 0px 30px 0; width:100%;}
.contentimg03-right{ margin:30px 0px 30px 0; width:100%;}

.contentimg01-circle{ margin:30px 0px 30px 0; width:100%;}
.contentimg02-left-circle{ margin:30px 0px 30px 0; width:100%;}
.contentimg02-right-circle{ margin:30px 0px 30px 0; width:100%;}
.contentimg03-left-circle{ margin:30px 0px 30px 0; width:100%;}
.contentimg03-right-circle{ margin:30px 0px 30px 0; width:100%;}
}

@media(max-width:440px) {
.logomobile{ float:left; margin:25px 0 0 0px;}
.logomobile img{ height:18px;}
.logomobile-2{ float:left;}
.logomobile-2 img{ height:30px; margin:20px 0 0 15px;}
}

@media (min-width:441px) and (max-width:767px) {
.logomobile{ float:left; margin:10px 0 0 0px;}
.logomobile img{ height:50px;}
.logomobile-2{ float:left; margin:10px 0 0 20px;}
.logomobile-2 img{ height:50px;}
}

     
/*######################################################################################################################################################*/
@media (min-width:768px) and (max-width:991px) {
header{ width:100%; border-bottom:solid 1px #ddd; margin:0;}
nav ul{ list-style:none; padding:0;}
footer .txtfooter{width:inherit; text-align:center;}

#banner{padding:10px; margin:15px 0 0 0;}

.content{ width:100%; margin:0 auto;}

.main{ width:100%; box-shadow:none;}

.producthome-img img{ width:220px; height:183px;}

.galleryhome-img img{ width:345px; height:230px;}
.galleryhome-arrowleft{margin:-31px 0 0 25px;}
.galleryhome-arrowright{margin:-31px 25px 0 0;}

.newshome-detail{ width:190px; margin:0 0 0 15px;}
.news-detail{ width:220px; margin:0 0 0 15px;}
.news-other-detail{ width:220px; margin:0 0 0 15px;}

.product-img img{ width:100%; height:auto;}

/* layout list */
.layoutlist-01-detail{ width:530px; margin:0 0 0 20px; }

.layoutlist-02-d{  margin:5px 0 0 0; height:inherit; overflow:inherit;}

/* layout product  */
.product-tab{display:block;}
}

/*######################################################################################################################################################*/
@media (min-width:992px) and (max-width:1199px) {
header{ width:100%; border-bottom:solid 1px #ddd; margin:0;}
nav ul{ list-style:none; padding:0;}
footer .txtfooter{ width:350px;}

#banner{padding:10px; margin:15px 0 0 0;}

.content{ width:100%; margin:0 auto;}

.main{ width:100%; box-shadow:none;}

.producthome-img img{ width:213px; height:178px;}

.galleryhome-img img{ width:292px; height:195px;}
.galleryhome-arrowleft{margin:-31px 0 0 25px;}
.galleryhome-arrowright{margin:-31px 25px 0 0;}

.newshome-detail{ width:300px; margin:0 0 0 15px;}
.news-detail{ width:340px; margin:0 0 0 15px;}
.news-other-detail{ width:175px; margin:0 0 0 15px;}

.product-img img{ width:455px; height:379px;}

/* layout list */
.layoutlist-01-detail{ width:265px; margin:0 0 0 20px;}

/* layout product - category */
.category-title{font-size:16px;}
.category-name{ width:150px;}
.categorysub-name{width:140px;}

.product-tab{margin:-103px 0 53px 0; display:none;}
.product-tab-1 span{ display:none;}
.product-tab-2 span{ display:none;}
}