@charset "utf-8";

.content h4 {font-size:20px; padding:10px 0; color:#3f3f3f;}
.content h5 {font-size:18px; padding:8px 0 5px 20px; color:#206EEC; position:relative;}
.content h5::before, .content h5::after {display:block; position:absolute; top:0; left:0; content:"";}
.content h5::before {width:15px; height:15px; top:9px; background:#206EEC; border-radius: 30px;}
.content h5::after {width:5px; height:5px; top:14px; left:5px; background:#fff; border-radius: 30px;}
.content h6 {font-size:16px; padding:6px 0 6px 10px; color:#565656; position:relative;}
.content h6::before {display:block; position:absolute; top:12px; left:0; content:""; width:5px; height:5px; background:#565656; border-radius:10px;}
.content p {color:#595959;font-size:14px; font-weight: 400; line-height: 1.3;}

/* (공통)서브 하단 배너모음 선 추가 */
.total_banner {border-top: 1px solid #E9E9E9;}

.list_basic li {position:relative; margin-bottom:5px; padding-left:12px; color:#595959; font-size:14px; font-weight: 400; line-height: 1.4;}
.list_basic li::before {content:""; display:block; position:absolute;top:8px;left:0;width:6px; height:2px;border-radius:10px; background:#565656;} 
.list_basic.lt01 li::before {width:6px; height:2px; border-radius:10px; background:#565656;}
.list_basic.lt02 li::before {width:4px; height:4px; background:#aaa; border-radius:50%;}
.list_basic.noblet li {padding-left:0;}
.list_basic.noblet li:before {display:none;}

.box_default {background:#f5f5f5; padding:15px; color:#5d5d5d;}
.box_st01 {border: #bcd2ff solid 1px;}
.box_st01 .inner {border:#f3f7ff solid 5px; padding:15px;}
.box_st01 .inner p {color:#c90223; font-weight:400;}
.box_st02 {position:relative; border:#dedede solid 1px; padding:15px; color:#454545;}
.box_st02:before, .box_st02:after {display:block; content:""; position:absolute; width:9px; height:9px;}
.box_st02:before {left:0; top:0; border-left:#206EEC solid 3px; border-top:#206EEC solid 3px;}
.box_st02:after {right:0; bottom:0; border-right:#206EEC solid 3px; border-bottom:#206EEC solid 3px;}
.box_st02 img {display:block; width:auto; margin:8px auto; }
.box_st02 strong {font-size:16px; display:block; margin-bottom:10px;}
.box_st03 {border-bottom:1px solid #dedede; color:#454545;}
.box_st03 img {display:block; width:auto; margin:8px auto;}

.btn_set {padding:10px 0;}
.btn_con {display:inline-block; padding:12px 15px; font-size:14px; border-radius: 3px; font-weight:500;  margin:5px 0;}
.btn_con::after {display:inline-block; vertical-align: 0px; font-family:"font awesome 5 pro"; margin-left:10px;}
.btn_con.btn_small {padding:6px 8px;}
.btn_con.btn_small.btn_ss {padding:2px 8px;}
.btn_blk {border:#2a2a2a solid 1px; color:#2a2a2a;}
.btn_blk.btn_revers {border:#2a2a2a solid 1px; background-color:#2a2a2a; color:#fff;}
.btn_red {border:#fb4141 solid 1px; color:#fb4141;}
.btn_red.btn_revers {border:#fb4141 solid 1px; background-color:#fb4141; color:#fff;} 
.btn_go::after {content:"\f105"; font-weight:700; line-height: 16px;}
.btn_link::after {content:"\f2d2"; font-weight:300;}
.btn_down::after {content:"\f33d"; font-weight:300;}
a[target="_blank"].btn_down::after {content:"\f33d"!important; font-weight:300 !important;}
a[target="_blank"].btn_none:after {display:none;} /* a태그 아이콘 없음 */
a[target="_blank"].no_icon::after {display:none;} /* a태그 아이콘 없음 */

.img_box {text-align:center;}
.img_box.img_box001 {border:1px solid #aaa; padding:20px; border-radius:5px;}
img {max-width:100%;}

.color01 {color:#eb4141;}
.color02 {color:purple;}
.color03 {color:#206EEC;}
.weight01{font-weight:500;}
.weight02 {font-weight:700;}
.br {display:block; height:1px;}
.brnone {display:none;}
.back_color {background-color:#fffbf8;}

/* 기본테이블 */
.basic_table {width:100%; max-width:100%; border-collapse:collapse; border-top:#1e1e1e solid 2px; word-break: keep-all; line-height: 1.2;}
.basic_table thead tr th,.basic_table thead tr td {padding:10px 5px; border-bottom:#d8d8d8 solid 1px;  border-right:#d8d8d8 solid 1px;}
.basic_table tbody tr th,.basic_table tbody tr td {padding:10px 5px; border-bottom:#d8d8d8 solid 1px; border-right:#d8d8d8 solid 1px;}
/*.basic_table tr th:first-child,.basic_table tr td:first-child{ border-left:0; }*/
.basic_table tr th:last-child,.basic_table tr td:last-child {border-right:0;}
.basic_table .tr_bg_green {background:#f1ffd3;}
.basic_table th {font-size:15px; color:#1e1e1e; background-color:#fafafa; vertical-align:middle;}
.basic_table td {font-size:14px; color:#454545; text-align:left;  vertical-align:middle; word-break:keep-all;}
.basic_table td a {text-decoration:none; color:#454545;}
.basic_table td.red {color:#F00;}
.basic_table td.bg_g {background:#fafafa;}
.basic_table .no_border {border-right-style: none;}
.basic_table .td_center {text-align:center;}
.basic_table .td_right {text-align:right;}
.basic_table .td_left {text-align:left;}
.basic_table tr td ul li {text-align:left;}
.border_none {border-right:none;}
.basic_table tr th.border_r,.basic_table tr td.border_r {border-right:#d8d8d8 solid 1px;}
.basic_table.table_resp th {text-align: left;}
.basic_table.table_resp th,.basic_table.table_resp td {display:block; border-left:0; border-right:0;}
.basic_table.table_resp .no_cont{display:none;} /* 콘텐츠 없을때, 반응형조절 (직원전화번호사용)*/
.basic_table.tbl_st01 {border-top: #226ced solid 2px;}
.basic_table.tbl_st01 th {color: #0b56d7;}
.basic_table.tbl_st01 td {color:#464646;}
.table_center tbody tr td {text-align:center;}

.notice {background-color: #5bc0de; color: #fff; text-align: center; padding: 4px; font-size: .75em; font-weight: normal; border-radius: 3px;}
.notice_em {color:#c75219 !important; font-weight:bold !important;}

/* 반응형테이블 */
.responsive{ min-width:600px; }
.scroltable-wrapper { position: relative; }
.scroltable-container { overflow-x:auto}
.scroltable-nav { display: none;  position: absolute;  width: 60px;  height: 100%;  cursor: pointer;}
.scroltable-nav.scroltable-nav-left {  left: 0; background: linear-gradient(to left, rgba(255,255,255,0), #fff);}
.scroltable-nav.scroltable-nav-right {  right: 0; background: linear-gradient(to right, rgba(255,255,255,0), #fff);}
.scroltable-nav.scroltable-nav-left:before{ display:inline-block; position:absolute; left:0; top:40%; content:"\f0a6"; font-family: "font awesome 5 pro"  } 
.scroltable-nav.scroltable-nav-left:after{ display:inline-block; position:absolute; left:0; top:40%; margin-top:20px;  content:"\f33e"; font-family: "font awesome 5 pro"  } 
.scroltable-nav.scroltable-nav-right:before{ display:inline-block; position:absolute; right:0; top:40%; content:"\f0a6"; font-family: "font awesome 5 pro"  } 
.scroltable-nav.scroltable-nav-right:after{ display:inline-block; position:absolute; right:0; top:40%; margin-top:20px;  content:"\f340"; font-family: "font awesome 5 pro"  } 

/* paging */
.paging{ clear:both; text-align:center; padding:25px 0 0 0}
.paging ul li{ display:inline-block;  }
.paging ul li a{ display:block; width:30px; height:34px; border:#e2e2e2 solid 1px; line-height:30px; font-size:14px; font-weight:300}
.paging ul li a.active{ background:#444; border:#006 solid 1px; color:#fff;}

@media all and (max-width:767px) {
	.basic_table.table_resp thead{display:none;}
}
@media all and (min-width:768px) {
	.basic_table.table_resp th{ text-align: center; }
	.basic_table.table_resp th,.basic_table.table_resp td{display:table-cell;border-right:#eee solid 1px;}
	.basic_table.table_resp .no_cont{display:table-cell;}
}
@media all and (min-width:1024px) {
	.content h4 {font-size:24px;}
	.content h5 {font-size:20px; font-weight:500;}
	.content h5:before {top:11px;}
	.content h5:after {top:16px;}	
	.content h6 {font-size:18px; font-weight:500;}
	.content p {font-size:16px; line-height: 1.5;}

	.list_basic li {font-size:16px;}

	.box_default {padding:30px;}
	.box_default p {font-size:14px;}
	.box_st01 .inner {border: #f3f7ff solid 9px;}
	.box_st02 {padding:40px 60px; overflow:hidden }
	.box_st02 img {float:left; margin-right:40px; }
	.box_st02 strong {font-size:20px;}
	.box_st02 .img_mb {margin-bottom:60px;} /*box안에 내용이 길때*/
	.box_st02 .img_mb01 {margin-bottom:112px; margin-right:21px;}
	.box_st02 .mt10 > .img_mb02 {margin:0 10px 0 0;}
	.box_st03 {padding:40px 60px; overflow:hidden;}
	.box_st03 img {float:left; margin-right:40px;}

	.basic_table thead tr th,.basic_table thead tr td {padding:15px 10px;}
	.basic_table tbody tr th,.basic_table tbody tr td {padding:15px 10px;}
	.basic_table th {font-size:16px;}

	/* 작은 테이블 (테이블 길이가 넘어갈때)*/
	.basic_table.table_small thead tr th, .basic_table.table_small tbody tr th {padding:10px 2px; font-size:14px;}
	.basic_table.table_small thead tr td {padding:10px 2px; font-size:13px;}

}

/* 단계(기본5개) */
.list_step {margin: 15px;}
.list_step > li {text-align:center; border:1px solid #d8d8d8; border-radius:5px; margin-bottom:40px; position:relative; padding:20px;  line-height:1.4; }
.list_step > li > br {display:none;}
.list_step > li:last-child {margin-bottom:0;}
.list_step > li:before {content:''; position:absolute; top:0; left:50%; margin:-35px 0 0 -10px; display:block; width:14px; height:14px; background:transparent; border-left:2px solid #222; border-bottom:2px solid #eb4141; transform:rotate(-45deg); transition:all .3s ease-in-out;}
.list_step > li:first-child::before {display:none;}
.list_step .part {display:block; background: #d4eb9c; padding:10px; margin-bottom:10px;}
.list_step > li.benone::before {display:none;}

@media all and (min-width:768px) {
	.list_step {overflow:hidden;}
	.list_step > li {float:left; width:43%; margin:0 3.5% 20px 3.5%;}
	.list_step > li::before {top:50%; left:-27px; transform:rotate(-135deg); margin-top:-10px;}
}
@media all and (min-width:1024px) {
	.list_step > li {width: 27%;margin: 0 3% 20px 3%; display:flex; justify-content:center; flex-direction:column;}
	.list_step > li:before {left: -27px;}
}
@media all and (min-width:1200px) {
	.list_step{margin:15px 0;}
	.list_step > li{width:18%; margin:0 1.25%; min-height:86px;}
	.list_step > li.s_con{padding-top:30px;}
	.list_step > li > br{display:block;}
	.list_step > li:before{left:-16px;}
	.list_step > li:first-child {margin-left: 0 !important;}
	.list_step > li:last-child {margin-right:0;}
}
/* 단계(10개이상) - 버스 > 버스전용차로 > 과태료 > 과태료 안내 */
.list_step.col12 > li > span {display:block;} 

@media (min-width:1200px) {
	.list_step.col12 > li {width:14%; margin:8px 1.4% 8px 1.5%; min-height:87px;}
	.list_step.col12 > li:nth-child(6) {margin-right:0;}
}
/* 단계(4개) - 버스 > 버스전용차로 > 의견진술/이의신청 */
.list_step.col04 > li > br{display:block;}

@media (min-width:1024px) {
	.list_step.col04 > li{width:20%;}
	.list_step.col04 > li:first-child{margin-left:0;}
	.list_step.col04 > li:last-child{margin-right:0;}
}
@media (min-width:1200px) {
	.list_step.col04 > li{width:23%;}
}
/* 단계(3개) - 시내버스 준공영제 > 표준운송원가 제도 */
.list_step.col03.col03_1 > li > br{display:block;}

@media (min-width:768px) {
	.list_step.col03.col03_1  > li{width:26.33%;}
	.list_step.col03.col03_1:nth-child(1) > li{min-height:152px;}
	.list_step.col03.col03_1:nth-child(2) > li{min-height:196px;}
	.list_step.col03.col03_1:nth-child(3) > li{min-height:108px;}
}
@media (min-width:1024px) {
	.list_step.col03.col03_1:nth-child(1) > li{min-height:152px;}
	.list_step.col03.col03_1:nth-child(2) > li{min-height:174px;}
	.list_step.col03.col03_1:nth-child(3) > li{min-height:108px;} 
}
@media (min-width:1200px) {
	.list_step.col03.col03_1 > li{width:31.6%;}
}

/* 요금/카드/환승할인제 수정-240709 */
.viewer_list {display:flex;flex-direction:row;flex-wrap:wrap;justify-content: center;align-items: center;column-gap: 1.5rem;}
.viewer_list li {display:block;width: 100%;height: 168px;padding-top: 1.2rem;border-radius: 15px; margin-bottom:1rem;}
.viewer_list li:nth-child(1) {background: #fff7d5;}
.viewer_list li:nth-child(2) {background: #e6efff;}
.viewer_list li:nth-child(3) {background: #dbf9ef;}
.viewer_list li:nth-child(4) {background: #efefff;}
.viewer_list li a {display:flex;flex-direction: column;align-items: center;font-weight: 500;color: #333;}
.listCount {float:right; max-width:150px; margin-bottom:10px;}

@media (min-width:500px) {
	.viewer_list li {width: 45%;}
}
@media (min-width:1000px) {
	.viewer_list li {width: 23%;margin-bottom:0;}
}

/* 위반내역 및 납부조회 */
.inquiry {padding:20px 0;}
.inquiry input[type='radio'] + label {margin:5px;}
.inquiry .exp {font-weight:500; margin-bottom:15px;}
.inquiry .btn_confirm {display:inline-block;padding: 8px 20px;border-radius: 20px;border:#404040 solid 1px;}
.inquiry .exp_red {margin-top:10px; color:#eb4141;}
.inquiry .btn_request {display:block;width:100px;margin:10px auto 0 auto;padding:10px 5px;text-align:center;background:#206EEC;color:#fff;border-radius:30px;}
.inquiry .car_num {width:150px;}

@media all and (min-width:1024px) {
	.inquiry .exp {display:inline-block; margin-right:20px;}
	.inquiry .exp_red {display:inline-block; margin-left:20px;}
}

/* 시내버스 준공영제 소개 */
.gr_box0 1{position:relative; padding-bottom:30px;}
.gr_box01::after {content:''; display:block; background:#aaa; width:1px; position:absolute; left:50%; height:30px; bottom:0px;}
.gr_box01 p {display:block; width:100%; background:#f2f2f2; border-radius:10px; font-size:16px; text-align:center; margin:0 auto; line-height:24px; padding:28px 0; word-break: keep-all;}

.gr_box02 > div{width:100%; border-radius:5px; margin-bottom:10px;}
.gr_box02 .gr_left{background:#448aca;}
.gr_box02 .gr_center{background:#32b16c;}
.gr_box02 .gr_right{background:#c45e81;}
.gr_box02 p{display:block; text-align:center; padding:17px 0; color:#fff;}

.gr_list > li{margin-top:10px;}
.gr_list > li > p{display:block; text-align:center; padding:17px 0; border:1px solid #dcdcdc; border-radius:5px; line-height:22px; word-break:keep-all;}

@media all and (min-width:768px) {
	.gr_box01:after{height:57px; bottom:-27px;}
	.gr_box01 p{width:460px; margin:0 auto;}

	.gr_box02{overflow:hidden; position:relative;}
	.gr_box02:before{content:''; display:block; height:1px; width:100%; background:#aaa; position:absolute; top:42%; left:0;}
	.gr_box02 > div{width:30%; margin-right:5%; position:relative;}
	.gr_box02 > div:last-child{margin-right:0;}
	.gr_box02 .gr_left{float:left;}
	.gr_box02 .gr_center{position:absolute; left:50%; transform:translateX(-50%);}
	.gr_box02 .gr_right{float:right;}

	.gr_box03 .gr_list > li{float:left; width:30%; margin-right:5%;}
	.gr_box03 .gr_list > li:last-child{margin-right:0;}

	.gr_box03 .gr_list > li > p{min-height:102px;}

	.gr_list{overflow:hidden;}
}

/* 서브로그인 */
.sub_login{border:3px solid #ededed; padding:20px;}
.sub_login ul li{margin-bottom:15px;}
.sub_login ul li label{display:block; margin-bottom:10px; font-weight:500;}
.sub_login ul li .w30{width:calc(100% - 22px); margin-bottom:5px;}
.sub_login ul li span{margin-left:3px;}
.sub_login_btn a{display:block; padding:15px 0; text-align:center; background:#2a2a2a; color:#fff; border-radius:5px;}

@media all and (min-width:480px) {
	.sub_login ul li .w30{width:26.5%;}
}
@media all and (min-width:768px) {
	.sub_login{overflow:hidden;}
	.sub_login ul{float:left; width:85%;}
	.sub_login ul li{display:inline-block; vertical-align:middle; margin-bottom:0;}
	.sub_login ul li:first-child{margin-right:20px;}
	.sub_login ul li label{display:inline-block; vertical-align:middle; margin-bottom:0;}
	.sub_login ul li input{display:inline-block; width:120px; vertical-align:middle; }
	.sub_login ul li .w30{width:75px; margin-bottom:0;}
	.sub_login_btn{float:left; width:15%;}
}
@media all and (min-width:1024px) {
	.sub_login{padding:20px 70px;}
	.sub_login ul li:first-child{margin-right:40px;}
	.sub_login ul li label{width:80px;}	
	.sub_login ul li span{margin:0 5px;}
}

/* 2020.10.23 위반내역 주소검색 추가 */
.btn_addr{ background:#212121; color:#fff; border:0; height:40px; padding:0 10px;  vertical-align: middle; border-radius: 5px;  }

/* 셔틀열차 */
.train_cate1 em {display:inline-block; padding:2px 5px 3px; border-radius: 10px; color:#fff; font-weight:500;  font-size:12px;  margin:2px; background:#316ce2;}
.train_cate2 em {display:inline-block; padding:2px 5px 3px; border-radius: 10px; color:#fff; font-weight:500;   font-size:12px; margin:2px;   background:#6f135e;}

/* 자전거도로 > 자전거 안전교육 */
.bike_box ul {display:flex; flex-wrap:wrap; justify-content:center;}
.bike_box ul li {margin-top:20px;text-align:center; border-radius:10px;}
.bike_box ul li img {display:block; border-radius:10px 10px 0 0;}
.bike_box ul li a {margin:20px 0;}

@media all and (min-width:700px) {
	.bike_box ul {flex-wrap:nowrap;}
	.bike_box ul li {width:33.3%;margin-right:20px;}
	.bike_box ul li:last-child {margin-right:0;}
}

/* G패스 질문답변 */
.accordion-header {background: #ebebeb;margin: 5px 0 0 0;padding: 30px 50px 30px 20px;border-bottom: 1px solid #cccccc;cursor: pointer;color: #666666;}
.active-header {background: url('/home/traffic/images/sub/faq_plus.png') #fff;	background-repeat: no-repeat;	background-position: 97% 50%;}
.active-header span,.inactive-header span {background: url('/home/traffic/images/sub/faq_q.png') #fff;	background-repeat: no-repeat;	background-position: 0 50%;	padding-left:20px;padding-right:20px;}
.active-header:hover {background: url('/home/traffic/images/sub/faq_plus.png') #fff;background-repeat: no-repeat;	background-position: 97% 50%;}
.inactive-header {background: url('/home/traffic/images/sub/faq_minus.png') #fff;background-repeat: no-repeat;	background-position: 97% 50%;}
.inactive-header:hover {background: url('/home/traffic/images/sub/faq_minus.png') #fff;background-repeat: no-repeat;	background-position: 97% 50%;}
.accordion-content {display: none;padding: 30px 20px 30px 45px;background: url('/home/traffic/images/sub/faq_a.png') #eee;background-repeat: no-repeat;	background-position: 25px 35px;	border-bottom: 1px solid #cccccc;border-top: 0;width:100% !important;}

/* new_qna */
.accordion02 {border-bottom:1px solid #7fa9c1;}
.accordion02 p {color:#595959;}
.accordion02 img {max-width:100%;}
.accordion01.active-header {background: url('/home/traffic/images/sub/faq_p.png') #fff4e6;background-repeat: no-repeat;background-position: 97% 50%;}
.accordion01.active-header span {background:url('/home/traffic/images/sub/faq_qu01.png') #fff4e6;background-repeat:no-repeat;background-position:0 50%;padding-left:20px;padding-right:20px;color:#df5b04;font-weight:bold;}
.accordion01.inactive-header span {background:url('/home/traffic/images/sub/faq_qu01.png') #fff;background-repeat:no-repeat;background-position:0 50%;padding-left:20px;padding-right:20px;}
.accordion02 {display:none;padding:30px 20px 30px 45px;background:url('/home/traffic/images/sub/faq_a.png') #f8f8f8;background-repeat:no-repeat;background-position:25px 35px;border-bottom:1px solid #ef8726;border-top:0;width:100% !important;}
.accordion01 span.blind {display:none;}

/* 시내버스 노선개편 > 노선혁신 분과회의 */
.box_linimg {display:block;}
.box_linimg > .img_box > img {border:1px solid #E9E9E9;}

@media all and (min-width:1024px) {
	.box_linimg {display:flex;justify-content: space-between;}
}