@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;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{position: fixed; top:0; left:0; overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); 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-img-con{ position:absolute; left:0px; top:0; width:100%; height:100%;}
.main-visual-img-con .visual-img{position: absolute; top:55%; left:50%; transform:translate(-50%, -50%);}
.main-visual-img-con .visual-img img{position: absolute; inset:0; width:100%; height:100%; opacity:0}
/* .main-visual-img-con .visual-img img:nth-child(1){animation-delay:0.4s !important;}
.main-visual-img-con .visual-img img:nth-child(2){animation-delay:0.3s !important;} */
.main-visual-img-con .visual-img img:nth-child(1){animation-delay:0.2s !important;}
.main-visual-img-con .visual-img img:nth-child(2){animation-delay:0.1s !important;}
.main-visual-img-con .visual-img img:nth-child(3){animation-delay:0s !important;}

.main-visual-img-con .visual-img.img01{margin-left:14rem; width:62.4rem; height:68.1rem;}
.main-visual-img-con .visual-img.img01 img{transform-origin: bottom left; transform:rotate(-15deg); filter:blur(3px);}
.main-visual-img-con .visual-img.img01 img:nth-child(3){transform-origin: bottom left; transform:rotate(-15deg); filter:blur(0px);}
@keyframes main_visual_img_main_ani01 {
	from { transform:rotate(-15deg); opacity:0}
	to { transform:rotate(0deg); opacity:1}
}
@keyframes main_visual_img_sub_ani01 {
	from { transform:rotate(-15deg); opacity:0; filter:blur(3px);}
	to { transform:rotate(0deg); opacity:0.2; filter:blur(0px);}
}
.main-visual-img-con .visual-img.img02{margin-top:-12rem; margin-left:-27rem; width:28.9rem; height:36.5rem;}
.main-visual-img-con .visual-img.img02 img{transform-origin: bottom right; transform:rotate(-15deg); animation: main_visual_img_sub_ani02 2s 1s cubic-bezier(0.4, 0, 0.2, 1) both; filter:blur(5px);}
.main-visual-img-con .visual-img.img02 img:nth-child(3){transform-origin: bottom right; transform:rotate(-15deg); animation: main_visual_img_main_ani02 2s 1s cubic-bezier(0.4, 0, 0.2, 1) both; filter:blur(0px);}
@keyframes main_visual_img_main_ani02{
	from { transform:rotate(-20deg); opacity:0}
	to { transform:rotate(0deg); opacity:0.5}
}
@keyframes main_visual_img_sub_ani02{
	from { transform:rotate(-20deg); opacity:0; filter:blur(5px);}
	to { transform:rotate(0deg); opacity:0.1; filter:blur(0px);}
}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-img-con .visual-img.img01 img{animation: main_visual_img_sub_ani01 2s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-img-con .visual-img.img01 img:nth-child(3){animation: main_visual_img_main_ani01 2s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-img-con .visual-img.img02 img{animation: main_visual_img_sub_ani02 2s 1s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-img-con .visual-img.img02 img:nth-child(3){animation: main_visual_img_main_ani02 2s 1s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: 텍스트 */
.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;
	height:100%;
	max-width:1368px;
}
.main-visual-txt-box .main-visual-txt1{
	opacity:0; 
}
.main-visual-txt-inner{width:100%;}
.main-visual-txt-box .main-visual-txt1{position: relative; font-size:8rem; font-weight:700; letter-spacing:-0.04em; color:#fff; white-space:nowrap;}
.main-visual-txt-box .main-visual-txt1 span{position: relative; z-index:1;}
.main-visual-txt-box .main-visual-txt1:before{position: absolute; content:attr(data-label); top:0; filter: blur(9px); white-space:nowrap; color:#193282; z-index:1;}
.main-visual-txt-box .main-visual-txt1 .plus-txt{position: absolute; top:-1rem; right:0; transform:translateY(-100%); font-size:2rem; letter-spacing: -0.04em; color:var(--main-color); font-weight:400;}

.main-visual-txt-box .main-visual-txt1.left-txt{text-align:left;}
.main-visual-txt-box .main-visual-txt1.left-txt:before{left:0;}
.main-visual-txt-box .main-visual-txt1.right-txt{text-align:right;}
.main-visual-txt-box .main-visual-txt1.right-txt:before{right:0;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt-box .main-visual-txt1.left-txt{ animation: text-active-left-animation 2s cubic-bezier(0.4, 0, 0.2, 1) both; }
.active-item .main-visual-txt-box .main-visual-txt1.right-txt{ animation: text-active-right-animation 2s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes text-active-left-animation {
	0% { transform: translateX(-30%); opacity: 0; letter-spacing: 0.2em; }
	10%{opacity: 0;}
	100% { transform: translateX(0%); opacity: 1; letter-spacing: -0.025em; }
}
@keyframes text-active-right-animation {
	0% { transform: translateX(30%); opacity: 0; letter-spacing: 0.2em; }
	10%{opacity: 0;}
	100% { transform: translateX(0%); opacity: 1; letter-spacing: -0.025em; }
}

.active-item .main-visual-txt1{animation-delay:0.1s;}
.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 2s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* after-active */
.active-item .main-visual-txt-box.after-active .main-visual-txt1.left-txt{ animation: after-active-left-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.active-item .main-visual-txt-box.after-active .main-visual-txt1.right-txt{ animation: after-active-right-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes after-active-left-animation {
	0% { transform: translateX(0%); opacity: 1; letter-spacing: -0.025em; }
	50%{opacity: 0;}
	100% { transform: translateX(-30%); opacity: 0; letter-spacing: 0.2em; }
}
@keyframes after-active-right-animation {
	0% { transform: translateX(0%); opacity: 1; letter-spacing: -0.025em; }
	50%{opacity: 0;}
	100% { transform: translateX(30%); opacity: 0; letter-spacing: 0.2em; }
}


/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.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; bottom:5rem; left:50%; transform:translateX(-50%); z-index:9; animation: upDown 1.5s ease-in-out infinite; width:6rem; height:6rem;}
.main-scroll-icon .dots{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:5px; height:3rem; overflow:hidden;}
.main-scroll-icon .dots em{position: relative; display: block; width:5px; height:5px; background:#fff; border-radius:50%; animation: scroll-dots 1.5s linear infinite;}
.main-scroll-icon .dots em:before{position: absolute; content:''; width:100%; height:20px; background:linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 100%); top:-17px; left:0;}
.main-scroll-icon svg{position: relative; display: block; width:100%; height:100%; stroke-width:2; stroke-dasharray: 200; stroke-dashoffset: -140; animation: scroll-rolling 2.5s linear infinite;}
@keyframes scroll-dots {
	0% {transform:translateY(-1rem);}
	100% {transform:translateY(4rem);}
}
@keyframes scroll-rolling {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

/* ******************  메인 컨텐츠 ********************** */
#mainContent{position: relative; margin-top:100vh;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .main-tit{color:var(--main-color); font-size:2rem; letter-spacing:-0.04em; margin-bottom:4.5rem;}
.main-tit-box .main-sub-tit{font-size:5.4rem; line-height:1.22; letter-spacing:-0.04em; color:#fff; font-weight:700;}
.main-tit-box .main-sub-txt{font-size:1.8rem; line-height:1.83; letter-spacing:-0.04em; color:rgba(255,255,255,0.4); margin-top:4rem;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* 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);
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
#mainContent1{position: relative; padding:10rem 0 10rem; margin-bottom:25rem;}
#mainContent1 .bg{position: absolute; top: 0; left: 0; width: 100%; height: 9999px; background: linear-gradient(to bottom, rgba(17, 25, 49, 0.2) 0%, rgba(25, 50, 130, 0.1) 50%); backdrop-filter: blur(10px);}
#mainContent1 .main-tit-box{margin-bottom:15rem;}
.main-prd-wrapper{position: relative; /* margin:0 -2rem; width:calc(100% + 4rem); */ }
.main-prd-wrapper .main-prd-list{display: flex; transition-timing-function: linear !important;}
.main-prd-wrapper .main-prd-list .list-item{position: relative; /* margin:0 2rem; */}
.main-prd-wrapper .main-prd-list .list-item a{display: block; position: relative; background:rgba(255,255,255,0.03); border-radius:1rem; padding-bottom:5rem; transition:var(--transition-custom);}
.main-prd-wrapper .main-prd-list .list-item a .img-box{position: relative; padding: 5rem; box-sizing: border-box; }
.main-prd-wrapper .main-prd-list .list-item a .img-box span{position: relative; display: block; width:100%; height:0; padding-top:120%;}
.main-prd-wrapper .main-prd-list .list-item a .img-box span img{position: absolute; inset:0; margin:auto; max-width:100%; max-height:100%; object-fit:cover;}
.main-prd-wrapper .main-prd-list .list-item a .txt{position: absolute; width:100%; bottom:5rem; left:0; text-align:center; font-size:2.4rem; line-height:1.375; letter-spacing:-0.04em; color:#fff; font-weight:700; padding:0 2rem; box-sizing:border-box; text-transform: uppercase;}


.main-prd-wrapper .main-prd-list .list-item:nth-child(odd) a{transform:translateY(-4.5rem);}
.main-prd-wrapper .main-prd-list .list-item:nth-child(even) a{transform:translateY(4.5rem);}

.main-prd-wrapper .swiper-scrollbar{display: none;}

/* Mouse Pointer */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* base */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width: 16rem; height: 16rem; border-radius:50%;  transform:translate(-50%,-50%) scale(0); box-sizing:border-box; transition:var(--transition-custom); opacity:0; background:var(--main-color);}
.mouse-pointer .pointer-circle span{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); border:2px solid #fff; box-sizing:border-box; width:14rem; height:14rem; border-radius:50%;}
.mouse-pointer .pointer-circle span:before{position: absolute; content:''; width:1rem; height:1rem; background:#fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%);}
.mouse-pointer .pointer-circle i{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:2.4rem; color:#fff;}
.mouse-pointer .pointer-circle i.xi-angle-left-min{margin-left:-3.5rem;}
.mouse-pointer .pointer-circle i.xi-angle-right-min{margin-left:3.5rem;}
/* arrow */
.mouse-pointer.arrow .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity:1;}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Business) -------- */
#mainContent2{position: relative; margin-bottom:28rem; z-index:1;}
#mainContent2 .bg{position: absolute; bottom:30%; left:0; background:no-repeat center; background-size:cover; background-image:url('/images/main/main_business_bg.png'); width:84.3rem; height:111.3rem;}

#mainContent2 .main-tit-box{margin-bottom:13rem;}
.business-cover-list{display: flex; justify-content:space-between; margin:0 -0.2rem;}
.business-cover-list .list-item{width:calc((100% / 7) - 0.4rem); height:54rem; margin:0 0.2rem;}
.business-cover-list .list-item a{position: relative; display: flex; align-items:flex-end; width:100%; height: 100%; padding:4rem; box-sizing:border-box; overflow:hidden; background:#000;  will-change:transform;}

.business-cover-list .list-item a .item-bg{position: absolute; content:''; width:100%; height:60rem; top:50%; left:0; transform:translateY(-50%); background:no-repeat; background-size:cover; /* opacity:0.8; */ transition: background 0.4s; /* will-change:transform; */ z-index:1;}
.business-cover-list .list-item a:before{position: absolute; content:''; width:100%; height:100%; inset:0; background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); z-index:2;}
.business-cover-list .list-item a:after{position: absolute; content:''; width:100%; height:100%; inset:0; background:var(--main-color); opacity:0; transition:var(--transition-custom); z-index:3;}
.business-cover-list .list-item a .txt-box{position: relative; width:100%; z-index:4;}
/* .business-cover-list .list-item a .txt-box:before{position: absolute; content:''; width:calc(100% + 8rem); height:54rem; } */
.business-cover-list .list-item a .txt-box .icon{opacity:0; margin-bottom:3rem; transition:var(--transition-custom); width: 50px; text-align: center;}
.business-cover-list .list-item a .txt-box dl{}
.business-cover-list .list-item a .txt-box dl dt{font-size:2.4rem; line-height:1.375; letter-spacing:-0.04em; color:#fff; font-weight:700;}
.business-cover-list .list-item a .txt-box dl dd{font-size:1.6rem; line-height:1.875; letter-spacing:-0.04em; color:rgba(255,255,255,0.5); font-weight:700; margin-top:0.8rem;}

/* nth-child */
.business-cover-list .list-item:nth-child(1) a{border-radius:2rem 0 0 0;}
.business-cover-list .list-item:last-child a{border-radius:0 0 2rem 0;}
/* .business-cover-list .list-item:nth-child(odd) a{transform:translateY(-3rem);}
.business-cover-list .list-item:nth-child(even) a{transform:translateY(3rem);} */


/* .business-cover-list .list-item:nth-child(odd) a:before{top:0;}
.business-cover-list .list-item:nth-child(even) a:before{bottom:0;} */
.business-cover-list .list-item.active a .txt-box .icon{opacity:1;}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Certificate) -------- */
#mainContent3{position: relative; margin-bottom:28rem;}
#mainContent3 .bg{position: absolute; bottom:10%; right:0; background:no-repeat center; background-size:cover; background-image:url('/images/main/main_certi_bg.png'); width:97.8rem; height:152rem;}
#mainContent3 .main-tit-box{margin-bottom:5.5rem;}

.main-certi-wrapper{max-width:936px; margin:auto;}
.main-certi-list{margin:0 -1.7rem; }
.main-certi-list .slick-list{padding:0 0 4rem!important;}
.main-certi-list .list-item{margin:0 1.7rem;}
.main-certi-list .list-item a{display: block; position: relative; transition:var(--transition-custom);}
.main-certi-list .list-item span{position: relative; display: block; width:100%; height:0; padding-top:141.38%; border-radius:1rem; overflow:hidden;}
.main-certi-list .list-item span img{position: absolute; inset:0; margin:auto; width:100%; object-fit:cover;}
.main-certi-list .list-item.slick-current a{transform:translateY(4rem);}

.main-certi-list .slick-arrow{position: absolute; top:calc(50% - 2rem); transform:translateY(-50%); width:6rem; height:6rem; border:1px solid #fff; box-sizing:border-box; border-radius:50%; display: flex; align-items:Center; justify-content:center; font-size:2.4rem; color:#fff;}
.main-certi-list .slick-arrow i{position: relative; top:1px;}
.main-certi-list .slick-arrow.slick-prev{left:-8rem;}
.main-certi-list .slick-arrow.slick-prev i{left:-1px;}
.main-certi-list .slick-arrow.slick-next{right:-8rem;}
.main-certi-list .slick-arrow.slick-next i{right:-1px;}

/* -------- 메인 컨텐츠 :: 컨텐츠4(Partner) -------- */
#mainContent4{position: relative; margin-bottom:20rem;}
.main-partner-flow{position: relative; display: flex; margin:5rem 0; white-space:nowrap;}
.main-partner-flow:before{position: absolute; content:''; width:30%; height:100%; top:0; left:0; background: linear-gradient(to right, rgba(2, 5, 13, 1) 0%, rgba(25, 50, 130, 0) 100%); z-index:9;}
.main-partner-flow:after{position: absolute; content:''; width:30%; height:100%; top:0; right:0; background: linear-gradient(to right, rgba(25, 50, 130, 0), rgba(2, 5, 13, 1) 100%); z-index:9;}
.main-partner-list{position: relative; display: flex; white-space:nowrap;}
.main-partner-list .list-item{margin:0 5rem;}
.main-partner-list .list-item img{opacity:0.1; height:5rem; transition:var(--transition-custom);}

/* active */
.main-partner-list .list-item.active2 img{opacity:0.3}
.main-partner-list .list-item.active img{opacity:1}
/* on */
.main-partner-flow:nth-child(odd) .main-partner-list.on{animation: 80s 0s flowLoop infinite linear; transform:translateX(-100%);}
.main-partner-flow:nth-child(even) .main-partner-list.on{animation: 80s 0s flowLoopReverse infinite linear; transform:translateX(-200%);}

@keyframes flowLoop {
	0%{ transform:translateX(-100%) } 
	100% { transform:translateX(-200%) }
}
@keyframes flowLoopReverse {
	0%{ transform:translateX(-200%) } 
	100% { transform:translateX(-100%) }
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(PR) -------- */
#mainContent5{position: relative; background:#0f1320; padding:10rem 0; z-index:1;}
#mainContent5 .area-box{display: flex; justify-content:space-between; align-items:center;}

#mainContent5 .main-tit-box{width:calc(50% + 3rem); text-align:left; padding-left:4rem; box-sizing:border-box;}
#mainContent5 .main-tit-box .more-btn{position: relative; display: flex; align-items:center; justify-content:space-between; width:20rem; height:6rem; padding:0 3rem; box-sizing:border-box; color:#fff; background:rgba(255,255,255,0.05); border-radius:6rem; margin-top:3rem; overflow:hidden;}
#mainContent5 .main-tit-box .more-btn .txt{position: relative; font-size:1.8rem; letter-spacing:-0.04em;}
#mainContent5 .main-tit-box .more-btn i{position: relative; font-size:2rem;}

.main-pr-wrapper{width:calc(50% - 3rem);}
.main-pr-list{display: flex; margin:0 -1.5rem;}
.main-pr-list .list-item{margin:0 1.5rem; width:calc(50% - 3rem);}
.main-pr-list .list-item a{position: relative; display: block; padding:3rem; box-sizing:border-box; background:rgba(255,255,255,0.05); border-radius:1rem; overflow:hidden;}
.main-pr-list .list-item .tit-box{position: relative; display: flex; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.main-pr-list .list-item .tit-box strong{font-size:1.8rem; line-height:1.83; letter-spacing:-0.04em; color:#fff; font-weight:700;}
.main-pr-list .list-item .tit-box i{font-size:2rem; line-height:1.65; letter-spacing:-0.04em; color:#fff; transform:rotate(90deg);}
.main-pr-list .list-item .img-box{position: relative; margin-bottom:2.5rem;}
.main-pr-list .list-item .img-box span{position: relative; display: block; width:100%; height:0; padding-top:58.33%; border-radius:1rem; overflow:hidden;}
.main-pr-list .list-item .img-box span img{position: absolute; inset:0; margin:auto; object-fit:cover; width:100%;}
.main-pr-list .list-item .txt{position: relative; font-size:1.6rem; line-height:1.75; letter-spacing:-0.04em; color:#fff; text-align:center; overflow:hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:5.6rem;}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; 
	top:50%; right:-15rem; 
	z-index:99; 
	transform:translateY(-50%);
	opacity:0;
	visibility:hidden;
	transition:var(--transition-custom2);
}
#rightBar.fixed{visibility:visible; opacity:1.0; right:var(--area-padding);}
#rightBar > ul {width:8rem;}
#rightBar > ul > li{margin:7px 0;}
#rightBar > ul > li > a{position: relative; display:block; width:8rem; height:8rem; background-color:rgba(255,255,255,0.05); display: flex; align-items:center; justify-content:center; color:#fff; transition:var(--transition-custom); border-radius:1rem; font-size:2.8rem; backdrop-filter: blur(10px); overflow:hidden;}
#rightBar > ul > li > a i{position: relative;}
/* #rightBar > ul > li > a:hover{background-color:var(--main-color);} */