/* Biz-deskers 혜택 '많이 구매할수록 더 커지는 할인 혜택' 막대 7단 모션 — .benefit3 에 class "dkm dkm-rate" 추가. 그 밖 HTML 그대로.
   원래 jQuery(스크롤 시 width 늘림)는 이 섹션에서 빼고 이 모듈이 그린다. */
.benefit3.dkm-rate { position: relative; isolation: isolate; overflow: hidden; }
.dkm-rate > .cont { position: relative; z-index: 2; }
.dkm-rate .dkm-bgc { z-index: 0; }
.dkm-rate .dkm-fxc { z-index: 3; }
.dkm-rate .dkm-glow { position: absolute; width: 1100px; height: 800px; margin: -400px 0 0 -550px; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 180, 64, .12), rgba(0, 180, 64, .04) 45%, transparent 70%); }
/* 막대: 폭은 매 프레임 계산(사이트 transition 끔), 끝의 % 글자는 굴러가는 숫자로 */
.dkm-rate .bar { transition: none; transform-origin: 0 50%; will-change: width; }
.dkm-rate .bar::after { content: none; }
.dkm-rate .dkm-pct { position: absolute; top: 50%; right: 3.333%; transform: translateY(-50%); font-size: 24px; font-family: 'GmarketSansBold'; color: #04220f; z-index: 2; white-space: nowrap; line-height: 1.25; }
.dkm-rate .chart_box li:nth-child(7) .dkm-pct { color: #fff; }
.dkm-rate .dkm-bsh { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%) no-repeat; background-size: 250% 100%; }
.dkm-rate .chart_box li:nth-child(7) .bar .dkm-run { z-index: 3; padding: 2px; }
.dkm-rate .label { will-change: transform, opacity; }
.dkm-rate .dkm-num { display: inline-block; }
@media (max-width: 900px) { .dkm-rate .dkm-pct { font-size: 16px; } .dkm-rate > .cont { padding-left: 16px; padding-right: 16px; } /* 폰 글자 좌우 16px(원래 15px) */ }
/* JS 준비 전 깜빡임 방지 */
html.dkm-js .dkm-rate :is(dl.txt_type1 dt, dl.txt_type1 dd, .label) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.dkm-js .dkm-rate :is(dl.txt_type1 dt, dl.txt_type1 dd, .label) { opacity: 1; }
  .dkm-rate .dkm-glow { display: none; }
}