@import url("reset.css");

/*
@font-face {
font-family: notoTC;
src: url("file:///Users/herry/Downloads/NotoSansTChinese-hinted/NotoSansHant-thin.otf") format("opentype");
}*/

@font-face {
font-family: 'Ubuntu Condensed';
src: url('UbuntuCondensed-Regular.ttf')  format('truetype')
}

body{
	font-family: 'Ubuntu Condensed', notoTC,"文泉驛正黑", "WenQuanYi Zen Hei", "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif, Verdana, Arial, Helvetica;
    margin: 0px;
	width: 1920px;
	height: 1080px;
	color: white;
	font-weight: 400;
	overflow: hidden;
	/*-webkit-font-smoothing: antialiased !important;*/
	-webkit-font-smoothing: subpixel-antialiased;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.004);
	cursor: none;
}


#offline_warn{
	font-size: 4em;
	color: #00F;
}

section {
	float: left;
	width: 1288px;
	background-color: #eee;
	height: 1012px;
	overflow: hidden;
}


aside{
	float:left;
	width:629px;
	background-color: #eee;
	color: Black;
}
aside>section{
	height: 658px;
	width: inherit;
	position: relative;
}

aside>section>picture{
	height: 400px;
	width: inherit;
	background-color: #eee;
	display: block;
	background-image: url(../../user/map.png);
	margin: 1px 1px 1px 1px;
}

aside>section>header{
	height: 120px;
	background-color: #333;
	color: #FFF;
	padding: 0 0 0 54px;
	/*line-height: 120px;*/
	/*background-image: url(../images/tap.png);
	background-repeat: no-repeat;*/
	border-bottom: 6px;
	border-style: solid;
	border-color: #E27015;
}

aside>section>footer {
	height: 129px;
	width: 100%;
	background-color: #448;
	color: #FFF;
	line-height: 129px;
	font-size: 2.2em;
	padding: 0;
	border-left: 1px;
	border-style: solid;
	border-color: #999;
	text-align: center;
}

aside>section>footer>time{
	font-size: 2.2em;
}

aside>section>img{
	 position: absolute;
	 left: 0px;
	 top: 6px;
}

aside div#video_1{
		border-left: 1px;
	border-style: solid;
	border-color: #999;
}

aside>section>header>h1{
	font-size: 3.5em;
	float: none;
	overflow: hidden;

	font-size: 3.5em;
	overflow: hidden;
	height: 75px;
	line-height: 90px;
}

aside>section>header>h2 {
	font-size: 2em;
	padding: 0 0 0 10px;
	overflow: hidden;
	opacity: 0.5;
}

section ul{
	clear: both;
	float: left;
	text-align: center;
	height: 118px;
	line-height: 118px;
	position: relative;
}

section ul>li{
	float: left;
	text-align: center;
	font-size: 3.74em;
}

.headline{
	background-color: #333;
	height: 67px;
	line-height: 67px;
	font-size: 74%;
}

#row1{background-image:linear-gradient(to right,#d30000,#bc0000);}
#row2{background-image:linear-gradient(to right,#fd8600,#ea7c01);}
#row3{background-image:linear-gradient(to right,#51b2e6,#4396c3);}
#row4{background-image:linear-gradient(to right,#1b2d96,#15247c);}
#row5{background-image:linear-gradient(to right,#008d5f,#006544);}
#row6{background-image:linear-gradient(to right,#006030,#004d26);}
#row7{background-image:linear-gradient(to right,#721e94,#5d1879);}
#row8{background-image:linear-gradient(to right,#aa6db3,#8a5991);}

#row1{background-color: #d30000}
#row2{background-color: #fd8600}
#row3{background-color: #51b2e6}
#row4{background-color: #1b2d96}
#row5{background-color: #008d5f}
#row6{background-color: #006030}
#row7{background-color: #721e94}
#row8{background-color: #aa6db3}

/*
#row9 {background-color: #fd8600}
#row10{background-color: #51b2e6}
#row11{background-color: #1b2d96}
#row12{background-color: #008d5f}
#row13{background-color: #006030}
#row14{background-color: #721e94}
#row15{background-color: #aa6db3}
#row16{background-color:  #d30000}
*/
#row9 {background-color:#bc0000}
#row10{background-color:#ea7c01}
#row11{background-color:#4396c3}
#row12{background-color:#15247c}
#row13{background-color:#006544}
#row14{background-color:#004d26}
#row15{background-color:#5d1879}
#row16{background-color:#8a5991}

.slide1 {
	overflow-y: hidden;
	-webkit-transition: height 0.4s linear;
	-moz-transition: height 0.4s linear;
	-ms-transition: height 0.4s linear;
	transition: height 0.4s linear;
	height: 118px;
}

.slide1.switch {
	height: 0px;
}

.slide2 {
	overflow-y: hidden;
	-webkit-transition: height 0.4s linear;
	-moz-transition: height 0.4s linear;
	-ms-transition: height 0.4s linear;
	transition: height 0.4s linear;
	height: 0px;
}

.slide2.switch {
	height: 118px;
}



/* header 路線 column */
section ul>li:nth-child(4n+2) {
	width: 192px;
}

/* 車種 column  */
section ul>li:nth-child(4n+1) {
	width: 96px;
}

/* 等候時間 column  */
section ul>li:nth-child(4n+3) {
	width: 217px;
	padding: 0 8px 0 8px;
}

/* 起訖站 column  */
section ul>li:nth-child(4n+4) {
	width: 727px;
	text-align: left;
	padding-left: 40px;
	height: 112px;
}

/* 路線 column */
.roundRect{
	width: 182px !important;
	height: 80px;
	line-height: 80px;
	margin: 15px 5px 23px 5px;
	border-radius: 12px;
	background-color: #FFF;
	color: black;
	font-size: 4.5em;
}

li.roundRect s{
	font-size: 0.65em;
	text-decoration: none;
	vertical-align: top;
	color: #555;
	padding-left: 4px;
	line-height: 90px;
}

li.roundRect i{
	font-size: 0.78em;
	text-decoration: none;
	vertical-align: top;
	color: #555;
	padding-right: 4px;
	line-height: 83px;
}

.ETA_L {
	float: left;
	width: 130px;
	font-size: 1.2em;
	text-align: right;
	padding-left: 15px;
}

.ETA_R {
	float: right;
	width: 53px;
	font-size: 0.75em;
	text-align: right;
	line-height: 46px;
	height: 40px;
	padding-top: 10px;
}

.ETA_RB {
	font-size: 0.7em;
}

.width_100{
	width: 100%;
}

.RouteDesc{
	width: 100%;
	height: 0.8em;
	margin-top: -18px;
	font-size: 0.95em;
}

.RouteDescE{
	width: 100%;
	height: 0.5em;
	font-size: 0.5em;
	opacity: 0.8;
}


.icon-bus:before {
	font-size: 2em;
}
.icon-bus_lfv:before {
	font-size: 2em;
}
.icon-bus_dis:before {
	font-size: 2em;
}

.aside_weatherBoard{
	height: 344px;
	padding: 20px 40px;
	font-size: 3.6em;
}

.aside_sep{
	background: #666;
	height: 156px;
	color: #FFF;
	font-size: 6em;
	line-height: 126px;
	text-align: center;
}

footer{
	clear: both;
	width: 1750px;
	padding-left: 170px;
	/*
	background-image: url('../images/tccglogo.png');
	background-repeat: no-repeat;
	background-position: left;*/
	background-color: #333;
	font-size: 2.8em;
	line-height: 71px;
	height: 71px;
	color: #CCC;
	border-top: 1px;
	border-style: solid;
	border-color: #CCC;
	overflow: hidden;
}

img#logo{
	position: absolute;
top: 1012px;
}


aside>article>ul>li{
	padding: 36px 4px;
	float:left;
	height: auto;
	font-size: 0.5em;
	text-align: center;
}

aside>article>ul>li:nth-child(3n+1){
	font-size: 0.5em;
	width: 40px;
}

aside>article>ul>li:nth-child(3n+3){
	font-size: 0.5em;
	width: 220px;
	padding-top: 97px;
}

aside>article>ul>li:nth-child(3n+2){
	font-size: 0.5em;
	width: 200px;

}

aside>article>ul>li>p{
	font-family: 'Ubuntu Condensed', sans-serif, Verdana, Arial, Helvetica;
	font-size: 2em;
	padding-top: 20px;
}

vedio {
	background-color: black;
}


footer.marquee {
    width: 1718px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    line-height: 71px;
	height: 71px;
	padding-left: 200px;
}

footer.marquee p {
    position: absolute;
    width: 1750px;
    margin: 0;
    line-height: 71px;
	height: 71px;
    transform:translateX(100%);
	-webkit-transform:translateX(100%);
}
footer.marquee p:nth-child(1) {
    animation: left-1 32s ease infinite;
	-webkit-animation: left-1 32s ease infinite;
}
footer.marquee p:nth-child(2) {
    animation: left-2 32s ease infinite;
	-webkit-animation: left-2 32s ease infinite;
}

footer.marquee p:nth-child(3) {
    animation: left-3 32s ease infinite;
	-webkit-animation: left-3 32s ease infinite;
}
footer.marquee p:nth-child(4) {
    animation: left-4 32s ease infinite;
	-webkit-animation: left-4 32s ease infinite;
}

footer.marquee p:nth-child(5) {
    animation: left-5 32s ease infinite;
	-webkit-animation: left-5 32s ease infinite;
}
footer.marquee p:nth-child(6) {
    animation: left-6 32s ease infinite;
	-webkit-animation: left-6 32s ease infinite;
}

/** Webkit Keyframes **/
@-webkit-keyframes left-1 {
	0% {-webkit-transform:translateX(100%);}
	3% {-webkit-transform:translateX(0);}
	17% {-webkit-transform:translateX(0);}
	20% {-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-2 {
	0% {-webkit-transform:translateX(100%);}
	17% {-webkit-transform:translateX(100%);}
	20% {-webkit-transform:translateX(0);}
	33% {-webkit-transform:translateX(0);}
	36% {-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-3 {
	0% {-webkit-transform:translateX(100%);}
	33% {-webkit-transform:translateX(100%);}
	36% {-webkit-transform:translateX(0);}
	49% {-webkit-transform:translateX(0);}
	52% {-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-4 {
	0% {-webkit-transform:translateX(100%);}
	49% {-webkit-transform:translateX(100%);}
	52% {-webkit-transform:translateX(0);}
	65% {-webkit-transform:translateX(0);}
	68%{-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-5 {
	0% {-webkit-transform:translateX(100%);}
	65% {-webkit-transform:translateX(100%);}
	68% {-webkit-transform:translateX(0);}
	81% {-webkit-transform:translateX(0);}
	84%{-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-6 {
	0% {-webkit-transform:translateX(100%);}
	81% {-webkit-transform:translateX(100%);}
	84% {-webkit-transform:translateX(0);}
	98% {-webkit-transform:translateX(0);}
	100%{-webkit-transform:translateX(-100%);}
}



/*---------- 3d flip  -----------*/
.slide2 {
	height: 118px;
}

.panel {
	clear: both;
	float: left;
	width: inherit;
	position: relative;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;

	-webkit-perspective-origin: 50px center;
	-moz-perspective-origin:50px center;
	perspective-origin:50px center;
	/*
	-webkit-transform: translateZ(-59px);
	-moz-transform: translateZ(-59px);
	transform: translateZ(-59px);
	*/
}

.panel .front {
	float: none;
	position: absolute;

	top: 0;
	left: 0;
	z-index: 900;

	-webkit-transform: rotateX(0deg) translateZ(59px);
	-moz-transform: rotateX(0deg) translateZ(59px);
	transform: rotateX(0deg) translateZ(59px);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	/* -- transition is the magic sauce for animation -- */
	-webkit-transition: all .7s ease-in-out;
	transition: all .7s ease-in-out;
	}


.panel.flip .front {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	-webkit-transform: rotateX(90deg) translateZ(59px);
	-moz-transform: rotateX(90deg) translateZ(59px);
	transform: rotateX(90deg) translateZ(59px);
}

.panel .back {
	float: none;
	position: absolute;

	top: 0;
	left: 0;
	z-index: 800;

	-webkit-transform: rotateX(-90deg) translateZ(59px);
	-moz-transform: rotateX(-90deg) translateZ(59px);
	transform: rotateX(-90deg) translateZ(59px);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	/* -- transition is the magic sauce for animation -- */
	-webkit-transition: all .7s ease-in-out;
	transition: all .7s ease-in-out;
}

.panel.flip .back {
		z-index: 1000;
	-webkit-transform: rotateX(0deg) translateZ(59px);
	-moz-transform: rotateX(0deg) translateZ(59px);
	transform: rotateX(0deg) translateZ(59px);
}

section .panel:nth-child(3){top: 0px;}
section .panel:nth-child(4){top: 118px;}
section .panel:nth-child(5){top: 236px;}
section .panel:nth-child(6){top: 354px;}
section .panel:nth-child(7){top: 472px;}
section .panel:nth-child(8){top: 590px;}
section .panel:nth-child(9){top: 708px;}
section .panel:nth-child(10){top: 826px;}

section ul.headline li:nth-child(3){
	padding-left: 32px;
}

section ul.headline li:nth-child(4){
	padding-left: 60px;
	width: 683px;
}
/*
#row1, #row9{top: 0px;}
#row2, #row10{top: 118px;}
#row3, #row11{top: 236px;}
#row4, #row12{top: 354px;}
#row5, #row13{top: 472px;}
#row6, #row14{top: 590px;}
#row7, #row15{top: 708px;}
#row8, #row16{top: 826px;}
*/
/*---------- 3d flip  -----------*/