:root {
      --main-green: #004d40;
      --accent-green: #00897b;
      --light-bg: #F8F9F5;
    }
    body {
      font-family: "Noto Sans TC", sans-serif;
      background-color: var(--light-bg);
      color: #333;
    }
    a {
    font-family: 'Heiti TC', 'Microsoft JhengHei', 'Arial Black', 'LiHei Pro';
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: none;
        outline: none;
        background:#004d40;
         width:auto;
  color:#fff;
          border-radius:.2rem;
 
    }

    /* 頂部品牌列（深綠透明反射質感） */
    .topbar {
    background: linear-gradient(
  180deg,
  #e3e2e2 0%,
  #fdfefd 30%,
  #fbfcfb 70%,
  #ffffff 100%
);
/* ========================================================= */
    /* 【全域修正】移除所有連結在任何狀態下的下底線 */
    a, a:hover, a:active, a:focus {
        text-decoration: none !important;
    }
    /* ========================================================= */ 
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      color: #fff;
      font-size: 0.95rem;
      padding: 10px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      z-index: 1031;
    }
    .topbar a {
      color: #004d40;
      text-decoration: none;
      margin-left: 15px;
      padding: 6px 14px;
      border-radius: 20px;
      font-weight: 500;
      background-color: rgba(255,255,255,0.15);
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .topbar a:hover, .topbar a:focus {
      color:#fff;
      background-color: #004d40;
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    /* 手機版 topbar 只顯示 icon */
    @media (max-width: 576px) {
      .topbar .nav-text { display:none; }
      .topbar a {
        padding:6px 10px;
        margin-left:8px;
      }
    }

    /* 首頁橫幅 */
  .hero {
       background: url('../images/bg.jpg') no-repeat center center; 
      background-size: cover;
            position: relative;
      color: #ffffff;
      text-align: center;
      padding: 140px 0;
      width: 100%;
      height: auto;
    }
.hero h1 {
    font-size: 2.5rem; /* 放大字體 */
    font-weight: 800 !important; /* 加粗 */
    letter-spacing: 2px; /* 增加字距 */
      /* 【關鍵技術 2】文字陰影 (Text Shadow) */
    /* 讓文字與背景分離，增加浮凸感 */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}
.hero .lead {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 15px;
    
    /* 副標題通常不加邊框，改用強烈的陰影來凸顯 */
    text-shadow: 2px 2px 4px #000000;
    
    /* 或者加上半透明背景底色，讓閱讀更輕鬆 */
    display: inline-block;
    background-color: rgba(0, 77, 64, 0.6); /* 深綠色半透明背景 */
    padding: 10px 20px;
    border-radius: 50px; /* 圓角 */
}
    /* 主選單列 */
    .navbar {
      background: linear-gradient(180deg,#01a304  0%,#01840c 45%,#004d40 100%);
      box-shadow:0 4px 10px rgba(0,0,0,0.15);
      border-bottom:4px solid var(--main-green);
      z-index:1030;
    }
    .navbar-nav .nav-link {
      color:#fff !important;
      font-weight:600;
      padding:12px 20px;
      border-radius:30px;
      transition:all 0.3s;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      background-color:rgba(255,255,255,0.2);
    }

    .dropdown-menu {
      background:rgba(255,255,255,0.95);
      border:none;
      border-top:3px solid var(--main-green);
      box-shadow:0 4px 12px 0 #004d40;
      border-radius:10px;
      padding:10px 0;
    }
    .dropdown-item {
      font-weight:500;
      color:#333;
      padding:10px 20px;
      transition:all 0.3s;
    }
    .dropdown-item:hover {
      background-color:var(--accent-green);
      color:#fff;
      border-radius:5px;
    }
/* 確保巢狀選單在展開時不會被父層遮擋 */
  .dropdown-submenu {
      position: relative;
  }
  .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      /* 預設隱藏，等待 JS 啟用 show */
      display: none; 
  }
  .dropdown-submenu .dropdown-menu.show {
      display: block; /* 展開時顯示 */
  }
    .section-title {
    border-left: 5px solid var(--accent-green);
    padding-left: 10px;
    font-weight: 600;
    margin: 25px 0 20px;
    background-color: rgba(144, 238, 144, 0.3); /* 淺綠色背景 */
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}
  
    .news-card {
      border:none;
      border-left:5px solid var(--accent-green);
      border-radius:10px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
      transition:transform 0.3s, box-shadow 0.3s;
      margin-bottom:1rem;
    }
    .news-card:hover {
      transform:translateY(-5px);
      box-shadow:0 6px 16px rgba(0,0,0,0.15);
    }
    .news-card .card-body h5 {
      color:var(--main-green);
      font-weight:600;
    }
 .section-title1 {
    border-left: 5px solid orange;
    padding-left: 10px;
    font-weight: 600;
    margin: 25px 0 20px;
    background-color: rgba(255, 165, 0, 0.3); /* 淺橘色背景 */
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}
    .news-card1 {
      border:none;
      border-left:5px solid orange;
      border-radius:10px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
      transition:transform 0.3s, box-shadow 0.3s;
      margin-bottom:1rem;
    }
    .news-card1:hover {
      transform:translateY(-5px);
      box-shadow:0 6px 16px rgba(0,0,0,0.15);
    }
    .news-card1.card-body h5 {
      color:orange;
      font-weight:600;
    }
.section-title2 {
    border-left: 5px solid red;
    padding-left: 10px;
    font-weight: 600;
    margin: 25px 0 20px;
    background-color: rgba(255, 99, 71, 0.3); /* 淺紅色背景 */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}
    .news-card2 {
      border:none;
      border-left:5px solid red;
      border-radius:10px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
      transition:transform 0.3s, box-shadow 0.3s;
      margin-bottom:1rem;
    }
    .news-card2:hover {
      transform:translateY(-5px);
      box-shadow:0 6px 16px rgba(0,0,0,0.15);
    }
    .news-card2.card-body h5 {
      color:red;
      font-weight:600;
    }
  .section-title3 {
    border-left: 5px solid blue; /* 藍色邊框 */
    padding-left: 10px;
    font-weight: 600;
    margin: 25px 0 20px;
    background-color: rgba(173, 216, 230, 0.3); /* 淺藍色背景 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}  
.news-card3 {
      border:none;
      border-left:5px solid blue;
      border-radius:10px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
      transition:transform 0.3s, box-shadow 0.3s;
      margin-bottom:1rem;
    }
    .news-card3:hover {
      transform:translateY(-5px);
      box-shadow:0 6px 16px rgba(0,0,0,0.15);
    }
    .news-card3.card-body h5 {
      color:blue;
      font-weight:600;
    }
    /* 右側垂直滾動輪播 */
    .vertical-carousel {
      height:300px;
      overflow:hidden;
      position:relative;
    }
    .vertical-carousel .carousel-inner {
      display:flex;
      flex-direction:column;
      transition:transform 0.6s ease;
    }
    .vertical-carousel .carousel-item {
      flex:0 0 100%;
      text-align:center;
      padding-bottom:10px;
    }
    .vertical-carousel img {
      width:100%;
      height:100px;
      object-fit:cover;
      border-radius:8px;
    }

    footer {
      background-color:var(--main-green);
      color:#fff;
      padding:40px 0;
     }
    .footer-logo img {
  max-height: 60px;
  filter: brightness(1.1);
}
/* 確保滾動功能正常運作的必要 CSS */
  #container1 {
      /* 假設圖片寬度最大為 250px，配合 col-md-4 調整 */
      width: 100%; /* 佔滿 col-md-4 的寬度 */
      max-width: 250px; 
      height: 800px; /* 滾動區塊的高度，可依需求調整 */
      overflow: hidden;
      margin: 0 auto; /* 區塊置中 */
      padding: 0;
      clear: both;
      border: 1px solid #ccc; 
  }

  #message1 {
      width: 100%;
      margin: 0px;
      overflow: hidden;
      clear: both;
  }

  #container1 ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  #container1 li {
      float: none;
      width: 100%; 
      height: 70px; /* 每張圖片的高度，必須固定 */
      line-height: 70px; /* 垂直居中 */
      overflow: hidden;
      vertical-align: middle;
      text-align: center; /* 圖片置中 */
  }

  /* 確保圖片適應 li 的高度 */
  #container1 li img {
      height: 100%; /* 圖片高度填滿 li */
      width: auto;
      max-width: 100%;
      border: none;
  }
  /* --- 關於我們頁面樣式 --- */

/* 主視覺橫幅 (Hero Section) 樣式 */
.hero-section {
    height: 350px; /* 橫幅高度 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* 增加一個深色疊層，讓文字更清晰 */
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 77, 64, 0.4); /* main-green 的 40% 透明度 */
}
.hero-section h1 {
    position: relative; /* 確保標題在疊層之上 */
    z-index: 10;
}
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 內容區塊標題顏色 */
.text-main-green {
    color: var(--main-green) !important;
}

/* 歷史沿革時間軸樣式 */
.timeline {
    border-left: 3px solid #ccc;
    padding-left: 20px;
    position: relative;
    margin-left: 10px;
}

.timeline-item {
    padding-bottom: 20px;
    position: relative;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    position: absolute;
    left: -28px;
    top: 4px;
    border: 3px solid var(--light-bg); /* 讓點在背景上更突出 */
}

/* 組織架構圖的樣式優化 */
.content-section img {
    max-height: 500px; /* 限制圖片最大高度 */
    width: auto;
    display: block;
    margin: 0 auto;
}
a.link.active-link {
        background-color: #ffe082 !important; /* 亮黃色背景 */
        color: #000 !important;               /* 深色文字 */
        border-radius: 4px;                   /* 圓角 */
        padding: 2px 5px;                     /* 內距 */
        text-decoration: none;
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* 增加一點光暈效果 */
        transition: all 0.3s ease;
    }
 /* Card 區塊 */ .info-card { border: none; border-left: 5px solid var(--accent-green); border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .info-card:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } .info-card .card-body h5 { color: var(--main-green); font-weight: 600; } footer { background-color: var(--main-green); color: #fff; padding: 40px 0; }
/*-----------------------photo-list-----------------------------*/

#life-list-frame {
	display: block;
	float: none;
	text-align: left;
	width: 100%;
	margin-top: 15px;
	min-height: 100px;
}

#life-list-frame li{
	width: 217px;
	height: 205px;
	display: block;
	float: none;
	text-align: left;
	position: relative;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 35px;
	display:inline-block;
}

#life-list-frame li a{
	color: #333;
	text-decoration: none;
}
#life-list-frame li a:hover{
	text-decoration: none;	
	color: #E64900;
}

#life-list-frame li h1{
	width: 100%;
	display: block;
	text-align: left;
	overflow: hidden;
	margin-bottom: 3px;
	padding-bottom: 2px;
	height: 145px;
}

#life-list-frame li h1 img{
	max-width: 210px;
	max-height: 140px;
	display: block;
	text-align: left;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	border: 1px solid #FFFFFF;
	margin-right: auto;
	margin-left: auto;	
	-webkit-border-radius: 5px 5px 5px 5px;	
}
#life-list-frame li h1 img:hover{
	border: 1px solid #FF5300;
}
#life-list-frame li h2{
	width:100%;
	font-size:100%;
	line-height: 20px;
	font-weight: normal;
	text-decoration: none;
	white-space:wrap;
	word-wrap: normal;
	overflow: hidden;
	text-align: left;	
}
#life-list-frame li h3{
	width:100%;
	font-size:13px;
	line-height: 30px;
	font-weight: bold;
	text-decoration: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #68A406;
	text-overflow : ellipsis;
	white-space:nowrap;
	word-wrap: normal;
	overflow: hidden;
	text-align: center;
	color: #888;
}

#life-detail-frame {
	display: block;
	float: left;
	text-align: left;
	width: 100%;
	margin-top: 30px;
}

#life-detail-frame li{
	width: 145px;
	display: block;
	float: left;
	text-align: left;
	position: relative;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 30px;
	height: 148px;
	vertical-align:top;
}

#life-detail-frame li a{
	color: #333;
	text-decoration: none;
}
#life-detail-frame li a:hover{
	text-decoration: none;	
	color: #E64900;
}

#life-detail-frame li h1{
	width: 100%;
	display: block;
	text-align: left;
	overflow: hidden;
	padding-bottom: 2px;
	height: 110px;
}

#life-detail-frame li h1 img{
	max-width: 150px;
	max-height: 100px;
	display: block;
	text-align: left;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	border: 1px solid #FFFFFF;
	margin-right: auto;
	margin-left: auto;	
	-webkit-border-radius: 5px 5px 5px 5px;
}
#life-detail-frame li h1 img:hover{
	border: 1px solid #FF5300;
}
#life-detail-frame li h2{
	width:100%;
	font-size:100%;
	line-height: 30px;
	font-weight: normal;
	text-decoration: none;
	text-overflow : ellipsis;
	white-space:wrap;
	word-wrap: normal;
	overflow: hidden;
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #aaa;
	padding-bottom: 5px;
}