/* Client revision 2026-10-19: article-first, bright photography. */
.editorial-hero{padding:64px 0 46px;overflow:hidden;background:#faf9f7}
.editorial-heading{text-align:center;max-width:900px;margin:0 auto 38px;padding:0 24px}
.editorial-heading h1{font-size:clamp(32px,4vw,58px);line-height:1.24;letter-spacing:-.035em;margin:18px 0;color:#20232a}
.editorial-heading p{color:#656b72;line-height:1.8}
.editorial-heading h1{text-wrap:balance}
/* 首頁最新消息輪播（客戶 2026-10-21 參考 bcg.com）：中間一張最大並顯示標題，兩側依位置分大小等級——緊鄰中間最小、最外側中等；
   卡片一律垂直置中，同一等級上下緣對齊，與標題長短無關。data-pos 由伺服器先排好，client-revision.js 只負責輪動。 */
.editorial-track{--cw:min(320px,max(230px,19vw));--ch:calc(var(--cw)*4/3);--step:calc(var(--cw)*1.02);position:relative;height:calc(var(--ch) + 56px);margin:0;overflow:hidden;touch-action:pan-y}
.editorial-card{position:absolute;top:16px;left:calc(50% - var(--cw)/2);width:var(--cw);height:var(--ch);display:block;overflow:hidden;background:#e9e6e2;color:#20232a;text-decoration:none;z-index:1;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .5s}
.editorial-card[data-pos="0"]{z-index:3;box-shadow:0 18px 40px #19252d24}
.editorial-card[data-pos="1"]{z-index:2;transform:translateX(var(--step)) scale(.6)}
.editorial-card[data-pos="-1"]{z-index:2;transform:translateX(calc(var(--step)*-1)) scale(.6)}
.editorial-card[data-pos="2"]{transform:translateX(calc(var(--step)*2)) scale(.8)}
.editorial-card[data-pos="-2"]{transform:translateX(calc(var(--step)*-2)) scale(.8)}
.editorial-card[data-pos="hide"]{opacity:0;pointer-events:none}
.editorial-card.is-wrap{transition:none;opacity:0}
.editorial-card img{display:block;width:100%;height:100%;object-fit:cover}
.editorial-card-body{position:absolute;left:14px;right:14px;bottom:14px;display:block;padding:16px 18px;background:#ffffffc9;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:12px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;pointer-events:none}
.editorial-card[data-pos="0"] .editorial-card-body{opacity:1;transform:none;transition-delay:.3s}
.editorial-card small{color:#a73542;font-size:12px;letter-spacing:.06em}
.editorial-card h2{font-size:18px;line-height:1.5;margin:8px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.editorial-card .link-arrow{font-size:13px}
.editorial-card:focus-visible{outline:3px solid #a73542;outline-offset:3px}
.editorial-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px auto 0}
.editorial-controls button{border:1px solid #d6d4d1;background:white;color:#82343c;min-width:44px;min-height:44px;padding:8px 14px;cursor:pointer}
.editorial-controls a{margin-left:12px;font-size:14px;color:#953240}
/* PPT 第 5、9 頁：內頁標題區用明亮、有現代科技感的實景照片，依區塊分四張；左側白色漸層保證標題可讀 */
html[data-theme="classic"] .page-hero{--ph-img:url('../assets/hero-services.jpg');background:linear-gradient(90deg,#fffffff2 22%,#ffffffc4 46%,#ffffff1f 72%,#fff0),var(--ph-img) right center/cover!important}
html[data-theme="classic"] body.about .page-hero,html[data-theme="classic"] body.contactus .page-hero,html[data-theme="classic"] body.cert .page-hero{--ph-img:url('../assets/hero-about.jpg')}
html[data-theme="classic"] body.training .page-hero{--ph-img:url('../assets/hero-training.jpg')}
html[data-theme="classic"] body.insights .page-hero,html[data-theme="classic"] body.question .page-hero,html[data-theme="classic"] body.documents .page-hero,html[data-theme="classic"] body.document .page-hero,html[data-theme="classic"] body.search .page-hero{--ph-img:url('../assets/hero-docs.jpg')}
html[data-theme="classic"] .page-hero:before,html[data-theme="classic"] .page-hero:after,html[data-theme="classic"] .page-hero .cx5-ph-art{display:none!important}
@media(max-width:900px){html[data-theme="classic"] .page-hero{background:linear-gradient(90deg,#fffffff0,#ffffffd9 60%,#ffffffa6),var(--ph-img) 70% center/cover!important}}
html[data-theme="classic"] .cx-tr-media{background:url('../assets/banner-meeting.jpg') center/cover!important}
.cx-tr-media .cx5-train-art{display:none}
.news-categories{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.news-categories a{padding:9px 16px;border:1px solid #dadada;color:inherit}
.news-categories a:hover,.news-categories a[aria-current="page"],.lx-pg[aria-current="page"]{background:#ab3545;color:#fff}
.article-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:#6a6a70;border-bottom:1px solid #e5e5e5;padding-bottom:18px;margin:0 0 28px}
.article-preview{padding:14px;background:#fff5db;border:1px solid #e8bd60}
.doc-preview{width:100%;height:72vh;min-height:400px;border:1px solid #ddd;margin:24px 0}
.side-line.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;width:100%;margin-top:12px;background:#eff9f0;border-color:#bfdcc3;color:#187039}
/* PPT 第 11 頁：頁尾社群圖示要醒目——改成品牌色實心圓（Facebook 藍、LINE 綠、Email 品牌紅） */
html[data-theme="classic"] .site-footer .socials{gap:12px}
html[data-theme="classic"] .site-footer .socials a{width:46px;height:46px;border:0;color:#fff;background:#bf3f48;box-shadow:0 6px 16px #19252d1f;transition:transform .2s,box-shadow .2s}
html[data-theme="classic"] .site-footer .socials a[aria-label="Facebook"]{background:#1877f2}
html[data-theme="classic"] .site-footer .socials a[aria-label="LINE"]{background:#06c755}
html[data-theme="classic"] .site-footer .socials a:hover{transform:translateY(-3px);box-shadow:0 10px 22px #19252d33;color:#fff}
html[data-theme="classic"] .site-footer .socials svg{width:21px;height:21px}
.footer-grid>div> a>svg{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px}
.cx-cert-link .cx-dock-tip{min-width:110px}
html[data-theme="classic"] .cx-mbar{grid-template-columns:repeat(4,minmax(0,1fr))}
.insight-card h3{margin-top:12px}
@media(max-width:640px){.editorial-hero{padding-top:36px}.editorial-heading{margin-bottom:20px}.editorial-controls a{margin-left:0}.doc-preview{min-height:340px}.cx-dock{bottom:124px}}
@media(max-width:640px){.editorial-track{--cw:72vw;--step:calc(var(--cw)*.86)}.editorial-card[data-pos="2"],.editorial-card[data-pos="-2"]{opacity:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.editorial-card,.editorial-card-body{transition:none!important}}
/* 手機抽屜的服務分組標題（客戶 2026-10-21：服務項目要有分類）與上一組留點距離 */
.drawer .sub-group .sub-cap{padding-top:14px}

/* 首頁與列表頁對齊提案 2026-10-21 */
/* 最新消息：關鍵字篩選（GET ?q=）——輸入框與「搜尋」並排，篇數靠右 */
.cx-ins-q{justify-content:flex-start;gap:12px 14px}
.cx-ins-q .insight-filter{flex:1 1 300px;max-width:520px}
.cx-ins-q .insight-filter input::-webkit-search-cancel-button{cursor:pointer}
.cx-ins-q .cx-ins-go{height:50px;padding:0 26px;flex:none}
.cx-ins-q .insight-count{margin-left:auto}
.cx-ins-clear{margin-left:8px;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){
	.cx-ins-q .insight-filter{flex:1 1 0;min-width:0;max-width:none}
	.cx-ins-q .cx-ins-go{padding:0 18px}
	.cx-ins-q .insight-count{flex-basis:100%;margin-left:0}
}
/* 內頁版面（關於／服務詳情）對齊提案 2026-10-21 */
/* 關於 TTA（data-cx="about"，v2/js/site.js aboutLayout）：導語、段距、步驟卡、效益卡圖示、數字卡 */
html[data-theme="classic"] .prose .cx-ab>p{margin:0 0 1.1em}
html[data-theme="classic"] .prose .cx-ab>p.prose-lead{margin:0 0 .8em}
html[data-theme="classic"] .prose .cx-ab>h3{margin:1.6em 0 .6em}
html[data-theme="classic"] .prose .cx-ab-steps{margin:4px 0 28px;padding:0;list-style:none}
html[data-theme="classic"] .prose .cx-ab-steps .step h3{margin:0;font-size:18px;line-height:1.45;font-weight:700;letter-spacing:0}
html[data-theme="classic"] .prose .cx-ab-benefits .b-icon .hm-ico{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--hm-ico) center/contain no-repeat;mask:var(--hm-ico) center/contain no-repeat}
html[data-theme="classic"] .prose .cx-ab-stats .stat-label{font-size:13px}
html[data-theme="classic"] .prose .cx-ab-defs{margin-top:8px}
/* 被流程卡取代的舊流程圖：收進「查看流程圖」，內容保留、畫面不重複 */
.prose .cx5-figmore{margin:4px 0 28px;border:1px solid #e3e3e6;border-radius:10px;background:#fafafa}
.prose .cx5-figmore summary{cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;color:#a73542;min-height:44px;box-sizing:border-box}
.prose .cx5-figmore[open] summary{border-bottom:1px solid #e3e3e6}
.prose .cx5-figmore>*:not(summary){margin:16px;text-align:center}
.prose .cx5-figmore img{max-width:100%;height:auto}
/* 服務詳情：導語 + 標準圖（.cx5-intro，inc/page-systems.asp cxSysIntro） */
html[data-theme="classic"] .prose>.cx5-intro{margin:0 0 36px}
html[data-theme="classic"] .prose>.cx5-intro .prose-lead{margin:0}
html[data-theme="classic"] .prose>.cx5-intro .svc-figure,html[data-theme="classic"] .prose>.cx5-intro .svc-badge{margin:28px 0 0}
html[data-theme="classic"] .prose>.cx5-intro .svc-figure img{display:block;width:100%;height:auto}
@media(max-width:640px){html[data-theme="classic"] .prose>.cx5-intro .svc-figure,html[data-theme="classic"] .prose>.cx5-intro .svc-badge{max-width:180px;margin-top:20px}html[data-theme="classic"] .prose .cx-ab-steps .step h3{font-size:16px}}
/* 客戶 2026-10-21：內頁標題區高度要一致——固定高度、內容垂直置中；標題與導語各最多兩行，不再隨字數撐高 */
html[data-theme="classic"] .page-hero{box-sizing:border-box;height:460px;padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center}
html[data-theme="classic"] .page-hero>.page-hero-in{width:100%}
html[data-theme="classic"] .page-hero .page-hero-in h1,html[data-theme="classic"] .page-hero .page-hero-in .lead{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:640px){html[data-theme="classic"] .page-hero{height:340px}}
/* 服務項目下拉（客戶 2026-10-23：四大領域要有明顯不同的視覺；分類固定四種＋「其他」）：每類一張色卡——主色色帶標題（白字、圖示、服務數）、
   卡片右下淡色大圖示水印、服務前主色圓點；滑過卡片浮起、滑過服務右移並出現主色底。圖示、水印、數量由 v2/js/site.js decorate 補上 */
.sub-group[data-cat="quality"]{--hue:#bf3f48;--hue2:#8f2a33;--tint:#fbeff0}
.sub-group[data-cat="environment"]{--hue:#2f7d5c;--hue2:#1d5a41;--tint:#ebf5f0}
.sub-group[data-cat="safety"]{--hue:#c27f1f;--hue2:#8c5a12;--tint:#fbf3e6}
.sub-group[data-cat="security"]{--hue:#3a62a3;--hue2:#24467d;--tint:#ecf1f9}
.sub-group[data-cat="other"]{--hue:#6b7079;--hue2:#4a4e55;--tint:#f3f4f6}
html[data-theme="classic"] .sub-mega{grid-template-columns:repeat(4,236px);gap:14px;padding:18px}
html[data-theme="classic"] .sub-mega .sub-group{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 8px 12px;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#fff 40%,var(--tint));box-shadow:0 0 0 1px color-mix(in srgb,var(--hue) 18%,transparent),0 6px 18px #19252d0d;transition:transform .2s,box-shadow .2s}
html[data-theme="classic"] .sub-mega .sub-group:hover{transform:translateY(-3px);box-shadow:0 0 0 1px color-mix(in srgb,var(--hue) 35%,transparent),0 14px 30px color-mix(in srgb,var(--hue) 22%,transparent)}
html[data-theme="classic"] .sub-mega .sub-group .sub-cap{position:relative;display:flex;align-items:center;gap:10px;margin:0 -8px 8px;padding:16px 14px;background:linear-gradient(135deg,var(--hue),var(--hue2));font-size:15.5px;font-weight:700;letter-spacing:.05em;text-transform:none;color:#fff!important}
html[data-theme="classic"] .sub-group .sub-cap .cx5-mi{display:inline-grid;place-items:center;width:34px;height:34px;margin:0;border-radius:10px;background:#ffffff2e;box-shadow:inset 0 0 0 1px #ffffff40;color:#fff;vertical-align:middle;flex:none}
html[data-theme="classic"] .sub-group .sub-cap .cx5-mi svg{width:19px;height:19px}
html[data-theme="classic"] .sub-group .sub-cap .sub-n{margin-left:auto;min-width:24px;padding:2px 8px;border-radius:999px;background:#fff;color:var(--hue2);font-size:12px;font-style:normal;font-weight:700;letter-spacing:0;text-align:center}
html[data-theme="classic"] .sub-group .sub-wm{position:absolute;right:-18px;bottom:-18px;width:120px;height:120px;color:var(--hue);opacity:.08;pointer-events:none}
html[data-theme="classic"] .sub-group .sub-wm svg{width:100%;height:100%}
html[data-theme="classic"] .sub-mega .sub-group a{position:relative;z-index:1;border-radius:8px;padding:8px 12px 8px 24px;transition:background .15s,transform .15s,box-shadow .15s}
html[data-theme="classic"] .sub-mega .sub-group a::before{content:"";position:absolute;left:10px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--hue)}
html[data-theme="classic"] .sub-mega .sub-group a:hover,html[data-theme="classic"] .sub-mega .sub-group a:focus-visible,html[data-theme="classic"] .sub-mega .sub-group a.active{background:var(--tint);transform:translateX(3px);box-shadow:inset 3px 0 0 var(--hue)}
html[data-theme="classic"] .sub-mega .sub-group a:hover b,html[data-theme="classic"] .sub-mega .sub-group a.active b{color:var(--hue)!important}
/* 手機抽屜：同色系，主色色帶標題＋淺底色 */
html[data-theme="classic"] .drawer .sub-group[data-cat]{position:relative;margin:10px 0;padding-bottom:6px;overflow:hidden;border-radius:12px;background:var(--tint)}
html[data-theme="classic"] .drawer .sub-group[data-cat] .sub-cap{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:11px 12px;background:linear-gradient(135deg,var(--hue),var(--hue2));font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:none;color:#fff}
html[data-theme="classic"] .drawer .sub-group .sub-cap .cx5-mi{width:26px;height:26px;border-radius:8px}
html[data-theme="classic"] .drawer .sub-group .sub-cap .cx5-mi svg{width:15px;height:15px}
html[data-theme="classic"] .drawer .sub-group .sub-wm{width:90px;height:90px;right:-12px;bottom:-12px}
html[data-theme="classic"] .drawer .sub-group[data-cat] a{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){html[data-theme="classic"] .sub-mega .sub-group,html[data-theme="classic"] .sub-mega .sub-group a{transition:none}html[data-theme="classic"] .sub-mega .sub-group:hover,html[data-theme="classic"] .sub-mega .sub-group a:hover{transform:none}}
/* 服務項目下拉特效：開啟時四張卡依序彈入、服務逐條淡入；滑過卡片——邊框流光環繞、游標聚光、標題高光掃過、圖示彈跳、水印旋轉；
   滑過服務——圓點放大發光、右側滑出箭頭。--i / --j 與游標座標 --mx / --my 由 v2/js/site.js decorate 設定 */
@property --cx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cxSpin{to{--cx-a:360deg}}
@keyframes cxSweep{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
@keyframes cxPop{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(-10deg)}70%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1.08) rotate(0)}}
html[data-theme="classic"] .sub-mega .sub-group{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .35s ease calc(var(--i,0)*70ms),transform .45s cubic-bezier(.2,.9,.3,1.25) calc(var(--i,0)*70ms),box-shadow .25s}
html[data-theme="classic"] .sub-mega .sub-group a{opacity:0;transform:translateX(-8px);transition:opacity .3s ease calc(var(--i,0)*70ms + 120ms + var(--j,0)*35ms),transform .3s ease calc(var(--i,0)*70ms + 120ms + var(--j,0)*35ms),background .15s,box-shadow .15s}
html[data-theme="classic"] .has-sub:hover>.sub-mega .sub-group,html[data-theme="classic"] .has-sub:focus-within>.sub-mega .sub-group,html[data-theme="classic"] .has-sub.is-open>.sub-mega .sub-group{opacity:1;transform:none}
html[data-theme="classic"] .has-sub:hover>.sub-mega .sub-group a,html[data-theme="classic"] .has-sub:focus-within>.sub-mega .sub-group a,html[data-theme="classic"] .has-sub.is-open>.sub-mega .sub-group a{opacity:1;transform:none}
html[data-theme="classic"] .has-sub>.sub-mega .sub-group:hover{transform:translateY(-5px);transition-delay:0s}
html[data-theme="classic"] .has-sub>.sub-mega .sub-group a:hover,html[data-theme="classic"] .has-sub>.sub-mega .sub-group a:focus-visible{transform:translateX(4px);transition-delay:0s}
html[data-theme="classic"] .sub-mega .sub-group::before{content:"";position:absolute;inset:0;z-index:3;padding:2px;border-radius:inherit;background:conic-gradient(from var(--cx-a),transparent 0 55%,var(--hue) 75%,#fff 80%,var(--hue) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
html[data-theme="classic"] .sub-mega .sub-group:hover::before{opacity:1;animation:cxSpin 2.2s linear infinite}
html[data-theme="classic"] .sub-mega .sub-group::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--hue) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
html[data-theme="classic"] .sub-mega .sub-group:hover::after{opacity:1}
html[data-theme="classic"] .sub-mega .sub-group .sub-cap{overflow:hidden;z-index:1}
html[data-theme="classic"] .sub-mega .sub-group .sub-cap::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff59,transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
html[data-theme="classic"] .sub-mega .sub-group:hover .sub-cap::after{animation:cxSweep .9s ease}
html[data-theme="classic"] .sub-mega .sub-group:hover .sub-cap .cx5-mi{animation:cxPop .6s ease forwards;background:#ffffff47}
html[data-theme="classic"] .sub-group .sub-wm{transition:transform .6s cubic-bezier(.2,.9,.3,1.2),opacity .4s}
html[data-theme="classic"] .sub-mega .sub-group:hover .sub-wm{transform:rotate(-14deg) scale(1.2);opacity:.16}
html[data-theme="classic"] .sub-mega .sub-group a::before{transition:transform .2s,box-shadow .2s}
html[data-theme="classic"] .sub-mega .sub-group a:hover::before,html[data-theme="classic"] .sub-mega .sub-group a.active::before{transform:scale(1.5);box-shadow:0 0 0 4px color-mix(in srgb,var(--hue) 22%,transparent),0 0 10px var(--hue)}
html[data-theme="classic"] .sub-mega .sub-group a::after{content:"→";position:absolute;right:12px;top:50%;color:var(--hue);font-weight:700;opacity:0;transform:translate(-8px,-50%);transition:opacity .2s,transform .2s}
html[data-theme="classic"] .sub-mega .sub-group a:hover::after,html[data-theme="classic"] .sub-mega .sub-group a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
@media(prefers-reduced-motion:reduce){html[data-theme="classic"] .sub-mega .sub-group,html[data-theme="classic"] .sub-mega .sub-group a{opacity:1!important;transform:none!important;transition:none!important}html[data-theme="classic"] .sub-mega .sub-group::before,html[data-theme="classic"] .sub-mega .sub-group .sub-cap::after,html[data-theme="classic"] .sub-mega .sub-group .cx5-mi{animation:none!important}html[data-theme="classic"] .sub-mega .sub-group:hover .sub-wm{transform:none}}