html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;
}

body {
  margin: 0;
  background: #fff;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;
}

/* 避免媒體/嵌入物撐破視窗造成左右滑動 */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

@font-face {
  font-family: 'LXGWWenKaiTC'; 
  src: url('fonts/LXGWWenKaiTC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'NotoSansTC'; 
  src: url('fonts/NotoSansTC-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

h1 {
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(60deg, #4D8CD1, #4FABB6);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: 'NotoSansTC';
}

h2 {
  font-size: 36px;
  color: #3f8db4;
  font-weight: 700;
}

h4 {
  color: #111;
  font-size: 24px;
}

p {
  font-size: 20px;
  color: #1c1c1c;
}

@media (max-width: 556px){
  h2 {
    font-size: 32px;
  }
}

.pr-2{
  padding-right: 10px;
}
.pr-3{
  padding-right: 15px;
}

.img-fluid {
  max-width: 60%;
  height: auto;
}


.navbar-custom {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  padding: 10px 0;
  z-index: 999;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.navbar-custom.navbar-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.navbar-scrolled {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}

.navbar-brand img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-link {
  color: #fff;
  font-weight: 600;
  font-size: 1.25rem;
  margin-left: 28px;
  transition: opacity 0.3s ease;
}

.nav-link:hover {
  opacity: 0.75;
}

.navbar-toggler {
  border: 0;
  padding: 0.25rem 0.5rem;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: none;
  width: 28px;
  height: 20px;
  position: relative;
  display: inline-block;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: 0.3s ease;
}

.navbar-toggler-icon::before {
  top: 0;
}

.navbar-toggler-icon span {
  top: 9px;
}

.navbar-toggler-icon::after {
  bottom: 0;
}

/* demo section */
section {
  min-height: 10vh;
  color: #fff;

  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

#section1 { background: #1c1c1c; }
#section2 { background: #2a2a2a; }
#section3 { background: #383838; }
#section4 { background: #464646; }
#section5 { background: #555; }
#section6 { background: #666; }
#section7 { background: #777; }

/* 手機版下拉選單 */
@media (max-width: 991.98px) {
  .navbar-custom .container {
    position: relative;
  }

  .navbar-collapse {
    position: absolute;
    top: calc(100% + 12px);
    left: 12px;
    right: 12px;
    z-index: 998;
  }

  .navbar-collapse .navbar-nav {
    margin-top: 0;
    padding: 28px 20px;
    border-radius: 24px;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 40vh;

    /* 底圖 + 遮罩 */
    background:rgb(255, 255, 255);

    backdrop-filter: blur(8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  }

  .nav-link {
    margin-left: 0;
    padding: 14px 0;
    font-size: 1.4rem;
    color: #1c1c1c;
  }
}


/************* 幻燈片 *************/
.custom-carousel {
  width: 100%;
  height: 90vh;
  overflow: hidden;
  border-bottom-right-radius: 150px;
  position: relative;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.custom-carousel .carousel-inner,
.custom-carousel .carousel-item {
  height: 100%;
}

.custom-carousel .carousel-caption-custom img {
  width: 50%;
  height: auto;
}

.mainword {
  width: 50%;
  height: auto;
}
.custom-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 底部漸層遮罩，讓文字更清楚 */
.custom-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* 左下文字 */
.carousel-caption-custom {
  position: absolute;
  left: 60px;
  bottom: 60px;
  z-index: 3;
  color: #fff;
  max-width: 650px;
}

.carousel-caption-custom h2 {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing:10%;
  color: #fff;
}

.carousel-caption-custom p {
  font-size: 36px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.92;
  color: #fff;
  font-weight: 500;
}

/* 右下 indicators */
.custom-indicators {
  position: absolute;
  right: 120px;
  bottom: 60px;
  left: auto;
  margin: 0;
  z-index: 4;
  display: flex;
  gap: 10px;
}

.custom-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background-color: #fff;
  opacity: 0.55;
  transition: all 0.3s ease;
}

.custom-indicators .active {
  width: 28px;
  background-color: #fff;
  opacity: 1;
}

/* 左右箭頭 */
.custom-carousel .carousel-control-prev,
.custom-carousel .carousel-control-next {
  width: 8%;
  z-index: 4;
}

.custom-carousel .carousel-control-prev-icon,
.custom-carousel .carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-size: 70% 70%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
}

/* 手機版 */
@media (max-width: 768px) {
  .custom-carousel {
    height: 420px;
    border-radius: 0px;
  }

  .carousel-caption-custom {
    left: 20px;
    right: 20px;
    bottom: 65px;
    max-width: calc(100% - 40px);
  }

  .carousel-caption-custom h2 {
    font-size: 40px;
    margin-bottom: 8px;
  }

  .carousel-caption-custom p {
    font-size: 14px;
    line-height: 1.5;
  }

  .custom-indicators {
    right: 20px;
    bottom: 24px;
    gap: 8px;
  }

  .custom-indicators .active {
    width: 22px;
  }

  .custom-carousel .carousel-control-prev-icon,
  .custom-carousel .carousel-control-next-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}



.section-2 {
  background-color: #F8F8F8;
  padding: 0px;
  text-align: center;
}

/* 文字 */
.section-title {
  font-size: 20px;
  margin-bottom: 16px;
}

.section-text {
  font-family: 'LXGWWenKaiTC';
  font-size: 1.4rem;
  color: #666;
  max-width: 800px;
  margin: 0px auto 40px;
  padding: 130px 0px;
  line-height: 50px;
  text-align: center;
}

.p-2040 {
  padding: 20px 40px;
}


@media (max-width: 556px){
  .section-text {
    font-size: 0.9rem;
    line-height: 32px;
  }
  .p-2040 {
    padding: 20px 15px;
  }
  

}


/* icon */
.section-icon img {
  width: 70px;
  height: auto;
}

/*浮動照片*/
.floating-section {
  position: relative;
  padding: 0px;
  background: #f7f7f7;
  overflow:visible;
}


/************ 浮動圖片基礎設定 ************/
.float-img {
  position: absolute;
  right: 0px;
  top: 60px;
  display: block;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.2s linear;
  z-index: 1;
}



@media (max-width: 1110px){
  .float-img{
    visibility: hidden;
  }
}

/* 各張圖的位置 */
.img-1 {
  width: 400px;
  height: auto;
}

@media (max-width: 1300px){
  .img-1 {
    width: 370px;
    height: auto;
  }
}

@media (max-width: 556px){
  .section-2 .container {
    padding: 0px 30px;
  }
}



.section-3 p {
  line-height: 35px;
  padding-top: 10px;
}

.text-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/***********標題裝飾************/

.decor-title {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  padding-left:20px ;

}

/* 底線 */
.decor-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100vw - 100%);
  margin-left: 0%;
  height: 2px;
  background-color: #6FA4B8;
}

/* 十字 */
.decor-title::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -10px;
  width: 8px;
  height: 21px;

  background:
    linear-gradient(#6FA4B8, #6FA4B8) center/2px 100% no-repeat,  /* 直線 */
    linear-gradient(#ffffff, #ffffff) center/100% 2px no-repeat; /* 橫線 */
  }

  .decor-title2 {
    position: relative;
    display: inline-block; 
    padding-bottom: 12px;
    line-height: 65px;
  }
  
  /* 底線 */
  .decor-title2::after {
    content: "";
    position: absolute;
    left: 105%;           /* 從文字結尾開始 */
    bottom: 33px;
    width: 60vw;         /* 延伸出去 */
    height: 2px;
    background-color: #6FA4B8;
  }
  
  /* 十字 */
  .decor-title2::before {
    content: "";
    position: absolute;
    left: 350px;
    bottom: 23px;
    width: 8px;
    height: 21px;
  
    background:
      linear-gradient(#6FA4B8, #6FA4B8) center/2px 100% no-repeat,
      linear-gradient(#ffffff, #ffffff) center/100% 2px no-repeat;
  }


  @media (max-width: 576px) {

    .section-3 .container{
      padding: 20px 30px;
    }

    .decor-title2 {
      font-size: 32px;
      line-height: normal;
    }

    .decor-title2::after {
      content: "";
      display: none;

    }
    
    /* 十字 */
    .decor-title2::before {
      content: "";
      display: none;
    }


    }



  .section-4 {
    background-color: #E8F6F6;
    padding: 100px 20px 220px 20px;
  }
  
  /* 內容寬度控制 */
  .section4 .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* 標題靠右 */
  .title-right {
    text-align: right;
    margin-bottom: 50px;
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(60deg, #4D8CD1, #4FABB6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    padding-left:20px ;
  }

  /* 底線 */
  .title-right::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100vw - 100%);
    margin-left: 0%;
    height: 2px;
    background-color: #6FA4B8;
  }
  
  /* 十字 */
  .title-right::before {
    content: "";
    position: absolute;
    left: 12px;
    bottom: -10px;
    width: 8px;
    height: 21px;
  
    background:
      linear-gradient(#6FA4B8, #6FA4B8) center/2px 100% no-repeat,  /* 直線 */
      linear-gradient(#ffffff, #ffffff) center/100% 2px no-repeat; /* 橫線 */
    }





      /* 標題靠右 */
  .title-right-white {
    text-align: center;
    margin-bottom: 60px;
    font-size: 64px;
    font-weight: 700;
    background: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    padding-left:20px ;
  }

  /* 底線 */
  .title-right-white::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100vw - 100%);
    margin-left: 0%;
    height: 2px;
    background-color: #fff;
  }
  
  /* 十字 */
  .title-right-white::before {
    content: "";
    position: absolute;
    left: 12px;
    bottom: -10px;
    width: 8px;
    height: 21px;
  
    background:
      linear-gradient(#fff, #fff) center/2px 100% no-repeat,  /* 直線 */
      linear-gradient(#ffffff, #ffffff) center/0% 2px no-repeat; /* 橫線 */
    }

    @media (max-width: 556px){
      .title-right-white::after{
        width: calc(160vw - 100%);
      }
      .title-right::after{
        width: calc(160vw - 100%);
      }

      .title-right{
        font-size: 48px;
      }

      .title-right-white{
        font-size: 48px;
      }

      .subtitle-left{
        font-size: 32px;
      }
    }

    

    



    .title-left {
      text-align: left;
      margin-bottom: -75px;
      font-size: 64px;
      font-weight: 700;
    
      background: linear-gradient(60deg, #4D8CD1, #4FABB6);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    
      position: relative;
      display: inline-block;
      padding-bottom: 20px;
      padding-right: 20px; /* 改右邊 */
    }
    
    /* 底線（往左延伸） */
    .title-left::after {
      content: "";
      position: absolute;
      right: 0; /* 改這裡 */
      bottom: 0;
      width: calc(100vw - 100%);
      height: 2px;
      background-color: #6FA4B8;
    }
    
    /* 十字（在右邊） */
    .title-left::before {
      content: "";
      position: absolute;
      right: 12px; /* 改右邊 */
      bottom: -10px;
      width: 8px;
      height: 21px;
    
      background:
        linear-gradient(#6FA4B8, #6FA4B8) center/2px 100% no-repeat,  /* 直線 */
        linear-gradient(#ffffff, #ffffff) center/100% 0px no-repeat; /* 橫線 */
    }




    .title-left-white {
      text-align: left;
      margin-bottom: -75px;
      font-size: 64px;
      font-weight: 700;
    
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    
      position: relative;
      display: inline-block;
      padding-bottom: 20px;
      padding-right: 20px; /* 改右邊 */
    }
    
    /* 底線（往左延伸） */
    .title-left-white::after {
      content: "";
      position: absolute;
      right: 0; /* 改這裡 */
      bottom: 0;
      width: calc(100vw - 100%);
      height: 2px;
      background-color: #fff;
    }
    
    /* 十字（在右邊） */
    .title-left-white::before {
      content: "";
      position: absolute;
      right: 12px; /* 改右邊 */
      bottom: -10px;
      width: 8px;
      height: 21px;
    
      background:
        linear-gradient(#ffffff, #ffffff) center/2px 100% no-repeat,  /* 直線 */
        linear-gradient(#ffffff, #ffffff) center/0% 0px no-repeat; /* 橫線 */
    }

    
  
  /* 副標＋內文區 */
  .content {
    max-width: 800px;
  }
  

  
  /* 內文 */
  .desc {
    font-size: 18px;
    color: #333;
    line-height: 1.8;
    font-weight: 500;
  }


  /******Content switcher*******/

  .section-switcher {
    padding: 48px 0;
    min-height: 100vh;
  }

  .switcher-wrap {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 左側按鈕區 */
  .switcher-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .switcher-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 97px;
    padding: 16px 0px;
    border-radius: 8px;
    background: #FFF;
    color: #111;
    font-weight: 700;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
    font-size: 24px;
  }

  .switcher-nav .nav-link:hover {
    color: #111;
    background: #ececec;
  }

  .switcher-nav .nav-link.active {
    background: #78a6c4;
    color: #fff;
  }

  /* active 右邊箭頭 */
  .switcher-nav .nav-link.active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #78a6c4;
  }

  /* 右側內容區 */
  .switcher-content {
    background: #FFF;
    border-radius: 16px;
    min-height: 435px;
    padding: 33px 48px;
    box-sizing: border-box;
  }

  .switcher-content h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1f3c4d;
  }

  .switcher-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 0;
  }

  /* 手機版 */
  @media (max-width: 991.98px) {
    .switcher-nav {
      margin-bottom: 24px;
    }

    .switcher-nav .nav-link.active::after {
      display: none;
    }

    .switcher-content {
      min-height: auto;
      padding: 28px 22px;
    }

    .switcher-content h3 {
      font-size: 26px;
    }

    .switcher-content p {
      font-size: 20px;
    }
    .switcher-nav .nav-link{
      min-height: 65px;
    }
  }


  /* 外框 */
.info-box {
  border: 4px solid #74A6BF;
  border-radius: 10px;
  padding: 19px;
  background-color: #fff;
}

/* 空框高度 */
.empty-box {
  height: 180px;
}

/* 數字 */
.section-4 .number {
  font-size: 48px;
  font-weight: 700;
  color: #F26522; /* 橘色，可調 */
  line-height: 1;
}

/* 單位 */
.section-4 .unit {
  font-size: 20px;
  font-weight: 800;
  margin-left: 6px;
  color: #F26522;
  padding-right: 20px;
}
@media screen and (max-width: 556px) {
  .section-4 .unit {
    padding-right: 0;
  }
}

/* 標題 */
.section-4 .title {
  font-size: 20px;
  font-weight: 100;
  color: #1f2b30;
  font-family: "NotoSansTC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

.section-4 .title .title-break {
  display: inline;
}



/* 說明文字 */
.section-4 .desc {
  font-size: 20px;
  color: #333;
  margin: 0;
  font-weight: 500;
}

/* 副標 */
.section-4 .sub-title {
  font-size: 24px;
  font-weight: 700;
}

/* 資料來源 */
.section-4 .source {
  font-size: 14px;
  color: #666;
}

/* 手機優化 */
@media (max-width: 576px) {
  .number {
    font-size: 40px;
  }

  .section-4 .title {
    margin-left: 0;
    margin-top: 6px;
    flex: 0 0 100%;
    width: 100%;
  }

  .section-4 .title .title-break {
    display: block;
  }

  .title-break {
    display: block;
  }

  .info-box {
    padding: 15px 20px;
  }
}

.section-deco {
  background-image: url('../assets/img/section-deco.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 33%;
}

@media (max-width: 556px){
  .section-deco {
    background-size: 80%;

  }
}

.deco-img {
  position: absolute;
  left: 0;
  bottom: 0;
  mix-blend-mode: multiply;
  width: 500px; /* 自行調整 */
  max-width: 40%;
  pointer-events: none; /* 不影響點擊 */
}

@media (max-width: 768px) {
  .deco-img {
    display:none;
  }
}





.section-5 {
  background-color: #fff;
}

/* 上方主視覺 */
.section-5-hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.section-5-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-5-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.35) 100%);
}

.section-5-hero-content {
  position: relative;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.section-5 h1 {
  color: #fff;
  -webkit-text-fill-color: aliceblue;
}

.section-5-title {
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* 白色裝飾線 */
.decor-title-white {
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}

.decor-title-white::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: 0;
  width: 370px;
  height: 2px;
  background-color: rgba(255,255,255,0.8);
}

.decor-title-white::before {
  content: "";
  position: absolute;
  left: 256px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(#ffffff, #ffffff) center / 2px 100% no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 0% 2px no-repeat;
}

/* 下方內容 */
.section-5-content {
  background: #fff;
}

.section-5-text-wrap {
  padding: 80px 70px;
  min-height: 540px;
}

.section-5-text-wrap h4 {
  font-size: 30px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin: 0;
}

.section-5-text-wrap h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0B6B8A;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 620px;
}

.section-5-text-wrap h2 {
  font-size: 36px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin-bottom: 32px;
}

.section-5-text-wrap p {
  font-size: 18px;
  line-height: 2;
  color: #333;
  max-width: 620px;
  margin-bottom: 0;
  text-align: justify;
}

/* Section 5：左側兩顆按鈕上下排列、等寬 */
.section-5-year-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  gap: 12px;
}

.section-5-year-btn-wrap .section-5-more-btn {
  margin-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.section-5-year-btn-wrap .section-5-more-btn:first-of-type {
  margin-top: 1.5rem !important;
}

/* 按鈕 */
.section-5-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 18px;
  border: 1.5px solid #0B6B8A;
  border-radius: 999px;
  color: #0B6B8A;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.section-5-more-btn:hover {
  background: #0B6B8A;
  color: #fff;
}

.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0B6B8A;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease;
}

/* 展開（顯示「收起」）時，箭頭朝上 */
.section-5-more-btn[aria-expanded="true"] .arrow-circle {
  transform: rotate(-90deg);
}

/* Section 5：手機版提示改為「下方」且箭頭往下 */
@media (max-width: 991.98px) {
  #contentHint {
    font-size: 0; /* 隱藏原本「右邊」文字但保留結構 */
    line-height: 0;
  }

  #contentHint::before {
    content: "請點擊下方各區塊進一步了解";
    font-size: 16px;
    line-height: 1.6;
    color: inherit;
  }

  #contentHint .arrow-circle {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
    transform: rotate(90deg);
    margin-bottom: 0px;
  }
}

/* 九宮格 */
.section-5-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  min-height: 540px;
}

.grid-item {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: #cfe7f0;
  min-height: 180px;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(10%) saturate(80%);
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
  filter: grayscale(100%);
}

.grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(72 128 178 / 65%);
  transition: background 0.3s ease;
}

.grid-item span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.grid-item:hover img,
.grid-item.active img {
  transform: scale(1.06);
  filter: grayscale(0%) saturate(100%);
}

.grid-item:hover::after,
.grid-item.active::after {
  background: rgba(25, 103, 138, 0.2);
}

.grid-item.active {
  outline: 2px solid #6DC6F0;
  outline-offset: -2px;
}

/* RWD */
@media (max-width: 991.98px) {
  .section-5-hero {
    height: 320px;
  }

  .section-5-hero-content {
    left: 50%;
    bottom: 30%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }

  .section-5-title {
    font-size: 42px;
  }

  .section-5-text-wrap {
    min-height: auto;
    padding: 48px 24px;
    scroll-margin-top: 80px;
  }

  .section-5-text-wrap h2 {
    font-size: 28px;
  }

  .section-5-text-wrap p {
    font-size: 20px;
    line-height: 1.9;
  }

  .section-5-grid {
    min-height: auto;
  }

  .grid-item {
    min-height: 140px;
  }

  .grid-item span {
    font-size: 22px;
  }
}

@media (max-width: 767.98px) {
  .section-5-title {
    font-size: 34px;
  }

  .decor-title-white::after {
    width: 120px;
  }

  .decor-title-white::before {
    left: 116px;
  }

  .section-5-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-item {
    min-height: 120px;
  }

  .grid-item span {
    font-size: 18px;
  }
}

.bottom-content {
  display: none;
}

.bottom-content.active {
  display: block;
}




.pf4-card {
  --pf4-bg-left: #63bdd1;
  --pf4-bg-right: #4f95e3;
  --pf4-white: #ffffff;
  --pf4-text: #222222;
  --pf4-line: rgba(255, 255, 255, 0.78);
  --pf4-dot: rgba(255, 255, 255, 0.98);
  --pf4-arrow: rgba(255, 255, 255, 0.95);
  --pf4-card-bg: rgba(255, 255, 255, 0.96);
  --pf4-shadow: rgba(0, 0, 0, 0.08);

  width: 100%;
  box-sizing: border-box;
  padding: 40px 0px 100px;
  background: linear-gradient(90deg, var(--pf4-bg-left) 0%, var(--pf4-bg-right) 100%);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}



.pf4-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
}

.pf4-arrow {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pf4-arrow svg {
  width: 22px;
  height: 22px;
}

.pf4-arrow path {
  fill: none;
  stroke: var(--pf4-arrow);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf4-arrow:hover {
  transform: translateY(-1px);
}

.pf4-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.pf4-selected-year-wrap {
  position: relative;
  min-width: 132px;
  display: flex;
  justify-content: center;
}

.pf4-selected-year {
  min-width: 225px;
  height: 60px;
  padding: 15px 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.96);
  color: #4b89cb;
  font-size: 36px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.pf4-timeline-wrap {
  position: relative;
  height: 64px;
  margin-bottom: 5px;
}

.pf4-timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  border-top: 1px solid var(--pf4-line);
}

.pf4-timeline-viewport {
  position: relative;
  width: 100%;
  height: 64px;
  overflow: hidden;
}

.pf4-timeline-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 64px;
  display: flex;
  align-items: flex-start;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.pf4-timeline-spacer {
  flex: 0 0 var(--pf4-side-pad, 0px);
  width: var(--pf4-side-pad, 0px);
  height: 64px;
}

.pf4-timeline-item {
  position: relative;
  width: var(--pf4-step-width, 210px);
  flex: 0 0 var(--pf4-step-width, 210px);
  height: 64px;
  cursor: pointer;
  user-select: none;
}

.pf4-dot {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pf4-dot);
  z-index: 2;
}

.pf4-timeline-item.is-active .pf4-dot {
  width: 17px;
  height: 17px;
  top: 6px;
  background: #ffc107;
}

.pf4-year-label {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1;
  white-space: nowrap;
}

.pf4-content-viewport {
  width: 100%;
  overflow: hidden;
}

.pf4-content-track {
  display: flex;
  width: 100%;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.pf4-panel {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 2% 28% 0;
}

@media (max-width: 640px){
  .pf4-panel {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0% 3% 0;
  }
  
}



.pf4-panel-card {
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 35px 35px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.pf4-panel-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right:20px solid transparent;
  border-bottom: 25px solid rgba(255, 255, 255, 1);
}

.pf4-panel-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #d8d8d8;
}

.pf4-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* pf4 內容區：多圖輪播（1~3 張） */
.pf4-carousel {
  position: relative;
}

.pf4-carousel-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pf4-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0%);
  transition: transform 0.35s ease;
  will-change: transform;
}

.pf4-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.pf4-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf4-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  user-select: none;
}

.pf4-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.48);
  transform: translateY(-50%) scale(1.03);
}

.pf4-carousel-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pf4-carousel-arrow.is-left {
  left: 10px;
}

.pf4-carousel-arrow.is-right {
  right: 10px;
}

.pf4-carousel-arrow::before {
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  transform: translateY(-3px);
}

.pf4-carousel-arrow.is-left::before {
  content: "‹";
}

.pf4-carousel-arrow.is-right::before {
  content: "›";
}

.pf4-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  padding: 0 10px;
}

.pf4-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
}

.pf4-carousel-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 640px) {
  .pf4-carousel-arrow {
    width: 30px;
    height: 30px;
  }
  .pf4-carousel-arrow::before {
    font-size: 20px;
  }
  .pf4-carousel-dots {
    bottom: 8px;
  }
}

.pf4-panel-text {
  color: #2b2b2b;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 300;
  word-break: break-word;
}

.pf4-panel-text .pf4-panel-text-list {
  margin: 0;
  padding-left: 1.35em;
  list-style-type: disc;
}

.pf4-panel-text .pf4-panel-text-list li + li {
  margin-top: 0.35em;
}

@media (max-width: 640px) {
  .pf4-card {
    padding: 75px 14px 110px;
  }

  .pf4-top {
    gap: 18px;
    margin-bottom: 18px;
  }

  .pf4-selected-year {
    min-width: 88px;
    font-size: 22px;
  }

  .pf4-timeline-item {
    width: 160px;
    flex: 0 0 160px;
  }

  .pf4-panel-card {
    padding: 18px;
    gap: 16px;
    border-radius: 14px;
  }

  .pf4-panel-text {
    font-size: 14px;
    line-height: 1.75;
  }

  .pf4-year-label {
    font-size: 11px;
  }


}


/* 整個 section */
.section-6 {
  position: relative;
  z-index: 3;
  margin-top: -50px; /* 壓住上一個 section */
}

/* 滿版背景 */
.section-6-bg {
  width: 100%;
  background: #FFF;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  padding: 120px 0 100px;
}
@media (max-width: 640px){
  .section-6-bg{
    border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 80px 0 0px;
  }
}


/* 內容 */
.section-6-content {
  max-width: 960px;
}

@media (max-width: 640px){
  .section-6-content {
    padding: 0 20px;
  }
}

.section-6-content h3 {
  font-size: 48px;
  font-weight: 900;
  color: #5a9dbd;
  margin-bottom: 32px;
}

.section-6-content h2 {
  font-size: 30px;
}

.section-7-content h2{
  font-size: 40px;
}

.section-7-content .mobile-title-underline {
  display: block;
}

/* 讓桌機版也顯示底線標題 */
.section-7-content .mobile-title-underline span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 900;
  font-family: 'NotoSansTC';
}

@media (max-width: 640px){

  .section-7-content {
    padding: 0 20px;
  }
  .section-7-content h2:first-child {
    display: none;
  }
  .section-7-content h2{
    font-size: 28px;
  }
  .section-7-content .mobile-title-underline {
    display: block;
  }
  
}


.section-6-content p {
  font-size: 20px;
  line-height: 1.9;
  color: #222;
}






  
.cards-section {
padding: 80px 20px;
background: #fff;
}

/* 外層 grid */
.cards-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 28px;
}

/* 手機：2 欄 */
@media (max-width: 991.98px) {
.cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* 桌機：12 欄 */
@media (min-width: 992px) {
.cards-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* 每張都占 3 欄，所以大小一樣 */
.card-item {
  grid-column: span 3;
}

/* 第一排：置中 3 張 */
.card-1 { grid-column: 2 / span 3; }
.card-2 { grid-column: 5 / span 3; }
.card-3 { grid-column: 8 / span 3; }

/* 第二排：4 張滿排 */
.card-4 { grid-column: 1 / span 3; }
.card-5 { grid-column: 4 / span 3; }
.card-6 { grid-column: 7 / span 3; }
.card-7 { grid-column: 10 / span 3; }

/* 第三排：置中 3 張 */
.card-8  { grid-column: 2 / span 3; }
.card-9  { grid-column: 5 / span 3; }
.card-10 { grid-column: 8 / span 3; }
}

/* 卡片固定正方形 */
.flip-card {
width: 100%;
aspect-ratio: 1 / 1;
perspective: 1200px;
cursor: pointer;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}

@media (min-width: 992px) {
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
}

.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.flip-card-front {
background: linear-gradient(180deg, #135779 0%, #1f6f97 100%);
border: 4px solid #17658c;
padding: 18px;
transform: rotateY(0deg) translateZ(0);
}

.flip-card-front::before {
content: "";
position: absolute;
inset: 10px;
border: 2px solid rgba(255, 255, 255, 0.72);
border-radius: 18px;
pointer-events: none;
}

.flip-card-back {
background: #FFCC12;
color: #fff;
transform: rotateY(180deg) translateZ(0);
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: justify;
flex-direction: column;
}

  
@media (max-width: 999.99px) {
  .flip-card-back {
    padding: 20px;
    }
  .back-title {
    font-size: 18px;
  }
  .back-text {
    font-size: 20px;
    line-height: 1.1;
  }

}

@media (max-width: 575.98px) {
  .flip-card-back {
    padding: 10px;
  }
}



/* 避免 iOS/Safari 翻卡時背面透出正面內容 */
.flip-card-front *,
.flip-card-back * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-inner-content {
  position: relative;
  z-index: 2;

  height: 100%;
  display: flex;
  flex-direction: column;   /* 直排 */
  justify-content: center;  /* 垂直置中 */
  align-items: center;      /* 水平置中 */

  text-align: center;
}

.card-icon {
  margin-bottom: 20px;
}

.card-icon img {
  width: 100px;
  height: auto;
}

@media (max-width: 1199.98px) {
  .flip-card-front {   
    padding: 16px;
    }
    .card-icon img {
      width: 60px;
      height: auto;
    }
    
}

@media (max-width: 575.98px) {
  .card-icon img {
    width: 60px;
    height: auto;
  }
  .card-icon{
    margin-bottom: 2px;
  }
}


.card-title {
margin: 0;
color: #fff;
font-weight: 800;
line-height: 1.35;
font-size: clamp(20px, 1.6vw, 22px);
}

.highlight {
color: #FFCC12;
}

.back-title {
font-size: 22px;
font-weight:900;
margin-bottom: 5px;
color: #272101;
padding-bottom: 5px;

text-decoration: underline;
  /* 進階屬性 (非必填) */
  text-decoration-color: #060001;    /* 顏色 */
  text-decoration-thickness: 2px;    /* 粗細 */
  text-underline-offset: 5px;        /* 與文字的距離 */
  text-decoration-style: solid;
}

.back-text {
margin: 0;
font-size: 18px;
line-height: 1.4;
}

.back-text-bold {
  font-weight: 900;
}

@media (max-width: 1024px) {
  .back-title {
    font-size: 20px;
  }

  .back-text {
    font-size: 16px;
    line-height: 1.1;
  }
}

/* 手機字級 */
@media (max-width: 575.98px) {
.cards-grid {
  gap: 16px;
}

.flip-card-front {
  border-radius: 18px;
  padding: 12px;
}

.flip-card-front::before {
  inset: 6px;
  border-radius: 14px;
}

.card-inner-content {
  padding: 4px;
}

.card-title {
  font-size: 14px;
  line-height: 1.35;
}

.back-title {
  font-size: 16px;
  line-height: normal;
}

.back-text {
  font-size: 12px;
}
}


.section-7 {
  background: #fff;
  padding: 80px 0;
}

@media (max-width: 1199.98px) {}

@media (max-width: 640px){
  .section-7 {
    padding: 40px 0;
  }
}





.layering-section {
  padding: 80px 20px;
  background: #fff;
}

.section-7 .layering-cta{
  margin-top: 24px;
  text-align: center;
}

.section-7 .layering-cta .btn{
  display: inline-block;
}

@media (min-width: 641px){
  .section-7 .layering-cta{
    text-align: right;
  }
}

@media (max-width: 640px){
  .layering-section {
    padding: 10px 20px;
  }
}

.layering-wrap {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 50%;
  gap: 40px;
  align-items: center;
}

.layering-graphic #interactiveLayering {
  width: 100%;
  max-width: 603px;
  height: auto;
  display: block;
}

.layering-graphic .layering-image {
  width: 100%;
  max-width: 603px;
  height: auto;
  display: block;
}

.svg-box svg {
  width: 100%;
  max-width: 603px;
  height: auto;
  display: block;
}

.layer {
  cursor: default;
  transition: opacity 0.3s ease;
}

.layer .click-shape {
  pointer-events: none;
}

/* 新版 SVG 使用 layer-hit 作為可點擊區 */
.layer .layer-hit {
  pointer-events: none;
}

.layer .label-pill {
  fill: #2f6485;
  transition: 0.3s ease;
}

.layer text {
  fill: #fff;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.layer:hover {
  opacity: 0.9;
}

.layer:hover .label-pill,
.layer.active .label-pill {
  fill: #1e4f69;
}

.layer.active {
  filter: drop-shadow(0 8px 20px rgba(36, 124, 192, 0.28));
}

.layer.dim {
  opacity: 0.45;
}

.content-box {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.content-box h3 {
  margin: 0 0 12px;
  font-size: 28px;
  color: #204b68;
}

.content-box p {
  margin: 0;
  font-size: 20px;
  line-height: 1.8;
  color: #171e22;
  font-weight: 700;
}



.layering-panel {
  display: block;
}

.layering-panel__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.layering-panel__heading .content-tag {
  margin-bottom: 0;
}

.layering-panel__heading .content-title {
  margin: 0;
}

.layering-panel.active {
  display: block;
}

.layering-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.layering-panel .content-tag {
  transition: font-size 0.2s ease;
}

/* 左側 SVG hover 到對應層級時，右側小標字級變 20px */
.layering-panel.is-hovered .content-tag {
  font-size: 18px;
}

/* =========================
   section-7 右側靜態排版（依截圖）
   ========================= */

.section-7 .layering-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.vision-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 18px;
  align-items: start;
}

@media (max-width: 640px){
  .vision-item {
    grid-template-columns: none;

  }
}

.vision-dot {
  width: 12px;
  height: 12px;
  margin-top: 10px;
  border-radius: 999px;
  background: #A0D6F1;
}

.vision-title {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  color: #3f8db4;
  letter-spacing: 0.5px;
  display: flex;
}

.vision-num {
  margin-right: 8px;
  font-weight: 900;
  background: #A0D6F1;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 8px;
}

.vision-lead {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.7;
  color: #171e22;
  font-weight: 700;
}

.vision-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 12px;
}
@media screen and (max-width: 640px){
  .vision-badges {
    justify-content: center;
  }
}

.vision-badge {
  min-width: 145px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #d9eef8;
  color: #0f2230;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
}

.vision-foot {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #171e22;
  font-weight: 700;
}

.vision-strong {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
}

.vision-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}

.vision-chip {
  padding: 10px 16px;
  border-radius: 14px;
  background: #72A7C1;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.vision-row-text {
  font-size: 16px;
  line-height: 1.7;
  color: #171e22;
  font-weight: 400;
}

.vision-badges--dark .vision-badge--dark {
  background: #296988;
  color: #fff;
  min-width: 130px;
}

@media (max-width: 991px) {
  .vision-title {
    font-size: 28px;
  }
  .vision-lead,
  .vision-row-text,
  .vision-foot {
    font-size: 20px;
  }
  .vision-badge {
    min-width: 130px;
    font-size: 18px;
    width: 100%;
  }
  .vision-row {
    grid-template-columns: 1fr;
  }
  .vision-chip {
    justify-self: start;
    font-size: 18px;
    width: 100%;
  }
}

.layering-placeholder {
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(36, 124, 192, 0.06);
  border: 1px dashed rgba(36, 124, 192, 0.28);
  color: #4f6f82;
  line-height: 1.8;
}

@media (max-width: 991px) {
  .layering-wrap {
    grid-template-columns: 1fr;
    margin: 0;
  }
  
}



.content-box {
  background: rgba(255, 255, 255, 0.86);
  border: 0px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 0px 10px 25px;
  box-shadow: 0 0px 0px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.content-tag {
  display: inline-block;
  padding: 0px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4d8cd1, #4fabb6);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}



.content-title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.25;
  color: #234c68;
}

.content-text {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.9;
  color: #4f6f82;
}

.content-list {
  margin: 0px 0px 20px 0px;
  padding-left: 20px;
  color: #4f6f82;
  line-height: 1.9;
  font-size: 16px;
}

.content-list li + li {
  margin-top: 6px;
}


@media (max-width: 991px) {
  .interactive-wrap {
    grid-template-columns: 1fr;
  }

  .graphic-box {
    min-height: auto;
  }

  .content-box {
    max-width: 720px;
    margin: 0;
  }
}

@media (max-width: 575px) {
  .content-box {
    padding: 0px;
    border-radius: 18px;
  }

  .content-title {
    font-size: 24px;
  }

  .content-text {
    font-size: 16px;
  }
}

.badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.title-badge {
  padding: 10px 10px;
  background: #D4E6EE;
  color: #262628;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 160px;
  margin: 10px;
}

.title-badge2 {
  padding: 10px 10px;
  background: #72A7C1;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 160px;
  margin: 10px;
}


/*充裕電源圖表*/

.power-growth-card {
  --card-border: #cfe0e8;
    --title-color: #4a4a4a;
    --sub-color: #7eb3d6;
    --track-bg: #f7f7f7;
    --track-border: #cedbe3;
    --full-grad-left: #7bb9c6;
    --full-grad-right: #80afd8;
    --semi: #f39a73;
    --other: #84bcc7;
    --disabled: #d7d7d7;
    --legend-text: #505050;
    --legend-muted: #c9c9c9;
    --tooltip-bg: rgba(100, 104, 106, 0.92);
    --tooltip-color: #ffffff;
    width: 100%;
    max-width: 740px;
    box-sizing: border-box;
}

.pg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.pg-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--title-color);
  line-height: 1.2;
}

.pg-total {
  font-size: 18px;
  font-weight: 600;
  color: var(--sub-color);
  line-height: 1.2;
  white-space: nowrap;
}

.pg-total span {
  font-size: 20px;
}

.pg-bar-wrap {
  position: relative;
}

.pg-bar-track {
  position: relative;
  width: 100%;
  height: 36px;
  border: 1.5px solid var(--track-border);
  border-radius: 10px;
  background: var(--track-bg);
  overflow: hidden;
}

.pg-bar-fill,
.pg-bar-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

.pg-bar-full {
  width: 100%;
  background: linear-gradient(90deg, var(--full-grad-left) 0%, var(--full-grad-right) 100%);
}

.pg-bar-stack {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.pg-bar-segment {
  width: 0%;
  transition: none;
}

.pg-bar-semiconductor {
  background: var(--semi);
  border-radius: 10px 0 0 10px;
}

.pg-bar-other {
  background: var(--other);
  border-radius: 0 10px 10px 0;
}

.pg-bar-label {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  pointer-events: none;
}

.pg-tooltip {
  position: absolute;
  left: 18px;
  top: 50px;
  background: rgba(113, 118, 121, 0.96);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.pg-tooltip .pg-tooltip-sub {
  display: block;
  margin-top: 4px;
  font-weight: 800;
}

.pg-tooltip span {
  font-weight: 600;
}

.pg-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pg-legend {
  display: flex;
  gap: 34px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-left: 10px;
}

.pg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pg-legend-item:focus-visible {
  outline: 2px solid #8eb7d6;
  outline-offset: 4px;
  border-radius: 4px;
}

.pg-dot {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 0;
  background: var(--disabled);
  flex: 0 0 auto;
}

.pg-dot-semi.active {
  background: var(--semi);
}

.pg-dot-other.active {
  background: var(--other);
}

.pg-legend-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--legend-muted);
  line-height: 1;
}

.pg-legend-item.active .pg-legend-text {
  color: var(--legend-text);
}

@media (max-width: 640px) {
  .power-growth-card {
    padding: 12px 12px 16px;
  }

  .pg-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .pg-title,
  .pg-total {
    font-size: 16px;
  }

  .pg-total span {
    font-size: 18px;
  }

  .pg-bar-track {
    height: 34px;
  }

  .pg-bar-label {
    font-size: 15px;
  }

  .pg-legend {
    gap: 18px;
    padding-left: 0;
  }

  .pg-legend-text {
    font-size: 15px;
  }

  .pg-tooltip {
    left: 8px;
    top: 46px;
    font-size: 13px;
  }
}




.section8-shell {
  background: #4D8CD1;
  background: linear-gradient(313deg,rgba(77, 140, 209, 1) 0%, rgba(79, 171, 182, 1) 73%, rgba(125, 178, 154, 1) 100%);
  border-top-right-radius: 72px;
  overflow: hidden;
}

 .section8-inner {
  padding: 42px 42px 30px;
}

 .section8-header {
  margin-bottom: 20px;
}

 .section8-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

 .section8-subtitle {
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 1.25rem;
  line-height: 1.65;
}

.section8-cta{
  margin-top: 18px;
  text-align: center;
}

@media (min-width: 641px){
  .section8-cta{
    text-align: right;
  }
}

.section8-more-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 18px;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  background: rgba(255,255,255,0.98);
  color: #0c8bbb;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  transition: all 0.3s ease;
}

.section8-more-btn .arrow-circle{
  background: #0c8bbb;
  color: #fff;
}

.section8-more-btn:hover{
  background: transparent;
  color: #fff;
}

.section8-more-btn:hover .arrow-circle{
  background: #fff;
  color: #0c8bbb;
}

/* tabs */
 .section8-tabbar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

 .section8-tab {
  flex: 1 1 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
  color: #0c8bbb;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  padding: 30px 14px;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

 .section8-tab.is-active {
  background:#FF9F43;
  color: #fff;
}

/* panels */
 .section8-panels {
  position: relative;
}

 .section8-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}

 .section8-panel.is-active {
  display: block;
  animation: section8FadeIn 0.42s ease forwards;
}

@keyframes section8FadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* layout */
 .section8-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  gap: 12px;
  align-items: stretch;
}

 .section8-left,
 .section8-right {
  min-width: 0;
}

/* left cards */
 .section8-card-stack {
  display: grid;
  gap: 10px;
  height: 100%;
}

 .section8-card-stack--3 {
  grid-template-rows: repeat(3, 1fr);
}

 .section8-card-stack--4 {
  grid-template-rows: repeat(4, 1fr);
}

 .section8-mini-card {
  background: rgba(255,255,255,0.97);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

 .section8-mini-card h3 {
  margin: 0 0 8px;
  color: #007eaa;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
}

 .section8-mini-card p {
  margin: 0;
  color: #2d2d2d;
  font-size: 16px;
  line-height: 1.65;
}

/* right image */
 .section8-image-box {
  height: 100%;
  min-height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.12);
}

 .section8-image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* tablet */
@media (max-width: 991.98px) {
   .section8-shell {
    border-top-right-radius: 52px;
  }

   .section8-inner {
    padding: 34px 24px 26px;
  }

   .section8-title {
    font-size: 32px;
  }

   .section8-subtitle {
    font-size: 20px;
  }

   .section8-tab {
    padding: 12px 10px;
    font-size: 0.92rem;
  }

  /* 平板仍維持左右排列，更接近設計稿 */
   .section8-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr);
    gap: 10px;
  }

   .section8-mini-card {
    padding: 14px 15px;
  }

   .section8-mini-card h3 {
    font-size: 0.95rem;
  }

   .section8-mini-card p {
    font-size: 0.88rem;
    line-height: 1.55;
  }

   .section8-card-stack--3,
   .section8-card-stack--4 {
    grid-template-rows: unset;
  }

   .section8-image-box {
    min-height: 100%;
  }
}

/* mobile */
@media (max-width: 767.98px) {
   .section8-shell {
    border-top-right-radius: 32px;
  }

   .section8-inner {
    padding: 24px 29px 20px;
  }

   .section8-title {
    font-size: 32px;
  }

.section8-subtitle {
    font-size: 20px;
    line-height: 1.6;
  }

.section8-tabbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

.section8-tab {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border-radius: 22px !important;
    padding: 11px 10px;
    font-size: 24px;
  }

  .section8-tab:first-child {
    border-radius: 10px !important;
    padding: 15px;
  }

  .section8-tab:not(:first-child):not(:last-child) {
    border-radius: 10px !important;
    padding: 15px;
  }

  .section8-tab:last-child {
    border-radius: 10px !important;
    padding: 15px;
  }

  /* 手機才改為上下排列 */
.section8-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

.section8-image-box {
    min-height: 220px;
  }

.section8-mini-card {
    padding: 14px;
  }

 .section8-mini-card h3 {
    font-size: 20px;
  }

.section8-mini-card p {
    font-size: 18px;
    line-height: 1.9;
  }
}



.dual-line-chart-section {
  width: 100%;
  overflow: hidden;
}

.dual-line-chart-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.dual-line-chart-wrap {
  width: 750px;
  position: relative;
}

.dual-line-chart-svg {
  width: 750px;
  height: auto;
  display: block;
  background: #fff;
}

.dual-line-chart-label {
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
}

.dual-line-chart-unit {
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}

.dual-line-chart-label.orange,
.dual-line-chart-unit.orange {
  fill: #ff7043;
}

.dual-line-chart-label.blue,
.dual-line-chart-unit.blue {
  fill: #237fc4;
}

.dual-line-chart-axis {
  stroke: #e5e5e5;
  stroke-width: 3;
  stroke-linecap: round;
}

.dual-line-chart-years text {
  font-size: 15px;
  font-weight: 700;
  fill: #666;
  text-anchor: middle;
}

.dual-line-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dualLineDraw 1.8s ease forwards;
}

.dual-line-chart-line.orange {
  stroke: #ff7043;
}

.dual-line-chart-line.blue {
  stroke: #237fc4;
  animation-delay: 0.2s;
}

.dual-line-chart-dot {
  r: 6;
  cursor: pointer;
  opacity: 0;
  animation: dualDotShow 0.35s ease forwards;
}

.dual-line-chart-dot.orange {
  fill: #ff7043;
}

.dual-line-chart-dot.blue {
  fill: #237fc4;
}

.dual-line-chart-dot:hover {
  r: 8;
}

.dual-line-chart-tooltip {
  position: fixed;
  z-index: 9999;
  padding: 8px 10px;
  background: rgba(30, 30, 30, 0.88);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  white-space: nowrap;
}

@keyframes dualLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dualDotShow {
  to {
    opacity: 1;
  }
}

@media (max-width: 750px) {
  .dual-line-chart-wrap,
  .dual-line-chart-svg {
    width: 750px;
    min-width: 750px;
  }
}







.chart5-section {
  width: 100%;
  padding: 15px;
  font-family: "Microsoft JhengHei", sans-serif;
}

.chart5-box {
  max-width: 750px;
  margin: 0 auto;

}

.chart5-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(35px, 7vw, 10px);
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
}

.chart5-title {
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 800;
  color: #1f2b30;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.chart5-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
}

.chart5-control {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.chart5-checkbox {
  width: clamp(18px, 2.6vw, 26px);
  height: clamp(18px, 2.6vw, 26px);
  border: 3px solid #666;
  border-radius: 4px;
  position: relative;
  background: #fff;
}

.chart5-checkbox.active::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 8px;
  height: 15px;
  border: solid #666;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.chart5-label {
  color: #fff;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 18px;
  line-height: 1.2;
}

.chart5-unit {
  font-size: clamp(16px, 2.4vw, 12px);
  font-weight: 800;
  color: #666;
  margin-left: auto;
}

.chart5-chart-wrap{
  width: 100%;
}

.chart5-chart {
  width: 100%;
  height: clamp(260px, 52vw, 320px);
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 22px);
  border-radius: 8px;
  padding: 0 clamp(8px, 2vw, 20px);
}

.chart5-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.chart5-total {
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 800;
  color: #5f5f5f;
  margin-bottom: 8px;
  white-space: nowrap;
}

.chart5-bar {
  width: clamp(38px, 6vw, 45px);
  display: flex;
  flex-direction: column-reverse;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  transition: height 0.45s ease;
}

.chart5-segment {
  width: 100%;
  transition: height 0.45s ease;
}

.chart5-year {
  font-size: clamp(14px, 2vw, 10px);
  font-weight: 800;
  color: #5f5f5f;
  margin-top: 14px;
}

@media (max-width: 576px) {
  .chart5-section {
    padding: 1px;
  }

  .chart5-box {
    padding: 22px 14px;
  }

  .chart5-controls {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    
  }

  .chart5-chart {
    /* 小螢幕：避免柱狀圖被壓扁，改為可水平捲動 */
    width: max-content;
    min-width: 100%;
    gap: 10px;
    padding: 0 8px;
  }

  .chart5-chart-wrap{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .chart5-item{
    flex: 0 0 auto;
    min-width: 30px;
  }

  .chart5-bar {
    width: clamp(22px, 7vw, 34px);
  }

  .chart5-total {
    font-size: 11px;
  }

  .chart5-year {
    font-size: 12px;
  }

  .chart5-checkbox.active::after {
    content: "";
    position: absolute;
    left: 4px;
    top: -4px;
  }
}







.status-label {
  /* 佈局：使其寬度隨文字長度縮放 */
  display: inline-block;
  background-color: #DBF3FF;
  color: #ffffff;
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  line-height: 1.2;
  width: 100%;
}

.topic-label {
  display: inline-block;
  background: rgba(0, 96, 127, 0.12);
  color: #00607F;
  border: 1px solid rgba(0, 96, 127, 0.35);
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1.2;
  width: fit-content;
}


/* Top Capsule Heading */
.header-capsule {
  display: inline-block;
  border: 2px solid #74A6BF;
  border-radius: 50px;
  padding: 10px 12px;
  margin-bottom: 10px;
  width: 100%;
}

.header-capsule h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 4px;
  color: #1e4f69;
}

.header-capsule p{
  line-height: 22px;
}



#footer {
  position: relative;
  overflow: hidden;
  background-color: #ECECEC;
  padding:7em 0 3em 0;
  background: #ECECEC;
  font-size: .7em;
  letter-spacing: 1px;
  text-align: center;
}

#footer p {
  color: #707070;
  font-size: 14px;
  text-align: center;
}

#footer a {
  color: #707070;
  font-size: 14px;
  text-align: center;
}

.footer-bg {
  width: 100%;
  position: relative;
}

.footer-bg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.footer-widget ul li {
  padding: 5px 0px;
}

.footer-widget p {
  margin-bottom: 5px;
}

.footer-widget h4 {
  margin-bottom: 20px;
}

.footer-widget h4 span {
  color: #008ce3;
  display: block;
  font-size: 60px;
  line-height: 60px;
}

.footer-blog li img {
  width: 70px;
  height: 70px;
  float: left;
  margin-right: 20px;
}

.footer-blog li h5 {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 22px;
  text-transform: capitalize;
}

.footer-blog li a.read-more {
  font-size: 13px;
}

.footer-blog li {
  margin-bottom: 15px;
}

.footer-copy {
  letter-spacing: 1px;
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #eee;
}

.footer-text h6 {
  margin-bottom: 10px;
}

.footer-text p span {
  color: #000;
}

.footer-text p.mail {
  color: #008ce3;
}

.bg-main {
  background: #F4F8FB;
}

.footer-widget a {
  color: #999;
}

#data-source p {
    font-size: 12px;
    font-weight: 400;
    word-wrap: break-word;
    color: #898989;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    text-align: justify;
    word-break: break-all;
    overflow-wrap: break-word;
}


.age-wrap {
  display: flex;
  align-items: flex-end;
  

}

@media (max-width: 768px) {
  .age-wrap {
    display: flex;
    align-items: center;
    gap: 4px;          /* 數字和歲的間距 */
    white-space: nowrap;
  }

  .age-wrap .title {
    margin: 0;
    line-height: 1;
    display: contents;
  }
}

/* 區塊大標題：捲動進場（main.js 加上 is-inview；無 JS 時不套用 --pending 故仍可讀） */
.section-heading-animate {
  transition:
    opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--section-heading-delay, 0s);
}

@media (prefers-reduced-motion: no-preference) {
  .section-heading-animate.section-heading-animate--pending:not(.is-inview) {
    opacity: 0;
    transform: translate3d(0, 1.35rem, 0);
  }

  .section-heading-animate.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}