/* ===============================================================================================================================================================


>> A. Custimization #primary-menu for JP Mega Menu / 客製化 Mega Menu 內容區 (亞洲-日本語系) <<

A-1. 無廣告 .product-tab-menu : 
#primary-menu > ul.menu_body_0 > li.product-tab-menu.mega-menu-multi-column > .mega-menu > ul.menu_body_1.mega-menu-fixed > li.product-tabs-menu > div#product-tabs

A-2. 有廣告 .product-tab-menu : 
#primary-menu > ul.menu_body_0 > li.product-tab-menu.mega-menu-multi-column.mega-menu-has-advertisements > .mega-menu > ul.menu_body_1.mega-menu-auto > li.product-tabs-menu > div#product-tabs


--------------------------------------------------------------------

>> B. li.product-tabs-menu / Tab 選單及切換內容區 (亞洲-日本語系) <<

>> li.product-tabs-menu #product-tabs >> 客製化 Mega Menu 內容區
>> li.product-tabs-menu #product-tabs ul.tab-nav >> 選單切換區
>> li.product-tabs-menu #product-tabs ul.tab-nav >> li.ui-tabs-tab 選單切換區
>> li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-tab a >> 選單切換區下的 a 連結文字
>> li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-tab a.ui-tabs-active >> 選單切換區下的 a 連結文字 active 狀態

1. for Product Based :

2. Purpose Based :

=============================================================================================================================================================== */


/*********** for 亞洲 (日文字型) (from Google) **********
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

.locale_jp-ja *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign)::before,
.locale_jp-ja *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign)::after,
.locale_jp-ja *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign) {
    font-family: "Roboto", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Segoe UI", "Segoe UI Light", "Myriad Set Pro", Microsoft JhengHei, "微軟正黑體", Heiti TC, Microsoft YaHei, "微軟雅黑體", simhei, PMingLiU, 新細明體, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, ＭＳ Ｐゴシック, Malgun Gothic, Dotum, Gulim, Trebuchet MS, Lucida Grande, Verdana, Arial, sans-serif !important;
}

*/






/* ===================================================================================
                #primary-menu  客製化內容 + Menu >> 外層設定
=================================================================================== */


/* .mega-menu 有 li.product-tabs-menu 區域 >> 移除內距 / 換裡面物件加入內距 */ 
#primary-menu ul.menu_body_0 .mega-menu .mega-menu-container:has(li.product-tabs-menu) {
    padding: 0; /* 移除內距 */
}





/* ===================================================================================
                             通用 Flexbox 佈局設定
=================================================================================== */

#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a, 

#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav/* Tab Menu */, 
#primary-menu li.product-tabs-menu #product-tabs/* 包含 Tab Menu + Custimized Content */, 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu)/* 最外層 */,
#primary-menu li.product-tabs-menu.sub-menu {
    width: 100%; /* 確保容器佔滿整行 */
}



#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a, 

#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based[aria-hidden="false"] /* by Product 內容區 >> Tab 沒隱藏時 (顯現)  */,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li/* Tab Menu >> li */, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav/* Tab Menu */, 
#primary-menu li.product-tabs-menu #product-tabs/* 包含 Tab Menu + Custimized Content */, 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu)/* 最外層 */ {
    display: flex;
}

#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based[aria-hidden="true"] /* by Purpose 內容區 >> Tab 隱藏時 (消失)  */,
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based[aria-hidden="true"] /* by Product 內容區 >> Tab 隱藏時 (消失)  */ {
    display: none; /* 隱藏未作用中的內容區 */
}

#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav/* Tab Menu */, 
#primary-menu li.product-tabs-menu #product-tabs/* 包含 Tab Menu + Custimized Content */, 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu)/* 最外層 */ {
    flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
}


/* 改成垂直排列 */ 
.aaaaaaaaaaaaa {
    flex-direction: column; /* 垂直排列 (所有物件分行垂直排列) */
}

/* 改成水平排列 */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based/* by Product 內容區 */,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav /* li.product-tabs-menu 區域 >> #product-tabs 的切換選單 */, 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu)/* 最外層區域 >> 包住 li.product-tabs-menu 的上一層 */ {
    flex-direction: row; /* 水平排列 (所有物件排水平排列) */ 
}


/* 改成水平/ 垂直置中 */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav/* #product-tabs 的 ul.tab-nav 切換選單 (li.product-tabs-menu 區域) */ {
    justify-content: center; /* 水平居中 */
    align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
}



/* 物件靠右/ 項目垂直由上到下 */
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu)/* 最外層區域 >> 包住 li.product-tabs-menu 的上一層 */ {
    justify-content: flex-end; /* 靠右物件 */
    align-items: flex-start; /* 項目垂直由上到下 >> 作用於單行（或單列）內的所有子項目 */
}




/* ===================================================================================
           Tab Menu 相關設定 >> By Product / By Purpose Tab Layout
=================================================================================== */

/* 統一高度 >> #product-tabs 的 ul.tab-nav + li + li a 切換選單 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav {
    height: 40px; /* 統一高度 */
    height: 5rem !important; /* 統一高度 */

    height: 55px;/* 統一高度 */
    height: 6rem !important;/* 統一高度 */
}


/* 統一顏色 (default) >> #product-tabs 的 ul.tab-nav + li  + li a 切換選單 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav {
    background-color: #f5f8fa;/* 非作用中的淺灰背景 */
    background-color: rgba(245, 248, 250, 1);/* 非作用中的淺灰背景 */

    background-color: rgba(243, 244, 246, 1.0);/* 非作用中的淺灰背景 */
    background-color: #f3f4f6;/* 非作用中的淺灰背景 */
}


/* 統一顏色 (default) >> #product-tabs 的 ul.tab-nav + li  + li a 切換選單 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(.ui-tabs-active) a:hover, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(.ui-tabs-active):hover {
    background-color: rgba(224, 226, 231, 1.0);/* hover 的中灰背景 */
    background-color: #e0e2e7;/* hover 的中灰背景 */
}


/* 統一顏色 (active) >> #product-tabs 的 li.ui-tabs-active  + li.ui-tabs-active a 切換選單 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active {
    background-color: rgba(255, 255, 250, 1);/* 非作用中的淺灰背景 */
    background-color: #fff;/* 非作用中的淺灰背景 */
}

#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i::before,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a {
    line-height: 1em !important;
}


/* #product-tabs 的 ul.tab-nav 切換選單 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav {
    flex: 0 0 100%; /* flex: [放大比例] [縮小比例] [基準大小] 100% */
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li {
    flex: 0 0 50%; /* 每個 ul.tab-nav li 佔據 50% 的地方 */
    max-width: 50%; /* 桌面版每個 ul.tab-nav li 最多佔 50% 的地方, 但手機版不限 */
    margin: 0 auto;
    padding: 0;
    text-align: center;
    border: none;
}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li::before {
    content: none !important; /* 移除預設的 li 上方條狀 */
}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li 的 active 狀態 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active {}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 預設狀態 (li.product-tabs-menu 區域) */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a {
    display: flex; /* 使用 flex 讓 icon 和文字排好 */
    align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
    align-content: center;   /* 垂直置中 >> 作用於多行（或多列）的子項目 */
    justify-content: center; /* 水平置中 */

    font-size: 16px;
    font-weight: 600;

    font-size: 17px;
    font-weight: 500;

    text-decoration: none;

    color: #94949a; /* 非作用中的文字顏色 */
    color: rgba(19, 19, 20, 0.5) !important; /* 非作用中的文字顏色 */

    width: 100%;
    padding: 10px 20px;
    /* Icon 和文字之間的間距
    gap: 10px; 
    */
}


/* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 的 active 狀態 (li.product-tabs-menu 區域) */
body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul ul.tab-nav li.ui-tabs-active a/* 覆蓋原來的 */,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a i::before, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a {
    color: #183d73; /* 作用中的文字顏色 */
    color: #183d73; /* 作用中的文字顏色 */

    color: rgba(0, 66, 118, 1.0); /* 作用中的文字顏色 */
    color: #004276; /* 作用中的文字顏色 */

    color: rgba(0, 92, 170, 1.0);
    color: #005caa !important;/* 作用中的文字顏色 */
}


/* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 的 hover 狀態 (li.product-tabs-menu 區域) / 不包含 Active */
/* body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul.menu_body_1 > li.product-tabs-menu:hover .tab-container [class*="menuitem_"] a, */
body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul.menu_body_1 > li.product-tabs-menu .tab-container [class*="menuitem_"] a:hover, 

body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul ul.tab-nav li:not(li.ui-tabs-active) a:hover/* 覆蓋原來的 */,
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(li.ui-tabs-active) i:hover::before, 
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(li.ui-tabs-active) a:hover {
    color: rgba(0, 66, 118, 1.0); /* 作用中的文字顏色 */
    color: #004276; /* 作用中的文字顏色 */

    color: rgba(19, 19, 20, 1.0); /* 非作用中的文字顏色 */
    color: #131314 !important; /* 非作用中的文字顏色 */
}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 的 hover 狀態 (li.product-tabs-menu 區域) / 不包含 Active */
body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul.menu_body_1 > li.product-tabs-menu:hover .tab-container [class*="menuitem_"] a {
    color: unset !important;
}


/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a span {
}


/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i {
    display: block;
    margin-right: 17px;
    top: 4px;/* foxt-size: 16px 時 */

    top: 3px;/* foxt-size: 17px 時 */
    top: 0.3rem;/* foxt-size: 17px 時 */
    top: 0rem;/* foxt-size: 17px 時 */
}
    

/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i::before {
    font-size: 1.2em !important;
    font-size: 21px !important;
    font-size: 1.5em !important;
    line-height: 1rem;

    font-family: 'font-icons','Lato';
    font-style: normal;
    font-weight: 400;

    font-family: 'Material Symbols Rounded' !important;
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1;
    font-weight: 500;

    display: inline-block;
    position: relative;

    top: unset !important;
}


/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> by product icon */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li[aria-controls="product-based"] a i::before {
    font-family: 'font-icons','Lato';
    content: "\e6f3";

    font-family: 'Material Symbols Outlined' !important;
    content: "\e241";
    font-size: 1.6em !important;
}

/* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> by purpose icon */
#primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li[aria-controls="purpose-based"] a i::before {
    font-family: 'font-icons','Lato';
    content: "\e605";

    font-family: 'Material Symbols Outlined' !important;
    content: "\eb12";
}




/* 1201px 以上桌機裝置調整 */
@media (min-width: 1200px) {

    /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li {
    flex: 0 0 50%; /* 行動裝置 >> 每個 ul.tab-nav li 佔據 50% 的地方 */
    max-width: 50%;
    }

}



/* 1200px 以下行動裝置調整 */
@media (max-width: 1199px) {

    /* #product-tabs 的 ul.tab-nav 切換選單 >> Mobile Ver 縮短高度跟其他 Item 一致 */
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, 
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li, 
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav {
    height: 5.2rem !important;
    }

    /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li {
    flex: 0 0 100%; /* 行動裝置 >> 每個 ul.tab-nav li 佔據 100% 的地方 */
    max-width: 100%;
    }




    /* 不使用行動裝置下拉選單時 (不加 .hidden-xs, .hidden-sm) >> 延續桌機方式 */
    /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li {
    flex: 0 0 50%; /* 行動裝置 >> 每個 ul.tab-nav li 佔據 50% 的地方 */
    max-width: 50%;
    }

}



/*  480 以下 */
@media (max-width: 480px) {

    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a, 
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a, 
    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tab a {
    font-size: 0.8em !important;
    line-height: 1.25em !important;
    }

}











/* ===============================================================================================================

Tab 物件實際內容區 (.tab-container ) >> by Product / by Purpose 內容區 (不包含 All Products, New Products, Featured Product)

=============================================================================================================== */

/* #product-tabs 下的 >> .tab-container (實際包裹容器) / 不包含 All Products, New Products, Featured Product */
#primary-menu li.product-tabs-menu #product-tabs .tab-container {
    padding: 30px 20px;
    padding: 30px 20px 0px;
    width: 100%;
}

/* by Product + by Purpose 內容區 >> #product-based + #purpose-based >> 距離底部三個 New Product, All Product, Featured Product 項目距離 */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based, 
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based {
    padding-bottom: 40px;
    border-bottom: 2px solid #eaeaea;
}






/* ===================================================================================
                        A. by Product 內容區 (無 AD Banner)  
=================================================================================== */

/* #product-tabs 下的 >> .tab-container (實際包裹容器) >> #product-based Tab 沒隱藏時 (顯現) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container:has(#product-based[aria-hidden="false"]) {
    padding: 30px 30px;
    padding: 30px 30px 0px;
}

/* by Product 內容區 >> #product-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based {

}

/* by Product 內容區 >> Tab 沒隱藏時 (顯現) >> #product-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based[aria-hidden="false"]{
}

/* by Product 內容區 >> Tab 隱藏時(消失) >> #product-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based[aria-hidden="true"]{
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容 >> 外層容器) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content {
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    flex-direction: row;

    /* gap: 10px 10px; */

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    
    box-sizing: inherit;
    /* margin-bottom: 40px; */

    /* Item 間距
    gap: 10px; 
    */
}


#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a, 
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] {
    border-radius: 7px;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] {
    display: block;
    display: flex;
    padding: 0;
    margin: 7px;

    border: 1px solid #eaeaea;
    border-bottom: 1px solid rgba(188, 191, 195, 0.9);

    border: 2px solid #eaeaea;
    border-bottom: 2px solid rgba(188, 191, 195, 0.9);

    box-shadow: 1px 2px 3px 0px rgba(235, 236, 236, 0.9);
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.05);

    background-color: #fff;
}

/* (:hover) by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"]:hover {
border: 1px solid #004276;
border: 2px solid #004276;
border: 2px solid rgba(0, 92, 170, 1.0);
border: 2px solid #005caa;

background-color: #f2f5f9;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 四個一排時 .col-md-3 ) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: 25%;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目) >> a */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a {
    color: #666;
    font-size: 0.75em !important;
    font-size: 11px;
    font-weight: 600 !important;

    position: relative;
    display: flex;

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

    flex-wrap: nowrap;/* 若 items 過多也不換行, 會壓縮items (若有需要讓所有的 flex items 元素壓縮在同一行) */
    box-sizing: border-box;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    padding: 8px 12px;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目) >> a:hover */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a:hover {
    color: #000;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 文字 ) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a span {
    display: inline-block;
}

/* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a img {
    display: block;
    max-width: 120px;

    margin-right: 12px;
}



/* ===================================================================================
                        B. by Purpose 內容區 (無 AD Banner)  
=================================================================================== */

/* #product-tabs 下的 >> .tab-container (實際包裹容器) >> #purpose-based Tab 沒隱藏時 (顯現) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container:has(#purpose-based[aria-hidden="false"]) {
    padding: 30px 20px;
    padding: 30px 30px 0px;
    padding: 30px 40px 0px;
}

/* by Purpose 內容區 >> #purpose-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based {}

/* by Purpose 內容區 >> Tab 沒隱藏到時(顯現) >> #purpose-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based[aria-hidden="false"]{
}

/* by Purpose 內容區 >> Tab 隱藏時 (消失)  >> #purpose-based (產品圖文連結實際內容區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based[aria-hidden="true"]{
}


/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content {
}

/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字列表連結區) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul {
    list-style: none;
    height: auto;
    display: block;
}

/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目 li + li::before + li a >> 行高 ) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li a,
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before,
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li {
    line-height: 1.5em;
}

/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li {
    vertical-align: top;
    white-space: normal;
    position: relative;
    display: flex;
    align-items: flex-start; /* 重要！設定「置頂對齊」，避免圓點被拉伸或跑位 */
    padding-left: 0;
    margin-bottom: 5px;
    text-indent: 0 !important;
}

/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目 >> a 連結::before ) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before {
    content: '●';
    font-size: 0.65rem;
    font-size: 1rem;

    margin-right: 10px;
    margin-top: 0;
    
    top: 0.2rem;
}

/* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目 >> a 連結) */
#primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li a {
    font-size: 13px !important;
    font-size: 1.3rem !important;
    font-weight: 400;
    text-align: left;
   
    display: block;
    width: 100%;
    height: auto;
    padding-left: 0;
}




/* ===========================================================================================================================================
                    RWD 調整 (無 AD Banner)   >> #product-tabs 的所有內容 (li.product-tabs-menu 區域) 
=========================================================================================================================================== */


@media (min-width: 992px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: 23.6%;
    max-width: calc(25% - 1.6%) !important;

    min-height: 60px;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 89px;
    }

}

/* 1201px 以上桌機裝置調整 */
@media (min-width: 1200px) {


    #primary-menu li:is(.product-tab-menu) .mega-menu-container {
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 25px 42px 11px rgba(0, 0, 0, .1);
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 1.7%) !important;
    }

    #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav {
    /* 固定 
    position: static; 
    */
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    min-height: 60px;
    }

}

/* 1500px 以上桌機裝置調整 */
@media (min-width: 1500px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: 23.9%;
    max-width: calc(25% - 1.4%);
    min-height: 60px;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 79px;
    }

}



/* 1600px 以上桌機裝置調整 */
@media (min-width: 1600px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 89px;
    }

}


/* 1900px 以上桌機裝置調整 */
@media (min-width: 1900px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 120px;
    }

}




/* Bowei 筆電寬螢幕(5個排一起) */
@media (min-width: 1200px) and (max-width: 1366px) {

    /* 四個一排時 .col-md-3 */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 1.7%) !important;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 85px;
    }

}



/* 1200px 以下行動裝置調整 */
@media (max-width: 1199px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 1.7%) !important;
    }

    /* #product-tabs 下的 >> .tab-container (實際包裹容器) >> #product-based Tab 沒隱藏時 (顯現) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container:has(#product-based[aria-hidden="false"]) {
    padding: 20px 10px 10px;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container:has(#purpose-based[aria-hidden="false"]) {
    padding: 20px 20px 0px;
    padding: 20px 10px 0px 0px;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based, 
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based {
    padding-bottom: 20px;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul {
    border-top: 0;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li {}

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before {
    top: 1.6em;
    }

    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;

    flex-direction: column; /* 改成直向排列 */

    align-items: center;/* 讓最底下 All Product, New Product... Item 置中對齊 */
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a {
    padding: 8px 12px !important;
    }

}



/* Bowei 筆電寬螢幕(5個排一起) */
@media (min-width: 993px) and (max-width: 1199px) {

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li:last-child {
    border-bottom: 0;
    }

}


/* 992px 以下行動裝置調整 */
@media (max-width: 992px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 四個一排時 .col-md-3 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 2%) !important;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li a {
    padding: 1.5% 0 !important;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 75px;
    }


}


/* 912px 以下行動裝置調整 */
@media (max-width: 912px) {

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li a {
    font-size: 1.1rem !important;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before {
    top: 1.4em;
    }

}

    

/* 912px 以下行動裝置調整 */
@media (max-width: 912px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 四個一排時 .col-md-3 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 2%) !important;
    }

}


/* 768px 以下行動裝置調整 */
@media (max-width: 768px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3, 
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] {
    max-width: unset !important;
    width: 100%;
    }

    #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before {
    top: 1.4rem;
    }

}



/* 480px 以下行動裝置調整 */
@media (max-width: 480px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 圖片 ) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 > a img {
    }

}





/* ===============================================================================================================

                                                  (有 AD Banner) 

>> A-2. Custimization #primary-menu for JP Mega Menu / 客製化 Mega Menu 內容區 (亞洲-日本語系) <<

2. 有廣告 .product-tab-menu : 
#primary-menu > ul.menu_body_0 > li.product-tab-menu.mega-menu-multi-column.mega-menu-has-advertisements > .mega-menu > ul.menu_body_1.mega-menu-auto > li.product-tabs-menu > div#product-tabs

=============================================================================================================== */


#primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container {
    padding: 30px 45px 0px;
}

#primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container:has(#product-based[aria-hidden="false"]) {
    padding: 30px 40px 0px;
}


/* AD Banner 的外框 */
#primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu .mega-menu-advertisements {
    margin-left: 0;
}

#primary-menu ul.menu_body_0 .mega-menu .mega-menu-container:has(.mega-menu-advertisements):has(li.product-tabs-menu) .mega-menu-advertisements {
    padding-top: 30px;
    padding-right: 30px;
}

#primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a {
    font-size: 0.72em !important;
    padding: 6px 12px;
}

#primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #purpose-based [class*="menuitem_"] > a {}







/* --------------------------------------------------------------------------
   1. 預設狀態 (Default)
   條件：雙廣告 + 含有 product-tabs-menu
   動作：給予 3.5% 底部留白
   漸變動態 : 不管是否為 Active 狀態，都強制限制動畫屬性 (保留 width, 排除 padding)
-------------------------------------------------------------------------- */
#primary-menu .mega-menu:has(.mega-menu-advertisements-horizontal .mega-menu-advertisement + .mega-menu-advertisement) ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) {
    /* padding-bottom: 3.5%; */
    min-height: 510px; /* 根據實際兩則 AD Banner 內容高度調整，確保有足夠的空間容納廣告和產品內容 */

    transition-property: width, color, background-color, border-color, opacity, visibility, box-shadow, transform, text-shadow !important;
}


/* --------------------------------------------------------------------------
   2. 動態覆寫 (Active Override)
   條件：雙廣告 + "product-based" Tab 被點擊 (Active)
   動作：底部留白歸零 (瞬間切換，不抖動)
-------------------------------------------------------------------------- */

#primary-menu .mega-menu:has(.mega-menu-advertisements-horizontal .mega-menu-advertisement + .mega-menu-advertisement) ul.menu_body_1:has(li[aria-controls="product-based"].ui-tabs-active) {
    padding-bottom: 0 !important;
}




/* ===========================================================================================================================================
                        (有 AD Banner)  RWD 調整 >> #product-tabs 的所有內容 (li.product-tabs-menu 區域)
=========================================================================================================================================== */

@media (min-width: 992px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 2.4%) !important;
    min-height: 60px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 50px !important;
    }

}

@media (min-width: 1200px) {

    body.locale_jp-ja #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu, 
    #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu {
    max-width: 75vw;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 2.1%) !important;
    min-height: 60px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 50px !important;
    }

}
    
@media (min-width: 1500px) {

    body.locale_jp-ja #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu, 
    #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu {
    max-width: 75vw;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 1.9%) !important;
    min-height: 60px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 65px !important;
    }

}

  
    
@media (min-width: 1700px) {

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 1.6%) !important;
    min-height: 60px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 110px !important;
    }

}




/* Bowei 筆電寬螢幕(5個排一起) */
@media (min-width: 1200px) and (max-width: 1366px) {

    body.locale_jp-ja #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu, 
    #primary-menu ul.menu_body_0 > li:is(.product-tab-menu.mega-menu-has-advertisements) > .mega-menu {
    max-width: 88vw;
    }

    /* by Product 內容區 >> #product-based (產品 & 圖文連結實際內容區 >> 內層產品項目 >> 縮小寬度) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 2.4%) !important;
    min-height: 60px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based [class*="menuitem_"].col-md-3 > a img {
    max-width: 50px !important;
    }

}


@media (max-width: 1199px) {

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container:has(#purpose-based[aria-hidden="false"]) {
    padding: 20px 10px 0px 0px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container:has(#product-based[aria-hidden="false"]) {
    padding: 20px 10px 10px;
    }

    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-tabs .tab-container #product-based [class*="menuitem_"] > a {
    padding: 3% 3% !important;
    }

}










/* ===================================================================================
  Product Item / Mobile 垂直式排列 / 另加沒有外框時 >> .square-item (for Product Item)
=================================================================================== */


@media (max-width: 1199px) {

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 14%) !important;
    }

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a {
    flex-direction: column;
    padding: 8px 12px 10px !important;
    }

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a img {
    max-width: 89px;
    margin-right: 0 !important;
    margin-bottom: 6px;
    }



/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/

    /* Mobile 直式排列 (沒有外框時) / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] {
    border: none;/* 移除外框 >> 節省空間 */
    box-shadow: none; /* 移除陰影 */
    }

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 16.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
    }

    /* Mobile 直式排列 (沒有外框時) / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"]:hover {
    background-color: transparent; /* 移除 hover 背景色 */
    }

    /* Mobile 直式排列 (沒有外框時) / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a {
    padding: 4px 4px !important;/* 沒有外框時，縮短內距 */
    }

    /* Mobile 直式排列 (沒有外框時) / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a img {
    max-width: 89px;
    background-color: #f1f2f4;/* 沒有外框時，圖片加背景色 */
    background-color: #f4f5f9;/* 沒有外框時，圖片加背景色 */
    padding: 5% 4%;/* 沒有外框時，圖片加內距 */
    border-radius: 5px; /* 沒有外框時，圖片加圓角 */
    margin-bottom: 8px;/* 沒有外框時，圖片加下方間距 */
    }

    /* Mobile 直式排列 (有 AD Banner/ 沒有外框時)  / .square-item (Product Item) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 > a img {
    max-width: 89px !important;
    }

}


@media (max-width: 1112px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 17.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
    }

    /* Mobile 直式排列 (有 AD Banner/ 沒有外框時)  / .square-item (Product Item) */
    #primary-menu .product-tab-menu.mega-menu-has-advertisements li.product-tabs-menu #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 > a img {
    max-width: 85px !important;
    max-width: 75px !important;
    }

}


@media (max-width: 1040px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/

    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 15.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
    }

    /* Mobile 直式排列 (有 AD Banner/ 沒有外框時)  / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu.mega-menu-has-advertisements #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 14.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
    }
    
}
    


@media (max-width: 962px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/

    /* Mobile 直式排列/ .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 15.5%) !important;
    }

    /* Mobile 直式排列/ .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a {
    font-size: 0.7em !important;
    }

    /* Mobile 直式排列/ .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"] > a img {
    max-width: 77px;
    }

}


@media (max-width: 898px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
    
        /* Mobile 直式排列 / .square-item (Product Item) */
        #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
        max-width: calc(25% - 14.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
        }
        
}


@media (max-width: 807px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
    
        /* Mobile 直式排列 / .square-item (Product Item) */
        #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
        max-width: calc(25% - 14.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
        }

        /* Mobile 直式排列 (有 AD Banner/ 沒有外框時)  / .square-item (Product Item) */
        #primary-menu li.product-tabs-menu.mega-menu-has-advertisements #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
        max-width: calc(25% - 13.3%) !important;/* 沒有外框時，縮短 Item 寬度 */
        }
        
}


@media (max-width: 768px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
        
    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 13%) !important;/* 沒有外框時，縮短 Item 寬度 */
    }
            
}



@media (max-width: 666px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
            
    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 11%) !important;
    }
                
}




@media (max-width: 574px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
                
    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(25% - 9%) !important;
    }
                    
}



@media (max-width: 480px) {


/*************** Mobile 直式排列 (沒有外框時) / .square-item (Product Item) *******************/
                
    /* Mobile 直式排列 / .square-item (Product Item) */
    #primary-menu li.product-tabs-menu #product-tabs .tab-container #product-based .product-based-content.square-item [class*="menuitem_"].col-md-3 {
    max-width: calc(20%) !important;
    }
                    
}










/* ===================================================================================
        最底下 >> 三個選單項目設定 (All Products, New Products, Featured Product) 
=================================================================================== */


/* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 往左移動一點 (992px 以上) */
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_compatible-power-adapters[class*="menuitem_"],

#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_all-products[class*="menuitem_"], 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_new-products[class*="menuitem_"], 
#primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_featured-product[class*="menuitem_"] {
    margin: 7px 0 10px;
    font-size: 0.85em !important;
}

@media (min-width: 992px) {}



@media (min-width: 1200px) {

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 往左移動一點 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_compatible-power-adapters[class*="menuitem_"],
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_all-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_new-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_featured-product[class*="menuitem_"] {
    transform: translateX(-15px);/* 往左移動 15px */
    }

}



/* 1199px 以下行動裝置調整 */
@media (max-width: 1199px) {

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"] {
    border-top: 0;
    }

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a ,
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] {
    height: 50px;
    width: 100%;
    }

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;

    width: 98%;
    width: calc(100% - 3%);
    }

    /* 最底下三個選單項目:last-child (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"]:last-child {
    border-bottom: none;
    }

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a {
    font-size: 0.95em !important;
    font-size: 0.9em !important;
    font-weight: 500;

    padding-left: 40px !important;

    padding: 3% 1% !important;
    }

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 加上箭頭 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a:after {
    color: #2292d3;
    font-family: "FontAwesome";
    content: "\f105";
    margin: 0 11px;
    }

}



/* Bowei 筆電寬螢幕(5個排一起) */
@media (min-width: 993px) and (max-width: 1199px) {

    /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 往左移動一點 */
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_compatible-power-adapters[class*="menuitem_"],
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_all-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_new-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_featured-product[class*="menuitem_"] {
    /* 往左移動 15px
    transform: translateX(-15px); 
    */
    }

}



/* 991px 以下行動裝置調整 */
@media (max-width: 992px) {

    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a {
    padding-left: 20px !important;
    }

}


/* 768px 以下行動裝置調整 */
@media (max-width: 768px) {

    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_compatible-power-adapters[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_all-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_new-products[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_featured-product[class*="menuitem_"], 
    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] {
    width: 100%;
    }

}


/* 480px 以下行動裝置調整 */
@media (max-width: 480px) {

    #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li[class*="menuitem_"][class*="menuitem_"] a {
    font-size: 0.8em !important;
    line-height: 1.25em !important;
    }

}