/*=====================================================================================================================================================
【 ATEN Blue Brand Color System + .B2C-Style 】
>> "2025 新 ATEN 藍樣式 (.B2C-Style)" + "Layout/ Container 調整 (.Optimization-Layout_2024)" >> 兩者整合
* 暫存檔案 (.B2C-Style Default/ Default White Theme) >> https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/CSS/CPC-Related-Design/CPC_Design.css
* 另需引入搭配暫存檔案 (.Dark_Theme/ 黑化底色佈景) >> https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/CSS/CPC-Related-Design/Dark_Theme.css
* 另需引入搭配暫存檔案 (.Mobile-Layout/ 行動優化) >> https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/CSS/CPC-Related-Design/Mobile-Layout.css
======================================================================================================================================================*/
/* 新的 body.B2C-Style (這一段要加在全站的 body 的 class 裡) >> 要放在所有的 @import 的最下方, 引用路徑 :
@import url('https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/CSS/CPC-Related-Design/CPC_Design.css');
*/
/* 舊的 html.ATEN-Blue-Brand-Color (這一段要加在全站的 html 的 class 裡) >> 要放在所有的 @import 的最下方, 引用路徑 :
@import url('//assets.aten.com/webpage/shared/CMS_Libraries/CSS/Color-Theme-UI/ATEN-Blue-Brand_Color-Theme_2024.css');
*/
/* ATEN Blue :
>> #074576;
>> rgba(7,69,118, 1.0);
*/
/* =====================================================================================================
【 各種 Icon 類別 (Google Material 樣式) 】
** Html 用 :
*** 圖示 for Material Icon (((From Google Icon)))
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
=====================================================================================================
>> 如何套用 :
https://developers.google.com/fonts/docs/material_symbols?hl=zh-tw
-- 舊版寫法
font-family: "Material Icons Outlined"; (基本為 "Material", 後墜加上不同效果,如:Icons Outlined)
content: "search";
content: "\e8b6";
-- 新版寫法 :
font-family: 'Material Symbols Outlined' !important; (基本為 "Material", 後墜加上不同效果,如:Symbols Outlined)
content: "arrow_right_alt(長條)";
content: "\e941";
>> Icon 不同效果 : (目前官網只 import >> Outlined/ Filled 效果)
-- Filled: "Material Symbols" / "Material Icons" >> 樣式需套用 font-variation-settings: 'FILL' 1;
-- Outlined: "Material Symbols Outlined" / "Material Icons Outlined" (方角)
-- Sharp: "Material Symbols Sharp" / "Material Icons Sharp"
-- Rounded: "Material Symbols Roundeded" / "Material Icons Round" (圓角)
-- Two tone: "Material Symbols Two Tone" / "Material Icons Two Tone"
>> for Google Material Icon 變數 :
-- font-variation-settings: 'FILL' 0; (影響 Icon 滿底/線條 >> default 0 ( 0 / 1)
-- font-variation-settings: 'GRAD' 0; (進一步影響 Icon 粗細 >> 除 weight 之外, 還可以再微調 ( -25 / 0 / 200), default 0)
-- font-variation-settings: 'opsz' 24; (Icon 縮放大小時, 自動粗細調整 ( 20 ~ 48 )
-- font-variation-settings: 'wght' 400; (Icon 粗細 = weight )
>> 以上如果沒有套入正確的值就不會有效果:
.list-icon li::before {
content: "search";
font-family: 'Material Symbols Outlined' !important;
content: "arrow_right_alt(長條)";
font-size: 1.2rem;
line-height: 1rem;
top: 0.28rem;
font-variation-settings: 'FILL' 1; >> 要反白填充底色時
}
-- 也可以直接用 span
arrow_right_alt
*/
/*************************************************************************************************************************
.B2C-Style (2025) 【 Layout 外框架 】 >> for 【 Default Style 】
>> Container 變寬
**************************************************************************************************************************/
/* 768 以上 */
@media (min-width: 768px) {
/* Overview Tab 以外的 Tab 內 .container >> 不能包含 Overview 裡面有 .Full-Width-Container */
.B2C-Style #refs:not(:has(.All-Rich-Content-Section .Full-Width-Container)) #desktop-tab .tab-container.tab-content :is(#features-tab, #diagram-tab, #specification-tab, #support-download-tab, #applications-tab) .container,
/* 【修正重點】>> 當 .All-Rich-Content-Section 下面的 section 沒有 .Full-Width-Container 時，讓兩種版型的 container 都設為 100% 寬度 */
/* 版型一：section 下面有 .container 子元素，檢查 section 下面沒有 .Full-Width-Container 子元素 */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab .tab-container.tab-content .tab-content .All-Rich-Content-Section:not(:has(section .Full-Width-Container)) section .container,
/* 版型二：section 本身就有 container 類別，檢查 section 本身沒有 .Full-Width-Container 類別 */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab .tab-container.tab-content .tab-content .All-Rich-Content-Section:not(:has(section.Full-Width-Container)) section.container {
width: 100% !important;
}
}
/* 1280 以上 */
@media (min-width: 1280px) {
/* 產品內頁主要容器加寬 (排除產品頁面的特殊容器) */
.B2C-Style div#refs:not(:has(.tab-content .All-Rich-Content-Section section .Full-Width-Container)) #desktop-tab/* Product Page >> 沒有滿版的 Tab Menu */,
/* Product Page >> 沒有滿版的 Tab Menu .B2C-Style div#refs:not(.Full-Width-Container) #desktop-tab, */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .container:first-child/* 排除 .package-content .container */,
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container /* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */,
.B2C-Style section#content .content-wrap .container .top_searchbox.fixed .container/* Search Result Page >> Search Box (Fixed) */,
.B2C-Style #next_prev_product + #content > .content-wrap > .container,
.B2C-Style #product_tab_menu .container,
.B2C-Style section#breadcrumb .boxed-slider .container,
/* .B2C-Style section#content .content-wrap .container:not(.single-product .product #refs #desktop-tab .container), */
.B2C-Style section#content .content-wrap .container:not(#Case_Studies_container.container):not(.ePublication_tab-Content #Tab-Content_container.container):not(.top_searchbox .container):not(section.quote-cart + #content .container.confirm):not(.container.core-container .container):not(.container.core-container .tab-container):not(.single-product .product #refs #desktop-tab .container),
/* Overview >> 下面的 .container (滿版/不滿版全部包括) >> .B2C-Style section#content .content-wrap section .container, */
.B2C-Style section#content .content-wrap .container + div#refs:has(.Full-Width-Container) .container:not(:has(.package-content))/* Overview >> 下面的 .container (有 .Full-Width-Container 滿版時) */ {
width: 80%;
width: 85%;
}
/* 產品內頁 Tab 容器 >> 因為主要 .container 是 63% >> 65% */
.B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg),
.B2C-Style #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container,
.B2C-Style #overview-tab .cd-section > .Full-Width-Container) {
padding: 0 calc((100% - 80%) / 2);
padding: 0 calc((100% - 85%) / 2);
}
/* 當有 Full-Width-Container 時，package-content 容器不要滿版 */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .All-Rich-Content-Section + div.container:has(.package-content) {
width: 80%;
margin: 0 auto !important;
width: 85%;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* 產品內頁主要容器加寬 (排除產品頁面的特殊容器) */
.B2C-Style div#refs:not(:has(.tab-content .All-Rich-Content-Section section .Full-Width-Container)) #desktop-tab/* Product Page >> 沒有滿版的 Tab Menu */,
/* Product Page >> 沒有滿版的 Tab Menu .B2C-Style div#refs:not(.Full-Width-Container) #desktop-tab, */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .container:first-child/* 排除 .package-content .container */,
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container /* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */,
.B2C-Style section#content .content-wrap .container .top_searchbox.fixed .container/* Search Result Page >> Search Box (Fixed) */,
.B2C-Style #next_prev_product + #content > .content-wrap > .container,
.B2C-Style #product_tab_menu .container,
.B2C-Style section#breadcrumb .boxed-slider .container,
/* .B2C-Style section#content .content-wrap .container:not(.single-product .product #refs #desktop-tab .container), */
.B2C-Style section#content .content-wrap .container:not(#Case_Studies_container.container):not(.ePublication_tab-Content #Tab-Content_container.container):not(.top_searchbox .container):not(section.quote-cart + #content .container.confirm):not(.container.core-container .container):not(.container.core-container .tab-container):not(.single-product .product #refs #desktop-tab .container),
/* Overview >> 下面的 .container (滿版/不滿版全部包括) >> .B2C-Style section#content .content-wrap section .container, */
.B2C-Style section#content .content-wrap .container + div#refs:has(.Full-Width-Container) .container:not(:has(.package-content))/* Overview >> 下面的 .container (有 .Full-Width-Container 滿版時) */ {
width: 1170px;
width: 63%;
width: 1334px;
width: 65%;
width: 1380px;
width: 75%;
}
/* 產品內頁 Tab 容器 >> 因為主要 .container 是 63% >> 65% */
.B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg),
.B2C-Style #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container,
.B2C-Style #overview-tab .cd-section > .Full-Width-Container) {
padding: 0 calc((100% - 65%) / 2);
padding: 0 calc((100% - 75%) / 2);
}
/* 需另客製 (Markets Listing/ ePub / Rich Content(無 .Full-Width-Container) >> 下面的 .container >> 因頁面有兩個 Container >> 會縮排兩次 ) */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab .tab-container.tab-content .tab-content .All-Rich-Content-Section + div.container:has(.package-content)/* .package-content 包裝說明沒 Full-Width 時候 */,
.B2C-Style section#content .content-wrap .container .top_searchbox .container:not(.top_searchbox.fixed .container)/* Search Result Page >> Search Box (排除 Fixed) */,
.B2C-Style section#content .content-wrap .container #Case_Studies_container.container,
.B2C-Style section#content .content-wrap .container .ePublication_tab-Content #Tab-Content_container.container,
.B2C-Style .container .container.confirm,
.B2C-Style .container.core-container .tab-container,
.B2C-Style .container .container {
width: 100% !important;
}
/* 當有 Full-Width-Container 時，package-content 容器不要滿版 */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .All-Rich-Content-Section + div.container:has(.package-content) {
width: 65% !important;
max-width: 1334px !important;
margin: 0 auto !important;
width: 1380px;
width: 75%;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {
/* 產品內頁主要容器加寬 (排除產品頁面的特殊容器) */
.B2C-Style div#refs:not(:has(.tab-content .All-Rich-Content-Section section .Full-Width-Container)) #desktop-tab/* Product Page >> 沒有滿版的 Tab Menu */,
/* Product Page >> 沒有滿版的 Tab Menu .B2C-Style div#refs:not(.Full-Width-Container) #desktop-tab, */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .container:first-child/* 排除 .package-content .container */,
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container /* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */,
.B2C-Style section#content .content-wrap .container .top_searchbox.fixed .container/* Search Result Page >> Search Box (Fixed) */,
.B2C-Style #next_prev_product + #content > .content-wrap > .container,
.B2C-Style #product_tab_menu .container,
.B2C-Style section#breadcrumb .boxed-slider .container,
.B2C-Style section#content .content-wrap .container:not(#Case_Studies_container.container):not(.ePublication_tab-Content #Tab-Content_container.container):not(.top_searchbox .container):not(section.quote-cart + #content .container.confirm):not(.container.core-container .container):not(.container.core-container .tab-container):not(.single-product .product #refs #desktop-tab .container),
/* Overview >> 下面的 .container (滿版/不滿版全部包括) >> .B2C-Style section#content .content-wrap section .container, */
.B2C-Style section#content .content-wrap .container + div#refs:has(.Full-Width-Container) .container:not(:has(.package-content))/* Overview >> 下面的 .container (有 .Full-Width-Container 滿版時) */,
.B2C-Style section#content .content-wrap .container:not(.single-product .product #refs #desktop-tab .container) {
width: 1236px;
width: 67%;
width: 1436px;
width: 70%;
}
/* 產品內頁 Tab 容器 >> 因為主要 .container 是 65% >> 70% */
.B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg),
.B2C-Style #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container,
.B2C-Style #overview-tab .cd-section > .Full-Width-Container) {
padding: 0 calc((100% - 67%) / 2);
padding: 0 calc((100% - 70%) / 2);
}
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .All-Rich-Content-Section + div.container:has(.package-content) {
width: 70% !important;
max-width: 1436px !important;
margin: 0 auto !important;
}
}
/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {
/* 產品內頁主要容器加寬 (排除產品頁面的特殊容器) */
.B2C-Style div#refs:not(:has(.tab-content .All-Rich-Content-Section section .Full-Width-Container)) #desktop-tab/* Product Page >> 沒有滿版的 Tab Menu */,
/* Product Page >> 沒有滿版的 Tab Menu .B2C-Style div#refs:not(.Full-Width-Container) #desktop-tab, */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .container:first-child/* 排除 .package-content .container */,
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container /* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */,
.B2C-Style section#content .content-wrap .container .top_searchbox.fixed .container/* Search Result Page >> Search Box (Fixed) */,
.B2C-Style #next_prev_product + #content > .content-wrap > .container,
.B2C-Style #product_tab_menu .container,
.B2C-Style section#breadcrumb .boxed-slider .container,
/* .B2C-Style section#content .content-wrap .container:not(.single-product .product #refs #desktop-tab .container), */
.B2C-Style section#content .content-wrap .container:not(#Case_Studies_container.container):not(.ePublication_tab-Content #Tab-Content_container.container):not(.top_searchbox .container):not(section.quote-cart + #content .container.confirm):not(.container.core-container .container):not(.container.core-container .tab-container):not(.single-product .product #refs #desktop-tab .container),
/* Overview >> 下面的 .container (滿版/不滿版全部包括) >> .B2C-Style section#content .content-wrap section .container, */
.B2C-Style section#content .content-wrap .container + div#refs:has(.Full-Width-Container) .container:not(:has(.package-content))/* Overview >> 下面的 .container (有 .Full-Width-Container 滿版時) */ {
width: 80% !important;
max-width: 1180px !important;
width: 88% !important;
max-width: 1200px !important;
}
/* 產品內頁 Tab 容器 >> 因為主要 .container 是 63% >> 65% */
.B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg),
.B2C-Style #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container,
.B2C-Style #overview-tab .cd-section > .Full-Width-Container) {
padding: 0 calc((100% - 80%) / 2) !important;
padding: 0 calc((100% - 88%) / 2) !important;
}
/* 當有 Full-Width-Container 時，package-content 容器不要滿版 */
.B2C-Style section#content .content-wrap .core-container #product_detail .single-product .product #refs #desktop-tab:has(#overview-tab .cd-section.Full-Width-Container, #overview-tab .cd-section > .Full-Width-Container) .tab-container.tab-content .tab-content .All-Rich-Content-Section + div.container:has(.package-content) {
width: 80% !important;
max-width: 1180px !important;
margin: 0 auto !important;
width: 88% !important;
max-width: 1200px !important;
}
}
/* =====================================================================================================
【 Default Style 】>> 【 Font Family (全球 + 亞洲字體) 】 (.B2C-Style >> 2024)
(**** 需要排除 Icon Font ****)
=====================================================================================================
/* for 亞洲 (繁中 / 簡中 / 日文 / 韓文 字型) (from Google) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
/* 全球字體全套用 (EN) */
.B2C-Style *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::before,
.B2C-Style *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::after,
.B2C-Style *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded) {
font-family: "Roboto", "Segoe UI", "Segoe UI Light", "Myriad Set Pro", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", 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;
}
/* 亞洲字體套用 (Asian) (Noto Sans TC / SC / JP / KR) */
.B2C-Style.locale_tw-zh *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::before,
.B2C-Style.locale_tw-zh *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::after,
.B2C-Style.locale_tw-zh *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded),
.B2C-Style.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)::before,
.B2C-Style.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)::after,
.B2C-Style.locale_jp-ja *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded),
.B2C-Style.locale_kr-ko *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::before,
.B2C-Style.locale_kr-ko *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::after,
.B2C-Style.locale_kr-ko *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded),
.B2C-Style.locale_cn-zh *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::before,
.B2C-Style.locale_cn-zh *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded)::after,
.B2C-Style.locale_cn-zh *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded) {
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;
}
/* Icon 套用 i 或者 .icon- */
.B2C-Style #wrapper [class*="icon-"]::before,
.B2C-Style #wrapper [class*="icon-"]::after,
.B2C-Style #wrapper [class*=" icon-"]::before,
.B2C-Style #wrapper [class*=" icon-"]::after,
.B2C-Style #wrapper [class*="icon-line-"]::before,
.B2C-Style #wrapper [class*="icon-line-"]::after,
.B2C-Style #wrapper [class*=" icon-line-"]::before,
.B2C-Style #wrapper [class*=" icon-line-"]::after,
.B2C-Style #wrapper [class*="icon-line2-"]::before,
.B2C-Style #wrapper [class*="icon-line2-"]::after,
.B2C-Style #wrapper [class*=" icon-line2-"]::before,
.B2C-Style #wrapper [class*=" icon-line2-"]::after,
.B2C-Style .side-header #primary-menu ul > li.sub-menu > a::before,
.B2C-Style .side-header #primary-menu ul > li.sub-menu > a::after {
font-family: 'font-icons','Lato' !important;
}
/* Icon 套用 FontAwesome */
.B2C-Style .fa::before,
.B2C-Style .fa::after,
.B2C-Style .fas::before,
.B2C-Style .fas::after {
font-family: 'FontAwesome' !important;
}
/* Icon 套用 FontAwesome 5 Brands */
.B2C-Style .fab::before,
.B2C-Style .fab::after {
font-family:"Font Awesome 5 Brands" !important;
}
/* Icon 套用 FontAwesome 5 Free */
.B2C-Style .fa_v5::before,
.B2C-Style .fa_v5::after,
.B2C-Style .far::before,
.B2C-Style .far::after,
.B2C-Style .fas_v5::before,
.B2C-Style .fas_v5::after {
font-family:"Font Awesome 5 Free" !important;
}
/*************************************************************************************************************************
【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* 全域先不用變數 (影響太大) >> 比 html 還大 */
/* :root > 選擇器標籤 >> 在 HTML 中通常是 使用 */
/* :host > 選擇器標籤 >> 在 Web 組件（如使用Shadow DOM的自定義元素）中使用的 */
/* 這是一個 CSS 變量的聲明。在這裡，變量名稱是 [--rem]，值是 [16] */
/* 若 font-size: calc(var(--rem) * 1px); 代表 >> (此使用 [--rem 變量 16] x [1px] = 16px) */
/* 若 font-size: calc(var(--rem) * 2px); 代表 >> (此使用 [--rem 變量 16] x [2px] = 32px) */
:host, :root {
/*--rem: 16;*/
}
/* 定義網站的 Html tag 下 > Font 的最小 Size 基本大小 (若設為 16px 為基本單位 = 1rem ) */
/* ATEN 官網基本是 11pt = 14.67px */
html.B2C-Style,
html {
font-size: 16px;/* 等於 12pt */
font-size: 12pt;/* 等於 16px */
font-weight: 300;
font-weight: 400;
line-height: 1.6;
line-height: 1.54;
letter-spacing: -0.01em;
letter-spacing: 0.01em;
}
/* 定義網站的 Font 的最小 Size 基本大小 >> 暫時排除 .ePublication_tab-Content */
html.B2C-Style body,
html body {
font-size: 1rem; /* 此使用 Html 基本 font-size 為 [16px] x [1rem] = 16px) */
}
/* 定義網站的 Font 的最小 Size 基本大小 >> 暫時排除 .ePublication_tab-Content
html.B2C-Style body:not(body .ePublication_tab-Content),
html body:not(body .ePublication_tab-Content) {
font-size: 1rem;
}
*/
/*************************************************************************************************************************
( A-1 ). 【 Font Size/ Weight (字級大小/粗細/ 間距) 】 >> 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/***************************** Font 字統一所有 letter space (字距/ 間距) ******************************/
/* letter-spacing >> .04em */
.B2C-Style #product_tab_menu .add-to-cart.button {
letter-spacing: .04rem;
}
/* letter-spacing >> .01em */
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .compare-modal .description/* Comparison Table > Product Description */,
.B2C-Style #breadcrumb + #content .row div.product-category > div.sect-divider div.product-title h3/* Only Feature Article Listing >> H3 */,
.B2C-Style .single-product .add-to-cart.button,
.B2C-Style .comparison_block,
.B2C-Style .breadcrumb > li,
.B2C-Style #content .paragraph,
.B2C-Style #content p {
letter-spacing: .01rem;
}
/* letter-spacing >> .01em (Important) */
.B2C-Style #breadcrumb + #content .row div.product-category > div.sect-divider div.product-title h3/* Only Feature Article Listing >> H3 */ {
letter-spacing: .01rem !important;
}
.B2C-Style .row .product_section div.product-category .product-desc div.product-price/* Product Subcategory >> .product-category >> .product-price */ {
letter-spacing: 0rem;
}
/* letter-spacing >> -0.01em */
.B2C-Style #gqc_preview.modal .modal-body h2 + span/* Get Quote Modual >> Lightbox > Description */,
body[class*="device-x"].B2C-Style nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a,
.B2C-Style.Mobile-Layout nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a,
.B2C-Style .product_list .key-list li span,
.B2C-Style .key-list li span,
.B2C-Style .product_button .discontinued-product a.button/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style .Labeled_item/* Search Result Page >> Label */,
.B2C-Style span.search_labelled/* Search Result Page >> Label */,
.B2C-Style #filter_form,
.B2C-Style #product_category_list,
.B2C-Style .modal-body h2.gqc_title/* Get Quote Modual >> Lightbox > Title(H2) */,
.B2C-Style .modal-body span.gqc_desc/* Get Quote Modual >> Lightbox > Description */,
.B2C-Style .well-compare .compare-modal a.remove-btn/* Compare Model >> Product Item > Remove Text Link */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less) */,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style .msrp,
.B2C-Style div.product-title h3/* Feature Article + Product Listing */,
.B2C-Style .product-title h3/* Feature Article + Product Listing */,
.B2C-Style #filter_form h4 /* Product Listing > Filter */,
.B2C-Style #filter_form .checkbox /* Product Listing > Filter */,
.B2C-Style .well-compare h3/* Comparsion Modual > Title(H4),
.B2C-Style .modal-header h4/* Lightbox Modal > Title(H4) */,
.B2C-Style .modal-header h3.modal-title/* Lightbox Modal > Title(H3) */,
.B2C-Style .btn[class*="btn-"],
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > h2.mega-menu-advertisement-title,
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-text,
.B2C-Style #primary-menu ul li a,
.B2C-Style [class*="widget_"] li a,
.B2C-Style .product-detail-price h1,
.B2C-Style .features-abstract,
.B2C-Style section.breadcrumb_block .title h1/* 麵包屑路徑 (Dynamic 頁面) */,
.B2C-Style section#breadcrumb .title h1/* 麵包屑路徑 (一般頁面) */,
.B2C-Style h1.Big3,
.B2C-Style h1.Big2,
.B2C-Style h1.Big,
.B2C-Style h1 {
letter-spacing: -0.01rem;
}
/* letter-spacing >> -0.02em */
.B2C-Style h1.Big3,
.B2C-Style h1.Big2,
.B2C-Style h1.Big,
.B2C-Style h1 {
letter-spacing: -0.02rem;
}
/* letter-spacing >> -0.05em */
.B2C-Style .core-container .product_button h1/* Product Page > Title (H1) */ {
letter-spacing: -0.05rem;
}
/* letter-spacing >> -0.001em */
.B2C-Style div#support-download-tab h3.panel-title,
.B2C-Style div#support-download-tab .search_ignore h3,
/* ATEN-Blue-Brand-Color >> H3.slogan-big (Product Page > Rich Content) */
#gqc_preview a.add-to-cart.button.nomargin.btn-full-width/* Add to Cart Button (Lightbox) >> Get Quote Preview */,
.B2C-Style .qs-block .qs-header ul.qs-filter li a/* Product Category >> Spotlightg >> Filter Menu */,
.B2C-Style .qs-block .qs-header ul.qs-filter li/* Product Category >> Spotlightg >> Filter Menu */,
.B2C-Style .qs-block .qs-header ul.qs-filter/* Product Category >> Spotlightg >> Filter Menu */,
.B2C-Style .qs-block .qs-header/* Product Category >> Spotlightg >> Filter Menu */,
.B2C-Style .product_section .sect-divider .product-desc .product-title h3/* All Product + Subcategory Product Page*/,
.B2C-Style .product-detail-price a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */,
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a > link(View) */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a + a > link(Download) */,
.B2C-Style #comparison_listing table tr td,
.B2C-Style #comparison_listing table tr th,
.B2C-Style .table.comparisontable tr th,
.B2C-Style .table.comparisontable tr td,
.B2C-Style .blank-product a/* Compare Model >> blank-product > a */,
.B2C-Style .well-compare h3/* Compare Model >> Compare Box >> Title */,
.B2C-Style .well-compare .compare-modal p b/* Compare Model >> Product Description >> bold */,
.B2C-Style #product_listing #filter_form label,
.B2C-Style #product_lists div.product-title h3/* Only Product Listing */,
.B2C-Style #product_lists .product-title h3/* Only Product Listing*/,
.B2C-Style #content div.product-price p,
.B2C-Style div.product-price p,
.B2C-Style #applications-tab p,
.B2C-Style #support-download-tab p,
.B2C-Style #specification-tab p,
.B2C-Style #diagram-tab p,
.B2C-Style #features-tab p,
.B2C-Style #overview-tab p,
.B2C-Style #overview-tab h3.slogan-big,
.B2C-Style #top-bar .widget > h4,
.B2C-Style #top-bar a,
.B2C-Style :is(h2, h3, h4) {
letter-spacing: -0.001em;
}
/* letter-spacing >> -0.001em */
/* Product Listing Filter >> Label (要用 !important 覆寫行內) */
.B2C-Style .product-detail-price a/* Search Result Page >> Result Item > a */,
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */,
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a > link(View) */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a + a > link(Download) */,
.B2C-Style #sidebar h3/* Search Result Page >> Filter > H3 */,
.B2C-Style #sidebar h2/* Search Result Page >> Filter > H2 */,
.B2C-Style .filter_label/* Search Result Page >> Filter > Label */,
.B2C-Style #sidebar h3/* Search Result Page >> Filter > H3 */,
.B2C-Style #sidebar h2/* Search Result Page >> Filter > H2 */,
.B2C-Style .filter_label/* Search Result Page >> Filter > Label */,
.B2C-Style #product_listing #filter_form label {
letter-spacing: -0.001em !important;/* 覆寫回原來的 */
}
/***************************** Font 字統一所有 line height (行距) ******************************/
/* line-height >> 1.54rem (Default) */
.B2C-Style #content p {
line-height: 1.54rem;
}
/* line-height >> 1rem */
.B2C-Style .compare-modal .description/* Comparison Table > Product Description */,
.B2C-Style #gotoTop/* 上箭頭(短) >> 回到最上 */,
.B2C-Style .top_searchbox + div a.btn-load-more i/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more i,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> All Page */ {
line-height: 1rem;
}
/* line-height >> 1.15rem */
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-text {
line-height: 1.15rem;
}
/* ATEN-Blue-Brand-Color >> 1.21rem */
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style #product_lists .sect-divider .product-price,
.B2C-Style h1 {
line-height: 1.21rem;
}
/* ATEN-Blue-Brand-Color >> 1.21rem */
.B2C-Style .well-compare .compare-modal p/* Compare Model >> Product Description */,
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */ {
line-height: 1.21rem !important/*覆寫回原來*/;
}
/* line-height >> 1.25rem */
.B2C-Style #home_promotion_top .promo_item .hover_block p,
.B2C-Style .promo_block .promo_item .hover_block p,
.B2C-Style .row .product_section div.product-category .product-desc div.product-price/* Product Subcategory >> .product-category >> .product-price */,
.B2C-Style .tab-content.features-abstract li,
.B2C-Style .tab-content.features-abstract li::before,
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > h2.mega-menu-advertisement-title {
line-height: 1.25rem;
}
/* line-height >> 1.3rem */
.B2C-Style .modal-body span.gqc_desc/* Get Quote Modual >> Lightbox > Description */,
.B2C-Style .tab-content.features-abstract li,
.B2C-Style .tab-content.features-abstract li::before {
line-height: 1.3rem;
}
/* line-height >> 1.31rem */
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */,
.B2C-Style #content div.product-price p,
.B2C-Style div.product-price p {
line-height: 1.31rem !important;
}
/* line-height >> 1.4rem */
.B2C-Style #gqc_preview.modal .modal-body h2 + span/* Get Quote Modual >> Lightbox > Description */ {
line-height: 1.4rem !important;
}
/* line-height >> 1.45rem */
.B2C-Style #sidebar h3/* Search Result Page >> Filter 次標題*/,
.B2C-Style #filter_form h4/* Product Listing Page >> Filter 次標題*/,
.B2C-Style div.product-title h3/* Feature Article + Product Listing */ {
line-height: 1.45rem;
}
/* line-height >> 1.5rem */
/* #home_promotion_top (col-lg-3 or 4 & .col-md-3 or 4 / 非滿版用) >> .promo_item (三/ 四個一排) */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3 {
line-height: 1.5rem;
}
/* line-height >> 1.6rem */
/* #home_promotion_top (col-lg-3 or 4 & .col-md-3 or 4 / 非滿版用) >> .promo_item (三/ 四個一排) */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3 {
line-height: 1.6rem;
}
/* line-height >> 1.7rem */
/* AD Banner >> CTA Button::after >> (Double Size) */
.B2C-Style div#support-download-tab h3.panel-title,
.B2C-Style div#support-download-tab .search_ignore h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .modal-body h2.gqc_title/* Get Quote Modual >> Lightbox > Title(H2) */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button::after/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button::before/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before {
line-height: 1.7rem;
}
/* line-height >> 1.7rem */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p {
line-height: 1.7rem !important;
}
/* line-height >> 1.9rem */
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item h2/* Search Result Page >> Result Item > H2 */ {
line-height: 1.9rem;
}
/* line-height >> 2.2rem */
/* Tab Menu >> Product Page / AD Banner >> CTA Button */
.B2C-Style #home_promotion_top .promo_item .hover_block h3,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h3,
.B2C-Style .promo_block .promo_item .hover_block h3,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .core-container #product_listing h1,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a {
line-height: 2.2rem;
}
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .core-container .product_button h1/* Product Page > Title (H1) */ {
line-height: 3.1rem;
}
/* line-height >> 4rem */
/* ATEN-Blue-Brand-Color >> H3.slogan-big (Product Page > Rich Content) */
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block h3,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item .hover_block h3,
.B2C-Style #overview-tab h3.slogan-big {
line-height: 4rem;
}
/* Top bar >> 購物車圖示跟數字 */
.B2C-Style #top-search .quote_enable #top-search a,
.B2C-Style #top-search .quote_enable #cartCount {
line-height: 20px !important;
line-height: 1rem !important;
}
/* Top bar >> 購物車圖示跟數字 */
.B2C-Style #top-search .quote_enable #cartCount {
line-height: 20px !important;
}
/* 1100 以上 */
@media (min-width: 1100px) {
.B2C-Style .product_section #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .product_section .promo_block .promo_item:is(.col-lg-6, .col-md-6):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .product_section #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .product_section .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block p {
line-height: 1.5rem !important;
}
}
/*****************************【 Font 字統一所有大小寫 >> Uppercase (全大寫) / Capitalize (每個單字首大寫) 【******************************/
/* Font >> Uppercase (全大寫) */
.B2C-Style #primary-menu ul li a:not(.B2C-Style #primary-menu ul ul ul[class*="menu_body_"] a):not(.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > h2.mega-menu-advertisement-title a)/* Mega Menu >> Title */ {
/*text-transform: uppercase;*/
}
/* Font >> Capitalize (每個單字首大寫) */
.B2C-Style #sidebar h3/* Search Result Page >> Filter 次標題*/ {
text-transform: capitalize; /* 字首大寫 */
}
/***************************** 【 Font 字統一所有 Font Size (字級) 】******************************/
/* ATEN-Blue-Brand-Color >> 基本字 (1rem) (16px) */
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_bottom .promo_item a.btn,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a.btn,
.B2C-Style .promo_block .promo_item a.btn,
.B2C-Style .tab-content.features-abstract li/* 產品內頁 >> 四個特點 */,
.B2C-Style .product_button .discontinued-product a.button/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style #sidebar h3/* Search Result Page >> Filter 次標題*/,
.B2C-Style #filter_form h4/* Product Listing Page >> Filter 次標題*/,
.B2C-Style div.product-title h3/* Feature Article + Product Listing */,
.B2C-Style .product-title h3/* Feature Article + Product Listing */,
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> All Page */,
.B2C-Style .single-product .product-image-container .msrp,
.B2C-Style .single-product .product-desc .msrp,
.B2C-Style .single-product .msrp,
.B2C-Style .widget > h4 {
font-size: 1rem; /* 此使用 Html 基本 font-size 為 [16px] x [1rem] = 16px) */
}
/* ATEN-Blue-Brand-Color >> (1.02rem) (16.32px) */
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */ {
font-size: 1.02rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.1rem] = 16.32px) */
}
/* ATEN-Blue-Brand-Color >> (1.07rem) (17.12px) */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item h4,
.B2C-Style .marketing-material .promo_block .promo_item h4,
.B2C-Style .marketing-material .promo_item h4,
.B2C-Style #gqc_preview a.button.btn-full-width/* Get Quote Modual >> Button */,
.B2C-Style #primary-menu ul.menu_body_1 > li > a/* Mega Menu >> Title(Category) */ {
font-size: 1.07rem !important; /* 此使用 Html 基本 font-size 為 [16px] x [1.07rem] = 17.12px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.1rem) (17.6px) */
.B2C-Style #slider.homepage-slider a.btn.btn-primary,
.B2C-Style #slider.product-slider a.btn.btn-primary,
.B2C-Style [id*="home_promotion_"] .promo_item:is(.col-lg-12, .col-md-12, .col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block a.btn,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-12, .col-md-12, .col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block a.btn,
.B2C-Style #home_promotion_bottom .promo_item:is(.col-lg-12, .col-md-12, .col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) a.btn,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-12, .col-md-12, .col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) a.btn,
.B2C-Style .promo_block .promo_item:is(.col-lg-12, .col-md-12, .col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) a.btn,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style #sidebar .label span.Ftitle/* Search Result Page >> Filter Title */,
.B2C-Style .desktop-product-header h2.subtitle/* Filter Title >> Product Listing */,
.B2C-Style .product_section .sect-divider .product-desc .product-title h3/* All Product + Subcategory Product Page*/,
.B2C-Style #product_lists div.product-title h3/* Only Product Listing */,
.B2C-Style #product_lists .product-title h3/* Only Product Listing */ {
font-size: 1.1rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.1rem] = 17.6px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.2rem) (19.2px) */
.B2C-Style div#support-download-tab h3.panel-title,
.B2C-Style div#support-download-tab .search_ignore h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .qs-block .qs-header ul.qs-filter li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a),
.B2C-Style .modal-header h4/* Lightbox Modal > Title(H4) */,
.B2C-Style .modal-header h3.modal-title/* Lightbox Modal > Title(H3) */,
.B2C-Style .well-compare h3/* Comparsion Modual > Title(H4) */ {
font-size: 1.2rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.2rem] = 19.2px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.28rem) (20.48px) */
/* #home_promotion_top (col-lg-3 or 4 & .col-md-3 or 4 / 非滿版用) >> .promo_item (三/ 四個一排) */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-12, .col-md-12) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-12, .col-md-12) .hover_block p,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3, .col-lg-4, .col-md-4) .hover_block h3 {
font-size: 1.28rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.35rem] = 20.48px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.3rem) (20.8px) */
/* #home_promotion_top (col-lg-3 or 4 & .col-md-3 or 4 / 非滿版用) >> .promo_item (三/ 四個一排) */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3 {
font-size: 1.3rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.3rem] = 20.8px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.32rem) (21.12px) */
/* #home_promotion_top (col-lg-3 or 4 & .col-md-3 or 4 / 非滿版用) >> .promo_item (三/ 四個一排) */
.aaaaaaaa {
font-size: 1.32rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.32rem] = 21.12px) */
}
/* ATEN-Blue-Brand-Color >> h2 (1.35rem) (21.6px) */
.sssssssss {
font-size: 1.35rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.32rem] = 21.12px) */
}
/* ATEN-Blue-Brand-Color >> h2 (1.5rem) (24px) */
.B2C-Style .modal-body h2.gqc_title/* Get Quote Modual >> Lightbox > Title(H2) */,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item h4,
.B2C-Style .product_section #home_promotion_top .promo_item h4,
.B2C-Style .product_section .promo_block .promo_item h4,
.B2C-Style .product_section .promo_item h4,
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item h2/* Search Result Page >> Result Item > H2 */ {
font-size: 1.5rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.5rem] = 24px) */
}
/* ATEN-Blue-Brand-Color >> h3 (1.6rem) (25px) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider h3/* Product Recommendation (.sect-divider) >> h3 */ {
font-size: 1.6rem; /* 此使用 Html 基本 font-size 為 [16px] x [1.1rem] = 25px) */
}
/* ATEN-Blue-Brand-Color >> Feature Article > h2 (藍 bar 下標題) (?? rem) (?? px) */
.B2C-Style section .Feature_Articles.blockquote h2 {
}
/* ATEN-Blue-Brand-Color >> Product Listing (H1) (2.2rem) (35.2px) */
.B2C-Style .newproduct h2.subtitle:not(.B2C-Style .product-snippet .newproduct h2.subtitle)/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 標題 */,
.B2C-Style .core-container #product_listing h1/* Product Listing Page > Title (H1) */ {
font-size: 2.2rem;
}
/* ATEN-Blue-Brand-Color (2.6rem) (41.6px) */
.aaa {
font-size: 2.5rem;/* ATEN-Blue-Brand-Color (2.5rem) (40px) */
font-size: 2.6rem;/* ATEN-Blue-Brand-Color (2.6rem) (41.6px) */
}
/* ATEN-Blue-Brand-Color >> Product Model (H1) (2.7rem) (43.2px) */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .core-container .product_button h1/* Product Page > Title (H1) */ {
font-size: 2.7rem;
}
/* ATEN-Blue-Brand-Color >> (3.1rem) (49.6px) */
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block h3,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item .hover_block h3 {
font-size: 3rem; /* 此使用 Html 基本 font-size 為 [16px] x [3rem] = 48px) */
font-size: 3.1rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.1rem] = 49.6px) */
}
/* ATEN-Blue-Brand-Color >> h1 (3.125rem) (32px) */
.B2C-Style h1 {
font-size: 3.125rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.125rem] = 32px) */
}
/* ATEN-Blue-Brand-Color >> H3.slogan-big (3.25rem) (52px) (Product Page > Rich Content) */
.B2C-Style #overview-tab h3.slogan-big {
font-size: 3.25rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.25rem] = 52px) */
}
/* ATEN-Blue-Brand-Color >> (3.5rem) (56px) */
qqq {
font-size: 3.5rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.5rem] = 56px) */
}
/* ATEN-Blue-Brand-Color >> h1 > Big (3.75rem) (60px) */
.B2C-Style h1.Big {
font-size: 3.75rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.75rem] = 60px) */
}
/* ATEN-Blue-Brand-Color >> h1 > Big2 (5.625rem) (90px)*/
.B2C-Style h1.Big2 {
font-size: 5.625rem; /* 此使用 Html 基本 font-size 為 [16px] x [5.625rem] = 90px) */
}
/* ATEN-Blue-Brand-Color >> h1 > Big3 (6.875rem) (110px)*/
.B2C-Style h1.Big3 {
font-size: 6.875rem; /* 此使用 Html 基本 font-size 為 [16px] x [6.875rem] = 110px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.95rem) (15.2px)*/
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a > link (View) */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a + a > link (Download) */,
.B2C-Style #comparison_listing .btn/* Compare Listing >> View Status > Button */,
.B2C-Style .well-compare .btn.btn-info/* Compare Model >> All Button */,
.B2C-Style .btn-learnm a/* Learn More Button>> Product Listing / Feature Article */,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a/* Tab Menu >> Product Page */ {
font-size: 0.95rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.95rem] = 15.2px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.9rem) (14.4px) */
.B2C-Style #gqc_preview.modal .modal-body h2 + span/* Get Quote Modual >> Lightbox > Description */,
.B2C-Style .col-md-4 .tab-content.features-abstract li/* 產品內頁 >> 四個特點 (三欄式) */,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style #home_promotion_top .promo_item .hover_block p,
.B2C-Style .promo_block .promo_item .hover_block p,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-price/* Product Listing Page Recommendation >> All Item 內文 */,
.B2C-Style .spec_table .subtitle/* 所有 Spec Table 文字 >> 副標題 */,
.B2C-Style .white_theme td.subtitle/* 所有 Spec Table 文字 >> 副標題 */,
.B2C-Style .spec_table .title/* 所有 Spec Table 文字 >> 標題 */,
.B2C-Style table.spec_table td/* 所有 Spec Table 文字 */,
.B2C-Style section#content p/* 所有頁面的 #content p 文字 */,
.B2C-Style .core-container #product_listing #Sortblock span.sorttitle/* Sort by (Product Listing) */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .blank-product a/* Compare Model >> blank-product > a */,
.B2C-Style .sect-divider .btn-primary,
.B2C-Style [class*="widget_"] li a {
font-size: 0.9rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.9rem] = 14.4px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.88rem) (14.08px) */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, col-md-6) .sect-divider div.product-price/* Product Listing Page Recommendation >> Short Item 內文 */ {
font-size: 0.88rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.87rem] = 13.92px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.87rem) (13.92px) (一般如: Feature Product 卡片描述) */
.B2C-Style .row .product_section div.product-category .product-desc .product-price/* All Product + Subcategory Product Page*/,
.B2C-Style #sidebar.active + div .result_item p + a + span + a/* Search Result Page >> Result Item > a > link (Two Column) */,
.B2C-Style #sidebar.active + div .result_item p + a/* Search Result Page >> Result Item > a > link (Two Column) */,
.B2C-Style .features-abstract {
font-size: 0.87rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.87rem] = 13.92px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.85rem) (13.6px) (一般如: Feature Product 卡片描述) */
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .modal-body span.gqc_desc/* Get Quote Modual >> Lightbox > Description */,
.B2C-Style .sect-divider .product-price {
font-size: 0.85rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.85rem] = 13.12px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.8rem) (12.8px) (較小卡片小字如 : Product Listing, 因左手邊有 Filter) */
.B2C-Style #comparison_listing table tr td,
.B2C-Style #comparison_listing table tr th,
.B2C-Style .table.comparisontable tr th,
.B2C-Style .table.comparisontable tr td,
.B2C-Style .Labeled_item/* Search Result Page >> Label */,
.B2C-Style span.search_labelled/* Search Result Page >> Label */,
.B2C-Style #sidebar .label span.reset/* Search Result Page >> Filter >> Cancel */,
.B2C-Style #reset_btn span.reset/* Search Result Page >> Filter >> Cancel */,
.B2C-Style #product_lists .sect-divider .product-price/* Only Product Listing */ {
font-size: 0.8rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.8rem] = 12.8px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.75rem) (12px) (較小卡片小字如 : Comparision Table 比較表表格) */
.B2C-Style .notice span.notice-dec, .B2C-Style .notice span.notice-title/* Single Product >> Related Product Section >> 標註注意 */,
.B2C-Style #comparison_listing table tr td,
.B2C-Style #comparison_listing table tr th,
.B2C-Style .table.comparisontable tr th,
.B2C-Style .table.comparisontable tr td {
font-size: 0.75rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.75rem] = 12px) */
}
/* ATEN-Blue-Brand-Color >> 最小字 (0.7rem) (11.2px) */
.B2C-Style .compare-modal .description/* Comparison Table > Product Description */,
.B2C-Style .well-compare .compare-modal a.remove-btn/* Compare Model >> Product Item > Remove Text Link */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less) */,
.B2C-Style .well-compare .compare-modal p/* Compare Model >> Product Description */,
.B2C-Style .well-filter a.reset/* Product Listing Page >> Filter >> Cancel */,
.B2C-Style .share a.comparison_block,
.B2C-Style a.comparison_block,
.B2C-Style #top-bar a {
font-size: 0.7rem; /* 此使用 Html 基本 font-size 為 [16px] x [0.7rem] = 11.2px) */
}
/* ATEN-Blue-Brand-Color >> 最小字 (0.7rem) (11.2px) */
.B2C-Style .well-compare .compare-modal p/* Compare Model >> Product Description */ {
font-size: 0.7rem !important; /* 此使用 Html 基本 font-size 為 [16px] x [0.7rem] = 11.2px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.8rem/Important) (12.8px) */
.B2C-Style .Labeled_item/* Search Result Page >> Label */,
.B2C-Style span.search_labelled/* Search Result Page >> Label */{
font-size: 0.8rem !important; /* 此使用 Html 基本 font-size 為 [16px] x [0.8rem] = 12.8px) */
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.9rem) (14.4px)*/
.B2C-Style .compare-modal .product-name a/* Comparison Table > Product Name > a */,
.B2C-Style .well-compare .compare-modal p b/* Compare Model >> Product Description >> bold */ {
font-size: 0.9rem !important;
}
/* 1180 以上 */
@media (min-width: 1180px) {
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
font-size: 1rem;
}
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block p {
font-size: 1rem;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* ATEN-Blue-Brand-Color >> 基本字 (0.8rem) (12.8px) */
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-text {
font-size: 0.8rem;
}
/* ATEN-Blue-Brand-Color >> 基本字 (1rem) (16px) */
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > h2.mega-menu-advertisement-title {
font-size: 1rem;
}
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
font-size: 1rem;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
font-size: 1.1rem;
}
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block p {
font-size: 1.2rem;
line-height: 1.5rem !important;
}
}
/* 1900 以上 */
@media (min-width: 1900px) {
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
font-size: 1.2rem;
}
}
/************ (筆電特調 >> 高度 610px >> 扣掉 Browser) 超超窄版 for Laptop *************/
@media (min-width: 1281px) and (max-width: 1366px) {}
/* 1199 以下 */
@media (max-width: 1199px) {
/* ATEN-Blue-Brand-Color >> Product Model (H1) */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12 .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item .hover_block h3 {
font-size: 2rem;
font-size: 1.9rem;
line-height: 2.5rem;
}
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4, .col-lg-6, .col-md-6, .col-lg-12, .col-md-12):not(.col-lg-3.col-md-4) .hover_block p,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block p,
.B2C-Style .promo_block .promo_item .hover_block p {
font-size: 1rem;
line-height: 1.6rem !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
.B2C-Style .core-container .product_button h1/* Product Page > Title (H1) */ {
font-size: 2.3rem;
}
/* ATEN-Blue-Brand-Color >> Product Model (H1) (2.7rem) (43.2px) */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12 .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item .hover_block h3 {
font-size: 2rem !important;
line-height: 1.3em !important;
line-height: 1.4em !important;
}
}
/*****************************【 Font 字統一所有 Font Weight (粗細) 】******************************/
/* Font Weight >> 300 */
.B2C-Style .row.result_item .lineS/* Search Result Page >> Result Item > Line 分隔線 */ {
font-weight: 300 !important;
}
/* Font Weight >> 400 */
.B2C-Style #home_promotion_top .promo_item .hover_block p,
.B2C-Style .promo_block .promo_item .hover_block p,
.B2C-Style .qs-block .qs-header ul.qs-filter li a/* Product Category >> Filter Menu >> UL >> Li >> a */,
.B2C-Style .qs-block .qs-header ul.qs-filter li/* Product Category >> Filter Menu >> UL >> Li */,
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item h2/* Search Result Page >> Result Item > H2 */,
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style #sidebar .label span.Ftitle/* Search Result Page >> Filter Title */,
.B2C-Style #search_form .form-group button.btn/* Product Listing Page > Button */,
.B2C-Style .modal-body h2.gqc_title/* Get Quote Modual >> Lightbox > Title(H2) */,
.B2C-Style .modal-body span.gqc_desc/* Get Quote Modual >> Lightbox > Description */,
.B2C-Style .compare-modal .description/* Comparison Table > Product Description */,
.B2C-Style .features-abstract,
.B2C-Style .row .product_section div.product-category .product-desc div.product-price/* Product Subcategory >> .product-category >> .product-price */,
.B2C-Style #content div.product-price p,
.B2C-Style div.product-price p,
.B2C-Style #applications-tab p,
.B2C-Style #support-download-tab p,
.B2C-Style #specification-tab p,
.B2C-Style #diagram-tab p,
.B2C-Style #features-tab p,
.B2C-Style #overview-tab p,
.B2C-Style .single-product .product-detail-price small,
.B2C-Style #top-bar ul.dropdown-menu li span,
.B2C-Style ul.dropdown-menu a,
.B2C-Style .breadcrumb > li {
font-weight: 400;
}
/* Font Weight >> 500 */
.B2C-Style div#support-download-tab h3.panel-title,
.B2C-Style div#support-download-tab .search_ignore h3,
.B2C-Style #slider.homepage-slider a.btn.btn-primary,
.B2C-Style #slider.product-slider a.btn.btn-primary,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h4,
.B2C-Style #home_promotion_top .promo_item .hover_block h4,
.B2C-Style .promo_block .promo_item .hover_block h4,
.B2C-Style .promo_item .hover_block h4,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_bottom .promo_item a.btn,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a.btn,
.B2C-Style .promo_block .promo_item a.btn,
.B2C-Style #home_promotion_top .promo_item .hover_block h3,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h3,
.B2C-Style .promo_block .promo_item .hover_block h3,
.B2C-Style .qs-block .qs-header ul.qs-filter li.active a/* Product Category >> Filter Menu >> UL >> Li.active >> a */,
.B2C-Style .qs-block .qs-header ul.qs-filter li.active/* Product Category >> Filter Menu >> UL >> Li.active */,
.B2C-Style #sidebar h3/* Search Result Page >> Filter 次標題*/,
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a > link (View) */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a + a > link (Download) */,
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */,
.B2C-Style .core-container #product_listing h1,
.B2C-Style div.product-title h3/* Feature Article + Product Listing */,
.B2C-Style .product-title h3/* Feature Article + Product Listing */,
.B2C-Style.locale_global-en .row div.product-category > div.sect-divider div.product-title h3/* Feature Article + Product Listing (Only Global-EN) */,
.B2C-Style.locale_global-en .row div.product-category > div.sect-divider .product-title h3/* Feature Article + Product Listing (Only Global-EN) */,
.B2C-Style .product_section .sect-divider .product-desc .product-title h3/* All Product + Subcategory Product Page*/,
.B2C-Style #product_lists div.product-title h3, .B2C-Style #product_lists .product-title h3/* Only Product Listing */,
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style .modal-footer .btn/* Comparsion Table >> .modal-footer >> >> Button >> Lightbox Modual */,
.B2C-Style #comparison_listing .btn/* Compare Listing >> View Status > Button */,
.B2C-Style .well-compare .compare-modal a.remove-btn/* Compare Model >> Product Item > Remove Text Link */,
.B2C-Style .well-compare .btn.btn-info/* Compare Model >> Button */,
.B2C-Style .well-compare a.compare-modal/* Compare Model >> Product Item > Remove Text Link */,
.B2C-Style .well-compare h3/* Comparsion Modual > Title(H4) */,
.B2C-Style .newproduct h2.subtitle:not(.B2C-Style .product-snippet .newproduct h2.subtitle)/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 標題 */,
.B2C-Style .product_button .discontinued-product a.button/* Subcategory Product Page > Button */,
.B2C-Style .desktop-product-header h2.subtitle/*Filter Title >> Product Listing Page > Filter > H2 */,
.B2C-Style #product_category_list .subcategory .cur_sub a/* Product Listing > Category > Curent a */,
.B2C-Style #product_category_list h2/*Filter Title >> Product Listing Page > Category > H2 */,
.B2C-Style .core-container #product_listing h1/* (標題) 產品列表頁 */,
.B2C-Style .single-product .product-detail-price h1/* (標題) 產品單頁 */,
.B2C-Style .core-container .product_button h1/* Product Page > Title (H1) */,
.B2C-Style #filter_form h4/* Product Listing Page >> Filter 次標題*/,
.B2C-Style #product_lists div.product-title h3/* Only Product Listing */,
.B2C-Style #product_lists .product-title h3/* Only Product Listing */,
.B2C-Style #overview-tab h3.slogan-big,
.B2C-Style #overview-tab h3.slogan,
.B2C-Style .modal-header h4/* Lightbox Modal > Title(H4) */,
.B2C-Style .modal-header h3.modal-title/* Lightbox Modal > Title(H3) */,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style .product-detail-price h1,
.B2C-Style #top-bar ul.dropdown-menu li span.region,
.B2C-Style section.breadcrumb_block .title h1,
.B2C-Style section#breadcrumb .title h1,
.B2C-Style h1.Big3,
.B2C-Style h1.Big2,
.B2C-Style h1.Big,
.B2C-Style h1,
.B2C-Style :is(h1, h2, h3, h4):not(.product-snippet .col-md-3 h2.subtitle):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section .markets-top-banner.richcontent h4) {
font-weight: 500;
}
/* Font Weight >> 600 */
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh).promote-banner [id*="slider"] .text-block h3,
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) #home_promotion_top.promo_block.no-slide .promo_item .hover_block h3,
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block h3,
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) .promo_block.no-slide .promo_item .hover_block h3,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .btn-learnm a/* Learn More Button>> Product Listing / Feature Article */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less) */,
.B2C-Style .blank-product a/* Compare Model >> blank-product > a */,
.B2C-Style .top_searchbox + div a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Search Result Page */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> All Page */,
.B2C-Style .sect-divider .btn-primary,
.B2C-Style .share a.comparison_block,
.B2C-Style a.comparison_block,
.B2C-Style #product_tab_menu .add-to-cart.button,
.B2C-Style .single-product .add-to-cart.button,
.B2C-Style #top-bar ul.dropdown-menu li span.region {
font-weight: 600;
}
/* Font Weight >> 300 >> 強制覆蓋 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h3) .hover_block h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h3) .hover_block h4,
.B2C-Style .marketing-material .promo_block .promo_item:has(h3) .hover_block h4,
.B2C-Style .marketing-material .promo_item:has(h3) .hover_block h4 {
font-weight: 300 !important; /* 300 */
}
/* 990 以下 */
@Media (max-width: 990px) {
/* Font Weight >> 600 >> 強制覆蓋 (注意規避亞洲語言) */
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) .product-detail-price h1:not(.Dark-Mode .product-detail-price h1),
.B2C-Style:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh, .Dark-Mode) .product-detail-price h1 {
font-weight: 600 !important; /* Product Page > Price (H1) */
}
}
/*****************************【 Font 字統一所有 陰影 (text-shadow) 】******************************/
/* 文字統一無陰影 */
.B2C-Style .spec_table .subtitle/* 所有 Spec Table 文字 >> 副標題 */,
.B2C-Style .white_theme td.subtitle/* 所有 Spec Table 文字 >> 副標題 */,
.B2C-Style .spec_table .title/* 所有 Spec Table 文字 >> 標題 */,
.B2C-Style table.spec_table td/* 所有 Spec Table 文字 */ {
text-shadow: unset !important;
}
/*************************************************************************************************************************
( A-2 ). 【 Font Color (字體顏色) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* CSS 全局變量 >> 顏色套用 */
:root {
--Dark-Black-ATEN: #000722;
--Dark-Black: #000722;
--Dark-Blue-ATEN: #002355;
--Dark-Blue: #002355;
--Blue-ATEN: #004276;
--Blue-Middle-ATEN: #005caa;
--Blue-Middle: #005caa;
--Color_BlueD: #005caa;
--color_blueD: #005caa;
--Blue-Light-ATEN: #0098dc;
--Blue-Light: #0098dc;
--color_blueL: #0098dc;
--Color_BlueL: #0098dc;
--Green-ATEN: #80ba2d;
--Color_GreenV: #80ba2d;
--color_greenV: #80ba2d;
--GreenE-ATEN:#00a392;
--Color_GreenE: #00a392;
--color_greenE: #00a392;
--Orange-ATEN: #ee7836;
--Color_Orange: #ee7836;
--color_orange: #ee7836;
--Grey-Light-ATEN: #f3f4f6;
--Grey-Light: #f3f4f6;
--Grey-Normal-ATEN: #c3c6cb;
--Grey-Middle-Dark-ATEN: #95999f;
--Grey-MD-ATEN: #95999f;
--Grey-Dark-ATEN: #5c5e60;
--Grey-Dark: #5c5e60;
--White-New-ATEN: #ffffff;
--White-New: #ffffff;
--color_white: #ffffff;
--Black-New-ATEN: #000000;
--Black-New: #000000;
--color_black: #000000;
--Grey-Dark-ATEN_Op-100: rgba(92, 94, 96, 1.0);
--Grey-Dark_Op-100: rgba(92, 94, 96, 1.0);
--Grey-Dark-ATEN_Op-090: rgba(92, 94, 96, 0.9);
--Grey-Dark_Op-090: rgba(92, 94, 96, 0.9);
--Blue-ATEN_Op-100: rgba(0, 66, 118, 1.0);
--Blue-Middle-ATEN_Op-100: rgba(0, 92, 170, 1.0);
--Blue-Middle_Op-100: rgba(0, 92, 170, 1.0);
--Color_BlueD_Op-100: rgba(0, 92, 170, 1.0);
--color_blueD_Op-100: rgba(0, 92, 170, 1.0);
--Blue-Middle-ATEN_Op-050: rgba(0, 92, 170, 0.5);
--Blue-Middle_Op-050: rgba(0, 92, 170, 0.5);
--Color_BlueD_Op-050: rgba(0, 92, 170, 0.5);
--color_blueD_Op-050: rgba(0, 92, 170, 0.5);
--Blue-Light-ATEN_Op-100: rgba(0, 152, 220, 1.0);
--Blue-Light_Op-100: rgba(0, 152, 220, 1.0);
--color_blueL_Op-100: rgba(0, 152, 220, 1.0);
--Color_BlueL_Op-100: rgba(0, 152, 220, 1.0);
--Dark-Black-ATEN_Op-100: rgba(0, 7, 34, 1.0);
--Dark-Black_Op-100: rgba(0, 7, 34, 1.0);
--Dark-Black-ATEN_Op-060: rgba(0, 7, 34, 0.6);
--Dark-Black_Op-060: rgba(0, 7, 34, 0.6);
--Dark-Black-ATEN_Op-080: rgba(0, 7, 34, 0.8);
--Dark-Black_Op-080: rgba(0, 7, 34, 0.8);
--Grey-Dark-ATEN_Op-100: rgba(92, 94, 96, 1.0);
--Grey-Dark_Op-100: rgba(92, 94, 96, 1.0);
--White-New-ATEN_Op-100: rgba(255,255,255, 1.0);
--White-New_Op-100: rgba(255,255,255, 1.0);
--White-New-ATEN_Op-035: rgba(255,255,255, 0.35);
--White-New_Op-035: rgba(255,255,255, 0.35);
--color_white_Op-035: rgba(255,255,255, 0.35);
--White-New-ATEN_Op-070: rgba(255,255,255, 0.7);
--White-New_Op-070: rgba(255,255,255, 0.7);
--color_white_Op-070: rgba(255,255,255, 0.7);
--White-New-ATEN_Op-085: rgba(255,255,255, 0.85);
--White-New_Op-085: rgba(255,255,255, 0.85);
--color_white_Op-085: rgba(255,255,255, 0.85);
}
/* 套用範例 :
.B2C-Style a {
color: var(--Blue-ATEN);
}
.B2C-Style {
background-color: var(--Blue-ATEN);
}
*/
/***************************** 【 Font 字統一套色 Dark Black (深黑藍 Dark) 】 (.Dark-Black) ******************************/
.B2C-Style #top-bar ul.dropdown-menu li span.region,
.Dark-Black-ATEN,
.Dark-Black {
color: rgba(0, 7, 34, 1.0);
color: #000722;
}
/***************************** 【 Font 字統一套色 Dark Blue (主深藍色) 】 (.Dark-Blue) ******************************/
.Dark-Blue-ATEN,
.Dark-Blue {
background-color: rgba(0, 35, 85, 1.0);
background-color: #002355;
}
/***************************** 【 Font 字統一套色 ATEN Blue (藍色) 】 (.Blue-ATEN) ******************************/
/*.B2C-Style #slider.homepage-slider .text-block.color_blueD h3,
.B2C-Style #slider.product-slider .text-block.color_blueD h3,
.B2C-Style .product .color_blueD, */
.B2C-Style #sitesearch_form .btn .icon-search3::before/* Search Result Page >> Icon */,
.B2C-Style #header:not(.dark) #top-search form i.icon-search3/* Search Box > Icon */,
.B2C-Style #header #top-search form i.icon-search3/* Search Box > Icon */,
.B2C-Style section.quote-cart + #content a#backbtn.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button (#backbtn) */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style section.quote-cart + #content .row.col-list .pname/* Get Quote Page >> Product Item Block > List Item > Model Name */,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall/* Compare Model >> Remove Button */,
.B2C-Style .product_button .discontinued-product a.button/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style .sect-divider .btn-primary/* Product Listing >> Add to Cart */,
.B2C-Style .single-product .product-detail-price small,
.B2C-Style :is(h1, h2, h3, h4, h5, h6):not(.B2C-Style .core-container .product_button h1):not(.B2C-Style .single-product .product-detail-price h1):not(.B2C-Style .product-snippet h2.subtitle):not(.B2C-Style .desktop-product-header h2.subtitle):not(.B2C-Style .widget > h4):not(.B2C-Style [class*="color_"] h1):not(.B2C-Style [class*="color_"] h2):not(.B2C-Style [class*="color_"] h3):not(.B2C-Style [class*="color_"] h4):not(.B2C-Style [class*="color_"] h5):not(.B2C-Style [class*="color_"] h6):not(.B2C-Style h1[class*="color_"]):not(.B2C-Style h2[class*="color_"]):not(.B2C-Style h3[class*="color_"]):not(.B2C-Style h4[class*="color_"]):not(.B2C-Style h5[class*="color_"]):not(.B2C-Style h6[class*="color_"]):not(.B2C-Style .related_product_tabs > h3):not(.B2C-Style .modal-header h4):not(.B2C-Style .well-compare h3),
.B2C-Style .btn-default,
.Blue-ATEN {
color: rgba(7, 69, 118, 1.0);
color: #074576;
color: rgba(0, 66, 118, 1.0);
color: #004276;
}
/***************************** 【 Font 字統一套色 ATEN Middle Blue (中藍色) 】 (.Blue-Middle-ATEN) ******************************/
/*.B2C-Style #slider.homepage-slider .text-block.color_blueM h3,
.B2C-Style #slider.product-slider .text-block.color_blueM h3,
.B2C-Style .product .color_blueM, */
.B2C-Style #wording-gsection h3,
.B2C-Style #sitesearch_form input:focus + .btn .icon-search3::before/* Search Result Page >> Input:Focus (聚焦) >> Icon */,
.B2C-Style #product_lists a.btn-load-more .icon-chevron-down::before/* Load More Icon (載入更多) >> Product Listing Page */,
.B2C-Style a.btn-load-more .icon-chevron-down::before/* Load More Icon (載入更多) >> Product Listing Page */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style #slider.homepage-slider .text-block.color_blueD h3,
.B2C-Style #slider.product-slider .text-block.color_blueD h3,
.B2C-Style .product .color_blueD,
.Color_BlueD,
.B2C-Style .tab-content li:before,
.Blue-Middle-ATEN,
.Blue-Middle {
color: rgba(0, 92, 170, 1.0);
color: #005caa;
}
/***************************** 【 Font 字統一套色 ATEN Light Blue (淺藍色) 】 (.Blue-Light-ATEN) ******************************/
.B2C-Style #slider.homepage-slider .text-block.color_blueL h3,
.B2C-Style #slider.product-slider .text-block.color_blueL h3,
.B2C-Style .product .color_blueL,
.Color_BlueL,
.Blue-Light-ATEN,
.Blue-Light {
color: rgba(0, 167, 235, 1.0);
color: #00a7eb;
color: rgba(0, 152, 220, 1.0);
color: #0098dc;
}
/***************************** 【 Font 字統一套色 ATEN Green (綠色) 】 (.Green-ATEN) ******************************/
.B2C-Style #slider.homepage-slider .text-block.color_greenV h3,
.B2C-Style #slider.product-slider .text-block.color_greenV h3,
.B2C-Style .product .color_greenV,
.Color_GreenV,
.Green-ATEN {
color: rgba(143, 195, 32, 1.0);
color: #8fc320;
color: rgba(128, 186, 45, 1.0);
color: #80ba2d;
}
/***************************** 【 Font 字統一套色 ATEN Green (Energe 綠色) 】 (.GreenE-ATEN) ******************************/
.B2C-Style #slider.homepage-slider .text-block.color_greenE h3,
.B2C-Style #slider.product-slider .text-block.color_greenE h3,
.B2C-Style .product .color_greenE,
.Color_GreenE,
.GreenE-ATEN {
color: rgba(0, 130, 116, 1.0);
color: #008274;
color: rgba(0, 163, 146, 1.0);
color: #00a392;
}
/***************************** 【 Font 字統一套色 ATEN Orange (橘色) 】 (.Orange-ATEN) ******************************/
#slider.homepage-slider .text-block.color_orange h3,
#slider.product-slider .text-block.color_orange h3,
.product .color_orange,
.Color_Orange,
.Orange-ATEN {
color: rgba(238, 120, 54, 1.0);
color: #ee7836;
}
/***************************** 【 Font 字統一套色 Grey-1 (Light Grey) 】 (淺灰色) ******************************/
.Grey-Light-ATEN,
.Grey-Light {
color: rgba(245, 245, 245, 1.0);
color: #f5f5f5; /* 正淺灰色 */
color: rgba(248, 248, 248, 1.0);
color: #F8F8F8;
color: rgba(243, 244, 246, 1.0);
color: #f3f4f6; /* 帶藍淺灰色 */
}
/***************************** 【 Font 字統一套色 Grey-2 (Normal Grey) 】 (正常灰色) ******************************/
.B2C-Style #top-bar/* top bar 白底 */,
.B2C-Style #product_listing .breadcrumb > li + li:before/* 右箭頭(短) (白色底) (breadcrumb 路徑符號) (>) (麵包屑) */,
.Grey-Normal-ATEN {
color: rgba(204, 204, 204, 1.0);
color: #cccccc;
color: rgba(195, 198, 203, 1.0);
color: #c3c6cb;
}
/***************************** 【 Font 字統一套色 Grey-3 (Middle Grey) 】 (中灰色) ******************************/
.B2C-Style #top-bar ul.dropdown-menu li span,
.Grey-Middle-Dark-ATEN,
.Grey-MD-ATEN {
color: rgba(154, 154, 154, 1.0);
color: #9a9a9a;
color: rgba(149, 153, 159, 1.0);
color: #95999f;
}
/***************************** 【 Font 字統一套色 Grey-4 (Dark Grey) 】 (深灰色) ******************************/
.B2C-Style .product-snippet [id*="section-marketing_materials_"].markets-top-banner.richcontent h4.color_black,
.B2C-Style .product-snippet [id*="section-marketing_materials_"].markets-top-banner.richcontent h4,
.B2C-Style .row .product_section div.product-category .product-desc div.product-price/* Product Subcategory >> .product-category >> .product-price */,
.B2C-Style #sidebar .pnumber/* Search Result > Filter Item > Number*/,
.B2C-Style #product_lists .sect-divider .product-price,
.B2C-Style #content div.product-price p,
.B2C-Style div.product-price p,
.B2C-Style #applications-tab p,
.B2C-Style #support-download-tab p,
.B2C-Style #specification-tab p,
.B2C-Style #diagram-tab p,
.B2C-Style #features-tab p,
.B2C-Style #overview-tab p,
.B2C-Style #slider.homepage-slider .text-block.color_gray h3,
.B2C-Style #slider.product-slider .text-block.color_gray h3,
.B2C-Style .product .color_gray,
.B2C-Style section#content ul,
.Grey-Dark-ATEN,
.Grey-Dark {
color: rgba(77, 77, 77, 1.0);
color: #4d4d4d;
color: rgba(72, 74, 76, 1.0);
color: #484a4c;
color: rgba(92, 94, 96, 1.0);
color: #5c5e60;
}
/***************************** 【 Font 字統一套色白色 】 (.White-New) ******************************/
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm)/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style .dark#top-bar ul.dropdown-menu li span.region,
.White-New-ATEN,
.White-New {
color: #fff;
color: rgba(255,255,255, 1.0);
}
/***************************** 【 Font 字統一套色白色 】 (.White-New) (!important) ******************************/
/* !important 強制覆蓋 */
.B2C-Style section.breadcrumb_block .title h1 {
color: #fff !important;
color: rgba(255,255,255, 1.0) !important;
}
/***************************** 【 Font 字統一套色 Black (黑色) 】 (.Black-New) ******************************/
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3,
.B2C-Style .modal-header h4/* Lightbox >> modal > h4 */,
.B2C-Style .well-compare h3/* Compare Model > h3 */,
.B2C-Style .newproduct h2.subtitle/* New Product (All Product Page) + Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 標題 */,
.B2C-Style .core-container #product_listing h1/* (標題) 產品列表頁 */,
.B2C-Style .single-product .product-detail-price h1/* (標題) 產品單頁 */,
.B2C-Style .core-container .product_button h1/* (標題) 產品其它頁 */,
.Black-New-ATEN,
.Black-New {
color: #000;
}
/*************************************************************************************************************************
( A-3 ). 【 Hover/ Not-Hover/ Active (僅文字顏色狀態) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/********************** 【 1. Not-Hover Font 】字統一套色深灰 (.Grey-Dark) >> 深灰不透明 >> (0.9) **************************/
.B2C-Style li.ui-tabs-tab a::after/* Product Page >> Tab Menu >> Normal Tab >> a::after(分隔線) */,
.B2C-Style li.ui-tabs-tab a/* Product Page >> Tab Menu >> Normal Tab >> a */,
.B2C-Style .product-head .breadcrumb a /* .breadcrumb Li a (麵包屑路徑)(產品列表頁面) */,
.B2C-Style #product_listing .breadcrumb a /* .breadcrumb Li a (麵包屑路徑)(產品其它頁面) */,
.B2C-Style #product_detail .breadcrumb a /* .breadcrumb Li a (麵包屑路徑) (產品單頁) */ {
color: #5c5e60;
color: rgba(92, 94, 96, 0.9);
}
/********************** 【 1. Not-Hover Font 】 字統一套色 ATEN Blue >> (ATEN 藍) 不透明 ((1.0)) ***********************/
.B2C-Style .row.result_item h2 a/* Search Result Page >> Result Item > H2 > a */,
.B2C-Style .row.result_item h2/* Search Result Page >> Result Item > H2 */,
.B2C-Style .cur_cat/* Product Category 次選單字 (Filter) >> Product Listing Item */,
.B2C-Style .cur_sub a/* Product Category 次選單字 (Filter) >> Product Listing Item */ {
color: rgba(0, 66, 118, 1.0);
color: #004276 !important;
}
/* Product Category 次選單字 (+/-) >> Product Listing Item (圖為黑轉深藍) */
.B2C-Style #product_category_list a.category.cur_cat::before {
filter: invert(0.1) sepia(1) saturate(4) hue-rotate(150.9deg) brightness(0.5) !important/*圖為黑轉深藍*/;
}
/********************** 【 1. Not-Hover Font 】 字統一套色 Middle Blue >> (ATEN 中藍) 不透明 (1.0) ***********************/
.B2C-Style .tab-content.features-abstract li:has(.all-features)::after/* Top Four Features >> 新增 All Features Link Text >> 右箭頭(短) (連跳至 Features Tab) */,
body[class*="device-x"].B2C-Style nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li.active a,
.B2C-Style.Mobile-Layout nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li.active a,
.B2C-Style li.ui-tabs-tab a:hover/* Product Page >> Tab Menu >> Normal Tab >> a:hover */,
.B2C-Style li.ui-tabs-tab.ui-state-active a:hover/* Product Page >> Tab Menu >> Active Tab >> a:hover */,
.B2C-Style li.ui-tabs-tab.ui-state-active a/* Product Page >> Tab Menu >> Active Tab >> a */,
.B2C-Style #sidebar #reset_btn span.reset/* Search Result Page >> Filter >> Cancel */,
.B2C-Style #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style .well-filter a.reset::after/* Product Listing Page >> Filter >> Cancel */,
.B2C-Style #product_category_list .subcategory li.cur_sub a/* Product Listing Page >> Select Category */,
.B2C-Style .product_list .key-list li/* Product Listing Page >> New Icon (note) */,
.B2C-Style .product_list .key-list li span/* Product Listing Page >> New Icon (note) */,
.B2C-Style .key-list li/* Product Listing Page >> New Icon (note) */,
.B2C-Style .key-list li span/* Product Listing Page >> New Icon (note) */,
.B2C-Style .product-title i/* Product Listing Page >> New Icon (in Item) */,
.B2C-Style .single-product .product-detail-price span.product-special-label/* New Icon (Single Product) */,
.B2C-Style .single-product .product-detail-price span.product-special-label i/* New Icon (Single Product) */,
.B2C-Style .single-product .product-detail-price span.product-special-label span/* New Icon (Single Product) */,
.B2C-Style .product-snippet h2.subtitle .fa-angle-down/* All Product 左邊下箭頭 */,
.B2C-Style #product_category_list .fa-angle-down,
.B2C-Style #product_category_list .fa-angle-right,
.B2C-Style #product_category_list .fa-chevron-right,
.B2C-Style .btn-info.disabled,
.B2C-Style .btn-info[disabled],
.B2C-Style fieldset[disabled] .btn-info,
.B2C-Style .btn-info.disabled:hover,
.B2C-Style .btn-info[disabled]:hover,
.B2C-Style fieldset[disabled] .btn-info:hover,
.B2C-Style .btn-info.disabled:focus,
.B2C-Style .btn-info[disabled]:focus,
.B2C-Style fieldset[disabled] .btn-info:focus,
.B2C-Style .btn-info.disabled.focus,
.B2C-Style .btn-info[disabled].focus,
.B2C-Style fieldset[disabled] .btn-info.focus,
.B2C-Style .btn-info.disabled:active,
.B2C-Style .btn-info[disabled]:active,
.B2C-Style fieldset[disabled] .btn-info:active,
.B2C-Style .btn-info.disabled.active,
.B2C-Style .btn-info[disabled].active,
.B2C-Style fieldset[disabled] .btn-info.active,
.B2C-Style #primary-menu ul ul ul > li.last.all > a,
.B2C-Style .btn-learnm a,
.B2C-Style h4 a,
.B2C-Style a:not(a[class*="btn-"]):not(.breadcrumb a):not(.ui-state-default a):not(.dark .footer-widgets-wrap a):not(.dark [class*="widget_"] li a):not(.dark .copyright-links a):not(div.product_section .product-desc a):not(.langmap .list li a):not(.secondary-navigation.Dark_Sec_NavMenu div.container table > tbody > tr > td a):not(.Dark_Sec_NavMenu .secondary-navigation div.container table > tbody > tr > td a):not(.B2C-Style a.comparison_block):not(.product-title h3 a):not(.compare-modal .product-name a):not(ol.plist li a):not(#primary-menu ul.menu_body_0 > li > a):not(.B2C-Style #primary-menu ul.menu_body_1 > li > a):not(.B2C-Style #primary-menu ul li a):not(.B2C-Style #top-bar a):not(section#content .form-group ul.dropdown-menu li a):not(ul.dropdown-menu li a):not(.B2C-Style #top-search a):not(.B2C-Style #product_category_list .subcategory li a):not(.qs-block .qs-header ul.qs-filter li a):not(.Dark-Mode section#content .single-product .product-padding a):not(a.linkblock):not(a.linkto):not(.product-page-index a.btn.disabled):not(nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a):not(#product_category_list a.category):not(#mobile-product-header a.list-group-item.active):not([id*="mobile-"] a.list-group-item.active):not(.Dark-Mode #content .single-product li a):not(.Dark-Mode #content .single-product a):not(#multi_product_category_list ul li.active a) {
color: rgba(0, 92, 170, 1.0);
color: #005caa;
}
/********************** 【 1. Not-Hover Font (**Important 強制) 】 字統一套色 Middle Blue >> (ATEN 中藍) 不透明 (1.0) ***********************/
/* Main/ Sub Category >> Slider Banner >> Main Button >> 最後一個 a.btn
.B2C-Style #slider .swiper-slide .slider-caption:has(a + a) a.btn.btn-primary:last-child ,*/
.B2C-Style .product_list .key-list li/* Product Listing Page >> New Icon (note) */,
.B2C-Style .product_list .key-list li span/* Product Listing Page >> New Icon (note) */,
.B2C-Style .key-list li/* Product Listing Page >> New Icon (note) */,
.B2C-Style .key-list li span/* Product Listing Page >> New Icon (note) */,
.B2C-Style .product-title i/* Product Listing Page >> New Icon (in Item) */,
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary.button_white/* Main/ Sub Category >> Slider Banner >> Main Button (.button_white) */,
.B2C-Style .row.result_item p + a + span + a::before/* Search Result Page >> Result Item > a + a > Icon */,
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > a > Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > a > Icon */,
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a */,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove/* Get Quote Page >> Product Item Block > List Item >> Remove Button */,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a/* Product Listing >> Learn More */,
.B2C-Style .btn-learnm a/* Product Listing >> Learn More */,
.B2C-Style ol.plist li a.active/* All Product >> Category > a.active */,
.B2C-Style .subcategory .cur_sub a::before/* Product Category 次選單下條列點點 (Filter) > 選取狀態 >> Product Listing Item */,
.B2C-Style .cur_sub a/* Product Category 次選單下條列字 (Filter) > 選取狀態 >> Product Listing Item */,
.B2C-Style h4 a {
color: rgba(0, 92, 170, 1.0) !important;
color: #005caa !important;
}
/********************** 【 1. Not-Hover Font 】 字統一套色深黑藍 (.Dark Black) >> 黑藍透明 >> ((0.6)) **************************/
/* Product Tab Menu >> 沒 Active */
.B2C-Style a.comparison_block,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a {
color: rgba(0, 7, 34, 0.65);
color: rgba(0, 7, 34, 0.6);
}
/********************** 【 1. Not-Hover Font 】 字統一套色深黑藍 (.Dark Black) >> 黑藍透明 >> ((0.8)) **************************/
.B2C-Style .product-head .breadcrumb li:last-child a /* .breadcrumb 最後一個 Li a (產品列表頁面) */,
.B2C-Style #product_listing .breadcrumb li:last-child a /* .breadcrumb 最後一個 Li a (產品其它頁面) */,
.B2C-Style #product_detail .breadcrumb li:last-child a /* .breadcrumb 最後一個 Li a (產品單頁面) */,
.B2C-Style #product_listing #filter_form label/* Product Listing Page >> Filter > Label */,
.B2C-Style input[type="radio"] + label/* Search Result Page >> Filter Radio > Label */,
.B2C-Style .filter_label/* Search Result Page >> Filter Label */,
.B2C-Style .row.result_item p.pdesc/* Search Result Page >> Result Item > Model Name */,
.B2C-Style #top-bar span.globe-icon::before:not(#top-bar.dark span.globe-icon::before)/* Select Langruage >> Top Bar (地球/選擇語言) */,
.B2C-Style .desktop-product-header h2.subtitle/* Product Listing >> Filter > Subtitle (H2) */ {
color: rgba(0, 7, 34, 0.8);
}
/********************** 【 1. Not-Hover Font 】 字統一套色深黑藍 (.Dark Black) >> 黑藍不透明 >> ((1.0)) **************************/
body[class*="device-x"].B2C-Style nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a,
.B2C-Style.Mobile-Layout nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a,
.B2C-Style .qs-block .qs-header ul.qs-filter li/* Product Category >> Filter Menu >> UL >> Li */,
.B2C-Style .qs-block .qs-header ul.qs-filter li a/* Product Category >> Filter Menu >> UL >> Li >> a */,
/*.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a, */
.B2C-Style .share a.comparison_block,
.B2C-Style div.product-title h3 a/* Feature Article + Product Listing */,
.B2C-Style .product-title h3 a/* Feature Article + Product Listing */,
.B2C-Style div.product-title h3/* Feature Article + Product Listing */,
.B2C-Style .product-title h3/* Feature Article + Product Listing */,
.B2C-Style .langmap .list li a,
.B2C-Style div.product_section .product-desc a,
.B2C-Style #primary-menu ul li a,
.B2C-Style #top-bar a {
color: rgba(0, 7, 34, 1.0);
color: #000722;
}
/********************** 【 1. Not-Hover Font 】 字統一套色深灰色 (.Grey-Dark) >> 深灰不透明 >> ((1.0)) **************************/
.B2C-Style #primary-menu ul ul ul[class*="menu_body_"] a,
.B2C-Style .dark #primary-menu:not(.not-dark) ul ul ul[class*="menu_body_"] a,
.B2C-Style .row.result_item p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .row.result_item p + p/* Search Result Page >> Result Item > Description(p) */,
.B2C-Style .filter_category li input[type="radio"]/* Search Result Page >> Filter Radio */,
.B2C-Style #product_listing label/* Product Listing Page >> Label */,
.B2C-Style #product_category_list .subcategory a/* Product Listing Page >> Product Category List > a */ {
color: rgba(92, 94, 96, 1.0);
color: #5c5e60;
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色白色 (White) >> 白半透明 rgba >> ((0.35)) **************************/
.B2C-Style #top-bar.dark/* top bar 黑底 */,
.B2C-Style #top-bar.dark ul.dropdown-menu li span {
color: rgba(255,255,255, 0.35);
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色白色 (White) >> 白半透明 rgba >> ((0.5)) **************************/
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left i/* Slide Banner */ {
color: rgba(255,255,255, 0.5);
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色白色 (White) >> 白半透明 rgba >> ((0.7)) **************************/
.B2C-Style section.breadcrumb_block .breadcrumb a/* 麵包屑路徑 (Dynamic 頁面) */,
.B2C-Style section#breadcrumb .breadcrumb a,
.B2C-Style .breadcrumb_block .breadcrumb a,
.B2C-Style .dark [class*="widget_"] li a,
.B2C-Style .copyright-links a {
color: rgba(255,255,255, 0.7);
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色白色 (White) >> 白半透明 rgba >> ((0.85)) **************************/
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h4,
.B2C-Style #home_promotion_top .promo_item .hover_block h4,
.B2C-Style .promo_block .promo_item .hover_block h4,
.B2C-Style .promo_item .hover_block h4,
.B2C-Style section.breadcrumb_block .breadcrumb li:last-child a/* 麵包屑路徑 (Dynamic 頁面) */,
.B2C-Style section#breadcrumb .breadcrumb li:last-child a/* 麵包屑路徑 (一般頁面) */,
.B2C-Style #top-bar.dark a {
color: rgba(255,255,255, 0.85);
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色白色 (White) >> 白不透明 rgba >> ((1.0)) **************************/
.B2C-Style .sect-divider a.btn:hover,
.B2C-Style .product-record-single .sect-divider,
.B2C-Style .row div.product-category > div.sect-divider,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a::after,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a {
color: #fff;
color: rgba(255,255,255, 1.0);
opacity: 1;
}
/********************** 【 1. Not-Hover Font 】 字統一套色 Middle Blue (ATEN 中藍色) >> 半透明 >> (0.5) **************************/
/* Mega Menu >> Success Story >> Li::before */
.B2C-Style #primary-menu ul[class*="menu_body_"] > li.menuitem_success-stories > ul[class*="menu_body_"] > li:not(.last)::before {
/* color: #005caa; */
color: rgba(0, 92, 170, 0.5);
}
/********************** 【 2. Actived/ Selected/ Not-Hover Font 】 字統一套色 Middle Blue (ATEN 中藍色) >> 不透明 >> (1.0) **************************/
/* Product Listing >> Add to Cart >> Added (已加入) .B2C-Style #product_lists .btn-primary.addtocart.added, */
.B2C-Style #primary-menu ul.menu_body_1 > li > a::after,
.B2C-Style #primary-menu ul.menu_body_0 > li.current > a,
.B2C-Style #product_tab_menu .navbar-nav > .active > a {
color: rgba(0, 92, 170, 1.0);
color: #005caa;
}
/********************** 【 2. Actived/ Selected/ Not-Hover Font 】 字統一套色 Middle Blue (ATEN 中藍色) >> 不透明 (Important) >> (1.0) **************************/
.B2C-Style #comparison_listing .comparisontable .btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */ {
color: rgba(0, 92, 170, 1.0) !important;
color: #005caa !important;
}
/***************************** 【 2. Actived/ Selected/ Not-Hover Font (綠色) 】 (.Green-ATEN) ******************************/
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart i::before/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style .single-product .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-image-container 第二顆 div 下有 .add-to-cart Button 的 a */,
.B2C-Style .single-product .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a::before/* .single-product 的 .product-image-container 第二顆 div 下有 .add-to-cart Button 的 a::before */,
.B2C-Style .single-product .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-desc 第二顆 div 下有 .add-to-cart Button 的 a */,
.B2C-Style .single-product .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a::before/* .single-product 的 .product-desc 第二顆 div 下有 .add-to-cart Button 的 a::before */,
.B2C-Style .qs-block .qs-header ul.qs-filter li.active:not(.qs-block .qs-header div.dropdown ul.qs-filter li.active)/* Product Category >> Filter Menu >> UL >> Li.active */,
.B2C-Style .qs-block .qs-header ul.qs-filter li.active a:not(.qs-block .qs-header div.dropdown ul.qs-filter li.active a)/* Product Category >> Filter Menu >> UL >> Li.active >> a */ {
color: rgba(143, 195, 32, 1.0);
color: #8fc320;
color: rgba(128, 186, 45, 1.0);
color: #80ba2d;
}
/********************** 【 3. Hover Font/ :hover 一定要放在 not 最後 】 字統一套色 Light Blue-1 >> (ATEN 淺藍) 不透明 (1.0) ***********************/
.B2C-Style .tab-content.features-abstract li:has(.all-features):hover::after/* Top Four Features >> 新增 All Features Link Text >> 右箭頭(短) (連跳至 Features Tab) */,
.B2C-Style .tab-content.features-abstract li:has(.all-features) a:hover/* Top Four Features >> 新增 All Features Link Text >> 右箭頭(短) (連跳至 Features Tab) */,
.B2C-Style a:not(a[class*="btn-"]):not(.breadcrumb a):not(.ui-state-default a):not(.dark .footer-widgets-wrap a):not(.dark [class*="widget_"] li a):not(.dark .copyright-links a):not(div.product_section .product-desc a):not(.langmap .list li a):not(.secondary-navigation.Dark_Sec_NavMenu div.container table > tbody > tr > td a):not(.Dark_Sec_NavMenu .secondary-navigation div.container table > tbody > tr > td a):not(.B2C-Style a.comparison_block):not(.product-title h3 a):not(.compare-modal .product-name a):not(ol.plist li a):not(#primary-menu ul.menu_body_0 > li > a):not(.B2C-Style #primary-menu ul.menu_body_1 > li > a):not(.B2C-Style #primary-menu ul li a):not(.B2C-Style #top-bar a):not(section#content .form-group ul.dropdown-menu li a):not(ul.dropdown-menu li a):not(.B2C-Style #top-search a):not(.B2C-Style #product_category_list .subcategory li a):not(.qs-block .qs-header ul.qs-filter li a):not(.Dark-Mode section#content .single-product .product-padding a):not(a.linkblock):not(a.linkto):not(.product-page-index a.btn.disabled):not(nav#product_tab_menu.navbar-fixed-top nav#top-refs-tab ul li a):not(#product_category_list a.category):not(#mobile-product-header a.list-group-item.active):not([id*="mobile-"] a.list-group-item.active):not(.Dark-Mode #content .single-product li a):not(.Dark-Mode #content .single-product a):not(#multi_product_category_list ul li.active a):hover {
color: rgba(0, 152, 220, 1.0);
color: #0098dc;
}
.B2C-Style #product_category_list:hover .fa-angle-right/* 右箭頭(短) >> Filter >> Product Listing Page */,
.B2C-Style #product_category_list:hover .fa-chevron-right,
.B2C-Style #product_category_list:hover .fa-angle-down,
.B2C-Style #product_category_list h2.subtitle:hover .fa-angle-down,
.B2C-Style #product_category_list:not(.active):hover h2/*Filter Title >> Product Listing Page */
.B2C-Style #product_category_list > h2.subtitle:hover/*Filter Title >> Product Listing Page */,
.B2C-Style h4 a:hover {
color: rgba(0, 152, 220, 1.0) !important;
color: #0098dc !important;
}
.AAA示意/*圖為黑轉淺藍*/ {
filter: invert(0.1) sepia(1) saturate(4) hue-rotate(150.9deg) brightness(1) !important;
}
/********************** 【 3. Hover Font 】 字統一套色 ATEN Blue >> (ATEN 藍) (深藍色) 不透明 (1.0) ***********************/
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button::after/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button::before/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style .filter_category li:hover input[type="radio"]/* Search Result Page >> Filter Radio */,
.B2C-Style input[type="radio"] + label:hover/* Search Result Page >> Filter Radio > Label */,
.B2C-Style .filter_label:hover/* Search Result Page >> Filter Category List > Label */,
.B2C-Style #product_listing #filter_form label:hover .checkbox/* Product Listing Page >> Filter > Label */,
.B2C-Style #product_listing #filter_form label:hover/* Product Listing Page >> Filter > Label */,
.B2C-Style #product_listing label:hover/* Product Listing Page >> Label */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width span/* Get Quote Modual >> See More Products */,
.B2C-Style .btn.btn-secondary/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style #product_category_list .subcategory a:hover/* Product Listing Page >> Product Category List > a */
.B2C-Style .sect-divider .checkbox.product-list label:hover a,
.B2C-Style .share label:hover a.comparison_block,
.B2C-Style .share a.comparison_block:hover,
.B2C-Style a.comparison_block:hover,
.B2C-Style div.sect-divider:hover div.product-title h3 a/* Feature Article + Product Listing */,
.B2C-Style div.sect-divider:hover .product-title h3 a/* Feature Article + Product Listing */,
.B2C-Style .row div.product-category > div.sect-divider:hover div.product-title h3 a/* Only Feature Article */,
.B2C-Style .row div.product-category > div.sect-divider:hover .product-title h3 a/* Only Feature Article */,
.B2C-Style .product-record-single .sect-divider:hover div.product-title h3 a/* Only Product Listing*/,
.B2C-Style .product-record-single .sect-divider:hover .product-title h3 a/* Only Product Listing*/,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a,
.B2C-Style .product-head .breadcrumb li:last-child a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品列表頁面) */,
.B2C-Style #product_listing .breadcrumb li:last-child a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品其它頁面) */,
.B2C-Style #product_detail .breadcrumb li:last-child a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品單頁) */,
.B2C-Style .product-head .breadcrumb li a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品列表頁面) */,
.B2C-Style #product_listing .breadcrumb li a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品其它頁面) */,
.B2C-Style #product_detail .breadcrumb li a:hover /* .breadcrumb Li a (麵包屑路徑) (最後一個 li a) (產品單頁) */,
.B2C-Style .breadcrumb a:hover,
.B2C-Style #top-bar a:hover span.globe-icon::before/* Top Bar > a:hover >> 地球 Icon (白底) */,
.B2C-Style #top-bar a:hover/* Top Bar > a:hover (白底)*/ {
color: #004276;
color: rgba(0, 66, 118, 1.0);
}
/********************** 【 3. Hover Font (Important 強制) 】 字統一套色 ATEN Blue >> (ATEN 藍) ***********************/
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width span/* Get Quote Modual >> See More Products */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width/* Get Quote Modual >> See More Products */,
.B2C-Style .compare-modal .product-name a:hover/* Comparison Table > Product Name > a:hover */,
.B2C-Style .filter_category li:hover input[type="radio"]/* Search Result Page >> Filter Radio */,
.B2C-Style .filter_label:hover .checkmark,
.B2C-Style .filter_label:hover/* Search Result Page >> Filter Category List > Label */,
.B2C-Style ol.plist li a:hover/* All Product >> Category > a:hover */ {
color: #004276 !important;
}
/********************** 【 3. Hover Font 】 字統一套色 Dark Blu >> (ATEN 中藍色) 不透明 (1.0) ************************************/
.B2C-Style .filter_category li:hover input[type="radio"]/* Search Result Page >> Filter Radio */,
.B2C-Style input[type="radio"]:hover + label/* Search Result Page >> Filter Radio(Hover)*/,
.B2C-Style #sidebar .pnumber:hover/* Search Result Page >> Filter Label >> Product Subitem Number(Hover)*/,
.B2C-Style .filter_label:hover/* Search Result Page >> Filter Label(Hover)*/,
.B2C-Style a.comparison_block:hover,
.B2C-Style #header:not(.dark) #top-search form i.icon-search3:hover/*Search Box > Icon (Hover) */,
.B2C-Style #header #top-search form i.icon-search3:hover/*Search Box > Icon (Hover) */,
.B2C-Style .dark #header-wrap:not(.not-dark) #primary-menu ul.menu_body_0 > li:hover > a/* 黑選單 >> Main Menu */,
.B2C-Style .dark #primary-menu:not(.not-dark) ul ul ul[class*="menu_body_"] a:hover,
.B2C-Style #primary-menu ul ul ul[class*="menu_body_"] a:hover,
.B2C-Style #primary-menu ul.menu_body_0 ul li > a:hover,
.B2C-Style #primary-menu ul.menu_body_0 > li:hover > a:hover,
.B2C-Style #primary-menu ul.menu_body_0 > li:hover > a,
.B2C-Style #top-search a:hover [class*="fa-"]::before/* Main 選單 > Search Icon (白底)*/,
.B2C-Style #top-search a:hover [class*="icon-"]:not(.popover i):not(.popover [class*="icon-"])::before /* Main 選單 > Search Icon (白底)*/,
.B2C-Style #top-bar .dropdown-menu li a:hover,
.B2C-Style #primary-menu ul li a:hover {
color: rgba(0, 92, 170, 1.0);
color: #005caa;
}
/* 麵包屑路徑 >> 下拉選單 (ul.dropdown-menu) */
.B2C-Style .product-head ol.breadcrumb li.dropdown a:hover span.caret,
.B2C-Style .product-head ol.breadcrumb li.dropdown a:hover,
.B2C-Style .desktop-product-header ol.breadcrumb li.dropdown a:hover span.caret,
.B2C-Style .desktop-product-header ol.breadcrumb li.dropdown a:hover,
.B2C-Style #product_detail ol.breadcrumb > li.dropdown a:hover span.caret,
.B2C-Style #product_detail ol.breadcrumb li.dropdown a:hover,
.B2C-Style .product-head ol.breadcrumb li.dropdown ul.dropdown-menu li a:hover,
.B2C-Style .desktop-product-header ol.breadcrumb li.dropdown ul.dropdown-menu li a:hover,
.B2C-Style #product_detail .breadcrumb li.dropdown ul.dropdown-menu li a:hover,
.B2C-Style ol.breadcrumb li.dropdown ul.dropdown-menu li a:hover,
.B2C-Style .product-head .breadcrumb li a:hover {
color: rgba(0, 92, 170, 1.0) !important;
color: #005caa !important;
}
/********************** 【 3. Hover Font (Important 強制) 】 字統一套色 Dark Blu >> (ATEN 中藍色) 不透明 (1.0) ************************************/
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.active):hover/* Product Category >> Filter Menu >> UL >> Li:hover */,
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.active):hover a/* Product Category >> Filter Menu >> UL >> Li:hover >> a */,
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.active) a:hover/* Product Category >> Filter Menu >> UL >> Li >> a:hover */,
.B2C-Style .row.result_item h2 a:hover/* Search Result Page >> Result Item > H2 > a:Hover */,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .numberaction:hover/* Get Quote Page >> + / - Icon */,
.B2C-Style .compare-modal .product-name a:hover/* Comparison Table > Product Name > a:hover */,
.B2C-Style #product_category_list:hover .fa-angle-right/* 右箭頭(短) >> Filter >> Product Listing Page */,
.B2C-Style #product_category_list:hover .fa-chevron-right,
.B2C-Style #product_category_list:hover .fa-angle-down,
.B2C-Style #product_category_list h2.subtitle:hover .fa-angle-down,
.B2C-Style #product_category_list:not(.active):hover h2/*Filter Title >> Product Listing Page */,
.B2C-Style #product_category_list > h2.subtitle:hover/*Filter Title >> Product Listing Page */ {
color: rgba(0, 92, 170, 1.0) !important;
color: #005caa !important;
}
/********************** 【 3. Hover Font 】 字統一套色 Light Blue-2 >> (ATEN 淺藍) 不透明 (1.0) ***********************/
/**** (只針對 Mega Menu 廣告 Banner) (Solutions >> More ....) ****/
/*.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button, */
.B2C-Style .row.result_item p + a + span + a:hover::before/* Search Result Page >> Result Item > a + a > Icon */,
.B2C-Style .row.result_item p + p + a:hover::before/* Search Result Page >> Result Item > a > Icon */,
.B2C-Style .row.result_item p + a:hover::before/* Search Result Page >> Result Item > a > Icon */,
.B2C-Style .row.result_item p + a:hover/* Search Result Page >> Result Item > a */,
.B2C-Style .row.result_item p + a + span + a:hover/* Search Result Page >> Result Item > a */,
.B2C-Style .well-compare a.compare-modal:hover/* Compare Model >> Product Item > Remove Text Link:Hover */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover::after/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover::before/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #primary-menu ul ul ul > li.last.all > a:hover {
color: rgba(0, 152, 220, 1.0) !important;
color: #0098dc !important;
}
/********************** 【 3. Hover Font 】 字統一套色 Grey-4 (Dark) >> (深灰) 不透明 (1.0) ***********************/
/* Product Tab Menu >> UL >> LI >> a:hover */
AAAAA {
color: rgba(92, 94, 96, 1.0);
color: #5c5e60;
}
/********************** 【 3. Hover Font 】 字統一套色 Dark/ Black >> (深藍黑) 不透明 (1.0) ***********************/
/* Product Tab Menu >> UL >> LI >> a:hover */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a:not(.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a):hover {
color: rgba(0, 7, 34, 1.0);
color: #000722;
}
/*********************** 【 3. Hover Font 】 字統一套色 White (白色) >> 不透明 (1.0) *************************/
/* Main/ Sub Category >> Slider Banner >> Main Button >> 最後一個 a.btn (hover)
.B2C-Style #slider .swiper-slide .slider-caption:has(a + a) a.btn.btn-primary:last-child:hover,*/
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart i::before,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart:hover i::before/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart:hover/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary.button_white:hover/* Main/ Sub Category >> Slider Banner >> Main Button (.button_white) (hover) */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right:hover i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left:hover i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right:hover i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left:hover i/* Slide Banner */,
/*.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button, */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove:hover/* Get Quote Page >> Product Item Block > List Item >> Remove Button */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width:hover span/* Get Quote Modual >> See More Products */,
.B2C-Style #gqc_preview a.button.btn-full-width:hover span/* Get Quote Modual >> Button > span */,
.B2C-Style .btn.btn-secondary:hover/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall:hover/* Compare Model >> Remove Button */,
.B2C-Style #product_lists a.btn-load-more:hover .icon-chevron-down::before/* Load More Icon (載入更多) >> Product Listing Page */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default:hover/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn-load-more:hover .icon-chevron-down::before/* Load More Icon (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default:hover/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover::after/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover::before/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button:hover/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu #primary-menu .mega-menu-advertisements-horizontal>.mega-menu-advertisement>.mega-menu-advertisement-body>.mega-menu-advertisement-button/* Mega Menu >> Learn More */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button:hover,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a:hover,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a,
.B2C-Style .btn-learnm a:hover,
.B2C-Style section.breadcrumb_block .breadcrumb a:hover/* 麵包屑路徑 (Dynamic 頁面) */,
.B2C-Style section#breadcrumb .breadcrumb a:hover,
.B2C-Style .breadcrumb_block .breadcrumb a:hover,
.B2C-Style a[class*="btn-"]:hover,
.B2C-Style .dark [class*="widget_"] li a:hover,
.B2C-Style .dark .copyright-links a:hover,
.B2C-Style #top-bar.dark .dropdown-menu li a:hover,
.B2C-Style .dark #top-search a:hover [class*="fa-"]::before/* Main 選單 > Search Icon (白底)*/,
.B2C-Style .dark #top-search a:hover [class*="icon-"]::before /* Main 選單 > Search Icon (白底)*/,
.B2C-Style #top-bar.dark a:hover span.globe-icon::before/* Top Bar > a:hover >> 地球 Icon (黑底) */,
.B2C-Style #top-bar.dark a:hover/* Top Bar > a:hover (黑底) */ {
color: #fff;
color: rgba(255,255,255, 1.0) !important;
opacity: 1;
}
/*************************************************************************************************************************
( B ). 【 BG Color (背景套色) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* White (BG) */
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style .single-product .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-image-container 第二顆 (大 Button) div 下有 .add-to-cart Button 的 a */,
.B2C-Style .single-product .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-desc 第二顆 (大 Button) div 下有 .add-to-cart Button 的 a */,
.B2C-Style #comparison_landings .container:last-child .well-compare/* 彈出比較表 Box */,
/*.B2C-Style #search_form .form-group button[aria-controls], */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a,
.B2C-Style .blank-product/* Compare Model >> blank-product */,
.B2C-Style #sitesearch_form .btn[class*="btn-"]/* Search Result Page >> Search Button */,
.B2C-Style.top-search-open #top-search form input/* Fixed Search Box >> Input 輸入框 */,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input/* Fixed Search Box >> Input 輸入框 */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> All Page */,
[data-bg="white"],
.BG-White {
background-color: white;
transition: all 0.3s ease-in-out 0s;
}
/* Black (或許使用 Dark) (BG)*/
[data-bg="black"],
.BG-Black {
background-color: black;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Blue (BG) (主深藍色調) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm)/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style #search_content .hamburger/* Search Result Page >> Close Filter Button */,
.B2C-Style #search_form .form-group button.btn-go/* Product Listing + Single Page*/,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/,
.B2C-Style .btn-info,
.B2C-Style .btn-primary,
.B2C-Style .button,
[data-bg="primary"],
[data-bg="colorone"],
.BG-ATEN-Blue,
.BG-Blue,
.BG-Primary {
/*background-color: #3C4AED; */
background-color: rgba(7, 69, 118, 1.0);
background-color: #074576;
background-color: rgba(0, 66, 118, 1.0);
background-color: #004276;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Blue (BG) (主深藍色調) */
.B2C-Style #search_content .hamburger/* Search Result Page >> Close Filter Button */ {
background-color: rgba(0, 66, 118, 1.0) !important;
background-color: #004276 !important/*要覆蓋原來的行內*/;
}
/* ATEN Blue-2 (BG) (Light) (亮藍色) */
[data-bg="tertiary"],
[data-bg="colorthree"],
.BG-Blue-Light,
.BG-Tertiary {
background-color: rgba(0, 167, 235, 1.0);
background-color: #00a7eb;
background-color: rgba(0, 152, 220, 1.0);
background-color: #0098dc;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Blue-3 (BG) (Middle) (中藍色) */
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm)/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style #home_footer_bar .bar_item/* Footer Bar >> .bar_item */,
.B2C-Style #search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info,
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info:not([aria-controls="filter_form"]):not(.Dark-Mode #search_form .form-group button.btn-go + span + .btn-info),
/*.B2C-Style #search_form .form-group .btn-info:not([aria-controls="filter_form"]), */
.B2C-Style #sidebar input:checked ~ .checkmark,
.B2C-Style .container input:checked ~ .checkmark,
.B2C-Style .well-filter input:checked ~ .checkmark,
[data-bg="fourth"],
[data-bg="colorfour"],
.BG-Blue-Middle,
.BG-Fourth {
background-color: rgba(0, 92, 170, 1.0);
background-color: #005caa;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Blue-3 (BG) (Middle) (中藍色) */
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */ {
background-color: rgba(0, 92, 170, 1.0) !important;
background-color: #005caa !important;
}
/* Template (BG >> 透明 1.0 ) */
[data-bg="template"],
.BG-Template {
/*background-color: #3C4AED;*/
background-color: rgba(7, 69, 118, 1.0);
background-color: #074576;
background-color: rgba(0, 66, 118, 1.0);
background-color: #004276;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-1 (Light) (BG >> 透明 1.0 ) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a,
[data-bg="greyL"],
.BG-GreyL {
background-color: rgba(245, 245, 245, 1.0);
background-color: #f5f5f5;
background-color: rgba(248, 248, 248, 1.0);
background-color: #F8F8F8;
background-color: rgba(243, 244, 246, 1.0);
background-color: #f3f4f6;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-1-2 (Light) (BG >> 透明 0.5 ) */
.B2C-Style .blank-product:hover/* Compare Model >> blank-product (Hover) */,
.B2C-Style #filter_form/* Filter >> Product Listing Page */,
.B2C-Style #sidebar/* Filter >> Search Result Page */,
.B2C-Style #product_category_list/* Producr Listing Page >> Category Section */ {
/*background-color: #f3f4f6;*/
background-color: rgba(243, 244, 246, .5);
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-1-3 (Light) (BG >> 透明 0.85 ) */
.B2C-Style #top-bar {
/*background-color: #f3f4f6;*/
background-color: rgba(243, 244, 246, .85);
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-1-3 (Light) (BG >> 淺灰) */
/* 改為用 img 為框線主體呈現 >> 而非外層的背景色 + 框線 */
/* Single Product Page >> Photo Image .B2C-Style .slider-wrap, */
.B2C-Style .single-product #diagram-tab.tab-content .diagram-image,
.B2C-Style .single-product #diagram-tab.tab-content .diagram-image .diagram_large,
.B2C-Style .single-product #diagram-tab.tab-content .diagram-image img {
background-color: #f3f4f6;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-2 (Normal) */
[data-bg="grey"],
.BG-Grey {
background-color: rgba(204, 204, 204, 1.0);
background-color: #cccccc;
background-color: rgba(195, 198, 203, 1.0);
background-color: #c3c6cb;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-2 (Normal) (BG >> 透明 0.3 ) */
.B2C-Style #sidebar .pnumber/* Search Result > Filter Item > Number*/ {
/* background-color: #c3c6cb; */
background-color: rgba(195, 198, 203, 0.3);
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-3 (Middle) (BG) */
.B2C-Style #adjustColumn ul li:hover/* Comparsion Table >> Show Less/More Item >> Lightbox */,
[data-bg="greyMD"],
.BG-GreyMD {
background-color: rgba(154, 154, 154, 1.0);
background-color: #9a9a9a;
background-color: rgba(149, 153, 159, 1.0);
background-color: #95999f;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-4 (Dark) (BG) */
[data-bg="greyDK"],
.BG-GreyDK {
background-color: rgba(77, 77, 77, 1.0);
background-color: #4d4d4d;
background-color: rgba(72, 74, 76, 1.0);
background-color: #484a4c;
background-color: rgba(92, 94, 96, 1.0);
background-color: #5c5e60;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Grey-5 (Black-Dark) (BG) */
.B2C-Style #footer.dark,
.B2C-Style .dark #footer,
[data-bg="greyBK"],
.BG-GreyBK {
background-color: #333;
background-color: #2f2f2f;
background-color: #373839;
transition: all 0.3s ease-in-out 0s;
}
/* Dark/ Black (BG)*/
.B2C-Style .dark #top-bar,
.B2C-Style #top-bar.dark,
[data-bg="dark"],
.BG-Dark {
background-color: rgba(34, 34, 34, 1.0);
background-color: #222220;
background-color: rgba(0, 7, 34, 1.0);
background-color: #000722;
transition: all 0.3s ease-in-out 0s;
}
/* White (BG) (LI >> 【 Hover 】(( 半透明 0.4 )) */
/* Product Tab Menu >> UL >> LI >> a:hover */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a:hover {
background-color: #f9f9f9;
background-color: rgba(243, 244, 246, 0.4);
transition: all 0.3s ease-in-out 0s;
}
/* White (BG) (LI >> 【 Active 】(( 不透明 1.0 )) */
/* Product Tab Menu >> UL >> LI >> Active */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a {
background-color: white;
transition: all 0.3s ease-in-out 0s;
}
/* White (BG) (LI >> 【 Active 】(( 半透明 0.7 )) */
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.qs-block .qs-header div.dropdown ul.qs-filter li)/* Product Category >> Filter Menu >> UL >> Li */ {
background-color: white;
background-color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease-in-out 0s;
}
/* White (BG) (LI >> 【 All 】(( 不透明 1.0 )) (!important) */
/* Comparsion Button >> Product Page */
/* Main/ Sub Category >> Slider Banner >> Main Button >> 最後一個 a.btn
.B2C-Style #slider .swiper-slide .slider-caption:has(a + a) a.btn.btn-primary:last-child, */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary.button_white/* Main/ Sub Category >> Slider Banner >> Main Button (.button_white) */,
.B2C-Style .btn-info:not(button.btn-go).disabled,
.B2C-Style .btn-info:not(button.btn-go)[disabled],
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go),
.B2C-Style .btn-info:not(button.btn-go).disabled:hover,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:hover,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):hover,
.B2C-Style .btn-info:not(button.btn-go).disabled:focus,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:focus,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):focus,
.B2C-Style .btn-info:not(button.btn-go).disabled.focus,
.B2C-Style .btn-info:not(button.btn-go)[disabled].focus,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go).focus,
.B2C-Style .btn-info:not(button.btn-go).disabled:active,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:active,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):active,
.B2C-Style .btn-info:not(button.btn-go).disabled.active,
.B2C-Style .btn-info:not(button.btn-go)[disabled].active,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go).active {
background-color: white !important;
transition: all 0.3s ease-in-out 0s;
}
/* ATEN Green (BG) (Highlight Color 強調色) >> 白底時 */
.B2C-Style .quote_enable #cartCount,
.B2C-Style a.add-to-cart.button:not(#gqc_preview a.add-to-cart.button.nomargin.btn-full-width),
.B2C-Style .btn-primary:not(.sect-divider .btn-learnm a):not(#product_lists .btn-primary.addtocart):not(#adjustColumn .modal-footer .btn + .btn):not(.modal-footer .btn.btn-primary):not(#gqc_preview a.add-to-cart.button.nomargin.btn-full-width):not(.promo_item a.btn):not(.promo_block .promo_item .hover_block a.btn):not(#home_promotion_top .promo_item .hover_block a.btn):not(.promote-products .product-record-single .sect-divider .btn-group a.btn)/* 主要按鈕 */,
[data-bg="secondary"],
[data-bg="colortwo"],
.BG-Green,
.BG-Secondary {
background-color: rgba(143, 195, 32, 1.0);
background-color: #8fc320;
background-color: rgba(128, 186, 45, 1.0);
background-color: #80ba2d;
transition: all 0.3s ease-in-out 0s;
}
.B2C-Style .single-product .product-padding a.add-to-cart.button,
.B2C-Style .single-product .product-padding .product-desc .product-desc a.add-to-cart.button,
.B2C-Style .single-product .product-padding .product-image-container a.add-to-cart.button {
background-color: rgba(128, 186, 45, 1.0) !important;
background-color: #80ba2d !important;
}
/* .B2C-Style .single-product .product-padding div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button, */
.B2C-Style .product-padding .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button,
.B2C-Style .product-padding .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button {
background-color: white !important;
}
/* ATEN Green (BG) (Highlight Color 強調色) >> 黑底時 */
[data-bg="secondaryD"],
[data-bg="secondary2"],
[data-bg="colortwo2"],
.BG-Green2,
.BG-Secondary2 {
background-color: rgba(148, 197, 44, 1.0);
background-color: #94c52c;
transition: all 0.3s ease-in-out 0s;
}
/* Tranparent (透明底) */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li.active a/* Product Category >> Filter Menu >> UL >> Li >> Active (Mobile) */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .btn.btn-secondary/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style #comparison_listing .comparisontable .btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall/* Compare Model >> Remove Button */,
.B2C-Style .product_button .discontinued-product a.button/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a::after,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a,
.B2C-Style .btn-learnm a:hover,
.B2C-Style .row div.product-category > div.sect-divider div.btn-learnm,
.B2C-Style .btn-learnm a,
.B2C-Style div.btn-learnm,
[data-bg="colortranspt"] {
background-color: transparent;
transition: all 0.3s ease-in-out 0s;
}
/* (CTA 強調按鈕/ 非功能面) ATEN Green (BG) (Hover Color 強調亮綠色) >> 所有 Button Hover 時 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style #home_promotion_top.promo_block .promo_item a[class*="link"]:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item a[class*="link"]:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item a.linkto:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style .sect-divider a.btn:hover,
.B2C-Style .single-product a.add-to-cart.button:hover/* Add to Cart (Single Product) */,
.B2C-Style a.quote_enable:hover #cartCount,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm,
.B2C-Style a.button:hover,
.B2C-Style .btn-info:hover,
.B2C-Style .button:hover,
.B2C-Style .btn-primary:not(.sect-divider .btn-learnm a):not(#product_lists .addtocart):not(#adjustColumn .modal-footer .btn + .btn):not(.modal-footer .btn.btn-primary):not(#gqc_preview a.add-to-cart.button.nomargin.btn-full-width):not(section.quote-cart + #content a.actbtn button):not(.promote-products .product-record-single .sect-divider .btn-group a.btn):hover/* 主要按鈕 (Hover 要放在 not 最後) */,
[data-bg="colorhover"] {
background-color: rgba(159, 226, 40, 1.0);
background-color: #9fe228;
transition: all 0.3s ease-in-out 0s;
}
/* White (BG) (LI >> 【 All 】(( 不透明 1.0 )) (!important) */
/* .B2C-Style .single-product .product-padding div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button:hover, */
.B2C-Style .product-padding .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button:hover,
.B2C-Style .product-padding .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a.add-to-cart.button:hover,
.B2C-Style .single-product .product-padding a.add-to-cart.button:hover,
.B2C-Style .single-product .product-padding .product-desc .product-desc a.add-to-cart.button:hover,
.B2C-Style .single-product .product-padding .product-image-container a.add-to-cart.button:hover,
.B2C-Style .single-product .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a:hover/* .single-product 的 .product-image-container 第二顆 div 下有 .add-to-cart Button 的 a */,
.B2C-Style .single-product .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a:hover/* .single-product 的 .product-desc 第二顆 div 下有 .add-to-cart Button 的 a */,
.B2C-Style #slider .swiper-slide .slider-caption:has(a + a) a.btn.btn-primary:hover:last-child/* Main/ Sub Category >> Slider Banner >> Main Button >> 最後一個 a.btn */,
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary.button_white:hover/* Main/ Sub Category >> Slider Banner >> Main Button (.button_white) */,
.B2C-Style .single-product a.add-to-cart.button:hover/* Add to Cart (Single Product) */,
.B2C-Style #product_tab_menu .add-to-cart.button:hover/* Add to Cart (Fixed Menu / Single Product) */,
/* Comparsion Button >> Product Page */
.B2C-Style .btn-info.disabled,
.B2C-Style .btn-info[disabled],
.B2C-Style fieldset[disabled] .btn-info,
.B2C-Style .btn-info.disabled:hover,
.B2C-Style .btn-info[disabled]:hover,
.B2C-Style fieldset[disabled] .btn-info:hover,
.B2C-Style .btn-info.disabled:focus,
.B2C-Style .btn-info[disabled]:focus,
.B2C-Style fieldset[disabled] .btn-info:focus,
.B2C-Style .btn-info.disabled.focus,
.B2C-Style .btn-info[disabled].focus,
.B2C-Style fieldset[disabled] .btn-info.focus,
.B2C-Style .btn-info.disabled:active,
.B2C-Style .btn-info[disabled]:active,
.B2C-Style fieldset[disabled] .btn-info:active,
.B2C-Style .btn-info.disabled.active,
.B2C-Style .btn-info[disabled].active,
.B2C-Style fieldset[disabled] .btn-info.active {
background-color: rgba(159, 226, 40, 1.0) !important;
background-color: #9fe228 !important;
transition: all 0.3s ease-in-out 0s;
}
/* (功能按鈕 >> 套黑色) ATEN Blue-3 (BG) 【 Hover 】 Dark/ Black (BG) */
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.btn.btn-primary:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn:hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn:hover */,
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info:not([aria-controls="filter_form"]):not(.Dark-Mode #search_form .form-group button.btn-go + span + .btn-info):hover,
.B2C-Style .table-responsive + .modal-footer .btn-info:hover/* Compare Share Table >> All Button(at Bottom) */,
.B2C-Style #comparison_listing .btn-info:hover/* Compare Table >> All Button(at Bottom) */,
.B2C-Style #search_content .hamburger/* Search Result Page >> Close Filter Button */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button/*Mega Menu >> Lear More*/,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button/*Mega Menu >> Lear More*/,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove:hover/* Get Quote Page >> Product Item Block > List Item >> Remove Button */,
.B2C-Style section.quote-cart + #content a.actbtn button:hover/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width:hover/* Get Quote Modual >> See More Products */,
.B2C-Style #gqc_preview a.add-to-cart.button.nomargin.btn-full-width:hover/* Get Quote Modual >> View Cart */,
.B2C-Style #gqc_preview a.button.btn-full-width:hover/* Get Quote Modual >> Button */,
.B2C-Style .modal-footer .btn.btn-primary:hover/* Comparsion Table >> .modal-footer >> >> primary Button >> Lightbox Modual */,
.B2C-Style .btn.btn-primary.submitfilter:hover/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style .btn.btn-secondary:hover/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style #comparison_listing .comparisontable .btn_border:hover/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style .comparisontable a.btn_border:hover/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style .well-compare .btn.btn-info:hover/* Compare Model >> All Button */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow:hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm):hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style .product_button .discontinued-product a.button:hover/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm/* Learn More >> Feature Article */,
.B2C-Style .sect-divider a.btn:hover/* Add to Quote Cart (Hover) (加入詢問車) >> Product Listing Page */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default:hover/* Load More Button (Hover) (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default:hover/* Load More Button (Hover) (載入更多) >> Product Listing Page */,
.B2C-Style #search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info:hover,
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info:hover,
.B2C-Style #search_form .form-group button.btn-go:hover/* Go Button >> Product Page */,
.B2C-Style .product-head button.btn-go:hover/* Product Subcategory Page*/ {
/* (Middle) (中藍色)
background-color: rgba(0, 92, 170, 1.0);
background-color: #005caa;
*/
background-color: rgba(0, 7, 34, 1.0);
background-color: #000722;
transition: all 0.3s ease-in-out 0s;
}
/* (功能按鈕 >> 套黑色) ATEN Blue-3 (BG) 【 Hover 】 Dark/ Black (BG) */
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.btn.btn-primary:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style #search_content .hamburger:hover/* Search Result Page >> Close Filter Button(Hover) */ {
background-color: rgba(0, 7, 34, 1.0) !important;
background-color: #000722 !important/*要覆蓋原來的行內*/;
}
/* (功能按鈕 >> (Middle) (中藍色) ATEN Blue-3 (BG) 【 Hover 】 Middle/ Black (BG) */
/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart:hover
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart:hover ,*/
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style #gqc_tip+.popover .popover-title/* Get Quote Modual >> Tip */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button/*Mega Menu >> Lear More*/,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button/*Mega Menu >> Lear More*/,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm/* Learn More >> Feature Article */,
.B2C-Style .sect-divider a.btn:hover/* Add to Quote Cart (Hover) (加入詢問車) >> Product Listing Page */ {
background-color: rgba(0, 92, 170, 1.0);
background-color: #005caa;
transition: all 0.3s ease-in-out 0s;
}
/* (功能按鈕 >> (Middle) (中藍色) ATEN Blue-3 (BG) 【 Hover 】 Middle/ Black (BG) */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */ {
background-color: rgba(0, 92, 170, 1.0) !important;
background-color: #005caa !important;
}
/*************************************************************************************************************************
( C ). 【 Boder Style (不包含字樣) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/*************** 【 Border (All) Style / 2px 】 統一套色 ATEN Blue >> (暗藍色) 不透明 (1.0) *****************/
/* Learn More Button a >> Product Listing / Feature Article */
/*#search_form .form-group button[aria-controls], */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn/* Product Recommendation >> .product-desc >> .btn-group >> a.btn */ ,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width/* Get Quote Modual >> See More Products */,
.B2C-Style #gqc_preview a.add-to-cart.button.nomargin.btn-full-width/* Get Quote Modual >> View Cart */,
.B2C-Style #gqc_preview a.button.btn-full-width/* Get Quote Modual >> View Cart */,
.B2C-Style .modal-footer .btn.btn-primary/* Comparsion Table >> .modal-footer >> >> primary Button >> Lightbox Modual */,
.B2C-Style .btn.btn-primary.submitfilter/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style #product_lists .btn-primary.addtocart/* Product Listing >> Add to Cart */,
.B2C-Style #search_form .form-group button.btn-go/* Product Listing + Single Page*/,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/,
.B2C-Style a.button,
.B2C-Style .btn-info:not(#search_form .form-group button.btn-go + span + .btn-info):not(#search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info):not(#sitesearch_form button.btn-go),
.B2C-Style .button,
.B2C-Style .btn[class*="btn-"]:not(.btn-primary):not(.sect-divider .btn-learnm a):not(a.add-to-cart.btn-full-width):not(#product_tab_menu .add-to-cart.button):not(#search_form .form-group button.btn-go + span + .btn-info):not(#search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info):not(#Sortblock button.btn.btn-default):not(.Two-Button .btn[class*="btn"]):not(#product_lists .btn.btn-load-more):not(.top_searchbox + div a.btn.btn-load-more.btn-default):not(#sitesearch_form button.btn-go):not(#footer .input-group-btn .btn.btn-success):not(.product-page-control .dropdown .btn-default):not(#slider.homepage-slider a.btn.btn-primary[class*="btn_"]):not(.qs-block .qs-header div.dropdown button),
.B2C-Style .btn-learnm a,
.B2C-Style a[class*="btn-"]:not(.btn-primary):not(.sect-divider .btn-learnm a):not(a.add-to-cart.btn-full-width):not(#product_tab_menu .add-to-cart.button):not(.Two-Button .btn[class*="btn"]):not(#product_lists .btn.btn-load-more):not(.top_searchbox + div a.btn.btn-load-more.btn-default):not(#sitesearch_form button.btn-go):not(#footer .input-group-btn .btn.btn-success):not(#slider.homepage-slider a.btn.btn-primary[class*="btn_"]):not(.qs-block .qs-header div.dropdown button) {
border: 2px solid #004276;
}
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */ {
border: 2px solid #004276 !important;
}
/*************** 【 Border (All) Style / 2px 】 統一套色 ATEN Blue >> (暗藍色) 不透明 (1.0) *****************/
/* Comparsion Button >> Product Page */
/*#search_form .form-group button[aria-controls], */
.B2C-Style #comparison_listing .comparisontable .btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm)/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less/ More) */,
.B2C-Style #search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info:not([aria-controls="filter_form"]),
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info:not([aria-controls="filter_form"]),
.B2C-Style #search_form .form-group button:not(button.btn-go),
/* Product Listing >> Add to Cart >> Added (已加入) .B2C-Style #product_lists .btn-primary.addtocart.added, */
.B2C-Style .btn-info:not(button.btn-go).disabled,
.B2C-Style .btn-info:not(button.btn-go)[disabled],
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go),
.B2C-Style .btn-info:not(button.btn-go).disabled:hover,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:hover,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):hover,
.B2C-Style .btn-info:not(button.btn-go).disabled:focus,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:focus,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):focus,
.B2C-Style .btn-info:not(button.btn-go).disabled.focus,
.B2C-Style .btn-info:not(button.btn-go)[disabled].focus,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go).focus,
.B2C-Style .btn-info:not(button.btn-go).disabled:active,
.B2C-Style .btn-info:not(button.btn-go)[disabled]:active,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go):active,
.B2C-Style .btn-info:not(button.btn-go).disabled.active,
.B2C-Style .btn-info:not(button.btn-go)[disabled].active,
.B2C-Style fieldset[disabled] .btn-info:not(button.btn-go).active
/*.B2C-Style .btn-info.disabled,
.B2C-Style .btn-info[disabled],
.B2C-Style fieldset[disabled] .btn-info,
.B2C-Style .btn-info.disabled:hover,
.B2C-Style .btn-info[disabled]:hover,
.B2C-Style fieldset[disabled] .btn-info:hover,
.B2C-Style .btn-info.disabled:focus,
.B2C-Style .btn-info[disabled]:focus,
.B2C-Style fieldset[disabled] .btn-info:focus,
.B2C-Style .btn-info.disabled.focus,
.B2C-Style .btn-info[disabled].focus,
.B2C-Style fieldset[disabled] .btn-info.focus,
.B2C-Style .btn-info.disabled:active,
.B2C-Style .btn-info[disabled]:active,
.B2C-Style fieldset[disabled] .btn-info:active,
.B2C-Style .btn-info.disabled.active,
.B2C-Style .btn-info[disabled].active,
.B2C-Style fieldset[disabled] .btn-info.active*/ {
border: 2px solid #005caa;
}
/*************** 【 Border All Style ((2px)) 】 字統一套色透明 >> (Transparent) 透明 (1.0) (透明底時) *****************/
/* Main/ Sub Category >> Slider Banner >> Main Button >> 最後一個 a.btn
.B2C-Style #slider .swiper-slide .slider-caption:has(a + a) a.btn.btn-primary:last-child ,
*/
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary.button_white/* Main/ Sub Category >> Slider Banner >> Main Button (.button_white) */ {
border: 2px solid transparent !important;
}
/*************** 【 Border (All) Style / 1px 】 統一套色 ATEN Blue >> (ATEN 藍) 不透明 (1.0) *****************/
.BBB示意 {
border: 1px solid #005caa;
}
/*************** 【 Border (All) Style / 1px 】 統一套色 >> (正常灰) 不透明 (1.0) *****************/
.B2C-Style .top_searchbox #sitesearch_form input/* Search Result Page >> Search Input */,
.B2C-Style #sitesearch_form .btn[class*="btn-"]/* Search Result Page >> Search Button */,
.B2C-Style.top-search-open #top-search form input/* Fixed Search Box >> Input 輸入框 */,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input/* Fixed Search Box >> Input 輸入框 */,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a/* Search Product/ Product Tab Menu */,
.B2C-Style .form-control {
border: 1px solid rgba(195, 198, 203, 1.0);
border: 1px solid #c3c6cb;
}
/*************** 【 Border (All) Style / 1px 】 統一套色 >> (正常灰) 透明 (0.6) *****************/
.B2C-Style .row.result_item/* Search Result Page >> Result Items */,
.B2C-Style .result_item/* Search Result Page >> Result Items */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style .product-record-single .sect-divider/* Listing Item 外框 >> Product Listing / Feature Article */,
.B2C-Style .row div.product-category > div.sect-divider {
border: 1px solid rgba(195, 198, 203, 0.4);
border: 1px solid rgba(195, 198, 203, 0.6);
}
/*************** 【 Border (All) Style / 1px 】 統一套色 >> (正常灰) 透明 (0.8) *****************/
.B2C-Style .well-compare/* Compare Model >> Compare Box */ {
border: 1px solid rgba(195, 198, 203, 0.8);
}
/*************** 【 Border (All) Style / 1px 】 統一套色 >> (深黑藍) 不透明 (1.0) *****************/
.B2C-Style #sitesearch_form .btn[class*="btn-"]:hover/* Search Result Page >> Search Button */,
.B2C-Style .top_searchbox #sitesearch_form input:hover/* Search Result Page >> Input 輸入框 */,
.B2C-Style .flex-control-nav.flex-control-thumbs li img.flex-active {
border: 1px solid rgba(0, 7, 34, 1.0);
border: 1px solid #000722;
}
/*************** 【 Border (All) Style / 2px 】 統一套色 >> (ATEN 綠) 不透明 (1.0) *****************/
.B2C-Style a.add-to-cart.button,
.B2C-Style #product_tab_menu .add-to-cart.button,
.B2C-Style .btn-primary:not(.sect-divider .btn-learnm a):not(#product_lists .btn-primary.addtocart):not(#adjustColumn .modal-footer .btn + .btn):not(.modal-footer .btn.btn-primary):not(#gqc_preview a.add-to-cart.button.nomargin.btn-full-width):not(.promo_item a.btn):not(.promo_block .promo_item .hover_block a.btn):not(#home_promotion_top .promo_item .hover_block a.btn):not(.promote-products .product-record-single .sect-divider .btn-group a.btn)/* 主要按鈕 */ {
border: 2px solid rgba(143, 195, 32, 1.0);
border: 2px solid #8fc320;
border: 2px solid rgba(128, 186, 45, 1.0);
border: 2px solid #80ba2d;
}
/*************** 【 Border Style / No-px 】 統一套色 ATEN Blue >> (ATEN 藍) 不透明 (1.0) *****************/
.B2C-Style #gqc_tip+.popover/* Get Quote Modual >> Tip */,
.B2C-Style #sidebar input:checked ~ .checkmark,
.B2C-Style .container input:checked ~ .checkmark {
border-color: #005caa;
}
/*************** 【 Border (Top) Style / 2px 】 統一套色 ATEN Blue >> (ATEN 藍) 不透明 (1.0) *****************/
.B2C-Style #primary-menu .mega-menu-container {
border-top: 2px solid rgba(0, 92, 170, 1.0);
border-top: 2px solid #005caa;
}
/*************** 【 Border (Top) Style / 1px 】 統一套色 Light Grey >> (淺灰) (Grey-1) 透明 (0.7) *****************/
/* Learn More Button 外框 >> Product Listing / Feature Article */
.B2C-Style div.btn-learnm {
border-top: 1px solid #f3f4f6;
border-top: 1px solid rgba(195, 198, 203, 0.7);
}
/*************** 【 Border (Top) Style / 1px 】 統一套色 Light Grey >> (淺灰) (Grey-1) 透明 (0.5) *****************/
.B2C-Style .well-compare .compare-modal + .text-right/* Compare Model >> Compare Box >> Button Section */,
.B2C-Style #comparison_landings hr/* Compare Model >> Compare Box >> HR */ {
border-top: 1px solid #f3f4f6;
border-top: 1px solid rgba(195, 198, 203, 0.5);
}
/*************** 【 Border (Top) Style / 1px 】 統一套色 >> (淺中灰 > 淺一點) 透明 (0.4) *****************/
.B2C-Style #filter_form hr/* Product Listing Page >> Filter Section >> 次分隔線 */ {
border-top: 1px solid rgba(188, 191, 195, 0.4);
}
/*************** 【 Border (Top) Style / 1px 】 統一套色 >> (淺中灰 > 淺一點) 透明 (0.6) *****************/
.B2C-Style #sidebar #filter_tags #filter_category_list + h3,
.B2C-Style #sidebar #filter_tags {
border-top: 1px solid rgba(188, 191, 195, 0.6);
}
/*************** 【 Border Style / 2px 】 統一套色 >> (淺灰-1) 透明 (0.5) *****************/
.B2C-Style .lg-outer .lg-thumb-item/* Product Gallery 縮圖 */ {
border: 2px solid rgba(243, 244, 246, 0.5);
}
/*************** 【 Border (Bottom) Style / 2px 】 統一套色 >> (淺灰-0) 透明 (0.4) *****************/
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style .promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */ {
border: 2px solid #e4e5e7;
border: 2px solid rgba(188, 191, 195, 0.4);
}
/*************** 【 Border (Bttom) Style 】 統一套色 ATEN Blue >> (ATEN 藍) 不透明 (1.0) *****************/
.B2C-Style #gqc_tip+.popover.bottom>.arrow/* Get Quote Modual >> Tip */,
.B2C-Style #gqc_tip+.popover.bottom>.arrow:after/* Get Quote Modual >> Tip */ {
border-bottom-color: rgba(0, 92, 170, 1.0);
border-bottom-color: #005caa;
}
/*************** 【 Border (Bottom) Style / 2px 】 統一套色 >> (淺中灰 > 再深一點) 透明 (0.6) *****************/
.B2C-Style .row.result_item/* Search Result Page >> Result Items */,
.B2C-Style .result_item/* Search Result Page >> Result Items */,
.B2C-Style .well-compare/* Compare Model >> Compare Box */,
.B2C-Style .product-record-single .sect-divider/* Listing Item 外框 >> Product Listing */,
.B2C-Style .row div.product-category > div.sect-divider/* Listing Item 外框 >> Feature Article */ {
border-bottom: 2px solid rgba(195,198,203, .5);
border-bottom: 2px solid rgba(188, 191, 195, 0.6);
}
/*************** 【 Border (Bottom) Style / 1px 】 統一套色 >> (淺中灰 > 再深一點) 透明 (0.6) *****************/
.B2C-Style .filter_category .plist/* Search Result Page >> Category Section >> 主分隔線 */,
.B2C-Style #sidebar > div.label:first-child/* Search Result Page >> Filter Section >> 主分隔線 */,
.B2C-Style .well-filter > div:first-child/* Product Listing Page >> Filter Section >> 主分隔線 */ {
border-bottom: 1px solid rgba(188, 191, 195, 0.6) !important;
}
/*************** 【 Border (Bottom) Style / 1px 】 統一套色 >> (淺中灰 > 淺一點) 透明 (0.4) *****************/
.AAA示意 {
border-bottom: 1px solid rgba(188, 191, 195, 0.4);
}
/*************** 【 Border (Bottom) Style / 1px 】 統一套色 >> (淺中灰 > 淺一點) 透明 (0.3) *****************/
.B2C-Style #sidebar/* Search Result Page >> Filter Section */,
.B2C-Style #filter_form/* Producr Listing Page >> Filter Section */,
.B2C-Style #product_category_list/* Producr Listing Page >> Category Section */ {
border-bottom: 1px solid rgba(188, 191, 195, 0.3);
}
/*************** 【 Border (Bottom) Style / none 】 統一套色 Transparent >> 全透明 (0) *****************/
/* Certification 的 Border 下方無虛線 >> 當產品頁面上半部為三欄時/ 且 div 為 .certification (兩欄不需要) */
.single-product .product-desc > div.certification:nth-child(4) {
border-bottom: 1px solid transparent;
}
/*************** 【 Border (Bottonm) Style / 1px 】 統一套色 >> (正常灰) 不透明 (1.0) *****************/
/* Product Tab Menu */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) {
border-bottom: 1px solid rgba(195, 198, 203, 1.0);
border-bottom: 1px solid #c3c6cb;
}
/*************** 【 Border (Bttom) Style / 3px 】 統一套色 ATEN Blue >> (ATEN 藍) 不透明 (1.0) *****************/
.B2C-Style li.ui-tabs-tab.ui-state-active a/* Product Page >> Product Tab Menu (Active) >> 底線藍條 */ {
border-bottom: 3px solid rgba(0, 92, 170, 1.0);
border-bottom: 3px solid #005caa;
}
/*************** 【 Border (Right) Style / 1px 】 統一套色 ATEN Blue >> (白) 透明 (0.3) *****************/
.B2C-Style #home_footer_bar .bar_item/* Footer Bar >> .bar_item */ {
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
/*************** 【 Border (All) Style 】 字統一無套色 None >> (無 border) 不透明 (1.0) *****************/
/* Learn More Button a >> Product Listing / Feature Article */
.B2C-Style .sect-divider .btn-learnm a {
/* 無邊框 Button */
border: none;
}
/********************************************* 【 Border Hover 】 ***********************************************/
/*************** 【 Border (All) Style ((Hover)) / 1px 】(Important 強制) 字統一套色 ATEN Blue (暗藍色) *****************/
.B2C-Style .filter_category li:hover input[type="radio"]/* Search Result Page >> Filter Radio */,
.B2C-Style .filter_category input[type="radio"]:hover/* Search Result Page >> Filter Radio */,
.B2C-Style .filter_label:hover .checkmark {
border: #004276 !important;
border: 1px solid #004276 !important;
}
/*************** 【 Border (All) Style ((Hover)) / 1px 】 字統一套色 ATEN Blue >> (中藍) 不透明 (1.0) *****************/
.B2C-Style #product_category_list:not(.active):hover/* Product Listing >> Filter > #product_category_list (Hover) */ {
border: 1px solid rgba(0, 152, 220, 1.0);
border: 1px solid #0098dc;
}
/*************** 【 Border (All) Style ((Hover)) / 2px 】 字統一套色 ATEN Blue >> (中藍) 不透明 (1.0) *****************/
/* Product Gallery 縮圖 (Hover) */
.B2C-Style .lg-outer .lg-thumb-item.active,
.B2C-Style .lg-outer .lg-thumb-item:hover {
border: 2px solid rgba(0, 152, 220, 1.0);
border: 2px solid #0098dc;
}
/*************** 【 Border (All) Style ((Hover)) / 1px 】 字統一套色 ATEN Blue >> (中藍) 不透明 (1.0) *****************/
.B2C-Style .row.result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style #product_category_list:not(.active):hover/* Product Listing >> Filter > #product_category_list (Hover) */,
.B2C-Style .sect-divider .checkbox.product-list label:hover .checkmark,
.B2C-Style .sect-divider .checkbox.product-list label:hover .checkmark,
.B2C-Style .share label:hover .checkmark,
.B2C-Style .flex-control-nav.flex-control-thumbs li img:hover {
border: 1px solid rgba(0, 66, 118, 1.0);
border: 1px solid #004276;
border: 1px solid rgba(0, 92, 170, 1.0);
border: 1px solid #005caa;
}
/*************** 【 Border (All) Style ((Hover)) / 1px & 2px 】 字統一套色 ATEN Blue >> (深灰) 不透明 (1.0) *****************/
/* Listing Item 外框 >> Product Listing / Feature Article */
.B2C-Style .row div.product-category > div.sect-divider:hover {
border: 1px solid #004276;
border-bottom: 2px solid #004276;
border: 1px solid #005caa;
border-bottom: 2px solid #005caa;
border: 1px solid rgba(92, 94, 96,.5);
border-bottom: 2px solid rgba(92, 94, 96,.6);
}
/*************** 【 Border All Style ((Hover/ 1px)) 】 字統一套色透明 >> (Transparent) 透明 (1.0) (透明底時) *****************/
.B2C-Style #sidebar/* Search Result Page >> Filter Section */,
.B2C-Style #filter_form/* Producr Listing Page >> Filter Section */,
.B2C-Style #product_category_list/* Producr Listing Page >> Category Section */ {
border: 1px solid transparent;
}
/*************** 【 Border All Style ((Hover/ 2px)) 】 字統一套色透明 >> (Transparent) 透明 (1.0) (透明底時) *****************/
.B2C-Style #comparison_listing .modal-content .btn-info:hover/* modal-footer >> All Button(at Bottom) Hover */,
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style .product_list.has_buynow .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.btn.btn-primary:hover/* Product Listing (.has_buynow) >> (第一顆/ 兩顆 Button) .buynow */,
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group a.buynow:hover/* Buy now (Product Listing 有兩顆 Button) */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn:hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn:hover */,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style #home_promotion_top.promo_block .promo_item a[class*="link"]:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item a[class*="link"]:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item a.linkto:hover + .hover_block a.btn/* Main/ Sub Category >> Product Item >> a.linkto >> Main Button (Hover) */,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style .promo_block .promo_item .hover_block:hover a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button (Hover) */,
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.qs-block .qs-header div.dropdown ul.qs-filter li)/* Product Category >> Filter Menu >> UL >> Li.active >> a */,
/*.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button, */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove:hover/* Get Quote Page >> Product Item Block > List Item >> Remove Button */,
.B2C-Style section.quote-cart + #content a.actbtn button:hover/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style section.quote-cart + #content a.actbtn:hover button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width:hover/* Get Quote Modual >> See More Products */,
.B2C-Style #gqc_preview a.add-to-cart.button.nomargin.btn-full-width:hover/* Get Quote Modual >> View Cart */,
.B2C-Style #gqc_preview a.button.btn-full-width:hover/* Get Quote Modual >> Button */,
.B2C-Style .modal-footer .btn.btn-primary:hover/* Comparsion Table >> .modal-footer >> >> primary Button >> Lightbox Modual */,
.B2C-Style .btn.btn-primary.submitfilter:hover/* Comparsion Table >> Show Less/More >> Lightbox Modual */,
.B2C-Style .table-responsive + .modal-footer .btn-info:hover/* Compare Share Table >> All Button(at Bottom) */,
.B2C-Style #comparison_listing .comparisontable .btn_border:hover/* Comparison Table > All Button:hover (Remove + Show Less/ More) */,
.B2C-Style .comparisontable a.btn_border:hover/* Comparison Table > All Button:hover (Remove + Show Less/ More) */,
.B2C-Style .well-compare .btn.btn-info:not(.well-compare .btn.btn-info):hover/* Compare Model >> All Button */,
.B2C-Style .product_button .discontinued-product a.button:hover/* 產品 Subcategory 小類別頁 Button*/,
.B2C-Style #search_content .hamburger:hover/* Search Result Page >> Close Filter Button(Hover) */,
.B2C-Style #search_content .hamburger/* Search Result Page >> Close Filter Button */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement:hover > .mega-menu-advertisement-body > a.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a:hover.mega-menu-advertisement-button,
.B2C-Style #search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info:hover,
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info:hover,
.B2C-Style #search_form .form-group button[class*="btn-"]:hover,
.B2C-Style #search_form .form-group button.btn-info:hover,
.B2C-Style #product_lists .btn-primary.addtocart:hover/* Product Listing >> Add to Cart:hover */,
.B2C-Style a.button:hover,
.B2C-Style .btn-info:not(#search_form .form-group button.btn-go + span + .btn-info):not(#search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info):not(#sitesearch_form button.btn-go):not(.well-compare .btn-info):hover,
.B2C-Style .button:hover,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.buynow:hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.buynow */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group:has(a.btn-primary + a.btn-primary) a.btn.btn-primary:first-child:not(.btn-learnm):hover/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.btn-primary(左邊第一顆 Button, 排除 Learn More) */,
.B2C-Style .btn[class*="btn-"]:not(.sect-divider .btn-learnm a):not(a.add-to-cart.btn-full-width):not(#product_tab_menu .add-to-cart.button):not(#search_form .form-group button.btn-go + span + .btn-info):not(#search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info):not(#product_lists a.btn.btn-load-more.btn-default):not(.top_searchbox + div a.btn.btn-load-more.btn-default):not(#sitesearch_form button.btn-go):not(#footer .input-group-btn .btn.btn-success):not(.core-container #product_listing #Sortblock button):not(.well-compare .btn-info):not(.product-page-control .dropdown .btn-default):hover,
.B2C-Style a[class*="btn-"]:not(.sect-divider .btn-learnm a):not(a.add-to-cart.btn-full-width):not(#product_tab_menu .add-to-cart.button):not(#search_form .form-group button.btn-go + span + .btn-info):not(#search_form .form-group button.btn-go + span + button.btn-info.hidden-lg + .btn-info):not(#product_lists a.btn.btn-load-more.btn-default):not(.top_searchbox + div a.btn.btn-load-more.btn-default):hover {
border: 2px solid transparent !important;
}
/*************** 【 Border (All) Style / 2px 】 統一套色 >> (ATEN 綠) 不透明 (1.0) *****************/
.B2C-Style .qs-block .qs-header ul.qs-filter li.active:not(.qs-block .qs-header div.dropdown ul.qs-filter li.active)/* Product Category >> Filter Menu >> UL >> Li.active >> a */ {
border: 2px solid rgba(143, 195, 32, 1.0) !important;
border: 2px solid #8fc320 !important;
border: 2px solid rgba(128, 186, 45, 1.0) !important;
border: 2px solid #80ba2d !important;
}
/*************** 【 Border All Style ((Hover)) 】 字統一套色 ATEN Green >> (ATEN 綠) 不透明 (1.0) (白底時) *****************/
.B2C-Style #search_form .form-group button.btn-go:hover,
.B2C-Style a.add-to-cart.button:hover,
.B2C-Style #product_tab_menu .add-to-cart.button:hover,
.B2C-Style .btn-primary:not(.sect-divider .btn-learnm a):not(#product_lists .addtocart):not(#adjustColumn .modal-footer .btn + .btn):not(.modal-footer .btn):not(#gqc_preview a.add-to-cart.button.nomargin.btn-full-width):not(section.quote-cart + #content a.actbtn button):not(.Single-Item.Blue-BG .recommended-hover-block .recommended-content-block a):not(.Single-Item.Blue-BG .recommended-hover-block .recommended-content-block .btn):not(.promote-products .product-record-single .sect-divider .btn-group a.btn):hover/* Hover 要放在 not 後面(主要按鈕) */ {
border: 2px solid rgba(159, 226, 40, 1.0);
border: 2px solid #9fe228 !important;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.3rem) (不需 !Importnet ) *****************/
.B2C-Style #gqc_preview .modal-body img.gqc_img/* Add to Quote Modual >> Image */,
.B2C-Style #mobile-product-header .mobile-btn /* mobile Button */,
.B2C-Style #gotoTop,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn/* Product Recommendation >> .product-desc >> .btn-group >> a.btn */,
.B2C-Style .marketing-material #home_promotion_top .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style .product_section #home_promotion_top .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style .marketing-material .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style .product_section .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> Product Item >> Main Button */,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section/ .marketing-material >> Item >> Main Button */,
.B2C-Style .product_section .promo_block .promo_item a.btn.btn-primary/* Main/ Sub Category >> Product Section >> All Item >> Main Button */,
.B2C-Style #slider .swiper-slide .slider-caption a.btn.btn-primary/* Main/ Sub Category >> Slider Banner >> Main Button*/,
.B2C-Style section.quote-cart + #content .col-title.row/* Get Quote Page >> List Title + Product Item List Title Section */,
.B2C-Style .newproduct .NewProduct_Img/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> Image */,
.B2C-Style #product_tab_menu .add-to-cart.button,
.B2C-Style .single-product .add-to-cart.button,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style .btn-learnm a,
.B2C-Style a[class*="btn-"],
.B2C-Style .btn[class*="btn-"] {
border-radius: 5px;
border-radius: 0.3rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.35rem) (不需 !Importnet ) *****************/
.B2C-Style .popover-title/* Get Quote Modual >> Tip */,
.B2C-Style .popover/* Get Quote Modual >> Tip */,
.B2C-Style a.add-to-cart.button.btn-full-width,
.B2C-Style .single-product .add-to-cart.button {
border-radius: 6px;
border-radius: 0.35rem;
border-radius: 0.3rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.3rem >> 需要 !Importnet ) (基於舊有的 CSS) *****************/
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item,
.B2C-Style .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item,
.B2C-Style .flex-control-nav.flex-control-thumbs li.play_btn::before,
.B2C-Style .flex-control-nav.flex-control-thumbs li img,
.B2C-Style .flex-control-nav.flex-control-thumbs li {
border-radius: 5px;
border-radius: 0.3rem !important;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.4rem) *****************/
.B2C-Style #gqc_preview.modal img/* Get Quote >> Lightbox */,
.B2C-Style .popover/* Get Quote Modual >> Tip */,
.B2C-Style .single-product .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award a img/* Awards Icon (Product Page)*/,
.B2C-Style .single-product .award a img/* Awards Icon (Product Page)*/,
.B2C-Style #sidebar/* Search Result Page >> Filter Section */,
.B2C-Style #filter_form/* Producr Listing Page >> Filter Section */,
.B2C-Style .newproduct .content_block/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 區塊線 */,
.B2C-Style #product_category_list/* Producr Listing Page >> Category Section */,
.B2C-Style .blank-product/* Compare Model >> blank-product */,
.B2C-Style .product-record-single .sect-divider/* Listing Item Block >> Product Listing / Feature Article */,
.B2C-Style .row div.product-category > div.sect-divider/* Listing Item Block >> Product Listing / Feature Article */,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-image,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-image {
border-radius: 7px;
border-radius: 0.4rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.5rem) *****************/
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.qs-block .qs-header div.dropdown ul.qs-filter li)/* Product Category >> Filter Menu >> UL >> Li */,
.B2C-Style section.quote-cart + #content .col-item.row .col-md-2:first-child/* Get Quote Page >> List Title + Product Item Block + img Section */,
.B2C-Style section.quote-cart + #content .col-item.row/* Get Quote Page >> List Title + Product Item Block + img Section */,
.B2C-Style .row.result_item/* Search Result Page >> Result Items */,
.B2C-Style .result_item/* Search Result Page >> Result Items */,
.B2C-Style .package-content/* Product Page >> Package Content 區塊 */,
.B2C-Style .single-product .product .product-padding:has(.rightIcon) .top-related-products .related_product_tabs,
.B2C-Style .related_product_tabs h3/* Product Page >> 最底下的 Related Product 區塊 >> H3 */,
.B2C-Style .related_product_tabs/* Product Page >> 最底下的 Related Product 區塊 */,
.B2C-Style .product_related_group/* Product Page >> 最底下的 Related Product 區塊 >> 外層區塊 */,
.B2C-Style .single-product .tab-container.tab-content div.yt div::before,
.B2C-Style .single-product .tab-container.tab-content .yt:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .yt),
.B2C-Style .single-product .tab-container.tab-content a.play_btn::before,
.B2C-Style .single-product .tab-container.tab-content a.play_btn:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout a.play_btn),
.B2C-Style .single-product .tab-container.tab-content video:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout video),
.B2C-Style .single-product .tab-container.tab-content img:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout img),
.B2C-Style .single-product .tab-content img:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout img) {
border-radius: 8px;
border-radius: 0.5rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 1.0 rem) *****************/
.B2C-Style .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img,
.B2C-Style .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
.B2C-Style .zoomWindow/* 滑過產品照時 >> 右邊出現的放大視窗 */,
.B2C-Style .slider-wrap,
.B2C-Style #diagram-tab.tab-content .diagram-image,
.B2C-Style #overview-tab.tab-content .twentytwenty-wrapper.twentytwenty-horizontal:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .twentytwenty-wrapper.twentytwenty-horizontal)/* 拖拉比較區 */,
.B2C-Style #overview-tab.tab-content .yt > div::before,
.B2C-Style #overview-tab.tab-content .yt:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .yt),
.B2C-Style #overview-tab.tab-content a.play_btn::before,
.B2C-Style #overview-tab.tab-content a.play_btn:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout a.play_btn),
.B2C-Style #overview-tab.tab-content video:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout video),
.B2C-Style #overview-tab.tab-content img:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout img) {
border-radius: 15px;
border-radius: 1rem;
}
/*************** 【 Border Radius All 圓方角 (All 1.0 rem) 】【 給 .Full-Width-Rich-Content (若是 .No-Margin-Layout 不套用圓角 ) 】 *****************/
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content .twentytwenty-wrapper.twentytwenty-horizontal:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .twentytwenty-wrapper.twentytwenty-horizontal),
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content .yt > div::before,
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content .yt:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .yt),
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content a.play_btn::before,
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content a.play_btn:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout a.play_btn),
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content video:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout video),
.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content img:not(.B2C-Style #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout img) {
border-radius: 15px;
border-radius: 1rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.6rem) *****************/
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider/* Product Listing Recommendation >> .sect-divider */ {
border-radius: 9px;
border-radius: 0.6rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.7rem) *****************/
.B2C-Style .product_related_group .owl-carousel .owl-item img/* 產品頁面下 >> 相容性產品圖 */,
.B2C-Style #Quick-Link-Section,
.B2C-Style .well.well-compare .compare-modal img, .compare-modal img/* 產品頁 >> 比較 Box 產品圖 */,
.B2C-Style .well-compare,
.B2C-Style.Dark-Mode .product-image .flexslider .slider-wrap img:not(.zoomImg),
.B2C-Style #diagram-tab.tab-content .diagram-image,
.B2C-Style .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img,
.B2C-Style .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
.B2C-Style .zoomWindow,
.B2C-Style .product-image .slider-wrap,
.B2C-Style .zoomLens,
.B2C-Style #Quick-Link-Section,
.B2C-Style .well-compare/* Compare Model >> Compare Box */,
/* 手機版滑動產品圖像冊 (目前只作用在 B2C-Style)
.B2C-Style.Mobile-Layout .single-product #mobile-fslider.flexslider .flex-viewport ul.slides li img,
.B2C-Style.Mobile-Layout #mobile-fslider.flexslider .flex-viewport ul.slides li img,
*/
.B2C-Style.Mobile-Layout .single-product #mobile-fslider.flexslider .flex-viewport ul.slides li/* 手機版滑動產品圖像冊 */,
.B2C-Style.Mobile-Layout .single-product #mobile-fslider.flexslider .flex-viewport/* 手機版滑動產品圖像冊 */,
.B2C-Style.Mobile-Layout #mobile-fslider.flexslider .flex-viewport ul.slides li/* 手機版滑動產品圖像冊 */,
.B2C-Style.Mobile-Layout #mobile-fslider.flexslider .flex-viewport/* 手機版滑動產品圖像冊 */,
.B2C-Style .col-md-5 .product-image .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img,
.B2C-Style .col-md-5 .product-image .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
.B2C-Style .col-md-5 .product-image .zoomWindow,
.B2C-Style .col-md-5 .product-image .slider-wrap/* 三欄式 */,
.B2C-Style .col-md-7 .product-image .slider-wrap/* 兩欄式 */,
.B2C-Style .product-image .slider-wrap,
.B2C-Style .zoomLens {
border-radius: 10px;
border-radius: 0.7rem;
}
/*************** 【 Border Radius All 圓方角 】 (All 0.8rem) *****************/
.B2C-Style [id*="_category"] .Full_Width_Rich_Content img/* (img) Rich Content Introduction >> Product Main/ Sub Category */,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .image_block/* (.image_block) Rich Content Introduction >> Product Main/ Sub Category */,
.B2C-Style .marketing-material .promo_item /* Spotlight Marketing Item >> CPC Product */,
.B2C-Style .product_section .promo_item/* Product Item >> CPC Product */,
.B2C-Style .promo_block .promo_item/* All Card Item >> CPC Product */,
.B2C-Style .promote-banner #slider.homepage-slider/* Promote Large Banner(大) >> for Product Main Category (.B2C-Style) >> CPC Product */,
.B2C-Style .promote-banner .homepage-slider/* Promote Large Banner(大) >> for Product Main Category (.B2C-Style) >> CPC Product */ {
border-radius: 12px;
border-radius: 0.8rem;
}
/*************** 使用 CSS 【變數】統一管理 >> 【 Border Radius All 圓方角 】 (All 0.8rem) *****************/
/* for Product Item >> CPC Product */
.B2C-Style {
--product-item-border-radius: 12px/** >> 因為要設定 Clip-Path ***/;
--marketing-item-border-radius: 0.8rem/** >> 因為要設定 Clip-Path ***/;
}
/*************** 【 Border Radius 下左右-圓方角 】 (下左右 0.25rem;) *****************/
/* Learn More Button 外框 >> Product Listing / Feature Article */
.B2C-Style div.btn-learnm {
border-radius: 0 0 6px 6px;
border-radius: 0 0 0.25rem 0.25rem;
}
/*************** 【 Border Radius 左上下-圓方角 】 (左上下 0.35rem) *****************/
.B2C-Style #footer .input-group-addon/* Footer > Email Icon */,
.B2C-Style .product_search input.form-control,
.B2C-Style .form-inline input.form-control {
border-radius: 6px 0 0 6px; /* 左上下圓角 */
border-radius: 0.35rem 0 0 0.35rem; /* 左上下圓角 */
}
/*************** 【 Border Radius 左上下-圓方角 】 (左上下 0.45rem) *****************/
.B2C-Style .top_searchbox #sitesearch_form input/* Search Result Page >> Input 輸入框 */ {
border-radius: 8px 0 0 8px; /* 左上下圓角 */
border-radius: 0.45rem 0 0 0.45rem; /* 左上下圓角 */
}
/*************** 【 Border Radius 右上下-圓方角 】 (右上下 0.3rem) *****************/
.B2C-Style #footer .input-group-btn .btn.btn-success/* Footer > Email Submit Button */,
.B2C-Style #search_form .form-group button.btn-go/* Product Page >> Go Button >> Search Product */,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/,
.B2C-Style #search_form button.btn-go/* Go Button >> Product Page >> Search Product */,
.B2C-Style .input-group-btn:last-child > .btn/* Input + 右邊是 Button (Span 包 Button) */,
.B2C-Style input + span button/* Button >> Input + 右邊是 Button (Span 包 Button) */,
.B2C-Style input + button/* Button >> Input + 右邊是 Button */ {
border-radius: 0 5px 5px 0; /* 右上下圓角 */
border-radius: 0 0.3rem 0.3rem 0 !important; /* 右上下圓角 */
}
/*************** 【 Border Radius 右上下-圓方角 】 (右上下 0.45rem) *****************/
.B2C-Style #sitesearch_form button.btn-go/* Search Result Page >> Search Button */ {
border-radius: 0 8px 8px 0; /* 右上下圓角 */
border-radius: 0 0.45rem 0.45rem 0; /* 右上下圓角 */
}
/*************** 【 Border Radius 右上-圓方角 】 (右上 0.4rem) *****************/
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:last-child a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:last-child {
border-radius: 0 7px 0 0;
border-radius: 0 0.4rem 0 0;
}
/*************** 【 Border Radius 左上-圓方角 】 (左上 0.4rem) *****************/
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:first-child.active,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:first-child a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:first-child {
border-radius: 7px 0 0 0;
border-radius: 0.4rem 0 0 0;
}
/*************** 【 Border Radius 上左右-圓方角 】 (上左右 0.4rem;) *****************/
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-image {
border-radius: 7px 7px 0 0;
border-radius: 0.4rem 0.4rem 0 0;
}
/*************** 【 Border Radius 上左右-圓方角 】 (上左右 0.5rem;) *****************/
.B2C-Style .related_product_tabs h3/* Product Page >> 最底下的 Related Product 區塊 */ {
border-radius: 7px 7px 0 0;
border-radius: 0.4rem 0.4rem 0 0;
border-radius: 8px 8px 0 0;
border-radius: 0.5rem 0.5rem 0 0;
}
/*************** 【 Border Radius All 圓球形 】 (All 300rem) *****************/
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */ {
border-radius: 300px;
border-radius: 300rem;
border-radius: 50%;
}
/*************************************************************************************************************************
( D - 1 ). 【 Box-Shadow (陰影區塊) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/*************** 【 Box-Shadow (Not Hover) 】 陰影區塊統一套色 Light Grey >> (淺灰-0) (Grey-0) (少擴散) 透明 (0.3) *****************/
.B2C-Style .top_searchbox + div a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Search Result Page */,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */,
.B2C-Style a.btn.btn-load-more.btn-default/* Load More Button (載入更多) >> Product Listing Page */ {
box-shadow: 1px 2px 3px 0px rgba(235, 236, 236, 0.3);
}
/*************** 【 Box-Shadow (Not Hover) 】 陰影區塊統一套色 Light Grey >> (淺灰-1) (Grey-1) (少擴散) 透明 (0.9) *****************/
/* Listing Item Block >> Product Listing / Feature Article/ Search Result */
.B2C-Style .row.result_item/* Search Result Page >> Result Items */,
.B2C-Style .result_item/* Search Result Page >> Result Items */,
.B2C-Style .well-compare/* Compare Model >> Compare Box */,
.B2C-Style .product-record-single .sect-divider,
.B2C-Style .row div.product-category > div.sect-divider {
box-shadow: 1px 2px 3px 0px rgba(235, 236, 236, 0.9);
}
/*************** 【 Box-Shadow (Not Hover) 】 陰影區塊統一套色 Light Grey >> (淺灰-1) (Grey-2) (多擴散) 透明 (0.9) *****************/
.B2C-Style .well-compare/* Compare Model >> Compare Box */ {
box-shadow: 1px 2px 7px 1px rgba(235, 236, 236, 0.9);
box-shadow: 1px 6px 10px 1px rgba(190, 190, 190, 0.3);
transition: all 0.3s ease-in-out 0s;
}
/*************** 【 Box-Shadow (Not Hover) 】 陰影區塊統一套色 Light Grey >> (淺灰-2) (Grey-2) (多擴散) 透明 (0.9) *****************/
.AAA示意 {
box-shadow: 0px 0px 5px 4px rgba(238, 238, 238, 0.9);
box-shadow: 0px 0px 3px 2px rgba(238, 238, 238, 0.9);
box-shadow: 0px 0px 3px 2px rgba(235, 236, 236, 0.9);
}
/*************** 【 Box-Shadow (Hover) 】 陰影區塊統一套色 Dark-Black >> (深黑藍) 透明 (0.15) *****************/
/* Listing Item Block【 Hover 】 >> Product Listing / Feature Article */
.B2C-Style .row.result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .result_item:hover/* Search Result Page >> Result Items */ {
box-shadow: 0px 6px 10px 0px rgba(0, 7, 34, 0.15);
}
/*************** 【 Box-Shadow (Hover) 】 陰影區塊統一套色 Dark-Black >> (深黑藍) 透明 (0.15) *****************/
/* Listing Item Block【 Hover 】 >> Product Listing / Feature Article */
.B2C-Style .zoomWindow,
.B2C-Style .product-record-single .sect-divider:hover,
.B2C-Style .row div.product-category > div.sect-divider:hover {
box-shadow: 0px 6px 10px 4px rgba(0, 7, 34, 0.15);
}
/*************** 【 Box-Shadow (Hover) 】 陰影區塊統一套色 Dark-Black >> (深黑藍) 透明 (0.15) *****************/
/* Zoom IN Product Window >> Product Single Page (產品圖放大區) */
.B2C-Style .zoomWindow {
box-shadow: 6px 5px 6px 4px rgba(0, 7, 34, 0.1);
box-shadow: 0px 6px 10px 4px rgba(0, 7, 34, 0.15);
}
/*************** 【 Box-Shadow (Hover) 】 陰影區塊統一套色 Dark-Black >> (黑) 透明 (0.3) *****************/
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style .promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> All Item >> Main Button */,
.B2C-Style div:is(.product_section, .marketing-material) [id*="home_promotion_"] .promo_item .hover_block a.btn/* Product Item >> Main Button */,
.B2C-Style .promo_item .hover_block a.btn/* Product Item >> Main Button */ {
box-shadow: 0px 6px 16px 3px rgba(0, 7, 34, 0.3);
}
/*************************************************************************************************************************
( D - 2 ). 【 Box-Shadow (陰影區塊) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/*************** 【 Filter Drop-Shadow 】 陰影區塊統一套色-- 透明 (0.1) *****************/
.B2C-Style .well-compare:not(.B2C-Style .well-compare img)/* Compare Model >> Compare Box */ {
/* filter: drop-shadow(0px 1px 1px rgba(25, 41, 52, 0.1)); */
transition: all 0.3s ease-in-out 0s;
}
/*************************************************************************************************************************
( D - 3 ). 【 HR (橫隔線) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
.B2C-Style hr {
margin-left: 0;
margin-right: 0;
}
/*************************************************************************************************************************
( E ). 【 Button Style (不包含字樣) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/*************** 【 a.linkto/ .linkblock 】 覆蓋在整區要 Hover 的 *****************/
.B2C-Style #content:has(#home_promotion_top, .promo_item, .promo_block, .sect-divider) a.linkblock,
.B2C-Style #content:has(#home_promotion_top, .promo_item, .promo_block, .sect-divider) a.linkto,
.B2C-Style a.linkblock,
.B2C-Style a.linkto {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
/* z-index: 1; */
}
/*************** 【 a.linkto/ .linkblock 】 覆蓋在整區要 Hover 的 *****************/
.B2C-Style #content:has(.promo_item) a.linkblock,
.B2C-Style #content:has(.promo_item) a.linkto {
z-index: 2;
}
/*************** 【 Button 】 背景模糊 *****************/
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style div:is(.product_section, .marketing-material) [id*="home_promotion_"] .promo_item .hover_block a.btn/* Product Item >> Main Button */,
.B2C-Style .promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> Main Button */,
.B2C-Style .promo_item .hover_block a.btn/* Product Item >> Main Button */ {
backdrop-filter: blur(5px);
}
/*************** 【 Button 】 背景模糊 *****************/
.B2C-Style .Blur-Button {
backdrop-filter: blur(5px);
}
/*************** 【 Button 】 字無陰影 *****************/
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart i::before/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar .navbar-right li:has(.quote + .buynow) .quote a.button.add-to-cart/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車/ 同時有 Buy Now) >> Product Single Page */,
.B2C-Style .single-product .product-image-container div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-image-container 第二顆 div 下有 .add-to-cart Button 的 a */,
.B2C-Style .single-product .product-desc div:has(.add-to-cart) + div:has(.add-to-cart) a/* .single-product 的 .product-desc 第二顆 div 下有 .add-to-cart Button 的 a */ {
text-shadow: none !important;
}
/* 將原來的舊設定移除 >> Font-Size/ Right/ Top */
.B2C-Style section.quote-cart + #content a#backbtn.actbtn button .icon-angle-left/* Get Quote Page >> Product Item Block > List Item >> Act Button (#backbtn) */,
.B2C-Style .table-responsive + .modal-footer .btn-info i/* Compare Share Table >> All Button(at Bottom) > i */,
.B2C-Style #comparison_listing .btn-info i/* Compare Table >> All Button(at Bottom) > i */,
.B2C-Style .product_button .discontinued-product a.button .fa/* Subcategory Product Page > Icon */,
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]/* Subcategory Product Page > Icon */ {
color: unset !important;
font-size: unset !important;
right: unset !important;
top: unset !important;
margin: unset !important;
}
/* All Button Default Style */
.B2C-Style .button,
.B2C-Style .btn[class*="btn-"],
.B2C-Style a.btn[class*="btn"] {
transition: all 0.3s ease-in-out 0s;
}
/* All Button Default Style */
.B2C-Style .button {
padding: 0 20px;
padding: 0 1.25rem;
}
/* All Button Default Style */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn/* Product Recommendation >> .product-desc >> .btn-group >> a.btn */ {
line-height: 1.6rem;
}
/* All Button Default Style (基本 Button 內距離 Padding) */
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */,
.B2C-Style .btn[class*="btn-"] {
transition: all 0.3s ease-in-out 0s;
}
/* All Button Default Style (基本 Button 內距離 Padding) */
.B2C-Style .btn[class*="btn-"]:not(#search_form .form-group button):not(.form-group + button):not(#search_form .form-group + button):not(.mobile-btn-container .btn[class*="btn-"]):not(#widget-subscribe-form .input-group-btn button):not(.product-page-control .dropdown .btn-default) {
padding: 5px 10px;
padding: 0.3rem 0.6rem;
padding: 0.35rem 0.6rem;
padding: 0.35rem 0.65rem;
padding: 0.35rem 0.9rem;
padding: 5px 30px;
padding: 0.35rem 2rem;/* 不包含 mobile ver */
}
/* All Button Default Style (基本 Button 內距離 Padding) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.btn-learnm/* Product Recommendation >> .product-desc >> .btn-group >> a.btnbtn-learnm */ {
padding: 0.35rem 1.3rem !important;/* 不包含 mobile ver */
}
/* All Button Default Style ( 大 Button 內距離 Padding) */
.B2C-Style #slider.homepage-slider a.btn.btn-primary,
.B2C-Style #slider.product-slider a.btn.btn-primary,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_top .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_bottom .promo_item a.btn,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a.btn,
.B2C-Style .promo_block .promo_item a.btn,
.B2C-Style .marketing-material #home_promotion_top .promo_item a.btn.btn-primary,
.B2C-Style .marketing-material .promo_item .hover_block a.btn,
.B2C-Style .marketing-material .promo_item a.btn.btn-primary,
.B2C-Style .marketing-material .promo_block .promo_item .hover_block a.btn,
.B2C-Style .marketing-material .promo_block .promo_item a.btn.btn-primary,
.B2C-Style .product_section #home_promotion_top .promo_item a.btn.btn-primary,
.B2C-Style .product_section .promo_item .hover_block a.btn,
.B2C-Style .product_section .promo_item a.btn.btn-primary,
.B2C-Style .product_section .promo_block .promo_item .hover_block a.btn,
.B2C-Style .product_section .promo_block .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) #home_promotion_top .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item a.btn.btn-primary,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default,
.B2C-Style a.btn.btn-load-more.btn-default,
.B2C-Style section.quote-cart + #content a.actbtn button/* Get Quote Page >> Product Item Block > List Item >> Act Button */ {
padding: 10px 10px;
padding: 0.6rem 0.9rem;
padding: 10px 30px;
padding: 0.6rem 2rem !important;/* 不強制會被上方基本內距影響 */
}
/* All Button Default Style ( 小 Button 內距離 Padding) */
.B2C-Style .marketing-material #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style .marketing-material .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style .marketing-material .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style .marketing-material .promo_block .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style .marketing-material .promo_block .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style .product_section #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style .product_section .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style .product_section .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style .product_section .promo_block .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style .product_section .promo_block .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item:is(.col-lg-3, .col-md-3) .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item:is(.col-lg-3, .col-md-3) a.btn.btn-primary {
padding: 0.5rem 1.7rem !important;/* 不強制會被上方基本內距影響 */
padding: 0.4rem 1.5rem !important;/* 不強制會被上方基本內距影響 */
}
/* Product Listing >> Add to cart ( 特殊 Button 內距離 Padding) */
.B2C-Style #product_lists a.btn[class*="btn"] {
padding: 6px 10px;
padding: 0.4rem 0.6rem;
}
/* Product Listing >> 下拉選單 ( Sort 特殊 Button 內距離 Padding) */
.B2C-Style #Sortblock button#dropdownMenu_model_filter {
padding: 5px 15px !important;
padding: 0.35rem 1rem !important;
}
/* Product Page >> Search Product + Product Page >> Go Button ( 特殊 Button 內距離 Padding) */
.B2C-Style .product-head button.btn-go,
.B2C-Style #search_form .form-group button.btn-go,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/ {
/*border-radius: 0 5px 5px 0;
border-radius: 0 0.3rem 0.3rem 0;*/
position: relative;
left: -4px;
left: -0.5rem;
padding: 5px 10px;
padding: 0.35rem 0.6rem !important;
}
/* Product Page >> Comparision Button ( 特殊 Button 內距離 Padding) */
/* .B2C-Style #search_form .form-group button[class*="btn-"], */
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info,
.B2C-Style #search_form .form-group button {
padding: 5px 20px 5px;
padding: 0.3rem 1.3rem;
padding: 0.35rem 1.3rem;
}
/* Product Page >> Search Product + Product Page >> Go Button + 一般 Button ( 特殊 Button 內距離 Padding) */
/* 此處的 padding-top & Bottom 會影響 .form-inline input.form-control 高度(目前height:37px) */
.B2C-Style .product-head button.btn-go,
.B2C-Style #search_form .form-group button.btn-go + span + .btn-info,
.B2C-Style #search_form .form-group button,
.B2C-Style #search_form .form-group button.btn-go,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/ {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
/* Product Page >> Search Product >> Go Button / Comparison Basket */
.B2C-Style #search_form .form-group button[class*="btn-"] {
width: auto;
min-width: auto;
}
/* Learn More Button 外框 >> Product Listing / Feature Article */
.B2C-Style div.btn-learnm {
min-width: 100%;
/*
background-color: transparent;
border-top: 1px solid #f3f4f6;
border-top: 1px solid rgba(195, 198, 203, 0.7);
*/
padding: 3px 15px 5px;
padding: 3% 20px 4.5%;
transition: all .3s ease-in-out 0s;
/* 微邊界灰 & 藍框 Button
border-top: 1px solid transparent;
padding: 3% 25px 10%;
*/
}
/* Learn More Button>> Product Listing / Feature Article */
.B2C-Style .btn-learnm a {
/*border-radius: 0.5px;
border-radius: 0.3rem;*/
/*color: #005caa;
border: 2px solid #005caa;
*/
/* 無邊框 Button
border: none;
*/
padding: 0 !important;
transition: all .3s ease-in-out 0s;
}
/* Load More Button (載入更多) >> Product Listing Page & All Page */
.B2C-Style .top_searchbox + div div.load-more/* Search Result Page >> Load More Section */,
.B2C-Style #product_lists div.load-more/* Product Page Page >> Load More Section */,
.B2C-Style div.load-more {
text-align: center;
margin: 0 auto;
margin-top: 1.5rem;
width: 100%;
padding-left: 0;
padding-right: 0;
float: none !important;/*原來為 Left, 無法置中 */
}
/* Load More Button (載入更多) >> 只針對 Search Result Page */
.B2C-Style section#content .content-wrap .container .top_searchbox + div .load-more {
width: 99%.5;
width: 99%;
}
/* Load More Button (載入更多) >> Product Listing Page & All Page */
.B2C-Style .top_searchbox + div a.btn.btn-load-more.btn-default/* Search Result Page >> Load More Button*/,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default/* Product Page Page >> Load More Button*/,
.B2C-Style a.btn.btn-load-more.btn-default {
padding: 17px 10px;
width: 100%;
transition: all 0.3s ease-in-out 0s;
}
/* Load More Button (Hover) (載入更多) >> Product Listing Page & All Page */
.B2C-Style .top_searchbox + div a.btn.btn-load-more.btn-default:hover/* Search Result Page >> Load More Button*/,
.B2C-Style #product_lists a.btn.btn-load-more.btn-default:hover/* Product Page Page >> Load More Button*/,
.B2C-Style a.btn.btn-load-more.btn-default:hover {
border: 1px solid transparent !important;
}
/* Comparison Basket Button【 Unselect 】 >> Product Single Page */
.B2C-Style .btn.disabled,
.B2C-Style .btn[disabled],
.B2C-Style fieldset[disabled] .btn {
opacity: 0.5;
}
/* Learn More Button【 Hover 】 >> Product Listing / Feature Article */
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm {
/*background-color: rgba(128, 186, 45, 1.0);
background-color: rgba(159, 226, 40, 1.0);*/
/* box-shadow: inset 0px -1px 0px 0px #004276; 內框線 */
transition: all .3s ease-in-out 0s;
}
/* Learn More Button【Hover】>> Product Listing / Feature Article */
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a::after,
.B2C-Style .row div.product-category > div.sect-divider:hover div.btn-learnm a,
.B2C-Style .btn-learnm a:hover {
/*color: #fff;
background-color: transparent;*/
transition: all .3s ease-in-out 0s;
}
/* Cancel/ Clear Button (取消按鈕) Product Listing >> Filter > Clear (Circle X) */
.B2C-Style .well-filter a.reset {
display: inline-block;
line-height: 1.6rem;
min-height: 27px;
height: 27px;
border-radius: 4rem;
line-height: 1.6rem;
width: auto;
position: relative;
top: 0.2rem;
/* 若有加 Border
border: 1px solid rgba(195, 198, 203, .5);
background-color: rgba(255, 255, 255, .5);
padding: 0 13px !important;
top: 0.17rem;
*/
}
/* Not Hover (原始透明度) >> opacity: 0.6; */
.B2C-Style #reset_btn .fa-times-circle/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-filter a.reset::after/* Cancel/ Clear Button (取消按鈕) Product Listing >> Filter > Clear (Circle X) */ {
opacity: 0.6 !important;
transition: all .3s ease-in-out 0s;
}
/* Hover (滑過透明度) >> opacity: 1.0; */
.B2C-Style #reset_btn:hover .fa-times-circle/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-filter a:hover.reset::after/* Cancel/ Clear Button (取消按鈕) Product Listing >> Filter > Clear (Circle X) */ {
opacity: 1.0 !important;
transition: all .3s ease-in-out 0s;
}
/* CTA Button >> Pannding 距離 (大) (on Page) */
.B2C-Style .single-product .add-to-cart.button {
padding: 0.35rem 1.4rem;
}
/* CTA Button >> Pannding 距離 (小) (on Tab Menu) */
.B2C-Style #product_tab_menu .add-to-cart.button {
padding: 0.13rem 1.25rem;
}
/* CTA Button >> Pannding 距離 (大) (on Page) */
.B2C-Style a.add-to-cart.button.nomargin.btn-full-width {
width: 100% !important;
}
/* Search Result Page >> Go Button (Original) */
.B2C-Style #sitesearch_form button.btn-go {
left: -2px;
top: 2px;
margin-top: -6px !important;
margin-top: -7px !important;
}
/* Search Result Page >> Go Button (Fixed Bar) */
.B2C-Style .top_searchbox.fixed #sitesearch_form button.btn-go {
margin-top: -7px !important;
}
/* Search Result Page >> Filter 開合 > Close Icon (Top Line + Bottom Line) */
.B2C-Style .hamburger.is-closed .hamb-top,
.B2C-Style .hamburger.is-closed .hamb-bottom {
/* Close Status */
width: 45%;
left: 10px;
/* Arrow Status-1 */
width: 35%;
left: 10px;
/* Arrow Status-2 */
width: 30%;
left: 11px;
}
/* Search Result Page >> Filter 開合 > Close Icon (Top Line) */
.B2C-Style .hamburger.is-closed .hamb-top {
/* Close Status
width: 45%;
left: 10px;*/
top: 50%;
/* Arrow Status-1
width: 35%;
left: 10px;*/
top: 62%;
/* Arrow Status-2
width: 30%;
left: 11px;*/
top: 59.5%;
}
/* Search Result Page >> Filter 開合 > Close Icon (Bottom Line) */
.B2C-Style .hamburger.is-closed .hamb-bottom {
/* Close Status */
top: 50%;
/* Arrow Status-1
width: 35%;
left: 10px;*/
top: 38%;
/* Arrow Status-2
width: 30%;
left: 11px;*/
top: 39.5%;
}
/* Close X >> Lightbox Modal > Close Icon (Bottom Line) */
.B2C-Style .close {
font-size: 1.6rem;
font-weight: 400;
}
/* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */
.product_button .discontinued-product > div a.btn[class*="btn"],
.product_button .discontinued-product > div a.btn {
flex-wrap: nowrap/* 若 items 過多也不換行, 會壓縮items (若有需要讓所有的 flex items 元素壓縮在同一行) */
}
/* 991 以上 */
@media (min-width: 991px) {
/* 產品上方資訊(三欄時) >> CTA Button >> Pannding 距離 (大) (on Page) */
.B2C-Style .single-product .product .product-padding .col-md-5.product-image-container a.add-to-cart.button.nomargin.btn-full-width,
.B2C-Style .col-md-5.product-image-container a.add-to-cart.button.nomargin.btn-full-width {
width: 95% !important;
}
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */
.B2C-Style .product_button .discontinued-product {
padding-top: unset;
text-align: center;
display: flex;
/* 確保子元素之間的間距 (平均分配,無法自訂間距)
justify-content: space-between;
*/
gap: 10px; /* 使用 gap 來控制按鈕之間的間距 */
justify-content: flex-end; /* Button 對齊右邊 */
}
/* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */
.B2C-Style .product_button .discontinued-product > div {
margin-top: unset !important;
/* 使子元素填滿父元素 flex: 1; */
flex-grow: 0; /* 確保按鈕不會成長來佔據多餘空間 */
margin-right: 10px !important; /* 設置右邊距 */
}
/* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */
.B2C-Style .product_button .discontinued-product > div:last-child {
margin-right: 0px !important;
}
/* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */
.B2C-Style .product_button .discontinued-product a.button {
width: auto;
}
/* 有多顆 Button >> 第二, 三, 四顆 Button >> 距離左邊空間 */
.B2C-Style .btn[class*="btn-"]:nth-child(2):not(.B2C-Style .form-group .btn[class*="btn-"]:nth-child(2)):not(.B2C-Style .product-head .btn[class*="btn-"]:nth-child(2)):not(.B2C-Style #sitesearch_form .btn[class*="btn-"]:nth-child(2)),
.B2C-Style .btn[class*="btn-"]:nth-child(3):not(.promo_item .hover_block a.btn),
.B2C-Style .btn[class*="btn-"]:nth-child(4):not(.B2C-Style #search_form .form-group button.btn-go + span + .btn-info):not(.B2C-Style #search_form .form-group button):not(.promo_block .promo_item .hover_block a.btn) {
margin-left: 13px;
}
/* 有多顆 Button >> 第一距離左邊 0 */
.B2C-Style .promote-banner:has(a.btn + a.btn) .btn[class*="btn-"]:not(a.btn + a.btn),
.B2C-Style div:has(a.btn + a.btn) .btn[class*="btn-"]:not(a.btn + a.btn) {
margin-left: 0 !important;
}
/* Learn More Button >> Product Listing / Feature Article ( 微邊界灰 & 藍框 Button )
.B2C-Style .btn-learnm a {
width: auto;
min-width: 70%;
}
*/
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* CTA Button (兩欄式) >> Add to Quote Cart/ Buy Now (大) (on Page) */
.B2C-Style .col-md-5.product-desc a.add-to-cart.button.nomargin.btn-full-width {
width: 75% !important;
width: 90% !important;
}
/* 產品上方資訊(三欄時) >> CTA Button >> Pannding 距離 (大) (on Page) */
.B2C-Style .single-product .product .product-padding .col-md-5.product-image-container a.add-to-cart.button.nomargin.btn-full-width,
.B2C-Style .col-md-5.product-image-container a.add-to-cart.button.nomargin.btn-full-width {
width: 95% !important;
width: 90% !important;
}
}
/* 1199 以下 */
@media (max-width: 1199px) {
/* Filter Button >> 向上/下箭頭 */
.B2C-Style #search_form .form-group button[aria-controls] i::after {
position: relative;
right: unset;
right: -3px;
}
/* Product Page >> Search Product >> Filter Button (中螢幕行動裝置才會出現/ Mobile 不會) */
.B2C-Style #search_form .form-group button[class*="btn-"]:is([aria-controls="filter_form"]) {
margin-right: 7px;
margin-right: 0.5rem;
}
}
/* 768 ~ 819 */
@media (min-width: 768px) and (max-width: 819px) {
.B2C-Style .mobile-btn-container {
margin: 0 auto;
text-align: center;
margin-top: 5px;
width: 70% !important;
}
.B2C-Style .mobile-btn-container form.form-inline {
text-align: center;
padding: 10px;
margin: 5px 0;
}
.B2C-Style .mobile-btn-container input.form-control {
width: 280px !important;
height: 36px;
}
.B2C-Style #mobile-product-header .mobile-btn {
width: 100%;
max-width: 330px !important;
display: block;
margin: 0 auto;
margin-bottom: 2%;
margin-top: 2%;
}
}
/* 768 以上*/
@media (min-width: 768px) {
/* Mobile >> Dropdown Filter Button >> Category Spotlight Menu */
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
text-align: center;
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* Product Subcategory Page >> 搜尋 Go */
.B2C-Style .product-head button.btn-go {
transform: translateY(-0.05rem);
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* All Button Default Style */
.B2C-Style a.btn[class*="btn"],
.B2C-Style a.button,
.B2C-Style .btn[class*="btn-"]:not(.B2C-Style #search_form button.btn-go):not(.B2C-Style .product-head button.btn-go):not(.B2C-Style #mobile_search_form button.btn-go):not(.B2C-Style #mobile_search_form .product-head button.btn-go):not(.single-product .product #refs .tabs div#dropdownMenu-inner button#dropdownMenu-inner-btn):not(.B2C-Style .promote-banner #slider .swiper-slide .slider-caption a.btn.btn-primary),
.B2C-Style #mobile-product-header .mobile-btn:not(.B2C-Style #mobile_search_form button.btn-go):not(.B2C-Style #mobile_search_form .product-head button.btn-go) {
width: 100% !important;
text-align: center;
margin-bottom: 2%;
margin-top: 2%;
}
/* Product Listing >> Add to cart */
.B2C-Style #product_lists a.btn[class*="btn"] {
padding: 6px 10px;
padding: 0.7rem;
}
/* Product Subcategory Page >> 搜尋框 */
.B2C-Style .form-inline input.form-control {
width: 86%;
max-width: 100%;
transform: translateX(-0.1rem);
}
/* Product Subcategory Page >> 搜尋 Go */
.B2C-Style .product-head button.btn-go {
transform: translateY(0rem);
}
}
/* 390 以下 */
@media (max-width: 390px) {
/* Product Subcategory Page >> 搜尋框 */
.B2C-Style .form-inline input.form-control {
width: 85%;
}
}
/*************************************************************************************************************************
( F ). 【 Tips Style (提醒字樣/ 區塊) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* Get Quote Modual >> Tip */
.B2C-Style #gqc_tip+.popover {
width: 146px;
height: 40px;
max-width: none;
}
/*************** 【 ICON - Before/ After 】 ICON 元素套用 Google Material Icon *****************/
/* ICON 統一套用 ( inline-block / line-height: 1rem ) */
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style .row.result_item p + a/* Search Result Page >> Result Item > a >> Icon (View) */,
.B2C-Style .row.result_item p + a + span + a/* Search Result Page >> Result Item > a + a >> Icon (Download) */,
.B2C-Style #reset_btn/* Search Result Page >> Filter >> Cancel */,
.B2C-Style #reset_btn .fa-times-circle/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .table-responsive + .modal-footer .btn-info i::before/* Compare Share Table >> All Button(at Bottom) > icon::before */,
.B2C-Style #comparison_listing .btn-info i:before/* Compare Table >> All Button(at Bottom) > i:before */,
.B2C-Style .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style .comparisontable .icon-remove::before/* Comparison Table > Remove Button::before */,
.B2C-Style .comparisontable .icon-minus::before/* Comparison Table > Show Less(minus)::before */,
.B2C-Style .comparisontable .icon-plus::before/* Comparison Table > Show More(Plus)::before */,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall::before/* Compare Model >> Remove All Button::before */,
.B2C-Style .well-filter a.reset::after/* Cancel/ Clear Icon (取消按鈕) Product Listing >> Filter > Clear (Circle X) */,
.B2C-Style #wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style #wrapper .fa-asterisk::before,
.B2C-Style .fa-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button .fa::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before/* Subcategory Product Page > Icon::before */,
.B2C-Style #top-bar span.globe-icon::before/* 語言選擇 Icon */,
.B2C-Style #top-bar .icon-chevron-down::before/* 下箭頭(短) >> Select Langruage 語言選單*/,
.B2C-Style .breadcrumb > li + li::before/* 右箭頭(短) for breadcrumb*/,
.B2C-Style .icon-line-cross:before/* Search Box > Icon Cancel (X - Cross)*/,
.B2C-Style #top-search a i/* Top Bar >> a > 所有 i 套 Icon */,
.B2C-Style #top-bar i/* Top Bar >> 所有 i 套 Icon */,
.B2C-Style i::before/* 所有 i 套 Icon */,
.B2C-Style i:not(#footer a.social-icon i):not(.single-product .product .product-padding .top-related-products .related_product_tabs h3 i)/* 所有 i 套 Icon */,
.B2C-Style [class*="btn-"] a::after,
.B2C-Style [class*="btn-"] a::before,
.B2C-Style [class*="fa-"]::after,
.B2C-Style [class*="fa-"]::before,
.B2C-Style [class*="icon-"]::after,
.B2C-Style [class*="icon-"]::before {
display: inline-block;
position: relative;
line-height: 1rem;
font-variation-settings: 'GRAD' 0;/* 影響 Icon 粗細 >> 除 weight 之外, 還可以再微調 (for Google Material Icon 變數 : -25 / 0 / 200) */
-webkit-transition: 0.3s all ease-in 0.1s;
transition: 0.3s all ease-in 0.1s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
/* Button + ICON 統一套用 (Button + Icon 垂直置中) (寬度填滿空間) */
.B2C-Style div#support-download-tab h3.panel-title a,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar a.button.add-to-cart div:is([class*="icon-"])/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車) >> Product Single Page */,
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar a.button.add-to-cart/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車) >> Product Single Page */,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button */,
.B2C-Style .promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button*/,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn/* Product Recommendation >> .product-desc >> .btn-group >> a.btn */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group/* Product Recommendation (.sect-divider) >> .product-desc + .product-price */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left/* Slide Banner */,
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style #reset_btn/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-compare .compare-modal a.remove-btn/* Compare Model >> Product Item > Remove Text Link */,
.B2C-Style .table-responsive + .modal-footer .btn-info/* Compare Share Table >> All Button(at Bottom) */,
.B2C-Style #comparison_listing .btn-info/* Compare Table >> All Button(at Bottom) > i */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less) */,
.B2C-Style .top_searchbox + div a.btn-load-more i/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more,
.B2C-Style #sidebar .label .fa.fa-angle-down/* 下箭頭 (短) >> Search Result Page */,
.B2C-Style #gotoTop/*上箭頭(短) >> 回到最上*/,
.B2C-Style .product-snippet h2.subtitle/* All Product H2 + 左邊下箭頭 */,
.B2C-Style .product-snippet h2.subtitle .fa-angle-down/* All Product 左邊下箭頭 */,
.B2C-Style .product_button .discontinued-product a.button/* Subcategory Product Page > a.button */,
.B2C-Style .single-product .product-desc .share label/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-desc .share/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-detail-price span.product-special-label/* New Icon (Single Product) */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok/*Add to Quote Cart (勾選狀態 >> 加入購物車) >> Product Listing Page*/,
.B2C-Style a.btn.addtocart i.icon-ok/*Add to Quote Cart (勾選狀態 >> 加入購物車) >> Product Listing Page*/,
/* Mega Menu >> 右箭頭(短)
.B2C-Style #primary-menu li a, */
.B2C-Style a.btn[class*="btn"],
.B2C-Style a.button {
display: flex;/* 寬度填滿空間 */
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
justify-content: center; /* 水平置中 */
}
/* Button + ICON 統一套用 (寬度以內容去撐) (Button + Icon 垂直置中) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button */,
.B2C-Style .promo_block .promo_item .hover_block a.btn/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button*/,
.B2C-Style .single-product .product-detail-price span.product-special-label/* New Icon (Single Product) */,
.B2C-Style .table-responsive + .modal-footer .btn-info/* Compare Share Table >> All Button(at Bottom) */,
.B2C-Style #comparison_listing .btn-info/* Compare Table >> All Button(at Bottom) */,
.B2C-Style .comparisontable a.btn_border/* Comparison Table > All Button (Remove + Show Less) */ {
display: inline-flex;/* 寬度以內容去撐 */
}
/* Button + ICON 統一套用 (Button + Icon 水平置中 + 不換行) */
.B2C-Style .table-responsive + .modal-footer .btn-info/* Compare Share Table >> All Button(at Bottom) */,
.B2C-Style #comparison_listing .btn-info/* Compare Table >> All Button(at Bottom) */,
.B2C-Style a.btn[class*="btn"],
.B2C-Style a.button {
justify-content: center; /* 水平置中 (Button 內容居中) */
flex-wrap: wrap; /* 設為 wrap，則不會壓縮items，如果items過多就換行 (若不設定會將所有的flex items壓縮在同一行) */
flex-wrap: nowrap/* 若 items 過多也不換行, 會壓縮items (若有需要讓所有的 flex items 元素壓縮在同一行) */
}
/* Button + ICON 統一套用 (Button + Icon 不需水平置中) */
.B2C-Style div#support-download-tab h3.panel-title a,
.B2C-Style .single-product .product-desc .share label/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-desc .share/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-detail-price span.product-special-label/* New Icon (Single Product) */,
.B2C-Style #primary-menu li a/* Mega Menu >> 右箭頭(短) */ {
justify-content: unset; /* 不需水平置中 */
}
/* Button + ICON 統一套用 (Button + Icon 不需水平置中) */
.B2C-Style .single-product .product-desc .share label/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-desc .share/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */,
.B2C-Style .single-product .product-detail-price span.product-special-label/* New Icon (Single Product) */ {
align-content: unset; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
}
/* Button + ICON 統一套用 (自動靠左右兩邊靠齊) */
.B2C-Style .product-snippet h2.subtitle/* All Product H2 + 左邊下箭頭 */ {
justify-content: space-between; /* 子層自行靠左右 (平均分布, 無法微調間距) */
/* 使用 gap 來控制按鈕之間的間距
gap: 10px; */
}
/* Button + ICON 統一套用 (向左邊靠齊) */
.B2C-Style .well-compare .compare-modal a.remove-btn/* Compare Model >> Product Item > Remove Text Link */ {
justify-content: flex-start;; /* 向左邊靠齊 */
}
/* Button + ICON 統一套用 (向右邊靠齊) */
.B2C-Style #comparison_listing .modal-footer/* Compare Table >> Modal Footer (All Button 外區) */ {
/* 向右邊靠齊
justify-content: flex-end; */
}
/* 1023 以下 */
@media (max-width: 1023px) {
.B2C-Style .product_button .discontinued-product a.button {
display: flex;
display: inline-flex;
}
}
@Media (min-width: 767px) and (max-width: 1023px) {
.B2C-Style .product_button .discontinued-product > div {
margin-right: 5px !important;
}
.B2C-Style .product_button .discontinued-product a.button {
width: auto;
}
}
/* ICON 統一套用 ( a Button >> ::before >> 距離右邊文字空間 ) */
.B2C-Style li i[class*="fa-"]::before,
.B2C-Style li i[class*="icon-"]::before,
.B2C-Style a[class*="btn-"] [class*="fa-"]::before,
.B2C-Style a[class*="btn-"] [class*="icon-"]::before,
.B2C-Style [class*="btn-"] a::before {
margin-right: 4px;
}
/* ICON 統一套用 ( a Button >> ::after >> 距離左邊文字空間 ) */
.B2C-Style li i[class*="fa-"]::after,
.B2C-Style li i[class*="icon-"]::after,
.B2C-Style a[class*="btn-"] [class*="fa-"]::after,
.B2C-Style a[class*="btn-"] [class*="icon-"]::after,
.B2C-Style [class*="btn-"] a::after {
margin-left: 4px;
}
/* i >> 下箭頭(短) >> Load More Button >> Product Listing Page + All Page */
.B2C-Style .top_searchbox + div a.btn-load-more i/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more i {
padding-left: 10px;
}
/* Button + ICON 統一套用 (針對 Button/ 不包含 Tab Menu Icon) */
.B2C-Style .product-snippet h2.subtitle .fa-angle-down/* All Product 左邊下箭頭 */,
.B2C-Style #sidebar .label .fa.fa-angle-down,
.B2C-Style [class*="btn-"] a::after,
.B2C-Style [class*="btn-"] a::before,
.B2C-Style .button [class*="fa-"]::after,
.B2C-Style .button [class*="fa-"]::before,
.B2C-Style .button [class*="icon-"]::after,
.B2C-Style .button [class*="icon-"]::before {
top: unset; /* 因為要垂直居中 >> 覆寫掉原來的 Top */
}
/* Button + ICON 統一套用 (強制針對 Button/ 不包含 Tab Menu Icon) */
.B2C-Style .product-snippet h2.subtitle .fa-angle-down/* All Product 左邊下箭頭 */ {
top: unset !important; /* 因為要垂直居中 >> 覆寫掉原來的 Top */
}
/***************** ICON >> Materisl Icon >> Font-Weight (Icon 粗細) **************************/
/* ICON 統一套用 (font-weight:500) (Default 一般使用) */
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style #wrapper .fa-plus-square:before/* Add to Cart Button (加入購物車) >> Product Single Page */,
.B2C-Style .fa-plus-square:before/* Add to Cart Button (加入購物車) >> Product Single Page */,
.B2C-Style #gqc_preview a.button.btn-full-width/* Get Quote Modual >> Button */,
.B2C-Style .table-responsive + .modal-footer .btn-info i::before/* Compare Share Table >> All Button(at Bottom) > icon::before */,
.B2C-Style #comparison_listing .btn-info i::before/* Compare Table >> All Button(at Bottom) > i::before */,
.B2C-Style .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall::before/* Compare Model >> Remove All Button::before */,
.B2C-Style .well-compare h3/* Compare Model >> Compare Box >> Title */,
.B2C-Style .product_button .discontinued-product a.button .fa::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before/* Subcategory Product Page > Icon::before */,
.B2C-Style #wrapper .tab-nav [class*="icon-"]::before/*【Product Tab Menu (All Icon)】 >> Product Single Page*/,
.B2C-Style .tab-nav [class*="icon-"]::before/*【Product Tab Menu (All Icon)】 >> Product Single Page*/,
.B2C-Style .button [class*="icon-"]::after,
.B2C-Style .button [class*="icon-"]::before,
.B2C-Style [class*="btn-"] a::after,
.B2C-Style [class*="btn-"] a::before,
.B2C-Style [class*="fa-"],
.B2C-Style [class*="fa-"]
/*.B2C-Style [class*="fa-"]:not(.fa_v5):not(.fas_v5)::after,
.B2C-Style [class*="fa-"]:not(.fa_v5):not(.fas_v5)::before*/
/*,.B2C-Style [class*="icon-"]::after,
.B2C-Style [class*="icon-"]::before*/ {
font-weight: 500;
}
.B2C-Style .tab-content.features-abstract li:has(.all-features)::after/* Top Four Features >> 新增 All Features Link Text >> 連跳至 Features Tab */ {
font-weight: 500 !important;
}
/* ICON 統一套用 (font-weight:600) */
.B2C-Style #sidebar .checkmark::after/* Check Box(打勾) */,
.B2C-Style #sidebar input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style #filter_form .checkmark::after/* Check Box(打勾) */,
.B2C-Style .container input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style #wrapper .tab-nav .icon-info-sign::before/*【Product Tab Menu】Info Icon (資訊) >> Product Single Page*/,
.B2C-Style .tab-nav .icon-info-sign::before/*【Product Tab Menu】Info Icon (資訊) >> Product Single Page*/,
.B2C-Style .single-product .tab-content .icon-download-alt::before/* Download >> Product Single Page > Download & Support */,
.B2C-Style #top-search .icon-search3::before/* Top Search + Search Box */,
.B2C-Style .icon-search3::before/* Search Box */ {
font-weight: 600;
}
/* ICON 統一套用 (font-weight:700) */
.B2C-Style .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style .product_button .discontinued-product a.button .icon-question-sign::before/* Subcategory Product Page > 問號 Icon::before */,
.B2C-Style .product_button .discontinued-product a.button .fa-asterisk::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button .fa-ban::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .single-product .add-to-cart.button .icon-ok::before/* 打勾 Icon >> Add to Quote Cart >> 已加入詢問 (Single Product Page) */,
/* Add to Quote Cart (勾選狀態 >> 加入購物車) >> Product Listing Page */
.B2C-Style .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .fa-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .comparisontable .icon-remove::before/* Comparison Table > Remove */,
.B2C-Style .comparisontable .icon-minus::before/* Comparison Table > Show Less(minus) */,
.B2C-Style .comparisontable .icon-plus::before/* Comparison Table > Show More(Plus)::before */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok::before {
font-weight: 700;
}
/* ICON 統一套用 (font-weight:400) */
.B2C-Style #wrapper .icon-line2-handbag::before,
.B2C-Style .icon-line2-handbag::before,
.B2C-Style #sitesearch_form .btn .icon-search3::before/* Search Result Page */,
.B2C-Style #top-search .icon-search3::before/* Search >> Top Search + Search Box */,
.B2C-Style #wrapper .icon-search3::before,
.B2C-Style .icon-search3::before,
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-print::before/* Compare Share Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style #comparison_listing .btn-info i.icon-print::before/* Compare Table >> All Button(at Bottom) > .icon-print::before */,
.B2C-Style .compare-modal .blank-product .icon-line-plus::before/* Compare Product > + Add Product */,
.B2C-Style #sidebar .label .fa-angle-down::before/* 下箭頭(短) >> Filter >> Search Result Page */,
.B2C-Style #footer .icon-chevron-down::before/* Footer >> Title > 下箭頭 */,
.B2C-Style #top-bar span.globe-icon::before/* Icon (Top Bar) >> Select Langruage */,
.B2C-Style #gotoTop.icon-angle-up::before/* 上箭頭(短) >> 回到最上 */,
.B2C-Style #product_lists a.btn.addtocart::before/*Add to Quote Cart (加入購物車) >> Product Listing Page*/,
.B2C-Style #product_lists a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Product Listing Page */,
.B2C-Style a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> All Page */,
.B2C-Style .product-snippet h2.subtitle .fa-angle-down::before/* All Product 左邊下箭頭 */,
.B2C-Style #product_category_list .fa-angle-right::before/* 右箭頭(短) >> Filter >> Product Listing Page */,
.B2C-Style #product_category_list .fa-chevron-right::before/* 右箭頭(短) >> Filter >> Product Listing Page */,
.B2C-Style #product_category_list .fa-angle-down::before/* 下箭頭(短) >> Filter >> Product Listing Page */,
.B2C-Style #primary-menu ul.menu_body_1 > li.sub-menu > a::after /* Mega Menu >> 下箭頭(短) */,
.B2C-Style #primary-menu ul ul ul > li.last.all > a i.icon-angle-right::before/* Mega Menu >> last all >> 右箭頭(短) */ {
font-weight: 400;
}
/* ICON 統一套用 (font-weight:400) (Important 強制) */
.B2C-Style .product-snippet h2.subtitle .fa-angle-down::before/* All Product 左邊下箭頭 */,
.B2C-Style #product_category_list .fa-angle-down::before/* 下箭頭(短) >> Filter >> Product Listing Page */ {
font-weight: 400 !important;/* 強制覆寫回原來 */
}
/* ICON 統一套用 (font-weight:300) */
.B2C-Style .compare-modal .blank-product .icon-line-plus::before/* Compare Product > + Add Product */,
.B2C-Style .breadcrumb > li + li::before/* 麵包屑 */ {
font-weight: 300;
}
/* ICON 統一套用 (font-weight:200) */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right/* Slide Banner */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left i/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-right/* Slide Banner */,
.B2C-Style .swiper_wrapper #slider-arrow-left/* Slide Banner */ {
font-weight: 200;
}
/***************** ICON >> Materisl Icon >> Font-Size (Icon 大小) **************************/
/* ICON:Before/ After >> 【 超小-0 (0.95rem) 】Font Size */
.B2C-Style #primary-menu ul ul ul > li.last.all > a i.icon-angle-right::before/* Mega Menu >> last all >> 右箭頭(短) */,
.B2C-Style .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-filter a.reset::after/* Cancel/ Clear Button (取消按鈕) Product Listing >> Filter > Clear (Circle X) */ {
font-size: 15px;
font-size: 0.95rem;
}
/* ICON:Before/ After >> 【 超小-1 (1rem) 】Font Size */
.B2C-Style #wrapper .promote-products .icon-asterisk::before/* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .promote-products .icon-asterisk::before /* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style #wrapper .promote-products [class*="icon-"]::before/* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .promote-products [class*="icon-"]::before /* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style #sidebar .checkmark::after/* Check Box(打勾) */,
.B2C-Style #sidebar input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style #filter_form .checkmark::after/* Check Box(打勾) */,
.B2C-Style .container input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style .comparisontable .icon-remove::before/* Comparison Table > Remove */,
.B2C-Style .comparisontable .icon-minus::before/* Comparison Table > Show Less(minus) */,
.B2C-Style .comparisontable .icon-plus::before/* Comparison Table > Show More(Plus)::before */,
.B2C-Style #top-bar .icon-chevron-down::before/* 下箭頭(短) >> Select Langruage 語言選單 */ {
font-size: 16px;
font-size: 1rem;
}
/* ICON:Before/ After >> 【 超小-2 (1.05rem) 】Font Size */
.B2C-Style .fa-shopping-cart::before/* 購物車 */ {
font-size: 17px;
font-size: 1.05rem;
}
/* ICON:Before/ After >> 【 超小-3 (1.1rem) 】Font Size */
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .product_button .discontinued-product a.button .fa::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .breadcrumb > li + li::before/* 麵包屑 */ {
font-size: 18px;
font-size: 1.1rem;
}
/* ICON:Before/ After >> 【 超小-4 (1.5rem) 】Font Size */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc .product-title h3/* All Product + Subcategory Product Page(不包含 Feastures Article) */ {
font-size: 18.5px;
font-size: 1.15rem;
}
/* ICON:Before/ After >> 【 小-1 (1.2rem) 】Font Size */
.B2C-Style .tab-content.features-abstract li:has(.all-features)::after/* Top Four Features >> 新增 All Features Link Text >> 連跳至 Features Tab */,
.B2C-Style .table-responsive + .modal-footer .btn-info i::before/* Compare Share Table >> All Button(at Bottom) > icon::before */,
.B2C-Style #comparison_listing .btn-info i::before/* Compare Table >> All Button(at Bottom) > i::before */,
.B2C-Style .single-product .related_product_tabs .fa-check-circle::before/* Check-Circle (勾選狀態 with 圓外圈) > Compatible Products */,
.B2C-Style #footer .icon-chevron-down::before /* Footer >> Title > 下箭頭 */,
.B2C-Style #top-search .icon-search3::before/* Top Search + Top Search Box (原始狀態 > 手把較長 > Icon 較小) */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok::before/* Add to Quote Cart(勾選 Icon) (Product Listing) */,
.B2C-Style .fa-shopping-basket::before/* 購物籃 */ {
font-size: 19px;
font-size: 1.2rem;
}
/* ICON:Before/ After >> 【 小-2 (1.25rem) 】(微調 Top 位置) Font Size */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style .promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style .product_button .discontinued-product a.button .icon-question-sign::before/* Subcategory Product Page > 問號 Icon::before */,
.B2C-Style #top-bar span.globe-icon::before/* Icon (Top Bar) >> Select Langruage */ {
font-size: 20px;
font-size: 1.25rem;
}
/* ICON:Before/ After >> 【 中-1 (1.3rem) 】Font Size */
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar a.button.add-to-cart :is(i, [class*="icon-"])::before/* Fixed Tab Menu (桌機/ Desktop Ver) >> All Button (加入購物車) >> Product Single Page */,
.B2C-Style #sitesearch_form .icon-line-cross::before/* Top Search Box > Icon Cancel (X - Cross)*/,
.B2C-Style #product_lists a.btn.addtocart::before/* Product Listing */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after {
font-size: 20px;
font-size: 1.3rem !important;
}
/* ICON:Before/ After >> 【 中-2 (1.35rem) 】Font Size */
.B2C-Style #sitesearch_form .btn .icon-search3::before/* Search Result Page */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.btn-learnm::after/* Product Recommendation >> .product-desc >> .btn-group >> a.btnbtn-learnm::after */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok::before */,
.B2C-Style #product_lists .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style .single-product .tab-content .icon-download-alt::before,
.B2C-Style .btn-learnm a::after,
.B2C-Style .btn-learnm a::before {
font-size: 21px;
font-size: 1.35rem !important;
}
/* ICON:Before/ After >> 【 中-2 (1.45rem) 】Font Size */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style #home_promotion_top.promo_block .promo_item:is(.col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-4, .col-md-4):not(.col-lg-3.col-md-4) .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-download::before/* Compare Share Table >> All Button(at Bottom) > icon-download */,
.B2C-Style #comparison_listing .btn-info i.icon-download::before/* Compare Table >> All Button(at Bottom) > icon-download */ {
font-size: 23px;
font-size: 1.45rem;
}
/* ICON:Before/ After >> 【 大-1 (1.5rem) 】Font Size */
.B2C-Style #gotoTop.icon-angle-up::before/* 上箭頭(短) >> 回到最上*/,
.B2C-Style .well-compare .btn.btn-info.comparison_removeall::before/* Compare Model >> Remove All Button::before */,
.B2C-Style #sidebar .label .fa.fa-angle-down/* Search Result Page >> 下箭頭 (短) */,
.B2C-Style .product-snippet h2.subtitle .fa-angle-down/* All Product 左邊下箭頭 */,
.B2C-Style #product_category_list .fa-angle-right/*Filter >> Product Listing*/,
.B2C-Style #product_category_list .fa-angle-down/*Filter >> Product Listing*/,
.B2C-Style #product_category_list .fa-chevron-right/*Filter >> Product Listing*/,
.B2C-Style .single-product .add-to-cart.button .icon-ok::before/* 打勾 Icon >> Add to Quote Cart >> 已加入詢問 (Single Product Page) */,
.B2C-Style .tab-nav .icon-files::before,
.B2C-Style .tab-nav .icon-download::before,
.B2C-Style .tab-nav .icon-data::before,
.B2C-Style .tab-nav .icon-sitemap::before,
.B2C-Style .tab-nav .icon-list2::before,
.B2C-Style .tab-nav .icon-info-sign::before {
font-size: 24px;
font-size: 1.5rem !important;
}
/* ICON:Before/ After >> 【 大-2 (1.6rem) 】Font Size */
.B2C-Style .single-product .add-to-cart [class*="icon-"]::before,
.B2C-Style .single-product .add-to-cart [class*="fa-"]::before {
font-size: 25px;
font-size: 1.6rem;
}
/* ICON:Before/ After >> 【 大-3 (1.7rem) 】Font Size */
.B2C-Style #product_lists a.btn-load-more .icon-chevron-up::before/* 下箭頭(短) >> Load More Button >> Product Listing Page + All Page */,
.B2C-Style a.btn-load-more .icon-chevron-up::before,
.B2C-Style .compare-modal .blank-product .icon-line-plus::before/* Compare Product > + Add Product */,
.B2C-Style #product_lists a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Product Listing Page + All Page */,
.B2C-Style a.btn-load-more .icon-chevron-down::before {
font-size: 27px;
font-size: 1.7rem;
}
/* ICON:Before/ After >> 【 大-3-2 (1.9rem) 】Font Size */
.B2C-Style #wrapper .icon-History:is(.fa.fas_v5.icon)::before/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style .icon-History::before/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style #recently_viewed .icon-History::before/* #recently_viewed >> history icon >> Product Page */ {
font-size: 32px;
font-size: 1.9rem;
}
/* ICON:Before/ After >> 【 大-4 (3rem) 】Font Size */
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style .compare-modal .blank-product .icon-line-plus::before/* Compare Product > + Add Product */ {
font-size: 48px;
font-size: 3rem;
}
/* ICON:Before/ After >> 【 大-5 (3.5rem) 】Font Size */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i/* Slide Banner (小) */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i/* Slide Banner (小) */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right/* Slide Banner (小) */,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left/* Slide Banner (小) */,
.B2C-Style .swiper_wrapper #slider-arrow-right i/* Slide Banner (小) */,
.B2C-Style .swiper_wrapper #slider-arrow-left i/* Slide Banner (小) */,
.B2C-Style .swiper_wrapper #slider-arrow-right/* Slide Banner (小) */,
.B2C-Style .swiper_wrapper #slider-arrow-left/* Slide Banner (小) */ {
font-size: 55px;
font-size: 3.5rem;
}
/* ICON:Before/ After >> 【 大-6 (4.5rem) 】Font Size */
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].swiper_wrapper #slider-arrow-right i/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].swiper_wrapper #slider-arrow-left i/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].swiper_wrapper #slider-arrow-right/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].swiper_wrapper #slider-arrow-left/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper_wrapper #slider-arrow-right i/* Slide Banne (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper_wrapper #slider-arrow-left i/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper_wrapper #slider-arrow-right/* Slide Banner (大) */,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper_wrapper #slider-arrow-left/* Slide Banner (大) */ {
font-size: 65px;
font-size: 4.5rem;
}
/* ICON:Before/ After >> 【 Unset 不設 】Font Size */
.B2C-Style .top_searchbox + div a.btn-load-more i/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more i {
font-size: unset !important;
}
/******************************** ICON (圖示統一套用) >> Materisl Icon **************************************/
/* 統一取消原有::before/ after樣式 (Icon for All Button) */
.B2C-Style .quote:has(.add-to-cart.button.nomargin.btn-full-width)::before/* >> Add to Quote Cart Button 上一層 .quote::before */ {
content: none !important;/* 取消原來的內容 */
}
/********* 統一套 Icon 【 Fill:1 (滿底用) / 若只是 Outline 則不需要 】 (default 則為 Fill:0) *********/
.B2C-Style #wrapper .icon-History:is(.fa.fas_v5.icon)::before/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style #recently_viewed .icon-History::before/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style .icon-History::before/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > a > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > a + a > Add Icon */,
.B2C-Style #comparison_listing .btn-info i.icon-share::before/* Compare Table >> All Button(at Bottom) > icon-share */,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok::before */,
.B2C-Style #product_lists .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style #wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style #wrapper .fa-asterisk::before,
.B2C-Style .fa-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button .fa::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before/* Subcategory Product Page > Icon::before */,
.B2C-Style .single-product .related_product_tabs .fa-check-circle::before/* Check-Circle (勾選狀態 with Circle) >> Product Single Page */,
.B2C-Style .single-product .tab-content .icon-download-alt::before/* Download & Support >> Product Single Page */,
.B2C-Style #wrapper .tab-nav .icon-files::before/* Product Tab Menu */,
.B2C-Style .tab-nav .icon-files::before/* Product Tab Menu */,
.B2C-Style #wrapper .tab-nav .icon-download::before/* Product Tab Menu */,
.B2C-Style .tab-nav .icon-download::before/* Product Tab Menu */,
.B2C-Style #wrapper .tab-nav .icon-data::before/* Product Tab Menu */,
.B2C-Style .tab-nav .icon-data::before/* Product Tab Menu */,
.B2C-Style #wrapper .tab-nav .icon-sitemap::before/* Product Tab Menu */,
.B2C-Style .tab-nav .icon-sitemap::before/* Product Tab Menu */,
.B2C-Style #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-filter a.reset::after/* Clear Icon >> Product Filter */,
.B2C-Style .tab-nav .icon-files::before,
.B2C-Style .tab-nav .icon-sitemap::before,
.B2C-Style .tab-nav .icon-data::before,
.B2C-Style .tab-nav .icon-download::before,
.B2C-Style .tab-nav .icon-info-sign::before,
.B2C-Style .fa-shopping-basket::before/* 購物籃 */,
.B2C-Style .fa-shopping-cart::before/* 購物車 */ {
font-variation-settings: 'FILL' 1; /* 滿底, (default 則為 Fill:0) */
}
/********* 統一套 Icon 【 相同圖示換成 Material Icon 】 (Font Family + ::before/ after) **********/
/* Select Langruage >> Top Bar (地球/選擇語言) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #top-bar span.globe-icon::before,
.B2C-Style #wrapper .globe-icon::before,
.B2C-Style .globe-icon::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "language";
content: "\e894";
}
/* 取消原來 globe-icon (Select Langruage) >> Top Bar (地球/選擇語言) */
.B2C-Style #top-bar span.globe-icon {
background:unset !important;/* 原來是圖片改成 Font Icon */
}
/* Select Langruage >> Top Bar (地球/選擇語言) */
.B2C-Style #top-bar span.globe-icon::before/* Icon (Top Bar) >> Select Langruage */ {
top: 0.53rem; /* 不是 Button, 無法垂直居中, 要微調 */
}
/* Search (放大鏡/ 搜索) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #sitesearch_form .btn .icon-search3::before/* Search Result Page */,
.B2C-Style #top-search .icon-search3::before/* Search >> Top Search + Search Box */,
.B2C-Style #wrapper .icon-search3::before,
.B2C-Style .icon-search3::before {
font-family: 'font-icons','Lato';
font-style: normal;
content: "\e6be";
/* Material 放大鏡較小 >> 把手長 (Original) */
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "search";
content: "\e8b6";
}
/* Search >> Top Search + Search Box >> 正常 >> 把手較長 (Original) */
.B2C-Style #top-search .icon-search3::before {
top: 0.4rem;
}
/* Top Search Box >> Fixed Top Search Bar >> 正常 >> 把手較長 (Original) */
.B2C-Style #top-search #sitesearch_form .icon-search3::before {
top: 0.3rem;
}
/* Search Result Page >> 正常 >> 把手較長 (Original) */
.B2C-Style #sitesearch_form .btn .icon-search3::before {
top: 0.25rem;
}
/* Search >> Top Search + Search Box >> 加大 >> 圓型遮罩 ( 遮把手變短 ) */
.B2C-Style #sitesearch_form .btn .icon-search3::before/* Search Result Page */,
.B2C-Style #top-search #sitesearch_form .icon-search3::before,
.B2C-Style #top-search .icon-search3::before {
font-weight: 500;/* 原始為 600 */
clip-path: circle(50% at 45% 45%);/* 圓型遮罩 */
}
/* Top Bar Search >> 加大 >> 圓型遮罩 ( 遮把手變短 ) */
.B2C-Style #top-search .icon-search3::before {
font-size: 1.3rem; /* 遮把手變短特調 (避免套用到 Original Font Size) */
top: 0.47rem;
}
/* Top Search Box >> Fixed Top Search Bar >> 加大 >> 圓型遮罩 ( 遮把手變短 ) */
.B2C-Style #top-search #sitesearch_form .icon-search3::before,
.B2C-Style #sitesearch_form .btn .icon-search3::before {
font-size: 1.5rem; /* 遮把手變短特調 (避免套用到 Original Font Size) */
}
/* Top Search Box >> Fixed Top Search Bar >> 加大 >> 圓型遮罩 ( 遮把手變短 ) */
.B2C-Style #top-search #sitesearch_form .icon-search3::before {
/* 遮把手變短特調 (避免套用到 Original Font Size)
font-size: 1.5rem;
*/
top: 0.45rem;
left: 0.4rem;
}
/* Search Result Page >> 加大 >> 圓型遮罩 ( 遮把手變短 ) */
.B2C-Style #sitesearch_form .btn .icon-search3::before {
/* 遮把手變短特調 (避免套用到 Original Font Size)
font-size: 1.5rem;
*/
top: 0.3rem;
left: 0.1rem;
}
/* Shopping Cart (購物車) >> Top Menu (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .fa.fa-shopping-cart::before,
.B2C-Style #wrapper .fa-shopping-cart::before,
.B2C-Style .fa-shopping-cart::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "shopping_cart"; /* 購物車 */
content: "\e8cc";
}
.B2C-Style #wrapper .promote-products [class*="icon-"]::before/* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .promote-products [class*="icon-"]::before /* (.promote-products) Product Listing Page (新品小 Icon) > Icon::before */ {
top: 1px;
top: -0.1rem;
margin-left: 3px;
margin-left: 0.02rem;
}
/* Shopping-Basket Button (購物籃) >> 產品比較 (Product Page) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .fa-shopping-basket::before,
.B2C-Style .fa-shopping-basket::before {
font-family: "Font Awesome 5 Free";
content: "\f291";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "shopping_basket"; /* 購物籃 */
content: "\e8cb";
}
/* Shopping-Basket Button (購物籃) >> 產品比較 (Product Page) */
.B2C-Style .btn.btn-info .fa-shopping-basket::before/* 購物籃 */ {
top: 0.04rem; /* 無法垂直居中, 要微調 */
}
/* #recently_viewed (最近瀏覽產品) >> 產品頁 (Product Page) */
.B2C-Style #wrapper .icon-History:is(.fa.fas_v5.icon)::before,
.B2C-Style #recently_viewed .icon-History::before,
.B2C-Style .icon-History::before {
font-family: "Font Awesome 5 Free";
content: "\f1da";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "history"; /* 購物籃 */
content: "\e889";
}
/* #recently_viewed (最近瀏覽產品) >> 產品頁 (Product Page) */
.B2C-Style #wrapper .icon-History:is(.fa.fas_v5.icon)::before,
.B2C-Style #recently_viewed .icon-History::before,
.B2C-Style .icon-History::before {
transform: translateY(2px);
transform: translateY(0.25rem);
}
/* #recently_viewed (最近瀏覽產品) >> 產品頁 (Product Page) */
.B2C-Style #wrapper .icon-History:is(.fa.fas_v5.icon)/* #recently_viewed >> history icon >> Product Page */,
.B2C-Style #recently_viewed .icon-History/* #recently_viewed >> history icon >> Product Page */ {
display: inline-block;
position: relative;
line-height: 1rem;
position: absolute !important;
background-color: transparent;
top: 0;
left: 0;
transform: translateY(5px);
transform: translateY(0.35rem);
transform: translateY(0rem);
}
/* New Symbol Button (新品 *) >> 產品頁 (Product Page) */
.B2C-Style .product_button .discontinued-product a.button .fa-asterisk::before/* Subcategory Product Page > 新品 Icon::before */,
.B2C-Style .fa.fa-asterisk::before,
.B2C-Style #wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style #wrapper .fa-asterisk::before,
.B2C-Style .fa-asterisk::before {
font-family: 'FontAwesome' !important;
content: "\f069";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "new_releases"; /* 新發佈 */
content: "\e031";
top: 1px;
}
/* Ban/ Block/ Discontinued Symbol Button (已下架產品/ 阻擋符號 *) >> 產品頁 (Product Page) */
.B2C-Style .product_button .discontinued-product a.button .fa-ban::before/* Subcategory Product Page > 下架 Icon::before */,
.B2C-Style .fa.fa-ban::before,
.B2C-Style #wrapper .fa-ban::before,
.B2C-Style .fa-ban::before {
font-family: 'FontAwesome' !important;
content: "\f05e";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "block"; /* Ban/ Block/ Discontinued */
content: "\e14b";
font-variation-settings: 'FILL' 0 !important;/* Outline 樣式 (default) */
}
/* Subcategory Product Page > New Icon + 下架 + Top FAQ Icon::before */
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before,
.B2C-Style .product_button .discontinued-product a.button .fa::before {
top: 0.1rem;
margin-right: 0.4rem;
}
/* Question Symbol Button (Question/ Help/ 問號符號 ?) (Circle 底圓) >> 產品頁 (Product Page) */
.B2C-Style .product_button .discontinued-product a.button .icon-question-sign::before/* Subcategory Product Page > 問號 Icon::before */,
.B2C-Style .fa.icon-question-sign::before,
.B2C-Style #wrapper .icon-question-sign::before,
.B2C-Style .icon-question-sign::before {
font-family: 'font-icons','Lato' !important;
content: "\e710";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "help"; /* Question/ Help/ 問號 */
content: "\e887";
}
/* 8 大類-1 Category >> KVM Icon */
.B2C-Style #wrapper .fa-dns::before,
.B2C-Style .fa-dns::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "hard_drive";
content: "\f80e";
content: "category";
content: "\e875";
font-variation-settings: 'FILL' 1;
}
/* 8 大類-2 Category >> ProAV Icon */
.B2C-Style #wrapper .fa-settings_input_hdmi::before,
.B2C-Style .fa-settings_input_hdmi::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "settings_input_hdmi";
content: "\e8c2";
font-variation-settings: 'FILL' 1;
}
/* 8 大類-3 Category >> Consumer Elec Icon */
.B2C-Style #wrapper .fa-devices::before,
.B2C-Style .fa-devices::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "devices";
content: "\e1b1";
}
/* 8 大類-4 Category >> PDU Icon */
.B2C-Style #wrapper .fa-power::before,
.B2C-Style .fa-power::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "power";
content: "\e63c";
font-variation-settings: 'FILL' 1;
}
/* 8 大類-5 Category >> Racks Icon */
.B2C-Style #wrapper .fa-storage::before,
.B2C-Style .fa-storage::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "host";
content: "\f3d9";
content: "storage";
content: "\e1db";
font-weight: 500 !important;
}
/* 8 大類-6 Category >> USB Icon */
.B2C-Style #wrapper .fa-usb::before,
.B2C-Style .fa-usb::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "usb";
content: "\e1e0";
font-variation-settings: 'FILL' 1;
}
/* 8 大類-7 Category >> Serial Icon */
.B2C-Style #wrapper .fa-settings_ethernet::before,
.B2C-Style .fa-settings_ethernet::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "settings_ethernet";
content: "\e8be";
}
/* 8 大類-8 Category >> Serial Icon */
.B2C-Style #wrapper .fa-cable::before,
.B2C-Style .fa-cable::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
font-variation-settings: 'FILL' 0;
content: "cable";
content: "\efe6";
}
/* Subcategory Product Page > 問號 Icon::before */
.B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before {
top: 0.3rem;
}
/* Cancel/ Clear Button (取消按鈕) 圓形 X (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */,
.B2C-Style .well-filter a.reset::after,
.B2C-Style #wrapper .fa-times-circle::before,
.B2C-Style #wrapper .fa-remove::before,
.B2C-Style #wrapper .fa-close::before,
.B2C-Style .fa-times-circle::before,
.B2C-Style .fa-remove::before,
.B2C-Style .fa-close::before {
font-family: "Font Awesome 5 Free";
content: "\f057";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "cancel"; /* 取消 */
content: "\e5c9" !important;/*覆蓋回原 Icon */
}
/* Cancel/ Clear Button (Icon) (取消按鈕) Product Listing >> Filter > Clear (圓形 X) */
.B2C-Style .well-filter a.reset::after {
top: 0.275rem;
top: 0.283rem;
}
/* Cancel/ Clear Button (Icon) (取消按鈕) Search Result >> Filter > Clear (圓形 X) */
.B2C-Style #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */ {
top: 0.09rem;
}
/* Cancel/ Clear Button (Icon) (取消按鈕) Search Result >> Filter > Clear (.fa) */
.B2C-Style #reset_btn .fa-times-circle {
margin-right: 5px !important;
margin-right: 0rem !important;
}
/* Close Button (X 關閉按鈕 - 非圓形) Line X (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #sitesearch_form .icon-line-cross:before/* Search Box > Icon Cancel (X - Cross)*/,
.B2C-Style .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style #wrapper .icon-line-cross:before/* Icon Cancel (X - Cross)*/,
.B2C-Style #wrapper .icon-remove::before,
.B2C-Style #wrapper .fa-close::before,
.B2C-Style #wrapper .fa-times::before,
.B2C-Style .icon-line-cross:before/* Icon Cancel (X - Cross)*/,
.B2C-Style .icon-remove::before,
.B2C-Style .fa-close::before,
.B2C-Style .fa-times::before {
font-family: 'lined-icons', 'Lato';
content: "\e117";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "close"; /* 關閉 */
content: "\e5cd" !important;/*覆蓋回原 Icon */
/* font-variation-settings: 'FILL' 1; 滿底 */
}
/* Search Box > Icon Cancel (X - Cross)*/
.B2C-Style #sitesearch_form .icon-line-cross:before {
top: 0.37rem;
right: 0.2rem;
}
/* Compare Model >> Product Item > Remove Text Link::before */
.B2C-Style .well-compare .compare-modal a.remove-btn::before {
position: relative;
top: 0rem;
margin-right: 2px;
}
/* Remove All Button (全部取消) */
.B2C-Style .well-compare .btn.btn-info.comparison_removeall::before {
/* 全部取消 ICON
font-family: 'Material Symbols Outlined' !important;
font-family: 'Material Symbols Rounded' !important;
content: "clear_all";
content: "\e0b8";
top: 0.4rem;
*/
}
/* Minus(Show Less) Button ( — 縮減/顯示較少按鈕) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .icon-minus::before,
.B2C-Style .icon-minus::before {
font-family: 'font-icons','Lato' !important;
content: "\e71e";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "check_indeterminate_small"; /* (此 Icon 較短) Show Less 顯示較少 */
content: "\f88a" !important;/*覆蓋回原 Icon */
content: "remove"; /* Show Less 顯示較少 */
content: "\e15b" !important;/*覆蓋回原 Icon */
/* Show Less 顯示較少 (此 Icon 本身偏下方, 無法居中 >> 不使用)
content: "minimize";
content: "\e931" !important;
*/
/* font-variation-settings: 'FILL' 1; 滿底 */
}
/* Comparison Table > 小 Icon */
.B2C-Style .comparisontable a.btn_border i::before/* Comparison Table > All Icon::before */,
.B2C-Style .comparisontable .icon-remove::before/* Comparison Table > Remove Button::before */,
.B2C-Style .comparisontable .icon-minus::before/* Comparison Table > Show Less(minus)::before */,
.B2C-Style .comparisontable .icon-plus::before/* Comparison Table > Show More(Plus)::before */ {
top: 0.1rem;
}
/* 右箭頭(短) (All) */
.B2C-Style .tab-content.features-abstract li:has(.all-features)::after/* Top Four Features >> 新增 All Features Link Text >> 連跳至 Features Tab */,
.B2C-Style #primary-menu ul ul ul > li.last.all > a i.icon-angle-right::before/* Mega Menu >> last all >> 右箭頭(短) */,
.B2C-Style .breadcrumb > li + li:before/*breadcrumb 路徑符號 (>) (麵包屑) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */,
.B2C-Style .icon-angle-right::before,
.B2C-Style #wrapper .icon-angle-right::before,
.B2C-Style #wrapper .fa-angle-right::before,
.B2C-Style .fa-angle-right::before,
.B2C-Style #wrapper .fa-chevron-right::before,
.B2C-Style .fa-chevron-right:before {
font-family: 'FontAwesome';
content: "\f105";
content: "\f054";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "chevron_right"; /* 右箭頭(短) */
content: "\e5cc";
content: "keyboard_arrow_right"; /* 右箭頭(短) */
content: "\e315";
}
/* Top Four Features >> 新增 All Features Link Text >> 右箭頭(短) (連跳至 Features Tab) */
.B2C-Style .tab-content.features-abstract li:has(.all-features)::after {
top: 3px;
top: 0.25rem;
margin-left: 3px;
}
/* Mega Menu >> last all >> 右箭頭(短) */
.B2C-Style #primary-menu ul ul ul > li.last.all > a i.icon-angle-right::before {
position: relative;
top: 3px;
}
/* 右箭頭(短) (藍色 Banner 底) (breadcrumb 路徑符號) (>) (麵包屑) */
.B2C-Style .breadcrumb > li + li:before {
/*position: relative;
top: 1px;
content: '\f054';
font-family: "FontAwesome" !important;
font-size: 0.7em;
font-weight: 300;
top: 0.06rem;
opacity: 0.75;
padding-left: 0.4rem;*/
opacity: 0.9;
top: 0.05rem;
padding: 0 0.01rem;
}
/*chrome微調位置*/
@media screen and (-webkit-min-device-pixel-ratio:0){
/* 右箭頭(短) >> breadcrumb 路徑符號 (>) (麵包屑) (變 ATEN 中藍) (Top Blur Bar) */
.B2C-Style .breadcrumb > li + li:before {
top: 0rem;
top: 0.05rem;
}
}
/* 右箭頭(短) (白色底) (breadcrumb 路徑符號) (>) (麵包屑) */
.B2C-Style #product_listing .breadcrumb > li + li:before {
opacity: 1.0;
color: #c3c6cb;
}
/* 右箭頭(短) >> Filter >> Product Listing Page */
.B2C-Style #product_category_list .fa-angle-right::before,
.B2C-Style #product_category_list .fa-chevron-right::before {
top: 0.3rem;
}
/* 右箭頭(短) >> Filter >> Product Listing Page */
.B2C-Style #product_category_list .fa-angle-right {
left: 0.1rem;
}
/* 左箭頭(短) (All) */
.B2C-Style #wrapper .fa-angle-left::before,
.B2C-Style .fa-angle-left::before,
.B2C-Style .icon-angle-left::before,
.B2C-Style #wrapper .icon-angle-left::before,
.B2C-Style #wrapper .fa-chevron-left::before,
.B2C-Style .fa-chevron-left::before {
font-family: 'FontAwesome';
content: "\f053";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "chevron_left"; /* 左箭頭(短) */
content: "\e5cb";
content: "keyboard_arrow_left"; /* 左箭頭(短) */
content: "\e314";
}
/* 上箭頭(短) (All) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #gotoTop.icon-angle-up::before/* 上箭頭(短) >> 回最上 Icon */,
.B2C-Style .icon-angle-up::before,
.B2C-Style #wrapper .icon-angle-up::before,
.B2C-Style #wrapper .fa-chevron-up::before,
.B2C-Style #wrapper .fa-angle-up::before,
.B2C-Style #wrapper .icon-chevron-up::before,
.B2C-Style .fa-chevron-up::before,
.B2C-Style .fa-angle-up::before,
.B2C-Style .icon-chevron-up::before {
font-family: 'font-icons', 'Lato';
content: "\e7a6";
font-family: 'FontAwesome';
content: "\f077";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "keyboard_arrow_up"; /* 上箭頭(短) */
content: "\e316";
}
/* 上箭頭(短) >> 回最上 Icon */
.B2C-Style #gotoTop.icon-angle-up::before {
top: 0rem;
}
/* 下箭頭(短) (All) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style #top-bar .icon-chevron-down::before/* 下箭頭(短) >> Select Langruage 語言選單*/,
/* .B2C-Style .btn .caret::after, 下箭頭(短) >> Sort by/ Recent Button >> Product Listing Page */
.B2C-Style #product_lists a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Product Listing Page */,
.B2C-Style #wrapper .top_searchbox + div a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> All Page */,
.B2C-Style .icon-angle-down::before,
.B2C-Style #wrapper .icon-angle-down::before,
.B2C-Style #wrapper .fa-chevron-down::before,
.B2C-Style #wrapper .fa-angle-down::before,
.B2C-Style #wrapper .icon-chevron-down::before,
.B2C-Style .fa-chevron-down::before,
.B2C-Style .fa-angle-down::before,
.B2C-Style .icon-chevron-down::before {
font-family: 'font-icons', 'Lato';
content: "\e72d";
font-family: 'FontAwesome';
content: "\f107";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "keyboard_arrow_down"; /* 下箭頭(短) */
content: "\e313";
}
/* 下箭頭(短) >> Select Langruage 語言選單*/
.B2C-Style #top-bar i {
padding-left: 5px;
padding-left: 0.3rem;
}
/* 下箭頭(短) >> Select Langruage 語言選單*/
.B2C-Style #top-bar .icon-chevron-down::before {
top: 0.12rem;
}
/* 下箭頭(短) >> Footer >> Title > 下箭頭 */
.B2C-Style #footer .icon-chevron-down::before {
top: 0.25rem;
}
/* 下箭頭(短) >> Product Page >> Software-and-Download Tab > 標題的下箭頭 */
.B2C-Style div#support-download-tab h3.panel-title a i.icon-chevron-down::before {
}
/* 下箭頭(短) >> Filter >> Product Listing Page */
.B2C-Style #product_category_list .fa-angle-down::before {
top: 0.15rem;
}
/* 下箭頭(短) >> Load More Button >> Product Listing Page + All Page */
.B2C-Style .top_searchbox + div a.btn-load-more .icon-chevron-up::before/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more .icon-chevron-up::before/*下箭頭(短) >> Filter >> Product Listing Page*/,
.B2C-Style a.btn-load-more .icon-chevron-up::before,
.B2C-Style .top_searchbox + div a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style #product_lists a.btn-load-more .icon-chevron-down::before/*下箭頭(短) >> Filter >> Product Listing Page*/,
.B2C-Style a.btn-load-more .icon-chevron-down::before {
top: 0.1rem;
top: 0.05rem;
top: 0.25rem;
}
/* 下箭頭(短) >> Filter >> Search Result Page */
.B2C-Style #sidebar .label .fa-angle-down::before {
top: 0.2rem;
}
/* 下箭頭(短) (All) >> Product SubCategory Page (產品第三層選單頁面) (::before + 圓形背景色) */
.B2C-Style .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before {
background: unset;/* 刪除原來背景圖 */
font-size: 3rem;
font-weight: 500;
display: block;
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
line-height: 50px; /* 要跟 Height 同高才會居中 */
background-color: #fff;
border-radius: 300px;
border-radius: 50%;
display: flex;/* Flex 元素才能水平居中 */
justify-content: center;/* 水平置中 */
align-items: unset;
top: -65px;
top: -4rem;
}
/* Learn More Button (右箭頭 with 右線條) >> Product Listing / Feature Article (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.btn-learnm::after/* Product Recommendation >> .product-desc >> .btn-group >> a.btnbtn-learnm::after */,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style .promo_block .promo_item .hover_block a.btn::after/* Main/ Sub Category >> Product Item >> .hover_block >> Main Button::after */,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style #wrapper .btn-learnm a::after,
.B2C-Style .btn-learnm a::after {
/*
display: inline-block;
font-size: 1em;
font-size: 1rem;
font-weight: 300;
position: relative;
font-family: "FontAwesome" !important;
content: "\f061";
top: 0;
font-family: 'font-icons','Lato';
content: "\e7a5";
top: 0.1rem;
*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "arrow_right_alt"; /* 右箭頭(長條) */
content: "\e941";
margin-left: 4%;
margin-left: 0.4rem;
/*transform: translateY(0.3rem);*/
}
/* (目前不需要, 僅備用) Add to Quote Cart (加入購物車) >> Product Listing Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #product_lists a.btn.addtocart::before {
/* Google Material Icon (圓角)
font-family: 'Material Symbols Rounded' !important;
*/
/* Google Material Icon (方角)
font-family: 'Material Symbols Outlined' !important;
*/
/* + 加號
content: "add";
content: "\e145";
margin-right: 2%;
*/
/* font-variation-settings: 'FILL' 0; Outline */
}
/* Add to Quote Cart (勾選狀態 >> 加入購物車) >> Product Listing Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #sidebar .checkmark::after/* Check Box(打勾) */,
.B2C-Style #sidebar input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style #filter_form .checkmark::after/* Check Box(打勾) */,
.B2C-Style .container input:checked ~ .checkmark::after/* Check Box(打勾) */,
.B2C-Style .single-product .add-to-cart.add_quote_cart [class*="fa-"]::before,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok::before,
.B2C-Style #wrapper i.icon-ok::before,
.B2C-Style i.icon-ok::before {
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "check"; /* 打勾 */
content: "\e5ca";
/* font-variation-settings: 'FILL' 0; Outline */
}
/* Add to Quote Cart (勾選狀態 >> 加入購物車) >> Product Listing Page */
.B2C-Style .single-product .add-to-cart [class*="icon-"]::before,
.B2C-Style .single-product .add-to-cart [class*="fa-"]::before {
top: 0.2rem; /* 垂直居中後特調 */
}
/* Add to Quote Cart (勾選狀態 >> 加入購物車) (i) >> Product Listing Page */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok {
position: relative;
left: unset !important;
top: 0px !important;
padding-right:unset !important;
margin-right: 3%;
margin-right: 0.3rem;
}
/* Add to Quote Cart (勾選狀態 >> 加入購物車) (i) >> Product Listing Page */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok::before {
font-size: 1.3rem;
top: 1px;
top: 2px;
}
/* 大 CTA Button >> Add to Quote Cart/ Buy Now (on Page) (Single Product Page) (上半部) */
.B2C-Style .product-desc a.add-to-cart.button.nomargin.btn-full-width i.icon-ok::before {
top: 0.05rem;
}
/* 打勾 Icon >> Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .share label .checkmark::after {
top: -4px;
top: -0.25rem;
}
/* Check-Circle (勾選狀態 with 圓外圈 >> for Compatible Products ) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_lists .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style .single-product .related_product_tabs .fa-check-circle::before,
.B2C-Style #wrapper .fa-check-circle::before,
.B2C-Style .fa-check-circle::before {
font-family: "FontAwesome";
content: "\f058";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "check_circle"; /* 打勾 + 圓圈 */
content: "\e86c";
/* font-variation-settings: 'FILL' 0; Outline */
}
/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok::before */,
.B2C-Style #product_lists .btn-primary.addtocart.added i.icon-ok::before,
.B2C-Style .btn-primary.addtocart.added i.icon-ok::before {
font-weight: 600;
}
/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon (深色底) */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok::before */ {
font-weight: 700;
}
/* Check-Circle (勾選狀態 with 圓外圈 >> for Compatible Products ) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .single-product .related_product_tabs .fa-check-circle::before {
top: 4px;
}
/* Add to Cart Button (加入購物車) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .fa-cart-plus::before,
.B2C-Style .fa-cart-plus::before {
/*
display: inline-block;
position: relative;
font-size: 1em;
font-size: 1rem;
font-weight: 300;
margin-left: 4%;
font-family: "FontAwesome" !important;
content: "\f217";
top: 0;
*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "add_shopping_cart"; /* 加入購物車 */
content: "\e854";
/*transform: translateY(0.3rem);*/
}
/* Add to Cart Button (立即購買) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .icon-line2-handbag::before,
.B2C-Style .icon-line2-handbag::before {
font-family: 'Simple-Line-Icons', 'Lato' !important;
content: "\e035";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "shopping_bag"; /* Buy Now */
content: "\f1cc";
content: "local_mall"; /* Buy Now */
content: "\e54c";
}
/* Add to Cart Button (立即購買 ::before 的上層) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .icon-line2-handbag,
.B2C-Style .icon-line2-handbag {
margin-right: unset;
margin-right: 4px;
}
/* 大 Button >> Add to Cart/ Buy Now (on Page) (Single Product Page) (上半部) */
.B2C-Style .col-md-5.product-desc a.add-to-cart.button.nomargin.btn-full-width .icon-line2-handbag {
margin-right: 6px;
}
/* Add/ Plus (Line) (加入/Show More(顯示較多)/Line) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .icon-line-plus::before,
.B2C-Style .icon-line-plus::before,
.B2C-Style #wrapper .icon-plus::before,
.B2C-Style .icon-plus::before {
font-family: 'lined-icons','Lato';
content: "\e114";
font-family: 'font-icons','Lato' !important;
content: "\e71d";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "add"; /* 加入/Line */
content: "\e145";
}
/* Compare Product > + Add Product */
.B2C-Style .compare-modal .blank-product .icon-line-plus::before {
}
/* Add/ Plus (Square) (加入/Box) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style #wrapper .fa-plus-square:before,
.B2C-Style .fa-plus-square:before {
font-family: "FontAwesome";
content: "\f0fe";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "add_box"; /* 加入/Box */
content: "\e146";
}
/* Add/ Plus (Square) (加入/Box) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */ {
font-variation-settings: 'FILL' 1; /* 滿底 */
top: 0.23rem;
}
/* Download Icon (下載-1) >> Default Page >> (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .single-product .tab-content .icon-download-alt::before,
.B2C-Style #wrapper .icon-download-alt::before,
.B2C-Style .icon-download-alt::before,
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-download::before/* Compare Share Table >> All Button(at Bottom) > icon-download */,
.B2C-Style #comparison_listing .btn-info i.icon-download::before/* Compare Table >> All Button(at Bottom) > icon-download */,
.B2C-Style .single-product .tab-content .icon-download::before,
.B2C-Style #wrapper .icon-download::before,
.B2C-Style .icon-download::before {
/* font-family: 'font-icons','Lato';
content: "\e6d4"; */
/* font-family: "FontAwesome";
content: "\f019";
top: 0.3rem; */
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "download_2";
content: "\f523";
content: "download";
content: "\f090";
/* font-variation-settings: 'FILL' 0; 無滿底 */
}
/* Download Icon (下載-2) >> Product Page >> Download Page */
.B2C-Style .single-product .tab-content .icon-download-alt::before {
top: 0.2rem; /* 不是 Button 不會垂直/水平置中 (文字列表後小 Icon ) */
}
/* Compare Table >> All Button(at Bottom) > icon-download */
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-download::before/* Compare Share Table >> All Button(at Bottom) > icon-download */,
.B2C-Style #comparison_listing .btn-info i.icon-download::before {
font-size: 1.45rem;
top: 0.1rem;
}
/* Share Icon (分享) >> Default Page >> (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #comparison_listing .btn-info i.icon-share::before/* Compare Table >> All Button(at Bottom) > icon-share */,
.B2C-Style #wrapper .icon-share::before,
.B2C-Style .icon-share::before {
font-family: 'font-icons','Lato' !important;
content: "\e670";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "share"; /* 分享 */
content: "\e80d";
}
/* Compare Table >> All Button(at Bottom) > icon-share */
.B2C-Style #comparison_listing .btn-info i.icon-share::before {}
/* Print Icon (列印) >> Default Page >> (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-print::before/* Compare Share Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style #comparison_listing .btn-info i.icon-print::before/* Compare Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style #wrapper .icon-print::before,
.B2C-Style .icon-print::before {
font-family: 'font-icons','Lato' !important;
content: "\e887";
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "print"; /* 列印 */
content: "\e8ad";
}
/* Compare Table >> All Button(at Bottom) > .icon-print::before */
.B2C-Style .table-responsive + .modal-footer .btn-info i.icon-print::before/* Compare Share Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style #comparison_listing .btn-info i.icon-print::before {
font-size: 1.4rem;
font-weight: 400 !important;
top: 0.1rem;
}
/* Social Icon (所有社交平台) >> Footer */
.B2C-Style #footer .social-icon i::before {
top: 0.13rem;
}
/* Button 無字 (僅 Icon 居中) */
.B2C-Style #footer .social-icon i::before,
.B2C-Style #gotoTop.icon-angle-up::before {
margin-right: unset;
}
/* 【Product Tab Menu】Info Icon (資訊) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-info-sign::before,
.B2C-Style .tab-nav .icon-info-sign::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e711";
*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "info"; /* */
content: "\e88e";
/* font-variation-settings: 'FILL' 1; 滿底 */
}
/* 【Product Tab Menu】Features Icon (特點) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-list2::before,
.B2C-Style .tab-nav .icon-list2::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e6f3";*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "format_list_bulleted";
content: "\e241";
/* font-variation-settings: 'FILL' 1; 滿底 */
}
/* 【Product Tab Menu】Diagram Icon (連線圖-旋轉) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-sitemap::before,
.B2C-Style .tab-nav .icon-sitemap::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e78a";*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "schema";
content: "\e4fd";
transform: rotate(-90deg);
}
/* 【Product Tab Menu】Spec Icon (規格) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-data::before,
.B2C-Style .tab-nav .icon-data::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e6b0";*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "database";
content: "\f20e";
}
/* 【Product Tab Menu】Download & Support Icon (下載/支援與服務) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-download::before,
.B2C-Style .tab-nav .icon-download::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e615";*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "download_for_offline";
content: "\f000";
}
/* 【Product Tab Menu】Applications Icon (應用方案) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style #wrapper .tab-nav .icon-files::before,
.B2C-Style .tab-nav .icon-files::before {
/*font-family: 'font-icons','Lato';
font-style: normal;
font-weight: 400;
content: "\e605";*/
font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
content: "news";
content: "\e032";
content: "full_coverage";
content: "\eb12";
}
/* All Tab Menu ICON 【Product Tab Menu】 >> >> Product Page >> Product Tab Menu */
.B2C-Style .tab-nav .icon-files::before,
.B2C-Style .tab-nav .icon-download::before,
.B2C-Style .tab-nav .icon-data::before,
.B2C-Style .tab-nav .icon-sitemap::before,
.B2C-Style .tab-nav .icon-list2::before,
.B2C-Style .tab-nav .icon-info-sign::before {
top: 0.35rem; /* Tab Menu Icon(不是 Button), 要自己微調 >> Product Single Page */
}
@media (min-width: 1200px) {
/* Fixed Tab Menu (桌機/ Desktop Ver) >> Buy (購買) >> Product Single Page */
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar a.button.add-to-cart .icon-line2-handbag {
top: 0px;
}
/* Fixed Tab Menu (桌機/ Desktop Ver) >> Add to (加入購物車) >> Product Single Page */
.B2C-Style nav#product_tab_menu.navbar-fixed-top .navbar-wrap #navbar a.button.add-to-cart i.icon-ok::before {
top: 1px;
}
}
/* 1200 ~ 1500 */
@media (min-width: 1200px) and (max-width: 1500px) {
/* Add to Quote Cart (勾選狀態 >> 加入購物車) (i) >> Product Listing Page */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok {
width: 15px;
}
/* Add to Quote Cart (勾選狀態 >> 加入購物車) (i) >> Product Listing Page */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.addtocart i.icon-ok::before/* Product Recommendation >> .product-desc >> .btn-group >> a.btn.addtocart >> i.icon-ok */,
.B2C-Style #product_lists .btn-primary.addtocart.added i.icon-ok::before,
.B2C-Style #product_lists a.btn.addtocart i.icon-ok::before {
top: 1px;
font-size: 1.1em !important;
}
}
@media (max-width: 1199px) {}
/*************************************************************************************************************************
( G ). 【 Bullet Optimization (before/ after 元件) 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/*************** 【 Listing Bullet (點點) (UL > Li) - Before/ After 】 Bullet 元素套用 *****************/
/* Filter Listing >> Category > Bullet */
.B2C-Style .subcategory li a::before {
font-size: 0.3em;
line-height: 1.1rem;
}
/* li::before >> 圓點 ● */
.B2C-Style #primary-menu ul.menu_body_1 > li.menuitem_success-stories > ul.menu_body_2 > li:not(.last)::before,
.B2C-Style .tab-content li:not(.package-content li)::before {
content: '●';
font-size: .8em;
top: -1px;
font-size: 0.75rem;
top: -0.05rem;
}
/* li::before >> 圓點 ● 位置 ( Mega Menu >> Success Story) */
.B2C-Style #primary-menu ul.menu_body_1 > li.menuitem_success-stories > ul.menu_body_2 > li:not(.last)::before {
font-size: 0.75em;
top: 0px;
font-size: 0.65rem;
top: 1px;
top: 0.1rem;
}
/*************************************************************************************************************************
( H ). 【 Input/ Radio Check Box Style (不包含字樣) 】 >> for 【 Default Style 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* Filter Check Box >> Product Listing Page Side Bar / Search Result Page / 含中間 add to Quote Cart) */
#sidebar .checkmark::after,
.B2C-Style #sidebar input:checked ~ .checkmark::after,
.B2C-Style #filter_form .checkmark::after,
.B2C-Style .container input:checked ~ .checkmark::after {
border: none;
color: #fff;
transform: rotate(0deg);
top: 0;
left: 0;
}
/* Filter Check Box >> Product Listing Page Side Bar / Search Result Page / Single Product */
.B2C-Style .single-product .product-desc .share label .checkmark/* 產品單頁 */,
.B2C-Style #sidebar input:checked ~ .checkmark,
.B2C-Style #filter_form .checkmark,
.B2C-Style .container input:checked ~ .checkmark {
margin-right: 0.5rem;
top: -0.02rem;
}
/* Product Listing Page >> 中間 add to Quote Cart 打勾 (不包含 Filter Check Box -- Side Bar) */
.B2C-Style .checkbox.product-list input:checked ~ .checkmark::after {
top: -4px;
top: -0.25rem;
}
.B2C-Style #sidebar input:checked ~ .checkmark,
.B2C-Style .container input:checked ~ .checkmark {
}
/* (Middle) (中藍色) ATEN Blue-3 (BG) */
.B2C-Style input[type="radio"] {
--active: rgb(0, 92, 170);
--active: #005caa;
--border-hover: rgb(0, 92, 170);
--border-hover: #005caa;
}
/*************************************************************************************************************************
( I ). 【 All Image (Style) 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* 透疊底色特效 (Blend-Mode: Multiply) */
.B2C-Style .compare-modal img/* Compare Model >> Product Image */,
.B2C-Style #search_result .row.result_item a .img-responsive/* Search Result Page >> Result Item > Image */,
.B2C-Style .result_item .img/* Result Item > Image */,
.B2C-Style .product-record-single .sect-divider .product-image img/* Product Listing Page >> 產品縮圖 */,
.B2C-Style .sect-divider div.product-image/* Listing Page >> 圖 */,
.B2C-Style .flexslider .slider-wrap > .slide/* Single Product Page >> 產品圖 (左手邊) */ {
mix-blend-mode: multiply;/* 白色會透過去(不顯示白色) */
}
/* =====================================================================================================
(下拉選單 -1 ) 統一套顏色 >> Select Language Menu (2024)
===================================================================================================== */
/* =======================================================================================================================
(New 下拉選單 -2 >> 新增 Li 合併 Region + Language item) 統一套顏色 >> Select Language Menu (2024)
.region_itn(全球) / .region_nam(北美) / .region_lam(拉美) / .region_ap(泛亞) / .region_eu(歐洲) / .region_af(非洲)
======================================================================================================================== */
/* =====================================================================================================
【 Top Fixed Search Box 】 固定搜尋區塊 >> (.B2C-Style >> 2024)
===================================================================================================== */
@media (min-width: 1200px) {
.B2C-Style #header #top-search form .btn-search3 {
z-index: 1;/* 不設定會被 Input bg color 覆蓋 */
}
/* Fixed Search Box (Original) >> Input 輸入框 (無 Mobile Ver.) */
.B2C-Style.top-search-open #top-search form input,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input {
border: 1px solid #c3c6cb !important;
}
/* Fixed Search Box (hover 滑過輸入) >> Input 輸入框 (無 Mobile Ver.) */
.B2C-Style.top-search-open #top-search form input:hover,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input:hover {
border: 1px solid #000722 !important;
filter: drop-shadow(1px 3px 3px rgba(48, 107, 125, 0.25));
}
/* Fixed Search Box (Focus 聚焦輸入) >> Input 輸入框 (無 Mobile Ver.) */
.B2C-Style.top-search-open #top-search form input:focus,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input:focus {
border: 1px solid #004276 !important;
border: 1px solid #005baa !important;
}
/*.B2C-Style.top-search-open #top-search form input:focus,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input:focus,*/
.B2C-Style.top-search-open #top-search form input:hover,
.B2C-Style.top-search-open #header.dark.transparent-header:not(.sticky-header) #header-wrap:not(.not-dark) form input:hover {
filter: drop-shadow(1px 3px 3px rgba(48, 107, 125, 0.25));
filter: drop-shadow(1px 3px 3px rgba(48, 107, 125, 0.15));
}
}
/* =====================================================================================================
【 Footer Bar 】 固定搜尋區塊 >> (.B2C-Style >> 2024)
===================================================================================================== */
/* Foot Bar (外框) + Foot Bar (內部項目) */
.B2C-Style #home_footer_bar .bar_item,
.B2C-Style #home_footer_bar {
display: flex !important;
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
justify-content: center; /* 水平置中 */
}
/* Foot Bar (外框) */
.B2C-Style #home_footer_bar {
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
}
/* Foot Bar (內部項目) */
.B2C-Style #home_footer_bar .bar_item img {
margin: 0 auto;
}
/* 大螢幕 (981px 以上) - 橫排顯示 */
@media (min-width: 981px) {
/* Foot Bar (外框) + Foot Bar (內部項目) >> 限制高度 */
.B2C-Style #home_footer_bar .bar_item,
.B2C-Style #home_footer_bar {
max-height: 200px;
}
/* Foot Bar (內部項目) >> 限制高度 >> 縮小內容 */
.B2C-Style #home_footer_bar .bar_item:has(.img-responsive) .row {
transform: scale(0.87);
}
/* Foot Bar (外框) */
.B2C-Style #home_footer_bar {
flex-direction: row; /* 橫排 */
flex-wrap: nowrap;/* 若 items 過多也不換行, 會壓縮items (若有需要讓所有的 flex items 元素壓縮在同一行) */
}
/* Foot Bar (內部項目) */
.B2C-Style #home_footer_bar .bar_item {
flex: 1; /* 平均分配空間 */
}
}
/* 768 ~ 980 */
@Media (min-width: 768px) and (max-width: 980px) {
.B2C-Style #home_footer_bar .bar_item a .row:has(img, h2),
.B2C-Style #home_footer_bar a .row:has(img, h2),
.B2C-Style #home_footer_bar .bar_item a:has(img, h2),
.B2C-Style #home_footer_bar a:has(img, h2) {
display: flex;
align-items: center;
justify-content: center;
}
.B2C-Style #home_footer_bar .bar_item .col-sm-4:has(img) {
/* padding: 0 1.2rem;
padding-left: 1.2rem; */
padding-right: 1.2rem;
}
}
/* 小螢幕 (980px 以下) - 垂直排列 */
@media (max-width: 980px) {}
/* 820 以下 */
@Media (max-width: 820px) {}
/* 768 以下 */
@Media (max-width: 767px) {
/* Foot Bar (外框) + Foot Bar (內部項目) */
.B2C-Style #home_footer_bar .bar_item,
.B2C-Style #home_footer_bar {
width: 100%; /* 全寬 */
}
/* Foot Bar (外框) */
.B2C-Style #home_footer_bar {
flex-direction: column; /* 垂直排列 */
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
}
/* Foot Bar (內部項目) >> a */
.B2C-Style #home_footer_bar .bar_item a {
display: block !important; /* 保持 block，不要改成 flex */
width: 100% !important; /* 小螢幕時使用 100% */
max-width: none !important; /* 移除最大寬度限制 */
margin-left: auto !important; /* 左右都 auto 實現置中 */
margin-right: auto !important;
text-align: center; /* 確保內容置中 */
}
/* Footer Bar >> .bar_item */
.B2C-Style #home_footer_bar .bar_item {
border: none;
}
/* 【 Footer Bar 】(主深藍色調) */
.B2C-Style #home_footer_bar .bar_item {
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: none !important;
border-right: none !important;
}
}
/* 480以下 */
@Media (max-width: 480px) {}
/*************************************************************************************************************************
( E ). 【 Mega Menu Optimization 】 (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* AD Banner >> H2 >> (Mega Menu / Right Side) */
.B2C-Style #primary-menu .mega-menu-advertisements > .mega-menu-advertisement > .mega-menu-advertisement-body > h2.mega-menu-advertisement-title {
padding: 5px 0;
}
/* AD Banner >> image 圖 (Single/ Double Size) */
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-image,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-image {
overflow: hidden;
}
/* AD Banner >> CTA Button >> (Single/ Double Size) */
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button {
display: block;
text-align: center;
/*background-color: transparent;
transition: all 0.3s ease-in-out 0s;
color: #005caa;
border: 2px solid #005caa;
border-radius: 0.3rem;*/
padding-right: 23px;
padding-left: 23px;
height: 2.5rem;
transition: all 0.3s ease-in-out 0s;
}
/* AD Banner >> CTA Button::after >> (Single/ Double Size) */
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::after,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::before,
.B2C-Style #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after {
top: 0.3rem;
position: relative;
line-height: 1.7rem;
font-weight: 500;
transition: all 0.3s ease-in-out 0s;
left: 0;
width: auto;
display: inline-block;
}
/*************************************************************************************************************************
( F ). 【 Default Page Optimization 】 (一般 Top Blur Bar Banner 頁面) (.B2C-Style >> 2024)
**************************************************************************************************************************/
/* ATEN Grey-1 (更淺色灰) (Light) (BG) */
.B2C-Style #top-bar {
background-color: #f3f4f6;
background-color: rgba(243, 244, 246, 0.7);
background-color: #f6f7f8;
background-color: rgba(246, 247, 248, 1.0);
}
/* 【 通用樣式 】Top Blur Bar Banner 底色 (變 ATEN 中藍) >> Default Content + Dynamic Blue Bar */
.B2C-Style section.Banner-BG-Blue section.breadcrumb_block/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block/* Dynamic Template Page */,
.B2C-Style section#breadcrumb/* Default Content Page */ {
/*
background: url("https://www.aten.com/file/template/1/images/bg_blue_page.jpg") #014f76 no-repeat cover;
background: url("//assets.aten.com/webpage/shared/Showroom/BG/Location_Banner_BG-4.jpg") #074576 no-repeat 50% 40%;
background-color: rgba(5, 58, 100, 0.85);
*/
background: #074576;
background: rgba(7,69,118, 1.0);
/* 太深色 background: rgba(5, 55, 100, 1.0); */
background-repeat: no-repeat;
background-size: cover !important;/* 圖片 Cover */
background-size: 100% auto !important;/* 圖片寬 100%, 高 Auto */
background-position: 50% 50%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 0;
overflow: hidden;
}
/* 【 通用樣式 】Top Blur Bar Banner (變 ATEN 中藍) + 圖片中藍色遮罩 >> 寬度一致 ( Default Content + Dynamic Blue Bar) */
.B2C-Style section#breadcrumb .boxed-slider/* Default Content Page */,
.B2C-Style section#breadcrumb/* Default Content Page */,
.B2C-Style section.Banner-BG-Blue section.breadcrumb_block .boxed-slider/* Dynamic Template Page */,
.B2C-Style section.Banner-BG-Blue section.breadcrumb_block/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block .boxed-slider/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block {
width: 100%;
}
/* 【 通用樣式 】Top Blur Bar Banner (變 ATEN 中藍) + 圖片中藍色遮罩 >> 高度一致 ( Default Content + Dynamic Blue Bar) */
.B2C-Style section.breadcrumb_block.Banner-BG-Blue::before/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block::before/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block/* Dynamic Template Page */,
.B2C-Style section#breadcrumb.Banner-BG-Blue::before/* Default Content Page */,
.B2C-Style section#breadcrumb::before/* Default Content Page */,
.B2C-Style section#breadcrumb/* Default Content Page */ {
min-height: 170px; /* 舊版 */
min-height: 180px;
}
/*【 需指定客製 】Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar (.Banner-BG-Blue 背景圖 >> 中藍色遮罩)*/
.B2C-Style section#breadcrumb.resources.feature-articles::before/* Resources > Feature-articles Page (Default Content) */,
.B2C-Style section#breadcrumb.feature-articles::before/* Feature-articles Page (Default Content) */,
.B2C-Style section#breadcrumb.search::before/* Search Result Page (Default Content) */,
.B2C-Style section#breadcrumb.showroom.locations::before/* Show Room Location Page (Default Content) */,
.B2C-Style section#breadcrumb.showroom::before/* Show Room Location Page (Default Content) */,
.B2C-Style section#breadcrumb.Banner-BG-Blue::before/* Default Content Page */,
.B2C-Style section.Banner-BG-Blue section.breadcrumb_block::before/* Dynamic Template Page */,
.B2C-Style section.breadcrumb_block::before/* Dynamic Template Page */ {
content: '';
background-color: rgba(7,69,118,.85);
background-color: rgba(5, 58, 100, 0.85);
background-color: rgba(5, 58, 100, 0.85);
background-color: rgba(5, 55, 100, 0.85);
display: block;
position: absolute;
width: 100%;
}
/* Top Blur Bar Banner (變 ATEN 中藍 >> banner 上 Title 文字 */
.B2C-Style section.breadcrumb_block .boxed-slider/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .boxed-slider/* Default Content Page */ {
/*padding-top: 2%;
padding-top: calc(170px/3.35);*/
}
/* H1 >> Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar >> H1 Title (變 ATEN 中藍) */
.B2C-Style section.breadcrumb_block .title h1/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .title h1/* Default Content Page */ {
font-size: 3.125rem; /* 此使用 Html 基本 font-size 為 [16px] x [3.125rem] = 50px) */
line-height: 1.54;
position: relative;
z-index: 1; /* 浮出 >> 避免被 title::after 蓋住 */
}
.B2C-Style section#breadcrumb .boxed-slider .container .title::after/* Default Content Page */,
.B2C-Style section.breadcrumb_block .title::after/* Dynamic Template Page */ {
/*
font-family: "FontAwesome" !important;
content: "\f0d7";
font-size: 1em;
display: inline-block;
position: relative;
width: 3px;
height: 4vh;
background-color: #80ba2d;
background-color: rgb(128, 186, 45);
margin-right: 3%;
top: 0;
*/
/*
content: "";
background-size: 11px 11px;
display: inline-block;
position: absolute;
width: 50px;
height: 50px;
left: -30px;
top: -10px;
background-size: 11px 11px;
left: -6.5%;
top: -11%;
z-index: 0;
transition: 0.5s all ease-in 0.1s;
background-image: radial-gradient(rgb(128, 186, 45) 15%,transparent 25%);
-webkit-transition: 0.5s all ease-in 0.1s;
transition: 0.5s all ease-in 0.1s;
*/
}
/* 麵包屑路徑 + Icon 居中 >> arrow Icon ( Default Content + Dynamic Blue Bar) */
.B2C-Style .product-head ol.breadcrumb > li,
.B2C-Style .desktop-product-header ol.breadcrumb > li,
.B2C-Style #product_detail ol.breadcrumb > li,
.B2C-Style ol.breadcrumb > li,
.B2C-Style ol.breadcrumb {
display: flex;
height: unset !important;
}
.B2C-Style .product-head ol.breadcrumb > li,
.B2C-Style .desktop-product-header ol.breadcrumb > li,
.B2C-Style #product_detail ol.breadcrumb > li {
display: flex !important;
}
/* 麵包屑路徑居中 ( Default Content + Dynamic Blue Bar) */
.B2C-Style ol.breadcrumb {
align-items: center; /* 項目垂直置中 */
align-content: center; /* 垂直置中 */
/* justify-content: center; 水平置中 */
flex-wrap: wrap; /* 設為 wrap，則不會壓縮items，如果items過多就換行 (若不設定會將所有的flex items壓縮在同一行) */
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* 【 需指定客製 】 Top Blur Bar Banner::before 中藍色漸層遮罩 ( Default Content + Dynamic Blue Bar) */
.B2C-Style section#breadcrumb.resources.feature-articles::before/* Resources > Feature-articles Page (Default Content) */,
.B2C-Style section#breadcrumb.feature-articles::before/* Feature-articles Page (Default Content) */,
.B2C-Style section#breadcrumb.search::before/* Search Result Page (Default Content) */,
.B2C-Style section#breadcrumb.showroom.locations::before/* Show Room > Location Page (Default Content) */,
.B2C-Style section#breadcrumb.showroom::before/* Show Room Page (Default Content) */,
.B2C-Style section#breadcrumb.Banner-BG-Blue::before/* Default Content Page */,
.B2C-Style section.Banner-BG-Blue section.breadcrumb_block::before/* Dynamic Template Page */ {
filter: brightness(100%) contrast(110%);/* 圖片對比加強 */
/* 較淺色 */
background: -moz-linear-gradient(135deg, rgba(7, 69, 118,0.999) 0%,rgba(8, 55, 94,0.7) 58%,rgba(7, 69, 118,0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(7, 69, 118,0.999) 0%,rgba(8, 55, 94,0.7) 58%,rgba(7, 69, 118,0.999) 100%) !important;
background: linear-gradient(135deg, rgba(7, 69, 118, 0.999) 0%,rgba(8, 55, 94,0.7) 58%, rgba(7, 69, 118,0.999) 100%) !important;
/* 較深色 */
background: -moz-linear-gradient(135deg, rgba(5, 55, 100, 0.999) 0%,rgba(8, 55, 94,0.85) 58%,rgba(5, 55, 100, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(5, 55, 100, 0.999) 0%,rgba(8, 55, 94,0.85) 58%,rgba(5, 55, 100, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(5, 55, 100, 0.999) 0%,rgba(8, 55, 94,0.85) 58%, rgba(5, 55, 100, 0.999) 100%) !important;
/* 較中深到淺色 */
background: -moz-linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(6, 56, 97, 0.87) 58%,rgba(4, 70, 122, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(6, 56, 97, 0.87) 58%,rgba(4, 70, 122, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(6, 56, 97, 0.87) 58%, rgba(4, 70, 122, 0.999) 100%) !important;
/* 較中深到淺色 (多一層) */
background: -moz-linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(4, 70, 122, 0.9) 58%, rgba(4, 70, 122, 0.91) 60%, rgba(4, 70, 122, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(4, 70, 122, 0.9) 58%, rgba(4, 70, 122, 0.91) 60%, rgba(4, 70, 122, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(4, 70, 122, 0.999) 0%,rgba(4, 70, 122, 0.9) 58%, rgba(4, 70, 122, 0.91) 60%, rgba(4, 70, 122, 0.999) 100%) !important;
/* 較黑深到淺色-1 (多一層) */
background: -moz-linear-gradient(135deg, rgba(0, 66, 118, 0.999) 0%,rgba(0, 66, 118, 0.9) 58%, rgba(0, 66, 118, 0.91) 60%, rgba(0, 66, 118, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(0, 66, 118, 0.999) 0%,rgba(0, 66, 118, 0.9) 58%, rgba(0, 66, 118, 0.91) 60%, rgba(0, 66, 118, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(0, 66, 118, 0.999) 0%,rgba(0, 66, 118, 0.9) 58%, rgba(0, 66, 118, 0.91) 60%, rgba(0, 66, 118, 0.999) 100%) !important;
/* 較黑深到淺色-2 (多一層) */
background: -moz-linear-gradient(135deg, rgba(1, 69, 123, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 69, 123, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(1, 69, 123, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 69, 123, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(1, 69, 123, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 69, 123, 0.999) 100%) !important;
/* 較黑深到淺色-2 (多一層) */
background: -moz-linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.9) 50%, rgba(1, 69, 123, 0.91) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
/* 較黑深到淺色-3 (多一層)
background: -moz-linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.89) 50%, rgba(1, 69, 123, 0.9) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
background: -webkit-linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.89) 50%, rgba(1, 69, 123, 0.9) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
background: linear-gradient(135deg, rgba(1, 59, 105, 0.999) 0%,rgba(1, 69, 123, 0.89) 50%, rgba(1, 69, 123, 0.9) 60%, rgba(1, 59, 105, 0.999) 100%) !important;
*/
}
/* 麵包屑 >> 最後一個明顯亮白 ( Default Content + Dynamic Blue Bar) */
.B2C-Style section.breadcrumb_block .breadcrumb li:last-child a/* Dynamic Template */,
.B2C-Style section#breadcrumb .breadcrumb li:last-child a/* Default Content */ {
/* color: rgb(255, 255, 255, 1.0) !important;
opacity: 1 !important; */
}
}
/* 769 以上 */
@media (min-width: 769px) {
/* Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar >> 內容物垂直居中 + 讓子層物件各自齊左右 */
.B2C-Style section.breadcrumb_block .boxed-slider .container/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .boxed-slider .container/* Default Content Page */ {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-between; /* 讓子層物件各自齊左右 */
}
/* Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar >> 子層標題右邊撐滿空間 >> 讓右邊麵包屑物件靠右 */
.B2C-Style section.breadcrumb_block .boxed-slider .container .title/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .boxed-slider .container .title/* Default Content Page */ {
margin-right: auto; /* 讓右邊麵包屑物件靠右 */
}
}
/* 1023 以下 */
@media (max-width: 1023px) {
/* H1 >> Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar >> H1 Title (變 ATEN 中藍) */
.B2C-Style section.breadcrumb_block .title h1/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .title h1/* Default Content Page */ {
font-size: 3em !important;
font-size: 2.9rem !important;
line-height: 1.4em !important;
}
}
/* 811 以下 */
@media (max-width: 811px) {
/* H1 字級大小 (Top Blur Bar Banner/ 變 ATEN 中藍) + Dynamic Blue Bar >> H1 Title */
.B2C-Style section.breadcrumb_block .title h1/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .title h1/* Default Content Page */ {
font-size: 2.6em !important;
font-size: 2.7rem !important;
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* Top Blur Bar Banner (Default + Dynamic Template) >> breadcrumd 路徑 >> 寬度百分比 */
.B2C-Style section.breadcrumb_block .boxed-slider .breadcrumb/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .breadcrumb/* Default Content Page */ {
width: 100% !important;
height: auto;
float: none !important;
text-align: center;
}
/* H1 字級大小 (Top Blur Bar Banner/ 變 ATEN 中藍) + Dynamic Blue Bar >> H1 Title */
.B2C-Style section.breadcrumb_block .title h1/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .title h1/* Default Content Page */ {
font-size: 2.5em !important;
font-size: 2.6rem !important; /* 此使用 Html 基本 font-size 為 [16px] x [2rem] = 32px) */
}
/* Top Blur Bar Banner (變 ATEN 中藍) + Dynamic Blue Bar >> 子層標題右邊撐滿空間 >> 取消讓右邊麵包屑物件靠右 */
.B2C-Style section.breadcrumb_block .boxed-slider .container .title/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .boxed-slider .container .title/* Default Content Page */ {
margin: 0px;
float: none;
text-align: center;
}
.B2C-Style ol.breadcrumb {
justify-content: center;/* 垂直/ 水平居中 */
flex-wrap: wrap;/* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
margin-top: 2% !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* H1 字級大小 (Top Blur Bar Banner/ 變 ATEN 中藍) + Dynamic Blue Bar >> H1 Title */
.B2C-Style section.breadcrumb_block .title h1/* Dynamic Template Page */,
.B2C-Style section#breadcrumb .title h1/* Default Content Page */ {
font-size: 2.1em !important;
font-size: 2.2rem !important; /* 此使用 Html 基本 font-size 為 [16px] x [2rem] = 32px) */
}
}
/*************************************************************************************************************************
【 Blue Banner Background img 】>> Top ATEN Blur Bar Banner (with 藍底圖)
>> #breadcrumb加入各別 class name 以設定 background-img, 如: #breadcrumb.Banner-BG-Blue.feature-articles
>> 用 JS 判斷網址 (倒數兩層) (ex:.../resources/feature-articles/) > 自動抓取後在 ##breadcrumb 加入 class name.
**************************************************************************************************************************/
/* 【 需指定客製 】Feature-articles Page 底圖 (Top Blur Bar BG) >> 【 Default Content Page 】 */
.B2C-Style section#breadcrumb.resources.feature-articles,
.B2C-Style section#breadcrumb.feature-articles {
background: url(https://media.gettyimages.com/id/1219980553/photo/online-news-on-a-smartphone-and-laptop-woman-reading-news-or-articles-in-a-mobile-phone.webp?s=1024x1024&w=gi&k=20&c=lDKMMLSqfI_jTMgRVrDIJdIZjsfFjuZxyU7ffAaEvhI=) #074576 no-repeat 50% 50% / cover !important;
}
/* 【 需指定客製 】Search Result Page 底圖 (Top Blur Bar BG) >> 【 Default Content Page 】 */
.B2C-Style section#breadcrumb.search {
background: url(https://media.gettyimages.com/id/681625520/photo/woman-searching-information-in-internet-concept.jpg?s=2048x2048&w=gi&k=20&c=tc0hgUjhNRw_i2XFTeOeveRRaybUIUfMRbV150tT8SU=) #074576 no-repeat 50% 30% / cover !important;
background: url(https://media.gettyimages.com/id/1342186559/photo/a-business-man-using-a-computer-to-manage-documents-online-document-communication-database.jpg?s=2048x2048&w=gi&k=20&c=TkAonWyT4wDovDfKqF-p6eoMf-FmxzqNPZeFWAZxWrw=) #074576 no-repeat 50% 50% / cover !important;
}
/* 【 需指定客製 】.Showroom-Location 底圖 (Top Blur Bar BG) >> 【 Default Conrent 】 */
.B2C-Style section#breadcrumb.showroom.locations,
.B2C-Style section#breadcrumb.showroom {
background: url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Blue_Top-Banner_New-Theme/Blue-Top-Banner_New-Theme_Showroom_BG.jpg) #074576 no-repeat 50% 45% / 100% auto !important;
}
/* 【 需指定客製 】(暫不使用 ).Select-Language 底圖 (Top Blur Bar BG) >> 【 Default Conrent + Dynamic Template 】 */
.B2C-Style section.Banner-BG-Blue.Select-Language section.breadcrumb_block,
section.Banner-BG-Blue.Select-Language-Blue section.breadcrumb_block,
.B2C-Style section#breadcrumb.select-region/* Default Content Page */ {
background: url(https://media.gettyimages.com/id/1327522709/vector/halftone-world-map.jpg?s=2048x2048&w=gi&k=20&c=lXJx45NQYlsP2X9q-h6XedYkmNOl1AtbTSGE0eEWvM8=) #074576 no-repeat 50% 40% / 100% auto !important;
}
/* 768 以下 */
@media (max-width: 768px) {
/* 【 統一套用 】All section#breadcrumb + .Select-Language 底圖 (Top Blur Bar BG) >> 【 Dynamic Template 】 */
.B2C-Style section.Banner-BG-Blue.Select-Language section.breadcrumb_block,
.B2C-Style section#breadcrumb.select-region,
.B2C-Style section#breadcrumb {
background-size: cover !important;
background-position: 50% 50% !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
}
/*************************************************************************************************************************
( ?? ). 【 Home Page Optimization】 (.B2C-Style >> 2024)
======================================================================================================================== */
/*************** 【 Home page Banner(大) (CPC Product) 】 >> (.B2C-Style) *****************/
/* Slide Banner >> 垂直置中 */
/* 居中 Slide Banner 下一層 >> .text-content (包圖文/ 左右 Banner 架構不同沒包)
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) .text-center,
*/
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */ {
display: flex;
align-items: flex-start;
align-items: center;
}
/* Slide Banner >> 左右箭頭 + i >> 垂直居中 */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i,
.B2C-Style .swiper_wrapper #slider-arrow-right i,
.B2C-Style .swiper_wrapper #slider-arrow-left i,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right,
.B2C-Style .swiper_wrapper #slider-arrow-left {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Slide Banner >> 左右箭頭 */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right,
.B2C-Style .swiper_wrapper #slider-arrow-left {
background: transparent;
top: 50%;
transform: translateY(-50%);
width: 65px;
height: auto !important;
margin-top: 0px;
padding: 0;
}
/*************************************************************************************************************************
( ?? ). 【Home_Promotion_Item/ 滑動選項卡 (Trends)】 (.B2C-Style >> 2024)
>> #home_promotion_top .promo_item 【預設滿版】 (.hover_block 卡片往上滑)
>> #home_promotion_top.promo_block .promo_item 【非滿版】 (.hover_block 卡片往上滑)
======================================================================================================================== */
/* #home_promotion_top (一般滿版用) >> .promo_item (兩個一排) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block,
.B2C-Style #home_promotion_top .promo_item .hover_block,
.B2C-Style .promo_block .promo_item .hover_block {
z-index: 1;
overflow-y: hidden;
height: 100%;
width: 100%;
padding-top: 3%;
padding-left: 6%;/* 滿版時 */
padding-bottom: 0;
max-height: 80px;/* 沒滑動時(在底部) */
padding-top: calc(80px / 2 - 2.5%); /* 高度 80px 的一半再 - 2.5% (上邊距) */
bottom: 0;/* 在底部 */
}
/* #home_promotion_top (.col-md-12 非滿版用) >> .promo_item (一個一排) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_itemL:is(.col-lg-12, .col-md-12) .hover_block,
.B2C-Style #home_promotion_top .promo_itemL:is(.col-lg-12, .col-md-12) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-12, .col-md-12) .hover_block,
.B2C-Style #home_promotion_top .col-md-12.promo_item .hover_block,
.B2C-Style .promo_block .col-md-12.promo_item .hover_block {
padding-top: 1.5%;
max-height: 80px;/* 沒滑動時(在底部) */
padding-top: calc(80px / 2 - 1.3%);
}
/* #home_promotion_top (.col-md-6 非滿版用) >> .promo_item (兩個一排) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style #home_promotion_top .col-md-6.promo_item .hover_block,
.B2C-Style .promo_block .col-md-6.promo_item .hover_block {
padding-top: 3%;
max-height: 80px;/* 沒滑動時(在底部) */
padding-top: calc(80px / 2 - 2.5%); /* 高度 80px 的一半再 - 2.5% (上邊距) */
}
/* #home_promotion_top (col-lg-4 & .col-md-4 / 非滿版用) >> .promo_item (四個一排) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style #home_promotion_top .col-md-4.promo_item .hover_block,
.B2C-Style .promo_block .col-md-4.promo_item .hover_block {
max-height: 70px;
padding-top: 5%;
}
/* #home_promotion_top (col-lg-3 & .col-md-3 / 非滿版用) >> .promo_item (四個一排) */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style #home_promotion_top .col-md-3.promo_item .hover_block,
.B2C-Style .promo_block .col-md-3.promo_item .hover_block {
padding-top: 5%;
max-height: 70px;
padding-top: calc(70px / 2 - 5.3%); /* 高度 70px 的一半再 - 5.3% (上邊距) */
padding-left: 6.5%;
max-height: 75px;
padding-top: calc(75px / 2 - 5.8%); /* 高度 70px 的一半再 - 5.3% (上邊距) */
max-height: 100px;
}
/* #home_promotion_top (一般滿版用) >> .promo_item【滑過】 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top .promo_item:hover .hover_block,
.B2C-Style .promo_block .promo_item:hover .hover_block {
z-index: 1;
bottom: 0;
max-height: 100%;
padding-top: 5%;
backdrop-filter: blur(15px);
}
/* #home_promotion_top (.promo_block 非滿版用)【大 + 小】 >> .promo_item */
.B2C-Style [id*="home_promotion_"].promo_block.promo_block .promo_item:nth-child(2),
.B2C-Style #home_promotion_top.promo_block .promo_item:nth-child(2),
.B2C-Style .promo_block .promo_item:nth-child(2) {
border-right: unset;
}
/* #home_promotion_top (.promo_block 非滿版用)【.col-md-6 & .col-md-12/ 大 + 小】 >> .promo_item */
.B2C-Style #home_promotion_top.promo_block .promo_item:is(.col-md-6, .col-md-12) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-md-6, .col-md-12) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-md-6, .col-md-12) .hover_block,
.B2C-Style .promo_block [class*="col-"].promo_item .hover_block,
.B2C-Style .promo_block .promo_item.col-md-12 .hover_block {
padding-left: 3%;
}
/* #home_promotion_top (.promo_block 非滿版用)【小】 >> .promo_item (兩個一排) */
.B2C-Style #home_promotion_top.promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .promo_block .promo_item.col-md-6 .hover_block {
padding-left: 6%;
padding-left: calc(3% + 3%);/* 大的靠左 3% + 多出 3% */
}
/* #home_promotion_top (.promo_block 非滿版用)【單一/ 較寬/ 大】 >> .promo_item (一個一排) */
.B2C-Style #home_promotion_top .col-md-12.promo_item .hover_block,
.B2C-Style [id*="home_promotion_"] .col-md-12.promo_item .hover_block,
.B2C-Style .col-md-12.promo_item .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-md-12) .hover_block,
.B2C-Style [id*="home_promotion_"] .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-md-12) .hover_block {
padding-top: 1.5%;
padding-top: calc(80px / 2 - 1.3%);
}
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block p,
.B2C-Style #home_promotion_top .promo_item .hover_block p,
.B2C-Style .promo_block .promo_item .hover_block p {
margin-bottom: 1.7rem !important;
margin-bottom: 1.4rem !important;
}
/* .hover_block 【Hover/ 滑過時/ .col-md-12 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block .col-md-12.promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block .col-md-12.promo_item:hover .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-md-12):hover .hover_block,
.B2C-Style .promo_block .col-md-12.promo_item:hover .hover_block {
padding-top: calc(80px / 2 - 0%);
}
/* .hover_block 【Hover/ 滑過時/ .col-lg-4, .col-md-4 非滿版用】 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block {
padding-top: calc(70px / 2 - 0%);
}
/* .hover_block 【Hover/ 滑過時/ .col-lg-3, .col-md-3 非滿版用】 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block {
padding-top: calc(75px / 2 - 3%);
}
/* .hover_block 【Not Hover/ 尚未滑過】>> H3 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block h3,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block h3,
.B2C-Style #home_promotion_top .promo_item .hover_block h3,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h3,
.B2C-Style .promo_block .promo_item .hover_block h3 {
}
/* .hover_block 【Hover/ 滑過時】>> H3 */
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:hover .hover_block h3,
.B2C-Style #home_promotion_top.promo_block .promo_item:hover .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:hover .hover_block h3,
.B2C-Style [id*="home_promotion_"] .promo_item:hover .hover_block h3,
.B2C-Style .promo_block .promo_item:hover .hover_block h3 {
margin-bottom: 15px !important;
margin-bottom: 1rem !important;
}
/*************************************************************************************************************************
( ?? ). 【Home_Promotion_Item/ 不滑動選項卡 (.promo_block.no-slide)】 (.B2C-Style >> 2024)
>> #home_promotion_top.promo_block.no-slide .promo_item 【非滿版】 >> 直接 show 文字/按鈕 >> 不會滑動 (背景動)
======================================================================================================================== */
/* .simple-slide/ .hover_block【Not Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item,
.B2C-Style .promo_block.simple-slide .promo_item,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item .hover_block,
/* .no-slide/ .hover_block【Not Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item,
.B2C-Style .promo_block.no-slide .promo_item,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
overflow: hidden; /* 隱藏溢出內容 */
box-sizing: border-box; /* 讓 padding 和 border 包含在元素的總寬度和高度內 */
}
/* .simple-slide/ .hover_block【Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover,
.B2C-Style .promo_block.simple-slide .promo_item:hover,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item,
.B2C-Style .promo_block.simple-slide .promo_item,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item .hover_block,
/* .no-slide/ .hover_block【Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
display: flex;
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: flex-start; /* 垂直置頂 >> 作用於多行（或多列）的子項目 */
justify-content: left; /* 水平置左 */
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
flex-direction: row; /* 水平排列 (所有物件排在一行) */
width: 100%;
transform: scale(1) !important;
}
/* .simple-slide/ .hover_block【Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style .marketing-material .promo_block .promo_item:has(h3) .hover_block p,
.B2C-Style .marketing-material .promo_block .promo_item .hover_block p,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover,
.B2C-Style .promo_block.simple-slide .promo_item:hover,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item,
.B2C-Style .promo_block.simple-slide .promo_item,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item .hover_block,
/* .no-slide/ .hover_block【Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
/* 會抖動 transition: all 0.4s ease-in-out 0s; */
}
/* .no-slide/ .hover_block【Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
height: 100%;
max-height: unset !important;
padding-top: 6% !important;
/* transition: all 0.3s; */
}
/* .no-slide/ .hover_block 【Hover/ 滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block {
transform: scale(1.015) !important;
/* transition: all 0.3s; */
}
/* .simple-slide/ .hover_block【Not Hover + Hover/ 滑動 + 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover,
.B2C-Style .promo_block.simple-slide .promo_item:hover,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item,
.B2C-Style .promo_block.simple-slide .promo_item,
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item .hover_block {
/* padding-top: 8% !important; */
}
/* .no-slide/ .hover_block >> .promo_item 【Not Hover/ 不滑動選項卡(尚未滑過)】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item,
.B2C-Style .promo_block.no-slide .promo_item {
/*
transform: scale(1) !important;
transition: all 0.4s ease-in-out 0s;
*/
}
/* .no-slide/ .hover_block >> .promo_item:hover 【Hover/ 滑動選項卡(滑過時)】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover,
.B2C-Style .promo_block.no-slide .promo_item:hover {
/*
transform: scale(1.015) !important;
transition: all 0.3s;
*/
}
/* .simple-slide/ .hover_block 【Not Hover/ 不滑動選項卡(尚未滑過)】 */
.B2C-Style [id*="home_promotion_"].promo_block.simple-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.simple-slide .promo_item .hover_block,
.B2C-Style .promo_block.simple-slide .promo_item .hover_block,
/* .no-slide/ .hover_block 【Not Hover/ 不滑動選項卡(尚未滑過)】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
/* 偏藍色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.1) 30%, rgba(0, 7, 35, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.1) 30%, rgba(0, 7, 35, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.1) 30%, rgba(0, 7, 35, 0.7) 100%);
/* 偏藍色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.05) 30%, rgba(0, 7, 35, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.05) 30%, rgba(0, 7, 35, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 7, 35, 0.0) 0%, rgba(0, 7, 35, 0.05) 30%, rgba(0, 7, 35, 0.7) 100%);
/* 偏黑色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 100%);
/* 偏黑色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.7) 100%);
/* 偏黑色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.7) 100%);
/* filter: contrast(100%) brightness(100%); */
}
/* .no-slide/ .hover_block 【Hover/ 滑動選項卡(滑過時)】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block {
backdrop-filter: blur(30px);
backdrop-filter: blur(20px);
/* 偏藍色 >> 下透明 */
background: -moz-linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 30%, rgba(0, 7, 35, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 30%, rgba(0, 7, 35, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 30%, rgba(0, 7, 35, 0.7) 100%);
background: -moz-linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 20%, rgba(0, 7, 35, 0.7) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 20%, rgba(0, 7, 35, 0.7) 100%);
background: linear-gradient(-25deg, rgba(0, 7, 35, 0.1) 0%, rgba(0, 7, 35, 0.3) 20%, rgba(0, 7, 35, 0.7) 100%);
background: -moz-linear-gradient(-25deg, rgba(0, 7, 35, 0.3) 0%, rgba(0, 7, 35, 0.5) 20%, rgba(0, 7, 35, 0.8) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 7, 35, 0.3) 0%, rgba(0, 7, 35, 0.5) 20%, rgba(0, 7, 35, 0.8) 100%);
background: linear-gradient(-25deg, rgba(0, 7, 35, 0.3) 0%, rgba(0, 7, 35, 0.5) 20%, rgba(0, 7, 35, 0.8) 100%);
background: -moz-linear-gradient(-25deg, rgba(0, 15, 75, 0.3) 0%, rgba(0, 15, 75, 0.5) 20%, rgba(0, 15, 75, 0.8) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 15, 75, 0.3) 0%, rgba(0, 15, 75, 0.5) 20%, rgba(0, 15, 75, 0.8) 100%);
background: linear-gradient(-25deg, rgba(0, 15, 75, 0.3) 0%, rgba(0, 15, 75, 0.5) 20%, rgba(0, 15, 75, 0.8) 100%);
background: -moz-linear-gradient(-25deg, rgba(0, 20, 65, 0.3) 0%, rgba(0, 20, 65, 0.5) 20%, rgba(0, 20, 65, 0.8) 100%);
background: -webkit-linear-gradient(-25deg, rgba(0, 20, 65, 0.3) 0%, rgba(0, 20, 65, 0.5) 20%, rgba(0, 20, 65, 0.8) 100%);
background: linear-gradient(-25deg, rgba(0, 20, 65, 0.3) 0%, rgba(0, 20, 65, 0.5) 20%, rgba(0, 20, 65, 0.8) 100%);
/* filter: contrast(110%) brightness(100%); */
}
/* .no-slide/ .hover_block 【Hover/ 滑過時/ .col-lg-3, .col-md-3 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
/* .no-slide/ .hover_block 【Hover/ 滑過時/ .col-lg-4, .col-md-4 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-4, .col-md-4) .hover_block,
/* .no-slide/ .hover_block 【Hover/ 滑過時/ .col-lg-6, .col-md-6 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
/* .no-slide/ .hover_block 【Not Hover & Hover/ 滑動 & 不滑動選項卡】 >> Padding top */
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12):hover .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item .hover_block {
padding-top: 7% !important;
}
/* .no-slide/ .hover_block 【Hover & Not Hover/ 滑動 & 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block h3,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block h3,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block h3,
.B2C-Style .promo_block.no-slide .promo_item .hover_block h3 {
margin-bottom: 1rem !important;
}
/* .no-slide/ .hover_block 【Hover & Not Hover/ 滑動 & 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block p,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block p,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block p,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block p,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block p,
.B2C-Style .promo_block.no-slide .promo_item .hover_block p {
width: 100%;
margin-bottom: 2rem !important;
}
/* 992 以上 */
@Media (min-width: 992px) {
/* .no-slide/ .hover_block 【Not Hover & Hover/ 滑動 & 不滑動選項卡】 */
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item .hover_block {
padding-left: 6% !important;/* 要跟 Promo Banner 文字一樣齊左 */
padding-left: 4% !important;/* 要跟 Promo Banner 文字一樣齊左 */
}
/* .no-slide/ .hover_block 【Hover/ 滑過時/ .col-lg-3, .col-md-3 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-3, .col-md-3) .hover_block {
padding-top: calc(75px / 2 - 5.9%);
padding-left: 7.5%;
}
/* .no-slide/ .hover_block 【Hover/ 滑過時/ .col-lg-6, .col-md-6 非滿版用】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6):hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-lg-6, .col-md-6) .hover_block {
padding-left: 12.3% !important;/* 要跟 Promo Banner 文字一樣齊左 */
padding-left: 8.3% !important;/* 要跟 Promo Banner 文字一樣齊左 */
padding-left: 9.3% !important;/* 要跟 Promo Banner 文字一樣齊左 */
padding-top: 8% !important;
}
/* .no-slide/ .hover_block 【Not Hover & Hover/ 滑動 & 不滑動選項卡】 >> Padding top */
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12):hover .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item .hover_block {
padding-right: 43% !important;
padding-top: 3% !important;
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
padding-top: 0% !important;/* 垂直置中 >> 作用於多行（或多列）的子項目 */
}
}
/* 1024 以上 */
@Media (min-width: 1024px) {}
/* 1281 以上 */
@Media (min-width: 1281px) {
/* .no-slide/ .hover_block 【Hover & Not Hover/ 滑動 & 不滑動選項卡】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item .hover_block a.btn,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) [id*="home_promotion_"].promo_block.no-slide .promo_item .hover_block a.btn,
.B2C-Style .promo_block.no-slide .promo_item .hover_block a.btn,
.B2C-Style .promo_block.no-slide .promo_item .hover_block a.btn {
opacity: 0;
}
/* .no-slide/ .hover_block 【Hover & Not Hover/ 滑動 & 不滑動選項卡】 */
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block a.btn {
opacity: 1;
}
}
/* 1500 以上 */
@Media (min-width: 1500px) {
/* .no-slide/ .hover_block 【Not Hover & Hover/ 滑動 & 不滑動選項卡】 >> Padding top */
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12):hover .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item:hover .hover_block,
.B2C-Style #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .promo_block.no-slide .col-md-12.promo_item .hover_block {
padding-right: 56% !important;
}
}
/* 1366 以下 */
@media (max-width: 1366px) {
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block a.btn, .B2C-Style #home_promotion_top .promo_item .hover_block a.btn,
.B2C-Style #home_promotion_bottom .promo_item a.btn,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item a.btn,
.B2C-Style .promo_block .promo_item a.btn,
.B2C-Style #home_promotion_top.promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) [id*="home_promotion_"].promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style .promo_block.no-slide .promo_item:hover .hover_block a.btn, .B2C-Style .promo_block.no-slide .promo_item:hover .hover_block a.btn,
.B2C-Style .product_section #home_promotion_top .promo_item a.btn.btn-primary,
.B2C-Style .product_section .promo_item .hover_block a.btn,
.B2C-Style .product_section .promo_item a.btn.btn-primary,
.B2C-Style .product_section .promo_block .promo_item .hover_block a.btn,
.B2C-Style .product_section .promo_block .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) #home_promotion_top .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item a.btn.btn-primary,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item .hover_block a.btn,
.B2C-Style div:is(.product_section, .marketing-material) .promo_block .promo_item a.btn.btn-primary {
padding: 0.4rem 1.5rem !important;
}
}
/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {}
/* 768 以下 */
@media (max-width: 768px) {
/* (.product_section) #home_promotion_top (.promo_block 非滿版用)【小 + 大】 >> .promo_item (兩個一排) */
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:hover,
.B2C-Style .product_section #home_promotion_top .promo_item:hover,
.B2C-Style .product_section .promo_item:hover,
.B2C-Style .product_section .promo_block .promo_item:hover,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item .hover_block,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item .hover_block,
.B2C-Style .product_section .col-md-12.promo_item .hover_block,
.B2C-Style .product_section #home_promotion_top .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_block .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section [id*="home_promotion_"].promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section .promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section .promo_block .promo_item.col-md-6 .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12 .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item .hover_block {
padding-left: 6%;
padding-left: calc(3% + 3%);/* 大的靠左 3% + 多出 3% */
padding-top: 8% !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* (.product_section) #home_promotion_top (.promo_block 非滿版用)【小 + 大】 >> .promo_item (兩個一排) */
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:hover,
.B2C-Style .product_section #home_promotion_top .promo_item:hover,
.B2C-Style .product_section .promo_item:hover,
.B2C-Style .product_section .promo_block .promo_item:hover,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item .hover_block,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item .hover_block,
.B2C-Style .product_section .col-md-12.promo_item .hover_block,
.B2C-Style .product_section #home_promotion_top .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_block .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section [id*="home_promotion_"].promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section .promo_block .promo_item:is(.col-md-6) .hover_block,
.B2C-Style .product_section .promo_block .promo_item.col-md-6 .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12) .hover_block,
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12 .hover_block,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item .hover_block {
padding-left: 6%;
padding-left: calc(3% + 3%);/* 大的靠左 3% + 多出 3% */
padding-top: 8% !important;
}
}
/* =====================================================================================================
( I ). 【 Search Result Page 】 搜尋結果頁面 >> (.B2C-Style >> 2024)
===================================================================================================== */
/* Search Result Page >> Filter Section (Filter 選單打開) */
.B2C-Style #sidebar {
padding: 10px 25px 10px 25px;
margin-right: 20px;
}
/* Search Result Page >> Filter Section (Filter .active 選單關閉) */
.B2C-Style #sidebar.active {
margin-right: 0px;
}
/* Search Result Page >> Result Section */
.B2C-Style #search_content {
/*margin-top: 4px;
margin-top: 0.25rem;*/
}
.B2C-Style #sidebar .filter_category .plist {
border-bottom: 1px solid #eaeaea !important;
border-bottom: none !important;
}
/* 主分類距離分隔線高度 */
.B2C-Style #sidebar #filter_tags #filter_category_list + h3,
.B2C-Style #sidebar #filter_tags {
padding-top: 37px;
}
/* ol.plist 次分類 >> Border-Bottom 設為 None */
.B2C-Style #sidebar #filter_tags ol.plist {
border-bottom: none !important;
}
.B2C-Style #sidebar #filter_tags #filter_category_list {
margin-bottom: 0;
}
/* Search Result Page >> Result item Out Block */
.B2C-Style #search_content #search_result {
margin-top: 10px;
margin-top: 0.6rem;
}
/* Search Result Page >> Result item */
.B2C-Style .row.result_item,
.B2C-Style .result_item {
filter: drop-shadow(0px 2px 3px rgba(48, 107, 125, 0));
margin-bottom: 30px !important;
margin-bottom: 1.9rem !important;
}
/* Search Result Page >> Result item (最後一個) */
.B2C-Style .row.result_item:last-child,
.B2C-Style .result_item:last-child {
margin-bottom: 0 !important;
}
/* Search Result Page >> Result item (Hover) */
.B2C-Style .row.result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .result_item:hover/* Search Result Page >> Result Items */ {
filter: drop-shadow(0px 2px 3px rgba(48, 107, 125, 0.2));
filter: drop-shadow(0px 2px 3px rgba(48, 107, 125, 0));/* Hover 效果統一套用 Box-Shadow */
}
/* Search Result Page >> Result Item > H2 > a */
.B2C-Style .row.result_item h2 a,
.B2C-Style .row.result_item h2 {
margin-bottom: 3px;
margin-bottom: 0.2rem;
margin-bottom: 0.5rem;
}
.B2C-Style .row.result_item p.pdesc, .B2C-Style #content div.product-price p,
.B2C-Style div.product-price p {
margin-top: 0 !important;
}
/* Search Result Page >> Result Item > Description(p) */
.B2C-Style .row.result_item p,
.B2C-Style .row.result_item p + p {
display: block; /* 設為整區 block, 文字較長時, 下面的 a:link 才不會擠在一起 */
margin-bottom: 0.6rem !important;
}
/* Search Result Page >>#sitesearch_form >> 位置 (Original) */
.B2C-Style .top_searchbox #sitesearch_form {
display: inline-block;
position: relative;
left: 0;
}
/* Search Result Page >>#sitesearch_form.fixed >> 位置 (Fixed Bar) */
.B2C-Style .top_searchbox.fixed #sitesearch_form {
/* 配合 Left + Transform 畫面居中 */
left: 50% !important;
transform: translateX(-50%);/* 畫面居中 */
}
/* Search Result Page >> Input + Search Button >> 高度 (Original) */
.B2C-Style .top_searchbox #sitesearch_form input,
.B2C-Style .top_searchbox #sitesearch_form .btn[class*="btn-"]/* Search Result Page >> Search Button */ {
height: 50px;
height: 3.1rem;
}
/* Search Result Page >> Input + Search Button >> 高度 (Fixed Bar)
.B2C-Style .top_searchbox.fixed #sitesearch_form input,
.B2C-Style .top_searchbox.fixed #sitesearch_form .btn[class*="btn-"] {
height: 50px;
}
*/
/* Search Result Page >> Input + Search Button (Hover) */
.B2C-Style .top_searchbox #sitesearch_form:hover button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form:hover button.btn-info,
.B2C-Style .top_searchbox #sitesearch_form:hover input,
.B2C-Style .top_searchbox #sitesearch_form input:hover + button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form input:hover + button.btn-info,
.B2C-Style #sitesearch_form button.btn-go:hover/* Search Result Page >> Search Button */,
.B2C-Style #sitesearch_form button.btn-info:hover/* Search Result Page >> Search Button */,
.B2C-Style .top_searchbox #sitesearch_form input:hover/* Search Result Page >> Input 輸入框 */ {
border: 1px solid rgba(0, 7, 34, 1.0);
border: 1px solid #000722 !important;
}
/* Search Result Page >> Input + Search Button (Focus 聚焦) */
.B2C-Style .top_searchbox #sitesearch_form input:focus + button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form input:focus + button.btn-info,
.B2C-Style .top_searchbox #sitesearch_form input:focus {
border: 1px solid #004276 !important;
border: 1px solid #005baa !important;
}
/* Search Result Page >> Search Button >> 取消 border-left */
.B2C-Style .top_searchbox #sitesearch_form input:focus + button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form input:focus + button.btn-info,
.B2C-Style .top_searchbox #sitesearch_form:hover button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form:hover button.btn-info,
.B2C-Style .top_searchbox #sitesearch_form input:hover + button.btn-go,
.B2C-Style .top_searchbox #sitesearch_form input:hover + button.btn-info,
.B2C-Style #sitesearch_form button.btn-go:hover,
.B2C-Style #sitesearch_form button.btn-info:hover,
.B2C-Style #sitesearch_form button.btn-go,
.B2C-Style #sitesearch_form button.btn-info {
border-left: none !important;
}
/* Search Result Page >> Input:Focus (聚焦) >> Icon::before */
.B2C-Style #sitesearch_form input:focus + .btn .icon-search3::before {
color: rgba(0, 92, 170, 1.0);
color: #005caa !important;
}
/* Link 分隔線 */
.B2C-Style .row.result_item .lineS {
display: inline-block;
}
/* 1024px 以上 */
@media (min-width: 1024px) {
/* Search Result Page >> Left Side Bar */
.B2C-Style #sidebar {
min-height: 350px;
}
/* Search Result Page >>#sitesearch_form.fixed >> 位置 (Fixed Bar) */
.B2C-Style .top_searchbox.fixed #sitesearch_form {
left: calc(100vw/4 - 9.2vw) !important;/* 靠齊結果內容 (稍微居中) */
/* 配合 Left + Transform 畫面居中 */
left: 50% !important;
transform: translateX(-50%);/* 畫面居中 */
transform: translateX(calc(-50% - -4%));/* 畫面微靠左居中 */
}
}
/* 1400px 以上 */
@media (min-width: 1400px) {
.B2C-Style .row.result_item, .B2C-Style .result_item {
padding-top: 2.1rem;
}
/* Image Block (圖區) >> 變大 >>. Result item(包含關閉 Filter 時 / 變成雙排) */
/* 不包含關閉 Filter 時 > .B2C-Style #search_result .row.result_item a.col-lg-2:not(#sidebar.active + #search_content #search_result .row.result_item a.col-lg-2), */
.B2C-Style #search_result .row.result_item a.col-lg-2 {
padding-right: 5px;
width: 25%;
padding-left: 1%;
padding-right: 2%;
}
/* Wording Block (文字區) >> 略縮小 >> Result item(包含關閉 Filter 時 / 變成雙排) */
/*不包含關閉 Filter 時 > .B2C-Style #search_result .row.result_item .col-lg-10:not(#sidebar.active + #search_content #search_result .row.result_item .col-lg-10), */
.B2C-Style #search_result .row.result_item .col-lg-10 {
width: 74%;
padding-right: 1%;
}
/* Result item (關閉 Filter 時 / 變成雙排) >> Search Result Page */
.B2C-Style #sidebar.active + #search_content .row.result_item,
.B2C-Style #sidebar.active + div .result_item {
display: block;
width: 48.5%;
min-height: 348px;
float: left;
}
/* Result item (關閉 Filter 時 / 變成雙排) >> Search Result Page */
.B2C-Style #sidebar.active + #search_content .row.result_item:not(:nth-of-type(2n)),
.B2C-Style #sidebar.active + div .result_item:not(:nth-of-type(2n)) {
margin-right: 2%;/* 排除偶數 */
}
/* Search Result Page (關閉 Filter 時 / 變成雙排) >> Result Item > a:Link + Icon(View) & Icon(Download)
.B2C-Style #sidebar.active + #search_content .row.result_item p + a,
.B2C-Style #sidebar.active + #search_content .row.result_item p + a + span + a {
display: block;
margin-bottom: 10px;
margin-bottom: 0.6rem;
}
*/
/* .lineS(分隔線) (關閉 Filter 時 / 變成雙排) >> Result item >> Search Result Page */
.B2C-Style #sidebar.active + #search_content .row.result_item .lineS,
.B2C-Style #sidebar.active + div .result_item .lineS {
/* display: none; */
padding: 0 2px;
}
}
/* 1900px 以上 */
@media (min-width: 1900px) {
/* 固定 Sild Bar (Fixed) (Top Search 出現時) >> Search Result
.B2C-Style .top_searchbox.fixed + div > .wrapper #sidebar {
width: 22vw;
width: 300px;
left: unset;
height: 100vh;
overflow-y: auto;
}
*/
/* 固定 Sild Bar + Close Button (Fixed) (Top Search 出現時)
.B2C-Style .top_searchbox.fixed + div > .wrapper #sidebar {
position: fixed;
top: 88px;
z-index: 200;
}
*/
/* 固定 Sild Bar + Close Button (Fixed) (Top Search 出現時)
.B2C-Style .top_searchbox.fixed + div > .wrapper #search_content > div:not(div#search_result) {
position: fixed;
top: 88px;
z-index: 200;
}
*/
/* 因固定 Sild Bar >> 需調整結果內容 #search_content (Top Search 出現時) >> Search Result
.B2C-Style .top_searchbox.fixed + div > .wrapper #search_content:not(#sidebar.active + #search_content) {
left: 320px;
position: relative;
width: 65%;
}
*/
}
/* 1920px 以上 */
@media (min-width: 1920px) {
/* Result item (關閉 Filter 時 / 變成雙排) >> Search Result Page */
.B2C-Style #sidebar.active + #search_content .row.result_item,
.B2C-Style #sidebar.active + div .result_item {
min-height: 305px;
min-height: 335px;
}
/* Search Result Page >>#sitesearch_form.fixed >> 位置 (Fixed Bar) */
.B2C-Style .top_searchbox.fixed #sitesearch_form {
left: calc(100vw/4 - 7vw) !important;/* 畫面居中 */
left: calc(100vw/4 - 9.2vw) !important;/* 靠齊結果內容 (稍微居中) */
/* 配合 Left + Transform 畫面居中 */
left: 50% !important;
transform: translateX(-50%);/* 畫面居中 */
transform: translateX(calc(-50% - 11%));/* 畫面微靠左居中 */
}
}
@media (min-width: 1919px) and (max-width: 2000px) {}
/* 1023px 以下 */
@media (max-width: 1023px) {
/* Search Result Page >> Result Item > a:Link + Icon(View) & Icon(Download) */
.B2C-Style .row.result_item p + a/* View Link */,
.B2C-Style .row.result_item p + a + span + a/* Download Link */ {
display: block;
margin-bottom: 10px;
margin-bottom: 0.6rem;
}
/* Link 分隔線 */
.B2C-Style .row.result_item .lineS {
display: none;
}
}
/*************************************************************************************************************************
( E ). 【Listing Item Optimization】(Product Listing / Feature Article) (.B2C-Style >> 2024)
======================================================================================================================== */
/* Listing Item Block >> Product Listing / Feature Article */
.B2C-Style .product-record-single .sect-divider,
.B2C-Style .row div.product-category > div.sect-divider {
/*box-shadow: 0px 0px 5px 4px rgba(238, 238, 238, 0.9);
border: 1px solid #ddd;
border-bottom: 2px solid #cbccd0;
*/
overflow: hidden;
margin-bottom: 35px;
/*border: 1px solid rgba(195,198,203,.4);
border-bottom: 2px solid rgba(195,198,203,.5);
border-bottom: 2px solid rgba(188, 191, 195, 0.6);
box-shadow: 0px 0px 3px 2px rgba(238, 238, 238, 0.9);*/
}
/* Listing Item Block >> Product Listing */
.B2C-Style .product-record-single .sect-divider {
transition: all .3s ease-in-out;
}
/* Listing Item Block【 :Hover】 >> Product Listing / Feature Article / Search Result Item */
.B2C-Style .row.result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .row div.product-category > div.sect-divider:hover,
.B2C-Style .product-record-single .sect-divider:hover {
/*border-color: #95999f;
border-bottom: 1px solid #95999f;
border-color: #004276;
border-bottom: #004276;
border-color: #005caa;
border-bottom: #005caa;
box-shadow: 0px 6px 10px 4px rgba(0, 7, 34, 0.15);
*/
margin-top: 0;
transform: translateY(-0.3rem);
transform: translateY(-0.2rem);
transform: scale(1.01);
}
/* Listing Item Block【 :Hover】 >> Product Listing / Search Result Item */
.B2C-Style .row.result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .result_item:hover/* Search Result Page >> Result Items */,
.B2C-Style .product-record-single .sect-divider:hover {
transform: unset;/* 不縮放 */
}
/* Listing Item Image >> Product Listing / Feature Article */
.B2C-Style .sect-divider div.product-image {
border-radius: 7px 7px 0 0;
border-radius: 0.45rem 0.45rem 0 0;
border-radius: 0.4rem 0.4rem 0 0;
/*transition: all .3s ease-in-out 0s;*/
}
/* Listing Item Image >> Product Listing(產品圖) / Feature Article(背景圖) >> Original */
.B2C-Style .sect-divider div.product-image,
.B2C-Style .row div.product-category > div.sect-divider .product-image img,
.B2C-Style .product-record-single .sect-divider .product-image img {
filter: brightness(100%) contrast(100%);
transition: all .4s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
}
/* Listing Item Image >> Product Listing(產品圖) >> Original */
.B2C-Style .product-record-single .sect-divider .product-image img {
transition: all .2s ease-in-out 0s;
}
/* Listing Item Image【 :Hover】 >> Product Listing(產品圖) / Feature Article(背景圖) >> 照片調整 */
.B2C-Style .row div.product-category > div.sect-divider:hover .product-image img,
.B2C-Style .product-record-single .sect-divider:hover .product-image img {
filter: brightness(107%) contrast(110%);
transition: all .3s ease-in-out 0s;
}
/* Listing Item Image【 :Hover】 >> Product Listing(產品圖) >> 照片調整 */
.B2C-Style .product-record-single .sect-divider:hover .product-image img {
filter: brightness(107%) contrast(110%);
filter: brightness(100%) contrast(110%);
}
/* Listing Item Image【 :Hover】 >> Product Listing(產品圖) >> Scale (1.05) */
.B2C-Style .product-record-single .sect-divider:hover .product-image img {
transform: scale(1.05);
transform: scale(1.01);
transform: unset;/* 不縮放 */
transition: all .2s ease-in-out 0s;
}
/* Listing Item Image【 :Hover】 >> Feature Article (背景圖) >> Scale (1.1) */
.B2C-Style .row div.product-category > div.sect-divider:hover .product-image img {
transform: scale(1.1);
transition: all .4s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
}
/* Product Recommendation >> .sect-divider >> .product-image >> 背景圖片 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .product-image {
filter: brightness(100%) contrast(100%);
transition: all .2s ease-in-out 0s;
}
/* Product Recommendation >> .sect-divider(Hover) >> .product-image >> 滑過背景圖片 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider:hover .product-image {
filter: brightness(102.5%) contrast(110%);
transition: all .4s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
}
/* Description >> Product Listing / Feature Article */
.B2C-Style .row div.product_section .product-desc {
padding: 15px 20px;
padding: 4% 7.5%;
padding: 5% 7.5%;
margin-bottom: 5px;
margin-bottom: 10px;
}
/* Description + Button >> Product Listing / Feature Article */
.B2C-Style .row div.product_section .product-desc,
.B2C-Style div.btn-learnm {
padding-right: 23px;
padding-left: 23px;
padding-right: 8%;
padding-left: 8%;
padding-right: 8.5%;
padding-left: 8.5%;
}
/* Add to Comparision >> Product Listing */
.B2C-Style a.comparison_block {
padding-left: 4px;
position: relative;
top: -1px;
}
/* Description >> Title / Feature Article */
.B2C-Style .row div.product_section .product-title,
.B2C-Style .product-title {
margin-bottom: 5%;
}
/* Description >> Title / Feature Article */
.B2C-Style .row div.product_section .product-price,
.B2C-Style .product-price {
margin-bottom: 10px;
}
/* Description + Button::after >> Product Listing / Feature Article */
.B2C-Style .product-desc + .btn-learnm a::after {
}
/* 768 以上 */
@media (min-width: 768px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 275px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 127px;
}
}
/* 810 以上 */
@media (min-width: 810px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
min-height: 275px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 160px;
}
}
/* 900 以上 */
@media (min-width: 900px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
}
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 176px;
}
}
/* 1100 以上 */
@media (min-width: 1100px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 182px;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Listing Item Block >> Product Listing */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 414px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 172px;
}
}
/* 1300 以上 */
@media (min-width: 1300px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 400px;
}
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 440px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 235px;
}
}
/* 1400 以上 */
@media (min-width: 1400px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 410px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 230px;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 440px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 230px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 215px;
}
}
/* 1600 以上 */
@media (min-width: 1600px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 420px;
}
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 455px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 200px;
}
}
/* 1700 以上 */
@media (min-width: 1700px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 450px;
}
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 475px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 450px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 435px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 210px;
}
}
/* 1800 以上 */
@media (min-width: 1800px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 455px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc:not(.product-snippet .product-desc) {
min-height: 220px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 223px;
}
}
/* 1900 以上 */
@media (min-width: 1900px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 440px;
}
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 460px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 460px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 445px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 205px;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 400px;
}
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 430px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single {
margin-bottom: 50px;
margin-bottom: 60px;
margin-bottom: 5.5%;
margin-bottom: 7.5%;
padding-right: 1%;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 433px;
min-height: 448px;
padding: 15px 15px 20px 15px;
padding: 8% 8% 10% 8%;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 435px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category > div.sect-divider .product-image {
min-height: 200px;
}
}
/* 2560 以上 */
@media (min-width: 2560px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 450px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 480px;
}
}
/* 3000 以上 */
@media (min-width: 3000px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list div.product-record-single,
.B2C-Style .product_list .product-record-single {
min-height: 520px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */
.B2C-Style .product_list .product-record-single .sect-divider {
min-height: 480px;
}
}
/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {
/* Subcategory Page (.has_buynow 列表裡面有 Buy Now Button) >> Listing Item Block >> Only Product Listing */
.B2C-Style .product_list.has_buynow div.product-record-single,
.B2C-Style .product_list.has_buynow .product-record-single {
min-height: 430px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
min-height: 450px;
}
}
/* 830 以下 */
@media (max-width: 830px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 All Product & Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category:not(.product-snippet .product-category) {
margin-bottom: 5px !important;
}
}
/* 768 ~ 830 */
@Media (min-width: 768px) and (max-width: 830px) {
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category {
margin-bottom: 10px;
}
/* Subcategory Page >> Listing Item Block >> Product Listing (不含 Feature Article) */
.B2C-Style #content:has(.product-head) .row .product_section div.product-category .product-desc {
min-height: 215px;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* Search Result Page > Product Image */
.B2C-Style #search_result .row.result_item a .img-responsive {
margin: 0 auto;
}
}
/*************************************************************************************************************************
( H-1 ). 【 New/ Discontinued Product Listing 】新/ 過期產品列表頁面 (.B2C-Style >> 2024)
======================================================================================================================== */
/* 1200 以上 */
@media (min-width: 1200px) {
/* New/ Discontinued Product Listing >> 不包含一般產品列表頁面 */
.B2C-Style .list-color .product-record-single,
.B2C-Style .list-color .row div.product-category {
min-height: 279px;
min-height: 300px;
height: 310px;
height: 340px;
}
/* New/ Discontinued Product Listing >> 不包含一般產品列表頁面 */
.B2C-Style .list-color .product-record-single .sect-divider,
.B2C-Style .list-color .row div.product-category > div.sect-divider {
min-height: 279px;
}
}
/*************************************************************************************************************************
( F ). 【 Listing Item >> Feature Articles Page Optimization】 (.B2C-Style >> 2024)
======================================================================================================================== */
/* Listing Item Block >> Product Listing / Feature Article ( 微邊界灰)
.B2C-Style .row div.product-category > div.sect-divider {
border: 1px solid rgba(195,198,203,.4);
border-bottom: 2px solid rgba(195,198,203,.7);
box-shadow: 0px 0px 3px 2px rgba(238, 238, 238, 0.9);
}
*/
/*************************************************************************************************************************
( ? ). 【 Get Quote Cart Page (詢價) + Model (模組) 】 (.B2C-Style >> 2024)
======================================================================================================================== */
/********************* 1. Get Quote Lightbox *********************/
/* Get Quote Modual >> Lightbox > 圖 + 文區 */
.B2C-Style #gqc_preview .modal-body > .row:first-child {
display: flex;
align-items: center;
align-content: center;
padding-left: 2%;
padding-right: 2%;
}
.B2C-Style #gqc_preview .modal-body img.gqc_img {}
/* Get Quote Modual >> Lightbox > Title(H2) + Description */
.B2C-Style #gqc_preview.modal .modal-body h2 + span,
.B2C-Style .modal-body h2.gqc_title,
.B2C-Style .modal-body span.gqc_desc {
display: block;
position: relative;
}
.B2C-Style #gqc_preview.modal .modal-body h2 + span {
margin-top: 0.3rem;
}
/* Get Quote Modual >> Lightbox > Title(H2) */
.B2C-Style .modal-body h2.gqc_title {
margin-bottom: 3%;
}
/* 480 以下 */
@media (max-width: 480px) {
.B2C-Style .modal-body .col-md-7.col-xs-5:has(.gqc_title, .gqc_desc) {
width: 55%;
}
.B2C-Style .modal-body h2.gqc_title {
font-size: 1.2rem;
font-size: 1.05rem;
}
.B2C-Style .modal-body span.gqc_desc {
font-size: 0.75rem;
line-height: 1.4em;
}
.B2C-Style #gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width,
.B2C-Style #gqc_preview a.add-to-cart.button.nomargin.btn-full-width,
.B2C-Style #gqc_preview a.button.btn-full-width {
font-size: 0.8rem !important;
}
}
/********************* 2. Get Quote Page *********************/
/* Get Quote Page >> .container */
.B2C-Style .container .container.confirm {
padding-left: 0;
padding-right: 0;
}
/* Get Quote Page >> Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row {}
/* Get Quote Page >> Product Item Block > List Title Section */
.B2C-Style section.quote-cart + #content .col-title.row {
margin-top: 1%;
}
/* Get Quote Page >> Product Item Block > List Title Block */
.B2C-Style section.quote-cart + #content .container.confirm > div.row:first-child {}
/* Get Quote Page >> Product Item Block > List Item Section */
.B2C-Style section.quote-cart + #content .row.col-list {
margin-top: 0;
}
/* Get Quote Page >> List Title + Product Item List Title Section */
.B2C-Style section.quote-cart + #content .col-title.row {
padding-top: 1%;
padding-bottom: 1%;
border-radius: 6px 6px 0 0;
border-radius: 0.3rem 0.3rem 0 0;
border-bottom: 1px solid rgba(195, 198, 203, 0.5);
}
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row:last-child {
/* border-bottom: none; */
}
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row {
box-sizing: border-box;
background-color: #fff;
border: 1px solid rgba(195, 198, 203, 0.4);
border-bottom: 1px solid rgba(195, 198, 203, 0.6);
border: 1px solid rgba(195, 198, 203, 0.5);
border-bottom: 1px solid rgba(195, 198, 203, 0.99);
box-shadow: 1px 5px 0px 0px rgba(235, 236, 236, 0.2);
transition: all .2s ease-in-out 0s;
}
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row:hover {
border: 1px solid rgba(195, 198, 203, 0.5);
border-bottom: 1px solid rgba(195, 198, 203, 0.7);
border: 1px solid #005caa;
filter: drop-shadow(0px 2px 3px rgba(48, 107, 125, 0.2));
transition: all .2s ease-in-out 0s;
}
/* Get Quote Page >> List Title + Product Item Block + img Section */
.B2C-Style section.quote-cart + #content .col-item.row .col-md-2:first-child,
.B2C-Style section.quote-cart + #content .col-item.row {
/*border-radius: 1rem; */
}
/* Get Quote Page >> List Title + Product Item Block >> img Section */
.B2C-Style section.quote-cart + #content .col-item.row .col-md-2:first-child {
border-radius: 1rem 0 0 1rem;
mix-blend-mode: multiply;
background-color: rgba(243, 244, 246, .85);
background-color: #fff;
/*
background: -webkit-radial-gradient(center, ellipse cover, #fff 0%,#abb8c6 84%);
background: -o-radial-gradient(center, ellipse cover, #fff 0%,#abb8c6 84%);
background: -ms-radial-gradient(center, ellipse cover, #fff 0%,#abb8c6 84%);
background: radial-gradient(ellipse at center, #fff 0%,#abb8c6 84%);
*/
}
/* Get Quote Page >> List Title + Product Item Block >> img */
.B2C-Style section.quote-cart + #content .col-item.row img {
mix-blend-mode: multiply;
padding: 6%;
}
/* Get Quote Page >> Product Item Block > List Title x 3 */
.B2C-Style section.quote-cart + #content .col-title.row > [class*="col-"] {
font-size: 0.9rem;
font-weight: 500;
text-align: center;
}
/* Get Quote Page >> Product Item Block > List Item x 3 */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] {
text-align: center;
padding-top: unset;
margin-top: 0 !important;
}
/* Get Quote Page >> Product Item Block > List Item > Model Name */
.B2C-Style section.quote-cart + #content .row.col-list .pname {
font-size: 1.3em;
font-weight: 500;
letter-spacing: -0.001rem;
}
/* Get Quote Page >> Product Item Block > List Item > Model Name */
.B2C-Style section.quote-cart + #content .row.col-list .pdesc {
font-weight: 400;
font-size: 0.85rem;
line-height: 1.2rem;
display: inline-block;
margin-top: 1%;
}
/* Get Quote Page >> Product Item Block > List Item >> Remove Icon */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove {
font-size: 13px;
font-weight: 500;
border: 2px solid transparent;
border: 2px solid #005caa;
border-radius: 300px;
padding: 0;
margin-left: 0;
width: 35px;
height: 35px;
}
/* Get Quote Page >> + / - Icon */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .numberaction {
/* color: #005caa */
}
/* Get Quote Page >> Product Item Block > List Item >> Remove Icon > i */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove i.icon-remove {}
/* Get Quote Page >> Product Item Block > List Item >> Act Button (All) */
.B2C-Style section.quote-cart + #content a.actbtn {
display: inline-block;
position: relative;
height: inherit;
margin-bottom: 1.5%;
}
/* Get Quote Page >> Product Item Block > List Item >> Act Button (All) > button */
.B2C-Style section.quote-cart + #content a.actbtn button {
margin-top: 0;
border-radius: 0.3rem !important;
position: relative;
height: inherit;
}
/* Get Quote Page >> Product Item Block > List Item >> Act Button (#backbtn) */
.B2C-Style section.quote-cart + #content a#backbtn.actbtn button .icon-angle-left {
color: unset;
}
/* Get Quote Page >> List Item + Product Item Block + Remove Icon + i + 加減 + remove */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .numberaction,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove i.icon-remove,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"],
.B2C-Style section.quote-cart + #content .col-title.row,
.B2C-Style section.quote-cart + #content .col-item.row {
display: flex;
align-items: center; /* 項目垂直置中 */
align-content: center; /* 垂直置中 */
justify-content: center; /* 水平置中 */
}
/* Get Quote Page >> + / - Icon::before */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .icon-minus::before,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .icon-plus::before {
font-size: 1.3rem;
font-weight: 700;
}
/* Get Quote Page >> remove Icon::before */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] a.remove i.icon-remove::before,
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] i.icon-remove::before {
margin-right: 0;
font-size: 1.1rem;
font-weight: 700;
}
/* Get Quote Page >> Total Count (Bottom) */
.B2C-Style section.quote-cart + #content .row.col-list + .row .col-count {
color: #007fc6;
color: #016fac;
font-weight: unset;
border-bottom: 1px solid rgba(195, 198, 203, 0.8);
margin: 20px 0px 0;
margin-bottom: 3%;
padding-bottom: 2%;
}
/* Get Quote Page >> Total Count (Bottom) */
.B2C-Style section.quote-cart + #content .row.col-list + .row .col-count .cnt_info {
letter-spacing: -0.01rem;
}
/* Get Quote Page >> .row >> 刪除 margin-right/ left */
.B2C-Style section.quote-cart + #content .row.col-list + .row/* Get Quote Page >> Total Count (Bottom) */,
.B2C-Style section.quote-cart + #content .col-title.row/* Get Quote Page >> Product Item Block > List Title Section */,
.B2C-Style section.quote-cart + #content .container.confirm > div.row:first-child/* Get Quote Page >> Product Item Block > List Title Block */,
.B2C-Style section.quote-cart + #content .row.col-list/* Get Quote Page >> Product Item Block > List Item Section */ {
margin-left: 0;
margin-right: 0;
}
/* Get Quote Page >> 刪除數量外框 + 陰影 (因為要包外圍連 + - 一起) */
.B2C-Style .unitnumber {
color: #004276;
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
/* Get Quote Page >> 刪除數量外框 + 陰影 (因為要包外圍連 + - 一起) */
.B2C-Style .quantityblock:not(.quantityblock:last-child) {
border: 1px solid #c3c6cb;
border-radius: 5px;
width: auto;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/* 810 以上 */
@media (min-width: 810px) {
/* Get Quote Page >> 刪除數量外框 + 陰影 (因為要包外圍連 + - 一起) */
.B2C-Style .unitnumber {
border-left: 1px solid #d6dae1;
border-right: 1px solid #d6dae1;
}
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row {
padding-top: 0;
padding-bottom: 0;
}
/* Get Quote Page >> List Title + Product Item Block >> img */
.B2C-Style section.quote-cart + #content .col-item.row img {
padding-top: 10%;
padding-bottom: 10%;
}
/* Get Quote Page >> 刪除數量外框 + 陰影 (因為要包外圍連 + - 一起) */
.B2C-Style .quantityblock:not(.quantityblock:last-child) {
width: auto;
margin: 0 6%;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Get Quote Page >> .container */
.B2C-Style .container .container.confirm {
padding-left: 4%;
padding-right: 4%;
}
/* Get Quote Page >> List Title + Product Item Block >> 左右各縮小 */
/* .B2C-Style section.quote-cart + #content .col-item.row, */
.B2C-Style section.quote-cart + #content .col-title.row,
.B2C-Style section.quote-cart + #content .row.col-list {
/* padding-left: 3%;
padding-right: 3%; */
}
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-item.row {
min-height: 140px;
}
}
/* 811 以下 */
@media (max-width: 811px) {
/* Get Quote Page >> 刪除數量外框 + 陰影 (因為要包外圍連 + - 一起) */
.B2C-Style .quantityblock:not(.quantityblock:last-child) {
width: auto;
margin: 0 1%;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* Get Quote Page >> List Title + Product Item Block */
.B2C-Style section.quote-cart + #content .col-title.row,
.B2C-Style section.quote-cart + #content .col-item.row {
padding-right: 2%;
padding-left: 2%;
}
/* Get Quote Page >> + / - Icon >> 外面的 Block >> 垂直排列 */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"].col-md-3 {
flex-direction: column; /* 垂直排列*/
}
/* Get Quote Page >> + / - Icon >> 外面的 Block >> 垂直排列 >> +/- Icon 上下距離 */
.B2C-Style section.quote-cart + #content .row.col-list [class*="quantityblock"] .numberaction {
margin-top: 15%;
margin-bottom: 15%;
}
}
/*************************************************************************************************************************
( H ). 【 Product Comparision Table (比較表) + Model (模組) 】 (.B2C-Style >> 2024)
======================================================================================================================== */
/********************* A. Compare Model *********************/
/* Compare Model >> Compare Box */
.B2C-Style #comparison_landings .well-compare,
.B2C-Style .well-compare {
border-radius: 10px;
margin-bottom: 4%;
padding: 1.5% 1.5% 3%;
/*
border: 1px solid rgba(195, 198, 203, 0.5);
border-bottom: 2px solid rgba(188, 191, 195, 0.6);
box-shadow: 1px 2px 3px 0px rgba(235, 236, 236, 0.9);
*/
}
/* Compare Model >> Compare Box:last-Child (會有兩個以上同時存在) */
.B2C-Style #comparison_landings .container:last-child .well-compare {
margin-bottom: 6%;
}
/* Compare Model >> Compare Box:Hover */
.B2C-Style #comparison_landings .well-compare:hover,
.B2C-Style .well-compare:hover {
border-color: #2292D3;
box-shadow: 0px 6px 10px 4px rgba(0, 7, 34, 0.15);
transition: all 0.3s ease-in-out 0s;
}
/* Compare Model >> Compare Box >> Product Item */
.B2C-Style div#comparison_landings .compare-modal > div {
border-radius: 7px;
margin-bottom: 2%;
/* 加 Border 區塊
min-height: 295px;
width: 15.5%;
background-color: rgba(243, 244, 246, .5);
border: 1px solid rgba(195, 198, 203, 0.6);
margin: 1% 1% 2% 0%;
padding: 1% 1.5%;
*/
}
/* Compare Model >> Compare Box >> Product Item:last-child (Add a Product) */
.B2C-Style div#comparison_landings .compare-modal > div:last-child {}
/* Compare Model >> Compare Box >> Item + Button Text */
.B2C-Style .well-compare .compare-modal + .text-right,
.B2C-Style .well-compare .compare-modal {
padding-left: 2%;
padding-right: 2%;
}
/* Compare Model >> Compare Box >> a > Remove Text Link */
.B2C-Style .well-compare .compare-modal a {
padding-left: 0%;
}
/* Compare Model >> Compare Box >> Button Section */
.B2C-Style .well-compare .compare-modal + .text-right {
padding-right: 1%;
padding-top: 2%;
margin-top: 3%;
margin-top: 1%;
margin-top: 0.5%;
/* border-top: 1px solid rgba(195, 198, 203, 0.5); */
}
/* Compare Model >> Compare Box >> Title */
.B2C-Style .well-compare h3 {
}
/* Compare Model >> Product Description >> bold */
.B2C-Style .well-compare .compare-modal p b {
display: inline-block;
margin-bottom: 4px;
}
/* Compare Model >> hr */
.B2C-Style #comparison_landings hr {
margin: 1.5% 0 3%;
/* border-top: 1px solid rgba(195, 198, 203, 0.5); */
}
/* Compare Model >> blank-product */
.B2C-Style .blank-product {
/* background-color: #fff; */
height: 193px;
height: 210px;
position: relative;
padding-top: unset;
margin-bottom: 0;
}
/* Compare Model >> blank-product > a */
.B2C-Style .blank-product a {
border-radius: 7px;
height: inherit;
position: relative;
width: inherit;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
vertical-align: middle;
opacity: 0.87;
transition: all .3s ease-in-out 0s;
}
/* Compare Product > + Add Product > i */
.B2C-Style .compare-modal .blank-product i {
opacity: 0.6;
margin-bottom: 2%;
transition: all .3s ease-in-out 0s;
}
/* Compare Model >> blank-product (Hover) > a */
.B2C-Style .blank-product:hover a {
opacity: 1;
transition: all .3s ease-in-out 0s;
}
/* Compare Product > + Add Product > blank-product (Hover) > i */
.B2C-Style .compare-modal .blank-product:hover i {
opacity: 1;
transition: all .3s ease-in-out 0s;
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Compare Model >> All Button */
.B2C-Style .well-compare .btn.btn-info {
width: auto !important;
/* min-width: 170px !important; */
}
}
/********************* B. Compare Table *********************/
.B2C-Style .table.comparisontable tr th:first-child,
.B2C-Style .comparisontable th.ftitle:first-child {
min-width: 170px;
}
.B2C-Style .comparisontable .icon-plus,
.B2C-Style .comparisontable .icon-minus,
.B2C-Style .comparisontable a.btn_border i {
margin-right: unset !important;
vertical-align: middle;/* 因為要垂直居中 >> 覆寫掉原來的 Bottom */
}
/********************* C. Share Page >> Compare Table *********************/
/* Compare Table 跟標題距離 */
.B2C-Style .table-responsive {
margin-top: 15px;
margin-top: 1rem;
}
/* Icon at Bottom >> 跟底部距離 */
.B2C-Style div.modal-footer {
margin-bottom: 20px;
margin-bottom: 2rem;
}
/*************************************************************************************************************************
( G ). 【 All Product + Subcategory Product Page Optimization】所有產品 + 第三層產品目錄頁面 (.B2C-Style >> 2024)
======================================================================================================================== */
/* New Products 左側小資訊 (All Products) */
.B2C-Style .product-snippet .newproduct h3 {
margin-bottom: 3px;
margin-bottom: 0.3rem;
}
/* New Products 左側小資訊 (All Products) */
.B2C-Style .product-snippet .content.NewProduct_ModelDes {
margin-bottom: 0.35rem;
}
/* Spotlight 相關內容區塊 (產品第三層頁面) >> 跟上方第三層選單距離 */
.B2C-Style .newproduct > div:first-child:not(.B2C-Style .product-snippet .newproduct > div:first-child) {
margin-top: 10px !important;
}
/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 標題 */
.B2C-Style .newproduct h2.subtitle:not(.B2C-Style .product-snippet .newproduct h2.subtitle) {
font-size: 2.1rem;
font-weight: 500;
color: #000 !important;
}
/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> 第二個標題開始 (排除第一個) */
.B2C-Style .newproduct h2.subtitle:not(.B2C-Style .newproduct h2.subtitle:first-child):not(.B2C-Style .product-snippet .newproduct h2.subtitle:first-child) {
padding-top: 40px;
}
/* Spotlight + Success Stories 相關內容區塊 (產品第三層頁面) >> Image */
.B2C-Style .newproduct .NewProduct_Img {
border: none;
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Spotlight 相關內容區塊 (產品第三層頁面) >> 第一區 Spotlight 跟上方第三層選單距離 (不包含 Success Story 區域) */
.B2C-Style .core-container div.header + div > div:nth-child(2) .newproduct > div:first-child {
margin-top: -30px !important;
}
/* Category Item (產品第三層頁面) 產品目錄列表區塊 >> Subcategory Product Page (不包含 Feature Articles 列表) */
.B2C-Style div.header + div .product_section div.product-category {
margin-bottom: 82px;
margin-bottom: 5.3rem;
}
/* Category Item (所有產品頁面) 產品目錄列表區塊 >> All Product (不包含 Feature Articles 列表) */
.B2C-Style .product-snippet div.product-category {
margin-bottom: 65px;
margin-bottom: 4.3rem;
}
/* Category Title + Top Button x 3 >> All Product + Subcategory Product Page */
.B2C-Style .product_button {
display: flex;
align-items: center;
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
margin-bottom: 1rem;
}
}
/* 767 以下 */
@media (max-width: 767px) {
/* Category Title + Top Button x 3 >> All Product + Subcategory Product Page */
.B2C-Style .product-head .form-inline,
.B2C-Style .product_button .col-md-5 h1,
.B2C-Style .product_button .col-md-5,
.B2C-Style div.discontinued-product/* Subcategory Product Page >> Button Block */ {
width: 100%;
}
}
/*************************************************************************************************************************
( G-1 ). 【 Product Main Category (.B2C-Style) >> CPC Product 】主產品目錄頁面 (.B2C-Style >> 2024)
>> Promote Banner (CPC Product) for Product Main Category (.B2C-Style) >> CPC Product
>> Product Photo Item (CPC Product) for Product Main Category (.B2C-Style) >> CPC Product
P.S.-1 >> .promote-banner-lg (Main Category) >> 是為了讓 Promote Banner (CPC Product) 在 Product Main Category (.B2C-Style) 有更大的 Banner 占位
P.S.-2 >> .promote-banner-sm (Sub Category) >> 是為了讓 Promote Banner (CPC Product) 在 Product Main Category (.B2C-Style) 有更小的 Banner 占位
P.S.-3 >> .promote-banner-sm (Product Listing) >> 是為了讓 Promote Banner (CPC Product) 在 Product Listing (.B2C-Style) 有更小的 Banner 占位
======================================================================================================================== */
/* header (標題/ CPC Product) >> 下方距離 >> Product Main Category + Sub (.B2C-Style) >> */
.B2C-Style #third_category .header/* CPC 第三層選單頁 */,
.B2C-Style #main_category .header/* CPC 主選單頁 */,
.B2C-Style .product-snippet:has(.promote-banner, .promo_item) .header {
margin-bottom: 15px;
padding-bottom: 0px;
border-bottom: none;
margin: 0 auto 15px;
}
/* Promote Banner (CPC Product) >> 【All Banner 一般設定】 >> for Product Main/ Sub Category/ Product Listing (.B2C-Style) */
.B2C-Style #product_listing .promote-banner/* Promote Banner 底部距離 >> for #product_listing */,
.B2C-Style [id*="product_listing"] .promote-banner/* Promote Banner 底部距離 >> for #product_listing */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
overflow: hidden; /* 防止內容溢出 */
box-sizing: border-box; /* 防止 padding 或 border 影響總寬度 */
margin: 0 auto;
margin-bottom: 2%;
margin-bottom: 1.5%;
margin-bottom: 1rem !important;
}
/* Promote Banner (Product Listing/ CPC Product) >> 【All Banner 一般設定】 >> for Product Listing (.B2C-Style) */
.B2C-Style #product_listing .promote-banner,
.B2C-Style [id*="product_listing"] .promote-banner {
width: 100% !important;/* 只有 Product Listing 才需要設定寬度 (Category Banner 不用) */
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
margin-bottom: 10px !important;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 + h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
line-height: 1.3em;
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Category Title + Top Button x 3 >> Main + Subcategory Product Page */
.B2C-Style #third_category .product_button/* CPC 第三層選單頁 */,
.B2C-Style #main_category .product_button/* CPC 主選單頁 */,
.B2C-Style #main_category .product_button {
margin-bottom: 0.5rem;
}
}
/*************** 【 Promote Large Banner(大) (CPC Product)/ .promote-banner-lg 】 >> for Product Main Category (.B2C-Style) *****************/
/* Slide Banner >> 垂直置中 */
/* 居中 Slide Banner 下一層 >> .text-content (包圖文/ 左右 Banner 架構不同沒包)
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) .text-center,
*/
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */ {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: center; /* 水平置中 */
}
/* Slide Banner >> 左右箭頭 + i >> 垂直居中 */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right i,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left i,
.B2C-Style .swiper_wrapper #slider-arrow-right i,
.B2C-Style .swiper_wrapper #slider-arrow-left i,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right,
.B2C-Style .swiper_wrapper #slider-arrow-left {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Slide Banner >> 左右箭頭 */
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right,
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right,
.B2C-Style .swiper_wrapper #slider-arrow-left {
background: transparent;
top: 50%;
transform: translateY(-50%);
width: 65px;
height: auto !important;
margin-top: 0px;
padding: 0;
}
/* Promote Banner (CPC Product) >> 【一般 Default Banner 高度】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: 500px;
max-height: 500px;
margin-bottom: 1.3rem !important;
/* 包含 padding 和 border 在內的寬度和高度計算
box-sizing: border-box;
*/
}
/* Promote Banner (CPC Product) >> 【.container (Banner 內框)】>> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner .swiper-slide .container {
/* 包含 padding 和 border 在內的寬度和高度計算
box-sizing: border-box;
*/
/* 防止內容溢出
overflow: hidden;
*/
width: 90% !important;
margin: 0 auto;
width: 93% !important;
width: calc(100% - 7%) !important; /* (因為外面的 .container.core-container 是 70%) >> 93% 等於 100% 減 7% */
}
/* Promote Banner (居中 Banner/ CPC Product) >> 【text-block.text_block_top-center】 >>位置 (.B2C-Style) */
.B2C-Style .promote-banner .slider-caption .slider-caption-center,
.B2C-Style .promote-banner .slider-caption {
margin-top: 0 !important;/* 蓋掉 Home Banner */
}
/* Promote Banner >> 【滑動點點指標】 >> for Product Main Category (.B2C-Style) >> CPC Product */
.B2C-Style .promote-banner #slider.homepage-slider .swiper-pagination,
.B2C-Style .promote-banner .homepage-slider .swiper-pagination {
bottom: 0px;
}
/* Promote Banner >> 【.bigTitle (Title)】 >> for Product Main Category (.B2C-Style) >> CPC Product */
.B2C-Style .promote-banner .homepage-slider .bigTitle {
color: unset !important;
}
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-container,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-wrapper,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-slide {
height: 500px !important; /* 使用 height 而非 max-height */
max-height: 500px;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【圖片】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) img/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) img/* 左右 Slide Banner */ {
width: 70%;
max-width: 500px;
}
/* Promote Large Banner(大) (居中 Banner/ CPC Product) >> 【圖片】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) img/* 居中 Slide Banner */ {
width: 70%;
max-width: 450px;
max-height: 300px;
}
/******** 【 RWD >> Promote Large Banner(大) (CPC Product) 】 >> for Product Main Category (.B2C-Style) **********/
@media (min-width: 768px) {
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2em !important;
line-height: 1.3em;
}
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
@media (min-width: 992px) {
/* (要跟卡片一樣寬) Promote Large Banner(大/小) (.promote-banner-lg/ CPC Product) >> 【大/小 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style div:has(.promote-banner + div > div.row > div > .promo_block) .markets-top-banner/* (小 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div.row > div > .promo_block) .markets-top-banner/* (大 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div > div.row > div > .promo_block) #slider/* (小 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div.row > div > .promo_block) #slider/* (大 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"],
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"],
.B2C-Style .promote-banner [id*="slider"] {
/*
width: calc(100% - 20px);
*/
}
/* .container (要跟 Promote Item 卡片字一樣齊左) Promote Large Banner(大/小) (CPC Product) >> 【大/小 Banner 左右距離】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner .swiper-container .swiper-wrapper .swiper-slide .container {
margin-left: 45px !important;
margin-right: 45px !important;
margin-left: 50px !important;
margin-right: 50px !important;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-container,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-wrapper,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-slide,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: 470px !important; /* 使用 height 而非 max-height */
max-height: 470px;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2.2em !important;
font-size: 2em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */ {
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> h3 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */ {
font-size: 2em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (居中 Banner (有圖檔縮小因字) / CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container:has(h3) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) img/* 居中 Slide Banner */ {
width: 25%;
max-width: 280px;
max-height: 250px;
width: 20%;
max-width: 240px;
max-height: 190px;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2.3em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (左右 Banner/ CPC Product) >>【 h3 】>> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */ {
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */ {
font-size: 2.1em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 0.9em;
line-height: 1.2em;
}
/* Promote Large Banner(大) (居中 Banner/ CPC Product) >> 【圖片】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) img/* 居中 Slide Banner */ {
width: 70%;
max-width: 450px;
max-height: 300px;
}
}
/* 1921 以上 */
@media (min-width: 1921px) {
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-container,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-wrapper,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-slide,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: 570px !important; /* 使用 height 而非 max-height */
max-height: 570px;
height: 520px !important; /* 使用 height 而非 max-height */
max-height: 520px;
height: 540px !important; /* 使用 height 而非 max-height */
max-height: 540px;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2.4em !important;
font-size: 2.6em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */ {
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */ {
font-size: 2.1em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 span.bigTitle2 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle2/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle2/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3 span.bigTitle2,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3 span.bigTitle2,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle2/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle2/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3 span.bigTitle2,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 span.bigTitle2 {
font-size: 2em !important;
font-size: 2.3em !important;
line-height: 1.3em;
font-size: 49px !important;
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 span.bigTitle 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3 span.bigTitle,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3 span.bigTitle,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3 span.bigTitle,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 span.bigTitle {
font-size: 1.9em !important;
font-size: 2.1em !important;
line-height: 1.3em;
font-size: 45px !important;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.3em;
}
}
/* 1200 ~ 1366 超窄筆電寬螢幕 */
@media (min-width: 1200px) and (max-width: 1366px) {
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner:is(.promote-banner-lg) [id*="slider"].homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-container,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-wrapper,
.B2C-Style .promote-banner:is(.promote-banner-lg) .swiper-slide,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: 470px !important; /* 使用 height 而非 max-height */
max-height: 470px;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2.2em !important;
font-size: 2em !important;
line-height: 1.3em;
}
/* Promote Large Banner(大) (左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */ {
}
/* Promote Large Banner(大) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider.product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */ {
font-size: 2em !important;
line-height: 1.3em;
}
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
/* 1199 以下 */
@media (max-width: 1199px) {
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: auto !important; /* 使用 height 而非 max-height */
max-height: unset !important;
top: unset !important;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.7em !important;
line-height: 1.3em;
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 0.8em !important;
line-height: 1.2em;
line-height: 1.4em;
}
}
/* 980 ~ 1199 超窄筆電寬螢幕 */
@media (min-width: 980px) and (max-width: 1199px) {
.B2C-Style .promote-banner .homepage-slider .col-md-5.text-content,
.B2C-Style .promote-banner .product-slider .col-md-5.text-content {
width: 50%;
}
/* Promote Large Banner(大) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.7em !important;
font-size: 1.9em !important;
line-height: 1.3em;
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner #slider.product-slider .text-block h4 {
font-size: 0.8em !important;
line-height: 1.2em;
line-height: 1.4em;
}
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner #slider.homepage-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner #slider.product-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner #slider.homepage-slider .text-block .btn[class*="btn-"] + .btn,
.B2C-Style .promote-banner #slider.product-slider .text-block .btn[class*="btn-"] + .btn {
margin-left: 10px;
}
}
/* 950 以下 */
@media (max-width: 950px) {
/* Promote Large Banner(大) (CPC Product) >> 【高度 + 下距離】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider {
margin-bottom: 5%;
}
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right, .B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right, .B2C-Style .swiper_wrapper #slider-arrow-left {
width: 35px;
}
}
/* 768以下 */
@media (max-width: 768px) {
.B2C-Style [id*="slider"].swiper_wrapper .swiper-slide::before,
.B2C-Style .swiper-wrapper .swiper-slide::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
}
/* 480 以下 */
@media (max-width: 480px) {
.B2C-Style #product_listing .promote-banner {
transform: translateX(0.45rem);
}
.B2C-Style [id*="slider"].swiper_wrapper .swiper-slide::before,
.B2C-Style .swiper-wrapper .swiper-slide::before {
background-color: rgba(0, 0, 0, .5);
}
.B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-right, .B2C-Style [id*="slider"].swiper_wrapper #slider-arrow-left,
.B2C-Style .swiper_wrapper #slider-arrow-right, .B2C-Style .swiper_wrapper #slider-arrow-left {
width: 35px;
}
.B2C-Style [id*="slider"].swiper_wrapper .swiper-slide .container,
.B2C-Style .swiper-wrapper .swiper-slide .container {
margin: 0 auto;
}
/* 居中 Slide Banner 下一層 >> .text-content (包圖文/ 左右 Banner 架構不同沒包)
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) .text-center,
*/
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */ {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center; /* 水平置中 */
padding-top: 9%;
}
}
/*************************************************************************************************************************
( G-2 ). 【 Product SubCategory (.B2C-Style) >> CPC Product 】第三層產品目錄頁面 (.B2C-Style >> 2024)
>> Promote Large Banner(大) (CPC Product) for Product SubCategory (.B2C-Style) >> CPC Product
>> Product Item (CPC Product) for Product SubCategory (.B2C-Style) >> CPC Product
P.S.-2 >> .promote-banner-sm >> 是為了讓 Promote Large Banner(大) (CPC Product) 在 Product Main Category (.B2C-Style) 有更小的 Banner 占位
======================================================================================================================== */
/* 小點點 >> Promote Small Banner(小) (.promote-banner-sm/ CPC Product) >> 【小 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-sm) .swiper-container .swiper-pagination span {
width: 9px;
height: 9px;
}
/* Promote Small Banner(小) (.promote-banner-sm/ CPC Product) >> 【小 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"].homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-sm) .homepage-slider,
.B2C-Style .promote-banner:is(.promote-banner-sm) .swiper-container,
.B2C-Style .promote-banner:is(.promote-banner-sm) .swiper-wrapper,
.B2C-Style .promote-banner:is(.promote-banner-sm) .swiper-slide {
height: 320px !important; /* 使用 height 而非 max-height */
max-height: 320px !important;
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【圖片】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) img/* 居中 Slide Banner */,
.B2C-Style .promote-banner:is(.promote-banner-sm) [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) img/* 左右 Slide Banner */ {
width: 45%;
max-width: 340px;
display: none !important; /* 因為居中小 Banner 高度不夠，故在此隱藏 */
}
/******** 【 RWD >> Promote Small Banner(小) (CPC Product) 】 >> for Product Main Category (.B2C-Style) **********/
@media (min-width: 768px) {
/* Promote Small Banner(小)(H3) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2em !important;
line-height: 1.3em;
}
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {}
/* 1921 以上 */
@media (min-width: 1921px) {
/* Promote Small Banner(小)(H3) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2.2em !important;
line-height: 1.2em;
}
/* Promote Small Banner(小) (居中 Banner (字縮小因有圖檔) / CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container:has(img) .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider.homepage-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider.product-slider:has(img) .text-block:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */ {
font-size: 2.1em !important;
line-height: 1.3em;
}
/* Promote Small Banner(小)(H3 span.bigTitle2) (居中 + 左右 Banner/ CPC Product) >> 【 h3 span.bigTitle2 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle2/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle2/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle2/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle2/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 2em !important;
line-height: 1.2em;
font-size: 49px !important;
}
/* Promote Small Banner(小)(H3 span.bigTitle2) (居中 + 左右 Banner/ CPC Product) >> 【 h3 span.bigTitle 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3 span.bigTitle/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3 span.bigTitle/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.9em !important;
line-height: 1.2em;
font-size: 45px !important;
}
/* Promote Small Banner(小) (左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */ {
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
/* 1200 ~ 1366 超窄筆電寬螢幕 */
@media (min-width: 1200px) and (max-width: 1366px) {
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.product-slider .text-block h4 {
font-size: 1em !important;
line-height: 1.2em;
}
}
/* 1199 以下 */
@media (max-width: 1199px) {
/* Promote Large Banner(大) (.promote-banner-lg/ CPC Product) >> 【大 Banner 高度】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner [id*="slider"] .swiper-slide .container .slider-caption,
.B2C-Style .promote-banner [id*="slider"].homepage-slider,
.B2C-Style .promote-banner .homepage-slider,
.B2C-Style .promote-banner .swiper-container,
.B2C-Style .promote-banner .swiper-wrapper,
.B2C-Style .promote-banner .swiper-slide {
height: auto !important; /* 使用 height 而非 max-height */
max-height: unset !important;
top: unset !important;
}
/* Promote Small Banner(小)(H3) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.7em !important;
line-height: 1.3em;
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.product-slider .text-block h4 {
font-size: 0.8em !important;
line-height: 1.2em;
line-height: 1.4em;
}
}
/* 980 ~ 1199 超窄筆電寬螢幕 */
@media (min-width: 980px) and (max-width: 1199px) {
/* Promote Small Banner(小)(H3) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.7em !important;
font-size: 1.9em !important;
line-height: 1.3em;
}
/* Promote Small Banner(小) (居中 + 左右 Banner/ CPC Product) >> 【 h4 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.homepage-slider .text-block h4,
.B2C-Style .promote-banner.promote-banner-sm #slider.product-slider .text-block h4 {
font-size: 0.8em !important;
line-height: 1.2em;
line-height: 1.4em;
}
.B2C-Style .promote-banner [id*="slider"].homepage-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner [id*="slider"].product-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner #slider.homepage-slider .text-block .btn[class*="btn-"]:nth-child(2),
.B2C-Style .promote-banner #slider.product-slider .text-block .btn[class*="btn-"]:nth-child(2) {
margin-left: 10px;
}
}
/* 950 以下 */
@media (max-width: 950px) {}
/* 480 以下 */
@media (max-width: 480px) {
/* 居中 Slide Banner 下一層 >> .text-content (包圖文/ 左右 Banner 架構不同沒包)
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) .text-center,
*/
.B2C-Style #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center)/* 居中 Slide Banner */,
.B2C-Style #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center)/* 左右 Slide Banner */ {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center; /* 水平置中 */
padding-top: 9%;
}
/* Promote Small Banner(小)(H3) (居中 + 左右 Banner/ CPC Product) >> 【 h3 】 >> for Product Main Category (.B2C-Style) */
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"] .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].homepage-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm [id*="slider"].product-slider .text-block h3,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:is(.text_block_top-center, .text_block_bottom-center) h3/* 居中 Slide Banner */,
.B2C-Style .promote-banner.promote-banner-sm #slider .swiper-slide .container .slider-caption:not(.text_block_top-center):not(.text_block_bottom-center) h3/* 左右 Slide Banner */,
.B2C-Style .promote-banner #slider.homepage-slider .text-block h3,
.B2C-Style .promote-banner #slider.product-slider .text-block h3 {
font-size: 1.5em !important;
line-height: 1.3em;
}
.B2C-Style .promote-banner #slider .swiper-slide .slider-caption a.btn.btn-primary {
width: auto !important;
text-align: center;
margin-bottom: 2%;
margin-top: 2%;
min-width: 65%;
}
}
/*************************************************************************************************************************
( G-3-1 ). 【 Marketing Richcontent Overview (.B2C-Style) >> CPC Product 】主/次產品目錄頁面 (.B2C-Style >> 2024)
>>【 Product Item (產品類別 IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
>>【 Spotlight Item (marketing-material IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
>> .qs-block .qs-header ul.qs-filter li
======================================================================================================================== */
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 45px;
font-size: 2.83rem;
line-height: 1.3em;
}
/* 979 以上 */
@media (min-width: 979px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
/* 1367 以上 */
@media (min-width: 1367px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 38px;
font-size: 2.5rem;
line-height: 1.3em;
}
}
/* 1400 以上 */
@media (min-width: 1400px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 40px;
font-size: 2.6rem;
line-height: 1.3em;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 45px;
font-size: 2.83rem;
line-height: 1.3em;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 45px;
font-size: 2.83rem;
line-height: 1.3em;
}
}
/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
@media (min-width: 769px) and (max-width: 979px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* Main/ Sub Category (.B2C-Style) >> Marketing Richcontent Overview (.product-snippet/ CPC Product) >> 【 Section Title/ H3 】 >> for Product Main/ Sub Category (.B2C-Style) */
.B2C-Style .product-snippet section-marketing_materials_3 h3,
.B2C-Style .product-snippet section-marketing_materials_2 h3,
.B2C-Style .product-snippet section-marketing_materials_1 h3,
.B2C-Style .product-snippet section-marketing_materials_0 h3,
.B2C-Style .product-snippet div:is(section-marketing_materials_0, section-marketing_materials_1, section-marketing_materials_2, section-marketing_materials_3) h3,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3.RC_LTitle,
.B2C-Style .product-snippet [id*="section-marketing_materials_"] h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3em;
}
}
/*************************************************************************************************************************
( G-3-2 ). 【 Spotlightg >> Filter Menu Menu for 塊狀堆疊 Product/ Spotlight Item >> Product Main/ Sub Category (.B2C-Style) >> CPC Product 】主/次產品目錄頁面 (.B2C-Style >> 2024)
>>【 Product Item (產品類別 IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
>>【 Spotlight Item (marketing-material IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
>> (Desktop Filter Tab Menu) : .qs-block .qs-header ul.qs-filter li (桌機版面/ Desktop)
>> (Mobile Filter Button) : .qs-block .qs-header div.dropdown button#material_filter (手機行動版面/ Mobile)
>> (Mobile Filter Drop Down) : .qs-block .qs-header div.dropdown ul.qs-filter li (手機行動版面/ Mobile)
======================================================================================================================== */
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> .qs-block >> 高度太少會彈來彈去 */
.B2C-Style .qs-block {
min-height: 450px;
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> 外層 + UL + Li */
.B2C-Style .qs-block .qs-header ul.qs-filter li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a)/* Filter Menu >> Li >> a */,
.B2C-Style .qs-block .qs-header ul.qs-filter li:not(.qs-block .qs-header div.dropdown ul.qs-filter li)/* Filter Menu >> Li */,
.B2C-Style .qs-block .qs-header ul.qs-filter:not(.qs-block .qs-header div.dropdown ul.qs-filter)/* Filter Menu >> UL */,
.B2C-Style .qs-block .qs-header/* Filter Menu >> 外層 */ {
letter-spacing: -0.001em;
display: -webkit-box;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
display: flex;
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
justify-content: center; /* 水平置中 */
flex-direction: row; /* 水平排列 (所有物件排在一行) */
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> 外層 */
.B2C-Style .qs-block .qs-header {
margin-bottom: 20px; /* 下方間距 */
margin-bottom: 35px; /* 下方間距 */
min-height: 45px;
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL */
.B2C-Style .qs-block .qs-header ul.qs-filter li,
.B2C-Style .qs-block .qs-header ul.qs-filter {
list-style: none; /* 移除預設的 list-style */
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL */
.B2C-Style .qs-block .qs-header ul.qs-filter {
margin: 0;
padding: 0;
gap: 10px; /* li 之間的間距 */
margin-left: -0.5rem;
margin-right: -0.5rem;
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL >> Li + Li a */
.B2C-Style .qs-block .qs-header ul.qs-filter li a,
.B2C-Style .qs-block .qs-header ul.qs-filter li {
line-height: 1.3rem;
text-align: center;
min-height: 40px;
margin: 0;
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL >> Li */
.B2C-Style .qs-block .qs-header ul.qs-filter li {
min-width: 90px;
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL >> Li:hover */
.B2C-Style .qs-block .qs-header ul.qs-filter li:hover {
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL >> Li.active */
.B2C-Style .qs-block .qs-header ul.qs-filter li.active {
backdrop-filter: blur(5px);
}
/* (Desktop Tab Menu) Spotlightg >> Filter Menu >> UL >> Li >> a */
.B2C-Style .qs-block .qs-header ul.qs-filter li a {
/* display: inline-block; */
text-decoration: none;
white-space: nowrap; /* 防止文字換行 */
padding: 0 23px;
}
/* (Desktop Tab Menu) (.qs-header.single-category ) Spotlightg >> Filter Menu >> UL >> Li >> a >> 不能點選 */
.B2C-Style .qs-block .qs-header.single-category ul.qs-filter li a {
pointer-events: none;
}
/* 1180 以上 */
@media (min-width: 1180px) {
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
padding: 0 18px;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* 超過 5 個 Filter Item 時字級調整 */
.B2C-Style .qs-block .qs-header ul.qs-filter.filter-over-5 li a:not(.qs-block .qs-header div.dropdown ul.qs-filter li a) {
padding: 0 23px;
}
}
/* 1200 以下 */
@media (max-width: 1200px) {
/* (.qs-header.single-category )(Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 只有一個類別內容時 >> 只出現標題 "All Resources >> 不能點選" */
.B2C-Style .qs-block .qs-header.single-category div.dropdown button#material_filter {
pointer-events: none;
}
/* (.qs-header.single-category )(Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 只有一個類別內容時 >> 只出現標題 "All Resources" */
.B2C-Style .qs-block .qs-header.single-category div.dropdown span.caret_New::before {
display: none;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 所有寬度 */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li,
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter,
.B2C-Style .qs-block .qs-header div.dropdown {
position: relative;
margin: 0 auto;
float: none;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 所有寬度 */
.B2C-Style .qs-block .qs-header div.dropdown,
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
width: 100%;
}
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
width: 100%;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Button */
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
padding: 0.56rem 2rem !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 選單 */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter {
flex-direction: column;/* 垂直排列 */
top: 0px !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li + Li a */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li a,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
text-align: left;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
padding: 0.5rem 1rem;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li a */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li a {
min-height: unset;
padding-left: 0 !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 箭頭 */
.B2C-Style .qs-block .qs-header div.dropdown span.caret_New::before {
top: auto;
}
}
/* 912 以下 */
@media (max-width: 912px) {
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 箭頭 */
.B2C-Style .qs-block .qs-header div.dropdown span.caret_New::before {
top: 4px;
top: 6px;
top: auto;
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 所有寬度 */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li,
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter,
.B2C-Style .qs-block .qs-header div.dropdown {
position: relative;
margin: 0 auto;
float: none;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 所有寬度 */
.B2C-Style .qs-block .qs-header div.dropdown,
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
width: 100%;
}
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
width: 100%;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Button */
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
padding: 0.56rem 2rem !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 選單 */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter {
flex-direction: column;/* 垂直排列 */
top: 0px !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li + Li a */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li a,
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
text-align: left;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li {
padding: 0.5rem 1rem;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> Li a */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter li a {
min-height: unset;
padding-left: 0 !important;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 箭頭 */
.B2C-Style .qs-block .qs-header div.dropdown span.caret_New::before {
top: 4px;
top: 6px;
top: auto;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 所有寬度 */
.B2C-Style .qs-block .qs-header div.dropdown,
.B2C-Style .qs-block .qs-header div.dropdown button#material_filter {
width: 99%;
}
/* (Mobile Filter Button + Drop Down) (手機行動版面/ Mobile) >> 選單 */
.B2C-Style .qs-block .qs-header div.dropdown ul.qs-filter {
flex-direction: column;/* 垂直排列 */
top: -8px !important;
}
}
/*************************************************************************************************************************
( G-3-2 ). 【 塊狀堆疊 Product/ Spotlight Item >> Product Main/ Sub Category (.B2C-Style) >> CPC Product 】主/次產品目錄頁面 (.B2C-Style >> 2024)
>>【 Product Item (產品類別 IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
>>【 Spotlight Item (marketing-material IItem 堆疊/ CPC Product) 】 >> for Product Main/ Sub Category (.B2C-Style)
======================================================================================================================== */
/* Product Item/ Marketing Material Item >> 外層 */
.B2C-Style .marketing-material/* Marketing Material Item */,
.B2C-Style .product_section/* Product Item */ {
padding-left: unset !important;
margin-bottom: 100px; /* 下方間距 */
margin-bottom: 8%;
margin-bottom: 5%;
}
.B2C-Style .marketing-material/* Marketing Material Item */ {
margin-top: 5%;
}
/* Marketing Material Item 同時上方接著 Product Item */
.B2C-Style div:has(#home_promotion_top, .promo_block) + .marketing-material {
margin-top: 3%;
}
/* Marketing Material Item >> 內層 .qs-gallery */
.B2C-Style .marketing-material [id*="home_promotion_"]/* Marketing Material Item */,
.B2C-Style .marketing-material #home_promotion_top/* Marketing Material Item */,
.B2C-Style .marketing-material .promo_block/* Marketing Material Item */,
.B2C-Style .marketing-material .qs-gallery/* Marketing Material Item */ {
min-height: 350px;
/* (原本是用程式算高度,但固定高度會被遮住)
height: auto !important;
*/
/* 會抖動 transition: all 0.1s ease-in-out 0s !important; */
}
/* All Item (基本/ CPC Product) >> 先把每張卡片的下方距離做出來（垂直間距） */
/* 欄間距解法（不改 HTML、不用 padding，不影響 .hover_block）*/
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item,
.B2C-Style .marketing-material #home_promotion_top .promo_item,
.B2C-Style .marketing-material .promo_block .promo_item,
.B2C-Style .marketing-material .promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item,
.B2C-Style .product_section #home_promotion_top .promo_item,
.B2C-Style .product_section .promo_block .promo_item,
.B2C-Style .product_section .promo_item {
margin-bottom: 20px; /* 垂直留白 */
margin-bottom: 1.25rem; /* 垂直留白 */
overflow: hidden; /* 背景 + 圓角一致 */
/* 會抖動 transition: all 0.1s ease-in-out 0s !important; */
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* All Item ( H3 有 H4) 【 All Item (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h4):hover h3,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h4):hover h3,
.B2C-Style .marketing-material .promo_block .promo_item:has(h4):hover h3,
.B2C-Style .marketing-material .promo_item:has(h4):hover h3,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h4) h3,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h4) h3,
.B2C-Style .marketing-material .promo_block .promo_item:has(h4) h3,
.B2C-Style .marketing-material .promo_item:has(h4) h3,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:has(h4):hover .hover_block h3,
.B2C-Style #home_promotion_top.promo_block .promo_item:has(h4):hover .hover_block h3,
.B2C-Style #home_promotion_top .promo_item:has(h4):hover .hover_block h3,
.B2C-Style [id*="home_promotion_"] .promo_item:has(h4):hover .hover_block h3,
.B2C-Style .promo_block .promo_item:has(h4):hover .hover_block h3,
/* All Item (H4) 【 All Item (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item h4,
.B2C-Style .marketing-material .promo_block .promo_item h4,
.B2C-Style .marketing-material .promo_item h4,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item h4,
.B2C-Style .product_section #home_promotion_top .promo_item h4,
.B2C-Style .product_section .promo_block .promo_item h4,
.B2C-Style .product_section .promo_item h4,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item .hover_block h4,
.B2C-Style #home_promotion_top.promo_block .promo_item .hover_block h4,
.B2C-Style #home_promotion_top .promo_item .hover_block h4,
.B2C-Style [id*="home_promotion_"] .promo_item .hover_block h4,
.B2C-Style .promo_block .promo_item .hover_block h4 {
margin-bottom: 5px !important;
margin-bottom: 0.35rem !important;
}
/* All Item ( H4 有 H3) 【 All Item (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h3) h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h3) h4,
.B2C-Style .marketing-material .promo_block .promo_item:has(h3) h4,
.B2C-Style .marketing-material .promo_item:has(h3) h4,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:has(h3) h4,
.B2C-Style .product_section #home_promotion_top .promo_item:has(h3) h4,
.B2C-Style .product_section .promo_block .promo_item:has(h3) h4,
.B2C-Style .product_section .promo_item:has(h3) h4,
.B2C-Style [id*="home_promotion_"].promo_block .promo_item:has(h3) .hover_block h4,
.B2C-Style #home_promotion_top.promo_block .promo_item:has(h3) .hover_block h4,
.B2C-Style #home_promotion_top .promo_item:has(h3) .hover_block h4,
.B2C-Style [id*="home_promotion_"] .promo_item:has(h3) .hover_block h4,
.B2C-Style .promo_block .promo_item:has(h3) .hover_block h4 {
width: 100%;
margin-bottom: 10px !important;
margin-bottom: 0.6rem !important;
/* max-height: 100px;
margin-bottom: 2rem !important;
*/
}
/* 僅 Marketing Spotlight Item ( H4 有 H3) 【 .marketing-material (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h3) h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h3) h4,
.B2C-Style .marketing-material .promo_block .promo_item:has(h3) h4,
.B2C-Style .marketing-material .promo_item:has(h3) h4 {
/* margin-bottom: 0.1rem !important; */
transform: translateY(-5px);
transition: all 0.4s ease-in-out 0s;
}
/* 僅 Marketing Spotlight Item:hover ( H4 有 H3) 【 .marketing-material (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:hover:has(h3) h4,
.B2C-Style .marketing-material #home_promotion_top .promo_item:hover:has(h3) h4,
.B2C-Style .marketing-material .promo_block .promo_item:hover:has(h3) h4,
.B2C-Style .marketing-material .promo_item:hover:has(h3) h4 {
/* margin-bottom: 0.1rem !important; */
transform: translateY(0px);
transition: all 0.3s;
}
/* 僅 Product Item ( H3 有 H4) 【 .product_section (CPC Product) 】 >> 底部距離 */
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .promo_item:has(h4):hover .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .promo_item:has(h4):hover .hover_block h3,
.B2C-Style .product_section .promo_block.no-slide .promo_item:has(h4):hover .hover_block h3,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section .promo_block.no-slide .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section [id*="home_promotion_"].promo_block .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section #home_promotion_top .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:has(h4) .hover_block h3,
.B2C-Style .product_section .promo_block .promo_item:has(h4) .hover_block h3 {
margin-bottom: 0.5rem !important;
}
/* 僅 Product Item ( H4 有 H3) 【 .product_section (CPC Product) 】 >> 底部距離 */
.B2C-Style .product_section [id*="home_promotion_"].promo_block .promo_item:has(h3) .hover_block h4,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item:has(h3) .hover_block h4,
.B2C-Style .product_section #home_promotion_top .promo_item:has(h3) .hover_block h4,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:has(h3) .hover_block h4,
.B2C-Style .product_section .promo_block .promo_item:has(h3) .hover_block h4 {
margin-bottom: 1rem !important;
}
/* 僅 marketing-material ( p 有 H3/ 或沒有 H3) 【 .marketing-material (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"].promo_block .promo_item .hover_block p,
.B2C-Style .marketing-material #home_promotion_top.promo_block .promo_item .hover_block p,
.B2C-Style .marketing-material #home_promotion_top .promo_item .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item .hover_block p,
.B2C-Style .marketing-material .promo_block .promo_item .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"].promo_block .promo_item:has(h3) .hover_block p,
.B2C-Style .marketing-material #home_promotion_top.promo_block .promo_item:has(h3) .hover_block p,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h3) .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h3) .hover_block p,
.B2C-Style .marketing-material .promo_block .promo_item:has(h3) .hover_block p {
transform: translateY(1rem);
transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s;
width: 100% !important;
display: block;
margin-bottom: 1.4rem !important;
}
/* (Hover) 僅 marketing-material ( p 有 H3/ 或沒有 H3) 【 .marketing-material (CPC Product) 】 >> 底部距離 */
.B2C-Style .marketing-material [id*="home_promotion_"].promo_block .promo_item:hover .hover_block p,
.B2C-Style .marketing-material #home_promotion_top.promo_block .promo_item:hover .hover_block p,
.B2C-Style .marketing-material #home_promotion_top .promo_item:hover .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:hover .hover_block p,
.B2C-Style .marketing-material .promo_block .promo_item:hover .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"].promo_block .promo_item:has(h3):hover .hover_block p,
.B2C-Style .marketing-material #home_promotion_top.promo_block .promo_item:has(h3):hover .hover_block p,
.B2C-Style .marketing-material #home_promotion_top .promo_item:has(h3):hover .hover_block p,
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:has(h3):hover .hover_block p,
.B2C-Style .marketing-material .promo_block .promo_item:has(h3):hover .hover_block p {
transform: translateY(0rem);
transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s;
}
/* H3 超過 50字 >> .spotlight-title-50 >> 針對用選的文章類 */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-50,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-50,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-50,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-50 {
font-size: 1.1em !important;
line-height: 1.4em !important;
}
/* H3 超過 60字 >> .spotlight-title-60 >> 針對用選的文章類 */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-60,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-60,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-60,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-60 {
font-size: 1em !important;
line-height: 1.4em !important;
}
/* H3 超過 70字 >> .spotlight-title-80 >> 針對用選的文章類 */
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-70,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-70,
.B2C-Style #home_promotion_top .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-70,
.B2C-Style .promo_block .promo_item:is(.col-lg-4, .col-md-4) .hover_block h3.spotlight-title-70 {
font-size: 0.834em !important;
line-height: 1.5em !important;
}
/* Product Item (基本/ CPC Product) >> 上下左右都裁切 */
.B2C-Style .marketing-material .promo_item/* Marketing Material Item */,
.B2C-Style .product_section .promo_item/* Product Item */ {
/*
clip-path: inset(4% 2% 4% 2%);
clip-path: inset(4% 2% 4% 2% round var(--product-item-border-radius));
clip-path: inset(4% 2% 4% 2% round var(--marketing-item-border-radius));
*/
}
/* Product Item (兩個一排/ 各半/ CPC Product) >> 產品推廣項目（單數/奇數）>> 左邊不裁切 === */
.B2C-Style .product_section .col-md-6.promo_item:nth-child(odd) {
/*
clip-path: inset(4% 0% 4% 2%);
clip-path: inset(4% 0% 4% 2% round var(--product-item-border-radius));
*/
}
/* Product Item (兩個一排/ 各半/ CPC Product) >> 產品推廣項目（偶數）>> 右邊不裁切 === */
.B2C-Style .product_section .col-md-6.promo_item:nth-child(even) {
/*
clip-path: inset(4% 2% 4% 0%);
clip-path: inset(4% 2% 4% 0% round var(--product-item-border-radius));
*/
}
/* Marketing Material Item (三個一排/ CPC Product) >> 產品推廣項目（1, 4, 7, 10, 13...) >> 左邊不裁切 === */
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+1) {
/*
clip-path: inset(4% 3.5% 4% 0%);
clip-path: inset(4% 2% 4% 0%);
clip-path: inset(4% 2% 4% 0% round var(--marketing-item-border-radius));
*/
}
/* Marketing Material Item (三個一排/ CPC Product) >> 產品推廣項目（3, 6, 9, 12, 15...) >> 右邊不裁切 === */
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n) {
/*
clip-path: inset(3.5% 0% 4% 4%);
clip-path: inset(2% 0% 4% 4%);
clip-path: inset(4% 0% 4% 2% round var(--marketing-item-border-radius));
*/
}
/* Marketing Material Item (四個一排) >> 第1個（1, 5, 9, 13...）>> 左邊不裁切 */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+1) {
/*
clip-path: inset(4% 2% 4% 0% round var(--marketing-item-border-radius));
*/
}
/* Marketing Material Item (四個一排) >> 第4個（4, 8, 12, 16...）>> 右邊不裁切 */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n) {
/*
clip-path: inset(4% 0% 4% 2% round var(--marketing-item-border-radius));
*/
}
/* Product/ Marketing Material Item (Product Item一個一排/ 最寬/ CPC Product ) >> 左右不裁切 */
.B2C-Style .marketing-material .col-md-12.promo_item/* Marketing Material Item */,
.B2C-Style .product_section .col-md-12.promo_item/* Product Item */ {
/*
clip-path: inset(4% 1% 4% 1%);
clip-path: inset(4% 0% 4% 0%);
clip-path: inset(4% 0% 4% 0% round var(--product-item-border-radius));
clip-path: inset(4% 0% 4% 0% round var(--marketing-item-border-radius));
*/
}
/* Product/ Marketing Material Item (基本/ CPC Product) >> 上下左右都裁切 */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+3)/* (四個一排) Marketing Material Item - 中間 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+2)/* (四個一排) Marketing Material Item - 中間 */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+2) /* (三個一排) Marketing Material Item - 中間 */
.B2C-Style .marketing-material .promo_item/* Marketing Material Item */,
.B2C-Style .product_section .promo_item/* Product Item */ {
/*
clip-path: inset(4% 2% 4% 2%);
clip-path: inset(4% 2% 4% 2% round var(--product-item-border-radius));
clip-path: inset(4% 2% 4% 2% round var(--marketing-item-border-radius));
*/
}
/* 只有 1、2、3 個 .qs-item 時，才讓容器居中 */
/* 2 個以內居中
.B2C-Style .marketing-material [id*="home_promotion_"].qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+2):first-child),
.B2C-Style .marketing-material #home_promotion_top.qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+2):first-child),
.B2C-Style .marketing-material .qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+2):first-child),
*/
/* 3 個以內居中 */
.B2C-Style .marketing-material [id*="home_promotion_"].qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+3):first-child),
.B2C-Style .marketing-material #home_promotion_top.qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+3):first-child),
.B2C-Style .marketing-material .qs-gallery.promo_block:has(.qs-item:nth-last-child(-n+3):first-child) {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
/* Product/ Marketing Material Item (基本/ CPC Product) >> 基本設定 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item/* Marketing Material Item */,
.B2C-Style .marketing-material #home_promotion_top .promo_item/* Marketing Material Item */,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item/* Product Item */,
.B2C-Style .product_section #home_promotion_top .promo_item/* Product Item */,
.B2C-Style .marketing-material .promo_item/* Marketing Material Item */,
.B2C-Style .product_section .promo_item/* Product Item */,
.B2C-Style .promo_block .promo_item/* Marketing Material Item */ {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
backdrop-filter: blur(0px); /* 背景模糊 */
filter: saturate(120%) brightness(100%) contrast(100%) !important;
}
/* Product/ Marketing Material Item:Hover (滑過基本/ CPC Product) >> Hover 基本設定 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:hover/* Marketing Material Item */,
.B2C-Style .marketing-material #home_promotion_top .promo_item:hover/* Marketing Material Item */,
.B2C-Style .marketing-material .promo_item:hover/* Marketing Material Item */,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:hover/* Product Item */,
.B2C-Style .product_section #home_promotion_top .promo_item:hover/* Product Item */,
.B2C-Style .product_section .promo_item:hover/* Product Item */,
.B2C-Style .promo_block .promo_item:hover/* Product Item */ {
filter: saturate(120%) brightness(100%) contrast(100%) !important;
backdrop-filter: blur(20px); /* 背景模糊 */
transform: translateY(0px);
transition: all 0.3s;
}
/* Product/ Marketing Material >> .promo_item:nth-child(2) (CPC Product) >> 刪除原有的 border-right */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item:nth-child(2)/* Marketing Material Item */,
.B2C-Style .marketing-material #home_promotion_top .promo_item:nth-child(2)/* Marketing Material Item */,
.B2C-Style .marketing-material .promo_item:nth-child(2)/* Marketing Material Item */,
.B2C-Style .product_section [id*="home_promotion_"] .promo_item:nth-child(2)/* Product Item */,
.B2C-Style .product_section #home_promotion_top .promo_item:nth-child(2)/* Product Item */,
.B2C-Style .product_section .promo_item:nth-child(2)/* Product Item */,
.B2C-Style .promo_block .promo_item:nth-child(2)/* Product Item */ {
border-right: none;
}
/* 當 li.active 內的 .promo_item 有 data-type="video" 時 >> .promo_item::before 才套用 Video 樣式 */
.B2C-Style .marketing-material .qs-block:has(.qs-filter li.active a) .promo_item[data-type="video"]::before {
background: rgba(0%, 0%, 0%,.0) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center/ 20%;
background: rgba(0%, 0%, 0%,.0) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center/ 25%;
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
filter: brightness(100%) contrast(100%) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.7)) !important;
opacity: 0.9;
}
/* 當 li.active 內的 a 有 data-type="all" 時， .qs-gallery 內的 .promo_item::before 才套用樣式 */
.B2C-Style .marketing-material .qs-block:has(.qs-filter li.active a[data-type="all"]) .promo_item[data-type="video"]::before {}
/* 當 li.active 內的 a 有 data-type="video" 時， .qs-gallery 內的 .promo_item::before 才套用樣式 */
.B2C-Style .marketing-material .qs-block:has(.qs-filter li.active a[data-type="all"]) .promo_item[data-type="video"]::before {}
/******** 【 RWD >> Product/ Marketing Material Item (堆疊/ CPC Product) 】 >> for Product Main Category (.B2C-Style) **********/
@media (min-width: 768px) {
/* 欄間距解法（不改 HTML、不用 padding，不影響 .hover_block）*/
/* 2-2. md 以上（Bootstrap 3 的 md 斷點：≥992px）做水平間距與寬度修正 */
/* 單欄滿寬（col）：左右也保留一樣的邊距，視覺不會貼齊外框 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-6.promo_item,
.B2C-Style .marketing-material .col-md-6.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item,
.B2C-Style .promo_block .col-md-6.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-12.promo_item,
.B2C-Style .marketing-material .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item,
.B2C-Style .product_section .col-md-12.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-6.promo_item,
.B2C-Style .promo_block .col-md-12.promo_item,
.B2C-Style .promo_block .promo_item {
margin-left: 10px;
margin-right: 10px;
}
/* 單欄滿寬（col-md-12）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style div:has(.promote-banner + div > div.row > div > .promo_block) .markets-top-banner/* (小 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div.row > div > .promo_block) .markets-top-banner/* (大 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div > div.row > div > .promo_block) #slider/* (小 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style div:has(.promote-banner + div.row > div > .promo_block) #slider/* (大 Banner) 跟卡片同寬 >> 每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12),
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item,
.B2C-Style .product_section .col-md-12.promo_item {
width: calc(100% - 20px) !important;
}
/* 兩欄寬（col-md-6）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-6.promo_item,
.B2C-Style .marketing-material .col-md-6.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item,
.B2C-Style .promo_block .col-md-6.promo_item {
width: calc(50% - 20px) !important;
}
/* 三欄寬（col-md-4）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item {
width: calc(33.333% - 20px) !important;
}
/* 四欄寬（col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(25% - 20px) !important;
width: calc(33.333% - 20px) !important;
}
/* 限定 Resources 區塊 Item */
.B2C-Style .marketing-material .qs-block [id*="home_promotion_"] .promo_item,
.B2C-Style .marketing-material .qs-block #home_promotion_top .promo_item,
.B2C-Style .marketing-material .qs-block .promo_item,
.B2C-Style .promo_block .qs-block .promo_item {
aspect-ratio: 1 / 1 !important; /* 1:1 正方形 */
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Product Item (基本/ CPC Product) >> 最低高度 */
.B2C-Style .product_section [id*="home_promotion_"] .promo_item,
.B2C-Style .product_section #home_promotion_top .promo_item,
.B2C-Style .product_section .promo_item {
min-height: 400px;
}
/* Marketing Material Item (基本/ CPC Product) >> 最低高度 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item,
.B2C-Style .marketing-material #home_promotion_top .promo_item,
.B2C-Style .marketing-material .promo_item {
min-height: 350px;
}
/* 四欄寬（col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(25% - 20px) !important;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Product Item (基本/ CPC Product) >> 最低高度 */
.B2C-Style .product_section [id*="home_promotion_"] .promo_item,
.B2C-Style .product_section #home_promotion_top .promo_item,
.B2C-Style .product_section .promo_item {
min-height: 480px;
}
/* Marketing Material Item (基本/ CPC Product) >> 最低高度 */
.B2C-Style .marketing-material [id*="home_promotion_"] .promo_item,
.B2C-Style .marketing-material #home_promotion_top .promo_item,
.B2C-Style .marketing-material .promo_item {
min-height: 350px;
}
/* Marketing Material Item (基本/ CPC Product) >> 1:1 正方形 */
.B2C-Style .marketing-material .promo_item {
aspect-ratio: 1 / 1;
}
}
/* 1921 以上 */
@media (min-width: 1921px) {}
/* 1366 以下 */
@media (max-width: 1400px) {
/* 三欄 / 四欄寬（col-md-4 / .col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(33.333% - 20px) !important;
}
}
/* 1281~1366 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* 三欄寬（col-md-4）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item {
width: calc(33.333% - 20px) !important;
}
/* 四欄寬（col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(25% - 20px) !important;
width: calc(33.333% - 20px) !important;
}
}
/* 989 以下 */
@media (max-width: 989px) {
/* 三欄 / 四欄寬（col-md-4 / .col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(50% - 20px) !important;
}
/* Product/Marketing Material Item (基本/ CPC Product) >> 除了下面的裁切，左右不裁切 >> for Mobile */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+1)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+2)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+3)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+1)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+2)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item/* Marketing Material Item */,
.B2C-Style .product_section .col-md-6.promo_item:nth-child(even)/* Product Item */,
.B2C-Style .product_section .col-md-6.promo_item:nth-child(odd)/* Product Item */,
.B2C-Style .product_section .col-md-6.promo_item/* Product Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-12.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-6.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-4.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item/* All Item */ {
/*
clip-path: inset(0% 0% 4% 0%);
clip-path: inset(0% 0% 4% 0% round var(--product-item-border-radius));
clip-path: inset(0% 0% 4% 0% round var(--marketing-item-border-radius));
*/
}
}
/* 980 以下 */
@media (max-width: 980px) {
/* 兩欄寬（col-md-6）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item {
width: calc(100% - 0px) !important;
}
/* 兩欄寬（col-md-6）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12),
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item {
width: calc(100% - 0px) !important;
width: calc(100% - 20px) !important;
}
/* 長條當背景圖靠右有壓 essentials Logo (.col-md-12.essentials-logo/ .col-md-12.bg-right-center) >> 手機版本 >> 背景位置調整至出現 essentials Logo >> 右對齊 */
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item.bg-right-center,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item.essentials-logo {
background-position: right center !important;
background-position: 90% center !important;/* 避免 logo 太靠右 */
}
/* 半條當背景圖靠右有壓 essentials Logo (.col-md-6.essentials-logo) >> 手機版本 >> 背景位置調整至出現 essentials Logo >> 右對齊 */
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-6.promo_item.essentials-logo {
background-position: right 70% !important;
}
}
/* 820 以下 */
@media (max-width: 820px) {
/* 三欄 / 四欄寬（.col-md-6/ .col-md-4 / .col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item {
width: calc(50% - 20px) !important;
}
/* 兩欄寬（col-md-6）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12),
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item,
.B2C-Style .product_section .col-md-12.promo_item {
width: calc(100% - 0px) !important;
width: calc(100% - 20px) !important;
}
/* Marketing Material Item (基本/ CPC Product) >> 除了下面的裁切，左右不裁切 >> for Mobile */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+1)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+2)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+3)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+1)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+2)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item/* Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-12.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-6.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-4.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-3.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .promo_item/* All Item */,
.B2C-Style div.promo_block .promo_item/* All Item */ {
width: 50%;
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* 兩欄寬（col-md-6）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item {
width: calc(100% - 0px) !important;
width: calc(100% - 20px) !important;
}
}
/* 750 以下 */
@media (max-width: 750px) {
/* 兩欄/ 三欄 / 四欄寬（.col-md-6/ .col-md-4 / .col-lg-3）：每邊各留 10px，總空隙 20px，寬度以 calc 抵銷 */
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-6.promo_item,
.B2C-Style .marketing-material .col-md-6.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-6.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-6.promo_item,
.B2C-Style .product_section .col-md-6.promo_item,
.B2C-Style .promo_block .col-md-6.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-md-4.promo_item,
.B2C-Style .marketing-material .col-md-4.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-4.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-4.promo_item,
.B2C-Style .product_section .col-md-4.promo_item,
.B2C-Style .promo_block .col-md-4.promo_item,
.B2C-Style .marketing-material [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .marketing-material #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .marketing-material .col-lg-3.promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top .col-lg-3.promo_item,
.B2C-Style .product_section .col-lg-3.promo_item,
.B2C-Style .promo_block .col-lg-3.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12),
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item,
.B2C-Style .product_section .col-md-12.promo_item {
width: calc(100% - 20px) !important;
width: calc(100% - 0px) !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* Marketing Material Item >> 內層 .qs-gallery */
.B2C-Style .marketing-material [id*="home_promotion_"]/* Marketing Material Item */,
.B2C-Style .marketing-material #home_promotion_top/* Marketing Material Item */,
.B2C-Style .marketing-material .promo_block/* Marketing Material Item */,
.B2C-Style .marketing-material .qs-gallery/* Marketing Material Item */ {
/* (原本是用程式算高度,但固定高度會被遮住) */
height: auto !important;
}
/* Product/Marketing Material Item (基本/ CPC Product) >> 除了下面的裁切，左右不裁切 >> for Mobile */
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+1)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+2)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n+3)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item:nth-child(4n)/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-lg-3.promo_item/* 新增：四個一排 */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+1)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item:nth-child(3n+2)/* Marketing Material Item */,
.B2C-Style .marketing-material .col-md-4.promo_item/* Marketing Material Item */,
.B2C-Style .product_section .col-md-6.promo_item:nth-child(even)/* Product Item */,
.B2C-Style .product_section .col-md-6.promo_item:nth-child(odd)/* Product Item */,
.B2C-Style .product_section .col-md-6.promo_item/* Product Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-12.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-6.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-4.promo_item/* Product + Marketing Material Item */,
.B2C-Style div:is(.product_section, .marketing-material) .col-md-3.promo_item/* Product + Marketing Material Item */,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section [id*="home_promotion_"].promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section .promo_block.no-slide .promo_item:is(.col-md-12),
.B2C-Style .product_section .promo_block.no-slide .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item.col-md-12,
.B2C-Style .product_section #home_promotion_top.promo_block .promo_item,
.B2C-Style .product_section [id*="home_promotion_"] .col-md-12.promo_item,
.B2C-Style .product_section #home_promotion_top .col-md-12.promo_item,
.B2C-Style .product_section .col-md-12.promo_item
.B2C-Style div:is(.product_section, .marketing-material) .promo_item/* All Item */,
.B2C-Style div.promo_block .promo_item/* All Item */ {
width: 100% !important;
}
.B2C-Style .qs-block .qs-header ul.qs-filter {}
/* 長條當背景圖靠右有壓 essentials Logo (.col-md-12.essentials-logo/ .col-md-12.bg-right-center) >> 手機版本 >> 背景位置調整至出現 essentials Logo >> 右對齊 */
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item.bg-right-center,
.B2C-Style .product_section #home_promotion_top.promo_block.no-slide .col-md-12.promo_item.essentials-logo {
background-position: right center !important;
background-position: 100% center !important;/* 避免 logo 太靠右 */
}
}
/*************************************************************************************************************************
( G-3-3 ). 【 Category Rich Content Introduction (圖文豐富簡介) >> Product Main/ Sub Category (.B2C-Style) >> CPC Product 】主/次產品目錄頁面 (.B2C-Style >> 2024)
>>【 .Full_Width_Rich_Content 】 >> [id*="_category"] .Full_Width_Rich_Content section-marketing_materials_0.markets-top-banner.richcontent .RC_BG .text-block .wording_block / .image_block
======================================================================================================================== */
/* (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content:has(.text_block_top-left, .text_block_top-right) .wording_block {
width: 75%;
margin: 0 auto;
}
@media (min-width: 768px) {
/* (.text-block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text-block:is(.text_block_top-right, .text_block_top-left) {
padding: 75px 0% 50px !important;
}
}
/* 991 以上 */
@media (min-width: 991px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .col-md-offset-1 {
left: 50%;
}
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
width: 80%;
}
/* (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
margin-left: 1%;
}
}
@media (min-width: 991px) and (max-width: 1199px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .image_block img {
transform: scale(1.1);
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* Text-Right >> (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .col-md-offset-1 {
margin-left: 6.7% !important;
margin-left: 8.7% !important;
}
/* Text-Right >> (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
margin-left: 1%;
width: 80%;
}
/* (.image_block/ Left) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-right .image_block {
position: relative;
left: 0%;
padding-right: 5%;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content:has(.text_block_top-left, .text_block_top-right) .wording_block {
width: 65%;
width: 70%;
margin: 0 auto;
}
/* Text-Right >> (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .col-md-offset-1 {
margin-left: 4.7% !important;
margin-left: 5.7% !important;
}
/* (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
width: 75%;
margin-left: 1%;
}
/* (.image_block/ Left) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-right .image_block {
position: relative;
left: 0%;
padding-right: 5%;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content:has(.text_block_top-left, .text_block_top-right) .wording_block {
width: 65%;
width: 70%;
margin: 0 auto;
}
/* Text-Right >> (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .col-md-offset-1 {
margin-left: 4.7% !important;
margin-left: 3.7% !important;
}
/* (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
width: 75%;
margin-left: 1%;
}
/* (.image_block/ Left) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-right .image_block {
position: relative;
left: 0%;
padding-right: 5%;
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content:has(.text_block_top-left, .text_block_top-right) .wording_block {
width: 65%;
width: 70%;
margin: 0 auto;
}
/* Text-Right >> (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .col-md-offset-1 {
margin-left: 4.7% !important;
margin-left: 3.7% !important;
}
/* (.wording_block) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
width: 75%;
margin-left: 1%;
}
/* (.image_block/ Left) Rich Content Introduction >> Product Main/ Sub Category */
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-right .image_block {
position: relative;
left: 0%;
padding-right: 5%;
}
}
@media (min-width: 1281px) and (max-width: 1366px) {
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-left .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block,
.B2C-Style [id*="_category"] .Full_Width_Rich_Content:has(.text_block_top-left, .text_block_top-right) .wording_block {
width: 70%;
margin: 0 auto;
}
.B2C-Style [id*="_category"] .Full_Width_Rich_Content .text_block_top-right .wording_block {
margin-left: 1%;
width: 80%;
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* (.text-block) Rich Content Introduction >> Product Main/ Sub Category >> All Rich Content Overview */
.B2C-Style [id*="_category"] div.Full_Width_Rich_Content .text-block {
padding: 50px 0px 10px !important;
}
/* (.text-block) Rich Content Introduction >> Product Main/ Sub Category >> 第一個 Rich Content Overview */
.B2C-Style [id*="_category"] div.Full_Width_Rich_Content:first-of-type .text-block {}
/* (.text-block) Rich Content Introduction >> Product Main/ Sub Category >> 最後一個 Rich Content Overview */
.B2C-Style [id*="_category"] div.Full_Width_Rich_Content:last-of-type .text-block {
padding-bottom: 40px !important;
}
/* (.text-block) Rich Content Introduction >> Product Main/ Sub Category >> All Rich Content Overview >> .wording_block */
.B2C-Style [id*="_category"] div.Full_Width_Rich_Content .text-block .wording_block {
margin-bottom: 15px !important;
}
}
/*************************************************************************************************************************
( H-1 ). 【 Product Listing Page Optimization】產品列表頁面 (.B2C-Style >> 2024)
======================================================================================================================== */
/* Filter Title (H2) >> Product Listing Page */
.B2C-Style #product_category_list h2 {
width: auto;
}
/* Filter Title (H4) >> Product Listing Page */
.B2C-Style #filter_form h4 {
margin-bottom: 0.9rem;
}
/* 下箭頭(短) >> Sort by/ Recent Button >> Product Listing Page */
.B2C-Style .btn .caret {
/* 原來的向下箭頭是用 border 做出來的
border: none;
*/
}
/* New Icon >> Product Listing Page */
.B2C-Style .product_list ul.icons li,
.B2C-Style .product_list ul.icons {
display: flex;
align-items: center;
align-content: center;
justify-content: flex-end;/* 靠右對齊 */
}
/* New Icon >> Product Listing Page */
.B2C-Style .product_list ul.icons li {
margin-bottom: 5px;
}
/* New Icon >> Product Listing Page */
.B2C-Style .product_list ul.icons li i {
/* margin-right: 4px; */
}
.B2C-Style .product_list .key-list li,
.B2C-Style .key-list li {
display: inline-block;
display: none;/* 一般情況下隱藏文字 */
font-size: .8em;
padding-left: 15px;
}
/* New Icon >> Product Listing Page */
.B2C-Style .product_list .key-list li span,
.B2C-Style .key-list li span {
display: inline-block;
display: none;/* 一般情況下隱藏文字 */
margin-left: 1px;
}
/* 有 :has(.icons.active) 的時候，顯示文字 */
.B2C-Style .product_list .key-list:has(.icons.active) li,
.B2C-Style .key-list:has(.icons.active) li {
display: inline-block;/* 有 :has(.icons.active) 的時候，顯示文字 */
}
/* New Icon >> Product Listing Page */
/* 有 :has(.icons.active) 的時候，顯示文字 */
.B2C-Style .product_list .key-list:has(.icons.active) li span,
.B2C-Style .key-list:has(.icons.active) li span {
display: inline-block;/* 有 :has(.icons.active) 的時候，顯示文字 */
}
/* 920 以上 */
@media (min-width: 920px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list,
.B2C-Style .core-container #product_listing .text-right.key-list {
width: auto;
position: absolute;
float: right;
text-align: right;
display: inline-flex;
align-items: center;
align-content: center;
right: 0;
top: 15px;
display: none;/* 一般情況下隱藏文字 */
}
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list li,
.B2C-Style .core-container #product_listing .text-right.key-list li {
display: inline-block;
}
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before,
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before,
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-asterisk::before,
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-asterisk::before {
top: 2px;
}
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before,
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before {
top: 1px;
}
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing:has(.icons.active) .text-right.key-list::after {
line-height: 1rem;
top: 0;
}
/* 有 :has(.icons.active) 的時候，顯示文字 */
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list:has(.icons.active),
.B2C-Style .core-container #product_listing .text-right.key-list:has(.icons.active) {
display: inline-flex;/* 有 :has(.icons.active) 的時候，顯示文字 */
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
justify-content: center; /* 水平置中 */
justify-content: flex-end; /* 內容物靠右 */
line-height: 1rem;
width: auto !important;
min-width: 110px;
top: unset !important;
top: 0.5rem !important;
right: unset !important;
right: -28px !important;
right: -1.5rem !important;
flex-wrap: nowrap;
min-width: 240px;
min-width: 205px;
}
/* 有 :has(.icons.active) 的時候，顯示文字 */
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing #categoryheader .row:has(.key-list ul.icons.active) {
display: inline-block;
position: relative;
float: right;
}
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Title (H1) >> Product Listing Page */
.B2C-Style section#content .content-wrap .core-container #product_listing div.row > div > h1,
.B2C-Style .core-container #product_listing h1 {
margin-bottom: 22px !important;
margin-bottom: 1.4rem !important;
position: relative;
top: 8px;
top: 0.4rem;
}
/* Sort by: (字) >> Product Listing Page */
.B2C-Style .core-container #product_listing #Sortblock .sorttitle {
position: relative;
top: 3px;
top: 0.3rem;
}
/* Sort by: (下拉選單) >> Product Listing Page */
.B2C-Style .core-container #product_listing #Sortblock button {
position: relative;
top: 5px;
top: 0.35rem;
}
/* Product Listing >> Product Image (不包含 Subcategory Product) */
.B2C-Style #product_lists .sect-divider div.product-image {
padding: 5%;
}
/* Product Listing >> 左邊選單區 */
.B2C-Style #filter_form {
min-height: 420px;
}
/* Product Listing >> Product Model Name (不包含 Subcategory Product) */
.B2C-Style div.product-title h3,
.B2C-Style .product-title h3 {
display: flex;
align-items: center;
align-content: center;
}
/* Product Listing >> Product Model Name >> New Icon (不包含 Subcategory Product) */
.B2C-Style div.product-title h3 i.icon-asterisk,
.B2C-Style .product-title h3 i.icon-asterisk {
margin-left: 5px;
margin-left: 0.3rem;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list,
.B2C-Style .core-container #product_listing .text-right.key-list {
top: 15px;
right: 226px;
right: 24%;
right: 170px;
right: 20%;
}
/* 分隔線 (New Icon) >> Note 註解 > 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .text-right.key-list::after {
content: '|';
color: #e7e7e7;
padding-left: 5px;
position: relative;
top: -4px;
right: -5px;
}
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing:has(.icons.active) .text-right.key-list::after {
line-height: 1rem;
top: 0;
}
/* Go Button >> 縮減與右邊 Comparision button 距離 */
.B2C-Style #search_form .form-group button.btn-go/* Product Listing + Single Page*/,
.B2C-Style .product-head button.btn-go/* Product Subcategory Page*/ {
margin-right: -10px;
margin-left: 0;
}
}
/* 1400 以上 */
@media (min-width: 1400px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list,
.B2C-Style .core-container #product_listing .text-right.key-list {
right: 210px;
right: 24%;
right: 170px;
right: 20%;
}
/* Product Listing >> 左邊選單區 */
.B2C-Style #filter_form {
min-height: 440px;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list,
.B2C-Style .core-container #product_listing .text-right.key-list {
right: 210px;
right: 21%;
right: 170px;
right: 17.5%;
}
}
/* 1500 以下 */
@media (max-width: 1500px) {
/* 不包含 Promote Item 區 */
.B2C-Style #product_listing #product_lists .general-products .product-record-single a.btn.btn-primary {
min-width: unset !important;
width: 100% !important;
}
}
/* 1281 ~ 1366 */
@Media (min-width: 1281px) and (max-width: 1366px) {}
/* 992以下 */
@media (max-width: 992px) {
.B2C-Style #product_listing #product_lists .general-products .product-record-single,
.B2C-Style .product-record-single {
height: auto !important;
margin-bottom: 3% !important;
}
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group,
.B2C-Style .product-record-single .sect-divider div.btn-group{
flex-direction: column; /* 垂直排列 (所有物件分行垂直排列) */
width: 100%;
}
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.btn-learnm,
.B2C-Style #product_listing .product-record-single .sect-divider .btn-group a.btn,
.B2C-Style .product-record-single .sect-divider .btn-group a.btn {
width: 100% !important;
margin-bottom: 2%;
margin-top: 2%;
padding: 0.5rem 2rem !important;
}
}
/* 768 以下 */
@media (max-width: 768px) {
.B2C-Style #product_listing #product_lists .general-products .product-record-single,
.B2C-Style .product-record-single {
height: auto !important;
}
.B2C-Style #product_lists div.product-title h3,
.B2C-Style #product_lists .product-title h3 {
font-size: 1.1rem;
font-size: 1.2rem;
}
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider h3 {
font-size: 1.4rem;
}
}
/* 480 以下 */
@media (max-width: 480px) {
.B2C-Style #product_listing .promote-products div.product-record-single div + div:has(.product-desc) {
padding-left: 7%;
padding-right: 7%;
padding-left: 6.5%;
padding-right: 6.5%;
}
/* Product Listing >> Product Image (不包含 Subcategory Product) */
.B2C-Style #product_lists .sect-divider div.product-image {
padding: 7%;
}
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group a.btn.btn-learnm,
.B2C-Style #product_listing .product-record-single .sect-divider .btn-group a.btn,
.B2C-Style .product-record-single .sect-divider .btn-group a.btn {
padding: 0.7rem 2rem !important;
}
}
/*************************************************************************************************************************
( H-1-2 ). (不包含推薦產品區) for CPC【 (沒有大邊框間距/ .dark-product-listing-image ) Product Listing Page Optimization】產品列表頁面 ( >> 2025)
======================================================================================================================== */
/* (不包含推薦產品區) 沒有大邊框間距/ 沒有.dark-listing >> Listing Item Block >> Product Listing >> .sect-divider */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider {
padding: 0 !important;
}
/* (不包含推薦產品區) 沒有大邊框間距/ 沒有.dark-listing >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image {
padding: 0% !important;
padding: 3% !important;
padding: 0.35rem !important;
padding: 0.4rem !important;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img,
.product_list .product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img,
.product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img {
padding: 5% !important;
padding: 4% !important;
padding: 3% !important;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image,
.product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image,
.product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image {
padding-bottom: 6% !important;
padding-bottom: 0.65rem !important;
padding-bottom: 0.7rem !important;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img,
.product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img,
.product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img {
border-radius: 5px;
border-radius: 5px 5px 0px 0px;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-desc + btn-group */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc {
padding: 0 8%;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> btn-group */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group {
padding-bottom: 8%;
}
/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .checkbox.product-list */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list {
margin: 0 8% 20px;
}
/* 1024 以上 */
@media (min-width: 1024px) {
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group {
min-width: 120px !important;
}
}
/* 1200 以上 */
@media (min-width: 1200px) {
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group {
min-width: 160px !important;
}
}
/* 1367 以上 */
@media (min-width: 1367px) {
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group {
min-width: 180px !important;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {}
/* 1500 以下 */
@media (max-width: 1500px) {
/* 不包含 Promote Item 區 */
.B2C-Style #product_listing #product_lists .general-products .product-record-single a.btn.btn-primary {
min-width: unset !important;
width: 100% !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {}
/*************************************************************************************************************************
( H-2 ). 【 Product Listing Page for Recommendation Products】推薦產品 + 產品列表頁面 (.B2C-Style >> 2024) >> CPC Product 】產品列表頁面 (.B2C-Style >> 2024)
>>【 Product Recommendation Listing/ CPC Product) 】 >> for #product_listing (.B2C-Style)
>>【 Product Recommendation Listing/ CPC Product) 】 >> for #product_listing (.B2C-Style)
>> #product_listing .promote-products .col-md-12.promote-wide.product-record-single (一組單排)
>> #product_listing .promote-products .col-md-6.promote-half.product-record-single (兩組一排)
======================================================================================================================== */
/*************** 【 Product Listing Page for Recommendation Products 】 >> 外框架調整 *****************/
/* Left Filter Block (.desktop-product-header/ CPC Product) >> 【移除左邊距離距離】 >> for #product_listing (.B2C-Style) */
.B2C-Style #product_listing .desktop-product-header {
/* 使用 Promote Banner 寬一百解決
padding-left: 0;
*/
}
/* Product Recommendation (.promote-products/ CPC Product) >> 【移除左邊距離距離】 >> for #product_listing (.B2C-Style) */
.B2C-Style #product_listing .desktop-product-header + .col-lg-9:has(.promote-products) {
/* 使用 Promote Banner 寬一百解決
padding-right: 0;
*/
}
/* 原來的小產品列表 (#product_lists/ CPC Product) >> 【移除左 + 右邊距離距離】 >> for #product_listing (.B2C-Style) */
.B2C-Style #product_listing #product_lists {
/* 使用 Promote Banner 寬一百解決
padding-left: 5px;
padding-right: 0;
*/
padding: 0 5px;
padding: 0 0.3rem;
padding: 0 0.2rem 0 0.3rem;
padding: 0 15px;
padding: 0 0.7rem;
}
/* Promote Banner (#product_listing) 底部距離 (CPC Product) >> 【一般 Banner 底部距離】 >> for #product_listing (.B2C-Style) */
.B2C-Style #product_listing .promote-banner {
/* 前面有設定
margin-bottom: 1rem;
width: 100%;
margin: 0 auto;
box-sizing: border-box; /* 防止 padding 或 border 影響總寬度
*/
}
/*************** 【 Product Listing Page for Recommendation Products】推薦產品 >> for Product Listing Page (.B2C-Style) *****************/
/* Product Recommendation >> 跟一般產品列表區隔開來的距離 (CPC Product) >> 一般層級設定 >> for #product_listing (.B2C-Style) */
.B2C-Style #product_listing .promote-products {
margin-bottom: 10px;
margin-bottom: 2em;
margin-bottom: 2rem;
}
/* Product Recommendation (.promote-products/ CPC Product) >> a.linkblock + Button + Add to Comparsion >> 一般層級設定 >> 沒設定無法正常選到 a.linkblock */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .checkbox.product-list,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider a.linkblock,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .btn-group {
z-index: 1;
}
/* Product Recommendation >> (一般設定) All */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc),
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-image,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single {
box-sizing: border-box; /* 防止 padding 或 border 影響總寬度 */
}
/* Product Recommendation >> (一般設定/ .product-record-single) Wide Item + Short Item */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single {
height: auto;
}
/* Product Recommendation (.sect-divider + .product-desc 的上一層外框) >> Wide + Half Item >> 讓內部使用 display: flex; */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc),
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
display: flex;
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
justify-content: center; /* 水平置中 */
align-items: flex-start; /* 項目垂直由上對準 至下*/
align-content: flex-start; /* 項目垂直由上對準 至下*/
justify-content: left; /* 水平置左 */
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
}
/* Product Recommendation (.product-desc 的上一層外框) >> Wide + Half Item >> 讓內容置左; */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc) {
justify-content: left; /* 文字 + Button >> 水平置左 */
height: 100% !important; /* 佔滿父容器的高度 >> 要讓 Add to Comparision 置於底部 */
flex-direction: column !important; /* 垂直排列 */
justify-content: flex-start !important; /* 內容從頂部開始 */
}
/* Product Recommendation (.product-desc 的上一層外框) >> Third Item >> 讓內容置左;
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div:has(.product-desc) {
flex-direction: row !important;
}
*/
/* Product Recommendation (.sect-divider + .col-md-12/ .col-md-6) >> Wide + Half Item >> .product-record-single 內無邊距 */
.B2C-Style #product_listing .promote-products div.product-record-single .col-md-6:has(.product-image),
.B2C-Style #product_listing .promote-products div.product-record-single .col-md-12:has(.product-image),
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
padding: 0px;
}
/* Product Recommendation (.sect-divider 【左邊】 一般設定) >> Short Item (左邊) */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6):first-child .sect-divider {
float: left;
}
/* Product Recommendation (.sect-divider 【右邊】 一般設定) >> Short Item (右邊) */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6):last-child .sect-divider {
float: right;
}
/* Product Recommendation (.sect-divider 【左邊】 一般設定) >> Short Item (左邊)
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4):first-child .sect-divider {
float: left;
}
*/
/* Product Recommendation (.sect-divider 【右邊】 一般設定) >> Short Item (右邊)
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4):last-child .sect-divider {
float: right;
}
*/
/* Product Recommendation (.product-image 【圖片外框 + 圖片】 一般設定) >> .product-image + img (圖片區要充滿 .sect-divider) 不圓角 >> 因用 .sect-divider 去設定 border-radius */
.B2C-Style #product_listing .promote-products .product-record-single div.product-image img,
.B2C-Style #product_listing .promote-products .product-record-single div.product-image {
border-radius: 0 !important;
}
/* Product Recommendation (.product-image 【圖片外框】 一般設定) All */
.B2C-Style #product_listing .promote-products .product-record-single div.product-image {
width: 100%;
height: auto !important; /* 取消覆蓋高度限制 */
max-height: unset !important; /* 取消覆蓋高度限制 */
overflow: hidden;
}
/* Product Recommendation (img) 【圖片外框】 一般設定 >> .product-image >> img */
.B2C-Style #product_listing .promote-products .product-record-single div.product-image img {
position: relative;
left: 50%;/* 圖片水平居中 */
top: 50%;/* 圖片垂直居中 */
transform: translateY(-25%) translateX(-50%);/* 圖片水平/垂直 >> 居中微調 */
}
/* Product Recommendation (.product-desc【文字區最外框】 + .product-price【內容描述】一般設定) >> 文字區 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-price,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-desc {
min-height: unset !important; /* 取消覆蓋高度限制 */
margin-bottom: 10px;
}
/* Product Recommendation (.product-desc【文字區最外框】 + .product-price【內容描述】一般設定) >> 文字區 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-price,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-desc {
padding: 0px;
}
/* Product Recommendation (.product-desc【文字區最外框】 + .product-price【內容描述】一般設定) >> 文字區 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider .checkbox.product-list,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-price,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-desc {
width: 100%;
}
/* Product Recommendation 【文字區最外框】>> .product-desc 的上一層 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc) {
padding-top: 20px;
}
/* Product Recommendation 【文字區最外框】>> .product-desc >> .product-title */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-desc .product-title {
margin-bottom: 15px;
}
/* Product Recommendation 【文字區最外框】>> .product-desc >> .product-price */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-desc .product-price {
margin-bottom: 10px;
}
/* Product Recommendation (.product-record-single) 底部距離 >> 只有一個元素時 + 總共只有兩個元素且都是 col-md-6 時 */
.B2C-Style #product_listing .promote-products .col-md-6.product-record-single:first-child:nth-last-child(2),
.B2C-Style #product_listing .promote-products .col-md-6.product-record-single:last-child:nth-child(2),
.B2C-Style #product_listing .promote-products .product-record-single:first-child,
.B2C-Style #product_listing .promote-products .product-record-single:only-child {
margin-bottom: 0px;
}
/* Product Recommendation (.sect-divider + .product-record-single) 底部距離 >> Wide Item + Short Item >> .sect-divider + .product-record-single */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-wide):first-child,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
margin-bottom: 20px;
}
/* Product Recommendation (.sect-divider) 底部距離 >> 只有一個元素時 + 總共只有兩個元素且都是 col-md-6 時 >> Short Item */
.B2C-Style #product_listing .promote-products:not(.col-md-12.product-record-single) .col-md-6.product-record-single .sect-divider {
margin-bottom: 0px;
}
/* Product Recommendation (.sect-divider) 底部距離 >> Wide Item + Short Item >> .sect-divider */
.B2C-Style #product_listing .promote-products .col-md-6.product-record-single:first-child:nth-last-child(2) .sect-divider,
.B2C-Style #product_listing .promote-products .col-md-6.product-record-single:last-child:nth-child(2) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:only-child .sect-divider {
margin-bottom: 35px;
}
/* Product Recommendation (Button) >> .product-desc + .product-price */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group {
margin-top: 5px;
margin-bottom: 10px;
/* transform: translateX(-9%); */
}
/* Product Recommendation (Button) >> .btn-group */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.btn-group {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Product Recommendation (Button) 底部距離 >> Wide Item + Short Item >> a.btn.btn-primary */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a {
min-width: unset !important;
}
/* Product Recommendation (Button) 底部距離 >> Wide Item + Short Item >> Add to Compare */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider .checkbox.product-list {
position: static;
position: relative;
height: 30px;
border-bottom: none !important;
border-top: 1px solid #d4d7d8;
padding: 10px 0 15px !important;
margin-top: 20px;
height: auto;
margin-top: auto !important; /* 自動推到底部 */
margin-bottom: 0; /* 移除底部 margin */
}
/* Product Recommendation (.product-desc【文字區最外框】 + .product-price【內容描述】一般設定) >> 文字區 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider .checkbox.product-list,
.B2C-Style #product_listing .promote-products .product-record-single.promote-third .sect-divider .checkbox.product-list,
.B2C-Style #product_listing .promote-products .product-record-single.col-md-4 .sect-divider .checkbox.product-list {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
/* 768px 以上 */
@media (min-width: 768px) {
/* Product Recommendation (.sect-divider) >> Half Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4, .promote-half, .col-md-6) .sect-divider {
width: 102% !important;
width: 102.3% !important;
}
/* Product Recommendation (.sect-divider) >> Third Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider {
width: 100% !important;
}
/* Product Recommendation (.sect-divider) >> Wide Item >> 圖文各半左右 (.col-md-6) >> .product-image (.col-md-6) + .product-desc (.col-md-6) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) .col-md-6 {
width: 50% !important;
}
/* Product Recommendation (.sect-divider) >> Wide Item >> 文字區 (.col-md-6) >> .product-desc */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) .col-md-6:has(.product-desc) {
width: 43% !important;
width: 48.5% !important;
width: 49.3% !important;
}
/* Product Recommendation (.sect-divider) >> Wide Item >> 圖片區 (.col-md-6) >> .product-desc */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) .col-md-6:has(.product-image) {
width: 57% !important;
width: 51.5% !important;
width: 50.2% !important;
}
/* Product Recommendation (最下方一般列表 Product List) >> 左右距離 */
.B2C-Style #product_listing #product_lists .general-products .product-record-single {
padding: 0px 8px;
}
}
/* 811px 以上 */
@media (min-width: 811px) {
/* Product Recommendation 【文字區最外框】>> .product-desc 的上一層 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc) {
padding-left: 25px;
padding-right: 25px;
}
/* Product Recommendation (Button) >> .btn-group */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group {
flex-wrap: nowrap; /* 不換行 (Desktop Ver.) */
gap: 5px; /* 按鈕之間的間距 */
justify-content: left;/* 按鈕置左對齊 */
width: 100%;
}
/* Product Recommendation (Button) >> .btn-group >> a */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a {
width: 50%;
}
/* Product Recommendation (Button) >> .btn-group */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.btn-group {
flex-wrap: wrap; /* 不換行 (Desktop Ver.) */
gap: 12px; /* 按鈕之間的間距 */
justify-content: end;/* 按鈕置左對齊 */
width: 100%;
padding: 0 !important;
margin-top: auto !important;/* 要設定才會自動推到底部 */
}
/* Product Recommendation (Button) >> .btn-group >> a */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.btn-group:has(a + a) a {
width: 100%;
margin: 0 auto;
margin: 0 !important;
}
}
/* 981px 以上 */
@media (min-width: 981px) {
/* Product Recommendation >> Wide Item + Half Item >> 統一高度 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4, .promote-half, .col-md-6) div.product-image/* Half Item */,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider .product-image,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-12, .promote-wide) {
max-height: 285px !important;
min-height: 285px !important;
}
/* (沒有 Filter/ 滿版時) Product Recommendation (.sect-divider) >> Half Item >> 寬度 */
.B2C-Style #product_listing .col-lg-12 .promote-products .product-record-single:is(.promote-half, .col-md-6) .sect-divider,
.B2C-Style #product_listing .col-lg-12 .promote-products .product-record-single:is(.promote-half, .col-md-6) {
height: 530px;
min-height: 530px; /* 改為 min-height */
max-height: 530px; /* 改為 min-height */
}
/* (沒有 Filter/ 滿版時) Product Recommendation (.product-image) >> Half Item 圖片 >> 窄 Item 高度 */
.B2C-Style #product_listing .col-lg-12 .promote-products .product-record-single:is(.promote-half, .col-md-6) div.product-image {
max-height: 300px !important;
min-height: 300px !important;
}
/* Product Recommendation (.sect-divider) >> Half Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6) {
height: 485px;
height: auto;
height: 530px;
min-height: 530px; /* 改為 min-height */
max-height: 530px; /* 改為 min-height */
}
/* Product Recommendation (.product-image) >> Half Item 圖片 >> 窄 Item 高度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6) div.product-image {
max-height: 250px !important;
min-height: 250px !important;
}
/* Product Recommendation (.sect-divider) >> Third Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) {
height: auto;
height: 530px;
min-height: 530px; /* 改為 min-height */
max-height: 530px; /* 改為 min-height */
height: 560px;
min-height: 560px; /* 改為 min-height */
max-height: 560px; /* 改為 min-height */
}
/* Product Recommendation (.product-image) >> Third Item 圖片 >> 窄 Item 高度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) div.product-image {
max-height: 200px !important;
min-height: 200px !important;
}
/* Product Recommendation (內文描述) >> .product-desc >> .product-price 最少高度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-desc {
min-height: 145px !important;
}
/* Product Recommendation (內文描述) >> .product-desc >> .product-price 最少高度 */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-price {
min-height: 65px !important;
}
/* 用變數算法來定義 Wide + Half Item >> 的相關高度 */
.B2C-Style {
/* Wide Item 變數 >> 總高 */
--product-listing_wide-item-height: 285px !important;/* 對應你的 min-height: 285px !important; */
/* Half Item 變數 >> 總高 & Photo Image */
--product-listing_half-item-total-height: 530px !important; /* 對應你的 min-height: 530px; max-height: 530px; */
--product-listing_half-item-image-height: 250px !important; /* 對應你的 min-height: 250px !important; */
/* Third Item 變數 >> 總高 & Photo Image */
--product-listing_third-item-total-height: 560px !important; /* 對應你的 min-height: 500px; max-height: 500px; */
--product-listing_third-item-image-height: 200px !important; /* 對應你的 min-height: 220px !important; */
}
/* Wide Item 文字區域高度 >> 變數 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) *:is(div):has(.product-desc) {
height: var(--product-listing_wide-item-height) !important; /* 285px */
}
/* Product Recommendation (.sect-divider) >> Half Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-half, .col-md-6) {
height: var(--product-listing_half-item-total-height) !important; /* 530px */
}
/* Half Item 文字區域高度：使用計算 = Half Item 總高度 - Half Item 圖片高度 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.promote-half, .col-md-6) *:is(div):has(.product-desc) {
height: calc(var(--product-listing_half-item-total-height) - var(--product-listing_half-item-image-height)) !important; /* 530px - 250px = 280px */
}
/* Product Recommendation (.sect-divider) >> Third Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) {
height: var(--product-listing_third-item-total-height) !important; /* 480px */
}
/* Half Item 文字區域高度：使用計算 = Third Item 總高度 - Third Item 圖片高度 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.promote-third, .col-md-4) *:is(div):has(.product-desc) {
height: calc(var(--product-listing_third-item-total-height) - var(--product-listing_third-item-image-height)) !important; /* 560px - 200px = 360px */
}
}
/* 1500px 以上 */
@media (min-width: 1500px) {
/* Product Recommendation (Button.btn-learnm) >> .btn-group >> a.btn-learnm */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a.btn-learnm {
min-width: 160px; /* 按鈕最小寬度 */;
}
/* Product Recommendation (Button.addtocart) >> .btn-group >> a.addtocart */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a.addtocart {
min-width: 170px; /* 按鈕最小寬度 */;
}
/* Product Recommendation >> Third Item >> 讓三個 Item 置中撐滿 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider {
width: 100% !important;
width: 102% !important;
}
/* Product Recommendation >> Third Item >> 讓三個 Item 置中撐滿 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.promote-third, .col-md-4):nth-of-type(2),
.B2C-Style #product_listing .promote-products div.product-record-single:is(.promote-third, .col-md-4):nth-of-type(3) {
transform: translateX(4.5%);
transform: translateX(4%);
}
/* Product Recommendation >> Third Item >> 讓三個 Item 置中撐滿 */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.promote-third, .col-md-4):nth-of-type(3) {
transform: translateX(9%) !important;
transform: translateX(8%) !important;
}
}
/* 1700px 以上 */
@media (min-width: 1700px) {
/* Product Recommendation (.sect-divider) >> Third Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) {
height: 530px;
min-height: 530px; /* 改為 min-height */
max-height: 530px; /* 改為 min-height */
}
.B2C-Style {
/* Third Item 變數 >> 總高 & Photo Image */
--product-listing_third-item-total-height: 530px !important; /* 對應你的 min-height: 500px; max-height: 500px; */
--product-listing_third-item-image-height: 200px !important; /* 對應你的 min-height: 220px !important; */
}
/* Product Recommendation (內文描述) >> .product-desc >> .product-price 最少高度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-desc {
min-height: 125px !important;
}
}
/* 1281 ~ 1366 */
@Media (min-width: 1281px) and (max-width: 1366px) {
/* Product Recommendation (.sect-divider) >> Third Item >> 寬度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) {
height: 540px;
min-height: 540px; /* 改為 min-height */
max-height: 540px; /* 改為 min-height */
}
.B2C-Style {
/* Third Item 變數 >> 總高 & Photo Image */
--product-listing_third-item-total-height: 540px !important; /* 對應你的 min-height: 500px; max-height: 500px; */
--product-listing_third-item-image-height: 200px !important; /* 對應你的 min-height: 220px !important; */
}
.B2C-Style #product_lists .sect-divider a.btn {
min-width: 145px;
}
}
/* 979px 以下 */
@media (max-width: 979px) {
/* Product Recommendation >> (一般設定/ .product-record-single) Wide Item + Short Item */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
border-radius: 7px;
border-radius: 0.4rem;
}
/* Product Recommendation (.product-image 【圖片外框】 一般設定) Wide Item + Short Item >> All */
.B2C-Style #product_listing .promote-products .product-record-single div.product-image {
min-height: 225px;
max-height: 225px !important;
}
/* Product Recommendation (.product-image 【圖片外框】 一般設定) Wide Item + Short Item >> Short Item */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4, .promote-half, .col-md-6) div.product-image {
max-height: 200px !important;
}
/* Product Recommendation (.product-image 【圖片外框】 一般設定) Wide Item + Short Item >> All Des */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.product-desc .product-price {
font-size: 0.8rem !important;
}
/* Product Recommendation >> Wide Item >> 單一品項統一高度 (橫向等高) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider .product-image,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-12, .promote-wide) {
max-height: 350px !important;
min-height: 340px !important;
}
/* Product Recommendation >> Half Item >> 雙二品項統一高度 (直向等高 -- 不包含上部圖) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-6, .promote-half) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-half.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-6, .promote-half) {
max-height: 570px !important;
min-height: 340px !important;
}
.B2C-Style #product_listing .promote-products:has(.promote-wide, .promote-half) .product-record-single .sect-divider div.product-desc {
min-height: 110px !important;
}
/* Product Recommendation (內文描述) >> .product-desc >> .product-price 最少高度 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-desc {
min-height: 120px !important;
}
/* Product Recommendation (Button.btn-learnm) >> .btn-group >> a.btn-learnm */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a.btn-learnm {
width: auto;
}
}
/* 820px 以下 */
@media (max-width: 820px) {}
/* 810px 以下 */
@media (max-width: 810px) {
.B2C-Style #product_listing #product_lists {
padding-right: 0px !important;
padding-left: 0px !important;
}
/* Product Recommendation (Button) >> .btn-group */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group {
flex-wrap: wrap; /* 換行 (Mobile Ver.) */
gap: 0px; /* 按鈕之間的間距 */
display: block;
}
/* Product Recommendation (Button) >> .btn-group >> a */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group {
width: 100%;
}
/* Product Recommendation (Button) >> .btn-group >> a:first-child */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div.btn-group:has(a + a) a:first-child {
margin-bottom: 13px;
}
}
/* 767px 以下 */
@media (max-width: 767px) {
/* Product Recommendation >> 最外框 */
.B2C-Style #content div.container:has(#product_listing .promote-banner) {
margin: 0 auto;
/*
width: 100%;
*/
}
/* Product Recommendation >> #product_listing >> div(有 #categoryName, .promote-products, #categoryheader, #product_lists) >> 左右都歸 0 */
.B2C-Style #product_listing div:has(#categoryName, .promote-products, #categoryheader, #product_lists) {
padding-left: 0;
padding-right: 0;
}
/* Product Recommendation >> #product_listing >> div(有 #categoryName, .promote-products, #categoryheader, #product_lists) >> 下層的 [class*="col-"] */
.B2C-Style #product_listing div:has(#categoryName, .promote-products, #categoryheader, #product_lists) > [class*="col-"] {
padding-left: 0;
}
/* Product Recommendation >> #product_listing >> Category Title (分類標題) */
.B2C-Style #product_listing div:has(#categoryName, .promote-products, #categoryheader, #product_lists) > #categoryName[class*="col-"] {
padding-left: 5px;
}
/* Product Recommendation (.sect-divider + .product-desc 的上一層外框) >> Wide + Half Item >> 讓內部使用 display: flex; */
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider div:has(.product-desc),
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
display: block; /* 沒設定圖片會不見 */
}
/* Product Recommendation >> 每個 Promote Item 底部距離 */
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-wide):first-child,
.B2C-Style #product_listing .promote-products .product-record-single {
margin-bottom: 50px;
}
.B2C-Style #product_listing #product_lists {
padding-right: 0px !important;
}
/* Product Recommendation (最下方一般列表 Product List) >> 左右距離 */
.B2C-Style #product_listing #product_lists .general-products .product-record-single {
width: 100%;
padding-right: 0;
padding-left: 5px;
margin-left: 0;
margin-right: 0;
}
}
/* 480x 以下 */
@media (max-width: 480px) {
.B2C-Style #product_listing .promote-products:not(.col-md-12.product-record-single) .col-md-6.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
float: none !important;
}
/* Product Recommendation >> Wide Item >> 單一品項統一高度 (橫向等高) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-12, .promote-wide),
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-6, .promote-half) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-half.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-6, .promote-half) {
max-height: unset !important;
min-height: unset !important;
}
/* Product Recommendation >> Wide Item + Half Item >> 單一品項統一高度 (橫向等高) */
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .promote-half.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single .sect-divider {
margin-bottom: 35px !important;
}
/* Product Recommendation >> Wide Item + Half Item >> 最後一個品項統一高度 (橫向等高) */
.B2C-Style #product_listing .promote-products .product-record-single:last-child .sect-divider {
margin-bottom: 0px !important;
}
/* Product Recommendation >> Wide Item >> 單一品項統一高度 (橫向等高) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-12, .promote-wide) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-12, .promote-wide) {
}
/* Product Recommendation >> Half Item >> 雙二品項統一高度 (直向等高 -- 不包含上部圖) */
.B2C-Style #product_listing .promote-products div.product-record-single:is(.col-md-6, .promote-half) div:has(.product-desc)/* Wide Item >> 文字區 */,
.B2C-Style #product_listing .promote-products .promote-half.product-record-single .sect-divider,
.B2C-Style #product_listing .promote-products .product-record-single:is(.col-md-6, .promote-half) {
}
/* Product Recommendation (.product-image) >> Wide Item + Half Item >>All 品項統一高度 (直向等高等高) */
.B2C-Style #product_listing .promote-products .promote-wide.product-record-single .sect-divider .product-image,
.B2C-Style #product_listing .promote-products .promote-half.product-record-single .sect-divider .product-image {
max-height: 260px !important;
min-height: 260px !important;
}
.B2C-Style #product_listing #product_lists {
padding-right: 5px !important;
padding-right: 0px !important;
}
.B2C-Style #product_listing .promote-products:has(.promote-wide, .promote-half) .product-record-single .sect-divider div.product-desc,
.B2C-Style #product_listing .promote-products .product-record-single:is(.promote-third, .col-md-4) .sect-divider div.product-desc {
min-height: unset !important;
}
}
/*************************************************************************************************************************
( F-3Y ). 【3Y Warranty >> for Single Product Page Optimization】 產品單頁面 (.B2C-Style >> 2024)
(.product-image.warranty::before)
======================================================================================================================== */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty .fslider::before,
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty .fslider::before {
}
/* 3 年保固 Logo 嵌入 (兩欄) (.product-image.warranty)
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty .fslider::before {
top: 12px;
right: 38px;
top: calc(2% - 0px);
right: calc(12% - 0px);
}
*/
/* 3 年保固 Logo 嵌入 (三欄) .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty .fslider::before {}
/* 3 年保固 Logo 嵌入 (兩欄 + 三欄) (.product-image.warranty) */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before,
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before,
/* [-- 4年前瀏覽器不支援 :is() 寫法 --] */
.B2C-Style .single-product :is(.col-md-7, .col-md-5).product-image-container .product-image.warranty::before {
content: "";
z-index: 3;
position: absolute;
display: block;
pointer-events: none;
width: 100px;
height: 100px;
/* background: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Logo/Logo_3Y-Warranty.png) no-repeat center center/ 88%; */
background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Logo/Logo_3Y-Warranty.png);
background-size: 88%;
background-position: center center;
background-repeat: no-repeat;
filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.1)) !important;
filter: brightness(100%) contrast(100%) drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.0)) !important;
top: 0;
right: 0;
}
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 90%;
top: 11px;
right: 68px;
top: calc(6.1% - 23px);
right: calc(16.2% - 37px);
top: 0;
right: 0;
transform: translateY(calc(34.5% - 23px)) translateX(calc(-32% - 37px));
}
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 69%;
top: -4px;
right: 66px;
top: calc(4.2% - 23px);
right: calc(14.7% - 37px);
top: 0;
right: 0;
transform: translateY(calc(21% - 23px)) translateX(calc(6% - 37px));
}
/* 1024 以上 */
@media (min-width: 1024px) {}
/* 1920 以上 */
@media (min-width: 1920px) {
}
/* 2030 以上 */
@media (min-width: 2031px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(18.5% - 23px)) translateX(calc(-28% - 37px));
}
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 90%;
transform: translateY(calc(34.5% - 23px)) translateX(calc(-79% - 37px));
}
}
/* 2029px ~ 2032px */
@media (min-width: 2029px) and (max-width: 2032px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-25% - 37px));
}
}
/* 2000px ~ 2029px */
@media (min-width: 2000px) and (max-width: 2028px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-25% - 37px));
}
}
/* 2014px ~ 2030px */
@media (min-width: 2014px) and (max-width: 2030px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 91%;
transform: translateY(calc(34.5% - 23px)) translateX(calc(-75% - 37px));
}
}
/* 2029px ~ 2030px */
@media (min-width: 2028px) and (max-width: 2030px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-26% - 37px));
}
}
/* 1999px ~ 2013px */
@media (min-width: 1999px) and (max-width: 2013px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 90%;
transform: translateY(calc(34.5% - 23px)) translateX(calc(-70% - 37px));
}
}
/* 1920px ~ 1998px */
@media (min-width: 1920px) and (max-width: 1998px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 90%;
transform: translateY(calc(34.5% - 23px)) translateX(calc(-44% - 37px));
}
}
/* 1970px ~ 1998px */
@media (min-width: 1970px) and (max-width: 1998px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-9% - 37px));
}
}
/* 1997px ~ 1998px */
@media (min-width: 1997px) and (max-width: 1998px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-14% - 37px));
}
}
/* 1950px ~ 1970px */
@media (min-width: 1950px) and (max-width: 1970px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-3% - 37px));
}
}
/* 1920px ~ 1950px */
@media (min-width: 1920px) and (max-width: 1950px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-7% - 37px));
}
}
/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 58%;
transform: translateY(calc(11.5% - 23px)) translateX(calc(-68% - 37px));
}
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 58%;
transform: translateY(calc(11.5% - 23px)) translateX(calc(-22% - 37px));
}
}
/* 1194px ~ 1199px */
@media (min-width: 1194px) and (max-width: 1199px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 62%;
transform: translateY(calc(12% - 23px)) translateX(calc(17% - 37px));
}
}
@media (min-width: 992px) and (max-width: 1194px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 57%;
transform: translateY(calc(10% - 23px)) translateX(calc(18% - 37px));
}
}
/* 994px ~ 1199px */
@media (min-width: 994px) and (max-width: 1199px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 77%;
transform: translateY(calc(25% - 23px)) translateX(calc(1% - 37px));
}
}
/* 994px ~ 1199px */
@media (min-width: 920px) and (max-width: 993px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 72%;
transform: translateY(calc(20% - 23px)) translateX(calc(-195% - 37px));
}
}
/* 991 以下 */
@media (max-width: 991px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-197% - 37px));
}
}
/* 979px ~ 991px */
@media (min-width: 979px) and (max-width: 991px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
/* transform: translateY(calc(19% - 23px)) translateX(calc(-197% - 37px)); */
}
}
/* 812px ~ 978px */
@media (min-width: 812px) and (max-width: 978px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
/* transform: translateY(calc(19% - 23px)) translateX(calc(-99% - 37px)); */
}
}
/* 920px ~ 1199px */
@media (min-width: 811px) and (max-width: 919px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 71%;
transform: translateY(calc(19% - 23px)) translateX(calc(-91% - 37px));
}
}
/* 811 以下 */
@media (max-width: 811px) {
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
transform: translateY(calc(19% - 23px)) translateX(calc(-91% - 37px));
}
}
/* 810 以下 */
@media (max-width: 810px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 70%;
transform: translateY(calc(19.5% - 23px)) translateX(calc(-89% - 37px));
}
}
/* 768 以下 */
@media (max-width: 768px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 70%;
transform: translateY(calc(19.5% - 23px)) translateX(calc(-108% - 37px));
}
}
/* 480 以下 */
@media (max-width: 480px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 66%;
transform: translateY(calc(14.5% - 23px)) translateX(calc(42% - 37px));
}
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 59%;
transform: translateY(calc(10% - 23px)) translateX(calc(48% - 37px));
}
}
/* 480 以下 */
@media (max-width: 430px) {
/* (加寬 .container) (兩欄 .col-md-7) 3 年保固 Logo 嵌入 (.product-image.warranty) */
.B2C-Style .single-product .col-md-7.product-image-container .product-image.warranty::before {
background-size: 58%;
transform: translateY(calc(10.5% - 23px)) translateX(calc(48% - 37px));
}
/* (加寬 .container) (三欄 .col-md-5) 3 年保固 Logo 嵌入 .product-image.warranty */
.B2C-Style .single-product .col-md-5.product-image-container .product-image.warranty::before {
background-size: 59%;
transform: translateY(calc(10% - 23px)) translateX(calc(48% - 37px));
}
}
/*************************************************************************************************************************
( F ). 【 Single Product Page/ Product Detailed Page Optimization】 產品單頁面 (.B2C-Style >> 2024)
======================================================================================================================== */
/************************** 客製化內容 for Product Page **************************/
/* Product Page >> 小 Banner */
.B2C-Style #product_detail .single-product .banners img {
max-width: 100%;
max-width: 400px !important;
height: auto !important;
width: 100%;
}
/* Product Page >> Search Box 框 */
.B2C-Style .form-inline .form-control/* Subcategory Product Page */,
.B2C-Style .product_search input.form-control/* Single + Listing Page */,
.B2C-Style .product_search input.form-control/* Single + Listing Page */,
.B2C-Style .form-inline input.form-control /* Subcategory Product Page */,
.B2C-Style .form-inline input.form-control /* Subcategory Product Page */ {
height: 35px;
height: 37px;
}
/* Product Page >> Comparison Basket >> Right Icon */
.B2C-Style #search_form .form-group button[class*="btn-"] em {
padding-left: 10px;
}
/* Product Page >> Add to Comparision */
.B2C-Style .share a.comparison_block {
padding-left: 0px;
position: relative;
top: 0px;
}
/* Product Page >> Comparison Basket >> Loading Gif Image */
.B2C-Style #search_form .ajax-loader,
.B2C-Style #mobile_search_form .ajax-loader {
margin-left: 5px;
}
/* Product Name (Single Product Page) (上半部) */
.B2C-Style .single-product .product-detail-price h1 {
font-size: 2.5rem;
}
/* 品名字太多時 */
.B2C-Style .product-detail-price h1.description-50 {
font-size: 35px;
font-size: 1.48em;
line-height: 1.22em;
}
/* 品名字太多時 */
.B2C-Style .product-detail-price h1.description-100 {
font-size: 34px;
font-size: 1.45em;
line-height: 1.3em;
}
/* 將 Model Name >> "|" 分隔線變細 */
.B2C-Style .Product-Name_Special-Char {
font-weight: 300 !important;
font-weight: 200 !important;
font-size: 2.5rem !important;
color: rgba(0,0,0,.45) !important;
}
/* Model Name (Single Product Page) (上半部) */
.B2C-Style .single-product .product-detail-price small {
}
/* Top 4 Features li Bullet (上半部) */
.B2C-Style .tab-content li::before {
/*
content: '●';
font-size: .8em;
top: -1px;
*/
}
/* Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .share label,
.B2C-Style .single-product .product-desc .share {
/* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目
display: flex;
align-items: center;
*/
}
/* 打勾 Icon >> Add to Compare >> 加到比較籃 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .share label .checkmark::after {
}
/* New Icon (Single Product) */
.B2C-Style .single-product .product-detail-price span.product-special-label {
/* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目
display: inline-flex;
align-items: center;
*/
}
/* Model Name >> 下方灰線透明 + 與圖片上下距離縮減 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .line {
border-top: transparent;
margin: 25px 0;
}
/* 產品圖 >> Cursor >> 換成放大鏡圖示 (Magnifier) (上半部) */
.B2C-Style .zoomLens:hover {
cursor: pointer !important;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in !important;
cursor:url(/ext_images/global_en/Cursor/Cursor-magnifying-ZoomIn.cur), zoom-in !important;
/* Gif (70x70)
cursor:url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/Cursor-magnifying-ZoomIn_70x70.gif) 15 15, zoom-in !important;
*/
/* Gif (32x32)
cursor:url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/Cursor-magnifying-ZoomIn_32x32.gif) 32 32, zoom-in !important;
*/
/* Gif (25x25)
cursor:url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/Cursor-magnifying-ZoomIn_25x25.gif) 15 15, zoom-in !important;
*/
/* SVG (要測)
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/Cursor-magnifying-ZoomIn.svg) 25 25, zoom-in !important;
*/
/* SVG (要測)
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/cursor-zoom-in-iogear.svg) 25 25, zoom-in !important;
*/
/* SVG (要測) */
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-3-svgrepo-com.svg) 25 25, zoom-in !important;
/* SVG (要測) */
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_A-1.svg) 25 25, zoom-in !important;
/* SVG - 黑底用 (要測)
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_B-2_White.svg) 25 25, zoom-in !important;
*/
/* SVG - 白底用 (要測) */
cursor:url(https://uat-aten-com.s3.us-west-2.amazonaws.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_B-1_Dark.svg) 25 25, zoom-in !important;
}
/* 產品圖 >> 左邊 Padding 取消 (產品頁兩欄 / 三欄皆適用) (上半部) */
.B2C-Style .single-product .product-desc + div {
padding-left: 0;
}
/* 產品圖 >> 右邊 Padding 縮減 (產品頁三欄適用) (上半部) */
.B2C-Style .single-product .product-desc + div.col-md-5 {
padding-right: 5px;
padding-right: 10px;
}
/* 產品描述區 >> li 上下距離增加 (上半部) */
.B2C-Style .tab-content.features-abstract li,
.B2C-Style .tab-content.features-abstract li::before {
margin-bottom: 0.6rem;
}
/* 產品描述區 >> 右邊 Padding 增加 (產品頁三欄適用) (上半部) */
.B2C-Style .single-product .product-desc.col-md-4 {
padding-right: 18px;
}
/* 產品圖 >> 透疊底色特效 (Blend-Mode: Multiply) */
.B2C-Style .flexslider .slider-wrap > .slide {
mix-blend-mode: multiply;
}
/* 產品圖 >> 縮圖 (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .flex-control-nav.flex-control-thumbs {
margin-top: 20px;
}
/* 產品圖 >> 縮圖 - 第五個 (距離) (上半部) */
.B2C-Style .flex-control-nav.flex-control-thumbs li:nth-child(5n+5) {
/*margin-right: unset;*/
}
/* 產品圖 >> 縮圖 (距離) (上半部) */
.B2C-Style .flex-control-nav.flex-control-thumbs li {
margin: 0 3px 5px 0;
margin: 0 0.3rem 0.3rem 0;
margin: 0 0.3rem 0.5rem 0;
}
/* 產品圖 >> 縮圖 (尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li img,
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li {
width: 75px !important;
height: 55px !important;
width: 83px !important;
height: 63px !important;
}
/* Add to Quote Button >> 外層 >> 距離右邊 Padding 增加 (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-7 + .col-md-5.product-desc .margin-top.quote {
padding-right: 0.9rem;
padding-right: 0rem;
}
/* Add to Quote Button >> 外層 >> 距離右邊 Padding 增加 (產品頁三欄適用) (上半部) */
.B2C-Style .product-desc + .col-md-5 .margin-top.quote {
padding-right: 1.9rem;
}
/* Add to Quote Button >> 建議售價 (MSRP) >> 距離上方 Margin-top 增加 (產品頁三欄適用) (上半部) */
.B2C-Style .product-desc + .col-md-5 .msrp.margin-top,
.B2C-Style .product-desc + .col-md-5 .margin-top.msrp {
margin-top: 1.5rem !important;
margin-top: 1.3rem !important;
}
/* 產品燈箱 Gallery 圖 >> 縮圖 (距離右邊) */
.B2C-Style .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
margin-right: 5px !important;
margin-right: 0.3rem !important;
}
/* 產品燈箱 Gallery 圖 >> 縮圖全區 (距離上下) (無文字) */
.B2C-Style .lg-outer .lg-thumb {
margin-bottom: 3rem;
margin-bottom: 4rem;
}
/* 產品燈箱 Gallery 圖 >> 縮圖全區 (距離上下) (有文字) */
.B2C-Style .lg-sub-html + .lg-thumb-outer .lg-outer .lg-thumb {
margin-bottom: 0px;
}
/* Product Page >> 下方產品相關/相容區 >> Product Tab Menu (Active) >> 底線藍條 */
.B2C-Style li.ui-tabs-tab.ui-state-active a {
padding-bottom: 12px;
position: relative;
z-index: 2;
}
/******************** 產品 Top >> .product-padding 區域 (一般上半部產品資訊 >> 通用設定) 【 .product-padding 下面包含 .product-desc/ .product-image-container/ .rightIcon 】**************************/
/* 產品頁上部相關產品區 (產品描述區) >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.single-product .product .product-padding .product-image-container .award.below-product-image/* 新版 Award */,
.single-product .product .product-padding .product-image-container .award {
border-top: 1px solid #eaeaea;
margin-top: 2.2rem;
padding-top: 2.2rem;
}
@media (min-width: 1500px) {
/* 產品頁上部相關產品區 (三欄適用 .col-md-4 / 產品小 Banner 區) >> 小 Banner 縮小 (產品頁) (上半部) */
.B2C-Style .single-product .product-desc.col-md-4 + .col-md-3.rightIcon,
.B2C-Style .single-product .col-md-3.rightIcon {
width: 21%;
}
/* 產品頁上部相關產品區 (三欄適用 .col-md-4 / 產品描述區) >> 小 Banner 縮小 (產品頁) (上半部) */
.B2C-Style .single-product .col-md-4.product-desc {
width: 37%;
}
/* 產品頁上部相關產品區 (三欄適用 .col-md-4 / 產品圖區) >> 小 Banner 縮小 (產品頁) (上半部) */
.B2C-Style .single-product .col-md-5.product-image-container {
width: 42%;
}
}
@media (min-width: 1921px) {
/* 產品描述區 >> 右邊 Padding 增加 (產品頁三欄適用) (上半部) */
.B2C-Style .single-product .product-desc.col-md-4 {
padding-right: 15px;
}
/* 產品圖 >> 縮圖(兩欄) (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs {
width: 100%;
width: 96%;
width: 95%;
margin-left: 3.5%;
}
/* 產品圖 >> 縮圖(兩欄) (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li img,
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li {
height: 63px !important;
width: 86px !important;
height: 62px !important;
width: 84px !important;
}
/* 產品圖 >> 縮圖(三欄) (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-5 .flex-control-nav.flex-control-thumbs {
width: 100%;
width: 97%;
/* margin-left: 3.5%; */
}
/* 產品圖 >> 縮圖(三欄) (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-5 .flex-control-nav.flex-control-thumbs li img,
.B2C-Style .col-md-5 .flex-control-nav.flex-control-thumbs li {
width: 75px !important;
height: 55px !important;
width: 80px !important;
height: 55px !important;
}
}
/* 1350 以下 */
@media (min-width: 1350px) {
/* Model Name >> 下方灰線透明 + 與圖片上下距離縮減 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .line {
border-top: transparent;
margin: 10px 0;
}
}
/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* 產品圖 >> 縮圖(兩欄) (改為內縮放/ 尺寸加大) (產品頁兩欄適用) (上半部) */
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li img,
.B2C-Style .col-md-7 .flex-control-nav.flex-control-thumbs li {
width: 90px !important;
}
/* 產品名描述 (針對筆電特殊調整) */
.B2C-Style .single-product .product-detail-price h1 {
font-size: 40px;
}
/* 產品名描述 >> Model No (針對筆電特殊調整) */
.B2C-Style .single-product .product-detail-price small {
margin-top: 6px;
margin-top: 5px;
font-size: 29px;
font-size: 1.2em;
}
/* 產品名描述 >> line (分隔線) (針對筆電特殊調整) */
.B2C-Style .single-product .product-desc .line {
margin: 25px 0 30px;
margin: 20px 0 25px;
}
/* 兩欄式 >> 圖片最外區 (針對筆電特殊調整) */
.B2C-Style .single-product .col-md-7.product-image-container {
width: 50%;
}
/* 兩欄式 >> 文字最外區 (針對筆電特殊調整) */
.B2C-Style .single-product .col-md-5.product-desc {
width: 49%;
}
/* 兩欄式 >> 圖片 Slider/ 圖片 img 高度 >> Shoter (針對筆電特殊調整) */
.B2C-Style .single-product .product-image .flexslider .slider-wrap img:not(.zoomImg),
.B2C-Style .single-product .product-image .slide {
max-height: 300px;
}
/* 兩欄式 >> 圖片 img 高度 >> Shoter (針對筆電特殊調整) */
.B2C-Style .single-product .product-image .flexslider .slider-wrap img:not(.zoomImg) {
max-height: 315px;
}
.B2C-Style .single-product .product-detail-price h1.description-50 {
font-size: 33px;
font-size: 1.43em;
line-height: 1.2em;
}
.B2C-Style .single-product .product-detail-price h1.description-100 {
font-size: 30px;
line-height: 1.27em;
font-size: 1.25em;
font-size: 1.23em;
}
}
/************ (筆電特調 >> 高度 610px >> 扣掉 Browser) 超超窄版 for Laptop *************/
@media (min-width: 1281px) and (max-width: 1366px) {
/* 縮短高度 >> 整個內容 >> 距離 Menu */
.B2C-Style #mobile-product-header + #next_prev_product + #content .content-wrap {
padding-top: 30px !important;
padding-top: 25px !important;
}
/* 麵包屑 >> 縮高度 */
.B2C-Style .desktop-product-header ol.breadcrumb,
.B2C-Style #product_detail .breadcrumb {
height: 65px !important;
height: 55px !important;
}
/* 產品搜尋 >> 縮高度 */
.B2C-Style #product_detail .product_search {
padding-bottom: 15px !important;
}
/* h1 下面原本的 BR 空格要刪除 */
.B2C-Style .single-product .product-detail-price h1 + .product-special-label + br {
display: none !important;
}
/* h1 下面原本的 BR 空格要刪除 >> 改為 inline-block >> 才能斷行 */
.B2C-Style .single-product .product-detail-price h1.description-100,
.B2C-Style .single-product .product-detail-price h1.description-50,
.B2C-Style .single-product .product-detail-price h1 {
font-size: 1.2em !important;
line-height: 1.3em !important;
line-height: 1.25em !important;
}
/* h1 下面原本的 BR 空格要刪除 >> 改為 inline-block >> 才能斷行 */
.B2C-Style .single-product .product-detail-price h1.description-100 {
font-size: 1.1em !important;
}
.B2C-Style .single-product .product-detail-price small {
margin-top: 10px !important;
font-size: 1.3em !important;
line-height: 1.3em !important;
display: inline-block !important;
width: 100%;
}
.B2C-Style .single-product .product-detail-price h1.description-100 + .product-special-label + br + small,
.B2C-Style .single-product .product-detail-price h1.description-50 + .product-special-label + br + small,
.B2C-Style .single-product .product-detail-price small {
font-size: 1em !important;
margin-top: 5px !important;
}
.B2C-Style .single-product .product-desc .line {
margin: 20px 0 !important;
margin: 10px 0 !important;
margin: 9px 0 9px !important;
}
.B2C-Style .single-product .product-image .flexslider .slider-wrap img:not(.zoomImg),
.single-product .product-image .slide {
max-height: 318px !important;
max-height: 250px !important;
}
.B2C-Style .single-product .product-image .flex-control-nav {
margin-top: 15px !important;
}
.B2C-Style .single-product .product-image .flexslider .slider-wrap img:not(.zoomImg),
.single-product .product-image .slide {
max-height: 318px !important;
max-height: 250px !important;
}
}
/* 橫向智慧手機及其他更小解析度 */
@media (min-width: 992px) and (max-width: 1365px) {
.B2C-Style .single-product .product-image .slide {
height: auto !important;
}
}
/*************************************************************************************************************************************************************************************
產品 Top Relate Product (一般高低階互連區 + 傳送接收端區 >> 通用設定) 【 .top-related-products/ 相關產品移動到上方區 】
>> .single-product .product .product-padding .product-desc(.col-md-5 >> 兩欄/ .col-md-4 >> 三欗) .top-related-products .related_product_tabs (一般高低階互連區)
>> .single-product .product .product-padding .rightIcon .top-related-products.compatible-tr .related_product_tabs (傳送接收端區)
*************************************************************************************************************************************************************************************/
/*********************************************************************************************************************************************************
>> (.B2C-Style) 僅【 相關產品高低階互連區, ex: US4322 / US4324 互連) 】/ Only 產品頁上部相關產品區 >> .product-padding >> .product-desc 裡面
>> .single-product .product .product-padding .product-desc(.col-md-5 >> 兩欄/ .col-md-4 >> 三欗) .top-related-products .related_product_tabs
***********************************************************************************************************************************************************/
/*********************************************************************************************************************************************************
>> (.B2C-Style) 僅【 .compatible-tr.top-related-products (相關產品傳送/接收產品區)】 / Only 產品 Top Relate Product >> .compatible-tr (發送接受端相關產品移動到小 banner 區)
>> 產品頁上部相關產品區(.product-padding >> .rightIcon 裡面) (高低階, ex: VE8692R / VE8692T 互連)
***********************************************************************************************************************************************************/
/******************************** 產品 Tab Menu -1 【 有 Tab 標籤狀態 】**************************************/
/* 產品 Tab Menu >> i 跟 文字間距 */
.B2C-Style section#content ul.tab-nav:not(.tab-nav-lg) li a i {
margin-right: 5px;
}
/* 產品 Tab Menu >> 增加高度 (距離上下) (有文字) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a {
height: 50px;
line-height: 2.7rem;
height: 45px;
line-height: 2.4rem;
}
/* 產品 Tab Menu >> All LI/ LI..ui-tabs-active (取消 border) (Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li {
border: none;
}
/* 產品 Tab Menu >> 第一個 LI (取消 border-left) (Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:first-child {
border-left: none;
border-left: 1px solid transparent;
}
/* 產品 Tab Menu >> LI >> (Active) a (取消 border-bottom) (Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active a {
border-bottom: none;
filter: drop-shadow(4px 0px 0px rgba(1, 25, 71, 0.03));
filter: drop-shadow(4px -1px 2px rgba(1, 25, 71, 0.05));
}
/******************************** 產品 Tab Menu -2 【 無 Tab 標籤狀態, 底線方式呈現 】**************************************/
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul >> Li (Tab 大底色) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li {
height: 47px;
line-height: 2.4rem;
line-height: 2.6rem;
line-height: 2.8rem;
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu (勾選狀態) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul >> Li ((Active)) (Tab 大底色) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
line-height: 2.2rem;
line-height: 2.5rem;
line-height: 2.6rem;
transition: all 0.3s ease-in-out 0s;
}
/* 統一 line-height (產品 Tab Menu 【 無 Tab 標籤狀態 + 有 Tab 標籤 】 */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
line-height: 2.7rem;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul.tab-nav (Tab 大底色) */
.B2C-Style section.quote-cart + #content .col-title.row/* Get Quote Page >> List Title + Product Item List Title Section */,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) {
border-radius: 0.4rem 0.4rem 0 0;
border-bottom: 1px solid transparent;
background-color: rgba(243, 244, 246, 1.0);
background-color: #f3f4f6;
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul.tab-nav > LI (Tab 大底色) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:first-child {
margin-left: 0;
border-left: 2px solid #f3f4f6; /* 白底用 */
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((hover)) ( li a Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover {
/*border-bottom: 3px solid #95999f;
border-bottom: 3px solid rgba(149, 153, 159, 1.0);*/
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Active)) (Border-Bottom 底藍線條) (Tab 底線) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
/*border-bottom: 3px solid #004276;
border-bottom: 3px solid rgba(0, 66, 118, 1.0);*/
background-color: rgba(255,255,255, 0.7); /* 淡灰底 */
box-shadow: 0px 2px 5px 1px rgba(0, 7, 35, 0.05); /* 淡灰底 */
top: 1px; /* 白底 */
position: relative; /* 白底 */
background-color: rgba(255,255,255, 1.0); /* 白底 */
box-shadow: 0px -2px 3px 1px rgba(0, 7, 35, 0); /* 白底 */
transition: all 0.3s ease-in-out 0s;
height: 48px; /* 比一般沒有 Active 狀態: 47px 高 1px */
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li > a ((hover)) ( li a Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li a:hover {
background-color: rgba(255, 255, 255, 0.6);
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Active)) >. a (取消 bg/ border/ shadow) (Tab 底) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a {
background-color: transparent;
border: 1px solid transparent;
border: none;/* 設成 none 才不會抖動 */
filter: drop-shadow(4px -1px 2px rgba(1, 25, 71, 0));
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::after,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::after,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::after {
position: relative;
height: 2px;
height: 0.15rem;
width: 100%;/* 選取狀態 / 滑過寬度為 : 100% */
left: 0;/*寬度為 : 100*/
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu (li::after 是否要顯示) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條)
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::after,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::after,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::after {
content: '';
display: block;
top: -0.1rem;
}
*/
/* 產品 Tab Menu (li::before 是否要顯示) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::before {
content: '';
display: block;
top: 0rem;
}
/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li > Before/ After (Tab 底線條) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li::after {
background-color: rgba(149, 153, 159, 0);
width: 0%;/* 初始寬度為 : 0 */
width: 10%;/* 初始寬度為 : 0 */
left: calc(100%/2 - 0%); /* width 為 0, 初始置中 */
transition: all 0.3s ease-in-out 0s;
}
/* 產品 Tab Menu > li (Hover) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li:hover::after {
background-color: #95999f;
background-color: rgba(149, 153, 159, 1.0);
transition: all 0.3s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
/* 產品 Tab Menu > li > active 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::before,
.B2C-Style ul.tab-nav:not(.tab-nav-lg) li.active::after {
background-color: #004276;
background-color: rgba(0, 66, 118, 1.0);
transition: all 0.3s ease-in-out 0s;
}
/******************************** 產品 Tab Menu -3 【 滿版 Tab 標籤狀態 / 寬 100% 】**************************************/
/* (section#content.Full-Width-Layout) */
/***********************************************************************************************************************/
/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 / 寬 100% */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) {
width: 100%;
display: flex;
justify-content: center;
padding: 0;
margin: 0;
background-color: #f2f2f2; /* 正淺灰 */
background-color: #f3f4f6;/* 偏藍灰 */
position: relative;
height: 49px;
}
/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> ul >> Li (Tab 大底色) */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li {
height: 47px;
}
/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> Li ((Active)) (Border-Bottom 底藍線條) (Tab 底線) */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
height: 48px; /* 比一般沒有 Active 狀態: 47px 高 1px */
}
/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> 生成內部限制區塊 (用 JS 生成一個 ) */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
/* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
width: 750px;
}
}
@media (min-width: 1024px) {
/* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
width: 970px;
}
/* Model Name >> 下方灰線透明 + 與圖片上下距離縮減 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .line {
border-top: transparent;
margin: 10px 0;
}
}
@media (min-width: 1200px) {
/* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
width: 1170px;
}
}
/* 1350 以上 */
@media (min-width: 1350px) {
/* Model Name >> 下方灰線透明 + 與圖片上下距離縮減 (Single Product Page) (上半部) */
.B2C-Style .single-product .product-desc .line {
border-top: transparent;
margin: 10px 0;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
width: 1170px;
width: 63%;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {
/* 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
.B2C-Style section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
width: 1170px;
width: 63%;
}
}
/*************************************************************************************************************************
其它元素 Others for Product Detail Page
**************************************************************************************************************************/
/* 下箭頭(短) >> Product Page >> Software-and-Download Tab > 標題的下箭頭 */
.B2C-Style div#support-download-tab h3.panel-title a i {
display: inline-block;
position: relative;
line-height: 1rem;
margin-left: 3px;
}
/* #recently_viewed (Normal:未滑過) >> 外區域 (Product Page) */
.B2C-Style #wrapper #recently_viewed {
border: 1px solid transparent;
background-color: transparent;
clip-path: polygon(0 0, 23.5% 0, 25% 100%, 0% 100%);
clip-path: polygon(0 0, 25.7% 0, 25% 100%, 0% 100%);/* 尚未 .actived */
transition: 0.1s;
}
/* #recently_viewed (Normal:未滑過) >> .Item (>> (Product Page) */
.B2C-Style #wrapper #recently_viewed > div {
background-color: transparent;/* 尚未 .actived */
}
/* #recently_viewed (Normal:未滑過) >> .title (Product Page) */
.B2C-Style #wrapper #recently_viewed .title {
background-color: transparent;/* 尚未 .actived */
box-shadow: inset 0px 0px 0px 2px transparent;
}
/* #recently_viewed (Normal:未滑過) >> Icon history (Product Page) */
.B2C-Style #wrapper #recently_viewed .icon-History:is(.fa.fas_v5.icon),
.B2C-Style #recently_viewed .icon-History,
.B2C-Style #recently_viewed .icon-History {
border: 1px solid #ddd;
background-color: #f2f3f4;
box-shadow: inset 0px 0px 0px 2px #fff;
}
/* #recently_viewed (Normal:滑過/ hover) >> 外區域 (Product Page) */
.B2C-Style #wrapper #recently_viewed:hover {
border: 1px solid #ddd;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);/* hover >> 尚未 .actived */
transition: all 0.2s ease-in-out 0s;
}
/* #recently_viewed (Normal:滑過/ hover) >> .title (Product Page) */
.B2C-Style #wrapper #recently_viewed:hover .title {
background-color: #f2f3f4;/* :hover */
box-shadow: inset 0px 0px 0px 2px #fff;
}
/* #recently_viewed (Normal:滑過/ hover) >> Icon history (Product Page) */
.B2C-Style #wrapper #recently_viewed:hover .icon-History:is(.fa.fas_v5.icon),
.B2C-Style #recently_viewed:hover .icon-History,
.B2C-Style #recently_viewed:hover .icon-History {
border: 1px solid transparent;
background-color: transparent;
box-shadow: inset 0px 0px 0px 2px transparent;
}
/* #recently_viewed (.actived/ 點開) >> 外區域 (Product Page) */
.B2C-Style #wrapper #recently_viewed.actived {
background-color: #fff;/* .actived */
clip-path: none;/* .actived */
}
/* #recently_viewed (.actived/ 點開) >> .title (Product Page) */
.B2C-Style #wrapper #recently_viewed.actived .title {
background-color: #f2f3f4;/* .actived */
box-shadow: inset 0px 0px 0px 2px #fff;
}
/* #recently_viewed (.actived/ 點開) >> .Item (>> (Product Page) */
.B2C-Style #wrapper #recently_viewed.actived > div {
background-color: #fff;/* .actived */
}
/* #recently_viewed (.actived/ 點開) >> Icon history (Product Page) */
.B2C-Style #wrapper #recently_viewed.actived .icon-History:is(.fa.fas_v5.icon),
.B2C-Style #recently_viewed.actived .icon-History,
.B2C-Style #recently_viewed.actived .icon-History {
border: 1px solid transparent;
background-color: transparent;
box-shadow: inset 0px 0px 0px 2px transparent;
}
/* Product Page >> 小 Banner */
.B2C-Style #product_detail .single-product .banners img {
max-width: 100%;
max-width: 400px !important;
height: auto !important;
width: 100%;
}
/* Awards Icon (All) >> img */
.B2C-Style .single-product .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award.below-product-image a img/* 新版 Award */,
.B2C-Style .single-product .award a img,
.B2C-Style .product-desc .award a img {
/* 0px 距離 / 10px 圓角 */
clip-path: inset(0px round 10px);
transform: scale(0.95);
clip-path: inset(0px round 5px);
transform: scale(1);
transform: scale(0.95);
padding: 0;
}
/* 一般認證 Icon (非 Features Icon) >> ex:4K, 8K..... */
.B2C-Style .certification .vcenter img:not(.vcenter.RC-Icon img, .vcenter.Features-Icon img),
.B2C-Style .certification .vcenter:not(.vcenter.RC-Icon, .vcenter.Features-Icon) {
margin: 0 0px 7px 0;
margin: 0 5px 7px 0;
}
/* Features Icon >> .RC-Icon-Container.No-Border-Top (沒有 8K, 4K..這一類要自行加最上距離) */
.certification.with-RC-Icon:has(.RC-Icon-Container.No-Border-Top) {
padding-top: 30px;
}
/* 上方相關產品頁面 (.top-related-products/ 沒有 Awards) >> 直接 RC-Icon【新的正方形】>> 重新定義間距 */
.single-product .top-related-products + .certification.with-RC-Icon:has(.RC-Icon-Container.No-Border-Top) {
margin-top: 0;
transform: translateY(-10px);
transform: translateY(-0.9rem);
}
/* (.product_related_group/ 不包含 .top-related-products) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> .product */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item .product,
.B2C-Style .product-carousel:not(.top-related-products .product-carousel) .owl-item .product {
padding: 0px 7px 0px 10px;
padding: 0.2rem 1rem 0.6rem;
border-radius: 0.4rem !important;
}
/* (.product_related_group/ 不包含 .top-related-products) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> .product:hover */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item .product:hover,
.B2C-Style .product-carousel:not(.top-related-products .product-carousel) .owl-item .product:hover {
border-radius: 0.4rem !important;
}
/* (.product_related_group) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> .product */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item .product,
.B2C-Style .product-carousel .owl-item .product {
border: 1px solid transparent;
transition: all 0.3s ease-in-out 0s;
}
/* (.product_related_group) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> .product:hover */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item .product:hover,
.B2C-Style .product-carousel .owl-item .product:hover {
border: 1px solid #00baff;
border: 1px solid #00a7eb;
border: 1px solid #005caa;
border: 1px solid rgba(0, 92, 170, 0.8);;
}
/* (.product_related_group) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> wording:hover */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item:hover .product-title h3 a,
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item:hover .product-price,
.B2C-Style .product-carousel .owl-item:hover .product-title h3 a,
.B2C-Style .product-carousel .owl-item:hover .product-price {
color: #00a7eb;
color: #005caa;
}
/* (.product_related_group) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item >> img */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item img,
.B2C-Style .product-carousel .owl-item img {
opacity: 1.0;
filter: brightness(100%) contrast(100%) !important;
transition: all 0.3s ease-in-out 0s;
}
/* (.product_related_group) .extra-info 下方所有相關/相容/產品頁面 >> .product-carousel >> .owl-item:hover >> img */
.B2C-Style .extra-info .product_related_group .product-carousel .owl-item:hover img,
.B2C-Style .product-carousel .owl-item:hover img {
opacity: 1.0;
filter: brightness(110%) contrast(105%) !important;
}
/* Award 新改版 (改在產品圖下方) >> img (通用/ 上半部) */
.B2C-Style .single-product .award.below-product-image a img,
.B2C-Style .product-desc .award.below-product-image a img {
padding: 0;
}
.B2C-Style .single-product .product .product-padding:has(.buynow + .quote) .product-desc:has(.quote + .msrp) .quote a.add-to-cart.button.nomargin,
.B2C-Style .single-product .product .product-padding:has(.buynow + .quote) .product-image-container:has(.quote + .msrp) a.add-to-cart.button.nomargin {
margin-top: 15px !important;
margin-top: 1rem !important;
}
@media (min-width: 768px) {
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
/* width: 12%; */
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
/* width: 13%; */
}
}
@media (min-width: 992px) {
/* Award 新改版 (改在產品圖下方) (兩欄 + 三欄時) >> 寬度對齊產品縮圖 */
.B2C-Style .col-md-5.product-image-container .award.below-product-image, /* 新版 Award 兩欄 */
.B2C-Style .col-md-7.product-image-container .award.below-product-image /* 新版 Award 三欄 */ {
padding-right: 30px;
}
/* 新版 Awards Icon (兩欄時) >> img */
.B2C-Style .col-md-7.product-image-container .award.below-product-image a img/* 新版 Award 兩欄 */ {
max-height: 75px !important;
}
/* Awards Icon (三欄時) >> img >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.B2C-Style .single-product .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */ {
max-height: 50px !important;
width: auto !important;
}
}
@media (min-width: 1024px) {
/* Awards Icon (兩欄時) >> img */
.B2C-Style .col-md-5.product-desc .award a img {
max-height: 83px !important;
width: auto !important;
}
/* Awards Icon (三欄時) >> img */
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-4.product-desc .award a img {
max-height: 61px !important;
width: auto !important;
}
/* 新版 Awards Icon (兩欄時) >> img */
.B2C-Style .col-md-7.product-image-container .award.below-product-image a img/* 新版 Award 兩欄 */ {
max-height: 90px !important;
max-height: 83px !important;
max-height: 60px !important;
}
/* Awards Icon (三欄時) >> img >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.B2C-Style .single-product .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */ {
max-height: 65px !important;
max-height: 60px !important;
max-height: 55px !important;
width: auto !important;
}
}
@media (min-width: 1200px) {
/* Product Page >> Search Product + Product Page >> Go Button ( 特殊 Button 內距離 Padding) */
.B2C-Style #search_form .form-group button.btn-go,
.B2C-Style .product-head button.btn-go {
margin-right: -10px;
margin-left: 0;
}
.B2C-Style #search_form .form-group button.btn-go {
margin-left: 3px !important;
}
/* Awards Icon (三欄時) >> img >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.B2C-Style .single-product .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */ {
max-height: 60px !important;
}
}
/* 1300 以上 */
@media (min-width: 1300px) {
/* .Features-Icon V1 >> 固定有線時的高度一致 >> 防止分隔線高低不同 (因為來源 img 圖片大小不同) */
.B2C-Style .single-product .certification .Features-Icon img {
aspect-ratio: 44 / 23;
width: 100%;
max-width: 100%;
height: auto !important;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* Features-Icon V1 >> 【兩欄時】 */
.B2C-Style .single-product .col-md-5 .certification .Features-Icon.col-sm-3,
.B2C-Style .single-product .col-md-5 .certification .Features-Icon {
width: 23% !important;
}
/* Features-Icon V1 >> 【三欄時】 */
.B2C-Style .single-product .col-md-4 .certification .Features-Icon.col-sm-3,
.B2C-Style .single-product .col-md-4 .certification .Features-Icon {
width: 25% !important;
}
/* Features-Icon V1 >> 【三欄時】 */
.B2C-Style .single-product .col-md-4 .certification .Features-Icon img {
}
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 14%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
/* width: 14%; */
}
}
/* 1400 以上 */
@media (min-width: 1400px) {
/* Awards Icon (三欄時) >> img >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.B2C-Style .single-product .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */ {
max-height: 65px !important;
}
/* 新版 Awards Icon (兩欄時) >> img */
.B2C-Style .col-md-7.product-image-container .award.below-product-image a img/* 新版 Award 兩欄 */ {
max-height: 83px !important;
}
}
/* 1500 以上 */
@media (min-width: 1500px) {
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 13%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 14%;
}
}
/* 1600 以上 */
@media (min-width: 1600px) {
/* 新版 Awards Icon (兩欄時) >> img */
.B2C-Style .col-md-7.product-image-container .award.below-product-image a img/* 新版 Award 兩欄 */ {
max-height: 90px !important;
}
/* Awards Icon (三欄時) >> img >> 若 Awards 放到三欄最左側產品照 (通用/ 上半部) */
.B2C-Style .single-product .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */,
.B2C-Style .col-md-5.product-image-container .award.below-product-image a img/* 新版 Award 三欄 */ {
max-height: 65px !important;
}
}
/* 1800 以上 */
@media (min-width: 1800px) {
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 12%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 13%;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* 產品內頁 >> Tab Menu >> 高度加高 (字變大) */
.B2C-Style section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active,
.B2C-Style section#content ul.tab-nav:not(.tab-nav-lg) li a,
.B2C-Style section#content ul.tab-nav:not(.tab-nav-lg) li {
height: 55px;
}
/* 產品內頁 >> Tab Menu >> 高度加高 (字變大) >> a >> 高度稍小 (原 height: 55px;) */
.B2C-Style section#content ul.tab-nav:not(.tab-nav-lg) li a {
height: calc(55px - 5px);
}
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 13%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 14%;
}
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .single-product .col-md-7.product-image-container .award.below-product-image a img,
.B2C-Style .col-md-7.product-image-container .award.below-product-image a img {
max-height: 90px !important;
}
}
@media (min-width: 1921px) {
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 寬度對齊產品縮圖 */
.B2C-Style .col-md-7.product-image-container .award.below-product-image {
width: 95%;
width: 89%;
width: calc(95% - 48px);
width: calc(95% - 5.95%);
margin-left: 3.5%;
padding-right: 30px;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 寬度對齊產品縮圖 */
.B2C-Style .col-md-5.product-image-container .award.below-product-image {
width: 97%;
}
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 15%;
width: 14%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 14%;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {
/* 【兩欄式】 >> order: 2 >> 確保(前四個) .RC-Icon 移至第二順位 (不要跟其他 Icon 混在一起排列) (控制 .RC-Icon.first-four-Features 的布局) */
.B2C-Style .single-product .col-md-5 .certification .RC-Icon.after-four-Features,
.B2C-Style .single-product .col-md-5 .certification .RC-Icon.first-four-Features,
.B2C-Style .single-product .col-md-5 .certification .RC-Icon {
width: 20%;/* Container 變寬 >> 5 個一排布局 */
}
/* Only 【三欄式】時 */
/* 5 個一排布局 (All .RC-Icon) */
/* .RC-Icon img 圖片外框的 div, 一律 1:1 正方形 */
.single-product .col-md-4 .certification .RC-Icon.after-four-Features,
.single-product .col-md-4 .certification .RC-Icon.first-four-Features,
.single-product .col-md-4 .certification.with-RC-Icon .RC-Icon-Container .RC-Icon,
.single-product .col-md-4 .certification .RC-Icon {
width: 22% !important; /* Container 變寬 >> 4 個一排布局 */
}
}
/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* 【兩欄式】 >> order: 2 >> 確保(前四個) .RC-Icon 移至第二順位 (不要跟其他 Icon 混在一起排列) (控制 .RC-Icon.first-four-Features 的布局) */
.B2C-Style .single-product .col-md-5 .certification .RC-Icon.after-four-Features,
.B2C-Style .single-product .col-md-5 .certification .RC-Icon.first-four-Features,
.B2C-Style .single-product .col-md-5 .certification .RC-Icon {
width: 20%;/* Container 變寬 >> 5 個一排布局 */
}
/* Only 【三欄式】時 */
/* 5 個一排布局 (All .RC-Icon) */
/* .RC-Icon img 圖片外框的 div, 一律 1:1 正方形 */
.single-product .col-md-4 .certification .RC-Icon.after-four-Features,
.single-product .col-md-4 .certification .RC-Icon.first-four-Features,
.single-product .col-md-4 .certification.with-RC-Icon .RC-Icon-Container .RC-Icon,
.single-product .col-md-4 .certification .RC-Icon {
width: 22% !important; /* Container 變寬 >> 4 個一排布局 */
}
/* Award 新改版 (改在產品圖下方) (兩欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-7.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 13%;
}
/* Award 新改版 (改在產品圖下方) (三欄時) >> 調整寬度以適配間距 >> 僅限正方形 Award (不包含長方形) */
.B2C-Style .col-md-5.product-image-container .award.below-product-image .vcenter.col-sm-2 {
width: 15%;
}
}
/* 筆電寬螢幕 1024 ~ 1366px */
@Media (min-width: 1024px) and (max-width: 1366px) {
.B2C-Style .tab-content.features-abstract li {
font-size: 0.9em;
font-size: 0.8rem;
}
}
/* Bowei 筆電寬螢幕 1280 以下 */
@media (max-width: 1280px) {
.B2C-Style .single-product .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award.below-product-image a img/* 新版 Award */,
.B2C-Style .single-product .award a img,
.B2C-Style .product-desc .award a img {
transform: scale(0.9);
}
}
/* 979 以下 */
@media (max-width: 979px) {
.B2C-Style .single-product .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award.below-product-image a img/* 新版 Award */,
.B2C-Style .single-product .award a img,
.B2C-Style .product-desc .award a img {
transform: scale(0.9);
width: 100% !important;
max-height: 128px;
max-height: 150px;
}
/* 拉寬的 Icon */
.B2C-Style .col-sm-6.nopadding.vcenter,
.B2C-Style .col-sm-3.nopadding.vcenter,
.B2C-Style .col-sm-4.nopadding.vcenter {
width: 25% !important;
}
}
/* 480 以下 */
@media (max-width: 480px) {
.B2C-Style .single-product .award.below-product-image a img/* 新版 Award */,
.B2C-Style .product-desc .award.below-product-image a img/* 新版 Award */,
.B2C-Style .single-product .award a img,
.B2C-Style .product-desc .award a img {
transform: scale(0.9);
width: 100% !important;
max-width: 86%;
max-height: unset;
}
/* 一般認證 Icon (非 Features Icon) >> ex:4K, 8K..... */
.B2C-Style .certification .col-xs-6.vcenter:not(.col-xs-6.vcenter.RC-Icon, .col-xs-6.vcenter.Features-Icon),
.B2C-Style .certification .col-xs-6.vcenter:not(.col-xs-6.vcenter.RC-Icon, .col-xs-6.vcenter.Features-Icon) {
width: 30%;
}
.B2C-Style #content:has(.single-product) div.container:has(> .package-content) {
width: 83%;
margin: 0 auto !important;
padding: 0;
}
}
/*************** 【 Awards New Layout/ 新改版在產品圖下方 】 (.award.below-product-image) *****************/
/*************************************************************************************************************************
( 4 ). for Spec Icon >> 放大寬度 1column/ 2column
======================================================================================================================== */
.B2C-Style .single-product .certification .col-sm-3.vcenter img:not(.vcenter.RC-Icon img, .vcenter.Features-Icon img) {
max-width: 135px;
}
.B2C-Style .single-product .certification .col-sm-4.vcenter img:not(.vcenter.RC-Icon img, .vcenter.Features-Icon img) {
max-width: 155px;
}
/******************************** 產品 Rich Content for Overview 【 額外定義 】**************************************/
/* Overview > H3.slogan-big >> 跟 Description 距離 (最上方已有統一字型) */
/* Overview > H3.slogan-big >> 此樣式用 java script 硬加 (示意用) */
.B2C-Style #overview-tab h3.slogan-big {
/*font-size: 3.25rem;
font-weight: 500;
line-height: 1.25em;
letter-spacing: -0.001em;*/
}
/* Overview H3 >> 跟描述文字 Description 距離 */
.B2C-Style #overview-tab h3 {
/* margin-bottom: 20px !important; */
}
/* Overview H3 >> 跟描述文字 Description 距離 */
.B2C-Style #wording-gsection h3 {
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* Overview > Rich Content【灰線】(上下距離增加) ( 灰線 border=0 ) */
.B2C-Style #overview-tab > div.row .line {
border-top: 0px solid #eee;
margin: 70px 0;
}
/* Overview > Rich Content【灰線】( div.rich-Content 新增後 >> 隱藏線 ) */
.B2C-Style #overview-tab div.rich-Content .line {
display: none;
}
/* Overview > Rich Content【 div.rich-Content 新增後增加上下區塊距離】(隱藏線後才加 / 無灰線分隔高度 ) */
.B2C-Style #overview-tab div.rich-Content {
margin: 0px 0 120px; /* 第一個 section 不需要 margin-top */
}
/* Overview > Rich Content 所有文圖【 .rich-Content 所有內容垂直居中】【.text-Left/ Right】 */
.B2C-Style #overview-tab > div.row, /* 暫時示意 */
.B2C-Style #overview-tab div.rich-Content {
/*
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-wrap: wrap;
*/
}
/* Overview > Rich Content 【H3.slogan-big 文圖】 >> text-on-top (.col-md-12) >> 【水平置中 + 左右 padding】【.text-Top/ Bottom】 */
.B2C-Style #overview-tab > div.row > .col-md-12 > h3.slogan-big + div > div > p, /* 暫時示意 */
.B2C-Style #overview-tab > div.row > .col-md-12 > h3.slogan-big + div > p, /* 暫時示意 */
.B2C-Style #overview-tab > div.row > .col-md-12 > h3.slogan-big, /* 暫時示意 */
.B2C-Style #overview-tab div.text-Bottom p,
.B2C-Style #overview-tab div.text-Bottom h3.slogan-big,
.B2C-Style #overview-tab div.text-Top p,
.B2C-Style #overview-tab div.text-Top h3.slogan-big {
/* text-align: center;
padding: 0 3%; */
}
/* Overview > Rich Content 【文字靠右縮】【.text-Right】 */
.B2C-Style #overview-tab div.text-Right {
/* padding-left: 3%; */
}
/* Overview > Rich Content 【文字靠左縮】【.text-Left】 */
.B2C-Style #overview-tab div.text-Left {
/* padding-right: 3%; */
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* Overview > Rich Content【 div.rich-Content 新增後增加上下區塊距離】(隱藏線後才加 / 無灰線分隔高度 ) */
.B2C-Style #overview-tab div.rich-Content {
/* 第一個 section 不需要 margin-top
margin: 0px 0 150px;
*/
}
/* Overview > Rich Content 【文字寬度】【.text-Right/ Left】
.B2C-Style #overview-tab div.text-Right.col-md-5,
.B2C-Style #overview-tab div.col-md-5.text-Right,
.B2C-Style #overview-tab div.text-Left.col-md-5,
.B2C-Style #overview-tab div.col-md-5.text-Left {
width: 45%;
}
*/
/* Overview > Rich Content 【Offset 圖 & 文】【.text-Right/ Left 】
.B2C-Style #overview-tab div.rich-Content .col-md-offset-1.text-Left,
.B2C-Style #overview-tab div.rich-Content .text-Left.col-md-offset-1,
.B2C-Style #overview-tab div.rich-Content .col-md-offset-1 {
margin-left: 5%;
}
*/
}
/*************************************************************************************************************************
( ? ). 【 Rich_Content/ .Full_Width_Rich_Content (Dynamic 一般模組豐富圖文) 】 產品單頁面 (.B2C-Style >> 2025)
======================================================================================================================== */
/* Product Detail Page (產品單頁) >> Top Four Features >> 變橘色 */
.Dark-Mode.Orange-Theme .tab-content.features-abstract li::before {
color: #ff6a13 !important;
color: rgba(255, 106, 19, 1.0) !important;
}
/* .wording_block (.Narrow-Space 文字區中/ 文上下) */
.single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
margin-bottom: 50px; /* 原來的 */
margin: 0 auto 50px;
}
/* .title_bold (h3 >> 粗 500) */
body .single-product #overview-tab.tab-content section[class*="title_bold"] .markets-top-banner.richcontent .text-block .wording_block :is(h3),
body .single-product #overview-tab.tab-content section.title_bold .markets-top-banner.richcontent .text-block .wording_block :is(h3) {
font-weight: 500 !important;
}
/* .title_bold-6w (h3 >> 粗 600) */
body:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) .single-product #overview-tab.tab-content section.title_bold-6w .markets-top-banner.richcontent .text-block .wording_block :is(h3) {
font-weight: 600 !important;
}
/* .Subtitle_bold-4w (h4 >> 粗 400) */
body .single-product #overview-tab.tab-content section.Subtitle_bold-4w .markets-top-banner.richcontent .text-block .wording_block :is(h4) {
font-weight: 400 !important;
}
/* h4 >> 移除原本的右邊距離) */
.single-product #overview-tab.tab-content section .markets-top-banner.richcontent .text-block .wording_block :is(h4) {
margin-right: 0 !important;
}
/* 字陰影 (.Dark_Theme >> h3) */
.single-product #overview-tab.tab-content section.Dark_Theme .markets-top-banner.richcontent .text-block .wording_block :is(h3) {
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
/* 字陰影 (.Dark_Theme >> h4/ p) */
.single-product #overview-tab.tab-content section.Dark_Theme .markets-top-banner.richcontent .text-block .wording_block :is(h4, p) {
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* .wording_block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */
.single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block {
/* transform: translateY(-100%); */
}
/* .wording_block (.Transform-to-Bottom 文字區左右時 >> .wording_block 強制移動到下方 ) */
.single-product #overview-tab.tab-content section.Transform-to-Bottom .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block {
/* transform: translateY(100%); */
}
/* .Reduce-Text-Block-Space >> Dynamic Rich Content */
.single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) {
padding: 2rem 0;
padding: 2rem 1.3rem;
}
/* .text_block-Higher >> Dynamic Rich Content */
.single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block {
padding: 9.3rem 0;
padding: 150px 0;
padding: 150px 15px;
}
/* .Orange-Subtitle + .Orange-Title (一般橘色) >> H4/ H3 */
/* H3 */
section#content .single-product .All-Rich-Content-Section section.Orange-Title:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h3):not(section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3),
section.Orange-Title :is(h3):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.modal h4):not(section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3),
/* H4 */
section#content .single-product .All-Rich-Content-Section section.Orange-Subtitle:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h4),
section.Orange-Subtitle :is(h4):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h3):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.well-compare h3):not(.modal h4) {
color: #ff6a13 !important;/* 黑底時 */
color: rgba(255, 106, 19, 1.0) !important;/* 黑底時 */
opacity: 1.0;
}
/* .Orange-SubtitleY (亮橘色) >> H4 */
/* H3 */
section#content .single-product .All-Rich-Content-Section section.Orange-TitleY:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h3):not(section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3),
section.Orange-TitleY :is(h3):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.modal h4):not(section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3),
/* H4 */
section#content .single-product .All-Rich-Content-Section section.Orange-SubtitleY:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h4),
section.Orange-SubtitleY :is(h4):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h3):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.well-compare h3):not(.modal h4) {
color: #f9bf30 !important;/* 黑底時 */
color: rgba(249, 191, 48, 1.0) !important;/* 黑底時 */
opacity: 1.0;
}
/* 768 以上 */
@media (min-width: 768px) {
/* .text-block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */
.single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) {
/* transform: translateY(-100%); */
display: flex;
align-items: flex-start;/* 對齊上左 */
}
/* .text-block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */
.single-product #overview-tab.tab-content section.Transform-to-Bottom .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) {
/* transform: translateY(-100%); */
display: flex;
align-items: flex-end;/* 對齊上左 */
}
}
/* 981 以上 */
@media (min-width: 981px) {
/* 副標標題變大要較小 (.Subtitle_Large-Small/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .markets-top-banner.richcontent .text-block .wording_block h4 {
font-size: 1.25rem !important;
}
/* 副標標題變大要較小 (.Subtitle_Large-Small/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large-Small .markets-top-banner.richcontent .text-block .wording_block h4 {
font-size: 1.5rem !important;
}
/* 副標標題變大 (.Subtitle_Large/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large .markets-top-banner.richcontent .text-block .wording_block h4 {
font-size: 2em !important;
font-size: 2rem !important;
}
/* 副標標題 >> 標題變中大 (.Subtitle_Large-Middle/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large-Middle .markets-top-banner.richcontent .text-block .wording_block h4 {
font-size: 2.3em !important;
line-height: 1.3em;
}
/* 副標標題 >> 標題再變大 (.Subtitle_Large-More/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large-More .markets-top-banner.richcontent .text-block .wording_block h4 {
font-size: 3rem !important;
line-height: 1.2em;
}
/* 副標標標題標題 >> 變中大 + 再變大 (.Reduce-Bottom-Space_Title/ Middle / Large-More / 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.Reduce-Bottom-Space_Title .markets-top-banner.richcontent .text-block .wording_block h3 {
padding-bottom: 2px;
padding-bottom: 10px;
}
}
/* 1024 以上 */
@media (min-width: 1024px) {
/* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */
.B2C-Style #As-Main-Title-H2.title_Large .markets-solutions-applications h2,
.B2C-Style section.title_Large [class*="markets-solutions-"] h2,
#As-Main-Title-H2.title_Large .markets-solutions-applications h2,
section.title_Large [class*="markets-solutions-"] h2,
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3),
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 {
font-size: 32px !important;
font-size: 2.2rem !important;
line-height: 1.3em;
line-height: 1.2em;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* (.section_block-Higher) 僅 Legacy 的【.container】不滿版的 section 的上一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic 模組) >> Dynamic 是沒有 HR Line 距離 >> 自己加入 */
.B2C-Style .single-product #overview-tab.tab-content section.section_block-Higher:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block,
.B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications) + section.cd-section.section_block-Higher:has(.container),
.B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full_Width_Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)),
.B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)) {
margin-top: 106px;
margin-top: 7rem;
margin-bottom: 20px;
margin-bottom: 1rem;
}
/* (.section_block-Higher) 僅上方是 Legacy >> 下方 Dynamic Rich Content */
.B2C-Style .single-product #overview-tab.tab-content section:has(.container .Rich-Content-Section[class*="image_"]) + section.section_block-Higher {
margin-top: 30px;
margin-top: 2rem;
margin-bottom: 20px;
margin-bottom: 1rem;
}
/* .text_block-Higher (加高上下距離/ 原來是 100px) */
.single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right),
.single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block {
padding: 150px 0;
}
/* .wording_block (.Narrow-Space 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block,
.single-product #overview-tab.tab-content section.Narrow-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 60%;
}
/* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 59%;
}
/* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 80%;
}
/* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 85%;
}
/* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */
.B2C-Style #As-Main-Title-H2.title_Large .markets-solutions-applications h2,
.B2C-Style section.title_Large [class*="markets-solutions-"] h2,
#As-Main-Title-H2.title_Large .markets-solutions-applications h2,
section.title_Large [class*="markets-solutions-"] h2,
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3),
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 {
font-size: 65px !important;
font-size: 4.1rem !important;
line-height: 1.3em;
line-height: 1.2em;
}
/* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */
.B2C-Style .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3),
.B2C-Style .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 {
font-size: 55px !important;
font-size: 3.5rem !important;
line-height: 1.4em;
line-height: 1.2em;
}
}
/* 2000 以上 */
@media (min-width: 2000px) {
/* .wording_block (.Narrow-Space 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block,
.single-product #overview-tab.tab-content section.Narrow-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 52%;
}
/* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 51%;
}
/* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 70%;
}
/* .wording_block (.Narrow-Space-Large-More 文字區變窄/ 文上下) */
.single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block {
width: 80%;
}
}
/* 筆電寬螢幕 1281~1366px */
@Media (min-width: 1281px) and (max-width: 1366px) {
/* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */
.B2C-Style #As-Main-Title-H2.title_Large .markets-solutions-applications h2,
.B2C-Style section.title_Large [class*="markets-solutions-"] h2,
#As-Main-Title-H2.title_Large .markets-solutions-applications h2,
section.title_Large [class*="markets-solutions-"] h2,
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3),
.B2C-Style .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 {
font-size: 43px !important;
font-size: 2.7rem !important;
line-height: 1.3em;
line-height: 1.2em;
}
}
/* 480 以下 */
@Media (max-width: 480px) {
.B2C-Style .single-product #overview-tab.tab-content section.section_block-Higher:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block,
.B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications) + section.cd-section.section_block-Higher:has(.container), .B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full_Width_Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)),
.B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)) {
margin-top: 30px;
margin-top: 2rem;
margin-bottom: 20px;
margin-bottom: 1rem;
}
/* .Reduce-Text-Block-Space >> Dynamic Rich Content */
.B2C-Style .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right),
.B2C-Style .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block {
padding: 2rem 0;
padding: 2rem 1.2rem;
}
/* .wording_block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */
.single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block {
transform: unset;
}
/* 所有 Dynamic Template 模組 >> 標題 Title (H3/ H2) */
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) :is(
.markets-top-banner.richcontent h3.RC_LTitle,
.markets-solutions-recommend-products,
.markets-solutions-overview h2,
.markets-solutions-applications h2,
.markets-solutions-benefits h2,
.home_spot_light h2,
.home_promotion_top h2,
.home_channel_videos h2),
/* 非滿版時 >> 所有 Dynamic Template 模組 >> 標題 Title (H3/ H2) */
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section section :is(
.markets-top-banner.richcontent h3.RC_LTitle,
.markets-solutions-recommend-products,
.markets-solutions-overview h2,
.markets-solutions-applications h2,
.markets-solutions-benefits h2,
.home_spot_light h2,
.home_promotion_top h2,
.home_channel_videos h2),
/* 非滿版時 >> Legacy */
.B2C-Style .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3,
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Rich_Content, .Rich-Content-Section, .Rich-Content-Section.image_top) h3:not(.carousel-caption) {
font-size: 34px !important;
text-align: center !important;
font-size: 34px !important;
font-size: 1.8rem !important;
line-height: 1.4em;
}
/* (.Reduce-Image-Block-Height/ 透明圖檔稱高度時) 縮減一般 .image_block 高度縮減 */
.single-product #overview-tab.tab-content .All-Rich-Content-Section section.Reduce-Image-Block-Height .markets-top-banner.richcontent .image_block {
max-height: 295px;
max-height: 35vh;
}
/* (.Reduce-Image-Block-HeightX/ 透明圖檔稱高度時) 縮減更多 .image_block 高度縮減 */
.single-product #overview-tab.tab-content .All-Rich-Content-Section section.Reduce-Image-Block-HeightX .markets-top-banner.richcontent .image_block {
text-align: center;
max-height: 175px;
max-height: 20vh;
max-height: 215px;
max-height: 26vh;
}
/* 所有 Dynamic Template 模組 >> 加大副標題 Large Title (的 H3) >> 底部縮減 */
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h3,
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h3 {
padding-bottom: 7px;
padding-bottom: 0.4rem;
}
/* 所有 Dynamic Template 模組 >> 副標題 Subtitle (H4) */
/* Full Width Rich Content */
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4,
/* 非滿版時 >> 所有 Dynamic Template 模組 >> 副標題 Title (H4) */
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4,
/* 非滿版時 >> Legacy */
.B2C-Style .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .carousel-caption h3,
.B2C-Style .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:has(.Rich_Content, .Rich-Content-Section):is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4 {
font-size: 21px !important;
font-size: 1.3rem !important;
line-height: 1.4em;
font-size: 22px !important;
font-size: 1.4rem !important;
}
}
/*************************************************************************************************************************
( ? ). 【.Multi_Rich_Content 多模塊狀豐富圖文】 產品單頁面 (.B2C-Style >> 2025)
======================================================================================================================== */
/******************************** 【 US4332 (便當盒多模塊狀豐富圖文 + 所有 Rich Content)】產品 Rich Content for 便當盒 【 額外定義 】**************************************/
/************************** 【Contact-Us-Form】for-Product-Page_Rich-Content **************************/
/* Two Part >> Height */
.B2C-Style #wording-gsection,
.B2C-Style #form-gsection {
height: 60vh;
}
/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {
/* Two Part >> Height */
.B2C-Style #wording-gsection,
.B2C-Style #form-gsection {
height: 75vh;
}
}
/* ========================================================================================================================
Breadcrumbs optimization (Drop Down Menu/ 麵包屑下拉選單) >> .B2C-Style
======================================================================================================================== */
/* 麵包屑 (Breadcrumbs) >> li::before 箭頭設定 */
.B2C-Style .product-head ol.breadcrumb > li + li:before,
.B2C-Style .desktop-product-header ol.breadcrumb > li + li:before,
.B2C-Style #product_detail ol.breadcrumb > li + li:before {
padding-right: 1px;
padding-left: 2px;
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
min-width: 1rem;
max-width: 1rem;
}
@media (min-width: 1200px) {
.B2C-Style #product_detail .col-lg-7:has(.breadcrumb),
.B2C-Style .col-lg-7:has(.breadcrumb) {
width: 57% !important;
}
.B2C-Style #product_detail .col-lg-5.product_search,
.B2C-Style .col-lg-5.product_search {
width: 43% !important;
}
}
/* 橫向智慧手機及其他更小解析度 */
@media (min-width: 1281px) and (max-width: 1366px) {
.B2C-Style #product_detail .col-lg-7:has(.breadcrumb),
.B2C-Style .col-lg-7:has(.breadcrumb) {
width: 56% !important;
}
.B2C-Style #product_detail .col-lg-5.product_search,
.B2C-Style .col-lg-5.product_search {
width: 44% !important;
}
}
/* ========================================================================================================================
Pardot Form 【Lite Ver Form】 >> for Rich Content Product Page Inquire (.Pardot-inSection.col-md-6)
======================================================================================================================== */
/* 600 以上 */
@media (min-width: 600px) {
/* 【.B2C-Style】for Pardot Lite Ver Form (.Pardot-inSection.col-md-6) */
.B2C-Style #form-gsection.Pardot-inSection {
padding: 3.2% 1.5% !important; /* ( 新版 Product Page ) (.col-md-6 寬度從一半算) */
padding: 3.65% 1.5% !important; /* ( 新版 Product Page ) (.col-md-6 寬度從一半算) */
padding: 3.85% 1.5% !important; /* ( 新版 Product Page ) (.col-md-6 寬度從一半算) */
}
/* 【.B2C-Style】 總寬度 >> Out-Container + .form-field + submit */
.B2C-Style #pardot-form.form .form-field,
.B2C-Style #pardot-form.form .submit,
.B2C-Style #pardot-form.form {
max-width: 555px; /* ( 新版 Product Page ) (.col-md-6 寬度從一半算) */
}
}
/*=====================================================================================================================================================
【 Personalized Recommended Content 】
(A. Icon Style) + (B. Content Style)
======================================================================================================================================================*/
/* H3 >> Single Style + Blue BG (.B2C-Style) */
.B2C-Style .recommended-content-wrapper.Single-Item.Blue-BG .recommended-content-block h3 {
color: #fff !important;
}
.B2C-Style .recommended-content-block a.btn-primary.button_white,
.B2C-Style .recommended-content-block .btn-primary.button_white {
background-color: #fff !important;
color: #0fa5e3 !important;
border: 2px solid #0fa5e3 !important;
color: #005caa !important;
border: 2px solid #005caa !important;
}
.B2C-Style .Single-Item.Blue-BG .recommended-content-block a.btn-primary.button_white,
.B2C-Style .Single-Item.Blue-BG .recommended-content-block .btn-primary.button_white {
border: 2px solid transparent !important;
}
.B2C-Style .recommended-hover-block:hover .recommended-content-block a.btn-primary,
.B2C-Style .recommended-hover-block:hover .recommended-content-block .btn-primary {
color: #fff !important;
background-color: #000 !important;
border: 2px solid #000 !important;
}
.B2C-Style .Single-Item.Blue-BG .recommended-hover-block:hover .recommended-content-block a.btn-primary,
.B2C-Style .Single-Item.Blue-BG .recommended-hover-block:hover .recommended-content-block .btn-primary {
border: 2px solid transparent !important;
background-color: #0fa5e3;
background-color: rgba(15,165,227,1.0);
background-color: #01caff;
background-color: rgba(1,202,255,1.0);
background-color: #000 !important;
}
/* ========================================================================================================================
【Multi-Language_Modify】 >> Adjustment for All Page (多國別語言 / 客製內容修改)
body[class*="locale_la-??"] #content 也可以這樣寫,
ex: 若[class*="locale_la-"] #content, 即一起套用了 la-es & la-pt.
.B2C-Style[class*="locale_pl-"] #content,
.B2C-Style[class*="locale_la-"] #content,
.B2C-Style[class*="locale_de-"] #content,
.B2C-Style[class*="locale_es-"] #content,
.B2C-Style[class*="locale_pt-"] #content,
.B2C-Style[class*="locale_fr-"] #content,
.B2C-Style[class*="locale_se-"] #content,
.B2C-Style[class*="locale_ru-"] #content,
.B2C-Style[class*="locale_ua-"] #content,
.B2C-Style[class*="locale_bg-"] #content,
.B2C-Style[class*="locale_ro-"] #content,
.B2C-Style[class*="locale_tr-"] #content,
1. 較長 (x9):
body.locale_pl-pl #content,
body[class*="locale_la-"] #content,
body.locale_la-es #content,
body.locale_la-pt #content,
body.locale_de-de #content,
body.locale_es-es #content,
body.locale_fr-fr #content,
body.locale_pt-pt #content,
body.locale_se-sv #content,
body.locale_ru-ru #content,
body.locale_ua-uk #content,
body.locale_bg-bg #content
body.locale_ro-ro #content,
body.locale_tr-tr #content,
======================================================================================================================== */
@media (min-width: 1200px) {
/******************************** Font Size **************************************/
/* ATEN-Blue-Brand-Color >> 次小字 (0.9rem) (14.4px)*/
.B2C-Style.locale_ru-ru #content .desktop-product-header h2.subtitle/* Product Listing Page >> Filter >> Main Title(H2) */ {
font-size: 0.9rem;
}
/* ATEN-Blue-Brand-Color >> 次小字 (0.6rem) (9.6px)*/
.B2C-Style.locale_ru-ru #content .well-filter a.reset/* Product Listing Page >> Filter >> Cancel */ {
font-size: 0.6rem;
}
/******************************** Others **************************************/
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
right: 226px;
right: 24%;
}
/* Product Listing Page >> Filter >> Cancel */
.B2C-Style.locale_ru-ru #content .well-filter a.reset {
padding: 0 5px !important;
}
}
/* 1400 以上 */
@media (min-width: 1400px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
right: 275px;
right: 31%;
}
}
/* 1920 以上 */
@media (min-width: 1920px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
right: 275px;
right: 28%;
}
}
/* 1199 以下 */
@media (max-width: 1199px) {
/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
}
}
/******************************** CN Icon Font 【簡中/ 中國大陸專用/.locale_cn-zh 】 **************************************/
/* 簡中一般用 (CN) >> 左箭頭(短) (All)
* 範例 :.locale_cn-zh .carousel.slide #wrapper .fa-angle-left::before
*/
/* 簡中用 (CN) >> Icon 套用 i 或者 .icon- */
.B2C-Style.locale_cn-zh #wrapper [class*="icon-"]::before,
.B2C-Style.locale_cn-zh #wrapper [class*="icon-"]::after,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*=" icon-"]::before,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*=" icon-"]::after,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*="icon-line-"]::before,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*="icon-line-"]::after,
.B2C-Style.locale_cn-zh #wrapper [class*=" icon-line-"]::before,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*=" icon-line-"]::after,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*="icon-line2-"]::before,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*="icon-line2-"]::after,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*=" icon-line2-"]::before,
.B2C-Style.locale_cn-zh #wrapper #wrapper [class*=" icon-line2-"]::after,
.B2C-Style.locale_cn-zh #wrapper .side-header #primary-menu ul > li.sub-menu > a::before,
.B2C-Style.locale_cn-zh #wrapper .side-header #primary-menu ul > li.sub-menu > a::after {
font-family: 'font-icons','Lato' !important;
}
/* 簡中用 (CN) >> Icon 套用 FontAwesome */
.B2C-Style.locale_cn-zh #wrapper .fa::before,
.B2C-Style.locale_cn-zh #wrapper .fa::after,
.B2C-Style.locale_cn-zh #wrapper .fas::before,
.B2C-Style.locale_cn-zh #wrapper .fas::after {
font-family: 'FontAwesome' !important;
}
/* 簡中用 (CN) >> Icon 套用 FontAwesome 5 Brands */
.B2C-Style.locale_cn-zh #wrapper .fab::before,
.B2C-Style.locale_cn-zh #wrapper .fab::after {
font-family:"Font Awesome 5 Brands" !important;
}
/* 簡中用 (CN) >> Icon 套用 FontAwesome 5 Free */
.B2C-Style.locale_cn-zh #wrapper .fa_v5::before,
.B2C-Style.locale_cn-zh #wrapper .fa_v5::after,
.B2C-Style.locale_cn-zh #wrapper .far::before,
.B2C-Style.locale_cn-zh #wrapper .far::after,
.B2C-Style.locale_cn-zh #wrapper .fas_v5::before,
.B2C-Style.locale_cn-zh #wrapper .fas_v5::after {
font-family:"Font Awesome 5 Free" !important;
}
/***************** 簡中客製用 (CN) >> 左箭頭(短) (All) *****************/
/* 簡中用 (CN) >> 左箭頭(短) (All) */
body.locale_cn-zh div[id*="Slide-Content-Default"] #wrapper .fa-angle-left::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] .fa-angle-left::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] #wrapper .fa-chevron-left::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] .fa-chevron-left::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] #wrapper .fa-angle-left::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] .fa-angle-left::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] #wrapper .fa-chevron-left::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] .fa-chevron-left::before {
font-family: 'FontAwesome' !important; /* CN 不吃 Google */
content: "\f053";
font-family: 'font-icons','Lato' !important; /* CN 不吃 Google */
content: "\e7a4";
}
/* 簡中用 (CN) >> 右箭頭(短) (All) */
body.locale_cn-zh div[id*="Slide-Content-Default"] #wrapper .fa-angle-right::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] .fa-angle-right::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] .fa-chevron-right::before,
body.locale_cn-zh div[id*="Slide-Content-Default"] .fa-chevron-right::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] #wrapper .fa-angle-right::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] .fa-angle-right::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] .fa-chevron-right::before,
body.locale_cn-zh div[id^="Slide-Content-Default"] .fa-chevron-right::before {
font-family: 'FontAwesome' !important; /* CN 不吃 Google */
content: "\f105";
content: "\f054";
font-family: 'font-icons','Lato' !important; /* CN 不吃 Google */
content: "\e7a5";
}
/* 簡中用 (CN) >> Print Icon (列印) */
.B2C-Style.locale_cn-zh .table-responsive + .modal-footer .btn-info i.icon-print::before/* Compare Share Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style.locale_cn-zh #comparison_listing .btn-info i.icon-print::before/* Compare Table >> All Button(at Bottom) > icon-Print */,
.B2C-Style.locale_cn-zh #wrapper .icon-print::before,
.B2C-Style.locale_cn-zh .icon-print::before {
font-family: 'font-icons','Lato' !important;
content: "\e887";
}
/* 簡中用 (CN) >> Share Icon (分享) */
.B2C-Style.locale_cn-zh #comparison_listing .btn-info i.icon-share::before/* Compare Table >> All Button(at Bottom) > icon-share */,
.B2C-Style.locale_cn-zh #wrapper .icon-share::before,
.B2C-Style.locale_cn-zh .icon-share::before {
font-family: 'font-icons','Lato' !important;
content: "\e670";
}
/* 簡中用 (CN) >> Download Icon (下載-1) >> Default Page (非產品頁 Tab Menu) */
.B2C-Style.locale_cn-zh .single-product .tab-content .icon-download-alt::before,
.B2C-Style.locale_cn-zh #wrapper .icon-download-alt::before,
.B2C-Style.locale_cn-zh .icon-download-alt::before,
.B2C-Style.locale_cn-zh .table-responsive + .modal-footer .btn-info i.icon-download::before/* Compare Share Table >> All Button(at Bottom) > icon-download */,
.B2C-Style.locale_cn-zh#comparison_listing .btn-info i.icon-download::before/* Compare Table >> All Button(at Bottom) > icon-download */,
.B2C-Style.locale_cn-zh .single-product .tab-content .icon-download::before,
.B2C-Style.locale_cn-zh #wrapper .icon-download::before,
.B2C-Style.locale_cn-zh .icon-download::before {
font-family: 'font-icons','Lato' !important;
content: "\e6d4";
font-family: "FontAwesome" !important;
content: "\f019";
}
/* 簡中用 (CN) >> Add to Cart Button (加入購物車) */
.B2C-Style.locale_cn-zh #wrapper .fa-cart-plus::before,
.B2C-Style.locale_cn-zh .fa-cart-plus::before {
display: inline-block;
position: relative;
font-size: 1em;
font-size: 1rem;
font-weight: 300;
margin-left: 4%;
font-family: "FontAwesome" !important;
content: "\f217";
top: 0;
}
/* 簡中用 (CN) >> Add/ Plus (Line) (加入/Show More(顯示較多)/Line) */
.B2C-Style.locale_cn-zh #wrapper .icon-line-plus::before,
.B2C-Style.locale_cn-zh .icon-line-plus::before,
.B2C-Style.locale_cn-zh #wrapper .icon-plus::before,
.B2C-Style.locale_cn-zh .icon-plus::before {
font-family: 'lined-icons','Lato' !important;
content: "\e114";
font-family: 'font-icons','Lato' !important;
content: "\e71d";
}
/* 簡中用 (CN) >> Add/ Plus (Square) (加入/Box) */
.B2C-Style.locale_cn-zh .row.result_item p + p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style.locale_cn-zh .row.result_item p + a::before/* Search Result Page >> Result Item > Add Icon */,
.B2C-Style.locale_cn-zh #wrapper .fa-plus-square:before,
.B2C-Style.locale_cn-zh .fa-plus-square:before {
font-family: "FontAwesome" !important;
content: "\f0fe";
}
/* 簡中用 (CN) >> Check-Circle (勾選狀態 with 圓外圈 >> for Compatible Products ) */
.B2C-Style.locale_cn-zh #product_lists .btn-primary.addtocart.added i.icon-ok::before/* Product Listing >> Add to Cart >> Added (已加入) >> 打勾 OK Icon*/,
.B2C-Style.locale_cn-zh .single-product .related_product_tabs .fa-check-circle::before,
.B2C-Style.locale_cn-zh #wrapper .fa-check-circle::before,
.B2C-Style.locale_cn-zh .fa-check-circle::before {
font-family: "FontAwesome" !important;
content: "\f058";
}
/* 簡中用 (CN) >> Learn More Button (右箭頭 with 右線條) */
.B2C-Style.locale_cn-zh #primary-menu .mega-menu-advertisements-horizontal > .mega-menu-advertisement > .mega-menu-advertisement-body > .mega-menu-advertisement-button::after,
.B2C-Style.locale_cn-zh #primary-menu .mega-menu-advertisements-vertical > .mega-menu-advertisement > .mega-menu-advertisement-body > a.mega-menu-advertisement-button::after,
.B2C-Style.locale_cn-zh #wrapper .btn-learnm a::after,
.B2C-Style.locale_cn-zh .btn-learnm a::after {
display: inline-block;
font-size: 1em;
font-size: 1rem;
font-weight: 300;
position: relative;
font-family: "FontAwesome" !important;
content: "\f061";
top: 0;
font-family: 'font-icons','Lato' !important;
content: "\e7a5";
top: 0.1rem;
}
/* 簡中用 (CN) >> 下箭頭(短) (All) */
.B2C-Style.locale_cn-zh .core-container > div > .row.header + div > .row + .row:nth-child(2) > div > .newproduct::before/* Product SubCategory Page (產品第三層選單頁面) */,
.B2C-Style.locale_cn-zh #top-bar .icon-chevron-down::before/* 下箭頭(短) >> Select Langruage 語言選單*/,
/* .B2C-Style .btn .caret::after, 下箭頭(短) >> Sort by/ Recent Button >> Product Listing Page */
.B2C-Style.locale_cn-zh #product_lists a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Product Listing Page */,
.B2C-Style.locale_cn-zh #wrapper .top_searchbox + div a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> Search Result Page */,
.B2C-Style.locale_cn-zh a.btn-load-more .icon-chevron-down::before/* 下箭頭(短) >> Load More Button >> All Page */,
.B2C-Style.locale_cn-zh .icon-angle-down::before,
.B2C-Style.locale_cn-zh #wrapper .icon-angle-down::before,
.B2C-Style.locale_cn-zh #wrapper .fa-chevron-down::before,
.B2C-Style.locale_cn-zh #wrapper .fa-angle-down::before,
.B2C-Style.locale_cn-zh #wrapper .icon-chevron-down::before,
.B2C-Style.locale_cn-zh .fa-chevron-down::before,
.B2C-Style.locale_cn-zh .fa-angle-down::before,
.B2C-Style.locale_cn-zh .icon-chevron-down::before {
font-family: 'font-icons', 'Lato' !important;
content: "\e72d";
font-family: 'FontAwesome' !important;
content: "\f107";
}
/* 簡中用 (CN) >> 上箭頭(短) (All) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style.locale_cn-zh #gotoTop.icon-angle-up::before/* 上箭頭(短) >> 回最上 Icon */,
.B2C-Style.locale_cn-zh .icon-angle-up::before,
.B2C-Style.locale_cn-zh #wrapper .icon-angle-up::before,
.B2C-Style.locale_cn-zh #wrapper .fa-chevron-up::before,
.B2C-Style.locale_cn-zh #wrapper .fa-angle-up::before,
.B2C-Style.locale_cn-zh #wrapper .icon-chevron-up::before,
.B2C-Style.locale_cn-zh .fa-chevron-up::before,
.B2C-Style.locale_cn-zh .fa-angle-up::before,
.B2C-Style.locale_cn-zh .icon-chevron-up::before {
font-family: 'font-icons', 'Lato' !important;
content: "\e7a6";
font-family: 'FontAwesome' !important;
content: "\f077";
}
/* 簡中用 (CN) >> Minus(Show Less) Button ( — 縮減/顯示較少按鈕) */
.B2C-Style.locale_cn-zh #wrapper .icon-minus::before,
.B2C-Style.locale_cn-zh .icon-minus::before {
font-family: 'font-icons','Lato' !important;
content: "\e71e";
}
/* 簡中用 (CN) >> Close Button (X 關閉按鈕 - 非圓形) Line X */
.B2C-Style.locale_cn-zh #sitesearch_form .icon-line-cross:before/* Search Box > Icon Cancel (X - Cross)*/,
.B2C-Style.locale_cn-zh .well-compare .compare-modal a.remove-btn::before/* Compare Model >> Product Item > Remove Text Link::before */,
.B2C-Style.locale_cn-zh #wrapper .icon-line-cross:before/* Icon Cancel (X - Cross)*/,
.B2C-Style.locale_cn-zh #wrapper .icon-remove::before,
.B2C-Style.locale_cn-zh #wrapper .fa-close::before,
.B2C-Style.locale_cn-zh #wrapper .fa-times::before,
.B2C-Style.locale_cn-zh .icon-line-cross:before/* Icon Cancel (X - Cross)*/,
.B2C-Style.locale_cn-zh .icon-remove::before,
.B2C-Style.locale_cn-zh .fa-close::before,
.B2C-Style.locale_cn-zh .fa-times::before {
font-family: 'lined-icons', 'Lato' !important;
content: "\e117";
}
/* 簡中用 (CN) >> Cancel/ Clear Button (取消按鈕) 圓形 X */
.B2C-Style.locale_cn-zh #reset_btn .fa-times-circle::before/* Search Result Page >> Filter >> Cancel */,
.B2C-Style.locale_cn-zh .well-filter a.reset::after,
.B2C-Style.locale_cn-zh #wrapper .fa-times-circle::before,
.B2C-Style.locale_cn-zh #wrapper .fa-remove::before,
.B2C-Style.locale_cn-zh #wrapper .fa-close::before,
.B2C-Style.locale_cn-zh .fa-times-circle::before,
.B2C-Style.locale_cn-zh .fa-remove::before,
.B2C-Style.locale_cn-zh .fa-close::before {
font-family: "Font Awesome 5 Free" !important;
content: "\f057";
}
/* 簡中用 (CN) >> Question Symbol Button (Question/ Help/ 問號符號 ?) (Circle 底圓) */
.B2C-Style.locale_cn-zh .product_button .discontinued-product a.button .icon-question-sign::before/* Subcategory Product Page > 問號 Icon::before */,
.B2C-Style.locale_cn-zh .fa.icon-question-sign::before,
.B2C-Style.locale_cn-zh #wrapper .icon-question-sign::before,
.B2C-Style.locale_cn-zh .icon-question-sign::before {
font-family: 'font-icons','Lato' !important;
content: "\e710";
}
/* 簡中用 (CN) >> Ban/ Block/ Discontinued Symbol Button (已下架產品/ 阻擋符號 *) */
.B2C-Style.locale_cn-zh .product_button .discontinued-product a.button .fa-ban::before/* Subcategory Product Page > 下架 Icon::before */,
.B2C-Style.locale_cn-zh .fa.fa-ban::before,
.B2C-Style.locale_cn-zh #wrapper .fa-ban::before,
.B2C-Style.locale_cn-zh .fa-ban::before {
font-family: 'FontAwesome' !important;
content: "\f05e";
}
/* 簡中用 (CN) >> New Symbol Button (新品 *) >> 產品頁 (Product Page) */
.B2C-Style.locale_cn-zh .product_button .discontinued-product a.button .fa-asterisk::before/* Subcategory Product Page > 新品 Icon::before */,
.B2C-Style.locale_cn-zh .fa.fa-asterisk::before,
.B2C-Style.locale_cn-zh #wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style.locale_cn-zh .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */,
.B2C-Style.locale_cn-zh #wrapper .fa-asterisk::before,
.B2C-Style.locale_cn-zh .fa-asterisk::before {
font-family: 'FontAwesome' !important;
content: "\f069";
}
/* 簡中用 (CN) >> Shopping-Basket Button (購物籃) >> 產品比較 (Product Page) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style.locale_cn-zh #wrapper .fa-shopping-basket::before,
.B2C-Style.locale_cn-zh .fa-shopping-basket::before {
font-family: "Font Awesome 5 Free";
content: "\f291";
}
/* 簡中用 (CN) >> Search (放大鏡/ 搜索) (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
.B2C-Style.locale_cn-zh #sitesearch_form .btn .icon-search3::before/* Search Result Page */,
.B2C-Style.locale_cn-zh #top-search .icon-search3::before/* Search >> Top Search + Search Box */,
.B2C-Style.locale_cn-zh #wrapper .icon-search3::before,
.B2C-Style.locale_cn-zh .icon-search3::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
content: "\e6be";
}
/* 簡中用 (CN) >> 【Product Tab Menu】Applications Icon (應用方案) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-files::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-files::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e605";
}
/* 簡中用 (CN) >> 【Product Tab Menu】Download & Support Icon (下載/支援與服務) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-download::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-download::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e615";
}
/* 簡中用 (CN) >> 【Product Tab Menu】Spec Icon (規格) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-data::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-data::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e6b0";
}
/* 簡中用 (CN) >> 【Product Tab Menu】Diagram Icon (連線圖-旋轉) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-sitemap::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-sitemap::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e78a";
}
/* 簡中用 (CN) >> 【Product Tab Menu】Features Icon (特點) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-list2::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-list2::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e6f3";
}
/* 簡中用 (CN) >>【Product Tab Menu】Info Icon (資訊) */
.B2C-Style.locale_cn-zh #wrapper .tab-nav .icon-info-sign::before,
.B2C-Style.locale_cn-zh .tab-nav .icon-info-sign::before {
font-family: 'font-icons','Lato' !important;
font-style: normal;
font-weight: 400;
content: "\e711";
}
/* =====================================================================================================
************ 主選單 CPC Link 快速入口 **************
0. (CPC Link) Main Menu Link (快速入口 for 黑底 + 白底) for Consumers Products
>> #header #primary-menu ul li.menuitem_for-consumer
===================================================================================================== */
/* 外層 Li 選項 >> 一般 Main 高度 / 位置 >> li.menuitem_for-consumer >> 較高 height: 70px */
#header.transparent-header #primary-menu ul li.menuitem_for-consumer,
#header #primary-menu ul li.menuitem_for-consumer,
#primary-menu ul li.menuitem_for-consumer {
height: 70px;
margin: 0 10px 0 15px !important; /* 與其它 LI 左右距離 */
}
/* 外層 Li 選項 >> 固定 Fixed Main 高度 / 位置 >> li.menuitem_for-consumer >> 較低 height: 60px */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer {
height: 60px;
}
/* 重置 >> Button Hover Color 顏色統一回歸 (白 + 黑底) >> li:hover a */
.dark #header-wrap:not(.not-dark) #primary-menu ul.menu_body_0 > li.menuitem_for-consumer:hover > a,
#primary-menu ul.menu_body_0 > li.menuitem_for-consumer:focus > a {
/* all: unset; */
background: unset;
color: unset;
}
/* 白色 Button 樣式(不含顏色) / 入口按鈕 (原始白底 White BG -- 無狀態 >> 非固定 + 固定選單) (li.menuitem_for-consumer > a) */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a,
#primary-menu ul li.menuitem_for-consumer a {
position: relative;
display: inline-block;
line-height: 1.4em;
height: auto !important;
padding: 9px 17px !important;
background-color: transparent;
background: transparent;
border-radius: 300px;
border: 2px solid #94c52c !important;
border: 2px solid rgba(148, 197, 44, 1.0) !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .05);
backdrop-filter: blur(5px);
transition: all 0.3s ease-in-out 0s;
}
/* 非固定時 Button 上下距離縮短 (非固定一般 Main) >> li.menuitem_for-consumer >> 較高 height: 70px */
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a {
top: 0px;
}
/* 固定時 Button 上下距離縮短 (固定 Fixed Main) >> li.menuitem_for-consumer >> 較低 height: 60px */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a {
top: 0px;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
/* Color 顏色統一 >> 所有 Button / 入口按鈕 + 箭頭 (After Arrow) (原始白底 White BG -- 無狀態) (li.menuitem_for-consumer > a) */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a::after,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a::after,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a::after,
#header #primary-menu ul li.menuitem_for-consumer a::after,
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a,
#primary-menu ul li.menuitem_for-consumer a {
color: #444 !important;
color: #333 !important;
color: #000 !important;
text-shadow: none !important;
transition: all 0.3s ease-in-out 0s;
}
/* 黑色 Homepage Button (Dark Mode -- 黑底 Black BG) / 入口按鈕 (.transparent-header 非固定時) */
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a {
background-color: rgba(0, 0, 0, .3) !important;
background: rgba(0, 0, 0, .3) !important;
border: 2px solid #94c52c !important;
border: 2px solid rgba(148, 197, 44, 1.0) !important;
box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .25);
}
/* Color 顏色統一 (黑底) >> 黑色 Homepage Button + 箭頭 (After Arrow) (Dark Mode -- 黑底 Black BG) / 入口按鈕 (.transparent-header 非固定時) */
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a::after,
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a {
color: #eee !important;
}
/* Button Hover Color 顏色統一 (白 + 黑底) >> */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a:hover,
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a:hover,
#header #primary-menu ul li.menuitem_for-consumer a:hover,
#primary-menu ul li.menuitem_for-consumer a:hover {
background-color: rgb(159, 226, 40) !important;
background: rgb(159, 226, 40) !important;
border: 2px solid rgb(159, 226, 40) !important;
background-color: rgba(159, 226, 40, 1.0) !important;
background: rgba(159, 226, 40, 1.0) !important;
background-color: rgb(141 212 9) !important;
background: rgb(141 212 9) !important;
background: #94c52c !important;
background: rgba(148, 197, 44, 1.0) !important;
border: 2px solid transparent !important;
transition: all 0.3s ease-in-out 0s;
}
/* Button Hover Color 顏色統一 (白 + 黑底) >> */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover::after,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover::after,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a:hover::after,
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a:hover::after,
#header #primary-menu ul li.menuitem_for-consumer a:hover::after,
#primary-menu ul li.menuitem_for-consumer a:hover::after,
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a:hover,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a:hover,
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a:hover,
#header #primary-menu ul li.menuitem_for-consumer a:hover,
#primary-menu ul li.menuitem_for-consumer a:hover {
color: #fff !important;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease-in-out 0s;
}
/* Li 選單 + Button 入口按鈕 >> 裡面內容物上下左右置中 */
#header.transparent-header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a,
#primary-menu ul li.menuitem_for-consumer a,
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer,
#header.transparent-header #primary-menu ul li.menuitem_for-consumer,
#header #primary-menu ul li.menuitem_for-consumer,
#primary-menu ul li.menuitem_for-consumer {
display: flex;
align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
justify-content: center; /* 水平置中 */
flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
}
/* Button 的 箭頭 (After Arrow) 統一樣式 */
#header.sticky-header:not(.static-sticky) #primary-menu ul li.menuitem_for-consumer a::after,
#header #primary-menu ul li.menuitem_for-consumer a::after,
#primary-menu ul li.menuitem_for-consumer a::after {
font-size: 1em;
font-weight: 600;
display: inline-block;
padding-left: 3px;
font-family: 'Material Symbols Outlined' !important;
content: "\f1e1";
content: '\f8ce';
font-size: 1.4em;
}
/* 1200 以上 */
@media (min-width: 1200px) {}
/* 990 以下 */
@Media (max-width: 990px) {
/* 外層 Li 選項 >> 一般 Main 高度 / 位置 >> li.menuitem_for-consumer >> 較高 height: 70px */
#header.transparent-header #primary-menu ul li.menuitem_for-consumer,
#header #primary-menu ul li.menuitem_for-consumer,
#primary-menu ul li.menuitem_for-consumer {
margin: 0px !important; /* LI 變垂直 >> 寬 100% */
height: 50px !important; /* 高度縮小 */
float: none;
margin: 0 !important;
text-align: left !important;
height: 55px !important; /* 高度縮小 */
}
/* for-consumer Button >> 水平置中 (有外框)
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a {
height: 43px !important;
width: 50%;
margin: 5px auto !important;
padding: 5px !important;
}
*/
/* for-consumer Button >> 水平置中 (無外框 >> 融合於 Menu ) */
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a,
#header #primary-menu ul li.menuitem_for-consumer a {
border: none !important;
padding: 0px !important;
display: block;
height: auto !important;
width: 100%;
padding: 0 5px !important;
box-shadow: none !important;
}
/* for-consumer Button >> 水平置中 (無外框 >> 融合於 Menu ) */
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a::after,
#header #primary-menu ul li.menuitem_for-consumer a::after {
position: absolute;
right: 0;
padding-right: 7px;
}
/* for-consumer Button >> 水平置中 (無外框 >> 融合於 Menu ) */
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a::after,
#header.transparent-header.dark #primary-menu ul li.menuitem_for-consumer a {
color: rgba(143, 195, 32, 1.0);
color: #8fc320;
color: rgba(128, 186, 45, 1.0) !important;
color: #80ba2d !important;
color: #94c52c !important;
color: rgba(148, 197, 44, 1.0) !important;
}
}