/* 그림이 배너 전체에 깔리고 글자는 그 위에 올라간다 */
section.hero-bg{position:relative;isolation:isolate;overflow:hidden}
/* 홈 히어로 동영상(js/hero-video.js) — 그림과 같은 위치·크기로 겹치고 준비되면 서서히 나타난다 */
.hero-video{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .8s}
.hero-video.on{opacity:1}
section.hero-bg>.absolute.inset-0{display:none}
section.hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.5) 38%,rgba(255,255,255,0) 60%)}
section.hero-bg>.max-w-\[1104px\]{position:relative;z-index:1}
@media (min-width:1280px){
  section.hero-bg .max-w-2xl{max-width:520px}
  section.hero-bg h2{white-space:nowrap}
}
@media (max-width:1279px){
  section.hero-bg h2{text-wrap:balance}
}
/* 좁은 화면에서는 가운데가 아니라 오른쪽 장면이 남게 하고, 글자 폭을 줄여 장면과 겹치지 않게 한다 */
@media (min-width:1100px) and (max-width:1279px){
  section.hero-bg{background-position:right center}
  .hero-video{object-position:right center}
  section.hero-bg .max-w-2xl{max-width:420px}
  section.hero-bg::before{background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.5) 30%,rgba(255,255,255,0) 43%)}
}
/* 태블릿·모바일: 배너 전체를 맞추면 너무 작고 cover 면 너무 확대되므로, 장면을 축소해 글자 아래에 둔다 */
@media (max-width:1099px){
  .hero-video{inset:auto 0 0 auto;width:max(100%,680px);max-width:none;height:auto;aspect-ratio:4/1}
  section.hero-bg{--scene:max(170px,25vw);height:auto;background-color:#eef5ff;background-size:max(100%,680px) auto;background-position:right bottom;background-repeat:no-repeat;padding-top:28px!important;padding-bottom:calc(var(--scene) + 4px)!important}
  section.hero-bg::before{background:linear-gradient(180deg,#eef5ff calc(100% - var(--scene)),rgba(238,245,255,0) calc(100% - var(--scene)*.72))}
}