:root{
    --navy: #00359f;
    --navyDark: #0c2140;
    --kpiBlue: #2f6fed;
    --kpiBlueBg: #e8effd;
    --kpiRed: #e5484d;
    --kpiRedBg: #fdecec;
    --kpiGreen: #22ad6f;
    --kpiGreenBg: #e7f8ef;
    --kpiPurple: #6c63ff;
    --kpiPurpleBg: #edecfe;
    --kpiOrange: #f2994a;
    --kpiOrangeBg: #fdf1e6;
    --cardBorder: #e5e7eb;
    --cardShadow: 0 1px 4px 0 rgba(20, 49, 92, .05);
    --muted: #6b7280;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
}
#wrap{width:100vw;height:100vh; background: #ccc;}

#header .headCont > ul > li:first-child a,
#header .headCont > ul > li:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
#nav {
    background: var(--navy);
}
#nav .dropMenu li a {
    color: var(--navy) !important;
}
#nav .dropMenu li a::after {
    background: var(--navy);
}
#header{
    width:100%; height:70px;  box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    & .headCont{
        width:1600px; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:10px 20px;
    }
    & h1 {
        font-size: 1.75rem;
        font-weight: 600;
        & a{
            transition: color .2s;
            color:var(--navy) !important;
            &:hover{
                color: var(--navyDark) !important;
            }
        }
    }
    & ul{
        display: flex;
        align-items: center;
        & li {
            margin: 0 10px !important;
        }
    }
    .mobMenu{
        border: 1px solid #cacbd2;
        padding: 0px 7px !important;
        border-radius: 30px;
        font-size: 20px;
        &:hover{
            background: #efefef;
            color: var(--navy);
        }
    }
}
#nav{
    width:100%; height:55px; padding:10px 20px; box-sizing: border-box; margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    & .navCont{
        width:1600px; 
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:10px 20px;
        
    }
    & ul{
        width: 100%;
        display: flex;
        & li {
            width: 25%;
            font-size: 1.15rem;
            font-weight: 600;
            position: relative;
            text-align: center;
            &:first-child .dropMenu > li:nth-child(3), &:first-child .dropMenu > li:nth-child(4){
                border-right: 1px solid rgba(0, 0, 0, .125);
            }
            &:last-child .dropMenu{
                border-right: 1px solid rgba(0, 0, 0, .125);
            }

        }
        & li a{
            color:#fff !important;
        }
    }
    & .dropMenu{
        display: block;
        position: absolute;
        top: 42px;
        z-index: 99999999;
        background: var(--navy);
        background: #efefef;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .125);
        border-right: none;
        /* background: #8eb0d5; */
        /* background: #fff;
        border: 1px solid #efefef; */

        & li {
            width: 100%;
            height: 40px;
            padding: 10px 0 !important;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            /* color: #211b35;
            border-bottom: 1px solid #efefef; */
            &:last-child{
                border-bottom: none;
            }
            & a{
                color: var(--navy) !important;
            } 
        }
        & li a::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: var(--navy);
            /* background: var(--navy); */
            transition: width .3s;
        }
        & li a:hover::after{
            width: 100%;
        }
    }
}
#nav li :hover .dropMenu{
    display: block;
}
#contents{
    width:100%; 
    background: #efefef;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    & .container{
        padding: 10px 0 !important;
        max-width: 1600px;
        display: flex;
        justify-content: center;
        min-height: calc(100vh - 175px);
        height: calc(100vh - 175px);
        & > .row > div {
            height: 100%;
            &:after{
                content:'';
                display:block;
                clear:both;
            }
            /* & .row{
                height: calc(100% - 22.5px);
            } */
        }
        & > div{width:100%;}
        & .DashBoardConT{
            height: calc(33% - 1px);
            margin-bottom: 10px !important;
            /* &:nth-child(2) div, &:nth-child(4) div, &:nth-child(6) div {
                width: 100%;
                margin-right: 0 !important;
            } */
        }
        &  .DashBoardConT > div{
            width: calc(100% - 10px);
            height: 100%;
            margin-right: 10px !important;
            background: #fff;
            border-radius: 16px;
            border: 1px solid #cacbd2;
            box-shadow: var(--box-shadow);
            /* padding: 6px 0px !important; */
            overflow: hidden;
            & .DashBoardConT-cont{
                width:100%;
                height: calc(100% - 35px);
                padding-bottom: 6px !important;
            }
        }
    }
    #accidentList {
        overflow: auto;
        & ul li{
            width:100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 20px !important;
            & p{
                width:calc(100% / 4)
            }
            &  p:first-child{
                width:50px;
            }
            & span {
                font-weight: bold;
                font-size: 17px;
            }
            & .red{color:#e94556;}
            & .blue{color:#17acff;}
        }
    }

    & .tapCont ,& .cardNewsCont , & .loginCont, & .eventCont{
        /* height: calc((100% - 230px) / 2); */
        margin-bottom: 10px !important;

        & > div {
            margin-right: 10px !important;
            height: 100%;
            background: #fff;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
            border-radius: 16px;
            border: 1px solid #cacbd2;
            padding: 6px 10px !important;
        }

    }
    & .tapCont {
        & > div {
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
            background: none !important;
        }
        & ul{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px 12px;
            & li {
                position: relative;
                opacity: .9;
                border-radius: 16px;
                box-shadow: 0 4px 35px 0 rgba(0, 0, 0, .18);
                background-color: #211b35;
                transition: background-color .2s;
                & a {
                    display: flex;
                    flex-direction: column;
                    gap: 17px;
                    justify-content: center;
                    padding: 16px;
                    height: 90px;
                    color: #fff !important;
                    font-weight: bold;
                }
                &:nth-child(1){
                    background: var(--titleBlue) url(../img/icon01.png) 74px 44px no-repeat;
                    &:hover{
                        background: #33b1a2 url(../img/icon01.png) 74px 44px no-repeat;
                    }
                }
                &:nth-child(2){
                    background: var(--titleBlue) url(../img/icon02.png) 74px 44px no-repeat;
                    &:hover{
                        background: #c718b0 url(../img/icon02.png) 74px 44px no-repeat;
                    }
                }
                &:nth-child(3){
                    background: var(--titleBlue) url(../img/icon03.png) 74px 44px no-repeat;
                    &:hover{
                        background: #c7713f url(../img/icon03.png) 74px 44px no-repeat;
                    }
                }
                &:nth-child(4){
                    background: var(--titleBlue) url(../img/icon04.png) 74px 44px no-repeat;
                    &:hover{
                        background: #564dd1 url(../img/icon04.png) 74px 44px no-repeat;
                    }
                }
                &:nth-child(5){
                    background: var(--titleBlue) url(../img/icon05.png) 74px 44px no-repeat;
                    &:hover{
                        background: #acc74c url(../img/icon05.png) 74px 44px no-repeat;
                    }
                }
                &:nth-child(6){
                    background: var(--titleBlue) url(../img/icon06.png) 74px 44px no-repeat;
                    &:hover{
                        background: #4f632a url(../img/icon06.png) 74px 44px no-repeat;
                    }
                }
            }
        }
    }
    & .loginCont {
        height: 210px;
    }
    & .cardNewsCont {
        height: 300px;
        height: calc(100% - 425px);
    }
    & .cardNewsCont .DashBoardConT-cont{
        width: 90%;
        height: 210px;
        height: calc(100% - 32px);
        margin:10px auto !important;
        overflow: hidden; /* 내용이 넘치지 않도록 처리 */
    }
    .cardNewsCont .carousel-item img {
        max-height: 100%; /* 이미지의 최대 높이를 부모 요소에 맞게 조정 */
        width: auto; /* 이미지의 가로 크기는 자동 조정 */
    }   
    .cardNewsCont .carousel-inner {
        height: 210px; /* 고정된 높이 */
        height: calc(100% - 45px);
    }
    .cardNewsCont .carousel-item.active {
        width:100%;
        height: 100%;
        display: flex;
        justify-content: center;
        transition: opacity 0.1s ease-in-out, transform 1s ease-in-out; /* 부드러운 전환 */
    }
    & .DashBoardConT-title {
        border-bottom: 1px solid #ccc;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px !important;
        padding: 0 10px !important;
        padding-top: 6px !important;
    }
    & .loginCont{
        /*height: 200px;*/
        & fieldset {
            padding: 10px !important;
            display: flex;
            flex-direction: column;
            /* & div:nth-child(2),& div:nth-child(3){
                width:70%;
            } */
            & div:last-child{
                display: flex;
                justify-content: space-between;
                margin-bottom: 0 !important;
            }
            & #loginbtn{
                padding: .375rem 2.75rem;
            }
        }
        & div{
            margin-bottom: 10px !important;
            & .DashBoardConT-title{margin-bottom: 0 !important;}
            & label {width: 56px;}
            & input{
                width: calc(100% - 60px);
                padding: 4px !important;
            }
        }
        
    } 

    & .slideNews{
        height: 40px !important;
        display: flex;
        & .slideNews-title{
            width:100px;
            font-size: 18px;
            font-weight: bold;
            line-height: 30px !important;
            transform: translateY(4px) translateX(10px);
        }
        & .slideNews-cont{
            width: calc(100% - 100px);
            background: #fff;
            border-radius: 30px;
            border: 1px solid #cacbd2;
            position: relative;
            & ul{
                display: flex;
                align-items: center;
                height: 100%;
                padding: 0 44px !important;            
            }
            & .play_button.paused{
                position: absolute;
                top: 9px;
                bottom: 12px;
                right: 12px;
                width: 20px;
                height: 20px;
                border: none;
                background: url(../img/ic_pause.svg);
            }
            & .play_button.play{
                position: absolute;
                top: 9px;
                bottom: 12px;
                right: 12px;
                width: 20px;
                height: 20px;
                border: none;
                background: url(../img/ic_play.svg);
            }
        }
    }
    & .dashboard {
        & .row{
            height: 100%;
        }
        height: calc(100vh - 257px) !important;
        &:last-child .DashBoardConT > div{
            width: 100%;
        }
        & .DashBoardConT-title {
            background: var(--titleBlue);
            color: #fff;
            padding: 3px 15px !important;
        }
    }
    & .dashboard1{
        & .row{
            & .DashBoardConT:first-child{
                height: 450px;
                height: calc(66% + 6px);
                & > div {
                    height: 100%;
                    padding: 0 !important;
                    overflow: hidden;
                    & #map{
                        height: 100%;
                    }
                }
            }
            & .DashBoardConT:last-child{
                height: calc(33% - 1px);
            }
        }
        
    }
    .mapMaker{width: 17px !important; height: 25px !important;}
}
#contentsArea{
    height: 100%;
    background: #fff;
    padding: 15px !important;
    & > div{height: 100%;}
    & > div:nth-child(2){padding:10px !important}
    & .contents > p {
        color: var(--navy);
        font-size: 1rem !important;
        font-weight: bold;
        padding: 10px 0 !important
    }
    & .contents{
        overflow-y: auto;
        height: calc(100% - 70px);
        padding:0 var(--space-lg) !important;
    }
}
#contentTitle{
    border-bottom: 4px solid #efefef;
    margin-bottom: 10px !important;
    & h3{padding-bottom: 10px !important; padding-left: 10px !important; font-weight: bold;}
    & span{
        border-left: 2px solid var(--navy);
        padding-left: 10px !important;
        font-size: 16px;
    }
}
#footer{
    width:100%;
    height: 50px; 
    display: flex;
    justify-content: center;
    background:#fff;
    border-top: 1px solid var(--navy);
    & .footerCont{
        width:1600px; 
        height: 100%;
        font-size: 12px; 
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
}
/* table, th, td {
    border: 1px solid black;
} */

th, td {
    padding: 8px;
    text-align: left;
}
th{
    text-align: center !important;
}
.pagination button.active {
    background-color: #007bff;
    color: white;
}
.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
#contentsArea .contents table tr,#contentsArea .contents table td{
    border: 1px solid #efefef;
}
#contentsArea .contents table th,#contentsArea .contents table thead tr td{
    border:1px solid #c1c1c1;
}
#contentsArea .contents table th{
    padding: 12px 20px !important;
}
#contentsArea .contents table td{
    padding: 6px 10px !important;
}
#contentsArea .contents table thead tr{
    background: #e7f1ff;
}

#searchContainer{
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px !important;
    border-radius: 4px;
    background-color: #e7f1ff;
    padding: 10px !important;
    & label{
        font-weight: bold;
        font-size: 16px;
    }
    & input {
        flex: 1;
        padding: 5px !important;
    }
}
.contents table{margin-bottom: 10px;}
/* 정책법령 */
.statuteInfo {
    padding: 0 10px !important;
    & li {
        padding-top: 10px !important;
    }
    & .padding-left{
        padding-left: 15px !important;
    }
    & .padding-left2{
        padding-left: 25px !important;
    }
}
/*도로제원현황*/

.channelMap {
    height: 100%;
        & > div {
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .125);
        &:nth-child(1){
            background-color: #efefef;
            height: 75%;
            padding: 10px !important;
            overflow: auto;
        }
        &:nth-child(2){
            /* background-color: grey; */
            height: 75%;
            
        }
        &:nth-child(3){
            margin-top: 10px !important;
            min-height: calc(25% - 10px);
            max-height: 40%;
            border: none;
        }
    }
    & h3{
        width: 100%;
        font-size: 16px;
        color: var(--navy);
        font-weight: bold;
        position: relative;
        &::after{
            content: '';
            display: block;
            width: calc(100% - 95px);
            height: 2px;
            background: var(--navy);
            position: absolute;
            right: 2px;
            top: 10px;
        }
    }
}
#contentsArea .contents .channelMap table th, #contentsArea .contents .channelMap table td{
    padding: 4px !important;
}
.path_search.course_btns{
    margin-top: 5px !important;
    display: flex;
    align-items: center;
    grid-template-columns: 1fr 1fr;
}
.path_search input,.path_search select{
    width: 100%;
}
.course1{overflow: hidden; position: relative; width: 100%; margin-top: 10px !important; }
.course1 li{display: block; width: 100%; height: 32px; margin-bottom: 3px !important;  }
.course1 li.h37{height: 37px; }
.course1 li .text{float:left; width: 20%; line-height: 32px; }
.course1 li .text2{float:left; width: 22%; line-height: 37px; }
.course1 li .sbox{float:right; width: 78%; }

.course2{overflow: hidden; position: relative; width: 100%; margin-top: 5px !important; }
.course2 li{display: block; width: 100%; height: 32px; margin-bottom: 3px !important;  }
.course2 li.h37{height: 37px; }
.course2 li .sbox2{float:left; width: 28%; line-height: 32px; }
.course2 li .serbox{float:right; width: 70%; line-height: 32px; background-color: #fff; border: 1px solid #80c2ff;  border-radius:3px; box-sizing: border-box;}
.course2 li .serbox .search{float:left; width:84%; height: 32px; margin: 0 0px;  padding:0 0px; box-sizing: border-box; }
.course2 li .serbox .btn_search{float:right; border:0; cursor: pointer; width:12%; height: 32px; background:#fff url(/img/btn_search.png)center center no-repeat; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.course2 li .serbox .btn_search:hover{ background:#fff url(/PUB_IMG/map/btn_search_on.png)center center no-repeat; }
.selectBox {
    width: 100%;
    height: 32px;
    padding: 2px 5px 3px !important;
    border: 1px solid;
    border-color: #d4d4d4;
    line-height: 1.5;
    background: #fff url(/img/ico_select_arrow.png) no-repeat 95% 50%;
    appearance:none;
    -webkit-appearance: none;
}
input[type=text]::-ms-clear { display: none; }

.searchclear { position: relative; right: 0px; top: 6px; bottom: 0; width: 10px; height: 14px; margin: auto; font-size: 12px; cursor: pointer; color: #ccc; background-color: #fff; }
/* -------- search  -------- */
.searchWrap{ position: relative; width:100%; margin-top: 5px;  margin-bottom: 5px; }
.searchWrap_map{position: absolute; top:15px; left:30px; width:370px; height:39px; background-color: #fff; border-radius:3px;border:1px solid #c7c7c7;}
.box_searchbar{width: 100%; height:37px;  background-color: #fff; border: 1px solid var(--navy);  border-radius:3px; box-sizing: border-box;}
.box_searchbar .search{float:left; width:84%; height: 35px; margin: 0 0px;  padding:0 10px; box-sizing: border-box; }

.box_searchbar .btn_search{float:right; border:0; cursor: pointer; width:12%; height: 35px; background:#fff url(/img/btn_search.png)center center no-repeat; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.box_searchbar .btn_search:hover{ background:#fff url(/img/btn_search_on.png)center center no-repeat; }

.box_searchbar .btn_minus{float:right; border:0; cursor: pointer; width:12%; height: 35px; background:#fff url(/img/btn_minus.png)center center no-repeat; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.box_searchbar .btn_minus:hover{ background:#fff url(/img/btn_minus_on.png)center center no-repeat; }

.box_searchbar input[type='text']{border:none;}
.addClone{position: relative;}
.addClone i{
    cursor: pointer;
    line-height: normal !important;
    position: absolute;
    color: var(--bs-cyan);
    bottom: 16px;
    &:last-child{
        bottom: -1px;
    }
    &:hover{
        color:var(--navy)
    }
}
.channel02 ul li {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 5px !important;
    padding: 0px 30px !important;
    & h3{
        width: 100%;
        font-size: 16px;
        color: var(--navy);
        font-weight: bold;
        position: relative;
        &::after{
            content: '';
            display: block;
            width: calc(100% - 85px);
            height: 2px;
            background: var(--navy);
            position: absolute;
            right: 2px;
            top: 10px;
        }
    }
}
.channel02 .ul04 li {
    width: 100%;
}
.channel02 ul li .text{width: 80px;}
.channel02 .ul03 li .text{width: 40%;}
.channel02 ul li .sbox{width: 75%; margin-right: 2px !important;}
.channel02 .ul04 li .sbox{width: 38.5%;}
.channel02 .ul04 li .sbox input{    
    width: 100%;
    padding: 4px !important;
}
.channel02 .ul04 li .sbox .selectBox {width:50%;}
.channel02 #searchContainer {
    gap: 0;
}
#contentsArea .contents .channelMap table th, #contentsArea .contents .channelMap table td{
    padding: 4px !important;
    text-align: center;
    font-size: 0.9rem;
}
#contentsArea .contents .channelMap table thead tr{font-weight: bold;}
.channel02 .channelMap{height: auto !important;}
tr td:first-child{
    text-align: center;
}
.input_100 {
    width: 60px;
}
.inputstyle{
    height: 100%;
    border: none;
    padding: 4px 8px !important;
}
.modal-body h5 {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}
.tableStyle4{
    margin-bottom: 5px !important;
    & tr {
        border: 1px solid #c1c1c1;
        
        & th{
            background: #e7f1ff;
            border-left: 1px solid #c1c1c1;
            border-right: 1px solid #c1c1c1;
            padding: 4px !important;
        }
        & td{
            padding: 4px !important;
        }
    }
    & thead tr td {
        background: #e7f1ff;
        border-left: 1px solid #c1c1c1;
        border-right: 1px solid #c1c1c1;
        padding: 4px !important;
        text-align: center;
    }
    & .input_100{
        width: 100%; padding: 4px !important;
    }
}
.manage_btns{
    display: flex;
    & .notice{flex:1; color:var(--bs-danger)}
    & button{
        margin-right: 5px !important;
    } 
}
/* #upModal .tableStyle4,#underModal .tableStyle4{
    margin-bottom: 0 !important;
} */

/*단속장비운영현황*/
.equipment02 > .row {
    height: 100%;
    & .DashBoardConT{
        height: 40% !important;
    }
    & > div:last-child{
        height: 60% !important;
        & .DashBoardConT-cont{
            width:50% !important; float: left;
        }
    }
}

@media (max-width: 576px) {
    #wrap {
        width: 100%;
        height: auto;
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, input, select, textarea{
        font-size: 14px ;
    }
    #header {
        height: auto;
        & .headCont {
            width: 100%;
            padding: 10px 20px !important;
        }
        & h1 {
            font-size: 1.2rem;
            font-weight: 600;
            transform: translateX(0px);
        }
    }
    #nav {
        height: auto;
        padding:0;
        & .navCont{
            width: 100%;
            flex-direction: column;
        }
        & ul {
            display: block;
            /* flex-direction: column;
            justify-content: space-around; */
            & > li {
                width: 33.33%; float: left;
                font-size: 1rem;
                padding: 5px !important;
                
                &  .dropMenu{
                    position: static;
                    display: none;
                    & li {
                        font-size: 0.8rem !important;
                    }
                }
            }    
            & li a::after {
                background: #fff;
            }
        }
    }
    #accordionMenu{
        height: auto;
    }
    #contents{
        width: 100%;
        height:100%;
        min-height: calc(100vh - 145px);
        & .container {
            height: 100%;
            padding: 10px !important;
            & > .row > div {
                height: auto;
            }
            & > div > div:first-child{
                height: calc(100vh - 145px);
            }
            & .DashBoardConT > div {
                width: 100%;
                margin-right: 0px !important;
            }
        }
        & .slideNews {
            display: flex;
            margin: 10px 0 !important;
        }
        & .tapCont ,& .cardNewsCont , & .loginCont, & .eventCont{
            margin-bottom: 10px !important;
    
            & > div {
                margin-right: 0 !important;
            }
    
        }
        .slideNews-cont ul li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        & .dashboard{
            & > .row{
                height: auto !important;
            }
        }
        & .dashboard1 {
            & .row {
                & .DashBoardConT:first-child {
                    height: 300px;
                }
            }
        }
        & .DashBoardConT{
            height: 200px !important;
        }
    }

    #footer{
        & .footerCont{
            flex-direction: column;
            justify-content: center;
        }
    }
    
}