html,body{
	margin:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	background-color:#fff;
	height:100%;
	font-family: 'THSarabunPSK';
}




a, a:focus{
	color:#a2a2a1;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
a:hover {
	color:#cccccc;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}





.normaltext {color:#666666;}
.lightgoldtext {color:#efe5bb;}
.goldtext {color:#b78900;}
.goldtext2 {color:#c5a41d;}
.goldtext3 {color:#9c844d;}
.bluetext {color:#3f6f91;}
.browntext {color:#553600;}
.browntext2 {color:#7f550b;}
.whitetext { color:#ffffff;}
.greytext { color:#a2a2a1;}
.redtext { color:#ff0000;}
.redtext2 { color:#6d260a;}
.greyborder { border:#999999; border-style:solid; border-width:1px; }
.redline { border:#6d260a; border-bottom:solid; border-width:1px; }






.whitelink, .whitelink:focus {
	color:#FFFFFF;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.whitelink:hover {color:#ffcf00;}

.lightgoldlink, .lightgoldlink:focus {
	color:#efe5bb;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.lightgoldlink:hover {color:#ffcf00;}



.goldlink, .goldlink:focus {
	color:#9c844d;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.goldlink:hover {color:#ddb65b;}


.greylink, .greylink:focus {
	color:#a2a2a1;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.greylink:hover {color:#999999;}



.bold {font-weight:bold;}

.size5 {font-size:0.1em;}
.size6 {font-size:0.4em;}
.size7 {font-size:0.5em;}
.size8 {font-size:0.6em;}
.size9 {font-size:0.7em;}
.size10 {font-size:0.8em;}
.size11 {font-size:0.9em;}
.size12 {font-size:1em;}
.size13 {font-size:1.1em;}
.size14 {font-size:1.2em;}
.size15 {font-size:1.3em;}
.size16 {font-size:1.4em;}
.size17 {font-size:1.5em;}
.size18 {font-size:1.6em;}
.size20 {font-size:1.8em;}
.size22 {font-size:2em;}
.size24 {font-size:2.2em;}
.size26 {font-size:2.4em;}
.size28 {font-size:2.6em;}
.size30 {font-size:2.8em;}
.size32 {font-size:3em;}
.size34 {font-size:3.2em;}
.size36 {font-size:3.4em;}
.size38 {font-size:3.6em;}
.size40 {font-size:3.8em;}



.lineheight10 {line-height:0.6em;}
.lineheight12 {line-height:0.8em;}
.lineheight14 {line-height:1em;}
.lineheight16 {line-height:1.1em;}
.lineheight18 {line-height:1.2em;}
.lineheight20 {line-height:1.3em;}
.lineheight22 {line-height:1.4em;}
.lineheight24 {line-height:1.5em;}
.lineheight26 {line-height:1.6em;}
.lineheight28 {line-height:1.7em;}
.lineheight30 {line-height:1.8em;}



.texttop { vertical-align:top; }
.textmiddle { vertical-align:middle; }
.textbottom { vertical-align:bottom; }
.textleft { text-align:left; }
.textright { text-align:right; }
.textcenter { text-align:center; }
.textjustify { text-align:justify; }

.fleft{ float:left; }
.fright{ float:right; }
.clear { clear:both; }

.noborder { border:none; }
.hideobj{ display: none; }

.fadeimage {
	position: absolute;
	opacity: 0;
	filter: alpha(opacity=0);
}


.pointer { cursor:pointer;}

.btn_greyborder { border:solid; border-color:#e9e5da; border-width:1px; background-color:#FFF;
			-webkit-border-radius: 8px;
			-moz-border-radius: 84px;
			border-radius: 5px;
			padding:10px 60px 10px 60px;
			color:#666666;}

.m-t-5{ margin-top: 5px !important; }
.m-t-10{ margin-top: 10px !important; }
.m-t-15{ margin-top: 15px !important; }
.m-t-20{ margin-top: 20px !important; }
.m-l-5{ margin-left: 5px !important; }
.m-l-10{ margin-left: 10px !important; }
.m-l-15{ margin-left: 15px !important; }
.m-l-20{ margin-left: 20px !important; }
.m-r-5{ margin-right: 5px !important; }
.m-r-10{ margin-right: 10px !important; }
.m-r-15{ margin-right: 15px !important; }
.m-r-20{ margin-right: 20px !important; }
.m-b-5{ margin-bottom: 5px !important; }
.m-b-10{ margin-bottom: 10px !important; }
.m-b-15{ margin-bottom: 15px !important; }
.m-b-20{ margin-bottom: 20px !important; }










.iconmenu {
  display: inline-block;
  cursor: pointer;
  margin-top: 8px;
  margin-right: 12px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #a46f28;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}




.head{
	background-image: url(../images/template/bg_head.jpg);
	background-repeat: repeat-y;
	background-position: top left;
}
.head .logo{ float: left; width: auto; padding: 5px 0px 5px 20px; }
.logo img { width: 100%; }
.head .topbanner{ float: right; width: auto; }
.head .iconmenu{ float: right; width: 35px; }

.mainmenu{ list-style: none; margin: 0; padding: 0; background-color: #a46f28; }
.mainmenu li{ display: inline-block; padding: 5px 27px 5px 27px; position: relative;}
.mainmenu li.menu7{ padding-left: 50px;}
.head .menu{
	font-size: 1.8em;
}
.head .menu{
	font-family: 'DBKing84';
	color:#efe5bb;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.head .menu:hover,.head .menu.active,.head .menu.active a {
	background-color:#e0b444;
	color: #fff;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	transition: 0.5s background-color; /*animates for 1 second*/
	-moz-transition: 0.5s background-color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s background-color; /*For WebKit (Chrome, Safari)*/
}
.menu a{
	color:#efe5bb;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.menu a:hover { color:#fff; text-decoration:none;}

.head .menu .icon-arrow{
	font-size: 12px;
}
.head .menu .icon-search{
	font-size: 22px;
	position: absolute;
	top: 11px;
	left: 20px;
}


.menuover{ list-style: none; margin: 0; padding: 0; background-color: #e0b444; font-family: 'DBKing84'; padding-top: 20px; padding-bottom: 20px; position: absolute; min-width: 250px; left: 0px; margin-top: 5px; z-index: 9999; }
.menuover li{ padding: 0px 30px 0px 30px; }
.menuover a{ color:#fff; }
.menuover a:hover,.head .menu.active a:hover{
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	color:#efe5bb;
}
.menu3 .menuover{ min-width: 400px; }
.menu7 .menuover{ min-width: 435px; left: -318px; }
#form_search button,#form_search3 button{
	color: #fff;
	background-color: #a46f28;
	padding: 0px 25px 0px 25px;
	border: 1px solid #a46f28 !important;
}


#form_mobile_search input[type=text]{
	width: 50%;
	margin-right: 1%;
	border-radius: 5px;
	padding: 5px 5px 3px 5px;
	color: #4E4D4D;
	font-size: 1.4em;
}
#form_mobile_search button{
	font-family: 'DBKing84';
	color: #fff;
	background-color: #a46f28;
	padding: 7px 25px 7px 25px;
	border: 1px solid #a46f28 !important;
	border-radius: 5px;
}


.bannerarea{ width:100%; height:auto; position:relative;}
.banner{ width:100%; height:auto; position:relative;}
.banner img{ width:100%; height:auto; position:relative;}
.banner-control{
	position:absolute;
	width:3%;
	z-index:999;
	top: 40%;
	opacity:0.7;
	filter: alpha(opacity=70);
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	cursor:pointer;
}
.banner-control:hover{
	opacity:1;
	filter: alpha(opacity=100);
}
#banner-prev{ left:1%; }
#banner-next{ right:1%; }
#banner-prev img,#banner-next img{ width: 100%; }


.title{
	font-family: 'DBKing84';
	font-size: 2.8em;
}
.content { font-family: 'THSarabunPSK'; font-size: 1.4em; max-width: 1920px; overflow: auto;}

.news-section{ background-color: #f8f6ef; padding: 2% 0% 4% 0%;}
.hilight .item img{ width: 100%; }
.newsarea{ background-color: #fff; padding: 2% 5% 4% 5%; border-radius: 25px;}

.news-section .newsarea .item{ margin: 0% 2% 5% 2%; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #6d260a; padding-bottom: 5%; }
.news-section .newsarea .item.last { border-bottom-style: none; }
.newsarea .button button{
	background-color: #fff;
	padding: 5px 45px 5px 45px;
	border: 1px solid #e9e5da !important;
	border-radius: 5px;
}


.section3{ background-image: url(../images/template/bg_3banner.jpg); background-repeat: repeat-y; padding: 8% 0% 8% 0%; }
.section3 img{ width: 100%; margin-bottom: 5%; }


.section4{ background-color: #fff; padding: 5% 0% 5% 0%; }
.section4 img{ width: 100%; margin-bottom: 5%; }


.section5{ background-color: #fff; }
.section5 img{ width: 100%; margin-top: 5%; margin-bottom: 5%; }
.section5-1{ background-image: url(../images/template/banner_water.jpg); background-repeat: repeat-y; padding: 4% 5% 0% 5%; background-size: auto 100%; }
.section5-2{ background-image: url(../images/template/bg_4banner.jpg); background-repeat: repeat-y; padding-top: 2%; padding-bottom: 2%; background-size: auto 100%; }

.footer{ background-image: url(../images/template/bg_copyright.jpg); background-repeat: repeat-y; padding: 3% 2% 3% 2%; }
.footer .copyright{ float: left; }
.footer .counter{ float: right; margin-top: 2%; }



.page .detail{ padding: 2% 2% 3% 2%; min-height: 300px; }
.page .detail .content { margin-top: 1%; }
.page .detail .content img{ width: 100%; max-width: 800px; }

.page .detail .content.download .item{ margin-bottom: 1%; }
.page .detail .content.download img{ width: auto; }

.page .detail .content.faq .item{ margin-bottom: 1%; }
.page .detail .content.faq .item .question{ background-color: #f9f2e8; }
.page .detail .content.faq .item .question,
.page .detail .content.faq .item .answer{ margin-bottom: 1%; padding: 15px 0px 10px 30px; }
.page .detail .content.faq .item .col1{ min-width: 60px; }
.page .detail .content.faq .item .col2{ width: 100%; }
.page .detail .content.faq .item .col3{ min-width: 60px; text-align: center;}
.page .detail .content.faq .item .col3 img{ width: auto; }


.page.pagedetail .detail .content .icon img{ width: auto; margin-bottom: 20%; }
.page.pagedetail .detail .content .image{ text-align: center; }
.page.pagedetail .detail .sharearea{ text-align: center; margin: auto; margin-top: 2%; }
.page.pagedetail .detail .sharearea img{ width: 80%; max-width: 300px; }


.page .detail .content.result .item{ margin-bottom: 2%; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: #6d260a; }
.page .detail .content.result .item .type{ margin-bottom: 2%; }

.countpage{ margin-top: 2%; margin-bottom: 3%; }
.share button{
	background-color: #fff;
	padding: 5px 25px 5px 25px;
	border: 1px solid #e9e5da !important;
	border-radius: 5px;
	font-size: 1.4em;
	width: 120px;
}



	.gallery img{ width: 100%;}

	.photo{
	  display: block;
	  position: relative;
	  -webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	   -o-transition: all 0.4s ease-in-out;
	   -ms-transition: all 0.4s ease-in-out;
	   transition: all 0.4s ease-in-out; 

	   background-repeat: no-repeat;
	   background-position: center center;
	   background-size: cover;

	  -webkit-transform: scale(1.01,1.01);
	  -moz-transform: scale(1.01,1.01);
	  -ms-transform: scale(1.01,1.01);
	  -o-transform: scale(1.01,1.01);
	  transform: scale(1.01,1.01);
	}

	.photo img{ display: block; width: 100% }

	.vdo:after{
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(18,18,18,0.6);
	  display: block;

	  -webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	   -o-transition: all 0.4s ease-in-out;
	   -ms-transition: all 0.4s ease-in-out;
	   transition: all 0.4s ease-in-out; 
	}
	/*.vdo:hover:after{background-color: rgba(18,18,18,0.2);}*/

	.vdo .play-button{
	  display: block;
	  width: 66px;
	  height: 66px;
	  background-image: url(../images/template/icon-play-outline.svg);
	  background-position: center center;
	  background-size: contain;
	  background-repeat: no-repeat;

	  position: absolute;
	  top: 50%;
	  left: 50%;
	  margin:-33px 0 0 -33px;
	  pointer-events: none;
	  z-index: 9
	}

	.vdo .play-button.white{background-image: url(../images/template/icon-play-outline-white.svg);}

	.detail .texteditor img{ max-width: 100% !important; height: auto !important; }
	.detail .texteditor p,.detail .texteditor span,.detail .texteditor div{ font-family: 'THSarabunPSK'; }




.part-item,.periodname{ padding: 1% 2% 1% 3%; margin: 3% 0% 3% 0%; background-color: #ceb575;}
.province-item{ margin-bottom: 1%; }
.province-item img{ width: auto !important; }

.provincenamearea{ padding: 1% 0% 1% 0%; }
.provincenamearea .provincename{ float: left; }
.provincenamearea .backbutton{ float: right;}
.provincenamearea .backbutton button{
	background-color: #fff;
	padding: 5px 45px 5px 45px;
	border: 1px solid #e9e5da !important;
	border-radius: 5px;
}



.pagearea{ text-align: center; padding-bottom: 3%; }
.pagearea .pagination{
	color:#fff; background-color: #dbd2ab;
	transition: background-color 0.5s linear;
	-moz-transition: background-color 0.5s linear;
	-webkit-transition: background-color 0.5s linear;/**/
	font-size: 1.1em;
	border-radius: 0px;
}
.pagearea .pagination span{ display: inline-block; padding: 2px 5px; min-width: 45px; }
.pagearea .pagination:hover,.pagearea .pagination.active{ color:#fff; background-color: #6d260a;  }
.pagearea .pagination.disable:hover{ cursor:not-allowed; }


.subjectarea { line-height: 1.4em; margin-top: 2%; }
.subjectname { line-height: 1.2em; margin-top: 4%; }



.liveicon{ position:fixed; bottom: 100px; right: 15px; text-align: right; z-index: 1; }
.liveicon img{ width: 65%; }

.livearea{ background-image: url(../images/live/bg_live.jpg); width: 100%; padding: 1% 1% 8% 1%; text-align: center; }
.top-live .name img{ width: 95%; max-width: 732px;}

.livearea .embed-live{ margin: 2% 10% 3% 10%; }
#my-video{ width: 100%; height: 570px; }




@media screen and (max-width: 1266px) {	
	.mainmenu li{ padding: 5px 25px 5px 25px;}
	.menu7 .menuover{ left: -320px; }
	.liveicon img{ width: 60%; }
	
	#my-video{ width: 100%; height: 550px; }
}

@media screen and (max-width: 1236px) {	
	.mainmenu li{ padding: 5px 23px 5px 23px;}
	.menu7 .menuover{ left: -322px; }
	.liveicon img{ width: 55%; }
	
	#my-video{ width: 100%; height: 530px; }
}

@media screen and (max-width: 1230px) {	
	.mainmenu li{ padding: 5px 22px 5px 22px;}
	.menu7 .menuover{ left: -323px; }
	.liveicon img{ width: 55%; }
	
	#my-video{ width: 100%; height: 510px; }
}


@media screen and (max-width: 1200px) {	
	.head .logo{ float: left; width: 70%; height: 135px; padding: 5px 0px 5px 10px; }
	.logo img { width: 100%; }
	.head .topbanner{ display: none; }
	
	.bx-wrapper .bx-pager,
	.bx-wrapper .bx-controls-auto {
		width: 95%;
	}
	
	.mm-menu {
		height: calc( 100% - 135px ) !important;
	}
	
	.footer{ text-align: center; }
	.footer .copyright{ float: none; }
	.footer .counter{ float: none; margin-top: 2%; }
	.liveicon img{ width: 50%; }
	
	#my-video{ width: 100%; height: 480px; }
}

@media screen and (max-width: 1023px) {
	.head .logo{ float: left; width: 70%; height: 115px; padding: 5px 0px 0px 10px; }
	.logo img { width: 100%; }
	.head .topbanner{ display: none; }
	.head .iconmenu{ float: right; width: 35px; }
	
	.mm-menu {
		height: calc( 100% - 115px ) !important;
	}
	.liveicon img{ width: 45%; }
	
	#my-video{ width: 100%; height: 460px; }
}

@media screen and (max-width: 767px) {
	.head .logo{ float: left; width: 80%; height: 100px; padding: 5px 0px 0px 10px; }
	.logo img { width: 100%; }
	.head .topbanner{ display: none; }
	.head .iconmenu{ float: right; width: 35px; }
	
	.iconmenu {
	  margin-top: 3px;
	  margin-right: 5px;
	}
	.bar1, .bar2, .bar3 {
	  width: 30px;
	  height: 4px;
	}
	
	.change .bar1 {
	  -webkit-transform: rotate(-45deg) translate(-7px, 6px) ;
	  transform: rotate(-45deg) translate(-7px, 6px) ;
	}

	.change .bar3 {
	  -webkit-transform: rotate(45deg) translate(-7px, -8px) ;
	  transform: rotate(45deg) translate(-7px, -8px) ;
	}
	
	.mm-menu {
		height: calc( 100% - 100px ) !important;
	}
	.liveicon img{ width: 40%; }
	.livearea{ min-height: 700px; }
	.livearea .embed-live{ margin: 8% 5% 8% 5%;}
	
	#my-video{ width: 100%; height: 380px; }
}


@media screen and (max-width: 550px) {
	.head .logo{ float: left; width: 80%; height: 60px; padding: 5px 0px 0px 10px; }
	
	.mm-menu {
		height: calc( 100% - 60px ) !important;
	}
	.liveicon img{ width: 35%; }
	
	#my-video{ width: 100%; height: 280px; }
}



@media print
{    
    body * { visibility: hidden; }
	#printArea * { visibility: visible; }
	#printArea { position: absolute; top: 40px; left: 30px; }
	
	.no-print, .no-print *
    {
        display: none !important;
    }
}





.customSelect{ 
	display:block;
	width:auto;
	height: 42px;
	/*padding:6px 12px;
	font-size:14px;*/
	padding: 0px 15px 0px 15px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image:none;
	border:1px solid rgba(204,204,204,0.5);
    border-radius:4px;
	-webkit-border-radius:4px; 
	
	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

	-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
} 
.customSelect:focus{
	border:1px solid rgba(0,0,0,0.3);
}







.card-photo{

  display: block;

  position: relative;

  overflow: hidden;

  z-index: 9

}

.card-photo .photo{ 

  display: block;

  position: relative;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;



    -webkit-transition: all 0.4s ease-in-out;

       -moz-transition: all 0.4s ease-in-out;

         -o-transition: all 0.4s ease-in-out;

        -ms-transition: all 0.4s ease-in-out;

            transition: all 0.4s ease-in-out;

}

.card-photo .photo img{ width: 100%;}


.youtubeCoverBg{ margin-bottom: 1%; }
.card-photo.youtubeCoverBg:before{

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background-color: rgba(0,0,0,0.5);

  z-index: 2;

  pointer-events: none;

}

.card-photo.youtubeCoverBg:after{

  content: '';

  position: absolute;

  left:50%; 

  top: 50%; 

  width: 50px;

  height: 50px;

  margin: -25px 0 0 -25px;

  z-index: 3;



  background-position: center center;

  background-size: contain;

  background-repeat: no-repeat;

  background-image: url(../images/template/icon-play.png);

}