/* CSS初始化 */
  body,
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  fieldset,
  legend,
  input,
  textarea,
  button,
  p,
  blockquote,
  th,
  td {
      margin: 0;
      padding: 0;
  }

  body {
      background: #f1f1f1;
      text-align: center;
      font-family: 'HarmonyOS-Regular';
  }

  li {
      list-style: none;
  }

  a {
      text-decoration: none;
  }

  img {
      border: none;
  }

  body {
      max-width: 100vw;
      overflow-x: hidden;
      /* 可选，以防止任何内部元素超出 */
  }

  .card {
      width: 14vw;
      height: 1.5vw;
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(16, 6, 159, 1);
      text-align: center;
      position: relative;
  }

  .card p {
      font-size: 0.54vw;
      font-weight: 500;
      color: rgba(16, 6, 159, 1);
      margin-top: 0.4vw;
  }

  .leaflet-popup-content {
      width: 14vw !important;
      /* height: 10.5vw !important; */
  }

  .custom-popup h3 {
      font-size: 0.7vw;
  }

  .custom-popup p {
      font-size: 0.6vw;
  }

  #map {
      height: calc(2200 / 1920 * 100vw);
      width: 100vw;
      /* 1920px 直接对应 100vw */
      z-index: 1;
      position: absolute;
      top: -28vw;
  }

  .leaflet-popup-content {
      padding: 0.8vw;
  }

  .leaflet-container a.leaflet-popup-close-button {
      right: 1.1vw;
      top: 0.8vw;
  }

  .leaflet-popup-close-button span {
      font-size: 1vw;
  }

  @media (max-width: 2200px) {
      #map {
          height: calc(3300 / 1920 * 100vw);
          width: 100vw;
          /* 1920px 直接对应 100vw */
          z-index: 1;
          position: absolute;
          top: -50vw;
      }
  }

  @media (max-width: 1100px) {
      #map {
          height: calc(3300 / 1920 * 100vw);
          width: 100vw;
          /* 1920px 直接对应 100vw */
          z-index: 1;
          position: absolute;
          top: -35vw;
      }
  }

  @media (max-width: 687px) {
      #map {
          height: calc(4400 / 1920 * 100vw);
          width: 100vw;
          /* 1920px 直接对应 100vw */
          z-index: 1;
          position: absolute;
          top: -45vw;
      }
  }

  @media (max-width: 506px) {
      #map {
          height: calc(5500 / 1920 * 100vw);
          width: 100vw;
          /* 1920px 直接对应 100vw */
          z-index: 1;
          position: absolute;
          top: -65vw;
      }
  }

  #bottom {
      position: absolute;
      top: 50vw;
      z-index: 1;
  }