body {
    padding: 0;
    margin: 0;
}

#main {
    width: 100vw;
    height: 214.23vw;
    background: url(bg.png);
    background-size: 100%;
    background-position: top left;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    margin: 0 auto;
}

    #main img {
        position: absolute;
        opacity: 1;
        max-width: 100%;
    }

#tree-back {
    position: absolute;
    top: 9.5%;
    left: 23.5%;
    width: 51.5%;
    z-index: 10;
    cursor: pointer;
}

#tree-front {
    z-index: 30;
    width: 26.5%;
    top: 20.5%;
    left: 35%;
    cursor: pointer;
}

.coin {
    width: 9.5%;
}

#coin-01 {
    top: 26%;
    left: 27%;
    z-index: 5;
}

#coin-02 {
    top: 25%;
    left: 35%;
    z-index: 20;
}

#coin-03 {
    top: 26.5%;
    left: 52.5%;
    z-index: 20;
}

#coin-04 {
    top: 26.5%;
    left: 64%;
}


@keyframes shake3 {
    0%, 100% {
        transform: translateX(0);
    }

    5%, 15%, 25%, 35%, 45%, 55%,65%,75%,85%,95% {
        transform: translateX(-4px);
    }

    10%, 20%, 30%, 40%,50%,60%,70%,80%,90% {
        transform: translateX(4px);
    }
}

.shake3 {
    animation: shake3 1.5s cubic-bezier(.36,.07,.19,.97) both;
}

.coin.ready {
    cursor: pointer;
}

#scroll-adventure,
#scroll-good-fortune,
#scroll-longevity,
#scroll-well-prepared {
    position: absolute;
    justify-content: center;
    width: 100%;
    top: 25.3%;
    z-index: 30;
    opacity: 0; 
    display: none;
}

#scroll-adventure {
    height: 18%;
}

#scroll-good-fortune {
    height: 16.1%;
}

#scroll-longevity {
    height: 17.2%;
}

#scroll-well-prepared {
    height: 15.35%;
}

    #scroll-adventure.open,
    #scroll-good-fortune.open,
    #scroll-longevity.open,
    #scroll-well-prepared.open {
        opacity: 1;
        display: flex;
    }

#scroll-left-adventure,
#scroll-left-good-fortune,
#scroll-left-longevity,
#scroll-left-well-prepared {
    position: relative;
    display: block;
    width: 3.5%;
    z-index: 32;
}

#scroll-right-adventure,
#scroll-right-good-fortune,
#scroll-right-longevity,
#scroll-right-well-prepared {
    position: relative;
    display: block;
    width: 3.5%;
    z-index: 32;
}

#scroll-center-adventure,
#scroll-center-good-fortune,
#scroll-center-longevity,
#scroll-center-well-prepared {
    position: relative;
    width: 2%;
    overflow: hidden;
    background-size: contain;
    z-index: 31;
    display: block;
    background-repeat: repeat-x;
}

#scroll-center-adventure {
    padding: 7vh 0 0 0;
    background-image: url(scroll-center-adventure.png);
}

#scroll-center-good-fortune {
    padding: 6vh 0 0 0;
    background-image: url(scroll-center-good-fortune.png);
}

#scroll-center-longevity {
    padding: 7vh 0 0 0;
    background-image: url(scroll-center-longevity.png);
}

#scroll-center-well-prepared {
    padding: 6vh 0 0 0;
    background-image: url(scroll-center-well-prepared.png);
}

    #scroll-center-adventure .text,
    #scroll-center-good-fortune .text,
    #scroll-center-longevity .text,
    #scroll-center-well-prepared .text {
        width: 60vw;
        max-width: unset;
        display: block;
        margin: 0 auto;
        position: relative;
    }

/*.open #scroll-center-adventure,
.open #scroll-center-good-fortune,
.open #scroll-center-longevity,
.open #scroll-center-well-prepared {
    width: 70%;
}*/

.scroll-close {
    top: 0vw;
    right: 0;
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    display:none;
}