﻿  /*==========setting by basic stard==========*/


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html,body,form  {
 height: 100%;
}

  /*==========  setting by basic end  ==========*/

  .clearfix:before,
 .clearfix:after {
 content:"";
 display:table;
 }
 .clearfix:after {
   clear:both;
 }
.clearfix {
   zoom:1; /* IE <8 */
}
.clear {
	clear:both;
}

		/*==========================  主體共用  ===========*/
* {
	font-family: 微軟正黑體,Arial, Helvetica, sans-serif!important;
}
body {
/*	background-color:#81c0e9;*/
}
p {
	line-height:1.5em;
}


#container {
	min-height:100%;
	height: auto !important;
	height: 100%; /*IE6不識別min-height*/
	position: relative;
}
#header {
	margin:0 auto;
}
#page {
	margin: 0px auto;
	/* padding-bottom: 250px;/*等於footer的高度*/
}
#footer {
	position: absolute;
	bottom: 0;
	background-size: 100%;
	background-position: center bottom;
	background: url(../MasterImages/Bg_footer.jpg);
	background-repeat: no-repeat;
	width: 100%;
/*	height: 250px;/*腳部的高度*/
	clear: both;
	background-color:#040302;
}
#footer div.lineA {
	margin: 0 auto;
	color:#ffffff;
	display:block;
	vertical-align:middle;
	text-align:center;
	padding-top:2.5%;
}
#footer div.lineA p {
	text-shadow: 0px 0px 2px rgba(0%,0%,0%,1),0px 0px 3px rgba(0%,0%,0%,1);
}
.titname {
	font-size:1.8em;
	line-height:2em;
}
		/*==========================  map 內容  ===========*/
.maparea {
	position:relative;
	width:100%;
	height:300px;
	background: linear-gradient(to right, #ffffff, #ebe696); /* 标准的语法 */
	display:inline-block;
}
.maptext {
	height: 300px;
	margin:0;
	padding:0;
}
.maptext h2 {
	color:#333333;
	font-size:50px;
	text-align:center;
	font-family:微軟正黑體;
	font-weight:900;
	margin-top:110px;
}
.maptext h2 + p {
	color:#333333;
	font-size:21px;
	text-align:center;
	font-family:微軟正黑體;
	font-weight:900;
	padding-top:0.5em;
	padding-bottom:20px;
}

.map {
	overflow: hidden;
	position: relative;
	z-index: 99;
	display: block;
	margin: 0 auto;
	padding-bottom:0;
}
.map iframe  {
	box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.5),0px 0px 3px rgba(0%,0%,0%,0.35);
	border:2px #ffffff solid;
	width:100%;
	height:300px;
	display:block;
	padding:0;
	margin: 0;
}

/*==========================  header 內容  ===========*/
	.slideshow {
	overflow: hidden;
	position: relative;
	width: 99.9999999%;
	float: left;
}
	.slideshow li {
		position: absolute;
	}
	.slideshow img{
		display: block;
		padding: 0;
		margin: 0 auto;
		width:99.9999999%;
		border: none;
	animation:myfirst 8.5s;
	-webkit-animation:myfirst 8.5s; /* Safari and Chrome */
	animation-iteration-count:infinite;
	}

.jumbotron {
	padding:0px;
	margin:0;
	overflow: hidden;
	background-color:#00080b!important;
	position:relative;
	z-index:1;
}
.runtext {
	height:40px;
	vertical-align:middle;
	display:block;
	padding:10px;
	background-color:#ffff00!important;
	position:relative;
	z-index:2;
	font-weight:900;
	color:#ffffff;
	font-size:large;
	text-shadow: 0px 0px 2px rgba(0%,0%,0%,0.75),0px 0px 3px rgba(0%,0%,0%,0.65),0px 0px 4px rgba(0%,0%,0%,0.65);
}
.runtext span {
	color: #CC0099;
	font-size: x-large;
	text-shadow: 0px 0px 0px rgba(0%,0%,0%,0.75),0px 0px 0px rgba(0%,0%,0%,0.65),0px 0px 0px rgba(0%,0%,0%,0.65);
}

@keyframes myfirst
{
	0%   {
	width:100%;
	height:100%;
	}
	95% {
	width:110%;
	height:110%;
	  opacity:0;
	  filter:alpha(opacity=0); /* IE8 及其更早版本 */	}
	100% {
	  opacity:0;
	  filter:alpha(opacity=0); /* IE8 及其更早版本 */	}
}

@media (min-width:320px){
.jumbotron ,.slideshow {
	height:600px;
}
.headertext .container {
	width: 99.99999%;
}
.headertext h1 {
	font-size:65px;
}
#page {
	 padding-bottom: 350px;/*等於footer的高度*/
}
.maparea {
	height:auto;
}
.maptext h1 {
	margin-top:70px;
}
#footer {
	font-size:78%;
	height: 350px;/*腳部的高度*/
}
}
@media (min-width:800px){
.jumbotron ,.slideshow {
	height:550px;
}
.headertext .container {
	width: 790px;
}
.headertext h1 {
	padding-top:0.9em;
}
.headertext h1 {
	font-size:84px;
}
#page {
	 padding-bottom: 250px;/*等於footer的高度*/
}
#footer {
	font-size:100%;
	height: 250px;/*腳部的高度*/
}
}

@media (min-width:1300px){
.jumbotron ,.slideshow {
	height:780px;
}
.headertext .container {
	width: 1170px;
}
.headertext h1 {
	padding-top:1.5em;
	font-size:84px;
}
#page {
	 padding-bottom: 250px;/*等於footer的高度*/
}
#footer {
	font-size:100%;
	height: 250px;/*腳部的高度*/
}
}

.headertext {
	position:absolute;
	z-index:5;
	top:5%;
	width: 99.9999999%;
}
.headertext h1 {
	color:#ebeb64;
/*	font-size:84px;*/
	font-family:微軟正黑體;
	font-weight:900;
	padding-bottom:20px;
	text-shadow: 0px 0px 5px rgba(0%,0%,0%,0.75),0px 0px 5px rgba(0%,0%,0%,0.65),0px 0px 10px rgba(0%,0%,0%,0.65);
}
.headertext p.sec {
	padding-top:8px;
	border-top:2px #ffffff solid;
	color:#ffffff;
	font-size:30px;
	font-family:微軟正黑體;
	font-weight:900;
	padding-bottom:3em;
	text-shadow: 0px 0px 5px rgba(0%,0%,0%,0.65),0px 0px 5px rgba(0%,0%,0%,0.65);
}
.logo {
	width:60px;
	height:60px;
	display:block;
	border-radius: 60px;
	box-shadow: 0px 0px 5px rgba(100%,100%,100%,0.75),0px 0px 5px rgba(100%,100%,100%,0.75),0px 0px 5px rgba(100%,100%,100%,0.75),0px 0px 5px rgba(100%,100%,100%,0.75);
}
.Bt_skin {
	background-color:transparent;
	border-radius: 50px;
	color: #ebeb64;
	border: 2px #ebeb64 solid;
	width: 50px;
	height: 50px;
	padding:10px 5px;
	position:relative;
	bottom:5px;
	right:5px;
	text-shadow: 0px 0px 5px rgba(0%,0%,0%,0.65),0px 0px 5px rgba(0%,0%,0%,0.65);
}
.Bt_skin:hover {
	color: #ffffff;
	border: 2px #ffffff solid;
}
