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

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{ width:100%; height:100%; background-image: url(../images/bg_body.jpg);}
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{ z-index: 5; flex-grow: 1; /*可佔滿垂直剩餘的空間*/}

.mainPic{ width: 100%; text-align: center; position: relative;
  background-image: url(../images/bg.png); background-position: center center;}
.mainPic picture{ width: 100%; max-width: 1100px;}
.mainPic > div{ position: relative; display: inline-block;}
@media only screen and (max-width: 768px){
  .mainPic{ background-image: none;}
}

.logo{ position: absolute; top: 15px; left: 15px;}
@media (max-width: 960px){
  .logo{ width: 28%;}
}

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

.subDiv{ width: 120px; display: inline-block; position: absolute; top: -40px; left: -13px;}
.subWord{ margin-left: 85px;}
.subWord img{ width: 245px;}
.subWord p{ margin: 0 0 15px 0; color: #4d4d4d; line-height: 130%; font-size: 19px;}
@media (max-width: 479px){
  .margin-remove-left{ margin-left: 0;}
}
@media (min-width: 640px){
  .subDiv{ width: 200px; top: -70px; left: -25px;}
  .subWord{ margin-left: 150px;}
  .subWord img{ width: 300px;}
  .subWord p{ font-size: 24px;}
}
@media (min-width: 960px){
  .subDiv{ top: -100px; left: -30px;}
  .subWord img{ width: auto;}
  .subWord p{ margin-top: 15px; font-size: 30px;}
}

.gift{ display: flex; align-items: center;}
.gift .giftPic{ width: 200px; margin: 0 auto;}
.gift .theWord{ width: calc(100% - 215px); margin-left: 10px;}
.gift .theWord h5{ margin: 0; padding: 0 0 10px 0; position: relative; border-bottom: solid 3px #865e46;
  font-size: 20px; color: #754c24; font-weight: bolder;}
.gift .theWord h5::before{ content: ""; width: 35px; height: 3px; display: block; background: #649c32;
  position: absolute; left: 0; bottom: -3px;}
.gift .theWord p{ margin: 0; padding: 10px 0 10px 5px; font-size: 16px; color: #754c24;}
.gift .giftPic{ padding: 0 0 15px 0; text-align: center;}
.gift .giftPic img{ width: auto; height: 170px;}
@media (max-width: 479px){
  .gift .giftPic{ width: 125px;}
  .gift .theWord{ width: calc(100% - 125px);}
  .gift .giftPic img{ width: auto; height: 110px;}
}
@media (min-width: 640px){
  .gift .theWord h5{ padding: 0 0 15px 0; font-size: 24px;}
  .gift .theWord p{ padding: 15px 0 15px 5px; font-size: 18px;}
}
@media (min-width: 960px){
  .gift,.gift > div{ display: block;}
  .gift .theWord{ width: 100%; margin: 0;}
  .gift .giftPic img{ width: auto; height: 170px;}
}

.feature .uk-card{ padding: 15px 20px;
  border: solid 2px #629633; border-radius: 10px; background: rgba(255,255,255,0.5)}
.feature .uk-card p{ margin: 0 0 10px 0; font-size: 18px; font-weight: bolder; color: #444;}
.feature .uk-card h5{ margin: 0; padding-top: 10px; border-top: solid 1px #629633;
  font-size: 24px; color: #5e3819; font-weight: bolder;}
.feature .uk-card .theWord{ width: calc(100% - 100px); display: inline-block;}
.feature .hasRosette{ padding: 15px 20px; position: relative; text-align: center;}
.feature .hasRosette::before{ content: url(../images/rosette1.svg); position: absolute; top: -25px; left: -29px;}
.feature .hasRosette::after{ content: url(../images/rosette2.svg); position: absolute; bottom: -12px; right: -7px;}
.feature .hasRosette .theWord{ width: 100%; display: block;}
.feature .hasRosette .theWord p{ margin: 15px 0 10px 0;}
@media (min-width: 960px){
  .feature .hasRosette{ height: 290px; padding-top: 40px; box-sizing: border-box;}
}

.ctaInfo{ padding: 10px 10px 10px 20px; overflow: hidden; background: rgba(200,204,132,0.3); border-radius: 10px; font-size: 18px;}
.ctaInfo b{ color: #c92a2a;}
.ctaInfo .btn{ padding: 8px 0; display: block; color: #000; text-align: center; font-weight: bolder;
  background: #feda00; border-radius: 5px;
background: -moz-linear-gradient(left,  #feda00 0%, #f4a000 100%);
background: -webkit-linear-gradient(left,  #feda00 0%,#f4a000 100%);
background: linear-gradient(to right,  #feda00 0%,#f4a000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda00', endColorstr='#f4a000',GradientType=1 );}
.ctaInfo .btn span{ margin-right: 10px; margin-top: -5px; display: inline-block; vertical-align: middle;}
.ctaInfo .btn span::before{ content: ""; width: 24px; height: 24px; display: block;
  background-image: url(../images/chat.png); background-size: contain; background-repeat: no-repeat;}
@media (max-width: 768px){
  .ctaInfo{ padding: 10px;}
  .uk-width-small\@s { margin-top: 10px !important;}
}

footer{ padding: 60px 0 20px 0; margin-top: -20px; border-bottom: solid 15px #62361e;}
/* 專案說明 */
.illustrate{ max-width: 1000px; margin: 0 auto; padding: 0 30px;}
.illustrate h4{ font-size: 16px; color: #754c24; font-weight: bold;}
.illustrate ul{ padding-left: 20px;}
.illustrate li{ margin: 8px 0; list-style: decimal; font-size: 15px;}

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

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


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