/* common */
header .logo path{ fill:#fff; }
header .headerBox nav #gnb > li > a,
header .headerBox .menuBtn{ color:#fff; }

main section{ position: relative; width: 100%; height: 100vh; overflow: hidden; }
main .visual .slideWrap,
main .visual .slideBox{ height: 100%; }
main .visual .slideBox .swiper-slide{ position: relative; padding: 100px 60px; display:flex; justify-content:center; align-items:center; }
main .visual .slideBox .swiper-slide .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
main .visual .slideBox .swiper-slide .txtBox .title{ color:#fff; letter-spacing: -2px; font-weight: bold;}
main .visual .slideBox .swiper-slide .txtBox .txt{ color:#fff; letter-spacing: -0.4px; line-height: 1.7; }
main .visual .slideBox .swiper-slide .txtBox .txt2{ color:rgba(255,255,255,0.4); letter-spacing: -1.2px; font-weight: bold; margin-bottom: 20px;}
main .visual .slideBox .swiper-slide .txtBox .txt2 span{ width: 100%; color: rgb(255, 255, 255, 0.4); background: linear-gradient(to left, #fff, #fff) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: all 1s 0.5s; }
main .visual .slideBox .swiper-slide:not(.slide01) .txtBox{ text-align: center; }
main .visual .slideBox .swiper-slide:not(.slide01) .txtBox .title{ margin-bottom: 30px; filter: blur(5px); -webkit-filter: blur(5px); letter-spacing: 20px; opacity: 0;  transition: all 1.5s 0.7s;}
main .visual .slideBox .swiper-slide:not(.slide01) .txtBox .txt{ font-weight: 500; opacity: 0; transform:translateY(50px); transition: all 1.5s 1.2s;}
main .visual .slideBox .swiper-slide.slide01{ align-items: flex-end; justify-content:flex-start; }
main .visual .slideBox .swiper-slide.slide01 .txtBox{ width: 100%; display:flex; justify-content:space-between; align-items: flex-end;}
main .visual .slideBox .swiper-slide.slide01 .txtBox .title{ color: rgb(255, 255, 255, 0.4);  transition: all 0.5s 1.5s;}
main .visual .slideBox .swiper-slide.slide01 .txtBox .txt{ text-align: right; }
main .visual .slideBox .swiper-slide-active:not(.slide01) .txtBox .title{ letter-spacing: -2px; filter: blur(0); -webkit-filter: blur(0); opacity: 1;}
main .visual .slideBox .swiper-slide-active:not(.slide01) .txtBox .txt{ opacity: 1; transform:translateY(0);}
main .visual .slideBox .swiper-slide-active.slide01 .txtBox .title{ color:#fff; }
main .visual .slideBox .swiper-slide-active.slide01 .txtBox .txt2 span{ background-size:100%; }
main .visual .scrollBox{ position: absolute; transform:translateX(-50%); left: 50%; bottom: 30px; z-index: 10; display:flex; align-items:center; padding: 10px 20px; border:1px solid #fff; border-radius:50px; }
main .visual .scrollBox figure{ display: flex; justify-content: center; align-items: center; }
main .visual .scrollBox p{ width: 175px; overflow: hidden; display:flex; margin: 0 10px; color:#fff; }
main .visual .scrollBox p span{ white-space:nowrap; animation: txtScroll 7s linear infinite; animation-play-state: running; animation-delay: 0; animation-direction: normal; margin-right: 10px;}

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

main .about{ background: #000; } 
main .about .w1700{ display:flex; height: 100%; align-items:center; position: relative;z-index: 2; }
main .about .w1700 .title{ margin-right: 290px; color:rgba(255,255,255,0.2); font-family: var(--exo); font-weight: bold; opacity: 1; flex-shrink:0; }
main .about .w1700 .title span{ color: rgb(255, 255, 255, 0.2); background: linear-gradient(90deg, #00B3C4 4.28%, #00489D 97.24%) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: all 1s 0.3s;}
main .about .w1700 .title.aos-animate span{ background-size:100%; }
main .about .txtBox{ position: relative; color:#fff; line-height: 1.5; font-weight: 600; white-space:nowrap; filter: blur(7px); -webkit-filter: blur(7px); letter-spacing: 5px; opacity: 0; transition: all 1.3s 1.3s; transform:translateX(40px); }
main .about .txtBox .txt2{ margin: 60px 0;}
main .about .txtBox .name{ font-weight: 400; letter-spacing: -0.4px;}
main .about .txtBox  br.mo{ display:none; }
main .about .txtBox.aos-animate{ letter-spacing: -0.92px; filter: blur(0); -webkit-filter: blur(0); opacity: 1; transform:translateX(0);}
main .about .bgBox{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
main .about .bgBox img{  position: absolute; width: max-content;}
main .about .bgBox .circle1{ top: -60%;  left: -20%; animation: circleMove 30s infinite;}
main .about .bgBox .circle2{ top: 40%; left: 40%; animation: circleMove2 30s 1s infinite;}

@keyframes circleMove {
    0%,100% { top: -40%; left: -20%; }
    25% { top: -70%; left: 55%; }
    50% { top: 40%; left: 55%; }
	75%{ top: 20%; left: -20%;}
}
@keyframes circleMove2 {
    0%,100% { top: 40%; left: 40%; }
    25% { top: -10%; left: -20%; }
    50% { top: -60%; left: -20%; }
	75%{ top: -35%; left: 40%;}
}

main .research{ background: url(/img/main/researchBg.png) no-repeat 50% 50%; background-size:cover; } 
main .research .w1700{ position: relative; z-index: 2; display:flex; justify-content:space-between; align-items:center; height: 100%;}
main .research .txtBox .title{ font-family: var(--exo); font-weight: 600; }
main .research .txtBox .title span{ color: rgb(255, 255, 255, 0.2); background: linear-gradient(90deg, #00B3C4 4.28%, #00489D 97.24%) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: all 1s 0.3s;}
main .research .txtBox .numBox{ display:inline-flex; background: rgba(0,0,0,0.5); border-radius:100px; padding: 25px 80px; margin: 30px 0 60px; text-align: center; color:#fff; }
main .research .txtBox .numBox .itemBox:not(:last-child){ margin-right: 60px; }
main .research .txtBox .numBox .itemBox:first-child .num{ width:155px; }
main .research .txtBox .numBox .itemBox .num{ font-weight: bold; font-family: var(--exo); margin-bottom: 10px; width:125px; white-space:nowrap; }
main .research .txtBox > .txt{ color:#fff; letter-spacing: -0.44px; line-height: 1.65;}
main .research .txtBox.aos-animate .title span{ background-size:100%;}
main .research .imgBox{ position: relative; width: 640px; height: 640px;}
main .research .imgBox > *{ position: relative; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: max-content;}
main .research .imgBox .inner{ position: relative; width: 500px; height: 500px; }
main .research .imgBox .inner span{ display:block; width: 100%; height: 100%; aspect-ratio: 1; content: ""; padding: 30px; border-radius: 50%; background: linear-gradient(230deg, rgba(0, 179, 196, 1), rgba(0, 72, 157, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;}
main .research .imgBox figure:not(.img) img{ transform-origin: 50% 50%;}
main .research .imgBox .img img{ position: relative; animation: imgMove 2.5s linear infinite}
main .research .imgBox .line img{ animation: rotateImg 30s linear infinite; animation-direction: reverse; }
main .research .imgBox .circle1 img{ animation: rotateImg 15s linear infinite;  }
main .research .imgBox .circle2 img{ animation: rotateImg 35s linear infinite; }

@keyframes rotateImg {
	from{ transform: rotate(360deg); }
	to{ transform: rotate(0); }
}

@keyframes imgMove {
	0%{ transform: translateY(0); }
	50%{ transform: translateY(-20px); }
	100%{ transform: translateY(0); }
}

main .bio{ display:flex; justify-content:center; padding-top: 130px; height: calc(100vh + 100px); background: url(/img/main/bioBg.png) no-repeat 50% 50%; background-size:cover; }
main .bio .bg{ position: absolute; top: 0; left: 0; z-index: -1;}
main .bio .ctnBox{ max-width:620px; width: 100%; }
main .bio .ctnBox *{ white-space:nowrap; color:#fff; }
main .bio .title{ display:block; color: rgb(255, 255, 255, 0.2); background: linear-gradient(90deg, #00B3C4 4.28%, #00489D 97.24%) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: all 1s 0.3s; font-weight: 600; font-family: var(--exo); margin-bottom: 100px;}
main .bio .title.aos-animate{ background-size:100%;}
main .bio .txtBox{ margin-left: 175px;}
main .bio .txtBox p{ transform: translate3d(0, 50px, 0);}
main .bio .txtBox .txt{ font-weight: 500; }
main .bio .txtBox .numBox{ margin:53px 0 57px; }
main .bio .txtBox .numBox .txt:not(:last-child){ margin-bottom: 30px; }
main .bio .txtBox .numBox .txt span{ display:inline-block; font-family: var(--exo); font-weight: bold; margin-left: 40px;}
main .bio .txtBox .numBox .txt:last-child span{ width: 75px;}