@import url("searchPopup.css");
@import url("language.css");

#think_page_trace,#think_page_trace_open{
    display: none;
}

:root {
    --main-color: #015db2;
    --red-color: #D83B34;
    --orange-color-2: #EB5310;
    --orange-color: #ff7200;
    --light-blue-color: rgb(229 234 239);
    --deep-blue-color: #0075C2;
    --ul-gray2: #D2D2D1;
}

* {
    transition: all;
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: border-box;
}

body,
div,
ul,
li,
section {
    box-sizing: border-box;
}

a,
button,
img,
svg path {
    transition: 0.4s ease;
}

a {
    text-decoration: none;
    display: inline-block;
    color: var(--black);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

body {
    position: relative;
}

.main-container {
    overflow: hidden;
}

.my-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;

    .my-container {
        width: 1920px;
        padding: 0 80px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .section-tip {
        color: var(--orange-color);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        /* &::before {
            content: "";
            width: clamp(9px, 0.63vw, 12px);
            aspect-ratio: 12 / 13;
            background-color: var(--orange-color);
            display: inline-block;
            margin-right: clamp(5px, 0.42vw, 8px);
            clip-path: polygon(50.201% 100%, 50.201% 100%, 43.516% 92.661%, 36.628% 85.05%, 29.752% 77.216%, 23.104% 69.205%, 16.897% 61.063%, 11.346% 52.837%, 6.666% 44.574%, 3.072% 36.321%, 0.778% 28.124%, 0% 20.03%, 0% 20.03%, 1.021% 13.336%, 3.769% 7.773%, 7.928% 3.553%, 13.18% 0.892%, 19.207% 0.001%, 25.692% 1.095%, 32.318% 4.387%, 38.766% 10.091%, 44.72% 18.419%, 49.862% 29.586%, 49.862% 29.586%, 50.588% 26.97%, 51.54% 24.272%, 52.71% 21.543%, 54.089% 18.832%, 55.67% 16.19%, 57.445% 13.667%, 59.404% 11.313%, 61.541% 9.179%, 63.846% 7.315%, 66.312% 5.771%, 66.312% 5.771%, 72.015% 3.441%, 77.848% 2.358%, 83.531% 2.515%, 88.788% 3.906%, 93.341% 6.524%, 96.913% 10.364%, 99.224% 15.42%, 99.998% 21.685%, 98.956% 29.153%, 95.822% 37.818%, 95.822% 37.818%, 93.578% 42.409%, 90.817% 47.291%, 87.538% 52.49%, 83.744% 58.034%, 79.435% 63.947%, 74.612% 70.258%, 69.276% 76.993%, 63.428% 84.177%, 57.069% 91.837%, 50.201% 100%);
        } */

        /* &::before {
            content: "";
            width: 24px;
            height: 24px;
            display: inline-block;
            margin-right: clamp(5px, 0.42vw, 8px);
            background-image: url(/static/image/hotIsland2.png);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        } */
    }
}

.my-section .section-title {
    margin: 0;
    color: var(--deep-blue-color);
    font-size: clamp(30px, 2.52vw, 46px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    padding-bottom: 22px;

    .highlight {
        color: var(--orange-color);
    }
}

.my-section .section-sub-title {
    margin: 0 auto;
    max-width: 680px;
    color: #4e5a70;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.8;
    font-weight: 400;
    text-align: center;
    padding-bottom: 30px;
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-flow: column;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 针对 Webkit 浏览器 (如 Chrome, Safari) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 针对 Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.pc {
    display: flex;
}

.mb {
    display: none !important;
}

.mobile-menu-overlay,
.mobile-menu {
    display: none;
}

/* pc 導航欄 - start */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.header-bottom {
    position: absolute;
    top: 0;
    width: 100%;
}

.header-container {
    width: 100%;
    max-width: 1920px;
    padding: 0 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
}

.header-container {
    background-color: transparent;
}

.header-bottom.sticky {
    .header-container {
        background-color: #ffffff;

        .logo-container::after {
            display: none;
        }

        .logo-container::before {
            background-color: rgba(245, 245, 245, 0.5);
        }
    }
}

.header-bottom-wrapper {
    gap: clamp(22px, 4.2vw, 80px);
    position: relative;
    z-index: 1;
}

.header-bottom-wrapper>* {
    flex-shrink: 0;
}

.header-left-wrapper,
.header-right-wrapper {
    display: flex;
    align-items: center;
}

.header-left-wrapper {
    flex: 1;

    .header-nav-wrapper {
        padding-left: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;

        .menu-item {
            color: var(--main-color);
            font-size: 18px;
            font-weight: bold;
            padding: 26px 0;

            &.active {
                color: var(--orange-color);
            }
        }
    }
}

.header-nav-wrapper .menu-item-has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--main-color);
    cursor: pointer;
    padding: 8px 0;

    &.active {

        .menu-link,
        .menu-arrow {
            color: var(--orange-color);
            border-color: var(--orange-color);
        }
    }
}

.header-nav-wrapper .menu-item-has-children .menu-link {
    color: var(--main-color);
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.header-nav-wrapper .menu-item-has-children .menu-arrow {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
    transform: rotate(45deg);
    margin-left: 8px;
    margin-top: -3px;
    transition: transform 0.3s ease;
}

.header-left-wrapper .header-nav-wrapper .menu-item,
.header-nav-wrapper .menu-item-has-children .menu-link {
    color: #fff;
}

.header-nav-wrapper .menu-item-has-children .menu-arrow {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.header-bottom.sticky {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    .logo-container::before {
        background-color: #f5f5f5;
    }
}

.header-nav-wrapper .menu-item-has-children .sub-nav-pop {
    position: absolute;
    top: calc(100% - 12px);
    left: 50%;
    min-width: 230px;
    background: var(--orange-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    z-index: 200;

    &:before {
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        border-radius: 8px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        z-index: 1;
    }
}

.header-nav-wrapper .menu-item-has-children .sub-nav-item {
    display: block;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
    padding: 10px 30px;
    white-space: normal;
    position: relative;
    z-index: 2;

    &:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.header-nav-wrapper .menu-item-has-children:hover .sub-nav-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.header-nav-wrapper .menu-item-has-children:hover .menu-arrow {
    transform: rotate(225deg);
    margin-top: 2px;
}

.header-actions {
    gap: 14px;
}

.header-action-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    img {
        width: 24px;
        height: 24px;
    }

    .w {
        display: none;
    }

    .b {
        display: block;
    }
}

.header-action-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.action-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
}

.action-icon-search::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    top: 1px;
    left: 1px;
}

.action-icon-search::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 3px;
    background: #fff;
    transform: rotate(45deg);
    right: 0;
    bottom: 2px;
    border-radius: 2px;
}

.action-icon-language::before,
.action-icon-language::after {
    content: "";
    position: absolute;
    border: 2px solid #fff;
    border-radius: 50%;
}

.action-icon-language::before {
    inset: 1px;
}

.action-icon-language::after {
    inset: 1px 6px;
}

.action-icon-language {
    border: 2px solid #fff;
    border-radius: 50%;
}

.action-icon.sm {
    width: 18px;
    height: 18px;
}

.action-icon.sm.action-icon-search::before {
    width: 10px;
    height: 10px;
    border-width: 2px;
}

.action-icon.sm.action-icon-search::after {
    width: 8px;
    height: 2px;
    right: -1px;
    bottom: 1px;
}

.header .logo-container {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    

    .d-inline-block {
        font-size: 13px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;

        &.logo-ma-container {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 10%;
                left: -12px;
                width: 1px;
                height: 80%;
                border-left: 1px dashed rgba(0, 0, 0, 0.2);
                
            }

            span {
                color: var(--main-color);
            }
        }

        &.logo-hot-container {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 10%;
                left: -12px;
                width: 1px;
                height: 80%;
                border-left: 1px dashed rgba(0, 0, 0, 0.2);
                
            }
        }
    }

    img {
        max-height: 58px;

        &.logo-ma {
            max-height: 36px;
        }
    }
}


/* .header .logo-container::before,
.header .logo-container::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(0% - clamp(28px, 1.58vw, 30px));
    bottom: calc(0% - clamp(45px, 3.42vw, 65px));
    right: calc(0% - clamp(20px, 1.58vw, 30px));
    left: calc(0% - clamp(28px, 2.1vw, 40px));
    background-color: #ffffff;
    clip-path: polygon(23.853% -62.128%, 23.853% -62.128%, 25.154% -69.256%, 26.501% -75.412%, 27.924% -80.649%, 29.451% -85.021%, 31.112% -88.582%, 32.938% -91.387%, 34.957% -93.49%, 37.2% -94.944%, 39.695% -95.803%, 42.473% -96.123%, 42.473% -96.123%, 48.384% -94.64%, 53.914% -90.241%, 59.087% -83.422%, 63.931% -74.678%, 68.469% -64.506%, 72.727% -53.401%, 76.73% -41.858%, 80.503% -30.374%, 84.072% -19.444%, 87.461% -9.564%, 87.461% -9.564%, 90.012% -2.284%, 92.484% 5.333%, 94.768% 13.245%, 96.758% 21.413%, 98.347% 29.793%, 99.426% 38.347%, 99.89% 47.032%, 99.63% 55.808%, 98.54% 64.634%, 96.512% 73.468%, 96.512% 73.468%, 93.216% 82.481%, 89.152% 89.645%, 84.505% 94.939%, 79.462% 98.346%, 74.209% 99.844%, 68.932% 99.416%, 63.818% 97.041%, 59.053% 92.702%, 54.822% 86.377%, 51.313% 78.049%, 51.313% 78.049%, 49.202% 71.93%, 47.238% 66.923%, 45.338% 62.965%, 43.42% 59.992%, 41.399% 57.941%, 39.193% 56.746%, 36.719% 56.345%, 33.894% 56.673%, 30.635% 57.667%, 26.858% 59.263%, 26.858% 59.263%, 22.58% 60.972%, 18.758% 61.918%, 15.363% 62.078%, 12.367% 61.431%, 9.743% 59.955%, 7.462% 57.628%, 5.496% 54.429%, 3.817% 50.336%, 2.397% 45.326%, 1.208% 39.379%, 1.208% 39.379%, 0.528% 34.322%, 0.184% 29.309%, 0.154% 24.364%, 0.416% 19.508%, 0.948% 14.764%, 1.728% 10.154%, 2.734% 5.7%, 3.943% 1.424%, 5.335% -2.651%, 6.885% -6.504%, 6.885% -6.504%, 10.221% -14.198%, 12.928% -20.553%, 15.107% -25.893%, 16.855% -30.543%, 18.272% -34.828%, 19.456% -39.071%, 20.508% -43.599%, 21.525% -48.734%, 22.607% -54.802%, 23.853% -62.128%);
}


.header .logo-container::after {
    background-color: rgba(255, 255, 255, 0.2);
    bottom: calc(0% - clamp(26px, 2.73vw, 52px));
    left: calc(0% - clamp(20px, 1.58vw, 30px));
    right: calc(0% - clamp(28px, 2.1vw, 40px));
    clip-path: polygon(12.845% -48.266%, 12.845% -48.266%, 13.243% -56.845%, 13.802% -64.394%, 14.544% -70.99%, 15.49% -76.71%, 16.662% -81.632%, 18.083% -85.833%, 19.775% -89.391%, 21.759% -92.383%, 24.057% -94.886%, 26.692% -96.979%, 26.692% -96.979%, 32.558% -99.078%, 38.406% -97.762%, 44.202% -93.587%, 49.91% -87.11%, 55.495% -78.884%, 60.922% -69.467%, 66.157% -59.414%, 71.163% -49.28%, 75.906% -39.62%, 80.351% -30.991%, 80.351% -30.991%, 83.678% -24.667%, 86.968% -17.926%, 90.114% -10.745%, 93.007% -3.103%, 95.539% 5.025%, 97.603% 13.66%, 99.089% 22.826%, 99.89% 32.545%, 99.898% 42.84%, 99.004% 53.733%, 99.004% 53.733%, 96.912% 65.618%, 93.859% 75.971%, 90.021% 84.656%, 85.575% 91.533%, 80.7% 96.465%, 75.571% 99.313%, 70.365% 99.94%, 65.259% 98.209%, 60.431% 93.98%, 56.057% 87.116%, 56.057% 87.116%, 53.293% 81.779%, 50.803% 77.562%, 48.501% 74.446%, 46.298% 72.414%, 44.108% 71.449%, 41.842% 71.534%, 39.414% 72.651%, 36.734% 74.784%, 33.717% 77.914%, 30.273% 82.025%, 30.273% 82.025%, 26.361% 86.573%, 22.796% 90.004%, 19.548% 92.311%, 16.588% 93.488%, 13.886% 93.529%, 11.412% 92.429%, 9.137% 90.181%, 7.032% 86.778%, 5.065% 82.216%, 3.209% 76.487%, 3.209% 76.487%, 1.949% 71.407%, 1.017% 66.166%, 0.396% 60.8%, 0.067% 55.348%, 0.011% 49.848%, 0.209% 44.338%, 0.644% 38.856%, 1.296% 33.441%, 2.147% 28.129%, 3.178% 22.96%, 3.178% 22.96%, 5.466% 12.487%, 7.31% 3.866%, 8.767% -3.317%, 9.892% -9.478%, 10.743% -15.033%, 11.375% -20.398%, 11.844% -25.988%, 12.208% -32.219%, 12.523% -39.507%, 12.845% -48.266%);
} */

.header .logo-container .logo {
    max-width: clamp(130px, 11.56vw, 220px);
}

.header-action-btn {
    .w {
        display: block;
    }

    .b {
        display: none;
    }
}

.header-bottom.sticky {
    .header-action-btn {
        .w {
            display: none;
        }

        .b {
            display: block;
        }
    }

    .header-container {
        background-color: #ffffff;
    }

    .header-nav-wrapper .menu-item-has-children {
        color: var(--main-color);
    }

    .header-nav-wrapper .menu-item-has-children .menu-link {
        color: var(--main-color);
    }

    .header-nav-wrapper .menu-item-has-children .menu-arrow {
        border-right: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
    }

    .header-left-wrapper .header-nav-wrapper .menu-item {
        color: var(--main-color);

        &.active {
            color: var(--orange-color);
        }
    }
}

/* pc 導航欄 - end */

/* 訂閱我們 - start */
.subscription-section {
    background: url(/static/image/h-bg-1.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 80px 0 160px 0;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.72);
        width: 100%;
        height: 100%;
        z-index: 0;
    }
}

.subscription-section .section-tip {
    color: var(--orange-color);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.subscription-section .subscription-section__title {
    color: #fff;
    padding-bottom: 8px;
}

.subscription-section .subscription-section__title .highlight {
    color: var(--orange-color);
}

.subscription-section .subscription-section__sub {
    color: rgba(255, 255, 255, 0.88);
    max-width: min(720px, 92vw);
    padding-bottom: clamp(28px, 3.5vw, 40px);
}

.subscription-section .subscription-form {
    max-width: 720px;
    margin: 0 auto;
}

.subscription-section .subscription-form-item {
    margin-bottom: 0;
}

.subscription-section .subscription-form-combo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px clamp(20px, 2.5vw, 28px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.subscription-section .subscription-form-input.layui-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    line-height: 52px;
    padding: 0 12px 0 0;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--deep-blue-color);
    border-radius: 52px;
}

.subscription-section .subscription-form-input.layui-input::placeholder {
    color: #98a2b3;
}

.subscription-section .subscription-form-input.layui-input:focus {
    outline: none;
    box-shadow: none;
}

.subscription-section .layui-form-danger.subscription-form-input.layui-input,
.subscription-section .layui-form-danger.subscription-form-input.layui-input:focus {
    border: none;
    box-shadow: inset 0 -2px 0 var(--red-color);
}

.subscription-section .subscription-form-submit.layui-btn {
    flex: 0 0 auto;
    margin: 0;
    height: 52px;
    line-height: 52px;
    padding: 0 clamp(22px, 2.5vw, 32px);
    border-radius: 999px;
    background: var(--orange-color);
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.subscription-section .subscription-form-submit.layui-btn:hover {
    background: #c7480e;
    color: #fff;
}

/* 訂閱我們 - end */

/* footer - start */
.ul-footer {
    position: relative;
    z-index: 1;
}

.ul-footer-top {
    position: absolute;
    width: 1172px;
    height: 162px;
    top: -81px;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, var(--deep-blue-color) 50%, rgba(0, 0, 0, 0) 0);
}

.ul-footer-container {
    max-width: clamp(1010px, 61.59vw, 1172px);
    margin: auto;
}

.ul-footer-top-contact-infos {
    background-color: var(--orange-color);
    padding: clamp(20px, 1.84vw, 35px) clamp(25px, 2.63vw, 50px);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.ul-footer-top-contact-infos,
.ul-footer-top-contact-infos a {
    color: #ffffff;
}

.ul-footer-top-contact-info {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.79vw, 15px);

    &:hover {
        .ul-footer-top-contact-info-icon::before {
            /* 增加半徑從小到大的動畫效果 */
            animation: pulse 1s infinite;
        }
    }
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

.ul-footer-top-contact-info-icon {
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    border-radius: 50%;
    width: clamp(48px, 3.31vw, 63px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-color);
    position: relative;

    &::before {
        content: "";
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.15);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.ul-footer-top-contact-info-icon-inner {
    width: clamp(35px, 2.1vw, 40px);
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 24px;
        height: 24px;
    }
}

.ul-footer-top-contact-info-txt {
    display: flex;
    flex-direction: column;
}

.ul-footer-top-contact-info-label {
    font-size: clamp(12px, 0.74vw, 16px);
    font-weight: 500;
    margin-bottom: clamp(3px, 0.32vw, 6px);
}

.ul-footer-top-contact-info-address {
    font-size: clamp(17px, 1.05vw, 20px);
    font-weight: 700;
}

.ul-footer-middle {
    padding: 120px 0 clamp(50px, 5.25vw, 100px);
    position: relative;
    background-color: var(--deep-blue-color);
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--deep-blue-color);
        z-index: -1;
        top: -2px;
    }

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(/static/image/design2.png);
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    .ul-footer-container {
        max-width: clamp(1010px, 61.59vw, 1172px);
        margin: auto;

        .ul-footer-middle-wrapper {
            display: flex;
            justify-content: space-between;
            gap: 35px;

            .ul-footer-about {
                max-width: clamp(267px, 14.19vw, 270px);

                .footer-logo-wrapper {
                    padding: 18px 24px;
                    border-radius: 16px;
                    background-color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;

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

                .ul-footer-about-txt {
                    color: #ffffff;
                    margin-top: 24px;
                    font-size: clamp(13px, 0.84vw, 16px);
                    /* color: var(--ul-gray2); */
                }
            }

            .ul-footer-widget {
                min-width: clamp(110px, 10.51vw, 200px);

                .ul-footer-widget-title {
                    font-weight: 700;
                    font-size: clamp(20px, 1.26vw, 24px);
                    color: #ffffff;
                    margin-bottom: clamp(13px, 1.37vw, 26px);
                    padding-bottom: clamp(8px, 0.68vw, 13px);
                    position: relative;
                }

                .ul-footer-widget-title::before,
                .ul-footer-widget-title::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 2px;
                    width: 18px;
                    background-color: var(--orange-color);
                }

                .ul-footer-widget-title::after {
                    left: 24px;
                    width: 63px;
                }

                .ul-footer-contact-info {
                    color: #ffffff;
                    font-size: 16px;
                    gap: clamp(5px, 0.42vw, 8px);
                    padding-left: 24px;
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 4px;
                        width: 16px;
                        height: 16px;
                        background: url(/static/image/location.svg) no-repeat center center;
                        background-size: 100% 100%;
                    }
                }

                .ul-footer-widget-links {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: clamp(15px, 0.95vw, 18px);

                    a {
                        color: #ffffff;
                        gap: clamp(5px, 0.42vw, 8px);
                        padding-left: 24px;
                    }
                }

                /* 兩列鏈結佈局：維持箭頭與間距樣式 */
                .ul-footer-widget-links.ul-footer-widget-links--two-cols {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, max-content));
                    column-gap: clamp(24px, 2.4vw, 48px);
                    row-gap: clamp(15px, 0.95vw, 18px);
                }

                .ul-footer-widget-links>* {
                    display: inline-flex;
                    align-items: center;
                    color: var(--ul-gray2);
                    font-size: clamp(13px, 0.84vw, 16px);
                    position: relative;
                }

                .ul-footer-widget-links>*::before {
                    content: "";
                    background: url(../image/right-arrow.svg) no-repeat center center;
                    background-size: contain;
                    width: 12px;
                    height: 12px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                }

                .ul-footer-widget-links.ul-footer-contact-links>*::before {
                    display: none;
                }

                .ul-footer-widget-links>a:hover {
                    color: var(--orange-color);
                }

                .ul-footer-widget-links>a:hover::before {
                    /* @keyframes 須寫在樣式表根層，巢狀內定義會無法匹配 animation 名稱 */
                    animation: arrow-shake 1s ease infinite;

                    background-image: url(/static/image/right-arrow-orange.svg);
                }

                /* 社群圖示列：橫向排列 + hover 回饋（無箭頭 ::before） */
                .ul-footer-widget-links.ul-footer-contact-links {
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: center;
                    gap: clamp(10px, 1vw, 14px);
                    margin-top: clamp(12px, 1.2vw, 20px);
                }

                .ul-footer-widget-links.ul-footer-contact-links>a {
                    background-color: rgba(255, 255, 255, 0.06);
                    backdrop-filter: blur(15px);
                    border-radius: 50%;
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 24px;
                        height: 24px;
                    }
                }

                .ul-footer-widget-links.ul-footer-contact-links>a:hover {
                    transform: translateY(-4px) scale(1.06);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
                    filter: brightness(1.12);
                }

                .ul-footer-widget-links.ul-footer-contact-links>a:active {
                    transform: translateY(-1px) scale(1.02);
                }

                /* 工作時間 */
                .work-time p {
                    margin: 0 0 clamp(8px, 0.7vw, 12px);
                    font-size: clamp(14px, 0.84vw, 16px);
                    line-height: 1.65;
                    color: rgba(255, 255, 255, 0.88);
                }

                .work-time p:last-child {
                    margin-bottom: 0;
                }

                .work-time-label {
                    font-weight: 600;
                    color: #fff;
                    margin-right: 0.25em;
                }

                .work-time-sep {
                    margin: 0 0.35em 0 0.15em;
                    opacity: 0.45;
                    font-weight: 400;
                }

                .work-time-closed span:last-child {
                    color: rgba(255, 255, 255, 0.65);
                    font-weight: 500;
                }

                .ul-footer-post {
                    display: flex;
                    gap: clamp(14px, 0.84vw, 16px);
                    margin-bottom: 0;
                    border-bottom: none;
                    padding-bottom: 0;
                    padding-top: clamp(12px, 1.26vw, 24px);
                    cursor: pointer;

                    .img {
                        flex-shrink: 0;
                        max-width: clamp(70px, 5.26vw, 80px);
                        border-radius: 8px;
                        overflow: hidden;

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

                    .date {
                        color: rgba(255, 255, 255, 0.8);
                        font-size: clamp(13px, 0.74vw, 14px);
                        display: flex;
                        align-items: center;
                        gap: clamp(6px, 0.47vw, 9px);
                        margin-bottom: clamp(7px, 0.53vw, 10px);

                        img {
                            width: 24px;
                            height: 24px;
                        }
                    }

                    .title a {
                        color: #ffffff;
                        font-family: var(--font-quicksand);
                        font-size: clamp(14px, 0.84vw, 16px);
                        font-weight: 600;
                    }

                    &:hover {
                        .title a {
                            color: var(--orange-color);
                        }
                    }
                }

                .ul-nwsltr-form {
                    margin-top: clamp(15px, 1.58vw, 30px);

                    .agreement {
                        font-size: clamp(13px, 0.84vw, 16px);
                        color: rgba(255, 255, 255, 0.6);
                        margin-top: clamp(12px, 1.26vw, 24px);

                        .ul-checkbox-wrapper {
                            display: flex;
                            align-items: center;
                            gap: clamp(7px, 0.53vw, 10px);
                        }

                        a {
                            color: #ffffff;
                            text-decoration: underline;
                        }
                    }
                }
            }

            .ul-footer-recent-posts {
                max-width: clamp(240px, 15.76vw, 300px);
            }

            .ul-nwsltr-form .top {
                background-color: #ffffff;
                padding: clamp(2px, 0.26vw, 5px);
                border-radius: 8px;
                height: clamp(45px, 2.94vw, 56px);
                display: flex;

                input {
                    border: none;
                    padding: 0 clamp(7px, 0.53vw, 10px);
                    font-size: clamp(13px, 0.84vw, 16px);
                    width: 100%;
                }

                button {
                    background-color: var(--ul-c5);
                    color: #ffffff;
                    aspect-ratio: 1 / 1;
                    flex-shrink: 0;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }

        .ul-checkbox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(17px, 1.05vw, 20px);
            aspect-ratio: 1 / 1;
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 4px;
            font-size: 10px;
            color: #ffffff;
        }
    }
}

@keyframes underline {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.ul-footer-bottom {
    padding: clamp(14px, 1.16vw, 22px) 0;
    background-color: var(--orange-color);
    position: relative;
    z-index: 1;

    .ul-footer-container {
        max-width: clamp(1010px, 61.59vw, 1172px);
        margin: auto;

        .ul-footer-bottom-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
    }

    .copyright-txt {
        margin-bottom: 0;
        font-size: clamp(13px, 0.84vw, 16px);
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;

        &:hover {
            a {
                position: relative;
            }

            a::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 1px;
                background-color: #ffffff;
                /* 從左邊開始變長的下劃線 */
                animation: underline 0.3s ease forwards;
            }
        }
    }

    .ul-footer-bottom-nav {
        display: flex;
        gap: clamp(15px, 1.58vw, 30px);

        a {
            color: rgba(255, 255, 255, 0.9);
            font-size: clamp(13px, 0.84vw, 16px);
        }

        a:hover {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 1px;
                background-color: #ffffff;
                /* 從左邊開始變長的下劃線 */
                animation: underline 0.3s ease forwards;
            }
        }

        span {
            color: var(--ul-gray2);
        }
    }
}

/* footer - end */

/* 頁尾連結箭頭搖動：必須在根層宣告，否則 animation 名稱無效 */
@keyframes arrow-shake {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    25% {
        transform: translateY(-50%) translateX(-3px);
    }

    50% {
        transform: translateY(-50%) translateX(3px);
    }

    75% {
        transform: translateY(-50%) translateX(-3px);
    }

    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ul-footer-middle .ul-footer-container .ul-footer-middle-wrapper .ul-footer-widget .ul-footer-widget-links>a:hover::before {
        animation: none;
    }

    .ul-footer-middle .ul-footer-container .ul-footer-middle-wrapper .ul-footer-widget .ul-footer-widget-links.ul-footer-contact-links>a:hover {
        transform: none;
        filter: none;
        box-shadow: none;
    }

    .temperature-box--heatwave {
        animation: none;
    }
}

/* 浮動天氣提示（本港氣溫／濕度）- start */
.temperature-box {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 3vh, 28px);
    left: auto;
    top: auto;
    z-index: 9990;
    width: min(calc(100vw - 24px), 300px);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    /* border: 1px solid rgba(235, 83, 16, 0.45); */
    box-shadow: 0 4px 18px rgba(235, 83, 16, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: inherit;
    text-align: left;
    touch-action: manipulation;
}

.temperature-box__handle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    box-shadow: 0 4px 18px rgba(2, 33, 105, 0.12);
    border: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
}

.temperature-box__handle:active {
    cursor: grabbing;
}

.temperature-box__handle-grip {
    display: flex;
    gap: 3px;
    align-items: center;
}

.temperature-box__handle-grip::before,
.temperature-box__handle-grip::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--orange-color);
    box-shadow: 0 6px 0 var(--orange-color), 0 12px 0 var(--orange-color);
    opacity: 0.85;
    margin-top: 4px;
}

.temperature-box__body {
    padding: 12px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 20px;
        right: 28px;
        width: 23%;
        height: 50%;
        background-image: url(/static/image/hotIsland2.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.6;
        z-index: 0;
    }
}

.temperature-box__row {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.temperature-box__row:last-of-type {
    margin-bottom: 8px;
}

.temperature-box__icon {
    flex-shrink: 0;
    width: 22px;
    height: 28px;
    color: #f4a574;
    margin-top: 2px;
}

.temperature-box__icon--drop {
    height: 26px;
}

.temperature-box__label {
    margin: 0;
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.45;
    color: #1e293b;
    font-weight: 500;
}

.temperature-box__label strong {
    font-weight: 800;
    color: var(--deep-blue-color);
}

.temperature-box__footer {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(2, 33, 105, 0.08);
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.55;
    color: var(--orange-color);
    font-weight: 600;
}

.temperature-box__source {
    display: block;
    margin-top: 2px;
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 500;
    opacity: 0.92;
}

.temperature-box--heatwave {
    border-color: rgba(216, 59, 52, 0.75);
    box-shadow:
        0 0 0 2px rgba(235, 83, 16, 0.55),
        0 8px 28px rgba(216, 59, 52, 0.28),
        0 4px 18px rgba(2, 33, 105, 0.12);
    animation: temperature-box-pulse 1.8s ease-in-out infinite;
}

.temperature-box--heatwave .temperature-box__handle {
    background: linear-gradient(180deg, rgba(216, 59, 52, 0.18), rgba(255, 255, 255, 0.65));
}

@keyframes temperature-box-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(235, 83, 16, 0.45),
            0 8px 24px rgba(216, 59, 52, 0.2),
            0 4px 16px rgba(2, 33, 105, 0.1);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(235, 83, 16, 0.65),
            0 10px 32px rgba(216, 59, 52, 0.35),
            0 4px 18px rgba(2, 33, 105, 0.12);
    }
}

@media screen and (max-width: 600px) {
    .temperature-box {
        width: min(calc(100vw - 16px), 300px);
        border-radius: 12px;
    }

    .temperature-box__handle {
        min-height: 44px;
        font-size: 13px;
    }
}

/* 浮動天氣提示 - end */

/* 回到頂部-start */
#mkdf-back-to-top {
    position: fixed;
    bottom: 180px;
    right: 16px;
    z-index: 10000;
    padding: 12px;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px 0 rgba(235, 83, 16, 0.3);
    animation: slideUp 1.5s ease-in-out infinite;
}

#mkdf-back-to-top img {
    width: 40px;
    height: 40px;
}

#mkdf-back-to-top.on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 回到頂部-end */

/* banner section - start */
.banner-section {
    width: 100%;
    height: 450px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        /* background-color: rgba(19, 19, 19, 0.8); */
        /* background-color: rgba(1, 93, 178, 0.86); */
        background-color: rgba(19, 19, 19, 0.6);
        z-index: 1;
    }

    .banner-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        z-index: 2;

        .banner-title {
            font-size: 64px;
            font-weight: 800;
            line-height: 1.2;
            color: var(--orange-color);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .banner-sub {
            font-size: 28px;
            font-weight: 600;
            line-height: 1.5;
            color: #ffffff;
            max-width: 540px;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        }
    }
}

/* banner section - end */

@media screen and (max-width: 1906px) {
    .header-left-wrapper {
        .header-nav-wrapper {
            padding-left: 40px;
        }
    }
}

@media screen and (max-width: 1860px) {
    .header-left-wrapper {
        .header-nav-wrapper {
            gap: 20px;
        }
    }
}

@media screen and (max-width: 1764px) {
    .header-bottom-wrapper {
        gap: 20px;
    }
}