@import url("common.css");



.fp-viewing-slide2 .header .header_in h1 a svg,
.fp-viewing-slide4 .header .header_in h1 a svg,
.fp-viewing-slide5 .header .header_in h1 a svg {
  -webkit-filter: unset;
  filter: unset;
  transition: all 0.5s ease;
}

.fp-viewing-slide2 .header .header_in .top_util ul li a, 
.fp-viewing-slide4 .header .header_in .top_util ul li a, 
.fp-viewing-slide5 .header .header_in .top_util ul li a {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

.fp-viewing-slide2 .header .gnb ul li > a, 
.fp-viewing-slide4 .header .gnb ul li > a, 
.fp-viewing-slide5 .header .gnb ul li > a {color:var(--black);}

.fp-viewing-slide5 .header {opacity:0; visibility:hidden;}

/* 메인!! */
.section {position: relative; width: 100%; height: 100vh; overflow: hidden; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column;}
.section .bg {width:100%; height:100%; position:absolute; top:0; left:0; transform:scale(1.5);  transition:all 1.5s ease}
.section.action .bg {transform:scale(1); transition:all 1.5s ease;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}


.section_copy {position:absolute; bottom:50px; left:50%; transform: translateX(-50%); z-index:80; width:90%; max-width:1650px; display:flex; flex-wrap:Wrap; align-items:center; justify-content: space-between;}
/* 텍스트 */





#visual {position:relative; background:var(--black);}
#visual .visual_in {width:100%; height:100%; position:relative; }
#visual .visual_in::after {content:''; background:url("/img/ci.svg")no-repeat center / 100% auto; max-width:665px;  aspect-ratio: 665 / 700; width:40%; position:absolute; bottom:-20px; left:-60px; -webkit-filter: brightness(0) invert(1); 
filter: brightness(0) invert(1);  z-index:60;}
#visual .visual_in .slick-list, #visual .visual_in .slick-track {height:100%;}
#visual .visual_in .v_bg {position:relative; width:100%; height:100%;}
#visual .visual_in .v_bg::after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; }
#visual .visual_in .v_bg .bg {width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1.18); transition:all 3s ease-out;}
#visual .visual_in .v_bg.action .bg {transform:scale(1); transition:all 3s ease-out;}
#visual .v_txt {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:60;}
#visual .v_txt h2 {display:inline-flex; color: var(--white); font-family: var(--eng); font-size: 6rem; font-weight: 900; line-height: 1.3; opacity:0;filter:Alpha(opacity=0);
    -webkit-transform: translateY(50px); 
    transform: translateY(50px); animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;}
#visual .v_txt .text-ani {display:inline-flex; font-family:inherit; font-weight:inherit; line-height:inherit;}
#visual .v_txt .text-ani span {white-space:nowrap;  width:0; overflow:hidden; display:block; line-height:inherit;}
#visual .v_txt .text-ani span.t-ani1 {width:0; transition:all 1s ease;  }
#visual .v_txt .text-ani span.t-ani1.on {width:85px; transition:all 1s ease; }
#visual .v_txt .text-ani span.t-ani2 {transition:all 2s ease; font-weight:100;}
#visual .v_txt .text-ani span.t-ani2.on {width:206px; transition:all 2s ease; }
#visual .v_txt p {color:var(--white); opacity:0;filter:Alpha(opacity=0);
    -webkit-transform: translateY(50px); 
    transform: translateY(50px); animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;}

#visual .slick-dots {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;  width:90%; max-width:1650px; position:absolute; bottom:60px; left:50%; transform:translate(-50%,-50%); z-index:9999; gap:0 18px;}
#visual .slick-dots li {cursor:pointer; cursor:pointer;}
#visual .slick-dots li button {font-size:0; background-color:transparent; border:0; padding:0; width:14px; height:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; cursor:pointer;}
#visual .slick-dots li button::before {content:''; width:8px; aspect-ratio: 3 / 3; background:rgba(255,255,255,0.3); border-radius:100%; display:block; position:relative; font-size:0;}
#visual .slick-dots li.slick-active button {width:14px;}
#visual .slick-dots li.slick-active button::before {width:100%; border-radius:0; background:url("/img/v_dot.svg")no-repeat center / 100% auto;}
/*** Visual ***/






@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}


.ani_effect {opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px);  transform: translateY(50px); }
.section.action .ani_effect {animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;}
.section.action .ani_effect.delay1 {animation-delay:0.3s;}
.section.action .ani_effect.delay2 {animation-delay:0.5s;}
.section.action .ani_effect.delay3 {animation-delay:0.7s;}
.section.action .ani_effect.delay4 {animation-delay:0.9s;}


#about {position:relative; background:var(--white) url("/img/ci.svg")no-repeat bottom -67px right 50px;}
#about .basic_in {display:flex; flex-wrap:wrap; align-items:center;}
#about .basic_in .imgBox {flex:1; overflow:hidden;}
#about .basic_in .imgBox img {max-width:100%; transform:translateX(-100%); transition:all 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
#about.action .basic_in .imgBox img {transform:translateX(0); transition:all 1.5s 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
#about .basic_in .tBox {flex:1; padding-left:115px; box-sizing:border-box;}
#about .basic_in .tBox .fs22 {margin:15px 0 55px;}


#lab {}
#lab .bg {background:url("/img/lab_bg.jpg")no-repeat center / cover;}
#lab .tBox {position:relative; z-index:10;}
#lab .tBox .fs68 {color:var(--white);}
#lab .tBox .fs22 {color:rgba(255,255,255,0.7);}
#lab .tBox .fs22 {margin:15px 0 55px;}


#app {}
#app .bg {background:url("/img/app_bg.jpg")no-repeat center / cover;}
#app .basic_in {display:flex; flex-wrap:wrap; align-items:center; position:relative; z-index:10; gap:0 30px;}
#app .basic_in .tBox {flex:1;}
#app .basic_in .tBox .fs68 {margin:0 0 15px;}
#app .basic_in .tBox .fs22 {margin:7px 0 55px;}
#app .basic_in .imgBox {position:relative; flex:1; text-align:center;}
#app .basic_in .imgBox > span {width:90%; display:inline-block;}
#app .basic_in .imgBox > span img {max-width:100%; opacity:0; transform:translateY(50px);}
#app.action .basic_in .imgBox > span img  {opacity:1; transition:all 1s 1s cubic-bezier(0.4, 0, 0.2, 1); transform:translateY(0px);}
#app .basic_in .imgBox ul {max-width:460px; height:100%; width:90%; position:absolute; top:0; left:50%; transform:translateX(-50%);}
#app .basic_in .imgBox ul li {position:absolute; border-radius: 100%; opacity:0; transform:scale(0.8);}
#app.action .basic_in .imgBox ul li {opacity:1; transform:scale(1);}
#app .basic_in .imgBox ul li.ico1 {top:-35px; right:-35px; background: rgba(255, 255, 255, 0.70); box-shadow: 0 0 40px 0 rgba(36, 49, 142, 0.10); backdrop-filter: blur(25px);}
#app .basic_in .imgBox ul li.ico2 {top:24%; left:-18px; background: rgba(255, 255, 255, 0.70); box-shadow: 0 0 40px 0 #D9CDC5; backdrop-filter: blur(25px);}
#app .basic_in .imgBox ul li.ico3 {bottom:40px; right:50px; background: rgba(255, 255, 255, 0.70); box-shadow: 0 0 40px 0 rgba(183, 170, 160, 0.50); backdrop-filter: blur(21px);}

#app .basic_in .imgBox ul li.ico1 {transition:all 1.3s 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
#app .basic_in .imgBox ul li.ico2 {transition:all 1.3s 1.8s cubic-bezier(0.4, 0, 0.2, 1);}
#app .basic_in .imgBox ul li.ico3 {transition:all 1.3s 2.2s cubic-bezier(0.4, 0, 0.2, 1);}



/*******************************************************************************
	@media ~1700px
*******************************************************************************/
@media all and (max-width:1700px) { 


}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

#about .basic_in .tBox {padding-left:70px;}
#about .basic_in .tBox br {display:none;}

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


#visual .v_txt h2 {font-size:4.5rem;}
#visual .v_txt .text-ani span.t-ani1.on {width:65px;}
#visual .v_txt .text-ani span.t-ani2.on {width:145px;}


#about {background-size:40% auto; background-position:bottom right;}
#about .basic_in .tBox {padding-left:35px;}
#about .basic_in .tBox .fs22 {margin:15px 0 30px;}

#lab .tBox .fs22 {margin:15px 0 30px;}

#app .basic_in .imgBox ul li img {max-width:100%;}
#app .basic_in .imgBox ul li.ico1 {max-width:34%; height:auto; top:-12%; right:-12%;}
#app .basic_in .imgBox ul li.ico2 {max-width:25%; height:auto;}
#app .basic_in .imgBox ul li.ico3 {max-width:30%; height:auto; bottom:10%; right:10%;}
#app .basic_in .tBox .fs22 {margin:7px 0 30px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.section_copy {display:none;}

#visual .visual_in::after {width:55%;}
#visual .slick-dots {gap:0 12px; bottom:30px;}
#visual .v_txt h2 {font-size:3rem;}
#visual .v_txt p {margin:10px 0 0;}
#visual .v_txt .text-ani span.t-ani1.on {width:37px;}
#visual .v_txt .text-ani span.t-ani2.on {width:85px;}


#about {background-size:50% auto; background-position:bottom -20px center;}
#about .basic_in .imgBox {flex:none; width:100%;}
#about .basic_in .tBox {flex:none; width:100%; padding-left:0; padding-top:30px; text-align:center;}

#lab {text-align:center; background:var(--black);}
#lab br {display:none;}
#lab .bg {background-position:center right 20%; opacity:0.6;}


#app .basic_in {}
#app .basic_in .imgBox {flex:none; width:100%; max-width:220px; margin:0 auto;}
#app .basic_in .tBox {flex:none; width:100%; text-align:center; margin:30px 0 0;}







}