@import url(fonts/thsarabunnew.css);
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans); */

/*@import url(fonts/typicons.min.css);*/
/*@import url(http://fonts.googleapis.com/css?family=Exo+2); -- English Only --*/

@charset "utf-8";

@-ms-viewport{
	width: device-width;
}



/*@import url(http://fonts.googleapis.com/css?family=Exo+2); /* -- English Only --
@import url(http://fonts.googleapis.com/css?family=Open+Sans); /* -- English Only --
*/

body,td,th,p { 
	/*font-family: 'Open Sans', tahoma, sans-serif;*/
	font-family: tahoma, sans-serif;
	font-size: 13px;
	/*line-height:20px;*/
	color:#666666;
	text-decoration:none;
} 


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

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

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

a {
	text-decoration: none;
	/*color: #3366CC;*/
	color:#0099FF;
}

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


.circle-rightmenu {
	display:block; text-align:center; font-size:15px; color:#ffffff; width:100%; padding-top:5px; padding-bottom:5px; border-radius:5px;margin-bottom:12px; background:#eeeeee; text-decoration:none; border-left:1px solid #ccc; border-right:1px solid #ccc;
}
.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; /* or 50% */
    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; /* or 50% */
    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-left: auto;
	margin-right: auto;
	width: 96.6666%;
	padding-left: 1.6666%;
	padding-right: 1.6666%;
}

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

}

#header {
	/*margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	width: 100%;*/
	/*background-color:#ffffff;*/
	/*#003399*/
	/*padding-top:0px;
	padding-bottom:0px;*/
	z-index:9997;
}

#headerbg{
	 background-color:#00325A;
}

.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:100px; background:#333333; 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%;
	/*background:#000;
	background:rgba(0,0,0,0.7);*/
	color:#fff;
	
}


#boxselectpic{ max-height:200px;}

@media only screen and (min-width:769px) {
#boxselectpic{ max-height:450px;}	
}

@media only screen and (min-width:1400px) {
#boxselectpic{ max-height:600px;}	
}



/* 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:#00325A;
}

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

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


.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:#003399;
	background-image: url(../grad/seap/img_backgroundhd/01.jpg);
	background-repeat: no-repeat;
	background-position:top;
	background-size:contain;
	background-attachment:fixed;*/
	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: 1400px;
	margin: auto;
}


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

.gridPresentContainer {
	width: 96%;
	max-width: 1050px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}

#header {
	/*position:fixed;
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;*/
	width: 100%;
}

#headerbg{
	 background-color:rgba(0,50,90,0.7);
	 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:5%; right:0.5%; width:auto; height:auto; color:#ffffff;
	/*-moz-box-shadow: 0 0 10px #fff;
	-webkit-box-shadow: 0 0 10px #fff;
	box-shadow: 0 0 10px #fff;*/
	
}


.detailspace{
	padding-right:20px
}


}


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

body{
	/*background-color:#003399;
	background-image: url(../grad/seap/img_backgroundhd/01.jpg);
	background-repeat: no-repeat;
	background-position:top;
	background-size:contain;
	background-attachment:fixed;*/
	background-color:#ffffff;/*background-color:#f5f5f5;*/
	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: 1050px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:50px;
	margin-top:20px;
	/*background:#ffffff;*/
	-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: 96%;
	max-width: 1000px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}
*/

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

.gridPresentContainer {
	width: 96%;
	max-width: 1200px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}
/*
.gridContainer {
	width: 96%;
	max-width: 1200px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}
*/
#header {
	/*position:fixed;
	margin-top:0px;*/
	margin-left: auto;
	margin-right: auto;
	/*padding-top:20px;
	padding-bottom:10px;*/
	width: 100%;
	/*max-width:1100px;*/
	/*
	-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;*/
}

#headerbg{
	 background-color:rgba(0,50,90,0.7);
	 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;*/
}

.detailspace{
	padding-right:20px
}


}


@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;
	/*font-family:Tahoma, Geneva, sans-serif;*/
}

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


}

@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;
	/*font-family: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;
	/*font-family: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;
	
}