@charset "utf-8";
/**
 * @author https://www.cosmosfarm.com
 */

.store-map {position: relative; display: flex; align-items: stretch; justify-content: flex-end; height: 676px;}
.store-map .store-tabwrap {width: 500px;}
.store-map .map-wrap {position: absolute; z-index: 1; top: 0; left: 0; width: calc(100% - 540px); height: 100%; transition: all .3s ease;}
.store-map .map-wrap iframe {width: 100% !important; height: 100% !important}

.store-map .region {position: relative;}
.store-map .region strong {display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 50px; background: var(--white) url(images/ico_pin.svg) no-repeat left 15px center; border: 1px solid var(--black); border-radius: 4px; font-size: 14px; font-weight: 400; padding-left: 42px; cursor: pointer;}
.store-map .region strong:before {content: ''; position: absolute; z-index: 1; top: 15px; right: 15px; width: 20px; height: 20px; background: url(images/ico_select.svg) no-repeat center; transition: all .3s ease;}
.store-map .region ul {display: none; position: absolute; z-index: 2; top: 100%; left: 0; width: 100%; border-radius: 4px; margin-top: 5px; padding: 5px; border: 1px solid var(--black); background: var(--white);}
.store-map .region ul li {border-radius: 4px;}
.store-map .region ul li a {display: block; font-size: 14px; padding: 10px 40px; }
.store-map .region ul li + li {margin-top: 5px;}
.store-map .region ul li:hover,
.store-map .region ul li.on {background: #F4F4F4;}
.store-map .region ul li.on {background: #F4F4F4;}
.store-map .region.on strong:before {transform: rotate(180deg)}

.cate-tab {display: flex; align-items: center; gap: 4px; margin-top: 12px;}
.cate-tab li {border: 1px solid #eee; border-radius: 4px; transition: all .3s ease;}
.cate-tab li a {display: block; width: 100%; height: 100%; color: #888; font-size: 13px; padding: 10px 16px; transition: all .3s ease;}
.cate-tab li:hover,
.cate-tab li.on {border-color: var(--black)}
.cate-tab li:hover a,
.cate-tab li.on a {color: var(--black)}

.store-tab {margin-top: 32px; height: calc(100% - 132px); overflow-y: scroll;}
.store-tab li {padding: 24px; transition: all .3s ease; cursor: pointer; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.store-tit {display: block; margin-bottom: 8px; font-weight: 600; line-height: 1.5;}
.store-tab li:hover {background: #F8F8F8;}
.store-tab li.on {background: #F8F8F8;}
.store-tab li.on .map-wrap {z-index: 10;}
.store-tab li .btn-wrap {width: 100%; justify-content: flex-end;}

.store-info {color: #888; font-size: 13px; line-height: 1.5;}
.store-info a {color: #888}
.store-info p {margin-top: 4px;}
.store-time {display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #eee;}
.store-time dl {display: flex; align-items: center; gap: 8px; font-size: 13px;}
.store-time dl + dl {margin-top: 4px;}
.store-time dl dt {flex-shrink: 0; width: 100px;}
.store-time dl dd {flex-grow: 1; color: #888;}

.store-view {width: 700px; margin: 0 auto;}
.store-view h4 {font-size: 30px; font-weight: 700; padding-bottom: 50px; margin-bottom: 50px; border-bottom: 2px solid var(--black);}
.store-view .store-time {display: block;}
.store-view .map-wrap {width: 100%; height: 500px; margin-top: 40px;}
.store-view .map-wrap iframe {width: 100% !important; height: 100% !important;}
.store-view .btn-wrap {padding-top: 20px; margin-top: 20px; border-top: 1px solid #eee;}


@media screen and (max-width: 1200px) {
	.store-map .store-tabwrap {width: calc(40% - 25px);}
	.store-map .map-wrap {width: calc(60% - 25px);}
}

@media screen and (max-width: 1024px) {
	.store-map {height: auto;}
	.store-map .store-tabwrap {width: 100%;}
	.store-map .store-tab {position: relative; width: 100%; padding-top: 272px;}
	.store-map .store-tab ul {height: 350px; overflow-y:scroll;}
	.store-map .map-wrap {width: 100%; height: 240px;}
}
@media screen and (max-width: 768px) {
	.sub-title.store > .list-top {flex-direction: row;}
	.sub-title.store .board_tab {width: 100%; order: 0;}
	.sub-title.store .btn-wrap {width: auto; order: 1;}
	.cate-tab li a {font-size: 12px; line-height: 1;}
	.store-tab {height: auto;}
	.store-tab li {padding: 24px 20px;}
	.store-tit {font-size: 15px;}
	.store-info {font-size: 12px;}
	.store-time dl {font-size: 12px;}
	.store-tab li .btn-wrap {margin-top: 5px;}
}

@media all and (max-width:640px){
}

@media all and (max-width:480px){
}

@media all and (max-width:374px){
}