/* 메인 '다양한 브랜드가 데스커를 사용하고 있습니다' + 브랜드 14칸 모션 — .bnr3 에 class "dkm dkm-brands" 추가. 그 밖 HTML 그대로.
   아래 납품 사진 슬라이더(.office_slider)는 건드리지 않는다. */
.dkm-brands { position: relative; isolation: isolate; }
.dkm-brands > h3, .dkm-brands > .brand_list, .dkm-brands > .office_slider { position: relative; z-index: 2; }
.dkm-brands .dkm-bgc { z-index: 0; }
.dkm-brands .dkm-fxc { z-index: 3; }
.dkm-brands .dkm-glow { position: absolute; left: 50%; width: 1400px; height: 700px; margin-left: -700px; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 180, 64, .10), rgba(0, 180, 64, .03) 45%, transparent 70%); }
/* 브랜드 칸: 3D 로 뒤집혀 들어옴(사이트의 transition 은 끔 — 매 프레임 계산) */
.dkm-brands .brand_list { perspective: 1100px; position: relative; }
.dkm-brands .brand_list li { position: relative; transition: none; will-change: transform, opacity; transform-origin: 50% 0; border-radius: 2px; }
.dkm-brands .brand_list li img { position: relative; z-index: 1; will-change: filter; }
.dkm-brands .brand_list li .dkm-run { z-index: 3; border-radius: 2px; }
.dkm-brands .brand_list li .dkm-lit { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: 2px;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(255, 255, 255, 1), rgba(214, 248, 226, 1) 70%, rgba(190, 240, 208, 1)); box-shadow: 0 0 0 1px rgba(0, 180, 64, .45), 0 10px 28px -8px rgba(0, 180, 64, .45); }
.dkm-brands .dkm-beam { position: absolute; top: -20%; bottom: -20%; width: 260px; margin-left: -130px; left: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(205, 245, 220, .9) 50%, rgba(255, 255, 255, 0)); transform: skewX(-18deg); }
@media only screen and (max-width: 900px) { .dkm-brands .dkm-beam { width: 140px; margin-left: -70px; }
  .dept1 .bnr3.dkm-brands { padding-left: 16px; padding-right: 16px; } /* 폰 글자 좌우 16px 규칙(원래 8px) */ }
/* JS 준비 전 깜빡임 방지 */
html.dkm-js .dkm-brands > h3, html.dkm-js .dkm-brands .brand_list li { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.dkm-js .dkm-brands > h3, html.dkm-js .dkm-brands .brand_list li { opacity: 1; }
  .dkm-brands .dkm-beam, .dkm-brands .dkm-glow { display: none; }
}