.route_digrams{
	width: 100%;
	height: 100px;
	direction: ltr;
}

.route_digrams .start_end_route_1,.route_digrams .start_end_route_2{
	width: 120px;
}

.route_digrams .start_end_route_1 div{
	border: 1px solid #FF0000;
	color: #FF0000;
	height: 100px;
	line-height: 100px;
	text-align: center;
}


.route_digrams .start_end_route_2 div{
	border: 1px solid #008FC5;
	color: #008FC5;
	height: 80px;
	line-height: 80px;
	text-align: center;
}

.route_section{
	position: relative;
}

.route_section .info{
	width: 100%;
	text-align: center;
	position: absolute;
	top: -5px;
	color:#008FC5;
}
.route_section .progress{ 
	position: absolute;
	top: 50px;
	width: 100%
}
.route_section .num{
	text-align: center;
	color: #363636;
	position: absolute;
	top: 10px;
	width: 100%
}
.route_section .length{
	text-align: center;
	color: #363636;
	font-weight: bolder;
	font-size: 15px;
	position: absolute;
	bottom: 10px;
	width: 100%
}
.route_section .view{
	height: 20px;
	background-position: center;
	position: absolute;
	top: 30px;
	width: 100%
}

.route_section_1 .view{
	background-image: url(../img/section_1.jpg);
}
.route_section_2 .view{
	background-image: url(../img/section_2.jpg);
}
.route_section_3 .view{
	background-image: url(../img/section_3.jpg);
}

.route_section_4 .view{
	background-image: url(../img/section_4.jpg);
}

.route_digrams .section_joiner{
	width: 25px;
	position: relative;
}
.route_digrams .section_joiner .num{
	text-align: center;
	position: absolute;
	width: 100%;
	top: 0px
}
.route_digrams .section_joiner .view{
	border:2px solid #127167;
	height: 60px;
	position: absolute;
	width: 21px;
	top: 20px
}

.route_digrams .section_joiner .view.fillBg{
	background-color: #0ba96d;
}