/*20250829*/

body{
	--header-height:6.51em;
	padding-top:var(--header-height);
	transition: all 0.2s;
}

body.home{
	padding-top:0;
}

/************************************* header start ********************************************/
.headerContainer,
body.home .headerContainer.w{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:var(--header-height);
	color:var(--deep);
	background: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 7.4em 0 1.875em;
	box-shadow: 0 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
	z-index: 3;
}

/* 首頁透明 header */
/*
body.home .headerContainer{
	color:#FFF;
	background: transparent;
	box-shadow:none;
}
*/

/********************** hgroup start *************************/
.headerContainer hgroup{
	display: flex;
	align-items: center;
	line-height: 1em;
}

/*logo不含標題版本
.headerContainer hgroup > a{
	display: block;
	width:17.25em;
	aspect-ratio:5.15;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background: url(../img/logo.png) no-repeat center/100%;
}
*/

/*logo+標題版本*/
.headerContainer hgroup > a{
	display: block;
	width:17.25em;
	aspect-ratio:3.333;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background: url(../img/logo-slogan.png) no-repeat center/100%;
}


.headerContainer hgroup h1{
	font-size: 1.25em;
	margin:0 0 0 1.5em;
	letter-spacing: 0.18em;
}
.headerContainer hgroup h1 a{
	color:currentColor;
	text-decoration: none;
}
/********************** hgroup end *************************/

/********************** lang start *************************/
.lang{
	display: flex;
	align-items: center;
	list-style: none;
	margin:0;
	padding:0;
	font-size: 1.25em;
	font-weight:700;
	line-height: 1em;
	letter-spacing: 0.15em;
}
.lang li{
	border-bottom:0.2em solid transparent;
	transition: border-color 0.2s;
}
.lang li+li{
	margin-left:1.5em;
}
.lang li.active,
.lang li:hover{
	border-color:var(--blue);
}
.lang li a{
	color:currentColor;
	text-decoration: none;
	display: block;
	padding-bottom: 0.5em;
	white-space:nowrap;
}
/********************** lang end *************************/

/********************** nav start *************************/
nav{
	position: absolute;
	right:0;
	top:0;
	padding:1.875em 2.25em 0 0;
}
.headerContainer.open nav{
	color:#FFF;
}


/* AI哩想秘書人物目前層級在主選單之上，但當右側漢堡選單開啟時，AI哩想秘書強制隱藏才可避免壓到選單內容文字 */
body:has(.headerContainer.open) #chat-widget-root{
	display: none;
}



/*********** burgerBtn start ***********/
.burgerBtn{
	position: relative;
	width:2.875em;
	aspect-ratio:1.35;
	cursor: pointer;
	z-index: 1;
}
.burgerBtn span,
.burgerBtn:before,
.burgerBtn:after{
	position:absolute;
	display:block;
	left:0;
	top:50%;
	width:100%;
	height:0.25em;
	border-radius:0.25em;
	background:currentColor;
}
.burgerBtn span{
	transform: translateY(-50%);
}
.burgerBtn:before,
.burgerBtn:after{
	content:"";
	transition:transform 0.2s;
}
.burgerBtn:before{ transform:translateY(-350%);}
.burgerBtn:after{ transform:translateY(250%);}

.headerContainer.open .burgerBtn span{
	opacity: 0;
}
.headerContainer.open .burgerBtn:before{ transform:rotate(-45deg);}
.headerContainer.open .burgerBtn:after{ transform:rotate(45deg);}
/*********** burgerBtn end ***********/

/*********** 選單 start ***********/
nav > ul{
	position: absolute;
	right:0;
	top:0;
	height:100vh;
	margin:0;
	font-size: 1em;
	padding:7em 6em 0 3em;  /*********** 各項目間距 ***********/
	background: var(--blue);
	white-space: nowrap;
	list-style: none;
	z-index: 0;
	transform:translateX(100%);
	transition: all 0.5s;
}
.headerContainer.open nav > ul{
	transform:none;
	box-shadow: -0.5em 0 1em 0.1em rgba(0, 0, 0, 0.1);
}
nav > ul > li+li{
	margin-top:3em;
}
nav li > strong{
	font-size: 1.8125em;
	font-weight: 700;
}
nav li ul{
	list-style: none;
	font-size: inherit;
	margin:1em 0 0;
	padding-left:2em;
}
nav li ul li+li{
	margin-top:1em;
}
/*第二層選單*/
nav a{
	color:currentColor;
	font-size: 1.35em;
	text-decoration: none;
	padding-bottom: 0.32em;
}
nav li.active a,
nav li a:hover{
	background: linear-gradient(to top, currentColor, currentColor 100%) no-repeat left bottom/100% 1px;
}
nav li a:hover{
	color:currentColor;
}
nav li.active a:hover{
	animation: none;
}

/*桌上型 xl*/
@media (min-width: 1200px)  { 
	nav li a:hover{
		animation: btmLine 0.5s;
	}
}
@keyframes btmLine{
	from{
		background-size: 0 1px;
	}
}


/*********** 選單 end ***********/
/********************** nav end *************************/
/************************************* header end ********************************************/



/*ipad 直式 md以下~手機*/
@media (max-width:991.98px){
	body{
		--header-height:6em;
	}

	body.home{
		padding-top:var(--header-height);
	}

	/************************************* header start ********************************************/
	.headerContainer,
	body.home .headerContainer.w{
		padding:0 6em 0 1em;
	}
	
	body.home .headerContainer{
		color:var(--deep);
		background: #FFF;
		box-shadow: 0 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.1);
	}

	/********************** hgroup start *************************/
	.headerContainer hgroup > a{
		width:15em;
	}

	.headerContainer hgroup h1{
		margin-left:0.75em;
		letter-spacing: 0.1em;
	}
	/********************** hgroup end *************************/

	/********************** lang start *************************/
	.lang{
		letter-spacing: normal;
		margin-top:0.65em;
	}
	.lang li+li{
		margin-left:1em;
	}
	/********************** lang end *************************/

	/********************** nav start *************************/
	nav{
		padding-right:1.5em;
	}

	/*********** 選單 start ***********/
	nav > ul{
		font-size: 1.2em;
	}
	nav li.active a, 
	nav li a:hover {
		background:none;
	}
	/*********** 選單 end ***********/
	/********************** nav end *************************/
	/************************************* header end ********************************************/

}



/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	/*第二層選單*/
	nav a{
		font-size: 1.6em;
	}
	nav li.active a, 
	nav li a:hover {
		background:none;
	}
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.headerContainer hgroup h1 { 
		margin-left:1.75em;
	}
	.headerContainer hgroup h1,
	.lang {
		font-size: 1.5em;
	}
	nav a{
		font-size: 1.55em;
	}
}


/*手機版*/
@media (max-width: 767.98px) { 
	.lang{
		letter-spacing: 0;
	}
	nav li > strong {
		font-size: 2em;
	}
	nav a {
		font-size: 1.75em;
	}
}


/*手機版*/
@media (min-width: 385px) and  (max-width: 767.98px) { 
	.headerContainer hgroup h1 { 
		margin-left:1.2em;
	}
	.lang,
	.headerContainer hgroup h1 { 
		font-size: 1.4em;
    }
	.lang li+li {
        margin-left: 1.4em;
    }
}