@charset "UTF-8";

/*-------------------------------------------------

title       : 모달팝업 전용
Author      : EASESOFT
Create date : 2024-05

-------------------------------------------------*/

/* 모달팝업 */
#modal {position:absolute; right:0; top:0; z-index:1000; width:100%; height:0}
#modal .open_btn {}

#modal .group {opacity:0; visibility:hidden; position:fixed; left:0; top:0; width:100%; height:100%;padding:8rem 0;}
#modal .group::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7);}


#modal .modal {text-align:center; width:140rem; max-width:calc(100% - 4rem); margin:0 auto;  transition:all 0.2s; z-index:1}
#modal .blank {color:#fff}
#modal .title {font-size:4.5rem; font-weight:700; display:block; color:#fff; margin-bottom:5rem; word-break:keep-all}
#modal .modal_swiper {padding:5px;}
#modal .swiper-slide a:focus-visible {outline:2px dotted #ffaaaa;}
#modal .swiper-slide .img {display:block;}
#modal .swiper-slide .img img {display:block; margin:0 auto; max-height:60rem;}

#modal .item {font-size: 1.4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:3rem}
#modal .label,
#modal .control.close {display:inline-block; height:3rem; padding:0 2rem; border-radius:3rem; background-color:#000; color:#fff; line-height:3rem}
#modal .label .count {font-weight:700; color:#ff5882}
#modal .control_box {margin-top:3rem}

#modal .paging {display:flex; justify-content:center; align-items:center; gap:1rem; color:#ddd; font-size:1.2rem; margin:0; width:8rem;  height:auto;}
#modal .paging span {color:#fff; font-size:1.6rem;}
#modal .paging .swiper-pagination-total {color:#ff5882}

#modal .controller button:before {color:#fff; font-size:2.2rem}

#modal.active .group {opacity:1; visibility:visible; display:flex; align-items:center;}


/*-------------------------------------------------

Responsive

-------------------------------------------------*/

/* Media Query */
@media (max-width:768px) {
	#modal .title {font-size:4rem; margin-bottom:3rem}
	#modal .swiper-slide .img img {max-height:50vh;}
	#modal .item {gap:0.5rem;}
	#modal .label, #modal .control.close {padding:0 1rem;}
}