@import url(../css/style_reset.css);         /* 消除瀏覽器預設樣式。 */
@import url(../css/style_components.css);    /* 首頁+內頁都需要的 UI 元件 */
@import url(../css/style_variables.css);     /* 存放全域變數（如顏色、字體大小、間距）*/




/* ========================================================= */
/* Section 1：版頭容器 .header                               */
/* ========================================================= */











/*-------版頭----------------------------------------------------------------------------*/
.header {
}
	.header .wrap {
		position:relative;
	}
	.header > .wrap {
		/* position:relative; */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: clamp(0.322rem, 0.52vw, 0.625rem);
	}
		.top_line {
			background: #e6e6e6;
			height: .0625rem;
			width: 100%;
			margin: calc(clamp(0.322rem, 0.52vw, 0.625rem) * 1.1) 0rem 0; /*修改 by pekey 20170419*/
		}
		/*logo*/
		.logo {
			/* float:left; */
		}
		.logo_in {
			margin: 0;
			padding: 0;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			color      : inherit;
		}


			.logo img {
			width: 100%;
			height: auto;
			}
				.logo_s {
				}
				.logo_b {
					display:none;
				}






		.header_right {
			/* min-width: clamp(11.603rem, 18.75vw, 22.5rem); */
			padding: clamp(0.483rem, 0.78vw, 0.938rem) 0 clamp(0.806rem, 1.3vw, 1.563rem);
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			gap: clamp(0.322rem, 0.52vw, 0.625rem);
			box-sizing: border-box;
		}
				
		.header_right .search {
			/* float:right; */
			/*width:18.875rem;*/ /*modify by pekey 20180917*/
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
			.header_right .search input[type="text"] {
				/* float:left; */
				/*width: 70%;*//*modify by pekey 20180917*/
				/* max-width: 50%; */
				min-width: clamp(5.801rem, 9.37vw, 11.25rem);
				/*height: 1.625rem;*/
				/*height:1.75rem;*/  /*修改 by pekey 20170601*/
				height: 1.875rem;  /*modify by pekey 20180917*/
				line-height: normal;
				padding: 0rem 0.625rem;
				border-radius: 1rem;
			}
			.header_right .search input[type="submit"], 
			.header_right   .search_but {
				border: none;
				background: none;
				margin: 0;
				padding: 0;
				font-size: inherit;
				font-weight: inherit;
				line-height: inherit;
				color      : inherit;
				cursor     : pointer;
				/* float:left; */
				/* width: 10%; */
				/* height: 1.625rem; */
				width: 1.625rem;
				max-width: 1.625rem;
				aspect-ratio: 28 / 26;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 99.9%;
				background-image: url(../images/search_but.webp) ;
				border: none;
				outline: none;
				cursor: pointer;
				vertical-align: top;
				/* margin-left: .4375rem; */
			}
		






		.community_icon{
			margin: 0;
			padding: 0;
			list-style-type : none;
			display: block;
			/* float:right; */
			/* margin:-0.3125rem 0rem 0rem 0rem; */
			display: flex;
			align-items: center;
			/* flex-wrap: wrap; */
			gap: clamp(0.322rem, 0.52vw, 0.625rem);
		}
		.community_icon li{
			margin: 0;
			padding: 0;
			list-style-type : none;
			display: block;
			min-width: clamp(1.128rem, 1.82vw, 2.188rem);
			width: clamp(1.128rem, 1.82vw, 2.188rem);
		}
			.community_icon li a{
				list-style-type : none;
				display: block;
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
			}
				.community_icon li img{
					width: 100%;
					height: auto;
				}
				.line_icon{
					/* float:right;
					margin:-0.3125rem 0rem 0rem 0rem; */
				}

				.fb_icon{
					/* float:right;
					margin:-0.3125rem 0rem 0rem 0rem; */
				}











		
		
		/*手機menu按鍵*/
		.menu_btn {
			border: none;
			background: none;
			margin: 0;
			padding: 0;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			color      : inherit;
			cursor     : pointer;

			position:absolute;
			width: 1.25rem;
			top: 50%;
			right: 1.25rem;
			cursor:pointer;
			display:none;
			/*z-index: 99;*/
			z-index: 1001;    /*新增 by pekey 20170622*/
			margin: -0.625rem 0rem 0rem;
			margin: 0;
		}
			.menu_btn span {
				display:block;
				background:#005984;
				height:.125rem;
				margin: .25rem 0rem;
				transition:0.3s ease all;
				border-radius:.1875rem;
			}
				/*點擊*/
				.menu_btn.active {
					top: 1.125rem;
					position: fixed;
					margin: 0rem;
					transform: translateY(0%);
				}
					.menu_btn.active span {
						background:#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;
					}
		
		/*主按鍵*/
		.navbar {
			/* margin: 0rem -1.125rem 0rem 0rem; */
			width: 100%;
			display: flex;
			justify-content: space-between;
		}


			.navbar_in {
				margin: 0;
				padding: 0;
				list-style-type : none;
				display: block;
				width: inherit;
				display: inherit;
				justify-content: inherit;
				flex-direction: inherit;
			}



			.nav {
				margin: 0;
				padding: 0;
				list-style-type : none;
				display: block;
			    /*display: inline-block;
				width: 19%;*/
			    /* float: left; */
			    box-sizing: border-box;

				width: calc((100% / 5) - (4 * 0.0625rem / 5) - 0.0063rem); /* 5欄平均寬度，扣除間距 */
			}
				.nav a {
					text-align: center;
					display:block;
					text-decoration:none;
					position:relative;
					color:#979797;
					font-size: 1.019rem; /*修改 by pekey 20170420*/
					padding: clamp(0.58rem, 0.94vw, 1.125rem);
					/* padding:.625rem 1.125rem 1.125rem 1.125rem; */  /*修改 by pekey 20170419*/
					/* letter-spacing: .25rem; */ /*修改 by pekey 20170419*/
					font-weight: 600;
				}
					.nav a:before {
						width:0.0625rem;
						height:1.0625rem;
						position:absolute;
						content:'';
						left:-0.0625rem;
						background:#777;
					}
					.nav:nth-of-type(1) a:before {/*.nav:first-of-type a:before {*/  /*modify by pekey 2018017*/
						display:none;
					}
					.nav a:hover {
						color:#8ca501;
					    transition: 0.5s ease all;
					}
					.nav.active > a {
						color:var(--primary_color);
					}


					
	@media (max-width: 1100px){
		/*logo*/
		.logo{
			/* width: 180px; */
		}
			.logo_s {
				/* display:none; */
			}
			.logo_b {
				/* display: block;
				width: 100%;
				height: auto; */
				/* display: block; */
			}
			
			
		.header_right .search {
			/* padding: 15px 0px; */
		}	
		
		/*主按鍵*/
		.navbar {
			margin:0px;
		}
	}






		@media (max-width: 1000px){
			/*手機menu按鍵*/
			.menu_btn {
				display:block;
			}
			
			/*主按鍵*/
			.navbar {
				position: fixed;
				/*width: 9.75rem;*/
				width: 12.5rem;
				top: 0rem;
				/*right: -9.75rem;*/
				right: -12.5rem;
				height: 100%;
				box-sizing: border-box;
				/*background: rgba(0, 14, 43, 0.72);*/
				background: rgba(87, 87, 87, 0.72);
				transition: 0.3s ease all;
				padding: 3.5rem 0rem 0rem;
				overflow-y: scroll;
				/*z-index: 3;*/
				z-index: 1000;    /*新增 by pekey 20170622*/
				flex-direction: column;
				justify-content: unset;
			}
			.navbar.active {
				right: 0rem;
				box-shadow: 0rem 0rem 1.25rem rgba(0, 0, 0, 0.16);
			}
				.nav {
					float:none;
					width:auto;
				}
					.nav a {
						color:#fff;
						/* font-size: .9375rem; */
						/* padding: .9375rem .75rem; */
						padding: 0.938rem;
					}
			.header_right .search {
				/* float:right; */
				/*width:19.5rem;*/ /*modify by pekey 20180917*/
				/* width: 25rem; */
				/* padding: .625rem 0rem; */
			}
				.header_right .search input[type="text"] {
					/*width: 60%;*/ /*modify by pekey 20180917*/
					width: 42%;
				}
				.fb_icon {
					padding-right: 2.8125rem;
				}
		/* }
		

@media (max-width: 640px){ */
	/*logo*/
	.logo img {
		height:auto;
		width: 9.75rem;
	}
		.menu_btn{
			top: 50%;
			transform: translateY(calc(-50% + .25rem));
		}
		.header_right  {
			padding: 0;
			margin: 0;
			padding-right: 1.875rem;
		}	
		.header_right .search {
			/* width:100%; */
		}	
			.community_icon li {
				padding-right: 0rem;
				min-width: unset;
				width: 1.25rem;
			}
			.lang_area{
				display: none;
			}
			.header_right .search input[type="text"]{
				/* width:70%; */
			}
			.header_right .search input[type="submit"]{
				/* width: 10%; */
			}
}






@media (max-width: 640px){


.community_icon li {
	width: 1.875rem;
}


}










/*語系*/
.lang_area {
	/* float:right; */
	box-sizing: border-box;
	/* margin-right: .625rem; */
}
	.lang_area select {
		width: 5.625rem;
		/*width: 4.8125rem;*/
		font-size: .75rem;
		color: #5e5e5e;
		border: .0625rem solid #aeaeae;
		/*border-radius: .25rem;*/
		border-radius: 1.875rem;
		padding: 0rem .8125rem;
		text-align: center;
		height: 1.875rem;
		line-height: 1.75rem;
		cursor: pointer;
		background: #fff url(../images/select_arrow2.webp) no-repeat;
		background-size: 1.125rem;
		/*background-position: 3.3125rem .5313rem;*/
		background-position: 4.375rem .5313rem;
		padding-right: 1.5625rem !important;
	}

/*手機版語系*/
.nav.mobile_language_Area{
	display: none;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 1.25rem;
}
	.nav.mobile_language_Area select{
		width: 100%;
		border-radius: 0rem;
		padding: .5625rem 0rem .625rem .9375rem;
		background: #fff url(../images/select_arrow.webp) no-repeat;
		background-size: .8125rem;
		background-position: 10.375rem;
		padding-right: 1.125rem !important;
	}


@media (max-width: 768px){	
/*語系*/
.lang_area {
	display: none;
}
	/*手機版語系*/
	.nav.mobile_language_Area{
		display: block;
		border: 0rem;
		padding: 0rem 0rem .3125rem;
		padding: 0;
	}
	

		.header_right .search {
			/* padding: .875rem 0rem; */
		}
			.header_right .search input[type="text"] {
				/* width: 66%;  */
			}
	
}



@media (max-width:640px){	


	.menu_btn{
		top: 50%;
		transform: translateY(calc(-50% + -1.5625rem));
	}
	.header_right  {
		width: 100%;
		padding: 0;
		padding: 0 0 0.875rem;
		/* flex-direction: row; */
	}

	.header_right .search {
		width: 100%;
		justify-content: unset;
	}


	.header_right .search input[type="text"] , 
	.header_right .search .search_text {			
		width: fit-content;
	}



}








/* 搜尋的廣告區塊如果要隱藏，只要針對此 class 下隱藏樣式即可 */
.gsc-adBlock{
	display: none;
}