/* =========================================================
   홍보영상 (company_video.php) — 접두사 .vd-
   PC 1행 2편 · 태블릿 이하 1행 1편
   ========================================================= */
.vd-empty{padding:80px 20px;text-align:center;color:var(--ink-50);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--mist)}

.vd-year{margin-bottom:56px}
.vd-year h2{
  display:flex;align-items:center;gap:4px;padding-bottom:14px;margin-bottom:26px;
  border-bottom:2px solid var(--ink);font-size:15px;font-weight:600;color:var(--ink-50);letter-spacing:-.02em;
}
.vd-year h2 span{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.04em}

.vd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 32px}

.vd-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0B1020;
  cursor:pointer;box-shadow:0 10px 30px rgba(11,16,32,.10)
}
.vd-frame img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease),opacity .3s}
.vd-frame:hover img{transform:scale(1.04);opacity:.85}
.vd-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-frame.on img,.vd-frame.on .vd-play{display:none}
.vd-frame.on{cursor:default}

.vd-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:52px;
  display:grid;place-items:center;transition:transform .25s var(--ease)
}
.vd-play svg{width:100%;height:100%}
.vd-play svg .bg{fill:#0B1020;opacity:.72;transition:fill .25s,opacity .25s}
.vd-play svg .ar{fill:#fff}
.vd-frame:hover .vd-play{transform:translate(-50%,-50%) scale(1.06)}
.vd-frame:hover .vd-play svg .bg{fill:#E00B16;opacity:1}

.vd-tit{
  margin:14px 0 0;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vd-act{display:flex;gap:8px}
.vd-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-70);
  transition:border-color .2s,color .2s,background .2s
}
.vd-btn svg{width:15px;height:15px}
.vd-btn:hover{border-color:var(--navy);color:var(--navy)}
.vd-btn.play{background:var(--navy);border-color:var(--navy);color:#fff}
.vd-btn.play:hover{background:var(--blue);border-color:var(--blue);color:#fff}

@media (max-width:1023px){
  .vd-grid{grid-template-columns:1fr;gap:32px}
  .vd-year{margin-bottom:44px}
}
@media (max-width:640px){
  .vd-year h2 span{font-size:22px}
  .vd-tit{font-size:15.5px;margin:12px 0 0}
  .vd-play{width:62px;height:44px}
}