/*======================================================================== 
	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;}

a.logo{ width: 150px; display: inline-block; z-index: 10;
  position: absolute; top: 50px; left: 40px;}
@media screen and (min-width: 768px){
  a.logo{ width: 200px; top: 30px; left: 30px;}
}

.mainPic{ text-align: center;
  background-image: url(../images/mainPic_bg.jpg); background-position: center center;
  background-repeat: no-repeat; background-size: cover;}
.mainPic > div{ position: relative; display: inline-block;}
@media screen and (max-width: 960px){
  .mainPic{ background-image: none;}
}

#wrapper{ flex-grow: 1; /*可佔滿垂直剩餘的空間*/}
.container{
	width: 100%; max-width: 1200px; box-sizing: border-box;
	margin: 0 auto; padding: 0 15px; margin-top: -120px; position: relative; z-index: 4;}
@media screen and (max-width: 639px){.container{margin-top: -100px;}}

.subtitle{width: 280px; height: auto; position: relative; display: inline-block; margin-bottom: 10px;}
@media screen and (max-width: 819px){.subtitle{width: 40%;min-width: 180px;}} 
/* Table */
table{width: 100%; font-size: 22px; text-align: center; line-height: 24px; color: #333;
    border-collapse: separate; border-spacing: 0;}
.table-w-15{width: 15%;}
.table-w-42{width: 42.5%;}
table th, table td{padding: 15px; border-top:1px solid #7f8080; border-right:1px solid #7f8080;
    background-color: #fff; vertical-align: middle;}
table th{color: #fff; background: linear-gradient(to bottom,#645b27,#887e2d,#645b27); border-right: 1px solid #fff;}
table .tdTitle{background: linear-gradient(to bottom,#225b66,#077672,#225b66);
    border-top: 1px solid #fff; color: #fff; vertical-align: middle; border-left:1px solid #7f8080;}
table tr:last-child td {border-bottom:1px solid #7f8080;}
table .brt{border-top: 1px solid #7f8080;}
table .brr-0{border-right: 0;}
@media only screen and (max-width: 639px){
    table{font-size: 15px;line-height: 20px;}
    table th, table td{padding: 8px;}
}

.uk-text-large{ line-height: 140%; margin-top: 10px;}
@media only screen and (max-width: 639px){
  .uk-text-large{ margin-left: 46px;}
}


.title{height: 60px; width: auto;}
@media only screen and (max-width: 639px){.title{height: 40px;}}

/* gifts */
.giftgroup .gift{padding: 30px;
  background-image: url(../images/bg.svg) ,linear-gradient(to bottom,#fff,#e5d9c6);
  background-position: center;background-repeat: no-repeat;background-size: cover;
  border-bottom: 2px solid #887e2d;} 
.giftgroup .gift span{ display: block;}
.giftContent{margin-top: 15px; text-align: center;font-size: 20px; color: #054750; line-height: 130%;}
.giftRemark{font-size: 15px; text-align: center; margin-top: 5px;}
@media only screen and (max-width: 639px){.giftgroup .gift{padding: 15px;}.giftContent{font-size: 18px;}}

/* Discount */
.discount img{ width: 80px; margin-right: 10px;}
.discount p{ margin: 0; display: inline-block; font-size: 24px; line-height: 130%; vertical-align: middle;}
@media (min-width: 640px) and (max-width: 960px){
  .discount{ text-align: center;}
  .discount img{ margin: 0;}
  .discount p{ margin-top: 15px; display: block;}
}
@media(max-width: 639px){
  .discountBox{flex-direction: column; padding-top: 0;}
  .discountBox>div{display: flex;justify-content: center;}
  .discount{width: 280px;}
  .discount p{font-size: 18px;}

}

/* Footer */
footer{ padding: 40px 0 30px 0; background: #e1f6f9; color: #333;}
footer .uk-width-1-1{ margin-top: -30px !important;}
@media screen and (max-width: 959px){
  footer .uk-width-1-1{ margin-top: -15px !important;}
}
/* 專案說明 */
.illustrate{ max-width: 1200px; margin: 0 auto; padding-right: 15px;}
.illustrate h4{ margin-bottom: 10px; font-size: 16px; color: #094852; font-weight: bold;}
.illustrate ul{ margin-top: 10px; margin-bottom: 0; padding-left: 20px;}
.illustrate li{ margin: 8px 0; list-style: decimal; font-size: 15px;}

.Jinfeng{ position: relative; color: #666;}
.Jinfeng > img{ width: auto; height: 170px; position: absolute; bottom: 50%; left: 55px; margin-bottom: -75px;}
.Jinfeng > div{ width: 100%; min-height: 60px; padding: 15px; margin-top: 10px; margin-bottom: 25px !important;
  box-sizing: border-box; font-size: 15px; background: #fff; border: solid 1px #c4d0e3; border-radius: 8px;}
@media screen and (max-width: 639px){
  .Jinfeng > img{ left: 50px;}
}
@media screen and (min-width: 640px) and (max-width: 959px){
  .Jinfeng > div{ min-height: 130px; text-align: center;}
}
.Jinfeng >div > div{ width: calc(100% - 95px); margin-left: 95px;}
.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: 13px; 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: 767px){
  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;}


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