/******************************** 【 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: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 */ {
	transform: translateY(-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 距離 >> 自己加入 */ 
#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), 
#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)), 
#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)) {
    margin-top: 60px;
}



/* 僅 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%);
    }

}
















/******************************** 【 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) {
    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;
}