@charset "utf-8";

/* sub - common css */
@import url("../sub-common.css");


.body-container .content-background-wrap .content-background {padding:100px 0 0 0}
.footer-container {margin-top: 0}

/* 서치 영역 */
.mobile-search-depth-area {display: none}
.search-depth-top {display: none}

.depth {border-bottom: 1px solid #e5e5e5; padding: 15px 0}
.depth3 {border-bottom: 0}
.depth-tit {float: left; color: #30b686; font-weight: 600; font-size: 2rem; width: 180px; text-align: right; margin-right: 80px;}
.show-all a, div.location-wrap .map-loca a {font-size: 1.4rem; color: #5f5f5f;  padding: 5px 15px; display: block;border: 1px solid #f1f7f5;border-radius: 5px; box-shadow: 3px 3px 0px #dee2e0;text-align: center}
.show-all, .location-wrap .map-loca {float: left; margin-right:15px }
.show-all a:hover, div.location-wrap .map-loca:hover a {color: #30b686;border-color: #30b686}
.location-wrap .map-loca.selected a { color: #30b686;border-color: #30b686; font-weight: 600}
.location-wrap .map-loca {display: inline-block; margin-bottom: 10px;}
.location-wrap {float: left; width: calc(100% - 360px)}

.age-select-wrap .age-select {line-height: 27px; float: left; margin-right: 10px; font-size: 1.4rem;}
.age-select-wrap .select-box select {background-position: 83%; padding: 0 5px;box-shadow: 3px 3px 0px #dee2e0; border-radius: 5px}
.age-select-wrap .select-box {width: 45px; height: 27px; margin-right: 10px;}

.search-btn-wrap {margin-bottom:30px}
.search-btn-wrap .btn-wrap.inline {float: right; margin-top: 10px}
.search-btn-wrap .btn-wrap.inline .mint-btn img {vertical-align: middle; margin-right: 5px}


@media(max-width: 1200px) {
	.depth-tit {font-size: 1.7rem; margin-right: 30px; width: 100px;}
	.btn-wrap button {min-width: 100px; font-size: 1.3rem; line-height: 49px; height: 49px}
	.location-wrap {width: calc(100% - 202px)}
}

/* 맵 영역 */
.map-background-wrap {width: 100%; background-color: #f1f7f5;}
.map-background-wrap .content-container {width: 1200px; margin: 0 auto; padding: 50px 0}
.map-background-wrap .content-container .map-area-wrap {padding: 10px 0}

.check-input {float: left}
.check-label {font-size: 1.4rem;font-weight: 600;}

.gps-search {float: left; background-color: #30b686; box-shadow: 3px 3px 0px #dee2e0; border-radius: 7px; position: relative; top: -3px; transition: background-color .3s}
.gps-search:hover {background-color: #11A771}
.gps-search a span {padding: 5px 7px; color: #fff; display: block; font-size: 1.2rem}
.gps-search a span img {margin-right: 3px; vertical-align: middle; width: 14px; height: 14px}

.gps-modal-wrap {position: fixed; width: 100%; height: 100%; z-index: 99; background-color: rgba(0,0,0,0.3); top: 0; left: 0; display: none}
.gps-modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; z-index: 99; background-color: #fff; padding: 20px; width: 350px; box-shadow: 3px 3px 0 #d2dbd7;}
.gps-modal .modal-top {padding-bottom: 10px; border-bottom: 1px solid #888; margin-bottom: 10px}
.gps-modal .modal-top-tit {float: left}
.gps-modal .modal-top-tit h2 {font-size: 1.7rem; padding-top: 3px;}
.gps-modal .modal-close-btn {float: right}
.modal-search-area input[type="text"].text-input {width: 100%;height: 40px; border-radius: 5px; font-size: 1.4rem; box-shadow: none}
.modal-search-area .btn-wrap {margin-top: 15px}
.modal-search-area .btn-wrap button {width: calc(50% - 5px); font-size: 1.3rem; height: 40px; line-height: 40px; border-radius: 5px; box-shadow: none}

/* 맵 영역(현재위치) */
.map-area .head-count {right: 20px; left: auto}
.map-area .map-pin-wrap.short {left: 44%}
.map-area .map-pin-wrap.max {left: 73%}
.map-area .map-pin-wrap.location { left: 75%; top: 80%;}
.map-pin-wrap.location .max-map-pin .outline .circle { padding: 8px; border-radius: 20px; background: #3559E0;}

.outline { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; z-index: 999; }
.waves { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #ffffff ; width: 25px; height: 25px; border-radius: 50%; z-index: -99; }
.waves:before, .waves:after { content: ""; position: absolute; background: rgba(171, 189, 255, 0.4); margin-left: -20px; margin-top: -8px; width: 40px; height: 40px; border-radius: 50%; -webkit-animation: wave 3s infinite linear; animation: wave 2s infinite linear; z-index: -99; }


@-webkit-keyframes wave {
  0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
  100% { -webkit-transform: scale(4.5); transform: scale(4.5); opacity: 0; }
}

@keyframes wave {
  0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
  100% { -webkit-transform: scale(4.5); transform: scale(4.5); opacity: 0;}
}



@media(max-width: 1200px) {
	.map-background-wrap .content-container {width: 100%}	
}

@media(max-width: 768px) {
	.map-background-wrap  {background-color:#fff}
	.gps-modal .modal-top-tit h2 {font-size: 1.5rem;}
}

@media(max-width: 500px) {
	.gps-modal {width: 250px; border-radius: 5px}
}

@media(max-width: 450px) {	
	.gps-info {position: static; margin-top: 5px;}
}

/* 맵 서치 영역 */
.map-search-result-wrap {position: absolute; top: 0; left: 0; z-index: 80;padding: 20px 15px; background-color: rgba(255,255,255,0.9); box-shadow: 6px 6px 0px rgba(0,0,0,0.1); border-radius: 20px; width: 340px; height: 100%}
.map-search-result-wrap .search-box .input-area {float: left; width: calc(100% - 50px)}
.map-search-result-wrap .search-box .input-area input[type="text"].text-input {height: 50px; border-radius: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px;box-shadow: 5px 5px 0px #d2dbd7; width: 100%}
.map-search-result-wrap .select-box-wrap {width: 100%; margin-bottom: 15px; height: 30px}
.map-search-result-wrap .select-box {width: 85px; height:30px }

.map-search-result-wrap .select-box select {box-shadow: 3px 3px 0px #dee2e0; border-radius: 5px; background-position: 87%}
.gps-info {float: right;}
.gps-info.gps-info-mo {display: none}
.gps-info span {color: #30b686; font-weight: 600; display: inline-block; font-size: 1.2rem; padding: 5px 7px;background-color: #fff; border-radius: 7px; box-shadow: 2px 2px 0px #30b686; border: 1px solid #dee2e0; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gps-info span img {margin-right: 3px; vertical-align: middle;}


@media (max-width: 768px) {
	.gps-info {display: none}
	.gps-info.gps-info-mo {display: block; float: none; position: absolute; top: 10px; right: 10px;}
	.gps-info.gps-info-mo span {font-size: 1.3rem;}
	.mo-search-box {display: block;width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 10px 15px}
	.mo-search-box .search-box .btn-wrap {float: left; margin-top: 0}
	.mo-search-box .search-box .btn-wrap button {height: 50px; min-width: 50px; line-height: 49px; border-radius: 0;border-top-right-radius:5px; border-bottom-right-radius: 5px ; box-shadow: 4px 4px 0px rgba(0,0,0,0.2);}
	.mo-search-box .search-box .input-area {float: left; width: calc(100% - 50px)}
	.mo-search-box .search-box .input-area input[type="text"].text-input {height: 50px; border-radius: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); width: 100%}
	.mo-search-box .search-box .btn-wrap button img {vertical-align: middle}
}

/* 센터 박스 */

.list-open-close {display: none}
.center-box-wrap {width: 100%; height: 555px; overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.center-box-wrap::-webkit-scrollbar {display: none;}
.center-box-wrap > a { display: block; }
.center-box-wrap .center-box {border-radius: 10px; padding: 15px; background-color: #fff; border: 2px solid #e5e7e6; box-shadow: 3px 3px 0px #d2dbd7; margin-bottom: 15px}
.center-box-wrap .center-box h3.center-tit {font-size: 1.7rem; font-weight: 600; color: #30b686;padding-bottom: 10px; margin-bottom:10px; border-bottom: 1px dashed #ddd; }
.center-box-wrap .center-box p {font-size: 1.4rem; color: #5e5e5e; line-height: 22px; padding-bottom: 5px}
.center-box-wrap .center-box p img { margin-right: 5px; position: relative; top: 4px; }
.center-box-wrap .center-box p.center-address img { width: 10px; }
.center-box-wrap .center-box p.center-phone img { width: 12px; }
.center-box-wrap .center-box span.center-distance {font-size: 1.4rem; color: #CBCBCB; font-weight: 600}

.center-box-wrap .center-box.selected,.center-box-wrap .center-box:hover {border-color: #30b686}

@media(max-width: 1024px) {
	.center-box-wrap {height: 423px;}
}

/* 센터 검색 박스 페이징 */
.paging ul {margin-top: 15px;}
.paging ul li {height: 22px; line-height: 22px; width: 22px; font-size: 1.2rem; margin: 0}
.paging ul li a img {margin-top:7px; width: 8px; height: 8px; margin-left: -3px}
.paging .rotate img {margin-left: 3px}





/* 모바일 UI */

@media(max-width: 768px) {	
	/* 모바일 검색 UI */
	.search-depth-wrap {position: fixed; top: 0; left: 100%;width: 100%; height: 100%;z-index: 999;background: #fff; overflow-y: auto; padding: 10px;}
	
	/* 모바일 검색 UI 상단 헤더 */
	.search-depth-top {display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #6b6b6b; }
	.search-tit {float: left; }
	.search-tit h2 {font-size: 1.8rem; padding-top: 5px; color: #545050}
	.search-depth-wrap .close-btn {float: right;}
	.search-depth-wrap .close-btn span img {opacity: 0.5; width: 26px; height: 26px;}	
	
	/* 모바일 검색 UI 내용 */
	.search-depth-wrap .depth {padding: 10px;}
	.search-depth-wrap .depth-tit {padding-bottom: 20px; float: none; text-align: left; font-size: 1.5rem; width: 100%}
	.search-depth-wrap .location-wrap {width: calc(100% - 72px)}
	.search-depth-wrap .show-all a, div.location-wrap .map-loca a {font-size: 1.3rem}
	.search-depth-wrap .search-btn-wrap .btn-wrap.inline .mint-btn img {width: 13px; height: 13px;}
	.search-depth-wrap .search-btn-wrap .btn-wrap button {min-width: 80px; font-size: 1.3rem; height: 40px; line-height: 39px}
	.depth4 .depth-tit {display: none}
	.depth4 .input-area {width: 100%}
	.depth4 .input-area input[type="text"].text-input {height: 40px}	
	
	/* 모바일 버전 검색조건 표시 */
	.mobile-search-depth-area {display: block; border-bottom: 1px solid #d3dede; padding-bottom: 10px;text-align: center}
	.mobile-search-depth-area h3 {font-size: 1.5rem; padding-bottom: 10px;}
	.mobile-search-depth-area p {display: inline-block; font-size: 1.4rem; padding-bottom: 10px; margin-right: 10px}
	.mobile-search-depth-area .search-info .point {color: #30b686; font-weight: 600; margin-right: 5px}

	/* 상세검색 버튼 */
	.detail-search-wrap {float: right; margin-top: 5px}
	.detail-search-wrap a {display: block; color: #fff; background-color: #1f4183; padding: 7px 10px; font-size: 1.2rem; box-shadow: 3px 3px 0px #dee2e0; border-radius: 7px; position: relative; top: -4px}
	.detail-search-wrap a span img {width: 13px; height: 13px; margin-right: 3px}

	/* 본문 */
	.body-container .content-background-wrap .content-background {padding: 35px 0 0 0}
	.map-background-wrap .content-container {padding: 10px 10px}
	.map-area {border: 1px solid #d9d6de;}

	/* 목록 펼치기 */
	.map-search-result-wrap .scroll-area { padding: 0 20px 20px; height: calc(100% - 60px);}
	.map-search-result-wrap .list-open-close {display: block}
	.map-search-result-wrap .list-open-close {text-align: center; padding: 10px;}
	.map-search-result-wrap .list-open-close img {opacity: 0.5; position: relative; top: -4px; margin-right: 5px; width: 20px; height: 20px;}
	.map-search-result-wrap .list-open-close .list-close {display: none}

	.map-area .map-search-result-wrap {width: 100%; height: 63%; bottom: -297px; top: auto; box-shadow: 0px -6px 0px rgba(0,0,0,0.1); padding: 0; border-radius: 20px 20px 0 0}
	.center-box-wrap {height: calc(100% - 85px); overflow-y: scroll;}
	.center-box-wrap .center-box {padding: 10px; height: auto; overflow: initial;}
	.center-box-wrap .center-box h3.center-tit {font-size: 1.5rem}

	/* 정원 여유 */
	.map-area .head-count {text-align: center; left: 10px; transform: none; width: auto; top: 10px;border: 0; background-color: rgba(255,255,255,0.8);z-index: 28;box-shadow: 0 0px 10px #00000024; right: auto;}
	.map-area .head-count span {display: block}
	.map-area .head-count span.none-area {display: none}
	.map-area .head-count span:first-child {margin-right:0; margin-bottom: 5px}
	.map-area .head-count span.short-center::after,
	.map-area .head-count span.max-center::after {content: none}
	.map-area .head-count span.short-center::before,
	.map-area .head-count span.max-center::before {content: none}
	.map-area .head-count span.short-center, .map-area .head-count span.max-center {font-size: 1.2rem}
}


@media(max-width: 500px) {
	.center-box-wrap .center-box h3.center-tit {font-size: 1.4rem}
	.center-box-wrap .center-box p {font-size: 1.3rem}
	.center-box-wrap .center-box span.center-distance {font-size: 1.2rem}
}

@media(max-width: 450px) {
	.mo-search-box {width: 100%}
	input[type=checkbox]:not(old) + label {font-size: 1.2rem}
	.search-depth-wrap .depth-tit {padding-bottom: 15px}
	.search-depth-wrap {padding: 10px;}
	.age-select-wrap .age-select {font-size: 1.3rem}
	.search-detpth-tab {width: 100%;}
	.show-all {display: inline-block}
	.search-depth-wrap .location-wrap {float: none; width: 100%}	
	.center-map-wrap {float: none;}
}

@media(max-width:350px) {
	.depth3 .show-all {float: none; margin-right: 0; margin-bottom: 10px;}
}