.mark-box {
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    p {
        height: 3vh;
        line-height: 3vh;
        text-align: center;
        font-size: 0.2rem;
        padding: 0.3vh 0.2rem;
        font-weight: bold;
        color: #FFF;
        margin: 0;
    }
    .line {
        height: 8vh;
        background: linear-gradient(180deg, #f83ea6 0%, rgba(248, 62, 166, 0) 100%);
    }
    .markerClass {
        width: 0.18rem;
        height: 0.09rem;
        position: relative;
        outline: none;
        box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 75%);
        border-radius: 50%;
        transform-origin: 0 0;
        display: block;
    }

    .animate-box {
        width: 0.72rem;
        height: 0.36rem;
        -webkit-border-radius: 100%;
        border-radius: 50%;
        margin-top: -0.2rem;
        animation: pulsate 3s ease-out;
        animation-iteration-count: infinite;
        animation-delay: 1.1s;
    }

    @keyframes pulsate {
        0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        50% {
            opacity: 1;
            filter: none;
        }
        100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
            filter: alpha(opacity=0);
        }
    }
}