スクロールダウンインジケータ

<div class="sd-wrap">
          <span class="sd-label">SCROLL</span>
          <div class="sd-mouse"><span class="sd-dot"></span></div>
          <div class="sd-arrows">
            <span class="sd-ar"></span>
            <span class="sd-ar"></span>
            <span class="sd-ar"></span>
          </div>
        </div>

.prev.d11-01-08{background:linear-gradient(160deg,#2b3245,#3a4666)}
        .d11-01-08 .sd-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d11-01-08 .sd-label{font-size:10px;letter-spacing:4px;color:rgba(255,255,255,.75);font-weight:600}
        .d11-01-08 .sd-mouse{width:26px;height:44px;border:2px solid rgba(255,255,255,.85);border-radius:14px;display:flex;justify-content:center;padding-top:8px}
        .d11-01-08 .sd-dot{width:4px;height:8px;background:#fff;border-radius:3px;animation:d098drop 1.8s ease-in-out infinite}
        @keyframes d098drop{
          0%{transform:translateY(0);opacity:0}
          25%{opacity:1}
          70%{transform:translateY(16px);opacity:1}
          100%{transform:translateY(20px);opacity:0}
        }
        .d11-01-08 .sd-arrows{display:flex;flex-direction:column;align-items:center;gap:3px}
        .d11-01-08 .sd-ar{width:12px;height:12px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);opacity:.2;animation:d098blink 1.8s ease-in-out infinite}
        .d11-01-08 .sd-ar:nth-child(2){animation-delay:.25s}
        .d11-01-08 .sd-ar:nth-child(3){animation-delay:.5s}
        @keyframes d098blink{
          0%,100%{opacity:.2}
          40%{opacity:1}
        }