/*======================================================================== 
	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; /*使物件垂直排列*/
  background-color: #701415;
}

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: 30px; right: 50%; margin-right: -75px;}
@media screen and (min-width: 768px){
  a.logo{ width: 200px; margin-right: -100px;}
}
@media screen and (min-width: 1200px){
  a.logo{ margin-right: calc((1200px/2) - 250px);}
}

#wrapper{ flex-grow: 1; /*可佔滿垂直剩餘的空間*/
  background: radial-gradient(farthest-corner circle at 50% 5%, #c4140c 0%, #86100c 63% 0%, #701415 100%);}
#wrapper::before,#wrapper::after{ content: ""; width: 200px; height: 250px; display: block; position: absolute;
  background-image: url(../images/bg_point.png); background-size: contain;}
#wrapper::before{ right: 0; top: -100px;}
#wrapper::after{ left: -50px; top: 38%; transform:rotate(180deg); opacity: 0.75;}
@media screen and (min-width: 640px){
  #wrapper::before,#wrapper::after{ width: 320px; height: 400px;}
  #wrapper::before{ top: -70px;}
  #wrapper::after{ left: -150px; top: 28%;}
}
@media screen and (min-width: 1200px){
  #wrapper::before,#wrapper::after{ width: 400px; height: 500px;}
  #wrapper::before{ top: -50px;}
  #wrapper::after{ left: 0; top: 50%;}
}

/* 主視覺 */
.mainVisual{ padding-top: 20%; overflow: hidden; position: relative; z-index: 5;}
.mainVisual .title{ width: 80%; max-width: 950px; margin: 0 auto; text-align: center;}
  .title .separatorLine{ margin: 5% auto 0 auto; position: relative; text-align: center;}
  .title .separatorLine b{ height: 1.75em; padding: 0.6em 25px 0 25px; display: inline-block; box-sizing: border-box; position: relative; z-index: 5;
    background: #f4d87e; border-radius: 25px; color: #b8130c; font-size: 24px;}
  .title .separatorLine::before,.title .separatorLine::after{ content: ""; width: 30%; height: 3px; position: absolute; top: 50%; margin-top: -2px;
    background-image: url(../images/title_line.png); background-size: cover;}
    .title .separatorLine::before{ left: 0;}
    .title .separatorLine::after{ right: 0; transform:rotate(180deg);}
  .title .subTitle{ width: 100%; margin: 0 auto;}

.mainVisual::before,.mainVisual::after{ content: ""; position: absolute; z-index: 5;
  width: 92px; height: 225px;
  background-image: url(../images/bg_lantern.png); background-size: contain; background-repeat: no-repeat; background-position: center top;}
.mainVisual::before{ top: -25%; right: 50%; margin-right: calc(50% - 70px);}
.mainVisual::after{ top: -13%; left: 50%; margin-left: calc(50% - 70px);}

.mainVisual .mainPic{ width: 100%; margin: -3% auto 10px auto; padding-bottom: 40%; position: relative; z-index: 8;
  background-image: url(../images/mainPic.png); background-repeat: no-repeat; background-size: auto 100%; background-position: center top;}

@media screen and (min-width: 768px){
  .mainVisual{ padding-top: 15%;}
    .title .separatorLine{ width: 85%; margin: 4% auto -1.5% auto;}
    .title .separatorLine::before,.title .separatorLine::after{ width: 42%;}
    .title .subTitle{ width: 90%;}
  .mainVisual::before,.mainVisual::after{ width: 148px; height: 360px;}
  .mainVisual::before{ top: -40%; margin-right: calc(50% - 110px);}
  .mainVisual::after{ top: -2%; margin-left: calc(50% - 90px);}
}
@media screen and (min-width: 1200px){
  .mainVisual{ padding-top: 7%;}
    .title .separatorLine{ margin: 2.5% auto -2% auto;}
    .title .subTitle{ width: 75%;}
  .mainVisual::before,.mainVisual::after{ width: 185px; height: 450px;}
  .mainVisual::before{ margin-right: calc((1200px/2) - 100px);}
  .mainVisual::after{ margin-left: calc((1200px/2) - 130px);}
  .mainVisual .mainPic{ width: 1200px; height: 420px; padding-bottom: 0; background-size: contain;}
}

/* 專案方案 */
.planList{ margin: 0 auto; position: relative; z-index: 10;}
.planList .uk-grid{ width: 100%; max-width: 1200px; margin: 0 auto;}

.planBox{ position: relative; z-index: 5; background-repeat: no-repeat;}
.planBox > div{ position: absolute; top: 0;}
.b1{ background-image: url(../images/planBox_l.png);}
.b2{ background-image: url(../images/planBox_r.png);}
.planBox h3{ margin: 4% 0 1% 0;}
.planBox .gold,.planBox .info{ position: absolute;}
.planBox .info span{ padding: 0.35em 12px 1px 12px; margin: 0 0 12px 0; display: inline-block;
  background: rgba(255,255,255,0.5); border-radius: 25px; color: #b20602; font-size: 18px; font-weight: bold; line-height: 1.4em;}
.planBox .info p{ padding: 0 10px; margin: 0; color: #fff; 
  text-shadow: 1px 1px 0 #e32f31, -1px -1px 0 #e32f31, -1px 1px 0 #e32f31, 1px -1px 0 #e32f31, 1px 1px 0 #e32f31;}

@media screen and (max-width: 767px){
  .planBox{ padding-bottom: 125%; background-size: 120% auto;}
  .planBox > div{ width: 77.5%;}
  .b1{ margin-bottom: -15%; background-position: top right -17%;}
  .b1 > div{ right: 11%;}
  .b2{ margin-bottom: -30%; background-position: top left -17%;}
  .b2 > div{ left: 11%;}
  .planBox .gold{ top: 113%;}
  .planBox .info{ top: 143%;}
  .planBox .info p{ font-size: 18px;}
}
@media screen and (min-width: 768px){
  .planBox{ padding-bottom: 115%; background-size: 110% auto;}
  .planBox > div{ width: 73%;}
  .b1{ margin-bottom: -30%; background-position: top right 0%;}
  .b1 > div{ right: 6%;}
  .b2{ margin-bottom: -30%; background-position: top left 0%;}
  .b2 > div{ left: 6%;}
  .planBox .gold{ top: 110.5%;}
  .planBox .info{ top: 138%;}
  .planBox .info p{ font-size: 13px;}
}
@media screen and (min-width: 1200px){
  .planBox{ padding-bottom: 111.28%; background-size: cover;}
  .planBox > div{ width: 65%;}
  .b1 > div{ right: 6%;}
  .b2 > div{ left: 6%;}
  .planBox .gold{ top: 113%;}
  .planBox .info{ top: 143%;}
  .planBox .info p{ font-size: 18px;}
}

.planBox h3{ position: relative; z-index: 10;}


footer{ padding: 0 0 30px 0; margin-top: 90px; position: relative;
  background: linear-gradient(to top, #c0182c 30% 0%, #eb422c 100%);}
footer::before{ content: ""; width: 100%; height: 115px; display: block;
  position: absolute; top: -115px; left: 0; z-index: 1;
  background: linear-gradient(to top, #ff743d 0%, #f0423e 43% 39%, #d8292c 100%), linear-gradient(to top, #ff743d 30% 0%, #eb422c 100%);
}
footer .uk-width-1-1{ margin-top: -30px !important;}
@media screen and (max-width: 959px){
  footer .uk-width-1-1{ margin-top: -15px !important;}
}

.discount{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 5;}
.discount .title{ width: 90%; margin: -15px auto 25px auto; text-align: center;}
.discount .icon{ width: 90px; margin: 5px auto; text-align: center;
  background-image: url(../images/discount_bg.png); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.discount .icon img{ width: 100%;}
.discount .info{ margin: 0; font-size: 18px; color: #fff; line-height: 130%; text-align: center;}

@media screen and (min-width: 480px){
  .discount .info{}
}
@media screen and (min-width: 960px){
  .discount .icon{ width: 90px;}
  .discount .info{ font-size: 20px; text-align: left;}
}

/* 專案說明 */
.illustrate{ max-width: 1200px; margin: 0 auto; padding-right: 15px; color: #ffec99;}
.illustrate h4{ margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #ffec99;}
.illustrate ul{ margin-top: 10px; margin-bottom: 0; padding-left: 20px;}
.illustrate li{ margin: 8px 0; list-style: decimal; font-size: 15px; opacity: 0.8;}

.award{ position: relative; color: #666;}
.award > img{ width: auto; height: 170px; position: absolute; bottom: 50%; left: 55px; margin-bottom: -75px;}
.award > 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){
  .award > img{ left: 50px;}
}
@media screen and (min-width: 640px) and (max-width: 959px){
  .award > div{ min-height: 130px; text-align: center;}
}
.award >div > div{ width: calc(100% - 80px); margin-left: 80px;}
.award h5,.award p{ margin: 0;}
.award h5 span{ padding: 0 20px; margin-bottom: 10px; display: inline-block; position: relative; color: #7e3a20; font-size: 20px; font-weight: bolder;}
.award h5 span::before,.award h5 span::after{ content: ""; width: 13px; height: 28px; display: block;
  position: absolute; top: 1px;
  background-image: url(../images/tassel.svg); background-size: contain;}
.award h5 span::before{ left: 0;}
.award 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: 50;}
.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{ width: 100%; padding-top: 10px; padding-bottom: 10px; background: #fff;
  position: fixed; bottom: 0; left: 0; z-index: 15;
-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{ display: block; font-size: 18px; font-weight: bold; text-align: center; color: #242424;}
.quickLink_m i img{ width: 32px; margin: 8px;}
.quickLink_m .colorStyle{ filter: invert(22%) sepia(11%) saturate(3309%) hue-rotate(335deg) brightness(91%) contrast(89%);}

@media only screen and (max-width: 767px){
  .quickLink_m a{ font-size: 16px;}
  .quickLink_m i{ display: block;}
  .quickLink_m i img{ width: 40px;}
}

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