@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Kanit:400,500,600,700&display=swap&subset=thai');

/*
@media only screen and (max-width: 798px) {
	body {

	}
	.nav-container {
		max-width: 980px;
		margin: 0 auto;
	}
}*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
audio:not([controls]) {
	display: none;
}
[hidden] {
	display: none;
}
ul, ol {
	margin: 1em 0;
	padding: 0 0 0 40px;
}
dd {
	margin: 0 0 0 40px;
}
nav ul, nav ol {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin:0;
	padding:0
}
table {
	border-spacing: 0;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow: -moz-scrollbars-vertical; overflow-y: scroll;
}
html, button, input, select, textarea {
	font-family: "Kanit", Arial, Thonburi !important;
	/*font-family: "Tahoma", Arial, Thonburi;*/
	color: #d3d3d3;
}
body {
	margin: 0 auto;
	padding:0;
	/*font-size: 12px;*/
	font-size: 1em;
	/*background: url("../images/shared/bg-h.jpg") repeat-x scroll 0 0 #2F2F2F;*/
	/*background-color: #B66611;*/
	/*background-color: #e9ebee;*/
	background-color: #fff;
	/*width:100% !important;*/
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}
/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir {
	display: block;
	border: 0;
	text-indent: -999em;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: left;
	direction: ltr;
	*line-height: 0;
}
.ir br {
	display: none;
}
.hidden {
	display: none !important;
	visibility: hidden;
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear:both; }

/*br.clear { display: block; line-height: 0px; font-size: 0px; height: 0px; clear:both; }*/

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: black !important;
		box-shadow:none !important;
		text-shadow: none !important;
		filter:none !important;
		-ms-filter: none !important;
	} /* Black prints faster: h5bp.com/s */
	a, a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}  /* Don't show links for images, or javascript/internal links */
	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	} /* h5bp.com/t */
	tr, img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	h2, h3 {
		page-break-after: avoid;
	}
}

/* ===== Primary Styles ========================================================*/
/*#container { position:relative; width:1000px; margin:0 auto; background:url('../images/shared/pattern.jpg'); }*/
/*#container { position:relative; width:1000px; margin:0 auto; background:url('../images/shared/pattern.png'); }*/

#container { position:relative; width:960px; margin:0 auto; background-color:#fff; }

/* ===== Top Nav ========================================================*/
#topnav { height:162px; background:url('../images/shared/bg-topnav.png') no-repeat; }
#topnav h1 { position: absolute; float:left; top: 44px; left: 40px; padding:0; margin:0; }
#topnav h1 a { float:left; width:203px; height:109px; background:url('../images/shared/logo.png') no-repeat; text-indent:-9999px; }

#login, #profile { float:left; list-style-type:none; width: 224px; height: 35px; margin: 0 0 0 5px; padding: 0 45px 0 25px;}
#login li, #profile li { float:left; padding:0; margin:0; }
#login li a, #profile li a { display: block;  height:35px; background: none no-repeat center center; text-indent:-9999px; }

#login li:first-child, #profile li:first-child { width: 105px; }
#login li:nth-child(2), #profile li:nth-child(2) { width: 14px; height:35px; background:url('../images/shared/v-topnav.gif') no-repeat center center; }
#login li:last-child, #profile li:last-child { width: 105px; }

#login > li:first-child > a { width: 60px; background-image:url('../images/th/shared/imgtxt-login.png'); margin: 0px 0px 0px auto; }
#login > li:last-child > a { width: 110px; background-image:url('../images/th/shared/imgtxt-register-arrow.png'); margin: 0px auto 0px 0px; }

#profile li:first-child a { width: 71px; background-image:url('../images/th/shared/imgtxt-logout.png'); margin: 0px 0px 0px auto; }
#profile li:last-child a { width: 84px; background-image:url('../images/th/shared/imgtxt-profile.png'); margin: 0px auto 0px 0px; }

/* ===== Hover ========================================================*/
#login div {
	display: none;
	z-index:40;
}
#login li.mega div {
	left:122px;
	top:0;
	position: absolute;
}
#login li.mega.hovering div{
	display: block;
}
#login-menu-sub {
	width: 210px;
	margin:0;
	padding:0;
	list-style: none;
	clear:both;
}
#login-menu-sub li {
	margin:0;
	padding:0;
}
#login-menu-sub li a {
	text-indent:inherit;
}
#login-menu-sub li a img{
	float:left;
	margin:6px 0 0 25px;
}
#login-menu-sub li:nth-child(2) {
	background:url('../images/shared/bg-register-first.png') no-repeat 0 0;
	width:184px;
	height:24px;
}
#login-menu-sub li:nth-child(3) {
	background:url('../images/shared/bg-register-02.png') no-repeat 0 0;
	width:218px;
	height:23px;
}
#login-menu-sub li a {
	float:left;
	margin:0;
	padding:0;
	background:none;
}

#hotlinks li a, #txtsize li a { float:left; text-indent:-9999px; }
#hotlinks { float:left; list-style-type:none; padding:0; margin:0; margin-left: 0px; }
#hotlinks li { position: relative; float:left; padding:0; margin:0; }
#hotlinks li a.menu-hotlinks { width:218px; height:50px; margin:0; background:url('../images/en/shared/imgtxt-hotlinks.png') no-repeat; }

/* ===== Hover ========================================================*/
#hotlinks div { display: none; z-index:40; }
#hotlinks li.mega div { position: absolute; top:46px; left:0px; }
#hotlinks li.mega.hovering div { display: block; }
#menu-sub { width: 210px; margin:0; padding:0; list-style: none; clear:both; }
#menu-sub li { margin:0; padding:0; }
#menu-sub li a { text-indent:inherit; }
#menu-sub li a img { float:left; margin:0 0 0 25px; }
#menu-sub li:first-child a { width:218px; height:24px; background:url('../images/shared/bg-hotlinks-first.png') no-repeat 0 0; }
#menu-sub li:nth-child(2n) { width:218px; height:23px; background:url('../images/shared/bg-hotlinks-02.png') no-repeat 0 0; }
#menu-sub li:nth-child(2n+1) { width:218px; height:23px; background:url('../images/shared/bg-hotlinks-01.png') no-repeat 0 0; }
#menu-sub li:last-child { width:218px; height:4px; background:url('../images/shared/bg-hotlinks-shadow.png') no-repeat 0 0; }
#menu-sub li a { float:left; margin:0; width:210px; padding:0px; }
/*#menu-sub li a:hover { text-decoration:none; background-color:#8a8a8a; color:#fff; }*/

/* ===== Text Size ========================================================*/
#txtsize { float:left; list-style-type:none; padding:0; margin:0 0 0 3px; }
#txtsize li { float:left; padding:0; margin:0; }
#txtsize li:first-child { width:53px; height:9px; margin:14px 0 0 10px; background:url('../images/en/shared/imgtxt-textsize.png') no-repeat; }
/*edit*/
#txtsize li:nth-child(2) a { width:7px; height:7px; margin:15px 0 0 12px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat 0 -6px; }
/*edit*/
#txtsize li:nth-child(2) a:hover { background-position:0 -23px; }
/*edit*/
#txtsize li:nth-child(2) .active { background-position:0 -23px; }
/*edit*/

#txtsize li:nth-child(3), #txtsize li:nth-child(5) { width:2px; height:17px; margin:10px 0 0 8px; background:url('../images/shared/v-topnav.gif') no-repeat; }
#txtsize li:nth-child(4) a { width:9px; height:10px; margin:13px 0 0 8px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -25px -4px; }
#txtsize li:nth-child(4) a:hover { background-position:-25px -21px; }

/*edit*/
#txtsize li:nth-child(4) .active { background-position:-25px -21px; }
/*edit*/

#txtsize li:nth-child(6) a { width:10px; height:13px; margin:12px 0 0 8px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -51px -3px; }
#txtsize li:nth-child(6) a:hover { background-position:-51px -20px; }

/*edit*/
#txtsize li:nth-child(6) .active { background-position:-51px -20px; }
/*edit*/

/* ===== Text Size Script ========================================================*/
.medium { font-size: 13px; }
.large { font-size: 14px; }
#txtsize .small { font-size: 12px; }
#txtsize .small a { float:left; width:7px; height:7px; margin:15px 0 0 12px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat 0 -6px; }
.medium #txtsize .medium a { float:left; width:9px; height:10px; margin:13px 0 0 8px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -25px -21px; }
.large #txtsize .large a { width:10px; height:13px; margin:12px 0 0 8px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -51px -20px; }
.medium #txtsize .small a,
.large #txtsize .small a { float:left; width:7px; height:7px; margin:15px 0 0 12px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat 0 -6px; }

/* ===== Language ========================================================*/
#lang { float:left; list-style-type:none; padding:0 0 0 16px; margin:0; }
#lang li { float:left; padding:0; margin:0; }
#lang li a { float:left; }
#lang li a.lang-th { width:25px; height:9px; margin:14px 0 0 19px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -94px -5px; }
#lang li a.lang-th:hover,
#lang li a.lang-th-active { width:25px; height:9px; margin:14px 0 0 19px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -94px -22px; }
#lang li:nth-child(2) { width:2px; height:17px; margin:10px 0 0 13px; background:url('../images/shared/v-topnav.gif') no-repeat; }
#lang li a.lang-en { width:25px; height:9px; margin:14px 0 0 13px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -150px -5px; }
#lang li a.lang-en:hover,
#lang li a.lang-en-active { width:25px; height:9px; margin:14px 0 0 13px; background:url('../images/en/shared/img-txtsize-lang.png') no-repeat -150px -22px; }

/* ===== Search ========================================================*/
#search { float:left; list-style-type:none; padding:6px 0 0 32px; margin:0; }
#search li:first-child { float:left; width:165px; }
#search li:last-child { float:left; }
.bg-search { float:left; width:165px; height:24px; background:url('../images/shared/bg-search.gif') no-repeat; }

/* ===== Footer ========================================================*/
.footer-logo { float:left; list-style-type:none; width:292px; height: 64px; padding:0 0 0 10px; margin:0; background:url('../images/shared/bg-logo.png'); }
.footer-logo li { float:left; padding:10px 9px; margin:0; }
.footer-logo li a { float:left; height:44px; background:url('../images/shared/footer-logo.png') no-repeat 0 45px; }
.footer-logo li a.logo-01 { width:40px; background-position: 0 100%; }
.footer-logo li a.logo-01:hover { background-position: 0 -0%; }
.footer-logo li a.logo-02 { width:43px; background-position: -50px 100%; }
.footer-logo li a.logo-02:hover { background-position: -50px -0%; }
.footer-logo li a.logo-03 { width:47px; background-position: -100px 100%; }
.footer-logo li a.logo-03:hover { background-position: -100px -0%; }
.footer-logo li a.logo-04 { width:84px; background-position: -150px 100%; }
.footer-logo li a.logo-04:hover { background-position: -150px -0%; }

.footer-sitemap{
	width:698px;
	height:63px;
	float:left;
	background:url('../images/shared/bg-footer.jpg') no-repeat 0 0;
}
.copyright{
	float:left;
	width:240px;
	padding:10px 0 0 20px;
}
.copyright img{
	float:left;
}
.sitemap-list{
	list-style-type:none;
	margin:0;
	padding:0;
	float:right;
	width:435px;
}
.sitemap-list li{
	margin:0;
	padding:0;
	float:left;
	background:url('../images/shared/line-wh.png') repeat-y  0 0;
}
.sitemap-list li a{
	float:left;
	background:url('../images/shared/line-wh.png') repeat-x bottom left;
	height:15px;
}
.sitemap-list li a.last{
	float:left;
	background:none;
}
.sitemap-list li a.sitemap-about{
	margin:0 0 0 1px;
	padding:1px 0 6px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-announcement{
	margin:0 0 0 1px;
	padding:1px 0 6px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-brochure{
	margin:0 0 0 1px;
	padding:2px 0 5px 10px;
	width:130px;
}
.sitemap-list li a.sitemap-legal{
	margin:0 0 0 1px;
	padding:2px 0 4px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-calendar{
	margin:0 0 0 1px;
	padding:2px 0 4px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-contact{
	margin:0 0 0 1px;
	padding:0 0 6px 10px;
	width:130px;
}
.sitemap-list li a.sitemap-development{
	margin:0 0 0 1px;
	padding:0 0 6px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-oversea{
	margin:0 0 0 1px;
	padding:1px 0 5px 10px;
	width:136px;
}
.sitemap-list li a.sitemap-links{
	margin:0 0 0 1px;
	padding:0 0 6px 10px;
	width:130px;
}
/* ===== Tooltips ========================================================*/
#wrap-tooltips {
	width: 134px;
	position:relative;
	top:0px;
	z-index:4;
}
.img-arrowhover {
	margin:0 0 2px 28px;
}
/*.tooltip, .tooltip-wave {
	display:none;
}
.tooltip-content {
	width:200px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#393535;
	float:left;
	padding:10px 20px;
	position:relative;
	opacity:0.9;
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
}
.tooltip-arrow {
	float:left;
	background:url('../images/shared/img-toolstip-arrow-logo.png') no-repeat 0 0;
	width:17px;
	height:14px;
	position:absolute;
	bottom:-14px;
	left:30px;
}
.tooltip-wave-content {
	width:140px;
	-webkit-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#897b6c;
	float:left;
	padding:10px 20px;
	position:relative;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}
.tooltip-wave-arrow {
	float:left;
	background:url('../images/shared/img-toolstip-arrow-wave.png') no-repeat 0 0;
	width:33px;
	height:15px;
	position:absolute;
	top:-14px;
	left:30px;
}*/
.tooltip-logo {
	display: none;
	width:200px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#393535;
	padding:10px 20px;
	position:relative;
	opacity:0.9;
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
}
.tooltip-logo .arrow {
	float:left;
	background:url('../images/shared/img-toolstip-arrow-logo.png') no-repeat 0 0;
	width:17px;
	height:14px;
	position:absolute;
	bottom:-14px;
	left:30px;
}
.tooltip-wave {
	display:none;
	width:140px;
	-webkit-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#897b6c;
	padding:10px 20px;
	position:relative;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}
.tooltip-wave .arrow {
	float:left;
	background:url('../images/shared/img-toolstip-arrow-wave.png') no-repeat 0 0;
	width:33px;
	height:15px;
	position:absolute;
	top:-14px;
	left:30px;
}
/* ===== Content Inside ========================================================*/
#content-inside {
	float:left;
	/*width:708px;
	min-height: 500px;
	margin:-64px 0 20px 294px;*/
	width:100%;
	background-color:#ffffff;
}
.inside{
	/*width:703px;*/
	width: 100% !important;
}
/*.img-title{
	padding: 2px 0 0 9px;
	height:33px;
}
.img-featured{
	padding:0 0 0 2px;
	margin-top:-3px;
}*/
div.img-title { display: block; padding: 0 0 3px 9px; margin-top:150px; height: 37px; overflow: hidden;display: none;}
div.img-featured { display: block; padding:0 0 0 0px; margin-top:-3px; }
.img-featured img {width:100%;}
.side-shadow-l{
	/*float:left;
	padding:2px 0 0 3px;
	background:url('../images/shared/shadow-side-l.png') repeat-y 0 0; */
}
.side-shadow-r{
	/*width:676px;
	padding:0 0 0 5px;
	min-height: 300px;
	background:url('../images/shared/shadow-side-r.png') repeat-y right top;*/
}
.shadow-btm{
/*	float:left;
	background:url('../images/shared/shadow-btm.png') no-repeat 6px 0;
	height:9px;
	width:676px; */
}
.backtotop{
	float:right;
	padding:45px 30px 20px 0;
}
.downloadbar-list{
	list-style-type:none;
	margin:0;
	padding:0;
	/*width:676px;*/
	width: 100%;
}
.downloadbar-list > li{
	float:left;
	/*width:627px;*/
	width: 100%;
	margin:0;
	padding:10px 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.21);
	/*-webkit-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	/*border-top: 1px solid #6d6d6d;
	border-top: 1px solid #6d6d6d0*/;
}
.downloadbar-list > li:first-child{
	border-top:none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	*border-top: none;
}
.downloadbar-list > li:nth-child(2n){
	/*-webkit-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);*/
	/*background:url('../images/shared/bg-black.png') repeat 0 0;*/
	background: #eeeeee; /*เพิ่ม*/
	border-top: 1px solid rgba(255, 255, 255, 0.21);
	/*border-top: 1px solid #6d6d6d;
	border-top: 1px solid #6d6d6d0*/;
}
.line-col{
	float:left;
	/*background:url('../images/shared/legal/line-col.png') repeat-y 0 0;*/
	width: 100%; /* เพิ่ม */
}
.downloadbar-desc{
	float:left;
	list-style-type:none;
	margin:0;
	padding:0;
	/*width:628px;*/
	width: 100%;
}
.downloadbar-desc > li{
	float:left;
	margin:0;
	padding:5px 15px;
	/*width:435px;*/
	width: 75%;
}
.downloadbar-desc > li:first-child{
	padding:0 10px 0 5px;
	/*width:71px;*/
	width: 10%;
	min-width: 71px;
}
.downloadbar-desc > li:last-child{
	/*width:50px;*/
	width: 10%;
	padding:5px 0 0 25px;
}
.orange-list{
	list-style-type:none;
	float:left;
	margin:0;
	padding:10px 0 0 0;
}
.orange-list > li{
	float:left;
	/*width:585px;*/
	width: 100%;
	margin:0;
	/*padding:8px 40px 8px 42px;*/
	padding:8px 40px 8px 28px;
	/*border-top: 1px solid rgba(255, 255, 255, 0.21);*/
	*border-top: 1px solid #6d6d6d;
	border-top: 1px solid #6d6d6d\0/;
}
.orange-list > li:nth-child(2n){
	/*background:url('../images/shared/bg-black.png') repeat 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.21);*/
	*border-top: 1px solid #6d6d6d;
	border-top: 1px solid #6d6d6d\0/;
}
.orange-list > li > .icon-list-orange{
	list-style-type:none;
	margin:0;
	padding:0;
}
.orange-list > li > .icon-list-orange > li{
	color: #222 !important;
	margin:0;
	padding:0 17px;
	background:url('../images/shared/list-orange.gif') no-repeat 0 8px;
}
.orange-list li a span{
	width:560px;
}
/* ===== pagenav ========================================================*/
.pagenav-wrap {
	text-align:center;
	padding: 20px 0 0 0;
	*padding: 0 0 0 0;
}
.pagenav-all {
	display: inline-block;
	margin: 0;
	padding: 0;
	/* For IE, the outcast */
	zoom:1;
	*display: inline;
}
.pagenav-all > li {
	display:inline;
	float:left;
	margin:0;
	padding:4px 8px;
}
.pagenav-all > li:first-child, .pagenav-all > li:last-child {
	padding:0 8px;
}
.pagenav-all > li > span { padding: 0px 2px; color: #CF9044; }
.pagenav-all > li > a { padding: 0px 2px; }

/* ===== Side Nav ========================================================*/
.leftnavlink {
	font-size: 11px;
	background-image:url('../images/shared/nav-h3-bg.png');
	padding: 7px 0 7px 15px !important;
	width: 208px !important;
	min-height: 0 !important;
}
.navpeople {
	background-image:url('../images/shared/people-bg.png') !important;
}
.navstudent {
	background-image:url('../images/shared/student-bg.png')  !important;
}
.navstudent:hover {
	/*background-image:url('../images/shared/student-bg.png') !important;*/
	/*background-image: none !important;*/
	background-color: #000000 !important;
}
.navmember {
	background-image:url('../images/shared/member-bg.png') !important;
}

aside{
	position:absolute;
	top:159px;
	left:0;
	background:url('../images/shared/bg-sidenav.png') no-repeat;
	/*height:200px;*/
	width:302px;
	height: 400px;
	/*overflow: hidden;*/
	z-index: 2;
}
.sidenav {
	float:left;
	display:inline;
	margin:2px 0 0 30px;
	padding:0;
	width:223px;
}

.sidenav a {
	display:block;
	min-height:25px;
	margin:0 0 1px;
	padding:0;
	width:223px;
	overflow: hidden;
}

.sidenav .hilight a {
}

.sidenav img {
	float:left;
	padding:0;
	margin: 5px 0 0 15px;
}

.sidenav ul li {
	float:left;
	margin:0;
	padding:0;
	background-color: rgba(0, 0, 0, 0.3);
	margin-top: 1px;
}

.sidenav h3 {
	float:left;
	margin:0;
	padding:0;
	width:223px;
}

.sidenav .hilight h3 a {
	margin:0;
}

.sidenav .outer {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:223px;
}

.sidenav .inner {
	float:none;
	list-style:none;
	height:0;
	margin:0;
	overflow:hidden;
	padding:0;
	width:223px;
	-moz-transition:all.8s ease 0s;
	-o-transition:all .8s ease 0s;
	-webkit-transition:all .8s ease 0s;
}

.sidenav .inner li {
	float:none;
	margin-bottom: 1px;
	/*text-indent: 15px;*/
}

.sidenav .inner a {
	float:left;
	min-height: 25px;
	background-color: rgba(0, 0, 0, 0.3);
	margin-bottom: 1px;
}

/*accordion*/
.accordion {
	float:left;
	margin:0;
	padding:0;
	width:100%;
}

.accordion ol {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
}

.accordion ol .first {
	float:left;
	margin:0;
	padding:0;
	width:100%;
}

.accordion h3 {
	font-family: 'Kanit';
	cursor:pointer;
	float:left;
	font-size: 20px;
	/*font-size:13px;*/
	font-size: 1em;
	height: 24px;
	/*edit*/
	height:auto;
	/*edit*/
	margin:0;
	padding:13px 26px;
	/*width: 615px;*/
	width: 100%;
	line-height: 1;
	border-bottom: 1px solid #ccc;
}

.accordion .active h3 {
	color:#c48f39;
}

.handle {
	/*background:url('../images/shared/handle.png') no-repeat 0 0;*/
}

.accordion .active h3 {
	background-position:100% 0;
}

.accordion .downloadbar-list {
	float:none;
	overflow:hidden;
	height:0;
	-moz-transition: all.8s ease 0s;
	-o-transition: all .8s ease 0s;
	-webkit-transition: all .8s ease 0s;
}
.downloadbar-list > li:first-child {
	box-shadow:inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}

.accordion .downloadbar-list > li:last-child {
	/*box-shadow:inset 0 8px 6px -6px rgba(0, 0, 0, 0.2), inset 0px -8px 6px -6px rgba(0, 0, 0, 0.2);*/
}
/*edit*/
.placeholder { color: #aaa; }


/*.new-footer {margin-bottom: calc(0% - 100px); position: absolute;}*/
.new-title {
	padding: 40px 0; 
	text-align: left;
	background-color:rgb(245,245,245);
	border-bottom: 1px solid rgb(229, 229, 229);
}
.new-title h3 {
	font-size: 2.5em;
	text-align: left;
	padding: 13px 0;
	margin-top: 0 !important;
	color: #000000;
	/*background-color: #b6661150;*/
}
.line-title {
	border-top: 2px #eb6408 solid;
	width: 50px;
	margin: 20px auto;
	display: none;
}
.subtitle-bold {
	clear: both;
	margin-top: 20px;
	font-weight: 400;
}
.content-list {
	display: table-cell;
}

.new-content {padding: 0 0 50px 0;}
.new-content h5 {font-size: 1em;}
.new-content .t-head {/*box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);*/border-top: 1px solid #eb6408;}
.new-content th {padding: 20px; font-size: 0.8em;}
.new-content td {padding: 0 20px;}
.new-content a, .new-content a:visited {
	color: #eb6408 !important;
}
.new-bottom {text-align: center;margin: 50px 0;}
.new-bottom p {font-size: 0.8em;}
.line-shadow {width: 100% !important;background-size: 0% !important;background-position: 0 0 !important; height: 9px !important; display: inherit !important; margin: 15px 0 10px 0 !important;
line-height:2px !important;background-color:#eb6408 !important;
}

.new-content div.side-shadow-r ul.list-bullet {
    margin: 10px 0px 10px 10px;
    padding: 0px;
    list-style: none;
    line-height: 18px;
}
.accordion h3 {
	background-color: #eeeeee70 !important;
}
.accordion .active h3 {
	color: #fff !important;
	background-color: #eb6408 !important;
}

.center {
	text-align: center;
}
.right {
	text-align: right;
}

.box-login {
	width: 60%;
	margin: 50px auto 0;
	padding: 50px 50px;
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.box-regis-form {
	width: 95%;
	margin: 50px auto 0;
	padding: 50px 50px;
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.btn {
	box-shadow:none !important;
}
.btn:hover {
	box-shadow:none !important;
}
.btn-act {
	background-color: rgb(245, 245, 245);
	border:1px solid rgb(229, 229, 229);
	color: #000000;
}

.form-member input.btn_search {
	background-size: cover !important;
	margin-top: 2px;
}
.line-search, .bg-form-member, .bg-search-pagenav, .line-search-btm {
	background: none !important;
}
input.faqform {
	height: 25px !important;
}
.showdetail > .l {
	color: #eb6408 !important;
}
.darkbrown {
	color: #eb6408 !important;
}
.txt-date {
	color: #000000 !important;
}

.vcontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.vvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


input[type="text"], select, textarea {
    background-color: #eeeeee !important;
    border: 1px solid #eeeeee !important;
	color: #000;
}
.bg-textfield {
    float: left;
    background: #eeeeee !important;
    width: 211px;
    height: 29px;
}
input.contactform, textarea.contactform {
	padding: 5px 5px !important;
	font-size: 1em !important;
	color: #000 !important;
}
.bg-textfield-l, .bg-textfield-calendar, .bg-textarea {
	background: none;
	background-color: #eeeeee;
}

#contact {
	background: none !important;
}
#contact .hilight {
	width: 100%;
}
#contact .contact-list > li:first-child {
	box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}
#contact .accordion .contact-list > li:last-child, #contact .contact-list > li {
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}
#contact .contact-list > li:nth-child(2n){
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	background-color: #eeeeee !important;
}
#contact .bg-textarea {
	background: none;
	background-color: #eeeeee !important;
}
#contact .contact-form {
	padding: 25px 0 25px 0;
	width: 100%;
	max-width: 500px;
}

@media screen and (max-width: 800px) {
	.new-title h3 {font-size: 1.8em;}
	.new-content p, .new-content li {font-size: 1em;}
	.downloadbar-desc > li{
		width: 70%;
	}
	.box-login {
		width: 100%;
	}
	#ddl_university, #ddl_major {
		font-size: 0.8em;
		width: 100%;
	}
}

.tb-nocolor td {
	background-color: rgba(255, 255, 255, 0) !important;
}

.clickmore {
	float: right;
	font-size: 0.7em;
	font-weight: 200;
}

.scroller .inner li.active p, .t-orange, .orange-bold {
	color: #eb6408 !important;
}

.col-12 {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

div.side-shadow-r ul.list_icon li.pdf {
	background-size: auto 60%;
	background-position: left;
}

.container-fluid {
	padding:0 !important;
}

.e-learning td {
	background: none;
}
.e-learning-list td, .tb_list2 td, .tb_list2 th {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.volunteer-tb td {
	padding:5px;
}

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) {
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}


// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}