/* ==========================================================================
   Desktop Dropdown Menu (.under-menu) Custom Stylings
   ========================================================================== */
@media (min-width: 992px) {
    /* 通用下拉選單容器 */
    #menu .under-menu {
        border-radius: 8px;
        overflow: hidden;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* 限制寬度：通用二級選單 (例如：成功案例、最新消息、主題專區) */
    #menu .under-menu:not(.w-100) {
        width: 300px;
        left: 50%;
        transform: translateX(-50%);
        padding: 1.25rem;
    }

    /* 資源中心：有兩個欄位，寬度稍微加寬 */
    #menu #resource .under-menu {
        width: 580px;
        padding: 1.25rem;
    }

    /* 產品介紹：全寬的 under-menu 調整為精緻的懸浮大選單 */
    #menu .under-menu.w-100 {
        width: 820px !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }

    /* 內層 flex 排版調整，統一靠上對齊以解決圖片及區塊高度不一致的問題 */
    #menu .under-menu .d-flex {
        align-items: flex-start;
    }

    /* 通用圖片容器欄位縮減 */
    #menu .under-menu:not(.w-100) .d-flex > .col-4:first-child,
    #menu .under-menu:not(.w-100) .d-flex > .col-6:first-child {
        flex: 0 0 60px;
        max-width: 60px;
        padding: 0;
        margin-right: 15px;
        display: flex;
        justify-content: center;
    }

    /* 圖片縮小至精緻的尺寸 */
    #menu .under-menu:not(.w-100) img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-top: 4px; /* 稍微往下推一點點，讓圖示與文字對齊更自然 */
    }

    /* 文字內容欄位填滿剩餘空間，消除多餘間距 */
    #menu .under-menu:not(.w-100) .d-flex > .col-8,
    #menu .under-menu:not(.w-100) .d-flex > .col-6:last-child {
        flex: 1;
        max-width: none;
        padding: 0;
    }

    /* 針對資源中心 (有 3 個 col-4) 的特殊處理 */
    #menu #resource .under-menu .d-flex > .col-4:first-child {
        flex: 0 0 60px;
        max-width: 60px;
        padding: 0;
        margin-right: 20px;
    }

    #menu #resource .under-menu .d-flex > .col-4:not(:first-child) {
        flex: 1;
        max-width: none;
        padding: 0 10px;
    }

    #menu #resource .under-menu strong {
        display: block;
        font-size: 0.95rem;
        margin-bottom: 8px;
        padding-bottom: 4px;
    }

    /* 產品介紹 (w-100) 內部詳細調整 */
    #menu .under-menu.w-100 .d-flex.no-gutters {
        align-items: stretch !important;
    }

    /* 左側 headline 欄位 */
    #menu .under-menu.w-100 .under-menu-headline {
        flex: 0 0 200px !important;
        max-width: 200px !important;
        /* padding: 1.5rem 1rem !important; */
    }

    #menu .under-menu.w-100 .under-menu-headline ol {
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    #menu .under-menu.w-100 .under-menu-headline ol li {
        list-style: none !important;
        margin-bottom: 10px !important;
    }

    #menu .under-menu.w-100 .under-menu-headline ol li a {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        display: block !important;
        padding: 6px 12px !important;
    }

    /* 右側 content 欄位 */
    #menu .under-menu.w-100 .under-menu-content {
        flex: 1 !important;
        max-width: none !important;
        padding: 0rem 1.5rem 1.5rem;
    }

    #menu .under-menu.w-100 .under-menu-content .d-flex > .col-4 {
        flex: 0 0 170px !important;
        max-width: 170px !important;
        padding: 0 !important;
        margin-right: 25px !important;
    }
/* 
    #menu .under-menu.w-100 .under-menu-content .d-flex > .col-4:last-child {
        margin-right: 0 !important;
    } */

    #menu .under-menu.w-100 .under-menu-content strong {
        display: block !important;
        margin-bottom: 5px !important;
        padding-bottom: 4px !important;
    }

    /* 共同選單清單與連結樣式微調 */
    #menu .under-menu ol {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    #menu .under-menu ol li {
        padding: 4px 0;
    }

    #menu .under-menu ol li a {
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
    }
}

/* ==========================================================================
   Original Mobile Menu Styles
   ========================================================================== */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;       
    overflow-y: auto;   
    background-color: #fff;
    padding-bottom: 20px; 
    height: -webkit-fill-available;  /* iOS 特殊用法 */
    box-sizing: border-box;
}

#resource ol li {
  padding-left:0;
}