@charset "utf-8";
/* CSS Document */
  /* ===== Annotation Badges ===== 
  .annotation {
    position: absolute; top: -12px; left: 12px;
    background: #ff4757; color: #fff; font-size: 14px; font-weight: 700;
    padding: 2px 10px; border-radius: 10px; z-index: 10;
    letter-spacing: 0.5px; white-space: nowrap;
  }
  .annotation.green { background: #2ed573; }
  .annotation.blue { background: #1e90ff; }
  .annotation.orange { background: #ff6348; }

  /* ===== Top Bar (Trust Strip) ===== 
  .trust-bar {
    background: linear-gradient(90deg, #0057a8 0%, #003d75 100%);
    color: #fff; text-align: center; padding: 8px 20px;
    font-size: 13px; letter-spacing: 0.5px;
    position: relative;
  }
  .trust-bar span { margin: 0 16px; opacity: 0.92; }
  .trust-bar .icon { font-size: 15px; vertical-align: middle; margin-right: 4px; }

  /* ===== Header ===== 
  .header {
    background: #fff; padding: 0 40px; display: flex; align-items: center;
    justify-content: space-between; height: 70px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100;
  }
  .logo { font-size: 26px; font-weight: 800; color: #0057a8; letter-spacing: 1px; }
  .logo span { color: #2ed573; }
  .nav { display: flex; gap: 24px; font-size: 14px; font-weight: 500; color: #555; }
  .nav a:hover { color: #0057a8; }
  .header-cta { display: flex; align-items: center; gap: 16px; }
  .header-phone {
    font-size: 18px; font-weight: 700; color: #0057a8;
    display: flex; align-items: center; gap: 6px;
  }
  .header-phone .icon { font-size: 20px; }
  .btn-header-inquiry {
    background: #ff6348; color: #fff; border: none; padding: 10px 22px;
    border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: all 0.2s; animation: pulse 2s infinite;
  }
  .btn-header-inquiry:hover { background: #ee5a3a; transform: scale(1.04); }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,99,72,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(255,99,72,0); }
  }

  /* ===== Breadcrumb ===== 
  .breadcrumb {
    padding: 14px 40px; font-size: 13px; color: #888; background: #fff;
    border-bottom: 1px solid #eee;
  }
  .breadcrumb a { color: #0057a8; }

  /* ===== Main Layout ===== 
  .main { max-width: 1280px; margin: 24px auto; display: flex; gap: 28px; padding: 0 20px; }

  /* ===== Left Sidebar ===== 
  .sidebar {
    width: 220px; flex-shrink: 0; background: #fff; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); padding: 20px 0; align-self: flex-start;
    position: sticky; top: 90px;
  }
  .sidebar h3 {
    padding: 0 20px 12px; font-size: 16px; color: #0057a8;
    border-bottom: 2px solid #0057a8; margin-bottom: 8px;
  }
  .sidebar ul { list-style: none; }
  .sidebar li a {
    display: block; padding: 10px 20px; font-size: 14px; color: #555;
    border-left: 3px solid transparent; transition: all 0.2s;
  }
  .sidebar li a:hover, .sidebar li a.active {
    background: #f0f7ff; color: #0057a8; border-left-color: #0057a8;
  }

  /* ===== Product Hero ===== */
  .product-hero {
    flex: 1; background: #fff; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden;
  }
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .hero-image {
    background: #f8f9fa; padding: 30px; display: flex; align-items: center;
    justify-content: center; min-height: 380px; position: relative;
  }
  .hero-image .badge {
    position: absolute; top: 20px; left: 20px;
    background: #2ed573; color: #fff; padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
  }

  .hero-info { padding: 30px 32px; display: flex; flex-direction: column; }
  .hero-info h1 { font-size: 24px; color: #222; margin-bottom: 6px; }
  .hero-info .subtitle { color: #888; font-size: 13px; margin-bottom: 16px; }
  .hero-info .overview {
    font-size: 14px; color: #555; line-height: 1.8; margin-bottom: 20px;
    border-left: 3px solid #0057a8; padding: 12px 14px;
    background: #f8fbff; border-radius: 0 6px 6px 0;
  }

  /* ===== CTA Area ===== */
  .cta-area {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
	border-radius: 12px;
       padding: 20px; margin-top: auto; position: relative;
  }
  .cta-area h3 {
    font-size: 16px; color: #0057a8; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .cta-buttons { display: flex; flex-direction: column; gap: 10px; }
  .cta-btn {
    display: flex; align-items: center; gap: 10px; padding: 6px 20px;
    border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: none; text-align: left;
  }
  .cta-btn .icon { font-size: 20px; flex-shrink: 0; }
  .cta-btn .label { flex: 1; font-size:14px; text-align: left;}
  .cta-btn .sub { font-size: 14px; font-weight: 400; opacity: 0.8; display:block; line-height:22px; }
  .cta-btn .sub a{ color:#fff;}

  .cta-btn.primary { background: #ff6348; color: #fff; animation: pulse 2s infinite; }
  .cta-btn.primary:hover { background: #ee5a3a; transform: translateY(-1px); }
  .cta-btn.wechat { background: #07c160; color: #fff; }
  .cta-btn.wechat:hover { background: #06ad56; transform: translateY(-1px); }
  .cta-btn.phone-btn { background: #0057a8; color: #fff; }
  .cta-btn.phone-btn:hover { background: #004a91; transform: translateY(-1px); }
  .cta-btn.email { background: #fff; color: #0057a8; border: 1px solid #c4d4e3; }
  .cta-btn.email:hover { background: #f0f7ff; transform: translateY(-1px); }

  /* ===== Sections ===== */
  .section1 {
    background: #fff; border-radius: 10px; margin-top: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden;
  }
  .section-title {
    font-size: 18px; font-weight: 700; color: #222;
    padding: 18px 28px; border-left:4px solid #eda900; background: #f8f9fa;
  }
  .section-body { padding: 24px 28px; }

  /* Features Grid */
  .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .feature-card {
    background: #f8fbff; border-radius: 8px; padding: 16px; border: 1px solid #e8f0fe;
  }
  .feature-card .icon { font-size: 28px; margin-bottom: 8px;}
  .feature-card h4 { font-size: 14px; color: #0057a8; margin-bottom: 6px; }
  .feature-card p { font-size: 13px; color: #666; }

  /* Tables */
  .specs-table { width: 100%; border-collapse: collapse; }
  .specs-table th, .specs-table td {
    padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid #eee;
  }
  .specs-table th { background: #f8f9fa; color: #555; font-weight: 600; width: 40%; }
  .specs-table td { color: #333; }
  .specs-table tr:hover { background: #f8fbff; }

  .msds-table { width: 100%; border-collapse: collapse; }
  .msds-table th {
    background: #0057a8; color: #fff; padding: 12px 16px; font-size: 13px; font-weight: 600;
  }
  .msds-table td {
    padding: 12px 16px; font-size: 13px; text-align: center; border-bottom: 1px solid #eee;
  }
  .msds-table tr:nth-child(even) { background: #fef9f0; }

  /* ===== Mid-page CTA ===== */
  .inline-cta {
    background: linear-gradient(90deg, #0057a8 0%, #003d75 100%);
    color: #fff; border-radius: 10px; margin-top: 20px;
    padding: 28px 32px; display: flex; align-items: center;
    justify-content: space-between; position: relative;
  }
  .inline-cta h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .inline-cta p { font-size: 14px; opacity: 0.85; }
  .inline-cta .btns { display: flex; gap: 12px; flex-shrink: 0; }
  .inline-cta .btn-white {
    background: #fff; color: #0057a8; border: none; padding: 12px 24px;
    border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  }
  .inline-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

  .inline-cta .btn-green {
    background: #07c160; color: #fff; border: none; padding: 12px 24px;
    border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  }
  .inline-cta .btn-green:hover { background: #06ad56; transform: translateY(-2px); }

  /* ===== Floating Widget ===== */
  .floating-widget {
    position: fixed; right: 20px; bottom: 20px; z-index: 999;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  }
  .float-btn {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2); border: none; position: relative;
  }
  .float-btn:hover { transform: scale(1.1); }
  .float-btn.wx { background: #07c160; }
  .float-btn.ph { background: #0057a8; }
  .float-btn.form { background: #ff6348; }
  .float-btn .tooltip {
    position: absolute; right: 62px; top: 50%; transform: translateY(-50%);
    background: #333; color: #fff; padding: 6px 12px; border-radius: 6px;
    font-size: 12px; white-space: nowrap; opacity: 0;
    transition: opacity 0.2s; pointer-events: none;
  }
  .float-btn:hover .tooltip { opacity: 1; }

  /* ===== Footer CTA ===== */
  .footer-cta {
    background: #fff; border-radius: 10px; margin-top: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); padding: 32px;
    text-align: center; position: relative;
  }
  .footer-cta h3 { font-size: 22px; color: #222; margin-bottom: 8px; }
  .footer-cta p { color: #666; font-size: 14px; margin-bottom: 20px; }
  .contact-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
  }
  .contact-card {
    background: #f8fbff; border: 1.5px solid #e0ecf8; border-radius: 10px;
    padding: 20px 14px; text-align: center; transition: all 0.2s;
  }
  .contact-card:hover { border-color: #0057a8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,87,168,0.1); }
  .contact-card .icon { font-size: 32px; margin-bottom: 8px; }
  .contact-card h4 { font-size: 14px; color: #222; margin-bottom: 4px; }
  .contact-card p { font-size: 12px; color: #888; }
  .contact-card .value { font-size: 14px; color: #0057a8; font-weight: 700; margin-top: 6px; }

  /* WeChat QR */
  .wechat-qr {
    display: inline-block; background: #f0fff4; border: 2px solid #07c160;
    border-radius: 12px; padding: 16px; margin-top: 8px;
  }
  .wechat-qr .qr-placeholder {
    width: 120px; height: 120px; background: #e8f5e9; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #07c160; text-align: center; margin: 0 auto 8px;
  }
  .wechat-qr p { font-size: 12px; color: #07c160; font-weight: 600; }

  /* Quick Form */
  .quick-form {
    background: #f8f9fa; border-radius: 10px; padding: 24px;
     margin: 0 auto; text-align: left;
  }
  .quick-form h4 { font-size: 16px; color: #0057a8; margin-bottom: 14px; text-align: center; }
  .form-row { display: flex; gap: 12px; margin-bottom: 12px; }
  .form-row input, .form-row textarea, .form-row select {
    flex: 1; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 6px;
    font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.2s;
  }
  .form-row input:focus, .form-row textarea:focus { border-color: #0057a8; }
  .form-row textarea { resize: vertical; min-height: 70px; }
  .btn-submit {
    width: 100%; padding: 14px; background: #ff6348; color: #fff;
    border: none; border-radius: 8px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
  }
  .btn-submit:hover { background: #ee5a3a; }

  /* ===== Design Notes ===== */
  .design-notes { max-width: 1280px; margin: 40px auto 20px; padding: 0 20px; }
  .note-panel {
    background: #fffbe6; border: 2px dashed #f0c040; border-radius: 12px; padding: 28px 32px;
  }
  .note-panel h2 { font-size: 20px; color: #b8860b; margin-bottom: 16px; }
  .note-panel .note-section { margin-bottom: 18px; }
  .note-panel h4 { font-size: 15px; color: #333; margin-bottom: 8px; }
  .note-panel p, .note-panel li { font-size: 13px; color: #555; line-height: 1.8; }
  .note-panel ul { padding-left: 20px; }
  .note-panel .tag { display: inline-block; background: #e8f4fd; color: #0057a8; padding: 2px 10px; border-radius: 12px; font-size: 12px; margin: 2px; }

  .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
  .comp-card { border-radius: 10px; padding: 24px; border: 2px solid #eee; }
  .comp-card.before { background: #fff5f5; border-color: #ffcccc; }
  .comp-card.after { background: #f0fff4; border-color: #b2f5c0; }
  .comp-card h3 { font-size: 16px; margin-bottom: 12px; }
  .comp-card ul { padding-left: 18px; }
  .comp-card li { font-size: 13px; color: #555; margin-bottom: 6px; }
  
  /* ===== 移动端自适应样式 (断点：768px 以下) ===== */
@media (max-width: 768px) {
  /* 全局重置 */
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 1. 信任条 - 简化展示 */
  .trust-bar {
    padding: 6px 8px;
    font-size: 14px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .trust-bar span {
    margin: 0 8px;
    display: inline-block;
  }
  .trust-bar .icon {
    font-size: 13px;
  }

  /* 2. Header - 简化布局 */
  .header {
    padding: 0 16px;
    height: 60px;
  }
  .logo {
    font-size: 20px;
  }
  .nav {
    display: none; /* 移动端隐藏导航，可替换为汉堡菜单 */
  }
  .header-cta {
    gap: 8px;
  }
  .header-phone {
    font-size: 16px;
  }
  .header-phone .icon {
    font-size: 18px;
  }
  .btn-header-inquiry {
    padding: 8px 16px;
    font-size: 12px;
  }

  /* 3. 面包屑 - 简化 */
  .breadcrumb {
    padding: 10px 16px;
    font-size: 12px;
  }

  /* 4. 主体布局 - 单列排列 */
  .main {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
    margin: 16px auto;
  }

  /* 5. 侧边栏 - 转为顶部横向滚动 */
  .sidebar {
    width: 100%;
    position: static;
    padding: 12px 0;
    margin-bottom: 8px;
  }
  .sidebar h3 {
    padding: 0 16px 8px;
    font-size: 14px;
    border-bottom: 1px solid #0057a8;
  }
  .sidebar ul {
    display: flex;
    overflow-x: auto;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }
  .sidebar li {
    flex-shrink: 0;
  }
  .sidebar li a {
    padding: 8px 12px;
    font-size: 12px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .sidebar li a:hover, .sidebar li a.active {
    background: transparent;
    border-left-color: transparent;
    border-bottom-color: #0057a8;
  }

  /* 6. 产品头部 - 单列排列 */
  .product-hero {
    margin-top: 8px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-image {
    min-height: 240px;
    padding: 20px 16px;
  }
  .hero-info {
    padding: 20px 16px;
  }
  .hero-info h1 {
    font-size: 20px;
  }
  .hero-info .subtitle {
    font-size: 12px;
  }
  .hero-info .overview {
    font-size: 13px;
    padding: 10px 12px;
  }

  /* 7. CTA 面板 - 优化触控 */
  .cta-area {
    padding: 16px;
  }
  .cta-area h3 {
    font-size: 14px;
  }
  .cta-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  .cta-btn .icon {
    font-size: 18px;
  }
  .cta-btn .sub {
    font-size: 12px;
  }

  /* 8. 通用区块 - 适配 */
  .section {
    margin-top: 16px;
  }
  .section-title {
    padding: 14px 16px;
    font-size: 16px;
  }
  .section-body {
    padding: 16px;
  }

  /* 9. 特性网格 - 单列 */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-card {
    padding: 12px;
  }
  .feature-card .icon {
    font-size: 24px;
  }
  .feature-card h4 {
    font-size: 13px;
  }
  .feature-card p {
    font-size: 12px;
  }

  /* 10. 表格 - 适配移动端（横向滚动） */
  .specs-table, .msds-table {
    width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }
  .specs-table th, .specs-table td {
    padding: 10px 12px;
    font-size: 12px;
  }
  .msds-table th, .msds-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  /* 11. 中部拦截 CTA - 单列 */
  .inline-cta {
    padding: 20px 16px;
    flex-direction: column;

    text-align: center;
    gap: 16px;
  }
  .inline-cta h3 {
    font-size: 18px;
  }
  .inline-cta p {
    font-size: 13px;
  }
  .inline-cta .btns {
    width: 100%;
    gap: 8px;
  }
  .inline-cta .btn-white, .inline-cta .btn-green {
    width: 100%;
    padding: 10px;
    font-size: 13px;
  }

  /* 12. 底部CTA - 适配 */
  .footer-cta {
    padding: 20px 16px;
  }
  .footer-cta h3 {
    font-size: 18px;
  }
  .footer-cta p {
    font-size: 13px;
  }

  /* 联系卡片 - 2列排列 */
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .contact-card {
    padding: 16px 8px;
  }
  .contact-card .icon {
    font-size: 24px;
  }
  .contact-card h4 {
    font-size: 13px;
  }
  .contact-card .value {
    font-size: 13px;
  }

  /* 快速表单 - 单列 */
  .quick-form {
    padding: 16px;
  }
  .quick-form h4 {
    font-size: 14px;
  }
  .form-row {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  .form-row input, .form-row textarea, .form-row select {
    padding: 8px 12px;
    font-size: 12px;
  }
  .btn-submit {
    padding: 12px;
    font-size: 14px;
  }

  /* 13. 浮动按钮 - 简化+适配触控 */
  .floating-widget {
    gap: 8px;
    right: 12px;
    bottom: 12px;
  }
  .float-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .float-btn .tooltip {
    display: none; /* 移动端隐藏tooltip，节省空间 */
  }

  /* 14. 设计说明面板 - 适配 */
  .design-notes {
    padding: 0 16px;
    margin: 20px auto;
  }
  .note-panel {
    padding: 20px 16px;
  }
  .note-panel h2 {
    font-size: 18px;
  }
  .comp-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .comp-card {
    padding: 16px;
  }
  .comp-card h3 {
    font-size: 14px;
  }
  .comp-card li {
    font-size: 12px;
  }
}

/* 小屏手机适配 (480px 以下) */
@media (max-width: 480px) {
  /* 联系卡片 - 单列 */
  .contact-cards {
    grid-template-columns: 1fr;
  }

  /* 浮动按钮 - 仅保留微信+电话 */
  .float-btn.form {
    display: none;
  }

  /* Header - 进一步简化 */
  .header-phone span:last-child {
    display: none; /* 隐藏手机号，仅保留图标 */
  }
  .btn-header-inquiry {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* ===== 移动端增强功能 ===== */
/* 1. 手机号一键拨打 */
.header-phone a, .cta-btn.phone-btn a, .contact-card .value.tel {
  color: inherit;
  text-decoration: none;
}
.header-phone a::after, .cta-btn.phone-btn a::after {
  content: "";
  display: block;
}
@media (max-width: 768px) {
  .header-phone {
    cursor: pointer;
  }
  .header-phone::after {
    content: "tel:13402501627";
    display: none;
  }
  .cta-btn.phone-btn {
    cursor: pointer;
  }
  .cta-btn.phone-btn::after {
    content: "tel:13402501627";
    display: none;
  }
  /* 微信一键跳转（需配合微信开放平台） */
  .cta-btn.wechat {
    cursor: pointer;
  }
  .cta-btn.wechat::after {
    content: "weixin://"; /* 可替换为企微活码链接 */
    display: none;
  }
}

/* 2. 移动端表单优化 */
input[type="tel"], input[type="text"], input[type="email"], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 6px;
}
textarea {
  resize: none; /* 移动端禁用手动调整大小 */
}

/* 3. 点击反馈 */
.cta-btn, .float-btn, .btn-submit, .btn-header-inquiry {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.cta-btn:active, .float-btn:active, .btn-submit:active, .btn-header-inquiry:active {
  transform: scale(0.98);
}