:root{
  --space : 80px;
  --primary-color: #008bac;
}
/* ::selection {
  color: var(--primary-color);
  background: rgba(13, 110, 253, 0.25);
} */
html,body{font-family: 'Kanit', sans-serif;color: #76777b;font-size: 16px;font-weight: 300;line-height: 1.4;overflow-x: hidden;width: 100vw;}

a{text-decoration: none;}
a:hover{ }

p{line-height: 1.4;}
p:last-child{margin-bottom: 0 !important;}

:focus{ outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; }

/* Container Width */

@media (min-width: 1300px){
  .container{ max-width: 1280px; }
}
@media (min-width: 1400px){
  .container{ max-width: 1320px; }
  .container{padding-left: 0; padding-right: 0;}
}
@media (min-width: 1550px){
  .container{ max-width: 1440px; }
  .container{padding-left: 0; padding-right: 0;}
}

/* Container Width */
.container{padding-left: 20px;padding-right: 20px;}
header{background-color: #fff; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out;}
.small-header header { position: fixed; top: -90px; z-index: 999; width: 100%; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out; }
.small-header header.stick { top: 0px; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out; }
.small-header  main {margin-top: var(--headerHeight);}
.banner .ratio{--bs-aspect-ratio:12%;}
.section-padding{padding-top: var(--space); padding-bottom: var(--space);}
section{background-color: #fafafa;}
.banner-detail{ text-align: center;}
.banner-detail .inner-text{max-width: 1000px; margin: 0 auto; font-size: 18px;}
h1{font-weight: 100;}
.btn-big{padding: 10px 40px;font-size: 20px;margin-top: 20px;}

main {min-height: calc(100vh - 82px - 95px);}

.card-list .card{border: 0; border-radius: 0; height: 100%; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out;}
.card-list .card:hover{box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16); transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out;}
.card-list .card h5{font-weight: 300; font-size: 18px;}
.card-list .card h6{font-weight: 100; font-size: 24px;}
.card-list .card .card-body{color: #ffffff; padding: 30px 20px 30px 20px; }
.card-list .card .card-body .btn{margin-top: 10px;}

.card-list > [class^="col-"]:nth-child(6n + 1) .card-body{ background-color:#002a3a }
.card-list > [class^="col-"]:nth-child(6n + 2) .card-body{ background-color:#005e85 }
.card-list > [class^="col-"]:nth-child(6n + 3) .card-body{ background-color:#00956e }
.card-list > [class^="col-"]:nth-child(6n + 4) .card-body{ background-color:#d64123 }
.card-list > [class^="col-"]:nth-child(6n + 5) .card-body{ background-color:#9c182f }
.card-list > [class^="col-"]:nth-child(6n + 6) .card-body{ background-color:#d7c724 }

.list-view {}
.list-view ul {padding-left: 0;display: flex;flex-wrap: wrap;}
.list-view ul li{list-style: none; padding: 20px; background-color: #fff; border-radius: 0; height: 100%; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out;flex: 0 0 auto;width: 50%;margin: 16px 0;}
.list-view ul li:hover{box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);z-index: 1;}
.list-view ul li h5{font-weight: 300; font-size: 16px;}
.list-view ul li h6{font-weight: 100; font-size: 24px; color: var(--primary-color);}
.list-view ul li > div{color: #ffffff; padding: 30px 20px 30px 20px; }
.list-view ul li > div .btn{margin-top: 10px;}
.list-view ul li p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;white-space: initial;}
.input-group input.form-control,
select.form-select{ border: 1px solid #76777b; font-size: 14px; color: #58595b; font-weight: 300 ; border-radius: 5px; padding: 15px 10px ; height: 100%; background-color: #f6f6f6; }
select.form-select:focus-visible,
select.form-select:focus{ border: 1px solid #76777b; outline: 0;}
.btn-primary{background-color: var(--primary-color); border-color: var(--primary-color);}
.btn-primary:focus-visible,
.btn-primary:focus,
.btn-primary:hover{background-color: #005e85; border-color: #005e85;}
.banner-info{position: relative;}
.banner-info:after{content: ''; position: absolute; height: 100%;  width: 100%; bottom: 0; background: rgba(0,0,0,0.85); background: linear-gradient(0deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0) 100%);}
.banner-title{z-index: 9;position: absolute;top: 50%;height: auto;color: #fff;padding: 0;transform: translateY(-50%); }
.banner-title h1{font-weight: 100;}
.banner-title h5{font-weight: 300;}

.card-text {overflow: hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;white-space: initial;}

.section-padding .col-auto{padding:0px;}
.artical-details h2{font-weight: 300; color: #005e86; margin-bottom: 20px; margin-top: 30px;}
.artical-details h3{font-weight: 300; color: #005e86; margin-bottom: 20px; margin-top: 30px;}
.artical-details h4{font-weight: 300; color: #005e86; margin-bottom: 20px; margin-top: 30px;}
.artical-details h5{font-weight: 300; color: #005e86; margin-bottom: 20px; margin-top: 30px;}
.artical-details h6{font-weight: 300; color: #005e86; margin-bottom: 20px; margin-top: 30px;}

.artical-details ul{padding-left: 0;}
.artical-details ul li{position: relative; list-style: none; padding-left: 30px; margin-bottom: 15px;}
.artical-details ul li:last-child{margin-bottom: 0;}
.artical-details ul li::before{content: ''; position: absolute; left: 0; top: 10px; border: 2px solid #005e86; border-radius: 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); text-indent: -624.9375rem; background-color: transparent; height: 12px; width: 12px; }
.artical-details img {max-height: 450px; margin: 0 auto; border-radius: 5px; max-width: 100%; margin-top: 20px;}
.artical-details img + *{margin-top: 40px;}

footer{ background-color: #dad9d7; font-size: 18px; padding: 35px 0; color: #76777b; }
footer a{color: #76777b; text-decoration: underline;}
footer a:hover{color: #76777b;}

.bg-green{background-color: #3f863f; color: #fff;}

.login {min-height: calc(100vh - 185px); }
section.login {position: relative;  display: flex; align-items: center; overflow: hidden; }
section.login::before{ content: ''; position: absolute; top: 0; bottom: 0; right: 3%; width: 220px; background-image: url(/wp-content/uploads/2022/07/icon.png); background-repeat: no-repeat; background-size: contain; background-position: bottom right; opacity: 0.3; transform: rotate(12deg); }
.login h1{font-weight: 100; color: #005e86; text-align: center; margin-bottom: 30px;}
#loginform{ max-width: 500px; padding: 30px; background-color: #ffffff; margin: 0 auto; border-radius: 13px; position: relative; }
#loginform label{ margin-bottom: 10px; }
#loginform input[type="password"],
#loginform input[type="text"]{ width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #f6f6f6; background-clip: padding-box; border: 1px solid #76777b; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
#loginform .button.button-primary{ border-radius: 50px; font-weight: 600; letter-spacing: normal;width: 100%; padding: 15px 10px; border: 1px; color: #fff; text-align: center; background-color: var(--primary-color); border-color: var(--primary-color); transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out;}
#loginform .button.button-primary:focus-visible,
#loginform .button.button-primary:focus,
#loginform .button.button-primary:hover{transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out; background-color: #005e85; border-color: #005e85; }

.section-padding .select2-container--default .select2-selection--multiple{border: 1px solid #76777b;font-size: 14px;color: #58595b;font-weight: 300;border-radius: 5px;padding: 15px 10px;height: 100%;background-color: #f6f6f6;}
.section-padding .select2-container--default .select2-search--inline .select2-search__field{margin: 0;font-weight: 300;font-family: 'Kanit';}
.section-padding .select2-container--default .select2-search--inline .select2-search__field:placeholder{font-family: 'Kanit';}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background: #dc3545; color: #fff;border-top-left-radius: 3px;border-bottom-left-radius: 3px;display: flex;justify-content: center;height: 100%;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {line-height: 17px;}
.select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below {margin-top: 32px;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: var(--primary-color);}


/*Banner Section Start*/
.banner-section{padding:70px 0px;}
.banner-section .banner-img{width: 100%;}
/*.banner-section .banner-image img{height: 100%;max-height: 400px;}  */
.banner-section .content-part{padding: 25px 0 0;}
.banner-section .content-part p{font-size: 20px;}
.banner-section h1{font-size: 3rem;margin-bottom: 20px;line-height: 1; font-weight: 400;}
.gal-load-more a.btn.loadpost {border-radius: 50px;padding: 6px 20px;}


/*Banner Section End*/
.options-content .full-img{overflow:hidden;}
.options-content .full-img img{height:auto;width: auto;}
.options-content .double-img img{width:100%;height:auto;margin-bottom:30px;}
.pdf-link img{height:30px;width:auto;margin-right: 7px;margin-top:0;}
.pdf-link a{text-decoration:underline;    line-height: normal;display: inline-block;}
img{max-width:100%;}
.artical-details .double-img li{padding:0px 10px;flex: 1;display:inline-block;min-width: 25%;}
.artical-details .double-img li::before{display:none;}
.artical-details p{font-size:18px;}
.artical-details .double-img{display: flex;flex-wrap: wrap;}
.double-img .img-wrap{background-color: #f4f4f4;padding: 0;border-radius: 5px;}
.double-img .img-wrap a{width: 100%;height: 100%;display: flex;overflow: hidden;align-items: center;justify-content: center;border-radius: 5px; padding-top: 60%;position: relative;}
.double-img .img-wrap a img{margin:0;height:auto;object-fit: contain;max-height: unset;max-width: 100%;position: absolute;left: calc(100% - 50%);top: calc(100% - 50%);bottom: 0;right: 0;transform: translate(-50%, -50%);}

.fancybox-close-small {color: #fff !important;padding: 0 !important;right: -35px !important; top: -35px !important;}

/* Responsive Media */
@media (max-width: 1199.98px){
  .banner-section{padding: 90px 0px;} 
  .banner .ratio{--bs-aspect-ratio: 22%;}
}
@media (max-width: 991.98px){
  :root{
    --space : 60px;
  }
  html,body{ font-size: 16px; }
  #loginform{  padding: 20px;}
  #loginform input[type="password"],
  #loginform input[type="text"]{ padding: 0.275rem 0.5rem; }
  #loginform .button.button-primary{padding: 10px;}
  .banner-section .content-part{padding: 15px 0 0;}
  .banner-section{padding: 70px 0px;}
  .btn-big{padding: 8px 25px;font-size: 16px;margin-top: 10px;}
  .banner-section .content-part p{font-size: 16px;}
  .banner-section h1{font-size: 2rem;}
  .list-view ul li {width: 100%;}
  .artical-details p{font-size:16px;}
  .banner .ratio {--bs-aspect-ratio: 24%;}
}
@media (max-width: 767.98px){
  .banner-section{padding: 40px 0px;}
  /*.banner-section .banner-image{margin-bottom: 20px;}*/
  /*.banner-section .content-part{padding: 0;}*/
  .options-content .double-img img{margin-bottom:25px;}
  .options-content .video-wrapper {position: relative; padding-bottom:45.25%; padding-top: 25px; height: 0; } 
  .options-content .video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  section.section-padding.artical-details { padding: 20px 0;}
  .fancybox-button svg {height: 30px !important; }
  .artical-details .double-img { display: block;}
  .artical-details .double-img li{padding: 0px 10px;flex: auto;display: inline-block;width:100%;}
}
@media (max-width: 579.98px){
  section.login::before{ width: 100px; }
  .banner .ratio {--bs-aspect-ratio: 50%;}
  
}
@media (max-width:360px){

}
/* Responsive Media End*/