/**************** 버스정보, 길찾기 *******************/

.busmap_wrap {position: relative; padding-top: 100px; height: calc(100% - 100px); font-size: 16px}
.busmap_wrap:after {display: block; clear: both; content: ""}

.side_panel_wrap {position: fixed; top:100px; bottom: 0; width: 490px; box-shadow: 3px 0px 5px -3px rgb(0 0 0 / 30%);}
.side_panel_wrap .inner {padding: 25px}

.tabMenu {margin-bottom: 20px; border-radius: 4px; border: 1px solid #ff6001; overflow: hidden}
.tabMenu ul {display: flex;}
.tabMenu ul li {width: calc(100% / 3); text-align: center}
.tabMenu ul li a {display: block; height: 45px; line-height: 45px; border-right: 1px solid #ff6001;}
.tabMenu ul li a span {display: inline-block; padding-left: 25px; color: #ff6001; font-weight: 500;}
.tabMenu ul li.search_ico01 a span {background: url('../images/ico/routesearch_or.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.search_ico01.on a span {background: url('../images/ico/routesearch_on.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.search_ico02 a span {background: url('../images/ico/bus_or.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.search_ico02.on a span {background: url('../images/ico/bus_on.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.search_ico03 a span {background: url('../images/ico/coursesearch_or.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.search_ico03.on a span {background: url('../images/ico/coursesearch_on.png') no-repeat left center; background-size:20px;}
.tabMenu ul li.on a {background: #ff6000; color: #fff; }
.tabMenu ul li.on a span {color: #fff}
.tabMenu ul li:last-child a {border: 0}

.searchKeyword {}
.searchKeyword .s_box {position: relative; padding-right: 45px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden}
.searchKeyword .s_box input {border: 0; height: 45px; font-size: 16px}
.searchKeyword .s_box .searchBtn {display: block; position: absolute; right: 0; top:0; text-indent: -9999px; width: 45px; height: 45px; background:url('../images/ico/ico_search.svg') no-repeat center center; background-size: 20px}
.searchKeyword .btn_wrap {display: flex; align-items: center; justify-content: center; margin-top: 20px}
.searchKeyword .btn_wrap .btn {display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 30px; height: 45px; border: 1px solid #ddd; box-sizing: border-box; margin: 0 2px; border-radius: 4px;}
.searchKeyword .btn_wrap .btn.search {font-weight: 600; position: relative; padding: 0 30px 0 50px; }
.searchKeyword .btn_wrap .btn.search:before {content: ""; width: 16px; height: 16px; position: absolute; left: 30px; top:50%; margin-top: -9px; background: url('../images/ico/ico_search.svg') no-repeat center center; background-size: 100%}

.searchKeyword.station {display: flex}
.searchKeyword.station select {flex-basis: 35%; margin-right: 10px; height: 47px; font-size: 16px; border-color: #ddd; background-image: url('../images/etc/bbs_select.png'); background-size: 12px}
.searchKeyword.station .s_box {flex-basis: 65%;}

.result_route {padding: 10px 25px 30px}
.route_title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px}
.route_title .route {font-size: 22px; line-height: 1; display: inline-block; padding-left: 25px; background: url('../images/ico/coursesearch_or.png') no-repeat left top; background-size:23px;}
.route_title .bus {font-size: 22px; line-height: 1; display: inline-block; padding-left: 27px; background: url('../images/ico/bus_or.png') no-repeat left top; background-size:auto 100%;}

.route_title .route span {font-size: 14px; color: #999; font-weight: 400; vertical-align: middle; display:block; margin-top:10px}

.route_title .bus span {font-size: 14px; color: #999; font-weight: 400; vertical-align: middle; margin-left: 5px}
.route_title .btn_calendar {display: inline-block; width: 30px; height: 25px; background: url('../images/ico/ico_calender.svg') no-repeat center center; background-size: 22px; text-indent: -9999px; vertical-align: top}
.route_title .btn_move {display: inline-block; height: 25px; line-height: 25px; font-size: 12px; padding: 0 10px 0 20px; border: 1px solid #ddd; box-sizing: border-box; vertical-align: top; background: url('../images/etc/arrow_prev.svg') no-repeat 8px center; background-size: 6px; }
.route_time {display: flex;  align-items: center; justify-content: space-between; width:100%}
.route_time .block_low {position: relative; box-sizing: border-box; padding:0 15px 0 55px; height: 48px; font-size: 14px; display: flex; flex-direction: column; justify-content: center}
.route_time .block_low:before {content: ""; width: 1px; background: #ddd; position: absolute; right: 0; top:0; height: 48px;}
.route_time .block_low span {display: block; margin: 5px 0}
.route_time .block_low span i {margin-right: 10px; color: #999}
.route_time .block_low .txt_label {position: absolute; left: 0; top:50%; margin-top: -13px; display: inline-block; padding:7px 10px; line-height: 1; background: #eee; font-size: 12px; border-radius: 50px}
.route_time .block_low.num {padding-left: 75px; width: 30%}
.route_time .block_low.last {padding-right: 0}
.route_time .block_low.last:before {display: none;}

.result_wrap .list_title {background: #f5f5f5; padding: 0 25px; height: 50px; display: flex; align-items: center; justify-content: space-between}
.result_wrap .list_title h2 {font-weight: 600}
.result_wrap .list_title span {margin-left: auto; color:#939393; font-weight: 300; font-size: 13px}
.result_wrap .btn_refresh {display: inline-block; height: 30px; width: 20px; box-sizing: border-box; vertical-align: top; background: url('../images/etc/bbs_refresh.svg') no-repeat center center; background-size: 20px; text-indent: -9999px}

.result_wrap .list_title .total {font-size: 14px}

/* 버스번호, 경로 */
.routeList_wrap {position: absolute; width: 100%; height: calc(100% - 215px); overflow: auto; background: #fff}
.routeList_wrap .row {position: relative; display: flex; align-items: center; justify-content:flex-start; border-bottom: 1px solid #eee; height:50px; margin: 0 25px; cursor: pointer}
.routeList_wrap .row .name {font-weight: 600; width: 160px}
.routeList_wrap .row .route {font-size: 14px; color: #666}
.routeList_wrap .row:hover .name,
.routeList_wrap .row:hover .route {color: #ff6001}
.routeList_wrap .route_list.station .row {justify-content: space-between}
.routeList_wrap .route_list.station .row .num {color: #aaa; font-size: 12px;}

/* 경로검색 */
.course_search {}
.course_search .box {display: flex; width: 100%; margin-bottom: 5px; justify-content: space-between; align-items: center}
.course_search .box input {font-size: 16px; height: 45px; flex-basis:75%; border-radius: 4px}
.course_search .box .choiceBtn {display:flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; height: 45px; flex-basis: 24%; border: 1px solid #ddd; box-sizing: border-box; border-radius: 4px; background: #f5f5f5}

/* 실시간 경로 */
.realtime_wrap {position: absolute; width: 100%; height: calc(100% - 368px); overflow: auto}
.realtime_list .row {position: relative; display: flex; align-items: center; border-bottom: 1px solid #eee; height:50px; padding-left: 50px; margin: 0 40px; cursor: pointer}
.realtime_list .row .location {}
.realtime_list .row .num {color: #aaa; font-size: 12px; margin-left:10px}
.realtime_list .row:after {content: ""; width: 12px; height: 12px; background:url('../images/etc/time_arrow.svg') no-repeat center center; background-size: 100%; border-radius: 50%; position: absolute; left: 9px; top:50%; margin-top: -6px}
.realtime_list .row:before {content: ""; width: 3px; background: #ff6000; position: absolute; left: 13px; top:0; bottom: -1px;}
.realtime_list .row:last-child {border: 0}
.realtime_list .row:last-child:before {bottom: 50%}
.realtime_list .row:first-child:before {top: 50%}
/* .realtime_list .row .icon_bus {display: block; width: 20px; height: 20px; background:url('../images/ico/bus_dot.svg') no-repeat center center; background-size: 100%; position: absolute; left:5px; top: 50%;  margin-top: -10px;z-index: 10; border-radius: 50%;} */
.realtime_list .row .icon_bus {posdisplay: block; width: 18px; height: 18px; background:url('../images/ico/bus_dot.svg') no-repeat center center; background-size: 100%; position: absolute; left:6px; top: 40%;  margin-top: -10px;z-index: 10; border-radius: 50%;}
.realtime_list .row .icon_bus.in{margin-top:-20px;}
.realtime_list .row .icon_bus.out{margin-top:11px;}
.realtime_list .row .icon_bus .plate{ display:inline-block; position:relative; margin: 0px -38px; font-size:11px; background:#eee; border-radius:3px; padding:3px 3px;}
.realtime_list .row .icon_bus .plate span{position:relative; display:block;}

.busmap_area {position: relative; width: calc(100% - 490px); height: 100%; float: right}
.map_lotation {
	display: flex; height: 50px; align-items: center; justify-content: center; background: #fff; position: absolute; left: 20px; top:20px; padding:0 20px; border: 1px solid #ddd; border-radius: 4px;
	box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 5%); line-height: 1;
}
.map_lotation strong {font-weight: 400; display: inline-block; padding-left: 20px; background: url('../images/ico/coursesearch_or.png') no-repeat left top; background-size: auto 100%;}

/* 팝업 */
.map_popup {
    width: 600px;
    height: 328px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -409px 0 0 -301px;
    border: 1px solid #ddd;
    background: #fff;
}
.map_popup .head {padding:0 25px; height: 60px; display: flex; align-items: center; justify-content:space-between}
.map_popup .head .route {font-weight: 600; display: inline-block; padding-left: 20px; background: url('../images/ico/bus_or.png') no-repeat left top; background-size: auto 100%; line-height: 1}
.map_popup .head .btn_refresh {display: inline-block; height: 30px; width: 30px; box-sizing: border-box; vertical-align: top; background: url('../images/etc/bbs_refresh.svg') no-repeat center center; background-size: 20px; text-indent: -9999px}
.map_popup .head .btn_close {display: inline-block; height: 30px; width: 30px; box-sizing: border-box; vertical-align: top; background: url('../images/etc/bbs_close.svg') no-repeat center center; background-size: 17px; text-indent: -9999px}
.map_popup .head .station {font-weight: 600; display: inline-block; padding-left: 20px; background: url('../images/ico/coursesearch_or.png') no-repeat left top; background-size: auto 100%; line-height: 1}
.map_popup .head .btn_wrap {margin-right: -10px}

.map_popup .s_title {background: #f5f5f5; padding:0 25px; height: 35px; line-height: 35px; font-size: 14px}
.map_popup:before {content: ""; width: 30px; height: 15px; background: url('../images/etc/bbs_pop_tip.svg') no-repeat center center; background-size: 100%; position: absolute; left: 50%; bottom: -15px; margin-left: -15px;}
.map_popup .content {padding: 25px; height: 45px; overflow-y: scroll}
.map_popup .head .route {flex-direction: column; align-items: baseline; padding-left: 40px}
.map_popup .head .route .sub {margin: 5px 0 0 0;}
.bus_list li {display:flex; height: 40px; width: 100%; text-align: left; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee}
.bus_list li em {color: #ff6000}
.bus_list li .num {width: 40%}
.bus_list li p {width: 30%; text-align: left}
.bus_list li p.last {text-align: right}
.bus_list .row.no_data {justify-content: center; border: 0; color: #999}

.map_popup .head .sub {color: #aaa; font-size: 14px; margin-left: 5px; font-weight: 400}
.map_popup .head .route, .map_popup .head .station {display: flex; align-items: center}

.map_popup .head .route {flex-direction: column; align-items: baseline; padding-left: 20px}
.map_popup .head .route .sub {margin: 5px 0 0 0;}

.bus_list.info li p {width: 100%;}
.bus_list.info li .tit {width: 40%}



/*********220224 추가*********/

/* 길찾기 */
.side_panel_wrap.roadsearch .inner {padding: 20px 20px 0 20px; z-index: 1; position: fixed; top: 100px; width: 350px; background-color: #fff; border-left: 2px solid #9a9a9a}
.side_panel_wrap.roadsearch .frame {position: absolute; top: -100px; left: 0;}

/* 팝업 수정 */
.map_popup .st_wrap {height: 270px; box-sizing: border-box; overflow-y: scroll; padding: 25px;}
.map_popup .info_box {padding-bottom: 25px}
.map_popup .head {border-bottom: 1px solid #ddd}
.map_popup .info_title {margin-bottom: 15px; font-size: 14px}
.map_popup .list_title {background-color: #f2f2f2; height: 40px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; text-align: center;}
.map_popup .list_title li {flex: 1 1 0; line-height: 40px;}
.map_popup .list_title .sb {flex: 2 1 0}
.map_popup .list_title .sp {flex: 4 1 0}
.map_popup .station_bus_list li {text-align: center; line-height: 40px; display: flex; justify-content: space-between; border-bottom: 1px solid #eee}
.map_popup .station_bus_list li em {color: #ff6000}
.map_popup .station_bus_list li .num {border-right: 1px solid #eee; flex: 1 1 0;}
.map_popup .station_bus_list li p {text-align: center; border-right: 1px solid #eee; flex: 2 1 0;}
.map_popup .station_bus_list li p.last {text-align: center; border-right: 0;}
.map_popup .station_bus_list li p.last.sp {flex: 4 1 0;}

/*********220310 추가*********/
.line_popup {width: 1257px; height: 700px; position: absolute; left: 15px; top: 15px; border: 1px solid #ddd; background-color: #fff; z-index: 10}
.line_popup .head {border-bottom: 1px solid #ddd}
.line_popup .head {padding:0 25px; height: 60px; display: flex; align-items: center; justify-content:space-between;}
.line_popup .head span {font-size: 14px; color: #999; font-weight: 400; vertical-align: middle; margin-left: 5px;}
.line_popup .head .route {font-weight: 600; display: inline-block; padding-left: 20px; background: url('../images/ico/coursesearch_or.png') no-repeat left top; background-size: auto 100%; line-height: 1}
.line_popup .head .btn_refresh {display: inline-block; height: 30px; width: 30px; box-sizing: border-box; vertical-align: top; background: url('../images/etc/bbs_refresh.svg') no-repeat center center; background-size: 20px; text-indent: -9999px}
.line_popup .head .btn_close {display: inline-block; height: 30px; width: 30px; box-sizing: border-box; vertical-align: top; background: url('../images/etc/bbs_close.svg') no-repeat center center; background-size: 17px; text-indent: -9999px}
.line_popup .head .btn_wrap {margin-right: -10px}





/*********220316 추가*********/
.line_popup .busroute {height: calc(100% - 80px); margin: 25px; overflow-y: scroll; overflow-x: hidden;}
.line_popup .busroute ol:nth-child(odd) {margin-left: 80px}
.line_popup .busroute ol:nth-child(even) {float: right; margin-right: 145px}
.line_popup .busroute ol:nth-child(even) li {float: right}
.line_popup .busroute ol:nth-child(even) li em {position: absolute; top: 15px; left: auto; right: -5px}
.line_popup .busroute ol:nth-child(even) li span {position: absolute; top: 35px; left: 47%;}
.line_popup .busroute ol:nth-child(even) li:first-child span {top: 15px; left: 95px; width: 70px; text-align: left;}
.line_popup .busroute ol:nth-child(even) li:last-child span {position: absolute; top: 15px; left: -3px; width: 70px; display: block; text-align: right; letter-spacing: -1px;}
.line_popup .busroute ol:nth-child(even) li:last-child div {position: absolute; top: 20px; left: 78px; display: block; height: 65px; width: 5px;}
.line_popup .busroute ol:nth-child(even) li .turn {position: absolute; top: 14px; left: -5px; width: 18px; height: 18px; z-index: 1}

.line_popup .busroute ol:nth-child(odd) li:first-child span {position: absolute; top: 17px; left: -80px; width: 70px; text-align: right;}
.line_popup .busroute ol:nth-child(odd) li:last-child span {position: absolute; width: 70px; top: 17px; left: 18px; display: block; color: #000; text-align: left; letter-spacing: -1px;}
.line_popup .busroute ol:nth-child(odd) li:last-child div {display: block; height: 70px; width: 5px; margin-left: -5px}
.line_popup .busroute ol:nth-child(odd) li .turn {position: absolute; top: 12px; left: -7px; width: 20px; height: 20px; z-index: 1}

.line_popup .busroute li {position: relative; display: inline-block; height: 60px; width: 80px;}
.line_popup .busroute .line2 li {width: 80px;}
.line_popup .busroute li.last div {display: none !important;}
.line_popup .busroute li em {position: absolute; top: 15px; left: -5px; z-index: 1; width: 15px; height: 15px}
.line_popup .busroute li em.ico_pointer_start {width: 18px; height: 18px; background: url('../images/etc/time_arrow_startpoint.svg') no-repeat; background-size: 100%;}
.line_popup .busroute li em.ico_pointer_finish2 {width: 18px; height: 18px; background: url('../images/etc/time_arrow_endpoint.svg') no-repeat; background-size: 100%;}
.line_popup .busroute li em.ico_direction_start_left {background: url('../images/etc/time_arrow_start.svg') no-repeat; background-size: 100%; transform: rotate(90deg)}
.line_popup .busroute li em.ico_direction_start_right {background: url('../images/etc/time_arrow_start.svg') no-repeat; background-size: 100%; transform: rotate(-90deg)}
.line_popup .busroute li em.ico_direction_finish_left {background: url('../images/etc/time_arrow_end.svg') no-repeat; background-size: 100%; transform: rotate(90deg)}
.line_popup .busroute li em.ico_direction_finish_right {background: url('../images/etc/time_arrow_end.svg') no-repeat; background-size: 100%; transform: rotate(-90deg)}
.line_popup .busroute li div {position: absolute; top: 20px; left: 5px; display: block; height: 5px; width: 78px; background: #d6d6d6;}
.line_popup .busroute li span {position: absolute; top: 35px; width: 60px; left: -47%; display: block; color: #222; font-size: 0.75rem; width: 100%; text-align: center; letter-spacing: -1px; line-height: 130%;}
.line_popup .busroute li span.on {background: #ff6001; border-radius: 1px; color: #FFF !important; padding: 3px 0; border-radius: 11px}

.line_popup .busroute li .route_bus_up_left.bus {position: absolute; z-index: 100; top: -5px; left: -25px; height: 24px; width: 46px; background: url('../images/etc/line_start_bus_left.svg')no-repeat 0 0;}
.line_popup .busroute li .route_bus_up_right.bus {position: absolute; z-index: 100; top: -5px; left: -25px; height: 24px; width: 46px; background: url('../images/etc/line_start_bus_right.svg')no-repeat 0 0;}
.line_popup .busroute li .route_bus_down_left.bus {position: absolute; z-index: 100; top: -5px; left: -25px; height: 24px; width: 46px; background: url('../images/etc/line_end_bus_left.svg')no-repeat 0 0;}
.line_popup .busroute li .route_bus_down_right.bus {position: absolute; z-index: 100; top: -5px; left: -25px; height: 24px; width: 46px; background: url('../images/etc/line_end_bus_right.svg')no-repeat 0 0;} 
.line_popup .busroute li i {position: absolute; top: 15px; left: -48px; color: #000; background: #FFF; opacity: 0.9; border: 1px solid #b0b0b0; padding: 1px 3px; font-size: 0.75rem; z-index: 100; padding: 1px 1px;}