@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
#bodyContent {background: #fff; overflow: hidden;}


.sun {position: absolute;width: 0px;height: 0px;margin: 0;animation: flaremove 5s alternate infinite ease-in-out, lightbright 5s alternate infinite linear;z-index: 100;}
.flare {position: absolute;top: 80%;left: 80%;animation: flaremove 5s alternate infinite ease-in-out;border-radius: 9999px;}
.flare.one {margin: -50px 0 0 -50px;width: 100px;height: 100px;box-shadow: inset 0px 0px 20px 2px rgba(190, 190, 240, 0.125), 0px 0px 20px 0px rgba(190, 190, 240, 0.125);}
.flare.two {margin: -100px 0 0 -100px;width: 200px;height: 200px;box-shadow: inset 0px 0px 100px 2px rgba(200, 230, 200, 0.125), 0px 0px 13px 2px rgba(200, 230, 200, 0.125);}
.flare.three {margin: 20% 0 0 20%;width: 100px;height: 100px;box-shadow: inset 0px 0px 160px 2px rgba(50, 180, 50, 0.125), 0px 0px 20px 2px rgba(50, 180, 50, 0.125);}
.flare.four {margin: -5% 0 0 -5%;width: 60px;height: 60px;box-shadow: inset 0px 0px 160px 2px rgba(200, 220, 80, 0.25), 0px 0px 20px 2px rgba(200, 220, 80, 0.25);}
.flare.five {margin: 20% 0 0 20%;width: 20px;height: 20px;box-shadow: inset 0px 0px 18px 10px rgba(150, 220, 220, 0.25), 0px 0px 5px 0px rgba(150, 220, 220, 0.25);}

@keyframes flaremove {
    0% {left: 20%;top: 40%;} 100% {left: 80%;top: 60%;}
}

@keyframes lightmove {
    0% {left: 80%;top: 60%;} 100% {left: 20%;top: 40%;}
}

@keyframes lightbright {
    0% {box-shadow: 0px 0px 30px 10px #e6e6c8, 0px 0px 10px 5px white;}
    50% {box-shadow: 0px 0px 30px 10px #e6e6c8, 0px 0px 10px 5px white;}
    100% {box-shadow: 0px 0px 40px 10px #e6e6c8, 0px 0px 20px 10px white;}
}


#KV {position: relative; background-color: #FDF8FF;}
#KV img {width: 100%;}
#KV img.ttImg {position: absolute; top: 6%; left: 0; right: 0; margin: auto; width: 44%; max-width: 52rem;}
#KV p {position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; display: inline-block; margin: auto; color: #fff; font-size: 1.5rem; font-weight: 700;}
.tnc{color: #4e3c2e; font-size: 14px; border: 1px solid #4e3c2e; padding: 4px 20px 5px; border-radius: 20px; line-height: 1; cursor: pointer;float: right;margin-top: 14px;}

@media (max-width: 48em) {
    #KV img.ttImg {width: 71%;}
    .tnc{font-size:13px; margin-top: 2px;}
}


#section2 {background: #95afd3; background: linear-gradient(0deg, #95afd3 40%, #fdf8ff 100%); padding-top: 2.25rem; /*-webkit-clip-path: circle(350rem at 50% calc(100% - 350rem)); clip-path: circle(350rem at 50% calc(100% - 350rem));*/ padding-bottom: 3rem;}
#section2 > .wrapper {background: url(../img/repeat-grid.png);}

#introOffer {}
#introOffer > .row {/*height: 18rem; max-width: 70rem;*/ height: 16rem; max-width: 50rem;}
#introOffer > .row > .column:nth-child(1) {order: 1; max-width: 31.5rem;}
#introOffer > .row > .column:nth-child(2) {order: 2; max-width: 31.5rem;}
#introOffer > .row > .column:nth-child(3) {order: 3; max-width: calc(100% - 32rem); align-self: flex-end; font-size: 0;}
#introOffer .intro { margin: auto; padding: 0 .45rem;}
#introOffer .ttImg {margin: 0 auto 1rem;}
#introOffer p {color: #216e60; font-size: 1.2rem; line-height: 1.5; letter-spacing: 2px;}
#introOffer .date {font-size: 1.55rem; text-align: center; color: #fff; line-height: 1.2; background: url(../img/intro-promo/period-bg.png) no-repeat center / 100% 100%; font-weight: 700; display: block; margin: .75rem auto 0; padding: 1.25rem 0 1.65rem;}
#introOffer .date:before, #introOffer .date:after {content: ''; display: inline-block; vertical-align: middle; width: 4.5rem; height: 1.8rem; background: url(../img/intro-promo/period-deco.png) no-repeat center / contain;}
#introOffer .date:before {transform: rotate(180deg); margin: -.15rem .25rem 0 1rem; }
#introOffer .date:after {margin: -.15rem 1rem 0 .25rem; }
#introOffer .promoImg {display: inline-block; vertical-align: bottom; margin-top: 2.75rem;}
/* #introOffer .promoImg1 {width: 38.675%;} */
/* #introOffer .promoImg2 {width: 61.325%;} */
#introOffer .promoImg1 {width: 80%; margin: 0 auto; display: block;}

#limitedOffer {padding-bottom: 4rem;}
#limitedOffer > .wrapper {padding: 0 1rem; opacity: 0; transition: opacity .3s linear;}
#limitedOffer.initiated > .wrapper {opacity: 1;}

#limitedOffer .dateWrapper {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin: 3rem auto 3.5rem; max-width: 52rem;}
#limitedOffer .dateWrapper > div {display: block;}
#limitedOffer .dateWrapper > div:first-child {-ms-flex: 0 0 23%; -webkit-flex: 0 0 23%;flex: 0 0 23%; max-width: 23%;}
#limitedOffer .dateWrapper > div:last-child {-ms-flex: 0 0 75%; -webkit-flex: 0 0 75%;flex: 0 0 75%; max-width: 75%;}

#limitedOffer .dateTabs {max-width: 45rem; margin: 0 auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
#limitedOffer .dateTabs .dateTab {-ms-flex: 0 0 32%; -webkit-flex: 0 0 32%;flex: 0 0 32%; max-width: 32%; display: block; position: relative;}
#limitedOffer .dateTabs .dateTab:before, #limitedOffer .dateTabs .dateTab:after {content: ''; display: block; position: absolute; top: -33%; left: 0%; width: 105%; height: 180%;}
#limitedOffer .dateTabs .dateTab:before {z-index: 1; opacity: 0; transition: .2s ease-in-out; background: url(../img/icons/dateTab-on.svg) no-repeat center / contain;}
#limitedOffer .dateTabs .dateTab.active:before {opacity: 1;}
#limitedOffer .dateTabs .dateTab:after {background: url(../img/icons/dateTab-off.svg) no-repeat center / contain;}
#limitedOffer .dateTabs .dateTab.hasMenus:not(.active) {cursor: pointer;}
#limitedOffer .dateTabs .dateTab.notStarted.noMenus, #limitedOffer .dateTabs .dateTab.active, #limitedOffer .dateTabs .dateTab.hasEnded {pointer-events: none;}
#limitedOffer .dateTabs .dateTab > span {display: block; position: relative; text-align: center; font-weight: 400; color: #fff; font-family: "Tenor Sans", sans-serif; line-height: 1.15; z-index: 2; letter-spacing: 0;}
#limitedOffer .dateTabs .dateTab.active > span {color: #216e60;}
#limitedOffer .dateTabs .dateTab:not(.active) > span {color: #fff;}
#limitedOffer .dateTabs .dateTab .date {font-size: 3.25rem;}
/* #limitedOffer .dateTabs .dateTab.notStarted.hasMenus .date:after {content: '搶先預覽';}
#limitedOffer .dateTabs .dateTab.notStarted.noMenus .date:after {content: '密切留意'}
#limitedOffer .dateTabs .dateTab.hasStarted.isCurrent .date:after {content: '現正熱賣';}
#limitedOffer .dateTabs .dateTab.hasEnded .date:after {content: '已完結';} */
#limitedOffer .dateTabs .dateTab.notStarted.hasMenus .date:after, #limitedOffer .dateTabs .dateTab.notStarted.noMenus .date:after, #limitedOffer .dateTabs .dateTab.hasStarted.isCurrent .date:after, #limitedOffer .dateTabs .dateTab.hasEnded .date:after {display: inline-block; position: absolute; bottom: 95%; right: 4%; font-family: Noto Sans TC; font-size: 1rem; line-height: 1.25; font-weight: 700; text-align: center; width: 7rem; height: 2rem; font-size: 0;}
#limitedOffer .dateTabs .dateTab.notStarted.hasMenus .date:after {content: '搶先預覽'; background: url(../img/icons/dateTab-status2.svg) no-repeat center / contain;}
#limitedOffer .dateTabs .dateTab.notStarted.noMenus .date:after {content: '密切留意'; background: url(../img/icons/dateTab-status1.svg) no-repeat center / contain;}
#limitedOffer .dateTabs .dateTab.hasStarted.isCurrent .date:after {content: '現正熱賣'; background: url(../img/icons/dateTab-status3.svg) no-repeat center / contain;}
#limitedOffer .dateTabs .dateTab.hasEnded .date:after {content: '已完結'; background: url(../img/icons/dateTab-status4.svg) no-repeat center / contain; width: 6rem;}
#limitedOffer .dateTabs .dateTab .time {font-size: 1.5rem;}

#limitedOffer .ttImg {max-width: 22.5rem; margin: 2.25rem auto 1.5rem;}
#limitedOffer .container {max-width: 70rem; margin: 1rem auto 0; position: relative;}
#limitedOffer .listing {padding-bottom: 5rem;}

#limitedOffer .poiItem .imgBox {overflow: visible;}
#limitedOffer .poiItem .imgBox .img {border-radius: 12px;}
#limitedOffer .tagBox {display: none;}
#limitedOffer .tagBox.active {display: block;}
#limitedOffer .tag {position: absolute; bottom: -.25rem; right: 0; z-index: 1; color: #fff; font-size: 1.55rem; line-height: 1; padding: .45rem .5rem .6rem 2rem; border-radius: .25rem 0 .45rem 3rem; min-width: 8.125rem; text-align: center; font-weight: 500;}
#limitedOffer .tag.isUpcoming {background-color: #f86e7e;}
#limitedOffer .tag.isOnSale {background-color: #fe203e;}
#limitedOffer .tag.isLimited {background-color: #59c98b;}
#limitedOffer .tag.isSoldout {background-color: #6d6d6d;}
#limitedOffer .tag span {color: #fff; font-size: 1.625rem;}
#limitedOffer .tag.isUpcoming span {margin-right: .25rem; font-family: "Anton", sans-serif;font-style: normal; letter-spacing: .5px; display: inline-block; vertical-align: middle;}
#limitedOffer .tag.isUpcoming:before, #limitedOffer .tag.isOnSale:before {content: ''; display: block; position: absolute;}
#limitedOffer .tag.isUpcoming:before {background: url(../img/icons/clock.svg) no-repeat center / contain; width: 3rem; height: 3.5rem; left: -1.5rem; top: -.85rem;}
#limitedOffer .tag.isOnSale:before {background: url(../img/icons/fire.svg) no-repeat center / contain; width: 2.5rem; height: 3.75rem; left: -.8rem; top: -1.25rem;}
#limitedOffer .tag small {font-size: 1.125rem;}
#limitedOffer .poiItem .spaceholder {height: 2.5rem; margin: .25rem 0 .45rem;}
#limitedOffer .poiItem .remainTimeCounter {width: 100%; padding: 0 .45rem; opacity: 0; transition: opacity .3s;}
#limitedOffer .poiItem .remainTimeCounter.loaded {opacity: 1;}
#limitedOffer .poiItem .remainTimeCounter > div:first-child {text-align: right; color: #f86e7e; font-size: 1.1rem; padding-right: .65rem;}
#limitedOffer .poiItem .remainTimeCounter > div:last-child > div {float: left; width: 5%; text-align: center; font-size: 2rem; line-height: .9; }
#limitedOffer .poiItem .remainTimeCounter > div:last-child > div.timerBlock {position: relative; width: 30%;}
#limitedOffer .poiItem .remainTimeCounter .timerBlock > span:not(.num) {color: #707070; font-size: .65rem; display: block; text-align: center; position: absolute; bottom: 100%; left: 0; right: 0; margin: 0 auto .2rem; text-align: center;}
#limitedOffer .poiItem .remainTimeCounter .timerBlock > span.num {display: block;}
#limitedOffer .poiItem .remainTimeCounter .timerBlock > span.num > span {color: #9bb5d1; border-radius: .25rem; box-shadow: 1px 1px 3px 1px rgb(0, 0, 0,.15); font-weight: 600; font-size: 1.65rem; background-color: #333; text-align: center; width: calc(50% - 2px); margin: 0 1px; float: left; line-height: 1; font-family: "Public Sans", sans-serif;font-optical-sizing: auto;font-style: normal; padding: .4rem 0 .3rem;}
#limitedOffer .poiItem:not(.hasStarted) .descBox {flex-grow: 1;}
#limitedOffer .poiItem:not(.hasStarted) .offerBox, #limitedOffer .poiItem:not(.hasStarted) .priceGroup, #limitedOffer .poiItem:not(.hasStarted) .hashtags {display: none;}
#limitedOffer .poiItem.hasEnded .spaceholder {display: none;}
#limitedOffer .poiItem:not(.hasStarted) .btmBox {border: none; padding: .495rem 0;}
#limitedOffer .poiItem .btmBox .btn:not(.soon):not(.soldout), .poiItem.menuItem .btmBox .btn {background: linear-gradient(120deg, #009342, #00672e, #00672e, #a6dabe, #009342, #009342, #00672e, #00672e, #64c690, #009342, #009342);background-size: 350% 350%;-webkit-animation: btnBGCanimate 9s linear infinite;animation: btnBGCanimate 9s linear infinite;}
@-webkit-keyframes btnBGCanimate {
    0% {background-position: 0% 0%;}
    100% {background-position: 350% 0%;}
}
@keyframes btnBGCanimate {
    0% {background-position: 0% 0%;}
    100% {background-position: 350% 0%;}
}
#limitedOffer .poiItem .btmBox .btn:not(.soon):not(.soldout):before, .poiItem.menuItem .btmBox .btn:before {content: ''; display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; background: url(../img/icons/cart.svg) no-repeat center / contain; margin: -0.3rem .5rem 0 0;}
#limitedOffer .poiItem .btmBox .btn.soon {background: transparent; border: 1px solid; color: #a0a3a2; width: 100%;}
#limitedOffer .poiItem .btmBox .btn.soldout {background-color: #6d6d6d; color: #adadad; width: 100%;}
#limitedOffer .swiper-navs {bottom: 1rem; display: block; width: auto; text-align: center;}
#limitedOffer .swiper-button-next, #limitedOffer .swiper-button-prev {position: relative; display: inline-block;vertical-align: middle;text-align: center;top: auto;margin: 0;}
#limitedOffer .swiper-button-prev:after, #limitedOffer .swiper-button-next:after {line-height: 35px; color: #707070!important;}
#limitedOffer .swiper-pagination {margin: 0 1rem;bottom: auto;display: inline-block;position: relative;width: auto;left: auto;vertical-align: middle;}
#limitedOffer .swiper-pagination-bullet, #limitedOffer .swiper-pagination-bullet-active {background-color: #216e60; margin: 0 .15rem; transition: all .3s;}
#limitedOffer .swiper-pagination-bullet-active {width: 2.5rem; border-radius: .5rem;}

@keyframes float1 {
    0% {transform: translateY(0)}
    to {transform: translateY(min(.8163265306vw + 6.9387755102px,20px))}
}
@keyframes float2 {
    0% {transform: translate(0) scale(1)}
    to {transform: translate(min(.4081632653vw + 3.4693877551px,10px),-5px) scale(1.03)}
}
@keyframes float3 {
    0% {transform: translate(0) rotate(0)}
    to {transform: translate(min(.8163265306vw + 6.9387755102px,20px),min(.4081632653vw + 3.4693877551px,10px)) rotate(-3deg)}
}

.decos {margin: auto; max-width: 70rem; width: 100%; position: relative;}
.decos .deco {position: absolute; z-index: 5;}
.decos .deco1 {background: url(../img/decos/mac.png) no-repeat center / contain; width: 310px; height: 325px; top: -10rem; right: 105%;}
.decos .deco2 {background: url(../img/decos/oyster.png) no-repeat center / contain; width: 260px; height: 320px; top: 11rem; left: 104%;}
.decos .deco3 {background: url(../img/decos/lobster.png) no-repeat center / contain; width: 250px; height: 350px; top:-16rem; right: 110%;}
.decos .deco4 {background: url(../img/decos/shrimp.png) no-repeat center / contain; width: 270px; height: 330px; top: -15rem; left: 106%;}
.decos .deco5 {background: url(../img/decos/faded-mac.png) no-repeat center / contain; width: 270px; height: 190px; top: 21rem; left: -16%; z-index: 1;}
.decos .deco1.aos-animate {animation: float1 3s .5s ease-in-out infinite alternate;}
.decos .deco2.aos-animate {animation: float2 2s .7s ease-in-out infinite alternate;}
.decos .deco3.aos-animate {animation: float3 3s .5s ease-in-out infinite alternate;}
.decos .deco4.aos-animate {animation: float3 3s .6s ease-in-out infinite alternate;}
.decos .deco5.aos-animate {animation: float2 3s .5s ease-in-out infinite alternate;}

@media (max-width: 80em) {
    .decos .deco1 {width: 250px; height: 260px;top: -13rem; right: 97%;}
    .decos .deco2 {width: 215px; height: 270px; top: 12rem; left: 100%;}
    .decos .deco3 {width: 200px; height: 280px; top: -16rem; right: 103%; }
    .decos .deco4 {width: 210px; height: 260px; top: -15rem; left: 95%; }
    
}

@media (min-width: 48em) {
    #limitedOffer .dateTabs .dateTab.hasMenu:hover:before {opacity: 1;}
    #limitedOffer .listing {min-height: 30.75rem;}
}
 
@media (max-width: 48em) {
    #limitedOffer > .wrapper {padding: 0;}
    #limitedOffer .dateWrapper .startSaleTTImg {max-width: 13rem; margin: auto;}
    #limitedOffer .dateWrapper > div:first-child, #limitedOffer .dateWrapper > div:last-child {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%;flex: 0 0 100%; max-width: 100%;}
    #limitedOffer .dateTabs {padding: 0 1rem; margin-top: 3rem;}
    #limitedOffer .dateTabs .dateTab:before, #limitedOffer .dateTabs .dateTab:after {left: -2%; top: -50%; width: 110%; height: 210%; }
    #limitedOffer .dateTabs .dateTab .date {font-size: 2.25rem;}
    #limitedOffer .dateTabs .dateTab.notStarted.hasMenus .date:after, #limitedOffer .dateTabs .dateTab.notStarted.noMenus .date:after, #limitedOffer .dateTabs .dateTab.hasStarted.isCurrent .date:after, #limitedOffer .dateTabs .dateTab.hasEnded .date:after {/* bottom: 60%; width: 4.25rem; height: 4.25rem;  font-size: 1.15rem; */ bottom: 115%; right: 1%;}
    #limitedOffer .dateTabs .dateTab.hasEnded .date:after {padding: 1.5rem 0;}
    #limitedOffer .dateTabs .dateTab .time {font-size: 1.15rem;}
    #limitedOffer .swiper-navs {bottom: 0;}
    #limitedOffer .swiper-button-next, #limitedOffer .swiper-button-prev {margin: 0 2rem;}
    #limitedOffer .swiper-pagination {display: none;}
}

@media (min-width: 40em) {
    
}

@media (max-width: 40em) {
    #section2 {background: linear-gradient(0deg, #95afd3 15%, #fdf8ff 100%); /* -webkit-clip-path: circle(130rem at 50% calc(100% - 130rem)); clip-path: circle(130rem at 50% calc(100% - 130rem));*/}
    #section2 > .wrapper {background-size: 9rem;}
    #introOffer {padding-bottom: 3rem;}
    #introOffer > .row {height: auto;}
    #introOffer > .row > .column {max-width: 100%!important; padding: 0 .75rem;}
    #introOffer > .row > .column:nth-child(2) {order: 3}
    #introOffer > .row > .column:nth-child(3) {order: 2; width: 100%;}
    #introOffer .intro {max-width: 34rem; text-align: center;}
    #introOffer p {line-height: 1.65;}
    #introOffer .promoImg {margin-top: 1.5rem;}
    #introOffer .promoImg1 {max-width: 21rem;}
    #introOffer .date {max-width: 31rem;}

    .decos .deco1 {width: 110px; height: 120px;top: -9rem; right: 87%;}
    .decos .deco2 {width: 105px; height: 130px; top: 30rem; left: 83%;}
    .decos .deco3 {width: 120px; height: 170px; top: -10rem; right: 81%; z-index: 0;}
    .decos .deco4 {width: 135px; height: 165px; top: -10rem; left: 79%; z-index: 0;}
    .decos .deco5 {width: 170px; height: 120px; top: 36rem;}
}



#section3 {padding: calc(5% + 3rem) 0; background: linear-gradient(to bottom, #faf9e6, #fefcdb); background: url(../img/repeat-grid2.png), linear-gradient(to bottom, #faf9e6, #fefcdb); margin-top: -5%; }
#section3 .container {width: 90%; max-width: 80rem; padding: 14px 15px; margin: auto; background-image: radial-gradient(circle at 100% 100%, transparent 83px, #ffe59f 83px, #ffe59f 87px, transparent 87px), linear-gradient(to right, #ffe59f, #ffe59f), radial-gradient(circle at 0% 100%, transparent 83px, #ffe59f 83px, #ffe59f 87px, transparent 87px), linear-gradient(to bottom, #ffe59f, #f6e5c8, #ebc276, #e0a335, #f6e5c8, #d99d2f, #eecb8c, #f6e5c8), radial-gradient(circle at 0% 0%, transparent 83px, #f6e5c8 83px, #ffe59f 87px, transparent 87px), linear-gradient(to left, #ffe59f, #ffe59f), radial-gradient(circle at 100% 0%, transparent 83px, #ffe59f 83px, #f6e5c8 87px, transparent 87px), linear-gradient(to top, #f6e5c8, #eecb8c, #d99d2f, #f6e5c8, #e0a335, #ebc276, #f6e5c8, #ffe59f);background-size: 86px 86px, calc(100% - 170px) 3px, 86px 86px, 3px calc(100% - 170px) ;background-position: top left,top center,top right,center right, bottom right,bottom center,bottom left,center left;background-repeat: no-repeat; box-shadow: 0px 0px 5px rgb(0, 0, 0,.4); border-radius: 84px;}
#section3 .inner {background-image: linear-gradient(to bottom, #fefbee, #f7f1d4); padding: 1.5rem 0 2rem; border-radius: 76px;}
#section3 .row {max-width: 70rem;}
#section3 .ttImg {max-width: 75%;}

@media (min-width: 105em) {
    #section3 .container {max-width: 120rem; background: linear-gradient(305deg, rgba(255,229,159,1) 12%, rgba(255,247,230,1) 18%, rgba(235,194,118,1) 27%, rgba(255,237,200,1) 43%, rgba(255,247,230,1) 47%, rgba(217,157,47,1) 60%, rgba(238,203,140,1) 75%, rgba(255,247,230,1) 86%, rgba(255,229,159,1) 94%); background-size: 100%; padding: 16px;border-radius: 420px;}
    #section3 .container:before {content: ''; display: block; position: absolute; background-color: #000; top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 420px; background: url(../img/repeat-grid2.png) 105px 10px, linear-gradient(to bottom, #faf9e6, #FEFCDE);}
    #section3 .inner {border-radius: 400px;}
}

@media (min-width: 48em) {
    #section3 .medium-4 {-webkit-flex: 0 0 33.3333%;flex: 0 0 33.3333%;max-width: 33.3333%;}
}

@media (max-width: 40em) {
    #section3 {background-size: 9rem;}
}



#section4 {min-height: 50vh; background: #f0eaf2; background: url(../img/repeat-grid.png), linear-gradient(0deg, #9ab6d3 40%, #f0eaf2 100%); position: relative; }
#section4:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background: linear-gradient(0deg, #9ab6d3 40%, #f0eaf2 100%);}
#section4.contentLoaded:before {-webkit-animation-name: fadeoutW; -webkit-animation-duration: 1.5s;-webkit-animation-fill-mode: forwards;animation-name: fadeoutW; animation-duration: 1.5s;animation-fill-mode: forwards;opacity: 1;}
#section4 > .wrapper { padding: 1rem 0rem 3rem; position: relative;}
#section4 > .wrapper:before {content: ''; position: absolute; width: 100%; height: 3rem; bottom: 100%; left: 0; background: url(../img/repeat-grid.png) repeat-x left bottom, #f0eaf2; -webkit-clip-path: circle(350rem at 50% calc(0% + 350rem)); clip-path: circle(350rem at 50% calc(0% + 350rem));}

#filterFunction {z-index: 60;}
#filterFunction .container {padding: 0 1.5rem;}
#districtGroupTabs {max-width: 36rem; margin: auto;}
#districtGroupTabs .inner {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end;}
#districtGroupTabs .inner .tab-dg {font-size: 1.4rem; color: #216e60; font-weight: 700; line-height: 1; padding: .5rem .65rem .65rem; position: relative;}
#districtGroupTabs .inner .tab-dg.active:after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: #216e60;}
#districtGroupTabs .inner .tab-dg:not(.active) {cursor: pointer;}
#filterGroup {max-width: 58rem; margin: 2rem auto;}
#filterGroup .inner {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
#filterGroup #filterBoxes {display: flex; flex-flow: row nowrap; justify-content: space-between; -webkit-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%; position: relative;}
#filterGroup .filterBox {-webkit-flex: 0 0 47.5%;flex: 0 0 47.5%;max-width: 47.5%;}
#filterGroup .filterBox .filterHead {position: relative; padding: 0 3rem 0 2rem; background-color: #fff; color: #216e60; border-radius: 3rem; cursor: pointer;}
#filterGroup .filterBox.selected .filterHead {background-color: #216e60; color: #fff;}
#filterGroup .filterBox .filterHead .selectedOption {font-size: 1.25rem; line-height: 3.6rem; display: block; white-space: nowrap;}
#filterGroup .filterBox .filterHead i {display: block; transform: rotate(90deg); width: 1.5rem; height: 1.8rem; text-align: center; line-height: 1.8rem; position: absolute; top: 0; bottom: 0; right: 1.25rem; margin: auto;}
#filterGroup .filterBox.open .filterHead i {transform: rotate(-90deg);}
#filterGroup .filterBox .filterHead i:before {font-size: 1.15em;}
#filterGroup .dropmenu {border-radius: 1rem; background-color: #fffdf7; -webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.1));filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.1)); padding: 1.25rem; width: 40rem; position: absolute; top: calc(100% + 1.875rem);right: 0; transition: opacity, transform .3s ease; transform: translateY(-10%); opacity: 0; visibility: hidden;}
#filterGroup .dropmenu.show {visibility: visible; opacity: 1; transform: translateY(0);}
#filterGroup .dropmenu:before {content: ''; position: absolute; bottom: 99%; width: 0px; height: 0px; border-style: solid; border-width: 0 1.25rem 1.5rem 1.25rem; border-color: transparent transparent #FFFDF7 transparent;}
#filterGroup #dropmenu1:before {left: 0; right: 0; margin: auto;}
#filterGroup #dropmenu2:before {right: calc(14.75%);}
#filterGroup .dropmenu .list .wrap {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline;}
#filterGroup .dropmenu .list .wrap .option {-webkit-flex: 0 0 46.5%;flex: 0 0 46.5%;max-width: 46.5%; padding-top: .35rem; padding-right: 2rem; cursor: pointer; border-bottom: 1px solid #b5b5b5; position: relative;}
#filterGroup .dropmenu .list .option span.name {white-space: nowrap; display: block; line-height: 3.175rem; font-size: 1.25rem; color: #216e60;}
#filterGroup .dropmenu .list .option span.checkbox {right: 0; width: 1.5rem; height: 1.5rem; transform: translateY(.15rem); border: 1px solid #000; border-radius: 0;}
#clearFilterBtn {-webkit-flex: 0 0 10%;flex: 0 0 10%;max-width: 10%; padding: 0 .5rem 0 1.8rem; color: #216e60; font-size: 1rem; line-height: 2.5rem; font-weight: 700; cursor: pointer; position: relative;}

#filterMenuCheckbox {-webkit-flex: 0 0 24%;flex: 0 0 24%;max-width: 24%; background-color: #009342; border-radius: .35rem; padding: 0 2rem 0 1.25rem; position: relative; box-shadow: 0px 0px 3px rgba(0,0,0,0.2); cursor: pointer;}
#filterMenuCheckbox span {color: #fff; line-height: 3.6rem; font-size: 1.25rem; font-weight: 700;}
span.checkbox {position: absolute; right: 1rem; top: 0; bottom: 0; margin: auto; width: 1.75rem; height: 1.75rem; border-radius: 3px; border: 3px solid #216e60; background-color: #fff;}
span.checkbox:before {content: ''; display: inline-block;transform: rotate(45deg);height: .75rem; width: .45rem;border-bottom: .15rem solid #000; border-right: .15rem solid #000; position: absolute; top: .2rem; left: 0; right: 0; margin: auto; opacity: 0;}
.checked span.checkbox:before {opacity: 1;}

#bookingOrMenuSwitch {-webkit-flex: 0 0 36%;flex: 0 0 36%;max-width: 36%;}
#bookingOrMenuSwitch .container {border-radius: 5rem; background-color: #fff; padding: 0;}
#bookingOrMenuSwitch .switchBtn {font-size: 1.25rem; color: #216e60; font-weight: 500; line-height: 1; text-align: center; width: 50%; padding: 1rem 0; border-radius: 5rem; float: left; letter-spacing: 2px;}
#bookingOrMenuSwitch .switchBtn.active {pointer-events: none; color: #fff; background-color: #009342; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);}
#bookingOrMenuSwitch .switchBtn:not(.active) {cursor: pointer;}
#clearFilterBtn {-webkit-flex: 0 0 10%;flex: 0 0 10%;max-width: 10%; padding: 0 .5rem 0 1.8rem; color: #216e60; font-size: 1rem; line-height: 2.5rem; font-weight: 700; cursor: pointer; position: relative;}
#clearFilterBtn i {position: absolute; display: block; width: 1rem; height: 1rem; top: 0; bottom: 0; left: .5rem; margin: auto; background: url(../img/icons/trash.svg) no-repeat center / cover;}


#filteredResult {}
#filteredResult .notFoundMsg {font-size: 1.25rem; text-align: center; padding: 0 1.5rem; line-height: 1.3; margin: 6rem 0;}
/* #filteredResult .container {padding-bottom: 5rem;} */
#filteredResult .container {max-width: 77rem; width: 100%; margin: auto; padding: 0 1rem 5rem; display: flex; flex-flow: row wrap;}
/* #filteredResult .swiper-slide {width: 23.5rem;} */
#filteredResult .poiItem {width: 23.5rem; margin: 0 0.75rem 1.5rem;}
.poiItem { padding: .35rem .35rem .365rem;background-image: radial-gradient(circle at 100% 100%, transparent 16px, #ffe59f 16px, #ffe59f 18px, transparent 18px), linear-gradient(to right, #ffe59f, #ffe59f), radial-gradient(circle at 0% 100%, transparent 16px, #ffe59f 16px, #ffe59f 18px, transparent 18px), linear-gradient(to bottom, #ffe59f, #f6e5c8, #ebc276, #e0a335, #f6e5c8, #d99d2f, #eecb8c, #f6e5c8), radial-gradient(circle at 0% 0%, transparent 16px, #f6e5c8 16px, #ffe59f 18px, transparent 18px), linear-gradient(to left, #ffe59f, #ffe59f), radial-gradient(circle at 100% 0%, transparent 16px, #ffe59f 16px, #f6e5c8 18px, transparent 18px), linear-gradient(to top, #f6e5c8, #eecb8c, #d99d2f, #f6e5c8, #e0a335, #ebc276, #f6e5c8, #ffe59f);background-size: 18px 18px, calc(100% - 36px) 2px, 18px 18px, 2px calc(100% - 36px);background-position: top left,top center,top right,center right, bottom right,bottom center,bottom left,center left;background-repeat: no-repeat;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);border-radius: 16px;}
.poiItem .wrapper {background-color: #fff; border-radius: 14px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15); padding: .3rem; height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; }
.poiItem .imgBox {border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 6 / 4;}
.poiItem .imgBox .district {position: absolute; z-index: 1; top: .15rem; left: .625rem; color: #fff; font-size: 1rem;}
.poiItem .imgBox .district i {display: inline-block; vertical-align: middle; width: 1.5rem; height: 2.25rem; background: url(../img/icons/pin.svg) no-repeat center / cover; margin: .2rem .15rem 0 0;}
.poiItem .imgBox .imgs {width: 100%; height: 100%; overflow: hidden; aspect-ratio: 6 / 4; }
.poiItem .imgBox .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease;}
.poiItem .imgBox .img.active {opacity: 1;}
.poiItem .imgBox .hasBooking {position: absolute; bottom: 0; right: 0; z-index: 1; color: #fff; background-color: #f86e7e; font-size: 1.55rem; line-height: 1; padding: .45rem 1rem .6rem; border-top-left-radius: 12px;}
.poiItem .descBox {padding: .45rem .45rem .75rem; }
.poiItem.bookItem .descBox {flex-grow: 1;}
.poiItem .descBox .tt {font-size: 1.425rem; font-weight: 700; color: #2c2c30; margin: 0; line-height: 1.3;}
.poiItem .descBox .tt.en {letter-spacing: -.5px;}
.poiItem .descBox .period {font-size: 1.125rem; color: #5b5a61; line-height: 1.6; margin-top: .25rem;}
.poiItem .descBox .hashtags {margin-top: .75rem;}
.poiItem .descBox .hashtags span {font-size: 1.125rem; color: #a5a5a5; border: 1px solid #d3d3d3; line-height: 1.5; padding: 0 .35rem; margin-right: .25rem; margin-bottom: .25rem; display: inline-block; vertical-align: middle;}

.poiItem .descBox .periodTxt {margin-top: .5rem;}
.poiItem .descBox .periodTxt p {color: #717171; font-size: .875rem; font-weight: 500; line-height: 1.4;}

.poiItem .descBox .astNote {margin-top: .75rem;}
.poiItem .descBox .astNote small {display: block; color: #afafaf; font-size: .675rem; line-height: 1.4;}

.poiItem .btmBox {border-top: 1px dashed #d3d3d3; padding: .85rem 0 .495rem; /*height: 103px;*/}
.poiItem.bookItem .btmBox {border: none; padding-top: 0;}

.tmOfferBox {padding: .35rem .45rem 0;}
.tmOfferBox .offerItem {padding: .4rem .65rem; border-radius: 6px; border: 1px solid #d9d9d9;}
.tmOfferBox .offerItem > span.icon i {display: block; width: 80%; padding-bottom: 50%; background: url(../img/icons/booking.svg) no-repeat center / contain;}
.tmOfferBox .offerItem > span.tag span {display: block; background-color: #f86e7e; color: #fff; border-radius: 3px; line-height: 1; text-align: center; width: 100%; padding: .45rem 0 .35rem; font-size: .925rem;}
.tmOfferBox .offerItem > span.tt {display: block; font-size: .875rem; color: #2c2c30; padding-left: .65rem;}


.poiItem .offerBox {padding: 0 .45rem .5rem; flex-grow: 1;}
.poiItem .offerBox .hotsales{font-size: 0.8rem; color: white; position: absolute; top: -13%;  left: 82%; background-color: #8d8d8d; padding: 0 5px; border-radius: 18px;}
.poiItem .offerBox .offerItem {border: 1px solid #ccc; margin-bottom: .5rem; border-radius: .5rem; padding: .35rem .75rem;}
.poiItem .offerBox .offerItem.active {background-color: #009342; border: 1px solid #009342;}
.poiItem .offerBox .offerItem:not(.active) {cursor: pointer;}
.poiItem .offerBox .offerItem .subtt {color: #4d4d4d; font-size: .725rem; font-weight: 500; margin-bottom: .25rem;}
.poiItem .offerBox .offerItem.active .subtt {color: #fefcda;}
.poiItem .offerBox .offerItem .tt {color: #000; font-size: .96rem; font-weight: 600;}
.poiItem .offerBox .offerItem.active .tt {color: #fff;}

.poiItem .btmBox .priceGroup {padding: 0 .65rem;}
.poiItem .btmBox .menuPrice {display: none;}
.poiItem .btmBox .menuPrice.active {display: block;}
.poiItem .btmBox .buttonRow {padding: 0 .65rem;}

.poiItem .btmBox .priceO {color: #009342; font-weight: 700;}
.poiItem .btmBox .priceO span {font-size: 2.2rem; line-height: 1.375rem;}
.poiItem .btmBox .priceO span span{font-size: 1.3rem;}
.poiItem .btmBox .priceO small {font-size: 1.375rem; letter-spacing: 0; line-height: 1;}
.poiItem .btmBox .priceO small:last-child {font-size: 1.1rem;}
.poiItem .btmBox .priceD {color: #f86e7e;}
.poiItem .btmBox .priceD span {font-size: 1.25rem; text-decoration: line-through; float: right; line-height: 1.5;}
.poiItem .btmBox .srvFeeTxt {font-size: .8rem; color: #a0a3a2; font-weight: 600;}
.poiItem .btmBox .btnGroup {padding: 0 .45rem; margin-top: .75rem;}
.poiItem .btmBox .menuBtn {display: none;}
.poiItem .btmBox .menuBtn.active {display: block;}

.poiItem .btmBox .btn {font-size: 1.55rem; color: #fff; background-color: #009342; line-height: 3rem; padding: 0 1.5rem .1rem; border-radius: .45rem; text-align: center; display: inline-block; vertical-align: middle; width: calc(100% - 3.15rem);}
.poiItem .btmBox .ShareBtn {display: inline-block; vertical-align: middle; width: 2.5rem; height: 2.5rem; background: url(../img/icons/share-btn.png) no-repeat center center / contain; margin-left: .35rem;}

.swiper-navs {width: 13rem; position: absolute; margin: auto; left: 0; right: 0; bottom: 2rem;}
.swiper-button-prev, .swiper-button-next {width: 35px!important;height: 35px!important;background-color: #fff;border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); opacity: .8;}
.swiper-button-prev {left: 5px!important;}
.swiper-button-next {right: 5px!important;}
.swiper-button-prev:after, .swiper-button-next:after {font-size: 16px!important; color: #707070!important; font-weight: 700;}

#moreResult {}
#moreResult .moreTtImg {max-width: 22.5rem; margin: 2rem auto;}
#moreResult .container {max-width: 77rem; width: 100%; margin: auto; padding: 0 1rem; display: flex; flex-flow: row wrap;}
#moreResult .poiItem {width: 23.5rem; margin: 0 .75rem 1.5rem; animation: appearItem .5s ease-out;}
@keyframes appearItem {
    0% {opacity: 0; transform: translateY(-15%);}
    100% {opacity: 1; transform: translateY(0%);}
}

@media (min-width: 93.75em) {
    #section4 > .wrapper:before {height: 5rem;}
}

@media (min-width: 80em) {
    /* .poiItem .btmBox {height: 118px;} */
}

@media (max-width: 80em) {
    
}

@media (min-width: 48em) {
  
}

@media (max-width: 48em) {
    #moreResult > .container {padding: 0 .9rem;}
    /* .poiItem .btmBox {height: 74px;} */
}

@media (min-width: 40em) {
    #filterGroup .dropmenu .list .option:last-child, #filterGroup .dropmenu .list .option:nth-last-child(2):nth-child(odd) {border-bottom: none;}
    #filterGroup .dropmenu .list .tt {display: none;}
}

@media (max-width: 40em) {
    #section4 , #section4 > .wrapper:before {background-size: 9rem;}
    #filterFunction {z-index: 200;}
    #districtGroupTabs {max-width: 23rem;}
    #filterGroup {max-width: 30rem; margin-top: 1.5rem;}
    #filterGroup .inner {flex-wrap: wrap; justify-content: center;}
    #filterGroup #filterBoxes {-webkit-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%; margin-bottom: 1.5rem;}
    #filterGroup .filterBox .filterHead {border: 1px solid;}
    #filterGroup .dropmenu {z-index: 1000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; border-radius: 0; padding: 0; transform: translateY(0%); background: rgba(0,0,0,0.7);}
    #filterGroup .dropmenu .list {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 80%; height: 80%; box-shadow: 0 1px 3px rgb(0, 0, 0,.2); border-radius: 1rem; padding: 5rem 3.5rem 2rem; background-color: #fffdf7; align-content: center; transform: translateY(-10%); opacity: 0; transition: opacity, transform .3s ease;}
    #filterGroup .dropmenu.show .list {opacity: 1; transform: translateY(0);}
    #filterGroup .dropmenu:before {display: none;}
    #filterGroup .dropmenu .list .tt {display: block; width: 11rem; margin: 0 auto; position: absolute; left: 0; right: 0; top: 1.85rem; text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: 1px; color: #216e60; }
    #filterGroup .dropmenu .list .tt:before, #filterGroup .dropmenu .list .tt:after {content: ''; display: block; background: url(../img/icons/inv-diamond.png) no-repeat center / contain; width: 2rem; height: 2rem; position: absolute; top: 0; bottom: 0; margin: auto;}
    #filterGroup .dropmenu .list .tt:before {left: 0;}
    #filterGroup .dropmenu .list .tt:after {right: 0;}
    #filterGroup .dropmenu .list .wrap .option {-webkit-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%; padding-top: 0;}
    #filterGroup .dropmenu .list .wrap .option:last-child {border-bottom: none;}
    #filterGroup .dropmenu .list .wrap .option span.name {font-size: 1.4rem; line-height: 3.75;}
    #filterGroup .dropmenu .x {position: absolute; left: 0; right: 0; top: calc(90% + (10%/2)); transform: translateY(-60%); margin: auto; width: 9%; padding-bottom: 9%; border-radius: 50%; border: 1px solid #fff; background-color: rgb(255, 255, 255,.5);}
    #filterGroup .dropmenu .x:before, #filterGroup .dropmenu .x:after {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 2px; width: 50%; background-color: #5b5a61;}
    #filterGroup .dropmenu .x:before {transform: rotate(45deg);}
    #filterGroup .dropmenu .x:after {transform: rotate(-45deg);}
    #filterMenuCheckbox {-webkit-flex: 0 0 13rem;flex: 0 0 13rem;max-width: 13rem;}
    span.checkbox {border-width: 2px;}
    #bookingOrMenuSwitch {-webkit-flex: 0 0 20rem;flex: 0 0 20rem;max-width: 20rem;}
    #clearFilterBtn {-webkit-flex: 0 0 6rem;flex: 0 0 6rem;max-width: 6rem; margin-left: 1.25rem;}
    #filteredResult .container {padding-bottom: 6rem;}
    #filteredResult .container, #moreResult .container {justify-content: center;}
    .poiItem .offerBox .hotsales{left: 84%;}

}



#whatsappBox{max-width:140px;position:fixed;z-index:999;bottom:2rem;right:-200px;opacity:0;transition:all .3s ease-in-out;margin:auto}
#whatsappBox.show{right:1rem;opacity:1}
#whatsappBox img {-webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.6));filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.6));}
@media screen and (max-width: 40em) {
    #whatsappBox img{width: 9rem;}
}