.marker-layout-high {
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}

.marker-layout-alarm{
    img{
        width: 100%;
        height: 100%;
    }
}

@keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

.marker-cricle-layout-final {
    background: #2299ff !important;
}

.mark-begin-or-end {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mark-begin-or-end-car {
    width: 35px;
    height: 35px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}

.marker-layout-high-move {
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);

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

.marker-cricle-layout-policeman,
.marker-cricle-layout-car {
    width: 35px;
    height: 35px;
    font-size: 1rem;

    // border-radius: 30px;
    // background: #fff !important;
    img {
        width: 100%;
        height: 100%;
    }
}

.device-point {
    font-size: 0.5rem;
    white-space: nowrap;
    color: #fff;
    // font-weight: bold;
    // transform: scale(0.9);
    display: inline-block;
    padding: 2px 5px;
    transform: translateX(calc(18px - 50%));
}

.marker-cricle-layout-policeman .device-point {
    background: #908BE6;
}

.marker-cricle-layout-car .device-point {
    background: #54BEFF;
}

.marker-layout-direction {
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .marker-direction{
        height: 50px;
        width: 50px;
        position: absolute;
        border-radius:  0  100px 0 0;
    }
    .marker-cricle-layout{
        z-index: 999;
    }
}

.marker-direction-112901 {
    //正东朝向
    transform: translateX(50%) rotate(45deg);
}

.marker-direction-112902 {
    //正西朝向
    transform: translateX(-50%) rotate(-135deg);
}

.marker-direction-112903 {
    //正南朝向
    transform: translateY(50%) rotate(135deg);
}

.marker-direction-112904 {
    //正北朝向
    transform: translateY(-50%) rotate(-45deg);
}

.marker-direction-112905 {
    //东南朝向
    transform: rotate(90deg) translateY(-50%) translateX(50%);
}

.marker-direction-112906 {
    //东北朝向
    transform: translateY(-50%) translateX(50%);
}

.marker-direction-112907 {
    //西南朝向
    transform: rotate(-180deg) translateY(-50%) translateX(50%);
}

.marker-direction-112908 {
    //西北朝向
    transform: translateY(-50%) translateX(-50%) rotate(-90deg) ;
}