@charset "utf-8";

table.tbl td.bg_col {background: #efefef;}

/* 차량민원 - 비용계산 - 건설기계 이전/변경등록 검색 버튼 */
.normal-btn {border-radius:5px; height:2.645em; line-height:2.645em !important;}

@media (max-width: 560px){
	.normal-btn {height:auto; line-height:1.9em !important;}
}

/* 시외버스 운행현황 */
.intercity_bus .btn_wrap {float: right;margin-top: -10px;}
@media all and (max-width:414px) {
	.intercity_bus h4, .intercity_bus .btn_wrap {float: none;}
	.intercity_bus .btn_wrap { margin: 20px 0 0 20px; }
}

/* 차량/교통 - 승용차 요일제 - 승용자요일제 참여 신청 */
.topbox.driving{background: url(/depart/img/sub04/ico_topbox_driving.png) no-repeat 25px 29px;}
@media (max-width: 518px){
	.topbox.driving{background: url(/depart/img/sub04/ico_topbox_driving.png) no-repeat center 33px;}
}

/* 버스지선정보(표) */
.bus_route td, .bus_route th {padding:7px 10px;}
.bus_route tbody th, .bus_route .route  {vertical-align:top;}
.bus_route .route ul {padding-top:10px;}
.bus_route .route ul:after  {content:''; display:block; clear:both;}
.bus_route .route li {position:relative; width:20%; min-height:105px; padding:45px 0 0; margin-top:0; font-size:14px; font-weight:600; line-height:1.2em; text-align:center !important; float:left; box-sizing:border-box;}
.bus_route .route li:before {display:none;}
.bus_route .route li:after {content:''; display:block; width:100%; height:3px; background:#d6eae4; position:absolute; top:20px; z-index:-1;}
.bus_route .route li:first-child:after {width:50%; right:0;}
.bus_route .route li:last-child:after {width:50%;}
.bus_route .route li span:first-child {display:block; width:11px; height:11px; font-weight:400; background:#fff; border:3px solid #349476; border-radius:50%; box-sizing:border-box; position:absolute; left:50%; transform:translateX(-50%); top:16px;}
.bus_route .route li:first-child span:first-child, .bus_route .route li.end span:first-child {width:33px; height:33px; padding:5.5px 0; font-size:11px; color:#666; top:5px;}
.bus_route .route li.round span:first-child {width:33px; height:33px; padding:9px 0; font-size:11px; color:#666; top:5px; background:url(/depart/img/sub04/ico_bak01.png) no-repeat; border:0; border-radius:0;}
.bus_route .route.yellow-line li:after {background:#fff3d4;}
.bus_route .route.yellow-line li span:first-child {border-color:#ffc527;}
.bus_route .route.yellow-line li.round span:first-child {background:url(/depart/img/sub04/ico_bak02.png) no-repeat;}
.bus_route .route li.subway {padding-top:40px;}
.bus_route .route li.subway span:first-child {width:21px; height:23px; background:url(/depart/img/sub04/ico_sub01.png) no-repeat bottom center !important; border:0; border-radius:0; top:10px;}
.bus_route .route li.subway span.line {display:inline-block; width:25px; height:25px; padding:5px 0; margin-right:3px; font-size:10px; color:#fff; background:#0c3484; border-radius:50%; box-sizing:border-box;}
.bus_route .route li.subway.sub02 span:first-child {background-image:url(/depart/img/sub04/ico_sub02.png) !important;}
.bus_route .route li.subway.sub02 span.line {padding:3px 0; line-height:1em; background:#d19900;}
.bus_route .route li.subway.round span:first-child, .bus_route .route li:first-child.subway span:first-child {height:38px; padding:0; font-size:11px; top:-5px;}
.bus_route .route[colspan="5"] li {width:14.2%;}

/* 비용계산 */
.cost-calc {position:relative; width:100%; text-align:center;}
.cost-calc ul:after {content:''; clear:both; display:block;}
.cost-calc li {display:inline-block; width: 300px; padding:40px; border-radius:10px; margin:0 10px; box-sizing:border-box;}
.cost-calc li:nth-child(1) {background:#BCDAFD;}
.cost-calc li:nth-child(2) {background:#B4F1FF;}
.cost-calc li div {width:150px; border-radius:75px; background:#fff; margin:0 auto;}
.cost-calc li div img {display:block; width:100%;}
.cost-calc li p {font-size:28px; font-weight:700; color:#20194B; margin:20px 0 10px; line-height:1.3;}
.cost-calc li a[target="_blank"] {display:inline-block; background:#fff; padding-right:0; padding:10px 30px 10px 20px; border-radius:20px;}
.cost-calc li a[target="_blank"]:after {top:50%; margin-top:-8px; right:12px;}

@media all and (max-width:768px) {
	.cost-calc li {display:block; float:left; width:46%; padding:30px; margin:0 2%;}
	.cost-calc li div {width:120px;}
	.cost-calc li p {font-size:24px;}
}

@media all and (max-width:480px) {
	.cost-calc li {display:block; float:none; width:100%; padding:30px; margin:10px 0;}
	.cost-calc li div {width:120px;}
	.cost-calc li p {font-size:20px;}
	.cost-calc li p br {display:none;}
}

/*  광주 희망콜 */

.box-top {position: relative;width:100%;padding: 14em 1em 0;background:url(../img/sub04/sub041301_00.png) no-repeat top center;background-size: 100% auto;box-sizing: border-box;}
.box-top div {position:realtive; width:100%; padding:1.5em; border-radius:1em; background:#fff;}
.box-img {width:100%; padding:1em;}


/* 이음택시 */

.e-um-service {position:relative; text-align:center; word-break:keep-all;}
.e-um-service .beginner {width:26%; float:left; border-radius:1em; overflow:hidden; border:1px solid #5546a8;}
.e-um-service .beginner .tit {padding:.5em; color:#fff; background:#5546A8; }
.e-um-service .beginner .txt {padding:1.5em 1em; }
.e-um-service .next-step {width:72%; float:left; margin-left:2%;  border-radius:1em; overflow:hidden;  border:1px solid #ddd;}
.e-um-service .next-step .tit {padding:.5em; background:#ddd; }
.e-um-service .next-step ul {padding:1em;}
.e-um-service .next-step ul li {position:relative; display:inline-block; vertical-align:middle; padding:.5em 1.5em; text-align:center; }
.e-um-service .next-step ul li:before {content:'▶'; position:absolute; top:50%; right:0; transform:translate(0, -50%);}
.e-um-service .next-step ul li:last-child:before {display:none;}

@media all and (max-width:768px) {
	.e-um-service .beginner {float:none; width:100%;}
	.e-um-service .next-step {float:none; width:100%; margin-left:0; margin-top:1em;}

}

@media all and (max-width:640px) {
	.e-um-service .next-step ul li {display:block; width:33.33333%; float:left; min-height:5em; line-height:5em;}
	.e-um-service .next-step ul li p {display:inline-block; vertical-align:middle; line-height:1.3em;}
}

@media all and (max-width:540px) {
	.e-um-service .next-step ul li {width:50%;}
}

@media all and (max-width:380px) {
	.e-um-service .next-step ul li {width:100%; float:none; min-height:auto; line-height:initial; padding:1.5em .5em;}
	.e-um-service .next-step ul li:before {content:'▼'; top:auto; bottom:-.75em; right:auto; left:50%; transform:translate(-50%,0);}
}