/******************************** 【 for Avalade_滿版 Product Page (架構 .cd-section.container-fluid)】【 Avalade 模組化後】 **************************************/ /* 舊的方式 (section#content.Full-Width-Layout) */ /* 新的方式【.cd-section.container-fluid 】 為 Avalade 定義的滿版 */ /*【 Avalade 模組化後 >> 當 #overview-tab 內有 .cd-section.container-fluid 時，改變 .tab-nav 的樣式 】*/ /***********************************************************************************************************************/ /* 右邊跳轉導引小點點 >> 暫時隱藏 */ .All-Rich-Content-Section #cd-vertical-nav {display: none;} /* 僅 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 */, #desktop-tab .tab-container.tab-content #overview-tab.tab-content:has(.All-Rich-Content-Section section.cd-section:first-of-type .Full-Width-Container) /* for Legacy + Dynamic */, #desktop-tab .tab-container.tab-content #overview-tab.tab-content:has(.All-Rich-Content-Section section.cd-section:first-of-type.Full-Width-Container) /* for Legacy + Dynamic */ { /* 會影響 section 內的 Lightbox Modal 彈跳視窗被覆蓋 >> 改用 margin-top 調整 transform: translateY(-40px); */ margin-top: -40px; } /* 僅 Legacy 的【.Full-Width-Layout】圖右滿版時 >> .All-Rich-Content-Section */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section { margin-top: 0px; } /* 僅 Dynamic 的 section 模組時 (非 Rich Content / 非滿版) >> 其 section 下 有 .markets-solutions-applications 的 section 跟上方 section 高度*/ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications.container), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section.container:has(.markets-solutions-applications) { margin-top: 60px; } /* 僅 Legacy 的【.container】不滿版的 section 的上一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic 模組) >> Dynamic 是沒有 HR Line 距離 >> 自己加入 */ .single-product #overview-tab.tab-content section.with-BG: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:has(.container):not(:has(> .Multi_Rich_Content:is(.Full_Width_Rich_Content, .Rich_Content) > .markets-top-banner.richcontent > .RC_BG > .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:has(.container):not(:has(.Rich_Content .container)):not(:has(> .Multi_Rich_Content:is(.Full_Width_Rich_Content, .Rich_Content) > .markets-top-banner.richcontent > .RC_BG > .container)), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Rich_Content) + section.cd-section:has(.container):not(:has(.Rich_Content .container)):not(:has(> .Multi_Rich_Content:is(.Full_Width_Rich_Content, .Rich_Content) > .markets-top-banner.richcontent > .RC_BG > .container)) { margin-top: 60px; } /* 排除上下 section:has(.Rich_Content), 但中間是 section:has([class*="markets-solutions-"]) .B2C-Style #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section:has(.Rich_Content) + section:has([class*="markets-solutions-"]):has(+ section:has(.Rich_Content)), */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section > section.cd-section:has(> .Multi_Rich_Content:is(.Full_Width_Rich_Content, .Rich_Content) > .markets-top-banner.richcontent > .RC_BG > .container), .single-product #overview-tab.tab-content section:has(.line-Section) + section.with-BG:not(.Full-Width-Container, .No-Margin-Layout) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block { margin-top: unset !important; } /* 僅 Legacy 的【.container】不滿版 section 的下一個滿版 Legacy section 是 .Full-Width-Container (滿版 Legacy 模組) >> 隱藏 HR Line */ /* 僅 Legacy 的【.Full-Width-Container】滿版的本身 section 的 HR Line >> 隱藏 HR Line */ /* 僅 Legacy 的【.Full-Width-Container】滿版是所有的 section 最後一個 >> 隱藏 HR Line */ /* 僅 Legacy 的【.Full-Width-Container】滿版是所有的 section 倒數第二個 (底下雖有 section.lightbox_modal) >> 也算成最後一個 section >> 隱藏 HR Line */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:nth-last-of-type(2):has(.Full-Width-Container .Rich-Content-Section):has(+ section .lightbox_modal) .line-Section, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:last-of-type:has(.Full-Width-Container .Rich-Content-Section) .line-Section, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full-Width-Container .Rich-Content-Section) .line-Section, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.container .Rich-Content-Section):has(+ section .Full-Width-Container) .line-Section { display: none; } /* 承上, 僅 Legacy 的【.container】不滿版的 section 的下一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic/ Legacy 模組) >> 隱藏 HR Line >> 要自行加入底部距離 */ /* 僅 Legacy 的【.Full-Width-Container】滿版的下一個 section 是 Legacy 的【.container】不滿版 section >> 隱藏 HR Line >> 要自行加入底部距離 */ /* 僅 Legacy 的【.Full-Width-Container】滿版是所有的 section 最後一個 >> 隱藏 HR Line >> 要自行加入底部距離 */ /* 僅 Legacy 的【.Full-Width-Container】滿版是所有的 section 倒數第二個 (底下雖有 section.lightbox_modal) >> 也算成最後一個 section >> 隱藏 HR Line >> 要自行加入底部距離 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:nth-last-of-type(2):has(.Full-Width-Container .Rich-Content-Section):has(+ section .lightbox_modal), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:last-of-type:has(.Full-Width-Container .Rich-Content-Section), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full-Width-Container .Rich-Content-Section):has(+ section .container .Rich-Content-Section), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.container .Rich-Content-Section):has(+ section .Full-Width-Container) { margin-bottom: 60px; } /* 僅 Overview Tab 的第一個【.Full-Width-Layout】滿版時 >> 下一個 Ssection 若是有 .container 的 Rich Content 模組 >> 底部距離要更高 */ /* 不包含 diagram, application, download.... */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:first-of-type:has(.Full-Width-Container):has(+ section .container .Rich-Content-Section):not(:has(.Rich_Content .container)) /* for Legacy + Dynamic */, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:first-of-type:has(.Full-Width-Container):has(+ section .container .Rich-Content-Section):not(:has(.Rich_Content .container)) /* for Legacy + Dynamic */, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:first-of-type.Full-Width-Container:has(+ section .container .Rich-Content-Section):not(:has(.Rich_Content .container)) /* for Legacy + Dynamic */ { margin-bottom: 90px; } :has(.container):not(:has(.Rich_Content .container)) /* 僅 Dynamic 的 section 模組時 (非 Rich Content / 非滿版) >> 其 section 下 有 .markets-solutions-applications 的 section 跟下方 Legacy section 高度*/ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.markets-solutions-applications) + section.cd-section:has(.container .Rich-Content-Section) .container { padding-top: 60px; border-top: 1px solid #eee; } /* 僅 Legacy 的【.Full-Width-Layout】圖文上下滿版時 (不包含滿版處於第一順位時) >> 沒有 HR Line 與上方 section 空間 */ /* .image_bottom/ .image_top >> 若下方沒有文字則不需要 Padding */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:not(:first-of-type) .Full-Width-Container [class^="image_"]:has(.wording_block), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:not(:first-of-type) .Full-Width-Container .image_bottom:has(.wording_block), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:not(:first-of-type) .Full-Width-Container .image_top:has(.wording_block) { padding: 60px 0px 0; } /* 僅 Legacy 的【.Full-Width-Layout】圖文左右滿版時 >> 文字 Padding */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_bottom .wording_block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_top .wording_block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_right .wording_block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_left .wording_block { padding: 60px; } /* 僅 Legacy 的【.Full-Width-Layout】圖上 & 下滿版時 >> 文字 Padding */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_top .wording_block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_bottom .wording_block { padding: 0 60px 15px; } /* 僅 Legacy 的【.Full-Width-Layout】圖左滿版時 >> 文字 Padding */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_left .wording_block { padding-left: 0px; } /* 僅 Legacy 的【.Full-Width-Layout】圖右滿版時 >> 文字 Padding */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_right .wording_block { padding-right: 0px; } /* 僅 Legacy 的【.Full-Width-Layout】圖上 & 下滿版時 >> 避免 Legacy 所有img 圖片底部多出不必要空間 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section:has(.Full-Width-Container .Rich-Content-Section) img { vertical-align: baseline; /* 會導致 Legacy 所有img 圖片底部多出不必要空間 */ vertical-align: middle; display: block; } /* 811 以上 */ @Media (min-width: 811px) { /* 僅 Legacy 的【.Full-Width-Layout】圖文左右滿版時 >> 文字置中 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_bottom .wording_block, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_top .wording_block { text-align: center; } } /* 1500 以上 */ @Media (min-width: 1500px) { /* 僅 Legacy 的【.Full-Width-Layout】圖左滿版時 >> 文字位置調整 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_left .wording_block { transform: translateX(-5%); } /* 僅 Legacy 的【.Full-Width-Layout】圖右滿版時 >> 文字位置調整 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_right .wording_block { transform: translateX(5%); transform: translateX(6%); } /* (.section_block-Higher) 僅 Legacy 的【.container】不滿版的 section 的上一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic 模組) >> Dynamic 是沒有 HR Line 距離 >> 自己加入 */ .single-product #overview-tab.tab-content section.with-BG.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: 106px; margin-top: 7rem; } } /* 1920 以上 */ @media (min-width: 1920px) { /* (.section_block-Higher) 僅 Legacy 的【.container】不滿版的 section 的上一個 section 是 .Full_Width_Rich_Content (滿版 Dynamic 模組) >> Dynamic 是沒有 HR Line 距離 >> 自己加入 */ .single-product #overview-tab.tab-content section.with-BG.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: 106px; margin-top: 7rem; margin-bottom: 20px; margin-bottom: 1rem; } } /******************************** 【 Normal >> for Avalade_滿版 Product Page (架構 .cd-section.container-fluid)】【 Avalade 模組化後】 **************************************/ /* 【 (Normal 客製) .line (虛線) >> for Avalade_滿版模組】 Product Page */ .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: 45px 0; } /* 【 (Normal 客製) section.with-BG (有背景) >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section.with-BG .container, .single-product #overview-tab.tab-content .All-Rich-Content-Section section.with-BG .Full-Width-Container { padding: 2.5% 0 2%; margin: 3.5% auto 5.5%; } /* 【 (Normal 客製) section.BG-GreyL(淺灰背景) >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:has(.BG-GreyL) .container, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:has(.BG-GreyL) .Full-Width-Container { background-color: rgba(243, 244, 246, 1.0); } /* 【 (Normal 客製) section.BG-Black(黑色背景) >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content .All-Rich-Content-Section section:has(.BG-Black) .container, .single-product #overview-tab.tab-content .All-Rich-Content-Section section:has(.BG-Black) .Full-Width-Container { background-color: rgba(0, 0, 0, 1.0) !important; } /* 【 (Normal 客製) section.BG-Black / .BG-GreyBK >> H3 >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.BG-GreyBK 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), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.BG-Black 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) { color: #fff !important; } /* 【 (Normal 客製) section.BG-Black.Invert-Color >> P >> for Avalade_滿版模組】 Product Page */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.BG-GreyBK 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), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section section.BG-Black 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: #c7c9ca !important; } /* 【 (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.BG-GreyBK 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.BG-Black 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) { color: #02dfff !important; } /* 不需要圓角 >> Rich Content >> Slide Content >> 內層 img 不需要圓角,因滑動會有缺漏圖 >> 母層圓角即可 */ /* (for Avalade )僅 Legacy 的【.Full-Width-Container】圖上 & 下滿版時 >> 圖片不圓角 */ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_right img, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_left img, #desktop-tab:has(.Full-Width-Container .image_top, .Full-Width-Container .image_bottom) ul.tab-nav:not(.tab-nav-lg), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Full-Width-Container .image_top, .Full-Width-Container .image_bottom), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Full-Width-Container .image_top), .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section:has(.Full-Width-Container .image_bottom), #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_top img, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_bottom img, .single-product #overview-tab.tab-content .Full-Width-Container .RC_BG > video, /* 拖拉比較區 .single-product #overview-tab.tab-content .Full-Width-Container .twentytwenty-wrapper.twentytwenty-horizontal ,*/ #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_top img, #desktop-tab .tab-container.tab-content #overview-tab.tab-content .All-Rich-Content-Section section.cd-section .Full-Width-Container .image_bottom img, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section:has(.Full-Width-Container) section #Quick-Link-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .Rich-Content-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .carousel-inner/* Rich-Content >> Slide Content >> 母層-1 圓角即可 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .carousel.slide/* Rich-Content >> Slide Content >> 母層-0 圓角即可 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .twentytwenty-wrapper.twentytwenty-horizontal/* Rich-Content >> 拖拉比較 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .yt iframe /* Rich-Content >> YT Video >> iFrame */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .yt > div::before /* Rich-Content >> YT Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container .yt/* Rich-Content >> YT Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container a.play_btn::before/* Rich-Content >> a::before (黑塊) */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container a.play_btn/* Rich-Content >> a (黑塊) */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container video/* Rich-Content >> MP4 Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .Full-Width-Container img/*.No-Margin-Layout + .container */ .single-product #overview-tab.tab-content.Enlarge-Legacy-Rich-Content.No-Margin-Layout .All-Rich-Content-Section, .single-product #overview-tab.tab-content.No-Margin-Layout.Enlarge-Legacy-Rich-Content .All-Rich-Content-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container img, .single-product #overview-tab.tab-content .carousel.slide img, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section #Quick-Link-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .Rich-Content-Section, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .carousel-inner/* Rich-Content >> Slide Content >> 母層-1 圓角即可 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .carousel.slide/* Rich-Content >> Slide Content >> 母層-0 圓角即可 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .twentytwenty-wrapper.twentytwenty-horizontal/* Rich-Content >> 拖拉比較 */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .yt iframe /* Rich-Content >> YT Video >> iFrame */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .yt > div::before /* Rich-Content >> YT Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container .yt/* Rich-Content >> YT Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container a.play_btn::before/* Rich-Content >> a::before (黑塊) */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container a.play_btn/* Rich-Content >> a (黑塊) */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container video/* Rich-Content >> MP4 Video */, .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container img/*.No-Margin-Layout + .container */ { border-radius: unset !important; } /* 因為不需要圓角 >> Rich Content >> Slide Content >> 內層 video 不要 border */ .single-product #overview-tab.tab-content.No-Margin-Layout .All-Rich-Content-Section section .container video.vid-item-mp4/* Rich-Content >> MP4 Video */ { border: none !important; } /* ============================= (for Avalade) 新版 Product Page (Dynamic 模組 >> 沒滿版時 ) >> 僅 Overview 豐富圖文區 =================================== 【Dynamic 模組 >> 沒滿版時 section.Section-Radius:not(.Full-Width-Container) (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) ============================================================================================================================= */ /* 810 以上 */ @media (min-width: 810px) { /* Dynamic 模組 >> 沒滿版時 >> section.with-BG.BG-Bottom >> .RC_BG 有底圖 >> 排版居中時 */ .single-product #overview-tab.tab-content section.with-BG:not(.Full-Width-Container) [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) { padding: 6% 5% 16%; } } /* 981 以上 */ @media (min-width: 981px) { /* 副標標題變大 (一般標題 + Rich Content 標題) */ .single-product #overview-tab.tab-content section.Subtitle_Large .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 32px !important; } /* 副標標題變大 (一般標題 + Rich Content 標題) */ .B2C-Style .single-product #overview-tab.tab-content section.Subtitle_Large .markets-top-banner.richcontent .text-block .wording_block h4 { font-size: 2em !important; font-size: 2rem !important; } } /* 1024 以上 */ @media (min-width: 1024px) { /* Dynamic 模組 >> 沒滿版時 >> section.with-BG.BG-Bottom >> .RC_BG 有底圖 >> h3 */ /*.single-product #overview-tab.tab-content section.with-BG:not(.Full-Width-Container) .Full_Width_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) h3,*/ .single-product #overview-tab.tab-content section.with-BG:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block:is(.text_block_top-center) h3, .single-product #overview-tab.tab-content section.with-BG:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block h3 { font-size: 2.7em; line-height: 1.3em; } /* Dynamic 模組 >> 沒滿版時 >> section.with-BG.BG-Bottom >> .RC_BG 有底圖 >> h4 */ .single-product #overview-tab.tab-content section.with-BG:not(.Full-Width-Container) [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.with-BG:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block h4 { font-size: 1.1em !important; } } /* 979 以下 */ @Media (max-width: 979px) { .single-product #overview-tab.tab-content:has([class*="Rich_Content"] .markets-top-banner.richcontent) section div.container { width: 100%; margin: 0 auto; padding: 0; } .single-product #overview-tab.tab-content section.with-BG.BG-Bottom:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block .image_block, .single-product #overview-tab.tab-content section.BG-Bottom:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block .image_block { height: 180px; } } /* 480 以下 */ @Media (max-width: 480px) { .single-product #overview-tab.tab-content section.with-BG.BG-Bottom:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block .image_block, .single-product #overview-tab.tab-content section.BG-Bottom:not(.Full-Width-Container) [class*="Rich_Content"] .markets-top-banner.richcontent .text-block .image_block { height: 100px; } /* US4332 >> 多模塊 (.Multi_Rich_Content) >> 子層 (左右便當盒) >> 上下間距/ 大小縮放 */ section .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) img.img-responsive, section .markets-top-banner.richcontent .text-block.text_block_top-center img.img-responsive, section .markets-top-banner.richcontent .text-block:is(.text_block_top-center, .text_block_bottom-center) .image_block, section .markets-top-banner.richcontent .text-block.text_block_top-center ,image_block { transform: scale(1) !important; } }