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

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    height: 100vh;
    overflow: hidden;
}

:root {
    --vh: 1vh;
}

.gate-wrapper {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: #dddddd;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    scroll-snap-type: x proximity;
    display: flex;
    align-items: center;
}

.gate {
    display: inline-block;
    height: 100%;
    display: flex;
    align-items: center;
}

.gate-plate {
    display: inline-flex;
    height: calc(var(--vh, 1vh) * 100);
    align-items: center; 
}

.gate-plate img {
    height: calc(var(--vh, 1vh) * 90);
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* ========= MQ ========= */
@media screen and (max-width: 599px) {
    .gate-plate img {
        height: calc(var(--vh, 1vh) * 90);
    }
}

@media screen and (max-width: 319px) {
    .gate-plate img {
        padding-left: 10px;
        height: calc(var(--vh, 1vh) * 75);
    }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .gate-plate img {
        padding-left: 12px;
        height: calc(var(--vh, 1vh) * 82);
    }
}

@media screen and (min-width: 480px) and (max-width: 599px) {
    .gate-plate img {
        padding-left: 15px;
        height: calc(var(--vh, 1vh) * 85);
    }
}

@media screen and (min-width: 600px) {
    .gate-plate img {
        padding-left: 18px;
        height: calc(var(--vh, 1vh) * 90);
    }
}

@media screen and (min-width: 600px) and (max-width: 767px) {
    .gate-plate img {
        height: calc(var(--vh, 1vh) * 85);
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .gate-plate img {
        height: calc(var(--vh, 1vh) * 86);
    }
}

@media screen and (min-width: 1024px) {  
    .gate-plate img {
        height: calc(var(--vh, 1vh) * 88);
    }
}

@media screen and (min-width: 1700px) and (max-width: 2099px) {
    .gate-plate img {
        padding-left: 27px;
    }
}

@media screen and (min-width: 2100px) and (max-width: 3500px) {
    .gate-plate img {
        padding-left: 37px;
    }
}

@media screen and (min-width: 3500px) {
    .gate-plate img {
        padding-left: 65px;
        height: calc(var(--vh, 1vh) * 88);
    }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .gate-plate img {
        height: calc(var(--vh, 1vh) * 85);
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}