.material-icons { vertical-align: middle; }

#臺北市士林區[t="hover"] polygon { fill: #e54080; }
#臺北市中山區[t="hover"] polygon { fill: #d6b700; }
#臺北市松山區[t="hover"] polygon { fill: #f38e00; }
#臺北市內湖區[t="hover"] polygon { fill: #d91f26; }
#臺北市大同區[t="hover"] polygon { fill: #ab8c0e; }
#臺北市文山區[t="hover"] polygon { fill: #2f7ac6; }
#臺北市中正區[t="hover"] polygon { fill: #369b6f; }
#臺北市南港區[t="hover"] polygon { fill: #97a800; }
#臺北市萬華區[t="hover"] polygon { fill: #41b5d0; }
#臺北市信義區[t="hover"] polygon { fill: #5c7a0e; }
#臺北市北投區[t="hover"] polygon { fill: #bd5719; }
#臺北市大安區[t="hover"] polygon { fill: #0ca563; }

#Main { width: 100%; height: auto; }

#Main .BoxShadow { box-shadow: 0px 5px 10px rgba(0,0,0,0.3); }

#TMain { display: flex; margin: 0px 25px; width: calc( 100% - 50px ); padding: 10px 0px 5px; border-bottom: solid 1px #AAA; }
#TMain:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#TMain .TMLeft { display: flex; flex: none; width: 450px; }
#TMain .TMLeft a { display: flex; flex: none; width: 100%; } 
#TMain .TMLeft .TMLLogo { flex: none; margin: 0px 8px 0px 0px; width: 100px; }
#TMain .TMLeft .TMLLogo img { width: 100%; }
#TMain .TMLeft .TMLTitle { flex: 1; color: #FFF; }
#TMain .TMLeft .TMLTitle .C { margin: 9px 0px 3px; font-size: 14px; }
#TMain .TMLeft .TMLTitle .C span { font-size: 21px; }
#TMain .TMLeft .TMLTitle .E { font-size: 12px; line-height: 15px; color: #CCC; }
#TMain .TMRight { flex: 1; }
#TMain .TMRight:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#TMain .TMRight ul { display: block; float: right; margin: 3px 0px; padding: 0px; list-style-type: none; }
#TMain .TMRight ul:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#TMain .TMRight ul.Top {  }
#TMain .TMRight ul.Bottom {  }
#TMain .TMRight ul li { float: left; height: 35px; padding: 0px 5px; line-height: 35px; list-style-type: none; text-align: center; }
#TMain .TMRight ul li.Line { width: 10px; }
#TMain .TMRight ul li.Line div { margin: 8px auto; width: 0px; height: 60%; border-left: solid 1px #BBB; }
#TMain .TMRight ul li a { display: block; padding: 2px 8px; font-size: 15px; border-radius: 3px; line-height: 20px; }
#TMain .TMRight ul li a span { display: block; font-size: 12px; line-height: 15px; color: #777; }
#TMain .TMRight ul li a:hover { background-color: rgba(255,255,255,0.3); }
#TMain .TMRight div.Center { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }

#TMain .TMMobile { display: none; flex: 1; }
#TMain .TMMobile .TMMFun { display: block; width: 100%; padding-right: 8px; text-align: right; }
#TMain .TMMobile i { font-size: 48px; color: #FFFFFF; line-height: 85px; cursor: pointer; }

/* 捲軸 Firefox或IE / Edge 不支持自定義滾動條。 */
.Scroll::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 5px; }
.Scroll::-webkit-scrollbar-track { background: transparent; border-radius: 5px; }
.Scroll::-webkit-scrollbar-track:hover { background: transparent; }
.Scroll::-webkit-scrollbar-thumb { background: #002135; border-radius: 5px; }
.Scroll::-webkit-scrollbar-thumb:hover { background: #97e1f1; }
.Scroll::-webkit-scrollbar-corner { background: #f8f8f8; }

#CMain { width: 100%; padding: 0px 25px 0px; }
#CMain:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }

.Required { float: right; color: #ff6c6c; font-size: 13px; }

input[type="text"],
input[type="file"], 
input[type="number"], 
input[type="date"], 
input[type="number"], 
input[type="password"], 
input[type="email"], 
textarea { 
	padding: 12px; border-radius: 5px; border: solid 1px #5d7386; background-color: #DDDDDD; font-size: 18px; 
}

input[type="submit"],
input[type="reset"],
input[type="button"], 
button {
	padding: 10px; border-radius: 5px; color: #FFFFFF; font-size: 17px; line-height: 24px; 
}

select {
	padding: 12px; border-radius: 5px; border: solid 1px #5d7386; background-color: #DDDDDD; font-size: 18px; 
}

#BMain { margin: 0px 15px; width: calc( 100% - 30px ); padding: 25px 25px; height: auto; }
#BMain .BMLeft { display: inline-block; width: 100%; max-width: calc( 100% - 450px ); color: #FFFFFF; font-size: 15px; line-height: 28px; vertical-align: bottom; }
#BMain .BMLeft .BMLMenu ul { margin-bottom: 5px; }
#BMain .BMLeft .BMLMenu ul:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#BMain .BMLeft .BMLMenu ul li { float: left; margin-right: 5px; padding: 3px 8px; }
#BMain .BMLeft .BMLMenu ul li.This { border-bottom: solid 2px #113a55; }
#BMain .BMLeft .BMLM { display: none; text-shadow: 0px 2px 2px rgba(0,0,0,0.5); }
#BMain .BMLeft .BMLM.Open { display: block; }
#BMain .BMLeft .BMLM span {  }
#BMain .BMLeft .BMLM.C { }
#BMain .BMLeft .BMLM.E { }
#BMain .BMRight { display: inline-block; width: 100%; max-width: 450px; padding-top: 15px; color: #FFFFFF; font-size: 13px; line-height: 28px; vertical-align: bottom; text-align: right; }
#BMain .BMRight a { margin-left: 10px; }
#BMain .BMRight span { margin-left: 5px; }


a.TagStyle { 
	position:relative;
	margin-top:10px;
	margin-left:20px;
	padding:4px 10px 4px 12px;
	color:#fff;
	text-decoration:none;	
	border-bottom-right-radius:4px;
	border-top-right-radius:4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	font-size: 13px; background-color: #007e99;
}

a.TagStyle:hover { background-color: #19a0bd; }

a.TagStyle:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #007e99 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;	
}
a.TagStyle:hover:before { border-color:transparent #19a0bd transparent transparent; }

a.TagStyle:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	border-radius:2px;
	background-color:#fff;
	box-shadow:-1px -1px 2px #004977;
}

@media screen and ( max-width: 1700px ) {


}


@media screen and ( max-width: 1600px ) {


}


@media screen and ( max-width: 1440px ) {

#TMain .TMLeft { width: 420px; }
#TMain .TMLeft .TMLLogo { width: 90px; }
#TMain .TMLeft .TMLTitle .C { font-size: 13px; }
#TMain .TMLeft .TMLTitle .C span { font-size: 19px; }
#TMain .TMLeft .TMLTitle .E { line-height: 15px; }

#TMain .TMRight ul li { height: 35px; padding: 0px 2px; line-height: 35px; }
#TMain .TMRight ul li.Line { width: 10px; }
#TMain .TMRight ul li a { padding: 0px 6px; font-size: 14px; }

}


@media screen and ( max-width: 1240px ) {

#TMain { margin: 0px 15px; width: calc( 100% - 30px ); padding: 15px 0px 5px; }
#TMain .TMLeft { width: 370px; }
#TMain .TMLeft .TMLLogo { width: 75px; }
#TMain .TMLeft .TMLTitle .C { margin: 5px 0px 3px; font-size: 13px; }
#TMain .TMLeft .TMLTitle .C span { font-size: 16px; }
#TMain .TMLeft .TMLTitle .E { line-height: 14px; letter-spacing: -0.5px; }

#TMain .TMRight ul { margin: 1px 0px; }
#TMain .TMRight ul li { height: 35px; padding: 0px 0px; line-height: 35px; }
#TMain .TMRight ul li.Line { width: 10px; }
#TMain .TMRight ul li a { padding: 0px 6px; font-size: 12px; }

#BMain .BMLeft { display: block; width: 100%; max-width: 100%; }
#BMain .BMRight { display: block; width: 100%; max-width: 100%; }


}


@media screen and ( max-width: 1024px ) {

#TMain { display: block; }
#TMain .TMLeft { float: left; }

#TMain .TMRight { display: none; float: left; width: 100%; }
#TMain .TMRight.Open { display: block; margin-top: 5px; border-top: solid 1px #AAA; }

#TMain .TMRight ul { float: none; clear: both; width: 100%; }
#TMain .TMRight ul.Top { float: right; margin: 8px 0px; width: auto; border-bottom: solid 1px #FFFFFF; }
#TMain .TMRight ul.Top li { float: left; width: auto; }
#TMain .TMRight ul.Bottom {  }
#TMain .TMRight ul li { width: 100%; height: auto; }
#TMain .TMRight ul li a { padding-left: 10px; font-size: 17px; text-align: left; line-height: 50px; }
#TMain .TMRight ul li a span { display: inline; padding-left: 5px; font-size: 13px; }

#TMain .TMMobile { display: block; float: right; width: calc( 100% - 370px - 15px ); }
#TMain .TMMobile i { line-height: 70px; }

}

@media screen and ( max-width: 1023px ) {

}

@media screen and ( max-width: 773px ) {

}


@media screen and ( max-width: 667px ) {

#TMain { margin: 0px 15px; width: calc( 100% - 30px ); }
#TMain .TMMobile .TMMFun { padding-right: 0px; }

#CMain { width: 100%; padding: 0px 10px 0px; }

#BMain { padding: 25px 0px; }

}


@media screen and ( max-width: 560px ) {

}


@media screen and ( max-width: 480px ) {

#TMain { padding: 10px 0px 0px; }
#TMain .TMLeft { width: 320px; }
#TMain .TMLeft .TMLLogo { width: 75px; }
#TMain .TMLeft .TMLTitle .C { margin: 3px 0px 3px; font-size: 12px; }
#TMain .TMLeft .TMLTitle .C span { font-size: 16px; }
#TMain .TMLeft .TMLTitle .E { line-height: 13px; }
#TMain .TMMobile { width: calc( 100% - 320px - 15px ); }
#TMain .TMMobile i { font-size: 36px; }

#BMain .BMRight span { display: block; }

}


@media screen and ( max-width: 415px ) {

}


@media screen and ( max-width: 413px ) {

#TMain { margin: 0px 10px; width: calc( 100% - 20px ); }
#TMain .TMLeft { width: 320px; }
#TMain .TMLeft .TMLLogo { width: 70px; }
#TMain .TMLeft .TMLTitle .C { margin: 3px 0px 0px; font-size: 12px; }
#TMain .TMRight ul li a { font-size: 15px; }
#TMain .TMMobile i { font-size: 24px; line-height: 60px; }

}


@media screen and ( max-width: 375px ) {

#CMain { padding: 0px 5px 0px; }

}