@charset "UTF-8";

.house-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:2rem;position:relative;}
.house-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.4rem;min-height:33.3rem;border:2px solid transparent;background:var(--color35);text-align:center;cursor:pointer;box-sizing:border-box;}
.house-box:hover,
.house-box.active{border:2px solid var(--color35);}

.house-box[data-key="leewoncheol"]:is(:hover,.active){border-color:var(--color36);}
.house-box[data-key="underwood"]:is(:hover,.active){border-color:var(--color117);}
.house-box[data-key="yundongju"]:is(:hover,.active){border-color:var(--color119);}
.house-box[data-key="muak"]:is(:hover,.active){border-color:var(--color121);}
.house-box[data-key="chiwon"]:is(:hover,.active){border-color:var(--color123);}
.house-box[data-key="baekyang"]:is(:hover,.active){border-color:var(--color125);}
.house-box[data-key="yongjae"]:is(:hover,.active){border-color:var(--black100);}
.house-box[data-key="avison"]:is(:hover,.active){border-color:var(--color128);}
.house-box[data-key="allen"]:is(:hover,.active){border-color:var(--black100);}
.house-box[data-key="appenzeller"]:is(:hover,.active){border-color:var(--color131);}
.house-box[data-key="evergreen"]:is(:hover,.active){border-color:var(--color133);}
.house-box[data-key="cheongsong"]:is(:hover,.active){border-color:var(--color135);}

.house-img-box{width:12rem;height:12rem;margin-bottom:2rem;display:flex;align-items:center;justify-content:center;}
.house-img-box img{max-width:100%;max-height:100%;object-fit:contain;}
.house-tit-box{position:relative;margin:0 0 1.6rem;padding:0 0 1.6rem;}
.house-tit-box:after{content:'';display:block;position:absolute;top:100%;left:50%;width:4rem;height:1px;background:var(--color01);transform:translateX(-50%);}
.house-tit-box p{font-size:2rem;line-height:2.8rem;font-weight:var(--font-weight-bold);color:var(--black01);}
.house-txt-box p{font-size:1.6rem;line-height:2.6rem;color:var(--black01);}
.house-detail-data{display:none;}

.detail-panel{grid-column:1 / 5;height:0;border:1px solid var(--color34);border-radius:8px;background:var(--white100);opacity:0;transition:height 0.3s ease-in-out, opacity 0.3s ease;overflow:hidden;}
.detail-panel.open{margin:1rem 0 3rem;height:auto;opacity:1;}

.detail-panel.theme-leewoncheol .detail-header{background-color:var(--color36);}
.detail-panel.theme-underwood .detail-header{background-color:var(--color117);}
.detail-panel.theme-yundongju .detail-header{background-color:var(--color119);}
.detail-panel.theme-muak .detail-header{background-color:var(--color121);}
.detail-panel.theme-chiwon .detail-header{background-color:var(--color123);}
.detail-panel.theme-baekyang .detail-header{background-color:var(--color125);}
.detail-panel.theme-baekyang .detail-title,
.detail-panel.theme-baekyang .close-btn{color:var(--color136);}
.detail-panel.theme-yongjae .detail-header{background-color:var(--black100);}
.detail-panel.theme-avison .detail-header{background-color:var(--color128);}
.detail-panel.theme-allen .detail-header{background-color:var(--black100);}
.detail-panel.theme-appenzeller .detail-header{background-color:var(--color131);}
.detail-panel.theme-evergreen .detail-header{background-color:var(--color133);}
.detail-panel.theme-cheongsong .detail-header{background-color:var(--color135);}

.detail-header{display:flex;justify-content:space-between;align-items:center;padding:1.8rem 2.8rem;}
.detail-title{font-size:1.8rem;line-height:2.52rem;font-weight:var(--font-weight-bold);color:var(--white100);}
.close-btn{width:2.4rem;height:2.4rem;background:url(../img/sub/house/ico-close-house@2x.png) no-repeat center center / 100%;text-indent:-9999px;}
.detail-content p{padding:2.4rem 2.8rem 6.4rem;font-size:1.6rem;line-height:2.24rem;color:var(--black01);}

@media screen and (max-width: 1024.98px){
	.house-grid{grid-template-columns:repeat(3, 1fr);}
	.detail-panel{grid-column:1 / 4;}
	
	.house-box{padding:2.5rem;min-height:auto;}
	
	.house-img-box{width:8rem;height:8rem;}
	.house-tit-box p{font-size:1.8rem;line-height:2.6rem;}
	.house-txt-box p{font-size:1.4rem;line-height:2.4rem;}
	
	.detail-panel.open{margin:0;}
	.detail-header{padding:1.5rem 2rem;}
	.detail-title{font-size:1.6rem;line-height:2.2rem;}
	.detail-content p{padding:2rem;font-size:1.4rem;line-height:2.4rem;}
}

@media screen and (max-width: 768px){
	.house-grid{grid-template-columns:repeat(2, 1fr);}
	.detail-panel{grid-column:1 / 3;}
}

@media screen and (max-width: 480px){
	.house-grid{grid-template-columns:1fr;}
	.detail-panel{grid-column:1 / 2;}
}