@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@200;300;400;500;600;700&display=swap');
body{ display:none; }
body img{ height:auto; max-width:100%; }
.clear {clear: both;}
a:link, a:visited, a:active{ text-decoration: none; cursor: pointer; }
a:hover {text-decoration: none; cursor: pointer; }
.pagination span, .pagination span a:hover{cursor: pointer;}
h1,h2,h3{ margin-top:10px;}
p { margin-bottom:0px; }
.flag { padding-right:5px;}
strong{ font-weight:bold !important; }
:focus {
  outline: none !important;
}

::-moz-focus-inner {
  border: 0 !important;
}

/*** head-slide  ***/
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26); }

/*** promote ***/
#promote{ padding:0px;}

#top{ padding:0px; overflow:hidden !important;}
#lang html5 { display:block !important;}
.switcher{ position:absolute !important;}

#slide{ overflow:hidden !important;}
#slide, #slide-body{ overflow:hidden !important;}

/*** menu ***/
#main-menu{box-shadow: 0px 2px 6px #505050; z-index:999; position:relative;}
#menu-body{ padding:0px;}
.camera_wrap .camera_pag .camera_pag_ul{ text-align:center !important;}

/*** content ***/
#content-1, #content-1-body{ overflow:hidden !important;}
#content-2, #content-2-body{ overflow:hidden !important;}
#content-3, #content-3-body{ overflow:hidden !important;}
#content-4, #content-4-body{ overflow:hidden !important;}
#content-5, #content-5-body{ overflow:hidden !important;}



#footer, #footer-body{ overflow:hidden !important;}
#footer img a:link, #footer img a:visited, #footer img a:active{ text-decoration: none; border:none !important; }
#footer img a:hover {text-decoration: none; border:none !important; }


.jt-cs .hover-icons a:link { color:#fff !important;}
.jt-cs .hover-icons a.icon-url{ color:#fff !important;}
.jt-cs p.readmore{ margin-top:10px !important; }
.fa-file-text-o:before{ display:none !important;}
.jdscf-submit-btn{ margin-top:15px !important;}

.mod_userstat_main{ border:none !important; margin:0px !important; border-radius:0px !important ;  }

/*** copyright ***/
#copyright{ text-align:center; }
.footer2{ font-size:12px;}
#copyright a:link, #copyright a:visited, #copyright a:active{text-decoration: none;}
#copyright a:hover {text-decoration: none;}


.breadcrumb{ margin-bottom:0px !important;}

.input-group{ padding-bottom:10px;}

.category-list table th, .category-list .table-bordered>:not(caption)>*>*{ border:none !important;}
.text-muted{ clear:both !important;}


.card{ background:none !important;}
li.level1 > span a{ border-bottom:1px solid #f3f3f3 !important;}


#component-left{ }
.controls{ margin-bottom:10px !important; }
.form-select{ margin-bottom:15px;}


th{ font-weight:normal !important;}

.mfp_block_title{ display:none !important;}
.md-modal{ width:100% !important; max-width:55% !important; background:none !important; display:block !important;}
.md-content{ background:none !important; padding:0px !important; }
.md-content img{ border:3px solid #fff;}
.table>:not(caption)>*>* { background-color: transparent;}
.com-users-login, .com-users-registration{ padding: 20px 0 ;}
.blog{ padding:20px 0;}
.eb_privacypolicy .button_cookie + .button_cookie{ margin: 10px 0 0 0 !important;}
.djslider-loader-default{ overflow:visible !important;}

*,
*::before,
*::after {
  box-sizing: border-box;
}
.breadcrumb {
  display: flex !important;
  flex-wrap: wrap ;
  padding: 0 0 !important;
  list-style: none !important;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left !important;
  padding-right: 0.5rem !important;
  color: #6d757e !important;
  content: var(--breadcrumb-divider, "/") !important/* rtl: var(--breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: #484f56;
}
.form-control{ padding:3px !important; border-radius:0px !important;  }
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}



figure {
  margin: 0 0 2em;
}
figure.float-start {
  margin-right: 1em;
}
figure.float-end {
  margin-left: 1em;
}
[dir=rtl] figure.float-start {
  margin-right: 0;
  margin-left: 1em;
}
[dir=rtl] figure.float-end {
  margin-right: 1em;
  margin-left: 0;
}

figcaption {
  font-size: 0.9em;
  color: #6d757e;
}

.mod-menu {
  flex-direction: column;
}

meter {
  width: 100%;
}




.error_site .page-header {
  margin-top: 1em;
}

[class^=container-] .span-col-2,
[class*=" container-"] .span-col-2 {
  flex: 0 0 50%;
  max-width: calc(50% - 1em);
}
[class^=container-] .span-col-3,
[class*=" container-"] .span-col-3 {
  flex: 0 0 33.333%;
  max-width: calc(33.333% - 1em);
}
[class^=container-] .span-col-4,
[class*=" container-"] .span-col-4 {
  flex: 0 0 25%;
  max-width: calc(25% - 1em);
}
[class^=container-] .span-col-5,
[class*=" container-"] .span-col-5 {
  flex: 0 0 20%;
  max-width: calc(20% - 1em);
}

@supports (display: grid) {
  [class^=span-],
[class*=" span-"] {
    grid-column-end: auto;
    grid-row-end: auto;
  }

  @media (min-width: 576px) {
    [class^=span-col],
[class*=" span-col"] {
      grid-column-end: span 2;
    }
  }

  @media (min-width: 768px) {
    .span-col-2 {
      grid-column-end: span 2;
    }

    .span-col-3 {
      grid-column-end: span 3;
    }

    .span-col-4 {
      grid-column-end: span 4;
    }

    .span-row-2 {
      grid-row-end: span 2;
    }

    .span-row-3 {
      grid-row-end: span 3;
    }

    .span-row-4 {
      grid-row-end: span 4;
    }
  }
  [class^=container-] [class^=span-],
[class^=container-] [class*=" span-"],
[class*=" container-"] [class^=span-],
[class*=" container-"] [class*=" span-"] {
    flex: 0 1 auto;
    max-width: none;
  }
}
.blog-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin-right: -0.5em;
  margin-bottom: 1em;
  margin-left: -0.5em;
}
@media (min-width: 768px) {
  .blog-items.columns-2 > div {
    width: 50%;
  }
  .blog-items.columns-3 > div {
    width: 33.33333%;
  }
  .blog-items.columns-4 > div {
    width: 25%;
  }
}

.blog-item {
  display: flex;
  flex-direction: column;
  padding: 0 0.5em 1em;
  margin-bottom:30px;
  
}
.boxed .blog-item {
  background-color: white;
  box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--cassiopeia-color-primary);
}
.boxed .blog-item .item-content {
  padding: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: row;
}
.image-left .blog-item .item-image, .image-right .blog-item .item-image {
  flex: 1 0 40%;
}
.blog-item .item-image {
  margin-top: 3px;
  margin-bottom: 15px;
  
}
.boxed .blog-item .item-image {
  margin-bottom: 0;
}
.image-right .blog-item .item-image {
  order: 1;
}
.image-bottom .blog-item .item-image {
  margin-top: -15px;
  order: 1;
}
.image-left .blog-item .item-content {
  padding-left: 25px;
}
.image-right .blog-item .item-content {
  padding-right: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: column;
}
@media (min-width: 768px) {
  .image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
  }
}

.article-info dd {
  padding: 0;
}

@supports (display: grid) {
  .blog-items {
    display: grid;
    margin: 0 0 1em;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: 1em;
	
	padding-bottom:5%;
  }
  .blog-items .blog-item {
    padding: 0;
  }
  .blog-items[class^=columns-] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  @media (min-width: 768px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }
    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}
.blog-items[class^=masonry-], .blog-items[class*=" masonry-"] {
  display: block;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.blog-items[class^=masonry-] .blog-item, .blog-items[class*=" masonry-"] .blog-item {
  display: inline-flex;
  margin-bottom: 1em;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
}



/**********************
/*PAGINATION GENERAL
**********************/
.pagenav {
text-align: center; 

line-height: 2.1em; 
text-decoration: none;
border: 1px solid #dadada !important;
display: inline-block;
margin-left:5px;
}

.pagenav ul {
display: inline-block;
*display: inline;
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
text-align: center;  
}

.pagenav li {
display: inline;
padding:  10px;
}

.pagenav a,span.pagenav {
padding: 20px;
}

.pagination {
float:none;
text-align:center;
width:100%;
margin-top:30px;
margin-bottom:40px;	
}

.pagination ul {
padding: 0;
text-align:center;
width:100%;
margin-bottom:40px;
}

.pagination li {
display: inline;
float:left; 


}
body{ display:none; }
.pagination li a {

text-decoration: none;
display: inline-block;

}

.pagination .active  {

 background:#252525; 
 
} 

.pagination span,.pagination span  a:hover {

margin-left:5px;



}

.pagination p.pull-right {
float: none;
text-align: center;
margin-bottom:15px;
}

ul.pager.pagenav  {
border:none !important;
text-align:center;
width:100%;
margin-bottom:25px;
}

 ul.pager.pagenav > li.next > a ,ul.pager.pagenav > li.previous > a {
background:#262626;
color:#fff !important;
margin:10px 12px 20px 0 ;

}
.pager li>a{ border-radius:0px !important; }
 
ul.pager.pagenav > li.next > a:hover ,ul.pager.pagenav > li.previous > a:hover {
border:none;
background:#262626;
color:#fff;
}

div.gk-article > ul.pager.pagenav ul li a:before {
content:"";
}

ul.pagination-list {
padding-bottom:40px;
}













