body,html {
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
  width: 100%;
  cursor: default;
  /*---overflow-x: hidden;--*/
  background-color: #fff;
  color:#272c30;
  word-wrap: break-word;
}
a { text-decoration: none; }
.fix-page{ 
  min-width: 1320px;
}
.bg-main {
  background:url('img/bg_main.jpg');
  background-position: center;
          background-size: cover;
          -o-background-size: cover;
          -moz-background-size: cover;
          -webkit-background-size: cover;
  background-repeat: no-repeat;
      height: 100vh;
  background-attachment:fixed;
}
.showTab { display:none; }
@media screen and (max-width:992px) {
  .hideTab { display:none; }
  .showTab { display:block; }
}
/*------------- text ------------*/
.fw-300{ font-weight: 300;}
.fw-500{ font-weight: 500;}
.fw-700{ font-weight: 700;}
.fs-36{font-size: 36px;}
.fs-30{font-size: 30px;}
.fs-26{font-size: 26px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-12{font-size: 12px;}
.fs-11{font-size: 11px;}
.fs-10{font-size: 10px;}
.txtbox-align{ text-align:end;}
.w-selec{ max-width:500px;}
.tball-mw{ min-width:1200px}
@media screen and (max-width:992px) {
  .txtbox-align{ text-align:start;}
  .w-selec{ width:100%;}
}
.hr-das{
  border-top: 1px dashed;
}
/*-------------------------------*/

.fcr-gray {color:#a7a7a7;}
.fcr-darkgray {color:#777777;}
.fcr-dark {color:#272c30;}
.bg-table-yl {background-color:#fffbe6;}
.bg-line-1{ 
  height: 1px;width: 100%;
  background-color: #b7b7b7;
}
.box-link { 
  background-color:#eff9fb;
  font-size: 15px;
}
.box-cp { 
  background-color:#dce8ff;
  border:1px solid #acbad4;
  border-radius: 6px;
  padding: 15px;
}
.line-cp { 
  border:1px solid #acbad4;
}
.cut-text-multi1{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cut-text1{
  text-decoration: none;
  text-overflow: ellipsis;
  display: block; overflow: hidden; 
  white-space: nowrap; 
  width: 320px;
  }
  .img_weblink{width:200px;height:50px;}

/*----------------------- menu bar -------------------------------*/

.dropdown-menu { font-size: 14px; }
.dropdown-item { color:#272c30; }
.nav-link{
  font-size: 14px;
  color:#6d7272; 
}
.nav-link:hover , .nav-link:focus{
  color:#272c30; 
}
.dropdown-item:active {background-color: #a7a7a7;}

.dropend:hover > .dropdown-menu{
  display: block;
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
  font-size: 14px;
}



/*----------------------- menu bar mobile -------------------------------*/

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background:#fff;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 8px;
}


nav {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: block;
  width: 100%;
  float: left;
  background-color: #fff;
  border-bottom: 0.1px solid #6c757d;
}
nav a {
  display: block;
  padding: 0 10px;
  color: #6c757d;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position:  static;
}
li > a:after { content: ' +'; }

.toggle, [id^=drop] {
  display: none;
 }
 li > a:only-child:after { content: ''; }

 .toggle {
  display: block;
  padding: 0 10px;
  color: #6c757d;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
  border: none;
}
[id^=drop]:checked + ul { display: block; }

nav ul ul .toggle,
nav ul ul a { 
  padding: 0 40px; 
  padding-right: 10px;
  font-size: 16px;
  background-color: #6c757d;
  color: #ffffff;
  border-bottom: 0.1px solid #ffffff;
}
nav ul ul ul a { 
  padding: 5px 60px; 
  padding-right: 10px;
  line-height: 110%;
  font-size: 16px;
}
nav ul ul {
 float: none;
 position: static;
 color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
 display: block;
 width: 100%;
}
nav ul ul ul li { position: static;
}

/*-------------------*/

.box-data{
  background-color: #f5f5f5;
  border-radius: 8px;
}
.box-data2{
  background-color: #f5f5f5;
  border-radius: 8px;
}

figure > img{
  max-width:900px;
}
.input_data_ct{ min-width: 150px; }

.cut-text-multi3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh_pic{ max-height: 500px;min-height: 500px; }
.mh_1pic{ max-height: 600px;}
.mh_upload{ min-height: 250px; }

/*----------------------- img popup -------------------------------*/
.imgpopup{
  cursor: pointer;
}
.bd_imgpopup{
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  margin: 0;
}
.bd_imgpopup_slide{
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  margin: 0;
}
.imgpopupshow{
  max-width: 1000px;
  max-height: 1000px;
  background: #FFF;
  position: absolute;
  top: 40%;
  transform: translate(-50%,-50%);
}
.div_imgpopupshow_slide{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn_close_imgpopupshow{
  top: 95%;
  position: absolute;
  transform: translate(-50%,-50%);
}