@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@700&display=swap";
html {
  font-size: 15px;
}
@media (min-width: 992px) {
  html {
    font-size: 16px;
  }
}

/* Chrome / Safari / Edge */
::-webkit-scrollbar {
    display: none;
}

body {
  color: #000430;
  font-family: "Noto Sans TC", 微軟正黑體, "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

a {
  color: #00b1de;
}
a:hover {
  color: #00b1de;
}

ul li,
ol li {
  margin-bottom: 0.5rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem;
  line-height: 1.3;
}

h1,
.h1 {
  font-size: 2.25rem;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 2.5rem;
  }
}

h2,
.h2 {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}

h3,
.h3 {
  font-size: 1.575rem;
}
@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: 1.75rem;
  }
}

h4,
.h4 {
  font-size: 1.35rem;
}
@media (min-width: 768px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}

h5,
.h5 {
  font-size: 1.125rem;
}
@media (min-width: 768px) {
  h5,
  .h5 {
    font-size: 1.25rem;
  }
}

h6,
.h6 {
  font-size: 0.9rem;
}
@media (min-width: 768px) {
  h6,
  .h6 {
    font-size: 1rem;
  }
}

.bg-primary {
  background-color: #00b1de !important;
}

.bg-secondary {
  background-color: #91c531 !important;
}

.bg-success {
  background-color: #00a476 !important;
}

.bg-dark {
  background-color: #000430 !important;
}

.text-primary {
  color: #00b1de !important;
}

.text-dark {
  color: #000430 !important;
}

.shadow-sm {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.16) !important;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.16) !important;
}

.image-cover {
  width: 100%;
  height: 100%;
  position: relative;
}
.image-cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.container-fluid,
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0.3125rem;
}

.accordion-button:not(.collapsed) {
  color: #000430;
  background-color: rgba(145, 197, 49, 0.4);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("../images/icon_arrow_down.svg");
}

.badge {
  font-weight: 500;
}

.btn {
  border-width: 2px;
  border-radius: 0.3125rem;
}
.btn:hover {
  text-decoration: none;
}

.btn-outline-light:hover {
  color: #000430;
}

.btn-primary {
  background-color: #00b1de;
  border-color: #00b1de;
}
.btn-primary.btn:active, .btn-primary:hover, .btn-primary:focus-visible {
  background-color: #00b1de;
  border-color: #00b1de;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-success {
  background-color: #91c531;
  border-color: #91c531;
}
.btn-success.btn:active, .btn-success:hover, .btn-success:focus-visible {
  background-color: #91c531;
  border-color: #91c531;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.card {
  border: 0;
  background-color: transparent;
}
.card .badge {
  top: 0.75rem;
  left: 0.75rem;
  position: absolute;
  z-index: 1;
  border-radius: 0.3125rem;
}
@media (min-width: 768px) {
  .card .badge {
    top: 1rem;
    left: 1rem;
    position: absolute;
    padding: 0.75rem 1.375rem;
    font-size: 1rem;
  }
}
.card .card-image {
  position: relative;
  padding-bottom: 56.21%;
  border-radius: 0.625rem;
}
.card .card-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0.625rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.card .card-title {
  font-size: 1.125rem;
}
.card .card-body {
  padding-left: 0;
  padding-right: 0;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(0, 177, 222, 0.5);
  -webkit-box-shadow: 0 0 0 0.25rem rgba(0, 177, 222, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(0, 177, 222, 0.25);
}

.form-check .form-check-input {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.form-check .form-check-label {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.form-check .help-block {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.form-check-input {
  position: relative;
  top: 1px;
}

.form-check-input:checked {
  background-color: #00b1de;
  border-color: #00b1de;
}

.form-check-input:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(0, 177, 222, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(0, 177, 222, 0.25);
}

.help-block {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  font-style: normal;
  color: #dc3545;
}

#hiddenRecaptcha-error {
  width: 304px;
}

.thumbnail {
  width: 104px;
  height: 104px;
  display: inline-block;
  border: 1px solid #ced4da;
  border-radius: 0.3125rem !important;
  background-position: 50% 50%;
  background-size: cover;
  vertical-align: middle;
}

table th,
table td {
  padding: 0 0.5rem;
  vertical-align: top;
}

.table-primary {
  border-spacing: 0.3125rem;
  border-collapse: separate;
}
.table-primary th,
.table-primary td {
  padding: 1rem;
  border: 0;
  border-radius: 0.3125rem;
  font-weight: 500;
  text-align: center;
}
.table-primary th {
  background-color: #d8eac5;
}
.table-primary td {
  background-color: #b1e6ee;
}

@media (min-width: 768px) {
  .table-h4 {
    font-size: 1.5rem;
  }
}

.nav {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.nav .nav-link {
  color: #6c757d;
  background-color: transparent;
  border: 1px solid #e9ecef;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.75rem 1.5rem;
  margin: 0 0.25rem 0 0;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  margin-bottom: -1px;
}
@media (max-width: 767.98px) {
  .nav .nav-link {
    padding: 0.6rem 1.2rem;
    margin: 0 0.15rem 0 0;
    font-size: 0.9rem;
  }
}
.nav .nav-link:hover {
  background-color: #f8f9fa;
  color: #000430;
  border-color: #dee2e6;
  text-decoration: none;
}
.nav .nav-link.active {
  background-color: #91c531;
  color: #FFF;
  border-color: #91c531;
  border-bottom-color: #91c531;
  font-weight: 600;
  z-index: 1;
}

.home-wrap .main-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media screen and (max-width: 575.98px) {
  .home-wrap .main-nav {
    position: sticky;
  }
}
@media screen and (min-width: 576px) {
  .home-wrap .main-nav .navbar:not(.sticky) {
    background-color: transparent;
  }
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000430;
}
.navbar .dropdown .dropdown-toggle {
  border: unset;
}
.navbar .dropdown .dropdown-toggle::after {
  content: unset;
}
.navbar .dropdown .dropdown-menu {
  margin: 0;
  border-radius: unset;
}
.navbar .dropdown .dropdown-menu[data-bs-popper] {
  left: unset;
  right: 0;
}
.navbar .dropdown .dropdown-menu .dropdown-item {
  color: #000430;
}
.navbar .dropdown .dropdown-menu .dropdown-item:active, .navbar .dropdown .dropdown-menu .dropdown-item:active {
  background-color: #91c531;
  color: #FFF;
}

.navbar-brand img {
  height: 50px;
}
@media (min-width: 768px) {
  .navbar-brand img {
    height: 70px;
  }
}

.navbar-nav .nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 992px) {
  .navbar-nav .nav-item {
    margin-left: 1rem;
  }
}

.top-bar {
  height: 80px; /* 可依需求調整高度 */
}

/* 桌面與手機 sponsor icons */
.sponsor-icons img {
  height: 60px;       /* 跟父容器高度一致 */
  object-fit: contain; /* 保持圖片比例 */
}

.navbar-nav .nav-link {
  color: #fff !important;
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: 3rem;
  text-align: center;
}
@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }
}
.section-title::after {
  display: block;
  content: "";
  margin: 0 auto;
  margin-top: 1rem;
  width: 120px;
  height: 3px;
  background-color: #91c531;
  border-radius: 3px;
}
.section-title.white {
  color: #fff;
}
.section-title.white::after {
  background-color: #fff;
}
.section-title.dark {
  color: #000430;
}
.section-title.dark::after {
  background-color: #000430;
}
.section-title.left {
  text-align: left;
}
.section-title.left::after {
  margin-left: 0;
}
.section-title .title-link {
  margin: 0 0.625rem;
  color: #000430;
  text-decoration: none;
  font-size: 1.875rem;
}
.section-title .title-link.active {
  color: #00b1de;
}

.section {
  padding: 2.5rem 0;
  background: center center/cover no-repeat;
}


@media (min-width: 768px) {
  .section {
    padding: 4.375rem 0;
  }
}

.article {
  padding: 2rem 0 6rem;
  background: url("../img/event/bg.png") center top/100% auto no-repeat fixed;
}
@media (min-width: 768px) {
  .article {
    min-height: calc(100vh - 19.34rem);
    padding: 3.75rem 0 6rem;
  }
}

.page-logo {
  margin: 0 auto;
  margin-bottom: 2rem;
  text-align: center;
}
.page-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.page-title {
  margin-bottom: 2rem;
}
.page-title::after {
  margin-top: 2rem;
}

.page-subtitle {
  margin-bottom: 3rem;
  text-align: center;
}

.page-section {
  margin: 0 auto 3rem;
}
.page-section:last-child {
  margin-bottom: 0;
}

br.br-page-title {
  display: none;
}
@media screen and (max-width: 1794px) and (min-width: 992px) {
  br.br-page-title {
    display: block;
  }
}
@media screen and (max-width: 576px) {
  br.br-page-title {
    display: block;
  }
}
br.br-inter {
  display: none;
}
@media screen and (max-width: 1648px) and (min-width: 992px) {
  br.br-inter {
    display: block;
  }
}
@media screen and (max-width: 576px) and (min-width: 390px) {
  br.br-inter {
    display: block;
  }
}

.footer {
  padding: 4.375rem 0;
  color: #fff;
  background-color: #000430;
}

.footer-logo {
  height: 52px;
}

.social-link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 1rem;
  border-top: 1px solid #fff;
}
.social-link img {
  width: 36px;
}

/* login */
.login-sns .btn-fb-login {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}
.login-sns .btn-fb-login:hover span {
  background-color: #000430;
  color: #FFF;
}
.login-sns .btn-fb-login:hover span:before {
  border: 1px solid #FFF;
}
.login-sns .btn-fb-login img {
  margin: 0 0.5rem;
}
.login-sns .btn-fb-login span {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0.375rem;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.25rem;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.login-sns .btn-fb-login span:before {
  top: 0.3rem;
  left: 0.375rem;
  position: absolute;
  width: calc(100% - 0.7rem);
  height: calc(100% - 0.6rem);
  content: "";
  border: 1px solid #000;
}

.login-account a {
  color: #000430;
}
.login-account a:hover {
  color: #00b1de;
}

.login-hr {
  margin: 2rem 0;
}

#banner {
  position: relative;
  padding-bottom: 100%;
}
@media (min-width: 768px) {
  #banner {
    padding-bottom: 0;
  }
}
#banner img {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 768px) {
  #banner img {
    position: relative;
  }
}

#tournaments {
  background-color: #000430;
}

#news {
  background-color: #f5f5f7;
}

.hero-section {
  padding-top: 120px;
  overflow-x: hidden;
}

/* 手機版 (sm 以下) 移除 padding-top */
@media (max-width: 767.98px) {
  .hero-section {
    padding-top: 0;
  }
}

.hero-section .hero-slick {
  margin-bottom: 0 !important;
}
.hero-section .hero-slick .hero-item {
  display: block;
  width: 100%;
  padding-bottom: 35%; /* 調整為適中的高度，從 40% 降回 35% */
  position: relative;
  overflow: hidden;
}
.hero-section .hero-slick .hero-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
.hero-section .hero-slick .slick-dots {
  bottom: 1.875rem;
}

.rankings-slick-wrap {
  width: 100%;
  overflow: hidden;
  margin-top: 2.5rem;
}
.rankings-slick-wrap .btn-wrap {
  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;
  gap: 1.25rem;
}
.rankings-slick-wrap .btn-wrap .btn {
  padding: 0.625rem;
}
.rankings-slick-wrap .btn-wrap .btn img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.rankings-slick-wrap .rankings-slick .slick-slide:not(.slick-center) .lightbox-item {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-transform-origin: center;
          transform-origin: center;
  margin: 0 0.25rem;
}
.rankings-slick-wrap .rankings-slick .lightbox-item {
  display: block;
  border: 1px solid #6c757d;
  margin: 0 0.875rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.rankings-slick-wrap .rankings-slick .lightbox-item .image-wrap {
  width: 100%;
  padding-bottom: 177.78%;
  position: relative;
}
.rankings-slick-wrap .rankings-slick .lightbox-item .image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.lightbox {
  overflow: hidden;
  width: 100%;
}
.lightbox .lb-number {
  display: none !important;
}
.lightbox .lb-nav {
  display: none !important;
  pointer-events: none !important;
}

.event-venue {
  margin: 5rem 0;
}
.event-venue .image {
  width: 100%;
  border-radius: 0.625rem;
}
.event-venue .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.event-venue .address {
  margin: 2rem 0;
  font-size: 1.25rem;
}
.event-venue .btn {
  margin-top: 0.5rem;
}

.event-wrap {
  overflow-x: hidden;
  /* 表格樣式 */
  /* 調整欄位寬度 */
}
.event-wrap .custom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}
.event-wrap .custom-table th, .event-wrap .custom-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}
.event-wrap .custom-table th {
  background-color: #e7f1fd; /* 從 table-primary 提取的淺藍色背景 */
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}
.event-wrap .custom-table td {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  /* 日期欄位 */
}
.event-wrap .custom-table td.date-col {
  border-left: 4px solid transparent; /* 預設透明邊框 */
  font-weight: bold;
  width: 120px;
}
.event-wrap .custom-table {
  /* Mouse over 效果 */
  /* 滑鼠滑過時顯示邊條 */
}
.event-wrap .custom-table .tournament-col {
  width: 80%; /* 移除其他欄位後調整寬度 */
}
.event-wrap .custom-table tbody tr {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; /* 平滑過渡效果 */
  cursor: pointer; /* 滑鼠懸停時顯示手型指標 */
}
.event-wrap .custom-table tbody tr:hover {
  background-color: #f1f8ff; /* 淺藍色背景，與 table-primary 風格一致 */
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 浮凸效果 */
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px); /* 輕微上移，增強浮凸感 */
}
.event-wrap .custom-table tbody tr:hover td.date-col {
  border-left: 4px solid #91c531; /* 滑鼠滑過時顯示淺綠色邊條 */
}
.event-wrap .custom-table .center-logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px; /* 圖片之間的間距，可自行調整 */
}
.event-wrap .custom-table .center-logos .col {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* 讓欄寬根據內容自動調整 */
}

.about-wrap {
  /* 統一 h5, h6, li 和 p 的字型大小 */
  /* 保留標題的粗體效果 */
  /* 確保嵌套列表的縮進一致 */
  /* 特定段落的樣式 */
  /* 移除 accordion-item 之間的水平線效果 */
}
.about-wrap h5, .about-wrap h6, .about-wrap li, .about-wrap p {
  font-size: 1rem;
}
.about-wrap h5, .about-wrap h6 {
  font-weight: 500;
}
.about-wrap ul ul {
  margin-left: 20px;
}
.about-wrap .mission-statement {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 20px 0;
}
.about-wrap .mission-statement .point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 30px;
}
.about-wrap .mission-statement .icon {
  font-size: 36px;
  color: #1e90ff;
  margin-right: 10px;
  width: 40px;
  text-align: center;
}
.about-wrap .mission-statement .vertical-line {
  width: 2px;
  background-color: #1e90ff;
  height: 80px;
  margin-right: 20px;
}
.about-wrap .mission-statement .content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.about-wrap .mission-statement .content p {
  font-size: 1rem; /* 與其他文字一致 */
  line-height: 1.8;
  margin: 0;
  text-transform: uppercase;
}
.about-wrap .mission-statement .content p.first {
  color: #2a6e3b; /* 第一段綠色 */
}
.about-wrap .mission-statement .content p.second {
  color: #333; /* 第二段黑色 */
}
.about-wrap .mission-statement .highlight {
  color: #1e90ff; /* 藍色高亮 */
  font-weight: bold;
}
.about-wrap .accordion-flush .accordion-item {
  background-color: transparent;
  border-bottom: none;
  /* 加大主要區塊之間的間距 */
}
.about-wrap .accordion-flush .accordion-item + .accordion-item {
  margin-top: 2rem;
}

.membership-wrap {
  /* 統一 h5, h6 和 li 的字型大小 */
  /* 保留標題的粗體效果 */
  /* 確保嵌套列表的縮進一致 */
}
.membership-wrap h5, .membership-wrap h6, .membership-wrap li {
  font-size: 1rem; /* 你可以根據需求調整這個值 */
}
.membership-wrap h5, .membership-wrap h6 {
  font-weight: 500;
}
.membership-wrap ul ul {
  margin-left: 1.25rem;
}
/*# sourceMappingURL=style.css.map */

.list-section {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

@media screen and (max-width: 991.98px) {
  .list-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.slide-list:has(.four-item-slick) {
  width: calc(100% + 1.25rem);
  margin-left: -0.625rem;
}

.slide-list:has(.five-item-slick) {
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
}

.slick-slider.four-item-slick .slick-list .slick-track {
  margin-left: 0;
}

.slick-slider.four-item-slick .horizontal-item {
  margin: 0 0.625rem;
}


@media screen and (max-width: 991.98px) {
  .slick-slider.four-item-slick .horizontal-item {
    width: 31.25vw;
  }
}

@media screen and (max-width: 575.98px) {
  .slick-slider.four-item-slick .horizontal-item {
    width: 66.6666666667vw;
  }
}

.slick-slider.five-item-slick .slick-list .slick-track {
  margin-left: 0;
}

.slick-slider.five-item-slick .vertical-item {
  margin: 0 0.5rem;
}

@media screen and (max-width: 991.98px) {
  .slick-slider.five-item-slick .vertical-item {
    width: 22.2222222222vw;
  }
}

@media screen and (max-width: 575.98px) {
  .slick-slider.five-item-slick .vertical-item {
    width: 35.7142857143vw;
  }
}


.horizontal-item .image-wrap {
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
}

.horizontal-item .image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.horizontal-item .item-title {
  margin: 0;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.38;
  color: #161719;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.more-link {
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: #0059AA;
  word-break: keep-all;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.more-link2 {
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: #b8d5ef;
  word-break: keep-all;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.more-link:hover,
.more-link:active {
  opacity: 0.8;
}

.more-link:hover img,
.more-link:active img {
  -webkit-transform: translateX(0.25rem);
  transform: translateX(0.25rem);
}

.more-link img {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}


.event-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 32px;
  border: 1px solid #D4D4D4;
  border-radius: 5px !important;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
}

.event-thumbnail {
  width: 80px;
  height: 60px;
  border: 1px solid #D4D4D4;
  border-radius: 5px !important;
  background-position: 50% 50%;
  background-size: cover;
}

.event-title {
  display: inline-block;
  color: #6c98f0;
  font-size: 17px;
  font-weight: bold;
}

.event-sub-title {
  color: #d8dde5;
  font-size: 14px;
}

.news-sub-title {
  display: inline-block;
  color: #3571eb;
  font-size: 18px;
  font-weight: 500;
}

.news-title {
  color: #6c86bb;
  font-size: 18px;
  font-weight: 500;
}



a.no-underline {
  text-decoration: none;
}

/* SPONSORS 輪播樣式 */
.sponsors-carousel-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 40px;
}

.sponsors-carousel {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.sponsor-item {
  /*flex: 0 0 25%;  預設顯示4個 */
  flex: 0 0 16.6667%; /* 100% ÷ 6 = 16.6667% */
  padding: 0 10px;
  box-sizing: border-box;
}

/* 大螢幕 1200px 以上，6 個 */
@media (max-width: 1199px) {
  .sponsor-item {
    flex: 0 0 25%; /* 4 個 */
  }
}

/* 平板 992px ~ 1199px，3 個 */
@media (max-width: 991px) {
  .sponsor-item {
    flex: 0 0 33.3333%; /* 3 個 */
  }
}

/* 手機 768px ~ 991px，2 個 */
@media (max-width: 767px) {
  .sponsor-item {
    flex: 0 0 50%; /* 2 個 */
  }
}

/* 超小螢幕 < 768px，1 個 */
@media (max-width: 575px) {
  .sponsor-item {
    flex: 0 0 100%; /* 1 個 */
  }
}

.sponsor-item .card {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.sponsor-item .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.sponsor-item .card-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
}

.sponsor-item .card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.sponsor-item .card:hover .card-image img {
  transform: scale(1.05);
}

.sponsor-item .card-body {
  padding: 15px;
  text-align: center;
}

.sponsor-item .card-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
  line-height: 1.4;
}

/* 輪播控制按鈕 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  color: #666;
  font-size: 16px;
}

.carousel-btn:hover:not(:disabled) {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
  color: #ccc;
}

.carousel-btn-prev {
  left: -20px;
}

.carousel-btn-next {
  right: -20px;
}

/* 輪播指示器 */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background: #007bff;
  transform: scale(1.2);
}

.indicator-dot:hover {
  background: #007bff;
  opacity: 0.8;
}

/* 響應式設計 */
@media (max-width: 1199px) {
  .sponsor-item {
    flex: 0 0 33.333%; /* 3個 */
  }
}

@media (max-width: 991px) {
  .sponsor-item {
    flex: 0 0 50%; /* 2個 */
  }

  .sponsors-carousel-wrapper {
    margin: 0 35px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .sponsor-item {
    flex: 0 0 100%; /* 1個 */
  }

  .sponsors-carousel-wrapper {
    margin: 0 30px;
  }

  .carousel-btn {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }

  .carousel-btn-prev {
    left: -15px;
  }

  .carousel-btn-next {
    right: -15px;
  }
}

/* 平滑滾動效果 */
@media (prefers-reduced-motion: no-preference) {
  .sponsors-carousel {
    scroll-behavior: smooth;
  }
}

.block__image {
  display: block;
  max-width: 100%;   /* 不超出容器寬度 */
  max-height: 80vh;  /* 不超出螢幕高度 */
  width: 80%; /* 使圖片寬度自適應 */
  height: 80%;
  margin: 10px 0px;
}

/* Stories Grid Layout (舊版本，保留向下相容) */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stories 雙欄佈局 (新版本) */
.stories-layout {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  min-height: 500px;
}

@media (max-width: 991px) {
  .stories-layout {
    flex-direction: column;
    gap: 20px;
  }
}

/* 左側影片列表 */
.stories-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  max-height: 600px;
  overflow-y: auto;
}

@media (max-width: 991px) {
  .stories-sidebar {
    width: 100%;
    max-height: 400px;
    order: 2;
  }
}

.story-list-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 2px solid transparent;
}

.story-list-item:hover {
  background-color: #e9ecef;
}

.story-list-item.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}

.story-list-item.active .story-list-title {
  color: white;
}

.story-list-item.active .story-list-date {
  color: #e3f2fd;
}

.story-thumb {
  position: relative;
  width: 80px;
  height: 45px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.story-list-item:hover .play-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.story-info {
  flex: 1;
  min-width: 0;
}

.story-list-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.story-list-date {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* 右側主播放區 */
.stories-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991px) {
  .stories-main {
    order: 1;
  }
}

.main-video-container {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.main-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}

.main-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-video-info {
  padding: 20px;
  background: white;
}

.main-video-info h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #333;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .main-video-info h3 {
    font-size: 20px;
  }
}

.main-video-date {
  font-size: 14px;
  color: #666;
  margin: 0;
  font-weight: 500;
}

.no-videos {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
}

/* 自定義滾動條樣式 */
.stories-sidebar::-webkit-scrollbar {
  width: 6px;
}

.stories-sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.stories-sidebar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.stories-sidebar::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 首頁 Stories 雙欄佈局 */
.home-stories-layout {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  min-height: 400px;
}

@media (max-width: 991px) {
  .home-stories-layout {
    flex-direction: column;
    gap: 20px;
  }

  /* 手機版隱藏右側播放區，只顯示影片列表 */
  .home-stories-main {
    display: none !important;
  }
}

/* 首頁左側影片列表 */
.home-stories-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 15px;
  height: 500px; /* 固定高度與右側一致 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

/* 左側影片列表內容區域自動分配空間 */
.home-stories-sidebar > div:not(.text-center) {
  flex: 1;
  overflow-y: auto;
}

/* More按鈕容器固定在底部 */
.home-stories-sidebar .text-center {
  flex-shrink: 0;
  margin-top: auto;
}

@media (max-width: 991px) {
  .home-stories-sidebar {
    width: 100%;
    height: auto; /* 手機版自動高度 */
    max-height: none; /* 移除高度限制 */
    order: 2;
  }

  /* 手機版影片項目樣式調整 */
  .home-story-list-item {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .home-story-thumb {
    width: 120px;
    height: 68px;
    flex-shrink: 0;
  }

  .home-story-list-title {
    font-size: 16px;
    line-height: 1.4;
  }
}

.home-story-list-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  background: white;
}

.home-story-list-item:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
}

.home-story-list-item.active {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border-color: #004085;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.home-story-list-item.active .home-story-list-title {
  color: white;
}

.home-story-thumb {
  position: relative;
  width: 80px;
  height: 45px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.home-story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-story-thumb a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none; /* 讓點擊穿透到父層 */
}

.home-story-list-item:hover .home-play-overlay {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

.home-story-info {
  flex: 1;
  min-width: 0;
}

.home-story-list-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 首頁右側主播放區 */
.home-stories-main {
  flex: 1;
  min-width: 0;
  height: 500px; /* 固定高度與左側一致 */
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .home-stories-main {
    order: 1;
    height: 350px; /* 手機版與左側相同高度 */
  }
}

.home-main-video-container {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  height: 100%; /* 填滿父容器 */
  display: flex;
  flex-direction: column;
}

.home-main-video-wrapper {
  position: relative;
  width: 100%;
  flex: 1; /* 佔用主要空間 */
  background: #000;
  min-height: 0; /* 確保可以縮小 */
}

.home-main-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-main-video-info {
  padding: 20px;
  background: white;
}

.home-main-video-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #333;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .home-main-video-info h3 {
    font-size: 18px;
  }
}

/* 首頁滾動條樣式 */
.home-stories-sidebar::-webkit-scrollbar {
  width: 6px;
}

.home-stories-sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.home-stories-sidebar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.home-stories-sidebar::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 首頁 Stories More 按鈕樣式 */
.home-stories-more-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #007bff;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: white;
}

.home-stories-more-link:hover {
  background: #007bff;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.home-stories-more-link img {
  transition: transform 0.3s ease;
}

.home-stories-more-link:hover img {
  transform: translateX(3px);
  filter: brightness(0) invert(1); /* 將圖片變成白色 */
}

/* YouTube Modal 播放器樣式 */
.youtube-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.youtube-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.8); /* 半透明淺灰 */
  backdrop-filter: blur(8px);
}

.youtube-modal-content {
  position: relative;
  width: 95%;
  max-width: 800px;
  max-height: 90%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.3s ease-out;
  margin: auto; /* 確保垂直置中 */
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.youtube-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.youtube-modal-close:hover {
  background: rgba(255, 0, 0, 0.8);
}

.youtube-modal-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}

.youtube-modal-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.youtube-modal-info {
  padding: 20px;
  background: white;
}

.youtube-modal-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}

/* 手機版 Modal 調整 */
@media (max-width: 767px) {
  .youtube-modal {
    padding: 15px;
  }

  .youtube-modal-content {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0 auto;
    align-self: center; /* 強化垂直置中 */
  }

  .youtube-modal-info {
    padding: 15px;
  }

  .youtube-modal-info h3 {
    font-size: 16px;
  }

  .youtube-modal-close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
  }

  /* 手機版背景稍微更透明 */
  .youtube-modal-overlay {
    background: rgba(128, 128, 128, 0.85);
  }
}

/* 首頁 STORIES 滾動背景樣式 */
.stories-fixed-bg {
  background: url("../img/index/story_bg.png") center center/cover no-repeat scroll;
  position: relative;
  min-height: 80vh; /* 較適合的最小高度 */
}

/* 手機版背景設定 */
@media (max-width: 767px) {
  .stories-fixed-bg {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    min-height: 60vh;
  }
}

/* 首頁 Tournaments 表格樣式 */
#events table tr {
  cursor: pointer;
  transition: all 0.3s ease;
}

#events table tr:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#events table tr:hover .event-title {
  color: #91c531;
  font-weight: 600;
}

#events table tr:hover .event-thumbnail {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-thumbnail {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.event-title {
  transition: all 0.3s ease;
}

/* NCAA & The Agency College Recruit 並排佈局樣式 */
.agency-recruit-bg {
  background: linear-gradient(135deg, #91c531, #7ba82a);
}

#agency .image-cover {
  position: relative;
  overflow: hidden;
  height: 100%;
}

#agency .image-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 確保高度一致 */
#agency .h-100 {
  height: 100% !important;
}

#agency .object-fit-cover {
  object-fit: cover;
}

/* 最小高度設定 */
#agency .row.g-0 > .col-md-6 > .row.g-0 {
  min-height: 400px;
}

/* SPONSORS 跑馬燈樣式 */
.sponsors-marquee-wrapper {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  margin-bottom: 30px;
}

.sponsors-marquee {
  display: flex;
  width: 200%; /* 精確兩倍寬度，不超出容器 */
  animation: marqueeScroll 40s linear infinite;
  position: relative;
}

.sponsors-marquee-track {
  display: flex;
  align-items: center;
  min-width: 50%;
  gap: 30px;
  padding-right: 30px;
}

.sponsor-marquee-item {
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 8px 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  min-width: 100px;
}

.sponsor-marquee-item:hover {
  transform: scale(1.1);
}

.sponsor-marquee-item img {
  max-height: 35px;
  max-width: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(50%) opacity(0.7);
  transition: all 0.3s ease;
}

.sponsor-marquee-item:hover img {
  filter: grayscale(0%) opacity(1);
}

.sponsor-marquee-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 跑馬燈動畫 */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 暫停動畫在懸停時 */
.sponsors-marquee-wrapper:hover .sponsors-marquee {
  animation-play-state: paused;
}

/* 響應式調整 */
@media (max-width: 767px) {
  .sponsors-marquee-wrapper {
    padding: 15px 0;
    margin-bottom: 20px;
  }

  .sponsor-marquee-item {
    height: 40px;
    min-width: 80px;
    padding: 5px 8px;
  }

  .sponsor-marquee-item img {
    max-height: 28px;
    max-width: 80px;
  }

  .sponsors-marquee-track {
    gap: 20px;
    padding-right: 20px;
  }

  .sponsors-marquee {
    animation-duration: 25s; /* 手機版稍快 */
  }
}

/* Footer 上方 Sponsors 區塊樣式 */
.footer-sponsors-section {
  background: transparent;
  padding: 50px 0;
  margin-top: 30px;
}

.footer-sponsors-wrapper {
  text-align: center;
}

/* 標題使用標準 .section-title 樣式 */

/* Footer Sponsors 跑馬燈樣式 */
.footer-sponsors-marquee-wrapper {
  overflow: hidden;
  position: relative;
  padding: 40px 0;
  margin-bottom: 30px;
}

.footer-sponsors-marquee {
  display: flex;
  width: 200%;
  animation: footerMarqueeScroll 50s linear infinite;
}

.footer-sponsors-marquee-track {
  display: flex;
  align-items: center;
  min-width: 50%;
  gap: 60px;
  padding-right: 60px;
}

.footer-sponsor-marquee-item {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 20px;
}

.footer-sponsor-marquee-logo {
  max-height: 60px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.footer-sponsor-marquee-item:hover .footer-sponsor-marquee-logo {
  opacity: 1;
  transform: scale(1.05);
}

.footer-sponsors-marquee-wrapper:hover .footer-sponsors-marquee {
  animation-play-state: paused;
}

/* BECOME A SPONSOR 按鈕使用標準 .more-link 樣式 */

.no-sponsors {
  color: #6c757d;
  font-style: italic;
  margin: 40px 0;
  padding: 20px;
}

/* Footer Sponsors 跑馬燈動畫 */
@keyframes footerMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Footer Sponsors 響應式設計 */
@media (max-width: 768px) {
  .footer-sponsors-section {
    padding: 40px 0;
    margin-top: 40px;
  }

  .footer-sponsors-marquee-wrapper {
    padding: 30px 0;
    margin-bottom: 20px;
  }

  .footer-sponsors-marquee-track {
    gap: 40px;
    padding-right: 40px;
  }

  .footer-sponsor-marquee-item {
    height: 60px;
    min-width: 100px;
    padding: 5px 15px;
  }

  .footer-sponsor-marquee-logo {
    max-height: 45px;
    max-width: 100px;
  }

  .footer-sponsors-marquee {
    animation-duration: 35s;
  }
}

@media (max-width: 480px) {
  .footer-sponsors-section {
    padding: 30px 0;
  }

  .footer-sponsors-marquee-wrapper {
    padding: 25px 0;
    margin-bottom: 15px;
  }

  .footer-sponsors-marquee-track {
    gap: 30px;
    padding-right: 30px;
  }

  .footer-sponsor-marquee-item {
    height: 50px;
    min-width: 80px;
    padding: 5px 10px;
  }

  .footer-sponsor-marquee-logo {
    max-height: 35px;
    max-width: 80px;
  }

  .footer-sponsors-marquee {
    animation-duration: 25s;
  }
}

/* 響應式調整 */
@media (max-width: 767px) {
  #agency .row.g-0 > .col-md-6 {
    min-height: 300px;
  }

  #agency .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #agency .p-3 {
    padding: 1rem !important;
  }

  #agency .small {
    font-size: 0.775rem !important;
  }
}

.story-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.story-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.story-link:hover {
  text-decoration: none;
  color: inherit;
}

.story-image {
  position: relative;
  width: 100%;
  padding-bottom: 60%; /* 5:3 aspect ratio */
  overflow: hidden;
}

.story-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.story-item:hover .story-image img {
  transform: scale(1.05);
}

.story-content {
  padding: 20px;
}

.story-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px 0;
  color: #333;
}

.story-date {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Home Stories Grid Layout */
.home-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

@media (min-width: 576px) {
  .home-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .home-stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .home-stories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-story-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
}

.home-story-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.home-story-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.home-story-link:hover {
  text-decoration: none;
  color: inherit;
}

.home-story-image {
  position: relative;
  width: 100%;
  padding-bottom: 60%; /* 5:3 aspect ratio */
  overflow: hidden;
}

.home-story-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-story-item:hover .home-story-image img {
  transform: scale(1.05);
}

.home-story-content {
  padding: 15px;
}

.home-story-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 首頁 Stories 區塊的背景適配 */
#stories .home-stories-grid {
  position: relative;
  z-index: 1;
}

/* 在有背景圖的情況下增強卡片的可見性 */
#stories .home-story-item {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


/* Rankings */
    .box-title {
        font-weight: bold;
        font-size: 1.2rem;
    }

    .box-wrapper {
        display: flex;
        flex-direction: column;      /* 上下排列 */
        gap: 20px;                   /* 方框與標題間距 */
        flex: 1;                     /* 左右平分空間 */
        margin-bottom: 20px;
    }

    .box-row,.box-row2 {
        display: flex;
        flex-direction: row;    /* 左右排列 */
        justify-content: center;
        font-size: 1.3rem;
        font-weight: bold;
    }

    .box-row {
        gap: 10px;              /* A、B 間距 */
    }



    .box-row,.box-row2 .name {
         /* 調整行距 */
        line-height: 1.0; /* 原本可能是 1.5~1.6，縮小到 1.2 */
    }

    .title-box {
      background: #FFFFFF;
      color: #000000;
      width: 15%;
      height: auto;
      /* 文字置中 */
      text-align: center;
      /* border-width: 2px;
      border-style: solid;
      border-color: red; */
      font-size: 2rem;
      font-weight: bold;

      /* 讓內容可以靠底 */
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* 貼底 */
      padding-bottom: 20px;
    }

    .box-row .title {
        padding-top: 30px;
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
    }

    .box-row2 .title {
        padding-top: 30px;
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
    }

    .individual-elementary {
        background: #9ECC60;
        color: #000000;
        border-radius: 8px;
        width: 30%;
        /* border-width: 2px;
        border-style: solid;
        border-color: red; */
    }

    .individual-high {
        background: #33BED5;
        color: #000000;
        border-radius: 8px;
        width: 30%;
        /* border-width: 2px;
        border-style: solid;
        border-color: red; */
    }

    .img-photo {
       /*  border: 2px solid red; */
        width: 80%;       /* 容器寬度 */
        margin: 0 auto;   /* 左右置中 */
    }
    .img-photo img {
        width: 100%;      /* 圖片跟容器同寬 */
        height: auto;
        display: block;   /* 避免 inline 空隙 */
    }

    .team-elementary {
        background: #33395B;
        color: #FFFFFF;
        border-radius: 8px;
        border-radius: 8px 0 0 8px; /* 左上、右上、右下、左下 */
        width: 30%;
    }
    .team-high {
        background: #33395B;
        color: #FFFFFF;
        border-radius: 8px;
        border-radius: 0 8px 8px 0; /* 左上、右上、右下、左下 */
        width: 30%;
    }

    /* ================================
   1. 桌機（Large ≥1200px）
   ================================ */
  @media (min-width: 1200px) {
      .box-row, .box-row2 {
          flex-direction: row;
      }

      .title-box {
          width: 15%;
          font-size: 2rem;
      }

      .individual-elementary,
      .individual-high,
      .team-elementary,
      .team-high {
          width: 30%;
          padding-bottom: 20px ;
      }
  }

  .persona-profile {
        background: #33BED5;
        color: #000000;
        border-radius: 8px;
        width: 100%;
        height: 400px;
        border-width: 2px;
        border-style: solid;
        border-color: red;
        margin-bottom: 20px;
    }


  /* ================================
    2. 平板（768px ~ 1199px）
    ================================ */
  @media (min-width: 768px) and (max-width: 1199px) {

      .box-row, .box-row2 {
          flex-direction: row;
          flex-wrap: wrap; /* 超過的換行 */
          justify-content: center;
          gap: 20px;
      }

      .title-box {
          order: -1;                /* 移到最前面 */
          width: 100%;              /* 平板標題置上 */
          text-align: center;
          padding: 15px 0;
          font-size: 1.8rem;
      }

      .individual-elementary,
      .individual-high,
      .team-elementary,
      .team-high {
          width: 45%;               /* 平板變 2 欄 */
          border-radius: 8px;
          padding-bottom: 20px ;
      }

      .img-photo {
          width: 70%;
      }

      .title {
          font-size: 1.7rem;
      }

      .name span {
          font-size: 1rem;
      }
  }


  /* ================================
    3. 手機（≤767px）
    ================================ */
  @media (max-width: 767px) {

      .box-row, .box-row2 {
          flex-direction: column;
          align-items: center;
          gap: 20px;
      }

      .title-box {
          order: -1;                /* 移到最前面 */
          width: 100%;
          padding: 10px 0;
          text-align: center;
          font-size: 1.5rem;
      }

      .individual-elementary,
      .individual-high,
      .team-elementary,
      .team-high {
          width: 100%;              /* 手機單欄 */
          border-radius: 8px;
          padding-bottom: 20px;
      }

      .img-photo {
          width: 60%;
      }

      .title {
          font-size: 1.4rem;
          padding-top: 10px;
      }

      .name span {
          font-size: 1rem;
      }
  }

      .rank-card {
        border: 3px solid #d0d0d0;
        border-radius: 20px;
        padding: 30px 25px;
        width: auto;
        background: #fff;
      }

      .rank-card .title{
        padding: auto;
        background: #000;
        font-weight: bold;
        font-size: 18px;

      }


    .individual-box {
        background-color: #a5d56d;
        width: 100%;
        border-radius: 8px;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .team-box {
        background-color: #2d3459;
        color: #FFFFFF;
        width: 100%;
        border-radius: 8px;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .leaderboard-box {
        background-color: #33BED5;
        color: #FFFFFF;
        width: 100%;
        border-radius: 8px;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .individual-box ul,
    .team-box ul {
      list-style: none;   /* 移除 li 的符號 */
      padding: 0;         /* 移除左邊縮排 */
      margin: 0;          /* 移除外距 */
    }

    .individual-box li,
    .team-box li {
      margin-bottom: 5px; /* 每個項目之間留一點間距 */
    }

    .rank-item {
        font-size: 1rem;
        margin-left: 10px;
        margin-bottom: 4px;
        text-decoration: none;
        color: inherit
    }

    .rank-section {
      margin: 0 auto 1rem;
    }

    .rank-table {
      border-collapse: collapse; /* 邊框合併，避免雙線 */
      width: 100%;
    }
    .rank-table th,
    .rank-table td {
      border: 2px solid #333; /* 設定邊框顏色 */
      padding: 8px;           /* 內距 */
      text-align: center;     /* 文字置中 */
    }

    /* button style */
    .btn-back {
      border-radius: 8px;
      border: none;
      background: #FFF; /* 你網站配色 */
      color: #000;
      font-weight: 600;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      transition: 0.2s ease;
    }
    .btn-back:hover {
      background: #1da2b5;
      color: #FFF;
    }