* { margin: 0; padding: 0; outline: 0; }

body {
    font-size: 12px;
    line-height: 18px;
    font-family: arial, sans-serif;
    color: #575757;
    background: #01a0bd  url(../images/body.png) repeat-x 0 0;
    min-width: 1009px;
}

a { color: #0252aa; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }

input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { padding-top: 3px; width: 1009px; margin: 0 auto; }

#wrapper { background: url(../images/wrapper.jpg) no-repeat center 0; }
#wrapper-top { font-size: 0; line-height: 0; text-indent: -4000px; height: 19px;background: url(../images/wrapper-top.png) no-repeat 0 0; }
#wrapper-middle { position: relative; padding: 0 14px 45px; width: 981px; background: url(../images/wrapper-middle.png) repeat-y 0 0; }
#wrapper-bottom { font-size: 0; line-height: 0; text-indent: -4000px; height: 22px; background: url(../images/wrapper-bottom.png) no-repeat 0 0; }



#header { position: relative; padding: 10px; height:180px; background: url(../images/header.png) no-repeat 0 0; }

#logo { display: inline; float: left; padding-top: 2px; width: 270px; }
#logo .slogan { padding-top: 5px; font-size: 10px; text-transform: uppercase; color: #135a75; }
#logo a { display: block; width: 150px; height:150px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(../images/logo.png) no-repeat 0 0; margin-left:25px;}

#logo_two { display: inline; float: left; padding-top: 80px; width:0px; }
#logo_two .slogan { padding-top: 80px; font-size: 10px; text-transform: uppercase; color: #135a75; }
#logo_two a { display: block; width:700px; height:100px; font-size: 0; line-height: 0; text-indent: -4000px;margin-left:0px; margin-right:0px;}



#slider { background: url(../images/slider.jpg) no-repeat 0 0; }
#slider .jcarousel-container, 
#slider .jcarousel-clip, 
#slider .jcarousel-clip ul li { position: relative; overflow: hidden; width: 981px; height: 364px; }
#slider .jcarousel-clip ul li img { display: block; float: left; }
#slider .jcarousel-prev-disabled,
#slider .jcarousel-next-disabled { display: none !important; }
#slider .jcarousel-prev,
#slider .jcarousel-next { position: absolute; top: 144px; left: 0; width: 40px; height: 77px; background: url(../images/slider-arrows.png); cursor: pointer; }
#slider .jcarousel-next { left: auto; right: 0; background-position: -40px 0; }
#slider .caption { display: inline; float: left; padding: 47px 0 0 56px; width: 470px; }
#slider .caption h2  { font-family: 'HelveticaNeue', sans-serif; font-size: 50px; font-weight: normal; line-height: 50px; color: #084b64; text-transform: uppercase; }
#slider .caption h3 { font-family: 'HelveticaNeueThin', sans-serif; font-size: 50px; line-height: 52px; color: #000; font-weight: normal; text-transform: uppercase; }
#slider .caption h3 span { font-family: 'HelveticaNeueBold', sans-serif; color: #17abe1; }


#main { position: relative; padding: 20px 20px 0; width: 960px; }

#content { display: inline; float: left; width: 593px; }
.post img { display: block; float: left; padding: 5px 15px 0 0; }
.post h3 { padding: 0 0 25px 6px; }
.post p { padding-bottom: 18px; }

#sidebar { display: inline; float: right; width: 312px; }
.box ul { padding: 19px 0 0 15px; }
.box li { padding-left: 2px; font-size: 14px; line-height: 26px; color: #0099d1; }
.box li a { color: #0099d1; }

.widgets {
	position: relative;
	margin-top: 29px;
	padding: 38px 0 0 3px;
	width: 940px;
	background: url(../images/widgets.png) no-repeat center 0;
}
.widgets2 {
	position: relative;
	margin-top: 29px;
	padding: 18px 0 0 3px;
	width: 980px;
	background: url(../images/widgets.png) no-repeat center 0;
}
.col { display: inline; float: left; padding-right: 0px; width:300px; height:auto ;}

.col1 {width:230px; height:600px;background:url(../images/Bg-1.jpg);}
.col1 h3 { padding: 4px 0 12px 36px; background: url(../images/img1-1.gif) no-repeat 0 4px; }
.col1 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col2{width:230px; height:600px; background:url(../images/Bg-2.jpg);}
.col2 h3 { padding: 4px 0 12px 36px; background: url(../images/img2-2.gif) no-repeat 0 4px; }
.col2 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col3 { width:230px; height:600px; background:url(../images/Bg-3.jpg) ;}
.col3 h3 { padding: 4px 0 12px 36px; background: url(../images/img3-3.gif) no-repeat 0 4px; }
.col3 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col4 {width:230px; height:600px; background:url(../images/Bg-4.jpg) ;}
.col4 h3 { padding: 4px 0 12px 36px; background: url(../images/img4-4.gif) no-repeat 0 4px; }
.col4 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col5 {
	width:920px; height:180px;margin-top:10px; 
	background: rgba(117,245,86,1);
	background: -moz-linear-gradient(top, rgba(117,245,86,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(117,245,86,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(117,245,86,1) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(117,245,86,1) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(117,245,86,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(117,245,86,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75f556', endColorstr='#ffffff', GradientType=0 );
}
.col5 h3 { padding: 4px 0 12px 36px; background: url(../images/img3-3.gif) no-repeat 0 4px; }
.col5 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col6 {
	width:920px; height:180px;margin-top:10px; 
	background: rgba(250,232,70,1);
	background: -moz-linear-gradient(top, rgba(250,232,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,232,70,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(250,232,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(250,232,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(250,232,70,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(250,232,70,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae846', endColorstr='#ffffff', GradientType=0 );
	
}
.col6 h3 { padding: 4px 0 12px 36px; background: url(../images/img2-2.gif) no-repeat 0 4px; }
.col6 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col7 {
	width:920px; height:180px;margin-top:10px; 
	background: rgba(242,70,70,1);
	background: -moz-linear-gradient(top, rgba(242,70,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,70,70,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(242,70,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(242,70,70,1) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(242,70,70,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(242,70,70,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f24646', endColorstr='#ffffff', GradientType=0 );
}
.col7 h3 { padding: 4px 0 12px 36px; background: url(../images/img4-4.gif) no-repeat 0 4px; }
.col7 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col8 {
	width:920px; height:180px;margin-top:10px;
	background: rgba(237,237,237,1);
	background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 ); 
	
}
.col8 h3 { padding: 4px 0 12px 36px; background: url(../images/avatar.gif) no-repeat 0 4px; }
.col8 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}

.col9 {
	width:920px; height:180px;margin-top:10px; 
	background: rgba(70,191,252,1);
	background: -moz-linear-gradient(top, rgba(70,191,252,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70,191,252,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(70,191,252,1) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(70,191,252,1) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(70,191,252,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(70,191,252,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46bffc', endColorstr='#ffffff', GradientType=0 );
}
.col9 h3 { padding: 4px 0 12px 36px; background: url(../images/img1-1.gif) no-repeat 0 4px; }
.col9 p { padding: 4px 10px 12px 36px; font-weight:bold; font-size:14px;}



.projects { display: inline; float: left; padding-right: 24px; width: 600px; }
.projects h3 { padding-bottom: 20px; }
.projects-slider { padding-left: 38px; float: left; }
.projects-slider .jcarousel-container, 
.projects-slider .jcarousel-clip { position: relative; overflow: hidden; width: 545px; height: 88px; }
.projects-slider .jcarousel-clip ul li { position: relative; overflow: hidden; padding-right: 21px; width: 88px; height: 88px; }
.projects-slider .jcarousel-clip ul li a { display: block; width: 88px; height: 88px; }
.projects-slider .jcarousel-clip ul li img { border: solid 1px #c4c4c4; padding: 1px; background: #fff; }
.projects-slider .jcarousel-prev-disabled,
.projects-slider .jcarousel-next-disabled { display: none !important; }
.projects-slider .jcarousel-prev,
.projects-slider .jcarousel-next { position: absolute; top: 32px; left: 4px; width: 20px; height: 26px; background: url(../images/projects-slider.png); cursor: pointer; }
.projects-slider .jcarousel-next { left: auto; right: -11px; background-position: -20px 0; }

#footer { padding: 9px 39px 50px 39px; }
.copy { display: inline; float: right; color:#FFF;font-size:14px; font-weight:bold;}
.copy span { color: #008097; padding: 0 10px; }
.copy a { color: #52e3fe; text-decoration: underline; }
.copy a:hover { text-decoration: none; }

#bottom-nav { line-height: 19px; color: #FFF; font-size:14px; font-weight:bold; }
#bottom-nav a { color: #82d1df; }
#bottom-nav span { padding: 0 9px; }

/*.socials { display: inline; float: right; }
.socials a { display: block; width:32px; height:32px; padding-right:0px; text-indent: -5000px; }
.socials a.facebook { background:url(../images/facebook.png) no-repeat 0 0; }

#search { position: absolute; top: 53px; right: 23px; width: 236px; background: url(../images/search.png) no-repeat 0 0; }
#search .field { border: 0; background: none; padding: 13px 14px 11px; width: 208px; line-height: 15px; font-size: 11px; color: #5b6366; }*/
.socials { display: inline; float: right; margin-top:-30px; }
.socials a { display: block; width: 27px; height: 28px; float: left; padding-right: 10px; text-indent: -5000px; }
.socials a.facebook { background: url(../images/facebook_icon.png) no-repeat 0 0; }
.socials a.twitter { background: url(../images/twitter_icon.png) no-repeat 0 0; }
.socials a.email { background: url(../images/email_icon.png) no-repeat 0 0; }
.socials a.instagram { background: url(../images/instagram_icon.png) no-repeat 0 0; }
.socials a.line { background: url(../images/line_icon.png) no-repeat 0 0; }

#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background:#0099FF;
  line-height: 100%;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu li {
  margin: 0 0px;
  padding: 0 0 10px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size:16px;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#cssmenu a:hover {
  background: #000;
  color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
  background:#BFEFFF;
  color: #444;
  border-top: solid 1px  #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: #0099FF;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #0099FF;
  color: #FFFFFF !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  z-index: 1000;
  display: none;
  margin: 0;
  padding: 0;
  width:300px ;
  position: absolute;
  top: 40px;
  left: 0;
  background: #ffffff url(images/overlay.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: bold;
  font-size: 16px;
}
#cssmenu ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#marquee_index {
	height:60px;
	float:left;
	font-family:"JasmineUPC";
	font-size:30px;
	color:#C06;
	font-weight:bold;
}

#boxxx{  
	width:98%;
	height:auto;
	margin-top: 20px;
    margin-bottom: 20px;
    margin-right:5px;
    margin-left:5px;
	background-color:#F5F5F5;
	border-radius: 7px;
	border-bottom: 1px solid #c4c4c4;
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);/*----//-webkit คือใช้ได้กับ browser chome,safari //-moz คือใช้ได้กับ browser mozilla firefox //-o- ใช้ได้กับ browser opera //-------*/
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
	
}

/*---------------input text กล่องกรอกข้อความต่างๆ---------------*/
.text_input {
   font-family: inherit;
   color: inherit;
  -moz-box-sizing: border-box;
  width:36%;
  height: 35px;
  margin-top:10px;
  margin-bottom: 25px;
  padding: 0 15px 2px;
  background: white;
  border: 2px solid #ebebeb;
  border-radius: 4px;
;
}
/*---------------iเมื่อกล่องกรอกข้อความโดนคลิ๊ก---------------*/
.text_input:focus {
  border-color:#C71585;
  outline: none;
}
.font14{
	font-size:14px;
	font-weight:bold;
	color:#003399;	
}
.font_red{
	color:#F00;
	font-weight:bold;	
}
.font15{
	font-size:22px;
	font-weight:bold;
	color:#003399;	
}



/*---------------ribbon------------------*/

[class^="ribbon-"] {
  position: relative;
}
[class^="ribbon-"]:before, [class^="ribbon-"]:after {
  content: "";
  position: absolute;
}

.ribbon-2 {
  width: 70%;
  height: 50px;
  background:#FFCC00;
  left: -150px;
  color:#CC6600;
  font-weight:bold;
  top:5px;
  font-family:TH SarabunPSK;

}
/*.ribbon-2:before {
  height: 0;
  width: 0;
  border-top: 10px solid #cd8d11;
  border-left: 10px solid transparent;
  bottom: -10px;
}*/
.ribbon-2:after {
  height: 0;
  width: 0;
  border-top:26px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 15px solid #FFCC00;
  right: -15px;
  top:-1px;
}
.ribbon-2 h2 {
   font-size:36px!important;
   color:#cc0099;
   /*text-shadow: 2px 2px 8px #FFF;*/
   text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
   margin:0px;
   padding: 15px 10px;
   text-align:left;
   }
   .btn_orange {
  vertical-align: top;
  padding: 0;
  font-size: 18px;
  font-weight:bold;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background:#ff9000;
  border: 0;
  border-bottom: 2px solid #C71585s;
  border-radius: 5px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #343947;
  box-shadow: inset 0 -2px #343947;
}
.btn_orange:hover {  
    background-color: #6CC;
    background-image: linear-gradient(top, #0483a0, #31b2c3);
}