#apimap { position:relative; width:100%; height:100% }
#apimap>#view_map>img {max-width:1980px }

@media (max-width:780px) {
  .content_body .mapSearch_Result{ width:100%; height:400px; margin-left:auto; margin-right:auto;}
  
}
#view_map { position:absolute; z-index:1; top:0; left:0; right:0; bottom:0}
#main_map { position:absolute; z-index:2; top:0; left:0; right:0; bottom:0}
/* 코스 사이드맵 추가 */
.side-map {position:absolute; overflow:visible }
.side-map>div{position:absolute;background-repeat:no-repeat; background-position:0% 0%; border:1px solid #fff}
#course_18-1>div{bottom:0; right:0; width:90px; height:80px; background-image:url(apimap/layer_18-1.png)}
#course_18-1>div>.marker {top:35px; left:35px;}
/* 이미지 마커 */
#apimap .marker { position:absolute;  width:1px; height:1px; overflow:visible}
#apimap .marker:before { content:""; position:absolute;  bottom:0; background-repeat:no-reapeat; background-size:100% auto}
#apimap .marker_course:before,
#apimap .marker_course .customoverlay { bottom:0; right:0;  width:30px; height:30px; background-position:100% 100%; }
#apimap .marker_course.level_h:before {  background-image:url(apimap/marker_course_h.png)}
#apimap .marker_course.level_m:before {  background-image:url(apimap/marker_course_m.png)}
#apimap .marker_course.level_r:before {  background-image:url(apimap/marker_course_r.png)}
#apimap .marker_course>.label { position:absolute; right:0; bottom:0; display:block; height:30px; width:30px; line-height:30px; color:#fff; font-weight:900; font-size:.888em; letter-spacing:-.05; white-space:nowrap;  text-align:center}
#apimap .marker_courseLight:before { left:-19px; top:10px; width:38px; height:32px; background-image:url(apimap/marker_courseLight.png); background-position:50% 100%}
#apimap .marker_courseLight>.label{ position:absolute; left:-4px; top:10px; display:block; height:18px; width:24px; line-height:18px; color:#fff; font-weight:900; font-size:.825em; letter-spacing:-.05; white-space:nowrap;  text-align:center}
#apimap .marker_courseStart:before { left:-21px; bottom:-1px; width:42px; height:52px; background-image:url(apimap/marker_courseStart.png); background-position:50% 100%}
#apimap .marker_courseEnd:before { left:-21px; bottom:-1px; width:42px; height:52px; background-image:url(apimap/marker_courseEnd.png); background-position:50% 100%}
#apimap .marker_courseStamp:before { left:-12px; bottom:-12px; width:24px; height:24px; background-image:url(apimap/marker_courseStamp.png); background-position:50% 50%}
#apimap .marker_courseInfo:before { left:-12px; bottom:-12px; width:24px; height:24px; background-image:url(apimap/marker_courseInfo.png); background-position:50% 50%}
#apimap .marker_courseLittleInfo:before { left:-12px; bottom:-12px; width:24px; height:24px; background-image:url(apimap/marker_courseLittleInfo.png); background-position:50% 50%}
#apimap .marker_courseCleanInfo:before { left:-12px; bottom:-12px; width:24px; height:24px; background-image:url(apimap/marker_courseCleanInfo.png); background-position:50% 50%}
#apimap .marker_coursePoint:before { left:-7px; bottom:-7px; width:14px; height:14px; background-image:url(apimap/marker_coursePoint.png); background-position:50% 50%}
#apimap .marker_coursePoint>.label { position:relative; left:-3em; top:10px; display:block; width:6em; font-size:.825em; text-align:center;text-shadow:0 0 2px #fff}
#apimap .marker_coursePoint>strong.label { color:#000; font-weight:bold}
#apimap .marker_coursePoint>span.label {color:#0aafed}
#apimap .marker_toilet:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_toilet.png); background-position:50% 100%}
#apimap .marker_accomm:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_accomm_2.png); background-position:50% 100%}
#apimap .marker_enjoy:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_enjoy_2.png); background-position:50% 100%}
#apimap .marker_food:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_food_2.png); background-position:50% 100%}
#apimap .marker_shop:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_shop_2.png); background-position:50% 100%}
#apimap .marker_passport:before { left:-14px; bottom:-1px; width:28px; height:34px; background-image:url(apimap/marker_passport.png); background-position:50% 100%}
#apimap .marker_littleInfo:before { left:-19px; bottom:-1px; width:38px; height:38px; background-image:url(apimap/marker_littleInfo.png); background-position:50% 100%}
#apimap .marker_olleInfo:before { left:-19px; bottom:-1px; width:38px; height:38px; background-image:url(apimap/marker_olleInfo.png); background-position:50% 100%}
#apimap .marker_cleanInfo:before { left:-19px; bottom:-1px; width:38px; height:38px; background-image:url(apimap/marker_cleanInfo.png); background-position:50% 100%}
#apimap .marker_littleInfo>.label,
#apimap .marker_olleInfo>.label,
#apimap .marker_cleanInfo>.label {position:absolute; left:-14px; bottom:9px; display:block; height:28px; width:33px; line-height:28px; color:#000; font-weight:900; font-size:.825em; letter-spacing:-.05; white-space:nowrap;  text-align:center}
#apimap .marker_listAccomm:before { left:-16px; bottom:-1px; width:32px; height:38px; background-image:url(apimap/marker_accomm.png); background-position:50% 100%}
#apimap .marker_listEnjoy:before { left:-16px; bottom:-1px; width:32px; height:38px; background-image:url(apimap/marker_enjoy.png); background-position:50% 100%}
#apimap .marker_listFood:before { left:-16px; bottom:-1px; width:32px; height:38px; background-image:url(apimap/marker_food.png); background-position:50% 100%}
#apimap .marker_listShop:before { left:-16px; bottom:-1px; width:32px; height:38px; background-image:url(apimap/marker_shop.png); background-position:50% 100%}
#apimap .marker_listAccomm>.label,
#apimap .marker_listEnjoy>.label,
#apimap .marker_listFood>.label,
#apimap .marker_listShop>.label{ position:absolute; left:-13px; bottom:5px; display:block; height:32px; width:28px; line-height:32px; color:#000; font-weight:900; font-size:.825em; letter-spacing:-.05; white-space:nowrap;  text-align:center}
/* 추가 정보 창 */
.ol-overlay-container  { position:absolute; z-index: 80;}
.ol-popup {position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 10px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px;left: -50px; min-width: 280px}
.ol-popup:after, .ol-popup:before {content: " "; position: absolute;top: 100%;  width: 0; height: 0; border: solid transparent; pointer-events: none}
.ol-popup:before {left: 48px; margin-left: -11px; border-top-color: #cccccc; border-width: 11px}
.ol-popup:after {left: 48px;margin-left: -10px;border-top-color: white; border-width: 10px}
.ol-popup-closer {position: absolute; z-index: 81;top: 5px;right: 8px; text-decoration: none}
.ol-popup-closer:after { content: "✖"; width:40px; height:40px; line-height:30px; text-align:center; color:#808286; font-size:20px; }
.course_info { z-index: 99;position:absolute; top:calc(50% - 120px); left:calc(50% - 148px); width:296px; border:2px solid #000; border-radius:5px; background-color:#fff}
.course_info>p { margin:10px 10px 0; line-height:1.5em; height:1.5em; color:#808285 }
.course_info>p>strong { float:left; font-weight:bold }
.course_info>p>span { float:right; }
.course_info>img { width:276px; margin:10px 10px 5px ; padding-bottom:10px;}
.course_info>.btn { display:block; margin:0 10px 10px auto; width:9em; height:1.6em; line-height:1.6em; background-color:#ed6d00; color:#fff; text-align:center}

#mapPopupContent { }
#mapPopupContent .popupTitle {box-sizing:border-box; padding-bottom:10px; margin-bottom:10px; padding-right:30px; border-bottom:1px solid #e2e2e2; font-size:1.285em; }
#mapPopupContent .img { float:left; width:150px; height:120px; overflow:hidden}
#mapPopupContent .img img { min-width:100%; min-height:100% }
#mapPopupContent .popupSummary { margin-left:15px; line-height:20px; width:calc(100% - 15px)}
#mapPopupContent .img + .popupSummary { margin-left:175px; min-height:72px; width:225px}
#mapPopupContent .popupSummary>span { display:block; word-wrap:keep-all; text-indent:-15px;margin-bottom:5px; /*2018.01.17*/ word-break: break-all} 
#mapPopupContent .popupSummary>span>strong { font-weight:bold}
#mapPopupContent>a {  display:block; height:36px; line-height:36px; background-color:#f28021; font-size:1.258em; color:#fff; text-align:center; }
#mapPopupContent .popupSummary + a { margin-top:10px} 
#mapPopupContent .popupSummary a{ word-break: break-all}
#mapPopupContent .btnSet {margin:10px 0 0; justify-content:space-between}
#mapPopupContent .btnSet a {margin:0; min-width:calc(50% - 15px)}
#mapPopupContent .img + .popupSummary + .btnSet, #mapPopupContent .img + .popupSummary + a { margin:10px 0 0 160px}
#mapPopupContent .btnSet a.detaile { display:block; width:100%; height:36px; line-height:36px; background-color:#f28021; font-size:1.258em; color:#fff; text-align:center;}

/* 범례 */
.btn_toggle { display:inline-block; padding:2px;font-size:.8em; line-height:1.2em;  text-align:center}
.btn_toggle:before { content:""; display:block; width:30px; height:30px; margin:0 auto; background-position:50% 0%; background-size:30px 30px; background-repeat:no-repeat}
.btn_toggle.forGPS { width:45px}
.btn_toggle.forGPS:before {background-image:url(apimap/legend_gps.png)}
.btn_toggle.forGPS.off:before {background-image:url(apimap/legend_gps_off.png)}
.btn_toggle     .sr-only:after{content:"(이)가 켜져있습니다. 비활성화하시려면 클릭하세요"}
.btn_toggle.off .sr-only:after{content:"(이)가 꺼져있습니다. 활성화하시려면 클릭하세요."}

.btn_listCtrl { display:inline-block; box-sizing:border-box; width:24px; height:24px; border-radius:3px; opacity:.35; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat}
.toList { background-image:url(apimap/icon_list.png)}
.toGrid { background-image:url(apimap/icon_grid.png)}
.btn_listCtrl:hover { opacity:.7}
.typeGrid .toGrid, .typeList .toList { opacity:1}
.mapLegend_course { position:absolute;z-index:99; background-color:#fff; border-radius:7px; box-shadow:1px 1px 3px rgba(0,0,0,.5) }
.mapLegend_course ul { padding:3px}
.mapLegend_course li { clear:both; list-style:none; border-radius:5px}
.mapLegend_course li:before { content:""; display:block; width:30px; height:30px; background-position:50% 0%; background-size:auto; background-repeat:no-repeat}
.mapLegend_course li a,.mapLegend_course li a:hover, .mapLegend_course li a:link,.mapLegend_course li a:visited, .mapLegend_course li a:active { color:#000}
.mapLegend_course.typeList li { height:30px; line-height:30px; padding:0 5px;margin:4px 2px}
.mapLegend_course.typeList li:before { float:left; margin-right:5px}
.mapLegend_course.typeList li>em, .mapLegend_course.typeList li>a { font-weight:bold}
.mapLegend_course.typeGrid ul{ display:flex; width:192px; justify-content:flex-start; flex-wrap:wrap}
.mapLegend_course.typeGrid li { width:50px; padding:5px; margin:2px;  text-align:center}
.mapLegend_course.typeGrid li>em, .mapLegend_course.typeGrid li>a { display:flex; justify-content:center; align-items:center; flex-wrap:wrap;  width:50px; height:2.4em; font-size:.8em; line-height:1.2em; }
.mapLegend_course.typeGrid li>em>span, .mapLegend_course.typeGrid li>a>span {display:block}
.mapLegend_course.typeGrid li:before { margin:0 auto; }
.mapLegend_course .btnset { position:relative; height:24px; padding:5px; border-top-left-radius:7px; border-top-right-radius:7px; background-color:#ddd; line-height:24px;  line-stacking:0}
.mapLegend_course .btnset>a {display:inline-block; box-sizing:border-box; }
.mapLegend_course .btn_close { float:right; width:20px; height:24px; background-image:url(apimap/legend_close.png); background-position:0% 50%; background-repeat:no-repeat}
.mapLegend_course.close .btnset { background-color:transparent }
.mapLegend_course.close ul, .mapLegend_course.close.typeGrid .toList, .mapLegend_course.close.typeList .toGrid, .mapLegend_course.close .btn_close{ display:none }
.mapLegend_course li.legend_courseRoad:before { background-image:url(apimap/legend_courseRoad.png)}
.mapLegend_course li.legend_courseRoadB:before { background-image:url(apimap/legend_courseRoadB.png)}
.mapLegend_course li.legend_courseRoadLight:before { background-image:url(apimap/legend_courseRoadLight.png)}
.mapLegend_course li.legend_courseRoadSide:before { background-image:url(apimap/legend_courseRoadSide.png)}
.mapLegend_course li.legend_courseRoadTempSide:before { background-image:url(apimap/legend_courseRoadTempSide.png)}
.mapLegend_course li.legend_courseLight:before { background-image:url(apimap/legend_courseLight.png)}
.mapLegend_course li.legend_courseStart:before { background-image:url(apimap/legend_courseStart.png)}
.mapLegend_course li.legend_courseEnd:before { background-image:url(apimap/legend_courseEnd.png)}
.mapLegend_course li.legend_courseStamp:before { background-image:url(apimap/legend_courseStamp.png)}
.mapLegend_course li.legend_toilet:before { background-image:url(apimap/legend_toilet.png)}
.mapLegend_course li.legend_courseInfo:before { background-image:url(apimap/legend_olleInfo.png)}
.mapLegend_course li.legend_littleInfo:before { background-image:url(apimap/legend_littleInfo.png)}
.mapLegend_course li.legend_cleanInfo:before { background-image:url(apimap/legend_cleanInfo.png)}
.mapLegend_course li.legend_accomm:before { background-image:url(apimap/legend_accomm.png)}
.mapLegend_course li.legend_food:before { background-image:url(apimap/legend_food.png)}
.mapLegend_course li.legend_enjoy:before { background-image:url(apimap/legend_enjoy.png)}
.mapLegend_course li.legend_shop:before { background-image:url(apimap/legend_shop.png)}
.mapLegend_course li.legend_passport:before { background-image:url(apimap/legend_passport.png)}
.mapLegend_course li.legend_courseLvR:before { background-image:url(apimap/marker_course_r.png); background-size:28px 28px}
.mapLegend_course li.legend_courseLvM:before { background-image:url(apimap/marker_course_m.png); background-size:28px 28px}
.mapLegend_course li.legend_courseLvH:before { background-image:url(apimap/marker_course_h.png); background-size:28px 28px}
/* 범례에 마커토글기능 추가 */
.mapLegend_course li.toggleable { background-color:#f0f2f6; }
.mapLegend_course li.toggleable.off { color:#aaa; background-color:transparent}
.mapLegend_course li>em:after { content:"켜짐"}
.mapLegend_course li.off>em:after { content:"꺼짐"}
.mapLegend_course li.legend_courseStamp.off:before { background-image:url(apimap/legend_courseStamp_off.png)}
.mapLegend_course li.legend_cleanInfo.off:before { background-image:url(apimap/legend_cleanInfo_off.png)}
.mapLegend_course li.legend_toilet.off:before { background-image:url(apimap/legend_toilet_off.png)}
.mapLegend_course li.legend_accomm.off:before { background-image:url(apimap/legend_accomm_off.png)}
.mapLegend_course li.legend_food.off:before { background-image:url(apimap/legend_food_off.png)}
.mapLegend_course li.legend_enjoy.off:before { background-image:url(apimap/legend_enjoy_off.png)}
.mapLegend_course li.legend_shop.off:before { background-image:url(apimap/legend_shop_off.png)}
.mapLegend_course li.legend_passport.off:before { background-image:url(apimap/legend_passport_off.png)}

#apimap .label.sr-only, #apimap .sr-only, .mapLegend_course>h5,.mapLegend_course li>em:after {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


  #divLegendLevel .btnset { position:absolute; right:20px; bottom:50%;  height: 0; padding: 0; background-color:transparent; overflow:visible }
  #divLegendLevel .btnset>a.btn_listCtrl{ display:none}
  #divLegendLevel.close .btnset{ right:auto; left:0; bottom:0; height: auto; width: auto; padding: 3px;}
  #divLegendLevel.close.typeGrid .btnset>a.btn_listCtrl.toGrid,
  #divLegendLevel.close.typeList .btnset>a.btn_listCtrl.toList { display: block !important}
  #divLegendLevel.close .btnset>a.btn_close, #divLegendLevel.close ul {display: none}
  #divLegendLevel .btnset>a.btn_close { position:absolute; top:calc(50% - 12px); transform:rotate(-90deg) }
  #divLegendLevel ul {display:flex;  width:110px;margin-right:15px; padding: 2px; justify-content:space-around; flex-wrap:wrap; align-items:flex-start}
  #divLegendLevel li { position:relative; width:28px; height:28px; margin: 2px; padding:0;}
  #divLegendLevel li>em, #divLegendLevel li>a {position:absolute; display:none}
  #divLegendLevel li:before { position:absolute;top:0; left:0; width:28px; height:28px; line-height: 26px; text-align:center; font-weight: bold; color:#fff  }
  #divLegendLevel li.legend_courseLvR:before {content:"하"}
  #divLegendLevel li.legend_courseLvM:before {content:"중"}
  #divLegendLevel li.legend_courseLvH:before {content:"상"}


/* 위치조정 */
#divLegendGPS{right: 10px; top:50px}
#divLegendLevel{bottom:60px; left:10px}
#divLegendPlace{top:50px; left:10px}
#divCourseElevation{left:10px; bottom:60px; top:auto;}
.mapNavi { position:absolute; left:5px; top:5px; z-index:100}
.mapNavi button {background-color:#000; cursor:pointer}
.mapNavi button:hover, .mapNavi button:active { background-color:#0aafed}
@media (max-width:779px){
  .mapLegend_course .btnset { position:static;  height: 0; padding: 0; background-color:transparent; overflow:visible }
  .mapLegend_course .btnset>a.btn_listCtrl{ display:none}
  #map-main .mapLegend_course.close .btnset{ height: auto; width: auto; padding: 3px;}
  #map-main .mapLegend_course.close.typeGrid .btnset>a.btn_listCtrl.toGrid,
  #map-main .mapLegend_course.close.typeList .btnset>a.btn_listCtrl.toList { display: block}
  #map-main .mapLegend_course.close .btnset>a.btn_close, #map-main .mapLegend_course.close ul {display: none}
  #divLegendPlace.mapLegend_course .btnset>a.btn_close { position:absolute; bottom:5px;right:5px;z-index: 98; transform:rotate(-45deg) }
  #divLegendPlace.mapLegend_course ul { display:flex;  width:84px; justify-content:flex-start; flex-wrap:wrap; align-items:flex-start }
  #divLegendPlace.mapLegend_course li { position:relative; width:20px; height:20px; padding: 2px; margin:2px;  text-align:center}
  #divLegendPlace.mapLegend_course li>em, #divLegendPlace.mapLegend_course li>a { position:absolute;top:0;left:0; z-index: 99; width: 20px;height:20px; justify-content:center; align-items:center; flex-wrap:wrap; width:100%;  font-size:.8em; line-height:1.2em;; color:#fff }
  #divLegendPlace.mapLegend_course li>em>span, #divLegendPlace.mapLegend_course li>a>span { position:relative;top:0;left:20px;display:none; background-color:#333;width: 4.5em; text-align: center; word-break:keep-all }
  #divLegendPlace.mapLegend_course li>em>span:first-child, #divLegendPlace.mapLegend_course li>a>span:first-child {padding-top:5px; border-top-left-radius:3px; border-top-right-radius: 3px;}
  #divLegendPlace.mapLegend_course li>em>span:last-child, #divLegendPlace.mapLegend_course li>a>span:last-child {padding-bottom:5px;border-bottom-left-radius:3px; border-bottom-right-radius: 3px;}
  #divLegendPlace.mapLegend_course li>em:hover>span, #divLegendPlace .mapLegend_course li>a:hover>span {display:block}
  #divLegendPlace.mapLegend_course li:before { float:none; margin:0 auto; width:20px; height:20px; background-size:20px auto;}
}

/* ol.css 커스텀마이징 */
.ol-control,.ol-scale-line{position:absolute;padding:2px}
.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}
.ol-mouse-position{top:8px;right:8px;position:absolute}
.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}
.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}
.ol-overlay-container{will-change:left,right,top,bottom}
.ol-unsupported{display:none}
.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}
.ol-control:hover{background-color:rgba(255,255,255,.6)}
.ol-zoom{top:107px;right:20px}/*{top:.5em;left:.5em}*/
.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}
.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.ol-zoom-extent{top:4.643em;left:.5em}
.ol-full-screen{right:.5em;top:.5em}
@media print{.ol-control{display:none}}
.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#999;border:none;border-radius:2px}
.ol-control button::-moz-focus-inner{border:none;padding:0}
.ol-zoom-extent button{line-height:1.4em}
.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}
.ol-touch .ol-control button{font-size:1.5em}
.ol-touch .ol-zoom-extent{top:5.5em}
.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#f28021}
.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}
.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}
.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}
.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}
.ol-attribution li{display:inline;list-style:none;line-height:inherit}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,.ol-attribution ul{display:inline-block}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution.ol-logo-only ul{display:block}
.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}
.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}
.ol-zoomslider {top:132px;right:20px;height:140px}/*{top:4.5em;left:.5em;height:200px}*/
.ol-zoomslider button{position:relative;height:10px}
.ol-touch .ol-zoomslider{top:5.5em}
.ol-overviewmap{left:.5em;bottom:.5em}
.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}
.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}
.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}
.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}
.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}

/* */
.ol-zoom .ol-zoom-out { margin-top:144px}