@charset "UTF-8";
/* Fonts */
@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    src: url(../fonts/NotoSansTC-Regular.otf);
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NotoSansTC-Light.otf);
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NotoSansTC-Medium.otf);
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NotoSansTC-Bold.otf);
    font-display: swap;
}

/* == Layout == */
/* Base */
body {
    color: var(--body-color, #000);
    background-color: var(--body-bg, #fff);
    font-family: var(--body-font-family, "Noto Sans TC", sans-serif);
}

a {
    color: var(--link-color, #985E0B);
    cursor: pointer;
    text-underline-offset: 3px;
}

/* wrapper */
.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100dvh;
}

    .wrapper > .top {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

@media (min-height: 300px) {
    .wrapper > .top {
        position: fixed;
        top: 0;
        z-index: 10;
        width: 100%;
    }
}

.wrapper .content {
    padding: 1rem;
}

#app > .center {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

    #app > .center > .page-inner:nth-of-type(1),
    #app > .center > .top-sticky-scroll:nth-of-type(1) {
        padding-top: 141px !important;
    }

    #app > .center > .hero-section:nth-of-type(1) {
        margin-top: 94px !important;
    }

.topbar {
    background-color: #FFCB50;
}

.topbar-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 1440px;
    height: 38px;
    padding-inline: var(--page-inline);
    margin-inline: auto;
}

.topbar a {
    text-decoration: none;
    color: currentColor;
}

.topbar .end {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .topbar .end {
        gap: 20px;
    }
}

:root {
    --page-inline: 16px;
}

@media (min-width: 768px) {
    :root {
        --page-inline: 24px;
    }
}

@media (min-width: 1200px) {
    :root {
        --page-inline: 40px;
    }
}

@media (min-width: 1400px) {
    :root {
        --page-inline: 80px;
    }
}

.header {
    border-radius: 0px 0px 10px 10px;
    border-bottom: 1px solid #D8D8D8;
    border-top-width: 0;
    background: #FFF;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.header-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 62px;
    max-width: 1440px;
    padding-inline: var(--page-inline);
    margin-inline: auto;
}

.brand {
    margin-bottom: 0;
}

/* Menu */
.menu {
    margin: 0;
    padding: 0;
}

@media (min-width: 992px) {
    .menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

.menu li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    border-bottom: 1px solid #D0D2D3;
    list-style: none;
}

@media (min-width: 992px) {
    .menu li {
        border-bottom-width: 0;
    }
}

.menu-link {
    display: block;
    padding-block: 19px;
    padding-inline: 10px;
    color: currentColor;
    background-color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    border-width: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 1200px) {
    .menu-link {
        padding-inline: 20px;
    }
}

.menu-link:not(.active) {
    width: 100%;
}

    .menu-link:not(.active):hover {
        background-color: #FDE3B4;
    }

    .menu-link:not(.active):active {
        color: white;
        background-color: #985E0B;
    }

.menu-link.active {
    position: relative;
    color: #985E0B;
}

    .menu-link.active::after {
        content: '';
        display: block;
        width: 100%;
        height: 6px;
        background-color: #985E0B;
        border-radius: 999rem;
        position: absolute;
        bottom: -3px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

@media (min-width: 992px) {
    .menu-link.active::after {
        width: calc(100% - 20px * 2 + 8px);
    }
}

.top-helper-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 1px solid #D0D2D3;
}

@media (min-width: 992px) {
    .top-helper-item {
        border-bottom-width: 0;
    }
}

.top-helper-item > a {
    display: block;
    padding-block: 19px;
    padding-inline: 10px;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
}

    .top-helper-item > a:not(.highlight) {
        color: currentColor;
    }

@media (min-width: 1200px) {
    .top-helper-item > a {
        padding-inline: 20px;
    }
}

.menu-collapse {
    position: fixed;
    top: calc(62px + 2px);
    left: 0;
    width: 100%;
    background-color: white;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .menu-collapse {
        position: static;
        top: 0;
        background-color: transparent;
        height: auto;
        overflow: unset;
    }
}

@media (min-width: 992px) {
    .menu-collapse-inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.menu-collapse .divider-before {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-block: 40px;
}

    .menu-collapse .divider-before > * {
        margin-inline: auto;
    }

@media (min-width: 992px) {
    .menu-collapse .divider-before {
        padding-left: 16px;
        margin-left: 16px;
        margin-inline: 0;
        margin-block: 0;
    }
}

.menu-collapse .btn-key {
    width: Min(220px, 60vw);
}

@media (min-width: 992px) {
    .menu-collapse .btn-key {
        width: 116px;
    }
}

/* ham-mobile */
.ham-mobile {
    padding: 0;
    background-color: transparent;
    border-width: 0;
}

    .ham-mobile[aria-expanded="false"] img:first-child {
        display: inline;
    }

    .ham-mobile[aria-expanded="false"] img:last-child {
        display: none;
    }

    .ham-mobile[aria-expanded="true"] img:first-child {
        display: none;
    }

    .ham-mobile[aria-expanded="true"] img:last-child {
        display: line;
    }

/* Header -- ham-mobile expanded true */
.header:has(.ham-mobile[aria-expanded="true"]) .menu-collapse {
    height: calc(100dvh - 102px);
}

@media (min-width: 992px) {
    .header:has(.ham-mobile[aria-expanded="true"]) .menu-collapse {
        background-color: transparent;
        height: auto;
    }
}

/* Body -- ham-mobile expanded true */
body:has(.ham-mobile[aria-expanded="true"]) {
    overflow: hidden;
}

.footer {
    color: white;
    background-color: #985E0B;
}

.footer-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
    max-width: 1440px;
    padding-inline: 24px;
    padding-block: 40px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .footer-inner {
        padding-inline: 40px;
        gap: 60px;
    }
}

@media (min-width: 1200px) {
    .footer-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

@media (min-width: 1400px) {
    .footer-inner {
        padding-inline: 130px;
        padding-block: 60px;
    }
}

.footer-brand {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-brand {
        gap: 40px;
    }
}

@media (min-width: 1200px) {
    .footer-brand {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        text-align: left;
    }
}

.footer-links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 60px 52px;
}

.footer-title {
    font-size: 1.125rem;
    margin-bottom: 0;
}

.footer-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
}

.footer .start {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
}

.footer .end {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer .logo {
    width: 100%;
    max-width: 100%;
}

.footer .logo-link {
    display: inline-block;
}

.footer a {
    color: currentColor;
    text-decoration: none;
}

.go-top {
    --size: 40px;
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 1;
}

@media (min-width: 768px) {
    .go-top {
        bottom: 60px;
    }
}

.go-top a {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    background-color: white;
    border: 2px solid #C64300;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .go-top a:hover {
        background-color: #C64300;
        border-color: #C64300;
    }

        .go-top a:hover path {
            fill: white;
        }

    .go-top a:active {
        background-color: #744500;
        border-color: #744500;
    }

@media (min-width: 768px) {
    .go-top a {
        --size: 56px;
    }
}

.go-top svg {
    width: 50%;
}

.go-top path {
    fill: #C64300;
}

body a:focus, body button:focus, body input:focus, body select:focus,
body [tabindex="0"]:focus {
    outline: 4px #FF0004 dotted !important;
}

body a.stretched-link:focus {
    outline: 4px #FF0004 dotted !important;
    display: block;
    position: absolute;
    z-index: 2;
    margin: 6px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

a[accesskey] {
    text-decoration: none;
}

    a[accesskey]:hover {
        color: unset;
    }

.center a[accesskey] {
    position: absolute;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    color: transparent;
    scroll-margin-top: 115px;
}

    .center a[accesskey]:focus, .center a[accesskey]:hover {
        color: black;
    }

.footer a[accesskey] {
    color: #fff;
}

.file-upload input[type="file"]:focus + label {
    outline: 4px #FF0004 dotted !important;
}

/* page內容寬 */
.page-inner {
    --page-px: 16px;
    --page-py: 60px;
    max-width: calc(1040px + (var(--page-px) * 2));
    padding-inline: var(--page-px);
    padding-block: var(--page-py);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .page-inner {
        --page-px: 40px;
        --page-py: 80px;
    }
}

.page-inner.lg {
    max-width: calc(1280px + (var(--page-px) * 2));
}

.page-inner.full {
    max-width: 100%;
}

.page-inner.bleed {
    padding-right: 0;
    margin-right: unset;
    max-width: unset;
}

@media (min-width: 1040px) {
    .page-inner.bleed {
        margin-left: calc((100vw - 1040px) / 2 - var(--page-px));
    }
}

/* hero下方的 page-inner*/
.hero-section + .page-inner {
    padding-top: 60px;
}

:root {
    --bs-backdrop-opacity: .7;
    --bs-backdrop-bg: #000;
}

/* modal */
.modal {
    --bs-modal-border-width: 0;
    --bs-modal-title-line-height: 160%;
    --bs-modal-border-radius: 1rem;
    --bs-modal-inner-border-radius: 1rem;
    --title-color: #C64300;
    --title-fs: 1.5rem;
    --title-mb: 20px;
    --cta-mt: 20px;
}

@media (min-width: 992px) {
    .modal {
        --bs-modal-padding: 40px;
        --title-mb: 32px;
        --cta-mt: 48px;
    }
}

.modal-content {
    position: relative;
    font-size: 1rem;
}

    .modal-content a {
        font-size: 1rem;
    }

.modal-title {
    margin-bottom: var(--title-mb);
    color: var(--title-color);
    font-size: var(--title-fs);
    font-weight: bold;
    text-align: center;
}

.modal .btn-close {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 2;
}

@media (min-width: 992px) {
    .modal .btn-close {
        top: 16px;
    }
}

.modal .cta {
    --btn-size: 116px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: var(--cta-mt);
}

@media (min-width: 768px) {
    .modal-xl {
        --bs-modal-width: 688px;
    }
}

@media (min-width: 992px) {
    .modal-xl {
        --bs-modal-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px;
    }
}

.modal .full-width {
    padding-inline: var(--bs-modal-padding);
    padding-top: var(--bs-modal-padding);
    margin-inline: calc(var(--bs-modal-padding) * -1);
    margin-top: calc(var(--bs-modal-padding) * -1);
}

/* btn-close */
.btn-close {
    --bs-btn-close-bg: url('../img/icon-modal-cross.svg');
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent var(--bs-btn-close-bg) center no-repeat;
}

/* dropdown-menu */
.dropdown-menu {
    --bs-dropdown-border-width: 0;
    -webkit-box-shadow: 0px 4px 20px 0px #ABAFB433;
    box-shadow: 0px 4px 20px 0px #ABAFB433;
}

/* dropdown-item */
.dropdown-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding-right: calc(var(--bs-dropdown-item-padding-x) * 1.35);
}

    .dropdown-item:hover {
        color: currentColor;
        background-color: #FDE3B4;
    }

    .dropdown-item:active {
        color: white;
        background-color: #985E0B;
    }

/* user的dropdown-menu */
.btn-user + .dropdown-menu {
    --bs-dropdown-item-padding-x: 32px;
    --bs-dropdown-item-padding-y: 16px;
}

.btn {
    --bs-btn-border-radius: 8px;
    --bs-btn-padding-x: calc(1rem - 1px);
    --bs-btn-padding-y: calc(12px - 1px);
    --bs-btn-disabled-opacity: 1;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn.btn-lg {
        --bs-btn-font-size: 1.25rem;
        --bs-btn-padding-x: calc(2.5rem - 1px);
        --bs-btn-padding-y: calc(1rem - 1px);
    }

    .btn.btn-sm {
        --bs-btn-padding-y: 7px;
    }

    .btn:not(button):not(a):not(label) {
        cursor: unset;
    }

/* Link */
.btn-link {
    --bs-btn-color: #985E0B;
    --bs-btn-border-radius: 0;
    --bs-border-width: 0;
    --bs-btn-hover-color: #B5771E;
    --bs-btn-active-color: #744500;
    text-decoration: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #985E0B;
    --bs-btn-border-color: #985E0B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #815009;
    --bs-btn-hover-border-color: #7a4b09;
    --bs-btn-focus-shadow-rgb: 167, 118, 48;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7a4b09;
    --bs-btn-active-border-color: #724708;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #985E0B;
    --bs-btn-disabled-border-color: #985E0B;
    --bs-btn-hover-bg: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-bg: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
    --bs-btn-disabled-opacity: 1;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-btn-hover-bg: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-bg: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
    --bs-btn-disabled-opacity: 1;
}

.btn-brown {
    --bs-btn-color: #fff;
    --bs-btn-bg: #985E0B;
    --bs-btn-border-color: #985E0B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #815009;
    --bs-btn-hover-border-color: #7a4b09;
    --bs-btn-focus-shadow-rgb: 167, 118, 48;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7a4b09;
    --bs-btn-active-border-color: #724708;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #985E0B;
    --bs-btn-disabled-border-color: #985E0B;
    --bs-btn-hover-bg: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-bg: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
    --bs-btn-disabled-opacity: 1;
}

.btn-outline-primary {
    --bs-btn-color: #985E0B;
    --bs-btn-border-color: #985E0B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #985E0B;
    --bs-btn-hover-border-color: #985E0B;
    --bs-btn-focus-shadow-rgb: 152, 94, 11;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #985E0B;
    --bs-btn-active-border-color: #985E0B;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #985E0B;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #985E0B;
    --bs-gradient: none;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-color: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
}

.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-color: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
}

.btn-outline-brown {
    --bs-btn-color: #985E0B;
    --bs-btn-border-color: #985E0B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #985E0B;
    --bs-btn-hover-border-color: #985E0B;
    --bs-btn-focus-shadow-rgb: 152, 94, 11;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #985E0B;
    --bs-btn-active-border-color: #985E0B;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #985E0B;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #985E0B;
    --bs-gradient: none;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #B5771E;
    --bs-btn-hover-border-color: #B5771E;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #744500;
    --bs-btn-active-border-color: #744500;
    --bs-btn-disabled-color: #ABABAB;
    --bs-btn-disabled-border-color: #ABABAB;
}

.btn-outline-primary.success {
    background-color: #DDFFB6 !important;
    color: #447F01 !important;
    border-color: currentColor !important;
}

.btn-white {
    --bs-btn-color: #C64300;
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #C64300;
}

/* btn-icon */
.btn-icon {
    --size: 40px;
    --bs-btn-font-size: 1.25rem;
    position: relative;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: none;
    border: none;
}

.btn-icon-hover:hover {
    --bs-btn-hover-bg: #B5771E;
}

.btn-icon-hover:active {
    --bs-btn-active-bg: #744500;
}

.btn-icon-hover:disabled {
    --bs-btn-disabled-bg: #ABABAB;
}

.btn-icon::after {
    position: absolute;
    content: "";
    display: block;
    width: var(--size);
    height: var(--size);
}

/* btn-reset */
.btn-reset {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* btn-user */
.btn-user {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* btn-back */
.btn-back {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    border: none;
    text-decoration: none;
    background-color: transparent;
    color: currentColor;
}

    .btn-back .circle {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 40px;
        height: 40px;
        color: white;
        background-color: #985E0B;
        font-size: 1.25rem;
        border-radius: 999rem;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .btn-back:hover .circle {
        background-color: #B5771E;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .btn-back:active .circle {
        background-color: #744500;
    }

/* cta */
.cta {
    --btn-size: 160px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px 1.5rem;
}

@media (min-width: 992px) {
    .cta {
        margin-top: 20px;
    }
}

.cta > * {
    min-width: var(--btn-size);
}

/* link-current */
.link-current {
    text-decoration: none;
    color: currentColor;
}

.btn-outline-primary.btn-radio-check {
    gap: 12px;
}

    .btn-outline-primary.btn-radio-check::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        border: 1px solid currentColor;
        border-radius: 999rem;
    }

    .btn-outline-primary.btn-radio-check.active {
        position: relative;
        background-color: #985E0B;
        color: white;
    }

        .btn-outline-primary.btn-radio-check.active::before {
            content: '\f058';
            font-family: "Font Awesome 6 Pro";
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 1;
            border-width: 0;
        }

.btn-circle-border {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: white;
    border: 2px solid #985E0B;
    width: 52px;
    aspect-ratio: 1/1;
    border-radius: 999rem;
}

.form-control-plaintext {
    padding-block: calc(.75rem - 1px);
}

.form-control,
.form-select {
    --bs-border-color: #62676D;
    --bs-border-radius: 12px;
    padding-inline: calc(1rem - 1px);
    padding-block: calc(.65rem - 1px);
    font-size: 1.125rem;
}

    .form-control:disabled,
    .form-select:disabled {
        color: #62676D;
        background-color: #F5F5F5;
        border-color: #ABABAB;
    }

    /* Form control */
    .form-control::-webkit-input-placeholder {
        color: #62676D;
    }

    .form-control::-moz-placeholder {
        color: #62676D;
    }

    .form-control:-ms-input-placeholder {
        color: #62676D;
    }

    .form-control::-ms-input-placeholder {
        color: #62676D;
    }

    .form-control::placeholder {
        color: #62676D;
    }

/* Form select */
.form-select {
    padding-right: 2.5rem;
}

    .form-select:has(option[value=""]:checked) {
        color: #62676D;
    }

        .form-select:has(option[value=""]:checked) option:not([value=""]) {
            color: var(--bs-body-color);
        }

    .form-select option[value=""] {
        color: #62676D;
    }

    /* form-select icon */
    .form-select.icon {
        background-size: 24px !important;
        background-position: right 8px center;
    }

    /* date */
    .form-select.date {
        --bs-form-select-bg-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_2352_3162" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_2352_3162)"><path d="M5.30775 21.5C4.80258 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923L3.5 6.30777C3.5 5.8026 3.675 5.37502 4.025 5.02502C4.375 4.67502 4.80258 4.50002 5.30775 4.50002H6.69225V3.15377C6.69225 2.9346 6.76567 2.7516 6.9125 2.60477C7.05933 2.4581 7.24233 2.38477 7.4615 2.38477C7.68083 2.38477 7.86383 2.4581 8.0105 2.60477C8.15733 2.7516 8.23075 2.9346 8.23075 3.15377V4.50002L15.8077 4.50002V3.13477C15.8077 2.92193 15.8795 2.74368 16.023 2.60002C16.1667 2.45652 16.3449 2.38477 16.5577 2.38477C16.7706 2.38477 16.9487 2.45652 17.0922 2.60002C17.2359 2.74368 17.3077 2.92193 17.3077 3.13477V4.50002H18.6923C19.1974 4.50002 19.625 4.67502 19.975 5.02502C20.325 5.37502 20.5 5.8026 20.5 6.30777V19.6923C20.5 20.1974 20.325 20.625 19.975 20.975C19.625 21.325 19.1974 21.5 18.6923 21.5H5.30775ZM5.30775 20H18.6923C18.7692 20 18.8398 19.9679 18.9038 19.9038C18.9679 19.8398 19 19.7693 19 19.6923V10.3078H5L5 19.6923C5 19.7693 5.03208 19.8398 5.09625 19.9038C5.16025 19.9679 5.23075 20 5.30775 20ZM5 8.80777H19V6.30777C19 6.23077 18.9679 6.16026 18.9038 6.09626C18.8398 6.0321 18.7692 6.00002 18.6923 6.00002L5.30775 6.00002C5.23075 6.00002 5.16025 6.0321 5.09625 6.09626C5.03208 6.16026 5 6.23077 5 6.30777V8.80777ZM12 14.077C11.7552 14.077 11.5465 13.9908 11.374 13.8183C11.2017 13.6459 11.1155 13.4373 11.1155 13.1923C11.1155 12.9474 11.2017 12.7388 11.374 12.5663C11.5465 12.3939 11.7552 12.3078 12 12.3078C12.2448 12.3078 12.4535 12.3939 12.626 12.5663C12.7983 12.7388 12.8845 12.9474 12.8845 13.1923C12.8845 13.4373 12.7983 13.6459 12.626 13.8183C12.4535 13.9908 12.2448 14.077 12 14.077ZM8 14.077C7.75517 14.077 7.5465 13.9908 7.374 13.8183C7.20167 13.6459 7.1155 13.4373 7.1155 13.1923C7.1155 12.9474 7.20167 12.7388 7.374 12.5663C7.5465 12.3939 7.75517 12.3078 8 12.3078C8.24483 12.3078 8.4535 12.3939 8.626 12.5663C8.79833 12.7388 8.8845 12.9474 8.8845 13.1923C8.8845 13.4373 8.79833 13.6459 8.626 13.8183C8.4535 13.9908 8.24483 14.077 8 14.077ZM16 14.077C15.7552 14.077 15.5465 13.9908 15.374 13.8183C15.2017 13.6459 15.1155 13.4373 15.1155 13.1923C15.1155 12.9474 15.2017 12.7388 15.374 12.5663C15.5465 12.3939 15.7552 12.3078 16 12.3078C16.2448 12.3078 16.4535 12.3939 16.626 12.5663C16.7983 12.7388 16.8845 12.9474 16.8845 13.1923C16.8845 13.4373 16.7983 13.6459 16.626 13.8183C16.4535 13.9908 16.2448 14.077 16 14.077ZM12 18C11.7552 18 11.5465 17.9138 11.374 17.7413C11.2017 17.5689 11.1155 17.3603 11.1155 17.1155C11.1155 16.8705 11.2017 16.6618 11.374 16.4895C11.5465 16.317 11.7552 16.2308 12 16.2308C12.2448 16.2308 12.4535 16.317 12.626 16.4895C12.7983 16.6618 12.8845 16.8705 12.8845 17.1155C12.8845 17.3603 12.7983 17.5689 12.626 17.7413C12.4535 17.9138 12.2448 18 12 18ZM8 18C7.75517 18 7.5465 17.9138 7.374 17.7413C7.20167 17.5689 7.1155 17.3603 7.1155 17.1155C7.1155 16.8705 7.20167 16.6618 7.374 16.4895C7.5465 16.317 7.75517 16.2308 8 16.2308C8.24483 16.2308 8.4535 16.317 8.626 16.4895C8.79833 16.6618 8.8845 16.8705 8.8845 17.1155C8.8845 17.3603 8.79833 17.5689 8.626 17.7413C8.4535 17.9138 8.24483 18 8 18ZM16 18C15.7552 18 15.5465 17.9138 15.374 17.7413C15.2017 17.5689 15.1155 17.3603 15.1155 17.1155C15.1155 16.8705 15.2017 16.6618 15.374 16.4895C15.5465 16.317 15.7552 16.2308 16 16.2308C16.2448 16.2308 16.4535 16.317 16.626 16.4895C16.7983 16.6618 16.8845 16.8705 16.8845 17.1155C16.8845 17.3603 16.7983 17.5689 16.626 17.7413C16.4535 17.9138 16.2448 18 16 18Z" fill="%23878B8F"/></g></svg>');
    }

    /* eye-off */
    .form-select.off {
        --bs-form-select-bg-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 9C4 9 5.81818 14 12 14C18.1818 14 20 9 20 9" stroke="%23878B8F" stroke-width="2" stroke-linecap="round"/><path d="M4.02767 13.3366C3.71305 13.5652 3.27271 13.4954 3.04413 13.1808C2.81555 12.8662 2.88529 12.4259 3.1999 12.1973L4.71058 11.0997L5.53834 12.239L4.02767 13.3366Z" fill="%23878B8F"/><path d="M9.21661 16.0413C9.09644 16.4111 8.6992 16.6135 8.32935 16.4933C7.9595 16.3732 7.75709 15.9759 7.87727 15.6061L8.45429 13.8302L9.79364 14.2654L9.21661 16.0413Z" fill="%23878B8F"/><path d="M19.9457 13.3371C20.2599 13.5654 20.6997 13.4957 20.928 13.1815C21.1564 12.8673 21.0867 12.4274 20.7724 12.1991L19.2635 11.1028L18.4368 12.2408L19.9457 13.3371Z" fill="%23878B8F"/><path d="M14.7797 16.0386C14.8998 16.408 15.2965 16.6102 15.666 16.4902C16.0354 16.3702 16.2375 15.9734 16.1175 15.604L15.5412 13.8301L14.2034 14.2648L14.7797 16.0386Z" fill="%23878B8F"/></svg>');
    }

    /* eye-on */
    .form-select.on {
        --bs-form-select-bg-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_1575_12693" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_1575_12693)"><path d="M12 15.4C13.1364 15.4 14.1023 15.0208 14.8977 14.2625C15.6932 13.5042 16.0909 12.5833 16.0909 11.5C16.0909 10.4167 15.6932 9.49583 14.8977 8.7375C14.1023 7.97917 13.1364 7.6 12 7.6C10.8636 7.6 9.89773 7.97917 9.10227 8.7375C8.30682 9.49583 7.90909 10.4167 7.90909 11.5C7.90909 12.5833 8.30682 13.5042 9.10227 14.2625C9.89773 15.0208 10.8636 15.4 12 15.4ZM12 13.84C11.3182 13.84 10.7386 13.6125 10.2614 13.1575C9.78409 12.7025 9.54545 12.15 9.54545 11.5C9.54545 10.85 9.78409 10.2975 10.2614 9.8425C10.7386 9.3875 11.3182 9.16 12 9.16C12.6818 9.16 13.2614 9.3875 13.7386 9.8425C14.2159 10.2975 14.4545 10.85 14.4545 11.5C14.4545 12.15 14.2159 12.7025 13.7386 13.1575C13.2614 13.6125 12.6818 13.84 12 13.84ZM12 18C9.78788 18 7.77273 17.4114 5.95455 16.2342C4.13636 15.0569 2.81818 13.4789 2 11.5C2.81818 9.52111 4.13636 7.94306 5.95455 6.76583C7.77273 5.58861 9.78788 5 12 5C14.2121 5 16.2273 5.58861 18.0455 6.76583C19.8636 7.94306 21.1818 9.52111 22 11.5C21.1818 13.4789 19.8636 15.0569 18.0455 16.2342C16.2273 17.4114 14.2121 18 12 18ZM12 16.2667C13.7121 16.2667 15.2841 15.8369 16.7159 14.9775C18.1477 14.1181 19.2424 12.9589 20 11.5C19.2424 10.0411 18.1477 8.88194 16.7159 8.0225C15.2841 7.16306 13.7121 6.73333 12 6.73333C10.2879 6.73333 8.71591 7.16306 7.28409 8.0225C5.85227 8.88194 4.75758 10.0411 4 11.5C4.75758 12.9589 5.85227 14.1181 7.28409 14.9775C8.71591 15.8369 10.2879 16.2667 12 16.2667Z" fill="%23878B8F"/></g></svg>');
    }

.was-validated .form-select.icon:invalid:not([multiple]):not([size]) {
    background-position: right .35rem center, center right 2.25rem;
    background-size: 24px, calc(.75em + .375rem) calc(.75em + .375rem);
}

/* form-lable */
.form-label {
    font-size: 1.125rem;
    font-weight: 500;
}

/* search */
.form-control[type="search"] {
    --background-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="12" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 11C7 8.79086 8.79086 7 11 7C13.2091 7 15 8.79086 15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11ZM11 5C7.68629 5 5 7.68629 5 11C5 14.3137 7.68629 17 11 17C12.2958 17 13.4957 16.5892 14.4765 15.8907L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L15.8907 14.4765C16.5892 13.4957 17 12.2958 17 11C17 7.68629 14.3137 5 11 5Z" fill="%23878B8F"/></svg>');
    background: var(--background-icon) no-repeat left 8px center;
    padding-left: 40px;
}

/* Radio & checkbox */
.form-check {
    padding-left: calc(20px + 8px);
}

    .form-check .form-check-input {
        margin-left: calc((20px + 8px) * -1);
    }

.form-check-label {
    font-size: 1.125rem;
}

.form-check-input {
    --bs-border-color: #C64300;
    --bs-border-width: 2px;
    --bs-form-valid-color: #C64300;
    --bs-form-valid-border-color: #C64300;
    width: 20px;
    height: 20px;
}

    .form-check-input[type="checkbox"] {
        border-radius: 4px;
    }

    .form-check-input:checked {
        background-color: var(--bs-border-color);
        border-color: var(--bs-border-color);
    }

    .form-check-input:disabled {
        --bs-border-color: #D8D8D8;
        opacity: 1;
    }

        .form-check-input:disabled ~ .form-check-label {
            opacity: 1;
        }

    .form-check-input.is-invalid ~ .form-check-label,
    .was-validated .form-check-input:invalid ~ .form-check-label {
        color: currentColor !important;
    }

    .form-check-input.is-valid ~ .form-check-label,
    .was-validated .form-check-input:valid ~ .form-check-label {
        color: currentColor !important;
    }

.form-check-lg {
    padding-left: calc(24px + 8px);
}

    .form-check-lg .form-check-input {
        margin-left: calc((24px + 8px) * -1);
        width: 24px;
        height: 24px;
    }

        .form-check-lg .form-check-input[type="checkbox"] {
            border-radius: 4px;
        }

    .form-check-lg .form-check-label {
        font-size: 1.25rem;
    }

.form-check-blue .form-check-input {
    --bs-border-color: #0479A0;
    --bs-form-valid-color: #0479A0;
    --bs-form-valid-border-color: #0479A0;
}

    .form-check-blue .form-check-input:checked {
        background-color: #0479A0;
        border-color: #0479A0;
    }

.form-check-green .form-check-input {
    --bs-border-color: #447F01;
    --bs-form-valid-color: #447F01;
    --bs-form-valid-border-color: #447F01;
}

    .form-check-green .form-check-input:checked {
        background-color: #447F01;
        border-color: #447F01;
    }

/* 表單核取方塊邊框樣式 */
.checkbox-border {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    padding-left: 0;
}

    .checkbox-border:has(.form-check-input[type=radio]) {
        height: 48px;
        padding: 0 16px 0 42px;
        border-radius: 8px;
        border: 1px solid transparent;
    }

    .checkbox-border:has(.form-check-input[type=radio]:checked) {
        border-color: #000;
        background: #FDE3B4;
    }

/* input-group */
.input-group {
    --bs-border-color: #62676D;
    --bs-border-radius: 12px;
}

    .input-group:has(.input-group-text) {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

        .input-group:has(.input-group-text) > * {
            border-width: 0;
        }

    .input-group .btn {
        --bs-btn-border-radius: 12px;
        --bs-btn-color: #985E0B;
        --bs-btn-border-color: #985E0B;
        --bs-btn-bg: #FDF6F3;
        --bs-btn-hover-color: #985E0B;
        --bs-btn-hover-border-color: #985E0B;
        --bs-btn-hover-bg: #FDF6F3;
        --bs-btn-active-color: #985E0B;
        --bs-btn-active-border-color: #985E0B;
        --bs-btn-active-bg: #FDF6F3;
    }

        .input-group .btn.btn-success:disabled {
            --bs-btn-disabled-color: #447F01;
            --bs-btn-disabled-border-color: #447F01;
            --bs-btn-disabled-bg: #DDFFB6;
        }

        .input-group .btn.btn-danger:disabled {
            --bs-btn-disabled-color: #FF0000;
            --bs-btn-disabled-border-color: #FF0000;
            --bs-btn-disabled-bg: #FAD0D0;
        }

/* 驗證不通過 */
.was-validated .input-group:has(:invalid) .btn {
    --bs-btn-color: #F00;
    --bs-btn-border-color: #F00;
    --bs-btn-bg: #FFEAE8;
}

/* input-group-text */
.input-group-text {
    position: relative;
    background-color: transparent;
    font-size: 1.125rem;
    background-color: white;
}

    .input-group-text::after {
        position: absolute;
        z-index: 1;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        content: '';
        display: block;
        width: 1px;
        height: 24px;
        background-color: currentColor;
    }

.input-group.highlight {
    border: 2px solid #C64300;
}

    .input-group.highlight > * {
        background-color: #FDE3B4;
    }

    .input-group.highlight .input-group-text {
        color: #C64300;
    }

/* form-start-end */
.form-start-end {
    position: relative;
}

    .form-start-end:has([disabled]) {
        color: #62676D;
    }

    .form-start-end .start,
    .form-start-end .end {
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%;
    }

    .form-start-end .start {
        left: .75em;
    }

    .form-start-end .end {
        right: .75em;
    }

    .form-start-end .mydata {
        top: 47%;
    }

    .form-start-end:has(.start) .input > * {
        padding-left: 2.5em;
    }

    .form-start-end:has(.end) .input > * {
        padding-right: 2.5em;
    }

/* Number */
.form-control[type="number"] {
    position: relative;
}

    .form-control[type="number"]::-webkit-outer-spin-button, .form-control[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        background: url(../img/img-input-number-arrow.svg) no-repeat center center;
        width: 1em;
        opacity: .5;
        /* shows Spin Buttons per default (Chrome >= 39) */
        position: absolute;
        top: 0;
        right: 12px;
        bottom: 0;
    }

        .form-control[type="number"]::-webkit-inner-spin-button:hover, .form-control[type="number"]::-webkit-inner-spin-button:active {
            opacity: 1;
        }

    .form-control[type="number"].is-invalid, .form-control[type="number"].is-valid,
    .was-validated .form-control[type="number"]:invalid,
    .was-validated .form-control[type="number"]:valid {
        padding-right: 4.125rem;
        background-position: center right 2.25rem;
    }

.password-container {
    position: relative;
}

.password-trigger {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
}

.was-validated .password-trigger {
    right: 8px;
}

/* 移除 valid 的 style */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    --bs-form-select-bg-icon: none !important;
    border-color: inherit !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.was-validated .form-control:valid {
    background-image: none;
}

/* invalid-feedback */
.invalid-feedback {
    font-size: 1rem;
}

/* invalid 的 style */
.is-invalid {
    --bs-form-invalid-border-color: #E51313;
}

/* 整列驗證 */
.was-validated .form-row-validation:has(.is-invalid) ~ .invalid-feedback,
.was-validated .form-row-validation:has(:invalid) ~ .invalid-feedback {
    display: block;
}

/* 驗證不通過時家背景色(選配) */
@media (min-width: 768px) {
    .was-validated .validation-bg-warning:has(:invalid) {
        background-color: #FDF6F3;
    }
}

.was-validated .validation-bg-warning:has(:invalid) .validation-warning-obj {
    background-color: #FDF6F3 !important;
}

/* Date */
.form-control[type="date"]::-webkit-calendar-picker-indicator {
    background: #FFF url(../img/icon-calendar.svg) no-repeat center center;
    opacity: 1;
    display: block;
    width: 24px;
    height: 24px;
    border-width: thin;
}

.form-control[type="text"].datepicker {
    background-image: url(../img/icon-calendar.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: auto;
}

.form-control.search {
    background: url(../img/icon-search.svg) no-repeat left 12px center #fff;
    background-size: 24px;
    padding-left: 44px;
}

.verify-big-input {
    --bs-border-color: #985E0B;
    --size: 64px;
    width: Min(var(--size), 12vw);
    height: Min(var(--size), 12vw);
    padding: 0;
    text-align: center;
    font-size: Min(40px, 8vw);
    font-weight: 700;
    line-height: var(--size);
}

/* info-section */
.info-section {
    --padding: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    padding: var(--padding);
    border-radius: 20px;
    background: var(--Background-Color-Beige, #F8F4ED);
}

@media (min-width: 768px) {
    .info-section {
        --padding: 40px;
    }
}

.info-section.info-section-footer {
    border-radius: 80px 80px 0 0;
}

.form-file {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding-inline: 12px;
    padding-block: 4px;
    background: #E2E2E2;
    line-height: 1;
}

    .form-file .name {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: currentColor;
    }

    .form-file .btn-icon {
        margin-block: -4px;
    }

.form-file-pic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 992px) {
    .form-file-pic {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .form-file-pic {
        grid-template-columns: repeat(1, 1fr);
    }
}

.form-file-pic .pic-wrap {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    aspect-ratio: 16 / 9;
}

    .form-file-pic .pic-wrap img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .form-file-pic .pic-wrap .btn-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        color: #fff;
        background-color: #985E0B;
        border-radius: 999rem;
        width: 24px;
        height: 24px;
    }

/* 表單控制項標籤 */
.label-form-control {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
}

    .label-form-control > * {
        margin: 0;
        border-width: 0;
        background-color: transparent;
    }

    .label-form-control label {
        white-space: nowrap;
        display: inline-block;
        padding-left: 15px;
        padding-right: 8px;
        border-right: 1px solid currentColor;
        font-weight: normal;
    }

    .label-form-control.highlight {
        --bs-border-color: #C64300;
        --bs-border-width: 2px;
        background-color: #FDE3B4;
    }

        .label-form-control.highlight label {
            color: #C64300;
            border-right-color: #C64300;
        }

.heading-1 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-1 {
        font-size: 2.5rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .heading-1 {
        font-size: 2.5rem;
        font-weight: 500;
    }
}

.heading-2 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-2 {
        font-size: 2rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .heading-2 {
        font-size: 2rem;
        font-weight: 500;
    }
}

.heading-3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-3 {
        font-size: 1.5rem;
        font-weight: 700;
    }
}

@media (min-width: 1200px) {
    .heading-3 {
        font-size: 1.75rem;
        font-weight: 500;
    }
}

.heading-4 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-4 {
        font-size: 1.5rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .heading-4 {
        font-size: 1.5rem;
        font-weight: 700;
    }
}

.heading-5 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-5 {
        font-size: 1.25rem;
        font-weight: 700;
    }
}

@media (min-width: 1200px) {
    .heading-5 {
        font-size: 1.25rem;
        font-weight: 500;
    }
}

.heading-6 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-6 {
        font-size: 1.25rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .heading-6 {
        font-size: 1.25rem;
        font-weight: 700;
    }
}

.heading-7 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-7 {
        font-size: 1.125rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .heading-7 {
        font-size: 1.25rem;
        font-weight: 500;
    }
}

.heading-8 {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-8 {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

@media (min-width: 1200px) {
    .heading-8 {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

.heading-9 {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .heading-9 {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

@media (min-width: 1200px) {
    .heading-9 {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

.body-1 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .body-1 {
        font-size: 1rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .body-1 {
        font-size: 1rem;
        font-weight: 500;
    }
}

.body-2 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .body-2 {
        font-size: 1rem;
        font-weight: 400;
    }
}

@media (min-width: 1200px) {
    .body-2 {
        font-size: 1rem;
        font-weight: 400;
    }
}

.small {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .small {
        font-size: 0.875rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .small {
        font-size: 0.875rem;
        font-weight: 500;
    }
}

.danger {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .danger {
        font-size: 1.125rem;
        font-weight: 500;
    }
}

@media (min-width: 1200px) {
    .danger {
        font-size: 1.125rem;
        font-weight: 500;
    }
}

.small {
    font-size: .875rem;
    font-weight: 500;
}

@media (min-width: 992px) {
    .small {
        line-height: 1.6;
    }
}

/* 標題樣式 */
.title-name {
    padding-left: 8px;
    margin-bottom: 0;
    border-left: 4px solid #985E0B;
    font-size: 1.125rem;
    line-height: 1;
}

@media (min-width: 992px) {
    .title-name {
        padding-left: 12px;
        font-size: 1.75rem;
    }
}

.nav-underline {
    --bs-nav-underline-link-active-color: #985E0B;
    --bs-nav-link-hover-color: #744500;
    --bs-nav-link-color: currentColor;
    --bs-nav-underline-border-width: 4px;
    font-size: 1.25rem;
}

    .nav-underline .nav-link {
        padding-inline: 16px;
        padding-bottom: 4px;
    }

.nav-underline-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
}

    .nav-underline-wrapper .nav-underline {
        margin-top: 4px;
        margin-inline: 4px;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

/* Nav Pills 自訂樣式 */
.nav-pills {
    gap: 16px;
}

    .nav-pills .nav-link {
        font-size: 1.25rem;
        color: white;
        background-color: #62676D;
        border-radius: var(--bs-border-radius-pill);
        padding: 8px 16px;
        border: none;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4px;
    }

        .nav-pills .nav-link:hover {
            background-color: #4a4e52;
            color: white;
        }

        .nav-pills .nav-link:focus {
            -webkit-box-shadow: 0 0 0 0.25rem rgba(198, 67, 0, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(198, 67, 0, 0.25);
        }

        .nav-pills .nav-link.active {
            background-color: #C64300;
            color: white;
        }

            .nav-pills .nav-link.active:hover {
                background-color: #933200;
            }

@media (max-width: 767px) {
    .nav-pills {
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .nav-pills {
        gap: 8px;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.thumb-card-wrapper {
    --card-size: 300px;
    display: grid;
    gap: 10px 40px;
    grid-template-columns: repeat(auto-fill, minmax(0, var(--card-size)));
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

@media (min-width: 768px) {
    .thumb-card-wrapper {
        row-gap: 60px;
    }
}

@media (min-width: 1200px) {
    .thumb-card-wrapper {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.thumb-card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    color: inherit;
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    background-color: transparent;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

    .thumb-card:hover {
        background-color: white;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }

    .thumb-card .img-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 200px;
    }

        .thumb-card .img-wrap img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

.thumb-card-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    padding-bottom: 24px;
}

.info-vh-card-wrapper {
    container-type: inline-size;
}

@container (min-width: 480px) {
    .info-vh-card-wrapper .info-vh-card {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .info-vh-card-wrapper .info-vh-card .img-wrap {
            height: 230px;
            aspect-ratio: 1/1;
        }

        .info-vh-card-wrapper .info-vh-card .info-vh-card-body {
            gap: 0;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
}

.info-vh-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    color: inherit;
    background-color: white;
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid #D8D8D8;
}

    .info-vh-card .img-wrap {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 200px;
    }

        .info-vh-card .img-wrap img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .info-vh-card .zoom-img-wrap {
        position: relative;
        background-color: #D3D3D3;
        cursor: pointer;
    }

        .info-vh-card .zoom-img-wrap .img-wrap img {
            -o-object-fit: contain;
            object-fit: contain;
        }

        .info-vh-card .zoom-img-wrap .tag {
            position: absolute;
            top: 12px;
            left: 12px;
        }

        .info-vh-card .zoom-img-wrap .btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
        }

        .info-vh-card .zoom-img-wrap .btn-icon-circle {
            border-radius: 999rem;
            background-color: #fff !important;
            color: #985E0B !important;
            border-color: #985E0B !important;
            width: 32px;
            height: 32px;
        }

.info-vh-card-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-decoration: none;
    color: #000;
}

    .info-vh-card-body:focus {
        outline: 4px #FF0004 dotted !important;
    }

.info-vh-card.event .info-vh-card-body {
    border-radius: 0 0 16px 16px;
}

    .info-vh-card.event .info-vh-card-body:focus {
        outline-offset: -4px;
    }

@container (min-width: 480px) {
    .info-vh-card.event .info-vh-card-body {
        border-radius: 0 16px 16px 0;
    }
}

@media (min-width: 576px) {
    .info-vh-card {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .info-vh-card .img-wrap {
            height: 230px;
            aspect-ratio: 1/1;
        }

        .info-vh-card .info-vh-card-body {
            gap: 0;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
}

/* 黃色卡片 */
/* 黃色卡片元件 */
.card-yellow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
    padding: 24px;
    border-radius: 20px;
    background-color: #FFCB50;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    text-decoration: none;
    color: currentColor;
}

@media (min-width: 576px) {
    .card-yellow {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.card-yellow .end {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.card-yellow .icon {
    color: #985E0B;
}

.card-yellow:hover {
    color: white;
    background-color: #C64300;
}

    .card-yellow:hover * {
        color: white !important;
    }

    .card-yellow:hover .arrow-right-long-link::after {
        background-image: url("../img/icon-arrow-right-long-white.svg");
    }

/* Table */
.table {
    --bs-table-border-color: #ddd;
    --bs-table-bg: transparent;
}

    .table th {
        white-space: nowrap;
        font-weight: 500;
    }

    .table tr > * {
        padding: 12px 12px;
    }

        .table tr > *:first-child {
            padding-left: 24px;
        }

        .table tr > *:last-child {
            padding-right: 24px;
        }

/* Table small */
.table-sm tr > *:first-child {
    padding-left: 0.5rem;
}

.table-sm tr > *:last-child {
    padding-right: 0.5rem;
}

/* Bordered */
.table-bordered {
    --bs-table-border-color: $border;
}

/* Table list */
.table-list {
    --bs-table-border-color: #D8D8D8;
    --bs-border-width: 1px !important;
}

    .table-list th {
        --bs-table-color: #000;
        --bs-table-bg: #F5F5F5;
        border-bottom-width: 0 !important;
    }

    .table-list.table-bordered th, .table-list.table-bordered td {
        border-width: 0;
    }

    .table-list.table-bordered tr:first-child {
        border-width: 0;
    }

@media (min-width: 992px) {
    .table-list.table-bordered.table-rwd tr > *:not(:first-child) {
        border-left-width: 1px;
    }
}

.table-rwd:has([data-th]) {
    --divider: '：';
}

    .table-rwd:has([data-th]) thead {
        display: none;
    }

@media (min-width: 992px) {
    .table-rwd:has([data-th]) thead {
        display: table-header-group;
    }
}

.table-rwd:has([data-th]) [data-th] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    row-gap: 4px;
    padding-block: 4px;
    padding-inline: 0px;
    border-width: 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .table-rwd:has([data-th]) [data-th]::before {
        content: attr(data-th) var(--divider);
        white-space: nowrap;
    }

@media (min-width: 992px) {
    .table-rwd:has([data-th]) [data-th]::before {
        display: none;
    }
}

@media (min-width: 992px) {
    .table-rwd:has([data-th]) [data-th] {
        display: table-cell;
        border-bottom-width: 1px;
        padding: 12px;
    }
}

.table-rwd:has([data-th]) [data-th]:has(.btn:not(.btn-link))::before, .table-rwd:has([data-th]) [data-th]:has(.btn-icon:not(.btn-link))::before, .table-rwd:has([data-th]) [data-th]:has(.form-file)::before {
    margin-top: 6px;
}

.table-rwd:has([data-th]) [data-th]:has(.form-control, .form-select)::before {
    margin-top: 10px;
}

.table-rwd:has([data-th]) th {
    font-weight: normal;
}

.table-rwd:has([data-th]) tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-inline: 24px;
    padding-block: 16px;
    border-bottom: 1px solid #D8D8D8;
}

@media (min-width: 992px) {
    .table-rwd:has([data-th]) tr {
        display: table-row;
        padding: 0;
    }
}

@media (min-width: 992px) {
    .table-rwd:has([data-th]) tr > *:first-child {
        padding-left: 24px;
    }
}

@media (min-width: 992px) {
    .table-rwd:has([data-th]) tr > *:last-child {
        padding-right: 24px;
    }
}

.table-rwd.table-striped:has([data-th]) [data-th] {
    padding: 8px 16px;
}

.table-rwd.table-striped:has([data-th]) tr {
    padding: 0;
}

.table-apply-qurey-rwd:has([data-th]) {
    --bs-border-width: 0px;
    --table-rwd-th-size: 5rem;
    --padding: 4px;
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) {
        --bs-border-width: 1px;
        --padding: 16px 12px;
    }
}

.table-apply-qurey-rwd:has([data-th]) > thead {
    display: none;
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > thead {
        display: revert-layer;
    }
}

.table-apply-qurey-rwd:has([data-th]) > * > tr:not(:has([colspan])) {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px 24px;
    padding-block: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
}

    .table-apply-qurey-rwd:has([data-th]) > * > tr:not(:has([colspan])) td:not(:first-child) {
        grid-column: 2;
    }

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr:not(:has([colspan])) {
        display: table-row;
    }
}

.table-apply-qurey-rwd:has([data-th]) > * > tr:nth-child(odd) {
    border-top: 1px solid var(--bs-table-border-color);
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr:nth-child(odd) {
        border-top: revert-layer;
        border-bottom: revert-layer;
    }
}

.table-apply-qurey-rwd:has([data-th]) > * > tr > td {
    --fs: 1rem;
    padding: 0;
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr > td {
        --fs: 1.25rem;
        padding: 12px;
    }
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr > *:first-child {
        padding-left: 24px;
    }
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr > *:last-child {
        padding-right: 24px;
    }
}

.table-apply-qurey-rwd:has([data-th]) > * > tr > [data-th] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 8px;
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr > [data-th] {
        display: revert-layer;
        width: revert-layer;
    }
}

.table-apply-qurey-rwd:has([data-th]) > * > tr > [data-th]::before {
    content: attr(data-th) "：";
    white-space: nowrap;
}

@media (min-width: 992px) {
    .table-apply-qurey-rwd:has([data-th]) > * > tr > [data-th]::before {
        display: none;
    }
}

.table-apply-qurey-rwd:has([data-th]) .form-control,
.table-apply-qurey-rwd:has([data-th]) .form-select,
.table-apply-qurey-rwd:has([data-th]) .form-check,
.table-apply-qurey-rwd:has([data-th]) .btn {
    --bs-border-width: 1px;
}

.table-apply-qurey-rwd:has([data-th]) .tag {
    width: 9em;
}

.pagination {
    --bs-pagination-padding-x: 8px;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 1.125rem;
    --bs-pagination-color: currentColor;
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 999rem;
    --bs-pagination-hover-color: currentColor;
    --bs-pagination-hover-bg: #FDE3B4;
    --bs-pagination-active-bg: #985E0B;
    --bs-pagination-focus-color: white;
    --bs-pagination-focus-bg: #985E0B;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-disabled-color: #ABABAB;
    --bs-pagination-disabled-bg: transparent;
    gap: 4px;
    margin-top: 32px;
}

    .pagination .page-link {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: 32px;
        height: 32px;
        border-radius: 999rem;
    }

        .pagination .page-link[disabled] {
            color: #ABABAB;
            background-color: transparent;
        }

.table-apply-house-list tr.matched {
    border: 4px solid var(--Primary-Color-Brown, #985E0B);
    background: var(--Other-Color-Other-Color-4, #FDF6F3);
}

    .table-apply-house-list tr.matched td:first-child {
        position: relative;
    }

        .table-apply-house-list tr.matched td:first-child::before {
            position: absolute;
            left: 0;
            top: 0;
            content: '配對結果';
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            width: 82px;
            height: 38px;
            background-color: #985E0B;
            color: white;
            font-size: .725rem;
            border-radius: 999rem;
            -webkit-transform: translate(-30%, -50%);
            -ms-transform: translate(-30%, -50%);
            transform: translate(-30%, -50%);
        }

/* 條紋表格 */
/* 條紋表格樣式 */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: #FFF7E8;
    --bs-table-accent-bg: #FFF7E8;
    background-color: #FFF7E8;
}

/* 主視覺區塊 */
.hero-section {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: clamp(160px, 60dvh, 540px);
    background: #E8E8E8 no-repeat center;
    background-size: cover;
}

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .hero-section > * {
        position: relative;
    }

.bg-social-housing {
    background-image: url("../img/hero-social-housing.png");
}

.bg-store {
    background-image: url("../img/hero-store.png");
}

.bg-venue {
    background-image: url("../img/hero-venue.png");
}

.bg-training {
    background-image: url("../img/hero-training.png");
}

.bg-urban-renewal {
    background-image: url("../img/hero-urban-renewal.png");
}

.bg-space {
    background-image: url("../img/hero-space.jpg");
}

.bg-partner {
    background-image: url("../img/hero-partner.png");
}

.bg-course {
    background-image: url("../img/hero-course.png");
}

.bg-affordable-housing {
    background-image: url("../img/hero-affordable-housing.png");
}

    .bg-affordable-housing::before {
        background-color: #00000033;
    }

/* 首頁 Hero Section */
.hero {
    position: relative;
    height: 105dvh;
    overflow: hidden;
}

    .hero .hero-swiper {
        width: 100%;
        height: 100%;
    }

        .hero .hero-swiper .swiper-pagination {
            bottom: 120px;
        }

        .hero .hero-swiper .swiper-slide {
            position: relative;
        }

        .hero .hero-swiper .content-overlay {
            position: absolute;
            bottom: 128px;
            right: 8rem;
            z-index: 5;
        }

@media (max-width: 1280px) {
    .hero .hero-swiper .content-overlay {
        bottom: 168px;
    }

        .hero .hero-swiper .content-overlay img {
            width: Min(70vw, 450px);
        }
}

@media (max-width: 1024px) {
    .hero {
        height: 60dvh;
    }

        .hero .hero-swiper .content-overlay {
            right: 50%;
            -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
            transform: translateX(50%);
        }
}

/* Swiper 通用樣式 */
.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: #fff;
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    --swiper-pagination-bullet-horizontal-gap: 12px;
}

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1;
        background: #FFCB50;
    }

.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1.25rem;
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background: rgba(0, 0, 0, 0.7);
    }

@media (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
}

.swiper {
    width: 100%;
    position: relative;
}

.swiper-slide .img-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .swiper-slide .img-container img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.swiper-pagination-bottom-high {
    bottom: 100px;
}

.primary-bullet .swiper-pagination-bullet-active {
    background: #985E0B;
}

.info-section .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.feature-thumb {
    display: grid;
    justify-items: center;
    gap: 24px 40px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .feature-thumb {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .feature-thumb {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.feature-thumb-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    width: Min(100%, 230px);
    font-weight: 500;
}

    .feature-thumb-item > a {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .feature-thumb-item > a:hover {
            -webkit-transform: translateY(-15px);
            -ms-transform: translateY(-15px);
            transform: translateY(-15px);
        }

.feature-thumb .img-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    border-radius: 40px;
    border: 1px solid #D8D8D8;
    aspect-ratio: 1/1;
    background-color: white;
}

    .feature-thumb .img-wrap img {
        width: Min(130px, 60%);
    }

.feature-thumb-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
}

.partner-stores.feature-thumb {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 992px) {
    .partner-stores.feature-thumb {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .partner-stores.feature-thumb {
        grid-template-columns: repeat(5, 1fr);
    }
}

.partner-stores .feature-thumb-item {
    width: 100%;
    max-width: 176px;
}

    .partner-stores .feature-thumb-item .img-wrap img {
        width: Min(170px, 70%);
    }

.pin {
    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M8 8.50004C7.26667 8.50004 6.66667 7.90004 6.66667 7.16671C6.66667 6.43337 7.26667 5.83337 8 5.83337C8.73334 5.83337 9.33334 6.43337 9.33334 7.16671C9.33334 7.90004 8.73334 8.50004 8 8.50004ZM12 7.30004C12 4.88004 10.2333 3.16671 8 3.16671C5.76667 3.16671 4.00001 4.88004 4.00001 7.30004C4.00001 8.86004 5.3 10.9267 8 13.3934C10.7 10.9267 12 8.86004 12 7.30004ZM8 1.83337C10.8 1.83337 13.3333 3.98004 13.3333 7.30004C13.3333 9.51337 11.5533 12.1334 8 15.1667C4.44667 12.1334 2.66667 9.51337 2.66667 7.30004C2.66667 3.98004 5.20001 1.83337 8 1.83337Z' fill='%23C64300'/></svg>");
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    color: #C64300;
}

    .pin::before {
        content: var(--icon);
        display: inline-block;
        width: 16px;
        height: 17px;
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 3px;
    }

.range-slider {
    margin-top: 24px;
}

    .range-slider .noUi-horizontal {
        height: 3px;
    }

        .range-slider .noUi-horizontal .noUi-handle {
            width: 12px;
            height: 12px;
            right: -5px;
            top: -5px;
        }

    .range-slider .noUi-handle {
        border: 0;
        border-radius: 50%;
        background: #985E0B;
        cursor: default;
        -webkit-box-shadow: unset;
        box-shadow: unset;
    }

        .range-slider .noUi-handle:before, .range-slider .noUi-handle:after {
            display: none;
        }

    .range-slider .noUi-target {
        border: 0;
        background: #D9D9D9;
        -webkit-box-shadow: unset;
        box-shadow: unset;
    }

    .range-slider .noUi-connect {
        background: #985E0B;
    }

.line-label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: #985E0B;
}

    .line-label::before {
        content: '';
        display: block;
        width: 2px;
        height: 12px;
        background-color: #985E0B;
        border-radius: 999rem;
        margin-top: 1px;
    }

.breadcrumb {
    margin-bottom: 0;
    --link-color: currentColor;
    --bs-breadcrumb-item-active-color: currentColor;
}

    .breadcrumb .breadcrumb-item.active {
        font-weight: 500;
    }

/* scroll */
.scroll {
    overflow: auto;
}

    .scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scroll::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 100px;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: #985E0B;
        background-clip: content-box;
        border-radius: 100px;
    }

    .scroll:hover::-webkit-scrollbar-track {
        background-color: #ABABAB;
    }

.tag {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 32px;
    padding-inline: 16px;
    padding-block: 4px;
    font-size: 1rem;
    line-height: 1;
    font-weight: 500;
    border-radius: 999rem;
    white-space: nowrap;
}

.tag-orange {
    color: white;
    background-color: #C64300;
}

.tag-blue {
    color: white;
    background-color: #0479A0;
}
/* scroll */
.scroll {
  overflow: auto; }
  .scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px; }
  .scroll::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    -webkit-transition: all .5s;
    transition: all .5s; }
  .scroll::-webkit-scrollbar-thumb {
    background-color: #985E0B;
    background-clip: content-box;
    border-radius: 100px; }
  .scroll:hover::-webkit-scrollbar-track {
    background-color: #ABABAB; }

.tag-grey {
    color: white;
    background-color: #62676D;
}

.tag-yellow-light {
    color: #985E0B;
    background-color: #FDE3B4;
    font-weight: 500;
    gap: 4px;
}

/* 主視覺區塊 */
.visual-section {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

    .visual-section .img-wrap {
        width: 100%;
        aspect-ratio: 1045/585;
    }

        .visual-section .img-wrap img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

.deco-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 12px;
    color: #985E0B;
}

    .deco-title::before, .deco-title::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 16px;
        background: url("../img/icon-star.svg") no-repeat center center;
    }

    .deco-title .text {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 24px;
        white-space: nowrap;
    }

        .deco-title .text::before, .deco-title .text::after {
            content: '';
            display: inline-block;
            width: Min(80px, 5vw);
            height: 1px;
            background-color: #C64300;
        }

.border-bottom-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-bottom: 2px solid #D8D8D8;
    padding-bottom: 12px;
    line-height: 1;
}

    .border-bottom-title::before {
        content: '';
        display: inline-block;
        width: 4px;
        background-color: #985E0B;
    }

.map-section {
    height: Min(60vh, 500px);
    border-radius: 16px;
    overflow: hidden;
}

.taoyuan-map-container {
    padding: 2rem 0;
}

    .taoyuan-map-container .map-filter-tags .badge {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        .taoyuan-map-container .map-filter-tags .badge.bg-orange-500 {
            background-color: #ff7733;
        }

        .taoyuan-map-container .map-filter-tags .badge:hover {
            -webkit-transform: translateY(-2px);
            -ms-transform: translateY(-2px);
            transform: translateY(-2px);
            -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

    .taoyuan-map-container .district-filter {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
    }

        .taoyuan-map-container .district-filter h5 {
            color: #333;
            font-weight: 600;
        }

        .taoyuan-map-container .district-filter .form-check-input:checked {
            background-color: #ff7733;
            border-color: #ff7733;
        }

    .taoyuan-map-container .housing-card {
        border: 1px solid #e0e0e0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .taoyuan-map-container .housing-card:hover {
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            -webkit-transform: translateX(5px);
            -ms-transform: translateX(5px);
            transform: translateX(5px);
        }

        .taoyuan-map-container .housing-card.active {
            border-color: #ff7733;
            -webkit-box-shadow: 0 0 0 2px rgba(255, 119, 51, 0.2);
            box-shadow: 0 0 0 2px rgba(255, 119, 51, 0.2);
        }

        .taoyuan-map-container .housing-card .card-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
        }

        .taoyuan-map-container .housing-card .btn-outline-orange {
            color: #ff7733;
            border-color: #ff7733;
        }

            .taoyuan-map-container .housing-card .btn-outline-orange:hover {
                background-color: #ff7733;
                color: white;
            }

    .taoyuan-map-container .map-wrapper {
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
        height: 600px;
    }

        .taoyuan-map-container .map-wrapper object, .taoyuan-map-container .map-wrapper svg {
            width: 100%;
            height: 100%;
        }

.taoyuan-map {
    width: 100%;
    height: auto;
}

    .taoyuan-map .district {
        stroke: #fff;
        stroke-width: 2px;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        .taoyuan-map .district.planned {
            fill: #ffb366;
        }

            .taoyuan-map .district.planned:hover {
                fill: #ff9933;
                -webkit-filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
            }

            .taoyuan-map .district.planned.active {
                fill: #ff7733;
                stroke: #ff5500;
                stroke-width: 3px;
            }

        .taoyuan-map .district.unplanned {
            fill: #d0d0d0;
            cursor: not-allowed;
            opacity: 0.6;
        }

    .taoyuan-map .district-label {
        pointer-events: none;
        fill: #333;
        font-size: 0.875rem;
        font-weight: bold;
        text-anchor: middle;
    }

@media (max-width: 991px) {
    .taoyuan-map-container .map-wrapper {
        position: relative;
        top: auto;
        height: 400px;
        margin-top: 2rem;
    }
}

.map-area-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 12px;
    background-color: #FFB265;
    color: black;
    border: none;
    padding: 36px 16px;
    font-size: 1.25em;
}

.map-area-link-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.item-check {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
}

    .item-check::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: center no-repeat url("../img/icon-check-broken.svg");
    }

.step-dot-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
}

    .step-dot-item .dot {
        position: relative;
        z-index: 1;
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 1px solid currentColor;
        border-radius: 999rem;
    }

    .step-dot-item > .start {
        padding-bottom: .725em;
    }

    .step-dot-item > .end {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 0px 8px;
    }

    .step-dot-item .step {
        white-space: nowrap;
    }

        .step-dot-item .step:has(+ *)::after {
            content: ' | ';
            color: #000;
        }

    .step-dot-item:not(:last-child) > .start {
        position: relative;
    }

        .step-dot-item:not(:last-child) > .start::before {
            content: '';
            position: absolute;
            top: calc(1em + 6px);
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            height: calc(100% - (1em + 6px) - 1px);
            border-left: 1px dashed currentColor;
        }

    .step-dot-item[aria-checked="true"] .dot {
        background-color: #0479A0;
        border-color: #0479A0;
    }

    .step-dot-item[aria-checked="true"] .step {
        color: #0479A0;
    }

    .step-dot-item[aria-checked="true"]:has(+ .step-dot-item[aria-checked="true"]) > .start::before {
        border-left-style: solid;
    }

    .step-dot-item[aria-current="true"] .dot {
        background-color: #985E0B;
        border-color: #985E0B;
    }

    .step-dot-item[aria-current="true"] .step {
        color: #985E0B;
    }

/* collapse-icon */
.collapse-icon {
    color: currentColor;
    font-size: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
}

    .collapse-icon .icon {
        display: inline-block;
    }

    .collapse-icon .expanded-true {
        display: none;
    }

    .collapse-icon .expanded-rotate {
        -webkit-transition: all .2s;
        transition: all .2s;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .collapse-icon[aria-expanded="true"] .expanded-false {
        display: none;
    }

    .collapse-icon[aria-expanded="true"] .expanded-true {
        display: inline-block;
    }

    .collapse-icon[aria-expanded="true"] .expanded-rotate {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

/* radio-tab */
.radio-tab-content .tab-pane {
    display: none;
}

    .radio-tab-content .tab-pane.show {
        display: block;
        -webkit-animation: fadeIn 0.5s ease forwards;
        animation: fadeIn 0.5s ease forwards;
    }

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.arrow-right-long-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: #985E0B;
    text-decoration: none;
    font-weight: 500;
}

    .arrow-right-long-link::after {
        content: '';
        display: inline-block;
        width: 26px;
        height: 8px;
        background-image: url("../img/icon-arrow-right-long.svg");
        background-repeat: no-repeat;
        background-size: contain;
    }

.status-legend {
    --size: 20px;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-radius: 999rem;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

    .status-legend.info {
        background-color: #0479A0;
    }

    .status-legend.danger {
        background-color: #C64300;
    }

    .status-legend.success {
        background-color: #447F01;
    }

/* avatar 樣式 */
.avatar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: var(--size, 40px);
    aspect-ratio: 1/1;
    background: white;
    border-radius: 999rem;
    overflow: hidden;
}

    .avatar img {
        width: 70%;
    }

/* avatar-chief 樣式 */
.avatar-chief {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 999px;
    overflow: hidden;
    width: 150px;
    height: 200px;
}

    .avatar-chief img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.sitemap-list {
    list-style: none;
    padding: 0;
    margin-top: 60px;
}

    .sitemap-list a {
        color: currentColor;
        text-decoration: none;
    }

    .sitemap-list > li {
        padding-block: 16px;
    }

        .sitemap-list > li > a {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 160%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .sitemap-list > li > a:before {
                content: '';
                display: inline-block;
                height: 32px;
                width: 4px;
                background-color: #985E0B;
                border-radius: 8px;
                margin-right: 16px;
            }

        .sitemap-list > li ~ li {
            border-top: 1px solid #D8D8D8;
        }

    .sitemap-list ul.sitemap-sublist {
        list-style: none;
        margin-top: 16px;
        padding-left: 20px;
    }

        .sitemap-list ul.sitemap-sublist > li {
            padding-block: 8px;
        }

            .sitemap-list ul.sitemap-sublist > li > a {
                font-size: 1.25rem;
                font-weight: 500;
            }

/* 圖例 */
.legend {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .legend li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        font-size: 1rem;
        line-height: 23px;
    }

        .legend li::before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 50%;
        }

        .legend li.orange::before {
            background-color: #C64300;
        }

        .legend li.brown::before {
            background-color: #985E0B;
        }

        .legend li.blue::before {
            background-color: #0479A0;
        }

        .legend li.green::before {
            background-color: #447F01;
        }

.news-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #D8D8D8;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .news-item {
        gap: Min(1vw, 20px);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 1rem 0;
    }
}

.news-item > * {
    white-space: nowrap;
}

.news-title {
    white-space: wrap;
}

.news-action {
    margin-top: 16px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .news-action {
        margin-top: 0;
    }
}

.news-item {
    -webkit-transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
}

    .news-item:hover {
        background: #f8f5f0;
        color: #a06a1a;
    }

/* 進度條 - 桌機版 */
.progress-bar {
    color: #985E0B;
    font-weight: 500;
    line-height: 29px;
}

@media (min-width: 992px) {
    .progress-bar {
        font-size: 1.125rem;
    }
}

.progress-bar .steps {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    color: #62676D;
}

    .progress-bar .steps:has(.step-1.active) > *:nth-child(-n + 3),
    .progress-bar .steps:has(.step-2.active) > *:nth-child(-n + 7),
    .progress-bar .steps:has(.step-3.active) > *:nth-child(-n + 11),
    .progress-bar .steps:has(.step-4.active) > *:nth-child(-n + 15),
    .progress-bar .steps:has(.step-5.active) > *:nth-child(-n + 19),
    .progress-bar .steps:has(.step-6.active) > * {
        color: #985E0B;
        border-color: #985E0B;
    }

    .progress-bar .steps > * {
        display: block;
        padding-top: 8px;
        padding-bottom: 16px;
        border-bottom: 4px solid #ABABAB;
    }

    .progress-bar .steps .step {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .progress-bar .steps .divider {
        width: 20px;
    }

    .progress-bar .steps > span:not(.divider) {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

/* 進度條 - 手機版 */
.progress-bar-sm {
    position: relative;
    display: grid;
    gap: 12px;
    padding-top: 20px;
    color: #985E0B;
    line-height: 12px;
    font-weight: 500;
}

    .progress-bar-sm:has(.step-1.active) .step-1 span,
    .progress-bar-sm:has(.step-2.active) .step-2 span,
    .progress-bar-sm:has(.step-3.active) .step-3 span,
    .progress-bar-sm:has(.step-4.active) .step-4 span,
    .progress-bar-sm:has(.step-5.active) .step-5 span,
    .progress-bar-sm:has(.step-6.active) .step-6 span {
        display: block;
    }

    .progress-bar-sm:has(.step-1.active) .steps > *:nth-child(-n + 1),
    .progress-bar-sm:has(.step-2.active) .steps > *:nth-child(-n + 2),
    .progress-bar-sm:has(.step-3.active) .steps > *:nth-child(-n + 3),
    .progress-bar-sm:has(.step-4.active) .steps > *:nth-child(-n + 4),
    .progress-bar-sm:has(.step-5.active) .steps > *:nth-child(-n + 5),
    .progress-bar-sm:has(.step-6.active) .steps > *:nth-child(-n + 6) {
        background-color: #985E0B;
    }

    .progress-bar-sm .steps {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 12px;
    }

        .progress-bar-sm .steps .step {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: block;
            height: 4px;
            background-color: #ABABAB;
        }

            .progress-bar-sm .steps .step span {
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }

/* 月曆圖例 */
.calendar-legend {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .calendar-legend li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        font-size: 1rem;
        line-height: 23px;
    }

        .calendar-legend li::before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 50%;
        }

        .calendar-legend li.processing::before {
            background-color: #0479A0;
        }

        .calendar-legend li.booking::before {
            background-color: #447F01;
        }

        .calendar-legend li.disabled::before {
            background-color: #62676D;
        }

        .calendar-legend li + li {
            margin-left: 16px;
        }

@media (min-width: 768px) {
    .calendar-legend li + li {
        margin-left: 24px;
    }
}

/* 大月曆外層容器 */
.carlendar-wrapper {
    height: 545px;
}

@media (min-width: 768px) {
    .carlendar-wrapper {
        height: 900px;
    }
}

@media (min-width: 1200px) {
    .carlendar-wrapper {
        height: 1068px;
    }
}

/* Fullcalendar */
.fc-daygrid-day-number, .fc-col-header-cell-cushion {
    color: #000 !important;
    text-decoration: none !important;
}

.fc-col-header-cell-cushion {
    font-weight: 500;
    font-size: 1rem;
    line-height: 23px;
}

.fc-daygrid-day-number {
    padding: 0;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 17px;
}

.fc-daygrid-day-top {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 8px;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-width: 0;
}

.fc-theme-standard th {
    background-color: white;
}

    .fc-theme-standard th:first-child {
        border-radius: 8px 0 0 0;
    }

    .fc-theme-standard th:last-child {
        border-radius: 0 8px 0 0;
    }

.fc-theme-standard .fc-scrollgrid {
    border-width: 0;
}

.fc-day {
    background-color: #EDEDED;
}

.fc-day-sun {
    background-color: #E0E0E0;
}

.fc-day-sat {
    background-color: #E0E0E0;
}

@media (min-width: 768px) {
    .fc .fc-daygrid-day-events {
        margin-top: 10px;
        padding-bottom: 10px;
    }
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    min-height: 47px;
}

@media (min-width: 768px) {
    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 52px;
    }
}

@media (min-width: 1200px) {
    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 70px;
    }
}

.fc .fc-toolbar.fc-header-toolbar {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}

.fc .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 500;
}

.fc .fc-button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px;
    width: 48px;
    padding: 0;
}

.fc .fc-button-primary {
    background-color: transparent !important;
    border-width: 0;
    color: #000 !important;
}

    .fc .fc-button-primary:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.fc .fc-h-event {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    background-color: red;
    border-width: 0;
    border-radius: 8px;
}

    .fc .fc-h-event .fc-event-title {
        font-size: 0.875rem;
    }

.fc .fc-event.period::before {
    color: white;
    font-size: 0.75rem;
}

.fc .fc-event.period .fc-event-main {
    display: none;
}

.fc .fc-event.period.morning::before {
    content: "1";
}

.fc .fc-event.period.afternoon::before {
    content: "2";
}

.fc .fc-event.period.night::before {
    content: "3";
}

@media (min-width: 768px) {
    .fc .fc-event.period.morning::before, .fc .fc-event.period.afternoon::before, .fc .fc-event.period.night::before {
        content: "";
    }

    .fc .fc-event.period .fc-event-main {
        display: block;
    }
}

.fc .fc-daygrid-event-harness {
    text-align: center;
}

    .fc .fc-daygrid-event-harness + .fc-daygrid-event-harness {
        margin-top: -2px !important;
    }

@media (min-width: 768px) {
    .fc .fc-daygrid-event-harness + .fc-daygrid-event-harness {
        margin-top: 6px !important;
    }
}

.fc .fc-daygrid-day.fc-day-future {
    background-color: #EDEDED;
}

    .fc .fc-daygrid-day.fc-day-future.fc-day-sat, .fc .fc-daygrid-day.fc-day-future.fc-day-sun {
        background-color: #E0E0E0;
    }

    .fc .fc-daygrid-day.fc-day-future.disabledDay {
        background-color: #ededed;
    }

        .fc .fc-daygrid-day.fc-day-future.disabledDay.fc-day-sat, .fc .fc-daygrid-day.fc-day-future.disabledDay.fc-day-sun {
            background-color: #e5e1dd;
        }

@media (min-width: 768px) {
    .fc-daygrid-day-number {
        font-size: 1rem;
        line-height: 23px;
    }

    .fc .fc-h-event {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 28px;
        width: auto;
    }

        .fc .fc-h-event .fc-event-title {
            display: block;
        }
}

@media (min-width: 1200px) {
    .fc-daygrid-day-top {
        padding-top: 16px;
    }

    .fc .fc-col-header-cell-cushion {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 4px;
}

@media (min-width: 1200px) {
    .fc-direction-ltr .fc-daygrid-event.fc-event-end,
    .fc-direction-rtl .fc-daygrid-event.fc-event-start {
        margin-right: 16px;
    }
}

.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
    margin-left: 4px;
}

@media (min-width: 1200px) {
    .fc-direction-ltr .fc-daygrid-event.fc-event-start,
    .fc-direction-rtl .fc-daygrid-event.fc-event-end {
        margin-left: 16px;
    }
}

/* 顯示更多 */
.fc-direction-ltr .fc-daygrid-more-link {
    float: none !important;
    text-decoration: none;
    font-size: 1rem;
}

.fc-daygrid-day-bottom:has(.fc-daygrid-more-link) {
    text-align: center;
    padding-top: 8px;
}

.ui-data-state-empty {
    display: none;
}

.ui-data-state:not(:has(.ui-data-state-content *)) .ui-data-state-content {
    display: none;
}

.ui-data-state:not(:has(.ui-data-state-content *)) .ui-data-state-empty {
    display: block;
}

/* 無資料顯示 */
.no-data:not(:has(img))::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--img, #F5F5F5 url(../img/logo.svg)) no-repeat center;
    background-size: var(--size, 40%);
}

.no-data-course {
    --img: url(../img/course-default-img.svg);
    --size: contain;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.sidebar-nav li {
    border-bottom: 1px solid #eee;
}

    .sidebar-nav li:last-child {
        border-bottom: none;
    }

    .sidebar-nav li.active a {
        background: #985E0B;
        color: #fff;
    }

.sidebar-nav a {
    display: block;
    padding: 14px 16px;
    color: #222;
    text-decoration: none;
    font-size: 1.25rem;
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    background: #fff;
    font-weight: 500;
}

    .sidebar-nav a:hover {
        background: #f5f5f5;
        color: #985E0B;
    }

@media (max-width: 992px) {
    .sidebar-nav {
        display: none;
        margin-inline: calc(var(--page-px) * -1);
        margin-top: 40px;
    }

    .sidebar-toggle-wrap:has(:checked) ~ .sidebar-nav {
        display: block;
        -webkit-animation: fadeIn 0.3s ease-in-out;
        animation: fadeIn 0.3s ease-in-out;
    }

    .sidebar-toggle-wrap:has(:checked) .hide-menu-btn {
        border: 1px solid #985E0B;
        background: #fff;
        color: #985E0B;
    }
}

@media (min-width: 992px) {
    .hide-menu-btn {
        display: none;
    }
}

.elevator {
    position: absolute;
    left: -116px;
    top: 67px;
    z-index: 100;
    -webkit-transition: none;
    transition: none;
}

    .elevator.is-fixed {
        position: fixed;
        top: 120px;
        width: 116px;
    }

    .elevator .elevator-list {
        background: transparent;
        padding: 0;
        list-style: none;
        margin: 0;
        width: 116px;
    }

        .elevator .elevator-list li {
            list-style: none;
            margin-bottom: 0.5rem;
        }

            .elevator .elevator-list li:last-child {
                margin-bottom: 0;
            }

            .elevator .elevator-list li a {
                display: block;
                padding: 0.5rem 0;
                color: #000;
                text-decoration: none;
                -webkit-transition: color 0.3s;
                transition: color 0.3s;
                font-size: 0.95rem;
            }

                .elevator .elevator-list li a.active {
                    color: #985E0B;
                    position: relative;
                }

                    .elevator .elevator-list li a.active::before {
                        content: '';
                        position: absolute;
                        left: -10px;
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        transform: translateY(-50%);
                        width: 2px;
                        height: 16px;
                        background: #8B6914;
                    }

.elevator-placeholder {
    display: block;
}

@media (max-width: 1400px) {
    .elevator {
        display: none;
    }
}

.page-inner {
    position: relative;
}

.house-3d-view-modal .modal-body {
    padding: 0;
}

.house-3d-view-modal .btn-close {
    display: none;
}

.house-3d-view-modal .btn.rounded-circle {
    width: 40px;
    height: 40px;
}

@media (max-width: 767.98px) {
    .house-3d-view-modal .btn.rounded-circle {
        width: 32px;
        height: 32px;
    }
}

.view-control-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    background-color: white;
    border-radius: 40px 40px 0px 0px;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.25);
    opacity: 0.9;
}

    .view-control-panel .house-type {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
        padding-top: 0;
        border: 0;
    }

@media (max-width: 767.98px) {
    .view-control-panel .house-type {
        padding-top: 10px;
        margin-top: 12px;
        border-top: 1px solid red;
        width: 100%;
    }
}

.view-control-panel .view-control-panel-toggle {
    display: none;
    border: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
    line-height: 1.75rem;
    width: 100%;
    background-color: #FDE3B4;
    border-radius: 20px 20px 0px 0px;
    font-size: 1.5rem;
}

    .view-control-panel .view-control-panel-toggle i {
        line-height: 1;
        color: #985E0B;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .view-control-panel .view-control-panel-toggle.collapsed i {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

@media (max-width: 767.98px) {
    .view-control-panel .view-control-panel-toggle {
        display: block;
    }
}

@media (min-width: 768px) {
    .view-control-panel .collapse:not(.show) {
        display: block;
    }
}

@media (max-width: 1200px) {
    .view-control-panel {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .view-control-panel {
        border-radius: 20px 20px 0px 0px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.view-control-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    padding-block: 16px;
    padding-inline: clamp(1rem, 4.38vw, 3.5rem);
    gap: 1rem;
}

.view-control-btn-group {
    display: grid;
    gap: 16px;
    position: fixed;
    top: 50%;
    right: 16px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

@media (max-width: 768px) {
    .view-control-btn-group {
        z-index: 1;
    }
}
/* == 位置點 == */
.view-control-location-point {
    --top: unset;
    --left: unset;
    --right: unset;
    --bottom: unset;
    position: fixed;
    top: var(--top);
    left: var(--left);
    right: var(--right);
    bottom: var(--bottom);
    z-index: 2;
    display: grid;
    gap: 16px;
    /* 出現動畫 */
}

    .view-control-location-point .text {
        width: 90px;
        height: 90px;
        background-color: #181B1E;
        border-radius: 50%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        color: #ffffff;
        opacity: 0.9;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-animation: appear 2s forwards;
        animation: appear 2s forwards;
    }

@media (max-width: 992px) {
    .view-control-location-point .text {
        width: 76px;
        height: 76px;
    }
}

.view-control-location-point:after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #ffffff;
    background-color: #62676D;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 14px;
}

.view-control-close {
    position: fixed;
    top: 20px;
    right: 20px;
}

.room-view-point {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    font-size: 10px;
    color: white;
    text-align: center;
    line-height: 16px; /* Center text vertically within 20px height minus 4px border */
    transition: all 0.2s ease;
}

.room-view-point:hover {
    background-color: darkred;
    transform: scale(1.2);
}

.room-view-point.selected {
    background-color: orange;
    transform: scale(1.3);
}

@media (max-width: 767.98px) {
    .view-control-btn-group {
        z-index: 1;
    }
}
@-webkit-keyframes appear {
    from {
        opacity: 0;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes appear {
    from {
        opacity: 0;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.hotspot {
    cursor: pointer;
}

/* 右鍵選單 */
#context-menu {
    /*    display: none;*/
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.view-control-floor-plan {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    top: 20px;
    left: 20px;
    height: auto;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 0px;
    --left: unset;
    --right: unset;
    --top: unset;
    --bottom: unset;
    --left-md: unset;
    --right-md: unset;
    --top-md: unset;
    --bottom-md: unset;
}

@media (max-width: 767.98px) {
    .view-control-floor-plan {
        left: 0;
        border-radius: 0px 20px 20px 0px;
    }
}

.view-control-floor-plan .pointer-position {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: rgba(229,184,162,1);
    border-radius: 50%;
    left: var(--left);
    top: var(--top);
}

    .view-control-floor-plan .pointer-position.active {
        background-color: red;
        width: 24px;
        height: 24px;
    }

@media (max-width: 767.98px) {
    .view-control-floor-plan .pointer-position {
        left: var(--left-md);
        top: var(--top-md);
        width: 8px;
        height: 8px;
    }

        .view-control-floor-plan .pointer-position.active {
            width: 14px;
            height: 14px;
        }
}

.view-control-floor-plan .pic-size {
    width: 290px;
    margin: 6px;
}

@media (max-width: 767.98px) {
    .view-control-floor-plan .pic-size {
        width: 143px;
        margin-right: 0;
    }
}

.view-control-floor-plan .collapsing {
    -webkit-transition: unset;
    transition: unset;
}

.view-control-floor-plan .floor-plan-toggle {
    display: none;
    background: unset;
    border: 0;
    padding: 0 4px;
    height: 230px;
}

    .view-control-floor-plan .floor-plan-toggle i {
        font-size: 1.5rem;
        color: #985E0B;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .view-control-floor-plan .floor-plan-toggle[aria-expanded="true"] i {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

@media (max-width: 767.98px) {
    .view-control-floor-plan .floor-plan-toggle {
        display: block;
    }
}

@media (min-width: 768px) {
    .view-control-floor-plan .collapse:not(.show) {
        display: block;
    }
}

.hotspot {
    cursor: pointer;
}

/* 右鍵選單 */
#context-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Chatbot 對話機器人 */
.btn-chatbot {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 128px;
    height: 116px;
    border-radius: 20px 0 0 20px;
    border: 2px solid #D3D3D3;
    border-right-width: 0;
    background-color: #FFF;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

    .btn-chatbot .text {
        color: #000;
        font-weight: 500;
    }

    .btn-chatbot:hover {
        background-color: #FFCB50;
        border-color: #fff;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

.chatbot-wrapper {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 50vh;
    padding-left: calc(100vw - 143px);
    z-index: 2;
    height: 0;
}

/* 選屋功能 (Online Selection) */
/* 選屋資訊頭部 */
.online-selection-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 12px 24px;
    margin-bottom: 16px;
    background-color: #FFF4D9;
}

@media (min-width: 992px) {
    .online-selection-head {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.online-selection-filter-btns {
    display: grid;
}

@media (min-width: 992px) {
    .online-selection-filter-btns {
        grid-template-columns: auto 1fr;
        gap: 28px 32px;
    }
}

.online-selection-filter-btns .start {
    margin-bottom: 6px;
}

@media (min-width: 992px) {
    .online-selection-filter-btns .start {
        font-size: 1.25rem;
        margin-bottom: 0;
    }
}

.online-selection-filter-btns .end {
    margin-bottom: 16px;
}

@media (min-width: 992px) {
    .online-selection-filter-btns .end {
        padding-left: 32px;
        border-left: 2px solid #985E0B;
        margin-bottom: 0;
    }
}

.online-selection-filter-btns .flex-item-wrap {
    gap: 12px;
}

@media (min-width: 992px) {
    .online-selection-filter-btns .flex-item-wrap {
        gap: 20px;
    }
}

.online-selection-filter-btns input {
    position: absolute;
    opacity: 0;
}

    .online-selection-filter-btns input:focus-visible + label {
        outline: 2px solid #005fcc;
        /* 增强焦点可见性 */
        outline-offset: 2px;
    }

.online-selection-filter-btns label {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 6rem;
    padding: 8px 16px;
    height: 36px;
    border: 1px solid #62676D;
    border-radius: 8px;
    background-color: transparent;
    color: #000;
    font-weight: 500;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.online-selection-filter-btns input:disabled + label {
    background-color: #ABABAB;
    border-color: #62676D;
    color: #62676D;
    cursor: not-allowed;
}

.online-selection-filter-btns input:checked + label {
    background-color: #985E0B;
    border-color: #985E0B;
    color: #fff;
}

/* 選屋車位選擇 */
.online-selection-parking {
    padding: 40px 32px;
    background-color: #F5F5F5;
    border-radius: 0 0 24px 24px;
}

    .online-selection-parking .radios {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-column-gap: 24px;
        -moz-column-gap: 24px;
        column-gap: 24px;
    }

/* 選屋平面圖與地圖互動 */
/* 圖例 */
.map-legend {
    --bg: #FDE3B4;
    --border: #62676D;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
}

    .map-legend span {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: .5rem;
        color: #000;
        font-size: 1rem;
        white-space: nowrap;
    }

        .map-legend span::before {
            content: '';
            display: block;
            width: 1rem;
            height: 1rem;
            border-radius: 999rem;
            background-color: var(--bg);
            border: 1px solid var(--border);
        }

        .map-legend span.selected {
            --bg: #985E0B;
            --border: #985E0B;
        }

        .map-legend span.disabled {
            --bg: #ABABAB;
            --border: #62676D;
        }

/* 控制列 */
.map-control-bar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: white;
}

.map-control-bar-inner {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 88px;
    padding-inline: 24px;
    background-color: #F5F5F5;
    border-radius: 16px;
    font-size: 1rem;
}

    .map-control-bar-inner > .end {
        position: absolute;
        right: 24px;
        bottom: 11px;
        overflow: hidden;
    }

/* 清單 */
.map-list-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 0.5rem;
    border: 1px solid #CACBCC;
    overflow: hidden;
    -webkit-transition: all .2s;
    transition: all .2s;
}

@media (min-width: 992px) {
    .map-list-wrapper {
        width: 560px;
    }
}

@media (min-width: 1060px) {
    .map-list-wrapper {
        width: 640px;
    }
}

@media (min-width: 1400px) {
    .map-list-wrapper {
        width: 680px;
    }
}

/* 狀態 */
.map-list-states {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 0.75rem 1rem;
    color: white;
    font-size: .875rem;
    background: #985E0B;
}

@media (min-width: 992px) {
    .map-list-states {
        padding: 0.75rem 1.25rem 1rem 1.25rem;
    }
}

.map-list-states .start {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

    .map-list-states .start .title {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: .5rem;
        font-size: 1rem;
        font-weight: 500;
    }

.map-list-states .end {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.map-list-states .mobile {
    display: none;
}

@media (min-width: 992px) {
    .map-list-states .mobile {
        display: block;
    }
}

.map-list-states a {
    text-decoration: none;
    color: white;
}

/* 箭頭 */
.map-list-wrapper:has([aria-expanded]) .map-list-states {
    cursor: pointer;
}

    .map-list-wrapper:has([aria-expanded]) .map-list-states::after {
        content: '';
        display: none;
        width: 2rem;
        height: 2rem;
        background: url(../img/icon-arrow-up.svg) center no-repeat;
        background-size: contain;
        -webkit-transition: all .2s;
        transition: all .2s;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

@media (min-width: 992px) {
    .map-list-wrapper:has([aria-expanded]) .map-list-states::after {
        display: block;
    }
}

.map-list-wrapper:has([aria-expanded]) .map-list-states .stretched-link:focus {
    position: static;
    margin-left: auto;
}

.map-list-wrapper:has([aria-expanded="true"]) .map-list-states::after {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* 平面圖 */
.site-plan {
    position: relative;
    text-align: center;
    overflow: auto;
}

/* 房型資訊固定 */
.site-plan-info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: white;
    background-color: rgba(49, 54, 60, 0.9);
    border-radius: 20px;
}

    .site-plan-info .inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 20px 24px;
        gap: 20px;
    }

        .site-plan-info .inner::after {
            content: "";
            position: absolute;
            bottom: -16px;
            display: inline-block;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 16px solid rgba(49, 54, 60, 0.9);
        }

    .site-plan-info .head {
        font-weight: 500;
        font-size: 1.125rem;
    }

@media (min-width: 992px) {
    .site-plan-info .head {
        font-size: 1.25rem;
    }
}

.site-plan-info .btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
}

.site-plan-info .btn-outline-primary.white {
    color: white;
    border-color: white;
    background-color: transparent !important;
}

/* 地圖 */
.map {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.map-wrap {
    display: inline-block;
    position: relative;
}

.map-link {
    --bg: #FDE3B4;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    pointer-events: all;
    background-color: var(--bg);
    color: #000;
    text-decoration: none;
    align-items: center;
    -webkit-transition: .2s;
    transition: .2s;
}

    .map-link:hover {
        --bg: #985E0B;
        color: white;
    }

    .map-link:focus {
        background-color: yellow !important;
        color: #000 !important;
    }

    .map-link.selected {
        --bg: #985E0B;
        color: white;
    }

    .map-link.disabled {
        --bg: #ABABAB;
        color: #62676D;
    }

    .map-link.wheelchair {
        background-image: url(../map/icon-wheelchair.svg);
        background-repeat: no-repeat;
        background-position: left 5px center;
        background-size: 12px;
    }

        .map-link.wheelchair:hover {
            background-image: url(../map/icon-wheelchair-white.svg);
        }

        .map-link.wheelchair:focus {
            background-image: url(../map/icon-wheelchair.svg);
        }

        .map-link.wheelchair.selected {
            background-image: url(../map/icon-wheelchair-white.svg);
        }

            .map-link.wheelchair.selected:focus {
                background-image: url(../map/icon-wheelchair.svg);
            }

    .map-link.vertical {
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        text-orientation: upright;
    }

        .map-link.vertical.wheelchair {
            background-position: top 3px center;
        }

/* 選屋浮動計時器 */
.floating-timer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding-left: 8px;
    padding-right: 1.75rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border-radius: 0 200px 200px 0;
    color: #fff;
    background: #62676D;
    -webkit-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
    font-size: 0.875rem;
    line-height: 150%;
}

    .floating-timer.isOpen {
        background: #C64300;
        padding-right: 1.25rem;
    }

    .floating-timer:hover .end {
        display: block;
        -webkit-animation: fadeIn 1s forwards;
        animation: fadeIn 1s forwards;
    }

    .floating-timer:hover .start {
        display: none;
    }

    .floating-timer .start {
        display: grid;
        justify-items: center;
        padding: 0;
        white-space: nowrap;
        -webkit-animation: fadeIn 1s forwards;
        animation: fadeIn 1s forwards;
    }

    .floating-timer .end {
        display: none;
    }

.floating-wrap {
    --top: 124px;
    position: fixed;
    top: -80px;
    left: 0;
    z-index: 3;
    -webkit-transition: all .6s;
    transition: all .6s;
}

.scrollDown .floating-wrap {
    top: var(--top);
}

/* 鷹眼小地圖 */
.eagle-eye .img-container {
    width: 110px;
    background-color: #f8f9fa;
}

    .eagle-eye .img-container img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

/* top-sticky-scroll */
.top-sticky-scroll {
    width: 100%;
    padding-bottom: 12px;
    padding-top: calc(64px + 40px + 20px);
    background-color: white;
    -webkit-transition: all .5s;
    transition: all .5s;
}

@media (max-width: 992px) {
    .top-sticky-scroll {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 2;
    }
}

@media (max-width: 992px) {
    body.scrollDown .top-sticky-scroll {
        top: var(--hide-top, -450px);
    }
}

.top-sticky-scroll-house-introduction {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 2;
    background-color: white;
    -webkit-transition: .5s;
    transition: .5s;
}

    .top-sticky-scroll-house-introduction.shadow {
        -webkit-box-shadow: 0px 13px 22px -14px rgba(184, 180, 180, 0.3) !important;
        box-shadow: 0px 13px 22px -14px rgba(184, 180, 180, 0.3) !important;
        border-bottom: 1px solid #E5E5E5;
    }

@media (max-width: 768px) {
    .top-sticky-scroll-house-introduction.shadow .button-group {
        display: none !important;
    }
}

body.scrollDown .top-sticky-scroll-house-introduction {
    position: -webkit-sticky;
    position: sticky;
    top: -250px;
}

/* 登出計時器 */
.logout-timer {
    position: fixed;
    top: 60px;
    right: 86px;
    z-index: 20;
}

@media (min-width: 576px) {
    .logout-timer {
        position: static;
    }
}

/* == Helpers == */
/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.65);
}

/* line-clamp */
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* object-fit-contain */
.img-object-fit-contain > img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* object-fit-cover */
.img-object-fit-cover > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.link-currentColor {
    color: currentColor;
    text-decoration: none;
}

.flex-start-end {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: .5rem;
}

/* item彈性換行 flex-item-wrap */
.flex-item-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

/* 左側寬度自適 grid-left-auto */
.grid-left-auto {
    display: grid;
    gap: 8px;
    grid-template-columns: auto 1fr;
}

.grid-sm-left-auto {
    display: grid;
    gap: 8px;
}

@media (min-width: 576px) {
    .grid-sm-left-auto {
        grid-template-columns: auto 1fr;
    }
}

.grid-md-left-auto {
    display: grid;
    gap: 8px;
}

@media (min-width: 768px) {
    .grid-md-left-auto {
        grid-template-columns: auto 1fr;
    }
}

.grid-lg-left-auto {
    display: grid;
    gap: 8px;
}

@media (min-width: 992px) {
    .grid-lg-left-auto {
        grid-template-columns: auto 1fr;
    }
}

.grid-xl-left-auto {
    display: grid;
    gap: 8px;
}

@media (min-width: 1200px) {
    .grid-xl-left-auto {
        grid-template-columns: auto 1fr;
    }
}

.grid-xxl-left-auto {
    display: grid;
    gap: 8px;
}

@media (min-width: 1400px) {
    .grid-xxl-left-auto {
        grid-template-columns: auto 1fr;
    }
}

.form-comp-date-duration .text {
    display: block;
    text-align: center;
    padding-block: 6px;
}

@container (min-width: 350px) {
    .form-comp-date-duration {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 8px;
    }
}

/* 左側寬度自適 grid-right-auto */
.grid-right-auto {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
}

/* item對齊換行 grid-item-wrap */
.grid-item-wrap {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-size, 7.5em), 1fr));
}

    .grid-item-wrap .full {
        grid-column: 1 / -1;
    }

/* Form layout */
.form-layout-cq {
    container-type: inline-size;
}

    .form-layout-cq .form-label {
        margin-bottom: 4px;
    }

    .form-layout-cq > .inner {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }

@container (min-width: 800px) {
    .form-layout-cq > .inner {
        grid-template-columns: 1fr 1fr;
    }
}

.form-layout-cq > .inner > .item:has(.full) {
    grid-column: 1 / -1;
}

.form-layout-cq > .inner > .item.new-line {
    grid-column: 1;
}

/* checked 顯示 */
.cond-checked-container:has(.cond-checked-trigger:checked) .cond-checked-dependent {
    display: block;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
}

.cond-checked-dependent {
    display: none;
}

/* unchecked 顯示*/
.cond-checked-container.unchecked:has(.cond-checked-trigger:checked) .cond-checked-dependent {
    display: none;
}

.cond-checked-container.unchecked .cond-checked-dependent {
    display: block;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
}

/* 雙態切換 */
.cond-twin-switch-dependent:first-child {
    display: block;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
}

.cond-twin-switch-dependent:last-child {
    display: none;
}

.cond-twin-switch-container:has(.cond-twin-switch-trigger:checked) .cond-twin-switch-items .cond-twin-switch-dependent:first-child {
    display: none;
}

.cond-twin-switch-container:has(.cond-twin-switch-trigger:checked) .cond-twin-switch-items .cond-twin-switch-dependent:last-child {
    display: block;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
}

/* == Utilities == */
.text-primary {
    color: #985E0B !important;
}

.text-orange {
    color: #C64300 !important;
}

.text-blue {
    color: #0479A0 !important;
}

.text-green {
    color: #447F01 !important;
}

.text-light-grey {
    color: #ABABAB !important;
}

.text-dark-grey {
    color: #62676D !important;
}

.text-danger {
    color: #F00 !important;
}

.bg-yellow-light {
    background-color: #FDE3B4 !important;
}

.bg-beige {
    background-color: #F8F4ED !important;
}

.bg-orange {
    background-color: #C64300 !important;
}

.bg-yellow {
    background-color: #FFCB50 !important;
}

.bg-orange-light {
    background-color: #FFB265 !important;
}

.bg-light-grey-extra {
    background-color: #F5F5F5 !important;
}

.bg-orange-lightest {
    background-color: #FFF7E8 !important;
}

.bg-brand-red {
    background-color: #E73218 !important;
}

.bg-brand-yellow {
    background-color: #F39917 !important;
}

.bg-brand-gray {
    background-color: #687779 !important;
}

.bg-brown {
    background-color: #985E0B !important;
}

.border-primary {
    border-color: #985E0B !important;
}

.border-gray {
    border-color: #D3D3D3 !important;
}

.rounded-s {
    border-radius: 12px !important;
}

.rounded-m {
    border-radius: 20px !important;
}

.rounded-lg {
    border-radius: 40px !important;
}

.rounded-xl {
    border-radius: 60px !important;
}

.rounded-xxl {
    border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
}

.rounded-xxxl {
    border-radius: 120px !important;
}

.rounded-bottom-s {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.rounded-bottom-m {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.rounded-bottom-lg {
    border-bottom-left-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
}

.rounded-bottom-xl {
    border-bottom-left-radius: 60px !important;
    border-bottom-right-radius: 60px !important;
}

.rounded-bottom-xxl {
    border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
}

.rounded-bottom-xxxl {
    border-bottom-left-radius: 120px !important;
    border-bottom-right-radius: 120px !important;
}

.rounded-top-s {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.rounded-top-m {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.rounded-top-lg {
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
}

.rounded-top-xl {
    border-top-left-radius: 60px !important;
    border-top-right-radius: 60px !important;
}

.rounded-top-xxl {
    border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
}

.rounded-top-xxxl {
    border-top-left-radius: 120px !important;
    border-top-right-radius: 120px !important;
}

.gap-s {
    gap: 12px !important;
}

.gap-m {
    gap: 20px !important;
}

.gap-lg {
    gap: 40px !important;
}

.gap-xl {
    gap: 60px !important;
}

.gap-xxl {
    gap: 80px !important;
}

.gap-xxxl {
    gap: 120px !important;
}

.column-gap-s {
    -webkit-column-gap: 12px !important;
    -moz-column-gap: 12px !important;
    column-gap: 12px !important;
}

.column-gap-m {
    -webkit-column-gap: 20px !important;
    -moz-column-gap: 20px !important;
    column-gap: 20px !important;
}

.column-gap-lg {
    -webkit-column-gap: 40px !important;
    -moz-column-gap: 40px !important;
    column-gap: 40px !important;
}

.column-gap-xl {
    -webkit-column-gap: 60px !important;
    -moz-column-gap: 60px !important;
    column-gap: 60px !important;
}

.column-gap-xxl {
    -webkit-column-gap: 80px !important;
    -moz-column-gap: 80px !important;
    column-gap: 80px !important;
}

.column-gap-xxxl {
    -webkit-column-gap: 120px !important;
    -moz-column-gap: 120px !important;
    column-gap: 120px !important;
}

.row-gap-s {
    row-gap: 12px !important;
}

.row-gap-m {
    row-gap: 20px !important;
}

.row-gap-lg {
    row-gap: 40px !important;
}

.row-gap-xl {
    row-gap: 60px !important;
}

.row-gap-xxl {
    row-gap: 80px !important;
}

.row-gap-xxxl {
    row-gap: 120px !important;
}

.p-s {
    padding: 12px !important;
}

.p-m {
    padding: 20px !important;
}

.p-lg {
    padding: 40px !important;
}

.p-xl {
    padding: 60px !important;
}

.p-xxl {
    padding: 80px !important;
}

.p-xxxl {
    padding: 120px !important;
}

.pt-s {
    padding-top: 12px !important;
}

.pt-m {
    padding-top: 20px !important;
}

.pt-lg {
    padding-top: 40px !important;
}

.pt-xl {
    padding-top: 60px !important;
}

.pt-xxl {
    padding-top: 80px !important;
}

.pt-xxxl {
    padding-top: 120px !important;
}

.pb-s {
    padding-bottom: 12px !important;
}

.pb-m {
    padding-bottom: 20px !important;
}

.pb-lg {
    padding-bottom: 40px !important;
}

.pb-xl {
    padding-bottom: 60px !important;
}

.pb-xxl {
    padding-bottom: 80px !important;
}

.pb-xxxl {
    padding-bottom: 120px !important;
}

.pe-s {
    padding-right: 12px !important;
}

.pe-m {
    padding-right: 20px !important;
}

.pe-lg {
    padding-right: 40px !important;
}

.pe-xl {
    padding-right: 60px !important;
}

.pe-xxl {
    padding-right: 80px !important;
}

.pe-xxxl {
    padding-right: 120px !important;
}

.ps-s {
    padding-left: 12px !important;
}

.ps-m {
    padding-left: 20px !important;
}

.ps-lg {
    padding-left: 40px !important;
}

.ps-xl {
    padding-left: 60px !important;
}

.ps-xxl {
    padding-left: 80px !important;
}

.ps-xxxl {
    padding-left: 120px !important;
}

.px-s {
    padding-inline: 12px !important;
}

.px-m {
    padding-inline: 20px !important;
}

.px-lg {
    padding-inline: 40px !important;
}

.px-xl {
    padding-inline: 60px !important;
}

.px-xxl {
    padding-inline: 80px !important;
}

.px-xxxl {
    padding-inline: 120px !important;
}

.py-s {
    padding-block: 12px !important;
}

.py-m {
    padding-block: 20px !important;
}

.py-lg {
    padding-block: 40px !important;
}

.py-xl {
    padding-block: 60px !important;
}

.py-xxl {
    padding-block: 80px !important;
}

.py-xxxl {
    padding-block: 120px !important;
}

.m-s {
    margin: 12px !important;
}

.m-m {
    margin: 20px !important;
}

.m-lg {
    margin: 40px !important;
}

.m-xl {
    margin: 60px !important;
}

.m-xxl {
    margin: 80px !important;
}

.m-xxxl {
    margin: 120px !important;
}

.mt-s {
    margin-top: 12px !important;
}

.mt-m {
    margin-top: 20px !important;
}

.mt-lg {
    margin-top: 40px !important;
}

.mt-xl {
    margin-top: 60px !important;
}

.mt-xxl {
    margin-top: 80px !important;
}

.mt-xxxl {
    margin-top: 120px !important;
}

.mb-s {
    margin-bottom: 12px !important;
}

.mb-m {
    margin-bottom: 20px !important;
}

.mb-lg {
    margin-bottom: 40px !important;
}

.mb-xl {
    margin-bottom: 60px !important;
}

.mb-xxl {
    margin-bottom: 80px !important;
}

.mb-xxxl {
    margin-bottom: 120px !important;
}

.mx-s {
    margin-inline: 12px !important;
}

.mx-m {
    margin-inline: 20px !important;
}

.mx-lg {
    margin-inline: 40px !important;
}

.mx-xl {
    margin-inline: 60px !important;
}

.mx-xxl {
    margin-inline: 80px !important;
}

.mx-xxxl {
    margin-inline: 120px !important;
}

.my-s {
    margin-block: 12px !important;
}

.my-m {
    margin-block: 20px !important;
}

.my-lg {
    margin-block: 40px !important;
}

.my-xl {
    margin-block: 60px !important;
}

.my-xxl {
    margin-block: 80px !important;
}

.my-xxxl {
    margin-block: 120px !important;
}

.mt-n-n1 {
    margin-top: -0.25rem !important;
}

.mt-n-n2 {
    margin-top: -0.5rem !important;
}

.mt-n-n3 {
    margin-top: -1rem !important;
}

.mt-n-n4 {
    margin-top: -1.5rem !important;
}

.mt-n-n5 {
    margin-top: -3rem !important;
}

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

@media (min-width: 576px) {
    .rounded-sm-s {
        border-radius: 12px !important;
    }

    .rounded-sm-m {
        border-radius: 20px !important;
    }

    .rounded-sm-lg {
        border-radius: 40px !important;
    }

    .rounded-sm-xl {
        border-radius: 60px !important;
    }

    .rounded-sm-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-sm-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-sm-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-sm-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-sm-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-sm-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-sm-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-sm-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-sm-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-sm-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-sm-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-sm-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-sm-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-sm-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-sm-s {
        gap: 12px !important;
    }

    .gap-sm-m {
        gap: 20px !important;
    }

    .gap-sm-lg {
        gap: 40px !important;
    }

    .gap-sm-xl {
        gap: 60px !important;
    }

    .gap-sm-xxl {
        gap: 80px !important;
    }

    .gap-sm-xxxl {
        gap: 120px !important;
    }

    .column-gap-sm-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-sm-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-sm-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-sm-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-sm-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-sm-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-sm-s {
        row-gap: 12px !important;
    }

    .row-gap-sm-m {
        row-gap: 20px !important;
    }

    .row-gap-sm-lg {
        row-gap: 40px !important;
    }

    .row-gap-sm-xl {
        row-gap: 60px !important;
    }

    .row-gap-sm-xxl {
        row-gap: 80px !important;
    }

    .row-gap-sm-xxxl {
        row-gap: 120px !important;
    }

    .p-sm-s {
        padding: 12px !important;
    }

    .p-sm-m {
        padding: 20px !important;
    }

    .p-sm-lg {
        padding: 40px !important;
    }

    .p-sm-xl {
        padding: 60px !important;
    }

    .p-sm-xxl {
        padding: 80px !important;
    }

    .p-sm-xxxl {
        padding: 120px !important;
    }

    .pt-sm-s {
        padding-top: 12px !important;
    }

    .pt-sm-m {
        padding-top: 20px !important;
    }

    .pt-sm-lg {
        padding-top: 40px !important;
    }

    .pt-sm-xl {
        padding-top: 60px !important;
    }

    .pt-sm-xxl {
        padding-top: 80px !important;
    }

    .pt-sm-xxxl {
        padding-top: 120px !important;
    }

    .pb-sm-s {
        padding-bottom: 12px !important;
    }

    .pb-sm-m {
        padding-bottom: 20px !important;
    }

    .pb-sm-lg {
        padding-bottom: 40px !important;
    }

    .pb-sm-xl {
        padding-bottom: 60px !important;
    }

    .pb-sm-xxl {
        padding-bottom: 80px !important;
    }

    .pb-sm-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-sm-s {
        padding-right: 12px !important;
    }

    .pe-sm-m {
        padding-right: 20px !important;
    }

    .pe-sm-lg {
        padding-right: 40px !important;
    }

    .pe-sm-xl {
        padding-right: 60px !important;
    }

    .pe-sm-xxl {
        padding-right: 80px !important;
    }

    .pe-sm-xxxl {
        padding-right: 120px !important;
    }

    .ps-sm-s {
        padding-left: 12px !important;
    }

    .ps-sm-m {
        padding-left: 20px !important;
    }

    .ps-sm-lg {
        padding-left: 40px !important;
    }

    .ps-sm-xl {
        padding-left: 60px !important;
    }

    .ps-sm-xxl {
        padding-left: 80px !important;
    }

    .ps-sm-xxxl {
        padding-left: 120px !important;
    }

    .px-sm-s {
        padding-inline: 12px !important;
    }

    .px-sm-m {
        padding-inline: 20px !important;
    }

    .px-sm-lg {
        padding-inline: 40px !important;
    }

    .px-sm-xl {
        padding-inline: 60px !important;
    }

    .px-sm-xxl {
        padding-inline: 80px !important;
    }

    .px-sm-xxxl {
        padding-inline: 120px !important;
    }

    .py-sm-s {
        padding-block: 12px !important;
    }

    .py-sm-m {
        padding-block: 20px !important;
    }

    .py-sm-lg {
        padding-block: 40px !important;
    }

    .py-sm-xl {
        padding-block: 60px !important;
    }

    .py-sm-xxl {
        padding-block: 80px !important;
    }

    .py-sm-xxxl {
        padding-block: 120px !important;
    }

    .m-sm-s {
        margin: 12px !important;
    }

    .m-sm-m {
        margin: 20px !important;
    }

    .m-sm-lg {
        margin: 40px !important;
    }

    .m-sm-xl {
        margin: 60px !important;
    }

    .m-sm-xxl {
        margin: 80px !important;
    }

    .m-sm-xxxl {
        margin: 120px !important;
    }

    .mt-sm-s {
        margin-top: 12px !important;
    }

    .mt-sm-m {
        margin-top: 20px !important;
    }

    .mt-sm-lg {
        margin-top: 40px !important;
    }

    .mt-sm-xl {
        margin-top: 60px !important;
    }

    .mt-sm-xxl {
        margin-top: 80px !important;
    }

    .mt-sm-xxxl {
        margin-top: 120px !important;
    }

    .mb-sm-s {
        margin-bottom: 12px !important;
    }

    .mb-sm-m {
        margin-bottom: 20px !important;
    }

    .mb-sm-lg {
        margin-bottom: 40px !important;
    }

    .mb-sm-xl {
        margin-bottom: 60px !important;
    }

    .mb-sm-xxl {
        margin-bottom: 80px !important;
    }

    .mb-sm-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-sm-s {
        margin-inline: 12px !important;
    }

    .mx-sm-m {
        margin-inline: 20px !important;
    }

    .mx-sm-lg {
        margin-inline: 40px !important;
    }

    .mx-sm-xl {
        margin-inline: 60px !important;
    }

    .mx-sm-xxl {
        margin-inline: 80px !important;
    }

    .mx-sm-xxxl {
        margin-inline: 120px !important;
    }

    .my-sm-s {
        margin-block: 12px !important;
    }

    .my-sm-m {
        margin-block: 20px !important;
    }

    .my-sm-lg {
        margin-block: 40px !important;
    }

    .my-sm-xl {
        margin-block: 60px !important;
    }

    .my-sm-xxl {
        margin-block: 80px !important;
    }

    .my-sm-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-sm-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-sm-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-sm-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-sm-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-sm-n5 {
        margin-top: -3rem !important;
    }

    .position-sm-static {
        position: static !important;
    }

    .position-sm-relative {
        position: relative !important;
    }

    .position-sm-absolute {
        position: absolute !important;
    }

    .position-sm-fixed {
        position: fixed !important;
    }

    .position-sm-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@media (min-width: 768px) {
    .rounded-md-s {
        border-radius: 12px !important;
    }

    .rounded-md-m {
        border-radius: 20px !important;
    }

    .rounded-md-lg {
        border-radius: 40px !important;
    }

    .rounded-md-xl {
        border-radius: 60px !important;
    }

    .rounded-md-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-md-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-md-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-md-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-md-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-md-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-md-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-md-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-md-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-md-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-md-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-md-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-md-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-md-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-md-s {
        gap: 12px !important;
    }

    .gap-md-m {
        gap: 20px !important;
    }

    .gap-md-lg {
        gap: 40px !important;
    }

    .gap-md-xl {
        gap: 60px !important;
    }

    .gap-md-xxl {
        gap: 80px !important;
    }

    .gap-md-xxxl {
        gap: 120px !important;
    }

    .column-gap-md-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-md-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-md-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-md-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-md-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-md-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-md-s {
        row-gap: 12px !important;
    }

    .row-gap-md-m {
        row-gap: 20px !important;
    }

    .row-gap-md-lg {
        row-gap: 40px !important;
    }

    .row-gap-md-xl {
        row-gap: 60px !important;
    }

    .row-gap-md-xxl {
        row-gap: 80px !important;
    }

    .row-gap-md-xxxl {
        row-gap: 120px !important;
    }

    .p-md-s {
        padding: 12px !important;
    }

    .p-md-m {
        padding: 20px !important;
    }

    .p-md-lg {
        padding: 40px !important;
    }

    .p-md-xl {
        padding: 60px !important;
    }

    .p-md-xxl {
        padding: 80px !important;
    }

    .p-md-xxxl {
        padding: 120px !important;
    }

    .pt-md-s {
        padding-top: 12px !important;
    }

    .pt-md-m {
        padding-top: 20px !important;
    }

    .pt-md-lg {
        padding-top: 40px !important;
    }

    .pt-md-xl {
        padding-top: 60px !important;
    }

    .pt-md-xxl {
        padding-top: 80px !important;
    }

    .pt-md-xxxl {
        padding-top: 120px !important;
    }

    .pb-md-s {
        padding-bottom: 12px !important;
    }

    .pb-md-m {
        padding-bottom: 20px !important;
    }

    .pb-md-lg {
        padding-bottom: 40px !important;
    }

    .pb-md-xl {
        padding-bottom: 60px !important;
    }

    .pb-md-xxl {
        padding-bottom: 80px !important;
    }

    .pb-md-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-md-s {
        padding-right: 12px !important;
    }

    .pe-md-m {
        padding-right: 20px !important;
    }

    .pe-md-lg {
        padding-right: 40px !important;
    }

    .pe-md-xl {
        padding-right: 60px !important;
    }

    .pe-md-xxl {
        padding-right: 80px !important;
    }

    .pe-md-xxxl {
        padding-right: 120px !important;
    }

    .ps-md-s {
        padding-left: 12px !important;
    }

    .ps-md-m {
        padding-left: 20px !important;
    }

    .ps-md-lg {
        padding-left: 40px !important;
    }

    .ps-md-xl {
        padding-left: 60px !important;
    }

    .ps-md-xxl {
        padding-left: 80px !important;
    }

    .ps-md-xxxl {
        padding-left: 120px !important;
    }

    .px-md-s {
        padding-inline: 12px !important;
    }

    .px-md-m {
        padding-inline: 20px !important;
    }

    .px-md-lg {
        padding-inline: 40px !important;
    }

    .px-md-xl {
        padding-inline: 60px !important;
    }

    .px-md-xxl {
        padding-inline: 80px !important;
    }

    .px-md-xxxl {
        padding-inline: 120px !important;
    }

    .py-md-s {
        padding-block: 12px !important;
    }

    .py-md-m {
        padding-block: 20px !important;
    }

    .py-md-lg {
        padding-block: 40px !important;
    }

    .py-md-xl {
        padding-block: 60px !important;
    }

    .py-md-xxl {
        padding-block: 80px !important;
    }

    .py-md-xxxl {
        padding-block: 120px !important;
    }

    .m-md-s {
        margin: 12px !important;
    }

    .m-md-m {
        margin: 20px !important;
    }

    .m-md-lg {
        margin: 40px !important;
    }

    .m-md-xl {
        margin: 60px !important;
    }

    .m-md-xxl {
        margin: 80px !important;
    }

    .m-md-xxxl {
        margin: 120px !important;
    }

    .mt-md-s {
        margin-top: 12px !important;
    }

    .mt-md-m {
        margin-top: 20px !important;
    }

    .mt-md-lg {
        margin-top: 40px !important;
    }

    .mt-md-xl {
        margin-top: 60px !important;
    }

    .mt-md-xxl {
        margin-top: 80px !important;
    }

    .mt-md-xxxl {
        margin-top: 120px !important;
    }

    .mb-md-s {
        margin-bottom: 12px !important;
    }

    .mb-md-m {
        margin-bottom: 20px !important;
    }

    .mb-md-lg {
        margin-bottom: 40px !important;
    }

    .mb-md-xl {
        margin-bottom: 60px !important;
    }

    .mb-md-xxl {
        margin-bottom: 80px !important;
    }

    .mb-md-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-md-s {
        margin-inline: 12px !important;
    }

    .mx-md-m {
        margin-inline: 20px !important;
    }

    .mx-md-lg {
        margin-inline: 40px !important;
    }

    .mx-md-xl {
        margin-inline: 60px !important;
    }

    .mx-md-xxl {
        margin-inline: 80px !important;
    }

    .mx-md-xxxl {
        margin-inline: 120px !important;
    }

    .my-md-s {
        margin-block: 12px !important;
    }

    .my-md-m {
        margin-block: 20px !important;
    }

    .my-md-lg {
        margin-block: 40px !important;
    }

    .my-md-xl {
        margin-block: 60px !important;
    }

    .my-md-xxl {
        margin-block: 80px !important;
    }

    .my-md-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-md-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-md-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-md-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-md-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-md-n5 {
        margin-top: -3rem !important;
    }

    .position-md-static {
        position: static !important;
    }

    .position-md-relative {
        position: relative !important;
    }

    .position-md-absolute {
        position: absolute !important;
    }

    .position-md-fixed {
        position: fixed !important;
    }

    .position-md-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@media (min-width: 992px) {
    .rounded-lg-s {
        border-radius: 12px !important;
    }

    .rounded-lg-m {
        border-radius: 20px !important;
    }

    .rounded-lg-lg {
        border-radius: 40px !important;
    }

    .rounded-lg-xl {
        border-radius: 60px !important;
    }

    .rounded-lg-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-lg-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-lg-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-lg-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-lg-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-lg-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-lg-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-lg-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-lg-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-lg-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-lg-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-lg-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-lg-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-lg-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-lg-s {
        gap: 12px !important;
    }

    .gap-lg-m {
        gap: 20px !important;
    }

    .gap-lg-lg {
        gap: 40px !important;
    }

    .gap-lg-xl {
        gap: 60px !important;
    }

    .gap-lg-xxl {
        gap: 80px !important;
    }

    .gap-lg-xxxl {
        gap: 120px !important;
    }

    .column-gap-lg-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-lg-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-lg-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-lg-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-lg-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-lg-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-lg-s {
        row-gap: 12px !important;
    }

    .row-gap-lg-m {
        row-gap: 20px !important;
    }

    .row-gap-lg-lg {
        row-gap: 40px !important;
    }

    .row-gap-lg-xl {
        row-gap: 60px !important;
    }

    .row-gap-lg-xxl {
        row-gap: 80px !important;
    }

    .row-gap-lg-xxxl {
        row-gap: 120px !important;
    }

    .p-lg-s {
        padding: 12px !important;
    }

    .p-lg-m {
        padding: 20px !important;
    }

    .p-lg-lg {
        padding: 40px !important;
    }

    .p-lg-xl {
        padding: 60px !important;
    }

    .p-lg-xxl {
        padding: 80px !important;
    }

    .p-lg-xxxl {
        padding: 120px !important;
    }

    .pt-lg-s {
        padding-top: 12px !important;
    }

    .pt-lg-m {
        padding-top: 20px !important;
    }

    .pt-lg-lg {
        padding-top: 40px !important;
    }

    .pt-lg-xl {
        padding-top: 60px !important;
    }

    .pt-lg-xxl {
        padding-top: 80px !important;
    }

    .pt-lg-xxxl {
        padding-top: 120px !important;
    }

    .pb-lg-s {
        padding-bottom: 12px !important;
    }

    .pb-lg-m {
        padding-bottom: 20px !important;
    }

    .pb-lg-lg {
        padding-bottom: 40px !important;
    }

    .pb-lg-xl {
        padding-bottom: 60px !important;
    }

    .pb-lg-xxl {
        padding-bottom: 80px !important;
    }

    .pb-lg-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-lg-s {
        padding-right: 12px !important;
    }

    .pe-lg-m {
        padding-right: 20px !important;
    }

    .pe-lg-lg {
        padding-right: 40px !important;
    }

    .pe-lg-xl {
        padding-right: 60px !important;
    }

    .pe-lg-xxl {
        padding-right: 80px !important;
    }

    .pe-lg-xxxl {
        padding-right: 120px !important;
    }

    .ps-lg-s {
        padding-left: 12px !important;
    }

    .ps-lg-m {
        padding-left: 20px !important;
    }

    .ps-lg-lg {
        padding-left: 40px !important;
    }

    .ps-lg-xl {
        padding-left: 60px !important;
    }

    .ps-lg-xxl {
        padding-left: 80px !important;
    }

    .ps-lg-xxxl {
        padding-left: 120px !important;
    }

    .px-lg-s {
        padding-inline: 12px !important;
    }

    .px-lg-m {
        padding-inline: 20px !important;
    }

    .px-lg-lg {
        padding-inline: 40px !important;
    }

    .px-lg-xl {
        padding-inline: 60px !important;
    }

    .px-lg-xxl {
        padding-inline: 80px !important;
    }

    .px-lg-xxxl {
        padding-inline: 120px !important;
    }

    .py-lg-s {
        padding-block: 12px !important;
    }

    .py-lg-m {
        padding-block: 20px !important;
    }

    .py-lg-lg {
        padding-block: 40px !important;
    }

    .py-lg-xl {
        padding-block: 60px !important;
    }

    .py-lg-xxl {
        padding-block: 80px !important;
    }

    .py-lg-xxxl {
        padding-block: 120px !important;
    }

    .m-lg-s {
        margin: 12px !important;
    }

    .m-lg-m {
        margin: 20px !important;
    }

    .m-lg-lg {
        margin: 40px !important;
    }

    .m-lg-xl {
        margin: 60px !important;
    }

    .m-lg-xxl {
        margin: 80px !important;
    }

    .m-lg-xxxl {
        margin: 120px !important;
    }

    .mt-lg-s {
        margin-top: 12px !important;
    }

    .mt-lg-m {
        margin-top: 20px !important;
    }

    .mt-lg-lg {
        margin-top: 40px !important;
    }

    .mt-lg-xl {
        margin-top: 60px !important;
    }

    .mt-lg-xxl {
        margin-top: 80px !important;
    }

    .mt-lg-xxxl {
        margin-top: 120px !important;
    }

    .mb-lg-s {
        margin-bottom: 12px !important;
    }

    .mb-lg-m {
        margin-bottom: 20px !important;
    }

    .mb-lg-lg {
        margin-bottom: 40px !important;
    }

    .mb-lg-xl {
        margin-bottom: 60px !important;
    }

    .mb-lg-xxl {
        margin-bottom: 80px !important;
    }

    .mb-lg-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-lg-s {
        margin-inline: 12px !important;
    }

    .mx-lg-m {
        margin-inline: 20px !important;
    }

    .mx-lg-lg {
        margin-inline: 40px !important;
    }

    .mx-lg-xl {
        margin-inline: 60px !important;
    }

    .mx-lg-xxl {
        margin-inline: 80px !important;
    }

    .mx-lg-xxxl {
        margin-inline: 120px !important;
    }

    .my-lg-s {
        margin-block: 12px !important;
    }

    .my-lg-m {
        margin-block: 20px !important;
    }

    .my-lg-lg {
        margin-block: 40px !important;
    }

    .my-lg-xl {
        margin-block: 60px !important;
    }

    .my-lg-xxl {
        margin-block: 80px !important;
    }

    .my-lg-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-lg-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-lg-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-lg-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-lg-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-lg-n5 {
        margin-top: -3rem !important;
    }

    .position-lg-static {
        position: static !important;
    }

    .position-lg-relative {
        position: relative !important;
    }

    .position-lg-absolute {
        position: absolute !important;
    }

    .position-lg-fixed {
        position: fixed !important;
    }

    .position-lg-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@media (min-width: 1200px) {
    .rounded-xl-s {
        border-radius: 12px !important;
    }

    .rounded-xl-m {
        border-radius: 20px !important;
    }

    .rounded-xl-lg {
        border-radius: 40px !important;
    }

    .rounded-xl-xl {
        border-radius: 60px !important;
    }

    .rounded-xl-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-xl-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-xl-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-xl-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-xl-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-xl-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-xl-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-xl-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-xl-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-xl-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-xl-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-xl-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-xl-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-xl-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-xl-s {
        gap: 12px !important;
    }

    .gap-xl-m {
        gap: 20px !important;
    }

    .gap-xl-lg {
        gap: 40px !important;
    }

    .gap-xl-xl {
        gap: 60px !important;
    }

    .gap-xl-xxl {
        gap: 80px !important;
    }

    .gap-xl-xxxl {
        gap: 120px !important;
    }

    .column-gap-xl-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-xl-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-xl-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-xl-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-xl-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-xl-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-xl-s {
        row-gap: 12px !important;
    }

    .row-gap-xl-m {
        row-gap: 20px !important;
    }

    .row-gap-xl-lg {
        row-gap: 40px !important;
    }

    .row-gap-xl-xl {
        row-gap: 60px !important;
    }

    .row-gap-xl-xxl {
        row-gap: 80px !important;
    }

    .row-gap-xl-xxxl {
        row-gap: 120px !important;
    }

    .p-xl-s {
        padding: 12px !important;
    }

    .p-xl-m {
        padding: 20px !important;
    }

    .p-xl-lg {
        padding: 40px !important;
    }

    .p-xl-xl {
        padding: 60px !important;
    }

    .p-xl-xxl {
        padding: 80px !important;
    }

    .p-xl-xxxl {
        padding: 120px !important;
    }

    .pt-xl-s {
        padding-top: 12px !important;
    }

    .pt-xl-m {
        padding-top: 20px !important;
    }

    .pt-xl-lg {
        padding-top: 40px !important;
    }

    .pt-xl-xl {
        padding-top: 60px !important;
    }

    .pt-xl-xxl {
        padding-top: 80px !important;
    }

    .pt-xl-xxxl {
        padding-top: 120px !important;
    }

    .pb-xl-s {
        padding-bottom: 12px !important;
    }

    .pb-xl-m {
        padding-bottom: 20px !important;
    }

    .pb-xl-lg {
        padding-bottom: 40px !important;
    }

    .pb-xl-xl {
        padding-bottom: 60px !important;
    }

    .pb-xl-xxl {
        padding-bottom: 80px !important;
    }

    .pb-xl-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-xl-s {
        padding-right: 12px !important;
    }

    .pe-xl-m {
        padding-right: 20px !important;
    }

    .pe-xl-lg {
        padding-right: 40px !important;
    }

    .pe-xl-xl {
        padding-right: 60px !important;
    }

    .pe-xl-xxl {
        padding-right: 80px !important;
    }

    .pe-xl-xxxl {
        padding-right: 120px !important;
    }

    .ps-xl-s {
        padding-left: 12px !important;
    }

    .ps-xl-m {
        padding-left: 20px !important;
    }

    .ps-xl-lg {
        padding-left: 40px !important;
    }

    .ps-xl-xl {
        padding-left: 60px !important;
    }

    .ps-xl-xxl {
        padding-left: 80px !important;
    }

    .ps-xl-xxxl {
        padding-left: 120px !important;
    }

    .px-xl-s {
        padding-inline: 12px !important;
    }

    .px-xl-m {
        padding-inline: 20px !important;
    }

    .px-xl-lg {
        padding-inline: 40px !important;
    }

    .px-xl-xl {
        padding-inline: 60px !important;
    }

    .px-xl-xxl {
        padding-inline: 80px !important;
    }

    .px-xl-xxxl {
        padding-inline: 120px !important;
    }

    .py-xl-s {
        padding-block: 12px !important;
    }

    .py-xl-m {
        padding-block: 20px !important;
    }

    .py-xl-lg {
        padding-block: 40px !important;
    }

    .py-xl-xl {
        padding-block: 60px !important;
    }

    .py-xl-xxl {
        padding-block: 80px !important;
    }

    .py-xl-xxxl {
        padding-block: 120px !important;
    }

    .m-xl-s {
        margin: 12px !important;
    }

    .m-xl-m {
        margin: 20px !important;
    }

    .m-xl-lg {
        margin: 40px !important;
    }

    .m-xl-xl {
        margin: 60px !important;
    }

    .m-xl-xxl {
        margin: 80px !important;
    }

    .m-xl-xxxl {
        margin: 120px !important;
    }

    .mt-xl-s {
        margin-top: 12px !important;
    }

    .mt-xl-m {
        margin-top: 20px !important;
    }

    .mt-xl-lg {
        margin-top: 40px !important;
    }

    .mt-xl-xl {
        margin-top: 60px !important;
    }

    .mt-xl-xxl {
        margin-top: 80px !important;
    }

    .mt-xl-xxxl {
        margin-top: 120px !important;
    }

    .mb-xl-s {
        margin-bottom: 12px !important;
    }

    .mb-xl-m {
        margin-bottom: 20px !important;
    }

    .mb-xl-lg {
        margin-bottom: 40px !important;
    }

    .mb-xl-xl {
        margin-bottom: 60px !important;
    }

    .mb-xl-xxl {
        margin-bottom: 80px !important;
    }

    .mb-xl-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-xl-s {
        margin-inline: 12px !important;
    }

    .mx-xl-m {
        margin-inline: 20px !important;
    }

    .mx-xl-lg {
        margin-inline: 40px !important;
    }

    .mx-xl-xl {
        margin-inline: 60px !important;
    }

    .mx-xl-xxl {
        margin-inline: 80px !important;
    }

    .mx-xl-xxxl {
        margin-inline: 120px !important;
    }

    .my-xl-s {
        margin-block: 12px !important;
    }

    .my-xl-m {
        margin-block: 20px !important;
    }

    .my-xl-lg {
        margin-block: 40px !important;
    }

    .my-xl-xl {
        margin-block: 60px !important;
    }

    .my-xl-xxl {
        margin-block: 80px !important;
    }

    .my-xl-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-xl-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-xl-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-xl-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-xl-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-xl-n5 {
        margin-top: -3rem !important;
    }

    .position-xl-static {
        position: static !important;
    }

    .position-xl-relative {
        position: relative !important;
    }

    .position-xl-absolute {
        position: absolute !important;
    }

    .position-xl-fixed {
        position: fixed !important;
    }

    .position-xl-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@media (min-width: 1400px) {
    .rounded-xxl-s {
        border-radius: 12px !important;
    }

    .rounded-xxl-m {
        border-radius: 20px !important;
    }

    .rounded-xxl-lg {
        border-radius: 40px !important;
    }

    .rounded-xxl-xl {
        border-radius: 60px !important;
    }

    .rounded-xxl-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-xxl-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-xxl-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-xxl-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-xxl-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-xxl-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-xxl-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-xxl-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-xxl-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-xxl-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-xxl-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-xxl-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-xxl-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-xxl-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-xxl-s {
        gap: 12px !important;
    }

    .gap-xxl-m {
        gap: 20px !important;
    }

    .gap-xxl-lg {
        gap: 40px !important;
    }

    .gap-xxl-xl {
        gap: 60px !important;
    }

    .gap-xxl-xxl {
        gap: 80px !important;
    }

    .gap-xxl-xxxl {
        gap: 120px !important;
    }

    .column-gap-xxl-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-xxl-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-xxl-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-xxl-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-xxl-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-xxl-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-xxl-s {
        row-gap: 12px !important;
    }

    .row-gap-xxl-m {
        row-gap: 20px !important;
    }

    .row-gap-xxl-lg {
        row-gap: 40px !important;
    }

    .row-gap-xxl-xl {
        row-gap: 60px !important;
    }

    .row-gap-xxl-xxl {
        row-gap: 80px !important;
    }

    .row-gap-xxl-xxxl {
        row-gap: 120px !important;
    }

    .p-xxl-s {
        padding: 12px !important;
    }

    .p-xxl-m {
        padding: 20px !important;
    }

    .p-xxl-lg {
        padding: 40px !important;
    }

    .p-xxl-xl {
        padding: 60px !important;
    }

    .p-xxl-xxl {
        padding: 80px !important;
    }

    .p-xxl-xxxl {
        padding: 120px !important;
    }

    .pt-xxl-s {
        padding-top: 12px !important;
    }

    .pt-xxl-m {
        padding-top: 20px !important;
    }

    .pt-xxl-lg {
        padding-top: 40px !important;
    }

    .pt-xxl-xl {
        padding-top: 60px !important;
    }

    .pt-xxl-xxl {
        padding-top: 80px !important;
    }

    .pt-xxl-xxxl {
        padding-top: 120px !important;
    }

    .pb-xxl-s {
        padding-bottom: 12px !important;
    }

    .pb-xxl-m {
        padding-bottom: 20px !important;
    }

    .pb-xxl-lg {
        padding-bottom: 40px !important;
    }

    .pb-xxl-xl {
        padding-bottom: 60px !important;
    }

    .pb-xxl-xxl {
        padding-bottom: 80px !important;
    }

    .pb-xxl-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-xxl-s {
        padding-right: 12px !important;
    }

    .pe-xxl-m {
        padding-right: 20px !important;
    }

    .pe-xxl-lg {
        padding-right: 40px !important;
    }

    .pe-xxl-xl {
        padding-right: 60px !important;
    }

    .pe-xxl-xxl {
        padding-right: 80px !important;
    }

    .pe-xxl-xxxl {
        padding-right: 120px !important;
    }

    .ps-xxl-s {
        padding-left: 12px !important;
    }

    .ps-xxl-m {
        padding-left: 20px !important;
    }

    .ps-xxl-lg {
        padding-left: 40px !important;
    }

    .ps-xxl-xl {
        padding-left: 60px !important;
    }

    .ps-xxl-xxl {
        padding-left: 80px !important;
    }

    .ps-xxl-xxxl {
        padding-left: 120px !important;
    }

    .px-xxl-s {
        padding-inline: 12px !important;
    }

    .px-xxl-m {
        padding-inline: 20px !important;
    }

    .px-xxl-lg {
        padding-inline: 40px !important;
    }

    .px-xxl-xl {
        padding-inline: 60px !important;
    }

    .px-xxl-xxl {
        padding-inline: 80px !important;
    }

    .px-xxl-xxxl {
        padding-inline: 120px !important;
    }

    .py-xxl-s {
        padding-block: 12px !important;
    }

    .py-xxl-m {
        padding-block: 20px !important;
    }

    .py-xxl-lg {
        padding-block: 40px !important;
    }

    .py-xxl-xl {
        padding-block: 60px !important;
    }

    .py-xxl-xxl {
        padding-block: 80px !important;
    }

    .py-xxl-xxxl {
        padding-block: 120px !important;
    }

    .m-xxl-s {
        margin: 12px !important;
    }

    .m-xxl-m {
        margin: 20px !important;
    }

    .m-xxl-lg {
        margin: 40px !important;
    }

    .m-xxl-xl {
        margin: 60px !important;
    }

    .m-xxl-xxl {
        margin: 80px !important;
    }

    .m-xxl-xxxl {
        margin: 120px !important;
    }

    .mt-xxl-s {
        margin-top: 12px !important;
    }

    .mt-xxl-m {
        margin-top: 20px !important;
    }

    .mt-xxl-lg {
        margin-top: 40px !important;
    }

    .mt-xxl-xl {
        margin-top: 60px !important;
    }

    .mt-xxl-xxl {
        margin-top: 80px !important;
    }

    .mt-xxl-xxxl {
        margin-top: 120px !important;
    }

    .mb-xxl-s {
        margin-bottom: 12px !important;
    }

    .mb-xxl-m {
        margin-bottom: 20px !important;
    }

    .mb-xxl-lg {
        margin-bottom: 40px !important;
    }

    .mb-xxl-xl {
        margin-bottom: 60px !important;
    }

    .mb-xxl-xxl {
        margin-bottom: 80px !important;
    }

    .mb-xxl-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-xxl-s {
        margin-inline: 12px !important;
    }

    .mx-xxl-m {
        margin-inline: 20px !important;
    }

    .mx-xxl-lg {
        margin-inline: 40px !important;
    }

    .mx-xxl-xl {
        margin-inline: 60px !important;
    }

    .mx-xxl-xxl {
        margin-inline: 80px !important;
    }

    .mx-xxl-xxxl {
        margin-inline: 120px !important;
    }

    .my-xxl-s {
        margin-block: 12px !important;
    }

    .my-xxl-m {
        margin-block: 20px !important;
    }

    .my-xxl-lg {
        margin-block: 40px !important;
    }

    .my-xxl-xl {
        margin-block: 60px !important;
    }

    .my-xxl-xxl {
        margin-block: 80px !important;
    }

    .my-xxl-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-xxl-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-xxl-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-xxl-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-xxl-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-xxl-n5 {
        margin-top: -3rem !important;
    }

    .position-xxl-static {
        position: static !important;
    }

    .position-xxl-relative {
        position: relative !important;
    }

    .position-xxl-absolute {
        position: absolute !important;
    }

    .position-xxl-fixed {
        position: fixed !important;
    }

    .position-xxl-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

@media (min-width: 1920px) {
    .rounded-xxxl-s {
        border-radius: 12px !important;
    }

    .rounded-xxxl-m {
        border-radius: 20px !important;
    }

    .rounded-xxxl-lg {
        border-radius: 40px !important;
    }

    .rounded-xxxl-xl {
        border-radius: 60px !important;
    }

    .rounded-xxxl-xxl {
        border-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-xxxl-xxxl {
        border-radius: 120px !important;
    }

    .rounded-bottom-xxxl-s {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .rounded-bottom-xxxl-m {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .rounded-bottom-xxxl-lg {
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
    }

    .rounded-bottom-xxxl-xl {
        border-bottom-left-radius: 60px !important;
        border-bottom-right-radius: 60px !important;
    }

    .rounded-bottom-xxxl-xxl {
        border-bottom-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-bottom-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-bottom-xxxl-xxxl {
        border-bottom-left-radius: 120px !important;
        border-bottom-right-radius: 120px !important;
    }

    .rounded-top-xxxl-s {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .rounded-top-xxxl-m {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    .rounded-top-xxxl-lg {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }

    .rounded-top-xxxl-xl {
        border-top-left-radius: 60px !important;
        border-top-right-radius: 60px !important;
    }

    .rounded-top-xxxl-xxl {
        border-top-left-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
        border-top-right-radius: clamp(2.5rem, 10.42vw, 5rem) !important;
    }

    .rounded-top-xxxl-xxxl {
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
    }

    .gap-xxxl-s {
        gap: 12px !important;
    }

    .gap-xxxl-m {
        gap: 20px !important;
    }

    .gap-xxxl-lg {
        gap: 40px !important;
    }

    .gap-xxxl-xl {
        gap: 60px !important;
    }

    .gap-xxxl-xxl {
        gap: 80px !important;
    }

    .gap-xxxl-xxxl {
        gap: 120px !important;
    }

    .column-gap-xxxl-s {
        -webkit-column-gap: 12px !important;
        -moz-column-gap: 12px !important;
        column-gap: 12px !important;
    }

    .column-gap-xxxl-m {
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
    }

    .column-gap-xxxl-lg {
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .column-gap-xxxl-xl {
        -webkit-column-gap: 60px !important;
        -moz-column-gap: 60px !important;
        column-gap: 60px !important;
    }

    .column-gap-xxxl-xxl {
        -webkit-column-gap: 80px !important;
        -moz-column-gap: 80px !important;
        column-gap: 80px !important;
    }

    .column-gap-xxxl-xxxl {
        -webkit-column-gap: 120px !important;
        -moz-column-gap: 120px !important;
        column-gap: 120px !important;
    }

    .row-gap-xxxl-s {
        row-gap: 12px !important;
    }

    .row-gap-xxxl-m {
        row-gap: 20px !important;
    }

    .row-gap-xxxl-lg {
        row-gap: 40px !important;
    }

    .row-gap-xxxl-xl {
        row-gap: 60px !important;
    }

    .row-gap-xxxl-xxl {
        row-gap: 80px !important;
    }

    .row-gap-xxxl-xxxl {
        row-gap: 120px !important;
    }

    .p-xxxl-s {
        padding: 12px !important;
    }

    .p-xxxl-m {
        padding: 20px !important;
    }

    .p-xxxl-lg {
        padding: 40px !important;
    }

    .p-xxxl-xl {
        padding: 60px !important;
    }

    .p-xxxl-xxl {
        padding: 80px !important;
    }

    .p-xxxl-xxxl {
        padding: 120px !important;
    }

    .pt-xxxl-s {
        padding-top: 12px !important;
    }

    .pt-xxxl-m {
        padding-top: 20px !important;
    }

    .pt-xxxl-lg {
        padding-top: 40px !important;
    }

    .pt-xxxl-xl {
        padding-top: 60px !important;
    }

    .pt-xxxl-xxl {
        padding-top: 80px !important;
    }

    .pt-xxxl-xxxl {
        padding-top: 120px !important;
    }

    .pb-xxxl-s {
        padding-bottom: 12px !important;
    }

    .pb-xxxl-m {
        padding-bottom: 20px !important;
    }

    .pb-xxxl-lg {
        padding-bottom: 40px !important;
    }

    .pb-xxxl-xl {
        padding-bottom: 60px !important;
    }

    .pb-xxxl-xxl {
        padding-bottom: 80px !important;
    }

    .pb-xxxl-xxxl {
        padding-bottom: 120px !important;
    }

    .pe-xxxl-s {
        padding-right: 12px !important;
    }

    .pe-xxxl-m {
        padding-right: 20px !important;
    }

    .pe-xxxl-lg {
        padding-right: 40px !important;
    }

    .pe-xxxl-xl {
        padding-right: 60px !important;
    }

    .pe-xxxl-xxl {
        padding-right: 80px !important;
    }

    .pe-xxxl-xxxl {
        padding-right: 120px !important;
    }

    .ps-xxxl-s {
        padding-left: 12px !important;
    }

    .ps-xxxl-m {
        padding-left: 20px !important;
    }

    .ps-xxxl-lg {
        padding-left: 40px !important;
    }

    .ps-xxxl-xl {
        padding-left: 60px !important;
    }

    .ps-xxxl-xxl {
        padding-left: 80px !important;
    }

    .ps-xxxl-xxxl {
        padding-left: 120px !important;
    }

    .px-xxxl-s {
        padding-inline: 12px !important;
    }

    .px-xxxl-m {
        padding-inline: 20px !important;
    }

    .px-xxxl-lg {
        padding-inline: 40px !important;
    }

    .px-xxxl-xl {
        padding-inline: 60px !important;
    }

    .px-xxxl-xxl {
        padding-inline: 80px !important;
    }

    .px-xxxl-xxxl {
        padding-inline: 120px !important;
    }

    .py-xxxl-s {
        padding-block: 12px !important;
    }

    .py-xxxl-m {
        padding-block: 20px !important;
    }

    .py-xxxl-lg {
        padding-block: 40px !important;
    }

    .py-xxxl-xl {
        padding-block: 60px !important;
    }

    .py-xxxl-xxl {
        padding-block: 80px !important;
    }

    .py-xxxl-xxxl {
        padding-block: 120px !important;
    }

    .m-xxxl-s {
        margin: 12px !important;
    }

    .m-xxxl-m {
        margin: 20px !important;
    }

    .m-xxxl-lg {
        margin: 40px !important;
    }

    .m-xxxl-xl {
        margin: 60px !important;
    }

    .m-xxxl-xxl {
        margin: 80px !important;
    }

    .m-xxxl-xxxl {
        margin: 120px !important;
    }

    .mt-xxxl-s {
        margin-top: 12px !important;
    }

    .mt-xxxl-m {
        margin-top: 20px !important;
    }

    .mt-xxxl-lg {
        margin-top: 40px !important;
    }

    .mt-xxxl-xl {
        margin-top: 60px !important;
    }

    .mt-xxxl-xxl {
        margin-top: 80px !important;
    }

    .mt-xxxl-xxxl {
        margin-top: 120px !important;
    }

    .mb-xxxl-s {
        margin-bottom: 12px !important;
    }

    .mb-xxxl-m {
        margin-bottom: 20px !important;
    }

    .mb-xxxl-lg {
        margin-bottom: 40px !important;
    }

    .mb-xxxl-xl {
        margin-bottom: 60px !important;
    }

    .mb-xxxl-xxl {
        margin-bottom: 80px !important;
    }

    .mb-xxxl-xxxl {
        margin-bottom: 120px !important;
    }

    .mx-xxxl-s {
        margin-inline: 12px !important;
    }

    .mx-xxxl-m {
        margin-inline: 20px !important;
    }

    .mx-xxxl-lg {
        margin-inline: 40px !important;
    }

    .mx-xxxl-xl {
        margin-inline: 60px !important;
    }

    .mx-xxxl-xxl {
        margin-inline: 80px !important;
    }

    .mx-xxxl-xxxl {
        margin-inline: 120px !important;
    }

    .my-xxxl-s {
        margin-block: 12px !important;
    }

    .my-xxxl-m {
        margin-block: 20px !important;
    }

    .my-xxxl-lg {
        margin-block: 40px !important;
    }

    .my-xxxl-xl {
        margin-block: 60px !important;
    }

    .my-xxxl-xxl {
        margin-block: 80px !important;
    }

    .my-xxxl-xxxl {
        margin-block: 120px !important;
    }

    .mt-n-xxxl-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n-xxxl-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n-xxxl-n3 {
        margin-top: -1rem !important;
    }

    .mt-n-xxxl-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n-xxxl-n5 {
        margin-top: -3rem !important;
    }

    .position-xxxl-static {
        position: static !important;
    }

    .position-xxxl-relative {
        position: relative !important;
    }

    .position-xxxl-absolute {
        position: absolute !important;
    }

    .position-xxxl-fixed {
        position: fixed !important;
    }

    .position-xxxl-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

/*# sourceMappingURL=main.css.map */