html, body {
    padding: 0;
    margin: 0;
}

body {
    background-color: #fff;
    height: 792px;
    width: 612px;
}

.swiper {
    height: 100%;
}

.swiper-slide {
    position: relative;
}

.slide-bg {
    height: 100%;
}

.btn {
    position: absolute;
    aspect-ratio: 1;
    border: none;
    /* border: 1px solid black; */
    background-color: transparent;
}

.next-slide {
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 40px;
}

.prev-slide {
    top: 49%;
    transform: translateY(-50%);
    left: 5px;
    height: 40px;
}

.show-popup {
    width: 35px;
    background-image: url(../images/popup-icon.png);
    background-size: contain;
    background-position: center;
    animation: pulse 1s linear infinite forwards;
}

.show-popup[data-popup="popup-1"] {
    top: 142px;
    right: 110px;
}

.show-popup[data-popup="popup-2"] {
    top: 270px;
    right: 74px;
}

.show-popup[data-popup="popup-3"] {
    top: 141px;
    right: 102px;
}

.show-popup[data-popup="popup-4"] {
    top: 314px;
    right: 51px;
} 

.close-popup {
    top: 47px;
    right: 40px;
    width: 30px;
}

.popup-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 999;
}

.popup-container .popup {
    width: auto;
    height: 100%;
    position: relative;
    background-color: #fff;

}

.popup-container .popup > img {
    height: 100%;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}