/* 全站共用頁尾「品牌光帶」（2026-10-03 老闆選定）：深海軍藍底，背後是 three.js 的立體光帶（取自商標兩道弧線，程式 js/footer3d.js），
   文字一律在一般 HTML 層。頁尾內容由 _tools/footer_build.py 產生，每頁逐字相同；頁尾樣式只寫在這個檔。 */
.ftr{
  --g:clamp(14px,1.15vw,26px);
  --r:clamp(18px,1.4vw,28px);
  position:relative;isolation:isolate;overflow:hidden;
  margin:0;padding-block:clamp(56px,4.4vw,100px) 20px;border:0;
  color:#fff;font-size:16px;line-height:1.7;
  background:
    radial-gradient(70% 90% at 12% 0%,#0d4f8f 0%,#0d4f8f00 62%),
    radial-gradient(60% 70% at 100% 100%,#0b3f78 0%,#0b3f7800 60%),
    linear-gradient(180deg,#06264b 0%,#041c38 52%,#031429 100%);
}
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:1;background:linear-gradient(90deg,#4fc0f000,#7fd3ff 22%,#ffffff 50%,#7fd3ff 78%,#4fc0f000);box-shadow:0 0 28px 6px #4fc0f055;pointer-events:none}
.ftr a{color:inherit;text-decoration:none}
.ftr a:focus-visible{outline:3px solid #a9d9f7;outline-offset:4px}
.ftr .nw{white-space:nowrap}
.ftr-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ftr-flow{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.ftr-flow.is-live{opacity:1}
.ftr-inner{position:relative;container:ftr/inline-size}

/* 第一排：品牌＋三顆主要聯絡鍵 */
.ftr-head{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,3fr);align-items:stretch;gap:var(--g)}
.ftr-brand{display:flex;align-items:center;gap:clamp(16px,1.2vw,26px);min-width:0;padding-block:6px;transition:transform .25s}
.ftr-brand:hover{transform:translateY(-3px)}
.ftr-brand img{flex:0 0 auto;width:clamp(78px,5.2vw,120px);height:auto;filter:drop-shadow(0 12px 22px #00060fcc)}
.ftr-brand__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ftr-brand__text strong{font-size:clamp(22px,1.45vw,34px);font-weight:800;line-height:1.35;letter-spacing:.03em;white-space:nowrap;text-shadow:0 2px 12px #0008}
.ftr-brand__text span{color:#a9d9f7;font-size:clamp(16px,.8vw,18px)}
.ftr-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.ftr-keys li{display:flex;min-width:0}
.ftr-key{display:flex;align-items:center;gap:clamp(12px,1vw,20px);width:100%;min-width:0;padding:clamp(16px,1.25vw,28px) clamp(16px,1.3vw,30px);border:1px solid #a6dbff40;border-bottom:5px solid #01152b;border-radius:var(--r);background:linear-gradient(160deg,#ffffff2e,#ffffff0d 58%,#ffffff05),linear-gradient(180deg,#0d3a6af2,#082c55f5);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14,0 22px 34px -20px #000e;transition:transform .2s,box-shadow .2s,background .2s,border-bottom-width .12s}
.ftr-key:hover{transform:translateY(-4px);background:linear-gradient(160deg,#ffffff3d,#ffffff14 58%,#ffffff08),linear-gradient(180deg,#0f4074f2,#0a3260f5);box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #7fd3ff59,0 28px 40px -20px #000e,0 0 36px -8px #4fc0f066}
.ftr-key:active{transform:translateY(2px);border-bottom-width:2px}
.ftr-key__body{display:flex;flex-direction:column;min-width:0}
.ftr-key::after{content:"";flex:0 0 auto;width:38px;height:38px;margin-left:auto;border:1px solid #a6dbff4d;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(180deg,#ffffff2e,#ffffff0d);box-shadow:inset 0 1px 0 #ffffff4d;transition:transform .2s,background-color .2s}
.ftr-key:hover::after{transform:translateX(3px);background-color:#1e88e5}
.ftr-lbl{display:block;color:#a9d9f7;font-size:clamp(16px,.8vw,18px);line-height:1.5;white-space:nowrap}
.ftr-key__val{font-size:clamp(20px,1.15vw,28px);font-weight:800;line-height:1.35;letter-spacing:.01em;white-space:nowrap}
.ftr-ico{flex:0 0 auto;display:grid;place-items:center;width:clamp(46px,2.9vw,60px);height:clamp(46px,2.9vw,60px);border:1px solid #ffffff8c;border-bottom:3px solid #014e8e;border-radius:clamp(13px,.85vw,17px);background:linear-gradient(145deg,#86dcfc,#1e88e5 55%,#0267b9);box-shadow:inset 0 1px 0 #ffffffb3,0 10px 18px -8px #000c}
.ftr-ico svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}


/* 第二排：玻璃網站地圖 */
.ftr-map{margin-top:var(--g);padding:clamp(22px,2vw,46px);border:1px solid #a6dbff33;border-radius:var(--r);background:linear-gradient(160deg,#0e3c6dd9,#072a50c7 55%,#05203fcc);box-shadow:inset 0 1px 0 #ffffff33,inset 0 -5px 0 #000f2299,0 34px 54px -32px #000e}
.ftr-map{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(22px,1.8vw,40px) clamp(14px,1.3vw,30px)}
.ftr-group{min-width:0}
/* 網站地圖排法（2026-10-05 產品、服務拆成兩組）：服務與產業應用、安裝實績與影音專區、線上選購與聯絡我們各疊在同一欄，讓每欄高度接近 */
.ftr-map{grid-template-rows:auto 1fr}
.ftr-group{grid-row:1/3}
.ftr-group--about{grid-column:1}.ftr-group--products{grid-column:2}.ftr-group--services{grid-column:3;grid-row:1}.ftr-group--apps{grid-column:3;grid-row:2}.ftr-group--projects{grid-column:4;grid-row:1}.ftr-group--videos{grid-column:4;grid-row:2}
.ftr-group--downloads{grid-column:5}.ftr-group--shop{grid-column:6;grid-row:1}.ftr-group--contact{grid-column:6;grid-row:2}.ftr-group--faq{grid-column:7}
.ftr-group__title{color:#fff}
.ftr-group__title{margin:0 0 12px;font-size:clamp(17px,.92vw,21px);line-height:1.4}
.ftr-group__title a{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 14px;border:1px solid #a6dbff47;border-bottom:3px solid #011a35;border-radius:13px;background:linear-gradient(180deg,#ffffff26,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff4d,0 10px 16px -12px #000e;font-weight:800;white-space:nowrap;transition:transform .18s,background .18s,box-shadow .18s,border-bottom-width .12s}
.ftr-group__title a::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:3px;background:linear-gradient(145deg,#a9e6ff,#1e88e5);box-shadow:0 0 10px #4fc0f0}
.ftr-group__title a:hover{transform:translateY(-3px);background:linear-gradient(180deg,#ffffff38,#ffffff12);box-shadow:inset 0 1px 0 #ffffff66,0 0 0 1px #7fd3ff4d,0 14px 20px -12px #000e}
.ftr-group__title a:active{transform:translateY(1px);border-bottom-width:1px}
.ftr-group__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ftr-group__list a{position:relative;display:flex;align-items:center;min-height:40px;padding:6px 10px 6px 18px;border:1px solid transparent;border-radius:11px;color:#cfe6fb;font-size:clamp(16px,.74vw,18px);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;transition:color .16s,background .16s,box-shadow .16s,transform .16s}
.ftr-group__list a::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#4fc0f0;opacity:.65;transition:opacity .16s,box-shadow .16s}
.ftr-group__list a:hover{transform:translateY(-1px);border-color:#a6dbff33;background:linear-gradient(180deg,#ffffff21,#ffffff0b);box-shadow:inset 0 1px 0 #ffffff33,0 8px 14px -10px #000c;color:#fff}
.ftr-group__list a:hover::before{opacity:1;box-shadow:0 0 8px #7fd3ff}
.ftr-group__list a:active{transform:translateY(1px)}

/* 第三排：地址、傳真、營業時間 */
.ftr-info{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.72fr) minmax(0,1.7fr);margin:var(--g) 0 0;padding:0;list-style:none;border:1px solid #a6dbff33;border-radius:var(--r);background:linear-gradient(160deg,#0e3c6dc7,#062849b8);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -4px 0 #000f2280,0 26px 44px -30px #000d}
.ftr-ci{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding:clamp(16px,1.25vw,26px) clamp(18px,1.45vw,32px)}
.ftr-ci+.ftr-ci{border-left:1px solid #a6dbff29}
.ftr-ci .ftr-ico{width:46px;height:46px;border-radius:13px}
.ftr-ci__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftr-val{display:block;color:#fff;font-size:clamp(16px,.86vw,19px);font-weight:700;line-height:1.65}
a.ftr-val{display:inline-block;border-radius:8px;transition:color .16s,text-shadow .16s}
a.ftr-val:hover{color:#fff;text-shadow:0 0 14px #7fd3ffcc}
.ftr-ci--clock .ftr-val{font-weight:600}
.ftr-ci--clock .hl+.hl::before{content:" "}

/* 底列：社群、版權、網站資訊（右側讓出 LINE 浮動鈕） */
.ftr-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(22px,1.7vw,36px);padding-top:20px;padding-right:max(0px,calc(150px - (100vw - 100%) / 2));border-top:1px solid #a6dbff29}
.ftr-social{display:flex;align-items:center;gap:12px}
.ftr-social__label{margin-right:4px;font-weight:700;color:#dff1ff}
.ftr .ftr-soc{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid #fff;border-bottom:3px solid #8db6d6;border-radius:50%;background:linear-gradient(180deg,#fff,#dcecf9);color:#0267b9;box-shadow:0 10px 18px -8px #000d;transition:transform .18s,box-shadow .18s,border-bottom-width .12s}
.ftr-soc:hover{transform:translateY(-3px);box-shadow:0 14px 22px -8px #000e,0 0 0 4px #7fd3ff33}
.ftr-soc:active{transform:translateY(1px);border-bottom-width:1px}
.ftr-soc svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ftr-copy{margin:0 0 0 auto;color:#cfe6fb;font-size:clamp(16px,.72vw,17px)}
.ftr-legal{display:flex;align-items:center;gap:10px}
.ftr-legal a{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #a6dbff40;border-bottom:3px solid #011a35;border-radius:12px;background:linear-gradient(180deg,#ffffff21,#ffffff08);box-shadow:inset 0 1px 0 #ffffff40;font-size:16px;font-weight:700;white-space:nowrap;transition:transform .18s,background .18s,border-bottom-width .12s}
.ftr-legal a:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffffff33,#ffffff12)}
.ftr-legal a:active{transform:translateY(1px);border-bottom-width:1px}

/* 寬度細分：依頁尾內容寬度（band）切換，320～2560 連續調整 */
@container ftr (max-width:1649px){
  .ftr-map{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto auto}
  .ftr-group--about{grid-column:1;grid-row:1/3}.ftr-group--products{grid-column:2;grid-row:1/3}.ftr-group--services{grid-column:3;grid-row:1/3}.ftr-group--apps{grid-column:4;grid-row:1/3}
  .ftr-group--projects{grid-column:1;grid-row:3}.ftr-group--videos{grid-column:1;grid-row:4}.ftr-group--downloads{grid-column:2;grid-row:3/5}.ftr-group--shop{grid-column:3;grid-row:3}.ftr-group--contact{grid-column:3;grid-row:4}.ftr-group--faq{grid-column:4;grid-row:3/5}
}
@container ftr (max-width:1799px){
  .ftr-head{grid-template-columns:minmax(0,1fr)}
  .ftr-brand{padding-block:0 4px}
}
@container ftr (max-width:1079px){
  .ftr-key{flex-direction:column;align-items:flex-start;gap:12px}
  .ftr-key::after{display:none}
}
@container ftr (max-width:1049px){
  .ftr-ci{justify-content:flex-start}
  .ftr-info{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr-ci.ftr-ci--clock{grid-column:1/-1;border-left:0;border-top:1px solid #a6dbff29}
}
@container ftr (max-width:860px){
  .ftr-copy{flex-basis:100%;order:3;margin:0}
  .ftr-legal{margin-left:auto}
}
@container ftr (max-width:759px){
  .ftr-keys{grid-template-columns:minmax(0,1fr)}
  .ftr-key{flex-direction:row;align-items:center}
  .ftr-key::after{display:block;width:34px;height:34px}
}
@container ftr (max-width:599px){
  .ftr-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .ftr-map{grid-template-rows:auto auto auto auto auto auto}
  .ftr-group--about{grid-column:1;grid-row:1}.ftr-group--apps{grid-column:2;grid-row:1}
  .ftr-group--products{grid-column:1;grid-row:2/4}.ftr-group--services{grid-column:2;grid-row:2}.ftr-group--contact{grid-column:2;grid-row:3}
  .ftr-group--projects{grid-column:1;grid-row:4}.ftr-group--videos{grid-column:2;grid-row:4}
  .ftr-group--downloads{grid-column:1;grid-row:5}.ftr-group--shop{grid-column:2;grid-row:5}
  .ftr-group--faq{grid-column:1/-1;grid-row:6}
  .ftr-info{grid-template-columns:minmax(0,1fr)}
  .ftr-ci+.ftr-ci{border-left:0;border-top:1px solid #a6dbff29}
  .ftr-brand img{width:68px}
  .ftr-brand__text strong{font-size:21px}
  .ftr-social{flex-wrap:wrap}
  .ftr-legal{margin-left:0}
}
@container ftr (max-width:400px){
  .ftr-group__title a{padding:8px 10px;gap:7px;font-size:16px}
  .ftr-group__list a{padding-left:16px;padding-right:6px}
  .ftr-group__list a::before{left:6px}
  .ftr-ci{padding:14px 16px;gap:12px}
}
@media (max-width:899px){.ftr{padding-top:48px}}
@media (max-width:640px){.ftr-group__list a{min-height:44px}}
@media (max-width:600px){.ftr-bottom{padding-right:84px}}
@container ftr (max-width:419px){.ftr-key::after{display:none!important}.ftr-key__val{font-size:18px}}