@import url("common.css");



/* 화살표 */






/*** Visual ***/
#visual{width:100%; height:var(--vh); min-height:600px; overflow:hidden; background:var(--bk000); position:relative;}
#visual .visual_in,
#visual .visual_in .slick-list,
#visual .visual_in .slick-track,
#visual .v_slide{height:100%;}
#visual .visual_in{position:relative; z-index:1;}
#visual .v_slide{position:relative; overflow:hidden;}
#visual .v_slide figure.bg{position:absolute; left:0; top:0; width:100%; height:100%; display:block; overflow:hidden; transform:scale(1.1); transition:none;}
#visual .v_slide figure.bg.mo {display:none;}
#visual .v_slide figure.bg::after{content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.3);}
#visual .visual_in .slick-slide.action figure.bg{transform:scale(1); transition:transform 6s linear;}

/* txt / ctrl 동일 위치·높이 → 바가 대제목(.tit)·소제목(.desc) 사이 */
#visual .v_slide .txt,
#visual .visual_ctrl{position:absolute; left:50%; bottom:min(15%, 100px); transform:translateX(-50%); width:90%; max-width:1530px; box-sizing:border-box; display:flex; flex-direction:column;}
#visual .v_slide .txt{z-index:2; pointer-events:none;}
#visual .v_slide .txt a{pointer-events:auto;}
#visual .visual_ctrl{z-index:5; pointer-events:none;}
#visual .v_slide .txt .tit,
#visual .visual_ctrl .tit_space{min-height:168px; width:100%; flex-shrink:0;}
#visual .v_slide .txt .tit{display:flex; align-items:flex-end;}
#visual .v_slide .txt .tit .fs85{display:flex; align-items:flex-end; gap:10px; color:var(--white); font-weight:700;}
#visual .v_slide .txt .tit .fs55{font-weight:200; letter-spacing:-3.5px; line-height:1.2;}
#visual .v_slide .txt .fs55{color:var(--white);}
#visual .v_slide .txt .desc,
#visual .visual_ctrl .desc_space{min-height:128px; flex-shrink:0;}
#visual .v_slide .txt .desc{margin-top:80px; display:flex; flex-direction:column; gap:26px;}
#visual .v_slide .txt .desc .fs24{color:var(--basicW); font-weight: 400;}
#visual .v_slide .txt .point{color:var(--main); line-height:inherit; letter-spacing:inherit;}
#visual .v_slide .txt .tit,
#visual .v_slide .txt .desc{opacity:0; transform:translateY(40px); transition:none;}
#visual .visual_in .slick-slide.action .txt .tit{opacity:1; transform:translateY(0); transition:opacity 0.8s linear 0.2s, transform 0.8s linear 0.2s;}
#visual .visual_in .slick-slide.action .txt .desc{opacity:1; transform:translateY(0); transition:opacity 0.8s linear 0.45s, transform 0.8s linear 0.45s;}

#visual .v_slide .txt .fs45 {font-size:2.3rem; line-height:1.5; font-weight:500;}
#visual .v_slide .txt .fs56 {font-size:2.999rem; line-height:1.5; font-weight:700;}

/* pager = .tit 와 .desc 사이 (margin-top:80px 자리) */
#visual .visual_pager{display:flex; align-items:center; gap:20px; width:100%; height:80px; margin:0; flex-shrink:0; pointer-events:auto; box-sizing:border-box;}
#visual .visual_pager .progress{flex:1; height:1px; background:rgba(255,255,255,0.2); position:relative; overflow:hidden;}
#visual .visual_pager .progress i{display:block; width:0; height:100%; background:var(--white);}
#visual .visual_pager .pager_arrow{display:flex; align-items:center; gap:1px; flex-shrink:0;}
#visual .visual_pager .pager_arrow button{width:55px; height:55px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; background:rgba(0,0,0,0.01); backdrop-filter:blur(1px); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s linear, background 0.3s linear, box-shadow 0.3s linear;}
#visual .visual_pager .pager_arrow button:hover{border-color:var(--white); background:var(--white); box-shadow:0 4px 12px rgba(0,0,0,0.25);}
#visual .visual_pager .pager_arrow button::before{font-family:var(--icon); font-size:28px; color:var(--white); line-height:1; font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; transition:color 0.3s linear;}
#visual .visual_pager .pager_arrow button:hover::before{color:var(--main);}
#visual .visual_pager .pager_arrow button.prev::before{content:'\e5cb';}
#visual .visual_pager .pager_arrow button.next::before{content:'\e5cc';}
#visual .visual_pager .pager_arrow button.pause::before{content:'\e034'; font-size:22px; font-variation-settings: 'FILL' 1;}
#visual .visual_pager .pager_arrow button.pause.playing::before{content:'\e037'; font-variation-settings: 'FILL' 1;}

@keyframes visualProgress {
	0% { width:0; }
	100% { width:100%; }
}





/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 
#visual .v_slide .txt,
#visual .visual_ctrl{bottom:min(15%, 100px);}
#visual .v_slide .txt .tit,
#visual .visual_ctrl .tit_space{min-height:140px;}
#visual .v_slide .txt .desc,
#visual .visual_ctrl .desc_space{min-height:110px;}
#visual .v_slide .txt .desc{margin-top:50px; gap:20px;}
#visual .visual_pager{height:50px; gap:15px;}
#visual .visual_pager .pager_arrow button{width:48px; height:48px;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 
#visual{min-height:100vh; height:100vh;}
#visual .v_slide .txt,
#visual .visual_ctrl{bottom:min(12%, 80px);}
#visual .v_slide .txt .tit,
#visual .visual_ctrl .tit_space{min-height:100px;}
#visual .v_slide .txt .tit .fs85{gap:8px;}
#visual .v_slide .txt .desc,
#visual .visual_ctrl .desc_space{min-height:90px;}
#visual .v_slide .txt .desc{margin-top:40px; gap:16px;}
#visual .visual_pager{height:40px; gap:15px;}
#visual .visual_pager .pager_arrow button{width:45px; height:45px;}
#visual .visual_pager .pager_arrow button::before{font-size:24px;}
#visual .visual_pager .pager_arrow button.pause::before{font-size:18px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 
/* 텍스트(타이틀+설명) / 페이저 분리 — Figma 440 */
#visual .v_slide figure.bg.pc {display:none;}
#visual .v_slide figure.bg.mo {display:block;}
#visual .v_slide .txt,
#visual .visual_ctrl{width:90%;}
#visual .v_slide .txt {bottom:105px;}
#visual .v_slide .txt  br {display:none;}
#visual .visual_ctrl{bottom:30px; flex-direction:row; align-items:center;}
#visual .visual_ctrl .tit_space,
#visual .visual_ctrl .desc_space{display:none; min-height:0;}
#visual .v_slide .txt .tit{min-height:auto;}
#visual .v_slide .txt .tit .fs85{flex-direction:column; align-items:flex-start; gap:10px; font-size:5rem; line-height:0.914;}
#visual .v_slide .txt .tit .fs55{font-size:3.429rem; font-weight:200; letter-spacing:-2.4px; line-height:1.292;}
#visual .v_slide .txt .tit.fs55{font-size:2.571rem; line-height:1.2; letter-spacing:-1.8px;}
#visual .v_slide .txt .desc{min-height:auto; margin-top:20px; gap:26px;}
#visual .v_slide .txt .desc .fs20{font-size:1.143rem; line-height:1.625; letter-spacing:-0.64px;}
#visual .visual_pager{height:45px; gap:20px; margin:0;}
#visual .visual_pager .pager_arrow button{width:45px; height:45px;}
#visual .visual_pager .pager_arrow button::before{font-size:25px;}
#visual .visual_pager .pager_arrow button.pause::before{font-size:17px;}

#visual .v_slide .txt .fs45 {font-size:2rem; line-height:1.5; font-weight:500;}
#visual .v_slide .txt .fs56 {font-size:2.5rem; line-height:1.5; font-weight:700;}



}