@charset "utf-8";

.sub_con {}
.store_all h4 {
    font-size: var(--font-size30);
    margin-bottom: 1em;
}
.store_all p {
    padding: 1rem 2rem;
    text-align: center;
}
.store_wrap {
    display: flex;
    flex-direction: row;
    position: relative;
    border-top: 1px solid #ddd;
    width: 100%;
}
.store_wrap .store_list_wrap {
    width: 22%;
    /* box-shadow: 0 3px 5px 2px rgba(0,0,0,.2); */
    z-index: 1;
    /* position: absolute; */
    border-right: 1px solid #ddd;
}
.store_wrap .nav_search {
    height: 4em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width: 100%;
    display: inline-flex;
}
.store_wrap .nav_search form {width:100%;display: inline-flex;justify-content: space-between;}
.store_wrap .nav_search input {font-size:.9em;padding:.5rem 1rem;width: 85%;border: 0;}
.store_wrap .nav_search button {border:0;background:0;width: 10%;font-size: 1.5rem;}
.store_wrap .seltype {
    width: 100%;
    padding: 1rem 2rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}
.store_wrap .seltype select {
    width: 100%;
    height: 40px;
}
.store_wrap .store_list {height: calc(100vh - 3.61vw - 320px);overflow: auto;background-color: #fff;}
.store_wrap .store_list li {
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.store_wrap .store_list li.on {/* border:1px solid red; */background-color: #ffe9eb;}
.store_wrap .store_list li strong {
    font-size: 17px;
}
.store_wrap .store_list address {
    margin-bottom: 0;
    font-size: 16px;
}
.store_wrap .store_list::-webkit-scrollbar {width:6px; background-color:#ddd; border-radius:6px}
.store_wrap .store_list::-webkit-scrollbar-thumb {background-color:var(--color-main); border-radius:6px}
.store_wrap .store_list::-webkit-scrollbar-track {}

.store_wrap .store_map {
    background-color: #ccc;
    height: 650px;
    width: 58%;
}
.store_wrap .store_map img {width:100%; height:100%; object-fit:cover; object-position:center}
.store_active{width: 20%;height:650px;background-color: #fff;/* position: absolute; */left: 0;left: 25%;z-index: 1;}
.store_active .tit {display:flex;align-items: center;margin-bottom: 1rem;border-bottom: 1px solid #ddd;padding: 1rem 2rem;height: 73px;}
.store_active .btn_close {border:none; font-size:1.5rem}
.store_active .detail_head {padding:0 2rem}
.store_active .detail_body {padding:1rem 2rem}
.store_active .detail_body li, .store_active .detail_body p, .store_active .detail_body a, .store_active .detail_body strong {font-size:17px;font-weight:300;word-break: keep-all;}
.store_active .detail_body p {
    padding: 0;
}
.store_active .detail_body strong {font-weight:500;width: 20%;}
.store_active .detail_body li {
    display: flex;
    flex-wrap: wrap;
    padding: .5rem 0;
}
.store_active address {margin-bottom:0; width:100%}
.store_active .detail_body li:nth-of-type(2), .store_active .detail_body li:nth-of-type(3), .store_active .detail_body li:nth-of-type(4) {display:none}
.detail_head .name {margin-bottom:1rem;display: block;font-size: 20px;}

.st_list_slide {overflow: hidden;position: relative;height: 220px;border-radius: 10px;z-index: 0;}
.st_list_slide img {width:100%;height: 100%;object-fit:cover;object-position: center;border: 1px solid #d5d5d5;border-radius: 1em;}
.paging {z-index:11;bottom: 0;position: absolute;text-align: center;}
.paging span{background-color: #fff;opacity:.5;width: 10px;height: 10px;}
.paging span.swiper-pagination-bullet-active {opacity:1; background-color:var(--color-main)}
.marker_title {
    z-index: 11;
    position: absolute;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    width: 200px;
    padding: 2px;
    top: -5px;
    left: -26px;
    /* border: 1px solid var(--color-main); */
    border-radius: 1em;
    color: #fff;
    font-weight: 500;
}
#map {width:100%;height: 650px;}

/* FHD - 1920 / 24인치이상 */
@media only screen and (min-width: 1024px) and (max-width:1600px) {	
}

/* PC (해상도 1023px)*/ 
@media only screen and (max-width:1023px) {
    .store_wrap {
    flex-wrap: wrap;
}
    .store_wrap .store_list_wrap, .store_active {width:50%;height: auto;}
    .store_wrap .store_map {width: 100%;margin: 0 2rem;height: 360px;}
    .store_wrap .store_list {height: calc(100vh - 10vw - 515px);}
}


/* 모바일 가로, 테블릿 세로 (해상도 ~ 767px)*/ 
@media only screen and (max-width:767px) {
    .store_all p {padding:0}
    .store_wrap {}
    .store_wrap .store_list_wrap, .store_active {width:100%}
    .store_wrap .store_list {height: calc(100vh - -15vw - 474px);}
    #map {height: 360px;}
}