國際藝術下鄉－玩藝列車

:root {
–black: #111111;
–white: #ffffff;
–cream: #f5f0e8;
–yellow: #f5d547;
–orange: #f05a28;
–blue: #2455d6;
–gray: #777;
–light-gray: #e8e4dc;
–max-width: 1280px;
}

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  html {
  scroll-behavior: smooth;
  }
  body {
  font-family: “Noto Sans TC”, sans-serif;
  background: var(–cream);
  color: var(–black);
  overflow-x: hidden;
  }
  a {
  color: inherit;
  text-decoration: none;
  }
  img {
  width: 100%;
  display: block;
  }
  /* =========================
  NAV
  ========================= /
  .nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  color: white;
  mix-blend-mode: difference;
  }
  .logo {
  font-family: “Oswald”, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1px;
  }
  .logo span {
  display: block;
  font-family: “Noto Sans TC”, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  margin-top: -3px;
  }
  .nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  }
  .nav-links a {
  transition: opacity .3s;
  }
  .nav-links a:hover {
  opacity: .5;
  }
  .menu-btn {
  display: none;
  border: 0;
  background: transparent;
  color: white;
  font-size: 26px;
  cursor: pointer;
  }
  / =========================
  HERO
  ========================= /
  .hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background:
  linear-gradient(
  90deg,
  rgba(0,0,0,.72) 0%,
  rgba(0,0,0,.25) 55%,
  rgba(0,0,0,.1) 100%
  ),
  url(“https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=2200&q=90”)
  center/cover;
  }
  .hero-content {
  position: relative;
  z-index: 2;
  width: min(var(–max-width), 90%);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  }
  .hero-text {
  color: white;
  max-width: 850px;
  padding-top: 50px;
  }
  .eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  font-family: “Oswald”, sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  border-left: 5px solid var(–yellow);
  padding-left: 15px;
  }
  .hero h1 {
  font-size: clamp(58px, 10vw, 150px);
  line-height: .85;
  font-weight: 900;
  letter-spacing: -5px;
  }
  .hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 2px white;
  }
  .hero-subtitle {
  margin-top: 35px;
  font-size: clamp(15px, 2vw, 21px);
  line-height: 1.8;
  max-width: 620px;
  }
  .hero-info {
  display: flex;
  gap: 35px;
  margin-top: 40px;
  flex-wrap: wrap;
  }
  .hero-info-item {
  border-left: 1px solid rgba(255,255,255,.6);
  padding-left: 15px;
  }
  .hero-info-item small {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: .7;
  margin-bottom: 5px;
  }
  .hero-info-item strong {
  font-size: 16px;
  }
  .scroll {
  position: absolute;
  z-index: 3;
  bottom: 35px;
  left: 5vw;
  color: white;
  font-size: 11px;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  }
  .scroll::after {
  content: “”;
  display: block;
  width: 1px;
  height: 60px;
  background: white;
  margin: 12px auto 0;
  animation: scrollLine 1.8s infinite;
  }
  @keyframes scrollLine {
  0%,100% {
  transform: scaleY(.2);
  transform-origin: top;
  }
  50% {
  transform: scaleY(1);
  }
  }
  / =========================
  MARQUEE
  ========================= /
  .marquee {
  overflow: hidden;
  background: var(–yellow);
  padding: 14px 0;
  white-space: nowrap;
  }
  .marquee-track {
  display: inline-block;
  animation: marquee 22s linear infinite;
  }
  .marquee span {
  font-family: “Oswald”, sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 35px;
  letter-spacing: 2px;
  }
  @keyframes marquee {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-50%);
  }
  }
  / =========================
  INTRO
  ========================= /
  .section {
  width: min(var(–max-width), 90%);
  margin: auto;
  padding: 130px 0;
  }
  .intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 100px;
  align-items: center;
  }
  .section-number {
  font-family: “Oswald”, sans-serif;
  color: var(–orange);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 20px;
  }
  .intro h2 {
  font-size: clamp(40px, 5vw, 75px);
  line-height: 1;
  letter-spacing: -3px;
  font-weight: 900;
  }
  .intro-text {
  font-size: 19px;
  line-height: 2;
  color: #333;
  }
  .intro-text strong {
  color: var(–orange);
  }
  / =========================
  ART CARDS
  ========================= /
  .art-section {
  background: var(–black);
  color: white;
  }
  .art-section .section {
  padding-bottom: 140px;
  }
  .section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 65px;
  gap: 30px;
  }
  .section-title h2 {
  font-size: clamp(45px, 7vw, 95px);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -4px;
  }
  .section-title p {
  max-width: 380px;
  line-height: 1.8;
  color: #aaa;
  }
  .art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  }
  .art-card {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #222;
  }
  .art-card img {
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
  opacity: .8;
  }
  .art-card:hover img {
  transform: scale(1.08);
  }
  .art-card-content {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  }
  .art-card-number {
  font-family: “Oswald”, sans-serif;
  font-size: 14px;
  color: var(–yellow);
  margin-bottom: 10px;
  }
  .art-card h3 {
  font-size: 35px;
  margin-bottom: 12px;
  }
  .art-card p {
  line-height: 1.7;
  color: #ddd;
  }
  .art-card::after {
  content: “”;
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  }
  / =========================
  FEATURE
  ========================= /
  .feature {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  min-height: 700px;
  }
  .feature-image {
  background:
  url(“https://images.unsplash.com/photo-1524634126442-357e0eac3c14?auto=format&fit=crop&w=1800&q=90”)
  center/cover;
  min-height: 600px;
  }
  .feature-content {
  padding: 100px 8vw;
  background: var(–orange);
  display: flex;
  justify-content: center;
  flex-direction: column;
  }
  .feature-content .number {
  font-family: “Oswald”, sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 25px;
  }
  .feature-content h2 {
  font-size: clamp(45px, 6vw, 85px);
  line-height: .95;
  letter-spacing: -4px;
  margin-bottom: 35px;
  }
  .feature-content p {
  font-size: 17px;
  line-height: 2;
  }
  / =========================
  TRAIN
  ========================= /
  .train-section {
  overflow: hidden;
  background: var(–yellow);
  padding: 110px 0;
  }
  .train-inner {
  width: min(var(–max-width), 90%);
  margin: auto;
  }
  .train-title {
  text-align: center;
  margin-bottom: 80px;
  }
  .train-title h2 {
  font-family: “Oswald”, sans-serif;
  font-size: clamp(65px, 13vw, 180px);
  line-height: .8;
  letter-spacing: -5px;
  }
  .train-title p {
  margin-top: 25px;
  font-size: 17px;
  }
  .route {
  position: relative;
  height: 180px;
  margin-top: 50px;
  }
  .route-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 85px;
  height: 4px;
  background: var(–black);
  }
  .stations {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 100%;
  }
  .station {
  text-align: center;
  position: relative;
  }
  .station-dot {
  width: 20px;
  height: 20px;
  background: var(–black);
  border-radius: 50%;
  margin: 75px auto 15px;
  border: 5px solid var(–yellow);
  box-sizing: content-box;
  }
  .station span {
  font-size: 13px;
  font-weight: 700;
  }
  .train {
  position: absolute;
  top: 38px;
  left: 0;
  font-size: 52px;
  z-index: 2;
  animation: trainMove 8s ease-in-out infinite alternate;
  }
  @keyframes trainMove {
  from {
  left: 0;
  }
  to {
  left: calc(100% - 70px);
  }
  }
  / =========================
  EVENT INFO
  ========================= /
  .event-section {
  background: var(–cream);
  }
  .event-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(–black);
  border: 2px solid var(–black);
  }
  .event-item {
  background: var(–cream);
  padding: 55px;
  min-height: 190px;
  }
  .event-item small {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(–gray);
  margin-bottom: 12px;
  }
  .event-item strong {
  font-size: clamp(23px, 3vw, 38px);
  font-weight: 800;
  }
  / =========================
  GALLERY
  ========================= /
  .gallery {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: 300px 300px;
  gap: 8px;
  }
  .gallery-item {
  overflow: hidden;
  }
  .gallery-item:first-child {
  grid-row: span 2;
  }
  .gallery-item img {
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
  }
  .gallery-item:hover img {
  transform: scale(1.06);
  }
  / =========================
  CTA
  ========================= /
  .cta {
  position: relative;
  min-height: 600px;
  background:
  linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
  url(‪C:\Users\user\Downloads\法國雙人3 (1).webp)
  center/cover;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  .cta-content {
  width: min(900px, 90%);
  }
  .cta h2 {
  font-size: clamp(48px, 8vw, 110px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -4px;
  }
  .cta p {
  margin: 35px auto;
  max-width: 600px;
  line-height: 1.9;
  font-size: 17px;
  }
  .cta-button {
  display: inline-block;
  background: var(–yellow);
  color: var(–black);
  padding: 17px 35px;
  font-weight: 800;
  transition: transform .3s;
  }
  .cta-button:hover {
  transform: translateY(-5px);
  }
  / =========================
  FOOTER
  ========================= /
  footer {
  background: var(–black);
  color: white;
  padding: 60px 5vw;
  }
  .footer-inner {
  max-width: var(–max-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  }
  .footer-logo {
  font-family: “Oswald”, sans-serif;
  font-size: 40px;
  font-weight: 700;
  }
  .footer-info {
  color: #aaa;
  font-size: 13px;
  line-height: 2;
  text-align: right;
  }
  / =========================
  REVEAL
  ========================= /
  .reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.active {
  opacity: 1;
  transform: translateY(0);
  }
  / =========================
  MOBILE
  ========================= /
  @media (max-width: 800px) {
  .nav {
  height: 65px;
  padding: 0 20px;
  }
  .nav-links {
  display: none;
  }
  .menu-btn {
  display: block;
  }
  .hero {
  min-height: 700px;
  }
  .hero-content {
  width: 90%;
  }
  .hero h1 {
  font-size: clamp(58px, 18vw, 100px);
  letter-spacing: -3px;
  }
  .hero-subtitle {
  font-size: 15px;
  }
  .section {
  padding: 85px 0;
  }
  .intro {
  grid-template-columns: 1fr;
  gap: 40px;
  }
  .section-title {
  display: block;
  }
  .section-title p {
  margin-top: 30px;
  }
  .art-grid {
  grid-template-columns: 1fr;
  }
  .art-card {
  min-height: 430px;
  }
  .feature {
  grid-template-columns: 1fr;
  }
  .feature-image {
  min-height: 450px;
  }
  .feature-content {
  padding: 75px 10%;
  }
  .event-grid {
  grid-template-columns: 1fr;
  }
  .event-item {
  padding: 40px 30px;
  }
  .gallery {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 250px 200px 200px;
  }
  .gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 1;
  }
  .route {
  height: 500px;
  }
  .route-line {
  left: 50%;
  right: auto;
  top: 0;
  bottom: 0;
  width: 4px;
  height: auto;
  }
  .stations {
  flex-direction: column;
  justify-content: space-between;
  }
  .station {
  display: flex;
  align-items: center;
  gap: 20px;
  }
  .station-dot {
  margin: 0;
  }
  .train {
  top: 0;
  left: calc(50% - 25px);
  animation: trainVertical 8s ease-in-out infinite alternate;
  }
  @keyframes trainVertical {
  from {
  top: 0;
  }
  to {
  top: calc(100% - 65px);
  }
  }
  .footer-inner {
  flex-direction: column;
  align-items: flex-start;
  }
  .footer-info {
  text-align: left;
  }
  }PLAY ART INTERNATIONAL ART TRAIN
  ABOUT
  PERFORMANCE
  ROUTE
  INFO
  GALLERY
  ☰
  INTERNATIONAL ART TRAIN
  玩藝
  列車
  讓世界級藝術走進花蓮， 讓藝術不只發生在劇場， 更發生在我們生活的地方。
  DATE 2026.09.01 — 09.05
  LOCATION 佳民村多功能集會所
  SCROLL TO EXPLOREPLAY ART TRAIN 國際藝術下鄉 HUALIEN PLAY • MOVE • CONNECT PLAY ART TRAIN 國際藝術下鄉 HUALIEN PLAY • MOVE • CONNECT
  01 / ABOUT
  藝術
  可以很近。
  「國際藝術下鄉－玩藝列車」， 將國際藝術家的創意與能量帶進花蓮社區， 讓藝術突破劇場與城市的界線。
  這不只是一場演出， 而是一趟藝術走進地方、走近人群的旅程。
  PLAY
  WITH ART
  扯鈴、舞蹈、拋接與音樂， 在身體與物件之間創造新的可能。
  01 / MOVEMENT
  舞蹈
  以身體回應音樂， 讓每一個動作成為舞台語言。
  02 / JUGGLING
  雜技
  高難度拋接與精準默契， 打破傳統雜耍的想像。
  03 / CONNECTION
  連結
  藝術家、社區與觀眾， 在同一個現場相遇。
  FEATURED PERFORMANCE
  CES
  GENS-LÀ
  兩位表演者以法國傳奇歌手 雅克・布雷爾（Jacques Brel） 的經典名曲《Ces gens-là》為背景音樂， 將扯鈴、舞蹈與高難度拋接完美融合。
  隨著音樂情緒推進， 技巧、節奏與身體彼此交織， 展現雜耍藝術截然不同的舞台語彙。
  PLAY
  ART TRAIN
  一列開往地方的藝術列車。
  🚂
  INTERNATIONAL
  ART
  HUALIEN
  花蓮
  COMMUNITY
  社區
  AUDIENCE
  觀眾
  EVENT
  INFO
  來到現場，一起感受藝術發生的瞬間。
  DATE / 日期 2026.09.01 — 09.05
  LOCATION / 地點 佳民村多功能集會所
  PROGRAM / 節目 國際藝術下鄉
  玩藝列車
  ORGANIZER / 主辦 花蓮縣文化局
  MOMENTS
  每一次拋接、每一次移動， 都是藝術與地方相遇的瞬間。
  藝術，
  就在這裡發生。
  從劇場走向地方， 從藝術家走向社區， 讓每一次相遇，都成為值得記住的故事。
  查看官方活動資訊 →
  玩藝列車
  PLAY ART TRAIN
  國際藝術下鄉
  花蓮縣文化局
  © 2026 Hualien County Cultural Affairs Bureau/ Scroll Reveal /
  const reveals = document.querySelectorAll(“.reveal”);
  const revealObserver = new IntersectionObserver(
  (entries) => {
  entries.forEach(entry => {
  if (entry.isIntersecting) {
  entry.target.classList.add(“active”);
  revealObserver.unobserve(entry.target);
  }
  });
  },
  {
  threshold: 0.12
  }
  );
  reveals.forEach(element => {
  revealObserver.observe(element);
  });
  / Mobile Menu /
  function toggleMenu() {
  const links = document.querySelector(“.nav-links”);
  if (links.style.display === “flex”) {
  links.style.display = “none”;
  } else {
  links.style.display = “flex”;
  links.style.position = “fixed”;
  links.style.top = “65px”;
  links.style.left = “0”;
  links.style.right = “0”;
  links.style.padding = “30px”;
  links.style.background = “#111”;
  links.style.flexDirection = “column”;
  links.style.gap = “20px”;
  }
  }
  / Close mobile menu after click */
  document.querySelectorAll(“.nav-links a”).forEach(link => {
  link.addEventListener(“click”, () => {
  if (window.innerWidth {
  const hero = document.querySelector(“.hero”);
  if (!hero) return;
  const scrollY = window.scrollY;
  if (scrollY < window.innerHeight) {
  hero.style.backgroundPosition =
  center ${scrollY * 0.35}px;
  }
  });
  活動照片01 / MOVEMENT
  舞蹈
  以身體回應音樂， 讓每一個動作成為舞台語言。
  02 / JUGGLING
  雜技
  高難度拋接與精準默契， 打破傳統雜耍的想像。
  03 / CONNECTION
  連結
  藝術家、社區與觀眾， 在同一個現場相遇。