/*modal style*/
.modal-layer { display: none; position: relative; width: 500px; max-width: calc(100% - 40px); max-height: calc(100% - 40px); border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; background: #fff; }

.dim-layer { display: none; position: fixed; _position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.dim-layer-on { display: flex; }
.dim-layer .dim-bg { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dim-layer .modal-layer { display: block; }

.modal-group { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.modal-container { height: 100%; border-radius: 20px; box-sizing: border-box; background: #fff; overflow: auto; }
.modal-container .box-modal { overflow-y: auto; }
.modal-layer-pop img { width: 100%; }

.modal-util { display: flex; position: relative; }
.modal-util .btn-close { width: 50%; height: 70px; border: none; background: #fff; font-size: 14px; font-weight: 500; color: #333; }
.modal-util .btn-close-v1 { background: #eee; }

.slide-pop { position: relative; }
.slide-pop .swiper { height: 100%; }
.slide-pop .swiper .swiper-slide { overflow: hidden; }
.slide-pop .slide-util { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: 30px; width: calc(100% - 50px); margin: 0 auto; }
.slide-pop .navigation-group { display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; height: 100%; }
.slide-pop .navigation-group .swiper-button-prev,
.slide-pop .navigation-group .swiper-button-next { position: static; width: 65px; height: 65px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; box-sizing: border-box; background: center center no-repeat; background-size: 24px; }
.slide-pop .navigation-group .swiper-button-prev:after,
.slide-pop .navigation-group .swiper-button-next:after { display: none; }
.slide-pop .navigation-group .swiper-button-prev { left: 20px; background-image: url('../img/ico_arrow_prev1.svg'); }
.slide-pop .navigation-group .swiper-button-next { right: 20px; background-image: url('../img/ico_arrow_next1.svg'); }
.slide-pop .pagination-group { display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 4px); left: 0; right: 0; z-index: 1; margin: 0 auto; }
.slide-pop .pagination-group .swiper-pagination { display: flex; align-items: center; position: static; width: auto; }
.slide-pop .pagination-group .swiper-pagination .swiper-pagination-bullet { position: relative; width: 8px; height: 8px; margin-right: 4px; border-radius: 4px; box-sizing: border-box; background: #fff; opacity: .5; }
.slide-pop .pagination-group .swiper-pagination .swiper-pagination-bullet-active { width: 24px; opacity: 1; }


@media only screen and (max-width: 540px) {
	/*modal style*/
	.modal-layer { border-radius: 10px; }
	.modal-container { border-radius: 10px; }
	.modal-util .btn-close { height: 60px; font-size: 12px; }
	
	.slide-pop .slide-util { bottom: 20px; width: calc(100% - 40px); }
	.slide-pop .navigation-group .swiper-button-prev,
	.slide-pop .navigation-group .swiper-button-next { width: 40px; height: 40px; background-size: 12px; }
	.slide-pop .pagination-group { top: calc(50% - 3px); }
	.slide-pop .pagination-group .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin-right: 2px; border-radius: 3px; box-sizing: border-box; }
	.slide-pop .pagination-group .swiper-pagination .swiper-pagination-bullet-active { width: 16px; }
}