/*======================================================================== 
	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: 10px; left: 15px;}
@media screen and (min-width: 768px){
  a.logo{ width: 200px; top: 30px; left: 30px;}
}

.mainPic{ width: 100%; margin: 0 auto; position: relative; text-align: center;
  background-image: url(../images/bg.jpg); 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: #eaf4fd;
background: -moz-linear-gradient(top,  #eaf4fd 80%, #c7e0f7 100%);
background: -webkit-linear-gradient(top,  #eaf4fd 80%,#c7e0f7 100%);
background: linear-gradient(to bottom,  #eaf4fd 80%,#c7e0f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf4fd', endColorstr='#c7e0f7',GradientType=0 );}
.container{
  width: 100%; max-width: 1000px; box-sizing: border-box; position: relative;
  margin: 0 auto; padding: 0 15px 10px 15px; z-index: 5;
  background-image: url(../images/shadow.png); background-repeat: no-repeat; background-position: center bottom;
}

.feature{ margin-top: -10px; position: relative;}
.feature::after{ content: ""; width: 10px; height: 130px; display: inline-block;
  position: absolute; top: -2px; left: -15px; transform:skewY(20deg);
background: rgb(69,58,175);
background: -moz-linear-gradient(45deg,  rgba(69,58,175,1) 0%, rgba(46,185,255,1) 100%);
background: -webkit-linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
background: linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#453aaf', endColorstr='#2eb9ff',GradientType=1 );}
.feature .carSide{ position: absolute; left: 50%; bottom: 0; margin-left: -175px;}
.feature .featureList{ width: 100%; padding: 10px 10px 225px 10px; box-sizing: border-box;
  color: #fff; font-size: 18px;
background: rgb(69,58,175);
background: -moz-linear-gradient(45deg,  rgba(69,58,175,1) 0%, rgba(46,185,255,1) 100%);
background: -webkit-linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
background: linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#453aaf', endColorstr='#2eb9ff',GradientType=1 );}
.feature .featureList .hr{ padding: 15px 20px; border-bottom: solid 1px rgba(255,255,255,0.5);}
.feature .featureList > div > div:nth-child(4) .hr{ border-bottom: none;}
.feature .featureList h3{ margin-bottom: 10px; padding-left: 40px; position: relative;}
.feature .featureList h3::before{ content: ""; width: 30px; height: 30px; display: inline-block;
  position: absolute; left: 0; top: 50%; margin-top: -15px; background-image: url(../images/check.svg); background-size: cover;}
.feature .featureList p{ margin: 0; padding-left: 40px;}
@media screen and (min-width: 540px){
  .feature .featureList .hr{ padding: 20px;}
  .feature .featureList > div > div:nth-child(odd) .hr{ border-right: solid 1px rgba(255,255,255,0.5);}
  .feature .featureList > div > div:nth-child(3) .hr{ border-bottom: none;}
}
@media screen and (min-width: 768px){
  .feature .featureList{ font-size: 22px;}
  .feature .featureList h3{ font-size: 30px;}
}
@media screen and (min-width: 960px){
  .feature{ margin-top: -20px;}
  .feature::after{ top: auto; left: auto; right: -19px; bottom: -2px;}
  .feature .carSide{ left: 0; top: -10px; margin-left: 0;}
  .feature .featureList{ width: calc(100% - 75px); margin-left: 75px; padding: 10px 10px 10px 280px;}
}

.giftBox .giftTitle img{ width: 85%; max-width: 350px; margin: 0 15px;}
.giftInfo{ min-height: 172px; padding: 15px 0; text-align: center;
background: -moz-linear-gradient(20deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 75%);
background: -webkit-linear-gradient(20deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 75%);
background: linear-gradient(20deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#40ffffff',GradientType=1 );}
.giftInfo img{ width: 100px;}
.giftInfo p{ margin: 10px 10px 0 10px; color: #000014; font-size: 18px; line-height: 130%;}
.giftInfo small{ font-size: 15px; color: #000014;}

@media screen and (min-width: 480px){
  .giftBox .giftTitle span::before,.giftBox .giftTitle span::after{ content: ""; width: calc((100% - 410px)/2); height: 3px; display: inline-block;
    background: rgba(69,58,175,0.5);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#453aaf', endColorstr='#2eb9ff',GradientType=1 );}
  .giftBox .giftTitle span::before{
  background: -moz-linear-gradient(right,  rgba(69,58,175,0.5) 0%, rgba(46,185,255,0) 100%);
  background: -webkit-linear-gradient(right,  rgba(69,58,175,0.5) 0%,rgba(46,185,255,0) 100%);
  background: linear-gradient(to left,  rgba(69,58,175,0.5) 0%,rgba(46,185,255,0) 100%);}
  .giftBox .giftTitle span::after{
  background: -moz-linear-gradient(left,  rgba(69,58,175,0.5) 0%, rgba(46,185,255,0) 100%);
  background: -webkit-linear-gradient(left,  rgba(69,58,175,0.5) 0%,rgba(46,185,255,0) 100%);
  background: linear-gradient(to right,  rgba(69,58,175,0.5) 0%,rgba(46,185,255,0) 100%);}
}
@media screen and (min-width: 768px){
  .giftBox .giftTitle img{ margin: 0 30px;}
  .giftBox p{ font-size: 24px; }
}

.discount{ padding: 25px 0; position: relative;
background: -moz-linear-gradient(10deg,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 100%);
background: -webkit-linear-gradient(10deg,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
background: linear-gradient(10deg,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#40ffffff',GradientType=1 );}
.discount .ribbon{ text-align: center;}
.discount .ribbon::before{ content: ""; width: 210px; height: 40px; display: inline-block;
  position: absolute; left: 50%; top: 0; margin-left: -105px; transform: perspective(40px) rotateX(-5deg);
  background: rgb(69,58,175);
background: -moz-linear-gradient(45deg,  rgba(69,58,175,1) 0%, rgba(46,185,255,1) 100%);
background: -webkit-linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
background: linear-gradient(45deg,  rgba(69,58,175,1) 0%,rgba(46,185,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#453aaf', endColorstr='#2eb9ff',GradientType=1 );}
.discount .ribbon span{ width: 220px; height: 40px; margin-top: -20px; display: inline-block; z-index: 5; position: relative;
  font-size: 36px; font-weight: bolder; color: #fff; line-height: 150%; text-align: center;}
.discount .ribbon span::before{ content: attr(data-storke); position: absolute; left: 50%; margin-left: -72px; z-index: -1;
  -webkit-text-stroke: 5px #3a79d7; text-stroke: 5px #3a79d7; text-shadow: 0 0 10px #00329b;}

.discount .icon{ margin: 10px auto 5px auto; display: block; text-align: center;}
.discount .icon img{ width: 80%;}
.discount h4,.discount p{ margin: 7px 0 0 0; text-align: center; line-height: 150%;}
.discount h4{ font-size: 20px; color: #000014;}
.discount p{ font-size: 18px; color: #666;}
.discount p b{ font-size: 24px; color: #a90000; font-weight: normal;}
@media screen and (min-width: 960px){
  .discount{ padding: 0 20px 20px 20px;}
  .discount .ribbon::before{ width: 40px; height: 210px; 
    left: 2px; top: 50%; margin-top: -105px; margin-left: 0; transform: perspective(40px) rotateY(10deg);}
  .discount .ribbon span{ width: 40px; height: auto; margin-top: 50px; line-height: 110%;}
  .discount .ribbon span::before{ width: 40px; left: 0; margin-left: 0;}
  .discount .icon{ margin: 30px auto 5px auto;}
  .discount h4{ font-size: 24px;}
  .discount p{ font-size: 20px;}
}

footer{ padding: 40px 0 30px 0; background: #eaf4fd;}
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: 30px;}
.illustrate h4{ margin-bottom: 10px; font-size: 16px; color: #000014; 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;}


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