/*--------------------------------------------------------------
# cover
--------------------------------------------------------------*/
#hero2 {
  width: 100%;
  height: 100vh;
  background: url(https://static.kmedia.com.tw/prd/2025/0716/0A292595ED5835F7DED1A5659624A0C6/efc6cf11834282dd108c4b961282cfb5.webp);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-attachment: fixed;
}
#hero2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#hero2 .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
}
#hero2 h1{
  font-size: 60px;
  font-weight: 800;
  position: absolute;
  z-index: 2;
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow: 4px 2px 4px #292929;
  margin: -120px 0 0 180px;
}
#hero2 h2{
  position: absolute;
  z-index: 2;
  line-height: 1.4;
  text-transform: uppercase;
  background-color: #1a1a1a;
  padding: 4px 16px;
  margin: 120px 0 0 180px;
}

@media (max-width: 767.98px) {
  #hero2 {
    margin-top: 56px;
    height: 66.66vw;
    background-position: center 20%;
    background-attachment: scroll;
    
  }
  #hero2 h1 {
    margin: -40px 0 0 140px;
    font-size: 32px;
  }
  #hero2 h2{
    margin: 100px 0 0 142px;
    font-size: 18px;
    padding: 4px 8px;
  }
} 
section .row{
  justify-content: center;
}
.section-intro p {
  font-size: 1.125rem;
  margin-bottom: 1.75rem;
}
.highlight{
  color: var(--primary);
  font-weight: 600;
}
.highlight-2{
  display: flex;
  width: fit-content;
  color: #FFFFFF;
  font-weight: 400;
  background-color: var(--primary);
  padding: 0px 8px;
  margin-bottom: 8px;
}
/* 影片 */

.video-container-32 {
  position: relative;
  padding-bottom: 130%;;
  height: 0;
  overflow: hidden;
}
.video-container-169 {
  position: relative;
  padding-bottom: 56.25%;;
  height: 0;
  overflow: hidden;
}
.video-container-32 iframe, .video-container-169 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.swiper{
  margin: 20px 20px 0 20px;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-button-next:not(.swiper-button-disabled),
.swiper-button-prev:not(.swiper-button-disabled) {
  color: #ffffff; 
}
.swiper-pagination {
  position: relative;
  bottom: auto; 
  margin-top: 16px; 
  text-align: center;
  padding: 0;
}
.swiper-pagination-bullet {
  background: var(--gray-800); 
}

/* 被選中的分頁圓點 */
.swiper-pagination-bullet-active {
  background: var(--primary); 
  opacity: 1; 
}
@media (max-width: 767.98px){
  .highlight-2 {
    font-size: 1rem;
  }
}
/* 相關報導 */
#related-news{
  background-color: #F1F1F1;
}
#related-news .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul.timeline {
  position: relative;
  list-style: none;
  padding-left: 0;
  margin-left: 1.5rem;
  border-left: 2px solid var(--gray-400);
}

li.timeline-item {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

li.timeline-item::before {
  content: '';
  position: absolute;
  top: 20px; 
  left: -7px;
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 50%;
}

.media-item{
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  padding: 12px 20px;
  background-color: #fffffff3;
}
.media-item h3{
  margin-bottom: 8px;
  color: var(--primary);
}
.news-container {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease, scale 0.3s ease;
  margin: 12px 0px;
  border-radius: 4px;
}

.news-container:hover {
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  scale: 0.98;
}

.news-container img {
  width: 280px; 
  aspect-ratio: 3 / 2;
  object-fit: cover;
  flex-shrink: 0;
}

.content-container {
  padding: 12px;
  flex: 1;
}

.content-container p {
  color: var(--gray-800);
  font-size: 0.875rem;
  margin: 0;
}

@media (max-width: 767.98px){
  ul.timeline{
    margin-left: 0.5rem;
  }
  a.media-item{
    height: auto;
  }
  .media-item{
    flex-direction: column;
    padding: 8px 12px;
  }
  .content-container{
    padding: 8px 12px;
  }
  .content-container h4{
    font-size: 1rem;
  }
  .news-container{
    flex-direction: column;
  }
  .news-container img{
    width: 100%;
  }
  
}

.separator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.separator::before {
  content: '\2022 \2022 \2022'; 
  font-size: 24px;
  letter-spacing: 10px; 
}
.post-share {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 20px 0 12px 0;
  flex-wrap: wrap;
}
.share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  border: 1px solid #333;
}
.share-btn:hover { opacity: 0.8;}
.share-btn i { font-size: 24px;}
.facebook-btn i{ color: #0866FF;}
.line-btn i{  color: #06C755;}
.thread-btn i, .copy-btn i{  color: #333;}

@keyframes popup {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.animate {
  animation: popup 0.3s ease;
}
@media (max-width: 768px){
  .post-share {
    gap: 8px;
    margin: 12px 0 0 0;
  }
  .share-btn {
    gap: 4px;
    font-size: 14px;
    padding: 4px 6px;
  }
}