@charset "utf-8";

/* ******************  메인 레이아웃(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:visible; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff; /* border-radius: 96rem / 120px; border-top-right-radius: 0; border-top-left-radius: 0; */}
#mainVisual:before{position: absolute; content:''; background:no-repeat center bottom; background-size:cover; background-image:url('../images/main/main_visual_bottom_bg.png'); width:100%; height:43.75vw; bottom:0; z-index:8; transform:translateY(calc(100% - 12.5vw));}
/* #mainContent1:before{position: absolute; content:''; background:no-repeat center bottom; background-size:cover; background-image:url('/images/main/main_bg01.png'); width:94.5rem; height:74.5rem; top:-120px; right:0; z-index:9;} */

.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;
	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-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:9.6rem; font-weight:800; letter-spacing:-0.065em; color:#fff; line-height:1.125; margin-bottom:0.7rem;}
.main-visual-txt-box .main-visual-txt2{font-size:3.6rem; line-height:1.5; font-weight:700; color:#fff; margin-bottom:1rem;}
.main-visual-txt-box .main-visual-txt3{font-size:1.8rem; letter-spacing:-0.05em; color:rgba(255,255,255,0.6); line-height:1.5;}
/* 메인 비주얼 :: 텍스트 :: 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 */
.slider-dots-box {position: absolute; top:50%; margin-top:17rem; display: flex; justify-content: center; align-items: center; z-index:9;}
.slider-dots {display: flex; justify-content: center; align-items: center;}
.slider-dots button {width: 26px; height: 26px; border-radius: 50%; display: block; border: 0; background-color: transparent; margin: 0 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; transition: .3s all; position: relative; z-index: 0; rotate:-80deg}
.slider-dots-box .slick-active button {width: 26px; height: 26px;}
.slider-dots button:after {content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255,255,255,0.3);}
.slider-dots-box .slick-active button:after {content: none; display: none;}
.slider-dots-box .slick-active button:before {content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; border: 3px solid rgba(255, 255, 255, 0.3); box-sizing:border-box; border-radius:50%;}
.slider-dots-box .slick-active button svg{position: absolute; top:0; left:0; overflow:visible}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 3px;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgb(255, 255, 255);
  stroke-width: 3px;
  stroke-linecap: round;
	animation: progress 24s;
	stroke-dasharray: 360px;
	stroke-dashoffset: 360;
}

@keyframes progress {
  from {
    stroke-dashoffset: 360;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:155px; right:2rem; z-index:9; transform: rotate(-90deg); z-index:100;}
.main-scroll-icon span{position: relative; display:block; color:rgba(255,255,255,0.6); font-size:1.2rem; letter-spacing:0.25em;}
.main-scroll-icon span:before{position: absolute; content:''; width:6rem; height:6rem; background:var(--main-color2); border-radius:6rem; left:0; top:50%; transform:translate(-50%, -50%); z-index:-1;}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{display: flex; align-items:center;}
.main-tit-box .main-tit{font-size:8.4rem; color:#222; margin-right:3.5rem;}
.main-tit-box .sub-tit-box{margin-top:2rem;}
.main-tit-box .sub-tit-box dt{font-size:2.4rem; color:var(--main-color); font-weight:700; line-height:1.25;}
.main-tit-box .sub-tit-box dd{font-size:2rem; color:#666; line-height:1.5;}
/* 공통 :: 슬릭 버튼 */
.slick-arrow{position: absolute; top:50%; transform:translateY(-50%); width:6rem; height:6rem; line-height:6.5rem; border-radius:6rem; box-shadow: 7px 7px 20px 0px rgba(0, 0, 0, 0.04); background:#fff; font-size:3.6rem; color:#aaa; z-index:9;}
.slick-arrow.slick-prev{left:-8rem;}
.slick-arrow.slick-next{right:-8rem;}
/* -------- 메인 컨텐츠 :: 컨텐츠1-------- */
.main-bs-con{position:relative; z-index:999}
.main-bs-con .bs-deco-txt{position:absolute; left:-30rem; top:15rem; font-weight:900; font-size:8rem; color:#f5f5f5; letter-spacing:0.08em; text-transform:uppercase; transform:rotate(-90deg)}
.main-product-list {position:relative; display:flex; flex-wrap:wrap; }
.main-product-list .main-product-item {position:relative; width:25%; overflow:hidden; }
.main-product-list .main-product-item a {display:block; width:100%; height:100%;}
.main-product-list .main-product-item .hover-img{display:block; position: relative; width:100%; overflow: hidden;}
.main-product-list .main-product-item .bg {display:block; position:relative; }
.main-product-list .main-product-item .bg img {width:100%; position:relative; z-index:-1;}
.main-product-list .main-product-item .bg .tit {position:absolute; left:0; bottom:0; padding:10%; width:100%;z-index:0; font-size:2.5rem; letter-spacing:0; font-weight:900; color:#fff; transition: all 0.4s; box-sizing: border-box; line-height:1.33}
.main-product-list .main-product-item .bg .tit span{position:relative; display:block}
.main-product-list .main-product-item .bg .tit .kr{font-weight:600}
.main-product-list .main-product-item .bg .tit i{position:absolute; right:0; bottom:3px; font-size:2.4rem}
@media all and (min-width:801px){
    .main-product-list .main-product-item:hover .bg .tit {opacity:0;filter:Alpha(opacity=0);}
}
.main-product-list .main-product-item .overlay{position: absolute; overflow:hidden; z-index: 0; width:100%; height:100%; top:0; left:0; color:#fff; pointer-events: none; background: #be9c59;  -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg);}
.main-product-list .main-product-item .overlay .inner-box { position:absolute; width:100%; top:0; left:0; padding:14% 12.5% 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
 .main-product-list .main-product-item .overlay .tit{display:block; font-weight:900; font-size:2.5rem; letter-spacing:0; color:#fff; line-height:1.15}
 .main-product-list .main-product-item .overlay .tit .kr{font-weight:600}
 .main-product-list .main-product-item .overlay .txt {font-size: 1.6rem; letter-spacing:-0.021em; color:#fff; opacity:0.5; line-height:1.75em; margin-top:2rem; font-weight:400}
 .main-product-list .main-product-item .overlay .learn-more{position:absolute; bottom:13%; left:12.5%; font-weight:400; font-size:1.4rem; letter-spacing:0;}
 .main-product-list .main-product-item .overlay .learn-more i{font-size:2.4rem; vertical-align:middle; margin-right:1rem; margin-top:-2px}

@-webkit-keyframes in_top {
 from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_top {
 from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}
@-webkit-keyframes in_right {
  from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes in_right {
 from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@-webkit-keyframes in_bottom {
  from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_bottom {
  from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}
@-webkit-keyframes in_left {
 from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes in_left {
  from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
@-webkit-keyframes out_top {
 from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes out_top {
 from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@-webkit-keyframes out_right {
 from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes out_right {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@-webkit-keyframes out_bottom {
  from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(100%);
    }
}
@keyframes out_bottom {
  from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(100%);
    }
}
@-webkit-keyframes out_left {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes out_left {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
 
/* in */
.in-top .overlay{
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: in_top .3s ease forwards;
  -o-animation: in_top .3s ease forwards;
  animation: in_top .3s ease forwards;
}
.in-right .overlay{
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: in_right .3s ease forwards;
  -o-animation: in_right .3s ease forwards;
  animation: in_right .3s ease forwards;
}
.in-bottom .overlay{
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: in_bottom .3s ease forwards;
  -o-animation: in_bottom .3s ease forwards;
  animation: in_bottom .3s ease forwards;
}
.in-left .overlay{
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: in_left .3s ease forwards;
  -o-animation: in_left .3s ease forwards;
  animation: in_left .3s ease forwards;
}
/* out */
.out-top .overlay{
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: out_top .3s ease forwards;
  -o-animation: out_top .3s ease forwards;
  animation: out_top .3s ease forwards;
  margin-top:-1px;
}
.out-right .overlay{
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: out_right .3s ease forwards;
  -o-animation: out_right .3s ease forwards;
  animation: out_right .3s ease forwards;
  margin-left:1px;
}
.out-bottom .overlay{
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: out_bottom .3s ease forwards;
  -o-animation: out_bottom .3s ease forwards;
  animation: out_bottom .3s ease forwards;
  margin-top:1px;
}
.out-left .overlay{
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: out_left .3s ease forwards;
  -o-animation: out_left .3s ease forwards;
  animation: out_left .3s ease forwards;
  margin-left:-1px;
}                    






/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:50px;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:20px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:6px; height:6px; background-color:#fff; border-radius:50%; opacity:0.2;filter:Alpha(opacity=20); margin:auto; margin-right:1px;}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	transition:var(--transition-custom);
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s; }
#fp-nav ul li a.active span{opacity:1.0; width:12px; height:12px;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

/* Black Style */
#fp-nav.black ul li a span{background-color:#bcbcbc; opacity:1;}
#fp-nav.black ul li a.active span{background-color:var(--main-color2);}
#fp-nav.black ul li .fp-tooltip{color:#222;}