@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* -------- 공통 :: 준비중 페이지 -------- */
.cm-ready-con{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12rem 0; text-align:center;}
.cm-ready-con img{max-width:100%;}
.cm-ready-con p{margin-top:2rem; font-size:1.8rem; color:#888;}

/* ******************  PERCEPT 서브 공통 ********************** */
/* -------- 서브 타이틀 토글형 (Board: Article|IR) + 우측 탭 (실측: tit Light 120 -0.02em gap40, tab SemiBold 16 gap40 py8) -------- */
.board-top{display:flex; align-items:flex-end; justify-content:space-between; margin:18.6rem auto 4rem; box-sizing:border-box;}
.board-tit{display:flex; align-items:center; gap:4rem; font-size:12rem; font-weight:300; letter-spacing:-0.02em; line-height:1; color:#fff;}
.board-tit .cur{color:#fff;}
.board-tit a.dim{color:#fff; opacity:0.2; transition:var(--transition-custom); transition-property:opacity;}
.board-tit a.dim:hover{opacity:0.6;}
.board-tab{display:flex; align-items:center; gap:4rem;}
.board-tab li{position:relative;}
.board-tab li a{display:block; padding:0.8rem 0; color:#fff; font-size:1.6rem; font-weight:500; line-height:1; border-bottom:1px solid transparent; transition:var(--transition-custom); transition-property:border-color, opacity;}
.board-tab li.on a{border-bottom-color:#fff;}
.board-tab li:not(.on) a:hover{border-bottom-color:rgba(255,255,255,0.4);}
/* 슬라이딩 밑줄 (common.js initSlideIndicator — 2026-08-19): on 항목의 흰 라인이 hover 항목으로 미끄러져 이동, 이탈 시 on으로 복귀.
   .has-slider가 붙으면 li별 border-bottom은 투명 유지 (JS 미동작 시 위 규칙이 폴백) */
.board-tab.has-slider{position:relative;}
.board-tab.has-slider li > a{border-bottom-color:transparent !important; transition-property:opacity;}	/* 슬라이더 활성 시 li별 밑줄 완전 차단 + border-color 트랜지션 제거 (로드 직후 흰 밑줄 잔상 방지) */
.board-tab .tab-slider{
	position:absolute; bottom:0; left:0; height:1px; width:0;
	background-color:#fff; opacity:0; pointer-events:none;
	transition:left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}
.board-tab .tab-slider.show{opacity:1;}
.board-tab .tab-slider.no-anim{transition:none;}

/* -------- 더보기 버튼 공통 (실측: 1480×80 white border, Medium 20 tracking 0.8em, 상단 장식라인 5줄 white 20%) -------- */
.board-more{position:relative; margin-top:4rem; margin-bottom:6rem;}
.board-more .more-lines{display:block; position:relative; height:4rem;}
.board-more .more-lines i{position:absolute; left:50%; transform:translateX(-50%); height:2px; background-color:#fff; opacity:0.2;}	/* 2026-08-15: 두께 2px 고정 (scaleY 변주 제거) */
.board-more .more-lines i:nth-child(1){top:0; width:72.8%; --line-sx:0.9298; --line-o0:0.10; --line-o1:0;}	/* 1077.83/1480 실측 */
.board-more .more-lines i:nth-child(2){top:1rem; width:78.3%; --line-sx:0.9298; --line-o0:0.25; --line-o1:0.10;}	/* 1158.26/1480 */
.board-more .more-lines i:nth-child(3){top:2rem; width:83.7%; --line-sx:0.9355; --line-o0:0.45; --line-o1:0.25;}	/* 1238.7/1480 */
.board-more .more-lines i:nth-child(4){top:3rem; width:89.1%; --line-sx:0.9394; --line-o0:0.70; --line-o1:0.45;}	/* 1319.13/1480 */
.board-more .more-lines i:nth-child(5){top:4rem; width:94.6%; --line-sx:0.9419; --line-o0:1; --line-o1:0.70;}	/* 1399.57/1480 */
/* 컨베이어 벨트 효과 (공통 — 같은 디자인 전 구간): 앞(아래) 라인이 뒤로 밀리며 잦아듦.
   위치·폭·밝기(0.45→0.10→0)가 뒤 라인과 정확히 맞물리는 무한 순환, ease-in-out 1.6s. */
.board-more .more-lines i{animation:moreLineConveyor 1.6s linear infinite reverse;}	/* 2026-08-15: 흐름 반전 — 위(뒤)에서 태어나 아래(앞)로 흘러나감 */
.board-more .more-lines:after{
	content:""; position:absolute; left:50%; top:6rem; height:2px; width:100%;	/* 6rem = 버튼 상단 보더 위치 (라인영역 4rem + 버튼 margin-top 2rem) */
	background-color:#fff; opacity:0;
	transform:translateX(-50%);
	animation:moreLineExit 1.6s linear infinite;	/* 배출 라인: 5번 라인 착지점(4rem)을 이어받아 버튼 보더까지 하강, 충돌 순간 소멸 */
}
@keyframes moreLineConveyor{
	0%{transform:translate(-50%, 0) scaleX(1); opacity:var(--line-o0);}
	100%{transform:translate(-50%, -1rem) scaleX(var(--line-sx, 0.94)); opacity:var(--line-o1);}	/* 두께 2px 고정 — 위치·폭·밝기만 순환 */
}
@keyframes moreLineExit{
	0%{transform:translate(-50%, -2rem) scaleX(0.946); opacity:1;}	/* = 5번 라인 종료 상태(4rem, 94.6%)와 연속 */
	96%{opacity:1;}
	100%{transform:translate(-50%, 0) scaleX(1); opacity:0;}	/* 보더(100% 폭)에 부딪히며 흡수 */
}
@media (prefers-reduced-motion: reduce){
	.board-more .more-lines i{animation:none; opacity:0.2;}	/* 시안 정적 상태(white 20%) */
	.board-more .more-lines:after{display:none;}
}
.board-more .board-more-btn{
	position: relative;
	/* a/button 공용 — a는 자동 수직정렬이 없어 flex로 중앙정렬 */
	display:flex; align-items:center; justify-content:center; width:100%; height:8rem; margin-top:2rem; box-sizing:border-box;
	/* 리퀴드 글라스(경량 GPU): 시안 실측 — 보더 1px white만, 인셋 제거 (엣지 이중선 방지) */
	/* border:1px solid #fff; */ background:none; overflow:hidden;
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
	color:#fff; font-size:2rem; font-weight:400; letter-spacing:0.8em; text-indent:0.8em; text-transform:uppercase; text-align:center;
	transition:var(--transition-custom); transition-property:color;
}
.board-more .board-more-btn:before{position: absolute; content:''; inset:0; width:100%; height:100%; border:1px solid #fff; box-sizing:border-box;}
.board-more .board-more-btn .cm-overlay{background:#fff;}
/* hover 흰색 채움 (2026-09-03 사용자 지시): 커서 진입 방향에서 차오름 — sub.js coverAddClass가 in-·out- 방향 클래스 부여, works 카드와 동일 키프레임.
   after 가상요소(z-index:-1)라 텍스트·보더 아래, 글라스 배경 위에 깔림 */
.board-more .board-more-btn::after{content:""; position:absolute; inset:0; width:100%; height:100%; z-index:-1; background:#fff; visibility:hidden; transform:translate3d(0,-105%,0); pointer-events:none;}
.board-more .board-more-btn.in-top::after{visibility:visible; animation:coverInTop 0.35s ease forwards;}
.board-more .board-more-btn.in-right::after{visibility:visible; animation:coverInRight 0.35s ease forwards;}
.board-more .board-more-btn.in-bottom::after{visibility:visible; animation:coverInBottom 0.35s ease forwards;}
.board-more .board-more-btn.in-left::after{visibility:visible; animation:coverInLeft 0.35s ease forwards;}
.board-more .board-more-btn.out-top::after{visibility:visible; animation:coverOutTop 0.35s ease forwards;}
.board-more .board-more-btn.out-right::after{visibility:visible; animation:coverOutRight 0.35s ease forwards;}
.board-more .board-more-btn.out-bottom::after{visibility:visible; animation:coverOutBottom 0.35s ease forwards;}
.board-more .board-more-btn.out-left::after{visibility:visible; animation:coverOutLeft 0.35s ease forwards;}
.board-more .board-more-btn:hover{color:#000;}

/* ------- 뉴스레터 구독 배너 (Figma 263:344 실측 — 2026-09-03, Article·IR 공통)
   기본: 주황 채움(.nl-fill). 목록 hover 시 sub.js가 .is-glass 부여 → 주황이 아래로 빠지고
   목록 카드와 동일한 글라스(white 5% + blur20)가 드러남. 구독 버튼은 커서 진입 방향 흰색 채움 ------- */
.nl-banner{
	position:relative; overflow:hidden;
	display:flex; align-items:center; justify-content:space-between; gap:3rem;
	height:15.3rem; margin-bottom:4rem; padding:0 4.9rem; box-sizing:border-box;
	background-color:rgba(255,255,255,0.05);
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
}
.nl-banner .nl-fill{position:absolute; inset:0; z-index:0; background-color:var(--main-color); transition:transform 0.6s cubic-bezier(0.33,0,0.2,1); pointer-events:none; animation:nlIntroOrange 0.5s ease 0.95s backwards;}	/* 진입 단발 모션: 흰색 다음으로 차오름 */
.nl-banner.is-glass .nl-fill{transform:translate3d(0,105%,0);}	/* 목록 hover: 주황이 아래로 빠짐 */
/* 진입 단발 모션 레이어 (2026-09-03 사용자 지시): 접속 시 글라스 → 흰색 차오름 → 주황 차오름 (흰색은 주황 뒤에서 위로 퇴장) */
.nl-banner .nl-fill-white{position:absolute; inset:0; z-index:0; background:#fff; transform:translate3d(0,-105%,0); pointer-events:none; animation:nlIntroWhite 1.6s ease 0.35s both;}
@keyframes nlIntroWhite{
	0%{transform:translate3d(0,105%,0);}
	28%{transform:translate3d(0,0,0);}
	72%{transform:translate3d(0,0,0);}
	100%{transform:translate3d(0,-105%,0);}
}
@keyframes nlIntroOrange{from{transform:translate3d(0,105%,0);}to{transform:translate3d(0,0,0);}}
/* 진입 모션 잉크 동기화 (2026-09-03 사용자 지시): 흰 배경 구간에서는 글자·버튼 라인이 검정, 주황이 차오르면 흰색 복귀 */
@keyframes nlIntroInk{
	0%, 28%{color:#fff; border-color:#fff;}
	40%, 70%{color:#000; border-color:#000;}
	85%, 100%{color:#fff; border-color:#fff;}
}
.nl-banner .nl-label,
.nl-banner .nl-tit,
.nl-banner .nl-btn{animation:nlIntroInk 1.5s ease backwards;}	/* both 금지 — 종료 후에도 100% 프레임(흰색)이 :hover 검정을 영구 덮는 사고 (2026-09-03) */
@media (prefers-reduced-motion: reduce){
	.nl-banner .nl-fill-white{display:none;}
	.nl-banner .nl-fill{animation:none;}
	.nl-banner .nl-label,
	.nl-banner .nl-tit,
	.nl-banner .nl-btn{animation:none;}
}
.nl-banner .nl-text,
.nl-banner .nl-btn{position:relative; z-index:1;}
/* 타이포 — Figma ctx 실측 (263:346/347/349): 라벨 Bold14 lh1 / 타이틀 Medium28 -1.12px lh1.4 / 버튼 Bold20 -0.8px. 전부 흰색 */
.nl-label{display:block; color:#fff; font-size:1.4rem; font-weight:700; letter-spacing:0; line-height:1; text-transform:uppercase;}
.nl-tit{display:block; margin-top:2rem; color:#fff; font-size:2.8rem; font-weight:500; letter-spacing:-0.04em; line-height:1.4;}
.nl-btn{
	display:flex; align-items:center; justify-content:center; flex:none;
	width:32rem; height:6.6rem; box-sizing:border-box; overflow:hidden;
	border:2px solid #fff; color:#fff; font-size:2rem; font-weight:700; letter-spacing:-0.04em; text-decoration:none;
	transition:color 0.3s ease;
}
.nl-btn span{position:relative; z-index:1;}
.nl-btn::after{content:""; position:absolute; inset:0; width:100%; height:100%; z-index:0; background:#fff; visibility:hidden; transform:translate3d(0,-105%,0); pointer-events:none;}
.nl-btn.in-top::after{visibility:visible; animation:coverInTop 0.35s ease forwards;}
.nl-btn.in-right::after{visibility:visible; animation:coverInRight 0.35s ease forwards;}
.nl-btn.in-bottom::after{visibility:visible; animation:coverInBottom 0.35s ease forwards;}
.nl-btn.in-left::after{visibility:visible; animation:coverInLeft 0.35s ease forwards;}
.nl-btn.out-top::after{visibility:visible; animation:coverOutTop 0.35s ease forwards;}
.nl-btn.out-right::after{visibility:visible; animation:coverOutRight 0.35s ease forwards;}
.nl-btn.out-bottom::after{visibility:visible; animation:coverOutBottom 0.35s ease forwards;}
.nl-btn.out-left::after{visibility:visible; animation:coverOutLeft 0.35s ease forwards;}
.nl-btn:hover{color:#000; text-decoration:none;}	/* 흰색 채움 위 검정 글자 (2026-09-03 사용자 지시) */

/* ******************  Board :: Article (실측: 3열 466 카드 gap40, 카드 p40 flex-gap20) ********************** */
.article-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem;}
.article-list > li > a{
	display:flex; flex-direction:column; align-items:flex-start; gap:2rem;
	aspect-ratio:1/1.02;	/* 2026-08-15: 카드 466×466 정사각 (이미지 21.7rem 유지, 잔여는 img margin-top:auto가 흡수) */
	padding:4rem; box-sizing:border-box;
	/* 리퀴드 글라스(경량 GPU): 시안 실측 그대로 — bg white 5%, 보더 없음 (엣지 이중선 방지) */
	background-color:rgba(255,255,255,0.05);
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
	transition:var(--transition-custom); transition-property:background-color;
}
/* hover 오렌지는 방향 인식 커버(::after)가 담당 */
.article-list > li > a > *{flex-shrink:0;}	/* aspect-ratio 제약이 이미지/텍스트를 수축시키지 못하게 — 내용이 넘치면 카드가 세로로 자람 (이미지 비율 보존) */
.article-list .cate{color:#fff; font-size:1.4rem; font-weight:600; line-height:1;}
.article-list .tit{
	color:#fff; font-size:2.8rem; font-weight:400; letter-spacing:-0.04em; line-height:1.4;
	/* 최대 2줄 + 말줄임, 2줄 높이 고정 — 내용 길이와 무관하게 카드 높이 균일 (2026-08-15: 3줄→2줄) */
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	height:2.8em;	/* 1.4 × 2줄 */
}
.article-list > li > a .img{margin-top:auto;}	/* 이미지 하단 고정 */
.article-list .date{color:#fff; font-size:1.4rem; letter-spacing:-0.02em; line-height:1;}	/* pb1.4rem 제거 — 정사각 카드 수지 맞춤 (466 = 40+14+20+78.4+20+14+20+217+40 +잔여2.6) */
.article-list .img{display:block; overflow:hidden; width:100%; height:21.7rem; background-color:#fff;}
.article-list .img img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.article-list > li > a:hover .img img{transform:scale(1.05);}

/* ******************  Board :: IR (실측: 상단 white 4px 바, 행 120 border 15%, tit Bold 24 -0.04em / date Medium 16 -0.04em) ********************** */
.ir-list-con{position:relative;}
.ir-top-bar{display:block; height:4px; background-color:#fff;}
.ir-list li a{
	display:flex; align-items:center; justify-content:space-between;
	height:12rem; padding:0 4rem; box-sizing:border-box;
	border-bottom:1px solid rgba(255,255,255,0.15);
	transition:var(--transition-custom); transition-property:background-color;
}
.ir-list li a:hover{background-color:rgba(255,255,255,0.05);}
.ir-list .tit{color:#fff; font-size:2.4rem; font-weight:600; letter-spacing:-0.04em;}
.ir-list .date{color:#fff; font-size:1.6rem; font-weight:400; letter-spacing:-0.04em;}
/* 페이징 (실측: 42×42 radius8, 현재=보더2 white, 기타=white12%, gap4/6, 리스트와 24 간격) */
.ir-paging{display:flex; align-items:center; justify-content:space-between; margin-top:2.4rem; margin-bottom:8rem;}
.ir-paging .paging-num{display:flex; gap:0.4rem; align-items:center;}
.ir-paging .paging-num a{
	display:flex; align-items:center; justify-content:center;
	width:4.2rem; height:4.2rem; box-sizing:border-box; border-radius:0.8rem;
	background-color:rgba(255,255,255,0.12);
	color:#fff; font-size:1.6rem; font-weight:500; letter-spacing:-0.04em;
	transition:var(--transition-custom);
}
.ir-paging .paging-num a.cur{background:none; border:2px solid #fff;}
.ir-paging .paging-num a:hover{background-color:rgba(255,255,255,0.25);}
.ir-paging .paging-num a.paging-arrow{background:none; font-size:2rem;}
.ir-paging .paging-state{display:flex; align-items:center; gap:0.6rem; color:#fff; font-size:1.6rem; font-weight:500; letter-spacing:-0.04em;}
.ir-paging .paging-state .cur-box{display:flex; align-items:center; justify-content:center; width:4.2rem; height:4.2rem; box-sizing:border-box; border-radius:0.8rem; border:2px solid #fff;}
.ir-paging .paging-state em{opacity:0.5;}

/* ******************  Contact (실측: 좌 540 안내 + 우 740 폼, 상단 white 4px 바) ********************** */
.contact-con{position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding-top:0; margin-bottom:15rem; box-sizing:border-box;}
.contact-con .contact-top-bar{position:absolute; top:0; left:0; right:0; height:4px; background-color:#fff;}
/* 좌측 안내 (실측: 상하 40 마진, 헤드라인 Regular 48 -0.02em lh1.6, 설명 18 50%) */
.contact-info{width:54rem; padding:6.4rem 0 0;}	/* 2026-08-19: 108→64 (사용자 지시) */	/* 시안 실측: line→headline 108 = text 프레임 y44 + top_margin 40 + gap 24 (2026-08-19 교정: 84→108, 헤드라인 y 510→534 시안 일치) */
/* 좌측 안내 고정 — 폼을 스크롤해도 항상 함께 보임 (PC 전용, 1024↓ 적층 구간 제외).
   top은 스마트 고정 GNB(상단 1.2rem + 알약 높이)와 겹치지 않는 오프셋. 폼 끝에 닿으면
   부모(.contact-con) 경계에서 자연스럽게 고정 해제 */
@media all and (min-width:1025px){
	.contact-info{position:sticky; top:0;}	/* 2026-08-19: 고정 시 박스 상단 0 → padding 108로 헤드라인이 GNB 알약(하단 68) 아래 40px 지점 — 시안 상단 여백 관계 유지 */
}
.contact-headline{color:#fff; font-size:4.8rem; font-weight:300; letter-spacing:-0.02em; line-height:1.4;}
.contact-desc{margin-top:2.4rem; color:#fff; opacity:0.5; font-size:1.8rem; font-weight:300; letter-spacing:-0.02em; line-height:1.6;}
.contact-banner-list{margin-top:2.4rem;}
.contact-banner{
	position:relative;
	display:flex; align-items:flex-start; justify-content:space-between;
	width:52rem; height:13rem; margin-top:2.4rem; padding:4rem; box-sizing:border-box;
	/* 리퀴드 글라스(경량 GPU): 시안 톤(white 3%) + 카드와 동일 처리 */
	background-color:rgba(255,255,255,0.03);
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
}
.contact-banner:first-child{margin-top:0;}
/* 2026-09-03: hover 인터랙션 완전 제거 — 색상 트랜지션도 삭제 + hover 색상 고정 (아래 오버라이드) · 2026-10-06: 호버 테두리 회전 링만 추가(.contact-banner:after — :before 는 cm_liquid_glass.css 의 정적 흰 글라스 엣지가 사용 중) */
.contact-banner .label{color:#fff; font-size:2rem; font-weight:600; letter-spacing:-0.05em; line-height:1;}
.contact-banner .val{display:flex; flex-direction:column; align-items:flex-end; gap:1.6rem; text-align:right;}
.contact-banner .val b{color:#fff; font-size:2rem; font-weight:600; letter-spacing:-0.05em; line-height:1;}
.contact-banner .val span{color:#fff; opacity:0.7; font-size:1.4rem; font-weight:400; letter-spacing:-0.05em; line-height:1;}
.contact-banner:hover .label,
.contact-banner:hover .val b{color:#fff;}
.contact-banner:hover .val span{color:#fff; opacity:0.7;}

.contact-banner .cm-overlay{background:#fff;}
/* 2026-10-06 사용자 지시: 배너 호버 시 테두리(엣지 그라데이션) 1회전 — 인트로 EX/TS 카드(main.css .intro-card:before)와 동일 기법(conic + 마스크 XOR 1px 링, --edge-angle 회전).
   휴지 상태는 시안대로 테두리 없음(opacity 0) → 호버 시 점등(0.45s) + 1.8s 한 바퀴, 아웃 시 되감기며 소등.
   --edge-angle 은 main.css 에 @property 등록돼 있음(전 페이지 로드) — 아래 동일 선언은 content.css 단독 로드 대비 안전장치.
   ★ :before 는 cm_liquid_glass.css(dtd.php 에서 content.css 뒤에 로드)가 정적 흰 글라스 엣지로 쓰고 있어 충돌 → 회전 링은 :after 에 두고 z-index 4 로 그 위에 겹침 (휴지 시 흰 엣지 그대로, 호버 시 오렌지 링 점등·회전) */
@property --edge-angle{syntax:"<angle>"; initial-value:0deg; inherits:false;}
.contact-banner:after{
	position:absolute; inset:0; z-index:4; padding:1px; content:""; pointer-events:none; opacity:0;
	--edge-angle:0deg;
	/* 폴백 (conic 미지원 구형): 고정 linear 엣지 */
	background:linear-gradient(170deg,
		rgba(241,90,44,0.95) 0%, rgba(241,90,44,0.3) 16%, rgba(241,90,44,0) 38%,
		rgba(241,90,44,0) 60%, rgba(241,90,44,0.35) 82%, rgba(241,90,44,0.8) 100%);
	/* 피크 각도는 배너 520×130 코너 실측값: 좌상 284deg · 우하 104deg (인트로 640×360 은 299/119) — 휴지 각도 0 에서 좌상·우하 모서리가 밝은 동일 구성 */
	background:conic-gradient(from var(--edge-angle),
		rgba(241,90,44,0.22) 0deg, rgba(241,90,44,0) 28deg,
		rgba(241,90,44,0) 62deg, rgba(241,90,44,0.8) 104deg, rgba(241,90,44,0) 150deg,
		rgba(241,90,44,0) 212deg, rgba(241,90,44,0.95) 284deg, rgba(241,90,44,0.22) 360deg);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
	transition:--edge-angle 1.8s cubic-bezier(0.37,0,0.63,1), opacity 0.45s ease;	/* 인트로와 동일 sine in-out 1회전 */
}
.contact-banner:hover:after{--edge-angle:360deg; opacity:1;}
@media (prefers-reduced-motion: reduce){
	.contact-banner:after{transition:opacity 0.3s ease;}	/* 회전 없이 점등만 */
}

/* 우측 폼 (실측: 740, 필드 gap 32, 라벨 Bold 16 + 오렌지 6px 점, 인풋 h64 border-b 2px) */
.contact-form{width:74rem; padding:12.4rem 0 0; display:flex; flex-direction:column; gap:3.2rem; box-sizing:border-box; will-change: auto !important;}
.contact-form .form-field{width:100%;}
.contact-form .field-tit{display:flex; align-items:flex-start; gap:0.6rem; color:#fff; font-size:1.6rem; font-weight:600; line-height:1.6; margin-bottom:0.6rem;}
.contact-form .field-tit .req{display:block; width:6px; height:6px; margin-top:0.3rem; background-color:var(--main-color);}
.contact-form .field-input{
	display:flex; align-items:center; gap:2.4rem;	/* 2026-08-19: stretch — 셀렉트가 필드 콘텐츠 높이(44)를 채워 드롭다운 top이 밑줄에 정확히 붙도록 (input/sep은 자체 중앙정렬) */
	height:6.4rem; padding:0rem 1.6rem; box-sizing:border-box;
	/* border-bottom:2px solid #fff; */
}
.contact-form .field-input input[type="text"]{
	flex:1; min-width:1px; width:100%; height:100%; border:0; background:none;
	color:#fff; font-size:1.6rem; font-weight:400; line-height:1.6;
}
.contact-form .field-input input::placeholder{color:rgba(255,255,255,0.35); transition:var(--transition-custom);}

.security-code{font-size:1.6rem;}

/* 2026-08-19 (사용자 지시): 포커스 아웃라인 제거 + 흰색 깜박임 캐럿 (입력 텍스트/밑줄 와이프 등 기존 포커스 연출은 유지) */
.contact-form .field-input input,
.contact-form .field-textarea textarea{outline:none; caret-color:#fff; -webkit-tap-highlight-color:transparent;}
.contact-form .field-input input:focus,
.contact-form .field-input input:focus-visible,
.contact-form .field-textarea textarea:focus,
.contact-form .field-textarea textarea:focus-visible{outline:none; box-shadow:none;}
.contact-form .field-input .sep{display:flex; align-items:center; color:#fff; font-size:1.8rem; font-weight:400; flex-shrink:0;}
.contact-form .field-select{flex:1; min-width:1px; display:flex; flex-direction:column;}	/* 2026-08-19: 자식(wrapper→custom-select)을 flex stretch로 필드 높이까지 늘림 (percentage height 대신) */
.contact-form .custom-select-box select{
	width:100%; border:0; background:none; color:#fff; font-size:1.6rem; font-weight:400; line-height:1.6;
	appearance:none; -webkit-appearance:none;
	background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 100% 50%;
	padding-right:2.4rem; cursor:pointer;
}
.contact-form .custom-select-box select option{background-color:#111; color:#fff;}
/* 생성형 커스텀 셀렉트 다크 스킨 — common.js가 select를 숨기고 div.custom-select를 생성(기본 라이트 스킨 #333 텍스트가
   다크 배경에서 안 보여 "스타일 변경"처럼 보이던 원인). 시안(1091:786~790) 톤으로 재정의 */
.contact-form .field-select .custom-select-wrapper{display:flex; flex-direction:column; flex:1; width:100%;}
.contact-form .field-select div.custom-select{position:relative; display:flex; align-items:center; flex:1; width:100%; cursor:pointer;}
.contact-form .field-select .custom-select-trigger{
	position:relative; display:flex; align-items:center; width:100%; height:100%; padding:0 2.6rem 0 0; box-sizing:border-box;
	border:0;	/* 전역 스킨(cm_bbs_common)의 1px #ccc 보더 제거 — 셀렉트 자체 라인 없음 */
	color:#fff; font-size:1.6rem; font-weight:400; line-height:1.6;
}
.contact-form .field-select .custom-select-trigger:after{
	position:absolute; right:0.2rem; top:50%; width:11px; height:8px; margin-top:-1px; content:"";	/* 2026-08-19: -4px→-1px (3px 하향, 사용자 지시) */
	/* 시안(1091:790): 꽉 찬 ▼ 삼각형 */
	background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
	transition:transform 0.3s ease;
}
.contact-form .field-select div.custom-select.opened .custom-select-trigger:after{
	content:"";	/* 전역 스킨의 xeicon 글리프(\e945)가 동점 특이성+후순위 로드로 부활해 ▼와 겹치던 것 차단 */
	transform:rotate(180deg);
}
/* 2026-08-19 (사용자 지시): 셀렉트 클릭 시 필드의 흰 밑줄이 셀렉트 폭만큼 아래로 길어지며(slideToggle) 항목 노출 —
   드롭박스 = 셀렉트 폭, top = 필드 밑줄 바로 아래, 좌·우·하 2px 흰 실선(상단은 필드 밑줄이 담당) */
.contact-form .field-select .custom-option-drop-list{
	display:none; overflow:hidden; position:absolute; left:0; right:0; top:calc(100%); z-index:30;	/* 필드 padding-bottom 1rem + 밑줄 2px 아래 = 밑줄 직하단 */
	margin:0; /* padding:0.4rem 0; */ list-style:none;
	background-color:#fff;
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
	border:2px solid #fff; border-top:0;
}
/* 드롭박스 가로 끝 = 필드 밑줄 끝에 맞춤 (2026-08-19 사용자 지시): 셀렉트가 필드 첫/끝 항목이면 필드 패딩(1.6rem)만큼 바깥으로 확장 */
.contact-form .field-input .field-select:first-child .custom-option-drop-list{left:-1.6rem;}
.contact-form .field-input .field-select:last-child .custom-option-drop-list{right:-1.6rem;}
.contact-form .field-select .custom-option-item{
	padding:1.2rem 1.6rem; color:#000; font-size:1.6rem; font-weight:400; line-height:1.4; cursor:pointer;
	transition:background-color 0.25s ease, color 0.25s ease;
}
.contact-form .field-select .custom-option-item.selection{color:var(--main-color);}
.contact-form .field-half-wrap{display:flex; gap:2rem;}
.contact-form .field-half{flex:1;}
/* 칩 (실측: h42 radius 23 px20, 기본 bg 15%, 선택 border-2 white) */
.contact-form .field-chips{display:flex; flex-wrap:wrap; gap:0.8rem; padding:1.1rem 0;}
.contact-form .chip{position:relative; cursor:pointer;}
.contact-form .chip input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0);}
.contact-form .chip span{
	display:flex; align-items:center; height:4.2rem; padding:0 1.8rem; box-sizing:border-box;	/* 2026-08-19: 2rem→1.8rem (보더 2px 포함 텍스트 인셋 20 유지, 시안 칩 폭 일치 → 문의유형 5칩 1줄) */
	border-radius:2.3rem; border:2px solid transparent;
	background-color:rgba(255,255,255,0.15);
	color:#fff; font-size:1.6rem; font-weight:400; line-height:1.6;
	transition:var(--transition-custom);
}
.contact-form .chip input:checked + span{background-color:transparent; border-color:#fff;}
.contact-form .chip:hover span{background-color:rgba(255,255,255,0.25);}
.contact-form .chip input:checked:hover + span{background-color:transparent;}
/* 텍스트영역 (실측: h200 border-2 white p20) */
.contact-form .field-textarea{position: relative; border:2px solid #fff; height:20rem; padding:2rem; box-sizing:border-box;}
.contact-form .field-textarea textarea{
	width:100%; height:100%; border:0; background:none; resize:none;
	color:#fff; font-size:1.6rem; font-weight:400; letter-spacing:-0.05em; line-height:1.6;
}

/* 실제로 그려지는 테두리 */
.contact-form .field-textarea .border-draw { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.contact-form .field-textarea .border-draw rect { fill: none; stroke: var(--main-color); stroke-width: 2; vector-effect: non-scaling-stroke; }

.contact-form .field-textarea textarea::placeholder{color:rgba(255,255,255,0.35);}
/* ------- 폼 인터랙션 (호버/포커스 — 사이트 톤: 화이트 새틴 → 오렌지 포인트) ------- */
/* 입력필드: 호버 새틴 → 포커스 시 밑줄이 좌→우로 오렌지로 차오르는 와이프 */
.contact-form .field-input{position:relative; transition:background-color 0.35s ease;}
.contact-form .field-input:before{
	position:absolute; left:0; right:0; bottom:-2px; height:2px; content:"";
	background-color:#fff;
	transform:scaleX(1); transform-origin:left center;
}
.contact-form .field-input:after{
	position:absolute; left:0; width:100%; /* right:0; */ bottom:-2px; height:2px; content:"";
	background-color:var(--main-color);
	transform:scaleX(0); transform-origin:left center;
	/* transition:transform 0.45s cubic-bezier(0.22,0.61,0.36,1); */
}
/* .contact-form .field-input:hover{background-color:rgba(255,255,255,0.04);}
.contact-form .field-input:focus-within{background-color:rgba(255,255,255,0.05);} */
.contact-form .field-input:has(.opened):after,
.contact-form .field-input:hover:after,
.contact-form .field-input:focus-within:after{animation:inputAni 0.8s ease-in-out both;}
.contact-form .field-textarea{transition:border-color 0.35s ease, background-color 0.35s ease;}
/* .contact-form .field-textarea:hover{background-color:rgba(255,255,255,0.04);}
.contact-form .field-textarea:focus-within{border-color:var(--main-color); background-color:rgba(255,255,255,0.05);} */

@keyframes inputAni{
	0%{transform:scaleX(0); left:0; width:100%;}
	50%{transform:scaleX(1); left:0; width:100%;}
	100%{transform:scaleX(1); left:100%; width:0;}
}

/* 포커스 시 플레이스홀더는 한 톤 물러남 */
.contact-form .field-input input::placeholder,
.contact-form .field-textarea textarea::placeholder{transition:all 0.3s ease;}
.contact-form .field-input input:hover::placeholder,
.contact-form .field-textarea textarea:hover::placeholder,
.contact-form .field-input input:focus::placeholder,
.contact-form .field-textarea textarea:focus::placeholder{opacity:1; color:#fff;}
/* 포커스 필드의 라벨 필수점 펄스 */
.contact-form .form-field:focus-within .field-tit .req{animation:reqPulse 1.2s ease-in-out infinite;}
@keyframes reqPulse{
	0%, 100%{transform:scale(1); opacity:1;}
	50%{transform:scale(1.7); opacity:0.55;}
}
/* 문의유형 칩: 호버 리프트 → 클릭 눌림 → 선택 순간 팝 */
.contact-form .chip span{transition:background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
.contact-form .chip:hover span{transform:translateY(-2px);}
.contact-form .chip:active span{transform:translateY(0) scale(0.96);}
.contact-form .chip input:checked + span{border-color:#fff; animation:chipPop 0.35s cubic-bezier(0.34,1.56,0.64,1);}
.contact-form .chip input:checked:hover + span{border-color:var(--main-color);}
@keyframes chipPop{
	0%{transform:scale(0.94);}
	60%{transform:scale(1.05);}
	100%{transform:scale(1);}
}
/* 셀렉트 옵션: 호버 시 살짝 들여쓰기 슬라이드 */
.contact-form .field-select .custom-option-item{transition:background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;}
.contact-form .field-select .custom-option-item:hover{padding-left:2.2rem;}
/* 배너(대표전화·이메일) 호버 인터랙션 제거 (2026-09-03 사용자 지시) — 원복 시 아래 주석 해제
.contact-banner{transition:background-color 0.35s ease;}
.contact-banner .val b{transition:color 0.3s ease;}
.contact-banner:hover .label,
.contact-banner:hover .val span{color:#000;}
.contact-banner:hover .val b{color:var(--main-color);} */
/* 동의 체크: 호버 프리뷰 + 체크 순간 팝 */
.agree-policy:hover i{color:rgba(255,255,255,0.45);}	/* checked 오렌지가 우선 (기존 규칙이 특이성 높음) */
.agree-policy input:checked ~ i{animation:chipPop 0.35s cubic-bezier(0.34,1.56,0.64,1);}
/* 제출 버튼: 호버 리프트 + 클릭 눌림 */
.contact-submit-btn:hover{transform:translateY(-2px);}
.contact-submit-btn:active{transform:translateY(0) scale(0.97);}
@media (prefers-reduced-motion: reduce){
	.contact-form .form-field:focus-within .field-tit .req,
	.contact-form .chip input:checked + span,
	.agree-policy input:checked ~ i{animation:none;}
}
/* 하단 (실측: 좌 동의 체크 22px 아이콘, 우 320×66 white 버튼) */
.contact-form .form-bottom{display:flex; align-items:center; justify-content:space-between;}
.agree-policy{display:flex; align-items:center; gap:1.2rem; padding:1.2rem 0; margin:-1.2rem 0; cursor:pointer;}	/* 2026-08-19: 클릭 영역 상하 12px 확장 (레이아웃 영향 없음) */
.agree-policy input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0);}
.agree-policy i{font-size:2.2rem; color:rgba(255,255,255,0.2); transition:var(--transition-custom);}
.agree-policy input:checked ~ i{color:#fff; opacity:1;}	/* 2026-08-19: 체크 시 흰색 100% (구: 오렌지) */
.agree-policy input:checked ~ .txt em{color:#fff; opacity:1;}
.agree-policy .txt{font-size:1.6rem; letter-spacing:-0.05em; line-height:1.6;}
.agree-policy .txt a{color:#fff; font-weight:500; text-decoration:underline;}
.agree-policy .txt em{color:#555; font-weight:400; margin-left:0.4rem; transition:color 0.3s ease;}	/* 2026-08-19: 링크와 간격 4px */
.contact-submit-btn{
	display:flex; align-items:center; justify-content:center;
	width:32rem; height:6.6rem; box-sizing:border-box;
	background-color:#fff; /* border:3px solid #fff; */
	color:#000; font-size:2rem; font-weight:600; letter-spacing:-0.04em;
	transition:var(--transition-custom);
}
.contact-submit-btn:hover{background-color:var(--main-color); border-color:var(--main-color); color:#fff;}

/* ******************  Works :: 목록 (실측: 3열 480 gap20, 대형 980×560 2×2 스팬) ********************** */
.works-top .works-top-right{display:flex; align-items:flex-end; gap:4rem;}
.works-filter-btn{
	display:flex; align-items:center; gap:1.6rem;
	padding:1rem 1.2rem 1rem 1.6rem; box-sizing:border-box;
	border:2px solid rgba(255,255,255,0.15); border-radius:2.4rem; background:none;
	color:#fff; transition:var(--transition-custom);
}
.works-filter-btn b{font-size:1.4rem; font-weight:600; line-height:1.4;}
.works-filter-btn i{font-size:2rem; line-height:1; transition:var(--transition-custom);}
.works-filter-btn:hover{border-color:rgba(255,255,255,0.4);}
.works-filter-btn.open i{transform:rotate(180deg);}
/* 해시태그 필터 (실측: py24 gap8, 칩 border-2 15% radius24 px16 py10 Bold 14) — 기본 접힘, Filter 토글 */
.works-filter-con{display:none; overflow:hidden;}
.works-filter-inner{display:flex; flex-wrap:wrap; gap:0.8rem; padding:0 0 2.4rem;}	/* 2026-08-19: 상단 padding 제거 (사용자 지시) */
.filter-chip{
	padding:1rem 1.6rem; box-sizing:border-box;
	border:2px solid rgba(255,255,255,0.15); border-radius:2.4rem; background:none;
	color:#fff; font-size:1.4rem; font-weight:600; line-height:1.4;
	transition:var(--transition-custom);
}
.filter-chip:hover,
.filter-chip.on{border-color:#fff;}
/* 모자이크 그리드 */
.works-grid{
	display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:27rem; grid-auto-flow:dense; gap:2rem;
}
.works-grid .tile{position:relative;}
.works-grid .tile.large{grid-column:span 2; grid-row:span 2;}
.works-grid .tile.large.col2{grid-column:2 / 4;}
.works-grid .tile > a{display:block; position:relative; overflow:hidden; width:100%; height:100%;}
.works-grid .thumb{display:block; width:100%; height:100%;}
.works-grid .thumb img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.works-grid .tile > a:hover .thumb img{transform:scale(1.04);}
.works-grid .cate{position:absolute; top:3.2rem; left:3.2rem; color:#fff; font-size:1.4rem; font-weight:600; line-height:1; z-index:4;}	/* 2026-08-19: hover 오버레이(z3) 위에 상시 노출 */
.works-grid .tile.large .cate{top:6.4rem; left:6.4rem;}
/* 대형 상시 텍스트 (실측: left40 bottom, tit Bold 36 -0.02em + desc Regular 18, gap16) */
.works-grid .tile-text{position:absolute; left:4rem; bottom:4rem; z-index:2;}
.works-grid .tile-text strong{display:block; color:#fff; font-size:3.6rem; font-weight:600; letter-spacing:-0.02em; line-height:1;}
.works-grid .tile-text p{margin-top:1.6rem; color:#fff; font-size:1.8rem; line-height:1;}
/* 소형 hover (2026-09-03 개편 — 사용자 지시): 오렌지 배경은 별도 레이어(.hover-bg)가 방향 슬라이드,
   텍스트는 배경이 채워진 뒤 제자리에서 블러 인 — 이탈 시 텍스트 먼저 블러 아웃 (진입 지연은 방향 커버 섹션에서 재정의) */
.works-grid .hover-text,
.wv-more-list .hover-text{
	position:absolute; inset:0; z-index:3;
	display:flex; flex-direction:column; justify-content:flex-end; gap:1.2rem;
	padding:0 3.2rem 3.2rem; box-sizing:border-box;	/* 2026-08-19: 텍스트 좌하단 40px — 대형 카드와 동일 위치 (사용자 지시) */
	opacity:0; filter:blur(14px);
	transition:opacity 0.3s ease, filter 0.3s ease;
}
.works-grid .hover-text strong{color:#fff; font-size:3.2rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2;}
.works-grid .hover-text p{color:#fff; font-size:1.6rem; line-height:1.4;}
/* 오렌지 배경 레이어 — 전 카드 공통 (목록 소형·대형 + 상세 More) */
.works-grid .hover-bg,
.wv-more-list .hover-bg{
	position:absolute; inset:0; z-index:2;	/* 텍스트(z3)·카테고리(z4) 아래 */
	background-color:rgba(241,90,44,0.8);
	-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
	visibility:hidden; transform:translate3d(0,-105%,0); pointer-events:none;
}
/* 대형 카드 (2026-08-19 사용자 지시): 텍스트는 상시 노출·정지(시안 상시 텍스트 실측 36/18, 좌하단 40), hover 시 배경(.hover-bg)만 방향 슬라이드 인/아웃 */
.works-grid .tile.large > a .hover-text{gap:1.6rem; padding:0 6.4rem 6.4rem; opacity:1; filter:none; visibility:visible; transform:none; animation:none; transition:none; z-index:3;}
.works-grid .tile.large .hover-text strong{font-size:3.6rem; line-height:1;}
.works-grid .tile.large .hover-text p{font-size:1.8rem; line-height:1;}
.works-page .board-more{margin-top:4.6rem;}

/* ******************  Works :: 상세 ********************** */
/* 상단 비주얼 (실측 1920×720 + cover 680) */
.wv-top{position:relative; width:100%; height:72rem; overflow:hidden;}
.wv-top img{width:100%; height:100%; object-fit:cover; object-position:50% 55%;}	/* 실측: 1080 원본 top -198 */
.wv-top .cover{position:absolute; top:0; left:0; right:0; height:68rem; background:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 37.2%);}	/* 실측 cover 그라데이션 */
/* 정보 (실측: top gap 80, 좌 900(들여쓰기 40) / 우 360) */
.wv-info{display:flex; align-items:flex-start; justify-content:space-between; padding-top:8rem; box-sizing:border-box;}
.wv-left{width:94rem; padding-left:4rem; box-sizing:border-box;}
.wv-tit{color:#fff; font-size:3.6rem; font-weight:600; letter-spacing:-0.02em; line-height:1;}
.wv-sub-tit{margin-top:1.6rem; color:#fff; font-size:2.4rem; font-weight:500; line-height:1;}
.wv-more-content{overflow:hidden; display:none;}	/* 기본 접힘 — More information 클릭 시 slideDown (2026-08-19 시안 검수) */
.wv-desc{margin-top:4rem; color:#fff; opacity:0.8; font-size:1.6rem; font-weight:400; line-height:1.6;}
.wv-more-content .wv-desc:first-child{text-transform:uppercase;}	/* 실측: 국문 문단 내 영문 대문자 표기 */
.wv-info-toggle-btn{display:flex; align-items:center; gap:0.8rem; margin-top:4rem; background:none; border:0; color:#fff;}
.wv-info-toggle-btn .icon{
	display:block; width:2.4rem; height:2.4rem;
	background:url("../images/works/btn_info_plus.svg") no-repeat 50% 50%/2.4rem 2.4rem;	/* svg가 원형 테두리 포함 — CSS 보더 중복 제거 (2026-08-19 시안 검수) */
}
.wv-info-toggle-btn b{font-size:1.6rem; font-weight:400; line-height:1;}
.wv-info-toggle-btn .less-txt{display:none;}
.wv-info-toggle-btn.open .icon{background-image:url("../images/works/btn_info_up.svg");}
.wv-info-toggle-btn.open .more-txt{display:none;}
.wv-info-toggle-btn.open .less-txt{display:block;}
/* 우측 정보 (실측: 2열 160 gap40, 라벨 Regular 16 60% / 값 SemiBold 16, 행 gap 40) */
.wv-right{display:grid; grid-template-columns:16rem 16rem; column-gap:4rem; row-gap:4rem; width:36rem;}
.wv-right dl dt{color:#fff; opacity:0.6; font-size:1.6rem; line-height:1;}
.wv-right dl dd{margin-top:1.6rem; color:#fff; font-size:1.6rem; font-weight:500; line-height:1;}
.wv-right .wv-category{grid-column:2; grid-row:1 / 4;}
.wv-right .wv-category dd{display:flex; flex-direction:column; gap:1.6rem;}
.wv-right .wv-category dd span{text-decoration:underline; text-underline-position:from-font;}	/* 실측: 해시태그 밑줄 */
/* 비디오/갤러리 (실측: 상하 gap 80, 이미지 1480×832 gap 20) */
.wv-video{margin-top:8rem;}
.wv-video img{display:block; width:100%;}
.wv-video-embed{position:relative; width:100%; padding:56.25% 0 0 0; background:#000; box-sizing:border-box;}	/* Vimeo 16:9 (시안 1480×832 비율 동일) */
.wv-video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.wv-sec-tit{display:flex; align-items:flex-end; gap:1.6rem; margin-bottom:4rem;}
.wv-sec-tit h4{color:#fff; font-size:3.6rem; font-weight:600; letter-spacing:-0.02em; line-height:1;}
.wv-sec-tit .count{color:#fff; opacity:0.8; font-size:1.6rem; font-weight:400; letter-spacing:-0.02em; line-height:1; padding-bottom:0.2rem;}
.wv-gallery{margin-top:8rem;}
.wv-gallery-list li{margin-top:2rem;}
.wv-gallery-list li:first-child{margin-top:0;}
.wv-gallery-list li img{display:block; width:100%;}
/* 라운드 버튼 (실측: 텍스트 Medium 16 + 원형 48 아이콘) */
.wv-round-btn{
	display:flex; align-items:center; gap:1.6rem; margin:4rem 0 0 auto;
	background:none; border:0; color:#fff; text-decoration:none; width:fit-content;
}
.wv-round-btn span{font-size:1.6rem; font-weight:400; line-height:1;}
.wv-round-btn .btn-circle{
	display:flex; align-items:center; justify-content:center;
	width:4.8rem; height:4.8rem; box-sizing:border-box;
	border:2px solid #fff; border-radius:0;	/* 2026-08-19 시안샷 픽셀 실측: 사각 48×48, 2px #fff 보더 (구: 원형 1px 40%) */
	font-size:2.8rem; transition:var(--transition-custom);
}
.wv-round-btn .btn-circle .cm-overlay{background:#fff;}
.wv-round-btn:hover .btn-circle{background-color:#fff; color:#000;}
/* 연관 Works (2026-09-03 사용자 지시: 3열 한 줄 — 목록 소형 카드(3열 1fr × 27rem)와 동일 크기·타이포) */
.wv-more{margin-top:8rem; margin-bottom:9.2rem;}
.wv-more-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;}
.wv-more-list > li{position:relative; height:27rem;}
.wv-more-list > li > a{display:block; position:relative; overflow:hidden; width:100%; height:100%;}
.wv-more-list .thumb{display:block; width:100%; height:100%;}
.wv-more-list .thumb img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.wv-more-list > li > a:hover .thumb img{transform:scale(1.04);}
.wv-more-list .cate{position:absolute; top:3.2rem; left:3.2rem; z-index:4; color:#fff; font-size:1.4rem; font-weight:600; line-height:1;}	/* hover 오버레이(z3) 위에 상시 노출 — 목록 소형과 동일 32/32 */
.wv-more-list .hover-text strong{color:#fff; font-size:3.2rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2;}
.wv-more-list .hover-text p{color:#fff; font-size:1.6rem; font-weight:400; line-height:1.4;}

/* ******************  회사소개 ********************** */

/* 게시판 엔진 기본 페이징(.paging) 숨김 — 스킨이 자체 UI 담당 (글쓰기 버튼은 bbs_write=9로 서버에서 제거,
   cm-btn-controls는 뷰의 목록 버튼이 쓰므로 숨기지 않는다) */
.board-page .paging{display:none;}

/* ------- 게시판 뷰(bgu=view) 다크 테마 — cm_bbs_common 라이트 기본값 오버라이드 ------- */
.board-page .bbs-view-con{border-top:1px solid rgba(255,255,255,0.4);}
.board-page .bbs-view-top{padding:3.6rem 0.4rem; border-bottom:1px solid rgba(255,255,255,0.15);}
.board-page .bbs-view-top .bbs-category{color:var(--main-color); font-size:1.6rem; font-weight:500;}
.board-page .bbs-view-top .bbs-tit{color:#fff; font-size:3.2rem; font-weight:400; letter-spacing:-0.02em; line-height:1.4;}
.board-page .bbs-view-top .bbs-write-info{margin-top:2rem;}
.board-page .bbs-view-top .bbs-write-info dt{color:rgba(255,255,255,0.45);}
.board-page .bbs-view-top .bbs-write-info dd{color:rgba(255,255,255,0.7);}
.board-page .bbs-view-content{
	padding:4.8rem 0.4rem 6.4rem; min-height:20rem; box-sizing:border-box;
	border-bottom:1px solid rgba(255,255,255,0.15);
	color:rgba(255,255,255,0.8); font-size:1.8rem; letter-spacing:-0.01em; line-height:1.8;
}
.board-page .bbs-view-content img{max-width:100%; height:auto;}
.board-page .bbs-view-content a{color:var(--main-color);}
/* 본문 기본 서식 (고객 요청 2026-09-23) — 에디터로 쓴 글에 최대 폭 760·문단 여백·소제목·사진 설명·인용·목록. 기존 글의 인라인 서식은 그대로 우선 */
.board-page .bbs-view-content > *{max-width:76rem; margin-left:auto; margin-right:auto;}
.board-page .bbs-view-content p{margin:0 auto 1.6em;}
.board-page .bbs-view-content > :first-child{margin-top:0;}
.board-page .bbs-view-content > :last-child{margin-bottom:0;}
.board-page .bbs-view-content h2, .board-page .bbs-view-content h3, .board-page .bbs-view-content h4{color:#fff; font-weight:600; line-height:1.4; letter-spacing:-0.02em; margin:3.6rem auto 1.2rem;}
.board-page .bbs-view-content h2{font-size:2.6rem;}
.board-page .bbs-view-content h3{font-size:2.2rem;}
.board-page .bbs-view-content h4{font-size:1.9rem;}
.board-page .bbs-view-content img{display:block; margin:0 auto; border-radius:0.6rem;}
.board-page .bbs-view-content p > img{margin:0.4rem auto;}
.board-page .bbs-view-content p.img-caption{margin:-0.8em auto 2.2em; text-align:center; font-size:1.4rem; line-height:1.6; color:rgba(255,255,255,0.5);}
.board-page .bbs-view-content blockquote{margin:2.4rem auto; padding:1.2rem 2rem; border-left:3px solid var(--main-color); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.7); font-size:1.7rem;}
.board-page .bbs-view-content ul, .board-page .bbs-view-content ol{margin:0 auto 1.6em; padding-left:2.2rem;}
.board-page .bbs-view-content ul{list-style:disc;} .board-page .bbs-view-content ol{list-style:decimal;}
.board-page .bbs-view-content li{margin:0.3em 0;}
.board-page .bbs-view-content hr{border:0; border-top:1px solid rgba(255,255,255,0.15); margin:3.2rem auto;}
.board-page .bbs-view-content pre{padding:1.6rem 2rem; background:rgba(255,255,255,0.06); border-radius:0.6rem; font-size:1.5rem; line-height:1.6; overflow:auto; white-space:pre-wrap;}
.board-page .bbs-view-content table{width:100%; border-collapse:collapse; margin:0 auto 1.6em; font-size:1.6rem;}
.board-page .bbs-view-content th, .board-page .bbs-view-content td{padding:1rem 1.2rem; border:1px solid rgba(255,255,255,0.15); vertical-align:top;}
.board-page .bbs-view-content th{background:rgba(255,255,255,0.06); color:#fff; font-weight:600;}
.board-page .bbs-view-content strong, .board-page .bbs-view-content b{color:#fff;}
/* 목록 버튼 — 사이트 공통 글라스 버튼 톤 (Learn more와 동일 계열) */
.board-page .cm-btn-controls{margin-top:6rem;}
.board-page .cm-btn-controls .right-btn-controls{margin:0 auto;}
.board-page .cm-btn-controls a,
.board-page .cm-btn-controls button{
	width:20rem; height:6rem; margin:0;
	background:none;
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
	color:#fff; font-size:1.8rem; font-weight:400; letter-spacing:0.4em; text-indent:0.4em; text-transform:uppercase;
	transition:var(--transition-custom);
}
.board-page .cm-btn-controls a:before,
.board-page .cm-btn-controls button:before{position: absolute; content:''; inset:0; width:100%; height:100%; border:1px solid #fff; box-sizing:border-box;}
.board-page .cm-btn-controls a:hover,
.board-page .cm-btn-controls button:hover{background-color:rgba(255,255,255,0.08); color:#000}
.board-page .cm-btn-controls a .cm-overlay,
.board-page .cm-btn-controls button .cm-overlay{background:#fff;}
/* 이전/다음 글 */
.board-page .bbs-view-prev-next-list{margin-top:8rem;}
.board-page .bbs-view-prev-next-list li{border-bottom:1px solid rgba(255,255,255,0.15);}
.board-page .bbs-view-prev-next-list li:first-child{border-top:1px solid rgba(255,255,255,0.15);}
.board-page .bbs-prev-next-tbl th,
.board-page .bbs-prev-next-tbl td{height:6.4rem; color:rgba(255,255,255,0.45); font-size:1.6rem;}
.board-page .bbs-prev-next-tbl .bbs-prev-next-tit{color:#fff; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;}
.board-page .bbs-prev-next-tbl .bbs-prev-next-tit:after{background-color:rgba(255,255,255,0.15);}
.board-page .bbs-prev-next-tbl td a .bbs-tit{color:rgba(255,255,255,0.7); font-size:1.6rem; transition:var(--transition-custom);}
.board-page .bbs-prev-next-tbl td a:hover .bbs-tit{color:#fff;}

/* ------- Article 카드 방향 인식 커버 (Works와 동일 — 오렌지 면이 진입 방향에서 슬라이드) ------- */
.article-list > li > a{position:relative; overflow:hidden;}
.article-list > li > a > *{position:relative; z-index:2;}
.article-list > li > a::after{
	content:""; position:absolute; inset:0; z-index:1;
	background-color:var(--main-color);
	visibility:hidden; transform:translate3d(0,-105%,0);
}
.article-list > li > a.in-top::after{visibility:visible; animation:coverInTop 0.35s ease forwards;}
.article-list > li > a.in-right::after{visibility:visible; animation:coverInRight 0.35s ease forwards;}
.article-list > li > a.in-bottom::after{visibility:visible; animation:coverInBottom 0.35s ease forwards;}
.article-list > li > a.in-left::after{visibility:visible; animation:coverInLeft 0.35s ease forwards;}
.article-list > li > a.out-top::after{visibility:visible; animation:coverOutTop 0.35s ease forwards;}
.article-list > li > a.out-right::after{visibility:visible; animation:coverOutRight 0.35s ease forwards;}
.article-list > li > a.out-bottom::after{visibility:visible; animation:coverOutBottom 0.35s ease forwards;}
.article-list > li > a.out-left::after{visibility:visible; animation:coverOutLeft 0.35s ease forwards;}
/* 픽셀검증 상태(.hover-on)는 정지 노출 */
.article-list > li.hover-on > a::after{visibility:visible; transform:none; animation:none;}

/* ------- Works 그리드 + 상세 More(Related Works) 방향 인식 커버 (2026-09-03 개편 — 사용자 지시)
   전 카드 공통: 오렌지 배경(.hover-bg)만 진입 방향에서 슬라이드 인 → 배경이 채워진 뒤 텍스트가 제자리에서 블러 인.
   이탈: 텍스트가 먼저 블러 아웃(base 0.3s) → 배경이 이탈 방향으로 지연 퇴장(out 애니 both — 지연 동안 채워진 상태 유지).
   대형(.tile.large) 텍스트는 시안대로 상시 노출 유지 — 배경만 동작 ------- */
.works-grid .tile > a,
.wv-more-list > li > a{overflow:hidden;}
/* 배경 슬라이드 인 */
.works-grid .tile > a.in-top .hover-bg,
.wv-more-list > li > a.in-top .hover-bg{visibility:visible; animation:coverInTop 0.35s ease forwards;}
.works-grid .tile > a.in-right .hover-bg,
.wv-more-list > li > a.in-right .hover-bg{visibility:visible; animation:coverInRight 0.35s ease forwards;}
.works-grid .tile > a.in-bottom .hover-bg,
.wv-more-list > li > a.in-bottom .hover-bg{visibility:visible; animation:coverInBottom 0.35s ease forwards;}
.works-grid .tile > a.in-left .hover-bg,
.wv-more-list > li > a.in-left .hover-bg{visibility:visible; animation:coverInLeft 0.35s ease forwards;}
/* 배경 지연 퇴장 — 텍스트 블러 아웃 뒤 빠져나감 */
.works-grid .tile > a.out-top .hover-bg,
.wv-more-list > li > a.out-top .hover-bg{visibility:visible; animation:coverOutTop 0.35s ease 0.22s both;}
.works-grid .tile > a.out-right .hover-bg,
.wv-more-list > li > a.out-right .hover-bg{visibility:visible; animation:coverOutRight 0.35s ease 0.22s both;}
.works-grid .tile > a.out-bottom .hover-bg,
.wv-more-list > li > a.out-bottom .hover-bg{visibility:visible; animation:coverOutBottom 0.35s ease 0.22s both;}
.works-grid .tile > a.out-left .hover-bg,
.wv-more-list > li > a.out-left .hover-bg{visibility:visible; animation:coverOutLeft 0.35s ease 0.22s both;}
/* 텍스트: 배경이 채워진 뒤 제자리 블러 인 (이탈 시에는 base 트랜지션 0.3s로 즉시 블러 아웃) */
.works-grid .tile > a[class*="in-"] .hover-text,
.wv-more-list > li > a[class*="in-"] .hover-text{opacity:1; filter:blur(0); transition:opacity 0.45s ease 0.26s, filter 0.45s ease 0.26s;}
/* 대형 카드 예외: 텍스트는 상시 노출·정지. 방향 블록보다 뒤에 두어 소스순서로 이김 */
.works-grid .tile.large > a .hover-text,
.works-grid .tile.large > a[class*="in-"] .hover-text,
.works-grid .tile.large > a[class*="out-"] .hover-text{visibility:visible; transform:none; animation:none; transition:none; opacity:1; filter:none;}
@keyframes coverInTop{from{transform:translate3d(0,-105%,0);}to{transform:translate3d(0,0,0);}}
@keyframes coverInRight{from{transform:translate3d(105%,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes coverInBottom{from{transform:translate3d(0,105%,0);}to{transform:translate3d(0,0,0);}}
@keyframes coverInLeft{from{transform:translate3d(-105%,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes coverOutTop{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-105%,0);}}
@keyframes coverOutRight{from{transform:translate3d(0,0,0);}to{transform:translate3d(105%,0,0);}}
@keyframes coverOutBottom{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,105%,0);}}
@keyframes coverOutLeft{from{transform:translate3d(0,0,0);}to{transform:translate3d(-105%,0,0);}}
/* 픽셀검증 상태 강제(.hover-on)는 방향 무관 정지 노출 (배경+텍스트) */
.works-grid .tile.hover-on .hover-bg,
.wv-more-list > li.hover-on .hover-bg{visibility:visible; transform:none; animation:none;}
.works-grid .tile.hover-on .hover-text,
.wv-more-list > li.hover-on .hover-text{visibility:visible; transform:none; animation:none; opacity:1; filter:none;}

/* 픽셀검증 상태 강제용 — 시안이 hover 상태로 그려진 Article 카드 */
.article-list > li.hover-on > a{background-color:var(--main-color);}


/* 버튼 공통효과 */
.cm-hover-effect{position: relative; overflow:hidden;}
.cm-hover-effect * {z-index:1;}
.cm-overlay{ position: absolute; overflow:hidden; z-index: 0; width:100%; height:100%; top:0; left:0; color:#fff; pointer-events: none; background: var(--main-color); -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); z-index:0;}

@-webkit-keyframes in_top {
 from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_top {
 from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}
@-webkit-keyframes in_right {
  from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes in_right {
 from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@-webkit-keyframes in_bottom {
  from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_bottom {
  from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}
@-webkit-keyframes in_left {
 from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes in_left {
  from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
@-webkit-keyframes out_top {
 from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes out_top {
 from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@-webkit-keyframes out_right {
 from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes out_right {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@-webkit-keyframes out_bottom {
  from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(100%);
    }
}
@keyframes out_bottom {
  from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(100%);
    }
}
@-webkit-keyframes out_left {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes out_left {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
 
/* in */
.in-top2 .cm-overlay{
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: in_top .3s ease forwards;
  -o-animation: in_top .3s ease forwards;
  animation: in_top .3s ease forwards;
}
.in-right2 .cm-overlay{
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: in_right .3s ease forwards;
  -o-animation: in_right .3s ease forwards;
  animation: in_right .3s ease forwards;
}
.in-bottom2 .cm-overlay{
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: in_bottom .3s ease forwards;
  -o-animation: in_bottom .3s ease forwards;
  animation: in_bottom .3s ease forwards;
}
.in-left2 .cm-overlay{
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: in_left .3s ease forwards;
  -o-animation: in_left .3s ease forwards;
  animation: in_left .3s ease forwards;
}
/* out */
.out-top2 .cm-overlay{
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: out_top .3s ease forwards;
  -o-animation: out_top .3s ease forwards;
  animation: out_top .3s ease forwards;
  margin-top:-1px;
}
.out-right2 .cm-overlay{
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: out_right .3s ease forwards;
  -o-animation: out_right .3s ease forwards;
  animation: out_right .3s ease forwards;
  margin-left:1px;
}
.out-bottom2 .cm-overlay{
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: out_bottom .3s ease forwards;
  -o-animation: out_bottom .3s ease forwards;
  animation: out_bottom .3s ease forwards;
  margin-top:1px;
}
.out-left2 .cm-overlay{
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: out_left .3s ease forwards;
  -o-animation: out_left .3s ease forwards;
  animation: out_left .3s ease forwards;
  margin-left:-1px;
}   
/* ******************  Works :: 관리자 연동 (_dev, 2026-08-28) ********************** */
/* 대표영상(비메오 background 모드) 커버 — 16:9 임베드가 컨테이너를 덮고 초과분만 시각 크롭 (원본 무손상, 재생바 없음) */
.thumb-video{position:absolute; top:0; left:0; right:0; bottom:0; display:block; overflow:hidden; background-color:#000; pointer-events:none;}
.thumb-video iframe{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:0;}
@supports (aspect-ratio:16/9){
	.thumb-video iframe{width:auto; height:auto; aspect-ratio:16/9; min-width:100%; min-height:100%;}
}
.works-grid .thumb.thumb-video{position:absolute;}	/* .thumb 기본 흐름 배치를 절대 배치로 전환 (타일 a가 relative+hidden) */
/* 갤러리 더 보기 이전 숨김 */
.wv-gallery-list li.g-hide{display:none;}
/* 목록 빈 상태 */
.works-empty{grid-column:1 / -1; padding:8rem 0; color:rgba(255,255,255,0.5); font-size:1.8rem; text-align:center;}



.ab-hero .ab-hero-bg,
.ab-hero .ab-waves-clip{position: fixed;}
/* 상단 커버(2026-09-30 사용자 지시): 페이지 맨 위 검정 → 투명 그라데이션 300px.
   .about-page 는 등장 시 subRise(40px 아래에서 올라오며 페이드인)라, 커버를 그 안(.ab-hero)에 두면 같이 내려가 있어 맨 위 틈으로 사이트 공통 배경영상(주황)이 비친다.
   → .about-page 바깥(#content)에 두어 처음부터 브라우저 상단 제자리에 있고, 스크롤하면 페이지와 함께 올라가 사라진다 */
#content:has(.about-page)::before{position:absolute; left:0; top:0; width:100%; height:30rem; background:linear-gradient(180deg, #000 0%, #000 16%, rgba(0,0,0,0.85) 42%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0) 100%); content:""; pointer-events:none; z-index:2;}
/* 나선형 배경 이미지 밝기 절반 (2026-09-30 사용자 지시 "너무 밝다"): opacity 0.7 → 0.35. cm_about.css 가 뒤에 로드되므로 특이성을 높여 덮음 */
.about-page .ab-hero .ab-waves{opacity:0.35;}

.ab-visual-scroll{position:relative; height:100vh; z-index:9; margin-top:-24rem; }
.ab-visual-stage{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100vh; overflow:hidden;}
.ab-visual-video{position:relative; width:min(34vw, 420px); aspect-ratio:16/9; overflow:hidden; background:#f8f6f0; will-change:width;}
.ab-visual-video-el{display:block; width:100%; height:100%; object-fit:cover; opacity:0;}
.ab-visual-txt{position:absolute; bottom:6.4rem; width:100%;  color:#000; text-align:left; opacity:0; pointer-events:none; will-change:opacity, color; transition:color 0.4s; z-index:2;}
.ab-visual-txt-inner{display: flex; align-items:center; justify-content:space-between; max-width:1720px; margin:auto; padding:0 6.4rem; box-sizing:border-box;}
.ab-visual-title{display:block; font-size:8rem; line-height:1; letter-spacing:-0.065em; font-weight:700;}
.ab-visual-caption{display:block; margin-top:.6em; font-size:2rem; font-weight:700; opacity:0.65;}
.ab-visual-num{display:block; font-size:12rem; font-weight:700;}
.ab-visual-progress{position:absolute; bottom:0; left:0; width:100%; height:6px; background:rgba(255,255,255,.1); opacity:1 !important; z-index:99;}
.ab-visual-progress i{display:block; width:0; height:100%; background:#f26153; transition-property:width; transition-timing-function:ease-in-out;}

.ab-how{padding-top:16rem;}

.ab-visual-sketch{position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;}
.ab-visual-sketch img{display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

@media(max-width:800px){
	.ab-how{margin-top:0; padding-top:10rem;}
	
	.ab-visual-video{width:55vw;}
	.ab-visual-txt{bottom:3rem;}
	.ab-visual-txt-inner{align-items: flex-start; flex-direction: column-reverse; padding:0 var(--area-padding)}
	.ab-visual-title{font-size:4rem;}
	.ab-visual-caption{font-size:1.6rem;}
	.ab-visual-num{font-size:2rem; margin-bottom:1rem;}
	
}