.map {
    position: relative;
}

 

.map-box {
    /* 设置地图标记样式 */
}


.map-container {
    position: relative; /* 确保子元素可以相对于此元素定位 */
}

.legend {
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 放在底部 */
    left: 0; /* 放在左侧 */
}

.legend-item {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 10px; /* 为了美观，可以添加一些间距 */
}

    .legend-item span {
        display: flex;
        align-items: center;
    }

    .legend-item img {
        width: 12px; /* 设置图片宽度为32px */
        height: 20px; /* 设置图片高度为32px */
        margin-right: 10px; /* 在图片和文字之间添加一些间距 */
    }



.map-markers .region-list {
    position: absolute;
    /* 初始位置示例，您需要根据实际情况调整 */
    left: 50px; /* 修改为实际的位置 */
    top: 50px; /* 修改为实际的位置 */
}

    .map-markers .region-list .area-box .dot {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #ff0000; /* 标记点颜色 */
        border-radius: 50%;
        z-index: 2;
    }

    .map-markers .region-list .area-box .pulse {
        position: absolute;
        width: 100px; /* 调整为100px */
        height: 100px; /* 调整为100px */
        border: 4px solid #ff0000; /* 脉冲颜色，可根据需要调整边框粗细 */
        border-radius: 50%;
        animation: pulseAnimation 2s infinite;
        z-index: 1;
        top: -45px; /* 根据新的尺寸进行调整 */
        left: -45px; /* 根据新的尺寸进行调整 */
    }

@keyframes pulseAnimation {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 可以添加更多延时动画 */
.map-markers .region-list .area-box .delay-01 {
    animation-delay: 0s;
}

.map-markers .region-list .area-box .delay-02 {
    animation-delay: 1s;
}


.add-box {
}

    .add-box .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .add-box p{
        font-size: 16px; 
    }

        .add-box p span {
            margin-left:10px;
        }