/* DF 메인 슬라이드 v1.0.0 — 레볼루션 슬라이더(메인비주얼) 치수 그대로
   기준 칸: PC 1240×800 / 노트북 1024×768 / 태블릿 778×960 / 휴대폰 480×700
   칸보다 화면이 좁으면 높이·글자·위치가 같은 비율로 줄어듦 (--u = 1px 기준) */
.dfhero{position:relative;overflow:hidden;min-height:0;margin:0;padding:0;background:#0b1a2e;container-type:inline-size;font-family:"Pretendard Variable",Pretendard,"프리텐다드 M",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dfhero *,.dfhero *:before,.dfhero *:after{box-sizing:border-box}
.dfhero>*{--u:min(1px,calc(100cqw / 1240));--gh:800;--x:140;--ty:-40;--by:100;--tw:971;--bw:880;--cw:1000;--tfs:54;--tlh:72;--bfs:20;--blh:30;--tls:-1px;--bls:-1px}
@container (max-width:1024px){.dfhero>*{--u:calc(100cqw / 1024);--gh:768;--x:100;--by:86;--tfs:46;--tlh:62;--bfs:18;--blh:28;--cw:900}}
@container (max-width:778px){.dfhero>*{--u:calc(100cqw / 778);--gh:960;--x:60;--by:64;--tfs:36;--tlh:48;--bfs:15;--blh:24;--cw:720}}
@container (max-width:480px){.dfhero>*{--u:calc(100cqw / 480);--gh:700;--x:30;--ty:-60;--by:34;--tw:445;--bw:421;--cw:420;--tfs:28;--tlh:40;--bfs:14;--blh:22;--tls:0px;--bls:0px}}

.dfhero-track{position:relative;height:calc(var(--gh) * var(--u))}
.dfhero-s{position:absolute;inset:0;overflow:hidden;visibility:hidden;z-index:1}
.dfhero-s.is-on,.dfhero-s.is-prev{visibility:visible}
.dfhero-s.is-on{z-index:2}
.dfhero-bg,.dfhero-bgi{position:absolute;inset:0}
.dfhero-bg picture,.dfhero-bg img,.dfhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;max-width:none;border:0;margin:0}
.dfhero-isvid .dfhero-bg{background:#0f3b55}
.dfhero-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}
.dfhero-s.is-on .dfhero-stars{opacity:1}

/* 넘어가기: 겹쳐 바뀌기 1초 / 확대하며 바뀌기 */
.dfhero-s.is-in{animation:dfhFade 1s cubic-bezier(.455,.03,.515,.955) both}
.dfhero-s.is-in[data-fx="zoom"] .dfhero-bg{animation:dfhZoomIn 1.2s cubic-bezier(.455,.03,.515,.955) both}
@keyframes dfhFade{from{opacity:0}to{opacity:1}}
@keyframes dfhZoomIn{from{transform:scale(1.2)}to{transform:scale(1)}}
/* 사진 천천히 확대 100→110% (10초) */
.dfhero-kb.is-play .dfhero-bgi{animation:dfhKb 10s linear .3s both}
@keyframes dfhKb{from{transform:scale(1)}to{transform:scale(1.1)}}

/* 글자 칸 */
.dfhero-grid{position:absolute;top:0;bottom:0;left:50%;width:calc(1240 * var(--u));transform:translateX(-50%);z-index:3;pointer-events:none}
@container (max-width:1024px){.dfhero-grid{width:100%}}
.dfhero-tw,.dfhero-b{position:absolute;top:50%;left:calc(var(--x) * var(--u));pointer-events:auto}
.dfhero-tw{width:calc(var(--tw) * var(--u));transform:translateY(calc(-50% + var(--ty) * var(--u)));overflow:hidden;padding:0 0 .12em}
.dfhero-b{width:calc(var(--bw) * var(--u));transform:translateY(calc(-50% + var(--by) * var(--u)))}
.dfhero-center .dfhero-tw,.dfhero-center .dfhero-b{left:50%;width:calc(var(--cw) * var(--u));text-align:center}
.dfhero-center .dfhero-tw{transform:translate(-50%,calc(-50% + var(--ty) * var(--u)))}
.dfhero-center .dfhero-b{transform:translate(-50%,calc(-50% + var(--by) * var(--u)))}
.dfhero-t{color:#fff;text-shadow:0 2px 18px rgba(20,30,60,.28)}
.dfhero-eye{display:block;font-size:13px;line-height:20px;letter-spacing:6px;font-weight:300;margin:0 0 22px;color:rgba(255,255,255,.85);white-space:nowrap}
.dfhero-ln{display:inline-block;width:44px;height:1px;background:rgba(255,255,255,.55);vertical-align:middle;margin-left:14px;font-style:normal}
.dfhero-ln-b{display:none}
.dfhero-center .dfhero-ln{width:36px;margin:0 14px}
.dfhero-center .dfhero-ln-b{display:inline-block}
.dfhero .dfhero-h{margin:0!important;padding:0!important;font-family:"Pretendard Variable",Pretendard,sans-serif!important;font-size:calc(var(--tfs) * var(--u))!important;line-height:calc(var(--tlh) * var(--u))!important;font-weight:200!important;letter-spacing:var(--tls)!important;color:#fff!important;text-transform:none!important;word-break:keep-all;text-align:inherit!important}
.dfhero .dfhero-h b{font-weight:800!important;font-family:inherit!important;color:inherit!important}
.dfhero .dfhero-s:not(:first-child) .dfhero-h{letter-spacing:0!important}
.dfhero-center{--bls:0px}
.dfhero .dfhero-body{margin:0!important;padding:0;font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:calc(var(--bfs) * var(--u));line-height:calc(var(--blh) * var(--u));font-weight:300;letter-spacing:var(--bls);color:rgba(255,255,255,.85);word-break:keep-all}
.dfhero-btn{display:inline-block;margin-top:calc(26 * var(--u));padding:0 26px;height:46px;line-height:44px;border:1px solid rgba(255,255,255,.7);color:#fff;font-size:14px;text-decoration:none;transition:background .3s,color .3s}
.dfhero-btn:hover{background:#fff;color:#111}

/* 글자 나오기: 흐림 12px → 선명, 아래에서 올라오기 */
.dfhero-s .dfhero-t,.dfhero-s .dfhero-b>*{opacity:0}
.dfhero-s.is-play .dfhero-t{animation:dfhUp60 2.99s cubic-bezier(.86,0,.07,1) var(--d1) both}
.dfhero-s.is-play .dfhero-b>*{animation:dfhUp40 2.89s cubic-bezier(.86,0,.07,1) var(--d2) both}
@keyframes dfhUp60{from{opacity:0;transform:translateY(calc(60 * var(--u)));filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes dfhUp40{from{opacity:0;transform:translateY(calc(40 * var(--u)));filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
/* 5초 뒤 글자 사라지기 */
.dfhero-s.is-play.is-out .dfhero-t{animation:dfhOutT 1s cubic-bezier(.455,.03,.515,.955) both}
.dfhero-s.is-play.is-out .dfhero-b>*{animation:dfhOutB .3s cubic-bezier(.645,.045,.355,1) both}
@keyframes dfhOutT{from{opacity:1;transform:none}to{opacity:0;transform:translateY(100%) scale(.7)}}
@keyframes dfhOutB{from{opacity:1}to{opacity:0}}

/* 왼쪽 진행 막대 (PC·노트북) */
.dfhero-pbar{position:absolute;left:0;bottom:0;width:6px;height:100%;z-index:5;pointer-events:none}
.dfhero-pbar i{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#1d70c4;transform-origin:50% 100%;transform:scaleY(0)}
.dfhero-pbar i.is-run{transition:transform var(--dfhero-sp,8s) linear;transform:scaleY(1)}
@container (max-width:778px){.dfhero-pbar{display:none}}

/* 아래 막대 버튼 */
.dfhero-bars{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);display:flex;gap:5px;z-index:5}
.dfhero-bars button{position:relative;width:45px;height:3px;padding:0;margin:0;border:0;border-radius:0;background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s;-webkit-appearance:none;appearance:none}
.dfhero-bars button:before{content:"";position:absolute;inset:-10px -2px}
.dfhero-bars button.is-on,.dfhero-bars button:hover{background:#fff}

/* 화살표: 가는 흰 선 */
.dfhero-arr{position:absolute;top:50%;z-index:5;width:44px;height:64px;margin-top:-32px;padding:12px;border:0;border-radius:0;background:none;cursor:pointer;opacity:.55;transition:opacity .3s,transform .3s;-webkit-appearance:none;appearance:none}
.dfhero-arr svg{display:block;width:20px;height:40px;fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.dfhero-arr:hover{opacity:1}
.dfhero-prev{left:72px}.dfhero-prev:hover{transform:translateX(-3px)}
.dfhero-next{right:32px}.dfhero-next:hover{transform:translateX(3px)}
.dfhero-arr:focus-visible,.dfhero-bars button:focus-visible{outline:1px solid #fff;outline-offset:3px}
@container (max-width:778px){.dfhero-arr{display:none}}

@media (prefers-reduced-motion:reduce){
	.dfhero-kb.is-play .dfhero-bgi,.dfhero-s.is-in[data-fx="zoom"] .dfhero-bg{animation:none}
	.dfhero-s.is-play .dfhero-t,.dfhero-s.is-play .dfhero-b>*{animation-duration:.6s;animation-name:dfhFade}
}