/*materializecss.com*/
@font-face
{
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons
{
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.dropdown-content li>a, .dropdown-content li>span
{
	color: #f7a901;
	background-color: #fff7b6;
}
.dropdown-content li>a:hover, .dropdown-content li>span:hover
{
	background-color: #fff;
}
.collection
{
	border: none;
}
.collapsible-body
{
	background-color: #fff;
}
span.badge.new:after
{
	content: "";
}
.ol-attribution.ol-uncollapsible
{
	display: none;
}
.collection .collection-item.active
{
	background-color: #218c00;
	color: #eafaf9;
}
.dropdown-content
{
	background-color: #fff7b6;
}
.collection
{
	margin: 0;
}
label
{
	color: #fff;
}
.btn:hover, .btn-large:hover, .btn-small:hover
{
	background-color: rgba(0,0,0,0.1);
}
.container
{
	max-width: initial;
	width: 95%
}
@media only screen and (min-width: 601px)
{
	.container
	{
		width: 95%
	}
}
@media only screen and (min-width: 993px)
{
	.container
	{
		width: 95%;
	}
}
.sidenav li>a {
	font-size: 1.6em;
	height: inherit;
	line-height: 3em;
}

.hidden
{
	display: none;
}
.padding-20
{
	padding: 20px;
}
.map
{
	position: relative;
}
.map.mobile:after
{
	content: attr(pseudo);
	color: #fff;
	font-size: 2em;
	font-weight: bold;
	line-height: 300px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	text-align: center;
}
.lineprogress
{
	height: 2px;
	width: 0%;
	z-index: 9999;
	background-color: #6babd0;
}
.relative
{
	position: relative;
}
.absolute
{
	position: absolute;
}

/*loading*/
.preloader-wrapper
{
	position: fixed;
}
.fullScreenLoader
{
	bottom: calc(50% - 32px);
	left: calc(50% - 32px);
	z-index: 10000;
}
.loadingBlock
{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
}
.loadingBlock>.preloader-wrapper
{
	position: absolute;
}
.loadingGradient
{
	animation-duration: 1.8s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #00000040 8%, #00000038 38%, #00000040 54%);
	background-size: 100% 100%;
}
@keyframes placeHolderShimmer
{
	0%
	{
		background-position: 0 0
	}
	100%
	{
		background-position: 100vw 0
	}
}

/*marquee*/
/*.marquee
{
	width: 100%;
	height: 30px;
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #ffc03a;
	color: #6b6b6b;
	font-size: 1.5em;
	position: absolute;
	top: 0;
	text-align: center;
}
.marquee a
{
	color: #6b6b6b;
}
.marquee .scrolling
{
	animation: marquee 6s linear infinite;
}
.marquee .scrolling:hover,
.marquee .paused
{
	animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to { 
    transform: translateY(-100%);
  }
}*/
.marquee
{
	width: 100%;
	height: 30px;
	margin: 0 auto;
	padding: 4px 20%;
	background-color: #ffc03a;
	color: #6b6b6b;
	font-size: 1em;
	position: absolute;
	top: 0;
	text-align: center;
}
.scrolling
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateX(10%);
	transition: opacity 0.5s, transform 1s;
}
.scrolling .material-icons
{
	font-size: 1.2em;
	vertical-align: sub;
	margin-right: 5px;
}
.scrolling a
{
	text-decoration: underline;
}
.scrolling.fadeIn
{
	opacity: 1;
	transform: translateX(0);
}

/*global*/
*
{
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-overflow-scrolling: touch;
	-webkit-touch-callout: none;
}
input
{
	-webkit-user-select: auto !important;
	-khtml-user-select: auto !important;
	-moz-user-select: auto !important;
	-ms-user-select: auto !important;
	user-select: auto !important;
}
html, body
{
	touch-action: manipulation;
}
body
{
	border-top: solid 3px #EA5406;
	background-color: #fff7b6;
}
body.marginTop
{
	margin-top: 66px;
}
html.noScroll,
body.noScroll
{
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
}
#sideNav
{
	background: linear-gradient(to bottom, rgba(255, 247, 182, 0.59), rgb(255, 247, 182)),url(../images/img-discover-kinmen-03.jpg) no-repeat 75% 0;
	background-size: cover;
}
nav
{
	position: relative;
	border-bottom: solid 1px #F7A901;
	background-color: #f7a901;
}
nav.fixed
{
	position: fixed;
	top: 0;
	z-index: 2;
	opacity: .9;
}
nav.fixed ul
{
	margin-left: calc(50% - 500px);
}
nav ul
{
	/*width: 650px;*/
	margin: 0 auto;
	margin-left: calc(50% - 320px);
}
nav ul a
{
	color: #ffffff;
	font-size: 1.6em;
	font-weight: bold;
}
body.en nav ul a
{
	font-size: 1.4em;
}
nav ul a:hover
{
	background-color: #fff7b6;
	color: #f7a901;
}
.topLogo
{
	min-height: 85px;
}
@media only screen and (max-width: 300px)
{
	.topLogo
	{
		/* margin-top: 13px; */
	}
}
[data-target="sideNav"]
{
	position: absolute;
	top: 20px;
	left: 0;
}
main
{
	min-height: 552px;
	background-color: #fff;
}
main .header
{
	font-size: 1.5rem;
	color: #ffffff;
	text-align: center;
	/* padding-top: 20px; */
	/* margin-bottom: 20px; */
}
main .help
{
	font-size: 1rem;
	color: #ff0000;
	text-align: center;
}
main #drivingMap .header
{
	color: #010194;
}
main #travelPlanner .header
{
	color: #007300;
}
main #travelPlanner .tip
{
	position: absolute;
	top: 2px;
	left: calc(50% - 73.5px);
	font-size: 1.1rem;
	z-index: 1;
	background-color: #008c00;
	color: #fff;
	padding: 4px 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	opacity: 0.7;
	pointer-events: none;
}
main #travelPlanner .detail .material-icons
{
	vertical-align: middle;
	transition: all 0.5s;
}
main #travelPlanner .detail.open .material-icons
{
	transform: rotate(180deg);
}
main #travelPlanner .list.collection>.collection-item
{
	padding: 0;
	cursor: pointer;
}
main #travelPlanner .router
{
	padding: 10px 20px;
}
main #travelPlanner .collapsible
{
	border: none;
	box-shadow: inherit;
	margin: 0;
}
main #travelPlanner .collapsible-header
{
	padding: 0;
	display: inherit;
	text-align: center;
	border: none;
}
main #travelPlanner .collapsible-body
{
	color: #000;
	max-height: calc(100vh - 430px);
	overflow-y: auto;
}
main #travelPlanner .detail
{
	background-color: #e9ffe1;
}
main #travelPlanner .collection-item.active .detail
{
	background-color: #269c00;
	color: #fff;
}
main #travelPlanner .stepFrame
{
	position: relative;
}
main #travelPlanner .timeDistance
{
	position: absolute;
	width: 50px;
	font-size: 0.8rem;
	color: gray;
	line-height: 0;
	top: 15px;
	left: -12px;
	line-height: 1.3rem;
	text-align: center;
}
main #travelPlanner .collection .collection
{
	margin-left: 40px;
}
main #travelPlanner .collection .collection-item.title
{
	line-height: 6rem;
	position: relative;
}
main #travelPlanner .collection .collection-item.title>.stepFrame
{
	margin-right: 20px;
}
main #travelPlanner .collection .collection-item.title>.roadName
{
	font-size: 1.3rem;
	font-weight: bolder;
	position: absolute;
	line-height: 1.6rem;
	top: 35px;
}
main #travelPlanner .collection .collection-item.title>.od
{
	position: absolute;
	top: 77px;
	left: 65px;
	font-size: 0.8rem;
	/* width: 300px; */
	line-height: 0.9rem;
}
main #travelPlanner .collection .collection-item.title>.routeName
{
	position: absolute;
	top: 15px;
	left: 65px;
	font-size: 0.8rem;
	line-height: 1rem;
	border: solid 1px;
	padding: 2px;
}

main #travelPlanner .collection .collection-item.title>.roadName>.material-icons
{
	vertical-align: sub;
}
main #travelPlanner .collection
{
	border-right: none;
	border-left: none;
	border-top: none;
	border-radius: 10px;
}
main #travelPlanner .collection .collection,
main #travelPlanner .collection .collection .collection-item:last-child
{
	border-bottom: none;
}
main #blog .header
{
	color: rgb(162, 121, 0);
}
main #schedule .header
{
	color: #9c0000;
}
section
{
	padding-top: 65px;
}
section:not(#main)
{
	min-height: 100vh;
	position: relative;
	z-index: 1;
}
#main
{
	/*background: url(../images/sliderpic.jpg) no-repeat left top;
	background-size: cover;*/
	position: relative;
	z-index: 1;
}
#main::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/sliderpic.jpg) no-repeat 0 0;
	background-size: cover;
	filter:sepia(60%);
	z-index: -1;
}
#main .wrap
{
	margin: 0 auto;
	max-width: 800px;
	height: calc(100vh - 174px);
	padding-top: 10vh;
}
#main .wrap img
{
	filter: sepia(100%);
}
#main .func
{
	background-color: rgba(255, 255, 255, 0.8);
	height: 250px;
	width: 250px;
	/* padding: 15px; */
	border: solid 3px;
	border-radius: 50%;
	margin-bottom: 20px;
	transition: all .3s;
	cursor: pointer;
	transform: translateY(60vh) scale(0.1);
	animation-name: buttonShow;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}
@keyframes buttonShow
{
	0%
	{
		transform: translateY(60vh) scale(0.1);
	}
	100%
	{
		transform: translateY(0) scale(1);
	}
}
#main .func .head
{
	font-weight: bold;
	text-align: center;font-size: 24px;
	line-height: 150px;
	border-bottom: solid 1px;
}

#main .func .head>img
{
	vertical-align: middle;
}
#main [func="drivingMap"]
{
	color: #0059B0;
}
#main [func="travelPlanner"]
{
	color: #008C00;
}
#main [func="blog"]
{
	color: #D96F03;
}
#main [func]:hover
{
	border-width: 0;
}
#main [func="drivingMap"]:hover
{
	background-color: rgba(0, 89, 176, 0.3);
}
#main [func="travelPlanner"]:hover
{
	background-color: rgba(0, 140, 0, 0.3);
}
#main [func="blog"]:hover
{
	background-color: rgba(217, 111, 3, 0.3);
}
#main .head,
#main .more
{
	color: #000;
}
#main .func:hover .head,
#main .func:hover .more
{
	color: #fff;
}
#main .more
{
	line-height: 50px;
	padding-left: 45px;
	position: relative;
}
#main .more:before
{
	content: "";
	background-image: url(../images/arrowicon.png);
	height: 18px;
	width: 10px;
	position: absolute;
	top: 17px;
	right: 30px;
}
#drivingMap canvas,
#mapPlanner canvas
{
	border-radius: 10px;
}
#map canvas
{
	border: solid #6babd0 2px;
	background-color: #6babd0;
}
#mapPlanner canvas
{
	border: solid #008c00 2px;
	background-color: #008c00;
}
#map,
#mapPlanner,
#drivingMap .list,
#mapPlanner .list
{
	height: calc(100vh - 175px);
}
#drivingMap .list,
#mapPlanner .list
{
	overflow-y: auto;
	cursor: pointer;
}
#drivingMap
{
	background-color: #d9efff;
}
#drivingMap::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/windlion-banner-1.jpg) no-repeat calc(50% + 59vw) 0;
	background-size: cover;
	filter: blur(3px) contrast(200%) brightness(137%) opacity(0.2);
	z-index: -1;
}
#drivingMap .container
{
	background-color: rgba(2, 1, 148, 0.21);
	border-radius: 20px;
	padding: 5px 0;
}
#drivingMap .stopname {
	text-align: center;
	padding: 6px;
	width: 40%;
	display: inline;
}
#drivingMap .bustype {
	text-align: center;
	padding: 6px;
	padding-top: 1px;
	padding-bottom: 1px;
	position: absolute;
	right: 0;
	bottom: 0;
	border-color: white;
	border-radius: 10px;
	font-size: 1em;
	line-height: 16px;
}
#drivingMap .bustype:after
{
	font-size: 0.8em;
	font-weight: bold;
	padding-left: 5px;
}
#drivingMap .bustype.general,
#drivingMap .bustype.disable,
#drivingMap .bustype.color,
#drivingMap .bustype.middle,
#drivingMap .bustype.low,
#drivingMap .bustype.travel,
#drivingMap .bustype.taxi,
#drivingMap .bustype.eletronic
{
	color: #fff;
	bottom: 0;
}
#drivingMap .bustype.general
{
	background: #777;
}
#drivingMap .bustype.general:after
{
	content: '一般公車';
}
#drivingMap .bustype.en.general:after
{
	content: 'general';
}
#drivingMap .bustype.disable
{
	background: blue;
}
#drivingMap .bustype.disable:after
{
	content: '無障礙';
}
#drivingMap .bustype.en.disable:after
{
	content: 'disable';
}
#drivingMap .bustype.color
{
	background: linear-gradient(to right, red , #ffe000);
}
#drivingMap .bustype.color:after
{
	content: '低地彩繪';
}
#drivingMap .bustype.en.color:after
{
	content: 'color';
}
#drivingMap .bustype.middle
{
	background: deeppink;
}
#drivingMap .bustype.middle:after
{
	content: '中型公車';
}
#drivingMap .bustype.en.middle:after
{
	content: 'middle';
}
#drivingMap .bustype.low
{
	background: red;
}
#drivingMap .bustype.low:after
{
	content: '低地公車';
}
#drivingMap .bustype.en.low:after
{
	content: 'low';
}
#drivingMap .bustype.travel
{
	background: skyblue;
}
#drivingMap .bustype.travel:after
{
	content: '遊覽車';
}
#drivingMap .bustype.en.travel:after
{
	content: 'travel';
}
#drivingMap .bustype.taxi
{
	background: yellow;
	color: red;
}
#drivingMap .bustype.taxi:after
{
	content: '計程車';
}
#drivingMap .bustype.en.taxi:after
{
	content: 'taxi';
}
#drivingMap .bustype.eletronic
{
	background: green;
}
#drivingMap .bustype.eletronic:after
{
	content: '電動公車';
}
#drivingMap .bustype.en.eletronic:after
{
	content: 'eletronic';
}
#drivingMap .esttime
{
	border-style: solid;
	border-color: grey;
	padding: 5px 0;
	border-radius: 10px;
	text-align: center;
	font-weight: 600;
	width: 40%;
	display: inline-block;
}
#drivingMap .fare
{
	position: absolute;
	right: 0;
	top: 0;
	color: #fff;
	z-index: 0;
	padding: 0 3px;
	line-height: 1.3rem;
	font-size: 0.8rem;
}
#drivingMap .fare:before
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 80px 35px 0;
	z-index: -1;
}
#drivingMap .diway
{
	position: absolute;
	right: 0;
	top: 0;
	width: 65px;
	height: 22px;
	line-height: 22px;
	padding: 0;
	background-color: #6babd0;
}
#drivingMap .list.full .fare:before
{
	border-color: transparent #6babd0 transparent transparent;
}
#drivingMap .list.reduced .fare:before
{
	border-color: transparent #2dce2d transparent transparent;
}
#drivingMap .list.priority .fare:before
{
	border-color: transparent #f79aaa transparent transparent;
}
#drivingMap .gotoSchedule
{
	position: absolute;
	left: 35px;
	top: 20px;
	z-index: 1;
	background-color: #6babd0;
	display: none;
}
#drivingMap .mapWrap .previewAll
{
	position: absolute;
	left: calc(50% - 45px);
	top: 20px;
	z-index: 1;
	background-color: #6babd0;
	display: none;
}
#travelPlanner
{
	background-color: #d0ffd8;
}
#travelPlanner::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bird-banner-3.jpg) no-repeat calc(50% + -2vw) 0;
	background-size: cover;
	filter: blur(3px) contrast(100%) brightness(150%) opacity(0.4);
	z-index: -1;
}
#travelPlanner .container
{
	background-color: rgba(0, 140, 0, 0.21);
	border-radius: 20px;
	padding: 5px 0;
}
#blog
{
	background-color: #feffe7;
}
#blog::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bird-banner-2.jpg) no-repeat calc(50% + -2vw) 0;
	background-size: cover;
	filter: blur(3px) contrast(80%) brightness(150%) opacity(0.3);
	z-index: -1;
}
#blog .container
{
	background-color: rgba(255, 188, 0, 0.21);
	border-radius: 20px;
	padding: 20px;
}
#blog .list>.col
{
	margin-bottom: 20px;
	word-break: break-all;
}
#blog .headline
{
	background-color: rgba(244, 177, 47, 0.5);
	font-size: 1.5rem;
	font-weight: bold;
	color: rgb(121, 73, 0);
	padding: 20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	border-bottom: solid 1px;
	position: relative;
}
#blog .headline:after
{
	content: attr(postTime);
	position: absolute;
	bottom: -10px;
	right: 14px;
	font-size: 0.8rem;
	font-weight: initial;
	background-color: rgb(255, 214, 133);
	padding: 0 6px;
	border-radius: 5px;
	border: solid 1px;
}
#blog .content
{
	background-color: rgba(255, 212, 130, 0.5);
	color: rgb(121, 73, 0);
	padding: 20px 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
#schedule
{
	background-color: #ffe7e7;
}
#schedule::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg1.jpg) no-repeat 100% 0;
	background-size: cover;
	filter: blur(3px) contrast(130%) brightness(150%) opacity(0.3);
	z-index: -1;
}
#schedule .container
{
	background-color: #f4433657;
	border-radius: 20px;
}
#schedule .padding-20
{
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 20px;
	font-weight: bold;
	padding-top: 40px;
}
#schedule ul
{
	margin-top: 0;
}
#schedule .frame>.collapsible>li.collection-item
{
	background-color: #fff;
	padding-bottom: 20px;
}
#schedule .frame>.collapsible>li.collection-item:nth-child(2n-1)
{
	background-color: #fff5f5;
}
#schedule .frame>.collapsible>li>.collapsible-header
{
	cursor: inherit;
	text-align: center;
	margin-bottom: 20px;
	border-top: solid 1px #dddddd;
	border-bottom: none;
}
#schedule .frame>.collapsible>li:nth-child(2n-1)>.collapsible-header
{
	background-color: #fff5f5;
}
#schedule .frame>.collapsible>li>.collapsible-body
{
	padding: 0;
}
#schedule .frame>.collapsible>li>.collapsible-body li
{
	margin: 20px;
	border-bottom: none;
	background-color: #f9f9f9;
	border-radius: 20px;
	cursor: pointer;
	padding-top: 15px;
	text-align: center;
}
#schedule .frame>.collapsible>li>.collapsible-body li:hover
{
	background-color: #f6b2b5;
	color: #fff;
}
#schedule .frame>.collapsible>li>.collapsible-body li:hover span
{
	color: #fff;
}
#schedule .frame>.collapsible>li>.collapsible-body li:hover .shortName
{
	border: solid 1px #fff;
}
#schedule .shortName,
#schedule .passBy,
#schedule .destination
{
	width: 25%;
	padding: 0 10px;
	color: #5f5f5f;
	display: inline-block;
	/*white-space: nowrap;*/
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
}
#schedule .shortName
{
	border: solid 1px rgb(216, 216, 216);
	border-radius: 29px;
	height: 24px;
}
#schedule .timetable
{
	display: inline-block;
	width: 20%;
	height: 70px;
	line-height: 35px;
	text-align: center;
	padding: 0 2.5%;
	position: relative;
	cursor: pointer;
}
#schedule .timetable .time,
#schedule .timetable .carType
{
	border: solid 1px grey;
	padding: 4px;
}
#schedule .timetable:hover .time
{
	background-color: pink;
}
#schedule .timetable:hover .carType
{
	color: pink;
}
#schedule .timetable .carType
{
	border-left: none;
	color: #fff;
}
#schedule .timetable .accross
{
	display: block;
	line-height: 15px;
	position: absolute;
	left: calc(50% - 46px);
	font-size: 0.8rem;
	color: grey;
	text-align: left;
}
#schedule .collapsible-header i
{
	display: none;
}
footer.page-footer
{
	/* min-height: 200px; */
	background: url(../images/footerpic.png) no-repeat 85% 10px;
	background-size: auto 177px;
	margin-top: 20px;
	/* background-color: #eaeaea; */
}
footer.page-footer .footer-copyright
{
	background-color: transparent;
	color: grey;
	border-top: solid #8ac249;
	margin-top: 69px;
}
footer .row
{
	padding-top: 58px;
}
footer .title
{
	font-size: 1.64rem;
}
#goTop
{
	position: fixed;
	bottom: -100px;
	right: 50px;
	opacity: 0;
}
#goTop.show
{
	bottom: 100px;
	opacity: .8;
}
.infoPreview,
.infoPreview *
{
	-webkit-transform:  translateZ(0);
}
.imgPreview,
.infoPreview
{
	transition: all 0.5s;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow-y: auto;
	z-index: -1;
	opacity: 0;
}
.infoPreview
{
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
}
.imgPreview.showPreview,
.infoPreview.showPreview
{
	z-index: 1000;
	opacity: 1;
}
.imgPreview>img
{
	position: absolute;
	width: 100%;
	max-width: 862px;
	left: calc(50% - 431px);
	top: 15%;
	border-radius: 20px;
}
.infoPreview>.info
{
	position: absolute;
	width: 90%;
	left: 5%;
	top: 15%;
	background-color: #fff;
	border-radius: 20px;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	color: grey;
}
.infoPreview>.info>ul
{
	border-radius: 20px;
}
.infoPreview>.info>ul>li:nth-child(2n-1)
{
	background-color: #fff5f5;
}
.infoPreview i
{
	position: absolute;
	right: 0;
	top: calc(50% - 12px);
}
.imgPreview .closePreview,
.infoPreview .closePreview
{
	position: absolute;
	right: calc(50% - 464px);
	top: calc(15% - 33px);
	z-index: 1;
	border-radius: 50%;
	color: #fff;
	background-color: orange;
	padding: 12px;
	font-weight: bold;
	font-size: 3rem;
	cursor: pointer;
}
.infoPreview .closePreview
{
	right: calc(5% - 33px);
}
.infoPreview .time,
.infoPreview .carType
{
	display: inline-block;
	width: 50px;
}
.infoPreview .time
{
	border: solid 1px grey;
}
.infoPreview .accross
{
	display: block;
	padding-top: 10px;
}
.infoPreview .carType
{
	color: #fff;
	border: solid 1px grey;	
	border-left: none;	
}
#schedule .timetable .carType.general,
.infoPreview .carType.general
{
	background: #777;
}
#schedule .timetable .carType.disable,
.infoPreview .carType.disable
{
	background: blue;
}
#schedule .timetable .carType.color,
.infoPreview .carType.color
{
	background: linear-gradient(to right, red , #ffe000);
}
#schedule .timetable .carType.middle,
.infoPreview .carType.middle
{
	background: deeppink;
}
#schedule .timetable .carType.low,
.infoPreview .carType.low
{
	background: red;
}
#schedule .timetable .carType.travel,
.infoPreview .carType.travel
{
	background: skyblue;
}
#schedule .timetable .carType.taxi,
.infoPreview .carType.taxi
{
	background: yellow;
	color: red;
}
#schedule .timetable .carType.eletronic,
.infoPreview .carType.eletronic
{
	background: green;
}
@media only screen and (max-width: 1170px)
{
	footer.page-footer
	{
		background: url(../images/footerpic.png) no-repeat 85% 51px;
		background-size: auto 50%;
		background-color: #eaeaea;
	}
}
@media only screen and (max-width: 1200px)
{
	footer.page-footer
	{
		background: url(../images/footerpic.png) no-repeat 85% 54px;
		background-size: auto 57%;
		/* background-color: #eaeaea; */
	}
}
@media only screen and (max-width: 1050px)
{
	body
	{
		border-top: none;
	}
	.topLogo
	{
		position: fixed;
		z-index: 2;
		background-color: rgba(255, 247, 182, 0.9);
		width: 100%;
		top: 0;
		min-height: 50px;
		padding-top: 6px;
		padding-left: 65px;
		padding-right: 80px;
		border-top: solid 3px #EA5406;
		-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	}
	.topLogo img
	{
		height: 45px;
	}
	[data-target="sideNav"].show-on-small
	{
		display: inline-block !important;
		top: 0;
	}
	nav
	{
		display: none;
	}
	.marquee
	{
		top: 60px;
		background-color: rgb(253,245,184,0.74);
	}
}
@media only screen and (max-width: 862px)
{
	nav.fixed ul
	{
		margin-left: calc(50% - 300px);
	}

	nav ul a
	{
		padding: 0 5px;
	}
	.imgPreview>img
	{
		left: 0;
	}
	.imgPreview .closePreview
	{
		right: 4px;
	}
}
@media only screen and (max-width: 820px)
{
	#main .func
	{
		height: 200px;
		width: 200px;
		margin: 15px auto;
	}
	#main .func .head
	{
		line-height: 115px;
		font-size: 20px;
		letter-spacing: -1px;
	}
	.infoPreview .closePreview
	{
		right: 5%;
	}
	#schedule .timetable
	{
		display: none;
	}
	#schedule .collapsible-header i
	{
		margin-right: 0;
		display: block;
	}
	#schedule .frame>.collapsible>li>.collapsible-header
	{
		margin-bottom: 0;
	}
	#schedule .frame>.collapsible>li.collection-item
	{
		padding-bottom: 0;
	}
	#schedule .frame>.collapsible>li>.collapsible-header:hover
	{
		background-color: #f6b2b5;
		cursor: pointer;
	}
	#schedule .frame>.collapsible>li>.collapsible-header:hover>span,
	#schedule .frame>.collapsible>li>.collapsible-header:hover>i
	{
		color: #fff;
	}
	#schedule .frame>.collapsible>li>.collapsible-header:hover>.shortName
	{
		border: solid 1px #fff;
	}
	#schedule .gotoDrivingMap
	{
		display: none;
	}
	#schedule .shortName,
	#schedule .passBy,
	#schedule .destination
	{
		width: 33.333%;
	}
}
@media only screen and (max-width: 600px)
{
	#goTop
	{
		right: 10px;
	}
	#goTop.show
	{
		bottom: 10px;
	}
	#main
	{
		background-color: #e1dace;
		padding-top: 80px;
	}
	#main .wrap
	{
		height: 700px;
		padding-top: 0;
	}
	.padding-20
	{
		padding: 0;
	}
	#drivingMap .mapWrap
	{
		position: absolute;
		left: -100%;
		transition: all 0.5s;
	}
	#drivingMap .mapWrap .closeMap
	{
		position: absolute;
		right: 4px;
		top: -8px;
		z-index: 1;
		border-radius: 50%;
		color: #fff;
		padding: 12px;
		font-weight: bold;
		font-size: 3rem;
		cursor: pointer;
	}
	#drivingMap .mapWrap .closeMap
	{
		background-color: #6babd0;
	}
	#travelPlanner
	{
		padding-top: 0;
	}
	#drivingMap .mapWrap .previewAll
	{
		position: absolute;
		left: calc(50% - 45px);
		top: 20px;
		z-index: 1;
	}
	#travelPlanner .mapWrap .previewList
	{
		position: absolute;
		left: calc(50% - 45px);
		bottom: 0;
		z-index: 1;
		background-color: #008c00;
		display: none;
		opacity: 0.7;
	}
	#travelPlanner .hideList
	{
		position: absolute;
		left: calc(50% - 45px);
		top: -34px;
		z-index: 1;
		background-color: #008c00;
		display: none;
		opacity: 0.7;
	}
	#drivingMap .mapWrap
	{
		top: 190px;
	}
	#drivingMap .mapWrap.showMap
	{
		left: 0;
	}
	#drivingMap .mapWrap .map
	{
		height: calc(100vh - 190px);
	}
	#travelPlanner .listWrap
	{
		position: absolute;
		z-index: 2;
		width: 90%;
		bottom: -100%;
		left: 5%;
		transition: all 0.5s;
	}
	#travelPlanner .listWrap.showList
	{
		bottom: 25px;
	}
	#travelPlanner .map
	{
		height: calc(100vh - 165px);
		width: calc(100% - 20px);
		left: 10px;
	}
	#travelPlanner .container
	{
		padding: 0;
		width: 95%;
		background-color: transparent;
	}
	#travelPlanner .row .col
	{
		padding: 0;
	}
	#schedule .frame>.collapsible>li>.collapsible-body li
	{
		text-align: left;
	}
	#schedule .shortName,
	#schedule .passBy,
	#schedule .destination
	{
		display: initial;
	}
}
@media only screen and (max-width: 400px)
{
	.topLogo
	{
		padding-left: 0;
		padding-right: 0;
	}
	main .header
	{
		font-size: 1.5rem;
		padding-top: 20px;
		margin-bottom: 20px;
	}
	.map.mobile:after
	{
		font-size: 1.4em;
		line-height: 200px;
	}
	#blog .container
	{
		padding: 20px 0;
	}
	footer.page-footer
	{
		background: url(../images/footerpic.png) no-repeat 85% 94px;
		background-size: auto 36%;
		/*background-color: #eaeaea;*/
	}
	footer .title
	{
		font-size: 1.24rem;
	}
}