/* 스크롤은 가능, 스크롤바만 숨김 */
 html,
 body {
     -ms-overflow-style: none;
     /* IE/Edge(구버전) */
     scrollbar-width: none;
     /* Firefox */
 }

 html::-webkit-scrollbar,
 body::-webkit-scrollbar {
     display: none;
     /* Chrome/Safari/Edge(WebKit) */
 }


 .progress-container {
     position: fixed;
     right: 16px;
     height: calc(var(--vh) * .2);
     top: 50%;
     width: 6px;
     /* 높이는 4px */
     background: rgba(124, 124, 124, 0.1);
     /* 배경색 투명하게 */
     z-index: 1000;
     /* 다른 요소들보다 위에 보이게 */
     transform: translateY(-50%);
     /* border-radius: 3px; */
     opacity: 0;
     transition: .3s opacity;
 }

 .progress-container.on {
     opacity: 1;
 }

 .progress-bar {
     /* border-radius: 3px; */
     position: absolute;
     top: 0;
     width: 6px;
     height: 20%;
     background: #fff;
     animation: lightBlur 2s infinite ease;
     /* transition: .3s all ease; */

 }

 @media screen and (max-width:768px) {
     .progress-container {
        display: none;
         right: 6px;
         width: 2px;
     }

     .progress-bar {
         width: 2px;
         /* border-radius: 1px; */
     }
 }

 @keyframes lightBlur {
     0% {
         filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
     }

     50% {
         filter: drop-shadow(0 0 0 rgba(255, 255, 255, .5));
     }

     100% {
         filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
     }
 }