<style>
.plank {opacity: 0;transition: all 0.3s ease-in;} .active {opacity: 1;}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
    const section = document.querySelectorAll('#rec378801588, #rec378802012, #rec378802120, #rec378802240');
    const menu = document.querySelector('#rec378795496');
    const menuCard = document.querySelectorAll('.plank');
    const menuHeight = menu.clientHeight;
    
    window.addEventListener('orientationchange', function () {
        menuHeight = menu.clientHeight;
    }, false);
    
    window.addEventListener('scroll', function(e) {
        const pos = this.pageYOffset;
        section.forEach((item) => {
            const topPos = item.offsetTop - menuHeight - 5;
            const bottomPos = topPos + item.clientHeight;
            
            if (pos >= topPos && pos <= bottomPos) {
                menuCard.forEach((el) => el.classList.remove('active'));
                menu.querySelectorAll('.plank>a.tn-atom[href="#' + item.id + '"]').forEach((el) => el.parentNode.classList.add('active'))
            }
        })
    });
})
</script>