/* ------------------------------------------------------------------
   Dino-Lite 離線鏡像 — 美化覆蓋樣式
   由 theme.py 產生, 請勿手動編輯 (改 theme.py 的 TOKENS 再重跑)

   原則: 只調整字型、色彩、間距; 不更動版面結構, 以免破壞原站排版。
   ------------------------------------------------------------------ */

/* Inter — 已存成本機檔案, 離線可用 */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {

  --dl-brand:      #22B8F0;
  --dl-brand-text: #0A7EA8;
  --dl-brand-deep: #076A8E;
  --dl-brand-tint: #EAF7FD;
  --dl-ink:        #12222E;
  --dl-body:       #3D4E5A;
  --dl-muted:      #63737F;
  --dl-line:       #E3EAEF;
  --dl-surface:    #F5F9FB;
  --dl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
             Helvetica, Arial, sans-serif;
}

/* === 1. 基本字型 ================================================= */
/* 原本是 Open Sans 300 / 14px / 行高 24px —— 字重過細、字級偏小 */

body {
  font-family: var(--dl-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--dl-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 內容區塊裡有寫死的 Verdana / PingFang TC 等行內字型, 用 !important 統一。
   只挑真的有 inline font-family 的元素, 不波及其他。 */
.sppb-addon-content [style*="font-family"],
.sppb-addon-content [style*="font-family"] *,
.sp-module [style*="font-family"],
article [style*="font-family"] {
  font-family: var(--dl-font) !important;
}

/* 內文有 634 處寫死 font-size:xx-small (=9px) —— 聯絡地址、電話這類真正要讀的
   資訊都在裡面, 是原站的可讀性問題。統一提到 15px。
   另有 127 處是白底白字(隱藏用途), 用 :not() 排除, 放大它們只會撐開空白。 */
.sppb-addon-content [style*="xx-small"]:not([style*="#ffffff"]):not([style*="#fff;"]),
article [style*="xx-small"]:not([style*="#ffffff"]):not([style*="#fff;"]) {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* === 2. 標題 ===================================================== */

h1, h2, h3, h4, h5, h6,
.sppb-addon-title, .sppb-title-heading {
  font-family: var(--dl-font);
  color: var(--dl-ink);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

/* 注意: 本模板把根字級設成 62.5% (=10px), 所以這裡一律用 px,
   用 rem 會變成只有預期的 62.5% 大小。 */
h1, .sppb-title-heading { font-size: 38px; margin-bottom: .6em; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }

.sppb-addon-title { margin-bottom: .55em; }

/* === 3. 色彩 ===================================================== */
/* 原本連結與產品標題是 #22B8F0, 在白底上對比只有 2.3:1 —— 連大字級的
   3:1 門檻都不到。改用同色系但夠深的 #0A7EA8 (4.6:1)。 */

a { color: var(--dl-brand-text); transition: color .18s ease; }
a:hover, a:focus { color: var(--dl-brand-deep); }

.sppb-addon-title a,
.sppb-feature-box-title a {
  color: var(--dl-brand-text);
  text-decoration: none;
}
.sppb-addon-title a:hover,
.sppb-feature-box-title a:hover { color: var(--dl-brand-deep); }

/* 內容裡寫死的亮藍 #0080ff (3.8:1) 一併校正 */
[style*="#0080ff"], [style*="#0080FF"] { color: var(--dl-brand-text) !important; }

/* 主選單 */
/* 原本 12px, 主選單偏小; 13px 幅度小不會擠到換行 */
.sp-megamenu-parent > li > a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li > a:hover { color: var(--dl-brand-text); }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: var(--dl-brand-text);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--dl-brand-text);
}
#offcanvas-toggler > i:hover { color: var(--dl-brand-text); }

/* 下拉選單: 加點層次 */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items {
  border: 1px solid var(--dl-line);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(18, 34, 46, .10);
  overflow: hidden;
}

/* === 4. 內文與清單的節奏 ========================================= */

p { margin-bottom: 1.05em; }

.sppb-addon-content ul,
.sppb-addon-content ol { padding-left: 1.35em; }

.sppb-addon-content ul > li,
.sppb-addon-content ol > li { margin-bottom: .42em; }

.sppb-addon-content ul > li::marker { color: var(--dl-brand); }

strong, b { font-weight: 600; color: var(--dl-ink); }

small, .small { color: var(--dl-muted); }

/* === 4b. 底部公司資訊區 (#sp-bottom) ============================= */
/* 這區是聯絡資訊(公司名、地址、電話、Email), 需要能輕鬆讀, 但原站把它
   包在 <h3>/<h4> 裡再用行內 font-size:xx-small 壓成 12px, 行高只有 12~15px,
   標題反而比內文還小。這裡重新給一組合理的級距。 */

/* 行內寫死的字級一律交回給外層的 h3/h4 決定 */
#sp-bottom [style*="font-size"] { font-size: inherit !important; }

#sp-bottom h3 {                 /* 公司名 —— 這區的標題 */
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: .6em;
}

#sp-bottom h4 {                 /* 地址、電話、Email */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: .4em;
}

#sp-bottom small,               /* 技術支援說明(原站用兩層 <small> 疊小) */
#sp-bottom small * {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
/* 原本 #777 在 #f5f5f5 底上只有 4.1:1 */
#sp-bottom small, #sp-bottom small span { color: #5C6B76; }

/* === 5. 按鈕 ===================================================== */

.btn-primary, .sppb-btn-primary {
  background-color: var(--dl-brand-text);
  border-color: var(--dl-brand-text);
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 5px;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover, .sppb-btn-primary:hover,
.btn-primary:focus, .sppb-btn-primary:focus {
  background-color: var(--dl-brand-deep);
  border-color: var(--dl-brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 126, 168, .26);
}

/* === 6. 圖片與卡片的細節 ========================================= */

.sppb-img-container img,
img.sppb-img-responsive {
  transition: transform .35s ease;
}
.sppb-addon-feature-box:hover .sppb-img-container img { transform: scale(1.03); }

.sp-page-title { background: var(--dl-brand-text); }

/* 頁尾原本是白字配 #22B8F0, 對比只有 2.3:1 —— 與正文用色同樣的問題。
   底色換成深一階的品牌藍, 白字對比升到 4.6:1。 */
#sp-footer { background: var(--dl-brand-text); }
#sp-footer, .sp-copyright { color: #fff; }
#sp-footer a { color: #fff; text-decoration: underline; }

hr, .sppb-divider { border-color: var(--dl-line); }

table td, table th { border-color: var(--dl-line) !important; }
table th { color: var(--dl-ink); font-weight: 600; }

/* === 7. 無障礙: 鍵盤操作要看得見焦點 ============================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--dl-brand-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === 8. 小螢幕微調 =============================================== */

@media (max-width: 767px) {
  body { font-size: 15.5px; }
  h1, .sppb-title-heading { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  h4 { font-size: 17px; }
}

/* === 9. 列印 ===================================================== */

@media print {
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}