:root{ --paper:#F7F7F4; --paper-sunk:#F1F0EC; --paper-raise:#FFFFFF; --ink:#211D1E; --ink-2:#47433C; --ink-3:#5F5B54; --rule:#CAC6BE; --rule-soft:#E2DFD8; --seal:#9B2C2C; --seal-on-dark:#D8827A; --on-dark:#F2F0EA; --on-dark-2:rgba(242,240,234,.82); --on-dark-3:rgba(242,240,234,.62); --rule-dark:rgba(242,240,234,.2); --serif:"Cormorant Garamond","Noto Serif TC",serif; --serif-tc:"Noto Serif TC","Songti TC",serif; --sans:"Noto Sans TC","PingFang TC",-apple-system,sans-serif; --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,"Noto Sans TC",monospace; --content:1290px; --gutter:30px; --pad:max(24px,calc((100vw - 1290px)/2)); --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; /* 區塊間距：電腦 120 / 平板 80 / 手機 60，全站唯一來源 */ --sec-gap:120px; --sec-half:60px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;} img{max-width:100%;display:block;} a{color:inherit;} :focus-visible{outline:2px solid currentColor;outline-offset:3px;} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.03;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");} /* ══════ 版面骨架（寫死，所有區塊共用） ══════ */ .wrap{width:min(100% - 44px,var(--content));margin-inline:auto;} .row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);} .main {grid-column:1 / 13;} /* 標題區滿 12 欄 */ .aux {grid-column:9 / 13;grid-row:1;align-self:end;} .wide {grid-column:1 / 13;} /* 內容滿 12 欄 */ .col-a {grid-column:1 / 7;} /* 左 6 欄 */ .col-b {grid-column:7 / 13;} /* 右 6 欄 */ /* ══════ 文字層級（四級，落差寫死） ══════ */ .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--ink-3);margin:0 0 var(--s3);display:flex;align-items:center;gap:14px;} .eyebrow .no{color:var(--seal);font-variant-numeric:tabular-nums;letter-spacing:.16em;} .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:60px;} .eyebrow.on{color:var(--on-dark-3);} .eyebrow.on::after{background:var(--rule-dark);} .title{font-family:var(--serif-tc);font-size:52px;line-height:1.26;font-weight:600;margin:0;letter-spacing:.03em;} .trule{height:1px;background:var(--ink);margin:var(--s5) 0 var(--s4);} .lead{font-size:19px;line-height:2.0;color:var(--ink-2);margin:0;max-width:none;letter-spacing:.01em;} .body{font-size:15.5px;line-height:2.05;color:var(--ink-2);margin:0;} .cap{font-family:var(--mono);font-size:12px;line-height:2;color:var(--ink-3);letter-spacing:.06em;} .secno{font-family:var(--serif);font-size:16px;letter-spacing:.2em;color:var(--seal);display:block;} /* 區塊間距：唯一來源。相鄰兩區塊之間恆為 --sec-gap */ .sec{padding-block:var(--sec-half);} .sec-more{margin-top:var(--s5);} /* 深色滿版區與首尾：邊界同樣補滿 --sec-gap，全頁九個區塊邊界一致 */ #philosophy{padding-top:var(--sec-half);} #process{padding-bottom:var(--sec-gap);} #value{padding-top:var(--sec-gap);} #news{padding-bottom:var(--sec-gap);} .band .in,.cta .in{position:relative;padding-block:var(--sec-gap);} /* 區塊標頭：標題與右側輔助元素水平對齊 */ .sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start;} .sec-head .main{grid-column:1 / 13;grid-row:1;} .sec-head .aux{grid-column:9 / 13;grid-row:1;align-self:start;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:21px;} .link-a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:15.5px;border-bottom:1px solid var(--rule);padding-bottom:8px;transition:border-color .25s;} .link-a:hover{border-bottom-color:var(--ink);} .link-a .ar{width:19px;height:19px;flex:0 0 19px;color:var(--seal);transition:transform .35s cubic-bezier(.22,.8,.3,1);} .link-a .ar svg{width:100%;height:100%;display:block;} .link-a:hover .ar{transform:translateX(6px);} /* ══════ 頁眉 ══════ */ .hd{position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--paper) 93%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);} .hd .in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);} .hd .mark{display:flex;align-items:center;text-decoration:none;color:inherit;line-height:1;} .hd .mark-logo{display:block;height:34px;width:auto;} .burger{width:44px;height:44px;border:1px solid var(--rule);background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .25s;padding:0;} .burger:hover{border-color:var(--ink);} .burger i{display:block;width:18px;height:1px;background:var(--ink);transition:transform .3s,opacity .3s;} .hd .acts{display:flex;align-items:center;gap:10px;} .btn-line{font-family:var(--sans);font-size:13px;letter-spacing:.08em;background:none;border:1px solid var(--rule);color:var(--ink);padding:11px 16px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .25s;} .btn-line:hover{border-color:var(--ink);} .btn-solid{font-family:var(--sans);font-size:13.5px;letter-spacing:.04em;background:var(--ink);border:1px solid var(--ink);color:var(--paper);padding:10px 17px;white-space:nowrap;text-decoration:none;transition:background .25s;} .btn-solid:hover{background:#3A3435;} .btn-ondark{font-family:var(--sans);font-size:15px;letter-spacing:.05em;background:var(--on-dark);border:1px solid var(--on-dark);color:var(--ink);padding:15px 30px;text-decoration:none;transition:background .25s,color .25s;} .btn-ondark:hover{background:transparent;color:var(--on-dark);} .btn-ondark-g{font-family:var(--sans);font-size:15px;letter-spacing:.05em;background:none;border:1px solid rgba(242,240,234,.42);color:var(--on-dark);padding:15px 30px;text-decoration:none;transition:border-color .25s,background .25s;} .btn-ondark-g:hover{border-color:var(--on-dark);background:rgba(242,240,234,.06);} /* ══════ 01 主視覺 ══════ */ .hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:min(78vh,680px);} .hero .dk{ background: radial-gradient(130% 95% at 10% 6%, rgba(255,248,236,.13) 0%, transparent 58%), radial-gradient(90% 70% at 96% 96%, rgba(0,0,0,.4) 0%, transparent 60%), linear-gradient(152deg,#453D3E 0%,#2B2526 40%,#120F10 100%); color:var(--on-dark);padding:var(--s7) var(--s6) var(--s7) var(--pad); display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden; } .hero .dk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(242,240,234,.055) 1px,transparent 1px);background-size:11px 11px;pointer-events:none;} .hero .dk > *{position:relative;} .hero .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--on-dark-3);margin:0 0 var(--s5);line-height:2.1;} .hero h1{font-family:var(--serif-tc);font-size:clamp(32px,3.5vw,50px);line-height:1.36;font-weight:600;margin:0 0 var(--s4);letter-spacing:.03em;} .hero .hrule{height:1px;width:64px;background:var(--seal);margin-bottom:var(--s4);} .hero .sub{font-size:16px;line-height:2.15;color:var(--on-dark-2);margin:0;} .hero .btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:var(--s6);} .hero .im{position:relative;background:var(--paper-sunk);} .hero .imw{position:absolute;inset:0;overflow:hidden;} .hero .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) sepia(.14) contrast(1.05) brightness(.98);} .hero .m-img{display:none;} .hero .stamp{position:absolute;left:-54px;bottom:var(--s7);width:108px;height:108px;border-radius:50%;background:var(--paper);border:1px solid var(--seal);color:var(--seal);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--serif-tc);font-size:13.5px;font-weight:600;line-height:1.5;letter-spacing:.14em;box-shadow:inset 0 1px 5px rgba(155,44,44,.16);z-index:3;} .hero .stamp small{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;margin-top:6px;opacity:.85;} /* ══════ 02 理念 ══════ */ .phil-p{font-family:var(--serif-tc);font-size:17px;line-height:2.25;color:var(--ink-2);margin:0 0 var(--s4);letter-spacing:.02em;} .phil-p:last-of-type{margin-bottom:0;} .title .em{color:var(--seal);} .pic{height:100%;min-height:400px;overflow:hidden;background:var(--paper-sunk);} .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.28) contrast(1.05);transition:transform .8s cubic-bezier(.22,.8,.3,1);} .pic:hover img{transform:scale(1.03);} .phil-body{display:flex;flex-direction:column;} .phil-body .phil-p:last-of-type{margin-bottom:0;} .phil-body .sec-more{margin-top:auto;padding-top:var(--s5);} #philosophy .title{font-size:44px;line-height:1.34;} /* ══════ 徽章與三階 ══════ */ .badges{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s6);margin-top:var(--s6);} .bdg{padding:0;} .bdg-pic{overflow:hidden;background:var(--paper-sunk);margin-bottom:var(--s4);} .bdg-pic img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;filter:grayscale(1) sepia(.2) contrast(1.04);transition:transform .8s cubic-bezier(.22,.8,.3,1);} .bdg-pic:hover img{transform:scale(1.03);} .bdg .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--seal);} .bdg .nm{font-family:var(--serif-tc);font-size:34px;font-weight:600;margin-top:5px;letter-spacing:.08em;} .bdg .dsc{font-size:15px;line-height:2.0;color:var(--ink-2);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule-soft);} .mtx th{font-family:var(--serif-tc);font-size:20px;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.06em;color:var(--ink);font-weight:500;text-align:center;padding:var(--s4) 10px 18px;border-bottom:1px solid var(--ink);vertical-align:bottom;} .mtx th:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-3);text-align:left;padding-left:14px;} .mtx td.yes{font-size:15px;} .mtx th:first-child{text-align:left;} .mtx{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px;} .mtx td{padding:16px 10px;border-bottom:1px solid var(--rule-soft);text-align:center;font-family:var(--mono);font-size:14px;color:var(--ink-2);} .mtx th:nth-child(2),.mtx td:nth-child(2){border-left:1px solid var(--rule-soft);} .mtx th:nth-child(3),.mtx td:nth-child(3){background:rgba(202,198,190,.13);} .mtx th:nth-child(4),.mtx td:nth-child(4){background:rgba(155,44,44,.055);} .dot-y{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--seal);position:relative;} .dot-y::after,.dot-y::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--seal);opacity:0;animation:ripple 3.2s cubic-bezier(.22,.72,.3,1) infinite;} .dot-y::before{animation-delay:1.6s;} .mtx tbody tr:nth-child(2) .dot-y::after{animation-delay:.4s;} .mtx tbody tr:nth-child(2) .dot-y::before{animation-delay:2s;} .mtx tbody tr:nth-child(3) .dot-y::after{animation-delay:.8s;} .mtx tbody tr:nth-child(3) .dot-y::before{animation-delay:2.4s;} .mtx tbody tr:nth-child(6) .dot-y::after{animation-delay:1.2s;} .mtx tbody tr:nth-child(6) .dot-y::before{animation-delay:2.8s;} @keyframes ripple{ 0%{transform:scale(.55);opacity:.62;} 62%{transform:scale(2.1);opacity:0;} 100%{transform:scale(2.1);opacity:0;} } .dash-n{display:inline-block;width:14px;height:1px;background:var(--rule);vertical-align:middle;} .mtx td:first-child{text-align:left;font-family:var(--sans);font-size:15.5px;color:var(--ink-2);padding-left:14px;} .mtx tr{transition:background .3s;} .mtx tr:hover{background:color-mix(in srgb,var(--paper-sunk) 70%,transparent);} .mtx .yes{color:var(--seal);} /* ══════ 流程 ══════ */ .flow{--flow-gap:var(--s5);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--flow-gap);margin-top:var(--s6);align-items:stretch;} .fstep{padding:0;position:relative;} .f-ic{width:62px;height:62px;color:var(--seal);margin-bottom:var(--s4);} .f-ic svg{width:100%;height:100%;display:block;} .fstep .fph{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:12px;} .fstep .t{font-family:var(--serif-tc);font-size:24px;font-weight:600;letter-spacing:.05em;color:var(--seal);} .fstep .d{font-size:14px;line-height:1.95;color:var(--ink-2);margin-top:12px;} .fstep .arw{position:absolute;top:50%;right:calc(var(--flow-gap) / -2);width:26px;height:12px;transform:translate(50%,-50%);color:var(--ink-3);pointer-events:none;} .fstep .arw svg{width:100%;height:100%;display:block;} .fstep:last-child .arw{display:none;} /* ══════ 深色帶 ══════ */ .band{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;} .band .bg{position:absolute;inset:0;} .band .bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:grayscale(.55) contrast(1.05) brightness(.8);} .band .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(28,24,25,.92) 0%,rgba(28,24,25,.7) 44%,rgba(28,24,25,.22) 100%);} .band blockquote{font-family:var(--serif-tc);font-size:clamp(25px,3.2vw,44px);line-height:1.56;font-weight:600;margin:0;letter-spacing:.05em;} .band .attr{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--on-dark-3);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-dark);display:inline-block;} /* ══════ 價值 ══════ */ /* 圖片維持欄寬對齊格線；只有文字內縮，兩欄文字之間才不會太近 */ .vtext{padding-inline:5%;} .vpic{overflow:hidden;background:var(--paper-sunk);} .vpic img{width:100%;height:300px;object-fit:cover;filter:grayscale(1) sepia(.26) contrast(1.05);transition:transform .8s cubic-bezier(.22,.8,.3,1);} .vpic:hover img{transform:scale(1.03);} .vhead{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);} .vno{font-family:var(--serif-tc);font-size:42px;line-height:1;font-weight:400;color:var(--seal);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;} .vh{font-family:var(--serif-tc);font-size:28px;font-weight:600;margin:0;letter-spacing:.05em;line-height:1.2;} .vp{font-size:16px;line-height:2.1;color:var(--ink-2);margin:var(--s3) 0 0;} /* ══════ 事實表 ══════ */ .sealbox{width:112px;height:112px;border-radius:50%;border:1.5px solid var(--seal);color:var(--seal);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--serif-tc);font-size:13.5px;font-weight:600;line-height:1.5;letter-spacing:.16em;box-shadow:inset 0 1px 5px rgba(155,44,44,.16);background:radial-gradient(circle at 50% 36%,rgba(155,44,44,.05),transparent 68%);} .sealbox small{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;margin-top:8px;opacity:.85;} /* ══════ 顧問 ══════ */ .acard{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule-soft);background:var(--paper-raise);overflow:hidden;position:relative;transition:border-color .4s,transform .45s cubic-bezier(.22,.8,.3,1),box-shadow .45s;} .acard:hover{border-color:var(--rule);transform:translateY(-5px);box-shadow:0 18px 42px -26px rgba(33,29,30,.4);} .ac-photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-sunk);} .ac-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) sepia(.15) contrast(1.06) brightness(1.02);transition:transform .8s cubic-bezier(.22,.8,.3,1);} .acard:hover .ac-photo img{transform:scale(1.04);} .ac-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(33,29,30,.16) 100%);} .ac-lv{position:absolute;left:0;bottom:0;z-index:2;background:var(--paper-raise);border-top:1px solid var(--rule);border-right:1px solid var(--rule);padding:9px 15px 7px;display:flex;align-items:baseline;gap:8px;} .ac-lv .rn{font-family:var(--serif);font-size:26px;line-height:1;color:var(--seal);letter-spacing:.04em;} .ac-lv .lb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);} .ac-body{padding:var(--s4);} .ac-nm{font-family:var(--serif-tc);font-size:23px;font-weight:600;letter-spacing:.12em;} .ac-rows{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule-soft);} .ac-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--ink-3);line-height:2.1;letter-spacing:.02em;} .ac-r b{font-family:var(--mono);font-size:13.5px;color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:0;} .ac-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule-soft);} .ac-stat{font-size:13px;color:var(--ink-3);letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;} .ac-stat b{color:var(--seal);font-weight:500;display:inline-flex;align-items:center;gap:5px;} .ac-stat b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--seal);} .ac-seal{width:46px;height:46px;border-radius:50%;border:1px solid var(--seal);color:var(--seal);display:flex;align-items:center;justify-content:center;font-family:var(--serif-tc);font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.06em;opacity:.72;transition:opacity .4s,transform .4s cubic-bezier(.22,.8,.3,1);box-shadow:inset 0 1px 3px rgba(155,44,44,.14);flex:0 0 46px;} .acard:hover .ac-seal{opacity:1;} .ac-seal small{display:none;} /* ══════ 消息：三則同一版型 ══════ */ .newslist{margin-top:0;} .tagc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--seal);border:1px solid var(--rule);padding:5px 11px;display:inline-block;line-height:1.4;white-space:nowrap;} .nrow{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:var(--s4);border-bottom:1px solid var(--rule-soft);align-items:center;text-decoration:none;transition:background .35s,padding-left .35s cubic-bezier(.22,.8,.3,1);} .nrow:hover{background:color-mix(in srgb,var(--paper-sunk) 78%,transparent);padding-left:14px;} .nrow .d{grid-column:1 / 3;font-family:var(--mono);font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em;} .nrow .c{grid-column:3 / 4;} .nrow .t{grid-column:4 / 12;font-family:var(--serif-tc);font-size:20px;font-weight:600;letter-spacing:.03em;line-height:1.6;} .nrow .g{grid-column:12 / 13;justify-self:end;width:26px;height:26px;color:var(--ink-3);transition:transform .35s cubic-bezier(.22,.8,.3,1),color .3s;} .nrow .g svg{width:100%;height:100%;display:block;} .nrow:hover .g{transform:translateX(6px);color:var(--ink);} /* ══════ CTA（背景圖 + 漸層） ══════ */ .cta{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;} .cta .bg{position:absolute;inset:0;} .cta .bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(.7) sepia(.2) contrast(1.04) brightness(.62);} .cta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(26,22,23,.95) 0%,rgba(26,22,23,.82) 40%,rgba(26,22,23,.42) 72%,rgba(26,22,23,.24) 100%);} .cta h2{font-family:var(--serif-tc);font-size:clamp(28px,3.6vw,50px);line-height:1.34;font-weight:600;margin:0;letter-spacing:.05em;} .cta .crule{height:1px;width:64px;background:var(--seal-on-dark);margin:var(--s5) 0 var(--s4);} .cta p{font-size:16.5px;line-height:2.05;color:var(--on-dark-2);margin:0 0 var(--s5);} .cta .btns{display:flex;gap:12px;flex-wrap:wrap;} /* 右側要點卡：icon 主導，加底板確保在照片上仍可讀 */ .cta .row{align-items:stretch;} .cta .col-aux{display:flex;flex-direction:column;gap:var(--s3);justify-content:center;} .cta .side{flex:1;display:flex;gap:var(--s3);align-items:center;border:1px solid rgba(242,240,234,.28);background:rgba(14,11,12,.58);padding:var(--s4);transition:border-color .35s,background .35s;} .cta .side .ic{width:46px;height:46px;flex:0 0 46px;color:var(--seal-on-dark);} .cta .side .ic svg{width:100%;height:100%;display:block;} .cta .side .tx{display:block;min-width:0;} .cta .side .k{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--on-dark-3);line-height:1.6;} .cta .side .h{display:block;font-family:var(--serif-tc);font-size:25px;font-weight:600;color:var(--on-dark);margin-top:10px;letter-spacing:.06em;line-height:1.35;} .cta .side .n{display:block;font-size:14px;color:var(--on-dark-2);margin-top:10px;line-height:1.85;} /* ══════ 頁尾（全寬漸層） ══════ */ .colophon{background:linear-gradient(180deg,#F3F1EB 0%,#E4E0D6 52%,#D3CEC2 100%);} .foot-in{padding-block:var(--sec-gap) 0;} .foot-top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-bottom:var(--s7);} .foot-brand{grid-column:1 / 5;} .foot-brand .flogo img{display:block;height:44px;width:auto;margin-bottom:var(--s4);} .foot-brand .nm{font-family:var(--serif-tc);font-size:25px;font-weight:600;letter-spacing:.05em;line-height:1.3;} .foot-brand .en{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--ink-3);margin-top:10px;line-height:1.9;} .foot-brand .fseal{margin-top:var(--s5);} /* 欄標題：印朱，視覺頂端與協會名稱的字冠切齊 */ .foot-col h2,.foot-facts h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--seal);font-weight:500;line-height:1.3;margin:3px 0 var(--s4);} .foot-col ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2.4;} .foot-col a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s;} .foot-col a:hover{border-bottom-color:var(--ink);} .foot-facts{grid-column:9 / 13;} .freg .fr{display:flex;justify-content:space-between;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--rule);font-size:13.5px;} .freg .fr:last-child{border-bottom:none;} .freg .fr span{color:var(--ink-3);white-space:nowrap;} .freg .fr b{font-family:var(--mono);font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;} .freg .fr b.zh{font-family:var(--sans);} /* Credit：水平置中，上下留白對稱 */ .foot-bot{display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--ink-3);letter-spacing:.03em;padding-block:var(--s3);border-top:1px solid var(--rule);text-align:center;line-height:1.8;} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}html{scroll-behavior:auto;}.dot-y::after{opacity:.34;transform:none;}.dot-y::before{display:none;}} /* ══════════════════════════════════════════════════════════════ 斷點只有兩檔，對齊 Blocksy 客製器的切換點（class-ct-css-injector.php）： 平板　@media (max-width:999.98px) 手機　@media (max-width:689.98px) 整份 CSS 只准出現這兩個數字。不要另訂第三檔，客製器切換時會錯位。 ══════════════════════════════════════════════════════════════ */ /* ───────── 平板　690 – 999.98px ───────── */ @media (max-width:999.98px){ :root{--sec-gap:80px;--sec-half:40px;} /* 區塊標頭：右側輔助連結只分到四欄（700px 視窗約 198px）， 擠在標題旁邊會折行，改成堆疊讓標題吃滿寬 */ .sec-head{grid-template-columns:1fr;gap:var(--s4);} .sec-head .main,.sec-head .aux{grid-column:auto;grid-row:auto;} .sec-head .aux{padding-top:0;justify-content:flex-start;} /* 標題降一階。52px 在 656px 的容器裡一行只剩 12 字 */ .title{font-size:44px;} #philosophy .title{font-size:38px;} .lead{font-size:17.5px;} /* 主視覺：左右各分到 350px 的直長條，放不下 40px 標題加兩顆按鈕， 改成照片滿版、文字疊在上面。手機沿用同一組結構，只調字級與間距。 照片仍用桌機那張（1440×1400），m-img 是 780×1688 的直式裁切， 放到 1000px 寬會不夠解析度，留給手機 */ .hero{display:block;position:relative;} .hero .im{position:absolute;inset:0;} .hero .im img{filter:grayscale(.5) sepia(.16) contrast(1.06) brightness(.78);} .hero .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,25,.74) 0%,rgba(28,24,25,.46) 26%,rgba(28,24,25,.86) 62%,rgba(28,24,25,.96) 100%);z-index:2;} .hero .dk{position:relative;z-index:3;background:none;justify-content:flex-end;padding:var(--s7) var(--pad) var(--s6);} .hero .dk::before{display:none;} .hero h1{font-size:40px;} /* 疊圖後文字不再被右欄擋住，一行會拉到 850px，讀起來要來回掃 */ .hero .sub{font-size:15.5px;max-width:52ch;} .hero .stamp{left:auto;right:var(--pad);top:var(--s6);bottom:auto;width:88px;height:88px;font-size:12px;letter-spacing:.1em;} .hero .kicker{max-width:calc(100% - 108px);} /* 理念的照片：兩欄各剩三百多 px，400px 高會變細長條 */ .pic{min-height:300px;} /* 兩欄文字已經夠窄，不再內縮 */ .vtext{padding-inline:0;} /* 五階流程：五欄在 656px 容器裡每格只剩 93px，62px 的 icon 都擺不下。 改三欄，換行處（第三個）的箭頭要收掉，否則會指向下一列 */ .flow{grid-template-columns:repeat(3,1fr);row-gap:var(--s5);} .fstep:nth-child(3n) .arw{display:none;} .mtx{font-size:13.5px;} .mtx th{font-size:17px;} .mtx td{font-size:13px;} .mtx td:first-child{font-size:14px;} .nrow .d{font-size:13px;} .nrow .t{font-size:18px;} /* 頁尾的平板規則不在這裡。.foot-top 在下方「選單與頁尾的重新設計」 又被重新定義成 12 欄，寫在這裡會被蓋掉，要跟手機那檔放在一起 */ } /* ───────── 手機　≤ 689.98px ───────── */ @media (max-width:689.98px){ :root{--sec-gap:60px;--sec-half:30px;--pad:18px;} body{font-size:15px;} .wrap{width:calc(100% - 36px);} .hd .in{height:64px;justify-content:space-between;gap:var(--s2);} .hd .acts .btn-solid{font-size:11.5px;padding:8px 12px;} .hd .mark-logo{height:27px;} .foot-brand .flogo img{height:36px;} .row{grid-template-columns:1fr!important;gap:var(--s4)!important;} .row > *{grid-column:auto!important;} .title{font-size:31px;max-width:none;} .lead{font-size:16px;} .trule{margin:var(--s4) 0 var(--s3);} /* 疊圖版的結構在平板檔，這裡只給手機的尺寸差異 */ .hero{min-height:86vh;} .hero .d-img{display:none;} .hero .m-img{display:block;} .hero .dk{min-height:80vh;padding:88px 18px 104px;} .hero h1{font-size:31px;} .hero .sub{max-width:none;font-size:14.5px;} .hero .stamp{width:64px;height:64px;font-size:10px;right:18px;top:88px;letter-spacing:.06em;} .hero .kicker{max-width:calc(100% - 74px);font-size:10.5px;letter-spacing:.18em;line-height:2;} .hero .stamp small{display:none;} .pic{height:auto;min-height:0;} .pic img{height:240px;} .phil-body .sec-more{margin-top:var(--s5);} .cta .col-aux{justify-content:flex-start;} .cta .side{flex:none;} .mtx{font-size:13px;} .mtx td{padding:12px 0;font-size:12.5px;} .mtx td:first-child{font-size:13px;} .mtx th{font-size:11.5px;letter-spacing:.06em;} /* 條目式資訊表：窄螢幕改為編號在左、標籤與值上下堆疊 */ .badges{grid-template-columns:1fr;border-top:1px solid var(--ink);} .bdg{border-right:none;border-bottom:1px solid var(--rule-soft);padding:var(--s5) 0;} .bdg:last-child{border-bottom:none;} .flow{grid-template-columns:1fr;border-top:1px solid var(--ink);} .fstep{border-right:none;border-bottom:1px solid var(--rule-soft);padding:var(--s4) 0;} .fstep:last-child{border-bottom:none;} .fstep .arw{display:none;} .sealbox{margin-top:var(--s4);} .nrow{grid-template-columns:1fr auto!important;gap:6px 12px!important;padding-block:var(--s3);} .nrow .d{grid-column:1!important;grid-row:1;font-size:13px;} .nrow .c{grid-column:1!important;grid-row:1;justify-self:end;} .nrow .t{grid-column:1 / 3!important;grid-row:2;font-size:17.5px;} .nrow .g{display:none;} .cta .side{margin-top:var(--s5);border-left:none;border-top:1px solid var(--rule-dark);padding-left:0;padding-top:var(--s4);} .foot-top{grid-template-columns:1fr;gap:var(--s5);} .foot-top > *{grid-column:auto!important;} } /* ═══ 以下為選單與頁尾的重新設計，置於最後以覆寫前面的同名規則 ═══ */ .toc{ position:fixed;inset:0;z-index:95;color:var(--on-dark); --tvh:100dvh; --tgap:var(--s7); --tpad:clamp(18px,calc(var(--tvh) * .03),32px); background: radial-gradient(rgba(242,240,234,.055) 1px, transparent 1px), radial-gradient(130% 95% at 10% 6%, rgba(255,248,236,.13) 0%, transparent 58%), radial-gradient(90% 70% at 96% 96%, rgba(0,0,0,.4) 0%, transparent 60%), linear-gradient(152deg,#453D3E 0%,#2B2526 40%,#120F10 100%); background-size:11px 11px,auto,auto,auto; clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path .55s cubic-bezier(.22,.8,.3,1),visibility 0s linear .55s; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; } .toc[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .55s cubic-bezier(.22,.8,.3,1),visibility 0s;} .toc::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: linear-gradient(90deg, transparent calc(50% - var(--tgap)/2), rgba(0,0,0,.07) calc(50% - var(--tgap)/2 + 18px), rgba(0,0,0,.30) 50%, rgba(0,0,0,.07) calc(50% + var(--tgap)/2 - 18px), transparent calc(50% + var(--tgap)/2)), linear-gradient(90deg,transparent calc(50% - .5px),rgba(242,240,234,.18) 50%,transparent calc(50% + .5px)); } .toc .tin{position:relative;z-index:1;min-height:100vh;min-height:var(--tvh);display:flex;flex-direction:column;padding-block:var(--tpad);} .toc .thead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:16px;margin-bottom:20px;} .toc .thead .t{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--on-dark-2);} .toc .thead .t b{font-weight:400;color:var(--on-dark-2);margin-left:1.1em;padding-left:1.1em;border-left:1px solid var(--rule-dark);} .toc .btn-line{border-color:var(--rule-dark);color:var(--on-dark);min-height:44px;display:inline-flex;align-items:center;padding:0 18px;line-height:1.2;} .toc .btn-line:hover{border-color:var(--on-dark);} .toc .btn-line:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px;} .tgrid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(min-content,1fr));grid-auto-flow:column;column-gap:var(--tgap);row-gap:0;} .tcard{position:relative;display:block;overflow:hidden;border-top:1px solid var(--rule-dark);text-decoration:none;color:inherit;transition:border-top-color .38s;} .tcard .tci{display:block;padding:18px var(--s3) 14px 0;transition:transform .38s cubic-bezier(.22,.8,.3,1);} .tcard .thd{display:flex;align-items:baseline;gap:var(--s2);} .tcard .tl{font-family:var(--serif-tc);font-size:clamp(22px,2.05vw,28px);font-weight:600;letter-spacing:.04em;white-space:nowrap;line-height:1.32;} .tcard .tdt{flex:1 1 auto;min-width:18px;height:2px;align-self:center;background-image:radial-gradient(circle at 1px 1px,rgba(242,240,234,.34) 1px,transparent 1.3px);background-size:6px 2px;background-repeat:repeat-x;} .tcard .tno{flex:0 0 auto;line-height:1.3;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--on-dark-2);font-variant-numeric:tabular-nums;} .tcard .ten{display:block;line-height:1.5;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--on-dark-2);white-space:nowrap;margin-top:6px;} .tcard .tds{display:block;font-size:13.5px;line-height:1.7;color:var(--on-dark-2);margin-top:8px;letter-spacing:.02em;} .tcard-reg .tno{color:var(--seal-on-dark);} .tcard:hover{border-top-color:rgba(242,240,234,.5);} .tcard:hover .tci{transform:translateX(10px);} .tcard:focus-visible{outline:2px solid var(--on-dark);outline-offset:-3px;border-top-color:rgba(242,240,234,.5);} .tcard:focus-visible .tci{transform:translateX(10px);} .tcard[aria-current="true"]{border-top-color:rgba(242,240,234,.62);} .tcard[aria-current="true"] .thd::after{content:"現在位置";flex:0 0 auto;font-family:var(--sans);font-size:10.5px;line-height:1.2;letter-spacing:.12em;color:var(--on-dark-2);border:1px solid var(--rule-dark);padding:3px 8px;} .treg{grid-column:2;grid-row:4;align-self:end;justify-self:end;margin:0;display:grid;grid-auto-flow:column;column-gap:var(--s5);padding-top:14px;} .treg dt{line-height:1.4;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--on-dark-2);} .treg dd{margin:5px 0 0;line-height:1.4;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--on-dark);font-variant-numeric:tabular-nums;white-space:nowrap;} /* 矮視窗（筆電 720p、手機橫放）的密排。 原本是 (min-width:901px) and (max-height:700px) 與 (max-width:900px) and (max-height:560px) 兩條查詢在猜高度， 但 main.js 的 dense() 本來就在量 scrollHeight 是否溢出，比猜準， 而且不必為了配對 689.98 而多一個 min-width 數字。兩條查詢已移除。 手機橫放（844×390）寬度落在平板檔，目次本來就是兩欄，正是密排要的結果。 */ .toc[data-dense="true"] .tcard .tds{display:none;} .toc[data-dense="true"] .tcard .tl{font-size:clamp(20px,1.7vw,24px);} .toc[data-dense="true"] .tcard .tci{padding-block:10px 8px;} @media (max-width:689.98px){ .toc{--tpad:clamp(12px,calc(var(--tvh) * .018),20px);} .toc::before{display:none;} .toc .thead{order:3;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--rule-dark);} .toc .thead .t{font-size:10.5px;letter-spacing:.18em;} .toc .thead .t b{margin-left:.8em;padding-left:.8em;} .toc .btn-line{font-size:12px;padding:0 14px;min-height:44px;} .tgrid{order:1;grid-template-columns:1fr;grid-template-rows:repeat(7,minmax(min-content,1fr)) auto;grid-auto-flow:row;column-gap:0;} .tcard .tci{padding:9px 0 7px;} .tcard .tl{font-size:19.5px;} .tcard .ten{font-size:9.5px;letter-spacing:.14em;margin-top:3px;} .tcard .tds{font-size:12.5px;line-height:1.6;margin-top:5px;} .tcard[aria-current="true"] .thd::after{display:none;} .treg{grid-column:1;grid-row:8;justify-self:stretch;align-self:end;margin-top:8px;padding-top:8px;column-gap:var(--s4);border-top:1px solid var(--rule-dark);} .treg dt{font-size:9px;letter-spacing:.16em;line-height:1.35;} .treg dd{font-size:11px;margin-top:2px;line-height:1.35;} } @media (prefers-reduced-motion:reduce){ .toc,.toc[data-open="true"]{transition:none;} .tcard .tci{transition:none;} .tcard:hover .tci,.tcard:focus-visible .tci{transform:none;} } .colophon{ position:relative;isolation:isolate; border-top:1px solid var(--rule); box-shadow:inset 0 1px 0 rgba(255,255,255,.94); background: radial-gradient(rgba(33,29,30,.055) 1px, transparent 1px), radial-gradient(128% 90% at 12% -2%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 56%), radial-gradient(92% 78% at 96% 100%, rgba(33,29,30,.09) 0%, rgba(33,29,30,0) 66%), linear-gradient(168deg,var(--paper-raise) 0%,var(--paper) 34%,#EAE6DC 68%,#DFDACF 100%); background-size:11px 11px,auto,auto,auto; } .colophon::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--rule);opacity:.55;pointer-events:none;z-index:0;} .foot-in{position:relative;z-index:1;padding-block:var(--sec-gap) 0;} .foot-top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-bottom:var(--s6);} .foot-top > *{border-top:1px solid var(--rule);padding-top:var(--s3);} .foot-brand{grid-column:1 / 5;border-top-color:var(--ink);} .foot-brand .nm{font-family:var(--serif-tc);font-size:25px;font-weight:600;letter-spacing:.05em;line-height:1.24;} .foot-brand .en{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--ink-3);margin-top:14px;line-height:1.9;} .foot-brand .fseal{margin-top:var(--s5);} .foot-col h2,.foot-facts h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;font-weight:400;color:var(--seal);line-height:1.24;padding-top:2px;margin:0 0 var(--s4);} .foot-col ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.6;} .foot-col li + li{border-top:1px solid var(--rule-soft);} .foot-col li a{display:flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;border-bottom:none;transition:color .25s,text-decoration-color .25s;} .foot-col li a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--ink);} .foot-col li a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;} .fcon li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;} .fcon .fk{font-size:13px;color:var(--ink-3);white-space:nowrap;} .fcon .fv{font-size:14px;text-align:right;} .fcon a.fv{min-height:44px;} .foot-facts{grid-column:9 / 13;} .freg .fr{display:flex;justify-content:space-between;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px;line-height:1.7;} .freg .fr:last-child{border-bottom:none;} .freg .fr span{color:var(--ink-3);white-space:nowrap;} .freg .fr b{font-family:var(--mono);font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:.02em;} .freg .fr b.zh{font-family:var(--mono);} .foot-bot{display:block;margin:0;text-align:center;border-top:1px solid var(--rule);padding-block:20px;font-size:13px;line-height:1.75;letter-spacing:.02em;color:var(--ink-2);} .foot-bot .sep{margin-inline:.4em;opacity:.55;color:var(--ink-3);display:inline;width:auto;} /* 頁尾四欄變兩欄。立案欄是「標籤＋值」兩端對齊，四欄制下只分到 198px， 「台內團字第 1150029199 號」放不下。欄位的 grid-column 寫在 HTML 的 inline style 上，要 !important 才蓋得掉 */ @media (max-width:999.98px){ .foot-top{grid-template-columns:repeat(2,1fr);row-gap:var(--s5);} .foot-top > *{grid-column:auto!important;} .foot-brand .nm{font-size:22px;} } @media (max-width:689.98px){ .foot-top{grid-template-columns:1fr;gap:var(--s5);padding-bottom:var(--s5);} .foot-top > *{grid-column:auto!important;} .foot-brand .nm{font-size:21px;} .foot-col h2,.foot-facts h2{margin-bottom:var(--s3);} .foot-bot{font-size:11.5px;padding-block:16px;} .foot-bot .sep{display:inline;width:auto;} } /* 聯絡欄目前只有欄位名，仍與目次欄同列高，待協會提供後再填值 */ .foot-col li{display:flex;align-items:center;min-height:44px;} .fcon .fk{font-size:15px;color:var(--ink-2);} .partners{--marquee-pad:60px;padding-block:var(--marquee-pad);} @media (max-width:999.98px){ .partners{--marquee-pad:40px;} } @media (max-width:689.98px){ .partners{--marquee-pad:30px;} } .pmarquee{position:relative;overflow:hidden;} .pmarquee::before,.pmarquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,10vw,150px);z-index:2;pointer-events:none;} .pmarquee::before{left:0;background:linear-gradient(90deg,var(--paper) 12%,rgba(247,247,244,0) 100%);} .pmarquee::after{right:0;background:linear-gradient(270deg,var(--paper) 12%,rgba(247,247,244,0) 100%);} .ptrack{display:flex;align-items:center;width:max-content;will-change:transform;animation:pscroll 52s linear infinite;} .pmarquee:hover .ptrack,.pmarquee:focus-within .ptrack{animation-play-state:paused;} @keyframes pscroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} .plogo{display:inline-flex;align-items:center;gap:18px;color:var(--ink);flex:0 0 auto;margin-right:92px;transition:opacity .3s;} .pmark{width:45px;height:45px;flex:0 0 45px;display:block;} .pname{font-family:var(--mono);font-size:18px;letter-spacing:.15em;white-space:nowrap;line-height:1;} @media (max-width:689.98px){ .ptrack{animation-duration:38s;} .plogo{margin-right:64px;gap:14px;} .pmark{width:37px;height:37px;flex:0 0 37px;} .pname{font-size:15px;letter-spacing:.12em;} } @media (prefers-reduced-motion:reduce){ .ptrack{animation:none;transform:none;} .pmarquee{overflow-x:auto;} } .crsl-vp{position:relative;width:100%;max-width:100%;overflow:hidden;overflow:clip;} .crsl-track{display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--crsl-gap,0px);transform:translate3d(0,0,0);will-change:transform;transition:transform .62s cubic-bezier(.22,.8,.3,1);} .crsl-track.is-drag{transition:none;} .crsl-slide{flex:0 0 calc((100% - (var(--crsl-per,1) - 1) * var(--crsl-gap,0px)) / var(--crsl-per,1));min-width:0;} .crsl-slide:focus-visible,.crsl-slide a:focus-visible,.crsl-slide button:focus-visible{outline-offset:-3px;} .crsl-track img{-webkit-user-drag:none;user-drag:none;} [data-carousel].is-dragging{user-select:none;-webkit-user-select:none;} [data-crsl-static] [data-crsl-ui]{display:none;} .crsl-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);} .crsl-b{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:none;color:var(--ink-2);cursor:pointer;transition:color .3s,background-color .3s,border-color .3s;} .crsl-b svg{display:block;} .crsl-b .ic-play{display:none;} [data-carousel].is-paused .crsl-b .ic-play{display:block;} [data-carousel].is-paused .crsl-b .ic-pause{display:none;} .hero[data-carousel]{--crsl-per:1;--crsl-gap:0px;--hero-arrow-top:50%;touch-action:pan-y;touch-action:pan-y pinch-zoom;} .hero .im::after{pointer-events:none;} .hero .crsl-vp{height:100%;} .hero .crsl-track{height:100%;} .hero .crsl-slide{position:relative;height:100%;} .hero-ctrl{position:absolute;right:0;bottom:0;z-index:4;display:flex;align-items:stretch;background:var(--paper-raise);border-top:1px solid var(--rule);border-left:1px solid var(--rule);} .hc-lead{display:flex;align-items:stretch;} .hc-t{width:46px;min-height:46px;color:var(--ink-3);border-right:1px solid var(--rule-soft);} .hc-t:hover{color:var(--ink);background:var(--paper-sunk);} .hc-nums{display:flex;align-items:stretch;} .hc-n{-webkit-appearance:none;appearance:none;position:relative;min-width:34px;padding:15px 12px 13px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.16em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink-3);transition:color .35s;} .hc-n::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.8,.3,1);} .hc-n:hover{color:var(--ink);} .hc-n[aria-current="true"]{color:var(--ink);} .hc-n[aria-current="true"]::after{transform:scaleX(1);} .hc-arrows{display:flex;align-items:stretch;border-left:1px solid var(--rule-soft);} .hc-a{width:54px;min-height:46px;color:var(--ink-2);} .hc-a + .hc-a{border-left:1px solid var(--rule-soft);} .hc-a:hover{color:var(--ink);background:var(--paper-sunk);} .hc-a .ic-long{transition:transform .45s cubic-bezier(.22,.8,.3,1);} .hc-a[data-crsl-prev]:hover .ic-long{transform:translateX(-4px);} .hc-a[data-crsl-next]:hover .ic-long{transform:translateX(4px);} .hc-a .ic-short{display:none;} .adv-hold{min-width:0;} .adv-crsl{position:relative;min-width:0;margin-top:var(--s6);--crsl-per:3;--crsl-gap:var(--gutter);} .adv-crsl .crsl-vp{padding:10px 6px 36px;margin:-10px -6px -36px;touch-action:pan-y;touch-action:pan-y pinch-zoom;} .wall.crsl-track{display:flex;flex-wrap:nowrap;grid-template-columns:none;gap:var(--crsl-gap);margin-top:0;} .adv-crsl .crsl-slide{display:flex;} .adv-crsl .acard{flex:1 1 auto;display:flex;flex-direction:column;} .adv-crsl .ac-photo{aspect-ratio:3/4;} .adv-crsl .ac-photo img{object-position:center 18%;} .adv-crsl .ac-body{flex:1 1 auto;} .adv-crsl.is-dragging .acard:hover{transform:none;box-shadow:none;} .adv-crsl.is-dragging .acard:hover .ac-photo img{transform:none;} .adv-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule-soft);} .adv-mid{display:flex;align-items:center;gap:var(--s2);flex:1 1 auto;min-width:0;} .adv-count{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink-3);white-space:nowrap;} .adv-count b{font-weight:400;color:var(--ink);} .adv-prog{position:relative;flex:1 1 auto;min-width:0;max-width:360px;height:1px;background:var(--rule-soft);overflow:hidden;} .adv-prog i{position:absolute;top:0;bottom:0;left:0;display:block;width:16.666%;background:var(--ink);transition:transform .55s cubic-bezier(.22,.8,.3,1);} .adv-b{width:46px;height:46px;border:1px solid var(--rule-soft);background:var(--paper-raise);color:var(--ink-2);} .adv-b:hover{color:var(--ink);border-color:var(--rule);background:var(--paper);} .adv-b svg{transition:transform .4s cubic-bezier(.22,.8,.3,1);} .adv-b[data-crsl-prev]:hover svg{transform:translateX(-3px);} .adv-b[data-crsl-next]:hover svg{transform:translateX(3px);} @media(max-width:999.98px){ .adv-crsl{--crsl-per:2;} } @media(max-width:689.98px){ .hero .dk{pointer-events:none;padding-left:18px;padding-right:18px;} /* 兩顆按鈕同一列：容器 354，各分 171.5，不再 wrap */ .hero .btns{flex-wrap:nowrap;gap:11px;} .hero .btns > *{flex:1 1 0;min-width:0;text-align:center;padding-left:10px;padding-right:10px;white-space:nowrap;} .hero .dk a,.hero .dk button,.hero .dk .btn,.hero .dk .btn-ondark,.hero .dk .btn-ondark-g{pointer-events:auto;} .hero .stamp{pointer-events:none;} .hero-ctrl{position:absolute;inset:0;right:auto;bottom:auto;z-index:4;display:block;width:100%;height:100%;background:none;border:0;pointer-events:none;} .hc-lead{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;height:40px;display:flex;align-items:center;pointer-events:auto;background:rgba(24,20,21,.62);border:1px solid var(--on-dark-3);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);} .hc-t{width:36px;min-height:40px;color:var(--on-dark-2);border-right:1px solid var(--rule-dark);} .hc-t:hover{color:var(--on-dark);background:none;} .hc-n{min-width:36px;min-height:40px;padding:14px 8px 16px;color:var(--on-dark-2);} .hc-n::after{left:8px;right:8px;bottom:8px;background:var(--on-dark);} .hc-n:hover,.hc-n[aria-current="true"]{color:var(--on-dark);} .hc-arrows{position:absolute;left:0;right:0;top:auto;bottom:26px;transform:none;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border:0;pointer-events:none;} .hc-a,.hc-a + .hc-a{pointer-events:auto;width:44px;height:40px;min-height:0;border:1px solid var(--on-dark-3);background:rgba(24,20,21,.62);color:var(--on-dark);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);} .hc-a:hover{background:rgba(24,20,21,.76);color:var(--on-dark);} .hc-a .ic-long{display:none;} .hc-a .ic-short{display:block;} .adv-crsl{--crsl-per:1;--crsl-gap:var(--s3);margin-top:var(--s5);} .adv-crsl .crsl-vp{padding:6px 6px 26px;margin:-6px -6px -26px;} .adv-bar{gap:var(--s2);margin-top:var(--s3);} .adv-b{width:44px;height:44px;} .adv-prog{display:none;} .adv-count{letter-spacing:.1em;} } @media (prefers-reduced-motion:reduce){ .crsl-track{transition:none!important;} .adv-prog i{transition:none!important;} .hc-n::after{transition:none!important;} } @media (max-width:999.98px){ .adv-crsl{--crsl-per:2;} } @media (max-width:689.98px){ .adv-crsl{--crsl-per:1;} } /* ══════ 捲動浮現 ══════ */ /* 基態不存在於裸 CSS。rv-armed 只由 JS 在確認元素位於視窗之下時才加上 */ [data-rv].rv-armed{ --rv-rise:10px; opacity:0; transform:translateY(var(--rv-rise,10px)); pointer-events:none; } [data-rv="sm"].rv-armed{--rv-rise:6px;} [data-rv].rv-in{animation:rv-rise .55s cubic-bezier(.22,.8,.3,1) both;} @keyframes rv-rise{ from{opacity:0;transform:translateY(var(--rv-rise,10px));} to{opacity:1;transform:none;} } /* 鍵盤逃生門,特異度 (0,3,0);animation:none 讓上一條動畫退出 */ [data-rv].rv-armed:focus-within{ opacity:1;transform:none;animation:none;pointer-events:auto; } @media (max-width:689.98px){ [data-rv].rv-armed{--rv-rise:7px;} [data-rv="sm"].rv-armed{--rv-rise:5px;} } /* 特異度 (0,2,0) 高於既有第 309 行的萬用字元規則,載入後才開偏好也不會卡在透明 */ @media (prefers-reduced-motion:reduce){ [data-rv].rv-armed,[data-rv].rv-in{ opacity:1!important;transform:none!important; animation:none!important;pointer-events:auto!important; } } @media print{ [data-rv].rv-armed,[data-rv].rv-in{ opacity:1!important;transform:none!important; animation:none!important;pointer-events:auto!important; } } /* 附帶一:.hd 是 sticky 高 73px,全檔原本沒有 scroll-padding-top,本方案的上跳讓焦點更貼頁眉 */ html{scroll-padding-top:88px;} @media (max-width:689.98px){html{scroll-padding-top:80px;}} /* 附帶二:12 個印朱點的無限漣漪是全頁唯一把印朱當裝飾動態的地方,只留實心點 */ /* ══════════════════════════════════════════════════════════════ 以下是搬進 WordPress 之後才需要的規則。 本機切版稿（tifaa-homepage/）不需要這一段，也沒有這一段。 ══════════════════════════════════════════════════════════════ */ /* ── Blocksy 容器：讓 .wrap 完全接管 ── 頁面內容是單一個 alignfull 的自訂 HTML 區塊，Blocksy 的 .ct-container 會再加一層 5vw 的左右內距，與 .wrap 的每側 22px 疊起來變成雙重留白。 entry-content 的 is-layout-constrained 也會把直接子元素限寬， alignfull 能脫離限寬但脫不掉內距。 */ .tf-home .ct-container, .tf-page .ct-container{max-width:none;padding-inline:0;} .entry-content > .alignfull{margin-inline:0;width:100%;max-width:none;} /* ── 隱藏 Blocksy 清空後仍會輸出的頁尾容器 ── 頁尾走 Content Block（掛在 blocksy:footer:before），Blocksy 自己的