/**************** 서브 공통 *******************/
.container {margin-top: 100px}
.sub_visual {position: relative; height: 200px; background: url('../images/etc/bg_sub.jpg') no-repeat top center; background-size:cover }
.sub_visual .title {height: 150px; display: flex; width: 100%; align-items: center; justify-content: center}
.sub_visual .title h2 {font-size: 38px; color: #fff; font-weight: 700; letter-spacing: -2px; line-height: 1}


.sub_nav_wrap {
    width: 100%;
    background: rgba(0,0,0,.1);
    position: absolute;
    bottom: 0;
    z-index: 102;
}
#sub_nav > ul > li {
    float: left;
    border-right: 1px solid rgba(255,255,255,.3);
}
#sub_nav > ul > li.sub_nav_home a {
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    display: block;
    background: url('../images/etc/bbs_home.svg') no-repeat center center; background-size: 20px;
    -webkit-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -kthtml-transition: width 0.3s ease;
    transition: width 0.3s ease;
	border-left: 1px solid rgba(255,255,255,.3);
}
#sub_nav > ul > li.sub_nav_dp1 > a {
    height: 60px;
    line-height: 60px;
    display: block;
    color: #fff;
    background: url('../images/etc/bbs_select_wh.png') 92% 50% no-repeat;
    background-size: 15px;
}
#sub_nav > ul > li.sub_nav_dp1.dp1_1,
#sub_nav > ul > li.sub_nav_dp1.dp1_2 {
    text-indent: 30px;
}

#sub_nav > ul > li.sub_nav_dp1.dp1_1 a,
#sub_nav > ul > li.sub_nav_dp1.dp1_2 a {
    width: 350px;
}

#sub_nav > ul > li .sub_nav_dp2 {
    line-height: 36px;
    padding: 10px 0;
    position: absolute;
    z-index: 20;
    display: none;
}
#sub_nav > ul > li .sub_nav_dp2 a {
    color: #fff;
    font-family: "noto_l", sans-serif;
    position: relative;
    display: block;
    -webkit-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    -kthtml-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}
#sub_nav > ul > li .sub_nav_dp2.dp2_1 {
    width: 350px;
    background: url(../images/common/s_nav_line01.gif) 17px 0 no-repeat #f15c34;
}

#sub_nav > ul > li .sub_nav_dp2.dp2_2 {
    width: 350px;
/*     background: url(../images/common/s_nav_line01.gif) 17px 0 no-repeat #f3642c; */	
}


.sub_content {padding: 100px 0; min-height: 500px}

/* 서브 타이틀 */
.page_head {text-align: center; margin-bottom: 80px}
.page_head h3 {font-weight: 700; font-size: 40px; letter-spacing: -1px; line-height: 1; margin-bottom: 20px}
.page_head p {line-height: 1.5}

.block_title {text-align: center; margin-bottom: 50px}
.block_title .title span {font-weight: 700; font-size: 30px; line-height: 1}
.block_title .title span.bus {display: inline-block; padding-left: 40px;  background: url('../images/ico/ico_bus.png') no-repeat left center; background-size: 30px}

.mg_top_100 {margin-top: 100px}


/* tab */
.tab_style {display: flex; align-items:center; justify-content: center; margin-bottom: 80px}
.tab_style li:last-child {border-right: 1px solid #ddd;}
.tab_style li a {display: block; width: 300px; height: 60px; text-align: center; line-height: 60px; border: 1px solid #ddd; border-right: 0; font-size: 20px}
.tab_style li.on a {background: #222; color: #fff; font-weight: 600; border-color: #222}

/* table */
.tbl_hoz {width: 100%; border-top:1px solid #222}
.tbl_hoz th {background: #f2f2f2}
.tbl_hoz th {border-bottom: 1px solid #ddd; padding: 20px 0}
.tbl_hoz td {border-bottom: 1px solid #ddd; padding: 20px}
.tbl_hoz td p {line-height: 1.5}
.tbl_hoz.time td {text-align: center}

.tbl_col {width: 100%; border-top:1px solid #222;}
.tbl_col th {background: #f2f2f2; position: relative;}
.tbl_col th:before {content: ""; display: block; width: 1px; height: 20px; background: #ddd; position: absolute; right: 0; top:50%; margin-top: -10px}
.tbl_col th:last-child:before {display: none}
.tbl_col th {border-bottom: 1px solid #ddd; padding: 20px}
.tbl_col td {border-bottom: 1px solid #ddd; padding: 20px}
.tbl_col td:last-child {border-right: 0}

.tbl_price {width: 100%; border-top:1px solid #222;}
.tbl_price th {background: #f2f2f2; position: relative;}
.tbl_price th {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 20px}
.tbl_price td {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 40px 0; text-align: center}
.tbl_price th:last-child,
.tbl_price td:last-child {border-right: 0}

/**************** 서브 *******************/


.dot {margin: 0 20px; display: inline-block; width: 5px; height: 5px; background: #ccc; border-radius: 50%; vertical-align: middle}

/* 버스터미널 */
.busterminal_map {height: 550px; background: #f5f5f5; margin-bottom: 80px}

/* 시간표 리스트 */
.bus_time_list {border-bottom: 1px solid #eee;}
.bus_time_list .row {}

.transit_timeBox {position: relative; display: flex; align-items: center; border: 1px solid #eee; border-bottom: 0; height: 70px; padding: 0 30px}
.transit_timeBox .bus_number {font-size: 24px; font-weight: 700; width: 200px}
.transit_timeBox .position {display: flex; align-items: center;}
.transit_timeBox .position .start,
.transit_timeBox .position .arrival {display: flex; align-items: center;}
.transit_timeBox .position .start {width: 220px}
.transit_timeBox .position em {display: inline-block; padding:5px 8px; text-align: center; background: #eee; border-radius: 50px; font-size: 12px; margin-right: 20px}
.transit_timeBox .position .move {margin: 0 30px}
.transit_timeBox .train_cate {width: 150px}
.transit_timeBox .price {position: absolute; right: 30px; color: #999; font-size: 14px}

.transit_timeBox .btn_wrap {position: absolute; right: 30px; font-size: 16px; padding-left: 30px; border-left: 1px solid #eee}
.transit_timeBox .btn_wrap .btn_timetable {margin-left: 20px}
.transit_timeBox .etc_data {position: absolute; display: flex; display: flex; align-items: center; right: 30px; font-size: 16px; font-size: 14px; color: #999}
.transit_timeBox .etc_data li {padding: 0 20px;}
.transit_timeBox .etc_data li:last-child {border-left: 1px solid #eee;}

.btn_route_map {display: inline-block; height: 30px; line-height: 30px; padding-left: 30px; background: url('../images/ico/ico_bustime_location.png') no-repeat left center; background-size: 27px;}
.btn_timetable {display: inline-block; height: 30px; line-height: 30px; padding-left: 30px; background: url('../images/main/ico_03.png') no-repeat left center; background-size: 25px;}
.btn_route_map:hover,
.btn_timetable:hover {color: #ff6001}

.train_ico {
	display: inline-block;
    padding: 7px 0;
    width: 80px;
    text-align: center;
    background: #000;
    color: #fff;
    font-size: 16px;
    border-radius: 3px;
    margin-right: 20px;
}
.train_ico.normal {background: #2940b3}
.train_ico.new {background: #ff6001}
.train_ico.sharon {background: #00b3ff}

.train_time_list {border-bottom: 1px solid #eee;}
.train_time_list .transit_timeBox .position strong {width: 120px; text-align: center; font-size: 20px; margin-left: 20px}
.train_time_list .transit_timeBox .position .time {font-size: 20px}
.train_time_list .transit_timeBox .position .start {width: auto}


.terminal_time_list {border-bottom: 1px solid #eee;}
.terminal_time_list .transit_timeBox .position strong {width: auto; text-align: center; font-size: 20px; margin-left: 20px}
.terminal_time_list .transit_timeBox .position .time {font-size: 20px}
.terminal_time_list .transit_timeBox .position .start {width: auto}
.bus_grade {
	display: inline-block;
    padding: 7px 0;
    width: 80px;
    text-align: center;
    background: #000;
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    margin-right: 30px;
    font-weight: 500;
}

/* 시간표 팝업 */
.pop_style {width: 500px; position: fixed; left: 50%; top:50%; transform: translate(-50%,-50%); border: 1px solid #ddd; z-index: 103; background: #fff; box-shadow: 0 20px 50px rgb(0 0 0 / 20%);}
.pop_style .head {padding:0 25px; height: 60px; display: flex; align-items: center; justify-content:space-between; border-bottom: 1px solid #ddd}
.pop_style .head .route {font-weight: 600; display: inline-block; line-height: 1}
.pop_style .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}
.pop_style .head .btn_wrap {margin-right: -10px}
.pop_style .bus_num {margin-bottom: 10px}
.pop_style .bus_num span {
    font-weight: 600;
    display: inline-block;
    padding-left: 23px;
    background: url(../images/ico/bus_or.png) no-repeat left top;
    background-size: auto 100%;
    line-height: 1;
}
.pop_style .content {padding: 20px}
.pop_style .tab_type01 {margin-bottom: 10px}
.tbl_time {width: 100%; font-size: 14px; text-align: center}
.tbl_time th {padding: 10px 0; border-bottom: 1px solid #eee}
.tbl_time td {height: 35px; border-bottom: 1px solid #eee}

.tab_type01 { display:table; width:100%; table-layout:fixed; border-left:1px solid #eee; box-sizing: border-box}
.tab_type01 li { display:table-cell; height:40px}
.tab_type01 li a { display:block;position:relative;height:40px;border-top:1px solid #eee;border-bottom:1px solid #444;line-height:40px;text-align:center; background: #f5f5f5; font-size: 14px}
.tab_type01 li a:after { content:''; display:block; position:absolute; top:0; right:0; bottom:0; width:1px; background:#eee}
.tab_type01 li.on a, .tab_type01 li:hover a {border-bottom-color:transparent; border-top:1px solid #444; font-weight: 600; background: #fff; font-size: 16px}
.tab_type01 li.on a:after, .tab_type01 li:hover a:after { content:''; display:block; position:absolute; top:0; right:0; bottom:-1px; width:1px; background:#444}
.tab_type01 li.on a:before, .tab_type01 li:hover a:before { content:''; display:block; position:absolute; top:0; left:0; bottom:-1px; width:1px; background:#444}
.tab_type01 li a .total {margin-left: 5px; color: #07609b}
.inner_tab_cont {height: 180px; overflow: auto}

/* 검색 */
.search_box {position: relative; padding-right: 150px; margin-bottom: 50px}
.sorting_row {display: flex; align-items: center; height: 60px}
.sorting_row select {border: 0; border-radius: 0; height: 60px; background-color: #f5f5f5; width: 100%}
.sorting_row.three .in_select {width: calc(100% / 3)}
.in_select {background: #f5f5f5; margin: 0 6px 0 0; padding:0 10px 0 80px; position: relative}
.in_select .tit {position: absolute; left: 20px; top:50%; font-size: 14px; color: #999; margin-top: -7px}
.search_box .input_box {display: flex; align-items:center; justify-content:flex-start;}
.search_box .input_box li {display: flex; align-items: center; justify-content: center; margin-right: 20px}
.search_box .input_box label {margin-left: 10px}
.search_box .sorting_check {margin:6px 6px 0 0; display: flex; align-items:center; justify-content:flex-start; padding:0 20px; height: 60px; background-color: #f5f5f5;}
.search_box .sorting_check .tit {font-size: 14px; color: #999; width:73px}

.search_box .btn_search {position: absolute; top:0px; right: 0; display: flex; align-items: center; justify-content: center; width: 150px; height: 60px; color: #222; font-weight: 700; box-sizing: border-box; border: 1px solid #222;
	 -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.search_box .btn_search:hover {background: #222; color: #fff}
.search_box.two_row .btn_search {height: 126px; top:0}

/* 버스요금안내 */
.in_price {display: inline-block; margin: 0 30px}
.in_price li {display: flex; align-items: center; justify-content: center; padding-left: 100px; position: relative; margin-bottom: 20px}
.in_price li:last-child {margin: 0}
.in_price li strong {position: absolute; left: 0; top:5px; display: inline-block;}
.in_price li p {display: flex; align-items:center; margin-right: 20px}
.in_price li p em {display: inline-block; width: 40px; padding:5px 0; text-align: center; background: #eee; border-radius: 50px; font-size: 12px; margin-right: 20px}
.in_price li p span {display: inline-block; width: 60px; text-align: left}
.in_price li p:last-child {margin: 0}
.in_price.full {display: flex; justify-content: center; align-items: center}
.in_price.full li {padding: 0}
.in_price.full li p em {width: auto; padding: 5px 10px}
.in_price.full li p span {width: auto}

.txt_ref {margin-top: 15px; font-size: 14px; color: #999; text-align: right}
.bullet_list {margin-top: 20px}
.bullet_list li {display: block; padding-left: 15px; position: relative; margin-bottom: 10px}
.bullet_list li:before {content: ""; width: 3px; height: 3px; background: #ff6000; border-radius: 50%; position: absolute; left: 0; top:7px}

/* 공지사항 */
.noticeBox_list {border-top:1px solid #222}
.noticeBox {display: flex; align-items: center; border-bottom: 1px solid #eee; width: 100%; height: 100px; background: url(../images/ico/bbs_arrow_gray.svg) no-repeat 95% center; background-size: 20px}
.noticeBox .date {display: flex; width: 200px; align-items: center; justify-content: center; flex-direction: column; color: #bbb}
.noticeBox .date span {font-size: 14px; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
.noticeBox .date b {font-size: 36px; -webkit-order: 1; -webkit-box-ordinal-group: 1; order: 1;}
.noticeBox .title {display: table-cell; font-size: 24px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.view_wrap {}
.view_wrap .head {border-bottom: 1px solid #ddd; padding-bottom: 50px}
.view_wrap .head strong {font-size: 30px; letter-spacing: -1px; word-break: keep-all}
.view_wrap .head .date {margin-bottom: 20px; color: #bbb; font-size: 14px}
.view_wrap .head .down_link {margin-top: 20px; font-size: 14px; text-decoration: underline; }
.view_wrap .head .down_link a {color: #ff6001}
.view_wrap .content {line-height: 1.5; padding: 50px 0; border-bottom: 1px solid #ddd; min-height: 300px}
.button_wrap {text-align: center; padding-top: 50px;}
.button_wrap .btn {display:inline-block; width: 150px; text-align: center; height: 50px; line-height: 50px; border: 1px solid #222; color: #222; 	 
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.button_wrap .btn:hover {background: #222; color: #fff}

/*페이징*/
.pagingBox{padding:50px 0 0 0; width:100%; height:auto; overflow:hidden; text-align:center; }
.paging {display:inline-block; }
.paging a {display: inline-block; color:#999;border:1px solid transparent;margin-left:-1px; width:20px; font-size: 16px; height:28px; text-align:center; line-height:28px; overflow:hidden; vertical-align: top}
.paging a.on{opacity:1; position:relative; color:#ff6001; font-weight:500;}

.paging button {
    overflow: hidden;
    width: 30px;
    height: 30px;
    border: 1px solid #e6e6e6;
    line-height: 100px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: top;
}
.paging button.prevPage {display: inline-block; font-size:0; text-indent:-2000px; width:28px; height:28px; margin:0 10px 0 0; background:url('../images/etc/button_page_prev.png') no-repeat center center; }
.paging button.nextPage {display: inline-block; font-size:0; text-indent:-2000px; width:28px; height:28px; margin:0 0 0 10px; background:url('../images/etc/button_page_next.png') no-repeat center center; }
.paging button.firstPage {display: inline-block; font-size:0; text-indent:-2000px; width:28px; height:28px; background:url('../images/etc/button_page_first.png') no-repeat center center; }
.paging button.lastPage {display: inline-block; font-size:0; text-indent:-2000px; width:28px; height:28px; background:url('../images/etc/button_page_last.png') no-repeat center center; }


/* bis 소개 */
.bis_process {margin-top: 50px}
.bis_process ul {margin: 0 -20px}
.bis_process ul:after {display: block; clear: both; content: ""}
.bis_process .row {width: 50%; float: left;}
.bis_process .stepBox {display: flex; align-items: center; border-top:1px solid #eee; padding: 30px 0; margin: 0 20px}
.bis_process .stepBox .ico {display: block; width: 100px; margin-right: 30px}
.bis_process .stepBox .ico img {width: 100px}
.bis_process .stepBox dl {display: block; width:450px}
.bis_process .stepBox dt {font-size: 24px; font-weight: 600; margin-bottom: 10px}
.bis_process .stepBox dd {line-height: 1.5; word-break: keep-all; font-size: 16px}
.bis_process .row:last-child {border-bottom:1px solid #eee;}


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

/* 노선 검색 버튼 */
.serach_box {width: 500px; height: 60px; margin: -30px auto 50px; display: flex; border: 1px solid #ddd; overflow: hidden; border-radius: 10px;}
.serach_box .inp_text {width: 100%}
.serach_box .inp_text input {border: none; width: 100%; height: 100%;}
.serach_box .btn_search{display: block; width: 95px; text-indent: -9999px; background: #ff6000 url('../images/ico/ico_search_wh.svg') no-repeat center center; background-size: 30px auto;}

/* 대중교통정보, 이용안내 배경 */
.sub_visual.yellow {background: url('../images/bg_sub_yellow.jpg') no-repeat top center; background-size: cover}
.sub_visual.blue {background: url('../images/bg_sub_blue.jpg') no-repeat top center; background-size: cover}

/*********241218 추가*********/
.inner_guide {text-align: center}
.inner_guide img {max-width: 100%}
.inner_guide img.display_w,
.inner_guide img.display_m {margin: 0 auto}