.donstu-castle {
    height: calc(100% - 68px);
    /* padding: 50px auto; */
    /* background-color: red; */
    position: relative;
}

.donstu-castle>svg {
    height: calc(100vh - 100px);
    max-width: calc(100vw - 20px);
    margin: 0 auto;
    padding: 20px 0;
    display: block;
}

.donstu-castle>svg polygon {
    fill: transparent;
}

.donstu-castle>svg polygon:hover {
    fill: rgba(255, 0, 0, 0.3);
    filter: blur(15px);
}

.donstu-castle-tower {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 33%;
    height: calc(100% - 70px);
    bottom: 50px;
}

.dct-1 {
    background-image: url('/static/img/auth/donstu/tower_left.png');

    left: 0;
    z-index: 1;
}

.dct-2 {
    background-image: url('/static/img/auth/donstu/tower_top.png');

    left: calc(50% - 16.5%);
    z-index: 2;
}

.dct-3 {
    background-image: url('/static/img/auth/donstu/tower_down.png');

    left: calc(50% - 16.5%);
    z-index: 3;
}

.dct-4 {
    background-image: url('/static/img/auth/donstu/tower_right.png');

    right: 1%;
    z-index: 1;
}

@media (max-width: 720px) {
    .donstu-castle-tower {
        width: 50%;
    }

    .dct-2 {
        left: 25%;
    }

    .dct-3 {
        left: 25%;
    }
}