body { margin: 0; padding: 0; font-family: 'Noto Sans TC', sans-serif; background-color: #fff9fa; color: #4a4a4a; overflow-x: hidden; }

* { box-sizing: border-box; }

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

.container { width: 90%; max-width: 1400px; margin: 0 auto; }

header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); z-index: 1000; padding: 15px 0; backdrop-filter: blur(5px); }
header .header-content { display: flex; justify-content: space-between; align-items: center; }
header .header-title { font-size: 24px; font-weight: 900; color: #ff4d79; margin: 0; letter-spacing: 1px; }
header .header-nav { display: flex; gap: 30px; }
header .nav-item { font-weight: 500; color: #666; transition: color 0.3s ease; }
header .nav-item:hover { color: #ff4d79; }

section { padding: 100px 0; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
section.is-active { opacity: 1; transform: translateY(0); }
.section-title { font-size: 42px; font-weight: 700; text-align: center; color: #333; margin-bottom: 20px; }
.section-subtitle { font-size: 18px; font-weight: 400; text-align: center; color: #888; margin-bottom: 60px; letter-spacing: 2px; }

#hero-section { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at center, #fff0f3 0%, #ffccd5 100%); padding-top: 80px; }
#hero-section .hero-content { margin: auto; max-width: 900px; padding: 40px; background: rgba(255, 255, 255, 0.6); border-radius: 30px; box-shadow: 0 20px 40px rgba(255, 182, 193, 0.3); backdrop-filter: blur(10px); transition: transform 0.5s ease; }
#hero-section.is-active .hero-content { transform: scale(1); }
#hero-section .hero-title { font-size: 56px; font-weight: 900; color: #e63946; margin: 0 0 20px 0; line-height: 1.2; text-shadow: 2px 2px 4px rgba(230, 57, 70, 0.1); }
#hero-section .hero-subtitle { font-size: 24px; font-weight: 500; color: #d90429; margin-bottom: 30px; }
#hero-section .hero-text { font-size: 18px; line-height: 1.8; color: #555; text-align: justify; margin-bottom: 40px; }
#hero-section .hero-media { display: inline-block; padding: 15px 40px; background-color: #ff4d79; color: #fff; font-size: 18px; font-weight: 700; border-radius: 50px; box-shadow: 0 10px 20px rgba(255, 77, 121, 0.4); transition: transform 0.3s ease, background-color 0.3s ease; }
#hero-section .hero-media:hover { transform: translateY(-5px); background-color: #ff3366; }

#origin-section { background-color: #fff; position: relative; }
#origin-section .origin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
#origin-section .origin-item { padding: 40px; background: #fff5f7; border-radius: 20px; border-top: 5px solid #ff8fa3; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.4s ease; }
#origin-section .origin-item:hover { transform: translateY(-10px); }
#origin-section .item-title { font-size: 24px; font-weight: 700; color: #e63946; margin-bottom: 15px; }
#origin-section .item-text { font-size: 16px; line-height: 1.7; color: #666; }

#celebrate-section { background: linear-gradient(180deg, #fff9fa 0%, #fff0f3 100%); }
#celebrate-section .celebrate-list { display: flex; flex-direction: column; gap: 40px; }
#celebrate-section .celebrate-item { display: flex; align-items: stretch; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(255, 182, 193, 0.15); transition: box-shadow 0.3s ease; }
#celebrate-section .celebrate-item:hover { box-shadow: 0 20px 45px rgba(255, 182, 193, 0.3); }
#celebrate-section .item-left { flex: 1; min-height: 300px; background-color: #ffccd5; position: relative; display: flex; align-items: center; justify-content: center; }
#celebrate-section .item-right { flex: 1; padding: 60px; }
#celebrate-section .item-title { font-size: 32px; font-weight: 900; color: #ff4d79; margin-bottom: 20px; }
#celebrate-section .item-text { font-size: 18px; line-height: 1.8; color: #555; margin-bottom: 20px; }
#celebrate-section .item-figure { font-size: 80px; font-weight: 900; color: rgba(255, 255, 255, 0.5); position: absolute; width: 100%; height: 100%; }
#celebrate-section .item-figure img { width: 100%; height: 100%; object-fit: cover; }
#celebrate-section .celebrate-item:nth-child(even) { flex-direction: row-reverse; }

#gift-section { background-color: #fff; }
#gift-section .gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
#gift-section .gift-item { background: #fffafb; border: 1px solid #ffe6ea; border-radius: 15px; padding: 30px; text-align: center; transition: all 0.4s ease; }
#gift-section .gift-item:hover { background: #fff; border-color: #ff4d79; box-shadow: 0 15px 30px rgba(255, 77, 121, 0.1); transform: scale(1.03); }
#gift-section .item-image { overflow: hidden; width: 80px; height: 80px; background-color: #ffccd5; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; color: #ff4d79; }
#gift-section .item-image img { width: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
#gift-section .item-title { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 10px; }
#gift-section .item-text { font-size: 15px; line-height: 1.6; color: #777; }

#tips-section { background: #fff0f3; padding-bottom: 120px; }
#tips-section .tips-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
#tips-section .tips-item { background: #fff; padding: 30px; border-radius: 15px; border-left: 8px solid #d90429; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: flex-start; gap: 20px; }
#tips-section .item-figure { font-size: 24px; font-weight: 900; color: #d90429; line-height: 1; }
#tips-section .item-content .item-title { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
#tips-section .item-content .item-text { font-size: 16px; color: #666; line-height: 1.5; }

footer { background-color: #333; color: #fff; text-align: center; padding: 40px 0; }
footer .footer-text { font-size: 14px; color: #aaa; margin-bottom: 15px; }
footer .footer-nav { display: flex; justify-content: center; gap: 20px; }
footer .nav-item { font-size: 14px; color: #fff; opacity: 0.7; transition: opacity 0.3s; }
footer .nav-item:hover { opacity: 1; }

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@media (max-width: 1280px) {
	#hero-section .hero-title { font-size: 48px; }
	#origin-section .origin-grid { gap: 20px; }
	#gift-section .gift-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 960px) {
	header .header-nav { display: none; }
	#hero-section .hero-title { font-size: 40px; }
	#hero-section .hero-subtitle { font-size: 20px; }
	#origin-section .origin-grid { grid-template-columns: repeat(2, 1fr); }
	#celebrate-section .celebrate-item { flex-direction: column; }
	#celebrate-section .celebrate-item:nth-child(even) { flex-direction: column; }
	#celebrate-section .item-left { width: 100%; min-height: 200px; }
	#celebrate-section .item-right { padding: 40px; }
}

@media (max-width: 768px) {
	.section-title { font-size: 32px; }
	.section-subtitle { font-size: 16px; margin-bottom: 40px; }
	#hero-section .hero-title { font-size: 32px; }
	#hero-section .hero-subtitle { font-size: 18px; }
	#hero-section .hero-text { font-size: 16px; }
	#origin-section .origin-grid { grid-template-columns: 1fr; }
	#gift-section .gift-grid { grid-template-columns: 1fr; }
	#tips-section .tips-item { flex-direction: column; gap: 10px; }
}

@media (max-width: 500px) {
	header .header-title { font-size: 20px; }
	#hero-section .hero-content { padding: 25px; }
	#hero-section .hero-title { font-size: 28px; }
	#celebrate-section .item-right { padding: 30px 20px; }
	#celebrate-section .item-title { font-size: 26px; }
	#tips-section .tips-item { padding: 20px; border-left-width: 5px; }
}