@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 #header{transform:translateY(calc(-1 * var(--header-height))); transition:var(--transition-custom2);}

.page-on .main-page #header{transform:translateY(0);}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff; }
.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%;
	max-width:1760px;
	height: calc(100% - var(--header-height));
	background-size:cover !important;
	/* transform: scale(1.08,1.08); */
	margin:auto; margin-right:0; margin-top:var(--header-height);
}
.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{
	position: relative;
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{display: block; font-size:7.2rem; font-weight:800; letter-spacing:-0.075em; color:#fff; margin-bottom:31rem; line-height:1.25;}
.main-visual-txt-box .main-visual-txt1 b{color:#e0b681; font-weight:800;}
.main-visual-txt-box .main-visual-txt1.darken{color:var(--main-color);}
.main-visual-txt-box .main-visual-txt1.darken b{color:#b19168;}
.main-visual-txt-box .main-visual-more-btn{position: absolute; display: block; width:12rem; height:12rem; background:var(--sub-color); padding:2rem; box-sizing:border-box; overflow:hidden; left:0; bottom:10rem;}
.main-visual-txt-box .main-visual-more-btn .txt{position: relative; font-size:1.3rem; letter-spacing:-0.025em; color:#fff; font-weight:700; z-index:9;}
.main-visual-txt-box .main-visual-more-btn:before{position: absolute; content:'\e90b'; font-family:'xeicon'; font-size:1.5rem; color:#fff; bottom:2rem; right:2rem; z-index:9;}

.main-visual-txt-box .main-visual-more-btn .cm-fill {position: absolute; display: block; width: 0px; height: 0px; transform: translate(-50%,-50%); border-radius: 50%; background: #8e6f47; transition: width 1s, height 1s;}
.main-visual-txt-box .main-visual-more-btn:hover .cm-fill{width: 50vw; height: 50vw;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .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;}
.active-item .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);
	}
}


/* 메인 컨텐츠 :: Dots */
.slick-dots-wrapper{position:absolute; left:0; top:47%; width:100%; text-align:left; z-index:11; transition:all 1.5s 0.3s; opacity:0; transform:translateY(50px);}
.page-on .slick-dots-wrapper{opacity:1; transform:translateY(0px);}
.slick-dots{vertical-align:top; display: flex; justify-content:flex-start; }
.slick-dots li{float:left; margin-left:1.5rem;}
.slick-dots li:first-child{margin-left:0}
.slick-dots li button{
	position:relative; 
	cursor:pointer; 
	margin:0px; 
	padding:0px; 
	background:none; 
	vertical-align:top; 
	width:15px; 
	height:15px; 
	font-size:0; 
	border-radius:50%; 
	box-sizing:border-box;
}
.slick-dots li button:focus{}
.slick-dots li button:after{position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background-color:#fff; content:""; border-radius:50%; transform:scale(1); transition:var(--transition-custom); }
.slick-dots li button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--transition-custom);}
.slick-dots li button svg circle{
	fill:transparent; 
	stroke:#fff; 
	stroke-width:2px; 
	stroke-linecap:round; 
	stroke-dasharray: 100;
	stroke-dashoffset: 50;
}
.slick-dots li.slick-active button svg{transform:scale(1) rotate(-90deg);; }
html:not(.ios-os) .slick-dots li.slick-active button svg circle{animation: draw-circle 6s cubic-bezier(0.4, 0, 0.2, 1) both;}
.ios-os .slick-dots li.slick-active button svg circle{animation: draw-circle-ios 6s cubic-bezier(0.4, 0, 0.2, 1) both;}
.slick-dots li.slick-active button:after{transform:scale(0); transition-duration:0s;}

/* svg Circle draw */
@keyframes draw-circle {
	from {
		stroke-dashoffset: -50;
	}
	to {
		stroke-dashoffset: 0
	}
}
@keyframes draw-circle-ios {
	from {
		stroke-dashoffset: 100;
	}
	to {
		stroke-dashoffset: 50
	}
}

/* black ver */
.black .slick-dots li button:after{background:var(--main-color);}
.black .slick-dots li button svg circle{stroke:var(--main-color);}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{display: flex; align-items:flex-end; margin-bottom:3.2rem;}
.main-tit-box .main-tit{font-size:6.8rem; letter-spacing:-0.025em; color:var(--main-color); font-weight:600; line-height: 0.9; margin-right:4.5rem;}
.main-tit-box .main-txt{font-size:1.6rem; letter-spacing:-0.055em; color:rgba(90,46,19,0.8); font-weight:600; line-height: 1.875;}

.main-tit-box .main-tit.cm-word-split-JS.splitting .word,
.main-tit-box .main-txt.cm-word-split-JS.splitting .word{line-height:1;}
.main-tit-box .main-tit.splitting .char,
.main-tit-box .main-txt.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char,
.active-section .main-txt.splitting .char,
.animated .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;
}

/* ******************  메인 Product ********************** */
#mainContent1 .fp-tableCell{vertical-align: bottom;}
.main-product-wrap{position: relative; width:100%; max-width:1760px;}
.main-product-wrap.swiper-container{margin-left:0; margin-right:0; overflow:visible;}
.main-product-wrap:before{position: absolute; content:''; width:159px; height:100%; background:no-repeat center; background-size:cover; background-image:url('/images/main/product_bg.jpg'); top: 0; right: 0; transform: translateX(100%); z-index:9;}
.main-product-slide{}
.main-product-slide .slide-item{position: relative;}
.main-product-slide .slide-item .slide-img{position: relative;}
.main-product-slide .slide-item .slide-img img{width:100%;}
.main-product-slide .slide-item .slide-txt{position: absolute; width:50rem; top:0; right:0; padding:10rem 0; padding-right:7.5rem;}
.main-product-slide .slide-item .slide-txt .tit{font-size:2rem; line-height:1.5; letter-spacing:-0.05em; color:var(--sub-color); font-weight:600; text-transform: uppercase;}
.main-product-slide .slide-item .slide-txt .sub-tit{display: block; font-size:6.2rem; line-height:1.36; letter-spacing:-0.05em; color:var(--main-color); font-weight:600; margin-bottom:1.5rem;}
.main-product-slide .slide-item .slide-txt .sub-tit .word{padding:0 0.1rem;} 
.main-product-slide .slide-item .slide-txt .sub-tit em{position: relative; font-size:0.8em; top:-0.12em;}
.main-product-slide .slide-item .slide-txt .sub-tit em .word{padding:0 0.2em; font-weight:700;}
.main-product-slide .slide-item .slide-txt .txt{font-size:1.8rem; line-height:1.55; letter-spacing:-0.05em; color:var(--main-color); font-weight:700;}

.main-product-slide .slide-item .slide-txt .tit.splitting .char,
.main-product-slide .slide-item .slide-txt .sub-tit.splitting .char,
.main-product-slide .slide-item .slide-txt .txt.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}

.animated .main-product-slide .slide-item.swiper-slide-active .slide-txt .tit.splitting .char,
.animated .main-product-slide .slide-item.swiper-slide-active .slide-txt .sub-tit.splitting .char,
.animated .main-product-slide .slide-item.swiper-slide-active .slide-txt .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;
}

.main-product-arrows{position: absolute; bottom:14rem; right:8rem; width:10rem; height:10rem; background: var(--sub-color); z-index:19;}
.main-product-arrows:before{position: absolute; content:''; width:80%; height:1px; background:rgba(255,255,255,0.5); top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); }
.main-product-arrows .product-arrow{display: flex; width:50%; height:50%; align-items:center; justify-content:center; cursor: pointer;}
.main-product-arrows .product-arrow span{font-size:1.2rem; letter-spacing:-0.025em; color:#fff; opacity:0.5; font-weight:600;}
.main-product-arrows .product-arrow span.current-num{font-size:1.5rem; opacity:1;}
.main-product-arrows .product-arrow.arrow-next{margin-left:50%;}

.main-product-pagination{position: absolute; bottom:8rem; right:8rem; z-index:18; display: flex;}
.main-product-pagination .pagination-btn{width:8rem; color:var(--main-color); font-size:14px; letter-spacing:-0.05em; font-weight:600; cursor: pointer;}

.main-product-pagination .pagination-bar{position: absolute; width:100%; height:3px; background:var(--sub-color); border-radius:1.5px; top:-15px; left:0;}
.main-product-pagination .pagination-bar .bar{position: absolute; content:''; width:0; height:3px; background:var(--main-color); border-radius:1.5px; top:0px; left:0; /* transition:width 3s; */}

/* ******************  메인 Market ********************** */
#mainContent2 .fp-tableCell{vertical-align: bottom;}
.main-market-wrap{position: relative; display: flex; flex-wrap:wrap; justify-content:space-between;}
.main-market-wrap:before{position: absolute; content:''; width:100vw; height:1px; background:#eee; top:0; left:50%; transform:translateX(-50%);}
.main-market-wrap .market-item{position: relative; overflow:hidden; width:calc(33.33% - 0.8rem); margin-top:1.4rem;}
.main-market-wrap .market-item:nth-child(-n+3){margin-top:0;}
.main-market-wrap .market-item .img-box{position: relative; width:100%; height:0; padding-top:33rem;}
.main-market-wrap .market-item .img-box:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; backdrop-filter: blur(5px); transition:var(--transition-custom); opacity:0; z-index:1;}
.main-market-wrap .market-item .img-box img{position: absolute; max-width:100%; top:50%; left:50%; transform: translate(-50%, -50%); transition:var(--transition-custom);}
.main-market-wrap .market-item .txt-box{position: absolute; left:0; bottom:0; width:100%; height:9rem; display: flex; align-items:center; padding:0 4rem; box-sizing:border-box; z-index:2;}
.main-market-wrap .market-item .txt-box .tit{position: relative; display: flex; align-items:Center; z-index:9}
.main-market-wrap .market-item .txt-box .tit strong{font-size:2rem; letter-spacing:-0.05em; color:#fff; font-weight:700; margin-left:1.5rem;}
.main-market-wrap .market-item .txt-box .btn-box{position: absolute; left:0; bottom:0; width:100%; height:100%; padding:0 3rem; box-sizing:border-box; background:var(--sub-color); display: flex; align-items: center; justify-content: flex-end; transform:translateY(100%); transition:var(--transition-custom);}
.main-market-wrap .market-item .txt-box .btn-box p{font-size:1.3rem; letter-spacing:-0.025em; color:#fff; font-weight:700;}
.main-market-wrap .market-item .txt-box .btn-box p i{margin-left:0.5rem;}

.main-market-wrap .market-item a:hover .img-box:before{opacity:1;}
.main-market-wrap .market-item a:hover .img-box img{}
.main-market-wrap .market-item a:hover .txt-box .btn-box{transform:translateY(0%);}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:-100px;
    opacity: 1;
    transform: translate3d(0,0,0);
}
.page-on #fp-nav{left:50px; transition:var(--transition-custom2);}
#fp-nav ul li{position:relative; width:2rem; margin:3rem 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; }
#fp-nav ul li a span{display:block; width:2rem; height:0.4rem; background-color:var(--sub-color); opacity:0.5; transition:var(--transition-custom);}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	left:2rem; top:-0.8rem; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:1.4rem; 
	color:var(--main-color); 
	margin-left:5px; 
	text-align:left; 
	transition:var(--transition-custom);
	font-weight:600;
}
#fp-nav ul li .fp-tooltip span{display:block; /* transform:translateX(100%); */ transition:var(--transition-custom);}
#fp-nav ul li a.active span{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;}
#fp-nav ul li a.active span{transform:rotate(-45deg); background-color:var(--main-color);}