/*!
 * bs4-compat-1.0.css
 * Bootstrap 5.3.8 -> 舊版外觀相容層（中光電網站專用）
 *
 * 目的：網站從 Bootstrap CSS 4.0.0-beta（舊 css/bootstrap.min.css 檔頭實際標示為
 *       v4.0.0-beta）換成 Bootstrap 5.3.8 後，外觀與行為維持和舊版完全一樣。
 * 載入順序（固定）：bootstrap-5.3.8.min.css -> 本檔 -> style.css
 * 原則：
 *   1. 只處理頁面實際用到的 class 與元素；只覆寫 BS4 與 BS5 有差異的屬性。
 *   2. 選擇器權重盡量與 BS4 原本相同，讓後載入的 style.css 仍可照舊覆寫。
 *      BS5 規則權重較高時才提高到「剛好蓋過 BS5」的程度（各段註解有寫）。
 *   3. !important 只用在 BS4 本來就是 !important 的工具類別（目前只有 .text-left）。
 *   4. 三個語系目錄（/css、/tw/css、/cn/css）放完全相同的檔案。
 * 詳細說明見 bs5/相容層說明.md
 */

/* =========================================================================
   1. 全域變數（:root）
   BS5 透過 --bs-* 變數決定字型與連結色；改回 BS4 的值。
   ========================================================================= */
:root {
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-link-color: #007bff;
  --bs-link-color-rgb: 0, 123, 255;
  --bs-link-hover-color: #0056b3;
  --bs-link-hover-color-rgb: 0, 86, 179;
  /* BS5 在 prefers-reduced-motion:no-preference 時開啟平滑捲動，
     會讓 robotics.js 的 jQuery animate scrollTop（回到頂端、向下捲）卡頓；BS4 沒有。 */
  scroll-behavior: auto;
}

/* =========================================================================
   2. Reboot（元素預設樣式）
   ========================================================================= */

/* 連結：BS5 預設常駐底線、#0d6efd；BS4 無底線、hover 才有底線，#007bff / #0056b3 */
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}
/* BS4：沒有 href 也沒有 tabindex 的 <a> 不顯示連結色（例：<a class="iconbar">）。
   BS5 改成 :not([class])，有 class 的 <a> 會變藍色加底線。 */
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
  outline: 0;
}

/* 標題：BS5 用 RFS（h1~h4 小於 1200px 時隨視窗縮放）且行高 1.2；
   BS4.0-beta 固定 rem、行高 1.1。h5/h6 兩版相同不需處理。 */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

/* 清單：BS5 把 ul/ol 左內距設成 2rem；BS4 沿用瀏覽器預設 40px */
ol,
ul {
  padding-left: 40px;
}

/* 表格標題格：BS5 改成 text-align:inherit；BS4 靠左 */
th {
  text-align: left;
}

/* label：BS4 下方 .5rem 間距，BS5 拿掉了 */
label {
  margin-bottom: .5rem;
}

/* 勾選框：BS4 reboot 明確設定 padding:0（BS5 拿掉） */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

/* textarea：BS4 有 overflow:auto */
textarea {
  overflow: auto;
}

/* button：BS5 把所有 <button> 圓角設為 0；BS4 未設定（瀏覽器預設）。
   revert = 回到瀏覽器預設，等同 BS4 沒寫這條。.btn 另有自己的圓角，不受影響。 */
button {
  border-radius: revert;
}

/* button 焦點框：BS4 只要 focus（含滑鼠點擊）就顯示焦點框，且權重 (0,1,1) 會蓋過
   style.css 的 .accordion{outline:none}，所以 FAQ 按鈕點擊後原本就有焦點框。
   BS5 用 button:focus:not(:focus-visible){outline:0}（權重 0,2,1）在滑鼠點擊時移除；
   第二個選擇器與它相同，靠「後載入」勝出。 */
button:focus,
button:focus:not(:focus-visible) {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

/* =========================================================================
   3. 版面格線（container / row / col）
   BS5 gutter 1.5rem（左右各 12px）；BS4 為 30px（左右各 15px）。
   ========================================================================= */
.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}
/* BS5 新增 xxl 斷點：≥1400px 時 .container 變 1320px；BS4 維持 1140px。
   （目前頁面只用 container-fluid，此條為保險。） */
@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  --bs-gutter-x: 30px;
  margin-right: -15px;
  margin-left: -15px;
}

/* 欄位共同屬性（BS4 對所有 col-* 一律套用，不分斷點、也不論是否在 .row 內）：
   - position:relative：BS5 拿掉了，內部 absolute 元素（如新聞圖片遮罩）的定位基準會跑掉
   - min-height:1px、padding 15px：同 BS4
   - flex-shrink:1、max-width:none：抵銷 BS5 .row>* 的 flex-shrink:0、max-width:100%
   只列出頁面有用到的欄位 class。 */
.col, .col-4, .col-6, .col-12,
.col-md-4, .col-md-6, .col-md-12,
.col-lg, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  flex-shrink: 1;
  max-width: none;
}

/* 各欄寬：BS5 用 flex:0 0 auto + width；BS4 用 flex-basis + max-width。
   改回 BS4 寫法，style.css 若對欄位另設 width 時結果才會和舊版一樣。 */
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* =========================================================================
   4. BS5 已移除的 class（頁面仍在用，改由此處定義）
   ========================================================================= */

/* 表單排版（contact.php 三語系） */
.form-group {
  margin-bottom: 1rem;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* 文字對齊（BS4 原本就是 !important 工具類別，保留才能和舊版一樣蓋過 style.css） */
.text-left {
  text-align: left !important;
}

/* 螢幕閱讀器專用文字（輪播箭頭的 Previous/Next、分頁的 (current) 等），
   BS5 改名 .visually-hidden；沒定義會直接顯示在畫面上。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}

/* 影片 16:9 容器（tw/cn product2、tw/news_detail_005），BS5 改名 .ratio */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive::before {
  display: block;
  content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

/* 標籤（新聞列表 NEWS 標籤）：BS5 內距 .35em .65em、圓角 .375rem；BS4 .25em .4em、.25rem */
.badge {
  padding: .25em .4em;
  font-size: 75%;
  font-weight: bold;
  border-radius: .25rem;
}
.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

/* =========================================================================
   5. 按鈕 .btn / .btn-primary
   BS5 的 .btn 用 --bs-btn-* 變數驅動（含 :hover/:active/:focus-visible 狀態），
   所以以「改變數」為主，style.css 直接寫的屬性仍可照舊覆寫。
   ========================================================================= */
.btn {
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: .25rem;
  /* BS4 的 .btn 不設文字色、底色（沿用父層）；currentcolor 用在 color 屬性時等同 inherit */
  --bs-btn-color: currentcolor;
  --bs-btn-hover-color: currentcolor;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: currentcolor;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(0, 123, 255, .25);
  white-space: nowrap;           /* BS5 拿掉了，按鈕文字可能折行 */
  transition: all .15s ease-in-out;
}
/* 游標：BS4 的按鈕沒有手指游標（瀏覽器預設）；BS5 .btn 與 button:not(:disabled) 都設成 pointer */
.btn:not(:disabled) {
  cursor: revert;
}
/* BS4 的 btn 在 focus（含滑鼠點擊）時就顯示 3px 光暈、無外框；BS5 只在鍵盤 focus 時顯示 */
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .25);
}
/* 第 2 節的 button:focus:not(:focus-visible) 權重 (0,2,1) 會替 .btn 加回外框，這裡用 (0,3,0) 取消 */
.btn:focus:not(:focus-visible) {
  outline: 0;
}
/* BS5 的 .btn 只寫 text-decoration:none (0,1,0)，會輸給第 2 節的 a:hover (0,1,1)；同 BS4 補上 */
.btn:hover,
.btn:focus {
  text-decoration: none;
}
/* BS5 鍵盤 focus 時會套用 hover 配色；BS4 focus 不改配色 */
.btn:focus-visible {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
/* 重新宣告 hover，讓「滑鼠移上＋鍵盤 focus」時仍以 hover 配色為準（同 BS4） */
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #007bff;
  --bs-btn-border-color: #007bff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0069d9;
  --bs-btn-hover-border-color: #0062cc;
  --bs-btn-focus-shadow-rgb: 0, 123, 255;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0069d9;
  --bs-btn-active-border-color: #0062cc;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #007bff;
  --bs-btn-disabled-border-color: #007bff;
}
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
}

/* 站點特定：BS5 的按下狀態選擇器 .btn:first-child:active 等權重為 (0,3,0)，
   會蓋過 style.css 的 .contact_block form .form-group button (0,2,2) 與
   .bottom_contact .row button (0,2,1)；BS4 的 .btn-primary:active 只有 (0,2,0) 蓋不過。
   這裡把按下時的配色變數設成與 style.css 平時配色相同，按下時才不會閃成 #0069d9。
   數值取自三語系 style.css（三份相同）。 */
.contact_block form .form-group button {
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1563a0;
  --bs-btn-active-border-color: #1563a0;
}
.bottom_contact .row button {
  --bs-btn-active-bg: #09f;
}

/* =========================================================================
   6. 表單元件
   ========================================================================= */

/* 輸入框（BS4.0-beta 的值） */
.form-control {
  padding: .5rem .75rem;
  line-height: 1.25;
  color: #495057;
  -webkit-appearance: revert;
  -moz-appearance: revert;
  appearance: revert;            /* BS5 設 none；BS4 未設定（瀏覽器預設） */
  background-color: #fff;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .25rem;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
  box-shadow: none;              /* BS4.0-beta 的 form-control focus 沒有光暈 */
}
.form-control::placeholder {
  color: #868e96;
  opacity: 1;
}
textarea.form-control {
  min-height: 0;                 /* BS5 新增的最小高度 */
}

/* 勾選框（newsletter.php）：BS5 改成自繪方塊；BS4 為瀏覽器原生勾選框、絕對定位 */
.form-check {
  position: relative;
  display: block;
  min-height: 0;
  padding-left: 0;
  margin-bottom: .5rem;
}
.form-check-label {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.form-check-input {
  position: absolute;
  width: revert;
  height: revert;
  margin-top: .25rem;
  margin-left: -1.25rem;
  vertical-align: revert;
  -webkit-appearance: revert;
  -moz-appearance: revert;
  appearance: revert;
  background-color: revert;
  background-image: none;
  border: revert;
}
.form-check .form-check-input {
  float: none;
  margin-left: -1.25rem;
}
.form-check-input[type=checkbox],
.form-check-input[type=radio] {
  border-radius: revert;
}
.form-check-input:focus {
  border-color: revert;
  outline: revert;
  box-shadow: none;
}
.form-check-input:checked {
  background-color: revert;
  border-color: revert;
}
.form-check-input:active {
  filter: none;
}

/* =========================================================================
   7. 分頁（新聞列表）
   ========================================================================= */
.pagination {
  --bs-pagination-padding-x: .75rem;
  --bs-pagination-padding-y: .5rem;
  --bs-pagination-color: #007bff;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: #ddd;
  --bs-pagination-border-radius: .25rem;
  --bs-pagination-hover-color: #0056b3;
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #ddd;
  --bs-pagination-focus-color: #0056b3;
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #007bff;
  --bs-pagination-active-border-color: #007bff;
  --bs-pagination-disabled-color: #868e96;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #ddd;
}
.page-link {
  font-size: inherit;            /* BS4 不設字級（沿用父層），BS5 固定 1rem */
  line-height: 1.25;             /* BS5 沒設（變成 1.5） */
  transition: none;              /* BS4 沒有顏色轉場 */
}
.page-link:hover,
.page-link:focus {
  z-index: auto;                 /* BS5 hover/focus 會提高疊放層級 */
}
.page-link:focus {
  outline: revert;               /* BS5 設 outline:0；BS4 用瀏覽器預設焦點框 */
}
/* BS5 只在 .page-link (0,1,0) 寫 text-decoration:none，會輸給第 2 節的 a:hover (0,1,1)；
   BS4 有 .page-link:hover/:focus 的 none */
.page-link:hover,
.page-link:focus {
  text-decoration: none;
}
.page-item.active .page-link {
  z-index: 2;
}

/* =========================================================================
   8. 表格（advantage、uavperipheral、link/product_content、tw/cn product2）
   BS5 的格子會：底色白、字色 #000、用 inset box-shadow 疊條紋、
   列(tr)有上下框線。全部改回 BS4：格子透明、沿用字色、條紋畫在 tr 上。
   BS5 選擇器 .table>:not(caption)>*>* 權重 (0,1,1)，與 BS4 的 .table td 相同，靠後載入勝出。
   ========================================================================= */
.table {
  max-width: 100%;
  background-color: transparent;
}
.table th,
.table td {
  padding: .75rem;
  vertical-align: top;
  color: inherit;
  background-color: transparent;
  border-top: 1px solid #e9ecef;
  border-bottom-width: 0;
  box-shadow: none;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e9ecef;
}
.table-sm th,
.table-sm td {
  padding: .3rem;
}
.table-bordered {
  border: 1px solid #e9ecef;
}
.table-bordered th,
.table-bordered td {
  border: 1px solid #e9ecef;
}
.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}
/* BS5 在 tr 加上下框線（與 BS5 選擇器相同，後載入勝出） */
.table-bordered > :not(caption) > * {
  border-width: 0;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .05);
}
/* BS4.0-beta 的 .table-responsive 只在 <992px 才可橫向捲動；BS5 任何寬度都會 */
@media (min-width: 992px) {
  .table-responsive {
    overflow-x: visible;
  }
}

/* =========================================================================
   9. 輪播（首頁三語系）
   現況（BS4.0-beta CSS + style.css）：style.css 自訂了淡入淡出，
   舊張與新張同時以 opacity 2s linear 交叉淡化，無位移、無 z-index。
   BS5 JS 改用 .carousel-item-start / -end（BS4 是 -left / -right），
   style.css 的 -left/-right 規則已失效，以下用新 class 重建同樣效果。
   ========================================================================= */

/* 版面：BS5 用 float + margin-right:-100% 疊放；BS4 是把進場那張設 absolute。 */
.carousel-item {
  float: none;
  margin-right: 0;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  transition: transform .6s ease;
}
.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
}

/* BS5 fade 會加 z-index:1/0；BS4 沒有，維持 DOM 順序疊放。
   權重 (0,4,0) 以蓋過 BS5 (0,3,0)。 */
.carousel-fade .carousel-inner .carousel-item.active {
  z-index: auto;
}
/* 進場那張：淡入到 1。
   需蓋過 style.css 的 .carousel-fade .carousel-inner .carousel-item{opacity:0} (0,3,0)，
   所以權重 (0,4,0)；transition 沿用 style.css 的 opacity 2s linear。 */
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-end {
  z-index: auto;
  opacity: 1;
}
/* 退場那張（仍帶 .active）：淡出到 0。
   需蓋過 style.css 的 .carousel-fade .carousel-inner .active{opacity:1} (0,3,0)
   與 BS5 的 .carousel-fade .active.carousel-item-start{transition:opacity 0s .6s} (0,3,0)。
   BS5 JS 以「目前 active 張」的 transition-duration 計算換張完成時間，
   這裡設 2s 才會和 style.css 的 2 秒節奏一致（若 style.css 改秒數，這裡要同步改）。 */
.carousel-fade .carousel-inner .active.carousel-item-start,
.carousel-fade .carousel-inner .active.carousel-item-end {
  z-index: auto;
  opacity: 0;
  transition: opacity 2s linear;
}

/* 左右箭頭：BS5 有 opacity 轉場與 z-index:1；BS4 兩者皆無（hover 時立即變化、依 DOM 順序疊放）。
   英文版 style.css 另設 z-index:99（後載入，照舊生效）；繁中／簡中版 style.css 沒設，維持 auto。 */
.carousel-control-prev,
.carousel-control-next {
  z-index: auto;
  transition: none;
}

/* 指示點容器：BS4 bottom 10px、z-index 15、list-style:none（<ol> 不顯示編號）。
   BS5 為 bottom 0、z-index 2、無 list-style。下方 margin 兩版都是 1rem。 */
.carousel-indicators {
  bottom: 10px;
  z-index: 15;
  list-style: none;
}
/* 指示點：BS5 的 .carousel-indicators [data-bs-target] 權重 (0,2,0)，
   會蓋掉 style.css 的 .carousel-indicators li (0,1,1)（8px 圓點）變成 30x3px 長條、
   上下 10px 透明框、opacity .5。這裡用同權重、後載入的規則還原成現在的樣子；
   寬高、左右間距、底色取自三語系 style.css（三份相同），選中色由 style.css 的
   .carousel-indicators li.active (0,2,1) 照舊提供。 */
.carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  position: relative;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  margin-left: 4px;
  cursor: revert;
  background-color: rgba(33, 33, 33, .6);
  border: 0;
  opacity: 1;
  transition: none;
}
/* BS4 以上下各 10px 的偽元素擴大點擊範圍 */
.carousel-indicators li::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}
.carousel-indicators li::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}