/*modify by pekey 20190523*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Setting Start-------------------------------*/

/*================*/
/*-- loading --*/
/*================*/

.loading {
 	position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: #FFF;
	text-align:center;
	
	/*新增by pekey 20171211*/
	padding-top:250px;
 } 
 
	
	/*Loading畫面CSS開始*/
	#circularG{
		position:relative;
		width:58px;
		height:58px;
		margin: auto;
	}
	
	.circularG{
		position:absolute;
		background-color:rgb(201,9,21);  /*此為Loding的點點顏色*/
		width:14px;
		height:14px;
		border-radius:9px;
			-o-border-radius:9px;
			-ms-border-radius:9px;
			-webkit-border-radius:9px;
			-moz-border-radius:9px;
		animation-name:bounce_circularG;
			-o-animation-name:bounce_circularG;
			-ms-animation-name:bounce_circularG;
			-webkit-animation-name:bounce_circularG;
			-moz-animation-name:bounce_circularG;
		animation-duration:1.1s;
			-o-animation-duration:1.1s;
			-ms-animation-duration:1.1s;
			-webkit-animation-duration:1.1s;
			-moz-animation-duration:1.1s;
		animation-iteration-count:infinite;
			-o-animation-iteration-count:infinite;
			-ms-animation-iteration-count:infinite;
			-webkit-animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
		animation-direction:normal;
			-o-animation-direction:normal;
			-ms-animation-direction:normal;
			-webkit-animation-direction:normal;
			-moz-animation-direction:normal;
	}
	
		#circularG_1{
			left:0;
			top:23px;
			animation-delay:0.41s;
				-o-animation-delay:0.41s;
				-ms-animation-delay:0.41s;
				-webkit-animation-delay:0.41s;
				-moz-animation-delay:0.41s;
		}
		
		#circularG_2{
			left:6px;
			top:6px;
			animation-delay:0.55s;
				-o-animation-delay:0.55s;
				-ms-animation-delay:0.55s;
				-webkit-animation-delay:0.55s;
				-moz-animation-delay:0.55s;
		}
		
		#circularG_3{
			top:0;
			left:23px;
			animation-delay:0.69s;
				-o-animation-delay:0.69s;
				-ms-animation-delay:0.69s;
				-webkit-animation-delay:0.69s;
				-moz-animation-delay:0.69s;
		}
		
		#circularG_4{
			right:6px;
			top:6px;
			animation-delay:0.83s;
				-o-animation-delay:0.83s;
				-ms-animation-delay:0.83s;
				-webkit-animation-delay:0.83s;
				-moz-animation-delay:0.83s;
		}
		
		#circularG_5{
			right:0;
			top:23px;
			animation-delay:0.97s;
				-o-animation-delay:0.97s;
				-ms-animation-delay:0.97s;
				-webkit-animation-delay:0.97s;
				-moz-animation-delay:0.97s;
		}
		
		#circularG_6{
			right:6px;
			bottom:6px;
			animation-delay:1.1s;
				-o-animation-delay:1.1s;
				-ms-animation-delay:1.1s;
				-webkit-animation-delay:1.1s;
				-moz-animation-delay:1.1s;
		}
		
		#circularG_7{
			left:23px;
			bottom:0;
			animation-delay:1.24s;
				-o-animation-delay:1.24s;
				-ms-animation-delay:1.24s;
				-webkit-animation-delay:1.24s;
				-moz-animation-delay:1.24s;
		}
		
		#circularG_8{
			left:6px;
			bottom:6px;
			animation-delay:1.38s;
				-o-animation-delay:1.38s;
				-ms-animation-delay:1.38s;
				-webkit-animation-delay:1.38s;
				-moz-animation-delay:1.38s;
		}
		
		
		
		@keyframes bounce_circularG{
			0%{
				transform:scale(1);
			}
		
			100%{
				transform:scale(.3);
			}
		}
		
		@-o-keyframes bounce_circularG{
			0%{
				-o-transform:scale(1);
			}
		
			100%{
				-o-transform:scale(.3);
			}
		}
		
		@-ms-keyframes bounce_circularG{
			0%{
				-ms-transform:scale(1);
			}
		
			100%{
				-ms-transform:scale(.3);
			}
		}
		
		@-webkit-keyframes bounce_circularG{
			0%{
				-webkit-transform:scale(1);
			}
		
			100%{
				-webkit-transform:scale(.3);
			}
		}
		
		@-moz-keyframes bounce_circularG{
			0%{
				-moz-transform:scale(1);
			}
		
			100%{
				-moz-transform:scale(.3);
			}
		}
	/*Loading畫面CSS結束*/

.loading_tit{
	padding:20px 0px 0px 15px;
	display:inline-block;
	font-size:16px;
	font-weight:bold;
	color:#333;
	font-family:微軟正黑體;
	text-align:center;
}







#top{
	position:absolute;
	top:-100%;
}

.headertop{
	border-top: 0px solid #fff0;
}





/*/////////////////////////////////////////////////////////*/
/*-------版頭--------*/
/*/////////////////////////////////////////////////////////*/

.header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	transition: 0.3s ease all;
	background-color: #fff;
}

/*浮動*/
.header.fixed{
	box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
	transition: 0.3s ease all;
	padding: 0px;
	background-color: #fff;
}

	.header > .wrap {
		position: relative;
	}







	




/*================*/
/*-- 手機menu按鍵 --*/
/*================*/
.menu_btn {
	position:absolute;
	width:20px;
	top: 50%;
    transform: translateY(-50%);
	right: 0;
	cursor:pointer;
	display:none;
	z-index: 99;
}
	.menu_btn span {
		display:block;
		background-color: #333;
		height:2px;
		margin: 4px 0px;
		transition:0.3s ease all;
		border-radius:3px;
	}
		/*點擊*/
		.menu_btn.active{
			/* top:18px; */
			top: 24px;
    		transform: unset;
		}
		.menu_btn.active span {
			background-color: #fff;
		}
			.menu_btn.active span:nth-of-type(1) {
				transform: rotate(39deg);
				transform-origin: top left;
			}
			.menu_btn.active span:nth-of-type(2) {
				opacity: 0;
			}
			.menu_btn.active span:nth-of-type(3) {
				transform: rotate(-39deg);
				transform-origin: bottom left;
			}

@media (max-width: 990px){
	
	/*手機menu按鍵*/
	.menu_btn {
		display:block;
	}

}

@media (max-width: 360px){

	/*點擊*/
	.menu_btn.active{
		top: 24px;
	}

}







/*================================*/
/*----- logo -----*/
/*================================*/
.logo{
	/*width: clamp(6.4518rem, 10.4167vw, 12.5rem);*/ /* 最小值 103.23px、大小約 10.4167vw、最大值 200px */
	/*width: clamp(8.065rem, 13.0208vw, 15.625rem);*/  /* 最小值 129.04px、大小約 13.0208vw、最大值 250.00px */
	/*width: clamp(9.678rem, 15.625vw, 18.75rem);*/ /* 最小值 154.85px、大小約 15.6250vw、最大值 300.00px */
	width: clamp(12.0972rem, 19.5313vw, 23.4375rem); /* 最小值 193.55px、大小約 19.5313vw、最大值 375.00px */
	
	margin: 0;
	transition: 0.3s ease all;
	/* float: left; */
	box-sizing: border-box;
	animation-name: bounceIn;
	animation-duration: 1.2s;
	animation-fill-mode: both;
	visibility: visible;
	/* padding: 20.5px 0px; */
	/*padding: clamp(0.6613rem, 1.0677vw, 1.2813rem) 0 0; *//* 最小值 10.58px、大小約 1.0677vw、最大值 20.50px */
	padding: 0;
	padding-top: clamp(0.625rem, 0.7813vw, 0.9375rem); /* 最小值 10px、大小約 0.7813vw、最大值 15px */
}

	.logo a ,
	.logo_fix a{
		display: block;
		transition:0.3s ease all;
	}
	
		.logo img ,
		.logo_fix img{
			width: 100%;
			height: auto; 
		} 
		
		/*hover*/
		.logo a:hover ,
		.logo_fix a:hover{
			transform: scale(0.9);
			animation: bounceIn;	
		}
	
		.logo_fix{
			display: none;
			width: clamp(6.4518rem, 10.4167vw, 12.5rem); /* 最小值 103.23px、大小約 10.4167vw、最大值 200px */
			width: 100%;
			margin: 0;
			padding: 0.625rem 0; /*10px 0*/
			transition: 0.3s ease all;
		}



@media (max-width: 990px){
	.logo{
		transition: 0.3s ease all;
		/* width: 150px; */
		width: 270px;
		padding: 10px 0px;
		float: none;
		margin: 0;
	}
	
}

@media (max-width: 640px){
	
}
	


@media (max-width: 360px){

	.logo{
		width: clamp(15.0000rem, 14.0625vw, 16.8750rem); /* 最小值 240.00px、大小約 14.0625vw、最大值 270.00px */
	}
	
}

/*================================*/
/*----- 版頭上方區塊 -----*/
/*================================*/

.header_top{

}
	.header_top .wrap{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
		ul.header_top_link_area{
			transition: 0.3s ease all;
			margin: 0;
			padding: 0;
			list-style-type : none;
			display: block;

			display: flex;
			justify-content: center;
			align-items: center;
			gap:  clamp(.3125rem, 0.5208vw, .625rem);/* 5 ~ 10px */

			/*font-size: clamp(0.6875rem, 0.6771vw, 0.8125rem);*/ /* 字體 最小值 11.00px、大小約 0.6771vw、最大值 13.00px */

			font-size: clamp(0.8125rem, 0.8002vw, 0.9602rem); /* 字體 最小值 13.00px、大小約 0.8002vw、最大值 15.36px */
			color: var(--dark_color);
		}
		ul.header_top_left{
			position: absolute;
			top: 10px;
			left: 0;
		}
		ul.header_top_right{
			position: absolute;
			top: 10px;
			right: 0;
		}
			ul.header_top_link_area li{
				margin: 0;
				padding: 0;
				list-style-type : none;
				display: block;
				position: relative;
			}
				ul.header_top_link_area li span{
					
				}
				ul.header_top_link_area li a{
					color: inherit;
					text-decoration: none;
				}
				ul.header_top_link_area li a:hover{
					opacity: 0.7;
				}

				ul.header_top_right li > a{
					display: flex;
					align-items: center;
					gap: clamp(0.1563rem, 0.2604vw, 0.3125rem); /* 最小值 2.50px、大小約 0.2604vw、最大值 5.00px */
					padding: 2px 0;
				}
				ul.header_top_right li i{	
					font-size: inherit;				
					font-size: 1rem;				
					line-height: 1;
				}



				/* 版頭上方下拉------------------- */
				.header_icon_down{
					left: 50%;
					transform: translateX(-50%);
					transform-origin: top center;
					font-size: inherit;  /*字體 最小值 10px、大小約 0.9375vw、最大值 12px*/
					line-height: 1.1;
					/* z-index: -999999;
					opacity: 0; */
					transition: 0.1s ease all;
					/*預設關閉*/
					letter-spacing: normal;
					padding: 0;
					margin: 0;
					list-style-type: none;
					display: block;
					background-color: var(--primary_color);
					width: 100px;
					text-align: center;
					/* top: 15px; */
					top: 19px;
					display: none;
					position: absolute;
					z-index: 99;
					box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
				}
				.header_icon_downBg{
					background-color: var(--second_color);
					margin: 0;
					padding: 0;
					list-style-type : none;
					display: block;
				}

					.header_top_link.service:hover .header_icon_down ,
					.header_top_link.shopping:hover .header_icon_down{
						display: block;
					}
						.header_down_list{
							padding: 0;
							margin: 0;
							list-style-type: none;
							display: block;
							/*font-size: clamp(0.7292rem, 0.7292vw, 0.8750rem);*/ /* 字體 最小值 11.67px、大小約 0.7292vw、最大值 14.00px */
							color: #fff;
						}
						.header_down_list:not(:last-of-type){	
							border-bottom: 1px #fff solid;
						}
							.header_down_list > a{
								display: flex;
								padding: 7px 0;
								/* border-bottom: 1px var(--fourth_color) solid; */
								justify-content: center;
								color: #fff;
								text-decoration: none;
								font-size: inherit;
								text-indent: 0.25rem; /*4px*/
								letter-spacing: 0.25rem; /*4px*/
								font-size: inherit;
							}
							.header_down_list a:hover{
								opacity: 0.7;
							}
							.header_down_list:last-of-type a{
								border-bottom: none;
							}
							.header_down_list a span.line ,
							.header_down_list span.line{ /* modify by Judy 20250318 */
								background-color:#ffffff;
								width: 1px;
								height: 15px;
								margin: 0 10px;
								padding: 0;
								display: inline-block;
							}










				





/*================================*/
/*----- 版頭右 -----*/
/*================================*/

.header_rightArea{
    /* float: right; */
    box-sizing: border-box;
    /* padding-top: 42px; */
    border-bottom: 1px var(--third_color) solid;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
}



/*================================*/
/*----- 語系 language -----*/
/*================================*/
.language{
	font-size: 14px;
	position: absolute;
	top: 17px;
	right: 30px;
}
	.language_content{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
		.language_list{	
			box-sizing: border-box;	
		}
			.language_list a{
				display: block;
				text-decoration: none;
				color: #8c8c8c;
				padding: 0 10px;
			}








/*================================*/
/*----- pc版頭搜尋區塊 -----*/
/*================================*/


/*================================*/
/*----- 版頭搜尋區塊 -----*/
/*================================*/

/*站內搜尋-----------------------------------------*/                        
.search_area{
    font-size: clamp(.75rem, 0.7292vw, .875rem);
}

/*站內搜尋pc---------------------------*/ 
.search_area_pc{

}
/*站內搜尋mobile---------------------------*/ 
.search_area_mobile{
    display:none;
	font-size: 1rem;
}  


	/*站內搜尋-----------------------------------------*/
	.search_content_site {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		padding-left:  0;
		vertical-align: middle;
		width:  100%;
		/* color: var(--font_color); */
	}


		.search_content {
			position:relative;
			box-sizing:border-box;
			padding-right:  clamp(.9375rem, 1.5625vw, 1.875rem);
			background: #e8e8e8;
			width: auto;
			/* border-radius: 3.125rem; */
		}
			.search_content input[type='text'] {
				border: none;
				background: none;
				height: 2.625rem; /*42px*/
				/*height: 1.5rem;*/ /*24px*/
				font-size:inherit;
				padding: .0625rem  clamp(.4375rem, .7292vw, .875rem) 0;
				color: inherit;
				line-height: normal;
			}
			.search_content label {
				position:absolute;
				top: 50%;
				right: 5px;
				transform: translateY(-50%);
				color: inherit;
				padding: 0;
			}
				.search_content i {
					font-size: inherit;
					color: var(--dark_color);
				}
				.search_content input[type='submit'] {
					display:none;
				}	


				.search_content ::placeholder { /* CSS 3 標準 */
					color: var(--font_color);
				}
				.search_content ::-webkit-input-placeholder { /* Chrome, Safari */
					color: var(--font_color);
				}				
				.search_content :-ms-input-placeholder { /* IE 10+ */
					color: var(--font_color);
				}
				.search_content ::-moz-placeholder { /* Firefox 19+ */
					color: var(--font_color);
					opacity: 1;
				}
				  


				.search_area_pc .search_content_site {
					width:  clamp(7.1875rem, 11.7188vw, 14.0625rem); /*225px ~ 115px*/
				}
					.search_area_pc .search_content {
						border-radius: 3.125rem;
					}
						.search_area_pc .search_content input[type='text'] {
							height: 1.5rem; /*24px*/
						}
						.search_area_pc .search_content i {
							font-size: clamp(.75rem, 0.7292vw, .875rem);
							color: var(--font_color);
						}


/*================================*/
/*----- 主按鍵 -----*/
/*================================*/

	.navbar{
		/* margin-right: -30px; */
		max-width: 1015px;
		max-width:clamp(40.625rem, 52.8646vw, 63.4375rem); /* 最小值650px、大小約 52.8646vw、最大值 1015px */
		/*max-width: clamp(53.2275rem, 85.9375vw, 103.125rem);*/ /* 最小值 851.64px、大小約 85.9375vw、最大值 1650px */
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		font-size: clamp(1rem, 0.9375vw, 1.1250rem); /* 字體 最小值 16.00px、大小約 0.9375vw、最大值 18.00px */
	}
	
	/*浮動*/
	/* .header.fixed .navbar{
		padding: 0px 0px;
	} */
	
		
		.nav{
			/* float: left; */
			box-sizing: border-box;
			position: relative;
		}

		.nav .navTitle{
			/* border-bottom: 1px solid #5b5b5b; */
		}


			.nav > a ,
			.navTitle > a{
				display: block;
				text-decoration: none;
				color: inherit;
				font-size: inherit;
				transition: 0.3s ease all;
				position: relative;
				/* padding: 10px 0px; */
				/*padding: clamp(0.8065rem, 1.3021vw, 1.5625rem) 0;*/ /* 最小值 12.90px、大小約 1.3021vw、最大值 25.00px */
				padding: clamp(0.8065rem, 0.7813vw, 0.9375rem) 0; /* 最小值 12.9x、大小約 0.7813vw、最大值 15px */
			}
			
			/*hover*/
			.nav:hover > a ,
			.navTitle:hover > a{
				/* opacity: 0.5; */
				transition: 0.3s ease all;
				position: relative;
			}
			
			.nav > a:before {
				content: "";
				position:
				absolute;
				background-color: #c3c3c3;
				width: 1px;
				height: 15px;
				left: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}						

			.nav:first-of-type > a:before {
				display:none;
			}

			.navTitle > a:after{
				position: absolute;
				content: "";
				background-color: var(--primary_color);
				height: 3px;
				bottom: 0;
				left: 0;
				width: 0%;
				transition: width 0.9s; /* 只對 width 屬性應用過渡 */
			}
			.nav:hover .navTitle > a:after{
				width: 100%;
			}


				/*主按鍵展開*/
				.navOpen {
					position:absolute;
					left:50%;
					padding:9px 0px 0px;
					width: 180px;
					transform: translateX(-50%);
					/* display:none; */
					z-index: 2;
				}
				/* .navOpen.mobile{
					display:none;
				} */
				/* .nav:hover .navOpen.pc {
					display:block;
				} */
				.navOpenBg {
					position:relative;
				}


				.nav.fr .navOpen.pc{
					display:none;
				}
				.nav.fr:hover .navOpen.pc{
					display:block;
				}





				.navOpen.mobile {
					display:none;
					opacity:0;
					z-index:-999999;
					transform: unset;
					padding: 0;
				}
				.navOpen.pc .navOpenBg:before {
					position: absolute;
					content:'';
					border-bottom: solid 8px rgba(0,0,0,0.65);
					border-left: solid 12px rgba(255,255,255,0);
					border-right: solid 12px rgba(255,255,255,0);
					top:-8px;
					left:50%;
					transform: translateX(-50%);
				}

					.navOpenList {
					}
						.navOpenList a {
							text-align:center;
							font-size: clamp(0.8889rem, 0.8333vw, 1.0000rem); /* 字體 最小值 14.22px、大小約 0.8333vw、最大值 16.00px */
							color:#fff;
							line-height:1.5;
							padding:7px 5px;
							background:rgba(0,0,0,0.65);
							display: block;
							transition:0.3s ease all;
							text-decoration: none;
						}
							.navOpenList a:hover {
								background: var(--primary_color);
							}






















	/*滿版pc 主按鍵下拉樣式-----------------------------------------*/
	.nav.sstc{
        position: unset;
	}

	.nav.sstc:hover .navOpen.pc.sstc{
       /* display: block; */
	}
		.nav.sstc .navOpen.pc.sstc{
			/* pointer-events: none; */
			left: 0%;
			width: 100%;
			transform: translateX(0%);
			padding: 0;
			top: -100%;

			/* opacity: 0; */
			display: none;
			z-index: -999999;
			filter: blur(0.7px);
			/* transform: scaleY(0); */
			transform-origin: top center;
			transition: top 0.7s ease-in-out, display 0.7s ease-in-out, z-index 1.0s ease-in-out, filter 1.3s ease-in-out; /* 分開設定過渡時間 */ 
		}
		.nav.sstc .navOpen.pc.sstc .navOpenBg:before {
			display: none;
		}			
		/*電腦版滿版主按鍵被移入時的樣式*/
		.nav.sstc .navOpen.pc.sstc.active{
			top: 100%;
			/* opacity: 1; */
			display: block;			
			filter: blur(0px);
			z-index: 2;
			/* transform: scaleY(1); */
			transition:top 0.7s ease-in-out, display 0.7s ease-in-out, z-index 1.0s ease-in-out, filter 1.3s ease-in-out; /* 分開設定過渡時間 */ 
		}

		/* 當鎖定狀態時，隱藏滾動條 */
		body.nav-locked {
			overflow: hidden;
		}





		
	.nav_stc_Bg{
		position: relative;
		min-height: 188px;
		/* background-color: #fff; */
		color: var(--dark_color);

		background-color: rgba(0,0,0,0.65);
		color: #fff;
		min-height: 147px;
	}
	
		/* nav_背景 */
		.nav_background{
			height: 100%;
			min-height: inherit;
			width: 100%;
			max-width:clamp(32.7430rem, 52.8646vw, 63.4375rem); /* 最小值 523.89px、大小約 52.8646vw、最大值 1015px */
			margin: 0 auto;
			position: relative;
		}

			.nav_wrap{
				/* border-left: 1px #ddd solid; */
				width: 250px;
				height: 100%;
				/* background-color: var(--fourth_color); */
				color: inherit;
				line-height: 1.2;
				font-size: min(max(0.8vw, 14px), 17px); /*字體大小 2.5vw、最小值 12px、最大值 18px*/
				border-right: 1px #fff solid;
				overflow-y: auto;
				/* overflow-x: hidden; */
				max-height: 400px;
			}
	
			
	
				.nav_stc_item{
				/* position: relative; */
				}
	
					.nav_stc_list{
					}
						.nav_stc_list a{
							color: inherit;
							text-decoration: none;
							display: block;
							padding: 10px 45px 10px 10px;
							/* border-bottom: 1px #c3c3c3 solid; */
							/* border-bottom: 1px #ddd solid; */
						}
						.nav_stc_list > a:hover{
							/* background-color: var(--third_color); */
							background: var(--primary_color);
							color: #fff;
						}
	
						.nav_stc_item span.nav_arrow{
							display: flex;
							width: 42px;
							height: 100%;
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
							align-items: center;
							justify-content: center;
						}
							.nav_stc_item span.nav_arrow i {
								color: inherit;
								display: block;
							}
	
						/* 第一層 */
						.nav_fir_list{
							position: relative;
						}
							.nav_fir_list a{
							}
	
	
	
						/* 第二層 */
						.nav_open_area_sec{
							position: absolute;
							top: 0;
							left: calc(250px * 1);
							width: calc(250px * 1);
							height: 100%;
							/* border-right: 1px var(--third_color) solid; */
							display: none;
						}
						.nav_open_area_sec.active{
							display: block;
							box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
							/* border-left: 1px var(--third_color) solid; */
						}
	
							.nav_open_area_sec_in{
								height: 100%;
								overflow-y: auto;
							}
							
								
								.nav_sec{
								}
									.nav_sec_list{
										position: relative;				
									}
										.nav_sec_list a{						
										}
	
							/* 第三層 */
							.nav_open_area_third{
								position: absolute;
								top: 0;
								left: calc(250px * 1);
								width: calc(250px * 2);
								height: 100%;
								/* background-color: inherit; */
								/* background-color: rgba(0,0,0,0.6); */
								/* background-color: rgba(183 195 183 / 90%); */
								overflow-y: auto;
								display: none;
							}
							.nav_open_area_third.active{
								display: block;
							}
								.nav_third_list{							
								}
									.nav_third_list a{							
									}
	
	
	
	
	
		.nav_wrap::-webkit-scrollbar ,
		.nav_open_area_sec_in::-webkit-scrollbar ,
		.nav_open_area_third::-webkit-scrollbar {/*滾動條整體樣式*/
			width:5px;     /*高寬分別對應橫豎滾動條的尺寸*/
			height: 1px;
		}
		.nav_wrap::-webkit-scrollbar-thumb ,
		.nav_open_area_sec_in::-webkit-scrollbar-thumb ,
		.nav_open_area_third::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			
			/* background: var(--primary_color); */
			/* background: var(--secondary_color); */
			background: var(--primary_color);
		}
		.nav_wrap::-webkit-scrollbar-track,
		.nav_open_area_sec_in::-webkit-scrollbar-track ,
		.nav_open_area_third::-webkit-scrollbar-track  {/*滾動條裡面軌道*/
			/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
			border-radius: 5px;
			background: #fff0;
		}	











/* 只作用在 sstc 這組 */
.nav.sstc .nav_wrap,
.nav.sstc .nav_open_area_sec_in{
  /* position: relative; */
}

.nav.sstc .nav_wrap::before,
.nav.sstc .nav_wrap::after,
.nav.sstc .nav_open_area_sec_in::before,
.nav.sstc .nav_open_area_sec_in::after{
  content:"";
  position:absolute;
  left:0; 
  right:0; 
  height:18px;
  pointer-events:none;
  /* opacity:0;  */
  transition:opacity .2s;
  max-width: 250px;
  z-index: 3;
}

.nav.sstc .nav_wrap::before,
.nav.sstc .nav_open_area_sec_in::before{
  top:0;
  background: linear-gradient(to bottom, rgba(0 0 0 / 60%), rgba(0, 0, 0, 0));
  /* background-color: #f30d0d; */
   opacity: 1;
}
.nav.sstc .nav_wrap::after,
.nav.sstc .nav_open_area_sec_in::after{
  bottom:0;
  background: linear-gradient(to top, rgba(0 0 0 / 60%), rgba(0,0,0,0));
  /* background-color: #f30d0d; */
  opacity: 1;
}

.nav.sstc .nav_wrap:not(.has-more-bottom):before,
.nav.sstc .nav_open_area_sec_in:not(.has-more-bottom)::before{
	opacity: 0;
}
.nav.sstc .nav_wrap:not(.has-more-top):after,
.nav.sstc .nav_open_area_sec_in:not(.has-more-top)::after{
	opacity: 0;
}

/* 由 JS 依捲動狀態加這兩個 class */
/* .nav.sstc .nav_wrap.has-more-top::before  ,
.nav.sstc .nav_open_area_sec_in.has-more-top::before { 
	opacity:1; 
}

.nav.sstc .nav_wrap.has-more-bottom::after  ,
.nav.sstc .nav_open_area_sec_in.has-more-bottom:after {
	opacity:1; 
} */












		/*第3層手機 主按鍵 下拉樣式--------------*/
		.navOpen.mobile.sstc {
			background: transparent;
		}
		.mobile.sstc .mobile_sstc_wrap {
			display: block;
			width: auto;
			padding: 0;
			overflow-x: unset;
			overflow-y: unset;
		}

			.mobile.sstc .sstc_item {
				width: auto;
				padding: 0px 0px 0px;
			}
				.mobile.sstc .sstc_title {
					margin: 0px 0px 0px;
					padding: 0px;
					border-left: none;
					color: #fff;


					background-color: rgba(0, 0, 0, 0.7);
					border-bottom: 1px solid #5b5b5b;
					font-size: clamp(0.8889rem, 0.8333vw, 1rem); /* 字體 最小值 14.22px、大小約 0.8333vw、最大值 16px */
				}
					.mobile.sstc .sstc_title a{
						/* padding: 10px 0px 10px 25px; */
						font-weight: 400;
						color: inherit;
						display: block;
						text-decoration: none;


						color: #cecece;
						padding: 12px 15px 12px 30px;
						/* background-color: rgba(0, 0, 0, 0.7); */
						transition: 0.3s ease all;
						text-decoration: none;
						display: block;
						/* border-bottom: 1px solid #5b5b5b; */
					}

				.mobile.sstc .sstc_m_bg{
					display: none;
					font-size: clamp(0.7777rem, 0.7292vw, 0.8750rem); /* 字體 最小值 12.44px、大小約 0.7292vw、最大值 14px */
				}
					.mobile.sstc .navOpenList > a {
						padding-left: 45px;
						font-size: inherit;
					}
















@media screen and (min-width: 991px){		
}






							
									
	

/* 在螢幕寬度大於991時 */ 
@media screen and (min-width: 991px) {

	/*浮動*/
	.header.fixed  .header_rightArea{
		border-bottom: none;
		margin: 0 auto;
		display: grid;
		/*grid-template-columns: clamp(6.4518rem, 10.4167vw, 12.5rem) auto;*/  /* 最小值 103.23px、大小約 10.4167vw、最大值 200px */
		
		
		grid-template-columns: clamp(8.0648rem, 13.0208vw, 15.6250rem) auto;  /*  最小值 129.04px、大小約 13.0208vw、最大值 250.00px */
		max-width: clamp(53.2275rem, 85.9375vw, 103.125rem); /* 最小值 851.64px、大小約 85.9375vw、最大值 1650px */
		
		/*gap: clamp(1.2904rem, 2.0833vw, 2.5rem);*/ /* 最小值 20.65px、大小約 2.0833vw、最大值 40px */
		
		gap: clamp(2.4023rem, 3.9063vw, 4.6875rem); /* 最小值 38.44px、大小約 3.9063vw、最大值 75px */
		
		align-items: center;
		/* justify-content: space-between; */
	}

	/*浮動*/
	.header.fixed  .navbar{
		max-width: clamp(53.2275rem, 85.9375vw, 103.125rem); /* 最小值 851.64px、大小約 85.9375vw、最大值 1650px */
		gap: clamp(0.6452rem, 1.0417vw, 1.2500rem); /*  最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
		margin: 0;
		max-width: unset;
		justify-content: unset;
	}

	/*浮動*/
	.header.fixed  .nav_background{
		/*max-width: clamp(53.2275rem, 85.9375vw, 103.125rem); *//* 最小值 851.64px、大小約 85.9375vw、最大值 1650px */
		/*gap: clamp(0.6452rem, 1.0417vw, 1.2500rem);*/ /*  最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
		max-width: clamp(32.2925rem, 52.0833vw, 62.5rem); /* 最小值 620px、大小約 52.0833vw、最大值 1000px */
	}
	
	/*浮動*/
	.header.fixed .header_top{
		background-color: var(--third_color);
		padding: 0.3125rem 0; /*5px*/
		transition: 0.3s ease all;
	}
		.header.fixed .header_top .wrap {
			justify-content: space-between;
			transition: 0.3sease all;
		}
			.header.fixed .logo{
				display: none;
			}
			.header.fixed ul.header_top_left ,
			.header.fixed ul.header_top_right{
				position: unset;
				top: unset;
				left: unset;
				right: unset;
				transition: 0.3sease all;
			}

			/*手機才打開*/
			.nav_mobile{
				display: none;
			}


	.logo_fix{
		display: none;
	}
	/*浮動*/
	.header.fixed .logo_fix{
		display: block;
	}


}



@media (max-width: 990px){

/*----- 版頭上方區塊 -----*/
.header_top{
}
	.header_top .wrap{
	}
		ul.header_top_link_area{
			display: none;
		}



/*----- 版頭右 -----*/
.header_rightArea{
	position: fixed;
	width: 200px;
	top: 0px;
	right: -200px;
	height: 100%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.7);
	transition: 0.3s ease all;
	padding: 59px 0px 0;
	padding-top: 77px;
	overflow-y: auto;
	z-index: 4;
	float: none;
	border-bottom:none;
}
.header_rightArea.active {
	right: 0px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}



	/*----- 語系 language -----*/
	.language{
		position: unset;
		top: unset;
		right: unset;
	}
		.language_content{
			justify-content: center;
		}
			.language_list a {
				padding: 13px 5px;
			}






	/*-----PC搜尋區塊-----*/
	.search_area_pc{
		display: none;
	}
	/*-----mobile搜尋區塊-----*/
	.search_area_mobile{
		display: block;
	}
		.search_area_mobile .search_content input[type='text'] {
			padding: 0 15px;
		}
		.search_area_mobile .search_content i{
			font-size: 1.25rem; /*20px*/
		}


















	/*----- 主按鍵 -----*/
	.navbar {
		margin-right: 0px;
		flex-direction: column;
		justify-content: unset;
		color: #fff;
	}
		.nav {
			float:none;
			width: 100%;
			padding: 0px;
			position: relative;
		}
			.nav .navTitle{
				border-bottom: 1px solid #5b5b5b;
			}

			.nav > a ,
			.nav .navTitle > a {
				border:none;
				border-radius:0px;
				text-align:left;
				padding: 13px 15px;
				color: inherit;
				/* border-bottom: 1px solid #5b5b5b; */
				/* font-size: 14px; */
			}
			.nav > a:before ,
			.nav .navTitle > a:before {
				display: none;
			}
			

			.header.fixed .nav > a ,
			.header.fixed .nav .navTitle > a{
				transition: 0.3s ease all;
				/* padding: 13px 15px; */
				/* color: #cecece; */
			}
			.nav > a:hover ,
			.nav .navTitle > a:hover  {
				/* color: var(--second_color); */
			}
			.nav:hover .navTitle > a:after{
				width: 0%;
			}

					
				/*展開選單*/
				.navOpen {
					position:relative;
					top:0px;
					left:0px;
					margin:0px;
					width:auto;
					border-radius:0px;
					background:#444;
				}
				
				.nav.sstc .navOpen.pc.sstc ,
				.nav.sstc .navOpen.pc.sstc.active{
					display: none;
				}
				/*hover*/
				.nav:hover .navOpen.pc ,
				.fixed_nav:hover .navOpen.pc ,
				.nav.sstc:hover .navOpen.pc.sstc ,
				.nav.fr:hover .navOpen.pc{
					display:none;
				}	
				
					
				.navOpen.mobile {
					display: none;
					opacity: 1;
					z-index: 1;
					position: relative;
				}
					.navOpenBg {
						box-shadow: none;
					}
						.navOpen.mobile  .navOpenList {
						}
						.navOpen.mobile  .navOpenList > a {
							text-align:left;
							/* font-size:14px; */
							color: #cecece;
							/* line-height:22px; */
							padding: 12px 15px 12px 30px;
							background-color: rgba(0, 0, 0, 0.7);
							transition:0.3s ease all;
							text-decoration:none;
							display:block;
							border-bottom: 1px solid #5b5b5b;
						}
						.navOpenList > a:hover {
							opacity: 0.7;
						}










		/* .nav.sstc > a ,
		.nav.vertical_nav > a 
		.nav.arrow_down > a  , */
		.nav .navTitle.arrow_down{
			padding-right: 40px;
			position: relative;
		}
			.nav .navTitle > a{
				/* margin-right: 45px; */
			}

		.mobile.sstc .sstc_title.arrow_down{
			position: relative;
		}
			.mobile.sstc .sstc_title.arrow_down > a{
				margin-right: 45px;
				/* background: #ddd; */
			}
			.mobile.sstc .sstc_m_bg .navOpenList > a{
				padding-left: 45px;
			}



		/* .nav.sstc > a::after ,
		.nav.vertical_nav > a::after 		
		.nav.arrow_down > a::after ,*/
		.nav .navTitle.arrow_down::after ,
		.mobile.sstc .sstc_title.arrow_down::after  {
			position: absolute;
			content: "";
			background-image: url(../images/bottom_arrow_icon.svg);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 18px;
			transition: 0.3s ease all;
			width: 18px;
			height: calc(18px / 2);
			z-index: 0;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			transform-origin: center center;
			width: 33px;
			height: 33px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		

		/* .nav.sstc.active > a::after ,
		.nav.vertical_nav.active > a::after
		.nav.arrow_down.active > a::after , */
		.nav.active .navTitle.arrow_down::after ,
		.mobile.sstc .sstc_title.arrow_down.active::after  {
			transform: translateY(-50%) rotate(180deg);
		}










}



@media (max-width: 375px){

	.header_top .wrap {
		justify-content: unset;
	}

}


@media (max-width: 360px){

	/*----- 版頭右 -----*/
	.header_rightArea{
		padding-top: 70px;
	}

}