@charset "utf-8";
/* ============================================================================
   rwd.css — 電腦版轉 RWD 用的附加樣式表
   建立日期: 2026-10-14

   設計原則:
   1. style.css 一行都不改。本檔案只「追加」規則,所有內容都包在 @media 裡,
      因此在斷點以上完全不生效,桌機版是可證明的零改動。
   2. 本檔案只有在 web.config 的 appSettings rwd="1" 時才會被載入
      (由 App_Code/Utility.vb 的 RwdHead() 輸出),所以可以一鍵關閉。
   3. 部分規則必須用 !important —— 全站有 21 處 inline style 直接寫在
      .page 的 div 上(min-width:1000px / width:1000px / max-width:100vw,
      分散 14 個檔案),inline 宣告的優先權高於外部樣式表,只有作者樣式表的
      !important 壓得過它們。這是唯一不必手改 14 個檔案的辦法。

   斷點取自實際版面量測,不是通用預設值:
     1199px  .page 的固定寬度 1200px 已經放不進視窗 -> 改為流動
     1119px  頁首 8 個選單連結需要約 1120px -> 改用漢堡選單
      900px  3/4 欄排版(.type4 33%、#relative .block 20%、.service 25vw)-> 2 欄
      600px  全部改單欄;表格、.type1 的 70/30 改為上下堆疊
      400px  小尺寸手機:縮小留白與字級
   ============================================================================ */


/* ===== 1199px:容器改為流動,並壓過 21 處 inline 的固定寬度 ===== */
@media (max-width:1199px){
  /* style.css 第 9 行把 #header/#footer/#defaultimg/.content 設成
     float:left 搭配 min-width:100%。浮動元素是 shrink-to-fit,所以它會
     「撐大去包住」過寬的內容(例如 480px 的 logo),而不是限制它 ——
     結果 .page 的 max-width:100% 是以被撐大的寬度為基準,仍然溢出。
     因此必須先把這幾個外層容器本身封頂,.page 的百分比才有正確的基準。 */
  #header, #footer, #defaultimg, .content{
    max-width:100% !important;
    box-sizing:border-box;
  }
  .page{
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding-left:3%;
    padding-right:3%;
    box-sizing:border-box;
  }
  /* 保險:logo 外框以視窗寬度為基準封頂,不受上層 shrink-to-fit 影響 */
  #logowrap{max-width:100% !important;}
  /* 圖片不得撐破容器。只針對版型區塊,避免影響固定尺寸的小圖示 */
  #header img, #footer img, .content img, .innerhtml img,
  .type1 img, .type2 img, .type3 img, .type4 img{
    max-width:100%;
    height:auto;
  }
  /* slick 輪播的左右箭頭是由 JS 以 inline style 建立,放在輪播「外側」
     (left:-55px / right:-50px)。桌機版 .page 兩側有留白所以看不出來,
     但 .page 一旦改成流動,箭頭就會戳出視窗造成水平溢出。
     inline style 只有 !important 壓得過。影響 Product_detail / Product2_detail。
     注意:本站是用自訂的 prevArrow/nextArrow 字串,slick 只會加上 .slick-arrow,
     不會加 .slick-prev / .slick-next,所以必須用 first-child / last-child 來分辨。 */
  .slick-slider > .slick-arrow:first-child{left:2px !important; right:auto !important;}
  .slick-slider > .slick-arrow:last-child{right:2px !important; left:auto !important;}
  .slick-slider{position:relative;}

  /* 內嵌 iframe 也要封頂。about.aspx 的 YouTube 嵌入是 width="1000",
     不處理的話在 375px 手機上會造成 644px 水平溢出。
     支援 aspect-ratio 的瀏覽器維持 16:9;不支援的只會上下留黑邊,但不會溢出。 */
  .content iframe, .innerhtml iframe{max-width:100% !important;}
  @supports (aspect-ratio: 16 / 9){
    .content iframe[src*="youtube"]{width:100% !important; height:auto !important; aspect-ratio:16 / 9;}
  }
  /* 伺服器端程式輸出的固定寬度表格(column.aspx.vb / Product.aspx.vb 的
     <table width='398'> 卡片)。HTML width 屬性的優先權低於任何 CSS 規則,
     所以這裡不需要 !important */
  .content table{
    width:100%;
    max-width:100%;
  }
}


/* ===== 1119px:頁首改漢堡選單 ===== */
@media (max-width:1119px){
  /* 桌機橫向選單收起。
     注意:#pagetopmenu 是 runat="server" 且位於 UC/TopMenu.ascx 這個命名容器內,
     所以實際 render 出來的 id 是 TopMenu_pagetopmenu(TopMenu_ad.ascx 則是
     TopMenu_ad_pagetopmenu)。用 id 結尾比對才能同時命中兩者,而且不必改 markup。 */
  #header div[id$="pagetopmenu"]{
    display:none;
  }
  /* 漢堡按鈕(在 1120px 以上是 display:none) */
  #navtoggle{
    display:block !important;
    float:right;
    width:44px;
    height:44px;
    margin:18px 0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    position:relative;
    z-index:102;
  }
  #navtoggle span,
  #navtoggle span:before,
  #navtoggle span:after{
    content:"";
    position:absolute;
    left:9px;
    width:26px;
    height:3px;
    background:#fff;
    display:block;
  }
  #navtoggle span{top:21px;}
  #navtoggle span:before{top:-8px; left:0;}
  #navtoggle span:after{top:8px; left:0;}

  /* 抽屜選單。結構與 CSS 沿用 UC/TopMenu_m.ascx + mobile/style.css 既有的做法 */
  #nav{
    position:fixed;
    z-index:1001;
    top:0;
    left:0;
    width:72%;
    max-width:320px;
    height:100vh;
    overflow-y:auto;
    background:#f6f6f6;
    color:#666;
    font-size:17px;
    padding:0;
    display:none;
    box-shadow:2px 0 12px rgba(0,0,0,0.35);
  }
  #nav h4{
    width:100%;
    display:block;
    border-bottom:2px solid #ccc;
    cursor:pointer;
    margin:0;
    padding:22px 0 22px 5%;
    font-size:17px;
    box-sizing:border-box;
  }
  #nav ul{list-style:none; margin:0; padding:0;}
  #nav ul li{display:block; width:100%; height:auto;}
  #nav ul li a{
    color:#666;
    display:block;
    width:100%;
    line-height:300%;      /* 約 50px,符合可點擊的最小尺寸 */
    border-bottom:1px solid #ddd;
    padding:0 0 0 5%;
    box-sizing:border-box;
    float:none;            /* 壓過 style.css 的 #header a{float:right} */
    border-top:0;
  }
  #nav ul li ul li a{
    padding-left:12%;
    border-bottom:1px solid #eee;
    background:#fbfbfb;
    font-size:15px;
  }
  /* 點抽屜以外的區域關閉 */
  #navmask{
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.35);
    z-index:1000;
  }

  /* 子選單橫條(部分頁面的 #submenu 是 runat="server",一併用結尾比對) */
  #submenu a, div[id$="submenu"] a{min-width:50%;}
}


/* ===== 900px:多欄排版改 2 欄 ===== */
@media (max-width:900px){
  /* 頁面直接寫在 markup style 屬性上的多欄排版(例如 column.aspx 的 70% / 26% 分欄)。
     inline 寬度壓得過外部樣式表,所以這裡必須用 !important。
     26% 在 375px 的手機上只剩 88px —— 一行放不到兩個中文字。
     只限定在 .content / .contentarea 之內,才不會動到頁首的 #logowrap
     (它同樣是 inline 的 float:left,但必須保持原樣)。 */
  .content [style*="float:left"], .content [style*="float:right"],
  .contentarea [style*="float:left"], .contentarea [style*="float:right"]{
    width:100% !important;
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #relative .block{width:50%;}
  .type3{width:100%;}
  .type4{width:50%;}
  .service{width:50% !important; min-width:0 !important;}
  .service img{height:auto !important; min-width:100%; max-width:100%;}
  #footer .block li{width:56px; height:56px;}
}


/* ===== 600px:全部單欄 ===== */
@media (max-width:600px){
  .page{padding-left:4%; padding-right:4%;}

  #relative .block{width:100%;}
  .type4{width:100%;}
  .service{width:100% !important;}

  /* .type1 的 70/30 兩欄改上下堆疊 */
  .type1 .imgframe, .type1 .wframe,
  .type2 .imgframe, .type2 .wframe{width:100%;}

  #submenu a, div[id$="submenu"] a{min-width:100%;}

  /* 版面用表格改為堆疊。全站 38 個頁面的 <th> 數為 0,
     也就是沒有任何真正的資料表格,所以一律堆疊是安全的 */
  .content table, .content tbody, .content tr, .content td,
  #footer table, #footer tbody, #footer tr, #footer td{
    display:block;
    width:100% !important;
    max-width:100%;
    height:auto !important;
    box-sizing:border-box;
  }
  .content td, #footer td{padding-left:0 !important;}

  h1{font-size:20px;}

  /* 表單欄位:16px 以下 iOS 會自動放大畫面,並確保有足夠的點擊高度 */
  .serviceform, input[type="text"], input[type="email"], input[type="tel"], textarea{
    width:100% !important;
    font-size:16px;
    min-height:44px;
    box-sizing:border-box;
  }
  input[type="checkbox"]{min-width:22px; min-height:22px;}

  /* 右下浮動按鈕:手機上收成一顆,點了才往上展開三個聯絡方式,
     避免 position:fixed 的按鈕長期壓在正文上。
     收合鈕的隱藏寫在 markup 的 inline style,所以關掉 rwd 開關時桌機不會看到它;
     三個連結則是預設顯示,只有在這個斷點內才收起來。 */
  #floatlinks img{width:48px !important; height:auto;}
  #floatlinks{display:none; margin-bottom:10px; text-align:right;}
  #floatbtn.rwdopen #floatlinks{display:block;}
  #floattoggle{
    display:block !important;
    width:56px;
    height:56px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#1e2855;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
    margin-left:auto;
  }
  #floattoggle img{width:34px !important; height:auto; vertical-align:middle;}
  #floattoggle span{display:none;}
  #floatbtn.rwdopen #floattoggle img{display:none;}
  #floatbtn.rwdopen #floattoggle span{display:inline; color:#fff; font-size:24px; line-height:56px;}
}


/* ===== 400px:小尺寸手機 ===== */
@media (max-width:400px){
  .page{padding-left:5%; padding-right:5%;}
  body{font-size:14px;}
  h1{font-size:18px;}
  #nav{width:84%;}
}


/* ===== 僅手機顯示 / 僅桌機顯示 的小工具 =====
   注意:隱藏是寫在 markup 的 inline style 上,不是寫在這裡。
   因為本檔案在 rwd="0" 時不會被載入,若把 display:none 放在這裡,
   關閉開關時漢堡鈕與抽屜選單就會整個露出來。這裡只負責「顯示」,
   而要壓過 inline 的 display:none 必須用 !important。 */
@media (max-width:1119px){
  .rwd-mobile-only{display:inline-block !important;}
  .rwd-desktop-only{display:none !important;}
}