/* 引入重置樣式表 */
@import './reset.css';

/* 網頁全域設定 */
body {
  width: 100vw; /* 設定寬度為視窗的寬度 */
  margin: 0px; /* 移除預設內距 */
  padding-top: 0px; /* 去除上邊距 */
  padding-left: 0px; /* 去除左邊距 */
  padding-right: 0px; /* 去除右邊距 */
  padding-bottom: 0px; /* 去除下邊距 */
  font-size: 1.1em; /* 設定段落文字大小 */
  color: #333333; /* 設定文字顏色為深灰色 */
  font-family: "黑體", "Microsoft JhengHei", "PingFang TC", "Arial", sans-serif; /* 設定字體為黑體 */
  word-wrap: break-word; /* 讓長單字或網址自動換行 */
  overflow-wrap: break-word; /* 讓超長單詞能夠正確換行 */
  white-space: normal; /* 確保文字正常換行，而不是強制單行顯示 */
  box-sizing: border-box;  /* 設定盒模型，確保 padding 和 border 不會影響元素的大小 */
  line-height: 1.5; /* 設行高 */
}

/* 響應式設計 */
@media (max-width: 1024px) {
  body {
    font-size: 1.2em; /* 中型螢幕（平板）調整字體大小 */
  }
}




/* 內容content表格設定 */
.content td {
  padding:0.5%; /* 表格外距 */
}


/* 文字尺寸設定 */
p {
  font-size: 1.1em; /* 設定段落文字大小 */
}

h1 {
  font-size: 2em; /* 設定h1標題文字大小 */
  font-weight: bold; /* 設定為粗體 */
}

h2 {
  font-size: 1.8em; /* 設定h2標題文字大小 */
  font-weight: bold; /* 設定為粗體 */
}

h3 {
  font-size: 1.6em; /* 設定h3標題文字大小 */
  font-weight: bold; /* 設定為粗體 */
}

h4 {
  font-size: 1.4em; /* 設定h4標題文字大小 */
  font-weight: bold; /* 設定為粗體 */
}

h5 {
  font-size: 1.3em; /* 設定h5標題文字大小 */
  font-weight: bold; /* 設定為粗體 */
  text-indent: -2em; /* 設定段落首行縮排 */
  margin-left: 2em; /* 設定左邊距 */
}



/* 設定焦點元素的樣式 */
:focus {
  outline: dashed red; /* 設定焦點的邊框為紅色虛線 */
}

/* 處理未聚焦的焦點元素 */
:focus:not(:focus) {
  outline: dashed red; /* 設定未聚焦的焦點邊框為紅色虛線 */
}

/* 設定段落縮排 */
.index_1 {
  text-indent: 1em; /* 設定段落首行縮排1個字 */
}

.index_2 {
  text-indent: 2em; /* 設定首行縮排2個字 */
}

.text_b {
  font-weight: bold; /* 設定文字為粗體 */
}

/* 設定分隔線樣式 */
hr {
  margin-top: 0.2em; /* 設定分隔線上方的邊距 */
  margin-bottom: 0.2em; /* 設定分隔線下方的邊 */
  margin-left: auto; /* 設定分隔線左側邊距自動，使其水平置中 */
  margin-right: auto; /* 設定分隔線右側邊距自動，使其水平置中 */
  border-style: inset; /* 設定邊框樣式為內凹，這會給分隔線一種沉入背景的效果 */
  border-width: 0.5px; /* 設定分隔線的邊框寬度 */
  /* width: 100%;  設定分隔線的寬度（可根據需要調整） */
}

/* 設定導盲磚樣式 */
.ct_accessibility a {
  line-height: 1.2; /* 設定行高 */
  text-decoration: none; /* 去除連結的底線 */
}

/* 導盲磚快速鍵連結樣式 */
.key {
  text-decoration: none; /* 去除連結的底線 */
  opacity: 0.1;  /*設定透明度 */
}


/* DIV容器data內容樣式 */
.data {
  height: inherit; /* 高度繼承父容器 */
  min-width: 960px; /* 設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 1024px; /* 避免超出視窗寬度 */
  margin: 0 auto; /* 設定左右邊距自動 */
  /*  display: flex; 使用彈性佈局 */
}

/* DIV容器data內容圖片樣式 */
.data img {
  max-width: 100%; /* 圖片最大寬度 */
  height: auto; /* 高度自動調整 */
}


/* DIV容器content內容樣式 */
.content {
  height: inherit; /* 高度繼承父容器 */
  /*margin: 0 auto;  設定左右邊距自動 */
  /*padding: 10px;  設定內邊距 */
  padding-top: 10px; /*設定上方內邊距 */
  padding-bottom: 20px; /*設定下方內邊距 */
  padding-right: 50px; /*設定右方內邊距 */
  padding-left: 50px; /*設定左內邊距 */
  line-height: 1.7; /* 設定行高 */
}

/* DIV容器content內容圖片樣式 */
.content img {
  /* width: 100%;  設定圖片寬度使圖片自動適應容器大小 */
  height: auto; /* 設定圖片高度自動調整以保持圖片的原始比例 */
  display: block; /* 設定圖片為區塊元素讓圖片獨立佔據一行 */
  /*margin: 0 auto;  設定圖片的左右邊距為自動使其水平居中 */
  border-radius: 8px; /* 設定圖片邊框圓角 */
  /* background-color: #F0F0F0;  設定圖片的底色為淺灰色 */
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  設定圖片陰影效果 */
  /*transition: transform 0.3s ease;  設定圖片被懸停時將進行縮放 */
}

/* DIV容器content內容圖片懸停放大 */
.content img:hover {
  transform: scale(1); /* 設定當圖片被懸停時，將圖片設1.05可放大5% */
}

/* DIV容器content內容連結樣式 */
.content a {
  text-decoration: none; /* 去除連結的底線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1em; /* 設定字體大小 */
}




/* Layout版面Top設定 */
/* 上方top容器 */
.top_flex {
  display: flex; /* 使用彈性佈局 */
  min-width: 960px; /* 設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 1024px; /* 避免超出視窗寬度 */
  margin: 0 auto; /* 設定左右邊距自動 */
  background-color: #FFFFFF;
}

/* 上方圖片容器 */
.top_logo {
  flex: 1; /* 使容器彈性分配寬度 */
  /*height: 205px;  設定高度 */
  /* width: 600px;  設定寬度 */
  text-align: center; /* 設定內容置中 */
}

/* 上方圖片設定 */
.top img {
  /*float: center;  設定圖片浮動置中(左left) */
  /*min-width: 960px;  設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 100%; /* 避免超出視窗寬度 */
  margin: 0 auto; /* 設定左右邊距自動 */
}

/* 上方banner圖片容器 */
.top_img {
  display: flex; /* 使用彈性佈局 */
  min-width: 960px; /* 設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 1024px; /* 避免超出視窗寬度*/
  margin: 0 auto; /* 設定左右邊距自動 */
  overflow: hidden; /* 設定超出範圍自動裁切 */
}

/* 右上選單文字 */
.top_text {
  /*　flex: 1;  使容器彈性分配寬度 */
  /* height: 50px; 設定高度 */
  /*　width: 360px;  設定寬度 */
  float: none; /* 取消浮動 */
  display: flex; /* 使用彈性佈局 */
  align-items: center; /* 垂直置中 */
  justify-content: right; /* 文字右對齊 */
}

/* 右上選單文字連結樣式 */
.top_text a {
  text-decoration: none; /* 去除連結的底線 */
}

/* 右上top-but選單文字連結樣式 */
.top-but {
  text-decoration: none; /* 去除連結的底線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 0.8em; /* 設定字體大小 */
  text-align: center; /* 文字置中對齊 */
  color: #333333; /* 設定文字顏色為深灰色 */
  /*width: 100px;  設定寬度 */
  margin: 5px 5px; /* 設定上下外邊距，左右外邊距 */
  padding: 5px 10px; /* 設定上下內邊距，左右內邊距 */
  background-color: rgb(234, 234, 234); /* 設定底色 */
  text-decoration: none; /* 去除連結的下劃線 */
  border-radius: 20px; /* 增加圓角 */
}

/* 右上top-but選單文字連結懸停時樣式 */
.top-but:hover {
  background-color: rgb(214, 214, 214); /* 滑鼠懸停時變為較深的灰色 */
}




/* 上方選單區域 */
.top_link {
  /*height: 35px;  設定高度 */
  /* min-width: 960px;  設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 1024px; /* 避免超出視窗寬度 */
  float: none; /* 取消浮動 */
  margin: 0 auto; /* 設定左右邊距自動 */
  display: flex; /* 使用彈性佈局 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  flex-wrap: wrap;
}


/* 響應式設計：適用於小型螢幕（手機） */
@media screen and (max-width: 768px) {
  
  .top-dropdown {
    display: flex;
    flex-direction: column; /* 縱向排列選單 */
    align-items: center; /* 置中對齊選單項目 */
    width: 100%; /* 確保選單寬度與螢幕相符 */
  }

  .top_link {
    flex-direction: column; /* 讓選單在手機上縱向排列 */
    min-width: auto; /* 取消最小寬度限制 */
    width: 100%; /* 讓選單填滿螢幕 */
    padding: 10px; /* 增加內邊距 */
  }
}

/* 響應式設計：適用於中等尺寸螢幕（平板） */
@media screen and (max-width: 1024px) {
  
  .top_link {
    min-width: auto; /* 取消固定最小寬度，適應螢幕 */
    width: 100%; /* 讓選單自適應寬度 */
    padding: 0px; /* 間距 */
  }
}




/* 上方選單文字 */
.top_link p {
  text-align: center; /* 文字置中 */
}

/* 上方選單連結樣式 */
.top_link a {
  text-decoration: none; /* 去除連結的底線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1.1em; /* 設定字體大小 */
}


/* 上方橫排按鈕樣式 */
.menu-styletop {
  display: inline-block; /* 讓按鈕橫向排列 */
  text-align: center; /* 文字置中對齊 */
  color: #ffffff; /* 設定文字顏色 */
  margin: 0px 5px; /* 設定按鈕之間的間距 */
  padding: 12px 15px; /* 設定內邊距，使按鈕更易點擊 */
  text-decoration: none; /* 去除連結的下劃線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1.1em; /* 設定字體大小 */
  border-radius: 0px; /* 增加圓角，使按鈕更美觀 */
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 120px; /* 寬度 */
}

/* 響應式設計：當螢幕寬度小於 1024px，自動調整按鈕尺寸與排列方式 */
@media (max-width: 1024px) {
  .menu-styletop {
    display: block; /* 讓按鈕改為直向排列 */
    width: 90%; /* 讓按鈕寬度接近滿版，保持美觀 */
    max-width: none; /* 移除最大寬度限制，適應小螢幕 */
    margin: 0px auto; /* 自動置中 */
  }
}

/* 響應式設計：當螢幕寬度小於 768px，自動調整按鈕尺寸與排列方式 */
@media (max-width: 768px) {
  .menu-styletop {
    display: block; /* 讓按鈕改為直向排列 */
    width: 90%; /* 讓按鈕寬度接近滿版，保持美觀 */
    max-width: none; /* 移除最大寬度限制，適應小螢幕 */
    margin: 0px auto; /* 自動置中 */
  }
}



/* 針對極小螢幕（如手機）進一步調整 */
@media (max-width: 480px) {
  .menu-styletop {
    font-size: 1em; /* 減小字體大小，避免超出畫面 */
    padding: 2px 2px; /* 調整內邊距，讓按鈕適中 */
  }
}


/* 上方橫排按鈕滑鼠懸停效果 */
.menu-styletop:hover {
  color: white; /* 文字變為白色 */
}

/* 設定按鈕容器，確保按鈕在上方橫排顯示 */
.menu-container {
  text-align: center; /* 讓按鈕置中排列 */
  padding: 10px 0;
  background-color: #ffffff; /* 設定背景顏色 */
}



/* 響應式設計 - 平板 (768px 以下) */
@media screen and (max-width: 768px) {
  .menu-style {
    display: block; /* 手機版改為縱向排列 */
    width: 90%; /* 讓按鈕填滿寬度 */
    margin: 5px auto; /* 置中排列 */
  }
}




/* 設定 top 頁面的下拉選單 */
.top-dropdown {
  display: inline-block; /* 讓選單按鈕橫向排列 */
  position: relative; /* 設定相對定位，確保下拉選單內容正確顯示 */
  border-radius: 0; /* 移除圓角 */
  min-width: 110px; /* 最小寬度 */
}

/* ======================== 下拉按鈕設定 ======================== */
.top-dropdown .dropbtn {
  display: block; /* 設定按鈕為區塊元素 */
  text-align: center; /* 文字置中 */
  color: rgb(255, 255, 255); /* 文字顏色為白色 */
  margin: 0px 0;
  padding: 10px 2px; /* 增加內邊距，提高可點擊範圍 */
  text-decoration: none; /* 移除底線 */
  font-weight: bold; /* 設定字體加粗 */
  font-size: 1em; /* 設定字體大小 */
  border: none; /* 移除邊框 */
  cursor: pointer; /* 設定滑鼠樣式為可點擊 */
  min-width: 110px;  /* 設定最小寬度，確保一致性 */
  transition: background-color 0.3s ease; /* 增加過渡效果 */
}


/* ======================== 下拉選單內容設定 ======================== */
.top-dropdown .dropdown-content {
  display: none; /* 預設隱藏選單內容 */
  position: absolute; /* 設定絕對定位，使內容顯示於按鈕下方 */
  min-width: 110px; /* 設定最小寬度 */
  background-color: white; /* 設定選單背景為白色 */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* 設定陰影，使選單更明顯 */
  z-index: 1; /* 確保選單顯示於最上層 */
}

/* 設定選單內部的連結樣式 */
.top-dropdown .dropdown-content a {
  color: #333333; /* 設定文字顏色為深灰色 */
  padding: 12px 16px; /* 設定內邊距，使選單內容更易點擊 */
  font-size: 0.8em; /* 設定字體大小 */
  text-decoration: none; /* 移除底線 */
  display: block; /* 設定為區塊元素，使其佔滿整列 */
  transition: background-color 0.3s ease; /* 增加過渡效果，提升互動體驗 */
}

/* 滑鼠懸停時，選單選項變色 */
.top-dropdown .dropdown-content a:hover {
  background-color: #f0f0f0; /* 設定背景為淺灰色 */
}

/* 當滑鼠懸停於選單按鈕時，顯示下拉選單內容 */
.top-dropdown:hover .dropdown-content {
  display: block;
}

/* ======================== RWD 響應式設計 ======================== */
@media screen and (max-width: 768px) {
  .top-dropdown {
    width: 100%; /* 讓選單填滿螢幕 */
    min-width: 90%;  /* 設定最小寬度，確保一致性 */
    text-align: center;
    display: block; /* ✅ 讓每個選單按鈕獨立換行 */
    flex-direction: column; /* 縱向排列選單 */
    align-items: center; /* 置中對齊選單項目 */

  }

  .top-dropdown .dropbtn {
    width: 100%; /* ✅ 讓按鈕佔滿整行，確保縱向排列 */
    display: block; /* ✅ 讓按鈕獨立換行 */
  }

  .top-dropdown .dropdown-content {
    position: static; /* ✅ 讓選單內容跟隨按鈕排列 */
    width: 100%;
    box-shadow: none; /* 保持簡潔設計 */
  }
}




/* Layout版面welcome設定 */
/* 歡迎頁面容器 */
.welcome {
  height: inherit; /* 高度繼承父容器 */
  width: auto; /* 設定寬度為auto or 960px */
  margin: 0 auto; /* 設定左右邊距自動 */
  display: flex; /* 使用彈性佈局 */
}



/* Layout版面menu左選單設定 */
/* 左選單 */
/* .menu { */
  /* height: inherit; /* 高度繼承父容器 */
  /* border-style: solid; /* 設定邊框樣式為實線 */
  /* border-width: 3px; 設定邊框寬度 */
  /* border-radius: 8px; 設定圓角邊框 */
  /* flex: 25%; /* 預設寬度比例為25% */
  /* margin: 10px; /* 設定外邊距 */
  /* padding-left: 0px; /* 設定左邊內邊距 */
  /*  padding-right: 0px; /* 設定右邊內邊距 */
  /* padding-bottom: 10px; /* 設定底部內邊距 */
/* } */

/* 左選單連結樣式 */
.menu a {
  text-decoration: none; /* 去除連結的下劃線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1.1em; /* 設定字體大小 */
}

/* 左方選單連結樣式 */
.menu-style {
  display: block; /* 設定為區塊元素，使每個連結占據一整行 */
  text-align: center; /* 文字置中對齊 */
  color: #333333; /* 設定文字顏色為黑色 */
  /*width: 100%;  設定寬度為100% */
  margin: 2px 0; /* 設定上下外邊距，左右外邊距 */
  padding: 12px 10px; /* 設定上下內邊距，左右內邊距 */
  text-decoration: none; /* 去除連結的下劃線 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1.1em; /* 設定字體大小 */
  border-radius: 8px; /* 增加圓角，使選單具有圓滑邊角 */
}

/* 左選單列表 */
.menu ul {
  line-height: 1.5em; /* 設定行高 */
}

/* 左選單列表項目 */
.menu li {
  text-indent: -0em; /* 設定列表項目縮排 */
  margin-left: 0em; /* 設定左邊距 */
}

/* 設定 menu 頁面的下拉選單，包含圓角樣式 */
.menu-dropdown {
  display: inline-block; /* 設定為內聯區塊元素，讓選單可以與其他元素並列 */
  position: relative; /* 讓子元素可以相對此元素進行定位 */
  border-radius: 8px; /* 選單圓角 */
}

/* 設定 menu 頁面的下拉按鈕樣式 */
.menu-dropdown .dropbtn {
  display: block; /* 設定為區塊元素，使按鈕填滿容器 */
  text-align: center; /* 文字置中對齊 */
  color: #333333; /* 設定文字顏色為黑色 */
  margin: 2px 0; /* 設定上下邊距 */
  padding: 10px 10px; /* 設定內邊距 */
  text-decoration: none; /* 移除文字裝飾 */
  font-weight: bold; /* 設定字體加粗 */
  font-size: 1.1em; /* 設定字體大小 */
  border: none; /* 移除邊框 */
  cursor: pointer; /* 設定鼠標為指標型態，表示可點擊 */
  width: 100%; /* 設定寬度為頁面寬度 */
  max-width: 100%; /* 確保不超出視窗寬度 */
  min-width: 200px; /* 設定最小寬度比例 */
  border-radius: 8px; /* 按鈕圓角 */
}

/* 設定 menu 頁面的下拉選單內容樣式 */
.menu-dropdown .dropdown-content {
  display: none; /* 預設隱藏下拉選單 */
  position: absolute; /* 讓選單內容定位於按鈕下方 */
  width: 100%; /* 設定寬度為頁面寬度 */
  max-width: 100%; /* 確保不超出視窗寬度 */
  min-width: 200px; /* 設定最小寬度比例 */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* 設定陰影 */
  z-index: 1; /* 設定層級，確保選單在最上層 */
  border-radius: 8px; /* 增加圓角 */
}

/* 設定 menu 頁面的下拉選單項目樣式 */
.menu-dropdown .dropdown-content a {
  color: #333333; /* 設定文字顏色為黑色 */
  padding: 12px 16px; /* 設定內邊距 */
  text-decoration: none; /* 移除文字裝飾 */
  display: block; /* 設定為區塊元素，使其填滿容器 */
  border-radius: 8px; /* 增加圓角 */
}

/* 顯示下拉選單 */
.menu-dropdown:hover .dropdown-content, .top-dropdown:hover .dropdown-content {
  display: block; /* 滑鼠懸停時顯示下拉選單 */
}


/* Layout版面footer頁腳設定 */
/* 頁腳文字樣式 */
.footer_text {
  min-width: 960px; /* 設定最小寬度 */
  width: 100%; /* 使其依瀏覽器尺寸縮放 */
  max-width: 1024px; /* 避免超出視窗寬度 */
  margin: 0 auto; /* 設定左右邊距自動 */
  padding-top: 10px; /* 設定上邊內邊距 */
  padding-bottom: 10px; /* 設定下邊內邊距 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  text-align: center; /* 文字置中 */  
  font-size: 0.8em; /* 設定段落文字大小 */
  line-height: 1.5; /* 設定文字行高為1.5 */
  color: #ffffff; /* 設定文字顏色 */
}

/* 頁腳文字段落樣式 */
.footer_text p {
  text-align: center; /* 文字置中 */  
}

/* 頁腳連結樣式 */
.footer_text a {
  text-decoration: none; /* 去除連結的底線 */  
}

/* 讓 iframe 寬度 100%，高度自動為其三分之一式 */
.ratio-iframe {
    width: 100%;
    aspect-ratio: 3.2 / 1; /* 寬:高 = 3.2:1 → 高:寬 = 1:3.2 */
    border: none;
  }