*{margin: 0;
    padding: 0;
}


html, body{
    height: 100%;
}

#wrap{
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    background-color: var(--bg-color);
}

#wrap_main{
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0 auto;
    padding-bottom: 136px;
    background-color: var(--bg-color);
}

:root{
    --main-color:#1D3994;
    --main2-color:#14276B;
    --maingr-color:#22B356;
    --line-color:#E6E6E6;
    --line_deep-color:#D2D2D2;
    --bg-color:#F5F5F5;
    --bg_g-color:#F3F9F2;
    --grey-color:#686868;
    --font-color:#333333;
    --font2-color:#999999;
}

.img_all{background-image: url(../img/img_all.png);}
.img_all2{background-image: url(../img/img_all2.png);}


/* 로그인 */

.login_wrap{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background-color: var(--main-color);
}

.login_box{
    width: 465px;
    height: 546px;
    background-color: #ffffff;
    position: absolute;
    border-radius: 20px;
    padding-top: 66px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login_logo{
    width: 269px;
    height: 41px;
    display: inline-block;
    background-size: 269px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
}

.login_in{
    align-items: center;
    width: 310px;
    margin-left: 77px;
    flex-direction: column;
    gap: 20px;
}

.login_input{
    background-color: var(--bg-color);
    border: none !important;
}

.login_txt{
    font-size: 13px;
    line-height: 20px;
}

.login_in ::placeholder{
    color: #888FA8;
    vertical-align: middle;
    font-family: 'NanumGothicB';
}


.login_in input:first-of-type{
    margin-bottom: 20px;
}

.login_in input{
    padding-left: 50px;
}

.login_id_wrap{
    position: relative;
}

.log_ico{
    width: 19px;
    height: 19px;
    position: absolute;
}

.log_ico1{
    top: 9px;
    left: 14px;
    background-position: -66px -60px;
}
.log_ico2{
    top: 68px;
    left: 14px;
    background-position: -86px -60px;
}

/**상단**/

.top_wrap{
    width: 100%;
}

.top_up{
    width: 100%;
    height: 56px;
    background-color: var(--main-color);
}

.top_logo{
    width: 257px;
    height: 42px;
    margin-top: 14px;
    display: inline-block;
    background-size: 257px;
    background-image: url(../img/top_logo.png);
    background-repeat: no-repeat;
}

.top_txt{
    color: #ffffff;
    margin-top: 29px;
    transform: skew(-0.1deg);
    display: inline-block;
}

.top_up_r{
    gap: 8px;
    margin-right: 24px;
    align-items: center;
    position: relative;
}

.top_new{
    width: 16px;
    height: 16px;
    top: 10px;
    left: 18px;
    border-radius: 50px;
    background-color: var(--maingr-color);
    position: absolute;
}

.new_num{
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    color: #ffffff;
    font-family: 'NanumGothicB';
}

.top_alert{ /*상단 알림 아이콘 */
    width: 16px;
    height: 16px;
    top: 10px;
    left: 177px;
    border-radius: 50px;
    background-color: var(--maingr-color);
    position: absolute;
}

.alert_num{/*상단 알림 아이콘 숫자 */
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    color: #ffffff;
    font-family: 'NanumGothicB';
}

.top_ico{
    width: 32px;
    height: 32px;
}
.top_ico1{background-position: 0 -258px;}
.top_ico2{background-position: -33px -258px;}
.top_ico3{background-position: -66px -258px;}
.top_ico4{background-position: -99px -258px;}
.top_ico5{background-position: -474px 0;}
.top_ico6{background-position: -99px -258px;}

.top_ico1:hover{background-position: 0 -291px;}
.top_ico2:hover{background-position: -33px -291px;}
.top_ico3:hover{background-position: -66px -291px;}
.top_ico4:hover{background-position: -99px -291px;}
.top_ico5:hover{background-position: -441px 0;}
.top_ico6:hover{background-position: -99px -291px;}


/* 메인메뉴 */
.top_menu_down{
    width: 100%;
    height: 48px;
    border-bottom: 1px solid var(--line-color);
    background-color: #ffffff;

}

.top_menu_wrap{
    height: 48px;
    align-items: center;
    margin: 0 20px;
    text-align: center;
    gap: 50px;
}

.top_menu{
    width: 180px;
    height: 34px;
    line-height: 34px;
    border-radius: 30px;
    cursor: pointer;
}

.top_menu_on{
    width: 180px;
    height: 34px;
    line-height: 34px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'NanumGothicB';
    color: #ffffff;
    background-color: var(--maingr-color);
}

.top_menu_on:hover{
    font-family: 'NanumGothicB';
    color: #ffffff;
    background-color: #26C35F;
}

.top_menu:hover{
    background-color: var(--line-color);
}

.arrow_down{
    width: 12px;
    height: 7px;
    margin-left: 14px;
    margin-bottom: 1px;
    display: inline-block;
    background: url(../img/sel_arr.png) no-repeat;
}

.arrow_down_w{
    width: 12px;
    height: 7px;
    margin-left: 14px;
    margin-bottom: 1px;
    display: inline-block;
    background: url(../img/sel_arr_w.png) no-repeat;
}


.drop_down{
    position: relative;
    display: inline-block;
}

.drop_down_menu{
    display: none;
    width: 200px;
    font-size: 16px;
    line-height: 40px;
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}


.drop_down_menu a{
    width: 200px;
    display: block;
}

.drop_down_menu a:first-child{
    border-top: 1px solid var(--line-color);
    margin-top: 6px;
}

.drop_down_menu a:hover{
    color: #ffffff;
    background-color: var(--maingr-color);
}

.drop_down:hover .drop_down_menu{
    display: block;
}




/* 메인 컨텐츠 영역 */

.content{
    width: 100%;
    height: calc(100% - 104px);
    background-color: var(--bg-color);
    position: relative;
    padding: 14px 24px 50px 24px;
}

.content2{
    width: 100%;
    background-color: var(--bg-color);
    position: relative;
    padding: 14px 24px 50px 24px;
}

.border2_wrap{
    width: 100%;
    height: calc(100% - 9px);
    background-color: var(--bg-color);
    margin-top: 14px;
}


.con_up{
    width: 100%;
    height: 460px;
    gap: 24px;
}

.con_down{
    width: 100%;
    height: 278px;
    gap: 24px;
}

.con_box30{
    width: 33%;
    height: 100%;
}

.con_box40{
    width: 57%;
    height: 100%;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}


.main_box{
    width: 100%;
    height: 405px;
    border-radius: 14px;
    margin-top: 10px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    background-color: #ffffff;
    position: relative;
}

.con_box{
    width: 100%;
    border-radius: 14px;
    margin-top: 10px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    background-color: #ffffff;
}

.tabl_box_out{
    width: 100%;
    height: calc(100% - 194px);
    border-radius: 14px;
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    background-color: #ffffff;
}

.tabl_h_wrap{
    height: calc(100% - 0px);
    overflow: auto;
}

.main_sel_wrap{
    position: absolute;
    right: 20px;
}


.graph{
    width: 100%;
    padding: 24px;
    height: 146px;
    background-color: var(--line_deep-color);/*그래프넣으시고 이부분 배경색 태그는 삭제해주세요*/
}

.main_table{
    padding-bottom: 4px;
    border-radius: 14px;
    overflow: auto;
    position: relative;
    background-color: #ffffff;
}

.main_table tr{
    text-align: center;
    line-height: 50px;
}

.main_table th{
    border-bottom: 1px solid var(--line-color);

}

.main_table tr:first-child, .permit_r tr:first-child{
    position: sticky;
    top: 0;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}

.main_table tr:not(:first-child):hover, .permit_r tr:not(:first-child):hover{
    background-color: var(--bg_g-color);
}

.noti_wrap{
    padding-left: 14px;
    padding-right: 14px;
}

.noti_top{
    width: 100%;
    height: 66px;
    align-items: center;
}

.noti_top_l{
    gap: 14px;
}

.noti_btn{
    width: 130px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
}

.noti_btn:hover{
    color: #ffffff;
    background-color: var(--maingr-color);
}

.noti_btn_on{
    color: #ffffff;
    background-color: var(--maingr-color);
}

.noti_btn_off{
    background-color: var(--bg-color);
}

.noti_plus{
    width: 20px;
    height: 20px;
    margin-right: 14px;
    background-position: 0 -60px;
}

.noti_board{
    width: 100%;
    height: 196px;
    padding: 14px;
    line-height: 35px;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.noti_board ul:first-child {
    list-style: inside;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noti_txt li:hover{
    color: var(--maingr-color);
}

.col_main{
    flex-direction: column;
    align-items: center;
}

.main_go{
    position: relative;
    width: 205px;
    height: 100%;
    padding: 24px;
    word-break: keep-all;
    text-align: center;
    border-radius: 24px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}

.go_img{
    width: 88px;
    height: 88px;
}
.go_1{background-position: -89px -80px;}
.go_2{background-position: 0 -80px;}
.go_3{background-position: 0 -169px;}
.go_4{background-position: -89px -169px;}

.main_go li:nth-child(2){
    font-size: 12px;
    margin: 10px 0;
}

.col1{color: #FFB246;}
.col2{color: #729BFF;}
.col3{color: #fa9999;}
.col4{color: #41D793;}

.main_go li:nth-child(4){
    width: 81%;
    font-size: 14px;
    margin-top: 10px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;

}

.main_go li:nth-child(5){
    position: absolute;
    bottom: 14px;
    width: 24px;
    height: 3px;
    background-color: var(--line_deep-color);

}

.board_top{
    align-items: center;
    height: 40px;
    margin-bottom: 14px;
}

.board_l{
    width: 50%;
}

.board_up{
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    padding: 20px;
    line-height: 30px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
    position: relative;
}

.cad_wrap{
    width: 100%;
    padding-right: 14px;
    height: calc(100% - 0px);
    overflow: auto;

}
.cad_bg{
    width: 100%;
    height: calc(100% - -24px);
    align-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    padding: 20px;
    line-height: 30px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
    position: relative;
}


.board_up_l{
    display: inline-block;
    width: 89%;
}


.board_up_l_in{
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}


.box_label{
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.board_up_l label, .board_up label{
    margin-right: 14px;
    display: inline-block;
    font-family: 'NanumGothicB';
    width: 62px;
}

.board_up_l label, .board_up label{
    margin-right: 14px;
    display: inline-block;
    font-family: 'NanumGothicB';
    width: 62px;
}

.w100_2{
    width: 100px !important;
}

.input_title{
    border: none !important;
}

.board_up_r{
    position: absolute;
    display: inline-block;
    right: 20px;
}

.add_file{
    min-width: 500px;
    display: flex;
    cursor: pointer;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 14px;
}

.add_file_s{
    gap: 10px;
    display: flex;
    cursor: pointer;
    margin-right: 24px;
    align-items: center;
}

.add_x{
    width: 12px;
    height: 13px;
    cursor: pointer;
    background-position: -83px -327px;
}

.add_x:hover{
    background-position: -96px -327px;
}

/*------------------교통량조사 탭메뉴------------------ */

.txt_gry{
    height: 40px;
    line-height: 40px;
    border-radius: 14px;
    padding: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--bg-color);
}

.txt_gry span{
    font-family: 'NanumGothicB';
}

.tap_top{
    width: 100%;
}

.tap_bg{
    width: 200px;
    height: 48px;
    text-align: center;
    line-height: 52px;
    margin-top: 14px;
    padding: 0 10px;
    font-size: 18px;
    border-radius: 14px 14px 0 0 ;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    white-space: nowrap;
}

.tap_bg_long{
    width: 250px;
    height: 48px;
    text-align: center;
    line-height: 52px;
    margin-top: 14px;
    padding: 0 10px;
    font-size: 18px;
    border-radius: 14px 14px 0 0 ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tap_h232{
    height: 232px;
    overflow: auto;
}

.tap_bg:first-child, .tap_bg_long:first-child{
    margin-left: 14px;
}

.tap_on{
    color: #ffffff;
    font-family: 'NanumGothicB';
    background-color: var(--maingr-color);
}

.tap_off{
    border-left: 1px solid var(--line_deep-color);
    border-top: 1px solid var(--line_deep-color);
    border-right: 1px solid var(--line_deep-color);
    background-color: #ffffff;
}

.tap_off:hover{
    color: #ffffff;
    font-family: 'NanumGothicB';
    border: none;
    background-color: var(--maingr-color);
}

.tap_con{
    padding: 20px;
    height: calc(100% - 202px);
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
}

.tap_con_tbl{
    height: calc(100% - 202px);
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
}

.code_con{
    padding: 20px;
    height: calc(100% - 254px);
    background-color: #ffffff;
    border-radius: 14px;
    overflow: auto;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
}

.code_con_in{
    height: calc(100% - 0px);
    overflow: auto;
}

.info_in{
    height: calc(100% - 40px);
    overflow: auto;
}

.w48_con{
    width: 48%;
    overflow: auto;
}

.tap_con40{
    padding: 20px;
    height: calc(100% - 40px);
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line-color);
}

.tap_map{
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
}


.tap_bg_g{
    border-radius: 14px;
    padding: 14px 20px;
    background-color: var(--bg-color);
    border: 1px solid var(--line-color);
}

.w40{
    width: 40%;
}

.tap_r2{
    width: calc(59% - 212px);
    height: 100%;
    overflow: auto;
}

.tap_r3 input{
    padding-left: 0 !important;
    font-size: 12px;
}

.tap_r_list{
    width: 212px;
    height: 100%;
}


.list_in{
    width: 212px;
    height: calc(100% - 96px);
    overflow: auto;
    background-color: var(--bg-color);
}

.list_in ul{
    margin: 6px 10px;
}

.list_in li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 40px;
    cursor: pointer;
}



.tap_r_img{
    height: 100%;
}

.tap_r{
    width: 49%;
    height: 100%;
    overflow: auto;
    flex-direction: column;
}

.tap_tabl tr{
    text-align: center;
}

.tap_tabl input{
    margin: 6px 0;
}

.tap_bg_g label{
    width: 180px;
}

.result{
    padding: 20px;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.result_botm{
    margin-top: 20px ;
    padding-top: 20px;
    justify-content: flex-start;
    border-top: 1px solid var(--line_deep-color);
}



.result label, .result_botm label{
    width: 120px;
    line-height: 24px;
}

.block_add span{
    font-size: 14px;
}


.pic_arr_l{
    width: 36px;
    height: 127px;
    position: relative;
    background-color: #ffffff;
    border-radius: 15px 0 0 15px;
    cursor: pointer;
}

.pic_ico_l:hover{
    background-image: url(../img/pic_arr_l_grn.png);
}

.pic_ico_l{
    width: 12px;
    height: 22px;
    position: absolute;
    left: 12px;
    top: calc(50% - 11px);
    background-image: url(../img/pic_arr_l.png);
    cursor: pointer;
}

.pic_arr_r{
    width: 36px;
    height: 127px;
    position: relative;
    background-color: #ffffff;
    border-radius: 0 15px 15px 0;
}

.pic_ico_r:hover{
    background-image: url(../img/pic_arr_r_grn.png);
}

.pic_ico_r{
    width: 12px;
    height: 22px;
    position: absolute;
    left: 12px;
    top: calc(50% - 11px);
    background-image: url(../img/pic_arr_r.png);
}

.pic_add{
    width: 100%;
    height: 130px;
    border-radius: 14px;
    border: 1px solid var(--line_deep-color);
    background-color: var(--bg-color);
}


.pic_add_box{
    width: 100%;
    height: 127px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    white-space: nowrap;
}

.pic_box_bg{
    width: 94px;
    height: 100%;
    display: inline-block;
    border-radius: 14px;
    margin-left: 14px;
    background-color: #ffffff;
}

.pic_box_on{
    border: 4px solid #80DDA1;
}

.pic_box_off{
    border: 1px solid var(--line_deep-color);
}

/* 실태조사 표준코드 관리 */

.sign_box{
    width: 50%;
    height: 300px;
    background-color: var(--bg-color);
    border-radius: 14px;
}


.sel_set{
    display: flex;
    align-items: center;
    word-break: keep-all;
    line-height: 20px;
}


.sel_set2{
    align-items: center;
    word-break: keep-all;
    line-height: 20px;
}

.gap50{gap: 50px;}

.treep_wrap{
    width: 100%;
    height: 100%;
}

.tree_l{
    width: 328px;
    height: auto;
}

.tree_l_bg{
    width: 328px;
    background-color: #ffffff;
    border-top: 1px solid var(--line-color);
    border-radius: 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}

.tree_l_bg ul{
    margin-top: 20px;
}

.tree_l_bg ul:last-child{
    padding-bottom: 20px;
}


.tree_l_bg ol,.tree_l_bg li{
    line-height: 36px;
    cursor: pointer;
}

.tree_l_bg li{
    list-style-position: inside;
    list-style-image: url(../img/tree_marker.png);
}

.tree_l_bg li:hover{
    color: var(--maingr-color);
    background-color: var(--bg_g-color);
    list-style-image: url(../img/tree_marker_g.png);
}


.sel_set_wrap{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 28px;
}


.tree_ico1{
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 10px;
    background-position: -17px -43px;
}

.tree_r{
    width: 100%;
    padding-left: 24px;
}

.tree_tool{
    width: 100%;
    height: 66px;
    background-color: var(--line-color);
}

.tree_board_bg{
    padding: 20px;
    height: 604px;
    background-color: #ffffff;
    border-radius: 0 0 14px 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);

}

.depth0{padding-left: 20px;}
.depth1{padding-left: 45px;}
.depth2{padding-left: 60px;}
.depth3{padding-left: 80px;}
.depth4{padding-left: 100px;}



/* faq게시판 자주 묻는 질문 */

.faq_top{
    flex-direction: column;
    padding: 24px 0;
}

.faq_box{
    height: calc(100% - 180px);
    overflow: auto;
}

.faq_q{    /* faq Q 질문 부분 클래스 */
    width: 100%;
    height: 50px;
    line-height: 56px;
    font-family: 'NanumGothicB';
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.faq_q:hover{
    background-color: var(--bg_g-color);
    border-bottom: 2px solid #ffffff;
}

.faq_a{  /* faq A 대답 부분 클래스 */
    width: 100%;
    min-height: 50px;
    line-height: 32px;
    padding: 24px 24px 24px 0;
    background-color: var(--bg_g-color);
    word-break: keep-all;
    display: flex;
}

.faq_txt_q{
    font-size: 26px;
    color: var(--maingr-color);
    margin: 0 20px;
}

.faq_txt_a{
    font-size: 26px;
    color: var(--maingr-color);
    margin: 0 20px 0 64px;
}


.faq_arr{ /* 역방향 화살표는 클래스명 rota 추가. (180도회전 클래스) */
    width: 18px;
    height: 8px;
    margin: 20px 20px 0 0;
    background-position: -177px -243px;
}



.faq_arr:hover{
    background-position: -195px -243px;
}








/* 실태조사등록-수정 */

.write_wrap{
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 14px;
    gap: 20px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}

.write_bg1_wrap{
    width: 30%;
}

.green_dot{
    width: 6px;
    height: 6px;
    margin-top: 5px;
    margin-right: 8px;
    display: inline-block;
    border-radius: 50px;
    background-color: var(--maingr-color);
}

.write_bg1{
    width: 100%;
    height: 45%;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--bg-color);
}


.bg1_wrap{
    margin-top: 14px;
    gap: 28px;
}


.write_bg1_1{
    width: 100%;
    height: 45%;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--bg-color);
    margin-top: 8%;
    align-items: center;
}

.bg1_1_name{
    width: 226px;
    height: 40px;
    margin-left: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffffff;
}

.bg1_1_name span{
    color: var(--maingr-color);
    font-family: 'NanumGothicB';
}

.write_bg2{
    width: 30%;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.write_bg2_radio{
    margin: 24px 0 20px 0;
    align-items: center;
}

.radio_solo{
    align-items: center;
    height: 40px;
}

.permit_radio label{
    cursor: pointer;
}

.radio_wrap{
    margin-left: 20px;
}

.write_bg2 > .sel_set >label{
    width: 115px;
}

.write_bg3{
    width: 100%;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.write_bg3 label, .board_up_l_in > .sel_set > label{
    width: 80px;
    margin-right: 14px;
}

.write_bg3_down{
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.write_bg3_down > .sel_set > span, .board_up_l_in > .sel_set > span{
    margin: 0 10px;
    font-family: 'NanumGothicB';
}


.btn_set{
    gap: 14px;
    margin-top: 14px;
    justify-content: flex-end;
}

.date_wrap{
    display: flex;
    align-items: center;
}

.date_wrap span{
    margin: 0 10px;
}

/* 사이드바 */

.wrap2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map_wrap{
    width: calc(100% - 65px);
    height: 100%;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 65px;
    background-size: cover;
    /*background-image: url(../img/map_sample.png);*/
}

.side{
    width: 65px;
    height: 100vh;
    position: relative;
    z-index: 5;
    overflow: hidden;
    background-color: var(--main-color);
}

.side_logo{
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    padding-top: 20px;
    line-height: 20px;
}

.side_menu_wrap{
    margin-top: 80px;
    text-align: center;
}

.side_menu{
    height: 104px;
    color: #ffffff;
    padding-top: 16px;
    line-height: 20px;
}

.side_menu_on{
    background-color: var(--main2-color);
}

.bar{
    width: 26px;
    border: 1px solid var(--main2-color);
    margin-left: 20px;
    margin-top: 11px;
}

.side_menu:hover{
    background-color: var(--main2-color);
}

.side_menu span{
    color: #ffffff;
    font-size: 11px;
    font-family: 'NanumGothicL';
}

.side_menu_ico{
    width: 17px;
    height: 18px;
    display: inline-block;
    margin-bottom: 10px;
    background-position: -32px -42px;
}

.side_menu_ico2{
    width: 17px;
    height: 18px;
    display: inline-block;
    margin-bottom: 10px;
    background-position: -50px -42px;
}

.side_menu_ico3{
    width: 18px;
    height: 17px;
    display: inline-block;
    margin-bottom: 10px;
    background-position: -50px -42px;
}

/* 맵아이콘 공통객체  */
input[id="draw"],input[id="map_map"],
input[id="ruler"], input[id="edit"], input[id="dron"]
{display: none;}

div[class="ruler_left"] span, div[class="edit_left"] span,
div[class="map_left"] span, div[class="draw_left"] span,
div[class="dron_left"] span{
    width:40px;
    height:40px;
    display: block;
    border-radius: 10px;
    border-left: 1px solid var(--line_deep-color);
    border-top: 1px solid var(--line_deep-color);
    border-bottom: 1px solid var(--line_deep-color);
    background-color: #ffffff;
    cursor:pointer;
}

input[id="map_map"]:checked + label + div,
input[id="ruler"]:checked + label + div,
input[id="edit"]:checked + label + div,
input[id="draw"]:checked + label + div
{
    right: 60px;
    opacity: 1;
}

input[id="map_map"]:checked + label,
input[id="ruler"]:checked + label,
input[id="edit"]:checked + label,
input[id="draw"]:checked + label,
input[id="dron"]:checked + label{
    z-index:7;}


/*지도- 맵아이콘 접힘*/

input[id="map_map"] + label span{
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 20px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -177px -43px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}


input[id="map_map"] + label span:hover{
    transition: none;
    background-position: -177px -83px;
    background-image: url(../img/img_all.png);
}


div[class="map_left"]{
    opacity: 0;
    height: 40px;
    position: fixed;
    top: 20px;
    right: 60px;
    display: flex;
    z-index: 3;
}



/* 측정 아이콘 */
input[id="ruler"] + label span{ /*측정객체*/
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 360px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -377px -123px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}


input[id="ruler"] + label span:hover{
    transition: none;
    background-position: -377px -163px;
    background-image: url(../img/img_all.png);
}

div[class="ruler_left"]{
    opacity: 0;
    height: 40px;
    position: fixed;
    top: 360px;
    right: 60px;
    display: flex;
    z-index: 3;
}


/*객체편집 아이콘*/

input[id="edit"] + label span{
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 420px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -377px -283px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}

.map_edit0_ico{background-position: -377px -283px;}
.map_edit0_ico:hover{background-position: -417px -283px;}




input[id="edit"] + label span:hover{
    transition: none;
    background-position: -417px -283px;
    background-image: url(../img/img_all.png);
}

div[class="edit_left"]{
    opacity: 0;
    height: 40px;
    position: fixed;
    top: 420px;
    right: 60px;
    display: flex;
    z-index: 3;
}


/*그리기객체*/

input[id="draw"] + label span{
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 300px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -167px -288px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}

input[id="draw"] + label span:hover{
    transition: none;
    background-position: -207px -288px;
    background-image: url(../img/img_all.png);
}

div[class="draw_left"]{
    opacity: 0;
    height: 40px;
    position: fixed;
    top: 300px;
    right: 60px;
    display: flex;
    z-index: 3;
}

/*드론영상*/

input[id="dron"] + label span{
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 100px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -177px -123px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}

input[id="dron"] + label span:hover{
    transition: none;
    background-position: -217px -123px;
    background-image: url(../img/img_all.png);
}

.dron_list{
    line-height: 20px;
    padding: 6px;
    text-align: center;
    display: block;
    border-radius: 8px;
    background-color: var(--bg-color);
}

.dron_list a{
    font-size: 13px;
    cursor: pointer;
}

.dron_list a:hover{
    font-family: 'NanumGothicB';
    color: var(--maingr-color);
}

div[class="dron_left"]{
    text-align: center;
    font-size: 14px;
    opacity: 0;
    width: 120px;
    height: 110px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y:auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    background-color: #ffffff;
    border-radius: 14px;
    top: 100px;
    display: flex;
    z-index: 3;
}

input[id="dron"]:checked + label + div{
    right: 64px;
    opacity: 1;
}

input[id="remove"] {display: none;}

input[id="remove"]:checked + label + div
{
    right: 60px;
    opacity: 1;
}

input[id="remove"]:checked + label{
    z-index:7;}


input[id="remove"] + label span{
    width:40px;
    height:40px;
    z-index: 8;
    display:block;
    position:absolute;
    top: 420px;
    right: 20px;
    cursor:pointer;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line_deep-color);
    background-size: 600px 350px;
    background-position: -258px -124px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}


input[id="remove"] + label span:hover{
    transition: none;
    /*background-position: -417px -283px;*/
    background-position: -258px -164px;
    background-image: url(../img/img_all.png);
}



/* 객체 span이미지들 */

.map_ico_bg{
    width:40px;
    height:40px;
    background-size: 600px 350px;
    background-repeat: no-repeat;
    background-image: url(../img/img_all.png);
}

.map_solo_bg{
    width:40px;
    height:40px;
    display: block;
    position: absolute;
    border-radius: 10px;
    border: 1px solid var(--line_deep-color);
    background-color: #ffffff;
    cursor:pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;
}



.map_img1{background-position: -257px -43px;}
.map_img1:hover{background-position: -257px -83px;}
.map_img2{background-position: -217px -43px;}
.map_img2:hover{background-position: -217px -83px;}

.map_plus{top: 160px;right: 20px;}
.map_plus_ico{background-position: -297px -43px;}
.map_plus_ico:hover{background-position: -297px -83px;}

.map_refr{top: 200px;right: 20px;}
.map_refr_ico{background-position: -337px -43px;}
.map_refr_ico:hover{background-position: -337px -83px;}

.map_min{top: 240px;right: 20px;}
.map_min_ico{background-position: -377px -43px;}
.map_min_ico:hover{background-position: -377px -83px;}

.map_draw2_ico{background-position: -417px -43px;}
.map_draw2_ico:hover{background-position: -417px -83px;}
.map_draw3_ico{background-position: -457px -43px;}
.map_draw3_ico:hover{background-position: -457px -83px;}
.map_draw4_ico{background-position: -537px -43px;}
.map_draw4_ico:hover{background-position: -537px -83px;}
.map_draw5_ico{background-position: -497px -43px;}
.map_draw5_ico:hover{background-position: -497px -83px;}
.map_draw6_ico{background-position: -297px -123px;}
.map_draw6_ico:hover{background-position: -297px -163px;}
.map_draw7_ico{background-position: -257px -123px;}
.map_draw7_ico:hover{background-position: -257px -163px;}
.map_draw8_ico{background-position: -337px -123px;}
.map_draw8_ico:hover{background-position: -337px -163px;}


.map_ruler2_ico{background-position: -417px -123px;}
.map_ruler2_ico:hover{background-position: -417px -163px;}
.map_ruler3_ico{background-position: -457px -123px;}
.map_ruler3_ico:hover{background-position: -457px -163px;}
.map_ruler4_ico{background-position: -497px -123px;}
.map_ruler4_ico:hover{background-position: -497px -163px;}

.map_edit0_ico{background-position: -537px -123px;}
.map_edit0_ico:hover{background-position: -537px -163px;}
.map_edit1_ico{background-position: -177px -163px;}
.map_edit1_ico:hover{background-position: -177px -203px;}
.map_edit2_ico{background-position: -337px -203px;}
.map_edit2_ico:hover{background-position: -337px -243px;}
.map_edit3_ico{background-position: -217px -163px;}
.map_edit3_ico:hover{background-position: -217px -203px;}
.map_edit4_ico{background-position: -297px -203px;}
.map_edit4_ico:hover{background-position: -297px -243px;}
.map_edit5_ico{background-position: -377px -203px;}
.map_edit5_ico:hover{background-position: -377px -243px;}
.map_edit6_ico{background-position: -417px -203px;}
.map_edit6_ico:hover{background-position: -417px -243px;}
.map_edit7_ico{background-position: -457px -203px;}
.map_edit7_ico:hover{background-position: -457px -243px;}
.map_edit8_ico{background-position: -497px -203px;}
.map_edit8_ico:hover{background-position: -497px -243px;}
.map_edit9_ico{background-position: -457px -283px;}
.map_edit9_ico:hover{background-position: -497px -283px;}
.map_edit10_ico{background-position: -257px -203px;}
.map_edit10_ico:hover{background-position: -257px -283px;}

.map_my{top: 480px;right: 20px;}
.map_my_ico{background-position: -537px -203px;}
.map_my_ico:hover{background-position: -537px -243px;}

.map_save{top: 540px;right: 20px;}
.map_save_ico{background-position: -297px -283px;}
.map_save_ico:hover{background-position: -337px -283px;}


/* 사이드바 접히는부분(슬라이드바) */
input[id="pold_add"], input[id="pold_faci"],
input[id="pold_layer"],input[id="pold_r"]{display: none;}

input[id="pold_add"]:checked + label,
input[id="pold_faci"]:checked + label,
input[id="pold_layer"]:checked + label,
input[id="pold_r"]:checked + label
{z-index:4;}

input[id="pold_add"]:checked + label span,
input[id="pold_faci"]:checked + label span,
input[id="pold_layer"]:checked + label span,
input[id="pold_r"]:checked + label span
{	left: 65px;
    background:url(../img/nav_open2.png);
}

input[id="pold_add"] + label span,
input[id="pold_faci"] + label span,
input[id="pold_layer"] + label span,
input[id="pold_r"] + label span

{
    width:22px;
    height:54px;
    z-index: 4;
    display:block;
    position:absolute;
    top: 11px;
    left: 484px;
    cursor:pointer;
    transition: all 0.3s;
    background:url(../img/nav_close.png);
}


div[class="ex_bg"],
div[class="ex_bg2"],
div[class="ex_bg3"],
div[class="ex_bg4"]{
    width: 420px;
    height: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 65px;
    transition: all 0.3s;
    z-index: 3;
    border-right: 1px solid var(--line_deep-color);
    box-shadow: 6px 2px 10px 1px rgba(0,0,0,0.1);
}


input[id="pold_add"]:checked + label + div,
input[id="pold_faci"]:checked + label + div,
input[id="pold_layer"]:checked + label + div,
input[id="pold_r"]:checked + label + div
{
    left: -420px;
    transition: all 0.3s;
}


input[id="pold_add"]:checked + label + div
input[id="pold_faci"]:checked + label + div
input[id="pold_layer"]:checked + label + div
input[id="pold_r"]:checked + label + div{
    left: -420px;
    transition: all 0.3s;
}



.side_tap_wrap{
    padding-top: 24px;
    gap: 11px;
}

.side_tap{
    width: 190px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    line-height: 42px;
}
.side_tap_g{
    color: #ffffff;
    background-color: var(--maingr-color);
}

.side_tap_w{
    border-top: 1px solid var(--line_deep-color);
    border-left: 1px solid var(--line_deep-color);
    border-right: 1px solid var(--line_deep-color);
}


.tap1_bg{
    width: 100%;
    height: 380px;
    padding: 14px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line_deep-color);
    border-bottom: 1px solid var(--line_deep-color);
    background-color: var(--bg-color);
}

.tap1_bg span{
    margin: 0 15px;
}

.tap1_btn_set{
    width: 100%;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.tap_find{
    width: 100%;
    height: calc(100% - 436px);
    padding: 24px 14px;
    overflow-y: auto;
    background-color: #ffffff;
}

.tap_find h4{
    color: var(--maingr-color);
    text-align: center;
}

.tap_find h5{
    line-height: 24px;
}

.find_box{
    width: 100%;
    border-radius: 10px;
    padding: 14px;
    margin-top: 24px;
    background-color: var(--bg-color);
}

.find_box_l{
    width: 90%;
}

.find_box_l li{
    line-height: 24px;
}

.find_box_r{
    width: 10%;
    gap: 6px;
    flex-direction: column;
}

.addr_top{
    width: 100%;
    height: 134px;
    flex-wrap: wrap;
    gap: 14px;
    padding: 24px 14px;
    background-color: var(--bg-color);
    border-top: 1px solid var(--line_deep-color);
    border-bottom: 1px solid var(--line_deep-color);
}

.addr_con{
    width: 100%;
    height: calc(100% - 198px);
    padding:24px 14px;
    overflow: auto;
}

.addr_con_layer{
    width: 100%;
    height: calc(100% - 118px);
    padding:24px 14px;
    overflow: auto;
}


.addr_con_txt{
    text-align: center;
    color: var(--font2-color);
}


/* .addr_con p{
    font-size: 14px;
} */

.layer_top{
    width: 100%;
    padding: 24px 14px;
    border-bottom: 1px solid var(--line_deep-color);
}

.layer_top span{
    font-size: 12px;
    color: var(--font2-color);
}

.layer_box{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 14px;
    border-radius: 10px;
    margin-bottom: 11px;
    align-items:center;
    background-color: var(--bg-color);
}

.layer_box:hover{
    background-color: var(--bg_g-color);
}

.faci_wrap{
    width: 100%;
    height: 100%;
    overflow: auto;
}

.faci_top{
    width: 100%;
    height: 122px;
    gap: 14px;
    align-items: center;
    padding: 24px 14px;
    background-color: #ffffff;
    border-top: 1px solid var(--line_deep-color);
    border-bottom: 1px solid var(--line_deep-color);
}


.faci_box2{
    width: 100%;
    padding: 10px 14px 0px 14px;
}

.faci_sele > .radio_solo label{
    width: 111px;
}

.faci_box3{
    width: 100%;
    height: 434px;
    padding: 24px 4px;
    overflow: auto;
    flex-wrap: wrap;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--line_deep-color);
}


.faci_sign_wrap{
    max-width: 330px;
    text-align: center;
}

.faci_sign_colum{
    width: 100%;
    /*height: 150px;*/
    overflow-x: hidden;
}

.faci_sign_wrap span{
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    word-break: keep-all;
}

/*작은 박스*/
.faci_sign{
    width: 110px;
    height: 94px;
    margin: 0 10px;
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--line_deep-color);
    background-color: #ffffff;
}
/*긴 박스*/
.faci_sign_wide{
    width: 169px;
    height: 94px;
    margin: 0 10px;
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--line_deep-color);
    background-color: #ffffff;
}
.no_img{
    width: 53px;
    height: 55px;
    margin-top: 11px;
    display: inline-block;
    background-position: -537px -284px;
}

.code_l{
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    width: 70%;

}

.code_r{
    width: 30%;
    gap: 22px;
}

.code_r_box1{
    width: 256px;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.code_r_box1 p{
    font-size: 14px;
    color: var(--font2-color);
}

.code_r_box2{
    width: 256px;
    height: 132px;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--line_deep-color);
    background-color: #ffffff;
}

.drag_ico{
    width: 34px;
    height: 33px;
    background-position: -132px -289px;
}


.permit_l{
    width: 40%;
    gap: 22px;
    flex-wrap: wrap;
}

.permit_radio{
    margin-left: 76px;
    margin-top: -18px;
}

.permit_r{
    width: 60%;
    background-color: #ffffff;
    height: 253px;
    overflow: auto;
    border-radius: 14px;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
    border: 1px solid var(--line_deep-color);
    line-height: 40px;
    position: relative;
}

.permit_r td:first-child{
    width: 45%;
}

.permit_r td:first-child:hover{
    color: var(--maingr-color);
}

.permit_r td:not(:first-child), .permit_r th:not(:first-child){
    text-align: center;
}

.permit_r td:first-child::before{
    content: url(../img/tree_marker.png);
    margin-right: 4px;
}



/*----------------토글 스위치---------------------------- */

.togl_wrap{
    display: flex;
    width: 40px;
    height: 22px;
    margin-bottom: 5px;
    margin-right: 14px;
}

.toggle-switch input[type=checkbox]{
    display: none;
}

.toggle-track{
    display: inline-block;
    position: relative;
    width: 40px;
    height: 22px;
    border-radius:60px;
    background: #ffffff;
    border: 1px solid var(--line_deep-color);
}
.toggle-track:before{
    content:'';
    display: block;
    position: absolute;
    top: -3px;
    left: 0;
    width: 16px;
    height: 16px;
    margin: 5px;
    background: var(--line_deep-color);
    border-radius:100%;
    transition:left 0.3s;
}


.toggle-switch input[type=checkbox]:checked + label .toggle-track{
    background: #ffffff;
    border: 1px solid var(--maingr-color);
}
.toggle-switch input[type=checkbox]:checked + label .toggle-track:before{
    left: 13px;
    background-color: var(--maingr-color);
}

/*---------------- 팝업---------------------------- */



.bg_black{/*팝업띄울 때 배경 뿌옇고 까맣게*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.pop_pic{
    width: 790px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.pic_l{
    width: 49%;
    height: 249px;
    padding-top: 10px;
    flex-direction: column;
    border-radius: 14px;
    background-color: var(--bg-color);
}

.pop_img_in{
    width: 100%;
    height: 160px;
    border-radius: 14px;
    border: 1px solid var(--line-color);
    background-size: cover;
    /*background-image: url(../img/map_sample.png);*/
}


.pop_btn_wrap{
    gap: 14px;
    margin-top: 8px;
    align-items: center;
}

.pop_btn1{
    width: auto;
    gap: 8px;
}

.pop_add{
    width: 100%;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.pic_l span{
    font-size: 14px;
    margin-top: 6px;
    text-align: center;
    color: var(--font2-color);
}

.pop_name_wrap{
    padding: 14px;
    border-radius: 14px;
    background-color: var(--bg-color);
}



.pic_l div:nth-child(1){
    margin-left: calc(100% - 50px);
}

.pic_l div:nth-child(3){
    margin-left: calc(49% - 50px);
    margin-top: 27px;
}



.pic_r{
    width: 49%;
    border-radius: 14px;
    border: 1px solid var(--line_deep-color);
}


.w355{width: 355px;}
.w550{width: 550px;}
.w740{width: 740px;}


.w1166{width: 1166px;}

.pop_bg{
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}

.pop_top{
    width: 100%;
    height: 40px;
    padding: 0 14px;
    position: relative;
    align-items: center;
    border-radius: 14px 14px 0 0;
    background-color: var(--maingr-color);
}

.pop_top span{
    color: #ffffff;
    font-size: 17px;
    font-family: 'NanumGothicB';
    line-height: 41px;
}

.pop_x{
    width: 15px;
    height: 15px;
    cursor: pointer;
    background-image: url(../img/ico_x.png);
}

.pop_con{
    width: 100%;
    padding: 14px;
    flex-direction: column;
    gap: 14px;
}

.pop_con2 label{
    margin-right: 14px;
}


.pop_tabl{
    width: 100%;
    padding: 14px;
    line-height: 26px;
}


.pop_tabl h2{
    margin-bottom: 4px;
}

.pop_tabl select{
    margin: 10px 0;
}

.pop_tabl table, .pop_tabl th,.pop_tabl td,
.bor_tabl table, .bor_tabl th,.bor_tabl td{
    border: 1px solid var(--line_deep-color);
    height: 50px;
    padding: 0 14px;
    text-align: left;
}


.tap_tabl td, .tap_tabl th{
    height: 30px;
}

.tap_tabl tr:first-child{
    height: 40px;
    border-bottom: 1px solid var(--line-color);
}


.pop_tabl th, .tap_tabl th, .bor_tabl th{
    background-color: var(--bg-color);
}


.bor_tabl{
    width: 100%;
    line-height: 26px;
}


.bor_con{
    min-height: 300px;
    padding: 24px 0;
}



.pop_con_in{
    width: 100%;
    text-align: center;
    min-height: 50px;
    padding: 14px;
    line-height: 26px;
    border-radius: 14px;
}

.noti_title{
    width: 100%;
    height: 40px;
    font-size: 17px;
    padding-left: 14px;
    line-height: 40px;
    background-color: var(--bg-color);
    border-radius: 8px;
}

.noti_con{
    min-height: 200px;
    padding: 20px;
    background-color: var(--bg-color);
    border-radius: 8px;
    line-height: 26px;
    word-break: keep-all;
}

.noti_file{
    height: 36px;
    padding: 6px 0;
    line-height: 24px;
    overflow: auto;
    cursor: pointer;
    background-color: var(--bg-color);
}

.noti_file span{
    font-size: 14px;
}

.noti_file span:hover{
    color: var(--maingr-color);
}

.noti_file_ico{
    width: 12px;
    height: 13px;
    margin: 5px 14px 0 22px;
    background-position: -101px -44px;
}

.noti_file_ico2{
    width: 12px;
    height: 13px;
    background-position: -101px -44px;
}

.filebox .inp_file{
    display: inline-block;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line_deep-color);
    width: 100%;
    color: var(--line_deep-color);
}

.filebox label {
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    background-color: var(--bg-color);
    border: 1px solid var(--line_deep-color);
    cursor: pointer;
    margin-right: 14px;
}


.filebox2 .inp_file2{
    display: inline-block;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line_deep-color);
    width: 100%;
    color: var(--line_deep-color);
}

.filebox2 label {
    width: 200px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    background-color: var(--bg-color);
    border: 1px solid var(--line_deep-color);
    cursor: pointer;
    margin-right: 14px;
}



/* 에러페이지 */

.eror_o{
    width: 700px;
    height: 700px;
    position: relative;
    top: 50%;
    left: 50%;
    border-radius: 500px;
    transform: translate(-50%, -50%);
    background-color: #F4F5FA;
}


.eror_bg{
    width: 660px;
    height: 400px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.2);
}



.eror_img1{
    position: absolute;
    top: 112px;
    left: 390px;
    width: 233px;
    height: 250px;
    background-image: url(../img/progr.png);
}

.eror_img2{
    position: absolute;
    top: 40px;
    left: 232px;
    width: 184px;
    height: 184px;
    background-image: url(../img/session.png);
}

.eror_img3{
    position: absolute;
    top: 40px;
    left: 232px;
    width: 224px;
    height: 224px;
    background-image: url(../img/500.png);
}

.eror_img4{
    position: absolute;
    top: 40px;
    left: 232px;
    width: 178px;
    height: 178px;
    background-image: url(../img/url.png);
}

.eror_top{
    width: 100%;
    height: 6px;
    background-color: var(--main-color);
    border-radius: 20px 20px 0 0;
}

.eror_txt1{
    font-size: 50px;
    color: var(--main-color);
    margin-top: 10%;
}

.eror_txt1_1{
    font-size: 50px;
    color: var(--main-color);
}

.eror_txt2{
    font-size: 17px;
    color: var(--main-color);
}

.eror_txt3{
    line-height: 30px;
    text-align: center;
    margin-top: 10px;
}

.eror_txt4{
    font-size: 70px;
    color: var(--main-color);
}


.eror_wrap{
    position: absolute;
    flex-direction: column;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eror_btn{
    width: 208px;
    height: 44px;
    font-size: 18px;
    text-align: center;
    line-height: 46px;
    color: #ffffff;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--main-color);
}


/*---------------- 버튼---------------------------- */

.btn_del_s_54{
    width: 54px;
    height: 24px;
    font-size: 14px;
    background-color: #ffffff;
    border-radius: 20px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--line_deep-color);
}

.btn_del_s{
    width: 74px;
    height: 24px;
    font-size: 14px;
    background-color: #ffffff;
    border-radius: 20px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--line_deep-color);
}

.btn_del_s_all{
    width: 74px;
    height: 24px;
    font-size: 14px;
    border-radius: 20px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

.btn_sm_w{
    width: 50px;
    height: 40px;
    border-radius: 10px;
    background-color: #ffffff;
    cursor: pointer;
    border: 1px solid var(--line_deep-color)
}


.eror_btn:hover{
    background-color: #2345b3;
}


.btn_sm_bg{
    width: 22px;
    height: 22px;
    margin-left: 13px;
    margin-top: 9px;
    cursor: pointer;
    background-size: cover;
}

.btn_excel{background-image: url(../img/excel.png);}
.btn_re{background-image: url(../img/refresh.png);}
.btn_loc{
    width: 32px;
    height: 32px;
    background-position: -534px -242px;
}

.btn_down_bg{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line_deep-color);
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
}

.down_ico{
    width: 19px;
    height: 19px;
    position: absolute;
    left: 22px;
    top: 9px;
    background-position: -24px -326px;
}

.x_ico{
    width: 19px;
    height: 19px;
    margin: 10px 10px;
    background-position: -43px -326px;
}

.long_w_btn{
    padding: 0 20px;
    height: 40px;
    font-size: 15px;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid var(--line_deep-color);
}

.list_btn{
    line-height: 38px;
    height: 40px;
    font-size: 17px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid var(--line_deep-color);
}

.long_w_btn_grn{
    color: #ffffff;
    padding: 0 20px;
    height: 40px;
    font-size: 15px;
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    background-color: var(--maingr-color);
}



.long_w_btn_s{
    padding: 5px 20px;
    font-size: 12px;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background-color: #ffffff;
    background-color: var(--bg-color);
    border: 1px solid var(--line_deep-color);
}

.btn_w100{ /*녹색 긴 버튼*/
    width: 100%;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--maingr-color);
}

.excel_ico{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: -6px;
    background-position: -20px -60px;
}

.list_ico{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: -44px -60px;
}

.btn_w{
    width: 100px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    background-color: #ffffff;
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--line_deep-color);
}

.btn_grey{
    width: 100px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    cursor: pointer;
    background-color: var(--bg-color);
    border: 1px solid var(--line_deep-color);
}


.btn_deep_gy{
    width: 100px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    cursor: pointer;
    background-color: #D5D5D5;
    border: 1px solid var(--line_deep-color);
}

.btn_deep_gy:hover{background-color: #DEDDDD;}


.btn_grey:hover{
    background-color: #ffffff;
}

.btn_w:hover, .long_w_btn:hover,
.btn_sm_w:hover, .btn_del_s:hover,
.btn_down_bg:hover, .list_btn:hover{
    border: 1px solid var(--maingr-color);
}


.btn_green{
    font-family: 'NanumGothicB';
    color: #ffffff;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
    background-color: var(--maingr-color);
}

.btn_green:hover, .tap_on:hover, .col_grn:hover{
    background-color: #26C35F;
}

.search_ico{
    width: 23px;
    height: 23px;
    background-position: 0 -324px;
}


.tap_btn{
    width: 76px;
    height: 28px;
    font-size: 14px;
    color: #ffffff;
    line-height: 29px;
    text-align: center;
    cursor: pointer;
    border-radius: 14px;
}



.tap_btn_s{
    width: 34px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--line_deep-color);
    cursor: pointer;
}

.dron{background-position: -132px -258px;}
.posi{background-position: -167px -258px;}

.dron:hover{background-position: -202px -258px;;}
.posi:hover{background-position: -237px -258px;;}



/* 컬러칩 */
.col_grey{background-color: #849EA9;}

.col_grn2{background-color: #63B91C;}
.col_blu2{background-color: #1B68DC;}
.col_pur{background-color: #5B34E8;}
.col_re{background-color: #C42D2D;}
.col_oran{background-color: #F9AA00;}


.col_grn{background-color: var(--maingr-color);}
.col_blu{background-color: var(--main-color);}

.col_txt_blu{color: var(--main-color);}
.txt_fff{color: #ffffff}


/* 푸터 */

.foot{
    width: 100%;
    height: 136px;
    padding: 24px;
    align-items: center;
    background-color: #3B3B46;
    position: relative;
    transform: translateY(-100%);
}

.logo_black{
    width: 180px;
    height: 27px;
    margin-bottom: 10px;
    background-size: 180px;
    background-image: url(../img/logo_g.png);
}

.foot_l li{
    color: #ffffff;
    font-family: 'NanumGothicL';
    font-size: 13px;
    line-height: 21px;
}

.foot_select{
    font-family: 'NanumGothicL';
    font-size: 15px;
    color: #F2F3F8;
    width: 230px;
    height: 40px;
    appearance: none;
    background: url(../img/sel_arr_w.png) no-repeat right 10px center;
    background-size: 12px 7px;
}

.foot_select option{
    background-color: #3B3B46;
}

/* 게시판 넘버링 */

.num_wrap{
    width: 100%;
    margin-top: 14px;
    padding-bottom: 14px;
}

.num_arr_l{
    width: 10px;
    height: 12px;
    display: inline-block;
    background: url(../img/num_arr.png) no-repeat;
}

.num_arr_l:hover{
    background: url(../img/num_arr2.png) no-repeat;
}

.rota{
    transform: rotate(180deg);
}

.num_wrap li{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    line-height: 30px;
    text-align: center;
}


.num_off a:hover{
    line-height: 30px;
    text-align: center;
    color: var(--maingr-color);
    font-family: 'NanumGothicB';
}

.num_on{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    line-height: 30px;
    text-align: center;
    font-family: 'NanumGothicB';
    background-color: var(--maingr-color);
}

.num_on a{
    color: #ffffff;
    display: block;
}





/* 셀렉트 디자인 */

.sel100{
    width: 100%;
    display: inline-block;
    background-color: #ffffff;
}


.sel130{
    width: 130px;
    display: inline-block;
    background-color: #ffffff;
}

.sel150{
    width: 150px;
    display: inline-block;
    background-color: #ffffff;
}

.sel180{
    width: 180px;
    display: inline-block;
    background-color: #ffffff;
}

.sel260{
    width: 260px;
    display: inline-block;
    background-color: #ffffff;
}

.sel230{
    width: 230px;
    display: inline-block;
    color: var();
    background-color: #ffffff;
}

.sel320{
    width: 320px;
    display: inline-block;
    color: var();
    background-color: #ffffff;
}


/* 서치 박스 */
.serh_w{
    background-color: #ffffff !important;
    width: 230px;
}