/*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: var(--primary_color);
	/*此為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: 1rem;
	font-weight: bold;
	color: #333;
	font-family: 微軟正黑體;
	text-align: center;
}


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

.header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	transition: 0.3s ease all;
	background-color: #fff;
	/* box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.3); */
	box-shadow: 0px 0px 20px -1px var(--fourth_color);
}

/*浮動*/
.header.fixed {
	transition: 0.3s ease all;
	padding: 0px;
	background-color: #fff;
}

.header>.wrap {
	position: relative;
	/* width: 70%; */
}


@media (max-width: 990px) {

	.header {
		padding: 0px;
		border-bottom: unset;
	}

	.header>.wrap {
		width: 85%;
		/* width: 100%; */
		position: relative;
	}



	/*浮動*/
	/* .header.fixed{
		padding: 5px 0px 0px;
		background-color: rgba(255,255,255,0.8);
	} */
}

/*================*/
/*-- 手機menu按鍵 --*/
/*================*/
.menu_btn {
	position: absolute;
	width: 20px;
	top: 13px;
	left: 20px;
	cursor: pointer;
	display: none;
	z-index: 99;
}

.menu_btn span {
	display: block;
	background-color: #333;
	height: 2px;
	margin: 4px 0px;
	border-radius: 3px;
}

/*點擊*/
.menu_btn.active span {
	background-color: #333;
}

.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;
		left: 0px;
		top: 33%;
	}
}

@media (max-width: 640px) {

	/*手機menu按鍵*/
	.menu_btn {
		left: 0px;
	}
}









/*================*/
/*-----跑馬燈-----*/
/*================*/

.newsticker {
	background-color: var(--fourth_color);
	/* 20250728修改背景色 by tom */
	background-position: center top;
	background-size: cover;
	background-repeat: repeat;
	border-style: none;
	border-width: 1px;
	border-radius: 0px;
	min-height: 20px;

	width: 100%;
	padding: 0.625rem 0px;
	text-align: center;
}

.newsticker a {
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.5;
	display: block;
	text-decoration: none;
}

@media(max-width:424px) {

	.newsticker a {
		font-size: 0.75rem;
	}
}

/*================*/
/*-----版頭左側-----*/
/*================*/

.header_leftBg>.left_header_iconArea {
	width: auto;
	position: unset;
}


.header_leftBg {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.header_iconArea {
	display: flex;
	flex-direction: row;
	margin: 0 -10px;
}

.header_icon {
	padding: 0.3125rem 10px;
	width: 1.5625rem;
	/*25*/
	/* height: 25px; */
	position: relative;
}

.header_icon a {
	display: block;
	position: relative;
	text-decoration: none;
}

.header_icon img {
	width: 100%;
	height: auto;
}

.header_icon.member img.after {
	width: 100%;
	height: auto;
	/* min-width: 17px; */
	box-sizing: border-box;

	border-radius: 50%;
	padding: 0;

}

.header_icon.member img.after.first {
	background-color: #946136;
	/* border-color: #F8BE74; */
	/* border-width: 1px; */
	border: 1px solid #946136;

}

.header_icon.member img.after.second {
	background-color: #dcca04;
	/* border-color: #F8BE74; */
	/* border-width: 1px; */
	border: 1px solid #dcca04;

}

.header_icon.member img.after.third {
	background-color: #D1D0CC;
	/* border-color: #F8BE74; */
	/* border-width: 1px; */
	border: 1px solid #D1D0CC;

}

.header_icon.member img.after.forth {
	background-color: #F7D943;
	/* border-color: #F8BE74; */
	/* border-width: 1px; */
	border: 1px solid #F7D943;

}


.header_icon.cart_icon .quantity {
	position: absolute;
	top: 2px;
	right: 0px;
	display: inline-flex;
	vertical-align: middle;
	width: 1.5625rem;
	/*25*/
	aspect-ratio: 1;
	line-height: 1;
	/* border-radius: 25px; */
	color: #000000;
	text-align: center;
	font-size: 0.9375rem;
	letter-spacing: 0px;
	transition: 0.3s ease all;
	font-family: var(--foreign_foreign);
	align-items: center;
	justify-content: center;
}








/* 版頭上方下拉------------------- */
.header_icon_down {
	position: absolute;
	/* top: -50px; */
	left: 50%;
	top: 33px;
	transform: translateX(-50%);
	transform-origin: top center;
	font-size: inherit;
	line-height: 1.1;
	z-index: 1;

	/* z-index: -999999;
	opacity: 0; */
	transition: 0.1s ease all;
	display: none;
	/*預設關閉*/
}



ul.header_icon_downBg {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: block;
	background-color: #fff;
	width: 10rem;
	/*160*/
	text-align: center;
	color: var(--dark_color);
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

ul.header_icon_downBg li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: block;
	/* border-bottom: 1px var(--fourth_color) solid; */
}

ul.header_icon_downBg li:not(:last-of-type) {
	border-bottom: 1px var(--fourth_color) solid;
}

ul.header_icon_downBg li a {
	color: inherit;
	display: flex;
	padding: 0 clamp(0.3226rem, 0.5208vw, 0.6250rem);
	/* 5.16px , 0.5208vw , 10.00px */
	padding-top: clamp(0.2581rem, 0.4167vw, 0.5000rem);
	/* 4.13px , 0.4167vw , 8.00px */
	padding-bottom: clamp(0.2581rem, 0.4167vw, 0.5000rem);
	/* 4.13px , 0.4167vw , 8.00px */

	justify-content: center;
	font-size: 0.8125rem;
}

ul.header_icon_downBg li:first-of-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

ul.header_icon_downBg li:last-of-type a {
	border-bottom: none;
}

/* ul.header_icon_downBg li a span.line */
ul.header_icon_downBg li:first-of-type span.line {
	background-color: var(--fourth_color);
	width: 1px;
	height: 0.9375rem;
	/*15*/
	/*margin: 0 clamp(0.3226rem, 0.5208vw, 0.6250rem);*/
	/* 5.16px , 0.5208vw , 10.00px */
	padding: 0;
}

.header_icon.cart_icon ul.header_icon_downBg .quantity {
	color: var(--fifth_color);
}

ul.header_icon_downBg li a:hover {
	opacity: 0.7;
}


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

	/* 版頭上方下拉------------------- */
	.header_icon_down {
		top: 31.5px;
		display: none;
	}

	.header_icon:hover .header_icon_down {
		display: block;
	}

	.firefox_body .header_icon_down {
		top: 24px;
	}


	.header_icon a:hover~.header_icon_down {}
}






@media (max-width: 990px) {
	.header_leftBg {
		padding: 10px 0px;
		display: grid;
		grid-template-columns: 1fr 200px 1fr;
	}

	.header_iconArea.left_header_iconArea {

		width: auto;

		margin: 0;

		padding: 0;
	}

	.header_iconArea.left_header_iconArea * {
		display: none;
	}

	.header_iconArea {
		margin: 0 -5px;
		justify-content: flex-end;
	}

	.header_icon {
		padding: 0 5px;
		width: 20px;
		/* width: 25px; */
		/* height: 25px; */
	}

	/* .header_icon img {
				width: 20px;
			} */
	.header_icon.cart_icon .quantity {
		top: 50%;
		left: 50%;
		font-size: clamp(0.6250rem, 0.6250vw, 0.7500rem);
		/* 10.00px , 0.6250vw , 12.00px */
		letter-spacing: 0px;
		transform: translate(-50%, calc(-50% + 1px));
	}




	ul.header_icon_downBg {
		width: 7.8125rem;
		/*125*/
	}

	ul.header_icon_downBg li a {
		font-size: 0.6875rem;
		padding: 8px 5px;
	}




}

/* @media (max-width: 474px) { */
@media (max-width: 640px) {
	/* modify by david 20220823 start */

	.header_leftBg {
		padding: 10px 0px;
		display: grid;
		grid-template-columns: 1fr 80px 1fr;
	}

	.header_iconArea {
		/* margin: 0 -5px; */
	}

	.header_icon {

		/* padding: 0 5px; */
		/* padding: 0 7px; */
		/* width: 20px;
			height: 20px; */

	}

	.header_icon.cart_icon .quantity {
		/* position: absolute;
			top: 0px;
			right: 0px;
			display: inline-block;
			vertical-align: middle;
			width: 20px;
			height: 20px;
			line-height: 26px;
			border-radius: 25px;
			color: #000000;
			text-align: center; */
		/* right: -5px;
			font-size: 0.75rem;
			letter-spacing: 0px; */
		/* transition: 0.3s ease all; */
	}

	/* modify by david 20220823 end */
}

/*================*/
/*----- logo -----*/
/*================*/
.logo {
	width: 18.75rem;
	/*300*/
	margin: 10px auto;
	transition: 0.3s ease all;
	/* float: left; */
	animation-name: bounceIn;
	animation-duration: 1.2s;
	animation-fill-mode: both;
	visibility: visible;
	/* padding: 0px 0px 0px 150px; */
}

/*浮動*/
.header.fixed .logo {
	transition: 0.3s ease all;
	width: 15.625rem;
	/*250*/
	/* padding: 0px 0px 0px 150px; */
}


.logo a {
	display: block;
	transition: 0.3s ease all;
}

.logo img {
	width: 100%;
	height: auto;
}

/*hover*/
.logo a:hover {
	transform: scale(0.9);
	animation: bounceIn;
}

.logo img.pc {}

.logo img.mobile {
	display: none;
}


@media (max-width: 990px) {
	.logo {
		transition: 0.3s ease all;
		width: 200px;
		/* 20241209 by peggy*/
		/*padding: 10px 0px 10px 50px;*/
		/* modify by david 20220823 start */
		/* padding: 0px 0px 0px 115px; */
		/* modify by david 20220823 end */
		float: none;
		padding: 0;
	}

	.logo img {
		width: 100%;
		height: auto;

	}

	/*浮動*/
	.header.fixed .logo {
		width: 200px;
		/* modify by david 20220823 start */
		/* padding: 0px 0px 0px 115px; */
		/* modify by david 20220823 end */
		padding: 0;
	}
}

@media (max-width: 640px) {

	.logo,
	.header.fixed .logo {
		width: 80px;
		float: none;
		margin: 0;
	}

	/* .logo img {
		width: 100%;
		height: auto;
	} */

	.logo img.pc {
		display: none;
	}

	.logo img.mobile {
		display: block;
	}


}

/* modify by david 20220823 start */
@media (max-width: 474px) {
	.logo {
		/* padding: 0px 0px 0px 80px; */
		/* padding: 0px 0px 0px 70px; */
		/* padding: 0px 0px 0px 100px; */
		/* padding: 0; */
	}

	.header.fixed .logo {
		/* padding: 0px 0px 0px 70px; */
		/* padding: 0px 0px 0px 100px;
		padding: 0; */
	}
}

/* modify by david 20220823 end */

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

.header_rightBg {}

.navbar {
	padding: 15px 0px 0px;
	width: 100%;
	text-align: center;
	display: flex;
	gap: 1.0417vw;
	justify-content: space-between;
}

/*浮動*/
.header.fixed .navbar {
	padding: 0px 0px;
}


.nav {
	/* float: left; */
	/* modify by pekey 20220721 */
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	font-size: clamp(1rem, 1.0417vw, 1.2500rem);
	/* 16.00px , 1.0417vw , 20.00px */


	width: calc((100% / 8) - (7 * 1.0417vw / 8));
}

.navTitle>a {
	display: block;
	text-decoration: none;
	color: #000;
	font-size: inherit;
	transition: 0.3s ease all;
	position: relative;
	text-align: center;
	padding: 10px 0px 10px;
	font-weight: bold;
}


.header.fixed .nav>a {
	transition: 0.3s ease all;
	padding: 10px 0px;
}


/*hover*/
.navTitle:hover>a {
	background-color: rgba(0, 0, 0, 0.07);
	transition: 0.3s ease all;
}

.nav_span {
	color: #000;
	position: absolute;
	top: 16px;
	right: 3px;
	font-size: 0.75rem;
}

/*主按鍵滑動效果(第二層)*/
.nav .navOpenList a .navOpenList_title:after {
	content: '';
	display: block;
	height: 1px;
	width: 0;
}

/*主按鍵_下拉選單*/
.navOpen.pc {
	position: absolute;
	left: 0;
	width: 11.25rem;
	/* padding: 3px 0px 0px; */
	display: none;
	z-index: 2;
}

.navOpen.pc.special {
	width: 333px;
}

.navOpen.pc .nOLO_list {
	padding: 5px 0px 5px 0px;
}

.navOpen.pc .nOLO_list a {}

.navOpenList {
	box-sizing: border-box;
	border-bottom: 1px solid #cccccc;
	border-left: 0 solid transparent;

	transition: border-left 0.3s ease;
}

.navOpenList:hover {
	border-left: 5px solid var(--third_color);
	padding-bottom: 0;
}

.navOpen.pc .navOpenList:last-of-type {
	border-bottom: none;
}

.navOpenList.special {
	width: 50%;
	text-align: left;
}

.navOpen.pc.special>.navOpenList {
	padding: 10px;
	box-sizing: border-box;
	height: 245px;
	width: 25%;
}

.navOpen.pc .navOpenList>.navOpenList_title {
	font-size: 0.9063rem;
	/* font-weight: bolder; */
	font-weight: 700;
	color: #000;
	border-bottom: 1px solid #F4F4F4;
	padding-bottom: 10px !important;
	margin-bottom: 5px;
	padding: 5px 0px;
	width: 100%;
}

.navOpen.pc.special .navOpenList>.navOpenList_title {
	display: inline-block;
}



.navOpen.pc .navOpenList a {
	color: #454545;
	font-size: clamp(.875rem, 2.1333vw, 1rem);
	line-height: 1.5;
	text-decoration: none;
	text-align: left;
	display: block;
	padding: 5px;
}


/*子選單_標題區塊*/
.nav_titArea {
	float: left;
	width: 20%;
	height: 100%;
	box-sizing: border-box;
	padding: 50px 40px;
}

.nav_titIn {
	color: #595757;
	font-size: 1.4em;
	text-align: right;
}



/*子選單_連結列表區塊*/
.nav_inArea {
	float: left;
	width: 80%;
	min-height: 132px;
	box-sizing: border-box;
	padding: 7px 0px 7px 40px;
	border-left: 1px solid #716764;
}

.nav_inContent {
	text-align: left;
}

.navIn_listArea {
	float: left;
	padding-right: 100px;
	box-sizing: border-box;
}

.navIn_list {
	display: inline-block;
	box-sizing: border-box;
	width: 24%;
	padding: 7px 0px;
	text-align: left;
}

.navIn_list a {
	display: inline-block;
	color: #595757;
	text-decoration: none;
	font-size: 1em;
	letter-spacing: 0;
}

/*hover*/
.navIn_list a:hover {}


/*mobile版*/
.navOpen.mobile {
	display: none;
	opacity: 0;
	z-index: -999999;
	position: absolute;
}

/*mobile 箭頭*/
.navArrow_down {
	width: 40px;
	height: 35px;
	display: block;
	position: absolute;
	top: -3px;
	right: 0px;

	display: none;
}

.nav .navArrow_down:after {
	content: "";
	transition: 0.3s ease all;
	width: 10px;
	height: 10px;
	display: none;
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 50;
	transform-origin: center;
	-webkit-transform: translateY(-75%) rotate(45deg);
	transform: translateY(-75%) rotate(45deg);
}

.nav .navArrow_down.active:after {
	transform: translateY(-30%) rotate(225deg);
}

.navArrow2 {
	justify-content: center;
	top: 8px;
	right: 22px;
	position: absolute;
	/* width: 20px;
					height: 33px; */
	width: 20px;
	height: 20px;
}

.navArrow2:before {
	content: '+';
	width: 20px;
	height: 20px;
	font-size: 1.8125rem;
	position: absolute;
	right: 4px;
	top: -15%;
	z-index: 50;

}

.navArrow2.active:before {
	content: '-';
	width: 20px;
	height: 20px;
	font-size: 1.8125rem;
	position: absolute;
	right: 4px;
	top: -15%;
	z-index: 50;

}


/*hover*/
.nav:hover .navOpen.pc {
	display: block;
	transition: 0.3s ease all;
	max-height: calc(44px * 5);
	overflow-y: auto;
	overflow-y: unset;
	border: 1px solid #cccccc;
}

.nav:hover .navOpen.pc::-webkit-scrollbar {
	width: 10px;
	background-color: #eeeeee;
}

.nav:hover .navOpen.pc::-webkit-scrollbar-thumb {
	background-color: var(--fourth_color);
	border: 2px solid #f0f0f0;
	border-radius: 5px;
}

.navOpenBg {
	background: #fff;
	position: relative;
	box-sizing: border-box;
	/* box-shadow: 0px 5px 29px rgba(0, 0, 0, 0.3); */
}

.navOpen.pc.special>.navOpenBg {
	display: flex;
	flex-wrap: wrap;
}

/*.navOpenBg:before {
						position: absolute;
						content:'';
						border-bottom: solid 8px rgba(0,0,0,0.6);
						border-left: solid 12px rgba(255,255,255,0);
						border-right: solid 12px rgba(255,255,255,0);
						top:-8px;
						left:50%;
						margin:0px 0px 0px -12px;
					}*/

.navOpen.pc .navOpenList a {}

/*hover*/
.navOpen.pc .navOpenList a:hover {}


@media (max-width: 990px) {

	.header_rightBg {
		position: fixed;
		width: 100%;
		top: 115px;
		border-top: 1px solid #ccc;
		left: -100%;
		height: 100%;
		box-sizing: border-box;
		background: #fff;
		overflow-y: auto;
		z-index: 4;
		margin: 0;
		float: none;
		display: block;
		flex-direction: unset;
		align-items: unset;
		transition: 0.3s ease all;
	}

	.header_rightBg.active {
		left: 0px;
	}

	/*主按鍵*/
	.navbar {
		padding: 0;
		margin: 0;
		flex-direction: column;
	}

	/* .navbar {
		position: fixed;
		width: 300px;
		top: 0px;
		right: -300px;
		height: 100%;
		box-sizing: border-box;
		background: rgb(31 31 31 / 1);
		transition: 0.3s ease all;
		padding: 66px 0px;
		overflow-y: auto;
		z-index: 4;
		margin: 0;
	}
		.header.fixed .navbar{
			padding: 74px 0px;
		}
		.navbar.active {
			right: 0px;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
		} */
	.nav {
		float: none;
		width: 100%;
		position: relative;
		padding: 0 0px;
		box-sizing: border-box;
	}

	.nav:last-of-type>a {
		/* padding: 15px 0; */
	}

	/*hover*/
	.nav:hover>a {
		background-color: #fff;
	}

	.nav.geneinfo:after {
		position: absolute;
		content: '';
		border-top: solid 5px #999;
		border-left: solid 3px rgba(255, 255, 255, 0);
		border-right: solid 3px rgba(255, 255, 255, 0);
		top: 19px;
		right: 15px;
	}

	.navArrow_down {
		display: none;
		top: 5px;
		right: 0;
		/* background-color: #333; */
	}

	.header_rightBg.active .navArrow_down {
		display: block;
	}

	.nav .navArrow_down:after,
	.header.fixed .nav .navArrow_down:after {
		border-bottom: 2px solid #959595;
		border-right: 2px solid #959595;
		right: 16px;
		display: block;
	}

	/* .header.home .nav .navArrow_down:after {
					border-bottom: 2px solid #959595;
					border-right: 2px solid #959595;
					right: 10px;
				} */

	.navArrow {
		right: -16px;
	}

	.navArrow::after {
		-webkit-transform: translateY(-75%) rotate(-45deg);
		transform: translateY(-75%) rotate(45deg);
	}

	.nav>a {
		border: none;
		border-radius: 0px;
		text-align: left;
		padding: 15px 45px 15px 15px;
		color: #000;
		font-size: 1rem;
	}

	.nav>a::before {
		content: ' ';
		display: none;
	}

	.nav>a:hover::before {
		content: ' ';
		display: none;
	}

	.header.home .nav>a {
		color: #000;
	}

	.header.fixed .nav>a {
		/* modify by david 20220906 start */
		/* transition: 0.3s ease all;
					padding: 13px 15px;
						color: #ffffff; */
		padding: 15px 45px 15px 15px;
		font-size: 1rem;
		/* modify by david 20220906 end */
	}



	/*當前模式*/
	.nav.active>a {
		background: transparent;
	}


	/*展開選單*/
	.navOpen {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		width: auto;
		border-radius: 0px;
		background: #444;
	}

	.navOpen:before,
	.navOpen:after {
		border-bottom: solid 8px #444;
		left: 23px;
	}

	.nO_list a {
		text-align: left;
		padding: 15px 15px;
	}


	/*hover*/
	.nav:hover .navOpen.pc {
		display: none;
	}

	.fixed_nav:hover .navOpen.pc {
		display: none;
	}

	.navOpen.mobile {
		display: none;
		opacity: 1;
		z-index: 1;
		position: relative;
		/* max-height: 200px; */
		/* overflow-y: auto; */
	}

	.navOpenBg {
		display: block;
		background: #F2F2F2;
		/* padding: 10px 0px 0px 0px; */
		border-bottom: 1px solid #d3d3d3;
		box-shadow: 0 2px 29px rgba(0, 0, 0, 0);
	}


	.navOpen.mobile .navOpenList {
		height: auto;
		/* padding: 10px 0px; */
		padding: 0;
		width: 100%;
		position: relative;
	}

	.navOpen.mobile .navOpenList>.navOpenList_title {
		/* padding: 15px 15px; */
		padding: 15px 50px 15px 15px;
	}

	.navOpen.mobile .navOpenList > a  ,
	.navOpen.mobile .sstc_title .in{
		display: block;
		text-decoration: none;
		color: #000;
		text-decoration: none;
		/* font-size: 0.875rem;
		line-height:22px; */
		text-align: center;

		/*padding: 12px 15px;*/
		padding: 12px 15px;
		transition: 0.3s ease all;
	}

	.navOpenList>a:hover {
		opacity: 0.7;
	}

	/*第二層*/
	.nOL_open {
		display: block;
	}

	.nOLO_list {
		text-align: center;
	}

	.nOLO_list>a {
		display: block;
		color: #818181;
		padding: 10px 0;
	}

	/* .navOpenList:hover .nOL_open {
						display: inherit;
					} */
	.navOpenBg2 .nOL_open.active {
		display: block;
		transition: 0.3s ease all;
	}



	/*主按鍵滑動效果(第一層)*/
	.nav>a:after {
		display: none;
		height: 0px;
	}

	.nav>a:hover:after {
		display: none;
		height: 0px;
	}


	/*主按鍵滑動效果(第二層)*/

	.nav .navOpenList a .navOpenList_title {}

	.nav .navOpenList a .navOpenList_title:after {
		display: none;
		height: 0px;
	}

	.nav .navOpenList a .navOpenList_title:hover:after {
		display: none;
		height: 0px;
	}

	/*主按鍵滑動效果(第三層)*/
	.nav .navOpenList .nOL_open .nOLO_list_title:after {
		display: none;
		height: 0px;
	}

	.nav .navOpenList .nOL_open .nOLO_list_title:hover::after {
		display: none;
		height: 0px;
	}



	/*第二層*/
	.nOL_open_mobile {
		display: none;
		background-color: #E5E5E5;
	}

	.nOLO_mobile_list {
		padding: 0px 15px;
	}

	.nOLO_mobile_list a {
		display: block;
		text-decoration: none;
		border: none;
		border-radius: 0px;
		text-align: left;
		padding: 15px 0px;
		color: #000;
		font-size: 1rem;
	}

}

@media (max-width: 840px) {

	.header_rightBg {
		/* top: 140px; */
		/* right: -879px; */
	}
}

@media (max-width:640px) {

	.header_rightBg {
		top: 104px;
		/* right: -879px; */
	}
}

@media (max-width: 326px) {

	.header_rightBg {
		/* top: 110px; */
		/* right: -879px; */
	}
}






/*================================*/
/*----- 語系 language -----*/
/*================================*/
.language_areaPC {
	position: absolute;
	/* 修改語系icon位置 modify by peggy 20240807 */
	right: 0px;
	top: 29px;
}

.language {
	/* padding: 0 11px 0 0;
	text-align: center; */
	/* border-radius: 26px; */
	/* background-color: #fff; */
	/* border: solid 0.5px #bfbfbf00; */
}

.header.fixed .language i {
	/* color: #000; */
}

.language i {
	font-size: 1.5625rem;
	line-height: 25px;
	color: #000;
}

.language>a {
	font-size: 0.75rem;
	line-height: 34px;
	color: #58595b;
	display: block;
	/*border: 1px #c3c3c3 solid;
		border-radius: 5px;*/
	text-decoration: none;
	padding: 0px 0px 0px 0px;
	/* position: relative; */
	/* background-color: #b0b0b0; */
}

.header.fixed .language>a:before {
	/* border-top: solid 7px #000; */
}

.language>a:before {
	position: absolute;
	content: "";
	/* 修改語系下拉箭頭顏色 modify by peggy 20240807 */
	border-top: solid 7px #777;
	border-left: solid 4px rgba(255, 255, 255, 0);
	border-right: solid 4px rgba(255, 255, 255, 0);
	/* top: 50%; */
	top: 8px;
	right: -8px;
	/* transform: translateY(-45%); */
}


.language_list {
	position: absolute;
	width: 75px;
	top: 25px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: var(--primary_color);
	border-radius: 3px;
	display: none;
	margin: 5px 0px 0px;
	box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
	font-size: 0.875rem;
}

.language_list {
	text-align: center;
}

.language_list_in>a {
	color: #fff;
	display: inline-block;
	text-decoration: none;
	font-size: 0.75rem;
	line-height: 24px;
	text-decoration: none;
}

.language>a:hover,
.language_list>a:hover {
	opacity: 0.5;
}



.header.fixed .language_areaPC {
	top: 25px;
}

/* 手機版語系 */

.language_areaMB {}

.language_content {
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
}

.language_content_in a {
	color: #cecece;
	line-height: 24px;
}

.language_areaMB {
	display: none;
}

@media(max-width:990px) {

	/* .header_icon.lang {
		display: none;
	} */
	.language_areaMB {
		display: block;
	}
}














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

.search_header_icon {
	position: relative;
}


/*PC搜尋區塊------------------------------------------------*/

.search_areaPC {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
	/* display: inline-block; */
	/* vertical-align: middle; */
	top: 5px;
	right: 20px;
}

/*搜尋icon*/
.search_iconPC {
	transition: 0.3s ease all;
}

.search_iconPC label {
	position: relative;
	display: block;
}

.search_iconPC i {
	font-size: 1.75rem;
	color: #777;
	font-weight: 300;
	display: block;
}

/*hover*/
.search_iconPC:hover label {
	opacity: 0.5;
	/*background: #d6d6d6;*/
	transition: 0.3s ease all;
}


.search_inAreaPC {
	-webkit-transition: top .2s;
	transition: top .2s;
	z-index: 15;
	position: absolute;
	width: 150px;
	z-index: 2000;
	overflow: hidden;
	display: none;
	top: 0;
	right: 40px;
	box-sizing: border-box;
	padding: 0px 0px;
	border-radius: 1px;
	/* background-color: #da84849e; */
}

input.send {
	display: none;
}

/* 浮動 */
.header.fixed .search_inAreaPC {
	/* top: 36px; */
	top: 0;
}

/*搜尋類別*/
.search_categoryAreaPC3 {
	position: absolute;
	left: 15px;
	width: 59px;
	z-index: 2;
}

.search_categoryAreaPC3 select {
	color: #fff;
	background: #000 url(../images/select_arrow_white.png) no-repeat;
	background-size: 13px;
	background-position: right;
	padding-right: 18px !important;
}

.search_inBoxPC {
	position: relative;
	width: 100%;
	/* padding: 0px 20px 0px 0px; */
	/* padding: 0px 50px 0px 0px; */
	padding: 0;
	box-sizing: border-box;
}

.search_inBoxPC input {
	background: transparent;
	border: 0px;
	color: rgba(92, 92, 92, 1);
	font-size: 1rem;
	line-height: 27px;
	height: 27px;
	/* padding: 5px 10px; */
	padding: 0;
	border-radius: 0;
	width: 100%;
	border-bottom: 1px solid #707070;
}

/* .search_inBoxPC input[type="text"]:focus{
			border: 0px;
		} */

.search_inBoxPC a {
	z-index: 2002;
	color: #fff;
	position: absolute;
	right: 0px;
	top: 10px;
	text-decoration: none;
}

.search_inBoxPC span {
	display: inline-block;
	vertical-align: middle;
	color: rgba(129, 129, 129, 1);
	font-size: 1.25rem;
	font-weight: 200;
}

.search_closePC {
	font-size: 1.375rem;
	font-weight: lighter;
}










/*搜尋mobile-----------------------------------------*/
.siteSearch {
	display: none;
	position: relative;
	padding: 4px 22px;
}


.siteSearch_left {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 30px;

	display: none;
}

.siteSearch_left select {
	font-size: 0.75rem;
	color: #333;
	padding: 11px 18px 11px 7px;
	border-radius: 0px;
	border: none;
	border-right: 1px #dadada solid;
}


.siteSearchBg {
	/*border: solid 2px #006e36;*/
	border-radius: 0px;
	position: relative;
	/*width:191px;*/
	box-sizing: border-box;
	padding-right: 30px;
	background: #fff;
	width: auto;
}

.siteSearchBg input[type='text'] {
	border: none;
	background: #f7f7f7;
	/*height:23px;
				line-height:23px;
				font-size:13px;*/
	padding: 0px 6px 0px 13px;
	height: 38px;
	line-height: 38px;
	font-size: 0.9375rem;
}

.siteSearchBg label {
	position: absolute;
	top: 0px;
	right: 0px;
	/* height: 23px; */
	box-sizing: border-box;
	background-color: #f7f7f7;
	/* padding: 2px 6px; */
	height: 38px;
	padding: 12px 12px;
}

.siteSearchBg i {
	font-size: 1.125rem;
	color: #d6d6d6;
}

.siteSearchBg input[type='submit'] {
	display: none;
}








@media (max-width: 990px) {

	.search_inAreaPC {
		/* right: 0;
		top: 41px;
		background-color: #fff;
		padding: 5px; */
	}

	.search_inAreaPC {
		right: 30px;
	}

	.search_inBoxPC input {
		font-size: 0.8125rem;
		line-height: 23px;
		height: 23px
	}


	/*PC搜尋區塊-----------------------------*/
	/* .search_areaPC{
		display:none;
	} */

	/*搜尋mobile-----------------------------------------*/
	/* .siteSearch {
		display:block;
		margin-bottom: 5px;
		padding: 0;
	} */

}


@media (max-width: 768px) {

	.search_inAreaPC,
	.header.fixed .search_inAreaPC {
		right: 0;
		top: 41px;
		background-color: #fff;
		padding: 5px;
		box-shadow: 1px 9px 15px #00000038;
	}
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 modify by peggy 20241014 start */
@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {

	/* .header .nav>a {

		font-size: 1.2188rem;
	}

	.header.fixed .nav>a {

		font-size: 1.2188rem;
	}

	.navOpen.pc .navOpenList a {
		font-size: 0.9063rem;
	} */
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 modify by peggy 20241014 end */





.nav.vertical_nav .navOpen.pc.sstc {
	width: 225px;
}

.nav.vertical_nav .sstc_title {
	padding: 10px 0;
	margin: 0;
	border-left: none;
}

.nav.vertical_nav .sstc_bg {
	margin-top: 10px;
}

.nav.vertical_nav .sstc_item {
	position: relative;
	width: 100%;
}

@media (max-width: 1500px) {

	.nav>a,
	.nav .navTitle>a {
	}

	.header.fixed .nav>a,
	.header.fixed .nav .navTitle>a {
	}

}


@media (max-width: 1200px) {

}

@media(max-width:1100px) {

	.nav.vertical_nav::after {
		content: "";
		display: block;
		width: 1px;
		max-height: calc(20px * 1.2);
		height: 100%;
		background-color: #fff;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		/* 垂直居中 */
		z-index: 10;
		display: none;
	}

	.nav.vertical_nav.mobile {
		display: block;
	}
}



			/*主按鍵_下拉選單*/						
			.navOpen {
			}
			.navOpen.pc {
				position:absolute;
				width:175px;
				display:none;
				z-index: 2;
				top: 35px;
				left: 0;
				-webkit-transform: translateX(-50%) translateY(0%);
				transform: translateX(-50%) translateY(0%);
				transform: unset;
			}		
			.navOpenBg.pc.second {
				display:none;
			}					
			
			

			.nav:hover .navOpenBg.pc.second {
				display:block;
			}
			.header.fixed .nav:hover .navOpenBg {
				visibility: visible !important;
			}


/* 第二層----------------------------- */
.nOL_open {
    display: none;
    z-index: 10;
    background: #fff;
    /* position: absolute;
    left: 100%;
    top: -10px;
    top: 0;*/
    width: 100%; 
    background-color: transparent;
    background-color: var(--fourth_color);
    box-sizing: border-box;
    backdrop-filter: blur(3px);
}
.navOpen.pc .nOL_open {
    position: absolute;
    left: 100%;
    top: -10px;
    top: 0;
    /* width: 100%;
    background-color: transparent;
    background-color: var(--fourth_color);
    box-sizing: border-box;
    backdrop-filter: blur(3px); */
}
.navOpen.mobile .nOL_open {
    /* display: none;
    z-index: 10;
    background: #fff;
    position: absolute;
    left: 100%;
    top: -10px;
    top: 0;
    width: 100%;
    background-color: transparent;
    background-color: var(--fourth_color);
    box-sizing: border-box;
    backdrop-filter: blur(3px); */
}

.nav.vertical_nav .sstc_item{
	position: unset;
	/* display: block; */
}
.nav.vertical_nav .sstc_item a{
	display: block;
	text-decoration: none;
}
.nav.vertical_nav .nOL_open{
	top: unset;
	/* display: block; */
	left: calc(100% - 5px);
}
.nav.vertical_nav .navOpen.mobile .sstc_title{
	padding: 0;
	position: relative;
}

.nav.vertical_nav .sstcWrap{
	display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
	background-color: #fff;
}
.nav.vertical_nav  .navOpen.pc  .sstcWrap{
	/* display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    vertical-align: middle;
    align-items: stretch;
    align-content: flex-start; */
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
	max-height: calc(54px * 9);
	background-color: #fff;
}
.nav.vertical_nav .navOpen.mobile .sstcWrap{
	background-color: #F2F2F2;
}



	.nav.vertical_nav .navOpen.pc .sstcWrap::-webkit-scrollbar {/*滾動條整體樣式*/
		width: 0.3125rem;     /*高寬分別對應橫豎滾動條的尺寸*/
		height: 0.3125rem;
	}
	.nav.vertical_nav .navOpen.pc .sstcWrap::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
		border-radius: 0.3125rem;
		/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
		background: var(--fourth_color);
		/*background: #fff0; */
		/* background-image: linear-gradient(to top, #afafaf 0%, #e5e5e5 100%);		 */

		border-radius: 0.3125rem;
	}
	.nav.vertical_nav .navOpen.pc .sstcWrap::-webkit-scrollbar-track {/*滾動條裡面軌道*/
		/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
		border-radius:0.3125rem;
		background: #fff0;
		/* background: #EDEDED; */
	}	


.nav.vertical_nav .pc .sstc_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nav.vertical_nav .pc .sstc_item:hover  .nOL_open {
    display: block;
    max-height: calc(44px * 5);
    overflow-y: auto;
}

.navOpen.mobile .sstc_title .in{
	/* padding-right: 45px; */
}
.navOpen.mobile .sstc_item a {
    color: #fff;
}



/* 箭頭------------------------------- */
.navArrow {
    width: 47px;
    height: 47px;
    display: block;
    position: absolute;
    top: 5px;
    right: -2px;
}
/* modify by peggy 20250811 */
.navTitle .navArrow {
	width: 36px;
    height: 36px;
    top: 0;
	display: none;
}
.navArrow:after {
    content: "";
    width: 6px;
    height: 6px;
    display: block;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    position: absolute;
    right: 20px;
    top: 50%;
    z-index: 50;
    -webkit-transform: translateY(-75%) rotate(-45deg);
    transform: translateY(-75%) rotate(-45deg);
}

/* 箭頭------------------------------- */

.navOpen.pc .navArrow {
    display: block;
    position: relative;
    top: unset;
    right: unset;
    height: auto;
}
.navOpen.mobile .navArrow {
    top: 0px;
	right:0;
	height: 40px;
}


@media (max-width: 990px){
	/* modify by peggy 20250811 */
	.navTitle .navArrow {
		display: block;
	}
}