/* ============================================================
   中寶 M&C — 新增組件樣式 + 全站 RWD 自適應（最後加載，可覆蓋原樣式）
   斷點：1200 筆電 / 1024 平板橫 / 996 / 767 平板直&手機橫 / 580 / 480 手機 / 360 小手機
   ============================================================ */

/* ---------- 首頁 Banner 副標（後台可填） ---------- */
.home-banner-text { text-align: center; }
.home-banner-text .home-banner-sub { margin-top: 12px; font-size: 18px; font-weight: 400; color: #fff; opacity: .92; text-shadow: 1px 1px 1px rgba(0,0,0,.3); }

/* ---------- Our Clients 客戶表（全寬，無左側圖卡） ---------- */
.our-clients-box { padding-bottom: 60px; }
.oc-panel { display: block; max-width: 1170px; margin: 0 auto; padding: 0 20px; }
.oc-panel .change-con { width: 100%; }
/* 原樣式把 .change-con table 預設 display:none（靠內聯 display:table 顯示），
   這裡統一讓當前面板內的表格恆常顯示，切分類也不會消失 */
.our-clients .oc-panel .change-con .client-table { display: table; }
.client-table { width: 100%; border-collapse: collapse; }
.client-table td { padding: 14px 8px; border-bottom: 1px solid #e3e3e3; font-size: 15px; vertical-align: middle; }
.client-table td:first-child { white-space: nowrap; color: #179bd7; width: 140px; font-weight: 500; }
.client-table td:nth-child(2) { font-weight: 500; color: #333; }
.client-table td:nth-child(3) { color: #888; text-align: right; }

/* ---------- Job Reference 六角格蜂巢（pointy-top；單數行 6 格、雙數行 7 格） ----------
   每 13 個一循環(6+7)：13n+1 為單數行首（縮進半格居中），13n+7 為雙數行首。
   雙數行 7 格佔滿列寬、不使用負橫向邊距，故左右不會被裁切。 */
.partner-list ul { justify-content: flex-start; }
.partner-list ul li { width: 14.2857%; margin-top: -3.2%; }            /* 第二行起整行向上交疊 */
.partner-list ul li:nth-child(-n+6) { margin-top: 0; }                 /* 第一行（前6格）不下移 */
.partner-list ul li a {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1.12; margin: 10px; padding: 0; box-sizing: border-box; background: #fff;
    /* 上下尖（pointy-top）六角：頂/底為尖點；外距 10px 保證相鄰六角一致留白 */
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform .3s ease;
}
.partner-list ul li a:hover { transform: scale(1.05); }
.partner-list ul li a img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* 重置 style.css 舊的首格/第6格/通體負邊距規則 */
.partner-list ul li:nth-child(6) { margin-right: 0; }
/* 單數行(6格)整體縮進半格，與 7 格行居中對齊（含第二輪之後的單數行 13n+1） */
.partner-list ul li:nth-child(13n+1) { margin-left: 7.142857%; }
.partner-list { padding-bottom: 24px; }

/* 加載更多：隱藏 / 逐批淡入 */
.jr-item.jr-hidden { display: none; }
.jr-item.jr-show { animation: jrFadeUp .55s ease both; }
@keyframes jrFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#jrLoadMore { cursor: pointer; }

/* ---------- 工程實績詳情：主圖 + 縮略圖條（穩定顯示全部圖片，不依賴 loop） ---------- */
/* ---------- 工程實績詳情：大圖 + 縮略圖欄（設計感、絕不漏圖、RWD） ---------- */
.jr-gal { display: flex; gap: 18px; align-items: stretch; margin: 26px auto 8px; }
.jr-gal-main { position: relative; flex: 1 1 auto; min-width: 0; background: #eef1f3; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 34px rgba(20,40,60,.10); }
.jr-gal-main img { display: block; width: 100%; height: 540px; object-fit: contain; background: #f2f4f6; transition: opacity .22s ease; }
.jr-gal-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.82); color: #1f3a5f; font-size: 32px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: background .2s, transform .2s;
}
.jr-gal-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.jr-gal-prev { left: 18px; } .jr-gal-next { right: 18px; }
.jr-gal-count { position: absolute; right: 16px; bottom: 14px; z-index: 5; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; letter-spacing: 1px; padding: 5px 12px; border-radius: 20px; }
.jr-gal-count b { font-size: 15px; }
.jr-gal-rail { flex: 0 0 108px; display: flex; flex-direction: column; gap: 10px; max-height: 540px; overflow-y: auto; padding: 2px; }
.jr-gal-thumb { padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; background: #eee; opacity: .68; transition: opacity .2s, border-color .2s, transform .2s; }
.jr-gal-thumb img { width: 100%; height: 80px; object-fit: cover; display: block; }
.jr-gal-thumb:hover { opacity: 1; }
.jr-gal-thumb.active { opacity: 1; border-color: #179bd7; box-shadow: 0 0 0 2px rgba(23,155,215,.22); transform: scale(1.02); }
@media (max-width: 900px) {
    .jr-gal { flex-direction: column; gap: 12px; margin-top: 18px; }
    .jr-gal-main img { height: auto; max-height: 56vh; }
    .jr-gal-rail { flex: 0 0 auto; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
    .jr-gal-thumb { flex: 0 0 auto; width: 92px; }
    .jr-gal-thumb img { height: 66px; }
}
@media (max-width: 580px) {
    .jr-gal-arrow { width: 40px; height: 40px; font-size: 26px; }
    .jr-gal-prev { left: 10px; } .jr-gal-next { right: 10px; }
    .jr-gal-main img { max-height: 46vh; }
}

/* Banner 按鈕（後台可填） */
.home-banner-btn { display: inline-block; margin-top: 22px; padding: 12px 34px; border: 1px solid #fff; border-radius: 8px; color: #fff; letter-spacing: 1px; }
.home-banner-btn:hover { background: rgba(255,255,255,.16); }

/* ---------- 工程實績詳情：返回 / 上一個 / 下一個 ---------- */
.jr-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-bottom: 40px; }
.jr-nav-back {
    display: inline-block; padding: 10px 28px; border: 1px solid #333; border-radius: 30px;
    color: #333; font-size: 14px; letter-spacing: 1px;
}
.jr-nav-back:hover { background: #333; color: #fff; }
.jr-nav-btn { display: inline-flex; align-items: center; gap: 8px; color: #1f3a5f; font-size: 14px; max-width: 38%; }
.jr-nav-btn i { font-size: 18px; }
.jr-nav-btn.jr-nav-next { justify-content: flex-end; text-align: right; }

/* 實績列表分類 tab */
.partner-tabs { text-align: center; }
.partner-tabs a { padding: 6px 16px; border: 1px solid #ccc; border-radius: 20px; color: #555; }
.partner-tabs a.active { background: #179bd7; border-color: #179bd7; color: #fff; }

/* 圖片通用自適應保險 */
.home-banner .swiper-slide img, .home-banner4 .swiper-slide img { max-width: 100%; }

/* ============================================================
   頂欄：logo 與菜單上下行距 30px；向下滾動時固定在頂部並收窄（僅桌面）
   ============================================================ */
@media (min-width: 997px) {
    .header-nav { margin-top: 30px; }
    .header-logo a img { transition: height .3s ease; }
    header { transition: box-shadow .3s ease; }
    header.header-fixed {
        position: fixed; top: 0; left: 0; right: 0; z-index: 999;
        background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.12);
    }
    header.header-fixed .header-top { padding-top: 10px; }
    header.header-fixed .header-logo a img { height: 58px; }
    header.header-fixed .header-nav { margin-top: 10px; }
    header.header-fixed .header-nav > ul { margin-bottom: 10px; }
}

/* ============================================================
   RWD — 1200 筆電 / 小桌面
   ============================================================ */
@media (max-width: 1200px) {
    .home-banner-text h2 { font-size: 48px; }
}

/* ============================================================
   RWD — 1024 平板橫向 / 小筆電
   ============================================================ */
@media (max-width: 1024px) {
    .home-banner-text { bottom: 48px; }
    .home-banner-text h2 { font-size: 40px; }
    .page-banner-text h1 { font-size: 38px; }
    .page-banner-box img { height: 300px; }

    .home-two-text h3 { font-size: 24px; margin-bottom: 22px; }
    .home-two-text p { font-size: 18px; }

    .our-clients-title h2, .our-clients-title p { font-size: 32px; }
    .our-clients .change-con table tr td { padding: 18px 22px; font-size: 20px; }

    .contact-info-r h3 { font-size: 24px; }
    .contact-info p { font-size: 18px; }
    .contact-info ul { gap: 36px; }
    .job-reference-top .df-c h2 { font-size: 32px; }

    /* 六角格改為整齊 3 列，取消蜂巢交錯與縮進，避免錯位 */
    .partner { padding: 80px 40px 50px; }
    .partner-list ul { justify-content: flex-start; }
    .partner-list ul li { width: 33.333%; margin-left: 0 !important; margin-top: 0 !important; }
    .partner-list ul li a { margin: 6px; }
}

/* ============================================================
   RWD — 996 導航收緊
   ============================================================ */
@media (max-width: 996px) {
    .header-nav > ul > li { margin-right: 20px; }
    .header-nav > ul > li > a { font-size: 16px; }
    /* 手機/平板不使用固定收縮頂欄（側邊抽屜選單自己定位） */
    header.header-fixed { position: relative; box-shadow: none; }
    body { padding-top: 0 !important; }
}

/* ============================================================
   RWD — 767 平板直向 / 手機橫向：所有雙欄改單欄堆疊
   ============================================================ */
@media (max-width: 767px) {
    /* 頂部 Banner */
    .home-banner-text { bottom: 30px; }
    .home-banner-text h2 { font-size: 30px; }
    .page-banner-text h1 { font-size: 28px; }
    .page-banner-box img { height: 220px; }

    /* 首頁 home-one：兩圖左右並排（各 50%），按鈕居中疊在圖上方（對照手機稿） */
    .home-one .df { display: flex; flex-wrap: nowrap; gap: 4px; }
    .home-one .df li { width: 50%; }
    .home-one .btn-line { top: 14px; height: 40px; line-height: 40px; padding: 0 16px; }

    /* 首頁 home-two：服務逐塊上下排，每塊「左圖(~38%) + 右文」 */
    .home-two > ul > li { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; }
    .home-two > ul > li > div { grid-column: auto; grid-row: auto; }
    .home-two-box { flex-direction: row; align-items: stretch; }
    .home-two > ul > li .home-two-img,
    .home-two > ul > li > div:nth-child(1) .home-two-img { min-width: 38%; max-width: 38%; }
    .home-two-img img { height: 100%; object-fit: cover; }
    .home-two > ul > li > div:nth-child(1) .home-two-text,
    .home-two > ul > li .home-two-text { padding: 18px; }
    .home-two-text h3 { font-size: 20px; margin-bottom: 12px; }
    .home-two-text h4 { font-size: 16px; }
    .home-two-text p { font-size: 15px; }
    .home-two > ul ul li { font-size: 14px; margin-top: 10px; }

    /* About / Chan Chia / I-Cherng 雙欄轉單欄 */
    .about-box { grid-template-columns: 1fr; gap: 28px; }
    .about-img.p-60-0 { padding: 0; }
    .about-text h2 { font-size: 24px; }
    .about-text p { font-size: 15px; }

    /* Our Clients：頂部分類 3 列、表格逐格堆疊 */
    .our-clients .change-menu { grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
    .our-clients-title h2, .our-clients-title p { font-size: 26px; }
    .our-clients .change-con table tr td { padding: 12px; font-size: 16px; }
    .client-table tr { display: block; margin-bottom: 12px; border-bottom: 1px solid #eee; }
    .client-table td { display: block; width: 100% !important; text-align: left !important; padding: 6px 8px; }

    /* 六角格維持整齊 3 列（取消蜂巢交錯） */
    .partner { padding: 56px 18px 40px; }
    .partner-list ul li { width: 33.333%; margin-left: 0 !important; margin-top: 0 !important; }
    .partner-list ul li a { aspect-ratio: 1/1.08; }
    .partner .btn-empty { font-size: 22px; margin-top: 30px; }

    /* Contact：聯絡資訊 2 列、表單單欄 */
    .contact-info { margin-bottom: 48px; }
    .contact-info ul.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .contact-info-r h3 { font-size: 20px; margin-bottom: 8px; }
    .contact-info p { font-size: 15px; }
    .contact-form .grid-2 { grid-template-columns: 1fr; }

    /* Footer 兩列 */
    .footer-nav > ul { flex-wrap: wrap; gap: 24px; padding: 32px 20px; }
    .footer-nav > ul > li { width: 45%; }

    /* 實績詳情標題區堆疊 */
    .job-reference-top .df-c { flex-direction: column; align-items: flex-start; gap: 16px; }
    .job-reference-top .df-c h2 { font-size: 26px; }
    .jr-nav-btn { max-width: 45%; font-size: 13px; }
}

/* ============================================================
   RWD — 580
   ============================================================ */
@media (max-width: 580px) {
    .home-banner-text h2 { font-size: 26px; }
    .partner-list ul li { width: 50%; margin-left: 0 !important; margin-top: 0 !important; }
    .our-clients .change-menu { grid-template-columns: repeat(2, 1fr); }
    .contact-info ul.grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   RWD — 480 手機
   ============================================================ */
@media (max-width: 480px) {
    .page-banner-text h1 { font-size: 24px; }
    .page-banner-box img { height: 180px; }
    .home-banner-text { bottom: 20px; }
    .home-banner-text h2 { font-size: 22px; }
    .home-two-text h3 { font-size: 20px; }
    .our-clients-title h2, .our-clients-title p { font-size: 22px; }
    .partner { padding: 44px 12px 32px; }
    .partner-list ul li { width: 50%; margin-left: 0 !important; margin-top: 0 !important; }
    .partner-list ul li a { margin: 4px; }
    .footer-nav > ul > li { width: 100%; }
    .jr-nav { flex-wrap: wrap; }
    .jr-nav-btn { max-width: 100%; }
    .jr-nav-btn.jr-nav-next { order: 3; }
    .jr-nav-back { order: 2; margin: 0 auto; }
}

/* ============================================================
   RWD — 360 小手機
   ============================================================ */
@media (max-width: 360px) {
    .partner-list ul li { width: 50%; }
    .home-banner-text h2 { font-size: 20px; }
}

/* ---------- 聯絡表單驗證碼 ---------- */
.mc-captcha-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
#mcCaptchaQ{display:inline-block;min-width:88px;color:#179bd7;font-size:18px;}
.mc-captcha-row .form-input input{height:42px;}


/* ---------- 聯絡表單提交結果彈窗 ---------- */
.mc-modal-mask{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.45);}
.mc-modal-mask.show{display:flex;animation:mcMaskIn .25s ease both;}
@keyframes mcMaskIn{from{opacity:0;}to{opacity:1;}}
.mc-modal-box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:14px;padding:38px 30px 30px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.28);animation:mcPopIn .3s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes mcPopIn{from{opacity:0;transform:translateY(16px) scale(.94);}to{opacity:1;transform:none;}}
.mc-modal-close{position:absolute;top:10px;right:14px;width:34px;height:34px;border:0;background:transparent;font-size:26px;line-height:1;color:#999;cursor:pointer;}
.mc-modal-close:hover{color:#333;}
.mc-modal-ic{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff;}
.mc-modal-box.is-ok .mc-modal-ic{background:#2ecc71;}
.mc-modal-box.is-err .mc-modal-ic{background:#e74c3c;}
.mc-modal-msg{font-size:16px;line-height:1.7;color:#333;margin-bottom:22px;}
.mc-modal-ok{min-width:130px;height:42px;line-height:42px;padding:0 26px;cursor:pointer;}
@media (max-width:480px){.mc-modal-box{padding:32px 20px 24px;}.mc-modal-msg{font-size:15px;}}
/* ---------- 聯絡頁：全螢幕 Google 地圖 ---------- */
.mc-map-full { width: 100%; margin-top: 50px; line-height: 0; }
.mc-map-full iframe { width: 100%; height: 560px; border: 0; display: block; }
@media (max-width: 900px){ .mc-map-full iframe { height: 420px; } .mc-map-full { margin-top: 36px; } }
@media (max-width: 580px){ .mc-map-full iframe { height: 320px; } .mc-map-full { margin-top: 28px; } }

/* 首頁工程實績：無公司名時空 h3 不佔高度（避免下方多出空白） */
.home-banner4 .swiper-slide h3:empty { display: none; }


/* ============================================================
   p26：頂部語言切換（去底線、當前語言用品牌藍）＋社群圖標
   ============================================================ */
.header-language a { border-bottom: 0 !important; padding-bottom: 0; margin-left: 18px; color: #6b7280; font-weight: 500; letter-spacing: .3px; }
.header-language a.active { color: #179bd7; font-weight: 700; }
.header-language a:hover { color: #179bd7; }
.header-share { display: flex; align-items: center; gap: 12px; margin-right: 18px; }
.header-share a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.header-share img { max-width: 24px; max-height: 24px; width: auto; height: auto; object-fit: contain; transition: transform .25s ease, opacity .25s ease; }
.header-share a:hover img { transform: translateY(-2px); opacity: .82; }

/* ============================================================
   p26：工程實績詳情「設計感圖庫」——主舞台 + 膠片縮略圖 + 全屏燈箱
   ============================================================ */
.jr-show { margin: 32px auto 10px; }
.jr-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0e1722; cursor: default;
    box-shadow: 0 26px 64px -26px rgba(15,40,70,.50), 0 2px 10px rgba(15,40,70,.12); }
.jr-stage.multi { cursor: zoom-in; }
.jr-stage > #jrMain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05);
    transition: opacity .55s ease, transform 7s ease; }
.jr-stage > #jrMain.is-in { opacity: 1; transform: scale(1); }
.jr-stage-veil { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,16,28,.30) 0%, rgba(6,16,28,0) 24%, rgba(6,16,28,0) 58%, rgba(6,16,28,.36) 100%); }
.jr-badge { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
    background: rgba(23,155,215,.94); color: #fff; font-size: 14px; letter-spacing: 1px; padding: 7px 15px; border-radius: 30px;
    box-shadow: 0 8px 20px rgba(23,155,215,.42); }
.jr-badge b { font-size: 17px; } .jr-badge i { font-style: normal; opacity: .7; }
.jr-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: 34px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .25s, transform .25s, border-color .25s; }
.jr-arrow:hover { background: #179bd7; border-color: #179bd7; }
.jr-prev { left: 22px; } .jr-next { right: 22px; }
.jr-prev:hover { transform: translateY(-50%) translateX(-3px); }
.jr-next:hover { transform: translateY(-50%) translateX(3px); }
.jr-zoom { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0,0,0,.42); color: #fff; font-size: 12.5px; letter-spacing: 1px; border: 1px solid rgba(255,255,255,.35);
    padding: 6px 13px; border-radius: 24px; cursor: pointer; }
.jr-zoom span { font-size: 15px; line-height: 1; }
.jr-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.jr-thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; width: 118px; height: 78px;
    background: #eef1f4; opacity: .55; transition: opacity .25s, transform .25s, box-shadow .25s, border-color .25s; }
.jr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-thumb:hover { opacity: .92; transform: translateY(-2px); }
.jr-thumb.on { opacity: 1; border-color: #179bd7; transform: scale(1.06); box-shadow: 0 12px 24px -10px rgba(23,155,215,.6); }

/* 全屏燈箱 */
.jr-lb { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
    background: rgba(6,14,24,.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jr-lb.open { display: flex; animation: jrLbIn .25s ease both; }
@keyframes jrLbIn { from { opacity: 0; } to { opacity: 1; } }
.jr-lb-fig { margin: 0; display: flex; }
.jr-lb-fig img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.jr-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 38px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jr-lb-arrow:hover { background: #179bd7; border-color: #179bd7; }
.jr-lb-prev { left: 3vw; } .jr-lb-next { right: 3vw; }
.jr-lb-close { position: absolute; top: 22px; right: 26px; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.jr-lb-close:hover { background: #e74c3c; border-color: #e74c3c; }
.jr-lb-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; letter-spacing: 2px;
    background: rgba(255,255,255,.12); padding: 7px 18px; border-radius: 30px; }
.jr-lb-count b { color: #179bd7; font-size: 17px; }

@media (max-width: 900px) {
    .jr-stage { aspect-ratio: 4 / 3; border-radius: 14px; }
    .jr-strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .jr-thumb { flex: 0 0 auto; width: 96px; height: 64px; }
    .jr-arrow { width: 44px; height: 44px; font-size: 28px; }
    .jr-prev { left: 12px; } .jr-next { right: 12px; }
    .jr-lb-prev { left: 10px; } .jr-lb-next { right: 10px; }
}
@media (max-width: 580px) {
    .jr-stage { aspect-ratio: 3 / 2; }
    .jr-badge { top: 12px; left: 12px; font-size: 12px; padding: 5px 11px; }
    .jr-zoom { display: none; }
    .jr-strip { gap: 9px; }
    .jr-thumb { width: 80px; height: 54px; border-radius: 9px; }
}


/* ============================================================
   p27（第十二版）
   1) 首頁 Banner 無按鈕時隱藏向下箭頭；桌面圖/手機圖自動切換
   3) 工程實績主題表頭（緊湊，無標題不留白）
   5/6) 內頁 banner 高 150、去麵包屑；手機間距減半
   8) 工程實績詳情網格畫廊（桌面一屏看齊多張，首圖特大）
   ============================================================ */

/* 1) Banner 箭頭與手機圖 */
.home-banner.no-cta:after { display: none !important; }
.home-banner .home-banner-mb { display: none; }
@media (max-width: 767px) {
  .home-banner .home-banner-dt { display: none; }
  .home-banner .home-banner-mb { display: block; width: 100%; height: auto; }
}

/* 3) 工程實績主題表頭 */
.jr-home-head { text-align: center; margin: 12px 0 26px; }
.jr-home-title { font-size: 30px; font-weight: 600; color: #1f3a5f; margin: 0 0 18px; letter-spacing: 1px; }
.jr-home-head .btn-line { margin: 0; }
@media (max-width: 767px) {
  .jr-home-head { margin: 4px 0 16px; }
  .jr-home-title { font-size: 22px; margin-bottom: 12px; }
}

/* 5) 內頁 banner：高度 150、移除麵包屑 */
.page-banner-box img { height: 150px; }
.page-banner .crumbs { display: none !important; }
.page-banner-text h1 { margin-top: 0; font-size: 34px; }
@media (max-width: 767px) {
  .page-banner-box img { height: 104px; }
  .page-banner-text h1 { font-size: 24px; }
}

/* 6) 手機端 banner 與正文間距減半（about / chan-chia / i-cherng / contact） */
@media (max-width: 767px) {
  .about { padding-top: 80px; padding-bottom: 90px; }
  .contact { padding-top: 40px; }
}

/* 8) 工程實績詳情：網格畫廊 */
.job-reference-top { padding-top: 40px; }
.jr-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; margin: 26px auto 10px; }
.jr-tile { position: relative; font: inherit; padding: 0; border: 0; overflow: hidden; border-radius: 12px;
  aspect-ratio: 4 / 3; cursor: zoom-in; background: #0e1722; }
.jr-tile:disabled { opacity: 1; cursor: default; }
.jr-grid--feat .jr-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.jr-grid--single { grid-template-columns: 1fr; }
.jr-grid--single .jr-tile { aspect-ratio: 16 / 10; }
.jr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.jr-tile:hover img { transform: scale(1.06); }
.jr-tile::after { content: ""; position: absolute; inset: 0; background: rgba(8,20,34,0); transition: background .3s; }
.jr-tile:hover::after { background: rgba(8,20,34,.16); }
.jr-tile .jr-zoom-ic { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,25,42,.55); color: #fff; font-size: 18px; font-style: normal; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: all .3s; }
.jr-tile:hover .jr-zoom-ic { opacity: 1; transform: translateY(0); }
@media (max-width: 1200px) { .jr-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .job-reference-top { padding-top: 22px; }
  .jr-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
  .jr-grid--feat .jr-tile:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .jr-tile .jr-zoom-ic { opacity: 1; transform: none; width: 32px; height: 32px; font-size: 15px; }
}

/* ============================================================
   Job Reference 蜂巢 p31（顯式 .jr-row；6/7 交錯、半格錯開，保留 p28 外觀）。
   未滿行修正：6 格行改用「首格半格偏移」而非整行居中——行內容盒保持全寬，
   格子統一 1/7 寬不縮放；未滿行首格與完整行對齊，缺口只在右側。統一 10px 留白。
   ============================================================ */
.jr-honey{width:100%;}
.jr-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;}
.jr-item{flex:0 0 auto;width:14.2857%;}                  /* 統一 1/7 列寬，不縮放 */
.jr-row--6 .jr-item:first-child{margin-left:7.142857%;} /* 6 格行首格縮進半格（相對全寬行 = W/14） */
.jr-item>a{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1.12;margin:10px;padding:0;box-sizing:border-box;background:#fff;
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform .3s ease;}
.jr-item>a:hover{transform:scale(1.05);}
.jr-item>a img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
.jr-row+.jr-row{margin-top:-3.6%;}                       /* 第二行起整行向上交疊，固定值 */
.jr-row-hidden{display:none;}
.jr-row.jr-show{animation:jrFadeUp .55s ease both;}
#jrLoadMore{cursor:pointer;}

/* 移動端容器預設隱藏（桌面只顯示 #jrList） */
.jr-honey--tab,.jr-honey--mob{display:none;width:100%;}

/* 平板（≤1200px）：隱藏桌面蜂巢，顯示 3 格交錯蜂巢。
   格寬 = 100/(3+0.5)=28.5714%；偏移行首格縮進 14.2857%（半格），整行剛好 100% 不溢出 */
@media(max-width:1200px){
  #jrList{display:none;}
  .jr-honey--tab{display:block;}
  .jr-honey--tab .jr-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;}
  .jr-honey--tab .jr-item{flex:0 0 auto;width:28.5714%;}
  .jr-honey--tab .jr-row--off .jr-item:first-child{margin-left:14.2857%;}
  .jr-honey--tab .jr-item>a{margin:6px;aspect-ratio:1/1.05;}
  .jr-honey--tab .jr-row+.jr-row{margin-top:-3%;}
}

/* 手機（≤767px）：隱藏平板蜂巢，顯示 2 格交錯蜂巢。
   格寬 = 100/(2+0.5)=40%；偏移行首格縮進 20%（半格），整行剛好 100% */
@media(max-width:767px){
  .jr-honey--tab{display:none;}
  .jr-honey--mob{display:block;}
  .jr-honey--mob .jr-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;}
  .jr-honey--mob .jr-item{flex:0 0 auto;width:40%;}
  .jr-honey--mob .jr-row--off .jr-item:first-child{margin-left:20%;}
  .jr-honey--mob .jr-item>a{margin:4px;aspect-ratio:1/1;}
  .jr-honey--mob .jr-row+.jr-row{margin-top:-4%;}
}