@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700|Kanit:300,400,500,700');
@import "./jquery-ui.min.css";
@import "./bootstrap.min.css";
@import "./font-awesome.min.css";
@import "./owl.carousel.min.css";
@import "./fancybox.css";
@import "./data.table.css";
@import "./default.css";
@import "./fonts.css";

html,body{font-family: "Kanit", sans-serif;padding:0;margin:0;font-weight: 300;opacity: 1;transition: .3s opacity;min-height: 100%;color: #000}
body.loading{opacity: 0;}
html,body{max-width: 100%;overflow-x: hidden;}
ul,li{margin:0;padding: 0;list-style: none}
iframe,img{max-width: 100%;border:0;}
h1,h2,h3,h4,h5,h6{font-family: "Kanit", sans-serif;font-weight: 300;line-height: initial;}
h1{font-size: 22px;}
h2{font-size: 22px;}
h3{font-size: 17px;}
a{transform: .3s all;}
a:hover{text-decoration: none;transform: .3s all;}
.bg-green{background: #6ca148;}
.mb2{margin-bottom: 2px;}
.container{width: 1170px;max-width: 100%;}
.btn-primary{color: white;font-size: 18px;border-radius: 30px;background:#60983a;padding: 5px 30px;border:1px solid #416d24;font-weight: 300;}
.btn-primary:hover,.btn-primary:focus{background:#416d24;border-color: #60983a}
.pagination li,.pagination li>a{font-family: Arial,sans-serif;font-size: 14px;display: inline-block;}
.pagination li{float: left;}
.pagination>li>a, .pagination>li>span{color: #393939;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background: #60983a;border-color: #60983a}
.nav-tabs>li>a{font-size: 16px;color: #333;font-weight: 400;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{color: #036;}
#pagination{padding-top: 15px;border-top: 1px solid #eee;margin-top: 30px;}
#pagination.no-border{border: 0;margin-top: 0;}
.btn-previous,.btn-next{border:1px solid #ccc;padding: 5px 25px;color: #333;font-size: 16px;font-weight: 400;border-radius: 4px;}
.btn-previous:hover,.btn-next:hover,.btn-previous:focus,.btn-next:focus{text-decoration: none;color: #333;background:#eee;}
#gotop{position: fixed;bottom: 30px;right: 30px;background: #60983a;color: white;font-size: 20px;border-radius: 4px;width: 34px;height: 34px;text-align: center;display: none;padding-top: 2px;}
#left-bar-button{display: none;white-space: nowrap;}
#menu-bars-button{display: none;}
.overlay{background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;display: none;}
.cc33{color: #c33;}
.warp-recapcha{max-height: 75px;}
.g-recaptcha{display: inline-block;}
.modal{z-index: 11111;}
textarea{min-height: 120px;border-radius: 0 !important;}
input[type='text'],input[type='email'],input[type='password']{font-size: 14px;font-family: Arial,sans-serif;line-height: initial;color:#333;border:1px solid #ccc;border-radius: 0;}
button[type='submit']{font-size: 18px;font-family: "Kanit",sans-serif;color: white;text-align: center;padding: 5px 25px;border-radius: 4px;background: #60983a;border-color: #60983a;min-width: 180px;transition: .3s all;font-weight: 300;}
button[type='submit']:hover,button[type='submit']:focus,button[type='submit']:active{background: #78b54f;color: white;border-color: #60983a;transition: .3s all;outline: none !important;}
#termModal h4{font-size: 20px;line-height: 20px;}
#termModal .modal-body{font-family: Arial,sans-serif;font-weight: normal;font-size: 13px;color: #111;}
#termModal .modal-body li{margin-bottom: 5px;}
#termModal button[type='button']{font-size: 18px;line-height: 18px;}
.fa-download{padding: 9px; border-radius: 50%; width: 30px; height: 30px; background: #60983a; color: white;line-height: 14px;}
.fa-download:hover{background: #5cb42a;}
.ck-editor__editable.ck-rounded-corners, .ck-rounded-corners .ck-editor__editable{padding: 10px 15px;}
.ck-editor__editable{min-height: 150px;background: #fff;}
.nowrap{white-space: nowrap;}
#successModal .modal-header{padding: 4px 15px 0;background: #fff;color: #333;border: 0;text-align: center;}
#successModal .modal-header .fa-check-circle{font-size: 50px;margin: 10px auto 0;color: green;}
#successModal .modal-header h4{font-size: 24px;color: green;text-transform: uppercase;padding: 0;}
#successModal .modal-title{font-size: 25px;color: green;}
#successModal .modal-content{border-radius: 0;box-shadow: none;border: 0;background: #fff;padding-top: 0;}
#successModal .modal-body{padding-top: 0;}
#successModal .modal-content p{color: #999;font-size: 14px;font-family: Arial, sans-serif;text-align: center;}
#successModal .modal-header .close {font-size: 35px; position: absolute; top: 0; right: 10px; }

#warningModal .modal-header{padding: 4px 15px 0;background: #fff;color: #333;border: 0;text-align: center;}
#warningModal .modal-header .fa-times-circle{font-size: 50px;margin: 10px auto 0;color: #c33;}
#warningModal .modal-header h4{font-size: 24px;color: #c33;text-transform: uppercase;padding: 0;}
#warningModal .modal-title{font-size: 25px;color: green;}
#warningModal .modal-content{border-radius: 0;box-shadow: none;border: 0;background: #fff;padding-top: 0;}
#warningModal .modal-body{padding-top: 0;}
#warningModal .modal-content p{color: #999;font-size: 14px;font-family: Arial, sans-serif;text-align: center;}
#warningModal .modal-header .close {font-size: 35px; position: absolute; top: 0; right: 10px; }

/* HEADER 
================================ */
header #google_translate_element{position: absolute;top: 15px;right: 15px;z-index: 10000}
header nav{display: block;}
header nav ul{text-align: right;background: #60983a;
}
header nav ul>li{display: inline-block;float:none;background: transparent;}
header nav ul>li:first-child{background:transparent;border-right: 0;margin-right: 36px;margin-left: 2px;float: left;}
header nav ul>li:first-child>a{padding:4px 0;}
header nav ul>li:first-child>a img{width: 50px;display: inline-block;vertical-align: middle;margin-right: 5px;margin-left: 5px;}
header nav ul>li:first-child>a>span{display: inline-block;vertical-align: middle;text-align: left;color: white}
header nav ul>li:first-child>a>span>span{display: block;}
header nav ul>li>a{display: block;font-size: 16px;font-weight: 300;color: white;padding: 16px 12px;}
header nav ul>li.active>a,header nav ul>li>a:hover,header nav ul>li>a:focus{color: #000;text-decoration: none !important;}
header nav ul>li>a:focus,header nav ul>li>a:active{text-decoration: none;color: #000;}

header #banner{background: #c7f1fc; background: -moz-linear-gradient(top, #c7f1fc 0%, #eaf7f9 15%, #f4f9f9 100%); background: -webkit-linear-gradient(top, #c7f1fc 0%,#eaf7f9 15%,#f4f9f9 100%); background: linear-gradient(to bottom, #c7f1fc 0%,#eaf7f9 15%,#f4f9f9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7f1fc', endColorstr='#f4f9f9',GradientType=0 );background-size: 0;}
header #information{background: #1479d5;color:#000000;font-size: 13px;padding: 2px 0 5px;line-height: initial;position: relative;text-align: center;font-weight: normal;position: relative;overflow: hidden;font-family: Arial,sans-serif;letter-spacing: 1px;border-top: 1px solid #0235ff}
header #information h1{color: #ffffff;margin: 0;}
header.stick nav{position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;right: 0;margin: 0 auto;border-top: 0;box-shadow:0 3px 10px -2px rgba(0,0,0,.5);background: rgba(95,152,58,1);
background: -moz-linear-gradient(-45deg, rgba(95,152,58,1) 0%, rgba(134,219,84,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(95,152,58,1)), color-stop(100%, rgba(134,219,84,1)));
background: -webkit-linear-gradient(-45deg, rgba(95,152,58,1) 0%, rgba(134,219,84,1) 100%);
background: -o-linear-gradient(-45deg, rgba(95,152,58,1) 0%, rgba(134,219,84,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(95,152,58,1) 0%, rgba(134,219,84,1) 100%);
background: linear-gradient(135deg, rgba(95,152,58,1) 0%, rgba(134,219,84,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f983a', endColorstr='#86db54', GradientType=1 );}
header.stick nav ul{width: 1170px;margin: 0 auto;max-width: 100%;background: transparent;}

header.structure-heading h1>img{width: 60px;display: inline-block;vertical-align: middle;margin-right: 10px;}
header.structure-heading h1>span{display: inline-block;vertical-align: middle;text-align: left;font-size: 22px;font-weight: 300;c}
header.structure-heading h1>span>span{display: block;font-size: 16px;}

body.header3 header{position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;}
body.header3{padding-top: 80px;overflow: initial;}

/* MAIN 
================================ */
body{ background: #25740c url(../img/bg-position.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;background-attachment: fixed;}
main #management{margin-bottom: 30px;}
main #management h4{font-size: 24px;color:#888;text-align: center;margin-bottom: 0;letter-spacing: 1px;}
main #management h4+p{font-size: 20px;color:#999;text-align: center;}
main #management .btn{width: 100%;}
main #management img{width: 100%;}
main #content{padding-top: 15px;}
main#wrap-structure{white-space: nowrap;background: #fff;cursor: -webkit-grab}
main#wrap-structure>div{width: fit-content;margin: 0 auto;}
main#wrap-structure h1>span{display: inline-block;background: #2c90ee;color: #000000;border: 1px solid #1682e1;padding: 5px 50px;border-radius: 7px;font-size: 20px;}
main .heading{background: #a8cc3f;color:#38840c;;padding: 7px 15px;margin: 0;background-size: cover;background-position: center center;background-repeat: no-repeat;margin-bottom: 10px;position: relative;}
main h2.heading{font-size: 20px;}
main .heading:after{content:'';top: 0;left: 0;position: absolute;background: url('../img/bg-nav.png');width: 100%;height: 100%;background-size: cover;opacity: .5}
main .heading>span{position: relative;z-index: 1;}
main .heading>span>i{display: inline-block;vertical-align: middle;margin-right: 5px;background: white;border-radius: 50%;font-size: 12px;padding: 5px;width: 22px;text-align: center}
main .heading>span>span{display: inline-block;vertical-align: middle;}
main .content{border:2px solid #eee;padding: 15px;margin-bottom: 20px;}
main .image img{width: 100%;transition: .3s all;transform: scale(1);}
main .image{display: block;position: relative;overflow: hidden;}
main .image:before{content:'';position: absolute;top: 50%;left: 0;right:0;margin:0 auto;width: 0;height: 0;background: rgba(242, 241, 249, 0.17);transition: .3s all;visibility: hidden;z-index: 10;}
main .image:hover:before{width: 100%;height: 100%;visibility: visible;transition: .3s  all;top: 0;}
main .image:hover img{transform: scale(1.1);transition: .3s all;}
main .list-style1 .list{border-bottom: 1px solid #eee;margin-bottom: 15px;margin-top: 15px;padding-bottom: 15px;}
main .list-style1 .list:last-of-type{border-bottom: 0;padding-bottom: 0;}
main .list-style1 .list h3{font-size: 18px;color: #333;font-weight: -00;line-height: 22px;margin: 0 0 10px;}
main .list-style1 .list h3>a{color: #333;}
main .list-style1 .list h3>a:hover{text-decoration: underline;color: #036;}
main .list-style1 .list h3+p{font-size: 13px;font-family: Arial,sans-serif;margin: 0;color: #666;}
main .list-style1 .list .read{font-size: 13px;font-family: Arial;color: #999;margin: 10px 0 0;}
main .list-style2 .grid{margin: 0 -10px;}
main .list-style2 .item{width: 33.33%;padding: 10px;}
main .list-style2 .item img{width: 100%;}
main .list-style2 .item p{font-size: 16px;font-weight: 300;margin: 5px 0 0;text-overflow: ellipsis;overflow:hidden;height: 45px;}
main .list-style2 .item p>a{color: #333;}
main .list-style2 .item p>a:hover{text-decoration: underline;}
main .list-style3 .grid{margin: 0 -10px;}
main .list-style3 .item{width: 50%;padding: 10px;}
main .list-style3 .item h3{font-size: 16px;color: #333;font-weight: 400;line-height: 20px;margin: 0 0 5px;text-overflow: ellipsis;overflow:hidden;height: 40px;margin-bottom: 10px;}
main .list-style3 .item h3>a{color: #333;}
main .list-style3 .item h3>a:hover{text-decoration: underline;}
main .list-style3 .item .description{height: 38px;overflow: hidden;}
main .list-style3 .item .date{font-size: 13px;font-family: Arial;color: #999;margin: 0;}
main .list-style3 .item .read{font-size: 13px;font-family: Arial;color: #999;margin: 5px 0 0;}
main .list-style4 .grid{margin: 0 -10px;}
main .list-style4 .item{width: 16.66%;padding: 10px;}

main .tab-content{font-family: Arial,sans-serif;}
main .tab-content ul{margin-top: 15px;}
main .tab-content ul>li>a{color: #036;line-height: initial;}
main .tab-content ul>li{display: block;padding: 5px;}
main .tab-content ul>li>a:before{content:'\f0f6';font-family: "FontAwesome";margin-right: 5px;}
main .tab-content ul>li>a>span{color:#999;font-size: 12px;}
main .tab-content ul>li>a:hover{text-decoration: underline;color: #023;}
main #webboard table{width: 100%;font-family: Arial,sans-serif;font-size: 14px;}
main #webboard table th{font-family: "Kanit";font-size: 15px;font-weight: 300;}
main #webboard table tr>td>a{color: #036;font-weight: normal;}
main #webboard table tr>td>a:hover{color: #036;text-decoration: underline;}
main #webboard table tr>td:last-child{text-align: right;width: 1%;white-space: nowrap;font-size: 13px;color: #666}
main #webboard table tr>th:last-child{text-align: right;width: 1%;white-space: nowrap;}
main #webboard table tr>th:nth-child(3){text-align: center;width: 1%;white-space: nowrap;}
main #webboard table tr>td:nth-child(3){text-align: center;width: 1%;white-space: nowrap;font-size: 13px;color: #666}
main #webboard table tr>th:nth-child(2){text-align: center;width: 1%;white-space: nowrap;}
main #webboard table tr>td:nth-child(2){text-align: center;width: 1%;white-space: nowrap;font-size: 13px;color: #666}
main #banners img{width: auto;margin: 0 auto}
main #banners ul>li{margin-bottom: 5px;text-align: center;}
main #page .content>h2{font-size: 24px;line-height: 30px;margin: 0 0 5px;}
main #page .content>ul{margin-bottom: 15px;display: inline-block;border-bottom: 1px solid #60983a;padding-bottom: 2px;}
main #page .content>ul>li{display: inline-block;vertical-align: middle;font-family: Arial,sans-serif;font-size: 13px;color: #999}
main #page .content>ul>li:first-child{margin-right: 20px;}
main .downloads{font-family: Arial,sans-serif;}
main .downloads table tr>th{color: #333;font-family: "Kanit";font-size: 17px;font-weight: 300;}
main .downloads table tr>th:not(:nth-child(2)),main .downloads table tr>td:not(:nth-child(2)){width: 1%;white-space: nowrap;text-align: center;}
main .downloads h3{font-size: 20px;margin: 0 0 5px;}
main .downloads .text-link{color: #333;}
main .downloads .text-link:hover{color: #333;text-decoration: underline;}
main #webboard .dataTables_length{font-size: 13px;font-family: Arial;}
main #webboard input[type='search']{width: 180px !important;border:1px solid #ccc;border-radius:0;}
main #webboard label{font-size: 13px;font-family: Arial;}
main #webboard .dataTables_info,main #webboard .dataTables_paginate{font-size: 13px;font-family: Arial;}
main #webboard-form{font-family: Arial,sans-serif;margin-top: 30px;border-top: 2px dashed #ccc;}
main #webboard-form.mt0{margin-top: 0;}
main #webboard-form.no-border{border:0;}
main #webboard-form h2{font-size: 28px;}
main #webboard-form label{font-size: 16px;font-family: "Kanit";line-height: 24px;margin-bottom: 0;font-weight: 400;}
main #webboard-form label em{color:#c33;font-family: arial;font-size: 11px;font-weight: normal;}
main #webboard-form form{padding: 30px 20px;background: #f6f6f6;}
main #webboard-form h3{margin-top: 0;}
main #webboard-form .conditions li{margin-bottom: 5px;}
main #contact-form{font-family: Arial,sans-serif;margin-top: 30px;}
main #contact-form label{font-size: 15px;font-family: "Kanit";line-height: 17px;margin-bottom: 0;font-weight: 400;}
main #contact-form label em{color:#c33;font-family: arial;font-size: 11px;font-weight: normal;}
main #contact-form form{padding: 30px 20px;background: #f6f6f6;}
main #contact-form h3{margin-top: 0;}
main #contact-form .conditions li{margin-bottom: 5px;}
main #map iframe{border:0;width: 100%;height: 450px;}
main #address{font-size: 15px;color: #111;font-weight: 300;text-align: center;}
main #address p{line-height: 22px;margin: 0}
main #address p a{font-family: Arial,sans-serif;font-size: 14px;}
main .select-child-page{font-family: Arial,sans-serif}
main .select-child-page select{padding: 2px;max-width: 200px;}
main .structure-style{text-align: center;}
main .structure-style>.col1{width: 100%;float: left;}
main .structure-style>.col2{width: 50%;float: left;}
main .structure-style>.col3{width: 33.33%;float: left;}
main .structure-style>.col4{width: 25%;float: left;}
main .structure-style>.col5{width: 20%;float: left;}
main .structure-style .structure{width: 200px;display: inline-block;max-width: 100%;padding: 5px;}
main .structure-style a{display: block;border:4px solid #eee;margin-bottom: 15px;}
main .structure-style h3{font-size: 18px;line-height: 20px;margin: 0;color: #60983a;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
main .structure-style h3+p{font-family: Arial,sans-serif;font-size: 14px;height: 45px;overflow:hidden;}
main .content-topic{font-family: Arial,sans-serif;color: #111;}
main .content-topic .post{font-size: 13px;font-family: Arial, sans-serif;color: #111;}
main .content-topic{background: #f5ffea;padding: 20px;}
main .content-topic>h2{font-size: 21px;line-height: 25px;margin: 0 0 5px;}
main .content-topic>ul{margin-bottom: 15px;display: inline-block;border-bottom: 1px solid #60983a;padding-bottom: 2px;}
main .content-topic>ul>li{display: inline-block;vertical-align: middle;font-family: Arial,sans-serif;font-size: 13px;color: #666}
main .content-topic>ul>li:first-child{margin-right: 20px;}
main .content-topic .head-text{font-family: "Kanit";margin: 15px 0 0;}
main .content-topic .message{padding: 15px;background: #fff;font-family: Arial,sans-serif;font-size: 14px;color: #333;line-height: initial;}
main .content-topic .comments{padding-top: 20px;border-top: 2px solid #7cb754;margin-top: 30px;}
main .content-topic .comments h3{margin: 0}
main .content-topic .comment{padding: 15px 15px 40px;background: #fff;font-family: Arial,sans-serif;font-size: 14px;color: #333;line-height: initial;margin-bottom: 25px;border:2px solid #a6d973;position: relative;}
main .content-topic .comment .by{margin-bottom: 10px;}
main .content-topic .comment .by-admin{color: #60983a}
main .content-topic .comment .no{padding: 5px 15px;margin-top: 15px;font-size: 12px;color: #999;position: absolute;bottom: -10px;left: 0;width: 100%;text-align: right;}
main .no-reponsive-structure {text-align: center;}
main .no-reponsive-structure .structure{margin: 0 10px;position: relative;}
main .no-reponsive-structure .structure>div.clearfix{width: 250px;display: inline-block;text-align: center;padding: 10px;border: 1px solid #80c4ff;border-radius: 7px;margin-bottom: 30px;background: #daeeff;}
main .no-reponsive-structure .structure .structure>div.clearfix{display: block;}
main .no-reponsive-structure .row.one>.structure>div.clearfix:after{content: ''; background: #469bec; width: 2px; height: 10px; position: absolute; bottom: 10px; left: 0; right: 0; height: 20px; margin: 0 auto;}
main .no-reponsive-structure .row>.structure .structure>div.clearfix:last-of-type:after{display: none;}
main .no-reponsive-structure .row>.structure .structure>div.clearfix:not(:last-of-type):after{bottom: -40px;content: ''; background: #44a0f7; width: 2px; height: 10px; position: absolute;left: 0; right: 0; height: 40px; margin: 0 auto;}
main .no-reponsive-structure .row>.structure .structure>div.clearfix:after{display: none;}
/*main .no-reponsive-structure .row>.structure .structure:before{display: }*/
main .no-reponsive-structure .row.many>.structure:before{content: ''; background: #44a0f7; width: 10px; height: 2px; position: absolute; top: -21px; width: 101%; left: 0; right: 0; margin: 0 auto;}
main .no-reponsive-structure .row.many>.structure:after{content: ''; background: #44a0f7;top: -21px;left: 0;right: 0;width: 2px;height: 22px;margin: 0 auto;position: absolute;}
main .no-reponsive-structure .row.many>div.structure:first-of-type:before{width: 51%;left: 50%;background: #44a0f7}
main .no-reponsive-structure .row.many>div.structure:last-of-type:before{width: 50%;right: 50%;background: #44a0f7}
main .no-reponsive-structure h2+div.clearfix{position: relative;}
main .no-reponsive-structure h2+div.clearfix:before{content:'';background: #44a0f7;width: 2px;height: 20px;position: absolute;top:100%;left: 0;right: 0;margin: 0 auto;}
main .no-reponsive-structure .row.one>.structure:before{content:'';position: absolute;left: 0;right: 0;height: 22px;width: 2px;top: -22px;background: #44a0f7;margin: 0 auto}
main .no-reponsive-structure .structure .row.one>.structure:before{height: 40px;top: -40px;}
main .no-reponsive-structure .structure.no-header .row.one>.structure:before{display: none;}
main .no-reponsive-structure .structure.no-header >div.clearfix:before{display: none;}
/*main .no-reponsive-structure .row>div.structure>div.clearfix:after{content: '';background: red;width: 10px;height: 10px;position: absolute;bottom: -10px;left: 0}*/
main .no-reponsive-structure .structure .structure>div.clearfix{position: relative;}
main .no-reponsive-structure>div.row.one:first-of-type>div.structure:before{display: none;}


main .no-reponsive-structure h2{margin:0;line-height: 23px;font-size: 24px;}
main .no-reponsive-structure h4{margin:0;line-height: 21px;font-size: 22px;}
main .no-reponsive-structure h2>span{padding: 7px 10px; border-radius: 7px; background: #d7b7ff; color: #000; display: block; font-weight: 300; font-size: 16px; line-height: 21px;margin:0 auto; margin-bottom: 10px; max-width: 200px;border: 1px solid #bcbcbc;white-space: normal;}
main .no-reponsive-structure h4>span{padding: 7px 10px; border-radius: 7px; background: #d7b7ff; color: #000; display: block; font-weight: 300; font-size: 16px; line-height: 21px;margin:0 auto; margin-bottom: 10px; max-width: 200px;border: 1px solid #bf8aff;white-space: normal;}
main .no-reponsive-structure h3{margin: 0 0 5px;line-height: 18px;font-size: 16px;white-space: normal;}
main .no-reponsive-structure img{margin-bottom: 10px;}
main .no-reponsive-structure h3 ~p{margin: 0;font-size: 13px;font-family: Arial, sans-serif;color: #333;white-space: normal;}
main .no-reponsive-structure .row{padding: 10px 30px 0}
main .no-reponsive-structure .row>div{float: none;margin: 0 5px;padding: 0;display: inline-block;vertical-align: top;}
/*main .no-reponsive-structure .col1>div{width: 100%;}
main .no-reponsive-structure .col2>div{width: 50%;}
main .no-reponsive-structure .col3>div{width: 33.33%;}
main .no-reponsive-structure .col4>div{width: 25%;}
main .no-reponsive-structure .col5>div{width: 20%;}
main .no-reponsive-structure .col6>div{width: 16.66%;}*/
main .no-reponsive-structure .structure img{width: 180px;border: 1px solid #fff;}
main .no-reponsive-structure .row>div.structure{padding: 0  35px;margin: 0}
main .no-reponsive-structure .structure .structure>div.clearfix{width: 200px;border: 1px solid #80c4ff; padding: 10px;margin: 0 0 30px;max-width: 100%;background: #daeeff;}
/*main .no-reponsive-structure .structure .structure>div.clearfix h3{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
main .no-reponsive-structure .structure .structure>div.clearfix p{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}*/


main aside>div#menus{padding-bottom: 10px;border-top: 4px solid #60983a;background: #7cb754;}
main aside>div#menus h3{color:#fff;background: #3d6b1e;padding: 6px 15px 9px;margin: 0;background-size: cover;background-position: top center;background-repeat: no-repeat;margin-bottom: 10px;font-size: 18px;}
/*main aside>div#menus ul.menu>li>a{color: #fff;font-size: 22px;font-weight: 600;line-height: initial;display: inline-block;padding: 1px 15px;position: relative;line-height: 22px;}*/
main aside>div#menus ul.menu>li>a{color: #fff;font-family: "Kanit";line-height: initial;display: inline-block;padding: 1px 15px;position: relative;}
main aside>div#menus ul.menu>li>a:before{content:'\f0a9';font-family: "FontAwesome";margin-right: 5px;font-size: 12px;}
main aside>div#menus ul.menu>li>a:hover,main aside>div#menus ul.menu>li>a:focus{color: #2b2b2b;}
main aside>div#menus ul.menu>li>a[href="javascript:void(0)"]:hover,main aside>div#menus ul.menu>li>a[href="javascript:void(0)"]:focus{cursor: text;color: #fff;}
main aside>div#menus ul.menu>li.sub-menu>a:before{content:'\f0ab';}
main aside>div#menus ul.menu ul>li>a{color: #f8f4e9;font-family: "Kanit";display: inline-block;padding-left: 20px;line-height: initial;}
main aside>div#menus ul.menu ul>li>a:hover,main aside>div#menus ul.menu ul>li>a:focus{color: #000;}
main aside>div#menus ul.menu ul>li>a:before{content:'●';margin-right: 5px;font-size: 12px;}
main aside>div#menus .sub-menu h4{padding: 6px 15px; background: #60983a; font-size: 18px; color: #fff;font-weight: 300;text-shadow: 0 1px 0 rgba(255,255,255,.1);position: relative;}
main aside>div#menus .sub-menu.toggle{cursor: pointer;}
main aside>div#menus .sub-menu h4:before{content: "";position: absolute;top: 0;left: -4px;background: #60983a;height: 100%;width: 4px;}
main aside>div#menus .sub-menu h4:after{content: ""; position: absolute; bottom: -4px; left: -3px;transform: rotate(45deg);border: 4px solid blue; border-color: transparent; border-bottom-color: #466f2a;}
main aside>div#menus li:not(.sub-menu) h4{padding: 6px 15px 4px; background: #60983a; font-size: 23px; color: #fff;font-weight: 400;text-shadow: 0 1px 0 rgba(255,255,255,.1);cursor: pointer;position: relative;margin-bottom: 0;}
main aside>div#menus li:not(.sub-menu) h4 a{display: block;color: white;}
main aside>div#menus li:not(.sub-menu) h4 a span{display: inline-block;vertical-align: middle;}
main aside>div#menus li:not(.sub-menu) h4 i{font-size: 14px;margin-right: 5px;background: rgba(0,0,0,.1);display: inline-block;vertical-align: middle;}

main aside>div#menus .sub-menu.toggle{position: relative;}
main aside>div#menus .sub-menu.toggle ul{visibility: hidden;height: 0;overflow: hidden;transition: .3s all;margin: 0;}
main aside>div#menus .sub-menu.toggle.active ul,main aside>div#menus .sub-menu.toggle.active ul{visibility: visible;height: auto;transition: .3s all;}
main aside>div#menus .sub-menu.toggle:not(.active) h4{margin-bottom: 0;}
main aside>div#menus .sub-menu.toggle:after{content:'\f0a9';position: absolute;top: 9px;right: 10px;font-family: "FontAwesome";color: #eee;}
main aside>div#menus .sub-menu.toggle.active:after,main aside>div#menus .sub-menu.toggle.active:after{content:'\f0ab';}
main aside>div#facebook{padding: 15px 0;}
main aside>div#facebook a{background:#4867AA;color: white;display: block;text-align: center;padding: 10px;border-radius: 4px;font-size: 15px;font-weight: 300;}
main aside>div#facebook a:hover{background: #2a4c96;transition: .3s all;}
main aside>div#partners{padding: 15px;background:#393939;margin-bottom: 10px;color: white;border-radius: 4px;}
main aside>div#partners h3{margin: 0 0 5px;}
main aside>div#partners select{font-family: Arial;}
main aside>div#traffic{padding: 15px;background: #f1ffe8;border-radius: 7px;margin-top: 15px;border:2px  solid #d0e8c2;}
main aside>div#traffic h3{margin: 0 0 5px;text-align: center;}
main aside>div#traffic table{width: 100%;font-size: 14px;font-family: Arial;margin-bottom: 15px;}
main aside>div#traffic table tr>td:last-child{text-align: right;}
main aside>div#traffic p{font-family: Arial;color: #999;font-size: 11px;margin: 0;text-align: center;}
main aside>div#inform a{display: block;margin-bottom: 5px;}
main aside>div#inform a img{width: 100%;}
main aside #search-form{position: relative;padding: 15px 45px 15px 15px; background: #a2d56e; margin-bottom: 10px;font-family: Arial,sans-serif;}
main aside #search-form input.form-control{border:1px solid #97ca64;}
main aside #search-form input.form-control:focus{outline: none !important;box-shadow: none !important}
main aside #search-form button[type='submit']{position: absolute;top: 15px;right: 15px;min-width: initial;border-color: transparent;padding: 5px 7px 4px;font-size: 15px;border-radius: 0 4px 4px 0;background: #399206;}





/*footer{background: #393939;}*/
footer>div{text-align: center;font-size: 19px;font-weight: 300;}
footer>div>div{padding-top: 20px;padding-bottom: 10px;}
footer>div>div p{line-height: initial;margin: 0 0 5px;font-size: 14px;color: rgba(255,255,255,.75)}
footer>div>div a{color: inherit;}
footer>div>div a:hover{color: #fff;text-decoration: underline;}


/* OWL CARROUSEL 
================================ */
.owl-dots{left: 0;right: 5px;text-align: right;bottom: 5px;}
.owl-dot{width: 10px;height: 10px;border-radius: 4px;background:rgba(0,0,0,.2);}
.owl-dot.active{background: #5cb42a;}
.owl-carousel .owl-item img{border-radius: 0;}
.owl-carousel .animated{animation-duration:3s;}
.owl-carousel .owl-item {font-family: "Kanit";}
.owl-carousel .owl-item p{position: absolute;bottom: 0;left: 0;width: 100%;padding: 15px 15px 12px;background:rgba(255,255,255,.75);color: #000;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;margin: 0;}


/* TEXT EDITOR DETAIL
================================ */
.detail{font-family: Arial,sans-serif;font-size: 14px;color: #333;margin-bottom: 20px;}
.detail h1{font-size: 28;font-family: "Kanit";font-weight: 300;}
.detail h2{font-size: 26px;font-family: "Kanit";font-weight: 300;}
.detail h3{font-size: 22px;font-family: "Kanit";font-weight: 300;}
.detail h4{font-size: 18px;font-family: "Kanit";font-weight: 300;}
.detail h5{font-size: 17px;font-family: "Kanit";font-weight: 300;}
.detail h6{font-size: 16px;font-family: "Kanit";font-weight: 300;}
.detail ul{list-style: disc;padding-left: 30px;}
.detail li{list-style: disc;}
.detail img{max-width: 100% !important;height: auto !important;}


/* FANCYBOX
================================ */
.fancybox-skin{padding:10px !important;}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span{background: transparent;}
#fancybox-loading:after, .fancybox-close:after{content:'✕';font-size: 30px;}
.fancybox-prev span:after{content:'\f104';font-family: "FontAwesome";font-size: 50px;color: #fff;}
.fancybox-next span:after{content:'\f105';font-family: "FontAwesome";font-size: 50px;color: #fff;}
.fancybox-close{ color: #ccc; top: 10px; right: 15px; text-transform: uppercase; width: auto; height: auto;}
.fancybox-close:hover{text-decoration: none;color: #fff;}
.fancybox-title-float-wrap{bottom: 50px;}
.fancybox-nav span{top: 44%;}
.fancybox-next span{text-align: right;}
.fancybox-overlay{z-index: 10001;}
.fancybox-wrap.fancybox-mobile {z-index: 10002}


@media(max-width: 1299px){
	.container{width: 1020px;max-width: 100%;}
	header.stick nav{width: 1020px;}
	header nav ul > li > a{padding: 19px 8px;font-size: 14px;}
}
@media(max-width: 1023px){
	/*header nav ul > li > a{padding: 13px 9px;}*/
}
@media(max-width: 991px){
	.sm-mb-20{margin-bottom: 20px;}
	footer > .container > div{padding: 15px 0 5px;}
	body{background:#fff;}
	#left-bar-button{display: block; position: fixed; bottom: 6%; left: 0; background: rgb(90, 177, 40); color: #fff; padding: 6px 15px; z-index: 11111; font-size: 17px; border-radius: 0 4px 4px 0;transition: .3s all;outline: none !important;text-decoration: none !important;box-shadow: 2px 5px 6px -3px rgba(0,0,0,.3);border-left: 3px solid #4a8c26}
	#left-bar-button:hover{background: rgba(184, 84, 124, 1);}
	#menu-bars-button{display: block; position: absolute; top: 9px; right: 15px; z-index: 100; font-size: 26px; color: white;outline: none !important;text-decoration: none !important;}
	body:not(.sidebar) #left-bar-button:after{content:'\f105';font-family: "FontAwesome";font-size: 18px;margin-left: 10px;}
	#left-bar{position: fixed;top: 0;left: -300px;width: 250px;overflow-x: hidden;overflow-y: scroll;z-index: 1000;background: white;height: 100%;visibility: hidden;transition: .3s all;}
	body.sidebar #left-bar{left: 0;visibility: visible;transition: .3s all;}
	body.sidebar #left-bar-button{left: 250px;transition: .3s all;border-left: 0;}
	body.sidebar #left-bar-button:before{content:'\f104';font-family: "FontAwesome";font-size: 18px;margin-right: 10px;}
	body.sidebar.stick #left-bar{top: 55px;transition: .3s all;}
	body.sidebar .overlay{display: block;}
	
	header nav{position: relative;}
	header.stick nav{max-width: 100%;}
	header nav ul{position: relative;padding-top: 55px;}
	header nav ul>li:not(:first-child){display: none;}
	header nav ul > li{display: block; float: none; background: #7ab155; border-right: 1px solid #68ab3a; text-align: center; border-top: 1px solid #68ab3a;}
	header nav ul > li:nth-child(2){border-top: 1px solid #68ab3a;}
	header nav ul > li:first-child{float: none; position: absolute; top: -1px; margin: 0;}
	header nav ul > li > a{padding: 9px;}
	body.menu-bar header nav ul>li:not(:first-child){display: block;}
	body.menu-bar #menu-bars-button>i:before{content:'\f00d';}
	main .list-style4 .item{width: 20%;}
	main aside>div#menus .sub-menu h4:before,main aside>div#menus .sub-menu h4:after{display: none;}
	main #management h4{font-size: 20px;}
	main #management h4+p{font-size: 17px;}
	main aside>div#menus h3{font-size: 17px;}
	main aside>div#menus .sub-menu h4{font-size: 16px;}
	footer>div>div p{color: #494949}
}
@media(max-width: 767px){
	main aside>div#menus ul.menu ul>li>a{padding-left: 15px;}
	main .list-style4 .item{width: 25%;}
	main .content-topic{background: transparent;padding: 0;}
	main .downloads{overflow-x: scroll;overflow-y: hidden;}
	main #map iframe{height: 200px;}
	main #contact-form form{padding: 0;background: transparent;}
	.dataTables_wrapper .dataTables_paginate .paginate_button{padding: 1px 8px;}
	main #webboard-form form{padding: 0;background: transparent;}
	h1{font-size: 20px;line-height: 20px;}
	h1.heading{padding: 10px}
	h2{font-size: 20px;line-height: 20px;}
	main #webboard-form h2{font-size: 20px;line-height: 20px}
	.xs-db{display: block;}
	.xs-dn{display: none;}
	#pagination{padding-top: 0;text-align: center;}
	.nav-tabs > li{width: 30%;}
	.nav-tabs > li.active{width: 70%;}
	.nav-tabs > li>a{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding: 7px 10px 5px;}
	.detail h2{font-size: 22px;}
	.detail h3{font-size: 20px;}
	.detail h4{font-size: 18px;}
	.detail h5{font-size: 17px;}
	main #page .content>h2{font-size: 22px;}

	.xs-pb-15{padding-bottom: 15px;}
	#webboard>div.table-responsive{overflow-y: hidden;overflow-x:scroll;}
	#webboard table{min-width: 300px;}
	main .list-style1 .list .image{margin-bottom: 10px;}
	main .list-style2 .item{width: 50%;}
	header #information{padding: 10px;}
	body #left-bar-button{background: rgba(90, 177, 40, .75)}
	body #left-bar-button:hover{background: rgba(90, 177, 40, 1)}
	body.sidebar #left-bar-button{width: 35px;overflow: hidden;color:transparent;}
	body.sidebar #left-bar-button:before{color: white;}
	/*main .list-style3 .item h3{font-size: 22px;}*/
	/*main .list-style1 .list h3{font-size: 22px;}*/
	footer > .container > div p{font-size: 13px;font-weight: normal;font-family: Arial,sans-serif;color: #999;}
	main aside > div#traffic{margin-bottom: 70px;}
	main .structure-style>.col5{width: 50%;}
	main .structure-style>.col4{width: 50%;}
	main .structure-style>.col3{width: 50%;}
	main .content-topic .message{padding: 15px 0}
	.btn-primary{font-size: 16px;}
	header #google_translate_element{opacity: .75;top: 5px;right: 5px}
	#webboard tr>td:first-child{min-width: 180px}
	.container.pb30{padding-bottom: 0;}
}
@media(max-width: 549px){
	main .list-style4 .item{width: 33.33%;}
	main .list-style3 .item{width: 100%;}
	main .list-style2 .item{width: 100%;}
}
@media(max-width: 499px){
	header #banner{min-height: 150px;max-width: 100%;overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;}
	header #banner img{display: none;}
	.structure-style3 .col-xs-4{width: 100%;}
}
@media(max-width: 399px){
	main .list-style4 .item{width: 50%;}
	.structure-style2 .col-xs-6{width: 100%;}
	main .downloads table{max-width: 400px;width: 400px;}
	.g-recaptcha{transform: scale(.75);transform-origin: top left;}
	main .structure-style .structure{width: 100%;}
	main .structure-style>.col1,main .structure-style>.col2,main .structure-style>.col3,main .structure-style>.col4,main .structure-style>.col5{width: 100%;float: none;}
	main .structure-style h3{white-space: normal;}
	main .structure-style h3+p{height: auto;}
}