[un-cloak] {
    display: none;
}

html {
    scroll-padding-top: 100px;
}

@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}

mark{
    display: inline-block;
    background-color: transparent;
}

@keyframes markToRight {
    0% {
        background-size: 0% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

.mark-to-right-animation.orange {
    background-image: linear-gradient(180deg, white 0%, white 30%, #FFEBAA 50.1%, #FFEBAA 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size 0.5s ease-in-out;
}



.animation-active.mark-to-right-animation.orange {
    animation: markToRight 1s ease-in-out forwards;
}


.notice-fade-overlay {
    background: linear-gradient(180deg, rgba(236, 236, 236, 0) 0%, #ECECEC 85%);
}

@media (min-width: 768px) {
    .notice-fade-overlay {
        background: linear-gradient(180deg, rgba(236, 236, 236, 0) 0%, #ECECEC 75.575%);
    }
}