/*label 숨김*/
.hidden {
    position: absolute !important;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
a.arrow span{
    position: absolute !important;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
header{
    width: 80px;
}
.map.wrap {
    width: calc(100% - 80px);
}
#main-logo {
    padding: 15px;
}
#main-logo>span:nth-child(1){
    word-break: keep-all;
    text-align: center;
    margin-bottom: 3px;
}
#main-logo>span:nth-child(2){
    word-break: keep-all;
    text-align: center;
}
nav ul.list>li>a {
    word-break: keep-all;
    text-align: center;
}
.left-box.on{
    width: calc(100% - 180px);
    left: 80px;
}
.search-area{
    display: none;
}
.toolbar .divideWidget ,
.toolbar .drawControlWidget ,
.toolbar .drawControlWidget ,
.toolbar .fullScreenControlWidget ,
.toolbar .printControlWidget ,
.toolbar .widget-map-swipe ,
.toolbar .measureControlWidget,
.toolbar .downloadControlWidget ,
.toolbar .widget-map-share ,
.toolbar .widget-map-bookmark{
    display: none;
}
.zoomControl .zoomControl_zoomControlContent{
    display: none;
}
.toc_btnLayerDetail{
    display: none;
}
.left-box.on{
    width: calc(100% - 150px);
}
.toc-title{
    margin-top: 15px;
}
.rstcustom__rowContents{
    min-width: auto;
}
.hdbtntit{
    display: flex;
    justify-content: space-between;
}
.closemob{
    display: block;
    margin: 5px 5px 0 0;
}
.toolbar{
    right:-30px;
}
.mobile .ol-overlay-container.ol-selectable{
    position: absolute;
    left: 0  !important;
    bottom: 0 !important;
    width: 100%;
    z-index: 10;
}
.mobile .ol-overlay-container.ol-selectable .oui-popup .popupDiv.poi{
    max-width: 100%;
    min-width: 100%;
}
nav ul.list>li>a::before{
    display: none;
}

/*데이터 보기*/
.data-download-popup{
    min-width: auto;
    overflow: auto;
}
.popup-body>div>.mCSB_container{
    padding: 15px;
}
.popup-body .map-area{
    padding: 10px 20px;
    gap: 20px;
    margin-bottom: 20px;
}
.map-area .title{
    margin-bottom: 10px;
}
.{

}
.popup-body .map-area{
    flex-direction: column;
}
.data-download-popup .viewMapArea ,
.data-download-popup .ntnBtnArea{
    width: 100%;
}
.databtn-box .targetList .btn{
    width: 73px;
}
.targetList{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: auto;
    align-content: flex-start;
}
.tab-list > li{
    padding: 20px;
}
.cont-list>ul{
    padding: 10px 0px;
}
.cont-list>ul>li{
    width: 100%;
}
.living-environment .cont-list > ul > li{
    width: 100%;
}
.btn.download{
    width: 100%;
}
.data-download-popup>.title{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 16px 10px;
    gap: 5px;
    align-items: flex-start;
}
.data-download-popup>.title>p{
    padding-top: 0;
}
.btn.close.dataViewClose{
    border: 0;
    background: url(../../../images/tgis/common/ico-close.svg)no-repeat center;
    width: 40px;
    height: 40px;
    right: 0;
    position: absolute;
    top: 50px;
}
.left-box.on {
    width: calc(100% - 80px);
    z-index: 5;
}
.toc_tocContentBox .toc_groupContent .rstcustom__rowTitle span{
    width: 80px;
}
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv{
    flex-direction: column;
}
.cont-list.on{
    padding:12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
div.info-box{
    padding: 10px 0;
}
.modal-popup.certification .modal-wrap{

}
.btn.download{
    display: none;
}
.informtxt{
    color: #45deff;
    margin-left: 5px;
}
/*메인페이지 격자조회 버튼*/
.btn_box{
    padding: 5px;
    width: 100%;
}
.btn_box .blue_btn{
    width: 100%;
    height: auto;
    padding: 3px 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #1C7EF0;
    gap: 10px;
    word-break: keep-all;
}
.blue_btn img{
    display: none;
}
.blue_btn span{
    font-weight: 400;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.choose_box{
    display: flex;
    position: absolute;
    gap: 5px;
    top: 95px;
    left: 370px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 1px 1px 3px 0px rgba(40, 70, 98, 0.30);
    backdrop-filter: blur(2px);
    flex-direction: column;
    width: 250px;
    height: auto;
    padding: 7px 5px;
}
.choose_tit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.choose_tit span{
    color: #477BAD;
    font-weight: 700;
}
.choose_tit div p{
    font-size: 12px;
    color: var(--btn-color-blue-);
}
.conment{
    gap: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.choose_tit img{
    cursor: pointer;
}
.draw_box{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.draw{
    position: relative;
    width: calc(100% / 4.5);
    height: 50px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 5px;
}
.draw::before{
    top: 0;
    left: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 4px
}
.draw.pointBtn::before{
    background-image: url("../../../images/tgis/common/dot.png");
}
.draw.polygonBtn::before{
    background-image: url("../../../images/tgis/common/polygon.png");
}
.draw.boxBtn::before{
    background-image: url("../../../images/tgis/common/square.png");
}
.draw.circleBtn::before{
    background-image: url("../../../images/tgis/common/circle.png");
}

.draw span{
    color: #477BAD;
    font-size: 12px;
}
.draw:hover{
    background: #477BAD;
}
.draw:hover span{
    color: #FFF;
}
.draw.pointBtn:hover::before{
    background-image: url("../../../images/tgis/common/dot_w.png");
}
.draw.polygonBtn:hover::before{
    background-image: url("../../../images/tgis/common/polygon_w.png");
}
.draw.boxBtn:hover::before{
    background-image: url("../../../images/tgis/common/square_w.png");
}
.draw.circleBtn:hover::before{
    background-image: url("../../../images/tgis/common/circle_w.png");
}
/*데이터 조회 팝업*/
.dbyData{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    padding: 10px !important;
}
.dbyData .detail_outer{
    width: 100% !important;
    border: none !important;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.dbyData .tit_box{
    background: #1C7EF0;
    display: flex;
    justify-content: center;
    border-radius: 50px 0px;
    width: 165px;
    padding: 3px;
    align-items: center;
}
.dbyData .tit_box.lv2{
    background: #416D98;
}
.dbyData .content_box.lv2{
    background: rgba(65, 109, 152, 0.10);
}
.dbyData .tit_box.lv3{
    background: #F90;
}
.dbyData .content_box.lv3{
    background: rgba(255, 153, 0, 0.10);
}
.dbyData .tit_box.lv4{
    background: #FF4040;
}
.dbyData .content_box.lv4{
    background: rgba(255, 64, 64, 0.10);
}
.dbyData .tit_box.lv5{
    background: #9CA3AF;
}
.dbyData .content_box.lv5{
    background: rgba(156, 163, 175, 0.10);
}
.dbyData .tit_box span{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
}
.dbyData .tit_box img{
    cursor: pointer;
}
.dbyData .content_box{
    width: 100%;
    background: rgba(212, 233, 255, 0.50);
    display: flex;
    gap: 10px;
    padding: 20px;
    align-items: center;
}
.dbyData .content_box ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}
.dbyData .content_box ul li{
    width: 100%;
    height: 39px;
    padding: 8px 5px 10px 5px;
    border-radius: 10px;
    border: 1px solid rgba(28, 126, 240, 0.30);
    background: #FFF;
    font-size: 16px;
    text-align: center;
}
.dbyData .content_box.lv1 ul li{
    border: 1px solid rgba(28, 126, 240, 0.30);
}
.dbyData .content_box.lv2 ul li{
    border: 1px solid rgba(65, 109, 152, 0.30);
}
.dbyData .content_box.lv3 ul li{
    border: 1px solid rgba(255, 153, 0, 0.30);
}
.dbyData .content_box.lv4 ul li{
    border: 1px solid rgba(255, 64, 64, 0.30);
}
.dbyData .content_box.lv5 ul li{
    border: 1px solid rgba(156, 163, 175, 0.30);
}
.dbyData .content_box ul::after ,
.dbyData::after, .dbyData8::after{
    display: none !important;
}
.dbyData8{
    width: 100%;
}
.dbyData_outer {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: none !important;
    background: none !important;
}
.dbyData_outer .tit_box{
    border-radius: 5px;
    background: #667080;
    padding: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.dbyData_outer .tit_box span{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
}
.dbyData_outer .num_box{
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background: #DDECFD;
    color: #1C7EF0;
}
.dbyData_outer .content_outer{
    display: flex;
    padding: 10px 5px;
    border-radius: 10px;
    border: 1px solid #667080;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}
.dbyData_outer .content_box{
    display: flex;
    padding: 10px 5px;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #D6DAE8;
    background: #FFF;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.dbyData_outer .num_box.lv1{
    background: #DDECFD;
    color: #1C7EF0;
}
.dbyData_outer .num_box.lv2{
    background: #FFE3E3;
    color: #FF4040;
}
.dbyData_outer .num_box.lv3{
    background: rgba(103, 103, 103, 0.15);
    color: #676767;
}
.dbyData_outer .num_box.lv4{
    background: #E3E9F0;
    color: #416D98;
}
.dbyData8{
    display: flex;
    gap: 24px;
    flex-direction: column;
}
.dbyData5conts{
    background-color: transparent !important;
}
.border_box{
    display: block;
    width: 100% !important;
    border-radius: 10px;
    border: 1px solid #1C7EF0 !important;
    padding: 20px;
    position: relative;
    background-color: transparent !important;
}
.border_box .dbyData5{
    width: 100%;
    display: flex;
    gap: 24px;
    flex-direction: column;
}
.border_box .dbyData5::after{
    display: none;
}
.border_box .dbyData5 .dbyData_outer{
    width: 100% !important;
}
.border_box .year{
    position: absolute;
    display: flex;
    width: 150px;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    background: #EEF7FD;
    color: #416D98;
    font-size: 22px;
    font-weight: 700;
    left: 20px;
    top: -14px;
}
.border_box .dbyData_outer.n5 .tit_box{
    width: 100%;
    border-radius: 5px;
    background: #1C7EF0;
    padding: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.border_box .dbyData_outer.n5 .content_outer{
    gap:10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #1C7EF0;
}
.border_box .dbyData_outer.n5 .content_box{
    width: 100%;
}
.content_box span{
    font-size: 16px;
    word-break: keep-all;
}
.dbyData_outer.n5 .num_box{
    border-radius: 50px;
}
.dbyData_outer.n5 .num_box.area1{
    background: rgba(103, 103, 103, 0.15);
}
.dbyData_outer.n5 .num_box.area2{
    background: rgba(28, 126, 240, 0.15);
}
.dbyData_outer.n5 .num_box.area3{
    background: rgba(255, 153, 0, 0.15);
}
.dbyData_outer.n5 .num_box.area1 span{
    font-size: 13px;
    color: #676767;
}
.dbyData_outer.n5 .num_box.area2 span{
    font-size: 13px;
    color: #1C7EF0;
}
.dbyData_outer.n5 .num_box.area3 span{
    font-size: 13px;
    color: #F90;
}
.border_box.current{
    border: 1px solid #074081 !important;
}
.border_box.current .year{
    color: #074081;
}
.border_box.current .dbyData_outer.n5 .tit_box{
    background: #074081;
}
.border_box.current .dbyData_outer.n5 .content_outer{
    border: 1px solid #074081;
}
.lvbox{
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    word-break: keep-all;
}
.lvbox.lv1{
    background: #DDECFD;
}
.lvbox.lv2{
    background: #E3E9F0;
}
.lvbox.lv3{
    background: #FFF0D9;
}
.lvbox.lv4{
    background: #FFE3E3;
}
.lvbox.lv5{
    background: #FFE0CA;
}
.lvbox span{
    font-size: 20px;
    font-weight: 700;
}
.lvbox.lv1 span{
    color: #1C7EF0;
}
.lvbox.lv2 span{
    color: #416D98;
}
.lvbox.lv3 span{
    color: #F90;
}
.lvbox.lv4 span{
    color: #FF4040;
}
.lvbox.lv5 span{
    color: #FF7600;
}
.dbyData.n6{
    display: flex;
    flex-direction: row;
    gap: 10px !important;
    padding: 10px !important;
    width: 100%;
}
.dbyData.n6 .content_box{
    background-color: #fff;
    flex-wrap: wrap;
    padding: 0;
}
.dbyData.n6 .content_box::after{
    display: none;
}
.dbyData.n6 .content_box li{
    border-radius: 10px;
    border: 1px solid #D6DAE8;
    padding: 7px 5px;
    background-color: #fff;
    font-size: 16px;
    width: 100%;
    text-align: center;
}
.dbyData.n7{
    gap: 10px !important;
    width: 100%;
}
.dbyData.n7 .address_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 15px;
    border-radius: 8px;
    background: rgba(65, 109, 152, 0.20);
}
.dbyData.n7 .address_box span{
    color: #416D98;
    font-size: 20px;
    font-weight: 700;
}
.dbyData.n7 .address_box img{
    cursor: pointer;
}
.toggleBtn.active {
    transform: rotate(180deg);
}
.dbyData.n7 .content_outer{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dbyData.n7 .content_box{
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #D6DAE8;
    padding: 5px;
    gap: 10px;
    width: 100%;
}
.dbyData.n7 .content_box .detail_tit{
    padding: 5px 0px;
    border-radius: 10px;
    background: #E3E9F0;
    text-align: center;
    width: 100%;
}
.dbyData.n7 .content_box .detail_tit span{
    font-size: 16px;
    color: #202124;
}
.dbyData.n7 .content_box .detail_cont{
    text-align: center;
}
.cont-list.on>ul::after{
    display: none;
}
.zoom_outer{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}
.zoom_box{
    border-radius: 10px;
    border: 1px solid #477BAD;
    background: #477BAD;
    width: 130px;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.zoom_box span{
    color: #FFF;
    font-size: 16px;
}
.dbyData.nodat{
    background-color: #EEF7FD;
    padding: 0 !important;
}
.nodata_outer{
    display: flex;
    justify-content: center;
    width: 100% !important;
    align-items: center;
    background-color: #EEF7FD;
    border: none !important;
}
.nodata_box{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 10px;
    background-color: #EEF7FD;
    padding-bottom: 0;
}
.nodata_box p{
    color: rgba(71, 123, 173, 0.50);
    font-size: 16px;
    font-weight: 700;
}
@media (min-width: 450px) {
    .left-box.on {
    width: calc(100% - 180px);
    z-index: 2;
    }
    .toc_tocContentBox .toc_groupContent .rstcustom__rowTitle span{
    width: 190px;
    }
}
@media (min-width: 768px) {
    header{
        width: 141px;
    }
    #main-logo>span:nth-child(1){
        word-break: keep-all;
        text-align: center;
        margin-bottom: 0;
    }
    .map.wrap {
        width: calc(100% - 141px);
    }
    #main-logo {
        padding: 20px;
    }
    .search-area{
        display: flex;
        flex-direction: row;
        gap: 60px;
    }
    .left-box.on{
        left: 141px;
    }
    .toolbar .divideWidget ,
    .toolbar .drawControlWidget ,
    .toolbar .drawControlWidget ,
    .toolbar .fullScreenControlWidget ,
    .toolbar .printControlWidget ,
    .toolbar .widget-map-swipe ,
    .toolbar .measureControlWidget,
    .toolbar .downloadControlWidget ,
    .toolbar .widget-map-share ,
    .toolbar .widget-map-bookmark{
        display: block;
    }
    .toc_btnLayerDetail{
        display: flex;
    }
    .left-box.on{
        width: 293px;
    }
    .toc-title{
    margin-top: 25px;
    }
    .rstcustom__rowContents{
    min-width: 230px;
    }
    .hdbtntit{
    display: flex;
    justify-content: space-between;
    }
    .closemob{
    display: none;
    }
    .toolbar{
    right:0px;
    }
    nav ul.list>li>a::before{
    display: block;
    }

/*데이터 보기*/
    .data-download-popup{
        min-width: auto;
    }
    .popup-body>div>.mCSB_container{
        padding: 40px;
    }
    .popup-body .map-area{
        padding: 10px 20px;
        gap: 20px;
        margin-bottom: 20px;
    }
    .map-area .title{
        margin-bottom: 24px;
    }
    .btn.normal{
        width: 85px;
    }
    .data-download-popup .viewMapArea ,
    .data-download-popup .ntnBtnArea{
        width: 50%;
    }
    .popup-body .map-area{
        flex-direction: row;
    }
    .tab-list > li{
        padding: 40px;
    }
    .cont-list>ul{
        padding: 20px;
    }
    .cont-list>ul>li{
        width: calc(100% / 2 - 10px);
    }
    .living-environment .cont-list > ul > li{
        width: 315px;
    }
    .btn.download{
        width: auto;
    }
    .data-download-popup>.title{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 16px 20px;
        gap: 30px;
        align-items: center;
    }
    .data-download-popup>.title>p{
        padding-top: 0;
    }
    .btn.close.dataViewClose{
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .right-box > ul > li.widget-map-select .drawControl_drawGrpDiv{
        flex-direction: row;
    }
    .data-download-popup .targetList{
        gap:5px;
    }
    .databtn-box {
        margin-top: 10px;
    }
    div.info-box {
        padding: 7px 5px;
    }
    .zoomControl .zoomControl_zoomControlContent{
        display: block;
    }
    .targetList{
        flex-direction: row;
        overflow-y: auto;
    }
    .databtn-box .targetList .btn{
        width: 80px;
    }
    .btn.download{
        display: block;
    }
    .informtxt{
       display: none;
    }
    .btn_box{
        padding: 10px;
    }
    .btn_box .blue_btn{
        width: 100%;
        height:90px;
        padding: 3px 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        background: #1C7EF0;
        gap: 10px;
    }
    .blue_btn img{
        display: block;
    }
    .choose_box {
        left: 477px;
    }
    .left-box.on .choose_box {
        left: 338px;
    }
    .left-box.full .choose_box {
        left: 636px;
    }
    .dbyData .content_box ul li {
        width: calc(100% / 2 - 5px);
    }
    .dbyData {
        padding: 20px !important;
    }
    .dbyData8{
        padding: 20px !important;
    }
    .dbyData8{
        flex-direction: row;
    }
    .dbyData_outer .content_outer{
        gap: 5px;
    }
}

@media (min-width: 400px) {

}
@media (min-width: 768px) {
    .dbyData.n6 .content_box li{
        width: calc(100% / 2 - 5px);
    }
    .dbyData.n7 .content_outer{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dbyData.n7 .content_box{
        width: calc(100% / 2 - 12px );
    }
    .dbyData_outer .content_box {
        width: calc(100% / 4);
    }
    .dbyData_outer .content_outer{
        flex-direction:row;
    }
    .dbyData_outer.data8 .content_box{
        width: calc(100% / 6);
    }
    .nodata_box{
        padding-bottom: 20px;
    }
}
@media (min-width: 1023px) {
    .dbyData .content_box ul li {
        width: calc(100% / 5 - 8px);
    }
    .dbyData.n6 .content_box li{
        width: calc(100% / 4 - 8px);
    }

}
@media (min-width: 1150px) {
    .dbyData_outer {
        width: calc(100% / 3 - 18px) !important;
    }
    .dbyData.n7 .content_box{
        width: calc(100% / 3 - 17px );
    }
    .dbyData_outer {
        width: calc(100% / 2 - 12px) !important;
    }
    .border_box .dbyData5{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .border_box .dbyData5 .dbyData_outer{
        width: calc(100% / 2 - 12px) !important;
    }
    .dbyData_outer.data8{
        width: calc(100% / 2 - 15px) !important;
    }
}
@media (min-width: 1420px) {
    .cont-list>ul>li{
        width: 32%;
    }
    .dbyData .content_box ul li {
        width: calc(100% / 8 - 9px);
    }
    .border_box .dbyData5{
        flex-direction: row;
    }
    .dbyData.n6 .content_box li{
        width: calc(100% / 6 - 20px);
    }
    .dbyData.n7 .content_box{
        width: 100%;
    }
    .dbyData.n7 .content_outer{
        flex-direction: row;
        flex-wrap: nowrap;
    }

}
@media (min-width: 1820px) {
    .cont-list>ul>li{
        width: calc(100% / 5 - 16px);
    }

    .dbyData_outer {
        width: calc(100% / 4 - 15px) !important;
    }

    .border_box .dbyData5 .dbyData_outer{
        width: calc(100% / 5 - 20px) !important;
    }
    .dbyData.n6 .content_box li{
        width: calc(100% / 8 - 9px);
    }
    .dbyData.n7 .content_outer{
        flex-direction: row;
    }
    .dbyData_outer.data8{
        width: calc(100% / 3 - 15px) !important;
    }

}