@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
#wrap.main-wrap {overflow: visible;}
#mainContent > article:not(#mainValueCon){overflow: hidden;}

.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; position:relative; background-color:#000 }

/* -------- 메인 인트로 :: 본문 -------- */
.main-visual-list-con{display:table; width:100%; height:100%; table-layout:fixed;}
.main-visual-list-con-mobile{display:none;}
.main-visual-item{display:table-cell; position:relative; width:25%; height:100%; vertical-align: top;}
.main-visual-item:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: translateY(5rem); background: url('../images/main/main_visual_cover.png') center bottom repeat-x; opacity: 0; content: ''; transition:var(--transition-custom);}
.main-visual-item > a{position: relative; display: block; width: 100%; height:100%;}
.main-visual-inner{padding-bottom: 10%; display:flex; flex-direction: column; align-items:center; justify-content: flex-end; text-align: center; width: 100%; height:100%; box-sizing: border-box;}
.main-visual-en-tit{font-size:2.6rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; color:rgba(255,255,255,0.2); transition:var(--transition-custom);}
.main-visual-tit{margin-top: 2rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; color:rgba(255,255,255,0.2); transition:var(--transition-custom);}
/* Over시 */
.main-visual-item.active:before{transform: translateY(0); opacity: 1;}
.main-visual-item.active .main-visual-en-tit{color: var(--main-color);}
.main-visual-item.active .main-visual-tit{color: #fff;}

#mainVisual .main-visual-bg-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#mainVisual .bg-item{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#mainVisual .bg-item div{
	width:100%;
	height:100%;
	opacity:0;filter:Alpha(opacity=0);
	visibility:hidden;
    transform: scale(1.1,1.1) rotate(0.0001deg);
    transition: transform 3s cubic-bezier(0.4, 0, 1, 1), opacity 2s cubic-bezier(.23,1,.32,1), visibility 2s cubic-bezier(.23,1,.32,1);
	background-size: cover !important;
}
#mainVisual .bg-item.bg-active div{
	visibility:visible;
	opacity:1.0;filter:Alpha(opacity=100);
    transform: scale(1.0,1.0) rotate(0.0001deg);
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:50%;
	width:100%; transform: translateY(-50%);
	z-index:1;
}
.main-visual-txt-box{text-align: center;}
/* .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:7.6rem; font-weight:700; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 3rem; font-size:2.4rem; letter-spacing:-0.05em; font-weight: 300; color:#fff;}
/* 메인 비주얼 :: 텍스트 :: 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;} */


/* 메인 비주얼 :: 애니메이션 */
.cm-txt-up-ani{display: block;/* padding-bottom: 0.1em; */ overflow-y: hidden;}
.cm-txt-right-ani {display: block; overflow-y: hidden; overflow-x: hidden;}
.cm-txt-up-ani span,
.cm-txt-right-ani span {position: relative; display: inline-block; font-size: inherit; font-weight: inherit; color:inherit;}
.cm-txt-up-ani span{transform: translate3d(0, 150%, 0);}
.cm-txt-right-ani span{transform: translate3d(-150%, 0, 0);}

.animated .cm-txt-up-ani span,
.active-item .cm-txt-up-ani span {animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;}
.animated .cm-txt-right-ani span,
.active-item .cm-txt-right-ani span {animation: text-right 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated .cm-txt-ani-delay00 span,
.active-item .cm-txt-ani-delay00 span {animation-delay:0s;}
.animated .cm-txt-ani-delay02 span,
.active-item .cm-txt-ani-delay02 span {animation-delay:0.5s;}
.animated .cm-txt-ani-delay03 span,
.active-item .cm-txt-ani-delay03 span {animation-delay:0.8s;}

@keyframes text-up {
	from {
		transform: translate3d(0, 150%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
@keyframes text-right {
	from {
		transform: translate3d(-150%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}


/* 메인 비주얼 :: 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);
	}
}


/* ******************  메인 컨텐츠 ********************** */
#mainContent{background: url("../images/main/cm_main_bg.png") center top no-repeat; background-size: cover;}
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box.has-btn{position: relative;}
.main-tit-box .main-tit{font-size: 2.4rem; line-height: 1.3; font-weight: 700; font-style: italic; color: var(--main-color);}
.main-tit-box .main-sub-tit{margin-top:3rem; font-size:5.2rem; line-height: 1.23; letter-spacing:-0.05em; font-weight:600; color: #fff;}
.main-pointer-btn{position:absolute; top:-11rem; right:-12rem; width: 24rem; height: 24rem; background-color: rgba(0,24,83,0.8); backdrop-filter: blur(10px); border-radius:50%; box-sizing: border-box; transition:var(--transition-custom);}
.main-pointer-btn img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 83.33%; max-width: 100%; max-height: 100%; animation: spin 10s infinite linear;}
.main-pointer-btn .pointer-txt {position: relative; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; visibility: visible; opacity: 1;}
.is-mobile .main-pointer-btn {visibility: hidden; opacity: 0;}
.main-pointer-btn .pointer-txt:before,
.main-pointer-btn .pointer-txt:after{position: absolute; top: 50%; left: 50%; margin-left: -2.4rem; margin-top: -2.4rem; font-size: 4.8rem; font-weight: 400; color:#fff; font-family: xeicon; transition:var(--transition-custom);}
.main-pointer-btn .pointer-txt.txt01:after{content: "\e907"; transform: rotate(-45deg);}
.main-pointer-btn .pointer-txt.txt02:before{font-size: 4.2rem; content: "\ea39";}
.main-pointer-btn .pointer-txt.txt02:after{content: "\e907"; opacity: 0;}
.main-pointer-btn:hover .pointer-txt.txt01:after{transform: rotate(0deg);}
.main-pointer-btn:hover .pointer-txt.txt02:before{opacity: 0;}
.main-pointer-btn:hover .pointer-txt.txt02:after{opacity: 1;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainBusinessCon{padding: 13rem 0 11rem;}
#mainBusinessCon .main-tit-box .main-sub-tit + .main-sub-tit{margin-top: 0;}

.main-business-con{position: relative; width: 100%;}
.main-business-inner{position: relative; display: flex; box-sizing: border-box;}

.main-business-left{width: 52rem; position: relative; z-index: 1;}
.main-business-left-inner{padding-top: 10rem;}

.main-business-right{width: calc(100% - 52rem);}
.main-business-list{margin: 0 -3rem; display: flex; flex-wrap:wrap; flex-direction: row-reverse;}
.main-business-item{margin: 0 3rem; width: calc(50% - 6rem); position: relative;}
.main-business-item:nth-child(2){margin-top: 40rem;}
.main-business-item:nth-child(3){margin-top: -34rem;}
.main-business-item a{position: relative; display: block; width: 100%;}
.main-business-bg{position:relative; width: 100%; height: 0; padding-top: 160.86%; border-radius: 5rem; overflow: hidden; box-shadow: 0rem 0rem 0rem 0rem rgba(0,0,0,0.3);}
.main-business-bg-inner{position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.main-business-bg span{position:absolute; top:0; left:0; width:100%; height:100%; display: block; transition:var(--transition-custom);}
.main-business-txt{position: absolute; top: 11.87%; left: 0; width: 100%; text-align: center;}
.main-business-txt p{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #fff;}
.main-business-txt h5{margin-top: 2rem; font-size: 3.6rem; line-height: 1.16; letter-spacing: -0.02em; font-weight: 700; color: #fff;}

.main-business-bg-inner{
	clip:rect(0,46rem,0,0);
	transition:clip 1s 0.6s, box-shadow 1s 0.6s;
}
.main-business-item.animated .main-business-bg-inner{clip:rect(0,46rem,74rem,0); box-shadow: 0.3rem 0.3rem 6rem 0rem rgba(0,0,0,0.3);}

.main-business-item a:hover .main-business-bg span{transform: scale(1.1) rotate(0.02deg);}


/* -------- 메인 컨텐츠 :: 컨텐츠2(회사소개) -------- */
#mainCompanyCon{position: relative; padding:20rem 0 27rem;}
#mainContent > article#mainCompanyCon {overflow: visible;}

.main-company-bg{position: absolute; bottom: -20rem; left: 0; width: 100%; height: 50rem; mix-blend-mode: luminosity;}

.main-company-con{position: relative;}
.main-company-con .main-pointer-btn{top:-7rem; right:12rem;}

.main-company-tit{font-size: 8rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; font-style: italic; color: #fff; text-shadow: 0 0 4.6rem #0054ff; padding-left: 20rem;}
.main-company-tit + .main-company-tit{margin-top: 3rem; padding-left: 58rem;}
.main-company-tit a{font-weight:inherit; color:inherit;}
.main-company-txt{margin-top:4rem; padding-left: 58rem; font-size:2.2rem; line-height: 1.54; letter-spacing:-0.05em; font-weight:400; color: #fff;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(핵심가치) -------- */
#mainValueCon{padding: 20rem 0 5rem; position: relative;}
/* #mainValueCon:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; content: ''; background-color: #000724;} */
#mainValueCon .main-tit-box{/* position: relative; z-index: 1; width: 100%; *//*  position: sticky; top: 5rem; */}

.main-value-con{/* padding-top: 9.5rem; */}
.main-value-wrapper-JS{display: none;}
.main-value-wrapper{margin-top: 12rem; position: relative;}
.main-value-list{position: relative; width: 100%;}
.main-value-item{position: sticky; top: 12rem; top: 24rem; left: 0; width: 100%; height: 48rem;transform-origin: top;}
.main-value-item + .main-value-item{margin-top: 30rem;}
.main-value-item6{height: 10rem;}
.main-value-inner{position: relative; width: 100%; height: 48rem; border-radius: 48rem; transform: translateY(0rem);}
.main-value-link{position: relative; display: block; width: 100%; height: 48rem; border-radius: 48rem;}
.main-value-basis,
.main-value-bg{position: absolute; top: 0; left: 0; width: 100%; height: 48rem; border-radius: 48rem; opacity: 1; transform:scaleX(1.1); display: block;}
.main-value-basis{box-shadow: 0 0 11.4rem -5.57rem rgba(0,0,0,1);}
.main-value-tit{position: absolute; top: 50%; left: 0; width: 100%; line-height: 1.6; letter-spacing: -0.02em; font-weight: 600; text-align: center; font-size: 9rem; color: rgba(255,255,255,0.5); /* transform: translateY(-50%); */ box-sizing: border-box;}
.main-value-tit span{font-size: 2.4rem; font-weight: 500; display: block;}
.main-value-item1 .main-value-tit{font-size: 8rem;}
.main-value-tit .m-br{display: none;}

/* active-item */
.main-value-item.active-item .main-value-tit{text-shadow: 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1); animation: letter-glow 2s ease infinite;}

@keyframes letter-glow {
  0% {
    text-shadow: 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1);
  }
  40% {
    text-shadow: 0 -1.3rem 3rem rgba(255,255,255,0.3), -1.3rem 0 3rem rgba(255,255,255,0.3), 1.3rem 0 3rem rgba(255,255,255,0.3), 0 1.3rem 3rem rgba(255,255,255,0.3);
  }
  100% {
    text-shadow: 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1), 0 0 3rem rgba(255,255,255,0.1);
  }
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(PUBLIC RELATIONS) -------- */
#mainCustomerCon{position: relative; padding:11.5rem 0 10rem; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000724+0,000310+100 */
/* background: linear-gradient(to bottom,  rgba(0,7,36,1) 0%,rgba(0,3,16,1) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
#mainCustomerCon:after{position: absolute; top: 0; left: -75rem; width: 50%; height: 100%; content: ''; display: none; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000724+0,000310+100 */
background: linear-gradient(to bottom,  rgba(0,7,36,1) 0%,rgba(0,3,16,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

#mainCustomerCon .main-tit-box{position: relative; padding-right: 62rem; box-sizing: border-box;}

/* Controls */
.main-customer-controls {position: absolute; bottom: 0; right:15rem;}
.main-customer-controls-inner{width: calc(100% - 15rem); width: 100%; display:flex; justify-content:flex-end; align-items:center;}
.main-customer-controls .pagination{display:flex; align-items:center;}
.main-customer-controls .pagination .current,
.main-customer-controls .pagination .total{font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 700; color: #fff;}
.main-customer-controls .pagination .slash{margin: 0 1rem; width: 0.2rem; height: 1.4rem; background-color: rgba(255,255,255,0.25); display: block;}
.main-customer-controls .pagination .total{opacity: 0.25;}
.main-customer-controls .progressbar {margin: 0 2rem; position:relative; width:24rem; height:2px; background-color:rgba(255,255,255,0.15);}
.main-customer-controls .progressbar em {position: absolute; top: 0; left: 0; width: 0; height:2px; background-color:#fff; display: block;}
.main-customer-controls .arrow{width: 4rem; height: 4rem; display: block;}
.main-customer-controls .arrow i {font-size:2.4rem; color: #fff;}
.main-customer-controls .view-more{margin-left: 1rem; line-height: 4rem; font-size:2.4rem; color: #fff; display: block;}
.main-customer-controls .view-more i{position: relative; top: 0.1rem;}

/* 슬라이드 */
.main-customer-container{margin-top: 10rem; /* max-width: 400px; */position: relative;}
.main-customer-container:after{position: absolute; top: 0; right: 0; width: 50%; height: 100%; content: ''; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00051a+0,00051a+52,00051a+100&0+0,1+52,1+100 */
background: linear-gradient(to right,  rgba(0,5,26,0) 0%, rgba(0,5,26,0.4) 20%, rgba(0,5,26,0.7) 60%, rgba(0,5,26,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-customer-wrapper{padding-right: 0 !important; overflow: visible !important; box-sizing: border-box;}
.main-customer-list{display: flex;}
.main-customer-item{width: 33.33%;}
.main-customer-item a{display: block; width: 100%; opacity: 0.2; transition:var(--transition-custom); transition-property: opacity;}
.main-customer-item.opa-60 a{opacity: 0.6;}
.main-customer-item.opa-80 a{opacity: 0.8;}
.main-customer-item.opa-100 a{opacity: 1;}
.main-customer-thum-inner{position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.main-customer-thum{position: relative; width: 100%; height: 0; padding-top: 100%; overflow: hidden; border-radius: 100%;}
.main-customer-item:nth-child(2n) .main-customer-thum{border-radius: 0;}
.main-customer-item:nth-child(2n+1) .main-customer-thum{border-radius: 0 50% 50% 0;}
.main-customer-item:nth-child(3n+1) .main-customer-thum{border-radius: 100%;}
.main-customer-thum span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:var(--transition-custom);}

.main-customer-thum-inner{
	clip:rect(0,0,46rem,0);
	-webkit-transition:clip 1s 0.3s;
	-moz-transition:clip 1s 0.3s;
	-o-transition:clip 1s 0.3s;
	-ms-transition:clip 1s 0.3s;
	transition:clip 1s 0.3s;
}
.main-customer-container.animated .main-customer-thum-inner{clip:rect(0,46rem,46rem,0);}

.main-customer-txt{margin-top: 4.5rem;}
.main-customer-txt .category{font-size: 1.6rem; line-height: 1.3; color: rgba(255,255,255,0.5); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:var(--transition-custom); transition-property: color;}
.main-customer-txt .tit{margin-top: 1.5rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 400; color:rgba(255,255,255,0.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:var(--transition-custom); transition-property: color;}
.main-customer-item a:hover .main-customer-thum span{transform: scale(1.1) rotate(0.02deg);}
.main-customer-item a:hover .main-customer-txt .category,
.main-customer-item a:hover .main-customer-txt .tit{color: var(--main-color);}

/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* view */
.mouse-pointer .pointer-circle2,
.mouse-pointer .pointer-circle{opacity: 0; position:absolute; top:50%; left:50%; width: 24rem; height: 24rem; background-color: rgba(0,24,83,0.8); backdrop-filter: blur(10px); border-radius:50%; transform:translate(-50%,-50%) scale(0); box-sizing: border-box; transition:var(--transition-custom);}
.mouse-pointer .pointer-circle2 img,
.mouse-pointer .pointer-circle img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 83.33%; max-width: 100%; max-height: 100%; animation: spin 10s infinite linear;}
.mouse-pointer .pointer-txt {opacity: 0;position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size: 4.8rem; font-weight: 400; color:#fff; border-radius: 100%; transform: rotate(-45deg) translate(-50%,-50%) scale(0); transition:var(--transition-custom);}
.mouse-pointer .pointer-txt2{opacity: 0;position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size: 4.8rem; font-weight: 400; color:#fff; border-radius: 100%; transform: translate(-50%,-50%) scale(0); transition:var(--transition-custom);}
/* view active */
.mouse-pointer.view .pointer-circle{opacity: 1; transform:translate(-50%,-50%) scale(1);}
.mouse-pointer.view .pointer-txt{opacity: 1; transform: rotate(-45deg) translate(-50%,-50%) scale(1);}
/* online active */
.mouse-pointer.online .pointer-circle2{opacity: 1; transform:translate(-50%,-50%) scale(1);}
.mouse-pointer.online .pointer-txt2{opacity: 1; transform: translate(-50%,-50%) scale(1);}
/* drag */
.mouse-pointer .drag-circle{opacity: 0; position:absolute; top:50%; left:50%; width: 20rem; height: 20rem; border-radius:50%; transform:translate(-50%,-50%) scale(0); box-sizing: border-box; transition:var(--transition-custom); transition-property: transform, opacity;}
/* drag active */
.mouse-pointer.drag{mix-blend-mode: difference;}
.mouse-pointer.drag .drag-circle{opacity: 1; transform:translate(-50%,-50%) scale(1);}

.is-mobile .mouse-pointer,
.is-mobile .pointer-circle,
.is-mobile .pointer-txt {visibility: hidden; opacity: 0;}