@charset "utf-8";

button{border:0;}
table{border-collapse:collapse;border-spacing:0;}
caption.blind{position:absolute;top:-9999em;left:-9999em;display:block;width:1px;height:1px}
button{border:0;margin:0;padding:0;}

.rb-layout-traffic .content-main .page-header{width:870px;}
.map_wrap{width:870px; padding:0; margin:0;}
.map_wrap .map_cont{border:1px solid #acacac;position:relative;}
.map_wrap .btm_txt{font-size:13px;color:#000;margin-top:5px;}
.traffic_menu{overflow:hidden;position:absolute;top:0px;left:0px;background:#4e4e50;border:1px solid #959595;width:100%;padding:6px 7px;z-index:2}
.traffic_menu button{float:left;height:35px;font-size:15px;color:#b6b5b5;padding-left:35px;letter-spacing:-1px}
.traffic_menu button.active{color:#fff;}

.map{position:absolute;top:45px;width:100%;height:calc(100% - 45px);} /* 김진호 추가 */

.traffic_wrap .reset{position:absolute;bottom:212px;right:26px;z-index:1000}
.traffic_wrap .fullsize{position:absolute;bottom:173px;right:26px;z-index:1000}

.container:after{content:"";display:block;clear:both}
.container .row{overflow:hidden}

/****common****/
.btn_t1,.btn_t2,.btn_t3,.btn_t4,.favorite_traffic span,.layer_tit .way1,.layer_tit .way2{background:url("images/bg_kfmtraffic.png") no-repeat;}
.layer_tit,.layer_cont_traffic,#resultLine,.route_srch_result,.line_div .t_state,.line_div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/****common background-img****/

.btn_t1{background-position:0 0;width:146px;}
.btn_t1.active{background-position:0 -35px;}
.btn_t2{background-position:-146px 0;width:129px;}
.btn_t2.active{background-position:-146px -35px;}
.btn_t3{background-position:-275px 0;width:149px;}
.btn_t3.active{background-position:-275px -35px;}
.btn_t4{background-position:-424px 0;width:145px;}
.btn_t4.active{background-position:-424px -35px;}

.favorite_traffic{position:absolute;top:14px;right:20px;color:#ddd;letter-spacing:-.5px;z-index:2}
.favorite_traffic span{width:18px;height:18px;display:inline-block;background-position:0 -73px;padding-left:5px;vertical-align:top}
.favorite_traffic:active,.favorite_traffic:focus,.favorite_traffic:active{color:#f8f015;}
.favorite_traffic:active span,.favorite_traffic:focus span,.favorite_traffic:active span{color:#f8f015;background-position:-24px -73px;}

.map_m{overflow:hidden;position:absolute;top:65px;left:14px;height:35px;z-index:2}
.map_m li{float:left;height:35px;margin-right:1px;}
.map_m li a{display:block;width:108px;border:1px solid #898989;color:#666;background:#fff;text-align:center;font-size:14px;;line-height:17px;padding:8px 0;}
.map_m li a{}
.map_m li.active a{background:#3976d1;border:1px solid #385d95;color:#fff;font-weight:bold}

/* 지도-범례  출처:http://m.its.go.kr/nticMap2/ */
.map_cont .legend{position:absolute;bottom:0;right:11px;width:292px;height:165px;z-index:9;}
.legend span.btn_legend.show{float:right;display:inline-block;width:34px;height:26px;text-indent:-5000px;background:url("images/btn_legend.gif") no-repeat 0 0;cursor:pointer;margin-right:17px;}
.legend span.btn_legend{float:right;display:inline-block;width:34px;height:26px;text-indent:-5000px;background:url("images/btn_legend.gif") no-repeat 0 -26px;cursor:pointer;margin-right:17px;}

.legend table{width:290px;border-top:1px solid #bbbab9;}
.legend table.hide{display:none}
.legend table th, .legend table td{font-family:'Dotum';text-align:center;}
.legend table thead th{height:25px;line-height:25px;color:#fff;background-color:#51575e;/*opacity:0.8;filter:alpha(opacity:'80')*/}

.legend table thead th{border:1px solid #5b5b5b;border-bottom:0;}
.legend table tbody th{height:24px;line-height:24px;color:#494949;border-bottom:1px solid #bbbab9;}
.legend table tbody td{height:24px;line-height:24px;color:#494949;background-color:#e7edf4;/*opacity:0.8;filter:alpha(opacity:'80');*/border:1px solid #f1f1f1;}
.legend table tbody th.ex1{font-weight:bold;color:#fff;background-color:#55c159}
.legend table tbody th.ex2{font-weight:bold;color:#fff;background-color:#ffc233}
.legend table tbody th.ex3{font-weight:bold;color:#fff;background-color:#e63333}
.legend table tbody th.ex4{font-weight:bold;color:#fff;background-color:#979797}
/* //지도-범례 */

/* CCTV */
.layer_box_traffic{position:absolute;width:355px;height:346px;border:1px solid #434d6f;background:#fff;border-radius:8px;z-index:10}
#layerBoxTraffic1{top:134px;left:130px;}/*temp*/
#layerBoxTraffic2{top:-66px;left:32px;}/*temp*/
#layerBoxTraffic3{top:145px;left:270px;}/*temp*/
#layerBoxTraffic4{top:216px;left:152px;}/*temp*/


.cctvtip{}
.cctvtip .layer_tit{background:#2766c5;height:46px;padding:9px 10px 10px;border-radius:8px 8px 0 0;}

.cctvtip .layer_tit .way1{font-size:16px;color:#fff;background-position:0 -96px;display:inline-block;width:28px;height:26px;text-align:center;}
.cctvtip .layer_tit .way2{font-size:16px;color:#fff;background-position:-37px -96px;display:inline-block;width:30px;height:26px;text-align:center;}
.cctvtip .layer_tit .cctv_tit{font-size:17px;color:#fff;margin-right:5px;}
.cctvtip .layer_tit .cctv_txt{font-size:17px;color:#fff;background:url("images/bar_layer_tit.png") no-repeat 0 9px;padding-left:14px;}
.layer_cont_traffic{}
	#cctvView{padding:18px 20px;background:#fff;border-radius:0 0 8px 8px;}
	#cctvView .cctv_div{border:1px solid #959595;width:315px;height:260px;}	
.layer_arrow{}
.close_layerbox{position:absolute;top:11px;right:12px;z-index:10;width:25px;height:25px;}
.cctvtip .layer_arrow{position:absolute;bottom:-14px;left:50%;z-index:10;display:inline-block;width:26px;height:14px;margin-left:-11px;background:url('images/bg_kfmtraffic.png') no-repeat -75px -96px}

.sidetip{}
.layer_box_control{position:absolute;width:355px;height:190px;;z-index:10;border:1px solid #434d6f;background:#fff;border-radius:8px}
.layer_box_control .layer_tit{background:#555;height:46px;padding:9px 10px 10px;border-radius:8px 8px 0 0;}
.sidetip .layer_tit strong{font-size:17px;font-weight:normal;color:#fff;margin-right:5px;}
.sidetip .layer_tit span.summary{font-size:17px;color:#fff;}
.sidetip .layer_arrow{position:absolute;bottom:-14px;left:50%;z-index:10;display:inline-block;width:26px;height:14px;margin-left:-11px;background:url('images/bg_kfmtraffic.png') no-repeat -75px -96px}
.sidetip .layer_cont_traffic{padding:18px 20px;background:#fff;border-radius:0 0 8px 8px;}
.sidetip .layer_cont_traffic .date{margin-top:5px;font-weight:bold;color:#385d95;}

.layer_box_accident{position:absolute;z-index:10;width:355px;height:190px;border:1px solid #434d6f;background:#fff;border-radius:8px}
.layer_box_traffic,.layer_box_control,.layer_box_accident{
	-webkit-box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.35);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.35);  /* Firefox 3.5 - 3.6 */
	box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.35);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.layer_box_accident .layer_tit{background:#d33939;height:46px;padding:9px 10px 10px;border-radius:8px 8px 0 0;}

.zoom_map_div{position:absolute;top:164px;right:26px;z-index:10;width:36px;height:231px;}
.zoom_div{background:url("images/zoom_map.gif") no-repeat 0 0;width:36px;height:231px;}
.zoom_div a.zoom-handle{position:absolute;top:85px;left:5px;z-index:10;}
.zoom_in{position:absolute;top:7px;left:7px;z-index:10;}
.zoom_out{position:absolute;bottom:7px;left:7px;z-index:10;}

/*임시 css - 이미 적용되어 있는 css */
#mapDiv{position:relative;width:100%;height:100%;overflow:hidden;}
.mm1,.mm2,.mm3,.mm4,.mm5{cursor:pointer;z-index:10} 
.tmp_map{position:absolute;bottom:0;left:0;z-index:1}
.m1_express{position:absolute;top:500px;left:300px;}
.m2_state{position:absolute;top:300px;left:200px;}
.m3_control{position:absolute;top:354px;left:441px;}
.m4_accident{position:absolute;top:425px;left:322px;}
.m4_accident_on{position:absolute;top:236px;left:354px;}
/* //임시 css */

#loading {width:100%;height:100%;top:0px;left:0px;position:absolute;display:block;opacity:.8;z-index:99;text-align:center;background:rgba(0, 0, 0, 0.3);} 
#loading-image {width:201px;height:201px;position:absolute;top:33%;left:39%;z-index:100;}


.traffic_wrap{width:870px;}
.traffic_wrap .route_cont{width:870px;height:420px;padding:10px 0;border:1px solid #acacac;position:relative;margin-bottom:30px;background:#fff}
.rout_img_cont{text-align:center;}
.rout_img_cont img{height:400px}
.map_icon{position:absolute;top:155px;left:300px;z-index:10;display:block;width:39px;height:55px;}
.rout_srch_form{position:absolute;top:10px;right:15px;z-index:10}
.rout_srch_form select{height:35px;vertical-align:middle;padding:0 7px;color:#fff;font-size:15px;letter-spacing:-1px}
.rout_srch_form select.s_group1{background:#2458a8 url('images/select_arr.png') no-repeat 95% 50%;border:1px solid #2458a8;width:130px;}
.rout_srch_form select.s_group2{background:#3976d1 url('images/select_arr.png') no-repeat 95% 50%;border:1px solid #3976d1;width:190px;}
.rout_srch_form select.s_group2 option{letter-spacing:-1px}
.rout_srch_form button{display:inline-block;vertical-align:middle}
{ -webkit-appearance: none; /* 화살표 없애기 for chrome*/
   -moz-appearance: none;    /* 화살표 없애기 for firefox*/
   appearance: none;         /* 화살표 없애기 공통*/
}
select::-ms-expand {
   display: none;            /* 화살표 없애기 for IE10, 11*/
}}

.rout_srch_form .bootstrap-select button{width:90px;height:30px;line-height:17px;color:#333;font-weight:normal;font-size:14px}
.rout_srch_form .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:90px}
.rout_srch_form .bootstrap-select .dropdown-menu.open,.rout_srch_form .bootstrap-select .dropdown-menu.inner{width:90px}
.rout_srch_form .bootstrap-select.btn-group .dropdown-toggle .filter-option{font-size:14px}
.rout_srch_form .btn-group button:hover{background:#fff}
.rout_srch_form .btn-group button,form_srch .s_srch .dropdown-menu.open,form_srch .s_srch .dropdown-menu ul{width:90px}
.rout_srch_form .dropdown-menu li a{padding:5px 10px;font-size:14px}
.rout_srch_form .dropdown-menu{top:29px}


.route_srch_result{background:#fff;border:1px solid #ccc;border-top:0;width:870px;height:630px;}
.route_srch_result.r_before{height:330px;margin-bottom:50px}
.result_route_txt{height:60px;}
.info_route_srch{background:url("/html/traffic_map/images/img_route.png") no-repeat 0 0;width:518px;height:101px;margin:70px auto 0;padding-left:120px;padding-top:20px}
.info_route_srch p{color:#000;font-size:16px;letter-spacing:-1px}
.info_route_srch strong{font-size:20px;}
#resultLine{margin-left:28px;}

/* #rd_cont{height:450px;overflow-y:auto} */
#rd_cont table{}
#rd_cont table td{}
#rd_cont table th{}

#OpenLayers_Control_PanZoomBar_7.olControlPanZoomBar{left:auto!important;right:30px!important;top:20px!important}

table.map_resultT{width:815px;}
.map_resultT thead{}
.map_resultT thead th{height:58px;text-align:center;border-bottom:2px solid #474c5b}
.map_resultT thead th strong{font-size:18px;color:#000;}
.map_resultT thead th span{font-size:13px;border:1px solid #d7d7d7;padding:3px 5px 4px;margin-left:5px;}
.map_resultT thead th span.up_text{color:#16528e;}
.map_resultT thead th span.down_text{color:#e97212;}
.map_resultT tbody td{height:40px;font-size:18px;text-align:center;border-bottom: 1px solid #d0d1d2}
.map_resultT tbody td .ico_clock{width:20px;height:20px;background:url(images/ico_clock.png) no-repeat 0 0;display:inline-block;vertical-align:middle;padding-right:5px}

#resultLine>ul{width:815px;height:450px;overflow-y:scroll;}
/* #resultLine ul li{height:56px;border-bottom:1px solid #ededef;background:#fff;position:relative;z-index:5}
#resultLine ul li:hover{background:#f3f7fb} */
	.line_div{width:260px;height:56px;position:relative;float:left;}
	.line_div span,.line_div a{float:left;}	
	.line_div .ico_posi{display:inline-block;width:22px;height:22px;background:url(images/bg_kfmtraffic.png) no-repeat 0 -128px;}
	.line_div .ico_posi:hover{background-position:-22px -128px;}
	.line_div .t_txt{font-size:15px;}
	.line_div .t_state{width:30px;height:20px;padding:0px 3px 2px;color:#fff;font-size:11px;letter-spacing:-1px;margin-top:3px;margin-left:8px;}
	.line_div .t_state.c01{background:#55c159;}
	.line_div .t_state.c02{background:#f1b321;}
	.line_div .t_state.c03{background:#e63333;}

	.state_line .point{background:url("images/state_point.png") no-repeat 0 0;width:20px;height:20px;}
	.line_div .state_line span.crG{border-color:#55c159;}
	.line_div .state_line span.crY{border-color:#f1b321;}
	.line_div .state_line span.crR{border-color:#e63333;}
	
	.state_line .ptuG{background-position:0 0}
	.state_line .ptuR{background-position:-20px 0}
	.state_line .ptuY{background-position:-40px 0}/*상행*/
	.state_line .ptdG{background-position:0 -20px}
	.state_line .ptdR{background-position:-20px -20px}
	.state_line .ptdY{background-position:-40px -20px}/*하행*/

	.line_div.down_line{padding:18px 0 18px 47px;}
	.line_div.down_line .t_txt{padding-left:12px;}
	.down_line .state_line{position:absolute;width:20px;height:56px;right:0;top:0;}
	.down_line .state_line .tline{position:absolute;top:0;right:-2px;width:12px;height:19px;border-right:4px solid #fff}
	.down_line .state_line .pline{position:absolute;bottom:-2px;right:-2px;z-index:7;width:12px;height:19px;border-right:4px solid #fff}
	.down_line .state_line .point{position:absolute;top:19px;left:10px;}

	.line_div.up_line{padding:18px 20px 18px 0}
	.line_div.up_line .ico_posi{margin-left:12px;}
	.up_line .state_line{position:absolute;width:20px;height:56px;left:0;top:0;}
	.up_line .state_line .tline{position:absolute;top:0;left:-2px;width:12px;height:19px;border-left:4px solid #fff}
	.up_line .state_line .pline{position:absolute;bottom:-2px;left:-2px;z-index:7;width:12px;height:19px;border-left:4px solid #fff}
	.up_line .state_line .point{position:absolute;top:19px;left:-10px;}
	.up_line .t_txt{padding-left:33px;}


#resultLine ul li .position{display:inline-block;text-align:center;width:275px;font-size:17px;font-weight:bold;display:table;float:left;height:56px;}
#resultLine ul li .position span{display:table-cell;text-align:center;vertical-align:middle;letter-spacing:-1px}


.rb-layout-traffic h3{font-size:18px;margin-bottom:10px;color:#000;font-weight:bold}
table.tT{width:870px}
table.tT caption{visibility:hidden; overflow:hidden; width:0;height:0;font-size:0;line-height:0;padding:0;margin:0;}
table.tT{border-top:2px solid #3783e0}
table.tT th,table.tT td{border-bottom:1px solid #d7d7d7;}
table.tT th{background:#f9f9f9;height:50px;text-align:center}
table.tT td{background:#fff;border-left:1px solid #d7d7d7;padding:12px 15px}
table.tT td:first-child{border-left:0}

video:-webkit-full-screen	{ max-height: 100%; }
video:-moz-full-screen		{ max-height: 100%; }