/***********
 * pretendard
 ***********/


@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root{

    --point_color:#5a5ece;
    --sub_color:#2a3042;
    --point_tlt:'Pretendard', sans-serif;
    --point_txt:'Pretendard', sans-serif;
    --base_txt:'Pretendard', sans-serif;
}

*{font-family:var(--base_txt);}

ul{padding-left:0; list-style:none;}

.layout-wrapper, .layout-container, .layout-page, .content-wrapper{display:block;}

/* header 영역 */

/* 헤더 */
header{position:fixed; width:200px; background:none; z-index: 10; min-height:100vh; height:100%;}
header .head_top{background:var(--point_color); padding:20px 10px; text-align:center; transition:0.3s;}
header .head_top .logo_wrap{margin-bottom:0; position:relative;}
header .head_top .logo_wrap .t_menu_tgbtn{display:none;}
header .head_top .logo{display:block; width:80px; height:80px; border-radius:50%; background:#fff; position:relative; margin:0 auto; overflow:hidden;}
header .head_top .logo > img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; object-fit:contain; max-width:50px;}
header .head_top .logo + a{display:block; margin-top:10px; width:100%; font-size:16px; color:#fff; line-height:100%;}

header .top_menu{margin-top:10px;}
header .top_menu .hello_user{color:#fff; font-size:14px; margin-bottom:10px;}
header .top_menu .top_btns{display:flex; flex-direction:column; margin-bottom:0;}
header .top_menu .top_btns a{display:block; width:100%; height:28px; line-height:28px; background:#fff; color:#333; border:1px solid #ededed; border-radius:3px; font-size:13px;}
header .top_menu .top_btns * + *{margin-top:5px;}
header .top_menu .top_btns select{display:block; width:100%; height:28px; line-height:28px; background:var(--point_color); color:#fff; border:1px solid #ededed; border-radius:3px; font-size:13px; text-align:center;}
header .top_menu .top_btns select:focus{outline:none !important;}
header .top_menu .top_btns select option{padding:3px; background:#fff; color:#333; font-size:14px;}

/* aside */
aside{background:var(--sub_color); height:calc(100% - 250px); transition:all .3s; overflow-y:scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
aside::-webkit-scrollbar{display:none;}
aside nav > ul{list-style:none; padding-left:0;}
aside nav > ul > li > a{display:block; color:#fff; border-top:1px solid rgba(255,255,255,.2); padding-left:28px; font-size:15px; color:rgba(255,255,255,.7); padding:10px 20px 10px 10px; position:relative;}
aside nav > ul > li > a:hover{color:#fff;}
aside nav > ul > li > a:after{opacity: .7; content:""; display: block; position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; background-size:auto 28px; -webkit-transition: transform .3s; -moz-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s;}
aside nav > ul > li > a > .sign_new_cnt{opacity:0.9;}

aside nav .tgl_menu{display:none; background:rgba(105, 108, 255, 0.16); border-top:1px solid rgba(255,255,255,.2); padding-left:0; list-style:none;}
aside nav .tgl_menu li{width:100%;}
aside nav .tgl_menu li a{display:block; padding-left:28px; font-size:15px; color:rgba(255,255,255,.7); padding:10px;}
aside nav .tgl_menu li a:before{content: '→'; display: inline-block; position: relative; margin-right: .625rem; color: #6c757d; transition: all .1s ease; transform: translateX(0);}

aside nav .tgl_menu li.on{background:rgba(79,115,233,0.1);}
aside nav .tgl_menu li.on a:before,
aside nav .tgl_menu li a:hover:before{transform: translateX(4px);}
aside nav .tgl_menu li a:hover,
aside nav .tgl_menu li.on a{background:var(--point_color); color:#fff;}
aside nav .tgl_menu li:hover a:before,
aside nav .tgl_menu li.on a:before {color: #fff;}

aside nav li.active > a {color:#fff;}
aside nav li.active .tgl_menu{display:block;}

.menu_tgl_btn{display:none;}

/* container */
.gds_container{width:calc(100% - 200px); margin-left:200px; transition:.3s;}

/* 정렬용 추가 클래스 */
.flex_row_center{display:flex; align-items: center;}

/* 타이틀 요소 관련 */
.content-wrapper > div.container-xxl{padding:20px !important; }
.container-p-y:not([class^=pt-]):not([class*=" pt-"]){padding-top:20px !important;}
.container-p-y:not([class^=pb-]):not([class*=" pb-"]){padding-bottom:20px !important;}
.content-wrapper > div.container-xxl > nav.navbar{padding:0;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid{padding:0;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold{font-size:20px; font-weight:600; color:#333; position:relative; padding-left:10px;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold:before{content: ''; position: absolute; top: 50%; left: 0; width: 4px; height: 80%; display: block; background: var(--point_color); transform: translateY(-50%);}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold > i{display:none;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav{flex-direction:row; align-items: center;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li{position:relative; font-size: 14px; padding:0 10px; color:#666;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > div + li:before{opacity:.3; content:''; display:block; position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background-color:#6c757d;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li:last-child{color:var(--point_color);}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li.nav-item > a.nav-link{font-size:inherit; color:inherit;}

/* 테이블 관련 */
.table{
    --bs-table-striped-bg:transparent;
    --bs-table-striped-color:#666;
    --bs-table-active-color:#666;
    --bs-table-hover-color:#666;
    --bs-table-active-bg:transparent;
    --bs-table-hover-bg:transparent;
}
thead, tbody, tfoot, tr, td, th{border-color:#ededed;}
.card .table{border-top:2px solid var(--point_color);}
.table td, .table th{border:none; border-bottom:1px solid #ededed; font-size:15px; color:#666; white-space:nowrap;}
.table:not(.table-dark) th{color:var(--point_color);}
.table th{position: relative;}
.table thead th + th:before{content:""; display:block;  position:absolute; top:50%; left:0; width:1px; height:17px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); background-color:#ddd;}
.table thead th{ background:#F8F9FC; padding:17px; font-weight:500; white-space: nowrap;}
.table > :not(:first-child){border-top:none;}
.table th > b{font-weight:400;}
.table .nav-link:hover, .nav-link:focus{color:#333;}

.table_top_line{border-top:2px solid var(--point_color)}

/* 버튼 관련 */
.tb_top_btn{display:block; padding:0.5rem 1.25rem; border-radius: 0.375rem; background:#fff; transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; color:#999; border:1px solid #ccc;}
.tb_top_btn + .tb_top_btn{margin-left:5px;}
.tb_top_btn.active{background:#696cff; color:#fff; box-shadow:0 2px 4px 0 rgba(105,108,255,0.4);}

.btn{font-size:13px; padding:6px 10px; min-width:80px; border-radius:3px;}
.btn-group > .btn, .btn-group-vertical > .btn{word-break:keep-all;}
.btn-primary{background:var(--point_color); border-color:var(--point_color); box-shadow: none; min-width:80px;}
.btn-secondary{box-shadow: none;}
.btn-outline-primary{color:var(--point_color); border-color:var(--point_color);}
.btn-outline-primary:hover{color:#fff; background-color:var(--point_color); border-color:var(--point_color);}
.btn-outline-secondary{border-color:#ededed; color:#333;}
.btn-danger{box-shadow: none;}

/* 셀렉트 관련 */
.form-select{color:#333;}

/* 인풋 관련 */
.form-control{color:#333;}
.input-group-text{color:#333;}
.nav-link{color:#666;}

/* 라벨 관련 */
.form-label, .col-form-label{font-size:15px; color:#333; font-weight:400;}

.sign_new{width:15px; height:15px; line-height:15px; text-align:center; font-size:11px; display:inline-block; border-radius:50%; background:orange; color:#fff; font-weight:500;}
.sign_new_cnt{width:20px; height:20px; line-height:20px; text-align:center; font-size:13px; display:inline-block; border-radius:50%; background:var(--point_color); color:#fff; font-weight:400; opacity:0.4}

/* 요소 사이즈 관련 */
.col-sm-1{min-width:95px;}
.starRadio{height:20px; min-width:100px;}
.starRadio__box{width:20px; height:20px;}
.starRadio:after{height:20px;}
.starRadio__box input[type="radio"]:checked + .starRadio__img {background-color: #ffce00;}

/* 랩핑 태그 */
.card{box-shadow: 0 4px 8px 0 rgba(0,0,0,.075); border-radius:15px; padding:20px;}
.card-header:first-child{padding:0;}
.card-body{padding:0;}
.card .card-body > div{width:100%;}

/* 페이징 */
.page-item .page-link{width:32px; height:32px; line-height:32px; background:#fff; border:1px solid #CED4DA; color:#6c757d; padding:0; margin:3px;}
.page-item.active .page-link{margin:3px;}
.page-link:hover{background:#fff; border:1px solid var(--point_color);}
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus{background:#fff; border:1px solid var(--point_color); color:var(--point_color); box-shadow: none;}


/* 메인 상단 3분할 영역 */
.tlt_date{font-size:14px; padding:1px 8px; background:#ddd; text-align:center; border-radius:15px; color:#666; display:inline-block; margin-left:5px; line-height:100%;}
.spl > p{display:flex; justify-content:space-between; align-items:center;  background:#fff; padding:20px; margin-bottom:0; border:1px solid #ddd; border-radius:10px;}
.spl > p > b{font-weight:500; font-size:1.125rem; line-height:1.1; color:#566a7f;}
.spl > p > span{font-size:1.8rem; font-weight:600; line-height:1.1; color:#666;}
.splx1 > p{width:100%;}
.splx1 > p + p{margin-top:10px;}
.splx2{display:flex; justify-content:space-between; flex-wrap:wrap;}
.splx2 > p{width:calc((100% - 20px )/2); margin-top:10px;}
.splx3{display:flex; justify-content: space-between; flex-wrap:wrap;}
.splx3 > button{width: calc((100% - 5px)/3) !important; margin-top:5px;}
.splx4{display:flex; justify-content:space-between; margin-top:10px;}
.splx4 > p{width:calc((100% - 60px )/4);}

/*공통 - 메인 타이틀류 */
.top_row{margin-bottom:10px !important;}
.top_row h5{height:34px; line-height:34px; margin-bottom:0;}

/*대시 - 그래프 */
.graph_wrap{display:flex; justify-content:space-between;}
.graph_left{width:40%;}
.graph_right{width:calc(60% - 10px);}
.graph_box{border:1px solid #ddd; border-radius:10px; padding:20px; box-sizing:border-box;}
.graph_box canvas{height:100%;}

.tab-content{padding:0;}

/*대시 - 기간 검색 창 */
.period_slt{display:flex; margin-top:10px;}
.period_slt button{width:100%; margin:0; border-width:1px 0 1px 1px; border-radius:0; min-width:auto; padding:6px;}
.period_slt button:first-child{border-radius:3px 0 0 3px;}
.period_slt button:last-child{border-radius:0 3px 3px 0; border-right-width:1px;}
.search_btn{margin-top:10px;}

/* 레이어 팝업 */
.layer_pop_wrap{display:none; width:100%; height:100%; overflow:hidden; position:fixed; background:rgba(0,0,0,0.4); left:0; top:0;}
.layer_pop_wrap.active{display:block;}
.layer_pop_wrap > .layer_pop_box{background:#fff; border-radius: 15px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; overflow:hidden;}
.layer_pop_wrap .layer_pop_close{position:absolute; right:10px; top:15px; border:none; background:none; font-size:30px; color:#fff;}
.layer_pop_wrap .layer_pop_close .bx{font-size:inherit;}

.buildings{display:none; white-space:normal; border-top:1px dotted #eee; margin-top:10px; padding-top:10px; font-size:0.937rem; line-height:155%;}

/* 12.20 추가 [s] */
#mask{position:fixed; z-index: 9000; left:0; top:0; right:0; bottom:0; margin:auto; background-color:rgba(255,255,255,0.3); width:100%; height:100%;}
#loadingImg{position:fixed; left:0; right:0; bottom:0; top:0; margin:auto; width:fit-content; height: fit-content; max-width: 100%; z-index:10000;}
#loadingImg img{max-width: 100%;}
/* 12.20 추가 [e] */

/*팝업 미리보기*/
.popup_wrap {position: absolute; background-color: rgba(255, 255, 255, .98); border: 1px solid #eee;}
.popup_wrap .popup_cont {height: auto;}
.popup_wrap .popup_cont img {max-width: 100%; height: auto; max-height: 100%;}
.popup_footer {padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee;}
.popup_footer .hours_close {color: #666;}
.popup_footer .normal_close {display: inline-block; padding: 5px 10px; background-color: #1c1e26; color: #fff;}
.popup_footer > a:hover{cursor : pointer;}

@media (min-width: 1200px){

    .layout-container > .layout-page{margin-left:200px;}
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page{padding-left:0;}
    .layout-menu-fixed .layout-navbar-full .layout-menu, .layout-page{padding-top:0 !important;}
}

@media (max-width: 1440px){
    /* 대시 - 기간 검색 창 - 20231020 */
    .period_slt{flex-wrap:wrap; border:1px solid #ededed; border-width:1px 0 0 1px;}
    .period_slt button{width:33.3333%; border-width:0 1px 1px 0;}
    .period_slt button:first-child,
    .period_slt button:last-child{border-radius:0;}
    .search_btn{width:30%;}
}

@media (max-width: 1200px){
    #layout-navbar{z-index:1110;}
    .layout-menu{transform:translate3d(0,0,0);}
    .layout-container > .layout-page{margin-left:200px;}
}

@media (max-width: 1024px){
    /* 23.12.20 추가 [s] */
    .row{margin-left:0; margin-right:0;}
    .row > *{padding-left:0;}
    /* 23.12.20 추가 [e] */

    .table-responsive{overflow-x:scroll;}
    .table-responsive > table{white-space: nowrap;}

    .card .table{overflow-x:scroll; display:block; white-space:nowrap;}



    /*헤더영역*/
    header{width:100%; height:60px; min-height:auto;}
    header .head_top{height:42px; padding:10px; position:relative;}
    header .head_top .logo{display:none;}
    header .head_top .logo + a{margin-top:0; font-size:18px;}
    header .head_top .logo_wrap .t_menu_tgbtn{display:block; position:absolute; top:0; bottom:0; right:10px; z-index:10; margin:auto; cursor: pointer;}
    header .head_top .logo_wrap .t_menu_tgbtn i{color:#fff; font-size:26px;}
    header .top_menu{display:none; position:absolute; top:32px; right:0; border:1px solid #ddd; padding:10px;background:#fff; z-index:10;}
    header .top_menu .hello_user{color:#333;}
    .menu_tgl_btn{display:block; width:42px; height:42px; position:absolute; border-radius:3px; transition:all .3s; overflow:hidden; top:0;left:10px; right:auto; margin:auto;}
    .menu_tgl_btn span{font-size:0; color:transparent; width:16px; height:2px; background:#fff; text-indent: -9999px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; clip:auto; transition:all .3s;}
    .menu_tgl_btn:before{content:''; display:block; width:16px; height:2px; background:#fff; position:absolute; top:15px; left:0; right:0; margin:auto; opacity:1;}
    .menu_tgl_btn:after{content:''; display:block; width:16px; height:2px; background:#fff;position:absolute; bottom:15px; left:0; right:0; margin:auto;}
    aside{position:fixed; left:0; top:42px; width:200px; height:100%; transform:translateX(-100%); padding-bottom:80px}

    /* 공통 - 메뉴 토글 */
    .menu_toggle aside{transform:translateX(0);}
    .menu_toggle .menu_tgl_btn{background:var(--point_color);}
    .menu_toggle .menu_tgl_btn span{display:none;}
    .menu_toggle .menu_tgl_btn:before{transform:rotate(45deg); top:20px; transition:transform 0.5s;}
    .menu_toggle .menu_tgl_btn:after{transform: rotate(-45deg); bottom:20px; transition:transform 0.5s;}

    /****** container ******/

    /* 공통 - 타이틀류 */
    :root{
        --bs-root-font-size: 14px;
    }

    .content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold{font-size:16px;}

    /* 대시 - 현황 */
    .splx2 > p, .splx3 > p{width:100%; padding:15px}
    .spl > p > span{font-size:1.5rem;}

    /* 대시 - 그래프 -20231020 */
    .graph_wrap{flex-direction: column;}
    .graph_right, .graph_left{width:100%;}
    .graph_left{padding-top:1rem;}
    .graph_box > canvas{max-height:150px !important;}

    /* 공통 - 단으로 나뉜 컨텐츠 */
    .gds_container{width:100%; margin-left:0;}
    .container-p-y:not([class^=pt-]):not([class*=" pt-"]){padding-top:60px !important;}
    .dash_con > div{width:100% !important;}
    .dash_con > div + div{padding-top:1rem; padding-left:0;}
    .dash_con > div:first-child{padding-left:0;}
    .dash_con > div .card{position:relative; padding-bottom:60px;}
    .dash_con > div .top_row button{position:absolute; bottom:20px; left:0; right:0; margin:auto; width:calc(100% - 40px);}
    .dash_con > div .top_row .nav > li > button{position:static; width:100%;}

}

@media (min-width: 992px){
    .d-lg-block{display:none !important;}
}

@media (max-width: 767px){

    header .head_top .logo + a{font-size:18px; letter-spacing:-1px;}
    .dash_con + .dash_con{padding-top:10px;}
    .dash_con > div + div{padding-left:0; padding-top:10px;}

    .splx3{flex-wrap:wrap;}
    .splx3 > p{width:calc(50% - 15px);}
    .splx3 > p:first-child{width:100%}

    /* 대시-상단 로케이션 */
    .loca_wrap > div{flex-direction: column-reverse; align-items: flex-start !important; }
    .loca_wrap > div > ul{justify-content: flex-end; width:100%;}
    .loca_wrap > div > ul > li:first-child{padding-left:0 !important;}

    /* 레이어 팝업 */
    .layer_pop_wrap .layer_pop_box{max-width:640px; width:92%;}
    .layer_pop_wrap > .adm_sys_list h4{padding:15px; font-size:20px;}
    .layer_pop_wrap > .adm_sys_list ul{max-height:50vh; padding:15px;}
    .layer_pop_wrap > .adm_sys_list ul li a{font-size:16px;}
    .layer_pop_wrap .layer_pop_close{right:10px; top:15px;}
}

@media (max-width: 640px){

    html, body, header{min-width:360px;}

    /* 대시 - 단으로 나뉜 컨텐츠 */
    .dash_con > div + div{padding-top:1rem;}

    .top_row h5{display:flex; flex-direction: column-reverse; flex-wrap: wrap; height:auto;}
    .tlt_date{margin-left:0; font-size:12px;}

    .graph_wrap{flex-direction: column;}
    .graph_right{width:100%;}
    .graph_left{width:100%;}

    /* modal */
    .modal.fade .modal-dialog{transform:scale(1);}
    .modal.fade .table thead th, .modal.fade .table td, .modal.fade .table th{font-size:0.937rem;}
}


@media (max-width: 425px){

    /* 공통 */
    .menu_toggle #container{margin-left:0; width:100%;}

}