body {
    padding: 0;
    margin: 0; 
}

#main {
    width: 100vw;
    height: 117vw;
    position: relative;
    display: block;
    margin: 0 auto;
    background-image: url(bg-still.png);
    background-size: 350vw 117vw;
    background-repeat: repeat-x;
    background-position-y: 0vw;
    background-position-x: -100vw;
    background-color: #eccaca;
}

/*#main {
    width: 100vw;
    height: 117vw;
    position: relative;
    display: block;
    margin: 0 auto;
    background-image: url(frame-02.png);
    background-size: 100vw 117vw;
    background-repeat: no-repeat;
    background-position-y: 0;
    background-position-x: 0;
    background-color: #eccaca;
}*/

#pic-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 117vw;
    z-index: 0;
}

#canvas {
    position: absolute;
    top: 11vw;
    left: 6vw;
    width: 88vw;
    height: 96vw;
    z-index: 10;
    overflow: hidden;
}


#banner {
    position: absolute;
    top: 6vw;
    left: 11vw;
    width: 78vw;
    z-index: 1000;
}

.horse {
    position: absolute;
    width: 28vw;
    height: auto;
    cursor: pointer;
    border-radius: 19vw 0 0 0;
    /*border: solid 1px;
    background-color: rgba(0,255,0,0.5);*/
}

#horse-01 {
    top: 32vw;
    left: -9vw;
    z-index: 11;
}

.move #horse-01 {
    animation-name: gallop1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#horse-02 {
    top: 44vw;
    left: 5vw;
    z-index: 13;
}

.move #horse-02 {
    animation-name: gallop2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#horse-03 {
    top: 53.5vw;
    left: 22vw;
    z-index: 15;
    border-radius: 16vw 0 0 0;
}

.move #horse-03 {
    animation-name: gallop1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#horse-04 {
    top: 63.5vw;
    left: 36.5vw;
    z-index: 17;
}

.move #horse-04 {
    animation-name: gallop2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#horse-05 {
    top: 69.5vw;
    left: 59vw;
    z-index: 19;
    border-radius: 13vw 0 0 0;
}

.move #horse-05 {
    animation-name: gallop1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

.wave {
    position: absolute;
    width: 107vw;
    height: auto;
}

#wave-01 {
    top: 52vw;
    left: -9vw;
    z-index: 12;
}

.move #wave-01 {
    animation-name: wave1;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#wave-02 {
    top: 60vw;
    left: -9vw;
    z-index: 14;
}

#wave-03 {
    top: 68vw;
    left: -9vw;
    z-index: 16;
}

.move #wave-03 {
    animation-name: wave1;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#wave-04 {
    top: 80vw;
    left: -9vw;
    z-index: 18;
}

#wave-05 {
    top: 86vw;
    left: -9vw;
    z-index: 20;
}

.move #wave-05 {
    animation-name: wave1;
    animation-duration: 6.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}

#cta-01 {
    position: absolute;
    width: 18vw;
    height: auto;
    top: 21vw;
    left: 4vw;
    z-index: 12;
}

@keyframes gallop1 {
    0%, 100% {
        transform: translateX(0) translateY(1.5vw);
    }

    12.5% {
        transform: translateX(-0.8vw) translateY(0.8vw);
    }

    25% {
        transform: translateX(-1.5vw) translateY(0vw);
    }

    37.5% {
        transform: translateX(-0.8vw) translateY(-0.8vw);
    }

    50% {
        transform: translateX(0) translateY(-1.5vw);
    }

    62.5% {
        transform: translateX(0.8vw) translateY(-0.8vw);
    }

    75% {
        transform: translateX(1.5vw) translateY(0vw);
    }

    87.5% {
        transform: translateX(0.8vw) translateY(0.8vw);
    }
}


@keyframes gallop2 {
    0%, 100% {
        transform: translateX(0) translateY(-1.5vw);
    }

    12.5% {
        transform: translateX(0.8vw) translateY(-0.8vw);
    }

    25% {
        transform: translateX(1.5vw) translateY(0vw);
    }

    37.5% {
        transform: translateX(0.8vw) translateY(0.8vw);
    }

    50% {
        transform: translateX(0) translateY(1.5vw);
    }

    62.5% {
        transform: translateX(-0.8vw) translateY(0.8vw);
    }

    75% {
        transform: translateX(-1.5vw) translateY(0vw);
    }

    87.5% {
        transform: translateX(-0.8vw) translateY(-0.8vw);
    }
}

@keyframes wave1 {
    0%, 100% {
        transform: translateY(0vw);
    }

    25% {
        transform: translateY(1.5vw);
    }

    50% {
        transform: translateY(0vw);
    }

    75% {
        transform: translateY(1.5vw);
    }
}

@keyframes wave2 {
    0%, 100% {
        transform: translateX(0) translateY(-1.5vw);
    }

    12.5% {
        transform: translateX(0.8vw) translateY(-0.8vw);
    }

    25% {
        transform: translateX(1.5vw) translateY(0vw);
    }

    37.5% {
        transform: translateX(0.8vw) translateY(0.8vw);
    }

    50% {
        transform: translateX(0) translateY(1.5vw);
    }

    62.5% {
        transform: translateX(-0.8vw) translateY(0.8vw);
    }

    75% {
        transform: translateX(-1.5vw) translateY(0vw);
    }

    87.5% {
        transform: translateX(-0.8vw) translateY(-0.8vw);
    }
}

.scroll {
    position: absolute;
    top: 14.5vw;
    left: 29vw;
    display: none;
    height: 48.5vw;
    width: 56vw;
    z-index: 101;
    justify-content: start;
}

    .scroll .text {
        width: 0vw;
        overflow: hidden;
    }

        .scroll .text img {
            width: 50vw;
        }

    .scroll.show {
        display: flex
    }

    .scroll .close {
        position: absolute;
        width: 3vw;
        height: 3vw;
        background-color: transparent;
        /* background-color: rgba(0, 255, 0, .5); */
        top: 5vw;
        right: 0;
        padding: 0;
        line-height: 0;
        border: none;
        display: none;
    }


        .scroll .close::after {
            content: ' \2573';
            font-size: 2vw;
            font-weight: bold;
        }

    .scroll a {
        position: absolute;
        z-index: 102;
        height: 1.5vw; 
        text-decoration:none; 
    }

#scroll-01 .link01 {
    bottom: 11vw;
    right: 5vw;
    width: 14vw;
}

#scroll-01 .link02 {
    bottom: 7.5vw;
    right: 6.5vw;
    width: 8vw;
}

#scroll-01 .link03 {
    bottom: 5.5vw;
    right: 40.5vw;
    width: 7vw;
}

#scroll-01 .link04 {
    bottom: 5.5vw;
    right: 9.5vw;
    width: 16.5vw;
}
#scroll-02 .link01 {
    bottom: 15.5vw;
    right: 19.5vw;
    width: 32vw;
}

#scroll-02 .link02 {
    bottom: 15.5vw;
    right: 5.5vw;
    width: 13.5vw;
}

#scroll-02 .link03 {
    bottom: 14vw;
    right: 23.5vw;
    width: 10vw;
}

#scroll-02 .link04 {
    bottom: 6.5vw;
    right: 14.5vw;
    width: 20.5vw;
}
#scroll-03 .link01 {
    bottom: 7.5vw;
    right: 13vw;
    width: 15vw;
}
#scroll-04 .link01 {
    bottom: 24.5vw;
    right: 14.5vw;
    width: 12vw;
}

#scroll-04 .link02 {
    bottom: 9vw;
    right: 31vw;
    width: 15vw;
}
#scroll-05 .link01 {
    bottom: 15.5vw;
    right: 11.5vw;
    width: 14.5vw;
}
#hotspot{position:fixed;
         top:0;
         left:0;
         right:0;
         bottom:0;
         background-color:rgba(0,0,0,.5);
         z-index:99;
}
.move #hotspot {
    display: none;
}