@charset "utf-8";
.pcbr{display:block;}
.tbbr{display:none;}
.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{	
	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;}
.visual .objRight{transition:all 0.4s;}
.visual .objRight:after{
	display:block;content:"→";
	position:absolute;left:0;top:100%;
	opacity:0;transition:all 0.4s;
	animation:arrAniR 0.4s forwards;
}
.visual .objRight:hover{color:#FA4616;}
.visual .objRight:hover:after{opacity:1;animation:arrAni 0.4s forwards;}
@keyframes arrAni{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(0%);}
}
@keyframes arrAniR{
	0%{transform:translateX(0);}
	100%{transform:translateX(50px);}
}




/* 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:28vh;
	transform:translate(-50%, 12vh);
}
.sec1>div .con{
	position:relative;
	transform:translate(0,0);
	width:100%;min-height:100vh;
}
.sec1>div .con .bg{width:100%;height:100%;object-fit:cover;}
.sec1>div .con .bg img{width:100%;}
.sec1>div .con .txtWrap{
	position:absolute;left:0;top:33vw;z-index:100;
	transform:translateY(0%);
	width:100%;
}
.sec1>div .con .txtWrap .slg{
	font-size:25px;color:#c3cddd;font-weight:500;line-height:1.8em;
	opacity:0;
	transform:translateY(40px);
}
.sec1>div .con .txtWrap .txts{
	display:flex;
	width:90%;
	margin:5vw auto 0;
	text-align:left;
}
.sec1>div .con .txtWrap .txts h3{
	width:25%;
	font-size:1.6vw;color:#fff;font-weight:700;line-height:1.3em;
	opacity:0;transform:translateX(40px);
}
.sec1>div .con .txtWrap .txts>div{width:75%;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:17px;color:#5C5D64;font-weight:500;line-height:1.5em;}
.sec1>div .con .txtWrap .txts>div p:last-child{margin:0;}


@media(max-width:1700px){
	.sec1>div .whatif{top:20vh;}
}
@media(max-width:1650px){
	.sec1>div .con .txtWrap{top:28vw;}
	.sec1>div .con .txtWrap .txts>div .kr p{font-size:20px;}
	.sec1>div .con .txtWrap .txts>div .en p{font-size:14px;}
}
@media(max-width:1560px){
	.sec1>div .whatif{top:15vh;}
}



/* 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:55%;
	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:100%;
}
.sec3 .con .txtWrap .txts h4{
	font-size:3.5vw;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:25px;color:#c3cddd;font-weight:500;line-height:1.5em;}
.sec3 .con .txtWrap .txts p.en{margin-bottom:30px;font-size:19px;color:#5c5d64;}


@media(max-width:1560px){
	.sec3 .con .txtWrap .txts p.en{font-size:17px;text-shadow:1px 1px 2px rgba(255,255,255,0.1);}
}


/* 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 .thumb{}
.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{
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	position:relative;
	width:223px;height:71px;
	margin:0 auto;
	border-radius:50px;
	background:#202020;
	font-size:25px;color:#fff;text-align:center;font-weight:500;
}
.sec4 .btn a:before{
	display:block;content:"";
	width:100%;height:120%;
	background:#de3b29;
	position:absolute;left:0;top:0;
	transform-origin:left;
	transform:scaleX(0);
	transition:all 0.4s;
}
.sec4 .btn a:after{
	display:block;content:"";
	width:100%;height:120%;
	background:#005ada;
	position:absolute;left:0;top:0;
	transform-origin:left;
	transform:scaleX(0);
	transition:all 0.4s;
}
.sec4 .btn a span{
	position:relative;z-index:10;
}
.sec4 .btn a:hover:before{
	transform:scaleX(1);
	transition:all 0.4s;
}
.sec4 .btn a:hover:after{
	transform:scaleX(1);
	transition:all 0.4s 0.15s;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

#contents{background:#000}