/*======================================================================== 
	Author: Shanny
  ========================================================================*/

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{	width:100%;	height:100%; background: #fff;}
body {
	width: 100%; height: 100%; margin: 0;
	font-family: 'Helvetica', '微軟正黑體', Verdana, 'Times New Roman', Times, Georgia, '新細明體', PMingLiU, NSimSun, serif;
	font-size: 13px; line-height: 160%; color: #666; text-decoration: none;
	display: flex; /*使物件依序排列*/
  flex-direction: column; /*使物件垂直排列*/
}

a:link    { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover   { text-decoration: none;}
a:active  { text-decoration: none;}

#wrapper{ flex-grow: 1; /*可佔滿垂直剩餘的空間*/}

.logo{ position: absolute; top: 15px; left: 15px;}
@media only screen and (max-width: 960px){
  .logo{ width: 170px;}
}
@media only screen and (max-width: 640px){
  .logo{ width: 120px; top: 20px; left: 10px;}
}

.mainPic{ text-align: center;
  background-image: url(../images/bg.jpg); background-position: center center;}
@media only screen and (max-width: 768px){
  .mainPic{ background-image: none;}
}

.container{
	width: 100%; max-width: 1200px; box-sizing: border-box;
	margin: 0 auto; padding: 0 15px;}


/* Table */
.theTable{ width: 100%; margin: 0 auto; text-align: center; border: solid 1px #ccc;}
.theTable .bg_gradient{ background: #94cb8b;
background: -moz-linear-gradient(left,  #94cb8b 0%, #3abbee 100%);
background: -webkit-linear-gradient(left,  #94cb8b 0%,#3abbee 100%);
background: linear-gradient(to right,  #94cb8b 0%,#3abbee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94cb8b', endColorstr='#3abbee',GradientType=1 );
}
.theTable .bg_gray{ background: #f5f5f5;}
.theTable th{ height: 42px; padding: 5px 10px;
  color: #fff; vertical-align: middle; text-align: center; font-size: 24px;
  border-right: solid 1px #fff;}
.theTable td{ height: 45px; padding: 0 10px; vertical-align: middle; font-size: 22px;
  border-right: solid 1px #ccc;}
.theTable td.smallW{ font-size: 18px;}
.theTable .evenly{ height: 60px;}
.tableInfo{ font-size: 22px; color: #649564; text-align: center; vertical-align: middle;}
.tableInfo span{ padding: 5px 15px; margin-right: 10px; display: inline-block;
  background: #42b0dd; border-radius: 25px; font-size: 18px; color: #fff; vertical-align: middle;}
@media only screen and (max-width: 960px){
  .theTable th,.theTable td{ font-size: 18px;}
  .theTable td.smallW{ font-size: 16px;}
  .tableInfo{ font-size: 16px; text-align: left;}
  .tableInfo span{ font-size: 15px;}
}


/* 專案說明 */
.illustrate{ max-width: 1200px; margin: 0 auto; padding: 30px 15px 5px 15px;}
.illustrate h4{ font-size: 16px; color: #629162; font-weight: bold;}
.illustrate li{ margin: 8px 0; list-style: decimal; font-size: 15px;}

footer{ height: 50px; background-repeat: no-repeat;
  background-image: url(../images/footer.svg); background-position: right center;}
@media only screen and (max-width: 960px){
  footer{ margin-bottom: 100px;}
}


/*======================================================================== 
	QuickLink
  ========================================================================*/
.quickLink{ width: 63px; margin-top: -269px; position: fixed; top: 50%; right: 15px;
  border-radius: 31px;
-webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);}
.quickLink_m{ padding: 10px; background: #fff;
  position: fixed; bottom: 0; left: 0;
-webkit-box-shadow: 0 -5px 5px 0 rgba(0,0,0,0.15);
box-shadow: 0 -5px 5px 0 rgba(0,0,0,0.15);
}
.quickLink_m a{ text-align: center;}


} /*重要不可刪除!*/