/*!
 * Fine Arts Department - butterfly theme 1   (https://www.finearts.go.th/)
 * Copyright 2024 Fine Arts Department.
 */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
 @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');
 body{ font-family: "Noto Sans Thai", sans-serif; font-weight: 400;  font-size: 16px;}
 
 a { cursor: pointer; color: #0d6efd; }
 a, a:hover { text-decoration: none; }
 :root{--prime-butterfly:#bce70c;}

.bg-top-header{background-color:#bce70c; margin-bottom: -15px;}
.bg-search{background-color:#ffdc3a; border: 0; font-family: "Sarabun", sans-serif; font-size: 14px;}
.navbar{z-index: 3;}
.topmenu{font-family: "Noto Sans Thai", sans-serif; font-weight: 500;  font-size: 16px;}
.topmenu a.nav-link{color: #000 !important; font-weight: 500;}
.topmenu .dropdown-menu .dropdown-item{color: #000 !important; font-weight: 500;}
.topmenu a.nav-link.active{text-decoration: underline solid #bce70c; text-underline-offset: 0.7em;}
.topmenu .dropdown-item{padding-top:5px; padding-bottom:5px; }
@media (min-width: 1400px) { 
	.topmenu .nav-item{padding-left:5px; padding-right:5px;} 
}
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.topmenu .nav-item{font-size: 15px;}
	.topmenu .nav-link{padding-left:5px !important; padding-right:5px !important; }
	.topmenu a.nav-link{font-size: 14px !important;}
}

/* ============ desktop view MouseOver Menu ================== */
@media all and (min-width: 992px) {
.topmenu li ul li:hover{background-color: rgb(215, 243, 106) !important; }
.topmenu li ul li a.dropdown-item:hover {background-color: rgb(215, 243, 106) !important;}
.topmenu li ul li ul {background-color: rgb(215, 243, 106) !important;}
.topmenu li ul li ul li a.dropdown-item:hover {background-color: rgb(232, 248, 159) !important;}
/*.topmenu li ul.dropdown-menu {display: none; ทำให้มี MouseOver ชี้เมาส์โดยไม่ต้องคลิก*/
.topmenu li ul.dropdown-menu {display: none; background: #bce70c; border-radius: 2px; border: 0; top: 38px; }
.topmenu li.dropdown:hover>.dropdown-menu, 
.topmenu li ul li.dropend:hover>.dropdown-menu, .topmenu li ul li.dropstart:hover>.dropdown-menu {display: block; margin-top: .1em; margin-left: .1em; }

}
@media screen and (min-width:769px) {
.topmenu li ul li.dropend:hover>.dropdown-menu { position: absolute; top: 0; left: 100%;}
.topmenu li ul li.dropstart:hover>.dropdown-menu { position: absolute; top: 0; right: 100%;}
.topmenu li ul li.dropend .dropdown-toggle,.topmenu li ul li.dropstart .dropdown-toggle  {margin-left: 0em;}
}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	.topmenu {margin-top: 25px;}
	.topmenu li ul li.dropend:hover .dropdown-menu, .topmenu li ul li.dropstart:hover .dropdown-menu { position: relative; top: 0; left:0; text-wrap: nowrap;}
	.topmenu li ul li ul li a.dropdown-item, .topmenu li ul li a.dropdown-item{text-wrap: wrap;}
	.topmenu li ul.dropdown-menu { background: #bce70c; border-radius: 2px; border: 0;}
	.topmenu li ul li ul.dropdown-menu { background: rgb(215, 243, 106); border-radius: 2px; border: 0;}
	.topmenu li ul li a.dropdown-item:hover, .topmenu li ul li ul li a.dropdown-item:hover {background-color: rgb(232, 248, 159) !important; }
	.dropstart .dropdown-toggle::before{display: none;}
	.dropstart .dropdown-toggle::after{display: inline-block; vertical-align: 0 !important;	margin-left: .255em;
		vertical-align: .255em;	content: "";border-top: .3em solid transparent;	border-right: 0;
		border-bottom: .3em solid transparent;border-left: .3em solid;
	}
	.topmenu .dropend .dropdown-item.show,.topmenu .dropstart .dropdown-item.show {background: rgb(215, 243, 106) !important;}
 }
/*
.dropdown-item {color:rgba(0, 0, 0, 0.85); }
  .dropdown .dropdown-menu {display: block; background: #bce70c; border-radius: 2px; border: 0; top: 38px;}
  .dropdown:hover>.dropdown-menu, 
  .dropend:hover>.dropdown-menu {display: block; margin-top: .1em; margin-left: .1em;  }
}
@media screen and (min-width:769px) {
	.dropend:hover>.dropdown-menu { position: absolute; top: 0; left: 100%;}
	.dropend .dropdown-toggle {margin-left: 0em;}
*/
/* ============ desktop view MouseOver Menu.end =================== */

/* 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; font-family: "Sarabun", sans-serif; font-size: 14px;}
.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: #caf522 !important; color: #444; font-family: "Sarabun", sans-serif; font-size: 14px;}
#select2-kt_docs_select2_country-results li:hover {background-color: #b8de21 !important; color: #444;}
#select2-kt_docs_select2_country-results {border-radius: 8px;}
#select2-kt_docs_select2_country-results .select2-results__option span{color: #444;}

.name-logo{position: relative; z-index: 1; bottom: -10px;}
.logo-and-menu{position: relative; z-index: 1; bottom: -10px;}
.logo{filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2)); position: relative; z-index: 1; bottom: -10px;}
.department-name{color: #005249; font-size: 32px;font-family: "Prompt", sans-serif; text-wrap: nowrap; }
.department-name-en{color: #d13712; font-size: 14px; font-family: "Sarabun", sans-serif; margin-top: -10px; text-wrap: nowrap;}
@media (min-width: 301px) { .logo {width: 95px ; height: 95px ;} }
@media (min-width: 0px) and (max-width: 300px) { 
	.logo {width: 50px; height: 50px;}
	.department-name{font-size: 22px;}
	.department-name-en{font-size: 11px;}
	.logo-and-menu {bottom: 0;}
	.menu-hamburger{margin-bottom: 0 !important; bottom: -8px;}
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 4rem; }
  .carousel-indicators [data-bs-target]{height: 8px; width: 8px; border-radius: 50%; margin-right: 6px; margin-left: 6px; opacity: 1; border-top:0; border-bottom:0;}
  .carousel-indicators {bottom: 20px; margin-bottom: 0;}
  .carousel{margin-bottom: 0;}
  .carousel-indicators .active{height: 5px; width: 5px; opacity: 1; border: 2px solid transparent; outline: 2px solid white;
	outline-offset: 2px; background-color: white;}
.carousel-item {max-height:400px;  }
.shadow-slide:before {
	-webkit-box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";
	}

/* Slide Service */
.service .slick-prev:before { font-family: none; content: ' '; width: 20px; height: 20px; display: block;
    background-image: url(../images/arrow2-left.svg); background-size: 18px; background-repeat: no-repeat;
	background-position: top;  }
.service .slick-next:before{ font-family: none; content: ' '; width: 20px; height: 20px;  display: block; 
	background-image: url(../images/arrow2-right.svg); background-size: 18px; background-repeat: no-repeat;
	background-position:top;}
.service img {z-index: 0;}
.service .slick-prev{z-index: 1; position: absolute; left: 0px !important;  }
.service .slick-next{z-index: 1; position: absolute; right: 0px !important;} 
.service .slick-prev:before, .slick-next:before{color: #ccc;}
.icon-service-item{ transition: transform .2s; padding: 15px;  background-color: #bce70c; width: 80px; 
	height: 80px; border-radius: 50%; display: block; margin: auto;}
.icon-service-item:hover{ background-color: #f68e56; transform: scale(1.15); }
.icon-service a{color:#005249; font-family: "Sarabun", sans-serif; font-size: 15px; font-weight: 500;}
.icon-service-item-link{ width: 180px !important; display: block; margin: auto; padding-top: 10px;}
.icon-service div  {padding:15px 0px 15px 0px;}
@media (max-width: 991.98px) { 	.icon-service-item-link{width: auto !important;}}
@media (max-width: 367px) { .menu-hamburger{position: relative; z-index: 1; margin-bottom: 8px;}}

.bg-content{background-color:#fcf8f8;}
.title-news-and-event {font-family: "Noto Sans Thai", sans-serif; color: #005249; font-weight: 600; letter-spacing: 0px;
    display: inline-block; position: relative; z-index: 1; font-size: 30px;}
.title-news-and-event span:before { content: '';  position: absolute;  left: 0; bottom: 3px; width: 100%;
    height: 12px; background: rgba(242, 108, 79, 1); z-index: -1;}
 /* NEWS Tab
-------------------------------------------------- */
.news-tab {border-bottom:0;}
.news-tab .nav-link{font-family: "Noto Sans Thai", sans-serif; color: #005249; font-weight: 600; font-size: 19px; padding: 8px 25px 8px 25px;margin-left: 20px; margin-right: 20px;}
.news-tab .nav-link:hover{ border-radius: 0;}
.news-tab .nav-link.active {background-color: #ffdc3a; color: #005249;border: 1px solid #ffdc3a; border-radius: 2px;}
.news-tab {list-style-type: none; text-align: center;}
.news-tab .nav-item { display: inline; position: relative;}
.news-tab .nav-item:not(:last-child):after {content: " | "; color: #005249; position: absolute; position: absolute; top: 10px; right: -24px; margin-left: 20px; margin-right: 20px;}
.card2:nth-child(n) img{clip-path: polygon(0 0, 100% 0%, 100% 80%, 0 100%);}
.card2 {margin-bottom: 45px;}
.card-color1 {background-color: #e1f2e6; border-radius: 0;}
.card-color2 {background-color: #f0ebe7; border-radius: 0;}
.card-color3 {background-color: #e3e4e8; border-radius: 0;}
.card-color1 .post-img {background-color: #e1f2e6;}
.card-color2 .post-img {background-color: #f0ebe7;}
.card-color3 .post-img {background-color: #e3e4e8;}
.post-img{border-radius:0px; overflow:hidden; object-fit: contain;}
/*
.card:nth-child(3n+1) {background-color: blue; border-radius: 0;}
.card:nth-child(3n+2) {background-color: burlywood; border-radius: 0;}
.card:nth-child(3n+3) {background-color: violet; border-radius: 0;}
*/

.card-text{height: 72px; overflow: hidden; font-weight: 500; color: #333; font-size: 16px;}
.text-date, .text-view {color:#76777a; font-size: 14px; font-family:"Sarabun";}
.icon-eye, .icon-date {color:#949494; font-size: 13px;}
.text-location {font-size: 14px; color: #c39c32;}
.icon-location {color:#c39c32; font-size: 13px;}
.btn-outline-blue {position: absolute; bottom: -19px; right:20px; border-radius: 8px; border: 1px solid #FFF; color: #333; padding: 4px 15px 4px 15px; background-color: #FFF;}
.btn-outline-blue:hover { border: 1px solid #ffdc3a; color: #333; background-color: #ffdc3a;}
.tran4s { transition: .4s ease-in-out;}
.card-text a{color: #000;}
.card-text a:hover{color:#0d6efd;}
.btn-viewall{color: #005249; font-weight: 500; font-size: 17px;}
.btn-viewall:hover{color: #0d6efd;}

.list-news ul {list-style: none; margin-top: 40px; padding: 0;}
.list-news ul li { padding-left: 30px; padding-top: 15px; padding-bottom: 15px; background-image: url(../images/pdf.svg); background-size: 24px 24px; 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/pdf.svg); background-size: 24px 24px; 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 */
.item-km .slick-slide:nth-child(odd) {background-color: #ffdc3a; transition: transform .2s; }
.item-km .slick-slide:nth-child(even) { background-color: #f4e8a7; transition: transform .2s;}
.item-km .slick-slide:nth-child(odd):hover, .item-km .slick-slide:nth-child(even):hover { transform: scale(1.04);}
.item-km p {padding: 15px; color: #333; font-size: 16px; font-weight: 500; height: 105px; overflow: hidden; margin-bottom: 20px;}
/*
.item-km {background-color: #ffdc3a; transition: transform .2s;}
.item-km2 {background-color: #f4e8a7; transition: transform .2s;}
.item-km:hover, .item-km2:hover { transform: scale(1.04);}
.item-km img, .item-km2 img{ margin: auto;}
.item-km p, .item-km2 p {padding: 15px; color: #333; font-size: 16px; font-weight: 500; height: 105px; overflow: hidden; margin-bottom: 20px;}
*/

.arrow-km .slick-prev{position: absolute; top: -30px; left: auto; right: 116px;}
.arrow-km .slick-next{position: absolute; top: -30px; right: 57px;  }
.arrow-km .slick-prev::before { font-family: none; content: ' ';  /*content: '←'; color: #333;*/ background-color: #f9f9f9; border: 1px solid #ccc;
width: 60px; height: 40px; display: block; background-image: url(../images/arrow-left.svg); background-size: 12px; background-repeat: no-repeat;background-position: center center;}
.arrow-km .slick-next::before { font-family: none; content: ' '; background-color: #f9f9f9; border: 1px solid #ccc;
width: 60px; height: 40px;  display: block; background-image: url(../images/arrow-right.svg); background-size: 12px; background-repeat: no-repeat;background-position: center center;}
.arrow-km .slick-prev:hover::before, .arrow-km .slick-next:hover::before{background-color: #ffdc3a; border: 1px solid #ffdc3a;}

/* Ebook */
.arrow-ebook .slick-prev:before { font-family: none; content: ' '; width: 20px; height: 20px; display: block;
    background-image: url(../images/arrow2-left.svg); background-size: 18px; background-repeat: no-repeat;
	background-position: top;  }
.arrow-ebook .slick-next:before{ font-family: none; content: ' '; width: 20px; height: 20px;  display: block; 
	background-image: url(../images/arrow2-right.svg); background-size: 18px; background-repeat: no-repeat;
	background-position:top;}
.arrow-ebook img {z-index: 0;}
.arrow-ebook .slick-prev{z-index: 1; position: absolute; left: 0px !important;  }
.arrow-ebook .slick-next{z-index: 1; position: absolute; right: 0px !important;} 
.search-ebook{font-family: "Sarabun";}
.bg-gray {background-color: #dedddc;}
.btn-search-ebook{background-color: #999998;}
.btn-search-ebook:hover{background-color: #878786;}

/* Video */
.title-vdo {font-family: "Noto Sans Thai", sans-serif; color: #005249; font-weight: 600; letter-spacing: 0px;
    display: inline-block; position: relative; z-index: 1; font-size: 30px;}
.title-vdo span:before { content: '';  position: absolute;  left: 0; bottom: 3px; width: 100%;
    height: 12px; background: rgba(242, 108, 79, 1); z-index: -1;}
.title-vdo a{color: #005249;}
.title-vdo a:hover{color: #027063;}
.vdo-frame iframe{ border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.8);}
.vdo-frame:nth-child(3n+2) { transform: scale(1.2);}
.arrow-vdo .slick-prev:before { font-family: none; content: ' '; width: 20px; height: 20px; display: block;
    background-image: url(../images/arrow2-left.svg); background-size: 18px; background-repeat: no-repeat;
	background-position: top;  }
.arrow-vdo .slick-next:before{ font-family: none; content: ' '; width: 20px; height: 20px;  display: block; 
	background-image: url(../images/arrow2-right.svg); background-size: 18px; background-repeat: no-repeat;
	background-position:top;}
.arrow-vdo img {z-index: 0;}
.arrow-vdo .slick-prev{z-index: 1; position: absolute; left: 0px !important;}
.arrow-vdo .slick-next{z-index: 1; position: absolute; right: -1px !important;} 

/* Banner */
.item-banner .slick-slide:nth-child(odd) {background-color: #ffdc3a; transition: transform .2s; }
.item-banner .slick-slide:nth-child(even) { background-color: #f4e8a7; transition: transform .2s;}
.item-banner .slick-slide:nth-child(odd):hover, .item-km .slick-slide:nth-child(even):hover { transform: scale(1.04);}
.arrow-banner .slick-prev:before { font-family: none; content: ' '; width: 20px; height: 20px; display: block;
    background-image: url(../images/arrow2-left.svg); background-size: 18px; background-repeat: no-repeat;
	background-position: top;  }
.arrow-banner .slick-next:before{ font-family: none; content: ' '; width: 20px; height: 20px;  display: block; 
	background-image: url(../images/arrow2-right.svg); background-size: 18px; background-repeat: no-repeat;
	background-position:top;}
.arrow-banner img {z-index: 0;}
.arrow-banner .slick-prev{z-index: 1; position: absolute; left: 0px !important;  }
.arrow-banner .slick-next{z-index: 1; position: absolute; right: 0px !important;} 

/*Footer*/
.bg-footer{background-color: #bce70c;}
.address {font-family: "Sarabun"; font-size: 15px; text-wrap: wrap;}
.address a{color: #40413c;}
.address a:hover{color: #0d6efd;}
.address ul{margin: 0; padding: 0;}
.address ul li {list-style: none; display: flex; align-items: flex-start; padding-top: 10px; padding-bottom: 10px;}
.menu-footer a{ color:#40413c; }
.icon-social{ margin-top: 30px;  margin-bottom: 30px;}
.icon-social ul{margin: 0; padding: 0;}
.visit{font-family: "Sarabun"; }
.bg-copyright{background-color: #464838; color: #FFF;}
.copyright{font-family: "Sarabun"; font-size: 14px;color: #fff;}
.copyright a{color: #fff;}
.copyright a:hover{color: #0d6efd;}
@media (max-width: 991.98px) { 
	.copyright{margin-bottom: 10px;}
}
@media (max-width: 300px) {
	.w3c img{height: 20px; margin-right: 5px;}
}
/* button GO TO TOP */
#myBtn { position: fixed; display: none; width: 42px; height: 42px;  bottom: 44px;  right: 30px;  z-index: 99;  font-size: 16px; border: none;
	outline: none; background-color: #ffc107; color: #000; cursor: pointer; padding: 15px;border-radius: 50%; }
#myBtn:hover {  background-color: #ffc107; }

/* 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: #bce70c !important;  border: solid 2px #bce70c !important;}

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

.mic-toolbox-contrast-hard .copyright{color: #000;}
.mic-toolbox-contrast-hard .copyright a{color: #0d6efd;}
.mic-toolbox-contrast-soft>:not(#mic-init-access-tool) .copyright{color: #FFF;}
.mic-toolbox-contrast-soft>:not(#mic-init-access-tool) .copyright a{color: #FFF;}
.mic-toolbox-contrast-monochrome header, .mic-toolbox-contrast-hard header{position: relative; z-index: 1;}
.mic-toolbox-contrast-monochrome #myBtn, .mic-toolbox-contrast-hard #myBtn {bottom: 2px;}
.mic-toolbox-contrast-hard {background-color: #000;}

/* PAGE
-------------------------------------------------- */
.title-page{ font-size: 24px; color: #005249;}
.breadcrumb-line { border-bottom: 1px solid #eee; width: 100%; min-height: 35px; display: block; font-family: Sarabun; font-size: 12px; margin-top: 15px;}