@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: 720px; margin: 0 auto; background: #fff; border-radius: 24px; overflow: hidden; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; padding: 40px; padding-bottom: 60px; }
.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-close { display: inline-block; width: 24px; height: 24px; background: url(../images/sub/pop-close.png) center no-repeat; background-size: contain; border: none; }

/* 매장찾기 */
.ws-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 2px solid #121212; margin-bottom: 30px; }
.ws-header .title { line-height: 1.1em; font-size: var(--font-size32); font-weight: 700; color: #000; }

.ws-swiper .item .thumb { padding-bottom: 56.25%; display: block; position: relative; overflow: hidden; border-radius: 8px; }
.ws-swiper .item .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-prev::after, .ws-next::after { display: none; }
.ws-prev, .ws-next { width: 32px; height: 32px; background-repeat: no-repeat; background-position: center; top: 50%; transform: translateY(-50%); margin-top: 0; background-size: 6px; border-radius: 32px; background-color: #fff; }
.ws-prev { left: 20px; background-image: url(../images/sub/pop-prev.png);}
.ws-next { right: 20px; background-image: url(../images/sub/pop-next.png); left: auto; }
.ws-info .name {margin:35px 0 15px; font-size:var(--font-size24); font-weight:700; line-height:1.2em; color:#121212;}
.ws-info .addr {font-weight:400; color:#121212; font-size: var(--font-size18); line-height:1.33em; margin-bottom: 18px; }
.ws-info .tel {font-weight:700; color:#121212; position: relative; padding-left: 15px; }
.ws-info .tel::before {content: ""; position: absolute; left: 0; width: 10px; height: 10px; background: url(../images/sub/call.png) center no-repeat; background-size: contain; top: 7px; }
.ws-map-link { display: flex; margin-top: 36px; gap: 10px; }
.ws-map-link a { display: flex; align-items: center; justify-content: center; width: calc(100%/2 - 5px); background: #f4f4f4; border-radius: 8px; height: 56px; gap: 10px; font-weight: 700; color: #121212; line-height: 1em; }

/* 반응형 */
@media (max-width: 720px) {
    .ws-modal-inner { padding: 25px 15px; border-radius: 5px; padding-bottom: 30px; }
    .ws-modal-close { width: 16px; height: 16px; }
    .ws-header { padding-bottom: 10px; margin-bottom: 20px; }
    .ws-swiper .item .thumb { border-radius: 4px; }
    .ws-prev, .ws-next { width: 24px; height: 24px; background-size: 5px; }
    .ws-prev { left: 10px; }
    .ws-next { right: 10px; }
    .ws-info .name { margin: 20px 0 10px;}
    .ws-info .addr { margin-bottom: 12px; }
    .ws-info .tel::before { top: 6px; }
    .ws-map-link { margin-top: 20px; }
    .ws-map-link a { height: 44px; border-radius: 4px; gap: 7px;}
}
@media (max-width: 500px) {

}