@charset "utf-8";
.hero-slider{
	height: 50vh;
}
 /* ===== 产品详情主体 ===== */
    .product-detail {
      display:flex;
      gap:48px;
      align-items: center;
      padding-bottom:50px;
      border-bottom:1px solid #e8e8e8;
    }

    /* --- 左侧图片区 --- */
    .gallery {
      flex: 0 0 690px;
      display:flex;
      gap: 20px;
    }
    .gallery-main {
      flex:1; min-width:0; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
      background:#f5f5f5; position:relative;
    }
    .gallery-main img {
      width:100%; height:100%; object-fit:cover;
      transition:opacity 0.4s ease, transform 0.5s ease;
    }
    .gallery-main img.active { opacity:1; transform:scale(1); }
    .gallery-main img { opacity:0; position:absolute; top:0; left:0; }
    .gallery-main img:first-child { opacity:1; position:relative; }

    /* VESSEL 水印 */
    .gallery-badge {
      position:absolute; top:16px; right:16px;
      background:rgba(255,255,255,0.92); padding:6px 14px;
      border-radius:6px; font-size:13px; font-weight:600;
      color:#555; letter-spacing:2px; z-index:3;
      backdrop-filter:blur(4px);
    }
    .gallery-badge span { color:#c9a96e; font-style:italic; font-weight:700; }

    /* ===== 缩略图侧栏（自然排列）==== */
    .thumbs-sidebar {
      flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
      gap:6px; padding:4px 0;
    }
    .thumb-arrow {
      width:24px; height:24px; border-radius:50%;
      background:#f0f0f0; border:1px solid #e0e0e0; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:10px; color:#aaa; transition:all 0.2s;
      line-height:1; user-select:none;
    }
    .thumb-arrow:hover { background:#e8e8e8; color:#666; border-color:#d0d0d0; }
    .thumb-arrow:active { transform:scale(0.92); }
    
    .thumbs-list {
      display:flex; flex-direction:column; gap:10px;
    }
    .thumb {
      width:56px; height:46px; border-radius:6px; overflow:hidden;
      cursor:pointer; border:2px solid transparent;
      transition:border-color 0.25s, transform 0.25s, opacity 0.25s, box-shadow 0.25s;
      opacity:0.65; background:#f0f0f0;
      flex-shrink:0;
    }
    .thumb:hover { opacity:0.88; transform:translateX(2px); }
    .thumb.active {
      border-color:#d4894a; opacity:1; transform:translateX(3px);
      box-shadow:0 2px 8px rgba(212,137,74,0.25);
    }
    .thumb img { width:100%; height:100%; object-fit:cover; display:block; }

    /* --- 右侧信息区 --- */
    .info-panel { flex:1; padding-top:8px; }

    .info-title {
      font-size:36px; font-weight:400; color:#222;
      margin-bottom:30px; letter-spacing:2px;
    }

    /* 技术参数 */
    .spec-section { margin-bottom:32px; }
    .spec-heading {
      font-size:18px; font-weight:500; color:#222; margin-bottom:18px;
      display:flex; align-items:center; gap:6px;
    }
    .spec-heading span { color:#d4894a; font-weight:700; font-style:italic; font-size:20px; }

    .spec-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:16px 24px;
    }
    .spec-item {}
    .spec-label { font-size:12px; color:#999; margin-bottom:4px; }
    .spec-value { font-size:15px; font-weight:600; color:#333; }

    /* 分割线 */
    .divider { height:1px; background:#eee; margin:28px 0; }

    /* 功能配置 */
    .feature-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px;
    }
    .feature-item {
      display:flex; align-items:center; gap:8px; font-size:15px; color:#333;
    }
    .feature-num {
      width:22px; height:22px; border-radius:50%; background:#222; color:#fff;
      font-size:11px; font-weight:700; display:inline-flex;
      align-items:center; justify-content:center; flex-shrink:0;
    }

    /* 按钮 */
    .btn-row { display:flex; gap:16px; margin-top:36px; }
    .btn {
      padding:13px 28px; border-radius:6px; font-size:14px; font-weight:500;
      cursor:pointer; border:none; transition:all 0.3s;
      display:inline-flex; align-items:center; gap:6px;
    }
    .btn-primary {
      background:#d4894a; color:#fff;
    }
    .btn-primary:hover {
      background:#c27a3a; transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(212,137,74,0.35);
    }
    .btn-secondary {
      background:#d4894a; color:#fff;
    }
    .btn-secondary:hover {
      background:#c27a3a; transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(212,137,74,0.35);
    }
    .btn-icon { font-size:16px; transition:transform 0.3s; }
    .btn:hover .btn-icon { transform:translateY(2px); }

    /* ===== 产品介绍 ===== */
    .intro-section {box-shadow: 0 4px 20px rgba(0,0,0,0.05);border-bottom: 1px solid #e8e8e8;padding: 48px 30px 60px;}
    .intro-title-en {
      font-size:26px; font-weight:700; color:#222; margin-bottom:6px;
    }
    .intro-title-cn {
      font-size:22px; font-weight:600; color:#333; margin-bottom:24px;
    }
    .intro-text {
      font-size:15px; color:#666; line-height:2; margin-bottom:16px;
    }
    .intro-text-en {
      font-size:14px; color:#999; line-height:1.9;
    }

    /* 响应式 */
    @media (max-width:900px) {
      .product-detail { flex-direction:column; gap:32px; }
      .gallery { flex:none; width:100%; max-width:560px; margin:0 auto; flex-direction:row-reverse; justify-content:center; }
      .thumbs-sidebar { flex-direction:row; gap:8px; order:-1; }
      .thumbs-list { flex-direction:row; }
      .thumb { width:64px; height:50px; }
      .thumb.active { transform:translateY(-2px) translateX(0); }
      .thumb:hover { transform:translateY(-1px) translateX(0); }
      .thumb-arrow { display:none; }
      .info-title { font-size:28px; }
      .spec-grid { grid-template-columns:repeat(2,1fr); }
      .feature-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:480px) {
      .container { padding:20px 14px; }
      .info-title { font-size:24px; }
      .spec-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .feature-grid { grid-template-columns:1fr 1fr; }
      .btn-row { flex-direction:column; }
      .btn { justify-content:center; }
    }
	
	
	/* ===== Hero ===== */
	.hero {
	  height: 55vh;
	  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 60%, #16213e 100%);
	  display: flex; flex-direction: column; align-items: center; justify-content: center;
	  text-align: center; position: relative; overflow: hidden;
	}
	.hero::before {
	  content: ""; position: absolute; inset: 0;
	  background: radial-gradient(ellipse at 50% 70%, rgba(212,137,74,0.14) 0%, transparent 65%);
	}
	.hero-eyebrow {font-size: 38px;letter-spacing: 4px;color: #d4894a;text-transform: uppercase;margin-bottom: 16px;opacity: 0;animation: fadeInDown 0.8s 0.2s forwards;}
	.hero-title {color: #fff;font-size: clamp(32px, 5vw, 56px);font-weight: 800;margin-bottom: 16px;opacity: 0;animation: fadeInDown 0.8s 0.4s forwards;}
	.hero-title span { color: #d4894a; }
	.hero-sub { font-size: 16px; color: rgba(255,255,255,0.5); max-width: 520px; line-height: 1.7; opacity: 0; animation: fadeInUp 0.8s 0.6s forwards; }
	
	@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
	@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
	
	.btn-row a {
	    text-decoration: none;
	    color: #fff;
	}
	
	.intro-text img {
    width: 100%;
}


 .info-section {
            /* max-width: 900px; */
            margin: 0 auto;
            background: #ffffff;
            border-radius: 16px;
            padding: 2rem;
        }
        .section-title {
            font-size: 1.3rem;
            color: #1e293b;
            font-weight: 600;
            margin-bottom: 1.2rem;
            padding-left: 0.6rem;
            border-left: 4px solid #10b981;
        }
        .info-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
            margin-bottom: 2.5rem;
        }
        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            color: #334155;
            font-size: 0.95rem;
        }
        .info-item .check-icon {
            color: #10b981;
            font-size: 1.1rem;
            margin-top: 0.1rem;
            flex-shrink: 0;
        }
        .info-item strong {
            color: #0f172a;
            font-weight: 500;
        }