@charset "utf-8";

/* 공통 */
#header{opacity:0; top:-200px; transition:top 1.1s ease-out 0.3s, opacity 0.5s ease-out 0.3s; will-change:top;}
#header.is-motion{opacity:1; top:0;}

[data-main]{padding:135px 0;}
[data-main] h2{margin-bottom:40px; font-size:40px; font-weight:500; letter-spacing:-0.5px;}
.title-sub{font-family:var(--font-eng); font-size:18px; font-weight:500; color:var(--color-point); letter-spacing:1px;}
.more-btn{position:absolute; right:20px; top:50px; font-size:17px; font-weight:500; color:#999; transition:color 0.3s ease;}
.more-btn:after{content:''; display:block; height:1px; background:#999; transition:background 0.3s ease;}
.more-btn:hover{color:var(--color-point);}
.more-btn:hover:after{background:var(--color-point);}
[data-main] .title_h2{display:flex; justify-content:space-between; align-items:center; margin-bottom:60px;}
[data-main] .title_h2 h2{margin-bottom:0; font-family:var(--font-eng); font-weight:600;}
[data-main] .title_h2 h2 + p{margin:auto auto 15px 50px; font-size:16px; color:#999;}
	/* 슬라이드 컨트롤 */
[data-main] .swiper-control .swiper_page{display:flex; justify-content:center; align-items:center; width:auto; margin-top:35px;}
[data-main] .swiper-pagination-bullet{opacity:1; width:14px; height:14px; box-sizing:border-box; background-color:#b5b5b5; border:1px solid #b5b5b5; border-radius:100%;}
[data-main] .swiper-pagination-bullet-active{background-color:#fff;}
:is([data-main], .visual-main) .swiper-control{display:flex; align-items:center; gap:10px;}
:is([data-main], .visual-main) .swiper-control button{--sizeBtn:70px; opacity:0.4; flex:none; display:flex; justify-content:center; align-items:center; position:relative; width:var(--sizeBtn); height:var(--sizeBtn); box-sizing:border-box; background-color:transparent; border-radius:100%; font-size:0; transition:opacity 0.3s ease 0s;}
:is([data-main], .visual-main) .swiper-control button:before{content:''; display:block; width:38px; height:24px; background:url(../images/main/slide_arrow.svg) no-repeat 50% 50%; background-size:100% auto;}
:is([data-main], .visual-main) .swiper-control button:after{content:''; opacity:0; display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #111; border-radius:100%; transform:scale(0.5); transition:0.3s ease; transition-property:opacity, transform;}
:is([data-main], .visual-main) .swiper-control button.swiper_prev{transform:rotate(180deg);}
:is([data-main], .visual-main) .swiper-control button.swiper_next{}
:is([data-main], .visual-main) .swiper-control button:hover{opacity:1;}
:is([data-main], .visual-main) .swiper-control button:hover:after{opacity:1; transform:scale(1);}
:is([data-main], .visual-main) .swiper-control button.swiper-button-lock{display:none;}
:is([data-main]) .swiper-pagination{--swiper-pagination-progressbar-size:3px; position:relative; margin-right:40px;}
:is([data-main]) .swiper-pagination-progressbar{background-color:rgba(0,0,0,0.15);}
:is([data-main]) .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color:#000;}
	/* 공통 - 반응형 */
@media screen and (max-width:1024px){
	[data-main]{padding:100px 0;}
	[data-main] h2{margin-bottom:30px; font-size:35px;}
	.more-btn{top:45px;}
}
@media screen and (max-width:768px){
		/* 슬라이드 컨트롤 */
	:is([data-main], .visual-main) .swiper-control button{--sizeBtn:60px;}
	:is([data-main], .visual-main) .swiper-control button:before{width:30px;}
}
@media screen and (max-width:640px){
	[data-main] .title_h2{flex-direction:column; justify-content:center;}
	[data-main] .title_h2 h2 + p{margin:10px auto 30px;}
	[data-main] .title_h2 h2{font-size:45px;}
}
@media screen and (max-width:580px){
	[data-main] h2{font-size:30px;}
	.title-sub{font-size:16px;}
	.more-btn{top:35px; font-size:15px;}
		/* 슬라이드 컨트롤 */
	:is([data-main], .visual-main) .swiper-control button{--sizeBtn:50px;}
	:is([data-main], .visual-main) .swiper-control button:before{width:24px;}
	:is([data-main]) .swiper-pagination{margin-right:10px;}
}
@media screen and (max-width:390px){
	[data-main] h2{font-size:6.41vw/* 25px */;}
	.title-sub{font-size:15px;}
	.more-btn{top:6.41vw/* 25px */; font-size:13px;}
}
@media screen and (max-width:320px){
	[data-main]{padding:80px 0;}
}

/* 비쥬얼 */
.visual-main{overflow:hidden; position:relative; padding:0 var(--page-pad);}
.visual-main .inr{display:flex; justify-content:space-between; align-items:flex-end; position:absolute; left:50%; bottom:80px; z-index:10; width:1625px; margin:0 auto; transform:translateX(-50%);}
.visual-main__list{position:relative; transform:scale(1.07); transition:transform 1.1s ease-out 0s;}
.visual-main__list .box{--sizeHig:40.885vw/* 785px */; overflow:hidden; display:block; position:relative;}
.visual-main__list .box .img{display:flex; justify-content:center; height:var(--sizeHig);}
.visual-main__list .box .img img{object-fit:cover; max-width:100%; width:100%; height:100%;}
.visual-main__list .box .mob{display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.visual-main__list .swiper_page{display:flex; align-items:center; gap:10px; position:absolute; left:50%; bottom:20px; z-index:50; width:auto; transform:translateX(-50%);}
.visual-main__list .swiper_page .swiper-pagination-bullet{opacity:1; width:50px; height:6px; border-radius:50px; background-color:#f6f2ef; transition:background 0.5s ease;}
.visual-main__list .swiper_page .swiper-pagination-bullet-active{background-color:#c18046;}
.visual-main .swiper-control{opacity:0; transition:opacity 0.5s ease 0s;}
.visual-main .swiper-control button{opacity:1; background-color:rgba(255,255,255,0.3); transition:background 0.3s;}
.visual-main .swiper-control button:after{display:none;}
.visual-main .swiper-control button:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.21 23.309'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23fff;stroke-miterlimit:10;stroke-width:2.3px;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cline class='cls-1' y1='11.655' x2='33.215' y2='11.655'/%3E%3Cpath class='cls-2' d='M21.56,23.309c.889-6,5.665-10.743,11.128-13.058v2.808C27.224,10.749,22.44,6,21.56,0A26.822,26.822,0,0,0,33.741,10.251l3.469,1.407-3.469,1.4A26.718,26.718,0,0,0,21.56,23.309Z'/%3E%3C/svg%3E");}
.visual-main .swiper-control button:hover{background-color:rgba(255,255,255,0.7);}
.visual-main__text{color:var(--color-white); font-weight:700; font-size:30px;}
.visual-main__text p{font-size:50px;}
.visual-main__text em,
.visual-main__text p{opacity:0; display:block; transform:translateY(30px); transition:0.5s cubic-bezier(0.2, 0.43, 0.47, 0.8) 0s; transition-property:opacity, transform;}
	/* 비쥬얼 motion */
.visual-main.is-motion .visual-main__list{transform:scale(1);}
.visual-main.is-motion .visual-main__text em,
.visual-main.is-motion .visual-main__text p{opacity:1; transform:translateY(0px);}
.visual-main.is-motion .visual-main__text em{transition-delay:0.3s;}
.visual-main.is-motion .visual-main__text p{transition-delay:0.45s;}
.visual-main.is-motion .swiper-control{opacity:1; transition-delay:0.5s;}
	/* 비쥬얼 - 반응형 */
@media screen and (min-width:1921px){
	.visual-main__list .box img{object-fit:cover; width:100%; height:100%;}
}
@media screen and (max-width:1800px){
	.visual-main .inr{display:block; left:var(--page-pad); bottom:0; width:calc(100% - (var(--page-pad) * 2)); transform:translateX(0);}
	.visual-main .swiper-control,
	.visual-main__text{position:absolute; bottom:80px;}
	.visual-main .swiper-control{right:var(--page-pad);}
	.visual-main__text{left:var(--page-pad);}
}
@media screen and (max-width:1300px){
	.visual-main__list .box{--sizeHig:60.385vw/* 785px */;}
}
@media screen and (max-width:1024px){
	.visual-main{margin-top:0;}
	.visual-main__text{font-size:23px;}
	.visual-main__text p{font-size:40px;}
	.visual-main .swiper-control, 
	.visual-main__text{bottom:50px;}
}
@media screen and (max-width:768px){
	.visual-main__list .box{--sizeHig:95.964vw/* 737px */;}
	.visual-main__text{font-size:20px;}
	.visual-main__text p{font-size:35px;}
	.visual-main .swiper-control{position:static;}
	.visual-main .swiper-control button{position:absolute; left:5px; bottom:47.982vw;}
	.visual-main .swiper-control button.swiper_next{right:5px; left:auto;}
}
@media screen and (max-width:580px){
	.visual-main__list{transform:scale(1.1);}
	.visual-main.is-motion .visual-main__list{transform:scale(1);}
	.visual-main__text{font-size:3.103vw/* 18px */;}
	.visual-main__text p{font-size:5.172vw/* 30px */;}
}
@media screen and (max-width:420px){
	.visual-main__list{transform:scale(1.15);}
	.visual-main.is-motion .visual-main__list{transform:scale(1);}
}

/* 공간디자인 갤러리 */
[data-main="gallery"] .inr_1500{position:relative;}
[data-main="gallery"] .none_data{padding:50px 20px; border-bottom-width:0; background-color:#f5f5f5; color:#999;}
.gallery-main__list .img,
.gallery-main__list .swiper-slide{width:480px;}
.gallery-main__list .img{overflow:hidden; display:block; aspect-ratio:24/17;}
.gallery-main__list .img img{object-fit:cover; width:100%; height:100%; transition:transform 0.7s ease;}
.gallery-main__list .box{display:block; position:relative;}
.gallery-main__list .box:before{content:'EXPLORE'; opacity:0; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.3); color:#fff; font-weight:600; transition:opacity 0.3s ease;}
.gallery-main__list .box:hover:before{opacity:1;}
.gallery-main__list .box:hover .img img{transform:scale(1.08);}
[data-main="gallery"] .swiper-control button{--sizeBtn:60px;}
[data-main="gallery"] .swiper-control{gap:3px; margin-top:30px;}
	/* 공간디자인 갤러리 - 반응형 */
@media screen and (max-width:1024px){
	.gallery-main__list .swiper-slide{width:auto;}
	.gallery-main__list .img{width:100%;}
}
/* product items */
[data-main="product"]{background:url(../images/main/product_bg.jpg) no-repeat 50% 50%; background-size:cover;}
[data-main="product"] .inr_1500{position:relative;}

/* 특별한이벤트 */
[data-main="event"] .inr_1500{position:relative;}
/* 
.event-main__list .swiper-wrapper{counter-reset:title;} 
.event-main__list .box .conts:before{counter-increment:title; content:"Event. " counters(title , "", decimal-leading-zero); font-family:var(--font-eng); font-size:18px; color:#ccc;}
*/
.event-main__list .box{display:flex; justify-content:space-between; align-items:stretch; gap:10px 25px;}
.event-main__list .box .img,
.event-main__list .box .conts{flex:1 1 50%;}
.event-main__list .box .img{order:2; overflow:hidden; aspect-ratio:9/7;}
.event-main__list .box .img img{object-fit:cover; width:100%; height:100%; transition:transform 0.7s ease;}
.event-main__list .box .conts{order:1; display:flex; flex-direction:column; justify-content:space-between; padding:30px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; transition:border 0.3s;}
.event-main__list .box .conts strong{margin-top:auto; margin-bottom:15px; font-size:20px; font-weight:600; color:#333; line-height:1.3; display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; transition:color 0.3s;}
.event-main__list .box .conts p{height:3em; font-size:16px; color:#666; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.event-main__list .box .conts i{font-family:var(--font-eng); font-size:18px; color:#ccc;}
.event-main__list .box:hover .conts strong{color:var(--color-point);}
.event-main__list .box:hover .img img{transform:scale(1.08);}
[data-main="event"] .swiper-control button{--sizeBtn:60px;}
[data-main="event"] .swiper-control{gap:3px; margin-top:30px;}
	/* 특별한이벤트 - 반응형 */
@media screen and (max-width:1300px){
	.event-main__list .box{flex-wrap:wrap; gap:0 25px;}
	.event-main__list .box .img,
	.event-main__list .box .conts{flex:0 1 100%;}
	.event-main__list .box .img{order:1;}
	.event-main__list .box .conts{order:2; border-top-width:0;}
	.event-main__list .box .conts strong{margin-top:20px}
}
@media screen and (max-width:580px){
	.event-main__list .box .conts{padding:20px 0px;}
	.event-main__list .box .conts strong{margin-top:10px; margin-bottom:5px; font-size:18px;}
	.event-main__list .box .conts p{font-size:14px;}
	.event-main__list .box .conts i{font-size:16px;}
}