.overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
}

.overlay .btn-close {
    all: unset;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 80px;
    height: 80px;
    background-image: image-set(url(../images/btn_close_small.png) 1x, url(../images/btn_close_small@2x.png) 2x);
}

.guide-overlay .presenter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    height: 50%;
    /* width: 1273px;
    height: 551px; */
    transform: translate(-50%, -50%);
    background-image: image-set(url(../images/guide.png) 1x, url(../images/guide@2x.png) 2x);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.map-overlay .presenter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 60%;
    transform: translate(-50%, -50%);
    background-image: image-set(url(../images/map.png) 1x, url(../images/map@2x.png) 2x);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.welcome-overlay .presenter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 940px;
    height: 605px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.welcome-overlay.welcome-0 .presenter { background-image: image-set(url(../images/welcome_0.png) 1x, url(../images/welcome_0@2x.png) 2x); }
.welcome-overlay.welcome-1 .presenter { background-image: image-set(url(../images/welcome_1.png) 1x, url(../images/welcome_1@2x.png) 2x); }
.welcome-overlay.welcome-2 .presenter { background-image: image-set(url(../images/welcome_2.png) 1x, url(../images/welcome_2@2x.png) 2x); }
.welcome-overlay.welcome-3 .presenter { background-image: image-set(url(../images/welcome_3.png) 1x, url(../images/welcome_3@2x.png) 2x); }
.welcome-overlay.welcome-4 .presenter { background-image: image-set(url(../images/welcome_4.png) 1x, url(../images/welcome_4@2x.png) 2x); }
.welcome-overlay.welcome-5 .presenter { background-image: image-set(url(../images/welcome_5.png) 1x, url(../images/welcome_5@2x.png) 2x); }

.welcome-overlay .presenter .btn-close {
    all: unset;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 30px;
    width: 109px;
    height: 109px;
    transform: translate(50%, -50%);
    background-image: image-set(url(../images/btn_close.png) 1x, url(../images/btn_close@2x.png) 2x);
}

@media only screen and (max-width: 768px),
only screen and (max-height: 768px) {
    .guide-overlay .presenter {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 75%;
        height: 80%;
        /* width: 1273px;
        height: 551px; */
        transform: translate(-50%, -50%);
        /* background-image: image-set(url(../images/m/guide.png) 1x, url(../images/m/guide@2x.png) 2x); */
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    
    .overlay .btn-close {
        right: 11px;
        width: 60px;
        height: 60px;
        background-size: contain;
    }

    .welcome-overlay .presenter {
        width: 330px;
        height: 245px;   
    }

    .welcome-overlay .presenter .btn-close {
        right: 11px;
        width: 60px;
        height: 60px;
        background-size: contain;
    }
}

@media only screen and (max-width: 768px) and (orientation: landscape),
only screen and (max-height: 768px) and (orientation: landscape) {
    .welcome-overlay .presenter {
        width: 404px;
        height: 300px;
    }
}