@charset "utf-8";
/* 팝업레이어 */
#hd_pop {z-index:9999;position:relative;margin:0 auto;height:0; }
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff; word-break: keep-all; width: 600px!important; }
.hd_pops img {max-width: 600px !important; }
.hd_pops_con { box-sizing:border-box; position: relative; font-size: 1.65rem; line-height: 1.4; }
.hd_pops_footer {padding: 0;background:#000;color:#fff;text-align:left;position:absolute; bottom: 0; width: 600px; height: 40px;}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding: 10px;border:0;color:#fff; font-size: 1.0em;}
.hd_pops_footer .hd_pops_reject{background:#000;text-align:left; font-size: 1.0em;}
.hd_pops_footer .hd_pops_close{background:#393939;position:absolute;top:0;right:0; font-size: 1.0em;}
/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

@media screen and (max-width:976px) {
.hd_pops { position: absolute; left:0 !important; max-width:320px; }
.hd_pops img{max-width: 320px !important;}
.hd_pops_footer { width: 320px; height: 35px; }
.hd_pops_con { }
}


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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; min-height: 800px; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff; }
.main-visual-txt-inner { margin-top: 10rem;}
.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: 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-txt2,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt2{display: block; font-size:2.6rem; font-weight:400; letter-spacing:-0.015em; color:#fff; margin-bottom:0.5rem; line-height:1.25;}
.main-visual-txt-box .main-visual-txt1{display: block; font-size:8.5rem; font-weight:500; letter-spacing:-0.025em; color:#fff; margin-bottom:31rem; line-height:1.0;}
.main-visual-txt-box .main-visual-txt1 span{line-height:0.9!important;}
.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:20rem; height:8.4rem; background:var(--sub-color); padding:2rem; box-sizing:border-box; overflow:hidden; left:0; bottom:5rem; border-radius: 5px;}
.main-visual-txt-box .main-visual-more-btn .txt{position: relative; font-size:1.8rem; letter-spacing:-0.025em; color:#fff; font-weight:700; z-index:9;}
.main-visual-txt-box .main-visual-more-btn .txt0 { position: relative; font-size:1.6rem; letter-spacing:-0.025em; color:#fff; font-weight:500; margin-bottom: 1rem; 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; top: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:60%; 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:2.2rem;}
.main-sub-tit {font-size:2.4rem; letter-spacing:-0.055em; color:#262626; font-weight:400; line-height: 1.3; margin-bottom: 0.5rem; }
.main-tit{font-size:6.8rem; letter-spacing:-0.025em; color:var(--main-color); font-weight:600; line-height: 0.9; margin-right:2.5rem;}
.main-txt{font-size:1.7rem; letter-spacing:-0.055em; color:#262626; font-weight:400; line-height: 1.3; }

.main-tit.cm-word-split-JS.splitting .word{line-height:0.9;}
.main-txt.cm-word-split-JS.splitting .word{line-height:1.8; }
.main-sub-tit .char,
.main-tit.splitting .char,
.main-txt.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* transition일때 */ 
.active-section .main-sub-tit.splitting .char,
.animated .main-sub-tit.splitting .char,
.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;
}
 /******************* 메인컨텐츠 1**********************/
/* -------- 메인 컨텐츠 :: 공통영역 -------- */
.cm-button-style09 {margin-top: 40px; position: relative; display: inline-block; padding: 0 40px; opacity:0; transform:translateY(100%); transition:opacity 0.8s, transform 2.5s; }
.animated .cm-button-style09{opacity:1.0; transform:translateY(0);}
.cm-button-style09:before {content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 74px; background: #f2f2f2; width: 74px; height: 74px; transition: all 0.3s ease;}
.cm-button-style09 span {position: relative; font-size: 16px; line-height: 74px; font-weight: 600; letter-spacing: -0.25px; color: #333; display: inline-block; vertical-align: middle; transition: all 0.3s ease;}
.cm-button-style09 i {position: relative; top: -3px; margin-left: 30px; font-size: 30px; color: #333; display: inline-block; vertical-align: middle; transition: all 0.3s ease;}
.cm-button-style09:hover:before {width: 100%; background: #af964b;}
.cm-button-style09:hover span,
.cm-button-style09:hover i{color: #fff;}
#mainAboutContent{ position:relative; padding:8rem 0;}
#mainAboutContent .area-sub {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.main-about-img-con { width: 55%;}
.main-about-img-con img {width: 100%; box-shadow: 18px 18px 30px -9px rgba(0, 0, 0, 0.2); }
.main-cm-txt-con { width: 40%; padding-right: 5%;}
@keyframes wipe_in_out {
  0% {
    width: 100%;
    left: 0%;
  }

  100% {
    width: 0%;
    left: 100%;
  }
}

/* ******************  메인 2 ********************** */
#mainContent1{padding:8rem 0; background-color: #f8f8f8;}
.main-product-wrap{position: relative; width:100%; max-width:1400px;}
.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-pagination{position: absolute; bottom:3.5rem; width: 100%; z-index:18; display: flex;}
.main-product-pagination .pagination-btn{width:33.3333%; color:#fff; font-size:1.8rem; letter-spacing:-0.02em; font-weight:500; cursor: pointer; text-align: center;}

.main-product-pagination .pagination-bar{position: absolute; width:100%; height:3px; background:rgba(255,255,255,0.4);; border-radius:1.5px; top:-35px; left:0;}
.main-product-pagination .pagination-bar .bar{position: absolute; content:''; width:0; height:3px; background:#fff; border-radius:1.5px; top:0px; left:0; /* transition:width 3s; */}

/* ******************  메인 3 ********************** */
#mainContent2{padding:8rem 0;}
.main-market-wrap{position: relative; }
.main-market-wrap .market-item{position: relative; overflow:hidden; float: left; width:calc(33.33% - 0.8rem); margin-right: 1.2rem}
.main-market-wrap .market-item:last-child{margin-right: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 3rem; 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.2rem;}
.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%);}

/* ******************  메인 4 ********************** */
#mContactus {padding:9.5em 0; background:url('../images/main/mcontactus-bg.png') no-repeat 35% center; text-align:center; background-size:cover; }
#mContactus .main-tit, #mContactus .main-txt { color:#fff!important;}
#mContactus  .mBtn {margin-top:3em}
.mBtn {padding:0 2em; line-height:50px;  display:inline-block; background:#c6a582; opacity:0; transform:translateY(100%); transition:opacity 0.8s, transform 2.5s, all 0.8s ease-in-out; }
.animated .mBtn{opacity:1.0;transform:translateY(0);}
.mBtn p {padding-right:80px; font-size:1.4rem; color:#fff; font-weight:400; position:relative;}
.mBtn p:before {content:''; width:70px; height:7px; background:url('../images/main/mbtn-arrow.png')no-repeat; position:absolute; right:0; top:50%; margin-top:-3px}
.mBtn:hover { background:#222;}

@media all and (max-width:976px) {
	#mContactus {padding:6em 0; }
}