.zoom_box { position: relative; }

.zoom_box .booth_map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

html, body { width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }

.zoom-wrapper { position: relative; display: flex; justify-content: center; height: 100%; margin-left: auto; margin-right: auto;}

.zoom-area { display: block; max-height: 100%; max-width: 842px; overflow: visible !important; }

.zoom-area img { display: block; margin: 0 auto; pointer-events: none; }

.zoom-control { position: fixed; bottom: 0; left: 0; width: 100%; background: #f5f5f5; text-align: center; height: 70px; line-height: 70px; }

.zoom-control > * { max-width: 90%; margin: 0 auto; width: 450px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 100%; }

.zoom-control > * > * { flex: 0 1 auto; vertical-align: middle; margin: 0 5px; }

button { color: #fff; background-color: transparent; border: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #020a0a; width: 1.25rem; height: 1.25rem; }

.material-icons { font-size: 2em; }

/**/
input[type=range]:focus { outline: none; }

@media screen and (-webkit-min-device-pixel-ratio: 0) { input[type=range] { -webkit-appearance: none; max-width: 345px; width: 100%; height: 2px; background: #dddddd; cursor: pointer; border-radius: 0; /* iOS */ transition: background 450ms ease-in; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #020a0a; border: none; border-radius: 100%; cursor: pointer; } }

@-moz-document url-prefix() { input[type=range] { -webkit-appearance: none; max-width: 345px; width: 100%; height: 2px; background: #020a0a; cursor: pointer; border-radius: 0; /* iOS */ }
  input[type=range]::-moz-range-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #020a0a; border: none; border-radius: 50px; cursor: pointer; } }

@media screen and (min-width: 0\0) { input[type=range]::-ms-track { width: 315px; height: 6px; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: transparent; /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 6px 0; /*remove default tick marks*/ color: transparent; }
  input[type=range]::-ms-fill-lower { background: #020a0a; border-radius: 50px; }
  input[type=range]::-ms-fill-upper { background: #020a0a; border-radius: 50px; }
  input[type=range]::-ms-thumb { border: none; height: 14px; width: 14px; border-radius: 50px; background: #020a0a; }
  input[type=range]:focus::-ms-fill-lower { background: #020a0a; }
  input[type=range]:focus::-ms-fill-upper { background: #020a0a; } }

@media all and (max-width: 800px) { .zoom-control { font-size: 1.625rem; }
  .zoom-control .zoom_btn { width: 2.30769em; height: 2.30769em; flex: 0 0 auto; }
  .zoom-control svg { max-width: 100%; }
  input[type=range]::-ms-thumb { border: none; height: 0.96154em; width: 0.96154em; border-radius: 100%; background: #020a0a; } }

.zoom-area { width: 100%; }

.zoom_box { margin-left: auto; margin-right: auto; }

.zoom_box img { width: 100%; max-width: 100%; }

.zoom_box .booth_box { position: relative; cursor: pointer; }

.zoom_box .booth_box:after {
    content: '';
    display: block;
    position: absolute;
    top: 39%;
    left: 39%;
    width: 30px;
    height: 30px;
    margin: -1em auto auto -1em;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    border-radius: 50%;
    border: 10px solid #000;
    opacity: 0;
    -webkit-animation: pulsate 3s ease-out infinite;
    animation: pulsate 3s ease-out infinite;
}

@-webkit-keyframes
    pulsate {  0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.8;
    }
        45% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0;
    }
}
@keyframes
    pulsate {  0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.8;
    }
        45% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0;
    }
}

.zoom_box .tooltip_box { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, calc(-100% - 0.625rem)); pointer-events: none; visibility: hidden; }

@media all and (min-width: 1024px) { .zoom_box .tooltip_box.on { visibility: visible; } }

.zoom_box .tooltip_box::after { content: attr(title); display: block; min-width: 100px; background-color: #fff; font-size: 1rem; padding: 1.5em; border-radius: 0.3125em; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.16); border: 1px solid #ddd; font-weight: bold; text-align: center; z-index: 1; }

.zoom_box .tooltip_box::before { content: ''; display: block; width: 0.625rem; height: 0.625rem; border: 1px solid #ddd; border-right: 0; border-top: 0; background-color: #fff; transform: rotate(-45deg); position: absolute; bottom: 0%; left: 50%; margin-bottom: -0.3125rem; margin-left: -0.3125rem; }

.zoom_box .booth_map > *:not(.booth_box) { pointer-events: none; }