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

#contents {
	background: #0d1724;
}

.moreBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 160px;
	height: 60px;
	border-radius: 60px;
	border: 1px solid #fff;
	opacity: 0.6;
}
.moreBtn .txt {
}
.moreBtn .txt span {
	display: inline-block;
	font-family: "Alexandria";
	font-size: 14px;
	color: #fff;
}
.moreBtn:hover .txt span {
	animation: bounceUp 0.4s ease forwards;
}
.moreBtn:hover .txt span:nth-child(1) {
	animation-delay: 0s;
}
.moreBtn:hover .txt span:nth-child(2) {
	animation-delay: 0.03s;
}
.moreBtn:hover .txt span:nth-child(3) {
	animation-delay: 0.06s;
}
.moreBtn:hover .txt span:nth-child(4) {
	animation-delay: 0.09s;
}
.moreBtn:hover .txt span:nth-child(5) {
	animation-delay: 0.12s;
}
.moreBtn:hover .txt span:nth-child(6) {
	animation-delay: 0.15s;
}
.moreBtn:hover .txt span:nth-child(7) {
	animation-delay: 0.18s;
}
.moreBtn:hover .txt span:nth-child(8) {
	animation-delay: 0.21s;
}
.moreBtn:hover .txt span:nth-child(9) {
	animation-delay: 0.24s;
}
@keyframes bounceUp {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
	100% {
		transform: translateY(0);
	}
}
.moreBtn i {
	display: block;
	width: 13px;
	height: 11px;
	background: url(/images/main/morebtn_arr.png) no-repeat center / contain;
}

.innerwrap {
	width: 92%;
	margin: 0 auto;
}

.sec1 {
	position: relative;
	padding: 210px 0 360px;
}
.sec1 .lineWrap {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
}
.sec1 .lineWrap .line {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}
.sec1 .lineWrap .line1 {
	left: 4%;
}
.sec1 .lineWrap .line2 {
	left: 27%;
}
.sec1 .lineWrap .line3 {
	left: 50%;
}
.sec1 .lineWrap .line4 {
	left: 73%;
}
.sec1 .lineWrap .line5 {
	left: 96%;
}
.sec1 .slgWrap {
	position: relative;
	z-index: 2;
}
.sec1 .slgWrap p {
	overflow: hidden;
}
.sec1 .slgWrap p span {
	display: inline-block;
	font-family: "Alexandria";
	font-size: var(--fz-86);
	line-height: 1.2em;
	color: #fff;
}
.sec1 .visual {
	position: relative;
	width: 100%;
	height: 700px;
	margin-top: 50px;
	overflow: hidden;
}
.sec1 .visual::before {
	content: "";
	position: absolute;
	right: 50%;
	top: 0;
	width: 50%;
	height: 100%;
	background: #0d1724;
	z-index: 2;
}
.sec1 .visual.in-view:before {
	right: 100%;
	transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sec1 .visual::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 100%;
	background: #0d1724;
	z-index: 2;
}
.sec1 .visual.in-view:after {
	left: 100%;
	transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sec1 .visual .swiper-slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.sec1 .visual .swiper-slide .slide-bgimg {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.sec1 .visual .swiper-slide .slide-bgimg img {
	width: 110%;
	height: 100%;
	object-fit: cover;
}
.sec1 .visual .ctr {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	z-index: 10;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet {
	margin: 0 10px;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	background: unset;
	opacity: 1;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet-active {
	background-color: #fff;
}
.sec1 .visual .ctr .vprev {
	display: block;
	width: 12px;
	height: 22px;
	background: url(/images/main/sec1_prev.png) no-repeat center / contain;
	margin-right: 30px;
	cursor: pointer;
}
.sec1 .visual .ctr .vnext {
	display: block;
	width: 12px;
	height: 22px;
	background: url(/images/main/sec1_next.png) no-repeat center / contain;
	margin-left: 30px;
	cursor: pointer;
}
.sec1 .svgTxt {
	margin: 200px auto 90px;
	text-align: center;
}
.sec1 .svgTxt svg {
	width: 100%;
}
.draw-text path {
	/* 1. 처음엔 투명한 면, 하얀색 선으로 설정 */
	stroke: white;
	stroke-width: 1px;

	/* 2. 선을 점선으로 만들고, 그 간격을 엄청 길게 설정 (패스 길이보다 길게) */
	stroke-dasharray: 4000;
	stroke-dashoffset: 4000;

	/* 3. 선이 그려지는 애니메이션과 면이 채워지는 애니메이션 동시 적용 */
}

.sec1 .svgTxt.in-view .draw-text path {
	animation:
		drawPath 4s ease-in-out forwards,
		fillColor 1s 2.5s ease-in-out forwards; /* 2.5초 뒤에 색 채우기 시작 */
}

/* 선이 그려지는 키프레임 */
@keyframes drawPath {
	to {
		stroke-dashoffset: 0;
	}
}

/* 색이 채워지는 키프레임 */
.sec1 .boxWrap {
	width: 100%;
	height: 400px;
	background: #0a121d;
	display: flex;
}
.sec1 .boxWrap .box {
	width: 25%;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sec1 .boxWrap .box .icon {
}
.sec1 .boxWrap .box .txtWrap {
}
.sec1 .boxWrap .box .txtWrap .odometer {
	font-size: var(--fz-70);
	font-weight: 500;
	color: #fff;
}
.sec1 .boxWrap .box .txtWrap .exp {
	font-size: var(--fz-18);
	line-height: 1.5em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 15px;
}

.sec2 {
}
.sec2 .innerwrap {
	position: relative;
}
.sec2 .secTit {
	position: absolute;
	left: 0;
	top: -100px;
	font-family: var(--en-font);
	font-size: var(--fz-50);
	color: #fff;
}
.sec2 .conWrap {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sec2 .conWrap .con {
	width: 100%;
	padding: 0 4%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sec2 .conWrap .con1,
.sec2 .conWrap .con3 {
	background: #0a121d;
}
.sec2 .conWrap .con .inner {
	width: 100%;
	height: 460px;
	display: flex;
	opacity: 0.1;
}
.sec2 .conWrap .con .inner .num {
	width: 18%;
	padding-top: 60px;
	font-size: clamp(75px, 8vw, 140px);
	font-weight: 600;
	line-height: 1em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
}
.sec2 .conWrap .con .inner .txts {
	width: 42%;
	padding: 60px 4%;
}
.sec2 .conWrap .con .inner .txts .tit {
	font-size: var(--fz-36);
	font-weight: 700;
	color: #fff;
}
.sec2 .conWrap .con .inner .txts .exp {
	font-size: var(--fz-18);
	line-height: 1.5em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 20px;
}
.sec2 .conWrap .con .inner .img {
	width: 40%;
	height: 100%;
}
.sec2 .conWrap .con .inner .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec3 {
	position: relative;
	width: 100%;
	padding: 220px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
}
.sec3 .line1 {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 50%;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}
.sec3 .line2 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}
.sec3 .line3 {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	transform-origin: left;
	width: 50%;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}
.sec3 .line4 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	width: 70vw;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	/* 오른쪽 반만 보이게 */
	clip-path: inset(0 0 0 50%);
}
.sec3 .txts {
	position: relative;
	z-index: 10;
}
.sec3 .txts .txt {
}
.sec3 .txts .txt span {
	font-family: var(--en-font);
	font-size: clamp(80px, 8vw, 160px);
	line-height: 1.1em;
	color: #c1c2ca;
}

.sec4 {
	position: relative;
	padding: 230px 0;
	background: #0a121d;
}
.sec4 .innerwrap {
	position: relative;
	z-index: 2;
}
.sec4 .lineWrap .line {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}
.sec4 .lineWrap .line1 {
	left: 4%;
}
.sec4 .lineWrap .line2 {
	left: 27%;
}
.sec4 .lineWrap .line3 {
	left: 50%;
}
.sec4 .lineWrap .line4 {
	left: 73%;
}
.sec4 .lineWrap .line5 {
	left: 96%;
}
.sec4 .titWrap {
	display: flex;
	justify-content: space-between;
}
.sec4 .titWrap .secTit {
	font-family: var(--en-font);
	font-size: var(--fz-50);
	color: #fff;
	margin-bottom: 60px;
}
.sec4 .conWrap {
	position: relative;
	width: 100%;
}
.sec4 .conWrap .con {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}

.sec4 .conWrap .con2 {
	flex-direction: row-reverse;
}
.sec4 .conWrap .con3 {
	align-items: flex-end;
}
.sec4 .conWrap .con .item {
	transform-style: preserve-3d;
}
.sec4 .conWrap .con .item .thumb {
	clip-path: inset(10%);
}
.sec4 .conWrap .con .item .name {
	font-size: var(--fz-30);
	font-weight: 500;
	color: #fff;
	margin-top: 20px;
}
.sec4 .conWrap .con .item1 {
	width: 37%;
	max-width: 602px;
}
.sec4 .conWrap .con .item2 {
	width: 49%;
	max-width: 730px;
}
.sec4 .conWrap .con .item3 {
	width: 53%;
	max-width: 1080px;
}
.sec4 .conWrap .con .item4 {
	width: 37%;
	max-width: 602px;
}
.sec4 .conWrap .con .item5 {
	width: 49%;
	max-width: 730px;
}
.sec4 .conWrap .con + .con {
	margin-top: 120px;
}
.sec4 .conWrap .slgWrap {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.contactSec {
	position: relative;
	padding: 200px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.contactSec .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/contact_bg.jpg) no-repeat center / cover;
}
.contactSec .txtWrap {
	position: relative;
}
.contactSec .txtWrap p {
	font-size: var(--fz-50);
	font-weight: 600;
	line-height: 1.4em;
	color: #fff;
	text-align: center;
}
.contactSec .txtWrap .moreBtn {
	margin: 40px auto 0;
}

/* 애니메이션 */
@keyframes showImg {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}
@keyframes showImg2 {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	0% {
		clip-path: polygon(0 0, 28% 0, 58% 100%, 0 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}
@keyframes showImg3 {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}
@keyframes opacityAni {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes scaleAni {
	0% {
		opacity: 0;
		transform: scale(1.3);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes scaleAni2 {
	0% {
		opacity: 0.5;
		transform: scale(1.3);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes fadeUpAni {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeLeftAni {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeRightAni {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes imgMotion {
	0% {
		clip-path: inset(50%);
		opacity: 0;
	}
	100% {
		clip-path: inset(0);
		opacity: 1;
	}
}
@keyframes imgMotion2 {
	100% {
		clip-path: inset(0);
	}
}

.fadeUp {
	opacity: 0;
}
.fadeLeft {
	opacity: 0;
}
.fadeRight {
	opacity: 0;
}
.showImg {
	opacity: 0;
}
.clipImg {
	opacity: 0;
}
.opacity {
	opacity: 0;
}

.showImg.in-view {
	animation-name: showImg;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 2s;
	opacity: 1;
}
.showImg2.in-view {
	animation-name: showImg2;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 2s;
	opacity: 1;
}
.showImg3.in-view {
	animation-name: showImg3;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 1s;
	opacity: 1;
}
.opacity.in-view {
	animation-name: opacityAni;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 2s;
	opacity: 1;
}
.fadeUp.in-view {
	animation-name: fadeUpAni;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 1s;
	opacity: 1;
}
.fadeLeft.in-view {
	animation-name: fadeLeftAni;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 1.4s;
	opacity: 1;
}
.fadeRight.in-view {
	animation-name: fadeRightAni;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 1.4s;
	opacity: 1;
}
.scaleAni.in-view {
	animation-name: scaleAni;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 2s;
}
.scaleAni2.in-view {
	animation-name: scaleAni2;
	animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);
	animation-duration: 1.5s;
}
.clipImg.in-view {
	animation-name: imgMotion;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-delay: 0.1s;
	opacity: 0;
}
.clipImg2.in-view {
	animation-name: imgMotion2;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
.sec1 .lineWrap .line {
	height: 0;
}
.sec1 .lineWrap.in-view .line {
	height: 100%;
}
.sec1 .lineWrap .line:nth-child(1) {
	transition: all 5s 0.2s;
}
.sec1 .lineWrap .line:nth-child(2) {
	transition: all 5s 0.6s;
}
.sec1 .lineWrap .line:nth-child(3) {
	transition: all 5s 1s;
}
.sec1 .lineWrap .line:nth-child(4) {
	transition: all 5s 0.4s;
}
.sec1 .lineWrap .line:nth-child(5) {
	transition: all 5s 0.8s;
}

.sec1 .slgWrap p span {
	display: inline-block;
	transform: translateY(30%) scale(0.85);
	opacity: 0;
	transition: all 1s ease;
}

.sec1 .slgWrap.in-view p span {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.sec3 .line1 {
	width: 0;
}
.sec3.in-view .line1 {
	width: 50%;
	transition: all 3s;
}
.sec3 .line2 {
	height: 0;
}
.sec3.in-view .line2 {
	height: 100%;
	transition: all 3s;
}
.sec3 .line3 {
	width: 0;
}
.sec3.in-view .line3 {
	width: 50%;
	transition: all 4s;
}
.sec3 .line4 {
	transform: translateY(-50%) rotate(0deg);
}
.sec3.in-view .line4 {
	transform: translateY(-50%) rotate(180deg);
	transition: all 4s;
}

.sec3 .txts .txt span {
	letter-spacing: -10px;
	opacity: 0;
}
.sec3 .txts .txt.in-view span {
	letter-spacing: 0px;
	opacity: 1;
	transition: all 1.4s;
}
.sec3 .txts .txt:last-child.in-view span {
	transition: all 1.4s 0.4s;
}

.contactSec .txtWrap p {
	overflow: hidden;
}
.contactSec .txtWrap p span {
	display: inline-block;
	transform: translateY(100%);
	transition: all 1.2s;
}
.contactSec .txtWrap p:nth-child(2) span {
	transition: all 1.2s 0.4s;
}
.contactSec .txtWrap.in-view p span {
	transform: translateY(0);
}
.contactSec .bg {
	transform: scale(1.2);
}
.contactSec.in-view .bg {
	transform: scale(1);
	transition: all 2s;
}