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

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{ width:100%; height:100%;}
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.png); background-size: cover; background-position: center center;}
.mainPic > div{ position: relative; display: inline-block;}
@media screen and (max-width: 959px){
  .mainPic{ background-image: none;}
}

#wrapper{ flex-grow: 1; /*可佔滿垂直剩餘的空間*/
   background-image: url(../images/bg_crown.png); background-color: #f3ece0;
}
.container{
  width: 100%; max-width: 1000px; box-sizing: border-box; position: relative;
  margin: 0 auto; padding: 0 15px; z-index: 5;
background: -moz-linear-gradient(left,  rgba(243,236,224,0) 0%, rgba(243,236,224,0.75) 10%, rgba(243,236,224,0.75) 90%, rgba(243,236,224,0) 100%);
background: -webkit-linear-gradient(left,  rgba(243,236,224,0) 0%,rgba(243,236,224,0.75) 10%,rgba(243,236,224,0.75) 90%,rgba(243,236,224,0) 100%);
background: linear-gradient(to right,  rgba(243,236,224,0) 0%,rgba(243,236,224,0.75) 10%,rgba(243,236,224,0.75) 90%,rgba(243,236,224,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3ece0', endColorstr='#00f3ece0',GradientType=1 );}

.planList{ width: 100%; max-width: 1100px; box-sizing: border-box; position: relative;
  margin: 35px auto 0 auto; padding: 0 15px; z-index: 5;
background: -moz-linear-gradient(left,  rgba(243,236,224,0) 0%, rgba(243,236,224,0.75) 10%, rgba(243,236,224,0.75) 90%, rgba(243,236,224,0) 100%);
background: -webkit-linear-gradient(left,  rgba(243,236,224,0) 0%,rgba(243,236,224,0.75) 10%,rgba(243,236,224,0.75) 90%,rgba(243,236,224,0) 100%);
background: linear-gradient(to right,  rgba(243,236,224,0) 0%,rgba(243,236,224,0.75) 10%,rgba(243,236,224,0.75) 90%,rgba(243,236,224,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3ece0', endColorstr='#00f3ece0',GradientType=1 );}
@media screen and (min-width: 960px){
  .planList{ margin-top: 20px;}
}

.planBox{ padding: 0 15px; margin-top: -80px; position: relative;}
.planBox::before,.planBox::after{ content: ""; width: 25px; height: 47px; position: absolute; top: 60px;
  background-image: url(../images/ribbon_short.svg); background-size: cover;}
.planBox::before{ left: -10px;
  background-position: right center;
  -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg);
  transform:rotate(180deg);}
.planBox::after{ right: -10px;
  background-position: right center;}
@media screen and (max-width: 767px){
  .planList div div:last-child .planBox{ margin-top: -10px;}
}
@media screen and (max-width: 479px){
  .planList div div:last-child .planBox{ margin-top: -25px;}
}
@media screen and (min-width: 960px){
  .planBox{ padding: 0 50px;}
  .planBox::before,.planBox::after{ width: 35px;}
  .planBox::before{ left: 15px;}
  .planBox::after{ right: 15px;}
}
@media screen and (min-width: 768px) and (max-width: 959px){
  .planList div div:first-child .planBox::after,
  .planList div div:last-child .planBox::before{ content: none;}
}
.planBox img{ width: 100%; height: auto;}
.planBox h3{ position: relative; z-index: 10;}
.planBox h3 span{ width: 100%; padding-top: 20px; display: block;
  font-size: 36px; color: #724527; font-weight: bolder; text-align: center;}
.planBox h3 span::before{ content: ""; width: 177px; height: 20px; margin-left: -88px; display: block;
  position: absolute; left: 50%; top: 30px;
  background-image: url(../images/planBar.svg); background-repeat: no-repeat; background-position: center top;}
.planBody{ padding: 85px 25px 0 25px; margin: -95px 0 0 0;
  background-image: url(../images/planBox2.svg); background-size: 100%; font-size: 16px; color: #333;}
.uk-table{ margin: 0; line-height: 150%;}
.uk-table th{ width: 80px; padding: 10px 0 5px 0;
  background: #b08157; border-bottom: solid 2px #fff;
  text-align: center; color: #fff; font-weight: normal; font-size: 16px;}
.uk-table td{ padding: 10px 5px 3px 5px; text-align: center;
  border-bottom: solid 1px rgba(176,129,87,0.3);}
@media screen and (min-width: 960px){
  .planBody{ font-size: 18px;}
  .uk-table th{ width: 100px; font-size: 18px;}
}

.giftBox{ border-radius: 20px; padding-top: 40px;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}
.giftBox .giftTitle img{ width: 235px;}
.giftBox p{ margin-top: 25px; margin-bottom: 10px; color: #000; font-size: 18px;}
.giftBox img{ width: 90%; margin-bottom: -12%;}
@media screen and (min-width: 960px){
  .giftBox p{ font-size: 24px; }
  .giftBox img{ width: 65%;}
}
@media screen and (min-width: 768px){
  .giftBox img{ margin-bottom: -17%;}
}
@media screen and (max-width: 479px){
  .giftBox p{ font-size: 16px; }
}

.discount{ padding-top: 25px; border-radius: 20px;
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );}
.discount .ribbon{ width: 220px; height: 62px; padding: 10px 10px 10px 40px; margin-bottom: 10px;
  box-sizing: border-box; display: inline-block; position: relative; z-index: 5;
  font-size: 32px; font-weight: bolder; color: #fff; line-height: 150%;
  background-image: url(../images/ribbon_hor.svg);}
.discount .ribbon::before{ content: attr(data-storke); position: absolute; z-index: -1;
  -webkit-text-stroke: 5px #920611; text-stroke: 5px #920611;}
.discount .icon{ margin: 0 auto 5px auto; display: inline-block; text-align: center;
  background-image: url(../images/bg_box2.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.discount .icon img{ width: 80%;}
.discount h4,.discount p{ margin: 7px 0 0 0; text-align: center; color: #000; line-height: 150%;}
.discount h4{ font-size: 20px;}
.discount p{ font-size: 18px;}
.discount p b{ font-size: 28px; color: #a90000; font-weight: normal;}
@media screen and (min-width: 960px){
  .discount{ padding: 0 20px 0 25px;}
  .discount .ribbon{ width: 62px; height: 220px; padding: 40px 10px 10px 10px; background-image: url(../images/ribbon.svg);
    text-align: center; line-height: 110%;}
  .discount .ribbon::before{ width: 45px; left: 50%; margin-left: -22px;}
  .discount .icon{ margin: 30px auto 5px auto;}
  .discount h4{ font-size: 24px;}
  .discount p{ font-size: 20px;}
  .discount p b{ font-size: 30px;}
}

footer{ padding: 40px 0 30px 0; background: #b08157; color: #fff;}
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: #ffffa6; 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;}

.yushan{ position: relative; color: #666;}
.yushan > img{ width: auto; height: 170px; position: absolute; bottom: 50%; left: 55px; margin-bottom: -75px;}
.yushan > div{ width: 100%; min-height: 60px; padding: 15px; margin-top: 10px; margin-bottom: 25px !important;
  box-sizing: border-box; font-size: 15px; background: #fcfaed; border: solid 1px #edcd59; border-radius: 8px;}
@media screen and (max-width: 639px){
  .yushan > img{ left: 50px;}
}
@media screen and (min-width: 640px) and (max-width: 959px){
  .yushan > div{ min-height: 130px; text-align: center;}
}
.yushan >div > div{ width: calc(100% - 95px); margin-left: 95px;}
.yushan h5,.yushan p{ margin: 0;}
.yushan h5 span{ padding: 0 20px; margin-bottom: 10px; display: inline-block; position: relative; color: #7e3a20; font-size: 20px; font-weight: bolder;}
.yushan h5 span::before,.yushan h5 span::after{ content: ""; width: 13px; height: 28px; display: block;
  position: absolute; top: 1px;
  background-image: url(../images/tassel.svg); background-size: contain;}
.yushan h5 span::before{ left: 0;}
.yushan 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;}


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