@charset "utf-8";

/* ----- stationList ----- */
.stationList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationList h3 {
	font-family: "微軟正黑體","Microsoft JhengHei";
	color:#000;
	font-size:2.9em;
	line-height:135%;
	font-weight:bold;
	margin:30px auto 25px auto;
}
.stationList h3 span {
	position:relative;
	padding-left:40px;
}
.stationList h3 span.lineRed { color:#e30964; }
.stationList h3 span.lineOrange { color:#ff9500; }
.stationList h3 span.lineLRT { color:#8fc31f; }
.stationList h3 span:before {
	content:"";
	display:block;
	position:absolute;
	top:3px;
	left:0;
	width:35px;
	height:35px;
	background: url(../images/stationLines-icon.png) no-repeat 0 0;
}
.stationList h3 span.lineRed:before { background-position:0 0; }
.stationList h3 span.lineOrange:before { background-position:-35px 0; }
.stationList h3 span.lineLRT:before { background-position:-70px 0; }
.stationList ul {
	list-style:none;
	margin:-15px -10px;
}
.stationList ul li {
	display:inline-block;
	width:calc(100% / 3);
	padding:15px 10px;
	box-sizing:border-box;
	vertical-align:top;
}
.stationList .photo {
	position:relative;
	width:100%;
	padding-bottom:67%;
	overflow:hidden;
	background:#000;
}
.stationList .photo .stationNO {
	position:absolute;
	left:10px;
	top:10px;
	z-index:1;
}
.stationList .photo .stationNO em {
	float:left;
	width:40px;
	height:40px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	line-height:40px;
	text-align:center;
	font-style:normal;
    -webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
.stationList .photo .stationNO em.lineRed { background:#e30964; }
.stationList .photo .stationNO em.lineOrange { background:#ff9500; }
.stationList .photo .stationNO em.lineLRT { background:#8fc31f; }
.stationList .photo .stationNO em:nth-child(2) {
	margin-left:5px;
}
.stationList .photo .img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.stationList a:hover .photo .img,
.stationList a:focus .photo .img {
	filter:alpha(opacity=50);
	opacity:0.5;
}
.stationList p {
	font-family: "微軟正黑體","Microsoft JhengHei";
	color:#000;
	font-size:1.9em;
	line-height:135%;
	font-weight:bold;
	text-align:center;
	margin-top:10px;	
}
.stationList a {
	display:block;
}
.stationList a:hover p,
.stationList a:focus p {
	color:#A40000;
}
@media screen and (max-width:640px) {
	.stationList ul li {
		width:50%;
	}
}
@media screen and (max-width:360px) {
	.stationList ul li {
		width:100%;
	}
}
@media screen and (min-width:991px) {
	.stationList ul {
		margin:-15px -10px;
	}
	.stationList ul li {
		width:25%;
		padding:15px 10px;
	}
}


/* ----- stationInfo ----- */
.stationInfo {
	position:relative;
	width:100%;
	margin:30px auto 0 auto;
}
.stationInfo .photo {
	position:relative;
	width:390px;
	height:260px;
	margin:0 auto;
}
.stationInfo .photo .img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.stationInfo .tit {
	width:100%;
	margin:20px auto 0 auto;
}
.stationInfo .tit .stationNO {
	float:left;
	margin-right:10px;
}
.stationInfo .tit .stationNO em {
	float:left;
	width:45px;
	height:45px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	line-height:45px;
	text-align:center;
	font-style:normal;
	font-weight:bold;
    -webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
.stationInfo .tit .stationNO em.lineRed { background:#e30964; }
.stationInfo .tit .stationNO em.lineOrange { background:#ff9500; }
.stationInfo .tit .stationNO em.lineLRT { background:#8fc31f; }
.stationInfo .tit .stationNO em:nth-child(2) {
	margin-left:5px;
}
.stationInfo .tit h2 {
	font-family: "微軟正黑體","Microsoft JhengHei";
	color:#000;
	font-size:3.9em;
	font-weight:bold;
	line-height:110%;
}
.stationInfo .tit p {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:2.1em;
	line-height:125%;
	font-weight:bold;
	margin-top:10px;
}
.stationInfo .tit p span{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding:2px 10px;
	background:#000;
}
.stationInfo .infoList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationInfo .infoList ul {
	list-style:none;
	margin:-10px 0;
}
.stationInfo .infoList ul li {
	position:relative;
	display:block;
	width:100%;
	font-size:1.7em;
	line-height:135%;
	padding:10px 0 10px 85px;
	box-sizing:border-box;
	border-bottom:1px dashed #CCC;
}
.stationInfo .infoList ul li span {
	position:absolute;
	top:10px;
	left:0;
	font-weight:bold;
}
.stationInfo .otherList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationInfo .otherList p {
	font-size:1.7em;
	line-height:135%;
	font-weight:bold;
}
.stationInfo .otherList p em.time {
	float:right;
	font-size:0.9rem;
	font-style:normal;
}
.stationInfo .otherList .downloadBtn {
	display:inline-block;
	color:#FFF;
	font-size:0.9rem;
	padding:2px 12px;
	background:#cc0000;
	vertical-align:middle;
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
			border-radius:5px;
}
.stationInfo .otherList .downloadBtn:hover,
.stationInfo .otherList .downloadBtn:focus {
	background:#a40035;
}
.stationInfo .otherList .downloadBtn span {
	position:relative;
	text-transform:uppercase;
	padding-right:20px;
}
.stationInfo .otherList .downloadBtn span:before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:0;
	width:16px;
	height:16px;
	margin:-8px 0 0 0;
	background: url(../images/icon-download.svg) no-repeat 50% 50%;
	background-size:cover;
}
.stationInfo .otherList .trainTime {
	display:inline-block;
	width:100%;
	margin:5px auto 12px auto;
}
.stationInfo .otherList .trainTime dl {
	float:left;
	width:calc(50% - 1px);
	margin-bottom:2px;
}
.stationInfo .otherList .trainTime dl:nth-child(2n) {
	float:right;
}
.stationInfo .otherList .trainTime dt {
	color:#FFF;
	font-size:1.5em;
	line-height:135%;
	font-weight:bold;
	text-align:center;
	padding:5px 0;
	background:#000;	
}
.stationInfo .otherList .trainTime dd {
	color:#000;
	font-size:1.5em;
	line-height:135%;
	font-weight:bold;
	text-align:center;
	padding:10px 15px;
	background:#F2F2F2;	
}
.stationInfo .otherList .trainTime dl.lineRed dt { background:#cc0055; }
.stationInfo .otherList .trainTime dl.lineRed dd { background:#f7f0f3; }
.stationInfo .otherList .trainTime dl.lineOrange dt { background:#eb7500; }
.stationInfo .otherList .trainTime dl.lineOrange dd { background:#f7f1eb; }
.stationInfo .otherList .trainTime dl.lineLRT dt { background: #8fc31f; }
.stationInfo .otherList .trainTime dl.lineLRT dd { background: #f7f1eb; }
.stationInfo .otherList .trainTime dd ul {
	list-style:none;
	margin:0 -15px;
}
.stationInfo .otherList .trainTime dd li {
	display:inline-block;
	width:50%;
	text-align:right;
	padding:0 15px;
	box-sizing:border-box;
}
.stationInfo .otherList .trainTime dl dd li:first-child {
	border-right:1px dotted #CCC;
}
.stationInfo .otherList .trainTime dd li span {
	float:left;
}
@media screen and (max-width:640px) {
	.stationInfo .otherList .trainTime dd {
		padding:5px 15px;
	}
	.stationInfo .otherList .trainTime dd ul {
		margin:-5px;
	}
	.stationInfo .otherList .trainTime dd li {
		width:100%;
		padding:5px;
	}
	.stationInfo .otherList .trainTime dl dd li:first-child {
		border-right:0;
		border-bottom:1px dotted #CCC;
	}
}
@media screen and (max-width:420px) {
	.stationInfo .photo {
		width:100%;
		height:0;
		padding-bottom:66.66%;
	}
}
@media screen and (min-width:768px) {
	.stationInfo .photo {
		float:left;
		width:40%;
		height:0;
		padding-bottom:26%;
	}
	.stationInfo .tit {
		float:right;
		width:58%;
		margin:0;
	}
	.stationInfo .infoList {
		float:right;
		width:58%;
	}
	.stationInfo .infoList.LRT {
		float:left;
		width:100%;
	}
	.stationInfo .otherList {
		display:inline-block;
	}
	.stationInfo .infoList ul li:last-child {
		border-bottom:none;
	}
}
@media screen and (min-width:991px) {
	.stationInfo .tit .stationNO {
		padding-right:10px;
		margin-right:0;
		background:#FFF;
	}
	.stationInfo .tit .stationNO em {
		width:90px;
		height:90px;
		font-size:2.5em;
		line-height:90px;
	}
	.stationInfo .tit .stationNO em:nth-child(2) {
		margin-left:10px;
	}
}
@media screen and (min-width:1200px) {
	.stationInfo {
		position:relative;
		padding-left:420px;
		box-sizing:border-box;
	}
	.stationInfo .photo {
		position:absolute;
		left:0;
		top:0;
		width:400px;
		height:267px;
		padding-bottom:0;
	}
	.stationInfo .tit {
		width:100%;
		margin-left:20;
	}
	.stationInfo .infoList {
		float:left;
		width:360px;
	}
	.stationInfo .otherList {
		float:right;
		width:310px;
	}
	.stationInfo .otherList .trainTime dd {
		padding:5px 15px;
	}
	.stationInfo .otherList .trainTime dd ul {
		margin:-5px;
	}
	.stationInfo .otherList .trainTime dd li {
		width:100%;
		padding:5px;
	}
	.stationInfo .otherList .trainTime dl dd li:first-child {
		border-right:none;
		border-bottom:1px dotted #CCC;
	}
}


/* ----- stationEvent ----- */
.stationEvent {
	position:relative;
	width:100%;
	border:1px solid #59493f;
	box-sizing:border-box;
	margin:40px auto 0 auto;
}
.stationEvent.ste2 {
	border:1px solid #CCC;
}
.stationEvent .eventList {
	display:table;
	width:100%;
	margin:0 auto;
	background:#59493f;
}
.stationEvent .eventList ul {
	display:table-row;
	list-style:none;
}
.stationEvent .eventList ul li {
	position:relative;
	display:table-cell;
	width:100%;	
	vertical-align:middle;
	text-align:center;
}
.stationEvent .eventList ul.total2 li {	width:50%; }
.stationEvent .eventList ul.total3 li {	width:33.3333%; }
.stationEvent .eventList ul.total4 li {	width:25%; }
.stationEvent .eventList ul.total5 li {	width:20%; }
.stationEvent .eventList ul.total6 li {	width:16.6666%; }
.stationEvent .eventList ul li a {
	display: flex;
    width: 100%;
    height: 100%;
	min-height:60px;
	color:#FFF;
	font-size:1.7em;
	line-height:110%;
	text-align:center;
	padding:10px 5%;
	box-sizing:border-box;
	flex-wrap:wrap;
}
.stationEvent .eventList ul li a span {
	display: flex;
	width:100%;
	text-align:center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.stationEvent .eventList ul li a:hover,
.stationEvent .eventList ul li a:focus {
	background:rgba(0,0,0,.5);
}
.stationEvent .eventList ul li:before {
	content:"";
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:1px;
	height:100%;
	background:#FFF;
}
.stationEvent .eventList ul li:last-child:before {
	display:none;
}
.stationEvent .eventList ul li.on a {	
	color:#59493f;
	font-weight:bold;
	cursor:text;
	background:#FFF;
}
@media screen and (max-width:420px) {
	.stationEvent .eventList ul li a {
		font-size:1.5em;
		padding:5px 5%;
	}
}
@media screen and (min-width:991px) {
	.stationEvent .eventList ul li a {
		font-family:"微軟正黑體", "Microsoft JhengHei";
		font-size:1.9em;
		padding:25px 0;
	}
}


.stationEvent .eventBox {
	width:100%;
	padding:34px;
	box-sizing:border-box;
	margin:0 auto;
}
.stationEvent .boxTit {
	width:100%;
	margin:0 auto;
}
.stationEvent .boxTit:nth-child(n+2) {
	margin-top:40px;
}
.stationEvent .boxTit span{
	position:relative;
	display:inline-block;
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#000;
	font-size:2.5em;
	line-height:110%;
	font-weight:bold;
	padding-left:40px;
}
.stationEvent .boxTit span:before {
	content:"";
	display:block;
	position:absolute;
	top:-2px;
	left:0;
	width:33px;
	height:33px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
    -webkit-border-radius:100%;
       -moz-border-radius:100%;
            border-radius:100%;
}
.stationEvent .boxTit.bt1 span:before { background-image:url(../images/boxTit-icon1.png); }
.stationEvent .boxTit.bt2 span:before { background-image:url(../images/boxTit-icon2.png); }
.stationEvent .boxTit.bt3 span:before { background-image:url(../images/boxTit-icon3.png); }
.stationEvent .boxTit.bt4 span:before { background-image:url(../images/boxTit-icon4.png); }
.stationEvent .boxTit.bt5 span:before { background-image:url(../images/boxTit-icon5.png); }
.stationEvent .boxTit.bt6 span:before { background-image:url(../images/boxTit-icon6.png); }
@media screen and (max-width:560px) {
	.stationEvent .eventBox {
		padding:24px;
	}
}
@media screen and (min-width:1200px) {
	.stationEvent .eventBox {
		padding:59px;
	}
	.stationEvent .boxTit:nth-child(n+2) {
		margin-top:50px;
	}
}


.stationEvent .eventTit {
	width:100%;
	padding:20px;
	box-sizing:border-box;
	margin:0 auto;
	background:#000;
}
.stationEvent .eventTit .stationNO {
	float:left;
	margin-right:10px;
}
.stationEvent .eventTit .stationNO em {
	float:left;
	width:45px;
	height:45px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	line-height:45px;
	text-align:center;
	font-style:normal;
	font-weight:bold;
    -webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
.stationEvent .eventTit .stationNO em.lineRed { background:#e30964; }
.stationEvent .eventTit .stationNO em.lineOrange { background:#ff9500; }
.stationEvent .eventTit .stationNO em.lineLRT { background:#8fc31f; }
.stationEvent .eventTit .stationNO em:nth-child(2) {
	margin-left:5px;
}
.stationEvent .eventTit h3 {
	font-family: "微軟正黑體","Microsoft JhengHei";
	color:#FFF;
	font-size:3.5em;
	font-weight:bold;
	line-height:125%;
}
.stationEvent .eventTit p {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:1.9em;
	line-height:125%;
	font-weight:bold;
	margin-top:5px;
}
@media screen and (max-width:420px) {
	.stationEvent .eventTit {
		padding:15px;
	}
	.stationEvent .eventTit p {
		margin-top:5px;
	}
}
@media screen and (min-width:768px) {
	.stationEvent .eventTit .stationNO {
		padding-right:10px;
		margin-right:0;
	}
	.stationEvent .eventTit .stationNO em {
		width:65px;
		height:65px;
		font-size:2.1em;
		line-height:65px;
	}
	.stationEvent .eventTit .stationNO em:nth-child(2) {
		margin-left:10px;
	}
	.stationEvent .eventTit h3 {
		line-height:110%;
	}
}


.stationEvent .exitList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationEvent .exitList ul {
	list-style:none;
	border-top:2px solid #000;
}
.stationEvent .exitList ul li {
	display:block;
	width:100%;
	border-bottom:1px dashed #000;
}
.stationEvent .exitList dl {
	margin:15px 0;
}
.stationEvent .exitList dt {
	display:inline-block;
	vertical-align:middle;
	margin:5px 10px;
}
.stationEvent .exitList dt .exitNO {
	border:3px solid #eb6100;
	background:#eb6100;
}
.stationEvent .exitList dt .exitNO span {
	display:inline-block;
	color:#FFF;
	font-size:1.5em;
	line-height:45px;
	font-weight:bold;
	padding:0 5px;
	vertical-align:middle;
}
.stationEvent .exitList dt .exitNO em {
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	color:#eb6100;
	font-size:4.5em;
	line-height:45px;
	font-weight:bold;
	font-style:normal;
	padding:0 5px;
	background:#FFF;
	vertical-align:middle;
}
.stationEvent .exitList dd {
	display:inline-block;	
	color:#000;
	font-size:1.9em;
	line-height:135%;
	font-weight:bold;
	margin:5px 10px;
	vertical-align:middle;
}
.stationEvent .exitList dd.wd {
	min-width:200px;
}
.stationEvent .exitList dd.icon {
	margin:0 5px;
}
.stationEvent .exitList dd.icon img {
	margin:5px;
}


.stationEvent .infoWord {
	width:100%;
	color:#000;
	font-size:1.7em;
	line-height:165%;
	text-align:justify;
	margin:20px auto 0 auto;
}
.stationEvent .infoWord p {
	margin:10px 0;
}
.stationEvent .infoWord img {
	height:auto;
	max-width:100%;
	margin:0 auto;
}
.stationEvent .infoWord > ol,
.stationEvent .infoWord > ul {
	margin:10px 0;
	margin-left:1.5em;
}
.stationEvent .infoWord > ol > li,
.stationEvent .infoWord > ul > li {
	margin:0;
}
.stationEvent .infoWord li ol,
.stationEvent .infoWord li ul {
	margin:10px 0;
	margin-left:2em;
}
.stationEvent .infoWord li ol li,
.stationEvent .infoWord li ul li {
	margin:0;
}

.stationEvent .trainTimeList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationEvent .trainTimeList > ul {
	margin:-10px;
}
.stationEvent .trainTimeList > ul > li {
	display:inline-block;
	width:50%;
	padding:10px;
	box-sizing:border-box;
	vertical-align:top;
}
.stationEvent .trainTimeList dl {
	width:100%;
	margin:0 auto;
}
.stationEvent .trainTimeList dl dt {
	color:#FFF;
	font-size:1.9em;
	line-height:135%;
	font-weight:bold;
	text-align:center;
	padding:15px 0;
	background:#000;	
}
.stationEvent .trainTimeList dl dd {
	color:#000;
	font-size:1.9em;
	line-height:135%;
	font-weight:bold;
	padding:25px;
	background:#F2F2F2;	
}
.stationEvent .trainTimeList dl.lineRed dt { background:#cc0055; }
.stationEvent .trainTimeList dl.lineRed dd { background:#f7f0f3; }
.stationEvent .trainTimeList dl.lineOrange dt { background:#eb7500; }
.stationEvent .trainTimeList dl.lineOrange dd { background:#f7f1eb; }
.stationEvent .trainTimeList dl.lineLRT dt { background:#8fc31f; }
.stationEvent .trainTimeList dl.lineLRT dd { background:#f0f8eb; }
.stationEvent .trainTimeList dd > ul {
	list-style:none;
	margin:-15px 0;
}
.stationEvent .trainTimeList dd > ul > li {
	color:#990000;
	padding:15px 0;
	border-bottom:1px dashed #000;
}
.stationEvent .trainTimeList dd > ul > li:last-child {
	border-bottom:none;
}
.stationEvent .trainTimeList dd > ul > li span {
	display:inline-block;
	min-width:120px;
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#000;	
}
@media screen and (max-width:560px) {
	.stationEvent .trainTimeList > ul > li {
		width:100%;
	}
}


.stationEvent .storeList {
	width:100%;
	margin:20px auto 0 auto;
}
.stationEvent .storeList ul {
	list-style:none;
	margin:-15px -10px;
}
.stationEvent .storeList ul li {
	display:inline-block;
	width:calc(100% / 3);
	padding:15px 10px;
	box-sizing:border-box;
	vertical-align:top;
}
.stationEvent .storeList .photo {
	position:relative;
	width:100%;
	padding-bottom:calc(100% - 2px);
	overflow:hidden;
	background:#FFF;
	box-sizing:border-box;
	border:1px solid #CCC;
}
.stationEvent .storeList .photo .img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.stationEvent .storeList p {
	font-family: "微軟正黑體","Microsoft JhengHei";
	color:#000;
	font-size:1.9em;
	line-height:135%;
	font-weight:bold;
	text-align:center;
	margin-top:10px;	
}
@media screen and (max-width:460px) {
	.stationEvent .storeList ul li {
		width:50%;
	}
}
@media screen and (max-width:320px) {
	.stationEvent .storeList ul li {
		width:100%;
	}
}
@media screen and (min-width:991px) {
	.stationEvent .storeList ul li {
		width:25%;
	}
}
@media screen and (min-width:1200px) {
	.stationEvent .storeList ul li {
		width:20%;
	}
}


/* ----- stationSearch ----- */
.stationSearch {
	width:100%;
	text-align:center;
	padding:25px;
	box-sizing:border-box;
	margin:20px auto;
	background:#f1ece4;
}
.stationSearch .sbox {
	display:inline-block;
	width:100%;
	margin:0 0 15px 0;
	vertical-align:top;
}
.stationSearch label {
	display:inline-block;
	width:100px;
	color:#FFF;
	font-size:1.7em;
	line-height:50px;
	font-weight:bold;
	background:#59493f;
	vertical-align:top;
}
.stationSearch .listBar {
	display:inline-block;
	width:calc(100% - 100px);
	height:50px;
	padding:0px;	
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:1.7em;
	color: #000;
	font-weight:bold;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow:"";
	border:none;
	padding:0 0 0 15px;
	background:#FFF url(../images/select-bg.png) no-repeat right;
	-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
	   -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
	    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
	        appearance: none;
	vertical-align:top;
}
.stationSearch .listBar:focus {
	color:#FF6A00;
	border:none;
	background:#FFF url(../images/select-bg-on.png) no-repeat right;
}
.stationSearch .listBar option {
	color: #333;
	border: none;
	background:#FFF; /* style the dropdown bg color */
}
.stationSearch .listBar:-ms-expand {
	display: none; /* hide default arrow in IE10 */
}
.stationSearch .search-btn {
	display:inline-block;
	width:100%;
	height:50px;
	text-align:center;
	padding:0;
	margin:0;
	border:none;
	cursor:pointer;
	background:#a6937c;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.stationSearch .search-btn span {
	font-family:"微軟正黑體", Microsoft JhengHei;
	color:#FFF;
	font-size:1.2rem;
	font-weight:bold;
}
.stationSearch .search-btn span em {
	position:relative;
	display:inline-block;
	width:20px;
	height:20px;
	margin:4px 5px 0 0;
	vertical-align:top;
	-webkit-backface-visibility:hidden;
			backface-visibility:hidden;
}
.stationSearch .search-btn span em::before {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	height:16px;
	width:16px;
	border:3px solid #FFF;
	box-sizing:border-box;
    -webkit-border-radius:100px;
       -moz-border-radius:100px;
            border-radius:100px;
}
.stationSearch .search-btn span em::after {
	position:absolute;
	display:block;
	content:'';
	left:10px;
	top:13px;
	width:10px;
	height:3px;	
	background:#FFF;
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
}
.stationSearch .search-btn:hover,
.stationSearch .search-btn:focus {
	background:#E15315;
}
@media screen and (max-width: 360px) {
	.stationSearch {
		padding:15px;
	}
	.stationSearch label {
		width:80px;
	}
	.stationSearch .listBar {
		width:calc(100% - 80px);
		padding:0 0 0 10px;
	}
}
@media screen and (min-width: 768px) {
	.stationSearch {
		padding:35px 0;
	}
	.stationSearch .sbox {
		width:auto;
		margin:0 10px 0 0;
	}
	.stationSearch .listBar {
		width:200px;
	}
	.stationSearch .search-btn {
		width:50px;
	}
	.stationSearch .search-btn span {
		float:left;
		width:100%;
		height:100%;
		font-size:0;
		padding-left:0;
	}
	.stationSearch .search-btn span em {
		margin:15px 0 0 0;
	}
}
@media screen and (min-width: 991px) {
	.stationSearch .listBar.lib2 {
		width:300px;
	}
}


/* ----- timeTableBox ----- */
.timeTableBox {
	position:relative;
	width:100%;
	margin:20px auto 0 auto;
}

.timeTableBox ul.jQtab {
	display: flex;
}

	.timeTableBox dl, .timeTableBox ul.jQtab {
		position: relative;
		width: 100%;
		height: auto;
	}
		.timeTableBox dl dt, .timeTableBox ul.jQtab li {
			float: left;
			width: 100%;
			background: #d8c7be;
		}
			.timeTableBox dl dt a, .timeTableBox ul.jQtab li a {
				display: block;
				color: #800000;
				font-size: 1.9em;
				font-weight: bold;
				text-align: center;
				padding: 17px 0 21px 0;
			}
				.timeTableBox dl dt a em, .timeTableBox ul.jQtab li a em {
					font-style: normal;
				}
.timeTableBox dl dt a:hover,
.timeTableBox dl dt a:focus {
	background:rgba(127,45,0,.2);
}
.timeTableBox dl dt.saTab,
.timeTableBox dl dt.saTabOn {
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	z-index:10;
}
.timeTableBox dl.dtm2 dt.saTab,
.timeTableBox dl.dtm2 dt.saTabOn {
	position:absolute;
	top:0;
	width:50%;
	text-align:center;
	z-index:10;
}
.timeTableBox dl.dtm2 dt.tab01.saTab,
.timeTableBox dl.dtm2 dt.tab01.saTabOn {left:0;}
.timeTableBox dl.dtm2 dt.tab02.saTab,
.timeTableBox dl.dtm2 dt.tab02.saTabOn {left:50%;}
.timeTableBox dl dt.saTab a {
	float:left;
	width:100%;
}
	.timeTableBox dl dt.saTabOn a, .timeTableBox ul li.ui-state-active a {
		position: relative;
		float: left;
		width: 100%;
		color: #FFF;
		width: 100%;
		background: #7f2d00;
		cursor: text;
	}
		.timeTableBox dl dt.saTabOn a:before, .timeTableBox ul li.ui-state-active a:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 10px 10px 10px;
			border-color: transparent transparent #eeeeee transparent;
			margin-left: -11px;
		}
.timeTableBox dl dd {
	position:relative;	
	float:left;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	background:#eeeeee;
}
.timeTableBox dl dd.mTop {	
	margin-top:55px;
}
.timeTableBox table {
	width: 100%;
	border:none;
	border-collapse: collapse;
}
.timeTableBox table tr {
	border-bottom:1px dashed #b2b2b2;
}
.timeTableBox table tr:last-child {
	border-bottom:none;
}
.timeTableBox table th {
	width:70px;
	color:#7f2d00;
	font-size:1.9em;
	font-weight:bold;
	padding:10px 0;
	text-align:center;
	vertical-align:middle;
	border:none;
}
.timeTableBox table td {
	color:#000;
	font-size:1.9em;
	font-weight:bold;
	padding:10px 0;
	vertical-align:middle;
	border:none;
}
.timeTableBox table ul {
	list-style:none;
	margin-left:10px;
}
.timeTableBox table ul li {
	display:inline-block;
	margin:5px 10px;
	vertical-align:top;
}
.timeTableBox table ul li .noUplink {
	color:#F00;
	font-weight:bold;
}
.timeTableBox table ul li .noDownlink {
	font-weight:bold;
	background:#FF0;
}
@media screen and (max-width: 420px) {
	.timeTableBox dl dt a {
		font-size:1.7em;
		padding:12px 0 18px 0;
	}
	.timeTableBox dl.dtm2 dt a em {
		display:block;
		margin-top:5px;
	}
	.timeTableBox dl dd.mTop {
		margin-top:65px;
	}
}
@media screen and (min-width: 991px) {
	.timeTableBox table th {
		width:90px;
	}
}
@media screen and (min-width: 1200px) {
	.timeTableBox dl dd {
		padding:20px 40px;
	}
}


/* ----- trafficList ----- */
.trafficList {
	display:table;
	width:100%;
	margin:0 auto;
}
.trafficList ul {
	list-style:none;
	margin:0 -1px;
}
.trafficList ul li {
	position:relative;
	display:inline-block;
	width:100%;
	vertical-align:middle;
	padding:0 1px;
	box-sizing:border-box;
	text-align:center;
}
.trafficList ul.total2 li {	width:50%; }
.trafficList ul.total3 li {	width:33.3333%; }
.trafficList ul.total4 li {	width:25%; }
.trafficList ul li a {
	float:left;
    width: 100%;
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#000;
	font-size:1.7em;
	line-height:110%;
	font-weight:bold;
	text-align:center;
	padding:0 0 10px 0;
	border-bottom:5px solid #000;
	box-sizing:border-box;
}
.trafficList ul li a span {
	width:100%;
	text-align:center;
}
.trafficList ul li a span em {
	display:inline-block;
	width:40px;
	height:40px;
	vertical-align:middle;
	background-repeat:no-repeat;
	background-image:url(../images/traffic-icon.png);
}
.trafficList ul li a span em.tc1 { background-position:0 0; }
.trafficList ul li a span em.tc2 { background-position:-40px 0; }
.trafficList ul li a span em.tc3 { background-position:-80px 0; }
.trafficList ul li a span em.tc4 { background-position:-120px 0; }
.trafficList ul li.on a {	
	color:#d94800;
	border-color:#d94800;
	cursor:text;
}
.trafficList ul li.on a span em {
	background-image:url(../images/traffic-icon-on.png);
}
@media screen and (max-width:640px) {
	.trafficList ul li a span {
		display:block;
		padding-top:40px;
	}
	.trafficList ul li a span em {
		position:absolute;
		top:0;
		left:50%;
		margin-left:-20px;
	}
}
@media screen and (max-width:420px) {
	.trafficList ul li a {
		font-size:1.5em;
	}
	.trafficList ul.total3 li a span,
	.trafficList ul.total4 li a span {
		width:55px;
		margin:0 auto;
	}
}
@media screen and (min-width:991px) {
	.trafficList ul li a {
		font-size:1.9em;
	}
}


/* ----- busSearch ----- */
.busSearch {
	width:100%;
	text-align:center;
	box-sizing:border-box;
	margin:30px auto;
}
.busSearch .box {
	float:left;
	width:100%;
	margin:0 0 15px 0;
	vertical-align:top;
	border:1px solid #000;
	box-sizing:border-box;
	overflow:hidden;
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
            border-radius:5px;
}
.busSearch label {
	display:inline-block;
	width:100px;
	color:#FFF;
	font-size:1.9em;
	line-height:50px;
	font-weight:bold;
	background:#333333;
	vertical-align:top;
}
.busSearch .listBar {
	display:inline-block;
	width:calc(100% - 100px);
	height:50px;
	padding:0px;	
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:1.9em;
	color: #000;
	font-weight:bold;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow:"";
	border:none;
	padding:0 0 0 15px;
	background:#FFF url(../images/select-bg.png) no-repeat right;
	-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
	   -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
	    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
	        appearance: none;
	vertical-align:top;
}
.busSearch .listBar:focus {
	color:#FF6A00;
	border:none;
	background:#FFF url(../images/select-bg-on.png) no-repeat right;
}
.busSearch .listBar option {
	color: #333;
	border: none;
	background:#FFF; /* style the dropdown bg color */
}
.busSearch .listBar:-ms-expand {
	display: none; /* hide default arrow in IE10 */
}
.busSearch .search-btn {
	display:inline-block;
	width:100%;
	height:50px;
	text-align:center;
	padding:0;
	margin:0;
	border:none;
	cursor:pointer;
	background:#000;
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
            border-radius:5px;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.busSearch .search-btn span {
	font-family:"微軟正黑體", Microsoft JhengHei;
	color:#FFF;
	font-size:1.2rem;
	font-weight:bold;
}
.busSearch .search-btn span em {
	position:relative;
	display:inline-block;
	width:20px;
	height:20px;
	margin:4px 5px 0 0;
	vertical-align:top;
	-webkit-backface-visibility:hidden;
			backface-visibility:hidden;
}
.busSearch .search-btn span em::before {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	height:16px;
	width:16px;
	border:3px solid #FFF;
	box-sizing:border-box;
    -webkit-border-radius:100px;
       -moz-border-radius:100px;
            border-radius:100px;
}
.busSearch .search-btn span em::after {
	position:absolute;
	display:block;
	content:'';
	left:10px;
	top:13px;
	width:10px;
	height:3px;	
	background:#FFF;
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
}
.busSearch .search-btn:hover,
.busSearch .search-btn:focus {
	background:#E15315;
}
@media screen and (max-width: 360px) {
	.busSearch label {
		width:80px;
	}
	.busSearch .listBar {
		width:calc(100% - 80px);
		padding:0 0 0 10px;
	}
}
@media screen and (min-width: 768px) {
	.busSearch .box {
		width:calc(100% - 60px);
		margin:0 10px 0 0;
	}
	.busSearch label {
		width:130px;
	}
	.busSearch .listBar {
		width:calc(100% - 130px);
	}
	.busSearch .search-btn {
		width:50px;
	}
	.busSearch .search-btn span {
		float:left;
		width:100%;
		height:100%;
		font-size:0;
		padding-left:0;
	}
	.busSearch .search-btn span em {
		margin:15px 0 0 0;
	}
}


/* ----- trafficTit ----- */
.trafficTit {
	width:100%;
	margin:30px auto 20px auto;
}
.trafficTit span{
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#bf0000;
	font-size:3.9em;
	line-height:110%;
	font-weight:bold;
}
.trafficTit em{
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#000;
	font-size:2.3em;
	line-height:110%;
	font-weight:bold;
	font-style:normal;
	margin-left:5px;
}
.trafficTit .renewTime{
	float:right;
	color:#666666;
	font-size:1.7em;
	font-weight:bold;
	line-height:20px;
	padding-left:30px;
	margin-top:15px;
	background:url(../images/renewTime-icon.png) no-repeat 0 0;
}


/* ----- trafficTableBox ----- */
.trafficTableBox {
	position:relative;
	width:100%;
	margin:20px auto 0 auto;
}
.trafficTableBox dl {
	position:relative;
	width:100%;
	height:auto;
}
.trafficTableBox dl dt {
	float:left;
	width:100%;
	background:#d8c7be;
}
.trafficTableBox dl dt a {
	display:block;
	color:#800000;
	font-size:1.9em;
	font-weight:bold;
	text-align:center;
	padding:17px 0 21px 0;
}
.trafficTableBox dl dt a em {
	font-style:normal;
}
.trafficTableBox dl dt a:hover,
.trafficTableBox dl dt a:focus {
	background:rgba(127,45,0,.2);
}
.trafficTableBox dl dt.saTab,
.trafficTableBox dl dt.saTabOn {
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	z-index:10;
}
.trafficTableBox dl.dtm2 dt.saTab,
.trafficTableBox dl.dtm2 dt.saTabOn {
	position:absolute;
	top:0;
	width:50%;
	text-align:center;
	z-index:10;
}
.trafficTableBox dl.dtm2 dt.tab01.saTab,
.trafficTableBox dl.dtm2 dt.tab01.saTabOn {left:0;}
.trafficTableBox dl.dtm2 dt.tab02.saTab,
.trafficTableBox dl.dtm2 dt.tab02.saTabOn {left:50%;}
.trafficTableBox dl dt.saTab a {
	float:left;
	width:100%;
}
.trafficTableBox dl dt.saTabOn a {
	position:relative;
	float:left;
	width:100%;
	color:#FFF;
	width:100%;
	background:#7f2d00;
	cursor:text;
}
.trafficTableBox dl dt.saTabOn a:before {  
	content: '';
	display: block;
	position: absolute;
	bottom:0;
	left:50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #eeeeee transparent;
	margin-left:-11px;
}
.trafficTableBox dl dd {
	position:relative;	
	float:left;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	background:#eeeeee;
}
.trafficTableBox dl dd.mTop {	
	margin-top:55px;
}
.trafficTableBox table {
	width:100%;
	border:none;
	border-collapse:collapse;
	margin:0 auto;
}
.trafficTableBox table thead tr {
	border-bottom:2px solid #7f2d00;
}
.trafficTableBox table tbody tr {
	border-bottom:1px dashed #b2b2b2;
}
.trafficTableBox table tbody tr:last-child {
	border-bottom:none;
}
.trafficTableBox table th {
	font-family:"微軟正黑體", "Microsoft JhengHei";
	color:#7f2d00;
	font-size:1.9em;
	font-weight:bold;
	padding:15px 0;
	text-align:center;
	vertical-align:middle;
	border:none;
}
.trafficTableBox table td {
	color:#000;
	font-size:1.9em;
	font-weight:bold;
	padding:15px;
	vertical-align:middle;
	border:none;
}
.trafficTableBox table.railTable td {
	width:25%;
	text-align:center;
}
.trafficTableBox table.bikeTable td:nth-child(1) {
	color:#a40000;
}
.trafficTableBox table.bikeTable td:nth-child(3),
.trafficTableBox table.bikeTable td:nth-child(4) {
	text-align:center;
}
.trafficTableBox table .time {
	width:90px;
	color:#a40000;
	text-align:center;
	padding:15px 0;
}
.trafficTableBox table .nowIn {
	position:relative;
	display:block;
	color:#FFF;
	text-align:center;
	z-index:1;
}
.trafficTableBox table .nowIn::before {
	position:absolute;
	display:block;
	content:'';
	left:6px;
	top:-7px;
	width:calc(100% - 18px);
	height:33px;
	background:#a40000;
	z-index:-1;
}
.trafficTableBox table .nowIn::after {
	position:absolute;
	display:block;
	content:'';
	right:0;
	top:-7px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16.5px 0 16.5px 12px;
	border-color: transparent transparent transparent #a40000;
	z-index:-1;
}
@media screen and (max-width: 520px) {
	.trafficTableBox dl dt a {
		display: flex;
		font-size:1.7em;
		min-height:75px;
		padding:0;
		text-align:center;
		box-sizing:border-box;
		flex-wrap:wrap;
	}
	.trafficTableBox dl dt a strong {
		display: flex;
		width:100%;
		text-align:center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.trafficTableBox dl.dtm2 dt a em {
		display:block;
		margin-top:5px;
	}
	.trafficTableBox dl dd.mTop {
		margin-top:75px;
	}
}
@media screen and (min-width: 991px) {
	.trafficTableBox table.busTable {
		width:600px;
	}
	.trafficTableBox table.railTable {
		width:640px;
	}
	.trafficTableBox table.bikeTable {
		width:800px;
	}
	.trafficTableBox table .time {
		width:140px;
	}
}
@media screen and (min-width: 1200px) {
	.trafficTableBox dl dd {
		padding:20px 40px;
	}
}



.spNote {
	width:100%;	
	color:#000;
	font-size:1.9em;
	font-weight:bold;
	line-height:135%;
	margin:20px auto 0 auto;
}