body {
  max-width: 1600px;
  min-width: 1340px;
  margin-left: auto;
  margin-right: auto;
}
/* html {
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);
} */
@media print {
  @page {
    size: landscape;
  }
  html,
  body {
    width: 21cm;
    height: 29.7cm;
  }
  #headernav {
    display: none;
  }
}

/*C3 Scrollbar */

/* width */

::-webkit-scrollbar {
  width: 10px;
}

/* Track */

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 181, 136);
  border-radius: 10px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: rgb(3, 206, 253);
}

/*C3 Scrollbar */

/*C3 font */

.k2d {
  font-family: "K2D", sans-serif;
}

.Sarabun {
  font-family: "Sarabun", sans-serif;
}

/*C3 size container */

.container-1340px {
  max-width: 1340px;
}

/*C3 text color  */

.text_D76D00 {
  color: #d76d00;
}

.text_153EB0 {
  color: #153eb0;
}

.text_B2B6B9 {
  color: #b2b6b9;
}

/*C3 background */

.bg_119E7C {
  background-color: #119e7c;
}

.bg_12C699 {
  background-color: #12c699;
}

.bg_089270 {
  background-color: #089270;
}

.bg_08946D {
  background-color: #08946d;
}

.bg_037C59 {
  background-color: #037c59;
}

.bg_01503D {
  background-color: #01503d;
}

.bg_F9872E {
  background-color: #f9872e;
}

.bg_EA6C05 {
  background-color: #ea6c05;
}

.bg_B6C9DA {
  background-color: #b6c9da;
}

.bg_DCE1E7 {
  background-color: #dce1e7;
}

.bg_EAEFF2 {
  background-color: #eaeff2;
}

.bg_menuL {
  background-image: url("../images/bg/bg-menuL.png");
  /* width: 245px; */
  height: 55px;
  background-repeat: no-repeat;
}

/*C3 padding */

.p5px {
  padding-top: 5px;
}

/*C3 margin */

.-m60px {
  margin-top: -60px;
}

/*C3 text stroke */

.text_sh_h {
  text-shadow: rgb(255, 255, 255) 3px 0px 0px,
    rgb(255, 255, 255) 2.83487px 0.981584px 0px,
    rgb(255, 255, 255) 2.35766px 1.85511px 0px,
    rgb(255, 255, 255) 1.62091px 2.52441px 0px,
    rgb(255, 255, 255) 0.705713px 2.91581px 0px,
    rgb(255, 255, 255) -0.287171px 2.98622px 0px,
    rgb(255, 255, 255) -1.24844px 2.72789px 0px,
    rgb(255, 255, 255) -2.07227px 2.16926px 0px,
    rgb(255, 255, 255) -2.66798px 1.37182px 0px,
    rgb(255, 255, 255) -2.96998px 0.42336px 0px,
    rgb(255, 255, 255) -2.94502px -0.571704px 0px,
    rgb(255, 255, 255) -2.59586px -1.50383px 0px,
    rgb(255, 255, 255) -1.96093px -2.27041px 0px,
    rgb(255, 255, 255) -1.11013px -2.78704px 0px,
    rgb(255, 255, 255) -0.137119px -2.99686px 0px,
    rgb(255, 255, 255) 0.850987px -2.87677px 0px,
    rgb(255, 255, 255) 1.74541px -2.43999px 0px,
    rgb(255, 255, 255) 2.44769px -1.73459px 0px,
    rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

/*C3 size */

.h175 {
  height: 175px;
}

.w470 {
  width: 470px;
}

.w420 {
  width: 420px;
}

/*C3 ลูกศร  */

.arrow {
  display: block;
  width: 0px;
  height: 0px;
  border: 30px solid transparent;
}

.arrow-m {
  display: block;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-radius: 6px;
}

.arrow.arrow-up {
  border-bottom-color: #ccc;
  border-top-width: 0px;
}

.arrow.arrow-down {
  border-top-color: #144b77;
  border-bottom-width: 0px;
}

.arrow.arrow-left {
  border-right-color: #ccc;
  border-left-width: 0px;
}

.arrow.arrow-right {
  border-left-color: #ccc;
  border-right-width: 0px;
}

.arrow-m.arrow-right {
  border-left-color: #00bffe;
  border-right-width: 10px;
}

.arrow-s {
  display: block;
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-radius: 6px;
}

.arrow-s.arrow-down {
  border-top-color: #faf100;
  border-bottom-width: 0px;
}

.arrow-s.arrow-down-w {
  border-top-color: #000000;
  border-bottom-width: 0px;
}

.arrow-s.arrow-right-w {
  border-left-color: #ffffff;
  border-right-width: 10px;
}

.arrow-s.arrow-right-b {
  border-left-color: #00bffe;
  border-right-width: 10px;
}

/* c3 ตัดคำ */

.cut {
  /* flex: 0; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*c3  Dropdown */

.submenu {
  position: absolute;
  width: 190px;
  top: 75%;
  /* left: 557px; */
  transform-origin: left top;
  font-weight: 200;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}

.submenu li {
  z-index: 15;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.submenu > li > a {
  /* padding: 1em 2em; */
  margin-top: 10px;
}

.submenu > li::after {
  content: "";
  position: absolute;
  top: -125%;
  /* height: 100%; */
  width: 100%;
  /* box-shadow: 0 0 50px rgba(0, 0, 0, .9); */
}

/* Odd stuff */

/* slick */

.slick-dots {
  justify-content: center;
}

.slick-dots li.slick-active button {
  background: rgb(0, 0, 0);
  height: 22px;
  text-align: center;
  width: 22px;
  opacity: 1;
  border: black;
}

.slick-dots li button {
  background: rgb(0, 0, 0);
  height: 15px;
  text-align: center;
  border-radius: 50%;
  width: 15px;
  --tw-bg-opacity: 0.5;
  cursor: pointer;
  color: transparent;
  outline: none;
  opacity: 0.2;
}

.slick-dots {
  bottom: -70px;
}

.img-sm .slick-prev::before {
  content: "";
  border-radius: 50%;
  transform: rotate(180deg);
  background: url(https://img.icons8.com/material-rounded/24/000000/circled-chevron-right.png);
  display: block;
  opacity: 1;
  height: 30px;
  width: 30px;
  background-repeat: round;
}

.img-sm .slick-next::before {
  content: "";
  border-radius: 50%;
  background: url(https://img.icons8.com/material-rounded/24/000000/circled-chevron-right.png);
  display: block;
  opacity: 1;
  height: 30px;
  width: 30px;
  background-repeat: round;
}

.img-sm .slick-prev {
  left: -15px;
}

.img-sm .slick-next {
  right: -28px;
}

/* Show dropdown */

.submenu,
.submenu li {
  opacity: 0;
  visibility: hidden;
}

.submenu li {
  padding: 9px;
  transition: 0.5s ease transform;
}

.submenu li:hover {
  color: #000000;
  background: #ffffff;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
  opacity: 1;
  visibility: visible;
}

.menu li a:hover {
  color: rgb(0, 86, 210);
  border-bottom: 3px solid #ffffff;
  transition: 0.2s;
}

.menu-active {
  /* border-bottom: 3px solid rgb(171, 255, 47); */
  border-bottom: 3px solid #ffffff;
  color: #fff;
}

ul.ul2nd {
  background: rgb(238, 206, 152);
}

.dropdown-content {
  background: rgb(216, 172, 95);
}

.dropdown-content li:hover {
  color: #000000;
  background: #ffffff;
}

/* C3 table to class */

/*C3 ICON  */

.alias {
  cursor: alias;
}

.all-scroll {
  cursor: all-scroll;
}

.auto {
  cursor: auto;
}

.cell {
  cursor: cell;
}

.context-menu {
  cursor: context-menu;
}

.col-resize {
  cursor: col-resize;
}

.copy {
  cursor: copy;
}

.crosshair {
  cursor: crosshair;
}

.default {
  cursor: default;
}

.e-resize {
  cursor: e-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.help {
  cursor: help;
}

.move {
  cursor: move;
}

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.no-drop {
  cursor: no-drop;
}

.none {
  cursor: none;
}

.not-allowed {
  cursor: not-allowed;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.row-resize {
  cursor: row-resize;
}

.s-resize {
  cursor: s-resize;
}

.se-resize {
  cursor: se-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.text {
  cursor: text;
}

.url {
  cursor: url(myBall.cur), auto;
}

.w-resize {
  cursor: w-resize;
}

.wait {
  cursor: wait;
}

.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

/* 3 line */

.multi-line-3truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 2 line */

.multi-line-2truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ant-list-item-meta-title a {
  display: flex;
}

.person-list > .box {
  display: inline-block;
  width: auto;
  margin: 20px;
  box-sizing: border-box;
  /* border: 1px solid #e9ebee; */
  border-radius: 2px;
  background: #fff;
  padding: 5px;
  vertical-align: top;
}

/*page nation*/

.pagination {
  height: 36px;
  margin: 0;
  padding: 0;
}

.pager,
.pagination ul {
  margin-left: 0;
  *zoom: 1;
}

.pagination ul {
  padding: 0;
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination li {
  display: inline;
}

.pagination a {
  float: left;
  padding: 0 12px;
  line-height: 30px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}

.pagination .active a,
.pagination a:hover {
  background-color: #109f7c;
  color: white;
}

.pagination .active a {
  color: white;
  cursor: default;
}

.pagination .disabled a,
.pagination .disabled a:hover,
.pagination .disabled span {
  color: #94999e;
  background-color: transparent;
  cursor: default;
}

.pagination li:first-child a,
.pagination li:first-child span {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.pagination-centered {
  text-align: center;
}

.pagination-right {
  text-align: right;
}

.pager {
  margin-bottom: 18px;
  text-align: center;
}

.pager:after,
.pager:before {
  display: table;
  content: "";
}

.pager li {
  display: inline;
}

.pager a {
  display: inline-block;
  padding: 5px 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.pager a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

.pager .next a {
  float: right;
}

.pager .previous a {
  float: left;
}

.pager .disabled a,
.pager .disabled a:hover {
  color: #999;
  background-color: #fff;
  cursor: default;
}

.pagination .prev.disabled span {
  float: left;
  padding: 0 12px;
  line-height: 30px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 1;
}

.pagination .next.disabled span {
  float: left;
  padding: 0 12px;
  line-height: 30px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}

.pagination li.active,
.pagination li.disabled {
  float: left;
  /* padding: 0 12px; */
  line-height: 30px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}

.pagination li.active {
  /* background: #364E63; */
  color: #fff;
}

.pagination li:first-child {
  border-left-width: 1px;
}

.person-list > .box {
  display: inline-block;
  width: auto;
  margin: 20px;
  box-sizing: border-box;
  /* border: 1px solid #e9ebee; */
  border-radius: 2px;
  background: #fff;
  padding: 5px;
  vertical-align: top;
}

.lightbox:focus {
  pointer-events: none;
  outline: 0;
}

.img-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(38, 40, 52, 0.9);
  text-align: center;
  display: none;
  z-index: 9999999999999;
  animation: pop-in;
  animation-duration: 0.5s;
  -webkit-animation: pop-in 0.5s;
  -moz-animation: pop-in 0.5s;
  -ms-animation: pop-in 0.5s;
}

.img-popup img {
  position: absolute;
  top: 50%;
  max-width: 100%;
  max-height: 99vh;
  box-shadow: 3px 3px 10px black;
  display: inline-block;
  transform: translate(-50%, -50%);
}

.lightboxfadeout {
  animation: fadeout;
  animation-duration: 0.5s;
  -webkit-animation: fadeout 0.5s;
  -moz-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
}

/*C3 screen */

@media only screen and (max-width: 1536px) {
  #nayok {
    margin-top: -75px;
  }
  #divmenu {
    padding-top: 20px;
  }
  #section_h {
    margin-top: 5rem;
  }
}

.bg-position50 {
  background-position: 50% 50%;
}