@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}

#container{overflow: hidden;}

#contents{padding-bottom: 130px;}

.innerwrap{
	width: 92%;
	max-width: 1740px;
	margin: 0 auto;
}


#custom_cursor{width: 120px;height: 120px;position: fixed;top: 0;left: 0;z-index: 15000;pointer-events: none; display: none !important;}
.custom_cursor_inner {display: block;width: 100%;height: 100%;position: relative;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.custom_hover_circle{width: 0;height: 0;position: absolute;top: 50%;left: 50%;margin-top: -106px;margin-left: -106px;overflow: hidden;opacity: 0;border-radius: 50%;}
.custom_hover_circle {z-index: 1;background: rgba(0,0,0,0.8);transition:transform 0.3s; display: flex;flex-direction: column;align-items: center;justify-content: center;}


.sec_tit{
	position: relative;
	z-index: 1;
}
.sec_tit .tit .tit_en{
	font-family: "Wix Madefor Display";
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}
.sec_tit .tit .tit_kr{
	margin-top: 30px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4em;
	color: #fff;
}
.sec_tit .link{
	margin-top: 40px;
	display: flex;
	align-items: center;
}
.sec_tit .link span{
	font-size: 15px;
	color: #fff;
	margin-right: 15px;
}
.sec_tit .link a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 50%;
	box-sizing: border-box;
}
.sec_tit .link a:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(0);
	transform-origin: center;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	transition: all 0.3s;
}
.sec_tit .link a:hover:after{
	transform: scale(1);
}
.sec_tit .link a i{
	position: relative;
	z-index: 1;
	display: block;
	width: 15px;
	height: 14px;
	background: url(/images/main/link_arr.png) no-repeat center / cover;
	transition: all 0.3s;
}
.sec_tit .link a:hover i{
	background: url(/images/main/link_arr_bl.png) no-repeat center / cover;
}

.sec_tit.bl .tit .tit_en{color: #000;}
.sec_tit.bl .tit .tit_kr{color: #000;}
.sec_tit.bl .link span{color: #000;}
.sec_tit.bl .link a{border: 1px solid #000;}
.sec_tit.bl .link a:after{background: #000;}
.sec_tit.bl .link a i{background: url(/images/main/link_arr_bl.png) no-repeat center / cover;}
.sec_tit.bl .link a:hover i{background: url(/images/main/link_arr.png) no-repeat center / cover;}


/* visual */
.visual{
	overflow:hidden;
	position:relative;
	width:100%; height: 100vh;
}
.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:4%;top:50%;z-index:10;
	transform:translateY(-50%);
	width:92%;
}
.visual .txtwrap .tit h2, .visual .txtwrap .tit h3{
	overflow: hidden;
}
.visual .txtwrap .tit h2 span{
	display: inline-block;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
}
.visual .txtwrap .tit h3 span{
	display: inline-block;
	font-size: 19px;
	color: #fff;
	margin-top: 30px;
}

.visual .vpaging {
	position: absolute;
	width: 92%;
	left: 4%;
	bottom: 70px;
	z-index: 100;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.visual .vpaging span{
	opacity:1;
	display: inline-block;
	position:relative;
	width:50px;height:1px;
	margin-right: 10px;
	border-radius: 0;
	background:#839ba5;
}
.visual .vpaging span.swiper-pagination-bullet-active{
	height: 3px;
}

.visual .scrollWrap{
	position: absolute;
	right: 4%;
	bottom: 0;
	z-index: 1;
	display: none;
}
.visual .scrollWrap .scroll{
	display: inline-block;
	position: relative;
	width: 1px;
	height: 180px;
	background: rgba(255, 255, 255, 0.3);
}
.visual .scrollWrap .scroll:after{
	display: block;
	content: "";
	width: 2px;
	height: 60px;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	animation: scroll 1.4s infinite ease;
}
@keyframes scroll{
	0%{transform:translateY(0);}
	100%{transform:translateY(120px);}
}


.sec2{
	padding: 100px 0;
	display: flex;
	align-items: center;
}
.sec2 .innerwrap > .tit{
	font-family: "Wix Madefor Display";
	font-size: 20px;
	font-weight: 700;
}
.sec2 .slg{
	margin: 30px 0;
}
.sec2 .slg > .txt{
	display: inline-block;
	overflow: hidden;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2em;
}
.sec2 .slg .sec3Wrap{
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	z-index: 10;
	overflow: hidden;
	opacity: 1 !important;
}
.sec2 .innerwrap > p{
	font-size: 16px;
	line-height: 1.8em;
}

.sec3{
	position: relative;
	width: 100%;
	padding: 100px 0 310px;
}
.sec3.pc{display: none !important;}
.sec3 .bg{
	position: absolute;
	left: 0;
	top: 0;
	width :100%;
	height: 100%;
	background: url(/images/main/sec3_bg_m.jpg) no-repeat center / cover;
}
.sec3 .innerwrap{
	position: relative;
}
.sec3 .txtwrap{
	width: 100%;
}
.sec3 .txtwrap .info{
	position: relative;
	z-index: 1;
	margin-top: 90px;
}
.sec3 .txtwrap .info h3{
	margin: 10px 0 15px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}
.sec3 .txtwrap .info h4{
	margin-bottom: 20px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}
.sec3 .txtwrap .info p{
	font-size: 18px;
	line-height: 1.8em;
	color: rgba(255,255,255,0.6);
	display: none;
}
.sec3 .imgwrap{
	width: 100%;
	position: absolute;
	left: 50%;
	top: calc(100% + 30px);
	transform: translateX(-50%);
	text-align: center;
}
.sec3 .imgwrap .img{

}
.sec3 .imgwrap .img img{
	width: 300px;
	animation: bounce 2.5s infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.sec4{padding: 120px 0;}
.sec4 .conwrap{
	position: relative;
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	background: #2534cb;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sec4 .conwrap .bg{
	position: absolute;
	left: 0;
	top: 40px;
}
.sec4 .conwrap .titwrap{
	width: 100%;
}
.sec4 .conwrap .info{
	width: 100%;
	padding: 20px;
	margin-top: 30px;
	border-radius: 20px;
	background: rgba(255,255,255,0.1);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.sec4 .conwrap .info .icon img{width: 40px;}
.sec4 .conwrap .info h3{
	margin: 10px 0 15px;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}
.sec4 .conwrap .info h4{
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}
.sec4 .conwrap .info p{
	font-size: 15px;
	line-height: 1.8em;
	color: #fff;
}

.sec5{
	padding: 100px 0;
	background: url(/images/main/sec5_bg.png) no-repeat center bottom / cover #e6e7ea;
}
.sec5 .boxwrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sec5 .boxwrap .box{
	position: relative;
	width: calc((100% - 10px) / 2);
	z-index: 2;
}
.sec5 .boxwrap .box.tit{
	width: 100%;
	margin-bottom: 30px;
}
.sec5 .boxwrap .box.txt{
	z-index: 1;
}
.sec5 .boxwrap .box.blank{
	display: none;
}
.sec5 .boxwrap .box:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.sec5 .boxwrap .box.tit:after{
	display: none;
}
.sec5 .boxwrap .box .inner{
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.sec5 .boxwrap .box.tit .inner{
	position: static;
}
.sec5 .boxwrap .box:nth-child(1) .inner{border-radius: 0;}
.sec5 .boxwrap .box:nth-child(6),
.sec5 .boxwrap .box:nth-child(7){
	opacity: 0;
}
.sec5 .boxwrap .box:nth-child(2) .inner{background: url(/images/main/sec5_box2_img.jpg) no-repeat center / cover;}
.sec5 .boxwrap .box:nth-child(4) .inner{background: url(/images/main/sec5_box4_img.jpg) no-repeat center / cover;}
.sec5 .boxwrap .box:nth-child(8) .inner{background: url(/images/main/sec5_box8_img.jpg) no-repeat center / cover;}
.sec5 .boxwrap .box.txt .inner{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:20px;
	box-sizing: border-box;
	background: #fff;
}
.sec5 .boxwrap .box.txt .inner .icon img{
	width: 40px;
	margin-bottom: 5px;
}
.sec5 .boxwrap .box.txt .inner b{
	display: block;
	margin: 25px 0;
	font-size: 35px;
	font-weight: 700;
	display: none;
}
.sec5 .boxwrap .box.txt .inner p{
	font-size: 13px;
	line-height: 1.6em;
}


.sec6{width: 100%;padding: 100px 0 200px; box-sizing: unset;}
.sec6 .innerwrap{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sec6 .circlewrap{
	position: relative;
	width: 100%;
	padding-bottom: 100%;
}
.sec6 .circlewrap .slg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.sec6 .circlewrap .slg .tit{
	font-family: "Wix Madefor Display";
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 30px;
}
.sec6 .circlewrap .slg h2{
	font-size: 7vw;
	font-weight: 700;
	white-space: nowrap;
}
.sec6 .circlewrap .slg h2 div{
	overflow: hidden;
}
.sec6 .circlewrap .slg h2 div span{
	display: inline-block;
}
.sec6 .circlewrap .slg h2 div:nth-child(1) span{transition: all 0.1s;}
.sec6 .circlewrap .slg h2 div:nth-child(2) span{transition: all 0.3s;}
.sec6 .circlewrap .slg h2 div:nth-child(3) span{transition: all 0.5s;}
.sec6 .circlewrap ul{
	position: absolute;
	left: 0;
	top: calc(100% + 30px);
	width: 100%;
}
.sec6 .circlewrap li{
	font-size:20px;
	font-weight: 700;
	text-align: center;
}
.sec6 .circlewrap .circle{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec6_circle_line.png) no-repeat center / contain;
}
.sec6 .circlewrap .circle .dot{
	position: absolute;
	width: 11px;
	height: 11px;
	z-index: 2;
}
.sec6 .circlewrap .circle .dot:nth-child(1){
	left: 50%;
	top: -0.5%;
	transform: translateX(-50%);
}
.sec6 .circlewrap .circle .dot:nth-child(2){
	left: 6%;
	top: 74%;
}
.sec6 .circlewrap .circle .dot:nth-child(3){
	right: 6%;
	top: 74%;
}
.sec6 .circlewrap .circle .dot .pinkcc{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	opacity: 0;
}
.sec6 .circlewrap .circle .dot .pinkcc .cc{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #f9d9d4;
}

.sec6 .circlewrap .circle .dot .pinkcc .cc1{animation: wave 2s ease-in infinite 0s;}
.sec6 .circlewrap .circle .dot .pinkcc .cc2{animation: wave 2s ease-in infinite 0.5s;}
.sec6 .circlewrap .circle .dot .pinkcc .cc3{animation: wave 2s ease-in infinite 1s;}
@keyframes wave{
0%{opacity:1; transform: translate(-50%, -50%) scale(0);}
100%{opacity:0.5;transform: translate(-50%, -50%) scale(1);}
}
.sec6 .circlewrap .circle .dot .redcc{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #e3432a;
	z-index: 1;
}


.sec7{padding-bottom: 100px;}
.sec7 .sec_tit{
	display: flex;
	justify-content: space-between;
}
.sec7 .sec_tit .link{display: none;}
.sec7 .press{
	margin-top: 40px;
	padding-bottom: 40px;
}
.sec7 .press .swiper-slide{
	width: 300px;
}
.sec7 .press .swiper-slide a{
	display: block;
}
.sec7 .press .swiper-slide a .thumb{
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.sec7 .press .swiper-slide a .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.7s;
}
.sec7 .press .swiper-slide a:hover .thumb img{
	transform: scale(1.1);
}
.sec7 .press .swiper-slide a .txtwrap{
	margin-top: 30px;
}
.sec7 .press .swiper-slide a .txtwrap .tit{
	font-size: 20px;
	font-weight: 700;
	color: #222;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.sec7 .press .swiper-slide a .txtwrap .con{
	font-size: 16px;
	color: #222;
	line-height: 1.5em;
	height: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 10px 0 15px;
}
.sec7 .press .swiper-slide a .txtwrap .date{
	font-size: 15px;
	color: #777;
}
.sec7 .press .swiper-scrollbar{
	display:block !important;
	width:100%;height:1px;
	left:0;
	background:#c4c4c4;
}
.sec7 .press .swiper-scrollbar .swiper-scrollbar-drag{
	height:2px;
	background:#000;
}



.sec8{}
.sec8 .conwrap{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 450px;
	border-radius: 20px;
	overflow: hidden;
}
.sec8 .conwrap .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec8_bg.jpg) no-repeat center / cover;
}
.sec8 .conwrap .sec_tit{
	width: 100%;
	padding: 0 4%;
	box-sizing: border-box;
}

/*신규*/
.sec4 .listarea{margin-bottom: 120px;}
.sec4 .listarea .sec_tit{margin-bottom: 80px;}
.sec4 .listarea .sec_tit .tit .tit_kr{color:#111;font-size:32px;}
.sec4 .listarea .sec_tit p{
margin-top: 35px;color:#555;font-size:17px;font-weight: 400;
}
.sec4 .listarea .list{display: flex;flex-wrap:wrap;align-items:end;gap:30px 0;}
.sec4 .listarea .list>li{width:100%;}
.sec4 .listarea .list>li .bold{
font-size:min(12vw, 45px);color:#222222;font-weight: bold;font-family: "Wix Madefor Display", "Noto Sans KR";
letter-spacing:-0.02em;
}
.sec4 .listarea .list>li .bold small{font:inherit;font-size:min(7vw, 24px);;}
.sec4 .listarea .list>li .bold img{padding-bottom: 15px;width:34px;max-width:100%;}
.sec4 .listarea .list>li .txt{
font-size:15px;color:#555555;font-weight: 350;font-family: "Noto Sans KR";margin-top: 8px;
}



/* 모션 */
@-webkit-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%); }
animation-delay: 1s;
}
@-webkit-keyframes showImg2{
0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
animation-delay: 1s;
}
@-webkit-keyframes opacityAni{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes scaleAni{
0%{opacity:0;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes scaleAni2{
0%{opacity:0.5;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes fadeUpAni{
0%{opacity:0; transform:translateY(50px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes fadeUpAni2{
0%{opacity:0; transform:translateY(30px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes fadeLeftAni{
0%{opacity:0; transform:translateX(-50px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes fadeRightAni{
0%{opacity:0; transform:translateX(50px);}
100%{opacity:1;transform:translateX(0);}
}

.fadeUp{opacity: 0;}
.fadeUp2{opacity: 0;}
.fadeLeft{opacity: 0;}
.fadeRight{opacity: 0;}
.showImg{opacity: 0;}
.showImg2{opacity: 0;}
.showImg_2{opacity: 0;}

.showImg.in-view{animation-name: showImg;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.4s; opacity: 1;}
.showImg2.in-view{animation-name: showImg2;animation-timing-function: cubic-bezier(0.14, 0, 0.42, 1.01); animation-duration: 1.4s; opacity: 1;}



.showImg_2.in-view {animation-name: showImg2;animation-timing-function: cubic-bezier(.37,.38,.61,.61);animation-duration: 1.4s;opacity: 1 !important;}
.opacity.in-view{animation-name: opacityAni;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.4s;}
.fadeUp.in-view{animation-name: fadeUpAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.fadeUp2.in-view{animation-name: fadeUpAni2; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; 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: 1.4s; }
.scaleAni2.in-view{animation-name: scaleAni2; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.5s; }



.visual .txtwrap .tit h2 span{opacity: 0; transform: translateY(100%);}
.visual .txtwrap .tit h3 span{opacity: 0; transform: translateY(100%);}
.visual.in-view .txtwrap .tit h2 span{opacity: 1; transform: translateY(0); transition: all 1.2s 0.2s;}
.visual.in-view .txtwrap .tit h3 span{opacity: 1; transform: translateY(0); transition: all 1.2s 0.8s;}



.sec4 .conwrap .bg img{transform: translateX(-100%);}
.sec4 .conwrap.in-view .bg img{transform: translateX(0); transition: 1.2s 0.2s ease;}


.sec5 .boxwrap .box.txt{transform: translateX(calc(-100% - 10px));}
.sec5 .boxwrap .box.txt.in-view{transform: translateX(0); transition: all 1.5s 0.2s;}


.sec7 .sec_tit{opacity: 0; transform: translateY(40px);}
.sec7 .sec_tit.in-view{opacity: 1; transform: translateY(0); transition: all 1.4s 0.3s;}
.sec7 .press{opacity: 0; transform: translateY(40px);}
.sec7 .press.in-view{opacity: 1; transform: translateY(0); transition: all 1.4s 0.3s;}


.sec8 .conwrap .bg{transform: scale(1.2);}
.sec8 .conwrap.in-view .bg{transform: scale(1); transition: all 2.5s 0.2s;}
.sec8 .conwrap .sec_tit .tit .tit_en{opacity: 0; transform: translateY(40px);}
.sec8 .conwrap.in-view .sec_tit .tit .tit_en{opacity: 1; transform: translateY(0); transition: all 1.4s 0.2s;}
.sec8 .conwrap .sec_tit .tit .tit_kr{opacity: 0; transform: translateY(40px);}
.sec8 .conwrap.in-view .sec_tit .tit .tit_kr{opacity: 1; transform: translateY(0); transition: all 1.4s 0.2s;}
.sec8 .conwrap .sec_tit .link{opacity: 0; transform: translateY(40px);}
.sec8 .conwrap.in-view .sec_tit .link{opacity: 1; transform: translateY(0); transition: all 1.4s 0.2s;}




