.positions .position_items {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
}
.positions .position_items .position_item {
    width: 20%;
    box-sizing: border-box;
    text-align: center;
    margin: 4px 0;
}
.positions .position_items .position_item.active {
    color: red;
}
.positions .image_mark {
    position: relative;
}
.positions .image_mark .image {
    width: 100%;
}
.positions .image_mark .mark {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: red;
    font-size: 12px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.positions .image_mark .mark.left {
    top: 20%;
}
.positions .image_mark .mark.right {
    bottom: 20%;
}
.positions .image_mark .mark.front {
    right: 15%;
}
.positions .image_mark .mark.mid {
    right: 50%;
    transform: translate(50%,0);
}
.positions .image_mark .mark.tail {
    left: 14%;
}
.positions .image_mark .mark.head {
    top: 50%;
    transform: translate(0,-50%);
    right: 6%;
}
.positions .image_mark .mark.rear {
    top: 50%;
    transform: translate(0,-50%);
    left: 7%;
}
.positions .image_mark .mark.top {
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
}
.positions .image_mark .mark.inside {
    right: 50%;
    bottom: 8px;
    transform: translate(50%,0);
}
.positions .image_mark .mark.bottom {
    right: 70%;
    bottom: 8px;
    transform: translate(50%,0);
}
.positions .image_mark .mark.other {
    right: 30%;
    bottom: 8px;
    transform: translate(50%,0);
}