@charset "utf-8";

/* ui-overlay */
.ui-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: var(--view-height); background: #fff; z-index: 3002;
	transform: translate3D(-50%,0,0); opacity: 0; pointer-events: none; transition: 0.35s cubic-bezier(.47,0,.745,.715);

	& .item {
		display: flex; flex-wrap: wrap; width: 100%; height: 100%;

		& .util-btn {
			position: relative; flex: 0 0 auto; width: 126px; background: #4b4b4b;
			display: flex; flex-direction: column; justify-content: center;
			
			& .close {
				position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center;
				& button {
					position: relative; display: block; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; /* background: #666; */ font-size: 0;
					&:before,
					&:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 33%; height: 1px; background: #fff; border-radius: 2px;}
					&:after{transform: translate(-50%, -50%) rotate(45deg);}
				}
			}
			& .nav {
				flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
				& button{
					flex: 0 0 auto; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; text-align: center; background: #666;
					display: inline-flex; justify-content: center; align-items: center;
					& span{display: none;}
					
					&.overlay-prev:before{content: ""; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); 
						margin: 0 0 0 3px;}
					&.overlay-next:before{content: ""; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); 
						margin: 0 0 0 -3px;}
					
					&.swiper-button-disabled{opacity: 0.3; cursor: default; background: #666 !important;}

					&:hover{
						background: #999;
					}
				}
			}
		}

		& .con{
			flex: 1; min-width: 0; overflow: hidden; height: 100%;
			&.text {
				& .text-con {
					display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 60px 70px; overflow-y: auto;
					& .overlay-no{display: none; font-size: 18px; font-weight: 500; color: #888;}
					& .overlay-title{display: block; font-size: 18px; font-weight: 500; margin: 0 0 15px;}
					& .overlay-contents{display: block; font-size: 14px; font-weight: 400; color: #555; line-height: 1.5; min-height: 0;}
				}
			}
			&.thumbs {
				& img {width: 100%; height: 100%; object-fit: cover;}
			}
		}

		& .slide-list{
			flex: 1; min-width: 0; height: 100%; overflow: hidden;
			& > .list{}
			& .slide-item{
				& img{width: 100%; height: 100%; object-fit: cover;}
			}
		}
	}
	&.show{transform: translate3D(0,0,0);; opacity: 1; pointer-events: initial;}

    @media (width <= 1280px){
        & .item {
            & .util-btn{width: 110px;}
			& .con{
				&.text {
					& .text-con {padding: 7% 8%;}
				}
			}
		}
    }
	@media (width <= 1024px){
		& .item {
            flex-direction: column;
            & .util-btn{
                order: 3; flex: 0 0 auto; width: 100%;

                & .close{
                    right: 20px; left: auto; top: 50%; transform: translateY(-50%);
                }
                & .nav{
                    flex-direction: row; justify-content: center; padding: 10px 0;
                }
            }
			& .con{
				&.text {
					order: 2;
                    & .text-con{
                        padding: 30px 20px; justify-content: flex-start;
                        & .overlay-contents:after{content: "여백용"; display: block; width: 100%; height: 60px; font-size: 0;}
                    }
				}
                &.thumbs {
					order: 1; flex: 0 0 auto; width: 100%; height: 340px;
				}
			}
			& .slide-list{
				order: 1; width: 100%; overflow: hidden; min-height: 0; height: auto;
			}
		}
	}
	@media (width <= 768px){
        & .item{

            & .util-btn{
                & .close{
                    & button{width: 50px;}
                }
                & .nav{
                    & button{width: 50px;}
                }
            }
        }
	}
    @media (width <= 640px){
        & .item{
            & .con{
                &.thumbs{height: 200px;}
            }
        }
    }
}


/* empty-data */
.empty-data{
    padding: 30px; background: #f5f5f5; border-radius: 7px; text-align: center;
}


/* cursor-indicator */
.cursor-indicator{
	position: fixed; top: 0; left: 0; z-index: 100; width: 110px; height: 110px; pointer-events: none; transform: translate(0, 0);

	.cursor-indicator-inner{
		width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #333; font-size: 12px; font-weight: var(--fwsb); line-height: 1.4; display: flex; align-items: center; justify-content: center; white-space: nowrap; transform: scale(0); opacity: 0; transition: 0.3s; text-align: center;
	}
	&.on{
		& .cursor-indicator-inner {
			transform: scale(1);
			opacity: 1;
		}
	}
}


/* overflow-swiper */
.inner-lg:has(.overflow-swiper){}
.overflow-swiper {
	position: static; width: calc(100% + 140px);/*  width: calc(100% + ((100vw - 1780px) / 2)); */ margin: 0 0 0 -70px;
	
	& .list {}
	& .item {

		& > a {
			position: relative; display: block; aspect-ratio: 433 / 560; overflow: hidden;

			& .thumbs{
				position: absolute; top: 0; left: 0; width: 100%; height: 100%;

				& img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
			}

			&:hover{
				& .thumbs{
					& img{transform: scale(1.05);}
				}
			}

			& .txt{
				position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 30px 30px;
				& .name{font-size: 22px; font-weight: 500;}
				& .link{display: inline-flex; align-items: center; line-height: 1; font-size: 12px; font-weight: 400; padding: 0 0 4px; border-bottom: 1px solid #111;}
				& .link:after{content: ""; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 1px solid #111; border-right: 1px solid #111; transform: rotate(45deg); margin: 0 0 0 4px;}
				& .link span{}
			}
		}
		&.product-card-type2{
			& > a{
				aspect-ratio: initial;
				& .thumbs{position: relative; top: auto; left: auto; width: 100%; height: auto;}
			}
		}
	}
	& .control{
		position: relative; display: flex; flex-wrap: wrap; gap: 820px; justify-content: center; width: 100%; padding: 53px 0 0;

		& .btn-overflow-swiper{position: absolute; display: block; width: 36px; height: auto; aspect-ratio: 1 / 1; background-color: transparent; font-size: 0;}
		& .btn-overflow-swiper:before{content: ""; position: absolute; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 2px solid #111; top: 50%; left: 50%;}
		& .btn-overflow-swiper.btn-overflow-swiper-prev{right: calc(50% + 450px);}
		& .btn-overflow-swiper.btn-overflow-swiper-next{left: calc(50% + 450px);}
		& .btn-overflow-swiper.btn-overflow-swiper-prev:before{border-left: 2px solid #111; transform: translate(-30%, -50%) rotate(-45deg);}
		& .btn-overflow-swiper.btn-overflow-swiper-next:before{border-right: 2px solid #111; transform: translate(-70%, -50%) rotate(45deg);}

		& .text{
			position: static; text-align: center;
			& .tit{
				font-size: 20px; font-weight: 400;
				> span{opacity: 0; position: absolute; left: -999px; transition: opacity 0.6s ease-in;}
				> span.active{opacity: 1; position: static; left: auto;}
			}
			& .more-arr{margin-top: 29px;}
		}

		&.type2{
			display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; padding: 0 70px;
			position: absolute; z-index: 1; top: calc(50% - 35px); transform: translateY(-50%); left: 0; bottom: auto; right: auto; width: 100%; height: auto; pointer-events: none;
			& .btn-overflow-swiper{position: relative; top: auto; bottom: auto; left: auto; right: auto; display: block; width: 60px; height: auto; aspect-ratio: 1 / 1; background-color: #fff; font-size: 0; border-radius: 50%; pointer-events: initial; opacity: 0.5; transition: 0.2s;}
			& .btn-overflow-swiper:hover{opacity: 1;}
			& .btn-overflow-swiper:before{content: ""; position: absolute; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 2px solid #111; top: 50%; left: 50%;}
			& .btn-overflow-swiper.btn-overflow-swiper-prev{}
			& .btn-overflow-swiper.btn-overflow-swiper-next{}
			& .btn-overflow-swiper.btn-overflow-swiper-prev:before{border-left: 2px solid #111; transform: translate(-30%, -50%) rotate(-45deg);}
			& .btn-overflow-swiper.btn-overflow-swiper-next:before{border-right: 2px solid #111; transform: translate(-70%, -50%) rotate(45deg);}
		}
	}

	@media (width <= 1800px){
        width: calc(100% + 40px); margin: 0 0 0 -20px;
		& .control{
			
		}
    }
    @media (width <= 1280px){
        & .control{
			& .btn-overflow-swiper.btn-overflow-swiper-prev{right: calc(50% + 200px);}
			& .btn-overflow-swiper.btn-overflow-swiper-next{left: calc(50% + 200px);}
		}
    }
    @media (width <= 1024px) {
        
    }
    @media (width <= 860px){
        & .control{
			padding: 30px 0 0;
			& .btn-overflow-swiper.btn-overflow-swiper-prev{right: calc(50% + 120px);}
			& .btn-overflow-swiper.btn-overflow-swiper-next{left: calc(50% + 120px);}

			& .text{
				padding: 2px 0 0;
				& .tit{font-size: 24px;}
			}
		}
    }
    @media (width <= 640px) {
		& .item{
			& > a{
				& .txt{
					padding: 0 20px 25px;
					& .name{font-size: 18px;}
				}
			}
		}
		& .control{
			& .btn-overflow-swiper.btn-overflow-swiper-prev{right: calc(50% + 100px);}
			& .btn-overflow-swiper.btn-overflow-swiper-next{left: calc(50% + 100px);}

			& .text{
				padding: 3px 0 0;
				& .tit{font-size: 20px;}
				& .more-arr{margin-top: 20px;}
			}
		}
    }
}


/* overflow-type2-swiper */
.inner-lg:has(.overflow-type2-swiper){}
.overflow-type2-swiper {
	position: relative; width: calc(100% + 140px);/*  width: calc(100% + ((100vw - 1780px) / 2)); */ margin: 0 0 0 -70px;
	
	& .list {}
	& .item {
		& > a {
			position: relative; display: block; aspect-ratio: 896 / 480; overflow: hidden;

			& .thumbs{
				position: absolute; top: 0; left: 0; width: 100%; height: 100%;

				& img{width: 100%; height: 100%; object-fit: cover; transition: all 0.25s ease;}
			}

			&:hover{
				& .thumbs{
					& img{transform: scale(1.05);}
				}
			}

			& .txt{
				position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 30px 30px;
				& .name{font-size: 22px; font-weight: 500;}
				& .link{display: inline-flex; align-items: center; line-height: 1; font-size: 12px; font-weight: 400; padding: 0 0 4px; border-bottom: 1px solid #111;}
				& .link:after{content: ""; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 1px solid #111; border-right: 1px solid #111; transform: rotate(45deg); margin: 0 0 0 4px;}
				& .link span{}
			}
		}
	}
	& .control{
		position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 820px; justify-content: center; width: 100%;

		& .btn_of_type2_slide{position: relative; display: block; width: 36px; height: auto; aspect-ratio: 1 / 1; background-color: transparent; border-radius: 50%; font-size: 0;}
		& .btn_of_type2_slide:before{content: ""; position: absolute; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 2px solid #111; top: 50%; left: 50%;}
		& .btn_of_type2_slide.btn_of_type2_slide_prev{/* right: calc(50% + 410px); */}
		& .btn_of_type2_slide.btn_of_type2_slide_next{/* left: calc(50% + 410px); */}
		& .btn_of_type2_slide.btn_of_type2_slide_prev:before{border-left: 2px solid #111; transform: translate(-30%, -50%) rotate(-45deg);}
		& .btn_of_type2_slide.btn_of_type2_slide_next:before{border-right: 2px solid #111; transform: translate(-70%, -50%) rotate(45deg);}

		& .text{
			position: static; text-align: center;
			& .tit{font-size: 26px; font-weight: 500;}
			& .more-arr{margin-top: 18px;}
		}
	}

	& .dots{
		position: static !important; gap: 0; padding: 23px 0 0;
		& > li{
			& button{
				display: block !important; font-size: 26px; font-weight: 500; color: #111 !important;
				&:before{display: none;}
			}

			&:not(.swiper-pagination-bullet-active){display: none;}
		}
	}

	@media (width <= 1800px){
        width: calc(100% + 40px); margin: 0 0 0 -20px;
		& .control{
			padding: 24px 20px 0;
		}
    }
    @media (width <= 1280px){
        & .control{
			& .btn-social.btn-social-prev{right: calc(50% + 200px);}
			& .btn-social.btn-social-next{left: calc(50% + 200px);}
		}
    }
    @media (width <= 1024px) {
        
    }
    @media (width <= 860px){
        & .control{
			& .btn-social.btn-social-prev{right: calc(50% + 120px);}
			& .btn-social.btn-social-next{left: calc(50% + 120px);}

			& .text{
				padding: 2px 0 0;
				& .tit{font-size: 24px;}
			}
		}
    }
    @media (width <= 640px) {
        padding: 0 0 60px;
		& .item{
			& > a{
				& .txt{
					padding: 0 20px 25px;
					& .name{font-size: 18px;}
				}
			}
		}
		& .control{
			& .btn-social.btn-social-prev{right: calc(50% + 100px);}
			& .btn-social.btn-social-next{left: calc(50% + 100px);}

			& .text{
				padding: 3px 0 0;
				& .tit{font-size: 20px;}
			}
		}
    }
}


/*  */
& .room-swiper {
	position: relative; padding: 0 200px; 
	& .list{}
	& .item {
		display: flex; align-items: center; gap: 140px; 

		& .room-img {
			position: relative; flex: 0 0 auto; width: 480px; aspect-ratio: 480 / 600; overflow: hidden;
			&:before{content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #f9f9f9; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}

			& img {position: absolute; top: 0; left: 0; width: 0; height: 100%; object-fit: cover; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}

			&.on {
				&:before {width: 100%;}
				& img {width: 100%;}
			}
		}
		
		& .room-txt {
			flex: 1; min-width: 0;

			& .name{font-size: 32px; font-weight: 400; transform: translateY(40px); opacity: 0; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}
			& .desc {display: block; font-size: 14px; margin: 23px 0 30px; padding: 0 20px 0 0; transform: translateY(40px); opacity: 0; transition: all 0.4s 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); line-height: 1.6;}
			& .more-arr{transform: translateY(40px); opacity: 0; transition: all 0.4s 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);}
			
			&.on {
				& .name {transform: translateY(0); opacity: 1;}
				& .desc {transform: translateY(0); opacity: 1;}
				& .more-arr {transform: translateY(0); opacity: 1;}
			}
		}
	}
	& .item.swiper-slide-active{
		/* & .room-img{
			&:before {width: 100%;}
			& img {width: 100%;}
		}
		& .room-txt{
			> p {transform: translateY(0); opacity: 1;}
			& span {transform: translateY(0); opacity: 1;}
			& .more-arr {transform: translateY(0); opacity: 1;}
		} */
	}
	& .control{
		position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; display: flex; justify-content: space-between;

		& .btn-room{position: relative; display: block; width: 60px; height: auto; aspect-ratio: 1 / 1; background-color: rgba(166,166,167,0.1); font-size: 0; border-radius: 50%;}
		& .btn-room:before{content: ""; position: absolute; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 2px solid #111; top: 50%; left: 50%;}
		& .btn-room.btn-room-prev:before{border-left: 2px solid #111; transform: translate(-30%, -50%) rotate(-45deg);}
		& .btn-room.btn-room-next:before{border-right: 2px solid #111; transform: translate(-70%, -50%) rotate(45deg);}

		& .btn-room:hover{
			background-color: rgba(166,166,167,0.4);
		}
	}

	@media (width <= 1460px) {
        padding: 0 100px;
		& .item {gap: 60px;}
    }
    @media (width <= 1280px){
        & .item{
			gap: 30px;
			& .room-img{width: 460px;}
		}
    }
    @media (width <= 1024px) {
        & .item {
			& .room-img {width: 50%;}
		}
    }
    @media (width <= 860px) {
        padding: 0 60px;
		& .control{
			& .btn-room{width: 30px;}
		}
		& .item {
			flex-direction: column; gap: 30px;

			& .room-img {
				width: 100%; max-width: 460px; margin: 0 auto; height: auto; aspect-ratio: 1 / 1;
			}
			& .room-txt {
				width: 100%; text-align: center;
				& .name {font-size: 24px;}
				& .desc {margin: 15px 0 15px; padding: 0; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 70px;}
			}
		}
    }
    @media (width <= 640px) {
        padding: 0 40px;
		& .item {
			gap: 20px;
			& .room-txt{
				& .name {font-size: 22px;}
			}
		}
    }
}


/* 슬라이드 프로그레스 (제품 > 상세) */
.product-detail .dots,
.product-detail .dots{
    position: absolute; z-index: 1; top: auto; bottom: 50px; left: 0; width: 100%; display: flex; justify-content: center; gap: 16px;

    & li{
        width: auto; height: auto; background: none; opacity: initial; margin: 0;

        & button{
            position: relative; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #333;
            &:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #222;}

            & .title{display: none;}
            & svg.ring{
                width: 18px; height: 18px; transform: rotate(-90deg); border-radius: 50%; box-shadow: inset 0 0 0 2px transparent;

                & circle{fill: none; stroke-width: 4; opacity: 0;}
                & circle.ring-bg{stroke: transparent;}
                & circle.ring-progress{stroke: #000; stroke-dasharray: 100.5; stroke-dashoffset: 100.5;}
            }
        }

        &.swiper-pagination-bullet-active{

            & button{
                &:before{opacity: 0;}
                & svg.ring{
                    box-shadow: inset 0 0 0 2px #bbb;
                    & circle{opacity: 1;}
                    & circle.ring-progress{animation: ring 4.0s linear forwards;}
                    & circle.ring-progress.pause{animation-play-state: paused !important;}
                }
            }
        }
    }

    &.white{
        & li{
            & button{
                &:before{background-color: #fff;}
                & svg.ring{
                    & circle.ring-progress{stroke: #fff;}
                }
            }
            &.swiper-pagination-bullet-active{
                & button{
                    & svg.ring{
                        box-shadow: inset 0 0 0 2px #e1e1e1;
                    }
                }
            }
        }
    }

    @media (width <= 860px){
        bottom: 30px;
    }
}


/* dot-tit-slide */
.dot-tit-slide{
	position: relative;
	& .list{}
	& .item{
		position: relative; height: var(--view-height);
		& .img{
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			& img{width: 100%; height: 100%; object-fit: cover;}
		}
		& > .inner-sm{
			height: 100%; align-content: center;
			& .desc{
				position: relative; color: #fff; /* padding: 0 280px 0; */
				max-width: 940px; margin: 0 auto; padding: 0;
				& .name{font-size: 26px;}
				& .text{padding: 28px 0 0; font-size: 14px; /* line-height: 1.5; */}
			}
		}
	}
	& .control{
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1500px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between;
		& .btn_dot_slide{
			position: relative; display: block; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(0,0,0,0.2); font-size: 0;
			&:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff;}

			&.btn_dot_slide_prev{}
			&.btn_dot_slide_prev:before{transform: translate(-50%, -50%) rotate(-45deg); border-left: 2px solid #fff;}
			&.btn_dot_slide_next{}
			&.btn_dot_slide_next:before{transform: translate(-50%, -50%) rotate(45deg); border-right: 2px solid #fff;}

			&:hover{
				background: rgba(17,17,17,0.6);
			}
		}
	}
	& .dots{
		--dot-gap: 33px;
		position: absolute; z-index: 1; bottom: 80px; left: 0; display: flex; flex-wrap: wrap; width: 100%; gap: var(--dot-gap); justify-content: center;
		& > li{
			position: relative; display: block; margin: 0 !important; width: auto; height: auto; border-radius: 0; opacity: 1; background: none;
			& button{
				position: relative; padding: 0 0 8px; color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 300;
				&:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #fff; transition: 0.4s ease;}
			}
			& button:hover{color: rgba(255,255,255,0.7);}

			&.swiper-pagination-bullet-active{
				& button{
					color: #fff; font-weight: 400;
					&:before{width: 100%;}
				}
			}
		}
	}

	@media (width <= 1560px){
		& .control{
			width: 100%; padding: 0 20px; max-width: none;
		}
	}
	@media (width <= 1280px){
		& .item{
			& > .inner-sm{
				& .desc{max-width: none; margin: 0 120px;}
			}
		}
	}
	@media (width <= 1024px){
		& .item{
			height: auto; padding: 120px 0 200px;
		}
	}
	@media (width <= 640px){
		& .item{
			height: auto; padding: 60px 0 120px;
			& > .inner-sm{
				& .desc{
					max-width: none; margin: 0 65px;
					& .name{font-size: 22px;}
				}
			}
		}
		& .control{
			& .btn_dot_slide{width: 40px;}
		}
		& .dots{
			bottom: 50px;
		}
	}
}


/* process-step */
.process-step{
	display: flex; flex-wrap: wrap; justify-content: center; background: #000; overflow: hidden; overflow-anchor: none;

	& .split { visibility: hidden; }

	& .ps-nav{
		flex: 0 0 auto; color: #fff; transition: 0.2s; align-content: center;
		& .tit{font-size: 26px; font-weight: 500; text-align: center; line-height: 1;}
		& .des{font-size: 16px; line-height: 1.7; padding: 29px 0 0; text-align: center; white-space: nowrap; width: 100%;}
		& .ps-nav-list{
			display: none; position: relative; flex-direction: column; gap: 51px; max-width: 105px; margin: 0 auto; padding: 42px 0 0; /* padding: 26px 0 0; */

			& .progress-line{
				position: absolute; z-index: 1; display: none; top: 33px; bottom: 10px; left: 3px; width: 1px; background: #666;
				& .line{display: block; width: 7px; height: 20px; background: #fff; border-radius: 7px; position: absolute; top: 0; left: 50%; margin: -4px 0 0 -3px; transition: 0.6s ease;}
			}

			& > .item{
				& button{position: relative; padding: 0 0 0 20px; display: block; font-size: 16px; font-weight: 400; white-space: initial; color: #bbb; transition: 0.3s ease;}
				& button:before{content: ""; position: absolute; top: 6px; left: 0; width: 7px; height: auto; aspect-ratio: 1; border-left: 2px solid #bbb; border-bottom: 2px solid #bbb; transform: rotate(-45deg); 
					transition: 0.3s;}
				& button.on{color: #fff;}

				&.hover{
					& button{color: #fff;}
					& button:before{border-color: #fff;}
				}
			}

			/* &:has(> .item button:hover){
				& > .item{
					& button{color: #bbb;}
					& button:hover{color: #fff;}
				}
			} */
			&.ready{
				& > .item{
					& button{color: #fff;}
					& button:before{border-color: #fff;}
				}
			}
		}
		& .ps-control{
			display: none; /* display: flex; */ flex-wrap: wrap; gap: 15px; padding: 30px 0 0;
			& .btn-ps{
				flex: 0 0 auto; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; text-align: center; background: #333; font-size: 0; position: relative;
				&:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff;}

				&.btn-ps-prev:before{border-left: 2px solid #fff; transform: translate(-50%, -50%) rotate(-45deg);}
				&.btn-ps-next:before{border-right: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
			}
		}
	}

	& .ps-con{
		flex: 0; min-width: 0; transition: flex 0.5s, clip-path 0.5s 0.5s;
		clip-path: inset(0 100% 0 0);
		display: grid; grid-template-columns: minmax(0, 1fr); /* item을 같은 칸에 겹쳐서 높이 고정 */

		& .ps-item{
			grid-area: 1 / 1; overflow: hidden;
			opacity: 0; visibility: hidden;
			transition: opacity 0.5s, visibility 0s 0.5s; /* 사라질 때: fade out 끝난 뒤 hidden */

			& .img{
				width: 100%; height: auto; aspect-ratio: 1220 / 666;
				& img{width: 100%; height: 100%; object-fit: cover;}
			}
			& .txt{
				padding: 37px 0 0; font-size: 14px; color: #fff; text-align: center;
				& .name{display: none;}
			}

			&.on{
				opacity: 1; visibility: visible;
				transition: opacity 0.5s, visibility 0s; /* 나타날 때: 바로 visible + fade in */
			}
		}

		&.show{
			display: block;
		}
	}

	&.step0{
		& .split { visibility: visible; }
	}

	&.step1{
		& .ps-nav{
			& .des{}
		}
	}
	&.step2{
		& .ps-nav{
			width: 280px; padding: 0 0 56px;
			& .tit{text-align: left;}
			& .des{text-align: left;}
			& .ps-nav-list{
				max-width: none; padding: 26px 0 0; gap: 48px;

				& .progress-line{display: block;}

				& > .item{
					& button:before{border: none; border-radius: 50%; background: #666; top: 7px;}
				}
			}
		}
		& .ps-con{
			flex: 1; clip-path: inset(0 0 0 0);
		}
	}

	@media (width <= 1560px){
		& .ps-con{
			align-content: center;
		}
	}
	@media (width <= 1280px){
		&.step2{
			& .ps-nav{width: 220px;}
		}
	}
	@media (width <= 860px){
		&.step2{
			& .ps-nav{width: 170px;}
		}
	}
	@media (width <= 640px){
		flex-direction: column;

		& .split { visibility: visible; } /* 모바일은 타이핑 JS가 안 돌아서 항상 노출 */

		& .ps-nav{
			width: 100%;
			& .tit{font-size: 22px;}
			& .des{font-size: 14px; display: block !important; white-space: initial; 
				padding: 30px 20px 40px; text-align: center;}
			& .ps-nav-list{display: none !important;}
		}
		& .ps-con{
			flex: 0 0 auto; width: 100%; transition: 0s; clip-path: initial;
			display: flex; flex-direction: column; gap: 50px;
			& .ps-item{
				width: 100%; height: auto;
				grid-area: auto; opacity: 1; visibility: visible; transition: 0s; /* 데스크톱 fade 규칙 해제 */
				& .img{
					img{width: 100%; height: 100%; object-fit: cover;}
				}
				& .txt{
					font-size: 13px; padding: 15px 50px 0; text-wrap: balance;
					& .name{display: block; font-size: 15px; padding: 0 0 7px;}
				}
			}
		}

		&.step2{
			& .ps-nav{
				width: 100%;
				& .tit{text-align: center;}
			}
		}
	}
}


/* cp-list */
.cp-list{
	display: flex; flex-wrap: wrap; gap: 35px; padding: 37px 0 0; font-size: 15px;
	& > li{
		flex: 1; min-width: 0;
		& .color{
			line-height: 60px; padding: 0; text-align: center; color: #fff; background: #ddd; border-radius: 12px;
			background-repeat: no-repeat; background-position: center; background-size: cover;
			&.gray{background-image: url("../img/contents/cp-list-gray.jpg");}
			&.lightwarmgray{background-image: url("../img/contents/cp-list-lightwarmgray.jpg");}
			&.lightwood{background-image: url("../img/contents/cp-list-lightwood.jpg");}
		}
	}

	@media (width <= 1280px){
		gap: 20px;
	}
	@media (width <= 640px){
		flex-direction: column; gap: 10px; font-size: 14px;

		& > li{
			& .color{line-height: 50px;}
		}
	}
}


/* room-cp-img */
.room-cp-img{
	margin: 40px 0 0;
	& .img{
		& img{width: 100%;}
	}
}


/* mosaic-wrap */
.mosaic-wrap{
	@media (width <= 640px){
		width: calc(100% - 40px); height: calc(100% - 80px);
	}
}


/* mosaic-slide */
.mosaic-slide{
	--scale: 0.5;
	--progress: 0;
    --gap-item: calc(20px / var(--scale));
	position: relative; max-width: 1778px; width: calc(100vw - 140px); margin: 0 auto; transform: scale(var(--scale)); /* transition: transform 1.5s, --gap-item 1.5s; transition-delay: 0.7s; */
	transition: 0.7s ease-out;
	& .list{}
	& .item{
		& .img{
			border-radius: 30px; overflow: hidden; /* aspect-ratio: 1778 / 800; */ aspect-ratio: 1778 / 768; width: 100%; height: auto;
			& img{width: 100%; height: 100%; object-fit: cover;}
		}
	}
	& .control{
		position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); left: 0; width: 100%; padding: 0 160px; display: flex; flex-wrap: wrap; justify-content: space-between;
		& .btn_mosaic{
			position: relative; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: rgba(17,17,17,0.2); font-size: 0;
			&:before{content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff;}
			&.btn_mosaic_prev:before{border-left: 2px solid #fff; transform: translate(-50%, -50%) rotate(-45deg);}
			&.btn_mosaic_next:before{border-right: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
			&:hover{background-color: rgba(17,17,17,0.6);}
		}
	}
	& .progress-wrap{
		position: absolute; z-index: 1; bottom: 75px; left: 50%; transform: translateX(-50%);
		display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: center;
		& .btn_mosaic_stop{
			pointer-events: none;
			position: relative; font-size: 0; display: inline-block; width: 20px; height: auto; aspect-ratio: 1; margin: 0 13px 0 0;
			&:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 11px; border-left: 1px solid #fff; border-right: 1px solid #fff;}
			&.on:before{display: none;}
			&.on:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; margin-left: 7px; border-width: 7px 10px 7px 9px; border-color: transparent transparent transparent #fff; border-style: solid;}

			.mosaic-slide.ready &{pointer-events: auto;}
		}
		& .progress{
			position: relative; width: 770px; max-width: 100%; height: 1px; background-color: rgba(255,255,255,0.3);
			& .bar{
				position: absolute; top: 0; bottom: 0; left: 0; width: 0; background-color: #fff;
				&.play{animation: width 3s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
				&.pause{animation-play-state: paused;}
			}
		}
		& .page{
			color: #fff; display: inline-flex; gap: 0.2em; margin: 0 0 0 20px; font-size: 14px; font-weight: 400; font-family: 'NanumSquare';
			& span{display: inline-block; width: 18px; text-align: center;}
		}
	}
	& .deco-list{
		--gap-item: 40px;
		position: absolute; inset: 0; /* transition: 2s; transition-delay: 1s; */
		/*
			--progress
			0 → 1

			0 : opacity 1
			1 : opacity 0
		*/
		opacity: calc(1 - var(--progress)); transition: none;

		& .deco-item{
			position: absolute; height: auto; border-radius: 30px; overflow: hidden;

			&:nth-child(1){
				aspect-ratio: 460 / 308; width: calc(460px * 2); width: calc(25.88% * 2); top: -10%; top: 0; transform: translateY(-12.5%);
				right: calc(100% + var(--gap-item));
			}
			&:nth-child(2){
				aspect-ratio: 370 / 229; width: calc(370px * 2); width: calc(20.85% * 2); top: 76%; top: 0; transform: translateY(128%);
				right: calc(100% + var(--gap-item));
			}
			&:nth-child(3){
				aspect-ratio: 380 / 183; width: calc(380px * 2); width: calc(21.38% * 2); top: calc(100% + var(--gap-item)); 
				left: 0;
			}
			&:nth-child(4){
				aspect-ratio: 297 / 144; width: calc(297px * 2); width: calc(16.71% * 2); bottom: calc(100% + var(--gap-item)); 
				right: 0;
			}
			&:nth-child(5){
				aspect-ratio: 420 / 229; width: calc(420px * 2); width: calc(23.63% * 2); top: -10%;  top: 0; transform: translateY(-17%);
				left: calc(100% + var(--gap-item));
			}
			&:nth-child(6){
				aspect-ratio: 465 / 310; width: calc(465px * 2); width: calc(26.16% * 2); top: 55%; top: 0; transform: translateY(68%);
				left: calc(100% + var(--gap-item));
			}

			& img{width: 100%; height: 100%; object-fit: cover;}
		}
	}

	/* &.active{
		--scale: 1;
		& .deco-list{opacity: 0;}
	} */

	@media (width <= 1400px){
		width: calc(100vw - 100px);
		& .progress-wrap{
			bottom: 10%; gap: 20px; padding: 0 100px;
			& .btn_mosaic_stop{margin: 0;}
			& .page{margin: 0;}
			& .progress{width: auto; flex: 1; min-width: 0;}
		}
	}
	@media (width <= 1280px){
		width: calc(100vw - 40px);
	}
	@media (width <= 640px){
		width: calc(100vw - 40px); width: 100%; height: 100%;
		& .item{
			& .img{
				border-radius: 15px; aspect-ratio: 1.3 / 1; 
				aspect-ratio: initial; height: 100%;
			}
		}
		& .progress-wrap{
			padding: 0 30px;
			& .progress{}
		}
		& .control{
			padding: 0 20px;
			& .btn_mosaic{width: 40px;}
		}
		& .deco-list{
			& .deco-item{
				&:nth-child(1){
					aspect-ratio: 460 / 308; width: calc(75% * 2); top: 0; transform: translateY(-50.5%);
					right: calc(100% + var(--gap-item));
				}
				&:nth-child(2){
					aspect-ratio: 370 / 229; width: calc(60% * 2); top: 0; transform: translateY(83%);
					right: calc(100% + var(--gap-item));
				}
				&:nth-child(3){
					aspect-ratio: 380 / 183; width: calc(60% * 2); top: calc(100% + var(--gap-item)); 
					left: 0;
				}
				&:nth-child(4){
					aspect-ratio: 297 / 144; width: calc(45% * 2); bottom: calc(100% + var(--gap-item)); 
					right: 0;
				}
				&:nth-child(5){
					aspect-ratio: 420 / 229; width: calc(60% * 2); top: 0; transform: translateY(-17%);
					left: calc(100% + var(--gap-item));
				}
				&:nth-child(6){
					aspect-ratio: 465 / 310; width: calc(75% * 2); top: 0; transform: translateY(68%);
					left: calc(100% + var(--gap-item));
				}
			}
		}
	}
}


/* as-slide */
.as-slide{
	overflow: hidden; margin-right: calc( ((100vw - 1500px) * 0.5) * -1 );

	& .list{
		& .item{
			position: relative; width: 100%; height: auto; aspect-ratio: 530 / 667; max-height: 667px;
			& .img{
				position: absolute; top: 0; left: 0;  width: 100%; height: 100%;
				& img{width: 100%; height: 100%; object-fit: cover;}
			}
			& .txt{
				position: relative; height: 100%; align-content: end; padding: 0 70px 80px 70px;
				& dt{
					display: flex; flex-wrap: wrap; align-items: center;
					& span{font-weight: 400;}
					& em{
						font-style: normal; font-weight: 400;
						&:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 20px 0; width: 1px; height: 15px; background: #111;}
					}
				}
				& dd{font-size: 14px; padding: 34px 0 0; line-height: 1.55;}
			}
		}
	}

	@media (width <= 1700px){
		& .list{
			& .item{
				& .txt{
					padding: 0 3.5vw 15%; 
					& dd{padding: 8% 0 0;}
				}
			}
		}
	}
	@media (width <= 1560px){
		margin-right: -50px;
	}
	@media (width <= 1500px){
		margin-right: -20px;
	}
	@media (width <= 1280px){
		& .list{
			& .item{
				aspect-ratio: initial; max-height: none;
				& .txt{
					padding: 70% 30px 50px; 
				}
			}
		}
	}
	@media (width <= 860px){
		& .list{
			& .item{
				& .txt{
					
				}
			}
		}
	}
}


/* sns-slide */
.sns-slide{
	overflow: hidden; margin-right: calc( ((100vw - 1500px) * 0.5) * -1 );

	& .list{
		& .item{
			position: relative; display: flex; flex-direction: column;
			& .img{
				flex: 0 0 auto; position: relative; height: 448px; background: #f1f1f1; /* aspect-ratio: 600 / 448; */
				& img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

				&.nb{background: #2db400;}
				&.kakao{background: #eeda23;}
				&.yt{background: #212121;}
				&.ins{background: radial-gradient(circle at 5% 100%,  #ff7b00 0%,  #ff4e25 35%,  #fe323e 45%,  #fd0074 65%,  #eb0194 80%,  #b515d9 100%);}
			}
			& .txt{
				flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 32px 0 0;
				& dt{
					flex: 0 0 auto; font-size: 16px; font-weight: 400;
				}
				& dd{
					flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 14px; padding: 35px 0 0;
					& span{
						margin-top: auto; display: block; padding: 35px 0 0;
						& em{font-style: normal;}
						& em:after{content: ""; display: inline-block; vertical-align: middle; margin: -1px 0 0 7px; /* margin: -1px 0 0 18px; */ width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); transition: 0.3s;}
					}
				}
			}

			&:hover{
				& .txt{
					& dd{
						& span{
							& em:after{margin-left: 18px;}
						}
					}
				}
			}
		}
	}

	@media (width <= 1700px){
		& .list{
			& .item{
				& .img{width: 100%; height: auto; aspect-ratio: 600 / 448;}
			}
		}
	}
	@media (width <= 1560px){
		margin-right: -50px;
	}
	@media (width <= 1500px){
		margin-right: -20px;
	}
	@media (width <= 1280px){
		& .list{
			& .item{
				& .img{
					& img{width: 35%;}
				}
				& .txt{
					padding: 20px 0 0;
					& dd{
						padding: 20px 0 0;
						& br{display: none;}
						& span{padding: 20px 0 0;}
					}
				}
			}
		}
	}
	@media (width <= 860px){
		& .list{
			& .item{
				& .txt{
					padding: 15px 0 0;
					& dt{font-size: 15px;}
					& dd{
						padding: 15px 0 0; font-size: 13px;
						& span{padding: 15px 0 0;}
					}
				}
			}
		}
	}
}


/* designer-slide */
.designer-slide{
	overflow: hidden; margin-right: calc( ((100vw - 1500px) * 0.5) * -1 );

	& .list{
		& .item{
			position: relative; display: flex; flex-direction: column;
			& .img{
				flex: 0 0 auto; position: relative; /* height: 448px; */ background: #f1f1f1; aspect-ratio: 580 / 436;
				& img{width: 100%; height: 100%; object-fit: cover;}
				& > a{position: absolute; bottom: 20px; right: 20px; font-size: 0; width: 50px; height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background-color: rgba(255,255,255,0.5); transition: 0.2s; opacity: 0;}
				& > a:hover{background-color: rgba(255,255,255,1.0);}
				& > a:before,
				& > a:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22%; height: 2px; background-color: #000;}
				& > a:after{height: 22%; width: 2px;}

				&:hover{
					& > a{opacity: 1;}
				}
			}
			& .txt{
				flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 34px 20px 0 0;
				& dt{
					flex: 0 0 auto; display: flex; flex-wrap: wrap; font-weight: 400;
					& .p-name{}
					& .d-name{color: #a6a6a7;}
					& .d-name:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 14px 0; width: 1px; height: 12px; background-color: #a6a6a7;}
				}
				& dd{
					flex: 1; min-height: 0; font-size: 14px; padding: 33px 0 0; line-height: 1.55;
				}
			}
		}
	}

	@media (width <= 1700px){
		& .list{
			& .item{
				& .img{}
			}
		}
	}
	@media (width <= 1560px){
		margin-right: -50px;
	}
	@media (width <= 1500px){
		margin-right: -20px;
	}
	@media (width <= 1280px){
		& .list{
			& .item{
				& .img{
					
				}
				& .txt{
					padding: 20px 0 0;
					& dd{
						padding: 20px 0 0;
						& br{display: none;}
					}
				}
			}
		}
	}
	@media (width <= 860px){
		& .list{
			& .item{
				& .txt{
					padding: 15px 0 0;
					& dt{font-size: 15px;}
					& dd{
						padding: 15px 0 0; font-size: 13px;
					}
				}
			}
		}
	}
}


/* personal-consult-slide */
.personal-consult-slide{
	display: none; position: relative; height: 100%; opacity: 0; transition: opacity 0.8s;
	&.on{display: block;}
	&.show{opacity: 1;}

	& .list{height: 100%;}
	& .item{
		height: 100%;
		& .img{height: 100%;}
		& .img img{width: 100%; height: 100%; object-fit: cover;}

		& .txt{position: absolute; bottom: 0; left: 0; width: 100%; color: #111; text-align: center; padding: 0 0 80px;}
		& .txt .name{font-size: 16px;}
		& .txt .sub{font-size: 14px; padding: 31px 0 0;}
	}
	& .control{
		position: absolute; z-index: 2; bottom: 157px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 940px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between;
		& .btn-personal-consult-slide{
			position: relative; display: inline-block; width: 6px; height: auto; aspect-ratio: 1; border-top: 2px solid #000; font-size: 0;
			&:before{content: "클릭 사용성 개선"; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: auto; aspect-ratio: 1; border-radius: 50%;}
			&.prev{border-left: 2px solid #000; transform: rotate(-45deg);}
			&.next{border-right: 2px solid #000; transform: rotate(45deg);}
		}
	}

	@media (width <= 1280px){
		& .control{
			padding: 0 80px;
		}
	}
	@media (width <= 640px){
		& .item{
			& .txt{padding: 0 0 60px;}
			& .txt .sub{padding: 20px 20px 0; text-wrap: balance;}
		}
		& .control{
			padding: 0 50px; bottom: 126px;
		}
	}
}


/* design-process-slide */
.design-process-slide{
	position: relative; height: var(--view-height); width: 100%;
	& .list{height: 100%;}
	& .item{
		height: 100%;
		& .img{position: absolute; inset: 0;}
		& .img img{width: 100%; height: 100%; object-fit: cover;}
		& .txt{position: relative; padding: 174px 20px 0; width: 100%; text-align: center; font-size: 14px; color: #fff; max-width: 800px; margin: 0 auto;}
		& .txt .des{}
	}
	& .control{
		position: absolute; z-index: 2; top: 50%; transform: translate(-50%, -50%); left: 50%; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1500px;
		& .btn-design-process-slide{
			position: relative; display: inline-block; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: rgba(17,17,17,0.2); font-size: 0;
			&:before{content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff;}

			&.prev:before{border-left: 2px solid #fff; transform: translate(-50%, -50%) rotate(-45deg);}
			&.next:before{border-right: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
			&:hover{background-color: rgba(17,17,17,0.6);}
		}
	}
	& .dots{
		position: absolute; z-index: 2; top: auto; bottom: 77px; left: 0; width: 100%; right: auto; display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
		& > li{
			display: flex; flex-wrap: wrap; align-items: center; margin: 0 !important; width: auto; height: auto; border-radius: 0; background: none; opacity: 1;
			& button{display: block; white-space: initial; color: #a6a6a7; font-size: 16px;}

			&.swiper-pagination-bullet-active{
				& button{color: #fff;}
			}
		}
		& > li + li{}
		& > li + li:before{content: ""; display: inline-block; margin: 0 34.5px; vertical-align: middle; width: 5px; height: auto; aspect-ratio: 1; border-top: 1px solid #a6a6a7; border-right: 1px solid #a6a6a7; transform: rotate(45deg);}
	}

	@media (width <= 1560px){
		& .control{max-width: none; padding: 0 20px;}
	}
	@media (width <= 1280px){
		height: auto; /* aspect-ratio: 1.45 / 1; */ aspect-ratio: 16 / 13;
		& .dots{
			& > li + li:before{margin: 1px 15px 0;}
		}
	}
	@media (width <= 860px){
		& .item{
			& .txt{
				padding: 174px 60px 0; text-wrap: balance;
			}
		}
		& .dots{
			& > li{
				&:not(.swiper-pagination-bullet-active){display: none;}
				&.swiper-pagination-bullet-active{}
			}
			& > li + li:before{display: none;}
		}
	}
	@media (width <= 640px){
		height: auto; aspect-ratio: 1.25 / 1;

		& .item{
			& .txt{
				padding: 94px 60px 0;
			}
		}
		& .dots{
			bottom: 50px;
			& > li{
				& button{font-size: 14px;}
			}
		}
		& .control{
			& .btn-design-process-slide{width: 40px;}
		}
	}
}


/* acd-wrap */
.acd-wrap{
	--side-pad: 70px;
	padding: 0 0 0; max-width: 1360px; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden;

	& .acd-opener{
		& button{
			display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: 27px var(--side-pad) 27px; white-space: initial; gap: 10px;
			& .sentence{
				flex: 1; min-width: 0; font-size: 18px; padding: 8px 0 0;
				& b{font-weight: 600;}

				&.b{display: none;} 
			}
			& .shape{
				flex: 0 0 auto; margin: 7px 0 0 auto; position: relative; width: 23px; height: auto; aspect-ratio: 1; /* background: #f1f1f1; */ transition: 0.3s;
				&:before{content: ""; position: absolute; inset: 0; background: url("../img/contents/service-faq-btn.svg") no-repeat center;}
			}

			&.on{
				& .sentence{
					&.a{display: none;}
					&.b{display: block;}
				}
				& .shape{
					transform: rotate(-45deg);
				}
			}
		}
	}

	& .acd-cont{
		display: none; padding: 0 var(--side-pad) 41px;
		&::-webkit-scrollbar{width: 6px;}
		&::-webkit-scrollbar-thumb{border-radius: 0px; background-color: #ddd;}
		&::-webkit-scrollbar-track{border-radius: 0px; background-color: rgba(193,193,193,0.2);}

		& dl{
			border-bottom: 1px solid #f1f1f1;
			&:nth-child(1){border-top: 1px solid #f1f1f1;}

			& dt{
				& button{
					position: relative; display: block; width: 100%; padding: 37px 15px 37px 26px; font-size: 16px; white-space: initial;
					&:after{content: ""; position: absolute; top: 44px; right: 2px; width: 6px; height: auto; aspect-ratio: 1; border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(-45deg); transition: 0.2s;}
					& span{position: absolute; top: 36px; left: 0; font-weight: 400; font-size: 18px;}

					&.on{
						&:after{transform: rotate(135deg); top: 46px;}
					}
				}
			}
			& dd{
				position: relative; display: none; padding: 0 0 39px 26px; font-size: 14px; line-height: 1.5;
				& span{position: absolute; top: -1px; left: 0; font-weight: 400; font-size: 16px; color: #ccc;}
			}
		}
		/* & dl + dl{
			border-top: 1px solid #f1f1f1;
		} */
		& dl:nth-child(n+4){display: none;}
		& .acd-more{
			display: block; margin: 35px auto 0;
			& span{display: inline-flex; flex-direction: column; align-items: center; gap: 5px; font-size: 15px;}
			& span:after{content: ""; display: inline-block; width: 8px; height: auto; aspect-ratio: 8 / 6; background: url("../img/contents/service-faq-more-open.png.html") no-repeat center;}

			&.on{
				& span:after{background-image: url("../img/contents/service-faq-more-close.png.html");}
			}

			&:hover{
				& span:after{animation: upDown 0.6s infinite alternate linear;}
			}
		}
	}

	@media (width <= 1280px){
		--side-pad: 50px;

		& .acd-opener{
			& button{
				& .sentence{font-size: 16px; padding: 0;}
				& .shape{margin: 0 0 0 auto;}
			}
		}
		& .acd-cont{
			& dl{
				& dt{
					& button{
						padding: 25px 15px 25px 26px;
						&:after{top: 31px;}
						& span{top: 24px;}

						&.on{
							&:after{top: 33px;}
						}
					}
				}
				& dd{
					padding: 0 0 25px 26px;
				}
			}
		}
	}
	@media (width <= 860px){

	}
	@media (width <= 640px){
		--side-pad: 20px;
		& .acd-opener{
			& button{
				padding: 20px var(--side-pad);
				& .sentence{font-size: 15px; padding: 0;}
				& .shape{margin: 4px 0 0 auto; width: 20px;}
			}
		}
		& .acd-cont{
			padding: 0 var(--side-pad) 20px;
			& dl{
				& dt{
					& button{
						padding: 20px 15px 20px 22px; font-size: 14px;
						&:after{top: 26px;}
						& span{font-size: 15px; top: 19px;}

						&.on{
							&:after{top: 28px;}
						}
					}
				}
				& dd{
					padding: 0 0 25px 22px;
					& span{font-size: 15px; top: 0;}
				}
			}
			& .acd-more{margin: 20px auto 0;}
		}
	}
}
@keyframes upDown {
	0% {transform: translateY(0);}
	100% {transform: translateY(4px);}
}


/* rental */
.rental{
	display: flex; flex-direction: column; flex: 1; padding: 0 0 80px;
	& .cont{
		flex: 1; align-content: center; padding: 0 0 70px;
		& .item{
			display: none; text-align: center; color: #fff; font-size: 15px;
			& .tit{
				font-size: 18px; display: inline-flex; gap: 1em; align-items: center;
				& span{font-size: 16px; color: #ccc;}
			}
			& .des{
				padding: 30px 0 0; font-size: 14px; line-height: 1.5;
			}
		}
	}
	& > .btns{
		margin-top: auto; flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 35px;
		& button{
			flex: 0 0 auto; width: 100px; line-height: 35px; padding: 0; background: rgba(0,0,0,0.2); color: #fff; font-size: 16px; text-align: center; transition: 0.2s;
			& span{
				display: inline-flex; align-items: center; gap: 8px;
				&:after{content: ""; display: inline-block; width: 6px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
			}

			&.on{
				background: rgba(0,0,0,0.6); color: #fff; 
			}
		}
	}

	@media (width <= 1280px){
		padding: 0 0 110px;
	}
	@media (width <= 640px){
		padding: 0 0 60px;
		& .cont{
			padding: 20px 0 40px;
			& .item{}
			& .item .tit{font-size: 16px; gap: 0.5em}
			& .item br{display: none; text-wrap: balance;}
		}
		& > .btns{gap: 10px;}
	}
}


/* product-card */
.product-card{
	position: relative;

	& .link {
		& .thumb {position: relative; aspect-ratio: 1 / 1; overflow: hidden;
			& img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.2s;}
			&:hover img {transform: translate(-50%, -50%) scale(1.1);}
		}
		& .info {
			padding: 11px 0 0;
			& .name {
				
				& span {font-size: 12px; font-weight: 300; line-height: 1; color: #a6a6a7;}
				& p {font-size: 14px; font-weight: 400; line-height: 1; margin: 14px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
			}
		}
	}
	& .link2 {
		position: absolute; bottom: 0; right: 10px; display: block;
		& .more {display: flex; align-items: center; gap: 5px;
			& p {position: relative; padding: 0 26px 0 0; font-size: 14px; font-weight: 400; line-height: 1.08;}
			& p:after {content: ""; position: absolute; top: 4px; right: 2px; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); margin: 0 10px 0 0; transition: 0.3s;}
			& p:hover:after{margin: 0;}
		}
		@media (width <= 1280px){
			& .more{
				p{padding: 0 18px 0 0;}
				p:after{margin: 0;}
			}
		}
	}

	@media (width <= 768px){
		& > .link{
			& .info{
				padding: 12px 0 0;
				& .name{
					
					& p{margin: 10px 0 0;}
				}
			}
		}
		& > .link2{padding: 0;}
	}
	@media (width <= 640px){
		& > .link{
			& .info{
				& .name{
					& p{margin: 8px 0 0;}
				}
				& .more{
					& p {font-size: 12px;}
					& img {width: 20px;}
				}
			}
		}
	}
}


/* product-card-type2 */
.product-card-type2{
	> a{
		position: relative; display: block; overflow: hidden;
		.content-item & {outline: 1px solid #f5f5f5;}

		.thumbs{
			position: relative; aspect-ratio: 430 / 490; overflow: hidden; padding: 0 0 0; transition: 0.4s;
			img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
		}
		.desc{
			position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(100%); display: flex; flex-wrap: wrap; font-size: 14px; padding: 17px 20px 0 0; line-height: 1; background: #fff; transition: 0.3s;
			.p-name{}
			.p-date{margin: 0 0 0 auto; font-size: 12px; color: #999;}

			.content-item &{background: #f5f5f5;}
			.main-container .sec.social &{background: #f5f5f5;}
		}

		&:hover{
			& .thumbs{
				padding: 0 0 42px; transition: 0.3s;
				& img{transform: scale(1.1);}
			}
			& .desc{transform: translateY(0);}
		}
	}
}


@keyframes width{
	0%  {width: 0;}
	100%{width: 100%;}
}