body{  background:white; font-size:19px; line-height:22px; font-family: 'CSChatThai'; color:black;}
p{font-size:19px; color:black; padding-bottom:10px;}

@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: '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: '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: 'PSLAyyara';
	src: url('../fonts/PSLAyyara.eot');
	src: local('☺'), url('../fonts/PSLAyyara.woff') format('woff'), url('../fonts/PSLAyyara.ttf') format('truetype'), url('../fonts/PSLAyyara.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'dbJariyathamXbd';
	src: url('../fonts/dbJariyathamXbd.eot');
	src: local('☺'), url('../fonts/dbJariyathamXbd.woff') format('woff'), url('../fonts/dbJariyathamXbd.ttf') format('truetype'), url('../fonts/dbJariyathamXbd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* remember to define focus styles! */
:focus {outline: none;}

#bg-top{ position: relative; margin: 0; padding:0; padding-top:15px;height:197px; background-image:url("../images/bg-top2.jpg"); background-repeat:no-repeat; background-position:top center; background-size:cover; position: relative;}
.logo{}
#wrap-head{position:relative;padding: 0;margin: 0 auto; }
#padding_name {padding:0;}
.name_th {font-family: 'dbJariyathamXbd';  font-size: 65px; color: #fcff19; text-shadow: 1px 1px 0 rgba(90,131,126,1); margin-top: 20px;}
.name_en {font-family: 'dbJariyathamXbd'; font-size:42px; color: #023e7a; margin-top:20px; letter-spacing:1px;}

.logo_moph{position: absolute; right:0; }
.www{font-family: tahoma; font-size:20px; color:white; margin-top:10px;}

.icon-social-top { margin-top:10px; float:left;}
.icon-social-top ul {padding:0;}
.icon-social-top ul li{list-style:none; display:inline-block;}

#wrap_topmenu{background-color:transparent; margin-top:10px;  float:right;}

/*TOPMENU*/
#topmenu {font-family: 'thaisanslite'; font-size:20px; color:black; font-weight:normal;  float:left;}
#topmenu  ul {  list-style: none; position: relative; display: inline-table; margin:0; padding:0;  }
	#topmenu  ul:after {content: ""; clear: both; display: block;	}
	 #topmenu  ul li { color:black;margin-left:2px;margin-right:2px;  padding:5px; font-size: 20px;}
		#topmenu  ul li:hover { color:black;  border-radius: 4px; display: block; }
			#topmenu  ul li:hover a {color:black;  border-radius: 4px;}
#topmenu  ul li:hover > ul {display: block;	}
#topmenu  ul li a {color:black; display: block; padding:4px 8px ;  text-decoration: none;}
#topmenu  ul li a.active { display: block; color:white; background-color:#285078;  border-radius: 4px;}

#topmenu ul ul {display: none; padding: 0;position: absolute; border-radius: 4px; color:black ;background-color: #74b4f6; z-index:2;  font-size: 19px; }
		#topmenu ul ul li {float: none; position: relative; display:block; text-align:left;   margin:4px; border-radius: 4px; min-width:200px; padding:0;}
				#topmenu ul ul li a {color:black;  }
				#topmenu ul ul li a:hover {color:white ;  background-color:#5d5d5d;}
	
	#topmenu ul ul ul {position: absolute; left: 100%; top:0; background-color: #F4CA28;  font-size: 19px;}
	 #topmenu ul ul ul li a{ display: block; }
	   #topmenu ul ul ul li.active {  display: block;}
		#topmenux ul ul ul li a:hover {color:white ;  background-color:#5d5d5d; }
			#topmenu ul ul li a.active-sup-topmenu{ color: black ;}



/*start search*/

.sb-search {position: absolute;	top: 25px;	right:87px;	width: 0%;	min-width: 30px;	height: 30px;	float: right;	overflow: hidden;	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;	transition: width 0.3s;	-webkit-backface-visibility: hidden;}
.sb-search-input {	position: absolute;	top: 0;	right: 0px;	border: none;	outline: none;	background: #ddb61c;	width: 15%;	height: 30px;	margin: 0;
	z-index: 10;	padding: 5px 20px;	font-family: 'Open Sans', sans-serif;	font-size: 13px;	color: #ffffff;}
.sb-search-input::-webkit-input-placeholder {	color: #ffffff;}
.sb-search-input:-moz-placeholder {	color: #ffffff;}
.sb-search-input::-moz-placeholder {	color: #efb480;}
.sb-search-input:-ms-input-placeholder {	color: #ffffff;}
.sb-icon-search,.sb-search-submit  {	width:30px;	height:30px;	display: block;	position: absolute;	right: 0;	top: 0;	padding: 0;	margin: 0;	line-height: 45px;
	text-align: center;	cursor: pointer;}
.sb-search-submit {
	background: #fff; /* IE needs this */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;	color: transparent;	border: none;	outline: none;	z-index: -1;	-webkit-appearance: none;}
.sb-icon-search {	color: #fff;	background:url('../images/icon-search.png') no-repeat; background-position: center;	z-index: 90;}
/* Open state */
.sb-search.sb-search-open,.no-js .sb-search {	width: 100%;}
.sb-search.sb-search-open .sb-icon-search,.no-js .sb-search .sb-icon-search {	background: url('../images/icon-search.png') no-repeat; background-position: center;	
	color: #fff;	z-index: 11;}
.sb-search.sb-search-open .sb-search-submit,.no-js .sb-search .sb-search-submit {	z-index: 90;}
.label-search{display:none;}


/* Hilight*/
#row_hilight { background-image:url('../images/bg_slide.jpg') ; background-size:100% 100%; padding: 0px; border-top:1px solid white;  border-bottom:2px solid #02a4f0; padding-bottom: 15px; margin-bottom: 15px;}
#row-slide{position:relative;}
#margin-right-hilight{padding-right:0; float:right;}
.intro_hilight{font-family: 'CSChatThai'; font-size:22px;margin-bottom:-10px; }
.readmore_hilight{font-family: tahoma; font-size:14px; color:#919090; text-decoration:underline; margin-top:10px; }
.readmore_hilight a{color:#919090; }
.title01{	font-family: 'supermarket'; font-size:26px; padding-top:10px;  padding-bottom:10px;  line-height:30px; }


.arrow-hilight{right:0px; bottom: -15px; z-index:1; position:absolute; }

.listnews_slide{ margin-top:10px;}

/* Slide*/
	#run {  line-height: 25px; position:absolute; left: 18px; }
		#run ol{padding:0; margin:0; list-style:none;}
		#run ol li{padding:2; margin:0; list-style:none;display:inline-block; zoom: 1; *display: inline; font-size:13px; font-weight:bold;}
		#run ol li a{color:white; padding:0; margin:0; list-style:none; display:inline-block; zoom: 1; *display: inline; float:left; text-decoration:none;
		width:10px;  height:10px;  -moz-border-radius: 50%;   -webkit-border-radius: 50%;   border-radius: 50%;   background: #babab9;  }
		#run ol li a:hover{ padding:0; margin:0; list-style:none; display:inline-block; zoom: 1; *display: inline; float:left;  text-decoration:none;
		width:10px;  height:10px;  -moz-border-radius: 50%;   -webkit-border-radius: 50%;   border-radius: 50%;   background-color:#2488ed; }
		#run ol li a.active{padding:0; margin:0; list-style:none; display:inline-block;width:10px;  height:10px;  -moz-border-radius: 50%;   -webkit-border-radius: 50%;   border-radius: 50%;   background:#2488ed;}
		.run-all a{color:#b8b5a6; font-size:12px; font-weight:bold; text-align:center; padding-left:10px;}
		.run-all:hover{text-decoration:underline;}



/* NEWS*/
.title02{	font-family: 'supermarket'; font-size:28px; float:left; padding-top:7px; margin-bottom: 40px;}
.btn-viewall{font-family: 'CSChatThai'; font-size:18px; background:#3dbefd; display:block; float:right; padding-left:10px;padding-right:10px; padding-top:5px;padding-bottom:3px; border:0;}
.btn-viewall:hover{background:#57c7fe;}
.title-news2{text-align:center; font-family: 'supermarket'; font-size:20px;}
.title-news2 a{color:black;}
.title-news2 a:hover{color:#4e26fd; text-decoration:none;}
.btn-viewall2{font-family: 'CSChatThai'; font-size:18px; background:#3dbefd; display:block; float:right; padding-left:10px;padding-right:10px; padding-top:5px;padding-bottom:3px; border:0; margin-top: -35px;}
.btn-viewall2:hover{background:#57c7fe;}

.p-news{text-align:center; height:110px; overflow:hidden;}
#box-news{border:1px solid #dfdfdf; width: 32%;}
#box-news:hover{border:2px solid #02a4f0; }


#box-news2{border:1px solid #dfdfdf; width: 32%; margin-left:20px; margin-right:20px;}
#box-news2:hover{border:2px solid #02a4f0; }

.date-news{text-align:center; background-image:url("../images/bg-date.jpg"); background-repeat:no-repeat; background-position:center top; padding:10px; color:#b2b2b2; margin-top:-20px;}

.imgteaser:hover .desc { display: block; background-color:#f6cf31; filter:alpha(opacity=80);opacity:.8;  width:89%; height:56%;top:20px; left:20px; 
	font-size: 14px;  color:white; font-family:tahoma;	position: absolute;  text-align:center;	vertical-align:center; }
.desc {	display: none; vertical-align:middle; font-weight:bold; padding-top:30%;  background-color:#f6cf31; filter:alpha(opacity=80);opacity:.8; }


/* MEWS IMAGES HOVER*/
.containerfade { position: relative;}
.containerfade a{color:black; text-decoration:none;}
.imagefade {  display: block;  width: 100%;  height: auto;}
.overlayfade {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  opacity: 0;  transition: .5s ease;   background-image:url("../images/bg-yellow.png");}
.containerfade:hover .overlayfade {  opacity: 1;}
.textfade {  color: white;  font-size: 23px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}
.textfade a {  color: white; text-decoration:none; font-size: 23px; }




/* JR*/
.title-jr{	font-family: 'supermarket'; font-size:28px; float:left; padding-top:7px; background:#459af0; padding-left:30px;padding-right:30px; padding-bottom:13px;}

#bg-jr {background-image:url("../images/bg-jr.jpg"); background-repeat:no-repeat;  background-size:100%; background-color:#2488ed; }

.list-jr ul {padding:0; margin:0;text-align:center;}
.list-jr ul li{ padding:1px; list-style:none; display:inline-block; margin:17px;}
.list-jr ul li:hover {-webkit-box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.73);
box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.73);}

.list-jr ul li img{width:auto !important; min-width:auto !important;}
#a-jr img{float:right;}

/*News EX*/
.title03 {font-family: 'supermarket'; font-size:28px; padding-top:7px; text-align:center; background-image:url("../images/bg-title-ex.jpg"); background-repeat:no-repeat; background-position:center; padding-bottom:11px;}
#box-ex {border:1px solid #e4e4e4; padding:0;  padding-bottom:0; margin: 13px; position:relative;}
.title-news-ex a{font-family: 'supermarket'; font-size:22px; color:black; text-align:center; }
.intro-ex {background-color:#3bbdfb;  height:100px; overflow:hidden; display:block; font-size:22px; text-align:center; padding:13px;}
.intro-ex a { color:black; text-decoration:none;}
.intro-ex:hover { background-color:#5bc7fb;  }
.triangle-yellow{background-image:url("../images/triangle-yellow.png"); background-repeat:no-repeat; position:absolute; bottom:94px; right:20px; width:37px; height:19px; z-index:1;}
.triangle-yellow:hover{background-image:url("../images/triangle-yellow_hot.png");}


/*VDO*/
#bg-vdo{background-image:url("../images/bg-vdo.jpg"); background-repeat:no-repeat; padding-top:50px;padding-bottom:50px; margin:0 auto; background-position:center; }
.titie-vdo{padding:10px; padding-bottom:25px;margin-bottom:10px;font-size:35px; color:#8f7e3d; background-image: url(../images/leaf.png); background-repeat: no-repeat ; text-align:center; background-position:center bottom;}
#vdo ul{padding:0; margin:0 auto; text-align: center; width:100%; height:220px;}


/*FOOTER*/
#bg-footer{background-image:url("../images/bg-footer.jpg"); background-repeat:no-repeat; background-size:100%;}
.title-footer{font-family: 'CSChatThai'; font-size:23px;}
.address {color:white;line-height:30px;}
#organ img {margin:8px; border:2px solid #9bc25f; border-radius:3px;}
#organ img:hover {filter:alpha(opacity=96);opacity:.96;}
.mail{color:white; font-family: AurulentSans-Regular; font-size:13px;}
.mail:hover{color:white; text-decoration:underline;}
#copyright{background-color:#215706; margin:0;  color:#c4f873;font-size:11px; padding-left:35px; font-family: AurulentSans-Regular;}
#copyright a{color:#c4f873;}
.number{line-height:30px; font-family: AurulentSans-Regular; font-size:13px;}
.copyright{background-color:#000000; color:white; font-size:12px;font-family:tahoma; text-align:center; padding:20px;}

.visitor{ color:black; font-size:22px; text-decoration:underline;}
.counter{color:black;margin-top:10px;}
.counter a{color:#caf3fb; font-size:18px; }

/*PAGE*/
#row_top { background-color:#d5eef5;  margin-top: 26px; padding: 0px; text-align:right; padding:0; margin:0;}
.breadcrumb_{text-align:right;}
.title-page{	font-family: 'supermarket'; font-size:28px; padding-top:7px; padding-bottom:30px; padding-left:20px;}
.news-intro{height:65px; overflow:hidden;}
.date{font-size:16px; color:#908e8e;}
.title-news{font-size:20px; }
.img-news{width: 180px; height:114px; min-width: 0 !important;  float: left; border:1px solid #d4d4d4; padding:4px; border-radius:2px; -webkit-border-radius: 2px; background-color: white; }
.title-news-ex2{font-size:22px; padding:5px;line-height:22px; padding-top:10px; padding-bottom:0px;}
.ex2{ padding:5px; line-height:19px;}
#box-ex2 {width:33%;}
.title-map{font-size:24px; color:blue; margin-bottom:20px;}




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

@media screen and (min-width: 0px) and (max-width: 1300px) {

}

@media screen and (min-width: 1301px) and (max-width: 1400px) {

}
@media screen and (min-width: 991px) and (max-width: 1300px) {

#box-news{ margin-top:0px;  margin-bottom:20px;}
#box-news2{ margin-top:0px;  margin-bottom:20px; margin-left:13px; margin-right:13px;}
.sb-search {  right: 40px;}
	.title-news{ margin-left:50px;  }
	.news-intro{ margin-left:50px;}
	.news-intro a{color:#333;}
	.news-intro a:hover{color:#337ab7; text-decoration:none;}
.date{margin-left:50px;}
#box-ex {width:30.5%;}
}

@media screen and (min-width: 763px) and (max-width: 990px) {
.logo_moph{width:65px;}
.name_th { font-size: 58px;}
.name_en { font-size: 42px;}
#wrap_topmenu {   left: 70px;  position: absolute;    z-index: 1;}
.arrow-hilight{ bottom: 0px;  }
#box-news{ margin-top:0px;  margin-bottom:20px;}
#box-news2{ margin-top:0px;  margin-bottom:20px; margin-left:13px; margin-right:13px;}
#bg-jr {background-color:#2488ed; }
.title-jr{	 padding-bottom:14px;}
#bg-top{  background-color:#2488ed; height: 216px;} 
#bg-vdo iframe{ padding-bottom:10px;}
#run{bottom: -24px;}
.title01{padding-top:0px; }
#box-ex {width:29%;}
.navbar-toggle{border-color:white;}
.navbar-default .navbar-nav>li>a {   color: white;}

#blog-news {clear:both; position: relative;}
	#blog-news img {float:left; margin-top:30px; margin-bottom:10px; margin-right:15px;}
		.clearfix-news1 {clear:both; margin-top:0px; line-height:0;}
		.title-news{ margin-top:30px; }
#margin-right-hilight{margin-top: 20px;}

}

@media screen and (min-width: 991px) and (max-width: 1199px) {
#topmenu{ padding-top: 0; }
#wrap_topmenu {      left: 70px;  position: absolute;    z-index: 1;}
}

@media screen and (min-width: 450px) and (max-width: 762px) {
.logo_moph {    width: 60px;    margin-top: -108px;    margin-right: 10px;}
.name_th { font-size: 50px;}
.name_en { font-size: 37px;}
#wrap_topmenu {  top:70px;    position: absolute; width: 100%;     z-index: 1;}
.icon-social-top{margin-left: 112px;}
.www{margin-left: 112px;}
.sb-search {right:16px;	top:45px;}
.sb-search-input {	width: 100%;}
.arrow-hilight{ bottom: 0px;  }
#box-news{ margin-top:0px;  margin-bottom:20px;}
#box-news2{ margin-top:0px;  margin-bottom:20px; margin-left:10px; margin-right:10px;}
#bg-jr {background-color:#2488ed; }
.title-jr{	 padding-bottom:14px;}
#bg-top{  background-color:#2488ed; height: auto;} 
#bg-vdo iframe{ padding-bottom:10px;}
#run{bottom: -24px;}
#bg-vdo {height:auto;}
#topmenu{width:95%; margin: 0 auto; background-color:rgba(0,0,0,0.7);  color:white;}

.navbar-toggle{border-color:white;}
.navbar-default .navbar-nav>li>a {   color: white;}
#topmenu ul ul { color:white ;background-color: #5d5d5d;  }
#topmenu ul ul li a{ padding-left:4px; }
#topmenu ul ul li {margin-left:4px; padding:0;}
#topmenu  ul li {color:white; }
#topmenu  ul li a {color:white !important; }
#topmenu  ul li:hover  {color:black; text-decoration:underline; }
#box-ex2 {width:100%;}

	.clearfix-news1 {clear:both; margin-top:0px; line-height:0;}

}
@media screen and (min-width: 600px) and (max-width: 762px) {
#box-ex {width:29%; margin:10px;}
}
@media screen and (min-width: 450px) and (max-width: 600px) {
#box-news{width:100%;}
#box-news2{width:100%;}

}

@media screen and (min-width: 628px) and (max-width: 667px) {
.name_th { font-size: 40px;}
.name_en { font-size: 30px; margin-left:102px;    margin-top: 9px;}
.www {    margin-left: 102px;margin-top: 5px;}
.icon-social-top{margin-left: 102px;}
.logo_moph { width: 53px; margin-top: -96px;}
#logo_pmaf{width:80px;}
}
@media screen and (min-width: 510px) and (max-width: 627px) {
.name_th {  margin-left: 102px;font-size: 35px;}
.name_en { font-size: 25px; margin-left:102px;    margin-top: 9px;}
.www {    margin-left: 102px;margin-top: 5px;}
.icon-social-top{margin-left: 102px;}
.logo_moph { width: 53px; margin-top: -96px;}
#logo_pmaf{width:80px;}
}
@media screen and (min-width: 450px) and (max-width: 509px) {
.name_th {  margin-left: 102px;font-size: 30px;}
.name_en { font-size: 20px; margin-left:102px;    margin-top: 2px;}
.www {    margin-left: 102px;margin-top: 2px;}
.icon-social-top{margin-left: 102px;}
.logo_moph { width: 53px; margin-top: -96px;}
#logo_pmaf{width:80px;}
}
@media screen and (min-width: 0px) and (max-width: 450px) {
.sb-search {right:16px;	top:45px;}
.sb-search-input {	width: 100%;}
.arrow-hilight{ bottom: 0px;  }
#box-news{width: 100%; margin-top:20px; margin-bottom:20px;}
#box-news2{width: 100%; margin-top:20px; margin-bottom:20px; margin-left:0; margin-right:0;}
#bg-jr {background-color:#2488ed; }
.title-jr{	 padding-bottom:14px;}
#bg-top{  background-color:#2488ed; padding-top:0;  height: auto;} 
#bg-vdo iframe{ padding-bottom:10px;}
#run{bottom: -24px;}
#topmenu{width:95%; margin: 0 auto;background-color:black; filter:alpha(opacity=60);opacity:.6; color:white;}
.title01{padding-top:0px;}
.navbar-toggle{border-color:white;}
.navbar-default .navbar-nav>li>a {   color: white;}
#topmenu ul ul { color:white ;background-color: #5d5d5d;  }
#topmenu ul ul li a{ padding-left:4px; }
#topmenu ul ul li {margin-left:4px; padding:0;}
#topmenu  ul li {color:white; }
#topmenu  ul li a {color:white !important; }
#topmenu  ul li:hover  {color:black; text-decoration:underline; }
#box-ex2 {width:100%;}
#blog-news {clear:both; margin-top: 10px; margin-bottom: 10px; position: relative;}
	.clearfix-news1 {clear:both; margin-top:0px; line-height:0;}
.date{margin-left:0px;}

.name_th {  margin-left: 102px;font-size: 30px; line-height:30px;}
.name_en { font-size: 20px; margin-left:102px;    margin-top: 2px;}
.www { font-size: 14px;   margin-left: 102px;margin-top: 2px;}
.icon-social-top{margin-left: 102px;}
.logo_moph { width: 53px; margin-top: -50px; left:33px;}
#logo_pmaf{width:80px;}


}


@media screen and (min-width: 394px) and (max-width: 450px) {
.logo_moph { margin-top: -18px;}
}