/* nav */
header .nav-list { width: 55%; display: flex; flex-direction: row; justify-content: end; align-items: center;}
header .nav-item { height: 60px; display: flex; flex-direction: row; flex-grow: 1;}
header nav { display: block;}
header nav a { margin: 0 1vw; display: flex; align-items: center; color: #000000; text-decoration: none;}
header nav a:hover {height: 63px; border-bottom: #c8161e solid 3px;}
header nav a:active { color: #000000;}
header .mobile-nav { display: none;}

@media screen and (max-width:1366px) {
	header .nav-list { width: 50%;}
}

@media screen and (max-width:1200px) {
	header .nav-list { width: 50%;}
}

@media screen and (min-width: 960px) {
  header .mobile-nav { display: none;}
  header .nav-item { display: flex; /* 預設大於 960px 時的行為 */}
}


@media screen and (max-width:960px) {
	header .nav-list { width: 100%; display: flex; flex-direction: row-reverse; justify-content: end; align-items: center; overflow: hidden;}
	header .nav-item { width: calc(100% + 20px); height: calc(100vh - 60px); position: absolute; top: 60px; left: -20px; display: flex; flex-direction: column; background: #666666; text-align: center;}
	header nav { display: none;}
	header nav a { height: 3rem; padding: 3rem; display: block; color: #ffffff; font-size: 2rem; text-decoration: none;}
	header nav a:hover { height: 3rem; border-bottom:none; color: #ffffff; }
	header nav a:active { color: #000000;}
	header .mobile-nav { margin-left: 1rem; display: block;}
	header .mobile-nav a { width: 60px; height: 60px; color: #000;}
}