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


#contents{position:relative;padding-top:100vh;}
.head .gnb>ul>li>a:hover{transform: translate(0.3rem, -0.4rem);color:#fff;}



/* visual */
.visual{overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100vh;}
.visual .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.visual .bg video{width:100%;height:100%;object-fit:cover;}
.visual #gradientCanvas{
    position: absolute;left:0;top:0;
    width: 100%;height: 100%;
	background:#fff;
}
.objLeft{position:absolute;left:36px;top:50%;z-index:100;transform:translateY(-50%);font-size:23px;color:#fff;}
.objRight{position:absolute;right:36px;top:50%;z-index:100;transform:translateY(-50%);font-size:23px;color:#fff;}
.objLeft:hover, .objRight:hover{color:#fff;}
.visual .scroll{	
	display:none;
	position:absolute;left:36px;bottom:36px;z-index:100;
	font-size:24px;color:#fff;
}
.visual .scroll>span{display:flex;align-items:center;}
.visual .scroll i{
	display:block;
	width:40px;height:40px;
	animation:scrollAni 1s infinite alternate;
}
@keyframes scrollAni{
	0%{transform:translateY(0);}
	100%{transform:translateY(5px);}
}
.visual .mobileTxts{display:none;}



/* sec1 */
.sec1{overflow:hidden;position:relative;}
.sec1>div{
	position:relative;
	background:#000;
	text-align:center;
}
.sec1>div:before{
	display:block;content:"";
	width:100%;height:45vh;
	background:url(/images/main/sec1_bg0.png) no-repeat center bottom;
	background-size:cover;
	position:absolute;left:0;top:0;
}
.sec1>div .whatif{
	position:absolute;left:50%;top:28vw;
	transform:translate(-50%, 33vw);
}
.sec1>div .con{
	position:relative;
	width:100%;
	padding:33vw 0 100px;
}
.sec1>div .con .bg{display:none;}
.sec1>div .con .txtWrap{
	position:relative;z-index:10;
	width:100%;
	padding:25vw 0 30vw;
	text-align:center;
}
.sec1>div .con .txtWrap:before{
	display:block;content:"";
	width:100%;height:40vw;
	background:url(/images/main/sec1_bg2.png) no-repeat center;
	background-size:auto 100%;
	position:absolute;left:0;top:0%;z-index:10;
}
.sec1>div .con .txtWrap:after{
	display:block;content:"";
	width:100%;height:40vw;
	background:url(/images/main/sec1_bg3.png) no-repeat center;
	background-size:auto 100%;
	position:absolute;left:0;bottom:0%;z-index:10;
}
.sec1>div .con .txtWrap .slg{
	position:relative;z-index:100;
	font-size:25px;color:#c3cddd;font-weight:500;line-height:1.8em;
	opacity:0;
	transform:translateY(40px);
}
.sec1>div .con .txtWrap .txts{
	position:relative;z-index:100;
	width:100%;
	margin:5vw auto 0;	
}
.sec1>div .con .txtWrap .txts h3{
	font-size:25px;color:#fff;font-weight:700;line-height:1.3em;
	opacity:0;transform:translateY(40px);
}
.sec1>div .con .txtWrap .txts>div{width:85%;margin:40px auto 0;opacity:0;transform:translateY(40px);}
.sec1>div .con .txtWrap .txts>div .kr{margin-bottom:60px;}
.sec1>div .con .txtWrap .txts>div .kr p{margin-bottom:30px;font-size:23px;color:#c3cddd;font-weight:500;line-height:1.5em;}
.sec1>div .con .txtWrap .txts>div .en{}
.sec1>div .con .txtWrap .txts>div .en p{margin-bottom:30px;font-size:19px;color:#5C5D64;font-weight:500;line-height:1.5em;}
.sec1>div .con .txtWrap .txts>div p:last-child{margin:0;}






/* sec2 */
.sec2{overflow:hidden;position:relative;background:#000;}
.sec2 .titlearea{
	position:relative;
	margin-bottom:70px;
	text-align:center;
}
.sec2 .titlearea h3{font-size:35px;color:#fff;font-weight:700;}
.sec2 .titlearea .prev{position:absolute;left:36px;top:50%;transform:translateY(-50%);font-size:23px;color:#808187;}
.sec2 .titlearea .next{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:23px;color:#808187;}
.sec2 .con{}
.sec2 .con img{width:100%;}
.sec2 .con video{
width: 100%;
height: 100vh;
object-fit: cover;
} 




/* sec3 */
.sec3{overflow:hidden;position:relative;background:#080808;height:100vh;}
.sec3 .con{
	position:relative;
	width:100%;height:100%;
	text-align:center;
}
.sec3 .con .bg{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:70%;
	aspect-ratio:996/893;
	background:url(/images/main/sec3_bg.png) no-repeat center;
	background-size:cover;
}
.sec3 .con .txtWrap{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	width:100%;
}
.sec3 .con .txtWrap h3{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	font-size:35px;color:#fff;font-weight:700;text-align:center;
}
.sec3 .con .txtWrap .txts{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-8%);	
	width:70%;
}
.sec3 .con .txtWrap .txts h4{
	font-size:3.4vw;color:#fff;font-weight:700;text-align:center;
	margin:0 0 80px;
	opacity:0;transform:scale(0.5);
}
.sec3 .con .txtWrap .txts p{opacity:0;margin-bottom:60px;font-size:20px;color:#c3cddd;font-weight:500;line-height:1.5em;}
.sec3 .con .txtWrap .txts p.en{margin-bottom:30px;font-size:16px;color:#5c5d64;}





/* sec4 */
.sec4{overflow:hidden;position:relative;background:#000;display:flex;align-items:center;justify-content:center;height:100vh;}
.sec4 .titlearea{
	position:relative;
	padding:0 0 120px 0;
	text-align:center;
}
.sec4 .titlearea h3{font-size:35px;color:#fff;font-weight:700;}
.sec4 .titlearea .prev{position:absolute;left:36px;top:50%;transform:translateY(-50%);font-size:23px;color:#808187;}
.sec4 .titlearea .next{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:23px;color:#808187;}
.sec4 .con{
	overflow:hidden;
	position:relative;
}
.sec4 .con>div{display:flex;gap:20px;}
.sec4 .con ul{display:flex;gap:20px;}
.sec4 .con ul li{
	position:relative;
	width:378px;
	aspect-ratio:1/1;
	flex-shrink: 0;
}
.sec4 .con ul li .hover{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background: linear-gradient(to top, rgba(15,82,189,1) 10%, rgba(15,82,189,0.7) 50%, rgba(15,82,189,0.5), rgba(15,82,189,0));
	opacity:1;transform:translateY(100%);
	transition:all 0.4s;
}
.sec4 .con ul li .hover .info{
	position:absolute;left:0;top:50%;
	width:100%;
	transform:translateY(-30%);
	text-align:center;
	opacity:0;
}
.sec4 .con ul li .hover .info .prjName{font-size:27px;color:#fff;font-weight:bold;}
.sec4 .con ul li .hover .info .prjExp{font-size:14px;color:#fff;font-weight:500;margin-top:20px;}
.sec4 .con ul li .hover .name{
	position:absolute;left:0;bottom:10px;
	width:100%;
	font-size:12px;color:#fff;text-align:center;
	opacity:0;transform:translateY(10px);
	transition:all 0.4s;
}

.sec4 .con ul li:hover .hover{opacity:1;transform:translateY(0);}
.sec4 .con ul li:hover .hover .info{opacity:1;transform:translateY(-50%);transition:all 0.4s 0.3s;}
.sec4 .con ul li:hover .hover .name{opacity:1;transform:translateY(0);transition:all 0.4s 0.4s;}

.sec4 .btn{margin-top:120px;}
.sec4 .btn a{
	display:flex;align-items:center;justify-content:center;
	width:223px;height:71px;
	margin:0 auto;
	border-radius:50px;
	background:#202020;
	font-size:25px;color:#fff;text-align:center;font-weight:500;
}
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

#contents{background:#000}