.card-layout {
    width: 100%;
    height: 68vh !important;
}

@media screen and (height: 1080px) {
    .card-layout {
        height: 72.5vh !important;
    }
}

.main-layout {
    width: 100%;
    height: 100%;
    position: relative;
}

.room-1{
    position: absolute;
    right: 3%;
    top: 15rem;
    width: 38%;
    content: url('../tools/room-booth-1.svg');
}

.room-2{
    position: absolute;
    top: 0.5rem;
    width: 100%;
    content: url('../tools/room-booth-2.svg');
}

.main-label{
    position: absolute;
    top: 0.5rem;
    width: 100%;
    height: 38.5rem;
}

@media screen and (height: 1080px) {
    .room-1{
        top: 19.5rem;
    }

    .room-2{
        top: 5rem;
    }

    .room-3{
        top: 21rem;
    }

    .main-label{
        top: 5rem;
    }
}

.gird-label{
    position: relative;
    width: 100%;
    height: 100%;
}

.label-grid{
    position: absolute;
    background: #B7B7B7;
    border: 1px solid #000000;
    text-align: center;
    padding: 0.2rem;
    color: #000000;
}

.label-grid:nth-child(1){
    top: 9rem;
    left: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(2){
    top: 9rem;
    left: 11.6rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(3){
    top: 9rem;
    left: 19.5rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(4){
    top: 9rem;
    left: 27.8rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(5){
    top: 9rem;
    left: 36.4rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(6){
    top: 9rem;
    left: 45.3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(7){
    top: 15.5rem;
    left: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(8){
    top: 15.5rem;
    left: 11.6rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(9){
    top: 15.5rem;
    left: 19.5rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(10){
    top: 15.5rem;
    left: 27.8rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(11){
    top: 15.5rem;
    left: 36.4rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(12){
    top: 15.5rem;
    left: 45.3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(13){
    top: 1.5rem;
    right: 24rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(14){
    top: 9rem;
    right: 24rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(15){
    top: 1.5rem;
    right: 13rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(16){
    top: 7rem;
    right: 10rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(17){
    top: 15.5rem;
    right: 12rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(18){
    top: 16.7rem;
    right: 0rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(19){
    top: 32rem;
    right: 26rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(20){
    top: 28.5rem;
    right: 12rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(21){
    top: 27.5rem;
    right: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-water-tank{
    position: absolute;
    display: flex;
    align-items: end;
}

.card-air{
    width: 100%;
    height: 50%;
    background: #7BCDFF;
}

.label-water-tank:nth-child(1){
    width: 6.8rem;
    height: 5rem;
    right: 4.2rem;
    top: 11.5rem;
}

.label-water-tank[data-status=st0]:nth-child(1) .card-air{
    height: 1.5rem;
}

.label-water-tank[data-status=st1]:nth-child(1) .card-air{
    height: 100%;
}

.label-water-tank:nth-child(2){
    width: 22.1rem;
    height: 5rem;
    right: 3rem;
    top: 33.2rem;
}

.label-water-tank[data-status=st0]:nth-child(2) .card-air{
    height: 1.5rem;
}

.label-water-tank[data-status=st1]:nth-child(2) .card-air{
    height: 100%;
}

.buble{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
    padding: 0 0.2rem;
    overflow: hidden;
    transform: rotate(180deg);
}

.buble span{
    position: relative;
    bottom: 10px;
    width: 2rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #b3def8;
    margin: 0 2px;
    animation: buble 1s linear infinite;
    animation-duration: calc(20s / var(--i));
    transform-origin: bottom;
}

@keyframes buble{
    0%{
        transform: translateY(0) scale(1);
    }
    70%{
        transform: translateY(6rem) scale(1);
    }
    100%{
        transform: translateY(6rem) scale(0);
    }
}