/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");
body { background: url(../images/bg.jpg) #92d0e9 top no-repeat; font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
.container p { font-size: 62.5%; line-height: 1.8em}
/*================================
HEADER
================================*/
#siteID { padding: 24px 0 10px 15px; }
#siteID h1 { font-size: 4em; font-weight: 400; font-family: 'Marcellus', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; }
#siteID .description { font-size: 1.4em; }
/*================================
將圖像尺寸設為100%
================================*/
img { max-width: 100%; height: auto; width /***/: auto; 　/*僅IE8適用*/
}
/*===============================
contents
===============================*/
.box { background: #fff; border-bottom: 10px solid #9FA0A0; padding: 20px 15px 15px; margin-bottom: 0; font-size: 1.5em; position: relative; word-wrap: break-word;font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box h1 { font-size: 1.5em; font-weight: lighter; border-top: 1px dashed #9FA0A0; border-bottom: 1px dashed #9FA0A0; margin-bottom: 20px; padding-left: 10px; color: #9FA0A0; line-height: 1.3; text-align: center; }
.box h2 { font-size: 1.2em; color: #00A1DF; background: #EFEFEF; border-left: 2px solid #00A1DF; border-right: 2px solid #00A1DF; padding: 5px 10px; margin-left: 0; margin-bottom: 20px; line-height: 1.3; text-align: center }
.box h3 { font-size: 1.0em; margin-bottom: 20px; padding-left: 10px; line-height: 1.3; color: #00A1DF; }
.box h3 span { font-size: 0.6em; color: #00A1DF; margin-bottom: 20px; padding-left: 10px; line-height: 1.3; }
.box p { margin-bottom: 15px; margin-left: 30px; margin-right: 25px; line-height: 1.5;text-align: justify   }
.box p img { margin-bottom: 15px; margin-left: 0 auto; line-height: 1.5; }
.box p span { color: #428AA7; }
.box p span.green { color: #00B050}
.box p span.red { color: #FF0004; }
.box p span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #428AA7; }
.box p span.tips { margin: 15px 0; line-height: 1.8em; font-size: 1em; color: #FF0004; }
.box ul li p { list-style: none; }
.box li p { width: 250px; float: left; margin: 0 30px; overflow: hidden }
.box ul.list li a { color: #000000; font-size: 0.7em; line-height: 1.8em; text-decoration: none; width: 170px; float: left; margin: 15px 20px; overflow: hidden }
.box ul.list li a:hover { color: #f1bb4b; }
.box li.path a { color: #000000; font-size: 0.9em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 0 22px; overflow: hidden }
.box li.path a:hover { color: #f1bb4b; }
/*===============================
表格的裝飾
===============================*/	
	
.box .air table  { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; font-size: 0.7em;  }
.box .air td.start { background-color: #fff; }
.box .air td { text-align: center; vertical-align: middle; padding: 10px 2px 10px 2px; border: #CCC 1px solid }
.box .air td p { color: #434248; font-size: 0.8em; margin: 0;text-align: center }
.box .air td p.s { color: #F0AB45 }
.box .air td p.m { color: #CD2D61 }
.box .air td p.l { color: #2DA0CF }
.box .air td p.xl { color: #457C45 }
.box .air td p.xxl { color: #882585 }
.box .air td p.xxxl { color: #129F94 }
/*===============================
連結的裝飾
===============================*/
/*內容類的一般連結*/
.box a { color: #00A1DF; text-decoration: none; }
.box a:hover { color: #090; text-decoration: underline; }
/*===============================
照片的裝飾
===============================*/
/* 使用陰影的照片裝飾 */
.box img { background: #fff; padding: 5px; box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #aaa; -moz-box-shadow: 0 1px 3px #aaa; behavior: url(PIE.htc); }
.box img.noshadow { max-width: 20%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.aligncenter { display: block; margin-right: auto; margin-bottom: 2em; }
.alignleft { display: block; float: left; margin-right: 15px; margin-bottom: 1em; }
.aligncenter { display: block; margin: 0 auto; }
.alignright { display: block; float: right; margin-left: 15px; margin-bottom: 1em; }
.alignright0 { display: block; float: right; margin-left: 0; margin-bottom: 1em; }
/*================================
詳細按鈕用
================================*/
p.more { margin: 40px 150px 10px; }
p.more a { position: relative; display: block; padding: 5px 15px 5px; color: #fff; text-align: center; text-decoration: none; background: #f1bb4b; border: 1px solid #e8e8e8; /*圓角*/
border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; /*方塊陰影*/
box-shadow: 2px 2px 4px #aaa; -webkit-box-shadow: 2px 2px 4px #aaa; -moz-box-shadow: 2px 2px 4px #aaa; /*漸層*/
background: #f1bb4b; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#f1bb4b, #FF0); background: linear-gradient(#f1bb4b, #FF0); -pie-background: linear-gradient(#f1bb4b, #FF0); behavior: url(PIE.htc); }
p.more a:hover { background: #f1bb4b; color: #222; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#FF0, #f1bb4b); background: linear-gradient(#FF0, #f1bb4b); -pie-background: linear-gradient(#FF0, #f1bb4b); behavior: url(PIE.htc); text-decoration: none; }
/*================================
SIDEBAR的裝飾
================================*/
#sidebar { font-size: 1.3em; }
.sideinfo { background: #fff; border: 1px solid #999; padding: 15px; margin-bottom: 30px; }
.sideinfo h4, .ad h4 { font-size: 1.2em; border-bottom: 2px solid #66A9DD; padding-bottom: 4px; margin-bottom: 15px; }
.ad p { font-size: 0.9em; color: #e8e8e8; padding-bottom: 4px; margin-bottom: 5px; }
.sideinfo h5 { font-weight: bold; line-height: 1.2em; font-size: 0.9em; }
.newentry img { max-width: 55%; float: left; margin: 0 7px 5px 0; border: 1px solid #999; padding: 3px; }
.newentry dd { margin-top: 10px; }
.newentry h5 a { color: #00A0E9; text-decoration: none; }
.newentry h5 a:hover { color: #069; }
.newentry p { margin-bottom: 15px; }
.icon-file-text-alt { font-size: 1.1em; margin: 0 5px 0; }
/*================================
FOOTER
================================*/
#footerContainer { margin-top: 20px; background: #000; }
#footerContainer p { text-align: center; color: #fff; padding: 10px 0; }

@media ( max-width : 768px ) {
/*內容區域側邊留白之設定*/
.span_8, .span_4 { padding-left: 10px; padding-right: 10px; }
/*網站LOGO大小*/
#siteID h1 { font-size: 3em; }
/*詳細按鈕的大小設定*/
p.more { margin: 20px 20px 0; }
p.more a { padding: 10px 0; font-size: 1.3em; }
}

@media only screen and (min-device-width: 320px) and (max-device-width:480px), only screen and (min-width: 320px) and (max-width:480px) {
.box li p { width: 250px; float: left; margin: 0; overflow: hidden }
.box ul.list li a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 15px 12px; overflow: hidden }
.box ul.list li a img { width: 110%; }
.box li.path a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 100px; float: left; margin: 0 20px; overflow: hidden }
.box .air table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; font-size: 0.5em;text-align: center }
.box img.noshadow { max-width: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
}
/*form*/
form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 25px;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
  float: left;
  padding-right: 10px;
	padding-top:5px; 
	font-size: 0.8em;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form > div > fieldset label {
	font-size: 1.5em;
}
label span.red {
	color: #FF0004;;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=phone],
input[type=password],
textarea {
	width: 85%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=phone],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=phone]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}

@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=phone],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}