@charset "utf-8";

/* CSS Document */



@font-face {

	font-family: 'supermarket';

	src: url('../fonts/supermarket.eot');

	 src: url('../fonts/supermarket.eot?#iefix') format('embedded-opentype'),

	 url('../fonts/supermarket.svg') format('svg'),

	 url('../fonts/supermarket.ttf') format('truetype');

	    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'true-thai';

    src: url('../fonts/ttmsp-webfont.eot');

    src: url('../fonts/ttmsp-webfont.eot?#iefix') format('embedded-opentype'),

        url('../fonts/ttmsp-webfont.woff2') format('woff2'),

        url('../fonts/ttmsp-webfont.woff') format('woff'),

        url('../fonts/ttmsp-webfont.ttf') format('truetype'),

        url('../fonts/ttmsp-webfont.svg#true-thaimedium_spregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



body,td,th,html {

	

	font-family: tahoma;

	font-size: 12px;

}

body {

	background: url(../images/bg-thsbo333.jpg) top center no-repeat;

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

    background-color: #acd373;

}

.bodycp {

	background: url(../images/bg-thsbo333.jpg) #acd373 top center no-repeat fixed;

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

    background-size: cover;

}

a:link {

	color: #00a651;

	text-decoration: none;

}

a:visited {

	text-decoration: none;

	color: #00a651;

}

a:hover {

	text-decoration: none;

	color: #333 !important;

}

a:active {

	text-decoration: none;

}



#slide-img2 img {

    border: none;

    cursor: auto;

    position: relative;

    z-index: 2;

}



#nav2 { margin-bottom:15px; }

#nav2 a { border: none; background: none; text-decoration: none; margin: 0 5px; padding: 3px 5px; color:#BEBEBE; }

#nav2 a.activeSlide { background: none; color:#ffffff }

#nav2 a:focus { outline: none; }

/*******************************************************/



/*********** slide 2 ***************/

.slide-frame {

	margin-top:0px;

	width: 603px;

	height: 257px;

	float: left;

}

#slide{padding:0; border:none}

#slideshow{width:603px; height:257px; overflow:hidden; border:none}

#slide-img img {width: 603px; height: 257px; border:none}

#nav {text-align: right;font-size: 12px; font-weight: bold; width:603px; height:30px; overflow:hidden; margin: 0 auto; margin-top: -40px; position:relative ; z-index: 999;text-decoration: none; line-height:1px; border:none;}

#nav a {background: url(../images/slidenav.png)  no-repeat center top; width: 30px; height: 30px;margin: 0 6px; color:#fff; display: inline-block; padding: 14px 14px 0 11px;text-decoration: none; border:none}

#nav a.activeSlide {background: url(../images/slidenav2.png)  no-repeat center top; color: #fff;text-decoration: none; border: none}

#nav a:focus { outline: none; cursor: pointer;text-decoration: none; border:none}

/************* end slide *************/



.tophead{

    width: 100%;

    float: left;

    background: #fff;

    height: 80px;

    position: relative;

    z-index: 10;

    box-shadow: #000 0 0 10px;

}

.topmenu{

    width: 100%;

    float: left;

    background: #202020;

    height: 40px;

    box-shadow: #000 0 0 5px;

    z-index: 9;

}

.bt-top{

    width: auto;

    padding-left: 15px;

    padding-right: 15px;

    height: 40px;

    line-height: 40px;

    font-family: true-thai;

    font-size: 22px;

    text-align: center;

    color: #fff;

    background: #202020;

    float: left;

    border-right:#111 1px solid;

    border-left:#2d2d2d 1px solid;

}

.bt-top:hover{

    background: #00ae33;

}

.bt-top > i{

    font-size: 12px !important;

}

.main{

	width:1000px;
	padding-top:0px;
	padding-bottom:0px;
   	position: relative;
	margin: auto;
	margin-top:0px;


}

.contentweb{

   	margin: auto;
    	width: 1000px;
	position:relative;
	top:20px;

}

.row-col{

   	width:1000px;
	height:auto;
	margin:auto;
	padding-top:0px;
	position: relative;
	background:#fff;
	float:left;
	margin-bottom:20px;

}



.col-left{

	width:720px;

    	height: auto;

	margin-right:0px;

	float:left;

    background: #fff;

    /*box-shadow: #111 0px 0px 5px;*/

    position: relative;

    z-index: 4;


    padding-bottom: 20px;

}

.col-right{

	width:280px;

    height: auto;

	float:left;

    background: #fff;

    /*box-shadow: #111 0px 0px 5px;*/

    position: relative;

    z-index: 1;


    padding-bottom: 20px;

}





/*****************************************/

    ul.listmenu{

        padding: 0 !important;

        list-style: none;

        float: left;

        display: block;

  list-style-type: disc;

  -webkit-margin-before: 0em;

  -webkit-margin-after: 0em;

  -webkit-margin-start: 0px;

  -webkit-margin-end: 0px;

  -webkit-padding-start: 0px;

    }

    ul.listmenu li{

        width: auto;

        display: block;

        position: relative;

        color: #ddd;

    }

    ul.listmenu li ul li{

        width: 130px;

        display: block;

        position: relative;

        text-align: left;

        line-height: 13px;

        color: #ddd;

    }

    ul.listmenu li a{

        display: block;

        padding: 5px 5px;

        color: #ddd !important;

        text-decoration: none;

        text-shadow: #000 0px 0px 5px;

    }

    ul.listmenu li a:hover{

        color: #fff !important;

        font-weight: bolder;

        text-shadow: #000 1px 1px 8px;

        font-size: 13px;

        /*border-radius: 10px;

        background: #92278f;*/

    }

    ul.listmenu li ul{

        display: none;

        position: absolute;

        z-index: 999;

        left: -40px;

        top: 40px;

    }

    

    ul.listmenu li:hover ul{

        display: block; /* display the dropdown */

        color: #fff;

        

    }



.bt{

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

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

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

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

    transition: all 0.3s ease-in-out;

}

.bt:hover{

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

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

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

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

    transition: all 0.3s ease-in-out;

}

.footerbar{
	background: url(../images/footer.png) left top repeat;
	width: 100%;
	height: 130px;
	position: fixed;
	bottom: 0;
	left:0;
	z-index: 10;
	/*display:none;*/
}


.footer{

    width: 100%;

    /*background: #222;*/

    background: url(https://subtlepatterns.com/patterns/micro_carbon.png) center top repeat;

    padding-top: 20px;

    padding-bottom: 0px;

    float: left;

    color: #858585;

    margin-top: 20px;

    line-height: 15px;

    border-top: #222 1px solid;
position:relative;
min-height:120px;
margin-bottom: -20px;

    

}

.footer hr{

    border-top: #333 1px solid;

    border-bottom: none;

    border-left: none;

    border-right: none;

    margin-top: 5px;

    margin-bottom: 0px;

}

    

.footer a{

    color: #ccc;

    font-size: 12px;

    display: inline-block;

    padding-left: 10px;

    padding-right: 10px;

}

.footer a:hover{

    color: #fff !important;

}

.footer img{

    border: none;

    margin-top: 20px;

}

/*********************************/

.boxdetail{

    width:100%;

	width: auto;

	height: auto;

	padding:10px;

	border-radius: 5px;

	background:#151515;

    background-color:rgba(21,21,21,0.8);

	border:#603721 1px solid;*

    box-shadow: #000 0px 0px 5px;

	margin-top:0px;

	margin-bottom:10px;

    padding-bottom: 10px;

    overflow: hidden;

    color: #ccc;

    position: relative;

    z-index:5;

}



.infooter{

    width: 1000px;

    margin: auto;

}

.toppic{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding:10px;

    padding-top: 20px;

    margin-bottom: 10px;

    /*padding-left: 15px;*/

	line-height:20px;

	font-family:true-thai;

	font-size:30px;

	/*color: #92278f;*/

    color: #000;



	text-align:left;

}

.toppic>i{

    font-size: 25px !important;

}

.txtemail{

	/*border-bottom:#e5e5e5 1px solid;*/

	width:100%;

	height:auto;

	padding-top:10px;

	padding-bottom:10px;

    padding-left: 10px;

	line-height:20px;

	font-family:true-thai;

	font-size:34px;

	color: #8dc63f;

	text-align:left;

    background: #212121;

}

.txtemail a{

    color: #8dc63f;

    text-decoration: none;

}

.txtemail a:hover{

    color: #03b337 !important;

    text-decoration: none;

}

.txtemail a>i {

    font-size: 25px !important;

}

.txtcall{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding-top:10px;

	padding-bottom:10px;

    padding-left: 10px;

	line-height:25px;

	font-family:true-thai;

	font-size:35px;

	color: #333;

	text-align:center;

    font-weight: bold;

    background: #ebebeb;

}

.txtcall>i {

    font-size: 25px !important;

}

.maintoppic{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding-top:11px;

	padding-bottom:11px;

    padding-left: 0px;



	line-height:20px;

	font-family:true-thai;

	font-size:25px;

	color: #333;

	text-align:center;

    font-weight: bold;

}

.maintoppic span{

    font-size: 12px;

    margin-top:6px;

    display: block;

}



.wtoppic{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding-top:11px;

	padding-bottom:0px;

    padding-left: 10px;



	line-height:40px;

	font-family:true-thai;

	font-size:40px;

	color: #00b836;

    /*color: #333;*/

	text-align:left;

    /*font-weight: bold;*/

}

.wtoppic >i{

    font-size: 25px !important;

    margin-top:6px;

    display: block;

}



.txtregis{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding-top:10px;

	padding-bottom:11px;

    padding-left: 10px;

    margin-bottom: 10px;

	line-height:20px;

	font-family:true-thai;

	font-size:30px;

	color: #6bba00;

	text-align:left;

    /*font-weight: bold;*/

}

.txtregis span{

    font-size: 12px;

    margin-top:6px;

    display: block;

}



.txtnvdo{

	border-bottom:#e5e5e5 1px solid;

	width:100%;

	height:auto;

	padding-top:10px;

	padding-bottom:11px;

    padding-left: 0px;

    margin-bottom: 10px;

	line-height:25px;

	font-family:true-thai;

	font-size:30px;

	color: #fff;

	text-align:left;

    /*font-weight: bold;*/

}

.txtnvdo span{

    font-size: 12px;

    margin-top:6px;

    display: block;

}



.bg-regisbox{

    background: url(../images/bg-regis.png) #fff top left no-repeat;

    height: auto;

    width: 100%;

    padding: 15px;

    padding-bottom: 20px;

    line-height: 18px;

}

.vdo{

    width: 500px;

    height: 281px;

    float: left;

    background: url(../images/bg-vdo.png) #000 top left no-repeat;

}

.bg-nvdo{

    width: 220px;

    height: 281px;

    overflow: hidden;

    padding: 15px;

    background: #00b937;

    float: left;

    line-height: 18px;

}

.slide{

    width: 720px;

    height: 350px;

    overflow: hidden;

    padding: 0;

    margin: 0;

}

.fb{

    width: 280px;

    height: auto;

    min-height: 225px;

    float: left;

    position: relative;

}

.txt{

    font-family: true-thai;

    font-size: 25px;

    line-height: 20px;

    font-weight: bold;

}

.sub-h{

	height:45px;

	padding:5px;

	background:#f5f5f5;

	color:#333;

	vertical-align:middle;

	line-height:35px;

	margin-bottom:20px;

	padding-left:10px;

	padding-right:10px;

}

.sub-h div>a{

    color: #333 !important;

}

.btr{

	margin-bottom:10px;

	height: 30px;

	width:100%;

    float: left;

    padding-left: 10px;

}

.btr:hover{

	padding-left:20px;

}



.btr a{

	color:#777;

    font-size:20px;

    line-height: 45px;

    font-family: true-thai;

    display: block;

}

.btr a:hover{

	color:#000;

}

.btr a i{

    font-size: 14px;

    line-height: 30px;

}

.line-menu{

	border-bottom:#e5e5e5 1px solid;

	width:98%;

	height:2px;

    float: left;

}

.innerbox{

    width: 100%;

    padding: 15px;

    line-height: 20px;

    font-size: 14px;

}

.btl{

	margin-bottom:10px;

	height: 30px;

	width:100%;

    float: left;

    padding-left: 0px;

}

.btl:hover{

	padding-left:10px;

}

.btl span{

	font-size:16px;

}

.btl a{

	color:#fff;

    line-height: 45px;

}

.btl a:hover{

	color:#0072bc;

}

.btl a i{

    font-size: 26px;

    line-height: 30px;

}

/*******************************************/

/*::-webkit-scrollbar {

    width: 12px;

}

 

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

    border-radius: 10px;

}

 

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}*/

/****************************/

.w400{

	width:400px !important;

}

.box{

	background:#fff;

	width: 100%;

	border-radius:5px;

	padding: 10px;

	margin:auto;

	box-shadow:#000 0 0 5px;

    margin-bottom: 10px;

}

.login{

	width: 300px;

	margin: 10% auto;

}

.footcp{

	width: 100%;

	margin:auto;

	text-align:center;

	height:30px;

	line-height:30px;

	color:white;

}



.back-to-top {

    position: fixed;

    /*bottom: 250px;*/
	bottom:20px;

    right: 20px;

    text-decoration: none;

    color: #000000;

    background-color: rgba(235, 235, 235, 0.80);

    font-size: 40px;

    line-height: 10px;

    

    padding-top: 0px;

    padding-bottom: 8px;

    padding-left: 5px;

    padding-right: 2px;

    

    display: none;

	border-radius:5px;

	text-align:center;

    z-index: 50;

}



.back-to-top:hover {    

    background-color: rgba(135, 135, 135, 0.50);

}

/*******************************/

ul#freedom {

	list-style:none;

		padding:0;

	margin:0;	

	width:100%;

	margin-left:10px;

}

ul#freedom li {

	border-radius:20px;

	font-family:true-thai;

	font-size:24px;

	background:#fff;

	color:#999;

	width:130px;

	display:block;

	padding-left:10px;

	margin-bottom:10px;

}

ul#freedom li:hover{

	border-radius:20px;

	font-family:true-thai;

	font-size:24px;

	background:#00aeef;

	color:#fff;

	width:130px;

	display:block;

	padding-left:10px;

	margin-bottom:10px;

}

ul#freedom li.active {

	border-radius:20px;

	font-family:true-thai;

	font-size:24px;

	background:#00aeef;

	color:#fff;

	width:130px;

	display:block;

	padding-left:10px;

	margin-bottom:10px;

}

ul#freedom li span{

	font-size:14px;

}



/********************************/

.news-box{

	float: left;

    width: 390px;

    height: 220px;



}

.boxnews a{

	width:315px;

	height:320px;

	float: left;

	background: url(../images/asfalt.png) ;

	border:#28292c 1px solid;

	box-shadow:#000 1px 1px 1px;

	margin-right:10px;

	margin-left:5px;

	margin-top:10px;

	margin-bottom:5px;

	padding: 10px;

}

.boxnews2 {

	width:100%;

	height:160px;

	float: left;

	/*background: url(../images/asfalt.png) ;

	border:#28292c 1px solid;

	box-shadow:#000 1px 1px 1px;*/

	margin:0px;

	padding: 10px;

	padding-bottom:25px;

	border-bottom: #e5e5e5 1px dashed;

}

.boxnews2:hover{

	background:#f5f5f5;

}

.pagenav{

	width:100%;

	float:left;

	line-height:20px;

	padding:10px;

}

.col-news-left{

	width:280px;

	height: 150px;

	float:left;

	margin-right:10px;

}

.col-news-right{

	width:440px;

	height:150px;

	float:left;

	padding:10px;

}



/**********************/

.boxnews3 {

	width:100%;

	height:170px;

	float: left;

	/*background: url(../images/asfalt.png) ;

	border:#28292c 1px solid;

	box-shadow:#000 1px 1px 1px;*/

	margin:0px;

	padding: 10px;

	padding-bottom:25px;

	border-bottom: #e5e5e5 1px dashed;

}

.boxnews3:hover{

	background:#f5f5f5;

}

.boxnews3 img{

    border: #bfbfbf 1px solid;

}

.col-news3-left{

	width:280px;

	height: 160px;

	float:left;

	margin-right:10px;

}

.col-news3-right{

	width:205px;

	height:160px;

	float:left;

	padding:10px 10px 10px 0px;

}



/************************/



/**********************/

.boxnews4 {

	width:100%;

	height:105px;

	float: left;

	/*background: url(../images/asfalt.png) ;

	border:#28292c 1px solid;

	box-shadow:#000 1px 1px 1px;*/

	margin:0px;

	padding: 10px;

	padding-bottom:25px;

	border-bottom: #e5e5e5 1px dashed;

}

.boxnews4:hover{

	background:#f5f5f5;

}

.boxnews4 img{

    border: #bfbfbf 1px solid;

}

.col-news4-left{

	width:170px;

	height: 90px;

	float:left;

	margin-right:10px;

}

.col-news4-right{

	width:325px;

	height:90px;

	float:left;

	padding:10px 10px 10px 0px;

}



/************************/



.boxnews {

	width:350px;

	height:320px;

	float: left;

	/*background: url(../images/asfalt.png) ;*/

	/*border:#28292c 1px solid;*/

	/*box-shadow:#000 1px 1px 1px;*/

	margin-right:10px;

	margin-left:5px;

	margin-top:10px;

	margin-bottom:5px;

	padding: 10px;

}

.boxnews:hover{

	background:#000;

}



.boxnews a img{

	border:1px #000 solid;

	

}

.boxnews a:hover img{

	border:1px red solid;

}

.news-title{

	font-family: true-thai;

	font-size:24px ;

	color:#92278f;

	line-height:20px;

	margin-top:-10px;

	margin-bottom:-10px;

	/*font-weight:bold !important;*/

}



.news-detail{

	font-size:12px !important;

	color:#333 !important;

}

.readmore-news{

	margin-top:10px;

	font-size:11px;

	color: #898989 !important;

}

.readmore-news a{

	color: #898989 !important;

}

.readmore-news a:hover{

	color: #898989 !important;

	text-decoration:underline !important;

}

.readmore {

	color: #1896d3;

	font-family: true-thai;

	font-size:20px;

	float:right;

	line-height:30px;

}

.readmore:hover{

	color:#333;

}

.readmore span{

	font-size:14px;

}

/*****************************************/



/*****************************/



.regisbox{

    /*background:#000;*/

	width: 100%;

	border-radius:0px;

	padding: 0px;

	margin:auto;

	/*box-shadow:#999 0 0 5px;*/

    color: #fff !important;

    float: left;

    padding-bottom: 20px;

}

.rule{

	width:100%;

	height: 350px;

	padding:10px;

	margin: auto;

	overflow: auto;



}

.h-regis-on{

	float:left;

	width: 230px;

	text-align:center;

}

.h-regis-off{

	float:left;

	opacity: 0.2;

	 filter: alpha(opacity=20);

	 width: 230px;

	 text-align:center;

}



/****************************/

.clearfix{

    clear: both;

}

.listnews{

    line-height:31px;

    border-bottom:#e5e5e5 1px dashed;

    color:#333;

    width:100%;

    padding-left:10px;

    padding-right:10px;

}

.listnews:hover{

    background: #f5f5f5;

}

.listtype{

    width:60px;

    text-align:left;

    float:left;

    padding-top:5px;

}

.listtype2{

    width:20px;

    text-align:left;

    float:left;

    padding-top:10px;

}



::-webkit-scrollbar {

    width: 5px;

}

::-webkit-scrollbar-track {

    background-color: #eaeaea;

    border-left: 1px solid #ccc;

}

::-webkit-scrollbar-thumb {

    background-color: #acacac;

}

::-webkit-scrollbar-thumb:hover {

	background-color: #898989;

}



.chat{

    position: fixed;

    bottom: 0px;

    right: 20px;

    width: 200px;

    height: 200px;

    color: #FFF;

    font-size: 14px;

    z-index: 99;

}

.menu-news{

    position: fixed;

    float: left;

    margin-left: 800px;

    margin-top: 200px;

    z-index: 10;

    width: 75px;

    height: auto;

}

.menu-title{

    margin-left: 10px;

    margin-bottom: 10px;

}

.titlemenu{

    font-family: true-thai;

    font-size: 40px;

    line-height: 20px;

}

.titlesub{

    font-family: true-thai;

    font-size: 18px;

}





/************************************/

.dropdown-submenu{position:relative;}

.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}

.dropdown-submenu:hover>.dropdown-menu{display:block;}

.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}

.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}

.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}