:root { --color-ink: #182134; --color-muted: #667085; --color-swan: #0d6efd; --color-deep: #10356b; --color-sky: #dff4ff; --color-cream: #fff8ec; --color-card: #ffffff; --color-gold: #f5b544; --color-coral: #ff6b5f; --color-line: rgba(24, 33, 52, 0.12); --shadow-soft: 0 20px 60px rgba(16, 53, 107, 0.12); --shadow-card: 0 14px 34px rgba(16, 53, 107, 0.1); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; font-family: "Noto Sans TC", sans-serif; color: var(--color-ink); background: linear-gradient(180deg, #f6fbff 0%, #ffffff 38%, #fff8ec 100%); overflow-x: hidden; }

img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

p { margin: 0; line-height: 1.8; }

header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 6%; background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid rgba(24, 33, 52, 0.08); backdrop-filter: blur(16px); }
header .site-brand { display: flex; align-items: center; gap: 12px; }
header .brand-mark { display: grid; place-items: center; width: 48px; height: 48px; color: #ffffff; font-size: 22px; font-weight: 900; background: linear-gradient(135deg, var(--color-swan), var(--color-deep)); border-radius: 16px 16px 22px 16px; box-shadow: 0 12px 24px rgba(13, 110, 253, 0.25); }
header h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 0.02em; }
header .site-subtitle { display: block; margin-top: 2px; color: var(--color-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
header nav { display: flex; align-items: center; gap: 8px; }
header nav a { padding: 10px 14px; color: #344054; font-size: 14px; font-weight: 700; border-radius: 999px; transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
header nav a:hover { color: var(--color-deep); background: var(--color-sky); transform: translateY(-2px); }
header .header-action { padding: 11px 18px; color: #ffffff; font-size: 14px; font-weight: 800; background: linear-gradient(135deg, var(--color-coral), var(--color-gold)); border-radius: 999px; box-shadow: 0 12px 24px rgba(255, 107, 95, 0.24); transition: transform 0.3s ease, box-shadow 0.3s ease; }
header .header-action:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(255, 107, 95, 0.3); }

#hero-section { position: relative; min-height: 680px; padding: 92px 6% 86px; overflow: hidden; }
#hero-section::before { content: ""; position: absolute; inset: -18% -12% auto auto; width: 560px; height: 560px; background: radial-gradient(circle, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0)); border-radius: 50%; pointer-events: none; }
#hero-section::after { content: ""; position: absolute; left: -160px; bottom: -220px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(245, 181, 68, 0.24), rgba(245, 181, 68, 0)); border-radius: 50%; pointer-events: none; }
#hero-section .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); align-items: center; gap: 54px; max-width: 1240px; margin: 0 auto; }
#hero-section .hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 14px; color: var(--color-deep); font-size: 14px; font-weight: 800; background: rgba(223, 244, 255, 0.9); border: 1px solid rgba(13, 110, 253, 0.14); border-radius: 999px; }
#hero-section .hero-title { margin: 0; font-size: clamp(42px, 6vw, 78px); line-height: 1.08; font-weight: 900; letter-spacing: -0.05em; }
#hero-section .hero-title span { color: var(--color-swan); }
#hero-section .hero-text { max-width: 610px; margin-top: 24px; color: #475467; font-size: 18px; }
#hero-section .hero-action-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
#hero-section .hero-action-list a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-weight: 800; border-radius: 999px; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
#hero-section .hero-action-list a:first-child { color: #ffffff; background: linear-gradient(135deg, var(--color-swan), var(--color-deep)); box-shadow: 0 16px 34px rgba(13, 110, 253, 0.24); }
#hero-section .hero-action-list a:last-child { color: var(--color-deep); background: #ffffff; border: 1px solid var(--color-line); }
#hero-section .hero-action-list a:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
#hero-section .hero-media { position: relative; min-height: 520px; }
#hero-section .hero-image { position: absolute; inset: 0 0 70px 26px; overflow: hidden; border-radius: 42px; box-shadow: var(--shadow-soft); transform: rotate(2deg); }
#hero-section .hero-image img { height: 100%; object-fit: cover; }
#hero-section .hero-floating-card { position: absolute; left: 0; bottom: 22px; max-width: 320px; padding: 22px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 26px; box-shadow: var(--shadow-card); backdrop-filter: blur(18px); }
#hero-section .hero-floating-card strong { display: block; margin-bottom: 8px; font-size: 20px; }
#hero-section .hero-floating-card span { color: var(--color-muted); font-size: 14px; line-height: 1.7; }
#hero-section .hero-badge { position: absolute; right: -8px; top: 44px; display: grid; place-items: center; width: 126px; height: 126px; color: #ffffff; font-weight: 900; text-align: center; background: linear-gradient(135deg, var(--color-coral), var(--color-gold)); border-radius: 34px; box-shadow: 0 18px 40px rgba(255, 107, 95, 0.28); animation: float-badge 4.2s ease-in-out infinite; }

#selection-section { padding: 88px 6%; background: #ffffff; }
#selection-section .selection-content { max-width: 1180px; margin: 0 auto; }
#selection-section .section-title { max-width: 680px; margin: 0 0 34px; font-size: clamp(30px, 4vw, 48px); line-height: 1.22; letter-spacing: -0.03em; }
#selection-section .section-text { max-width: 760px; margin-bottom: 42px; color: var(--color-muted); font-size: 17px; }
#selection-section .selection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#selection-section .selection-item { position: relative; overflow: hidden; min-height: 270px; padding: 24px; color: #ffffff; background: var(--color-deep); border-radius: 28px; box-shadow: var(--shadow-card); transform: translateY(24px); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease; }
#selection-section .selection-item.is-active { transform: translateY(0); opacity: 1; }
#selection-section .selection-item:nth-child(2) { background: #0d6efd; transition-delay: 0.08s; }
#selection-section .selection-item:nth-child(3) { background: #ff8a4c; transition-delay: 0.16s; }
#selection-section .selection-item:nth-child(4) { background: #1f9d7a; transition-delay: 0.24s; }
#selection-section .selection-item::before { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.16); border-radius: 50%; transition: transform 0.4s ease; }
#selection-section .selection-item:hover::before { transform: scale(1.25); }
#selection-section .selection-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 26px; color: var(--color-deep); font-size: 24px; font-weight: 900; background: #ffffff; border-radius: 18px; }
#selection-section .selection-title { margin: 0 0 12px; font-size: 22px; }
#selection-section .selection-text { color: rgba(255, 255, 255, 0.82); font-size: 15px; }

#feature-section { padding: 96px 6%; background: linear-gradient(135deg, #f5fbff, #fff8ec); }
#feature-section .feature-grid { display: grid; grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr); gap: 54px; align-items: center; max-width: 1180px; margin: 0 auto; }
#feature-section .feature-media { position: relative; }
#feature-section .feature-image { overflow: hidden; border-radius: 36px; box-shadow: var(--shadow-soft); }
#feature-section .feature-image img { height: 560px; object-fit: cover; }
#feature-section .feature-sticker { position: absolute; right: -22px; bottom: 42px; max-width: 230px; padding: 18px 20px; color: var(--color-deep); font-weight: 900; background: #ffffff; border-radius: 24px; box-shadow: var(--shadow-card); }
#feature-section .feature-content { padding: 18px 0; }
#feature-section .section-title { margin: 0 0 22px; font-size: clamp(30px, 4vw, 50px); line-height: 1.2; letter-spacing: -0.03em; }
#feature-section .section-text { color: var(--color-muted); font-size: 17px; }
#feature-section .feature-list { display: grid; gap: 16px; margin-top: 36px; }
#feature-section .feature-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(24, 33, 52, 0.08); border-radius: 24px; transform: translateX(28px); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease, background 0.3s ease; }
#feature-section .feature-item.is-active { transform: translateX(0); opacity: 1; }
#feature-section .feature-item:hover { background: #ffffff; }
#feature-section .feature-number { display: grid; place-items: center; width: 54px; height: 54px; color: #ffffff; font-weight: 900; background: linear-gradient(135deg, var(--color-swan), var(--color-deep)); border-radius: 18px; }
#feature-section .feature-title { margin: 0 0 6px; font-size: 19px; }
#feature-section .feature-text { color: var(--color-muted); font-size: 15px; }

#recommend-section { padding: 92px 6%; background: #ffffff; }
#recommend-section .recommend-content { max-width: 1180px; margin: 0 auto; }
#recommend-section .recommend-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
#recommend-section .section-title { max-width: 680px; margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -0.03em; }
#recommend-section .section-text { max-width: 380px; color: var(--color-muted); font-size: 16px; }
#recommend-section .recommend-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 22px; }
#recommend-section .recommend-item { overflow: hidden; background: #ffffff; border: 1px solid var(--color-line); border-radius: 30px; box-shadow: 0 10px 26px rgba(16, 53, 107, 0.06); transform: translateY(26px); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.3s ease; }
#recommend-section .recommend-item.is-active { transform: translateY(0); opacity: 1; }
#recommend-section .recommend-item:hover { box-shadow: var(--shadow-card); transform: translateY(-6px); }
#recommend-section .recommend-item:first-child { grid-row: span 2; }
#recommend-section .recommend-image { overflow: hidden; height: 230px; }
#recommend-section .recommend-item:first-child .recommend-image { height: 470px; }
#recommend-section .recommend-image img { height: 100%; object-fit: cover; transition: transform 0.45s ease; }
#recommend-section .recommend-item:hover img { transform: scale(1.06); }
#recommend-section .recommend-info { padding: 22px; }
#recommend-section .recommend-tag { display: inline-flex; margin-bottom: 10px; padding: 5px 10px; color: var(--color-deep); font-size: 12px; font-weight: 900; background: var(--color-sky); border-radius: 999px; }
#recommend-section .recommend-title { margin: 0 0 8px; font-size: 22px; }
#recommend-section .recommend-text { color: var(--color-muted); font-size: 15px; }

#service-section { padding: 96px 6%; background: #10233f; color: #ffffff; }
#service-section .service-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; max-width: 1180px; margin: 0 auto; }
#service-section .section-title { margin: 0 0 20px; font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.03em; }
#service-section .section-text { color: rgba(255, 255, 255, 0.72); font-size: 17px; }
#service-section .service-list { display: grid; gap: 18px; }
#service-section .service-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 26px; transform: scale(0.96); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease, background 0.3s ease; }
#service-section .service-item.is-active { transform: scale(1); opacity: 1; }
#service-section .service-item:hover { background: rgba(255, 255, 255, 0.13); }
#service-section .service-icon { display: grid; place-items: center; width: 64px; height: 64px; color: #10233f; font-size: 26px; font-weight: 900; background: linear-gradient(135deg, #ffffff, var(--color-gold)); border-radius: 22px; }
#service-section .service-title { margin: 0 0 6px; font-size: 20px; }
#service-section .service-text { color: rgba(255, 255, 255, 0.68); font-size: 15px; }

#moment-section { padding: 96px 6%; background: linear-gradient(180deg, #fff8ec, #ffffff); }
#moment-section .moment-content { max-width: 1180px; margin: 0 auto; text-align: center; }
#moment-section .section-title { max-width: 760px; margin: 0 auto 18px; font-size: clamp(32px, 4vw, 54px); line-height: 1.18; letter-spacing: -0.04em; }
#moment-section .section-text { max-width: 720px; margin: 0 auto 44px; color: var(--color-muted); font-size: 17px; }
#moment-section .moment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; text-align: left; }
#moment-section .moment-item { position: relative; overflow: hidden; min-height: 360px; border-radius: 32px; box-shadow: var(--shadow-card); transform: translateY(28px); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease; }
#moment-section .moment-item.is-active { transform: translateY(0); opacity: 1; }
#moment-section .moment-image { position: absolute; inset: 0; }
#moment-section .moment-image img { height: 100%; object-fit: cover; }
#moment-section .moment-info { position: absolute; inset: auto 18px 18px; padding: 20px; color: #ffffff; background: linear-gradient(180deg, rgba(16, 35, 63, 0.12), rgba(16, 35, 63, 0.86)); border-radius: 24px; }
#moment-section .moment-title { margin: 0 0 8px; font-size: 22px; }
#moment-section .moment-text { color: rgba(255, 255, 255, 0.78); font-size: 15px; }

footer { padding: 46px 6%; color: rgba(255, 255, 255, 0.72); background: #08172b; }
footer .footer-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto; }
footer .footer-title { margin: 0 0 6px; color: #ffffff; font-size: 20px; font-weight: 900; }
footer .footer-text { font-size: 14px; }
footer .footer-link-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
footer .footer-link-list a { padding: 8px 12px; font-size: 14px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; transition: color 0.3s ease, background 0.3s ease; }
footer .footer-link-list a:hover { color: #08172b; background: #ffffff; }

@keyframes float-badge {
	0% { transform: translateY(0) rotate(3deg); }
	50% { transform: translateY(-14px) rotate(-3deg); }
	100% { transform: translateY(0) rotate(3deg); }
}

@media (max-width: 1280px) {
	header { padding: 16px 4%; }
	#hero-section { padding: 82px 4% 76px; }
	#selection-section { padding: 82px 4%; }
	#feature-section { padding: 88px 4%; }
	#recommend-section { padding: 86px 4%; }
	#service-section { padding: 88px 4%; }
	#moment-section { padding: 88px 4%; }
	footer { padding: 42px 4%; }
}

@media (max-width: 960px) {
	header { align-items: flex-start; flex-direction: column; }
	header nav { width: 100%; overflow-x: auto; padding-bottom: 4px; }
	header .header-action { position: absolute; right: 4%; top: 18px; }
	#hero-section .hero-grid { grid-template-columns: 1fr; }
	#hero-section .hero-media { min-height: 480px; }
	#selection-section .selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#feature-section .feature-grid { grid-template-columns: 1fr; }
	#recommend-section .recommend-heading { align-items: flex-start; flex-direction: column; }
	#recommend-section .recommend-grid { grid-template-columns: 1fr 1fr; }
	#recommend-section .recommend-item:first-child { grid-row: auto; grid-column: span 2; }
	#service-section .service-grid { grid-template-columns: 1fr; }
	#moment-section .moment-grid { grid-template-columns: 1fr; }
	footer .footer-content { align-items: flex-start; flex-direction: column; }
	footer .footer-link-list { justify-content: flex-start; }
}

@media (max-width: 768px) {
	header h1 { font-size: 19px; }
	header nav a { padding: 9px 11px; font-size: 13px; }
	header .header-action { position: static; }
	#hero-section { min-height: auto; padding-top: 58px; }
	#hero-section .hero-media { min-height: 410px; }
	#hero-section .hero-image { inset: 0 0 70px 0; border-radius: 30px; }
	#hero-section .hero-badge { right: 12px; top: 22px; width: 104px; height: 104px; font-size: 14px; border-radius: 28px; }
	#feature-section .feature-image img { height: 420px; }
	#recommend-section .recommend-grid { grid-template-columns: 1fr; }
	#recommend-section .recommend-item:first-child { grid-column: auto; }
	#recommend-section .recommend-item:first-child .recommend-image { height: 270px; }
	#service-section .service-item { grid-template-columns: 54px minmax(0, 1fr); padding: 18px; }
	#service-section .service-icon { width: 54px; height: 54px; font-size: 22px; }
}

@media (max-width: 500px) {
	header { gap: 14px; padding: 14px 5%; }
	header .brand-mark { width: 42px; height: 42px; border-radius: 14px 14px 18px 14px; }
	header nav { gap: 4px; }
	#hero-section { padding: 44px 5% 58px; }
	#hero-section .hero-title { font-size: 38px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-action-list { flex-direction: column; }
	#hero-section .hero-action-list a { width: 100%; }
	#hero-section .hero-media { min-height: 360px; }
	#hero-section .hero-floating-card { right: 0; max-width: none; }
	#selection-section { padding: 62px 5%; }
	#selection-section .selection-grid { grid-template-columns: 1fr; }
	#feature-section { padding: 66px 5%; }
	#feature-section .feature-sticker { right: 12px; bottom: 18px; max-width: 190px; }
	#feature-section .feature-item { grid-template-columns: 1fr; }
	#recommend-section { padding: 66px 5%; }
	#service-section { padding: 68px 5%; }
	#moment-section { padding: 68px 5%; }
	footer { padding: 36px 5%; }
	footer .footer-link-list { flex-direction: column; width: 100%; }
	footer .footer-link-list a { width: 100%; text-align: center; }
}