@-webkit-keyframes spinner-border {
  to {
    transform: rotate(360deg)
  }
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion:reduce) {
  .spinner-border,
  .spinner-grow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s
  }
}

.ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; cursor: default; user-select: none; }
.ol-tooltip-measure { opacity: 1; font-weight: bold; }
.ol-tooltip-static { background-color: #ffcc33; color: black; border: 1px solid white; } 
.ol-tooltip-measure:before, .ol-tooltip-static:before { border-top: 6px solid rgba(0, 0, 0, 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -7px; left: 50%; }
.ol-tooltip-static:before { border-top-color: #ffcc33; }

.ol-zoom {right: 17px;left: auto; top: 261px; transition: 0.5s;width:33px;background-color: #eee; border-radius: 5px;}
.ol-zoom.on {right: 17px;}
.ol-zoom .ol-zoom-out { margin-top: 200px; }
.ol-zoomslider{left: auto; transition: 0.5s; background: #bdbdbd; top: 305px; height: 180px; right: 32px; width: 4px;}
.ol-zoomslider.on{right: 32px;}
.ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
.ol-zoom-in.ol-has-tooltip:focus [role=tooltip] { top: 3px; }
.ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
.ol-zoom-out.ol-has-tooltip:focus [role=tooltip] { top: 232px; }

.ol-control button{height: 33px;width: 33px;background-color: #fff;margin: 0;font-size: 0; color: #fff;}
.ol-zoomslider button{margin-left: -4px; height: 12px; width: 12px; border-radius: 20px; background: #387ee7;}
.ol-zoom .ol-zoom-in{border-radius: 5px 5px 0 0;position:relative;}
.ol-zoom .ol-zoom-in::before{content:'';display:inline-block;width:1px;height:11px;background:#333;position:absolute;left:calc(50% - 0.5px);top: calc(50% - 5.5px);}
.ol-zoom .ol-zoom-in::after{ content: ''; display: block; width: 11px; height: 1px; background: #333; left: calc(50% - 5.5px); top: calc(50% - 0.5px); position: absolute;}
.ol-zoom .ol-zoom-out{border-radius: 0 0 5px 5px ;position:relative;}
.ol-zoom .ol-zoom-out::after{content:'';display:inline-block;width:10px;height:1px;background:#333;top:50px;}
.ol-control button:hover, 
.ol-control button:focus{ outline: 0;}

.ol-control button:hover::after, 
.ol-control button:hover::before, 
.ol-control button:focus::before, 
.ol-control button:focus::after{background: #387ee7; outline: 0;}

.ol-zoomslider::after,
.ol-zoomslider::before{content: ''; display: none; border-left: 5px solid #ff5200; border-bottom: 5px solid transparent; border-top: 5px solid transparent; left: -10px; position: absolute;}
.ol-zoomslider::after{border-left: 5px solid #00bba1;}
.ol-zoomslider.firstNo::before{display: block;}
.ol-zoomslider.lastNo::after{display: block;}

canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

/*2025-03 반응형 수정 */
.sec-search .btn-back {
   display: block;
   width: 32px;
   height: 32px;
   background: #fff url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat;
   transform: rotate(90deg);
   font-size: 1px;
   color: transparent;
   border: 1px solid #e1e1e1;
   margin-right: 10px;
}

@media all and (min-width: 768px) and (max-width: 1024px) {
   /* 태블릿 가로 (해상도 768px ~ 1023px)*/
   .left-navi.close:before {
      display: none;
   }
   .cu-modal .layer-popup {
      transform: translate(-50%, -55%);
   }
   .layer-popup.buInfo .layer-body th,
   .layer-popup.buInfo .layer-body td {
      padding: 4px 10px;
   }
   .sec-search .btn-back {
      display: none;
   }
   .ol-touch .ol-zoomslider {
      top: 305px;
   }
}

@media all and (min-width: 480px) and (max-width: 1023px) {
   /* 모바일 가로 & 태블릿 세로 (해상도 480px ~ 1023px)*/
   .map-toolkit {
      display: flex;
      top: 30px;
   }
   .map-toolkit .item {
      flex-direction: row;
   }
   .map-toolkit .item:not(:first-child) {
      margin-top: 0;
      margin-left: 10px;
   }
   .ol-zoom {
      top: 75px;
   }
   .ol-zoom .ol-zoom-out {
      margin-top: 135px;
   }
   .ol-zoomslider {
      height: 115px;
   }
   .ol-touch .ol-zoomslider {
      top: 118px;
   }
   
   .left-navi .sec-navi {
      width: 280px;
   }
   .sec-search .btn-back {
      display: block;
      width: 32px;
      height: 32px;
      background: url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat;
      transform: rotate(90deg);
      font-size: 1px;
      color: transparent;
      border: 1px solid #e1e1e1;
   }
   .left-navi .sec-search.open {
      width: 280px;
      transform: translate(-100%, 50px);
      z-index: 100;
      height: calc(100% - 50px);
   }
   .left-navi .sec-search .result .list .item-content {
      display: none;
   }
   .layer-popup .layer-header {
      height: 35px;
   }
   .layer-popup.buInfo .layer-body th,
   .layer-popup.buInfo .layer-body td {
      font-size: 12px;
      padding: 4px 10px;
   }
   .cu-modal .layer-popup {
      transform: translate(-50%, -55%);
   }
   .layer-popup .layer-header,
   .left-navi .sec-search .result .title {
      height: 35px;
   }
   .left-navi {
      width: 280px;
   }
   .left-navi .sec-search .result .title .tit,
   .left-navi .sec-search .result .title .num,
   .left-navi .sec-search .search .form-input,
   .left-navi .sec-search .search .form-input::placeholder {
      font-size: 14px;
   }
   .left-navi .sec-search .result .list .item-title .tit,
   .form-checkbox .contxt {
      font-size: 13px;
   }
   .left-navi .sec-search .option {
      padding: 10px;
   }

   .left-navi .sec-search .option .items {
      margin-top: 5px;
   }
   .map-legend {
      bottom: 50px;
      right: 70px;

      top: auto;
   }
   .map-legend .legend-item {
      display: flex;
      width: 300px;
      height: 60px;
   }

   .map-legend .legend-item .content {
      text-align: center;
      flex: 1;
      width: 100%;
      height: 100%;
   }
}

@media all and (max-width: 479px) {
   /* 모바일 세로 (해상도 ~ 479px)*/
   /* #owp-header .logo::before {
      width: 134px;
   } */

   #owp-header .logo .serviceName {
      font-size: 19px;
   }
   .ol-zoom {
      top: 215px;
   }
   .ol-zoom .ol-zoom-out {
      margin-top: 0px;
   }
   .ol-zoomslider {
      height: 115px;
   }
   .ol-touch .ol-zoomslider {
      top: 118px;
   }
   .ol-zoomslider{ 
   	top: 260px;
   	height: 110px;
   	display:none; 
   }
   .ol-zoom .ol-zoom-out::after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
   }
   .left-navi {
      top: 50%;
      left: 0;
      bottom: auto;
      width: 100vw;
      height: 50vh;
   }
   .left-navi .sec-navi {
      width: 100vw;
   }
   .left-navi .sec-navi .category {
      height: calc(50vh - 80px);
      padding-bottom: 150px;
   }
   .left-navi .btn-expanded {
      transform: rotate(-90deg) translateY(0);
      left: 49%;
      top: -40px;
   }
   .left-navi.close {
      transform: translateY(50%);
   }
   .left-navi.close .btn-expanded {
      top: -40px;
   }
   .left-navi .sec-search.open {
      transform: translate(-100%, 50px);
      z-index: 100;
      width: 100vw;
      height: calc(100% - 75px);
   }

   .left-navi .sec-search .result .list .item-content {
      display: none;
   }
   .cu-modal .layer-popup {
      max-width: 500px;
      width: 90%;
   }
   .layer-popup .layer-header,
   .left-navi .sec-search .result .title {
      height: 40px;
   }
   .layer-popup.buInfo .layer-body th,
   .layer-popup.buInfo .layer-body td {
      font-size: 12px;
      padding: 4px 10px;
   }
   .left-navi .sec-search .search {
      height: 40px;
   }
   .left-navi .sec-search .result .title .tit,
   .left-navi .sec-search .result .title .num,
   .left-navi .sec-search .search .form-input,
   .left-navi .sec-search .search .form-input::placeholder {
      font-size: 14px;
   }
   .left-navi .sec-search .result .list .item-title .tit,
   .form-checkbox .contxt {
      font-size: 13px;
   }
   .left-navi .sec-search .option .items {
      margin-top: 5px;
   }
   .left-navi .sec-search .option {
      padding: 10px;
   }
   .button-wrap .btn {
      font-size: 12px;
      text-indent: -9999em;
      width: 32px;
      height: 32px;
   }
   .button-wrap .btn.ㅠtn-layerClose {
	   	text-indent: 0; 
	   	width: 100%; 
	   	height: 100%;
   }
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 768px) {
    .left-navi.close { transform: translateY(50%); }
    .left-navi.close .btn-expanded { top: -40px; }
  }
}