/* 
사이드 폭은 다음을 이용해서 조정하세요 브라우저에 따라 적용되지 않을 수 있습니다. (IE 지원하지 않음) 
전체를 지원하려면 var( --side-list-width ) 와 var( --side-off-right ) 을 찾아 각각 치환하면 됩니다.
*/
:root {
--side-list-width: 400px;
--side-off-right: -400px;
}
html,body {margin: 0;padding: 0;overflow: hidden;height: 100%;}
#map_wrapper {width: 100%;height: 100%;overflow: hidden;position: relative;}
#map {background-color: #ffeeee;width: calc(100% - var(--side-list-width));height: 100%;transition: all 0.4s;}
.side-off #map {width: 100%;}
#site_list_wrapper {position: absolute;right: 0;top: 0;width: var(--side-list-width);height: 100%;background-color: yellow;transition: all 0.4s;z-index: 2;}
.side-off #site_list_wrapper {right: var(--side-off-right);}
.btn-show-toggle {position: absolute;top: 50%;left: 0;transform: translate(-100%, -50%);border: 0;width: 36px;height: 60px;color: #fff;background-color: #1976d2;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
.btn-show-toggle i {transition: all 0.4s;}
.side-off .btn-show-toggle i {transform: rotate(180deg);}

@media (max-width: 767px) {
	#map {background-color: #ffeeee;width: 100%;height: 50%;transition: all 0.4s;}
	.side-off #map {height: 100%;}
	#site_list_wrapper {position: absolute;right: 0;top: 50%;width: 100%;height: 50%;background-color: yellow;transition: all 0.4s;z-index: 2;}
	.side-off #site_list_wrapper {right: 0;top: 100%;}
	.btn-show-toggle {position: absolute;top: 0;left: 50%;transform: translate(-50%, -100%);border: 0;width: 50px;height: 36px;color: #fff;background-color: #1976d2;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
	.btn-show-toggle i {transform: rotate(90deg);}
	.side-off .btn-show-toggle i {transform: rotate(-90deg);}
}

@media (min-width:248px) and (max-width:768px) {

	#btn-current-position {left: 90% !important; bottom: 0px !important;}

}

#site_list {width: 100%;height: 100%;background-color: #f2f2f2;overflow-y: scroll;}
#site_list li {background-color: #fff;margin: 10px;padding: 20px 10px;box-sizing: border-box;}
#site_list li .icon-no {display: inline-block;font-size: 16px;color: #fff;background-color: #3a8afd;width: 30px;height: 30px;text-align: center;line-height: 30px;cursor: pointer;}
#site_list li .tt a {text-decoration: none;font-size: 17px;font-weight: bold;}
#site_list li .tt a:hover {text-decoration: none;color: #06f;}
#site_list li .addr {margin-left: 30px;margin-bottom: 10px;line-height: 1.6;font-size: 15px;}
#site_list li .addr .d {color: #999;}
#site_list li .tel {margin-left: 30px;margin-top: 5px;line-height: 1.6;}
#site_list li .tel a {color: blue;}
#site_list .thumb {margin: 5px;border: 1px solid #ccc;border-radius: 4px;/* box-shadow: 5px 5px 5px #ccc;*/}
#site_list .thumb img {width: 100%;min-height: 180px;max-height: 180px;}

#btn-current-position {position: absolute;left: -50px;top: 10px;background-color: #0d79e8;width: 35px;height: 35px;border-radius: 50%;color: #fff;border:none}

.icon-spinner {display: none;position: fixed;z-index: 9999;width: 60px;height: 60px;top: 50%;left: 50%;margin-left: -30px;margin-top: -30px;color: orange;}
.load-animate {-webkit-animation: spin 1000ms infinite linear;-moz-animation: spin 1000ms infinite linear;-ms-animation: spin 1000ms infinite linear;animation: spin 1000ms infinite linear;}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes spin {
	100% {
		-ms-transform: rotate(360deg);
	}
}
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}
.c-info-site {max-width: 100%;width: 360px;padding: 4px;border: 1px solid #ccc;border-radius: 4px;background-color: #fff;position: relative;}
.c-info-site h2 {font-size: 1.4em;line-height: 1.6em;border-bottom: 1px solid teal;}
.c-info-site h2 a {color: #1976d2;}
.c-info-site .item {display: flex;flex-direction: row;align-items: center;}
.c-info-site .item .title {width: 80px;padding-right: 5px;/* text-align:right; */color: #06f;box-sizing: border-box;}
.c-info-site .item .memo {width: calc(100% - 80px);text-align: left;word-break: break-all;vertical-align: middle;white-space: break-spaces;}

.btn-overlay-close {position: absolute;width: 36px;height: 36px;border: 0;right: -18px;top: -18px;color: #fff;border-radius: 50%;background-color: #ef4418;}
.c-info-site .view-content {max-height: 400px;white-space: break-spaces;overflow-y: auto;}
.c-info-site .view-content img {max-width: 100%;height: auto;}

#site_list li .cate {display: flex;padding: 4px;border-radius: 4px;color: #000;font-size: 0.85em;align-items: center;font-family: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","NG","Malgun Gothic","맑은 ê³ ë”•",helvetica,sans-serif;}
#site_list li .cate span{display: inline-block;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 1;background: #75baff;box-sizing: border-box;color: #fff;font-size: 12px;transition: all .2s;border-radius: 10px;text-align: center;padding: 0px 8px;line-height: 22px;margin-right: 10px;}
#site_list li .price {display: inline-block;background-color: #1976d2;padding: 4px;border-radius: 4px;color: #fff;}
#site_list .ctl-box {background-color: #fff;font-size: 18px;color: #333;padding: 10px 0px 0px 15px;}

#site_list .ctl-box #box02 {background-color: #b11b1f;color: #fff;border-radius: 50px;line-height: inherit;}
#site_list .ctl-box .xi-pen {font-size: 18px;}
#site_list .ctl-box a {color: #1976d2;font-size: 28px;}
#site_list .ctl-box a img {height:45px}
#site_list .ctl-box .fa {font-size: 17px;margin-top: 10px;position: relative;}
#site_list .categories {display: flex;flex-wrap: wrap;padding: 0.5em;background-color: #fff;}
#site_list .categories a {display: inline-block;padding: 4px 8px;border: 1px solid #ddd;background-color: #fff;margin: 3px;border-radius: 4px;font-size: 0.9em;}
#site_list .categories a.on {color: #fff;background-color: #3a8afd;}
#site_list .search-box {display: flex;padding: 0px 10px 10px;background-color: #fff;}
#site_list #stx {border: 1px solid #ccc;border-radius: 4px;padding: 8px;flex-grow: 1;margin-right: 5px;}
#site_list .search-box > button {border: 1px solid #ccc;border-radius: 4px;padding: 8px; background-color: #3a8afd; color:#fff;}
#site_list .btn-more-wrapper {text-align: center;margin-bottom: 10px;padding:0px 10px}
#site_list .btn-more {background-color: #1976d2;color: #ddd;border-radius: 4px;padding: 0.5em 1em;font-size: 16px;border: 0;width:100%;}
#site_list .btn-more:disabled {background-color: #aaa;display: none !important;}