.sidebarCtrl, .searchCtrl {width:44px;height: 44px;font-size:0;box-shadow: none;}

/* 側欄開關 */
.sidebarCtrl{
	--tinge: #333;
	--bgc: #ddd;

	position:absolute;left:0;top:0;bottom:0;
	background-color: var(--bgc);
}
.sidebarCtrl::before{
	content:'';position:absolute;width:24px;height:2px;
	top: calc(50% - 1px);left: calc(50% - 12px);
	background:var(--tinge);
	box-shadow: var(--tinge) 0 -8px 0, var(--tinge) 0 8px;
}

.sidebarCtrl:hover,
.sidebarCtrl:focus{
	box-shadow: none;
	background-color: var(--bgc);
}
.sidebarCtrl:focus-visible{
	outline: 2px solid var(--bgc);
	outline-offset: -2px;
}

/* 查詢開關、圖示 */
.searchCtrl{
	--tinge: #333;
	--bgc: #ddd;

	position:absolute;right:0;top:0;
	background-color: var(--bgc);

}
.searchCtrl::before, .searchCtrl::after{content:'';position:absolute;}
.searchCtrl::before{
	width:20px;height:20px;
	top: calc(50% - 13px); left: calc(50% - 13px);
	border-radius:50%; border:2px solid var(--tinge);
}
.searchCtrl::after{
	left:calc(50% + 5px);top:calc(50% + 7px);
	width:11px;height:4px;transform:rotate(45deg);
	border-radius:0 2px 2px 0;
	background-color: var(--tinge);
}
.searchCtrl:hover, .searchCtrl:focus{
	box-shadow: none;
	background-color: var(--bgc);
}
.searchCtrl:focus-visible{
	outline: 2px solid var(--bgc);
	outline-offset: -2px;
}
/* X */
.searchCtrl.close{
	--bgc: #333;
	--tinge: #fff;
}
.searchCtrl.close::before,
.searchCtrl.close::after{
	width:28px;height:2px;left:calc(50% - 14px);top:calc(50% - 1px);
	background-color: var(--tinge);
}
.searchCtrl.close::before{
	border:none;border-radius:0;
	transform:rotate(45deg);
}
.searchCtrl.close::after{transform:rotate(-45deg);}

@media screen and (min-width:600px){
	.sidebarCtrl, .searchCtrl {width:64px;height: 64px;}

	.sidebarCtrl{
		--gap:9px;
	}
	.sidebarCtrl::before{ width: 30px; left: calc(50% - 15px); }
	.searchCtrl::before{ 
		width:25px; height:25px;
		top: calc(50% - 18px); left: calc(50% - 18px);
	}
}


/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* header 2014 */
.header{
	--bgc: #ffac0e;
	--bgcFixed: rgba(255,172,14,.95);
	--focusOutlineColor: #f00;

	position: relative; z-index: 5000;
	padding:0 44px;height:44px;
	border-bottom:1px solid #fff;
	/* background-color: var(--bgc); */
}
.header h1 {height: 100%; margin: 0 auto; padding:4px 0;}
.header h1 a{display: block; height: calc(100% - 8px);}
.header h1 a:focus{/* outline: 1px solid var(--focusOutlineColor); */ outline-offset: -1px;}
.header h1 img{ 
	display: block; margin:0 auto;object-fit: contain;
	height:100%; width: auto; max-width: calc(100vw - 90px);
}

.header.navigation, .header #google_translate_element{display: none;}

.header.fixed{
	position: fixed; left: 0;top: 0; right: 0;
	box-shadow: rgba(0, 0, 0, .5) 0 0 25px;
	background-color: var(--bgcFixed);
}



@media screen and (min-width: 600px){
	.header {padding:0 64px; height:64px;}
	.header h1 img{max-width: calc(100vw - 130px);}
}


@media screen and (min-width: 1000px){
	.header{
		position: relative; width: 100%; height: auto; 
		margin: 0; padding: 2.2em 0 0;
		box-shadow: rgb(0 0 0 / .5) 0 3px 8px -3px;
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: cover;
	}
	.header .sidebarCtrl, .searchCtrl{ display: none;}

	.header h1{
		clear:both;height:80px;width:60%;
		margin: 0 0 0 16px; padding: 0;
		font-size: 1.3em;
	}
	.header h1 a{ height: 100%;}
	.header h1 img{ 
		width: auto; max-width: 100%;  margin: 0;
		height: 100%; max-height: 70px;
		object-fit: scale-down;
	}

	.header .navigation, .header #google_translate_element{display: block;}

	/* fixed */
	.header.fixed{
		left: calc(50% - 500px); right: auto; width: 1000px; 
		padding-top: 0;
	}
	.header.fixed h1,
	.header.fixed .search,
	.header.fixed .navigation, .header.fixed #google_translate_element {display: none;}
	
}


@media screen and (max-width: 999px){
	.header{background-image: none !important;}
	#google_translate_element {display: none;}
}



/* 右上連結項 */
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 1000px){
	.header .navigation{
		position: absolute; top:0; width: 100%;
		background-color: #444;
	}
	.header .navigation>ul{
		display: flex; justify-content: flex-end; 
		line-height: 1.2;margin-right: 135px; padding-top: 2px;
	}
	.header .navigation>ul>li{margin:0 0 0 16px; padding: 0;}
	.header .navigation>ul>li>a{
		display:block; position: relative; height:2.1em; line-height:2.1;
		padding:0 2px;text-decoration:none; 
		color: #fefad8;
	}
	.header .navigation>ul>li>a::after{
		content:'';position:absolute;height:0;left:0;right:0;bottom:0;
		background-color: #fdd600;
		transition:.15s;
	}
	.header .navigation>ul>li>a:hover::after,
	.header .navigation>ul>li>a:focus::after {height:3px;}
	.header .navigation>ul>li>a:focus {outline-offset: -1px; outline: 1px solid #fdd600;}

	/*google 翻譯 桌機版*/
	.header #google_translate_element {
		position: absolute;
		right: 5px; top: 5px;
	}
}