Spaces:

mistpe
/

showWine

Running

File size: 28,635 Bytes

bac0298

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绍兴黄酒 - 文化底蕴</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <!-- 复用首页的第一个style标签的内容 -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

        :root {
            --primary-color: #FFB42E;      /* 明亮温暖的金黄 */
            --secondary-color: #FF8264;    /* 暖橙色 */
            --accent-color: #FF6B6B;       /* 活力红色 */
            --bg-light: #FFF9F0;          /* 温暖的背景色 */
            --text-dark: #2D232E;         /* 深紫色文字 */
            --text-light: #FFF9F0;        /* 浅色文字 */
            --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
            --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Serif SC', serif;
            background: var(--bg-light);
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* 现代导航栏 */
        .navigation {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 249, 240, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .navigation.scrolled {
            background: rgba(255, 249, 240, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 2rem;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
        }

        .logo-text {
            font-size: 1.5rem;
            font-weight: bold;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }

        .logo-text::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--gradient-1);
            transform: scaleX(0);
            transition: transform 0.3s ease;
            transform-origin: right;
        }

        .nav-logo:hover .logo-text::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .nav-link {
            text-decoration: none;
            color: var(--text-dark);
            font-size: 1rem;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            background: transparent;
            border: 2px solid transparent;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--gradient-1);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .nav-link:hover {
            color: white;
            border-color: transparent;
        }

        .nav-link:hover::before {
            opacity: 1;
        }

        .nav-link.active {
            background: var(--gradient-1);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
        }

        /* 英雄区域 */
        .hero {
            min-height: 100vh;
            padding-top: 80px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .hero-content {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-text {
            position: relative;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .hero-subtitle::before {
            content: '';
            width: 50px;
            height: 2px;
            background: var(--gradient-1);
        }

        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.2;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .hero-title .highlight {
            display: inline-block;
            position: relative;
            color: var(--primary-color);
        }

        .hero-title .highlight::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--gradient-1);
            opacity: 0.3;
            z-index: -1;
        }

        .hero-description {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-dark);
            opacity: 0.8;
            margin-bottom: 2rem;
            position: relative;
        }

        .hero-cta {
            display: flex;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .cta-button {
            padding: 1rem 2rem;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .cta-primary {
            background: var(--gradient-1);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
        }

        .cta-primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .cta-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
        }

        .cta-primary:hover::after {
            opacity: 1;
        }

        .cta-secondary {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--text-dark);
        }

        .cta-secondary:hover {
            background: var(--gradient-2);
            color: white;
            border-color: transparent;
        }

        /* 装饰元素 */
        .hero-decoration {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .decoration-circle {
            position: absolute;
            border-radius: 50%;
            background: var(--gradient-1);
            opacity: 0.1;
            filter: blur(40px);
        }

        .circle-1 {
            width: 400px;
            height: 400px;
            top: -100px;
            right: -100px;
        }

        .circle-2 {
            width: 300px;
            height: 300px;
            bottom: -50px;
            left: -50px;
            background: var(--gradient-2);
        }

        .floating-text {
            position: absolute;
            font-size: clamp(5rem, 15vw, 10rem);
            font-weight: bold;
            opacity: 0.03;
            white-space: nowrap;
            color: var(--text-dark);
        }

        .floating-text-1 {
            top: 20%;
            left: -10%;
            transform: rotate(-15deg);
        }

        .floating-text-2 {
            bottom: 10%;
            right: -5%;
            transform: rotate(10deg);
        }

        /* 动态背景图案 */
        .bg-pattern {
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
                radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
            opacity: 0.5;
            animation: patternMove 20s linear infinite;
        }

        @keyframes patternMove {
            0% {
                background-position: 0% 0%;
            }
            100% {
                background-position: 100% 100%;
            }
        }

        /* 3D展示区占位 */
        .model-showcase {
                    position: relative;
                    width: 100%;
                    height: 500px;
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
                    backdrop-filter: blur(10px);
                }
                
                #model-container canvas {
                    width: 100% !important;
                    height: 100% !important;
                    border-radius: 20px;
                }

    </style>
     <style>
        /* 复用首页的基础样式 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

        :root {
            --primary-color: #FFB42E;
            --secondary-color: #FF8264;
            --accent-color: #FF6B6B;
            --bg-light: #FFF9F0;
            --text-dark: #2D232E;
            --text-light: #FFF9F0;
            --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
            --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Serif SC', serif;
            background: var(--bg-light);
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* 复用首页的导航栏样式 */
        .navigation {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 249, 240, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        /* 以下是hero区域的样式，参考首页的设计 */
        .hero {
            min-height: 100vh;
            padding-top: 80px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: var(--bg-light);
        }

        .hero-content {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-text {
            position: relative;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .hero-subtitle::before {
            content: '';
            width: 50px;
            height: 2px;
            background: var(--gradient-1);
        }

        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.2;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .hero-title .highlight {
            display: inline-block;
            position: relative;
            color: var(--primary-color);
        }

        .hero-description {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-dark);
            opacity: 0.8;
            margin-bottom: 2rem;
        }

        .model-showcase {
            position: relative;
            width: 100%;
            height: 500px;
            border-radius: 20px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            backdrop-filter: blur(10px);
        }

        /* 装饰元素样式 */
        .hero-decoration {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .bg-pattern {
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
                radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
            opacity: 0.5;
            animation: patternMove 20s linear infinite;
        }

        .decoration-circle {
            position: absolute;
            border-radius: 50%;
            background: var(--gradient-1);
            opacity: 0.1;
            filter: blur(40px);
        }

        .circle-1 {
            width: 400px;
            height: 400px;
            top: -100px;
            right: -100px;
        }

        .circle-2 {
            width: 300px;
            height: 300px;
            bottom: -50px;
            left: -50px;
            background: var(--gradient-2);
        }

        .hero-image {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 20px;
        }

        .cta-button {
            display: inline-block;
            padding: 1rem 2rem;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .cta-primary {
            background: var(--gradient-1);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
        }

        .cta-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navigation">
        <a href="index.html" class="nav-logo">
            <span class="logo-text">绍兴黄酒</span>
        </a>
        <div class="nav-links">
            <a href="culture.html" class="nav-link active">文化底蕴</a>
            <a href="products.html" class="nav-link">臻品佳酿</a>
            <a href="innovation.html" class="nav-link">创新未来</a>
            <a href="contact.html" class="nav-link">联系我们</a>
            <a href="shop.html" class="nav-link">立即品鉴</a>
        </div>
    </nav>

    <!-- 文化英雄区域 -->
    <section class="hero">
        <!-- 背景装饰 -->
        <div class="hero-decoration">
            <div class="bg-pattern"></div>
            <div class="decoration-circle circle-1"></div>
            <div class="decoration-circle circle-2"></div>
            <div class="floating-text floating-text-1">匠心</div>
            <div class="floating-text floating-text-2">传承</div>
        </div>

        <!-- 主要内容 -->
        <div class="hero-content">
            <div class="hero-text">
                <div class="hero-subtitle">千年酿造 · 文化传承</div>
                <h1 class="hero-title">
                    探寻 <span class="highlight">绍兴黄酒</span><br>
                    千年文化瑰宝
                </h1>
                <p class="hero-description">
                    走进绍兴黄酒的世界，感受中国传统酿造艺术的精髓，
                    探索一段跨越千年的文化瑰宝。每一滴都凝聚着匠人的智慧与岁月的沉淀。
                </p>
                <div class="hero-cta">
                    <a href="#culture-heritage" class="cta-button cta-primary">了解文化</a>
                </div>
            </div>
            <div class="model-showcase">
                <div class="hero-image">
                    <img src="img2/culture-hero.jpg" alt="绍兴黄酒文化展示">
                </div>
            </div>
        </div>
    </section>

    <!-- 后续内容将在下一部分继续 -->
     <!-- 完整的3D立体卡片设计 -->
<!-- 优化后的水平展开布局 -->
<section id="culture-heritage" class="culture-section">
    <!-- 完整的样式代码 -->
<style>
    .culture-section {
        padding: 4rem 0;
        background: var(--bg-light);
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .section-container {
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 2rem;
        perspective: 2000px;
    }

    .timeline {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        height: 600px;
        transform-style: preserve-3d;
        position: relative;
    }

    .timeline-item {
        position: relative;
        flex: 0.18;
        min-width: 100px;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        transform-style: preserve-3d;
        transform: perspective(1000px) rotateY(10deg) translateZ(0);
    }

    /* 悬停状态展开 */
    .timeline-item:hover {
        flex: 0.6;
        transform: perspective(1000px) rotateY(0) translateZ(50px);
    }

    /* 其他卡片收起 */
    .timeline-item:hover ~ .timeline-item {
        flex: 0.12;
        transform: perspective(1000px) rotateY(20deg) translateZ(0);
    }

    /* 前面的卡片也收起 */
    .timeline-item:has(~ .timeline-item:hover) {
        flex: 0.12;
        transform: perspective(1000px) rotateY(-20deg) translateZ(0);
    }

    .timeline-card {
        position: absolute;
        inset: 0;
        padding: 3rem 2.5rem;
        background: white;
        border-radius: 24px;
        transition: all 0.6s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* 卡片装饰线 */
    .timeline-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 卡片样式变体 */
    .timeline-card-1 {
        background: linear-gradient(135deg, #fff 0%, #fff8ef 100%);
        box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1);
    }
    .timeline-card-1::before {
        background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    }

    .timeline-card-2 {
        background: linear-gradient(135deg, #fff 0%, #fff4f0 100%);
        box-shadow: 20px 20px 60px rgba(255, 107, 107, 0.1);
    }
    .timeline-card-2::before {
        background: linear-gradient(to bottom, var(--secondary-color), var(--accent-color));
    }

    .timeline-card-3 {
        background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
        box-shadow: 20px 20px 60px rgba(255, 130, 100, 0.1);
    }
    .timeline-card-3::before {
        background: linear-gradient(to bottom, var(--accent-color), var(--secondary-color));
    }

    .timeline-card-4 {
        background: linear-gradient(135deg, #fff 0%, #fff6ef 100%);
        box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1);
    }
    .timeline-card-4::before {
        background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
    }

    /* 悬停时装饰线效果 */
    .timeline-item:hover .timeline-card::before {
        width: 6px;
        box-shadow: 0 0 20px rgba(var(--primary-color), 0.3);
    }

    /* 增加卡片内阴影效果 */
    .timeline-card::after {
        content: '';
        position: absolute;
        inset: 1rem;
        border-radius: 20px;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .timeline-item:hover .timeline-card::after {
        opacity: 1;
    }

    /* 图标样式 */
    .timeline-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
        transition: all 0.5s ease;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        transform: translateZ(20px);
    }

    .timeline-item:hover .timeline-icon {
        transform: scale(1.1) translateZ(30px);
    }

    .timeline-card-1 .timeline-icon {
        border: 3px solid var(--primary-color);
        color: var(--primary-color);
    }

    .timeline-card-2 .timeline-icon {
        border: 3px solid var(--secondary-color);
        color: var(--secondary-color);
    }

    .timeline-card-3 .timeline-icon {
        border: 3px solid var(--accent-color);
        color: var(--accent-color);
    }

    .timeline-card-4 .timeline-icon {
        border: 3px solid var(--primary-color);
        color: var(--primary-color);
    }

    .timeline-icon svg {
        width: 36px;
        height: 36px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

    /* 文字样式和动画 */
    .timeline-content {
        opacity: 0.5;
        transition: all 0.5s ease;
        overflow: hidden;
        flex: 1;
        transform-style: preserve-3d;
    }

    .timeline-item:hover .timeline-content {
        opacity: 1;
        transform: translateZ(30px);
    }

    .timeline-era {
        font-size: 1.8rem;
        font-weight: 500;
        margin-bottom: 1rem;
        transition: all 0.5s ease;
        letter-spacing: 0.05em;
    }

    .timeline-title {
        font-size: 2.4rem;
        margin-bottom: 1.5rem;
        color: var(--text-dark);
        font-weight: 700;
        transition: all 0.5s ease;
        line-height: 1.2;
        transform: translateZ(10px);
    }

    .timeline-text {
        line-height: 1.8;
        color: var(--text-dark);
        font-size: 1.4rem;
        opacity: 0;
        transition: all 0.5s ease;
        transform: translateX(-20px) translateZ(0);
    }

    .timeline-item:hover .timeline-text {
        opacity: 0.85;
        transform: translateX(0) translateZ(20px);
    }

    /* 添加卡片底部阴影 */
    .timeline-item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -40px;
        height: 40px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .timeline-item:hover::after {
        opacity: 1;
    }

    /* 响应式设计 */
    @media (max-width: 1400px) {
        .timeline {
            height: 500px;
        }
        
        .timeline-text {
            font-size: 1.2rem;
        }

        .timeline-title {
            font-size: 2rem;
        }
    }

    @media (max-width: 1024px) {
        .timeline {
            flex-direction: column;
            height: auto;
            gap: 2rem;
        }

        .timeline-item {
            height: 180px;
            width: 100%;
            transform: none !important;
        }

        .timeline-item:hover {
            height: 400px;
        }

        .timeline-content {
            padding: 0 1rem;
        }

        .timeline-icon {
            width: 56px;
            height: 56px;
        }

        .timeline-era {
            font-size: 1.4rem;
        }

        .timeline-title {
            font-size: 1.8rem;
        }

        .timeline-text {
            font-size: 1.1rem;
        }
    }
</style>

    <div class="section-container">
        <div class="timeline">
            <!-- 春秋战国 -->
            <div class="timeline-item">
                <div class="timeline-card timeline-card-1">
                    <div class="timeline-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12,3 L17,8 L12,13 L7,8 L12,3 Z"/>
                            <path d="M12,13 L12,21"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-era">春秋战国</div>
                        <h3 class="timeline-title">黄酒诞生</h3>
                        <p class="timeline-text">绍兴黄酒诞生于春秋战国时期，相传越王勾践曾以黄酒犒赏将士。这片土地得天独厚的地理环境与先进的酿酒工艺，开启了黄酒文化的先河。</p>
                    </div>
                </div>
            </div>

            <!-- 唐宋时期 -->
            <div class="timeline-item">
                <div class="timeline-card timeline-card-2">
                    <div class="timeline-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M6,4 L18,4 L16,20 L8,20 L6,4 Z"/>
                            <path d="M4,4 L20,4"/>
                            <path d="M8,8 L16,8"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-era">唐宋时期</div>
                        <h3 class="timeline-title">黄酒繁荣</h3>
                        <p class="timeline-text">唐宋时期，"会稽美酒"享誉天下。当时的文人墨客常以黄酒为题，挥毫泼墨，留下了无数诗词佳作。苏东坡更是亲自改进酿酒工艺，开创了"东坡醉酒"的佳话。</p>
                    </div>
                </div>
            </div>

            <!-- 明清时代 -->
            <div class="timeline-item">
                <div class="timeline-card timeline-card-3">
                    <div class="timeline-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M9,4 C7,4 5,6 5,8 C5,10 7,12 9,12 L15,12 C17,12 19,14 19,16 C19,18 17,20 15,20"/>
                            <circle cx="15" cy="16" r="2"/>
                            <circle cx="9" cy="8" r="2"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-era">明清时代</div>
                        <h3 class="timeline-title">工艺完善</h3>
                        <p class="timeline-text">明清时期，绍兴黄酒的酿造工艺臻于完善，形成了独特的"绍兴酿法"。这一时期，黄酒不仅是饮品，更成为了文人雅士交流的重要媒介，见证了无数风雅故事。</p>
                    </div>
                </div>
            </div>

            <!-- 现代发展 -->
            <div class="timeline-item">
                <div class="timeline-card timeline-card-4">
                    <div class="timeline-icon">
                        <svg viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="9"/>
                            <path d="M12,7 L12,12 L16,12"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-era">现代发展</div>
                        <h3 class="timeline-title">创新传承</h3>
                        <p class="timeline-text">传统与现代的完美融合，绍兴黄酒在保持传统工艺精髓的同时，不断创新。推出适合年轻人口味的新品，让这份千年文化在新时代焕发出璀璨光彩。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>