@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}

/* ******************  메인 레이아웃(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{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;}



/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}



/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-inner{display: flex; align-items:center; justify-content: center; flex-wrap:wrap;}
.main-visual-txt-inner .main-visiual-logo{margin-right:5rem;}

.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex; justify-content:center;
	align-items:center; text-align:center;
	height:100%;
}

.main-visual-item:first-child .main-visual-txt-inner{text-align:left;}
.main-visual-item:first-child .main-visual-txt-box .main-visual-txt1{margin-bottom:0; font-size:70px; margin-top:-1px;}

.active-item .main-visiual-logo,
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visiual-logo-wrap{overflow:hidden;}
.main-visual-txt-box .main-visual-txt1{font-size:7rem; font-weight:700; letter-spacing:0; color:#fff; display:block; margin-bottom:0.257em; text-align:left; line-height:1.55;}
.main-visual-txt-box .main-visual-txt1.cm-word-split-JS.splitting .word{overflow:visible;}
.main-visual-txt-box .main-visual-txt2{font-size:1.6rem; line-height:1.625; color:rgba(255,255,255,0.5); font-weight:500; width:100%;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visiual-logo,
.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.5s;}
.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);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-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-visual-counter .slick-arrow{ border:0; cursor:pointer; z-index:9; font-size:24px; color:#fff;}
.main-visual-counter .slick-arrow.slick-prev{}
.main-visual-counter .slick-arrow.slick-next{}

/* 메인 비주얼 :: 카운터 */
.main-visual-counter {position:absolute; bottom:5rem; left:0; width:100%; /* margin-top:11.3rem; */ z-index:11; font-size:13px; color:#fff; font-weight:600; opacity:0; transform: translateY(100%); transition: all 1.1s ease-in-out;}
.main-visual-counter .inner-box {display:flex; justify-content:center; align-items:center; }
.main-visual-counter .count-box {margin:0 18px;}
.main-visual-counter span,
.main-visual-counter .middle{display:inline-block; vertical-align:middle;}
.main-visual-counter .middle{margin:0 10px; width:1px; height:5px; background-color:rgba(255,255,255,0.5)}
body.active .main-visual-counter {transform:translateY(0); opacity:1;}


/* ******************  메인 컨텐츠 :: 공통 ********************** */
/* 공통 :: 타이틀 */
.main-tit-box .main-sub-tit {display:block; color:var(--main-color); font-size:1.8rem; font-weight:600; line-height:1.3; }
.main-tit-box .main-tit{color:#111; font-size:5rem; line-height:1.4; letter-spacing:-0.05em; font-weight:700; margin-top:3.8rem;}
.main-tit-box .main-btn {display:flex; align-items:center; justify-content:center; width:20rem; height:6rem; font-size: 1.5rem; letter-spacing:-0.065em; color:#000; font-weight:600; border:1px solid #999; box-sizing: border-box; margin-top:4.2rem; background-color:#fff; transition:all 0.4s;} 

/* 공통 :: 타이틀 효과 */
.section.active-effect .main-txt-effect {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 0.3s;}
.main-txt-effect.splitting .char, .main-txt-effect .effect-inner {
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.section.active-effect .main-txt-effect.splitting .char,
.section.active-effect .main-txt-effect .effect-inner {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 공통 :: 이미지효과 */
.main-img-effect-wrap {overflow:hidden; display:block;  opacity:0;  transition: var(--transition-custom2); transition-delay:0.3s;}
.main-img-effect-wrap.ltr {transform: translate3d(-30px, 0, 0);}
.main-img-effect-wrap.rtl {transform: translate3d(30px, 0, 0);}
.main-img-effect-wrap.ttb {transform: translate3d(0, -30px, 0);}
.main-img-effect-wrap.btt {transform: translate3d(0, 30px, 0);}
.main-img-effect {transform: scale(1.08,1.08); transition:all 2s linear 0.3s;}
.section.active-effect .main-img-effect-wrap {opacity:1; transform:none;}
.section.active-effect .main-img-effect{transform:scale(1.0,1.0);}

/* 공통 :: 슬라이드 컨트롤 */
.main-slide-controls-box {margin-top:5.8rem;}
.main-slide-controls-box .inner-box {display:flex; align-items:center;}
.main-slide-controls-box .slick-arrow {font-size:2.4rem; color: #000; }
.main-slide-controls-box .count-box {display:flex; align-items:center; font-size:1.6rem; font-weight:600; color: #000; margin:0 15px;}
.main-slide-controls-box .line {display:block; position:relative; width:110px; height:1px; background-color:rgba(0,0,0,0.1); margin:0 15px;}
.main-slide-controls-box .line .bar {position:absolute; top:0; left:0; height:100%; background-color:#000;}


/* ******************  메인 컨텐츠 :: Company ********************** */
#mainCompanyCon {position:relative; }
/* #mainCompanyCon:before {content:""; width:28.38%; padding-top:26.09%; background:url("/images/main/main_company_figure.png") no-repeat center / cover; position:absolute; left:0; top:0; z-index:-1;} */
.main-company-con {display:flex; align-items:center;}
#mainCompanyCon .img-box {position: absolute; top:0; left:0; width:50%; box-sizing: border-box; height:100vh;}
#mainCompanyCon .img-box .img {display:inline-block; /* position:relative; padding-right:3.02%; padding-bottom:2.62%; */ position: absolute; width:100%; height:100%; top:0; left:0; overflow:hidden;}
#mainCompanyCon .img-box .img img {position: absolute; width:100%; height:100%; top:0; left:0;}
/* .main-company-con .img-box .img:before {content:""; width:297px; padding-top:184px; background:url("/images/main/main_figure.png") no-repeat; position:absolute; right:0; bottom:0; z-index:-1;} */
.main-company-con .txt-box {width:50%; padding-left:5.42%; box-sizing: border-box; margin-left:50%;}

/* ******************  메인 컨텐츠 :: Business ********************** */
.main-business-con {display:flex; align-items:center; position: relative;}
.main-business-con .txt-box {width:50%; padding-right:6.02%;  box-sizing: border-box; }
/* .main-business-con .slide-box {width:50%; padding-left:9.87%; box-sizing: border-box;} */
#mainBusinessCon .slide-box {position: absolute; width:50%; /* padding-left:9.87%; */ box-sizing: border-box; top:50%; right:0; transform: translateY(-50%); height:100vh}
/* 슬라이드 */
.main-business-slide-wrap {position:relative;}
/* .main-business-slide-wrap:before {content:""; width:297px; height:184px; background:url("/images/main/main_figure.png") no-repeat; position:absolute; right:-3.02%; bottom:-2.62%; } */
.main-business-slide .slick-list{overflow:visible;}
.main-business-slide .slide-item {display:block; /* padding-left:14.4%; */ }
.main-business-slide .slide-item .inner-box {position:relative; /* padding-top:97.96%; */ padding-top:100vh}
.main-business-slide .slide-item .more-btn {display:inline-block; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:20.105%;  z-index: 9;}
.main-business-slide .slide-item .more-btn .inner {position:relative; display:block; width:100%; padding-top:100%; }
.main-business-slide .slide-item .more-btn .inner:before {content:""; position:absolute; top:8.03%; left:8.03%; right:8.03%; bottom:8.03%; background:url("/images/main/main_business_circle.png") no-repeat center / cover; animation: rotate_image 10s linear infinite; transform-origin: 50% 50%; z-index:2;}
.main-business-slide .slide-item .more-btn .inner:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; border-radius:50%; z-index:1; transition: transform 0.5s ease-in-out;}
.main-business-slide .slide-item .more-btn .inner i {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3.2rem; color:var(--main-color); z-index:2;}
@keyframes rotate_image{
	100% {
    	transform: rotate(360deg);
    }
}
.main-business-slide .slide-item .info-box {position:absolute; bottom:7.46%; left:10.85%; right:10.85%; z-index:9; opacity:0; transition: opacity 0.4s 0.5s; }
.main-business-slide .slide-item .info-box .tit {font-size:6rem; letter-spacing:-0.025em; color:#fff;}
.main-business-slide .slide-item .info-box .sub-tit {display:block; font-size:2rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.3); font-weight:500; margin-top:2rem;}
.main-business-slide .slide-item .info-box .txt {font-size:1.6rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.5); line-height:1.625; margin-top:2.5rem;}

/* active */
.main-business-slide li:not(.slick-active) .main-img-effect-wrap {opacity:0; /* transform: translate3d(30px, 0, 0); */}
.main-business-slide li:not(.slick-active) .main-img-effect {transform: scale(1.08,1.08); }
.main-business-slide li.slick-active .slide-item .info-box{opacity:1; }
.main-business-slide li.slick-active .main-img-effect-wrap {opacity:1; transform:none;}
.main-business-slide li.slick-active .main-img-effect {transform:scale(1.0,1.0);}
.section:not(.active-effect) .main-business-slide li .main-img-effect-wrap {opacity:0; /* transform: translate3d(30px, 0, 0); */}
.section:not(.active-effect) .main-business-slide li .main-img-effect {transform: scale(1.08,1.08); }


/* ******************  메인 컨텐츠 :: Summary ********************** */
.main-summary-con {position:relative; padding:15.7rem 8rem 7rem 9rem;  }
.main-summary-con .main-img-effect-wrap {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-summary-con .bg {width:100%; height:100%; background:url("/images/main/main_summary_bg.jpg") no-repeat center / cover; }
.main-summary-con .inner-box {position:relative;}
.main-summary-con .tit-box {position:relative; color:#fff; padding-bottom:6.5rem; border-bottom:1px solid rgba(255,255,255,0.3);}
.main-summary-con .tit-box:before {content:""; width:15rem; height:1px; background-color:#fff; position:absolute; left:0; bottom:-1px;}
.main-summary-con .tit-box .sub-tit {font-size:1.8rem; font-weight:600;}
.main-summary-con .tit-box .tit {display:block; font-size:8.6rem; font-weight:600; margin-top:0.7rem;}
.main-summary-con .bottom-box {margin-top:15rem;display:flex; align-items:center; justify-content:space-between;}
.main-summary-con .txt-box .txt {font-size:1.8rem; line-height:1.83em; color:#fff; letter-spacing:-0.075em;}
.main-summary-con .count-box {display:flex;}
.main-summary-con .count-box .count-item {display:flex; flex-wrap:wrap; align-content: space-between; width:14rem; height:14rem; margin-left:2rem; border:1px solid #fff; box-sizing: border-box; padding:2rem; }
.main-summary-con .count-box .count-item:first-child {margin-left:0;}
.main-summary-con .count-box .count-item .tit {display:block; width:100%; text-align:right; font-size:1.6rem; letter-spacing:-0.025em; color:#fff; font-weight:400;}
.main-summary-con .count-box .count-item .num {display:block; width:100%; font-size:3.6rem; line-height: 1em; letter-spacing:-0.025em; color:#fff; font-weight:700;}



/* ******************  메인 컨텐츠 :: News ********************** */
.main-news-con {display:flex; align-items:center; }
.main-news-con .txt-box {width:50%; padding-right:6.02%;  box-sizing: border-box; }
.main-news-con .slide-box {width:50%; /* padding-left:109px;  */ padding-left:3.975%; box-sizing: border-box;}
.main-news-slide { margin:0 -10px; }
.main-news-slide .slick-track {display:flex;}
.main-news-slide li {margin:0 10px; float:none;}
.main-news-slide li a {display:block; position:relative; padding:2rem 2rem 0; border:1px solid rgba(0,0,0,0.14); background-color:#fff;}
.main-news-slide li a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--main-color); box-shadow:10px 10px 3.8rem rgba(0, 0, 0, 0.21); opacity:0;  transition: all 0.4s; z-index:1;}
.main-news-slide li dt {position:relative; padding-top:77.14%; transition: all 0.4s;}
.main-news-slide li dt .thumb {display:block; position:absolute; top:10%; left:10%; right:10%; bottom:10%; margin:auto; }
.main-news-slide li dd {padding:40px 10px;  transition: all 0.4s;}
.main-news-slide li .category {font-size: 1.6rem; letter-spacing:-0.05em; color:rgba(34,34,34,0.3); font-weight:700;}
.main-news-slide li .tit {font-size: 2.8rem; line-height:1.42; height:2.84em; letter-spacing:-0.05em; color:#222; font-weight:600; margin-top:2rem;}
.main-news-slide li .txt {font-size: 1.6rem; line-height:1.625; height:6.5em; letter-spacing:-0.025em; color:#fff; margin-top:3.5rem;}
.main-news-slide li .date { display:block; font-size: 1.4rem; letter-spacing:-0.025em; color:#888; font-weight:600; }

/* thumb box */
.main-news-slide li .thumb-box {position:relative; transition:all 0.4s; z-index:0;}
.main-news-slide li .thumb-box .date {margin-top:3.5rem; }
/* over box */
.main-news-slide li .over-box {position:absolute; top:20%; left:12.38%; right:12.38%; bottom:12.44%; opacity:0; transition:all 0.4s; z-index:2;}
.main-news-slide li .over-box .inner-box {position:relative; height:100%;}
.main-news-slide li .over-box .category {color:rgba(255,255,255,0.3);}
.main-news-slide li .over-box .tit {color:#fff;}
.main-news-slide li .over-box .date {color:#fff; position:absolute; left:0; bottom:0; }
.main-news-con .slick-arrow.slick-disabled {cursor:default; opacity:0.2;} 
@keyframes active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(30%); 
		transform: translateY(30%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes active-animation-reverse {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(-30%); 
		transform: translateY(-30%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}


/* ******************  메인 컨텐츠 :: Recruit ********************** */
#mainRecruitCon:after {display:none;}
#mainRecruitCon .area-box {height:100%;}
/* bg */
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}
/* content */
.main-recruit-con {display:flex; height:100%;}
.main-recruit-con .left-box {display:flex; width:50%; border-right:1px solid rgba(255,255,255,0.1);}
.main-recruit-con .left-box .con-box {width:50%; padding-top:21.68%; padding-left:25px; border-left:1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
.main-recruit-con .left-box .icon {display:inline-block; position:relative; }
.main-recruit-con .left-box .icon:before {content:""; width:3px; height:27px; background-color:#fff; position:absolute; left:-25px; top:50%; margin-top:-13.5px;}
.main-recruit-con .left-box .tit {display:block; font-size:3.6rem; letter-spacing:-0.05em; color: #fff; font-weight:700; margin-top:6rem;}
.main-recruit-con .left-box .txt {font-size:2rem; line-height:1.65; letter-spacing:-0.075em; color: rgba(255,255,255,0.6); margin-top:3rem;}
.main-recruit-con .left-box .more-btn {display:flex; align-items:center; justify-content:center; width:18.4rem; height:6rem; font-size: 1.6rem; letter-spacing:-0.075em; color:#fff; border:1px solid #fff; box-sizing: border-box; margin-top:70px; transition: all 0.4s;} 
.main-recruit-con .right-box {display:flex; align-items: flex-end; width:50%; padding:0 0 7.22% 6.98%; box-sizing: border-box; }
.main-recruit-con .main-tit-box .main-sub-tit {font-size:1.8rem; font-weight:600; color:#fff;}
.main-recruit-con .main-tit-box .main-tit {font-size:5rem; line-height:1.4; color:#fff; font-weight:600; margin-top:17px;}
.main-recruit-con .main-tit-box .main-tit .point {color:var(--main-color);}

#mainFooter:after {display:none;}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:0;
    opacity: 0;
    transform: translate3d(0,0,0);
	transition: all 0.8s;
}
body.active #fp-nav {opacity:1; right:45px;}
#fp-nav ul li{position:relative; width:15px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a {display:block; position:relative; width:100%; height:15px; }
#fp-nav ul li a span {display:block; width:100%; height:100%; background:url("/images/main/fp_right_icon.png") no-repeat;}
#fp-nav ul li a.active span {background-image:url("/images/main/fp_right_icon_active.png");}
#fp-nav.color ul li a span {background-image:url("/images/main/fp_right_icon.png");}
#fp-nav.black ul li a span {background-image:url("/images/main/fp_right_icon_black.png");}
#fp-nav.color ul li a.active span ,
#fp-nav.black ul li a.active span {background-image:url("/images/main/fp_right_icon_color.png");}