@charset "utf-8";
/* CSS Document */
@font-face { font-family: 'quarkbold';src: url('quark-bold_2-webfont.eot');src: url('quark-bold_2-webfont.eot?#iefix') format('embedded-opentype'),
url('quark-bold_2-webfont.woff2') format('woff2'),url('quark-bold_2-webfont.woff') format('woff'), url('quark-bold_2-webfont.ttf') format('truetype');
font-weight: normal; font-style: normal;}

@font-face {font-family: 'quarklight';src: url('quark-light_2-webfont.eot');src: url('quark-light_2-webfont.eot?#iefix') format('embedded-opentype'),
 url('quark-light_2-webfont.woff2') format('woff2'), url('quark-light_2-webfont.woff') format('woff'),url('quark-light_2-webfont.ttf') format('truetype'); font-weight: normal;
font-style: normal;}

@font-face {font-family: 'THSarabunPSK';src: url('THSarabunPSK.eot') format('embedded-opentype');
  font-weight: normal;font-style: normal;}	
  
body{font-family: 'THSarabunPSK';font-size:90%; color:#1e5570;/* ��ҡѺ 14 */line-height:1.5;text-align:left; margin:0 auto;}
/*เนื้อหาข้อมูลทั้งหมด*/
.contenter{ width:80%; margin:0 auto; background:#bfdeb4;box-shadow:0 5px 10px 3px #888888; height: auto;clear:both; }
/*รูปbanner*/
#header img{width:100%; margin-bottom:-1%;}
/*content*/
#Content{background:url(../images/master/bg.png) repeat-y; float:left;width:72%; float:left;}
.main{background-color: #ffffff;border-radius: 10px;box-shadow: 2px 2px 5px #888888;
    padding: 3% 2%;position: relative;width:96%;height:300px; margin-bottom:1%; }
#mainContent{float:left;width:96%;
	-moz-border-radius:15px;-webkit-border-radius:10px;margin:0 2% 0 2%; }
.contenter #Content p{padding:0;}
/*เมนูด้านซ้าย*/
#nav{float:left;width:28%;background:#d5ebda url(../images/master/menu.png) no-repeat;height:2510px;}
#nav ul{ font-size:98%;list-style: outside none none;padding-top: -1%;width: 70%;}
#nav ul li{text-align:center; height:42px;line-height:1.2; width:90%;}
#nav a:link,#nav a:visited{color:#FFF;text-decoration:none;}
	#nav a:hover{color:#000;text-decoration:none;}
	
h1{line-height: 1;padding:0;border-bottom:3px solid; font-size:150%;font-family: 'quarklight';}
h2{line-height: 1;padding:0;border-bottom:1px groove; font-size:130%; color:#0000cc;font-family: 'quarklight';}
p a:hover{color:#C00; text-decoration:none;font-size:120%;}
p a:link{text-decoration:none;font-size:120%;}

.main #contentLeft{ float:left;width:30%; }
.main #contentLeft img{ width:150%; clear:both; border:1px solid #c5c5c5;padding:2px;}
.main #contentRight {float:right;width:53%; margin-left:1%;}
.linkfooter{ margin-top:10%;}
.linkfooter a:link{ margin-left:320px;    background-color: #8aba56;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #fff;
    padding:5px;
    text-align: center; text-decoration:none;}
.linkfooter a:hover{ margin-left:320px;    background-color: #f9913c;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #fff;
 padding:5px;
    text-align: center;}
/*เนื้อหาข้อมูลด้านขวา*/
/*ข้อมูล footer g*/
#footer img{width:100%; margin-bottom:-1%; clear:both;margin-top:-1% }
@media only screen and (min-width:300px) and (max-width:720px)
{
		
	.contenter{ width:98%; margin:0 auto; font-size:90%; }
	#header img{width:100%; margin-bottom:2%;}
	#Content{float:left;width:100%;}
	.main{background-color: #ffffff;border-radius: 10px;box-shadow: 2px 2px 5px #888888;
    padding: 3% 2%;position: relative;width:96%;height:400px; margin-bottom:1%;}
	#main ul{ margin-left:-4%;}
	#mainContent{float:left;width:96%;
	-moz-border-radius:15px;-webkit-border-radius:10px;margin:0 2% 0 2%; }
	#nav{border-radius: 10px;float:left;width:96%;background:#a5c053;box-shadow:0 5px 10px 3px #888888;height:350px;margin:2%;}
	#nav ul{ font-size: 100%; width:100%; margin-left:40px;color:#1e5570; }
	#nav ul li{ list-style:disc;text-align:left; height:35px;line-height:1;width:87%; margin-left:-10px;}
	#nav a:link,#nav a:visited{color:#114762;text-decoration:none;}
	#nav a:hover{color:#fff;text-decoration:none;}
	h1{line-height: 1;padding:0;border-bottom:1px solid; font-size:110%; width:90%;font-family: 'quarklight';}
	h2{line-height: 1;padding:0;border-bottom:1px solid; font-size:120%; color:#0000cc;font-family: 'quarklight';}
.main #contentLeft img{ display:none;}
.main #contentRight {float:left;width:93%; margin-left:1%;clear:both; font-size:13px; margin-top:-3%;}
.linkfooter{ margin-top:3%; margin-left:3%;}
.linkfooter a:link{ background-color: #8aba56; margin-left:220px; 
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #fff;
    padding:10px;
    text-align:center ; text-decoration:none;}
.linkfooter a:hover{ background-color: #f9913c;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #fff;
 padding:10px;
    text-align: center;}
}
@media only screen and (min-width:768px) and (max-width:1024px)
{
	body{ width:100%; margin:0 auto;}
	.contenter{ width:98%; margin:0 auto; font-size:90%; }
	#header img{width:100%; margin-bottom:2%;}
	#Content{float:left;width:100%;}
	#main{ float:left;width:93%; margin-bottom:3%;}
	#main ul{ margin-left:-4%;}
	#mainContent{float:left;width:100%; margin-top:2%;}
	#nav{border-radius: 10px;float:left;width:96%;background:#a5c053;box-shadow:0 5px 10px 3px #888888;height:350px;margin:2%;}
	#nav ul{ font-size: 100%; width:100%; margin-left:40px;color:#1e5570; }
	#nav ul li{ list-style:disc;text-align:left; height:35px;line-height:1;width:87%; margin-left:-10px;}
	#nav a:link,#nav a:visited{color:#114762;text-decoration:none;}
	#nav a:hover{color:#fff;text-decoration:none;}
	h1{line-height: 1;padding:0;border-bottom:1px solid; font-size:110%; width:90%;font-family: 'quarklight';}
	h2{line-height: 1;padding:0;border-bottom:1px solid; font-size:120%; color:#0000cc;font-family: 'quarklight';}
}