@charset "UTF-8";

/* 23.04.07 이상희 */
#container{position:fixed; height:calc(100vh - 105px);}
#container .wrap{overflow:hidden; width:100%;}
@media all and (max-width:1000px){
	#container{position:relative; height:calc(100vh - 50px)}
	#container .wrap{padding:0}
}

/* 서브 메뉴 */
.bellows .bellows_inner{float:left; position:relative; width:80px; font-size:0; line-height:0; vertical-align:top}
.bellows.active .bellows_inner{width:340px}
.bellows .bellows_show{display:block; position:absolute; top:calc(50vh - 128px); right:-20px; z-index:20;}
.bellows .bellows_show .show_button{width:20px; height:45px; border-radius:5px 0 0 5px; background:#fff url(/site/its/images/map/bellows_menu_icon.png) no-repeat center center; transform:scaleX(-1)}
.bellows.active .bellows_show .show_button{border-radius:0 5px 5px 0; transform:scaleX(1)}
@media all and (max-width:1000px){
	.bellows .bellows_show{top:calc(50vh - 73px)}
}
@media all and (max-width:640px){
	.bellows .bellows_inner{width:60px}
	.bellows.active .bellows_inner{width:240px}
}

/* 제목 & 검색 */
.bellows .bellows_common{display:none; position:absolute; top:0; left:80px; width:260px;}
.bellows.active .bellows_common{display:block; padding:15px 15px 10px}
.bellows .bellows_common .bellows_title{display:block; margin-bottom:15px; text-align:center}
.bellows .bellows_common .bellows_title .title_text{color:#222; font-weight:500; font-size:17px; line-height:19px;}
.bellows .bellows_common .bellows_search .search_panel{position:relative; width:100%; height:35px; border:1px solid #ccc; border-radius:5px; background-color:#fff}
.bellows .bellows_common .bellows_search .search_input .search_query{position:relative; width:100%; height:33px; padding-right:36px; padding-left:10px; color:#222; font-size:14px; line-height:33px;}
.bellows .bellows_common .bellows_search .search_input .search_query::placeholder{color:#767676}
.bellows .bellows_common .bellows_search .search_submit{display:block; position:absolute; top:0; right:0; width:33px; height:33px; background:url(/site/its/images/map/bellows_search_icon.png) no-repeat center center}
.bellows .bellows_common .bellows_search .search_input input::-webkit-search-decoration,
.bellows .bellows_common .bellows_search .search_input input::-webkit-search-cancel-button,
.bellows .bellows_common .bellows_search .search_input input::-webkit-search-results-button,
.bellows .bellows_common .bellows_search .search_input input::-webkit-search-results-decoration{display:none;}

.bellows .search{margin-bottom:20px; padding-right:20px; padding-left:20px}
.bellows .search .search_panel{position:relative; height:45px}
.bellows .search .search_input{display:inline-block; position:relative; width:calc(100% - 85px); height:45px; vertical-align:top}
.bellows .search .search_input:after{display:block; position:absolute; top:calc(50% - 12px); left:-1px; width:1px; height:24px; background-color:#bfcbd7}
.bellows .search .search_query{position:relative; width:100%; height:100%; padding-right:35px; padding-left:13px; border:none; border-top-right-radius:5px; border-bottom-right-radius:5px; background-color:#fff; font-size:15px; line-height:23px; letter-spacing:-0.045em}
.bellows .search .search_query::placeholder{color:#6d758d}
.bellows .search .search_submit{position:absolute; top:11px; right:17px; width:16px; height:16px; background:url(/site/its/images/map/bellows_search_icon.png) no-repeat}
@media all and (max-width:640px){
	.bellows .bellows_common{top:0; left:60px}
	.bellows.active .bellows_common{width:180px; padding:15px 10px 10px}
	.bellows .bellows_common .bellows_title{margin-bottom:10px}
	.bellows .bellows_common .bellows_title .title_text{font-size:15px; line-height:17px;}

	.bellows .bellows_common .bellows_search .search_panel{height:30px}
	.bellows .bellows_common .bellows_search .search_input .search_query{height:28px; padding-right:32px; font-size:13px; line-height:28px;}
	.bellows .bellows_common .bellows_search .search_submit{width:30px; height:28px;}
}

/* 탭메뉴 */
.bellows .bellows_menu{height:calc(100vh - 105px); background-color:#454b66}
.bellows .bellows_menu .bellows_tab{display:inline-block; width:80px; height:100%; vertical-align:top}
.bellows .bellows_menu .bellows_tab .tab_item{display:block;}
.bellows .bellows_menu .bellows_tab .tab_item.n2 {display:none;}
.bellows .bellows_menu .bellows_tab .tab_item .tab_button{display:block; position:relative; width:100%; height:93px; text-align:center}
.bellows .bellows_menu .bellows_tab .tab_item.active .tab_button{background-color:#5a6cbe}
.bellows .bellows_menu .bellows_tab .tab_item .tab_button:before{display:block; position:absolute; bottom:0; left:10px; width:60px; height:1px; background-color:rgba(255,255,255,0.2)}
.bellows .bellows_menu .bellows_tab .tab_item .tab_button span{position:relative; color:#fff; font-size:16px; line-height:18px}
.bellows .bellows_menu .bellows_tab .tab_item .tab_button span:before{display:block; position:relative; width:38px; height:38px; margin-bottom:10px; border-radius:50%; background:rgba(255,255,255,0.15) url(/site/its/images/map/bellows_tab_icon1.png) no-repeat center center; }
.bellows .bellows_menu .bellows_tab .tab_item.n2 .tab_button span:before{background-image:url(/site/its/images/map/bellows_tab_icon2.png)}
.bellows .bellows_menu .bellows_tab .tab_item.n3 .tab_button span:before{background-image:url(/site/its/images/map/bellows_tab_icon3.png)}
.bellows .bellows_menu .bellows_tab .tab_item.n4 .tab_button span:before{background-image:url(/site/its/images/map/bellows_tab_icon4.png)}
.bellows .bellows_menu .bellows_tab .tab_item.active .tab_button:before{left:0; width:100%; height:calc(100% + 1px); background-color:#5a6cbe}
@media all and (max-width:1000px){
	.bellows .bellows_menu{height:calc(100vh - 50px);}
}
@media all and (max-width:640px){
	.bellows .bellows_menu .bellows_tab{width:60px;}
	.bellows .bellows_menu .bellows_tab .tab_item .tab_button{height:60px}

	.bellows .bellows_menu .bellows_tab .tab_item .tab_button:before{left:10px; width:40px}
	.bellows .bellows_menu .bellows_tab .tab_item .tab_button span{font-size:13px; line-height:15px}
	.bellows .bellows_menu .bellows_tab .tab_item .tab_button span:before{width:30px; height:30px; margin-bottom:3px; background-size:55% auto}
}

/* 탭 콘텐츠 내 메뉴 */
.bellows .bellows_menu .bellows_content{display:inline-block; width:0; padding:0; background-color:#fff; vertical-align:top;}
.bellows.active .bellows_menu .bellows_content{width:260px; padding:94px 15px 0}
.bellows .bellows_menu .bellows_scroll{overflow-y:auto; width:100%; height:calc(100vh - 199px); padding-right:5px;}
.bellows .bellows_menu .bellows_scroll::-webkit-scrollbar{width:5px}
.bellows .bellows_menu .bellows_scroll::-webkit-scrollbar-thumb{border-radius:5px; background-color:#adadae}
.bellows .bellows_menu .bellows_scroll::-webkit-scrollbar-track{border-radius:5px; background-color:#fff}
.bellows .bellows_menu .bellows_panel{display:none; }
.bellows .bellows_menu .bellows_panel.active{display:block;}

.bellows .bellows_menu .depth1_list{border:1px solid #ddd;}
.bellows .bellows_menu .depth1_list .depth_item{display:block}
.bellows .bellows_menu .depth1_list .depth_item .depth1_text{width:100%;height: 39px;border-bottom:1px solid #ddd;padding: 6px 9px 10px;color:#4d4d4d;font-weight:500;font-size:14px;line-height:20px;text-align:left}
.bellows .bellows_menu .depth1_list .depth_item:last-child .depth1_text{border-bottom-width:0}
/* active */
.bellows .bellows_menu .depth1_list .depth_item.active .depth1_text{background-color:#e8e9ee}

.bellows .bellows_menu .depth2{padding-right:9px; padding-left:9px; border-bottom:0 solid #ddd}
.bellows .bellows_menu .depth2 .depth2_item{border-bottom:0 solid #ddd; transition-property:padding-top, padding-bottom; transition-duration:0.2s; transition-timing-function:linear}
.bellows .bellows_menu .depth2 .depth2_item .depth2_text{font-size:0; line-height:0;}
/* active */
.bellows .bellows_menu .depth1_item.active .depth2{border-bottom-width:1px; background-color:#fafafa}
.bellows .bellows_menu .depth1_item.active .depth2 .depth2_item{padding-top: 6px;padding-bottom: 3px;border-bottom-width:1px}
.bellows .bellows_menu .depth1_item.active .depth2 .depth2_item:last-child{border-bottom-width:0}
.bellows .bellows_menu .depth1_item.active .depth2 .depth2_item .depth2_text{color:#4d4d4d;font-weight:300;font-size:14px;line-height:20px;letter-spacing: -0.027em;}

.bellows .bellows_menu .depth3 .depth3_list{transition-property:padding-top; transition-duration:0.2s; transition-timing-function:linear}
.bellows .bellows_menu .depth3 .depth3_item{position:relative;padding-left: 15px;transition-property:margin-bottom;transition-duration:0.2s;transition-timing-function:linear}
.bellows .bellows_menu .depth3 .depth3_item:before{display:block; position:absolute; top:8px; left:6px; width:0; height:0; background-color:#24695c}
.bellows .bellows_menu .depth3 .depth3_text{font-size:0; line-height:0}
/* active */
.bellows .bellows_menu .depth1_item.active .depth3 .depth3_list{padding-top: 7px;}
.bellows .bellows_menu .depth1_item.active .depth3 .depth3_item{margin-bottom: 4px;}
.bellows .bellows_menu .depth1_item.active .depth3 .depth3_item:before{width:3px; height:3px;}
.bellows .bellows_menu .depth1_item.active .depth3 .depth3_text{color:#868686;font-weight:300;font-size:13px;line-height:19px;letter-spacing: -0.03em;}
@media all and (max-width:1000px){
	.bellows .bellows_menu .bellows_scroll{height:calc(100vh - 144px)}
}
@media all and (max-width:640px){
	.bellows.active .bellows_menu .bellows_content{width:calc(100% - 60px); padding:82px 10px 0}
	.bellows .bellows_menu .bellows_scroll{height:calc(100vh - 132px)}

	.bellows .bellows_menu .depth1_list .depth_item .depth1_text{height:34px;padding:8px 9px; font-size:13px; line-height:18px}
	.bellows .bellows_menu .depth1_item.active .depth2 .depth2_item{padding-top:6px}
	.bellows .bellows_menu .depth1_item.active .depth2 .depth2_item .depth2_text{color:#4d4d4d; font-weight:300; font-size:13px; line-height:18px}

	.bellows .bellows_menu .depth3 .depth3_item{padding-left:12px}
	.bellows .bellows_menu .depth3 .depth3_item:before{top:7px; left:4px;}

	.bellows .bellows_menu .depth1_item.active .depth3 .depth3_list{padding-top:6px; }
	.bellows .bellows_menu .depth1_item.active .depth3 .depth3_item{margin-bottom:5px;}
	.bellows .bellows_menu .depth1_item.active .depth3 .depth3_text{font-size:12px; line-height:18px}
}

/* 지도 앱 */
.bellows .colgroup{display:inline-block; width:calc(100% - 80px); height:calc(100vh - 105px); margin-top:0; background-color:#d5d8dd}
.bellows.active .colgroup{width:calc(100% - 340px);}
.bellows #contents{height:100%; min-height:100%; padding:0}
@media all and (max-width:1000px){
	.bellows .colgroup{height:calc(100vh - 50px)}
}
@media all and (max-width:640px){
	.bellows .colgroup{width:calc(100% - 60px)}
	.bellows.active .colgroup{width:calc(100% - 240px);}
}

/*Google map CSS*/
#map{height:100%; width:100%;}

.gm-ui-hover-effect{display:none !important;}
.gm-style-iw-d{overflow: unset!important; padding:0; margin:0;}
.gm-style .gm-style-iw-c{padding:0 !important; margin:0 !important;}

.dialog{width:312px; display:flex; flex-direction:column;}
.dialog-header{
	width: 100%;
	height: 25px;
	display: flex;
	flex-direction: column;
	color: white;
	text-align: center;
	padding: 5px;
	justify-content: center;
	align-items: center;
}
.dialog-content{
	width: 100%;
	flex: 1;
}

.dialog-footer{
	width: 100%;
}

.custom-btn-close {
	cursor: pointer;
	top: 0px;
	right: 10px;
	color: white;
	font-size: 20px;
	font-weight: bold;
}

.search_submit:hover{
	cursor: pointer;
}

.popup.road{position:absolute; z-index:99; top:80px; left:25px; height:calc(90% - 65px); width:320px; padding:14px 24px 17px; border:1px solid #ccc; background-color:#fff; box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.2);}
.bellows .popup:before{display:none;}

.road .dialog {
	height: 100%;
	width: 100%;
}

.road .dialog-header{display:block; position:relative; height:auto; padding:10px 15px; border-bottom:1px solid #1947ba; background-color:#fff; color:#222; text-align:left;
	/*text-align: left;
	background-color: white;
	justify-content: flex-start;
	align-items: start;
	height: auto;
	color: white;
	padding: 10px 5px 10px 5px;
	background: #5a6cbe;*/
}

.road .dialog-header .title{display:block; font-size:18px; line-height:24px;}
.road .dialog-header .sub-title{color:#868686; font-size:14px; line-height:20px; word-break:keep-all;}

.road .dialog-content{display:flex; flex-direction:column; height:1%;}
.road .dialog-content .road-info{display:block; margin:10px; padding:5px 10px; border-radius:5px; background-color:#f2f2f2; font-size:0; line-height:0}
.road .dialog-content .road-info span{display:inline-block; margin:0 10px; font-size:16px; line-height:24px; font-weight:400;}
.road-traffic-container{overflow-y:auto; padding:10px;}
.road-traffic-container::-webkit-scrollbar{width:5px; background:#f3f3f3;}
.road-traffic-container::-webkit-scrollbar-thumb{width:5px; background:#ccc; border-radius:5px;}
.road .dialog-footer .dialog_close{position:absolute; top:15px; right:20px; width:20px; height:20px; font-size:0; line-height:0; background:url('/site/its/images/map/dialog_close_btn.png') no-repeat center center;}

.road-name {
	text-align:center;
	width:100%;
	padding:5px;
    color:#222;
	font-size:15px;
	font-weight:400;
	border-radius:5px;
	border:1px solid #ccc;
}

.km-container {
	display: flex;
	padding: 5px;
	font-size:14px;
}
.green{
	color: #006164;
}

.yellow {
	color: #ef5900;
}

.red{
	color: #F9221C;
}

.left {
	text-align: right;
	position: relative;
	padding-right: 30px;
	width: 50%;
}
.left.green::before {
	background: url("/site/its/images/map/traffic-top-green.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	right: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.left.yellow::before {
	background: url("/site/its/images/map/traffic-top-yellow.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	right: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.left.red::before {
	background: url("/site/its/images/map/traffic-top-red.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	right: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.right {
	text-align: left;
	position: relative;
	padding-left: 30px;
	width: 50%;
}
.right.green::before {
	background: url("/site/its/images/map/traffic-bottom-green.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.right.yellow::before {
	background: url("/site/its/images/map/traffic-bottom-yellow.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.right.red::before {
	background: url("/site/its/images/map/traffic-bottom-red.png") no-repeat;
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 4px;
	background-size: contain;
	top: calc(50% - 8px);
}

.filter-wrap {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 30px;
	left:40px;
	z-index: 99;
	border-collapse: collapse;
	border: 1px solid #ccc;
	background-color:#fff;
	padding:30px 15px 0;
	box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.2);
}
.filter-wrap .filter_title{display:block; position:absolute; top:0; left:0; width:100%; height:30px; background-color:#5a6cbe; color:#fff; line-height:30px; text-align:center;}

.filter-box {
	cursor: pointer;
	width: auto;
	height: 75px;
	/*border: 1px solid #c5c5c5;*/
	margin:0 7px;
	background: white;
}
.filter-box .item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size:13px;
	color: #4d4d4d;
	user-select: none;
}

.filter-box .item::before{
	display: block;
	position: relative;
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: black;
	z-index: 99;
}

.filter-box .item.traffic::before{background:url(/site/its/images/map/ic_legend_car_off.png) no-repeat center center;}
.filter-box .item.cctv::before{background:url(/site/its/images/map/ic_legend_cctv_off.png) no-repeat center center;}
.filter-box .item.vms::before{background:url(/site/its/images/map/ic_legend_vms_off.png) no-repeat center center;}
.filter-box .item.unexpect::before{background:url(/site/its/images/map/ic_legend_outbreak_off.png) no-repeat center center;}

.filter-box.active .item.traffic:before{background:url(/site/its/images/map/ic_legend_car_on.png) no-repeat center center;}
.filter-box.active .item.cctv:before{background:url(/site/its/images/map/ic_legend_cctv_on.png) no-repeat center center;}
.filter-box.active .item.vms:before{background:url(/site/its/images/map/ic_legend_vms_on.png) no-repeat center center;}
.filter-box.active .item.unexpect:before{background:url(/site/its/images/map/ic_legend_outbreak_on.png) no-repeat center center;}

/*.filter-box.active{background:#5a6cbe;}
.filter-box.active .item{color:white;}*/
@media all and (max-width:1000px){
	.filter-wrap{top:10px; left:10px; padding:25px 10px 0;}
	.filter-wrap .filter_title{height:25px; line-height:25px; font-size:15px;}
	.filter-box{height:65px;}
}

/* cctv 팝업 */
.dialog.cctv{width:355px; padding:14px 24px 17px; background-color:#fff; border:1px solid #fff; box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.2);}
.dialog.cctv:before{display:block; position:absolute; z-index:-1; top:-1px; left:-1px; width:100%; height:100%; border:1px solid #ccc;}
.dialog.cctv .dialog-header{display:block; height:auto; padding:0; color:#222; font-size:16px; line-height:24px; text-align:left;}
.dialog.cctv .dialog-content{display:block; margin-top:7px;}
.dialog.cctv .dialog-content .dialog_video_text{display:block; margin-top:8px; color:#868686; font-size:12px; line-height:16px;}
.dialog.cctv .dialog-footer .dialog_close{position:absolute; top:15px; right:20px; width:20px; height:20px; font-size:0; line-height:0; background:url('/site/its/images/map/dialog_close_btn.png') no-repeat center center;}


/* 돌발 팝업 */
.dialog.unexpect{width:355px; padding:14px 24px 17px; background-color:#fff; border:1px solid #fff; box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.2);}
.dialog.unexpect:before{display:block; position:absolute; z-index:-1; top:-1px; left:-1px; width:100%; height:100%; border:1px solid #ccc;}
.dialog.unexpect .dialog-header{display:block; position:relative; height:auto; padding:0 0 0 18px; color:#222; font-size:16px; line-height:24px; text-align:left;}
.dialog.unexpect .dialog-header:before{display:block; position:absolute; top:6px; left:0; width:14px; height:14px; background:url('/site/its/images/map/dialog-header_deco.png') no-repeat;}
.dialog.unexpect .dialog-content{display:block; min-height:165px; margin-top:7px; padding:20px 20px 10px; background-color:#f3f3f3;}
.dialog.unexpect .dialog-content .unexpect_info_top{overflow:hidden; display:block; padding-bottom:11px; border-bottom:1px solid #ccc;}
.dialog.unexpect .dialog-content .unexpect_info_top .type{display:inline-block; padding:0 15px; border-radius:5px 5px 0 5px; background-color:#f33e3e; color:#fff; font-size:15px; line-height:27px;}
.dialog.unexpect .dialog-content .unexpect_info_top .date{float:right; color:#f33e3e; font-size:13px; line-height:27px; font-weight:200;}
.dialog.unexpect .dialog-content .unexpect_info_text{overflow-y:auto; max-height:85px; padding-top:16px; padding-right:5px; color:#4d4d4d; font-size:14px; line-height:23px; letter-spacing:-0.035em;}
.dialog.unexpect .dialog-content .unexpect_info_text::-webkit-scrollbar{width:3px; background:#f3f3f3;}
.dialog.unexpect .dialog-content .unexpect_info_text::-webkit-scrollbar-thumb{width:3px; background:#ccc; border-radius:5px;}
.dialog.unexpect .dialog-footer .dialog_close{position:absolute; top:15px; right:20px; width:20px; height:20px; font-size:0; line-height:0; background:url('/site/its/images/map/dialog_close_btn.png') no-repeat center center;}
@media all and (max-width:480px){
	.dialog.cctv,.dialog.unexpect{width:300px;}
}



.filter-box .item.cctv {display:none;}
.filter-box .item.vms {padding-right:16px;}