* {
        /* box-sizing: border-box; */
        user-select: none;
        text-decoration: none!important;
    }

    .logoImg{
        max-height: 50px;
        width: auto;
    }

    .background {
        /* background-color:   rgb(220, 220, 220); */
        background-color: white;
    }

    html,
    body {
        margin: 0;
        /* padding: 5px; */
        padding-top: 0px;
        min-height: 100%;
        box-sizing: border-box;
        font-family: '"‘Noto Sans TC’", "‘Varela Round’", ‘微軟正黑體’, sans-serif';

        /* background-color: rgb(70, 70, 70); */
    }



    .marquee-wrapper {
        overflow: hidden;
        white-space: nowrap;
        background: #d35e56;
        /* Bootstrap body bg */
        /* border-radius: .375rem; */
        padding: .5rem 0;
        color: white;
    }

    .marquee {
        display: inline-block;
        padding-left: 100%;
        /* 讓內容從視窗右側以外開始 */
        animation: marquee 12s linear infinite;
    }

    .marquee:hover {
        animation-play-state: paused;
        /* 滑鼠停留時暫停 */
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }

        /* 往左滑到完全消失 */
    }

















    .header-tool {
        /* width: 100%; */
        /* height: 8vh; */

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

    .header-tool>div,
    i {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: x-large;
        text-align: center;
        transition: all 0.3s ease;
    }

    .header-tool>div,
    i:hover {
        cursor: pointer;
        color: gray;
        transition: all 0.3s ease;
    }


    .header-tool {
        /* 讓絕對定位可參考 */
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-tool input {
        position: absolute;

        width: 10vw;
        right: 10%;
        width: 0;
        opacity: 0;
        /* padding: 5px 10px; */
        border: none;
        /* 移除所有邊框 */
        border-bottom: 1px solid black;
        /* 只留底線 */
        border-radius: 0;
        /* 移除圓角 */
        background: transparent;
        /* 背景透明 */
        outline: none;
        transition: all 0.4s ease;
        /* 平滑動畫 */
        transform: translateX(-20px);
        /* 往左縮回 */
    }

    .header-tool input::placeholder {
        font-size: 12px;
        /* 字體變小 */
        color: black;
        /* 顏色變淺 */
        font-style: italic;
        /* 可選，加點斜體效果 */
    }

    /* 當 hover 到放大鏡時，讓 input 展開 */
    .header-tool:has(.fa-magnifying-glass:hover) input,
    .header-tool:has(input:hover) input {
        width: 150px;
        opacity: 1;
        transform: translateX(0);
    }

    .glass-relative {
        position: relative;
    }






    /* 基本樣式 */
    .header {
        padding: 10px 20px;

        position: sticky;
        /* 設定 sticky */
        top: 0;
        /* 距離視窗頂端 0 */
        z-index: 1000;

        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .06);
    }

    .header>div {
        display: flex;
        justify-content: center;
    }

    .header-nav .menu {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 0;
        padding: 0;

        transition: .4s;
    }

    .menu li {
        font-size: calc(15px * var(--font-size-paragraph, 1));
    }

    .menu li a {
        color: rgb(51, 51, 51) !important;
        text-decoration: none;
    }

    .menu li a:hover {
        color: brown !important;
    }

    .menu li:hover {
        color: gray;
    }

    .menu-item {
        position: relative;
        color: black;
        font-size: large;
        cursor: pointer;

        transition: .4s;
    }

    /* 子選單隱藏 */
    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        /* 往下排列 */
        left: 0;
        /* background-color: #444; */
        background-color: white;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        min-width: 150px;
        border-radius: 4px;
        z-index: 1000;

        transition: .4s;
    }

    /* 子選單項目 */
    .submenu li a {
        display: block;
        padding: 8px 15px;
        color: #fff;
        text-decoration: none;

        transition: .4s;
    }

    .submenu li:hover {
        /* background-color: #555; */
        background-color: white;

        transition: .4s;
    }

    /* 滑鼠 hover menu-item 時顯示子選單 */
    .menu-item:hover .submenu {
        display: block;
        transition: .4s;
    }

    .contentContainer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }


    .contentDisplay {
        width: 60%;
        border-radius: 5px;
        min-height: 37vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* background-color: #c09d9a; */
        background-color: white;

        padding: 50px 0px;
    }




    .footer {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        border-radius: 5px;
        /* background-color: lightgray; */

        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .footer>div {
        width: 95%;
        display: flex;
        justify-content: space-around;

        margin-bottom: 15px;
    }

    .footer>div>div {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }



    /* 漢堡排按鈕 */
    .menu-toggle {
        display: none;
        cursor: pointer;
        font-size: 2rem;
    }

    /* RWD 手機板 */
    @media screen and (max-width: 768px) {
        .menu {
            display: none !important;
            /* 預設隱藏 */
            flex-direction: column;
            gap: 10px;
            text-align: center;
            background-color: white;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 999;
            padding: 10px 0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .menu.active {
            display: flex !important;
            /* 點擊漢堡排才顯示 */
        }

        .menu-toggle {
            display: block !important;
            /* 手機板顯示漢堡排 */
        }

        .header-nav {
            width: 100%;
        }


        .contentDisplay {
            width: 90%;
            border-radius: 5px;
            min-height: 37vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* background-color: #c09d9a; */
            background-color: white;

            padding: 50px 0px;
        }
        
        .header>div {
        display: flex;
        justify-content: space-between;
    }

    }

    /* 電腦板 */
    @media screen and (min-width: 769px) {
        .menu {
            display: flex !important;
            gap: 20px;
        }

        .menu-toggle {
            display: none !important;
        }

        .logoImg{
            max-height: 80px;
            width: auto;
    }
    }