body {
    margin: 0;
}

.building-box {
    position: relative;
}

.building-content {
    position: relative;
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
}

.building-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.building-img img {
    margin: auto;
    max-width: 100%;
    max-height: calc(100dvh - 120px);
}

.building-floors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.building-floors .floor {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: auto;
}

.building-floors .floor:nth-child(2n+1) {
    background: #f0ebe8;
}

.building-floors .floor.is-active {
    cursor: pointer;
    background: rgba(148, 40, 36, 0.9);
}

.building-floors .floor .floor-content {
    position: absolute;
    height: 100%;
    left: 0;
    color: #fff;
    font-weight: bold;
    white-space: pre-line;
    display: flex;
    align-items: center;
    line-height: 18px;
    opacity: 0;
    max-width: 160px;
}

.building-floors .floor .floor-content i {
    font-size: 14px;
}

.building-floors .floor.is-active .floor-content {
    opacity: 1;
}

.building-floors .floor-1 {
    bottom: 0;
    height: 13.2%;
}

.building-floors .floor-2 {
    bottom: 13.2%;
    height: 15%;
}

.building-floors .floor-3 {
    bottom: 28.2%;
    height: 11.6%;
}

.building-floors .floor-4 {
    bottom: 39.8%;
    height: 13.6%;
}

.building-floors .floor-5 {
    bottom: 53.4%;
    height: 11.7%;
}

.building-floors .floor-6 {
    bottom: 65.1%;
    height: 12.3%;
}

.building-floors .floor-7 {
    bottom: 77.4%;
    height: 12.8%;
}

.building-floors .floor-8 {
    bottom: 90.2%;
    height: 9.4%;
}

.building-blocks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.building-blocks .block {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    cursor: pointer;
}

.building-blocks .block:hover,
.building-blocks .block.is-active {
    background: rgba(148, 40, 36, 0.9);
}

.building-blocks .block-1 {
    left: 5.8%;
    bottom: 1.3%;
    width: 33%;
    height: 26.8%;
}

.building-blocks .block-2 {
    left: 67.1%;
    bottom: 1.3%;
    width: 27.2%;
    height: 39%;
}

.building-blocks .block-3 {
    left: 38.96%;
    bottom: 13%;
    width: 28.1%;
    height: 16%;
}

.building-blocks .block-4 {
    left: 38.96%;
    bottom: 29.1%;
    width: 28.1%;
    height: 11.6%;
}

.building-blocks .block-5 {
    left: 4.96%;
    bottom: 39.9%;
    width: 88.5%;
    height: 13.3%;
}

.building-blocks .block-6 {
    left: 30.2%;
    bottom: 53.8%;
    width: 63%;
    height: 11.2%;
}

.building-blocks .block-7 {
    left: 30.2%;
    bottom: 65.6%;
    width: 63%;
    height: 11.6%;
}

.building-blocks .block-8 {
    left: 38.5%;
    bottom: 77.4%;
    width: 54.2%;
    height: 12.8%;
}

.building-blocks .block-9 {
    left: 34%;
    bottom: 90.2%;
    width: 58.7%;
    height: 9.4%;
}

@media (max-width: 1980px) {
    .building-floors .floor .floor-content {
        font-size: 14px;
    }

    .building-floors .floor .floor-content i {
        font-size: 12px;
    }
}

@media (max-width: 1250px) {
    .building-floors .floor .floor-content {
        font-size: 10px;
        line-height: 12px;
        padding-right: 10px;
    }

    .building-floors .floor .floor-content i {
    }
}

@media (max-width: 992px) {
    .building-floors .floor .floor-content {
        font-size: 9px;
        line-height: 11px;
    }

    .building-floors .floor .floor-content i {
        font-size: 7px;
    }
}

@media (max-width: 520px) {
    .building-floors .floor .floor-content {
        font-size: 4.5px;
        line-height: 5.5px;
        padding-right: 4px;
    }

    .building-floors .floor .floor-content i {
        font-size: 4px;
    }
}