@charset "utf-8";

.bus-route {display:flex; flex-direction:column; justify-content:center; height:720px; border:1px solid #ddd; padding:24px; color:#333; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; overflow:hidden;}
.bus-route .curve {position:relative; margin:-10px 0; display:flex; justify-content:flex-end;}
.bus-route .curve span {position:relative; display:block; width:50px; height:100px; border:10px solid #79a342; border-left:0; border-radius:0 100px 100px 0;}
.bus-route .curve span:after {content:""; position:absolute; top:50%; right:-18px; margin-top:-14px; width:28px; height:28px; background:url("../images/sub/route_arrow_down.png") 50% 50% no-repeat;}
.bus-route .line {position:relative; margin-right:50px; background:#79a342; z-index:2;}
.bus-route .line ul {display:flex; margin:0 -20px 0 10px; height:10px;}
.bus-route .line ul li {flex:1; position:relative;}
.bus-route .line ul li:after {content:""; position:absolute; bottom:-9px; left:50%; width:28px; height:28px; background:url("../images/sub/route_arrow_right.png") 50% 50% no-repeat;}
.bus-route .line ul li a {position:absolute; top:5px; left:0;}
.bus-route .line ul li a:before {content:""; position:absolute; left:0; top:-12px; width:25px; height:25px; background:#fff; border:3px solid #79a342; border-radius:100%;}
.bus-route .line ul li a span {position:absolute; bottom:12px; left:28px; width:300px; -webkit-transform:rotate(-60deg); transform:rotate(-60deg); -webkit-transform-origin:left bottom; transform-origin:left bottom;}
.bus-route .line ul li:last-child::after {display:none;}
.bus-route .line ul li.active a {color:#472f91;}
.bus-route .line ul li.active a:before {border-color:#472f91;}
.bus-route .line ul li.terminal a {color:#4a6c1e !important;}
.bus-route .line ul li.terminal a:before {top:-15px; width:30px; height:30px; border:0; background:#79a342 url("../images/sub/airplane.png") 50% 50% no-repeat;}
.bus-route .line ul li.terminal a span {left:32px;}
.bus-route .line.reverse ul {margin:0; flex-direction:row-reverse;}
.bus-route .line.reverse ul li:after {left:auto; right:50%; background-image:url("../images/sub/route_arrow_left.png");}
.bus-route .line.reverse ul li a {left:auto; right:0;}
.bus-route .line.reverse ul li a:before {left:auto; right:0;}
.bus-route .line.reverse ul li a span {bottom:auto; left:auto; top:17px; right:28px; text-align:right; -webkit-transform-origin:right top; transform-origin:right top;}
.bus-route .line.reverse ul li.terminal a span {right:32px;}

.bus-route-m {display:none; border:1px solid #ddd; padding:20px; color:#454545; font-size:15px; line-height:1.3em; letter-spacing:-.03em; word-break:break-all;}
.bus-route-m ul {}
.bus-route-m ul li {position:relative; padding-bottom:30px;}
.bus-route-m ul li:before {content:""; position:absolute; top:1px; left:0; margin-left:-1.5px; width:3px; height:100%; background:#79a342;}
.bus-route-m ul li:after {content:""; position:absolute; bottom:8px; left:-8px; width:18px; height:18px; background:url("../images/sub/route_arrow_right.png") 50% 50% no-repeat; background-size:contain; transform:rotate(90deg);}
.bus-route-m ul li:last-child {padding-bottom:0;}
.bus-route-m ul li:last-child::after {display:none;}
.bus-route-m ul li:last-child:before {display:none;}
.bus-route-m ul li a {display:block; position:relative; z-index:2; padding-left:20px;}
.bus-route-m ul li a:before {content:""; content:""; position:absolute; left:0%; top:50%; margin-left:-7px; margin-top:-9px; width:15px; height:15px; background:#fff; border:3px solid #79a342; border-radius:100%;}
.bus-route-m ul li a span {display:block;}
.bus-route-m ul li.active a {color:#472f91;}
.bus-route-m ul li.active a:before {border-color:#472f91;}
.bus-route-m ul li.terminal a {color:#4a6c1e !important;}
.bus-route-m ul li.terminal a:before {top:6px; margin-left:-10px; width:21px; height:21px; border:0; background:#79a342 url("../images/sub/airplane.png") 50% 50% no-repeat; background-size:70%;}
.bus-route-m ul li.terminal a span {}

@media (max-width: 1024px) {
	.bus-route {height:520px; font-size:15px;}
	.bus-route .curve {margin:-8px 0;}
	.bus-route .curve span {height:85px; border-width:8px;}
	.bus-route .curve span:after {right:-13px; margin-top:-10px; width:20px; height:20px; background-size:contain;}
	.bus-route .line ul {height:8px;}
	.bus-route .line ul li:after {bottom:-6px; width:20px; height:20px; background-size:contain;}
	.bus-route .line ul li a {top:4px;}
	.bus-route .line ul li a:before {top:-10px; width:21px; height:21px;}
	.bus-route .line ul li a span {bottom:8px; left:24px; width:250px;}
	.bus-route .line ul li.terminal a:before {top:-13px; width:24px; height:24px; background-size:70%;}
	.bus-route .line.reverse ul li a span {top:12px; right:22px;}
	.bus-route .line.reverse ul li.terminal a span {right:26px;}
}

@media (max-width: 900px) {
	
}

@media (max-width: 640px) {
	.bus-route {display:none;}
	.bus-route-m {display:block;}
/* 	.bus-route-m {padding:25px 0 0; height:120px; font-size:14px;}
	.bus-route-m ul {padding:0 15px;}
	.bus-route-m ul li {width:80px; padding:10px 2px;}
	.bus-route-m ul li:after {top:6px; width:12px; height:12px;}
	.bus-route-m ul li a {margin-right:10px;}
	.bus-route-m ul li a:before {top:-4px; margin-left:-5px; width:11px; height:11px; border-width:2px;}
	.bus-route-m ul li a span {padding-top:13px;}
	.bus-route-m ul li.active a:before {top:-5px; margin-left:-7px; width:15px; height:15px; border-width:3px;}
	.bus-route-m ul li.terminal a:before {top:-6px; margin-left:-8px; width:17px; height:17px;}
	.bus-route-m ul li.terminal a span {padding-top:16px;} */
}