@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

@media all and (max-width:800px){
	:root{
		--mn-font-size-DExlg: 11.2rem; /* 160★ */
		--mn-font-size-Exlg: 9rem; /* 130★ */
		--mn-font-size-lg: 8rem; /* 120★ */
		--mn-font-size-H0: 6.7rem; /* 96★ */
		--mn-font-size-H1: 3.9rem; /* 56★ */
		--mn-font-size-H2: 3.3rem; /* 48★ */
		--mn-font-size-H3: 2.9rem; /* 42 */
		--mn-font-size-H4: 2.8rem; /* 40 */
		--mn-font-size-H5: 2.5rem; /* 36★ */
		--mn-font-size-H6: 2.2rem; /* 32★ */

		--mn-font-size-P1: 2.1rem; /* 30★ */
		--mn-font-size-P2: 1.9rem; /* 28★ */
		--mn-font-size-P3: 1.8rem; /* 26 */
		--mn-font-size-P4: 1.7rem; /* 24★ */
		--mn-font-size-P5: 1.6rem; /* 22★ */
		--mn-font-size-P6: 1.4rem; /* 20 */

		--line-height-50: 0.5;
	}
}
@media all and (max-width:480px){
	:root{
		--mn-font-size-DExlg: 7.8rem; /* 160★ */
		--mn-font-size-Exlg: 6rem; /* 130★ */
		--mn-font-size-lg: 6rem; /* 120★ */
		--mn-font-size-H0: 5.2rem; /* 96★ */
		--mn-font-size-H1: 3.3rem; /* 56★ */
		--mn-font-size-H2: 3rem; /* 48★ */
		--mn-font-size-H3: 2.7rem; /* 42 */
		--mn-font-size-H4: 2.6rem; /* 40 */
		--mn-font-size-H5: 2.2rem; /* 36★ */
		--mn-font-size-H6: 2.1rem; /* 32★ */

		--mn-font-size-P1: 1.9rem; /* 30★ */
		--mn-font-size-P2: 1.8rem; /* 28★ */
		--mn-font-size-P3: 1.7rem; /* 26 */
		--mn-font-size-P4: 1.6rem; /* 24★ */
		--mn-font-size-P5: 1.5rem; /* 22★ */
		--mn-font-size-P6: 1.4rem; /* 20 */
	}
}


/* ******************  메인 layout ********************** */
#wrap.index-wrap {overflow: visible; background-color: rgba(18, 18, 18, 1);}
.index-wrap .nav-open-btn{top: calc(-1 * var(--header-height)); transition: top 0.8s ease-in-out;}
.index-wrap #headerInnerWrap{top: calc(-1 * var(--header-height)); transition: background-color 0.4s ease-in-out, transform 0.4s ease-in-out, top 0.8s ease-in-out;}
.index-wrap.active-start .nav-open-btn,
.index-wrap.active-start #headerInnerWrap{top: 0;}

.main-scroll-icon{opacity: 0; transform: translateY(100%); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;}
.index-wrap.active-start .main-scroll-icon{opacity: 1; transform: translateY(0);}

@media all and ( max-width: 1280px ){
	
}
@media all and ( max-width: 800px ){
	#wrap.index-wrap {overflow: hidden;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;}

.main-intro-con {position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; z-index: 1;}

.main-intro-con .video-counter {position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 9px)); font-size: 2.5rem; color: white; z-index: 10; font-family: var(--font-family3);}

.video-outer-wrapper {position: relative; width: 512px; height: 375px; overflow: hidden; position: relative; transform-origin: center center; /* transition: clip-path 2s ease;  */z-index: 5; will-change: transform;}

.video-inner-wrapper {position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 9px)); width: 480px; height: 270px; border-radius: 8px; overflow: hidden; /* clip-path: inset(0% 100% 0% 0%); */ transform-origin: center center; /* transition: clip-path 1s ease; */ z-index: 5; will-change: transform;}
.video-reveal-img,
.video-reveal-cover{display: none;}

/* 수정중 */
.video-reveal-cover-css{position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #000; z-index: 10; pointer-events: none;}
.video-reveal-img-css{/* position: absolute; top: 0; right: 0;  */width: 100%; height: 100%; z-index: 9; pointer-events: none;}
.video-reveal-img-css{position: relative;}
.video-reveal-img-css img{width: 100%; height: 100%; object-fit: cover;}
.intro-video-css{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;}

.video-reveal-img-css img {position: absolute; left: 0; top: 50%; height: 120%; transform: translateY(-50%);}
.intro-video-css {top: 50%; height: 120%; transform: translateY(-50%);}
/* //  */

.video-inner-wrapper video {width: 100%; height: 100%; object-fit: cover; display: block;}

.video-finder-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible !important;}
.video-finder-overlay #svg-timer{font-size: 2rem; letter-spacing: -0.01em; font-weight: 400; color: rgba(142, 149, 163, 1);}
.video-finder-overlay g {transform-box: fill-box; transform-origin: center; will-change: transform;}

#finderLeftTop    { transform: translate(150px, 100px); opacity: 0; }
#finderRightTop   { transform: translate(-150px, 100px); opacity: 0; }
#finderLeftBottom { transform: translate(150px, -100px); opacity: 0; }
#finderRightBottom{ transform: translate(-150px, -100px); opacity: 0; }
#recGroup         { transform: translate(0, 100px); opacity: 0; }
#timerGroup       { transform: translate(0, -100px); opacity: 0; }

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:6;
}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end; justify-content: center;
	height:100%;
}
.main-visual-txt-inner{padding-bottom: 11.3rem !important;}
.main-visual-txt-box .main-visual-txt1{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:11.97vw; font-weight:700; letter-spacing:-0.01em; color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-start .main-visual-txt1{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-start .main-visual-txt1{animation-delay:0.8s;}
.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-start .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 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-scroll-icon{position:absolute; bottom:3rem; left:50%; margin-left: -10rem; width: 20rem; /* transform: translate(-50%); */ text-align:center; z-index:10;}
.main-scroll-icon .scroll-box {position: relative; width: 2.4rem; height: 5rem; box-sizing: border-box; border: 1px solid rgba(253, 253, 253, 1); border-radius: 2.5rem; margin: 0px auto; display: block; overflow: hidden;}
.main-scroll-icon .scroll-box::after {position: absolute; left: 50%; margin-left: -0.4rem; width: 0.8rem; height: 0.8rem; background-color: rgba(253, 253, 253, 1); content: ""; border-radius: 50%; animation: 1.4s ease 0s infinite normal none running scrollAni;}
.main-scroll-icon .scroll-txt{margin-top: 1rem; display:block; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.01em; font-weight:300; color: #fff;}

@keyframes scrollAni {
	from { 
		top: -0.8rem;
	}
	to {
		top: 3.8rem;
		opacity: 0;
	}
}

@media all and ( min-width: 1921px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:23rem;}
}
@media all and ( max-width: 1280px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:11vw;}
	/* .main-visual-txt-box .main-visual-txt1 .m-br{display: block;} */
}
@media all and ( max-width: 800px ){
	.main-intro-con {width: 100%; height: 100vh;}

	.main-intro-con .video-counter {transform: translate(-50%, calc(-50% - 6px)); font-size: 2rem;}

	.video-outer-wrapper {/* width: 512px; height: 375px; */ width: 410px; width: 320px; height: 234px;}

	.video-inner-wrapper {transform: translate(-50%, calc(-50% - 6px)); /* width: 384px; height: 216px; */ width: 290px; height: 164px; border-radius: 8px;}
	.video-reveal-cover{position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #000; z-index: 10; pointer-events: none; display: block;}
	#videoWrapper{/* -webkit-backface-visibility: hidden;  will-change: clip-path; clip-path: inset(0% 100% 0% 0%); -webkit-clip-path: inset(0% 100% 0% 0%);  clip-path: inset(0% 0% 0% 0%); -webkit-clip-path: inset(0% 0% 0% 0%); */overflow: hidden; position: relative;}

	.video-finder-overlay #svg-timer{font-size: 1.6rem;}

	#finderLeftTop    { transform: translate(120px, 80px); opacity: 0; }
	#finderRightTop   { transform: translate(-120px, 80px); opacity: 0; }
	#finderLeftBottom { transform: translate(120px, -80px); opacity: 0; }
	#finderRightBottom{ transform: translate(-120px, -80px); opacity: 0; }
	#recGroup         { transform: translate(0, 80px); opacity: 0; }
	#timerGroup       { transform: translate(0, -80px); opacity: 0; }

	.intro-video-css {top: 50%; height: 120%; transform: translateY(-50%);}
	.video-reveal-img-css{position: relative;}
	.video-reveal-img-css img {position: absolute; left: 0; top: 50%; height: 120%; transform: translateY(-50%);}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding: 0 var(--area-padding); box-sizing: border-box; justify-content: flex-start;}
	.main-visual-txt-inner{padding-bottom: 13rem !important;}
	.main-visual-txt-box .main-visual-txt1{font-size: var(--mn-font-size-DExlg); line-height: var(--line-height-50);}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{bottom:4rem; margin-left: -10rem; width: 20rem;}
	.main-scroll-icon .scroll-box {width: 1.68rem; height: 3.5rem;}
	.main-scroll-icon .scroll-box::after {margin-left: -0.28rem; width: 0.56rem; height: 0.56rem;}
	.main-scroll-icon .scroll-txt{margin-top: 0.5rem; font-size: var(--mn-font-size-P4); line-height: var(--line-height-130);}
}


/* ******************  메인 컨텐츠 ********************** */
#mainContent{padding-top: 100vh; position: relative;}
.mainContentTop{position: relative; border-radius: 6rem 6rem 0 0; background: #121212;}
.main-effect-cir01{position: absolute; top: 0; left: 0; /* width: 878px; height: 1174px; */ width:45.72vw; height: 61.14vw; opacity: 1; background: url("/images/main/main_effect_cir01.png") center/cover no-repeat; display: block;}
.main-effect-cir02{position: absolute; top: 85rem; right: 0; /* width: 669px; height: 1675px; */ width:34.84vw; height: 87.23vw; opacity: 1; background: url("/images/main/main_effect_cir02.png") center/cover no-repeat; display: block;}

.mainContentBottom{background-color: rgba(253, 253, 253, 1);}

@media all and ( max-width: 1280px ){
	
}
@media all and ( max-width: 800px ){
	.mainContentTop{border-radius: 0;}
	.main-effect-cir01,
	.main-effect-cir02{display: none;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(회사소개) -------- */
#mainCompanyCon{padding:28rem 0 18.5rem; overflow: hidden;}

/* 상단 */
.main-company-top{text-align: center;}
.main-company-top .tit01{font-size: 6.8rem; line-height: 1.3; font-weight: 300; letter-spacing: -0.01em; color: #8E95A3;}
.main-company-top .tit02{font-size: 13rem; font-size: 6.7708vw; line-height: 1.3; font-weight: 300; letter-spacing: -0.01em; color: #F2F4FA;}
.main-company-top .tit02 b{font-weight: 800; color: var(--main-color);}
.main-company-top .tit03{margin-top: 3rem; font-size: 2.8rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: rgba(216, 220, 226, 1);}
.main-company-top .tit03 b{font-weight: 500; color: var(--main-color);}
.main-company-top .swiper-slide{opacity: 0 !important; visibility: hidden; padding:0 var(--area-padding); box-sizing:border-box;}
.main-company-top .swiper-slide.swiper-slide-active{opacity: 1 !important; visibility: visible;}

/* 중앙 */
.main-company-middle{margin-top: 7.4rem; position: relative;}
.main-company-middle .area{max-width: 1140px; display: flex; flex-wrap:wrap; justify-content: space-between;}

.main-company-img-left{max-width: 26.8rem; width: 23.5%;}
.main-company-img-center{margin-top: 5rem; max-width: 48rem; width: 42.1%; position: relative;}
.main-company-img-right{margin-top: 22rem; max-width: 26.8rem; width: 23.5%;}
.main-company-img-center-back{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 94.8rem; opacity: 0.25; filter: blur(2rem);/*8rem*/}

.main-company-img-center svg{position: absolute; width: 3.1rem;}
.main-company-img-line-TpLt{top: -1.5rem; left: -1.5rem;}
.main-company-img-line-BtLt{bottom: 3.5rem; left: -1.5rem;}
.main-company-img-line-TpRt{top: -1.5rem; right: -1.5rem;}
.main-company-img-line-BtRt{bottom: 3.5rem; right: -1.5rem;}

.main-company-img-container,
.main-company-img-list{width: 100%; height: auto; position: relative;}
.main-company-img-container{overflow: hidden; border-radius: 1.2rem;}
.main-company-img-item,
.main-company-img-inner{width: 100%; height: auto; overflow: hidden;}
.main-company-img-inner span{position: relative; width: 100%; height: 0; padding-top: 55.97%; background-color: #000; display: block; overflow: hidden;}
.main-company-img-center .main-company-img-inner span{padding-top: 56.25%;}
.main-company-img-item img{position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover; display:block;}

.main-company-img-item.swiper-slide-active {background:rgba(255,255,255,1); opacity:1; transform: scale(1.1);}

.main-company-img-nav{position: absolute; bottom: -0.8rem; left: 0; width: 100%;}
.main-company-img-nav .swiper-pagination {margin: 0; padding: 0; width: auto; position: relative !important; display: block; width: auto;}
.main-company-img-nav .swiper-pagination-bullets {margin: 0;}
.main-company-img-nav .swiper-pagination-bullet {margin: 0 0.5rem; width: 1rem; height: 1rem; border-radius: 100%; border: 1px solid #fff; box-sizing: border-box; opacity: 1; background: transparent !important; transition: all .2s ease-in-out;}
.main-company-img-nav .swiper-pagination-bullet.swiper-pagination-bullet-active {border-color: var(--main-color); background: var(--main-color) !important;}

@media all and (min-width:1281px){
	/* 펼쳐짐 효과 */
	.main-company-img-left{transform: translate(200%,25%) !important;}
	.main-company-img-right{transform:translate(-200%,-50%) !important;}
	.main-company-middle.animated .main-company-img-left,
	.main-company-middle.animated .main-company-img-right{transform:translate(0,0) !important; transition:transform 0.8s ease-out;}
}

/* 하단 */
.main-company-bottom{margin-top: 5rem; text-align: center;}
.main-company-bottom .txt{font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff; font-family: var(--font-family2);}
.main-company-bottom .txt b{font-weight: 600; color: var(--main-color);}
.main-company-bottom .swiper-slide{opacity: 0 !important; visibility: hidden;}
.main-company-bottom .swiper-slide.swiper-slide-active{opacity: 1 !important; visibility: visible;}

@media all and ( max-width: 1280px ){
	#mainCompanyCon {padding: 22rem 0 15rem;}
	/* 상단 */
	.main-company-top .tit01{font-size: 5.4rem;}
	.main-company-top .tit02{font-size: 10.4rem; font-size: 6.7708vw;}
	.main-company-top .tit03{font-size: 2.6rem;}
}
@media all and ( max-width: 800px ){
	#mainCompanyCon{padding:16rem 0 8rem;}

	/* 상단 */
	.main-company-top {text-align: center;}
	.main-company-top .tit01{font-size: var(--mn-font-size-H2); line-height: var(--line-height-130);}
	.main-company-top .tit02{margin-top: 1rem; font-size: var(--mn-font-size-H0); line-height: var(--line-height-130);}
	.main-company-top .tit02 b{display: block;}
	.main-company-top .tit03{margin-top: 2.8rem; font-size: var(--mn-font-size-P1); line-height: var(--line-height-150);}

	/* 중앙 */
	.main-company-middle{margin-top: 8rem; position: relative;}
	.main-company-middle .area{justify-content: center;}

	.main-company-img-left,
	.main-company-img-right{display: none;}
	.main-company-img-center{margin: 0 auto; width: 55%; max-width: 48rem;}
	.main-company-img-center-back{width: 65.6rem;}

	.main-company-img-center svg{position: absolute; width: 2.2rem;}
	.main-company-img-line-TpLt{top: -1.1rem; left: -1.1rem;}
	.main-company-img-line-BtLt{bottom: -1.1rem; left: -1.1rem;}
	.main-company-img-line-TpRt{top: -1.1rem; right: -1.1rem;}
	.main-company-img-line-BtRt{bottom: -1.1rem; right: -1.1rem;}

	.main-company-img-container,
	.main-company-img-list{width: 100%; height: auto; position: relative;}
	.main-company-img-container{overflow: hidden; border-radius: 1.2rem;}
	.main-company-img-item,
	.main-company-img-inner{width: 100%; height: auto; overflow: hidden;}
	.main-company-img-inner span{position: relative; width: 100%; height: 0; padding-top: 55.97%; background-color: #000; display: block; overflow: hidden;}
	.main-company-img-center .main-company-img-inner span{padding-top: 56.25%;}
	.main-company-img-item img{position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover; display:block;}

	.main-company-img-item.swiper-slide-active {background:rgba(255,255,255,1); opacity:1; transform: scale(1.1);}

	.main-company-img-nav{position: absolute; bottom: -5rem; left: 0; width: 100%;}
	.main-company-img-nav .swiper-pagination {margin: 0; padding: 0; width: auto; position: relative !important; display: block; width: auto;}
	.main-company-img-nav .swiper-pagination-bullets {margin: 0;}
	.main-company-img-nav .swiper-pagination-bullet {margin: 0 0.5rem; width: 1rem; height: 1rem; border-radius: 100%; border: 1px solid #fff; box-sizing: border-box; opacity: 1; background: transparent !important; transition: all .2s ease-in-out;}
	.main-company-img-nav .swiper-pagination-bullet.swiper-pagination-bullet-active {border-color: var(--main-color); background: var(--main-color) !important;}

	/* 하단 */
	.main-company-bottom{margin-top: 8rem; text-align: center;}
	.main-company-bottom .txt{font-size: var(--mn-font-size-P3); line-height: var(--line-height-150); letter-spacing: -0.01em; color: #fff;}
	.main-company-bottom .txt b{font-weight: 600; color: var(--main-color);}
	.main-company-bottom .swiper-slide{opacity: 0 !important; visibility: hidden;}
	.main-company-bottom .swiper-slide.swiper-slide-active{opacity: 1 !important; visibility: visible;}
}
@media all and ( max-width: 640px ){
	.main-company-img-center{width: 62.5%; width: 72%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(업무) -------- */
#mainWorkCon{position: relative; overflow: hidden; padding: 18.5rem 0 20rem; /* background-color: rgba(18, 18, 18, 1); */}

.main-work-con{}
.main-work-top{display: flex; flex-wrap:wrap;}
.main-work-top h5{max-width: 58.6rem; width: 43%; font-size: 4rem; line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; color: rgba(253, 253, 253, 1);}
.main-work-top h5 b{font-weight: 600;}
.main-work-top p{width: calc(100% - 58.6rem); width: 57%; font-size: 1.8rem; line-height: 1.5; font-weight: 300; letter-spacing: -0.01em; color: rgba(216, 220, 226, 1);}
.main-work-top p b{font-weight: 400; color: var(--main-color);}

.main-work-bottom{margin-top: 15rem;}
.main-work-tit{font-size: 2.4rem; line-height: 1.3; letter-spacing: -.01em; color: var(--main-color);}
.main-work-wrapper{margin-top: 5.5rem; position: relative;}
/* 중앙영역 */
.main-work-center{position: absolute; top: 50%; left: 50%; max-width:47rem; width: 34.05%; transform: translate(-50%,-50%);}
.main-work-center .tit{position: absolute; top: 14%; left: 0; width: 100%; font-size: 2.6rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: rgba(142, 149, 163, 1); text-align: center;}
.work-dashed-circle-svg{width:100%;}
.work-dashed-circle-svg circle{transform-origin: center; animation: svg-rotate-ani 15s linear infinite;}
/* 4개 리스트 */
.main-work-list{margin: 0 -4.1rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.main-work-item{margin: 0 4.1rem; position: relative;}
.main-work-inner{position: relative; width: 100%; height: 0; padding-top: 100%;}
.main-work-inner p{position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1.45; letter-spacing: -.01em; font-weight: 600; color: #8E95A3; text-align: center; display: flex; align-items: center; justify-content: center; z-index: 1; transition: color 0.3s;}
.main-work-inner .work-circle-svg{position: absolute; top: 0; left: 0; width: 100%;}
.main-work-inner .work-circle-dot-svg{position: absolute; top: 0; left: -0.5rem; width: calc(100% + 1rem); opacity: 0; overflow: visible;}
.main-work-inner .work-arrow-svg{position: absolute; top: 50%; margin-top: -2.2rem; right: -6.2rem; width: 4.4rem;}

.main-work-item-sm{width: calc(22.75% - 8.2rem); max-width: 23.4rem;}
.main-work-item-sm p{font-size: 2.2rem;}
.main-work-item-lg{width: calc(27.25% - 8.2rem); max-width: 34.6rem;}
.main-work-item-lg p{font-size: 3.2rem;}

@media all and (min-width:1281px){
	/* 펼쳐짐 효과 */
	.main-work-item01,
	.main-work-item02,
	.main-work-item03,
	.main-work-item04{transform:scale(0) !important;}
	.main-work-center{opacity: 0;}
	.main-work-wrapper.animated .main-work-item01{transform:scale(1) !important; transition:transform 0.8s ease; transition-delay:0.1s;}
	.main-work-wrapper.animated .main-work-item02{transform:scale(1) !important; transition:transform 0.8s ease; transition-delay:0.3s;}
	.main-work-wrapper.animated .main-work-item03{transform:scale(1) !important; transition:transform 0.8s ease; transition-delay:0.5s;}
	.main-work-wrapper.animated .main-work-item04{transform:scale(1) !important; transition:transform 0.8s ease; transition-delay:0.7s;}
	.main-work-wrapper.animated .main-work-center{opacity: 1; transition:opacity 1.2s ease-in-out; transition-delay:1s;}
}

/* 배경 circle */
.work-circle-svg{transition: filter 0.6s;}
.work-circle-svg .circle-path {opacity: 0; transition: opacity 0.3s; transform-origin: center; transform: rotate(90deg) scaleX(-1); stroke-dasharray: 1056; stroke-dashoffset: 1056;}
/* 배경 circle dot */
.work-circle-dot-svg{opacity: 0; transition: opacity 0.3s;}
.work-circle-dot-svg circle{transform-origin: center;}
/* 간격 화살표 */
.work-arrow-svg{}
.work-arrow-svg .fill-mask path {transform: translateX(-190%);}

.main-work-item.active .main-work-inner p{color: var(--main-color);}
.main-work-item.active .work-circle-svg{filter: drop-shadow(0px 0px 3.1rem rgba(0, 253, 255, 0.2));}
.main-work-item.active .work-circle-svg .circle-path{opacity: 1; stroke: #00FDFF; animation: svg-draw-ani 5s ease-in-out alternate;}
.main-work-item.active .work-circle-dot-svg{opacity: 1;}
.main-work-item.active .work-circle-dot-svg circle {animation: svg-rotate-ani 5s ease-in-out alternate;}
.main-work-item.active .work-arrow-svg .fill-mask path {animation: slide-fill 5s ease-in-out alternate;}

@keyframes slide-fill {
    0% {transform: translateX(-190%);}
	100% {transform: translateX(-100%);}
}
@keyframes svg-rotate-ani {
    0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes svg-draw-ani {
	0% {stroke-dashoffset: -1056;}
	100% {stroke-dashoffset: 0;}
}    
    
@media all and ( max-width: 1280px ){
	.main-work-center .tit {top: 14%; font-size: 2rem;}
}
@media all and ( max-width: 800px ){
	#mainWorkCon{padding: 8rem 0 16rem;}

	.main-work-con{}
	.main-work-top{text-align: center;}
	.main-work-top h5{max-width: none; width: 100%; font-size: var(--mn-font-size-H1); line-height: var(--line-height-145);}
	.main-work-top p{margin-top: 2rem; width: 100%; font-size: var(--mn-font-size-P3); line-height: var(--line-height-150);}

	.main-work-bottom{margin-top: 5.5rem;}
	.main-work-tit{font-size: var(--mn-font-size-H4); line-height: var(--line-height-130); text-align: center;}
	.main-work-wrapper{margin-top: 5.5rem;}
	/* 중앙영역 */
	.main-work-center{width: 42rem;}
	.main-work-center .tit{top: 50%; left: 50%; font-size: var(--mn-font-size-P5); line-height: var(--line-height-145); width: 10rem;margin-left: -17rem;margin-top: -3rem;}
	/* 4개 리스트 */
	.main-work-list{margin: -3rem 0; flex-direction: column;}
	.main-work-item{margin: 3rem 0;}
	.main-work-inner p{line-height: var(--line-height-145);}
	.main-work-inner .work-arrow-svg{top: auto; bottom: -4.6rem; margin-top: 0; right: auto; left: 50%; margin-left: -1.55rem; width: 3.1rem; transform: rotate(90deg);}

	.main-work-item-sm{width: 18rem; max-width: none;}
	.main-work-item-sm p{font-size: var(--mn-font-size-P3);}
	.main-work-item-lg{width: 23rem; max-width: none;}
	.main-work-item-lg p{font-size: var(--mn-font-size-P2);}
}
@media all and ( max-width: 480px ){
	.main-work-center{width: 29.4rem;}
	.main-work-center .tit{width: 9rem;font-size: var(--mn-font-size-P1);margin-left: -13rem;margin-top: -3rem;}
	.main-work-item-sm{width: 14.4rem;}
	.main-work-item-lg{width: 18.4rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(시스템) -------- */
#mainSystemCon{background-color: #fff;}

.main-system-con{display: flex; flex-direction: column; position: relative;}
/* 좌측 이미지 */
.main-system-left{position: sticky; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; object-fit: cover; overflow: hidden;}
.main-system-img{position: absolute; top: 0; left: 0; width: 100svw; height: 100%; object-fit: cover; display: block;}
.main-system-txt{position: relative; width: 100%; height: 100%; padding: 0 9.5rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(0, 0);}
.main-system-txt h5{position: relative; left: 0; max-width: 38rem; width: 100%; font-size: 8rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; color: #F5F6F8;}
.main-system-txt h5 b{font-weight:800; color: var(--main-color);}
.main-system-txt p{margin-top: 2.8rem; font-size: 2.2rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff;}

/* 우측 컨텐츠 */
.main-system-right{margin-top: 50svw; width: 50%; padding: 8rem 4.94% 15rem; align-self: flex-end; box-sizing: border-box; overflow: hidden;}
.main-system-right .txt01{font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; color: #000;}
.main-system-right .txt02{margin-top: 4rem; font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; color: #000;}
.main-system-right .txt02 b{font-weight: 600;}
.main-system-right .img{margin-top: 6rem; position: relative; width: 100%; height: 0; padding-top: 30.68%; border-radius: 2rem; overflow: hidden;}
.main-system-right .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-system-right .arrow{margin-top: 6rem; display: flex; justify-content: flex-end;}
.main-system-right .arrow img{height: 9rem;}
.main-system-right .txt03{margin-top: 12rem; font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; color: rgba(18, 18, 18, 1);}
.main-system-right .txt03 b{font-weight: 600;}
.main-system-right .txt04{margin-top: 6rem; display: flex; flex-wrap:wrap;}
.main-system-right .txt04 + .txt04{margin-top: 3rem;}
.main-system-right .txt04 dt{width: 29rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: rgba(18, 18, 18, 1);}
.main-system-right .txt04 dd{width: calc(100% - 29rem); font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.01em; color: rgba(53, 60, 73, 1);}

@media all and ( max-width: 1280px ){
	/* 좌측 이미지 */
	.main-system-txt {padding: 0 7rem;}
	.main-system-txt h5{font-size: 6rem; max-width: 34rem;}
	.main-system-txt p{font-size: 2rem;}

	/* 우측 컨텐츠 */
	.main-system-right .arrow img {height: 7rem;}
	.main-system-right .txt04 dt{width: 100%;}
	.main-system-right .txt04 dd{margin-top: 2rem; width: 100%;}
}
@media all and ( max-width: 800px ){
	/* 좌측 이미지 */
	.main-system-left{position: relative; width: 100%; height: 100vh;}
	.main-system-txt{padding: 0 var(--area-paddding);}
	.main-system-txt h5{max-width: 38rem; width: 100%; font-size: var(--mn-font-size-lg); line-height: var(--line-height-130);}
	.main-system-txt p{margin-top: 2.8rem; font-size: var(--mn-font-size-H6); line-height: var(--line-height-150); text-align: center;}

	/* 우측 컨텐츠 */
	.main-system-right{margin-top: 0; width: 100%; padding: 8rem var(--area-padding) 15rem;}
	.main-system-right .txt01{font-size: var(--mn-font-size-P2); line-height: var(--line-height-150);}
	.main-system-right .txt02{margin-top: 4rem; font-size: var(--mn-font-size-P2); line-height: var(--line-height-150);}
	.main-system-right .img{margin-top: 6rem; width: 100%;}
	.main-system-right .img img{width: 100%;}
	.main-system-right .arrow{margin-top: 6rem;}
	.main-system-right .arrow img{height: 9rem; height: 5.6rem;}
	.main-system-right .txt03{margin-top: 8.4rem; font-size: var(--mn-font-size-P2); line-height: var(--line-height-150);}
	.main-system-right .txt04{margin-top: 6rem;}
	.main-system-right .txt04 + .txt04{margin-top: 3rem;}
	.main-system-right .txt04 dt{width: 100%; font-size: var(--mn-font-size-H5); line-height: var(--line-height-130);}
	.main-system-right .txt04 dd{margin-top: 2rem; width: 100%; font-size: var(--mn-font-size-P3); line-height: var(--line-height-150);}
}
@media all and ( max-width: 480px ){
	/* 좌측 이미지 */
	.main-system-txt h5{max-width: 29rem;}
	.main-system-txt p{font-size: var(--mn-font-size-P2);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(News & Articles) -------- */
#mainNewsCon{padding: 16rem 0; background-color: rgba(242, 244, 250, 1); overflow: hidden;}

.main-news-con{}
.main-news-tit{font-size: 4rem; line-height: 1.45; letter-spacing: -0.01em; font-weight: 600; color: #000;}
.main-news-wrapper{margin-top: 3rem;}
.main-news-list{margin: 0 -1.2rem; display: flex; flex-wrap:wrap;}
.main-news-item{margin: 0 1.2rem; width: calc(33.33% - 2.4rem); position: relative;}
.main-news-item a{display: block; border-radius: 2rem; overflow: hidden;}
.main-news-img{position: relative; width: 100%; height:0; padding-top: 60.6%; overflow: hidden;}
.main-news-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition:var(--transition-custom);}
.main-news-txt{padding: 3rem; width: 100%; height: 28rem; background-color: #fff; box-sizing: border-box;}
.main-news-txt h5{height: 3em; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 700; color: #000; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-txt p{height: 6em; margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.01em; color: #595F72; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.main-news-more-btn{margin: 3rem auto 0; padding: 0 2rem; width: 16.7rem; height: 5.6rem; border: 1px solid #353C49; border-radius: 0.6rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-news-more-btn span{font-size: 2rem; letter-spacing: -0.01em; font-weight: 600; color: #2B2B2B;}
.main-news-more-btn svg,
.main-news-more-btn img{position: relative; height: 1.6rem;}
.main-news-more-btn svg path{stroke:rgba(43, 43, 43, 1)}

.main-news-item a:hover .main-news-img img{transform: scale(1.1) rotate(0.002deg);}
.main-news-more-btn:hover svg,
.main-news-more-btn:hover img{animation: move 0.9s ease-in-out; animation-iteration-count: 1;}
/* .main-news-more-btn:hover span{color: var(--main-color);}
.main-news-more-btn:hover svg path{stroke:var(--main-color);} */

@keyframes move {
	0% {left: 0%;}
	50% {left: 5%;}
	100% {left: 0%;}
}

@media all and (min-width:1281px){
	/* 펼쳐짐 효과 */
	.main-news-item{overflow: hidden;}
	.main-news-item a{transition:transform 0.8s ease-out;}
	.main-news-item:nth-child(1) a{transform:translateX(calc(-100% - 2.4rem)) !important;}
	.main-news-item:nth-child(2) a{transform:translateX(calc(-200% - 4.8rem)) !important;}
	.main-news-item:nth-child(3) a{transform:translateX(calc(-300% - 7.2rem)) !important;}
	.main-news-wrapper.active .main-news-item a{transform:translateX(0) !important;}
}

@media all and ( max-width: 1280px ){
	
}
@media all and ( max-width: 800px ){
	#mainNewsCon{padding: 10rem 0;}

	.main-news-con{}
	.main-news-tit{font-size: var(--mn-font-size-H1); line-height: var(--line-height-145); text-align: center;}
	.main-news-wrapper{margin-top: 3rem;}
	.main-news-list{margin: -2.8rem -1.2rem;}
	.main-news-item{margin: 2.8rem 1.2rem; width: calc(100% - 2.4rem);}
	.main-news-item a{border-radius: 2rem;}
	.main-news-img{padding-top: 60.6%;}
	.main-news-txt{padding: 3rem; width: 100%; height: auto;}
	.main-news-txt h5{height: 3em; font-size: var(--mn-font-size-H5); line-height: var(--line-height-150); -webkit-line-clamp: 2;}
	.main-news-txt p{height: 6em; margin-top: 1.6rem; font-size: var(--mn-font-size-P5); line-height: var(--line-height-150); -webkit-line-clamp: 4;}
	.main-news-more-btn{margin: 3rem auto 0; padding: 0 1.5rem; width: 15rem; height: 4.6rem; border-radius: 0.6rem;}
	.main-news-more-btn span{font-size: var(--mn-font-size-P2);}
	.main-news-more-btn img{position: relative; height: 1.6rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Video) -------- */
html, body {
  overflow-anchor: none;
}
:root{
	--video-ratio: 54%; /* 56.25% */
}
#mainVideoCon{height: 200vh; position: relative; width: 100%; height: auto; z-index: 2; overflow: hidden; display: flex; justify-content: center;}
.main-video-con{width: 100%; position: relative; margin: 0 auto; width: 59.37%; transform-origin: center; height: 100vh; display: flex; align-items: center; justify-content: center; will-change: transform;}
.main-video-wrapper{position:relative; width: 100%; left: auto !important; overflow:hidden; border-radius: 3rem; z-index: 5;}
.main-video-box{position:relative; width: 100%; height:0; padding-top: var(--video-ratio);}
.main-video-box video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.main-video-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; overflow: hidden;}
.main-video-cover .thumb{position: absolute; top: 0; left: 0; display:block; width:100%; height:100%; transition:var(--transition-custom); transition-property: transform;}
.main-video-cover .thumb video,
.main-video-cover .thumb img{position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover;}
.main-video-cover .icon{position:absolute; top:50%; left:50%; width: 11.35%; max-width: 281px; z-index:1; transform: translate(-50%, -50%);}
.main-video-cover .icon img{width: 100%;}

@media all and ( max-width: 1280px ){
	#mainVideoCon .main-video-box{height:64rem; height: 33.33vw; padding-top: 0;}
}
@media all and ( max-width: 800px ){
	#mainVideoCon{display: none;}
	.main-video-wrapper{border-radius: 2rem;}
	.main-video-cover .icon{/* width: 11.35%; max-width: 281px; */ width: 17.04%; max-width: 12rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠6(Portfolio) -------- */
#mainPortfolioCon{padding-top: 0; position: relative; z-index: 9; overflow: hidden;}
.main-portfolio-con{width: 100%; height: 100vh;}

.main-video-con-copy {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; opacity: 0; visibility: visible; background: #000; transform-origin: top left; will-change: transform, width, height;}
.main-video-con-copy .main-video-wrapper{border-radius: 0; height: 100%;}

#mainPortfolioPoint{width: 100%; height: 100vh; position: relative; z-index: 9; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;}
.main-portfolio-top{width: 100%;}
.main-portfolio-top .tit{float: left; width: calc(100% - 50rem); position: relative; font-size: 17rem; line-height: 1.1; font-weight: 200; letter-spacing: -0.01em; /* color: rgba(18, 18, 18, 1); */ color: #fff; transform: translate(50px, 0px);}
.main-portfolio-top .tit b{font-weight: 800;}
.main-portfolio-top .img{float: right; position: relative; max-width: 50rem; width: 100%; height: 27rem;}
.main-portfolio-top .img span{position: relative; width: 100%; height:0; padding-top: var(--video-ratio); display: block;}
.main-portfolio-top .main-video-m-con{display: none;}
.main-portfolio-bottom{margin-top: 8rem; width: 100%; display: flex; justify-content: center;}
.main-portfolio-bottom-inner{width: 100%; max-width: 48rem;}
.main-portfolio-bottom .txt{font-size: 2.6rem; line-height: 1.6; letter-spacing: -0.01em; /* color: rgba(53, 60, 73, 1); */ color: #fff;}
.main-portfolio-bottom .txt b{font-weight: 700;}
.main-portfolio-bottom .more-btn{margin-top: 2rem;}
.main-portfolio-bottom .more-btn a{padding: 0 2rem; height: 5.6rem; color: #fff; border: 1px solid rgba(255, 255, 255, 1); border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-portfolio-bottom .more-btn a span{font-size: 2rem; letter-spacing: -0.01em; font-weight: 600; color: inherit;}
.main-portfolio-bottom .more-btn a svg{margin-left: 1.5rem; position: relative; height: 1.6rem;}
.main-portfolio-bottom .more-btn a svg path{stroke:#fff;}

.main-portfolio-bottom .more-btn a:hover svg{animation: move 0.9s ease-in-out; animation-iteration-count: 1;}

@media all and ( max-width: 1280px ){
	.main-portfolio-top .tit{float: left; width: calc(100% - 52rem); font-size: 11rem;}
}
@media all and ( max-width: 800px ){
	#mainPortfolioCon{padding: 10rem 0 16rem;}
	.main-portfolio-con{height: auto !important;}

	.main-video-con-copy {display: none;}

	#mainPortfolioPoint{width: 100%; height: auto !important;}
	.main-portfolio-top{width: 100%;}
	.main-portfolio-top .tit{padding-left: 4rem; width: 100%; float: none; font-size: var(--mn-font-size-Exlg); line-height: var(--line-height-110); color: #000 !important; transform: translate(0px, 0px) !important; box-sizing: border-box;}
	.main-portfolio-top .tit b{position: relative; margin-left: -4rem;}
	.main-portfolio-top .img{display: none;}
	.main-portfolio-top .main-video-m-con{margin-top: 5.5rem; display: block;}
	.main-portfolio-top .main-video-m-con .main-video-box{position: relative; width: 100%; height:0; padding-top: var(--video-ratio); display: block;}
	.main-portfolio-top .main-video-m-con .main-video-cover .thumb img{width:100%; height:100%; object-fit: cover;}
	.main-portfolio-bottom{margin-top: 5.5rem; width: 100%;}
	.main-portfolio-bottom-inner{width: 100%; max-width: none; padding: 0;}
	.main-portfolio-bottom .txt{font-size: var(--mn-font-size-H6); font-size: var(--mn-font-size-P1); line-height: var(--line-height-160); color: #000 !important;}
	.main-portfolio-bottom .more-btn{margin-top: 2.8rem; text-align: left;}
	.main-portfolio-bottom .more-btn a{padding: 0 1.5rem; height: 4.6rem; color: #000 !important; border-color: rgba(0, 0, 0, 1) !important; border-radius: 0.6rem;}
	.main-portfolio-bottom .more-btn a span{font-size: var(--mn-font-size-P2);}
	.main-portfolio-bottom .more-btn a svg{margin-left: 1.5rem; height: 1.6rem;}
	.main-portfolio-bottom .more-btn a svg path{stroke:#000 !important;}
}