#indexPage .contentBody {padding-bottom: 0px;}
#KV {position: relative;}
.dbs-cards {padding: 15px; background-color: #f3f3f3; border-bottom: 2px solid #ccc;}
.dbs-cards img {max-width: 500px; margin:0 auto; width: 100%;}
.introwrap {padding: 40px 0; background: url(../img/bg-banner.jpg) no-repeat center center; background-size: cover;}
.intro {padding:0 1em 0; max-width: 1000px; margin: auto; text-align: center;}
.intro p {font-size: 1.15rem; color: #333; font-weight: 600;}
.intro p .txtRed {color: #f60001; font-size: 1.35rem;}
#promo-banners {margin-top: 50px; overflow: hidden; width: 100%; padding-bottom: 35px; text-align: center;}
#promo-banners .swiper-container {overflow: visible; max-width: 900px; margin: auto;}
#promo-banners .promobanner {}
#promo-banners .promobanner img {margin-bottom: 5px; transition: all .2s ease-in-out;}
#promo-banners .tnc { color: #292929; font-size: 13px; display: inline-block; padding-bottom: 2px; border-bottom: 1px solid; font-weight: 600;}
#promo-banners .swiper-pagination {bottom: 0;}
#promo-banners .swiper-pagination-bullet-active {background: #131313;}

@media (min-width: 769px) {
    #promo-banners .swiper-slide {opacity: 0; width: 50%; transition: all .2s ease-in-out;}
    #promo-banners .swiper-slide-next + .swiper-slide, #promo-banners .swiper-slide-prev {opacity: 0.6; }
    #promo-banners .swiper-slide-active , #promo-banners .swiper-slide-next {opacity: 1;}
    #promo-banners .swiper-slide-active .promobanner img, #promo-banners .swiper-slide-next .promobanner img {transform: scale(1) translateX(0);}
    #promo-banners .swiper-slide-next + .swiper-slide .promobanner img {transform: scale(.85) translateX(-8%);}
    #promo-banners .swiper-slide-prev .promobanner img {transform: scale(.85) translateX(8%);}
    #promo-banners .swiper-slide .tnc {display: none;}
    #promo-banners .swiper-slide-active .tnc, #promo-banners .swiper-slide-next .tnc {display: inline-block;}
}

@media (max-width: 768px) {
    #bodyContent {padding-top:0;}
    .introwrap {background: url(../img/bg-banner-m.jpg) no-repeat center center; background-size: cover;}
    .intro {padding: 0 2rem;}
    .intro p, .intro p .txtRed {font-size: 1.15rem;}
    #promo-banners {margin-top: 30px;}
    #promo-banners .swiper-slide-prev .promobanner img, #promo-banners .swiper-slide-next .promobanner img {opacity: 0.6;}
    #promo-banners .swiper-slide-prev .promobanner img {transform: scale(.9) translateX(6%); }
    #promo-banners .swiper-slide-next .promobanner img {transform: scale(.9) translateX(-6%); }
}

@media (max-width: 360px) {
    .intro {padding: 0 1rem;}
    .intro p, .intro p .txtRed {font-size: 1rem;}
}


@media (min-width: 769px)  {
	#KV img {/*max-width: 1500px;*/ width: 100%; margin: 0 auto;}
	
    @-webkit-keyframes updown {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    @keyframes updown {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
}



/* Voucher list */
/* #voucherPage .contentBody {background:url(../img/pattern.png);}*/

.anchorNav {margin: 0 auto 30px auto; height: 170px;}
.anchorNav .container {-webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; text-align: center; font-size: 0; background-color: #f9fcf8; padding: 20px 0;}
.anchorNav.sticky .container {position: fixed; z-index: 9999; width: 100%; max-width: 100%; right: 0; top: -1px; padding: 15px 5px; -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s; box-shadow: 0px 0px 6px 1px rgba(0,0,0,.2); }
.anchorNav .filterBtn {display: inline-block; vertical-align: middle; position: relative; margin: 0 40px; cursor: pointer; padding: 0; height: 160px; width: 160px; }
.anchorNav .filterBtn:before, .anchorNav .filterBtn:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
.anchorNav .filterBtn.active:after {opacity: 1;}
.anchorNav .filterBtn.tt-hotpot {background: url(../img/menu-1.png) no-repeat center center; background-size: contain;}
.anchorNav .filterBtn.tt-bbq {background: url(../img/menu-2.png) no-repeat center center; background-size: contain;}
.anchorNav .filterBtn.tt-spicy {background: url(../img/menu-3.png) no-repeat center center; background-size: contain;}




@media (min-width: 769px) {
    #voucherPage .contentBody {min-height: calc(100vh - 170px);}
    .anchorNav .filterBtn:hover:after {opacity: 1;}
    /* .anchorNav .filterBtn.tt-hotpot:after {background: url(../img/menu-1-hover.png) no-repeat center center; background-size: contain;} */
    /* .anchorNav .filterBtn.tt-bbq:after {background: url(../img/menu-2-hover.png) no-repeat center center; background-size: contain;}*/
    /* .anchorNav .filterBtn.tt-spicy:after {background: url(../img/menu-3-hover.png) no-repeat center center; background-size: contain;}*/
    .anchorNav .filterBtn.tt-hotpot:before {background: url(../img/tab-1.png) no-repeat center center; background-size: contain;}
    .anchorNav .filterBtn.tt-bbq:before {background: url(../img/tab-2.png) no-repeat center center; background-size: contain;}
    .anchorNav .filterBtn.tt-spicy:before {background: url(../img/tab-3.png) no-repeat center center; background-size: contain;}
    .anchorNav.sticky .filterBtn {background: none; width: 220px; height: 70px; margin: 0 10px;}
    .anchorNav.sticky .filterBtn:after {opacity: 0;}
    .anchorNav.sticky .filterBtn:before {opacity: 1;}
}

@media (max-width: 768px) {
    .anchorNav {height: 138px; position: relative; background: url(../img/bg_menu.jpg);}
    .anchorNav .container {font-size: 0; white-space: nowrap;overflow-y: scroll;-ms-overflow-style: none;scrollbar-width: none; padding: 2%;  border: none;background-size: cover;background-repeat: no-repeat;}
    .anchorNav .container::-webkit-scrollbar {display: none; }
    .anchorNav .filterBtn:before {width: 55px; height: 55px; bottom: 0; margin: auto; z-index: 1; display: none;}
    .anchorNav .filterBtn.tt-hotpot:before {background: url(../img/tab-1-m.png) no-repeat center center; background-size: contain;}
    .anchorNav .filterBtn.tt-bbq:before {background: url(../img/tab-2-m.png) no-repeat center center; background-size: contain;}
    .anchorNav .filterBtn.tt-spicy:before {background: url(../img/tab-3-m.png) no-repeat center center; background-size: contain;}
    .anchorNav.sticky .filterBtn {background: none; width: auto; padding: 0; min-width: 55px;}
    .anchorNav.sticky .filterBtn:before {opacity: 1; display: block;}
    .anchorNav .filterBtn { margin: 0 1%; height: auto; width: 26%; padding-bottom: 33%;}
    .anchorNav .filterBtn span {color: #fff;letter-spacing: 3px;font-size: 17px;font-weight: 600;border-radius: 30px;line-height: 2.1;text-align: center;margin-left: 27px;width: 0;opacity: 0;-webkit-transition: all .3s;-moz-transition: all .3s;transition: all .3s; display: none!important;}
    .anchorNav .filterBtn span.hotpot {background-color: #FF9A2A;}
    .anchorNav .filterBtn span.bbq{background-color: #FF3347;}
    .anchorNav .filterBtn span.spicy{background-color: #00C6FF;}
    .anchorNav.sticky .filterBtn span {display: block!important; z-index: 0;}
    .anchorNav.sticky .filterBtn.active span {padding-left: 20px;opacity: 1; }
    .anchorNav.sticky .filterBtn.tt-hotpot.active span {width: 130px;}
    .anchorNav.sticky .filterBtn.tt-bbq.active span {width: 145px;}
    .anchorNav.sticky .filterBtn.tt-spicy.active span {width: 130px;}
    .anchorNav.sticky .filterBtn.tt-dimsum-veg.active span {width: 140px;}
    .anchorNav.sticky .filterBtn.tt-gathering.active span {width: 130px;}
}


@media (max-width: 375px) {
    .anchorNav{height: 130px;}
}

@media (max-width: 320px) {
    .anchorNav{height: 90px;}
    .anchorNav .container{padding: 0;}
}

#resultList {}
#resultList .poiList {margin-bottom: 70px;}
#resultList .list .catTT {width: 290px; height: 73px; }
#resultList .list .catTT.tt-hotpot {background: url(../img/tt-1-m.png) no-repeat center center; background-size: contain;}
#resultList .list .catTT.tt-bbq {background: url(../img/tt-2-m.png) no-repeat center center; background-size: contain;}
#resultList .list .catTT.tt-spicy {background: url(../img/tt-3-m.png) no-repeat center center; background-size: contain;}
#resultList .list .vouchers {padding-top: 30px; position: relative;}
#resultList .list .vouchers .swiper-wrapper {align-items: stretch; padding-bottom: 5px;}
#resultList .list .vouchers .swiper-slide {height: auto;}
#resultList .list .voucher {display: block; overflow: hidden; width: 100%;height: 100%; position: relative; background-color: #fff; border:1px solid #eeeeee; border-radius: 10px; padding-bottom: 145px;}
#resultList .list .voucher .vw .v {display: none}
#resultList .list .voucher .vw .v.active {display: block}
#resultList .list .voucher .vwImg {display: block; }
#resultList .list .voucher .vwImg > .v {position: relative;}
#resultList .list .voucher .img {padding-bottom: 50%;}
#resultList .list .voucher .vwImg .tag {display: inline-block; vertical-align: middle; background: #009245; color: #fff; font-size: 22px; line-height: 1.5; font-weight: 600; padding: 0 12px; border-radius: 3px; margin-right: 5px; font-family: "Microsoft YaHei", "Microsoft JhengHei","Noto Sans TC", "Source Han Sans","PingFangHK","Heiti TC",Arial,Verdana,sans-serif; position: absolute; top: 10px; left: 10px;}
#resultList .list .voucher .text {padding: 15px; position: initial;}
#resultList .list .voucher .text .subt {color: #a0a0a0; font-size: 14px; margin-bottom: 6px; line-height: 1;}
#resultList .list .voucher .text .poiName {color: #1a1a1a; font-size: 24px; margin-bottom: 7px; font-weight: 600; line-height: 1.5;}
#resultList .list .voucher .text .tt {font-size: 1rem; color: #1a1a1a; font-weight: 600; line-height: 1.4; max-height: calc(1em * 1.4 * 3); letter-spacing: .5px; display: -webkit-box; -webkit-box-orient: vertical; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp : 3; padding-left: 13px;}
#resultList .list .voucher .text .tt:before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: #009245;}
#resultList .list .voucher .text .desc {color: #a0a0a0; margin-top: 10px; font-size: 14px; line-height: 1.5;}
#resultList .list .voucher .text .desc p, #resultList .list .voucher .text .desc ul li {color: #a0a0a0; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp : 3; height : calc(1em * 1.5 * 3);}
#resultList .list .voucher .text .desc > * {display: none;}
#resultList .list .voucher .text .desc > :first-child {display: block;}
#resultList .list .voucher .text .badge-msg {position: relative; padding: 5px 0 5px 5px; border-top: 1px solid; border-bottom: 1px solid; margin: 15px auto 0; letter-spacing: 0; font-size: 0;}
#resultList .list .voucher .text .badge-msg > span {display: inline-block; vertical-align: middle; width: calc(100% - 40px); font-size: .95rem; font-weight: 600; color: #E4292A; padding-left: 10px;}
#resultList .list .voucher .text .badge-msg:before {content: ''; display: inline-block; vertical-align: middle; width: 40px; height: 40px;}
#resultList .list .voucher .text .badge-msg.badge-hotpot:before {background: url(../img/icon-1.png) no-repeat center; background-size: cover;}
#resultList .list .voucher .text .badge-msg.badge-bbq:before {background: url(../img/icon-2.png) no-repeat center; background-size: cover;}
#resultList .list .voucher .text .badge-msg.badge-spicy:before {background: url(../img/icon-3.png) no-repeat center; background-size: cover;}
#resultList .list .voucher .text .badge-msg small {font-size: .8em; display: block; line-height: 1.4;}
#resultList .list .voucher .text .btm {position: absolute;bottom: 1rem;width: calc(100% - 30px); border-top: 1px dashed #ccc; padding-top: 10px;}
#resultList .list .voucher .text .btm .hd {padding: 0 0 0.3em 0.2em;font-weight: 400;color: #8c8c8c; font-size: .85rem;}
#resultList .list  .voucher .text .vwPriceBtns {margin-bottom: .5rem;}
#resultList .list  .voucher .text .vwPriceBtns .priceBtn, #resultList .list  .voucher .text .vwPriceBtns .morebtn {cursor: pointer; font-size: .95rem;text-align: center; border-radius: 4px; line-height: 1.7; padding: 0 0.8rem; border: 1px solid; color: #bdbdbd; font-weight: 600; display: inline-block; vertical-align: top; margin-right: .2rem; margin-bottom: .3rem;background-color: #f9f9f9;}
#resultList .list  .voucher .text .vwPriceBtns .priceBtn.active {color: #fff; background-color: #00A45A; border-color: #00A45A; cursor: default;}
#resultList .list  .voucher .text .vwPriceBtns .morebtn {}
#resultList .list .voucher .text .btm .price {display: inline-block; vertical-align: middle; text-align: center;}
#resultList .list .voucher .text .btm .price .discount {color: #009245; font-size: 28px; margin-bottom: 1px; line-height: 1; font-weight: 600; display: inline-block; }
#resultList .list .voucher .text .btm .price .original {color: #ee4341; font-size: 14px; font-style: italic; text-decoration: line-through; line-height: 1; display: inline-block; margin-left: 0.3em;} 
#resultList .list .voucher .text .btm .sold {border-radius: 3px; border: 1px solid #009245; font-size: 12px; line-height: 2; color: #009245; padding: 0 5px; min-width: 60px; text-align: center; display: inline-block; vertical-align: middle; margin-left: 10px;}
#resultList .list .voucher .text .vlinkBtn {display: inline-block;border-radius: 5px;letter-spacing: 1px;padding: 0 .8em;line-height: 2.3;font-size: 1.1rem;text-align: center;color: #fff;background-color: #00a25a;font-weight: 600;float: right; margin-top: .25rem;}
#resultList .list .vouchers .btns {position: absolute; bottom: 100%; right: 0;}
#resultList .list .vouchers .btns .swiper-button-prev, #resultList .list .vouchers .btns .swiper-button-next {position: relative; display: inline-block; left: auto; right: auto; margin: 0 5px; width: 60px; height: 60px; text-align: center; line-height: 60px; transition: all .2s; }
#resultList .list .vouchers .btns .swiper-button-prev:not(.swiper-button-disabled):after, #resultList .list .vouchers .btns .swiper-button-next:not(.swiper-button-disabled):after {content: ''; display: block; -webkit-animation: flashingBtn 2s infinite ease-in-out; animation: flashingBtn 2s infinite ease-in-out; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; border-radius: 50%; }


@-webkit-keyframes flashingBtn {0%{opacity: 0.5;} 50%{opacity: 1;} 100% {opacity: .5;}}
@keyframes flashingBtn {0%{opacity: 0.5;} 50%{opacity: 1;} 100% {opacity: .5;}}
#resultList .list .vouchers .btns .swiper-button-prev.swiper-button-disabled:after, #resultList .list .vouchers .btns .swiper-button-next.swiper-button-disabled:after {display: none;}
#resultList .list .vouchers .btns .swiper-button-prev.hotpot.swiper-button-disabled, #resultList .list .vouchers .btns .swiper-button-next.hotpot.swiper-button-disabled {background-color: transparent; border: 2px solid #ff9a2a54; opacity: 1;}
#resultList .list .vouchers .btns .swiper-button-prev.bbq.swiper-button-disabled, #resultList .list .vouchers .btns .swiper-button-next.bbq.swiper-button-disabled {background-color: transparent; border: 2px solid #beecbd; opacity: 1;}
#resultList .list .vouchers .btns .swiper-button-prev.spicy.swiper-button-disabled, #resultList .list .vouchers .btns .swiper-button-next.spicy.swiper-button-disabled {background-color: transparent; border: 2px solid #fc9ba6; opacity: 1;}
#resultList .list .vouchers .btns .swiper-button-prev > svg, #resultList .list .vouchers .btns .swiper-button-next > svg {width: 30%; display: inline-block; height: 100%; fill: #fff;}
#resultList .list .vouchers .btns .swiper-button-prev.hotpot.swiper-button-disabled > svg, #resultList .list .vouchers .btns .swiper-button-next.hotpot.swiper-button-disabled > svg {fill: #ff9a2a54;}
#resultList .list .vouchers .btns .swiper-button-prev.bbq.swiper-button-disabled > svg, #resultList .list .vouchers .btns .swiper-button-next.bbq.swiper-button-disabled > svg {fill: #beecbd;}
#resultList .list .vouchers .btns .swiper-button-prev.spicy.swiper-button-disabled > svg, #resultList .list .vouchers .btns .swiper-button-next.spicy.swiper-button-disabled > svg {fill: #fc9ba6;}



@media (min-width: 769px) {
    #resultList .list .catTT {text-align: left;}
    #resultList .list .vouchers.hotpot:before {content: ''; width: calc(100% - 200px); height: 1px; background-color: #FF9A2A; position: absolute; top: -2px; left: 60px;}
    #resultList .list .vouchers.bbq:before {content: ''; width: calc(100% - 200px); height: 1px; background-color: #559853; position: absolute; top: -2px; left: 60px;}
    #resultList .list .vouchers.spicy:before {content: ''; width: calc(100% - 200px); height: 1px; background-color: #ff3d53; position: absolute; top: -2px; left: 60px;}
    #resultList .list .voucher .clink:hover {background-color:#46e252;}
}
@media (min-width: 1500px)  {
    .contentWrapper .row {max-width: 100rem;}
}

@media (max-width: 768px) {
	#voucherPage .contentBody {padding-bottom: 20px;background-color: #ffffff;}
    #voucherPage .contentBody > .globalContainer {padding: 0;}

    #resultList .list .catTT {width: 210px;height: 55px; margin-left: 25px;}
    #resultList .list .voucher { margin: 0;}
    #resultList .list .voucher .clink {padding: 15px 35px 5px; font-size: 12px; right: -35px; top: -5px;letter-spacing: 0px;}
    #resultList .list .voucher .vwImg {width: 100%;}
    #resultList .list .voucher .vwImg .tag {top: 1rem;left: 1rem;font-size: 1.4rem;}
    #resultList .list .voucher .text {padding: 15px 15px 15px 20px;}
    #resultList .list .voucher .text .tt {font-size: 16px; letter-spacing: 1px;  }
    #resultList .list .voucher .text .subt {font-size: 13px; padding-right: 10px; display: -webkit-box;-webkit-box-orient: vertical;position: relative;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1; max-height: calc(1em * 1.4 * 1); line-height: 1; margin-bottom: 10px;}
    #resultList .list .voucher .text .btm .price .discount {font-size: 28px;display: inline-block;}
    #resultList .list .voucher .text .btm .price .original {font-size: 16px;display: inline-block;margin-left: 0.3em;margin-top: -0.1em;}
    #resultList .list .voucher .text .btm .sold {min-width: 50px;}
    #resultList .list .voucher .text .vlinkBtn {margin-top: -.25rem;}
    #resultList .list .vouchers .btns {display: none;}
}  
@media (max-width: 480px) {
    #resultList .list .voucher .text {width: 100%;min-height: auto;}
    #resultList .list .voucher .vwImg{width: 100%;min-height: auto;}
    #resultList .list .voucher .clink {transform: none; border-radius: 2px; padding: 0.4em 0.8em; font-size: 15px; top: 0.5em; right: 0.5em;background-color:#ffffff;color:#009245;border:1px solid #dddddd; }
    #resultList .list .voucher .clink span {display: inline-block!important;}

}


#whatsappBox{max-width:200px;position:fixed;z-index:100;bottom:2rem;right:-200px;opacity:0;transition:all .3s ease-in-out;margin:auto}
#whatsappBox.show{right:1rem;opacity:1}
  @media screen and (max-width: 768px) {
    #whatsappBox{bottom:0;left:0;right:0;max-width:100%}
    #whatsappBox.show{right:0}
    #whatsappBox a{width:55%;display:block;margin:0 auto 3%}
    #whatsappBox:after{content:"";display:block;position:absolute;width:100%;height:100px;bottom:0;left:0;background:#fff;background:-moz-linear-gradient(0deg,#fff 10%,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(0deg,#fff 10%,rgba(255,255,255,0) 100%);background:linear-gradient(0deg,#fff 10%,rgba(255,255,255,0) 100%);z-index:-1}
}

#flashcoupon{margin: 0 auto;background-color: #f9fcf8;padding: 2%; position: relative;}
#flashcoupon a>img{max-width: 40%;}

@media screen and (max-width: 768px){
    #flashcoupon a>img{max-width: 95%;padding-top: 20px;}
}


/* Float */
.float-effect {
    display: block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .float-effect:hover {
    transform: translateY(-5px);
  }


  @media(max-width:768px) {
    .mbnoshow{display:none;}  
    }

  .leftimage {width: 23%;position: absolute; top: 14rem;z-index:6; }
  .rightimage { width: 25%;right: -0.5rem; position: absolute; top: 14rem;z-index:6;}


  /* Effect and Animation */

.floating{	animation: float 3s ease-in-out infinite;}
.floating2{	animation: float2 3s ease-in-out infinite;}

@keyframes float {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-20px);}
	100% {transform: translatey(0px);	}
}


.vapour{
	position: absolute;
	display: flex;
	z-index: 1;
	padding: 0 20px;
    top: 0;
    left: 0px;
}

.vapour.right{
    right:0px;
    left: initial;
}
.vapour span {
	position: relative;
	bottom: 50px;
	display: block;
	margin: 0 2px 50px;
	min-width: 8px;
	height: 120px;
	background: #fff;
	border-radius: 50%;
	animation: animate 5s linear infinite;
	opacity: 0;
	filter: blur(8px);
	animation-delay: calc(var(--i) * -0.5s);
}
@keyframes animate {
	0%{
		transform: translateY(0) scaleX(1);
		opacity: 0;
	}
	15%{
		opacity: 1;
	}
	50%{
		transform: translateY(-150px) scaleX(5);
	}
	95%{
		opacity: 0;
	}
	100%{
		transform: translateY(-300px) scaleX(10);
	}
}