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

.on .head{background: #0f1d40;}

/* visual */
#visual{
	position:relative;
	width:100%;height:100vh;
	overflow:hidden;
}
#visual .videoWrap{
	position:absolute;right:0;top:50%;left:auto;
	width:100%;height:100%;transform:translate(0%, -50%);
}
#visual .videoWrap video{
width:100%;height:100%;object-fit:cover;
}
#visual .scroll{
	overflow:hidden;
	position:absolute;right:5%;bottom:0;
	width:2px;height:160px;
	box-shadow:-1px 0 0 rgba(255,255,255,0.4) inset;
}
#visual .scroll>div{
	position:absolute;left:-1px;top:0;
	width:2px;height:60px;
	background:#fff;
	animation:scrollAni 1s infinite;
}
@keyframes scrollAni{
	0%{transform:translateY(0);}
	100%{transform:translateY(280%);}
}
@media screen and (max-width:1800px){
#visual .videoWrap video{width:110%;}
}
@media screen and (max-width:1640px){
#visual .videoWrap video{width:125%;}
}

#visual .titlearea{
position: absolute;
bottom:70px;
left:0;
z-index:100;
padding:0 2.6vw;
box-sizing:border-box;
}
#visual .titlearea h3{
font-size:120px;color:rgba(230,249,254,1);font-weight: 550;line-height: 1em;text-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
#visual .titlearea p{
font-size:50px;color:#fff;font-weight: 500;line-height: 1.2em;
margin-top: 50px;text-shadow: 4px 4px 8px rgba(0,0,0,0.5);font-family: "Noto Sans KR";
}

.mainTitle1{}
.mainTitle1>span{overflow:hidden;display:inline-block;position: relative;font-size:68px;font-weight:600;line-height:1.2em;}
.mainTitle1>span::before {  
	position: absolute;left:0;top: 0;
	width: 100%;height: 100%;
	background: linear-gradient(
        to right,
        #48d2fe 0%,
        #5adfed 16%,
        #6ce9dc 32%,
        #7ccae1 48%,
        #7db4eb 64%,
        #7d99f8 80%,
        #48d2fe 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	animation: textGradient 2s linear infinite;
}
@keyframes textGradient {
	0% {
		background-position: 0% center;
	}
	100% {
		background-position: -200% center;
	}
}



/* sec1 */
.sec1{
	padding:160px 5% 145px;
	/* background:#0f1d40; */
}
.sec1 .conwrap{}
.sec1 .conwrap .slg{
	display:flex;flex-wrap:wrap;justify-content:flex-end;
	width:100%;
	margin-bottom:180px;
}
.sec1 .conwrap .slg>div>div{overflow:hidden;text-align:left;}
.sec1 .conwrap .slg>div>div>span{font-size:min(4.8vw , 104px);font-weight:600;line-height:1.2em;}
.sec1 .conwrap .slg>div>div:nth-child(1)>span{color:#00a3d9;}
.sec1 .conwrap .slg>div>div:nth-child(2)>span{color:#fff;}
.sec1 .conwrap .btmarea{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.sec1 .conwrap .btmarea .txtarea{width:50%;}
.sec1 .conwrap .txtarea h3>span:before{content: "Our Purpose";}
.sec1 .conwrap .txtarea h4{margin:45px 0 30px;font-size:38px;color:#fff;font-weight:600;line-height:1.3em;}
.sec1 .conwrap .txtarea p{font-size:22px;color:rgba(255,255,255,0.7);line-height:1.5em;font-weight:300;}
.sec1 .conwrap .imgarea{overflow:hidden;width:40.25%;border-radius:10px;}
.sec1 .conwrap .imgarea>div{
	width:100%;
	aspect-ratio:1/1;
	background:url(/images/main/sec1_img1.jpg) no-repeat;
	background-size:cover;
}





/* sec2 */
.sec2{padding:160px 0 0;/* background:#070f23; */}
.sec2 h3>span:before{content: "Our Mission";}
.sec2 .conwrap{display:flex;justify-content:flex-end;padding:0 5% 160px;}
.sec2 .conwrap .txtarea{
	width:58.55%;
	margin-right:3%;
}
.sec2 .conwrap .txtarea p{margin-top:30px;font-size:22px;color:rgba(255,255,255,0.7);line-height:1.5em;font-weight:300;}
.sec2 .imgarea{overflow:hidden;width:100%;position: relative;}
.sec2 .imgarea>div{	
	width:100%;height:800px;
	background:url(/images/main/sec2_img.jpg) no-repeat;
	background-size:cover;
}





/* sec3 */
.sec3{position:relative;padding:230px 5%;/* background:#0a1531; */}
.sec3 #starsCanvas{
	width:100%;height:100%;
	position:absolute;left:0;top:0;
}
.sec3 h3>span:before{content: "Our Pipeline";}
.sec3 .titlearea{display:flex;align-items:center;justify-content:space-between;}

.btnMore{
	display:flex;align-items:center;justify-content:center;
	width:160px;height:60px;
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,0.7);border-radius:30px;
}
.btnMore>span{font-size:13px;color:rgba(255,255,255,0.9);text-align:center;}

.sec3 .conwrap{position:relative;z-index:10;margin:110px 0 0;}
.sec3 .conwrap ul{display:flex;flex-wrap:wrap;}
.sec3 .conwrap ul li{width:33.333%;}
.sec3 .conwrap ul li:nth-child(2){margin-right:33.333%;margin-bottom:60px;}
.sec3 .conwrap ul li:nth-child(3){margin-left:33.333%;}
.sec3 .conwrap ul li>div{max-width:400px;width:100%;}
.sec3 .conwrap ul li>div .num{
	display:flex;align-items:center;justify-content:center;
	width:50px;height:50px;
	box-sizing:border-box;
	border:3px solid #00a3d9;border-radius:50%;
	background:#fff;
	font-size:16px;color:#000;text-align:center;font-weight: bold;
}
.sec3 .conwrap ul li>div .num span{}
.sec3 .conwrap ul li>div .tit{
	margin:30px 0 20px;
	font-size:38px;color:#00a3d9;font-weight:600;line-height:1.4em;
}
.sec3 .conwrap ul li>div .txt{
	font-size:22px;color:rgba(255,255,255,0.7);line-height:1.5em;font-weight:300;
}





/* sec4 */
.sec4{position:relative;padding:230px 0 0;/* background:#0f1d40; */}
.sec4 .titlearea{padding:0 5%;text-align:right;}
.sec4 h3>span:before{content: "Our Approach";}
.sec4 .conwrap{
	position:relative;
	margin:55px 0 0;
	display:flex;justify-content:space-between;
}
.sec4 .conwrap .img{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	max-width:400px;
	width:33vw;
}
.sec4 .conwrap .txtwrap{
	display:flex;align-items:center;
	overflow:hidden;
	box-sizing:border-box;
	width:49.25%;min-height:60vh;	
	background:#204282;
	box-sizing:border-box;
}
.sec4 .conwrap .txtwrap:nth-child(2){padding:60px 12% 60px 5%;text-align:right;padding-right:200px;}
.sec4 .conwrap .txtwrap:nth-child(3){padding:60px 5% 60px 12%;padding-left:200px;;}
.sec4 .conwrap .txtwrap h4{font-size:38px;color:#fff;font-weight:600;line-height:1.4em;}
.sec4 .conwrap .txtwrap p{margin-top:25px;font-size:22px;color:rgba(255,255,255,0.7);line-height:1.5em;font-weight:300;}
.sec4 .txtarea{padding:210px 5%;text-align:center;}
.sec4 .txtarea h5{font-size:64px;color:#fff;font-weight:600;line-height:1.3em;}
.sec4 .txtarea p{margin-top:25px;font-size:25px;color:rgba(255,255,255,1);line-height:1.5em;font-weight:300;}





/* sec5 */
.sec5{
	position:relative;
	display:flex;
	padding:170px 5%;
	/* background:#0a1531; */
}
.sec5 h3>span:before{content:"News";}
.sec5 .titlearea{width:25%;}
.sec5 .conwrap{
	box-sizing:border-box;
	position:relative;
	width:75%;
	padding-right:190px;
}
.sec5 .conwrap .news{height:180px;}
.sec5 .conwrap .news .swiper-slide{}
.sec5 .conwrap .news .swiper-slide>a{
	display:flex;
}
.sec5 .conwrap .news .swiper-slide>a .date{
	width:180px;
	font-size:24px;color:#fff;font-weight:600;line-height:1.6em;
}
.sec5 .conwrap .news .swiper-slide>a .con{
	width:calc(100% - 180px);
	font-size:30px;color:#fff;font-weight:600;line-height:1.4em;
	overflow: hidden;

}
.sec5 .conwrap .ctr{
	display:flex;justify-content:space-between;
	position:absolute;right:0;top:0;
	width:90px;
}
.sec5 .conwrap .ctr .vpaging{position:static;transform:translateY(-5px);}
.sec5 .conwrap .ctr .vpaging span{
	display:block;
	width:12px;height:12px;
	margin:7px 0;
	box-sizing:border-box;
	opacity:0.5;
	background:0;border:1px solid #fff;
}
.sec5 .conwrap .ctr .vpaging span.swiper-pagination-bullet-active{background:#fff;opacity:1;}
.sec5 .conwrap .ctr .story{}
.sec5 .conwrap .ctr .story .tit{font-size:16px;color:#fff;font-weight:600;}
.sec5 .conwrap .ctr .story .num{margin-top:10px;font-size:26px;color:#fff;font-weight:600;}

/*MOTION*/
.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgLeft.in-view{animation-name: fadeImgLeft;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}

  
  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(120px, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}

#visual .titlearea h3{
opacity:0;
}
#visual .titlearea.in-view h3{
animation:fadeInTitle 1.25s  ease-in-out;animation-fill-mode:forwards;
}
#visual .titlearea p{
opacity:0;
}
#visual .titlearea.in-view p{
animation:fadeInTitle 1s  ease-in-out;animation-fill-mode:forwards;
animation-delay:0.6s;
}
@keyframes fadeInTitle{
0%{opacity:0;}
100%{opacity:1;}
}


.sec1 .conwrap .slg>div>div{
opacity:0;
transform:translateX(100px);
}
.sec1 .conwrap .slg.in-view>div>div{
opacity:1;
transform:translateX(0px);
transition:all 1s ease;
}
.sec1 .conwrap .slg.in-view>div>div + div{transition-delay:0.1s;}
.sec1 .conwrap .txtarea .mainTitle1,
.sec1 .conwrap .txtarea h4,
.sec1 .conwrap .txtarea p{opacity:0;}
.sec1 .conwrap .txtarea.in-view .mainTitle1,
.sec1 .conwrap .txtarea.in-view h4,
.sec1 .conwrap .txtarea.in-view p{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
   animation-delay: calc(0.6s + 20ms * var(--char-index));
}
@keyframes titleAniLeft{
    0%{ transform:translate3d(-70px, 0px, 0);opacity:0;}
    100%{transform:translate3d(0, 0, 0);opacity:1;}
}
@keyframes titleAniRight{
    0%{ transform:translate3d(70px, 0px, 0);opacity:0;}
    100%{transform:translate3d(0, 0, 0);opacity:1;}
}
@keyframes titleAniUp{
    0%{ transform:translate3d(0px, 70px, 0);opacity:0;}
    100%{transform:translate3d(0, 0, 0);opacity:1;}
}
.sec1 .conwrap .txtarea.in-view h4{animation-delay:0.1s;}
.sec1 .conwrap .txtarea.in-view p{animation-delay:0.2s;}

.sec1 .conwrap .imgarea{opacity:0;transform:translateY(50px);}
.sec1 .conwrap .imgarea.in-view{
opacity:1;transform:translateY(0px);transition:all 0.9s ease;
}
.sec1 .conwrap .imgarea>div{transform:scale(1.25);filter:blur(10px);}
.sec1 .conwrap .imgarea.in-view>div{transform:scale(1);filter:blur(0px);transition:all 1.2s ease 0.35s;}

.sec2 .conwrap .txtarea .mainTitle1,
.sec2 .conwrap .txtarea p{opacity:0;}
.sec2 .conwrap .txtarea.in-view .mainTitle1,
.sec2 .conwrap .txtarea.in-view p{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
   animation-delay: calc(0.6s + 20ms * var(--char-index));
}
.sec2 .conwrap .txtarea.in-view p{animation-delay:0.12s;}

.sec2 .imgarea>div{transform:scale(1.25);filter:blur(10px);}
.sec2 .imgarea.in-view>div{transform:scale(1);filter:blur(0px);transition:all 1.2s ease 0.3s;}
.sec2 .imgarea:before{
position: absolute;content:'';
width:50%;height:100%;
top:0;left:0;
background: rgba(255,255,255,0.1);
z-index:10;

}
.sec2 .imgarea:after{
position: absolute;content:'';
width:50%;height:100%;
top:0;right:0;
background: rgba(255,255,255,0.1);z-index:10;

}
.sec2 .imgarea.in-view:before,
.sec2 .imgarea.in-view:after{width:0;transition:all 1s ease 0.1s;}

.sec3 .mainTitle1,
.sec3 .btnMore{opacity:0;}
.sec3 .mainTitle1.in-view,
.sec3 .btnMore.in-view{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
   animation-delay: calc(0.6s + 20ms * var(--char-index));
}
.sec3 .btnMore.in-view{animation: fadeRight 0.9s cubic-bezier(.2, 0, .4, 1);animation-delay:0s;animation-fill-mode: forwards;}

.sec3 .conwrap ul li{opacity:0;transform:translateX(-70px);}

.sec3 .conwrap ul li:nth-child(3),
.sec3 .conwrap ul li:nth-child(4){transform:translateX(70px);}
.sec3 .conwrap.in-view ul li{
opacity:1;transform:translateX(0px);transition:all 1s ease 0.1s;
}
.sec3 .conwrap.in-view ul li:nth-child(2){transition-delay:0.2s;}
.sec3 .conwrap.in-view ul li:nth-child(3){transition-delay:0.3s;}
.sec3 .conwrap.in-view ul li:nth-child(4){transition-delay:0.4s;}

.sec4 .mainTitle1{opacity:0;}
.sec4 .mainTitle1.in-view{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
   animation-delay: calc(0.6s + 20ms * var(--char-index));
}

.sec4 .conwrap .txtwrap{opacity:0;transform:translateX(-60px);}
.sec4 .conwrap .txtwrap:nth-child(3){transform:translateX(60px);}
.sec4 .conwrap.in-view .txtwrap{opacity:1;transform:translateX(0px);transition:all 1s ease 0.1s;}
.sec4 .conwrap .img{opacity:0;transform-origin:center;}
.sec4 .conwrap.in-view .img{
opacity:1;transition:all 1s ease 0.3s;z-index:30;
} 


@keyframes titleAniUp2{
    0%{ transform:translate3d(0px, 70px, 0);opacity:0.1;filter:blur(7px);}
    100%{transform:translate3d(0, 0, 0);opacity:1;}
}
.sec4 .txtarea h5,
.sec4 .txtarea p{opacity:0;}
.sec4 .txtarea.in-view h5,
.sec4 .txtarea.in-view p{
animation: titleAniUp2 0.9s cubic-bezier(.2, 0, .4, 1);

  animation-fill-mode: forwards;
   animation-delay: 0s;
}
.sec4 .txtarea.in-view p{animation-delay: 0.05s;}

.sec5 .mainTitle1{opacity:0;}
.sec5 .mainTitle1.in-view{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
}
.sec5 .conwrap{opacity:0;}
.sec5 .conwrap.in-view{
animation: titleAniLeft 0.9s cubic-bezier(.2, 0, .4, 1);
  animation-fill-mode: forwards;
   animation-delay: 0.1s;
}