/*===================================================================================================================================================== 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; } /*-------- 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; } /* ============================= Product Page (圖文 Full-Width) >> 僅 Overview 豐富圖文區 =================================== 【.Full-Width-Rich-Content / .No-Margin-Layout (僅針對 Overview 內部豐富圖文區)】 (以上樣式名放在 >> #overview-tab.tab-content 的 Div 內 ) (*** 若要各區上下完全無空隙 Layout >> .No-Margin-Layout ***) ============================================================================================================================= */ /* 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 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 .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 .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 div.row > .col-md-12.line-Section { background-color: #fff; } /* Full Wide Rich Content >> 隱藏虛線 Line for Rich Content (上下仍有間距) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 30px 0;/* 縮短上下距離 */ margin: 40px 0;/* 縮短上下距離 */ } /* 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 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 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-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 .Rich-Content-Section .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-12, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-6, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-5 { position: relative; box-sizing: border-box; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content h3.slogan/* 所有圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content h3/* 所有圖文 */ { font-weight: 500; } .single-product #overview-tab.tab-content.Full-Width-Rich-Content 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.Full-Width-Rich-Content .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 .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 .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 .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 .col-md-12 > p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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%; } /* H3.Slogan (.col-md-12 圖文上下) >> Margin >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .col-md-12 > h3.slogan/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .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 .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 .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 .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 .col-md-12 > p/* 圖文上下 */ { margin-bottom: 4%; margin-bottom: 2.5%; } /* 圖上文下 (.image_top) >> 上間距 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .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 .Rich-Content-Section.image_left p/* 圖下左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3.slogan/* 圖下左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right p/* 圖上左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3.slogan/* 圖上左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-5 > h3.slogan/* 圖文左右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content 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 .slogan { letter-spacing: -0.01em; } /* Image 充滿容器 (避免出現父容器底部空隙) >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout #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 .package-content, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .package-content { margin-top: 4%; margin-top: 2%; padding: 20px; } /* 比較表格 >> 頂部距離 Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top.compare { padding-top: 8% !important; padding-top: 3% !important; } @media (min-width: 992px) { /* 文字區 (圖文左右) >> 所有 Full Width Rich Content >> Wording */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.image_left .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-5 { width: 37%; } } /* 1024 以上 */ @Media (min-width: 1024px) { /* #overview-tab.Full-Width-Rich-Content 下 >> 所有 .Rich-Content-Section >> 垂直/ 水平置中 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-5.col-md-offset-1, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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.image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.image_left .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-6, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-5 { 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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .Rich-Content-Section.image_right .wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .Rich-Content-Section.image_right .col-md-5.wording_block { margin-left: 6%; } /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3/* 左右圖文 */ { margin-bottom: 6% !important; } /* H3 文字大小 (圖文左右較小) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .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 .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 .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 .col-md-12 > p/* 圖文上下 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-12 p/* 圖文上下 */ { padding: 0 15% !important; } /* 對齊中間 >> H3.Slogan + P (圖文上下 .col-md-12) >> 所有 Full Width Rich Content 下的 >> .Rich-Content-Section */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .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 .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 .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 .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; } /* 左右圖最外框 + .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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .Rich-Content-Section .image_block a.play_btn { display: flex;/* 不用 flex 黑色會突出畫面 */ } } /* 1500 以上 */ @Media (min-width: 1500px) { /* P 描述 (.col-md-12 圖文上下) >> Padding >> 所有 Full Width Rich Content */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom .col-md-12 p/* 圖文上下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom p, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .col-md-12 p/* 圖文上下 */ { padding: 0 17% !important; } } /* 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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left { height: 63vh; } } @media (max-width: 1023px) { /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .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 .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 .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 .col-md-12.wording_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .col-md-6.image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout #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 .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 .Rich-Content-Section.image_top .col-md-12.wording_block/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_bottom .col-md-12.wording_block/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right .col-md-5.wording_block/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .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 .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 .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 .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .col-md-5.wording_block p/* 圖左文右 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_top .col-md-12.wording_block h3/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_bottom .col-md-12.wording_block h3/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right .col-md-5.wording_block h3/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .Rich-Content-Section.image_top .col-md-12.wording_block p/* 圖上文下 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_bottom .col-md-12.wording_block p/* 圖下文上 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right .col-md-5.wording_block p/* 圖右文左 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .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.Full-Width-Rich-Content.No-Margin-Layout .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 .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 .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 .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 .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 .Rich-Content-Section.image_top .col-md-12 > h3.slogan, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .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 .Rich-Content-Section img { margin-bottom: 0px !important; } } /* 480 以下 */ @Media (max-width: 480px) { /* H3 文字大小 (所有) */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3.slogan/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top h3.slogan/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_right h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_left h3/* 左右圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_bottom h3/* 上下圖文 */, .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section.image_top h3/* 上下圖文 */ { font-size: 1.9em; margin-top: 8%; } /* 左右圖最外框 + .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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left { /* height: 35vh; */ } } /* ========================================================================================================= Rich Content 添加 Class Name 深底色 / 無空隙 Layout / 顏色反轉 (針對 CS22H) ('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 {} /* Rich Content 無空隙 Layout (.No-Margin-Layout) >> 隱藏虛線 Line for Rich Content */ .single-product #overview-tab.tab-content.No-Margin-Layout 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 div.row > .col-md-12 .line { border-top: none;/* 灰線去掉 */ margin: 40px 0;/* 縮短上下距離 */ display: none !important; /* 若要 sectrion 之間全部緊臨,無空隙直接不顯示再加 */ } /*--------- 所有 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 p { letter-spacing: 0.01em; } /* 直接使用 .mp4 時 >> 無 border >> 所有 Rich Content / 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .vid-item-mp4, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color video { border: none !important; } /* #Drag-for-Comparison > 拖拉區塊/ 深底色背景 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark #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 .col-md-5 { width: 37%; } } @media (max-width: 767px) { /* 所有 Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark .row.Rich-Content-Section /* BG_Dark */ { margin-left: 0; margin-right: 0; } /* 所有 Rich Content 深底色背景 + 顏色反轉 (.BG_Dark) */ .single-product #overview-tab.tab-content.BG_Dark .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 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.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 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.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 .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.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 h3.slogan.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color h3.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .color_gray { color: #686f73; color: #a2a9ac !important; } /* 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color 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.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 h3.slogan.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color h3.slogan.color_black, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color 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.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 h3.color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color h3.color_black, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .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.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 .color_gray, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .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/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color 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.CS22H.BG_Dark.Invert-Color #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p)/* 內文描述 */ { color: #ddd !important; color: #cacaca !important; color: #c7c9ca !important; } /* 內文描述 a >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color 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 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)/* 內文描述 */ { color: #00a3ee !important; color: #06d1ff !important; /* text-decoration: none !important; */ } /* 內文描述 a:hover >> 所有 Rich Content 深底色背景 + 所有顏色反轉為白色 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color 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 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 .Rich-Content-Section.compare a)/* 內文描述 */ { 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 .package-content, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .Rich-Content-Section.compare, .single-product #overview-tab.tab-content.BG_Dark.Invert-Color #Form-for-Leads.Rich-Content-Section { background-color: #fff; padding: 5% 0; padding: 4% 0 3%; padding: 4% 0 0%;/* 底部有顏色時會漏餡 */ } /* Product Comparision (比較) (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .package-content { padding: 20px; } /* border-bottom: 15px 黑底 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Switch-with-Pushbutton.Rich-Content-Section { border-bottom: 7px solid #333; border-bottom: 15px solid #000; border-bottom: 7px solid #000; } /* border-bottom: 7px 黑底 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Drag-for-Comparison.Rich-Content-Section { /* border-bottom: 7px solid #000; */ } /* package-content 加上白底色 >> 所有 Rich Content 深底色背景 + 顏色反轉 (.Invert-Color/ 深底色用) */ .single-product #overview-tab.tab-content.BG_Dark.Invert-Color .package-content {} /* Slide Content (深色底) >> 縮小尺寸 >> 滑動區加陰影 */ .single-product #overview-tab.tab-content.Full-Width-Rich-Content.BG_Dark .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.BG_Dark .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, .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; } /* 主標題下 >> 主描述內文 */ p.Rich-Content-Block-Description .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; } /* 主標題下 >> 主描述內文 */ .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; */ } } /*-------- Rich Content 特別針對 CS22H 客製化 (.CS22H/ Customized Content) ----------*/ /* #Switch-Seamless-Between-Computers > BG-Color */ .single-product #overview-tab.tab-content.CS22H #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 #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left h3.slogan, .single-product #overview-tab.tab-content.CS22H #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 #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p, .single-product #overview-tab.tab-content.CS22H #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left p { color: #555555 !important; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .carousel.slide.Content-Bottom .carousel-caption, .single-product #overview-tab.tab-content #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 .carousel.slide.Content-Bottom .carousel-caption h3, .single-product #overview-tab.tab-content #Application .carousel-caption h3 { color: #fff !important; } /* #Application (Slide Content) > 底部文字區 */ .single-product #overview-tab.tab-content .carousel.slide.Content-Bottom .carousel-caption p, .single-product #overview-tab.tab-content #Application .carousel-caption p { display: none; } /* 深灰背景 */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #Drag-for-Comparison/* 拖拉比較 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Stunning-Visual.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 div[id*="Slide-Content-Default"], .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout div[id*="Application"].Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .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 .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 .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 .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%; 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 .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 .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .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 .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .Rich-Content-Section.carousel.slide.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .Rich-Content-Section div#myCarousel.Non-Full-Width .carousel-inner/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .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 #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-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 #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 div[id*="Slide-Content-Default"] h3.slogan, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #Eco-Efficiency.Rich-Content-Section h3.slogan, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #Audio-On.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Audio-On.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Audio-On.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Audio-On.Rich-Content-Section.image_right, */ .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #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 #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 #Peripheral-Sharing.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #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 #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 #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 .Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_right, .single-product #overview-tab.tab-content.Full-Width-Rich-Content.No-Margin-Layout .Rich-Content-Section.image_left { height: 60vh; } .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #Switch-Seamless-Between-Computers.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #Peripheral-Sharing.Rich-Content-Section.image_right .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_right/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_left .image_block/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Peripheral-Sharing.Rich-Content-Section.image_left/* 周邊設備 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_left .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_left, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Eco-Efficiency.Rich-Content-Section.image_right .image_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 #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 #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 .Rich-Content-Section div#myCarousel.Non-Full-Width/* Slide Content >> 縮小尺寸 */, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content .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 #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 #Drag-for-Comparison.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout div[id*="Slide-Content-Default"].Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #Audio-On.Rich-Content-Section .wording_block, .single-product #overview-tab.tab-content.CS22H.Full-Width-Rich-Content.No-Margin-Layout #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 .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 .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%; } }