/* v22 commercial works */
.wf{display:flex;justify-content:center;gap:2.6em;margin:0 auto 7vh;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif}
.wf button{background:none;border:0;padding:.6em 0;color:var(--mute);font:inherit;font-size:13px;font-weight:300;letter-spacing:.32em;text-indent:.32em;cursor:pointer;position:relative;transition:color .3s}
.wf button:after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--ink);transition:left .3s,right .3s}
.wf button:hover,.wf button.on{color:var(--ink)}
.wf button.on:after{left:.32em;right:0}
.wgrid .card.off{display:none}
.card .frame{position:relative}
.d3t{position:absolute;right:12px;bottom:10px;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.82);text-shadow:0 0 6px rgba(0,0,0,.45);pointer-events:none}
.pj-loc{margin-top:2.2em;font-size:14px;letter-spacing:.2em;color:var(--ink)}
.pj-loc .d3{display:block;margin-top:.9em;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.pg figure.k3{margin:0}
.k3 figcaption{display:flex;justify-content:space-between;padding:12px 2px 0;font-size:11px;letter-spacing:.24em;color:var(--mute)}
.pano-wrap{padding:6vh 0 0}
.pano-h{padding:0 0 3vh}
.pano-h .lab small{display:inline-block;margin-left:1.4em;letter-spacing:.3em;font-family:"Noto Sans TC",sans-serif;text-transform:none}
.pano{position:relative;width:100%;height:min(78vh,56vw);min-height:360px;background:#000;overflow:hidden;touch-action:none}
.pano .pnlm-container{background:#000}
.pano .pnlm-load-box{display:none!important}
.pano-ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.5em;color:var(--mute);z-index:1;transition:opacity .6s}
.pano.ok .pano-ld{opacity:0;pointer-events:none}
.pano-hint,.pano-d3{position:absolute;bottom:14px;z-index:3;font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.88);text-shadow:0 0 8px rgba(0,0,0,.5);pointer-events:none;font-family:"Noto Sans TC",sans-serif;font-weight:300}
.pano-hint{left:18px;transition:opacity .8s}
.pano.used .pano-hint{opacity:.45}
.pano-d3{right:18px}
.pano .pnlm-controls-container{top:12px;left:auto;right:12px}
.pano .pnlm-controls{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);border-radius:0}
.pano .pnlm-control:hover{background-color:rgba(255,255,255,.08)}
.pano .pnlm-about-msg,.pano .pnlm-orientation-button{display:none!important}
@media(max-width:760px){.wf{gap:1.8em;margin-bottom:5vh}.wf button{font-size:12px;letter-spacing:.24em;text-indent:.24em}.pano{height:62vh;min-height:0}.pano-h{padding:0 2vw 2.4vh}.k3 figcaption{padding:10px 4vw 0}.pj-loc{font-size:13px}}
.pj-loc{margin:1.8em 0 3.2em}
@media(max-width:760px){.k3 figcaption{justify-content:flex-start;gap:1.6em}.d3t{right:auto;left:12px}.pano-d3{right:auto;left:16px;top:14px;bottom:auto}.pano-hint{left:16px}.pj-loc{margin:1.4em 0 2.6em}}
@media(max-width:760px){.pano-d3{top:auto;bottom:14px;left:16px}.pano-hint{bottom:36px}.pano-hint,.pano-d3{text-shadow:0 0 6px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.5)}}
.works:has(.wf){padding-top:5vh}