/*@import url('../../reset.css');
@import url('../../ui_style.css');
@import url('../../custom.css');*/
@font-face {
    font-family: "Pretendard GOV for Map";
    font-weight: 400;
    font-style: normal;
    src: url("../../../fonts/PretendardGOV-Regular.subset.woff") format("woff");
}
.map-body *{
    font-family: "Pretendard GOV for Map", serif;
    box-sizing: initial;
}
.cm-hide{
    display: none !important;
}
.map-event-icon-area{
    position: absolute;
    bottom: 0;
}
.map-event-icon-area a{
    position: absolute;
    bottom: 0;
    left: -200px;
}
.map-panel-title{
    font-size: 16px;
    color: #222222;
    margin-bottom: .8rem;
}
a, a:focus{
    text-decoration: none !important;
    /*outline: none !important;*/
}
a:focus {
    /*color: #01AAD3;*/       /* 포커스될 때 글자색을 분홍(#e91e63)으로 */
}


/* openlayers style overwrite */
.ol-box{
    background-color: rgba(255,255,255,0.3) !important;
    border: 2px solid red !important;
}
/* 고속도로 선택 영역 */
.map-highway-select-panel{
    position: absolute;
    left: 10px;
    top: 70px;
    display: flex;
    align-items: center;
    text-decoration:none;
}
.map-highway-select-panel .map-highway-item{
    background-color: #FFFFFFee;
    border-radius: 100px;
    color: #555555;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 22px;
    margin-right: 6px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.map-highway-select-panel .map-highway-item.active,
.map-highway-select-panel .map-highway-item:hover {
    background: #246BEB;
    color: white;
    font-weight: bold;
    transition: 0.4s;
}

.map-highway-select-panel .map-highway-item:focus {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}

.map-highway-select-panel .map-highway-item.active:hover, .map-highway-select-panel .map-highway-item:hover{
    background:rgba(36, 107, 235, 0.9);
}

/* 고속도로 정보 영역 */
.map-conzone-list-panel{
    position: absolute;
    left: 10px;
    top: 130px;
    background-color: #FFFFFFee;
    border-radius: 20px;
    padding: 23px 12px 23px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.map-conzone-list-panel .map-ic-list-scroll{
    height: calc(100vh - 230px);
    overflow-y: auto;
    width: 270px;
    padding:5px;
}

/* 고속도로 상태 영역 */
.map-road-status-panel{
    position: absolute;
    left: 360px;
    top: 77px;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: none;
    min-width:140px;
}
.map-road-status-panel .map-road-status-ic{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #444444;
    margin-bottom: .5rem;
    height:24px;
}
.map-road-status-panel .map-road-status-ic .up-bound{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.map-road-status-panel .map-road-status-ic .bound-icon{
    border-radius: 20px;
    font-size: 12px;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 9px;
}

.map-road-status-panel .map-road-status-ic .up-bound-icon{
    background-color: #E71825;
    color: #FFFFFF;
}

.map-road-status-panel .map-road-status-ic .down-bound-icon{
    background-color: #006BE1;
    color: #FFFFFF;
}

.map-road-status-panel .map-road-status-ic img{
    /*margin-left: .5rem;*/
    /* margin-right: .5rem;*/
    width:22px;
    height:22px;
}
.map-road-status-panel .map-road-status-dist{
    font-size: 12px;
    color: #444444;
    margin-bottom: 1rem;
}
.map-road-status-panel .map-road-status-speed{
    font-size: 12px;
    color: #444444;
    margin-bottom: .8rem;
}
.map-road-status-panel .map-road-status-dist span,
.map-road-status-panel .map-road-status-speed span{
    color: #222222;
}
.map-road-status-panel .map-road-status-date{
    font-size: 12px;
    color: #444444;
}
/* 위험 범례 */
.map-danger-panel{
    display: none;
    position: absolute;
    right: 160px;
    top: 305px;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.map-danger-panel .map-danger-legend{
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    margin-bottom: .5rem;
}
.map-danger-panel .map-danger-legend .line{
    background-color: #ffffff;
    width: 60px;
    height: 8px;
    border-radius: 3px;
    margin-bottom: .3rem;
    color: #222222;
    position: relative;
}
.map-danger-panel .map-danger-legend .line.line-01{
    background-color: #06A873;
}
.map-danger-panel .map-danger-legend .line.line-02{
    background-color: #C58505;
}
.map-danger-panel .map-danger-legend .line.line-03{
    background-color: #FB584C;
}
.map-danger-panel .map-danger-legend .line.line-04{
    background-color: #EB003B;
}
.map-danger-panel.map-zone-ext .map-danger-legend .line.line-01::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    border-top: 2px solid #ffffff;
    transform: translateY(-50%);
}
.map-danger-panel.map-zone-ext .map-danger-legend .line.line-02::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 16px,
                    transparent 16px,
                    transparent 18px
            );
    background-size: 100% 2px;
}
.map-danger-panel.map-zone-ext .map-danger-legend .line.line-03::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 8px,
                    transparent 8px,
                    transparent 10px
            );
    background-size: 100% 2px;
}
.map-danger-panel.map-zone-ext .map-danger-legend .line.line-04::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 2px,
                    transparent 2px,
                    transparent 4px
            );
    background-size: 100% 2px;
}

.map-danger-panel .map-danger-guide{
    font-size: 12px;
    color: #444444;
    width: 255px;
    display: inline-block;
}
/* 툴바영역 */
.map-toolbar-panel{
    position: absolute;
    right: 20px;
    top: 150px;
}
.map-toolbar-group{
    margin-bottom: 1rem;
    /*box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px;
    /*box-shadow: 0px 4px 4px 0px #246BEB1A;*/
}

.map-toolbar-group .row-box-head{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    background-color: #FFFFFFE6;
    border-top: #dddddd 1px solid;
    border-left: #dddddd 1px solid;
    border-right: #dddddd 1px solid;
    border-bottom: #dddddd 1px solid;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /*box-shadow: 0 4px 4px 0 #246BEB1A;*/
    font-size: 10px;
    font-weight: 400;
    color: #444444;
    height: 24px;
}

.map-toolbar-group .row-box-content{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: #dddddd 1px solid;
    border-left: #dddddd 1px solid;
    border-right: #dddddd 1px solid;
    overflow: hidden;
}



/*
.map-toolbar-group .map-toolbar-item:last-child{
    border-bottom-width: 0;
}
*/

.map-toolbar-group .col-box{
    border-radius: 4px;
    border-top: #dddddd 1px solid;
    border-left: #dddddd 1px solid;
    border-right: #dddddd 1px solid;
    border-bottom: #dddddd 1px solid;
}

.map-toolbar-group .row-box{
    /*display: flex;
    flex-direction: row;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1px;
    background-color: #ddddddcc;
    /*background-color:rgba(255, 255, 255, 0.9);*/
    /*border-right: #ddddddcc 1px solid;*/
    /*border-bottom: #ddddddcc 1px solid;*/
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: #dddddd 1px solid;
    border-left: #dddddd 1px solid;
    border-right: #dddddd 1px solid;
    overflow: hidden;
}

.map-toolbar-group .col-box .map-toolbar-item:first-child{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.map-toolbar-group .col-box  .map-toolbar-item:last-child{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.map-toolbar-group .row-box .map-toolbar-item:last-child{
    /*border-left-width: 0;*/
}

.m-map-toolbar-group{
    margin-bottom: 1rem;
    /*box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0px 4px 4px 0px #246BEB1A;
    border-left: #dddddd 1px solid;
    border-right: #dddddd 1px solid;
}
.m-map-toolbar-group .row-box {
    border-bottom: solid 1px #ddd;
}

.m-map-toolbar-group .row-box .map-toolbar-item{
    border-left: solid 1px #ddd;
    backdrop-filter: unset;
}

.m-map-toolbar-group .row-box .map-toolbar-item:hover, .m-map-toolbar-group .row-box .map-toolbar-item.active {
    background-color: #FFFFFFee;
}

.m-map-toolbar-group .row-box:first-child .map-toolbar-item{
    border-top: solid 1px #ddd;
}
.m-map-toolbar-group .row-box:first-child,
.m-map-toolbar-group .row-box:last-child{
    /*background-color: #ddddddcc;*/
    overflow: hidden;
}
.m-map-toolbar-group .row-box:first-child .map-toolbar-item{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.m-map-toolbar-group .row-box:last-child .map-toolbar-item{
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}



/*.map-toolbar-group .col-box:first-of-type{
    border-radius: 4px;
}

.map-toolbar-group .col-box:last-of-type{
    border-radius: 4px;
}*/

/*.g-b-radius-4{
    border-radius: 4px;
}

.g-b-radius-bottom-4{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.g-b-radius-top-4{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}*/


/*.map-toolbar-group .row-group:first-child .map-toolbar-item:first-child{
    border-top-left-radius: 4px;
}
.map-toolbar-group .row-group:first-child .map-toolbar-item:last-child{
    border-bottom-left-radius: 4px;
}
.map-toolbar-group .row-group:last-child .map-toolbar-item:first-child{
    border-top-right-radius: 4px;
}
.map-toolbar-group .row-group:last-child .map-toolbar-item:last-child{
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.map-toolbar-group .col-group .map-toolbar-item:first-child{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.map-toolbar-group .col-group .map-toolbar-item:last-child{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}*/

.map-toolbar-item{
    /*background-color:rgba(255, 255, 255, 0.95);*/
    background-color: #FFFFFFee;
    text-align: center;
    color: #888888;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /*backdrop-filter: blur(4px);*/
}

.map-toolbar-item:focus {
    border: solid 2px #246BEB;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    box-sizing: border-box;
    background-position: 44px 3px !important;
}

a.map-toolbar-item:focus {
    color:#888;
}

.mobile-pop-panel .map-toolbar-item{
    height: auto;
    color: initial;
}
.mobile-pop-panel .map-toolbar-item:hover{
    color: initial;
}
/*.map-toolbar-group .row-box .map-toolbar-item:nth-child(odd){*/
/*    border-right:none;*/
/*}*/

.map-toolbar-group .row-box>div:nth-child(even){
    width:100%;
    border-right:none;
}
.map-toolbar-item.center, .map-toolbar-item.zoomout, .map-toolbar-item.zoomin{
    /*border-bottom: #dddddd 1px solid;*/
}
.map-toolbar-item.center svg, .map-toolbar-item.zoomin svg, .map-toolbar-item.zoomout svg{
    margin-bottom: 0;
}
.map-toolbar-group.map-toolbar-to-right-side{
    display: inline-block;
    float: right;
}
.map-toolbar-group.map-toolbar-to-right-side .map-toolbar-item{
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-toolbar-item:hover{
    background-color:rgba(255, 255, 255, 1);
    color: #246BEB !important;
}

.map-toolbar-item.active{
    background-image: url("../../../images/kma/map/ico/ic-checkbox.svg");
    background-size: 10px;
    background-position: 46px 5px;
    background-repeat: no-repeat;
    color: #246BEB !important;
    box-sizing: border-box;
}
.map-toolbar-item.active:hover{
    color: #246BEB !important;
}

.map-toolbar-item:hover span, .map-toolbar-item.active span{
    color: #246BEB;
}
.map-toolbar-item svg{
    margin-bottom: .2rem;
}
.map-toolbar-item svg *{
    fill: currentColor;
}
.map-toolbar-item svg .map-svg-use-stroke{
    stroke: currentColor;
}
.map-toolbar-item .map-toolbar-label{
    display: block;
    font-size: 10px;
    line-height: 12px;
    color:#555;
}
.map-toolbar-group.map-toolbar-custom-position-01{
    position: absolute;
    bottom: 10px;
    right: 20px;
}
.map-toolbar-group.map-toolbar-custom-position-02{
    position: absolute;
    bottom: 30px;
    right: 20px;
}
.map-toolbar-group.map-toolbar-custom-position-02.bx-01{
    bottom: 90px;
}
.map-toolbar-group.map-toolbar-custom-position-02.bx-02{
    bottom: 90px;
    right: 170px;
}
.map-p-static{
    position: static !important;
}
.map-p-relative{
    position: relative !important;
}
.map-toolbar-group.map-toolbar-row-limit{

}

/*@media (max-height: 900px) {
    .map-toolbar-group.map-toolbar-custom-position-01 {
        right: 90px;
    }
}

@media (max-height: 700px) {
    .map-toolbar-group.map-toolbar-custom-position-01{
        right: 150px;
    }
}*/

/* 공유 팝업 */
.map-share-panel{
    display: none;
    position: absolute;
    right: 85px;
    top: 805px;
    background-color: white;
    border-radius: 20px;
    padding: 1rem 1.3rem 1rem 1.3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.map-share-panel a{
    text-decoration: none;
    color: #888888;
}
.map-share-panel svg *:not(.dont-change){
    fill: currentColor;
}
.map-share-panel a:hover svg *{
    fill: revert-layer;
}
/* 정보 팝업 */
.map-info-modal{

}
/* 기상정보 팝업 */
.map-weather-panel{
    display: none;
    position: absolute;
    right:160px;
    top: 155px;
    background-color: white;
    border-radius: 20px;
    padding: 1rem 1.3rem 1rem 1.3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.map-weather-panel .map-weather-container{
    display: flex;
    align-items: center;
    text-align: center;
    gap: .5rem;
}
.map-weather-panel .map-weather-container img{
    margin-bottom: .5rem;
}
.map-weather-panel .map-weather-container span{
    display: block;
    font-size: 12px;
    color: #222222;
}
/**
    소통정보
 */
.map-commu-panel{
    display: none;
    position: absolute;
    right: 160px;
    top: 305px;
    background-color: white;
    border-radius: 16px;
    padding: 15px 20px 10px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
    color: initial;
}
.map-commu-panel .map-commu-legend{
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    margin-bottom: .8rem;

}
.map-commu-panel .map-commu-legend .map-commu-legend-item{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.map-commu-panel .map-commu-legend .line{
    background-color: #ffffff;
    width: 60px;
    height: 8px;
    border-radius: 3px;
    color: #222222;
    position: relative;
}
.map-commu-panel .map-commu-legend .line.line-01{
    background-color: #06A873;
}
.map-commu-panel .map-commu-legend .line.line-02{
    background-color: #C58505;
}
.map-commu-panel .map-commu-legend .line.line-03{
    background-color: #FB584C;
}
.map-commu-panel .map-commu-legend .line.line-04{
    background-color: #EB003B;
}
.map-commu-panel.map-zone-ext .map-commu-legend .line.line-01::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    border-top: 2px solid #ffffff;
    transform: translateY(-50%);
}
.map-commu-panel.map-zone-ext .map-commu-legend .line.line-02::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 16px,
                    transparent 16px,
                    transparent 18px
            );
    background-size: 100% 2px;
}
.map-commu-panel.map-zone-ext .map-commu-legend .line.line-03::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 8px,
                    transparent 8px,
                    transparent 10px
            );
    background-size: 100% 2px;
}
.map-commu-panel.map-zone-ext .map-commu-legend .line.line-04::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image:
            repeating-linear-gradient(
                    to right,
                    #ffffff 0,
                    #ffffff 2px,
                    transparent 2px,
                    transparent 4px
            );
    background-size: 100% 2px;
}
.map-commu-panel .map-commu-text{
    overflow-wrap: break-word;
    width: 250px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

/**
    도로기상위험정보
 */

.m-map-hazardInfo-panel.level-0{
    background: #F2FBF8E5 !important;
}
.m-map-hazardInfo-panel.level-0 .point-icon{
    background: #06A873 !important;
}

.m-map-hazardInfo-panel.level-1{
    background: #FFFBF4E5 !important;
}
.m-map-hazardInfo-panel.level-1 .point-icon{
    background: #C58505 !important;
}

.m-map-hazardInfo-panel.level-2{
    background: #FFF7F6E5 !important;
}
.m-map-hazardInfo-panel.level-2 .point-icon{
    background: #FB584C !important;
}

.m-map-hazardInfo-panel{
    display: block;
    position: absolute;
    right: 160px;
    top: 400px;
    background: #FFF5F5E5;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 220px;
}
.m-map-hazardInfo-panel .map-panel-title{
    margin-bottom: 0;
}
.m-map-hazardInfo-panel .panel-header-icon{
    position: absolute;
    top: -30px;
    left: -30px;
}
.m-map-hazardInfo-panel .panel-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.m-map-hazardInfo-panel .panel-header .map-panel-move-btn{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.m-map-hazardInfo-panel .panel-header .map-panel-move-btn div:first-child{
    width: 20px;
    height: 8px;
    border-radius: 8px;
    background: #4E6078;
    cursor: pointer;
}
.m-map-hazardInfo-panel .panel-header .map-panel-move-btn div:last-child{
    width: 8px;
    height: 8px;
    border-radius: 56px;
    background: #999999;
    cursor: pointer;
}
.m-map-hazardInfo-panel .bottom-line{
    border-bottom: 1px solid #DDDDDD;
    padding-bottom:10px;
}

.m-map-hazardInfo-panel .map-hazardInfo-legend{
    display: flex;
    gap: 3px;
    font-size: 12px;
    flex-direction: column;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .line{
    background-color: #ffffff;
    width: 60px;
    height: 8px;
    border-radius: 3px;
    color: #222222;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .line.line-01{
    background-color: #06A873;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .line.line-02{
    background-color: #C58505;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .line.line-03{
    background-color: #FB584C;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .line.line-04{
    background-color: #EB003B;
}

.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-title{
    display: flex;
    flex-direction: row;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    align-items: center;
    gap: 5px;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-items{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-item{
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-item .item-value-box{
    display: flex;
    flex-direction: row;
}

.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-item .point-icon{
    width: 8px;
    height: 8px;
    border-radius: 64px;
    top: 0;
    left: 0;
    background-color: #EB003B;
}

.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-items .legend-item-text{
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    text-align: center;
    margin: 0;
}
.m-map-hazardInfo-panel .map-hazardInfo-legend .legend-items .legend-item-value{
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    text-align: center;
    margin: 0;
}
.map-frost-sect-panel.map-desktop{
    display: block;
    position: absolute;
    right: 160px;
    top: 455px;
    /*background: #FFF5F5E5;*/
    background: #FFFFFFE5;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
}
.map-fog-sect-panel.map-desktop{
    display: block;
    position: absolute;
    right: 160px;
    top: 465px;
    /*background: #FFF5F5E5;*/
    background: #FFFFFFE5;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
}
.map-hazardInfo-panel.map-desktop{
    display: block;
    position: absolute;
    right: 160px;
    top: 445px;
    /*background: #FFF5F5E5;*/
    background: #FFFFFFE5;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
}
.map-hazardInfo-panel.map-mobile{
    display: block;
    position: fixed;
    bottom: 240px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
.map-search-panel.map-mobile .map-inner-container{
    /*background: #FFF5F5E5;*/
    background: #FFFFFFE5;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
}


.map-search-panel.level-0{
    background: #F2FBF8E5 !important;
}
.map-search-panel.level-1{
    background: #FFFBF4E5 !important;
}
.map-search-panel.level-2{
    background: #FFF7F6E5 !important;
}


.map-search-panel .panel-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 15px;
}

.map-search-panel .hazardInfo-panel-title{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.map-search-panel .hazardInfo-panel-move-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.map-search-panel .hazardInfo-panel-move-btn .move-btn-icon{
    display: flex;
    gap: 5px;
}

.map-search-panel .map-hazardInfo-legend{
    margin-bottom: 10px;
}

.map-search-panel .map-hazardInfo-legend .legend-title{
    text-align: center;
    margin-bottom: 20px;
}

.map-search-panel .map-hazardInfo-legend .legend-items{
    display: flex;
    flex-direction: row;
}

.map-search-panel .map-hazardInfo-legend .legend-item{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.map-search-panel .map-hazardInfo-legend .legend-item .item-head{
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    gap: 5px;
}
.map-search-panel .map-hazardInfo-legend .legend-item .item-body{
    text-align: center;
    max-width: 120px;
    font-size: 14px;
    font-weight: 400;
    color: #444444;
}

.map-search-panel .map-hazardInfo-legend .legend-item .point-icon{
    width: 8px;
    height: 8px;
    background-color: #06A873;
    border-radius: 100px;
}
.map-search-panel .map-hazardInfo-legend .legend-item .point-icon.level-0{
    background-color: #06A873;
}
.map-search-panel .map-hazardInfo-legend .legend-item .point-icon.level-1{
    background-color: #C58505;
}
.map-search-panel .map-hazardInfo-legend .legend-item .point-icon.level-2{
    background-color: #FB584C;
}
.map-search-panel .map-hazardInfo-legend .legend-item .point-icon.level-3{
    background-color: #EB003B;
}
/*.map-search-panel.map-mobile{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); !* 반투명 배경 *!
    z-index: 1000;
    justify-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}*/


.map-warning-panel{
    display: block;
    position: absolute;
    right: 150px;
    top: 850px;
    background: #222222E5;
    backdrop-filter: blur(10px);
    box-shadow: 8px 8px 10px 0px #0000001A;
    border-radius: 20px;
    padding: 25px;

}

.map-warning-panel .map-warning-legend{
    display: flex;
    flex-direction: column;
}

.map-warning-panel .map-panel-title-white{
    color: #FFFFFF !important;
    margin-bottom: 20px;
}

.map-warning-panel .panel-sub-title{
    color: #FFF824;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.map-warning-panel .warning-time-items{
    display: flex;
    flex-direction: column;
    color: #FFFFFFE5;
    font-size: 12px;
    font-weight: 400;
    gap:10px
}

.map-warning-panel .warning-time-items .warning-start-time{
    text-align: start;
}
.map-warning-panel .warning-time-items .warning-end-time{
    text-align: start;
}

/* *자동생성* 지도 스케일바 */
#map-scale-line {
    /*position: static;
    background: white;
    width: 100%;
*/
    position: sticky;
    max-width: var(--krds-contents-wrap-size);
    width: 100%;
    margin: 0 auto;
}
#map-scale-line .ol-scale-line{
    left: auto;
    right: 73px;
    bottom: 24px;
}
#map-scale-line .ol-scale-line .ol-scale-line-inner{
    font-size: 12px;
}

.map-ana-tooltip{
    border: 4px solid #0E3063;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 10px 10px 20px 10px rgba(33, 30, 182, 0.1);
    backdrop-filter: blur(25px);
    padding: 9px;
}
.map-ana-tooltip .map-tooltip-title{
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-bottom: .3rem
}
.map-ana-tooltip .map-tooltip-item{
    display: block;
}
.selectize-dropdown [data-selectable] .highlight{
    position: inherit !important;
    display: inline !important;
}
.map-header{
    background-color: #4E6078;
    height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}
.map-info{
    background-color: #01AAD3;
    height: 18px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}
.map-info .map-info-home{
    font-size: 11px;
    color: #ffffff;
}
.map-info .map-info-home:after{
    content: '>';
    margin-right: .3rem;
    margin-left: .3rem;
    vertical-align: super;
}
.map-info .map-info-label{
    font-size: 11px;
    color: #ffffff;
    text-decoration: none;
}
.map-info .map-info-label:after{
    content: '>';
    margin-right: .3rem;
    margin-left: .3rem;
}
.map-info .map-info-label.active{
    font-size: 11px;
    color: #006780;
    font-weight: bold;
}
.map-info .map-info-label.active:after{
    content : ''
}
.map-change-panel{
    top: 72px;
    right: 20px;
    position: absolute;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.map-change-panel.map-change-panel-area-sub{
    top: 20px;
    z-index: 1;
}
.map-change-panel .map-change-item{
    border-radius: .5rem;
    border: 2px solid transparent;
    text-align: center;
    background-color: white;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}
.map-change-panel span{
    color: #444444;
    font-size: 11px;
    display: block;
    padding: 4px;
    line-height:17px;
    text-decoration:none;
}
.map-change-panel .map-change-item:hover {
    color: #246BEB !important;
    text-decoration:none;
}
.map-change-panel .map-change-item.active{
    border: solid 2px #246BEB;
    color: #246BEB !important;
    text-decoration:none;
}

.map-change-panel .map-change-item:focus {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
    color: #444444;
    font-weight:400;
}

.map-change-panel .map-change-item:hover span,
.map-change-panel .map-change-item.active span{
    color: #246BEB;
    font-weight: bold;
}

.map-thumbnail-01{
    background-image: url("../../../images/kma/map/thumbnail/thumbnail-01.png");
    height: 33px;
    width: 52px;
    overflow: hidden;
}
.map-thumbnail-02{
    background-image: url("../../../images/kma/map/thumbnail/thumbnail-02.png");
    height: 33px;
    width: 52px;
    overflow: hidden;
    background-position: center;
}
.map-thumbnail-03{
    background-image: url("../../../images/kma/map/thumbnail/thumbnail-03.png");
    height: 33px;
    width: 52px;
    overflow: hidden;
}
.ol-zoom{
    bottom: 35px;
    right: 10px;
    left: auto;
    top: auto;
    display: none;
}
.map-body{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.map-container {
    height: calc(100vh - 52px);
    width: 100vw;
    background-color: white;
}
.map-control-container{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    pointer-events: none;
}
.map-container-outline{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: none;
    box-sizing: border-box;
    pointer-events: none !important;
}
.map-container-outline.active, map-container-outline:focus{
    border: #0000ff 4px solid;
}
.map-container-outline-ficker{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.map-container-outline-ficker span{
    position: absolute;
    bottom: 0;
    background-color: #eeeeee;
    padding: 3px;
    padding-right: 10px;
    padding-left: 10px;
    border: #0000ff 2px solid;
    display: none;
}
.map-container-outline.active .map-container-outline-ficker span,
.map-container-outline:focus .map-container-outline-ficker span{
    display: inline;
}
.map-control-inner-container{
    position: relative;
    max-width: var(--krds-contents-wrap-size);
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.map-control-inner-container *{
    pointer-events: auto;
}

.overlay-info-frame{
    min-width: 300px;
    min-height: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: #DDDDDD;
    border-radius: 12px;
    background-color: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.overlay-info-frame .ov-tab a:focus {
    border: solid 2px #246BEB ;
    margin-left: 1px !important;
    box-shadow:none;
}

.overlay-info-frame .ov-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.overlay-info-frame .ov-header .ov-title{
    color: #222222;
    font-size: 15px;
    font-weight: 700;
}
.overlay-info-frame .ov-info{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .5rem;
    margin-bottom: 1rem;
    flex: 1;
}
.overlay-info-frame .ov-info img{
    height: 30px;
    margin-right: .5rem;
}
.overlay-info-frame .ov-info span{
    color: #222222;
    font-size: 16px;
    font-weight: bold;
}
.overlay-info-frame .ov-body{
    margin-bottom: 15px;
    flex: 1;
    /*max-height: 350px;*/
    overflow-y: auto;
}
.overlay-info-frame .ov-tab{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.overlay-info-frame .ov-tab-item{
    background-color: #F8F8F8;
    width: 100%;
    text-align: center;
    color: #444444;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px white solid;
    border-left: 1px white solid;
    border-right: 1px white solid;
    border-bottom: 1px #CCCCCC solid;
    cursor: pointer;
}
.overlay-info-frame .ov-tab-item:not(first-child){
    border-left-width: 0;
}
.overlay-info-frame .ov-tab-item.active:not(first-child){
    margin-left: -1px;
}

.overlay-info-frame .ov-tab-item.active{
    color: #222222;
    border-top: 1px #CCCCCC solid;
    border-left: 1px #CCCCCC solid;
    border-right: 1px #CCCCCC solid;
    border-bottom: 1px white solid;
    background-color: white;
}
.overlay-info-frame .ov-tab-item:hover{
    font-weight: bold;
    color: #000000;
}
.overlay-info-frame .ov-tab-item:hover{
    font-weight: bold;
    color: #000000;
}
.overlay-info-frame .ov-footer{
    display: flex;
    justify-content: space-between;
}
.overlay-info-frame .ov-footer.ov-justify-end{
    justify-content: end;
}
.overlay-info-frame .ov-footer-btn-area{
    margin-right: 8px;
}
.overlay-info-frame .ov-item{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: #cccccc 1px dashed;
}
.overlay-info-frame .ov-item .ov-item-title{
    font-size: 15px;
    color: #222222;
    font-weight: bold;
    margin-bottom: .6rem;
}
.overlay-info-frame .ov-item .ov-item-info{
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
    padding: 0 10px 0 5px;
}
.overlay-info-frame .ov-item .ov-item-info .ov-item-info-label{
    font-size: 14px;
    color: #444444;
}
.overlay-info-frame .ov-item .ov-item-info .ov-item-info-value{
    font-size: 14px;
    color: #222222;
    font-weight: bold;
    max-width: 200px;
    text-align: right;
}
.overlay-info-frame .ov-item.ov-small .ov-item-info .ov-item-info-label,
.overlay-info-frame .ov-item.ov-small .ov-item-info .ov-item-info-value{
    font-size: 12px;
}
.overlay-info-frame .ov-item .ov-item-date{
    padding: 0 10px 0 5px;
    display: flex;
    justify-content: space-between;
}
.overlay-info-frame .ov-item .ov-item-date .ov-item-date-label{
    font-size: 12px;
    color: #222222;
}
.overlay-info-frame .ov-item .ov-item-date .ov-item-date-value{
    font-size: 12px;
    color: #222222;
    font-weight: bold;
}
.overlay-info-frame .ov-cctv-area{
    min-height: 200px;
    background-color: #246BEB0D;
    overflow: hidden;
    max-height: 250px;
}
.overlay-info-frame .ov-cctv-area img{
    width: 300px;
}
.overlay-info-frame .ov-cctv-area span{
    display: block;
    text-align: center;
    font-size: 0.8em;
    padding-bottom: 5px;
    padding-top: 5px;
}

.pop-cctv-area{
    min-height: 200px;
    background-color: #246BEB0D;
    overflow: hidden;
    max-height: 350px;
}
.pop-cctv-area img{
    width: 100%;
}
.pop-cctv-area span{
    display: block;
    text-align: center;
    font-size: 0.8em;
    padding-bottom: 5px;
    padding-top: 5px;
}

.ov-scroll-y-280{
    overflow-y: auto;
    overflow-x: hidden;
    height: 280px;
}
.overlay-info-frame .ov-area-title{
    font-size: 14px;
    color: #222222;
    font-weight: bold;
    margin-bottom: .5rem;
}
.overlay-info-frame .ov-area-group{
    background-color: #F8F8F8;
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.overlay-info-frame .ov-area-info .ov-area-info-label-name{
    width: 180px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    vertical-align: sub;
}
.overlay-info-frame .ov-area-info .ov-area-info-label{
    font-size: 14px;
    color: #444444;
    margin-right: 10px;
}
.overlay-info-frame .ov-area-info .ov-area-info-value{
    max-width: 250px;
    text-align: left;
    flex: 1;
    font-size: 14px;
    line-height: 1.3em;
}
.overlay-info-frame .ov-area-date .ov-area-date-label{
    font-size: 12px;
    color: #222222;
}
.overlay-info-frame .ov-area-date .ov-area-date-value{
    font-size: 12px;
    color: #222222;
    font-weight: bold;
}
.overlay-info-frame .ov-area-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.overlay-info-frame .ov-btn{
    background-color: white;
    font-size: 14px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: #DDDDDD 1px solid;
    color: #444444;
    cursor: pointer;
}

.overlay-info-frame .ov-btn-prev{
    background-color: white;
    font-size: 14px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: #DDDDDD 1px solid;
    color: #444444;
    cursor: pointer;
}
.overlay-info-frame .ov-btn-prev::before{
    content: '';
    position: relative;
    display: inline-block;
    width: 6px;
    height: 11px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../../../images/kma/map/ico/arrow-prev-01.png");
    margin-right: .5rem;
}
.overlay-info-frame .ov-btn-next{
    background-color: white;
    font-size: 14px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: #DDDDDD 1px solid;
    color: #444444;
    cursor: pointer;
}
.overlay-info-frame .ov-btn-next::after{
    content: '';
    position: relative;
    display: inline-block;
    width: 6px;
    height: 11px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url("../../../images/kma/map/ico/arrow-next-01.png");
    margin-left: .5rem;
}
.overlay-info-frame .ov-btn-analy{
    background-color: #01AAD3;
    font-size: 14px;
    border-radius: 8px;
    padding: 10px 16px;
    border: #01AAD3 1px solid;
    color: #FFFFFF;
    cursor: pointer;
}

.overlay-info-frame .ov-btn-close{
    background-color: #4E6078;
    font-size: 14px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: #4E6078 1px solid;
    color: white;
    cursor: pointer;
}
.overlay-info-frame a:focus, .overlay-info-frame button:focus{
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}
.accident-info-frame{
    /*position: absolute;
    top:100px;
    left:600px;
    z-index: 100;*/
}

#map-print-modal a:focus{
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}


/* 분포도용 지도객체 */
.dm-map-container{
    display: flex;
    flex-direction: column;
    font-size: 11px;
    justify-content: space-between;
    position: relative;
}
.dm-map-container .ol-zoom{
    bottom: auto;
    right: auto;
    left: 10px;
    top: 10px;
    display: block;
}
.ui-slider .ui-slider-handle{
    z-index: 1;
}
.dm-map-container .ol-viewport{
    background-color: #EEEEEE;
}
.dm-map-container .hide-zoom-btn .ol-zoom{
    display: none !important;
}
.dm-hide{
    display: none !important;
}
.dm-right-fit{
    right: 0 !important;
}
.dm-map{
    flex: 1;
    border-width: 1px;
    border-color: #000000;
    border-style: solid;
}
.dm-left{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dm-map-container .dm-top{
    height: 15px;
    display: flex;
    justify-content: space-between;
}
.dm-map-container.dm-map-large .dm-top{
    height: 20px;
}
.dm-body{
    display: flex;
    justify-content: space-between;
    position: relative;
    flex: 1;
}
.dm-map-container .dm-header{
    height: 15px;
    font-size: 1em;
    display: flex;
    align-items: center;
    padding-left: 5px;
}
.dm-map-container.dm-map-large .dm-header{
    font-size: 1.2em;
}
.dm-map-container .dm-unit{
    margin-right: 1.9rem;
}
.dm-map-container.dm-map-large .dm-unit{
    font-size: 1.2em;
    margin-right: 4rem;
}

.dm-map-container .dm-legend{
    width: 30px;
    display: flex;
    flex-direction: column;
}
.dm-map-container.dm-map-large .dm-legend{
    width: 50px;
}
.dm-map-container .dm-legend .dm-unit{
    height: 15px;
    display: flex;
    align-items: flex-end;
    font-weight: bold;
}
.dm-map-container .dm-legend .dm-colors{
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow:hidden;
}
.dm-map-container .dm-legend .dm-colors .dm-color-item{
    display: flex;
    flex: 1;
    position: relative;
}
.dm-map-container .dm-legend .dm-colors .dm-color-item .dm-color{
    background-color: #cccccc;
    width: 8px;
    border-right-width: 1px;
    border-right-color: #000000;
    border-right-style: solid;
}
.dm-map-container .dm-legend .dm-colors .dm-color-item:first-child .dm-color{
    border-top-width: 1px;
    border-top-color: #000000;
    border-top-style: solid;
}
.dm-map-container .dm-legend .dm-colors .dm-color-item:last-child .dm-color{
    border-bottom-width: 1px;
    border-bottom-color: #000000;
    border-bottom-style: solid;
}
.dm-map-container .dm-legend .dm-colors .dm-color-item .dm-value{
    display: flex;
    align-items: flex-end;
    font-size: .7em;
    font-weight: bold;
    margin-left: 1px;
    /*    margin-bottom: -5px;
        margin-top: -5px;*/
    line-height: 8px;
}
.dm-map-container.dm-map-large .dm-legend .dm-colors .dm-color-item .dm-value{
    font-size: 1em;
}
.dm-legend .dm-colors .dm-color-item .dm-value.dm-value-simply{
    position: absolute;
    left: 8px;
}
.dm-legend .dm-colors .dm-color-item .dm-value.dm-value-text{
    writing-mode: vertical-rl;
    /*text-orientation: upright;*/
    line-height: initial;
    margin-top: 0;
}
.dm-legend .dm-colors .dm-color-item:last-child .dm-value{
    /*display: none;*/
}
.dm-counter{
    background-color: #000000;
    color: white;
    position: absolute;
    right : 31px;
    top: 15px;
    display: block;
    padding: 2px;
    font-size: .9em;
}
.dm-hide-legend .dm-legend{
    display: none;
}
.dm-hide-legend .dm-unit{
    margin-right: 0;
}
.dm-hide-legend .dm-counter{
    right: 0;
}

.dm-risk-select{
    max-height: 300px;
    overflow-y: auto;
}
.dm-modal-map-control.dm-control-close .dm-risk-select{
    overflow: hidden !important;
}

/*모바일*/

@keyframes fadeInUp {
    0%{
        opacity: 0.8;
        transform: translate3d(0, 100%, 0);
    }
    to{
        opacity: 1;
        transform: translateZ(0);
    }
}


.m-body{
    margin: 0;
    overflow: hidden;
}
.m-map-container{

}
.m-search-panel{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.m-search-panel .m-search-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #FFFFFFee;
    align-items: center;
    padding-right: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #246BEB1A;
}
.m-search-panel .m-search-div .search-input{
    background-color: transparent;
    width: 100%;
    height: 50px !important;
    font-size: 19px;
    font-weight: 400;
    border: 0;
    color: #8E8E8E;
    padding: 2px 20px;
}

.m-map-toolbar-panel{
    position: absolute;
    right: 15px;
    top: 84px;
}

/*.map-toolbar-item.mobile {
    border-bottom:none;
}*/

.map-toolbar-item.mobile:hover, .map-toolbar-item.mobile.active{
    color: #246BEB;
    font-weight: 700;
}

.m-map-share-panel {
    position: absolute;
    right: 15px;
    bottom: 30px;
}

.m-map-share-panel>div {
    margin-bottom:0 !important;
}

.m-map-test-panel{
    position: absolute;
    left: 15px;
    top: 90px;
    display: flex;
    flex-direction: column;
}

.mobile-warning-panel{
    display: block;
    position: absolute;
    left: 20px;
    top: 350px;
    background: #222222E5;
    backdrop-filter: blur(10px);
    box-shadow: 8px 8px 10px 0px #0000001A;
    border-radius: 20px;
    padding: 25px;

}

.mobile-warning-panel .map-warning-legend{
    display: flex;
    flex-direction: column;
}

.mobile-warning-panel .map-panel-title-white{
    color: #FFFFFF !important;
    margin-bottom: 20px;
}

.mobile-warning-panel .panel-sub-title{
    color: #FFF824;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.mobile-warning-panel .warning-time-items{
    display: flex;
    flex-direction: column;
    color: #FFFFFFE5;
    font-size: 12px;
    font-weight: 400;
    gap:10px
}

.mobile-warning-panel .warning-time-items .warning-start-time{
    text-align: start;
}
.mobile-warning-panel .warning-time-items .warning-end-time{
    text-align: start;
}


.mobile-pop-panel{
    --krds-modal--bottom-sheet-radius: var(--krds-radius-xlarge1);
    --krds-modal--bottom-sheet-padding: var(--krds-padding-6);
    --krds-modal--bottom-sheet-btn-close-position-top: var(--krds-gap-6);
    --krds-modal--bottom-sheet-btn-close-position-right: var(--krds-gap-5);
    --krds-modal--bottom-sheet-btn-padding-top: var(--krds-padding-10);
}
.mobile-pop-panel.bottom{
    position: absolute;
    bottom: 0;
    max-height: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    background-color: #FFFFFF;
    animation:fadeInUp 1s;
}

.mobile-pop-panel.bottom .pop-header{
    display: flex;
    justify-content: space-between;
    color: #1D1D1D;
    /*font-size: 22px;*/
    border-bottom: 1px solid #555555;
    height: 65px;
    align-items: center;
    padding: 0 20px;
}
.mobile-pop-panel.bottom .pop-header .pop-title{
    font-size: var(--krds-pc-font-size-heading-small);
    font-weight: var(--krds-font-weight-bold);
}
.mobile-pop-panel.bottom .pop-body{
    overflow-y: auto;
    max-height: calc(100vh - 265px);
    /*padding-bottom: 110px;*/
}
.mobile-pop-panel.normal .pop-body{
    overflow-y: auto;
    max-height: calc(100vh - 265px);
}

.mobile-pop-panel.bottom .pop-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background-color: #ffffff;
}
.mobile-pop-panel .pop-header .btn-x-close{
    cursor: pointer;
    font-weight: 700;
}
.mobile-pop-panel.bottom.detail-info .pop-body .item-box{
    border-bottom: 1px solid #C6C6C6;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mobile-pop-panel.bottom.detail-info .pop-body .item-divid{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mobile-pop-panel.bottom.detail-info .pop-body .info-type{
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    align-items: center;
    width: 80px;
    cursor: pointer;
    border:none;
}
.mobile-pop-panel.bottom.detail-info .pop-body .info-type svg{
    color: #BEBEBE;
}
.mobile-pop-panel.bottom.detail-info .pop-body .info-type>span{
    white-space: nowrap;
    color: #1d1d1d;
}
.mobile-pop-panel.bottom.detail-info .pop-body .info-icon{
    width: 60px;
    height: 60px;
    background-color: #F4F4F4;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-pop-panel.bottom.detail-info .pop-body .map-type{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #DDDDDD;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.mobile-pop-panel.bottom.detail-info .pop-body .map-type.active{
    border: 2px solid #246BEB;
    font-size: 15px;
    font-weight: 700;
    color: #246BEB;
}

.mobile-pop-panel.bottom.detail-info .pop-body .map-type > span{
    padding: 5px;
}

.mobile-pop-panel.bottom.detail-info .pop-body .item-box .info-type.active svg path{
    fill: #246BEB;
}

.mobile-pop-panel.bottom.detail-info .pop-body .item-box .info-type.active > span{
    fill: #246BEB;
    color: #246BEB;
    font-size: 15px;
    font-weight: 700;
}

.mobile-pop-panel.bottom.flow-info .item-box{
    display: flex;
    flex-direction: row;
    padding: 30px 20px;
    gap: 5px;
}

.mobile-pop-panel.bottom.flow-info .item-box .info-type{
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.mobile-pop-panel.bottom.flow-info .item-box .info-type .info-icon{
    width: 100%;
    height: 10px;
    border-radius: 3px;
}

.mobile-pop-panel.bottom.flow-info .item-box .info-type .info-icon.level-01{
    background: #06A873;
}
.mobile-pop-panel.bottom.flow-info .item-box .info-type .info-icon.level-02{
    background: #FB584C;
}
.mobile-pop-panel.bottom.flow-info .item-box .info-type .info-icon.level-03{
    background: #EB003B;
}



.mobile-pop-panel.bottom.accident-risk .item-box{
    display: flex;
    flex-direction: row;
    padding: 30px 20px;
    gap: 5px;
}

.mobile-pop-panel.bottom.accident-risk .item-box .info-type{
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.mobile-pop-panel.bottom.accident-risk .item-box .info-type .info-icon{
    width: 100%;
    height: 10px;
    border-radius: 3px;
}

.mobile-pop-panel.bottom.accident-risk .item-box .info-type .info-icon.level-01{
    background: #06A873;
}
.mobile-pop-panel.bottom.accident-risk .item-box .info-type .info-icon.level-02{
    background: #C58505;
}
.mobile-pop-panel.bottom.accident-risk .item-box .info-type .info-icon.level-03{
    background: #FB584C;
}
.mobile-pop-panel.bottom.accident-risk .item-box .info-type .info-icon.level-04{
    background: #EB003B;
}

.mobile-pop-panel.bottom.accident-risk .item-guide{
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    gap: 5px;
}







.mobile-pop-panel.bottom.weather-info .item-box{
    display: flex;
    flex-direction: row;
    padding: 30px 20px;
    gap: 5px;
}

.mobile-pop-panel.bottom.weather-info .item-box .info-type{
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}





.mobile-pop-panel.bottom.share-info .item-box{
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    gap: 5px;
}

.mobile-pop-panel.bottom.share-info .item-box .info-type{
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}





.mobile-pop-panel.bottom.mobile-search-filter .highway-info{
    background-color: #EDF1F5;
    padding: var(--krds-padding-6);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-title{
    font-size: 19px;
    font-weight: 700;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-start-arrival{
    font-size: 17px;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-start-arrival .up-down-icon{
    width: 72px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid #C6C6C6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    gap: 3px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-start-arrival .down{
    background-color: #EFF5FF;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-start-arrival .up{
    background-color: #FFF6F6;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-distance{
    font-size: 17px;
    font-weight: 400;
    display: flex;
    gap: 5px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-distance .value{
    padding: 0 5px;
    font-weight: 700;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-info .info-current-time{
    color: #555555;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info{
    padding: 20px 20px 0 20px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select{
    position: relative;
    border-bottom: 1px solid #C6C6C6;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .info-title{
    color: #1D1D1D;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .info-items{
    display: flex;
    gap: 10px;
    overflow-x: hidden;
    width: 100%;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item{
    border: 1px solid #C6C6C6;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
    height: 40px;
    padding: 0 20px;
    align-content: center;
    display: inline-block;
    margin: 2px 0;
    cursor: pointer;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item svg{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item.active{
    border: 1px solid #246BEB;
    color: #1D56BC;
    font-weight: 700;
    background-color: #EFF5FF;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item.active svg{
    display: inline;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select.close .info-items{
    white-space: nowrap;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select.open .info-items{
    display: inline;
    margin-right: 20px;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select.close .btn-show-hide .open{
    display: inline;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select.close .btn-show-hide .close{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select.open .btn-show-hide .open{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select.open .btn-show-hide .close{
    display: inline;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .item-hide-block{
    width: 80px;
    height: 50px;
    position: absolute;
    top: 50px;
    right: -10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 3.12%, #FFFFFF 46.25%);
    display: flex;
    align-items: start;
    justify-content: end;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .item-hide-block .btn-show-hide{
    border: 1px solid #C6C6C6;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .section-select .info-title{
    color: #1D1D1D;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .section-select .open-close{
    padding-right: 5px;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .btn-section-type{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 3px
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .btn-section-type .btn-bound{
    display: flex;
    flex: 1;
    border: 1px solid #C6C6C6;
    border-radius: 6px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .btn-section-type .btn-bound svg{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .btn-section-type .btn-bound.active svg{
    display: inline;
}

.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item svg{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .highway-select .highway-item.active svg{
    display: inline;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .btn-section-type .btn-bound.active{
    border: 1px solid #246BEB;
    color: #1D56BC;
    font-weight: 700;
    background-color: #EFF5FF;
}


.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list{
    display: flex;
    flex-direction: column;
    max-height: 250px;
    overflow-y: auto;
    position: relative;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    min-height: 55px;
    padding-left: 0px;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.active{
    background-color: #cccccc66;
    border-radius: 100px;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-mark{
    position: absolute;
    width: 20px;
    justify-content: center;
    display: flex;
    margin-top: 94px;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .out-icon{
    width: 16px;
    height: 16px;
    border-radius: 100px;
    position: absolute;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .in-icon{
    width: 8px;
    height: 8px;
    border-radius: 100px;
    position: absolute;
    left: 4px;
    top: 4px;
}

.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .line-icon{
    border: 0.5px solid #CDD7E4;
    background-color: #CDD7E4;
    height: 100px;
    width: 1px;
    margin-top: 8px;
}


.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item .out-icon{
    background-color: #06A8731A;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item .out-icon .in-icon{
    background-color: #06A873;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-02 .out-icon{
    background-color: #C585051A;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-02 .out-icon .in-icon{
    background-color: #C58505;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-03 .out-icon{
    background-color: #FB584C1A;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-03 .out-icon .in-icon{
    background-color: #FB584C;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-04 .out-icon.red{
    background-color: #EB003B1A;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-list .move-item.point-type-04 .out-icon.red .in-icon{
    background-color: #EB003B;
}


.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-item-title-container{
    margin-left: 25px;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-item-title{
    font-size: 19px;
    font-weight: 700;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-item-distance{
    font-size: 17px;
    font-weight: 400;
}
.mobile-pop-panel.bottom.mobile-search-filter .select-info .move-item-speed{
    font-size: 17px;
    font-weight: 400;
}

.mobile-pop-panel.bottom.mobile-search-filter .btn-area{
    display : flex;
    flex-direction: row;
    border-top: 1px solid #C6C6C6;;
    gap: 10px;
    padding: var(--krds-modal--bottom-sheet-btn-padding-top) var(--krds-modal--bottom-sheet-padding) var(--krds-modal--bottom-sheet-padding);
}


.mobile-pop-panel.bottom.mobile-search-filter .btn-area .btn-reset{
    flex: 1;
    height: 50px;
    border: 1px solid #1D1D1D;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--krds-button--mobile-font-size-medium);
    font-weight: 400;
    color: #000B17;
    cursor: pointer;
}

.mobile-pop-panel.bottom.mobile-search-filter .btn-area .btn-apply{
    flex: 1;
    height: 50px;
    background-color: #246BEB;
    border: 1px solid #246BEB;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--krds-button--mobile-font-size-medium);
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;
}


.mobile-pop-panel.bottom.mobile-search-filter .section-select .open-close{
    display: flex;
    align-items: center;
}
.mobile-pop-panel.bottom.mobile-search-filter .section-select.close .move-list .move-item{
    display: none;
}
.mobile-pop-panel.bottom.mobile-search-filter .section-select.close .move-list .move-item:first-child{
    display: flex !important;
    flex-direction: row !important;
}

.mobile-pop-panel.bottom.mobile-search-filter .section-select.close .open-close .close{
    display: inline !important;
}
.mobile-pop-panel.bottom.mobile-search-filter .section-select.open .open-close .open{
    display: inline !important;
}





.mobile-pop-panel.normal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    z-index: 1000;
    justify-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.mobile-pop-panel.normal .contents-area{
    width: calc(100vw - 80px);
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #C6C6C6;
    overflow: hidden;
    padding: 30px 30px;
}

.mobile-pop-panel.normal .contents-area .pop-header{
    display: flex;
    justify-content: space-between;
    color: #1D1D1D;
    font-size: 17px;
    font-weight: 700;
    align-items: center;
    margin-bottom: 30px;
}

.mobile-pop-panel.normal .pop-body{
    margin-bottom: 30px;
    /*overflow-y: auto;
    max-height: calc(100% - 250px);*/
}



.mobile-pop-panel.normal .pop-footer{

}

.mobile-pop-panel.normal .pop-footer .btn-close{
    height: 48px;
    border-radius: 8px;
    background-color: #246BEB;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 400;
    color: #FFFFFF;
}

.mobile-pop-panel.normal .btn-tab{
    display: flex;
    flex-direction: row;
}

.mobile-pop-panel.normal .btn-tab div{
    flex: 1;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    color: #444444;
    font-size: 19px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    height: 48px;
    cursor: pointer;
}

.mobile-pop-panel.normal .btn-tab div.active{
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #003675;

}

.mobile-pop-panel.normal .tab-panels .panel-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-pop-panel.normal .tab-panels .tab-panel{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 5px;
}

.mobile-pop-panel.normal .tab-panels .panel-item .item-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mobile-pop-panel.normal .tab-panels .item-title{
    color: #1D1D1D;
    font-size: 19px;
    font-weight: 700;
}

.mobile-pop-panel.normal .tab-panels .item-text{
    color: #555555;
    font-size: 17px;
    font-weight: 400;
}

.mobile-pop-panel.normal .tab-panels .item-value{
    color: #555555;
    font-size: 17px;
    font-weight: 700;
}
.mobile-pop-panel.normal .tab-panels .item-date{
    padding: 0 10px 0 5px;
}
.mobile-pop-panel.normal .tab-panels .item-date .item-date-label{
    font-size: 12px;
    color: #222222;
}
.mobile-pop-panel.normal .tab-panels .item-date .item-date-value{
    font-size: 12px;
    color: #222222;
    font-weight: bold;
}

.displayNone{
    display: none !important;
}



.mobile-pop-panel.normal .info-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 20px;
}
.pop-header-buttons{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.pop-header-buttons-text{
    font-size: 16px;
}
.pop-body-sub-title{
    font-size: 20px;
    padding-top: 16px;
}
.mobile-pop-panel.normal .info-content{
    border-radius: 12px;
    background-color: #F8F8F8;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;

}

.mobile-pop-panel.normal .info-content .content-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-pop-panel.normal .info-content .content-item .item-label{
    font-size: 17px;
    font-weight: 400;
    color: #1D1D1D;
}

.mobile-pop-panel.normal .info-content .content-item .item-value{
    font-size: 17px;
    font-weight: 700;
    color: #1D1D1D;
}

.mobile-pop-panel.normal .near-cctv{
    font-size: 19px;
    font-weight: 700;
    color: #1D1D1D;
}

.mobile-pop-panel.normal .info-content .info-cctv{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-pop-panel.normal .info-content .cctv-item{
    display: flex;
    justify-content: space-between;
}

.mobile-pop-panel.normal .info-content .cctv-item .item-label{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-pop-panel.normal .info-content .cctv-item{
    display: flex;
    flex-direction: row;
}

.mobile-pop-panel.normal .pop-body .btn-slide{
    display: flex;
    flex-direction: row;
    justify-self: center;
    gap: 5px;
}

.mobile-pop-panel.normal .pop-body .btn-slide .btn-slide-first{
    width: 20px;
    height: 8px;
    background-color: #246BEB;
    border-radius: 8px;
}

.mobile-pop-panel.normal .pop-body .btn-slide .btn-slide-second{
    width: 8px;
    height: 8px;
    background-color: #8E8E8E;
    border-radius: 8px;
}

.mobile-pop-panel.normal .pop-body .btn-slide .btn-slide-third{
    width: 8px;
    height: 8px;
    background-color: #8E8E8E;
    border-radius: 8px;
}


.vms-info-frame .vms-frame-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.vms-info-frame .vms-title{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 4px;
}

.vms-info-frame .vms-frame-item .vms-text{
    display: flex;
    justify-content: space-between;
}

.vms-info-frame .vms-frame-item .vms-label{
    font-size: 14px;
    font-weight: normal;
}

.vms-info-frame .vms-frame-item .vms-value{
    font-size: 14px;
    font-weight: bold;
}

.stn-info-frame .stn-frame-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.stn-info-frame .stn-title{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.stn-info-frame .stn-frame-item .stn-text{
    display: flex;
    justify-content: space-between;
}

.stn-info-frame .stn-frame-item .stn-label{
    font-size: 13px;
    font-weight: normal;
}

.stn-info-frame .stn-frame-item .stn-value{
    font-size: 14px;
    font-weight: bold;
    max-width: 200px;
    text-align: right;
}
/* body.nohrader */
body.noheader .map-container{
    height: 100vh;
}
body.noheader .map-change-panel{
    top : 19px
}
body.noheader .map-toolbar-panel{
    top : 97px
}
body.noheader .map-highway-select-panel{
    top : 17px
}
body.noheader .map-conzone-list-panel{
    top : 77px
}
body.noheader .map-conzone-list-panel .map-ic-list-scroll{
    height: calc(100vh - 177px);
}




.map-ic-list .map-ic-item-container{
    height: 45px;
    display: block;
    margin-bottom: 5px;
}

.map-ic-list .map-ic-item-container:focus{
    /*-webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;*/
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}
.cc-focus-style:focus{
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
    margin: 4px;
}
/*.map-ic-list .map-ic-item-container:first-child{
    height: 68px;
}*/

.map-ic-list .map-ic-item-container .map-ic-item{
    display: flex;
    flex-direction: row;
    position: relative;
}
.map-ic-list .map-ic-item-container .map-ic-item .sub-item{
    margin-top: -1px;
    padding-right: 5px;
}

/*.map-ic-list .map-ic-item-container:first-child .map-ic-item .item-mark{
    margin-top: 14px;
}

.map-ic-list .map-ic-item-container:first-child .map-ic-item .item-text{
    margin-top: 18px;
}*/

.map-ic-list .map-ic-item-container:first-child .map-ic-item .out-icon{
    top: 0;
}

.map-ic-list .map-ic-item-container:first-child .map-ic-item .in-icon{
    top: 3px;
}
.map-ic-list .map-ic-item{
    cursor: pointer;
}
.map-ic-list .map-ic-item .item-text{
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    color: #444444;

    position: absolute;
    /*top: -18px;*/
    align-items: center;
    left: 10px;
    width: calc(100% - 30px);
    height: 45px;
    border-radius: 30px;
    padding: 0 0 0 15px;
}

.map-ic-list .map-ic-item .item-text .item-ic-title{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-ic-list .map-ic-item .item-text .item-ic-text{
    width: 120px;
}

.map-ic-list .map-ic-item .sub-item{
    color: #444444;
}

.map-ic-list .map-ic-item .sub-item .sub-item-text{
    font-size: 11px;
    font-weight: 400;
}

.map-ic-list .map-ic-item .sub-item .sub-item-value{
    font-size: 11px;
    font-weight: 700;
}

.map-ic-list .item-mark{
    position: relative;
    width: 20px;
    justify-content: center;
    display: flex;
    z-index: 2;
    margin-top: 16px;
}

.map-ic-list .out-icon{
    width: 16px;
    height: 16px;
    border-radius: 100px;
    position: absolute;
    background-color: lightgrey;
    top: -3px;
    display: none;
}

.map-ic-list .in-icon{
    width: 6px;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    left: 5px;
    top: 0;
    border: 2px solid #CDD7E4;
    background-color: #FFFFFF;
}

.map-ic-list .line-icon{
    border: 0.5px solid #CDD7E4;
    background-color: #CDD7E4;
    height: 44px;
    width: 1px;
    margin-top: 10px;
}
.map-ic-list .map-ic-item-container:last-child .line-icon{
    display: none;
}

.map-conzone-list-panel .map-ic-item .item-ic-text {
    display: none;
}
.map-conzone-list-panel .map-ic-item:hover .item-ic-text,
.map-conzone-list-panel .map-ic-item.active .item-ic-text{
    display: block;
}

.map-ic-list .map-ic-item-container.point-type-01 .item-text{
    background-color: #F7FDFB;
}

.map-ic-list .map-ic-item-container.point-type-01 .out-icon{
    background-color: #D9F5EC;
    display: flex !important;
}

.map-ic-list .map-ic-item-container.point-type-01 .in-icon{
    background-color: #06A873;
    border: 2px solid #D9F5EC;
}
.map-ic-list .map-ic-item-container.point-type-01 .line-icon{
    background-color: #06A873;
}


.map-ic-list .map-ic-item-container.point-type-02 .item-text{
    background-color: #FFFCF6;
}
.map-ic-list .map-ic-item-container.point-type-02 .out-icon{
    background-color: #FFF1D3;
    display: flex !important;

}
.map-ic-list .map-ic-item-container.point-type-02 .in-icon{
    background-color: #C58505;
    border: 2px solid #FFF1D3;
}
.map-ic-list .map-ic-item-container.point-type-02 .line-icon{
    background-color: #C58505;
}



.map-ic-list .map-ic-item-container.point-type-03 .item-text{
    background-color: #FFF7F6;
}
.map-ic-list .map-ic-item-container.point-type-03 .out-icon{
    background-color: #FFE1DA;
    display: flex !important;
}
.map-ic-list .map-ic-item-container.point-type-03 .in-icon{
    background-color: #FB584C;
    border: 2px solid #FFE1DA;
}
.map-ic-list .map-ic-item-container.point-type-03 .line-icon{
    background-color: #FB584C;
}




.map-ic-list .map-ic-item-container.point-type-04 .item-text{
    background-color: #FEF7F9;
}
.map-ic-list .map-ic-item-container.point-type-04 .out-icon{
    background-color: #FDE1E8;
    display: flex !important;
}
.map-ic-list .map-ic-item-container.point-type-04 .in-icon{
    background-color: #EB003B;
    border: 2px solid #FDE1E8;
}
.map-ic-list .map-ic-item-container.point-type-04 .line-icon{
    background-color: #EB003B;
}




.map-ic-list .map-ic-item .item-text:hover, .map-ic-list .map-ic-item.active .item-text{
    background-color: #01AAD3 !important;
}
/*.map-ic-item-container:focus .map-ic-item .item-text{
    background-color: #01AAD355 !important;
}*/
.map-cctv-item-container:focus .map-cctv-item .item-text{
    border: solid 2px #246BEB;
    /*background-color: #01AAD355 !important;*/
}

.map-cctv-list .map-ic-item .item-text:hover {
    background-color:rgba(1, 170, 211, 0.9);
    color: #FFFFFF;
    transition: 0.4s;
}

.map-ic-list .map-ic-item .item-text:hover .item-ic-title,
.map-ic-list .map-ic-item.active .item-text .item-ic-title{
    color: #FFFFFF !important;
    cursor: pointer;
}

.map-ic-list .map-ic-item .item-text:hover .sub-item-text,
.map-ic-list .map-ic-item.active .item-text .sub-item-text{
    color: #FFFFFF !important;
}

.map-ic-list .map-ic-item .item-text:hover .sub-item-value,
.map-ic-list .map-ic-item.active .item-text .sub-item-value{
    color: #FFFFFF !important;
}

/*.map-ic-list .map-ic-item .item-text:hover + .item-mark .out-icon,
.map-ic-list .map-ic-item.active .item-text + .item-mark .out-icon{
    background-color: #CCEEF6CC !important;
    display: flex;
}*/

/*
.map-ic-list .map-ic-item .item-text:hover + .item-mark .in-icon
,.map-ic-list .map-ic-item.active .item-text + .item-mark .in-icon{
    background-color: #01AAD3 !important;
    border:2px solid #CCEEF6CC !important;
}
*/






.map-cctv-list-panel{
    position: absolute;
    left: 10px;
    top: 130px;
    background-color:rgba(255, 255, 255, 0.9);
    backdrop-filter:blur(4px);
    border-radius: 20px;
    padding: 23px 12px 23px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.map-cctv-list-panel .map-cctv-list-scroll{
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    width: 250px;
    padding-left: 5px;
    padding-right: 15px;
}

body.noheader .map-cctv-list-panel{
    top : 77px
}

body.noheader .map-cctv-list-panel .map-cctv-list-scroll{
    max-height: calc(100vh - 177px);
}


.map-cctv-list .map-cctv-item-container{
    height: 50px;
}

.map-cctv-list .map-cctv-item-container:first-child{
    height: 68px;
}

.map-cctv-list .map-cctv-item-container .map-cctv-item{
    display: flex;
    flex-direction: row;
    position: relative;
}

.map-cctv-list .map-cctv-item-container:first-child .map-cctv-item .item-mark{
    margin-top: 16px;
}

.map-cctv-list .map-cctv-item-container:first-child .map-cctv-item .item-text{
    margin-top: 18px;
}

.map-cctv-list .map-cctv-item-container:first-child .map-cctv-item .out-icon{
    top: 0;
}

.map-cctv-list .map-cctv-item-container:first-child .map-cctv-item .in-icon{
    top: 3px;
}

.map-cctv-list .map-cctv-item .item-text{
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    color: #444444;

    position: absolute;
    top: -18px;
    align-items: center;
    left: 10px;
    width: calc(100% - 30px);
    height: 45px;
    border-radius: 30px;
    padding: 0 15px;
    cursor: pointer;
}

.map-cctv-list .map-cctv-item .item-text .item-cctv-title{
    width: 220px;
    text-overflow: ellipsis;
    overflow: hidden;
    /*display: inline-block;*/
    white-space: nowrap;
    /*vertical-align: sub;*/
}

.map-cctv-list .map-cctv-item .sub-item{
    color: #444444;
}

.map-cctv-list .map-cctv-item .sub-item .sub-item-text{
    font-size: 11px;
    font-weight: 400;
}

.map-cctv-list .map-cctv-item .sub-item .sub-item-value{
    font-size: 11px;
    font-weight: 700;
}

.map-cctv-list .item-mark{
    position: relative;
    width: 20px;
    justify-content: center;
    display: flex;
    z-index: 2;
}

.map-cctv-list .out-icon{
    width: 16px;
    height: 16px;
    border-radius: 100px;
    position: absolute;
    background-color: lightgrey;
    top: -3px;
    display: none;
}

.map-cctv-list .in-icon{
    width: 6px;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    left: 5px;
    top: 0;
    border: 2px solid #CDD7E4;
    background-color: #FFFFFF;
}

.map-cctv-list .line-icon{
    border: 0.5px solid #CDD7E4;
    background-color: #CDD7E4;
    height: 44px;
    width: 1px;
    margin-top: 10px;
}

.map-cctv-list .map-cctv-item .item-text:hover {
    background-color:rgba(1, 170, 211, 0.9);
    color: #FFFFFF;
    transition: 0.4s;
}

.map-cctv-list .map-cctv-item.active .item-text{
    background-color: #01AAD3 !important;
    color: #FFFFFF;
}

.map-cctv-list .map-cctv-item .item-text:hover + .item-mark .out-icon, .map-cctv-list .map-cctv-item.active .item-text + .item-mark .out-icon{
    background-color: #CCEEF6CC !important;
    display: flex;
}

.map-cctv-list .map-cctv-item .item-text:hover + .item-mark .in-icon, .map-cctv-list .map-cctv-item.active .item-text + .item-mark .in-icon{
    background-color: #01AAD3 !important;
    border:2px solid #CCEEF6CC !important;
}

.cctv-info-frame{
    width: 400px;
    /*height: 350px;*/
}

.cctv-info-frame .ov-body{
    display: flex;
    flex-direction: column;
}

.cctv-info-frame .cctv-title{
    font-size: 16px;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
}

.cm-cctv-view{
    border: 1px solid #d2d2d2;
    flex: 1;
    max-height: 300px;
    overflow-y: hidden;
    min-height: 200px;
}
.cm-cctv-view img{
    width: 100%;
}

#loader-wrapper{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.1);
    z-index: 99999;
    cursor: pointer;
}
#loader-wrapper .loading {
    position: relative;
    left: 0;
    top: 40%;
    z-index: 1;
    margin: auto auto auto auto;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #4db1ff;
    width: 60px;
    height: 60px;
    -webkit-animation: loader-wrapper-spin 2s linear infinite;
    animation: loader-wrapper-spin 2s linear infinite;
}
@keyframes loader-wrapper-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cc-map-tooltip{
}
.cc-map-tooltip-inner{
    padding: 7px;
    background-color: #FFFFFF;
    border-radius: 12px;
    border-color: #D8D8D8;
    border-width: 0;
    border-style: solid;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.cc-map-tooltip .icon{
    height: 20px;
    width: 20px;
}
.cc-map-tooltip .icon.distance{
    background-image: url("../../../images/kma/map/ico/ic-dis.png");
    background-size: cover;
}
.cc-map-tooltip .icon.fog{
    background-image: url("../../../images/kma/map/ico/ic-fog.png");
    background-size: cover;
}
.cc-map-tooltip .icon.frz{
    background-image: url("../../../images/kma/map/ico/ic-frz.png");
    background-size: cover;
}
.cc-map-tooltip ._text{
    margin-left: 5px;
}
.cc-map-tooltip .name{
    color: #222222;
    font-size: 14px;
    margin-bottom: 3px;
    font-weight: bold;
}
.cc-map-tooltip .info{
    color: #444444;
    font-size: 12px;
}
.cc-map-tooltip .info.small{
    font-size: 11px;
}
.cc-map-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    margin-left: -8px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}
.cc-map-tooltip-inner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    margin-left: -13px;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);*/
}

.cc-map-modal p{
    margin: 0;
    padding: 0;
}
.cc-map-modal a:link,
.cc-map-modal a:visited,
.cc-map-modal a:hover,
.cc-map-modal a,
.cc-map-modal active,
.cc-map-modal a:focus {
    text-decoration: none;
    cursor: pointer;
}
.cc-map-modal .cc-pop.w1000 {
    width: 1000px;
}
.cc-map-modal .cc-pop.h-auto {
    height: auto;
}
.cc-map-modal .cc-pop {
    box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
}
.cc-map-modal .cc-pop {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 10000;
    height: 490px;
}
.cc-map-modal div,
.cc-map-modal ul,
.cc-map-modal a{
    box-sizing: border-box;
}
.cc-map-modal .head_pop {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-left: solid 3px #03a9cf;
    border-bottom: solid 1px #3f4e62;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    display: inline-block;
    background-color: #4e6078;
    position: relative;
}
.cc-map-modal .btn {
    height: 24px;
    line-height: 23px;
    display: inline-block;
    border: 0px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.cc-map-modal .btn.btn_00 {
    background-color: #4e6078;
    color: #fff;
    padding: 0 10px 0 10px;
    margin: 0 2px 0 2px;
    border-radius: 3px;
    border: 1px solid #364355;
}
.cc-map-modal .pop_btn_close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 25px;
    height: 25px;
    line-height: 30px;
    opacity: 0.4;
}

.cc-map-modal .pop_btn_close:hover {
    opacity: 1;
}

.cc-map-modal .pop_btn_close:before,
.cc-map-modal .pop_btn_close:after {
    position: absolute;
    content: '';
    left: 15px;
    height: 25px;
    width: 1px;
    background-color: #fff;
}

.cc-map-modal .pop_btn_close:before {
    transform: rotate(45deg);
}

.cc-map-modal .pop_btn_close:after {
    transform: rotate(-45deg);
}
.cc-map-modal .head_pop .tit {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-left: 15px;
    padding: 0;
    padding-top: 5px;
}
.cc-map-modal .map-pop-wrap {
    margin-bottom: 5px;
}
.cc-map-modal .map-pop_btn_wrap {
    width: 100%;
    text-align: right;
    padding: 0 10px 15px !important;
    display: inline-block;
    /* border-bottom: 1px solid #ddd; */
}
.cc-map-modal .btn.btn_05 {
    background-color: #01AAD3;
    color: #fff;
    padding: 0 10px 0 10px;
    margin: 0 2px 0 2px;
    border-radius: 3px;
    border: 1px solid #0A8BAA;
}

.cc-map-modal .btn.btn_05:hover {
    background-color: #0496bb;
}

.cc-map-modal .pop_container {
    padding: 10px;
    height: 100%;
    max-height: 85vh;
    overflow-y: auto;
}
.cc-map-table-area{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.cc-map-updown{
    width: 22px;
    height: 22px;
    margin-left: .5rem;
    display: block;
    background-color: transparent;
    border: 0;
}
.cc-map-updown:focus{
    border: 2px solid #246BEB;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
}
.cc-map-btn-focus:focus{
    border: 2px solid #246BEB;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
}
.cc-sub-map-container{
    background-color: #efefef;
}
.cc-sub-map-container #mapSubContainer{
    height: 500px;
    width: 300px;
}
/* Tbl Style clone */
#map-table-modal table {
    border-collapse: collapse;
    border-spacing: 0;
}
#map-table-modal .Tbl_wrap:not(:last-child) {
    margin-bottom: 10px;
}

#map-table-modal .Tbl_wrap.board {
    border-top: 2px solid #01AAD3;
    width: 100%;
    height: 500px;
    overflow-y: auto;
}

#map-table-modal .Tbl_wrap.board .Tbl th,
#map-table-modal .Tbl_wrap.board .Tbl td {
    border-right: 0;
    border-left: 0;
}

#map-table-modal .Tbl_wrap table td span {
    margin: 0 5px;
}

#map-table-modal .Tbl_wrap table td span:first-child {
    margin-left: 0;
}

#map-table-modal .Tbl_wrap table [class^='sticky-'] {
    position: sticky;
    left: 0;
}
#map-table-modal .Tbl {
    border-collapse: separate;
}

#map-table-modal .Tbl th {
    color: #002a50;
    font-weight: bold;
    text-align: center;
    background-color: #F2F3F7;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    vertical-align: middle;
    padding: 5px;
    word-break: keep-all;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;

}
#map-table-modal .Tbl th.th2 {
    background: #fbfbfb;
}

#map-table-modal .Tbl th span {
    line-height: 14px;
    display: inline-block;
}

#map-table-modal .Tbl td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    text-align: center;
    word-break: break-all;
    padding: 1px;
    vertical-align: middle;
    padding: 8px 5px;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
}


#map-table-modal .Tbl tr:last-child td,
#map-table-modal .Tbl tr:last-child th {
    border-bottom: 1px solid #b8b8b8;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

.dm-modal-map-container{
    position: absolute;
    z-index: 10000;
    width: calc(100vw - 100px);
    max-width: 1200px;
    height: calc(100vh - 200px);
    /* padding-left: 30px; */
    /* padding-right: 30px; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div, ul, a {
    box-sizing: border-box;
}
.dm-modal-map-container .pop_btn_wrap_x {
    width: 100%;
    text-align: right;
    padding: 10px 10px 15px 10px !important;
    display: inline-block;
    /* border-bottom: 1px solid #ddd; */
}
.dm-modal-map-container .g-check-item {
    margin-bottom: .5rem !important;
}
.dm-modal-map-container .head_pop {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-left: solid 3px #03a9cf;
    border-bottom: solid 1px #3f4e62;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    display: inline-block;
    background-color: #4e6078;
    position: relative;
}

.dm-modal-map-container.dm-left-fit{
    position: static;
    /*height: calc(100vh - 300px);*/
    min-height: 700px;
    max-height: 900px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    transform: none;
}
.dm-modal-map-container-inner{
    background-color: white;
    width: 100%;
    padding: 15px;
    border-radius: 3px;
    height: 100%;
}
.dm-modal-map-container-body{
    height: calc(100% - 55px);
    display: flex;
}
.dm-modal-map-area{
    width: 100%;
    height: 100%;
}
.dm-modal-map-control{
    width: 360px;
    height: 100%;
    /*background-color: blue;*/
    background-color: #eeeeeeee;
}
.dm-risk-label{
    margin-left: 5px;
}
.dm-risk-label-char{
    display: none;
}
.dm-risk-label-full{
    display: block;
}
.dm-modal-map-control .dm-item-children{
    margin-left: 17px;
}
.dm-modal-map-control .dm-item-children.active{
    background-color: aquamarine;
    padding: 3px;
    display: inline-flex;
    margin-left: 14px;
    border-radius: 2px;
}
.dm-modal-map-control.dm-control-close{
    width: 42px;
    text-align: center;
    display: none;
}
.dm-modal-guide{
    background-color: #ff8899;
    padding: 3px 5px;
    margin-bottom: 6px;
    display: inline-block;
    font-size: .9em;
    font-weight: bold;
}
.dm-item-children.g-check-item{
    margin-right: 0;
}
.dm-modal-map-control.dm-control-close .dm-modal-guide{
    display: none;
}
.dm-modal-map-control.dm-control-close .dm-risk-label{
    margin-left: 0;
    display: none;
}
.dm-modal-map-control.dm-control-close .dm-other-select{
    display: none;
}
.dm-modal-map-control.dm-control-close .dm-item-children{
    margin-left: 0;
}
.dm-modal-map-control.dm-control-close .dm-risk-title{
    display: none;
}
.dm-modal-map-control.dm-control-close .dm-risk-label-char{
    display: block;
    margin-right: 0;
}
.dm-modal-map-control.dm-control-close .dm-risk-label-full{
    display: none;
}
.dm-modal-map-control-title{
    color: white;
    padding-left: 10px;
}
.dm-modal-map-control-body{
    padding: 10px;
}

.dm-modal-map-container-footer{
    margin-top: 15px;
}
.map-toolbar-panel{
    display: block;
}
.cc-mobile{
    display: none;
}
.map-move-panel:focus{
    border: 2px blue solid;
}

.map-search-panel *, .map-commu-panel *, .map-danger-panel *{
    color: #222222;
}
.map-search-panel button{
    background-color: transparent;
    border: 0;
}
.ov-area-info-cctv:focus {
    border: solid 2px #246BEB;
}
/* mobile */
@media (min-width: 767px) {
    .mobile-pop-panel{
        display: none !important;
    }
    .map-hazardInfo-panel.map-mobile{
        display: none !important;
    }
}
@media (max-width: 768px) {
    .map-highway-select-panel{
        display: none !important;
    }
    .map-change-panel{
        display: none !important;
    }
    .map-toolbar-panel{
        display: none !important;
    }
    .map-toolbar-group{
        display: none !important;
    }
    .map-move-panel{
        display: none !important;
    }
    .cc-mobile{
        display: block;
    }

}