@charset "utf-8";
/* modal */
/* .ws-modal-open,
.ws-modal-open body { overflow: hidden; } */
.ws-modal-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,.7); opacity: 0; transition: opacity 0.25s ease;}
.ws-modal-wrap.ws-modal-visible { opacity: 1; }
.ws-modal-wrap.ws-modal-leave { opacity: 0; }
.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; padding:20px; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}
.ws-modal-inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; overflow: visible; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; display: flex; align-items: center; gap: 40px; }
.ws-modal-wrap.ws-modal-visible .ws-modal-inner { opacity: 1; transform: scale(1); }
.ws-modal-wrap.ws-modal-leave .ws-modal-inner { opacity: 0; transform: scale(0.85); transition-delay: 0s; }
.ws-modal-inner .sub-prev, .ws-modal-inner .sub-next { position: relative; top: auto; margin-top: 0; transform: none; flex:0 0 80px; }
.ws-modal-inner .sub-prev { left: auto;}
.ws-modal-inner .sub-next { right: auto;}
/* fade 슬라이드는 absolute라 swiper에 높이 필수 */
#centerDetail .center-swiper { position:relative; flex:1 1 auto; min-width:0; width:1%; overflow:hidden; border-radius:32px;  }
#centerDetail .center-swiper .thumb { position:relative; display:block; overflow:hidden; border-radius:32px; padding-bottom: 66%; }
#centerDetail .center-swiper .thumb img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; }

/* 반응형 */
@media (max-width: 1024px) {
	.ws-modal-inner { gap:16px; }
	.ws-modal-inner .sub-prev, .ws-modal-inner .sub-next { flex:0 0 48px; width:48px; height:48px; background-size: 20px; }
	#centerDetail .center-swiper { border-radius:16px; }
	#centerDetail .center-swiper .thumb { border-radius:16px; }
}
@media (max-width: 640px) {
	.ws-modal-inner { gap:8px; }
	.ws-modal-inner .sub-prev, .ws-modal-inner .sub-next { flex:0 0 36px; width:36px; height:36px; }
	#centerDetail .center-swiper { border-radius:12px; }
	#centerDetail .center-swiper .thumb { border-radius:12px; }
}