* {
  outline: 0;
  font-family: sans-serif;
  letter-spacing: -.05em;
  padding: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: small;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}
textarea, input, select, button {
  vertical-align: middle;
  font-family: 'Dotum', serif;
}

#map {
    clear: both;
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    border: 1px soli black;
}

.ol-scale-line {
  background: rgba(0,60,136,0.3);
  border-radius: 4px;
  bottom: 15px;
  left: 8px;
  padding: 2px;
  position: absolute;
}
/* -------------------------------------------------------------------------------------------------------------------------------------- */
    .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }
/* -------------------------------------------------------------------------------------------------------------------------------------- */
      .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: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "X";
      }
/* -------------------------------------------------------------------------------------------------------------------------------------- */
      .ol-zoomslider {
        top: 4.5em;
        left: .5em;
        height: 200px;
        border: 1px solid #7b98bc;
        background-color: rgba(0,60,136,0.2);
      }
      .ol-zoomslider button {
        position: relative;
        height: 10px;
      }
      .ol-touch .ol-zoomslider {
        top: 5.5em;
      }

      * {
        outline: 0;
        font-family: sans-serif
      }
      body {
        background-color: #fafafa
      }
      span.msg,
      span.choose {
        color: #555;
        padding: 5px 0 10px;
        display: inherit
      }
      .container {
        width: 500px;
        margin: 50px auto 0;
        text-align: center
      }
      /* -------------------------------------------------------------------------------------------------------------------------------------- */
      /*Styling Selectbox*/
      .dropdown {
        width: 110px;
        display: inline-block;
        border: 1px solid #7b98bc;
        background-color: rgba(100,60,136,0.2);
        border-radius: 5px;
        box-shadow: 0 0 2px rgb(204, 204, 204);
        transition: all .5s ease;
        font-size: 13px;
        color: #474747;
        height: 20px;
        text-align: center;
        position:absolute;
        top: 15px; right: auto; bottom: auto; left: 50px;
      }
      .dropdown .select {
          cursor: pointer;
          display: block;
          padding: 0px
      }
      .dropdown .select > i {
          font-size: 13px;
          color: #888;
          cursor: pointer;
          transition: all .3s ease-in-out;
          float: right;
          line-height: 20px
      }
      .dropdown:hover {
          box-shadow: 0 0 4px rgb(204, 204, 204)
      }
      .dropdown:active {
          background-color: #f8f8f8
      }
      .dropdown.active:hover,
      .dropdown.active {
          box-shadow: 0 0 4px rgb(204, 204, 204);
          border-radius: 5px 5px 0 0;
          background-color: #f8f8f8
      }
      .dropdown.active .select > i {
          transform: rotate(-90deg)
      }
      .dropdown .dropdown-menu {
          position: absolute;
          background-color: #fff;
          width: 100%;
          left: 0;
          margin-top: 1px;
          box-shadow: 0 1px 2px rgb(204, 204, 204);
          border-radius: 0 1px 5px 5px;
          overflow: hidden;
          display: none;
          max-height: 144px;
          overflow-y: auto;
          z-index: 9
      }
      .dropdown .dropdown-menu li {
          padding: 5px;
          transition: all .2s ease-in-out;
          cursor: pointer
      } 
      .dropdown .dropdown-menu {
          padding: 0;
          list-style: none
      }
      .dropdown .dropdown-menu li:hover {
          background-color: #f2f2f2
      }
      .dropdown .dropdown-menu li:active {
          background-color: #e2e2e2
      }
      /* -------------------------------------------------------------------------------------------------------------------------------------- */
      /* 메인맵 회전 컨트롤*/
      path:hover { fill: rgb(0, 213, 255);}
      #main_naviCompass svg {position: absolute; top: 12px; right: 17px;}
      #main_naviCompass {user-select: none;}
      #main_naviCompassDirection {
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rgba(0,0,0,0);
        top: 10px;
        right: 5px;
      }
      #main_naviCompass {
        display: block;
        position: absolute;
        background-color: rgba(0,0,0,0);
        top: 10px;
        right: 5px;
      }
      #main_drag {
        width: 100px;
        height: 100px;
        margin: auto auto;
        position: absolute;
        border-radius: 50%;
        top: 10px;
        right: 5px;
      }
      #main_rotate {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 9px;
        left: 42px;
        background: rgba(0,0,0,0);
        z-index: 99999;
        cursor: pointer;
      }
      /* -------------------------------------------------------------------------------------------------------------------------------------- */