/*===================================================================================================================================================== Product Page Original CSS (Html 模組客製化共用內容) ======================================================================================================================================================*/ /* 用 Html 模組產生 >> 模擬 Legacy-Overview */ /* .All-Rich-Content-Section section:is([id*="Legacy-Overview"]) [class*="markets-solutions-"], */ .All-Rich-Content-Section section:is([class*="legacy-overview"]) .markets-solutions-applications, .All-Rich-Content-Section section:is([id*="Legacy-Overview"]) .markets-solutions-applications { padding: 0% 1% 3%; padding: 0% 1% 50px; } /* 用 Html 模組產生 >> 模擬 Legacy-Overview */ /* .All-Rich-Content-Section section:is([id*="Legacy-Overview"]) [class*="markets-solutions-"] p, */ .All-Rich-Content-Section section:is([class*="legacy-overview"]) .markets-solutions-applications p, .All-Rich-Content-Section section:is([id*="Legacy-Overview"]) .markets-solutions-applications p { font-size: 11pt; line-height: 1.8; font-weight: 300; letter-spacing: .02em; } customized-content-html /*===================================================================================================================================================== Product Page Original CSS (Rich Content 客製化共用內容) ======================================================================================================================================================*/ /* 新版 ATEN Blue Brand 適用 >> 將 Model Name >> "|" 分隔線變細 */ .Product-Name_Special-Char { font-weight: 300 !important; font-weight: 200 !important; font-size: 2.5rem !important; color: rgba(0,0,0,.45) !important; } /* ===================================================================================================== 共同 Button 元素 > Rich Content > Left & Right 兩個 Button) * 實際第二顆 Button 如此設定有作用 : .markets-top-banner.richcontent a.btn.btn-primary + a.btn.btn-primary .markets-top-banner.richcontent a.btn.btn-primary ~ a.btn.btn-primary ===================================================================================================== */ /************** Button 樣式定義 > for Rich Content ************* 1) .button_Video : id = #parallax_banner_scro_Video_button 2) .button_Download : id = #parallax_banner_scro_Download_button 2) .button_Download-After : id = #parallax_banner_scro_Download-After_button 3) .button_Quote : id = #parallax_banner_scro_Quote_button 4) .button_Contact : id = #parallax_banner_scro_Contact_button 5) .button_Buy : id = #parallax_banner_scro_Buy_button 6) .button_Login : id = #parallax_banner_scro_Login_button 7-1) .button_App.IOS : id = #parallax_banner_scro_IOS_button 7-2) .button_App_IOS : id = #parallax_banner_scro_IOS_button 8) .button_App.Android : id = #parallax_banner_scro_Android_button 8-2) .button_App_Android : id = #parallax_banner_scro_Android_button 9) .button_RightCircle : id = #parallax_banner_scro_RightCircle_button (Arrow) 10) .button_Diagram : id = #parallax_banner_scro_Diagram_button 11) .button_Diagram-After : id = #parallax_banner_scro_Diagram-After_button 12) .button_Volume : id = #parallax_banner_scro_Volume_button 13) .button_RightArrow : id = #parallax_banner_scro_RightArrow_button 14) .button_RightArrow-After : id = #parallax_banner_scro_RightArrow-After_button /************** Button 顏色定義 > for Rich Content ************* *** All All_Element_Style.css (在 CMS >> Manage Page Structure 填入 Class Name : 可套用以下顏色樣式) **** 1) .Button_Line : 白底藍框 / 藍字 >> hover : 淺藍底 / 白字 2) .ButtonG : 綠底 / 白字 >> hover : 淺綠底 / 白字 3) .Button_LineG : 白底綠框 / 綠字 >> hover : 淺綠底 / 白字 4) .Button_LineT : 半透明白底 / 白字 >> hover : 淺藍底 / 白字 5) .Button_LineTG : 半透明白底 / 白字 >> hover : 綠底 / 白字 6) .Button_LineOG : 透明底綠框 / 綠字 >> hover : 淺綠底 / 白字 7) .Button_LineB : 半透明黑底 / 白字 >> hover : 淺藍底 / 白字 8) .Button_LineAB : ATEN Blue藍 / 白字 >> hover : 9) .ButtonOrange : 橘底 / 白字 >> hover : 橘黃底 / 白字 ===================================================================================================== */ /*************** Icon Symbol >> Button > 【After 圖示】 (僅定義 Icon 圖) ***************/ /* Icon >> Button (Before >> 共同元素) */ section .markets-top-banner.richcontent .wording_block a.btn.btn-primary :is(i, div)::after, section .markets-top-banner.richcontent .wording_block a.btn.btn-primary::after { margin-left: 7px; top: 1px; } /*************** Icon Symbol >> Button > 【Before 圖示】 (僅定義 Icon 圖) ***************/ /* Icon >> Button (Before >> 共同元素) */ section .markets-top-banner.richcontent .wording_block a.btn.btn-primary :is(i, div)::before, section .markets-top-banner.richcontent .wording_block a.btn.btn-primary::before { margin-right: 10px; top: 1px; } /************ 【Icon Font-family-1】 ************/ .markets-top-banner.richcontent .wording_block :is( .button_App_Android, .button_App.Android, .button_App_IOS, .button_App.IOS, .button_App )::after, .markets-top-banner.richcontent .wording_block :is( .button_App_Android, .button_App.Android, .button_App_IOS, .button_App.IOS, .button_App )::before { font-family: "FontAwesome"; font-weight: 500 !important; } /************* 【Icon Font-family-2】 *************/ .markets-top-banner.richcontent .wording_block :is( .button_Volume, .button_Diagram-After, .button_Diagram, .button_RightArrow-After, .button_RightArrow, .button_RightCircle, .button_Login, .button_Buy, .button_Contact, .button_Download, .button_Video, .button_Quote )::after, .markets-top-banner.richcontent .wording_block :is( .button_Volume, .button_Diagram-After, .button_Diagram, .button_RightArrow-After, .button_RightArrow, .button_RightCircle, .button_Login, .button_Buy, .button_Contact, .button_Download, .button_Video, .button_Quote )::before { font-family: "Font Awesome 5 Free" !important; font-weight: 500 !important; } /************ 【原 Icon Font 圖示客製】 ************/ /* Download >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Download::before { content: "\f358"; font-weight: 500 !important; } /* Video >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Video::before { content: "\f144"; /*實心 Play >> font-weight: 900;*/ font-weight: 500 !important; } /* Quote >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Quote::before { content: "\f044" !important; font-size: 1.09em !important; font-weight: 900 !important; } /* Contact >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Contact::before { content: "\f044" !important; font-size: 1.09em !important; font-weight: 900 !important; } /* Buy & Shop>> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Buy::before { content: "\f290" !important; font-size: 1em !important; font-weight: 600 !important; top: 0px !important; } /* Login >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Login::before { content: "\f2f6" !important; font-size: 1.2em !important; font-weight: 600 !important; } /* APP Store(iOS) >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_App_IOS::before, .markets-top-banner.richcontent .wording_block .button_App.IOS::before { content: "\f179"; } /* Google Play(Android) >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_App_Android::before, .markets-top-banner.richcontent .wording_block .button_App.Android::before { content: "\f3ab" !important; font-family: "Font Awesome 5 Free" !important; content: "\f17b" !important; font-family: "FontAwesome" !important; font-weight: 400 !important; } /* Right Circle >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_RightCircle::before { /* 用圖片方式 content: ""; display: inline-block; width: 35px; height: 35px; background: url(//assets.aten.com/webpage/shared/market/New_V2/Icon_Xlarge_Arrow_Right_Bold.png) no-repeat center center; background-size: auto; background-size: auto; background-size: 105%; margin-right: 10px; position: relative; top: 5px; */ content: "\f35a" !important; font-weight: 500 !important; } /* Diagram >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Diagram::before, .markets-solutions-applications a.btn.btn-primary.button_Diagram::before { content: "\f0e8" !important; content: "\f542" !important; font-weight: 600 !important; } /* Diagram >> Button (After) */ .markets-top-banner.richcontent .wording_block .button_Diagram-After::after { content: "\f054"; font-size: 1em !important; content: "\f0e8" !important; font-size: 0.9em !important; font-weight: 600 !important; } /* Volume (音量) >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_Volume::before, .markets-solutions-applications a.btn.btn-primary.button_Volume::before { content: "\f028" !important; font-size: 1.2em !important; } /* 右箭頭 >> Button (Before) */ .markets-top-banner.richcontent .wording_block .button_RightArrow::before, .markets-solutions-applications a.btn.btn-primary.button_RightArrow::before { content: "\f054"; font-weight: 600 !important; } /* 右箭頭 >> Button (After) */ .markets-top-banner.richcontent .wording_block .button_RightArrow-After::after { content: "\f054"; font-weight: 600 !important; font-size: 1em !important; } /*-------- URL Link Banner 圖片橫幅連結 URL >> for Rich Content ----------*/ .Overview_Banner_Image img, .Link-Banner-Image-Item img { opacity: 1; transition: all 0.1s linear 0s; } .Overview_Banner_Image:hover img, .Link-Banner-Image-Item:hover img { opacity: 0.7; transition: all 0.3s linear 0s; } /**************************** BG or BG Gradient Color >> All Section (背景色 / 背景漸層色) *****************************/ .BG_White div.markets-solutions-applications, .BG_White div[class*="markets-solutions-"], .cd-section.BG_White { background-color: #fff !important; } .BG-Black div.markets-solutions-applications, .BG-Black div[class*="markets-solutions-"], .cd-section.BG-Black { background-color: #000 !important; } /**************************** Slide Gallery >> 圖片變成套 lightbox 影片預覽圖 >> a.video-link.play_btn (也要套 border-radius) *****************************/ .product-image .flexslider .slider-wrap a.video-link.play_btn { border-radius: 7px; } /* ============================= 舊版 Product Page (圖文 Full-Width) >> 僅 Overview 豐富圖文區 =================================== 【.Full-Width-Rich-Content / .No-Margin-Layout (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) (*** 若要各區上下完全無空隙 Layout >> .No-Margin-Layout ***) ============================================================================================================================= */ /* 僅 Overview Tab 的第一個【.Full-Width-Layout】滿版時 >> #overview-tab.tab-content 的空白要拿掉 (緊接第一個 section 是有滿版 section.cd-section:first-of-type.Full-Width-Layout 情形下 >> 第一個 Rich Content 跟 Tab 空白要拿掉) */ /* 不包含 diagram, application, download.... */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content:has(.All-Rich-Content-Section section.cd-section#As-Main-Title-H2:first-of-type) /* for Legacy + Dynamic */ { /* 會影響 section 內的 Lightbox Modal 彈跳視窗被覆蓋 >> 改用 margin-top 調整 transform: translateY(-40px); */ margin-top: -40px; } /* Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.paragraph:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.paragraph)/* 排除圖上文下 */, .product #refs #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.paragraph:not(.product #refs #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph)/* 排除圖上文下 */ { margin: 0 0 20px !important; display: none; } /* Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.paragraph/* 排除圖上文下 */, .product #refs #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph/* 排除圖上文下 */ { margin: 0 0 0px !important; } /* Img >> Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.paragraph img/* 排除圖上文下 */, .product #refs #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph img/* 排除圖上文下 */ { margin-bottom: 3%; } /* Full Wide Rich Content >> .line-Section (.line 外框) >> 底變白色 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.row > .col-md-12.line-Section { background-color: #fff; } /* Full Wide Rich Content (.No-Margin-Layout) 無空隙 Layout >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div.row .col-md-12.line-Section { display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /* Full Wide Rich Content (.No-Margin-Layout) 無空隙 Layout >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div.row > .col-md-12 .line { display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /* Full Wide Rich Content >> .All-Rich-Content-Section (所有圖文內容最外框) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section { border-radius: 15px; margin: 0 auto; margin-top: 20px; margin-top: 10px; margin-bottom: 7%; box-sizing: border-box; overflow: hidden; } /* #overview-tab.Full-Width-Rich-Content 下 >> 所有圖文 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-6, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-5 { position: relative; box-sizing: border-box; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section h3.slogan/* 所有圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section h3/* 所有圖文 */ { font-weight: 500; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section p/* 所有圖文 */ { font-weight: 400; line-height: 1.4em; line-height: 1.5em; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section ul { margin: 10px auto; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section ul li::before, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section ul li { line-height: 1.35em; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section li { margin-bottom: 15px; } /* H3.Slogan + P (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.compare .col-md-12 > h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.compare .col-md-12 > h3)/* 圖文上下 */ { padding: 0 3%; } /* #Product-Comparison >> Table 被 P 包起來描述 (.col-md-12 圖文上下) >> 不要 Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom p { padding: 0 0% !important; } /* H3.Slogan (.col-md-12 圖文上下) >> Margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > h3/* 圖文上下 */ { /* margin-top: 5%; */ } /* H3.Slogan (.col-md-12 圖文上下) (.No-Margin-Layout) >> Margin >> 所有 Full Width Rich Content */ /* 圖上文下 .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top h3.slogan), */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12 > h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12 > h3):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section h3)/* 圖文上下 */ { margin-top: 8%; } /* P (.col-md-12 圖文上下) >> margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */ { margin-bottom: 4%; margin-bottom: 2.5%; margin-bottom: 3%; } /* 圖上文下 (.image_top) >> 上間距 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3 { margin-top: 3%; } /* 圖上文下 (.image_top) >> 下間距 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > div > p { margin-bottom: 8.5%; } /* H3.Slogan (.col-md-5 圖文左右) >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left p/* 圖下左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 圖下左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right p/* 圖上左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 圖上左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-5 > h3.slogan/* 圖文左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-5 > h3/* 圖文左右 */ { margin-top: 2%; } /* H3.Slogan + P (.col-md-5 圖文) >> 字距 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section p { letter-spacing: 0.01em; } /* H3.Slogan + P (.col-md-5 圖文) >> 字距 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .slogan { letter-spacing: -0.01em; } /* Image 充滿容器 (避免出現父容器底部空隙) >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block img { width: 100%; height: auto; /* 讓圖片按照比例調整高度 */ display: block; object-fit: cover; /* 確保圖片覆蓋區塊並保持比例 (1024px 以上) */ } /* Video 充滿容器 (避免出現父容器底部空隙) >> 把同 Section 影片(.Videos-MP4-Section video) 取代 .image_block 下的影片 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block .vid-item-mp4 { object-fit: cover; /* 確保圖片覆蓋區塊並保持比例 (1024px 以上) */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { padding: 4% 0 0%;/* 底部有顏色時會漏餡 */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .package-content, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .package-content { margin-top: 4%; margin-top: 2%; padding: 20px; } /* 比較表格 (Comparison Table) >> image top 頂部距離 Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top.compare, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom.compare { padding-top: 8% !important; padding-top: 3% !important; padding-top: 5% !important; } /* All 比較表格 (Comparison Table) >> 品名區域 >> 上下內距 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .compare-modal, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal { padding-top: 1%; padding-bottom: 1%; } /* All 比較表格 (Comparison Table) >> 品名 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .product-name, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .product-name { margin-bottom: 3px; display: inline-block; } /* All 比較表格 (Comparison Table) >> 品名 >> a */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .product-name a, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .product-name a { font-size: 15px; font-size: 1.02em; font-weight: 600; color: #000; text-decoration: none !important; } /* All 比較表格 (Comparison Table) >> 品名 >> a:Hover */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .product-name a:hover, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .product-name a:hover { color: #005baa; text-decoration: underline !important; } /* All 比較表格 (Comparison Table) >> 品名區域 >> 底色 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section table.table.comparisontable tr:first-child th:first-child, /* 空白格 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] tr:first-child, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .table.comparisontable tr:first-child, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .compare-modal, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal { /* vertical-align: middle; */ background-color: #f9f9fa; } /* All 比較表格 (Comparison Table) >> 品名描述 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .compare-modal .description, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .description { min-height: auto; } /* All 比較表格 (Comparison Table) >> 左邊比較項目 (TH) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table tr.feature th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .table tr.feature th { font-weight: 600; } /* All + 比較表格區的 (Comparison Table) >> Note */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .Comparison-Note, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"] .Comparison-Note { font-size: 12px; } /* All 比較表格區的 (Comparison Table) >> td + th */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > thead > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tbody > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tfoot > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > thead > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tbody > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tfoot > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > td { font-size: 0.95em; padding: 10px; } /* 用 Html 的 H2 當 Main Title 時 >> 標題底部間距下一個 section 調整 >> 所有 Rich Content */ .All-Rich-Content-Section:has(section#As-Main-Title-H2 + section) section#As-Main-Title-H2 [class*="markets-solutions-"], .All-Rich-Content-Section:has(section#As-Main-Title-H2 + section) #As-Main-Title-H2 .markets-solutions-applications { padding-bottom: 0; margin-bottom: -30px; margin-bottom: -1.5rem; margin-bottom: -3.5rem; } #As-Main-Title-H2.Long-Des .markets-solutions-applications .text-block .wording_block { margin-bottom: 1rem; } @media (min-width: 810px) { /* Full Wide Rich Content >> 隱藏虛線 Line for Rich Content (上下仍有間距) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 30px 0;/* 縮短上下距離 */ margin: 40px 0;/* 縮短上下距離 */ } } @media (min-width: 992px) { /* 文字區 (圖文左右) >> 所有 Full Width Rich Content >> Wording */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_left .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-5 { width: 37%; } } /* 1024 以上 */ @Media (min-width: 1024px) { /* H2 (用 Html 的 H2 當 Main Title) >> 置中 >> 所有 Rich Content */ #As-Main-Title-H2 .markets-solutions-applications .text-block { width: 70%; margin: 0 auto; text-align: center; } /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ #As-Main-Title-H2.title_Large .markets-solutions-applications h2, section.title_Large [class*="markets-solutions-"] h2 { /* font-size: 2.2rem !important; font-size: 32px !important; line-height: 1.3em; line-height: 1.2em; */ } /* H2 (用 Html 的 H2 當 Main Title) >> 置左 >> 所有 Rich Content */ #As-Main-Title-H2.Long-Des .markets-solutions-applications .text-block h4:has(span.text-left), .Long-Des .markets-top-banner.richcontent .text_block_top-center h4:has(span.text-left), .Long-Des .markets-top-banner.richcontent .text_block_bottom-center h4:has(span.text-left) { text-align: left; } /* 圖文上下適用 (水平居中) (不加此段若 h3 的 width 縮減會跑至左方,不會居中) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12:not(.Multi-Column-Item .Text-Content):not(.Multi-Column-Item .Image-Content) > div, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12 > p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12 > h3.slogan { position: relative; left: 50%;/*將元素的左邊緣移動到父容器寬度的 50% 處*/ transform: translateX(-50%);/* 扣掉物件寬度 >> 畫面居中使用 */ } /* #overview-tab.Full-Width-Rich-Content 下 >> 所有 .Rich-Content-Section >> 垂直/ 水平置中 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section { display: flex; align-items: center;/* 項目垂直置中 */ align-content: center; /* 垂直置中 */ justify-content: center;/* 水平置中 */ flex-wrap: wrap;/* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */ } /* 去掉 Offset 距離 >> 圖文左右 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-5.col-md-offset-1, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-6.col-md-offset-1 { margin-left: 0; } /* #overview-tab.Full-Width-Rich-Content 下 (.No-Margin-Layout) >> 圖文左右 .Rich-Content-Section >> 圖文自行靠齊左右 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { justify-content: space-between; /* 讓子元素之間有適當的間距，避免集中在中間 */ flex-wrap: nowrap; /* 防止子元素換行 */ } /* #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section >> 圖文左右內容充滿父容器 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_left .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .image_left .image_block, .single-product #overview-tab.tab-content .All-Rich-Content-Section .text-block [class*="col-"] { flex: 1;/* 內容充滿父容器 */ } /* #overview-tab.Full-Width-Rich-Content 下 (.No-Margin-Layout) >> 圖文左右 .Rich-Content-Section >> 刪除多餘間距 for 圖文左右 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { padding: 0 !important; } /* #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section >> 增加 .wording_block for 圖文左右 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .wording_block { margin: 0 5%; padding: 0; padding: 0 2%; } /* 去掉 Offset 距離 >> 圖左(Offset)/文右 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block { margin-right: 6%; } /* 去掉 Offset 距離 >> 圖右(Offset)/文左 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block { margin-left: 6%; } /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 > div h3)/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top .col-md-12 > div h3)/* 上下圖文 */ { font-size: 2.6em; font-size: 2.7em; line-height: 1.3em; margin-bottom: 2% !important; } /* H3 文字左右 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */ { margin-bottom: 6% !important; } /* H3 文字大小 (圖文左右較小) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 圖左文右 */ { /* font-size: calc(2.6em - 0.1em); */ } /* H3.Slogan + P 描述(.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 > h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top .col-md-12 > h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section .col-md-12 > h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare h3):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section .col-md-12 > h3)/* 圖文上下 */ { padding: 0 5%; } /* P 描述 (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_bottom .col-md-12.wording_block ul, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_top .col-md-12.wording_block ul, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 p/* 圖文上下 */ { padding: 0 15% !important; } /* #Product-Comparison >> Table 被 P 包起來描述 (.col-md-12 圖文上下) >> 不要 Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom p { padding: 0 0% !important; } /* for #Main-Banner >> 長描述文 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top .col-md-12 p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom .col-md-12 p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom p { padding: 0 6% !important; text-align: left !important; } /* 對齊中間 >> H3.Slogan + P (圖文上下 .col-md-12) >> 所有 Full Width Rich Content 下的 >> .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .Comparison-Des/* Comparison Table 區的描述 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .Comparison-Des/* Comparison Table 區的描述 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 h3.slogan:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section h3.slogan):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 h3:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section h3):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3), .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .col-md-12 p:not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Form-for-Leads.Rich-Content-Section p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖文上下 */ { text-align: center; } /* P 描述左右空間縮短 (.col-md-12 圖文上下) >> 縮短描述左右空間 (.Longer-Description) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.Longer-Description .All-Rich-Content-Section .image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.Longer-Description .All-Rich-Content-Section .image_bottom p { padding: 0 5% !important; } /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 45vh; height: 50vh; } /* 左右圖撐滿 >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block { flex: 1; display: flex; align-items: stretch; min-width: 585px; min-width: 615px; } /* 加 Youtube Url 圖片的 a.play_btn (.No-Margin-Layout + .Full-Width-Rich-Content) >> #overview-tab.Full-Width-Rich-Content 下 >> 所有圖片 play button */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section .image_block a.play_btn { display: flex;/* 不用 flex 黑色會突出畫面 */ } /* #Icon 防止居中(針對圖上/下)滿版 Icon 太大 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Icon.Rich-Content-Section.image_bottom .col-md-12.image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Icon.Rich-Content-Section.image_top .col-md-12.image_block { width: 90%; } /* Same-Height_70VH (含標題不要超過一屏) >> 高度 70vh */ .single-product #overview-tab.tab-content section.Same-Height_70VH .carousel.slide .carousel-inner > .item { height: 70vh !important; } } /* 1200 以上 */ @Media (min-width: 1200px) {} /* 1500 以上 */ @Media (min-width: 1500px) { /* P 描述 (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-12 p/* 圖文上下 */ { padding: 0 17% !important; } /* #Product-Comparison >> Table 被 P 包起來描述 (.col-md-12 圖文上下) >> 不要 Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom p { padding: 0 0% !important; } /* for #Main-Banner >> 長描述文 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top .col-md-12 p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom .col-md-12 p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom p { padding: 0 6% !important; text-align: left !important; } /* P 描述左右空間縮短 (.col-md-12 圖文上下) >> 縮短描述左右空間 (.Longer-Description) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.Longer-Description .All-Rich-Content-Section .image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.Longer-Description .All-Rich-Content-Section .image_bottom p { padding: 0 5% !important; } } /* 1920 以上 */ @media (min-width: 1920px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ #As-Main-Title-H2.title_Large .markets-solutions-applications h2, section.title_Large [class*="markets-solutions-"] h2 { /* font-size: 4.1rem !important; font-size: 65px !important; line-height: 1.3em; line-height: 1.2em; */ } } /* Bowei 筆電寬螢幕 */ @Media (min-width: 1281px) and (max-width: 1366px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ #As-Main-Title-H2.title_Large .markets-solutions-applications h2, section.title_Large [class*="markets-solutions-"] h2 { /* font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; */ } /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 63vh; } } @media (max-width: 1023px) { /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3/* 上下圖文 */ { font-size: 2.2em; } /* 所有 Full Wide Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .row.Rich-Content-Section { margin-left: 0; margin-right: 0; } /* .wording_block (.No-Margin-Layout) >> 所有 Full Wide Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-5.wording_block { padding-left: 5%; padding-right: 5%; padding-bottom: 5%; } /* .image_block + .wording_block (.No-Margin-Layout) >> 所有 Full Wide Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12.wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-6.image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_block { padding-right: 0; padding-left: 0; } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { padding: 5% 0 0%;/* 底部有顏色時會漏餡 */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .package-content { margin-top: 5%; } } @media (max-width: 820px) { /* 所有圖文間距歸零 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block/* 圖左文右 */ { padding-left: 0% !important; padding-right: 0% !important; padding-bottom: 0% !important; } /* 圖右文左 (.image_right) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block {} /* 圖下文上 (.image_bottom) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block {} /* 圖上文下 (.image_top) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block {} /* 所有圖文 H3 & P >> 左右間距 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block div ul/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block div ul/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block div ul/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h3/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h3/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h3/* 圖左文右 */ { padding-left: 5% !important; padding-right: 5% !important; } /* 所有圖文 P >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block div ul/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block div ul/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block div ul/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */ { margin-bottom: 3% !important; margin-bottom: 10% !important; } /* 圖右文左 H3 (.image_right) >> 上間距 >> 用 H3 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h3.slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3.slogan { margin-top: 7% !important; } /* 圖右文左 P (.image_right) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p { margin-bottom: 6% !important; } /* 圖左文右 (.image_left) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block/* 圖左文右 */ { padding-bottom: 9%; padding-top: 1%; } /* 圖下文上 P (.image_bottom / 包含 Html Code 時) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block > div > div:first-child > p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block > div > p { margin-bottom: 5% !important; margin-bottom: 8% !important; } /* 圖上文下 P (.image_top / 包含 Html Code 時) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block > div > p { margin-bottom: 10% !important; } /* 圖上文下 (.image_top) >> 上間距 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3 { margin-top: 7%; } } @media (max-width: 768px) { /* 圖片 >> 刪除 margin-bottom */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section img { margin-bottom: 0px !important; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul { margin: 10px auto 25px; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul li { margin-bottom: 5px; } } /* 480 以下 */ @Media (max-width: 480px) { /* 一般圖文 >> .image_block + .wording_block */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .wording_block { padding-left: 0; padding-right: 0; } /* 所有圖文 H3 & P >> 左右間距 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block div ul/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block div ul/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block div ul/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h3/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h3/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h3/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h4/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h4/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h4/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h4/* 圖左文右 */, /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 1. 圖上文下、圖下文上 >> 寬欄 (col-md-12) >> 直接子元素 (p, h3, h4) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_top, .image_bottom) .col-md-12.wording_block :is(p, h3, h4), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 2. 圖上文下、圖下文上 >> 寬欄 (col-md-12) >> div 內的 ul */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_top, .image_bottom) .col-md-12.wording_block div :is(ul), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 3. 圖左文右、圖右文左 >> 窄欄 (col-md-5) >> 直接子元素 (p, h3, h4) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) .col-md-5.wording_block :is(p, h3, h4), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 4. 圖左文右、圖右文左 >> 窄欄 (col-md-5) >> div 內的 ul */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) .col-md-5.wording_block div :is(ul) { padding-left: 7% !important; padding-right: 7% !important; } /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom > h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom > h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3/* 上下圖文 */, /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 1. 圖文排列：上左右（排除下） >> 所有後代的 h3/h3.slogan */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left, .image_top) :is(h3.slogan, h3), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 2. 圖文排列：底部 >> 直接子元素的 h3/h3.slogan */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom > :is(h3.slogan, h3) { font-size: 1.9em; margin-top: 8%; } /* [-- 4年前瀏覽器不支援 :is() 寫法 --] 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) { /* height: 35vh; */ } /* All 比較表格區的 (Comparison Table) >> td + th */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > thead > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tbody > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tfoot > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > thead > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tbody > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .table > tfoot > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > th, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > td, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > td { font-size: 0.9em; } } /* ========================================================================================================================= A.【一般/ 共同 Dynamic 模組】 # 統一 Dynamic Rich Content 模組 (+ html 模組 + All "markets-solutions-" 模組) ========================================================================================================================= */ /************** 文字樣式定義 > for 一般/ 共同 Rich Content (原 Dynamic 模組) *************/ /* 統一文字粗細 >> 【Rich Content >> h3/ h4 標題 + Html 的 h2】 如之前的 Legacy Product Rich Content */ .single-product .All-Rich-Content-Section section:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3):not(h2 + h3), section:has([class*="markets-solutions-"]) :is(h2, h3, p), section:has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3, h4) { font-weight: 400; } /* 統一文字粗細 (.title_bold/ .Subtitle_bold) >> 【Rich Content >> h3/ h4 標題 + Html 的 h2】 如之前的 Legacy Product Rich Content */ .single-product .All-Rich-Content-Section section.title_bold:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3):not(h2 + h3), section.title_bold:has([class*="markets-solutions-"]) :is(h2, h3), section:is(.Subtitle_bold):has(.markets-top-banner.richcontent .text-block) .wording_block :is(h4), section:is(.title_bold):has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3) { font-weight: 500 !important; } /* 統一文字粗細 (.title_bold-6w/ .Subtitle_bold-6w) >> 【Rich Content >> h3/ h4 標題 + Html 的 h2】 如之前的 Legacy Product Rich Content */ .single-product .All-Rich-Content-Section section.title_bold-6w:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3):not(h2 + h3), section.title_bold-6w:has([class*="markets-solutions-"]) :is(h2, h3), section:is(.Subtitle_bold-6w):has(.markets-top-banner.richcontent .text-block) .wording_block :is(h4), section:is(.title_bold-6w):has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3) { font-weight: 600 !important; } /* 統一文字顏色 (.title_bold) >> 【All text_block >> h3/ h4 標題 + Html 的 h2】 如之前的 Legacy Product Rich Content */ section:has(.markets-top-banner.richcontent .text-block) .wording_block h4:not(.color_white) { color: #333; } /* ========================================================================================================= Rich Content 添加 Class Name 深底色 / 無空隙 Layout / 顏色反轉 (針對客製化產品, ex:CS22H) ('產品名, ex:CS22H', '.No-Margin-Layout', '.BG_Dark', '.Invert-Color') (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) ========================================================================================================= */ /*-------- Rich Content 無空隙 Layout = Full-WIdth (.No-Margin-Layout) ----------*/ /* Rich Content 無空隙 Layout (.No-Margin-Layout) */ .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section {} /* Rich Content 無空隙 Layout (.No-Margin-Layout) >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section div.row .col-md-12.line-Section { display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /* Rich Content 無空隙 Layout (.No-Margin-Layout) >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 40px 0;/* 縮短上下距離 */ display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /*--------- 所有 Rich Content >> Main Banner 刪除文字框多餘空間 ID 含有 (...-without-Slogan) (文字合成在圖裡) ------------*/ /* #overview-tab.Full-Width-Rich-Content 下 >> Main Banner 刪除文字框 (文字合成在圖裡) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner-without-Slogan.Rich-Content-Section .col-md-12.wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section [id*="-without-Slogan"].Rich-Content-Section .col-md-12.wording_block { display: none; } /* #overview-tab.Full-Width-Rich-Content 下 >> Main Banner 刪除圖片底部多餘空間 (文字合成在圖裡) */ .product #refs #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner-without-Slogan.Rich-Content-Section.image_top .col-md-12.image_block div.paragraph img, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section #Main-Banner-without-Slogan div.paragraph img, .product #refs #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section [id*="-without-Slogan"].Rich-Content-Section.image_top .col-md-12.image_block div.paragraph img, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section [id*="-without-Slogan"] div.paragraph img { margin-bottom: 0%; } /*--------- 所有 Rich Content 外框深底色背景 (.BG_Dark) ------------*/ /* 所有 Rich Content 深底色背景 (.BG_Dark) .single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section { margin: 0 auto; margin-top: 20px; margin-bottom: 7%; background-color: #333; box-sizing: border-box; overflow: hidden; border-radius: 15px; border-radius: 0px !important; } */ /* Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section div.paragraph:not(.single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section div.paragraph)/* 排除圖上文下 */ { margin: 0 0 20px !important; display: none; } /* 所有 Rich Content / 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section p { letter-spacing: 0.01em; } /* 直接使用 .mp4 時 >> 無 border >> 所有 Rich Content / 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .vid-item-mp4, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section video { border: none !important; } /* #Drag-for-Comparison > 拖拉區塊/ 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section #Drag-for-Comparison.Rich-Content-Section .twentytwenty-wrapper.twentytwenty-horizontal { border-top: 1px solid #878787; border-bottom: 1px solid #878787; border-top: 1px solid #757575; } @media (min-width: 992px) { /* 文字區 (圖文左右) >> 所有 Rich Content / 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .col-md-5 { width: 37%; } } @media (max-width: 767px) { /* 所有 Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section .row.Rich-Content-Section /* BG_Dark */ { margin-left: 0; margin-right: 0; } /* 所有 Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark .All-Rich-Content-Section .row.Rich-Content-Section .col-md-12 /* BG_Dark */ { padding-right: 0; padding-left: 0; } } /*--------- 所有 Rich Content 反轉顏色 + 外框深底色背景 (.Invert-Color/ 深底色用) ------------*/ /* 所有 Rich Content 深底色背景 + 顏色反轉 (.Invert-Color + .color_blueD 藍字 to 亮藍字 / 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.slogan.color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Product-Comparison.Rich-Content-Section.image_top.compare h3.slogan.color_blueD)/* 藍字 to 亮藍字 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads h3.color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] h3.color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Product-Comparison.Rich-Content-Section.image_top.compare h3.color_blueD)/* 藍字 to 亮藍字 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] .color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads .color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] .color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare .color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Product-Comparison.Rich-Content-Section.image_top.compare .color_blueD)/* 藍字 to 亮藍字 */ { color: #008bc5; color: #00a7eb !important; } /* 所有 Rich Content 深底色背景 + 顏色反轉 (.Invert-Color + .color_gray 變亮 / 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.slogan.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .color_gray { color: #686f73; color: #a2a9ac !important; } /* 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.slogan.color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.slogan.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Product-Comparison.Rich-Content-Section.image_top.compare h3.slogan.color_blueD)/* 藍字 to 白字 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.slogan.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.slogan.color_black, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads h3.color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] h3.color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare h3.color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Product-Comparison.Rich-Content-Section.image_top.compare h3.color_blueD)/* 藍字 to 白字 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section h3.color_black, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .color_blueD:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] .color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads .color_blueD):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] .color_blueD):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .color_blueD):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare .color_blueD)/* 藍字 to 白字 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .color_black:not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads .color_black) { color: #fff !important; } /* 內文描述 >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section li::before, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section ul, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section p, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] li::before, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] li::before, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section p:not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-BG"] p):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads p):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Contact-Us_Get-Quote p):not(.single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .Rich-Content-Section[class*="Light-"] p):not(.single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p)/* 內文描述 */ { color: #ddd !important; color: #cacaca !important; color: #c7c9ca !important; } /* 內文描述 li::before >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section li::before, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] li::before, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] li::before { color: #a2a7a9 !important; } /* 內文描述 a >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section ul a:not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-BG"] ul a):not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-"] ul a), #overview-tab.tab-content.Customize-No-Margin.BG_Dark .Rich-Content-Section p a:not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-BG"] p a):not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-"] p a), #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul a, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p a, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul a, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p a, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section p a:not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-BG"] p a):not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-"] p a):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Contact-Us_Get-Quote p a)/* 內文描述 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section a:not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-BG"] a):not(.single-product #overview-tab.tab-content.Customize-No-Margin .Rich-Content-Section[class*="Light-"] a):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Contact-Us_Get-Quote a):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare a):not(.single-product .All-Rich-Content-Section section.cd-section .markets-top-banner.richcontent .color_white a.btn.btn-primary)/* 內文描述 */ { color: #00a3ee !important; color: #06d1ff !important; /* text-decoration: none !important; */ } /* 內文描述 a:hover >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section ul a:hover, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section p a:hover, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul a:hover, #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p a:hover, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] ul a:hover, #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Black-BG"] p a:hover, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section p a:hover:not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Contact-Us_Get-Quote p a:hover)/* 內文描述 */, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section a:hover:not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Contact-Us_Get-Quote a:hover):not(.single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section.compare a:hover):not(.single-product .All-Rich-Content-Section section.cd-section .markets-top-banner.richcontent .color_white a.btn.btn-primary:hover)/* 內文描述 */ { color: #06d1ff !important; color: #84e8ff !important; /* text-decoration: underline !important; */ } /* 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .package-content, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { background-color: #fff; padding: 5% 0; padding: 4% 0 3%; padding: 4% 0 0%;/* 底部有顏色時會漏餡 */ padding: 5% 0 0%;/* 底部有顏色時會漏餡 */ } /* Product Comparision (比較) (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .package-content { padding: 20px; } /* border-bottom: 15px 黑底 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section { border-bottom: 7px solid #333; border-bottom: 15px solid #000; border-bottom: 7px solid #000; } /* border-bottom: 2px 黑底 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Main-Banner-without-Slogan.Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Main-Banner.Rich-Content-Section { /* border-bottom: 2px solid #000; */ } /* package-content 加上白底色 >> 所有 Rich Content 深底色背景 + 顏色反轉 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .package-content {} /* Slide Content (深色底) >> 縮小尺寸 >> 滑動區加陰影 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.BG_Dark .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.BG_Dark .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner { filter: drop-shadow(0px 8px 10px rgba(25, 41, 52, 0.5)) brightness(100%) contrast(110%); border: 1px solid rgba(255, 255, 255, 0.2); } /*-------------- 客製化 >> for Rich Content (多層次 Layout / 滑動 Slide Content) ------------------*/ /* 所有 ID = "#Multi-Column-Rich-Content-" >> 開頭內容 (標題 + 內文) */ div[id*="Slide-Content-Default"] .slogan, div[id*="Slide-Content-Default"] .Rich-Content-Block-Description, div[id^="Slide-Content-Default"] .slogan, div[id^="Slide-Content-Default"] .Rich-Content-Block-Description, div[id*="Multi-Column-Rich-Content-"] .slogan, div[id*="Multi-Column-Rich-Content-"] .Rich-Content-Block-Description, div[id^="Multi-Column-Rich-Content-"] .slogan, div[id^="Multi-Column-Rich-Content-"] .Rich-Content-Block-Description, .All-Rich-Content-Section .Rich-Content-Block-Description { letter-spacing: -0.01em; } /* 所有 ID = "#Multi-Column-Rich-Content-" >> 開頭標題 */ div[id^="Slide-Content-Default"] h3, div[id^="Slide-Content-Default"] .slogan, div[id*="Multi-Column-Rich-Content-"] .slogan, div[id^="Multi-Column-Rich-Content-"] .slogan { font-weight: 500 !important; } /* 主標題下 >> 主描述內文 */ .All-Rich-Content-Section p.Rich-Content-Block-Description .All-Rich-Content-Section .Rich-Content-Block-Description { letter-spacing: 0.01em; display: block; width: 100%; margin-bottom: 3%; } /* 左箭頭(短) (All) */ div[id*="Slide-Content-Default"] #wrapper .fa-angle-left::before, div[id*="Slide-Content-Default"] .fa-angle-left::before, div[id*="Slide-Content-Default"] #wrapper .fa-chevron-left::before, div[id*="Slide-Content-Default"] .fa-chevron-left::before, div[id^="Slide-Content-Default"] #wrapper .fa-angle-left::before, div[id^="Slide-Content-Default"] .fa-angle-left::before, div[id^="Slide-Content-Default"] #wrapper .fa-chevron-left::before, div[id^="Slide-Content-Default"] .fa-chevron-left::before { font-family: 'FontAwesome'; content: "\f053"; font-family: 'Material Symbols Outlined' !important; /* Google Material Icon */ content: "chevron_left"; /* 左箭頭(短) */ content: "\e5cb"; content: "keyboard_arrow_left"; /* 左箭頭(短) */ content: "\e314"; } /* 右箭頭(短) (All) */ div[id*="Slide-Content-Default"] #wrapper .fa-angle-right::before, div[id*="Slide-Content-Default"] .fa-angle-right::before, div[id*="Slide-Content-Default"] .fa-chevron-right::before, div[id*="Slide-Content-Default"] .fa-chevron-right::before, div[id^="Slide-Content-Default"] #wrapper .fa-angle-right::before, div[id^="Slide-Content-Default"] .fa-angle-right::before, div[id^="Slide-Content-Default"] .fa-chevron-right::before, div[id^="Slide-Content-Default"] .fa-chevron-right::before { font-family: 'FontAwesome'; content: "\f105"; content: "\f054"; font-family: 'Material Symbols Outlined' !important; /* Google Material Icon */ content: "chevron_right"; /* 右箭頭(短) */ content: "\e5cc"; content: "keyboard_arrow_right"; /* 右箭頭(短) */ content: "\e315"; } /* 左 + 右箭頭(短) (All) */ div[id*="Slide-Content-Default"] #wrapper .fa-angle-right::before, div[id*="Slide-Content-Default"] .fa-angle-right::before, div[id*="Slide-Content-Default"] .fa-chevron-right::before, div[id*="Slide-Content-Default"] .fa-chevron-right::before, div[id*="Slide-Content-Default"] #wrapper .fa-angle-left::before, div[id*="Slide-Content-Default"] .fa-angle-left::before, div[id*="Slide-Content-Default"] #wrapper .fa-chevron-left::before, div[id*="Slide-Content-Default"] .fa-chevron-left::before, div[id^="Slide-Content-Default"] #wrapper .fa-angle-left::before, div[id^="Slide-Content-Default"] .fa-angle-left::before, div[id^="Slide-Content-Default"] #wrapper .fa-chevron-left::before, div[id^="Slide-Content-Default"] .fa-chevron-left::before, div[id^="Slide-Content-Default"] #wrapper .fa-angle-right::before, div[id^="Slide-Content-Default"] .fa-angle-right::before, div[id^="Slide-Content-Default"] .fa-chevron-right::before, div[id^="Slide-Content-Default"] .fa-chevron-right::before { font-size: 3.5em; font-weight: 300; } /* 811 以上 */ @Media (min-width: 811px) { /* 所有 ID = "#Multi-Column-Rich-Content-" >> 內標題 */ div[id*="Slide-Content-Default"] .carousel.slide h3, div[id*="Slide-Content-Default"] .carousel.slide .slogan { font-size: 2.4em !important; } /* 所有 ID = "#Multi-Column-Rich-Content-" >> 開頭內容居中 (標題 + 內文) */ div[id*="Slide-Content-Default"] .slogan, div[id*="Slide-Content-Default"] .Rich-Content-Block-Description, div[id^="Slide-Content-Default"] .slogan, div[id^="Slide-Content-Default"] .Rich-Content-Block-Description, div[id*="Multi-Column-Rich-Content"] .slogan, div[id*="Multi-Column-Rich-Content"] .Rich-Content-Block-Description, div[id^="Multi-Column-Rich-Content"] .slogan, div[id^="Multi-Column-Rich-Content"] .Rich-Content-Block-Description, .Rich-Content-Block-Description { text-align: center; } /* 主標題下 >> 主描述內文 */ .All-Rich-Content-Section .Rich-Content-Block-Description { padding: 0 3%; } /* 所有 ID = "#Multi-Column-Rich-Content-" >> 標題 */ div[id*="Slide-Content-Default"] .slogan, div[id^="Slide-Content-Default"] .slogan, div[id*="Multi-Column-Rich-Content"] .slogan, div[id^="Multi-Column-Rich-Content"] .slogan { /* font-size: 2.7em !important; */ } } /*-------------- 客製化 >> for Rich Content (#Application / 滑動 Slide Content) ------------------*/ /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption { color: #fff !important; background: rgba(0, 0, 0, 0.5); /* 添加背景色以便區分文字和圖片（可選） */ max-height: 300px; /* 限制最大高度為300px */ width: 100%; top: unset;/* 蓋掉原來的 */ transform: translateY(0%);/* 將文字對齊到底部 */ bottom: 0; /* 將文字對齊到底部 */ left: 0; padding: 2% 3%; max-height: 105px; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption h3 { color: #fff !important; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption p, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption p { display: none; } /* #Application (Slide Content/ .Non-Full-Width) > H3 標題 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section.Non-Full-Width .carousel.slide.Content-Bottom .carousel-caption h3, .All-Rich-Content-Section #Application .carousel.slide.Content-Bottom.Non-Full-Width .carousel-caption h3 { margin-top: 0%; } @media (max-width: 480px) { /* #Application (Slide Content/ .Non-Full-Width) > H3 標題 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom.Non-Full-Width .carousel-caption h3, .All-Rich-Content-Section #Application .carousel.slide.Content-Bottom.Non-Full-Width .carousel-caption h3 { font-size: 1.2em !important; margin-top: 0% !important; } .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { font-size: 0.5em; } .carousel.slide .fa-chevron-left::before, .carousel.slide .fa-chevron-right::before { position: relative; } .carousel.slide .fa-chevron-left::before { left: -0.3em; } .carousel.slide .fa-chevron-right::before { right: -0.3em; } } /*-------- Rich Content 特別針對 產品無縫 section 客製化 (.Customize-No-Margin/ Customized Content) ----------*/ /* 所有 Rich Content 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark .All-Rich-Content-Section, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content.BG_Dark .All-Rich-Content-Section, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"].BG_Dark .All-Rich-Content-Section { margin: 0 auto; margin-top: 20px; margin-top: 10px; margin-bottom: 7%; background-color: #333; box-sizing: border-box; overflow: hidden; border-radius: 15px; border-radius: 0px !important; } /* BG-Color (.White-BG) */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section.White-BG, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.White-BG, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.White-BG { background-color: #fff; } /* BG-Color (.Light-Gray-BG) */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG { background-color: #e0e2e3; } /* BG-Color (.Light-Gray-BG2) */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG2, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG2, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Light-Gray-BG2 { background-color: #e6e6e6; } /* BG-Color (.Middle-Gray-BG) */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section.Middle-Gray-BG, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Middle-Gray-BG, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Middle-Gray-BG { background-color: #4b4c4e; } /* 黑灰背景 */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section.Black-BG-Gray, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Black-BG-Gray, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Black-BG-Gray { background-color: #222; } /* 黑藍背景 */ .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Black-BG-Blue, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Black-BG-Blue { background-color: #040e29; } /* 黑背景 (.No-Margin-Layout) >> #All-in-One / #Stunning-Visual.Rich-Content-Section / #Switch-with-Pushbutton / #Drag-for-Comparison */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Features-Icon_Model-Name.Rich-Content-Section/* Model Name + Features Icon */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Drag-for-Comparison/* 拖拉比較 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.Black-BG, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Black-BG, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Black-BG { background-color: #000; } /* 底藍色 (.No-Margin-Layout) >> #Eco-Efficiency / #Peripheral-Sharing/ #Application */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"], .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Application"].Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section, .single-product #overview-tab.tab-content[class*="No-Margin"].Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Blue-BG, .single-product #overview-tab.tab-content.Full-Width-Rich-Content[class*="No-Margin"] .All-Rich-Content-Section .Rich-Content-Section.Blue-BG { /* background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(0, 108, 206, 1) 0%, rgb(0, 108, 206, 1) 60%, rgb(0, 108, 206, 1) 90%, rgb(0, 108, 206, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(64, 0, 206, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 108, 206, 1) 80%, rgba(0, 127, 243, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(171, 26, 255, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 111, 211, 1) 80%, rgba(0, 159, 255, 1) 100%); */ background-color: #006cce; } /* H3.slogan (Black Color) */ .single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin.BG_Dark.Invert-Color .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] h3.slogan { color: #000 !important; } /* [class*="Light-"] > p */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] ul li, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] ul, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] p { color: #555555 !important; } /* [class*="Light-"] > a */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] li a, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] p a { color: #2292d3 !important; } /* [class*="Light-"] > a:hover */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] li a:hover, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] p a:hover, /* [-- 4年前瀏覽器不支援 :is() 寫法 --] */ .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section .Rich-Content-Section[class*="Light-"] :is(li, p) a:hover { color: #06d1ff !important; color: #00c8f5 !important; } /* .col-md-12.Image-Block-Padding (圖片需往中間縮小 (分解圖/ 解說圖/ Diagram) >> 圖上下 >> 在正中間) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.Image-Block-Padding .col-md-12.image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.Image-Block-Padding .col-md-12.image_block { margin: 0 auto; padding: 7% 10% 6%; padding: 1% 6% 5%; } /* .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_top-center, .text-block.text_block_bottom-center, .text-block.text_block_top-left, .text-block.text_block_top-right)::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; /* height: 100vh; */ background-color: rgba(0, 0, 0, .3); pointer-events: none; } /* Overlay-Dark-Text-Block .markets-top-banner.richcontent::before/ 漸層背景遮罩 >> .wording_block >> 浮起來 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_top-center, .text-block.text_block_bottom-center, .text-block.text_block_top-left, .text-block.text_block_top-right) .wording_block { position: relative; } /* (上到下長漸層/ 自動).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_top-center)::before { background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.0) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.0) 100%); } /* (下到上長漸層/ 自動).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_bottom-center)::before { background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 1.0) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 1.0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 1.0) 100%); } /* (左到右長漸層/ 自動).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_top-left)::before { background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%); } /* (右到左長漸層/ 自動).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block .markets-top-banner.richcontent:has(.text-block.text_block_top-right)::before { background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1.0) 100%); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1.0) 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1.0) 100%); } /* .Overlay-Dark-Text-Block + .Top-to-Bottom (上到下短漸層/ 再次客製).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block.Top-to-Bottom .markets-top-banner.richcontent:has(.text-block.text_block_top-center)::before { background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.0) 35%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.0) 35%); background: linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.0) 35%); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.0) 25%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.0) 25%); background: linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.0) 25%); } /* .Overlay-Dark-Text-Block + .Bottom-to-Top (下到上短漸層/ 再次客製).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block.Bottom-to-Top .markets-top-banner.richcontent:has(.text-block.text_block_bottom-center)::before { background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.0) 70%, rgba(0, 0, 0, 0.3) 85%, rgba(0, 0, 0, 1.0) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.0) 70%, rgba(0, 0, 0, 0.3) 85%, rgba(0, 0, 0, 1.0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 70%, rgba(0, 0, 0, 0.3) 85%, rgba(0, 0, 0, 1.0) 100%); } /* .Overlay-Dark-Text-Block + .Left-to-Right (左到右短漸層/ 再次客製).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block.Left-to-Right .markets-top-banner.richcontent:has(.text-block.text_block_top-left)::before { background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.0) 35%); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.0) 35%); background: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.0) 35%); } /* .Overlay-Dark-Text-Block + .Right-to-Left (右到左短漸層/ 再次客製).text_block_top-center 時 >> .markets-top-banner.richcontent::before/ 漸層背景遮罩 */ .single-product #overview-tab.tab-content section.Overlay-Dark-Text-Block.Right-to-Left .markets-top-banner.richcontent:has(.text-block.text_block_top-right)::before { background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 1.0) 100%); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 1.0) 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 1.0) 100%); } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption { color: #fff !important; background: rgba(0, 0, 0, 0.5); /* 添加背景色以便區分文字和圖片（可選） */ max-height: 300px; /* 限制最大高度為300px */ width: 100%; top: unset;/* 蓋掉原來的 */ transform: translateY(0%);/* 將文字對齊到底部 */ bottom: 0; /* 將文字對齊到底部 */ left: 0; padding: 2% 3%; max-height: 105px; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption h3 { color: #fff !important; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption p, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application .carousel-caption p { display: none; } /* Slide Content >> 縮小尺寸 >> 滑動區加陰影 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner { filter: drop-shadow(0px 8px 10px rgba(25, 41, 52, 0.5)) brightness(100%) contrast(110%); } /* Play Icon 變大 (無對比) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn { filter: brightness(100%) contrast(100%) !important; transition: all 0.3s ease-in-out 0s; } /* Play Icon:hover 變大 (對比強) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn:hover { filter: brightness(110%) contrast(110%) !important; transition: all 0.3s ease-in-out 0s; } /* (CS22H) Play Icon::before 變大 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn::before { cursor: pointer; position: absolute; width: 100%; height: 100%; content: "\00a0"; background: rgba(0%, 0%, 0%,.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 9%; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center/ 9%; filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.5)) !important; filter: brightness(100%) contrast(100%) drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.4)) !important; opacity: 0.9; transition: all 0.3s ease-in-out 0s; } /* (CS22H) Play Icon 變大::before (Hover) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.1)) !important; background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 10%; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.2)) !important; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* Rich Content 透明物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn, .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn { background: rgba(0%, 0%, 0%, .0); transition: all 0.3s ease-in-out 0s; } /* Rich Content 透明物件的:Hover (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn:hover, .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn:hover { background: rgba(0%, 0%, 0%, .0); filter: brightness(110%) contrast(110%) !important; transition: all 0.3s ease-in-out 0s; } /* Rich Content 一般物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a.play_btn::before, .markets-top-banner.richcontent .text-block .image_block a.play_btn::before, .row .image_block a.play_btn::before { background: rgba(0%, 0%, 0%, .3) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 0.9; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* Rich Content 透明的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .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, .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .row .image_block:has(img[src*="Transparent_"]) a.play_btn::before { background: rgba(0%, 0%, 0%, .0) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center; filter: brightness(100%) contrast(100%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 0.9; opacity: 0.75; transition: all 0.3s ease-in-out 0s; } /* Rich Content 透明 + 一般物件的:hover (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .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, .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .row .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, .row .image_block a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .0) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* (.B2C-Style ) Rich Content 一般物件的 (img) >> 播放按鈕樣式 (a.play_btn) */ section:is(.Large-Play-Icon-Solid) .markets-solutions-applications div.yt div::before, section:is(.Large-Play-Icon-Solid) div.yt div::before, .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .RC_BG .text-block .image_block a.play_btn::before, section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .text-block .image_block a.play_btn::before, :is(.Large-Play-Icon-Solid) .row .image_block a.play_btn::before, .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:hover) */ section:is(.Large-Play-Icon-Solid) .markets-solutions-applications div.yt:hover div::before, section:is(.Large-Play-Icon-Solid) div.yt:hover div::before, .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, :is(.Large-Play-Icon-Solid) .row .image_block 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 / 15%; } /* .Simple-Rich */ section:is(.Simple-Rich.Large-Play-Icon-Solid) .markets-solutions-applications div.yt div::before, section:is(.Simple-Rich.Large-Play-Icon-Solid) div.yt div::before, .single-product #overview-tab.tab-content section:is(.Simple-Rich.Large-Play-Icon-Solid) .markets-top-banner.richcontent .RC_BG .text-block .image_block a.play_btn::before, section:is(.Simple-Rich.Large-Play-Icon-Solid) .markets-top-banner.richcontent .text-block .image_block a.play_btn::before, :is(.Simple-Rich.Large-Play-Icon-Solid) .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 / 10%; } /* (.B2C-Style ) .Multi_Rich_Content 透明物件的 (img[src*="Transparent_"]) >> 播放按鈕樣式 (a.play_btn) */ .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a.play_btn::before, :is(.Large-Play-Icon-Solid) .Multi_Rich_Content .row .image_block:has(img[src*="Transparent_"]) a.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: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) */ .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, section:is(.Large-Play-Icon-Solid) .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, :is(.Large-Play-Icon-Solid) .Multi_Rich_Content .row .image_block:has(img[src*="Transparent_"]) a:hover.play_btn::before, .single-product #overview-tab.tab-content section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .RC_BG .text-block .image_block a:hover.play_btn::before, section:is(.Large-Play-Icon-Solid) .Multi_Rich_Content .markets-top-banner.richcontent .text-block .image_block a:hover.play_btn::before, :is(.Large-Play-Icon-Solid) .Multi_Rich_Content .row .image_block 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: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%; } .single-product #overview-tab.tab-content .All-Rich-Content-Section #Application_Slide-Content-Default.No-Margin-Layout .line-Section .line, .single-product #overview-tab.tab-content .All-Rich-Content-Section section[id*="Slide-Content-Default"].No-Margin-Layout .line-Section .line { display: none; } /* 811 以上 */ @media (min-width: 811px) { .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 90%; margin: 0 auto; margin-bottom: 8%; } .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */ { border-radius: 15px; } } /* 1024 以上 */ @Media (min-width: 1024px) { /* 圖片縮小 >> #Model Name + Features Icon */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Features-Icon_Model-Name.Rich-Content-Section .image_block { margin: 0 auto; padding: 0% 3.5% 1%; padding: 0% 1.5% 1%; } /* 圖片縮小 >> #All-in-One */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section .image_block { margin: 0 auto; padding: 7% 10% 6%; padding: 1% 10% 5.5%; } /* 大標題變大 >> #Eco-Efficiency / #Application */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Application_Slide-Content-Default.Rich-Content-Section.image_bottom h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"] h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Application.Rich-Content-Section h3.slogan { font-size: 2.9em !important; } /* #Eco-Efficiency (Bus-Powered) >> H3 文字換行 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section h3.slogan, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section h3 { width: 97%; } /* 高度 70vh (.No-Margin-Layout) >> #Eco-Efficiency / #Audio-On (.No-Margin-Layout) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right { height: 70vh; height: 60vh; height: 63vh; } .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right { height: 55vh; } /* 高度 48vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 48vh; height: auto; } /* #Peripheral-Sharing (周邊設備) >> image_block >> 隱藏圖片區以外內容 (for 70vh) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block { overflow: hidden; } /* #Peripheral-Sharing (周邊設備) >> .image_right(圖右專用) > .image_block >> img 移動圖片 (for 70vh) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block { transform: translateX(-14px); flex: 1.5/* 加大內容 */; } /* #Peripheral-Sharing (周邊設備) >> .image_right(圖右專用) > .image_block >> img 移動圖片 (for 70vh) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block img { transform: translateX(-41px) scale(1.5); transform: translateX(-41px) scale(1.45); transform: translateX(-42px) translateY(40px) scale(1.45);/* 60vh */ transform: translateX(-42px) translateY(30px) scale(1.46);/* 63vh */ object-fit: contain;/* 不要撐滿 >> 改用 Scale 放大 */ } } /* 2000 以上 */ @Media (min-width: 2000px) { /* 高度 46.5vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 46.5vh; } } /* Bowei 筆電寬螢幕 */ @Media (min-width: 1281px) and (max-width: 1366px) { /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 60vh; } /* .Long-Content (針對圖文左右) >> 高度變高 (70vh) (字太多不撐高字上下會頂邊) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right.Long-Content .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left.Long-Content .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right.Long-Content, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left.Long-Content { height: 70vh; } .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right { height: 65vh; } /* 高度 70vh (.No-Margin-Layout) >> #Eco-Efficiency / #Audio-On (.No-Margin-Layout) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right { height: 75vh; } /* 高度 59.5vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 59.5vh; height: auto; } /* Slide Content 寬度 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 83%; width: 76%; } } /* 820 以下 */ @media (max-width: 820px) { /* #Space-Efficient 變黑底 >> 跟 #Audio-On 灰底色區別 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Space-Efficient.Rich-Content-Section { background-color: #000; } /* 圖文居中 >> #All-in-One / #Audio-On / #Drag-for-Comparison / #Application_Slide-Content-Default */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Drag-for-Comparison.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"].Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Audio-On.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section .wording_block { text-align: center; } .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 90%; margin: 0 auto 15%; } .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */ { border-radius: 15px; } /* Play Icon::before 變大 */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn::before { background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 13%; } /* Play Icon 變大::before (Hover) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_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%; } /* (.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 / 18%; } /* (.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 / 19%; } } /* 480 以下 */ @media (max-width: 480px) { /* Video Slider 播放按鈕變更 */ .single-product .owl-item .videos-item a.play_btn::before { background: rgba(0%, 0%, 0%, .15) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center; background: rgba(0%, 0%, 0%, .3) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center / 20%; } } /* 430 以下 */ @media (max-width: 430px) { .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 90%; margin: 0 auto 9%; } } /*-------- Rich Content 特別針對 CS22H 客製化 (.CS22H/ Customized Content) ----------*/ /* 所有 Rich Content 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.CS22H.BG_Dark .All-Rich-Content-Section { margin: 0 auto; margin-top: 20px; margin-bottom: 7%; background-color: #333; box-sizing: border-box; overflow: hidden; border-radius: 15px; border-radius: 0px !important; } /* #Switch-Seamless-Between-Computers > BG-Color */ .single-product #overview-tab.tab-content.CS22H .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left { background-color: #e0e2e3; } /* #Switch-Seamless-Between-Computers > H3.slogan */ .single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.slogan, .single-product #overview-tab.tab-content.CS22H .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.slogan { color: #000 !important; } /* #Switch-Seamless-Between-Computers > p */ .single-product #overview-tab.tab-content.CS22H.BG_Dark.Invert-Color .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p, .single-product #overview-tab.tab-content.CS22H .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p { color: #555555 !important; } /* 深灰背景 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section/* #Push Button */ { background-color: #222; } /* 黑背景 (.No-Margin-Layout) >> #All-in-One / #Stunning-Visual.Rich-Content-Section / #Switch-with-Pushbutton / #Drag-for-Comparison */ /* .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Drag-for-Comparison.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Switch-with-Pushbutton.Rich-Content-Section, */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Features-Icon_Model-Name.Rich-Content-Section/* Model Name + Features Icon */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Drag-for-Comparison/* 拖拉比較 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section { background-color: #000; } /* 底藍色 (.No-Margin-Layout) >> #Eco-Efficiency / #Peripheral-Sharing/ #Application */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"], .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Application"].Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section { /* background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(0, 108, 206, 1) 0%, rgb(0, 108, 206, 1) 60%, rgb(0, 108, 206, 1) 90%, rgb(0, 108, 206, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(64, 0, 206, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 108, 206, 1) 80%, rgba(0, 127, 243, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(171, 26, 255, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 111, 211, 1) 80%, rgba(0, 159, 255, 1) 100%); */ background-color: #006cce; } /* Slide Content >> 縮小尺寸 >> 滑動區加陰影 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner { filter: drop-shadow(0px 8px 10px rgba(25, 41, 52, 0.5)) brightness(100%) contrast(110%); } /* Play Icon 變大 (無對比) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn { filter: brightness(100%) contrast(100%) !important; transition: all 0.3s ease-in-out 0s; } /* Play Icon:hover 變大 (對比強) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn:hover { filter: brightness(110%) contrast(110%) !important; transition: all 0.3s ease-in-out 0s; } /* Play Icon::before 變大 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn::before { cursor: pointer; position: absolute; width: 100%; height: 100%; content: "\00a0"; background: rgba(0%, 0%, 0%,.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 9%; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center/ 9%; filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.5)) !important; filter: brightness(100%) contrast(100%) drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.4)) !important; opacity: 0.9; transition: all 0.3s ease-in-out 0s; } /* Play Icon 變大::before (Hover) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.1)) !important; background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 10%; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.2)) !important; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* 811 以上 */ @media (min-width: 811px) { .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 90%; margin: 0 auto; margin-bottom: 8%; } .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */ { border-radius: 15px; } } /* 1024 以上 */ @Media (min-width: 1024px) { /* 圖片縮小 >> #Model Name + Features Icon */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Features-Icon_Model-Name.Rich-Content-Section .image_block { margin: 0 auto; padding: 0% 3.5% 1%; padding: 0% 1.5% 1%; } /* 圖片縮小 >> #All-in-One */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section .image_block { margin: 0 auto; padding: 7% 10% 6%; padding: 1% 10% 5.5%; } /* 大標題變大 >> #Eco-Efficiency / #Application */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Application_Slide-Content-Default.Rich-Content-Section.image_bottom h3.slogan, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"] h3.slogan, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Application.Rich-Content-Section h3.slogan { font-size: 2.9em !important; } /* #Eco-Efficiency (Bus-Powered) >> H3 文字換行 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section h3.slogan, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section h3 { width: 97%; } /* 高度 70vh (.No-Margin-Layout) >> #Eco-Efficiency / #Audio-On (.No-Margin-Layout) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right { height: 70vh; height: 60vh; height: 63vh; } .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right { height: 55vh; } /* 高度 48vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 48vh; height: auto; } /* #Peripheral-Sharing (周邊設備) >> image_block >> 隱藏圖片區以外內容 (for 70vh) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block { overflow: hidden; } /* #Peripheral-Sharing (周邊設備) >> .image_right(圖右專用) > .image_block >> img 移動圖片 (for 70vh) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block { transform: translateX(-14px); flex: 1.5/* 加大內容 */; } /* #Peripheral-Sharing (周邊設備) >> .image_right(圖右專用) > .image_block >> img 移動圖片 (for 70vh) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block img { transform: translateX(-41px) scale(1.5); transform: translateX(-41px) scale(1.45); transform: translateX(-42px) translateY(40px) scale(1.45);/* 60vh */ transform: translateX(-42px) translateY(30px) scale(1.46);/* 63vh */ object-fit: contain;/* 不要撐滿 >> 改用 Scale 放大 */ } } /* 2000 以上 */ @Media (min-width: 2000px) { /* 高度 46.5vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 46.5vh; } } /* Bowei 筆電寬螢幕 */ @Media (min-width: 1281px) and (max-width: 1366px) { /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Full-Width-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 60vh; } .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-Seamless-Between-Computers.Rich-Content-Section.image_right { height: 65vh; } /* 高度 70vh (.No-Margin-Layout) >> #Eco-Efficiency / #Audio-On (.No-Margin-Layout) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Eco-Efficiency.Rich-Content-Section.image_right { height: 75vh; } /* 高度 59.5vh #Switch-with-Pushbutton (因為影片尺寸跟圖片不符, 需要另外客製) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_top .image_block.Video-Inner, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Switch-with-Pushbutton.Rich-Content-Section.image_bottom .image_block.Video-Inner { height: 59.5vh; height: auto; } /* Slide Content 寬度 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */ { width: 83%; width: 76%; } } /* 820 以下 */ @media (max-width: 820px) { /* #Space-Efficient 變黑底 >> 跟 #Audio-On 灰底色區別 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Space-Efficient.Rich-Content-Section { background-color: #000; } /* 圖文居中 >> #All-in-One / #Audio-On / #Drag-for-Comparison / #Application_Slide-Content-Default */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Drag-for-Comparison.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div[id*="Slide-Content-Default"].Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Audio-On.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #All-in-One.Rich-Content-Section .wording_block { text-align: center; } /* Play Icon::before 變大 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn::before { background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 13%; } /* Play Icon 變大::before (Hover) */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 14%; } } /*-------- Rich Content 特別針對 2L-7D Series (Cable 類) 客製化 (.CS22H/ Customized Content) ----------*/ .single-product #overview-tab.tab-content.Series_2L-7D.Customize-No-Margin .All-Rich-Content-Section #HDMI_2-0.Rich-Content-Section.Black-BG-Blue, .single-product #overview-tab.tab-content.Customize-No-Margin .All-Rich-Content-Section #HDMI_2-0.Rich-Content-Section.Black-BG-Blue { /* background-color: #040e29; background: radial-gradient(ellipse at center, rgba(10,30,102,1) 0%,rgba(10,30,102,1) 30%,rgba(4,14,41,1) 100%); */ background-color: #020514; } /* Applicationd H3 >> 變成橘色 (針對 2L Cable) */ .single-product #overview-tab.tab-content.Series_2L-7D .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3, .Series_2L-7D .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3 { color: #fff !important; color: #fb9800 !important; font-weight: 500; } /* 1024 以上 */ @Media (min-width: 1024px) { /* #Main-Banner >> border-bottom: 2px (灰底/ 白底) */ .single-product #overview-tab.tab-content.Series_2L-7D.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Main-Banner-without-Slogan.Rich-Content-Section, .single-product #overview-tab.tab-content.Series_2L-7D.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Main-Banner.Rich-Content-Section { border-bottom: 2px solid #fff; border-bottom: 2px solid #e0e2e3; } /* [id*="Astounding-Clarity"] >> border-bottom: 2px (黑底) */ .single-product #overview-tab.tab-content.Customize-No-Margin.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section { border-bottom: 3px solid #000; border-bottom: 2px solid #fff; } /* [id*="Astounding-Clarity"] >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left { height: 40vh; height: 50vh; } /* [id*="Astounding-Clarity"] >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block { height: calc(40vh - 2px);/* 因為 border 2px */ height: calc(50vh - 2px);/* 因為 border 2px */ } /* #Captivating-Cinematic (4K/ 8K) >> 高度變矮 (50vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left { height: 50vh; height: 55vh; } /* #Captivating-Cinematic (8K) >> border-bottom: 2px (黑底) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left { border-top: 2px solid #4b4c4e; } /* #Captivating-Cinematic (8K) >> 高度變矮 (50vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left .image_block { height: calc(50vh - 2px);/* 因為 border 2px */ height: calc(55vh - 2px);/* 因為 border 2px */ } /* #Captivating-Cinematic >> wording_block >> 加寬 (左右距離變小) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .col-md-5.wording_block { margin-left: 5%; margin-right: 3%; } /* #Dive-In_Game-On >> H3 跟上方距離縮小 */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content .All-Rich-Content-Section #Dive-In_Game-On.Rich-Content-Section.image_bottom h3.slogan { margin-top: 6% !important; } /* #Dive-In_Game-On >> P 跟下方距離縮小 */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content .All-Rich-Content-Section #Dive-In_Game-On.Rich-Content-Section.image_bottom p { margin-bottom: 4%; } /* Applicationd H3 >> Large Font (針對 2L Cable) */ .single-product #overview-tab.tab-content.Series_2L-7D .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3, .Series_2L-7D .All-Rich-Content-Section .carousel.slide.Content-Bottom .carousel-caption h3 { font-size: 3em !important; } /* (UL 居中) .col-md-12.wording_block ul */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_bottom .col-md-12.wording_block ul, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_top .col-md-12.wording_block ul { width: 93%; } } /* Bowei 筆電寬螢幕 */ @Media (min-width: 1281px) and (max-width: 1366px) { /* #Captivating-Cinematic (4K/ 8K) >> 高度變高 (70vh) (字太多不撐高上下會頂邊) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left { height: 50vh; height: 70vh !important; height: 80vh !important; } /* #Captivating-Cinematic (8K) >> 高度變高 (70vh) (字太多不撐高上下會頂邊) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left { height: 70vh !important; height: 80vh !important; } /* #Captivating-Cinematic (8K) >> 高度變高 (70vh) (字太多不撐高上下會頂邊) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Captivating-Cinematic.Rich-Content-Section.image_left .image_block { height: calc(70vh - 2px) !important; height: calc(80vh - 2px) !important; } /* [id*="Astounding-Clarity"] >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left { height: 53vh !important; height: 66vh !important; } /* [id*="Astounding-Clarity"] >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block { height: calc(53vh - 2px) !important; height: calc(66vh - 2px) !important; } /* [id*="Astounding-Clarity"] (8K) >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left { height: 57vh !important; height: 66vh !important; } /* [id*="Astounding-Clarity"] (8K) >> 高度變矮 (40vh) (因高度比例不變矮會蓋到圖上的字) */ .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Series_2L-7D.Re-8K.Full-Width-Rich-Content.No-Margin-Layout .All-Rich-Content-Section [id*="Astounding-Clarity"].Rich-Content-Section.image_left .image_block { height: calc(57vh - 2px) !important; height: calc(66vh - 2px) !important; } } /* ============================= (for Avalade) 新版 Product Page (圖文 Full-Width) >> 僅 Overview 豐富圖文區 =================================== 【.Full-Width-Rich-Content / .No-Margin-Layout (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) (*** 若要各區上下完全無空隙 Layout >> .No-Margin-Layout ***) ============================================================================================================================= */ /*=========================================== 共用內容 ===========================================*/ /* BG Color >> [class*="markets-solutions-"] 變透明 */ .All-Rich-Content-Section section:is([class*="BG-"], [class*="BG_"], [class*="bg-"], [class*="bg_"], [class*="with-bg"], [class*="with_bg"]) [class*="markets-solutions-"] { background: unset; } /* 若有設背景色或圖 section[class*="BG-"] / section[class*="BG_"] 增加 Section 內 text_block 預設的上下內距 */ .All-Rich-Content-Section section:is([class*="BG-"], [class*="BG_"], [class*="bg-"], [class*="bg_"], [class*="with-bg"], [class*="with_bg"]) [class*="markets-solutions-"] { padding: 5%; } /*---------------------- 背景色 ----------------------*/ /* BG Color >> 變黑色 */ .All-Rich-Content-Section section:is(.BG-Black, .BG_Black):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-Black_Child, .BG_Black_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black) { background-color: rgba(0, 0, 0, 1.0) !important; } /* BG Color >> 變深灰色 */ .All-Rich-Content-Section section:is(.BG-GreyDK):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyDK_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyDK) { background-color: #5c5e60 !important; } /* BG Color >> 變深灰色 -2 */ .All-Rich-Content-Section section:is(.BG-GreyMDK):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyMDK_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyMDK) { background-color: rgba(40, 41, 46, 1.0) !important; background-color: #28292e !important; } /* BG Color >> 變超深灰黑色 */ .All-Rich-Content-Section section:is(.BG-GreySDK):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreySDK_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreySDK) { background-color: rgba(2, 2, 2, 1.0) !important; } /* BG Color >> 變中藍色 */ .All-Rich-Content-Section section:is(.BG-BlueM):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-BlueM_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-BlueM) { /* background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(0, 108, 206, 1) 0%, rgb(0, 108, 206, 1) 60%, rgb(0, 108, 206, 1) 90%, rgb(0, 108, 206, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(64, 0, 206, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 108, 206, 1) 80%, rgba(0, 127, 243, 1) 100%); background-image: url(//assets.aten.com/???.jpg), linear-gradient(45deg, rgba(171, 26, 255, 1) 0%, rgba(75, 0, 206, 1) 40%, rgba(0, 111, 211, 1) 80%, rgba(0, 159, 255, 1) 100%); */ background-color: #006cce !important; background-color: rgba(0, 108, 206, 1.0) !important; } /* BG-Color (.BG-GreyL / .Light-Gray-BG) */ .All-Rich-Content-Section section:is(.BG-GreyL, .Light-Gray-BG):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyL_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyL, .Light-Gray-BG) { background-color: #e0e2e3 !important; background-color: rgba(239, 239, 239, 1.0) !important; } /* BG-Color (.BG-GreyL-2 / .Light-Gray-BG-2) */ .All-Rich-Content-Section section:is(.BG-GreyL-2, .Light-Gray-BG-2):has([class*="markets-solutions-"]), .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyL-2_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-GreyL-2, .Light-Gray-BG-2) { background-color: #efefef !important; background-color: rgba(239, 239, 239, 1.0) !important; } /*---------------------- 字體顏色 ----------------------*/ /* 標題變白色 >> 所有深色背景 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) p { color: #fff; color: rgba(255, 255, 255, 1.0); } /* 標題變白色 85% >> 所有深色背景 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) p { color: #fff; color: rgba(255, 255, 255, 0.85); } /* 【 (Normal 客製) section.BG-Black.Invert-Color >> a >> for Avalade】 Product Page */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) a:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section a), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) a:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section a):not(.single-product .All-Rich-Content-Section section.cd-section.Rich-Content-Section .color_white a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content section.cd-section .markets-top-banner.richcontent .color_white a.btn.btn-primary) { color: #02dfff !important; } /* 【 (Normal 客製 :hover) section.BG-Black.Invert-Color >> a >> for Avalade】 Product Page */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) a:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section a):hover, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) a:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section a):not(.single-product .All-Rich-Content-Section section.cd-section.Rich-Content-Section .color_white a):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content section.cd-section .markets-top-banner.richcontent .color_white a.btn.btn-primary):hover { color: #24e3ff !important; } /************** 影片樣式定義 【主圖影片 / 背景影片】 *************/ /* for 一般 >> 【Video 影片元素】確保影片置中, 強制填滿 */ section video:is([id*="vid_BG"]) { /* z-index: 0; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 確保影片置中 */ min-width: 100%; min-height: 100%; width: 100%; /* 強制填滿寬度 */ height: 100%; /* 強制填滿高度 */ object-fit: cover; /* 核心屬性：維持比例並填滿空間，效果等同於 background-size: cover */ } /* ========================= 【.Enlarge-Legacy-Rich-Content for 僅 Legacy】 Product Page (圖文放大) >> 僅 Overview 豐富圖文區 ======================================= >> 取代舊的方式'Full-Width-Rich-Content' 【.Enlarge-Legacy-Rich-Content / .No-Margin-Layout (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) (*** 若要各區上下完全無空隙 Layout >> .No-Margin-Layout ***) 【 Avalade 模組化後 >> 當 #overview-tab 內有 .cd-section.container-fluid 時，改變 .tab-nav 的樣式 】 ============================================================================================================================= */ /*=========================================== 共用內容 ===========================================*/ /*---------------------- Play Video Icon ----------------------*/ /* Play Icon 變大 (無對比) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn { filter: brightness(100%) contrast(100%) !important; transition: all 0.3s ease-in-out 0s; } /* Play Icon:hover 變大 (對比強) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn:hover { filter: brightness(110%) contrast(110%) !important; transition: all 0.3s ease-in-out 0s; } /* Play Icon::before 變大 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a.play_btn::before { cursor: pointer; position: absolute; width: 100%; height: 100%; content: "\00a0"; background: rgba(0%, 0%, 0%,.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 9%; background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w2_Xlarge.png) no-repeat center center/ 9%; filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.5)) !important; filter: brightness(100%) contrast(100%) drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.4)) !important; opacity: 0.9; transition: all 0.3s ease-in-out 0s; } /* Play Icon 變大::before (Hover) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section a:hover.play_btn::before { background: rgba(0%, 0%, 0%, .05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.1)) !important; background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 10%; filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.2)) !important; filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important; opacity: 1.0; transition: all 0.3s ease-in-out 0s; } /* 僅 Legacy 的【.Full-Width-Layout】圖上 & 下滿版時 >> 圖片不圓角 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.cd-section img { vertical-align: baseline; /* 會導致 Legacy 所有img 圖片底部多出不必要空間 */ vertical-align: middle; display: block; } /* Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.paragraph:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.paragraph):not(.overview_block div.paragraph)/* 排除圖上文下 & Overview Text */, .product #refs #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.paragraph:not(.product #refs #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph):not(.overview_block div.paragraph)/* 排除圖上文下 & Overview Text */ { margin: 0 0 20px !important; display: none; } /* Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.paragraph/* 排除圖上文下 */, .product #refs #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph/* 排除圖上文下 */ { margin: 0 0 0px !important; } /* Img >> Rich 產生的多餘空白的內容 (image_top 才會出現 .paragraph) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.paragraph img/* 排除圖上文下 */, .product #refs #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.image_block div.paragraph img/* 排除圖上文下 */ { margin-bottom: 3%; } /* Full Wide Rich Content >> .line-Section (.line 外框) >> 底變白色 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.row > .col-md-12.line-Section { background-color: #fff; background-color: transparent; } /* Full Wide Rich Content >> 隱藏虛線 Line for Rich Content (上下仍有間距) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 40px 0;/* 縮短上下距離 */ margin: 30px 0;/* 縮短上下距離 */ } .single-product #overview-tab.tab-content.No-Line-Section.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Full-Width-Container div.row > .col-md-12.line-Section, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Line-Section .All-Rich-Content-Section .Full-Width-Container div.row > .col-md-12.line-Section {} /* Full Wide Rich Content (.No-Margin-Layout) 無空隙 Layout >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div.row .col-md-12.line-Section { display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /* Full Wide Rich Content (.No-Margin-Layout) 無空隙 Layout >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section div.row > .col-md-12 .line { display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /* Form at Bottom >> 雖然是 .No-Margin-Layout >> 一定要有上方距離 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { padding: 5% 0 0%; } /* Full Wide Rich Content >> .All-Rich-Content-Section (所有圖文內容最外框) >> 不能包含第一個 section 滿版 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:not(:has(.Full_Width_Rich_Content.Full-Width-Container)), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section { border-radius: 15px; margin: 0 auto; margin-top: 20px; margin-bottom: 7%; box-sizing: border-box; overflow: hidden; } /* (再強調一次) Full Wide Rich Content >> .All-Rich-Content-Section (所有圖文內容最外框) >> 不能包含第一個 section 滿版 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:has(.Full_Width_Rich_Content.Full-Width-Container) .RC_BG:not(.child-bg), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section:has(.Full_Width_Rich_Content.Full-Width-Container), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Full_Width_Rich_Content.Full-Width-Container) { border-radius: 0px; } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 所有圖文 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-6, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-5 { position: relative; box-sizing: border-box; } .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section h3.slogan/* 所有圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section h3/* 所有圖文 */ { font-weight: 500; } .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section p/* 所有圖文 */ { font-weight: 400; line-height: 1.4em; line-height: 1.5em; } /* H3.Slogan + P (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.compare .col-md-12 > h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.compare .col-md-12 > h3)/* 圖文上下 */ { padding: 0 3%; } /* H3.Slogan (.col-md-12 圖文上下) >> Margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3/* 圖文上下 */ { /* margin-top: 5%; */ } /* H3.Slogan (.col-md-12 圖文上下) (.No-Margin-Layout) >> Margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Rich-Content-Section div#myCarousel.Non-Full-Width) h3.RC_LTitle/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Rich-Content-Section.carousel.slide.Non-Full-Width) h3.RC_LTitle/* Slide Content >> 縮小尺寸 */, /* 圖上文下 .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top h3.slogan), */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12 > h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12 > h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section h3)/* 圖文上下 */ { margin-top: 8%; } /* P (.col-md-12 圖文上下) >> margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */ { margin-bottom: 4%; margin-bottom: 2.5%; } /* 圖上文下 (.image_top) >> 上間距 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3 { margin-top: 3%; } /* 圖上文下 (.image_top) >> 下間距 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > div > p { margin-bottom: 8.5%; } /* H3.Slogan (.col-md-5 圖文左右) >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left p/* 圖下左右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 圖下左右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right p/* 圖上左右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 圖上左右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-5 > h3.slogan/* 圖文左右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-5 > h3/* 圖文左右 */ { margin-top: 2%; } /* H3.Slogan + P (.col-md-5 圖文) >> 字距 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .slogan, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section p { letter-spacing: 0.01em; } /* H3.Slogan + P (.col-md-5 圖文) >> 字距 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .slogan { letter-spacing: -0.01em; } /* Image 充滿容器 (避免出現父容器底部空隙) >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block img { width: 100%; height: auto; /* 讓圖片按照比例調整高度 */ display: block; object-fit: cover; /* 確保圖片覆蓋區塊並保持比例 (1024px 以上) */ } /* Video 充滿容器 (避免出現父容器底部空隙) >> 把同 Section 影片(.Videos-MP4-Section video) 取代 .image_block 下的影片 >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .image_block .vid-item-mp4 { object-fit: cover; /* 確保圖片覆蓋區塊並保持比例 (1024px 以上) */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { padding: 4% 0 0%;/* 底部有顏色時會漏餡 */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .All-Rich-Content-Section .package-content, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .package-content { margin-top: 4%; margin-top: 2%; padding: 20px; } /* 比較表格 >> 頂部距離 Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top.compare { padding-top: 8% !important; padding-top: 3% !important; } @media (min-width: 768px) { /* Rich Content 圖文左右適用 >> img (水平居中) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section .markets-top-banner.richcontent .text-block.text-block:is(.text_block_top-left, .text_block_top-right) [class*="col-"]:has(.image_block img) { display: flex; justify-content: center; } } @media (min-width: 810px) { /* Full Wide Rich Content >> 隱藏虛線 Line for Rich Content (上下仍有間距) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 30px 0;/* 縮短上下距離 */ margin: 40px 0;/* 縮短上下距離 */ } } @media (min-width: 992px) { /* 文字區 (圖文左右) >> 所有 Full Width Rich Content >> Wording */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_left .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_right .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-5, .single-product #overview-tab.tab-content .All-Rich-Content-Section .col-md-5 { width: 37%; } } /* 1024 以上 */ @Media (min-width: 1024px) { /* 圖文上下適用 (水平居中) (不加此段若 h3 的 width 縮減會跑至左方,不會居中) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12 > div:not(.Multi-Column-Item .Text-Content):not(.Multi-Column-Item .Image-Content), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12 > p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section .col-md-12 > h3.slogan { position: relative; left: 50%;/*將元素的左邊緣移動到父容器寬度的 50% 處*/ transform: translateX(-50%);/* 扣掉物件寬度 >> 畫面居中使用 */ } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 所有 .Rich-Content-Section >> 垂直/ 水平置中 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section { display: flex; align-items: center;/* 項目垂直置中 */ align-content: center; /* 垂直置中 */ justify-content: center;/* 水平置中 */ flex-wrap: wrap;/* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */ } /* 去掉 Offset 距離 >> 圖文左右 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-5.col-md-offset-1, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-6.col-md-offset-1, .single-product #overview-tab.tab-content .All-Rich-Content-Section .text-block [class*="col-"].col-md-offset-1 { margin-left: 0; } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 (.No-Margin-Layout) >> 圖文左右 .Rich-Content-Section >> 圖文自行靠齊左右 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { justify-content: space-between; /* 讓子元素之間有適當的間距，避免集中在中間 */ flex-wrap: nowrap; /* 防止子元素換行 */ } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section >> 圖文左右內容充滿父容器 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_right .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_left .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .image_left .image_block, .single-product #overview-tab.tab-content .All-Rich-Content-Section .text-block [class*="col-"] { flex: 1;/* 內容充滿父容器 */ box-sizing: border-box; /* 因 div 已經設定為 : flex: 1 >> 還要將其設定為 box-sizing: border-box >> 才不會影響導致區塊被撐開 */ } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 (.No-Margin-Layout) >> 圖文左右 .Rich-Content-Section >> 刪除多餘間距 for 圖文左右 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section section .container/* Avalade */, .single-product #overview-tab.tab-content.No-Margin-Layout.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section .container/* Avalade */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container/* Avalade */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { padding: 0 !important; } /* #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section >> 增加 .wording_block for 圖文左右 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .wording_block { margin: 0 5%; padding: 0; padding: 0 2%; } /* 去掉 Offset 距離 >> 圖左(Offset)/文右 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block { margin-right: 6%; } /* 去掉 Offset 距離 >> 圖右(Offset)/文左 >> 因為用 flex 置中 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block { margin-left: 6%; } /* H3 文字大小 (所有) */ .single-product .All-Rich-Content-Section section.Simple-Rich:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3, p):not(h2 + h3), section.Simple-Rich:has([class*="markets-solutions-"]) :is(h2, h3, p), section.Simple-Rich:has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 > div h3)/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top .col-md-12 > div h3)/* 上下圖文 */ { font-size: 2.6em; font-size: 2.7em; line-height: 1.3em; margin-bottom: 2% !important; } /* .Title-Small >> H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_bottom h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 > div h3)/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_top h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top .col-md-12 > div h3)/* 上下圖文 */ { font-size: 1.95em !important; margin-bottom: 4% !important; } /* H3 文字左右 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */ { margin-bottom: 6% !important; } /* .Title-Small >> H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_bottom h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 > div h3)/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Title-Small .Rich-Content-Section.image_top h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top .col-md-12 > div h3)/* 上下圖文 */ { margin-bottom: 4% !important; } /* H3 文字大小 (圖文左右較小) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 圖左文右 */ { /* font-size: calc(2.6em - 0.1em); */ } /* 所有圖文 >> 描述 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section p { font-size: 1.1em !important; } /* H3.Slogan + P 描述(.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 > h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top .col-md-12 > h3.slogan):not([id*="Form-for-"].Rich-Content-Section #wording-gsection h3):not(#Form-for-Leads.Rich-Content-Section #wording-gsection h3)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > p/* 圖文上下 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section .col-md-12 > h3.slogan)/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 > h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section .col-md-12 > h3)/* 圖文上下 */ { padding: 0 5%; } /* P 描述 (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 p:not(.overview_block .col-md-12.paragraph p)/* 圖文上下 + Overview P */ { padding: 0 15% !important; } /* #Product-Comparison >> Table 被 P 包起來描述 (.col-md-12 圖文上下) >> 不要 Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom p { padding: 0 0% !important; } /* for #Main-Banner >> 長描述文 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top .col-md-12 p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom .col-md-12 p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom p { padding: 0 6% !important; text-align: left !important; } /* 對齊中間 >> H3.Slogan + P (圖文上下 .col-md-12) >> 所有 Full Width Rich Content 下的 >> .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Application_Multi-Column-Rich-Content .Rich-Content-Section .Multi-Column-Container.Text-Out-Container-Section .col-lg-12 h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section .text-block.text_block_top-left h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section .text-block.text_block_top-right h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section #wording-gsection h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section [id*="Form-for-"].Rich-Content-Section #wording-gsection h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section [id*="Form-for-"] #wording-gsection h3) /* 圖上文下 (for Avalade 改動後修正) */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .Comparison-Des/* Comparison Table 區的描述 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .Comparison-Des/* Comparison Table 區的描述 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .All-Rich-Content-Section .Rich-Content-Section.image_bottom p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom p)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare p)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3.slogan):not(#Form-for-Leads.Rich-Content-Section #wording-gsection h3):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section #wording-gsection h3)/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Product-Comparison.Rich-Content-Section.image_top p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .Rich-Content-Section.image_top.compare p):not(.single-product #overview-tab.tab-content .All-Rich-Content-Section section.text-left.Long-Des .Rich-Content-Section .wording_block p):not(.overview_block .col-md-12.paragraph p)/* 圖文上下 + Overview P */ { text-align: center; } /* Rich Content Form 表單標題 (h3) >> 永遠置左 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section #wording-gsection h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section [id*="Form-for-"].Rich-Content-Section #wording-gsection h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section #Form-for-Leads #wording-gsection h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section [id*="Form-for-"] #wording-gsection h3 { text-align: left !important; padding-left: 0 !important; } /* P 描述左右空間縮短 (.col-md-12 圖文上下) >> 縮短描述左右空間 (.Longer-Description) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section.Long-Des .Rich-Content-Section:is(.image_top, .image_bottom) .wording_block p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.Long-Des .Rich-Content-Section:is(.image_top, .image_bottom) .wording_block p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.Longer-Description .All-Rich-Content-Section .image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.Longer-Description .All-Rich-Content-Section .image_bottom p { padding: 0 5% !important; } /* P 描述左右空間縮短>> 靠左 (section.text-left.Long-Des) (.col-md-12 圖文上下) >> 縮短描述左右空間 (.Longer-Description) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section.text-left.Long-Des .Rich-Content-Section:is(.image_top, .image_bottom) .wording_block h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section section.text-left.Long-Des .Rich-Content-Section:is(.image_top, .image_bottom) .wording_block p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.text-left.Long-Des .Rich-Content-Section:is(.image_top, .image_bottom) .wording_block p { text-align: left !important; } /* 上距離 >> H3.Slogan + P (圖文上下 .col-md-12) >> 所有 Full Width Rich Content 下的 >> .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_bottom h3.slogan)/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section.image_top h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section.image_top h3.slogan)/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 h3.slogan:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section h3.slogan):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3.slogan)/* 圖文上下 */ { margin-top: 2%; } /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 45vh; height: 50vh; } /* 左右圖撐滿 >> #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block { flex: 1; display: flex; align-items: stretch; min-width: 585px; min-width: 615px; } /* 加 Youtube Url 圖片的 a.play_btn (.No-Margin-Layout + .Enlarge-Legacy-Rich-Content) >> #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 所有圖片 play button */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section .image_block a.play_btn { display: flex;/* 不用 flex 黑色會突出畫面 */ } /* #Icon 防止居中(針對圖上/下)滿版 Icon 太大 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Icon .Rich-Content-Section.image_bottom .col-md-12.image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Icon .Rich-Content-Section.image_top .col-md-12.image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Icon.Rich-Content-Section.image_bottom .col-md-12.image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Icon.Rich-Content-Section.image_top .col-md-12.image_block { width: 90%; } /* 圖片縮小 >> .Image-Block-Scale-Down >> 如 #All-in-One */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section section.Image-Block-Padding .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.No-Margin-Layout.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.Image-Block-Padding .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section.Image-Block-Padding .Rich-Content-Section .image_block { margin: 0 auto; padding: 7% 10% 6%; padding: 1% 10% 5.5%; } } /* 1500 以上 */ @Media (min-width: 1500px) { /* P 描述 (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .col-md-12 p/* 圖文上下 */ { padding: 0 17% !important; } /* #Product-Comparison >> Table 被 P 包起來描述 (.col-md-12 圖文上下) >> 不要 Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section.image_bottom p { padding: 0 0% !important; } /* for #Main-Banner >> 長描述文 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top .col-md-12 p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom .col-md-12 p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section #Main-Banner.Rich-Content-Section.image_bottom p { padding: 0 6% !important; text-align: left !important; } /* P 描述左右空間縮短 (.col-md-12 圖文上下) >> 縮短描述左右空間 (.Longer-Description) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.Longer-Description .All-Rich-Content-Section .image_top p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.Longer-Description .All-Rich-Content-Section .image_bottom p { padding: 0 5% !important; } } /* Bowei 筆電寬螢幕 */ @Media (min-width: 1281px) and (max-width: 1366px) { /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { height: 63vh; } } @media (max-width: 1023px) { /* H3 文字大小 (所有) */ .single-product .All-Rich-Content-Section section.Simple-Rich:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3, p):not(h2 + h3), section.Simple-Rich:has([class*="markets-solutions-"]) :is(h2, h3, p), section.Simple-Rich:has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3/* 上下圖文 */ { font-size: 2.2em; } /* 所有 Full Wide Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .row.Rich-Content-Section { margin-left: 0; margin-right: 0; } /* .wording_block (.No-Margin-Layout) >> 所有 Full Wide Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-5.wording_block { padding-left: 5%; padding-right: 5%; padding-bottom: 5%; } /* .image_block + .wording_block (.No-Margin-Layout) >> 所有 Full Wide Rich Content */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-12.wording_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .col-md-6.image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .image_block { padding-right: 0; padding-left: 0; } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section #Form-for-Leads.Rich-Content-Section { padding: 5% 0 0%;/* 底部有顏色時會漏餡 */ } /* .No-Margin-Layout >> 表單區(#Form-for-Leads) + Product Comparision (比較) + package-content >> 最後三區距離 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .package-content { margin-top: 5%; } } @media (max-width: 820px) { /* 所有圖文間距歸零 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block/* 圖左文右 */ { padding-left: 0% !important; padding-right: 0% !important; padding-bottom: 0% !important; } /* 圖右文左 (.image_right) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block {} /* 圖下文上 (.image_bottom) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block {} /* 圖上文下 (.image_top) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block {} /* 所有圖文 H3 & P >> 左右間距 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h3/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h3/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h3/* 圖左文右 */ { padding-left: 5% !important; padding-right: 5% !important; } /* 所有圖文 P >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */ { margin-bottom: 3% !important; margin-bottom: 10% !important; } /* 圖右文左 H3 (.image_right) >> 上間距 >> 用 H3 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3 { margin-top: 7% !important; } /* 圖右文左 P (.image_right) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p { margin-bottom: 6% !important; } /* 圖左文右 (.image_left) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block/* 圖左文右 */ { padding-bottom: 9%; padding-top: 1%; } /* 圖下文上 P (.image_bottom / 包含 Html Code 時) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block > div > div:first-child > p, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block > div > p { margin-bottom: 5% !important; margin-bottom: 8% !important; } /* 圖上文下 P (.image_top / 包含 Html Code 時) >> 下間距 >> 用 P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block > div > p { margin-bottom: 10% !important; } /* 圖上文下 (.image_top) >> 上間距 */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12 > h3 { margin-top: 7%; } } @media (max-width: 768px) { /* 圖片 >> 刪除 margin-bottom */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section img { margin-bottom: 0px !important; } .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul { margin: 10px auto 25px; } .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul li { margin-bottom: 5px; } } /* 480 以下 */ @Media (max-width: 480px) { /* 所有圖文 H3 & P >> 左右間距 >> 用 H3 + P 去做間距 (*** 因為有時 .wording_block 會包 Html Code, 此時間距會顯示在 Html Code 外部而非文字而已) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block div ul/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block div ul/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block div ul/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block div ul/* 圖左文右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h3/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h3/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h3/* 圖左文右 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_top .col-md-12.wording_block h4/* 圖上文下 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_bottom .col-md-12.wording_block h4/* 圖下文上 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .col-md-5.wording_block h4/* 圖右文左 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .col-md-5.wording_block h4/* 圖左文右 */, /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 1. 圖上文下、圖下文上 >> 寬欄 (col-md-12) >> 直接子元素 (p, h3, h4) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_top, .image_bottom) .col-md-12.wording_block :is(p, h3, h4), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 2. 圖上文下、圖下文上 >> 寬欄 (col-md-12) >> div 內的 ul */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_top, .image_bottom) .col-md-12.wording_block div :is(ul), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 3. 圖左文右、圖右文左 >> 窄欄 (col-md-5) >> 直接子元素 (p, h3, h4) */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) .col-md-5.wording_block :is(p, h3, h4), /* >> [-- 4年前瀏覽器不支援 :is() 寫法 --] 4. 圖左文右、圖右文左 >> 窄欄 (col-md-5) >> div 內的 ul */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section:is(.image_right, .image_left) .col-md-5.wording_block div :is(ul) { padding-left: 7% !important; padding-right: 7% !important; } /* H3 文字大小 (所有) */ .single-product .All-Rich-Content-Section section.Simple-Rich:has(.home_spot_light, .home_news, .home_channel_videos, .home_promotion_top, .home_promotion_bottom) :is(h2, h3, p):not(h2 + h3), section.Simple-Rich:has([class*="markets-solutions-"]) :is(h2, h3, p), section.Simple-Rich:has(.markets-top-banner.richcontent .text-block) .wording_block :is(h3), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_bottom h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3/* 上下圖文 */ { font-size: 1.9em; margin-top: 8%; } /* 左右圖最外框 + .image_block 高度 (.No-Margin-Layout) >> #overview-tab.Enlarge-Legacy-Rich-Content 下 >> 圖文左右 .Rich-Content-Section */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section .Rich-Content-Section.image_left { /* height: 35vh; */ } .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left), .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left) { text-align: left !important; } } /* ============================= (for Avalade) 新版 Product Page (Dynamic 模組 >> 沒滿版時 ) >> 僅 Overview 豐富圖文區 =================================== 【Dynamic 模組 >> 沒滿版時 section.Section-Radius:not(.Full-Width-Container) (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) ============================================================================================================================= */ /* Dynamic 模組 >> 沒滿版時 >> section.with-BG.BG-Bottom >> .RC_BG 有底圖 >> 排版居中時 */ .single-product #overview-tab.tab-content section.with-BG.BG-Bottom:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .RC_BG:has(.text_block_top-center, .text_block_bottom-center) { background-size: 100%; background-position: bottom; } /* Dynamic 模組 >> 沒滿版時 >> section.with-BG.BG-Bottom >> .RC_BG 有底圖 >> h4 */ .single-product #overview-tab.tab-content section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) h4, .single-product #overview-tab.tab-content section:is(.BG-Black, .BG_Black, .BG-Dark, .BG-BlueM, .BG-Blue-Dark, .BG-GreyDK, .BG-GreySDK, .BG-GreyMDK) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block h4 { color: #c7c9ca !important; font-weight: 400 !important; } /* ======================================================================================================================== 【Multi-Language_Modify】 >> Adjustment for All Page (多國別語言 / 客製內容修改) body[class*="locale_la-??"] #content 也可以這樣寫, ex: 若 body[class*="locale_la-"] #content, 即一起套用了 la-es & la-pt. body[class*="locale_pl-"] #content, body[class*="locale_la-"] #content, body[class*="locale_de-"] #content, body[class*="locale_es-"] #content, body[class*="locale_pt-"] #content, body[class*="locale_fr-"] #content, body[class*="locale_se-"] #content, body[class*="locale_ru-"] #content, body[class*="locale_ua-"] #content, body[class*="locale_bg-"] #content, body[class*="locale_ro-"] #content, body[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, ======================================================================================================================== */ /******************************** CN Icon Font 【簡中/ 中國大陸專用/ body.locale_cn-zh 】 **************************************/ /* 簡中一般用 (CN) >> 左箭頭(短) (All) * 範例 : body.locale_cn-zh .carousel.slide #wrapper .fa-angle-left::before */ /* 簡中用 (CN) >> Icon 套用 i 或者 .icon- */ body.locale_cn-zh #wrapper [class*="icon-"]::before, body.locale_cn-zh #wrapper [class*="icon-"]::after, body.locale_cn-zh #wrapper #wrapper [class*=" icon-"]::before, body.locale_cn-zh #wrapper #wrapper [class*=" icon-"]::after, body.locale_cn-zh #wrapper #wrapper [class*="icon-line-"]::before, body.locale_cn-zh #wrapper #wrapper [class*="icon-line-"]::after, body.locale_cn-zh #wrapper [class*=" icon-line-"]::before, body.locale_cn-zh #wrapper #wrapper [class*=" icon-line-"]::after, body.locale_cn-zh #wrapper #wrapper [class*="icon-line2-"]::before, body.locale_cn-zh #wrapper #wrapper [class*="icon-line2-"]::after, body.locale_cn-zh #wrapper #wrapper [class*=" icon-line2-"]::before, body.locale_cn-zh #wrapper #wrapper [class*=" icon-line2-"]::after, body.locale_cn-zh #wrapper .side-header #primary-menu ul > li.sub-menu > a::before, body.locale_cn-zh #wrapper .side-header #primary-menu ul > li.sub-menu > a::after { font-family: 'font-icons','Lato' !important; } /* 簡中用 (CN) >> Icon 套用 FontAwesome */ body.locale_cn-zh #wrapper .fa::before, body.locale_cn-zh #wrapper .fa::after, body.locale_cn-zh #wrapper .fas::before, body.locale_cn-zh #wrapper .fas::after { font-family: 'FontAwesome' !important; } /* 簡中用 (CN) >> Icon 套用 FontAwesome 5 Brands */ body.locale_cn-zh #wrapper .fab::before, body.locale_cn-zh #wrapper .fab::after { font-family:"Font Awesome 5 Brands" !important; } /* 簡中用 (CN) >> Icon 套用 FontAwesome 5 Free */ body.locale_cn-zh #wrapper .fa_v5::before, body.locale_cn-zh #wrapper .fa_v5::after, body.locale_cn-zh #wrapper .far::before, body.locale_cn-zh #wrapper .far::after, body.locale_cn-zh #wrapper .fas_v5::before, body.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) >> 左箭頭 + 右箭頭 (短) (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-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, 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 { } /******************************** 【 US3311 客製 (CPC Theme Meeting) >> for Avalade_滿版 Product Page (架構 .cd-section.container-fluid)】【 Avalade 模組化後】 **************************************/ .single-product .US3311 section#Youtube-Lazy_Video-1 { margin-top: 2.5%; } /* 【 (US3311 客製) #Drag-for-Comparison (有背景) >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content.No-Line-Section .All-Rich-Content-Section section#Drag-for-Comparison .Full-Width-Container { padding: 2.5% 0 2%; margin: 3.5% 0 5.5%; } /* 【 (US3311 客製) #Drag-for-Comparison (淺灰背景) >> for Avalade_滿版模組】 Product Page */ .single-product .US3311 .All-Rich-Content-Section section#Drag-for-Comparison { background-color: rgba(243, 244, 246, 0.999); } /* 【 (US3311 客製) #Drag-for-Comparison >> for Avalade_滿版模組】 Product Page */ #overview-tab.tab-content .All-Rich-Content-Section section#Drag-for-Comparison .Full-Width-Container .twentytwenty-wrapper.twentytwenty-horizontal:not(.ATEN-Blue-Brand-Color #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .twentytwenty-wrapper.twentytwenty-horizontal), #overview-tab.tab-content .All-Rich-Content-Section section#Drag-for-Comparison .Full-Width-Container .twentytwenty-wrapper.twentytwenty-horizontal:not(#overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .twentytwenty-wrapper.twentytwenty-horizontal) { max-width: 85%; margin: 0 auto; } /* 【 (US3311 客製) #Exceptional-AV-Performance >> for Avalade_滿版模組】 Product Page */ #overview-tab.tab-content .All-Rich-Content-Section section#Exceptional-AV-Performance { background: url('https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US3311/V02/CUT07_2000_8K_global_0308-1.png') no-repeat 50% 0% / cover; } /* 【 (US3311 客製) #Unlimited-Possibilities >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#Unlimited-Possibilities.with-BG .container { padding-top: 5%; padding-bottom: 10px; margin-bottom: 0; } /* 【 (US3311 客製) #Application-4 >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#Application-3 .container, /*.single-product #overview-tab .tab-content .All-Rich-Content-Section section[id^="Application-"]:has(.container):last-of-type .container, .single-product #overview-tab .tab-content .All-Rich-Content-Section section[id^="Application-"]:nth-last-of-type(1) .container, */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#Application-4 .container { margin-bottom: 5%; padding-bottom: 3%; } /******************************** 【 .CPC-Theme (.Grey-BG) >> Product Listing 下半部變黑色】【 Avalade 模組化後】 **************************************/ /* .CPC-Theme (.Grey-BG) >> Product Listing 下半部變黑色 */ .Invert-Color.BG_Dark .single-product #overview-tab.tab-content .All-Rich-Content-Section section.BG-GreyL .Full-Width-Container, .CPC-Theme.Invert-Color.BG_Dark #content .All-Rich-Content-Section section, .ATEN-Blue-Brand-Color #content:has(div.CPC-Theme.Invert-Color.BG_Dark), .ATEN-Blue-Brand-Color #content.CPC-Theme.Invert-Color.BG_Dark, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG_Dark #content, .Invert-Color.BG-Black .single-product #overview-tab.tab-content .All-Rich-Content-Section section.BG-GreyL .Full-Width-Container, .single-product .US3311 .All-Rich-Content-Section section#Drag-for-Comparison, .CPC-Theme.Invert-Color.BG-Black #content .All-Rich-Content-Section section, .ATEN-Blue-Brand-Color #content:has(div.CPC-Theme.Invert-Color.BG-Black), .ATEN-Blue-Brand-Color #content.CPC-Theme.Invert-Color.BG-Black, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content { background-color: rgba(0, 0, 0, 1.0) !important; } /* 標題變白色 */ .CPC-Theme.Invert-Color.BG-Black #content .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section h3:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section h3):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section h3), .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .single-product .product-detail-price small, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .single-product .product-detail-price h1 { color: #fff !important; color: rgba(255, 255, 255, 1.0) !important; } /* 小標題變灰色 -1 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .tab-content.features-abstract li { color: rgba(255, 255, 255, 0.85) !important; } /* 小標題變灰色 -2 */ .CPC-Theme.Invert-Color.BG-Black #content .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section p:not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Form-for-Leads.Rich-Content-Section p):not(.single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content #Contact-Us_Get-Quote.Rich-Content-Section p) { color: rgba(255, 255, 255, 0.75) !important; } /* 小標題變灰色 - 3 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .single-product .product-desc .msrp, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content span.Product-Name_Special-Char, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content #product_detail .breadcrumb a span, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content #product_detail .breadcrumb a { color: #5c5e60 !important; color: rgba(92, 94, 96, 1.0) !important; color: rgba(255, 255, 255, 0.6) !important; } /* a 變亮藍色 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .share a.comparison_block, .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .tab-content.features-abstract li a { color: #02dfff !important; } /* Line 變暗色 -1 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .certification { /* border: 1px solid rgba(255, 255, 255, 0.6) !important; */ } /* Line 變暗色 -2 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .slider-wrap { border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* 被景色變黑色 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .slider-wrap { background-color:rgba(0, 0, 0, 1.0) ; } /* 圖片變正常 */ .ATEN-Blue-Brand-Color .CPC-Theme.Invert-Color.BG-Black #content .flexslider .slider-wrap > .slide { mix-blend-mode: multiply; mix-blend-mode: unset; } /************************************************************************************************************************* ( B2C Style ). 【 Rich_Content/ .Full_Width_Rich_Content (Dynamic 一般模組豐富圖文) 】 產品單頁面 (.B2C-Style >> 2025) ======================================================================================================================== */ /* .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block:not(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) { margin-bottom: 50px; /* 原來的 */ margin: 0 auto 50px; } /* Child 有第二層文字時 .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { margin: 50px auto; margin-bottom: 0px; } /* .title_bold (h3 >> 粗 500) */ body .single-product #overview-tab.tab-content section[class*="title_bold"] .markets-top-banner.richcontent .text-block .wording_block :is(h3), body .single-product #overview-tab.tab-content section.title_bold .markets-top-banner.richcontent .text-block .wording_block :is(h3) { font-weight: 500 !important; } /* .title_bold-6w (h3 >> 粗 600) */ body:not(.locale_tw-zh, .locale_jp-ja, .locale_kr-ko, .locale_cn-zh) .single-product #overview-tab.tab-content section.title_bold-6w .markets-top-banner.richcontent .text-block .wording_block :is(h3) { font-weight: 600 !important; } /* .Subtitle_bold-4w (h4 >> 粗 400) */ body .single-product #overview-tab.tab-content section.Subtitle_bold-4w .markets-top-banner.richcontent .text-block .wording_block :is(h4) { font-weight: 400 !important; } /* h4 >> 移除原本的右邊距離) */ .single-product #overview-tab.tab-content section .markets-top-banner.richcontent .text-block .wording_block :is(h4) { margin-right: 0 !important; } /* 字陰影 (.Dark_Theme >> h3) */ .single-product #overview-tab.tab-content section.Dark_Theme .markets-top-banner.richcontent .text-block .wording_block :is(h3) { text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9); text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } /* 字陰影 (.Dark_Theme >> h4/ p) */ .single-product #overview-tab.tab-content section.Dark_Theme .markets-top-banner.richcontent .text-block .wording_block :is(h4, p) { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); } /* .wording_block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */ .single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block { /* transform: translateY(-100%); */ } /* .wording_block (.Transform-to-Bottom 文字區左右時 >> .wording_block 強制移動到下方 ) */ .single-product #overview-tab.tab-content section.Transform-to-Bottom .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block { /* transform: translateY(100%); */ } /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; padding: 32px 15px; padding: 40px 35px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 32px 15px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 40px 35px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ } /* .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* .Dark-Mode .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* .text_block-Higher >> Dynamic Rich Content */ .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block { padding: 9.3rem 0; padding: 150px 0; padding: 150px 15px; } /* .Dark-Mode >> .text_block-Higher >> Dynamic Rich Content */ .Dark-Mode .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block {} /* .Orange-Subtitle + .Orange-Title (一般橘色) >> H4/ H3 */ /* H3 */ section#content .single-product .All-Rich-Content-Section section.Orange-Title:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h3):not(section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3), section.Orange-Title :is(h3):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.modal h4):not(section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-Title .Rich-Content-Section .carousel.slide .carousel-inner h3), /* H4 */ section#content .single-product .All-Rich-Content-Section section.Orange-Subtitle:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h4), section.Orange-Subtitle :is(h4):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h3):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.well-compare h3):not(.modal h4) { color: #ff6a13 !important;/* 黑底時 */ color: rgba(255, 106, 19, 1.0) !important;/* 黑底時 */ opacity: 1.0; } /* .Orange-SubtitleY (亮橘色) >> H4 */ /* H3 */ section#content .single-product .All-Rich-Content-Section section.Orange-TitleY:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h3):not(section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3), section.Orange-TitleY :is(h3):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.modal h4):not(section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3, .Dark-Mode section.Orange-TitleY .Rich-Content-Section .carousel.slide .carousel-inner h3), /* H4 */ section#content .single-product .All-Rich-Content-Section section.Orange-SubtitleY:is(.color_white, .BG_Dark, .BG-Dark, .BG-Black, .BG_Black, .BG-GreyBK, .BG-GreyDK, .BG-GreySDK) :is(h4), section.Orange-SubtitleY :is(h4):not(.Rich-Content-Section h1):not(.Rich-Content-Section h2):not(.Rich-Content-Section h3):not(.Rich-Content-Section h4):not(.product-snippet .col-md-3 h2.subtitle):not(#primary-menu h2.mega-menu-advertisement-title):not(.well-compare h3):not(.modal h4) { color: #f9bf30 !important;/* 黑底時 */ color: rgba(249, 191, 48, 1.0) !important;/* 黑底時 */ opacity: 1.0; } /* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 85%; } /* (.section_block-Higher) 僅上方是 Legacy >> 下方 Dynamic Rich Content */ .single-product #overview-tab.tab-content section.section_block-Higher:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block, .single-product #overview-tab.tab-content section:has(.container .Rich-Content-Section[class*="image_"]) + section.section_block-Higher { margin-top: 2rem; margin-top: 32px; margin-bottom: 1rem; margin-bottom: 16px; } /* 768 以上 */ @media (min-width: 768px) { /* .text-block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */ .single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) { /* transform: translateY(-100%); */ display: flex; align-items: flex-start;/* 對齊上左 */ } /* .text-block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */ .single-product #overview-tab.tab-content section.Transform-to-Bottom .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) { /* transform: translateY(-100%); */ display: flex; align-items: flex-end;/* 對齊上左 */ } } /* 981 以上 */ @media (min-width: 981px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } /* 副標標題變大要較小 (.Subtitle_Large-Small/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 1.25rem !important; font-size: 20px !important; } /* 副標標題變大要較小 (.Subtitle_Large-Small/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large-Small .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 1.5rem !important; font-size: 24px !important; } /* 副標標題變大 (.Subtitle_Large/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 2em !important; font-size: 2rem !important; font-size: 32px !important; } /* 副標標題 >> 標題變中大 (.Subtitle_Large-Middle/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large-Middle .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 2.3em !important; font-size: 36.8px !important; line-height: 1.3em; } /* 副標標題 >> 標題再變大 (.Subtitle_Large-More/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large-More .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 3rem !important; font-size: 48px !important; line-height: 1.2em; } /* 副標標標題標題 >> 變中大 + 再變大 (.Reduce-Bottom-Space_Title/ Middle / Large-More / 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Reduce-Bottom-Space_Title .markets-top-banner.richcontent .text-block .wording_block h3 { padding-bottom: 2px; } /* 副標標題 >> 標題變小 (.Subtitle_Small/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section[class*="Subtitle_Large-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section[class*="Subtitle_Large-"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size) { font-size: 16px !important; font-size: 1rem !important; line-height: 1.5em; } /* 副標標題 >> 標題變小 (.Subtitle_Small/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.small-size), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.small-size) { font-size: 15px !important; font-size: 1em !important; font-size: 1rem !important; } } /* 1024 以上 */ @media (min-width: 1024px) { /* 字靠左 (h4 span.text-left) */ .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.text-left) { text-align: left; } /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } } /* 1200 以上 */ @media (min-width: 1200px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } } /* 1367 以上 */ @Media (min-width: 1367px) { /* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 75%; } /* 副標標題 >> 標題變小 (.Subtitle_Small/ 一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section[class*="Subtitle_Large-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section[class*="Subtitle_Large-"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size), .single-product #overview-tab.tab-content section .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size) { font-size: 21px !important; font-size: 1.25rem !important; line-height: 1.5em; line-height: 2rem; font-size: 1.1rem !important; line-height: 1.6em; } } /* 1500 以上 */ @media (min-width: 1500px) { /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; padding: 32px 15px; padding: 40px 35px; padding: 50px 45px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 32px 15px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 40px 35px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 50px 45px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* 主標標題變大 (.title_XLarge/ 一般標題 + Rich Content 標題) */ section.title_XLarge [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_XLarge .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.75rem !important; font-size: 60px !important; line-height: 1.4em; line-height: 1.3em; } /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.5rem !important; font-size: 55px !important; font-size: 3.6rem !important; font-size: 57px !important; line-height: 1.4em; line-height: 1.3em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.2rem !important; font-size: 53px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3rem !important; font-size: 48px !important; line-height: 1.4em; } } /* 1920 以上 */ @media (min-width: 1920px) { /* .BG-Size_90/ .BG-Size_90_Child-1~6 >> 適用於所有.RC_BG */ .single-product #overview-tab.tab-content section.BG-Size_90_Child-6 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(6) .RC_BG.child-bg, .single-product #overview-tab.tab-content section.BG-Size_90_Child-5 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(5) .RC_BG.child-bg, .single-product #overview-tab.tab-content section.BG-Size_90_Child-4 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(4) .RC_BG.child-bg, .single-product #overview-tab.tab-content section.BG-Size_90_Child-3 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(3) .RC_BG.child-bg, .single-product #overview-tab.tab-content section.BG-Size_90_Child-2 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(2) .RC_BG.child-bg, .single-product #overview-tab.tab-content section.BG-Size_90_Child-1 .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(1) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-6) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(6) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-5) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(5) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-4) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(4) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-3) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(3) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-2) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(2) .RC_BG.child-bg, .single-product section:is(.BG-Size_90_Child-1) .Multi_Rich_Content_Child .markets-top-banner.richcontent:nth-child(1) .RC_BG.child-bg, .single-product section:is(.BG-Size_90) .markets-top-banner.richcontent .RC_BG { background-size: 90%; } /* (.section_block-Higher) 僅 Legacy 的【.container】不滿版的 section 的上一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic 模組) >> Dynamic 是沒有 HR Line 距離 >> 自己加入 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications) + section.cd-section.section_block-Higher:has(.container), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full_Width_Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)) { margin-top: 7rem; margin-top: 112px; margin-bottom: 1rem; margin-bottom: 16px; } /* (.section_block-Higher) 僅上方是 Legacy >> 下方 Dynamic Rich Content */ .single-product #overview-tab.tab-content section.section_block-Higher:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block, .single-product #overview-tab.tab-content section:has(.container .Rich-Content-Section[class*="image_"]) + section.section_block-Higher { margin-top: 2rem; margin-top: 32px; margin-bottom: 1rem; margin-bottom: 16px; } /* .text_block-Higher (加高上下距離/ 原來是 100px) */ .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center), .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block { padding: 150px 0; } /* .wording_block (.Narrow-Space 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block, .single-product #overview-tab.tab-content section.Narrow-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 60%; } /* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 59%; } /* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 80%; } /* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 85%; } /* 主標標題變更大 (.title_XLarge/ 一般標題 + Rich Content 標題) */ section.title_XLarge [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_CLarge .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 4.4rem !important; font-size: 70px !important; line-height: 1.3em; line-height: 1.4em; } /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 4.1rem !important; font-size: 65px !important; line-height: 1.3em; line-height: 1.4em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.5rem !important; font-size: 55px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3rem !important; font-size: 48px !important; line-height: 1.4em; } } /* 1921 以上 */ @media (min-width: 1921px) { /* 主多模塊 (滿版) >> .text_block_top-center / .text_block_top-bottom */ .single-product #overview-tab.tab-content section .Multi_Rich_Content.Full_Width_Rich_Content.Full-Width-Container .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"], .single-product #overview-tab.tab-content section .Multi_Rich_Content[class*="_Rich_Content"] .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"] { padding-left: 20% !important; padding-right: 20% !important; } /* 主多模塊 (描述長/ 滿版) >> .text_block_top-center / .text_block_top-bottom >> 描述長 */ .single-product #overview-tab.tab-content section.Long-Des .Multi_Rich_Content.Full_Width_Rich_Content.Full-Width-Container .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"], .single-product #overview-tab.tab-content section.Long-Des .Multi_Rich_Content[class*="_Rich_Content"] .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"] { padding-left: 15% !important; padding-right: 15% !important; } } @media (min-width: 1200px) and (max-width: 1920px) { .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block { width: 100% !important; } } /* 2000 以上 */ @media (min-width: 2000px) { /* .wording_block (.Narrow-Space 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block, .single-product #overview-tab.tab-content section.Narrow-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 52%; } /* .wording_block (.Narrow-Space-Small 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 51%; } /* .wording_block (.Narrow-Space-Large 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 70%; } /* .wording_block (.Narrow-Space-Large-More 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 80%; } } @media (min-width: 1921px) and (max-width: 2560px) { /* 主多模塊 (滿版) >> .text_block_top-center / .text_block_top-bottom */ .single-product #overview-tab.tab-content section.Multi_Rich_Content.Full_Width_Rich_Content.Full-Width-Container .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"], .single-product #overview-tab.tab-content section.Multi_Rich_Content[class*="_Rich_Content"] .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"] { padding-left: 20% !important; padding-right: 20% !important; } /* 主多模塊 (描述長/ 滿版) >> .text_block_top-center / .text_block_top-bottom >> 描述長 */ .single-product #overview-tab.tab-content section.Long-Des .Multi_Rich_Content.Full_Width_Rich_Content.Full-Width-Container .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"], .single-product #overview-tab.tab-content section.Long-Des .Multi_Rich_Content[class*="_Rich_Content"] .markets-top-banner.richcontent .Multi_Rich_Content_Main .text-block[class*="text_block_top-"] { padding-left: 15% !important; padding-right: 15% !important; } } /* 1370 以下 */ @media (max-width: 1370px) { /* Child 有第二層文字時 .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { margin-top: 0px; margin-bottom: 0px; } } /* 筆電寬螢幕 1281~1366px */ @Media (min-width: 1281px) and (max-width: 1366px) { /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; padding: 32px 15px; padding: 40px 35px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 2rem 0; padding: 32px 0; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 32px 15px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ padding: 40px 35px; /* 因為底全黑沒有區塊分隔 >> 間距不用太高 */ } /* .Reduce-Text-Block-Space >> Dynamic Rich Content >> 第二個子層 >> */ .Dark-Mode .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .text-block:has(.wording_block h4 .default-size) { padding: 30px 25px; } /* Child 有第二層文字時 .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { margin-top: 0px; margin-bottom: 0px; } /* 主標標題變更大 (.title_XLarge/ 一般標題 + Rich Content 標題) */ section.title_XLarge [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_XLarge .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_XLarge .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.2rem !important; font-size: 52px !important; line-height: 1.3em; line-height: 1.2em; } /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ section.title_Large [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ section.title_Middle [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ section.title_Small [class*="markets-solutions-"] h2, .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } .single-product #overview-tab.tab-content section:is([class*="Same-Height_100VH_"], [class*="Same-Height_90VH_"], [class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) img, .single-product #overview-tab.tab-content section:is([class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) img { height: 30vh; } } /* 筆電寬螢幕 1200~1366px */ @Media (min-width: 1200px) and (max-width: 1366px) { .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block { width: 100% !important; } } /* 979 以下 */ @Media (max-width: 979px) { /* 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG { height: auto !important; min-height: 60vh !important; min-height: 45vh !important; } } /* 820 以下 */ @Media (max-width: 820px) {} /* 768 以下 */ @Media (max-width: 768px) { /* 透明物件消失 */ .single-product #overview-tab.tab-content section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) { display: none; } /* 透明物件 >> 有 a 連結不能消失 */ .single-product #overview-tab.tab-content section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(a img[src*="Transparent_"]) { display: block; } /* section[class*="Same-Height"] >> 背景統一 */ .single-product #overview-tab.tab-content section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG { background-size: 100%; background-position: bottom; } /* #RC_in-Box >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_in-Box:has(.wording_block h3.color_white) .Multi_Rich_Content_Child .RC_BG.child-bg { background-color: rgba(58, 58, 58, 1.0); background-color: #969696; background-position: bottom !important; background-size: 140% !important; } /* 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG { height: auto !important; min-height: unset !important; } } /* 480 以下 */ @Media (max-width: 480px) { span.notice-dec, .B2C-Style span.notice-title { font-size: 11px !important; } span.notice-dec { width: 85%; } /* US5342 >> 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG, .single-product section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG { height: auto !important; min-height: unset !important; min-height: 46vh !important; min-height: 45vh !important; } /* 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG {} /* 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .text-block >> padding 一致 */ .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product section[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product section[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product section[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { padding: 40px 4% !important; } /*.single-product section[class*="Same-Height"].Rich-Content_Video-Object .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG video,*/ .single-product section[class*="Same-Height"].Rich-Content_Video-Object .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video { min-height: 35vh !important; bottom: 0;/* Video 當作影片物件非背景 */ } /* 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg:has(.text-block .wording_block h4) video, .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block:has(.wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg:has(.text-block .wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block:has(.wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG:has(.text-block .wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block:has(.wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG:has(.text-block .wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .markets-top-banner.richcontent .RC_BG .text-block:has(.wording_block h4), .single-product section[class*="Same-Height"][class*="Subtitle_Large-Small-"] .markets-top-banner.richcontent .RC_BG:has(.text-block .wording_block h4) { min-height: 50vh !important; } /* (Text Block 左右) .Reduce-Text-Block-Space >> Dynamic Rich Content */ .B2C-Style .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right):has(h4 span.default-size) { padding-top: 10px !important; } /* (Text Block 上下) .Reduce-Text-Block-Space >> Dynamic Rich Content */ .B2C-Style .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center):has(h4 span.default-size) { padding-top: 0px !important; } .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block:is(.text_block_top-left) div[class*="col-"] { float: left; margin-left: 4%; margin-left: 5%; } /* .wording_block (.Narrow-Space-Small/ Large/ Large-More >> 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block, .single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block, .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { width: 100%; } /* .wording_block (.Narrow-Space-Small/ Large/ Large-More >> 文字區變窄/ 文上下) */ .single-product #overview-tab.tab-content section.Narrow-Space-Large-More .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block:has(h4 span.default-size), .single-product #overview-tab.tab-content section.Narrow-Space-Large .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block:has(h4 span.default-size), .single-product #overview-tab.tab-content section.Narrow-Space-Small .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block:has(h4 span.default-size) { width: 85%; } /* Transform-to-Top_Child */ .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .markets-top-banner.richcontent .text-block:is(.text_block_top-left) .wording_block :is(h3, h4) { text-align: left !important; } /* Transform-to-Top_Child */ .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block:is(.text_block_top-right) div[class*="col-"] { /* float: right; */ } /* Transform-to-Top_Child */ .single-product #overview-tab.tab-content section[class*="Transform-to-Top_Child"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block{ width: 100% !important; } .single-product #overview-tab.tab-content section.section_block-Higher:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications) + section.cd-section.section_block-Higher:has(.container), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full_Width_Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Rich_Content) + section.cd-section.section_block-Higher:has(.container):not(:has(.Rich_Content .container)) { margin-top: 2rem; margin-top: 30px; margin-bottom: 1rem; margin-bottom: 20px; } /* .Reduce-Text-Block-Space >> Dynamic Rich Content */ .single-product #overview-tab.tab-content section.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .Dark-Mode .single-product #overview-tab.tab-content section.text_block-Higher .markets-top-banner.richcontent .text-block { padding: 2rem 0; padding: 2rem 1.2rem; } /* .wording_block (.Transform-to-Top 文字區左右時 >> .wording_block 強制移動到上方 ) */ .single-product #overview-tab.tab-content section.Transform-to-Top .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right) .wording_block { transform: unset; } /* 所有 Dynamic Template 模組 >> 標題 Title (H3/ H2) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) :is( .markets-top-banner.richcontent h3.RC_LTitle, .markets-solutions-recommend-products, .markets-solutions-overview h2, .markets-solutions-applications h2, .markets-solutions-benefits h2, .home_spot_light h2, .home_promotion_top h2, .home_channel_videos h2), /* 非滿版時 >> 所有 Dynamic Template 模組 >> 標題 Title (H3/ H2) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section :is( .markets-top-banner.richcontent h3.RC_LTitle, .markets-solutions-recommend-products, .markets-solutions-overview h2, .markets-solutions-applications h2, .markets-solutions-benefits h2, .home_spot_light h2, .home_promotion_top h2, .home_channel_videos h2), /* 非滿版時 >> Legacy */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Rich_Content, .Rich-Content-Section, .Rich-Content-Section.image_top) h3:not(.carousel-caption) { font-size: 34px !important; text-align: center !important; font-size: 34px !important; font-size: 1.8rem !important; font-size: 29px !important; line-height: 1.4em; } /* (.Reduce-Image-Block-Height/ 透明圖檔稱高度時) 縮減一般 .image_block 高度縮減 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section.Reduce-Image-Block-Height .markets-top-banner.richcontent .image_block { max-height: 295px; max-height: 35vh; } /* (.Reduce-Image-Block-HeightX/ 透明圖檔稱高度時) 縮減更多 .image_block 高度縮減 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section.Reduce-Image-Block-HeightX .markets-top-banner.richcontent .image_block { text-align: center; max-height: 175px; max-height: 20vh; max-height: 215px; max-height: 26vh; } .single-product section[class*="Same-Height"] .markets-top-banner.richcontent h3.RC_LTitle { padding-bottom: 10px; } /* 所有 Dynamic Template 模組 >> 加大副標題 Large Title (的 H3) >> 底部縮減 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h3 { padding-bottom: 0.4rem; padding-bottom: 7px; } /* 所有 Dynamic Template 模組 >> 副標題 Subtitle (H4) */ /* Full Width Rich Content */ .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4, /* 非滿版時 >> 所有 Dynamic Template 模組 >> 副標題 Title (H4) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4, /* 非滿版時 >> Legacy */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section .Rich-Content-Section.image_top .carousel-caption h3, .single-product #overview-tab.tab-content .All-Rich-Content-Section:has(.Full_Width_Rich_Content, .Full-Width-Container, .Full_Width_Rich_Content.Full-Width-Container) section:has(.Rich_Content, .Rich-Content-Section):is(.Subtitle_Large, .Subtitle_Large-Middle, .Subtitle_Large-More) h4 { font-size: 1.3rem !important; font-size: 21px !important; line-height: 1.4em; font-size: 1.4rem !important; font-size: 22px !important; font-size: 1rem !important; font-size: 16px !important; font-size: 0.95rem !important; font-size: 15px !important; } .B2C-Style.Mobile-Layout .single-product .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .markets-top-banner.richcontent .text-block .wording_block h4, .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .markets-top-banner.richcontent .text-block .wording_block h4, .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4, .single-product #overview-tab.tab-content section.Subtitle_Large-Small-2 .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4, .B2C-Style.Mobile-Layout .single-product #overview-tab.tab-content section .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left), .Mobile-Layout .single-product #overview-tab.tab-content section .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left), .Multi_Rich_Content_Child .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left), .Multi_Rich_Content_Main .markets-top-banner.richcontent .text-block .wording_block h4:has(span.default-size.text-left) { text-align: left !important; } } /******************************************************************************************************************************************************************************** (.B2C Style) (針對 CPC 產品客製化/ .Orange-Theme.Dark-Mode)【 Rich_Content/ .Full_Width_Rich_Content (Dynamic 一般模組豐富圖文) 】 產品單頁面 (.B2C-Style >> 2025) ============================================================================================================================================================================== */ /* US5342 >> #RC_Sleek-Compact_Accent-Light >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is(.BG-GreyMDK_Child) .Multi_Rich_Content_Child .RC_BG.child-bg/* Child >> .RC_BG */, .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is(.BG-GreyMDK) { background-color: rgba(48, 48, 48, 1.0); background-color: #303030; } /* US5342 >> #RC_Sleek-Compact_Accent-Light 的 #Child_accent-light >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is(.BG-GreyMDK_Child) .Multi_Rich_Content_Child #Child_accent-light .RC_BG.child-bg { background-color: rgba(58, 58, 58, 1.0); background-color: #3a3a3a; } /* US5342 >> (手) #RC_Sleek-Compact_Accent-Light 的 #Child_sleek-compact-portable_hand >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is(.BG-GreyMDK_Child) .Multi_Rich_Content_Child #Child_sleek-compact-portable_hand .RC_BG.child-bg { background-color: rgba(30,30,30, 1.0); background-color: #1e1e1e; } /* US5342 >> #RC_Sleek-Compact_Accent-Light >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_in-Box:has(.wording_block h3.color_white) .Multi_Rich_Content_Child .RC_BG.child-bg { background-color: rgba(58, 58, 58, 1.0); background-color: #969696; } /* US5342 >> #RC_8K-HDR 的 >> BG Color >> 變深灰色 -2 */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_8K-HDR .Multi_Rich_Content_Child .RC_BG.child-bg { background-color: rgba(18, 18, 18, 1.0); background-color: #121212; background-color: #000; } /* 1370 以下 */ @media (max-width: 1370px) { /* Child 有第二層文字時 .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .wording_block { margin-top: 0px; margin-bottom: 0px; } } /* 筆電寬螢幕 1281~1366px */ @Media (min-width: 1281px) and (max-width: 1366px) { .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:is([class*="Same-Height_100VH_"], [class*="Same-Height_90VH_"], [class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) img { height: 30vh; } } /* 筆電寬螢幕 1200~1366px */ @Media (min-width: 1200px) and (max-width: 1366px) {} /* 979 以下 */ @Media (max-width: 979px) { /* US5342 >> 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG { height: auto !important; min-height: 60vh !important; min-height: 45vh !important; } /* Child 有第二層文字時 .wording_block (.Narrow-Space 文字區中/ 文上下) */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .RC_BG:has(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product #overview-tab.tab-content section[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .RC_BG:has(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right), .single-product #overview-tab.tab-content section[class*="Narrow-Space"]:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center, .text_block_top-left, .text_block_top-right) { min-height: unset !important; } /* .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:is([class*="Same-Height_100VH_"], [class*="Same-Height_90VH_"], [class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center) .image_block:has(img[src*="Transparent_"]) img, .single-product #overview-tab.tab-content section:is([class*="Same-Height_100VH_"], [class*="Same-Height_90VH_"], [class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center) .image_block:has(img[src*="Transparent_"]) img, .single-product #overview-tab.tab-content section:is([class*="Same-Height_85VH_"]) .markets-top-banner.richcontent .RC_BG .text-block:is(.text_block_top-center, .text_block_bottom-center) .image_block:has(img[src*="Transparent_"]) img { height: 0vh !important; } */ /* #Main-Banner_KV_with-Dec >> .text-block 僅左右/ .RC_BG >> min-height >> 40vh */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) #Child_Main-KV.markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right), .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) #Child_Main-KV.markets-top-banner.richcontent .RC_BG:has(.text_block_top-left, .text_block_top-right) { min-height: 50vh !important; } /* #Main-Banner_KV_with-Dec >> .text-block 僅上下/ .RC_BG >> min-height >> 40vh */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) #Child_Main-KV.markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center), .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) #Child_Main-KV.markets-top-banner.richcontent .RC_BG:has(.text_block_top-center, .text_block_bottom-center) { min-height: 40vh !important; min-height: 45vh !important; } } /* 820 以下 */ @Media (max-width: 820px) {} /* 768 以下 */ @Media (max-width: 768px) {} /* 480 以下 */ @Media (max-width: 480px) { /* #As-Main-Title-H2 >> for HTML 模組 (補 SEO 標題結構) */ .All-Rich-Content-Section:has(section#As-Main-Title-H2 + section) section#As-Main-Title-H2 [class*="markets-solutions-"] { padding-top: 20px; padding-top: 1.5rem; padding-bottom: 1.2rem; } /* #As-Main-Title-H2.title_Small >> for HTML 模組 (補 SEO 標題結構) */ .All-Rich-Content-Section:has(section#As-Main-Title-H2 + section) section#As-Main-Title-H2.title_Small [class*="markets-solutions-"] h2 { text-align: left !important; line-height: 1.3em !important; } /* 透明物件(#Main-Banner_KV_with-Dec) >> 有 a 連結不能消失 >> 改變 Play Button::before 位置 */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(a img[src*="Transparent_"]) a.play_btn::before { background-position: 50% 25%; } /* US5342 >> 【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_Sleek-Compact_Accent-Light[class*="Same-Height_60VH"] .markets-top-banner.richcontent .RC_BG {} /* US5342 >> #RC_in-Box【.Multi_Rich_Content (多模塊狀豐富圖文/ .Same-Height_所有一律套用)】 >> 母/子模塊皆適用 >> .RC_BG + .text-block >> 高度一致 */ .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg video, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg .text-block, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG.child-bg, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Child .markets-top-banner.richcontent .RC_BG, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_in-Box[class*="Same-Height"] .Multi_Rich_Content_Main .markets-top-banner.richcontent .RC_BG, .single-product section#RC_in-Box[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block, .single-product section#RC_in-Box[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG { height: auto !important; min-height: 45vh !important; min-height: 35vh !important; } /* #RC_in-Box >> .image_block >> 圖片高度 */ .single-product #overview-tab.tab-content section#RC_in-Box[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) img, .single-product #overview-tab.tab-content section#RC_in-Box[class*="Same-Height"] .markets-top-banner.richcontent .RC_BG .text-block .image_block:has(img[src*="Transparent_"]) { display: block; height: 30vh !important; display: none !important; } /* #RC_in-Box >> BG >> 背景位置(因為主內容物不在底部) */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_in-Box:has(.wording_block h3.color_white) .Multi_Rich_Content_Child .RC_BG.child-bg { background-position: 50% 65% !important; background-size: 140% !important; background-size: 130% !important; } /* #RC_Sleek-Compact_Accent-Light */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is([class*="Same-Height_60VH"]) .Multi_Rich_Content_Child #Child_accent-light .RC_BG.child-bg, .single-product #overview-tab.tab-content .All-Rich-Content-Section section#RC_Sleek-Compact_Accent-Light:is([class*="Same-Height_60VH"]) .Multi_Rich_Content_Child .RC_BG.child-bg { background-size: cover !important; } /* #Main-Banner_KV_with-Dec >> .text-block 僅上下/ .RC_BG >> min-height >> 40vh */ .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec:has(.Multi_Rich_Content_Child .markets-top-banner.richcontent + .markets-top-banner.richcontent .wording_block) #Child_Main-KV.markets-top-banner.richcontent .RC_BG:has(.text_block_top-center, .text_block_bottom-center) { background-size: 125%; } /* (Text Block 左右) .Reduce-Text-Block-Space >> Dynamic Rich Content */ .B2C-Style .single-product #overview-tab.tab-content section#Main-Banner_KV_with-Dec.Reduce-Text-Block-Space .markets-top-banner.richcontent .text-block:is(.text_block_top-left, .text_block_top-right):has(h4 span.default-size) { padding-top: 10px !important; } .single-product #overview-tab.tab-content .Multi_Rich_Content_Child #Child_sleek-compact-portable.markets-top-banner.richcontent .text-block:is(.text_block_top-left) div[class*="col-"] { float: left; margin-left: 4%; margin-left: 5%; } /* Transform-to-Top_Child */ .single-product #overview-tab.tab-content section #Child_sleek-compact-portable.markets-top-banner.richcontent .text-block:is(.text_block_top-left) .wording_block :is(h3, h4) { text-align: left !important; } #RC_Sleek-Compact_Accent-Light div#Child_accent-light_scro_wording_block { transform: translateY(calc(55% + 1rem)); } /*********** 手機背景圖替換 ***********/ /* RC Diagram */ #RC_Diagram #Child_RC_Diagram .RC_BG, div#Child_RC_Diagram_scro_bg { /* background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_features-diagram-2.jpg) !important; background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_features-diagram-5.jpg) !important; */ } /* RC Compact_Design */ #RC_Compact_Design .RC_BG, div#RC_Compact_Design_scro_bg { /* background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_compact-2.jpg) !important; */ } /* RC Rapid-5G_Compatible-With */ #RC_Rapid-5G_Compatible-With #Child_Rapid-5G .RC_BG, div#Child_Rapid-5G_scro_bg { /* background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old_5Gbps-2.jpg) !important; */ } /* RC_in-Box */ #RC_in-Box #Child_in-Box .RC_BG, div#Child_in-Box_scro_bg { /* background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_in-box-7.jpg) !important; */ } /* RC_at-Glance */ #RC_at-Glance #Child_at-Glance .RC_BG, div#Child_at-Glance_scro_bg { /* background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_about-2.jpg) !important; background-image: url(https://uat-aten-com.s3.us-west-2.amazonaws.com/product/overview/global_en/US/US4322/Mobile/Mobile_Richcontent_Essentials_old2_about-3.jpg) !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, ======================================================================================================================== */ /* .title_bold (繁中) (h3 >> 粗 600) */ body.locale_tw-zh .single-product #overview-tab.tab-content section[class*="title_bold"] .markets-top-banner.richcontent .text-block .wording_block :is(h3), body.locale_tw-zh .single-product #overview-tab.tab-content section.title_bold .markets-top-banner.richcontent .text-block .wording_block :is(h3) { font-weight: 600 !important; } /* 981 以上 */ @media (min-width: 981px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.2em !important; font-size: 36px !important; line-height: 1.4em; } } /* 1024 以上 */ @media (min-width: 1024px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 40px !important; line-height: 1.2em; } } /* 1200 以上 */ @media (min-width: 1200px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 45px !important; line-height: 1.2em; } } /* 1200 以上 */ @media (min-width: 1500px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.5rem !important; font-size: 55px !important; font-size: 3.6rem !important; font-size: 57px !important; line-height: 1.4em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3rem !important; font-size: 50px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3rem !important; font-size: 48px !important; line-height: 1.4em; } } /* 1920 以上 */ @media (min-width: 1920px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 4.1rem !important; font-size: 65px !important; line-height: 1.3em; line-height: 1.4em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3.5rem !important; font-size: 55px !important; line-height: 1.4em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 3rem !important; font-size: 48px !important; line-height: 1.4em; } } /* 筆電寬螢幕 1281~1366px */ @Media (min-width: 1281px) and (max-width: 1366px) { /* 主標標題變大 (.title_Large/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Large [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Large .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Large .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } /* 主標標題變中大 (.title_Middle/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Middle [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Middle .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Middle .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } /* 主標標題變小 (一般原來完全不套用是 53px) (.title_Small/ 一般標題 + Rich Content 標題) */ .locale_tw-zh section.title_Small [class*="markets-solutions-"] h2, .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block h3:not(.single-product #overview-tab.tab-content section.title_Small .Rich-Content-Section.image_top .wording_block div h3), .locale_tw-zh .single-product #overview-tab.tab-content section.title_Small .markets-top-banner.richcontent .text-block .wording_block h3 { font-size: 2.7rem !important; font-size: 43px !important; line-height: 1.3em; line-height: 1.2em; } } /* ==================================== Pardot Form iFrame 改樣式用 [id*="Form_embedded"] / [id*="Form-for-"] ==================================== **** [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) **** 【 給 JS 自動偵測抓取此處 Style 並 Postmessage 給 iFrame 的 Fardot Form 】 [id*="Form-for-"] >> Product Page / Default Webpage 使用此設定跟 Pardot 交換定義樣式 [id*="Form_embedded"] >> Landing Page 使用此設定跟 Pardot 交換定義樣式 ================================================================================================================================================= */ /* All Pardot Form 父端客製化 (All) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ [id*="Form-for-"] #pardot-form.form input[type="submit"], [id*="Form-for-"] #pardot-form.form .submit input, [id*="Form_embedded"] #pardot-form.form input[type="submit"], [id*="Form_embedded"] #pardot-form.form .submit input { border-radius: 8px !important; border-radius: 30px !important; border-radius: 4px !important; border-radius: 6px; border-radius: 0.35rem; border-radius: 0.3rem; } /* All Pardot Form 父端客製化 (All) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ .B2C-Style [id*="Form-for-"] #pardot-form.form input[type="submit"], .B2C-Style [id*="Form-for-"] #pardot-form.form .submit input, .B2C-Style [id*="Form_embedded"] #pardot-form.form input[type="submit"], .B2C-Style [id*="Form_embedded"] #pardot-form.form .submit input { border-radius: 6px; border-radius: 0.35rem; border-radius: 0.3rem; } /* All Pardot Form 父端客製化 (All) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ .B2C-Style.Orange-Theme [id*="Form-for-"] #pardot-form.form input[type="submit"], .B2C-Style.Orange-Theme [id*="Form-for-"] #pardot-form.form .submit input, .B2C-Style.Orange-Theme [id*="Form_embedded"] #pardot-form.form input[type="submit"], .B2C-Style.Orange-Theme [id*="Form_embedded"] #pardot-form.form .submit input { border-radius: 6px; border-radius: 0.35rem; border-radius: 0.3rem; } /* All Pardot Form 父端客製化 (Not Hover) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ .Dark-Mode.Orange-Theme [id*="Form-for-"] #pardot-form.form input[type="submit"], .Dark-Mode.Orange-Theme [id*="Form-for-"] #pardot-form.form .submit input, .Dark-Mode.Orange-Theme [id*="Form_embedded"] #pardot-form.form input[type="submit"], .Dark-Mode.Orange-Theme [id*="Form_embedded"] #pardot-form.form .submit input { /* .Orange-Theme */ border: 2px solid #ff6a13 !important; border: 2px solid rgba(255, 106, 19, 1.0) !important; background-color: #f74f39 !important; /* 白底時 */ background-color: #ff6a13 !important; /* 黑底時 */ background-color: rgba(255, 106, 19, 1.0) !important; /* 黑底時 */ } /* All Pardot Form 父端客製化 (Hover) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ .Dark-Mode.Orange-Theme [id*="Form-for-"] #pardot-form.form input[type="submit"]:hover, .Dark-Mode.Orange-Theme [id*="Form-for-"] #pardot-form.form .submit input:hover, .Dark-Mode.Orange-Theme [id*="Form_embedded"] #pardot-form.form input[type="submit"]:hover, .Dark-Mode.Orange-Theme [id*="Form_embedded"] #pardot-form.form .submit input:hover { /* .Orange-Theme */ border: 2px solid #f9bf30 !important; border: 2px solid rgba(249, 191, 48, 1.0) !important; background-color: #f9bf30 !important; /* 強調時 */ background-color: rgba(249, 191, 48, 1.0) !important; /* 強調時 */ } /* All Pardot Form 父端客製化 (Hover) / [id*="Form-for-"] 跟 [id*="Form_embedded"] 不能改動(要完全一樣) >> All Button (變圓角 for Campaign) > Banner & Rich Content */ .Dark-Mode.Orange-Theme .single-product [id*="Form-for-"] #pardot-form.form input[type="submit"]:hover, .Dark-Mode.Orange-Theme .single-product [id*="Form-for-"] #pardot-form.form .submit input:hover { /* .Orange-Theme */ border: 2px solid #f9bf30 !important; border: 2px solid rgba(249, 191, 48, 1.0) !important; background-color: #f9bf30 !important; /* 強調時 */ background-color: rgba(249, 191, 48, 1.0) !important; /* 強調時 */ }