@charset "utf-8";
/* ---------------------------------------------------------------------------
 * RWD 補強樣式
 *
 * 原版是 2009~2012 年的固定寬度 1000px 版面，這個檔案只做「加法」：
 *   - 1025px 以上：只有「商品圖比例框」那兩段會生效，其餘完全不動
 *   - 1024px 以下：解除固定寬度、把左右欄改成上下堆疊、產品類別選單收合
 *   -  767px 以下：主選單收成三條線
 *   -  640px 以下：商品列表一排一個
 *
 * 載入順序必須排在 Theme2 / Theme3 的樣式之後（header.php 已處理）。
 * ------------------------------------------------------------------------ */

/* ---- 共用（不影響桌機外觀）---- */
img { max-width: 100%; }

/* 聯絡我們的左右兩欄，原本寫在 HTML 的 inline style，改成 class 方便覆寫 */
.contact-l { float: left;  width: 400px; }
.contact-r { float: right; width: 480px; }

/* 搜尋框那一排 */
.search-box { float: left;  padding: 5px 0 0 20px; width: 190px; }
.search-btn { float: right; padding: 2px 15px 0 0; }

/* ---------------------------------------------------------------------------
 * 商品圖的比例框（桌機也會套到）
 *
 * 原本是 <img width="350px" height="210px">，不管上傳的是什麼比例都硬拉成
 * 350x210，直式的商品照會被壓扁。框的大小維持和原本一模一樣（佈景的
 * .prodpic h1 就是 350x210），只是圖改成 object-fit: contain 縮進框裡，
 * 不再變形。不支援 object-fit 的舊瀏覽器會退回「填滿整個框」，也就是現在的樣子。
 * ------------------------------------------------------------------------ */
.prodpic h1 {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.prodpic h1 a {
    display: block;
    width: 100%;
    height: 100%;
}
.prodpic h1 img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 商品名稱固定留兩行的高度。
 * 每一格是 float:left，只要有一格比隔壁高，下一排就會卡在它旁邊錯開一階，
 * 所以每一格的高度必須一致；名稱超過兩行的就切掉。 */
.prodpic h2 {
    height: 2.8em;
    line-height: 1.4em;
    overflow: hidden;
}
.prodpic h2 + h2 { height: auto; }   /* 第二個 h2 是價格，只有一行 */

/* 商品明細的主圖同理，框是 450x270 */
.prd-img div {
    position: relative;
    width: 450px;
    height: 270px;
    overflow: hidden;
    background: #ffffff;
}
.prd-img div img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ===========================================================================
 * 平板以下
 * ======================================================================== */
@media screen and (max-width: 1024px) {

    /* ---- 版面骨架 ---- */
    .wrapper,
    .navbox,
    .nav,
    .logobox,
    .menubox,
    .footer {
        width: auto !important;
        max-width: 100%;
    }
    .navbox { padding: 0 !important; }
    .logobox { height: auto; padding: 8px 0; }
    .logo-l  { float: none; text-align: center; }
    .logo-l img { max-width: 90%; height: auto; }
    .logo-r  { float: none; width: auto; text-align: center; padding: 8px 5px 0 0; }
    .footer  { padding: 5px 10px; box-sizing: border-box; }
    .footer div { text-align: center !important; }

    /* ---- 主選單（文字選單改成 2x2）---- */
    .menubox { height: auto; }
    .menu-l  { float: none; width: auto; }
    .mupicbox { height: auto; }
    .mupic   { overflow: hidden; }
    .mupic li { float: left; width: 50%; box-sizing: border-box; }
    .mupic li.menu1 a,
    .mupic li.menu2 a,
    .mupic li.menu3 a,
    .mupic li.menu4 a,
    .mupic li.menu5 a {
        width: 100%;
        height: 38px;
        line-height: 38px;
        font-size: 15px;
        border-bottom: 1px solid #888888;
    }

    /* ---- 搜尋 ---- */
    .menu-r { float: none; width: auto; height: auto; padding: 6px 0; overflow: hidden; }
    .search-box { float: none; width: auto; padding: 4px 10px; box-sizing: border-box; }
    .search-btn { float: none; padding: 0 10px 4px; }
    .menu-r input.text { width: 100%; height: 26px; box-sizing: border-box; }

    /* ---- 首頁版型 1：大圖 + 兩排小圖，改成單純上下堆疊 ---- */
    .all { width: auto; height: auto; }
    .box { width: auto; height: auto; overflow: visible; top: 0; }
    .hotnews,
    .hotnews a {
        position: relative;
        width: auto;
        height: auto;
    }
    .hotnews a img { width: 100% !important; height: auto !important; }
    .sale, .hot {
        position: static;
        width: auto;
        height: auto;
        left: auto;
    }
    .sale ul, .hot ul { width: auto; height: auto; overflow: hidden; }
    .sale ul li, .hot ul li {
        width: 50%;
        padding-right: 0;
        box-sizing: border-box;
    }
    .sale ul li img, .hot ul li img { width: 100% !important; height: auto !important; }

    /* ---- 首頁版型 2：1000x360 輪播（實際寬高由 JS 依畫面寬度換算）---- */
    .abgneBlock { width: auto; }
    .abgneBlock .list img { width: 100%; height: 100%; }

    /* ---- 內頁左右兩欄改成上下 ---- */
    .bottom   { width: auto !important; padding: 10px; box-sizing: border-box; }
    .bottom-l { width: auto !important; float: none; padding-bottom: 10px; background-image: none; }
    .bottom-r { width: auto !important; float: none; padding: 10px 0 20px 0; }

    /* ---- 產品類別選單收合 ----
     * 左右欄疊成上下之後，整排類別（外加搜尋關鍵字歷程）擋在商品前面，
     * 選完類別還要再往下捲一段才看得到商品。這裡把清單收成一條可點的標題列
     * （作法和主選單的三條線按鈕一樣），標題列直接寫著目前所在的類別。 */
    .sidetitle  { display: none; }              /* 標題圖換成下面那條文字列 */
    .sidetoggle { display: block; }
    .menuslistbox      { display: none; width: auto; height: auto !important; padding: 0; }
    .menuslistbox.open { display: block; padding: 6px 0; }
    .menuslist li {
        height: auto;
        line-height: 1.4;
        padding: 10px 10px 10px 26px;
        margin-left: 0;
        background-position: 10px 15px;
    }
    .menuslist li a { font-size: 15px; display: block; }

    /* ---- 商品列表：一排兩個 ---- */
    .prodpic li { width: 50%; padding: 6px; box-sizing: border-box; }
    .prodpic h1 { width: auto; height: 0; padding-bottom: 60%; }  /* 210 / 350 */
    .prodpic h1 a { position: absolute; top: 0; left: 0; }

    /* ---- 商品明細 ---- */
    .prdsbox  { width: auto; }
    .prd-img  { float: none; }
    .prd-img div { width: auto; height: 0; padding-bottom: 60%; }  /* 270 / 450 */
    .prd-info { float: none; width: auto; padding-top: 10px; }

    /* ---- 最新消息 ---- */
    .newsbox   { width: auto !important; padding: 10px; box-sizing: border-box; }
    .newsdbox  { width: auto; }
    .newsdate  { float: none; margin-left: 0; }
    .newsdetail { width: auto; float: none; padding-right: 0; }

    /* ---- 聯絡我們 ---- */
    .contact-l, .contact-r { float: none; width: auto; }
    .contact-r { padding-top: 20px; }
    .memberform td.b { width: 90px; }
    .memberform input.text,
    .memberform input.text1,
    .memberform textarea.textarea { width: 100%; box-sizing: border-box; }

    /* 編輯器內容裡的寬表格 / 地圖 / 大圖 */
    .bottom-r img, .newsbox img, .prd-info img { max-width: 100%; height: auto; }
    .bottom-r iframe, .newsbox iframe { max-width: 100%; }
    .bottom-r table, .newsdetail table { max-width: 100%; }
}


/* ===========================================================================
 * 手機：主選單改成三條線收合
 * ======================================================================== */
@media screen and (max-width: 767px) {

    /* 顯示三條線按鈕 */
    .navtoggle { display: block; }

    /* 選單預設收起來，按下去才展開（JS 加上 .open） */
    .mupic      { display: none; }
    .mupic.open { display: block; }

    .mupicbox { height: auto; }
    .mupic li { float: none; width: 100%; }

    /* 展開後是一排一個的清單，靠左對齊比較好按 */
    .mupic li.menu1 a,
    .mupic li.menu2 a,
    .mupic li.menu3 a,
    .mupic li.menu4 a,
    .mupic li.menu5 a {
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: left;
        padding-left: 50px;
        font-size: 15px;
        border-bottom: 1px solid #888888;
    }
}


/* ===========================================================================
 * 手機
 * ======================================================================== */
@media screen and (max-width: 640px) {

    /* 首頁小圖、商品列表都改成一排一個 */
    .sale ul li, .hot ul li { width: 100%; }
    .prodpic li { width: 100%; }

    .logo-r { font-size: 14px; }
    .newsdetail h1 { font-size: 14px; }

    /* 編輯器裡若有寫死寬度的表格，允許左右捲動而不是撐破版面 */
    .bottom-r, .newsdetail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}