@charset "UTF-8";
/****************************************/
/*  Name : 한국도로공사 디지털 시범지사 플랫폼
/*  PART : 웹 스타일
/*  Author :
/*  MODIFY :
/*
/*  Summary: /* 파일 내용 */
/*  00) custom

/****************************************/

/* ********************************************************************************* *
* 00) custom
* ********************************************************************************* */
.dispatchAppData tbody .table_hieght td{height:30px; !important;}
.txtBox30bg, .txtBox31bg, .txtBox32bg, .txtBox33bg, .txtBox34bg
 { border-style: solid; border-width: 2px 2px 2px 8px; padding: 12px; word-break: break-all; font-weight:bold; }
  .txtBox30bg { border-color: LightGray; background-color:rgba(211, 211, 211, 0.2); }
  .txtBox31bg { border-color: DodgerBlue; background-color:rgba(30, 144, 255, 0.2); }
   .txtBox32bg { border-color: LightSalmon; background-color:rgba(255, 160, 122, 0.2); }
   .txtBox33bg { border-color: Tomato; background-color:rgba(255, 99, 71, 0.2); }
   .txtBox34bg { border-color: Crimson; background-color:rgba(237, 20, 61, 0.2); }

.smsuser-table tbody .pointer { cursor: pointer; }

.iot-table tbody { cursor: pointer; }
.iot-table tbody .dataTables_empty { cursor: default; }

/* shin */
.grade-00, .grade-00 .grade-bg { background-color: #26945c !important; }
.grade-01, .grade-01 .grade-bg { background-color: #f5af35 !important; }
.grade-02, .grade-02 .grade-bg { background-color: #ff517a !important; }
.grade-03, .grade-03 .grade-bg { background-color: #d72727 !important; }
.grade-04, .grade-04 .grade-bg { background-color: #a0a0a0 !important; }

/* shin */
.icon_circle { width: 0.7208vw; height: 0.7208vw; margin-right: 0.2604vw; margin-left: 0.3804vw; border-radius: 50%; }

/* sky */
.modal_popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 8888;
	display: none;
}

.modal_popup:after {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
	content: '';
}

.modal_popup_layer {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	min-height: 100%;
	padding-bottom: 50px;
	background: #fff;
	z-index: 10;
}

.modal_text_area {
	overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      padding:10px 20px;
}

.modal_popup_dimmed {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: 0.3;
}

.list_btn-primary,
.list_btn-primary:focus,
.list_btn-primary:hover { color: #fff; background-color: #8ac3ff; border-color: #8ac3ff; }

.icon_lnb01_11 { background-image: url(/dtjp/lib/images/menu/icon_menu01_11_off.png); } /* 드론자율주행 */
li.on .icon_lnb01_11,
li:focus .icon_lnb01_11,
li:hover .icon_lnb01_11 { background-image: url(/dtjp/lib/images/menu/icon_menu01_11_on.png); } /* 드론자율주행 */


.video_show { background-image: url(/dtjp/lib/images/common/icon_video.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	cursor: pointer;}
/* sky */

/* dori */
.col-form-text {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
}

/* dori */

/* 포장외관망도 */
.icon_lnb01_10 { background-image: url(/dtjp/lib/images/menu/icon_menu01_10_off.png); } /* 드론자율주행 */
li.on .icon_lnb01_10,
li:focus .icon_lnb01_10,
li:hover .icon_lnb01_10 { background-image: url(/dtjp/lib/images/menu/icon_menu01_10_on.png); } /* 드론자율주행 */

.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; padding: 0 100px; }
.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 .search_fast .road_mark { position: absolute; top: 50%; width: 70px; height: 50px; margin-top: -25px; padding: 0 10px; line-height: 50px; text-align: center; font-size: 15px; font-weight: 500; color: #222; background-repeat: no-repeat; background-size: 100%; background-position: center; }
.search_fast_area .search_fast .road_mark.road_up { left: 0; text-align: right; background-image: url(/dtjp/lib/images/common/bg_upline.png); }
.search_fast_area .search_fast .road_mark.road_down { right: 0; text-align: left; color: #fff; background-image: url(/dtjp/lib/images/common/bg_downbound.png); }

.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 { width: 100%; padding: 0 3px; 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: #ffffff00; } /*todo : override*/
.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 { position: relative; height: 19px; font-size: 14px; letter-spacing: -0.5px; color: #4d4d4d; text-align: center; display: block; width: 100%; }
.search_fast_area .fast_road_area .fast_road_btm li span > em { display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; white-space: nowrap;}
.search_fast_area .fast_road_area .fast_road_btm li:hover span > em { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; height: 100%; padding: 0 2px; background: #fff; transform: translateX(-50%); border: 1px solid #ddd; line-height: 1.2; border-radius: 3px; }

.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.ui-widget-content { height: 5px; border: 0; background-color: #99a4d1; 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 { -webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax */}/*todo : override*/
.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_not { background-color: #24293a; border-color: #24293a; }
.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 right center; }
.road_network_area .road_network_legend .road_leg_facility2 { background-color: transparent; background: url(/dtjp/lib/images/common/bg_facility2.png) no-repeat right center; }
.road_network_area .road_network_legend .road_leg_facility2 { background-color: transparent; background: url(/dtjp/lib/images/common/bg_facility2.png) no-repeat right 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: auto; padding-right: 17px; }

.road_network_area .road_network_table .road_upline { position: relative; display: flex; align-items: center; width: 100%; height: 60px; background-color: #fff; }
.road_network_area .road_network_table .road_downbound { position: relative; display: flex; align-items: center; width: 100%; height: 60px; background-color: #fff; }
.road_network_area .road_network_table .road_mark { position: relative; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; flex-shrink: 0; z-index: 2; width: 69.1px; }
.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: 42px; left: calc(69.2px * 11); bottom: 43px; width: 4px; margin-left: calc((-69.2px + -2px) / 2); 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; 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_miles { padding: 0 10px; }
.road_network_area .road_network_table .road_miles 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_miles.road_point span.road_miles_top { color: #fff; text-align: center; background-color: #428e00; border-color: #428e00; }
.road_network_area .road_network_table .road_miles.road_default span.road_miles_top { color: #fff; text-align: center; background-color: #3185db; border-color: #3185db; }
.road_network_area .road_network_table .road_miles span.road_miles_btm { margin-bottom: 0; background-color: #fff; }
.road_network_area .road_network_table .road_upline .road_miles { top: 15px; }
.road_network_area .road_network_table .road_downbound .road_miles { bottom: 15px; }

.road_network_area .road_network_table .road_text { display: flex; align-items: center; width: 70px; height: 55px; padding: 5px; font-size: 14px; font-weight: 500; color: #222; }
.road_network_area .road_network_table .road_text > span { display: block; width: 100%; padding: 4px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.road_network_area .road_network_table .road_text:hover { z-index: 3; }
.road_network_area .road_network_table .road_text:hover > span { position: absolute; top: 50%; left: 50%; width: auto; height: 25px; margin-left: -1px; margin-top: -13px; padding: 4px; text-overflow: none; white-space: nowrap; overflow: visible; border: 1px solid #ddd; background-color: #fff; border-radius: 3px; line-height: 1.2; transform: translateX(-50%); white-space: nowrap; }

.road_network_area .road_network_table .road_ic { display: flex; flex-direction: column-reverse; align-items: center; width: 69.1px; font-size: 15px; font-weight: 500; }
.road_network_area .road_network_table .road_ic em { position: static; top: 10px; right: 100%; display: block; margin-top: 3px; font-size: 14px; word-break: keep-all; }
.road_network_area .road_network_table .road_ic .icon_jc,
.road_network_area .road_network_table .road_ic .icon_ic { flex-shrink: 0; display: block; width: 40px; height: 40px; margin: 0 auto; 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: auto; table-layout: fixed; }
.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: 68.1px; height: 26px; vertical-align: top; background-color: #fff; border: 1px solid #dadada; }
.road_network_area .road_network_table .road_table_body table th button { width: 68.1px; height: 26px; 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: 68.1px; height: 26px; 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 { width: calc(100% + 2px); height: calc(26px + 2px); margin: -1px; border: 3px solid #f9b02a; background-color: #72798a }
.road_network_area .road_network_table .road_table_body table td button.active { width: calc(100% + 2px); height: calc(26px + 2px); margin: -1px; border: 3px solid #e23134; }
.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(26px + 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(26px + 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_not button { background-color: #24293a; }
.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; background-size: 100% 100%; }
.road_network_area .road_network_table .road_table_body table td.bg_facility2 button { background-image: url(/dtjp/lib/images/common/bg_facility2.png); background-repeat: repeat; background-size: 100% 100%; }

.road_network_area .road_network_img { position: relative; display: flex; }
.road_network_area .road_network_img .road_network_info { flex-shrink: 0; width: 80px; margin-top: 22px; padding-bottom: 26px; overflow: hidden; }
.road_network_area .road_network_img .road_network_info > div { height: 180px; padding-top: 65px; margin-top: 10px; }
.road_network_area .road_network_img .road_network_info > div > .road_if_label { display: inline-block; height: 40px; padding: 0 20px; line-height: 38px; font-size: 17px; font-weight: 500; color: #3688dc; background-color: #e3ecfd; border: 1px solid #ccdbf7; border-radius: 50px; color: #4d4d4d; }
.road_network_area .road_network_img .road_network_info > div > p { width: 100%; margin-top: 5px; font-size: 16px; }
.road_network_area .road_network_img .road_network_slider { width: calc(100% - 150px - 0.1px); margin: 0 35px; 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(1370px / 3 - 0.1px); }
.road_network_area .road_network_img .road_img_box { position: relative; width: 100%; height: 189px; margin-top: 10px; text-align: center; border: 4px solid #3185db; border-left-width: 2px; border-right-width: 2px; background-color: #000; }
.road_network_area .road_network_img .road_img_box.active:after { content: ''; position: absolute; top: -4px; left: 0; right: 0; bottom: -4px; border: 4px solid #e23134; /* z-index: 2; */ }
.road_network_area .road_network_img .swiper-slide:first-child .road_img_box.active:after { left: -4px; }
.road_network_area .road_network_img .swiper-slide:last-child .road_img_box.active:after { right: -4px; }
.road_network_area .road_network_img  .road_network_slider .swiper-slide:first-child .road_img_box { border-left-width: 4px; }
.road_network_area .road_network_img  .road_network_slider .swiper-slide:last-child .road_img_box { border-right-width: 4px; }
.road_network_area .road_network_img .road_img_box img { width: auto; max-width: 100%; }
.road_network_area .road_network_img .road_img_box .btn_area { display: none; position: absolute; right: 10px; bottom: 10px; z-index: 1; }
.road_network_area .road_network_img .road_img_box:hover .btn_area { display: block; }
.road_network_area .road_network_img .road_network_date { font-size: 14px; margin-top: 7px; font-weight: 500; }
.road_network_area .road_network_img .swiper-ctrl { position: absolute; bottom: 25px; width: 25px; height: 388px; font-size: 0; background-color: #f6f6f6; border: 1px solid #ddd; }
.road_network_area .road_network_img .swiper-prev { left: 80px; background: #f6f6f6 url(/dtjp/lib/images/common/carousel_prev.png) no-repeat center / 5px; }
.road_network_area .road_network_img .swiper-next { right: 0; background: #f6f6f6 url(/dtjp/lib/images/common/carousel_next.png) no-repeat center / 5px; }
.road_network_area .road_network_img_area .road_network_option { height: 22px; }

.road_network_area .road_network_option_area { display: flex; margin-left: 115px; margin-right: 35px; }
.road_network_area .road_network_option_area .road_network_option { width: calc(1370px / 3 - 0.1px); }
.road_network_area .road_network_option_area .road_network_option p { height: 42px; margin-bottom: 10px; padding-left: 5px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.road_network_area .road_network_option_area .road_network_option .row { height: 22px; }

.prevent-select { -webkit-user-select: none; Safari-ms-user-select: none; IE 10 and IE 11user-select: none; Standard syntax}

/* dori */
[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_lg,
.modal_lg .modal-dialog { width: 1300px; max-width: 100%; }
.modal_lg .modal-dialog2 { width: 1700px; 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-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); }

.workmap_area .workmap_map { width: 100%;  overflow : hidden; }
.workmap_area .workmap_map .road_area { background-image: none; }

/* 범례*/
.workmap_area .workmap_map .workmap_map_view .map_option_area {height : 2.225vw; border: 0.5px solid #3185db; bottom: 0.5208vw; top:auto; left:calc(0.125vw + 0.5208vw + 0.5208vw);}

/* 배경 선택 컨트롤 스타일 변경 */
.dtjpmap_satelliteview {
  border-radius: 5px;
  border: 1px solid #676767;
  box-shadow: 0px 0px 0.625vw #676767;
  left: auto;
  right: 1.0625vw;
  top: 1.0625vw;
  padding: 0;
  width: 3.125vw;
  height: 3.125vw;
  background-color: rgba(255, 255, 255, 1);
  background-image: url('/dtjp/lib/images/gis/icon_satellite.png');
  background-size: 3.125vw;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.15s, background-images 0.15s, border 0.15s;
}
.dtjpmap_satelliteview:hover {
  box-shadow: 0px 0px 0.625vw #323232;
}

.left.icon_situation_chadan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_left.png); min-width: 29px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.right.icon_situation_chadan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_right.png); min-width: 29px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.bothWay.icon_situation_chadan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_green.png); min-width: 29px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.left.icon_situation_plan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_plan_left.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.right.icon_situation_plan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_plan_right.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.bothWay.icon_situation_plan { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_blue.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.icon_situation_sago { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/04.sago.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }

.left.icon_situation_plcs { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/06.gyeonin.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.right.icon_situation_plcs  { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/06.gyeonin.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }

.left.icon_situation_plcs_a { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/a.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.left.icon_situation_plcs_x { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/x.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.right.icon_situation_plcs_a  { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/a.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }
.right.icon_situation_plcs_x  { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/x.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }

.bothWay.icon_situation_plcs  { width: 2.3438vw; height: 2.3438vw; background-image: url(/dtjp/lib/images/gis/icon_work_blue.png); min-width: 28px; min-height: 30px; width: 1.8229vw; height: 1.8229vw; }

.item_icon_situation_sago, .item_icon_situation_chadan  { z-Index: 3; cursor: pointer; }
.item_icon_situation_plan, .item_icon_situation_plcs { z-Index: 2; cursor: pointer; }
.work_item .icon {left : 0;}
.work_item .icon1 {left : 0;}
.work_item .icon2{left : 0;}
.work_item .icon3 {left : 0;}
.work_item .icon4 {left : 0;}
.work_item .icon5 {left : 0;}
.work_item .icon6 {left : 0;}
.work_item .icon.left {transform : translateX(-50%);}
.work_item .icon1.left {transform : translateX(-50%);}
.work_item .icon2.left {transform : translateX(-50%);}
.work_item .icon3.left {transform : translateX(-50%);}
.work_item .icon4.left {transform : translateX(-50%);}
.work_item .icon5.left {transform : translateX(-50%);}
.work_item .icon6.left {transform : translateX(-50%);}

.work_item .work_section.ing.left { background-image: url(/dtjp/lib/images/dashboard/bg_work_ing.png); }
.work_item .work_section.ing.right { background-image: url(/dtjp/lib/images/dashboard/bg_work_ing_right.png); }
.work_item .work_section.plan.left { background-image: url(/dtjp/lib/images/dashboard/bg_work_plan.png); }
.work_item .work_section.plan.right { background-image: url(/dtjp/lib/images/dashboard/bg_work_plan_right.png); }
.work_item .work_section.plcs.left { background-image: url(/dtjp/lib/images/dashboard/bg_work_plan.png); }
.work_item .work_section.plcs.right { background-image: url(/dtjp/lib/images/dashboard/bg_work_plan_right.png); }



/* 도로 */
.road_area { position: relative; height: 94%; padding: 0 1.5625vw; background-color: #17212f; background-image: none; background-position: left top; background-repeat: repeat-x; background-size: auto 100%; }

/* 도로 - 거리 */
.distance_item { position: absolute; bottom: 50%; transform: translateY(50%); }
.distance_item .label_distance { min-width: 3.1250vw; height: 1.5625vw; padding: 0 0.3906vw; line-height: 1.5625vw; font-size: 0.7375vw; color: #a1eb2c; text-align: center; background-color: #091221; }
.work_item .work_section.ing { /* bottom:0; */ /* transform:translateY(100%); */  z-index: -2; height:20px; filter: contrast(0.5);}
.work_item .work_section.plan { /* bottom:0; */ /* transform:translateY(100%); */  z-index: -2; height:20px; filter: contrast(0.5);}
.work_item .work_section.plcs { /* bottom:0; */ /* transform:translateY(100%); */  z-index: -2; height:20px; filter: contrast(0.5);}
.work_item .icon { z-index: 3; }
.work_item .icon1 { z-index: 3; }
.work_item .icon2 { z-index: 3; }
.work_item .icon3 { z-index: 3; }
.work_item .icon4 { z-index: 3; }
.work_item .icon5 { z-index: 3; }
.work_item .icon6 { z-index: 3; }
.distance_item .icon_effect_left { transform: translateX(-50%); left: 0; z-index: -1;}
.patrol_gonggu .patrol_section .section_elm {font-size: 0.70vw;}

/* 도로 - IC */
.item_icon_ic { z-Index: 1; bottom: 0; cursor: pointer; }
.icon_ic { width: 1.3625vw; height: 1.3625vw; min-width: 24px; min-height: 24px; background-image: url(/dtjp/lib/images/dashboard/icon_ic.png); }
.ic_elm_text { position: absolute; left: 50%; top: 100%; /*width: 200%;*/ text-align: center; font-size: 0.75vw; font-weight: 500; transform: translateX(-50%); }
.dstnc_top .item_icon_ic { bottom: -16%; }
.dstnc_top .ic_elm_text { top: -100%; }
.dstnc_btm .ic_elm_text {top: 100%;}
.dstnc_btm .item_icon_ic {bottom: 100%;}
.ic_elm_text .ic_name { color: #8ad4ff; white-space: nowrap; }

/* 도로 - cctv */
.hide_cctv .item_icon_cctv { display: none; }
.item_icon_cctv { bottom: 60%; cursor: pointer; }
.dstnc_btm .item_icon_cctv { bottom: 40%; }
.road_area .icon_cctv { width: 1.0625vw; height: 1.0625vw; background-image: url(/dtjp/lib/images/dashboard/icon_cctv.png); }

/* 2022.01.26 jjw - cctv 라벨 표출용 오브레이 */
.popover.cctv-label { border: 1px solid #676767; min-width: auto; white-space: nowrap; padding: 0.3vw 0.5vw; border-radius: 0.4vw;}
.popover.cctv-label > div {	display: inline-block; font-size: 0.8333vw; text-align: center; }

/* popover*/
.popover { position: absolute; top: auto; bottom: 0; transform: translate(-50%, 0); min-width: 28.6458vw; max-width: 33.8542vw; padding: 0.9115vw; border: 1px solid #1e2938; border-radius: 10px; background-color: #1e2938; box-shadow: 0 0 5px 0 rgba(255,255,255,0.2); font-family: inherit; }
.popover_workmgt { position: absolute; top: auto; bottom: 0; transform: translate(-50%, 0); min-width: 18.2292vw; max-width: 23.4375vw; padding: 0.9115vw; border: 1px solid #1e2938; border-radius: 10px; background-color: #1e2938; box-shadow: 0 0 5px 0 rgba(255,255,255,0.2); font-family: inherit; }
.popover * { color: #fff; }
.popover .btn_name { padding: 0.2rem 2rem; margin: 0.2rem 0; background-color: #3C4550; border-radius: 2rem; transition: backgrond-color 0.15s, background-image 0.15s, padding 0.15s; cursor: pointer; }
.popover .btn_name:hover { padding-right: 3rem; background-color: #33373D; background-image: url(/dtjp/lib/images/common/arr_gnb_off.png); background-position: right 1rem center; background-size: 1rem; background-repeat: no-repeat; }
.popover .btn_name.btn_system:hover { background-color: #3C4550; }
.bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right>.arrow::after { border-right-color: #1e2938; }
.bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left>.arrow::after { border-left-color: #1e2938; }
.bs-popover-auto[x-placement^=top]>.arrow::after, .bs-popover-top>.arrow::after { border-top-color: #1e2938; }
.bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after { border-bottom-color: #1e2938; }
.popover .popover-body { padding: 0; }
.popover .popover-body .img_box { display: flex; align-items: center; justify-content: center; height: 170px; background-color: #1e2938; }
.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 { margin-bottom: 0; }
.popover .card-header { width: calc(100% + 0.9115vw + 0.9115vw); height: auto; margin: 0 -0.9115vw; /*margin-bottom: 0.9115vw;*/ padding: 0 0.9115vw 0.9115vw; background: none; font-size: 1.1500vw; }
.popover .card-body { height: auto; padding: 0; background: none; }
.popover .card-table { width: 100%; max-height: none; overflow: auto; }
.popover .card-table .card-thead { flex-shrink: 0; display: flex; width: 100%; border-bottom: 0; }
.popover .card-table .card-th { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.0313vw; padding: 5px; text-align: center; font-size: 0.7292vw; color: #fff; border: 2px solid #1e2938; border-bottom: 0; border-left: 0; background: #3e3e55; }
.popover .card-table .card-tbody { flex-shrink: 0; display: flex; width: 100%; background:#1e2938;}
.popover .card-table .card-td { flex: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.0313vw; padding: 5px; text-align: center; font-size: 0.7292vw; color: #fff; border: 2px solid #1e2938; background-color: #33373d; border-bottom: 0; border-left: 0; border-bottom: 0; }
.popover .card-table .card-td li { text-indent: -0.5vw; padding-left: 0.5vw; font-size: 0.7292vw; text-align: left; }
.popover .card-table .card-thead:first-child .card-th,
.popover .card-table .card-tbody:first-child .card-th,
.popover .card-table .card-tbody:first-child .card-td { border-top: 0; }
.popover .card-table .card-tbody:last-child { border-bottom: 0; }
.popover .card-table .card-tbody:last-child .card-th,
.popover .card-table .card-tbody:last-child .card-td { border-bottom: 1px solid #1e2938; }
.popover .card-table .card-th:first-child { border-left: 2px solid #1e2938; }
.popover .card-table .card-td:first-child { border-left: 2px solid #1e2938; }
.popover .close_btn { display: block; position: absolute; top: 0.8vw; right: 0.9115vw; width: 1.6666vw; height: 1.6666vw; background: url(/dtjp/lib/images/common/btn_close_modal_white.png) no-repeat center center; background-size: 60%; border-radius: 30%; }

/* 도로 - 구간 */
.section_item { position: absolute; bottom: 0; display: flex; flex-direction: column; justify-content: flex-start; height: 5.2083vw; border-left: 0.0521vw solid #6b7179; }
.section_elm { margin-top: 1.2vw; margin-bottom: 1.2vw; padding-left: 0; font-size: 0.9375vw; color: #a1eb2c; line-height: 0.7813vw; background-image: none; background-position: left top; background-repeat: no-repeat; background-size: 0.7813vw; }
.section_elm:last-child {margin-top: 1.2vw; margin-bottom: 1.2vw;}

.section_top_line {padding: 0.1208vw 0; height:0.5208vw;}
.section_btm_line { /*position: relative;*/ bottom: 0; left: 0; width: 100%; padding: 0.5208vw; display: flex; z-index: 3; }
.sec_line { position: absolute; width: 0%; height: 0.5208vw; background-color: #ddd; }
.sec_line .line_pop {transform: translate(-50%, 0%); left:0px;}
.tab_head_item {cursor : pointer;}
/* .tab_area .tab_header.tab_type2 .tab_head_item { width: auto; min-width: 4.2083vw; padding: 0 0.5208vw; font-size: 0.7292vw; cursor : pointer;} */
/* .sec_line:not(:first-child, :last-child){min-width : 7%;} */

/* table*/
.table-hover .table-light:hover { }
.workmap_area .workmap_list .workmap_list_box.plan .workmap_list_cont .workmap_list > li.active .btn_location2 ,
.workmap_area .workmap_list .workmap_list_box.working .workmap_list_cont .workmap_list > li.active .btn_location2,
.workmap_area .workmap_list .workmap_list_box .workmap_list_cont .workmap_list > li .btn_location2,
.workmap_area .workmap_list .workmap_list_box .workmap_list_cont .workmap_list > li:hover .btn_location2,
.workmap_area .workmap_list .workmap_list_box .workmap_list_cont .workmap_list > li.ani .btn_location2,
.workmap_area .workmap_list .workmap_list_box .workmap_list_cont .workmap_list > li.active.ani .btn_location2 { color : transparent; }
.today_plan_total { padding: 0.2vw 0.4vw; margin-left: -4vw; font-weight: 500; border-radius: 14%; background-color: #085bc7; min-width: 2.5vw; text-align: center;}
.today_situ_total { padding: 0.2vw 0.4vw; margin-left: -4vw; font-weight: 500; border-radius: 14%; background-color: #006400; min-width: 2.5vw; text-align: center;}
.workmap_area .workmap_list .workmap_list_box .workmap_list_cont .workmap_list > li > a {font-size: 0.7292vw;}

/* cctv */
.dashboard_popup.cctv_popup .video_area {color : black;}
.workmap_area .workmap_tab .workmap_tab_in {padding-bottom:0;}
.dashboard_popup.cctv_popup .cctv_list {margin: 15px -11px -15px !important;}
.dashboard_popup.cctv_popup .cctv_inner {width: auto;}
.dashboard_popup.cctv_popup .cctv_list {position: fixed;padding: 15px 30px 30px;width: 100%;bottom: 0;}
.dashboard_popup.cctv_popup #container > .inner.cctv_inner { flex: 1; width: 100%; max-height: 100%; margin-left: 0; margin-right: 0; padding: 1.5625vw; }
.dashboard_popup.cctv_popup #container {height: calc(100% - 9vw);}
.dashboard_popup.cctv_popup #container .inner {color: #212529;}

/* vms */
.tab_contents02 .road_section > li {padding: 0.5813vw 0 0.9813vw 0;}
.tab_contents02 .road_section > li .text_area {margin-bottom : 0;}

/* vds */
.item_line_vds {cursor : pointer;}
.sec_line .line_pop {left : 50%; margin : 0 auto;}

/* text*/
.no_data_txt { color: white; text-align: center; padding-top: 13px; }

/* icon */
.map_btn_area .btn_map_straight { background-image: url(/dtjp/lib/images/dashboard/icon_road_off.png); }
.map_btn_area .btn_map_straight.active { background-image: url(/dtjp/lib/images/dashboard/icon_road_on.png); }

/* 직선도 토글 */
.full.map_area .road_area_wrap { display: none; }
/* .workmap_area .workmap_map .workmap_map_view .emap_area.full {height: 100%;} */
.road_area_wrap .road_btn { position: absolute; bottom: 100%; right: 0; display: flex; align-items: center; justify-content: center; width: 2.6042vw; height: 1.5625vw; background-color: #666; font-size: 0; z-index: 2; border-radius: 5px 0 0 0; }
.road_area_wrap .road_btn span { width: 0.5729vw; height: 0.7292vw; background: url(/dtjp/lib/images/dashboard/arr_info.png) no-repeat center center; background-size: 100%; transform: rotate(-90deg); }
.full .emap_area_wrap { height: 100%; padding: 0; margin: 0; }
.full .map_area_wrap { height: 100%; padding: 0; margin: 0; }
.full .road_area_wrap { height: 0; padding: 0; margin: 0; }
.full .road_area_wrap .road_btn span { transform: rotate(90deg); }

@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; }

/* 작은 영역 로딩바*/
#progressAreaSmall { position: absolute; width: 17.1875vw; height: calc(100vh - 2.8646vw - 18.7500vw);}
#progressAreaSmall .loading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9100; }
/* 포장파손자동탐지*/
.form-check-box .form-check-input[type=checkbox] + label.form-check-label { min-width: 1px; margin-bottom:1px;}
/* dori */

/* IoT 대시보드 */
/* bsh */

/* shin */
/*Legend*/
        #sctLgnd{z-index:50;position:absolute;bottom:15px;left:15px;display:flex;align-items:center;justify-content:center;width:650px;height:50px;padding:5px 25px 5px 8px;margin-top:10px;text-align:center;background-color:rgba(50,56,64,0.75);
            box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            -o-border-radius:25px;
            border-radius:25px;}
        #sctLgnd .areaTit{flex-basis: 70px;font-size:16px;line-height:40px;font-weight:bold;color:rgba(255,255,255,0.5);background-color:rgba(0,0,0,0.2);
            box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            -o-border-radius:25px;
            border-radius:25px;}
        #sctLgnd ul{flex: 1;display:flex;padding-left:10px;
            box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
        #sctLgnd li{flex:1;
            box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
        #sctLgnd .sctCnt{display:flex;align-items:center;justify-content:center;}
        #sctLgnd .areaIco{width:40%;text-align:center;}
        #sctLgnd .areaIco svg{width:40px;height:40px;}
        #sctLgnd li .areaIco svg .icoSttCrl{stroke-width:10px;fill:rgba(150,150,150,1.0);stroke:rgba(150,150,150,0.4);}
        #sctLgnd li .txtItem{width:50%;padding-bottom:1px;font-size:16px;color:rgba(255,255,255,0.9);text-shadow:0 0 4px rgba(0,0,0,0.9);}

        /*Map Icon*/
        /* .areaMIco{z-index:42;position:absolute;text-align:center;cursor:pointer;} */
        .areaMIco{z-index:42;position: static;text-align:center;}
        .areaMIco .areaIco {display:inline-block;}
        .areaMIco.tpBo .areaIco{width:15px;height:15px;margin:5px auto;background-color:rgba(150,150,150,1.0);border:3px solid rgba(39,44,50,0.75)/*#272c32*/;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            -o-border-radius:5px;
            border-radius:5px;}

        .areaMIco.tpHq .areaIco svg circle,
        .areaMIco.tpBo .areaIco,
        .areaMIco .areaTxt { cursor:pointer; }

        .areaMIco .areaIco svg{width:40px;height:40px;}
        .areaMIco .areaIco svg .icoSttCrl{stroke-width:12px;fill:rgba(150,150,150,1.0);stroke:rgba(150,150,150,0.4);}

        /* nonAct 일때 스케일 줄임 */
        .areaMIco.nonAct .areaIco {transform:scale(0.7);}
        /* nonAct 일때 테두리 없애기 */
        /* .areaMIco.nonAct .areaIco svg .icoSttCrl{stroke-width:0px;} */
        .txtMHq, .txtMBo{padding:6px 15px 7px 15px;text-shadow:0 0 2px rgba(0,0,0,0.85);color:rgba(255,255,255,0.8);background-color:rgba(0,0,0,0.6);
            -webkit-border-radius:15px;
            -moz-border-radius:15px;
            -o-border-radius:15px;
            border-radius:15px;
            word-break: break-all;
            white-space: nowrap;}
        .txtMHq {border: 2px solid rgba(255,255,255,0.4);}
        .txtMBo{background-color:rgba(0,0,30,0.6);}

.tpNrml .areaIco svg .icoSttCrl{fill:rgba(38,148,92,1.0) !important;stroke:rgba(38,148,92,0.4) !important;}
        .tpCtn .areaIco svg .icoSttCrl{fill:rgba(245,175,53,1.0) !important;stroke:rgba(245,175,53,0.4) !important;}
        .tpWrn .areaIco svg .icoSttCrl{fill:rgba(255,81,122,1.0) !important;stroke:rgba(255,81,122,0.4) !important;}
        .tpDng .areaIco svg .icoSttCrl{fill:rgba(215,39,39,1.0) !important;stroke:rgba(215,39,39,0.4) !important;}
        .tpCtrl .areaIco svg .icoSttCrl{fill:rgba(255,127,0,1.0) !important;stroke:rgba(215,39,39,0.4) !important;}
        .tpNone .areaIco svg .icoSttCrl{fill:rgba(61,68,84,1.0) !important;stroke:rgba(61,68,84,0.4) !important;}
        .tpBo.tpNrml .areaIco{background-color:rgba(38,148,92,1.0);}
        .tpBo.tpCtn .areaIco{background-color:rgba(245,175,53,1.0);}
        .tpBo.tpWrn .areaIco {background-color:rgba(255,81,122,1.0);}
        .tpBo.tpDng .areaIco{background-color:rgba(215,39,39,1.0);}
        .tpBo.tpNone .areaIco{background-color:rgba(61,68,84,1.0);}

        .map_legend2 { position: absolute; bottom: 1vw; left: 1vw; padding: 0.8vw; color: #fff; background-color: #31383f; border-radius: 5px; }

/* CountDown */
header .countdown-wrap { position: absolute; right: 1.5625vw; top: 0.58vw; width: 3vw; height: 3vw; border-radius: 50%; }
header .countdown-wrap #countdown-canvas { cursor: pointer; }

/* shin */
.dashboard_popup .tab_area { text-align: right; height: 100%; }
.dashboard_popup .tab_area .tab_contents { display: block; width: 100%; height: 100%; }

/* shin */
#container.dashboard_popup { height: 100%; }
.dashboard_popup .card { height: 100%; }
.card_table tbody .pointer { cursor: pointer; }

/* iot 상황판 시설물 이미지 shin */
.map_legend .icon { background-color: #3D4454; width: 1.5vw; height: 1.5vw; margin-right: 0.2604vw; border-radius: 50%; }
.map_legend .bridge .icon { background-image: url(/dtjp/lib/images/dashboard/legend_bridge.png); }
.map_legend .bridgeDis .icon { background-image: url(/dtjp/lib/images/dashboard/legend_bridgeDis.png); }
/* .map_legend .color_bridge dd { color: #26945c; } */
.map_legend .slope .icon { background-image: url(/dtjp/lib/images/dashboard/legend_slope.png); }
/* .map_legend .color_slope dd { color: #c63738; } */
.map_legend .tunnel .icon { background-image: url(/dtjp/lib/images/dashboard/legend_tunnel.png); }
/* .map_legend .color_tunnel dd { color: #26945c; } */
.map_legend .slwtJet .icon { background-image: url(/dtjp/lib/images/dashboard/legend_slwtJet.png); }
.map_legend .tnrdCrbr .icon { background-image: url(/dtjp/lib/images/dashboard/legend_tnrdCrbr.png); }
.map_legend .rmteElpws .icon { background-image: url(/dtjp/lib/images/dashboard/legend_rmteElpws.png); }

.card_table tbody tr td { position: relative; transition: box-shadow 300ms ease-in-out; background-clip: padding-box; }
/* .card_table tbody tr td:after {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    content: "";
    border-radius: 0px;
    box-shadow: 0 0 0.3906vw 0px rgba(0,255,0,0.75) inset;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
	box-shadow: 0 0 0.3906vw 0px rgba(255, 255, 255, 0.9) inset;
} */
.card_table tbody tr.active td { box-shadow: 0 0 0.3906vw 0px rgba(255, 255, 255, 0.9) inset; }
.card_table tbody tr.active td .btn,
.card_table tbody tr.active td .btn_cctv { position: relative; z-index: 2; }

/* bsh */
/* //IoT 대시보드 */

/* bsh */
/* 통계 테이블 ROW 색상 변경 */
.sum_total { background-color: #687a9f; }
.sum_total td {color: #ffffff; }
.sum_system { background-color: #35c4c1; }
.sum_system td {color: #ffffff; }
.sum_job { background-color: #27c4ed; }
.sum_job td {color: #ffffff; }
/* //bsh */

/* bsh */

.ctrl-history-wrap .dataTables_scroll {

	width: 100% !important;
}

.ctrl-history-title {
	font-size: 1.2em;
	font-weight: 400;
	background-color: #2B3386;
	color: #ffffff;
	padding: 10px 8px;
}

.srh-form {
	display: flex;
	padding: 0 10px;
	margin: 10px 0;
}
.srh-form .srh-term {
	display: flex;
	margin-right: auto;
}

.srh-form .srh-term p {
	padding: 1vw;
}

.ctrl-history-wrap {
	margin: 10px;
}

.rwd-table {
	min-width: 300px;
	max-width: 100%;
	border-collapse: collapse;
}

.histCntDiv {
	font-size: 1.2em;
	font-weight: 400;
	color: #ffffff;
	padding: 10px 8px;
	background-color: #4F81BD;
}

/* .rwd-table thead tr th {
  border-top: none;
  background: #4F81BD;
  color: #fff;
} */

.rwd-table thead tr {
	border-top: none;
	background: #D0D8E8;
	color: #000;
}

.rwd-table tr {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background-color: #f5f9fc;
}

/* .rwd-table tr:nth-child(even):not(:first-child) */
.rwd-table tr:nth-child(even) {
	background-color: #ebf3f9;
}

.rwd-table th  {
	display: none;
}

.rwd-table td {
	display: block;
}

.rwd-table td:first-child {
	margin-top: .5em;
}

.rwd-table td:last-child {
	margin-bottom: .5em;
}

.rwd-table td:before {
	content: attr(data-th) ": ";
	font-weight: bold;
	width: 120px;
	display: inline-block;
	color: #000;
}

.rwd-table th, .rwd-table td {
	text-align: center;
	border: 2px solid #E9EDF4;
}

.rwd-table {
	color: #333;
	overflow: hidden;
	width: 100% !important;
}

.rwd-table tr {
	border-color: #bfbfbf;
}

.rwd-table th, .rwd-table td {
	padding: .5em 1em;
}

.rwd-table td:before {
	display: none;
}

.rwd-table th, .rwd-table td {
	display: table-cell;
	padding: .25em .5em;
}

/* iot dashboard 테이블 높이 */
.iot_data_div2 {
	height: 5.6vw !important;
}

.iot_data_div3 {
	height: 7.344vw !important;
}

.ignore_card_table {
	height: auto !important;
}

.btn-orange { color: #fff; background-color: #EF5C10; border-color: #EF5C10; }
.btn-orange:focus,
.btn-orange:active,
.btn-orange:hover { color: #fff; background-color: #EF5C10; border-color: #EF5C10; }
.btn-orange:not(:disabled):not(.disabled).active, .btn-red:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle { color: #fff; background-color: #EF5C10; border-color: #EF5C10; }

.btn-grey { color: #fff; background-color: #464952; border-color: #464952; }
.btn-grey:focus,
.btn-grey:active,
.btn-grey:hover { color: #fff; background-color: #464952; border-color: #464952; }
.btn-grey:not(:disabled):not(.disabled).active, .btn-red:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle { color: #fff; background-color: #464952; border-color: #464952; }

/* //bsh*/

/* cherra */
.btn_iot.grade-00 { background-color: #26945c; }
.btn_iot.grade-01 { background-color: #f5af35; }
.btn_iot.grade-02 { background-color: #ff517a; }
.btn_iot.grade-03 { background-color: #d72727; }
.btn_iot.grade-04 { background-color: #a0a0a0; }

.table_type2 td.grade-00 { color: #fff; background-color: #26945c; }
.table_type2 td.grade-01 { color: #fff; background-color: #f5af35; }
.table_type2 td.grade-02 { color: #fff; background-color: #ff517a; }
.table_type2 td.grade-03 { color: #fff; background-color: #d72727; }
.table_type2 td.grade-04 { color: #fff; background-color: #a0a0a0; }

header .btn_gnb2 { position: relative; display: inline-block; width: 22px; height: 55px; text-align: center; z-index: 9; }
header .btn_gnb2 span { position: absolute; top: 49%; left: 0; width: 22px; height: 2px; font-size: 0; text-indent: -9999px; background: #4d4d4d; transition: opacity 0.2s, background-color 0.2s; }
header .btn_gnb2 span:before { content: ''; position: absolute; top: -8px; left: 0; width: 22px; height: 2px; background: #4d4d4d; transition: top 0.2s, transform 0.2s; }
header .btn_gnb2 span:after { content: ''; position: absolute; top: 8px; left: 0; width: 22px; height: 2px; background: #4d4d4d; transition: top 0.2s, transform 0.2s; }

header.active .btn_gnb2 span:before { top: 0; transform: rotate(45deg); background-color: #fff; }
header.active .btn_gnb2 span:after { top: 0; transform: rotate(135deg); background-color: #fff; }

/* //cherra */


/* jsk */
th.actth,
td.acttd {font-size: 0.8333vw;}

.label_work { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.8229vw; height: 1.8229vw; font-size: 0.6771vw; color: #fff; background-color: #eee; border: 1px solid #ddd; border-radius: 0.1563vw; }
.label_work.ing { background-color: #339c38; border-color: #339c38; }
.label_work.com { color: #000; background-color: #cfcfcf; border-color: #cfcfcf; }

.acdt_info_close_btn {position: absolute;top: 0;right: 0;display: block;width: 2.7042vw;height: 100%;font-size: 0;z-index: 2;border-radius: 0 0 5px 0;}
.acdt_info_close_btn span { display: inline-block; width: 100%; height: 100%; background: url(/dtjp/lib/images/common/btn_close_modal_white.png) no-repeat center center; background-size: 35%; }
/* //jsk */

/* 작업관리 추가 */
.popover.popover_scroll { width: 36.4583vw; max-width: 36.4583vw; }
.popover.popover_scroll .bul_title { font-size: 0.8854vw; }
.popover.popover_scroll .bul_title:before { top: 0.2604vw; left: 0; width: 0.8854vw; height: 0.8854vw; background-size: 0.8854vw; }
.popover.popover_scroll .card-table { max-height: 22vh; }
.popover.popover_scroll .card-table::-webkit-scrollbar { width: 5px; }
.popover.popover_scroll .card-table::-webkit-scrollbar-thumb { background: #2a3748; opacity: 0.4; border-radius: 10px; }
.popover.popover_scroll .card-table::-webkit-scrollbar-track { background: #1e2938; }
.popover.popover_scroll .card-table .card-th { min-height: 1.8229vw; font-size: 0.7292vw; }
.popover.popover_scroll .card-table .card-td { flex: 4; min-height: 1.8229vw; font-size: 0.7292vw; }
.popover.popover_scroll .card-table .card-td li { font-size: 0.7292vw; }


/* 염수분사 제어 팝업 */
.iot_ctrl_area { display: flex; }
.iot_ctrl_area .iot_ctrl_box { display: flex; align-items: center; justify-content: center; width: 100%; height: 4.6875vw; font-size: 2.3234vw; border: 1px solid #ddd; background-color: #fff; border-radius: 0.2604vw; }
.iot_ctrl_area .iot_ctrl_box img { margin-right: 0.7813vw; }
.iot_ctrl_area .iot_ctrl_box1 { border-color: #c3e1ff; background-color: #edf6ff; }
.iot_ctrl_area .iot_ctrl_box1 img { width: 1.8750vw; }
.iot_ctrl_area .iot_ctrl_box2 img { width: 2.3438vw; }
.iot_ctrl_area .iot_ctrl_arr { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3.1250vw; height: 4.6875vw; }
.iot_ctrl_area .iot_ctrl_arr img { width: 0.8854vw; }
.blink {
	animation : blink 1.3s linear infinite;
}
@keyframes blink{
    50% {background-color : #c3e1ff;}
}

.blinking{
  animation: blinking 0.5s ease-in-out infinite alternate;
}

@keyframes blinking{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.BtnOff {
	background-color : #ddd;
	border-color : #ddd;
	color : black;
	pointer-events: none;
}

/*긴급배차토글*/
.form-toggle2 { display: inline-block; vertical-align: middle; overflow: hidden; }
.form-toggle2 input[type=checkbox] { width: 0; height: 0; opacity: 0; display: none; }
.form-toggle2 input[type=checkbox] + label.form-toggle-label { position: relative; width: 50px; height: 25px; background-color: #fff; border:2px solid #3185db;  border-radius: 50px; transition: background-color 0.1s; cursor: pointer; user-select : none; }
.form-toggle2 input[type=checkbox] + label.form-toggle-label:before { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background-color:#3185db; border-radius: 100%; transition: left 0.3s, background-color 0.3s; z-index: 2; }
.form-toggle2 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-toggle2 input[type=checkbox] + label.form-toggle-label em.check_off { color: #3185db; text-align: right; }
.form-toggle2 input[type=checkbox] + label.form-toggle-label em.check_on { opacity: 0; }
.form-toggle2 input[type=checkbox]:checked + label.form-toggle-label { background-color: #3185db; }
.form-toggle2 input[type=checkbox]:checked + label.form-toggle-label:before { left: calc(100% - 19px); background-color: #fff; }
.form-toggle2 input[type=checkbox]:checked + label.form-toggle-label em.check_off { opacity: 0; }
.form-toggle2 input[type=checkbox]:checked + label.form-toggle-label em.check_on { opacity: 1; }

/* 차량제어  */
.carcontrol{height:150px;} 
.control_btn{display:flex;justify-content:space-between; align-items:flex-end; width:420px; height:150px; margin:0 auto;}
.car_end{position: relative;width:100%;height:60vh;}
.carend{width:100%;position:absolute; text-align:center; font-weight:500; font-size:20px; left:50%; top:50%; transform:translate(-50%,-50%);}
.icon_img .icon_intro6{background-image: url(/dtjp/lib/images/mobile/icon_intro6.png); } /* 차량 아이콘 */
.icon_img {display: inline-block; width: 120px; height: 120px; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 100%; }
/*차량제어 커스텀 아이콘*/
.car_close{width:90px;height:90px;border:5px solid #c0c0c0; outline:5px solid #eee; border-radius:50%;margin-top:40px;background-image:linear-gradient(90deg,#fdfbfb 0%,#ebedee 100%);}/*차량제어-차 닫기 bg*/
.car_open{width:120px;height:120px;border:5px solid #a8ccf0;outline:5px solid #EDF6FF;border-radius:50%;background-image:linear-gradient(90deg,#fdfbfb 0%,#ebedee 100%);margin-top:10px;}/*차량제어-열기bg*/
.car_sound{width:90px;height:90px;border:5px solid #c0c0c0; outline:5px solid #eee;border-radius:50%;margin-top:40px;background-image:linear-gradient(90deg,#fdfbfb 0%,#ebedee 100%);}/*차량제어-경적bg*/
.icon_car_close{width: 40px; height: 40px; background-image: url(/dtjp/lib/images/mobile/car_close.png); background-size: auto 100%; }
.icon_car_open{width: 50px; height: 50px; background-image: url(/dtjp/lib/images/mobile/car_open.png); background-size: auto 100%; }
.icon_car_sound{width: 40px; height: 40px; background-image: url(/dtjp/lib/images/mobile/car_sound.png); background-size: auto 100%; }
/*// 차량제어 버튼 */

/*기타 커스텀 style*/
.checkbox_total{justify-content: space-around;}
.checktitle ul>li{margin-left:20px;}
.checktitle ul>li:nth-child(1){margin-left:0px;}
.xsmall{font-size:11px;}
.patrolcontnet tr>th{width:130px;}
.form_option2{width:30px;height:30px;position:absolute;right:5px;top:10px;}
.btn_remove2 { padding: 7px 8px 7px 20px; background-image: url(/dtjp/lib/images/mobile/btn_close_modal.png); background-position: left 7px center; background-size: 10px;} /* 닫기 버튼 */
.bd0{border:transparent;}
.patrollestis>a>ul>li{margin-left:5px;}
.btn_add_bg{width:100%;background-color:#fff;border:1px dashed #535353;margin-top:10px; text-align: center;}
.patrolReportList .btn_add_bg{width:100%;background-color:#fff;border:1px dashed #535353;margin-top:10px; text-align: center;}
.add_icon{padding: 8px 15px; font-size: 15px; color: #333; font-weight: 500; background-repeat: no-repeat;background-image: url(/dtjp/lib/images/common/icon_add_sm.png); background-position: left 10px center;}
.form-control-input[type=text]:placeholder{color:#cfcfcf;}
.patrolcontnet{width:100%;height:auto; background-color:#ffff;padding:10px;display:none;border:1px solid #e4f0fb;}
.patrolReportList{width:100%; height:auto; border-top:2px solid #000; padding:5px 0px;}
.listbox2{position:relative;width: 100%; height: 100%; padding: 10px; line-height: 1.5;  color: #4d4d4d; border:1px solid #d0e7ff; letter-spacing: -1px; font-size: 16px;box-shadow: 2px 2px 2px #eaecef; border-radius: 5px; background-color:#f7faff;transition: color 0.15s, background-color 0.15s, border 0.15s;}
.add_icon{padding: 8px 15px; font-size: 15px; color: #333; font-weight: 500; background-repeat: no-repeat;background-image: url(/dtjp/lib/images/common/icon_add_sm.png); background-position: left 10px center;}
.form-control-input[type=text]:placeholder{color:#cfcfcf;}
.wrap{width:100%;height:350px;border:1px solid #ddd;}
.wrap70{width:100%;height:850px;border:1px solid #ddd;}
.aprv_container{padding-top:30px;}


.lodingbox{max-width:300px;width:100%;margin:0 auto;background-color:#fff; height:300px;}


.btn_area_modal{width: 100%; padding: 15px;position: fixed;bottom: 0px;border-top: 1px solid #d2d2d2;}
.btn_area_modal .btn{ width:100%';'}