body{ position:relative; background-image:url("../images/bg-template-002.jpg");  background-position:top center;   background-repeat: no-repeat;  background-size:100% 100%;
font-size:20px; font-family: 'CSChatThai'; color:black;}
p{font-size:20px; color:black; }
@font-face {
	font-family: 'supermarket';
	src: url('../fonts/supermarket.eot');
	src: local('☺'), url('../fonts/supermarket.woff') format('woff'), url('../fonts/supermarket.ttf') format('truetype'), url('../fonts/supermarket.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CSChatThai';
	src: url('../fonts/CSChatThai.eot');
	src: local('☺'), url('../fonts/CSChatThai.woff') format('woff'), url('../fonts/CSChatThai.ttf') format('truetype'), url('../fonts/CSChatThai.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: thaisanslite;
	src: url('../fonts/thaisanslite.eot');
	src: local('☺'), url('../fonts/thaisanslite.woff') format('woff'), url('../fonts/thaisanslite.ttf') format('truetype'), url('../fonts/thaisanslite.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: EDSense;
	src: url('../fonts/EDSense.eot');
	src: local('☺'), url('../fonts/EDSense.woff') format('woff'), url('../fonts/EDSense.ttf') format('truetype'), url('../fonts/EDSense.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: SarunThangLuang;
	src: url('../fonts/SarunThangLuang.eot');
	src: local('☺'), url('../fonts/SarunThangLuang.woff') format('woff'), url('../fonts/SarunThangLuang.ttf') format('truetype'), url('../fonts/SarunThangLuang.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: EDPenSook-Bold;
	src: url('../fonts/EDPenSook-Bold.eot');
	src: local('☺'), url('../fonts/EDPenSook-Bold.woff') format('woff'), url('../fonts/EDPenSook-Bold.ttf') format('truetype'), url('../fonts/EDPenSook-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: waan-free;
	src: url('../fonts/waan-free.eot');
	src: local('☺'), url('../fonts/waan-free.woff') format('woff'), url('../fonts/waan-free.ttf') format('truetype'), url('../fonts/waan-free.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* remember to define focus styles! */
:focus {outline: none;}
/* Change the white to any color ;) */
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #8dcdff  inset;}

.text-name {font-family: thaisanslite; font-size:40px; color:white; margin-top:10px;}
.text-name-eng{font-family: thaisanslite; font-size:25px; color:#185890; text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; margin-top: -14px;}

/* textsize*/
#top {margin-top:30px;}
	.menu-textsize{ margin-right:15px; margin-top:-3px;}
	.menu-textsize ul {padding:0; margin:0; }
	.menu-textsize ul li {padding:0; margin:0; list-style:none; display:inline-block; zoom: 1; *display: inline;  vertical-align: bottom; }
	.menu-textsize ul li a{ text-decoration:none; }

	.c { margin-right:25px; }
	.c ul {padding:0; margin:0; }
	.c ul li {padding:0; margin: -3px; display:inline-block; zoom: 1; *display: inline; }
	.c ul li a{ text-decoration:none; }

	.flag {margin-right:25px;}
	.flag ul { padding:0; margin:0; }
	.flag ul li {padding:0; display:inline-block; zoom: 1; *display: inline; }
	.flag ul li a{ text-decoration:none; }

/*start search*/
	.search-query{ margin-left:20px; background-color:#444444; background-image:url("../images/icon-search.png"); background-repeat:no-repeat; background-position:right; border:0; padding:5px; line-height: 20px;}


#bg-topmenu{background-image:url("../images/bg-topmenu.jpg"); height:auto; padding-top:1px;}
.img-logo{ position:absolute; top:10px; right:10px;}
.mission{font-family: thaisanslite; color:black; font-size:18px; line-height: 22px;   margin: 0 auto; overflow: hidden;text-align: center; }

/*TOPMENU*/
#topmenuxx { position:relative; width:70%; margin:0 auto;z-index: 2;  font-size:22px;  font-family: 'thaisanslite';color:black;  background-image:url("../images/line-menu.png"); background-repeat:no-repeat; background-position:center 45px; }
#topmenuxx  ul {margin: 0 auto; }
	#topmenuxx  ul:after {content: ""; clear: both; display: block; text-align:center;  }
	 #topmenuxx  ul li {float: left;  display: block;    background-image:url("../images/topmenu-reg.png");background-repeat:no-repeat; background-position:bottom center; margin-left: 25px;  margin-right: 25px;}
		#topmenuxx  ul li:hover { display: block; color:#d72b34;  background-image:url("../images/topmenu-hot.png");background-repeat:no-repeat; background-position:bottom center; }
			#topmenuxx  ul li:hover a { color:black; }
#topmenuxx  ul li:hover > ul {display: block;	}
#topmenuxx  ul li a {color:black; display: block; padding-bottom: 37px; text-decoration: none; }
#topmenuxx  ul li a.active { display: block; color:white;  background-color:#f79016; }
#topmenuxx  ul li.active a{ padding-bottom: 37px;  display: block; color:#d72b34; background-image:url("../images/topmenu-hot.png");background-repeat:no-repeat; background-position:bottom center;  }

#topmenuxx  ul ul {display: none; padding: 0;position: absolute;  color:black ;background-color: #F6F6F6; z-index:2; font-size:20px; }
		#topmenuxx  ul ul li {float: none; position: relative; display:block; text-align:left; min-width:200px;  background-image:none; margin-left:0; margin-right:0; }
				#topmenuxx  ul ul li a {color:black;    background-image:none; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; background-image:none; border-bottom:1px dashed white;}
				#topmenuxx  ul ul li a:hover {color:black; background-color: #dddee0;  background-image:none;}
	
	#topmenuxx  ul ul ul {position: absolute; left: 100%; top:0; background-color: #faf9f9;}
		#topmenuxx  ul ul ul li a{ display: block;padding-bottom: 5px; }
		#topmenuxx  ul ul ul li.active {  display: block;}
		#topmenuxx  ul ul ul li a:hover {color:black ;  }
			#topmenuxx  ul ul li a.active-sup-topmenu{ color: black ;}

.fa-s1 { font-size: 12px;}
.navbar-default {background-color:transparent;}

/* Hilight*/
#highlight{margin-top:15px;}
#text-hilight{ top: 90px; right: 0;left: 311px;}
	.slogan { margin-top:-30px; font-family: EDPenSook-Bold; color:black; font-size:23px;background-image:url("../images/bg-white.png"); background-repeat:no-repeat; text-shadow:none; height:53px; padding-top:10px;  padding-left:30px;text-align: left;}
	.intro{font-family: waan-free; color:white; font-size:45px; text-shadow:none; text-align: left;padding-left:30px;}
	.intro-eng{font-family: waan-free; color:white; font-size:45px; text-shadow:none; text-align: left; line-height: 10px; text-transform:uppercase;padding-left:30px;}
.arrow-hilight{float:right; position:relative; z-index:1; color:white; margin-top:-40px; font-size:23px; margin-right:10px;}
.arrow-hilight img {margin-right:20px; margin-left:20px; }

.btn-newsviewall a{position:absolute; top:-55px; color:white; right:15px; font-size:20px;}
.btn-newsviewall a:hover {color:white; }

/*NEWS */
#tab-news li { color:white; font-size:24px; font-family: 'supermarket';}
#tab-news li a{background-color:transparent;  border: none; color:white; }
#tab-news li.active a{color:#2b2b2b;  background-image:url("../images/icon-car2.png"); background-repeat:no-repeat;  background-position:bottom;  padding-bottom: 20px; }
#tab-news li a:hover {color:#2b2b2b;}
.news-thumbnail a{color:black; }
.nav-tabs {border:none;  background-image:url("../images/line-tab.png"); background-repeat:repeat-x;  background-position:bottom; }
#my-tab-news{margin-top:25px; position:relative;}
.news-thumbnail{background-color:white; border-radius:4px;  box-shadow: 0px 0px 1px 1px #378ad2; -moz-box-shadow:  0px 0px 1px 1px #378ad2;  -webkit-box-shadow: 0px 0px 1px 1px #378ad2;}
.news-thumbnail p{padding:10px; color:#555555; }
.news-thumbnail div{padding:10px; color:#2b2b2b; }
.titlenews{font-size:20px; color:#2b2b2b; background-image:url("../images/line-titlenews.jpg"); background-repeat:no-repeat; background-position:10px bottom;}
.label-date{ position:relative;  padding-top: 15px !important; width:82px; height:82px; background-image:url("../images/icon-warning.png"); background-repeat:no-repeat; text-align:center; 
line-height:15px; font-size:16px; margin-top: -43px;  margin-left: 15px; }
.label-date span{ font-size:28px;  line-height:22px;  padding-top:15px;}
#news1{line-height:25px;}

/*VDO */
#vdo{margin-top:20px; height:313px; background-image:url("../images/notebook.png"); background-repeat:no-repeat; background-position:center center;}
#vdo iframe{ margin:0 auto;display: block; width:77%; height:90%; margin-top:10px;}
.title-job { font-family: 'supermarket'; color:black; font-size:21px; }

/*JOB*/
#job {/*background-image:url("../images/bg-job.png");*/ background-repeat:repeat; padding-left:30px;  padding-right:20px; padding-top:20px; padding-bottom:10px; border-radius:4px; margin-top:25px;}
#job ul {padding:0; margin:0; }
#job ul li {list-style:none; border-bottom: 1px solid #ffdda6; background-image:url("../images/icon-search2.png"); background-repeat:no-repeat; background-position:left 6px;; padding-left:25px; padding-top:5px; padding-bottom:5px;}
#job a{color:black;}
.btn-view {color:white; float:right; margin-top:5px;}
a.btn-view {color:white !important;}


/*Porcurement */
#procurement-thumbnail{background-color:white; border-radius:4px;  box-shadow: 0px 0px 1px 1px #378ad2; -moz-box-shadow:  0px 0px 1px 1px #378ad2;  -webkit-box-shadow: 0px 0px 1px 1px #378ad2;}
.title-procurement{font-family: 'supermarket'; color:white; font-size:23px; background-color:#12b886;border-top-left-radius:4px; border-top-right-radius:4px;  text-align:center;padding:2px;}
.list-procurement { background-color:white; margin-left:15px; margin-right:15px; }
.list-procurement ul {padding:0; padding-top:10px; }
.list-procurement ul li {padding:0; margin:0;  list-style:none; }
.list-procurement ul li a{color:black; list-style:none; display:block;  padding:5px;  text-align:left; }
.number{width:37px; height:38px; text-align:center; background-image:url("../images/circle.png"); background-repeat:no-repeat; padding-top:6px;display:inline-block; margin-right:10px; color:black;}
.btn-view2 {color:#0666b9;  margin-top:5px; text-align:right;display: block; }
a.btn-view2 {color:#0666b9 !important;}



/*Calendar */
.title-calendar{font-family: 'supermarket'; color:white; font-size:23px; background-color:#ae3ec9;border-top-left-radius:4px; border-top-right-radius:4px;  text-align:center;padding:2px;}
.table-condensed{width: 100%; text-align:center;}

#calendar table{ margin-top:30px; border:1px solid #e9e9e8; background-color:white;}
#calendar table td {text-align:center;}
.day{ border-right: 1px solid #e9e8e8; border-bottom: 1px solid #e9e8e8; font-size:17px; }
#month{ font-family: 'supermarket'; color:white; font-size:22px; line-height: 11px; }
#bg-month a.btn {height: 30px; line-height: 11px; color:black; }
#bg-month {text-align:center; width: 13px; }

.name-day{font-family: tahoma; font-size:11px; color:#e57406; border-right: 1px solid #e9e8e8; border-bottom: 1px solid #e9e8e8;}
#calendar tr{border-bottom:1px solid #e9e9e8;}
.calender-thumbnail{padding:10px; padding-bottom:38px; padding-top:15px;}

/*Link*/
.title-link{font-family: 'supermarket'; color:white; font-size:23px; background-color:#82c91e;border-top-left-radius:4px; border-top-right-radius:4px;  text-align:center;padding:2px;}
#link-thumbnail {background-color:white; border-radius:4px;  box-shadow: 0px 0px 1px 1px #378ad2; -moz-box-shadow:  0px 0px 1px 1px #378ad2;  -webkit-box-shadow: 0px 0px 1px 1px #378ad2;}
#link-thumbnail ul {margin-right:10px; padding:10px;margin-left:10px;padding-bottom:27px;}
#link-thumbnail ul li {background-image:url("../images/icon-stop.png"); background-repeat:no-repeat; background-position: left; list-style:none; padding-left:30px; padding-top:7px; border-bottom:1px dashed #d4d2d2;}
#link-thumbnail ul li a {color:black;}

/*gallery*/
.title-gallery{font-family: 'supermarket'; color:white; font-size:23px; padding-left:10px; margin-top:30px;}
#gallery ul {padding:0; margin:0;}
#gallery ul li { list-style:none; display:inline-block; border:5px solid white; margin:16px; }
.arrow-gallery{text-align:right; display:block; margin-top:-29px;margin-right:20px;}


/*banner*/
.banner {}
.banner ul {padding:0; margin:0; text-align:center;}
.banner ul li {padding: 23px  23px ; margin:0;  list-style:none; display:inline-block; background-image:url("../images/bg-banner.png"); background-repeat:no-repeat; background-position: bottom center; }
.banner ul li:hover{ opacity:.92; }
.banner ul li a { color:white;}
.banner ul li a:hover{text-decoration:none;}
#rowbanner{margin: 0; /*background-color:rgba(238,238,239,0.8);border-top: 2px solid #7A7A7B;*/ }

/*Partner*/
#rowpartner{background-color:white;  margin:0; padding:0;}
#rowpartner ul {padding:0; margin:0; text-align:center;}
#rowpartner ul li {padding-left: 25px; padding-right: 25px; padding-top:10px;  padding-bottom:10px;  margin:0;  list-style:none; display:inline-block; }
#arrow-left{background-image:none; margin-top:42px;     width: 40px;}
#arrow-right{background-image:none; margin-top:42px;     width: 40px;}

/*FOOTER*/
#bg-footer { background-color:#F29900; margin:0;}
.title-footer{font-family: 'supermarket'; font-size:27px; margin-top:15px; }
.title-footer2{font-family: 'supermarket'; font-size:19px; }
.policy ul {padding:0; margin:0; padding-bottom:10px;}
.policy ul li {color:black; padding:0; margin:0;  list-style:none; display:inline-block; }
.policy ul li a{color:black;}

#copyright{ font-family: Arial; font-size:11px; text-transform:uppercase; padding:0; margin-top:10px;margin-bottom:10px;}
#bg-copyright{  background-color:black; color:#9b9c9d;padding:5;}
.padding-textfooter{padding-top:30px;}
.img-responsive{min-width:100%;}

#bordermap{border-radius:4px; margin-top:40px;}


/*PAGE*/
.title-page {font-family: 'supermarket'; font-size:24px; color:black;  margin-bottom:30px; border-bottom:1px solid #eb8e01;}

/*breadcrumb*/
.breadcrumb_{font-size:17px; margin-top:6px;}
.breadcrumb_text {color:#1762a5;}
.curent {color:#787879;}
#page{  padding-left:20px;padding-right:20px;  background-color: white;  border-radius: 0px;  box-shadow: 0px 0px 1px 1px #eb8e01; -moz-box-shadow: 0px 0px 1px 1px #eb8e01;  -webkit-box-shadow: 0px 0px 1px 1px #eb8e01;}



/*หน้าจอต่างๆ*/

@media screen and (min-width: 1202px) and (max-width: 1400px) {
.frist-gallery{margin-left:0;}
.left-gallery{margin-right:0;}

}

@media screen and (min-width: 992px) and (max-width: 1201px) {
#topmenuxx{ width:80%; background-size:100%;}
#topmenuxx ul li {margin-left: 14px;  margin-right: 14px;}
.slogan {font-size: 19px;background-size: 100% 100%;}
.mission{width: 80%;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#topmenuxx{ width:90%; background-size:100%;}
#topmenuxx ul li {margin-left: 9px; margin-right: 9px; }
#text-hilight {  top: 55px; left: 268px;}
.img-logo{ z-index: 2; background-color:#FDFBFC;}
.slogan {font-size: 17px;background-size: 100% 100%;}
.intro,.intro-eng{ font-size: 38px;}
.text-name{margin-top: 0px;}
#top {margin-top: 0px;}
#bg-topmenu{margin-top: -10px;}
.mission{width: 80%;}

}

@media screen and (min-width:597px) and (max-width: 767px) {
#toggle-mobile{}
.navbar-default .navbar-toggle{float:left;}
.navbar-collapse.in{ overflow-y:initial; height: 188px;}
#topmenuxx{ width:100%; background-size:100%;}
#topmenuxx ul li {margin-left: 14px;  margin-right: 14px;}
#text-hilight {  top: 55px; left: 240px;}
.slogan {margin-top: -50px; font-size: 16px;background-size: 100% 100%; padding-left: 0px;} 
.intro,.intro-eng{ font-size: 30px; padding-left: 0px;}
#job{padding-bottom: 34px;}
#procurement-thumbnail {margin-bottom:30px;}
.padding-textfooter{padding-top:5px;}
.mission{width: 70%;}
#top { margin-top: 0px;}
}


@media screen and (min-width: 409px) and (max-width: 596px) {
.navbar-default .navbar-toggle{float:left;}
.navbar-collapse.in{ overflow-y:initial;}
#topmenuxx{ width:100%; background-size:100%;}
#topmenuxx ul li {margin-left: 14px;  margin-right: 14px;}
#text-hilight {  top: 55px; left: 160px;}
.slogan {margin-top: -70px; font-size: 12px;background-size: 100% 100%; padding-left: 0px;} 
.intro{ font-size: 20px; padding-left: 0px;  line-height:18px;}
.intro-eng{ font-size: 20px; padding-left: 0px; line-height:10px;}
#job{padding-bottom: 34px;}
#procurement-thumbnail {margin-bottom:30px;}
.padding-textfooter{padding-top:5px;}
.arrow-hilight{margin-top: -28px;    font-size: 16px;    margin-right: 0;}
#topmenuxx{font-size: 22px;background-image:none;}
#topmenuxx  ul{padding:0 !important; margin:0;}
#topmenuxx  ul li.active a{background-image:none; padding-bottom:0 !important;}
#topmenuxx  ul li{background-image:none;  margin-left: 0px; margin-right:0px;  clear: both;}
#topmenuxx  ul li a{padding-bottom:0;}
#topmenuxx  ul li:hover {background-image:none;}
#bg-topmenu {height:auto;}
.mission {width:60%; }
.text-name {font-family: thaisanslite; font-size:40px !important; color:white; margin-top:10px; line-height:38px;}
.text-name-eng{font-family: thaisanslite; font-size:28px; color:#185890; text-transform:uppercase; letter-spacing:3px;     line-height: 28px;    padding-top: 20px;}
.search-query { margin-top: -17px;}
.btn-newsviewall a{top: -49px;font-size: 17px; }

}

@media screen and (min-width: 404px) and (max-width: 408px) {
.navbar-default .navbar-toggle{float:left;}
.navbar-collapse.in{ overflow-y:initial;}
#topmenuxx{ width:100%; background-size:100%;}
#topmenuxx ul li {margin-left: 14px;  margin-right: 14px;}
#text-hilight {  top: 85px; left:30px;}
.slogan {margin-top: -80px; font-size: 12px;background-size: 100%; padding-left: 0px;} 
.intro{ font-size: 20px; padding-left: 0px;  line-height:18px;margin-top: -20px;}
.intro-eng{ font-size: 20px; padding-left: 0px; line-height:10px;}
#job{padding-bottom: 34px;}
#procurement-thumbnail {margin-bottom:30px;}
.padding-textfooter{padding-top:5px;}
.arrow-hilight{margin-top: -28px;    font-size: 16px;    margin-right: 0;}
#topmenuxx{font-size: 22px;background-image:none;}
#topmenuxx  ul{padding:0 !important; margin:0;}
#topmenuxx  ul li.active a{background-image:none; padding-bottom:0 !important;}
#topmenuxx  ul li{background-image:none;  margin-left: 0px; margin-right:0px;  clear: both;}
#topmenuxx  ul li a{padding-bottom:0;}
#topmenuxx  ul li:hover {background-image:none;}
#bg-topmenu {height:auto;}
.mission {width:40%;}
.btn-newsviewall a{top: -49px;font-size: 17px; }

}

@media screen and (min-width: 0px) and (max-width: 404px) {
.navbar-default .navbar-toggle{float:left;}
.navbar-collapse.in{ overflow-y:initial;}
#topmenuxx{ width:100%; background-size:100%;}
#topmenuxx ul li {margin-left: 14px;  margin-right: 14px;}
#text-hilight {  top: 85px; left:30px;}
.slogan {margin-top: -97px; font-size: 7px;background-size: 100%;  padding-left: 0px;padding-top: 0px;} 
.intro{ font-size: 16px; padding-left: 0px;  line-height:18px;margin-top: -30px;}
.intro-eng{ font-size: 16px; padding-left: 0px; line-height:10px;}
#job{padding-bottom: 34px;}
#procurement-thumbnail {margin-bottom:30px;}
.padding-textfooter{padding-top:5px;}
.arrow-hilight{margin-top: -28px;    font-size: 16px;    margin-right: 0;}
#tab-news li {   font-size: 20px;}
#job{ padding-left: 2px; padding-right: 2px;}
.list-procurement ul li a{    padding: 2px;}
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td{padding:0 !important;}
#arrow-left,#arrow-right  {margin-top: 90%;}
.banner ul li{    padding: 4px 24px;}
#gallery ul li{margin-top: 7px;margin-bottom: 7px;}
.text-name {font-family: thaisanslite; font-size:27px; color:white; margin-top:10px; line-height: 27px;}
.text-name-eng{font-family: thaisanslite; font-size:16px; color:#185890; text-transform:uppercase; letter-spacing:3px;     line-height: 17px;    padding-top: 15px;}
.pull-right {float:left !important;}
.search-query {margin-left: 0px; margin-top: -17px;}
.flag{margin-right: 0px;}
#topmenuxx{font-size: 20px;background-image:none;}
#topmenuxx  ul{padding:0 !important; margin:0;}
#topmenuxx  ul li.active a{background-image:none; padding-bottom:0 !important;}
#topmenuxx  ul li{background-image:none;  margin-left: 0px; margin-right:0px; clear: both;}
#topmenuxx  ul li a{padding-bottom:0;}
#topmenuxx  ul li:hover {background-image:none;}
#bg-topmenu {height:auto;}
.mission {margin-top:-47px;}
.img-logo{  position: relative; display:block; margin: 0 auto; top: -46px;}
.btn-newsviewall a{top: -49px;font-size: 17px; }
}