body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
  }

  .container {
      padding: 0 15px;
  }

  /* 标签容器样式 - 让标签横向排列 */
  .tab {
      padding-top: 30px;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
      /* 用于配合底部红线定位 */
  }

  /* 标签项基础样式 */
  .tab_item {
      /* 调整内边距控制标签大小，可根据需求修改 */
      padding: 8px 30px;
      /* 背景图片 - 默认未选中状态 */
      background-image: url('../images/tab.png');
      /* 让背景图片适配标签大小 */
      background-size: 100% 100%;
      background-repeat: no-repeat;
      /* 鼠标移上去显示手型 */
      cursor: pointer;
      /* 去掉文字选中效果 */
      user-select: none;
      /* 文字颜色可根据设计调整 */
      color: #333;
      /* 标签之间的间距 */
      margin-right: 10px;
      color: #dc2124;
  }

  .tab_item a {
      color: #dc2124;
  }

  /* 选中状态的标签样式 */
  .tab_item.active {
      background-image: url('../images/tabcheck.png');
      /* 选中时文字颜色可根据设计调整，比如红色 */
      color: #f3d192;
  }

  .tab_item.active a {
      color: #f3d192;
  }

  .line {
      border-bottom: 1px solid #ec540b;
      /* 让红线宽度和标签容器一致 */
      width: 100%;
      margin-bottom: 10px;
      /* 微调红线和标签的贴合度 */
  }

  /* 国家范围 */
  /* 颜色变量（精准匹配原图配色） */
  :root {
      --red-primary: #d70018;
      /* 主红色 */
      --red-dark: #b70014;
      /* 深色红（渐变） */
      --gold: #ffd700;
      /* 金色 */
      --gold-dark: #e6c200;
      /* 深金色 */
      --white: #ffffff;
      /* 白色 */
      --text-gray: #333333;
      /* 文字灰色 */
  }

  /* 顶部按钮组 */
  .top-btns {
      display: flex;
      gap: 5px 15px;
      margin: 10px 0;
  }

  .top-btns img {
      width: 100%;
      height: 100px;
      border-radius: 5px;

  }

  .top-btn {
      flex: 1;

  }

  /* 榜样8横幅 */
  .banner-example {
      margin-top: 10px;
  }

  .banner-example img {
      width: 100%;
      height: 100px;
      border-radius: 5px;
  }



  /* 七一勋章标题栏 */
  .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 5px;
      margin: 10px 0;
  }

  .title-bar .title-bar-text {
      position: relative;
      color: #dc2124;
      font-size: 16px;
      font-weight: bold;
      padding-left: 15px;
  }

  .title-bar .title-bar-text::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3.5px;
      height: 17px;
      background-color: #e53935;
  }

  .title-bar .more {
      font-size: 14px;
      color: #5d5d5d;
      text-decoration: none;
  }

  /* 人物卡片容器 */
  .card-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 18px;
      margin: 0 5px;
      padding-bottom: 20px;
  }

  /* 人物卡片样式 */
  .card {
      background-color: red;
      border-radius: 6px;
      overflow: hidden;
  }

  .card .avatar {
      height: 180px;
  }

  .card .avatar img {
      width: 100%;
      height: 180px;
  }


  .card .name {
      font-size: 14px;
      font-weight: bold;
      color: var(--text-gray);
      margin: 5px 0;
  }

  .card .desc {
      font-size: 12px;
      color: #f6f6f6;
      padding: 0 10px 8px;
      line-height: 1.4;
      margin-top: 10px;
  }

  /* 邮政系统 */
  .banner {
      margin-top: 10px;

  }

  .banner img {
      width: 100%;
      height: 100px;
  }

  /* 核心修改：默认显示gjfw，隐藏yzxt */
  .gjfw {
      display: block;
      margin-top: 20px;
  }

  .yzxt {
      display: none;
      margin-top: 20px;
  }

  @media screen and (min-width: 750px) {
      .gjfw {
          /* display: flex; */
          max-width: 1200px;
          margin: 0 auto;
          flex-wrap: wrap;
      }

      .card-container,
      .title-bar {
          width: 100%;
      }

      .card-container {
          max-width: 1200px;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          margin: 0 auto;
      }

      .card .avatar {
          height: auto;
      }

      .card .avatar img {
          height: 100%;
      }

      .card .desc {
          font-size: 14px;
      }

      .title-bar{
        max-width: 1200px;
        margin: 20px auto;
      }

      .nav,
      .header,
      .footer{
        font-size: 16px;
      }
  }