body {
    overflow: hidden;
}

#index {
    min-height: 900px;
    position: relative;
    animation: show 2s .8s forwards;
    opacity: 0;
    height: 100vh;
    width: 100%;
    margin-top: -56px;
    background: black;
    overflow: hidden;
}



#index .background {
    overflow: hidden;
    top: 56px;
    right: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    will-change: transform;
}

#index .background .scrolling-image {
    background: url("../img/index/rolling-line.jpg") repeat-x;
    width: 100%;
    height: 100%;
    animation: slide 180s linear infinite;
    position: relative;
    will-change: transform;
    transform: rotateZ(360deg);
}

#index .body {
    position: relative;
    height: 100vh;
    width: 51.15vh;
    background: url(../img/index/logo2.png?v=1) no-repeat;
    left: 60%;
    background-size: auto 100%;
}

#index .body > .reg-button {
    background: url("../img/index/reg-button.png?v=1") 0 -1px no-repeat;
    position: absolute;
    top: 66vh;
    background-size: 100%;
    left: 7vh;
    right: 7vh;
    height: 8.8vh;
}

#index .body > .reg-button:hover:not(.disabled) {
    background-position: 0 -8.95vh;
}

#index .body > .reg-button:active:not(.disabled) {
    background-position: 0 -17.6vh;
}


#index .body > .reg-button.disabled {
    background: url("../img/index/reg-button-disabled.png") no-repeat;
}

#index .body .shield .reg-button.disabled {
    background: url("../img/index/reg-button-disabled.png") no-repeat;
}

#index .body .shield .reg-button:hover:not(.disabled) {
    background-position: 0 -89px;
}

#index .body .shield .reg-button:active:not(.disabled) {
    background-position: 0 -177px;
}

#index .body .shield .video-head {
    position: absolute;
    left: 218px;
    top: 103px;
}


#index .body .shield .video-body {
    position: absolute;
    top: 226px;
    left: 136px;
}

.new-year #index .body .shield .video-body {
    left: 135px;
}

#index .background > video {
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    min-height: 100%;
    min-width: 100%;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slide {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -5760px 0;
    }
}

body.fade-out {
    opacity: 0;
    transition: opacity .3s ease;
}

@media (hover: hover) {
    #index .body > .reg-button:hover:not(.disabled) {
        background-position: 0 -8.95vh;
    }
}

@media (hover: none) and (pointer: coarse) {
    body {
        overflow: auto;
        background: #192934;
    }

    #index {
        height: auto;
        min-height: 600px;
        margin-top: 0;
    }

    @media (orientation: portrait) {
        #index {
            min-height: calc(100dvh - 56px);
        }
    }

    #index .background {
        top: 0;
    }

    #index .background > video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: cover;
        transform: none;
    }

    #index .body {
        position: absolute;
        top: 0;
        left: 16px;
        right: 16px;
        width: auto;
        height: auto;
        max-height: 100%;
        aspect-ratio: 419 / 819;
        background-position: center top;
        background-size: 100% 100%;
        mask-image: linear-gradient(to bottom, #000 0, #000 76%, transparent 99%);
    }

    #index .body > .reg-button {
        top: 66%;
        left: 13.7%;
        right: 13.7%;
        height: 8.8%;
        background-size: 100%;
        background-position: 0 -1px;
    }
}