/* JOY PRINT | 全站共用樣式 v1.1 | 2026-11-02
   載入順序：Bootstrap 4.4.1 -> joyprint.css
   注意：首頁原有內嵌 <style> 若仍保留，可能與本檔互相覆蓋。
*/
:root{--jp-red:#bc1414;--jp-link:#1881d1;--jp-ink:#222;--jp-nav:#f6f7f8;--jp-blue:#356598;--jp-green:#009c35;--jp-cyan:#0099c0;--jp-pink:#ff9298;--jp-black:#202020;--jp-orange:#f96a0b}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--jp-ink);font:14px/1.6 Arial,'Microsoft JhengHei',sans-serif}
a{color:var(--jp-link);text-decoration:none}a:hover{text-decoration:underline}
.shell{width:1200px;max-width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;table-layout:fixed}
.shell>tbody>tr>td{padding:0}
.headercell{padding:0;background:#f1f1f1 url('../images/header-repeat.png') repeat-x left top}
.header-img{display:block;width:100%;max-width:none;height:auto}
/* 共用導覽列：預設黑字，由 HTML active 標記所在頁 */
.navtd{background:var(--jp-nav);height:62px;padding:0 18px!important;white-space:nowrap;position:relative;overflow:visible;vertical-align:middle;font-size:14px;line-height:1.6}
.navtd>a,.navtd .jp-menu>summary{display:inline-block;vertical-align:middle;margin-right:19px;padding:0;font:normal 14px/22px Arial,'Microsoft JhengHei',sans-serif;text-decoration:none}
.navtd>a,.navtd>a:first-child{color:#222!important}
.jp-menu{display:inline-block;position:relative;vertical-align:middle;margin-right:19px;white-space:normal}
.navtd .jp-menu>summary,.navtd .jp-menu[open]>summary{display:inline-block;list-style:none;cursor:pointer;white-space:nowrap;color:#222!important;background:transparent!important;border:0!important;box-shadow:none!important}
.jp-menu>summary::-webkit-details-marker{display:none}
.jp-menu>summary::after{content:' ▾';font-size:11px;color:#666}
.jp-dropdown,.navtd .jp-menu .jp-dropdown{display:none;position:absolute;top:100%;left:0;width:235px;max-height:460px;overflow-y:auto;z-index:9999;background:#fff;border:1px solid #ccc;box-shadow:0 5px 14px rgba(0,0,0,.18);padding:5px 0;white-space:normal}
.jp-menu[open]>.jp-dropdown,.navtd .jp-menu[open]>.jp-dropdown{display:block}
.jp-dropdown a,.navtd .jp-menu .jp-dropdown a{display:block;margin:0;padding:7px 14px;color:#333;font-size:14px;font-weight:normal;line-height:1.6;white-space:nowrap}
.jp-dropdown a:hover,.navtd .jp-menu .jp-dropdown a:hover{background:#edf3f7;color:var(--jp-red);text-decoration:none}
.jp-dropdown .menu-separator{height:1px;background:#e4e4e4;margin:5px 0}
/* 首頁輪播 */
.hero-wrap{padding:0;background:#858585;text-align:center;height:auto;overflow:hidden}
.hero-img{display:block;margin:0 auto;width:100%;height:auto}
.hero-wrap .carousel,.hero-wrap .carousel-inner,.hero-wrap .carousel-item{width:100%}
.hero-wrap .carousel-item img{display:block;width:100%;height:auto}
.hero-wrap .carousel-indicators{margin-bottom:8px}
/* 首頁六格：沿用原表格結構 */
.welcome{padding:4px 8px 9px}.welcome .small{font-size:11px;color:#777;padding-left:48px}.welcome .big{font:24px Georgia,serif;color:#b71919;width:200px;border-bottom:1px solid #888;line-height:1.1;padding-bottom:4px}
.products{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:14px 20px;margin-top:-9px}
.colcell{padding:0;vertical-align:top}.product{width:100%;border:1px solid #666;table-layout:fixed;background:#fff;border-collapse:collapse}.product td{padding:0}
.picture{background:#c5c5c5;overflow:hidden}.picture img{display:block;width:100%;height:145px;object-fit:contain;object-position:center;background:#c5c5c5}
.bar{font-weight:bold;text-align:center;color:#fff;font-size:16px}.blue{background:var(--jp-blue)}.green{background:var(--jp-green)}.cyan{background:var(--jp-cyan)}.pink{background:var(--jp-pink)}.black{background:var(--jp-black)}.orange{background:var(--jp-orange)}
.productlinks{padding:17px 21px!important;vertical-align:top;line-height:1.85}.productlinks a{display:inline-block;margin-right:6px}.productlinks span{color:var(--jp-link);margin-right:7px}.productlinks span.pending{color:#667582}.note{font-size:11px;color:#777;padding-top:4px}
.about{background:#f6f6f6;padding:16px 22px}.about strong{font-size:16px}.footer{text-align:center;border-top:1px solid #ddd;padding:20px;color:#666;font-size:12px}
/* 產品次頁 */
.pagehead{background:#f7f8fa;padding:0!important;margin:0!important;vertical-align:top}
.crumb{padding:12px 34px;color:#87909a;font-size:13px}.crumb a{color:#87909a}
.page-title{margin:0 34px 6px;font-size:30px;font-weight:600}.page-subtitle{margin:0 34px 20px;color:#666}
.category-green .page-title,.category-green .section-heading{color:#287e35}
.category-blue .page-title,.category-blue .section-heading{color:var(--jp-blue)}
.category-cyan .page-title,.category-cyan .section-heading{color:var(--jp-cyan)}
.category-pink .page-title,.category-pink .section-heading{color:#d95570}
.category-black .page-title,.category-black .section-heading{color:#333}
.category-orange .page-title,.category-orange .section-heading{color:#dd6510}
.page-main{padding:30px 34px 38px;vertical-align:top;background:#fff}.layout{width:100%;border-collapse:collapse;table-layout:fixed}.layout td{vertical-align:top}.layout .primary{width:73%;padding-right:30px}.layout .aside{width:27%}
.section-heading{font-size:20px;font-weight:600;line-height:1.5;margin:0 0 14px;padding-left:12px;border-left:4px solid currentColor}.body-copy{line-height:1.9;margin:0 0 24px}.content-list{line-height:1.95;margin:0 0 24px;padding-left:25px}
.sidebar-card{border:1px solid #e5e7eb;background:#fafafa;padding:18px;margin-bottom:16px}.sidebar-card h2{font-size:17px;color:#222;margin:0 0 10px;font-weight:600}.sidebar-card a{display:block;padding:8px 0;color:#555;border-bottom:1px solid #eee}.sidebar-card p{margin:0;color:#666;line-height:1.8}
.hero-product{display:block;max-width:100%;height:auto;margin:10px auto 25px}
/* 產品橫幅：與1200px導覽列同寬，文字覆蓋於左側 */
.catalog-banner{position:relative;width:100%;max-width:none;margin:0!important;padding:0;overflow:hidden}
.catalog-banner img{display:block;width:100%;height:auto}
.catalog-banner-text{position:absolute;left:5%;top:19%;z-index:2;text-align:left;width:43%}
.catalog-banner-text h1{font-size:32px;line-height:1.2;font-weight:bold;color:#287e35;margin:0 0 8px}
.catalog-banner-text p{font-size:16px;line-height:1.5;color:#444;margin:0}
/* 若不想在橫幅上方顯示麵包屑，內頁HTML可移至橫幅下方，不要靠負邊距隱藏 */
@media(max-width:1240px){.shell{width:100%}.products{border-spacing:10px 15px}}
@media(max-width:700px){.navtd{height:auto;padding:12px!important;white-space:normal}.navtd>a,.jp-menu{margin:0 12px 6px 0}.jp-dropdown,.navtd .jp-menu .jp-dropdown{width:220px;max-width:calc(100vw - 30px)}.products,.products tbody,.products tr,.products .colcell{display:block;width:100%!important}.products{border-spacing:0;padding:0 12px}.products .colcell{margin:0 0 14px}.picture img{height:145px}.productlinks{height:auto!important;min-height:82px}.hero-wrap{height:auto}.page-main{padding:20px 15px}.layout,.layout tbody,.layout tr,.layout td{display:block;width:100%!important}.layout .primary{padding-right:0}.layout .aside{margin-top:20px}.crumb{padding:10px 16px}.page-title{margin:0 16px 6px}.page-subtitle{margin:0 16px 15px}.catalog-banner-text{left:4%;top:12%;width:48%}.catalog-banner-text h1{font-size:clamp(14px,4vw,22px);margin-bottom:4px}.catalog-banner-text p{font-size:clamp(9px,2.2vw,12px);line-height:1.3}}

/* 主導覽列：所在分類才顯示紅字。首頁 <a class="active">；產品頁 <details class="jp-menu active"> */
.navtd > a.active,
.navtd .jp-menu.active > summary,
.navtd .jp-menu.active[open] > summary {color:#bc1414!important;}
.navtd .jp-menu.active > summary::after {color:#bc1414;}
/* 清除舊版:first-child 等規則對狀態的干擾 */
.navtd > a:not(.active),
.navtd > a:first-child:not(.active) {color:#222!important;}
.navtd .jp-menu:not(.active) > summary,
.navtd .jp-menu:not(.active)[open] > summary {color:#222!important;}
/* 產品次頁：內文左右留白 */
.page-main {
    padding: 30px 34px !important;
    box-sizing: border-box;
}

/* 主要文章與右側服務欄間距 */
.layout .primary {
    padding-right: 28px !important;
}

/* 手機版縮小留白 */
@media (max-width: 700px) {
    .page-main {
        padding: 20px 16px !important;
    }

    .layout .primary {
        padding-right: 0 !important;
    }
}
/* 首頁六格產品分類左右留白 */
#products .products {
    width: calc(100% - 68px) !important;
    margin-left: 34px !important;
    margin-right: 34px !important;
    box-sizing: border-box;
}

/* 手機版 */
@media (max-width: 700px) {
    #products .products {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
/* 首頁 Welcome 標題與六格圖片對齊 */
.welcome {
    padding-left: 34px !important;
    box-sizing: border-box;
}

/* 首頁下方公司介紹與說明文字對齊 */
#products ~ tr > td,
.shell > tbody > tr:last-child > td {
    padding-left: 34px;
    padding-right: 34px;
    box-sizing: border-box;
}
/* 首頁下方文字左右對齊 */
.home-footer {
    padding-left: 34px !important;
    padding-right: 34px !important;
    box-sizing: border-box;
}
/* 首頁公司介紹與六格產品左邊對齊 */
td.about#about {
    padding-left: 46px !important;
    padding-right: 46px !important;
    box-sizing: border-box;
}

/* 手機版 */
@media (max-width: 700px) {
    td.about#about {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}