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

@media all and (min-width:1281px){
	.main-page #header {transform:translateY(calc(-1 * (var(--header-top) + var(--header-height)))); transition:all 0.8s ease-in-out;}
	.main-page.main-active #header {transform:translateY(0);}
	.main-page.main-active #header.hide {transform:translateY(calc(-1 * (var(--header-top) + var(--header-height))));}
}

/* ******************  메인 레이아웃(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-container{width:100%; height:100vh; float:left; transition:opacity .6s ease, transform .3s ease;}
.swiper-slide { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow:hidden;}
.main-visual-item-inner{position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover;}

.main-visual-con,
.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%;
	object-fit:cover; 
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 영상 */
.main-visual-item .background-video-wrapper {position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .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;
}
.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-inner {width: 100%;}
.main-visual-txt-box{
	position:absolute; top:0; left:0; width:100%; height: 100%; 
	display:flex;
	align-items:center;
	justify-content: center;
	text-align: center;
	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:8rem; font-weight:700; color: #fff;  }
.main-visual-txt-box .main-visual-txt1 b {font-weight: 700; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff;}
.main-visual-txt-box .main-visual-txt2{font-size:2rem; color:#fff; font-weight:700;  margin-top: 2.5rem;}
.main-more-btn-wrap {overflow: hidden; height: 5rem; margin-top: 4.5rem;}
.main-more-btn {display: block; width: 26rem; height: 5rem; line-height: 5rem; text-align: center; border-radius: 10rem; background-color: rgba(255,255,255,0.05); backdrop-filter:blur(1rem); margin: 0 auto;  transform: translateY(5rem); transition: transform 0.8s ease-in-out;  transition-delay: 0.5s;}
.main-more-btn em {font-size: 1.6rem; font-weight: 600; color: #fff;transition:all 0.8s ease-in-out; }
@media all and (min-width:801px) {
	.main-more-btn:hover em{color: #000;}
}

.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .cm-word-split-JS .char { will-change: transform, opacity; transform: translateZ(0);}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2 {
	animation: text-active-animation 1.3s 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.3s 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.3s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-more-btn { transform: translateY(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-control-con {position: absolute; width: 100%; bottom: -5rem; left: 0; z-index: 1; transition:all 0.8s ease-in-out;}
.main-page.main-active .main-visual-control-con {bottom: 8rem;}
.main-visual-control-con .inner {position: relative; box-sizing: border-box;}
.main-visual-bar-wrap {padding-right: 20rem;}
.main-visual-bar{position: relative;width:100%; height:2px; background:rgba(255,255,255,0.3); transition:var(--transition-custom);}
.main-visual-bar span{position:absolute; content:""; width:0; height:4px; border-radius: 1rem; background-color:#fff; top:-1px; left:0; font-size:0;}

/* 메인 비주얼 :: Dots */
.main-visual-pagination { margin-bottom: 1.5rem;}
.main-visual-pagination span,
.main-visual-pagination strong {font-size: 1.3rem; font-weight: 700; color: #fff; display: inline-block;}

/* 메인 비주얼 :: 화살표 */
.main-visual-arrows {position: absolute; right: 0; top:-1rem;  z-index: 2;}
.main-visual-arrows button {display: inline-block; width: 7rem; height: 7rem; border-radius: 50%; background: rgba(255,255,255,0.05); backdrop-filter:blur(1rem);}
.main-visual-arrows button i {font-size: 3.6rem; color: #fff; line-height: 7rem; transition:var(--transition-custom2)}
@media all and (min-width:801px) {
	.main-visual-arrows button:hover i {color: #000;}
	.main-visual-arrows .cm-fill-btn:hover .cm-fill {width: 20vw; height: 20vw;}
}
/* 메인 비주얼 :: 카운터 */


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 버튼 */
.cm-fill-btn {position: relative; overflow: hidden;}
.cm-fill-btn em,
.cm-fill-btn i {position: relative; display: block; z-index: 1;}

/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size: 7rem; font-weight: 900; color: #000;}
.main-tit-box .main-txt {font-size: 2rem; font-weight: 600; line-height: 1.65; color: #000; opacity:0; transform:translateY(30px); transition:var(--transition-custom2); transition-delay:0.4s;}
.main-tit-box .main-tit.splitting .char{
	animation: text-fade-out 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-tit-box .more-btn  {display: block; width: 26rem; height: 5rem; line-height: 5rem; text-align: center; border-radius: 10rem; background-color: rgba(255,255,255,0.05); backdrop-filter:blur(1rem); margin: 4rem 0 0; font-size: 1.6rem; font-weight: 600; color: #fff;}

 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-tit-box.animated .main-txt  {opacity:1; transform:translateY(0);}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Business) -------- */
#mainContent1 .main-tit-box {text-align: center; margin-bottom: 8rem; position: relative; top: -2rem;}
.main-business-wrapper {position: relative; z-index: 1; padding: 5rem 0 !important;}
.main-business-list li { overflow: visible !important;}
.main-business-wrapper:not(.play) .main-business-list li {opacity: 0; transition:var(--transition-custom2); transform: translateY(3rem); transition-property: opacity, transform;}
.main-business-list li:nth-child(odd) .inner-wrap {transform: translateY(-4.5rem);}
.main-business-list li:nth-child(even) .inner-wrap {transform: translateY(4.5rem);}
.main-business-list li .inner-wrap {width: 100%; height: 100%;}
.main-business-list li a {display: block; position: relative; width: 100%; height: 100%;}
.main-business-list li a .bg-img {position: relative; width: 100%; height: 0; padding-top: 121.62%;}
.main-business-list li a .bg-img span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 1rem; overflow: hidden;}
.main-business-list li a .bg-img span img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: all 0.5s;}
.main-business-list li a:hover .bg-img 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-business-list li a .inner {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: end;}
.main-business-list li a .inner .txt-box {padding: 0 2rem 3rem 4.5rem; box-sizing: border-box;}
.main-business-list li a .inner strong {display: block; font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1.2;}
.main-business-list li a .inner span {display: block; font-size: 1.6rem; font-weight: 600; color: rgba(255,255,255,0.3); line-height: 1.3; margin-top: 1rem;}
.main-business-wrapper:not(.play).animated .main-business-list li { opacity: 1; transform: translateY(0);}
.main-business-wrapper:not(.play).animated .main-business-list li.item02 {transition-delay: 0.2s;}
.main-business-wrapper:not(.play).animated .main-business-list li.item03 {transition-delay: 0.4s;}
.main-business-wrapper:not(.play).animated .main-business-list li.item04 {transition-delay: 0.6s;}
.main-business-wrapper:not(.play).animated .main-business-list li.item05 {transition-delay: 0.8s;}
.main-business-wrapper.play .main-business-list {display: flex; transition-timing-function: linear !important;}

.main-business-flow-wrap {position: absolute; left: 0; top:50%; transform: translateY(-50%); margin-top: 10rem; width: 100%; height: 26rem;}
.main-business-flow-wrap  .inner {position: relative; width: 100%; height: 26rem; overflow: hidden;}
.main-business-flow-wrap .flow-txt {width: 100%;height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.main-business-flow-wrap .maskBg {width: 100%; height: 100%;  display: flex; align-items: center; overflow: hidden;} 
.main-business-flow-wrap .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.main-business-flow-wrap .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.main-business-flow-wrap .maskBg .marquee .absol .mar_ch {display: flex; align-items: center; margin: 0 2.5rem;}
.main-business-flow-wrap .maskBg .marquee .absol h4 {font-size:20rem; color: rgba(0,0,0,0.1); font-weight: 700; box-sizing:border-box; white-space:nowrap;}

 
/* -------- 메인 컨텐츠 :: 컨텐츠2 (Project) -------- */
#mainContent2 {overflow: hidden;}
#mainContent2 .main-more-btn {  transition-delay: 0.8s;}
.main-project-con.active .main-more-btn {transform:translateY(0)}
.main-project-bg {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background: url(/images/main/main_project_bg.jpg)no-repeat center/cover;}
.main-project-con .main-tit-box .main-tit {color: #fff;}
.main-project-con .main-tit-box .main-txt {color: #fff;}
.main-project-con .main-more-btn-wrap {margin-top: 4rem;}
.main-project-con .main-more-btn {margin: 0;}

.main-project-con {display: flex; align-items: center; overflow: hidden;}
.main-project-con .left-con {width: calc(100% - 760px);} 
.main-project-flow-wrap.display-pc {width: 760px; display: flex; gap:20px; height: 100vh;}
.main-project-flow {width: 370px;}
.main-project-list-wrap {position: relative; width: 370px; height: 100%;overflow: hidden; }
.main-project-roller{position: absolute; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; will-change: top, bottom, transform;}
.main-project-list {display: flex; flex-direction: column; gap: 20px; /* 이미지 간격 */ margin: 0; padding: 0; list-style: none; align-items: center;}

.main-project-list li {border-radius: 1rem; width: 100%; height: 500px; overflow: hidden;}
.main-project-list li a {position: relative; display: block; padding: 3rem; width: 100%; height: 100%; border-radius: 1rem; background: rgba(255,255,255,0.1); backdrop-filter:blur(1rem); box-sizing: border-box;}
.main-project-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 74.19%;}
.main-project-list li a .img-box span {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; border-radius: 1rem; overflow: hidden;}
.main-project-list li a .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.main-project-list li a .info-box {margin-top: 2.5rem;}
.main-project-list li a .info-box .tit {font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.3; overflow:hidden;display:block;display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.main-project-list li a .info-box .txt {font-size: 1.6rem; font-weight: 600; line-height: 1.375; color: rgba(255,255,255,0.6); overflow:hidden;display:block;display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; margin-top: 1.5rem;}
.main-project-list li a .info-box .date {display: inline-block; position: absolute; bottom: 3.5rem; left: 3rem; font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,0.6);}
.main-project-m-con {display: none;}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (What we do) -------- */
#mainContent3 {background-color: #F2F2F2;}
.main-con03-top {position: relative; display: flex; justify-content: space-between;}
.main-con03-top .main-tit-box .main-tit {font-weight: 700;}
.main-con03-arrow button {display: inline-block; width: 7rem; height: 7rem; border-radius: 50%; background: #fff; text-align: center; color: #000;}
.main-con03-arrow button i {line-height: 7rem; font-size: 3.6rem;}
.main-con03-arrow button.main-what-next-btn {margin-left: 1rem;}
.main-con03 { margin-top: 8rem; width: calc(100% - ((100% - var(--area-width))/2)); margin-left: auto;}
.main-con03-list li {}
.main-con03-list li a {display: block; opacity: 0; transition:var(--transition-custom2); transform: translateY(3rem); transition-property: opacity, transform;}
.main-con03-list li.item02 a {transition-delay:0.2s;} 
.main-con03-list li.item03 a {transition-delay:0.4s;} 
.main-con03-list li.item04 a {transition-delay:0.6s;} 
.animated .main-con03-list li a {opacity: 1; transform: translateY(0);}

.main-con03-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.main-con03-list li a .img-box span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; border-radius:2rem; }
.main-con03-list li:nth-child(even) a .img-box span {border-radius: 50%;}
.main-con03-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-con03-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-con03-list li a .txt-box {margin-top: 3rem;}
.main-con03-list li a .txt-box .cate {display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #171C61;}
.main-con03-list li a .txt-box .txt {font-size: 1.8rem; font-weight: 700; color: #000; line-height: 1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top: 1.5rem;}
		

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{display: none !important;}