:root {
    --man-map-width: min(100vw, 1200px);
    --man-map-height: max(22vw + 324px, 350px);
    --man-map-box-width: calc(2vw + 130px);
    --man-map-box-height: calc(var(--man-map-box-width) / 1.2);
    --man-map-box-inner-height: 80px;
    --man-map-box-text-size: calc(0.4vw + 10px);
}

.page-man-map-container {
    position: relative;
    width: 100%;
    justify-content: center;
}
.page-man-map {
    position: absolute;
    display: block;
    width: var(--man-map-width);
    height: var(--man-map-height);
    left: calc((100vw - var(--man-map-width)) / 2);

    background-color: rgb(240, 240, 240);

    z-index: 1;
}

.page-man-map-box {
    position: absolute;

    left: calc((100vw - var(--man-map-width)) / 2);
    top: calc(var(--man-map-height) - var(--man-map-box-height));
    width: var(--man-map-box-width);
    height: var(--man-map-box-height);
    background-color: rgba(0, 0, 0, 0.5);

    z-index: 2;
}
.page-man-map-box-inner {
    margin-top: calc((var(--man-map-box-height) - var(--man-map-box-inner-height)) / 2);
    width: var(--man-map-box-inner-width);
    height: var(--man-map-box-inner-height);
}
.page-man-map-box-pin-container {
    height: calc(var(--man-map-box-inner-height) / 2);
}
.page-man-map-box-pin {
    float: left;
    margin-left: 5px;
    margin-top: calc(25% / 8 - 18px);
    height: 75%;
}
.page-man-map-box-text {
    position: relative;
    float: left;
    height: 100%;

    top: calc(50% - 18px);
    transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);

    margin-left: 5px;
    color: white;
    font-family: "font-body";
    font-size: var(--man-map-box-text-size);
}

.page-man-map-spacer {
    height: calc(22vw + 324px);
}