@charset "utf-8";
.white{ color:#ffffff}
.brown{ color:#b98006}
.blue{ color:#0a1479}
.yew{color:#fff000}
.gold{color:#ceac53}
.w1{ font-size:26px; letter-spacing:2px; line-height:150%;}
.w2{ font-size:17px; letter-spacing:2px; line-height:150%;}
.w3{ font-size:16px; letter-spacing:1px; line-height:150%;}
.w5{ font-size:14px; letter-spacing:1px; line-height:140%;}
.bold{font-weight:bold;}
.text-align{text-align:center;}
td{vertical-align:top; padding-top:5px; padding-right:2px}
.dk {display:block}
.mb {display:none}
.spc1 { margin-top:10px}
.spc2 { margin-top:25px}

@media (max-width:767px) {
.w1{ font-size:20px; letter-spacing:1px;line-height:130%;}
.w2{ font-size:14px; line-height:130%; letter-spacing:2px;}
.w3{ font-size:13px; line-height:130%;}
.w5{ font-size:12px; letter-spacing:0; line-height:130%;}
.text-align{text-align:justify;}
td{ padding-right:1px}
.mb {display:block}
.dk {display:none}
}



/***** s2 消費與回饋 *****/	
#s2{clear:both; overflow:hidden;}
#s2{clear:both; width:100%; background:#675973;}
.s2-card{clear:both; width:78%; margin:9% auto 0; overflow:hidden;}
.s2-ph{ float:left; width:36%;}
.s2-hd{ float:left; width:40%; margin-left:2.8%; margin-top:1%;}
.s2-copy{float:left; width:60%; margin-left:40%; margin-top:-10.2%; font-size:13px; letter-spacing:2px; line-height:150%;}
.s2-main {clear:both; width:70%; margin:1% auto 0;}
.s2-btn {clear:both; width:58%; margin:3% auto 120px;}
.s2-btn1 {float:left; width:30%; margin-right:3%; margin-left:21%;}
.s2-btn2 {float:left; width:25%;}
.copy-spc{margin-top:1%}

@media (max-width:767px) {
.s2-card{width:90%; margin:12% auto 20px ;}
.s2-ph{clear:both; width:50%; margin-left:25%; display:none}
.s2-hd{ clear:both; width:80%; margin-left:10%; margin-top:10px;}
.s2-copy{width:84%; margin-left:10%; margin-top:3%; font-size:12px; line-height:150%;letter-spacing:2px;}
.s2-main {clear:both; width:90%; margin:0 auto; margin-top:2%;}
.s2-btn {width:100%; margin:5% auto 45%;}
.s2-btn1 {clear:both; width:60%; margin-left:20%;}
.s2-btn2 {clear:both; width:50%; margin-left:25%; margin-top:15px;}
.copy-spc{margin-top:2%;}
}


/***** s3 首刷禮 *****/	
#s3{clear:both; width:100%; background:#675973; overflow:hidden; position:relative; padding-bottom:2%;}
.s3-main1 {clear:both; width:76%; margin:auto; margin-top:2%;}
.s3-main2 {clear:both; width:76%; margin:auto;  margin-top:3%;}

@media (max-width:767px) {
#s3{ margin-top:-50px; padding-bottom:6%;  }
.s3-main1 {width:92%; margin-top:2%;}
.s3-main2 {width:92%; margin-top:10%;}

}
 
/***** 下拉注意事項 *****/
.down3 { padding-bottom:1%;}
.info-btn1{ width:8%; cursor: pointer; outline: none; margin:auto; margin-top:2%;margin-bottom:2%;}
.show-con {width:80%; margin:1% 9% 6% 11%;}
.show-con td { vertical-align:text-top; padding-top:3px}
.info-w2{ font-size:13px; letter-spacing:1px; line-height:140%; text-align:left;}


@media (max-width: 767px) {
.down1{padding-top:3%;}
.info-btn1{ width:22%; margin-top:3%;}
.show-con {width:88%; margin:auto;}
.info-w2{ font-size:12px;line-height:120%;}
} 


/***** s5 館內回饋 *****/	
#s500p{clear:both; width:100%; background:#212548; margin-top:-30px; padding-top:30px; overflow:hidden;}
.s500p-1{ position:relative; width:75%; margin:60px auto;}
.s500p-2{ position:relative; width:75%; margin:60px auto 160px; overflow:hidden;}
.s500p-btn1{ position:absolute; z-index:22; width:14%; margin-left:42%; margin-top:25%;}
.s500p-btn2{ position:absolute; z-index:22; width:14%; margin-left:42%; margin-top:19%;}

.s500p-2-1{ float:left; width:49.5%; }
.s500p-2-2{ float:left; width:49.5%; margin-left:1% }
.s500p-btn2-1{ position:absolute; z-index:22; width:9%; margin-left:37%; margin-top:18.5%;}
.s500p-btn2-2{ position:absolute; z-index:22; width:9%; margin-left:76%; margin-top:18.5%;}

@media (max-width: 767px) {
.s500p-1{ width:100%; margin:50px auto 20px;}
.s500p-2{ width:100%; margin:20px auto 130px;}
.s500p-btn1{  width:35%; margin-left:8%; margin-top:82%;}
.s500p-btn2{  width:35%;margin-left:33%; margin-top:68%;}

.s500p-2-1{ clear:both; width:100%; }
.s500p-2-2{  clear:both; width:100%;  margin-left:0%; margin-top:20px; }
.s500p-btn2-1{ width:23%; margin-left:66%; margin-top:43%;}
.s500p-btn2-2{ width:23%; margin-left:66%; margin-top:100%;}
} 

 
 
/***** s5 館內回饋 *****/	
#s5{clear:both; width:100%; background:#5e466a; margin-top:-50px; padding-top:50px; overflow:hidden;}
.s5-hd { clear:both; width:46%; margin:4% auto 30px 17%;}

.s5-hit{ clear:both; width:80%; margin:-5% auto 60px 12%; overflow:hidden;}
.s5-hit-left{ float:left; width:43%; margin-top:10%}
.s5-hit-right{ float:left; width:57%;}

.hot { clear:both; width:60%; margin:40px auto 100px;}
.hot .owl-carousel .item{ position:relative; width:100%; margin:20px 0 30px 0;}
.hot .owl-theme .owl-controls .owl-nav [class*=owl-] {position:absolute; z-index:99; width:100%;background: none; display: block; cursor: pointer; border-radius: 0;}

.hot .owl-carousel .owl-nav button.owl-prev
{float:left;width:45px; height:45px; margin-left:-8%; margin-top:-15%; background:url(../img/prev.png)no-repeat; background-size:contain;}
.hot .owl-carousel .owl-nav button.owl-next
{float:right;width:45px; height:45px; margin-right:-8%; margin-top:-15%; background:url(../img/next.png)no-repeat; background-size:contain;}

@media (min-width:580px) and (max-width:928px) {
.s5-hd {width:70%; margin:2% auto 30px 12%;}
.s5-hit{ clear:both; width:90%; margin:-6% auto 50px;}
.s5-hit-left{ float:left; width:43%; margin-top:10%}
.s5-hit-right{ float:left; width:57%;}

.hot { clear:both; width:65%; margin:40px auto 120px;}
.hot .owl-carousel .owl-nav button.owl-prev
{width:45px; height:45px; margin-left:-12%; margin-top:-30%;}
.hot .owl-carousel .owl-nav button.owl-next
{width:45px; height:45px; margin-right:-12%; margin-top:-30%; }
}

@media (max-width:579px) {
.s5-hd {width:90%; margin:2% auto 30px 8%;}

.s5-hit{ clear:both; width:100%; margin:-11% auto 40px;}
.s5-hit-left{clear:both; width:78%; margin-top:0; margin-left:22%;}
.s5-hit-right{clear:both; width:100%;}
.s5-hit2{width:78%; margin-top:0; margin-left:8%;}
.s5-hit3{width:78%; margin-top:0; margin-left:22%;}

.hot {width:100%; margin:40px auto 90px;}
.hot .owl-carousel .item{ width:100%; margin:0px 0 20px 0;}
.hot .owl-prev, .hot .owl-next{ display:none }
.s5-btn{clear:both; width:66px; margin:auto }
}


/***** s6 優惠服務*****/	
#s6{clear:both; width:100%; background:#313f62; margin-top:-50px; padding-top:50px; overflow:hidden;}
.s6-hd { clear:both; width:43%; margin-left:18%; margin-top:50px; }

.serve  { width:66%; margin:40px auto 20px; }
.serve .owl-carousel .item{ position:relative; width:100%; margin:0px 0 20px 0;}
.serve .owl-theme .owl-controls .owl-nav [class*=owl-] {position:absolute; z-index:99; width:100%;  background: none; display: block; cursor: pointer; border-radius: 0; display:inline-block}

.serve .owl-carousel .owl-nav button.owl-prev
{float:left;width:45px; height:45px; margin-left:-8%; margin-top:-15%; background:url(../img/prev.png)no-repeat; background-size:contain;}
.serve .owl-carousel .owl-nav button.owl-next
{float:right;width:45px; height:45px; margin-right:-8%; margin-top:-15%; background:url(../img/next.png)no-repeat; background-size:contain;}

.serve .owl-theme .owl-dots .owl-dot span{ width:13px; height:13px; margin:7px 7px; background:#ffffff; border-radius: 30px; display:inline-block }
.serve .owl-theme .owl-dots .owl-dot.active span,.shop .owl-theme .owl-dots .owl-dot:hover span{ background:#8fa5b7;}

.notice{width: 80%; margin:30px auto 80px;}


@media (min-width:580px) and (max-width:928px) {
.s6-hd {width:62%; margin-left:19%; margin-top:3%;}
.serve {width:85%; margin:30px auto 20px; }
.serve .owl-carousel .owl-nav button.owl-prev
{width:40px; height:40px; margin-left:0%; margin-top:0%;}
.serve .owl-carousel .owl-nav button.owl-next
{width:40px; height:40px; margin-right:0%; margin-top:0%;}
}

@media (max-width:579px) {
.s6-hd {width:85%; margin:30px 8%;}
.serve {width:95%; margin:30px auto 20px; }
.serve .owl-carousel .owl-nav button.owl-prev
{width:40px; height:40px; margin-left:0%; margin-top:0%;}
.serve .owl-carousel .owl-nav button.owl-next
{width:40px; height:40px; margin-right:0%; margin-top:0%;}
.serve .owl-theme .owl-dots .owl-dot span{ width:12px; height:12px; margin:8px 5px;}
.notice{width: 90%; margin:30px auto;}
}


/***** modal彈窗 *****/
.modal{ overflow:hidden !important}
.m-box{ height:100vh; display: flex; }/** 固定居中 **/
.modal-dialog{width:980px; max-width:96%; margin:30px auto; padding:30px}
.modal-content{width: 100%; padding:30px 5px 30px; margin:auto; border-radius:20px ;background:#e4e4ea;}
.modal-body{width:100%; padding:5px 50px 10px; }
.pre-scrollable{overflow-y:auto; max-height:65vh}
.info-close{ position:absolute; width:48px; right:3%; top:4%; cursor: pointer; z-index:99;}

.btn-content{background:#000; opacity:0.8}
.hit-content{width:75%; background:#000; opacity:0.8}

@media (max-width:767px) {
.m-box{ height:65vh; display: flex;}
.modal-dialog{ width:95%; max-width:95%; margin:20% auto 15%; padding:20px}
.info-close{width:40px; right:5%; top:1%;}
.modal-content{width:100%; padding:30px 10px 30px;}
.modal-body{width:100%; padding:0px 15px 0px 15px}
.pre-scrollable{overflow-y:auto; max-height:65vh;}

.hit-content{width:100%;}
}



/***** kv設定 *****/	
body{ margin: 0; padding: 0; background:#000;}
#kv { position:relative; overflow:hidden;}
.kv {width:100%;}
.kv-card { position:absolute; z-index:99; width:23%; bottom:9.5%; margin-left:8.3%;}
.kv-hd1 { position:absolute; z-index:99; width:28%; bottom:17%; margin-left:32%;}
.kv-hd2 { position:absolute; z-index:99; width:58%; bottom:11%; margin-left:32%;}
.kv-star { position:absolute; z-index:55; width:100%; opacity:0 }
.kv-20logo { position:absolute; z-index:99; width:13%; margin-top:38%; margin-left:3%;}

@media (max-width:767px) {
.kv {width:100%;}
.kv-card {width:51%; bottom:5%; margin-left:2%;}
.kv-hd1 {width:39%; bottom:17%; margin-left:55%;}
.kv-hd2 {width:45%; bottom:5.5%; margin-left:55%;}
.kv-20logo {width:30%; margin-top:130%; margin-left:2%;}
}



/***** 視覺區 *****/
.slidebg { 
animation-name:atbg;
animation-delay:0s;
animation-duration:2s; 
animation-iteration-count:1; 
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
-moz-animation-name:atbg;
-moz-animation-delay:0s;
-moz-animation-duration:2s; 
-moz-animation-iteration-count:1; 
-moz-animation-fill-mode:forwards;
-moz-animation-timing-function:ease-in-out;
}

@-webkit-keyframes atbg{
   0%{ opacity:0.3;              
  }
  50%{ opacity:0.6;       
  }
  100%{opacity:1;
  }
}
@keyframes atbg{
   0%{ opacity:0.3;              
  }
  50%{ opacity:0.6;       
  }
  100%{opacity:1;
  }
}


@-webkit-keyframes move {
  0%{ opacity:1;              
  }
  50%{ opacity:0.5;       
  }
  100%{opacity:1;
  }
}

@keyframes move{
   0%{ opacity:1;              
  }
  50%{ opacity:0.5;       
  }
  100%{opacity:1;
  }
}