@charset "utf-8";

/* ==========================================================================
   AORES — Main (EN)
   [삭제] .elementor-1934 .elementor-element... — 대상 요소 없음
   [삭제] .main_sct_wrap { overflow:hidden } — Elementor 래퍼. 존재하지 않음
   [삭제] body { overflow-x:visible } — 위 규칙을 되돌리려던 것. 불필요
   [삭제] !important 전부 — Astra/Elementor 를 dequeue 해서 싸울 상대가 없음
   ========================================================================== */

/* 메인은 헤더 아래 경계선 없음 (.ast-primary-header-bar 규칙 대체) */
.en-header {
	border-bottom: none;
}

/* en-common.css 의 .cont_wrap 을 메인용으로 덮어씁니다 */
.cont_wrap.main_en {
	min-height: 100vh;
	margin: 8.6rem auto 0; /* 86px — .main_sct_1 의 top 과 동일 */
}

/* --------------------------------------------------------------------------
   main_sct_1 — 고정 히어로 + 스크롤에 따라 좁아지는 영상
   -------------------------------------------------------------------------- */
.main_sct_1 {
	position: fixed;
	top: calc(86px + var(--admin-offset));
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - var(--gutter) * 2);
	height: 700px;
	transition: all 0.3s linear;
}
.main_sct_1.white::before {
	content: '';
	position: absolute;
	inset: -1px;
	background: var(--color-white);
	z-index: 4;
}

.main_sct_1 .txt {
	position: absolute;
	top: 8rem;
	left: 6rem;
	z-index: 3;
}
.main_sct_1 .txt li {
	display: block;
	overflow: hidden;
}
.main_sct_1 .txt li p {
	margin: 0;
	font-family: var(--font-poppins);
	font-size: 8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-white);
	opacity: 0;
	transform: translateY(100px);
	transition: all 0.5s linear;
}
.main_sct_1 .txt li:nth-child(2) p {
	transition-delay: 0.05s;
}
.main_sct_1 .txt li p span {
	color: var(--point-color-1);
}

.main_sct_1 video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: unset;
	width: 150vw;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	transition: width 0.35s linear;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   main_sct_2 — 타임라인 + Lottie 지도
   -------------------------------------------------------------------------- */
.main_sct_2 {
	position: relative;
	margin-top: 150vh; /* 고정된 main_sct_1 위로 덮으며 올라오는 구간 */
	padding-top: 10rem;
	background: var(--color-white);
}
.main_sct_2 .flex_between {
	justify-content: center;
}

.main_sct_2 .flex_between .left_box {
	position: relative;
	width: 30%;
}

.main_sct_2 .flex_between .left_box .title_box {
	position: sticky;
	top: 8rem;
	z-index: 3;
	margin-bottom: 7rem;
	padding: 5rem 0;
	background: linear-gradient(to bottom, var(--color-white) 80%, transparent);
}
.main_sct_2 .flex_between .left_box .sct_title {
	position: relative;
	margin-bottom: 0.5rem;
	font-size: 5rem;
	font-weight: 700;
}
.main_sct_2 .flex_between .left_box .sct_title::after {
	content: '';
	position: absolute;
	bottom: 2rem;
	width: 8px;
	height: 8px;
	background: var(--point-color-2);
	border-radius: 50%;
}
.main_sct_2 .flex_between .left_box .sct_title_en {
	margin: 0;
	font-family: var(--font-poppins);
	font-size: 2.4rem;
	font-weight: 600;
}

.main_sct_2 .flex_between .left_box .sticky_box {
	margin: 3rem 0 0;
	padding-left: 0;
	scroll-behavior: smooth;
}
.main_sct_2 .flex_between .left_box .sticky_box li {
	margin-bottom: 20rem;
	opacity: 0;
	transform: translateY(80px);
	transform-origin: left;
	transition: all 1.2s linear;
}
.main_sct_2 .flex_between .left_box .sticky_box li.active {
	opacity: 1;
	transform: translateY(0) scale(1.15);
}
.main_sct_2 .flex_between .left_box .sticky_box li:last-child {
	margin-bottom: 0;
}

/* ⚠️ 원본이 1.8em(=28.8px) 입니다. 1440px 이하에서는 1.6rem(=16px) 으로 떨어지는데
   이 낙차를 보면 1.8rem 오타일 가능성이 높습니다. 일단 원본대로 뒀습니다. */
.main_sct_2 .flex_between .left_box .sticky_box li .year {
	font-size: 1.8em;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.7);
}
.main_sct_2 .flex_between .left_box .sticky_box li .goal {
	margin: 0;
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--point-color-2);
}

.main_sct_2 .flex_between .right_box {
	position: sticky;
	top: 12rem;
	width: 61%;
	height: calc(100vh - 300px);
}
.main_sct_2 .flex_between .right_box #lottie_map {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   main_sct_3 — 중앙 텍스트 + difference 블렌드 이미지
   [삭제] .img_box:before { content:""; clear:both } — 인라인 의사요소라
          clear 가 동작하지 않는 죽은 코드. .main_sct_3 높이가 350vh 고정이라
          플로트 해제도 필요 없습니다.
   -------------------------------------------------------------------------- */
.main_sct_3 {
	position: relative;
	height: 350vh;
	padding: 10rem 0 30rem;
	background: var(--color-white);
}

.main_sct_3 .txt_box {
	position: sticky;
	top: 30rem;
	margin-top: 20rem;
	text-align: center;
	opacity: 0;
	transition: all 0.15s linear;
}
.main_sct_3 .txt_box.aos-animate {
	opacity: 1;
}
.main_sct_3 .txt_box > li {
	font-family: var(--font-poppins);
	font-size: 9.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.main_sct_3 .img_box {
	position: relative;
	z-index: 1;
	mix-blend-mode: difference;
}
.main_sct_3 .img_box li {
	width: 600px;
	height: 400px;
	background: url(/wp-content/uploads/2025/01/img_sct_3_1.jpg) no-repeat center center / cover;
	border-radius: 10px;
	transform: scale(0);
}
.main_sct_3 .img_box li.active {
	animation: pop 0.6s 0.15s ease-in-out forwards;
}
.main_sct_3 .img_box li:nth-child(2) {
	float: right;
	margin-top: 30rem;
	background: url(/wp-content/uploads/2025/01/img_sct_3_2.jpg) no-repeat center center / 120%;
}
.main_sct_3 .img_box li:nth-child(3) {
	margin-top: 120rem;
	background: url(/wp-content/uploads/2025/01/img_sct_3_3.jpg) no-repeat center center / 140%;
}

@keyframes pop {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* --------------------------------------------------------------------------
   main_sct_4 — 슬로건 + 파트너 로고 + 패럴랙스 배경
   -------------------------------------------------------------------------- */
.main_sct_4 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 6rem;
	padding: 8rem 6rem;
	background: #060606;
	border-radius: 20px;
	overflow: hidden;
}

.main_sct_4 .slogan_box {
	margin: 0;
	padding-left: 0;
}
.main_sct_4 .slogan_box li.kor {
	position: relative;
	margin-bottom: 0;
	font-size: 5rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-white);
}
.main_sct_4 .slogan_box li.kor::after {
	content: '';
	position: absolute;
	bottom: 1rem;
	width: 8px;
	height: 8px;
	background: var(--point-color-2);
	border-radius: 50%;
}
.main_sct_4 .slogan_box li.eng {
	margin: 1rem 0 0;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-white);
}

.main_sct_4 .partner_box {
	width: 60%;
	display: flex;
	align-items: center;
	gap: 0 4rem;
}
.main_sct_4 .partner_box > li {
	position: relative;
	width: calc(50% - 2rem);
	height: 250px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}
.main_sct_4 .partner_box > li img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 110px;
	width: auto;
}

.main_sct_4 img.upmove {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	width: calc(100% + 10rem);
	height: calc(100% + 25rem);
	max-width: unset;
	transform: translateX(-50%);
	object-fit: cover;
	transition: all 0.5s linear;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media all and (max-width: 1660px) {
	.main_sct_2 .flex_between .left_box {
		flex-shrink: 0;
	}
	.main_sct_2 .flex_between .left_box .sct_title {
		font-size: 4rem;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li .year {
		font-size: 1.6rem;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li .goal {
		font-size: 2.4rem;
	}

	.main_sct_3 .txt_box > li {
		font-size: 8rem;
	}
	.main_sct_3 .img_box li {
		width: 500px;
		height: 300px;
	}

	.main_sct_4 .slogan_box li.kor {
		font-size: 4rem;
	}
}

@media all and (max-width: 1440px) {
	.main_sct_4 {
		flex-direction: column;
		gap: 2rem 0;
	}
	.main_sct_4 .partner_box {
		width: 100%;
		padding: 0;
	}
}

@media all and (max-width: 1240px) {
	.main_sct_1 {
		height: 600px;
	}
	.main_sct_1 .txt li p {
		font-size: 7rem;
	}

	.main_sct_2 .flex_between .left_box {
		width: 100%;
	}
	.main_sct_2 .flex_between .left_box .sct_title {
		font-size: 6rem;
	}
	.main_sct_2 .flex_between .left_box .sct_title br {
		display: none;
	}
	.main_sct_2 .flex_between .left_box .title_box {
		text-align: center;
	}
	.main_sct_2 .flex_between .left_box .sticky_box {
		text-align: center;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li {
		margin-bottom: 32rem;
		transform-origin: center;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li.active {
		transform: translateY(0) scale(1.25);
	}
	.main_sct_2 .flex_between .right_box {
		width: 100%;
		margin-left: -100%;
		flex-shrink: 0;
		top: 24rem;
		opacity: 0.35;
	}

	.main_sct_3 .txt_box > li {
		font-size: 6.2vw;
	}
	.main_sct_3 .img_box li {
		width: 400px;
		height: 250px;
	}
}

@media all and (max-width: 1024px) {
	.main_sct_1 {
		width: 100%;
	}
	.main_sct_1 video {
		border-radius: 0;
	}

	.main_sct_2::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		height: 100%;
		background: var(--color-white);
	}
}

@media all and (max-width: 768px) {
	.main_sct_1 {
		height: 400px;
	}
	.main_sct_1 .txt {
		left: 4rem;
		padding: 0;
	}
	.main_sct_1 .txt li p {
		font-size: 5rem;
	}

	.main_sct_2 .flex_between .left_box .sct_title {
		font-size: 4rem;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li:last-child {
		margin-bottom: 20rem;
	}
	.main_sct_2 .flex_between .right_box {
		top: 10rem;
	}

	.main_sct_3 .img_box li {
		width: 300px;
		height: 200px;
	}
	.main_sct_3 .img_box li:nth-child(2) {
		margin-top: 30rem;
	}
	.main_sct_3 .img_box li:nth-child(3) {
		margin-top: 80rem;
	}

	.main_sct_4 .slogan_box li.kor {
		font-size: 3.2rem;
	}
	.main_sct_4 .partner_box {
		flex-direction: column;
		gap: 4rem 0;
	}
	.main_sct_4 .partner_box > li {
		width: 100%;
		height: 200px;
	}
	.main_sct_4 .partner_box > li img {
		width: 50%;
		height: auto;
	}
}

@media all and (max-width: 480px) {
	.main_sct_1 .txt li p {
		font-size: 4rem;
	}

	.main_sct_2 .flex_between .left_box .sct_title {
		font-size: 3rem;
	}
	.main_sct_2 .flex_between .left_box .sct_title br {
		display: block;
	}
	.main_sct_2 .flex_between .left_box .sct_title::after {
		bottom: 1rem;
		width: 6px;
		height: 6px;
	}
	.main_sct_2 .flex_between .left_box .sct_title_en {
		font-size: 1.8rem;
	}
	.main_sct_2 .flex_between .left_box .sticky_box li.active {
		transform: translateY(0) scale(1.05);
	}
	.main_sct_2 .flex_between .right_box {
		top: 15rem;
	}

	.main_sct_3 {
		height: 300vh;
	}
	.main_sct_3 .img_box li {
		width: 250px;
		height: 180px;
	}

	.main_sct_4 {
		padding: 6rem 2rem;
	}
	.main_sct_4 .slogan_box li.kor {
		font-size: 3rem;
	}
	.main_sct_4 .slogan_box li.kor::after {
		bottom: 0.8rem;
		width: 6px;
		height: 6px;
	}
	.main_sct_4 .slogan_box li.kor br {
		display: none;
	}
}