@charset "utf-8";


/************************************************** 
지도페이지
***************************************************/

/* 지도 상단 헤더 */
#map {width: 100%; height: 100vh;}
#mapHd {position: relative; width: 100%; z-index: 999;}
#mapHd .inner {height: 70px; display: flex; align-items: center; gap: 60px; padding: 0 40px; background: #059C7E; color: #fff;}
#mapHd .head-title {font-size: 28px; font-weight: 600; font-family: 'NEXON-Lv2-Gothic';}
#mapHd .head-title::after {content: ''; background: url(../../../user/web/images/icon/icon_map_title.svg) no-repeat; width: 19px; height: 14px; display: inline-block; margin-left: 10px; margin-bottom: -3px;}
#mapHd .map-tab {display: flex; align-items: center;}
#mapHd .map-tab li {font-size: 20px; display: flex; align-items: center; font-weight: 500; opacity: .6; transition: .3s;}
#mapHd .map-tab li::after {content: ''; background: #E1E1E1; width: 3px; height: 3px; display: block; margin: 0 10px;}
#mapHd .map-tab li:last-child:after {display: none;}
#mapHd .map-tab li.on {opacity: 1; font-weight: 600;}
#mapHd .map-tab li:hover {opacity: 1; font-weight: 600;}
#mapHd .utils {margin-left: auto; display: flex; align-items: center; gap: 20px;}
#mapHd .srch-btn {display: none;}
#mapHd .home-btn {font-weight: 600;}
#mapHd .home-btn::after {content: ''; background: url(../../../user/web/images/icon/icon_map_home.svg) no-repeat; width: 19px; height: 17px; display: inline-block; margin-left: 10px;}

#mapHd .mo-map-tab {display: none;}
#mapHd .mo-map-tab li {font-size: 18px; font-weight: 500; color: #777;}
#mapHd .mo-map-tab li a {}
#mapHd .mo-map-tab li.on a {background: #00BA8F; color: #fff; border-radius: 5px; padding: 6px 10px;}
#mapHd .mo-map-tab li::after {content: ''; width: 1px; height: 14px; display: inline-block; vertical-align: middle; background: #C0C0C0; margin: 0 10px; margin-bottom: 3px;}
#mapHd .mo-map-tab li:last-child::after {display: none;}

/* 지도 영역 */
#map .map-wrap {position: relative; width: 100%; height: calc(100vh - 70px); background: beige;}




/* 좌측 검색메뉴창 */
#map .left-menu {position: fixed; top: 70px; left: 0; z-index: 100; width: 100%; max-width: 447px; height: calc(100vh - 70px); padding: 20px 40px; background: #fff; overflow-y: auto; transition: .3s;}
#map .left-menu .left-menu-close {display: none; position: absolute; top: 20px; right: 20px;}
#map .map-srch-form {display: flex; flex-direction: column; gap: 35px}
#map .map-srch-form .item .title {font-size: 20px; font-weight: 700; margin-bottom: 20px;}
#map .map-srch-form .item .title span {font-size: 13px; color: #555; font-weight: 500; margin-left: 5px;}
#map .left-menu .current-btn {color: #0D8469; font-weight: 600; border: 1px solid #00BA8F; background: #E8F5F2; padding: 20px; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 5px;}
#map .left-menu .current-btn::before {content: ''; background: url(../../../user/web/images/icon/icon_current_btn.svg) no-repeat; width: 25px; height: 24px; display: block; margin-right: 10px;}
#map .left-menu .search-box {display: flex; gap: 10px; background: #E8F5F2;padding: 5px 10px; border-radius: 5px;}
#map .left-menu .search-box input {border: none; background: transparent; color: #777; width:calc(100% - 23px); padding: 10px; font-size: 16px;}
#map .left-menu .region-btns {width:100%; display: flex; flex-wrap: wrap; gap: 8px;}
#map .left-menu .region {border: 1px solid #ddd; padding: 6px 10.5px; color: #333; border-radius: 5px; font-size: 16px;}
#map .left-menu .region.on {background: #00A37D; color: #fff;}
#map .left-menu #rental-type {width: 100%; height: 45px; appearance: none !important; -webkit-appearance: none; -moz-appearance: none; background: url(../../../user/web/images/icon/icon_select_arrow.svg) center right 15px no-repeat; padding-left: 15px; padding-right: 48px; font-size: 16px;}
#map .left-menu .date-range {display: flex; gap: 10px; align-items: center;}
#map .left-menu .date-btn {width: 100%; height: 45px; font-size: 16px; font-family: 'pretendard'; background: url(../../../user/web/images/icon/icon_map_date.svg) center right 15px no-repeat; padding-left: 15px; padding-right: 48px; box-sizing: border-box;}
#map .left-menu input[type="date"] {position: relative; padding-right: 30px;}
#map .left-menu input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0;cursor: pointer;position: absolute;right: 8px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;}
#map .left-menu input[type="date"]::-moz-calendar-picker-indicator {opacity: 0;}
#map .left-menu .btn-wrap {display: flex; justify-content: center; gap: 10px;}
#map .left-menu .btn-wrap button {width: 100%; max-width: 100px; border: 1px solid #ddd; padding: 12px; border-radius: 5px;}
#map .left-menu .btn-wrap .btn-submit {background: #00BA8F; color: #fff; border-color: #00BA8F;}



/* 검색메뉴창 상세정보창 */
#map .detail-menu {display: none; position: absolute; top: 0px; left: 447px; z-index: 10000; width: 100%; max-width: 445px; height: calc(100vh - 70px); background: #FAFAFA; overflow-y: auto; transition: .3s;}
#map .detail-menu .hd-sticky {position: sticky; top: -2px; left: 0; z-index: 5; background: #FAFAFA; padding: 50px 40px 40px; }
#map .detail-menu .hd-sticky .tit-wrap {display: flex; align-items: center; justify-content: space-between;}
#map .detail-menu .drag-handle {display: none;}
#map .detail-menu .title {font-size: 17px; font-weight: 600;}
#map .detail-menu .detail-close {}

#map .detail-menu .detail-list {display: flex; flex-direction: column; gap: 40px; padding: 0px 40px;}
#map .detail-menu .detail-list .item .cate {font-size: 14px; color: #fff; display: inline-block; padding: 6px 8px; border-radius: 3px; margin-bottom: 10px;}
#map .detail-menu .detail-list .item .cate1 {background: #12A442;}
#map .detail-menu .detail-list .item .cate2 {background: #2573FF;}
#map .detail-menu .detail-list .item .cate3 {background: #27B8E0;}
#map .detail-menu .detail-list .item .cate4 {background: #50BA9C;}
#map .detail-menu .detail-list .item .cate5 {background: #FFBB28;}
#map .detail-menu .detail-list .item .cate6 {background: #FF7621;}
#map .detail-menu .detail-list .item .cate7 {background: #865DBE;}
#map .detail-menu .detail-list .item .cate8 {background: #FF7A97;}
#map .detail-menu .detail-list .item .cate9 {background: #76D54A;}
#map .detail-menu .detail-list .item .cate10 {background: #37557D;}
#map .detail-menu .detail-list .item .cate11 {background: #A76700;}
#map .detail-menu .detail-list .item .cate12 {background: #d45cd6;}


#map .detail-menu .detail-list .item p.title {font-size: 19px; font-weight: 700;}
#map .detail-menu .detail-list .item .btns {font-size: 15px; font-weight: 600; display: block; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px 10px; margin: 30px 0; display: flex; align-items: center; justify-content: center;}
#map .detail-menu .detail-list .item .btns a {display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; transition: .3s;}
#map .detail-menu .detail-list .item .btns a:hover {font-weight: 700;}
#map .detail-menu .detail-list .item .vr-btn {border-right: 1px solid #ddd;}
#map .detail-menu .detail-list .item .vr-btn::before {content: ''; background: url(../../../user/web/images/icon/icon_map_vr.svg) no-repeat; width: 24px; height: 22px; display: block; margin-top: -2px;}
#map .detail-menu .detail-list .item .info-btn {}
#map .detail-menu .detail-list .item .info-btn::before {content: ''; background: url(../../../user/web/images/icon/icon_map_detail_info.svg) no-repeat; width: 18px; height: 22px; display: block; margin-top: -2px;}
#map .detail-menu .detail-list .info-list {display: flex; flex-direction: column; gap: 10px;}
#map .detail-menu .detail-list .info-list li {font-size: 15px; display: flex; gap: 10px;}
#map .detail-menu .detail-list .info-list li span {display: block;}
#map .detail-menu .detail-list .info-list li .tit {font-weight: 600; width: 75px; display: inline-block; text-align: justify; position: relative }
#map .detail-menu .detail-list .info-list li .tit::after {content: ''; width: 1px; height: 18px; background: #CACACA; position: absolute; top: 0; right: 0;}
#map .detail-menu .detail-list .info-list li .txt {width: calc(100% - 75px - 10px);}


/* 검색메뉴창 상세정보창 - 페이징 */
#map .detail-menu .pagination {padding-top: 30px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-bottom: 20px;}
#map .detail-menu .pagination li button {flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #ccc; font-size: 14px; color: #555; border-radius: 5px;}
#map .detail-menu .pagination li button.active {color: #04B08E; border: 1px solid #04B08E; font-weight: bold;}

#map .detail-menu .pagination .page-navi {width: 28px; height: 28px; background: url(../../../user/web/images/main/icon_page_navi.svg) no-repeat center;}
#map .detail-menu .pagination .page-navi2 {width: 28px; height: 28px; background: url(../../../user/web/images/main/icon_page_navi2.svg) no-repeat center;}
#map .detail-menu .pagination .page-navi.btn-prev { margin-right: 10px;}
#map .detail-menu .pagination .page-navi.btn-next { transform: rotate(180deg); margin-left: 10px;}
#map .detail-menu .pagination .page-navi2.btn-end {transform: rotate(180deg);}

#map .detail-menu .detail-list .no-data {text-align: center; padding-top: 50px; color: #555;}

/* 지도 우측 상단 버튼*/
#map .map-controls {position: absolute; top: 25px; right: 20px; display: flex; gap: 20px; font-size: 15px; font-weight: 600; z-index: 100;}
#map .map-controls a {display: block;}
#map .map-controls .facility {position: relative;}
#map .map-controls .facility .fac-btn {min-width: 82px; background: #fff; border: 1px solid #059C7E; color: #059C7E; padding: 15px; border-radius: 5px; box-shadow: 0px 0px 8px 0px #0000001A; transition: .3s;}
#map .map-controls .facility .fac-btn.on {background: #059C7E; color: #fff;}
#map .map-controls .facility .fac-list {display: none; flex-wrap: wrap; gap: 14px 0; min-width: 290px; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; padding: 15px; border-radius: 5px; box-shadow: 0px 0px 8px 0px #0000001A; }
#map .map-controls .facility .fac-list li {width: 33.33%; color: #333; font-weight: 500; text-align: center;}
#map .map-controls .facility .fac-list li a {border-right: 1px solid #ddd;}
#map .map-controls .facility .fac-list li:nth-child(3n) a {border: none;}
#map .map-controls .facility .fac-list li a img {height: 17px; margin: 0 auto 5px;}

/* 주변 시세 버튼 */
#map .map-controls .quote {position: relative;}
#map .map-controls .quote .quo-btn {min-width: 82px; background: #fff; border: 1px solid #059C7E; color: #059C7E; padding: 15px; border-radius: 5px; box-shadow: 0px 0px 8px 0px #0000001A; transition: .3s;}
#map .map-controls .quote .quo-btn.on {background: #059C7E; color: #fff;}

#map .map-controls .map-type {display: flex; gap: 10px;}
#map .map-controls .type-list {display: flex; border-radius: 5px; overflow: hidden; box-shadow: 0px 0px 8px 0px #0000001A; text-align: center;}
#map .map-controls .type-list li {font-size: 14px; min-width: 82px; background: #fff; border-right: 1px solid #ddd;}
#map .map-controls .type-list li:last-child {border-right: none;}
#map .map-controls .type-list li.active {background: #059C7E; color: #fff;}
#map .map-controls .type-list li a {display: block; padding: 15px; text-align: center;}
#map .roadview-btn {min-width: 82px; background: #fff; padding: 15px; border-radius: 5px; box-shadow: 0px 0px 8px 0px #0000001A; text-align: center;}


/* 지도 범례 */
#map .map-legend {position: absolute; bottom: 20px; right: 40px; z-index: 50;}
#map .map-legend .legend-btn {font-size: 16px; font-weight: 600; width: 60px; height: 60px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 5px; text-align: center;  display: flex; flex-direction: column; align-items: center; justify-content: center;}
#map .map-legend .legend-btn img {margin: 0 auto 5px;}
#map .map-legend ul {display: none; flex-direction: column; gap: 5px; position:absolute; bottom: 0; right: calc(100% + 10px);  background: #fff; padding: 10px; min-width: 180px; box-shadow: 0px 0px 10px 0px #0000001A; border-radius: 10px;}
#map .map-legend ul li {font-size: 15px; color: #333; display: flex; justify-content: space-between; align-items: center;}
#map .map-legend ul li a {display: flex; font-weight: 600; align-items: center; gap: 5px;}
#map .map-legend ul li a::before {content: ''; width: 18px; height: 19px; display: block;}
#map .map-legend ul li.cate1 a::before {background: url(../../../user/web/images/main/map_tab_icon02.png) center no-repeat;}
#map .map-legend ul li.cate2 a::before {background: url(../../../user/web/images/main/map_tab_icon03.png) center no-repeat;}
#map .map-legend ul li.cate3 a::before {background: url(../../../user/web/images/main/map_tab_icon04.png) center no-repeat;}
#map .map-legend ul li.cate4 a::before {background: url(../../../user/web/images/main/map_tab_icon05.png) center no-repeat;}
#map .map-legend ul li.cate5 a::before {background: url(../../../user/web/images/main/map_tab_icon06.png) center no-repeat;}
#map .map-legend ul li.cate6 a::before {background: url(../../../user/web/images/main/map_tab_icon07.png) center no-repeat;}
#map .map-legend ul li.cate7 a::before {background: url(../../../user/web/images/main/map_tab_icon08.png) center no-repeat;}
#map .map-legend ul li.cate8 a::before {background: url(../../../user/web/images/main/map_tab_icon09.png) center no-repeat;}
#map .map-legend ul li .total {color: #009D79; font-weight: 500;}


/* 지도 마커 */
 .marker a {display: block; width: 42px; height: 42px; background: #ddd; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; border: 3px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); font-weight: 500;}
.marker.cate1 a {background: #12A442;}
.marker.cate2 a {background: #2573FF;}
.marker.cate3 a {background: #27B8E0;}
.marker.cate4 a {background: #2DD1A3;}
.marker.cate5 a {background: #FFC443;}
.marker.cate6 a {background: #FF7621;}
.marker.cate7 a {background: #865DBE;}
.marker.cate8 a {background: #FF7A97;}
.marker.cate9 a {background: #76D54A;}
.marker.cate10 a {background: #37557D;}
.marker.cate11 a {background: #A76700;}
.marker.cate12 a {background: #d45cd6;}
 .marker.cate1 a:focus::after{animation: pulse01 3s infinite; }
 .marker.cate2 a:focus::after{animation: pulse02 3s infinite; }
 .marker.cate3 a:focus::after{animation: pulse03 3s infinite; }
 .marker.cate4 a:focus::after{animation: pulse04 3s infinite; }
 .marker.cate5 a:focus::after{animation: pulse05 3s infinite; }
 .marker.cate6 a:focus::after{animation: pulse06 3s infinite; }
 .marker.cate7 a:focus::after{animation: pulse07 3s infinite; }
 .marker.cate8 a:focus::after{animation: pulse08 3s infinite; }
 .marker.cate9 a:focus::after{animation: pulse09 3s infinite; }
 .marker.cate10 a:focus::after{animation: pulse10 3s infinite; }
 .marker.cate11 a:focus::after{animation: pulse11 3s infinite; }
 .marker.cate12 a:focus::after{animation: pulse12 3s infinite; }


  .info-box {z-index: 10; width: 100%; max-width: 500px; background: #fff; border-radius: 8px; overflow: hidden; color: #333; box-shadow: 0px 0px 10px 0px #0000001A;}
 .info-box .info-hd {background: #00BA8F; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;}
 .info-box .info-hd p {font-size: 17px; color: #fff; font-weight: 600;}
 .info-box .info-hd p::before {content: ''; width: 6px; height: 6px; background: #FBFF89; border-radius: 100%; display: inline-block; vertical-align: text-top; margin-right: 5px;}
 .info-box .info-con {display: flex; flex-direction: column; gap: 28px; padding: 20px;}
 .info-box .info-con .tit {font-size: 16px; font-weight: 600;}
 .info-box .info-con .list {}
 .info-box .info-con .list li {font-size: 15px; display: flex; word-break: keep-all; }
 .info-box .info-con .list li span {display: block;}
 .info-box .info-con .list li .tt {width: 75px; font-weight: 600;}
 .info-box .info-con .list li .tt::before {content: ''; width: 4px; height: 4px; background: #BFD7ED; display: inline-block; vertical-align: middle; border-radius: 100%; margin-right: 5px;}
 .info-box .info-con .list li .tx {width: calc(100% - 75px);}
 .info-box .info-con .btns {display: flex; justify-content: space-between; width: 100%;}
 .info-box .info-con .btns li {width: 100%; border-right: 1px solid #ddd;}
 .info-box .info-con .btns li:last-child {border: none;}
 .info-box .info-con .btns li a {display: block;}
 .info-box .info-con .btns li span {display: block; font-size: 14px; text-align: center; font-weight: 500;}
 .info-box .info-con .btns li img {margin: 0 auto 5px;}

/* 로드뷰 박스 */
.roadview-box {position: fixed; z-index: 99999; min-width: 290px; background: #fff; border-radius: 8px; overflow: hidden; color: #333; box-shadow: 0px 0px 10px 0px #0000001A;top: 50%;left: 50%; transform: translate(-50%, -50%); }
.roadview-box .roadview-hd {background: #00BA8F; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;}
.roadview-box .roadview-hd p {font-size: 17px; color: #fff; font-weight: 600;}
.roadview-box .roadview-con {width: 500px; height: 400px;}

/* 지역명 마커 */
.region-marker {position:absolute; top: 50%; left: 50%; padding: 8px 15px; background-color: #00BA8F; color: #fff; border: 2px solid #fff; border-radius: 50px; font-weight: 600; cursor: pointer;z-index: 999; transition: .3s;}
.region-marker:where(:hover,:focus) {background: #009e79; box-shadow: 0 0 20px rgba(0, 186, 143, 0.48) ;}



/* 주변시세 마커 */
.price-marker { background: url(../../../user/web/images/sub/map_price_icon.png) center no-repeat; width: 57px; height: 46px; display: block; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.price-marker .size {font-size: 11px; margin-top: 9px;}
.price-marker .price {font-size: 13px; font-weight: bold;}

@media screen and (max-width: 1560px) {

}
@media screen and (max-width: 1400px) {
    #mapHd .inner {padding: 0 20px;}
    
    #map .left-menu {max-width: 320px; padding: 25px 20px;}
    #map .left-menu .current-btn {font-size: 16px;}
    #map .map-srch-form .item .title {font-size: 18px;}
    #map .left-menu .search-box input {font-size: 15px;}
    #map .left-menu .region {font-size: 15px;}
    #map .left-menu #rental-type {font-size: 15px;}
    #map .left-menu .date-range {font-size: 15px; gap: 2px; width: 48%;}
    #map .left-menu .btn-wrap button {font-size: 16px;}

    #map .detail-menu {left: 320px; max-width: 300px;}
    #map .detail-menu .hd-sticky {padding: 20px;}
    #map .detail-menu .title {font-size: 16px;}
    #map .detail-menu .detail-list {gap: 30px; padding: 0 20px; padding-bottom: 30px;}
    #map .detail-menu .detail-list .item .cate {font-size: 13px; margin-bottom: 6px;}
    #map .detail-menu .detail-list .item p.title {font-size: 17px;}
    #map .detail-menu .detail-list .item .btns {font-size: 13px; margin: 20px 0;}
    #map .detail-menu .detail-list .info-list li {font-size: 14px;}
    
    #map .map-legend {min-width: 160px;}
    #map .map-legend ul li {font-size: 14px;}   
}

@media screen and (max-width: 1024px) {

    #mapHd .map-tab {display: none;}
    #mapHd .mo-map-tab {display: block; background: #F6F9FF; padding: 20px; display: flex;}
    
    #mapHd .head-title {font-size: 24px;}
    #mapHd .home-btn {font-size: 0;}
    #mapHd .home-btn::after {margin-left: 0;}
    #mapHd .srch-btn img {width: 20px;}

    #map .left-menu {display: block; position: fixed; top:0; left: -100%; height: 100%; transition: left 0.5s ease; z-index: 9999; padding-top: 80px; width: 100%; max-width: none;}
    #map .left-menu.active {left: 0; width: 90%; }
    #map .detail-menu {max-width: none; height: 380px; width: 100%; position: fixed; top: auto; bottom: 0; left: 0;}
    #map .left-menu .left-menu-close {display: block;}
    /* #map .detail-menu.fullscreen {height: 90vh;}
    #map .detail-menu .drag-handle {display: block; width: 40px; height: 5px; background: #ccc; border-radius: 3px; margin: 0 auto; margin-bottom: 20px; cursor: ns-resize;} */

    #map .map-controls {top: 10px; right: 10px; flex-direction: column; gap: 10px;}
    #map .map-controls .type-list {flex-direction: column;}
    #map .map-controls .facility {text-align: center;}
    #map .map-controls .facility .fac-btn {width: 50px; height: 50px; min-width: auto; padding: 10px; display: flex; align-items: center;}
    #map .map-controls .quote {text-align: center;}
    #map .map-controls .quote .quo-btn {width: 50px; height: 50px; min-width: auto; padding: 10px; display: flex; align-items: center;}
    #map .map-controls .type-list li {width: 50px; height: 50px; min-width: auto; padding: 10px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #ddd; border-right: none;}
    #map .map-controls .type-list li a {padding: 0;}

     .info-box{min-width: 230px;}
     .info-box .info-hd {padding: 12px 15px;}
     .info-box .info-con {padding: 15px; gap: 16px;}
     .info-box .info-hd p {font-size: 16px;}
     .info-box .info-con .tit {font-size: 15px;}
     .info-box .info-con .list {display: flex; flex-direction: column; gap: 5px;}
     .info-box .info-con .list li {font-size: 14px; flex-direction: column;}
     .info-box .info-con .list li .tx {width: 100%; padding-left: 10px;}

    #map .map-legend {bottom: auto; top: 10px; left: 10px; min-width: 50px;}
    #map .map-legend .legend-btn {font-size: 15px; width: 50px; height: 50px;}
    #map .map-legend .legend-btn img {margin-bottom: 2px;}
    #map .map-legend ul {right: auto; bottom: auto; top: 0; left: 60px;}


    #map .map-controls .facility .fac-list {flex-direction: column; min-width: 110px; top: 0; right: calc(100% + 10px);gap: 8px;}
    #map .map-controls .facility .fac-list li {width: 100%;}
    #map .map-controls .facility .fac-list li a {display: flex; justify-content: flex-start; align-items: center; gap: 5px; border: none;}
    #map .map-controls .facility .fac-list li a img {margin: 0; width: 20px;}

    #mapHd .srch-btn {display: block;}
    #map .detail-menu .detail-list .no-data {font-size: 15px; padding-top: 40px;}

}

@media screen and (max-width: 768px) {
    #mapHd .head-title {font-size: 20px;}
    #mapHd .mo-map-tab li {font-size: 16px;}
    #mapHd .mo-map-tab li.on a {padding: 4px 6px;}
    .region-marker {font-size: 16px;}
}


@media screen and (max-width: 480px) {
    #mapHd .inner {gap: 0;}
    #mapHd .utils {gap: 15px;}

    #mapHd .mo-map-tab li::after {margin: 0 5px;}
    #mapHd .mo-map-tab li {font-size: 15px;}

    #map .left-menu.active {width: 100%;}
  
  .roadview-box .roadview-con {width: 300px; height: 300px;}

}














@keyframes pulse01 {
    0% {width: 100%; height: 100%; background-color: #12A44250;}
    50% {width: 400%; height: 400%; background-color: #12A44200;}
    100% {width: 400%; height: 400%; background-color: #12A44200;}
}
@keyframes pulse02 {
    0% {width: 100%; height: 100%; background-color: #2573FF50;}
    50% {width: 400%; height: 400%; background-color: #2573FF00;}
    100% {width: 400%; height: 400%; background-color: #2573FF00;}
}
@keyframes pulse03 {
    0% {width: 100%; height: 100%; background-color: #27B8E050;}
    50% {width: 400%; height: 400%; background-color: #27B8E000;}
    100% {width: 400%; height: 400%; background-color: #27B8E000;}
}
@keyframes pulse04 {
    0% {width: 100%; height: 100%; background-color: #2DD1A350;}
    50% {width: 400%; height: 400%; background-color: #2DD1A300;}
    100% {width: 400%; height: 400%; background-color: #2DD1A300;}
}
@keyframes pulse05 {
    0% {width: 100%; height: 100%; background-color: #FFC44350;}
    50% {width: 400%; height: 400%; background-color: #FFC44300;}
    100% {width: 400%; height: 400%; background-color: #FFC44300;}
}
@keyframes pulse06 {
    0% {width: 100%; height: 100%; background-color: #FF762150;}
    50% {width: 400%; height: 400%; background-color: #FF762100;}
    100% {width: 400%; height: 400%; background-color: #FF762100;}
}
@keyframes pulse07 {
    0% {width: 100%; height: 100%; background-color: #865DBE50;}
    50% {width: 400%; height: 400%; background-color: #865DBE00;}
    100% {width: 400%; height: 400%; background-color: #865DBE00;}
}
@keyframes pulse08 {
    0% {width: 100%; height: 100%; background-color: #FF7A9750;}
    50% {width: 400%; height: 400%; background-color: #FF7A9700;}
    100% {width: 400%; height: 400%; background-color: #FF7A9700;}
}