@charset "utf-8";
/*=================================================================================
File Name: global-rwd.css
Purpose: Responsive Design (RWD) 專用樣式
Last Editor: Sophia
Last Date: 2026/05/04
Version: 1.1

【 Breakpoint System - Desktop First 】
    xl: ≥86.25em (≥1380px) - 4K displays
    lg: 76.25em-86.1875em (1220-1379px) - Standard desktop
    md: 61.0625em-76.1875em (977-1219px) - Small desktop
    sm: 48em-61em (768-976px) - Tablet portrait
    xs: <= 47.999375em (~767px) - All mobile
    xs-l: 30em-47.999375em (480-767px) - Mobile landscape
    xs-p: ≤29.9375em (≤479px) - Mobile portrait

Notes:
- 為了修正在某些瀏覽器 / DPI 環境下 766–768px 間的邊界觸發不穩定行為，專案在實作上以等價的 `47.999375em`（相當於約 767px）作為 `max-width` 補償寫法（僅用於 max-width 比對），但全域斷點仍以 `48em` 作為 tablet 起始，請參閱 `.ai/projects/egit/README.md` 中的變革規範。
=================================================================================*/

/*===============================================================================
                        lg: 1220px ~ 1379px (76.25em ~ 86.1875em)
=================================================================================*/
/* 1220px ~ 1379px */
@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) {
    .wrapper {
        width: 1200px;
      }
      /* 桌機 fixed 狀態下 Logo 與主選單排版修正 */
      #mainMenu.fixed > .wrapper {
          display: flex;
          align-items: center;
          flex-direction: row;
      }
      #mainMenu.fixed #Logo {
          display: block !important;
          margin-right: 2.5em;
          min-width: 120px;
          position: static;
          z-index: 1;
      }
      #mainMenu.fixed .Menu {
          flex: 1 1 0%;
          display: flex;
          align-items: center;
          position: static;
          z-index: 2;
      }
      #mainMenu.fixed .Menu > ul {
          display: flex;
          align-items: center;
          margin-left: 0;
      }
    
}

/*===============================================================================
                        md: 977px ~ 1219px (61.0625em ~ 76.1875em)
=================================================================================*/
/* 977px ~ 1219px */
@media only screen and (min-width: 61.0625em) and (max-width: 76.1875em) {
    .wrapper {
        width: 960px;
    }
    .Menu {
     padding-left: 0; 
    }
    .fixed .Menu{
        padding-left: 100px;
    }
   .en .Menu li {
        font-size: 1.05em;
    }
   .en .Menu ul>li>ul>li {
        font-size: 0.875em;
       
    }
    .en .Menu ul>li#MenuItem04>ul>li {
         min-width: 250px;
    }
}

/*===============================================================================
                        sm: 768px ~ 976px (48em ~ 61em)
=================================================================================*/
/* 768px ~ 976px */
@media only screen and (min-width: 48em) and (max-width: 61em) {
    .wrapper {
        width: 752px;
    }

    /* #mainMenu & .Menu */
    #mainMenu > .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 4.5em;
    }
    
    /* Fixed Header 手機 Logo 顯示（首頁白色，內頁彩色） */
    #mainMenu.fixed #Logo {
        display: none !important; /* 只顯示 #MobileLogo，防止重複 */
    }
    #mainMenu.fixed #MobileLogo {
        display: block !important; /* 手機固定時顯示 */
        width: 110px;
        height: 36px;
    }
    #mainMenu.fixed:not(.Home) #MobileLogo {
        filter: none !important; /* 內頁顯示彩色 Logo */
    }
    /* 內頁 fixed 狀態下，確保只顯示一個 Logo，避免重複 */
    #mainMenu.fixed:not(.Home) #Logo {
        display: none !important; /* 內頁 fixed 強制隱藏 #Logo */
    }

    .Menu {
        float: none;
        width: 100%;
        padding-left: 0;
        margin-left: -110px;
        box-sizing: border-box;
    }
    
    .fixed .Menu{
        background-size: 100px 50px;
    }
    .fixed .Menu::before{
       left: -78px;
    }
    .en .Menu::before{
        background-size: 100px 40px;
    }
    .is-homepage.fixed .Menu::before{
        left: 5px;
        width: 110px;
    }
    .en.is-homepage.fixed .Menu::before{
        background-size: 110px 40px;
     }

    .Menu ul {
        margin: 0.625em 0 0.625em 100px;
        display: inline-block;
    }
    .Menu li {
        font-size: 1em;
    }
    .en .Menu li {
        font-size: 0.875em;
    }
    .en .Menu li a{
        padding: 0 0.5em;
        line-height: 2rem;
    }

   .en .Menu ul>li>ul>li {
        font-size: 0.875em;
       
    }
    .en .Menu ul>li#MenuItem04>ul>li {
         min-width: 250px;
    }
    .en li#MenuItem02,.en li#MenuItem03{
         font-size: 0.875em;
    }

}

/*===============================================================================
                        xs: ≤767px (≤47.999375em) - All Mobile
=================================================================================*/
/* ≤ 767px */
@media only screen and (max-width: 47.999375em) {
    /* Body & Wrapper */
    html,
    body {
        overflow-x: hidden;
    }

    #Header {
        display: none;
    }

    .wrapper {
        width: 100%;
    }

    /* #FastScroll */
    #FastScroll {
        right: 10px;
        bottom: 20px;
        gap: 8px;
    }

    .scroll-btn {
        width: 44px;
        height: 44px;
    }

    .scroll-btn i {
        font-size: 1.1rem;
    }

    /* #Header & #Banner */
    #Header {
        min-height: 53px;
    }

    #Banner {
        max-width: 100%;
        width: 100%;
        height: 53px;
        background-position: 10px 8px;
        background-size: auto 75%;
        background-color: #FFF;
    }

    /* #Partner */
    #Partner {
        display: none;
    }

    /* #mainMenu & .Menu */
    #mainMenu {
        height: 60px;
        position: relative; 
        background-color: #d7f1ff; 
        border-bottom: 1px solid #dcdcdb;
        z-index: 1000;
        transition: background-color .3s ease;
    }

   

    /* 首頁初始狀態：重疊在 Banner 上且透明 */
    .is-homepage:not(.fixed) #mainMenu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;
        background-image: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .fixed #mainMenu {
        height: 60px; /* 固定高度，確保 Logo 和漢堡按鈕位置正確 */
        min-height: 60px;
        max-height: 100vh;
    }

    .fixed #mainMenu.Cover {
        height: 100vh;
        overflow: hidden;
    }

    #mainMenu .wrapper {
        height: 100%;
        position: relative;
        padding: 0 ;
        max-width: 100% ;
        width: 100% ;
        overflow: visible ; /* 確保選單不被切掉 */
    }
    
    
    .Menu {
        padding-left: 0;
        width: 100%;
        box-sizing: border-box;
        float: none !important;
        padding: 0;
        margin: 0;
        position: relative;
        height: 60px; /* 與 #mainMenu 高度一致，確保子元素 height: 100% 生效 */
    }
    .Menu::before {
        display: none;
    }
    .fixed .Menu {
        background-image: none;
    }


    /* 1. 點選跳轉 Logo */
    #MobileLogo {
        display: flex;
        position: absolute;
        left: 15px;
        top: 12px; /* (60px - 36px) / 2 = 12px 垂直置中 */
        width: 110px;
        height: 36px;
        background-image: url(../../../images/EGIT-Logo.svg?t=20220225);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        z-index: 10002; /* 必須高於選單容器 (10001)，確保在選單展開時仍可見 */
        pointer-events: auto;
    }
    /* 顏色適配：只有首頁 fixed 狀態用白色 Logo，內頁保持彩色 */
    .is-homepage.fixed #MobileLogo {
        filter: brightness(0) invert(1) !important; /* 覆蓋桌面版深色 Logo */
    }
    /* 首頁初始狀態改回白色 Logo，保留陰影增強可讀性 */
    .is-homepage:not(.fixed) #MobileLogo {
        filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.45)) !important; /* 覆蓋桌面版深色 Logo */
    }

    /* 2. 漢堡按鈕區域 */
    .Menu label {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100% ;
        z-index: 10003;
        background: transparent ;
        cursor: pointer;
        display: inline-block;
    }
    .Menu label:after {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        content: "\2630" !important; /* ☰ */
        font-size: 1.8em !important;
        color: #505050; /* 內頁預設深灰 */
        line-height: 1;
    }
    /* 顏色適配：首頁或固定狀態用白色 */
    .is-homepage .Menu label:after {
        color: #ffffff !important; /* 覆蓋桌面版深色漢堡 */
        text-shadow: none !important; /* 清除桌面版文字陰影 */
    }


    /* .Corner & .Languages */
    .Corner {
        display: none;
    }

    .Languages {
        display: block;
        clear: both;
        position: absolute;
        top: 50%;
        right: 70px;
        transform: translateY(-50%);
        height: auto;
        width: auto;
          z-index: 10002; /* 與 Logo 相同層級，確保在選單之上 */
        float: none;
        margin: 0;
    }

  

    .Languages > ul > li {
        min-height: 2.5em;
        display: flex;
        align-items: center;
        line-height: 1.5em;
    }

 
     .Languages > ul > li > a {
        color: #3a3a3a !important; /* 內頁預設深色 */
        font-weight: bold;
    }
     .Languages > ul > li:after {
        color: #727272 !important;
    }

    .Languages ul > li > ul {
        min-width: 80px;
        top: 65px;
    }


    .Languages ul > li > ul li {
        white-space: nowrap;
    }

    /* 顏色適配：首頁或固定狀態用白色 */
    .fixed .Languages li a,
    .fixed .Languages > ul > li:after,
    .is-homepage:not(.fixed) .Languages li a,
    .is-homepage:not(.fixed) .Languages > ul > li:after {
        color: #ffffff !important; /* 覆蓋桌面版深色語言選單 */
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }



/* 4. 下拉選單展開樣式 ( 抽屜 ) */
    /* 關鍵：覆蓋桌面版 flex 佈局，讓選單依內容自然撐高 */
    .Menu > ul {
        display: none;   /* 預設隱藏 */
        position: absolute;
        top: 60px;       /* 從 #mainMenu 底部展開 */
        left: 0;
        right: 0;
        width: auto;
        max-width: 100vw;
        height: auto;    /* 不受 60px 高度限制 */
        max-height: calc(100vh - 120px); /* 最大高度：視窗高度減去 header，留些空間 */
        background-color: #0e5e87;
        z-index: 10001;  /* 必須高於 .fixed #mainMenu 的 z-index: 10000 */
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        border-top: 1px solid rgba(255,255,255,0.1);
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto; /* 內容過多時可滾動 */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Fixed 狀態下，選單容器也要 fixed，並從視窗頂部 60px 開始 */
    .fixed .Menu > ul {
        position: fixed !important; /* 覆蓋桌面版 position:absolute */
        top: 60px !important; /* 覆蓋桌面版 top 值 */
    }
    
    /* 漢堡勾選後才顯示選單：#btnMenu 與 ul 是同層兄弟節點 */
    .Menu #btnMenu:checked ~ ul {
        display: block;
    }
    .Menu > ul > li {
        width: 100%;
        max-width: 100%;
        float: none;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background-color: #0e5e87;
        font-size: 1rem; /* 覆蓋桌面版 1.25em (16px) */
    }
    .Menu > ul > li > a {
        color: #ffffff;
        display: block;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        line-height: 1.5;
        position: relative;
    }
    
    /* 有子選單的項目添加展開指示器 */
    .Menu > ul > li:has(> ul.subMenu) > a::after {
        content: '\f078'; /* Font Awesome chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        opacity: 0.7;
        transition: transform 0.3s ease;
    }
    
    /* 展開時箭頭旋轉 */
    .Menu > ul > li.active:has(> ul.subMenu) > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* 手機版顯示「首頁」選單項，方便用戶返回 */
    .Menu > ul > li.Home {
        display: block !important; /* 覆蓋桌面版 display:none */
    }

    /* 覆蓋桌面 fixed 規則，避免手機抽屜第一層文字變深色看不清 */
    .fixed .Menu > ul > li > a {
        color: #ffffff !important; /* 覆蓋桌面版 fixed 深色字 */
        border-right: none;
    }
    
    /* 第一層選單 hover 狀態 */
    .Menu > ul > li:hover,
    .Menu > ul > li.active {
        background-color: rgba(0, 0, 0, 0.15); /* 修正對比度：變深而非變亮，與 L2/L3 一致，從 5.62:1 提升到 8.71:1 */
    }
    
    /* ===== 修復： subMenu 層級定位問題 ===== */
    /* 第二層選單（ subMenu）：跟隨文件流，不使用絕對定位 */
    .Menu > ul > li > ul.subMenu {
        position: static;
        top: auto;
        left: auto;
        display: none;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.3); /* 改為深色背景提升對比度 */
        box-shadow: none;
        border-top: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }
    
    /* 點擊展開：當 li 有 active class 時顯示子選單 */
    .Menu > ul > li.active > ul.subMenu {
        display: block !important; /* 覆蓋桌面版 display:none */
        max-height: 2000px; /* 足夠大的值讓內容完整顯示 */
        opacity: 1 !important; /* 覆蓋桌面版 opacity:0 */
        visibility: visible !important; /* 覆蓋桌面版 visibility:hidden */
    }
    

    /* 第二層選單項目樣式 */
    .Menu > ul > li > ul.subMenu > li {
        background-color: #095275; /* 實色深藍背景，確保對比度 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 0;
    }
    
    .Menu > ul > li > ul.subMenu > li > a {
        padding: 0.625rem 1.25rem 0.625rem 2rem;
        font-size: 0.875rem; /* 14px */
        color: rgba(255, 255, 255, 0.95);
    }

    /* 手機 fixed 狀態：覆蓋桌面 fixed 深色字，維持抽屜選單可讀性 */
    .fixed .Menu > ul > li > ul.subMenu > li > a,
    .fixed .Menu > ul > li > ul.subMenu ul li a {
        color: rgba(255, 255, 255, 0.95) !important; /* 覆蓋桌面版 fixed 深色字 */
        text-shadow: none;
    }

    /* 首頁 fixed 狀態：覆蓋 .is-homepage.fixed 桌面深色字規則（手機抽屜需白字） */
    .is-homepage.fixed .Menu > ul > li > ul.subMenu > li > a,
    .is-homepage.fixed .Menu > ul > li > ul.subMenu ul li a {
        color: rgba(255, 255, 255, 0.95) !important; /* 覆蓋桌面版首頁 fixed 深色字 */
        text-shadow: none;
    }
    
    /* 第二層選單 hover 狀態 - 確保文字清晰可見 */
    .Menu > ul > li > ul.subMenu > li:hover {
        background-color: #0e5e87; /* 修正對比度：從 #65c2f2 (1.99:1) 改為 #0e5e87 (7.07:1) */
    }
    
    .Menu > ul > li > ul.subMenu > li:hover > a {
        color: #ffffff;
        font-weight: 500;
    }

    .is-homepage.fixed .Menu > ul > li > ul.subMenu > li:hover > a,
    .is-homepage.fixed .Menu > ul > li > ul.subMenu ul li:hover > a {
        color: #ffffff !important; /* 覆蓋桌面版 hover 深色字 */
    }
    
    /* 第三層及更深層的 ul：繼承 static，自然顯示 */
    .Menu > ul > li > ul.subMenu ul {
        position: static;
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .Menu > ul > li > ul.subMenu ul li {
        background-color: #074562; /* 實色深藍背景，比第二層更深 */
        padding-left: 0;
    }
    
    .Menu > ul > li > ul.subMenu ul li a {
        padding: 0.5rem 1.25rem 0.5rem 2.75rem;
        font-size: 0.8125rem; /* 13px */
        color: rgba(255, 255, 255, 0.9);
    }
    
    /* 第三層選單 hover 狀態 - 確保文字清晰可見 */
    .Menu > ul > li > ul.subMenu ul li:hover {
        background-color: #0e5e87; /* 修正對比度：從 #65c2f2 (1.99:1) 改為 #0e5e87 (7.07:1) */
    }
    
    .Menu > ul > li > ul.subMenu ul li:hover a {
        color: #ffffff;
        font-weight: 500;
    }

    /* 展開狀態時，漢堡按鈕固定在右上，避免掉到抽屜底部 */
    .fixed #mainMenu.Cover .Menu label {
        position: fixed !important; /* 覆蓋桌面版 position:absolute */
        top: 0 !important; /* 覆蓋桌面版 top 值 */
        right: 0 !important; /* 覆蓋桌面版 right 值 */
        width: 60px !important; /* 覆蓋桌面版 width */
        height: 60px !important; /* 覆蓋桌面版 height */
        min-height: 60px !important; /* 覆蓋桌面版 min-height */
        z-index: 10050 !important; /* 覆蓋桌面版 z-index，確保在最上層 */
    }

    .fixed #mainMenu.Cover .Menu label:after {
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }



    /* #Content */
    .fixed #Content {
        padding-top: 60px; /* Match Mobile Header Height */
    }
    
    /* 內文區域左右間距，讓內容有呼吸空間 */
    #MainCont {
        padding: 0 1rem; /* 16px 左右間距 */
        box-sizing: border-box;
    }
    
    /* 麵包屑和標題已有間距，不需調整 */
    .Breadcrumb {
        padding: 0.625rem 1rem; /* 10px 16px */
    }
    
    h2.pagetittle {
        padding: 1.25rem 1rem 0.625rem; /* 20px 16px 10px */
    }

    


    /* 手機版內頁修正：防止破版、確保圖示可見 -----------------------------------*/
    /* 防止容器寬度超出 viewport */
    #Wrap,
    .wrapper,
    .container,
    #Main,
    #MainCont {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        margin: 0;
        float: none;
        overflow: visible; /* 修正多重卷軸問題 */
    }

    /* 麵包屑縮小與換行 */
    .Breadcrumb {
        padding: 10px 15px;
        font-size: 0.9em;
        line-height: 1.4;
        word-break: break-all;
    }

    /* 頁面標題 (H2) 縮小與換行 */
    h2.pagetittle {
        padding: 20px 15px 10px 15px;
        font-size: 1.5em;
        line-height: 1.3;
        word-break: break-all;
    }
}

/*===============================================================================
                        xs-l: 480px ~ 767px (30em ~ 47.999375em) - Mobile Landscape
=================================================================================*/
@media only screen and (min-width: 30em) and (max-width: 47.999375em) {
    /* #Banner */
    #Banner {
        background-color: #FFF;
    }

    /* #Partner */
    #Partner {
        display: none;
    }

    /* .Menu */
    .Menu {
        padding-left: 16px;
    }


    .Menu li {
        font-size: 1em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .Menu li a {
        line-height: 1.5em;
        padding: 0 0.75em;
    }
}

/*===============================================================================
                        Footer RWD ( rem-based breakpoints )
=================================================================================*/

/* ≥ 85.0625rem：英文版欄寬比例 ( 必須在 min-width 內，避免低解析度被繼承覆蓋 ) */
@media only screen and (min-width: 85.0625rem) {
    .en #Footer .wrapper {
        grid-template-columns: 1.1fr 0.55fr 1.85fr auto;
    }
}

/* 64.0625rem ~ 85rem ( 1025 ~ 1360px )： 3 欄 grid-areas */
@media only screen and (max-width: 85rem) and (min-width: 64.0625rem) {
    #Footer .wrapper {
        grid-template-columns: minmax(15rem, 1fr) minmax(17rem, 1.35fr) minmax(11.5rem, 12.5rem);
        grid-template-areas:
            "brand nav    social"
            "brand contact contact";
        gap: 2.25rem 2rem;
        align-items: start;
    }

    #Footer #Logos {
        grid-area: brand;
        padding-right: 0.75rem;
    }

    #Footer #Footer-Nav {
        grid-area: nav;
    }

    #Footer #Footer-Nav ul {
        gap: 0.85rem;
    }

    #Footer #Footer-Nav li {
        font-size: 1rem;
    }

    #Footer address {
        grid-area: contact;
        gap: 1rem;
        max-width: none;
    }

    #Footer address p {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    #Footer .smaller {
        margin-top: 1rem;
    }

    #Footer .linkgroup {
        grid-area: social;
        width: 100%;
        max-width: 12.5rem;
        justify-self: end;
        align-self: start;
        align-items: center;
        padding-top: 0;
    }

    #Footer .Footlink {
        width: 100%;
    }

    #Footer .Footlink a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        gap: 0.75rem;
        width: 100%;
    }

    /* EN： Nav 4 項改 2 欄； address 字略小；社群欄稍寬以容納英文標籤 */
    .en #Footer .wrapper {
        grid-template-columns: minmax(16rem, 1.1fr) minmax(9rem, 0.75fr) minmax(11.5rem, 13.5rem);
        gap: 2rem 2.5rem;
    }

    .en #Footer #Footer-Nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.5rem;
    }

    .en #Footer #Footer-Nav li {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .en #Footer #Footer-Nav a {
        display: block;
    }

    .en #Footer address p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .en #Footer .linkgroup {
        max-width: 13.5rem;
    }

    .en .Footlink p {
        font-size: 0.85rem;
    }
}

/* ≤ 64rem ( ≤ 1024px )：共用重置為單欄 */
@media only screen and (max-width: 64rem) {
    #Footer {
        padding: 4rem 0;
    }

    #Footer .wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    #Footer #Logos {
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 2rem;
    }

    #Footer #Footer-Nav {
        padding-top: 0;
    }

    #Footer #Footer-Nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 1.75rem;
        align-items: start;
    }

    #Footer #Footer-Nav li {
        font-size: 1rem;
        line-height: 1.4;
        display: block;
    }

    #Footer #Footer-Nav a {
        display: block;
    }

    #Footer .linkgroup {
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 2rem;
    }
}

/* 56.0625rem ~ 64rem ( 898 ~ 1024px )： 2 欄 grid-areas */
@media only screen and (max-width: 64rem) and (min-width: 56.0625rem) {
    #Footer .wrapper {
        grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 13.5rem);
        grid-template-areas:
            "brand social"
            "nav nav"
            "contact contact";
        gap: 2rem 1.75rem;
        align-items: start;
    }

    #Footer #Logos {
        grid-area: brand;
        min-width: 0;
        border-bottom: none;
        padding-bottom: 0;
        padding-right: 1rem;
    }

    #Footer #Footer-Nav {
        grid-area: nav;
        padding-top: 0.25rem;
    }

    #Footer #Footer-Nav ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem 1.5rem;
    }

    #Footer #Footer-Nav li {
        font-size: 0.98rem;
    }

    #Footer address {
        grid-area: contact;
        gap: 0.9rem;
    }

    #Footer address p {
        font-size: 0.93rem;
        line-height: 1.6;
    }

    #Footer .smaller {
        font-size: 0.77rem;
        margin-top: 0.75rem;
    }

    #Footer .linkgroup {
        grid-area: social;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-self: end;
        width: 100%;
        max-width: 13.5rem;
        border-top: none;
        padding-top: 0;
    }

    #Footer .Footlink {
        width: 100%;
    }

    /* EN： Nav 2 欄；社群欄稍寬； address span 各佔一行 */
    .en #Footer .wrapper {
        grid-template-columns: minmax(0, 1.15fr) minmax(13rem, 14.5rem);
    }

    .en #Footer #Footer-Nav ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.5rem;
    }

    .en #Footer #Footer-Nav li {
        line-height: 1.4;
    }

    .en #Footer #Footer-Nav a {
        display: block;
    }

    .en #Footer address span {
        display: block;
        margin-top: 0.3rem;
    }

    .en #Footer address span::before {
        display: none;
    }

    .en #Footer .linkgroup {
        max-width: 14.5rem;
    }

    .en .Footlink p {
        font-size: 0.85rem;
    }
}

/* 48.0625em ~ 56rem ( 769 ~ 896px )： 2 欄 grid-areas */
@media only screen and (max-width: 56rem) and (min-width: 48.0625em) {
    #Footer {
        padding: 3.5rem 0 4.5rem;
    }

    #Footer .wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(10.75rem, 12rem);
        grid-template-areas:
            "brand social"
            "nav nav"
            "contact contact";
        gap: 1.75rem 1.25rem;
        align-items: start;
    }

    #Footer #Logos {
        grid-area: brand;
        min-width: 0;
        border-bottom: none;
        padding-bottom: 0;
        gap: 1rem;
    }

    #Footer .CompanyFullName {
        font-size: 1.05rem;
    }

    #Footer #Footer-Nav {
        grid-area: nav;
        padding-top: 0.25rem;
    }

    #Footer #Footer-Nav ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.1rem;
    }

    #Footer #Footer-Nav li {
        font-size: 0.94rem;
    }

    #Footer address {
        grid-area: contact;
        gap: 0.7rem;
        padding-top: 0;
    }

    #Footer address p {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    #Footer .smaller {
        font-size: 0.71rem;
        margin-top: 0.5rem;
        line-height: 1.45;
    }

    #Footer .linkgroup {
        grid-area: social;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-self: end;
        width: 100%;
        max-width: 12rem;
        border-top: none;
        padding-top: 0;
    }

    #Footer .Footlink {
        width: 100%;
    }

    /* EN：社群欄加寬容納長標籤； address span 各佔一行 */
    .en #Footer .wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 14rem);
    }

    .en #Footer address span {
        display: block;
        margin-top: 0.3rem;
    }

    .en #Footer address span::before {
        display: none;
    }

    .en #Footer .linkgroup {
        max-width: 14rem;
    }

    .en .Footlink p {
        font-size: 0.85rem;
    }
}

/* ≤ 48em ( ≤ 768px )： Mobile 單欄 */
@media only screen and (max-width: 48em) {
    #Footer {
        padding: 4rem 0 6rem;
    }

    #Footer .wrapper {
        text-align: center;
    }

    #Footer #Logos {
        align-items: center;
        text-align: center;
    }

    #Footer #Logos::before {
        background-position: center top;
    }

    #Footer #Footer-Nav {
        display: none;
    }

    #Footer #Footer-Nav ul {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    #Footer address {
        text-align: center;
        gap: 0.8rem;
    }

    #Footer address p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    #Footer address span {
        display: block;
        margin-top: 0.35rem;
    }

    #Footer address span::before {
        display: none;
    }

    #Footer .smaller {
        font-size: 0.74rem;
        margin-top: 0.6rem;
        line-height: 1.5;
    }

    #Footer .linkgroup {
        justify-content: center;
        border-top: none;
        padding-top: 0;
    }

    .Footlink:hover {
        transform: translateY(-5px);
    }
}