.light {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    overflow: hidden;
    display: block;
    position: relative;
}

.light:after {
    content: "";
    display: block;
    position: absolute;
    left: -150%;
    top: 0;
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    animation: light 3s infinite ease-in-out;
}

@keyframes light {
    0% {
        left: -150%;
    }

    70% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.bounce {
    animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
    0% {
        transform: scale(1, 1) translate3d(0, 0, 0);
    }

    10% {
        transform: scale(1.05, .95) translate3d(0, 0, 0);
    }

    30% {
        transform: scale(.95, 1.05) translate3d(0, -8%, 0);
    }

    50% {
        transform: scale(1.02, .97) translate3d(0, 0, 0);
    }

    57% {
        transform: scale(1, 1) translate3d(0, -2%, 0);
    }

    64% {
        transform: scale(1, 1) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
    }
}

@keyframes move {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0px);
    }

}

/* 捲軸 【橫向】*/
.reelX--close {
    clip-path: inset(0 100% 0 0%);
    transition: clip-path 0.4s linear;
}

.reel--open {
    clip-path: inset(0 0);
}

@keyframes shake {
    0% {
        rotate: -5deg;
    }

    50% {
        rotate: 5deg;
    }

    100% {
        rotate: -5deg;
    }
}

@keyframes scale {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(0.9, 0.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes arrowUp {
    0% {
        transform: scale(1, 0);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes shake-slow {
    2% {
        transform: translate(6px, -2px) rotate(3.5deg);
    }

    4% {
        transform: translate(5px, 8px) rotate(-0.5deg);
    }

    6% {
        transform: translate(6px, -3px) rotate(-2.5deg);
    }

    8% {
        transform: translate(4px, -2px) rotate(1.5deg);
    }

    10% {
        transform: translate(-6px, 8px) rotate(-1.5deg);
    }

    12% {
        transform: translate(-5px, 5px) rotate(1.5deg);
    }

    14% {
        transform: translate(4px, 10px) rotate(3.5deg);
    }

    16% {
        transform: translate(0px, 4px) rotate(1.5deg);
    }

    18% {
        transform: translate(-1px, -6px) rotate(-0.5deg);
    }

    20% {
        transform: translate(6px, -9px) rotate(2.5deg);
    }

    22% {
        transform: translate(1px, -5px) rotate(-1.5deg);
    }

    24% {
        transform: translate(-9px, 6px) rotate(-0.5deg);
    }

    26% {
        transform: translate(8px, -2px) rotate(-1.5deg);
    }

    28% {
        transform: translate(2px, -3px) rotate(-2.5deg);
    }

    30% {
        transform: translate(9px, -7px) rotate(-0.5deg);
    }

    32% {
        transform: translate(8px, -6px) rotate(-2.5deg);
    }

    34% {
        transform: translate(-5px, 1px) rotate(3.5deg);
    }

    36% {
        transform: translate(0px, -5px) rotate(2.5deg);
    }

    38% {
        transform: translate(2px, 7px) rotate(-1.5deg);
    }

    40% {
        transform: translate(6px, 3px) rotate(-1.5deg);
    }

    42% {
        transform: translate(1px, -5px) rotate(-1.5deg);
    }

    44% {
        transform: translate(10px, -4px) rotate(-0.5deg);
    }

    46% {
        transform: translate(-2px, 2px) rotate(3.5deg);
    }

    48% {
        transform: translate(3px, 4px) rotate(-0.5deg);
    }

    50% {
        transform: translate(8px, 1px) rotate(-1.5deg);
    }

    52% {
        transform: translate(7px, 4px) rotate(-1.5deg);
    }

    54% {
        transform: translate(10px, 8px) rotate(-1.5deg);
    }

    56% {
        transform: translate(-3px, 0px) rotate(-0.5deg);
    }

    58% {
        transform: translate(0px, -1px) rotate(1.5deg);
    }

    60% {
        transform: translate(6px, 9px) rotate(-1.5deg);
    }

    62% {
        transform: translate(-9px, 8px) rotate(0.5deg);
    }

    64% {
        transform: translate(-6px, 10px) rotate(0.5deg);
    }

    66% {
        transform: translate(7px, 0px) rotate(0.5deg);
    }

    68% {
        transform: translate(3px, 8px) rotate(-0.5deg);
    }

    70% {
        transform: translate(-2px, -9px) rotate(1.5deg);
    }

    72% {
        transform: translate(-6px, 2px) rotate(1.5deg);
    }

    74% {
        transform: translate(-2px, 10px) rotate(-1.5deg);
    }

    76% {
        transform: translate(2px, 8px) rotate(2.5deg);
    }

    78% {
        transform: translate(6px, -2px) rotate(-0.5deg);
    }

    80% {
        transform: translate(6px, 8px) rotate(0.5deg);
    }

    82% {
        transform: translate(10px, 9px) rotate(3.5deg);
    }

    84% {
        transform: translate(-3px, -1px) rotate(3.5deg);
    }

    86% {
        transform: translate(1px, 8px) rotate(-2.5deg);
    }

    88% {
        transform: translate(-5px, -9px) rotate(2.5deg);
    }

    90% {
        transform: translate(2px, 8px) rotate(0.5deg);
    }

    92% {
        transform: translate(0px, -1px) rotate(1.5deg);
    }

    94% {
        transform: translate(-8px, -1px) rotate(0.5deg);
    }

    96% {
        transform: translate(-3px, 8px) rotate(-1.5deg);
    }

    98% {
        transform: translate(4px, 8px) rotate(0.5deg);
    }

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }
}