/*===================================================================================================================================================== 【 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 */ /* =========================================================================================================================================================== 【 Webfont Import 】>>【 Font Family 變數作法 (全球 + 亞洲字體) 】 (.B2C-Style >> 2024) (**** 優化 CSS 寫法增進載入效率/ 需要排除 Icon Font ****) - 目標：優化 Global-en (.B2C-Style) 全域字體渲染 - 策略：利用 CSS 變數與繼承機制，取代高效能消耗的 *:not() 選擇器 - 在地化：利用不同地區以不同 CSS 變數疊加與繼承機制，確保各地區字體優先順序正確且不會互相干擾 (尤其是亞洲字體，避免日文/韓文/繁中/簡中混用問題) =========================================================================================================================================================== */ /* for en (英文原來官網已載入) >> 加入 display=swap >> 讓未載入時使用電腦的字體, webfont 載入完畢再切回 >> 若不是使用 google 再自行改 @font-face 定義 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); */ /* for 亞洲 (繁中 / 簡中 / 日文 / 韓文 字型) (from Google) >> 加入 display=swap >> 讓未載入時使用電腦的字體, webfont 載入完畢再切回 >> 若不是使用 google 再自行改 @font-face 定義 */ @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'); /* 基礎字體 & 各語系字體變數定義 */ .B2C-Style { /* --- 🎯 基礎字體定義 --- */ --b2c-font-en-leader: "Roboto"; /* 【英文字型前綴】，讓 "Roboto" 這個英文字體永遠套用在各國最前方，確保英文字體一致性 */ --b2c-font-en: "Segoe UI", "Segoe UI Light", "Myriad Set Pro", Trebuchet MS, Lucida Grande, Verdana, Arial, sans-serif; /* 【英文字型後綴】 */ /* 🚀 --- 全部亞洲字體後綴定義 --- */ --b2c-font-asian: "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR";/* 【全亞洲字型補充後綴】，確保任何語系切換都能獲得適合的字體，並且不會因為語系切換而導致字體混亂 */ --b2c-font-asian-tw: "Noto Sans SC", "Noto Sans JP", "Noto Sans KR"; /* Only for Taiwan >> 排除 Noto Sans TC，因為是繁體字型，為客製化後綴補充其餘亞洲字，確保繁中網頁同時出現其餘亞洲字體 */ --b2c-font-asian-jp: "Noto Sans TC", "Noto Sans SC", "Noto Sans KR"; /* Only for Japan >> 排除 Noto Sans JP，因為它是日文字型，為客製化後綴補充其餘亞洲字，確保日本網頁同時出現其餘亞洲字體 */ --b2c-font-asian-kr: "Noto Sans TC", "Noto Sans SC", "Noto Sans JP"; /* Only for Korea >> 排除 Noto Sans KR，因為它是韓文字型，為客製化後綴補充其餘亞洲字，確保韓國網頁同時出現其餘亞洲字體 */ --b2c-font-asian-cn: "Noto Sans TC", "Noto Sans JP", "Noto Sans KR"; /* Only for China >> 排除 Noto Sans SC，因為它是簡體字型，為客製化後綴補充其餘亞洲字，確保簡中網頁同時出現其餘亞洲字體 */ /* 🚀 --- 各語系專屬字體定義 (避免語系混雜) >> 三層式疊加 (前墜變數 + 在地特定字 + 後墜變數) --- */ --b2c-font-tw: var(--b2c-font-en-leader), "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", var(--b2c-font-en), var(--b2c-font-asian-tw); --b2c-font-jp: var(--b2c-font-en-leader), "Noto Sans JP", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", var(--b2c-font-en), var(--b2c-font-asian-jp); --b2c-font-kr: var(--b2c-font-en-leader), "Noto Sans KR", "Malgun Gothic", "Dotum", "Gulim", var(--b2c-font-en), var(--b2c-font-asian-kr); --b2c-font-cn: var(--b2c-font-en-leader), "Noto Sans SC", "Microsoft YaHei", "微軟雅黑體", "simhei", var(--b2c-font-en), var(--b2c-font-asian-cn); /* 🎯 官網預設 All 字體 (Global / Local Default) >> 三層式疊加 (前墜變數 + 中綴變數 + 後墜變數) */ --b2c-font: var(--b2c-font-en-leader), var(--b2c-font-en), var(--b2c-font-asian); /* 全站基礎套用 >> 字體變數總和 >> 全站預設字體 (三層) */ font-family: var(--b2c-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 🚀 語系切換：精確映射上方各語系專屬字體變數 */ .B2C-Style.locale_tw-zh { --b2c-font: var(--b2c-font-tw); } .B2C-Style.locale_jp-ja { --b2c-font: var(--b2c-font-jp); } .B2C-Style.locale_kr-ko { --b2c-font: var(--b2c-font-kr); } .B2C-Style.locale_cn-zh { --b2c-font: var(--b2c-font-cn); } /* 🎯 【核心引擎】標籤群組覆寫 (排除圖示庫樣式，除非要加新的圖示庫，否則不需要動它) */ .B2C-Style :is(h1, h2, h3, h4, h5, h6, p, div, li, a, span, b, strong, input, select, textarea, button, label):not(:is( i, .fa, .fa_v5, .fas_v5, .fab, .far, [class*="icon-"], [class*="fa-"], [class*="fa_v"], .lg-icon, .material-icons, [class*="material-symbols-"] )) { font-family: var(--b2c-font) !important; /* 將 font-family 使用變數讓子元素自動獲得字體 */ } /* 🛡️ Font Icon 圖示保護層 / 解決您使用 *:not() 的核心痛點：防止圖示字型變亂碼 / 不用「排除」所有元素，而是「保護」那些確定是圖示的標籤 */ .B2C-Style :is( i, .fa, [class*="fa-"], [class*="fa_v"], [class*="material-symbols-"], .lg-icon, .material-icons, [class*="icon-"] /* ATEN 自有圖示類別 */ ) { /* 強制這些標籤維持其原始定義的字體（通常由圖示庫 CSS 提供） font-family: inherit !important; */ } /* ⚠️ 風險：inherit 與 !important 的雙面刃 : 這是在 ATEN 環境中最容易產生衝突的地方： 遺傳問題 (The Inheritance Trap): font-family: inherit 會強制偽元素繼承「宿主標籤（如 ）」的字體。如果宿主標籤本身沒有定義字體，它會往上繼承到 .wording_block 或 a.btn。 後續覆蓋困難: 當您使用了 !important，如果您未來想在特定的 Landing Page 將某個按鈕圖示換成不同的字體（例如把一個舊的 icon- 換成新的 Material Symbol），這個規則會因為權重太高而鎖死字體，導致新圖示顯示不出來。 */ /*********** 🛡️ 為求保險 Font Icon 圖示保護層：再次確保圖示庫的字體定義不被全局字體覆蓋，保持圖示正常顯示 ***********/ /* Icon 套用 i 或者 .icon- */ .B2C-Style .side-header #primary-menu ul > li.sub-menu > a::before, .B2C-Style #wrapper :is( [class*="icon-"], [class*="icon-line-"], [class*="icon-line2-"])::before, .B2C-Style .side-header #primary-menu ul > li.sub-menu > a::after, .B2C-Style #wrapper :is( [class*="icon-"], [class*="icon-line-"], [class*="icon-line2-"])::after { font-family: 'font-icons','Lato' !important; } /* Icon 套用 FontAwesome */ .B2C-Style :is(.fa, .fas)::before, .B2C-Style :is(.fa, .fas)::after { font-family: 'FontAwesome' !important; } /* Icon 套用 FontAwesome 5 Brands */ .B2C-Style :is(.fab)::before, .B2C-Style :is(.fab)::after { font-family:"Font Awesome 5 Brands" !important; } /* Icon 套用 FontAwesome 5 Free */ .B2C-Style :is(.fa_v5, .far, .fas_v5)::before, .B2C-Style :is(.fa_v5, .far, .fas_v5)::after { font-family:"Font Awesome 5 Free" !important; } /************************************************************************************************************************* .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 】 (.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 p b.Top-Four-Features_Overview/* 產品內頁 >> 四個特點 >> 上方小標 */, .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; } .B2C-Style .tab-content.features-abstract p b.Top-Four-Features_Overview/* 產品內頁 >> 四個特點 >> 上方小標 */ { font-size: 1rem; /* 此使用 Html 基本 font-size 為 [16px] x [1rem] = 16px) */ } /* 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) {} /* 990 ~ 1199 */ @media (min-width: 990px) and (max-width: 1199px) { /* 給 JP Filter Page >> H1 */ #product_listing:has(#multi_product_category_list) .product_button h1 { font-size: 2.2em !important; } } /* 1199 以下 */ @media (max-width: 1199px) { .B2C-Style .core-container .product_button h1 { font-size: 2.5rem; font-size: 2.3rem; line-height: 2.3rem; line-height: 1em; } /* 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 .tab-content.features-abstract p b.Top-Four-Features_Overview, .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):not(section .markets-solutions-applications h2), .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 #filtermodal .modal-content a.list-group-item, .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 #filtermodal .modal-content a.list-group-item.active, .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(.recommended-content-block .btn-primary.button_white):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):not(#lightbox_iframe .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):not(#lightbox_iframe .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):not(#lightbox_iframe .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; } /*************** 滿版 Tab Menu【 Border Radius 上左右-圓方角 】 (上左右 0rem;) *****************/ .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:last-child a, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:last-child.active, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:last-child, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:first-child a, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:first-child.active, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li:first-child, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li.active a, .B2C-Style section#content #desktop-tab:has(.Full-Width-Container) ul.tab-nav:not(.tab-nav-lg) li a, .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) { border-radius: 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; } .B2C-Style .product_button .discontinued-product a.button [class*="icon-"] { line-height: 1; } /* 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) { /* 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 來控制按鈕之間的間距 */ gap: 5px; /* 使用 gap 來控制按鈕之間的間距 */ justify-content: flex-end; /* Button 對齊右邊 */ } /* 產品上方資訊(三欄時) >> 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 > 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 >> 距離左邊空間 >> 用 :nth-child(3) >> 會誤判 .B2C-Style 下不同 section 的其它內容 */ .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; } /* ========================================================== ATEN B2C Button Auto-Gutter System (防彈間距系統) 適用於任何數量的按鈕，自動處理首顆按鈕無間距，後續按鈕自動推開。 >> 覆蓋掉上面用 :nth-child(2), :nth-child(3), :nth-child(4) 寫死的間距設定，讓它們不再干擾。 ========================================================== */ /* 1. 通用邏輯：利用 General Sibling Combinator (~) "只要在 B2C-Style 內，任何一個 .btn，只要它前面出現過 .btn，就給它 margin-left" 這完美解決了第二、第三、第四顆按鈕的間距問題，且完全無視 h3, h4 的干擾。 */ .B2C-Style .btn[class*="btn-"] ~ .btn[class*="btn-"] { margin-left: 13px; } /* 2. 防呆機制 (可選)：確保唯一或第一顆按鈕絕對沒有左間距 這行通常是多餘的 (因為上面的邏輯不會選到第一顆)，但為了覆寫可能的舊有設定，我們保留它。 */ .B2C-Style .btn[class*="btn-"]:not(.btn[class*="btn-"] ~ .btn[class*="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; } } /* 1023 以下 */ @media (max-width: 1023px) { /* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */ .B2C-Style .product_button .discontinued-product a.button { width: auto; padding: 0 1rem; } } /* 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; } } /* 980 以下 */ @media (max-width: 980px) { /* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */ .B2C-Style .product_button:has(.discontinued-product) div[class^="col-"] { width: 100%; } /* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */ .B2C-Style .product_button .discontinued-product { text-align: left; } } /* 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%; width: 77%; } } @media (max-width: 321px) { /* Product Subcategory Page >> 搜尋框 */ .B2C-Style .form-inline input.form-control { width: 77%; width: 73%; } } /************************************************************************************************************************* ( 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; } } /* 979 以下 */ @media (max-width: 979px) { /* 讓 form.form-inline 的寬度不受限制 >> 靠左 (.col-sm-12 會變成一行) */ .B2C-Style .product-head div[class^="col-"]:is(.col-sm-12):has(form.form-inline) { width: auto; } } @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; } } /* 766 以下 */ @media (max-width: 766px) { /* Button x 3 (New/ Discontinued/ Top FAQ Button) >> All Product + Subproduct */ .B2C-Style .product_button .discontinued-product .margin-top a { margin-top: 15px !important; } } /* 700 以下 */ @media (max-width: 700px) { .B2C-Style .product_button .discontinued-product div.margin-top:has(.button) { display: block !important; margin-right: 0 !important; } /* 讓 .product_button >> .discontinued-product 滿版 (Button + Icon 水平置中) */ .B2C-Style .product_button .discontinued-product a.button.btn-full-width { display: flex; } } /* 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; } .B2C-Style .product_button .discontinued-product a.button .fa.fa-ban::before { top: 0.05rem;/* line-height: 1 時微調 */ } /* 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"; } /* Subcategory Product Page > 問號 Icon::before */ .B2C-Style .product_button .discontinued-product a.button [class*="icon-"]::before { top: 0.3rem; top: 0.1rem;/* line-height: 1 時微調 */ } /* Subcategory Product Page > 問號 Icon::before */ .B2C-Style .product_button .discontinued-product a.button .icon-question-sign::before { top: 0.3rem; top: 0.1rem;/* line-height: 1 時微調 */ } /* 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"; } /* 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 .owl-theme .owl-next:before/* Spotlight & Video >> Next Arrow */, .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 .owl-theme .owl-prev:before/* Spotlight & Video >> Before Arrow */, .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; } /* (Video) AD Banner >> image 圖 (Single/ Double Size 放影片時) */ .B2C-Style a.mega-menu-advertisement-image.play_btn:before { position: absolute; width: 100%; height: 100%; content: "\00a0"; background: rgba(0%, 0%, 0%, .3) url(/file/template/1/images/icons/play.png) no-repeat center center; background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 19%; transition: all .3s ease-in-out 0s; opacity: 0.8; } /* (Video:hover) AD Banner >> image 圖 (Single/ Double Size 放影片時) */ .B2C-Style a:hover.mega-menu-advertisement-image.play_btn:before { transition: all .3s ease-in-out 0s; opacity: 1.0; } /* 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; } /************************************************************************************************************************* ( E-2 ). 【 Mega Menu Optimization 】 (.B2C-Style >> for JP Custimization 2026) **************************************************************************************************************************/ /* =================================================================================== Tab Menu 相關設定 >> By Product / By Purpose Tab Layout =================================================================================== */ /* 統一高度 >> #product-tabs 的 ul.tab-nav + li + li a 切換選單 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav { height: 40px; /* 統一高度 */ height: 5rem !important; /* 統一高度 */ height: 55px;/* 統一高度 */ height: 6rem !important;/* 統一高度 */ height: 4rem !important;/* for B2C >> 統一高度 */ } /* 統一顏色 (default) >> #product-tabs 的 ul.tab-nav + li + li a 切換選單 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav { background-color: #f5f8fa;/* 非作用中的淺灰背景 */ background-color: rgba(245, 248, 250, 1);/* 非作用中的淺灰背景 */ background-color: rgba(243, 244, 246, 1.0);/* 非作用中的淺灰背景 */ background-color: #f3f4f6;/* 非作用中的淺灰背景 */ } /* 統一顏色 (default) >> #product-tabs 的 ul.tab-nav + li + li a 切換選單 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(.ui-tabs-active) a:hover, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(.ui-tabs-active):hover { background-color: rgba(224, 226, 231, 1.0);/* hover 的中灰背景 */ background-color: #e0e2e7;/* hover 的中灰背景 */ } /* 統一顏色 (active) >> #product-tabs 的 li.ui-tabs-active + li.ui-tabs-active a 切換選單 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active { background-color: rgba(255, 255, 250, 1);/* 非作用中的淺灰背景 */ background-color: #fff;/* 非作用中的淺灰背景 */ } .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i::before, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a { line-height: 1em !important; } /* #product-tabs 的 ul.tab-nav 切換選單 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav { flex: 0 0 100%; /* flex: [放大比例] [縮小比例] [基準大小] 100% */ padding: 0; margin: 0; list-style: none; border: none; } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li { flex: 0 0 50%; /* 每個 ul.tab-nav li 佔據 50% 的地方 */ max-width: 50%; /* 桌面版每個 ul.tab-nav li 最多佔 50% 的地方, 但手機版不限 */ margin: 0 auto; padding: 0; text-align: center; border: none; } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li::before { content: none !important; /* 移除預設的 li 上方條狀 */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li 的 active 狀態 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active {} /* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 預設狀態 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a { display: flex; /* 使用 flex 讓 icon 和文字排好 */ align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */ align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */ justify-content: center; /* 水平置中 */ font-size: 16px; font-weight: 600; font-size: 17px; font-weight: 500; text-decoration: none; color: #94949a; /* 非作用中的文字顏色 */ color: rgba(19, 19, 20, 0.5); /* 非作用中的文字顏色 */ width: 100% !important; padding: 10px 20px; /* Icon 和文字之間的間距 gap: 10px; */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 的 active 狀態 (li.product-tabs-menu 區域) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a i::before, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li.ui-tabs-active a { color: #183d73; /* 作用中的文字顏色 */ color: #183d73; /* 作用中的文字顏色 */ color: rgba(0, 66, 118, 1.0); /* 作用中的文字顏色 */ color: #004276; /* 作用中的文字顏色 */ color: rgba(0, 92, 170, 1.0); color: #005caa;/* 作用中的文字顏色 */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li >> a 的 hover 狀態 (li.product-tabs-menu 區域) / 不包含 Active */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(li.ui-tabs-active) i:hover::before, .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li:not(li.ui-tabs-active) a:hover { color: rgba(0, 66, 118, 1.0); /* 作用中的文字顏色 */ color: #004276; /* 作用中的文字顏色 */ color: rgba(19, 19, 20, 1.0); /* 非作用中的文字顏色 */ color: #131314; /* 非作用中的文字顏色 */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a span { } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i { display: block; margin-right: 17px; top: 4px;/* foxt-size: 16px 時 */ top: 3px;/* foxt-size: 17px 時 */ top: 0.3rem;/* foxt-size: 17px 時 */ top: unset !important; /* for B2C */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> icon */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li a i::before { font-size: 1.2em !important; font-size: 21px !important; font-size: 1.5em !important; line-height: 1rem; font-family: 'font-icons','Lato'; font-style: normal; font-weight: 400; font-family: 'Material Symbols Rounded' !important; font-family: 'Material Symbols Outlined' !important; font-variation-settings: 'FILL' 1; font-weight: 500; display: inline-block; position: relative; top: unset !important; /* for B2C */ } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> by product icon */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li[aria-controls="product-based"] a i::before { font-family: 'font-icons','Lato'; content: "\e6f3"; font-family: 'Material Symbols Outlined' !important; content: "\e241"; font-size: 1.6em !important; } /* #product-tabs 的 ul.tab-nav 切換選單 >> li (li.product-tabs-menu 區域) >> a >> by purpose icon */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs ul.tab-nav li[aria-controls="purpose-based"] a i::before { font-family: 'font-icons','Lato'; content: "\e605"; font-family: 'Material Symbols Outlined' !important; content: "\eb12"; } /* =================================================================================== B. by Purpose 內容區 =================================================================================== */ /* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目 >> a 連結::before ) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li::before { content: '●'; font-size: 0.65rem; font-size: 1rem; top: 0.2rem; margin-right: 10px; margin-top: 0; font-size: 10px;/* for B2C */ font-size: 0.65rem;/* for B2C */ top: 0.1rem;/* for B2C */ } /* by Product 內容區 >> #purpose-based (產品 & 圖文連結實際內容 >> 外層容器 >> 文字連結區 >> 文字列表項目 >> a 連結) */ .B2C-Style #primary-menu li.product-tabs-menu #product-tabs .tab-container #purpose-based .purpose-based-content ul li a { font-size: 13px !important; font-size: 1.3rem !important; font-size: 13px !important;/* for B2C */ font-size: 0.8rem !important;/* for B2C */ font-weight: 400; text-align: left; display: block; width: 100%; height: auto; padding-left: 0; } /* =========================================================================================================================================== RWD 調整 >> #product-tabs 的所有內容 (li.product-tabs-menu 區域) =========================================================================================================================================== */ @media (min-width: 992px) { /* 最底下三個選單項目 (All Products, New Products, Featured Product) >> 往左移動一點 */ .B2C-Style #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_compatible-power-adapters[class*="menuitem_"], .B2C-Style #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_all-products[class*="menuitem_"], .B2C-Style #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_new-products[class*="menuitem_"], .B2C-Style #primary-menu ul.menu_body_1[class*="mega-menu-"]:has(li.product-tabs-menu) li.menuitem_featured-product[class*="menuitem_"] { transform: translateX(-15px);/* 往左移動 10px */ } } /************************************************************************************************************************* ( 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%); /* 偏黑色-1 >> 下透明 */ 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%); /* 偏黑色-2 >> 下透明 */ 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%); /* 偏黑色-3 >> 下透明 */ 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%); /* 偏黑色-4 >> 下透明 */ background: -moz-linear-gradient(-5deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.8) 100%); background: -webkit-linear-gradient(-5deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.8) 100%); background: linear-gradient(-5deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.8) 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) { /* 沒有 filter 時 / .col-lg-12 >>>>> Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list div.product-record-single, .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list .product-record-single { min-height: 440px; } /* 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; } /* 沒有 filter 時 / .col-lg-12 >>>>> Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list div.product-record-single, .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list .product-record-single { min-height: 460px; } /* 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; } /* 沒有 filter 時 / .col-lg-12 >>>>> Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list div.product-record-single, .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list .product-record-single { min-height: 500px; } /* 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; } /* 沒有 filter 時 / .col-lg-12 >>>>> Subcategory Page >> Listing Item Block >> Product Listing (含 Feature Article) */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .product_list div.product-record-single, .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .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: 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 #product_listing:has(#multi_product_category_list) #comparison_landings .well-compare/* 日本客製化產品篩選頁面 */, .B2C-Style #comparison_landings .well-compare, .B2C-Style .well-compare { border-radius: 10px; margin-top: 20px; 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; } } /* 1500 以上 */ @media (min-width: 1500px) { /* Category Item (產品第三層頁面) 產品目錄列表區塊 >> Subcategory Product Page (不包含 Feature Articles 列表) */ .B2C-Style div.header + div .product_section div.product-category { margin-bottom: 110px; margin-bottom: 7rem; } } /* 1500 以上 */ @media (min-width: 1900px) { /* Category Item (產品第三層頁面) 產品目錄列表區塊 >> Subcategory Product Page (不包含 Feature Articles 列表) */ .B2C-Style div.header + div .product_section div.product-category { margin-bottom: 130px; margin-bottom: 8rem; } } /* 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%; z-index: 1; /* 黑底要放在圖片上方，但文字不能被遮蓋 */ } /* .swiper-slide >> .text-block >> 有白色字.color_white >> 底黑色 */ .B2C-Style [id*="slider"].swiper_wrapper .swiper-slide:has(.text-block.color_white)::before, .B2C-Style .swiper-wrapper .swiper-slide:has(.text-block.color_white)::before { background-color: rgba(0, 0, 0, .3); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); } } /* 480 以下 */ @media (max-width: 480px) { .B2C-Style #product_listing .promote-banner { transform: translateX(0.45rem); } /* .swiper-slide >> .text-block >> 有白色字.color_white >> 底黑色 */ .B2C-Style [id*="slider"].swiper_wrapper .swiper-slide:has(.text-block.color_white)::before, .B2C-Style .swiper-wrapper .swiper-slide:has(.text-block.color_white)::before { background-color: rgba(0, 0, 0, .4); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); } .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 ). 【 Product Listing Page Optimization】產品列表頁面 (.B2C-Style >> 2024) 【Mobile Ver Filter/ Lightbox 】 >> 手機版彈出式選單 (Mobile Filter Lightbox) ======================================================================================================================== */ /* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> Filter Item */ .B2C-Style #filtermodal .modal-content a.list-group-item { display: flex; align-items: center; } /* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> Filter Item */ .B2C-Style #filtermodal .modal-content a.list-group-item.active { } /* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> 打勾按鈕 */ .B2C-Style #filtermodal .modal-content a.list-group-item .icon-ok { position: relative; top: 0 !important; left: 0 !important; margin-left: 15px; margin-left: auto; } /************************************************************************************************************************* ( 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) { /* 沒有 filter 時 / .col-lg-12 */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .promote-products .product-record-single:is(.promote-half, .col-md-6) .sect-divider, .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .promote-products .product-record-single:is(.promote-half, .col-md-6) { max-height: 670px !important; min-height: 670px !important; } /* 沒有 filter 時 / .col-lg-12 */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .promote-products .product-record-single:is(.promote-half, .col-md-6) { padding: 0 10px; } /* 沒有 filter 時 / .col-lg-12 */ .B2C-Style #product_listing:has(.desktop-product-header + .col-lg-12) .promote-products .product-record-single:is(.promote-half, .col-md-6) div.product-image { max-height: 340px !important; min-height: 340px !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 { 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; } } /* =============================================================================================================================================================== (for JP) Product Listing/ Filter Custimization Page (特殊產品列表頁面/ 可複選次分類選單/ 可 Filter 規格) >> #multi_product_category_list (全包外區塊) >> 大類 Category >> p-product-heading-contents >> ul.p-local-nav > li.p-local-nav__item > a > i & font >> 次類 Subcategory (純字模式) >> p-product-heading-contents >> #subcategory_lists.checkbox-box > form > .checkbox > label > span.checkmark/ :after (打勾) & span.checkbox-text font >> 次類 Subcategory (圖文模式) >> p-product-heading-contents >> #subcategory_lists.checkbox-box > form > .checkbox.checkbox-withimg > label > span.checkmark/ :after (打勾) & span.checkbox-text font & img =============================================================================================================================================================== */ /* (for JP >> Custimization Page) 大類 Category (Icon) */ .B2C-Style li.p-local-nav__item a::after, .B2C-Style li.p-local-nav__item a i::before { top: 3px !important; } @media (min-width: 768px) { .B2C-Style #product_listing:has(#multi_product_category_list) div.product-record-single { margin-bottom: 35px; } } @media (max-width: 1400px) { /* (for JP >> Custimization Page) >> Left Filter Bar >> Cancel */ .B2C-Style .locale_jp-ja #filter_lists .well-filter a.reset, .B2C-Style .locale_jp-ja .well-filter a.reset { font-size: 0.6em !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; cursor:url(https://assets.aten.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; cursor:url(https://assets.aten.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; cursor:url(https://assets.aten.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; cursor:url(https://assets.aten.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; cursor:url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_B-2_White.svg) 25 25, zoom-in !important; */ /* SVG - 白底用 (20 20 是 cursor 距離原指標位置) (要測) */ 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; cursor:url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_B-1_Dark.svg) 25 25, zoom-in !important; cursor:url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Cursor/zoom-in-svgrepo_B-1_Dark.svg) 20 20, 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 **************************************************************************************************************************/ /* 產品頁 >> 推薦標籤 Icon 顯示 (Product Page) */ .B2C-Style #retargeting_ads_down.Icon-Theme-Dark .icon-Recommended .material-icons { display: flex !important; } /* Lightbox Backdrop Z-Index 調整 (Product Gallery for Product Page) */ .B2C-Style .lg-backdrop { z-index: 1043; } /* 下箭頭(短) >> 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; } /* (.B2C-Style) Product Gallery (進入後) 的 (縮圖/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .lg-container .lg-thumb-item.play_btn::before { background: url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 35%; } /* (.B2C-Style) Product Gallery 的 (縮圖/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .flex-control-nav.flex-control-thumbs li.play_btn::before { background: url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 27%; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style) Product Gallery 的:hover (縮圖/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .flex-control-nav.flex-control-thumbs li:hover.play_btn::before { background: url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 27%; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) Product Gallery (Desktop + Mobile) 的 (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style li.mobile-slide a.play_btn:before, .B2C-Style .row a.video-link.play_btn:before { filter: brightness(110%) contrast(110%) !important; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) Product Gallery (Desktop + Mobile) 的:hover (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style li.mobile-slide a:hover.play_btn:before, .B2C-Style .row a:hover.video-link.play_btn::before { filter: brightness(110%) contrast(110%) !important; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) Product Gallery (Desktop Ver.) 的 (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .row a.video-link.play_btn:before { background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 9%; } /* (.B2C-Style ) Product Gallery (Desktop Ver) 的:hover (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .row a:hover.video-link.play_btn::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 / 10%; } /* (.B2C-Style ) Product Gallery (Mobile Ver.) 的 (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style li.mobile-slide a.play_btn:before { background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 15%; } /* (.B2C-Style ) Product Gallery (Mobile Ver.) 的:hover (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style li.mobile-slide a:hover.play_btn: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 / 16%; } /* (.B2C-Style ) Rich Content 一般物件的 (img) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block a.play_btn::before, .B2C-Style .row .image_block a.play_btn:before { background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 14%; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) Rich Content 一般物件的 (img) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, .B2C-Style .row .image_block a.play_btn: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 / 15%; } /* (.B2C-Style ) .Multi_Rich_Content 透明物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .B2C-Style .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .B2C-Style .Multi_Rich_Content .row .image_block:has(img[src*="Transparent_"]) a.play_btn: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 / 24%; filter: brightness(100%) contrast(100%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) .Multi_Rich_Content 透明 + 一般物件的:hover (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .Multi_Rich_Content .row .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .single-product #overview-tab.tab-content section .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, .B2C-Style .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, .B2C-Style .Multi_Rich_Content .row .image_block a:hover.play_btn::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 / 25%; } @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) { /* .recommended-content-title >> 字變小 (產品內頁) */ .B2C-Style .recommended-content-wrapper.Single-Item .recommended-content-title { font-size: 2.6em; font-size: 2.3em; } /* 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); } } /* 1199 以下 */ @media (max-width: 1199px) { /* 手機版 Product Page >> #mobile-product-header >> Go Button ( 特殊 Button 內距離 Padding) */ .B2C-Style #wrapper:has(#product_listing) #mobile-product-header .form-inline button.btn-go { transform: translateX(-20px); } } /* 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; } } /* 820 以下 */ @media (max-width: 820px) { /* (.B2C-Style ) Product Gallery 的 (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .row a.video-link.play_btn:before { background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 13%; } /* (.B2C-Style ) Product Gallery 的:hover (大張/ 產品藝廊) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .row a:hover.video-link.play_btn::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 / 14%; } /* (.B2C-Style ) Rich Content 一般物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block a.play_btn::before, .B2C-Style .row .image_block a.play_btn:before { background: rgba(0%, 0%, 0%, .3) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center / 15%; } /* (.B2C-Style ) Rich Content 透明物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .B2C-Style .row .image_block:has(img[src*="Transparent_"]) a.play_btn: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 / 15%; } /* (.B2C-Style ) Rich Content 透明 + 一般物件的:hover (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .row .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .B2C-Style .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, .B2C-Style .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, .B2C-Style .row .image_block a:hover.play_btn::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 / 16%; } } /* 480 以下 */ @media (max-width: 480px) { /*警告內文 */ .B2C-Style span.notice-dec, .B2C-Style span.notice-title { font-size: 11px !important; } /*警告內文 */ .B2C-Style .notice span.notice-dec/* 警告內文 (強制/ 橘色/ 警告色) */, .B2C-Style .notice span.notice-title/* 警告標題 (強制/ 橘色/ 警告色) */ { font-size: 0.7rem !important; } /*警告內文 */ .B2C-Style span.notice-dec { width: 85% !; } /* Personalized Recommended Content */ .B2C-Style .single-product .recommended-content-wrapper { border-radius: 1.3rem; border-radius: 1.2rem; } /* Personalized Recommended Content */ .B2C-Style .single-product .recommended-content-container { border-bottom-right-radius: 1.3rem; border-bottom-left-radius: 1.3rem; border-bottom-right-radius: 1.2rem; border-bottom-left-radius: 1.2rem; } .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; } /* 產品頁面下方的 Related Products */ .B2C-Style .extra-info .product-padding .product_related_group .related_product_tabs { padding: 20px; } /* 產品頁面下方的 Related Products */ .B2C-Style .extra-info .product-padding .product_related_group .related_product_tabs .owl-item { padding: 0 10px; } /* 產品頁面下方的 Related Products */ .B2C-Style .extra-info .product-padding .product_related_group .related_product_tabs .owl-item .product { } } /*************** 【 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) ======================================================================================================================== */ /* 768 以上 */ @media (min-width: 768px) {} /* 981 以上 */ @media (min-width: 981px) {} /* 1024 以上 */ @media (min-width: 1024px) {} /* 1920 以上 */ @media (min-width: 1920px) {} /* 2000 以上 */ @media (min-width: 2000px) {} /* 筆電寬螢幕 1281~1366px */ @Media (min-width: 1281px) and (max-width: 1366px) {} /* 480 以下 */ @Media (max-width: 480px) {} /************************************************************************************************************************* ( ? ). 【.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; min-height: 560px; } /* 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, ======================================================================================================================== */ /* Font Weight >> 500 */ .B2C-Style.locale_tw-zh .notice span.notice-title/* 警告標題 (強制/ 橘色/ 警告色) */, .B2C-Style.locale_tw-zh .tab-content.features-abstract li:has(.all-features) a, .B2C-Style.locale_tw-zh .tab-content.features-abstract p b.Top-Four-Features_Overview, .B2C-Style.locale_tw-zh section#content .single-product .features-abstract li b/* Top Four Features >> li b */ { font-weight: 600 !important; } @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) {} /* 1199 以下 */ @Media (max-width: 1199px) { /* 黑色 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, .0) !important; background: rgba(0, 0, 0, .0) !important; border: 2px solid transparent !important; } /* 外層 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; } */ #header.sticky-header:not(.static-sticky) #top-search { /* display: none; */ } /* for-consumer Button >> 水平置中 (無外框 >> 融合於 Menu ) */ #header.sticky-header:not(.static-sticky) #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.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; } } /* 1024 以下 */ @Media (max-width: 1024px) {} /* 990 以下 */ @Media (max-width: 990px) {} /* ======================================================================================================================== 【Multi-Language_Modify】 >> Adjustment for All Page (多國別語言 / 客製內容修改) >>> 多國別語言 (x 25) --客製內容修改 <<< body[class*="locale_la-??"] #content 也可以這樣寫, ex: 若 body[class*="locale_la-"] #content, 即一起套用了 la-es & la-pt. **** 亞洲語言規避 >> body:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) 1. 較長 (x13): body[class*="locale_la-"] #content, body.locale_pl-pl #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, 2. 次長 (x2): body.locale_it-it #content, body.locale_nl-nl #content 3. 亞洲語 (x4): body.locale_tw-zh #content, body.locale_jp-ja #content, body.locale_kr-ko #content, body.locale_cn-zh #content 4.英文語系 (x5): body.locale_global-en #content, body.locale_au-en #content, body.locale_us-en #content, body.locale_gb-en #content, body.locale_eu-en #content, locale_za-af #content, >> 不叫 -en, 但卻用英文 ======================================================================================================================== */ /******************************** Font-Weight 統一調整 ********************************/ /* Font Weight >> 500 */ @media (min-width: 1200px) { /* 若載入 Google Asian Webfont >> Asian 字體減少粗度 (簡中/ 繁中/ 日文/ 韓文) >> 以免 Main Menu 過粗 (針對 Noto Sans TC/ Noto Sans SC/ Noto Sans JP/ Noto Sans KR) */ body.locale_cn-zh #primary-menu ul.menu_body_1 > li > a, body.locale_tw-zh #primary-menu ul.menu_body_1 > li > a, body.locale_jp-ja #primary-menu ul.menu_body_1 > li > a, body.locale_kr-ko #primary-menu ul.menu_body_1 > li > a, body.locale_cn-zh .dark #primary-menu:not(.not-dark) ul.menu_body_1 > li > a, body.locale_tw-zh .dark #primary-menu:not(.not-dark) ul.menu_body_1 > li > a, body.locale_jp-ja .dark #primary-menu:not(.not-dark) ul.menu_body_1 > li > a, body.locale_kr-ko .dark #primary-menu:not(.not-dark) ul.menu_body_1 > li > a { font-weight: 500 !important; /* 若載入 Google Asian Webfont >> Asian 字體減少粗度 (簡中/ 繁中/ 日文/ 韓文) */ } } /* Font Weight >> 600 */ .locale_tw-zh.B2C-Style section#content .single-product a.button.btn-full-width, .locale_tw-zh.B2C-Style .notice span.notice-title/* 警告標題 (強制/ 橘色/ 警告色) */, .locale_tw-zh.B2C-Style .tab-content.features-abstract li:has(.all-features) a, .locale_tw-zh.B2C-Style .tab-content.features-abstract p b.Top-Four-Features_Overview, .locale_tw-zh.B2C-Style section#content .single-product .features-abstract li b/* Top Four Features >> li b */ { font-weight: 600 !important; } /******************************** Max-Width 統一調整 ********************************/ /* Max-Width 統一調整 >> 針對較長語系 (x13) >> 排除英語系國家 */ body.B2C-Style[class*="locale_"]:not(.locale_global-en):not(.locale_us-en):not(.locale_eu-en):not(.locale_gb-en):not(.locale_au-en):not(.locale_za-af) .btn-go /* GO Button */ { max-width: 55px; }