:root {
    --pink: #e5005a;
    --pink2: #b50046;
    --navy: #17294d;
    --yellow: #ffd400;
    --cyan: #13b7d4;
    --green: #82c92f;
    --orange: #ff8a00;
    --cream: #fff9e8;
    --ink: #17233b;
    --muted: #5f6d82;
    --shadow: 0 18px 50px rgba(23, 41, 77, 0.15);
    --radius: 28px;
    --color-1674b8: #1674b8;
    --color-1877f2: #1877f2;
    --color-29416f: #29416f;
    --color-4e5a70: #4e5a70;
    --color-503883: #503883;
    --color-513a84: #513a84;
    --color-55c8ef: #55c8ef;
    --color-7456a8: #7456a8;
    --color-7a8497: #7a8497;
    --color-alpha-01: rgba(23, 41, 77, 0.96);
    --color-alpha-02: rgba(0, 0, 0, 0.2);
    --color-alpha-03: rgba(255, 255, 255, 0.98);
    --color-alpha-04: rgba(255, 255, 255, 0.62);
    --color-alpha-05: rgba(12, 37, 54, 0.48);
    --color-alpha-06: rgba(255, 255, 255, 0.5);
    --color-alpha-07: rgba(23, 41, 77, 0.22);
    --color-alpha-08: rgba(23, 41, 77, 0.25);
    --color-alpha-09: rgba(80, 0, 25, 0.25);
    --color-alpha-10: rgba(23, 41, 77, 0.08);
    --color-alpha-11: rgba(255, 255, 255, 0.72);
    --color-alpha-12: rgba(17, 126, 156, 0.08);
    --color-alpha-13: rgba(255, 249, 232, 0.94);
    --color-alpha-14: rgba(255, 249, 232, 0.97);
    --color-alpha-15: rgba(255, 255, 255, 0.75);
    --color-alpha-16: rgba(8, 18, 38, 0.93);
    --color-alpha-17: rgba(23, 41, 77, 0.93);
    --color-alpha-18: rgba(255, 255, 255, 0.2);
    --color-alpha-19: rgba(23, 41, 77, 0.1);
    --color-alpha-20: rgba(255, 255, 255, 0.82);
    --color-alpha-21: rgba(255, 255, 255, 0.25);
    --color-alpha-22: rgba(229, 0, 90, 0.14);
    --color-c5ccd7: #c5ccd7;
    --color-c9d0da: #c9d0da;
    --color-cbd3dd: #cbd3dd;
    --color-ccd2dc: #ccd2dc;
    --color-d4aa00: #d4aa00;
    --color-d8dee8: #d8dee8;
    --color-dfe4ed: #dfe4ed;
    --color-eceff3: #eceff3;
    --color-edf0f5: #edf0f5;
    --color-edf7fa: #edf7fa;
    --color-eef1f5: #eef1f5;
    --color-eef9fa: #eef9fa;
    --color-ef3028: #ef3028;
    --color-f1f3f7: #f1f3f7;
    --color-f4f7fb: #f4f7fb;
    --color-f4fbfd: #f4fbfd;
    --color-f7f8fa: #f7f8fa;
    --color-ff356f: #ff356f;
    --color-ff8056: #ff8056;
    --color-fff: #fff;
    --color-fff2f7: #fff2f7;
    --color-fff3f8: #fff3f8;
    --space-2: 0.125rem;
    --space-3: 0.1875rem;
    --space-4: 0.25rem;
    --space-5: 0.3125rem;
    --space-6: 0.375rem;
    --space-7: 0.4375rem;
    --space-8: 0.5rem;
    --space-9: 0.5625rem;
    --space-10: 0.625rem;
    --space-11: 0.6875rem;
    --space-12: 0.75rem;
    --space-13: 0.8125rem;
    --space-14: 0.875rem;
    --space-15: 0.9375rem;
    --space-16: 1rem;
    --space-17: 1.0625rem;
    --space-18: 1.125rem;
    --space-19: 1.1875rem;
    --space-20: 1.25rem;
    --space-22: 1.375rem;
    --space-23: 1.4375rem;
    --space-24: 1.5rem;
    --space-25: 1.5625rem;
    --space-26: 1.625rem;
    --space-28: 1.75rem;
    --space-30: 1.875rem;
    --space-32: 2rem;
    --space-34: 2.125rem;
    --space-35: 2.1875rem;
    --space-40: 2.5rem;
    --space-42: 2.625rem;
    --space-45: 2.8125rem;
    --space-48: 3rem;
    --space-52: 3.25rem;
    --space-60: 3.75rem;
    --space-65: 4.0625rem;
    --space-74: 4.625rem;
    --space-78: 4.875rem;
    --space-90: 5.625rem;
    --space-105: 6.5625rem;
    --space-120: 7.5rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-78);
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: #ffffff;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    line-height: 1.75;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    transition: all 0.3s ease;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 4px solid var(--yellow);
    outline-offset: 4px;
}

.quick a {
    display: grid;
    place-items: center;
    min-height: 90px;
    padding: var(--space-10);
    text-align: center;
    color: var(--navy);
    border: 2px solid var(--color-edf0f5);
    border-radius: 17px;
    font-weight: 500;
}

.quick a:hover {
    border-color: var(--pink);
    background: var(--color-fff2f7);
}

.section {
    position: relative;
    padding: 100px 0 120px 0;
    overflow: hidden;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-7);
    color: var(--pink);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.eyebrow:before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--yellow);
    border-radius: 8px;
}

.section-title {
    margin: 0 0 var(--space-24);
    color: var(--navy);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.17;
}

.lead {
    max-width: 720px;
    margin-bottom: 34px;
    color: var(--muted);
    font-size: 1.07rem;
    font-weight: 400;
}

.center .lead {
    margin-left: auto;
    margin-right: auto;
}

.how .section-title,
.how .lead {
    color: var(--color-fff);
}

.how .lead {
    opacity: 0.75;
}

.panel img {
    width: 100%;
    border-radius: 16px;
}

.travel .section-title,
.travel .lead {
    color: var(--navy);
}

.travel .lead {
    opacity: 0.8;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

@keyframes float {
    50% {
        transform: translateY(-13px) rotate(2deg);
    }
}

@keyframes float-2 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg) scaleX(-1);
    }

    50% {
        transform: translateY(-13px) rotate(2deg) scaleX(-1);
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.92);
    }
}

@media (width <= 991px) {
    .section {
        padding: var(--space-74) 0;
    }
}

@media (width <= 576px) {
    .quick a {
        min-height: 80px;
        font-size: 0.9rem;
    }
    .section {
        padding: 70px 0;
    }
    .section-title {
        font-size: 2.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

.notice-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.notice-card img[src=""] {
    display: none;
}

.notice-card img:not([src]) + span {
    display: block;
}

.notice-card img[src]:not([src=""]) + span {
    display: none;
}

button:focus {
    outline: 0;
}

.text-red {
    color: #cd1b26;
}