/***************** font-face : ThaiSans Neue *****************/
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Regular.eot');
    src: url('../fonts/ThaiSansNeue-Regular.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Regular.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Regular.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Bold.eot');
    src: url('../fonts/ThaiSansNeue-Bold.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Bold.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Bold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Italic.eot');
    src: url('../fonts/ThaiSansNeue-Italic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Italic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Italic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot');
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-BoldItalic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-BoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

 /***************** font-face : THSarabunNew *****************/
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNew.eot');
    src: url('../fonts/THSarabunNew.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNew.woff?') format('woff'),
    	url('../fonts/THSarabunNew.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBold.eot');
    src: url('../fonts/THSarabunNewBold.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBold.woff?') format('woff'),
    	url('../fonts/THSarabunNewBold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewItalic.eot');
    src: url('../fonts/THSarabunNewItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewItalic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBoldItalic.eot');
    src: url('../fonts/THSarabunNewBoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBoldItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewBoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : Kanit *****************/
@font-face {
    font-family: 'Kanit';
    src: url('../fonts/Kanit-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Kanit Medium';
    src: url('../fonts/Kanit-Medium');
    font-weight: normal;
    font-style: normal;
}

/***************** font-face : Mitr *****************/
@font-face {
    font-family: 'Mitr Light';
    src: url('../fonts/Mitr-Light');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Mitr Regular';
    src: url('../fonts/Mitr-Regular');
    font-weight: normal;
    font-style: normal;
}

 /***************** font-face : SRISURYWONGSE *****************/
@font-face {
    font-family: 'SRISURYWONGSE';
    src: url('../fonts/SriSuryWongse.eot');
    src: url('../fonts/SriSuryWongse.eot?') format('embedded-opentype'),
    	url('../fonts/SriSuryWongse.woff?') format('woff'),
    	url('../fonts/SriSuryWongse.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/***************** font-face : CSPraJad *****************/
@font-face {
  font-family: 'cs_prajadregular';
  src: url('../fonts/CSPraJad.eot');
  src: url('../fonts/CSPraJad.eot?#iefix') format('embedded-opentype'),
       url('../fonts/CSPraJad.woff') format('woff'),
       url('../fonts/CSPraJad.ttf') format('truetype'),
       url('../fonts/CSPraJad.svg#cs_prajadregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/***************** font-face : DBHelvethaicaX *****************/
@font-face {
  font-family: 'DBHelvethaicaX';
  src: url('../fonts/DBHelvethaicaX-55Regular.eot');
  src: url('../fonts/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DBHelvethaicaX-55Regular.woff') format('woff'),
       url('../fonts/DBHelvethaicaX-55Regular.ttf') format('truetype'),
       url('../fonts/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {
	font-family: 'THSarabunNew';
}
body {font-size: 2.2rem;}

/* Layout */
.wrapper {min-height: 100%;  position: relative; overflow: hidden;}
.wrapper:before,
.wrapper:after {  content: " ";  display: table;}
.wrapper:after {  clear: both;}

/* General Links */
a {
  color: #3c8dbc;
}
a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
  color: #72afd2;
}

/* **************** affix ************/
.section-top .section-top-area.affix {width: 100%; top: 0; z-index: 9999; position: fixed;}

/* ************ Offcanvas *************/
.c-offcanvas-bg {z-index: 10000;}
.c-offcanvas--overlay {z-index: 10001;}
.c-offcanvas--right {max-width: 100%;}
#offCanvas .close-offcanvas {position: absolute; top: 10px; right: 10px; height: 22px; width: 22px; line-height: 22px; font-size: 12px; text-align: center; color: #fff; border-radius: 50%; background: rgba(0,0,0,0.3);}
#offCanvas .offcanvas-inner {margin-top: 35px;}

#toggleCanvas {position: absolute; top: 50%; right: 15px; transform: translate(0, -50%); background-color: #fff; border: 1px solid #3c8dbc; padding: 5px;}
#toggleCanvas .c-button__text {height: 22px; display: block;}

/* ************ Offcanvas : Menu *************/
.offcanvas-inner {}
.offcanvas-inner .offcanvas-logo {padding: 15px 15px 0px; text-align: center;}
.offcanvas-inner .offcanvas-logo > div {display: block; width: 100%;}
.offcanvas-inner .offcanvas-logo  img.offcanvas-logo-img {max-width: 100%; }
.offcanvas-inner .offcanvas-logo  span.offcanvas-logo-name {margin-top:7px; display:block;}
#navbar-offcanvas li.hasChild {position: relative;}
#navbar-offcanvas li.hasChild > a.aMenu {margin-right: 25px;}
#navbar-offcanvas li.hasChild > a.dropdown-toggle {padding: 10px 15px 10px 0px; position: absolute; top: 0; right: 0;}
.menu-offcanvas {background-color: #fff; margin-top: 15px;}


/* ************ TOP ******************/
.section-top {}
.section-top .section-top-bar {}
.section-top .section-top-area {position: relative;}
.section-top .top-logo {margin-top: 5px; margin-bottom: 5px; display: inline-block;}
.section-top .top-logo img.top-logo-img {max-height: 48px; margin-right: 15px;}
.section-top .top-logo span.top-logo-name {font-weight: bold;}
.section-top .top-customtext {margin-top: 5px; margin-bottom: 5px; display: inline-block;}
.section-top .top-menu {float: right; display: inline-block; margin-top: 5px; margin-bottom: 5px; }

/* ************ Footer  ******************/
.section-footer {}
.section-footer .section-footer-bar {}
.section-footer .section-footer-area {padding-top:25px; padding-bottom: 15px;}
.section-footer .footer-logo {margin-top: 5px; margin-bottom: 5px; text-align: center;}
.section-footer .footer-logo img.footer-logo-img {max-height: 100px; }
.section-footer .footer-logo span.footer-logo-name {font-weight: bold; display: block; margin-top: 5px;}
.section-footer .footer-customtext {margin-top: 5px; margin-bottom: 5px; text-align: center;}
.section-footer .footer-copyright {margin-top: 5px; margin-bottom: 5px; text-align: center;}

/* *********** Body *****************/
.section-body {min-height: 250px;}
.section-body .section-body-header {width: 100%;}
.section-body .section-body-header .header-image {width: 100%; max-width: 100%;}
.section-body .section-body-breadcrumb {}
.section-body .section-body-breadcrumb .breadcrumb-zone {}
.section-body .section-body-breadcrumb .breadcrumb-zone .breadcrumb {background: none; padding: 8px 0px; border:none; border-bottom: 1px solid #e1e1e1; border-radius: 0px;}
.section-body .section-body-breadcrumb .breadcrumb-zone .breadcrumb a {color: #8c8b8b;}
.section-body .section-body-breadcrumb .breadcrumb-zone .breadcrumb > .active {color: #68a8de;}

/* ************* General *****************/
.panel-info-detail {}
.panel-info-list {}

.panel-info {font-size: 2.3rem;}
.panel-info .panel-title {padding-bottom: 5px; line-height: 1.5; }
.panel-info .panel-title .title { font-family: 'ThaiSans Neue'; font-size: 3.1rem; font-weight: bold; color: #245aa3;}
.panel-info .panel-title hr {margin-top: 7px; margin-bottom: 5px; border-color: #cccccc;}
.panel-info .panel-date {margin-bottom: 15px; }
.panel-info .panel-date .panel-date-print .fa-print {cursor: pointer;}
.panel-info .panel-detail {margin-bottom: 15px;}
.panel-info .panel-detail img {max-width: 100%;}
.panel-info .panel-introimage {margin-bottom: 15px;}
.panel-info .panel-introimage img {max-width: 100%;margin-left: auto;margin-right: auto;display: block;}
.panel-info .panel-gallery {margin-bottom: 15px;}
.panel-info .panel-gallery-slide {margin-bottom: 15px; overflow: hidden;}
.panel-info .panel-gallery-slide > div {margin-left: -15px; margin-right: -15px;}
.panel-info .panel-gallery-slide .sliderFor , .panel-info .panel-gallery-slide .sliderList {padding-left: 15px; padding-right: 15px;}
.panel-info .panel-gallery-slide .sliderFor {background-color: rgba(0,0,0,0.9); margin-bottom: 15px;}
.panel-info .panel-gallery-slide .sliderFor .img-container {padding-top: 50%; margin-bottom: 0px;}
.panel-info .panel-gallery-slide .sliderFor .img-container .img-inner {}
.panel-info .panel-gallery-slide .sliderFor .img-container .img-inner img {object-fit:contain;}
.panel-info .panel-gallery-slide .galleryNext { position: absolute; top: 50%; right: 15px; font-size: 60px; cursor: pointer; color: #FFF; background: rgba(0,0,0,0.8); padding: 0px 5px 0px 10px; transform: translate(0, -50%); }
.panel-info .panel-gallery-slide .galleryPrev { position: absolute; top: 50%; left: 15px; font-size: 60px; cursor: pointer; color: #FFF; background: rgba(0,0,0,0.8); padding: 0px 10px 0px 5px; transform: translate(0, -50%); }
.panel-info .panel-mutli {margin-bottom: 15px;}
.panel-info .panel-mutli .video-player {}
.panel-info .panel-mutli .video-player > div {text-align: center; margin-bottom: 15px;}
.panel-info .panel-mutli .video-player video {max-width: 100%;}
.panel-info .panel-document {margin-bottom: 15px;}
.panel-info .panel-document .panel-document-item {margin-bottom: 15px; }
.panel-info .panel-document .panel-document-item .panel-document-link {background-color: #EEEEEE; padding: 10px 15px;}
.panel-info .panel-document .panel-document-item .document-download-amount { color: #666; font-size: 0.8em; }
.panel-info .panel-social {margin-bottom: 15px;}
.panel-info .panel-social .btn-social-icon {position: relative;text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 34px;width: 34px;padding: 0;}
.panel-info .panel-social .btn-social-icon > :first-child {position: absolute;left: 0;top: 0;bottom: 0;width: 100%;line-height: 34px;font-size: 1.6em;text-align: center;border: none;}
.panel-info .panel-social .btn-social-icon.btn-facebook {color: #fff;background-color: #3b5998;border-color: rgba(0,0,0,0.2);}
.panel-info .panel-social .btn-social-icon.btn-twitter {color: #fff;background-color: #55acee;border-color: rgba(0,0,0,0.2);}
.panel-info .panel-social .btn-social-icon.btn-google {color: #fff;background-color: #dd4b39;border-color: rgba(0,0,0,0.2);}
.panel-info .panel-title-label {font-size: 2.8rem;padding: 5px 0px 15px;font-family: 'THSarabunNew'; font-weight: bold;}
.panel-info .panel-title-label img {height: 24px;}

.pager-category .pager {margin: 0px;}
.pager-category .pager .bootpag {margin: 0px;}
.pager-category .pager .bootpag li > a, .pager-category .pager .bootpag li > span {border-radius: 0px;}

.pager-item .pager {margin: 0px;}
.pager-item .pager .bootpag {margin: 0px;}
.pager-item .pager .bootpag li > a, .pager-item .pager .bootpag li > span {border-radius: 0px;}

.infocard {padding-bottom: 15px;border-bottom: 1px solid #e4e4e4;margin-bottom: 30px;}
.infocard .image {box-shadow: 5px 5px 5px rgba(125, 125, 125, 0.34);width: 100%;position: relative;}
.infocard .image .image-inner {width: 100%;padding-top: 80%;position: relative;}
.infocard .image .image-inner a {position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
.infocard .image .image-inner img {object-fit: cover;width: 100%;height: 100%;}
.infocard .detail {font-size: 2rem;padding: 15px 0px 7px;}
.infocard .detail .detail-title {font-size: 2.6rem; font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.2; padding: 3px 0px;}
.infocard .detail .detail-title a {color: #000;}
.infocard .detail .detail-intro {color: #000; height:72px; line-height: 1.2; overflow: hidden; position: relative; margin-top: 5px;}
.infocard .detail .detail-date {margin-top: 5px; }
.infocard .detail .detail-bt {margin-top: 5px;}
.infocard .detail .detail-bt .btn {font-size: 2rem;}

.inforow {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc;}
.inforow .image {display: block; float: left; width: 250px; }
.inforow .image .image-inner {width: 100%; padding-top: 100%; position: relative; }
.inforow .image a {position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.inforow .image img {width: 100%; height: 100%; object-fit: cover; }
.inforow .detail {margin-left: 265px; font-size: 2.2rem;}
.inforow .detail.with-no-image {margin-left: 0px;}
.inforow .detail .detail-title {font-size: 3rem; font-weight: bold; padding-bottom: 15px;}
.inforow .detail .detail-intro {padding-bottom: 15px;}
.inforow .detail .detail-date {}
.inforow .detail .detail-bt {margin-top: 5px;}
.inforow .detail .detail-bt .btn {font-size: 2rem;}
.inforow.noimage .detail {margin-left: 0px; }

.infocard .image .image-inner.ratio-1-1, .inforow .image .image-inner.ratio-1-1 { padding-top: 100%; }
.infocard .image .image-inner.ratio-4-3, .inforow .image .image-inner.ratio-4-3 { padding-top: 75%; }
.infocard .image .image-inner.ratio-3-2, .inforow .image .image-inner.ratio-3-2 { padding-top: 66.66%; }
.infocard .image .image-inner.ratio-8-5, .inforow .image .image-inner.ratio-8-5 { padding-top: 62.5%; }
.infocard .image .image-inner.ratio-16-9, .inforow .image .image-inner.ratio-16-9 { padding-top: 56.25%; }
.infocard .image .image-inner.ratio-2-1, .inforow .image .image-inner.ratio-2-1 { padding-top: 50%; }
.infocard .image .image-inner.ratio-3-1, .inforow .image .image-inner.ratio-3-1 { padding-top: 33.33%; }

.img-container {width: 100%; padding-top: 100%; position: relative; cursor: pointer; margin-bottom: 15px;}
.img-container .img-inner {position: absolute; top: 0; right: 0; left: 0; bottom: 0;}
.img-container .img-inner img {object-fit: cover; width: 100%; height: 100%;}

/* ***** Other ******* */
.lg-on .lg-backdrop {z-index: 10400;}
.lg-on .lg-outer {z-index: 10500;}