@charset "utf-8";

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(/font/notokr/NotoSansKR-Thin.woff2) format('woff2'),
	   url(/font/notokr/NotoSansKR-Thin.woff) format('woff'),
	   url(/font/notokr/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(/font/notokr/NotoSansKR-Light.woff2) format('woff2'),
	   url(/font/notokr/NotoSansKR-Light.woff) format('woff'),
	   url(/font/notokr/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(/font/notokr/NotoSansKR-Regular.woff2) format('woff2'),
		url(/font/notokr/NotoSansKR-Regular.woff) format('woff'),
		url(/font/notokr/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(/font/notokr/NotoSansKR-Medium.woff2) format('woff2'),
		url(/font/notokr/NotoSansKR-Medium.woff) format('woff'),
		url(/font/notokr/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(/font/notokr/NotoSansKR-Bold.woff2) format('woff2'),
		url(/font/notokr/NotoSansKR-Bold.woff) format('woff'),
		url(/font/notokr/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(/font/notokr/NotoSansKR-Black.woff2) format('woff2'),
		url(/font/notokr/NotoSansKR-Black.woff) format('woff'),
		url(/font/notokr/NotoSansKR-Black.otf) format('opentype');
}



.chart_w300{width:300px; margin:0 auto;}


* {padding:0;margin:0; }
html {-webkit-text-size-adjust:none;}
input, textarea, select {font-size:13px;}
h1, h2, h3, h4, h5, strong, b, th {font-weight:400;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{margin-bottom:0;}
legend, .hidden {position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;}
caption {height:0; font-size:0; line-height:0; overflow:hidden;}
pre {white-space:pre-wrap;}
fieldset {border:0;}
p{margin-bottom:0px;}
li {list-style:none;}
img {vertical-align:middle; border:0; max-width:100%;}
a {text-decoration:none;}
section, article, aside, footer{display:block;}
button, input {vertical-align:middle;}
button, input[type=submit] {border:0; padding:0; cursor:pointer; background:transparent;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
input::-webkit-input-placeholder {color:#424242;}
input:-moz-placeholder {color:#424242;}
input::-moz-placeholder {color:#424242; opacity:1;}
input:-ms-input-placeholder {color:#424242;}
input[readonly], input[disabled] {background:#f6f6f6 !important; color:#666;}
input[type=file] {height:30px}
.modified, .modified:hover {color:#1dabde;}
dl, ol, ul{margin-bottom:0;}
ol, ul{padding-left:0;}

/* layout */
#wrap {position:absolute;width:100%; background-color: #fff; overflow:hidden; height:calc(100vh - 85px);}
#wrap.head-no {position:absolute;width:100%; background-color: #fff; overflow:hidden; height:100vh;}
#gnb {position:absolute; top:92px; left:0; right:0; min-width:990px; min-height:65px; border-bottom:0; background:url(../../images/gis/bg_gnb.png) repeat-x; z-index:2000;}
#gnb.hover {border-bottom:3px dotted #1dabde;}
#gnb>.inner {height:62px; background:#fff url(../../images/gis/bg_gnb.png) repeat-x; overflow:hidden;}
#gnb>.inner>ul {width:990px; height:100%; margin:auto;}
#gnb>.inner>ul>li {position:relative; float:left; width:25%; height:100%; text-align:center;}
#gnb>.inner>ul.col2>li {width:50%;}
#gnb>.inner>ul.col3>li {width:33.3%;}
#gnb>.inner>ul.col4>li {width:25%;}
#gnb>.inner>ul.col5>li {width:20%;}
#gnb>.inner>ul.col6>li {width:16.6%;}
#gnb>.inner>ul.col7>li {width:14.2%;}
#gnb>.inner>ul>li>a {display:block; height:62px; padding-bottom:3px; color:#fff; font-weight:400; font-size:17px; line-height:62px;}
#gnb>.inner>ul>li:hover>a, #gnb>.inner>ul>li.on>a {background:url(../../images/gis/gnb_on.png) no-repeat center 54px;}
#gnb>.inner>ul>li:hover>ul {background:#f8f8f8;}
#gnb>.inner>ul ul {position:absolute; top:65px; /* bottom:0; */ left:0; right:0; padding:20px 0; border-left:1px solid #eee;}
#gnb>.inner>ul>li:first-child>ul {border-left:0;}
#gnb>.inner>ul ul li {text-align:left; padding:6px 10px 6px 25px; line-height:18px;}
#gnb>.inner>ul.col2 ul>li {padding:5px 50px 5px 180px;}
#gnb>.inner>ul.col3 ul>li {padding:5px 30px 5px 105px;}
#gnb>.inner>ul.col4 ul>li {padding:5px 20px 5px 65px;}
#gnb>.inner>ul.col5 ul>li {padding:5px 20px 5px 40px;}
#gnb>.inner>ul.col6 ul>li {padding:5px 10px 5px 10px;}
#gnb>.inner>ul.col7 ul>li {padding:5px 10px 5px 10px;}
#gnb>.inner>ul ul li a {display:block; text-align:left; font-weight:400; font-size:14px;}
#gnb>.inner>ul ul li a:hover, #gnb>.inner>ul ul li a:focus {text-decoration:underline;}

#wrap #content {box-sizing:border-box; width:990px;  margin:auto; padding:0 12px 100px;}

/* common */
.btn_search {display:inline-block;width: 100px;height:32px;font-weight:400;line-height:32px;color:#fff;background:#1dabde;vertical-align:middle;}

/* color */
.main_blue {color: #00a2de;}

/* line */
.line_top {border-top: 1px solid #afafaf;}


/* 도로안전정보 */

/* #location {position:absolute;top:55px;left:0px;width:100%;height:calc(100vh - 55px);overflow:hidden;} */

/*
#tit_map, #loc_info {top:0;box-sizing:border-box;height:55px;border-bottom:1px solid #ddd;line-height:54px;}
*/
/* #header{position:fixed;top:0px;left:0px;width:100%;min-width: 1024px;height:55px;overflow:hidden;border-bottom:1px solid #ccc;} */


.select_list {width: 240px;height: 100%;box-sizing: border-box;position: absolute;top:0px;left:0px;z-index: 80;background-color: #fff; border-right:1px solid #4761DE;}
#select_list_con{background-color:#FFFFFF;}
.select_list_tit{background-color: #fff;}
.select_list_tit p{margin-bottom:0; font-size:16px; font-weight:700; color:#fff;}
.select_list_tit {background-color: #4761DE;}
.select_list .select_list_tit p{color:#fff; font-size:16px; font-weight:600; font-family: 'Pretendard';}
.select_list .select_list_tit li:nth-child(1){width: 85px; margin:6px; color:#fff; float: left; padding: 5px; background-image: url('../../images/gis/icon_select.png');box-sizing: border-box;}
.select_list .select_list_tit li:nth-child(2){width: 115px;padding: 10px;float: left;box-sizing: border-box;}
.select_list .select_list_tit li .slideba {width: 120px; background-color: #000; padding-top: 10px; margin-left: 20px;}
.select_list .select_list_txt {width:100%;float: left;box-sizing: border-box;}
.select_list .select_list_txt dl {padding: 5px;position: relative;box-sizing: border-box;}
.select_list .select_list_txt dl dt {padding: 4px 0 0 35px;float:left;background: url('../../images/gis/bg_list.png') no-repeat 2px 3px;width: 100%;height: 30px;background-color: #efefef;box-sizing: border-box;}
.select_list .select_list_txt dl dt li {float:left; box-sizing:border-box;}
.select_list .select_list_txt dl dt li:nth-child(1){width: 150px;float:left;}
.select_list .select_list_txt dl dt li:nth-child(2){width: 50px;float:left;position: relative;top: -3px;}
.select_list .select_list_txt dl dt li:nth-child(3){float: right;position: relative;top: -1px;right: 5px;box-sizing: border-box;}
.select_list .select_list_txt dl dd {margin-left:35px;}
.select_list .select_list_txt dl dd li {float:left;font-size: 0.9em;width: 100%;line-height: 1.5em;}

#select_list_con .select_list_open{position:relative;}
#select_list_con .select_list_open a{display:inline-block;position:absolute;top:0px;left:-35px;width:50px;height:100%;}



/*패널을 정의한다*/
.pannel {position:absolute;top:43px;bottom:0;box-sizing:border-box;border-right: 1px solid #ccc;background: #fff;}

.pannel01{width:240px;z-index:799;left:0; height:calc(100vh - 85px);}
.pannel01.head-no{ height:calc(100vh - 43px);}
.pannel02{top:43px; left:0px;width: 240px; height:calc(100vh - 85px); z-index:650; border:1px solid #4761DE; border-radius:0 10px 10px 0; box-shadow: 2px 2px 20px rgba(161,161,161,0.12);}
.pannel02.head-no{top:43px; left:0px;width: 240px; height:calc(100vh - 43px); z-index:650; border:1px solid #4761DE; border-radius:0 10px 10px 0; box-shadow: 2px 2px 20px rgba(161,161,161,0.12);}
.pannel03{top:43px; right:-240px;width: 240px; height:100vh; z-index:650; transition: .3s; border:1px solid #4761DE; box-shadow: 2px 2px 20px rgba(161,161,161,0.12);}
/* .pannel04{top:0px; right:-530px;width:530px; height:100%; z-index:650; transition: .3s; border:1px solid #4761DE; box-shadow: 2px 2px 20px rgba(161,161,161,0.12); transition: .4s;} */
.pannel04{bottom:0px; right:-500px;width:500px; height:calc(100% - 42px); z-index:650; transition: .3s; border:1px solid #4761DE; box-shadow: 2px 2px 20px rgba(161,161,161,0.12); transition: .4s;}
.pannel04.slide-in4{right:0px; transition: .4s;}
.left_icon.slide_icon{right:520px; transition: .4s;}

.footer_data_board.slide-on{bottom:0px;}

/*슬라이더를 정의한다*/
.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

.pannel01.slide-in {
    animation: slide-in1 0.5s forwards;
    -webkit-animation: slide-in1 0.5s forwards;
}
.pannel01.slide-out {
    animation: slide-out1 0.5s forwards;
    -webkit-animation: slide-out1 0.5s forwards;
}

.pannel02.slide-in {
    animation: slide-in2 0.5s forwards;
    -webkit-animation: slide-in2 0.5s forwards;
}
/* .pannel02.slide-in.left-pannel {
    animation: slide-in-p 0.5s forwards;
    -webkit-animation: slide-in-p 0.5s forwards;
} */
.pannel02.tra-pannel02.slide-in {
    animation: slide-in-p 0.5s forwards;
    -webkit-animation: slide-in-p 0.5s forwards;
}
.pannel02.tra-pannel02.slide-in.left-pannel {
    animation: slide-in-p2 0.5s forwards;
    -webkit-animation: slide-in-p2 0.5s forwards;
}
.pannel02.slide-out {
    animation: slide-out2 0.5s forwards;
    -webkit-animation: slide-out2 0.5s forwards;
}

.pannel02-1.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}
.pannel02-1.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

.pannel03.slide-in3 {
    animation: slide-in3 0.5s forwards;
    -webkit-animation: slide-in3 0.5s forwards;
}
.pannel03.slide-out3 {
    animation: slide-out3 0.5s forwards;
    -webkit-animation: slide-out3 0.5s forwards;
}


@keyframes slide-in {
	0% {transform: translateX(-100%); }
	100% { transform: translateX(0%); }
}
@-webkit-keyframes slide-in {
	0% {-webkit-transform: translateX(-100%);}
    100% { -webkit-transform: translateX(0%);}
}

@keyframes slide-in1 {
	0% {left:0px;transform: translateX(-100%);}
	100% { left:0px;transform: translateX(0%);}
}
@-webkit-keyframes slide-in1 {
	0% {left:0px; -webkit-transform: translateX(-100%);}
    100% {left:0px; -webkit-transform: translateX(0%);}
}

@keyframes slide-in2 {
	0% { left:0px;transform: translateX(-100%); }
	100% { left:0px;transform: translateX(0%); }
}
@-webkit-keyframes slide-in2 {
	0% { left:0px;-webkit-transform: translateX(-100%); }
    100% {left:0px; -webkit-transform: translateX(0%); }
}
@keyframes slide-in-p {
	0% { left:0px;transform: translateX(0%); }
	100% { left:80px;transform: translateX(0%); }
}
@-webkit-keyframes slide-in-p {
	0% { left:0px;-webkit-transform: translateX(0%); }
    100% {left:80px; -webkit-transform: translateX(0%); }
}
@keyframes slide-in-p2 {
	0% { left:80px;transform: translateX(0%); }
	100% { left:0px;transform: translateX(0%); }
}
@-webkit-keyframes slide-in-p2 {
	0% { left:80px;-webkit-transform: translateX(0%); }
    100% {left:0px; -webkit-transform: translateX(0%); }
}

@keyframes slide-in3 {
	0% {transform: translateX(0%); }
	100% {transform: translateX(-100%); }
}
@-webkit-keyframes slide-in3 {
	0% {right:-240px; -webkit-transform: translateX(-100%); }
    100% {right:0px; -webkit-transform: translateX(0%); }
}

@keyframes slide-in4 {
	0% {transform: translateX(0%); }
	100% {transform: translateX(-100%); }
}
@-webkit-keyframes slide-in4 {
	0% {right:-530px; -webkit-transform: translateX(-100%); }
    100% {right:0px; -webkit-transform: translateX(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%);}
    100% { transform: translateX(-100%); }
}
@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}


@keyframes slide-out1 {
    0% {left:0px;transform: translateX(0%);}
    100% { left:0px;transform: translateX(-100%); }
}
@-webkit-keyframes slide-out1 {
    0% { left:0px;-webkit-transform: translateX(0%); }
    100% { left:0px;-webkit-transform: translateX(-100%); }
}


@keyframes slide-out2 {
    0% {  left:0px;transform: translateX(0%); transition: .5s;}
	100%{left:0px; transform: translateX(-100%);  transition: .5s;}
}
@-webkit-keyframes slide-out2 {
    0% {left:0px;-webkit-transform: translateX(0%);  transition: .5s;}
	100% { left:0px;  -webkit-transform: translateX(-100%);  transition: .5s;}
}

@keyframes slide-out3 {
    0% { transform: translateX(-240px);}
    100% { transform: translateX(0px); }
}
@-webkit-keyframes slide-out3 {
    0% { right:0px;-webkit-transform: translateX(-240px); }
    100% { right:0px;-webkit-transform: translateX(0px); }
}

@keyframes slide-out4 {
    0% { transform: translateX(-530px);}
    100% { transform: translateX(0px); }
}
@-webkit-keyframes slide-out4 {
    0% { right:0px;-webkit-transform: translateX(-530px); }
    100% { right:0px;-webkit-transform: translateX(0px); }
}


.pannel .tit_pannel {height: 44px;padding-left:23px;font-size: 16px;line-height:45px;background: #EBF0FF; color:#223A4A; font-weight:500; border-radius: 0 10px 0 0;}
.pannel .cont {position:absolute;top: 46px;bottom:0;left:0;right:0;padding-bottom:10px;}
.pannel .cont form{height:100%;}
/*.pannel .cont .k-icon{top:7px}*/
.pannel.search .cont:after {display:block; clear:both; content:''; height:25px;}
.pannel .input_area {padding: 9px 10px;font-weight: 500; overflow-y: scroll; height:calc(100% - 60px);}
.pannel .input_area::-webkit-scrollbar {width: 7px;}
.pannel .input_area::-webkit-scrollbar-thumb { background-color: #cacaca;}
.pannel .input_area::-webkit-scrollbar-track {background-color: #f0f4f9;}
.pannel .input_area.input_area {border-top:1px solid #cacaca;}
.pannel .input_area .tit1 {height:35px; margin-bottom:-1px; padding-left:20px; color:#fff; font-weight:400; font-size:15px; line-height:35px; background:#1dabde;}
.pannel .tap_pannel {position:relative; margin-bottom:-1px; border:1px solid #cacaca; border-bottom:1px solid #1dabde; overflow:hidden; z-index:10;}
.pannel .tap_pannel li {float:left; width:50%; background:#fff;}
.pannel .tap_pannel li.on {background:#1dabde;}
.pannel .tap_pannel li a {display:block; height:35px; line-height:35px; text-align:center;}
.pannel .tap_pannel li.on a {color:#fff;}
.pannel .k-textbox {height:30px;}
.pannel .k-textbox, .pannel .k-input {font-size: 12px;line-height: 2em;}
.pannel .box {/* border:1px solid #ddd; */background:#fff;}
.box.mt6 .form dt{width:auto; margin:0;}
.pannel .tit_toggle {border:1px solid #dedcdc; background:#fff;}
.pannel .tit_toggle+* {margin-top:-1px;}
.pannel .tit_toggle a {display:block; padding:0 15px; color:#000; line-height:38px; background:url(../../images/gis/ico_plus.png) no-repeat 95.2% center;}
.pannel .tit_toggle.open a {background-image:url(../../images/gis/ico_minus.png);}
.tit_toggle+.sort_condition {display:none;}

.pannel .serch_f {float: left;width: 100%;position: absolute;bottom:60px;box-sizing: border-box;border-top: 1px solid #ccc;padding-top: 5px; background: #fff;}
.pannel.head-no .serch_f {bottom:20px;}
.pannel .serch_f li {box-sizing:border-box;float: left;margin-right: 3px;}
.pannel .serch_f li.checked {float: left;width: 10%;padding-top: 18px;text-align: center;margin-left: 10px;}
.pannel .serch_f li.text {float: left;width: 30%;padding-top: 20px;text-align: left;}
.pannel .serch_f li .btn_search {float: right;display:block;margin-top:10px;width: 115px;height:37px;line-height:37px;font-size:15px;background: #1dabde;box-sizing: border-box;border-radius: 6px;}
.pannel .btn_close_pannel {position:absolute; top:0; right:0; width:39px; height:45px; text-indent:100%; white-space:nowrap; background:url(../../images/gis/ico_arr.png) no-repeat center center; overflow:hidden;}
.pannel .btn_close_pannel01 {position:absolute; top:0; right:0; width:39px; height:45px; text-indent:100%; white-space:nowrap; background:url(../../images/gis/close_wh.png) no-repeat center center; overflow:hidden;}/*추가*/
.btn_close_pannel03 {position:absolute; top:0; right:0; width:39px; height:45px; text-indent:100%; white-space:nowrap; background:url(../../images/gis/close_wh_r.png) no-repeat center center; overflow:hidden;}/*추가*/

#pannel02_02 .serch_f{float: none;width: 100%;position: absolute;}

/* 
.pannel .btn_open_pannel01 {display:none;position:absolute;top: 10px;right: -192px;width: 85px;height: 30px;text-indent:100%;z-index: 600;white-space:nowrap;background:url(../../images/gis/btn_pannel_open_all.png) no-repeat center center;overflow:hidden;} */


#leftSide .pannel01_menu{position:absolute;top:60px;left:20px;z-index: 60;}
#leftSide .btn_open_pannel01{width: 94px;height:37px;text-indent:100%;white-space:nowrap;background:url(../../images/gis/btn_pannel_open_all.png) no-repeat center center;overflow:hidden;}

.pannel .btn_open_pannel {display:none; position:absolute; right:-372px; width:30px; height:77px; text-indent:100%; white-space:nowrap; background:url() no-repeat; z-index:700; overflow:hidden;}
.pannel.menu .btn_open_pannel {top:244px; }
.pannel.search .btn_open_pannel {top:244px; }
.pannel.result .btn_open_pannel {top:322px; right:-35px; background-image:url();}
.pannel .input_area .desc {margin-bottom:12px; padding:0 10px; color:#000; font-weight:400;}
.pannel address {position:absolute; bottom:0; left:0; right:17px; padding:8px 0 10px 17px; background:#e9e9e9;}
.pannel .bbs_info {padding:10px 15px; border:1px solid #ddd; border-bottom:0; color:#000; background:#fff;}
.pannel .result_area {position:absolute;top:15px;bottom:15px;left:15px;right:15px;}
.pannel .tb_result {position:absolute;top: 0;bottom:0;left:0;right:0;}
.pannel .tb_result * {font-size:13px;}

.data_board {position:absolute;top:0px;bottom:0;right: -415px;box-sizing:border-box;width: 415px;padding: 15px;border-left: 1px solid #ccc;background: #ffffff;z-index:500;border-top: 1px solid #ccc;}
.data_board .btn_databoard {position:absolute;top:5%;left: -21px;width:28px;height:147px;;text-indent:100%;white-space:nowrap;background:url(../../images/gis/btn_databoard_open.png) no-repeat;}
.data_board .head {position:relative;height: 23px;margin:-15px -15px 0;padding:15px 20px 10px;/* border-bottom:1px solid #1dabde; */background:#fff;}
.data_board .head .tit {font-size:20px; line-height:25px;}
.data_board .head .date {font-size:14px; line-height:25px; font-family:'Noto Sans KR', 'Malgun Gothic';}
.data_board .head .btnset_view {position:absolute; top:50%; right:15px; margin-top:-18px;}
.data_board .head .btnset_view a {display:inline-block; width:35px; height:35px; border-radius:2px; line-height:35px; text-align:center; vertical-align:middle; background:#1dabde;}
.data_board .head .btnset_view .k-icon {margin-top:-2px; color:#fff; font-size:20px;}
.data_board .tit_data {margin-top:20px; padding:0 15px; color:#fff; font-weight:500; font-size:16px; line-height:38px; background:#a7a7a7;}
.data_board .tit_data:first-child {margin-top:0;}
.data_board .tit_data .date {margin-left:5px; font-size:13px;}
.data_board .cont {position:absolute;top:0;left:0;bottom:0;padding:20px 15px;overflow-y:auto;}
.data_board .head+.cont {top:77px;}
.data_board .tb_view th, .data_board .tb_view td {height:25px; padding:6px 10px; font-size:13px; line-height:16px;}
.data_board .tb_view th {padding-right:3px; text-align:right; background:none;}
.data_board .tb_view td {border-left:0;}

#right_data_board{background-color:#FFFFFF;}
.data_board .right_title{position:relative;font-size: 18px;font-weight: 400;border-left: 3px solid #008ccf;padding-left: 5px;}


.footer_data_board {width:100%; height:310px;position:absolute;box-sizing:border-box;margin-top:22px; z-index: 600;right:0px;bottom:-310px;transition: All 0.3s ease;
	-webkit-transition: All 0.4s ease;
	-moz-transition: All 0.4s ease;
	-o-transition: All 0.4s ease;}
/* .footer_data_board.on{bottom:0px;} */
.footer_data_board.on {
	transition: All 0.4s ease;
	-webkit-transition: All 0.4s ease;
	-moz-transition: All 0.4s ease;
	-o-transition: All 0.4s ease;
}
/* #footer_data_board_con{background-color:#ffffff;} */
#footer_btn{position:relative;}
/* #footer_btn_con button{position:absolute;top:0px;right:0px;width:165px;height:30px;} */
#footer_btn_con button img{position:absolute;top:11px;right:12px;}
#footer_btn_con .range_slide{position:absolute;top:0px;left:10px; width:105px;}

#footer_data_con{width:100%;height: 100%; overflow-y:clip;}


.footer_data_board button{position:absolute;top:0px;left:0;width:165px;height:30px;}

.footer_data_board .range_slide{display:none;}
.footer_data_board #footer_btn{position: absolute;top:-22px;left: 50%; transform:translateX(-50%); width: 165px;height: 30px;text-indent:100%;white-space:nowrap; background: url(../../images/gis/footer_btn_databoard_open1.png) no-repeat top right;box-sizing: border-box;}
.footer_data_board.on #footer_btn{position: absolute;top:-30px;left: 50%; transform:translateX(-50%); width: 165px;height: 35px;text-indent:100%;white-space:nowrap; background: url(../../images/gis/footer_btn_databoard_close1.png) no-repeat; box-sizing: border-box;}
.footer_data_board.on .range_slide{display:inline-block;}
.footer_data_board .fot_excel p{position:absolute;top:10px;right:12px;width:45px; height:10px;}

.footer_data_board .footer_close_btn img{display:none;}
.footer_data_board.on .footer_close_btn img{display:block; position:absolute;top:10px;right:12px;width:10px; height:10px;}


.range_slide{width: 10px; background-color: #c5c5c5; margin-left: 0px; margin-top: 14px; height:3px;}



.footer_data_board .head {position:relative;height: 25px; margin:-15px -15px 0; padding: 9px 20px 3px;border-bottom: 1px solid #b6b6b6;border-top: 1px solid #b6b6b6; background:#fff;}
.footer_data_board .head .tit {font-size:20px; line-height:25px;}
.footer_data_board .head .date {font-size:14px; line-height:25px; font-family:'Noto Sans KR', 'Malgun Gothic';}
.footer_data_board .head .btnset_view {position:absolute; top:50%; right:15px; margin-top:-18px;}
.footer_data_board .head .btnset_view a {display:inline-block; width:35px; height:35px; border-radius:2px; line-height:35px; text-align:center; vertical-align:middle; background:#1dabde;}
.footer_data_board .head .btnset_view .k-icon {margin-top:-2px; color:#fff; font-size:20px;}
.footer_data_board .tit_data {margin-top:20px; padding:0 15px; color:#fff; font-weight:500; font-size:16px; line-height:38px; background:#a7a7a7;}
.footer_data_board .tit_data:first-child {margin-top:0;}
.footer_data_board .tit_data .date {margin-left:5px; font-size:13px;}
.footer_data_board .cont {position:absolute;top:0;left:0;bottom:0;padding:20px 15px;overflow-y:auto;}
.footer_data_board .head+.cont {top:77px;}
.footer_data_board .tb_view th, .data_board .tb_view td {height:25px; padding:6px 10px; font-size:13px; line-height:16px;}
.footer_data_board .tb_view th {padding-right:3px; text-align:right; background:none;}
.footer_data_board .tb_view td {border-left:0;}

.footer_data_board .footer_con01{width: 220px;min-width: 215px;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con01 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01 ul.body{text-align: left;font-size: 12px;padding: 5px 8px;}
.footer_data_board .footer_con01 ul.body span{float:left;text-align:left;width: 40%;height: 17.5px;box-sizing: border-box;margin-right: 5px;padding-left: 3px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con01 ul.body li{float:left;text-align:left;width: 56%;height: 17.5px;padding-left: 10px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

.footer_data_board .footer_con02{width: 140px;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con02 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con02 ul.body{text-align: left;padding: 5px 10px;font-size: 12px;}
.footer_data_board .footer_con02 ul.body span{float:left;text-align:left;width: 56%;height: 17.5px;box-sizing: border-box;margin-right: 5px;padding-left: 3px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con02 ul.body li{float:left;text-align:left;width: 36%;height: 17.5px;padding-left: 10px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

.footer_data_board .footer_con03{width: 50%;/* min-width: 600px; */height: 100vh;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con03 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con03 ul.tit li {width: 99%;box-sizing: border-box;}
.footer_data_board .footer_con03 ul.tit li dl.btn_area {/* width: 130px; */text-align: center;float: right;box-sizing: border-box;}
.footer_data_board .footer_con03 ul.tit li dl.btn_area dd{float: left;box-sizing: border-box;width: 25px;}
.footer_data_board .footer_con03 ul.body{text-align: left;padding: 8px;font-size: 12px;}
.footer_data_board .footer_con03 ul.body li{float:left;text-align:left;width: 100%;height: 183px;box-sizing: border-box;/* background-color: #efefef; */}

.footer_data_board .footer_con04{/* width: 100%; */min-width: 344px;float: right;border-right: 1px solid #ccc;}
.footer_data_board .footer_con04 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con04 ul.body{text-align: left;padding: 8px;font-size: 12px;}
.footer_data_board .footer_con04 ul.body li{float:left;text-align:left;width: 100%;box-sizing: border-box;}
.footer_data_board .footer_con04 ul.body li .flash_info{box-sizing: border-box;position: relative;background-color: #efefef;padding-bottom: 10px;}
.footer_data_board .footer_con04 ul.body li .flash_info li{/* width:100%; */box-sizing: border-box;float:left;text-align: center;line-height: 1.5em;padding: 10px 0 12px 0;background-color: #efefef;}
.footer_data_board .footer_con04 ul.body li .flash_info li.guide a{font-size: 12px;color:red;text-decoration: underline;}

/*
.footer_data_board .footer_con01_01 {width: 16.666%;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con01_01 ul.tit {text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01_01 ul.body {text-align: left;font-size: 12px;padding: 5px 8px;}
.footer_data_board .footer_con01_01 ul.body table {float:left;text-align:left;width: 40%;height: 17.5px;box-sizing: border-box;margin-right: 5px;padding-left: 3px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con01_01 ul.body li {float:left;text-align:left;width: 56%;height: 17.5px;padding-left: 10px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

/*하단 - 도로안전정보 관련 데이타*/

.footer_data_board .footer_con01_01{width: 210px;min-width: 210px;float: left;border-right: 1px solid #ccc;height: 100vh;}
.footer_data_board .footer_con01_01 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01_01 ul.body{text-align: center;}
.footer_data_board .footer_con01_01 ul table{text-align: center;margin: 10px auto;width: 90%;border: 1px solid #ccc;}
.footer_data_board .footer_con01_01 ul table th {padding: 10px 5px;background-color: #d1e5ec;font-size: 12px;font-weight: 600;}
.footer_data_board .footer_con01_01 ul table td {padding: 30px 20px;font-size: 2em;color: #0080af;font-weight: 600;/* border-right: 1px solid #ccc; */}
.footer_data_board .footer_con01_01 ul li.txt {text-align: right;padding: 0 15px;font-size:12px;}

.footer_data_board .footer_con01_02{width: 225px;min-width: 225px;height: 100vh;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con01_02 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01_02 ul.body{margin-top: 10px;text-align: left;padding: 5px 10px;font-size: 12px;}
.footer_data_board .footer_con01_02 ul.body span{float:left;text-align:left;width: 38%;box-sizing: border-box;margin-right: 5px;padding: 10px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con01_02 ul.body li{float:left;text-align:left;width: 58%;padding: 10px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

.footer_data_board .footer_con01_03{width: 245px;min-width: 245px;height: 100vh;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con01_03 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01_03 ul.body{margin-top: 10px;text-align: left;padding: 5px 10px;font-size: 12px;}
.footer_data_board .footer_con01_03 ul.body span{float:left;text-align:left;width: 45%;box-sizing: border-box;margin-right: 5px;padding: 15px 5px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con01_03 ul.body li{float:left;text-align:left;width: 50%;padding: 15px 5px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

.footer_data_board .footer_con01_04{width: 200px;min-width: 200px;height: 100vh;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con01_04 ul.tit {text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con01_04 ul.body h2 {text-align: center;color: green;margin: 10px 14px;padding: 20px;background-color: #d0e5ec;box-sizing: border-box;border-radius: 10px;font-size: 2.3em;font-weight: 600;}
.footer_data_board .footer_con01_04 ul.body span {float:left;text-align:left;width: 20%;box-sizing: border-box;margin-left: 18px;margin-right: 5px;padding: 6px;font-size: 12px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con01_04 ul.body li {float:left;text-align:left;width: 60%;padding: 6px;box-sizing: border-box;border-bottom: 1px solid #ccc;font-size: 12px;}

.red {color:red}
.yellow {color:#ff9654}
.green {color:green}

/*하단 _ 위험운전행동정보*/

.footer_data_board .footer_con02_01{width: 265px;min-width: 245px;height: 100vh;float: left;border-right: 1px solid #ccc;}
.footer_data_board .footer_con02_01 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con02_01 ul.body{margin-top: 10px;text-align: left;padding: 5px 10px;font-size: 12px;}
.footer_data_board .footer_con02_01 ul.body span{float:left;text-align:left;width: 15%;box-sizing: border-box;margin-right: 5px;padding: 15px 5px;font-weight: 500;border-bottom: 1px solid #ccc;}
.footer_data_board .footer_con02_01 ul.body li{float:left;text-align:left;width: 82%;padding: 15px 5px;box-sizing: border-box;border-bottom: 1px solid #ccc;}

.footer_data_board .footer_con02_02{width: 700px;min-width: 500px;float: left;border-right: 1px solid #ccc;height: 100vh;}
.footer_data_board .footer_con02_02 ul.tit{text-align: center;border-bottom: 1px solid #ccc;padding: 10px;font-weight: 500;}
.footer_data_board .footer_con02_02 ul.body{text-align: center;}
.footer_data_board .footer_con02_02 ul table{text-align: center;margin: 10px auto;width: 90%;border: 1px solid #ccc;}
.footer_data_board .footer_con02_02 ul table th {padding: 10px 5px;background-color: #d1e5ec;font-size: 12px;font-weight: 600;}
.footer_data_board .footer_con02_02 ul table td {padding: 13px 20px;font-size: 1.2em;/* color: #0080af; *//* font-weight: 600; *//* border-right: 1px solid #ccc; */}
.footer_data_board .footer_con02_02 ul li.txt {text-align: right;padding: 0 15px;font-size:12px;}






.form {/* padding: 11px 2px; */overflow:hidden;}
.form dt, .form dd {float:left;font-size:14px;line-height: 22px;/* width: 600px; */}
.form dt {width: 100%;margin: 15px 0 2px 0; font-size:16px; font-weight:600; color:#223A4A; font-family: 'Pretendard';}
.form dt span {float: right;line-height: 16px;}
.form dt span li{padding: 2px 8px;margin-right: 5px;text-align: center;box-sizing: border-box;background-color: #000;border-radius: 5px;font-size: 0.8em;color: #efefef;font-weight: 100;float: left;height: 20px;}
.form dd {/* width: calc(100%); */}
.form .m_tit {width: 96%;background-color: #1eabde;border-radius: 8px;padding: 3px 0 3px 8px;margin-top: 5px;color: #fff;font-weight: 300;}

.option li {padding:12px 15px; border-top:1px solid #dedcdc;}
.option:first-child li:first-child {border-top:0;}
.option li .inner {padding:10px; border:1px solid #ddd;}
.option li label {display:block; height:30px; border:1px solid #ddd; margin:-11px; padding:0 10px; font-weight:400; line-height:30px; cursor:pointer; overflow:hidden;}
.option li label input {float:right; margin-top:9px;}
.option li label.on {background:#c7dac1;}
.option li label.on+.input {margin-top:20px;}
.option li .input {display:none; clear:both; overflow:hidden;}

/* .k-grid{box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} */
.k-grid tbody, .k-grid tfoot, .k-grid thead{text-align: center !important;}
.k-filter-row th, .k-grid-header th.k-header{text-align: center;}
.k-grid td, .k-grid th{text-align: center;}
.k-grid-header{background:#EBF0FF !important; background-color:inherit; background-position:inherit; background-image: inherit; padding-right:0px !important;}
.k-autocomplete, .k-draghandle, .k-dropdown-wrap, .k-grid-header, .k-grouping-header, .k-header, .k-numeric-wrap, .k-pager-wrap, .k-panelbar .k-tabstrip-items .k-item, .k-picker-wrap, .k-progressbar, .k-state-highlight, .k-tabstrip-items .k-item, .k-textbox, .k-toolbar, .km-pane-wrapper>.km-pane>.km-view>.km-content{background-color: inherit; border-top:1px solid #4761de;}
.k-filter-row th, .k-grid-header th.k-header{border-width:0px;}
.k-grid td, .k-grid th{padding:6px 12px; border-width:0px;}
.k-grid-header th.k-header>.k-link{padding:10px 12px;font-weight: 600;}
.k-grid tr.k-alt{background-color: #fff;}
.k-pager-numbers-wrap select.k-dropdown, .k-pager-numbers-wrap select.k-dropdown-list, .k-pager-numbers-wrap select.k-dropdownlist{display:none !important;}
.k-pager-numbers .k-link.k-selected{background-color:#4761DE;}
.k-pager, .k-pager-wrap{padding:3px 12px;}
.k-pager-nav, .k-pager-numbers .k-link, .k-pager-refresh{width:27px; height:27px; min-width:auto;}
.k-pager-wrap>.k-link{border-width:0px;}	
.k-grid-content k-auto-scrollable{height:inherit !important;}
.k-grid tr:hover{background-color: #EBF0FF;}
.k-auto-scrollable{height:calc(100% - 80px) !important;}

#chart g{width:716px;}
.pannel03_cont{height:100%; overflow-y: scroll;}
.pannel03 .demo-section ul {margin: 0; padding: 0;}
.pannel03 .demo-section ul li {list-style-type: none; margin: 0; padding: 8px 10px 8px 20px; min-height: 28px; line-height: 28px; vertical-align: middle; border:1px solid #AEB5D6; font-size:13px; font-weight:600; color:#223A4A;}
.pannel03 .demo-section ul li:nth-child(2n-1){background-color:#F2F5FF;}
.pannel03 .demo-section ul li:nth-child(2n){background-color:#F1F3F8;}
.pannel03 .demo-section {min-width: 220px; padding: 0;}
.pannel03_cont::-webkit-scrollbar {
    width: 10px;
  }
.pannel03_cont::-webkit-scrollbar-thumb {
    background-color: #fff;
	border-radius: 20px;
  }
.pannel03_cont::-webkit-scrollbar-track {
    background-color: #E3E6E9;
  }
  .hover_y{display:none;}
  .hover_n{display:block;}
.mo_pop:hover .hover_y{display:block;}
.mo_pop:focus .hover_y{display:block;}
.mo_pop:focus .hover_n{display:none;}
.mo_pop:hover .hover_n{display:none;}


.pannel03 	.demo-section ul li .k-switch {float: left; margin-right:20px;}
.pannel03 .settings-head {height: 66px; background: url('../content/web/switch/settings-title.png') no-repeat 20px 50% #2db245;}
.k-switch-md .k-switch-track{height:7px; width:27px;}
.k-switch-md .k-switch-thumb{width:15px; height:15px;}
.k-switch-md{width:27px;}
.k-switch-md.k-switch-off .k-switch-thumb-wrap{left:0px;}
.k-switch-off.k-focus .k-switch-track, .k-switch-off:focus .k-switch-track{outline:none !important;}
.k-switch-off.k-state-focused, .k-switch-off:focus{box-shadow: none !important;}
.k-switch-on.k-state-focused, .k-switch-on:focus{box-shadow: none !important;}
.k-switch-md.k-switch-on .k-switch-thumb-wrap{left:calc(100% - 7px);}
.k-switch-md.k-switch-off .k-switch-thumb-wrap{left:7px;}
.k-switch-off .k-switch-thumb{background-color: #fff; border:none; box-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.k-switch-off .k-switch-track{background-color: #686868; border-color:transparent; color:#686868;}
.k-switch-on .k-switch-track{background-color: #3ECFCF; border-color:transparent; color:#3ECFCF;}


/******************** 20230228 css 추가 수정 *********************/
.pannel01 .accordion{height:calc(100% - 328px); overflow-y: scroll;}
.pannel01 .accordion::-webkit-scrollbar{width:4px;}
.pannel01 .accordion::-webkit-scrollbar-thumb {background-color:#a9a9a9; border-radius: 5px;}
.right-tbl-wrap{display: block !important; height:100%;}
#rightSide .tabcontent_fot{height:calc(100% - 53px); padding:17px 20px;}

#right_btn{position:absolute; left:-27px; top:50%; transform: translateY(-50%);}
.pannel04 #right_btn_con{width:26px; height:130px; background: url('../../images/gis/footer_btn_databoard_open.png') no-repeat top right; cursor: pointer;}
.pannel04.slide-in4 #right_btn_con{width:26px; height:130px; background: url('../../images/gis/footer_btn_databoard_close.png') no-repeat top right;}

#footer_data_tcon{position:absolute; width:calc(100% - 240px);height: 310px; transition: .5s; background-color: #E4EAF1; top: 0px; right:0px;}
#footer_data_tcon.tra-fot{width:calc(100% - 320px);}
.fot_wrap{position:relative;}
#footer_data_tcon.slide-left{width:100%; transition: .5s; transform: translateX(0px);}
#footer_data_tcon.slide-left2{width:calc(100% - 84px); transition: .4s; transform: translateX(0px);}
.slide-up{top:43px; right:-240px;width: 240px; height:calc(100% - 353px); transition: .37s; z-index:650; border:1px solid #4761DE; box-shadow: 2px 2px 20px rgba(161,161,161,0.12); overflow-y: hidden;}
.footer_data_board.on.slide-in5{width:calc(100% - 500px); right:500px;}
.tra-rdo{display:flex; justify-content: space-around;}
.tra-rdo div input{margin-right:8px;}
.tra-rdo div label{font-size:14px;}
.live-rdo{display:flex; justify-content: space-evenly;}

.plan-pannel .select_list_tit p{padding:16px 24px;}
.tabnav_right{display:flex; padding:11px 0 7px;}
.tabnav_right li{margin-right:2px;}
.tabnav_right li a{padding:6px 13px; border:1px solid #dbdbdb; border-radius: 5px 5px 0 0;}
.tabnav_right li a.active{background: #4761DE; color:#fff; border-radius: 5px 5px 0 0; border:none;}
.right_cont{position:relative; border:1px solid #dbdbdb; border-radius: 0 0 10px 10px; height:100%;}
/* 스크롤바 설정*/
.footer_cont.right::-webkit-scrollbar{
    width: 6px;
}

/* 스크롤바 막대 설정*/
.footer_cont.right::-webkit-scrollbar-thumb{
    height: 17%;
    background-color: #223A4A;
    border-radius: 10px;  
}

/* 스크롤바 뒷 배경 설정*/
.footer_cont.right::-webkit-scrollbar-track{
    background-color: #fff;
}
.top-box{display: flex; justify-content: flex-end; padding:10px 10px 0;}
#rightSide .top-box ul.top-info li:nth-last-child(1){margin-right:0px;}

.top-box01{text-align: right;}
.chk-wrap{margin:10px;display: flex;align-items: center;justify-content: flex-end;}
.chk-wrap label{margin-left: 5px;}
.pannel02.tra-pannel02{left:84px;}
.pannel02-1{background-color: #4761DE; width:85px; height:100vh; position:absolute; top:43px; left:0;z-index: 99; display: flex; flex-direction: column; align-items: center; padding:43px 0 0;}
.pannel02-1 .pannel02_btn{background: #ebf0ff; margin-bottom:20px; display: flex; flex-direction: column; justify-content: center; border-radius: 15px; width:73px; padding:17px 0;}
.left-pannel{transform: translateX(-85px); transition: .4s;}
.pannel02.tra-pannel02.slide-out #footer_data_tcon.tra-fot{width:calc(100% - 85px);}
.pannel03 .select_list_tit p{padding:18px;}
.pannel02_btn{text-align: center;}
.pannel02_btn h6{font-size:13px; padding-top:8px; color:#000; line-height: 17px;}
.pannel02_btn p{padding-bottom:5px; font-size:14px; color:#000; line-height:18px;}
.pannel02-1 .btn_close_pannel{background: url('../../images/gis/ico_arr_h.png') no-repeat center center;}

/****** live_footer_탭 그리드 정보/*******/
/* common */
.tab_fot .chart-flex{display: flex;align-items: center;justify-content: center; width:100%;}
.tab_fot .chart-flex.chart-flex02{padding:20px 0;}
.tab_fot .chart-flex .donut-wrap{width: 50%;}
.tab_fot .k-chart{height: auto !important;margin: 0 auto !important;}
.tab_fot .k-chart text{font-family: 'Pretendard-Regular' !important;font-size: 13px !important;}
.tab_fot h3{font-size: 14px;font-weight: bold;padding: 8px 15px;border-bottom: 1px solid #9eafff;background-color: #EBF0FF;}
.tab_fot table.tab_tb tr{text-align: center;border-bottom: 1px solid #ddd;}
.tab_fot table.tab_tb tr th.tb-th{background-color: #EBF0FF; padding: 16px 6px;font-weight: 600;font-size: 13px;}
.tab_fot table.tab_tb tr td.tb-td{text-align: center;font-size: 13px;padding: 16px 10px;}
.tab_fot .k-grid-header th.k-header>.k-link, .tabcontent_fot .k-grid-header th.k-header>.k-link{padding: 16px 20px;font-size: 13px;}
.tab_fot .k-grid td, .tabcontent_fot .k-grid td{font-size: 13px;padding: 6px 12px;line-height: 15px;}
#rightSide .k-grid-header th.k-header>.k-link{padding: 15px 10px;font-size: 13px;}
#rightSide .k-grid td{font-size: 13px;padding: 6px 10px;line-height: 15px;}

/* 탭01 - 그리드정보 */
.tab_fot .girdInfo, .tab_fot .shipInfo{background-color: #fff; margin-right: 10px;box-shadow: 3px 3px 6px rgb(0 0 0 / 16%); border:1px solid #dbdbdb;}
.tab_fot .girdInfo01{width: 30%;}
.tab_fot .chart_tit{display:flex; justify-content: center;}
.tab_fot .chart_tit ul{display:flex; background-color: #dde9f5; padding:8px; border-radius: 5px; margin-top:8px; margin-right:10px; margin-bottom:5px;}
.tab_fot .chart_tit ul li:nth-child(2n-1){font-size:13px; padding-right:5px;}
.tab_fot .chart_tit ul li:nth-child(2n){font-size:13px; font-weight:600; padding-right:5px; color:#4761DE;}
.tab_fot .girdInfo02{width: 25%;}
.tab_fot .girdInfo02 table.tab_tb tr th.tb-th{padding: 25px 20px;}
.tab_fot .girdInfo03{width: 45%;margin-right: 0;} 
.tab_fot .girdInfo03 .txt{font-size: 14px;padding: 8px 15px;line-height: 22px;}

/* 탭02 - 선박상세정보 */
.tab_fot .shipInfo01{width: 35%;}
.tab_fot .shipInfo02{width: 35%;}
.tab_fot .shipInfo03{width: 40%;margin-right: 0;}

/******  오른쪽 판넬 바 *******/
#rightSide .select_list_tit{display: flex;align-items: center;justify-content: space-between;padding: 12px 20px;}
#rightSide .fot_excel{position: inherit; display: flex;align-items: center;justify-content: space-around; width:90px !important; height:30px !important; cursor: pointer; background-color: #fff; border-radius: 5px;padding:6px 9px;}
#rightSide .fot_excel img{float:left; padding-right:5px;}
#rightSide .top-box ul.top-info{display: flex;align-items: center;margin-bottom: 10px;}
#rightSide .top-box ul.top-info li{font-size: 13px;margin-right: 10px;background-color: #dde9f5;padding: 7px;border-radius: 5px;}
#rightSide .top-box ul.top-info li span.num_info{margin-left: 5px;color: #4761de;font-weight: bold;}
#rightSide .top-box ul.top-info li span.num_color{color: #f3283b;}
#rightSide .tab_fot.tab-right{height:100%;}
#rightSide .tabcontent_right{height:calc(100% - 70px);}
#rightSide 
#rightSide 
#rightSide 


/* live_footer_탭 그리드 정보*/
.tab_fot .girdInfo01{width: 25%;}
.tab_fot .chart_tit{display:flex; justify-content: center;}
.tab_fot .chart_tit ul{display:flex; background-color: #dde9f5; padding:8px; border-radius: 5px; margin-top:8px; margin-right:10px; margin-bottom:5px;}
.tab_fot .chart_tit ul li:nth-child(2n-1){font-size:14px; padding-right:5px;}
.tab_fot .chart_tit ul li:nth-child(2n){font-size:14px; font-weight:600; padding-right:5px; color:#4761DE;}
.tab_fot .donut-wrap .k-chart{height: auto !important;margin: 0 auto !important;}
.tab_fot .donut-wrap .k-chart text{font-family: 'Pretendard-Regular' !important;font-size: 13px !important;}
.tab_fot .girdInfo02{width: 30%;}
.girdInfo02 table tr th.grid-th{width: 2% !important;}
.tab_fot .girdInfo03{width: 45%;} 
.tab_fot .girdInfo03 .txt{font-size: 14px;padding: 8px 15px;line-height: 22px;}

/****** 운항이력 *******/
.tab_fot .naviInfo{background-color: #fff;margin-right: 20px;box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.tab_fot .naviInfo01{width: 65%;background-color: transparent;box-shadow: none; padding:10px 0;}
.tab_fot .naviInfo01 .k-grid td{padding: 5px 12px;}
.tab_fot .naviInfo02{width: 35%;margin-right: 0;background-color: transparent;box-shadow: none; padding:10px 0;}
.tab_fot .naviInfo02 .chart_wrap{padding:10px 15px;background-color: #fff;box-shadow: 0 3px 6px rgb(0 0 0 / 16%); overflow: auto;}
.k-grid-header{border-top: 0;}
.tab_fot .d_chartWrap01{width: 50%;}
.tab_fot .d_chartWrap02{width: 50%;margin-right: 0;}
.tab_fot .chart-flex .dchart-wrap{width: 40%;}
.tab_fot .chart-flex .legend-wrap{width: 60%;}
.tab_fot .chart-flex .legend-wrap ul.legend{display: flex;align-items: center;}
.tab_fot .chart-flex .legend-wrap ul.legend01{margin-bottom: 25px;}
.tab_fot .chart-flex .legend-wrap ul.legend li{display:flex; align-items: center; margin-right: 18px;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color-box{width: 10px;height: 10px;display: inline-block;margin-right: 10px;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color01{background-color: #176e6b;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color02{background-color: #439A97;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color03{background-color: #62B6B7;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color04{background-color: #97DECE;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color05{background-color: #CBEDD5;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color06{background-color: #E8D5C4;}
.tab_fot .chart-flex .legend-wrap ul.legend li span.color07{background-color: #616770;}

/****** 여객선 교통정보 서비스 *******/
.gis .info_bottom.fot_tbl12 .cont03 table.tab_tb tr td{padding: 8px 10px;}
.gis .info_bottom.fot_tbl12 .cont03 table.tab_tb tr th{padding:18.7px 10px;}


/*230303*/
.left_icon.slide-icon{transform: translateX(-530px); transition: .5s;}
.left_icon.plan{display:flex; flex-direction: row-reverse; transform:rotate(-90deg); top:140px;}
.__range{
  background: #fff;
  border:1px solid #6d6d6d;
  padding:4px;
  display: flex;
  align-items: center;
}
input[type=range] {
    -webkit-appearance: none; /* 기본슬라이드 숨기기*/
    width: 100%; /* Firefox에서는 특정한 넓이가 필요*/
    background: transparent; /* Chrome에서 투명하게 출력 */
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
  }
  
  input[type=range]:focus {
    outline: none; /* input range에 포커스 되었을 경우 기본 블러처리 제거 */
  }
  
  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* IE에서 기본슬라이드 숨기기  */
    background: transparent; 
    border-color: transparent;
    color: transparent;
  }
.__range input[type=range]{
    width:130px;
    height:3px;
}
.__range input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none;
    background: #fff;
    border:1px solid #4761DE;
    cursor: pointer; 
    height: 17px; width:8px;
    border-radius: 5px;

  }
.up-btn{
    background: #fff;
    border:1px solid #6d6d6d;
    position:relative;
    padding:13px;
    border-left:none;
}
.down-btn{
    background: #fff;
    border:1px solid #6d6d6d;
    position:relative;
    padding:13px;
    border-right:none;
}
/* .up-btn::before{
    content:'';
    position:absolute;
    width:13px;
    height:1px;
    background: #6d6d6d;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
} */
.up-btn::before{
    content:'+';
    position:absolute;
    color: #6d6d6d;
    top:4%;
    left:0%;
    font-size: 20px;
    font-weight: 500;
    width:28px;
    height:27px;
}
/* .up-btn::after{
    content:'';
    position:absolute;
    width:13px;
    height:1px;
    background: #6d6d6d;
    top:50%;
    left:28%;
    transform:rotate(90deg);
} */
.down-btn::before{
    content:'-';
    position:absolute;
    color: #6d6d6d;
    bottom:0%;
    right:0%;
    font-size: 20px;
    font-weight: 500;
    transform: rotate(90deg);
    width:28px;
    height:27px;
}

/*230306 tooltip*/
.select_list_tit.plan{position:relative;}
.tooltip-ico{position:absolute; top:12px; right:70px; width:20px; height:20px;}
.tooltip { position: absolute; top:11px; right:68px; width:20px; display: block; opacity: 1;} 
.tooltip button{color:#fff;}
.tooltip .tooltiptext { display:none; width:320px;  background-color: #fFF; color: #444; border-radius: 8px; border: 1px solid #DCE5EE; padding: 15px 13px; position: absolute; z-index: 1; box-shadow: 2px 2px 5px #38465d1f; } 
.tooltiptext.on{ display: block; } 
.tooltip:hover .tooltiptext { display: block; } 
.tooltip:hover .tooltiptext p.tool-p span{font-weight:600;} 
.tooltip .tooltiptext p.tool-p {font-weight:400; line-height: 20px; font-size: 13px; color:#000 !important; padding:0px;}
.tooltip .tooltiptext p.tool-p.first{padding-bottom:8px;}
.tooltip .tooltip-left { top: -14px; right: 108px; } 
.tooltip .tooltip-left::after { top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent #fff; } 
.pannel01 .tooltip .tooltip-right { top: -47px; left: 33px; } 


.accordion-item.plan button .tool-wrap{position:absolute; top:14px; right:40px; width:20px;}
.accordion-item.plan .accordion-header{position:relative;}
.accordion-item.plan .tooltip .tooltiptext { display:block; width:270px;  background-color: #D7EEFF; color: #444; border-radius: 6px; padding: 15px 13px; position: absolute; z-index: 1; box-shadow: 2px 2px 5px #38465d1f; } 

/*230313 추가 수정*/
.tbl-num ul{display: flex; justify-content: center; margin-top:15px; align-items: center;}
.tbl-num ul li{padding-right:5px; font-size:14px; cursor: pointer;}
.tbl-num ul li:nth-last-child(1){padding-right:0px;}
.tbl-num ul li.num{margin-right:8px; font-weight:600;}
.tbl-num ul li.page-on{background: #4761de; border-radius: 50%; color:#fff; padding:6px 10px;}
.tbl-num .material-symbols-outlined{font-size:20px; color:#444;
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48}

/*230314*/
.tab01-cnt{display:flex; flex-direction: column; justify-content: space-between; height:100%;}
.fot_cnt17 table tbody{overflow:auto; min-height:620px; max-height:calc(100% - 33px);}
.fot_cnt17 thead{position:sticky; top:0;}

.footer-data-cnt::-webkit-scrollbar {height: 7px;}
.footer-data-cnt::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.footer-data-cnt::-webkit-scrollbar-track {background-color: #f0f4f9;}

.fot_cnt19::-webkit-scrollbar {width: 7px;}
.fot_cnt19::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.fot_cnt19::-webkit-scrollbar-track {background-color: #f0f4f9;}

.fot_cnt17::-webkit-scrollbar {width: 7px;}
.fot_cnt17::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.fot_cnt17::-webkit-scrollbar-track {background-color: #f0f4f9;}

.gis .tbl_box::-webkit-scrollbar {width: 7px;}
.gis .tbl_box::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.gis .tbl_box::-webkit-scrollbar-track {background-color: #f0f4f9;}

.fot_cnt10::-webkit-scrollbar {width: 7px;}
.fot_cnt10::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.fot_cnt10::-webkit-scrollbar-track {background-color: #f0f4f9;}

.fot_cnt11::-webkit-scrollbar {width: 7px;}
.fot_cnt11::-webkit-scrollbar-thumb { background-color: #cacaca;border-radius: 10px;}
.fot_cnt11::-webkit-scrollbar-track {background-color: #f0f4f9;}

#footer_data_tcon::-webkit-scrollbar {height:9px;}
#footer_data_tcon::-webkit-scrollbar-thumb { background-color: #cacaca; border-radius: 10px;}
#footer_data_tcon::-webkit-scrollbar-track {background-color: #f0f4f9;}

/*230317*/
.tabnav_fot li{padding:9px 0;margin-left:5px;}
.tabnav_fot li a{padding:8px 13px; border-radius: 5px 5px 0 0; background: #f0f4f9; color: #8d8d8d;}
.tabnav_fot li:nth-child(1){margin-left:0px;}
.tabnav_fot li a.active{background: #fff; color:#4761de; border-radius: 5px 5px 0 0; border:none; font-weight:600;}
.tabcontent_fot{background: #fff; padding:13px;}
.tabcontent_fot.tab-service{padding:19px 13px;}
.tabcontent_fot{height:90%;}
.k-grid.k-grid-display-block{height:100% !important;}
.k-grid table{height:100%;}
.k-grid-content{overflow-y: auto; overflow-x: clip;}
.k-grid-content::-webkit-scrollbar {width: 7px;}
.k-grid-content::-webkit-scrollbar-thumb { background-color: #cacaca;}
.k-grid-content::-webkit-scrollbar-track {background-color: #f0f4f9;}

@media all and (max-width:1900px){
    .footer_cont{flex-direction: column; justify-content: flex-start !important;}
    .tab_fot .girdInfo01{width:100%; margin-bottom:20px;}
    .tab_fot .girdInfo02{width:100%; margin-bottom:20px;}
    .tab_fot .girdInfo03{width:100%; margin-bottom:20px;}
    .tab_fot .shipInfo01{width:100%; margin-bottom:20px;}
    .tab_fot .shipInfo02{width:100%; margin-bottom:20px;}
    .tab_fot .shipInfo03{width:100%; margin-bottom:20px;}
    .tab_fot .naviInfo01{width:100%; margin-bottom:20px;}
    .tab_fot .naviInfo02{width:100%; margin-bottom:20px;}
    .tab_fot .d_chartWrap01{width:100%; margin-bottom:20px;}
    .tab_fot .d_chartWrap02{width:100%; margin-bottom:20px;}
    .gis .info_bottom.fot_tbl12{width:100%; margin-bottom:20px;}
    .gis .info_bottom.fot_tbl13{width:100%; margin-bottom:20px;}
    #footer_data_con{overflow-y: scroll; height:93%;}
    .gis .info_bottom.fot_tbl12 .cont03 table.tab_tb tr th{padding:12px 10px;}

    .tabcontent_fot::-webkit-scrollbar {width: 7px;}
    .tabcontent_fot::-webkit-scrollbar-thumb { background-color: #cacaca;}
    .tabcontent_fot::-webkit-scrollbar-track {background-color: #f0f4f9;}

    #footer_data_con::-webkit-scrollbar {width: 7px; height:7px;}
    #footer_data_con::-webkit-scrollbar-thumb { background-color: #cacaca;}
    #footer_data_con::-webkit-scrollbar-track {background-color: #f0f4f9;}

    .tab_fot .naviInfo02 .chart_wrap::-webkit-scrollbar {width: 7px; height:7px;}
    .tab_fot .naviInfo02 .chart_wrap::-webkit-scrollbar-thumb { background-color: #cacaca;}
    .tab_fot .naviInfo02 .chart_wrap::-webkit-scrollbar-track {background-color: #f0f4f9;}
}


/* 밀집도통계 영역 퍼블 추가#D5C4D2 */
.density_wr{padding-top: 22px;display: none;}
.density_wr.active{display: block;}
.density_wr h5{font-size: 14px;font-weight: 500; margin-bottom: 6px;}
.density_wr ul.density_cont{display: flex;align-items: center;justify-content: space-between;}
.density_wr ul.density_cont li.i_box{width: 100%; background-color: #eff3f8;padding: 5px 0 !important; border-radius: 25px;font-size: 13px;color: #000;display: flex;align-items: center;justify-content: center;flex-direction: column; margin-bottom: 5px;}
.density_wr ul.density_cont li.i_first{margin-right: 4px;;}
.density_wr ul.density_cont li.i_box .t_line{margin-bottom: 3px;}
.density_wr ul.density_cont li.i_box span.legend{display: inline-block; width: 13px;height: 10px;margin-right: 4px;}
.density_wr ul.density_cont li.i_box_01 span.legend{background-color: #D5C4D2;}
.density_wr ul.density_cont li.i_box_02 span.legend{background-color: #D4AEBC;}
.density_wr ul.density_cont li.i_box_03 span.legend{background-color: #D87F8C;}
.density_wr ul.density_cont li.i_box_04 span.legend{background-color: #F94747;}
.density_wr ul.density_cont li.i_box span.name{font-weight: 500;}
.density_wr ul.density_cont li.i_box span.sta_info{color: #4761DE;font-weight: 500;}


/* 241126 */
@media (max-width: 1900px){
    .tab_fot .naviInfo{width: 100%;margin-right: 0;}
    .tab_fot .naviInfo:not(:last-child){margin-bottom: 1rem;}
}

/* 241127 */
::-webkit-scrollbar {width: 7px;}
::-webkit-scrollbar-thumb { background-color: #cacaca;}
::-webkit-scrollbar-track {background-color: #f0f4f9;}
.pannel .pannel-scroll{overflow-y: scroll !important; height:calc(100% - 60px) !important;}

.popup_lg_type2{border: 1px solid #D7D7D7;overflow: hidden;}
.popup_lg_type2 .popup_tit,
.popup_lg_type2 .popup_cont{background-color: #F0F4F9;}
.popup_lg_type2 .popup_tit{padding: 10px 8px;}
.popup_lg_type2 .d-tb-wr{background-color: #fff;border-radius: 6px;box-shadow: 0 1px 2px rgba(22,22,58, 15%);padding: 0 4px 2px;}
.popup_lg_type2 .d-tb-wr:not(:last-child){margin-bottom: 8px;}
.popup_lg_type2 .d-tb-wr .tit{border-bottom: 1px solid #E3E3E3;padding: 8px;font-size: 12px;font-weight: 600;}
.popup_lg_type2 .d-tb-wr .tit span{font-size: 11px;font-weight: 400;}
.popup_lg_type2 .popup_cont{padding: 2px 7px 10px !important}

.tit-lineBx{background: #f0f4f9;  border: 1px solid #e0e2e6;padding: 4px 6px !important;border-radius: 50px;    margin-bottom: 6px;}


table.dg-pop-tb tr th, table.dg-pop-tb tr td{height: 16px;}
table.dg-pop-tb tr th{text-align: left;width: 100%;padding-left: 10px;}
table.dg-pop-tb td.wd-38{width: 38px;display: flex;align-items: center;justify-content: center;margin-left: 3px;}
table.dg-pop-tb .flexBx{display: flex;align-items: center;grid-gap: 5px;}
table.dg-pop-tb .tit{display: flex;align-items: center;padding-bottom: 4px;}
table.dg-pop-tb .tit .icon{margin-right: 6px;}
table.dg-pop-tb .tit h5{font-size: 12px;font-weight: 600;}
table.dg-pop-tb .lineBx{height: 10px;}
table.dg-pop-tb .line{border-bottom: 1px dashed #E1E1E1;}

.mb-13{margin-bottom: 13px;}
.pb-10{padding-bottom: 10px;}
.naviBx{display: inline-block;}
.naviBx.color1{background-color: #e15989;}
.naviBx.color2{background-color: #e77148;}
.naviBx.color3{background-color: #729b6f;}
.naviBx.color4{background-color: #ff9e17;}
.naviBx.color5{background-color: #d5b43c;}
.naviBx.color6{background-color: #a47158;}
.naviBx.color7{background-color: #becf50;}
.naviBx.color8{background-color: #e5b636;}
.naviBx.color9{background-color: #e8718d;}
.navi-type1{width: 38px;height: 3px;}
.navi-type2{width: 10px;height: 10px;border-radius: 100%;}
.navi-type3{width: 15px;height: 8px;}
.navi-type4{width: 38px; height: 3px; border-bottom: 3px dashed #ff9e17;}
.navi-type5{width: 38px; height: 3px;display: flex; gap: 2px;}
.long-line, .short-line{height: 100%;background-color: #b7484b;}
.long-line {width: 70%;}
.short-line{width: 20%;}

@media (max-width: 768px){
    .footer_data_board.on.slide-in5{width:100%; right:0;}
}