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

/* ****************** 메인 레이아웃 ********************** */
#mainSection{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000 }

.main-slide-container,
.main-slide-wrapper,
.main-slide-con{
	width: 100%;
	height: 100%;
	position: relative
}

.main-slide-wrap .slick-track,
.main-slide-wrap .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-slide-wrap, 
.main-slide-wrap .slick-list,  
.main-slide-wrap .slick-track, 
.main-visual-item{
	height:100%;
}
.main-slide-wrap{position: relative; z-index:1; overflow:hidden; will-change: transform;}
.main-slide-parallax{width:100%; height:100%; will-change: transform;}
	
/* ****************** 메인 비주얼 ********************** */
#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-media{opacity:0.9;}
/* 메인 비주얼 :: 이미지 */
.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-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video video{
	width: 100vw;
	height: calc(56.25vw + 600px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 600px);
	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;
}
.main-visual-item .background-video iframe{
	width: calc(100vw + 15px);
	height: calc(56.25vw + 600px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 600px);
	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;
}
.main-visual-item .background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box.area-wide{
	display:flex;
	align-items:flex-end;
	justify-content:flex-end;
	height:100%;
	text-align:right;
	padding-bottom:15.5rem;
	box-sizing:border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:10rem; font-weight:600; letter-spacing:-0.025em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; line-height:1.3; letter-spacing:-0.025em; color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.load .active-item .main-visual-txt1,
.load .active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.load .active-item .main-visual-txt1{animation-delay:0.1s;}
.load .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;}
.main-visual-txt-box .cm-word-split-JS.splitting .word{line-height:1.2;}
.load .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(100%); 
		transform: translateY(100%); 
	}
	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);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-custom-box{position: absolute; bottom:9rem; left:0; width:100%; z-index:99; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); transition-delay:0.5s}
.main-visual-custom-box .main-visual-dots{position: relative; width:100%; height:3px; background:rgba(255,255,255,0.1);}
.main-visual-custom-box .main-visual-dots .slick-dots li{position: absolute; width:100%; height:5px; bottom:0px; left:0; overflow: hidden;}
.main-visual-custom-box .main-visual-dots .slick-dots li .bar{display: block; height:100%; background:var(--main-color);}

#mainVisual.load + .main-visual-custom-box{opacity:1; transform:translateY(0);}

/* 메인 비주얼 :: button */
.main-visual-con .slick-arrow{position: absolute; top:0; width:50%; height:100%; z-index:9;}
.main-visual-con .slick-arrow.slick-prev{left:0;}
.main-visual-con .slick-arrow.slick-next{right:0;}


/* ****************** 메인 Location ********************** */
.location-tit-box .tit.splitting .char{
	opacity:1;
	transform:translateY(0%);
	line-height:1;
	will-change: opacity, transform;
}

#mainLocation{position: relative; z-index:9; /* min-height:100vh; */ background:#fff; padding:15rem 0;}
.location-tit-box{margin-bottom:6rem;}
.location-tit-box .tit{font-size:7rem; line-height:1; letter-spacing:-0.025em; color:#000; font-weight:700;}
.location-tit-box .txt{font-size:2.4rem; line-height:1.2; color:#000; font-weight:600; margin-top:3rem; opacity:0; transform:translateY(50px); /* transition:var(--transition-custom2); transition-delay:0.5s; */}

.location-list{border-top:2px solid #000; opacity:0; transition:var(--transition-custom2); transition-delay:0.5s;}
.location-list li {padding: 6rem 0; border-bottom:2px solid rgba(0,0,0,1); opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.loca-info-box {display:flex; align-items: center;}
.loca-img-box {width: 31.25%; margin-right: 7.8rem;}
.loca-img-box span {display: block; position: relative; width: 100%; height: 0; padding-top: 58%; border-radius:1.5rem; overflow:hidden;}
.loca-img-box span img{width:100%; height:100%; object-fit:cover;}
.loca-txt-box {width: calc(100% - (31.25% + 7.8rem));}
.loca-title {margin-bottom: 2.8rem;}
.loca-title strong {font-size:3.4rem; color: #000; font-weight: 700; line-height:1.1;}
.loca-title strong em{font-size:0.588em; font-weight: inherit; display: inline-block; margin-left: 0.5rem;}
.loca-btn {width: 4rem; height: 4rem; border-radius:100%; background: #f2f2f2; margin-left: 2rem;}
.loca-btn i {color: #000; font-size:2.4rem;}
.loca-item.open .loca-btn {background: var(--main-color);}
.loca-item.open .loca-btn i {color: #fff;}
.loca-info-list {display:flex; flex-wrap:wrap;}
.loca-info-list dl {display:flex; margin-top: 2rem; width: 100%;}
.loca-info-list dl.w100 {width: 100%;}
.loca-info-list dl:first-of-type {margin-top: 0;}
.loca-info-list dt {width: 26rem; font-size:1.8rem; line-height:1.445; font-weight: 700; color: #000;}
.loca-info-list dd {width: calc(100% - 26rem); font-size:1.8rem; line-height:1.445; font-weight: 500; color: rgba(0,0,0,0.6);}
.loca-map-box {margin-top: 3rem; display:none;}
.map-iframe-con iframe {border-radius: 20px; width: 100%; height:40rem;}

/* animated */
/* .animated .location-tit-box .tit.cm-word-split-JS.splitting .char{animation: text-active-animation 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;} */
/* .animated .location-tit-box .txt{opacity:1; transform:translateY(0);} */
.animated .location-list{opacity:1;}
.location-list li.animated{opacity:1; transform:translateY(0px);}


/* ****************** 메인 하단 링크 ********************** */
.main-bottom-link-wrap{position: relative; z-index:9; display: flex; height:99.9vh;}
.main-bottom-link-wrap .link-item{position: relative; width:50%; padding:11rem 7.5rem; box-sizing:border-box;}
.main-bottom-link-wrap .link-item .img-box{position: absolute; inset:0; width:100%; height:100%;}
.main-bottom-link-wrap .link-item .img-box img{width:100%; height:100%; object-fit:cover;}
.main-bottom-link-wrap .link-item .txt-box{position: relative; z-index:1;}
.main-bottom-link-wrap .link-item .txt-box .tit{font-size:5rem; line-height:1.2; letter-spacing:-0.025em; color:#fff; font-weight:700; margin-bottom:4rem;}
.main-bottom-link-wrap .link-item .txt-box .txt{font-size:1.6rem; line-height:2.1; letter-spacing:0; color:rgba(255,255,255,0.6); font-weight:600; margin-bottom:4rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); /* transition-delay:0.5s; */}
.main-bottom-link-wrap .link-item .txt-box .cm-link-btn{opacity:0; transform:translateY(50px); /* transition:var(--transition-custom2); transition-delay:0.8s; */}


/* 메인 하단 링크버튼 */
.cm-link-btn{position: relative; display: flex; align-items:center; width:25rem; height:6rem; padding:1rem; padding-left:4rem; box-sizing:border-box; background:rgba(255,255,255,0.1); backdrop-filter:blur(1rem); border-radius:3rem;  overflow:hidden; transition:var(--transition-custom2); will-change: opacity, transform;}
.cm-link-btn .btn-txt{position: relative; width:calc(100% - 4rem); font-size:1.6rem; line-height:1.625; font-weight:700; color:#fff; text-align:left; z-index:1; transition:var(--transition-custom);}
.cm-link-btn .btn-icon{position: relative; display: flex; align-items:center; justify-content:center; width:4rem; height:4rem; font-size:1.6rem; color:#fff; transition:var(--transition-custom);}
.cm-link-btn .btn-icon:before{position: absolute; content:''; width:100%; height:100%; border-radius:50%; background:var(--main-color); transition:var(--transition-custom), background 0.4s ease-in-out;}
.cm-link-btn .btn-icon i{position: relative; z-index:1;}
/* hover */
.cm-link-btn:hover .btn-icon:before{transform:scale(20)}


/* 푸터 */
.main-page #footer{/* position: absolute; bottom:0; left:0; transform:translateY(100%); width:100%; transition:all 800ms */}
.main-page #footer.footer-fixed{transform:translateY(0);}



#mainSection{background:#fff;}

/* ****************** 메인 인트로배너 ********************** */
#mainIntro{padding:15rem 0;}
.intro-banner{position: relative; width:100%; height:60rem; border-radius:4rem; background:url('/images/main/main_intro_banner.jpg') no-repeat center / cover; transform:translateY(50px); opacity:0; transition:var(--transition-custom2);}
.intro-banner .txt{position: absolute; bottom:0; right:8.5rem; font-size:5rem; line-height:0.7; letter-spacing:-0.025em; color:#fff; font-weight:700; text-align:right;}

.intro-txt-box{display: flex; padding:0 6rem; box-sizing:border-box; margin-top:8.5rem;}
.intro-txt-box .left-box{width:37%; transform:translateY(50px); opacity:0; transition:var(--transition-custom2);}
.intro-txt-box .left-box .txt{font-size:4rem; line-height:1.5; letter-spacing:-0.025em; color:#000; font-weight:700;}
.intro-txt-box .left-box .txt span{color:var(--main-color);}
.intro-txt-box .right-box{width:63%; transform:translateY(50px); opacity:0; transition:var(--transition-custom2);}
.intro-txt-box .right-box .txt{font-size:2rem; line-height:1.5; letter-spacing:-0.025em; color:#000; font-weight:600; margin-bottom:2.5rem;}
.intro-txt-box .right-box .txt:last-child{margin-bottom:0;}

.animated#mainIntro .intro-banner{opacity:1; transform:translateY(0px); transition-delay:0.4s}
.animated#mainIntro .intro-txt-box .left-box{opacity:1; transform:translateY(0px); transition-delay:0.6s;}
.animated#mainIntro .intro-txt-box .right-box{opacity:1; transform:translateY(0px); transition-delay:0.8s;}


/* ****************** 메인 텍스트 컨텐츠 ********************** */
#mainInfo{}
.info-area{max-width:1200px; margin:0px auto;}
.main-info-box{background:#f5f5f5; padding:15rem 5rem; box-sizing:border-box; border-radius:4rem;}
.main-info-box .info-tit{font-size:8rem; line-height:1; letter-spacing:-0.025em; color:#000; font-weight:700; text-align:center; margin-bottom:9rem;}
.main-info-box .info-tit .char{padding-bottom:3px;}
.main-info-box .info-txt-box{text-align:center; margin-bottom:11rem;}
.main-info-box .info-txt-box:last-child{margin-bottom:0;}
.main-info-box .info-txt-box .tit{font-size:3rem; line-height:1.1; letter-spacing:-0.025em; color:#000; font-weight:700; margin-bottom:4rem;}
.main-info-box .info-txt-box .txt{font-size:1.6rem; line-height:1.875; letter-spacing:-0.025em; color:rgba(0,0,0,0.6); font-weight:600;}

.main-info-box .info-img-box{display: flex; flex-wrap:wrap; margin:-0.7rem -0.7rem 11rem;}
.main-info-box .info-img-box span{display: block; width:calc(50% - 1.4rem); margin:0.7rem; border-radius:1rem; overflow:hidden;}
.main-info-box .info-img-box span img{width:100%;}

.info-con-JS .tit,
.info-con-JS .txt,
.info-con-JS span{transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}
.info-con-JS .txt{transition-delay:0.2s}

.animated.info-con-JS .tit,
.animated.info-con-JS .txt,
.animated.info-con-JS span{opacity:1; transform:translateY(0px);}


/* ****************** 메인 협력사 ********************** */
#mainCustomer{padding:15rem 0;}
.main-customer-tit{font-size:5rem; letter-spacing:-0.025em; color:#000; font-weight:700; text-align:center;}
.main-customer-list{display: flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:5rem;}
.main-customer-list .list-item{width:16.25%; margin:0 2.5%;}
.main-customer-list .list-item span{}
.main-customer-list .list-item span img{max-width:100%;}


/* ****************** 메인 기업가치 ********************** */
#mainValue{background: url('/images/main/value_bg.jpg') no-repeat center / cover; padding: 17.5rem 0; /* margin-top: 15rem; */}
.value-tit-box{text-align:center; margin-bottom:8rem;}
.value-tit-box .tit{font-size:8rem; line-height:1; letter-spacing:-0.025em; color:#fff; font-weight:700;}
.value-tit-box .txt{font-size:2.4rem; line-height:1.33; letter-spacing:0; color:rgba(255,255,255,0.6); font-weight:600; margin-top:0.5rem;}

.value-list {display:flex; justify-content: center; will-change:auto !important}
.value-list li {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40rem; height: 40rem; border-radius:100%; background: rgba(255,255,255,0.05); padding: 0 2rem; box-sizing: border-box; backdrop-filter:blur(30px);}
.value-list li:before { content: ""; position: absolute; inset: 0; border-radius: 100%; padding: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.value-list li:nth-of-type(2):before {background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));}
.value-list li:nth-of-type(3):before {background: linear-gradient(-90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));}
.value-list .arrow-box {display: flex; align-items: center; justify-content: center; position:absolute; right: -2rem; width: 6.8rem; height: 6.8rem; border:2px dashed rgba(255,255,255,0.6); border-radius:100%;}
.value-list .arrow-box i {color: #fff; font-size:2.4rem;}
.value-list .tit {font-size:2.4rem; color: #fff; font-weight: 700; line-height:1.083em;}
.value-list .txt {font-size:1.4rem; color: #fff; opacity: 0.6; font-weight: 600; line-height:1.5em; letter-spacing:-0.05em; margin-top: 1.4rem;}
.value-list .tit-box {text-align:center; margin-top: 2rem;}
.value-list li:nth-of-type(1) {position: relative; left: 2.5rem; z-index: 3;}
.value-list li:nth-of-type(2) {position: relative; z-index: 2;}
.value-list li:nth-of-type(3) {right: 2.5rem; position: relative; z-index: 1;}
.value-list .ico-box {position: relative; width: 11.6rem;}
.value-list .ico-box:before {display: block; position:absolute; content:""; width: 4rem; height: 4rem; border-radius:100%; background:rgba(238,117,0,0.42);}
.value-list .ico-box span {display: block; position: relative; width: 100%; padding-top: 98.28%;}
.value-list li:nth-of-type(1) .ico-box:before {top: 6.2rem; left: 0.7rem;}
.value-list li:nth-of-type(2) .ico-box:before {top: 2.5rem; right: 2.5rem;}
.value-list li:nth-of-type(3) .ico-box:before {top: 2rem; left: 0.5rem;}

/* ****************** 메인 텍스트 컨텐츠(spirit) ********************** */
.info-spirit-list{display: flex; justify-content: space-between; max-width:1200px; margin:auto;}
.info-spirit-list .list-item{width:calc(20% - 0.9rem); height:27rem; border:1px solid #cfcfcf; border-radius:2rem; box-sizing:border-box; padding:1rem;}