@charset "utf-8";
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Eliam
CreateDate:2016/03/11
Last Editor: Sharon
LastDate: 2020/05/29
Version: 3.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
	橫向Menu，頁面置中
=================================================================================*/

/*===============================================================================
                         以下是內容頁版面設定
=================================================================================*/
#Wrap {}

/*-----------------Header-----------------*/
#Header {
	height: 75px;
}

#Banner {}

#RouteNav {}

#menu {}
#navigation .subMenu .arrow::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0d7";
	margin-left: 10px;
}

/*-----------------Content-----------------*/
#Content {
}

#Main{}

/*-----------------Footer-----------------*/
#Footer{}

/* =======================================
                   各頁排版設定
============================================*/ 
/*-------- 網站地圖 ---------*/
.sitemap {
	width: 100%;
	height: auto;
	max-width: 860px;
}

table.siteMap {
	width: 98%;
	margin: 2rem 1%;
	font-size: 1.25rem;
}

	table.siteMap th {
		width: 30%;
		text-align: left;
		position: relative;
		border-right: 4px solid #66a3ae;
	}

		table.siteMap th span.mapLine {
			display: inline-block;
			height: 2px;
			width: 100%;
			background-color: #66a3ae;
			margin-top: 1rem;
			vertical-align: top;
		}

		table.siteMap th div {
			border-left: 0.5rem solid #00647d;
			color: #00647d;
			padding: 0.5rem 1rem;
			font-weight: bold;
			background-color: #FFF;
			position: absolute;
			top: 0;
			height: 2rem;
			line-height: 2rem;
			font-size: 1.5rem;
		}

		table.siteMap td {
			padding: 0.5rem 0 0 1rem;
		}

			table.siteMap tr:last-child td {
				padding-bottom: 0.5rem;
			}

			table.siteMap td div {
				height: 2rem;
				line-height: 2rem;
				font-weight: bold;
				background-color: #FFF;
			}

	table.siteMap td.hasLine {
		position: relative;
		border-right: 4px solid #66a3ae;
		width: 35%;
		border-top: 1rem solid #FFF;
	}

		table.siteMap td.hasLine div {
			position: absolute;
			top: 0;
			height: 2rem;
			line-height: 2rem;
			font-size: 1.25rem;
			padding: 0.5rem 1rem 0.5rem 0;
		}

		table.siteMap td.hasLine span.mapLine {
			display: inline-block;
			height: 2px;
			width: 100%;
			background-color: #66a3ae;
			margin-top: 1rem;
			vertical-align: top;
		}

/*-------- 資料傳輸監控 ---------*/
.circle {
	width:14px;
	height:14px;
	border-radius:50%;
	display:inline-block;
	margin-right:2px;
}

.circleL {
	width:36px;
	height:36px;
	border-radius:50%;
}

.green {
	background:#4bb537;
	border-color:#4bb537;
}

.yellow {
	background:#ffa200;
	border-color:#ffa200;
}

.red {
	background:#e92a4e;
	border-color:#e92a4e;
}

.gray {
	background:#949494;
	border-color:#949494;
}

.box {
	float:left;
	display:block;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*-------- 資料更新時間設定 ---------*/
.update {
	border-top:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
}

h5.time {
	color:#818181;
	float:left;
	display:block;
}

ul {}

ul li {}

ul.explanation {
	float:right;
	display:block;
}

ul.explanation li {
	color:#818181;
	margin-right:25px;
    display:inline-block;
}

ul.explanation li:nth-last-child(1) {
	margin-right:0;
}


/*-------- 燈號資訊區設定 ---------*/
.LigntInfo {
	background-color:#f5f5f5;
	padding:30px 0;
}

.light {
	width:210px;
	height:168px;
	margin:0 15px;
	margin-bottom:30px;
	background-color:#fff;
	border-top-style:solid;
	border-top-width:6px;
	box-shadow:2px 2px 5px 1px rgba(0,0,0,0.3);
}

@media screen and (max-width: 900px) {
    .light {
        width: 30%;
        margin: 0 1.5%;
        margin-bottom: 30px;
    }
}
@media screen and (min-width: 426px) and (max-width: 640px) {
    .light {
/*		width: 44%;
		margin: 0 3%;
		margin-bottom: 30px;
		height: auto;*/
		width: 90%;
		margin: 0 5%;
		margin-bottom: 30px;
		height: auto;
    }
}
@media screen and (max-width: 425px) {
	.light {
		width: 90%;
		margin: 0 5%;
		margin-bottom: 30px;
		height: auto;
	}
}

.light:hover {
	color:#51b8da;
	cursor:pointer;
	opacity: 0.7;
}

.light h2 {
	color:#818181;
	font-weight:bold;
	letter-spacing:.125em;
	line-height:102px;
	margin-top:0;
}

.light h2:hover {
	color:#51b8da;
}

.lightArea {
	height:60px;
	background-color:#ececec;
}

.lightArea ul {
	height: 60px;
    line-height: 60px;
    width: 180px;
    margin: 0 auto;
}

.lightArea ul li {
	color:#2a2a2a;
	margin-right:10px;
    display:inline-block; 	
}

/*-------- 各測站設定 ---------*/
/*-- 測站名稱 --*/
.stationTitle:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.stationTitle {
	width:90%;
	margin:0 auto;
	position: relative;
	clear:both;
	margin-top:40px;
	margin-bottom:30px;
}

.stationTitle h4 {
	color: #7E7E7E;
	text-align:center;
	line-height: 20px;
	margin: 30px 0 20px;
}

.stationTitle h4:before, .stationTitle h4:after {
	content: "";
	height: 1px;
	position: absolute;
	top: 10px;
	width:42%;
}

.stationTitle h4:after {
	background: rgb(126,126,126);
	background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    right: 0;
}

.stationTitle h4:before {
	background: rgb(126,126,126);
	background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    left: 0;
}

/*------ 測站資訊 ------*/
.stationCont {}
.station {
	width:270px;
	height:280px;
	background-color:#f7f7f7;
	border:1px solid #d1d1d1;
	margin:0 15px;
	margin-bottom:40px;
	padding:28px;
	cursor:pointer;
}

@media screen and (min-width: 426px) and (max-width: 640px) {
	.station {
/*		width: 44%;
		margin: 0 3%;
		margin-bottom: 30px;
		height: auto;*/
		width: 90%;
		margin: 0 5%;
		margin-bottom: 30px;
		height: auto;
	}
}
@media screen and (max-width: 425px) {
	.station {
		width: 90%;
		margin: 0 5%;
		margin-bottom: 30px;
		height: auto;
	}
}

.station h5 {
	color:#131313;
	font-size:1.375em;
	font-weight:bold;
	padding:28px 0;
}

.station h6 {
	color:#15708e;
	padding-bottom:28px;
}

.station p {
	color:#5d5d5d;
	font-size:.875em;
	line-height:1.5em;
}

/*------ 快速連結錨點設定 ------*/
.quickBtn {
	width:52px;
	height:52px;
	z-index:9;
	position: fixed;
	right:30px;
	cursor:pointer;
}

.top {bottom:20px;}
.Info {bottom:82px;}

i {
    margin-right: 3px;
}


/*-------- 相簿 for 空品濃度動態圖 ---------*/
.myAlbumCard {
	margin: 1rem 0;
}

	.myAlbumCard .card {
		position: relative;
		width: 20%;
		float: left;
		padding: 1rem;
		margin-bottom: 2rem;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.myAlbumCard .card span {
		position: absolute;
		left: 1rem;
		top: 1rem;
		text-align: center;
	}

	.myAlbumCard .card img {
		width: 100%;
	}

/*-- 測站名稱 --*/
.legendBar {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	text-align: right;
	background-color: rgba(255,255,255,0.75);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	color: #111;
	z-index: 900;
}

	.legendBar p.BarTitle {
		font-size: 1rem;
		font-weight: bold;
		display: inline-block;
	}

	.legendBar .ConcentrationBar {
		display: inline-block;
		width: 21rem;
		height: 0.5rem;
		background: linear-gradient(to right,#096,#ffde33,#f93,#c03,#609,#7e0023,#2d020e);
		margin: 0 1rem;
	}

	.legendBar .BarNum {
		display: none;
	}

		.legendBar .BarNum li {
			float: right;
			width: 3rem;
			margin-left: 0.5rem;
			text-align: center;
		}

	.legendBar.aqi .BarNum.aqi, .legendBar.pm .BarNum.pm {
		display: block;
	}

/*篩選測站樣式*/
.MyQueryArea table.tms_subTable {
	background-color: #FFF;
	width: 99%;
	margin: 8px 0;
}

	.MyQueryArea table.tms_subTable th, .MyQueryArea table.tms_subTable tr:nth-child(1) th {
		padding: 1rem 0;
		text-align: center;
		vertical-align: middle;
	}

	.MyQueryArea table.tms_subTable td, .MyQueryArea table.tms_subTable tr:nth-child(1) td {
		padding: 0;
		vertical-align: middle;
	}

	.MyQueryArea table.tms_subTable input[type=checkbox] {
		vertical-align: text-bottom;
	}

.supercase {
	vertical-align: 3px;
	text-align: center;
	color: black;
}

.subcase {
	vertical-align: -3px;
	text-align: center;
	color: black;
}

.FreeGridWidth {
	overflow-x: auto;
}

	.FreeGridWidth .MyGridView {
		width: 1800px;
	}