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


#wrap{overflow: hidden;}
#contents{margin-bottom: 80px;}

.innerwrap{
	position: relative;
	z-index: 1;
	width: 92%;
	max-width: 1760px;
	margin: 0 auto;
}


.moreBtn{
	position: relative;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 70px;
	border-radius: 70px;
	background: #fff
}
.moreBtn:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 70px;
	background: #0081c8;
	transform: translateX(-100%);
	transition: all 0.3s;
}
.moreBtn span{
	position: relative;
	z-index: 2;
	font-family: "Poppins";
	font-size: 14px;
	color: #000;
	transition: all 0.3s;
}
.moreBtn i{
	position: relative;
	z-index: 2;
	display: block;
	width: 10px;
	height: 10px;
	background: url(/images/main/moreBtn_arr.png) no-repeat center / contain;
	margin-left: 11px;
	transition: all 0.3s;
}
.moreBtn:hover:after{
	transform: translateX(0);
}
.moreBtn:hover span{
	color: #fff;
}
.moreBtn:hover i{
	background: url(/images/main/moreBtn_arr_wh.png) no-repeat center / contain;
	transform: rotate(45deg);
}



/* visual */
.visual{
	overflow:hidden;
	position:relative;
	width:100%; height: 100vh;
	border-radius: 0 0 0 185px;
}
.visual .swiper-wrapper{width:100%;height:100%;}
.visual .swiper-slide{
	position:relative;
	width:100%;height:100%;
}
.visual .swiper-slide .bg{
	position:absolute;left:0%;top:0%;z-index:-1;
	width:100%;height:100%;
	transform:scale(1.1);
	transition:all 4s;
}
.visual .swiper-slide-active .bg{transform:scale(1);}
.visual .swiper-slide.v1 .bg{background:url(/images/main/main_visual1.jpg) no-repeat center;background-size:cover;}
.visual .swiper-slide.v2 .bg{background:url(/images/main/main_visual1.jpg) no-repeat center;background-size:cover;}
.visual .swiper-slide.v3 .bg{background:url(/images/main/main_visual1.jpg) no-repeat center;background-size:cover;}


.visual .txtwrap{
	position:absolute;left:50%;bottom:0%;z-index:10;
	transform: translateX(-50%);
	width:92%;
	max-width: 1760px;
	padding-bottom:200px;
}


.visual .txtwrap .tit h2, .visual .txtwrap .tit h3{
	overflow: hidden;
}
.visual .txtwrap .tit h2 span, .visual .txtwrap .tit h3 span{
	font-family: "Poppins";
	display: inline-block;
	font-size: min(5vw, 90px);
	font-weight: 500;
	line-height: 1.3em;
	color: #fff;
}



.visual .ctr{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 90px;
	width:92%;
	max-width: 1760px;
	display:flex;align-items:center;
	z-index:10;
	box-sizing:border-box;
}
.visual .ctr:after{
	content: "";
	position: absolute;
	left: 0;
	top: -80px;
	width: 100%;
	height: 1px;
	background: #fff;
} 

.visual .ctr .vprev {
	width: 10px;
	height: 17px;
	background: url(/images/main/vprev.png) no-repeat;
	cursor: pointer;
}
.visual .ctr .vnext {
	width: 10px;
	height: 17px;
	background: url(/images/main/vnext.png) no-repeat;
	cursor: pointer;
}

.visual .vpaging {
	position: static;
	z-index: 100;
	margin: 0 50px;
	display: flex;
	align-items: center;
}
.visual .ctr .vpaging span{
	opacity:1;
	display: inline-block;
	position:relative;
	width:8px;height:8px;
	border-radius: 50%;
	margin:0 5px;
	background:0;border:1px solid #fff;
	border-radius: 50%;
}
.visual .ctr .vpaging span.swiper-pagination-bullet-active{
	background:#fff;
}

.visual .scroll{
	overflow:hidden;
	position:absolute;right:4%;bottom:0;z-index:10;
	width:40px;height:140px;
	box-shadow:-1px 0 0 inset rgba(255,255,255,0.4);
}
.visual .scroll .txt{
	font-family:"Pretendard";font-size:13px;color:#fff;font-weight:500;
	transform:rotate(-90deg) translate(-21px,0px);
}
.visual .scroll:after{
	display:block;content:"";
	width:2px;height:48px;
	background:#fff;
	position:absolute;right:0;top:-100%;
	animation:scrollAni 1.6s infinite linear;
}
@keyframes scrollAni{
	0%{top:-100%;}
	100%{top:100%;}
}






.sec2{
	position: relative;
	padding: 150px 0 200px;
}
.sec2 .icon1{
	position: absolute;
	right: 0;
	top: -50px;
}
.sec2 .icon2{
	position: absolute;
	left: 0;
	bottom: -170px;
}

.sec2 .slg{
	text-align: center;
}
.sec2 .slg > div{
	display: flex;
	justify-content: center;
	align-items: center;
}
.sec2 .slg > div > span{
	font-family: "Poppins";
	font-size: 140px;
	font-weight: 500;
}
.sec2 .slg > div > .img{
	display: inline-block;
	width: 239px;
	height: 142px;
	margin: 0 30px;
	border-radius: 20px;
	background: url(/images/main/sec2_img.jpg) no-repeat center / cover;
}
.sec2 .txts{
	margin-top: 20px;
	text-align: center;
}
.sec2 .txts .txt1{
	font-family: "Poppins";
	font-size: 24px;
	font-weight: 500;
}
.sec2 .txts .txt2{
	font-size: 24px;
	margin-top: 10px;
}


.sec3{
	overflow: hidden;
}
.sec3 .conwrap{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 300vh;
}
.sec3 .conwrap .boxwrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}
.sec3 .conwrap .boxwrap:nth-child(1){z-index:1;}
.sec3 .conwrap .boxwrap:nth-child(2){z-index:2;clip-path: inset(100% 0 0 0);}
.sec3 .conwrap .boxwrap:nth-child(3){z-index:3;clip-path: inset(100% 0 0 0);}
.sec3 .conwrap .boxwrap .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec3 .conwrap .boxwrap:nth-child(1) .bg{background: url(/images/main/sec3_bg1.jpg) no-repeat center / cover;}
.sec3 .conwrap .boxwrap:nth-child(2) .bg{background: url(/images/main/sec3_bg2.jpg) no-repeat center / cover;}
.sec3 .conwrap .boxwrap:nth-child(3) .bg{background: url(/images/main/sec3_bg3.jpg) no-repeat center / cover;}
.sec3 .conwrap .boxwrap .con {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}
.sec3 .conwrap .boxwrap .con .sticky{
position: absolute;
left: 50%;
top: 0;
z-index: 10;
max-width: 1760px;
width: 92%;
height: 100%;
padding: 0;
transform: translate(-50%, 0);
}
.sec3 .conwrap .boxwrap .con .sticky .count{
	position: absolute;
	left: 0;
	top: 10%;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
}
.sec3 .conwrap .boxwrap .con .sticky .count span{
	font-family: "Poppins";
	color: #fff;
}
.sec3 .conwrap .boxwrap .con .sticky .scroll{
	font-family: "Poppins";
	font-size: 16px;
	position: absolute;
	right: -2%;
	top: 50%;
	transform: rotate(90deg) translateY(-50%);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
}
.sec3 .conwrap .boxwrap .con .sticky .inner{
	max-width: 1480px;
	width: 92%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sec3 .conwrap .boxwrap .con .sticky .inner .txtarea{

}
.sec3 .conwrap .boxwrap .con .sticky .inner .txtarea h2{
	font-family: "Poppins";
	font-size: 26px;
	font-weight: 500;
	color: #fff;
}
.sec3 .conwrap .boxwrap .con .sticky .inner .txtarea h3{
	margin: 50px 0 30px;
	font-size: 60px;
	font-weight: 500;
	color: #fff;
}
.sec3 .conwrap .boxwrap .con .sticky .inner .txtarea p{
	font-size: 20px;
	line-height: 1.8em;
	color: #fff;
}
.sec3 .conwrap .boxwrap .con .sticky .inner .txtarea .moreBtn{
	margin-top: 40px;
}

.sec3 .conwrap .boxwrap .con .sticky .inner .imgarea{overflow:hidden;width:40%;height:31.5vw; border-radius: 20px;}
.sec3 .conwrap .boxwrap .con .sticky .inner .imgarea > div{
	width:100%;height:100%;
}
.sec3 .conwrap .boxwrap:nth-child(1) .con .sticky .inner .imgarea > div{background: url(/images/main/sec3_img1.jpg) no-repeat center / cover;}
.sec3 .conwrap .boxwrap:nth-child(2) .con .sticky .inner .imgarea > div{background: url(/images/main/sec3_img2.jpg) no-repeat center / cover;}
.sec3 .conwrap .boxwrap:nth-child(3) .con .sticky .inner .imgarea > div{background: url(/images/main/sec3_img3.jpg) no-repeat center / cover;}



.sec4{
	position: relative;
	padding: 280px 0 0;
	background: linear-gradient(180deg,rgba(235, 243, 250, 1) 0%, rgba(229, 245, 248, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.sec4 .bg_icon{
	position: absolute;
	right: 0;
	bottom: -100px;
}
.sec4 .boxwrap{
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.sec4 .boxwrap .box{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc((100% - 40px) / 3);
	aspect-ratio: 1;
	padding: 3vw;
	overflow: hidden;
}

.sec4 .boxwrap .box1{
	padding: 0
}
.sec4 .boxwrap .box1 .tit{
	font-family: "Poppins";
	font-size: 26px;
	font-weight: 500;
}
.sec4 .boxwrap .box1 .slg{
	margin: 25px 0 40px;
	font-family: "Poppins";
	font-size: min(3vw, 58px);
	line-height: 1.15em;
}

.sec4 .boxwrap .box2{border-radius: 20px 20px 20px 10vw;}
.sec4 .boxwrap .box3{border-radius: 10vw 20px 20px 20px;}
.sec4 .boxwrap .box4{border-radius: 20px 20px 20px 10vw;}
.sec4 .boxwrap .box5{border-radius: 10vw 20px 20px 20px;}
.sec4 .boxwrap .box .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec4 .boxwrap .box2 .bg{background: url(/images/main/sec4_box2_bg.jpg) no-repeat center / cover;}
.sec4 .boxwrap .box3 .bg{background: url(/images/main/sec4_box3_bg.jpg) no-repeat center / cover;}
.sec4 .boxwrap .box4 .bg{background: url(/images/main/sec4_box4_bg.jpg) no-repeat center / cover;}
.sec4 .boxwrap .box5 .bg{background: url(/images/main/sec4_box5_bg.jpg) no-repeat center / cover;}
.sec4 .boxwrap .box .box_tit{
	position: relative;
	z-index: 2;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.4em;
	color: #fff;
}
.sec4 .boxwrap .box p{
	position: relative;
	z-index: 2;
	font-size: 20px;
	line-height: 1.6em;
	color: #fff;
	margin-top: 10px;
}
.sec4 .mobile{display: none;}


.sec5{
	padding: 160px 0;
}
.sec5 svg text{
	font-family: 'Poppins', sans-serif;
	font-size: 151px;
	font-weight: 500;
	fill: transparent;            /* 안쪽 투명 */
	stroke: #024ca0;                 /* 테두리 색 */
	stroke-width: 2px;            /* 테두리 두께 */
	paint-order: stroke;          /* stroke가 먼저 그려지게 */
	text-anchor: middle;          /* 가운데 정렬 */
	dominant-baseline: middle;
}
.sec5 svg text:last-child{
	margin-top: 100px;
}


.text-container {
  position: relative;
  width: 100%;
  margin: 50px auto;
}

text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  user-select: none;
}

/* 테두리 텍스트 */
.outline {
  fill: transparent;
  stroke: #024ca0;
  stroke-width: 2;
}

/* 마스크 텍스트 */
.mask-text {
  fill: white;
}
#text-mask {
  background: black; /* 기본 배경 검정 */
}









.sec6{
	position: relative;
	width: 92%;
	margin: 0 auto;
	padding: 160px 0;
	border-radius: 20px;
	overflow: hidden;
}
.sec6 .bg{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec6_bg.jpg) no-repeat center / cover;
}
.sec6 .txts{
	position: relative;
	z-index: 3;
	width: 92%;
	max-width: 1760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.sec6 .txts .tit{
	font-family: "Poppins";
	font-size: 26px;
	font-weight: 500;
	color: #fff;
}
.sec6 .txts strong{
	display: inline-block;
	font-size: 58px;
	font-weight: 600;
	color: #fff;
	margin: 50px 0 20px;
}
.sec6 .txts p{
	font-size: 20px;
	color: #fff;
}
.sec6 .txts .moreBtn{
	margin-top: 40px;
}





.visual .ctr:after{width: 0;}
.visual.in-view .ctr:after{width: 100%; transition: all 1.4s 0.2s;}

.visual .txtwrap .tit h2 span, .visual .txtwrap .tit h3 span{transform: translateY(100%);}
.visual.in-view .txtwrap .tit h2 span, .visual.in-view .txtwrap .tit h3 span{transform: translateY(0); transition: all 1.4s 0.2s;}
.visual.in-view .txtwrap .tit h3 span{transition: all 1.4s 0.5s;}




.sec4 .boxwrap .box1 .tit{opacity: 0; transform: translateY(40px);}
.sec4 .boxwrap .box1 .slg{opacity: 0; transform: translateY(40px);}
.sec4 .boxwrap .box1 .moreBtn{opacity: 0; transform: translateY(40px);}

.sec4 .boxwrap .box1.in-view .tit{opacity: 1; transform: translateY(0); transition: all 1.4s 0.1s;}
.sec4 .boxwrap .box1.in-view .slg{opacity: 1; transform: translateY(0); transition: all 1.4s 0.3s;}
.sec4 .boxwrap .box1.in-view .moreBtn{opacity: 1; transform: translateY(0); transition: all 1.4s 0.5s;}

.sec4 .boxwrap .box2{transform: translateX(-20%); opacity: 0;}
.sec4 .boxwrap .box2.in-view{transform: translateX(0); opacity: 1; transition: all 1.5s;}
.sec4 .boxwrap .box3{transform: translateY(20%); opacity: 0;}
.sec4 .boxwrap .box3.in-view{transform: translateY(0); opacity: 1; transition: all 1.5s;}
.sec4 .boxwrap .box4{transform: translateY(20%); opacity: 0;}
.sec4 .boxwrap .box4.in-view{transform: translateY(0); opacity: 1; transition: all 1.5s;}
.sec4 .boxwrap .box5{transform: translateX(20%); opacity: 0;}
.sec4 .boxwrap .box5.in-view{transform: translateX(0); opacity: 1; transition: all 1.5s;}


.sec5 .text-container{opacity: 0; transform: translateY(40px);}
.sec5 .text-container.in-view{opacity: 1; transform: translateY(0); transition: all 1.4s 0.4s;}


.sec6:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,0.3);
	z-index: 4;
}
.sec6:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,0.3);
	z-index: 4;
}

.sec6.in-view:before{transform: translateX(-100%); opacity: 0; transition: all 1.2s 0.2s;}
.sec6.in-view:after{transform: translateX(100%); opacity: 0; transition: all 1.2s 0.2s;}

.sec6 .bg{transform: scale(1.2);}
.sec6.in-view .bg{transform: scale(1); transition: all 1.2s 0.2s;}

.sec6 .txts{opacity: 0;}
.sec6.in-view .txts{opacity: 1; transition: all 1.4s 1s;}