.container {
  height: 100%;
  background: rgba(57, 122, 183, 0.2);
  // border-radius: 20px;
  width: 100%;

  .mapWrapper {
    position: relative;
    //   width: 1066px;
    //   height: 723px;
    height: 100%;
    width: 100%;

    .header {
      width: 134px;
      height: 48px;
      background: rgb(30, 107, 180);
      border-radius: 20px 0px 20px 0px;
      align-items: center;

      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;

      .title {
        margin: 10px 20px;
        color: #cbedff;
        font-family: 'DingTalk JinBuTi';
        font-size: 22px;
        font-weight: 400;
        line-height: 26px;
      }
    }

    .legend {
      width: 208px;
      height: 196px;
      background: rgba(12, 60, 112, 0.7);
      border-radius: 20px;

      position: absolute;
      bottom: 19px;
      left: 20px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 19px 22px;

      .legendTitle {
        color: rgb(188, 206, 233);
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .legendItem {
        display: flex;
        align-items: center;
        gap: 8px;

        img {
          width: 20px;
          height: 20px;
        }

        span {
          color: rgb(255, 255, 255);
          font-size: 16px;
          font-weight: 400;
          line-height: 21px;
        }

        &:nth-child(3) {
          padding-left: 4px;
        }
        &:nth-child(4) {
          padding-left: 4px;
        }
      }
    }
  }
}

.point {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
