:root { --m: calc(100vw / 320); --wx-bp: 750px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.wx-body { margin: 0; background: #fff; color: #000; font-family: "Nunito Sans", "Noto Sans TC", sans-serif; font-weight: 300; line-height: 1.4; overflow-x: hidden; font-optical-sizing: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wx-skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: .5em 1em; z-index: 1000; }
.wx-skip:focus { left: 8px; top: 8px; }

.wx-header { position: sticky; top: 0; z-index: 60; background: #fff; }
.wx-main, .wx-sec, .wx-btnw, .wx-ctw { display: block; }
.wx-box, .wx-txt, .wx-img, .wx-btnw, .wx-galw, .wx-videow, .wx-svg, .wx-vline, .wx-formw, .wx-lang, .wx-menu-openw, .wx-hmw, .wx-linkbar, .wx-vmw, .wx-menu-closew { position: absolute; }
.wx-hz { transition: transform .4s ease-in-out; }
.wx-hz:hover { z-index: 1; }
.wx-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; }
.wx-bg img { width: 100%; height: 100%; object-fit: cover; }
.wx-img img, .wx-img a, .wx-svg svg, .wx-svg a { width: 100%; height: 100%; display: block; }

.wx-txt { word-wrap: break-word; }
.wx-txt p, .wx-txt h1, .wx-txt h2, .wx-txt h3, .wx-txt h4, .wx-txt h5, .wx-txt h6 { margin: 0; min-height: 1em; }
.wx-txt ul, .wx-txt ol { padding-left: 1.3em; list-style: disc; }
.wx-txt a { text-decoration: none; }

.wx-sb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: var(--rd, 0); border: var(--brw, 0) solid var(--brd, transparent); background-color: var(--bg, transparent); color: var(--txt, #000); transition: border-color .4s ease, background-color .4s ease; line-height: 1.4; white-space: nowrap; }
.wx-sb span { transition: color .4s ease; }
.wx-sb:hover { background-color: var(--bgh, var(--bg)); border-color: var(--brdh, var(--brd)); color: var(--txth, var(--txt)); }
.wx-stb { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; white-space: nowrap; transition: .2s; }
.wx-stb-i { display: none; }
.wx-stb-i svg { width: 1.2em; height: 1.2em; display: block; fill: currentColor; }
.wx-pinned { position: fixed; }
.wx-pinned .wx-stb:hover { opacity: .85; }
.wx-pinned-m { display: none; }
.wx-pn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; white-space: nowrap; transition: opacity .2s; }
.wx-pn:hover { opacity: .6; }
.wx-pn-i { display: block; width: 16px; height: 16px; }
.wx-pn-i svg { width: 100%; height: 100%; display: block; }
.wx-pn-prev .wx-pn-i { transform: rotate(90deg); }
.wx-pn-next .wx-pn-i { transform: rotate(-90deg); }

@keyframes motion-fadeIn { 0% { opacity: 0; } 100% { opacity: var(--comp-opacity, 1); } }
@keyframes motion-revealIn { 0% { opacity: 0; animation-timing-function: step-end; } 0.0001% { opacity: var(--comp-opacity, 1); clip-path: var(--motion-clip-start, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)); } 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }
[data-motion] { animation-play-state: paused; }
[data-motion].is-in { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) { [data-motion] { animation: none !important; } }

.wx-galw { overflow: hidden; }
.wx-gal, .wx-gal-grid { position: relative; width: 100%; height: 100%; }
.wx-gal-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.wx-gal-track::-webkit-scrollbar { display: none; }
.wx-gal-item { flex: 0 0 auto; scroll-snap-align: start; overflow: hidden; background: #f3f3f3; }
.wx-gi { position: absolute; overflow: hidden; background: #f3f3f3; }
.wx-gal-item img, .wx-gal-item a, .wx-gi img, .wx-gi a { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-gal-cap .wx-gi { background: transparent; }
.wx-gi-cap { position: absolute; left: 0; right: 0; bottom: 0; }
.wx-gi-t { margin: 23px 0 0; padding: 0 8px; font-family: "Fraunces", "Noto Serif TC", serif; font-variation-settings: "opsz" 120; font-weight: 300; font-size: 26px; line-height: 39px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-gi-d { margin: 6px 0 0; font: 15px/22px "Nunito Sans", "Noto Sans TC", sans-serif; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wx-gal-btn { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity .3s; }
.wx-gal-btn[hidden] { display: none; }
.wx-gal-ico { display: block; width: 31px; height: 9px; }
.wx-gal-ico svg { width: 100%; height: 100%; display: block; }
.wx-gal-ico.flip { transform: scaleX(-1); }
.wx-gal-round .wx-gal-item, .wx-gal-round .wx-gal-item img { border-radius: 50%; }
.wx-gal-round .wx-gal-item { background: transparent; }
.wx-gal-round .wx-gal-btn { color: #000; }
.wx-gal-th { display: flex; flex-direction: column; }
.wx-gal-th .wx-gal-track { flex: 0 0 auto; height: auto; }
.wx-gal-thumbs { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 9px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.wx-gal-thumbs::-webkit-scrollbar { display: none; }
.wx-gal-thumbs button { flex: 0 0 auto; width: 120px; height: 120px; padding: 0; opacity: .45; transition: opacity .2s; }
.wx-gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-gal-thumbs button:hover, .wx-gal-thumbs button.is-active { opacity: 1; }

.wx-video { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }
.wx-video img, .wx-video video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wx-video video { opacity: 0; transition: opacity .4s; }
.wx-video.is-playing video { opacity: 1; }
.wx-video.is-playing .wx-video-poster { opacity: 0; }
.wx-video-play { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; transform: translate(-50%, -50%); opacity: .37; transition: opacity .3s; }
.wx-video-play svg { width: 100%; height: 100%; display: block; }
.wx-video:hover .wx-video-play { opacity: 1; }
.wx-video.is-playing .wx-video-play { opacity: 0; pointer-events: none; }
.wx-video-mute { position: absolute; right: 14px; bottom: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.wx-video.is-playing:hover .wx-video-mute { opacity: 1; }
.wx-video.is-playing .wx-video-mute:focus-visible { opacity: 1; }
.wx-video.is-muted .wx-video-mute .on { display: none; }


.wx-lang { z-index: 5; }
.wx-lang-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; font-family: Questrial, "Nunito Sans", sans-serif; font-size: 14px; color: #333; }
.wx-lang-btn svg { width: 12px; height: 6px; }
.wx-lang-list { position: absolute; left: 0; top: 0; width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); display: none; }
.wx-lang.is-open .wx-lang-list { display: block; }
.wx-lang-list li { height: 41px; display: flex; align-items: center; padding-left: 20px; font-family: Questrial, "Nunito Sans", sans-serif; font-size: 14px; color: #333; }
.wx-lang-list li + li { border-top: 1px solid rgb(230, 224, 211); }
.wx-lang-list li a { display: block; width: 100%; }
.wx-lang-list li a:hover { color: #959595; }
.wx-lang-list li.is-active { color: #000; }

.wx-menu-open { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 300px; transition: .2s; }
.wx-menu-open svg { width: 27px; height: 27px; display: block; }
.wx-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100000; background: rgba(0,0,0,.6); overflow: hidden auto; opacity: 0; transition: opacity .3s; }
.wx-overlay[hidden] { display: none; }
.wx-overlay.is-open { opacity: 1; }
.wx-overlay-panel { position: relative; min-height: 100vh; background: #fff; transform: translateX(-100%); transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.wx-overlay.is-open .wx-overlay-panel { transform: none; }
.wx-menu-close { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 300px; transition: .2s; }
.wx-menu-close svg { width: 100%; height: 100%; display: block; }
.wx-menu-close:hover, .wx-menu-open:hover { opacity: .7; }

.wx-vm ul { list-style: none; }
.wx-vm-row { display: grid; grid-template-columns: 1fr calc(40px + 1em); align-items: center; height: 48px; }
.wx-vm-row a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; transition: color .2s; }
.wx-vm-item.is-current > .wx-vm-row > a, .wx-vm-row a:hover, .wx-vm-sub a:hover { color: rgb(47, 79, 113); }
.wx-vm-toggle { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 0; }
.wx-vm-toggle svg { width: 12px; height: 7px; transition: transform .3s; fill: #000; }
.wx-vm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wx-vm-sub { display: none; padding-left: 25px; }
.wx-vm-item.is-open > .wx-vm-sub { display: block; }
.wx-vm-sub li { height: 36px; display: flex; align-items: center; }
.wx-vm-sub a { color: #000; white-space: nowrap; }

#wx-mtoggle { display: none; position: fixed; z-index: 100001; }
#wx-mtoggle span { position: absolute; left: calc((100% - 22px) / 2); width: 22px; height: 2px; border-radius: 2px; background: #000; transition: all .25s ease-in-out; }
#wx-mtoggle span:nth-child(1) { top: 3px; }
#wx-mtoggle span:nth-child(2) { top: 12px; }
#wx-mtoggle span:nth-child(3) { top: 21px; }
#wx-mtoggle[aria-expanded="true"] span:nth-child(1) { top: 12px; transform: rotate(45deg); }
#wx-mtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#wx-mtoggle[aria-expanded="true"] span:nth-child(3) { top: 12px; transform: rotate(-45deg); }
.wx-mmenu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 99999; background: rgba(0,0,0,.6); display: none; }
.wx-mmenu.is-open { display: block; }
.wx-mmenu-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgb(250, 250, 250); overflow-y: auto; }
.wx-mmenu-lang { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: calc(var(--m) * 14); font-family: Questrial, "Nunito Sans", sans-serif; font-size: calc(var(--m) * 13.33); }
.wx-mmenu-lang a { color: #7a7a7a; padding: calc(var(--m) * 8); }
.wx-mmenu-lang a.is-active { color: #000; }
.wx-vm-m .wx-vm-row { grid-template-columns: calc(40px + 1em) 1fr calc(40px + 1em); direction: rtl; height: calc(var(--m) * 70); }
.wx-vm-m .wx-vm-row a { grid-column: 2; text-align: center; direction: ltr; }
.wx-vm-m .wx-vm-row a, .wx-vm-m .wx-vm-sub a { overflow: visible; text-overflow: clip; }
.wx-vm-m .wx-vm-toggle { grid-column: 3; justify-content: center; }
.wx-vm-m .wx-vm-sub { padding-left: 0; }
.wx-vm-m .wx-vm-sub li { height: calc(var(--m) * 70); justify-content: center; }

.wx-hm { display: flex; justify-content: center; height: 100%; }
.wx-hm > li { position: relative; padding: 10px; margin: 0 4px; }
.wx-hm > li > a { letter-spacing: .05em; white-space: nowrap; transition: color .2s; }
.wx-hm > li > a:hover { color: #000; }
.wx-hm-sub { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); min-width: 160px; padding: 10px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); display: none; }
.wx-hm > li:hover > .wx-hm-sub, .wx-hm > li:focus-within > .wx-hm-sub { display: block; }
.wx-hm-sub li { padding: 10px; margin-bottom: 8px; background: #fafafa; }
.wx-hm-sub li:last-child { margin-bottom: 0; }
.wx-hm-sub a { color: #000 !important; white-space: nowrap; }

.wx-social { display: flex; gap: 10px; }
.wx-social a { width: var(--s, 22px); height: var(--s, 22px); display: block; color: #000; transition: opacity .2s; }
.wx-social a:hover { opacity: .7; }
.wx-social svg { width: 100%; height: 100%; display: block; }

.wx-ct-t { margin: 0; white-space: pre-wrap; word-break: break-word; }
.wx-ct-q { font-weight: inherit; }
.wx-ct[data-collapsed="1"] .wx-ct-t { max-height: 1.5em; overflow: hidden; }
.wx-ct-btn { display: inline-block; padding: 0; background: none; border: 0; cursor: pointer; line-height: 1.5em; transition: color .2s; }
.wx-ct-btn:hover { color: rgb(63, 63, 62); }

@media (max-width: 750px) {
  .wx-pinned { display: none; }
  .wx-pinned-m { display: block; position: absolute; }
  #wx-mtoggle { display: block; }
  .wx-menu-openw, .wx-overlay { display: none !important; }
  .wx-gal-ico { width: calc(var(--m) * 20); height: calc(var(--m) * 6); }
  .wx-gal-ico svg path { fill: #fff; }
  .wx-video-play { width: calc(var(--m) * 50); height: calc(var(--m) * 50); }
  .wx-hm { flex-wrap: wrap; }
  .wx-gi-cap { top: 0; display: flex; align-items: center; justify-content: center; }
  .wx-gi-t { margin: 0; padding: 0 calc(var(--m) * 10); font-size: calc(var(--m) * 24); line-height: calc(var(--m) * 32); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); text-align: center; white-space: normal; }
  .wx-gi-d { display: none; }
  .wx-gal-thumbs button { width: calc(var(--m) * 90); height: calc(var(--m) * 90); }
}

/* Contact card / CTA (replaces the old mailto forms) */
.wx-contact { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: flex; align-items: center; justify-content: center; }
.wx-contact-card { width: 100%; box-sizing: border-box; padding: 36px 40px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(55, 59, 77, 0.15); display: flex; flex-direction: column; gap: 22px; }
.wx-contact-lead { margin: 0; font-family: "Nunito Sans", "Noto Sans TC", sans-serif; font-size: 15px; font-weight: 300; letter-spacing: 0.45px; line-height: 1.7; color: #000; }
.wx-contact-item { display: flex; align-items: center; gap: 16px; color: #000; text-decoration: none; }
.wx-contact-item svg { width: 34px; height: 34px; flex: 0 0 auto; color: rgb(55, 59, 77); transition: color .3s; }
.wx-contact-item:hover svg { color: #000; }
.wx-contact-item:focus-visible svg { color: #000; }
.wx-contact-item span { display: flex; flex-direction: column; gap: 2px; }
.wx-contact-item strong { font-family: "Fraunces", "Noto Serif TC", serif; font-variation-settings: "opsz" 120; font-size: 18px; font-weight: 500; line-height: 1.2; }
.wx-contact-item em { font-style: normal; font-family: "Nunito Sans", "Noto Sans TC", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: 0.3px; color: rgb(55, 59, 77); text-decoration: underline; text-underline-offset: 3px; }
.wx-contact-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 28px; background-color: rgb(55, 59, 77); color: rgb(250, 250, 250); font-family: "Fraunces", "Noto Serif TC", serif; font-variation-settings: "opsz" 120; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; text-decoration: none; white-space: nowrap; transition: filter .4s; }
.wx-contact-btn:hover { filter: brightness(1.15); }
.wx-contact-btn:focus-visible { filter: brightness(1.15); }
.wx-contact-bare .wx-contact-btn { align-self: center; height: 46px; padding: 0 36px; font-size: 17px; }
@media (max-width: 750px) {
  .wx-contact-card { padding: calc(var(--m) * 24) calc(var(--m) * 22); gap: calc(var(--m) * 18); }
  .wx-contact-lead { font-size: calc(var(--m) * 14); letter-spacing: calc(var(--m) * 0.4); }
  .wx-contact-item { gap: calc(var(--m) * 14); }
  .wx-contact-item svg { width: calc(var(--m) * 30); height: calc(var(--m) * 30); }
  .wx-contact-item strong { font-size: calc(var(--m) * 17); }
  .wx-contact-item em { font-size: calc(var(--m) * 13); }
  .wx-contact-btn { height: calc(var(--m) * 42); padding: 0 calc(var(--m) * 26); font-size: calc(var(--m) * 16); }
  .wx-contact-bare .wx-contact-btn { height: calc(var(--m) * 44); padding: 0 calc(var(--m) * 32); font-size: calc(var(--m) * 16); }
}

/* Flex-gap fallback. Browsers without `inset` support (Safari <= 14.0) also lack flexbox `gap`,
   so margins are used there instead. Modern browsers skip this block entirely. */
@supports not (inset: 0) {
  .wx-contact-card > * + * { margin-top: 22px; }
  .wx-contact-item > svg { margin-right: 16px; }
  .wx-contact-item strong { margin-bottom: 2px; }
  .wx-social > * + * { margin-left: 10px; }
  .wx-lang-btn > * + *, .wx-stb > * + *, .wx-post-like > * + *, .wx-post-stats > span > * + * { margin-left: 6px; }
  .wx-pn > * + *, .wx-post-closed > * + *, .wx-post-meta > * + * { margin-left: 10px; }
  .wx-gal-thumbs > * + * { margin-left: 9px; }
  .wx-post-share > * + * { margin-left: 24px; }
  .wx-post-tags > * { margin: 0 8px 8px 0; }
  .wx-post-cats > * { margin-right: 24px; }
  .wx-feed-nav > * + *, .wx-post-nav > * + * { margin-left: 40px; }
  .wx-mmenu-lang > * + * { margin-left: calc(var(--m) * 14); }
  @media (max-width: 750px) {
    .wx-contact-card > * + * { margin-top: calc(var(--m) * 18); }
    .wx-contact-item > svg { margin-right: calc(var(--m) * 14); }
    .wx-post-share > * + * { margin-left: calc(var(--m) * 24); }
    .wx-post-tags > * { margin: 0 calc(var(--m) * 8) calc(var(--m) * 8) 0; }
    .wx-post-cats > * { margin-right: calc(var(--m) * 24); }
    .wx-feed-nav > * + *, .wx-post-nav > * + * { margin-left: 0; }
    .wx-feed-nav > *, .wx-post-nav > * { margin: 0 calc(var(--m) * 18) calc(var(--m) * 10) 0; }
  }
}