/* Shared site header: identical to the header on index.html (extracted from home.css). */
.skip-link { position: absolute; z-index: 10; top: -60px; left: 12px; padding: 10px 18px; background: #fff; color: #174505; }
.skip-link:focus { top: 10px; }

.home-header, .home-header * { box-sizing: border-box; }
.home-header { position: relative; z-index: 3; background: #ddebcd url('/images/header/bg-color.webp'); font: 14px/1.42857143 "Heiti TC", "微軟正黑體", "新細明體", "Helvetica Neue", Helvetica, Arial, serif, sans-serif; }
.home-header a, .home-header a:hover, .home-header a:focus { color: inherit; text-decoration: none; }
.home-header a:focus-visible, .home-header button:focus-visible { outline: 3px solid #e59b29; outline-offset: 5px; }
.home-header button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-header img { vertical-align: middle; max-width: 100%; height: auto; }
.home-header::after { content: ""; position: absolute; left: 0; bottom: -20px; width: 100%; height: 20px; background: url('/images/header/web_index-10.webp') center bottom / 100% auto; pointer-events: none; z-index: 1; }
.header-inner { max-width: 1280px; margin: auto; position: relative; }
.home-brand { display: block; width: calc(100% - 81px); height: 105px; padding: 15px 0 20px; text-align: center; }
.home-brand img { width: auto; height: 70px; }
.menu-toggle { position: absolute; right: 15px; top: 30px; width: 66px; padding: 15px 16px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 34px; height: 2px; background: #194f04; }
.menu-toggle span + span { margin-top: 4px; }
.home-menu { display: none; list-style: none; margin: 0; padding: 0 10px 10px; text-align: center; }
.home-menu.is-open { display: grid; grid-template-columns: repeat(2, 150px); justify-content: center; }
.home-menu a, .menu-decoration span { display: flex; align-items: center; justify-content: center; width: 101px; height: 71px; margin: 10px auto; color: #fff; font-size: 17px; background: url('/images/header/list-bg.webp') center / contain no-repeat; }
.home-header .home-menu a:hover { color: #f5e11f; }
.home-menu .menu-decoration { display: none; }

@media (min-width: 767px) {
  .home-header::after { height: 30px; bottom: -30px; }
}
@media (min-width: 1240px) {
  .header-inner { display: flex; align-items: center; min-height: 150px; }
  .home-brand { flex: 0 0 auto; width: auto; height: 150px; padding: 20px; }
  .home-brand img { height: 110px; }
  .menu-toggle { display: none; }
  .home-menu, .home-menu.is-open { display: flex; padding: 0; }
  .home-menu .menu-decoration { display: block; }
  .home-menu a, .menu-decoration span { margin: 40px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}