@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
.ms-preloader {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible;
 background-color: #151515;}
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000 }
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end;
	height:100%;
}
.main-visual-txt-inner {margin-bottom:10rem;}
.main-visual-txt-box .main-visual-logo,
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn,
.main-visual-plus-txt{
	opacity:0; 
}
.main-visual-txt-box .main-visual-logo{width:15.4rem; margin-bottom:5rem;}
.main-visual-txt-box .main-visual-logo img{width:100%;}
.main-visual-txt-box .main-visual-txt1{font-size:4.4rem; line-height:1.22; font-weight:400; letter-spacing:-0.015em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; letter-spacing:-0.065em; color:#fff; margin-bottom:1.25em; }
.main-visual-txt-box .main-visual-txt3{font-size:1.8rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); line-height:1.5; margin-bottom:1.66em; }
.main-visual-txt-box .main-visual-more-btn{display:inline-block; font-size:1.6rem; color:#333; padding:1.5rem 3rem; border-radius:3rem; background-color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-logo,
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; line-height: 1.19;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

.main-visual-plus-txt{position: absolute; bottom:4rem; left:50%; transform:translateX(-50%); font-size:1.4rem; color:rgba(255,255,255,0.5); letter-spacing:-0.02em; width:100%; text-align:right; box-sizing: border-box;}
.active-item .main-visual-plus-txt{animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@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); 
	}
}
@keyframes text-active-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translate(-50%, 50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translate(-50%, 0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:20px; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:5px; }
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:12px; height:12px; background-color:#fff; font-size:0; opacity:0.8;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.main-visual-con .slick-dots li.slick-active button{background-color:#000; opacity:1.0; }

/* 메인 비주얼 :: pause,play */
.main-visual-con .slick-control-btns{display:inline-block; vertical-align:top; margin-left:5px; }
.main-visual-con .slick-control-btns button{color:#fff; vertical-align:top;}
.main-visual-con .slick-control-btns button i{vertical-align:top; font-size:14px; position:relative; top:-1px;}
.main-visual-con .slick-control-btns .slick-play-btn{display:none;}

/* 메인 비주얼 :: 화살표 */
/* .main-visual-con .slick-arrow{	position:absolute; width:50px; top:50%;transform:translateY(-50%); border:0; cursor:pointer; z-index:9; font-size:50px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
.main-visual-con .slick-arrow.slick-prev{left:10px;}
.main-visual-con .slick-arrow.slick-next{right:10px;} */ 
.arrows-wrapper {align-self: flex-end; margin: 0 -0.5rem;}
.arrows-wrapper button {margin: 0 0.5rem;}
.arrows-wrapper button i {font-size: 2.4rem; color: rgba(255, 255, 255, 0.5);}

/* 메인 비주얼 :: 카운터 */
.main-visual-navi{position:absolute; top:49%; left:0; width:100%; z-index:11; font-size: 1.6rem; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; font-weight: 500; transform: translateY(100%); opacity: 0; transition:transform ease-out 0.8s 0.4s, opacity 0.5s 0.4s;}
#wrap.active .main-visual-navi {transform: translateY(0); opacity: 1;}
.main-visual-navi .area-box {display:flex; height: 4rem;}
.main-visual-conuter {display:flex; align-items:center; margin-right: 3rem;}
.main-visual-conuter .left-num {position: relative; top: -1.5rem;}
.main-visual-conuter .right-num {position: relative; top: 1rem; left: -0.5rem;}
.main-visual-conuter span,
.main-visual-conuter .middle{display:inline-block; vertical-align:middle;}
.main-visual-conuter .middle{margin:0; width: 3.182rem; height: 2px; background: rgba(255, 255, 255, 0.2); transform: rotate(-45deg);}
.main-visual-conuter .left-num span:first-of-type, 
.main-visual-conuter .cur-num {font-size: 3rem; color: #fff; font-weight: 700;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon-box {position: absolute;
    bottom: 14.3rem;    
    left: -3rem;
    opacity: 0;
    transition: left ease-out 0.8s 0.4s, opacity 0.5s 0.4s;
    width: 100%;
    text-align: center;
    z-index: 9;}
.main-scroll-icon{/* position:absolute; bottom:55px; left:0; width: 100%; text-align:center; z-index:9; */ animation: upDown 1.5s ease-in-out infinite;}
#wrap.active .main-scroll-icon-box {opacity: 1; left:0;}
.main-scroll-icon .area-box {display: flex; flex-direction: column-reverse; align-items: self-start;}
.main-scroll-icon span{display: block; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; font-weight: 500; transform: rotate(90deg); font-size: 1.4rem; margin-bottom: 5rem; margin-left: -3rem;}
.main-scroll-icon .mouse-icon {position: relative; width: 12px; height: 17px; border: 2px solid rgba(255,255,255,0.5); border-radius: 6px; box-sizing: border-box;}
.main-scroll-icon .mouse-icon:after { position: absolute; left: 50%; margin-left: -1px; width: 2px; height: 3px; border-radius: 50%; background-color:rgba(255,255,255,0.5); content: ""; animation: scrollAni 1.1s infinite; }

@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

@keyframes scrollAni {
	0% {
		top: 2px;
	}
	100%{
		top: 10px;
		opacity: 0;
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:left;}
.main-tit-box .main-tit{color:#000; font-size:8rem; font-weight:700; letter-spacing:-0.02em; line-height:1.4em;}
.main-tit-box .main-tit strong{font-weight:600;}
.main-tit-box .main-sub-tit{display:block; /* margin-top:15px; */ color:#666; font-size:2rem; letter-spacing:-0.02em; line-height:1.5;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
	line-height: 1.15;
}
.main-tit-box.wt .main-tit{color:#fff;}
.main-tit-box.wt .main-sub-tit{color:#fff;}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* 메인 비주얼 :: 뉴스 */
.main-visual-news {position:absolute; bottom: 10rem; right: 0; z-index: 10; width: 100%;}
.main-visual-news .area-box {position: relative; display: flex; justify-content: flex-end;}
.main-visual-news-con {position: relative; transform: translateX(25%); opacity: 0; transition:transform ease-out 0.8s 0.4s, opacity 0.5s 0.4s; background: rgba(255,255,255,0.12); backdrop-filter: blur(15px); border-radius: 3.2rem; overflow:hidden; padding: 4.5rem 4.2rem; max-width:34.5rem; box-sizing:border-box;}
.visual-news-close-btn {position: absolute; font-size: 2.6rem; color: #fff; right: 1.8rem; top: 1.8rem;}
.main-visual-news-con:hover {border-color: var(--sub-color); transition:var(--transition-custom2);}
.visual-news-category{position: relative; display: inline-block; font-size:1.5rem; letter-spacing:-0.015em; color:#fff; font-weight:600; padding:0.7rem 2rem 0.6rem; box-sizing:border-box; border-radius:2rem; background:#1A4379; margin-bottom:14rem; z-index:1;}
.main-visual-news-con .txt-box {position: relative; width:100%;}
.main-visual-news-con .news-tit {font-size:2rem; letter-spacing:-0.015em; color: #fff; line-height:1.45em; font-weight: 500; margin-bottom: 1.6rem}
.main-visual-news-con .news-date {font-size:1.4rem; letter-spacing:-0.02em; color:rgba(255,255,255,0.5); line-height:2em; font-weight: 500;}

.main-visual-news-appends{position: relative; z-index:1; display: flex; margin-bottom:3.7rem;}
.main-visual-news-appends .appends-dots{margin-right:1rem;}
.main-visual-news-appends .appends-dots ul{display: flex; align-items:center;}
.main-visual-news-appends .appends-dots ul li + li{margin-left:1rem;}
.main-visual-news-appends .appends-dots ul li button{font-size:0; text-indent:-9999px; width:0.6rem; height:0.6rem; border-radius:50%; background:rgba(217,217,217,0.2); transition:var(--transition-custom)}
.main-visual-news-appends .appends-dots ul li.slick-active button{background:#fff;}

.main-visual-news-appends .appends-arrows{display: flex; align-items:center;}
.main-visual-news-appends .appends-arrows button{font-size:2rem; color:rgba(255,255,255,0.4); transition:var(--transition-custom);}
.main-visual-news-appends .appends-arrows button:hover{color:#fff;}

#wrap.active .main-visual-news-con {transform: translateX(0); opacity: 1;}


/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
#mainContent1 {background: linear-gradient(180deg, #000000 0%, #5A91DD 50.96%, #EEF6FF 100%); padding: 41.8rem 0 0; width: calc(100vw + 1.5rem);}
.main-global-con{position: relative; width:100%; height:100%; text-align:center; margin-top:2rem;}
/* Global :: 지도 */
.global-map-img{display: block; text-align:center;}
.global-map-img img{max-width:100%; width:100%;}
.global-map-img img.m_ver{display:none;}

/* Global :: maker */
.global-map-makers{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}
.global-map-makers .makers{position: absolute; top:50%; left:50%; /* transform:translate(-50%, calc(-50% + 10px)); */ /* opacity:0; transition:var(--transition-custom); */}
.global-map-makers .makers i{font-size:1.6rem;}
.global-map-makers .makers .txt{position: absolute; font-size:1.2rem; letter-spacing:-0.02em; color:#000; font-weight:700; white-space: nowrap; display: inline-block; font-size: 1.4rem;  white-space: nowrap; font-weight: 500; background: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; padding: 2rem; border-radius: 50px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* border: 1px solid #fff; */ transform: translate(-50%,50%); opacity: 0; transition: var(--transition-custom2);}
.global-map-makers .makers .txt:before {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 40px;
	padding: 1px;
	background: linear-gradient(160deg, rgb(255 255 255 / 80%), transparent, rgb(255 255 255 / 80%));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
/* Global :: maker :: wave */
.global-map-makers .makers .wave{}
.global-map-makers .makers .wave span{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); border:1px solid; box-sizing:border-box; border-radius:50%; opacity:0; pointer-events: none;}
.global-map-makers .makers .wave span:nth-child(2){animation-delay: 1s !important;}
.global-map-makers .makers .wave span:nth-child(3){animation-delay: 2s !important;}

.head-office-box  {display: flex; align-items: center; justify-content: center;  position: absolute; top: 50%; left: 50%; width: 9.489%; /* height: 18.553%; */ aspect-ratio:1;}
.loca-dot {display:inline-block; width: 0.8rem; height: 0.8rem; border-radius:100%; background: #fff; position: absolute; top: calc(100% + 5.1rem);}
.head-office-logo {position: relative; display: flex; width: 100%; height: 100%; border-radius: 100%; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px); align-items: center; justify-content: center; z-index: 10;}
.head-office-logo:after {display: block; content: ""; width: 1px; height: 5.1rem; background: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; backdrop-filter: none;}
.head-office-logo img {max-width:7rem;}
.wave-group {position: absolute; left: 50%; top: 0; display: inline-block; width: 8.8rem; height: 8.8rem; /* opacity: 0; */ /* margin-top: 23%; */ margin-top: 105%; margin-left: -23%; transition: var(--transition-custom2); transition-delay: 1.5s;}
.wave-group span { background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation-fill-mode: both; position: absolute; left: 0; top: 0px; opacity: 0;  margin: 0; width: 100%; height: 100%; box-sizing: border-box; animation: wave-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; }
.wave-group span:nth-child(2) {-webkit-animation-delay: 1s; animation-delay: 1s;}
.wave-group span:nth-child(3) {-webkit-animation-delay: 1.5s; animation-delay: 1.5s;}
.wave-group span:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}

@keyframes wave-circle {
	0%{-webkit-transform: scale(0); transform: scale(0); opacity: 0.5;}
	50%{opacity: 1;}
	100%{-webkit-transform: scale(1); transform: scale(5); opacity: 0;}
}

/* .global-map-makers .makers.active .wave span{animation: map-wave 3s cubic-bezier(1, 2, 0.66, 3) infinite;} */

.global-map-img.animated + .global-map-makers .makers .txt {opacity:1; transform: translate(-50%,-50%);}
.global-map-img.animated + .global-map-makers .makers[data-city="대한민국_공장"] .txt {}
.global-map-img.animated + .global-map-makers .makers[data-city="Europe & Middle East"] .txt {transition-delay:0.3s;}
.global-map-img.animated + .global-map-makers .makers[data-city="Asia"] .txt {transition-delay:0.6s;}
.global-map-img.animated + .global-map-makers .makers[data-city="Russia & CIS"] .txt {transition-delay:0.9s;}
.global-map-img.animated + .global-map-makers .makers[data-city="America"] .txt {transition-delay:1.2s;}
.global-map-img.animated + .global-map-makers .makers[data-city="Oceania"] .txt {transition-delay:1.5s;}


/* animated */
.global-map-makers.animated .makers{transform:translate(-50%, -50%); opacity:1;}

.global-map-makers .makers[data-city="대한민국_공장"]{margin-left:0vw;}
.global-map-makers .makers[data-city="Europe & Middle East"]{margin-left:-35.3vw; margin-top: -4.15vw;}
.global-map-makers .makers[data-city="Asia"]{margin-left: -15.7vw; margin-top: -2.9vw;}
.global-map-makers .makers[data-city="Russia & CIS"]{margin-left: -20.5vw; margin-top: -11.6vw;}
.global-map-makers .makers[data-city="America"]{margin-left: 41vw; margin-top: -5.8vw;}
.global-map-makers .makers[data-city="Oceania"]{margin-left: -0.5vw; margin-top: 19.6vw;}


/* 카운트 */
.map-info-box {display: flex; position: absolute; bottom: 21.8rem; right: 20rem;}
.map-info-inner {text-align:center;}
.map-info-inner span {font-size:2.4rem; letter-spacing:-0.02em; color: #fff; font-weight: 700; line-height:1.4em;}
.map-info-inner:first-of-type {margin-right: 5rem;}
.count-num-box{display:flex; align-items:center; font-size:3rem}
.count-num-box > p {color: #ec008d; font-size:5.8rem; line-height: 5.8rem; font-weight: 700; letter-spacing: -0.05em;} 
.count-num-item-wrap{height:5em; overflow:hidden;}
.count-num-item-wrap .count-num-item-box{height: 150rem;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:#fff; font-size:15rem; font-weight:700;}	 
.count-num-item-wrap.is-one {margin-right:-1em;}
/* 카운트 active */
.animated .count-num-item-box{animation:count-up-ani 3s forwards;}
.animated .count-num-item-box.down {animation:count-down-ani 3s forwards;}
@keyframes count-up-ani {
    0% {
	   transform: translate3d(0, 0, 0);
    }
    100% {
	   transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
	   transform: translate3d(0, -90%, 0);
    }
    100% {
	   transform: translate3d(0, 0, 0);
    }
}


@media all and (max-width:1280px){
	.global-map-makers .makers .txt {font-size:1rem; padding: 1.2rem;}
	.map-info-box {right: 5rem; bottom: 5rem;}
	.map-info-inner span {font-size:2rem;}
	.count-num-item-wrap {height: 3em;}
	.count-num-item-wrap .count-num-item-box {height: 100rem;}
	.count-num-item-wrap .count-num-item-box .count-num-item {    font-size: 10rem;}
	.count-num-item-wrap.is-one {margin-right: -0.5em;}
	.head-office-logo img {max-width:5rem;}
	.head-office-logo:after {height: 3rem;}
	.loca-dot {width: 0.6rem; height: 0.6rem; top: calc(100% + 3rem); margin-left: -0.6px;}
}

@media all and (max-width:800px){
	#mainContent1 {padding: 11rem 0 10rem;}
	.global-map-img {margin: 8rem 0 0;}
	.global-map-img img {display:none;}
	.global-map-img img.m_ver{display:block; padding-bottom: 16rem;} 
	.global-map-makers .makers {display:none;}
	
	.head-office-box {margin-top: -27.8vw !important; margin-left: -7.3vw !important; width: 8.667rem; height: 8.667rem;}
	.head-office-logo img {width: 3.37rem;}
	.map-info-box {bottom: 0; right: initial; left: 2rem;}
	.map-info-inner span {font-size:2.4rem;}
	.count-num-item-wrap.is-one {margin-right: -2rem;}
	.wave-group {width: 4.237rem; height: 4.237rem; margin-top: 115%;}
}

@media all and (max-width:640px){
	.loca-dot {width: 0.4rem; height: 0.4rem; margin-left: 1px;}
	.head-office-box {/* margin-top: -38vw !important; margin-left: -16.2vw !important; */         margin-top: -34.5vw !important;
        margin-left: -8.9vw !important;}
}


@media all and (max-width:480px){
	html.ios-os .count-num-item-wrap.num02 {margin-top: 0.8rem;}
	.head-office-box {margin-top: -44vw !important; margin-left: -11vw !important;}
	.loca-dot {margin-left: 0;}
}

@media all and (max-width:412px){
	.loca-dot {margin-left: 0;}
	.head-office-box {margin-top: -48.5vw !important; margin-left: -12vw !important;}
}

@media all and (max-width:390px){
	
	.head-office-box {margin-top: -43.5vw !important; margin-left: -10.7vw !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#mainContent2 {padding: 23.3rem 0 20rem;}
.scientists-list-box {position: relative;}
.scientists-list-menu {position: relative; z-index: 10;}
.scientists-list-menu ul {position: relative; z-index: 10; display:flex; margin: 0 -2rem;}
.scientists-list-menu ul li {padding: 0 2rem;}
.scientists-list-menu ul li:first-of-type {position: relative;}
.scientists-list-menu ul li:first-of-type:after {display: block; content:""; position: absolute; right: 0; width: 2px; height: 1.7rem; background: #ddd; top: 50%; transform: translateY(-50%);}
.scientists-list-menu ul li a {font-size:3.4rem; letter-spacing:-0.02em; color: rgba(0,0,0,0.2); font-weight: 600; line-height:1.1; /* font-family:var(--font-family2); */}
.scientists-list-menu ul li.selected a {color: var(--main-color);}
.scientists-container {width:calc(100% - 8.34%); margin-left: 19rem !important; padding-top: 7rem !important;}
.scientists-container .swiper-slide {width: 36.2rem !important; overflow:visible; -webkit-backface-visibility: hidden; /* 뒤집힘 방지 및 강제 하드웨어 가속 */
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0); /* 3D 레이어로 격상시켜 모바일 깜빡임 차단 */
    transform: translate3d(0, 0, 0);}
.scientists-container .swiper-slide .img-box {position: relative; width: 100%; height:0; padding-top:127.07%;}
.scientists-container .swiper-slide .img-box img {position: absolute; inset:0; max-width:100%; width: 100%; height:100%; object-fit:cover;}
.scientists-container .swiper-slide a {display: block; width: 100%; height: 100%; position: relative; border-radius: 2rem; overflow: hidden;}
.scientists-container .swiper-slide a:before {display: block; content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8,41,85,0.8); border-radius: 2rem; backdrop-filter: blur(25px); opacity: 0; transition:var(--transition-custom); z-index: 1;}
.scientists-container .swiper-slide a:hover:before {opacity: 1;}
.scientists-container .tit-box {position: absolute; bottom: 0; left: 0; padding: 4rem 3rem; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; z-index: 2;}
.scientists-container .tit-box .inner-box {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(15%); transition: transform 0.6s cubic-bezier(.22, .61, .36, 1), opacity 0.4s ease;}    
.scientists-container .tit-box:before {display: block; content: ""; background: rgba(0,0,0,0.2); position: absolute; bottom: 0; left: 0; width: 100%; height: 35%; backdrop-filter: blur(10px); mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, black 70%, black 100%); -webkit-mask-image: linear-gradient(180deg, transparent 7%, transparent 10%, black 50%, black 100%);}    
.scientists-container .tit-box .category {position: relative; font-size:1.6rem; letter-spacing:-0.02em; color: var(--main-color); font-weight: 500;}
.scientists-container .tit-box .name {position: relative; font-size:2.4rem; letter-spacing:-0.02em; color: #fff; font-weight: 600; margin-top: 1.3rem; line-height: 1.23;}
.scientists-container .tit-box i {color: #fff; font-size: 3rem; position: relative; margin-top: 2.3rem; opacity: 0;}
.scientists-container .swiper-slide a:hover .tit-box .inner-box {transform: translateY(0); /* opacity: 1; */ justify-content: center; align-items: center;}
.scientists-container .swiper-slide a:hover .tit-box i {opacity: 1;}
.scientists-container .swiper-slide a:hover .tit-box .name {text-align: center;}

.scientists-container .tit-box, 
.scientists-container .inner-box {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform; /* 브라우저에게 모션 변화를 미리 예고하여 끊김 방지 */
}

.scientists-container .img-box img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* .swiper-button-container {width: 100%; position:absolute; left: -11rem; top: 0;} */
.scientists-arrow-box {width: 100%; position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none !important;}
.swiper-button-container .area {display:flex; justify-content: flex-end;}
.swiper-button-container .swiper-button-prev, 
.swiper-button-container .swiper-button-next {position:static; width: auto; height: auto; margin-top: 0; pointer-events: auto !important;}
.swiper-button-container .swiper-button-prev:after {content:"\e93c";}
.swiper-button-container .swiper-button-next:after {content:"\e93f";}
.swiper-button-container .swiper-button-prev:after, 
.swiper-button-container .swiper-button-next:after {font-family:'xeicon'; color: #000; font-size: 4rem;}
.swiper-button-container .swiper-button-next {margin-left: 1.9rem;}
.swiper-button-container .swiper-button-prev.swiper-button-disabled, 
.swiper-button-container .swiper-button-next.swiper-button-disabled {opacity: 0.2;}

/* svg */
.scientists-deco {position: absolute; right: 30rem; top: 30rem; top: 40rem; transition:var(--transition-custom2); opacity: 0;}
.scientists-deco svg {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: visual_circle_rotate 22s linear infinite; }
@keyframes visual_circle_rotate {
	0%{transform: translate(-50%, -50%) rotate(0deg);}
	100%{transform: translate(-50%, -50%) rotate(360deg);}
}
.scientists-list-box.animated .scientists-deco {top: 35rem; opacity: 1;}

@media all and (max-width:1280px){
	.scientists-list-box.animated .scientists-deco {top: 30rem; right: 5rem;}
	.scientists-deco svg {width: 100rem !important; height: 100rem !important;}	
	.scientists-container {margin-left: var(--area-padding) !important; width: 100%;}
}

@media all and (max-width:800px){
	#mainContent2 {padding: 10rem 0;}
	/* .scientists-list-menu {position:static;} */
	.scientists-list-menu ul li a {font-size:2.4rem;}
	.scientists-container {padding-top: 4rem !important;}
	.scientists-arrow-box {width: 100%; position: absolute; top: 100%; left: 0; position:static;}
	#mainContent2 .swiper-button-container {position:static;/* top: 100%; */ height: 6.4rem; /* left: 50%; transform:translateX(-50%); */ /* transition:var(--transition-custom); */ margin-top: 1.6rem; /* opacity: 0; */ }
	#mainContent2 .swiper-button-container .swiper-pagination-progressbar {width: calc(100% - 17rem); height: 4px; background: rgba(0, 0, 0, 0.1);}
	#mainContent2 .swiper-button-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}
	#mainContent2 .swiper-button-container .area {justify-content: center; align-items: center; position: relative; height: 100%;}
	#mainContent2 .swiper-button-container .swiper-button-prev, #mainContent2 .swiper-button-container .swiper-button-next {position:absolute;}
	#mainContent2 .swiper-button-container .swiper-button-prev {left: 4rem; top: 50%; transform: translateY(-50%);}
	#mainContent2 .swiper-button-container .swiper-button-next {right: 4rem; top: 50%; transform: translateY(-50%);}
	/* .scientists-list-menu.animated .swiper-button-container {opacity: 1; transform:translateY(0) translateX(-50%); transition-delay:1.5s; } */
	.scientists-list-box.animated .scientists-deco {/* top: 38rem; */ right: -15rem;}
	.scientists-deco svg {width: 80rem !important; height: 80rem !important;}
	.scientists-container .tit-box .inner-box {transition:none;}
	.scientists-container .swiper-slide a:before {display:none;}
	.scientists-container .swiper-slide a:hover .tit-box .inner-box {transform: translateY(15%); justify-content: flex-end; align-items:initial;}
	.scientists-container .swiper-slide a:hover .tit-box i {opacity: 0;}
}

@media all and (max-width:480px){
	.swiper-button-container .swiper-pagination-progressbar {width: calc(100% - 13rem);}
	.swiper-button-container .swiper-button-prev {left:2rem;}
	.swiper-button-container .swiper-button-next {right: 2rem;}
	
}

/* main-bottom */
.main-bottom-box {background: #F5F5F5; position: relative; border-radius: 12rem 12rem 0 0;}
.main-bottom-box .main-tit-box {margin-bottom: 0;}
.main-bottom-box .main-tit-box .main-tit {font-size:5rem;}
.main-bottom-tit-box {display:flex; justify-content:space-between;}
.main-bottom-box .main-tit-box .main-sub-tit {margin-top: -0.5rem;}
.main-view-btn {align-self: flex-end; overflow:hidden; border-radius: 7rem;}
.main-view-btn.m-ver {display:none;}
.main-view-btn a {position: relative; display:flex; justify-content:space-between; align-items: center; width: 21.8rem; height: 5.2rem; border:2px solid #082955;/* background: #1A4379; */ border-radius:7rem; padding: 0 2rem 0 3rem; box-sizing:border-box; }
.main-view-btn a span {font-size:2rem; letter-spacing:-0.015em; color: #082955;}
.main-view-btn a i {color: #082955; font-size:2.4rem;}
.main-view-btn a:before {content: ""; z-index: -1; width: 0; height: 0; padding: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0) scale(0); transition: transform .15s ease-out; background: #082955;}
.main-view-btn a:hover span {color: #fff;}
.main-view-btn a:hover i {color: #fff;}
.main-view-btn a:hover:before {transition-duration: .3s; transform: translate3d(-50%, -50%, 0) scale(1.5);}

.ws-list-box {margin-top: 6rem;}
.ws-list {display:flex; }
.ws-list-container {margin-top: 6rem;}
.ws-list .swiper-slide {width: calc(50% - 1.2rem); border-radius: 2rem; overflow: hidden; }
.ws-list .swiper-slide a {display:flex; align-items:center; justify-content:center; width: 100%; height: 100%; background: #fff; transition:var(--transition-custom); padding:3rem; box-sizing:border-box; /* aspect-ratio: 2.23; */}
.ws-list .swiper-slide .txt-box {padding-left:5rem; box-sizing:border-box; width:65.12%}
.ws-list .swiper-slide .txt-box .tit {display: block; font-size:2.6rem; letter-spacing:-0.02em; color: #000; font-weight: 700; line-height:1.4em; margin-top: 1.2rem; transition:var(--transition-custom); overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.ws-list .swiper-slide .category {font-size:1.6rem; letter-spacing:-0.02em; color: var(--main-color); font-weight: 500; line-height:1.4em;}
.ws-list .info-box {margin-top: 2.4rem;}
.ws-list .info-box p {position: relative; padding-left:2.4rem; font-size:1.6rem; letter-spacing:-0.02em; color: #999; font-weight: 500; line-height:1.8em; box-sizing:border-box;}
.ws-list .info-box p i {position: absolute; top: 0.5rem; left:0;}
.ws-list .img-box {width: 34.88%; max-width:240px;}
.ws-list .img-box span {display: block; position: relative; width: 100%; height: 0; padding-top: 139.583%;}
.ws-list .img-box span img{width:100%; height:100%; object-fit:cover;}
.ws-list .swiper-slide a:hover {background: #082955;}
.ws-list .swiper-slide a:hover .txt-box .tit {color: #fff; transition:var(--transition-custom);}
.ws-list .swiper-slide a:hover .info-box p {color: rgba(255,255,255,0.6); transition:var(--transition-custom);}

#mainContent3 {padding: 20rem 0 9rem;}
#mainContent4 {padding: 9rem 0 20rem;}

.publications-list {display:flex; /* margin: 6rem -1.0115rem 0; */ margin: 6rem 0 0;}
.publications-list .swiper-slide {/* margin: 0 1.0115rem; width: calc(16.667% - 2.023rem); */}
.publications-list .swiper-slide a {position: relative; display: inline-block; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden;}
.publications-list .over-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 67, 121, 0.65); backdrop-filter: blur(7px);  text-align: center; padding: 4rem 4rem 2.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition:var(--transition-custom);}
.publications-list .over-box .top-box p {font-size:1.8rem; letter-spacing:-0.015em; font-weight: 500; color: #fff; line-height:1.445em;  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: keep-all;}
.publications-list .over-box .bottom-box p {font-size:1.3rem; letter-spacing:0.4em; font-weight: 500; color:rgba(255,255,255,0.4); margin-top: 1rem;}
.publications-list .over-box .bottom-box i {color: #fff; font-size:2.2rem;}
.publications-list .img-box img {max-width:100%;}
.publications-list .swiper-slide a:hover .over-box {opacity: 1;}


.arrow-wrapper {width: 100%; height: 6.4rem; margin-top: 2rem; display:none;}
.arrow-wrapper .area {position: relative; display: flex;     justify-content: center; align-items: center; height: 100%; width: 100%; box-sizing:border-box;}
.arrow-wrapper .swiper-button-prev, .arrow-wrapper .swiper-button-next {    width: auto; height: auto; margin-top: 0;}
.arrow-wrapper .swiper-button-prev {left: 0; top: 50%; transform: translateY(-50%);}
.arrow-wrapper .swiper-button-next {right: 0; top: 50%; transform: translateY(-50%);}
.arrow-wrapper .swiper-button-prev:after {font-family: 'xeicon'; color: #000; font-size: 4rem; content: "\e93c";}
.arrow-wrapper .swiper-button-next:after {font-family: 'xeicon'; color: #000; font-size: 4rem; content: "\e93f";}
.arrow-wrapper .swiper-pagination-progressbar {width: calc(100% - 9rem); height: 4px; background: rgba(0, 0, 0, 0.1);}
.arrow-wrapper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}
	
@media all and (max-width:1280px){
	.ws-list .swiper-slide .txt-box{padding-left:3rem;}
}
@media all and (max-width:800px){
	.arrow-wrapper {display: block;}
	#mainContent3 {padding: 10rem 0 7rem;}
	.main-bottom-box{border-radius:4rem 4rem 0 0;}
	.main-bottom-box .main-tit-box .main-tit {font-size:4rem;}
	.main-bottom-tit-box {flex-direction: column;}
	.main-view-btn.m-ver {display:block; margin-top: 2rem;}
	.main-view-btn.pc-ver {display:none;}
	.main-view-btn.m-ver a {width: 100%; background: #1A4379;}
	.main-view-btn.m-ver a span,
	.main-view-btn.m-ver a i {color: #fff;}
	/* .ws-list {flex-wrap: wrap; margin: -1.2rem 0;} */
	.ws-list {margin: 0;}
	.ws-list .swiper-slide {margin: 0; height:auto;}
	.ws-list .swiper-slide a{aspect-ratio: auto;}
	/* .ws-list li {width: 100%; margin: 1.2rem 0;} */
	.ws-list .swiper-slide .txt-box {padding: 3rem 2rem;}
	.ws-list .swiper-slide .txt-box .tit {font-size:2rem;}
	.ws-list .info-box p {font-size:1.5rem;}
	
	#mainContent4 {padding:7rem 0 10rem;}
	/* .publications-list {margin: 6rem -1rem 0; flex-wrap:wrap;} */
	.publications-list {margin: 5.6rem 0 0;}
	.publications-list .swiper-slide {margin:0; width: auto;/*  width: calc(33.334% - 2rem); */}
}
@media all and (max-width:480px){
	.ws-list .swiper-slide a{display: block; }
	.ws-list .img-box{width:100%; margin:0 auto 2rem;}
	.ws-list .swiper-slide .txt-box{width:100%; padding:0;}
	.ws-list .info-box{margin-top:1.6rem;}
}



/* -------- 메인 컨텐츠 :: Applications -------- */
#mainContent4 .bbs-list-style08{margin-top:6rem;}
#mainContent4 .sub-page.applications .bbs-list-style08 .bbs-item:not(:hover) .inner-box{background:#fff;}

@media all and (max-width:800px){
	#mainContent4 .bbs-list-style08{margin-top:3rem;}
}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; 
	top:55%; right:2%; 
	z-index:99; 
	margin-top:-142px;
	opacity:0;
	visibility:hidden;
	transition:var(--transition-custom2);
}
#rightBar.fixed{visibility:visible; opacity:1.0; top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff; transition:var(--transition-custom);}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:50px;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; opacity:0.2;filter:Alpha(opacity=20);}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	transition:var(--transition-custom);
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

/* Black Style */
#fp-nav.black ul li a span{background-color:#000}
#fp-nav.black ul li .fp-tooltip{color:#222;}