/* Homepage restored from the March 17, 2022 Wayback capture. */
:root { --forest: #174505; --leaf: #34671f; --orange: #d65328; --pale: #ddebcd; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #323237; background: #fff; font: 14px/1.42857143 "Heiti TC", "微軟正黑體", "新細明體", "Helvetica Neue", Helvetica, Arial, serif, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #e59b29; outline-offset: 5px; }
img { vertical-align: middle; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
.skip-link { position: absolute; z-index: 10; top: -60px; left: 12px; padding: 10px 18px; background: #fff; color: var(--forest); }
.skip-link:focus { top: 10px; }

.home-header { position: relative; z-index: 3; background: var(--pale) url('/images/header/bg-color.webp'); }
.home-header::after, .home-explore::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-menu a:hover { color: #f5e11f; }
.home-menu .menu-decoration { display: none; }

.forest-welcome { position: relative; min-height: 695px; background: var(--forest); color: #cedee7; }
.firefly-background { position: absolute; inset: 0 0 auto; height: 400px; background: url('/images/index/spot-bg.webp') center / auto 100%; }
.welcome-copy { position: relative; z-index: 1; max-width: 600px; margin: auto; padding-top: 100px; text-align: center; }
.admission { color: #cee7f7; font: bold 18px/1.1 "Times New Roman"; }
.admission p { margin: 10px 14px; }
.admission .ticket-price { font-size: 36px; line-height: 40px; margin: 0 0 10px; }
.ticket-price > span { font-size: 18px; }
.ticket-price u { color: #0ff; }
.welcome-copy h1 { margin: 67.4px 0 0; color: #ff0; font-size: 30px; font-weight: 500; line-height: 1.1; }
.welcome-story { padding: 0 20px; margin: 0 0 10px; font-weight: 700; font-size: 14px; line-height: 26px; }
.park-notice { color: #0ff; font-weight: 700; font-size: 24px; padding: 0 16px; margin-top: 36px; }
.park-notice h2 { font-size: 24px; line-height: 26.4px; margin: 0 0 14px; }
.park-notice p { font-size: 24px; line-height: 26.4px; margin-bottom: 0; }
.forest-characters { position: absolute; bottom: 0; left: 0; width: 100%; height: 215px; background: url('/images/index/web_index-12-12.webp') center / auto 215px no-repeat; }

.photo-carousel { position: relative; aspect-ratio: 16 / 9; background: var(--forest); overflow: hidden; touch-action: pan-y; }
.photo-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.photo-slide.is-active { opacity: 1; visibility: visible; }
.photo-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-dots { position: absolute; left: 50%; bottom: 30px; display: flex; align-items: center; transform: translateX(-50%); }
.carousel-dots button { position: relative; width: 22px; height: 30px; border: 0; padding: 0; background: transparent; }
.carousel-dots button::before { content: ""; position: absolute; width: 10px; height: 10px; top: 10px; left: 6px; border: 1px solid white; border-radius: 50%; }
.carousel-dots button.is-active::before { background: #fff; width: 12px; height: 12px; left: 5px; top: 9px; }
.carousel-pause { position: absolute; bottom: 18px; right: 18px; width: 32px; height: 32px; border: 1px solid #ffffffa6; border-radius: 50%; background: #17450566; color: white; line-height: 1; }

.home-explore { position: relative; text-align: center; padding: 50px 0; background: url('/images/light.webp'); }
.home-explore::after { height: 30px; bottom: -30px; }
.home-explore h2 { margin: 20px 0 10px; color: #f00; font-size: 20px; line-height: 22px; font-weight: 500; }
.home-explore > p { color: #153f05; font-size: 14px; line-height: 24px; margin: 20px 0 10px; }
.explore-links { list-style: none; margin: 0; padding: 30px 0 0; text-align: center; }
.explore-links li { display: inline-block; }
.explore-links a { position: relative; display: block; width: 150px; height: 139.5px; background: url('/images/index/nav-list.webp') center / cover; color: #fff; font-size: 12px; transition: transform .3s ease; }
.explore-links a:hover { transform: translateY(-10px); }
.explore-links img { position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -60%); }
.explore-links span { position: absolute; bottom: 20%; left: 0; width: 100%; }

.season-gallery { padding: 50px 0; }
.season-gallery ul { display: grid; grid-template-columns: 300px; justify-content: center; gap: 65px; list-style: none; max-width: 800px; margin: auto; padding: 30px 0 35px; }
.season-gallery a { display: block; width: 300px; height: 225px; position: relative; overflow: hidden; }
.season-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.season-gallery span { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 0; color: #fff; background: #153f05; font-size: 20px; text-align: center; transition: background-color .5s ease; }
.season-gallery a:hover span, .season-gallery a:focus-visible span { background: #153f05; }

.visit-information { position: relative; background: url('/images/index/enter-square-bg.webp'); color: #fff; }
.visit-information::before, .visit-information::after { content: ""; position: absolute; left: 0; width: 100%; height: 50px; background: url('/images/index/enter-bg.webp') center top / 100% auto; pointer-events: none; }
.visit-information::before { top: -50px; }
.visit-information::after { bottom: -50px; background-position: center bottom; }
.visit-inner { max-width: 960px; margin: auto; display: grid; grid-template-columns: 1fr; }
.opening-hours { padding: 95px 20px 50px; text-align: center; }
.opening-hours h2, .opening-hours p { font-size: 30px; font-weight: 500; line-height: 33px; margin-bottom: 20px; }
.booking-information { width: 80%; margin: 0 auto; padding: 36.5px 0 10px; font-size: 18px; }
.booking-information h2 { font-size: 30px; line-height: 42px; font-weight: 400; margin: 0 0 10px; }
.line-booking { display: inline-block; }
.line-booking img { width: 200px; height: 60px; }
.booking-information p { margin: 10px 0; }

.directions-heading { padding-top: 120px; margin: 0 auto; width: 300px; text-align: center; }
.illustrated-title { position: relative; width: 100px; display: block; margin: 0 auto; transform: translateY(-25px); font-weight: 500; }
.illustrated-title img { display: block; width: 100%; height: auto; }
.illustrated-title span { position: absolute; inset: 0; padding-top: 12px; font-size: 30px; line-height: 36px; text-align: center; color: var(--leaf); }
.map-link { display: inline-block; margin-top: 2px; padding: 3px 20px; color: #fff; background: var(--leaf); line-height: 20px; }
.map-link:hover { background: #194f04; }
.location-map { padding: 20px 0; text-align: center; }
.location-map img { width: 100%; max-width: 800px; }
.travel-routes { padding: 80px 20px 210px; }
.travel-route { position: relative; max-width: 800px; margin: auto; }
.travel-route .illustrated-title span { color: var(--orange); }
.route-copy { position: relative; padding-bottom: 60px; color: var(--leaf); font-size: 16px; }
.route-copy p { margin-bottom: 10px; }
.route-copy strong { color: var(--orange); font-weight: 400; }
.travel-route:first-child .route-copy::after { content: ""; position: absolute; bottom: 40px; left: 0; width: 100%; height: 8px; background: url('/images/index/web_index-48.webp') right / auto 100%; }
.footer-landscape { position: relative; height: 50px; margin-top: 80px; background: url('/images/light.webp'); }
.footer-landscape::before { content: ""; position: absolute; top: -80px; width: 100%; height: 80px; background: url('/images/index/footer-top.webp') center top / 100% auto; }
.home-footer { padding: 20px 20px 30px; background: url('/images/light.webp'); }
.back-to-top { display: block; height: 47px; max-width: 1400px; margin: auto; background: url('/images/footer/footer-top.webp') center no-repeat; }
.footer-links { list-style: none; max-width: 1400px; margin: 0 auto; padding: 0; text-align: center; }
.footer-links li { display: inline-block; }
.footer-links a { display: inline-block; margin-left: 10px; color: #194f04; font-size: 16px; line-height: 37px; }
.footer-links a:hover { text-decoration: underline; }
.footer-links img { margin-left: 5px; width: auto; height: auto; }

@media (min-width: 479px) {
  .season-gallery span { background: #ffffff80; }
}
@media (min-width: 767px) {
  .home-header::after { height: 30px; bottom: -30px; }
  .welcome-story { padding: 0; }
  .explore-links { padding-bottom: 10px; }
  .explore-links a { width: 230px; height: 212.5px; margin: 10px; }
  .woodland-background { background: url('/images/index/web_index-60.webp') center top / cover fixed; }
  .season-gallery ul { grid-template-columns: repeat(2, 300px); gap: 65px 64px; }
  .visit-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .booking-information { width: 100%; padding-left: 30px; padding-right: 12px; }
  .travel-routes { padding-left: 10px; padding-right: 10px; }
  .travel-route > .illustrated-title { position: absolute; top: 30px; left: 0; }
  .route-copy { margin-left: 150px; }
  .footer-landscape::before { height: 150px; top: -150px; }
  .footer-links { text-align: right; }
}
@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 (max-width: 478px) {
  .forest-welcome { min-height: 790px; }
  .welcome-copy { padding-top: 85px; }
  .admission { line-height: 1.4; }
  .welcome-copy h1 { margin-top: 55px; font-size: 28px; }
  .welcome-story { padding: 0 18px; }
  .park-notice { font-size: 22px; }
  .park-notice h2, .park-notice p { font-size: 22px; }
  .photo-carousel .carousel-dots { bottom: 12px; }
  .carousel-pause { bottom: 12px; right: 12px; }
  .explore-links { max-width: 315px; margin: auto; }
  .explore-links li { margin-bottom: 4px; }
  .booking-information { width: 88%; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}