/***********
 * 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;
}
/* --point_color: #3c40c8; */
:root{
    
    --point_color:#5a5ece;
    --sub_color:#2a3042;
    --point_tlt:'Pretendard', sans-serif;
    --point_txt:'Pretendard', sans-serif;
    --base_txt:'Pretendard', sans-serif;
}

body{font-family:var(--base_txt);}
input[type=submit], button{font-family:var(--base_txt);}
/**** layout.css 변경 ****/

/* top nav */
#header {position: fixed; z-index: 100; width:200px; height:100vh; background:var(--sub_color); transition:all .3s;}


.utiltop { width: 100%; height:max(10vh, 250px); background: var(--point_color); padding:10px; text-align:center;}
.utiltop .logo {position:relative; top:auto; left:auto; font-size: 1rem; transform: translateY(0); text-align:center;}
.utiltop .logo:before{content:''; width:60px; height:60px; background-image:url('../images/m_logo.png'); background-color: #fff; background-position:center; background-repeat: no-repeat; display:block; margin:10px auto 10px; border-radius:50%;}
.util {display: flex; flex-direction: column; transform:translateY(0); padding:0 10px; top:auto; bottom:10px; left:0; right:0; margin:auto;}
.util .user_name {font-size:14px; word-break: keep-all;}
.util .user_name > b {color: #fff; font-size:inherit;}
.util > ul {display: flex; flex-wrap:wrap; margin-top:10px; width:100%;}
.util > ul > li{display:block; width:100%;}
.util > ul > li + li{margin-top:8px;}
.util > ul > li > a.btn.md{padding:0 5px; font-size:12px; width: 100%; height:28px; line-height:28px;}

.navbar {width: 100%; height:100vh; background: var(--sub_color);}
.navbar .nav-link {display: block;}
.navbar .nav-link > a {display: block; color: rgba(255,255,255,.7); padding: 10px; font-size:15px; padding-left:28px; border-bottom:1px solid rgba(255,255,255,.2); position:relative;}
.navbar .nav-link > a:before{content:''; width:20px; height:20px;}
.navbar .nav-link.has_sub > a:after{opacity: .7; content:""; display: block; position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; background:url(../images/add_img/icon_arw_down_white.svg) no-repeat 50% 50%; background-size:auto 28px; -webkit-transition: transform .3s; -moz-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s;}
.navbar .nav-link:hover > a,
.navbar .nav-link.active > a {color: #fff;}


/* sidebar */
.sidebar {display:none; position:static; width:100%; min-height:auto; background:rgba(105, 108, 255, 0.16); padding:10px 0; transition: all 0.3s ease-out 0s; border-bottom:1px solid rgba(255,255,255,.2);}
.sidebar .side-heading {padding: 1.5rem 1.5rem 1rem; text-align: left; color: #858796; font-weight: 800;}
.sidebar .side-link {position: relative; padding: 10px; border-left: 3px solid transparent;}
.sidebar .side-link:before {content: '→'; display: inline-block; position: relative; margin-right: .625rem; color: #6c757d; transition: all .1s ease; transform: translateX(0);}

.sidebar .side-link:hover,
.sidebar .side-link.active{background:var(--point_color);}
.sidebar .side-link:hover a,
.sidebar .side-link.active a {color: var(--point_color);  color:#fff;}
.sidebar .side-link:hover:before,
.sidebar .side-link.active:before {color: #fff; transform: translateX(4px);}
.sidebar .side-link a {color:#6c757d; font-size:14px;}
.sidebar .side-link.active {border-left:none; border-right: 3px solid var(--point_color); background:var(--point_color);}


#container{width:calc(100% - 200px); margin-left:200px;}
#content.menu_toggle{width:100%; margin-left:0;}

.divider{border-radius:15px;}
.divider_header{background:transparent; padding:12px 20px;}


/* 텍스트 스타일 */
.container_header h3:before{background:var(--point_color);}
.container_header h3{font-family: var(--point_tlt); font-size:24px;}
.divider_header h4{font-family:var(--point_txt); font-size:20px; color:#333;}


.location li.active{color:var(--point_color);}
.textarea p{color:var(--point_color); font-family: var(--point_txt); font-size:18px}

/* 상단 레이아웃 관련 */
.container_header{display:flex; justify-content:space-between; align-items: center;}
.location{position:static;}

/* 테이블 레이아웃 관련 */
.tableScrollX > table{min-width:100%;}
.tableScrollX .bbsList thead th{min-width:120px;}

.bbsList{border-top:2px solid var(--point_color);}
.bbsList th{color:var(--point_color); font-weight:500; padding:17px; white-space: nowrap;}
.bbsList th + th:before,
.tableScrollX .bbsList 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;}
.bbsView tbody th{background:#F8F9FC;}
.bbsList td{white-space: nowrap;}

.tableScroll .bbsList thead th:before, .tableScroll .bbsList thead th:after{background:var(--point_color);}

.srch_detail{padding:0 20px 20px;}
.srchTable th{max-width:120px;}

.dropdown_toggle{top:0; bottom:0; right:5px; margin:auto;}
.dropdown_toggle i.fa-angle-down:before{font-size:12px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; margin-top:3px}
.filter_box{display:none;}
.form_list{margin-top:30px;}

/* 상태표시 관련 */
.state{border-radius:50%;}

/* 버튼 스타일 변경 */
.btn > i{font-size:12px;}
.btn.sm{line-height:24px;}
.btn-primary{background-color:var(--point_color); border-color:var(--point_color); padding:6px 10px; min-width:80px;}
.more_btn .fa-plus:before{font-size:8px; color:#999}
/* .checkbox label:before, .checkbox label:after{border-width:1px;} */
.checkbox input:checked + label:before{background:var(--point_color); border-color:var(--point_color);  border-width:2px; border-radius:3px; box-sizing:border-box;}
.checkbox input:checked + label:after{border-color:#fff; left:8px;}
.checkbox label:before{border-width:1px; border-radius:3px; border-color:#aaa; }
.checkbox input:disabled + label:before{background:#efefef; border-width:1px; border-radius:3px;}

.radio label:before{width:14px; height:14px; }
.radio input:checked + label:after{width:8px; height:8px; top:6px; left:5px;}

/* 페이징 관련 */
.pagination .page_number.active, .pagination .page_number:hover{color:var(--point_color); border-color:var(--point_color);}

/* 모달창 관련 */
.layer_pop_box .layer_pop_header{background:var(--point_color);}
.layer_pop_header > h3{color:#fff;}
.layer_pop_box .layer_close{background:url('/images/add_img/icon_close_w.svg') no-repeat; background-size:16px auto; border:none; background-position:50%}
.layer_pop_box .layer_print{background:url('/images/add_img/icon_print_w.svg') no-repeat; background-size:16px auto; border:none; background-position:50%}
.layer_pop_body .container_header h3{font-size:20px;}

/* 대시보드 관련 */
.dashboard_font .table_responsive{overflow-x:scroll;}

/* 랩핑 관련 */
.table_responsive{overflow-x:scroll;}
.table_responsive table{white-space:nowrap;}

.searching_wrap{display:flex;}
.searching_wrap .search_box{display:inline-block;}
.searching_wrap > * + *{margin-left:5px;}

@media (max-width: 1920px){ 

    .dashboard_font .bbsList{font-size:14px; white-space: nowrap;}

}
@media (max-width: 1200px){ 

    .container_header h3{font-size:20px;}

}

@media (max-width: 1024px){
    #header{height:60px; width:100%; background:none;}
    
    .utiltop{height:60px; display:flex; justify-content:space-between; align-items:center;}
    .utiltop .logo{display:block; font-size:20px;}
    .utiltop .logo:before{display:none;}
    .util{flex-direction:row; align-items:center; position:static; margin:0; padding:0; }
    .user_name{margin:0; margin-right:10px;}

    .util > ul{width:auto; margin:0;}
    .util > ul > li{width:100px; margin:0;}
    .util > ul > li + li{margin-left:5px; margin-top:0;}
    .util > ul > li > a.btn.md{}

    .navbar{left:-200px; width:200px; min-height:100vh; height:100%; transition:.3s;}
    .side_toggle .navbar{left:0;}

    .navbar .nav-link {}

    #container{width:100%; margin-left:0;}
    #content{ padding:125px 20px; }
    
    #content .btn_wrap.tr{text-align:left !important;}
    #content .btn_wrap.tr .btn{margin-top:5px; position:relative; top:-5px;}
    
    .side_btn{position: absolute; left: 0; top:70px; display: block; width: 42px; height: 42px; background: #858796; padding: 15px 13px; border-radius: 0 3px 3px 0; transition: .3s;}    
    
    .side_btn .side_menu{position:relative; width:100%; height:100%; cursor:pointer;}
    .side_btn .side_menu .bar{position:absolute; right:0; display:block; width:100%; height:2px; background-color:#fff; transition:all .4s;}
    .side_btn .side_menu .bar:nth-child(1){top:0}
    .side_btn .side_menu .bar:nth-child(2){display:block; top:50%; margin-top:-1px;}
    .side_btn .side_menu .bar:nth-child(3){bottom:0;}

    .side_toggle #content.menu_toggle{width:calc(100% - 200px); margin-left:200px;}
    .side_toggle .side_btn{left:200px; background:var(--point_color);}
    .side_toggle .sidebar{left:0;}
    .side_toggle.side_btn .side_menu .bar:nth-child(1) {transform: rotate(45deg); top: 50%;}
    .side_toggle.side_btn .side_menu .bar:nth-child(2) {display: none;}
    .side_toggle.side_btn .side_menu .bar:nth-child(3) {transform: rotate(-45deg); top: 50%;}

    
    .sidebar .side-link.active{border-right:none; border-left:3px solid var(--point_color);}

    .table_responsive{overflow-x:scroll;}
    .bbsList th, .bbsList td{white-space:nowrap;}

    .layer_pop_body .container_header h3{font-size:18px}

    .dataTables_right{*float:none;}
    .srch_detail{width:100%;}
    .location{position:absolute; top:-35px;}

    .range_option{display:flex; align-items:center;}
    .data_form{position:relative; border:1px solid #CED4DA; border-radius:5px;}
    .data_form > .date_btn{position:absolute; border:none;}
    .data_form > input{border:none; text-align:right; margin:0;}

    /* 대시보드 관련 */
    .dashboard_font .divider-col{justify-content:space-between; flex-wrap:wrap;}
    .dashboard_font .divider-col .col-3{width:calc(50% - 10px); display:flex; justify-content: space-between; margin-right:0;}
    .dashboard_font .divider-col .col-3 .divider{width:100%;}
    .dashboard_font .divider-col .col-3:last-child{width:100%;}
    .dashboard_font .divider-col .col-3:last-child .divider{width:calc(50% - 10px);}
    .dashboard_font .divider-col .col-3:last-child .divider + .divider{margin-left:20px;}
}

@media (max-width: 767px){
    #header{width:100%;}
    
    .utiltop{padding:0 10px;}
    .utiltop .logo{display:block; font-size:20px;}
    .utiltop .logo:before{display:none;}
    .util{flex-direction:row; position:static; margin:0; padding:0; }
    .user_name{display:none;}

    #content.menu_toggle{padding-top:120px;}
    #content .btn_wrap.tr .btn{margin-top:5px; position:relative; top:-5px;}

    .side_toggle #content.menu_toggle{width:calc(100% - 200px);margin-left:200px;}

    .side_toggle .side_btn{left:200px; background:var(--point_color);}
    .side_btn .side_menu{position:relative; width:100%; height:100%; cursor:pointer;}
    .side_btn{border-radius: 0 3px 3px 0;}
    .sidebar{top:100px; bottom:auto; margin:auto; left:-200px;}
    .bbsList th, .bbsList td{white-space:nowrap;}

    .layer_pop_body .container_header h3{font-size:18px}

    .bbsView tbody th{font-size:14px; text-align:left;}
    .bbsView tbody td{font-size:14px; text-align:left; padding:10px;}
    .srchTable td{font-size:14px; text-align:left; padding:10px;}
    .srchTable th{max-width:100%; text-align:left;}

    .container_header h3 {font-size:20px;}

    .btn{padding:6px 8px;}
    
    /* 대시보드 관련 */
    .dashboard_font .divider-col{display:flex; flex-direction:column;}
    .dashboard_font .divider-col .col-3{width:100%;}
    .dashboard_font .divider-col .col-3:last-child{flex-wrap: wrap;flex-direction: column;}
    .dashboard_font .divider-col .col-3:last-child .divider{width:100%;}
    .dashboard_font .divider-col .col-3:last-child .divider + .divider{margin-left:0;}
}

@media (max-width: 640px){
    html, body{min-width:425px;}
    .utiltop .logo{font-size:18px;}
    .util > ul > li{width:80px;}

    .user_name{display:none;}

    .searching_wrap{flex-wrap:wrap;}
    .searching_wrap .search_box{position:relative; width:100%; height:35px; line-height:35px; margin-bottom: 5px; border:1px solid #ced4da; border-radius:5px; display:block; padding:0 10px; overflow:hidden;}
    .searching_wrap .search_box input[type='text']{display:block; width:100%; height:100%; border:none; padding:0; margin:0;}
    .searching_wrap .search_box button{position:absolute; top:0; right:0; background:var(--point_color); color:#fff; border-radius:0; height:100%; margin:0; padding:0 16px; border:none;}

}

@media (max-width: 425px){ 
    .side_toggle #content.menu_toggle{width:100%; margin-left:0;}
    
    #content .btn_wrap.tr{text-align:center !important;}
    #searchForm .input300{width:200px !important}
    .input200, .input300{width:100% !important}
}