/*************** 【 Tab Menu ICON - Before/ After 】 ICON 元素套用 Google Material Icon  *****************/


/********* 統一套 Icon 【 字級大小 / Fill:1 (滿底用) / 若只是 Outline 則不需要 】 (default 則為 Fill:0) *********/
#wrapper section#content .tab-nav .icon-list2::before/* Product Tab Menu */, 
section#content .tab-nav .icon-list2::before/* Product Tab Menu */, 
#wrapper section#content .tab-nav .icon-files::before/* Product Tab Menu */, 
section#content .tab-nav .icon-files::before/* Product Tab Menu */, 
#wrapper section#content .tab-nav .icon-download::before/* Product Tab Menu */, 
section#content .tab-nav .icon-download::before/* Product Tab Menu */, 
#wrapper section#content .tab-nav .icon-data::before/* Product Tab Menu */, 
section#content .tab-nav .icon-data::before/* Product Tab Menu */, 
#wrapper section#content .tab-nav .icon-sitemap::before/* Product Tab Menu */, 
section#content .tab-nav .icon-sitemap::before/* Product Tab Menu */, 

section#content .tab-nav .icon-list2::before, 
section#content .tab-nav .icon-files::before, 
section#content .tab-nav .icon-sitemap::before, 
section#content .tab-nav .icon-data::before, 
section#content .tab-nav .icon-download::before, 
section#content .tab-nav .icon-info-sign::before {
    font-size: 1.2em !important;
	font-variation-settings: 'FILL' 1; /* 滿底 */
}


/* Tab Menu ICON 統一套用 ( inline-block / line-height: 1rem ) */
section#content ul.tab-nav:not(.tab-nav-lg) li [class*="fa-"]::after, 
section#content ul.tab-nav:not(.tab-nav-lg) li [class*="fa-"]::before, 

section#content ul.tab-nav:not(.tab-nav-lg) li [class*="icon-"]::after, 
section#content ul.tab-nav:not(.tab-nav-lg) li [class*="icon-"]::before, 

section#content ul.tab-nav:not(.tab-nav-lg) li i::after,
section#content ul.tab-nav:not(.tab-nav-lg) li i::before {
    font-weight: 500;

	display: inline-block;
	position: relative;
	line-height: 1rem;
	-webkit-transition: 0.3s all ease-in 0.1s;
	transition: 0.3s all ease-in 0.1s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}


/* 【Product Tab Menu】Info Icon (資訊) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-info-sign::before, 
section#content .tab-nav .icon-info-sign::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e711";
  */

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "info"; /*  */
  content: "\e88e";
  /* font-variation-settings: 'FILL' 1; 滿底 */
}



/* 【Product Tab Menu】Features Icon (特點) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-list2::before, 
section#content .tab-nav .icon-list2::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e6f3";*/

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "format_list_bulleted"; 
  content: "\e241";
  /* font-variation-settings: 'FILL' 1; 滿底 */
}


/* 【Product Tab Menu】Diagram Icon (連線圖-旋轉) >> Product Single Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-sitemap::before, 
section#content .tab-nav .icon-sitemap::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e78a";*/

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "schema"; 
  content: "\e4fd";
  transform: rotate(-90deg);
}



/* 【Product Tab Menu】Spec Icon (規格) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-data::before, 
section#content .tab-nav .icon-data::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e6b0";*/

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "database"; 
  content: "\f20e";
}


/* 【Product Tab Menu】Download & Support Icon (下載/支援與服務) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-download::before, 
section#content .tab-nav .icon-download::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e615";*/

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "download_for_offline"; 
  content: "\f000";
}


/* 【Product Tab Menu】Applications Icon (應用方案) >> Product Page (Default 則為 Fill:0 / Fill:1 -- 滿底用) */
#wrapper section#content .tab-nav .icon-files::before, 
section#content .tab-nav .icon-files::before {
  /*font-family: 'font-icons','Lato';
  font-style: normal;
  font-weight: 400;
  content: "\e605";*/

font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
  content: "news"; 
  content: "\e032";
  content: "full_coverage"; 
  content: "\eb12";
}



/* All Tab Menu ICON 【Product Tab Menu】 >> >> Product Page >> Product Tab Menu */ 
section#content .tab-nav .icon-files::before, 
section#content .tab-nav .icon-download::before, 
section#content .tab-nav .icon-data::before, 
section#content .tab-nav .icon-sitemap::before, 
section#content .tab-nav .icon-list2::before, 
section#content .tab-nav .icon-info-sign::before {
	top: 0.35rem; /* Tab Menu Icon(不是 Button), 要自己微調 >> Product Single Page */
}







/******************************** 產品 Tab Menu -1 【 有 Tab 標籤狀態 】**************************************/



section#content ul.tab-nav:not(.tab-nav-lg) li a {
    font-size: 1.01em;
    font-weight: 500;
}


/* 產品 Tab Menu >> 增加高度 (距離上下) (有文字) */
section#content ul.tab-nav:not(.tab-nav-lg) li, 
section#content ul.tab-nav:not(.tab-nav-lg) li a {
	height: 50px;
	line-height: 2.7rem;

	height: 45px;
	line-height: 2.4rem;
}


/* 產品 Tab Menu >> All LI/ LI..ui-tabs-active (取消 border) (Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active, 
section#content ul.tab-nav:not(.tab-nav-lg) li {
	border: none;
}

/* 產品 Tab Menu >> 第一個 LI (取消 border-left) (Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li:first-child {
	border-left: none;
	border-left: 1px solid transparent;
}


/* 產品 Tab Menu >> LI >> (Active) a (取消 border-bottom) (Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li.active a {
    color: #004276;
    color: rgba(0, 66, 118, 1.0);

	border-bottom: none;
	filter: drop-shadow(4px 0px 0px rgba(1, 25, 71, 0.03));
	filter: drop-shadow(4px -1px 2px rgba(1, 25, 71, 0.05));
}




/******************************** 產品 Tab Menu -2 【 無 Tab 標籤狀態, 底線方式呈現 】**************************************/


/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul >> Li (Tab 大底色) */
section#content ul.tab-nav:not(.tab-nav-lg) li a, 
section#content ul.tab-nav:not(.tab-nav-lg) li {
  height: 47px;
  line-height: 2.4rem;
  line-height: 2.6rem;
  line-height: 2.8rem;
  transition: all 0.3s ease-in-out 0s;
}

/* 產品 Tab Menu (勾選狀態) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul >> Li ((Active)) (Tab 大底色) */
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a, 
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
  line-height: 2.2rem;
  line-height: 2.5rem;
  line-height: 2.6rem;
  transition: all 0.3s ease-in-out 0s;
}


/* 統一 line-height (產品 Tab Menu 【 無 Tab 標籤狀態 + 有 Tab 標籤 】 */
section#content ul.tab-nav:not(.tab-nav-lg) li a, 
section#content ul.tab-nav:not(.tab-nav-lg) li, 
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a, 
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
	line-height: 2.7rem;
    line-height: 2.7em;
}



/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul.tab-nav (Tab 大底色) */
section#content section.quote-cart + #content .col-title.row/* Get Quote Page >> List Title + Product Item List Title Section */,
section#content ul.tab-nav:not(.tab-nav-lg) {
	border-radius: 0.4rem 0.4rem 0 0;
	border-bottom: 1px solid transparent;
	border-bottom: 0px solid transparent;
	background-color: rgba(243, 244, 246, 1.0);
	background-color: #f3f4f6;
	transition: all 0.3s ease-in-out 0s;
}

/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> ul.tab-nav > LI (Tab 大底色) */
section#content ul.tab-nav:not(.tab-nav-lg) li:first-child {
	margin-left: 0;
	border-left: 2px solid #f3f4f6; /* 白底用 */
}


/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((hover)) ( li a Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li:hover {
	/*border-bottom: 3px solid #95999f;
	border-bottom: 3px solid rgba(149, 153, 159, 1.0);*/
	transition: all 0.3s ease-in-out 0s;
}

/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Active)) (Border-Bottom 底藍線條) (Tab 底線) */
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
	/*border-bottom: 3px solid #004276;
	border-bottom: 3px solid rgba(0, 66, 118, 1.0);*/
	background-color: rgba(255,255,255, 0.7); /* 淡灰底 */
	box-shadow: 0px 2px 5px 1px rgba(0, 7, 35, 0.05); /* 淡灰底 */

	position: relative; /* 白底 */
	background-color: rgba(255,255,255, 1.0); /* 白底 */
	box-shadow: 0px -2px 3px 1px rgba(0, 7, 35, 0); /* 白底 */

    top: 1px; /* 白底  */
	height: 48px; /* 比一般沒有 Active 狀態: 47px 高 2px */

    top: 0px; /* 白底  */
	height: 49px; /* 比一般沒有 Active 狀態: 47px 高 1px */

    transition: all 0.3s ease-in-out 0s;
}



/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li  > a ((hover)) ( li a Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li a:hover {
	background-color: rgba(255, 255, 255, 0.6);
	transition: all 0.3s ease-in-out 0s;
}



/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Active)) >. a (取消 bg/ border/ shadow) (Tab 底) */
section#content ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a {
	background-color: transparent;
	border: 1px solid transparent;

	border: none;/* 設成 none 才不會抖動 */

	filter: drop-shadow(4px -1px 2px rgba(1, 25, 71, 0));
	transition: all 0.3s ease-in-out 0s;
}


/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
section#content ul.tab-nav:not(.tab-nav-lg) li.active::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li:hover::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li::before, 

section#content ul.tab-nav:not(.tab-nav-lg) li.active::after, 
section#content ul.tab-nav:not(.tab-nav-lg) li:hover::after, 
section#content ul.tab-nav:not(.tab-nav-lg) li::after {
	position: relative;
	height: 2px;
	height: 0.15rem;

	width: 100%;/* 選取狀態 / 滑過寬度為 : 100% */
	left: 0;/*寬度為 : 100*/

	transition: all 0.3s ease-in-out 0s;
}


/* 產品 Tab Menu (li::after 是否要顯示) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) 
 ul.tab-nav:not(.tab-nav-lg) li.active::after, 
 ul.tab-nav:not(.tab-nav-lg) li:hover::after, 
 ul.tab-nav:not(.tab-nav-lg) li::after {
	content: '';
	display: block;
	top: -0.1rem;
}
*/


/* 產品 Tab Menu (li::before 是否要顯示) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
section#content ul.tab-nav:not(.tab-nav-lg) li.active::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li:hover::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li::before {
	content: '';
	display: block;
	top: 0rem;
}



/* 產品 Tab Menu 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li > Before/ After (Tab 底線條) */
section#content ul.tab-nav:not(.tab-nav-lg) li::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li::after {
	background-color: rgba(149, 153, 159, 0);

	width: 0%;/* 初始寬度為 : 0 */
	width: 10%;/* 初始寬度為 : 0 */
	left: calc(100%/2 - 0%); /* width 為 0, 初始置中 */

	transition: all 0.3s ease-in-out 0s;
}

/* 產品 Tab Menu > li (Hover) 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
section#content ul.tab-nav:not(.tab-nav-lg) li:hover::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li:hover::after {
	background-color: #95999f;
	background-color: rgba(149, 153, 159, 1.0);
	transition: all 0.3s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

/* 產品 Tab Menu > li > active 【 無 Tab 標籤狀態, 底線方式呈現 】 >> Li ((Hover)) > Before/ After (Tab 底線條) */
section#content ul.tab-nav:not(.tab-nav-lg) li.active::before, 
section#content ul.tab-nav:not(.tab-nav-lg) li.active::after {
	background-color: #004276;
	background-color: rgba(0, 66, 118, 1.0);
	transition: all 0.3s ease-in-out 0s;
}






/******************************** 產品 Tab Menu -3 【 滿版 Tab 標籤狀態 / 寬 100% 】**************************************/

                                   /* 舊的 (section#content.Full-Width-Layout) */

					 /* 新的【.cd-section.container-fluid 】 為 Avalade 定義的滿版 */


		/*【  Avalade 模組化後 >> 當 #overview-tab 內有 .cd-section.container-fluid 時，改變 .tab-nav 的樣式 】*/

		           

/***********************************************************************************************************************/

/*
#overview-tab .All-Rich-Content-Section .cd-section:first-child
*/

/* Overview Tab 下緊接第一個是有滿版 Rich Content 時 >> 第一個 Rich Content 跟 Tabb 空白要拿掉 */
#desktop-tab .tab-content:has(#overview-tab .cd-section.container-fluid, #overview-tab .cd-section > .container-fluid),
#desktop-tab:has(#overview-tab .cd-section.container-fluid, #overview-tab .cd-section > .container-fluid) .tab-content {
	padding-top: 0 !important;
}



@media (min-width: 768px) {

	/*  (Avalade 滿版版本不判斷不需要) 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	width: 750px;
	}

}




/* 980 以上 */
@Media (min-width: 980px) {

	/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 / 寬 100% */
	#desktop-tab:has(#overview-tab .cd-section.container-fluid) ul.tab-nav:not(.tab-nav-lg),

	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	background-color: #f2f2f2; /* 正淺灰 */
	background-color: #f3f4f6;/* 偏藍灰 */
	position: relative;

	height: 49px;
	}


	/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> ul >> Li (Tab 大底色) */
	#desktop-tab:has(#overview-tab .cd-section.container-fluid) ul.tab-nav:not(.tab-nav-lg) li a, 
	#desktop-tab:has(#overview-tab .cd-section.container-fluid) ul.tab-nav:not(.tab-nav-lg) li,

	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li a, 
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li {
	height: 47px;
	}


	/* 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> Li ((Active)) (Border-Bottom 底藍線條) (Tab 底線) */
	#desktop-tab:has(#overview-tab .cd-section.container-fluid) ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active, 

	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active {
	top: 1px; /* 白底  */
	height: 48px; /* 比一般沒有 Active 狀態: 47px 高 1px */

	top: 0px; /* 白底  */
	height: 49px; /* 比一般沒有 Active 狀態: 47px 高 2px */
	}


	/*  (Avalade 滿版版本不判斷不需要) 產品 Tab Menu >> 滿版 Tab 標籤狀態 >> 生成內部限制區塊 (用 JS 生成一個 <span class=".tab-nav-inner-container">) */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	}

}




@media (min-width: 1200px) {

	/* (Avalade 滿版版本不判斷不需要) 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	width: 1170px;
	}

}



@media (min-width: 1024px) {

	/* (Avalade 滿版版本不判斷不需要) 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	width: 970px;
	}

}




/* 1920 以上 */
@Media (min-width: 1920px) {

	/* (Avalade 滿版版本不判斷不需要) 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	/* ATEN-Blue-Color 使用 width: 63%; */
	width: 1170px;
	}

}


/*  2000 以上 */
@Media (min-width: 2000px) {

	/* (Avalade 滿版版本不判斷不需要) 產品 Tab Menu 滿版 >> 生成內部限制區塊 span.tab-nav-inner-container */
	section#content.Full-Width-Layout ul.tab-nav:not(.tab-nav-lg) span.tab-nav-inner-container {
	/* ATEN-Blue-Color 使用 width: 63%; */
	width: 1170px;
	}

}