@charset "utf-8";
/* ==================================================================
   메인 비주얼 — AI 키비주얼 4종 (#main-visual.ai)        2026-10-01
   피그마 : prix_디자인(기타)_261001 / prix_keyvisaul_01 ~ 04 (1920 x 960)
   사용 : main/index_20261001.asp
   - 슬라이드 : slick(fade) / 자동 넘김은 시간 게이지 애니메이션이 끝날 때(.ai-gauge)
   - 텍스트 모션 : 현재 슬라이드에 .is-on → 줄 단위로 아래에서 올라오며 등장
   - 슬라이드별 색 : --kv-point(포인트 글자) / --kv-btn(주 버튼)
   ================================================================== */

#main-visual.ai{--kv-time:5s; height:96rem !important; background:#000; font-size:0; line-height:0;}
#main-visual.ai .ai-slider{height:100%; opacity:0; transition:opacity .6s ease;}
#main-visual.ai .ai-slider.slick-initialized{opacity:1;}
#main-visual.ai .slick-list,
#main-visual.ai .slick-track{height:100%;}

/* 슬라이드 */
#main-visual.ai .kv{height:96rem; position:relative; overflow:hidden; background:#000;}
#main-visual.ai .kv01{--kv-point:#3c8aff; --kv-btn:#0066ff;}
#main-visual.ai .kv02{--kv-point:#ff5400; --kv-btn:#ff5400;}
#main-visual.ai .kv03{--kv-point:#46f3ff; --kv-btn:#018cd2;}
#main-visual.ai .kv04{--kv-point:#48d386; --kv-btn:#00bf50;}

/* 배경 이미지 + 왼쪽 어둡게(피그마 mask : 검정 70% → 50% 지점 20% → 투명) */
#main-visual.ai .kv-bg{position:absolute; inset:0; overflow:hidden;}
#main-visual.ai .kv-bg img{width:100%; height:100%; object-fit:cover; object-position:right center; display:block; transform:scale(1.08); transition:transform 5.5s cubic-bezier(.22,.61,.36,1);}
#main-visual.ai .kv01 .kv-bg img{object-position:center center;}
#main-visual.ai .kv-bg:after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.14) 50%, rgba(0,0,0,0) 100%);}
#main-visual.ai .kv.is-on .kv-bg img{transform:scale(1);}

/* 텍스트 영역 : 피그마 기준 왼쪽 300px, 세로 가운데 */
#main-visual.ai .kv-in{width:100%; max-width:132rem; height:100%; margin:0 auto; padding:0 0 0; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; box-sizing:content-box;}
#main-visual.ai .kv-txt{color:#fff; text-align:left;}
#main-visual.ai .kv-cate{font-weight:400; font-size:1.8rem; line-height:2.2rem; letter-spacing:.9rem; color:var(--kv-point); opacity:.7;}
#main-visual.ai .kv-tit{margin:2rem 0 0; padding:0; border:0; background:none; text-align:left; text-transform:none; font-weight:800; font-size:7rem; line-height:8.4rem; color:#fff; letter-spacing:-.01em; word-break:keep-all;}
#main-visual.ai .kv-tit em{font-style:normal; font-weight:inherit;}
#main-visual.ai .kv-desc{margin-top:3rem; font-weight:400; font-size:2.4rem; line-height:3.4rem; color:rgba(255,255,255,.8); word-break:keep-all;}
#main-visual.ai .kv-line{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em;}
#main-visual.ai .kv-line>span{display:block;}

/* 버튼 */
#main-visual.ai .kv-btn{margin-top:7rem; display:flex; flex-wrap:wrap; gap:1rem;}
#main-visual.ai .kv-btn a{height:6rem; padding:0 3rem; border:1px solid transparent; border-radius:.5rem; font-weight:700; font-size:1.8rem; line-height:1; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:2rem; box-sizing:border-box; transition:background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;}
#main-visual.ai .kv-btn a.b1{background:var(--kv-btn);}
#main-visual.ai .kv-btn a.b2{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.4);}
#main-visual.ai .kv-btn a img{width:1.8rem; height:auto; display:block; transition:transform .3s ease;}
#main-visual.ai .kv-btn a:hover{transform:translateY(-.3rem);}
#main-visual.ai .kv-btn a.b1:hover{box-shadow:0 1rem 2.4rem -.6rem var(--kv-btn);}
#main-visual.ai .kv-btn a.b2:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.8);}
#main-visual.ai .kv-btn a.b2:hover img{transform:translateX(.3rem);}

/* ── 텍스트 등장 모션 ─────────────────────────────────────
   기본(숨김) → .is-on 일 때 순서대로 등장. 슬라이드가 바뀌면 .is-on 을 다시 붙여 매번 재생 */
#main-visual.ai .kv-cate{transform:translateX(-2rem); opacity:0; letter-spacing:2.4rem; transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1), letter-spacing 1.2s cubic-bezier(.22,.61,.36,1);}
#main-visual.ai .kv-line>span{transform:translateY(105%); transition:transform 1s cubic-bezier(.19,1,.22,1);}
#main-visual.ai .kv-tit em{color:#fff; transition:color .9s ease;}
#main-visual.ai .kv-desc .kv-line>span{transform:translateY(60%); opacity:0; transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s ease;}
#main-visual.ai .kv-btn a{opacity:0; transform:translateY(2rem);}
#main-visual.ai .kv.is-on .kv-btn a{transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;}

#main-visual.ai .kv.is-on .kv-cate{opacity:.7; transform:none; letter-spacing:.9rem; transition-delay:.15s;}
#main-visual.ai .kv.is-on .kv-tit .kv-line>span{transform:none;}
#main-visual.ai .kv.is-on .kv-tit .kv-line:nth-child(1)>span{transition-delay:.3s;}
#main-visual.ai .kv.is-on .kv-tit .kv-line:nth-child(2)>span{transition-delay:.42s;}
#main-visual.ai .kv.is-on .kv-tit em{color:var(--kv-point); transition-delay:.85s;}
#main-visual.ai .kv.is-on .kv-desc .kv-line>span{transform:none; opacity:1;}
#main-visual.ai .kv.is-on .kv-desc .kv-line:nth-child(1)>span{transition-delay:.7s;}
#main-visual.ai .kv.is-on .kv-desc .kv-line:nth-child(2)>span{transition-delay:.8s;}
#main-visual.ai .kv.is-on .kv-btn a{opacity:1; transform:none;}
#main-visual.ai .kv.is-on .kv-btn a:nth-child(1){transition-delay:1s, 1s, 0s, 0s, 0s;}
#main-visual.ai .kv.is-on .kv-btn a:nth-child(2){transition-delay:1.1s, 1.1s, 0s, 0s, 0s;}
#main-visual.ai .kv.is-on .kv-btn a:hover{transform:translateY(-.3rem); transition-delay:0s;}

/* ── 페이지네이션 + 시간 게이지 (피그마 : 400px 선, 숫자 14px) ── */
#main-visual.ai .ai-ctrl{width:100%; max-width:132rem; position:absolute; left:50%; bottom:5.5rem; z-index:3; transform:translateX(-50%); line-height:1;}
#main-visual.ai .ai-gauge{width:40rem; height:2px; background:rgba(255,255,255,.2); position:relative; overflow:hidden;}
#main-visual.ai .ai-gauge>span{position:absolute; left:0; top:0; bottom:0; width:100%; background:#fff; transform:scaleX(0); transform-origin:left center;}
#main-visual.ai .ai-gauge.run>span{animation:aiGauge var(--kv-time) linear forwards;}
#main-visual.ai.paused .ai-gauge.run>span{animation-play-state:paused;}
@keyframes aiGauge{from{transform:scaleX(0);} to{transform:scaleX(1);}}

#main-visual.ai .ai-num{margin-top:1.7rem; display:flex; align-items:center; gap:1rem;}
#main-visual.ai .ai-num button{min-width:1.8rem; padding:0; border:0; background:none; font-family:inherit; font-weight:400; font-size:1.4rem; line-height:1.7rem; color:#fff; opacity:.4; cursor:pointer; transition:opacity .3s ease;}
#main-visual.ai .ai-num button:hover{opacity:.8;}
#main-visual.ai .ai-num button.on{font-weight:700; opacity:1;}
#main-visual.ai .ai-num .ai-auto{width:1.7rem; height:1.7rem; margin-left:1rem; position:relative; opacity:.5;}
#main-visual.ai .ai-num .ai-auto:hover{opacity:1;}
/* 정지(Ⅱ)/재생(▶) 아이콘 : 버튼 정가운데 */
#main-visual.ai .ai-num .ai-auto:before,
#main-visual.ai .ai-num .ai-auto:after{content:""; position:absolute; top:50%; width:18%; height:64%; background:#fff; transform:translateY(-50%);}
#main-visual.ai .ai-num .ai-auto:before{left:28%;}
#main-visual.ai .ai-num .ai-auto:after{right:28%;}
#main-visual.ai.paused .ai-num .ai-auto:before{left:50%; width:0; height:0; background:none; border-style:solid; border-width:.55em 0 .55em .9em; border-color:transparent transparent transparent #fff; transform:translate(-40%,-50%);}
#main-visual.ai.paused .ai-num .ai-auto:after{display:none;}

/* ── 반응형 ─────────────────────────────────────────── */
@media only screen and (max-width:1500px){
	#main-visual.ai .kv-in,
	#main-visual.ai .ai-ctrl{max-width:none; padding:0 8rem; box-sizing:border-box;}
	#main-visual.ai .kv-in{box-sizing:border-box;}
}
@media only screen and (max-width:1024px){
	#main-visual.ai{height:auto !important;}
	#main-visual.ai .kv{height:100vh; height:100svh; min-height:90rem; max-height:130rem;}
	#main-visual.ai .kv-bg img{object-position:72% center;}
	#main-visual.ai .kv01 .kv-bg img{object-position:62% center;}
	#main-visual.ai .kv-bg:after{background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%);}
	#main-visual.ai .kv-in,
	#main-visual.ai .ai-ctrl{padding:0 5rem;}
	#main-visual.ai .kv-in{justify-content:flex-end; padding-bottom:20rem;}
	#main-visual.ai .ai-ctrl{bottom:8rem;}
	#main-visual.ai .ai-gauge{width:100%;}
}
@media only screen and (max-width:840px){
	#main-visual.ai .kv-in,
	#main-visual.ai .ai-ctrl{padding-left:3rem; padding-right:3rem;}
	#main-visual.ai .kv-cate{font-size:2rem; letter-spacing:.6rem;}
	#main-visual.ai.ai .kv.is-on .kv-cate{letter-spacing:.6rem;}
	#main-visual.ai .kv-txt{container-type:inline-size;} /* 제목 크기를 글자 영역 폭(cqw) 기준으로 */
	#main-visual.ai .kv-tit{font-size:5.6rem; font-size:min(5.6rem, calc(100cqw / 11.8)); line-height:1.3;} /* 가장 긴 줄(11.6자 폭)이 한 줄에 들어가도록 */
	#main-visual.ai .kv-desc{margin-top:2.4rem; font-size:2.4rem; line-height:1.55;}
	#main-visual.ai .kv-desc .kv-line{display:inline; overflow:visible;}
	#main-visual.ai .kv-desc .kv-line>span{display:inline;}
	#main-visual.ai .kv-desc .kv-line+.kv-line:before{content:" ";}
	#main-visual.ai .kv-btn{margin-top:4.4rem; gap:1.2rem;}
	#main-visual.ai .kv-btn a{height:7.2rem; padding:0 3.2rem; font-size:2.3rem;}
	#main-visual.ai .kv-btn a img{width:2.2rem;}
	#main-visual.ai .ai-num{margin-top:2.2rem; gap:1.8rem;}
	#main-visual.ai .ai-num button{font-size:2.2rem; line-height:2.6rem;}
	#main-visual.ai .ai-num .ai-auto{width:2.6rem; height:2.6rem; margin-left:.6rem; font-size:2.2rem;}
}
@media only screen and (max-width:480px){
	#main-visual.ai .kv-tit{font-size:5rem; font-size:min(5rem, calc(100cqw / 11.8));}
	#main-visual.ai .kv-desc{font-size:2.5rem;}
	#main-visual.ai .kv-btn a{padding:0 2.6rem; font-size:2.4rem; height:7.6rem;}
}

/* 움직임 줄이기 설정 */
@media (prefers-reduced-motion: reduce){
	#main-visual.ai .kv-bg img,
	#main-visual.ai .kv-cate,
	#main-visual.ai .kv-line>span,
	#main-visual.ai .kv-btn a{transition:none !important; transform:none !important;}
	#main-visual.ai .kv-cate,
	#main-visual.ai .kv-desc .kv-line>span,
	#main-visual.ai .kv-btn a{opacity:1 !important;}
	#main-visual.ai .kv-cate{opacity:.7 !important;}
}