@charset "utf-8";
.pcbr{display:block;}
.tbbr{display:none;}
.mbbr{display:none;}
.dn{display:none;}

/* ========== GNB ========== */
#header{
	position:fixed;left:0;top:0;z-index:500;
	width:100%;
	pointer-events:none;
}
#header .gnb{pointer-events:auto;}
.gnbInner{
	display:flex;align-items:center;justify-content:space-between;
	width:100%;
	padding:0 50px;
	height:90px;
}
.gnb .logo{
	display:block;
	width:125px;height:16px;
	position:relative;
}
.gnb .logo img{
	display:block;width:100%;height:100%;
	object-fit:contain;
}
.gnb .logo .logoBlack{display:none;}
#header.is-scrolled .gnb .logo .logoWhite{display:none;}
#header.is-scrolled .gnb .logo .logoBlack{display:block;}

/* INVESTORS 토글 — 기본 닫힘, .is-open 시 메뉴·쉐브론 반전 */
.investors{position:relative;width:152px;}
.investorsBtn{
	display:flex;align-items:center;gap:8px;
	width:100%;
	padding:10px 13px 10px 16px;
	border:0;border-radius:300px;
	background:#041221;
	cursor:pointer;
}
.investorsBtn span{
	font-family:"Manrope",sans-serif;
	font-size:17px;font-weight:600;color:#fff;
	line-height:1.35;
}
.investorsBtn .chevron{
	display:block;width:22px;height:22px;
	transition:transform .25s;
}
.investorsBtn .chevron img{display:block;width:100%;height:100%;}
.investors.is-open .investorsBtn .chevron{transform:scaleY(-1);}
.investorsMenu{
	position:absolute;left:0;top:calc(100% + 8px);
	width:100%;
	padding:6px;
	border-radius:12px;
	background:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.investorsMenu ul li a{
	display:flex;align-items:center;justify-content:center;
	width:100%;
	padding:10px 13px 10px 16px;
	border-radius:12px;
	font-family:"Manrope",sans-serif;
	font-size:15px;font-weight:500;color:#000;
	line-height:1.35;
	transition:background .2s;
}
.investorsMenu ul li a:hover{
	background:#f6f6f6;
	color:#000;
}

/* ========== main visual ========== */
.mainVisual{
	position:relative;
	width:100%;height:100vh;
	overflow:hidden;
	background:#000;
}
.mainVisual .visualBg{
	position:absolute;inset:0;
}
.mainVisual .visualBg img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	opacity:.77;
}
.mainVisual .visualBg:after{
	content:"";
	position:absolute;inset:0;
	background:radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.35) 100%);
	pointer-events:none;
}
.mainVisual .visualTit{
	position:absolute;left:50%;top:50%;z-index:10;
	width:100%;
	text-align:center;
	color:#fff;
	transform:translate(-50%,-50%);
}
.mainVisual .visualTit .tit{
	font-family:"Manrope",sans-serif;
	font-size:78px;font-weight:700;color:#fff;
	line-height:1.15;
	text-transform:uppercase;
}
.mainVisual .visualTit .sub{
	margin-top:24px;
	font-family:"pretendard",sans-serif;
	font-size:22px;font-weight:500;color:#fff;
	line-height:1.5;
	opacity:.8;
}

/* ========== overview — Where AI Meets Impact ========== */
.mainOverview{
	display:flex;flex-direction:column;align-items:center;gap:100px;
	padding:160px 80px;
	background:#fff;
}
.mainOverview .impactTit{
	display:flex;flex-wrap:wrap;gap:35px;
	align-items:flex-start;justify-content:center;
	text-align:center
}
.mainOverview .impactRow{
	display:flex;align-items:center;gap:40px;justify-content:center;
	width:100%;
}
.mainOverview .impactRow .word{
	font-family:"Manrope",sans-serif;
	font-size:100px;font-weight:700;
	line-height:106px;
	color:#000;
	text-transform:uppercase;
}
.mainOverview .impactRow .pill{
	display:block;overflow:hidden;
	flex-shrink:0;
	width:316px;height:100px;
	border-radius:500px;
	background:#000;
}
.mainOverview .impactRow .pill img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	opacity:.8;
}
.mainOverview .desc{
	font-family:"pretendard",sans-serif;
	font-size:22px;font-weight:500;color:#000;
	line-height:1.5;
	text-align:center;
}

/* ========== Business ========== */
.mainBusiness{
	position:relative;z-index:10;
	padding:0 80px 120px;
}
.mainBusiness .secHead{}
.mainBusiness .secHead .label{
	font-family:"Manrope",sans-serif;
	font-size:18px;font-weight:500;color:#000;
	text-transform:uppercase;
	line-height:1;
}
.mainBusiness .secHead .tit{
	margin-top:20px;
	font-family:"pretendard",sans-serif;
	font-size:40px;font-weight:800;color:#000;
	line-height:1.35;
}
.bizList{
	display:flex;gap:24px;
	margin-top:80px;
}
.bizList > li{
	flex:1;min-width:0;
	height:620px;
	border-radius:30px;
	overflow:hidden;
}
.bizList > li > a{
	display:flex;flex-direction:column;justify-content:space-between;
	position:relative;
	width:100%;height:100%;
	padding:70px;
	color:#fff;
}
.bizList > li .bg{
	position:absolute;inset:0;z-index:0;
	background:#000;
}
.bizList > li .bg img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	opacity:.9;
}
.bizList > li .bg:after{
	content:"";
	position:absolute;inset:0;
	background:linear-gradient(180deg, #06090e 0%, rgba(0,0,0,0) 40%);
	pointer-events:none;
}
.bizList > li .con,
.bizList > li .arr{position:relative;z-index:1;}
.bizList > li .con .name{
	display:block;
	font-family:"pretendard",sans-serif;
	font-size:40px;font-weight:800;color:#fff;
	line-height:1.35;
}
.bizList > li .con .txt{
	margin-top:32px;
	font-family:"pretendard",sans-serif;
	font-size:18px;font-weight:500;color:#fff;
	line-height:1.5;
}
.bizList > li .arr{
	display:flex;align-items:center;justify-content:center;
	width:54px;height:54px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.8);
	background:transparent;
	transition:background .3s, border-color .3s;
	opacity:0;
}
.bizList > li .arr img{
	display:block;width:22px;height:22px;
}
.bizList > li .arr .arrBlack{display:none;}
.bizList > li .arr .arrWhite{display:block;}
/* hover — Figma 첫 카드 흰 버튼 상태 */
.bizList > li > a:hover .arr{
	background:#fff;
	border-color:#fff;
}
.bizList > li > a:hover .arr .arrWhite{display:none;}
.bizList > li > a:hover .arr .arrBlack{display:block;}

/* ========== core visual wrap ========== */
.mainCore{
	position:relative;
	overflow:hidden;
}
.mainCore .coreSpacer{height:40vh;}
.mainCore .coreBg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/main/core_visual.png) no-repeat center bottom / cover;	
}
.mainCore .coreBg img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	object-position:center top;
}
.mainCore .coreBg:after{
	content:"";
	position:absolute;left:0;bottom:0;
	width:100%;height:30%;
	background:linear-gradient(180deg, rgba(4,18,33,0) 0%, #041221 55%);
}



/* slogan marquee — 우측→좌측 무한 루프(끊김·점프 없음) */
.sloganMarquee{
	position:relative;z-index:10;
	overflow:hidden;
	padding:80px 0 60px;
	white-space:nowrap;
}
.sloganMarquee .track{
	display:inline-flex;align-items:center;
	width:max-content;
	animation:sloganScroll 40s linear infinite;
	will-change:transform;
}
.sloganMarquee .track span{
	display:inline-block;
	padding-right:80px;
	font-family:"Manrope",sans-serif;
	font-size:220px;font-weight:800;
	color:#c1c2ca;
	line-height:1.1;
	text-transform:uppercase;
	letter-spacing:-0.02em;
}
@keyframes sloganScroll{
	0%{transform:translateX(0);}
	100%{transform:translateX(-50%);}
}

/* ========== SUSTAINABILITY ========== */
.mainSustainability{
	position:relative;z-index:2;
	padding:200px 80px 140px;
	margin-top:-100px;
	background:#041221 url(/images/main/sust_visual.png) no-repeat right bottom / 90%;	
}
.mainSustainability .secHead{}
.mainSustainability .secHead .label{
	font-family:"Manrope",sans-serif;
	font-size:18px;font-weight:500;color:#fff;
	text-transform:uppercase;
	line-height:1;
}
.mainSustainability .secHead .tit{
	margin-top:20px;
	font-family:"pretendard",sans-serif;
	font-size:40px;font-weight:800;color:#fff;
	line-height:1.35;
}
.sustList{
	display:flex;gap:24px;
	margin-top:80px;
}
.sustList > li{
	flex:1;min-width:0;
	border-radius:30px;
	overflow:hidden;
}
.sustList > li > a{
	display:flex;flex-direction:column;align-items:center;
	position:relative;
	width:100%;min-height:506px;
	padding:100px 50px 70px;
	border-radius:30px;
	background:#2b4b7c;
	text-align:center;
	overflow:hidden;
	transition:background .35s;
}
.sustList > li .hoverBg{
	position:absolute;inset:0;z-index:0;
	opacity:0;
	transition:opacity .35s;
}
.sustList > li .hoverBg img{
	display:block;width:100%;height:100%;
	object-fit:cover;
}
.sustList > li .icon,
.sustList > li .name,
.sustList > li .txt{position:relative;z-index:1;}
.sustList > li .icon{
	display:flex;align-items:center;justify-content:center;
	width:130px;height:130px;
}
.sustList > li .icon img{
	display:block;max-width:100%;max-height:100%;
}
.sustList > li .name{
	display:block;
	margin-top:80px;
	font-family:"pretendard",sans-serif;
	font-size:32px;font-weight:800;color:#fff;
	line-height:38px;
	letter-spacing:0.02em;
}
.sustList > li .txt{
	margin-top:30px;
	font-family:"pretendard",sans-serif;
	font-size:18px;font-weight:500;color:rgba(255,255,255,.7);
	line-height:1.6;
}
/* hover — Figma 2번째 카드(이미지 배경) 상태. 공통 배경은 2번째에만 마크업 */
.sustList > li > a:hover .hoverBg{opacity:1;}
.sustList > li:nth-child(2) > a .hoverBg{opacity:0;}
.sustList > li:nth-child(2) > a:hover .hoverBg{opacity:1;}
/* 2번째 외 — hover 시에도 동일 톤 유지(배경색만 살짝), 이미지는 2번에만 */
.sustList > li:not(:nth-child(2)) > a:hover{
	background:#3a6299;
}

/* ========== footer ========== */
.footerA{
	background:#f6f6f6;
	padding:60px 80px;
}
.footerInner{
	display:flex;flex-direction:column;align-items:center;gap:32px;
}
.footerLogo{
	display:block;width:125px;height:16px;
	object-fit:contain;
}
.footerLine{
	display:block !important;
	width:100%;height:0;
	border:0;border-top:1px solid #ddd;
	margin:0;
}
.footerCopy{
	font-family:"Manrope",sans-serif;
	font-size:16px;font-weight:500;color:#666;
	line-height:19.5px;
}