/*======================================================================== 
	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: #333; 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{ width: 100%;
  flex-grow: 1; /*可佔滿垂直剩餘的空間*/
  background-repeat: no-repeat; background-position: top center; background-color: #161b1f;
}
@media screen and (max-width: 959px) {
  #wrapper{ background-image: url(../images/bg_m.jpg); background-size: contain;}
}
@media screen and (min-width: 960px) {
  #wrapper{ background-image: url(../images/bg.jpg);}
}

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

.titleBar{ margin: 5% 0 15% 0;}
.titleBar img{ width: 90%; max-width: 911px;}
/*@media screen and (min-width: 768px) {
  .titleBar{ margin: 50px 0 150px 0;}
}*/
@media screen and (min-width: 960px) {
  .titleBar{ margin: 85px 0 190px 0;}
}
.whiteDiv{ padding: 15px; position: relative; background-color: #fff;}
.whiteDiv h3{ margin-bottom: 10px;}
.whiteDiv h4{ padding: 3px; margin: 0 0 10px 0;
  background: #000; border-radius: 30px; color: #fff; text-align: center; font-size: 18px;}
.whiteDiv p{ margin: 8px 0; margin-bottom: 0 !important; font-size: 18px; line-height: 130%;}
.whiteDiv p img{ width: auto; height: 80px; opacity: 0.5;}
.whiteDiv p .blackBg{ padding: 5px 10px 3px 10px; margin: 0 10px 5px 0; display: inline-block;
  background: #000; border-radius: 15px;
  color: #fff; font-size: 18px; line-height: 100%;}
.whiteDiv p .blueBg{ padding: 3px 8px; margin-right: 5px; display: inline-block; color: #fff;}
.whiteDiv p i{ color: #0758d0}

@media screen and (min-width: 768px) and (max-width: 960px){
  .hidden768{ display: none !important;}
}
.picBox{ height: 100%; min-height: 90px; background-size: cover; background-position: center center;}

@media screen and (max-width: 480px) {
  .whiteDiv h3{ font-size: 18px;}
  .whiteDiv p{ font-size: 15px;}
  .whiteDiv p small{ font-size: 13px;}
}

footer{ padding: 40px 0 30px 0; background: linear-gradient(to top,  #4e667b 0%, #6b8194 30%);}
/* 專案說明 */
.illustrate{ max-width: 1200px; margin: 0 auto; padding-right: 15px;}
.illustrate h4{ font-size: 20px; color: #fff;}
.illustrate li{ margin: 6px 0; list-style: decimal; font-size: 16px; color: #fff; line-height: 140%;}

/* 金峰獎 */
.Jinfeng{ position: relative;}
.Jinfeng > img{ width: auto; height: 170px; position: absolute; bottom: 5px; left: 60px;}
.Jinfeng > div{ min-height: 60px; padding: 15px; margin-top: 10px; margin-bottom: 25px !important; box-sizing: border-box; font-size: 15px;
  background: rgba(255,255,255,0.7); border: solid 1px #c4d0e3; border-radius: 8px;}
@media screen and (min-width: 640px) and (max-width: 959px){
  .Jinfeng{ width: 500px; margin: 0 auto;}
}
.Jinfeng >div > div{ width: calc(100% - 90px); margin-left: 90px;}
.Jinfeng h5,.Jinfeng p{ margin: 0;}
.Jinfeng h5 span{ padding: 0 20px; margin-bottom: 10px; display: inline-block; position: relative; color: #4e6689; font-size: 20px; font-weight: bolder;}
.Jinfeng h5 span::before,.Jinfeng h5 span::after{ content: ""; width: 11px; height: 28px; display: block;
  position: absolute; top: 1px;
  background-image: url(../images/tassel.svg); background-size: contain;}
.Jinfeng h5 span::before{ left: 0;}
.Jinfeng h5 span::after{ right: 0; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1);}

@media only screen and (max-width: 960px){
  footer{ padding-bottom: 70px;}
}
@media only screen and (max-width: 639px){
  footer{ padding-bottom: 130px;}
}

/*======================================================================== 
	QuickLink
  ========================================================================*/
.quickLink{ width: 63px; margin-top: -269px; position: fixed; top: 50%; right: 15px; z-index: 5;}
.quickLink > div{ 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; z-index: 5;
-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;}


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