@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";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";
::-webkit-input-placeholder{color:#4a2b0c;font-family:"Noto Sans Thai",sans-serif;font-size:16px;line-height:24px}
:-ms-input-placeholder{color:#4a2b0c;font-family:"Noto Sans Thai",sans-serif;font-size:16px;line-height:24px}
::placeholder{color:#4a2b0c;font-family:"Noto Sans Thai",sans-serif;font-size:16px;line-height:24px}
input[type='search']::-webkit-input-placeholder{color:#666!important}
input[type='search']:-moz-placeholder{color:#666!important}
marquee a:hover{text-decoration:underline}
html,body{font-family:"Noto Sans Thai",sans-serif;padding:0;margin:0;font-weight:normal;opacity:1;transition:.3s opacity;min-height:100%;color:#000}
body.loaded{opacity:1!important;transition:.3s all}
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:"Noto Sans Thai",sans-serif;font-weight:500;line-height:initial}
h1{font-size:22px}
h2{font-size:22px}
h3{font-size:20px}
a{transform:.3s all;color:#23527c}
a:hover,a:visited,a:focus{text-decoration:none!important;outline:none!important;color:#2b6ba3}
.dn{display:none}
.db{display:block}
a:hover{text-decoration:none;transform:.3s all}
.bg-green{background:#e5fbd7}
.mb2{margin-bottom:2px}
#fb-plugin{width:100%}
#banners-content{background:#f6f6f6;padding:30px;margin-bottom:30px}
#banners-content .content{margin-bottom:0}
.topic-bg p>a{background:#f4f8ff;line-height:20px;display:block;padding:10px;height:100%}
main .list-style3 .item.topic-bg a{margin-bottom:0}
.container{width:1400px;max-width:100%}
.btn-primary{color:#000;font-size:18px;border-radius:30px;background:#98ff98;padding:10px 30px;border:0;font-weight:300;font-family:"Noto Sans Thai";transition:.1s all}
.btn-secondary{font-size:18px;background:#0774e4;border-radius:30px;font-family:"Noto Sans Thai";color:#fff;border-radius:30px;font-weight:300;border:0;padding:10px 45px;transition:.1s all}
.btn-secondary:hover{background:#075db5;color:#fff;transition:.3s all}
.btn-primary:hover,.btn-primary:focus{background:#0665dd;border-color:#0665dd;transition:.3s all}
.btn-viewmore{color:#777;font-size:18px;font-family:"Noto Sans Thai";line-height:18px;margin-top:10px}
.btn-viewmore>*{display:inline-block;vertical-align:middle}
.btn-viewmore:after{content:url('../img/play.png');margin-left:5px;display:inline-block;vertical-align:middle;line-height:0}
.btn-viewmore:hover span{text-decoration:underline}
.heading2{color:#0665dd;font-family:"Noto Sans Thai";margin:30px 0 20px;text-align:center}
.heading2>span{display:inline-block;vertical-align:middle;border-bottom:1px solid #eee;padding:0 5px}
h2.sub-heading{font-size:28px;line-height:28px}
#form-budget{padding:20px;background:#eee}
#form-budget label{font-size:16px;font-family:"Noto Sans Thai";font-weight:400;margin-right:10px}
#form-budget select{font-size:16px;font-family:"Noto Sans Thai";width:200px;display:inline-block}
.btn-viewstructure{background:#0665dd;font-size:20px;font-family:"Noto Sans Thai";color:#fff;padding:7px 20px;transform:translateY(0);transition:.1s all;opacity:1}
.btn-viewstructure:hover,.btn-viewstructure:focus,.btn-viewstructure:active{color:#fff;transform:translateY(-3px);transition:.3s all;opacity:.75}
.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;border:0;background:transparent}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background:transparent;color:#0665dd;font-weight:700;text-decoration:underline}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{background:transparent;color:#0665dd;font-weight:700}
.nav-tabs>li>a{font-size:18px;color:#0665dd;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;margin-top:30px;text-align:center}
#pagination.no-border{border:0;margin-top:0}
.btn-previous,.btn-next{border:1px solid #ccc;padding:10px 25px;color:#333;font-size:16px;font-weight:400;border-radius:4px;font-family:"Noto Sans Thai"}
.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:#2276e1;color:#fff;font-size:36px;border-radius:10px 0;width:40px;height:40px;text-align:center;display:none;line-height:0;padding-top:2px}
#left-bar-button{display:none;white-space:nowrap}
#menu-bars-button{display:none}
#menu-bars-head{display:none}
.overlay{background:#00000080;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:"Noto Sans Thai",sans-serif,sans-serif;color:#fff;text-align:center;padding:5px 25px;border-radius:4px;background:#21bb38;border-color:#21bb38;min-width:180px;transition:.3s all;font-weight:300}
button[type='submit']:hover,button[type='submit']:focus,button[type='submit']:active{background:#2996bb;color:#fff;border-color:#2996bb;transition:.3s all;outline:none!important}
#termModal h4{font-size:20px;line-height:20px}
#termModal .modal-body{font-family:Arial,sans-serif;font-weight:400;font-size:13px;color:#111}
#termModal .modal-body li{margin-bottom:5px}
#termModal button[type='button']{font-size:18px;line-height:18px}
.fa-download{color:#999}
.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}
.slider .owl-dots{bottom:17px}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:#CAC8C8}
.owl-carousel button.owl-dot.active{background:#151b50}
header #google_translate_element{position:absolute;top:-40px;right:0;z-index:10000}
header nav{display:block}
header nav>ul{display:grid;grid-template-columns:repeat(5,auto);width:100%}
header nav>ul>li{display:inline-block;padding:4px 0;float:none;vertical-align:middle;background:
linear-gradient(
    to top,
    #2276e1 0%,
    #f4f9f9 100%
)
}
header nav>ul>li>a{display:block;font-size:24px;color:#000;padding:5px 0 10px;font-family:"Noto Sans Thai";text-align:center;transition:.1s all}
header nav>ul>li.active,header nav>ul>li:hover,header nav>ul>li:focus{color:#000;text-decoration:none!important;transition:.3s all}
header nav>ul>li>a:focus,header nav>ul>li>a:active{text-decoration:none;color:#fff}
header .wrap-nav nav>ul>li{text-align: center;border:1px solid #66a1da;border-right: 0.3px solid #ffffff95;border-bottom: 2px solid #8eb5e0;border-top:2px solid #66a1da;padding: 0;}
header .wrap-nav nav>ul>li:first-child{border-left: 0;}
header .wrap-nav nav>ul>li>a{font-weight: 600;font-size: 19px;align-items: center;text-align: center;display: block;padding:15px 10px 16px;color: white;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);letter-spacing: 0.2px;border-top:1px solid transparent;}
header .wrap-nav nav>ul>li>a:hover{color: #fff702;}
header .wrap-nav nav>ul>li>a>span{display: inline-block;}
header .wrap-nav nav>ul>li>a>img{height: 32px;margin-right: 10px;margin-top: -3px;}
header .owl-carousel{max-height:initial;overflow:hidden}
header .owl-carousel.otherpage{max-height:initial;overflow:hidden}
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 #header-slider{position:relative}
#information{position:relative;bottom:0;z-index:100;width:100%;background: linear-gradient(
  to right,
  #2276e1 0%,
  #347edf 50%,
  #f4f9f9 100%
)}
#information>div{position:relative;margin:0 auto;width:100%;align-items:center;display: grid;grid-template-columns: auto max-content;}
#information>div>div:first-child{color:#000;font-size:13px;padding:5px 10px;line-height:initial;position:relative;text-align:center;font-weight:600;position:relative;overflow:hidden;font-family:Arial,sans-serif;border-radius:0}
#information>div>div:last-child{padding-left:15px}
#information>div>div:last-child form{background:transparent;position:relative;padding:11px 13px 9px;border-radius:0}
#information>div>div:last-child input[type='search']{background:#fff;border:0;color:#000;outline:none;border:2px solid#19B2E0;border-radius:50px;box-shadow:none;padding:7px 15px;line-height:initial;height:initial;width:300px;font-weight:500;font-size:16px;max-width:100%}
#information>div>div:last-child button{display: none;}
#information h1{color:#fff;margin:0}
#information marquee a{color:#fff;font-family: "Noto Sans Thai";font-weight: 600;font-size: 16px;letter-spacing: 0.2px;text-shadow: 0 1px 1px #00000095;}
#information marquee a img{height:30px}
#information marquee a>*{vertical-align:middle;display:inline-block}
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 #0000004d}
header.stick nav>ul{margin:0 auto;max-width:100%;background:linear-gradient(to top, #2276e1 0%, #f2f2f2 100%);}
#top-menu {display: grid;grid-template-columns: 120px 120px 120px;align-items: center;}
#top-menu img{width: 40px;}
#top-menu li{text-align: center;}
#top-menu li p{margin: 8px 0 0;font-weight: 600;font-size: 16px;color: #0364c2;}
#header-logo{padding:15px 50px;top:0;left:0;width:100%;z-index:100;
    background:linear-gradient(
      to top,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(
      120deg,
      #0a74d3 0%,
      #0a74d3 50%,
      #9ec3e8 50%,
      #66a1da 100%
    );
}
#header-logo>div{position:relative;margin:0 auto;}

#header-logo>div>div>div:last-child{display: grid;grid-template-columns: max-content max-content;grid-gap: 50px;align-items: center;}
#header-logo>div>div{display:grid;grid-template-columns:auto max-content;align-items:center}

#header-logo>div>div>div>a:first-child{display:grid;grid-template-columns:105px auto;align-items:center;grid-gap:15px}
#header-logo>div>div>img:first-child{padding-right:15px}
#header-logo h1{color:#001637;font-size:36px;margin:0;line-height:50px;text-shadow:0 1px 0 #ffffff80;font-weight: 700;}
#header-logo h1+ p{color:#001637;font-size:19px;margin:0;line-height:30px}
#header-logo ul>li{list-style:none;display:inline-block;vertical-align:middle;margin-left:15px}
#header-logo ul>li>a{display:block;transition:.1s all}
#header-logo ul>li:hover>a img{transform:translateY(-3px);transition:.3s all}
header .sub-menu{position:relative}
header .sub-menu>a:first-child{cursor:default}
header nav>ul>li.sub-menu>ul{display:none;position:absolute;z-index:1000;background:#fff;color:#000;font-size:17px;text-align:left;padding:0 0 20px;left:0;width:auto;white-space:nowrap;top:100%;text-align:left;max-width:initial!important;min-width:100%}
header .sub-menu>ul>li{display:block;border-top:1px solid #ffffff4d}
header .sub-menu>ul>li>a{display:block;padding:10px 20px;color:#000;transition:.1s all;text-align:left;font-size:18px;font-weight:normal;border-bottom:1px solid #ccc;border-top:1px solid #f9f9f9;color:#0241b5}
header .sub-menu>ul>li:last-child>a{border-bottom:0 !important}
header .sub-menu>ul>li.active>a,header .sub-menu>ul>li>a:hover{transition:.3s all;font-weight: 600;}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu{text-indent: 15px;display: none;}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu>li{list-style: none;}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu>li>a{display:block;padding: 10px 0;border-bottom: 1px solid #ccc;transition: .1s all}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu>li>a:before{content:"●";margin-right: 7px;display:inline-block}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu>li>a:hover{font-weight: 600;transition: .3s all;}
header .sub-menu>ul>li.active>a,header .sub-menu ul.sub-menu a{position: relative;}
header .sub-menu .sub-menu a{cursor: pointer;}
header .sub-menu .sub-menu a>i{position: absolute;right: 10px;top:13px;transition: .1s all;display: inline-block;transform: rotate(0deg);}
header .sub-menu .sub-menu a.active>i{transform: rotate(-180deg);transition: .3s all;}



header.structure-heading h1>img{width:80px;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:24px;font-weight:300}
header.structure-heading h1>span>span{display:block;font-size:18px}
body{background:#fff;background-size:cover;background-position:top center;background-repeat:no-repeat;background-attachment:fixed}
main .management{margin-bottom:10px;text-align:center;padding:20px 0;margin-top:15px;background: linear-gradient(
  to bottom,
  #2276e1 0%,
  #347edf 50%,
  #f4f9f9 100%
)}
main .management>div{padding:0 20px}
main .management img{border-radius: 20px;border: 4px solid white;}
main .management h4{font-size:18px;color:#001637;text-align:center;margin-bottom:5px;letter-spacing:0;line-height:20px;font-weight: 600;}
main .management h4+p{font-size:16px;color:#001637;text-align:center;line-height:20px;margin-bottom: 0;}
main .management a{font-size: 19px;color: #001637;}
main .management a:hover{font-weight: 600;color: #2276e1;}
main .management .btn{width:100%}
main .management h3{background:#151b50;color:#fff;font-size:24px;padding:7px 10px 6px}
main .management h3>img{width:initial;padding:0;background:transparent;display:inline-block;vertical-align:middle;margin-right:5px;height:18px}
main .management h3>span{display:inline-block;vertical-align:middle;padding-bottom:4px}
main#wrap-structure{white-space:nowrap;overflow:hidden;overflow-x:scroll;background:#fff}
main#wrap-structure>div{width:fit-content;margin:0 auto}
main#wrap-structure h1>span{display:inline-block;background:#b3d69c;color:#333;border:1px solid #b3d69c;padding:5px 50px;border-radius:7px;font-size:20px}
main .heading{background: linear-gradient(
  to bottom,
  #2276e1 0%,
  #ebf6ff 100%
);color:#fff;padding:15px 15px 15px;margin:0;background-size:cover;background-position:center center;background-repeat:no-repeat;margin-bottom:10px;position:relative}
.nav.nav-tabs.style2{border: 0;}
.nav.nav-tabs.style2 li{margin-right: 15px;}
.nav.nav-tabs.style2 li img{height:28px;margin-right: 5px;}
.nav.nav-tabs.style2 li a{font-size: 22px !important;color: #fff;font-weight: 600;display: block;padding: 10px 20px !important;transition: .1s all;border: 0;box-shadow: none;background: linear-gradient( to bottom, #2276e1 0%, #ebf6ff 100% ) !important;}
.nav.nav-tabs.style2 li a:hover,.nav.nav-tabs.style2 li a:active,.nav.nav-tabs.style2 li a:focus,.nav.nav-tabs.style2 li.active a{background: transparent;border: 0;box-shadow: none;transition: .3s all;color: #FFF702}
main .heading img{width:30px}
main .heading.blue{background:#f3efc1;color:#000}
main .heading.green{background:#cce1ed}
main .heading.lightgreen{background:#93cc8c}
main h2.heading{font-size:19px;text-shadow: 0 1px 1px #999;}
main .heading>span{position:relative;z-index:1;font-size:24px;font-weight: 600;}
main .heading>span>i{display:inline-block;vertical-align:middle;margin-right:5px;background:#fff;border-radius:50%;font-size:12px;padding:5px;width:22px;text-align:center}
main .heading>span>span{display:inline-block;vertical-align:middle}
main .heading>span>img{display:inline-block;vertical-align:middle;margin-right:10px;width:30px}
main .content{margin-bottom:20px}
main .content .detail h2{font-size:22px;font-family:"Noto Sans Thai"}
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:#f2f1f92b;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-style0 .item{padding-bottom:10px;width:100%}
main .list-style0 .item:before,main .list-style0 .item:after{content:'';clear:both;display:block}
main .list-style0 .item>a{width:45%;float:left}
main .list-style0 .item>div{float:left;width:55%;padding-left:20px}
main .list-style0 .item>div h3{margin:0 0 15px}
main .list-style0 .item>div h3>a{color:#151b50;font-family:"Noto Sans Thai",sans-serif;font-size:18px}
main .list-style0 .item>div h3>a:hover,main .list-style0 .item>div h3>a:focus,main .list-style0 .item>div h3>a:active{text-decoration:underline}
main .list-style0 .item>div p{display:inline-block;vertical-align:middle;color:#777;font-size:13px;font-family:Arial}
main .list-style0 .item>div p.date{margin-right:15px}
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:-0;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:18px;font-weight:300;margin:5px 0 0;text-overflow:ellipsis;overflow:hidden;height:45px}
main .list-style2 .item p>a{color:#333;font-family:"Noto Sans Thai",sans-serif;color:#151b50}
main .list-style2 .item p>a:hover{text-decoration:underline}
main .list-style2 .item p.read{font-family:Arial,sans-serif;font-size:13px;color:#999}
main .list-style3 .grid{margin:0 -10px}
main .list-style3 .item{width:50%;padding:10px}
main .list-style3.col3 .item{width:33.33%}
main .list-style3 .item h3{font-size:16px;color:#2276e1;font-weight:400;line-height:20px;margin:0 0 5px;text-overflow:ellipsis;overflow:hidden;height:60px;margin-bottom:10px;font-family:"Noto Sans Thai",sans-serif}
main .list-style3 .item h3>a{color:#697de9}
main .list-style3 .item h3>a:hover{text-decoration:underline}
main .list-style3 .item .description{height:38px;overflow:hidden}
main .list-style3 .item p{font-family:"Noto Sans Thai",sans-serif;font-size:16px;color:#2276e1;margin-bottom:5px;height:50px;overflow:hidden}
main .list-style3 .item.topic-bg p:not(.date):not(.read){height:100px}
main .list-style3 .item .date{font-size:13px;font-family:Arial;color:#999;margin:0 10px 0 0;display:inline-block;vertical-align:middle;height:initial}
main .list-style3 .item .read{font-size:13px;font-family:Arial;color:#999;margin:0;display:inline-block;vertical-align:middle;height:initial}
main .list-style3 .item>a{margin-bottom:10px}
main .list-style3 .item a{color:inherit}
main .list-style3 .item a:hover,main .list-style3 .item a:focus,main .list-style3 .item a:active{text-decoration:underline}
main .list-style4 .grid{margin:0 -10px}
main .list-style4 .item{width:16.66%;padding:10px}
main .list-style5 .item{display: grid;grid-template-columns: 300px auto;grid-gap: 20px;}
main .list-style5 .item>a{border-radius: 20px;overflow: hidden;}
main .list-style5 .item img{border-radius: 20px;overflow: hidden;border: 4px solid #D9D9D9;}
main .list-style5 .item p>a{background: transparent;color:#0047B2;font-weight: 600;font-size:17px;padding:0;display: inline;}
main .list-style5 .item p>a:hover{color: #2276e1}
main .list-style5 .item p.description{font-size:16px;color:#333;max-height: 70px;overflow: hidden;}
main #videos iframe{margin-bottom: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;display:grid;grid-template-columns:max-content auto 140px;align-items:center}
main .tab-content.about ul>li>a{grid-template-columns:max-content auto;padding:5px}
main .tab-content.about ul>li img{width:50px;margin-right:5px}
main .tab-content ul>li{display:block;padding:0;border-bottom:1px solid #eee}
main .tab-content:not(.about) ul>li>a:before{content:'\f0f6';font-family:"FontAwesome";margin-right:5px;display:inline-block;padding:10px 0 10px 10px;line-height:18px;transform:translateY(0);transition:.1s all;font-size:30px}
main .tab-content ul>li>a>span{color:#333;font-size:16px;padding:10px 10px 10px 5px;display:inline-block;text-overflow:ellipsis;overflow:hidden;max-width:100%;line-height:25px;font-family:"Noto Sans Thai"}
main .tab-content ul>li>a>span:last-of-type{color:#4b4b4b}
main .tab-content:not(.about) ul>li>a>span:last-of-type{border-left:1px solid #eee}
main .tab-content ul>li>a:hover:before{transform:translateY(-3px);transition:.3s all}
main .tab-content ul>li>a:hover>span:last-of-type{border:0!important}
main .tab-content ul>li:hover>a>span{color:#1568ff}
main #webboard table{width:100%;font-family:Arial,sans-serif;font-size:14px}
main #webboard table th{font-family:"Noto Sans Thai",sans-serif;font-size:22px;font-weight:300;line-height:22px}
main #webboard table tr>td>a{color:rgb(5, 5, 5);font-weight:400}
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:5px 0;font-family:"Noto Sans Thai"}
main #page .content>ul{margin-bottom:15px;display:inline-block;border-bottom:1px solid #21bb38;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;background:#f9f9f9;padding:15px}
main .downloads table tr>th{color:#333;font-family:"Noto Sans Thai",sans-serif;font-size:17px;font-weight:300;font-family:"Noto Sans Thai"}
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:28px;margin:0 0 5px;color:#000;font-weight:500;border-bottom:0;margin-bottom:5px;font-family:"Noto Sans Thai"}
main .downloads h3 i.fa-download{color:inherit}
main .downloads table thead th{font-size:22px;background:#c5e5ff}
main .downloads table tbody td{font-size:16px;background:#fff;color:#000;font-family:"Noto Sans Thai"}
main .downloads .text-link{color:#333}
main .downloads .text-link:hover{color:#333;text-decoration:underline}
main .downloads ul{padding-left:25px;border:0!important}
main .downloads ul>li{margin-bottom:10px;display:block!important}
main .downloads ul>li:before{content:'';width:7px;height:7px;border-radius:0;background:#ccc;margin-right:5px;display:inline-block;vertical-align:middle;transform:rotate(45deg);transition:.1s all}
main .downloads ul>li:hover:before{transform:rotate(405deg);transition:.3s all;background:#999}
main .downloads ul>li>a{display:inline-block;vertical-align:middle}
main .downloads ul>li>a:hover{text-decoration:underline}
main .downloads table i.fa-download{color:inherit}
main .downloads table thead{background:#98ff98}
main .downloads table thead th{color:#000;border-bottom:0}
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}
table.dataTable thead th{font-size:22px;font-family:"Noto Sans Thai";line-height:22px;padding-bottom:10px;font-weight:400;background:#eee;font-weight:bold}
table.dataTable td{font-family:"Noto Sans Thai";font-size:16px;line-height:22px}
table.dataTable td,table.dataTable th{border:1px solid #ccc;border-collapse:collapse;vertical-align:top}
#DataTables_Table_0_filter label{font-size:16px;font-family:"Noto Sans Thai"}
.dataTables_wrapper .dataTables_filter input{min-width:200px;border:1px solid #ccc}
.dataTables_wrapper .dataTables_info{font-family:Arial,Helvetica,sans-serif}
.oit-description{font-size:18px;font-family:"Noto Sans Thai";line-height:28px;margin:10px 0 50px}
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:34px}
main #webboard-form label{font-size:17px;font-family:"Noto Sans Thai";line-height:24px;margin-bottom:0;font-weight:400}
main #webboard-form label em{color:#c33;font-family:arial;font-size:11px;font-weight:400}
main #webboard-form form{padding:30px 0;border-top:2px solid #eee}
main #webboard-form h3{margin-top:0}
main #webboard-form .form-control{padding:12px;height:auto}
main #webboard-form .conditions li{margin-bottom:5px}
main #contact-form{font-family:Arial,sans-serif}
main #contact-form .form-control{padding:12px;height:auto}
main #contact-form h2{margin-top:30px;font-size:32px}
main #contact-form label{font-size:17px;font-family:"Noto Sans Thai";line-height:25px;margin-bottom:0;font-weight:400}
main #contact-form label em{color:#c33;font-family:arial;font-size:11px;font-weight:400}
main #contact-form form{padding:30px 20px;background:transparent}
main #contact-form h3{margin-top:0}
main #contact-form .conditions li{margin-bottom:5px}
button[type='reset']{width:120px;margin-right:10px;padding:10px;background:#f9f9f9;transform:translateY(0);transition:.1s all;font-size:18px;line-height:26px;font-family:"Noto Sans Thai"}
button[type='submit']{background:#0665dd;padding:10px;transform:translateY(0);transition:.1s all;border-color:#0665dd;color:#fff;font-size:18px;line-height:26px;font-family:"Noto Sans Thai"}
button[type='submit']:hover,button[type='reset']:hover{transform:translateY(-5px);transition:.3s all}
button[type='submit']:hover{background:#0241b5;color:#fff;transition:.3s all}
main #map iframe{border:0;width:100%;height:450px}
main #address{font-size:24px;color:#666;font-weight:300;text-align:center;background:#f9f9f9;padding-bottom:15px}
main #address h2{color:#111;font-size:28px}
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;background:#d1ffd5;padding:20px;display:grid;grid-template-columns:max-content auto;align-items:center}
main .select-child-page select{padding:10px;max-width:100%;border-color:transparent}
main .select-child-page p i{font-size:24px;color:inherit}
main .select-child-page p{font-family:"Noto Sans Thai",sans-serif;font-weight:400;font-size:24px;margin-bottom:0;padding-right:10px;color:#000}
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:300px;display:inline-block;max-width:100%;padding:5px;background:transparent;margin-bottom:10px;border:0}
main .structure-style a{display:block;border:4px solid #eee}
main .structure-style h3{font-size:22px;line-height:24px;margin:0;color:#2477e0;white-space:nowrap;padding-top:5px;font-family:"Noto Sans Thai"}
main .structure-style h3+p{font-family:Arial,sans-serif;font-size:16px;margin-bottom:0;white-space:nowrap}
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:#ecffee;padding:20px}
main .content-topic>h2{font-size:28px;line-height:28px;margin:0 0 5px;color:#000;font-weight:500}
main .content-topic>ul{margin-bottom:15px;display:inline-block;border-bottom:1px solid #21bb38;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:"Noto Sans Thai",sans-serif;margin:15px 0 5px;font-size:24px;line-height:24px}
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 #cbefd0;margin-top:30px}
main .content-topic .comments h3{margin:0;font-size:22px;line-height:22px;margin-bottom:5px}
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 #cbefd0;position:relative}
main .content-topic .comment .by{margin-bottom:10px}
main .content-topic .comment .by-admin{color:#21bb38}
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:200px;display:inline-block;text-align:center;padding:10px;border:1px solid #77a757;border-radius:7px;margin-bottom:30px;background:#b3d69c}
main .no-reponsive-structure .structure .structure>div.clearfix{display:block}
main .no-reponsive-structure .row.one>.structure>div.clearfix:after{content:'';background:#b3d69c;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:#b3d69c;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.many>.structure:before{content:'';background:#b3d69c;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:#b3d69c;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:#b3d69c}
main .no-reponsive-structure .row.many>div.structure:last-of-type:before{width:50%;right:50%;background:#b3d69c}
main .no-reponsive-structure h2+div.clearfix{position:relative}
main .no-reponsive-structure h2+div.clearfix:before{content:'';background:#b3d69c;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:#b3d69c;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 .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:#b3d69c;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 #b3d69c;white-space:normal}
main .no-reponsive-structure h4>span{padding:7px 10px;border-radius:7px;background:#b3d69c;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 #b3d69c;white-space:normal}
main .no-reponsive-structure h3{margin:0 0 5px;line-height:18px;font-size:16px}
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}
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 .structure img{width:120px;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:0;padding:10px;margin:0 0 30px;max-width:100%;background:#f0f0f0}
main aside>div#menus{padding-bottom:10px;background:#f3fff9;margin-bottom:15px}
main aside>div#menus h3{margin:0}
main aside>div#menus ul.menu>li{margin-bottom:2px}
main aside>div#menus ul.menu>li>a{color:#fff;font-family:"Noto Sans Thai";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{list-style:none;margin-left:20px;display: flex;align-items: center;}
main aside>div#menus ul.menu ul>li>a{color:#4a2b0c;font-family:"Noto Sans Thai";line-height:initial;font-size:16px;line-height:22px;display:block;padding:4px 0}
main aside>div#menus ul.menu ul>li>a:hover,main aside>div#menus ul.menu ul>li>a:focus,main aside>div#menus ul.menu ul>li>a:active{color:#000;text-decoration:underline!important}
main aside>div#menus ul.menu ul>li:before{content:'\f0a9';font-family:"FontAwesome";margin-right:5px;display: inline;}
main aside>div#menus .sub-menu h4{padding:12px 15px 12px;margin:0;font-size:17px;color:#000;font-weight:500;text-shadow:0 1px 0 #ffffff1a;position:relative;line-height:22px;background:#2477e0;color:white}
main aside>div#menus .sub-menu h4>a{color:inherit}
main aside>div#menus .sub-menu>ul>li:last-child{margin-bottom:5px}
main aside>div#menus .sub-menu>ul>li:first-child{margin-top:5px}
main aside>div#menus .sub-menu.toggle{cursor:pointer}
main aside>div#menus ul.menu>li{transition:.1s all}
main aside>div#menus li:not(.sub-menu) h4{padding:6px 15px 4px;background:#21bb38;font-size:20px;color:#fff;font-weight:400;text-shadow:0 1px 0 #ffffff1a;cursor:pointer;position:relative;margin-bottom:0}
main aside>div#menus li:not(.sub-menu) h4 a{display:block;color:#fff}
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:#0000001a;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:12px;right:10px;font-family:"FontAwesome";color:#fff;transition:.1s all}
main aside>div#menus .sub-menu.toggle.active:after,main aside>div#menus .sub-menu.toggle.active:after{transform:rotate(90deg);transition:.3s all;}
main aside>div#partners{padding:15px;background:#393939;margin-bottom:10px;color:#fff;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:#ebf5ff;border-radius:0;margin-top:15px;border:4px solid #3a7dd4;position:relative;padding-bottom:35px;border-radius: 20px;overflow: hidden;}
main aside>div#traffic h3{margin:0 0 5px;text-align:center;font-size:20px;color:#151b50;margin-bottom:15px;font-family:"Noto Sans Thai"}
main aside>div#traffic h3 a{color:#151b50}
main aside>div#traffic h3>*{display:inline-block;vertical-align:middle}
main aside>div#traffic h3>img{margin-right:5px;width:50px}
main aside>div#traffic table{width:100%;font-size:16px;font-family:"Noto Sans Thai";margin-bottom:15px}
main aside>div#traffic table tr>td:last-child{text-align:right}
main aside>div#traffic table tr>td span{color:#93683e}
main aside>div#traffic p{font-family:Arial;color:#000;font-size:13px;margin:0;text-align:center;background:#b2d1ff;padding:7px;position:absolute;bottom:0;left:0;width:100%;font-weight:700}
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:#a6f7a6;margin-bottom:10px;font-family:Arial,sans-serif}
main aside #search-form input.form-control{border:1px solid #d1ffd5;border-radius:0;padding:7.5px;height:initial;font-family:"Noto Sans Thai",sans-serif;font-size:16px}
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;font-size:15px;border-radius:0 4px 4px 0;background:#22cb22}
main #content{background:#fff;padding:0 15px;margin:0 -15px}
.banner-news{padding:20px 0 10px}
#facebook{margin-bottom:15px}
#facebook img{width:100%;margin-bottom:15px}
.banner-purchase.owl-carousel.owl-drag .owl-item img{opacity:1;transition:.1s all}
.banner-purchase.owl-carousel.owl-drag .owl-item:hover img{opacity:.75;transition:.3s all}
.stucture-heading>span{display:inline-block;background:#2271f0;color:#ffffff;padding:10px 30px;border-radius:30px;font-size:26px;min-width:250px}
.stucture-subheading>span{display:inline-block;background:#09c;color:#fff;padding:5px 10px;border-radius:25px;font-size:24px;min-width:150px}
.stucture-heading.green>span,.stucture-subheading.green>span{background:#2271f0}
.dot-image .content{background:url(../img/dot.png) repeat}
footer{background:url('../img/bg-footer.jpg');color:#000;margin-top:90px;background-size: cover;background-position: center center;}
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;color:#000;font-size:16px;font-family:"Noto Sans Thai";font-weight:400}
footer>div>div a{color:#378d3e}
footer>div>div a:hover{color:#c19458;text-decoration:underline}
footer #content-footer{display:grid;grid-template-columns:33.33% 33.33% 33.33%;text-align:left;padding:100px 7% 40px}
footer #content-footer>div:nth-child(2){text-align:center}
footer #content-footer>div:nth-child(2) img{margin-top:-110px;width:200px}
footer #content-footer>div:nth-child(2) img + h2{font-size:26px}
footer #content-footer>div:nth-child(3){text-align:right}
footer #content-footer>div ul{display:inline-block;margin:0;list-style:none;padding:0;text-indent:initial;text-align:left;font-size:16px}
footer #content-footer>div ul li{margin-bottom:0;font-size:16px;font-family:"Noto Sans Thai";line-height:25px}
footer #content-footer>div ul li a{color:#fff;font-weight: 600;font-size: 19px;text-shadow: 0 1px 1px #999;display: inline-block;margin-bottom: 5px;}
footer #content-footer>div ul li a:hover{color: #fff702;}
footer #content-footer>div ul li>*{display:inline-block;vertical-align:middle}
footer #content-footer>div ul li>i{margin-right:5px;width:30px;text-align:center;color:#fff}
footer #content-footer>div h1{font-size:30px;margin:0 0 10px;color:#fff;font-family:"Noto Sans Thai";font-weight: 600;text-shadow: 0 1px 1px #999;}
footer #content-footer>div p,footer #content-footer>div a{margin-bottom:15px;color: #fff;font-size: 19px;font-weight: 600;text-shadow: 0 1px 1px #999;}
footer #content-footer>div a:hover{color: #fff702;}
footer #content-footer>div h1+p>span{display:block}
footer #copyright{padding:12px 0;background: linear-gradient(to right, #2276e1, #ffffff);}
footer #copyright p{margin:0 5px;font-size:13px;display:inline-block;vertical-align:middle;color:white}
footer #copyright>p:first-child{padding-right:0px}
footer #copyright>p a{color:#fff}
footer #copyright>p a:hover{color:#fff;text-decoration:underline}
footer #content-footer{display: flex;justify-content: space-between;position:relative}
footer #content-footer>div:nth-child(2){position:absolute;top:40px;left:50%;margin-left:-100px}
.owl-dots{left:0;right:5px;text-align:right;bottom:5px}
.owl-dot{width:10px;height:10px;border-radius:4px;background:#0003}
.owl-dot.active{background:#61a6d6}
.owl-carousel .owl-item img{border-radius:0;width:initial}
.owl-carousel.owl-drag .owl-item>div>img{width:100%}
.owl-carousel .animated{animation-duration:3s}
.owl-carousel .owl-item{font-family:"Noto Sans Thai",sans-serif}
.owl-carousel .owl-item p{position:absolute;bottom:0;left:0;width:100%;padding:15px 15px 12px;background:#ffffffbf;color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;font-size:18px;font-weight:400;font-family:"Noto Sans Thai",sans-serif}
.detail{font-family:Arial,sans-serif;font-size:14px;color:#333;margin-bottom:20px}
.detail h1{font-size:28px;font-family:"Noto Sans Thai",sans-serif;font-weight:300}
.detail h2{font-size:26px;font-family:"Noto Sans Thai",sans-serif;font-weight:300}
.detail h3{font-size:22px;font-family:"Noto Sans Thai",sans-serif;font-weight:300}
.detail h4{font-size:18px;font-family:"Noto Sans Thai",sans-serif;font-weight:300}
.detail h5{font-size:17px;font-family:"Noto Sans Thai",sans-serif;font-weight:300}
.detail h6{font-size:16px;font-family:"Noto Sans Thai",sans-serif;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-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}
.owl-carousel.slider .owl-item img{width:100%}
#ext-banners{padding:60px 20px;background: linear-gradient(
  to bottom,
  #2276e1,
  #ffffff
);}

@media(min-width: 1366px) {
  header nav>ul>.sub-menu:hover>ul{display:block}
}

@media(min-width: 1600px) {
#wrap-content>.col-md-3{width:18%}
#wrap-content>.col-md-2{width:12%}
#wrap-content>.col-md-6{width:64%}
#wrap-content>.col-md-7{width:70%}
}
@media(max-width: 1600px) {
#banners-content .list-style4 .item{width:25%}
}
@media(max-width: 1365px) {
  header .wrap-nav nav > ul > li > a{font-size: 15px;padding: 15px 5px 16px;}
main .list-style5 .item{display: grid;grid-template-columns: auto;grid-gap: 5px;border-bottom: 1px solid #ccc;padding:15px;margin-bottom:25px;}
main .list-style5 .item>a{border-radius: 20px;overflow: hidden;}
main .list-style5 .item img{border-radius: 20px;overflow: hidden;border: 4px solid #D9D9D9;width:100%}
main .list-style5 .item p>a{background: transparent;color:#0047B2;font-weight: 600;font-size:17px;padding:0;display: inline;}
main .list-style5 .item p>a:hover{color: #2276e1}
main .list-style5 .item p.description{font-size:16px;color:#333;max-height: initial;overflow: hidden;}
  .nav.nav-tabs.style2 li{margin-bottom: 10px;}
  header .sub-menu > ul > li > a{font-size: 15px;}
  body.menu-bar header nav>ul > li.sub-menu>a:not(.active):after{content:"\f107";margin-left:10px;font-family: "FontAwesome";}
  body.menu-bar header nav>ul > li.sub-menu>a.active:after{content:"\f106";margin-left:10px;font-family: "FontAwesome";}
    body.menu-bar header nav>ul > li.sub-menu li.sub-menu>a{position: relative;}
  body.menu-bar header nav>ul > li.sub-menu li.sub-menu>a:not(.active):after{content:"\f107";font-family: "FontAwesome";position: absolute;right:15px;top:8px}
  body.menu-bar header nav>ul > li.sub-menu li.sub-menu>a.active:after{content:"\f106";font-family: "FontAwesome";position: absolute;right:15px;top:8px}
}
@media(max-width: 1023px) {
header #information>div,.container{width:1020px;max-width:100%}
header.stick nav{width:1020px}
#header-slider .owl-dots{bottom:initial;top:10px;right:15px}
/* main aside > div#menus .sub-menu h4{width:235px} */

#header-logo{padding: 10px 15px}
#header-logo h1 + p{font-size:18px;}
#header-logo h1{font-size:24px;line-height: initial;}
#header-logo > div > div > div:last-child{display: block;}
#header-logo > div > div > div:last-child>ul{margin-top:10px;text-align:center}
#header-logo > div > div > div:last-child > ul{margin:15px 0}
#header-logo > div > div > div:last-child > ul{display:grid;grid-template-columns: repeat(3, 1fr);}
#header-logo ul > li{margin:0}

main aside>div#menus .sub-menu h4{padding-right:25px}
main .management h4{font-size:24px}
header nav ul > li > a{font-size:21px}
header #information>div,.container{width:990px;max-width:100%}
header ul>li:not(:first-child)>a>i:first-child{display:none}

header .sub-menu>ul{position:relative;left:initial;top:initial;text-align:center}
header #google_translate_element{right:15px}
header #information>div{padding:0 15px}
header nav ul{display:block}
.sm-mb-20{margin-bottom:20px}
footer #content-footer>div:nth-child(2) img{width:120px}
footer #content-footer > div:nth-child(2){margin-left:-60px}
footer > .container > div{padding:15px 0 5px}
body{background:#fff}
#left-bar-button{display:block;position:fixed;bottom:6%;left:0;background:#476fdf;color:#fff;padding:6px 15px;z-index:11111;font-size:16px;border-radius:0 4px 4px 0;transition:.3s all;outline:none!important;text-decoration:none!important;box-shadow:#2276e1;border-left:3px solid #0047B2;font-family:"Noto Sans Thai"}
#left-bar-button:hover{background:#1150af}
#menu-bars-button{display:block;position:absolute;top:9px;right:15px;z-index:100;font-size:26px;color:#000;outline:none!important;text-decoration:none!important}
#menu-bars-head{display:block;position:absolute;top:14px;left:15px;z-index:100;font-size:20px;font-weight:600;color:#0047B2;outline:none!important;text-decoration:none!important;text-shadow: 0 1px 1px rgba(255,255,255,.1);}
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:-320px;width:300px;overflow-x:hidden;overflow-y:scroll;z-index:1000;background:#fff;height:100%;visibility:hidden;transition:.3s all}
body.sidebar #left-bar{left:0;visibility:visible;transition:.3s all;padding:15px}
body.sidebar #left-bar-button{left:300px;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;background: linear-gradient(to top, #2276e1 0%, #f2f2f2 100%);border-top:2px solid #9BC5EF}

header nav>ul>li{display:none !important}
header nav>ul > li{display:block;float:none;background:transparent;text-align:center;border: 0;}
header .wrap-nav nav > ul > li{border:0 !important}
header .wrap-nav nav > ul > li>a{border-top:1px solid rgba(255,255,255,.5)}
header nav > ul > li.sub-menu > ul{position: relative;}
/* header nav>ul > li:nth-child(2){border-top:1px solid #79f58a} */
/* header nav>ul > li:first-child{float:none;position:absolute;top:-1px;margin:0;border:0;background:transparent} */
/* header nav>ul > li:first-child>a{color:transparent;font-size:0} */
/* header nav>ul > li:first-child>a:before{content:url('../img/logo@40.png');display:inline-block;vertical-align:middle;margin-right:10px}
header nav>ul > li:first-child>a:after{content:'เทศบาลตำบลยุหว่า';font-size:24px;color:#000;display:inline-block;vertical-align:middle} */
/* header nav>ul > li:first-child>a{background:transparent} */
header nav>ul > li > a{padding:9px}
body.menu-bar header nav ul>li{display:block !important}
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}
/* footer #content-footer>div h1+p>span{display:inline}
footer #content-footer>div:nth-child(2) img{width:110px} */
#header-logo>div>div>img:first-child{width:120px}
#header-logo>div>div>img:last-child{height:65px}
main aside>div#menus .sub-menu h4{padding-right:25px}
/* footer #content-footer>div:nth-child(2){margin-left:-55px} */

/* main aside > div#menus .sub-menu h4{font-size: 14px;padding:10px 15px}
main aside > div#menus .sub-menu.toggle::after{right: 0;}
main aside > div#menus ul.menu ul > li > a{font-size: 14px;} */


}
@media(max-width: 767px) {

  footer #content-footer{display:block}
  footer #content-footer > div:nth-child(3){text-align: left;}
#banners-content .list-style4 .item{width:33.33%}
#fb-plugin{height:400px!important}
main .structure-style a{border:0}
main .structure-style .structure{width:auto}
.xs-dn{display:none}
main aside #search-form{display:block}
input[type='search']::-webkit-input-placeholder{color:#999!important}
input[type='search']:-moz-placeholder{color:#999!important}
main .tab-content ul>li{padding:10px}
main .tab-content ul>li>a{display:block}
main .tab-content ul>li>a>span{padding:0;display:inline}
main .tab-content ul>li>a:before{display:inline;padding:0}
/* footer #content-footer{grid-template-columns:auto;grid-template-areas:logo address social}
footer #content-footer>div:first-child{grid-area:address;text-align:center}
footer #content-footer>div:first-child>p:last-child{display:none}
footer #content-footer>div:first-child h1{display:none}
footer #content-footer>div:nth-child(2){grid-area:logo;text-align:center}
footer #content-footer>div:last-child{grid-area:social;text-align:center} */
header #information>div{padding:0}
header #information>div>div:last-child{display:none}
header #information>div{grid-template-columns:auto;grid-template-areas:'null search' 'marquee marquee'}
header #information>div>div:first-child{grid-area:marquee;border-radius:0}
header #information>div>div:nth-child(2){grid-area:search}
header #information>div>div{margin:0;padding:0}
header #information>div>div:last-child{padding-left:0;width:100%}
header #information>div>div:last-child form{padding:15px}
header #information>div>div:last-child input[type='search']{width:100%}
header #information>div>div:last-child button[type='submit']{top:10px}
header #google_translate_element{top:-30px;right:15px}
main .select-child-page{display:block}
main .select-child-page select{max-width:100%}
main .downloads ul>li{display:grid!important;width:100%;grid-template-columns:max-content auto;align-items:top}
main .downloads ul>li:before{margin-top:7px}
main .downloads ul{padding-left:5px}
main .downloads h3{margin-bottom:10px}
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:100%}
.nav-tabs > li.active{width:100%}
.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%}
body.sidebar #left-bar-button{width:35px;overflow:hidden;color:transparent}
body.sidebar #left-bar-button:before{color:#fff}
main .list-style3 .item h3{font-size:18px}
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-default,.btn-primary{font-size:16px}
#webboard tr>td:first-child{min-width:180px}
.container.pb30{padding-bottom:0}
main .list-style3.col3 .item{width:50%}
.owl-item>div>img{height:initial;max-width:initial!important;width:100%!important}
#videos iframe{height:200px}
#pagination{border-top:0}
main .select-child-page{text-align:center}
main .select-child-page p{font-size:20px;margin-bottom:5px}
main .select-child-page p i{font-size:20px}
main .select-child-page select{background:#fff}
#header-logo h1{font-size:32px;line-height:32px}
#header-logo ul > li{margin-left:5px}
#header-logo h1+p{font-size:20px;line-height:20px}
#header-logo > div > div > a:first-child{grid-template-columns:60px auto}
#header-logo > div > div{display:block}
#header-logo > div > div>div:last-child{text-align:right;margin-top:5px}
/* #header-logo > div > div>div:last-child li img{width:20px} */
#header-logo ul > li> a img{width: 40px;}
#header-logo > div > div > div > a:first-child{grid-template-columns: 70px auto;}
#header-logo h1{margin-bottom: 5px;font-size:30px}
#header-logo h1+p{font-size:16px}
#header-logo > div > div > div:last-child{border-top:1px solid rgba(0,0,0,.1)}
/* footer #content-footer{display:block} */
.xs-dn{display:none}
.xs-db{display:block}
main .list-style5 .item{display: grid;grid-template-columns: auto;grid-gap: 5px;border-bottom: 1px solid #ccc;padding:15px;margin-bottom:25px;}
main .list-style5 .item>a{border-radius: 20px;overflow: hidden;}
main .list-style5 .item img{border-radius: 20px;overflow: hidden;border: 4px solid #D9D9D9;width:100%}
main .list-style5 .item p>a{background: transparent;color:#0047B2;font-weight: 600;font-size:17px;padding:0;display: inline;}
main .list-style5 .item p>a:hover{color: #2276e1}
main .list-style5 .item p.description{font-size:16px;color:#333;/*max-height: initial;*//*overflow: hidden;*/max-height: calc(1.3em * 4); line-height: 1.3em;}
}
@media(max-width: 549px) {
#banners-content .list-style4 .item{width:50%}
main .list-style0 .item>div{float:none;width:auto;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ccc;padding-left:0}
main .list-style0 .item>a{float:none;width:100%}
main .list-style4 .item{width:33.33%}
main .list-style3 .item{width:100%}
main .list-style2 .item{width:100%}
/*main .list-style3.col3 .item{width:100%}*/
footer #copyright p{display:block;margin:0!important;padding:0!important}
#header-logo>div>div>img:last-child{height:50px}
#header-logo>div>div>img:first-child{width:100px}
#header-slider .owl-dots{display:none}
.slider .owl-dots{display:none}
}
@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%}
header #header-slider .banner-slider .headerImage{background-size:cover;background-position:center center}
}
@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>.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}
#header-logo h1{font-size:24px}
}