.mapDiv{display:inline-block;width:100%;}
.map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
.map_wrap {position:relative;width:68%;height:700px;float:left}
#menu_wrap {position:relative;top:0;left:0;bottom:0;width:30%;height:700px;margin:0px 0 30px 0px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;float:right;border:1px solid #000;}
.bg_white {background:#fff;}
#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}
#menu_wrap .option{text-align: center;}
#menu_wrap .option p {margin:10px 0;font-size:12pt;}  
#menu_wrap .option button {margin-left:5px;}
#placesList li {list-style: none;}
#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: default;min-height: 50px;font-size:12pt;}
#placesList .item span {display: block;margin-top:4px;}
#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#placesList .item .info{padding:10px 0 10px 55px;}
#placesList .info .gray {color:#8a8a8a;}
#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
#placesList .info .tel {color:#009900;}
#placesList .item .markerbg {float:left;position:absolute;width:36px; height:33px;margin:8px 0 0 8px;background:url(https://t1.daumcdn.net/mapjsapi/images/marker.png) no-repeat;background-size:50% 80%;}
#placesList .item .info a{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

#placesList .item .marker_2 {background-position: 0 -56px;}
#placesList .item .marker_3 {background-position: 0 -102px}
#placesList .item .marker_4 {background-position: 0 -148px;}
#placesList .item .marker_5 {background-position: 0 -194px;}
#placesList .item .marker_6 {background-position: 0 -240px;}
#placesList .item .marker_7 {background-position: 0 -286px;}
#placesList .item .marker_8 {background-position: 0 -332px;}
#placesList .item .marker_9 {background-position: 0 -378px;}
#placesList .item .marker_10 {background-position: 0 -423px;}
#placesList .item .marker_11 {background-position: 0 -470px;}
#placesList .item .marker_12 {background-position: 0 -516px;}
#placesList .item .marker_13 {background-position: 0 -562px;}
#placesList .item .marker_14 {background-position: 0 -608px;}
#placesList .item .marker_15 {background-position: 0 -654px;}
#pagination {margin:10px auto;text-align: center;}
#pagination a {display:inline-block;margin-right:10px;}
#pagination .on {font-weight: bold; cursor: default;color:#777;}

.info_wrap{padding:1px;font-size:11px;width:293px;height:165px;}
.wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 170px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
.wrap * {padding: 0;margin: 0;}
.info_wrap .info {width: 286px;height: 158px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
.info_wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.info_wrap .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
.info_wrap .title p{width:90%;font-size: 16px;font-weight: bold;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
.info_wrap .close {position: absolute;top: 7px;right: 9px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
.info_wrap .close:hover {cursor: pointer;}
.info_wrap .body {position: relative;overflow: hidden;}
.info_wrap .desc {position: relative;margin: 3px 0 0 133px;height: 126px;width:151px;white-space:normal;overflow-y:auto;}
.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
.info_wrap .img {position: absolute;top: 6px;left: 5px;width: 120px;height: 120px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.info_wrap .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
.info_wrap  .link {color: #5085BB;}


.desc {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.desc::-webkit-scrollbar {
    width: 10px;
}
.desc::-webkit-scrollbar-track { 
    background-color: gray;
}
.desc::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.desc::-webkit-scrollbar-button {
    display: none;
}

/* hover 효과 */
.desc::-webkit-scrollbar-thumb:hover {
    background-color: blue;
    transition: all 0.2s; /* 작동 안 됨 */
}

/* 코너에 라운드 효과 */
.desc::-webkit-scrollbar-track,
.desc::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

@media  (min-width:1300px) {
.map_wrap {width:78%;}
#menu_wrap {width:20%;}

}

@media  (max-width:800px) {
.map_wrap {width:100%;}
#menu_wrap {width:100%;top:20px;}

}