@CHARSET "UTF-8";

/* biz.sallybrown@gmail.com */


#CONTAINER { width: 100%; min-width: 1020px; background: #fff; }
#HEADER { z-index: 2147483647 ; width: 100%; min-width: 1020px; background: #fff; }

#wrap {	width:100%;	min-width:1020px; background: red; }


input[type=checkbox] {
	/* visibility: hidden; */
	
	height: 12px;
	width: 12px;
	
	padding-top : 4px;
}

/********************************************/
/* TopMenu */

#TOPEVENT_Bar {	width: 100%; height: auto; margin: 0; }
#TOPEVENT_Bar .hideEvent { width: 100%; height: 2px; background: #45a0c9 repeat; }
#TOPEVENT_Bar .showEvent { width: 100%; height: 100px; background: #45a0c9 repeat; }
#TOPEVENT_Bar .btnBG { position:absolute; width: 100%; height: 8px; margin: 0 auto; text-align: center;}
#TOPEVENT_Bar .btnEvent { width: 16px; height: 8px; margin: 0; padding: 0; border: 0; text-align: center; vertical-align:text-top; background: url(../image/main_top_event_icon.png) no-repeat; }
#TOPEVENT_Bar .btnEvent:focus{ outline: none; }

#TOPEVENT_Bar .eventArea{ width:100%; height: 50px; background: #45a0c9 repeat; }

#TOPMENU_TopBar { background: #454c5f; height: 24px; }
#TOPMENU_TopBar ul { width:1020px; margin:0 auto; }
#TOPMENU_TopBar li { float: right; padding:0 4px 0 0; margin:2px 4px 0 0;	background: url(../image/main_top_bar.png) no-repeat right; }

#TOPMENU_TopBar button { display:inline-block; color:#ffffff; line-height:1.6; border:none; background:none; text-decoration: none; font-size:11px; }
#TOPMENU_TopBar button:hover { color: #0075c5; }
#TOPMENU_TopBar button:focus{ border-color: #ffffff; outline: none; }
#TOPMENU_TopBar .allMenu { padding:0 20px 0 0; margin:0 0 0 10px;	background:url(../image/main_top_pd_icon_01.png) no-repeat right 1px; }
#TOPMENU_TopBar .btnClose { color: #0075c5; background: url(../image/main_top_pd_icon_02.png) no-repeat right 1px; }
#TOPMENU_TopBar .last { background:none; margin-right:15px; padding-right:0 }

#TOPMENU_MenuBar { width:1020px; margin:0 auto; background: #fff ; line-height: 70px; height: 70px; }
#TOPMENU_MenuBar p { font-size: 24px; }
#TOPMENU_MenuBar a:hover { color: #0075c5; }
#TOPMENU_MenuBar li { float: right;	height: 100%; padding:0 10px 0 0; margin:0 10px 0 0; }
#TOPMENU_MenuBar .ci_area {	float: left; width:300px; }
#TOPMENU_MenuBar .menu_area { float: left; width:720px; text-decoration: none;	font-size: 18px; color: #000000; }

#TOPMENU_LineBar { background: #2d5676;	height: 2px; }

#TOPMENU_CurrentMenu { position:absolute; width: 100%; background: #fff; border-bottom: 1px solid #dcdbdb; z-index: 999;}
#TOPMENU_CurrentMenu li a { text-decoration:none; margin-left:10px; }	

#TOPMENU_CurrentMenu .menu1,
#TOPMENU_CurrentMenu .menu2,
#TOPMENU_CurrentMenu .menu3,
#TOPMENU_CurrentMenu .menu4,
#TOPMENU_CurrentMenu .menu5,
#TOPMENU_CurrentMenu .menu6 { width:1020px; margin:0 auto 40px auto; }
#TOPMENU_CurrentMenu .menu1 a { padding-left: 885px; }
#TOPMENU_CurrentMenu .menu2 a { padding-left: 790px; }
#TOPMENU_CurrentMenu .menu3 a { padding-left: 665px; }
#TOPMENU_CurrentMenu .menu4 a { padding-left: 520px; }
#TOPMENU_CurrentMenu .menu5 a { padding-left: 390px; }
#TOPMENU_CurrentMenu .menu6 a { padding-left: 298px; }

#TOPMENU_AllMenu { position:absolute; width: 100%; height: 328px; margin: 0 auto; background: #ffffff url("../image/menu_pd_bar.png") repeat-x ; border-bottom: 1px solid #dcdbdb; z-index: 999;}
#TOPMENU_AllMenu ul  { display: block; width:170px; float: left; height: 328px; background: url("../image/line_grey.png") repeat-y right; }
#TOPMENU_AllMenu ul li { display: list-item; }
#TOPMENU_AllMenu ul li a { text-decoration: none; margin-left: 10px; }	
#TOPMENU_AllMenu ul.endItem { background:none; }
#TOPMENU_AllMenu li.mainMenu { display: table-cell;	height: 42px; padding-left: 10px; vertical-align: middle; font-size: 16px; }
#TOPMENU_AllMenu .menu_area { width:1020px; margin:0 auto; }
#TOPMENU_AllMenu .btnClose { position:absolute; border:none; text-decoration: none; right:0px; bottom:0px; width: 36px; height: 36px; background: url("../image/menu_pd_close_icon.png") no-repeat ; }
#TOPMENU_AllMenu .btnClose:hover { color:#449fc9; background: url("../image/menu_pd_close_icon_active.png") no-repeat ; } 


#CONTENTS_Area { width: 100%; margin: 0 auto; backgound: #fff; }

#TOPMENU_ButtomBar { background: #fff url("../image/main_top_blue.png") repeat-x ; height: 78px; }
#TOPMENU_ButtomBar .image_area { width:1020px; margin:0 auto; }
#TOPMENU_ButtomBar .image_area .img_bis{ background: #ffffff url("../image/main_top_bluetypo.png") no-repeat ; width: 480px; height: 78px; float: right; }

#TOP_Bar { width: 100%; height: 32px; background:#e2e2e2; border-bottom: 1px solid #333333;  }
#TOP_Bar .table{ display:table; padding: 0 20px; height: 31px;}
#TOP_Bar .table-row{ display:table-row; }
#TOP_Bar .table-cell1{ display:table-cell; max-width: 550px;  height: 31px; line-height: 31px; text-align: left; color=#fff; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#TOP_Bar .table-cell2{ display:table-cell; width: 100%; height: 31px; line-height: 31px; text-align: right; color=#fff; font-size: 12px;}




/* 좌측 검색 표출 CSS */


#INFO_Area .searchArea{ display: inline-block; width: 316px; overflow-y: auto; border-right: 1px solid #666666; overflow-x:hidden; overflow-y:scroll; }
#INFO_Area .controlArea { display: inline-block; height: 110px; margin-top: 0px; width: 300px;}

#INFO_Area .laneDetailArea{ display: none; width: 316px; border-right: 1px solid #666666; overflow-x:hidden; overflow-y:scroll;}
#INFO_Area .laneDetailArea .laneInfo { padding: 10px 20px;}

.closeDetail { width: 28px; height: 28px; background:url(../image/menu_close_icon.png) no-repeat; }
.closeDetail:hover { background:url(../image/menu_close_icon_02.png) no-repeat; }

#INFO_Area .titleBG1 { padding: 0 20px; color: #000; font-size: 12px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; height: 26px; line-height: 28px; background: #cccccc; vertical-align: middle; }
#INFO_Area .titleBG2 { padding: 0 20px; color: #000; font-size: 11px; border-bottom: 2px solid #cccccc; height: 22px; line-height: 22px; background: #fff; vertical-align: middle; }

.subLabel { height: 24px; line-height: 24px; margin-top: 14px; padding: 0 40px; font-size: 12px; color: #0075c5; }

#INFO_Area li.txtStyle1 { height: 24px; line-height: 24px; margin-top: 4px; padding: 0 20px; font-size: 12px; color: #0075c5; background: #f8f8f8; }
#INFO_Area li.txtStyle2 { height: 34px; line-height: 34px; padding: 0 36px; font-size: 12px; color: black; }

#RESULT_List { /* max-height: 300px;  overflow-y:scroll; */}
#RESULT_List .table { display:table; }
#RESULT_List .table-row{ display:table-row; }
/* #RESULT_List .table-cell1{ display:table-cell; padding-left:20px; padding-right:10px; vertical-align: middle; width:200px; max-width: 200px;  height: 18px; line-height: 18px; text-align: left; color:#757373; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px solid #e5e5e5;} */
 
#RESULT_List .table-cell1{ display:table-cell; padding-left:20px; padding-right:10px; vertical-align: middle; width:220px; height: 18px; line-height: 18px; text-indent:5px;text-align: left; color:#757373; border-bottom: 1px solid #e5e5e5;}
#RESULT_List .table-cell2{ display:table-cell; text-align: right;vertical-align: middle; height: 18px; line-height: 18px; color:black; font-size: 12px; border-bottom: 1px solid #e5e5e5;}
 
 #RESULT_List .last {border: 0px solid; }

.retImg_norLane,
.retImg_norInfo,
.retImg_norStation,
.retImg_norStation_down,
.retImg_norStation_up,
.retImg_selLane,
.retImg_selStation,
.retImg_selStation_down,
.retImg_selStation_up,
.retImg_selInfo { display: block; float:left; width:16px; height:16px; }

.retImg_norLane { background:url(../image/norLane.gif) no-repeat; }

.retImg_norInfo { background:url(../image/norInfo.gif) no-repeat; }
.retImg_norStation { background:url(../image/norStation.gif) no-repeat; }
.retImg_norStation_down { background:url(../image/norStation_down.gif) no-repeat; }
.retImg_norStation_up { background:url(../image/norStation_up.gif) no-repeat; }
.retImg_selLane { background:url(../image/selLane.gif) no-repeat; }
.retImg_selInfo { background:url(../image/selInfo.gif) no-repeat; }
.retImg_selStation { background:url(../image/selStation.gif) no-repeat; }
.retImg_selStation_down { background:url(../image/selStation_down.gif) no-repeat; }
.retImg_selStation_up { background:url(../image/selStation_up.gif) no-repeat; }

.retImg_norInfo,
.retImg_selInfo { margin-left : 10px;}

/* 지도 컨트롤 및 범례 CSS */

#INFO_FullArea .legendBox {display: block;  width: 100px; border: 1px solid #0f578c; background: #fff;}
#INFO_FullArea .legendBox .title { display: block; height: 24px; line-height: 24px; text-align: center; font-size: 12px;  color: #fff; background:#0f578c; }

#INFO_FullArea .legendBox .list {
	display: block;
	padding: 10px;
}

#INFO_FullArea .menuBox { position: absolute; display: none; top: 500px; left: 500px; width: 130px; height: 93px; border: 1px solid #0f578c; background: #fff; }

#INFO_FullArea .menuBox .icon_ZoomIn,
#INFO_FullArea .menuBox .icon_ZoomOut,
#INFO_FullArea .menuBox .icon_Position { width: 13px; height: 15px; margin-top: 8px; margin-right: 10px; vertical-align: middle; }

#INFO_FullArea .menuBox .icon_ZoomIn { background: url(../image/bg_tooltip.png) no-repeat -36px -59px; }
#INFO_FullArea .menuBox .icon_ZoomOut { background: url(../image/bg_tooltip.png) no-repeat -54px -59px;}
#INFO_FullArea .menuBox .icon_Position { background: url(../image/bg_tooltip.png) no-repeat 0px -79px; }

#INFO_FullArea .menuBox .list { width: 130px; heigth: 30px; line-height: 30px; font-size: 12px; border-bottom: 1px solid #9b9b9b; }

#INFO_FullArea .menuBox .list:hover {
	background: #f2f2f2;
}
.label_mapInfo { float: right; height: 24px; line-height: 24px; padding-right: 20px; font-size: 12px;}






/****************************************/
/* tab */
#TABS {
    height: 26px;
    margin-top: 20px; 
	border-bottom: 1px solid #0f578c;
}
#TABS .tab1,
#TABS .tab2 {
	float: left;
	
	margin: 0 -3px;
    padding: 0 20px;

	height: 25px;
	
	line-height: 25px;
	
	/* font-family:Dotum, 돋움; */ 
	font-size: 12px;
	color:#fff;
	
	border: 1px solid #0f578c;
    background: #1470b3;
}
#TABS .tab1{
	margin-left : 20px;
}
#TABS .selected {
    background: #FFF;
    color: #333;
    /* z-index: 0; */
    border-bottom-color: #FFF;
}

#TABS_Info1,
#TABS_Info2 {            
	height: 70px;
	padding-top: 10px; padding-left: 20px;
}

#TABS_Info2 .tbSearch { margin: 4px; height: 18px;}
#TABS_Info1 .table{ display:table; }
#TABS_Info1 .table-row{ display:table-row; }
#TABS_Info1 .table-cell1{ display:table-cell; height: 24px; line-height: 24px; text-align: left; font-size: 12px; }
#TABS_Info1 .table-cell2{ display:table-cell; height: 24px; line-height: 24px; text-align: left; font-size: 12px; }

#TABS_Info1 .table-cell1 p,
#TABS_Info1 .table-cell2 p {
	text-align: center;	
}


/* Popup */
#TITLEBAR_Area { display: block; height: 56px; background: url("../image/main_top_blue.png") repeat-x;}

#TITLEBAR_Area .titleLabel { float: left; margin-left: 20px; margin-right: 20px; line-height: 56px; font-size: 22px; color: #fff; vertical-align: middle; text-align: left; }
#TITLEBAR_Area .icon {float: right; width: 344px; height: 56px; margin-right: 20px; background: url("../image/main_top_bluetypo.png") no-repeat right; background-size: 344px 56px; }

.btnGray,
.btnBlue { 
	/* font-family:Dotum, 돋움; */ 
	font-size: 12px; 
	height: 24px;  
	line-height: 20px;
	  
	padding-left: 20px; 
	padding-right: 20px; 
	
	
	background: #1470b3;
	
	vertical-align: middle; text-align: left;
		
	-webkit-appearance: none;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	vertical-align: middle;
}


.space-l-20px { padding-left: 20px;}
.space-l-14px { padding-left: 14px;}
.space-l-10px { padding-left: 10px;}
.space-l-8px { padding-left: 8px;}
.space-l-6px { padding-left: 6px;}
.space-l-4px { padding-left: 4px;}

.space-r-20px { padding-right: 20px;}
.space-r-10px { padding-right: 10px;}
.space-r-8px { padding-right: 8px;}
.space-r-6px { padding-right: 6px;}

.space-t-10px { padding-top: 10px;}
.space-t-8px { padding-top: 8px;}
.space-t-6px { padding-top: 6px;}
.space-t-4px { padding-top: 4px;}
.space-t-2px { padding-top: 2px;}
.space-t-1px { padding-top: 1px;}

.space-b-10px { padding-bottom: 10px;}
.space-b-8px { padding-bottom: 8px;}
.space-b-6px { padding-bottom: 6px;}
.space-b-4px { padding-bottom: 4px;}
.space-b-2px { padding-bottom: 2px;}


.btnBlue { background: #1470b3; color: #fff; text-align: center; border: 1px solid #0f578c;}
.btnGray { background: #e2e2e2; color: #000; text-align: center; border: 1px solid #bababa;}
 



/* .bottomBar { clear:both; background: #dcdbdb; height: 1px; } */
.lastMenu { height: 28px; margin: 0 10px; font-size: 14px; }

.mainMenu a,
.lastMenu a{ color: #2e2e2e; }
.subMenu a{ color: #0275b6; }

.mainMenu a:hover,
.lastMenu a:hover,
.subMenu a:hover { color: orange; }

li.subMenu { height: 28px; font-size: 15px; magin-top: 10px; }

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

.outer { display: table; width: 100%; height: 100%; }
.inner { display: table-cell; vertical-align: middle; text-align: center; }
.centered { position: relative; display: inline-block; color: white; }

.font-eng {	font-family: 'Lato', Arial;  }
.font-bold { font-weight: bold; }

.font-blue { color: #0e578a; }
.font-red { color: red; }
.font-orange { color: orange; }
.font-white{ color: #fff; }
.font-black{ color: #000; }


.txtAlign { padding: 0 10px; /* font-family:Dotum, 돋움; */ }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

.display_hidden { display:none; }

.floatLeft { float: left; }
.floatRight { float: right; }

.heightAll { height: 100%; }
.widthAll { width: 100%; }

.txtStyle1 { font-size: 24px; }
.txtStyle2 { font-size: 16px; }
.txtStyle3 { font-size: 12px; } 
.txtStyle4 { font-size: 11px; }


.setBorder { border:1px solid black; }

.grayBG { background: #f2f2f2;}


.tbSearch { height: 18px; line-height: 18px; font-size: 12px;}

  
 /* 달력 컨트롤 휴일(토,일) 색상값 */ 
 .ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color:red; }
 
#CTR_Date1,
#CTR_Date2 { width: 110px; height: 18px; line-height: 18px; margin:0px 5px; vertical-align: middle; text-align: left;padding-left: 10px; }




/* 월간 검색용 Popup */
#POPUP_Layer { clear:both; position: absolute; display:none; top: 130px; margin-top: 80px; border:2px solid #0f578c; z-index: 9999; background: #fff; }
#POPUP_Layer .controlArea {height: 50px; padding: 20px;} 
#POPUP_Layer .controlArea .popupLabel { height: 24px; line-height: 24px; font-size: 12px; }


/* 좌측 메뉴 */ 
#Result_Lane,
#Result_Station,
#Result_CarNumber,
#Result_CDMA,
#Result_System { clear: both; width: 300px;}


select {height:25px; padding:0 9px; border:1px solid #0f578c; background:#fff; vertical-align:middle;  line-height:24px; 
-webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background: url(../image/selectbox_nor.png) no-repeat right #FEFEFE;
   background-size: 20px 24px;
   background-position: 100% center;
   background-repeat: no-repeat;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
	
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    text-overflow: '';

}
select::-ms-expand {
    display: none;
}

input[type=checkbox] {  
    display: none;  
}

input[type=checkbox] + label{
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;
}

input[type=checkbox]+ label:before {     

    content: "";  
    display: inline-block;  
  
    width: 20px;  
    height: 20px;  
  
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottom: 1px;  
    background-color: #ccc;  
    border-radius: 2px; 
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
input[type=checkbox]:checked + label:before { 

    content: "\2713";  /* 체크모양 */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:800; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;  
    line-height: 18px;  

} 



table{table-layout:fixed;border:0;border-collapse:separate;*border-collapse:collapse;border-spacing:0px;padding:0;font-size:12px;width:100%;text-align:center}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;display:none}
 
.list_table01{border-top:2px solid #0f578c;border-bottom:1px solid #0f578c}
.list_table01 th{height:20px;border-bottom:1px solid #0f578c;padding:10px;line-height:16px;background-color:#fff;font-size:13px;font-weight:bold;text-align:center;}
.list_table01 td{color:#000}
.list_table01 td{height:17px;border-top:1px solid #9b9b9b;padding:5px;line-height:16px;}
.list_table01 .bg{background:#fff}
.list_table01 a{color:#555}
.list_table01 a:hover, 
.list_table01 a:focus{text-decoration:underline}
.list_table01 .red{color:#ff2650}
.list_table01 .green{color:#008000}
.list_table01 .blue{color:#0066b3}
.list_table01 .purple{color:#ff003b}
.list_table01 .txt_left{text-align:left}
.list_table01 tr:nth-child(2n) { background-color: #F6F6F6; }