:root {
	--step-header-color1:#3a1e83;
	--step-header-color2:#00a8a5;
	--pkg-a-color: #00bfb2; /* Teal */
	--pkg-b-color: #008cc1; /* Blue */
	--pkg-c-color: #f05a5a; /* Red */
	--pkg-d-color: #f6b527; /* Yellow */
	--gray-bg: #f2f2f2;
	--dark-blue: #004d80; /* Headers */
	--border-color: #ddd;
	--text-color: #333;
}




.container.news {
	padding-bottom: 60px;
}

h3#current-category-title{
	font-size: 1.5rem;
	padding-bottom: 10px;
	margin-bottom: 0;
	color: #333;
}



/* ====================================================== */
/* Customer Center Page Styles (Download, etc.)
/* ====================================================== */

.customer-center-section {
	padding: 60px 0;
}

/* 篩選器 */
.drop-controls {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
}

.news-filter-dropdown {
	padding: 8px 12px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	font-size: 0.9rem;
}

.newTitle-bar{
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #ccc;
	margin-bottom:.8rem;
}

.news-blockTitle{
	display: inline-block;
}

.news-blockTitle h3{
	font-size: 1.5rem;
	font-weight: 400;
	color:var(--secondary-color);
	margin-bottom:1.3rem;
}

.list-container,.detail-container{
	border-top:2px solid var(--secondary-color);
}

.detail-container h1{
	padding: 25px 0;
	border-bottom:1px solid var(--secondary-color);
	line-height: 1.4;
	text-align: left;
}

.detail-container ul{
	list-style: none; /* 關掉預設圓點 */
	  padding: 0;       /* 歸零預設縮排 */
	  margin: 0;
}

.detail-container ul li {
  position: relative;      /* 讓裡面的圓點可以根據它定位 */
  padding-left: 1.2em;     /* 左邊留出空位給圓點 (關鍵！) */
  margin-bottom: 2px;      /* 每一項之間的距離 */
  line-height: 1.6;        /* 讓閱讀舒適一點 */
}

.detail-container ul li::before {
  content: "";             /* 這是偽元素必要的屬性，內容留空 */
  
  /* --- 以下是畫圓點的造型 --- */
  width: 6px;              /* 圓點寬度 */
  height: 6px;             /* 圓點高度 */
  background-color: #000; /* 愛用什麼色就用什麼色！ */
  border-radius: 50%;      /* 變成圓形 (不寫就是方形) */
  
  /* --- 以下是定位 (讓它跟文字對齊) --- */
  position: absolute;      /* 絕對定位 */
  left: 0;                 /* 貼在最左邊 */
  top: 9px;                /* ★這裡要微調，根據字體大小往下推，讓它垂直置中 */
}


/* 2. 新版檔案下載列表 */
/* =================================
   基本樣式 (通用)
   ================================= */

.news-table {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* 避免圓角外框破圖 */
}



/* =================================
   桌面版樣式 (Desktop First)
   ================================= */

/* 將頭部和內容的 a 標籤都設定為 flex 容器 */
.news-head,
.newsListLink {
  display: flex;
  align-items: center; /* 垂直置中對齊 */
  padding: 12px 15px;
  color:#333;
  transition: background-color 0.3s;
}

a.newsListLink {
	color: var(--primary-color);
}

a.newsListLink:active{
	text-decoration: none;
	color: var(--primary-color);
}

.newsListLink:hover {
	background-color: #f5f5f5;
	
}

.newsListLink:hover span.newsListTitle{
	text-decoration: underline;
}

a.newsListLink:visited{
	text-decoration: none;
	color: var(--middle-gray-color);
}

a.newsListLink:visited span.newsNo{
	color: var(--middle-gray-color);
}

.news-head {
  background-color: #f0f0f0;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.content-row {
	border-bottom: 1px solid #eee;
}
.content-row:last-child {
	border-bottom: none;
}



/* 設定 "NO." 欄位的固定寬度 */
.news-head > span:first-child,
.newsNo {
  flex-basis: 150px;  /* 給予一個基礎寬度 */
  flex-shrink: 0;   /* 不要壓縮此欄位 */
  text-align: center;
  font-weight: bold;
  color: #555;
}

/* 設定 "TITLE" 欄位自動填滿剩餘空間 */
.news-head > span:last-child,
.newsListTitle {
  flex-grow: 1; /* 佔用所有剩餘空間 */
  padding-left: 15px; /* 與編號欄位保留一些間距 */
  white-space: nowrap; /* 強制不換行 */
  overflow: hidden; /* 超出部分隱藏 */
  text-overflow: ellipsis; /* 超出部分顯示省略號 */
  
}

.news-head > span.header-title{
	text-align: left;
}

/* =================================
   手機版樣式 (使用 Media Query)
   當螢幕寬度小於 768px 時套用以下樣式
   ================================= */
@media (max-width: 768px) {
	
   .news-blockTitle{
	   display: none;
   }

  .news-filter-dropdown{
	  width:100%;
	  background: #fff;
	  font-size: 1.1rem;
	  color:#333;
  }
  
  .news-filter-dropdown option{
  }

  /* --- 方案一：編號與標題上下堆疊 --- */
  .news-head {
	/* 在手機上可以選擇隱藏標頭，或只顯示 TITLE */
	display: none; 
  }
  
  .newsListLink {
	flex-direction: column; /* 將 flex 方向改為垂直 */
	align-items: flex-start; /* 讓內容靠左對齊 */
  }

  .newsNo {
	/* 重設桌面版的寬度設定 */
	/* flex-basis: auto; 
	width: auto;
	text-align: left;
	font-size: 0.8em;
	color: #888;
	margin-bottom: 5px;  */
	display: none;
  }

  .newsListTitle {
	/* 重設桌面版的設定 */
	padding-left: 0; 
	white-space: normal; /* 讓標題可以正常換行 */
  }



	.download-icon {
		margin-left: 15px;
		font-size: 1.1rem;
		color: var(--secondary-color);
		opacity: 0.7;
		transition: opacity 0.3s;
	}
	
	.download-icon:hover {
		opacity: 1;
	}
}


/* ====================================================== */
/* Download Page - RWD
/* ====================================================== */
@media (max-width: 767px) {
	
	.customer-center-section {
		padding: 20px 0;
		padding-bottom: 40px;
	}
	
	.newTitle-bar{
		padding-bottom:1.1rem;
	}
	
	.drop-controls {
		padding-bottom:0;
	}
}