@charset "UTF-8";

.main-content-box01{background:#f4f5f5;}
.main-content-box01 .main-mini-wrap{position:relative;padding:40px 0;}

.main-diff-box{margin:0 auto;width:100%;max-width:min(98rem, 51.042vw);overflow:hidden;}
/* swiper의 height는 가장 큰 높이를 기준으로 적용합니다. */
.main-diff-swiper{margin:0;overflow:visible;height:min(57.8rem, 30.104vw);}
.main-diff-swiper .swiper-slide .main-img-wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
.main-diff-swiper .swiper-slide .main-img-wrap .main-img-box{display:block;position:absolute;top:50%;left:0;padding-bottom:125%;border-radius:10px;width:100%;overflow:hidden;transform:translateY(-50%);transition:all 0.7s;}
/* 너비를 padding으로 적용합니다. */
.main-diff-swiper .swiper-slide-active{padding:0 min(57.8rem, 30.104vw) 0 0 !important;border-radius:10px;overflow:hidden;}
.main-diff-swiper .swiper-slide-active .main-img-wrap .main-img-box{padding-bottom:100%;}

@media screen and (max-width:1024.98px) {	
	.main-content-box01 .main-mini-wrap{padding:40px 20px;}
	.main-diff-swiper .main-img-wrap img{border-radius: 6px;}
}
@media screen and (max-width:768px) {
	.main-content-box01 .main-mini-wrap{padding:30px 20px;}
	.main-diff-box{max-width:100%;}
	.main-diff-swiper{margin:0;overflow:visible;height:auto;aspect-ratio:1/1;}
	.main-diff-swiper .swiper-slide-active{padding:0 !important;}
	.main-diff-swiper .swiper-slide .main-img-wrap .main-img-box{padding-bottom:100%;}
	
}