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

.ms-preloader {width: 100vw; height: 100vh;position: fixed;z-index: 9999999; top: 0;left: 0; opacity: 1; visibility: visible; background-color: #000f10;}

.cm-word-split-JS.splitting .char{will-change:transform, opacity}

/* ******************  메인 레이아웃(Fullpage) ********************** */
.main-wrap{background:#000f10;}
#fullpage #mainVisual{height:100vh}

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

/* 비주얼영상(삽입) */
.video-wrapper{ position:relative; top:0; left:0; width:100%; height:100%; }
.video-wrapper:after{ position:absolute; top:0; left:0; width:100%; height:100%; content:""; }
#visualVideo { position:absolute; top:57%; left:50%; min-width:100%; min-height:100%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }

.video-wrapper.m-ver{display: none;}

/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
/* .background-video-wrapper:before{position: absolute; content:''; top:0; left:0; transform:rotate(80deg) translate(-85%, -0%); width:120vw; height:120vw; z-index:9; background: linear-gradient(to right,  rgba(12,30,36,1) 0%,rgba(12,30,36,1) 85%,rgba(12,30,36,0) 100%);} */
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01)}
.background-video iframe{
	width: 100vw;
	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 340px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 57%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video-wrapper.m-ver{display: none;}

.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80); }
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.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:7rem; font-weight:800; letter-spacing:-0.005em; color:#fff;}
.main-visual-txt-box .main-visual-txt1.first{margin-left:-115px; color:var(--main-color);}
.main-visual-txt-box .main-visual-txt1.second{margin-top:-0.5rem;}
.main-visual-txt-box .main-visual-txt2{font-size:2rem; letter-spacing:-0.025em; line-height:1.5; color:#fff; font-weight:600; margin-top:1rem;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.animated .main-visual-txt1,
.animated .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.animated .main-visual-txt1{animation-delay:0.1s;}
.animated .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;}
.animated .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);
	}
}

/* 메인 비주얼 :: 재생버튼 */
.visual-circle-box{position: absolute; width:10rem; height:10rem; /* border-radius:50%; */ margin-top:2rem; overflow:hidden;}
.visual-circle-box .circle-box{position: relative; width:100%; height:100%; transition:all 1.5s cubic-bezier(0.4, 0, 0.2, 1); opacity:0; transform:translateY(100%);}
.visual-circle-box .circle-box:before{position: absolute; content:''; inset: 0; width:100%; height:100%; border-radius: 50%; box-sizing:border-box; padding: 2px; animation: circleRotate 1.5s linear infinite;
background:linear-gradient(to right ,rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 70%, #fff 100%); 
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
-webkit-mask-composite: xor; mask-composite: exclude;
}
.visual-circle-box .circle-box button{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; display: flex; align-items:center; justify-content:center;}
.visual-circle-box .circle-box button.play-btn{display: none;}
.visual-circle-box .circle-box button.pause-btn{font-size:3rem; color:#fff;}

@keyframes circleRotate {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}

.main-wrap.main-active .visual-circle-box .circle-box{opacity:1; transform:translateY(0);}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-40px; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:block; color:#fff; padding-bottom:5px; letter-spacing:-0.5px; font-weight:300; }
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.co-main{color:var(--main-color)}
.main-tit-box{}
.main-tit-box .main-category{display:block; margin-bottom:2rem; color:var(--main-color); font-size:1.8rem; font-weight:600;}
.main-tit-box .main-tit{color:#fff; font-size:5.6rem; font-weight:700; line-height:1.05;}
.main-tit-box .main-tit em{font-weight:inherit;}
.main-tit-box .main-txt{color:#5d8b8d; font-size:1.8rem; font-weight:500; line-height:1.25; letter-spacing:-0.035em;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
/* 기본 effect */
.cm-main-effect-box{overflow:hidden; }
.cm-main-effect{display: block; opacity:0; transform:translateY(100%); transition:var(--transition-custom2); transition-delay:0.4s; transition-property:opacity, transform;}
.cm-main-effect.delay04{transition-delay:0.4s}
.cm-main-effect.delay05{transition-delay:0.5s}
.cm-main-effect.delay06{transition-delay:0.6s}
.cm-main-effect.delay07{transition-delay:0.7s}
.animated .cm-main-effect{opacity:1.0; transform:translateY(0);}


/* 공통 :: 버튼 */
.cm-main-btn-box{position: relative; display: inline-block; box-sizing:border-box; overflow:hidden; border-radius:1rem; width:26rem; height:6rem;}
.cm-main-btn-box .outline{position: absolute; overflow: hidden; inset: 0; outline: none; border-radius: inherit; transition:var(--transition-custom); pointer-events:none;}
.cm-main-btn-box .outline:before{position: absolute; content:''; width:100%; height:100%; background:#125053;}
.cm-main-btn-box .outline:after{content: ""; position: absolute; top:50%; left:50%; width: 75vw; height: 75vw; margin: auto; transform:translate(-50%, -50%); background: linear-gradient(to right,  rgba(0,176,181,1) 40%,rgba(255,255,255,1) 60%); animation: squareRotate 5s linear infinite; opacity:0; transition:var(--transition-custom);}
.cm-main-btn{position: relative; inset:2px; display: flex; align-items:center; justify-content:space-between; padding:0 3rem; box-sizing:border-box; width:calc(26rem - 4px); height:calc(6rem - 4px); border-radius:1rem; /* border:2px solid #125053; */ background:#002d2f; color:#fff; transition:var(--transition-custom);}
.cm-main-btn .txt{font-size:1.35rem; font-weight:500;}
.cm-main-btn i{font-size:2rem;}

.cm-main-btn-box:hover .outline:after{opacity:1;}
.cm-main-btn-box:hover .cm-main-btn{background:var(--main-color);}

/* 공통 :: 컨텐츠 */
#mainConPaging{position: relative; overflow:hidden; width:100%; height:100vh; z-index:1; transition:all 800ms;}
.main-slide-container, .main-slide-wrapper{width:100%; height:100vh;}
.main-slide-con{z-index: 1; overflow: hidden; height:100%; }

/* 공통 :: 프로그래스바 */
.main-slide-controls {position: absolute; width: 100%; z-index: 99; bottom: 6rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); transition-delay: 0.2s;}
.main-slide-controls .inner {display: flex; flex-direction:column; align-items: center;}
.main-slide-controls .inner .paging-label {position: relative; width: 100%; position: relative; margin-bottom:1.6rem;}
.main-slide-controls .inner .paging-label .label{position: absolute; bottom:100%; font-size:1.4rem; color:rgba(255,255,255,0.1); font-weight:700; transition:var(--transition-custom);}
.main-slide-controls .inner .paging-label .label:nth-child(1){left:0;}
.main-slide-controls .inner .paging-label .label:nth-child(2){left:25%;}
.main-slide-controls .inner .paging-label .label:nth-child(3){left:50%;}
.main-slide-controls .inner .paging-label .label:nth-child(4){left:75%;}

.main-slide-controls .inner .paging-label .label.active{color:var(--main-color);}

.main-slide-controls .inner .paging-box {width: 100%; position: relative;}
.main-slide-controls .inner .paging-box .swiper-pagination {position: absolute; top: 0; left: 0; width: 100%; height:4px; top:auto; bottom: -1px; left: 0; background:rgba(255,255,255,0.1); overflow: hidden; border-radius: 4px;}
.main-slide-controls .inner .paging-box .swiper-pagination span {position: absolute; top: 0; left: 0; display: block; background: var(--main-color); width: 25%; height: 4px; transition: var(--transition-custom2); border-radius: 4px;}

/* 공통 :: 프로그래스바 :: active */
.main-wrap.main-active .main-slide-controls{opacity:1; transform:translateY(0px);}

/* 공통 :: 스크롤다운 */
.main-scroll-content{position: absolute; top:54%; transform:translate(50px, -50%); opacity:0; transition:var(--transition-custom2); width:100%; pointer-events:none; z-index:9;}
.main-scroll-content .area-wide{display: flex ; flex-direction: column; align-items: flex-end;}
.main-scroll-content .txt{font-size:9px; letter-spacing:0.3em; color:rgba(255,255,255,0.4); writing-mode: tb; overflow:hidden; padding:5px 2px;}
.main-scroll-content .txt span{display: inline-block; letter-spacing:-0.3em; animation: scrollDownTxt 3s linear infinite; transform:translateX(10px)}
.main-scroll-content .txt span:nth-child(1){animation-delay:0.4s;}
.main-scroll-content .txt span:nth-child(2){animation-delay:0.45s;}
.main-scroll-content .txt span:nth-child(3){animation-delay:0.5s;}
.main-scroll-content .txt span:nth-child(4){animation-delay:0.55s;}
.main-scroll-content .txt span:nth-child(5){animation-delay:0.6s;}
.main-scroll-content .txt span:nth-child(6){animation-delay:0.65s;}
.main-scroll-content .txt span:nth-child(7){animation-delay:0.7s;}
.main-scroll-content .txt span:nth-child(8){animation-delay:0.75s;}
.main-scroll-content .txt span:nth-child(9){animation-delay:0.8s;}
.main-scroll-content .txt span:nth-child(10){animation-delay:0.85s;}

.main-scroll-content .dots{position: relative; width:5px; height:5rem; border-radius:5px; overflow:hidden; background:rgba(255,255,255,0.1); margin-top:1rem; margin-right:0.4rem;}
.main-scroll-content .dots span{position: absolute; top:0; left:0; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); width:100%; height:50%; border-radius:5px; transform:translateY(-5rem); animation: scrollDown 2s linear infinite;}

@keyframes scrollDownTxt {
	0% {transform:translateX(10px); opacity:0;}
	5% {transform:translateX(0px); opacity:1;}
	95% {transform:translateX(0px); opacity:1;}
	100% {transform:translateX(-10px); opacity:0;}
}
@keyframes scrollDown {
	0% {transform:translateY(-5rem)}
	100% {transform:translateY(5rem)}
}

/* 공통 :: 스크롤다운 :: active */
.main-wrap.main-active .main-scroll-content{opacity:1; transform:translate(-1.5rem, -50%);}

/* 공통 :: 배경 원 */
.main-bg-circle{position: absolute; width:100%; height:300vh; inset:0; pointer-events:none; transition:all 800ms; opacity:0;}
.main-bg-circle .circle{position: absolute; width:50rem; height:50rem; background:var(--main-color); filter:blur(15rem); border-radius:50%; opacity:0.6}
.main-bg-circle .circle.circle01{top:-60rem; left:-10rem;}
.main-bg-circle .circle.circle02{top:-20rem; right:-20rem;}
.main-bg-circle .circle.circle03{top:calc(100vh - 15rem); left:-20rem;}
.main-bg-circle .circle.circle04{top:calc(200vh - 25rem); right:-30rem;}
.main-bg-circle .circle.circle05{top:calc(300vh - 40rem); left:-30rem;}
/* active */
.main-active .main-bg-circle{opacity:1;}
/* move */
.main-bg-circle.move1{transform:translateY(-100vh);}
.main-bg-circle.move2{transform:translateY(-200vh);}

@media all and (min-width:801px){
	.main-bg-circle .circle{animation: rad-move 10s linear infinite; }
}

@keyframes rad-move {
	0% {
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
		transform: scale(1);
	}
	10% {
		border-radius: 80% 20% 60% 40% / 70% 20% 80% 30%;
		transform: scale(1.05);
	}
	20% {
		border-radius: 20% 80% 40% 60% / 60% 80% 20% 40%;
		transform: scale(0.95);
	}
	30% {
		border-radius: 75% 25% 55% 45% / 40% 70% 30% 60%;
		transform: scale(1.1);
	}
	40% {
		border-radius: 50% 50% 70% 30% / 85% 35% 65% 15%;
		transform: scale(0.9);
	}
	50% {
		border-radius: 90% 10% 20% 80% / 25% 90% 10% 85%;
		transform: scale(1.05);
	}
	60% {
		border-radius: 40% 60% 30% 70% / 55% 45% 55% 45%;
		transform: scale(0.95);
	}
	70% {
		border-radius: 85% 15% 80% 20% / 60% 85% 15% 40%;
		transform: scale(1.1);
	}
	80% {
		border-radius: 25% 75% 45% 55% / 35% 70% 30% 65%;
		transform: scale(0.9);
	}
	90% {
		border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%;
		transform: scale(1.05);
	}
	100% {
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
		transform: scale(1);
	}
}


/* -------- 메인 컨텐츠 :: 컨텐츠(Business) -------- */
#mainBusiness{position: relative; width: 100%; height: 100%; display: flex; align-items:center; justify-content:center;}
#mainBusiness > .area-box{width:100%;}
.main-business-wrap{display: flex; justify-content:space-between;}
.main-business-wrap .left-box{width:62.858%; max-width:880px;}
.main-business-video-list{position: relative; width:100%; height:100%; transform:translateY(100px); opacity:0; transition:var(--transition-custom2); transition-delay:0.1s}
.main-business-video-list .list-item{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; opacity:0; transition:var(--transition-custom); pointer-events: none;}
.main-business-video-list .list-item .video-box{position: relative; border-radius:3rem; box-sizing:border-box; padding:4px; box-sizing:border-box; box-shadow: 1rem 1rem 8.7rem -3px rgba(0,176,181,0.19); overflow:hidden;}
.main-business-video-list .list-item .video-box .outline{position: absolute; overflow: hidden; inset: 0; outline: none; border-radius: inherit; transition: all 0.4s ease;}
.main-business-video-list .list-item .video-box .outline:before{content: ""; position: absolute; top:50%; left:50%; width: 75vw; height: 75vw; margin: auto; transform:translate(-50%, -50%); background: linear-gradient(to right,  rgba(0,176,181,1) 20%,rgba(0,176,181,0.1) 40%,rgba(0,176,181,0.1) 60%,rgba(0,176,181,1) 70%); animation: squareRotate 5s linear infinite; }


.main-business-video-list .list-item .video-box .video-iframe-wrapper{border-radius:3rem;}
.main-business-video-list .list-item .video-box .video-iframe-box{padding-top:55.341%;}
.main-business-video-list .list-item .txt-box{position: absolute; width:100%; height:100%; inset:0; padding:6.5rem; box-sizing:border-box; display: flex ; flex-direction: column; justify-content: flex-end;}
.main-business-video-list .list-item .txt-box dl{position: relative; margin-bottom:3rem;}
.main-business-video-list .list-item .txt-box dl:before{position: absolute; content:''; width:1rem; height:1rem; top:-1rem; left:-1rem; background:var(--main-color); border-radius:50%; opacity:0; transition:var(--transition-custom2)}
.main-business-video-list .list-item .txt-box dl dt{position: relative; font-size:5.6rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:700; margin-bottom:-1.5rem}
.main-business-video-list .list-item .txt-box dl dd{font-size:1.4rem; line-height:1.5; color:rgba(255,255,255,0.1); font-weight:500; opacity:0; transform:translateY(30px); transition:var(--transition-custom2);}

/* 비디오 영역 Start */
.video-iframe-wrapper{position:relative; margin:0px auto; overflow:hidden;}
.video-iframe-box{position:relative; height:0; background-color:#000}
.video-iframe-box iframe{position:absolute; top:50%; left:0px; transform:translateY(-50%); width:100%; height: calc(100% + 350px); opacity:0.8;}
.video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ;  }
/* .video-cover-box:after{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ; background-color:rgba(0,0,0,0.4); content:"";} */
.video-cover-box .thumb{display:block; width:100%; height:100%;transition:all 0.8s ease-in-out}
.video-cover-box .thumb img{width:100%; height:100%; object-fit:cover;}


.main-business-wrap .right-box{width:35%; }
.main-drop-open-btn-style{display: none;}
.main-business-list{display: flex; flex-wrap:wrap; margin:-0.5rem;}
.main-business-list .list-item{position: relative; width:calc(50% - 1rem); margin:0.5rem; transform:translateY(100px); opacity:0; transition:var(--transition-custom2); transition-delay:0.1s}
.main-business-list .list-item a{position: relative; display: block; width:100%; height:0; padding-top:100%; border-radius:3rem; background:rgba(255,255,255,0.05); transition: var(--transition-custom); box-shadow: 8px 8px 7rem 0px rgba(0,0,0,0.21);}
.main-business-list .list-item a .inner{position: absolute; inset:0; width:100%; height:100%; display: flex; flex-direction-column; align-items: center; justify-content: center; flex-direction: column;}
.main-business-list .list-item a .inner .txt-box{text-align:center;}
.main-business-list .list-item a .inner .txt-box .tit{font-size:2.5rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:700;}
.main-business-list .list-item a .inner .txt-box .txt{font-size:1.1rem; line-height:1.5; color:rgba(255,255,255,0.4); font-weight:500; margin-top:0.5rem;}
.main-business-list .list-item a .inner .play-icon{position: relative; width:6rem; height:6rem; border-radius:50%; margin-top:2rem;}
.main-business-list .list-item a .inner .play-icon span{position: relative; display: flex; align-items:center; justify-content:center; width:100%; height:100%; background:rgba(255,255,255,0.05); border-radius:50%;}
.main-business-list .list-item a .inner .play-icon span:before{position: absolute; content:''; inset: 0; width:100%; height:100%; border-radius: 50%; box-sizing:border-box; padding: 2px; opacity:0; 
background:linear-gradient(to right ,rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 70%, #fff 100%);  transition: var(--transition-custom);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
-webkit-mask-composite: xor; mask-composite: exclude;
}

/* active + hover */
.main-business-video-list .list-item.active{opacity:1; pointer-events: auto;}

.animated .main-business-video-list .list-item.active .txt-box dl:before{opacity:1;}
.animated .main-business-video-list .list-item.active .txt-box dl dt.cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated .main-business-video-list .list-item.active .txt-box dl dd{opacity:1; transform:translateY(0)}

.animated .main-business-video-list .list-item .cm-main-effect{opacity: 0; transform: translateY(100%);}
.animated .main-business-video-list .list-item.active .cm-main-effect{opacity: 1.0; transform: translateY(0);}

.main-business-list .list-item.active a,
.main-business-list .list-item:hover a{background:var(--main-color);}
.main-business-list .list-item.active a .inner .play-icon span:before,
.main-business-list .list-item:hover a .inner .play-icon span:before{opacity:1; animation: circleRotate 1.5s linear infinite;}

@keyframes squareRotate {
	0% {transform:translate(calc(-50% + 0.1px), calc(-50% + 0.1px)) rotate(0deg);}
	100% {transform:translate(calc(-50% + 0.1px), calc(-50% + 0.1px)) rotate(360deg);}
}

/* animated */
.main-slide-con.animated .main-business-video-list{transform:translateY(0); opacity:1;}
.main-slide-con.animated .main-business-list .list-item{transform:translateY(0); opacity:1;}
.main-slide-con.animated .main-business-list .list-item:nth-child(1){transition-delay:0.3s}
.main-slide-con.animated .main-business-list .list-item:nth-child(2){transition-delay:0.4s}
.main-slide-con.animated .main-business-list .list-item:nth-child(3){transition-delay:0.5s}
.main-slide-con.animated .main-business-list .list-item:nth-child(4){transition-delay:0.6s}


/* -------- 메인 컨텐츠 :: 컨텐츠(Performance) -------- */
#mainPerformance{position: relative; width: 100%; height: 100%; display: flex; align-items:center; justify-content:center;}
#mainPerformance > .area-box{width:100%; box-sizing: border-box;}
.main-performance-wrap{display: flex; justify-content:space-between; align-items: center;}
.main-performance-wrap .main-tit-box{width:30.35%;}
.main-performance-wrap .main-tit-box .cm-main-btn-box{margin-top:6rem;}

.main-performance-map{position: relative; width:60rem; margin-left:-7rem;}
.main-performance-map .map-img{opacity:0; transform:scale(0.8); transition:var(--transition-custom2); transition-delay:0.5s}
.main-performance-map .map-img img{width:100%;}
.main-performance-map .map-list{position: absolute; inset:0; width:100%; height:100%;}
.main-performance-map .map-list .list-item{position: absolute; top:50%; left:50%; transform:translate(calc(-50% - 0.1px), calc(-50% + 10px - 0.1px)); opacity:0; transition:var(--transition-custom2);}
.main-performance-map .map-list .list-item .maker{position: relative; font-size:2.5rem; color:#fff;}
.main-performance-map .map-list .list-item .maker .circle-box{position: absolute; transform:translate(-50%, -50%); top:100%; left:50%;}
.main-performance-map .map-list .list-item .maker .circle-box .circle{position: absolute; transform:translate(-50%, -50%) scale(0); top:50%; left:50%; display: block;width:1.17rem; height:1.17rem; border-radius:50%; background:rgb(255,255,255); animation: nation-circle 6s cubic-bezier(1, 2, 0.66, 3) infinite; }
.main-performance-map .map-list .list-item .maker .circle-box .circle:nth-child(1){animation-delay:0s}
.main-performance-map .map-list .list-item .maker .circle-box .circle:nth-child(2){animation-delay:2s}
.main-performance-map .map-list .list-item .maker .circle-box .circle:nth-child(3){animation-delay:4s}
@keyframes nation-circle {
	0% { transform:translate(-50%, -50%) scale(0); opacity: 0; }
	50% { opacity: 0.2; }
	100% { transform:translate(-50%, -50%) scale(1.5); opacity: 0; } 
}

.main-performance-map .map-list .list-item .inner-box{position: absolute; top:0; min-width:10.5rem; height:3.3rem; display: flex; align-items:center; justify-content:space-between; background:var(--main-color); border-radius:3.3rem; padding:0.5rem 1rem; box-sizing:border-box;}
.main-performance-map .map-list .list-item .inner-box .txt{font-size:1.5rem; letter-spacing:-0.035em; color:#fff; font-weight:700;}
.main-performance-map .map-list .list-item .inner-box .num{display: flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; border-radius:2.25rem; font-size:1.1rem; letter-spacing:-0.05em; color:var(--main-color); font-weight:500; background:#fff; font-family:'TheJamsil', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; padding:0 0.6rem; box-sizing:border-box;}

.main-performance-map .map-list .list-item.small .inner-box{width:9.5rem}

.main-performance-map .map-list .list-item.left .inner-box{right:0; transform:translateX(-3rem);}
.main-performance-map .map-list .list-item.right .inner-box{left:0; transform:translateX(3rem);}

.main-performance-map .map-list .list-item[data-city="수도권"]{margin-top:-20rem; margin-left:-7rem; transition-delay:1s;}
.main-performance-map .map-list .list-item[data-city="강원도"]{margin-top:-22rem; margin-left:4rem; transition-delay:1.1s;}
.main-performance-map .map-list .list-item[data-city="충청북도"]{margin-top:-12rem; margin-left:0rem; transition-delay:1.2s;}
.main-performance-map .map-list .list-item[data-city="충청남도"]{margin-top:-8rem; margin-left:-9rem; transition-delay:1.3s;}
.main-performance-map .map-list .list-item[data-city="경상북도"]{margin-top:-5rem; margin-left:9.5rem; transition-delay:1.4s;}
.main-performance-map .map-list .list-item[data-city="경상남도"]{margin-top:6rem; margin-left:5rem; transition-delay:1.5s;}
.main-performance-map .map-list .list-item[data-city="전라북도"]{margin-top:2.5rem; margin-left:-4rem; transition-delay:1.6s;}
.main-performance-map .map-list .list-item[data-city="전라남도"]{margin-top:11.5rem; margin-left:-9rem; transition-delay:1.7s;}
.main-performance-map .map-list .list-item[data-city="제주도"]{margin-top:28.6rem; margin-left:-11.7rem; transition-delay:1.8s;}

.main-performance-count{width:calc(100% - 60rem - 30.35%);}
.main-performance-count .count-txt{font-size:2.4rem; line-height:1.375; letter-spacing:-0.035em; color:#fff; font-weight:700; text-align:right;}
.main-performance-count .count-list{display: flex; align-items:flex-end; flex-direction: column; margin-top:3rem;}
.main-performance-count .count-list .list-item{margin-top:5rem;}
.main-performance-count .count-list .list-item:first-child{margin-top:0;}
.main-performance-count .count-list .list-item .tit{font-size:1.8rem; line-height:1.5; letter-spacing:-0.035em; color:#5d8b8d; font-weight:500; text-align:right; margin-bottom:0.3rem; padding-right:0.8rem; box-sizing:border-box;}

/* 카운트 */
.count-num-box{display:flex; align-items:center; font-size:9rem;}
.count-num-item-wrap{height:1em; overflow:hidden; transition:var(--transition-custom2); opacity:0; transition-delay:0.5s; text-align:center;}
.count-num-item-wrap.count1{margin:0 -0.1em;}
.count-num-item-wrap.count1:nth-child(1) .count-num-item-box li{transform:translateX(-0.1em);}
.count-num-item-wrap.count1:nth-child(3) .count-num-item-box li{transform:translateX(0.1em);}
.count-num-item-wrap.count1 .count-num-item-box li:first-child,
.count-num-item-wrap.count1 .count-num-item-box li:last-child{transform:translateX(0) !important;}

.count-num-item-wrap .count-num-item-box{height:10em; }
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:var(--main-color); font-weight:800;}
 
/* active */
/* .active-slide .count-num-item-wrap.count1{animation:count-up-margin 3s forwards;}
@keyframes count-up-margin {
    0% { margin:0; }
    91% { margin:0; }
    100% { margin:0 -0.1em; }
} */

.active-slide .count-num-item-box{animation:count-up-ani 3s forwards;}
.active-slide .count-num-item-box.down {animation:count-down-ani 3s forwards;}
@keyframes count-up-ani {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -100%, 0); }
}
@keyframes count-down-ani {
    0% { transform: translate3d(0, -90%, 0); }
    100% { transform: translate3d(0, 0, 0); }
} 

/* animated */
.main-slide-con.animated .main-performance-map .map-img{opacity:1; transform:scale(1);}
.main-slide-con.animated .main-performance-map .map-list .list-item{opacity:1; transform:translate(calc(-50% - 0.1px), calc(-50% - 0.1px));}

.main-slide-con.animated .count-num-item-wrap{opacity:1;}


/* -------- 메인 컨텐츠 :: 컨텐츠(Inquiry) -------- */
.main-inquiry-slide .bg{position: absolute; inset:0; bottom:auto; width: 100%;}
.main-inquiry-slide .bg img{width:100%;}

#mainInquiry{position: relative; width: 100%; height: 100%; display: flex; align-items:center; justify-content:center; z-index:1;}
#mainInquiry .area-box{width:100%;}

.main-inquiry-wrap{display: flex; justify-content:space-between; align-items:center;}
.main-inquiry-wrap .left-box{width:50%;}
.main-inquiry-wrap .left-box .main-tit-box .main-tit{margin-bottom:2rem;}
.main-inquiry-wrap .left-box .main-tit-box .main-txt{margin-bottom:7rem;}

.main-inquiry-wrap .right-box{width:50%; display: flex; align-items:center; justify-content:flex-end;}
.main-inquiry-list{display: flex; margin:0 -1.9rem; justify-content:flex-end; width:100%;}
.main-inquiry-list .list-item{position: relative; width:calc(50% - 3.8rem); margin:0 1.9rem; max-width:29rem; height:41rem; overflow:hidden; border-radius:3rem; box-sizing:border-box; padding:0px; transition:all 1.2s 0.2s ease-in-out, padding 0.4s ease-in-out; /* opacity:0; */}
.main-inquiry-list .list-item a{position: relative; display: flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; border-radius:3rem; box-sizing:border-box; background:rgba(13,68,70,0.6); backdrop-filter:blur(1rem) brightness(2.5); transition:var(--transition-custom);}
.main-inquiry-list .list-item a .icon{display: flex; align-items:center; justify-content:center; width:12rem; height:12rem; border-radius:50%; background:rgba(255,255,255,0.1);}
.main-inquiry-list .list-item a dl{text-align:center; margin-top:3rem;}
.main-inquiry-list .list-item a dl dt{font-size:2.7rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:700; margin-bottom:1rem;}
.main-inquiry-list .list-item a dl dd{font-size:1.2rem; line-height:1.5; letter-spacing:-0; color:rgba(255,255,255,0.4); font-weight:500;}

.main-inquiry-list .list-item .outline{position: absolute; overflow: hidden; inset: 0; outline: none; border-radius: inherit; transition:var(--transition-custom); pointer-events:none; opacity:0;}
.main-inquiry-list .list-item .outline:before{content: ""; position: absolute; top:50%; left:50%; width: 75vw; height: 75vw; margin: auto; transform:translate(-50%, -50%); background: linear-gradient(to right,  rgba(0,176,181,1) 40%,rgba(255,255,255,1) 60%); animation: squareRotate 5s linear infinite; }

/* hover */
.main-inquiry-list .list-item:hover{padding:2px;}
.main-inquiry-list .list-item:hover .outline{opacity:1;}
.main-inquiry-list .list-item:hover a{background:var(--main-color);}

/* animated */
.main-slide-con.animated .main-inquiry-list .list-item{/* opacity:1; */}
.main-slide-con.animated .main-inquiry-list .list-item:nth-child(1){transform:translateY(4rem);}
.main-slide-con.animated .main-inquiry-list .list-item:nth-child(2){transform:translateY(-4rem);}


/* -------- 메인 Footer -------- */
.main-footer-box{position: fixed; bottom: 0; left: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; z-index: 99; transform: translateY(100%); transition: transform 800ms;}
.main-footer-box .no-scroll{position: absolute; content:''; bottom:0; left:0; width:100%; height:100vh; transform: translateY(100%); transition: transform 800ms;}
.main-footer-box #footer{position: relative; width: 100%; z-index:1;}
.main-footer-box.on,
.main-footer-box.on .no-scroll{transform: translateY(0);}