/* CSS Document */
@font-face {
    font-family: 'Prompt-Regular';
    src: url('fonts/Prompt-Regular.eot');
    src: url('fonts/Prompt-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Prompt-Regular.woff') format('woff'),
         url('fonts/Prompt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

img{ border:0;}
*{ margin:0; padding:0;}
a{ text-decoration:none;}

body {
	background: url(../images/bg-bottom.png) bottom center #fff  repeat-x;
	font-family: 'Sarabun-Regular';
	font-size:14px;
}

.cleaner {clear:both; width:100%; height:0px;}
.h40{clear:both; width:100%; height:40px;}
.h30{clear:both; width:100%; height:30px;}
.h20{clear:both; width:100%; height:20px;}
.h10{clear:both; width:100%; height:10px;}

.font16{ font-size:16px;}
.font18{ font-size:18px;}
.font20{ font-size:20px;}
.font24{ font-size:16px;}
.font28{ font-size:28px;}
.font32{ font-size:32px;}
.font36{ font-size:36px;}

.pd_left10{padding-left:10px;}
.pd_left8{padding-left:8px;}
.black{ color:#000;}
.white{ color:#fff;}
.red{ color:#f00;}
.grey{ color:#888;}

.text-center{ text-align:center;}
.text-indent40{ text-indent:40px;}
.float_right{float:right;}
.wrapper{
	width:980px;
	margin:auto;
}

/*/////////////////////////////////////////////////Head//////////////////////////////////////////////////*/
.bg-header{
	background: #000;
}
#header{
	width: auto;
	height:167px;
	margin:auto;
	background: url(../images/bg-head.png) no-repeat center top;
}
#header .head-left{
	/*width:600px;*/
	padding: 10px 20px;
	float:left;
	
}
#header .head-right{
	/*width:280px;*/
	float:right;
	font-size:18px;
	line-height: 18px;
	padding: 25px 0 0 60px;
	text-align: right;
	color:#262626;
}
/*/////////////////////////////////////////////////Head//////////////////////////////////////////////////*/


/*/////////////////////////////////////////////////Main Menu//////////////////////////////////////////////////*/
#main_menu{
	width:980px;
	height:40px;
	margin:auto;
	margin-bottom: 10px;
	
}
#main_menu ul{
	width:980px;
	list-style:none;
}
#main_menu ul li{
	float:left;
	text-align:center;
	display:inline;
	position:relative;
}
#main_menu ul li a{
	color:#000;
	font-size:16.5px;
	display:block;
	padding: 8px 15px 8px 15px;
}
#main_menu ul li:first-child a{
	padding: 8px 15px 8px 0px;
}
#main_menu ul li:last-child a{
	padding: 8px 0px 8px 15px;
}

#main_menu ul li img{
	padding: 8px 0;
}
#main_menu ul li a:hover,#main_menu ul li a.current {
	color:#61b825;
}
/*/////////////////////////////////////////////////Main Menu//////////////////////////////////////////////////*/
/*////////////////////////////////////*/
#main_menu ul li:hover .sub1 {
	display:block;
}
#main_menu ul li .sub1 {
	padding-top:0;
	width:300px;
	position:absolute;
	top: 35px;
	left: 5px;	
	z-index:1250;
   display:none;
}
#main_menu ul li .sub1 ul { 
	width:300px;
	margin:0;
	list-style: none;
	padding-left:0px;
	border:none;
}
#main_menu ul li .sub1 ul li {
	text-align:left;
	display: inline;
	position:relative;
	width:300px;
	padding:0;
	list-style:none;
	border-bottom:solid #87B76B 1px;
	border-right:none;
	background:#99C57F;
}
#main_menu ul li .sub1 ul li:hover {
	text-align:left;
	display: inline;
	z-index:500;
	background:#6BB242;	
}
#main_menu ul li .sub1 ul li  a {
	/*width:200px;	*/
	margin:0 ;
	padding:4px 0 4px  10px;
	display: inline-block;
	color:#FFF;
	text-decoration: none;
	outline: none;
	text-align:left;
	font-size:17px;
	
	/*line-height:20px;*/
}
#main_menu ul li .sub1 ul li  a:hover{
	border-bottom:none;
	/*color:#000;
	text-shadow:  none;
	-webkit-transition: all 0.3s ease-in;*/
}

#main_menu ul li .sub1 ul li a.current{
	border-bottom:none;
	text-shadow:  none;
	/*background:none;*/
}
#main_menu ul li .sub1 ul li  a span{
	font-size:14px;
	text-align:left;
	color:#FFF;
}
/*////////////////////////////////////*/
#main_menu ul li:hover .sub1 ul li:hover .sub2 {
	display:block;
}
#main_menu ul li .sub1 ul li .sub2{
	width:180px;
	position:absolute;
	left:200px;
	top:0;
	z-index:4500;
	display:none;
	padding:0;
	margin:0;
	
}
#main_menu ul li .sub1 ul li .sub2 ul { 
	margin:0;
	list-style: none;
	padding-left:0px;

 }
#main_menu ul li .sub1 ul li .sub2 ul li {
	text-align:left;
	display: inline;
	position:relative;
	background:#6BB242;
	border-bottom:solid #ADE7B0  1px;
	border-right:none;
	
}
#main_menu ul li .sub1 ul li .sub2 ul li:hover {
	text-align:left;
	display: inline;
	background:#99C57F;	
	border-bottom:none;
}
#main_menu ul li .sub1 ul li .sub2 ul li  a {
	display: inline-block;
	color:#FFF;
	text-decoration: none;
	outline: none;
	text-align:left;
	font-size:18px !important;
	padding: 3px 5px;

}
#main_menu ul li .sub1 ul li .sub2 ul li  a:hover, #main_menu ul li .sub1 ul li .sub2 ul li a.current{
	text-shadow:  none;
	border-bottom:none;
}
#main_menu ul li .sub1 ul li .sub2 ul li  a span{
	font-size:14px;
	text-align:left;
	color:#FFF;	
}
/***************************************/

/*/////////////////////////////////////////////////Content//////////////////////////////////////////////////*/
.bg-content{
	background: #00CC99;
}
#content{
	width:980px;
	margin:auto;
	min-height:300px;
	margin-bottom: 20px;
}
.content_left{
	float:left;
	width:322px;
}
.content_right{
	float:left;
	width:658px;
}
.menu_title_product{
	width:300px;
	height:53px;
	color:#fff;
	font-size:24px;
	font-family: 'Sarabun-Regular';
	text-align:center;
	line-height: 50px;
	background:url(../images/menu-pro.png) no-repeat;
}
.menu_title_product2{
	width:300px;
	height:49px;
	color:#fff;
	font-size:20px;
	font-family: 'Sarabun-Regular';
	text-align:center;
	line-height: 25px;
	padding:2px 0;
	background:url(../images/menu-pro.png) no-repeat;
}
.menu_mainsub_product{
	width:300px;
	font-size:16px;
	text-indent: 20px;
	line-height:22px;
	background:url(../images/bg-menu-main.png) no-repeat ;
	background-position: bottom;
	color:#000;
	padding: 5px 0 5px 0;
}
.menu_mainsub_product:hover{
	background:#99C57F;
}
.menu_mainsub_product2:hover{
	background:#99C57F;
}
.menu_sub_product ul li{
	width: 300px;
	list-style:none;
	padding: 6px 0;
	text-indent: 25px;
	font-size:22px;
}
.menu_sub_product ul li{
	color:#000;
}
.menu_sub_product ul li:hover,.menu_sub_product li a.current {
	color:#fff;
	background:#99C57F;
	transition: all 0.2s;
}
.menu_sub_product_background{
	background:#F7F7F7;
}
.title_facebook{
	width: 300px;
	height:46px;
	color:#fff;
	font-size:24px;
	font-family: 'Sarabun-Regular';
    line-height: 30px;
	text-indent: 15px;
	background:url(../images/facebook.png)
}
.facebook_box{
	width: 300px;
	border-bottom:#6ab240 solid 10px;
}
.name_company{
	font-family: 'Sarabun-Regular';
	color:#63b032;
	font-size:40px;
	line-height: 40px;
    margin-top: 10px;
	text-align:right;
}
.sub_comp{
	font-family: 'Sarabun-Regular';
	color:#666;
	font-size:25px;
    margin: 10px 0;
}
.name_company img{
	float:right;
	margin: 0 15px;
}
.company{
	width:auto;
	font-size:17px;
	padding: 15px 5px;
}
.pic_company{
	width:auto;
	padding: 15px 4px;
}
.title_water{
	font-family: 'Sarabun-Regular';
	font-size:20px;
	color:#6ab240;
	float:left;
	margin-left: 15px;
}
.pic_water{
	margin: 10px 0 0 10px;
	float:left;
}
.title_water_box{
	width:auto;
	padding: 10px 0;
}
.pic_water_left{
	width:306px;
	height:145px;
	float:left;
	background: url(../images/pic-water.png);
}
.pic_water_left a:hover{
	background:#0CF;
}


.picport_ser{
	width:306px;
	height:145px;
	float:left;
	font-size:20px;
	position:relative;
	overflow:hidden;
	/*padding: 0 10px;*/
	margin:5px 10px;
}
.img_piccate{
	height:145px;	
	transition:all 0.3s;
}
/*.picport:hover img{
	transform: scale(1.1);
}*/
.picport_ser_text{
	width: 306px;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 300%;
    top: 0;
    background: url(../images/bg-hover.png) repeat;
    transition: all 0.5s;
}
.picport_ser_text p{
	color:#fff;
	font-size:24px;
	position:absolute;
	text-align:center;
	bottom:-50px;
	display:block;
	width:100%;
	transition:all 0.2s;
	background: url(../images/hover-text.png) repeat;
	height: 30%;
    line-height: 45px;
}
.picport_ser a:hover .picport_ser_text{
	background: url(../images/bg-hover2.png) repeat;
}
.picport_ser a:hover p{
	bottom:0;
}
.box_water{
	width:auto;
	height:auto;
	padding-bottom: 30px;
}
/*/////////////////////////////////////////////////Content//////////////////////////////////////////////////*/

/*/////////////////////////////////////////////////Footer//////////////////////////////////////////////////*/
#footer{
	width: auto;
	min-height:30px;
	margin:0px auto;
	color:#fff;
	background:#6AB240;
	text-align:center;
}
#footer p{
	text-align:center;
	padding-top:5px;
	font-size:14px;
}
#footer a{
	color:#fff;
}
#footer a:hover{
	color: #252525;
}
.box_contact{
	width:auto;
	padding: 30px 0;
}
.location{
	width:300px;
	font-size:14px;
	float:left;
	padding: 0 9px;
}
.tel{
	width:170px;
	font-size:14px;
	float:left;
	padding: 27px 0 0;
}
.line{
	width:170px;
	font-size:14px;
	float:left;
	padding: 27px 0 0;
}
/*/////////////////////////////////////////////////Footer//////////////////////////////////////////////////*/
.topic {
    color: #63b032;
    font-size: 30px;
	border-bottom: solid 2px #3EA205;
    margin-top: 10px;
}
/***************************/
.box_listproduct{
	width:195px;
	height:230px;
	padding:5px;
	margin:10px 5px;
	float:left;
	border:solid 1px #CCC;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow:hidden;
	text-align:center;
	position:relative;
}
.boximg_listproduct{
	height:190px;
	width:195px;		
	overflow:hidden;
}
.img_listproduct{
	height:190px;
	border:none;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	 -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.img_listproduct:hover{
	height:195px;
}
.name_listproduct {
    width: 195px;
    height: 30px;
    font-size: 19px;
    position: absolute;
    bottom: 0;
    color: #000;
    line-height: 30px;
}
.name_listproduct:hover{
	color:#666;
	text-decoration:underline;
}

/*-----List Page-----///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
div.badoo {
	margin-top:20px;
	padding:10px 0px;
	margin-right:20px;
	font-size:14px; 
	color: #333; 
	font-family:Arial, Helvetica, sans-serif;
	text-align:right;text-decoration:none;
}
div.badoo a{
	border: #4E4A4C 1px solid;
	padding: 3px 8px;
	margin: 0px 4px;
	color: #181516;
	text-decoration: none;
	background: #FFFFFF;
	border-radius: 4px;
}
div.badoo a:hover {
	border:#333 1px solid;
	color:#FFF;
	background: #ff5db1; /* Old browsers */
	background: -moz-linear-gradient(top, #8F8C8D 0%, #221F21 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8F8C8D), color-stop(100%,#221F21)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8F8C8D 0%,#221F21 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8F8C8D 0%,#221F21 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8F8C8D 0%,#221F21 100%); /* IE10+ */
	background: linear-gradient(to bottom, #8F8C8D 0%,#221F21 100%);/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8F8C8D', endColorstr='#221F21',GradientType=0 ); /* IE6-9 */
}

div.badoo span.current {
	padding: 3px 8px;
	border: #75676E 1px solid;
	background: #8B8287;
	background: -moz-linear-gradient(top, #8F8C8D 0%, #221F21 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92898E), color-stop(100%,#8F8C8D));
	background: -webkit-linear-gradient(top, #8D8388 0%,#999497 100%);
	background: -o-linear-gradient(top, #8F8C8D 0%,#221F21 100%);
	background: -ms-linear-gradient(top, #8F8C8D 0%,#221F21 100%);
	background: linear-gradient(to bottom, #B9B9B9 0%,#2E2C2D 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8F8C8D', endColorstr='#221F21',GradientType=0 );
	color: #FFFFFF;
	margin: 0px 4px;
	border-radius: 4px;
}
div.badoo span.disabled {
	display:none;
}
.text_notfound{
	font-size:24px;
	color:#F00;
}
/***************************/
.box_imgpdlarge{
	width:450px;
	margin:20px auto;
	overflow:hidden;
	text-align:center;
}
.img_pdlarge{
	max-width:450px;
	max-height:250px;	
	border:none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.download_doc{
	margin:20px 0;
}
.boximg_prohome{
	/*width:170px;*/
	height:118px;
	overflow:hidden;
}
.img_prohome{
	width:auto !important;
	height:118px;
	/*max-width:170px ;
	max-height:118px;*/
}

/***************************/
.gall_box {
  border: 1px solid #ddd;
  width:315px;
  height:290px;
  /*padding: 5px;*/
  overflow:hidden;
  margin: 10px 5px   ;
  box-shadow: 1px 1px 5px #ccc;
  text-align: center;
  float:left;
  position: relative;
}
/*.boximg_galllarge{
  width:306px;
  height:220px;	
  margin:5px auto;
  padding:0;
  overflow:hidden;
}*/
.img_galllarge{
  height:290px;
  /*height:220px;*/
  border:none;
  transition: all 0.4s ease-in-out;	
  -ms-transform: scale(0.4,0.4);  
}
.name_gall {
	font-weight:bold;
	font-size:20px;
	color:#666;
	width:315px;
  	height:30px;	
	background:url(../images/bg_treatment.png) repeat;
	position:absolute;
	left:0;
	bottom:0;
}
.img_galllarge:hover{
	opacity: 0.6;
    filter: alpha(opacity=60);
}
.name_gall{
	padding:5px;
	font-size:16px;
	color:#333;
}
/***********************************/
.text_aboutus{
	font-size:16px;
	text-align:justify;
	line-height:1.6;
}
/*********************************Contact*/
.contact_us{
	font-size:18px;
}
.form_con, .form_con2, .form_con3 {
	float: left;
	width: 250px;
	height: 25px;
	padding: 3px;
	color: #000;
	border-radius: 4px;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 2px #c4c4c4;
}
.form_con2 {
	height:120px;
}
.form_con3{ width:150px; }
.sendmail {
	width: 80px;
	height: 30px;
	color: #FFF;
	border:none;
	font-weight: bold;
	border-radius: 5px;
	background: #203E98 ; /* Old browsers */
	background: -moz-linear-gradient(top,  #203E98  0%, #40A2ED  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#203E98 ), color-stop(100%,#40A2ED )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #203E98  0%,#40A2ED  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #203E98  0%,#40A2ED  100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #203E98  0%,#40A2ED  100%); /* IE10+ */
	background: linear-gradient(to bottom, #203E98  0%,#40A2ED  100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203E98 ', endColorstr='#40A2ED ',GradientType=0 ); /* IE6-9 */
}
.sendmail:hover{
	color:#000;
	transition: 0.3s cubic-bezier(.6,.2,.5,1.3);
	cursor:pointer;
}
input#subject{ padding-left:30px ; background:url(../contact/images/subject.png) 5px 5px no-repeat ; margin:5px auto; }
input#name{ padding-left:30px ; background:url(../contact/images/user.png) 5px 5px no-repeat ;margin:5px auto;  }
textarea#address{ padding-left:30px ; background:url(../contact/images/home.png) 5px 5px no-repeat ;margin:5px auto;  }
input#email{ padding-left:30px ; background:url(../contact/images/mail.png) 5px 5px no-repeat ; margin:5px auto; }
input#telephone{ padding-left:30px ; background:url(../contact/images/tel.png) 5px 5px no-repeat ; margin:5px auto; }
input#fax{ padding-left:30px ; background:url(../contact/images/fax.png) 5px 5px no-repeat ;margin:5px auto;  }
textarea#message{ padding-left:30px ; background:url(../contact/images/messages.png) 5px 5px no-repeat ; margin:5px auto; }
input#cap{ padding-left:30px ; background:url(../contact/images/log.png) 5px 5px no-repeat ;margin:5px auto;  }
.acontact_us{color:#000; text-decoration:none;}
.acontact_us:hover{color:#666;}
.map{
	width:100%;
	height:170px !important;
	border:1px solid #bbbbbb;
	border-radius:3px;
	float:right;
}
.img_map{height:300px ; border:none; border: solid 1px #999;}
.img_map:hover{
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
 }
 #verify-code{margin-left:20px;}
.box_social{
	 text-align:center;
	 width:100px;
	 height:70px;
	 overflow:hidden;
	 padding:5px;
	 overflow:hidden;
	 display:inline-block;
	 margin:auto;
}