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

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{ width:100%; height:100%; background: #0A1927;}
body {
  width: 100%; height: 100%; margin: 0;
  font-family: nobel,'Helvetica', '微軟正黑體', Verdana, 'Times New Roman', Times, Georgia, '新細明體', PMingLiU, NSimSun, serif;
  font-size: 13px; line-height: 160%; color: #fff; 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;} /*可佔滿垂直剩餘的空間*/

/* KV */
/* ========================================================== */

.mainPic{width: 100%; max-width: 1920px; text-align: center; position: relative;
  background-image: url(../images/bg.jpg); background-position: center center; background-size: cover;}
.mainPic::before {content: ""; width: 100%; height: 90px; position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(14, 28, 36, 0) 0%, rgba(14, 28, 36, 1) 95%); background-size: cover;
background-repeat: no-repeat; background-position: center; z-index: 1;
} 
.mainPic picture{ width: 100%; max-width: 1000px;}
.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: 1000px; box-sizing: border-box; margin: 0 auto; padding: 0 15px;}


/* gift */
/* ========================================================== */
.giftBox{ width: 90%; max-width: 800px; margin: 0 auto; overflow: hidden; border-radius: 16px; background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0.5) 100%);border:solid 2px #fff}
.giftBox h2{text-align: center; color:#042021; margin: 20px 0; position: relative;}
.giftBox h2 span{ font-size: 3rem; margin: 4px;}
.giftBox h2::before,.giftBox h2::after{content:""; position: absolute; width: calc(50% - 160px); height: 1px; background: #042021; top:60%;}
.giftBox h2::before{left: 30px;}
.giftBox h2::after{right: 30px;}
.giftBox .uk-grid div span{ display: block; text-align: center; font-size: 24px; color: #042021; font-weight: bolder;}
.giftBox .uk-grid > div:first-child{ border-right: solid 2px #E3E5E5;}
@media (max-width: 767px){
  .giftBox h2 img{ max-width: 240px;}
  .giftBox .uk-grid > div:first-child{ padding-bottom: 30px; border: none;border-bottom:solid 2px #E3E5E5;}
}
@media (max-width: 575px){
  .giftBox h2::before,.giftBox h2::after{display: none;}
}
.giftBox .uk-grid div span img{ width: 100%; max-width: 110px; margin-bottom: 20px;}
.giftBox .uk-grid div span small{ font-size: 16px; color: #042021;}
.giftBox .customerBox{margin:20px 0;}
.giftBox .customerBox picture{width: 170px; height: auto;margin-right: 16px;}
.customerContent p{font-size: 24px; color: #042021; font-weight: bolder; margin: 0;}
.customerContent>div{font-size: 16px; margin: 0 20px; z-index:1; position: relative;}
.customerContent>div::before{content: "";width: 32px; height: 32px; border-radius: 99px; background: #042021; position: absolute;top:50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}
.customerContent p,.customerContent>div{display: inline-block;}
@media (max-width: 767px){
  .customerGroup{background: rgba(33,54,66,0.8); margin-top: 16px;}
  .giftBox .customerBox{flex-direction: column;}
  .giftBox .customerBox picture{width: 220px; margin-bottom: 16px;}
.customerContent p,.customerContent>div{display: block;text-align: center; color: #fff;}
  .customerContent>div{margin: 12px 0;}
}

/* serve */
/* ========================================================== */
.title{text-align: center; background: linear-gradient(to right,#BACEE4, #E1EDF9,#fff); background-clip: text;  -webkit-background-clip: text; color: transparent; font-weight: bolder; margin:30px 0 12px 0;} 
.serveBox{width: 90%; max-width: 800px; margin: 0 auto; background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0.5) 100%);border:solid 2px #fff;border-radius: 16px;padding: 16px;}
.serveBox img{width: 60px; height: 60px;margin-right: 10px;}
.uk-text-large{color: #042021; font-weight: bolder; margin:0;}
@media (max-width: 959px){
  .uk-text-large{font-size: 20px;}
}
@media (max-width: 767px){
  .serveBox>div>div{width: 200px;}
}

/* discount */
/* ========================================================== */
.discountBox{padding-top: 16px;}
.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{padding-top: 16px;width: 280px;}
  .discount p{display: inline-block;}

}

.ctaInfo{ padding: 5px; overflow: hidden; background: rgba(90, 91, 100, 0.8); font-size: 18px; color: #fff; border-radius: 16px;}
.ctaInfo b{ color: #81b5d3;}
.ctaInfo .btn{ padding: 15px 0 12px 0; display: block; color: #000; text-align: center; font-weight: bolder;border-radius: 12px;
  background: #81b5d3;}
.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){
  .uk-width-small\@s { margin-top: 10px !important;}
}
/* footer */
/* ========================================================== */
footer{ padding: 60px 0 20px 0; margin-top: 40px;background: #414a4d;}
/* 專案說明 */
.illustrate{ max-width: 1200px; margin: 0 auto; padding-right: 15px;}
.illustrate h4{ font-size: 16px; color: #fff; font-weight: bold;}
.illustrate li{ margin: 8px 0; list-style: decimal; font-size: 15px; color: #fff;}

/* 金峰獎 */
.Jinfeng{ position: relative;}
.Jinfeng > img{ width: auto; height: 170px; position: absolute; bottom: 5px; left: 35px;}
.Jinfeng > div{ 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 (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);}
.Jinfeng p{ color: #666;}

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

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


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