/*!
 * Fine Arts Department v1 theme child (https://www.finearts.go.th/)
 * Copyright 2024 Fine Arts Department
 */

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("../contact.css");
body{ font-family: "Prompt", sans-serif; font-weight: 400; font-style: normal; font-size: 16px;}

a { cursor: pointer; color: #0d6efd; }
a, a:hover { text-decoration: none; }
:root{--prime-ten:#aa8562;}

a.nav-link{color: #000;}
.navbar-nav .nav-link.active{color: #FFF; text-decoration: underline solid white; text-underline-offset: 0.7em; }
@media (min-width: 1400px) { .xxl-mx-auto { margin-right: auto; margin-left: auto;} }
@media (min-width: 1301px) and (max-width: 1399.98px) { .xxl-mx-auto { margin-right: auto; margin-left: auto;}}
@media (min-width: 992px) and (max-width: 1300px) { .xl-ms-auto {margin-left: auto;} }
@media (min-width: 992px) and (max-width: 1100px) { .xl-ms-auto { font-size: 14.5px;} }
.dropdown-menu .dropdown-item:hover{background-color: #c6a07c !important; }

/* ============ desktop view MouseOver Menu ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; background-color: rgba(184, 145, 108, 1) !important; border: 0; color: #000;}
  .navbar .nav-item .dropdown-menu:hover{}
}	
/* ============ desktop view .end// ==================== */

.logo img{filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));}
.logo {margin-top: -30px; position: absolute;}
@media (max-width: 992px) { .logo {margin-top: 0; position: relative;} }
@media (min-width: 768px) and (max-width: 991px) {.logo { position: relative !important;}   }
@media (min-width: 576px) {.md-px-5 {padding-left: 3rem; padding-right: 3rem;} }
.menu-hamburger {z-index: 1;}

/* Select Language */
.w-131px{width: 131px;}
.h-20px{height: 20px;}
.language-style .select2-search__field {display: none;}
.select2-search__field {display: none;}
.language-style .select2-container--default .select2-selection--single{background-color: transparent; border: 0;}
.language-style .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #444 transparent;}
.language-style .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #444 transparent transparent transparent;}
.select2-search--dropdown{padding: 0;}
.select2-search--dropdown{background-color: transparent;}
.select2-dropdown{background-color: transparent;  border: 0;}
#select2-kt_docs_select2_country-results li {background-color: #b8916c !important; color: #444;}
#select2-kt_docs_select2_country-results li:hover {background-color: #c6a07c !important; color: #444;}
#select2-kt_docs_select2_country-results {border-radius: 8px;}
#select2-kt_docs_select2_country-results .select2-results__option span{color: #444;}

.textwww{color: #000; font-size: 14px; display: inline-block; align-content: center;}
.textwww:hover{color: #444;}
.bg-search{background-color: #be9673 !important;  border-radius: 30px; border: 0;}
.bg-search::placeholder {color: white; font-size: 14px;  font-family: "Sarabun", sans-serif;  font-weight: 400; }
.bg-search:focus::placeholder { color: #333;}
.bg-lightblue0{ background-image: linear-gradient(to right, rgba(74, 194, 203, .5), rgba(74, 194, 203, .5)), url('../../images/bg-1.png');
    background-size: cover, cover;  background-position: center, center;  background-repeat: no-repeat, no-repeat;}
/*.bg-lightblue{background-color: #aa8562 !important;}*/
.bg-lightblueTriangle {position: relative; z-index: 1;}
/*.bg-lightblueTriangle { position: absolute; inset: 0 }*/
.centerTriangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: #54c4cb; }
.bg-head-img {background-color: #aa8562 !important; background-image: url(../../images/bg-header-brown.png); background-repeat: no-repeat; background-size: cover; background-position:left 0px bottom -40px;}
  
/*.BACKGROUND*/
.fancy-feature-nineteen:before {content: ''; position: absolute; width: 100%; height: 40px; left: 0; bottom: -38px; z-index: -1; 
  background: 
   url(../../images/bg-header-brown.png) left 5px bottom 0px / cover no-repeat,
   url(../../images/shape_86_brown.svg) center bottom / cover no-repeat;}
.fancy-feature-nineteen .shape-three {position: relative;  width: 30px; height: 30px;  left: 20%;  bottom: -40px; background: #d5aa6d;}
@media (max-width: 576px) {
  .fancy-feature-nineteen:before{background: url(../../images/shape_86_brown.svg) center bottom / cover no-repeat;}
  .bg-head-img {background-image: none;}
}

.w-80{width: 80%;}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 4rem; }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption { bottom: 3rem; z-index: 10; }
  /* Declare heights because of positioning of img element */
  .carousel-indicators [data-bs-target]{height: 12px; width: 12px; border-radius: 50%; margin-right: 4px; margin-left: 4px; opacity: 1; border-top:0; border-bottom:0;}
  .carousel-indicators {bottom: -45px; margin-bottom: 0;}
  .carousel{margin-bottom: 0;}
  .carousel-indicators .active{height: 9px; width: 9px; opacity: 1; border: 2px solid white; background-color: transparent;}

  /* NEWS Tab
-------------------------------------------------- */
.news-tab {border-bottom:0;}
.news-tab .nav-link{color: #000; padding: 8px 25px 8px 25px; border: 1px solid #e6e6e6;}
.news-tab .nav-link.active {background-color: #db5927; color: #FFF;border: 1px solid #db5927;}
.card-text{height: 72px; overflow: hidden;}
.text-date, .text-view {color:#76777a; font-size: 14px; font-family:"Sarabun";}
.icon-eye, .icon-date {color:#949494; font-size: 13px;}
.btn-outline-blue {border-radius: 20px; border: 1px solid #b08257; color: #b08257; padding: 4px 15px 4px 15px;}
.btn-outline-blue:hover { border: 1px solid #b08257; color: #b08257; background-color: #fdf5eb;}
.post-img{border-radius:10px; overflow:hidden; height:300px; object-fit: contain; background-color: #eaeced;}
.tran4s { transition: .4s ease-in-out;}
.card-text a{color: #000;}
.card-text a:hover{color:#0d6efd;}
.btn-viewall{color: #b08257; font-weight: 500;}
.btn-viewall:hover{color: #0d6efd;}
.card{ background-color: transparent;}

.list-news ul {list-style: none; margin-top: 40px;}
.list-news ul li { padding-left: 30px; padding-top: 15px; padding-bottom: 15px; background-image: url(../../images/pdf.png); background-size: 20px 20px; background-repeat: no-repeat; background-position: 0px 15px; border-bottom: 1px dotted #c2c2c2;}
.list-news ul li a{ color: #000;}
.list-news ul li a:hover{color:#0d6efd;}
.list-download ul {list-style: none; margin-top: 40px;}
.list-download ul li { padding-left: 30px; padding-top: 15px; padding-bottom: 15px; background-image: url(../../images/pdf2.svg); background-size: 20px 26px; background-repeat: no-repeat; background-position: 0px 15px; border-bottom: 1px dashed #c2c2c2;}
.list-download ul li a{ color: #000;}
.list-download ul li a:hover{color:#0d6efd;}

  /* general knowledge
-------------------------------------------------- */
.fancy-km {background: #f5f5f5;  z-index: 1;}
.fancy-km:before {
  content: ''; position: absolute; width: 100%; height: 26px; background: url(../../images/shape_87.svg) center top / cover no-repeat;
  left: 0; top: -25px; z-index: -1;}
.fancy-km:after {
  content: ''; position: absolute; width: 100%; height: 40px; background: url(../../images/shape_88.svg) center bottom / cover no-repeat;
  left: 0; bottom: -38px; z-index: -2;}
.fancy-km .shape-one {width: 30px; height: 30px; right: 21%; top: -40px; background: #24b9d7;}
.fancy-km .shape-two {width: 30px; height: 30px; left: 30%; bottom: -40px; background: #e35d2c;}
.fancy-km .shape-three {width: 10px; height: 10px; left: 4%; top: 43%; background: #00d8af; animation: 5s linear infinite jumpThree;}
.shapes {position: absolute; z-index: -1;}

.title-style-one span { display: inline-block; position: relative; z-index: 1; font-size: 26px;}
.title-style-one span:before { content: ''; position: absolute; left: 0; bottom: 1px; width: 100%; height: 13px;
  background: rgba(246, 110, 0, .4); z-index: -1;}
.card-style-ten { border-radius: 10px; width: 100%; border: 1px solid #FFF;}
.card-style-ten:hover{ border: 1px solid #75642c;}
.tran3s {  transition: .3s ease-in-out;}
.title-km{ font-weight: 500; font-size: 18px; height: 52px; overflow: hidden;}
.title-km a{color: #000;}
.title-km a:hover{color:#04b2c5;}
.arrow-more {display: block; width: 39px; height: 15px; margin-top: 5px; background-image: url(../../images/icon_arrow_more.svg);  background-repeat: no-repeat;}
.arrow-more:hover {background-image: url(../../images/icon_arrow_more_brown.svg);  background-repeat: no-repeat;}
.btn-km { color: #FFF; background-color: #db5927; border-radius: 50px; padding: 5px 30px 5px 30px;}
.btn-km:hover {background-color: #ea6835;}

  /* ebook
-------------------------------------------------- */
.title-ebook {font-size: 24px; font-weight: 400;}
.card-style-sixteen {padding: 25px 25px 35px; border: 1px solid #e9e9e9; border-radius: 10px; overflow: hidden; background-color: #FFF;}
.card-style-sixteen .icon,.form-style-five .input-group-meta input{height:60px}
.card-style-sixteen p, .card-style-sixteen p a{color:#000; padding-top: 20px; font-size: 18px; font-weight: 500; height: 75px; overflow: hidden;}
.card-style-sixteen p a:hover{color:#333;}
.card-style-sixteen .read-more{width:85px;height:85px;font-size:26px;color:#000;background:#f7f7f7;position:absolute;bottom:-30px;right:-30px;padding:11px 0 0 19px}
.card-style-sixteen:hover .read-more{color:#fff;background:#db5927;}
.card-style-sixteen .read-more { width: 85px; height: 85px; font-size: 26px; color: #000; background: #f7f7f7;
  position: absolute; bottom: -30px; right: -30px; padding: 11px 0 0 19px;}
.card-style-sixteen:hover{border-color:#db5927;}
.arrow-ebook{font-size: 20px;}
.card-style-sixteen .eye-view{ position: absolute; bottom: 5px; left: 35px; width: 100px; height: 30px;    text-align: left;}

  /* video
-------------------------------------------------- */
.fancy-video.bg { background: #aa8562 !important; z-index: 1;}
.fancy-video.bg:before { content: ''; position: absolute; width: 100%; height: 26px; background: url(../../images/shape_87_brown.svg) center top / cover no-repeat;
left: 0; top: -25px; z-index: -1;}
.fancy-video.bg:after {  content: '';  position: absolute; width: 100%; height: 40px; background: url(../../images/shape_86_brown.svg) center bottom / cover no-repeat;
left: 0; bottom: -38px; z-index: -2;}
.slick-dots li.slick-active button:before { opacity: 1; color: #f66e00;}
.slick-dots li button:before {font-size: 11px; color: #FFF; opacity: 1;}
.slick-dots li {margin: 0 2px;}
.fancy-video .slick-next, .fancy-video .slick-prev {display: none !important;}
/*.fancy-video .slider-wrapper { width: calc(1320px + 30vw); margin: 0 -20px;}*/
.slick-list.draggable{padding: 0 !important;}
.fancy-video.bg .shape-two { width: 14px; height: 14px; left: 26%; bottom: -37px; background: #67db5e;}
.vdo-all{ color: #FFF; }
.vdo-all:hover { color: #0d6efd; }

  /* Footer
-------------------------------------------------- */
.footer-style-one { padding: 0 10%;}
.footer-style-one .top-footer { border: 1px solid #e5e5e5; border-radius: 20px; padding: 50px 50px 50px; z-index: 1; background-color: #FFF;}
.footer-style-one .shape-three { right: -4%; top: -11%;}
.footer-style-one .shape-four { left: -6%; bottom: 7%;}
.icon-footer{color: #48494e;}
.name-org {font-size: 20px; font-weight: 500;}
.call{color: #b08257; font-size: 20px;}
.email a{color: #000;}
.footer-nav-link {list-style: none;}
.footer-nav-link a { color: #48494e; font-size: 16px; line-height: 40px; transition: .3s ease-in-out;}
.footer-nav-link a:hover{color: #0d6efd;}
.bg-copyright{background-color: #aa8562; padding: 10px 0px 1px; font-size: 12px;}
.copyright-style-one {padding: 0 8%;}
.copyright-style-one a {color: #FFF;}
.copyright-style-one a:hover {color: #0d6efd;}
.icon-social a {color:#4a4a4f;}

.scroll-top { width: 35px; height: 35px; line-height: 35px; position: fixed; bottom: 50px; right: 5px; z-index: 99; text-align: center;
  color: #fff !important; cursor: pointer; border-radius: 50%; background-color: #aa8562;}
.scroll-top:after { position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px;  width: 90%;  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, 0) 80%);}
#myBtn {  display: none;  position: fixed;  bottom: 70px;  right: 30px;  z-index: 99;  font-size: 18px; border: none;
  outline: none; background-color: #aa8562; color: white; cursor: pointer; padding: 15px;border-radius: 50%; }
#myBtn:hover {  background-color: #bd936c; }


/* `sm` applies to x-small devices (portrait phones, less than 576px)
-------------------------------------------------- */
@media (max-width: 575.98px) { 
  .footer-style-one .top-footer {padding: 20px 15px 15px;}
  .footer-nav-link { margin: 0; padding: 0;}
  .footer-style-one .shape-four {  left: -26%;  bottom: 4%;}
  .footer-style-one .shape-three { right: 0;top: -6%;}
  .scroll-top{bottom: 102px;}
  }

/* Medium devices (tablets, 768px and up)
-------------------------------------------------- */
@media (min-width: 768px) { 
  .footer-nav-link{padding: 0; margin: 0;}
}

@media (min-width: 576px) and (max-width: 991.98px) { 
  .scroll-top{bottom: 104px;}
  .footer-style-one .shape-four { left: -12%;}
  .footer-nav-link{padding: 0; margin: 0;}
 }

/* Large devices (desktops, 992px and up)
-------------------------------------------------- */
 @media (min-width: 992px) { 
  .scroll-top{bottom: 68px;}
}

@media (max-width: 992px) { 
  #myBtn{bottom: 103px; right: 10px;}
}

/* Accessibility Settings Bar
-------------------------------------------------- */
#mic-toolbox-disable-buttons-keyboard, #mic-toolbox-disable-buttons-animations, #mic-toolbox-cursor-big-white, 
#mic-toolbox-cursor-big-black, #mic-toolbox-zoom-up, #mic-toolbox-content-links, #mic-toolbox-content-headers,
#mic-toolbox-content-images, #mic-toolbox-fonts-simple {display: none !important;}
.mic-access-tool-box div:nth-child(n+5){display: none !important;}
.mic-access-tool-box div:nth-child(7n){display: block !important;}
.mic-subtitle-span{display: none !important;}

#mic-init-access-tool .mic-access-tool-general-button { background-color: #f66e00 !important;  border: solid 2px #f66e00 !important;}

.bg-body2{background-color: #e5d1b8;}
.bg-body2.mic-toolbox-contrast-monochrome{background-color: #FFF !important;}
.bg-body-blankpage {background-color: #FFF !important;}

/* PAGE
-------------------------------------------------- */
.title-page{ font-size: 24px;}
.breadcrumb-line { border-bottom: 1px dashed #ddd; width: 100%; min-height: 35px; display: block; font-family: Sarabun; font-size: 14px;}
.bg-head-blank-page{background-color: #aa8562;}
.fancy-page:before {content: ''; position: absolute; width: 100%; height: 40px; left: 0; bottom: -38px; z-index: -1; 
  background: url(../../images/shape_86_brown.svg) center bottom / cover no-repeat;}