@charset "UTF-8";
/*! ws-mobile.css v20261011m — 文星官網「手機版獨立風格」層
 * 生效範圍：只在 @media (max-width:760px) 內（桌機 1280 版面完全不受影響）。
 *   唯一例外是檔尾的 @view-transition（跨頁淡入淡出，屬導覽行為、不影響任何版面；不支援的瀏覽器忽略）。
 * 插入位置：header.html 的 wenxing.css 那一行之後（較後載入，同權重時覆蓋舊規則）。
 * 搭配 ws-motion.js：其中「手機排版輔助」會量測並替「被擠窄的多欄區塊」加 .wsm-stack、
 *   替可橫向滑動的寬表格加 .wsm-tscroll（顯示「左右滑動」提示）。
 * 品牌色：深藍 #0b2a4a／#16324f、紅 #c41a1f、黃 #f6b500、藍 #0162af（產品卡、夥伴 logo 保留原色，不做灰階）
 */
@media (max-width:760px){
  /* ───────── 0. 設計變數 ───────── */
  :root{
    --wsm-navy:#0b2a4a;--wsm-navy2:#16324f;--wsm-red:#c41a1f;--wsm-yellow:#f6b500;--wsm-blue:#0162af;
    --wsm-ink:#1d2b38;--wsm-muted:#55667a;--wsm-line:#e2e8ef;--wsm-soft:#f4f7fb;
    --wsm-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;
    --wsm-gutter:16px;--wsm-tap:44px;--wsm-radius:12px;
    --wsm-safe-b:env(safe-area-inset-bottom,0px);
    --wsm-h1:clamp(21px,5.9vw,26px);--wsm-h2:clamp(19px,5.3vw,23px);--wsm-h3:clamp(17px,4.6vw,19px);
    --wsm-body:clamp(15px,4.1vw,16.5px);
  }
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:var(--wsm-font);-webkit-tap-highlight-color:rgba(1,98,175,.12)}

  /* ───────── 1. 圖片／影片／內嵌框不超寬 ───────── */
  :where(.width1440,.met-editor,.jieshao_box,section,article) :is(img,video,canvas){max-width:100%;height:auto}
  :where(.width1440,.met-editor,.jieshao_box) iframe{max-width:100%}
  :where(.met-editor,.jieshao_box) pre{white-space:pre;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  :where(.met-editor,.jieshao_box) :is(p,li,td,dd,h2,h3,h4){overflow-wrap:anywhere}

  /* ───────── 2. 字級與行距（內文至少 15px；保留原本較大的字） ───────── */
  :where(.width1440,.met-editor,.jieshao_box,.wsx105,.ws-aiseo) :is(p,li,dd,dt,figcaption,blockquote,td,th):not(#htmllist li,.n_box_left li,.toplist li){font-size:max(15px,1em)!important;line-height:1.75}
  :where(.met-editor,.jieshao_box) :is(p,li){letter-spacing:.01em}

  /* ───────── 3. 產品頁／列表頁共用頁頭（舊模板） ───────── */
  /* 3a. 麵包屑：單行可橫滑，不再佔兩三行 */
  .width1440>.localhost{font-size:14px!important;line-height:1.5!important;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px var(--wsm-gutter)!important;margin:0!important;
    color:var(--wsm-muted);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .width1440>.localhost::-webkit-scrollbar{display:none}
  .width1440>.localhost a{color:var(--wsm-muted)!important;font-size:14px!important}
  /* 3b. 同類別選單（灰框兩欄小字）→ 一列可橫滑的膠囊按鈕 */
  .n_box_left{background:transparent!important;border:0!important;padding:0!important;margin:0 0 6px!important;height:auto!important}
  .n_box_left>ul{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;padding:2px var(--wsm-gutter) 8px!important;margin:0!important;width:auto!important}
  .n_box_left>ul::-webkit-scrollbar{display:none}
  .n_box_left>ul>li{flex:0 0 auto!important;width:auto!important;float:none!important;display:block!important;margin:0!important;scroll-snap-align:start}
  .n_box_left>ul>li>a{display:block!important;height:auto!important}
  .n_box_left>ul>li h2{font-size:15px!important;line-height:42px!important;height:44px!important;font-weight:500;white-space:nowrap;margin:0!important;
    display:block!important;padding:0 16px!important;box-sizing:border-box;border:1px solid var(--wsm-line);
    border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(11,42,74,.06)}
  /* 3c. 產品標題區 */
  .pro_right_box{padding:0!important;width:auto!important;float:none!important}
  .jieshao{padding:0 var(--wsm-gutter)!important;width:auto!important}
  .jieshao .about_tit{padding:14px 0 6px!important;border-bottom:0!important}
  .jieshao .about_tit h1{font-size:var(--wsm-h1)!important;line-height:1.35!important;font-weight:700!important;color:var(--wsm-navy)!important;margin:0 0 8px!important}
  .jieshao .about_tit h2{font-size:14px!important;line-height:1.4!important;color:var(--wsm-muted)!important;display:inline-flex;gap:6px;align-items:center;
    background:var(--wsm-soft);border-radius:6px;padding:5px 10px!important;margin:0!important}
  .jieshao .about_tit h2 :is(span,em,b){font-size:15px!important;color:var(--wsm-navy2)!important;font-weight:600}
  .jieshao_left{width:auto!important;float:none!important;padding:0!important}
  .jieshao_left p{font-size:var(--wsm-body)!important;line-height:1.75!important;color:var(--wsm-ink)!important;margin:10px 0 0!important}
  .jieshao_left h3{font-size:var(--wsm-h3)!important;line-height:1.45!important}
  .download_box ul{display:flex;flex-wrap:wrap;gap:8px;padding:0!important}
  .download_box li{width:auto!important;float:none!important;margin:0!important;padding:0!important;background:none!important;list-style:none}
  .download_box ul li::before{display:none!important}
  .download_box li a::before{content:"PDF";font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--wsm-red);color:#fff;border-radius:4px;padding:2px 5px}
  .download_box li a{display:inline-flex!important;align-items:center;gap:6px;min-height:var(--wsm-tap);padding:0 16px!important;border-radius:8px;
    background:var(--wsm-navy);color:#fff!important;font-size:15px!important;font-weight:600;text-decoration:none!important}
  .download_box li a img{filter:brightness(0) invert(1);height:16px;width:auto}
  .case_show_box{width:auto!important;float:none!important;margin:14px 0 0!important}
  .jieshao_box{padding:0!important;width:auto!important}

  /* ───────── 4. 分類列表頁：舊「表格式」產品清單 → 單欄產品卡 ───────── */
  html body #many-app{width:auto!important;overflow:visible!important;padding:0 var(--wsm-gutter)!important;margin:0!important}
  html body #many-app .toplist{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center;gap:8px;width:auto!important;height:auto!important;background:transparent!important;
    padding:6px 0 12px!important;margin:0!important;border:0!important}
  html body #many-app .toplist>li{width:auto!important;min-width:0!important;text-align:left!important;flex:0 0 auto!important;list-style:none;background:transparent!important;padding:0!important;margin:0!important;height:auto!important;border:0!important}
  html body #many-app .toplist>li:not(:has(a)){display:none!important}
  html body #many-app .toplist>li>a{display:inline-flex!important;align-items:center;gap:4px;min-height:var(--wsm-tap);padding:0 14px;border-radius:999px;
    border:1px solid var(--wsm-line);background:#fff;color:var(--wsm-navy)!important;font-size:14px!important;line-height:1.2;text-decoration:none!important}
  html body #many-app .toplist>li>a br{display:none}
  html body #many-app .toplist>li::before{content:none!important}
  html body #many-app .toplist>li>a::after{content:"\21C5";font-size:13px;color:var(--wsm-blue)}
  html body #many-app .toplist>li>a span{font-size:14px!important;color:inherit!important}
  html body #htmllist{width:auto!important;overflow:visible!important;display:grid;gap:12px;padding:0 0 8px}
  html body #htmllist>ul{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px;width:auto!important;min-width:0!important;height:auto!important;
    margin:0!important;padding:14px!important;background:#fff;border:1px solid var(--wsm-line);border-left:4px solid var(--wsm-blue);
    border-radius:var(--wsm-radius);box-shadow:0 2px 10px rgba(11,42,74,.06)}
  html body #htmllist>ul>li{width:auto!important;min-width:0!important;max-width:none!important;flex:none!important;float:none!important;height:auto!important;
    padding:0!important;margin:0!important;border:0!important;background:transparent!important;list-style:none;
    font-size:15px!important;line-height:1.6!important;color:var(--wsm-ink);text-align:left!important}
  html body #htmllist>ul>li *{font-size:inherit!important}
  /* 第一格＝品名＋縮圖：圖片移到卡片上方整寬展示，品名在下方整寬（文字欄不被擠窄） */
  html body #htmllist>ul>li:first-child{position:relative;padding-top:168px!important;font-size:17px!important;line-height:1.5!important;font-weight:700;color:var(--wsm-navy)!important}
  html body #htmllist>ul>li:first-child>a{position:absolute;left:0;right:0;top:0;height:156px;display:flex;align-items:center;justify-content:center;
    background:var(--wsm-soft);border-radius:10px;overflow:hidden}
  html body #htmllist>ul>li:first-child>a img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;margin:0!important;object-fit:contain}
  html body #htmllist>ul>li:first-child br{display:none}
  /* 其餘欄位：前面加欄位名稱小標（欄位名含換行標記者不加） */
  html body #htmllist>ul>li:nth-child(n+2)::before{content:attr(data-field-name);display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--wsm-blue);margin-bottom:1px}
  html body #htmllist>ul>li[data-field-name*="<br>"]::before{content:none}
  html body #htmllist>ul>li:nth-child(2){font-weight:600;color:var(--wsm-navy2)!important}
  html body #htmllist>ul>li:empty{display:none!important}
  html body #htmllist>ul>.list_a{display:none!important}
  /* 整張卡片可點：品名連結延伸成整卡熱區 */
  html body #htmllist>ul{position:relative}

  /* ───────── 5. 表格：兩欄規格表改上下排；三欄以上可左右滑動並提示 ───────── */
  :where(.met-editor,.jieshao_box,.width1440) table:not(:has(tr>:nth-child(3))){display:block;width:100%!important;max-width:100%;border:0!important}
  :where(.met-editor,.jieshao_box,.width1440) table:not(:has(tr>:nth-child(3))) :is(tbody,thead,tr){display:block;width:auto!important}
  :where(.met-editor,.jieshao_box,.width1440) table:not(:has(tr>:nth-child(3))) tr{border-bottom:1px solid var(--wsm-line);padding:10px 0}
  :where(.met-editor,.jieshao_box,.width1440) table:not(:has(tr>:nth-child(3))) :is(td,th){display:block;width:auto!important;border:0!important;padding:2px 2px!important;text-align:left!important;height:auto!important}
  :where(.met-editor,.jieshao_box,.width1440) table:not(:has(tr>:nth-child(3))) tr>:first-child:not(:only-child){font-weight:700;color:var(--wsm-navy);font-size:15px!important;background:transparent!important}
  :where(.met-editor,.jieshao_box,.width1440) table:has(tr>:nth-child(3)){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;width:auto!important}
  :where(.met-editor,.jieshao_box,.width1440) table:has(tr>:nth-child(3)) :is(td,th){min-width:6.5em}
  /* 已有外包層的表格（例：.rfm-tablewrap）：外層負責橫向捲動 */
  :is(.rfm-tablewrap,.table-responsive,[class*="table-wrap"],[class*="tablewrap"],[class*="tbl-wrap"]){max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  :is(.rfm-tablewrap,.table-responsive,[class*="table-wrap"],[class*="tablewrap"],[class*="tbl-wrap"])>table{display:table!important;max-width:none!important;overflow:visible!important}
  /* 「左右滑動」提示（ws-motion.js 量到確實比畫面寬才加 .wsm-tscroll） */
  .wsm-tscroll{position:relative;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/24px 100% no-repeat local,
    linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/24px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,rgba(11,42,74,.18),transparent) right/10px 100% no-repeat scroll}
  .wsm-wcell{min-width:240px!important}
  .wsm-thint{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--wsm-blue);margin:6px 0 4px;font-weight:600}
  .wsm-thint::after{content:"\2192";font-size:15px}
  .wsm-thint::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;animation:wsm-nudge 1.6s ease-in-out 3}
  @keyframes wsm-nudge{50%{transform:translateX(6px)}}

  /* ───────── 6. 內嵌 style 的橫排區塊：允許換行、子項目不擠壓 ───────── */
  :where(.width1440,section,article) :is([style*="display:flex"],[style*="display: flex"],[style*="display:inline-flex"]){flex-wrap:wrap!important}
  :where(.width1440,section,article) :is([style*="display:flex"],[style*="display: flex"])>*{min-width:0;max-width:100%}
  :where(.width1440,section,article) [style*="width:"]:not(img,svg,iframe,video,canvas,[style*="max-width"]){max-width:100%!important}
  /* ws-motion.js 量測到「文字欄 < 240px 的並排區塊」→ 單欄 */
  .wsm-stack.wsm-stack-g{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
  .wsm-stack.wsm-stack-g>*{grid-column:auto!important;grid-row:auto!important}
  .wsm-stack.wsm-stack-f{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important}
  .wsm-stack.wsm-stack-f>*{width:auto!important;max-width:100%!important;flex:0 0 auto!important;margin-left:0!important;margin-right:0!important}
  /* 改單欄後圖片不必撐滿整寬：限制高度、置中，避免一張圖佔滿一整個螢幕 */
  .wsm-stack>*>:is(img,picture){max-height:240px!important;width:auto!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;object-fit:contain}
  .wsm-stack>*>:has(>img:only-child){aspect-ratio:auto!important;height:auto!important;max-height:260px;display:flex!important;justify-content:center;align-items:center}
  .wsm-stack>*>:has(>img:only-child)>img{max-height:240px!important;width:auto!important;max-width:100%!important;object-fit:contain}
  .wsm-stack.wsm-stack-b>*{float:none!important;display:block!important;width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  /* 「相關產品」卡（.ws-xsell，內嵌 style 橫排） */
  .ws-xsell{flex-wrap:wrap!important;align-items:stretch!important;gap:12px!important;padding:14px!important}
  .ws-xsell>img{width:100%!important;height:auto!important;max-height:200px!important;aspect-ratio:3/2;object-fit:contain!important}
  .ws-xsell>div{flex:1 1 100%!important;min-width:0!important}
  .ws-xsell>div>div:nth-child(2){font-size:18px!important;line-height:1.4!important}
  .ws-xsell>a{flex:1 1 100%!important;display:flex!important;align-items:center;justify-content:center;min-height:48px;text-align:center!important;padding:0 16px!important}

  /* ───────── 7. 按鈕與可點區 ≥ 44px ───────── */
  :where(.width1440,section,article,footer,.footer) :is(button,input[type=submit],input[type=button],a.btn,a[class*="-btn"],a[class*="btn-"],a[class*="cta"],[role=button]):not(.swiper-pagination-bullet,[class*="swiper-button"],.slick-dots *){min-height:var(--wsm-tap)}
  :where(.width1440,section,article) :is(a[class*="-btn"],a[class*="btn-"],a.btn){display:inline-flex;align-items:center;justify-content:center}
  .ws-quick{gap:8px!important}
  .ws-quick>a{min-height:var(--wsm-tap)!important;display:inline-flex!important;align-items:center;padding:0 14px!important;font-size:15px!important;border-radius:999px!important}
  .ws-globe>button{min-height:var(--wsm-tap)!important;min-width:var(--wsm-tap)}
  [class*="wsx"][class*="-btn"]{min-height:48px!important}

  /* ───────── 8. 底部「需要简体中文吗」提示條：精簡成卡片、不擋內容 ───────── */
  .ws-langbar{left:10px!important;right:10px!important;bottom:calc(10px + var(--wsm-safe-b))!important;border-radius:14px;
    padding:8px 8px 8px 16px!important;gap:10px!important;flex-wrap:nowrap!important;justify-content:space-between!important;font-size:15px!important;
    box-shadow:0 10px 30px rgba(11,42,74,.35)!important;max-width:520px;margin:0 auto}
  .ws-langbar>span{flex:1 1 auto;min-width:0;line-height:1.35}
  .ws-langbar a.go{min-height:var(--wsm-tap);display:inline-flex!important;align-items:center;padding:0 14px!important;font-size:15px!important;white-space:nowrap;border-radius:10px!important}
  .ws-langbar button{min-width:var(--wsm-tap);min-height:var(--wsm-tap);display:inline-flex!important;align-items:center;justify-content:center;padding:0!important}
  /* 提示條出現時，頁尾多留空間，最後一段內容不被蓋住 */
  body:has(>.ws-langbar){padding-bottom:calc(76px + var(--wsm-safe-b))!important}

  /* ───────── 9. 首頁 ───────── */
  /* 9a. 推薦產品輪播卡：原本「文字 58% 寬＋圖片絕對定位在右下」→ 手機改上下排，文字整寬、圖片置中 */
  .ws-feat-card{height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;
    grid-template-areas:"badge badge" "h h" "img img" "intro intro" "model btn";align-items:center;padding:18px 18px 16px!important}
  .ws-feat-card .ws-feat-badge{grid-area:badge;justify-self:start;margin-bottom:8px}
  .ws-feat-card .ws-feat-h{grid-area:h;max-width:none!important}
  .ws-feat-card .ws-feat-img{grid-area:img;position:static!important;width:100%!important;height:150px!important;margin:12px 0 10px;object-fit:contain}
  .ws-feat-card .ws-feat-intro{grid-area:intro;max-width:none!important;font-size:15px!important;line-height:1.65!important}
  .ws-feat-card .ws-feat-model{grid-area:model;position:static!important;margin-top:10px;font-size:14px!important}
  .ws-feat-card .ws-feat-btn{grid-area:btn;position:static!important;margin-top:10px;width:var(--wsm-tap)!important;height:var(--wsm-tap)!important}
  .ws-feat-card .ws-intro-src{display:none!important}
  /* 9b. 「推薦產品」標題列：標題與「查看全部」可換行，不把標題擠成三行 */
  .ws-home3-top{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between;gap:4px 12px}
  .ws-home3-top>h2{font-size:var(--wsm-h2)!important;line-height:1.3!important;flex:1 1 auto;min-width:0}
  .ws-home3-top>a{white-space:nowrap;min-height:var(--wsm-tap);display:inline-flex!important;align-items:center}
  /* 9c. 輪播頁碼：12 顆大方塊會擠成兩排 → 細長條一排 */
  .ws-feat .ws-feat-pg{display:flex!important;flex-wrap:nowrap!important;justify-content:center;gap:6px;width:auto!important}
  .ws-feat .ws-feat-pg .swiper-pagination-bullet{width:16px!important;height:6px!important;border-radius:3px!important;margin:0!important;flex:0 0 auto}
  .ws-feat .ws-feat-pg .swiper-pagination-bullet-active{width:28px!important}
  .ws-hero-eyebrow{font-size:13px!important;letter-spacing:.12em}
  .ws-tool-band>span{font-size:14px!important}

  /* ───────── 10. 頁尾：iPhone 底部安全區 ───────── */
  body>footer,body>.footer,body>.foot{padding-bottom:calc(16px + var(--wsm-safe-b))!important}
}

/* 減少動態偏好：取消本檔的提示動畫 */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .wsm-thint::before{animation:none}
}

/* 跨頁淡入淡出（View Transitions：Chrome/Edge 126+、Safari 18.2+；其他瀏覽器自動忽略，不影響版面） */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease}
}