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

#wrap{overflow: hidden; position: relative;}

.top_btn{
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
	z-index: 10;
}


#custom_cursor{width: 120px;height: 120px;position: fixed;top: 0;left: 0;z-index: 15000;pointer-events: none;}
.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{display: block;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:#000;font-family:'Nunito Sans';font-size:15px;color:#fff; font-weight: 700;transition:transform 0.3s; display: flex;flex-direction: column;align-items: center;justify-content: center;}
.custom_hover_circle span{display: inline-block; margin-bottom: 3px; white-space: nowrap;}


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

.titwrap h3{
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 30px;
}
.titwrap .sec_tit{
	font-size: 66px;
	font-weight: 700;
	color: #fff;
}
.titwrap p{
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
	margin-top: 20px;
}

.link{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 25px;
	width: 170px;
	height: 52px;
	border-radius: 52px;
	border: 1px solid rgba(255,255,255,0.8);
}
.link span{
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	margin-right: 8px;
}
.link:hover img{
	animation: MovingAni 1.5s infinite ease-in-out;
}
@keyframes MovingAni {
0% {
 transform: translateX(0);
}
50% {
  transform: translateX(5px);
}
100% {
  transform: translateX(0);
}
}


/* visual */
.visual{
	overflow:hidden;
	position:relative;
	width:100%; height: 100vh;
	border-radius: 0 0 0 100px;
}

.visual video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.visual .txtwrap{
	position:absolute;left:50%;top:50%;z-index:10;
	transform:translateX(-50%);
	width:92%;
	max-width: 1480px;
}
.visual .txtwrap .line{
	display: block;
	width: 100px;
	height: 1px;
	background: rgba(255,255,255,0.8);
	margin-bottom: 30px;
}
.visual .txtwrap .tit h2, .visual .txtwrap .tit h3{
	overflow: hidden;
}
.visual .txtwrap .tit h2 span, .visual .txtwrap .tit h3 span{
	display: inline-block;
	font-size: 80px;
	font-weight: 700;
	color: #fff;
}
.visual .txtwrap .txt{
	margin-top: 30px;
	font-size: 18px;
	line-height: 1.5em;
	font-weight: 300;
	color: rgba(255,255,255,0.7);
}



.sec2{
	padding: 220px 0;
}
.sec2 .txts > div{
	display: flex;
	align-items: center;
	justify-content: center;
}
.sec2 .txts > div span{
	font-size: 97px;
	font-weight: 700;
}
.sec2 .txts > div .img{
	position: relative;
	width: 220px;
	height: 114px;
	border-radius: 57px;
	overflow: hidden;
	margin: 0 25px;
}
.sec2 .txts > div .img.img1{
	background: url(/images/main/sec2_img1.png) no-repeat center / cover;
}
.sec2 .txts > div .img.img2{
	width: 285px;
	background: url(/images/main/sec2_img2.png) no-repeat center / cover;
}
.sec2 p{
	margin-top: 30px;
	text-align: center;
	font-size: 18px;
	line-height: 1.5em;
	color: #444;
}

.sec3{
	padding: 0 0 220px;
}
.sec3 .conwrap{
	position: relative;
	margin-bottom: 200px;
}
.sec3 .conwrap:last-child{
	margin-bottom: 0;
}

.sec3 .conwrap .imgwrap{
	width: 62%;
	height: 720px;
	border-radius: 100px 0 0 0;
	overflow: hidden;
	opacity: 0;
}
.sec3 .conwrap .imgwrap video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec3 .conwrap .txtwrap{
	position: absolute;
	left: 55%;
	bottom: 90px;
}
.sec3 .conwrap .txtwrap .tit{
	font-size: 20px;
	font-weight: 700;
}
.sec3 .conwrap .txtwrap strong{
	display: inline-block;
	font-size: 110px;
	line-height: 1.1em;
}
.sec3 .conwrap .txtwrap p{
	margin-top: 40px;
	font-size: 18px;
}
.sec3 .conwrap:nth-child(2) .imgwrap{
	margin-left: 32%;
	border-radius: 0 100px 0 0;
}
.sec3 .conwrap:nth-child(2) .txtwrap{
	text-align: right;
	left: unset;
	right: 60%;
}


.sec4{
	overflow: hidden;
	position: relative;
	padding: 220px 0;
	/* background: #3b64a6; */
	border-radius: 0 0 0 100px;
}
.sec4 > .bg{
	position: absolute;
	right: 4%;
	bottom: 0;
}
.sec4 .innerwrap{
	position: relative;
	z-index: 1;
}
.sec4 .top{
	display: flex;
}
.sec4 .top .titwrap{
	width: 70%;
}
.sec4 .top .subtit{
	width: 30%;
}
.sec4 .top .subtit p{
	font-size: 18px;
	color: #fff;
	line-height: 1.5em;
}
.sec4 .boxwrap{
	margin-top: 90px;
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}
.sec4 .boxwrap .box{
	position: relative;
	width: calc((100% - 70px) / 3);
	border-radius: 26px;
	overflow: hidden;
}
.sec4 .boxwrap .box:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.sec4 .boxwrap .box .inner{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 55px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
}
.sec4 .boxwrap .box .inner .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec4 .boxwrap .box .inner .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec4 .boxwrap .box .inner .txts{
	position: relative;
}
.sec4 .boxwrap .box .inner .txts .tit{
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}
.sec4 .boxwrap .box .inner .txts p{
	font-size: 18px;
	color: #fff;
	line-height: 1.5em;
}


.sec5{
	padding: 220px 0;
}
.sec5 .titwrap h3{
	color: #000;
}
.sec5 .titwrap .sec_tit{
	color: #000;
}
.sec5 .titwrap p{
	color: #000;
}
.sec5 .boxwrap{
	margin-top: 90px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.sec5 .boxwrap .box{
	position: relative;
	width: calc((100% - 40px) / 2);
	height: 555px;
	border-radius: 26px;
	padding: 70px 55px 50px 55px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.sec5 .boxwrap .box .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.sec5 .boxwrap .box .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec5 .boxwrap .box .txts{
	position: relative;
}
.sec5 .boxwrap .box .txts .tit{
	font-size: 36px;
	font-weight: 700;
	color: #fff;
}
.sec5 .boxwrap .box .txts p{
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
}
.sec5 .boxwrap .box .linkwrap{
	position: relative;
	padding-top: 25px;
}
.sec5 .boxwrap .box .linkwrap:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.6);
}
.sec5 .boxwrap .box .linkwrap a{
	display: inline-block;
}
.sec5 .boxwrap .box .linkwrap a span{
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	margin-right: 8px;
}


.sec6{
	padding: 0 0 220px;
}
.sec6 .titwrap{
	text-align: center;
}
.sec6 .titwrap h3{
	color: #000;
}
.sec6 .titwrap .sec_tit{
	color: #000;
}
.sec6 .titwrap p{
	color: #000;
}
.sec6 .conwrap{
	margin-top: 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec6 .conwrap .con{
	width: 46%;
	margin-bottom: 50px;
}
.sec6 .conwrap .con:nth-last-child(-n+2){
	margin-bottom: 0;
}
.sec6 .conwrap .con .iconwrap{
	width: 92px;
	height: 92px;
	border-radius: 25px;
	background: #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sec6 .conwrap .con .iconwrap .icon1{
	position: relative;
	width: 56px;
	height: 49px;
	background: url(/images/main/sec6_icon11.png) no-repeat;
}
.sec6 .conwrap .con .iconwrap .icon1 .i1{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec6_icon12.png) no-repeat;
	animation: spinAni 3s infinite linear;
}
.sec6 .conwrap .con .iconwrap .icon2{
	position: relative;
	width: 52px;
	height: 52px;
	background: url(/images/main/sec6_icon2.png) no-repeat center;
	 transform-origin: center;
  animation: rotateDiagonal 3s linear infinite;
}
.sec6 .conwrap .con .iconwrap .icon3{
	position: relative;
	width: 37px;
	height: 47px;
	background: url(/images/main/sec6_icon3.png) no-repeat;
}
.sec6 .conwrap .con .iconwrap .icon3 .line{
	position: absolute;
	width: 19px;
	height: 2px;
	background: #bb2e34;
}
.sec6 .conwrap .con .iconwrap .icon3 .line.line1{
	left: 6px;
	top: 22px;
	animation: bounceAni 2s infinite 5s;
	transform-origin: left center;
	animation-delay: 0.0s;
}
.sec6 .conwrap .con .iconwrap .icon3 .line.line2{
	left: 6px;
	top: 25px;
	animation: bounceAni 2s infinite 5s;
	transform-origin: left center;
	animation-delay: 0.1s;
}
.sec6 .conwrap .con .iconwrap .icon3 .line.line3{
	left: 6px;
	top: 28px;
	animation: bounceAni 2s infinite 5s;
	transform-origin: left center;
	animation-delay: 0.2s;
}
.sec6 .conwrap .con .iconwrap .icon3 .line.line4{
	left: 6px;
	top: 31px;
	animation: bounceAni 2s infinite 5s;
	transform-origin: left center;
	animation-delay: 0.3s;
}
.sec6 .conwrap .con .iconwrap .icon4{
	position: relative;
	width: 58px;
	height: 58px;
	background: url(/images/main/sec6_icon4.png) no-repeat;
	animation: rotateAni 2s infinite;
}



.sec6 .conwrap .con .txtwrap{
	margin-top: 25px;
	padding-top: 40px;
	border-top: 1px solid #000;
}
.sec6 .conwrap .con .txtwrap dl{
	display: flex;
}
.sec6 .conwrap .con .txtwrap dl dt{
	font-size: 36px;
	font-weight: 700;
	width: 42%;
}
.sec6 .conwrap .con .txtwrap dl dd{
	font-size: 18px;
	line-height: 1.5em;
	color: #555555;
	width: 58%;
}




@keyframes spinAni {
0% {
 transform:rotate(0deg); 
}
100% {
  transform:rotate(360deg); 
}
}

@keyframes rotateDiagonal {
  0% {
    transform: rotate3d(1, -1, 0, 0deg); /* 오른쪽 위 -> 왼쪽 아래 축 */
  }
  100% {
    transform: rotate3d(1, -1, 0, 360deg); /* 360도 회전 */
  }
}
@keyframes bounceAni {
0% {
 transform:scaleX(0);
}
60% {
  transform:scaleX(1);
}
100% {
  transform:scaleX(1); 
}
}
@keyframes rotateAni {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}



.sec7{
	padding-bottom: 220px;
}
.sec7 .conwrap{
	width: 96%;
	margin-left: 4%;
	padding: 180px 80px 140px 80px;
	border-radius: 100px 0 0 0;
	background: #c10b50;
	display: flex;
}
.sec7 .conwrap .titwrap{
	width: 500px;
}
.sec7 .conwrap .titwrap .sec_tit{
	font-size: 56px;
}
.sec7 .conwrap .bbsSwiper{
	width: calc(100% - 500px);
	padding-bottom: 40px;
	overflow: visible;
}
.sec7 .conwrap .bbsSwiper .swiper-slide{
	width: 410px;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a{
	display: block;
	padding: 45px 40px;
	background: #fff;
	border-radius: 0 0 50px 0;
	overflow: hidden;
	transition: all 0.6s;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a:hover{
	transform: translateY(-30px);
	box-shadow: 1px 1px 20px #000;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .cate{
	font-family: "Nunito Sans";
	font-size: 15px;
	font-weight: 800;
	color: #3b64a6;
	margin-bottom: 60px;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .tit{
	font-size: 28px;
	font-weight: 700;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.4em;
	height: 5.2em;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .con{
	margin: 15px 0;
	font-size: 18px;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4em;
	height: 2.8em;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .date{
	font-size: 16px;
	color: #888;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .linkwrap{
	padding-top: 25px;
	margin-top: 75px;
	border-top: 1px solid #ccc;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .linkwrap span{
	font-size: 12px;
	font-weight: 600;
	color: #555;
}
.sec7 .conwrap .bbsSwiper .swiper-slide a .linkwrap img{
	margin: 0 0 3px 15px;
}
.sec7 .conwrap .bbsSwiper .swiper-scrollbar{
	left: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255,255,255,0.3);
}
.sec7 .conwrap .bbsSwiper .swiper-scrollbar .swiper-scrollbar-drag{
	background: #fff;
	border-radius: 0;
	height: 2px;
}





#header{top: -100%; transition: top 1.4s ease;}
#header.move{top: 0%;}


@-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(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%); }
}
@-webkit-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%); }
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 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;}
.fadeLeft{opacity: 0;}
.fadeRight{opacity: 0;}
.showImg{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;}
.fadeUp.in-view{animation-name: fadeUpAni; 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: 2s; }
.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.4s;}

.visual .txtwrap .txt{opacity: 0; transform: translateY(40px);}
.visual.in-view .txtwrap .txt{opacity: 1; transform: translateY(0); transition: all 1.2s 1.2s;}




.sec2 .txts > div:nth-child(1){opacity: 0; transform: translateX(-100px); transition: all 1.2s 0.2s;}
.sec2 .txts > div:nth-child(2){opacity: 0; transform: translateX(100px); transition: all 1.2s 0.2s;}
.sec2 .txts > div:nth-child(3){opacity: 0; transform: translateX(-100px); transition: all 1.2s 0.2s;}
.sec2 .innerwrap.in-view .txts > div{opacity: 1; transform: translateX(0);}
.sec2 p{opacity: 0; transform: translateY(40px); transition: all 1.2s 0.2s;}
.sec2 .innerwrap.in-view p{opacity: 1; transform: translateY(0);}

.sec2 .txts > div .img:after{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        transition: 1.2s;
}
.sec2 .innerwrap.in-view .txts > div .img:after{
	left: 100%;
}


.sec3 .conwrap:nth-child(odd) .txtwrap{opacity: 0; transform: translateX(-100px); transition: transform 1s 0.4s, opacity 1.4s 0.4s;}
.sec3 .conwrap:nth-child(odd) .txtwrap.in-view{opacity: 1; transform: translateX(0);}


.sec3 .conwrap:nth-child(even) .txtwrap{opacity: 0; transform: translateX(100px); transition: transform 1s 0.4s, opacity 1.4s 0.4s;}
.sec3 .conwrap:nth-child(even) .txtwrap.in-view{opacity: 1; transform: translateX(0);}


.sec3 .conwrap .imgwrap.in-view{
animation-name: imgMotion;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
        animation-delay: 0.1s;
        opacity: 0;
    }
	@keyframes imgMotion{
	0% { clip-path: inset(50%);opacity:0; }
	100% {clip-path: inset(0);opacity:1;}
}

.sec4:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) scale(0);
	transition: all 2s ease-in-out;
	display: block;
	width: 46px;
	height: 46px;
	background: #3b64a6;
	border-radius: 50%;
	z-index: -1;
}
.sec4.in-view:after{
	transform: translate(-50%, -50%) scale(140);
}

.sec4 .boxwrap .box{
	opacity: 0;
	clip-path: inset(10% round 26px);
	transition: all 1.4s 0.2s;
}
.sec4 .boxwrap .box.in-view{
	opacity: 1;
	clip-path: inset(0 round 26px);
}

.sec4 .boxwrap .box .inner .txts{transform: translateY(40px); opacity: 0;}
.sec4 .boxwrap .box.in-view .inner .txts{transform: translateY(0); opacity: 1;transition: all 1.4s;}