@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2025-11-24
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1280px ) 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; 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;
	align-items:center;
	justify-content: space-between;
	height:100%;
	padding-bottom: 10rem !important;
    box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-search-inner{
	opacity:0; 
}
.main-visual-txt-inner{width: 64rem;}
.main-visual-txt-box .main-visual-txt1{font-size:1.8rem; font-weight:300; color:#fff;}
.main-visual-txt-box .main-visual-txt1.splitting .word{line-height: 1.3;}
.main-visual-txt-box .main-visual-txt2{margin-top: 1.5rem; font-size:6rem; line-height: 1.26; letter-spacing:-0.05em; font-weight: 600; color:#fff;}
.main-visual-txt-box .main-visual-txt2 b{font-weight: 600; color: #dfbda1;}

.main-visual-search-inner{max-width: 85rem; width: calc(100% - 64rem);}
.main-visual-search-inner .main-search-box {position: relative; height: 10rem; background-color: #fff; border: 0.8rem solid #e4b894; box-sizing: border-box; border-radius: 10rem;}
.main-visual-search-inner .main-search-form {padding: 0 2.5rem; width: 100%; height: 100%; box-sizing: border-box;}
.main-visual-search-inner .main-search-word {padding-right: 6rem;	width: 100%; height: 100%; border: 0; background-color: transparent; text-indent: 3rem; font-size: 2.1rem; font-weight: 400; letter-spacing: -0.04em; color: #515151; border-radius: 10rem;}
.main-visual-search-inner .main-search-word:focus {outline: none;}
.main-visual-search-inner .main-search-btn {position: absolute; right: 2.5rem; top: -0.8rem; width: 6rem; height: 10rem;}
.main-visual-search-inner .main-search-btn i {font-size: 4rem; color: #000;}

.main-visual-search-inner .search-keywords-box{margin-top: 4.5rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.main-visual-search-inner .search-keywords-box .tit{margin-right: 2rem; font-size: 2.2rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 700; color: #fff;}
.main-visual-search-inner .search-keywords-box button{margin-right: 0.8rem; margin-bottom: 0.8rem; padding: 0 1.5rem; font-size: 1.9rem; line-height: 4.6rem; letter-spacing: -0.025em; font-weight: 500; color: #fff; border: 1px solid rgba(255,255,255,0.7); border-radius: 2.6rem; box-sizing: border-box;  transition:var(--transition-custom); transition-property:background-color, border-color;}
.main-visual-search-inner .search-keywords-box button:last-child{margin-right: 0;}
.main-visual-search-inner .search-keywords-box button.selected{background-color: var(--main-color); border-color: var(--main-color);}

/* 메인 비주얼 :: 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);
	}
}

/* 메인 비주얼 :: 화살표 */
.main-visual-controls{position:absolute; bottom: 10%; left: 0; width: 100%; z-index: 1; opacity:0; transition: bottom 1s ease-in-out, opacity 1s ease-in-out;}
.main-visual-controls .arrow-prev,
.main-visual-controls .arrow-next{width: 8.6rem; height: 8.6rem; font-size: 2.5rem; color: #fff; border: 2px solid rgba(255,255,255,0.92); border-radius: 100%; box-sizing: border-box;}
.main-visual-controls .arrow-prev{border-color: rgba(255,255,255,0.6);}
.main-visual-controls .arrow-next{margin-left: 1rem;}
.main-visual-controls .arrow-prev i,
.main-visual-controls .arrow-next i{transition:var(--transition-custom); transition-property: transform;}
.main-visual-controls .arrow-prev i{transform: rotate(180deg);}
.main-visual-controls .arrow-prev:hover i{transform: translateX(-5px) rotate(180deg);}
.main-visual-controls .arrow-next:hover i{transform: translateX(5px);}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; z-index:9; bottom: 10%; left:50%; margin-left: 74.8rem; transform:translateX(-50%); opacity:0; transition: bottom 1s ease-in-out, opacity 1s ease-in-out;}
.main-scroll-icon .bar{display: block; position: relative; width:0.4rem; height:12.8rem; overflow:hidden; margin:auto; border-radius:0.4rem; background: rgba(242,242,242,0.3);}
.main-scroll-icon .bar em{position: absolute; display: block; width:100%; height:100%; animation: upDown 1.5s ease-in-out infinite; background: transparent linear-gradient(180deg, #38383800 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; /* opacity:0.68; */ border-radius:0.4rem;}
.main-scroll-icon i{margin-top: 0.5rem; display:block; font-size:2.1rem; color:#fff;}
@keyframes upDown {
	0% {
		transform:  translateY(-100%);
	}
	100% {
		transform:  translateY(100%);
	}
}


/* index-active */
.index-active .main-visual-txt1,
.index-active .main-visual-txt2,
.index-active .main-visual-search-inner{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.index-active .main-visual-txt1{animation-delay:0.1s;}
.index-active .main-visual-txt2{animation-delay:0.3s;}
.index-active .main-visual-search-inner{animation-delay:0.5s;}
.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;}
.index-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;}

.index-active .main-visual-controls,
.index-active .main-scroll-icon {bottom: 21.5%; opacity: 1; transition-delay:0.5s;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size: 7.5rem; line-height: 1.1; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-tit-box .main-sub-tit{display:block; margin-top:1rem; font-size:1.62rem; line-height: 1.57; letter-spacing: -0.05em; font-weight:400; color: rgba(255,255,255,0.78);}
.cm-button-style{margin-top: 3.5rem; padding: 0 2rem; height:4.8rem; line-height:4.8rem; background-color:var(--main-color); border:2px solid var(--main-color); font-size:1.55rem; letter-spacing: -0.05em; font-weight: 500; color: #fff; text-align:center; border-radius: 4.8rem; position:relative; overflow:hidden; display:inline-block; vertical-align:middle; transition:all 0.3s;}
.cm-button-style span{position:relative; z-index:1; left:0px; color:#fff; transition:left 0.4s;}
.cm-button-style:before{display:block; position:absolute; top:0px; left:-130%; content:""; width:130%; height:100%; background:#fff; border-radius: 0 20px 20px 0; opacity:0;filter:Alpha(opacity=0); transition:all 0.3s;}
.cm-button-style i{margin-left:1rem; margin-top: -0.2rem; font-size: 2rem; vertical-align:middle;}
.cm-button-style:hover span{color:var(--main-color); left:1.5rem;}
.cm-button-style:hover:before{left:0px; opacity:1.0;filter:Alpha(opacity=100);}
 
.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);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainDataCon{position: relative; width: 100%; height: 100vh; pointer-events: auto !important;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

#mainDataCon .area{position: relative;}
#mainDataCon .main-tit-box{width: 41.5rem;}

/* 메인 갤러리 :: Swiper Controls */
.main-data-controls {margin-top: 5rem; display:flex; align-items:center;}
.main-data-controls .arrow-prev,
.main-data-controls .arrow-next{width: 8.6rem; height: 8.6rem; font-size: 2.5rem; color: #fff; border: 2px solid rgba(255,255,255,0.92); border-radius: 100%; box-sizing: border-box;}
.main-data-controls .arrow-next{margin-left: 1rem;}
.main-data-controls .arrow-prev i,
.main-data-controls .arrow-next i{transition:var(--transition-custom); transition-property: transform;}
.main-data-controls .arrow-prev{border-color: rgba(255,255,255,0.6);}
.main-data-controls .arrow-prev i{transform: rotate(180deg);}
.main-data-controls .arrow-prev:hover i{transform: translateX(-5px) rotate(180deg);}
.main-data-controls .arrow-next:hover i{transform: translateX(5px);}

.main-data-con{position: absolute; top: 50%; left: 50%; margin-left: calc(-1 * (var(--area-width)/2) + 41.5rem); transform: translateY(-50%); width: calc(50% + 41.5rem); z-index: 1;}
.main-data-container{padding: 3rem 0 !important;}
.main-data-list{display: flex;}
.main-data-item{width: 33.33%;}
.main-data-item a{display: block; width: 100%; border-radius: 1.5rem; overflow: hidden; transition:var(--transition-custom); transition-property:box-shadow;}
.main-data-img{position: relative; width: 100%; height: 0; padding-top: 67.06%; border-radius: 1.5rem 1.5rem 0 0; overflow: hidden;}
.main-data-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-data-txt{padding: 3.5rem 2.5rem 6.5rem; position: relative; background-color: #fff;}
.main-data-txt .category{position: absolute; top: -2.4rem; right: 1.5rem; font-size: 1.55rem; color: #fff; width: 4.8rem; height: 4.8rem; background-color: #d0a57b; border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.main-data-txt .tit{font-size: 2rem; line-height: 1.3; letter-spacing: -0.045em; font-weight: 500; color: #000;}
.main-data-txt .txt{margin-top: 2rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 500; color: #797979;}

.main-data-item.swiper-slide-active,
.main-data-item.swiper-slide-active + .main-data-item,
.main-data-item.swiper-slide-active + .main-data-item + .main-data-item,
.main-data-item.swiper-slide-active + .main-data-item + .main-data-item + .main-data-item{opacity: 0; transform: translateY(5rem); position: relative;  transition-property: transform, opacity; transition:var(--transition-custom2);}
/* 효과 */
.active-effect .main-data-item.swiper-slide-active,
.active-effect .main-data-item.swiper-slide-active + .main-data-item,
.active-effect .main-data-item.swiper-slide-active + .main-data-item + .main-data-item,
.active-effect .main-data-item.swiper-slide-active + .main-data-item + .main-data-item + .main-data-item{opacity: 1; transform: translateY(0)}
.active-effect .main-data-item.swiper-slide-active{transition-delay:0.3s;}
.active-effect .main-data-item.swiper-slide-active + .main-data-item{transition-delay:0.45s;}
.active-effect .main-data-item.swiper-slide-active + .main-data-item + .main-data-item{transition-delay:0.6s;}
.active-effect .main-data-item.swiper-slide-active + .main-data-item + .main-data-item + .main-data-item{transition-delay:0.75s;}

@media all and ( min-width: 801px ){
	.main-data-item a:hover{box-shadow: 1.6rem 1.6rem 1.8rem -0.8rem rgba(0,0,0,0.44);}
}