.page_navigation {
    position: fixed;
    top: 50%;
    right: 50px;
    z-index: 10;
    transform: translate(0, -50%);
  }
  .page_navigation span {
    display: block;
    margin: 30px 10px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    font-size: 0;
    text-decoration: none;
  }
  .page_navigation span.active {
    background: #fff;
  }
  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
  .section {
    position: relative;
    z-index: 1;
  }
  .section div {height: 300px;}
  #page01 {
    background: orange;
  }
  #page02 {
    background: pink;
  }
  #page03 {
    background: skyblue;
  }
  #page04 {
    background: grey;
  }

      const controller = new ScrollMagic.Controller({loglevel: 3});
      const section = document.querySelectorAll('.section');
      const ratio = []
      const elHeight = [];

      // 컨텐츠 높이값, 화면 비율 설정
      section.forEach( (el, index) => {
        const height = el.clientHeight;
        const num = Number((height/window.innerHeight).toFixed(2));
        elHeight.push(height);
        ratio.push(num);
      });

      // 최소값 결정
      let min = ratio.reduce( (prev, curr) => {
        return prev > curr ? curr: prev
      });
      
      section.forEach( (el, index) => {
        const id = el.getAttribute('id');
        new ScrollMagic.Scene({triggerElement: `#${id}`, duration: elHeight[index], triggerHook: 1-min, loglevel: 3})
          .setClassToggle(`.page_navigation span:nth-child(${index+1})`, "active")
          .addIndicators() // debug
          .addTo(controller);
      });


      window.addEventListener('resize', function() {
        if (window.innerWidth < 800) {
          controller.enabled(false);
        }
      });