@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;background:#222;border-radius:0 0 50px 50px;font-family:var(--e-font),var(--k-font)}
@media (max-width:768px){#mainVisual{border-radius:0 0 28px 28px}}

/* 텍스트 */
#mainVisual .main_txt{opacity:0;display:flex;flex-flow:column;align-items:flex-start;position:absolute;left:var(--layout-inset,80px);top:46%;transform:translateY(-28%);z-index:101;color:#fff;max-width:860px}
#mainVisual .main_txt h1{white-space:pre-line;margin:0;font-size:76px;font-weight:600;line-height:1.12;letter-spacing:-0.025em;word-break:keep-all}
#mainVisual .main_txt .txt{margin:24px 0 0;font-size:19px;font-weight:400;line-height:1.65;word-break:keep-all;color:rgba(255,255,255,.95)}
#mainVisual .main_cta{display:inline-flex;align-items:center;gap:20px;margin-top:52px;color:#fff;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:opacity .2s}
#mainVisual .main_cta:hover{opacity:.85}
#mainVisual .main_cta .cta-line{display:block;flex:0 0 180px;width:180px;height:1px;background:#fff;opacity:.85}
#mainVisual .main_cta svg{width:16px;height:16px;stroke-width:1.5px}
#mainVisual .controls{position:absolute;right:var(--layout-inset,80px);bottom:60px;z-index:101}
#mainVisual .controls span{opacity:.5;cursor:pointer;color:#fff;transition:all .2s}
#mainVisual .controls span+span{margin-left:6px}
#mainVisual .controls span svg{width:40px;height:40px;stroke-width:1.5px}
#mainVisual .controls span:hover{opacity:1}

/* 배경이미지 */
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.35)}
#mainVisual ul li{height:100vh;min-height:850px;overflow:hidden}
#mainVisual ul li video{min-width:100%;min-height:100%;width:auto;height:auto}
#mainVisual ul li .bg{opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:center no-repeat;background-size:cover;transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#mainVisual ul li .bg01{background-image:url(./slide-eclacell.webp)}
#mainVisual ul li .bg02{background-image:url(./slide-maotai.webp)}
#mainVisual ul li.on .bg{width:101%;height:101%;opacity:1}

/* 인트로 로고 오버레이 */
#mainVisual .hero-intro-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:102;width:clamp(180px,22vw,360px);pointer-events:none;opacity:0;will-change:transform,opacity}
#mainVisual .hero-intro-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px rgba(0,0,0,.35))}

/* 헤더 인트로: 처음엔 숨겼다가 메인 카피 등장 시 자연스럽게 내려옴 (홈 전용) */
body.home #sh_hd{opacity:0;transform:translateY(-100%);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
body.home #sh_hd.is-revealed{opacity:1;transform:none}

/* reduced-motion: 인트로 생략, 카피·헤더 즉시 표시 */
@media (prefers-reduced-motion:reduce){
#mainVisual .main_txt{opacity:1}
#mainVisual .hero-intro-logo{display:none}
body.home #sh_hd{opacity:1;transform:none;transition:none}
}

@media (max-width:768px){
#mainVisual .hero-intro-logo{display:none}
}