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

/* ******************  메인 레이아웃 ********************** */
.main-page #gnb > ul{background:rgba(244, 243, 241,0.5); /* backdrop-filter:blur(0); */}
.main-page .header-lang:before{background:#f4f3f1; backdrop-filter:blur(0);}
.main-page #gnb.open > ul{background:#fff;}

@media all and (min-width:1281px){
	.main-page #headerInner .logo,
	.main-page #headerInner .header-util-box{transform:translateY(calc(-1 * (var(--header-top) + var(--header-height)))); transition:var(--transition-custom2);}
	.main-page #gnb > ul{width:0; left:50%; overflow:hidden; transition:all 0.4s 0.45s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out, background 0.4s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out; }

	/* main-active */
	.main-page.main-active #headerInner .logo,
	.main-page.main-active #headerInner .header-util-box{transform:translateY(0);}
	.main-page.main-active #header.main-header-active #gnb > ul{width:550px; left:0;}
}
@media all and (max-width:1880px){
	#gnb > ul{max-width: calc(100vw - 4rem);}
}

/* black-ver */
#header.black-ver{}
#header.black-ver .header-lang:before{background:#fff;}
#header.black-ver .logo img.basic{opacity:0;}
#header.black-ver .logo img.white{opacity:1;}
#header.black-ver .sitemap-line-btn .line:nth-child(2){background:#fff;}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff }

.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 .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{}
/* 메인 비주얼 :: 텍스트 */
.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:flex-end;
	height:100%;
	padding-bottom:14rem; box-sizing:border-box;
}
.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:2rem; font-weight:700; letter-spacing:-0.025em; color:#333; margin-bottom:2.5rem;}
.main-visual-txt-box .main-visual-txt1 span{color:var(--main-color);}
.main-visual-txt-box .main-visual-txt2{font-size:4rem; letter-spacing:-0.025em; color:#333;	font-weight:700;}

/* black-ver */
.black-ver .main-visual-txt-box .main-visual-txt1{color:#fff;}
.black-ver .main-visual-txt-box .main-visual-txt2{color:#fff;}

/* m-white */
@media all and (max-width:800px){
	.m-white .main-visual-txt-box .main-visual-txt1{color:#fff;}
	.m-white .main-visual-txt-box .main-visual-txt2{color:#fff;}
}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.swiper-slide-active .main-visual-txt1,
.swiper-slide-active .main-visual-txt2,
.swiper-slide-active .main-visual-txt3,
.swiper-slide-active .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.swiper-slide-active .main-visual-txt1{animation-delay:0.1s;}
.swiper-slide-active .main-visual-txt2{animation-delay:0.3s;}
.swiper-slide-active .main-visual-txt3{animation-delay:0.5s;}
.swiper-slide-active .main-visual-more-btn{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;}
.swiper-slide-active .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;}

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

/* 메인 비주얼 :: Notice */
.main-visual-fixed-txt-con{position: absolute; bottom:0; left:0; width:100%; height:8rem; background:var(--main-color); z-index:9; display: flex; align-items: center; transform:translateY(100%); transition:var(--transition-custom2);}
.main-visual-notice-con{display: flex; justify-content:space-between; align-items:center; width:100%;}
.main-visual-notice-con .notice-con{display: flex; align-items:center; width:calc(50% - 7rem);}
.main-visual-notice-con .notice-con .notice-tit{font-size:2rem; line-height:1.6; letter-spacing:-0.025em; color:#fff; font-weight:700; width:9.5rem;}
.main-visual-notice-con .notice-con .notice-list{width:calc(100% - 20rem);}
.main-visual-notice-con .notice-con .notice-list .list-item a{display: flex; align-items:center; justify-content:space-between;}
.main-visual-notice-con .notice-con .notice-list .list-item .txt{font-size:2rem; line-height:1.6; letter-spacing:-0.025em; color:#fff; font-weight:600; width:calc(100% - 7rem); overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.main-visual-notice-con .notice-con .notice-list .list-item .date{font-size:1.3rem; line-height:1.6; letter-spacing:-0.025em; color:rgba(255,255,255,0.3); font-weight:600; width:7rem; text-align: right;}
.main-visual-notice-con .notice-con .notice-btn{display: flex; align-items:center; justify-content:flex-end; width:10.5rem; }
.main-visual-notice-con .notice-con .notice-btn .dots{display: inline-block; width:8px; height:8px; border-radius:50%; background:#fff; margin:0 2px;}

/* main-active */
.main-active .main-visual-fixed-txt-con{transform:translateY(0);}

/* 메인 비주얼 :: Scroll */
.main-visual-scroll{position: absolute; top:50%; right:50%; transform:translateY(-50%); width:3px; height:30rem; border-radius:3px; margin-right:-820px; z-index:99;}
.main-visual-scroll .scroll-line{margin: 0 auto 3rem; position:relative; display:block; width:2px; height:100%; z-index:9;}
.main-visual-scroll .scroll-line span{position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: #f4f3f1; backdrop-filter: blur(3rem); display: block; overflow:hidden; transition: height 1.6s ease-in-out 0.3s; border-radius:3px;}
.main-visual-scroll .scroll-line span::after {position: absolute; top: 0; left: 0; width: 100%; height: 8rem; background: #000; display: block; content: ""; border-radius:3px;}

.main-page.main-active .main-visual-scroll .scroll-line span{height: 100%;}
.main-page.main-active .main-visual-scroll .scroll-line span::after{animation: scroll_ani 2.6s infinite;}

@keyframes scroll_ani {
    0%, 20% {top: -8rem;}
	100% {top: 100%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{position: relative; font-size:2rem; line-height:1.5; letter-spacing:-0.025em; color:#333; font-weight:700; padding-left:2rem; box-sizing:border-box; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); transition-delay:0.3s;}
.main-tit-box .main-tit:before{position: absolute; content:''; width:10px; height:10px; border-radius:50%; top:1rem; left:0; background:var(--main-color);}
.main-tit-box .main-txt{font-size:4rem; line-height:1.375; letter-spacing:-0.025em; color:#333; font-weight:700; margin-top:2rem;}

.main-tit-box .main-txt-inner{display: flex; align-items:flex-end; overflow:hidden;}
.main-tit-box .main-txt-inner .plus-txt{margin-left:3rem; font-size:1.6rem; line-height:1.625; letter-spacing:-0.025em; color:rgba(51,51,51,0.5); font-weight:700; padding-bottom:1rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); transition-delay:1.4s;}

 /* animated */ 
.animated .main-tit-box .main-tit,
.animated .main-tit-box .main-txt-inner .plus-txt{opacity:1; transform:translateY(0);}
.animated .main-tit-box .main-txt.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;
}

/* 공통 :: 버튼 */
.cm-more-btn{position: relative; display: flex; align-items:center; width:25rem; height:6rem; border-radius:3rem; overflow:hidden; padding:0 3rem; box-sizing:border-box; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.cm-more-btn:before{position: absolute; content:''; top:50%; right:2rem; transform:translateY(-50%); width:1rem; height:1rem; background:#000; border-radius:50%; z-index:2; transition:var(--transition-custom);}
.cm-more-btn:after{position: absolute; content:''; top:50%; right:2rem; transform:translateY(-50%); width:1rem; height:1rem; background:#000; border-radius:50%; z-index:3; transition:var(--transition-custom); opacity:0;}
.cm-more-btn .border{position: absolute; content:''; inset:0; border:3px solid #000; border-radius:3rem; box-sizing:border-box; z-index:1;}
.cm-more-btn .txt{position: relative; z-index:4; font-size:1.8rem; letter-spacing:-0.025em; color:#333; font-weight:700; transition:var(--transition-custom);}
/* hover */
.cm-more-btn:hover:before{transform:translateY(-50%) scale(50); background:var(--main-color);}
.cm-more-btn:hover:after{background:#fff; opacity:1;}
.cm-more-btn:hover .txt{color:#fff;}
/* animated */
.animated .cm-more-btn{opacity:1; transform:translateY(0);}


/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (max-width:1280px){
	/* 공통 :: 타이틀 */
	.main-tit-box{}
	.main-tit-box .main-tit{font-size:1.8rem;}
	.main-tit-box .main-txt{font-size:3.2rem; margin-top:1rem;}
}
@media all and (max-width:800px){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:1.6rem; padding-left:1.4rem;}
	.main-tit-box .main-tit:before{width:8px; height:8px; top:0.8rem;}
	.main-tit-box .main-txt{font-size:2.6rem; margin-top:1rem;}
	.main-tit-box .main-txt-inner{display: block;}
	.main-tit-box .main-txt-inner .plus-txt{margin-left:0; padding-bottom:0;}

	/* 공통 :: 버튼 */
	.cm-more-btn{width:18rem; height:5rem; padding:0 2rem;}
	.cm-more-btn .txt{font-size:1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Business) -------- */
#mainContent1{position: relative; background:#f4f3f1; padding:14rem 0 12rem; overflow:hidden;}

.main-business-list{position: relative; margin:5rem -0.6rem 0; z-index:2;}
.main-business-list .slick-list{overflow:visible;}
.main-business-list .list-item{margin:0 0.6rem; overflow:hidden;}
.main-business-list .list-item a{position: relative; display: block; background:#fff; border-radius:3rem; padding:9rem 3rem 5.5rem; transition:border-radius 0.4s ease-in-out, transform 0.8s ease-in-out; transform:translateX(-100%); overflow:hidden;}
.main-business-list .list-item a:before{position: absolute; content:''; inset:0; background:var(--main-color); z-index:9; transition:var(--transition-custom2); transition-delay:0.5s;}
.main-business-list .list-item .img-box{}
.main-business-list .list-item .img-box span{display: block; position: relative; width:100%; height:0; padding-top:71%;}
.main-business-list .list-item .img-box span img{position: absolute; inset:0; max-width:100%; max-height:100%; object-fit:cover; margin:auto; transition:var(--transition-custom);}
.main-business-list .list-item .txt-box{text-align:center; margin-top:4rem;}
.main-business-list .list-item .txt-box .tit{font-size:2.4rem; line-height:1.5; letter-spacing:-0.025em; color:#000; font-weight:700;}
.main-business-list .list-item .txt-box .tit-en{font-size:1.6rem; line-height:1.5; letter-spacing:-0.025em; color:rgba(0,0,0,0.3); font-weight:700; height: 2.2rem;}


.main-business-circle{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0; z-index:1; animation: textRotate 30s linear infinite; pointer-events:none; }
.main-business-circle.circle01{margin-left: 100rem; margin-top: -40rem;}
.main-business-circle.circle02{margin-left: -104rem; margin-top: 60rem;}
.main-business-circle .inner{transition:all 2s cubic-bezier(0.38, 0, 0.2, 1); transform:scale(0); opacity:0;}

/* animated */
.animated .main-business-list .list-item.on a{transform:translateX(0%);}
.animated .main-business-list .list-item.on a:before{transform:translateX(101%);}
.animated .main-business-circle.circle01{opacity:0.1;}
.animated .main-business-circle.circle02{opacity:0.05;}
.animated .main-business-circle .inner{transform:scale(1) rotate(180deg); opacity:1;}

@media all and (min-width:801px){
	/* hover */
	.main-business-list .list-item a:hover{border-radius:13rem;}
	.main-business-list .list-item a:hover .img-box span img{transform:scale(1.05);}
}
@media (min-width:801px) and (max-width:1280px){
	#mainContent1 .main-tit-box .main-txt{width:50%}
}
@media all and (max-width:800px){
	#mainContent1{padding:8rem 0;}
	.main-tit-box .main-txt-inner{display: block;}

	.main-business-list .list-item a{padding:5rem 1.5rem 3rem;}
	.main-business-list .list-item .txt-box .tit{font-size:2rem;}
	.main-business-list .list-item .txt-box .tit-en{font-size:1.4rem; height:4.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Flow Txt) -------- */
/* flow txt */
.flow-txt-wrap{position: relative; display: flex ; margin: 9rem 0 10rem; white-space: nowrap; opacity:0; transform:translateX(100%); transition:all 2s cubic-bezier(0.38, 0, 0.2, 1);}
.flow-txt-wrap .flow-txt{font-size:20rem; letter-spacing:-0.025em; color:rgba(0,0,0,0.1); font-weight:700; transform:translateX(-100%); animation: 40s 0s flowLoop infinite linear; padding:0 3rem;}

@keyframes flowLoop {
	0%{ transform:translateX(-100%) } 
	100% { transform:translateX(-200%) }
}

/* animated */
.animated .flow-txt-wrap{opacity:1; transform:translateX(0);}

@media all and (max-width:800px){
	.flow-txt-wrap{margin:5rem 0;}
	.flow-txt-wrap .flow-txt{font-size:8rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(MENU) -------- */
#mainContent3{margin-bottom:15rem;}
.main-menu-list{display: flex; flex-wrap:wrap; margin:-1rem;}
.main-menu-list .list-item{width:calc(50% - 2rem); margin:1rem; background:#f4f3f1; border-radius:2rem; padding:4rem 5rem; box-sizing:border-box;}
.main-menu-list .list-item .img-box{position: relative; overflow:hidden;}
.main-menu-list .list-item .img-box span{display: block; position: relative; width:100%; height:0; padding-top:53.33%; background:#fff; border-radius:2rem; transform:translateX(-100%); overflow:hidden; transition:var(--transition-custom2); transition-delay:0.4s}
.main-menu-list .list-item .img-box span:before{position: absolute; content:''; inset:0; background:var(--main-color); transition:var(--transition-custom2); transition-delay:1.2s; z-index:2;}
.main-menu-list .list-item .img-box span img{position: absolute; inset:0; max-width:100%; max-height:100%; object-fit:cover; margin:auto;}
.main-menu-list .list-item .txt-box{margin-top:6rem;}
.main-menu-list .list-item .txt-box .cm-more-btn{margin-top:2.7rem; transition-delay:1s}


/* animated */
.main-menu-list .list-item.animated .img-box span{transform:translateX(0);}
.main-menu-list .list-item.animated .img-box span:before{transform:translateX(100%);}

@media all and (min-width:801px){
	.main-menu-list .list-item.wide{display: flex; justify-content:space-between; align-items:center; width:calc(100% - 2rem); padding:5rem;}
	.main-menu-list .list-item.wide .img-box{width:calc(50% - 6rem);}
	.main-menu-list .list-item.wide .txt-box{width:calc(50% - 6rem); margin-top:0;}
}
@media all and (max-width:800px){
	#mainContent3{margin-bottom:10rem;}
	.main-menu-list .list-item{display: flex; justify-content:space-between; align-items:center; width:calc(100% - 2rem); padding:2rem;}
	.main-menu-list .list-item .img-box{width: calc(50% - 2rem);}
	.main-menu-list .list-item .img-box span{padding-top:100%;}
	.main-menu-list .list-item .img-box span img{max-width:80%; max-height:80%;}
	.main-menu-list .list-item .txt-box{width: calc(50% - 2rem); margin-top:0;}
}
@media all and (max-width:480px){
	.main-menu-list .list-item{flex-direction: column; padding:3rem 2rem;}
	.main-menu-list .list-item .img-box,
	.main-menu-list .list-item .txt-box{width:100%;}
	.main-menu-list .list-item .img-box{margin-bottom:3rem;}
	.main-menu-list .list-item .img-box span{padding-top:53.33%;}
	.main-menu-list .list-item .txt-box .cm-more-btn{margin-top:1rem;}
}

/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }

/* pointer */
.mouse-pointer .pointer-circle{position:absolute;top:50%;left:50%;width: 2rem;height: 2rem;border-radius:50%;transform:translate(-50%,-50%) scale(1);transition:var(--transition-custom);border:1px solid var(--main-color);}
/* pointer:hover */
.mouse-pointer.link .pointer-circle{width:5rem; height:5rem; opacity:0;}

/* more */
.mouse-pointer .pointer-more{position:absolute; left:50%; top:50%; display: block; width: 18rem; height: 18rem; transform: translate(-50%,-50%) scale(0); opacity:0; visibility: hidden; transition:var(--transition-custom); display: flex; align-items:center; justify-content:center;}
.mouse-pointer .pointer-more .inner-circle{position: relative; display: block; width:12rem; height:12rem; background:var(--main-color); border-radius:50%;}
.mouse-pointer .pointer-more .inner-circle:before{position: absolute; content:'\e907'; font-family:'xeicon'; font-size:4.8rem; color:#fff; top:50%; left:50%; transform:translate(-50%, -50%);}
.mouse-pointer .pointer-more svg{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:100%; height:100%;}
.mouse-pointer .pointer-more svg *{fill:var(--main-color); width:100%; height:100%;}

.mouse-pointer.more .pointer-more{transform: translate(-50%,-50%) scale(1.0); visibility: visible; opacity: 1;}
.mouse-pointer.more .pointer-more svg{animation: textRotate 10s linear infinite;}

@keyframes textRotate {
	0% {
		transform: translate(-50%,-50%) rotate(0);
	}
	100% {
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
@media all and (max-width:800px){
	.mouse-pointer{display: none;}
}



.quick-inquiry-btn{position: fixed; bottom:150px; right:50%; width:80px; height:80px; z-index:999; margin-right: -860px; transition:var(--transition-custom);}
.quick-inquiry-btn a{display: flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:#f27982; transition:var(--transition-custom);}
.quick-inquiry-btn a img{transition:var(--transition-custom);}
.quick-inquiry-btn a:hover{transform:scale(1.1);}

.quick-inquiry-btn.top-fixed{bottom:50px; margin-right: -945px;}
.quick-inquiry-btn.top-fixed.bottom-fixed{bottom:0;}
/* .quick-inquiry-btn.top-fixed.bottom-fixed{position: absolute; bottom:auto; top:20px} */

@media all and (max-width:1780px){
	.quick-inquiry-btn{margin-right:0 !important; right:var(--area-padding);}
	.quick-inquiry-btn.top-fixed.bottom-fixed{bottom:10rem;}
}
@media all and (max-width:800px){
	.quick-inquiry-btn{width:60px; height:60px; }
	.quick-inquiry-btn a img{height:24px;}

	.quick-inquiry-btn.top-fixed.bottom-fixed{bottom:12rem;}
}
@media all and (max-width:480px){
	.quick-inquiry-btn{transform:translateY(30rem);}
	.quick-inquiry-btn.top-fixed{transform:translateY(0rem);}
}