/* 全局重置 - 确保所有图片块状化无间隙 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 0px;
    font-family: -apple-system, Roboto, "Helvetica Neue", Roboto, "Microsoft Yahei",
      "Hiragino Sans GB", Helvetica, Arial, sans-serif, nomospace;
    font-style: normal;
    line-height: 1.5;
  }
  
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: #f0f0f0; /* 背景色，突出居中效果 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  /* PC端主容器 - 居中显示，固定最大宽度 */
  .pc-container {
    width: 100%;
    max-width: 640px; /* 移动端设计宽度，PC端居中显示 */
    margin: 0 auto;
    background: #fff;
    position: relative;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强立体感 */
  }
  
  /* 顶部banner - 固定定位，相对于pc-container居中 */
  .top-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px; /* 与pc-container宽度一致 */
    z-index: 999;
    line-height: 0;
    font-size: 0;
  }
  
  .top-banner img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 顶部占位 - 现在会自动居中 */
  .top-placeholder {
    width: 100%;
    height: auto;
    padding-top: 15%; /* 假设top.gif高度是宽度的15%，可根据实际调整 */
    background: transparent;
  }
  
  /* 中间容器 - 自动居中 */
  .container {
    width: 100%;
    line-height: 0;
    font-size: 0;
    display: block;
    margin: 0 auto; /* 水平居中 */
    padding: 0;
    max-width: 640px; /* 确保内部内容不超出 */
  }
  
  /* 两个图片盒子 - 完全无间距，自动居中 */
  .barrager-box,
  .top-img {
    width: 100%;
    line-height: 0;
    font-size: 0;
    margin: 0 auto; /* 水平居中 */
    padding: 0;
    display: block;
  }
  
  /* 图片本身 - 块状化去除inline间隙，自动居中 */
  .barrager-box img,
  .top-img img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    margin: 0 auto; /* 水平居中 */
    padding: 0;
  }
  
  /* 底部固定图片 - 固定定位，相对于pc-container居中 */
  .bottom-image {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px; /* 与pc-container宽度一致 */
    line-height: 0;
    font-size: 0;
    z-index: 999;
  }
  
  .bottom-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 主要内容区域 - 添加底部内边距防止fixed遮挡 */
  .content-wrapper {
    width: 100%;
    max-width: 640px; /* 限制最大宽度 */
    margin: 0 auto; /* 水平居中 */
    min-height: 100vh;
    padding-bottom: 120px; /* 底部图片高度，确保内容不被遮挡 */
    background: #fff;
  }
  
  img {
    max-width: 100%;
    display: block;
  }
  
  li,
  ol,
  p,
  ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
  }
  
  /* 客服按钮和推广按钮基础样式 */
  .kf,
  .tg,
  .sw {
    position: fixed;
    animation: kf 2s infinite;
    z-index: 9999;
    cursor: pointer;
  }
  
  .kf img,
  .tg img,
  .sw img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* 客服按钮 - PC端 */
  .kf {
    top: 5%;
    right: calc(50% - 320px + 32vw); /* 相对于640px容器计算位置 */
    transform: none;
  }
  
  .kf img {
    width: 80px;
  }
  
  /* 推广按钮 - PC端 */
  .tg {
    top: 65%;
    right: calc(50% - 320px + 63vw);
  }
  
  .tg img {
    width: 80px;
  }
  
  /* 左侧浮动按钮 - PC端 */
  .sw {
    top: 40%;
    left: calc(50% - 320px + 20px);
  }
  
  .sw img {
    width: 80px;
  }
  
  /* 浮动条 - 底部悬浮 */
  .float {
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    bottom: -2px;
    line-height: 0;
    z-index: 10;
    width: 100%;
    max-width: 640px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* 倒计时样式 */
  .countdown {
    margin-top: 15px;
    color: #f0dc00;
    font-weight: bold;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
  }
  
  /* 动画 */
  @keyframes kf {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* 移动端适配 (屏幕宽度 ≤ 768px) */
  @media (max-width: 768px) {
    body {
      background: #fff; /* 移动端取消背景色 */
      display: block; /* 恢复默认流式布局 */
    }
    
    .pc-container {
      max-width: 100%; /* 移动端占满全屏 */
      box-shadow: none;
      margin: 0;
    }
    
    /* 移动端取消所有居中对齐 */
    .top-banner,
    .bottom-image,
    .container,
    .barrager-box,
    .top-img,
    .content-wrapper,
    .float {
      left: 0;
      right: 0;
      transform: none;
      max-width: 100%;
      margin: 0;
    }
    
    /* 重置浮动按钮位置为移动端样式 */
    .kf {
      top: 38%;
      right: 3vw;
      left: auto;
    }
    
    .kf img {
      width: 15vw;
      max-width: 60px;
    }
    
    .tg {
      top: 70%;
      right: 80vw;
      left: auto;
    }
    
    .tg img {
      width: 20vw;
      max-width: 60px;
    }
    
    .sw {
      top: 45%;
      left: 10px;
      right: auto;
    }
    
    .sw img {
      width: 50px;
    }
    
    /* 调整顶部占位比例 */
    .top-placeholder {
      padding-top: 12%;
    }
  
    /* 调整底部内边距 */
    .content-wrapper {
      padding-bottom: 100px; /* 移动端底部图片通常较小 */
    }
  }
  
  /* 超小屏幕适配 */
  @media (max-width: 320px) {
    html,
    body {
      font-size: 14px;
    }
    
    .content-wrapper {
      padding-bottom: 80px;
    }
  }
  
  /* 中等屏幕适配 */
  @media (min-width: 376px) {
    html,
    body {
      font-size: 0px;
    }
  }
  
  /* 大屏幕适配 */
  @media (min-width: 576px) {
    html,
    body {
      font-size: 26px;
    }
  }
  
  /* PC大屏幕适配 */
  @media (min-width: 1024px) {
    html,
    body {
      font-size: 0px;
    }
  }
  
  /* 确保body没有额外内边距 */
  body::after {
    display: none;
  }
  
  /* 图片加载优化 */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }