/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */

@layer properties;
@layer theme,
base,
components,
utilities;
@layer theme {
     :root,
     :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-gray-100: oklch(96.7% 0.003 264.542);
        --color-gray-200: oklch(92.8% 0.006 264.531);
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-gray-700: oklch(37.3% 0.034 259.733);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --font-weight-light: 300;
        --font-weight-medium: 500;
        --font-weight-bold: 700;
        --tracking-widest: 0.1em;
        --leading-loose: 2;
        --radius-lg: 0.5rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-dark: #001b23;
        /* --color-primary: #02bbe4; */
        --color-primary: #036243;
        --color-dark-blue: #252a2b;
        --drop-shadow-text: 0 0 7px rgba(0, 0, 0, 0.85);
        --font-SweiSpringSugar: "SweiSpringSugarCJKjp", sans-serif;
        --font-NotoSansTC: "Noto Sans TC", sans-serif;
    }
}

@layer base {
    *,
     ::after,
     ::before,
     ::backdrop,
     ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }
    html,
     :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b,
    strong {
        font-weight: bolder;
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
     :-moz-focusring {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol,
    ul,
    menu {
        list-style: none;
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        display: block;
        vertical-align: middle;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    select,
    optgroup,
    textarea,
     ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }
     :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
     :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
     ::file-selector-button {
        margin-inline-end: 4px;
    }
     ::placeholder {
        opacity: 1;
    }
    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
         ::placeholder {
            color: currentcolor;
            @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }
    textarea {
        resize: vertical;
    }
     ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
     ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
     ::-webkit-datetime-edit {
        display: inline-flex;
    }
     ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
     ::-webkit-datetime-edit,
     ::-webkit-datetime-edit-year-field,
     ::-webkit-datetime-edit-month-field,
     ::-webkit-datetime-edit-day-field,
     ::-webkit-datetime-edit-hour-field,
     ::-webkit-datetime-edit-minute-field,
     ::-webkit-datetime-edit-second-field,
     ::-webkit-datetime-edit-millisecond-field,
     ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
     :-moz-ui-invalid {
        box-shadow: none;
    }
    button,
    input:where([type="button"], [type="reset"], [type="submit"]),
     ::file-selector-button {
        appearance: button;
    }
     ::-webkit-inner-spin-button,
     ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}

@layer utilities {
    .pointer-events-auto {
        pointer-events: auto;
    }
    .pointer-events-none {
        pointer-events: none;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .absolute {
        position: absolute;
    }
    .fixed {
        position: fixed;
    }
    .relative {
        position: relative;
    }
    .sticky {
        position: sticky;
    }
    .inset-0 {
        inset: calc(var(--spacing) * 0);
    }
    .-top-10 {
        top: calc(var(--spacing) * -10);
    }
    .-top-51 {
        top: calc(var(--spacing) * -51);
    }
    .top-0 {
        top: calc(var(--spacing) * 0);
    }
    .top-1\/2 {
        top: calc(1/2 * 100%);
    }
    .top-4 {
        top: calc(var(--spacing) * 4);
    }
    .top-6 {
        top: calc(var(--spacing) * 6);
    }
    .top-30 {
        top: calc(var(--spacing) * 30);
    }
    .top-58 {
        top: calc(var(--spacing) * 58);
    }
    .top-65 {
        top: calc(var(--spacing) * 65);
    }
    .right-0 {
        right: calc(var(--spacing) * 0);
    }
    .right-2 {
        right: calc(var(--spacing) * 2);
    }
    .right-4 {
        right: calc(var(--spacing) * 4);
    }
    .right-6 {
        right: calc(var(--spacing) * 6);
    }
    .-bottom-6 {
        bottom: calc(var(--spacing) * -6);
    }
    .bottom-1\.5 {
        bottom: calc(var(--spacing) * 1.5);
    }
    .bottom-4 {
        bottom: calc(var(--spacing) * 4);
    }
    .bottom-16 {
        bottom: calc(var(--spacing) * 16);
    }
    .-left-14 {
        left: calc(var(--spacing) * -14);
    }
    .left-0 {
        left: calc(var(--spacing) * 0);
    }
    .left-1\/2 {
        left: calc(1/2 * 100%);
    }
    .left-4 {
        left: calc(var(--spacing) * 4);
    }
    .left-8 {
        left: calc(var(--spacing) * 8);
    }
    .left-\[6\%\] {
        left: 6%;
    }
    .left-\[18\%\] {
        left: 18%;
    }
    .left-\[54\%\] {
        left: 54%;
    }
    .-z-10 {
        z-index: calc(10 * -1);
    }
    .z-0 {
        z-index: 0;
    }
    .z-10 {
        z-index: 10;
    }
    .z-20 {
        z-index: 20;
    }
    .z-50 {
        z-index: 50;
    }
    .order-first {
        order: -9999;
    }
    .container {
        width: 100%;
        @media (width >=40rem) {
            max-width: 40rem;
        }
        @media (width >=48rem) {
            max-width: 48rem;
        }
        @media (width >=64rem) {
            max-width: 64rem;
        }
        @media (width >=80rem) {
            max-width: 80rem;
        }
        @media (width >=96rem) {
            max-width: 96rem;
        }
        @media (width <=1535px) {
            max-width: unset;
        }
    }
    .container {
        margin-inline: auto;
        padding-inline: 2rem;
    }
    .mx-auto {
        margin-inline: auto;
    }
    .my-8 {
        margin-block: calc(var(--spacing) * 8);
    }
    .my-10 {
        margin-block: calc(var(--spacing) * 10);
    }
    .mt-0 {
        margin-top: calc(var(--spacing) * 0);
    }
    .mt-4 {
        margin-top: calc(var(--spacing) * 4);
    }
    .mt-6 {
        margin-top: calc(var(--spacing) * 6);
    }
    .mt-10 {
        margin-top: calc(var(--spacing) * 10);
    }
    .mt-13 {
        margin-top: calc(var(--spacing) * 13);
    }
    .mr-1 {
        margin-right: calc(var(--spacing) * 1);
    }
    .\!mb-0 {
        margin-bottom: calc(var(--spacing) * 0) !important;
    }
    .\!mb-6 {
        margin-bottom: calc(var(--spacing) * 6) !important;
    }
    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }
    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }
    .mb-7 {
        margin-bottom: calc(var(--spacing) * 7);
    }
    .mb-14 {
        margin-bottom: calc(var(--spacing) * 14);
    }
    .ml-1 {
        margin-left: calc(var(--spacing) * 1);
    }
    .ml-2 {
        margin-left: calc(var(--spacing) * 2);
    }
    .ml-auto {
        margin-left: auto;
    }
    .\!hidden {
        display: none !important;
    }
    .block {
        display: block;
    }
    .flex {
        display: flex;
    }
    .hidden {
        display: none;
    }
    .inline-block {
        display: inline-block;
    }
    .aspect-3\/2 {
        aspect-ratio: 3/2;
    }
    .aspect-\[4\/3\] {
        aspect-ratio: 4/3;
    }
    .aspect-\[74\/59\] {
        aspect-ratio: 74/59;
    }
    .aspect-\[128\/140\] {
        aspect-ratio: 128/140;
    }
    .aspect-\[150\/140\] {
        aspect-ratio: 150/140;
    }
    .aspect-\[133\/73\] {
        aspect-ratio: 133/73;
    }
    .aspect-\[810\/550\] {
        aspect-ratio: 810/550;
    }
    .aspect-\[854\/600\] {
        aspect-ratio: 854/600;
    }
    .aspect-\[992\/662\] {
        aspect-ratio: 992/662;
    }
    .aspect-square {
        aspect-ratio: 1 / 1;
    }
    .size-6 {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
    }
    .size-16 {
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16);
    }
    .h-4 {
        height: calc(var(--spacing) * 4);
    }
    .h-6 {
        height: calc(var(--spacing) * 6);
    }
    .h-12 {
        height: calc(var(--spacing) * 12);
    }
    .h-15 {
        height: calc(var(--spacing) * 15);
    }
    .h-\[250px\] {
        height: 250px;
    }
    .h-auto {
        height: auto;
    }
    .h-dvh {
        height: 100dvh;
    }
    .h-fit {
        height: fit-content;
    }
    .h-75 {
        height: 75%;
    }
    .h-full {
        height: 100%;
    }
    .max-h-\[90vh\] {
        max-height: 90vh;
    }
    .max-h-\[300px\] {
        max-height: 300px;
    }
    .max-h-\[1000px\] {
        max-height: 1000px;
    }
    .max-h-full {
        max-height: 100%;
    }
    .min-h-\[850px\] {
        min-height: 850px;
    }
    .min-h-dvh {
        min-height: 100dvh;
    }
    .w-1\/2 {
        width: calc(1/2 * 100%);
    }
    .w-4 {
        width: calc(var(--spacing) * 4);
    }
    .w-6 {
        width: calc(var(--spacing) * 6);
    }
    .w-12 {
        width: calc(var(--spacing) * 12);
    }
    .w-\[35\%\] {
        width: 35%;
    }
    .w-\[55\%\] {
        width: 55%;
    }
    .w-\[70px\] {
        width: 70px;
    }
    .w-\[80\%\] {
        width: 80%;
    }
    .w-\[80px\] {
        width: 80px;
    }
    .w-\[85\%\] {
        width: 85%;
    }
    .w-\[90\%\] {
        width: 90%;
    }
    .w-\[100px\] {
        width: 100px;
    }
    .w-\[120px\] {
        width: 120px;
    }
    .w-\[150px\] {
        width: 150px;
    }
    .w-\[200dvw\] {
        width: 200dvw;
    }
    .w-\[270px\] {
        width: 270px;
    }
    .w-\[300dvw\] {
        width: 300dvw;
    }
    .w-\[1400px\] {
        width: 1400px;
    }
    .w-dvw {
        width: 100dvw;
    }
    .w-fit {
        width: fit-content;
    }
    .w-full {
        width: 100%;
    }
    .max-w-\[20\%\] {
        max-width: 20%;
    }
    .max-w-\[260px\] {
        max-width: 260px;
    }
    .max-w-\[400px\] {
        max-width: 400px;
    }
    .max-w-\[600px\] {
        max-width: 600px;
    }
    .max-w-\[750px\] {
        max-width: 750px;
    }
    .max-w-\[900px\] {
        max-width: 900px;
    }
    .max-w-\[1000px\] {
        max-width: 1000px;
    }
    .max-w-\[1920px\] {
        max-width: 1920px;
    }
    .max-w-full {
        max-width: 100%;
    }
    .min-w-\[730px\] {
        min-width: 730px;
    }
    .min-w-\[1400px\] {
        min-width: 1400px;
    }
    .grow {
        flex-grow: 1;
    }
    .origin-center {
        transform-origin: center;
    }
    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-x-\[5\%\] {
        --tw-translate-x: calc(5% * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-x-1 {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-x-\[-3\%\] {
        --tw-translate-x: -3%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-5 {
        --tw-translate-y: calc(var(--spacing) * -5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-10 {
        --tw-translate-y: calc(var(--spacing) * -10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-y-3\.5 {
        --tw-translate-y: calc(var(--spacing) * 3.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    }
    .cursor-move {
        cursor: move;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .touch-manipulation {
        touch-action: manipulation;
    }
    .resize {
        resize: both;
    }
    .appearance-none {
        appearance: none;
    }
    .flex-col {
        flex-direction: column;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .\!items-start {
        align-items: flex-start !important;
    }
    .items-center {
        align-items: center;
    }
    .items-end-safe {
        align-items: safe flex-end;
    }
    .items-start {
        align-items: flex-start;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-space-around {
        justify-content: space-around;
    }
    .gap-2 {
        gap: calc(var(--spacing) * 2);
    }
    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }
    .gap-8 {
        gap: calc(var(--spacing) * 8);
    }
    .gap-10 {
        gap: calc(var(--spacing) * 10);
    }
    .space-y-4 {
         :where(& >: not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
            margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .gap-x-2 {
        column-gap: calc(var(--spacing) * 2);
    }
    .\!overflow-visible {
        overflow: visible !important;
    }
    .overflow-clip {
        overflow: clip;
    }
    .overflow-hidden {
        overflow: hidden;
    }
    .\!overflow-x-clip {
        overflow-x: clip !important;
    }
    .overflow-x-auto {
        overflow-x: auto;
    }
    .overflow-x-clip {
        overflow-x: clip;
    }
    .overflow-x-scroll {
        overflow-x: scroll;
    }
    .overflow-y-scroll {
        overflow-y: scroll;
    }
    .overscroll-contain {
        overscroll-behavior: contain;
    }
    .rounded-2xl {
        border-radius: var(--radius-2xl);
    }
    .rounded-lg {
        border-radius: var(--radius-lg);
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
    .\!border-\[\#595757\] {
        border-color: #595757 !important;
    }
    .border-white {
        border-color: var(--color-white);
    }
    .\!bg-\[\#595757\] {
        background-color: #595757 !important;
    }
    .bg-\[\#69BECD\] {
        background-color: #69BECD;
    }
    .bg-\[\#A3A3A3\] {
        background-color: #A3A3A3;
    }
    .bg-black\/30 {
        background-color: color-mix(in srgb, #000 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
        }
    }
    .bg-black\/90 {
        background-color: color-mix(in srgb, #000 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
        }
    }
    .bg-dark-blue {
        background-color: var(--color-dark-blue);
    }
    .bg-dark\/81 {
        background-color: color-mix(in srgb, #001b23 81%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-dark) 81%, transparent);
        }
    }
    .bg-gray-100 {
        background-color: var(--color-gray-100);
    }
    .bg-primary {
        background-color: var(--color-primary);
    }
    .bg-white\/90 {
        background-color: color-mix(in srgb, #fff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
        }
    }
    .bg-\[url\(\'\.\.\/images\/bg-2\.webp\'\)\] {
 background-image: url('../images/bg-2.webp');
}

.bg-\[url\(\'\.\.\/images\/bg-2_old\.webp\'\)\] {
 background-image: url('../images/bg-2_old.webp');

}
.bg-\[url\(\'\.\.\/images\/bg-3\.webp\'\)\] {
 background-image: url('../images/bg-3.webp');

}
.bg-\[url\(\'\.\.\/images\/brand-1_mb\.jpg\'\)\] {
 background-image: url('../images/brand-1_mb.jpg');

}
.bg-\[url\(\'\.\.\/images\/brand-3\.webp\'\)\] {
 background-image: url('../images/brand-3.webp');

}
.bg-\[url\(\'\.\.\/images\/brand-4_mb\.jpg\'\)\] {
 background-image: url('../images/brand-4_mb.jpg');

}
.bg-\[url\(\'\.\.\/images\/brand-5_mb\.jpg\'\)\] {
 background-image: url('../images/brand-5_mb.jpg');

}
.bg-\[url\(\'\.\.\/images\/brand-6_mb\.jpg\'\)\] {
 background-image: url('../images/brand-6_mb.jpg');

}
.bg-\[url\(\'\.\.\/images\/hero\.jpg\'\)\] {
 background-image: url('../images/hero.jpg');

}
.bg-\[url\(\'\.\.\/images\/industry-1\.webp\'\)\] {
 background-image: url('../images/industry-1.webp');

}
.bg-\[url\(\'\.\.\/images\/industry-2\.webp\'\)\] {
 background-image: url('../images/industry-2.webp');

}
.bg-\[url\(\'\.\.\/images\/industry-3\.webp\'\)\] {
 background-image: url('../images/industry-3.webp');

}
.bg-\[url\(\'\.\.\/images\/park-1\.webp\'\)\] {
 background-image: url('../images/park-1.webp');

}
.bg-\[url\(\'\.\.\/images\/park-2\.webp\'\)\] {
 background-image: url('../images/park-2.webp');

}
.bg-\[url\(\'\.\.\/images\/park-3\.webp\'\)\] {
 background-image: url('../images/park-3.webp');

}
.bg-\[url\(\'\.\.\/images\/park-4\.jpg\'\)\] {
 background-image: url('../images/park-4.jpg');

}
.bg-\[url\(\'\.\.\/images\/aerial\.jpg\'\)\] {
 background-image: url('../images/aerial.jpg');

}
.bg-contain {
    background-size: contain;
}
.bg-cover {
    background-size: cover;
}
.bg-bottom {
    background-position: bottom;
}
.bg-center {
    background-position: center;
}
.bg-top {
    background-position: top;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.object-contain {
    object-fit: contain;
}
.object-cover {
    object-fit: cover;
}
.object-top {
    object-position: top;
}
.p-4 {
    padding: calc(var(--spacing) * 4);
}
.px-2 {
    padding-inline: calc(var(--spacing) * 2);
}
.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}
.px-6 {
    padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
    padding-inline: calc(var(--spacing) * 8);
}
.py-2 {
    padding-block: calc(var(--spacing) * 2);
}
.py-4 {
    padding-block: calc(var(--spacing) * 4);
}
.py-10 {
    padding-block: calc(var(--spacing) * 10);
}
.py-20 {
    padding-block: calc(var(--spacing) * 20);
}
.pt-10 {
    padding-top: calc(var(--spacing) * 10);
}
.pt-15 {
    padding-top: calc(var(--spacing) * 15);
}
.pt-16 {
    padding-top: calc(var(--spacing) * 16);
}
.pt-20 {
    padding-top: calc(var(--spacing) * 20);
}
.pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
}
.pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
}
.pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
}
.pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
}
.pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
}
.pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-start {
    text-align: start;
}
.align-middle {
    vertical-align: middle;
}
.font-NotoSansTC {
    font-family: var(--font-NotoSansTC);
}
.font-SweiSpringSugar {
    font-family: var(--font-SweiSpringSugar);
}
.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}
.tracking-\[0\.15em\] {
    --tw-tracking: 0.15em;
    letter-spacing: 0.15em;
}
.tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
}
.whitespace-nowrap {
    white-space: nowrap;
}
.\!text-\[\#44403f\] {
    color: #44403f !important;
}
.\!text-\[\#595757\] {
    color: #595757 !important;
}
.text-\[\#856A00\] {
    color: #856A00;
}
.text-\[\#adadad\] {
    color: #adadad;
}
.text-\[\#ededed\] {
    color: #ededed;
}
.text-gray-700 {
    color: var(--color-gray-700);
}
.text-white {
    color: var(--color-white);
}
.uppercase {
    text-transform: uppercase;
}
.opacity-0 {
    opacity: 0%;
}
.bg-blend-color-dodge {
    background-blend-mode: color-dodge;
}
.bg-blend-multiply {
    background-blend-mode: multiply;
}
.bg-blend-overlay {
    background-blend-mode: overlay;
}
.mix-blend-overlay {
    mix-blend-mode: overlay;
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
    0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow),
    var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow),
    var(--tw-ring-shadow),
    var(--tw-shadow);
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.drop-shadow-text {
    --tw-drop-shadow-size: drop-shadow(0 0 7px var(--tw-drop-shadow-color, rgba(0, 0, 0, 0.85)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-text));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.transition {
    transition-property: color,
    background-color,
    border-color,
    outline-color,
    text-decoration-color,
    fill,
    stroke,
    --tw-gradient-from,
    --tw-gradient-via,
    --tw-gradient-to,
    opacity,
    box-shadow,
    transform,
    translate,
    scale,
    rotate,
    filter,
    -webkit-backdrop-filter,
    backdrop-filter,
    display,
    visibility,
    content-visibility,
    overlay,
    pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
    transition-property: color,
    background-color,
    border-color,
    outline-color,
    text-decoration-color,
    fill,
    stroke,
    --tw-gradient-from,
    --tw-gradient-via,
    --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
}
.peer-checked\:opacity-100 {
    &:is(:where(.peer):checked ~ *) {
        opacity: 100%;
    }
}
.checked\:border-white {
    &:checked {
        border-color: var(--color-white);
    }
}
.checked\:bg-primary {
    &:checked {
        background-color: var(--color-primary);
    }
}
.hover\:bg-\[\#47b6c7\] {
    &:hover {
        @media (hover: hover) {
            background-color: #47b6c7;
        }
    }
}
.hover\:bg-\[\#b9b9b9\] {
    &:hover {
        @media (hover: hover) {
            background-color: #b9b9b9;
        }
    }
}
.hover\:bg-white {
    &:hover {
        @media (hover: hover) {
            background-color: var(--color-white);
        }
    }
}
.hover\:text-gray-300 {
    &:hover {
        @media (hover: hover) {
            color: var(--color-gray-300);
        }
    }
}
.focus\:bg-\[\#3b95a3\] {
    &:focus {
        background-color: #3b95a3;
    }
}
.focus\:bg-\[\#c5c4c4\] {
    &:focus {
        background-color: #c5c4c4;
    }
}
.focus\:ring {
    &:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow),
        var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow),
        var(--tw-ring-shadow),
        var(--tw-shadow);
    }
}
.focus\:ring-\[\#616161\]\/50 {
    &:focus {
        --tw-ring-color: color-mix(in oklab, #616161 50%, transparent);
    }
}
.active\:bg-gray-200 {
    &:active {
        background-color: var(--color-gray-200);
    }
}
.min-\[350px\]\:whitespace-nowrap {
    @media (width >=350px) {
        white-space: nowrap;
    }
}
.max-aspect-\[128\/140\] {
    @media (width <=40rem) {
        aspect-ratio: 128 / 140;
    }
}
.sm\:-top-20 {
    @media (width >=40rem) {
        top: calc(var(--spacing) * -20);
    }
}
.sm\:left-0 {
    @media (width >=40rem) {
        left: calc(var(--spacing) * 0);
    }
}
.sm\:flex {
    @media (width >=40rem) {
        display: flex;
    }
}
.sm\:hidden {
    @media (width >=40rem) {
        display: none;
    }
}
.sm\:block {
    @media (width >=40rem) {
        display: block;
    }
}
.sm\:max-h-\[480px\] {
    @media (width >=40rem) {
        max-height: 480px;
    }
}
.sm\:w-\[150dvw\] {
    @media (width >=40rem) {
        width: 150dvw;
    }
}
.sm\:px-8 {
    @media (width >=40rem) {
        padding-inline: calc(var(--spacing) * 8);
    }
}
.sm\:px-10 {
    @media (width >=40rem) {
        padding-inline: calc(var(--spacing) * 10);
    }
}
.sm\:px-12 {
    @media (width >=40rem) {
        padding-inline: calc(var(--spacing) * 12);
    }
}
.sm\:text-sm {
    @media (width >=40rem) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}
.md\:max-w-\[600px\] {
    @media (width >=48rem) {
        max-width: 600px;
    }
}
.md\:min-w-\[800px\] {
    @media (width >=48rem) {
        min-width: 800px;
    }
}
.lg\:absolute {
    @media (width >=64rem) {
        position: absolute;
    }
}
.lg\:top-\[8\%\] {
    @media (width >=64rem) {
        top: 8%;
    }
}
.lg\:right-8 {
    @media (width >=64rem) {
        right: calc(var(--spacing) * 8);
    }
}
.lg\:-bottom-10 {
    @media (width >=64rem) {
        bottom: calc(var(--spacing) * -10);
    }
}
.lg\:bottom-8 {
    @media (width >=64rem) {
        bottom: calc(var(--spacing) * 8);
    }
}
.lg\:order-last {
    @media (width >=64rem) {
        order: 9999;
    }
}
.lg\:mx-0 {
    @media (width >=64rem) {
        margin-inline: calc(var(--spacing) * 0);
    }
}
.lg\:-mt-10 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * -10);
    }
}
.lg\:-mt-20 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * -20);
    }
}
.lg\:-mt-33 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * -33);
    }
}
.lg\:-mt-36 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * -36);
    }
}
.lg\:mt-0 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * 0);
    }
}
.lg\:mt-30 {
    @media (width >=64rem) {
        margin-top: calc(var(--spacing) * 30);
    }
}
.lg\:-mr-6 {
    @media (width >=64rem) {
        margin-right: calc(var(--spacing) * -6);
    }
}
.lg\:\!mb-10 {
    @media (width >=64rem) {
        margin-bottom: calc(var(--spacing) * 10) !important;
    }
}
.lg\:mb-7 {
    @media (width >=64rem) {
        margin-bottom: calc(var(--spacing) * 7);
    }
}
.lg\:mb-8 {
    @media (width >=64rem) {
        margin-bottom: calc(var(--spacing) * 8);
    }
}
.lg\:ml-0 {
    @media (width >=64rem) {
        margin-left: calc(var(--spacing) * 0);
    }
}
.lg\:block {
    @media (width >=64rem) {
        display: block;
    }
}
.lg\:flex {
    @media (width >=64rem) {
        display: flex;
    }
}
.lg\:hidden {
    @media (width >=64rem) {
        display: none;
    }
}
.lg\:aspect-\[5\/4\] {
    @media (width >=64rem) {
        aspect-ratio: 5/4;
    }
}
.lg\:aspect-\[10\/11\] {
    @media (width >=64rem) {
        aspect-ratio: 10/11;
    }
}
.lg\:aspect-auto {
    @media (width >=64rem) {
        aspect-ratio: auto;
    }
}
.lg\:\!size-\[172px\] {
    @media (width >=64rem) {
        width: 172px !important;
        height: 172px !important;
    }
}
.lg\:h-10 {
    @media (width >=64rem) {
        height: calc(var(--spacing) * 10);
    }
}
.lg\:h-20 {
    @media (width >=64rem) {
        height: calc(var(--spacing) * 20);
    }
}
.lg\:h-auto {
    @media (width >=64rem) {
        height: auto;
    }
}
.lg\:max-h-max {
    @media (width >=64rem) {
        max-height: max-content;
    }
}
.lg\:min-h-\[1200px\] {
    @media (width >=64rem) {
        min-height: 1200px;
    }
}
.lg\:min-h-\[1300px\] {
    @media (width >=64rem) {
        min-height: 1300px;
    }
}
.lg\:min-h-auto {
    @media (width >=64rem) {
        min-height: auto;
    }
}
.lg\:w-1\/2 {
    @media (width >=64rem) {
        width: calc(1/2 * 100%);
    }
}
.lg\:w-5\/12 {
    @media (width >=64rem) {
        width: calc(5/12 * 100%);
    }
}
.lg\:w-7\/12 {
    @media (width >=64rem) {
        width: calc(7/12 * 100%);
    }
}
.lg\:w-10\/12 {
    @media (width >=64rem) {
        width: calc(10/12 * 100%);
    }
}
.lg\:w-\[10\%\] {
    @media (width >=64rem) {
        width: 10%;
    }
}
.lg\:w-\[40\%\] {
    @media (width >=64rem) {
        width: 40%;
    }
}
.lg\:w-\[45\%\] {
    @media (width >=64rem) {
        width: 45%;
    }
}
.lg\:w-\[50\%\] {
    @media (width >=64rem) {
        width: 50%;
    }
}
.lg\:w-\[60\%\] {
    @media (width >=64rem) {
        width: 60%;
    }
}
.lg\:w-\[60px\] {
    @media (width >=64rem) {
        width: 60px;
    }
}
.lg\:w-\[95dvw\] {
    @media (width >=64rem) {
        width: 95dvw;
    }
}
.lg\:w-\[200px\] {
    @media (width >=64rem) {
        width: 200px;
    }
}
.lg\:w-\[250px\] {
    @media (width >=64rem) {
        width: 250px;
    }
}
.lg\:w-\[350px\] {
    @media (width >=64rem) {
        width: 350px;
    }
}
.lg\:w-\[400px\] {
    @media (width >=64rem) {
        width: 400px;
    }
}
.lg\:w-\[434px\] {
    @media (width >=64rem) {
        width: 434px;
    }
}
.lg\:w-auto {
    @media (width >=64rem) {
        width: auto;
    }
}
.lg\:w-fit {
    @media (width >=64rem) {
        width: fit-content;
    }
}
.lg\:w-full {
    @media (width >=64rem) {
        width: 100%;
    }
}
.lg\:max-w-1\/2 {
    @media (width >=64rem) {
        max-width: calc(1/2 * 100%);
    }
}
.lg\:max-w-3\/5 {
    @media (width >=64rem) {
        max-width: calc(3.5/5 * 100%);
    }
}
.lg\:max-w-\[50\%\] {
    @media (width >=64rem) {
        max-width: 50%;
    }
}
.lg\:max-w-\[55\%\] {
    @media (width >=64rem) {
        max-width: 55%;
    }
}
.lg\:max-w-\[65\%\] {
    @media (width >=64rem) {
        max-width: 65%;
    }
}
.lg\:max-w-\[90\%\] {
    @media (width >=64rem) {
        max-width: 90%;
    }
}
.lg\:max-w-\[550px\] {
    @media (width >=64rem) {
        max-width: 550px;
    }
}
.lg\:max-w-\[1500px\] {
    @media (width >=64rem) {
        max-width: 1500px;
    }
}
.lg\:max-w-full {
    @media (width >=64rem) {
        max-width: 100%;
    }
}
.lg\:grow {
    @media (width >=64rem) {
        flex-grow: 1;
    }
}
.lg\:-translate-x-\[1\%\] {
    @media (width >=64rem) {
        --tw-translate-x: calc(1% * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-x-1\/2 {
    @media (width >=64rem) {
        --tw-translate-x: calc(1/2 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-x-24 {
    @media (width >=64rem) {
        --tw-translate-x: calc(var(--spacing) * 24);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-x-\[-10\%\] {
    @media (width >=64rem) {
        --tw-translate-x: -10%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-x-\[18\%\] {
    @media (width >=64rem) {
        --tw-translate-x: 18%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-y-\[-10\%\] {
    @media (width >=64rem) {
        --tw-translate-y: -10%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:translate-y-\[15\%\] {
    @media (width >=64rem) {
        --tw-translate-y: 15%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.lg\:cursor-default {
    @media (width >=64rem) {
        cursor: default;
    }
}
.lg\:flex-row {
    @media (width >=64rem) {
        flex-direction: row;
    }
}
.lg\:flex-nowrap {
    @media (width >=64rem) {
        flex-wrap: nowrap;
    }
}
.lg\:items-start {
    @media (width >=64rem) {
        align-items: flex-start;
    }
}
.lg\:rounded-3xl {
    @media (width >=64rem) {
        border-radius: var(--radius-3xl);
    }
}
.lg\:bg-transparent {
    @media (width >=64rem) {
        background-color: transparent;
    }
}
.lg\:px-4 {
    @media (width >=64rem) {
        padding-inline: calc(var(--spacing) * 4);
    }
}
.lg\:px-8 {
    @media (width >=64rem) {
        padding-inline: calc(var(--spacing) * 8);
    }
}
.lg\:py-6 {
    @media (width >=64rem) {
        padding-block: calc(var(--spacing) * 6);
    }
}
.lg\:py-15 {
    @media (width >=64rem) {
        padding-block: calc(var(--spacing) * 15);
    }
}
.lg\:pt-4 {
    @media (width >=64rem) {
        padding-top: calc(var(--spacing) * 4);
    }
}
.lg\:pt-15 {
    @media (width >=64rem) {
        padding-top: calc(var(--spacing) * 15);
    }
}
.lg\:pt-40 {
    @media (width >=64rem) {
        padding-top: calc(var(--spacing) * 40);
    }
}
.lg\:pb-0 {
    @media (width >=64rem) {
        padding-bottom: calc(var(--spacing) * 0);
    }
}
.lg\:pb-10 {
    @media (width >=64rem) {
        padding-bottom: calc(var(--spacing) * 10);
    }
}
.lg\:pb-30 {
    @media (width >=64rem) {
        padding-bottom: calc(var(--spacing) * 30);
    }
}
.lg\:pb-40 {
    @media (width >=64rem) {
        padding-bottom: calc(var(--spacing) * 40);
    }
}
.lg\:text-left {
    @media (width >=64rem) {
        text-align: left;
    }
}
.lg\:text-2xl {
    @media (width >=64rem) {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}
.lg\:text-2xl\/none {
    @media (width >=64rem) {
        font-size: var(--text-2xl);
        line-height: 1;
    }
}
.lg\:text-3xl {
    @media (width >=64rem) {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
}
.lg\:text-\[32px\]\/none {
    @media (width >=64rem) {
        font-size: 32px;
        line-height: 1;
    }
}
.lg\:text-base {
    @media (width >=64rem) {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
.lg\:tracking-\[0\.3em\] {
    @media (width >=64rem) {
        --tw-tracking: 0.3em;
        letter-spacing: 0.3em;
    }
}
.lg\:text-nowrap {
    @media (width >=64rem) {
        text-wrap: nowrap;
    }
}
.lg\:\[writing-mode\:vertical-lr\] {
    @media (width >=64rem) {
        writing-mode: vertical-lr;
    }
}
.lg\:\[writing-mode\:vertical-rl\] {
    @media (width >=64rem) {
        writing-mode: vertical-rl;
    }
}
.lg\:text-center {
    @media (width >=64rem) {
        text-align: center;
    }
}
.xl\:order-last {
    @media (width >=80rem) {
        order: 9999;
    }
}
.xl\:col-span-5 {
    @media (width >=80rem) {
        grid-column: span 5 / span 5;
    }
}
.xl\:col-span-7 {
    @media (width >=80rem) {
        grid-column: span 7 / span 7;
    }
}
.xl\:container {
    @media (width >=80rem) {
        width: 100%;
        @media (width >=40rem) {
            max-width: 40rem;
        }
        @media (width >=48rem) {
            max-width: 48rem;
        }
        @media (width >=64rem) {
            max-width: 64rem;
        }
        @media (width >=80rem) {
            max-width: 80rem;
        }
        @media (width >=96rem) {
            max-width: 96rem;
        }
    }
}
.xl\:container {
    @media (width >=80rem) {
        margin-inline: auto;
        padding-inline: 2rem;
    }
}
.xl\:grid {
    @media (width >=80rem) {
        display: grid;
    }
}
.xl\:hidden {
    @media (width >=80rem) {
        display: none;
    }
}
.xl\:\!size-\[200px\] {
    @media (width >=80rem) {
        width: 200px !important;
        height: 200px !important;
    }
}
.xl\:h-\[500px\] {
    @media (width >=80rem) {
        height: 500px;
    }
}
.xl\:min-h-\[1100px\] {
    @media (width >=80rem) {
        min-height: 1100px;
    }
}
.xl\:w-\[250px\] {
    @media (width >=80rem) {
        width: 250px;
    }
}
.xl\:max-w-\[700px\] {
    @media (width >=80rem) {
        max-width: 700px;
    }
}
.xl\:grid-cols-12 {
    @media (width >=80rem) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}
.xl\:overflow-hidden {
    @media (width >=80rem) {
        overflow: hidden;
    }
}
.xl\:bg-dark-blue\/95 {
    @media (width >=80rem) {
        background-color: color-mix(in srgb, #252a2b 95%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-dark-blue) 95%, transparent);
        }
    }
}
.xl\:px-6 {
    @media (width >=80rem) {
        padding-inline: calc(var(--spacing) * 6);
    }
}
.xl\:py-10 {
    @media (width >=80rem) {
        padding-block: calc(var(--spacing) * 10);
    }
}
.xl\:py-20 {
    @media (width >=80rem) {
        padding-block: calc(var(--spacing) * 20);
    }
}
.xl\:pt-0 {
    @media (width >=80rem) {
        padding-top: calc(var(--spacing) * 0);
    }
}
.xl\:pt-30 {
    @media (width >=80rem) {
        padding-top: calc(var(--spacing) * 30);
    }
}
.xl\:block {
    @media (width >=96rem) {
        display: block;
    }
}
.xl\:text-center {
    @media (width >=96rem) {
        text-align: center;
    }
}
.\32 xl\:top-50 {
    @media (width >=96rem) {
        top: calc(var(--spacing) * 50);
    }
}
.\32 xl\:top-85 {
    @media (width >=96rem) {
        top: calc(var(--spacing) * 85);
    }
}
.\32 xl\:top-95 {
    @media (width >=96rem) {
        top: calc(var(--spacing) * 95);
    }
}
.\32 xl\:left-0 {
    @media (width >=96rem) {
        left: calc(var(--spacing) * 0);
    }
}
.\32 xl\:left-\[0\] {
    @media (width >=96rem) {
        left: 0;
    }
}
.\32 xl\:left-\[17\%\] {
    @media (width >=96rem) {
        left: 17%;
    }
}
.\32 xl\:left-\[50\%\] {
    @media (width >=96rem) {
        left: 50%;
    }
}
.\32 xl\:left-\[59\%\] {
    @media (width >=96rem) {
        left: 59%;
    }
}
.\32 xl\:mx-10 {
    @media (width >=96rem) {
        margin-inline: calc(var(--spacing) * 10);
    }
}
.\32 xl\:my-10 {
    @media (width >=96rem) {
        margin-block: calc(var(--spacing) * 10);
    }
}
.\32 xl\:mt-30 {
    @media (width >=96rem) {
        margin-top: calc(var(--spacing) * 30);
    }
}
.\32 xl\:mt-40 {
    @media (width >=96rem) {
        margin-top: calc(var(--spacing) * 40);
    }
}
.\32 xl\:\!size-\[250px\] {
    @media (width >=96rem) {
        width: 250px !important;
        height: 250px !important;
    }
}
.\32 xl\:\!size-\[265px\] {
    @media (width >=96rem) {
        width: 265px !important;
        height: 265px !important;
    }
}
.\32 xl\:min-h-\[1300px\] {
    @media (width >=96rem) {
        min-height: 1300px;
    }
}
.\32 xl\:w-\[300px\] {
    @media (width >=96rem) {
        width: 300px;
    }
}
.\32 xl\:max-w-\[60\%\] {
    @media (width >=96rem) {
        max-width: 60%;
    }
}
.\32 xl\:max-w-\[1330px\] {
    @media (width >=96rem) {
        max-width: 1330px;
    }
}
.\32 xl\:max-w-\[1770px\] {
    @media (width >=96rem) {
        max-width: 1770px;
    }
}
.\32 xl\:max-w-\[1920px\] {
    @media (width >=96rem) {
        max-width: 1920px;
    }
}
.\32 xl\:min-w-full {
    @media (width >=96rem) {
        min-width: 100%;
    }
}
.\32 xl\:translate-x-0 {
    @media (width >=96rem) {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}
.\32 xl\:px-8 {
    @media (width >=96rem) {
        padding-inline: calc(var(--spacing) * 8);
    }
}
.\32 xl\:pb-10 {
    @media (width >=96rem) {
        padding-bottom: calc(var(--spacing) * 10);
    }
}
.\32 xl\:pb-20 {
    @media (width >=96rem) {
        padding-bottom: calc(var(--spacing) * 20);
    }
}
.\32 xl\:pb-44 {
    @media (width >=96rem) {
        padding-bottom: calc(var(--spacing) * 44);
    }
}
@font-face {
    font-family: "SweiSpringSugarCJKjp";
    src: url("/fonts/CJK_JP/SweiSpringSugarCJKjp-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "SweiSpringSugarCJKjp";
    src: url("/fonts/CJK_JP/SweiSpringSugarCJKjp-Medium.woff2") format("woff2"),
    url("/fonts/CJK_JP/SweiSpringSugarCJKjp-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "SweiSpringSugarCJKjp";
    src: url("/fonts/CJK_JP/SweiSpringSugarCJKjp-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}
@layer base {
    body {
        background-color: var(--color-white) !important;
        background-color: var(--color-dark-blue);
        font-size: var(--text-base);
        line-height: var(--tw-leading,
        var(--text-base--line-height));
        color: var(--color-white);
    }
}
@layer components {
    .section-eng-title {
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-xl);
        line-height: var(--tw-leading,
        var(--text-xl--line-height));
        --tw-tracking: 0.3em;
        letter-spacing: 0.3em;
        text-wrap: balance;
        text-transform: uppercase;
        @media (width>=64rem) {
            margin-bottom: calc(var(--spacing) * 7);
        }
        @media (width>=64rem) {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,
            var(--text-3xl--line-height));
        }
    }
    .section-title {
        margin-inline: calc(var(--spacing) * -2);
        font-size: var(--text-xl);
        line-height: var(--tw-leading,
        var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
        /* color: #EFBF04; */
        color: #036243;
        @media (width>=40rem) {
            margin-inline: calc(var(--spacing) * 0);
        }
        @media (width>=64rem) {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,
            var(--text-4xl--line-height));
        }
        @media (width>=64rem) {
            --tw-tracking: 0.15em;
            letter-spacing: 0.15em;
        }
        @media (width>=96rem) {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading,
            var(--text-5xl--line-height));
        }
    }
    .section-subtitle {
        margin-bottom: calc(var(--spacing) * 4);
        --tw-leading: var(--leading-loose);
        line-height: var(--leading-loose);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
        text-wrap: balance;
        /* color: #EFBF04; */
        color: #036243;
        @media (width>=64rem) {
            font-size: var(--text-2xl);
        }
    }
    .section-text {
        text-align: left;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,
        var(--text-xs--line-height));
        --tw-leading: var(--leading-loose);
        line-height: var(--leading-loose);
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light);
        @media (width>=64rem) {
            font-size: var(--text-base);
            line-height: var(--tw-leading,
            var(--text-sm--line-height));
        }
        @media (width>=96rem) {
            font-size: var(--text-lg);
        }
    }
    .vertical-line {
        position: relative;
        height: calc(var(--spacing) * 25);
        width: 1px;
        background-color: var(--color-white);
        &::before {
            position: absolute;
            top: calc(var(--spacing) * 9);
            left: calc(var(--spacing) * 0);
            height: calc(var(--spacing) * 10);
            width: 5px;
            --tw-translate-x: calc(var(--spacing) * -0.5);
            translate: var(--tw-translate-x) var(--tw-translate-y);
            background-color: #036243;
            content: "";
        }
    }
    .vertical-line-yellow {
        position: relative;
        height: calc(var(--spacing) * 25);
        width: 1px;
        background-color: var(--color-white);
        &::before {
            position: absolute;
            top: calc(var(--spacing) * 9);
            left: calc(var(--spacing) * 0);
            height: calc(var(--spacing) * 10);
            width: 5px;
            --tw-translate-x: calc(var(--spacing) * -0.5);
            translate: var(--tw-translate-x) var(--tw-translate-y);
            background-color: #EFBF04;
            content: "";
        }
    }
    .industry-slide {
        position: relative;
        aspect-ratio: 1440/1078;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .industry-slide-text {
        position: absolute;
        right: calc(var(--spacing) * 2);
        bottom: 2%;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,
        var(--text-sm--line-height));
        white-space: nowrap;
        --tw-drop-shadow-size: drop-shadow(0 0 7px var(--tw-drop-shadow-color,
        rgba(0,
        0,
        0,
        0.85)));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-text));
        filter: var(--tw-blur,
        ) var(--tw-brightness,
        ) var(--tw-contrast,
        ) var(--tw-grayscale,
        ) var(--tw-hue-rotate,
        ) var(--tw-invert,
        ) var(--tw-saturate,
        ) var(--tw-sepia,
        ) var(--tw-drop-shadow,
        );
    }
    .industry-card-image {
        width: 240px;
        height: 240px;
        border-radius: var(--radius-lg);
        object-fit: cover;
        @media (width>=64rem) {
            width: 200px;
            height: 200px;
        }
        @media (width>=64rem) {
            border-radius: calc(infinity * 1px);
        }
        @media (width>=96rem) {
            width: 265px;
            height: 265px;
        }
    }
    .industry-card-text {
        position: absolute;
        bottom: 6%;
        left: calc(1/2 * 100%);
        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,
        var(--text-sm--line-height));
        white-space: nowrap;
        --tw-drop-shadow-size: drop-shadow(0 0 7px var(--tw-drop-shadow-color,
        rgba(0,
        0,
        0,
        0.85)));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-text));
        filter: var(--tw-blur,
        ) var(--tw-brightness,
        ) var(--tw-contrast,
        ) var(--tw-grayscale,
        ) var(--tw-hue-rotate,
        ) var(--tw-invert,
        ) var(--tw-saturate,
        ) var(--tw-sepia,
        ) var(--tw-drop-shadow,
        );
    }
    .building-card-text-year {
        font-size: var(--text-xl);
        line-height: var(--tw-leading,
        var(--text-xl--line-height));
        @media (width>=64rem) {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,
            var(--text-3xl--line-height));
        }
    }
    .building-card-text-name {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,
        var(--text-sm--line-height));
        color: var(--color-primary);
        @media (width>=64rem) {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,
            var(--text-lg--line-height));
        }
    }
    .building-text-pointer {
        position: relative;
        z-index: 40;
        height: calc(var(--spacing) * 10);
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--color-white);
        @media (width>=64rem) {
            height: 90px;
        }
        &::before {
            position: absolute;
            top: calc(var(--spacing) * 0);
            height: calc(var(--spacing) * 7);
            width: 5px;
            background-color: var(--color-primary);
            @media (width>=64rem) {
                height: calc(var(--spacing) * 17);
            }
            content: "";
        }
    }
    .building-text-pointer-left {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px;
        &::before {
            left: calc(var(--spacing) * 0);
            --tw-translate-x: calc(3px * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .building-text-pointer-right {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
        &::before {
            right: calc(var(--spacing) * 0);
            --tw-translate-x: 3px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .basic-title {
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-xl);
        line-height: var(--tw-leading,
        var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        --tw-tracking: 0.5em;
        letter-spacing: 0.5em;
        @media (width>=64rem) {
            margin-bottom: calc(var(--spacing) * 6);
        }
        @media (width>=64rem) {
            font-size: var(--text-3xl);
            line-height: var(--leading-loose);
        }
    }
    .basic-info-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: calc(var(--spacing) * 10);
        font-size: var(--text-xs);
        line-height: 48px;
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
        @media (width>=40rem) {
            font-size: var(--text-sm);
            line-height: 48px;
        }
        @media (width>=64rem) {
            align-items: flex-start;
        }
        @media (width>=80rem) {
            flex-direction: column;
        }
    }
    .basic-info-list-content {
        font-size: var(--text-sm);
        line-height: 48px;
        @media (width>=40rem) {
            font-size: var(--text-base);
            line-height: 48px;
        }
    }
    .form-item {
        margin-bottom: calc(var(--spacing) * 4);
    }
    .form-input {
        height: calc(var(--spacing) * 15);
        width: 100%;
        border-radius: var(--radius-2xl);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 4);
        color: var(--color-white);
        &::placeholder {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,
            var(--text-lg--line-height));
        }
        &::placeholder {
            color: var(--color-white);
        }
        &:focus {
            border-color: var(--color-primary);
        }
        &:focus {
            --tw-ring-shadow: var(--tw-ring-inset,
            ) 0 0 0 calc(2px+var(--tw-ring-offset-width)) var(--tw-ring-color,
            currentcolor);
            box-shadow: var(--tw-inset-shadow),
            var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow),
            var(--tw-ring-shadow),
            var(--tw-shadow);
        }
        &:focus {
            --tw-ring-color: var(--color-primary);
        }
        &:focus {
            --tw-outline-style: none;
            outline-style: none;
        }
        @media (width>=64rem) {
            height: calc(var(--spacing) * 20);
        }
        @media (width>=64rem) {
            border-radius: var(--radius-3xl);
        }
        @media (width>=64rem) {
            padding-block: calc(var(--spacing) * 6);
        }
        @media (width>=64rem) {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,
            var(--text-lg--line-height));
        }
    }
    .form-select {
        appearance: none;
    }
    .form-select-icon {
        position: absolute;
        top: calc(1/2 * 100%);
        right: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 0);
        width: calc(var(--spacing) * 0);
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-top-style: var(--tw-border-style);
        border-top-width: 10px;
        border-right-style: var(--tw-border-style);
        border-right-width: 10px;
        border-left-style: var(--tw-border-style);
        border-left-width: 10px;
        border-top-color: var(--color-white);
        border-right-color: transparent;
        border-left-color: transparent;
    }
    .park-slide {
        position: relative;
        margin-inline: auto;
        aspect-ratio: 5/4;
        max-width: 1920px;
        cursor: grab;
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        @media (width>=64rem) {
            aspect-ratio: 1920/840;
        }
    }
    .park-slide-text {
        position: absolute;
        right: calc(var(--spacing) * 3);
        bottom: calc(var(--spacing) * 3);
        --tw-drop-shadow-size: drop-shadow(0 0 7px var(--tw-drop-shadow-color,
        rgba(0,
        0,
        0,
        0.85)));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-text));
        filter: var(--tw-blur,
        ) var(--tw-brightness,
        ) var(--tw-contrast,
        ) var(--tw-grayscale,
        ) var(--tw-hue-rotate,
        ) var(--tw-invert,
        ) var(--tw-saturate,
        ) var(--tw-sepia,
        ) var(--tw-drop-shadow,
        );
    }
    .swiper-progress {
        position: absolute;
        top: unset !important;
        bottom: calc(var(--spacing) * -8);
        z-index: 30;
        height: 1px !important;
        background-color: var(--color-white) !important;
    }
    .swiper-pagination-progressbar-fill {
        height: 5px !important;
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        background-color: #036243 !important;
        transition-property: width;
        transition-timing-function: var(--tw-ease,
        var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,
        var(--default-transition-duration));
        --tw-duration: 300ms;
        transition-duration: 300ms;
    }
    .landmark-text {
        position: absolute;
        right: calc(var(--spacing) * 2);
        bottom: calc(var(--spacing) * 1.5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,
        var(--text-sm--line-height));
        --tw-drop-shadow-size: drop-shadow(0 0 7px var(--tw-drop-shadow-color,
        rgba(0,
        0,
        0,
        0.85)));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-text));
        filter: var(--tw-blur,
        ) var(--tw-brightness,
        ) var(--tw-contrast,
        ) var(--tw-grayscale,
        ) var(--tw-hue-rotate,
        ) var(--tw-invert,
        ) var(--tw-saturate,
        ) var(--tw-sepia,
        ) var(--tw-drop-shadow,
        );
    }
}
@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-x {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-y {
    syntax: "*";
    inherits: false;
}
@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}
@property --tw-tracking {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}
@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-sepia {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false;
}
@property --tw-duration {
    syntax: "*";
    inherits: false;
}
@property --tw-leading {
    syntax: "*";
    inherits: false;
}
@layer properties {
    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
        *,
         ::before,
         ::after,
         ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-leading: initial;
        }
    }
}