@charset "utf-8";

.imgWrap{width:100%;}
.imgWrap .img{width:100%;}
.imgWrap .img img{display:block;width:100%;max-width:100%;height:auto;}

.foreground .imgWrap {text-align:center;}
.foreground .imgWrap img {box-shadow:var(--shadow3);}
.foreground .imgWrap .img {position:relative;}
.foreground .imgWrap .img:before {content:""; position:absolute; top:0; left:0; width:100%; height:10px; background:var(--base1);}

.foreground .imgWrap .mark div {width:50px; height:50px; display:flex; position:absolute; background:var(--base1); color:#fff; border-radius:100px; justify-content: center; align-items: center;}
/*외부*/
.foreground .imgWrap .mark div:nth-child(1) {bottom:15%; right:16%;}
/*1층*/
.foreground .imgWrap .mark div:nth-child(2) {bottom:20%; left:50%;}
/*2층*/
.foreground .imgWrap .mark div:nth-child(3) {bottom:39%; left:40%;}
/*3층*/
.foreground .imgWrap .mark div:nth-child(4) {top:42%; left:48%;}
/*4층*/
.foreground .imgWrap .mark div:nth-child(5) {top:28.5%; left:46%;}

.foreground .imgWrap ul {max-width:700px; background:#fff; display:grid; grid-template-columns:repeat(5,1fr); margin: 0 auto; color:#777; padding-bottom:50px; line-height:1;}
.foreground .imgWrap ul li {color:#c1c1c1; font-size:var(--fs24); font-weight:700;}
.foreground .imgWrap ul li a {border-bottom:3px solid #fff; padding-bottom: 6px; transition:.3s;}
.foreground .imgWrap ul li .on {position:relative; color:#000; font-weight:700;padding-bottom: 6px; border-bottom:3px solid #000;}


body .foregroundWrap {position:relative; max-width:1100px; margin:0 auto; box-sizing:border-box; }
body .foregroundWrap:before {position:absolute; bottom:-170px; height:100%; width:100vw; left: 50%; transform: translateX(-50%); content:""; background:#F4F4F4;}
body .foregroundWrap h3 {position:relative; text-align:center; margin-bottom:20px; font-size:var(--fs26);}
/* body .foregroundWrap:before {position:absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); content:""; width:110%; height:90%; background:#fff;} */
body .foregroundWrap .mySwiper{width:100%;aspect-ratio:16/9;position:relative;}
.foregroundWrap .swiper-wrapper,
.foregroundWrap .swiper-slide{height:100%;}
.foregroundWrap .swiper-slide {position:relative;}
.foregroundWrap .swiper-slide p {width:100%; position:absolute; bottom:-1px; z-index:999; text-align:center; padding:15px 0; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(20px); font-weight:600; color:#fff;}
.foregroundWrap .swiper-slide{overflow:hidden;background:#000;}
.foregroundWrap .swiper-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

.foregroundWrap .swiper-button-wrap {position: absolute; right: 85px; top: 20px;}


/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

	.foreground .imgWrap .mark div {width:35px; height:35px; font-size:14px;}
	body .foregroundWrap {padding:40px;}
	
}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 

	.foreground .imgWrap ul {grid-template-columns: repeat(3, 1fr); max-width: 500px;  gap: 30px;}

	body .foregroundWrap .mySwiper {aspect-ratio: auto; height: auto;}
	body .foregroundWrap {padding:0;}
	body .foregroundWrap:before {content: none;}

	.foregroundWrap .swiper-wrapper, .foregroundWrap .swiper-slide {height: auto !important;}
	.foregroundWrap .swiper-slide img {
		position: static !important;
		width: 100%;
		height: auto !important;
		object-fit: cover !important;
		display: block;
	}
	.foregroundWrap .swiper-slide {background: none !important;}
	

}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {
	
	.foreground .imgWrap .mark div {width:30px; height:30px;}
	/*외부*/
	.foreground .imgWrap .mark div:nth-child(1) {bottom:15%; right:16%;}
	/*1층*/
	.foreground .imgWrap .mark div:nth-child(2) {bottom:20%; left:50%;}
	/*2층*/
	.foreground .imgWrap .mark div:nth-child(3) {bottom:39%; left:40%;}
	/*3층*/
	.foreground .imgWrap .mark div:nth-child(4) {top:37%; left:54%;}
	/*4층*/
	.foreground .imgWrap .mark div:nth-child(5) {top: 18.5%;left:46%;}

	.foreground .imgWrap img {box-shadow:none;}
	.foreground .imgWrap ul {transform: translateY(0px); width:100%; box-sizing: border-box; padding:10px 0; margin-bottom:30px; gap: 10px 0;}
	.foreground .imgWrap ul li {padding:5px 0;}
	.foreground .imgWrap ul li .on {border-bottom:2px solid var(--base1); padding-bottom:5px;}
	.foregroundWrap .swiper-slide p {font-size:16px; padding:10px 0;}
	body .foregroundWrap {padding:0px; border:none;}
	
	body .foregroundWrap .mySwiper {aspect-ratio: none;}
	
	

}