body, h1, h2, h3, h4, h5, h6 { font-family: "Lato", "微軟正黑體", sans-serif; }
        a { transition: .3s; }
        .max-w-7xl { max-width: 1400px !important; }
        .dropdown-menu { display: none; position: absolute; z-index: 999; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }
        .dropdown-menu a { display: block; padding: 0.5rem 1rem; }
        .dropdown-menu a:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
        .dropdown-menu a i { margin-right: 1rem; width: 1rem; }
        .dropdown.show .dropdown-menu { display: block; }

        .line-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
        .clamp-1 { -webkit-line-clamp: 1; }
        .clamp-2 { -webkit-line-clamp: 2; }
        .clamp-3 { -webkit-line-clamp: 3; }

        .slick-arrow { background-color: white!important; transition: .3s; }
        .home-slider .slick-arrow { opacity: 0;  }
        .home-slider:hover .slick-arrow { top: calc(50% - 40px); transform: scale(2); transform-origin: center; opacity: 1; }
        .home-slider:hover .slick-arrow.slick-prev { left: 60px; }
        .home-slider:hover .slick-arrow.slick-next { right: 60px; }

        .mobile-categories { box-shadow: 0 0 2rem rgb(0 0 0 / 15%); }

        .meta-info .brief::-webkit-scrollbar { width: 6px; background-color:var(--theme-light); }
        .meta-info .brief::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:6px; background-color:lightgray; }
        .meta-info .brief::-webkit-scrollbar-thumb { border-radius:6px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:black; }

        .tooltip { position: absolute; z-index: 1070; display: block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; }
        .tooltip.show { opacity: 0.9; }
        .tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }
        .tooltip .arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; }

        .bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; }
        .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; }
        .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; border-top-color: #000; }

        .bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; }
        .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; }
        .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; }

        .bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; }
        .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; }
        .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; }

        .bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; }
        .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; }
        .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; }

        .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: #fff; text-align: center; background-color: #000; border-radius: 0.25rem; }

        .fade:not(.show) { opacity: 0; }
        .fade { transition: opacity 0.15s linear; }
        
        .modal-open { overflow: hidden; }
        .modal { z-index: 1050; display: none; outline: none; }
        .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -25%); }
        @media screen and (prefers-reduced-motion: reduce) {
            .modal.fade .modal-dialog { transition: none; }
        } 
        .modal.show .modal-dialog { transform: translate(0, 0); }
        @media screen and (prefers-reduced-motion: reduce) {
            .fade { transition: none; }
        }
        .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; }
        .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; }
        .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - (0.5rem * 2)); }
        @media (min-width: 576px) {
            .modal-sm { max-width: 300px; }
            .modal-dialog-centered { min-height: calc(100% - (1.75rem * 2)); }
        }
        @media (min-width: 992px) { .modal-lg { max-width: 800px; } }

        .quick-view-modal { background-image: linear-gradient(135deg, #772e85 5.77%, #ffffff 5.77%, #ffffff 25%, #111111 25%, #111111 30.77%, #ffffff 30.77%, #ffffff 50%, #772e85 50%, #772e85 55.77%, #ffffff 55.77%, #ffffff 75%, #111111 75%, #111111 80.77%, #ffffff 80.77%, #ffffff 100%); background-size: 36.77px 36.77px; background-color: white; }
        
        @media (max-width: 480px) {
            .slick-arrow.slick-prev { left: 0; }
            .slick-arrow.slick-next { right: 0; }
            .home-slider:hover .slick-arrow { top: calc(50% - 24px); transform: scale(1.2); transform-origin: center; opacity: 1; }
            .home-slider:hover .slick-arrow.slick-prev { left: 20px; }
            .home-slider:hover .slick-arrow.slick-next { right: 20px; }
        }