@charset "utf-8";
@import url("fonts/thsarabunnew.css");
@-ms-viewport{
	width: device-width;
}






body,td,th,p { 
	font-family: tahoma, arial, sans-serif;
	font-size: 14px;
	line-height: 140%;
	color:#666666;
	text-decoration:none;
} 



h1, h2, h3, h4, h5 {
	font-family: 'THSarabunNew', tahoma, sans-serif;
	text-decoration:none;
	padding:0px;
	margin:0px;
	margin-bottom:10px;
	line-height:130%;
}

h1 { font-size:32px; color:#17468c;}
h2 { font-size:28px; color:#f26522;}
h3 { font-size:24px; color:#f26522;}
h4 { font-size:18px; color:#f26522;}
h5 { font-size:16px; color:#f26522;}


#header {
	font-family: 'THSarabunNew', tahoma, sans-serif;
	text-decoration:none;
}

a {
	text-decoration: none;
	color:#0099FF;
}

a:link {
	text-decoration: none;
	color:#0099FF;
}
a:visited {
	text-decoration: none;
	color:#0099FF;
}
a:hover {
	text-decoration: underline;
	color:#0099FF;
}
a:active {
	text-decoration: none;
	color:#0099FF;
}



.newsimg{
	height:220px;	
}

.circle-rightmenu {
	display:block; 
	font-family: 'THSarabunNew', tahoma, sans-serif;
	font-weight:bold;
	font-size:16px;
	text-align:center; 
	width:90%; 
	max-width: 300px;
	border-radius:5px;
	margin-bottom:15px; 
	background:#0b7081; 
	text-decoration:none; 
	border-left:1px solid #000; border-right:1px solid #000;
	height:25px;
	padding-top:7px; padding-bottom:2px;
	margin-left:auto;
	margin-right:auto;
	/*vertical-align:middle;*/
}


.circle-rightmenu:link {
	color:#FFF;
}
.circle-rightmenu:visited {
	color:#FFF;
}
.circle-rightmenu:hover {
	color:#000000; background:#cccccc; text-decoration:none;
}

.circle-small {
	display:inline-block; text-align:center; 
	vertical-align:middle; 
	border-radius:10px; 
	background:#CC99CC; 
	color:#FFFFFF; font-size:9px; 
	height:10px; width:10px;
	padding:5px
}

.shadow {
	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;
	box-shadow: 0 0 15px #666;
}

.socialicon {
	padding:5px;
	text-align:center;
	margin-left:0px;
	margin-right:5px;
	margin-top:5px;
	margin-bottom:5px;
}


.circletxt {
    display: block;
    height: 30px;
    width: 30px;
    line-height: 30px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
    border-radius: 15px; 
    background-color: #000000;
    color: white;
    text-align: center;
}

.circlelink {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
    border-radius: 15px; 
    background-color: #eee;
    color: white;
    text-align: center;
	margin:10px;
}

.circlelink:hover {
    background-color: #ccc;
}


.showmobile {
	display: block;	
}

.showmobileinline {
	display: inline;	
}


.hidemobile {
	display: none;
}


.gridHeadContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96.6666%;
	padding-left: 1.6666%;
	padding-right: 1.6666%;
}

.gridPresentContainer {
	margin-right: auto;
	width: 96.6666%;
	padding-left: 1.6666%;
	padding-right: 1.6666%;
}



#headertop {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top:5px;
	padding-bottom:5px;
	font-size:10px;
	z-index:9998;

}

#header {
	z-index:9997;
}

#headerbg{
	 background-color:#a37911;
}

.header-nav-show {
	position:fixed;
	display:block;
	width: 100%;
	left: 0;
	top: 0;
	z-index:9997;
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;
	-moz-box-shadow: 0 -15px #FFF, 0px 0px 10px #666;
	-webkit-box-shadow: 0 -15px #FFF, 0px 0px 10px #666;
	box-shadow: 0 -15px #FFF, 0px 0px 20px #666;
	
}

.headerspace-nav-show {
	height:50px;
}



.imgpresent {
	position:relative; display:block; width:100%; height:120px; background:#666666; color:#ffffff
}



.list1 { 

list-style:outside;
margin-bottom:15px;
		
}








.vdoclipsize {
	z-index:1;
}







.f-navmain-hide{  /* To fix main menu container */
	display:none;
}

.f-navmain-show{  /* To fix main menu container */
	z-index: 9999;
	position: fixed;
	display:block;
	left: 0px;
	padding-top:10px;
	padding-bottom:10px;
	bottom: 0px;
	width: 100%;
	color:#fff;
	
}





/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
		.gridHeadContainer {
			width: 97.7777%;
			padding-left: 1.1111%;
			padding-right: 1.1111%;
		}

		/*.gridPresentContainer {
			width: 97.7777%;
			padding-left: 1.1111%;
			padding-right: 1.1111%;
		}*/

		#header {
			/*margin-left: auto;
			margin-right: auto;*/
			width: 100%;
		}

		#headerbg{
			background-color:#a37911;
		}

		.header-nav-show {
			position:absolute;
		}

		.imgpresent {
			position:relative; display:block; width:100%; height:150px; background:#333333; color:#ffffff; 
		}

		/*.imgpresentbox{
			
		}*/

		.detailspace{
			padding-right:0px
		}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

	body{
		background-color:#ffffff;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;	
	}

	.showmobile {
		display: none;	
	}

	.showmobileinline {
		display: none;	
	}

	.hidemobile {
		display: block;
	}

	.gridMain {
		width: 100%;
		max-width: 1210px;
		margin: auto;
	}


	.gridHeadContainer {
		width: 95%;
		max-width: 1210px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}

	.gridPresentContainer {
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
		margin: auto;
	}

	#header {
		width: 100%;
	}

	#headerbg{
		background-color:rgba(0,50,90,0.7);
		background-color:#a37911;
		max-width:10020px;
		margin-left:auto; 
		margin-right:auto;
	}

	.header-nav-show {
		position:fixed;
		padding-top:0px;
		padding-bottom:0px;

	}

	.headerspace-nav-show {
		height:50px;
	}

	.imgpresent {
		position:absolute; display:block; bottom:0%; width:100%; height:105px; color:#333333; 
		font-size:14px;
		margin:auto;
		
	}

	#boxpresent h3 {
		color:#263988;
		font-size:26px;
	}


	.imgpresentbox{
		max-height:500px;
	}

	.detailspace{
		padding-right:20px
	}


}




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


	.gridMain {
		width: 100%;
		max-width: 1100px;
		margin: auto;
	}

	.gridContainer {
		width: 85%;
		max-width: 1100px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}
		
	.gridHeadContainer {
		width: 85%;
		max-width: 1100px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}

	.gridPresentContainer {
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
		margin: auto;
	}

		
	#headerspace{
		height: 0px;
	}

	body,p,td {
		font-size:13px;
	}

	h1{	font-size: 2em;}
	h2{	font-size: 1.8em;}
	h3{	font-size: 1.6em;}
	h4{	font-size: 1.4em;}
	h5{	font-size: 1.2em;}

		
		
}




@media only screen and (min-width: 1441px) {

	body{
		background-color:#ffffff;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;	
	}

	.newsimg{
		height:300px;	
	}

	.showmobile {
		display: none;	
	}

	.showmobileinline {
		display: none;	
	}

	.hidemobile {
		display: block;
	}

	.gridMain {
		width: 90%;
		max-width: 1550px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:50px;
		margin-top:20px;
		-moz-box-shadow: 0 15px #FFF, 0px 0px 10px #666;
		-webkit-box-shadow: 0 15px #FFF, 0px 0px 10px #666;
		box-shadow: 0 15px #FFF, 0px 0px 10px #666;

	}


	.gridContainer {
		width: 90%;
		max-width: 1550px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}


	.gridHeadContainer {
		width: 90%;
		max-width: 1550px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}

	.gridPresentContainer {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		margin: auto;
	}

	.gridContainer {
		width: 90%;
		max-width: 1550px;
		padding-left: 0.75%;
		padding-right: 0.75%;
		margin: auto;
	}

	#header {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	#headerbg{
		background-color:rgba(0,50,90,0.7);
		background-color:#a37911;
		max-width:10200px;
	}

	.header-nav-show {
		position:fixed;
	}

	.headerspace-nav-show {
		height:50px;
	}


	/*.imgpresent {
		position:absolute; display:block; bottom:10%; right:3%; width:auto; height:auto; color:#ffffff; */
		/*-moz-box-shadow: 0 0 15px #fff;
		-webkit-box-shadow: 0 0 15px #fff;
		box-shadow: 0 0 15px #fff;
	}*/

	.imgpresentbox{
		max-height:900px;
	}


	.detailspace{
		padding-right:20px
	}


}



@media only screen and (max-width: 1366px ) and (min-width: 1281px){
	.imgpresentbox{
		max-height:440px;
	}
}



@media only screen and (max-width: 1024px ) and (min-width: 801px){

	body,th,td,p {
		font-size:13px;
	}
	h1,h2,h3,h4,h5{
		font-family:'THSarabunNew',Tahoma, Geneva, sans-serif;
	}

	h1 { font-size:30px}
	h2 { font-size:26px}
	h3 { font-size:20px}
	h4 { font-size:18px}
	h5 { font-size:16px}

	/*.imgpresentbox{

	}*/


}

@media only screen and (max-width: 800px ) and (min-width: 600px){

	body,th,td,p {
		font-size:12px;
	}
	h1,h2,h3,h4,h5{
		font-family:'THSarabunNew',Tahoma, Geneva, sans-serif;
	}

	h1 { font-size:24px}
	h2 { font-size:20px}
	h3 { font-size:18px}
	h4 { font-size:16px}
	h5 { font-size:14px}


}


@media only screen and (max-width: 600px ) and (min-width: 1px){

	body,th,td,p {
		font-size:13px;
	}
	h1,h2,h3,h4,h5{
		font-family:'THSarabunNew',Tahoma, Geneva, sans-serif;
	}

	h1 { font-size:24px}
	h2 { font-size:20px}
	h3 { font-size:18px}
	h4 { font-size:16px}
	h5 { font-size:14px}


}








@media only screen and (min-width:100px) and (max-width: 480px) {
	.vdoclipsize {
		width:100%;
		height:200px;
		max-height:200px;
	}
}

@media only screen and (min-width:481px) and  (max-width: 600px) {
	.vdoclipsize {
		width:100%;
		height:300px;	
		max-height:300px;
	}
}

@media only screen and (min-width:601px) and  (max-width: 800px) {
	.vdoclipsize {
		width:100%;
		height:350px;	
		max-height:350px;
	}
}

@media only screen and (min-width:801px) and  (max-width: 1024px) {
	.vdoclipsize {
		width:100%;
		height:400px;	
		max-height:400px;
	}
}

@media only screen and (min-width: 1025px) and  (max-width:2000px)  {
	.vdoclipsize {
		width:100%;
		height:480px;	
		max-height:480px;
	}
}













.detailspace > table {
	border:1px solid #cccccc;
	width:100%;
	margin-bottom:20px;
	margin-top:20px;
	
}
.detailspace > table > tbody > tr > td {
	border:1px solid #cccccc;
	padding:5px;
	
}
.detailspace > table > tr > td {
	border:1px solid #cccccc;
	padding:5px;
	
}




#logopartnerbox img{
	max-width:100px;
	padding:5px;
}