/*:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}
*/

:root {
  --default-font-family: 'Prompt', sans-serif;
}


.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

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

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: 1440px;
  height: 1915px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}
.flex-row-e {
  position: relative;
  width: 1440px;
  height: 99px;
  margin: 0 0 0 0;
  z-index: 22;
}
.rectangle {
  position: absolute;
  width: 1440px;
  height: 66px;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 8;
}
.college-name {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 44px;
  top: 25px;
  left: 135px;
  color: #162647;
  font-family: Inter, var(--default-font-family);
  font-size: 36px;
  font-weight: 500;
  line-height: 43.568px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.36px;
  z-index: 11;
}
.logo-black {
  position: absolute;
  width: 68px;
  height: 68px;
  top: 31px;
  left: 45px;
  background: url(./assets/images/0c1049584d60d5a72e6c435ca9b049a394184fa7.png)
    no-repeat center;
  background-size: cover;
  z-index: 22;
}
.button-rectangle {
  position: absolute;
  width: 212px;
  height: 42px;
  top: 47px;
  left: 1183px;
  cursor: pointer;
  background: #ffeab3;
  border: none;
  z-index: 15;
  border-radius: 15px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.apply {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 109px;
  height: 29px;
  top: 5px;
  left: 56px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 800;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 16;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.undergraduate-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 190px;
  height: 29px;
  top: 54px;
  left: 465px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 9;
}
.postgraduate-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 178px;
  height: 29px;
  top: 54px;
  left: 703px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}
.master-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 185px;
  height: 29px;
  top: 54px;
  left: 929px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 14;
}
.line {
  position: absolute;
  width: 230px;
  height: 1px;
  top: 71px;
  left: 135px;
  background: url(./assets/images/95cac181-1d8f-419a-9161-15459452f53f.png)
    no-repeat center;
  background-size: cover;
  z-index: 13;
}
.degree-programs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 232px;
  height: 22px;
  top: 77px;
  left: 133px;
  color: #162647;
  font-family: Inter, var(--default-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 21.784px;
  text-align: center;
  white-space: nowrap;
  z-index: 12;
}
.rectangle-1 {
  position: relative;
  width: 1440px;
  height: 34px;
  margin: 27px 0 0 0;
  background: #d9d9d9;
  z-index: 1;
}
.about-college {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 134px;
  height: 17px;
  top: 9px;
  left: 139px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 16.943px;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}
.home-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 46px;
  height: 17px;
  top: 9px;
  left: 72px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 16.943px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}
.arrow {
  position: absolute;
  width: 16px;
  top: 19px;
  left: 119px;
  background: url(./assets/images/2391d386-2a72-424e-9aeb-8c8b9a2899cc.png)
    no-repeat center;
  background-size: cover;
  z-index: 23;
}
.arrow-2 {
  position: absolute;
  width: 1px;
  top: 19px;
  left: 54px;
  background: url(./assets/images/73f8add6-a701-4ff7-b97e-5771b4e53fa7.png)
    no-repeat center;
  background-size: cover;
  z-index: 24;
}
.arrow-3 {
  position: absolute;
  width: 1px;
  top: 19px;
  left: 62px;
  background: url(./assets/images/2962304f-4cdb-4e83-9db5-d4c25b45cdcd.png)
    no-repeat center;
  background-size: cover;
  z-index: 25;
}
.about-santapol {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 182px;
  height: 24px;
  margin: 16px 0 0 40px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.4px;
  z-index: 7;
}
.rectangle-4 {
  position: relative;
  width: 1440px;
  height: 117px;
  margin: 734px 0 0 0;
  background: #ffffff;
  z-index: 5;
}
.santapol-success {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 847px;
  height: 39px;
  top: 54px;
  left: 293px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 1.6px;
  z-index: 5;
}
.flex-row-fc {
  position: relative;
  width: 740px;
  height: 58px;
  margin: 9px 0 0 106px;
  z-index: 28;
}
.about-santapol-5 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 58px;
  top: 0;
  left: 0;
  color: #0a3080;
  font-family: Inter, var(--default-font-family);
  font-size: 34px;
  font-weight: 600;
  line-height: 58px;
  text-align: left;
  white-space: nowrap;
  z-index: 28;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .about-santapol-5 {
      font-size: 28px; /* ลดขนาดตัวอักษร */
      height: auto; /* ให้ขนาดปรับตามเนื้อหา */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin: 0 0 0 20px;
      font-size: 24px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .about-santapol-5 {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 36px; /* ลดระยะห่างระหว่างบรรทัด */
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ให้ขยายเต็มจอ */
  }
}

/*
.line-6 {
  position: absolute;
  width: 244px;
  height: 2px;
  top: 32px;
  left: 380px;
  background: url(./assets/images/8bce16b8-9565-4c46-84da-9f96eec24fa2.png)
    no-repeat center;
  background-size: cover;
  z-index: 21;
}
*/

.line-6-rquest-froms {
  position: absolute;
  width: 244px;
  height: 2px;
  top: 32px;
  left: 280px;
  background: url(./assets/images/8bce16b8-9565-4c46-84da-9f96eec24fa2.png)
    no-repeat center;
  background-size: cover;
  z-index: 21;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-6-rquest-froms {
      width: 50%; /* ทำให้เส้นขยายหรือหดตัวตามขนาดจอ */
      left: 25%; /* จัดตำแหน่งให้อยู่ตรงกลาง */
      top: 28px; /* ปรับระยะห่างให้เหมาะสม */
      margin: 0 0 0 100px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-6-rquest-froms {
    display: none;
  }
}

.line-6 {
  position: absolute;
  width: 244px;
  height: 2px;
  top: 32px;
  left: 580px;
  background: url(./assets/images/8bce16b8-9565-4c46-84da-9f96eec24fa2.png)
    no-repeat center;
  background-size: cover;
  z-index: 21;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-6 {
      width: 50%; /* ทำให้เส้นขยายหรือหดตัวตามขนาดจอ */
      left: 25%; /* จัดตำแหน่งให้อยู่ตรงกลาง */
      top: 28px; /* ปรับระยะห่างให้เหมาะสม */
      margin: 0 0 0 340px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-6 {
    display: none;
  }
}


.line-7 {
  position: relative;
  width: 100%; /* 🔹 ทำให้เส้นเต็มจอกว้าง */
  max-width: 1230px; /* 🔹 จำกัดความกว้างสูงสุด */
  height: 1px;
  margin: 38px auto 0 auto; /* 🔹 จัดให้อยู่ตรงกลางแนวนอน */
  background: url(./assets/images/693ec336-5dd6-4701-84be-a1309fd4d917.png) no-repeat center;
  background-size: contain;
  z-index: 44;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-7 {
      width: 95%; /* 🔹 ให้เส้นแคบลงเล็กน้อยใน Tablet */
      max-width: 800px;
      margin: -20px auto 0 auto; /* 🔹 ลดระยะห่างด้านบน */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-7 {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      margin: 25px auto 0 auto; /* 🔹 ลดระยะห่างให้พอดีกับจอเล็ก */
  }
}

/* .flex-row {
  position: relative;
  width: 800px;
  height: 44px;
  margin: 22px 0 0 100px;
  z-index: 48;
} */
.flex-row {
  position: relative;
  width: 100%; /* 🔹 ทำให้กว้างเต็มหน้าจอ */
  max-width: 800px; /* 🔹 จำกัดขนาดสูงสุด */
  height: 44px;
  margin: 22px auto 0 100px; /* 🔹 ปรับตำแหน่งเริ่มต้น */
  z-index: 48;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

.ellipse {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/232167cf-87dc-4fb9-a585-d21c754496a7.png)
    no-repeat center;
  background-size: cover;
  z-index: 33;
  border-radius: 50%;
}



/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}


/*
.introduce-santapol {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 5px;
  left: 0;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 48;
}*/
.introduce-santapol {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 5px;
  left: 0;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px; /* ขนาดตัวอักษรเริ่มต้น */
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap; /* ป้องกันข้อความตัดบรรทัด */
  z-index: 48;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .introduce-santapol {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .introduce-santapol {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}

.polygon {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 5.442px;
  left: 998px;
  background: url(./assets/images/aea8d74c-d5c4-4233-bdc6-ad4b52cbe46d.png)
    no-repeat center;
  background-size: cover;
  z-index: 39;
  border-radius: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}


.line-8 {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 40px;
  left: 4px;
  background: url(./assets/images/ab8fd17d-41d5-4b28-886d-94e60ede12c3.png)
    no-repeat center;
  background-size: cover;
  z-index: 47;
} 


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-8 {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-8 {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}

.flex-row-9 {
  position: relative;
  width: 100%;
  max-width: 800px; /* 🔹 จำกัดขนาดสูงสุด */
  height: 44px;
  margin: 20px 0 0 100px;
  z-index: 51;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-9 {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-9 {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

.ellipse-a {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/79e291ce-4a9b-4ebf-9b20-0c757b5cfe6d.png)
    no-repeat center;
  background-size: cover;
  z-index: 32;
  border-radius: 50%;
}
/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse-a {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse-a {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}

.history-santapol {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 4px;
  left: 0;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 51;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .history-santapol {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .history-santapol {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}

.polygon-b {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 6px;
  left: 998px;
  background: url(./assets/images/2379a43f-8fe7-4b33-bc95-1a5d8182e088.png)
    no-repeat center;
  background-size: cover;
  z-index: 34;
  border-radius: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon-b {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon-b {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}



.line-c {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 39px;
  left: 0;
  background: url(./assets/images/a874f4d3-8dd1-424d-848c-6ef5f85c224e.png)
    no-repeat center;
  background-size: cover;
  z-index: 46;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-c {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-c {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}

.flex-row-b {
  position: relative;
  width: 800px;
  height: 43px;
  margin: 20px 0 0 100px;
  z-index: 52;
}
/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-b {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-b {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

.ellipse-d {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/08c310d1-3a67-4c86-ba29-d6e196e95bf2.png)
    no-repeat center;
  background-size: cover;
  z-index: 31;
  border-radius: 50%;
}


/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse-d {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse-d {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}


.organization-structure {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 4px;
  left: 0;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 52;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .organization-structure {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .organization-structure {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}


.polygon-e {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 6px;
  left: 998px;
  background: url(./assets/images/8d72c6d0-c758-4ee6-9593-e9cf07c31196.png)
    no-repeat center;
  background-size: cover;
  z-index: 35;
  border-radius: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon-e {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon-e {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}


.line-f {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 39px;
  left: 0;
  background: url(./assets/images/91f4c83d-ae66-4615-b777-a6945660b56d.png)
    no-repeat center;
  background-size: cover;
  z-index: 45;
}
/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-f {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-f {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}

.flex-row-dfd {
  position: relative;
  width: 100%; /* 🔹 ทำให้กว้างเต็มหน้าจอ */
  max-width: 800px; /* 🔹 จำกัดขนาดสูงสุด */
  height: 44px;
  margin: 19px 0 0 100px;
  z-index: 50;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-dfd {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-dfd {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}
.ellipse-10 {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/f8799c21-2d30-49bb-9c44-08c34d07c154.png)
    no-repeat center;
  background-size: cover;
  z-index: 30;
  border-radius: 50%;
}


/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse-10 {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse-10 {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}


.sangthapol-college {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 5px;
  left: 3px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 50;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .sangthapol-college {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .sangthapol-college {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}


.polygon-11 {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 6px;
  left: 998px;
  background: url(./assets/images/f22d505b-a828-47fd-a9b0-09b786b69c49.png)
    no-repeat center;
  background-size: cover;
  z-index: 37;
  border-radius: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon-11 {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon-11 {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}

.line-12 {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 40px;
  left: 0;
  background: url(./assets/images/23b57d7f-a8ce-42a7-b506-322cf97e8cab.png)
    no-repeat center;
  background-size: cover;
  z-index: 43;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-12 {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-12 {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}



.flex-row-f {
  position: relative;
  width: 100%; /* 🔹 ทำให้กว้างเต็มหน้าจอ */
  max-width: 800px; /* 🔹 จำกัดขนาดสูงสุด */
  height: 45px;
  margin: 18px 0 0 104px;
  z-index: 49;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-f {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-f {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}


.ellipse-13 {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/b1294894-7547-4a15-b1cc-886d6695329a.png)
    no-repeat center;
  background-size: cover;
  z-index: 27;
  border-radius: 50%;
}


/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse-13 {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse-13 {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}

.sangthapol-song {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 6px;
  left: 3px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 49;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .sangthapol-song {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .sangthapol-song {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}

.polygon-14 {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 6px;
  left: 998px;
  background: url(./assets/images/1ff14c7c-93f1-4005-a907-a4d6e479f5c7.png)
    no-repeat center;
  background-size: cover;
  z-index: 38;
  border-radius: 2px;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon-14 {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon-14 {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}

.line-15 {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 41px;
  left: 0;
  background: url(./assets/images/15fbe199-099e-422b-8d97-947afef59640.png)
    no-repeat center;
  background-size: cover;
  z-index: 42;
}



/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-15 {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-15 {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}



.flex-row-eff {
  position: relative;
  width: 1124px;
  height: 45px;
  margin: 18px 0 0 103px;
  z-index: 41;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-eff {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 600px;
      margin: -10px 0 0 30px; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-eff {
      width: 100%; /* 🔹 ใช้เต็มจอ */
      max-width: 400px;
      margin: 15px auto; /* 🔹 จัดให้อยู่ตรงกลาง */
  }
}
.ellipse-16 {
  position: absolute;
  width: 37px;
  height: 37px;
  top: 0;
  left: 995px;
  background: url(./assets/images/5826e5b7-3dc0-4aa7-89b1-4ae28681e968.png)
    no-repeat center;
  background-size: cover;
  z-index: 29;
  border-radius: 50%;
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .ellipse-16 {
      width: 25px; /* ลดขนาดลง */
      height: 25px;
      left: 85%; /* ปรับให้ชิดขอบขวา */
      margin: 10px 0 0 5px;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .ellipse-16 {
      width: 25px; /* ลดขนาดให้เหมาะกับจอเล็ก */
      height: 25px;
      left: 75%; /* ปรับให้อยู่กึ่งกลางมากขึ้น */
      top: 5px; /* ป้องกันการติดขอบ */
  }
}


.public-disclosure {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 6px;
  left: 3px;
  color: #000000;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 40;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .public-disclosure {
      font-size: 22px; /* ลดขนาดตัวอักษร */
      line-height: 34px;
      top: 5px; /* ปรับตำแหน่งเล็กน้อย */
      white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
      margin-top: 5px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .public-disclosure {
      font-size: 22px; /* ลดขนาดตัวอักษรลงอีก */
      line-height: 30px;
      position: relative; /* ป้องกันการทับกับเนื้อหาอื่น */
      text-align: center; /* จัดให้อยู่ตรงกลางในจอเล็ก */
      width: 100%; /* ขยายเต็มหน้าจอ */
      top: 0; /* ตั้งค่าใหม่ให้เหมาะสม */
  }
}



.polygon-17 {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 6px;
  left: 998px;
  background: url(./assets/images/97ab2c08-b184-4fde-aa5e-54dba4819a51.png)
    no-repeat center;
  background-size: cover;
  z-index: 36;
  border-radius: 2px;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .polygon-17 {
    width: 5vw; /* Slightly larger for better visibility */
    height: 5vw;
    left: 85%; /* Adjusts positioning */
    margin: 5px 0 0 5px;
  }
}

@media (max-width: 480px) {
  .polygon-17 {
    width: 8vw;
    height: 8vw;
    left: 60%;
  }
}

.line-18 {
  position: absolute;
  width: 1024px;
  height: 1px;
  top: 40px;
  left: 0;
  background: url(./assets/images/cf9b08a5-f217-4bdf-b073-572476b7f1c9.png)
    no-repeat center;
  background-size: cover;
  z-index: 41;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .line-18 {
      width: 90%; /* 🔹 ปรับให้เล็กลงใน Tablet */
      max-width: 800px;
      top: 35px; /* 🔹 ปรับตำแหน่งเล็กน้อย */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .line-18 {
      width: 80%; /* 🔹 ลดขนาดให้พอดีกับจอมือถือ */
      max-width: 600px;
      top: 30px; /* 🔹 ลดระยะห่างจากด้านบน */
      position: relative; /* 🔹 ป้องกันการซ้อนทับ */
  }
}



.line-19 {
  position: relative;
  width: 1230px;
  height: 1px;
  margin: 44px 0 0 109px;
  background: url(./assets/images/56161024-34d2-4f0a-8921-443a0241e92f.png)
    no-repeat center;
  background-size: cover;
  z-index: 17;
}
.rectangle-1a {
  position: relative;
  width: 1440px;
  height: 292px;
  margin: 40px 0 0 -1px;
  background: #162647;
  z-index: 20;
}
.research-and-service {
  position: absolute;
  width: 414px;
  height: 169px;
  top: 52px;
  left: 536px;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  z-index: 19;
}
.research-and-service-1b {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 48px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.research-and-service-1c {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.education-and-courses {
  position: absolute;
  width: 288px;
  height: 203px;
  top: 52px;
  left: 107px;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
  z-index: 18;
}
.education {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: left;
  margin-bottom: 50px;
  
}
.education-and-courses-1d {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.maps-and-wifi {
  position: absolute;
  width: 269px;
  height: 171px;
  top: 52px;
  left: 1068px;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
  z-index: 20;
}
.others {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 48px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.maps-and-wifi-1e {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.student-pride {
  position: absolute;
  width: 1440px;
  height: 908px;
  top: 188px;
  left: 0;
  background: url(./assets/images/05338902-be6c-4d51-a0b5-94a7b5f8887c.png)
    no-repeat center;
  background-size: cover;
  z-index: 6;
}
.rectangle-1f {
  position: absolute;
  width: 1440px;
  height: 636px;
  top: 987px;
  left: -1px;
  background: url(./assets/images/56c188b2-3795-4e5c-875b-1d6b5705f955.png)
    no-repeat center;
  background-size: cover;
  z-index: 26;
}