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

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}
.main-page #header{ transition:var(--transition-custom2); opacity:0; visibility: hidden; transform: translateY(3rem);}
.main-page.active #header{opacity:1; transform:none; visibility: visible; }
/* .main-page.active #header.hide {transform: translateY(calc(-1 * (var(--header-height) + var(--header-top))));} */

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

/* ******************  메인 인트로 ********************** */
.main-page {position: relative;}
#mainIntro {position: absolute; top:calc(50% - 1px); left:calc(50% - 1px); transform:translate(-50%, -50%); width:calc(100vw + 2px); height:calc(100vh + 2px); z-index:9; overflow:hidden;}
.main-intro-wrap {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.main-intro-wrap .intro-bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.5); backdrop-filter:blur(3rem);}
.intro-inner {position: relative; z-index: 1; width: 88.1rem; transition:var(--transition-custom2); }
.intro-inner .top-txt {text-align: left; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.2; opacity: 0; transform:translateX(-5rem); transition:var(--transition-custom2); margin-bottom: 3.4rem;}
/* .intro-inner .intro-logo {opacity: 0; transform:translateY(3rem); transition:var(--transition-custom2); transition-delay:0.4s;}
.intro-inner .intro-logo .intro-logo-svg {max-width: 100%;}
.intro-inner .intro-logo .intro-logo-svg path {fill:#fff} */
/* 심볼 노출 */
.intro-inner .intro-logo {opacity: 1; transform:none; transition:none; transition-delay:0s; overflow:visible;}
.intro-inner .intro-logo .intro-logo-svg {max-width: 100%; overflow:visible;}
.intro-inner .intro-logo .intro-logo-svg path {fill:#fff}
/* // */
.intro-inner .bottom-txt {text-align: right; }
.intro-inner .bottom-txt .bar {position: relative; display: inline-block; width: 39.5rem; height: 3px; border-radius: 3px; background-color: rgba(255,255,255,0.1);  opacity: 0; transform:translateY(3rem); transition:var(--transition-custom2); transition-delay:0.8s;}
.intro-inner .bottom-txt .bar:before {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 100%; background-color: #fff;}
.intro-inner .bottom-txt strong {display: inline-block; margin-left: 3.3rem; font-size: 2.2rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.2; opacity: 0; transform:translateX(-5rem); transition:var(--transition-custom2); transition-delay:0.8s;}

#mainIntro .main-scroll-icon {opacity: 0; transform:translateY(3rem); transition:var(--transition-custom2); transition-delay:1.0s;}

/* intro start */
.intro-start .intro-inner .top-txt {opacity: 1; transform:translateX(0);}
.intro-start .intro-inner .intro-logo {opacity: 1; transform:translateY(0);}
.intro-start .bottom-txt .bar {opacity: 1; transform:translateY(0);}
.intro-start .bottom-txt strong {opacity: 1; transform:translateX(0);}
#mainIntro.intro-start  .main-scroll-icon {opacity: 1; transform:translateY(0);}
.intro-start .intro-inner .bottom-txt .bar:before {animation:introBar 3s ease-in-out both; animation-delay:0.9s}
@keyframes introBar {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
/* intro end */
.intro-end .intro-inner {opacity: 0; filter:blur(1rem); transform:translateY(-3rem);}

/* 심볼 : 화면 정중앙 + 확대 상태로 시작 */
.intro-logo-svg .logo-symbol,
.intro-logo-svg .logo-text {transform-box: fill-box;}
.intro-logo-svg .logo-symbol {
	transform-origin: center;
	transform: translate(363.7px, -15px) scale(1.8);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
}
/* 로고 텍스트 */
.intro-logo-svg .logo-text {
	transform-origin: left center;
	transform: translate(40px, 0);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
	transition-delay: 0.4s;
}

/* 다른 요소 등장 타이밍 뒤로 밀기 */
.intro-inner .top-txt {transition-delay:0.6s;}
.intro-inner .bottom-txt .bar {transition-delay:0.9s;}
.intro-inner .bottom-txt strong {transition-delay:0.9s;}
#mainIntro .main-scroll-icon {transition-delay:1.1s;}

/* 1단계 : 심볼만 페이드인 */
.intro-symbol-in .intro-logo-svg .logo-symbol {opacity: 1;}

/* 2단계 : 심볼 제자리로 + 텍스트 전개 */
.intro-start .intro-logo-svg .logo-symbol {transform: translate(0, 0) scale(1);}
.intro-start .intro-logo-svg .logo-text {transform: translate(0, 0); opacity: 1;}

/* 바 애니메이션 시간 조정 */
.intro-start .intro-inner .bottom-txt .bar:before {animation:introBar 3s ease-in-out both; animation-delay:1.2s}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; 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-video-con {position: relative; overflow: hidden; width: 100%; height: 100%;}
.main-visual-video-con:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1;}
.main-visual-video { position: absolute;  top: 0; left: 0px; width: 100%;height: 100%; transform: scale(1.001);}
.main-visual-video video {width: 100%; height: 100%; object-fit:cover; pointer-events: none; }
.main-visual-video-con .clipped {clip-path: url(#svgTextPath); position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:340px; height:393px; display: inline-block; overflow:hidden;}
.main-visual-video-con .clipped .liquid-effect { position: absolute; inset: 0 0 0 0; overflow: hidden; z-index: 1; isolation: isolate; backdrop-filter: blur(5px);filter: url(#glass-distortion); border-radius: var(--glass-border-radius);}
.main-visual-video-con .clipped .liquid-tint {position: absolute; inset: 0 0 0 0; z-index: 1; background: rgba(255, 255, 255, 0.01);} 
.main-visual-video-con .clipped .liquid-shine {position: absolute; inset: 0 0 0 0; overflow: hidden; z-index: 2; box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.1), inset -1px -1px 1px 0px rgba(255, 255, 255, 0.1);;} 
.main-visual-video-con .clipped .glass-video {position:absolute; left:50%; top:50%; width:100vw; height:100vh; object-fit:cover; transform:translate(-50%,-50%); z-index:0;}
.main-visual-video-con .clipped .glass-stroke{ position:absolute;inset:0; width:100%; height:100%; pointer-events:none;z-index:10;}

.main-visual-logo {position: absolute; width: 100%; height: 100%;}

/* 메인 비주얼 :: 텍스트 */
.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:center;
	justify-content: center;
	text-align: center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2 {
	opacity:0; /* filter:blur(1rem); */
}
.main-visual-txt-box .main-visual-txt1{font-size:9rem; font-weight:500; letter-spacing:-0.025em; color:#fff; line-height: 1.2; margin-bottom:2rem;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; font-weight: 600; letter-spacing:-0.025em; color:#fff; line-height: 1.2;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2 {
	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;}
.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;}
.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;}

/* 메인 비주얼 :: 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);
		 /* filter:blur(1rem); */
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		 /* filter:blur(0); */
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}



/* 메인 인트로 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; z-index:9; bottom:9vh; left:50%; margin-left: -3rem;}
.main-scroll-icon .circle{display: flex; align-items: center; justify-content: center; position: relative; width:6rem; height:6rem; overflow:hidden; margin:auto; border-radius:50%; border: 2px solid #fff; box-sizing: border-box;}
.main-scroll-icon .circle em{display: block; width:6px; height:3rem; animation: upDown 1.8s ease-in-out infinite; background: transparent linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;  border-radius:3px; position: relative;}
.main-scroll-icon .circle em:before {position: absolute; content: ''; width: 6px; height: 6px; border-radius: 6px; background-color: #fff; bottom: 0; left: 0;}

.main-scroll-icon .txt{display:block; color:#fff; font-size:1.2rem; line-height:1.3; font-weight:600; margin-bottom:2rem;}
@keyframes upDown {
	0% {
		transform:  translateY(-200%);
	}
	100% {
		transform:  translateY(200%);
	}
}

/* 메인 :: Contact Us 버튼 */
.main-visual-contact-btn {position: absolute; bottom: 6rem; right: 2rem; width: 14.4rem; height: 14.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; opacity: 0; transform:translateY(3rem); transition:var(--transition-custom2);}
.main-visual-contact-btn .txt {position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: url(/images/main/main_contact_txt.png)no-repeat center/100%; animation: pointer_circle_rotate 12s linear infinite; z-index: 3;}
.main-visual-contact-btn .inner {position: relative; width: 7.7rem; height: 7.7rem; display: flex; align-items: center; justify-content: center; z-index: 1; }
.main-visual-contact-btn .inner:before {position: absolute; content: ''; border-radius: 2rem; width: 100%; height: 100%; background: rgba(255,255,255,0.05); backdrop-filter:blur(1rem); border: 3px solid #fff; box-sizing: border-box; transform:rotate(45deg); transition: var(--transition-custom2);}
.main-visual-contact-btn .inner i {font-size: 3.2rem; color: #fff; position: relative; z-index: 1;}
.main-visual-contact-btn:hover .inner:before {transform:rotate(315deg) scale(1.1);}
.active .main-visual-contact-btn {opacity: 1; transform:translateY(0); }

@keyframes pointer_circle_rotate {
	0% {
		transform:translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform:translate(-50%, -50%) rotate(360deg);
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box {margin-bottom:6rem; text-align:center;}
.main-tit-box .main-tit {color:#fff; font-size:6rem; font-weight:500; letter-spacing:-0.01em; line-height: 1.4;}
.main-tit-box .main-tit strong{font-weight:600;}
.main-tit-box .main-sub-tit{display:inline-block; color:#fff; font-size:2rem; font-weight:500; line-height:1.2; margin-bottom: 3rem; padding-bottom: 1rem; border-bottom: 2px solid #fff;}
.main-tit-box .main-sub-tit,
.main-tit-box .main-tit{
	opacity:0;
	/* filter:blur(1rem); */
}
 /* animation일때 */ 
.main-tit-box.animated .main-sub-tit, 
.main-tit-box.animated .main-tit {
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; will-change: transform, opacity;
}
.main-tit-box.animated .main-tit {animation-delay:0.1s;}
 /* transition일때 */ 
/* .active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
} */

/* 공통 :: 배경 */
.main-con-bg {position: absolute; width: 100%; height: 128rem; top: 0; will-change:transform; transition:transform 2.0s cubic-bezier(.22,.61,.36,1); z-index: -1; mix-blend-mode: lighten;}
.main-con-bg.a-l {left: 0;}
.main-con-bg.a-r {right: 0;}
.main-con-bg img {width: 100%; height: 100%; object-fit:cover;}

/* 공통 :: 버튼 */
.main-btn{position: relative; display: inline-flex; align-items:center; width:26rem; height:6rem;}
.main-btn .inner-txt{position: relative; display: flex; align-items:center; justify-content:center; width:calc(100% - 6rem); height:100%; border:3px solid #fff; box-sizing:border-box; border-radius:3rem; transition:all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); color:#fff; }
.main-btn .inner-txt em{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:1.6rem; font-weight:700; transition:all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); white-space:nowrap;}
.main-btn .inner-icon{position: absolute; top:0; right:0; display: flex; align-items:center; justify-content:center; width:6rem; height:6rem; transform:rotate(-45deg);}
.main-btn .inner-icon i{position: relative; z-index:1; font-size:2rem; color:#030F1C;}
.main-btn .inner-icon:before{position: absolute; content:''; width:100%; height:100%; background:#fff; border-radius:50%; transition:all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);}

.main-btn:hover .inner-txt{width:100%;}
.main-btn:hover .inner-txt em {left:2rem; transform:translate(0%, -50%);}
.main-btn:hover .inner-icon:before{transform:scale(0.8); }


/* -------- 메인 컨텐츠 :: 컨텐츠1(Walkbot) -------- */
#mainContent1 .main-prd-tit-con {position: absolute; top: 50%; left: calc((100% - var(--area-width))/2); transform:translateY(-50%); z-index: 2;}
.main-prd-tit-box {}
.main-prd-tit-box .sub-tit {display: block; font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 2rem;}
.main-prd-tit-box .tit {font-size: 9rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; line-height: 1.4; margin-bottom: 2rem;}
.main-prd-tit-box .txt {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; line-height: 1.6;}
.main-prd-tit-box .main-btn {margin-top: 9rem;}
.main-prd-tit-box .sub-tit ,
.main-prd-tit-box .tit,
.main-prd-tit-box .txt ,
.main-prd-tit-box .main-btn {opacity: 0; /* filter:blur(1rem); */} 
.main-prd-tit-box.animated .sub-tit ,
.main-prd-tit-box.animated .tit,
.main-prd-tit-box.animated .txt ,
.main-prd-tit-box.animated .main-btn {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; will-change: transform, opacity;}
.main-prd-tit-box.animated .tit {animation-delay:0.1s;}
.main-prd-tit-box.animated .txt {animation-delay:0.2s;}
.main-prd-tit-box.animated .main-btn {animation-delay:0.3s;}

.main-prd-con {position: relative; width: 100%; height: 100%; display: flex; align-items: end; mix-blend-mode: lighten; z-index: 1;}
.main-prd-con.prd01 {justify-content: end;}
.main-prd-con.prd01 .main-prd-img {position: relative; max-width: 142.6rem; z-index: 1;}
.main-prd-con.prd01 .main-prd-img img {max-width: 100%; max-height: 100%;}
.main-prd-info-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform !important;}
.main-prd-info-list li {position: absolute; top: 50%; left: 50%; width: 3.8rem; height: 3.8rem; cursor: pointer; opacity: 0; z-index: 1; transform:translate(-50%,-40%); transition:var(--transition-custom2); 
transition-property: opacity, transform;}
.main-prd-info-list li.on {z-index: 2;}
.main-prd-info-list.animated li {opacity: 1; transform:translate(-50%,-50%);}
.main-prd-con.prd01 .main-prd-info-list li.item01 {margin-top: -18.6%; margin-left: 6.5%;transition-delay:0.2s;}
.main-prd-con.prd01 .main-prd-info-list li.item02 {margin-top: 2.3%; margin-left: 8.2%; transition-delay:0.3s;}
.main-prd-con.prd01 .main-prd-info-list li.item03 {margin-top: 4.1%; margin-left: 5.7%; transition-delay:0.4s;}
.main-prd-con.prd01 .main-prd-info-list li.item04 {margin-top: 11.3%; margin-left: 5.8%; transition-delay:0.5s;}
.main-prd-con.prd01 .main-prd-info-list li.item05 {margin-top: 17.6%; margin-left: 13.5%;  transition-delay:0.6s;}
.main-prd-con.prd01 .main-prd-info-list li.item06 {margin-top: -10%; margin-left: -10%;  transition-delay:0.7s;}
.main-prd-con.prd01 .main-prd-info-list li.item07 {margin-top: -4.5%; margin-left: -28.6%;  transition-delay:0.8s;}
.main-prd-con.prd01 .main-prd-info-list li.item08 {margin-top: -4%; margin-left: -33%;  transition-delay:0.9s;}
.main-prd-con.prd01 .main-prd-info-list li.item09 {margin-top: -0.7%;margin-left: -28.8%;  transition-delay:1.0s;}
/* 수정 css_서브랑 맞춤 */
.main-prd-con.prd01.add-css .main-prd-info-list li.item01 {margin-top: -18.5%; margin-left: 19.2%;  transition-delay:0.2s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item02 {margin-top: 4.1%; margin-left: 23%;  transition-delay:0.3s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item03 {margin-top: 7.4%; margin-left: 20.7%;  transition-delay:0.4s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item04 {margin-top: 14%; margin-left: 20.5%;  transition-delay:0.5s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item05 {margin-top: 17.6%; margin-left: 13.5%;  transition-delay:0.6s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item06 {margin-top: -10%; margin-left: -10%;  transition-delay:0.7s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item07 {margin-top: -4.5%; margin-left: -28.6%;  transition-delay:0.8s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item08 {margin-top: -4%; margin-left: -33%;  transition-delay:0.9s;}
.main-prd-con.prd01.add-css .main-prd-info-list li.item09 {margin-top: -0.7%;margin-left: -28.8%;  transition-delay:1.0s;}


.main-prd-info-list li .circle {background:rgba(0, 77, 161, 1) ;border-radius: 50%;-webkit-animation-fill-mode: both;animation-fill-mode: both;position: absolute;left: 0;top: 0px;opacity: 0;margin: 0;width: 100%; height: 100%; animation: nation-circle 3s cubic-bezier(1, 2, 0.66, 3) infinite; }
.main-prd-info-list li .circle:nth-child(2) {-webkit-animation-delay: 1s; animation-delay: 1s; }
.main-prd-info-list li .circle:nth-child(3) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.main-prd-info-list li em {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1.7rem; height:1.7rem; border: 1px solid #fff; background-color:var(--main-color); border-radius:50%; box-sizing: border-box;}
@keyframes nation-circle {
 0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.3; 
	}
	50% {
		opacity: 0.3; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}

/* 글라스 박스 스타일 */
:root{
	--glass-border-radius: 2.4rem;
}
.glass-boxed {overflow: hidden;position: relative;/* padding-block: 2rem;padding-inline: 2rem; */display: flex;align-items: center;justify-content: center;border-radius: var(--glass-border-radius); border: 2px solid; border-image-source: linear-gradient(115.65deg, rgba(255, 255, 255, 0.5) 10.08%, rgba(255, 255, 255, 0) 61.65%, rgba(255, 255, 255, 0.5) 85.09%); box-sizing: border-box;}
.glass-boxed.circle{ border-radius: 50%; }
.glass-boxed .pos-relative{ position: relative; z-index: 2; }
.glass-boxed [class*="liquid-"]	{ position: absolute; inset: 0 0 0 0; border-radius: var(--glass-border-radius);}
.glass-boxed .liquid-effect{overflow: hidden;
	z-index: 0;
	isolation: isolate;
	backdrop-filter: blur(5px);
	filter: url(#glass-distortion);
	border-radius: var(--glass-border-radius);
}
.glass-boxed .liquid-tint{ z-index: 1; background: rgba(255,255,255,0.01); }
.glass-boxed .liquid-shine{
	overflow: hidden; z-index: 2;
	border-radius: var(--glass-border-radius);
	box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,0.1), 
				inset -1px -1px 1px 0px rgba(255,255,255,0.1);
}

.main-prd-info-list li .info-box {position: absolute; width: 35rem; opacity: 0; visibility: hidden; z-index: 3; transform:translate(3rem); filter:blur(1rem); backdrop-filter: blur(0.5rem); transition:var(--transition-custom); pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box;}
.main-prd-info-list li.on .info-box {opacity:1; visibility: visible; filter:blur(0);  transform:translate(0);}
.main-prd-info-list li .info-box.top {top: -0.5rem;}
.main-prd-info-list li .info-box.right {left:5.5rem;}
.main-prd-info-list li .info-box.bottom {bottom: -0.5rem;}
.main-prd-info-list li .info-box.left {right: 5.5rem;}
.main-prd-info-list-m li .info-box .inner,
.main-prd-info-list li .info-box .inner {display: flex; flex-direction:column; align-items: flex-start; justify-content:space-between; position: relative; z-index: 5;width: 100%; min-height: auto; padding: 3rem; border-radius: 2.4rem; box-sizing: border-box; /* background-color: rgba(3,15,28,0.5); */ background-color: rgba(3, 15, 28, 0.8);}
.main-prd-info-list-m li .info-box .inner .cate,
.main-prd-info-list li .info-box .inner .cate {margin-bottom: 2rem; padding: 0.4rem 1.4rem; display: inline-block; background-color: var(--main-color); font-size: 1.4rem; font-weight: 500; color: #fff; line-height: 1.3; border-radius: 2rem; display: none !important;}
.main-prd-info-list-m li .info-box .inner .tit,
.main-prd-info-list li .info-box .inner .tit {display: block; font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.3;}
.main-prd-info-list-m li .info-box .inner .en-tit,
.main-prd-info-list li .info-box .inner .en-tit {font-size: 1.4rem; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.3; margin-top: 0.3rem;}
.main-prd-info-list-m li .info-box .inner dd,
.main-prd-info-list li .info-box .inner dd {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 1.6; margin-top: 2rem;}

.main-prd-info-list-m{display: none;}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Healerbot) -------- */
#mainContent2 .main-prd-tit-con {position: absolute; top: 50%; left: 54.16%; transform:translateY(-50%); z-index: 2;}
.main-prd-con.prd02 {justify-content: start;}
.main-prd-con.prd02 .main-prd-img {position: relative; max-width: 111.5rem;}
.main-prd-con.prd02 .main-prd-img img {max-width: 100%; max-height: 100%;}
.main-prd-con.prd02 .main-prd-info-list li.item01 {margin-top: -17.1%; margin-left: -28.5%; transition-delay:0.2s;}
.main-prd-con.prd02 .main-prd-info-list li.item02 {margin-top: -23%; margin-left: 1.7%; transition-delay:0.4s;}
.main-prd-con.prd02 .main-prd-info-list li.item03 {margin-top: -4%; margin-left: -6.5%; transition-delay:0.6s;}
.main-prd-con.prd02 .main-prd-info-list li.item04 {margin-top: 0%; margin-left: 8.2%; transition-delay:0.8s;}

/* 수정 css_서브랑 맞춤 */
.main-prd-con.prd02.add-css .main-prd-info-list li.item01 {margin-top: -22%; margin-left: 2.2%; transition-delay:0.2s;}
.main-prd-con.prd02.add-css .main-prd-info-list li.item02 {margin-top: -16.9%; margin-left: -26.4%; transition-delay:0.3s;}
.main-prd-con.prd02.add-css .main-prd-info-list li.item03 {margin-top: -4.2%; margin-left: -4.8%; transition-delay:0.4s;}
.main-prd-con.prd02.add-css .main-prd-info-list li.item04 {margin-top: 0%; margin-left: 8.2%; transition-delay:0.5s;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Company) -------- */
.main-company-con {position: relative; z-index: 1; padding-top: 5rem;}
.main-company-info {max-width:1050px; margin: 0 auto; display: flex; position: relative; z-index: 3;}
.main-company-info .item {width: 33.333%; position: relative; will-change: transform !important; transition-property: -webkit-transform !important; transition-property: transform, -webkit-transform !important;}
.main-company-info .item.item01 {left: 3rem;}
.main-company-info .item.item03 {left: -3rem;}
.main-company-info .item .inner {position: relative; width: 100%; padding-top: 100%; border-radius: 50%; background: rgba(255,255,255,0.01);  backdrop-filter:blur(3rem);}
.main-company-info .item .inner:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; transform-origin:center; border-radius: 50%; border: 2px solid #fff; animation: rotate 4s linear infinite; }
.main-company-info .item.item01 .inner:before {border-right: 0; border-bottom: 0;}
.main-company-info .item.item02 .inner:before {border-left: 0; border-bottom: 0;}
.main-company-info .item.item03 .inner:before {border-top: 0; border-left: 0;}
.main-company-info .item .inner .txt-box {position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-company-info .item .inner .txt-box .tit {font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 3.5rem;}
/* .main-company-info .item .inner .txt-box .number {font-size: 6rem; font-weight: 500; color: #fff; line-height: 1.2;} */
.main-company-info .item .inner .txt-box .txt {font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1.3; margin-top: 3.5rem;}

@keyframes rotate {
	0% {
		transform:rotate(0);
	}
	100% {
		transform:rotate(360deg);
	}
}

/* 카운트 */
.count-num-box{display:flex; align-items:center; font-size:3rem}
.count-num-box > p {color: #fff; font-size:6rem; line-height: 6rem; font-weight: 500;} 
.count-num-item-wrap{height:2em; overflow:hidden;}
.count-num-item-wrap .count-num-item-box{height:60rem;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:#fff; font-weight:500; font-size:6rem;color: #fff; font-weight: 500;}	 
/* 카운트 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);
    }
} 

.main-company-flow-txt {position: absolute; left: 0; bottom: 8rem; width: 100%; height: 18rem;}
.main-company-flow-txt  .inner {position: relative; width: 100%; height: 18rem; overflow: hidden;}
.main-company-flow-txt .flow-txt {width: 100%;height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.main-company-flow-txt .maskBg {width: 100%; height: 100%;  display: flex; align-items: center; overflow: hidden;} 
.main-company-flow-txt .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.main-company-flow-txt .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.main-company-flow-txt .maskBg .marquee .absol .mar_ch {display: flex; align-items: center; margin: 0 2.5rem;}
.main-company-flow-txt .maskBg .marquee .absol h4 {font-size:15rem; letter-spacing:-0.01em; color: rgba(255,255,255,0.05); font-weight: 500; box-sizing:border-box; white-space:nowrap;}


/* -------- 메인 컨텐츠 :: 컨텐츠4(About) -------- */
.main-about-con {position: relative; z-index: 1;}
.main-about-con .main-tit-box {text-align: left; margin-bottom: 4.5rem;}
.main-about-con .main-tit-box .main-tit {font-weight: 700; }
.main-about-list-con {}
.main-about-list-con .swiper-container {overflow: visible;}
.main-about-list li a {display: block; padding: 4rem 3rem 3rem; box-sizing: border-box; border-radius: 3rem; background-color: rgba(255,255,255,0.1); backdrop-filter:blur(1rem); transition:var(--transition-custom);}
.main-about-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 58.53%; margin-bottom: 3rem}
.main-about-list li a .img-box span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; border-radius:2rem; }
.main-about-list li a .img-box span img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: all 0.5s;}
.main-about-list li a .txt-box {display: flex; align-items: center; justify-content: space-between;}
.main-about-list li a .txt-box strong {display: inline-block; font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; transition:var(--transition-custom);}
.main-about-list li a .txt-box span {display: inline-flex; align-items: center; justify-content: center; width: 5.9rem; height: 5.9rem; border: 1px solid #fff; border-radius: 50%; box-sizing: border-box; transition:var(--transition-custom);}
.main-about-list li a .txt-box span i {font-size: 2.4rem; color: #fff; transform: rotate(-45deg); transition:var(--transition-custom);}

.main-about-progress{position:absolute; bottom:-6rem; left:50%; transform:translateX(-50%); width:19.2rem; height:4px; border-radius:2px; background:rgba(255,255,255,.2); cursor: pointer;}
.main-about-progress span{display:block; width:0; height:100%; background:#fff; transition:width .6s;position:relative;}
.main-about-progress span:after{content:''; position:absolute; right:-0.8rem; top:50%; width:1.6rem; height:1.6rem; border-radius:50%; background:#fff;transform:translateY(-50%);}
.main-about-progress .swiper-scrollbar-drag {    background: transparent;}

@media all and (min-width:801px) {
	.main-about-list li a:hover {background-color: var(--main-color);}
	.main-about-list li a:hover .img-box span img {-webkit-transform: scale(1.1) rotate(0.002deg); 
			-moz-transform: scale(1.1) rotate(0.002deg);
			-ms-transform: scale(1.1) rotate(0.002deg);
			-o-transform: scale(1.1) rotate(0.002deg); 
			transform: scale(1.1) rotate(0.002deg);}
	.main-about-list li a:hover .txt-box strong {transform:translateX(2.5rem);}
	.main-about-list li a:hover .txt-box span {transform:translateX(-2.5rem); background-color: #fff;}
	.main-about-list li a:hover .txt-box span i {color: var(--main-color);}
}



/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right: 8.3rem;;
    opacity: 0;
	transition:var(--transition-custom2); 
    transform: translate3d(0,0,0);
}
#fp-nav.active {opacity: 1;}
#fp-nav ul li{position:relative; width:20px; margin:5rem 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; border: 2px solid #fff; border-radius:50%; box-sizing: border-box;}
#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{border-color: #d9d9d9; background-color: #d9d9d9;}
#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;}

/* ****************** 풀페이지 섹션 이동 중 보완 ********************** */
/* .fp-moving .main-company-info .item,
.fp-moving .main-about-list li a,
.fp-moving .main-visual-contact-btn .inner:before,
.fp-moving .main-prd-info-list li .info-box, */
.fp-moving .glass-boxed .liquid-effect,
.fp-moving .main-visual-video-con .clipped,
.fp-moving .main-visual-video-con .clipped .liquid-effect{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; transition:none !important;}
.fp-moving .glass-boxed .liquid-effect,
.fp-moving .main-visual-video-con .clipped .liquid-effect{filter:none !important;}