@charset "utf-8";
/* ---------------------------------------------------------------------------
 * 主選單：圖片改文字
 *
 * 原本 Theme2/Theme3 的 mainstyle.css / mainstyle1.css 是用 4 張 180x30 的
 * 圖片當按鈕（menu1-1.png ~ menu4-2.png），文字寫死在圖裡，改字要重做圖，
 * 也沒辦法跟著語系切換。這裡改成純文字，配色直接取自原圖：
 *
 *   一般狀態  底色 #777777、白字
 *   滑過 / 目前頁  底色 #999999、白字
 *   尺寸      180 x 30（與原圖相同，選單列總寬仍是 4 x 180 = 720px）
 *
 * 選擇器刻意寫成和佈景同樣的 `.mupic li.menuN a`，靠載入順序覆蓋，
 * 不用 !important，也完全沒有動到原始佈景檔。
 * 載入順序：佈景樣式 -> menu.css -> rwd.css
 * ------------------------------------------------------------------------ */

.mupic li.menu1 a,
.mupic li.menu2 a,
.mupic li.menu3 a,
.mupic li.menu4 a,
.mupic li.menu5 a {
    display: block;
    width: 180px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    background: #777777 none;
    color: #ffffff;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.mupic li.menu1 a:hover,
.mupic li.menu2 a:hover,
.mupic li.menu3 a:hover,
.mupic li.menu4 a:hover,
.mupic li.menu5 a:hover,
.mupic li.menu1.active a,
.mupic li.menu2.active a,
.mupic li.menu3.active a,
.mupic li.menu4.active a,
.mupic li.menu5.active a {
    background: #999999 none;
    color: #ffffff;
    text-decoration: none;
}


/* ---------------------------------------------------------------------------
 * 手機版的三條線按鈕
 *
 * 這裡只定義「長什麼樣子」，什麼時候顯示 / 收合交給 rwd.css 的 media query，
 * 預設是隱藏的，所以桌機完全看不到。
 * ------------------------------------------------------------------------ */

.navtoggle {
    display: none;               /* 由 rwd.css 在 767px 以下打開 */
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #777777;
    color: #ffffff;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
}
.navtoggle:hover,
.navtoggle:focus {
    background: #999999;
    color: #ffffff;
    text-decoration: none;
}

/* 三條線 */
.navtoggle .bars {
    position: absolute;
    left: 14px;
    top: 0;
    width: 24px;
    height: 44px;
}
.navtoggle .bars span {
    position: absolute;
    left: 0;
    width: 24px;
    height: 3px;
    background: #ffffff;
    border-radius: 1px;
    -webkit-transition: -webkit-transform .25s ease, opacity .2s ease;
    transition: transform .25s ease, opacity .2s ease;
}
.navtoggle .bars span:nth-child(1) { top: 15px; }
.navtoggle .bars span:nth-child(2) { top: 22px; }
.navtoggle .bars span:nth-child(3) { top: 29px; }

/* 展開時三條線變成叉叉 */
.navtoggle.open .bars span:nth-child(1) {
    -webkit-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
.navtoggle.open .bars span:nth-child(2) { opacity: 0; }
.navtoggle.open .bars span:nth-child(3) {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}

.navtoggle-label {
    display: block;
    padding-left: 50px;
}


/* ---------------------------------------------------------------------------
 * 產品頁左欄「產品分類」的收合列
 *
 * 和上面的三條線按鈕同一套規則：這裡只定義長相，什麼時候顯示交給 rwd.css
 * 的 media query，預設隱藏，所以桌機看不到，桌機的類別清單仍然整排攤開。
 * ------------------------------------------------------------------------ */

.sidetoggle {
    display: none;               /* 由 rwd.css 在 1024px 以下打開 */
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0 40px 0 14px;
    background: #eeeeee;
    border: 1px solid #cccccc;
    color: #333333;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
}
.sidetoggle:hover,
.sidetoggle:focus {
    background: #e2e2e2;
    color: #333333;
    text-decoration: none;
}

/* 太長的類別名稱不要把右邊的箭頭擠出去 */
.sidetoggle-label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 右邊的小三角形，展開時轉 180 度 */
.sidetoggle .caret {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #666666;
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
}
.sidetoggle.open .caret {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}