@charset "utf-8";

/*슬라이드팝업::일산21세기병원*/
html.layerOpen, html.layerOpen body {overflow:hidden;}



#layerPopup .popWrap {display:none; z-index:999999; /*width:100%;*/ max-width:1130px; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); overflow:hidden; border-radius:20px;}

#layerPopup .popInner {position: relative; width:100%; box-sizing: border-box; height:100%; background: rgba(0, 0, 0, 0.50); backdrop-filter: blur(7.5px); padding:20px;}
#layerPopup .popInnerWrap {position: relative;}

#layerPopup .popInner .bottom {width:100%; display:flex; justify-content: flex-end; }
#layerPopup .popInner .bottom>* {display:inline-block; font-size:17px; color:#fff;}
#layerPopup .popInner .bottom span {background:#65b187;}
#layerPopup .popInner .bottom a {color:#fff; margin-left:30px; padding-left:25px; background:url(/images/common/popClose.svg) no-repeat left center; margin-right:20px;}

#layerPopup .swiper-slide {width:350px !important;}
#layerPopup .swiper {position:static !important;}
#layerPopup .swiper img {width:100%; border-radius:10px;}
#layerPopup .swiper-pagination-wrap {width:200px; position:absolute; bottom:14px;}

#layerPopup .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#fff; border-radius:100px !important; }
#layerPopup .swiper-pagination {border-radius:100px; background:rgba(0, 0, 0, 0.20) !important;}


/* ************************ 테블릿 (~991) ************************ */
@media screen and (max-width: 991px) {
	
	#layerPopup .swiper {max-width:800px; height:100%;}
	#layerPopup .swiper-slide {width:100%;}
	#layerPopup .popWrap {width:100%; height:100%; border-radius:0;}
	#layerPopup .popInnerWrap {width:100%; /*padding:0 30px;*/ position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);}
	

}


/* ************************ 모바일 (~768) ************************ */
@media screen and (max-width: 768px) {
	
	
	#layerPopup .swiper {max-width:350px; height:100%;}
	#layerPopup .swiper-slide {width:100% !important; margin:0;}
	#layerPopup .swiper-pagination-wrap {width:300px; bottom:40px;}
	
	#layerPopup .checkBox.agree {margin-top:0;}
	#layerPopup .popInner .bottom {max-width:350px; padding-top:30px; margin: 0 auto;}
	
}


/* ************************ 모바일 (~400) ************************ */
@media screen and (max-width: 400px) {
	#layerPopup .swiper {max-width:330px; height:100%;}
	#layerPopup .swiper-slide {width:100%;}
	#layerPopup .swiper-pagination-wrap {width: calc(100% - 60px);}
	
}