/* NAVBAR START */

/*=============== GOOGLE FONTS ===============*/
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300&family=Prompt:wght@200;300;400;500&display=swap");
/* @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300&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'); */

/* Website Background */
/* สีเก่า #b80a0a */

/* Background */
.background-full {
  background-image: url("https://www.act.ac.th/img/bg/b01_s.png");
  /* เปลี่ยน path ให้ตรงกับที่อยู่ไฟล์ */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  /* ทำให้ div นี้เต็มหน้าจอและอยู่หลังเนื้อหาทั้งหมด */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* สำคัญ: ทำให้พื้นหลังอยู่ข้างหลังเนื้อหาอื่นๆ */
}

.program-background {
  background-image: url("https://www.act.ac.th/img/bg/study-bg-02.png");
  /* เปลี่ยน path ให้ตรงกับที่อยู่ไฟล์ */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  /* ทำให้ div นี้เต็มหน้าจอและอยู่หลังเนื้อหาทั้งหมด */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 5.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(220, 68%, 54%);
  --first-color-lighten: hsl(220, 68%, 97%);
  --title-color: hsl(220, 48%, 28%);
  --text-color: hsl(220, 12%, 45%);
  --body-color: hsl(220, 100%, 99%);
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*=============== BASE ===============*/
* {
  /* box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

html,
body {
  font-family: "Kanit", sans-serif;
  font-size: var(--normal-font-size);
  color: var(--text-color);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  /* เหตุฉุกเฉิน */
  /* -webkit-filter: grayscale(100%) !important; */
  /* Safari 6.0 - 9.0 */
  /* filter: grayscale(50%) !important; */
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container-nav {
  /* max-width: 1120px; */
  /* max-width: 1280px; */
  margin-inline: 1.5rem;
}

/*=============== HEADER ===============*/
.header {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* max-width: 1920px; */
  box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
  background-color: var(--body-color);
  /* background-color: white; */
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.navbar {
  width: 100%;
}

nav {
  /* height: 0; */
  box-shadow: none;
}

.nav {
  height: var(--header-height);
  background-color: white;
  width: auto;
  line-height: normal;
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
  color: var(--title-color);
  font-weight: bold;
  transition: color 0.3s;
}

.nav__logo img {
  /* font-size: 1.25rem; */
  width: 46px;
}

.nav__logo:hover {
  color: var(--first-color);
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__toggle-menu,
.nav__toggle-close {
  font-size: 1.25rem;
  color: var(--title-color);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition:
    opacity 0.1s,
    transform 0.4s;
}

.nav__toggle-close {
  opacity: 0;
}

@media screen and (max-width: 1381px) {
  .nav__menu {
    background-color: var(--body-color);
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    padding-block: 1.5rem 4rem;
    pointer-events: none;
    opacity: 0;
    transition:
      top 0.4s,
      opacity 0.3s;
  }

  .nav__menu::-webkit-scrollbar {
    width: 0.5rem;
  }

  .nav__menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

.nav__link:hover {
  background-color: var(--first-color-lighten);
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 5.5rem;
  pointer-events: initial;
  height: calc(550%);
  /* height: calc(480%); */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* Show icon */
.show-icon .nav__toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__button {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 1.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}

.dropdown__content,
.dropdown__group,
.dropdown__list {
  display: grid;
  text-align: left;
}

.dropdown__container {
  background-color: var(--first-color-lighten);
  height: 0;
  overflow: hidden;
  transition: height 0.4s;
}

.dropdown__content {
  row-gap: 1.75rem;
}

.dropdown__group {
  padding-left: 2.5rem;
  row-gap: 0.5rem;
}

.dropdown__group:first-child {
  margin-top: 1.25rem;
}

.dropdown__group:last-child {
  margin-bottom: 1.25rem;
}

/* .dropdown__group a :hover {
  border: 1px solid #cccfdb;
  border-radius: 2px;
} */

/* underline Effect */
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.dropdown__icon i {
  font-size: 1.25rem;
  color: var(--first-color);
}

.dropdown__title {
  /* font-size:20px; */
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.dropdown__list {
  row-gap: 0.25rem;
}

.dropdown__link {
  font-size: 20px;
  font-weight: var(--font-medium);
  color: var(--title-color);
  transition: color 0.3s;
}

.dropdown__link:hover {
  color: var(--title-color);
}

/* Rotate dropdown icon */
.show-dropdown .dropdown__arrow {
  transform: rotate(180deg);
}

nav ul li {
  float: none;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 300px) {
  .dropdown__group {
    padding-left: 1.5rem;
  }
}

/* For large devices */
@media screen and (min-width: 1380px) {
  /* Nav */
  .nav {
    /* height: calc(var(--header-height) + 2rem); */
    display: flex;
    justify-content: space-between;
  }

  .nav__toggle {
    display: none;
  }

  .nav__list {
    display: flex;
    column-gap: 3rem;
    height: auto;
  }

  nav ul li {
    float: none;
  }

  .nav li {
    display: flex;
  }

  .nav__link {
    padding: 0;
  }

  .nav__link:hover {
    background-color: initial;
  }

  /* Dropdown */
  .dropdown__button {
    column-gap: 0.25rem;
    pointer-events: none;
  }

  .dropdown__container {
    height: max-content;
    position: absolute;
    left: 0;
    right: 0;
    top: 6.5rem;
    background-color: var(--body-color);
    box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
    pointer-events: none;
    opacity: 0;
    transition:
      top 0.4s,
      opacity 0.3s;
  }

  .dropdown__content {
    grid-template-columns: repeat(4, max-content);
    column-gap: 6rem;
    max-width: 1120px;
    margin-inline: auto;
  }

  .dropdown__group {
    padding: 4rem 0;
    align-content: baseline;
    row-gap: 1.25rem;
  }

  .dropdown__group:first-child,
  .dropdown__group:last-child {
    margin: 0;
  }

  .dropdown__list {
    row-gap: 0.75rem;
  }

  .dropdown__icon {
    width: 60px;
    height: 60px;
    background-color: var(--first-color-lighten);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
  }

  .dropdown__icon i {
    font-size: 2rem;
  }

  .dropdown__title {
    font-size: 20px;
  }

  .dropdown__link {
    font-size: 18px;
  }

  .dropdown__link:hover {
    color: var(--first-color);
  }

  .dropdown__item {
    cursor: pointer;
  }

  .dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
  }

  .dropdown__item:hover > .dropdown__container {
    top: 5.5rem;
    opacity: 1;
    pointer-events: initial;
    cursor: initial;
  }

  .show-menu {
    height: calc(300%);
    /* overflow-y: scroll;
    -webkit-overflow-scrolling: touch; */
  }
}

@media screen and (min-width: 1152px) {
  .container-nav {
    margin-inline: 1rem;
  }
}

.swiss {
  padding: 1.2rem 0rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swis {
  background-color: rgb(255, 141, 48);
  padding: 0.5rem 1rem;
  /* justify-content: center;
  align-items: center; */
  text-align: center;
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  margin-left: 0.5rem;
  height: 3rem;
}

.swis a {
  color: white;
}

.swis span {
  background-color: rgb(11, 38, 106);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  padding: 6px 11px;
  color: white;
  font-size: 18px;
}

.sdgs {
  /* background-color: rgb(8, 158, 78); */
  background-color: #3d94f6;
  padding: 0.5rem 1rem;
  /* justify-content: center;
  align-items: center; */
  text-align: center;
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  margin-left: 0.5rem;
  height: 3rem;
}

.sdgs a {
  color: white;
}

/* NAVBAR END */

/* .home_container {
  background-color: #e7e7e7;
} */

/* SECTION : HEARDER START */

.slider_section {
  justify-items: center;
  margin-top: 5.5rem;
  /* width: 100%; */
}

/* .slider_container {
  max-width: 1920px;
  margin: auto;
} */

.container_wrap {
  max-width: 1920px;
  margin: auto;

  /* for background */
  background-color: #fff;
  position: relative;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.slider_section .carousel {
  position: unset;
}

.slider_section .slider_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

/* @media screen and (max-width: 1775px) {
  .slider_section .slider_container {

  }
} */

.slider_section .slider_container .img-box {
  -webkit-box-flex: 2.5;
  -ms-flex: 2.5;
  flex: 2.5;
  /* z-index: -3; */
  width: 900px;
  /* width: 1024px; */
  background-color: rgb(77, 77, 77);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* @media (max-width: 992px) {
  .slider_section .slider_container .img-box {
            width: 100%;    
  }
  .splide__track {
    height: 100%;
  }

} */
@media (min-width: 1090px) {
  .slider_section .slider_container .img-box {
    -webkit-box-flex: 2.5;
    -ms-flex: 2.5;
    flex: 2.5;
    /* z-index: -3; */
    width: 600px;
  }

  .splide__track {
    /* height: 100%; */
    height: 18rem;
  }
}

.slider_section .slider_container .img-box img {
  width: 100%;
}

.slider_section .slider_container .detail_container {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #4b4b4b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: auto;
  width: 0%;
  margin: 0;
  padding: 0;
}

.slider_section .slider_container .detail_container #carouselExampleControls {
  width: 100%;
}

.slider_section .slider_container .detail_container .detail-box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}

.slider_section .slider_container .detail_container .detail-box h1 {
  /* font-family: "Open Sans",
 sans-serif; */
  text-transform: uppercase;
  font-weight: bold;
  color: #fefdfc;
  font-size: 3.5rem;
}

.slider_section .slider_container .detail_container .detail-box a {
  display: inline-block;
  padding: 10px 45px;
  background-color: #f22324;
  color: #fefdfc;
  border-radius: 0;
  border: 1px solid #f22324;
  text-transform: uppercase;
  margin-top: 35px;
}

.slider_section .slider_container .detail_container .detail-box a:hover {
  background-color: transparent;
  color: #f22324;
}

.slider_section .carousel-control-prev,
.slider_section .carousel-control-next {
  width: 50px;
  height: 50px;
  left: 0;
  opacity: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-color: #240a5e;
  background-size: 20px;
  background-position: center;
}

.slider_section .carousel-control-prev {
  top: 15%;
  background-image: url(../images/prev.png);
}

.slider_section .carousel-control-next {
  top: initial;
  bottom: 15%;
  background-image: url(../images/next.png);
}

/* HEARDER Responsive */
@media (max-width: 1120px) {
  .slider_section .slider_container .detail_container .detail-box h1 {
    font-size: 3rem;
  }
}

@media (max-width: 1220px) {
  .slider_section .slider_container .img-box {
    width: 100%;
  }

  .slider_section .slider_container {
    flex-direction: column;
  }

  .slider_section .slider_container .detail_container .detail-box {
    width: 100%;
    text-align: center;
    margin: 45px auto 125px auto;
  }

  .slider_section .slider_container .detail_container {
    width: 100%;
  }

  .rent_section .rent_container .box {
    width: 300px;
  }

  .contact_section .contact_items {
    flex-wrap: wrap;
    width: min-content;
    margin-left: auto;
    margin-right: auto;
  }

  .contact_section .contact_items a {
    margin: 25px;
  }

  .dropdown__title {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .slider_section .carousel-control-prev,
  .slider_section .carousel-control-next {
    display: none;
  }

  .show-menu {
    height: calc(450%);
    /* overflow-y: scroll;
    -webkit-overflow-scrolling: touch; */
  }
}

@media (max-width: 376px) {
  .slider_section .slider_container .detail_container .detail-box h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

.event_container {
  display: flex;
}

.event_detail {
  margin-top: 4.5rem;
  padding: 0 1rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event_detail a i {
  font-size: 2rem;
  font-weight: bold;
  color: white;
}

.events {
  flex: 1;
  margin: 0 1rem;
  /* overflow: hidden; */
  /* border-radius: 25px; */
}

.events h4 {
  font-size: 1.5rem;
  color: #fff;
  text-align: left;
  padding-top: 1rem;
}

.events .events_content {
  /* width: 100%; */
  /* height: 7rem; */
  height: auto;
  /* background-color: #fff; */
  background-color: #a31e1e;
  color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 30px;
  padding: 0.5rem;
  transition: all 0.3s ease-out;
}

.events .events_content:hover {
  scale: 0.95;
  /* transition: transform 2s ease-out; */
  background-color: #fff;
  /* border: 5px solid #a31e1e; */
  color: #a31e1e;
  font-size: 24px;
}

.day_content {
  font-size: 38px;
}

/* .month-year-event {
  height: 30px;
} */

.month-year_content {
  font-size: 26px;
}

.event_details {
  font-size: 18px;
  background-color: #4a4a4a;
  padding: 0.2rem 1rem;
  color: #fff;
  border-radius: 8px;
  /* width: 100%; */
}

@media screen and (max-width: 1505px) {
  .day_content {
    font-size: 28px;
  }

  .month-year_content {
    font-size: 22px;
  }
}

.detail_container {
  height: 100%;
  padding: 1rem 0rem;
}

.detail_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* padding: 1rem 0rem; */
}

@media (max-width: 1306px) {
  .event_details {
    font-size: 16px;
  }
}

@media (max-width: 1080px) {
  .detail_box {
    height: auto;
    padding-bottom: 1rem;
  }

  .event_details {
    font-size: 18px;
  }
}

.program {
  margin: 0 1rem;
  height: 100%;
  flex-wrap: wrap;
  /* background-color: #dbdbdb; */
  /* padding: 1rem; */
  border-radius: 8px;
  margin: 0rem 1rem;
  /* padding: 1rem 1rem; */
  padding-bottom: 1rem;
}

.program h4 {
  font-size: 30px;
  color: #fff;
  text-align: left;
  padding-top: 1rem;
  font-weight: bold;
}

.program_list {
  flex: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2;
  width: 100%;
  height: auto;
  color: #fff;
  background-color: #fff;
  /* background-color: #a31e1e; */
  padding: 0.5rem 0;
  margin-bottom: 5px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
}

/* .program_list p {
    font-size: 24px;
    font-weight: bold;
    margin: auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    color: #a31e1e;
    padding: 0.5rem 0rem;
  } */

.program_list .normal {
  font-size: 24px;
  font-weight: bold;
  margin: auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  color: #a31e1e;
  padding: 0.5rem 0rem;
  /* font-weight: 800; */
}

.program_list .long {
  font-size: 18px;
  font-weight: bold;
  margin: auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  color: #a31e1e;
  padding: 0.5rem 0rem;
  /* font-weight: 800; */
}

.program_list a {
  color: #393939;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.program_list img {
  width: 60px;
  border-radius: 50%;
}

.program_list iframe {
  border-radius: 10px;
}

.splide__pagination {
  display: none;
}

/* Banner */

.banner_slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.banner_img-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 300%;
  height: 100%;
  transition: 0.4s ease-in-out;
}

.banner-img:nth-child(1) {
  background: url(https://www.act.ac.th/bg_website/bg1.jpg);
}

.banner-img:nth-child(2) {
  background: url(https://www.act.ac.th/bg_website/bg5.png);
}

.banner-img:nth-child(3) {
  background: url(https://www.act.ac.th/bg_website/bg4.jpg);
}

.banner_img-container .banner_img {
  width: 100%;
}

.banner_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin: 2em 0;
}

.banner_pagination span {
  background: #111;
  box-shadow:
    inset -1px -1px #555,
    inset 1px 1px #000;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  cursor: pointer;
}

.banner_pagination .active {
  background: #fff;
  box-shadow: 0 0 0.5em #0352fc;
}

@keyframes textChange {
  50% {
    bottom: -5em;
  }

  100% {
    bottom: 0;
  }
}

/* SlideShow */

.splide {
  /* height: 100%; */
}

/* .splide__track {
    height: 100%;
  } */

/* @media (min-width:1500px) and (max-width:1580px) {
  .splide__track {
    height: 16rem;
  }
} */

/* @media (min-width:1600px) and (max-width:1680px) {
  .splide__track {
    height: 18rem;
  }
} */

/* @media (min-width:1700px) and (max-width:1920px) {
  .splide__track {
    height: 20rem;
  }
} */

@media (min-width: 1920px) {
  .splide__track {
    height: 18.5rem;
  }

  .program_list img {
    width: 75px;
  }

  /* .program_list p {
    font-size: 28px;
  } */

  .program_list .normal {
    font-size: 28px;
  }

  .program_list .long {
    font-size: 24px;
  }
}

/* @media (max-width:1422px) {

  .day_content {
    font-size: 28px;
  }

  .month-year_content {
    font-size: 22px;
  }

  .program h4 {
    padding-top: 0.3rem;
    font-size: 26px;
  }

  .program_list img {
    width: 50px;
  }

  .program_list p {
    font-size: 24px;
  }
} */

.splide__slide {
  /* background-color: #fff; */
  /* min-height: 18rem; */
  /* height: 100%; */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.btn {
  margin-top: 0.5rem;
  text-align: center;
  background-color: transparent;
  font-size: 16px;
  display: block;
  box-shadow: none;
}

.btn :hover {
  background-color: transparent;
}

.btn a {
  background-color: #424242;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  height: 2rem;
}

.btn a:hover {
  background-color: #fff;
  color: #424242;
  transform: 2s;
}

.message {
  margin-top: 1.5rem;
  text-align: center;
}

.message a {
  background-color: #a31e1e;
  color: #fff;
  padding: 0.3rem 2rem;
  border-radius: 20px;
  height: 2rem;
  font-size: 18px;
}

.head_box {
  border-radius: 8px 8px 0px 0px;
}

.mid_box {
  border-radius: 8px 8px 8px 8px;
}

.bottom_box {
  border-radius: 0px 0px 8px 8px;
}

/* SECTION : HEARDER END */

/* SECTION : TALENTED START*/
.talented_section {
  width: 100%;
  height: auto;
  /* background-color: rgb(168, 175, 175); */
  /* background-image: url("../../media/examples/lizard.png"); */
  background-image: url("https://www.act.ac.th/img/act_talented/bg01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 3rem;
}

.talented_title {
  padding: 3rem 0 0 3rem;
  position: absolute;
}

.talented_title .talented_tab {
  background-color: #000000;
  width: 1rem;
  /* height: 4.2rem; */
  height: 3.7rem;
  margin: 1rem;
}

.talented_title .talented_tab h3 {
  font-size: 24px;
  background-color: #a31e1e;
  /* background-color: #810505; */
  width: 13rem;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

/* SECTION : TALENTED END*/

/* SECTION : ANNOUNCE START*/

.announce_section {
  height: auto;
  width: 100%;
  background-color: #a31e1e;
  margin: 0;
  padding: 2rem 0rem;
}

.announce_container {
  display: flex;
  flex-wrap: wrap;
  /* width: 100%; */
  height: auto;
  margin: 1rem;
  /* position: relative; */
}

.news_video {
  content: "";
  clear: both;
  display: table;
  flex: 1 0 300px;
  /* width: 100%; */
  padding: 1rem;
}

.video_content {
  margin-top: 1rem;
}

.media_container {
  content: "";
  clear: both;
  display: table;
  flex: 1 0 300px;
  width: 100%;
  padding: 1rem;
}

.media_content {
  width: 100%;
}

/* @media screen and (max-width: 800px) {

  .news_video {
    flex: 1 0 300;
  }

  .media_container {
    flex: 1 0 300;
  }
	
} */

/* SECTION : ANNOUNCE END*/

/* SECTION : FOLLOWUS US START*/

.followus_section {
  background-color: #a31e1e;
  padding-bottom: 6rem;
}

.followus_container {
  padding: 2rem;
  border-radius: 8px;
}

.followus_container h3 {
  padding: 1rem;
}

.followus_container h3 {
  font-size: 24px;
  color: #fff;
}

.followus_content {
  height: auto;
}

/* SECTION : FOLLOWUS US END*/

/* SECTION : HEAD Department START */

.head_department_section {
  margin-top: 8rem;
  /* padding: 3rem; */
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 8rem;
}

.director_department_title {
  /* width: 100%; */
  margin: 5rem;
  text-align: right;
  /* position: relative; */
}

.head_department_container {
  margin: auto;
  padding: auto;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
}

.director_content {
  margin: 1rem 1rem 10rem 1rem;
  padding: 1rem;
}

.director-post {
  display: flex;
  align-items: center;
  max-width: 55rem;
  background-color: #a31e1e;
  border-radius: 8px;
  margin: auto;
  text-align: right;
}

.director-post_img {
  position: relative;
  min-width: 22rem;
  max-width: 22rem;
  height: 25rem;
  transform: translateX(-8rem);
  padding: 2rem;
}

.director-post_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.director-post_img::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); */
  box-shadow: 0.5rem 0.5rem 3rem 1px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  opacity: 0.5;
}

.director-post_date span {
  display: block;
  color: #8e8c8c;
  font-weight: 600;
  margin: 0.5rem 0;
}

.director-post_title {
  font-size: 2rem;
  /* margin: 1.5rem 0 2rem; */
  text-transform: uppercase;
  color: #fff;
}

.director-post_detail {
  color: #fff;
  font-size: 22px;
  padding: 1rem 0rem;
}

.director_department_head {
  display: block;
}

.director_department_title {
  padding: 3rem 0 0 3rem;
  /* justify-self: end; */
  /* align-items: end; */
  /* justify-content: end; */
}

.director_department_title .director_department_head {
  background-color: #000000;
  width: 1rem;
  height: 4.25rem;
  margin: 1rem;
}

.director_department_title .director_department_head h2 {
  font-size: 24px;
  background-color: #a31e1e;
  width: 15rem;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

.director-post_info {
  width: 100%;
  padding: 2rem;
}

.director-post_info p {
  margin-bottom: 3rem;
  color: rgba(0, 0, 0, 0.7);
}

.director-post_cta {
  display: inline-block;
  /* background-image: linear-gradient(to right,#4facfe 0%, #00f2fe 100%); */
  background: #fff;
  margin-top: 1rem;
  padding: 1rem 3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a31e1e;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
}

.director-post_cta:hover {
  /* background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%); */
  /* transform: scale(0.3); */
}

@media (max-width: 1068px) {
  .director-post {
    max-width: 45rem;
  }

  .director-post_img {
    min-width: 20rem;
    max-width: 20rem;
  }

  .director-post_info {
    width: 100%;
    padding: 1rem;
  }
}

@media (max-width: 868px) {
  .director-post {
    /* max-width: 70rem; */
  }
}

@media (max-width: 1068px) {
  .director-post {
    /* padding: 2.5rem; */
    flex-direction: column;
    min-width: 24rem;
    max-width: 24rem;
    height: auto;
    text-align: center;
    padding-bottom: 1rem;
    /* margin-left: 5rem; */
  }

  .director-post_img {
    min-width: 100%;
    transform: translate(0, -5rem);
    min-width: 17rem;
    max-width: 17rem;
  }

  .director-post_title {
    font-size: 24px;
  }

  .director_content {
    margin: 0.5rem 0.5rem 10rem 0.5rem;
    padding: 0;
  }
}

/* BROTHER */

.brother_container {
  margin-top: 5rem;
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: 100%;
}

.brother-post {
  display: flex;
  padding: 2.5rem;
  flex-direction: column;
  min-width: 22rem;
  max-width: 22rem;
  min-height: 34rem;
  text-align: center;
  background-color: #a31e1e;
  border-radius: 8px;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.brother-post_img {
  min-width: 100%;
  /* transform: translate(0,-8rem); */
  transform: translate(0, -6rem);
  min-width: 15rem;
  max-width: 15rem;
}

.brother-post_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.brother_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  padding: 0rem 8rem;
  gap: 2.5rem;
}

.brother-post_info {
  color: #fff;
}

.brother-post_info h4 {
  color: #fff;
  font-size: 18px;
}

.brother-post_detail {
  color: #fff;
  font-size: 26px;
  padding: 1rem 0rem;
}

@media (max-width: 799px) {
  .brother_items {
    margin-bottom: 8rem;
  }
}

/* SECTION : HEAD Department END */

/* SECTION : ASSISTANT Department START */

.assistant_container {
  margin-top: 3rem;
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: 100%;
  background-color: #a31e1e;
  padding-top: 10rem;
}

.assistant_head {
  text-align: center;
  color: #fff;
  font-size: 2rem;
  width: 100%;
  margin-bottom: 8rem;
  position: relative;
}

.assistant-post {
  display: flex;
  padding: 2.5rem;
  flex-direction: column;
  min-width: 22rem;
  max-width: 22rem;
  /* height: 30rem; */
  min-height: 35rem;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.assistant-post_img {
  min-width: 100%;
  transform: translate(0, -5rem);
  min-width: 14rem;
  max-width: 14rem;
}

.assistant-post_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  max-height: 17rem;
}

.assistant_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 30px;
  padding: 0 3rem;
}

.assistant-post_info {
  color: #a31e1e;
}

.assistant-post_info h4 {
  color: #a31e1e;
  font-size: 18px;
}

.assistant-post_detail {
  color: #a31e1e;
  font-size: 28px;
  padding: 1rem 0rem;
}

.assistant_items {
  margin-bottom: 10rem;
}

.assistant-post_cta {
  display: inline-block;
  background: #a31e1e;
  padding: 0.5rem 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
}

@media (max-width: 1535px) {
  .brother_items {
    margin-bottom: 8rem;
  }
}

/* SECTION : ASSISTANT Department END */

/* SECTION : PROGRAM LIST START */
/* .program_container {
  width: 100%;
  justify-content: center;
  justify-items: center;
  align-content: center;
  margin: auto;
} */

.program_container {
  max-width: 1980px;
  margin: auto;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

/* .program_container {
  background-color: #d1d5d6;
  background-image: url(https://www.act.ac.th/bg_website/bg3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  right: 0;
} */

/* .program_container::before {
  content: "";
  position: absolute;
  inset: -2;
  background: linear-gradient(to right, #1515156b 0%, #36363686 100%);
  opacity: 0.5;
  width: 100%;
  height: 100%;
} */

.program_banner_section {
  margin: 5rem auto auto auto;
  position: relative;
  display: block;
  /* max-width: 1280px; */
}

/* .program_title {
  width: 15rem;
  height: 15rem;
  flex-shrink: 0;
  background: #a31e1e;
  position: relative;
  inset: 10px 30% 20px 0;
  color: #fff;
} */

/* .program_head {
  display: block;
} */
.program_banner_container {
  justify-content: space-around;
  align-items: center;
  /* justify-items: center; */
  margin: auto;
}

.program_banner_img {
  width: 100%;
  height: 100%;
  position: relative;
}

.program_banner_img img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.program_banner_img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #151515 0%, #363636 100%);
  box-shadow: 0.5rem 0.5rem 3rem 1px rgba(0, 0, 0, 0.05);
  opacity: 0.5;
}

.program_title {
  padding: 0 0 0 3rem;
  /* justify-self: end;
  align-items: end;
  justify-content: end; */
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-bottom: 1rem;
}

.program_title .program_head {
  background-color: #000000;
  width: 1rem;
  /* height: 8.43rem; */
  height: auto;
  margin: 1rem;
}

.program_title .program_head h2 {
  font-size: 34px;
  background-color: #a31e1e;
  min-width: 23rem;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

.program_title .program_head span {
  font-size: 28px;
}

/* PROGRAM HEAD 38 rem */

.program_task_38 {
  background-color: #000000;
  width: 1rem;
  height: 7rem;
  /* height: auto; */
  position: absolute;
}

.program_title_38 {
  padding: 0 0 0 3rem;
  /* justify-self: end;
  align-items: end;
  justify-content: end; */
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-bottom: 1rem;
}

.program_title_38 .program_head_38 h2 {
  font-size: 22px;
  background-color: #a31e1e;
  width: 40rem;
  /* height: 5rem; */
  height: auto;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

.program_title_38 .program_head_38 span {
  font-size: 28px;
}

/* PROGRAM HEAD 32 rem */

.program_task_32 {
  background-color: #000000;
  width: 1rem;
  height: 7rem;
  /* height: auto; */
  position: absolute;
}

.program_title_32 {
  padding: 0 0 0 3rem;
  /* justify-self: end;
  align-items: end;
  justify-content: end; */
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-bottom: 1rem;
}

.program_title_32 .program_head_32 h2 {
  font-size: 28px;
  background-color: #a31e1e;
  width: 32rem;
  /* height: 5rem; */
  height: auto;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

.program_title_32 .program_head_32 span {
  font-size: 28px;
}

/* PROGRAM HEAD 22 rem */

.program_task_22 {
  background-color: #000000;
  width: 1rem;
  height: 7rem;
  /* height: auto; */
  position: absolute;
}

.program_title_22 {
  padding: 0 0 0 3rem;
  /* justify-self: end;
  align-items: end;
  justify-content: end; */
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-bottom: 1rem;
}

.program_title_22 .program_head_22 h2 {
  font-size: 28px;
  background-color: #a31e1e;
  width: 22rem;
  /* height: 5rem; */
  height: auto;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
}

.program_title_22 .program_head_22 span {
  font-size: 28px;
}

/* PROGRAM HEAD all rem */

.program_task_all {
  background-color: #000000;
  width: 1rem;
  height: 7rem;
  /* height: auto; */
  position: absolute;
}

.program_title_all {
  padding: 0 0 0 3rem;
  justify-self: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-bottom: 1rem;
}

.program_title_all .program_head_all h2 {
  font-size: 28px;
  background-color: #a31e1e;
  width: 18rem;
  /* height: 5rem; */
  height: auto;
  padding: 2rem 0rem 0rem 1rem;
  margin-left: 1rem;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.program_title_all .program_head_all span {
  font-size: 28px;
}

@media (max-width: 572px) {
  /* PROGRAM HEAD 38 rem */

  .program_task_38 {
    height: 7rem;
    /* height: auto; */
  }

  .program_title_38 {
    padding: 0 0 0 0.5rem;
  }

  .program_title_38 .program_head_38 h2 {
    font-size: 18px;
    width: 22rem;
    /* height: 5rem; */
    height: auto;
  }

  .program_title_38 .program_head_38 span {
    font-size: 20px;
  }

  /* PROGRAM HEAD 32 rem */

  .program_task_32 {
    height: 6rem;
    /* height: auto; */
  }

  .program_title_32 {
    padding: 0 0 0 0.5rem;
  }

  .program_title_32 .program_head_32 h2 {
    font-size: 20px;
    width: 24rem;
    /* height: 4rem; */
    height: auto;
  }

  .program_title_32 .program_head_32 span {
    font-size: 20px;
  }

  /* PROGRAM HEAD 22 rem */

  .program_task_22 {
    height: 7rem;
  }

  .program_title_22 {
    padding: 0 0 0 0.5rem;
  }

  .program_title_22 .program_head_22 h2 {
    font-size: 24px;
    width: 14rem;
    /* height: 5rem; */
    height: auto;
  }

  .program_title_22 .program_head_22 span {
    font-size: 24px;
  }

  .program_title_all {
    padding: 0 0 0 1rem;
  }
}

/* PROGRAM LIST */

/* .program_list_section {
  margin-bottom: 5rem;
} */

.program_list_container {
  max-width: 1680px;
  padding: auto;
  margin: auto;
  background-color: #fff;
}

.program_list_content {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 0 5rem 0;
  justify-content: center;
}

.program_list_item {
  margin: 3.5rem 2rem 2rem 2rem;
  padding: 1rem;
  max-width: 320px;
  /* width: auto !important; */
  border: 4px solid #a31e1e;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.program_list_img img {
  width: 100%;
}

.program_list_title {
  text-align: center;
  justify-content: center;
}

.program_list_name {
  color: #000000;
  margin-top: 1.5rem;
  font-size: 24px;
}

.program_list_name span {
  font-weight: bold;
  /* font-size: 22px; */
}

.btn_group {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.program_btn_detail {
  background-color: #a31e1e;
  /* border: 1px solid rgb(55, 55, 55); */
  border-radius: 50px;
  color: #fff;
  padding: 0.5rem;
  text-transform: lowercase;
  display: block;
  width: 180px;
  text-align: center;
  align-items: center;
  margin: 1rem auto auto auto;
}

.program_btn_room {
  background-color: #1c5fdb;
  /* border: 1px solid rgb(55, 55, 55); */
  border-radius: 50px;
  color: #fff;
  padding: 0.5rem;
  text-transform: lowercase;
  display: block;
  width: 180px;
  text-align: center;
  align-items: center;
  margin: 1rem auto auto auto;
}

@media (max-width: 459px) {
  .program_title {
    padding: 0;
    /* justify-self: end;
    align-items: end;
    justify-content: end; */
    position: absolute;
    z-index: 1;
    bottom: 0;
  }

  .program_title .program_head {
    background-color: #000000;
    width: 1rem;
    height: 6.5rem;
    margin: 1rem;
  }

  .program_title .program_head h2 {
    font-size: 24px;
    background-color: #a31e1e;
    width: 18rem;
    padding: 1rem;
    margin-left: 1rem;
    color: #fff;
  }

  .program_title .program_head span {
    font-size: 22px;
  }

  /* .program_list_img img{
    width: 250px;
  } */
}

/* SECTION : PROGRAM LIST END */

/* SECTION : PROGRAM DETAILS START */

.program_intro_container {
  max-width: 1280px;
  padding: auto;
  margin: auto;
  background-color: #fff;
}

.program_intro_content {
  padding: 6rem 2rem 3rem 2rem;
  text-align: left;
}

.program_intro {
  font-size: 18px;
  text-align: center;
}

.program_intro_v2 {
  text-align: left;
  font-size: 18px;
}

.program_icon_content {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 0 3rem 0;
  justify-content: center;
}

.program_icon_item {
  /* margin: 3.5rem 2rem 2rem 2rem; */
  padding: 1rem;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  /* background-color: #fff; */
}

.program_icon_img {
  width: 180px;
  /* height: 182px; */
  align-items: center;
  justify-items: center;
  text-align: center;
  margin: auto;
}

.program_icon_img img {
  object-fit: contain;
  width: 100%;
  border-radius: 8px;
}

.program_icon_name {
  text-align: center;
}

.program_icon_name span {
  font-weight: bold;
}

/* SECTION : PROGRAM DETAILS END */

/* .bg_red {
  background-color: #a31e1e;
} */

/* SECTION : PROGRAM RED AREA START */
.program_red_area_item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 3rem;
  margin: auto;
  justify-content: center;
  align-items: center;
  background-color: #a31e1e;
}

.program_red_area_img {
  padding: 0 3rem 0 0;
}

.program_red_area_title {
  padding: 1rem;
  width: 500px;
  color: #fff;
  text-align: left;
}

.program_red_area_text {
  font-size: 18px;
}

@media (max-width: 1018px) {
  .program_red_area_img {
    padding: 0 0 0 0;
  }

  .program_title .program_head h2 {
    font-size: 28px;
    background-color: #a31e1e;
    min-width: 23rem;
    padding: 1rem;
    margin-left: 1rem;
    color: #fff;
  }
}

@media (max-width: 425px) {
  .program_red_area_img img {
    width: 300px;
  }

  .program_red_area_title {
    padding: 0rem;
  }
}

/* SECTION : PROGRAM RED AREA END */

/* SECTION : PROGRAM WHITE AREA START */

.program_white_area_section {
  padding-bottom: 5rem;
}

.program_white_area_container {
  max-width: 1280px;
  /* padding: 3rem 0rem; */
  margin: auto;
}

.program_white_area_content {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 3rem 0;
  justify-content: space-around;
}

.program_white_area_item {
  /* margin: 3.5rem 2rem 2rem 2rem; */
  padding: 1rem;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.program_white_title {
  font-size: 18px;
  padding: 1rem 2rem;
}

/* table_class_p1-6_container */

.table_class_p1-6_container {
  max-width: 1280px;
  /* padding: 1rem; */
  margin: auto;
}

.table_class_p1-6_container img {
  max-width: 100%;
  margin: auto;
}

.table_class_p1-6_content {
  /* background-color: #a31e1e; */
  border-radius: 8px;
  height: auto;
  justify-content: center;
  align-items: center;
  justify-items: center;
  padding: 0 0 8rem 0;
  /* margin: 2rem 3rem; */
}

/* .table_class_p1-6_content table {
  border:3px solid rgb(255, 255, 255);
  border-collapse:collapse;
  color: #fefdfc;
  width: 100%;
  padding: 1rem;
} */

/* .table_class_p1-6_content table > tr > th,td {
  border:3px solid rgb(255, 255, 255);
  padding: 1rem;
} */

.table_class_p1-6_content img {
  border-radius: 8px;
  width: 100%;
}

@media (max-width: 1039px) {
  .table_class_p1-6_content {
    margin: 1rem 1.5rem;
  }
}

@media (max-width: 839px) {
  .table_class_p1-6_content {
    margin: 0.2rem 0.2rem;
  }
}

/* SECTION : PROGRAM WHITE AREA END */

/* SECTION : T_Download START */

.t_download_container {
  margin-top: 8rem;
  margin-bottom: 16rem;
  padding: 1rem;
}

.t_download_content h1 {
  text-align: center;
  padding: 3rem 0rem;
  font-size: 24px;
}

.t_file_item {
  text-align: center;
  padding: 0.5rem 0rem;
  text-align: left;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.accordion-wrapper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.accordion {
  width: 100%;
  color: white;
  overflow: hidden;
  margin-bottom: 16px;
}

.accordion:last-child {
  margin-bottom: 0;
}

.accordion-label {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 16px;
  background: #a31e1e;
  font-weight: bold;
  cursor: pointer;
  font-size: 20px;
}

.accordion-label:hover {
  background: #fff;
  color: #a31e1e;
  /* border: 3px solid #a31e1e; */
}

.accordion-label::after {
  content: "\276F";
  width: 16px;
  height: 16px;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.accordion-content {
  max-height: 0;
  padding: 0 16px;
  color: rgba(4, 57, 94, 1);
  background: white;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* .accordion-content a{
  margin: 0;
  color: rgba(4,57,94,.7);
  font-size: 18px;
} */

.accordion-content a {
  display: inline-block;
  position: relative;
  color: rgba(6, 45, 72, 0.7);
  font-size: 18px;
}

.accordion-content a:hover {
  color: #a31e1e;
}

.accordion-content a i {
  font-size: 24px;
}

.accordion-content a:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #a31e1e;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.accordion-content a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

input:checked + .accordion-label {
  background: #a31e1e;
  color: #fff;
}

input:checked + .accordion-label::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

input:checked ~ .accordion-content {
  max-height: 100vh;
  padding: 16px;
}

/* SECTION : T_Download END */

/* SECTION : Personnel START */

.personnel_content_container {
  background-color: #ebebeb;
  padding: 1rem;
  border-radius: 8px;
}

.personnel_item a {
  color: #414141;
  font-size: 18px;
}

.personnel_item span {
  color: #414141;
  font-size: 18px;
}

.personnel_item a:hover {
  color: #a31e1e;
}

.personnel_item {
  /* display: inline-block; */
  position: relative;
  color: #a31e1e;
}

/* SECTION : Personnel END */

/* SECTION : HIDE START */

.hide_container {
  width: 100%;
  flex-wrap: wrap;
  height: 680px;
}

.hide_content {
  display: flex;
  height: 100%;
  width: 100%;
}

/* .hide_item {
  content: "";
  flex: auto;
} */

.hide_item .talented_section {
  width: 1420px;
  height: 680px;
}

.hide_item .detail_container {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #4b4b4b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 500px;
}

.hide_item .detail_container #carouselExampleControls {
  width: 100%;
}

.hide_item .detail_container .detail-box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}

.hide_item .detail_container .detail-box h1 {
  /* font-family: "Open Sans",
 sans-serif; */
  text-transform: uppercase;
  font-weight: bold;
  color: #fefdfc;
  font-size: 3.5rem;
}

.hide_item .detail_container .detail-box a {
  display: inline-block;
  padding: 10px 45px;
  background-color: #f22324;
  color: #fefdfc;
  border-radius: 0;
  border: 1px solid #f22324;
  text-transform: uppercase;
  margin-top: 35px;
}

.hide_item .detail_container .detail-box a:hover {
  background-color: transparent;
  color: #f22324;
}

/* @media (min-width:1280px) and (max-width:3000px) {
  .hide_container {
    display: none;
    
  }
} */

/* @media (min-width:0px) and (max-width:3000px) {
  .hide_container {
    display: none;
    
  }
} */

/* @media (max-width: 1631px) {
  .hide_container {
    display: none;
  }
} */

/* @media (min-width: 525px) {
  .hide_container {
    display: none;
  }
} */

/* SECTION : HIDE END */

/* MOU */
.mou_content {
  margin-top: 5rem;
  height: 1920px;
}

/* ADMISSION */
.admission_content {
  margin-top: 5rem;
  height: 1080px;
}

/* Contact */

.history_head {
  padding: 3rem;
  font-family: "Kanit", sans-serif;
  font-family: "Prompt", sans-serif;
  width: 100%;
  height: auto;
}

.history_head .history_title {
  background-color: #000000;
  width: 1rem;
  height: 4.25rem;
  margin: 1rem;
  /* float: right; */
  /* position: absolute; */
}

.history_head .history_title h3 {
  font-size: 24px;
  background-color: #a31e1e;
  /* background-color: #810505; */
  width: 14rem;
  padding: 1rem;
  margin-left: 1rem;
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-family: "Prompt", sans-serif;
}

@media (max-width: 1023px) {
  /* .history_container .history_head {
      right: 15rem;
  } */

  .history_head .history_title {
    background-color: #000000;
    width: 1rem;
    height: 3.9rem;
    margin: 1rem;
  }
}

.contact_container {
  margin-top: 5.5rem;
}

.contact_content {
  width: 100%;
  max-width: 1280px;
  top: 5.5rem;
  margin: auto;
}

.position_container {
  width: 100%;
  background-color: #a31e1e;
  color: #ffffff;
}

.position_content {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: row; */
  padding: 3rem 5rem 6rem 5rem;
  justify-content: center;
  max-width: 800px;
  margin: auto;
  gap: 50px;
}

.maps_content {
  content: "";
  flex: 300px;
}

.maps_content h2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.address_content {
  content: "";
  flex: auto;
}

.address_content h2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.address_content p {
  font-size: 20px;
  padding-left: 1.5rem;
}

.building_content {
  padding-bottom: 3rem;
}

@media (max-width: 784px) {
  .address_content {
    padding-top: 2rem;
  }
}

@media (max-width: 530px) {
  .position_content {
    padding: 3rem 2rem 6rem 2rem;
  }
}

.phon_number_content {
  padding: 1rem 2rem 2rem 2rem;
  text-align: center;
}

.phon_number_content p {
  font-size: 18px;
}

/* Other Assumption */
.o_assumption_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #a31e1e;
  min-width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}

.o_assumption_container a img {
  width: 50px;
}

.assumption_item a {
  display: flex;
  gap: 1rem;
  align-items: center;
  border: 2px solid #cccfdb;
  border-radius: 16px;
  padding: 0.5rem;
  min-width: 370px;
  height: auto;
}

.assumption_item a:hover {
  background-color: #9cdfff;
  border: 2px solid #60afd4;
  transition: 0.3s;
  scale: 1.03;
}

.school_detail {
  font-size: 14px;
  color: #161616;
  text-align: left;
}

/* music */
/* .music_content {
  display: flex;
  gap: 20px;
  text-align: center;
  justify-content: center;
} */

/* .music_item {
  flex: 300px;
} */

/* SECTION : FOOTER START */
.footer {
  /* padding-block: 50px; */
  padding-bottom: 25px;
  background-color: #343434;
  color: #cbcbcb;
  /* Margin-top: auto; for demo use only */
  margin-top: auto;
}

.footer__container {
  max-width: 1160px;
  /* width: 100%; */
  margin: auto;
  padding: 5rem;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  row-gap: 20px;
}

.footer__title {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.footer__list-link {
  transition: color 0.25s;
  color: #d4d4d4;
}

.footer__list-link:hover {
  color: #fff;
}

.footer__divider {
  margin-block: 25px;
  border: none;
  border-top: 1px solid rgba(252, 255, 255, 0.1);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__list--bottom {
  flex-direction: row;
}

.ri-facebook-circle-line,
.ri-instagram-line {
  font-size: 22px;
}

@media (max-width: 546px) {
  .footer__container {
    max-width: 100%;
    margin: auto;
    padding: 1rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .footer__title {
    text-align: center;
  }

  .footer__list {
    text-align: center;
  }

  .footer__list--bottom {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}

/* SECTION : FOOTER END */

/* ANIMATION START */
@keyframes fadeInUp {
  from {
    transform: translate3d(0, 50px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 50px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.animated {
  animation-duration: 1.2s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
}

.animatedFadeInUp {
  opacity: 0;
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

/* TASK ANIMATION */

@keyframes inLeft {
  0% {
    transform: translateX(-100vmin);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.left {
  /* font-weight: 700;
  font-size: 0.9em; */
  grid-column: 1;
  animation: inLeft;
  animation-duration: 0.8s;
}

/* IMG FADEIN */
.fade-in {
  animation: fadeIn ease 0.8s;
  -webkit-animation: fadeIn ease 0.8s;
  -moz-animation: fadeIn ease 0.8s;
  -o-animation: fadeIn ease 0.8s;
  -ms-animation: fadeIn ease 0.8s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ANIMATION START fadeInUp_scroll_down  */
@keyframes fadeInUp_scroll_down {
  0% {
    transform: translate3d(0, 300px, 0);
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp_scroll_down {
  0% {
    transform: translate3d(0, 300px, 0);
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .animated_scroll_down {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
  }

  .animatedFadeInUp_scroll_down {
    opacity: 0;
  }

  .fadeInUp_scroll_down {
    opacity: 0;
    animation-name: fadeInUp_scroll_down;
    -webkit-animation-name: fadeInUp_scroll_down;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
  }
}

/* ANIMATION START fadeInleft_scroll_down  */
@keyframes inUpLeft {
  0% {
    transform: translateX(-50vmin);
    opacity: 0;
  }

  30% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
  }
}

.Upleft {
  /* font-weight: 700;
  font-size: 0.9em; */
  grid-column: 1;
  animation: inUpLeft;
  animation-duration: 0.8s;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

/* ANIMATION START fadeInUpright_scroll_down  */
@keyframes inUpRight {
  0% {
    transform: translateX(50vmin);
    opacity: 0;
  }

  30% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.UpRight {
  /* font-weight: 700;
  font-size: 0.9em; */
  grid-column: 1;
  animation: inUpRight;
  animation-duration: 0.8s;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

/* ANIMATION END */

/* MODAL */
/* .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-content {
  background-color: #fff;
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.close-btn {
  display: block;
  margin-bottom: 10px;
} */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black background */
  z-index: 9999;
}

.close-btn {
  display: block;
  margin-bottom: 10px;
  background-color: #a31e1e;
  color: #fff;
  border: none;
  border-radius: 8px;
  text-align: right;
  float: right;
  font-size: 34px;
  font-weight: bold;
  padding: 0rem 0.2rem;
}

.modal-content {
  /* background-color: #fff; */
  margin: 1.5rem auto;
  padding: 20px;
  border-radius: 4px;
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
  max-width: 1280px;
  /* height: 100vh; */
}

@media screen and (max-width: 600px) {
  .modal-content {
    margin: 20px;
    padding: 10px;
    max-width: 100%;
    height: auto;
    overflow-y: scroll;
  }
}

/* for vdo simulated */
.modal-content-vdo {
  background-color: #fff;
  margin: 40px auto;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  max-width: 750px;
  height: auto;
}

@media screen and (max-width: 600px) {
  .modal-content-vdo {
    margin: 20px;
    padding: 10px;
    max-width: auto;
  }
}

/* Button Service */

.service {
  display: flex;
  margin-top: 2rem;
}

.service_item {
  display: flex;
  /* gap: 0.8rem; */
  margin: auto;
  width: 100%;
  justify-content: center;
}

/* @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;500;700;800&display=swap'); */
.service_item .btn_service {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: #068bf8;
  /* padding: 0.5rem 0.5rem !important; */
  /* font-size: 22px; */
  font-size: 20px;
  font-weight: 500;
  font-family: "Kanit", sans-serif;
  text-align: center;
}

.service_item a i {
  margin-right: 0.3em;
  transition: all 0.2s ease-out;
}

.service_item:hover a {
  color: #a0aec0;
}

.service_item:hover a:hover {
  background: #068bf8;
  color: #fff;
  box-shadow: 0 0 0.8em 0 #068bf8;
  /* transform: translateY(-.2em); */
  scale: 1.1;
}

.service_item:hover a i {
  color: #cbd5e0;
}

.service_item:hover a:hover i {
  color: #fed7e2;
  transform: rotate(-10deg);
}

.service_item a i {
  padding-right: 0.3rem;
}

/* service_item2 */

/* .service_item2 {
  display: flex;
  gap: 8px;
  margin: auto;
  width: 100%;
  justify-content: center;
} */

/* @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;500;700;800&display=swap'); */
.service_item2 a {
  /* filter: drop-shadow(0 0 0.75rem rgba(255, 255, 255, 0.657)); */
  /* filter: drop-shadow(0 0 0.75rem rgb(124, 21, 213)); */
  filter: drop-shadow(0 0 0.75rem rgb(230, 230, 230));
  /* background: white; */
  color: #391f62;
  /* padding: 0.5rem 1rem; */
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  font-family: "Kanit", sans-serif;
  transition: 0.3s;
}

.service_item2 a i {
  margin-right: 0.3em;
  transition: all 0.2s ease-out;
}

.service_item2:hover a {
  color: #a0aec0;
}

.service_item2:hover a:hover {
  /* background: #391F62; */
  color: #fff;
  /* box-shadow: 0 0 0.8em 0 #391F62; */
  /* transform: translateY(-.2em); */
  transition: 0.3s;
  scale: 1.2;
  filter: drop-shadow(0 0 0.75rem rgb(124, 21, 213));
}

.service_item2:hover a i {
  color: #cbd5e0;
}

.service_item2:hover a:hover i {
  color: #fed7e2;
  transform: rotate(-10deg);
}

.service_item2 a i {
  padding-right: 0.3rem;
}

.btn_service2 img {
  width: 85px;
}

.btn_service_fist {
  border-radius: 8px 0px 0px 8px;
}

.btn_service_alone {
  border-radius: 8px;
}

.btn_service_last {
  border-radius: 0px 8px 8px 0px;
}

@media screen and (max-width: 1647px) {
  .service {
    margin-top: 1rem;
  }

  .service_item a {
    font-size: 22px;
    font-weight: 0;
    font-family: "Kanit", sans-serif;
    padding: 0.3rem 1rem;
  }

  .btn_service2 img {
    /* width: 110px; */
  }
}

@media screen and (max-width: 1451px) {
  .service {
    margin-top: 1rem;
  }

  .service_item a {
    font-size: 18px;
    font-weight: 0;
    font-family: "Kanit", sans-serif;
    padding: 0.3rem 1rem;
  }

  /* Program */

  .program h4 {
    font-size: 24px;
    padding-top: 0.5rem;
  }

  #program_show .splide__track {
    height: 18rem;
  }

  .program_list img {
    width: 50px;
  }

  /* .program_list p {
    font-size: 24px;
  } */

  .program_list .normal {
    font-size: 24px;
  }

  .program_list .long {
    font-size: 18px;
  }

  /* Event */
  .events h4 {
    padding-top: 0.5rem;
  }

  .btn_service2 img {
    width: 100px;
  }
}

@media screen and (max-width: 545px) {
  .message {
    font-size: 16px;
  }

  .assumption_item a {
    min-width: 320px;
  }
}

@media (max-height: 896px) {
  .show-menu {
    height: calc(550%);
  }
}

@media (max-height: 667px) {
  .show-menu {
    height: calc(530%);
  }
}

@media (max-height: 550px) {
  .show-menu {
    height: calc(450%);
  }
}