@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}

.main-page #gnb > ul > li > a{color:#fff;}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}

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

@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:120rem; 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;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	flex-direction: column;
	align-items:center;
    justify-content: space-between;
	height:100%;
}

.main-visual-txt-inner{text-align:center;}
.main-visual-txt-inner.top-box{margin-top:calc(var(--header-height) + var(--header-top) + 15rem);}
.main-visual-txt-inner.bottom-box{margin-bottom:7rem;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:4rem; font-weight:300; letter-spacing:-0.02em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{display: flex; align-items:center; justify-content: center; font-size:15rem; font-weight:300; letter-spacing:-0.02em; color:#fff; margin-top:1rem;}
.main-visual-txt-box .main-visual-txt2 img,
.main-visual-txt-box .main-visual-txt2 svg{margin-right:3rem;}
.main-visual-txt-box .main-visual-txt3{font-size:2.5rem; letter-spacing:0.5em; color:#fff; line-height:1.5;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1{ animation: cm-text-blur-animation 1.5s ease-in-out both; }
.active-item .main-visual-txt2{ animation: cm-text-blur-animation2 1.5s ease-in-out 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: cm-text-blur-animation 1.5s ease-in-out both}

.animated .main-visual-txt3{animation: cm-text-blur-animation4 1.5s ease-in-out 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;
	}
	to {
		opacity:1.0;
	}
}
@keyframes cm-text-blur-animation {
	0% {opacity: 0; text-shadow: 0 0 0.5rem #fff; letter-spacing:2.5rem; margin-top: 5rem; filter: blur(20px);}
	50% {text-shadow: 0 0 0 #fff;}
	75% {margin-top: 0rem;}
	100% {opacity: 1;  letter-spacing:-0.02em; filter: blur(0px);}
}
@keyframes cm-text-blur-animation2 {
	0% {opacity: 0; text-shadow: 0 0 0.5rem #fff; letter-spacing:5.5rem; margin-top: 5rem; filter: blur(20px);}
	50% {text-shadow: 0 0 0 #fff;}
	75% {letter-spacing:0.02em; margin-top: 1rem;}
	100% {opacity: 1; letter-spacing:0.02em; filter: blur(0px);}
}
@keyframes cm-text-blur-animation4 {
	0% {opacity: 0; text-shadow: 0 0 0.5rem #fff; letter-spacing:2.5rem; margin-top: 5rem; filter: blur(20px);}
	50% {text-shadow: 0 0 0 #fff;}
	75% {letter-spacing:2.5; margin-top: 0rem;}
	100% {opacity: 1;  letter-spacing:0.5em; filter: blur(0px);}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:2.5rem; line-height:1.5; letter-spacing:-0.02em; color:var(--main-color); font-weight:500; margin-bottom:1rem;}
.main-tit-box .main-txt{font-size:6rem; line-height:1.33; letter-spacing:-0.05em; color:#000; font-weight:700;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
/* 공통 :: 타이틀 :: 효과 */
.animated .cm-tit-effect{animation: cm-text-blur-animation3 1.5s ease-in-out both;}
@keyframes cm-text-blur-animation3 {
	0% {opacity: 0; filter: blur(20px);}
	100% {opacity: 1; filter: blur(0px);}
}


/* 공통 :: 버튼 */
.cm-button-style{
position: relative;
overflow: hidden;
transition: all 1s;
background: rgb(34,34,34);
background: -webkit-linear-gradient(-400deg,rgba(228,0,70,1) 0%, rgba(228,0,70,1) 25%, rgba(34,34,34,1) 45%, rgba(34,34,34,1) 100%);
background: -moz-linear-gradient(-400deg,rgba(228,0,70,1) 0%, rgba(228,0,70,1) 25%, rgba(34,34,34,1) 45%, rgba(34,34,34,1) 100%);
background: -o-linear-gradient(-400deg,rgba(228,0,70,1) 0%, rgba(228,0,70,1) 25%, rgba(34,34,34,1) 45%, rgba(34,34,34,1) 100%);
background: linear-gradient(-400deg,rgba(228,0,70,1) 0%, rgba(228,0,70,1) 25%, rgba(34,34,34,1) 45%, rgba(34,34,34,1) 100%);
background-size: 500% 500%;
background-position: 100% 100%;}
@media all and (min-width:801px){
	.cm-button-style:hover{background-position: 0% 25%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1() -------- */
#mainContent1{position: relative; padding-top:23rem; z-index:1; background:#fff;}
.main-post-slide{position: relative; margin:6.5rem -1rem 0; display: flex;}
.main-post-slide:before{position: absolute; content:''; width:100vw; height:100%; top:50%; left:50%; transform:translateX(-50%); background:#ddd;}
.main-post-slide .slick-list{overflow:visible;}
.main-post-slide .slide-item{position: relative; display: flex !important; align-items:center; justify-content:center; height:75rem; border-radius:5rem; overflow:hidden; margin:0 1rem;}
.main-post-slide .slide-item .bg{position: absolute; top:50%; left:50%; transform:translateY(-50%); background:no-repeat center; background-size:cover; opacity:0; border-radius:5rem; overflow:hidden; width:0; height:100%; transition:var(--transition-custom2);}
.main-post-slide .slide-item .txt-box{text-align:center; margin-top:-3rem;}
.main-post-slide .slide-item .txt-box .tit{display: flex; justify-content: center; align-items:flex-end; font-size:4rem; line-height:1.3; letter-spacing:-0.02em; color:#fff; margin-bottom:1.5rem; transition:var(--transition-custom2); transform:translateY(50px); opacity:0;}
.main-post-slide .slide-item .txt-box .tit b{font-size:1.25em; color:var(--main-color); margin-left:1rem;}
.main-post-slide .slide-item .txt-box .tit img{margin-left:2rem;}
.main-post-slide .slide-item .txt-box .txt{font-size:2.2rem; line-height:1.36; letter-spacing:-0.05em; color:#fff; font-weight:500; color:#fff; transition:var(--transition-custom2); transform:translateY(50px); opacity:0;}
/* 하루평균 */
.count-doughnut-list{display: flex; justify-content: center; margin:8rem -1.5rem 0;}
.count-doughnut-list .list-item{margin:0 1.5rem; transition:var(--transition-custom2); transform:translateY(50px); opacity:0;}
.count-doughnut-list .list-item .num-box{display: inline-block; position: relative; height:16rem; overflow:hidden; padding-top:2px; box-sizing:border-box;}
.count-doughnut-list .list-item .num-box svg{transform:rotate(-110deg); overflow: visible; width:100%; height:161%;}
.count-doughnut-list .list-item .num-box .num{position: absolute; bottom:1rem; left:50%; transform:translateX(-50%); font-size:7rem; line-height:1; letter-spacing:-0.02em; color:#fff; font-weight:700;}
.count-doughnut-list .list-item .num-box .num em{font-size:0.42em;}
.count-doughnut-list .list-item .txt{display: flex; justify-content: center; align-items: center; font-size:1.7rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:500; margin-top:1.5rem;}
.count-doughnut-list .list-item .txt i{font-size:2rem; margin-left:1rem; }
.count-doughnut-list .list-item .txt img{margin-left:1rem;}
/* 광고효과 */
.ad-doughnut-list{display: flex; justify-content: center; margin:3.5rem -6rem 0;}
.ad-doughnut-list .list-item{margin:0 6rem; transition:var(--transition-custom2); transform:translateY(50px); opacity:0;}
.ad-doughnut-list .list-item .circle-box{position: relative; }
.ad-doughnut-list .list-item .circle-box svg{width:250px; height:250px; transform:rotate(-90deg);}
.ad-doughnut-list .list-item .circle-box svg .dashed-circle{stroke-dashoffset: 597; stroke-dasharray: 597; transition:var(--transition-custom2) 0.5s;}
.ad-doughnut-list .list-item .circle-box .circle-txt{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:1.7rem; letter-spacing:-0.05em; color:#fff; font-weight:500;}
.ad-doughnut-list .list-item .circle-box .circle-txt.yes{margin-top:6rem; margin-left:7rem;}
.ad-doughnut-list .list-item .circle-box .circle-txt.no{margin-top:-5rem; margin-left:-8.3rem;}
.ad-doughnut-list .list-item .txt{font-size:1.7rem; line-height:1.47; letter-spacing:-0.05em; color:#fff; font-weight:700; margin-top:2rem; text-align:center;}
/* bg */
.main-post-slide .slide-item.item01 .bg{background-image:url('/images/main/main_post_slide01.jpg');}
.main-post-slide .slide-item.item02 .bg{background-image:url('/images/main/main_post_slide02.jpg');}
/* arrow */
.main-post-slide .slick-arrow{position: absolute; top:50%; transform:translateY(-50%); font-size:5rem; color:#fff; z-index:99; transition:var(--transition-custom);}
.main-post-slide .slick-arrow.slick-disabled{opacity:0.2;}
.main-post-slide .slick-arrow.slick-prev{left:8rem;}
.main-post-slide .slick-arrow.slick-next{right:8rem;}

/* animated */
.main-post-con.animated .main-post-slide .slide-item .bg{width: 100%; margin-left: -50%; opacity:1;}

/* active */
.slick-current .ad-doughnut-list .list-item .circle-box svg .dashed-circle{stroke-dasharray: 1000;}

/* animated + active */
.main-active .main-post-con.animated .main-post-slide .slide-item{transform:translateY(0); opacity:1;}

.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .txt-box .tit{transform:translateY(0); opacity:1; transition-delay:0.2s;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .txt-box .txt{transform:translateY(0); opacity:1; transition-delay:0.4s;}

.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item{transform:translateY(0); opacity:1;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item:nth-child(1){transition-delay:0.4s;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item:nth-child(2){transition-delay:0.5s;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item:nth-child(3){transition-delay:0.6s;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item:nth-child(4){transition-delay:0.7s;}
.main-active .main-post-con.animated .main-post-slide .slide-item.slick-current .count-doughnut-list .list-item:nth-child(5){transition-delay:0.8s;}

.main-post-con.animated .main-post-slide .slide-item.slick-current .ad-doughnut-list .list-item{transform:translateY(0); opacity:1;}
.main-post-con.animated .main-post-slide .slide-item.slick-current .ad-doughnut-list .list-item:nth-child(1){transition-delay:0.2s;}
.main-post-con.animated .main-post-slide .slide-item.slick-current .ad-doughnut-list .list-item:nth-child(2){transition-delay:0.3s;}

.main-slide-progress-m{position: relative; display: flex; align-items:center; justify-content:space-between; margin-top:4rem; margin-bottom:2rem; display: none;}
.main-slide-progress-m .progress-bar{position: relative; width:calc(100% - 6rem); background:rgba(0,0,0,0.05); height:2px;}
.main-slide-progress-m .progress-bar span{position: absolute; top:0; left:0; height:2px; background:#000; transition:var(--transition-custom);}
.main-slide-progress-m .arrow-box-m{display: flex; align-items:center;}
.main-slide-progress-m .arrow-box-m button{font-size:2.5rem; color:#3a3a3e;}

@media all and (max-width:1460px){
	.main-post-slide .slick-arrow.slick-prev{left:var(--area-padding);}
	.main-post-slide .slick-arrow.slick-next{right:var(--area-padding);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#mainContent2{position: relative; padding:20rem 0 15rem; z-index:9;}
#mainContent2 .bg{position: absolute; top:0rem; width:100%; height:100%;}
#mainContent2 .bg img{position: absolute; top:0; width:100%; }

.main-core-wrap{display: flex; }
.main-core-wrap .main-core-left{width:65rem;}
.main-core-wrap .main-core-right{width:calc(100% - 65rem);}

.main-core-left .main-tit-box{margin-bottom:6.2rem; padding-top:11rem;}
.core-scroll-icon{display: inline-flex; flex-direction:column; align-items: center; margin-top:5rem;}
.core-scroll-icon .txt{font-size:1rem; letter-spacing:0; color:#888; font-weight:500; writing-mode:tb; margin-bottom:1rem; margin-right: 1px;}
.core-scroll-icon .icon{display: flex; flex-direction:column; font-size:1.8rem; color:#888;}
.core-scroll-icon .icon i{margin:-0.5rem 0; opacity:0;}
.core-scroll-icon .icon i:nth-child(1){animation: scrollIcon 2s 0s linear infinite;}
.core-scroll-icon .icon i:nth-child(2){animation: scrollIcon 2s 0.2s linear infinite;}
.core-scroll-icon .icon i:nth-child(3){animation: scrollIcon 2s 0.4s linear infinite;}

@keyframes scrollIcon {
	0% {
		opacity:0;
	}
	30% {
		opacity:1;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

.main-core-right .main-core-list{display: flex; flex-direction: row-reverse; flex-wrap:wrap; justify-content:space-between; width:100% !important; }
.main-core-right .main-core-list .list-item{width:calc(50% - 1.5rem); margin-bottom:3rem;}
.main-core-right .main-core-list .list-item .inner-item{position: relative; display: block; background:#fff; border-radius:2rem; overflow:hidden; transition:var(--transition-custom) !important; box-shadow: 0.8rem 1rem 3rem -4px rgba(6,8,8,0.2);}
.main-core-right .main-core-list .list-item .inner-item:before{position: absolute; content:''; bottom:0; right:0; width:29.3rem; height:14.6rem; background:no-repeat center; background-size:cover; background-image:url('/images/main/main_core_hover.png');}
.main-core-right .main-core-list .list-item .tit-box{position: relative; width:100%; padding:4rem; box-sizing:border-box; z-index:1;}
.main-core-right .main-core-list .list-item .tit-box .tit{font-size:3rem; line-height:1.29; letter-spacing:-0.02em; color:#222; font-weight:700; transition:var(--transition-custom);}
.main-core-right .main-core-list .list-item .tit-box .tit-en{display: block; font-size:1.5rem; line-height:1.44; letter-spacing:-0.02em; color:var(--main-color); font-weight:500; transition:var(--transition-custom);}
.main-core-right .main-core-list .list-item .tit-box .txt{position: absolute; top:calc(100% - 2rem); left: 0; padding: 0 4rem; box-sizing: border-box; font-size:1.5rem; line-height:1.66; letter-spacing:-0.05em; color:rgba(255,255,255,0.6); opacity:0;  transition:var(--transition-custom);}

.main-core-right .main-core-list .list-item .img-box{position: relative; z-index:1; transition:var(--transition-custom);}
.main-core-right .main-core-list .list-item .img-box span{display: block; position: relative; width:100%; height:0; padding-top:91.176%;}
.main-core-right .main-core-list .list-item .img-box span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; object-fit:cover; width:100%;}
/* even / odd */
.main-core-right .main-core-list .list-item:nth-child(even){transform:translateY(15rem);}
.main-core-right .main-core-list .list-item:last-child{margin-bottom:0;}
/* hover + .on */
.main-core-right .main-core-list .list-item.on .inner-item,
.main-core-right .main-core-list .list-item .inner-item:hover{background:var(--main-color);}
.main-core-right .main-core-list .list-item.on .inner-item .tit-box .tit,
.main-core-right .main-core-list .list-item .inner-item:hover .tit-box .tit,
.main-core-right .main-core-list .list-item.on .inner-item .tit-box .tit-en,
.main-core-right .main-core-list .list-item .inner-item:hover .tit-box .tit-en{color:#fff;}
.main-core-right .main-core-list .list-item.on .inner-item .tit-box .txt,
.main-core-right .main-core-list .list-item .inner-item:hover .tit-box .txt{opacity:1;}
.main-core-right .main-core-list .list-item.on .inner-item .img-box,
.main-core-right .main-core-list .list-item .inner-item:hover .img-box{opacity:0;}

/* 흐르는 텍스트 */
.main-flow-wrap{position: relative; display: flex; white-space:nowrap; padding-top:15rem; opacity:0.1 !important;}
.main-flow-wrap:before{position: absolute; content:''; width:100%; height:100%; background: linear-gradient(to right,  rgba(240,240,240,1) 0%,rgba(240,240,240,0) 60%,rgba(240,240,240,0) 100%); z-index:1;}
.main-flow-wrap .flow-text{display: flex; align-items:center; white-space:nowrap; animation: flowText 15s linear infinite; padding-right:5rem; box-sizing:border-box;}
.main-flow-wrap .flow-text .flow-txt{font-size:15rem; letter-spacing:-0.02em; color:#000; font-weight:300; white-space:nowrap;}
.main-flow-wrap .flow-text .flow-img{margin:0 5rem;}

@keyframes flowText {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@media all and (max-width:1620px){
	#mainContent2 .bg{top:0rem;}
	#mainContent2 .bg img{height:100%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
#mainContent3{position: relative; background:#fff; z-index:11;}
#mainContent3:before{position: absolute; content:''; width:100vw; height:50%; bottom:50%; left:50%; transform:translateX(-50%); background:#f0f0f0;}
.main-inquiry-con{position: relative; width:100%; border-radius:5rem; /* overflow:hidden; */ background:no-repeat center right; background-size:cover; background-image:url('/images/main/main_inquiry_bg.png'); z-index:1;}
.main-inquiry-con:after{position: absolute; content:''; width:100%; height:2px; top:calc(50% - 1px); left:50%; transform:translateX(-50%); background: linear-gradient(to right,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);}
.main-inquiry-con .inquiry-item{display: flex; padding:11rem 0;}
.main-inquiry-con .inquiry-item .left-box{width:33.5rem;}
.main-inquiry-con .inquiry-item .left-box .tit{font-size:2.5rem; line-height:1.4; letter-spacing:-0.02em; color:var(--main-color); font-weight:500;}
.main-inquiry-con .inquiry-item .left-box .inquiry-btn{display: flex; align-items:center; justify-content:space-between; padding-inline:3rem 2rem; width:21rem; height:5.4rem; border-radius:5.4rem; box-sizing:border-box; margin-top:3rem;}
.main-inquiry-con .inquiry-item .left-box .inquiry-btn .txt{font-size:1.6rem; letter-spacing:-0.045em; color:#fff; font-weight:500;}
.main-inquiry-con .inquiry-item .left-box .inquiry-btn i{font-size:2rem; letter-spacing:-0.05em; color:#fff;}

.main-inquiry-con .inquiry-item .right-box{width:calc(100% - 33.5rem);}
.main-inquiry-con .inquiry-item .right-box .txt{font-size:4rem; line-height:1.375; letter-spacing:-0.05em; color:#fff; font-weight:700;}
