@charset "UTF-8";
/****************************************/
/*  Name : 한국도로공사 디지털 시범지사 플랫폼
/*  PART : 웹 스타일
/*  Author : 박송이
/*  MODIFY : 박송이
/*  MODIFY : 박지영 2025년 2월13일 수정
/*  Summary: /* 파일 내용 */
/*  00) common
/*  01) color
/*  02) icon
/*  03) button
/*  04) header
/*  05) footer
/*  06) container
/*  07) form
/*  08) board
/*  09) popup
/*  10) style
/****************************************/

/* ********************************************************************************* *
* 00) common
* ********************************************************************************* */
body, html { min-width: 1900px; font-family: "Montserrat", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", arial, sans-serif; font-size: 16px; letter-spacing: -0.5px; color: #333; background-color: #eff1f6; }

caption { display: none; }
a:hover, a:focus { text-decoration: none; }

.inner { width: 100%; padding: 0 30px; }

.col-1-5 { flex: 0 0 auto; width: 10%; }
.col-2-5 { flex: 0 0 auto; width: 14%; }
.col-9-5 { flex: 0 0 auto; width: 86%; }
.col-10-5 { flex: 0 0 auto; width: 90%; }
.col-auto-imp { -ms-flex: 0 0 auto !important; flex: 0 0 auto !important; }
.height-auto { height: auto !important; }
.max-height-200 { max-height: 201px !important; }
.height-200 { height: 201px !important; }
.small { font-size: 14px !important; }
.large { font-size: 16px !important; }
.text { padding: 15px 20px; line-height: 1.8; text-align: left; font-size: 15px; }


/* ********************************************************************************* *
* 01) color
* ********************************************************************************* */
.color_black { color: #000; }
.color_lightblack { color: #333; }
.color_darkgray { color: #4d4d4d; }
.color_gray { color: #666; }
.color_lightgray { color: #999; }
.color_white { color: #fff; }

.point_color1 { color: #3185db !important; }
.point_color2 { color: #e93b3c !important; }

.color_car_good{color:#00ca00!important;}
.color_car_normal{color:#feeb3a!important;}
.color_car_danger { color: #f24646 !important; }



.color_normal { color: #3185db !important; }
.color_attention { color: #ff8e3b !important; }
.color_warning { color: #fb5d07 !important; }
.color_danger { color: #f24646 !important; }

.bg_normal { background-color: #5c98fb; } /* 정상 */
.bg_attention { background-color: #eeac38; } /* 관심 */
.bg_warning { background-color: #fb5d07; } /* 주의 */
.bg_danger { background-color: #f24646; } /* 경계 */

.bg_op_normal { background-color: #eef6ff !important; }
.bg_op_attention { background-color: #fffae3 !important; }
.bg_op_warning { background-color: #fde7d4 !important; }
.bg_op_danger { background-color: #fdd4d4 !important; }
.bg_white { background-color: #fff !important; }
.bg_gray { background-color: #fafafa !important; }
.bg_hightlight { background-color: #f3f5fa !important; }

.grade-00 .grade-color { color: #26945c !important; }
.grade-01 .grade-color { color: #f5af35 !important; }
.grade-02 .grade-color { color: #ff517a !important; }
.grade-03 .grade-color { color: #d72727 !important; }
.grade-04 .grade-color { color: #a0a0a0 !important; }

/* ********************************************************************************* *
* 02) icon
* ********************************************************************************* */
.icon { display: inline-block; vertical-align: middle; margin-top: -4px; font-size: 0; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; transition: background-image .15s, color .15s; }

.icon_search { width: 26px; height: 26px; background-image: url(/dtjp/lib/images/common/icon_search.png); }
.icon_map_mark { width: 35px; height: 46px; background-image: url(/dtjp/lib/images/common/icon_map_mark.png); }
.icon_mark_number { width: 35px; height: 46px; background-image: url(/dtjp/lib/images/common/icon_mark_white.png); }
.icon_mark_map { width: 35px; height: 35px; background-image: url(/dtjp/lib/images/common/icon_mark_map.png); }
.icon_monitor { width: 30px; height: 24px; background-image: url(/dtjp/lib/images/page/icon_monitor.png); }
.icon_increase_red { width: 14px; height: 12px; background-image: url(/dtjp/lib/images/common/icon_increase_red.png); }

/* 유틸 아이콘 */
.icon_admin { width: 22px; height: 22px; background-image: url(/dtjp/lib/images/common/btn_admin_off.png); } /* ADMIN */
.icon_user { width: 22px; height: 22px; background-image: url(/dtjp/lib/images/common/btn_user_off.png); } /* 내정보 */

/* 라벨 */
.label { display: inline-block; vertical-align: middle; margin-top: -4px; font-size: 0; text-indent: -9999px; transition: background-color .15s; }
.label_circle { width: 12px; height: 12px; margin-right: 5px; border-radius: 50%; }
.label_number { width: 24px; height: 24px; margin-right: 5px; line-height: 24px; font-size: 14px; color: #fff; text-align: center; text-indent: 0; border-radius: 3px; background-color: #555; }
.label_status { display: inline-block; vertical-align: middle; padding: 5px 10px; font-size: 16px; color: #fff; background-color: #eee; border-radius: 3px; }
.label_status.bg_normal { background-color: #5c98fb; }
.label_status.bg_attention { background-color: #eeac38; }
.label_status.bg_warning { background-color: #fb5d07; }
.label_status.bg_danger { background-color: #f24646; }


/* ********************************************************************************* *
* 03) button
* ********************************************************************************* */
.btn_area .btn { margin-left: 5px; border-radius: 3px; }
.btn_area .btn:first-child { margin-left: 0; }

.btn { padding: 8px 20px; font-size: 15px; color: #333; font-weight: 500; background-repeat: no-repeat; }
.btn-sm { padding: 6px 10px; font-size: 14px; line-height: 1; }
.btn-lg { padding: 12px 35px; font-size: 16px; }
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover { color: #fff; background-color: #3185db; border-color: #3185db; }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { color: #fff; background-color: #3185db; border-color: #3185db; }
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover { color: #4e4e4e; background-color: #e6e6e6; border-color: #e6e6e6; }
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { color: #4e4e4e; background-color: #e6e6e6; border-color: #e6e6e6; }
.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-success:hover { color: #333; background-color: #edeffc; border-color: #c5c9f0; }
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle { color: #333; background-color: #edeffc; border-color: #c5c9f0; }
.btn-warning,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:hover { color: #333; background-color: #ffeded; border-color: #ffc3c3; }
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show>.btn-warning.dropdown-toggle { color: #333; background-color: #ffeded; border-color: #ffc3c3; }
.btn-info,
.btn-info:focus,
.btn-info:active,
.btn-info:hover { color: #333; background-color: #edf6ff; border-color: #c3e1ff; }
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle { color: #333; background-color: #edf6ff; border-color: #c3e1ff; }
.btn-dark,
.btn-dark:focus,
.btn-dark:active,
.btn-dark:hover { color: #fff; background-color: #2e3574; border-color: #2e3574; }
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show>.btn-dark.dropdown-toggle { color: #fff; background-color: #2e3574; border-color: #2e3574; }
.btn-light { color: #333; background-color: #ffffff; border-color: #ddd; }
.btn-light:focus,
.btn-light:active,
.btn-light:hover { color: #3185db; background-color: #ffffff; border-color: #3185db; }
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle { color: #3185db; background-color: #ffffff; border-color: #3185db; }
.btn-red { color: #fff; background-color: #e93c3c; border-color: #e93c3c; }
.btn-red:focus,
.btn-red:active,
.btn-red:hover { color: #fff; background-color: #e93c3c; border-color: #e93c3c; }
.btn-red:not(:disabled):not(.disabled).active, .btn-red:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle { color: #fff; background-color: #e93c3c; border-color: #e93c3c; }

/* 텍스트 버튼 */
.btn_add_sm { padding-left: 30px; background-image: url(/dtjp/lib/images/common/icon_add_sm.png); background-position: left 10px center; } /* 추가 버튼 s */
.btn_remove_sm { padding-left: 30px; background-image: url(/dtjp/lib/images/common/icon_remove_sm.png); background-position: left 10px center; } /* 삭제 버튼 s */
.btn_send_sm { padding-left: 30px; background-image: url(/dtjp/lib/images/common/icon_send_sm.png); background-position: left 10px center; } /* 전송 버튼 s */
.btn_save_sm { padding-left: 30px; background-image: url(/dtjp/lib/images/common/icon_save_sm.png); background-position: left 10px center; } /* 저장 버튼 s */
.btn_search { padding-left: 48px; background-image: url(/dtjp/lib/images/common/icon_search_sm.png); background-position: left 20px center; } /* 검색 버튼 s */

.btn_write { padding-left: 48px; background-image: url(/dtjp/lib/images/common/icon_write.png); background-position: left 20px center; } /* 작성 버튼 */
.btn_excel { padding-left: 48px; background-image: url(/dtjp/lib/images/common/btn_excel.png); background-position: left 20px center; } /* 엑셀 버튼 */
.btn_add { padding-left: 48px; background-image: url(/dtjp/lib/images/common/icon_add.png); background-position: left 20px center; } /* 추가 버튼 */
.btn_remove { padding-left: 25px; background-image: url(/dtjp/lib/images/mobile/icon_remove.png); background-position: left 8px center; background-size: 13px; } /* 삭제 버튼 */
.btn_print { padding-left: 48px; background-image: url(/dtjp/lib/images/common/icon_print.png); background-position: left 20px center; } /* 인쇄 버튼 */
.btn_save { padding-left: 48px; background-image: url(/dtjp/lib/images/common/icon_save.png); background-position: left 20px center; } /* 저장 버튼 */
.btn_range_plus { padding: 8px 10px 8px 30px; background-image: url(/dtjp/lib/images/common/icon_plus.png); background-position: left 10px center; } /* + 버튼 */
.btn_range_minus { padding: 8px 10px 8px 30px; background-image: url(/dtjp/lib/images/common/icon_minus.png); background-position: left 10px center; } /* - 버튼 */

.btn_search_lg { width: 95px; height: 100%; font-size: 16px; } /* 검색 버튼 */
.btn_search_lg .icon_search { display: block; margin: 0 auto 5px; }
.btn_search_detail { padding: 0; padding-right: 20px; border-bottom: 1px solid #222; border-radius: 0; background-image: url(/dtjp/lib/images/common/icon_select_arr.png); background-position: right center; }

.btn_warn{padding: 0px 18px; border:1px solid #ff4d4f; background-color:#fff; background-image: none; color:#ff4d4f; border-radius:4px; font-size: 14px;}
.btn_rejected{padding: 0px 18px; border:1px solid #ff4d4f; background-color:#ff4d4f; background-image: none; color:#fff; border-radius:4px; font-size: 14px;}/*반려 */
.btn_approval{padding: 0px 8px; border:1px solid #007bff; background-color:#007bff; background-image: none; color:#fff; border-radius:4px; font-size: 14px;}/*승인완료 */
.btn_request{padding: 0px 8px; border:1px solid #007bff; background-color:#fff; background-image: none; color:#007bff; border-radius:4px; font-size: 14px;}/*승인요청 */
.btn_writing{padding: 0px 8px; border:1px solid #ecf2fe; background-color:#ecf2fe; background-image: none; color:#007bff; border-radius:4px; font-size: 14px;}/*작성중 */

.btn_name { padding: 5px 20px 5px 8px; line-height: 1.3; font-size: 14px; letter-spacing: -1.5px; border-color: #dfe2e9; border-radius: 50px; background-color: #dfe2e9; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-position: right 7px center; background-repeat: no-repeat; }
.btn_notext { display: inline-block !important; min-height: 28px; padding: 0 18px; font-size: 0; }
/* 아이콘 버튼 */
.btn_icon { width: 30px; height: 30px; padding: 0; font-size: 0; text-indent: -9999px; border: 0; border-radius: 0; background-position: center center; transition: background-image .15s; outline: none !important; }
.btn_icon_round { width: 49px; height: 49px; margin-top: 10px; padding: 0; font-size: 0; text-indent: -9999px; border: 0; border-radius: 50% !important; background-position: center center; background-color: #f3f5fa; transition: background-image .15s; outline: none !important; }
.btn_icon:focus,
.btn_icon_round { outline: none !important; }

.btn_icon_map { background-image: url(/dtjp/lib/images/common/icon_map_off.png); } /* 지도보기 */
.btn_icon_map:hover { background-image: url(/dtjp/lib/images/common/icon_map_on.png); }
.btn_icon_video { background-image: url(/dtjp/lib/images/common/icon_play_off.png); } /* 영상보기 */
.btn_icon_video:hover { background-image: url(/dtjp/lib/images/common/icon_play_on.png); }
.btn_icon_favorites { background-image: url(/dtjp/lib/images/common/icon_star_off.png); } /* 즐겨찾기 */
.btn_icon_favorites.on,
.btn_icon_favorites:hover { background-image: url(/dtjp/lib/images/common/icon_star_on.png); }
.btn_icon_photo { background-image: url(/dtjp/lib/images/common/icon_photo_off.png); } /* 사진보기 */
.btn_icon_photo:hover { background-image: url(/dtjp/lib/images/common/icon_photo_on.png); }
.btn_icon_delete { background-image: url(/dtjp/lib/images/common/icon_del_off.png); } /* 삭제 */
.btn_icon_delete:hover { background-image: url(/dtjp/lib/images/common/icon_del_on.png); }
.btn_icon_download { background-image: url(/dtjp/lib/images/common/icon_download.png); } /* 다운로드 */
.btn_icon_print { background-image: url(/dtjp/lib/images/common/icon_print.png); } /* 프린트 */
.btn_icon_link { background-image: url(/dtjp/lib/images/common/icon_shortcut.png); } /* 바로가기 */

/*모달 큰 추가버튼  */
.btn_add_bg{width:100%;background-color:#fff;border:1px dashed #535353;margin-top:10px; text-align: center;}
/* 탑버튼 */
.top_btn{cursor:pointer;position:fixed;right:5%; bottom:50px;display:inline-block;width:50px;height:50px;border:1px solid #ddd;background-color:#fff;padding:13px 15px;border-radius:50%;z-index:1000;font-size:17px;transition:0.7s ease;}
/* 플로팅 저장버튼 */
.float_save_btn{cursor:pointer;position:fixed;right:9%; bottom:50px;display:inline-block;height:50px;color:#fff;border:1px solid #3185db;background-color:#3185db;padding:13px 15px;z-index:1000;font-size:17px;transition:0.7s ease;}
/* .validation check */
.invalid_focus{border:2px solid #f44336;box-shadow:0px 0px 5px rgba(189,0,0,1) !important}
.tooltip-text{visibility:hidden;width:160px;background-color:#fff;color:#f44336;text-align:center;padding:5px;border-radius:5px;position:absolute;z-index:10;font-size:0.8em;box-shadow:0px 0px 5px rgba(189,0,0,1);}

/* ********************************************************************************* *
* 04) header
* ********************************************************************************* */
header { position: relative; height: 70px; background: #3185db; z-index: 9; }
header .inner { height: 70px; padding-bottom: 10px; background: #3185db; }
header .logo { padding-right: 78px; padding-top: 10px; }

/* gnb */
header .gnb { word-break: keep-all; padding-left: 0; }
header .gnb .gnb_depth1 > li { position: relative; }
header .gnb .gnb_depth1 > li > .nav-link { display: flex; align-items: center; height: 60px; margin-right: 5px; padding: 8px 20px 0; line-height: 1.3; color: #b3d9ff; font-weight: 500; font-size: 17px; border-radius: 0 0 5px 5px; }
header .gnb .gnb_depth1 > li > .nav-link .icon_menu { flex-shrink: 0; margin-right: 10px; margin-top: 0; }
header .gnb .gnb_depth1 > li:last-child > .nav-link { margin-right: 0; }
header .gnb .gnb_depth1 > li.on > .nav-link,
header .gnb .gnb_depth1 > li:focus > .nav-link,
header .gnb .gnb_depth1 > li:hover > .nav-link { color: #fff; background-color: #2878ca; }

header .gnb .gnb_depth2 { display: none; position: absolute; top: 100%; left: 0; width: calc(100% + 20px); padding-top: 10px; }
header .gnb .gnb_depth1 > li:last-child .gnb_depth2 { width: 100%; }
header .gnb .gnb_depth2 > ul { padding: 20px 0; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .gnb .gnb_depth2 > ul > li { position: relative; }
header .gnb .gnb_depth2 > ul > li > .nav-link { position: relative; padding: 10px 20px; padding-right: 30px; font-size: 16px; color: #666; }
header .gnb .gnb_depth2 > ul > li > .in_depth:after { content: ''; position: absolute; top: 15px; right: 20px; width: 8px; height: 12px; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-repeat: no-repeat; background-position: center center; }
header .gnb .gnb_depth2 > ul > li:hover > .nav-link { color: #3185db; font-weight: 500; }
header .gnb .gnb_depth2 > ul > li:hover > .in_depth:after { background-image: url(/images/common/arr_gnb_on.png); }

header .gnb .gnb_depth3 { display: none; position: absolute; top: -20px; left: 100%; width: calc(100% + 10px); padding: 20px 0; word-break: keep-all; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .gnb .gnb_depth3 > li { position: relative; }
header .gnb .gnb_depth3 > li > .nav-link { padding: 10px 20px; font-size: 16px; color: #666; }
header .gnb .gnb_depth3 > li:hover > .nav-link { color: #3185db; font-weight: 500; }

header .gnb .gnb_depth1 > li:hover .gnb_depth2 { display: block; }
header .gnb .gnb_depth2 ul > li:hover .gnb_depth3 { display: block; }
/*관리자*/
header .gnb { word-break: keep-all; }
header .gnb .gnbAdmin_depth1 > li { position: relative; }
header .gnb .gnbAdmin_depth1 > li > .nav-link { display: flex; align-items: center; height: 60px; margin-right: 10px; padding: 8px 15px 0; line-height: 1.3; color: #b3d9ff; font-weight: 500; font-size: 17px; border-radius: 0 0 5px 5px; }
header .gnb .gnbAdmin_depth1 > li > .nav-link .icon_menu { flex-shrink: 0; margin-right: 10px; margin-top: 0; }
header .gnb .gnbAdmin_depth1 > li:last-child > .nav-link { margin-right: 0; }
header .gnb .gnbAdmin_depth1 > li.on > .nav-link,
header .gnb .gnbAdmin_depth1 > li:focus > .nav-link,
header .gnb .gnbAdmin_depth1 > li:hover > .nav-link { color: #fff; background-color: #2878ca; }

header .gnb .gnbAdmin_depth2 { display: none; position: absolute; top: 100%; left: 0; width: calc(100% - 10px); padding-top: 10px; }
/*header .gnb .gnbAdmin_depth1 > li:last-child .gnb_depth2 { width: 100%; }*/
header .gnb .gnbAdmin_depth2 > ul { padding: 20px 0; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .gnb .gnbAdmin_depth2 > ul > li { position: relative; }
header .gnb .gnbAdmin_depth2 > ul > li > .nav-link { position: relative; padding: 10px 20px; padding-right: 30px; font-size: 16px; color: #666; }
header .gnb .gnbAdmin_depth2 > ul > li > .in_depth:after { content: ''; position: absolute; top: 15px; right: 20px; width: 8px; height: 12px; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-repeat: no-repeat; background-position: center center; }
header .gnb .gnbAdmin_depth2 > ul > li:hover > .nav-link { color: #3185db; font-weight: 500; }
header .gnb .gnbAdmin_depth2 > ul > li:hover > .in_depth:after { background-image: url(/dtjp/lib/images/common/arr_gnb_on.png); }

header .gnb .gnbAdmin_depth3 { display: none; position: absolute; top: -20px; left: 100%; width: 100%; padding: 20px 0; word-break: keep-all; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .gnb .gnbAdmin_depth3 > li { position: relative; }
header .gnb .gnbAdmin_depth3 > li > .nav-link { padding: 10px 20px; font-size: 16px; color: #666; }
header .gnb .gnbAdmin_depth3 > li:hover > .nav-link { color: #3185db; font-weight: 500; }

header .gnb .gnbAdmin_depth1 > li:hover .gnb_depth2 { display: block; }
header .gnb .gnbAdmin_depth2 ul > li:hover .gnb_depth3 { display: block; }

/* utill */
header .utill { padding-top: 8px; }
header .utill .utill_depth1 > li { position: relative; }
header .utill .utill_depth1 > li:after { content: ''; position: absolute; top: 2px; right: 0; width: 1px; height: 18px; background-color: #589de4; }
header .utill .utill_depth1 > li:last-child:after { display: none; }
header .utill .utill_depth1 > li > .nav-link { padding: 0 30px; color: #b2d5f8; font-weight: 500; font-size: 16px; }
header .utill .utill_depth1 > li:first-child > .nav-link { padding-left: 0; }
header .utill .utill_depth1 > li:last-child > .nav-link { padding-right: 0; }
header .utill .utill_depth1 > li > .nav-link .icon { margin-right: 10px; }
header .utill .utill_depth1 > li:last-child .nav-link { padding-right: 0; }
header .utill .utill_depth1 > li.on .nav-link,
header .utill .utill_depth1 > li:hover > .nav-link,
header .utill .utill_depth1 > li:hover > .nav-link{ color: #fff; }

header .utill .utill_depth2 { display: none; position: absolute; top: 100%; left: -15px; width: 100%; min-width: 135px; padding-top: 15px; }
header .utill .utill_depth2 > ul { padding: 20px 0; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .utill .utill_depth2 > ul > li { position: relative; }
header .utill .utill_depth2 > ul > li > .nav-link { position: relative; padding: 10px 20px; padding-right: 30px; font-size: 16px; color: #666; }
header .utill .utill_depth2 > ul > li:hover > .nav-link { color: #3185db; font-weight: 500; }
header .utill .utill_depth2 > ul > li > .in_depth:after { content: ''; position: absolute; top: 15px; right: 15px; width: 8px; height: 12px; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-repeat: no-repeat; background-position: center center; }
header .utill .utill_depth2 > ul > li:hover > .in_depth:after { background-image: url(/dtjp/lib/images/common/arr_gnb_on.png); }

header .utill .utill_depth3 { display: none; position: absolute; top: -20px; left: 100%; width: 100%; padding: 20px 0; word-break: keep-all; background: #fff; border-radius: 7px; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .utill .utill_depth3 > li { position: relative; }
header .utill .utill_depth3 > li > .nav-link { padding: 10px 20px; font-size: 15px; color: #666; }
header .utill .utill_depth3 > li:hover > .nav-link { color: #3185db; font-weight: 500; }

header .utill .utill_depth1 > li:hover .utill_depth2 { display: block; }
header .utill .utill_depth2 ul > li:hover .utill_depth3 { display: block; }

header .utill .utill_pop { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 100%; width: 300px; padding: 30px; background: #fff; border-radius: 10px; border: 1px solid #ddd; box-shadow: 5px 5px 15px 0 rgba(0, 23, 47, 0.2); }
header .utill .utill_pop .user_info { padding: 0 0 20px; text-align: center; }
header .utill .utill_pop .user_name { display: block; font-size: 24px; font-weight: 500; color: #333; }
header .utill .utill_pop .user_id { display: block; margin-top: 5px; font-size: 18px; color: #555; }
header .utill .utill_pop .btn { width: 110px; padding: 12px 20px; }
header .utill .utill_pop li:first-child .btn { margin-right: 20px; }
header .utill .utill_depth1 > li.active .utill_pop { display: block; }

header .utill .utill_depth1 > li:hover .utill_depth2 { display: block; }
header .utill li.on .nav-link .icon_admin,
header .utill li:focus .nav-link .icon_admin,
header .utill li:hover .nav-link .icon_admin { background-image: url(/dtjp/lib/images/common/btn_admin_on.png); } /* ADMIN */
header .utill li.on .nav-link .icon_user,
header .utill li:focus .nav-link .icon_user,
header .utill li:hover .nav-link .icon_user { background-image: url(/dtjp/lib/images/common/btn_user_on.png); } /* 내정보 */

/* lnb */
.left_menu { width: 260px; background-color: #2a303c; overflow-y: auto; word-break: keep-all; }
.left_menu .nav-link { padding: 5px 0; color: #b4bcc6; font-size: 17px; line-height: 1.5; }
.left_menu .nav-link .icon_lnb { margin-right: 20px; }

.left_menu .left_depth1 > li { position: relative; padding: 15px 30px; }
.left_menu .left_depth1 > li > .nav-link { position: relative; padding: 10px 0 10px 55px; }
.left_menu .left_depth1 > li > .nav-link:focus,
.left_menu .left_depth1 > li > .nav-link:hover { color: #fff; }
.left_menu .left_depth1 > li.on { background-color: #21252f; }
.left_menu .left_depth1 > li.on:before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #2473c3; }
.left_menu .left_depth1 > li.on > .nav-link { color: #fff; font-weight: 600; }
.left_menu .left_depth1 > li > .nav-link .icon { position: absolute; top: 50%; left: 0; }

.left_menu .depth_in { position: relative; }
.left_menu .depth_in:after { content: ''; position: absolute; right: 0; top: 19px; width: 7px; height: 12px; background-image: url(/dtjp/lib/images/common/arr_left_gray.png); background-repeat: no-repeat; background-position: center center; }
.left_menu .left_depth1 > li.on .depth_in:after { transform: rotate(90deg); }

.left_menu .left_depth2 { display: none; padding-bottom: 10px; }
.left_menu .left_depth1 > li.on .left_depth2 { display: block; }
.left_menu .left_depth2 > li { padding-left: 30px; }
.left_menu .left_depth2 > li > .nav-link { position: relative; padding: 10px 20px; }
.left_menu .left_depth2 > li > .nav-link:before { content: ''; position: absolute; left: -6px; top: 20px; width: 6px; height: 6px; border: 1px solid #515c73; border-radius: 50%; background-color: transparent; }

.left_menu .left_depth2 > li.on > .nav-link,
.left_menu .left_depth2 > li > .nav-link:focus,
.left_menu .left_depth2 > li > .nav-link:hover { color: #3185db; font-weight: 600; }
.left_menu .left_depth2 > li.on > .nav-link:before,
.left_menu .left_depth2 > li > .nav-link:focus:before,
.left_menu .left_depth2 > li > .nav-link:hover:before { border-color: #3185db; background-color: #3185db; }

/* 메뉴 아이콘 */
.icon_menu { width: 30px; height: 33px; }

.icon_menu01 { background-image: url(/dtjp/lib/images/menu/icon_menu01_off.png); } /* 스마트 점검관리 */
.icon_menu02 { background-image: url(/dtjp/lib/images/menu/icon_menu02_off.png); } /* 스마트 차량관리 */
.icon_menu03 { background-image: url(/dtjp/lib/images/menu/icon_menu03_off.png); } /* 스마트 유지보수 */
.icon_menu04 { background-image: url(/dtjp/lib/images/menu/icon_menu04_off.png); } /* 스마트 IoT 통합관리 */
.icon_menu05 { background-image: url(/dtjp/lib/images/menu/icon_menu05_off.png); } /* 디지털 영상관리 */
.icon_menu06 { background-image: url(/dtjp/lib/images/menu/icon_menu06_off.png); } /* 스마트 작업관리 */
.icon_menu07 { width: 32px; background-image: url(/dtjp/lib/images/menu/icon_menu07_off.png); } /* 스마트 상황판 */
.icon_menu08 { background-image: url(/dtjp/lib/images/menu/icon_menu08_off.png);}/* 운행순찰일지 */

li.on .nav-link .icon_menu01,
li:focus .nav-link .icon_menu01,
li:hover .nav-link .icon_menu01 { background-image: url(/dtjp/lib/images/menu/icon_menu01_on.png); } /* 스마트 점검관리 */
li.on .nav-link .icon_menu02,
li:focus .nav-link .icon_menu02,
li:hover .nav-link .icon_menu02 { background-image: url(/dtjp/lib/images/menu/icon_menu02_on.png); } /* 스마트 차량관리 */
li.on .nav-link .icon_menu03,
li:focus .nav-link .icon_menu03,
li:hover .nav-link .icon_menu03 { background-image: url(/dtjp/lib/images/menu/icon_menu03_on.png); } /* 스마트 유지보수 */
li.on .nav-link .icon_menu04,
li:focus .nav-link .icon_menu04,
li:hover .nav-link .icon_menu04 { background-image: url(/dtjp/lib/images/menu/icon_menu04_on.png); } /* 스마트 IoT 통합관리 */
li.on .nav-link .icon_menu05,
li:focus .nav-link .icon_menu05,
li:hover .nav-link .icon_menu05 { background-image: url(/dtjp/lib/images/menu/icon_menu05_on.png); } /* 디지털 영상관리 */
li.on .nav-link .icon_menu06,
li:focus .nav-link .icon_menu06,
li:hover .nav-link .icon_menu06 { background-image: url(/dtjp/lib/images/menu/icon_menu06_on.png); } /* 스마트 작업관리 */
li.on .nav-link .icon_menu07,
li:focus .nav-link .icon_menu07,
li:hover .nav-link .icon_menu07 { background-image: url(/dtjp/lib/images/menu/icon_menu07_on.png); } /* 스마트 상황판 */
li:focus .nav-link .icon_menu08,
li:hover .nav-link .icon_menu08 { background-image: url(/dtjp/lib/images/menu/icon_menu08_on.png); } /* 운행순찰일지 */

.icon_lnb { width: 40px; height: 37px; margin-top: -18px; }

/* 공통관리 */
.icon_lnb00_01 { background-image: url(/dtjp/lib/images/menu/icon_menu00_01_off.png); } /* 사용자관리 */
.icon_lnb00_02 { background-image: url(/dtjp/lib/images/menu/icon_menu00_02_off.png); } /* 권한관리 */
.icon_lnb00_03 { background-image: url(/dtjp/lib/images/menu/icon_menu00_03_off.png); } /* 그룹관리 */
.icon_lnb00_04 { background-image: url(/dtjp/lib/images/menu/icon_menu00_04_off.png); } /* 담당자관리 */

li.on .icon_lnb00_01,
li:focus .icon_lnb00_01,
li:hover .icon_lnb00_01 { background-image: url(/dtjp/lib/images/menu/icon_menu00_01_on.png); } /* 사용자관리 */
li.on .icon_lnb00_02,
li:focus .icon_lnb00_02,
li:hover .icon_lnb00_02 { background-image: url(/dtjp/lib/images/menu/icon_menu00_02_on.png); } /* 권한관리 */
li.on .icon_lnb00_03,
li:focus .icon_lnb00_03,
li:hover .icon_lnb00_03 { background-image: url(/dtjp/lib/images/menu/icon_menu00_03_on.png); } /* 그룹관리 */
li.on .icon_lnb00_04,
li:focus .icon_lnb00_04,
li:hover .icon_lnb00_04 { background-image: url(/dtjp/lib/images/menu/icon_menu00_04_on.png); } /* 담당자관리 */

/* 기타 */
.icon_lnb00_001 { background-image: url(/dtjp/lib/images/menu/icon_menu00_001_off.png); } /* 공지사항 */
.icon_lnb00_002 { background-image: url(/dtjp/lib/images/menu/icon_menu00_002_off.png); } /* 홍보영상 */
.icon_lnb00_003 { background-image: url(/dtjp/lib/images/menu/icon_menu00_003_off.png); } /* 헬프데스크 */
.icon_lnb00_004 { background-image: url(/dtjp/lib/images/menu/icon_menu00_004_off.png); } /* 사용자 접속 통계 */
.icon_lnb00_005 { background-image: url(/dtjp/lib/images/menu/icon_menu00_005_off.png?v=2); } /* 디지털현황관리 */

li.on .icon_lnb00_001,
li:focus .icon_lnb00_001,
li:hover .icon_lnb00_001 { background-image: url(/dtjp/lib/images/menu/icon_menu00_001_on.png); } /* 공지사항 */
li.on .icon_lnb00_002,
li:focus .icon_lnb00_002,
li:hover .icon_lnb00_002 { background-image: url(/dtjp/lib/images/menu/icon_menu00_002_on.png); } /* 홍보영상 */
li.on .icon_lnb00_003,
li:focus .icon_lnb00_003,
li:hover .icon_lnb00_003 { background-image: url(/dtjp/lib/images/menu/icon_menu00_003_on.png); } /* 헬프데스크 */
li.on .icon_lnb00_004,
li:focus .icon_lnb00_004,
li:hover .icon_lnb00_004 { background-image: url(/dtjp/lib/images/menu/icon_menu00_004_on.png); } /* 사용자 접속 통계 */
li.on .icon_lnb00_005,
li:focus .icon_lnb00_005,
li:hover .icon_lnb00_005 { background-image: url(/dtjp/lib/images/menu/icon_menu00_005_on.png?v=2); } /* 디지털현황관리 */

/* 스마트 점검관리 */
.icon_lnb01_01 { background-image: url(/dtjp/lib/images/menu/icon_menu01_01_off.png); } /* 교량 */
.icon_lnb01_02 { background-image: url(/dtjp/lib/images/menu/icon_menu01_02_off.png); } /* 터널 */
.icon_lnb01_03 { background-image: url(/dtjp/lib/images/menu/icon_menu01_03_off.png); } /* 비탈면 */
.icon_lnb01_04 { background-image: url(/dtjp/lib/images/menu/icon_menu01_04_off.png); } /* 포장파손 자동탐지 */
.icon_lnb01_05 { background-image: url(/dtjp/lib/images/menu/icon_menu01_05_off.png); } /* 스마트장비점검 */
.icon_lnb01_06 { background-image: url(/dtjp/lib/images/menu/icon_menu01_06_off.png); } /* Top10분석 */
.icon_lnb01_12 { background-image: url(/dtjp/lib/images/menu/icon_menu01_12_off.png); } /* 비탈면3D 입체 점검 모델 조회 */

li.on .icon_lnb01_01,
li:focus .icon_lnb01_01,
li:hover .icon_lnb01_01 { background-image: url(/dtjp/lib/images/menu/icon_menu01_01_on.png); } /* 교량 */
li.on .icon_lnb01_02,
li:focus .icon_lnb01_02,
li:hover .icon_lnb01_02 { background-image: url(/dtjp/lib/images/menu/icon_menu01_02_on.png); } /* 터널 */
li.on .icon_lnb01_03,
li:focus .icon_lnb01_03,
li:hover .icon_lnb01_03 { background-image: url(/dtjp/lib/images/menu/icon_menu01_03_on.png); } /* 비탈면 */
li.on .icon_lnb01_04,
li:focus .icon_lnb01_04,
li:hover .icon_lnb01_04 { background-image: url(/dtjp/lib/images/menu/icon_menu01_04_on.png); } /* 포장파손 자동탐지 */
li.on .icon_lnb01_05,
li:focus .icon_lnb01_05,
li:hover .icon_lnb01_05 { background-image: url(/dtjp/lib/images/menu/icon_menu01_05_on.png); } /* 스마트장비점검 */
li.on .icon_lnb01_06,
li:focus .icon_lnb01_06,
li:hover .icon_lnb01_06 { background-image: url(/dtjp/lib/images/menu/icon_menu01_06_on.png); } /* Top10분석 */
li.on .icon_lnb01_12,
li:focus .icon_lnb01_12,
li:hover .icon_lnb01_12 { background-image: url(/dtjp/lib/images/menu/icon_menu01_12_on.png); } /* 비탈면3D 입체 점검 모델 조회 */

/* 스마트 차량관리 */
.icon_lnb02_01 { background-image: url(/dtjp/lib/images/menu/icon_menu02_01_off.png); } /* 배차관리 */
.icon_lnb02_02 { background-image: url(/dtjp/lib/images/menu/icon_menu02_02_off.png); } /* 운행일지 */
.icon_lnb02_03 { background-image: url(/dtjp/lib/images/menu/icon_menu02_03_off.png); } /* 주유일지 */
.icon_lnb02_04 { background-image: url(/dtjp/lib/images/menu/icon_menu02_04_off.png); } /* 관리설정 */

li.on .icon_lnb02_01,
li:focus .icon_lnb02_01,
li:hover .icon_lnb02_01 { background-image: url(/dtjp/lib/images/menu/icon_menu02_01_on.png); } /* 배차관리 */
li.on .icon_lnb02_02,
li:focus .icon_lnb02_02,
li:hover .icon_lnb02_02 { background-image: url(/dtjp/lib/images/menu/icon_menu02_02_on.png); } /* 운행일지 */
li.on .icon_lnb02_03,
li:focus .icon_lnb02_03,
li:hover .icon_lnb02_03 { background-image: url(/dtjp/lib/images/menu/icon_menu02_03_on.png); } /* 주유일지 */
li.on .icon_lnb02_04,
li:focus .icon_lnb02_04,
li:hover .icon_lnb02_04 { background-image: url(/dtjp/lib/images/menu/icon_menu02_04_on.png); } /* 관리설정 */

/* 스마트 유지보수 */
.icon_lnb03_01 { background-image: url(/dtjp/lib/images/menu/icon_menu03_01_off.png); } /* 보수물량조사 */
.icon_lnb03_02 { background-image: url(/dtjp/lib/images/menu/icon_menu03_02_off.png); } /* 작업요청서 */
.icon_lnb03_03 { background-image: url(/dtjp/lib/images/menu/icon_menu03_03_off.png); } /* 작업지시서 */
.icon_lnb03_04 { background-image: url(/dtjp/lib/images/menu/icon_menu03_04_off.png); } /* 작업일지 */
.icon_lnb03_05 { background-image: url(/dtjp/lib/images/menu/icon_menu03_05_off.png); } /* 작업완료보고서 */

li.on .icon_lnb03_01,
li:focus .icon_lnb03_01,
li:hover .icon_lnb03_01 { background-image: url(/dtjp/lib/images/menu/icon_menu03_01_on.png); } /* 보수물량조사 */
li.on .icon_lnb03_02,
li:focus .icon_lnb03_02,
li:hover .icon_lnb03_02 { background-image: url(/dtjp/lib/images/menu/icon_menu03_02_on.png); } /* 작업요청서 */
li.on .icon_lnb03_03,
li:focus .icon_lnb03_03,
li:hover .icon_lnb03_03 { background-image: url(/dtjp/lib/images/menu/icon_menu03_03_on.png); } /* 작업지시서 */
li.on .icon_lnb03_04,
li:focus .icon_lnb03_04,
li:hover .icon_lnb03_04 { background-image: url(/dtjp/lib/images/menu/icon_menu03_04_on.png); } /* 작업일지 */
li.on .icon_lnb03_05,
li:focus .icon_lnb03_05,
li:hover .icon_lnb03_05 { background-image: url(/dtjp/lib/images/menu/icon_menu03_05_on.png); } /* 작업완료보고서 */

/* 스마트 IoT 통합관리 */
.icon_lnb04_01 { background-image: url(/dtjp/lib/images/menu/icon_menu04_01_off.png); } /* 교량지진변위 */
.icon_lnb04_02 { background-image: url(/dtjp/lib/images/menu/icon_menu04_02_off.png); } /* 비탈면/옹벽 */
.icon_lnb04_03 { background-image: url(/dtjp/lib/images/menu/icon_menu04_03_off.png); } /* 앵커긴장력 */
.icon_lnb04_04 { background-image: url(/dtjp/lib/images/menu/icon_menu04_04_off.png); } /* 작업장 전자카드 */
.icon_lnb04_05 { background-image: url(/dtjp/lib/images/menu/icon_menu04_05_off.png); } /* 교량협착 */
.icon_lnb04_06 { background-image: url(/dtjp/lib/images/menu/icon_menu04_06_off.png); } /* 소화기 원격관리 */
.icon_lnb04_07 { background-image: url(/dtjp/lib/images/menu/icon_menu04_07_off.png); } /* 염수분사장치 */
.icon_lnb04_08 { background-image: url(/dtjp/lib/images/menu/icon_menu04_08_off.png); } /* 회차로차단기 */
.icon_lnb04_09 { background-image: url(/dtjp/lib/images/menu/icon_menu04_09_off.png); } /* 원격전원 */

li.on .icon_lnb04_01,
li:focus .icon_lnb04_01,
li:hover .icon_lnb04_01 { background-image: url(/dtjp/lib/images/menu/icon_menu04_01_on.png); } /* 교량지진변위 */
li.on .icon_lnb04_02,
li:focus .icon_lnb04_02,
li:hover .icon_lnb04_02 { background-image: url(/dtjp/lib/images/menu/icon_menu04_02_on.png); } /* 비탈면/옹벽 */
li.on .icon_lnb04_03,
li:focus .icon_lnb04_03,
li:hover .icon_lnb04_03 { background-image: url(/dtjp/lib/images/menu/icon_menu04_03_on.png); } /* 앵커긴장력 */
li.on .icon_lnb04_04,
li:focus .icon_lnb04_04,
li:hover .icon_lnb04_04 { background-image: url(/dtjp/lib/images/menu/icon_menu04_04_on.png); } /* 작업장 전자카드 */
li.on .icon_lnb04_05,
li:focus .icon_lnb04_05,
li:hover .icon_lnb04_05 { background-image: url(/dtjp/lib/images/menu/icon_menu04_05_on.png); } /* 교량협착 */
li.on .icon_lnb04_06,
li:focus .icon_lnb04_06,
li:hover .icon_lnb04_06 { background-image: url(/dtjp/lib/images/menu/icon_menu04_06_on.png); } /* 소화기 원격관리 */
li.on .icon_lnb04_07,
li:focus .icon_lnb04_07,
li:hover .icon_lnb04_07 { background-image: url(/dtjp/lib/images/menu/icon_menu04_07_on.png); } /* 염수분사 */
li.on .icon_lnb04_08,
li:focus .icon_lnb04_08,
li:hover .icon_lnb04_08 { background-image: url(/dtjp/lib/images/menu/icon_menu04_08_on.png); } /* 회차로차단 */
li.on .icon_lnb04_09,
li:focus .icon_lnb04_09,
li:hover .icon_lnb04_09 { background-image: url(/dtjp/lib/images/menu/icon_menu04_09_on.png); } /* 원격제어 */

/* 디지털 영상관리 */
.icon_lnb05_01 { background-image: url(/dtjp/lib/images/menu/icon_menu05_01_off.png); } /* 디지털 영상 */
.icon_lnb05_02 { background-image: url(/dtjp/lib/images/menu/icon_menu05_02_off.png); } /* 대용량 첨단장비 영상전송 */
.icon_lnb05_03 { background-image: url(/dtjp/lib/images/menu/icon_menu05_03_off.png); } /* 개인영상관리 */
.icon_lnb05_04 { background-image: url(/dtjp/lib/images/menu/icon_menu05_04_off.png); } /* 즐겨찾기 */
.icon_lnb05_05 { background-image: url(/dtjp/lib/images/menu/icon_menu05_05_off.png); } /* 이력관리 */
.icon_lnb05_06 { background-image: url(/dtjp/lib/images/menu/icon_menu05_06_off.png); } /* 디지털영상통계 */
.icon_lnb05_07 { background-image: url(/dtjp/lib/images/menu/icon_menu05_07_off.png); } /* 영상저장소 누적현황 */
.icon_lnb05_08 { background-image: url(/dtjp/lib/images/menu/icon_menu05_08_off.png); } /* 공유 영상관리 */
.icon_lnb05_09 { background-image: url(/dtjp/lib/images/menu/icon_menu05_09_off.png); } /* 시설물 점검 영상 */
.icon_lnb05_10 { background-image: url(/dtjp/lib/images/menu/icon_menu05_10_off.png); } /* 작업일지 영상관리 */

li.on .icon_lnb05_01,
li:focus .icon_lnb05_01,
li:hover .icon_lnb05_01 { background-image: url(/dtjp/lib/images/menu/icon_menu05_01_on.png); } /* 디지털 영상 */
li.on .icon_lnb05_02,
li:focus .icon_lnb05_02,
li:hover .icon_lnb05_02 { background-image: url(/dtjp/lib/images/menu/icon_menu05_02_on.png); } /* 대용량 첨단장비 영상전송 */
li.on .icon_lnb05_03,
li:focus .icon_lnb05_03,
li:hover .icon_lnb05_03 { background-image: url(/dtjp/lib/images/menu/icon_menu05_03_on.png); } /* 개인영상관리 */
li.on .icon_lnb05_04,
li:focus .icon_lnb05_04,
li:hover .icon_lnb05_04 { background-image: url(/dtjp/lib/images/menu/icon_menu05_04_on.png); } /* 즐겨찾기 */
li.on .icon_lnb05_05,
li:focus .icon_lnb05_05,
li:hover .icon_lnb05_05 { background-image: url(/dtjp/lib/images/menu/icon_menu05_05_on.png); } /* 이력관리 */
li.on .icon_lnb05_06,
li:focus .icon_lnb05_06,
li:hover .icon_lnb05_06 { background-image: url(/dtjp/lib/images/menu/icon_menu05_06_on.png); } /* 디지털영상통계 */
li.on .icon_lnb05_07,
li:focus .icon_lnb05_07,
li:hover .icon_lnb05_07 { background-image: url(/dtjp/lib/images/menu/icon_menu05_07_on.png); } /* 영상저장소 누적현황 */
li.on .icon_lnb05_08,
li:focus .icon_lnb05_08,
li:hover .icon_lnb05_08 { background-image: url(/dtjp/lib/images/menu/icon_menu05_08_on.png); } /* 공유 영상관리 */
li.on .icon_lnb05_09,
li:focus .icon_lnb05_09,
li:hover .icon_lnb05_09 { background-image: url(/dtjp/lib/images/menu/icon_menu05_09_on.png); } /* 시설물 점검 영상 */
li.on .icon_lnb05_10,
li:focus .icon_lnb05_10,
li:hover .icon_lnb05_10 { background-image: url(/dtjp/lib/images/menu/icon_menu05_10_on.png); } /* 작업일지 영상관리 */

/* 스마트 작업관리 */
.icon_lnb06_01 { background-image: url(/dtjp/lib/images/menu/icon_menu06_01_off.png); } /* 작업계획 정보연계 */
.icon_lnb06_02 { background-image: url(/dtjp/lib/images/menu/icon_menu06_02_off.png); } /* 작업상황 정보연계 */
li.on .icon_lnb06_01,
li:focus .icon_lnb06_01,
li:hover .icon_lnb06_01 { background-image: url(/dtjp/lib/images/menu/icon_menu06_01_on.png); } /* 작업계획 정보연계 */
li.on .icon_lnb06_02,
li:focus .icon_lnb06_02,
li:hover .icon_lnb06_02 { background-image: url(/dtjp/lib/images/menu/icon_menu06_02_on.png); } /* 작업상황 정보연계 */

/* ********************************************************************************* *
* 05) footer
* ********************************************************************************* */
footer { margin-top: -30px; padding: 15px 30px; font-size: 15px; color: #999; font-weight: 300; text-align: right; }

.main_wrap + footer { margin-top: -20px; }


/* ********************************************************************************* *
* 06) container
* ********************************************************************************* */
#container { position: relative; width: 100%; min-height: calc(100vh - 110px); display: flex; align-items: stretch; }

.contents { width: calc(100% - 260px - 0.1px); background-color: #eff1f6; }
.contents.col { padding: 0; }
.contents .inner { padding: 30px; }

/* 페이지 타이틀 */
.page_title_area { position: relative; width: 100%; z-index: 1; }
.page_title_area .inner { padding: 0 30px; }
.page_title_area h2 { display: none; font-size: 28px; font-weight: 500; color: #fff; }
.page_title_area .page_title_info { height: 50px; margin-bottom: -30px; flex-direction: row-reverse; }

/* 브레드 크럼 */
.breadcrumb_area { font-weight: 500; color: #333; }
.breadcrumb_area .breadcrumb { margin-bottom: 0; padding: 0; background-color: transparent; }
.breadcrumb_area .breadcrumb-item { font-size: 16px; color: #999; }
.breadcrumb_area .breadcrumb-item.active { color: #3185db; }
.breadcrumb_area .breadcrumb .breadcrumb-item + .breadcrumb-item { position: relative; margin-left: 10px; padding-left: 14px; }
.breadcrumb_area .breadcrumb .breadcrumb-item + .breadcrumb-item::before { position: absolute; left: 0; top: 1px; width: 7px; height: 100%; margin-right: 8px; padding: 0; font-size: 0; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-position: center center; background-repeat: no-repeat; }

/* 리스트 타입 버튼 */
.list_type_btn_area { margin-right: 20px; }
.list_type_btn_area .list_type_btn { width: 34px; height: 34px; margin-right: 5px; font-size: 0; text-indent: -9999px; border-radius: 3px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 100%; transition: background-image .15s, background-color .15s; }
.list_type_btn_area .list_type_btn:last-child { margin-right: 0; }
.list_type_btn_area .list_type_btn_table { background-image: url(/dtjp/lib/images/common/btn_list.png); } /* 목록형 */
.list_type_btn_area .list_type_btn_block { background-image: url(/dtjp/lib/images/common/btn_block.png); } /* 갤러리형 */
.list_type_btn_area .list_type_btn_map { background-image: url(/dtjp/lib/images/common/btn_map.png); } /* 지도형 */
.list_type_btn_area .list_type_btn_road { background-image: url(/dtjp/lib/images/common/btn_road.png); } /* 차트형 */

.list_type_btn_area .list_type_btn.on,
.list_type_btn_area .list_type_btn:hover { background-color: #c5cad7; }

.list_type_btn_area .list_type_btn_sm { width: 25px; height: 20px; margin-right: 10px; font-size: 0; text-indent: -9999px; border-radius: 3px; background-color: transparent; background-repeat: no-repeat; background-position: center center; transition: background-image .15s, background-color .15s; }
.list_type_btn_area .list_type_btn_sm:last-child { margin-right: 0; }
.list_type_btn_area .list_type_btn_table_sm { background-image: url(/dtjp/lib/images/common/btn_list_off_sm.png); } /* 목록형 */
.list_type_btn_area .list_type_btn_block_sm { background-image: url(/dtjp/lib/images/common/btn_block_off_sm.png); } /* 갤러리형 */

.list_type_btn_area .list_type_btn_table_sm.active,
.list_type_btn_area .list_type_btn_table_sm:hover { background-image: url(/dtjp/lib/images/common/btn_list_on_sm.png); } /* 목록형 */
.list_type_btn_area .list_type_btn_block_sm.active,
.list_type_btn_area .list_type_btn_block_sm:hover { background-image: url(/dtjp/lib/images/common/btn_block_on_sm.png); } /* 갤러리형 */

/* 콘텐츠 */
.box_title { font-size: 24px; font-weight: 500; }
.border_text { position: relative; margin-right: 10px; padding-right: 12px; }
.border_text:after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 14px; margin-top: -7px; background-color: #d2d2d2; }

.white_box { width: 100%; padding: 30px; background-color: #fff; border-radius: 7px; }
.white_box + .white_box { margin-top: 30px; }
.gray_box { padding: 20px 30px; background-color: #eff1f6; }
.white_box.border_box { width: 100%; padding: 30px; background-color: #fff; border-radius: 7px; }
.border_box { border: 1px solid #d2d2d2; }
.white_box.border_box { width: 100%; padding: 30px; background-color: #fff; border-radius: 7px; border: 1px solid #e5e5e5; }

.page_cont_area {  }
.page_cont_area .inner { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 110px); padding: 30px; }

/* 불릿 */
.bul_title { position: relative; min-height: 28px; margin-bottom: 10px; padding-left: 20px; font-size: 17px; line-height: 1.5; font-weight: 500; }
.bul_title:before { content: ''; position: absolute; top: 6px; left: 0; width: 14px; height: 14px; background-image: url(/dtjp/lib/images/common/bul_circle_blue.png); background-repeat: no-repeat; background-position: left center; }
* + .bul_title { margin-top: 20px; }
.bul_title2 { position: relative; min-height: 28px; margin-bottom: 5px; margin-left: 25px; padding-left: 12px; font-size: 17px; line-height: 1.5; font-weight: 500; }
.bul_title2:before { content: ''; position: absolute; top: 10px; left: 0; width: 5px; height: 5px; background-color: #333; border-radius: 100%; }

.bul_list li { position: relative; margin-bottom: 10px; padding-left: 13px; font-size: 16px; color: #4d4d4d; line-height: 1.5; }
.bul_list li:last-child { margin-bottom: 0; }
.bul_list li:before { content: ''; position: absolute; top: 10px; left: 0; display: inline-block; vertical-align: middle; width: 3px; height: 3px; background-color: #4c84ff; }

/* 탭 */
.tab_type1 { display: flex; width: auto; background-color: #f5f7fb; border-bottom: 1px solid #ddd; }
.tab_type1 .tab_elm { position: relative; display: flex; height: 45px; justify-content: center; align-items: center; margin-bottom: -1px; padding: 0 30px; font-size: 16px; border: 1px solid transparent; border-top: 0; transition: border 0.15s, color 0.15s, font-weight 0.15s; }
.tab_type1 .tab_elm:hover { color: #3185db; font-weight: 500; }
.tab_type1 .tab_elm.active { color: #3185db; font-weight: 500; background-color: #fff; border-color: #ddd;  border-bottom-color: #fff;}
.tab_type1 .tab_elm.active:after { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #3185db; }

.tab_type1 + .white_box { border-radius: 0 0 7px 7px; }

.tab_area .tab_contents { display: none; }

.tab_type2 { display: flex; width: 100%; background-color: #e9ecf1; }
.tab_type2 .tab_elm { position: relative; display: flex; width: 100%; min-height: 50px; justify-content: center; align-items: center; padding: 0 5px; font-size: 17px; background-color: #e9ecf1; transition: background-color 0.15s, color 0.15s, font-weight 0.15s; }
.tab_type2 .tab_elm:hover,
.tab_type2 .tab_elm.active { color: #fff; font-weight: 500; background-color: #3185db; }

.tab_area.statistics {position:relative;}
.tab_area.statistics .btn_excel{position:absolute;top:4px;right:5px;padding: 6px 20px 6px 48px;} /*20231010 추가*/
.tab_area.statistics ul {width:100% !important;} /*20231010 추가*/
.graphBox{width:100%;margin-top:15px;min-height:500px;text-align:center;border:1px solid #ddd;}/*20231010 추가*/


/* 지도 목록 */
.map_list { flex-shrink: 0; width: 100%; max-height: 600px; overflow-y: auto; }
.map_list a { display: block; }
.map_list .map_list_title { padding: 15px 20px; font-size: 20px; font-weight: 500; color: #333; background-color: #f3f5fa; }
.map_list .map_list_title span { display: inline-block; width: 25px; }
.map_list .map_list_cont { padding: 20px; }

/* 지도 */
.map_area { position: relative; min-height: 358px; height: 100%; }
.map_area .map { width: 100%; height: 100%; }
.map_area .icon_mark_map,
.map_area .icon_map_mark { position: absolute; z-index: 2; margin: 0; }
.map_area .icon_mark_number { position: absolute; z-index: 2; margin: 0; padding: 3px 8px 9px 3px; line-height: 1.7; font-size: 15px; color: #3185db; text-indent: 0; font-weight: 500; text-align: center; }
.map_area .icon_mark_number.active,
.map_area .icon_mark_number:hover { color: #fff; background-image: url(/dtjp/lib/images/common/icon_mark_blue.png); }
.map_area .icon_cir_number { position: absolute; z-index: 2; width: 25px; height: 25px; margin: 0; padding: 0; font-size: 15px; line-height: 25px; color: #fff; text-indent: 0; font-weight: 500; text-align: center; background-color: #3185db; border-radius: 100%; }
.map_area .icon_mark_per { position: absolute; z-index: 2; width: 20px; height: 21px; margin: 0; font-size: 0; background-image: url(/dtjp/lib/images/common/icon_mark_per.png); }
.map_area .icon_mark_arr { position: absolute; z-index: 2; width: 24px; height: 21px; margin: 0; background-image: url(/dtjp/lib/images/common/icon_mark_arr.png); }
.map_area .icon_mark_thumb { position: absolute; z-index: 2; display: block; width: 60px; height: 34px; margin: 0; border: 1px solid #2a3748; }
.map_area .icon_mark_thumb img { position: static; display: block; width: 100%; height: 100%; }
.map_area .mark_per_wrap { position: absolute; z-index: 2; }
.map_area .mark_per_wrap .icon_mark_per { position: static; }
.map_area .mark_per_wrap .icon_mark_arr { left: 24px; top: 50%; margin-top: -10px; transform-origin: 0 50%; }
.map_area .mark_per_wrap .icon_mark_thumb { left: 46px; }

.map_area .mark_spr { position: absolute; width: 100px; height: 100px; font-size: 0; border: 2px solid #3185db; background-color: rgba(49,133,219,0.2); }

.work_map_area { min-height: 300px; height: 300px; border: 1px solid #ddd; }

.map_option_area { position: absolute; top: 70px; left: 10px; padding: 20px; background: #fff; border-radius: 5px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); }
.map_option_area dt { font-size: 17px; font-weight: 500; }
.map_option_area dd { margin-top: 20px; }

.popover { max-width: 350px; width: 350px; font-family: "Montserrat", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", arial, sans-serif; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); }
.popover .scroll-card-body { height: 150px; }
.popover .card .img_box { flex: 1; margin-right: 10px; }
.popover .card .img_box:last-child { margin-right: 0; }

.card-table .card-thead { display: flex; background: #f6f6f6; border-top: 1px solid #000; border-bottom: 0; }
.card-table .card-th { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; text-align: center; font-size: 15px; border: 1px solid #ddd; border-bottom: 0; border-left: 0; }
.card-table .card-th:first-child { border-left: 1px solid #ddd; }
.card-table .card-tbody { display: flex; background: #fff;}
.card-table .card-tbody:last-child { border-bottom: 0; }
.card-table .card-td { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; text-align: center; font-size: 15px; border: 1px solid #ddd; border-bottom: 0; border-left: 0; border-bottom: 0; }
.card-table .card-td:first-child { border-left: 1px solid #ddd; }
.card-table .card-tbody:last-child .card-th,
.card-table .card-tbody:last-child .card-td { border-bottom: 1px solid #ddd; }

div.card-text,
dl.card-text { display: flex; margin-bottom: 10px; }
dl.card-text:last-child { margin-bottom: 0; }
div.card-text .card-text_title,
dl.card-text dt { position: relative; width: 75px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -1px; color: #333; word-break: keep-all; }
div.card-text .card-text_title:after,
dl.card-text dt:after { content: ''; position: absolute; right: 0; top: 4px; width: 1px; height: 14px; background: #ddd; }
div.card-text .card-text_cont,
dl.card-text dd { flex: 1; padding-left: 20px; font-size: 15px; line-height: 1.5; color: #4d4d4d; }


/* ********************************************************************************* *
* 07) form
* ********************************************************************************* */
input,
textarea,
select { font-family: "Montserrat", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", arial, sans-serif; }

.form-group { margin-bottom: 0; }
.form-control { height: 40px; padding: 6px 12px; font-size: 15px; color: #4d4d4d; border-color: #d2d2d2; }
.form-control.form-datepicker { height: 40px; padding: 6px 36px 6px 12px; border-color: #d2d2d2; background-image: url(/dtjp/lib/images/common/icon_datepicker.png); background-position: right 12px center; background-repeat: no-repeat; }
.form-control.form-timepicker { height: 40px; padding: 6px 36px 6px 12px; border-color: #d2d2d2; background-image: url(/dtjp/lib/images/common/icon_clock.png); background-position: right 12px center; background-repeat: no-repeat; }
.form-control.form-datetimepicker { height: 40px; padding: 6px 36px 6px 12px; border-color: #d2d2d2; background-image: url(/dtjp/lib/images/common/icon_datepicker.png); background-position: right 12px center; background-repeat: no-repeat; }
.form-control.form-search { height: 40px; padding: 6px 36px 6px 12px; border-color: #d2d2d2; background-image: url(/dtjp/lib/images/common/icon_search_sm_black.png); background-position: right 12px center; background-repeat: no-repeat; }
select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 40px; padding-right: 30px; font-size: 15px; color: #4d4d4d; border-color: #d2d2d2; background-image: url(/dtjp/lib/images/common/icon_select_arr.png); background-position: right 12px center; background-repeat: no-repeat; }
select.form-control::-ms-expand { display: none; }
textarea.form-control { resize: vertical; height: 150px; }

.form-control[readonly] { background-color: #fff; }
.form-control[readonly]:disabled,
.form-control:disabled,
.form-select:disabled { color: #4d4d4d; background-color: #eee; }

/* 체크박스 / 라디오 */
.form-check { display: inline-block; min-height: 20px; margin-bottom: 0; padding-left: 0; }
.form-check label { cursor: pointer; user-select: none; }

.form-check-input[type=checkbox] { width: 0; height: 0; opacity: 0; display: none; }
.form-check-input[type=checkbox] + label.form-check-label { min-width: 20px; min-height: 20px; }
.form-check-input[type=checkbox] + label.form-check-label:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: -3px 5px 0; border-radius: 0; border: 0; background-image: url(/dtjp/lib/images/common/icon_check_off.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; background-color: transparent; }
.form-check-input[type=checkbox]:checked + label.form-check-label:before { background-image: url(/dtjp/lib/images/common/icon_check_on.png); }
.form-check-input[type=checkbox]:disabled,
.form-check-input[type=checkbox]:disabled + label.form-check-label { opacity: 0.5; }

.form-check-rev .form-check-input[type=checkbox] + label.form-check-label { padding-right: 35px; }
.form-check-rev .form-check-input[type=checkbox] + label.form-check-label:before { position: absolute; top: 6px; right: 0; }

.form-check-input[type=radio] { width: 0; height: 0; opacity: 0; display: none; }
.form-check-input[type=radio] + label.form-check-label { min-width: 20px; min-height: 20px; }
.form-check-input[type=radio] + label.form-check-label:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: -3px 5px 0; border-radius: 0; border: 0; background-image: url(/dtjp/lib/images/common/icon_radio_off.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; background-color: transparent; }
.form-check-input[type=radio]:checked + label.form-check-label:before { background-image: url(/dtjp/lib/images/common/icon_radio_on.png); }
.form-check-input[type=radio]:disabled,
.form-check-input[type=radio]:disabled + label.form-check-label { opacity: 0.5; }

.form-check-box { display: inline-block; }
.form-check-box label { cursor: pointer; user-select: none; }
.form-check-box .form-check-input[type=checkbox] + label.form-check-label { min-width: 70px; min-height: 0; height: 28px; padding: 0 10px; line-height: 26px; font-size: 14px; color: #333; text-align: center; background-color: #edf6ff; border: 1px solid #c3e1ff; border-radius: 3px; }
.form-check-box .form-check-input[type=checkbox]:checked + label.form-check-label { color: #fff; border-color: #3185db; background-color: #3185db; }
.form-check-box .form-check-input[type=checkbox] + label.form-check-label:before { display: none; }
.form-check-box .form-check-input[type=radio] + label.form-check-label { min-width: 70px; min-height: 0; height: 28px; padding: 0 10px; line-height: 26px; font-size: 14px; color: #333; text-align: center; background-color: #edf6ff; border: 1px solid #c3e1ff; border-radius: 3px; }
.form-check-box .form-check-input[type=radio]:checked + label.form-check-label { color: #fff; border-color: #3185db; background-color: #3185db; }
.form-check-box .form-check-input[type=radio] + label.form-check-label:before { display: none; }

.form-toggle { display: inline-block; vertical-align: middle; overflow: hidden; }
.form-toggle input[type=checkbox] { width: 0; height: 0; opacity: 0; display: none; }
.form-toggle input[type=checkbox] + label.form-toggle-label { position: relative; width: 60px; height: 25px; background-color: #fff; border: 2px solid #2a303c; border-radius: 50px; transition: background-color 0.1s; cursor: pointer; user-select : none; }
.form-toggle input[type=checkbox] + label.form-toggle-label:before { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background-color: #2a303c; border-radius: 100%; transition: left 0.3s, background-color 0.3s; z-index: 2; }
.form-toggle input[type=checkbox] + label.form-toggle-label em { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 3px 8px; text-align: left; font-size: 12px; color: #fff; font-weight: 600; border-radius: 50px; transition: opacity 0.3s; z-index: 1; }
.form-toggle input[type=checkbox] + label.form-toggle-label em.check_off { color: #2a303c; text-align: right; }
.form-toggle input[type=checkbox] + label.form-toggle-label em.check_on { opacity: 0; }
.form-toggle input[type=checkbox]:checked + label.form-toggle-label { background-color: #2a303c; }
.form-toggle input[type=checkbox]:checked + label.form-toggle-label:before { left: calc(100% - 19px); background-color: #fff; }
.form-toggle input[type=checkbox]:checked + label.form-toggle-label em.check_off { opacity: 0; }
.form-toggle input[type=checkbox]:checked + label.form-toggle-label em.check_on { opacity: 1; }

.disabled-toggle { display: inline-block; vertical-align: middle; overflow: hidden; }
.disabled-toggle input[type=checkbox] { width: 0; height: 0; opacity: 0; display: none; }
.disabled-toggle input[type=checkbox] + label.disabled-toggle-label {position: relative;width: 60px;height: 25px;background-color: #fff;border: 2px solid #b5bcc3;border-radius: 50px;transition: background-color 0.1s;cursor: pointer;user-select : none;}
.disabled-toggle input[type=checkbox] + label.disabled-toggle-label:before { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background-color: #b5bcc3; border-radius: 100%; transition: left 0.3s, background-color 0.3s; z-index: 2; }
.disabled-toggle input[type=checkbox] + label.disabled-toggle-label em { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 3px 8px; text-align: left; font-size: 12px; color: #fff; font-weight: 600; border-radius: 50px; transition: opacity 0.3s; z-index: 1; }
.disabled-toggle input[type=checkbox] + label.disabled-toggle-label em.check_off { color: #b5bcc3; text-align: right; }
.disabled-toggle input[type=checkbox] + label.disabled-toggle-label em.check_on { opacity: 0; }
.disabled-toggle input[type=checkbox]:checked + label.disabled-toggle-label { background-color: #b5bcc3; }
.disabled-toggle input[type=checkbox]:checked + label.disabled-toggle-label:before { left: calc(100% - 19px); background-color: #fff; }
.disabled-toggle input[type=checkbox]:checked + label.disabled-toggle-label em.check_off { opacity: 0; }
.disabled-toggle input[type=checkbox]:checked + label.disabled-toggle-label em.check_on { opacity: 1; }

/* 파일 */
.btn_file input[type=file] { display: none; opacity: 0; }
.btn_file label { display: block; }

.file_view,
.file_view img { width: 100%; }

.file_list li { margin-top: 10px; }
.file_list a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 45px; padding: 9px; font-size: 15px; color: #4d4d4d; border: 1px solid #f6f6f6; border-radius: 3px; background-color: #f6f6f6; transition: background-color 0.15s, border 0.15s; }
.file_list .label { flex-shrink: 0; margin-top: -1px; }
.file_list li.on a,
.file_list li:hover a { background-color: #edf6ff; border-color: #3185db; }
.file_list li.on .label,
.file_list li:hover .label { color: #fff; background-color: #3185db; }

/* datepicker */
.datepicker { padding: 15px 20px; }
.datepicker th { width: 30px; height: 40px; font-size: 14px; color: #222; }
.datepicker th.prev,
.datepicker th.prev:hover { font-size: 0; background-image: url(/dtjp/lib/images/common/btn_dp_prev.png); background-repeat: no-repeat; background-position: center center; }
.datepicker th.next,
.datepicker th.next:hover { font-size: 0; background-image: url(/dtjp/lib/images/common/btn_dp_next.png); background-repeat: no-repeat; background-position: center center; }
.datepicker td { width: 30px; height: 30px; font-size: 14px; color: #4d4d4d; }
.datepicker td:first-child { color: #ed1a2e; }
.datepicker td:last-child { color: #4c84ff; }
.datepicker .datepicker-switch { font-size: 16px; font-weight: 500; }
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover { background-color: transparent; }
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] { background: #3185db; }
.datepicker-dropdown.datepicker-orient-bottom:before, .datepicker-dropdown.datepicker-orient-bottom:after,
.datepicker-dropdown.datepicker-orient-top:before, .datepicker-dropdown.datepicker-orient-top:after { display: none; }
.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top { margin-top: 13px; }

/* timepicker */
.ui-timepicker-container { height: 30vh !important; padding: 0; z-index: 9209 !important; font-family: "Montserrat", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", arial, sans-serif; }
.ui-timepicker-container .ui-timepicker { width: 100% !important; height: 100%; margin: 0; border: 0; }
.ui-timepicker-container .ui-timepicker-viewport { width: 100% !important; height: 100%; margin: 0; }
.ui-timepicker-container .ui-corner-all { font-size: 16px; text-align: left; letter-spacing: 0; }
.ui-timepicker-container .ui-state-hover { background-color: #d4eaff; font-weight: 500; border: 0; }

/* datetimepicker */
.bootstrap-datetimepicker-widget { width: 252px !important; padding: 0; background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; }
.bootstrap-datetimepicker-widget .row { display: block; margin: 0; }
.bootstrap-datetimepicker-widget .picker-switch { font-size: 16px; font-weight: 500; }
.bootstrap-datetimepicker-widget .datepicker { display: block; width: 100%; max-width: 100%; padding: 15px 20px 10px; }
.bootstrap-datetimepicker-widget .timepicker { display: block; width: 100%; max-width: 100%; padding: 10px 20px; border-top: 1px solid rgba(0,0,0,.15); }
.bootstrap-datetimepicker-widget table th { height: 30px; line-height: 30px; }
.bootstrap-datetimepicker-widget table td { height: 30px; line-height: 30px; }
.bootstrap-datetimepicker-widget table td.day { height: 30px; line-height: 30px; }
.bootstrap-datetimepicker-widget table td.today:before { display: none; }
.bootstrap-datetimepicker-widget .timepicker-picker tr:first-child,
.bootstrap-datetimepicker-widget .timepicker-picker tr:last-child { display: none; }
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second { font-weight: 400; height: 30px; line-height: 30px; }
.bootstrap-datetimepicker-widget button[data-action] { padding: 3px 6px; font-size: 14px; }


/* 검색 영역 */
.search_area .btn_search { height: 100%; }
.search_area .col-form-label { padding-left: 0; font-size: 16px; font-weight: 500; text-align: left; }
.search_area .row { margin-left: 0; margin-right: 0; }
.search_area .col-auto,
.search_area .col,
.search_area .col-1,
.search_area .col-1-5,
.search_area .col-2,
.search_area .col-2-5,
.search_area .col-3,
.search_area .col-4,
.search_area .col-5,
.search_area .col-6,
.search_area .col-7,
.search_area .col-8,
.search_area .col-9,
.search_area .col-9-5,
.search_area .col-10,
.search_area .col-10-5,
.search_area .col-11,
.search_area .col-12 { padding-left: 0; }
.col-text { line-height: 40px; font-size: 15px; letter-spacing: -1px; }


/* ********************************************************************************* *
* 08) board
* ********************************************************************************* */
/* 목록 옵션 */
.form_option { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.form_option .form_option_left { flex: 1; }
.form_option .form_option_right { flex: 1; text-align: right; }
.form_option .form_option_total { font-size: 18px; }
.form_option .form_option_total span { font-size: 22px; font-weight: 600; }

/* 페이징 */
.pagination { margin-top: 30px; }
.page-link { width: 40px; height: 40px; margin: 0 5px; padding: 9px 0; font-size: 16px; color: #4d4d4d; text-align: center; border-color: #ddd; border-radius: 3px; }
.page-link:hover { color: #4d4d4d; background-color: #fff; border-color: #ddd; }
.page-item.on .page-link { color: #fff; background-color: #3185db; border-color: #3185db; }
.page-item:not(:first-child) .page-link { margin-left: 5px; }

/* 페이징 */
.icon_first { width: 38px; height: 38px; margin: 0; background-image: url(/dtjp/lib/images/common/pg_first.png); } /* 처음 */
.page-item.previous a,
.icon_prev { width: 38px; height: 38px; margin: 0; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_prev.png); background-position: center center; } /* 이전 */
.page-item.next a,
.icon_next { width: 38px; height: 38px; margin: 0; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_next.png); background-position: center center; } /* 다음 */
.icon_last { width: 38px; height: 38px; margin: 0; background-image: url(/dtjp/lib/images/common/pg_last.png); } /* 끝 */

/* 테이블 목록 */
.table,
.table thead,
.table tbody,
.table tr,
.table th,
.table td { border: 0; }
.table-fixed { table-layout: fixed; }
.table-light th { background-color: #f6f6f6; }
.table-light td { background-color: #fff; }
.table-hover .table-light:hover th { background: #f6f6f6 !important; }
.table-hover tbody > tr:hover > * { background-color: #f3f5fa !important; --bs-table-accent-bg: none; }
.table-click td a { display: block; color: #4d4d4d !important; }
.table-click tr:hover td.selected,
.table-click td.selected { background-color: #d4eaff !important; font-weight: 500; }
.table-click2 tr:hover td.selected,
.table-click2 td.selected { background-color: #f3f5fa !important; font-weight: 500; }
.table { margin-bottom: 0; }
.table .text-left { padding: 5px 15px; }
.table .table_inner { padding: 15px 30px 30px; }
.table thead th { border-width: 1px; }
.table th,
.table td { padding: 7px 10px; vertical-align: middle !important; letter-spacing: -1px; }
.table tr:first-child th,
.table tr:first-child td { border-top: 0; }
.table .font-weight-bold { font-size: 20px; }

.table .row { margin-left: 0; margin-right: 0; }
.table .col-auto,
.table .col,
.table .col-1,
.table .col-1-5,
.table .col-2,
.table .col-2-5,
.table .col-3,
.table .col-4,
.table .col-5,
.table .col-6,
.table .col-7,
.table .col-8,
.table .col-9,
.table .col-9-5,
.table .col-10,
.table .col-10-5,
.table .col-11,
.table .col-12 { padding-left: 0; padding-right: 0; }

/*테이블타입 추가*/
.table_type5 { border-top: 2px solid #222; }
.table_type5 .table>:not(:first-child) { border-top: 0; }
.table_type5 th { height: 70px; font-size: 17px; font-weight: 500; text-align: left;  background-color:#fff; }
.table_type5 td { height: 70px;font-size: 15px; color: #4d4d4d; text-align: center; }

/*아코디언 테이블 타입 추가*/
.table_type0 { border:1px solid #e7e7e7;background-color:#fff;}
.table_type0 .table>:not(:first-child) { border-top: 0; }
.table_type0 th {width:160px !important; height: 70px; font-size: 17px; font-weight: 500; text-align: left;  background-color:#fff;  }
.table_type0 td { height: 70px;font-size: 15px; color: #4d4d4d; background-color:#fff; }

/*//테이틀타입 추가  */

.table_type1 table { border-top: 1px solid #222; }
.table_type1 .table>:not(:first-child) { border-top: 0; }
.table_type1 th { height: 50px; font-size: 17px; font-weight: 500; text-align: center; border: 1px solid #ddd; border-top: none; }
.table_type1 td { height: 50px; font-size: 15px; color: #4d4d4d; text-align: center; border: 1px solid #ddd; }
.table_type1 td.right { text-align: right;}
.table_type1 td.left { text-align: left;}

.table_type2 { border-top: 1px solid #222; }
.table_type2 .table th { height: 45px; font-size: 16px; font-weight: 500; text-align: center; border: 1px solid #ddd; border-top: 0; background-color: #f6f6f6; }
.table_type2 .table td { height: 45px; font-size: 16px; color: #4d4d4d; text-align: center; border: 1px solid #ddd; border-top: 0; }
.table_type2 .table tr:first-child .list_type_btn:last-child { border-top: 0; }

.table_type3,
.table_type3 table { border-top: none; }
.table_type3 .table>:not(:first-child) { border-top: 0; }
.table_type3 th { height: 35px; font-size: 15px; font-weight: 500; text-align: center; border: 1px solid #ddd; border-top: none; background-color: #f6f6f6 !important; }
.table_type3 td { height: 35px; font-size: 15px; color: #4d4d4d; text-align: center; border: 1px solid #ddd; border-top: none; background: #fff !important; }
.table_type3 tr:first-child th { border-top: 1px solid #ddd; }
.table_type3 tr:first-child td { border-top: 1px solid #ddd; }
.table_type3 tr:first-child .list_type_btn:last-child { border-top: 0; }

/*2023 인크리스 추가 */
.table_type4 { border-top: 1px solid #222; }
.table_type4 .table th { height: 45px; font-size: 16px; font-weight: 500; text-align: center; border: 1px solid #ddd; border-top: 0; background-color: #f6f6f6; }
.table_type4 .table td { height: 45px; font-size: 16px; color: #4d4d4d; text-align: center; border: 1px solid #ddd; border-top: 0; text-align:left;}
.table_type4 .table td.right { text-align:right;}
.table_type4 .table td.right .col-form-label{margin-bottom:3px;padding-right:20px;}
.table_type4 .table td.right .form-control{text-align:right;}
.table_type4 .table td span.pay {border:1px solid #cdcdcd;width: 130px;padding: 2px 5px;display: inline-block;margin-left:8px;}
.table_type4 .table td ul li {margin-bottom:3px;}
.table_type4 .table tr:first-child .list_type_btn:last-child { border-top: 0; }

/*2023 인크리스 추가 */
.table_type4 .table_type5 { border-top: 1px solid #222; }
.table_type4 .table_type5 .table th {height: 35px;font-size: 14px; padding:5px; font-weight: 500; text-align: center; border: 1px solid #ddd; border-top: 0; background-color: #f6f6f6; }
.table_type4 .table_type5 .table td {height: 35px;font-size:14px;  padding:5px; color: #4d4d4d; text-align: left; border: 1px solid #ddd; border-top: 0; }
.table_type4 .table_type5 .table td .form-control {height: 30px;padding: 1px 12px;}
.table_type4 .inner_checkList{ display: flex;flex-flow: row wrap;}
.table_type4 .inner_checkList li{position:relative;width:25%;padding:3px 10px 3px 0;}
.table_type4 .inner_checkList.small li{width:20%;}
.table_type4 .inner_checkList li:before{position:absolute;top:50%;right:50px;width:150px;height:1px;border:1px dashed #efefef;content:'';display:block;}
.table_type4 .inner_checkList li .form-check {line-height: 28px;}
.table_type4 .inner_checkList li .form-check .form-check-label{background-color:#fff;padding-right: 10px;}
.table_type4 .inner_checkList li .ratio {line-height: 28px;background-color:#fff}
.table_type4 .inner_checkList li .ratio .form-control{height: 30px;padding: 1px 12px;}
@media all and (max-width: 1300px){
		.table_type4 .inner_checkList li:before{display:none;}
		.table_type4 .inner_checkList li{width:50%;}
		.table_type4 .inner_checkList.small li{width:33.3%;}
}

.table_align_left th,
.table_align_left td,
th.text-left,
td.text-left,
td.align-left,
td.align-left { padding: 5px 15px; text-align: left; }

.table_scroll { max-height: 561px; }
.table_scroll.type2 { max-height: 316px; }
.table_scroll.type2.useScroll { width: calc(100% - 21px); margin-right: 21px; }
.table_scroll.type2.useScroll .table_scroll_box { width: calc(100% + 21px); max-height: 273px; overflow-y: auto; }

.table .btn_rejected{padding: 0px 18px; border:1px solid #ff4d4f; background-color:#ff4d4f; background-image: none; color:#fff; border-radius:4px; font-size: 14px;}
.table .btn_approval{padding: 0px 8px; border:1px solid #007bff; background-color:#007bff; background-image: none; color:#fff; border-radius:4px; font-size: 14px;}
.table .btn_request{padding: 0px 8px; border:1px solid #007bff; background-color:#fff; background-image: none; color:#007bff; border-radius:4px; font-size: 14px;}

.table .btn_name { padding: 5px 14px; border-color: transparent; background-color: transparent; background-image: none; transition: backgrond-color 0.15s, background-image 0.15s, padding 0.15s; }
.table .btn_name:hover { padding: 5px 20px 5px 8px; border-color: #dfe2e9; background-color: #dfe2e9; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); }
.board_view_table .table td { padding: 15px 20px; }
.board_view_table .table .board_cont { height: 300px; line-height: 1.6; text-align: left; }
.board_view_table .table .board_cont textarea.form-control { height: 280px; }

.datatable_scroll { }
.dataTables_scroll { width: calc(100% + 17px) !important; overflow: hidden; }
.dataTables_scrollHeadInner { width: 100% !important; box-sizing: border-box !important; }
.datatable_scroll.not .dataTables_scrollHeadInner { padding-right: 0 !important; }
.dataTables_scrollHeadInner .dataTable { width: 100% !important; }
.dataTables_scrollBody table { border-top: 0; }

/* 갤러리 목록 */
.gallery_type1 {  }
.gallery_type1 .col { margin-top: 30px; }
.gallery_type1 .col:nth-child(-n+4) { margin-top: 0; }
.gallery_type1 .card { position: relative; border: 1px solid #ddd; border-radius: 0; }
.gallery_type1 .card-img,
.gallery_type1 .card-img-area { display: flex; justify-content: center; align-items: center; flex-shrink: 0; height: 185px; overflow: hidden; background-color: #ddd; }
.gallery_type1 .card-img-area img { height: 100%; max-width: none; }
.gallery_type1 .card-img-top { width: auto; max-width: 100%; max-height: 100%; border-radius: 0; background-color: #f6f6f6; }
.gallery_type1 .card-body { padding: 20px 30px; }
.gallery_type1 .btn_area { text-align: right; }
.gallery_type1 .btn_area .btn { margin-left: 5px; }
.gallery_type1 .form-check { position: absolute; top: 10px; left: 10px; }

/* 지도형 목록 */
.map_type1 { display: flex; }
.map_type1 .map_list_area { flex-shrink: 0; width: 475px; padding-right: 30px; }
.map_type1 .map_view_area { flex: 1;  position: relative; }

.video, video { width: 100%; }

/* datatable */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_info { position: absolute; top: -40px; left: 0; font-size: 18px; }
.dataTables_wrapper .dataTables_info span { font-size: 22px; font-weight: 600; }

.dataTables_wrapper .pagination { justify-content: center; }
.dataTables_wrapper .dataTables_paginate .page-item a { width: 40px; height: 40px; margin: 0 5px; padding: 9px 0; font-size: 16px; color: #4d4d4d; text-align: center; border-color: #ddd; border-radius: 3px; }
.dataTables_wrapper .dataTables_paginate .page-item.active a { color: #fff; background-color: #3185db; border-color: #3185db; }
.dataTables_wrapper .dataTables_paginate .page-item.previous a { width: 40px; height: 40px; margin: 0 5px; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_prev.png); background-position: center center; } /* 이전 */
.dataTables_wrapper .dataTables_paginate .page-item.next a { width: 40px; height: 40px; margin: 0 5px; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_next.png); background-position: center center; } /* 다음 */
.dataTables_wrapper .dataTables_paginate .page-item.first a { width: 40px; height: 40px; margin: 0 5px; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_first.png); background-position: center center; } /* 처음 */
.dataTables_wrapper .dataTables_paginate .page-item.last a { width: 40px; height: 40px; margin: 0 5px; font-size: 0; background-image: url(/dtjp/lib/images/common/pg_last.png); background-position: center center; } /* 끝 */

.dataTables_wrapper .sorting { padding: 7px 20px; background-position: right 5px center; background-repeat: no-repeat; background-image: url(/dtjp/lib/images/common/sort_both.png); }
.dataTables_wrapper .sorting { padding: 7px 20px; background-position: right 5px center; background-repeat: no-repeat; background-image: url(/dtjp/lib/images/common/sort_both.png); }
.dataTables_wrapper .sorting.sorting_asc { background-image: url(/dtjp/lib/images/common/sort_asc.png);}
.dataTables_wrapper .sorting.sorting_desc { background-image: url(/dtjp/lib/images/common/sort_desc.png);}


/* ********************************************************************************* *
* 09) popup
* ********************************************************************************* */
[data-toggle="modal"] { cursor: pointer; }
.modal { top: 50%; left: 50%; width: 1000px; max-width: 100%; height: auto; max-height: 95vh; transform: translate(-50%, -50%) translate(-0.1px, -0.1px); opacity: 1 !important; z-index: 9001; }
.modal .modal-dialog { width: 1000px; max-width: 100%; max-height: 100%; margin: 0; transform: none !important; }
.modal_sm,
.modal_sm .modal-dialog { width: 740px; max-width: 100%; }
.modal_xsm .modal-dialog { width: 340px; max-width: 100%; }
#dialogModal,
#dialogModal .modal-dialog { width: 340px; max-width: 100%; }
#dialogModal .modal-dialog .modal-body{ text-align:center;font-size:20px;padding:40px 30px 30px;}
#dialogModal .modal-dialog .modal-footer{ padding: 0 30px 20px;height: 70px;}
.modal_lg,
.modal_lg .modal-dialog { width: 1300px; max-width: 100%; }
.modal.show.fade { opacity: 1 !important; }
.modal-in { z-index: 9005; }
.modal-backdrop ~ .modal-backdrop { z-index: 1051; }

.modal-header { position: relative; height: 77px; padding: 20px 30px; flex-shrink: 0; border-bottom: 0; }
.modal-header:after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: #ddd; }
.modal-in .modal-header:after { display: none; }
.modal .modal-header.line:after { display: block; }
.modal-header .modal-title { width: calc(100% - 35px); font-size: 24px; font-weight: 500; }
.modal-header .close { margin: 0; background: url(/dtjp/lib/images/common/btn_close_modal.png) center center no-repeat; opacity: 1; }
.modal-header-bg { background: #2e3574; }
.modal-header-bg .modal-title { color: #fff; }
.modal-header-bg .close { background: url(/dtjp/lib/images/common/btn_close_modal_white.png) center center no-repeat; }
.modal-content { border-radius: 7px; }
.modal-body { position: relative; padding: 30px; }
.modal-body > *:last-child { margin-bottom: 15px; }
.modal-fixed .modal-body { height: calc(95vh - 180px); }
.modal-dialog-scrollable .modal-body { max-height: calc(95vh - 180px); }
.modal-footer { height: 98px; padding: 10px 30px 30px; border-top: 0; flex-shrink: 0; }

.modal .form_option { margin-bottom: 10px; }
.modal .search_area { margin-bottom: 30px; }

.modal + .layer_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9000; }
.modal-in + .layer_bg { z-index: 9004; }
.modal-in ~ .modal-in + .layer_bg { z-index: 9005; }
.modal-in ~ .modal-in { z-index: 9006; }
.modal-in ~ .modal-in ~ .modal-in + .layer_bg { z-index: 9007; }
.modal-in ~ .modal-in ~ .modal-in { z-index: 9008; }
.modal-in ~ .modal-in ~ .modal-in ~ .modal-in + .layer_bg { z-index: 9009; }
.modal-in ~ .modal-in ~ .modal-in ~ .modal-in { z-index: 9010; }

.modal.modalZoom,
.modal.modalZoom .modal-dialog { width: 100%; }
.modal.modalZoom { max-height: calc(100vh - 20px); height: calc(100vh - 20px); width: calc(100% - 20px); border-radius:0 0 7px 7px; overflow: hidden; }
.modal.modalZoom .modal-fixed .modal-body { height: calc(100vh - 77px); }
.modal.modalZoom.footmodalZoom .modal-fixed .modal-body { height: calc(100vh - 175px); }
.modal.modalZoom .modal-dialog-scrollable .modal-body { max-height: calc(100vh - 77px); height: calc(100vh - 77px); }
.modal.modalZoom.footmodalZoom .modal-dialog-scrollable .modal-body { max-height: calc(100vh - 175px); height: calc(100vh - 175px); }

.modal .modal_zoom_btn { display: inline-block; background: #2e3574; padding: 0 17px; border-radius:5px; color: #fff; white-space: nowrap; margin-right: 39px; }
.modal .modal_zoom_btn span { display: block; padding: 8px 0; padding-left: 30px; background-repeat: no-repeat; background-position: left center; }
.modal .modal_zoom_btn.zoom_in span { background-image: url(/dtjp/lib/images/common/icon_zoom_in.png); }
.modal .modal_zoom_btn.zoom_out span { background-image: url(/dtjp/lib/images/common/icon_zoom_out.png); }

/* 영상 팝업 */
.video_modal .video_area { width: 100%; background: #333; }
.video_modal .video_area video { width: 100%; height: auto; }
.video_modal .video_info_area { padding: 20px 0 10px; font-size: 16px; color: #4d4d4d; }

/* 지도 팝업 */
.map_modal .map_area { width: 100%; height: 530px; background: #333; }
.map_modal .map_area .map { width: 100%; height: 100%; }

.popover { position: static; padding: 20px; border: 1px solid #d8d8d8; border-radius: 7px; }
.popover .popover-body { padding: 0; }
.popover .popover-body .img_box { display: flex; align-items: center; justify-content: center; height: 170px; background-color: #d2d2d2; }
.popover .popover-body .img_box2 { height: 90px; }
.popover .popover-body .img_box3 { height: 60px; }
.popover .popover-body .img_box img { max-width: 100%; max-height: 100%; min-width: 100%; }
.popover .card { padding: 0; border: 0; }
.popover .card-title { font-size: 15px; color: #999; }
.popover .card-title span { margin-right: 5px; font-size: 18px; font-weight: 600; }
.popover .card-body { padding: 15px 0 0; }
.popover .card-text { font-size: 16px; color: #4d4d4d; }
.popover .card-text em { font-weight: 600; color: #ccc; }


/* 등록 팝업 현장위치 */
.map_location {  }
.map_location.map_area { min-height: 200px; max-height: calc(100% - 39px); border: 1px solid #d2d2d2; }
.map_location.map_area .map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.map_location.map_area .btn_area { position: absolute; top: 10px; left: 10px; }


/* ********************************************************************************* *
* 10) style
* ********************************************************************************* */
/* 인트로 / 로그인 */
.intro_wrap { width: 100%; height: 100%; min-height: 100vh; text-align: right; color: #444; background: #3185db url(/dtjp/lib/images/page/bg_login.jpg) no-repeat center center; background-size: cover; }
.intro_wrap .inner { height: 100%; min-height: 100vh; padding: 46px 140px 50px 80px; }
.intro_wrap .logo { text-align: left; }
.intro_wrap .login_box { display: inline-block; width: 570px; padding: 35px 55px; text-align: left; border-radius: 30px; }
.intro_wrap .login_box h2 { font-size: 50px; }
.intro_wrap .login_box .form-label { margin-top: 25px; margin-bottom: 15px; font-size: 20px; }
.intro_wrap .login_box .form-control { height: 60px; }
.intro_wrap .login_box .checkbox { margin-top: 40px; }
.intro_wrap .login_box .btn { margin-top: 40px; padding: 19px 35px; font-size: 24px; }
.intro_wrap .footer { padding-top: 50px; padding-right: 40px; font-size: 15px; font-weight: 300; color: #aad4ff; }

/* 공통 메인 */
.main_wrap .inner { width: 100%; min-height: 0; padding: 20px 15px; }
.main_wrap > .inner:first-child{ min-height: calc(100vh - 90px); }
.main_wrap .inner > .row { margin-left: 0; margin-right: 0; }

.main_wrap .main_visual { width: 100%; height: 160px; overflow: hidden; }
.main_wrap .main_visual .mavin_visual_elm { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 160px; text-align: center; background-position: center top; background-repeat: no-repeat; background-size: 100%; }
.main_wrap .main_visual .main_visual_title { font-size: 30px; font-weight: 500; color: #fff; }
.main_wrap .main_visual .main_visual_text { margin-top: 10px; font-size: 16px; color: #ddd; line-height: 1.6; }

.main_wrap .card { margin-bottom: 17px; border: 1px solid #e5e5e5; border-radius: 15px; overflow: hidden; color: #444 !important; }
.main_wrap .card-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 30px 10px; background-color: #fff; border-bottom: 0; }
.main_wrap .card-header h2 { font-size: 21px; font-weight: 600; }
.main_wrap .card-header .sub_text { font-size: 16px; color: #444; }
.main_wrap .card-header .sub_text img { vertical-align: middle; margin-bottom: 3px; }
.main_wrap .card-body { height: 200px; padding: 0 30px 17px; }
.main_wrap .card_text { font-size: 15px; line-height: 1.6; color: #666; word-break: keep-all; letter-spacing: -1px; }
.main_wrap .table td { font-size: 15px; letter-spacing: -1px; }
.main_wrap .white_box { height: 100%;; }

.main_wrap .card_type1 h2 { position: relative; padding-left: 45px; }
.main_wrap .card_type1 h2:before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.main_wrap .card_type1 .card-body { height: 90px; }
.main_wrap .card_type1.main_card_digital .card-header h2:before { background: url(/dtjp/lib/images/page/icon_digital.png) no-repeat right bottom; }
.main_wrap .card_type1.main_card_maintenance .card-header h2:before { background: url(/dtjp/lib/images/page/icon_maintenance.png) no-repeat right bottom; }
.main_wrap .card_type1.main_card_annual .card-header h2:before { background: url(/dtjp/lib/images/page/icon_annual.png) no-repeat right bottom; }
.main_wrap .card_type1.main_card_vehicle .card-header h2:before { background: url(/dtjp/lib/images/page/icon_vehicle.png) no-repeat right bottom; }
.main_wrap .card_type1.main_card_work .card-header h2:before { background: url(/dtjp/lib/images/page/icon_work.png) no-repeat right bottom; }

.main_wrap .card_type2 h2 { position: relative; padding-left: 50px; }
.main_wrap .card_type2 h2:before { content: ''; position: absolute; left: 0; top: 50%; width: 35px; height: 26px; margin-top: -13px; background: url(/dtjp/lib/images/page/icon_monitor.png) no-repeat right bottom; }
.main_wrap .card_type2 .card-body { height: 90px; }
.main_wrap .card_type2 .card_text { color: rgba(255, 255, 255, 0.8); }
.main_wrap .card_type2.main_card_iot { background-color: #4563e2; }
.main_wrap .card_type2.main_card_emap { background-color: #323ea5; }
.main_wrap .card_type2.main_card_traffic { background-color: #6a43b7; }
.main_wrap .card_type2.main_card_iot .card-header { color: #fff; background-color: #4563e2; border-color: rgba(255, 255, 255, 0.2); }
.main_wrap .card_type2.main_card_emap .card-header { color: #fff; background-color: #323ea5; border-color: rgba(255, 255, 255, 0.2); }
.main_wrap .card_type2.main_card_traffic { margin-bottom: 0; }
.main_wrap .card_type2.main_card_traffic .card-header { color: #fff; background-color: #6a43b7; border-color: rgba(255, 255, 255, 0.2); }
.main_wrap .card_type2.main_card_traffic .card-header h2:before { width: 34px; height: 30px; background: url(/dtjp/lib/images/page/icon_play.png) no-repeat right bottom; }
/* .main_wrap .card_type2.main_card_iot .card-body { background: url(/dtjp/lib/images/page/btn_bg_iot.png) no-repeat right bottom; }
.main_wrap .card_type2.main_card_emap .card-body { background: url(/dtjp/lib/images/page/btn_bg_map.png) no-repeat right bottom; }
.main_wrap .card_type2.main_card_traffic .card-body { background: url(/dtjp/lib/images/page/btn_bg_traffic.png) no-repeat right bottom; } */
.main_wrap .card_type2.main_card1 { background-color: #323ea5; }
.main_wrap .card_type2.main_card1 .card-header { color: #fff; background-color: #323ea5; }
.main_wrap .card_type2.main_card1 .card-header h2:before { background: url(/dtjp/lib/images/page/icon_main_card1.png) no-repeat center / 100%; }
.main_wrap .card_type2.main_card2 { background-color: #3545d0; }
.main_wrap .card_type2.main_card2 .card-header { color: #fff; background-color: #3545d0; }
.main_wrap .card_type2.main_card2 .card-header h2:before { background: url(/dtjp/lib/images/page/icon_main_card2.png) no-repeat center / 100%; }
.main_wrap .card_type2.main_card3 { background-color: #3368d8; }
.main_wrap .card_type2.main_card3 .card-header { color: #fff; background-color: #3368d8; }
.main_wrap .card_type2.main_card3 .card-header h2:before { background: url(/dtjp/lib/images/page/icon_main_card3.png) no-repeat center / 100%; }
.main_wrap .card_type2.main_card4 { background-color: #22577e; }
.main_wrap .card_type2.main_card4 .card-header { color: #fff; background-color: #22577e; }
.main_wrap .card_type2.main_card4 .card-header h2:before { background: url(/dtjp/lib/images/page/icon_main_card4.png) no-repeat center / 100%; }
.main_wrap .card_type2.main_card5 { background-color: #0093ab; }
.main_wrap .card_type2.main_card5 .card-header { color: #fff; background-color: #0093ab; }
.main_wrap .card_type2.main_card5 .card-header h2:before { background: url(/dtjp/lib/images/page/icon_main_card5.png) no-repeat center / 100%; }
.main_wrap .card_type2 .btn_area { display: flex; margin: 5px -5px 0; }
.main_wrap .card_type2 .btn_area .btn { display: block; width: 100%; margin: 0 5px; padding: 3px 5px; text-align: center; font-size: 13px; color: #fff; background-color: #3bb3c7; border-radius: 50px; }

.main_wrap .chart { max-width: 100%; margin: 0 auto; }
.main_wrap #dispatchChart { background: url(/dtjp/lib/images/page/img_ex.png) no-repeat center bottom; }

.main_wrap .count_state_wrap .col { }
.main_wrap .count_state_wrap p { font-size: 18px; color: #555; text-align: center; }
.main_wrap .count_state_wrap .count_number { font-size: 46px; font-weight: 600; color: #333; }
.main_wrap .count_state_wrap .count_number .count_state { display: inline-block; vertical-align: middle; padding-right: 20px; font-size: 16px; font-weight: 500; background-repeat: no-repeat; background-position: right center; }
.main_wrap .count_state_wrap .count_increase .count_state { color: #4c84ff; background-image: url(/dtjp/lib/images/common/icon_increase.png); } /* 상승 */
.main_wrap .count_state_wrap .count_degradation .count_state { color: #ff4c50; background-image: url(/dtjp/lib/images/common/icon_degradation.png); } /* 하락 */
.main_wrap .count_state_wrap .count_freezing .count_state { color: #999; background-image: url(/dtjp/lib/images/common/icon_freezing.png); } /* 동결 */

.main_wrap .iot_table .iot_table_thead { display: flex; align-items: center; height: 45px; margin-bottom: 10px; border-radius: 7px; background: #627190; }
.main_wrap .iot_table .iot_table_thead > .column { width: 100%; font-size: 15px; color: #fff; text-align: center; }
.main_wrap .iot_table .iot_table_thead > .column span { display: block; font-size: 13px; }
.main_wrap .iot_table .iot_table_thead > .column:first-child { width: 200px; flex-shrink: 0; }
.main_wrap .iot_table .iot_table_body { display: flex; height: 125px; }
.main_wrap .iot_table .iot_table_body > .column { display: flex; flex-direction: column; justify-content: space-between; width: 100%; margin-right: 10px; font-size: 15px; font-weight: 500; color: #4d4d4d; text-align: center; border-radius: 7px; background-color: #e9eaec; }
.main_wrap .iot_table .iot_table_body .col_normal { font-size: 16px; font-weight: 600; color: #4c84ff; background-color: #eef6ff; }
.main_wrap .iot_table .iot_table_body .col_attentionl { font-size: 16px; font-weight: 600; background-color: #fffae3; }
.main_wrap .iot_table .iot_table_body .col_warning { font-size: 16px; font-weight: 600; background-color: #fde7d4; }
.main_wrap .iot_table .iot_table_body .col_danger { font-size: 16px; font-weight: 600; color: #fb5360; background-color: #fdd4d4; }
.main_wrap .iot_table .iot_table_body > .column span { display: block; font-size: 15px; color: #666; }
.main_wrap .iot_table .iot_table_body > .column:last-child { margin-right: 0; }
.main_wrap .iot_table .iot_table_body > .column:first-child { width: 200px; flex-shrink: 0; }
.main_wrap .iot_table .iot_table_body > .column .column { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; font-size: 14px; }

.main_slider { position: relative; display: block; width: calc(100% - 30px); margin: 0 auto; padding-bottom: 35px; overflow: hidden; }
.main_slider .swiper-wrapper { width: 100%; }
.main_slider .swiper-pagination { top: auto; bottom: 10px; left: 40px; right: 40px; width: calc(100% - 80px); }
.main_slider .swiper-pagination-progressbar { background-color: #ddd; }
.main_slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #333; }
.main_slider .swiper-button-next { right: 0; top: auto; bottom: 0; width: 30px; height: 22px; margin: 0; background-image: url(/dtjp/lib/images/common/swiper_next.png); background-size: auto 100%; }
.main_slider .swiper-button-prev { left: 0; top: auto; bottom: 0; width: 30px; height: 22px; margin: 0; background-image: url(/dtjp/lib/images/common/swiper_prev.png); background-size: auto 100%; }

.main_board_area { display: flex; height: 50px; background-color: #0a0f1e;}
.main_board_area .main_noti { display: flex; align-items: center; flex: 1; padding: 0 30px; background-color: #0a0f1e; }
.main_board_area .main_noti_title { flex-shrink: 0; position: relative; width: 103px; padding-right: 30px; font-size: 20px; color: #ddd; font-weight: 600; text-align: center; line-height: 1; border-right: 1px solid #3b3f4b; }
.main_board_area .main_noti_cont { width: calc(100% - 103px - 0.1px); }
.main_board_area .main_noti_cont .noti_slide { width: 100%; height: 55px; overflow: hidden; }
.main_board_area .main_noti_cont .noti_slide_text { display: block; width: 100%; height: 50px; padding: 0 30px; line-height: 50px; font-size: 18px; color: #ddd; white-space: nowrap;  text-overflow: ellipsis; overflow: hidden; cursor: pointer; }
.main_board_area .main_help { width: 300px; height: 50px; padding: 0 30px; background-color: #535353; }
.main_board_area .main_help .btn_help { display: block; height: 50px; padding: 0 55px 0 45px; line-height: 50px; font-size: 20px; color: #ddd; font-weight: 600; background: url(/dtjp/lib/images/page/icon_help.png) no-repeat left center, url(/dtjp/lib/images/page/icon_arr.png) no-repeat right center; }
.main_board_area .main_promote { width: 300px; height: 50px; padding: 0 30px; background-color: #373844; }
.main_board_area .main_promote .btn_promote { display: block; height: 50px; padding: 0 55px 0 45px; line-height: 50px; font-size: 20px; color: #ddd; font-weight: 600; background: url(/dtjp/lib/images/page/icon_play2.png) no-repeat left center, url(/dtjp/lib/images/page/icon_arr.png) no-repeat right center; }
.main_board_area .main_manage { width: 340px; height: 50px; padding: 0 30px; background-color:#353860; }

.main_board_area .main_intMngDashboard { width: 340px; height: 50px; padding: 0 30px; background-color:#4E4F6E; }
.main_board_area .main_intMngDashboard .btn_promote {position:relative;display: block; height: 50px; padding: 0 55px 0 45px; line-height: 50px; font-size: 20px; color: #ddd; font-weight: 600; background: url(/dtjp/lib/images/menu/icon_menu00_005_on.png?v=2) no-repeat left center; }
.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_01{position:absolute;top:0;right:20px;width:50px; height:50px;overflow:hidden;text-indent:-1000px;background: url(/dtjp/lib/images/page/icon_digital_01.png) no-repeat center center;opacity:0.5;background-size:33px auto;transition:.7s;}
.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_02{position:absolute;top:0;right:-20px;width:50px; height:50px;overflow:hidden;text-indent:-1000px;background: url(/dtjp/lib/images/page/icon_digital_02.png) no-repeat center center;opacity:0.5;background-size:33px auto;transition:.7s;}
.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_01:hover{background: url(/dtjp/lib/images/page/icon_digital_01.png) no-repeat center center;opacity:1;}
.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_02:hover{background: url(/dtjp/lib/images/page/icon_digital_02.png) no-repeat center center;opacity:1;}

.main_board_area .main_manage .btn_promote {position:relative;display: block; height: 50px; padding: 0 55px 0 45px; line-height: 50px; font-size: 20px; color: #ddd; font-weight: 600; background: url(/dtjp/lib/images/menu/icon_menu00_005_on.png?v=2) no-repeat left center; }
.main_board_area .main_manage .btn_promote  .managelink_icon_01{position:absolute;top:0;right:20px;width:50px; height:50px;overflow:hidden;text-indent:-1000px;background: url(/dtjp/lib/images/page/icon_digital_01.png) no-repeat center center;opacity:0.5;background-size:33px auto;transition:.7s;}
.main_board_area .main_manage .btn_promote  .managelink_icon_02{position:absolute;top:0;right:-20px;width:50px; height:50px;overflow:hidden;text-indent:-1000px;background: url(/dtjp/lib/images/page/icon_digital_02.png) no-repeat center center;opacity:0.5;background-size:33px auto;transition:.7s;}
.main_board_area .main_manage .btn_promote  .managelink_icon_01:hover{background: url(/dtjp/lib/images/page/icon_digital_01.png) no-repeat center center;opacity:1;}
.main_board_area .main_manage .btn_promote  .managelink_icon_02:hover{background: url(/dtjp/lib/images/page/icon_digital_02.png) no-repeat center center;opacity:1;}

.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_01 a,
.main_board_area .main_intMngDashboard .btn_promote  .managelink_icon_02 a,
.main_board_area .main_manage .btn_promote  .managelink_icon_01 a,
.main_board_area .main_manage .btn_promote  .managelink_icon_02 a{width:100%;height:50px;display:block;}

.main_wrap .main_card_wrap { display: flex; width: 100%; }
.main_wrap .main_card_wrap > .card { width: calc((100% - (30px * 4)) / 5); margin-right: 30px; }
.main_wrap .main_card_wrap > .card:last-child { margin-right: 0; }
.main_wrap .main_chart_wrap { display: flex; width: 100%; }
.main_wrap .main_chart_wrap > .card { width: calc((100% - (30px * 2)) / 3); margin-right: 30px; margin-bottom: 0; }
.main_wrap .main_chart_wrap > .card:last-child { margin-right: 0; }
.main_wrap .main_btn_wrap { position: relative; display: flex; width: 100%; }
.main_wrap .main_btn_wrap > .card { width: calc((100% - (30px * 4)) / 5); margin-right: 30px; }
.main_wrap .main_btn_wrap > .card:last-child { margin-right: 0; }
.main_wrap .main_btn_wrap .main_btn_title { position: absolute; bottom: calc(100% + 30px); left: 0; display: flex; align-items: center; justify-content: space-between; width: calc(100% + 15px); padding: 30px 60px 10px; background-color: #eff1f6; border-radius: 15px 0 0 0; }
.main_wrap .main_btn_wrap .main_btn_title span { font-size: 24px; font-weight: 600; color: #333; }
.main_wrap .main_btn_wrap .main_btn_title span.point_color1 { font-size: 50px; }


.main_chart_wrap { position: relative; display: block; width: calc(100% - 30px); margin: 0 auto; padding-bottom: 10px; overflow: hidden; }
.main_chart_wrap .card-header { padding: 15px 30px 10px; }
.main_chart_wrap .card-header h2 { font-size: 19px; }
.main_chart_wrap .card-body { height: 195px; }
.main_chart_wrap .swiper-wrapper { width: 100%; }
.main_chart_wrap .swiper-pagination { top: auto; bottom: 7px; left: 30px; right: 30px; width: calc(100% - 80px); height: 3px; }
.main_chart_wrap .swiper-pagination-progressbar { background-color: #ddd; }
.main_chart_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #333; }
.main_chart_wrap .swiper-button-next { right: 0; top: auto; bottom: 0; width: 16px; height: 16px; margin: 0; background-image: url(/dtjp/lib/images/common/swiper_next.png); background-size: auto 100%; }
.main_chart_wrap .swiper-button-prev { left: 0; top: auto; bottom: 0; width: 16px; height: 16px; margin: 0; background-image: url(/dtjp/lib/images/common/swiper_prev.png); background-size: auto 100%; }


.modal .video_list { width: calc(100% + 7px); margin-right: -7px; padding-bottom: 10px; }
.modal .video_list.scrollbar-inner { overflow-x: auto; }
.modal .video_list .row { margin: 0 0 0 -7px; }
.modal .video_list li { width: 25%; margin-bottom: 20px; padding: 0 7px; }
.modal .video_list li:nth-child(-n+4) { margin-top: 0; }
.modal .video_list-5 li { width: 20%; }
.modal .video_list .row_2 li { width: 50%; margin-bottom: 0; }
.modal .video_list li .img_box { display: flex; justify-content: center; align-items: center; flex-shrink: 0; height: 185px; overflow: hidden; background-color: #ddd; }
.modal .video_list li .img_box img { width: 100%; max-height: 100%; border-radius: 0; }
.modal .video_list li .video_box { position: relative; }
.modal .video_list li .video_box:after { content: ''; position: absolute; bottom: 15px; right: 15px; width: 28px; height: 28px; background-image: url(/dtjp/lib/images/common/icon_video.png); }
.modal .video_list li .text_title { margin-top: 5px; font-size: 18px; font-weight: 500; color: #333; }
.modal .video_list li .text { padding: 0; font-size: 15px; color: #4d4d4d; }

.modal .facility_list_area { display: flex; flex-direction: column; width: 200px; min-height: 300px; }
.modal .facility_list_area .facility_list_title { width: 200px; padding: 20px 30px; font-size: 18px; font-weight: 500; color: #fff; word-break: keep-all; background-color: #3185db; }
.modal .facility_list_area .facility_list_check { padding: 10px 30px 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.modal .facility_list_area .facility_list { flex: 1; height: 100%; padding: 30px 0; /* overflow-x: auto; */ border-right: 1px solid #ddd; }
.modal .facility_list_area .facility_depth1 > li { margin-bottom: 17px; }
.modal .facility_list_area .facility_depth1 > li > a,
.modal .facility_list_area .facility_depth1 > li > span { display: block; padding-left: 55px; padding-bottom: 15px; font-size: 16px; color: #4d4d4d; line-height: 1.5; background-image: url(/dtjp/lib/images/common/icon_plus_blue.png); background-position: left 20px top 1px; background-repeat: no-repeat; cursor: pointer; transition: background-image 0.15s; }
.modal .facility_list_area .facility_depth2 { display: none; padding: 5px 0; background-color: #f6f8fc; border-radius: 5px; }
.modal .facility_list_area .facility_depth2 > ul > li > a,
.modal .facility_list_area .facility_depth2 > ul > li > span { position: relative; display: block; padding: 12px 20px 12px 45px; line-height: 1.3; font-size: 15px; cursor: pointer; }
.modal .facility_list_area .facility_depth2 > ul > li > a:before,
.modal .facility_list_area .facility_depth2 > ul > li > span:before { content: ''; position: absolute; top: 17px; left: 28px; width: 7px; height: 7px; background: url(/dtjp/lib/images/common/bul_arr.png) no-repeat center center; }
.modal .facility_list_area .facility_depth3 > li > a,
.modal .facility_list_area .facility_depth3 > li > span { position: relative; display: block; padding: 10px 0 10px 60px; line-height: 1.3; color: #4d4d4d; font-size: 15px; cursor: pointer; }
.modal .facility_list_area .facility_depth3 > li:first-child > a,
.modal .facility_list_area .facility_depth3 > li:first-child > span { padding-top: 0; }
.modal .facility_list_area .facility_depth3 > li > a:before,
.modal .facility_list_area .facility_depth3 > li > span:before { content: ''; position: absolute; top: 15px; left: 44px; width: 7px; height: 7px; background: url(/dtjp/lib/images/common/bul_arr.png) no-repeat center center; }
.modal .facility_list_area .facility_depth3 > li:first-child > a:before,
.modal .facility_list_area .facility_depth3 > li:first-child > span:before { top: 6px; }
.modal .facility_list_area .facility_depth4 { padding: 0 10px; }
.modal .facility_list_area .facility_depth4 > li > a,
.modal .facility_list_area .facility_depth4 > li > span { position: relative; display: inline-block; padding: 3px 0; margin: 4px 0; margin-left: 65px; line-height: 1.3; font-size: 15px; border-bottom: 1px solid transparent; cursor: pointer; }
.modal .facility_list_area .facility_depth4 > li:first-child > a,
.modal .facility_list_area .facility_depth4 > li:first-child > span { padding-top: 0; }
.modal .facility_list_area .facility_depth4 > li > a:before,
.modal .facility_list_area .facility_depth4 > li > span:before { content: ''; position: absolute; top: 14px; left: -12px; width: 3px; height: 3px; background-color: #666; }
.modal .facility_list_area .facility_depth4 > li:first-child > a:before,
.modal .facility_list_area .facility_depth4 > li:first-child > span:before { top: 8px; }

.modal .facility_list_area .facility_depth1 > li:hover > a,
.modal .facility_list_area .facility_depth1 > li:hover > span { color: #4d4d4d; font-weight: 600; }
.modal .facility_list_area .facility_depth1 > li.active > a,
.modal .facility_list_area .facility_depth1 > li.active > span { color: #4d4d4d; font-weight: 600; background-image: url(/dtjp/lib/images/common/icon_minus_blue.png); }
.modal .facility_list_area .facility_depth2 > ul > li.active > a,
.modal .facility_list_area .facility_depth2 > ul > li:hover > a,
.modal .facility_list_area .facility_depth2 > ul > li.active > span,
.modal .facility_list_area .facility_depth2 > ul > li:hover > span { color: #3185db; font-weight: 600; }
.modal .facility_list_area .facility_depth2 > ul > li.active > a:before,
.modal .facility_list_area .facility_depth2 > ul > li.active > span:before { background: url(/dtjp/lib/images/common/bul_arr_blue.png) no-repeat center center; }
.modal .facility_list_area .facility_depth3 > li.active > a,
.modal .facility_list_area .facility_depth3 > li:hover > a,
.modal .facility_list_area .facility_depth3 > li.active > span,
.modal .facility_list_area .facility_depth3 > li:hover > span { color: #3185db; font-weight: 600; }
.modal .facility_list_area .facility_depth3 > li.active > a:before,
.modal .facility_list_area .facility_depth3 > li.active > span:before { background: url(/dtjp/lib/images/common/bul_arr_blue.png) no-repeat center center; }
.modal .facility_list_area .facility_depth4 > li.active > a,
.modal .facility_list_area .facility_depth4 > li:hover > a,
.modal .facility_list_area .facility_depth4 > li.active > span,
.modal .facility_list_area .facility_depth4 > li:hover > span { color: #3185db; font-weight: 600; border-bottom: 1px solid #3185db; }
.modal .facility_list_area .facility_depth4 > li.active > a:before,
.modal .facility_list_area .facility_depth4 > li:hover > span:before { background-color: #3185db; }

.modal .facility_info_area { width: calc(100% - 200px); padding: 30px; }
.modal .facility_info_scrollbar { max-height: 273px; }

.modal .video_list li .text_box { position: relative; padding-right: 40px; }
.modal .video_list li .text_box .btn_icon_round { position: absolute; top: 0; right: 0; }
.modal .btn_icon_round { width: 30px; height: 30px; background-size: 17px !important; }

.nodata { padding: 100px 0; text-align: center; font-size: 18px; color: #777; }
.nodata img { margin-bottom: 50px; }


@keyframes loading-spin {
    0% { opacity: 1; backface-visibility: hidden; transform: translateZ(0) scale(1.5,1.5); }
    100% {  opacity: 0; backface-visibility: hidden; transform: translateZ(0) scale(1,1); }
}
.loading { position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9100; }
.loading .loading-spin div > div { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #3185db; animation: loading-spin 1s linear infinite; }
.loading .loading-spin div:nth-child(1) > div { left: 148px; top: 88px; animation-delay: -0.875s; }
.loading .loading-spin > div:nth-child(1) { transform: rotate(0deg); transform-origin: 160px 100px; }
.loading .loading-spin div:nth-child(2) > div { left: 130px; top: 130px; animation-delay: -0.75s; }
.loading .loading-spin > div:nth-child(2) { transform: rotate(45deg); transform-origin: 142px 142px; }
.loading .loading-spin div:nth-child(3) > div { left: 88px; top: 148px; animation-delay: -0.625s; }
.loading .loading-spin > div:nth-child(3) { transform: rotate(90deg); transform-origin: 100px 160px; }
.loading .loading-spin div:nth-child(4) > div { left: 46px; top: 130px; animation-delay: -0.5s; }
.loading .loading-spin > div:nth-child(4) { transform: rotate(135deg); transform-origin: 58px 142px; }
.loading .loading-spin div:nth-child(5) > div { left: 28px; top: 88px; animation-delay: -0.375s; }
.loading .loading-spin > div:nth-child(5) { transform: rotate(180deg); transform-origin: 40px 100px; }
.loading .loading-spin div:nth-child(6) > div { left: 46px; top: 46px; animation-delay: -0.25s; }
.loading .loading-spin > div:nth-child(6) { transform: rotate(225deg); transform-origin: 58px 58px; }
.loading .loading-spin div:nth-child(7) > div { left: 88px; top: 28px; animation-delay: -0.125s; }
.loading .loading-spin > div:nth-child(7) { transform: rotate(270deg); transform-origin: 100px 40px; }
.loading .loading-spin div:nth-child(8) > div { left: 130px; top: 46px; animation-delay: 0s; }
.loading .loading-spin > div:nth-child(8) { transform: rotate(315deg); transform-origin: 142px 58px; }
.loading .loading-spinner { width: 200px; height: 200px; display: inline-block; overflow: hidden; background: none; }
.loading .loading-spin { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; }
.loading .loading-spin div { box-sizing: content-box; }

.file_modul_area { height: 100%; }
.file_modul_view { position: relative; }
.file_modul_view .btn_area { position: absolute; top: 10px; right: 10px; }
.file_modul_view .btn_area .btn { margin-top: 0; margin-left: 5px; }
.file_modul_view img { width: 100%; }

.thumb_slide { position: relative; width: 100%; padding: 20px 45px; border: 1px solid #ddd; overflow: hidden; }
.thumb_slide .item { width: 100%; }
.thumb_slide .thumb_area { display: flex; align-items: center; justify-content: center; position: relative; height: 140px; text-align: center; border: 1px solid #2a3748; background-color: #f6f6f6; overflow: hidden; }
.thumb_slide .thumb_area img { display: inline-block; width: auto; width: 100%; height: auto; }
.thumb_slide .thumb_area .label_num { position: absolute; top: 5px; left: 5px; width: 23px; height: 23px; text-align: center; line-height: 23px; font-size: 13px; color: #fff; border-radius: 100%; background-color: #3185db; }
.thumb_slide .text_area { margin-top: 15px; font-size: 15px; }
.thumb_slide .swiper-button-next,
.thumb_slide .swiper-button-prev { position: absolute; top: 0; width: 25px; height: 100%; opacity: 1; border: 0; margin: 0; }
.thumb_slide .swiper-button-prev { left: 0; border-right: 1px solid #ddd; background: #f6f6f6 url(/dtjp/lib/images/common/carousel_prev.png) no-repeat center; }
.thumb_slide .swiper-button-next { right: 0; border-left: 1px solid #ddd; background: #f6f6f6 url(/dtjp/lib/images/common/carousel_next.png) no-repeat center; }
.thumb_slide .item_add_box { height: 90px; margin-top: 10px; padding: 10px 10px 0; text-align: center; background-color: #edf6ff; border: 1px solid #c3e1ff; }


/* 시설물 목록 */
.map_list_area .work_list_type1 { max-height: 600px; overflow-y: auto; }
.work_list_type1 .col-12 { margin-bottom: 10px; padding: 0; }
.work_list_type1 .card { border: 1px solid #d2d2d2; border-radius: 5px; overflow: hidden; }
.work_list_type1 .card a { display: flex; width: 100%; min-height: 100px; color: #333; }
.work_list_type1 .card .card-icon-area { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; font-size: 16px; border-radius: 5px 0 0 5px; }
.work_list_type1 .card-icon { display: inline-block; width: 40px; height: 40px; margin-bottom: 5px; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.work_list_type1 .card-icon1 { background-color: #fae9e9; }
.work_list_type1 .card-icon1 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work01.png); }
.work_list_type1 .card-icon2 { background-color: #fef0e0; }
.work_list_type1 .card-icon2 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work02.png); }
.work_list_type1 .card-icon3 { background-color: #fbf6dc; }
.work_list_type1 .card-icon3 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work03.png); }
.work_list_type1 .card-icon4 { background-color: #e9faf6; }
.work_list_type1 .card-icon4 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work04.png); }
.work_list_type1 .card-icon5 { background-color: #e9f5fa; }
.work_list_type1 .card-icon5 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work05.png); }
.work_list_type1 .card-icon6 { background-color: #e9edfa; }
.work_list_type1 .card-icon6 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work06.png); }
.work_list_type1 .card-icon7 { background-color: #f6e9fa; }
.work_list_type1 .card-icon7 .card-icon { background-image: url(/dtjp/lib/images/common/icon_work07.png); }
.work_list_type1 .card-icon8 { background-color: #e2dce7; }
.work_list_type1 .card-icon8 .card-icon { background-image: url(/dtjp/lib/images/mobile/icon_work08.png); }
.work_list_type1 .card-body { display: flex; flex-direction: column; justify-content: center; padding: 10px 15px; }
.work_list_type1 .card-text { display: block; color: #4d4d4d; line-height: 1.5; word-break: keep-all; }
.work_list_type1 .card-text dt { width: auto; font-size: 15px; margin-bottom: 5px; color: #222; font-weight: 600; }
.work_list_type1 .card-text dt:after { display: none; }
.work_list_type1 .card-text dd { padding-left: 0; font-size: 16px; }


/* 홍보 */
.promotion_area { width: 800px; margin: 0 auto; }
.promotion_area .prm_video_box { width: 100%; height: 450px; background: #000; }
.promotion_area .prm_video_box .prm_video { width: 100%; height: 450px; }
.promotion_area .prm_list { margin-top: 20px; }
.promotion_area .prm_list ul { display: flex; flex-wrap: wrap; width: 100%; }
.promotion_area .prm_list ul li { width: calc((100% - (25px * 2)) / 3 - 0.1px); margin-right: 25px; margin-bottom: 20px; }
.promotion_area .prm_list ul li:nth-child(3n+3) { margin-right: 0; }
.promotion_area .prm_list .img_area { display: flex; align-items: center; justify-content: center; background-color: #c9c9c9; }
.promotion_area .prm_list .img_area img { width: auto; max-width: auto; height: auto; max-height: 100%; }
.promotion_area .prm_list .text_area { display: block; padding: 0 20px; border: 1px solid #e0e0e0; background-color: #fff; transition: border-color 0.15s, background-color 0.15s; }
.promotion_area .prm_list .text_area .tag_area { display: block; padding: 20px 0 0; }
.promotion_area .prm_list .text_area .text_top { padding: 0 0 20px; border-bottom: 1px solid #e0e0e0; }
.promotion_area .prm_list .text_area .prm_label { display: inline-block; height: 25px; line-height: 23px; padding: 0 8px; font-size: 14px; color: #fff; background-color: #ddd; border: 1px solid #ddd; border-radius: 3px; transition: background-color 0.15s, color 0.15s; }
.promotion_area .prm_list .text_area .prm_label.prm_label_vd { background-color: #3185db; border-color: #3185db; }
.promotion_area .prm_list .text_area .prm_label.prm_label_cd { background-color: #6a43b6; border-color: #6a43b6; }
.promotion_area .prm_list .text_area .prm_title { height: 54px; margin-top: 5px; font-size: 18px; line-height: 1.5; font-weight: 500; overflow: hidden; transition: color 0.15s; }
.promotion_area .prm_list .text_area .prm_date { display: block; padding: 15px 0 15px 25px; font-size: 16px; color: #777; background: url(/dtjp/lib/images/common/icon_datepicker_gr.png) no-repeat left center / 19px; transition: background-image 0.15s, color 0.15s; }
.promotion_area .prm_list li:hover .text_area { border-color: #3185db; background-color: #3185db; }
.promotion_area .prm_list li:hover .text_area .prm_label.prm_label_vd { border-color: #fff; background-color: #3185db; }
.promotion_area .prm_list li:hover .text_area .prm_label.prm_label_cd { border-color: #fff; background-color: #3185db; }
.promotion_area .prm_list .text_area .prm_label.prm_label_dw { background-color: #777; border-color: #777; }
.promotion_area .prm_list li:hover .prm_title { display: block; color: #fff; }
.promotion_area .prm_list li:hover .prm_date { display: block; color: #fff; background: url(/dtjp/lib/images/common/icon_datepicker_wh.png) no-repeat left center / 19px; }

.promotion_area .btn_prom { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 50px; line-height: 50px; border: 1px solid #000; border-radius: 50px; background-color: #fff; }
.promotion_area .btn_prom span { display: inline-block; padding-right: 35px; font-size: 18px; color: #333; background: url(/dtjp/lib/images/common/arr_down.png) no-repeat right center / 14px; }
.promotion_area .btn_prom.active span { background: url(/dtjp/lib/images/common/arr_up.png) no-repeat right center / 14px; }


.report_area { font-size: 16px; letter-spacing: 1px; }
.report_area .report_title1 { margin-bottom: 80px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: 10px; }
.report_area .report_title1 span { display: inline-block; text-decoration: underline; }
.report_area .report_title2 { margin-top: 20px; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: 10px; }
.report_area .report_info { display: flex; margin-top: 25px; font-size:18px;}
.report_area .report_info dt { position: relative; width: 120px; height: 21px; padding-left: 15px; text-align: justify; }
.report_area .report_info dt:before { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border: 1px solid #000; border-radius: 100%; }
.report_area .report_info dt:after { content: ''; display: inline-block; width: 100%; height: 0; }
.report_area .report_info dd { width: calc(100% - 120px - 0.1px); padding-left: 10px; }
.report_area .report_table { margin-top: 25px; border: 1px solid #000; margin-bottom:30px; }
.report_area .report_table th,
.report_area .report_table td { padding: 10px; text-align: center; border: 1px solid #000; word-break: keep-all; }
.report_area .report_table th { height: 50px; }
.report_area .report_table thead th { font-weight: 600; }
.report_area .report_table td { height: 100px; }


/* 작업완료팝업 */
.work_map_area { min-height: 354px; height: 354px; border: 1px solid #ddd; }
.work_option { padding-right: 21px; }
.work_thumb_slide { height: 317px; }
.work_thumb_slide .thumb_area { height: 200px; }


/* 전자지도 시설물 위치 검색 */
.map_btn_area { position: absolute; left: 70px;}
.map_btn_area.top { top: 10px; display: none;}
.map_btn_area.top.active {display: block; }
.map_btn_area .btn_map { display: block; width: 50px; height: 50px; font-size: 0; background-color: #fff; background-repeat: no-repeat; background-size: 60%; background-position: center; border: 1px solid #ddd; border-radius: 5px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); transition: background-color 0.15s, background-images 0.15s, border 0.15s, box-shadow 0.15s; }
.map_btn_area .btn_map:hover { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); }
.map_btn_area .btn_map.active { background-color: #2b3386; }
.map_btn_area .btn_map2 { border-radius: 5px; }
.map_btn_area .btn_map2.active { background-color: #3185db; border-color: #3185db; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); }
.map_btn_area .btn_map_layer { background-image: url(/dtjp/lib/images/common/btn_map_off2.png); }
.map_btn_area .btn_map_layer.active { background-image: url(/dtjp/lib/images/common/btn_map_on2.png); border-color: #3185db; }

.map_option { width: 600px; height: 100%; border-right: 1px solid #dadada; box-shadow: 0 0 3px 0 rgba(0,0,0,0.1); background-color: #fff; }
/* shin 상황판 레이어 on off 생상 통일 */
.map_option_title { position: relative; width: 100%; padding: 5px; line-height: 1.5; color: #fff; background-color: #3185db; border-bottom: 1px solid #ddd; }
.map_option_cont { display: none; max-height: calc(28vh - 54px); padding: 0; overflow-y: auto; overflow-x: hidden; }
.map_option_title.active { font-weight: 500; color: #fff; background-color: #3185db; border-bottom: 0; }
.map_option_title.active + .map_option_cont {display: block;overflow-y: auto;padding: 0 7px;}

.map_option .form-group { padding: 2px 0px; }
.map_option .form-check { display: inline-block; margin-bottom: 0; }
.map_option .form-check-title { position: relative; width: 25% !important; padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; height: 35px; border: 1px solid #ddd; border-top: 0; background: #fff !important; border-right: 0; }
.map_option .form-check-title:last-child { border-right: 1px solid #ddd; }
.map_option .depth-in { display: flex; cursor: pointer;background-color: #fff !important; }
.map_option .depth-in:first-child { margin-top: 7px; border-top: 1px solid #000; }
.map_option .depth-in:first-child .form-check-title { background: #f6f6f6 !important; justify-content: center; }
.map_option .depth-in:last-child { margin-bottom: 7px; }
.map_option .depth-in:hover { cursor: pointer; background-color: aliceblue;}
.map_option .depth-in:hover > .form-check-title { cursor: pointer; background-color: aliceblue;}
.map_option .form-check-cont { padding: 0.5208vw 0; font-size: 0.8333vw; }
.map_option .form_group_depth1 li:not(.depth-in) .form-check-title { width: 100% !important; justify-content: center; font-size: 16px; padding: 30px 0; border: 0 !important; }
.map_option .form_group_depth2 { display: none; margin: 0; padding: 0; background-color: #f6f6f6; }
.map_option .form_group_depth2 .form-check-title { padding-left: 2.6032vw; background-color: #f6f6f6; }
.map_option .form_group_depth2 .form-check-title.active { background-color: #efefef; }
.map_option .form_group_depth2 .form-check-cont { padding: 0.5208vw 0.5208vw 0.5208vw 2.6032vw; }
.map_option .form_group_depth3 { display: none; padding-bottom: 0.5208vw; background-color: #efefef; }
.map_option .form_group_depth3 .form-check-cont { padding: 0.5208vw 0.5208vw 0.5208vw 4.2032vw; }
.map_option .map_option_item:last-child .form_group_depth1 { padding-bottom: 0; }
.map_option .map_option_item:last-child li:last-child .form_group_depth2:last-child { margin-bottom: 0; }
.map_option .form-check-title.active + .form_group_depth2 { display: block; }
.map_option .form-check-title.active + .form_group_depth3 { display: block; }
.map_option .form-check-title .caption { color: #212529; font-size: 17px; font-weight: 700; }
.map_option .form-check-title .form-check-label {font-size: 14px;}

.map_view_area .map_layer { display: none; -ms-user-select: none; user-select: none; }
.map_view_area .map_layer.active { display: block; }
.map_view_area .map_option { position: absolute; top: 10px; left: 140px; height: auto; max-height: 28vh; overflow: hidden; border: 1px solid #dadada; box-shadow: none; z-index: 10; }
.map_view_area .map_option .map_option_title { color: #212529 !important; background-color: #f3f5fa !important; }
.map_view_area .map_option .map_option_title.depth-in.active:after { background: url(/dtjp/lib/images/dashboard/icon_arr.png) no-repeat center / 100%; transform: rotate(180deg); }
/* -- 전자지도 시설물 위치 검색 */




/* 2022.08 */

/* 포장외관망도 */
.search_fast_area { position: relative; width: 100%; }
.search_fast_area .btn_search_fast { position: absolute; top: -40px; right: 0; }
.search_fast_area .search_fast { position: relative; display: none; }
.search_fast_area .search_fast.active { display: block; }
.search_fast_area .search_fast .btn_milestone { position: absolute; top: -57px; right: 0; padding: 8.5px 23px; }

.search_fast_area .fast_road_area { width: 100%; overflow: hidden; text-align: center; }
.search_fast_area .fast_road_area .swiper-slide { width: max-content; margin-right: 1px; }
.search_fast_area .fast_road_area .icon_road { display: inline-block; vertical-align: middle; width: 33px; height: 33px; font-size: 0; border-radius: 100%; }
.search_fast_area .fast_road_area .icon_road.icon_ic { width: 40px; height: 40px; background: url(/dtjp/lib/images/common/icon_ic.png) }
.search_fast_area .fast_road_area .icon_road.icon_jc { width: 40px; height: 40px; background: url(/dtjp/lib/images/common/icon_jc.png) }
.search_fast_area .fast_road_area .icon_road.icon_bridge { background: url(/dtjp/lib/images/common/icon_bridge.png) }
.search_fast_area .fast_road_area .icon_road.icon_tunnel { background: url(/dtjp/lib/images/common/icon_tunnel.png) }
.search_fast_area .fast_road_area .fast_road_list button { border: 0; background-color: transparent; }
.search_fast_area .fast_road_area .fast_road_list button span { display: block; margin-top: 5px; }
.search_fast_area .fast_road_area .fast_road_top { display: flex; padding: 10px; background-color: #edf6ff; }
.search_fast_area .fast_road_area .fast_road_top li { flex-shrink: 0; min-width: 70px; }
.search_fast_area .fast_road_area .fast_road_top li span { font-size: 15px; }
/* .search_fast_area .fast_road_area .fast_road_btm { display: flex; padding: 20px 10px; background-color: #fff; } */
.search_fast_area .fast_road_area .fast_road_btm li { flex-shrink: 0; width: 70px; }
.search_fast_area .fast_road_area .fast_road_btm li span { font-size: 14px; color: #4d4d4d; }

.search_fast_area .fast_range_area { position: relative; padding: 0 37px; z-index: 2; }
.search_fast_area .fast_range_area .slider_range.ui-widget.ui-widget-content { height: 5px; border: 0; background-color: #eaecf4; border-radius: 0; }
.search_fast_area .fast_range_area .slider_range.ui-widget-content .ui-state-default { top: -10px; margin-left: -13px; width: 25px; height: 25px; border-radius: 5px; border: 1px solid #c9c9c9; background-color: #fff; outline: none; }
.search_fast_area .fast_range_area .slider_range.ui-state-default:after,
.search_fast_area .fast_range_area .slider_range.ui-widget-content .ui-state-default:after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; margin-top: -5.5px; border-radius: 1px; background-color: #324796; }
.search_fast_area .fast_range_area .slider_range .ui-widget-header { background-color: #324796; }
.search_fast_area .fast_range_area .btn_range { position: absolute; top: -10px; width: 25px; height: 25px; font-size: 0; border-radius: 5px; border: 1px solid #c9c9c9; }
.search_fast_area .fast_range_area .btn_range.btn_range_down { left: 0; background: #fff url(/dtjp/lib/images/common/slider_prev.png) no-repeat center / 100%; }
.search_fast_area .fast_range_area .btn_range.btn_range_up { right: 0; background: #fff url(/dtjp/lib/images/common/slider_next.png) no-repeat center / 100%; }

.road_img_box { position: relative; border: 3px solid #3185db; }
.road_img_box img { width: 100%; height: 100%; }
.road_img_box .mark_spr { position: absolute; width: 100px; height: 100px; font-size: 0; border: 2px solid #3185db; background-color: rgba(49,133,219,0.2); }

.road_network_area .road_network_legend { display: flex; justify-content: flex-end; width: 100%; }
.road_network_area .road_network_legend > li { display: flex; align-items: center; margin-left: 25px; }
.road_network_area .road_network_legend .road_leg { display: inline-block; width: 50px; height: 10px; font-size: 0; background-color: #eee; border: 1px solid #dadada; }
.road_network_area .road_network_legend .road_leg_concrete { background-color: #a8aab5; border-color: #a8aab5; }
.road_network_area .road_network_legend .road_leg_asphalt { background-color: #3c5b74; border-color: #3c5b74; }
.road_network_area .road_network_legend .road_leg_facility { background-color: transparent; background: url(/dtjp/lib/images/common/bg_facility.png) no-repeat center; }
.road_network_area .road_network_legend .road_leg_empty { background-color: #fff; }
.road_network_area .road_network_legend span { margin-left: 10px; font-size: 15px; }

.road_network_area .road_network_table { position: relative; width: 100%; display: flex; }
.road_network_area .road_network_table .road_network_fixed { position: relative; flex-shrink: 0; width: 70px; }
.road_network_area .road_network_table .road_network_slide { position: relative; width: 100%; overflow: hidden; }
.road_network_area .road_network_table .road_network_slide .swiper-slide { width: max-content; margin-right: 1px; }

.road_network_area .road_network_table .road_upline { position: relative; width: 100%; height: 55px; background-color: #fff; }
.road_network_area .road_network_table .road_downbound { position: relative; width: 100%; height: 55px; background-color: #fff; }
.road_network_area .road_network_table .road_mark { position: absolute; z-index: 2; }
.road_network_area .road_network_table .road_upline .road_mark { top: 0; }
.road_network_area .road_network_table .road_downbound .road_mark { bottom: 0; }
.road_network_area .road_network_table .road_point_line { position: absolute; top: 55px; left: 735px; bottom: 55px; width: 4px; margin-left: -2px; font-size: 0; background-color: #f9b02a; z-index: 1; }

.road_network_area .road_network_table .road_direction { top: 50%; left: 0; width: 60px; height: 40px; margin-top: -20px; padding: 0 10px; line-height: 40px; font-size: 15px; font-weight: 500; color: #222; background-repeat: no-repeat; background-size: 100%; background-position: center; }
.road_network_area .road_network_table .road_upline .road_direction { top: 50%; text-align: right; background-image: url(/dtjp/lib/images/common/bg_upline.png); }
.road_network_area .road_network_table .road_downbound .road_direction { bottom: auto; text-align: left; color: #fff; background-image: url(/dtjp/lib/images/common/bg_downbound.png); }

.road_network_area .road_network_table .road_point { padding: 0 10px; }
.road_network_area .road_network_table .road_point span { display: block; width: 50px; height: 25px; margin-bottom: 1px; line-height: 21px; font-size: 13px; color: #222; text-align: center; background-color: #eee; border: 1px solid #dadada; }
.road_network_area .road_network_table .road_point span.road_point_top { color: #fff; text-align: center; background-color: #428e00; border-color: #428e00; }
.road_network_area .road_network_table .road_point span.road_point_btm { margin-bottom: 0; background-color: #fff; }
.road_network_area .road_network_table .road_upline .road_point { top: 2px; }
.road_network_area .road_network_table .road_downbound .road_point { bottom: 2px; }

.road_network_area .road_network_table .road_text { display: flex; align-items: center; width: 70px; height: 55px; padding: 5px; font-size: 15px; font-weight: 500; color: #222; }

.road_network_area .road_network_table .road_ic { display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }
.road_network_area .road_network_table .road_ic .icon_jc,
.road_network_area .road_network_table .road_ic .icon_ic { display: block; width: 40px; height: 40px; margin-left: 10px; font-size: 0; }
.road_network_area .road_network_table .road_ic .icon_jc { background: url(/dtjp/lib/images/common/icon_jc.png) no-repeat center / 100%; }
.road_network_area .road_network_table .road_ic .icon_ic { background: url(/dtjp/lib/images/common/icon_ic.png) no-repeat center / 100%; }

.road_network_area .road_network_table .road_point_start { top: 50% !important;  display: block; width: 34px; height: 40px; margin-top: -20px; padding-right: 10px; line-height: 40px; text-align: center; font-size: 13px; color: #fff; background: url(/dtjp/lib/images/common/bg_facility_start.png) no-repeat center / 100%; }
.road_network_area .road_network_table .road_point_end { top: 50% !important; display: block; width: 34px; height: 40px; margin-top: -20px; margin-left: 36px; padding-left: 10px; line-height: 40px; text-align: center; font-size: 13px; color: #fff; background: url(/dtjp/lib/images/common/bg_facility_end.png) no-repeat center / 100%; }

.road_network_area .road_network_table .road_table_body { margin: 5px 0; }
.road_network_area .road_network_table .road_table_body table { width: max-content; table-layout: fixed; margin-right: 20px; }
.road_network_area .road_network_table .road_table_body table tbody:last-child { border-top: 3px solid #474747; }
.road_network_area .road_network_table .road_table_body table th,
.road_network_area .road_network_table .road_table_body table td { width: 70px; height: 24px; vertical-align: top; background-color: #fff; border: 1px solid #dadada; }
.road_network_area .road_network_table .road_table_body table th button { width: 100%; height: 24px; padding: 0 5px; font-size: 14px; color: #fff; background-color: #585f6f; border: 0; vertical-align: top; }
.road_network_area .road_network_table .road_table_body table td button { width: 100%; height: 24px; padding: 0 5px; font-size: 0; background-color: #fff; border: 0; vertical-align: top; }
.road_network_area .road_network_table .road_table_body table th button.active,
.road_network_area .road_network_table .road_table_body table td button.active { width: calc(100% + 2px); height: calc(24px + 2px); margin: -1px; border: 3px solid #f9b02a/* ;background-color: #72798a */ }
.road_network_area .road_network_table .road_table_body table tbody:first-of-type tr:last-child th button.active,
.road_network_area .road_network_table .road_table_body table tbody:first-of-type tr:last-child td button.active { height: calc(24px + 1px); margin: -1px -1px 0; }
.road_network_area .road_network_table .road_table_body table tbody:last-child tr:first-child th button.active,
.road_network_area .road_network_table .road_table_body table tbody:last-child tr:first-child td button.active { height: calc(24px + 1px); margin: 0 -1px -1px; }
.road_network_area .road_network_table .road_table_body table td.bg_concrete button { background-color: #a8aab5; }
.road_network_area .road_network_table .road_table_body table td.bg_asphalt button { background-color: #3c5b74; }
.road_network_area .road_network_table .road_table_body table td.bg_facility button { background-image: url(/dtjp/lib/images/common/bg_facility.png); background-repeat: repeat; }

.road_network_area .road_network_img { display: flex; }
.road_network_area .road_network_img .road_network_info { flex-shrink: 0; display: flex; flex-wrap: wrap; align-content: flex-end; width: 125px; overflow: hidden; }
.road_network_area .road_network_img .road_network_info > div { display: flex; flex-wrap: wrap; align-content: center; height: 191px; margin-top: 10px; }
.road_network_area .road_network_img .road_network_info > div > .road_if_label { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 15px; font-weight: 500; color: #3688dc; background-color: #e3ecfd; border-radius: 50px; color: #4d4d4d; }
.road_network_area .road_network_img .road_network_info > div > p { width: 100%; margin-top: 5px; font-size: 14px; }
.road_network_area .road_network_img .road_network_slider { width: calc(100% - 125px - 0.1px); overflow: hidden; }
.road_network_area .road_network_img .road_network_slider .swiper-slide { display: flex; width: auto; }
.road_network_area .road_network_img .road_network_slider .road_network_img_area { width: calc(1397px / 3 - 0.1px); }
.road_network_area .road_network_img .road_network_option p { margin-bottom: 5px; padding-left: 5px; font-size: 15px; }
.road_network_area .road_network_img .road_img_box { width: 100%; height: 191px; margin-top: 10px; border: 4px solid #3185db; border-left-width: 2px; border-right-width: 2px; }
.road_network_area .road_network_img .road_network_img_area:first-child .road_img_box { border-left-width: 4px; }
.road_network_area .road_network_img .road_network_img_area:last-child .road_img_box { border-right-width: 4px; }
.road_network_area .road_network_img .road_img_box img { width: 100%; }

/* 비탈면 3d 입체점검 안내 */
.slope_info_area { min-height: 80vh }
.slope_info_area .slope_text { font-size: 16px; color: #444; font-weight: 500; }
.slope_info_area .img_list { display: flex; margin-top: 25px; }
.slope_info_area .img_list > div { margin-right: 30px; font-size: 18px; font-weight: 500; }
.slope_info_area .img_list > div:last-child { margin-right: 0; }
.slope_info_area .img_list > div > p { margin-top: 10px; }
.slop3dMouse a:hover {text-decoration:none; color:white;}