#backbtn{position: absolute; top: 1.5rem; z-index: 100; width: 8rem;right: 7rem;}
#backbtn > a{display: block; width: 100%; border-radius: 4rem; background-color: #fff; text-align: center; font-size: .975rem; font-weight: 700; line-height: 2.725rem; color: #4e3d2c; border: 1px solid; box-shadow: 2px 3px 0 0 rgba(78, 61, 44, 1); transition: all .15s ease-in-out;}
#backbtn > a:hover{transform: translate(2px, 3px);}
#backbtn > a:before{content: ''; display: inline-block; vertical-align: middle; width: 20%; padding-bottom: 15%; background: url(../images/redemption/btn-back.png) no-repeat center / contain; margin: -1.5% 0 0 3%; }

#pageTop:before, #pageTop:after {content: ''; display: block; width: 100%; position: absolute; top: 0; left: 0; padding-bottom: 17%; z-index: 0;}
#pageTop:before {background: url(../images/KV/sky-pattern.png) center;}
#pageTop:after {background: url(../images/KV/city.png) repeat-x -19% bottom / 63% auto;}
#pageTop .container {position: relative; z-index: 1; padding-top: 2.5%;}
#pageTop .ttImgWrap {position: relative; width: 30%; margin: 0 auto 2%;}
#pageTop .ttImgWrap:before {content: ''; display: block; position: absolute; z-index: 0; top: -22%; left: 0; right: 0; margin: auto; background: url(../images/KV/kv-deco1.png) no-repeat center / contain; width: 100%; padding-bottom: 40%;}
#pageTop .ttImgWrap .ttImg {position: relative; width: 100%; z-index: 1;}
#pageTop .ttImgWrap .deco {position: absolute; display: block;}
#pageTop .ttImgWrap .deco span {display: block; width: 100%;}
#pageTop .ttImgWrap .deco1 {right: 100%; top: -10%; width: 32%;}
#pageTop .ttImgWrap .deco2 {right: 120%; bottom: -63%; width: 100%;}
#pageTop .ttImgWrap .deco3 {right: 95%; bottom: -10%; width: 21%;}
#pageTop .ttImgWrap .deco4 {left: 94%; bottom: -18%; width: 95%;}
#pageTop .ttImgWrap .deco1 span {background: url(../images/KV/kv-cloud2.png) no-repeat center / contain; padding-bottom: 40%; animation: float1 4s .5s ease-in-out infinite alternate;}
#pageTop .ttImgWrap .deco2 span {background: url(../images/redemption/deco-1.png) no-repeat center / contain; padding-bottom: 100%;}
#pageTop .ttImgWrap .deco3 span {background: url(../images/redemption/deco-ppl.png) no-repeat center / contain; padding-bottom: 123%;}
#pageTop .ttImgWrap .deco4 span {background: url(../images/redemption/deco-2.png) no-repeat center / contain; padding-bottom: 73%;}
#pageTop .tncBtn {display: block; color: #ff774f; font-size: 1.575rem; font-weight: 900; line-height: 2.55; border-radius: 5rem; width: 90%; max-width: 22rem; padding: 0; text-align: center; background-color: #fff; margin: auto; transition: all .2s;}
#pageTop .tncBtn:after {content: ''; display: inline-block; vertical-align: middle; width: 9%; padding-bottom: 9%; background: url(../images/redemption/btn-question.png) no-repeat center / contain; margin: -1.5% 0 0 3%;}

@media (min-width: 48rem) {
    #pageTop .tncBtn:hover {transform: scale(1.035);}
}

@media (min-width: 78.75rem) {
    #pageTop .tncBtn {max-width: 22vw; font-size: 1.5vw; }
}

@media (max-width: 48rem) {
    #backbtn{right: 4rem; top: 0.7rem;width: 6rem;}
    #backbtn > a{line-height: 2rem; font-size: .8rem;}
    #pageTop {margin-bottom: 2rem;}
    #pageTop:before, #pageTop:after {padding-bottom: 30%;}
    #pageTop:after {background-size: 100% auto;}
    #pageTop .container {padding-top: 15%;}
    #pageTop .ttImgWrap {width: 65%; margin: 0 auto 3%;}
    #pageTop .ttImgWrap .deco1 {right: 45%; top: -30%;}
    #pageTop .ttImgWrap .deco2 {right: 95%; bottom: -30%; width: 65%;}
    #pageTop .ttImgWrap .deco3 {width: 18%;}
    #pageTop .ttImgWrap .deco4 {width: 60%; left: 85%; bottom: -5%;}
    #pageTop .tncBtn {font-size: .85rem; max-width: 11rem;}
}


#bookingList { padding: 80px 20px 80px; position: relative; z-index: 5; }

#bookingList .ttImg { max-width: 60rem; margin-bottom: 50px; transform: translateX(-2rem); }
#pointBox { color: #412500; margin-bottom: 5rem; height: 60px; }
#pointBox .container .inner { max-width: 72rem; margin: auto; font-size: 0; padding: 3px; border-radius: 4px; }

#filterBox { background-color: #fff; display: inline-block; vertical-align: middle; width: 70%; margin-bottom: 0; border-radius: 5px; font-size: 0; transition: top .3s ease-in-out; }
#filterBox > h3 { line-height: 60px; font-weight: 600; font-size: 20px; margin: 0; letter-spacing: 0px; width: 80px; padding: 0; text-align: center; }
#filterBox .optrow { position: relative; cursor: pointer; padding: 0 20px; width: calc(50% - 40px); white-space: nowrap; }
#filterBox > h3, #filterBox .optrow { display: inline-block; vertical-align: top; height: 60px; }
#filterBox .optrow:before { content: ''; display: block; position: absolute; width: 1px; height: 70%; left: 0; top: 0; bottom: 0; margin: auto; background-color: #fea388; }
#filterBox .optrow:after { content: ''; display: block; position: absolute; background: url(../images/redemption/btn-arrow.png) no-repeat center / contain; width: 1rem; height: .85rem; right: 1.5rem; top: 25px; }
#filterBox .optrow > span { display: inline-block; vertical-align: middle; line-height: 60px; font-size: 20px; letter-spacing: 0px; }
#filterBox .optrow > span.active { }
#filterBox .optrow .flist { position: absolute; z-index: 1; top: 100%; left: 0; margin: auto; border-radius: 5px; background-color: #fff; white-space: nowrap; box-shadow: 0px 0px 2px rgba(0,0,0,.2); padding: 7px 20px; opacity: 0; display: none; min-width: 130px; }
#filterBox .optrow.show .flist { opacity: 1; display: block; animation: show .3s; -webkit-transform: translateY(0px); transform: translateY(0px); }

@keyframes show {
    0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
#filterBox .optrow .flist .opt { position: relative; font-size: 20px; cursor: pointer; line-height: 2; border-bottom: 1px solid #ccc; padding: 0 5px 0 25px; }
#filterBox .optrow .flist .opt:last-child { border: none; }
#filterBox .optrow .flist .opt > span { border-radius: 50%; display: block; width: 15px; height: 15px; border: 1px solid #ccc; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
#filterBox .optrow .flist .opt > span:before { content: ''; display: block; border-radius: 50%; width: 11px; height: 11px; position: absolute; left: 1px; top: 1px; }
#filterBox .optrow .flist .opt.active > span:before { background-color: #EA5F3E; }

#pointsBox { display: inline-block; vertical-align: middle; width: 29%; margin-left: 1%; }
#pointsBox #login { display: block; text-align: center; font-size: 20px; cursor: pointer; line-height: 60px; background-color: #079344; color: #fff; border-radius: 5px; }
#pointsBox p { font-size: 20px; line-height: 60px; display: none; padding: 0 15px; text-align: center; font-weight: 600; letter-spacing: 2px; background-color: #fff; border-radius: 5px; }

#resultList { font-size: 0; }
#resultList .item { display: none; width: 31.134%; margin: 0 1.1% 3rem; background-color: #ff7750; position: relative; cursor: pointer; border-radius: 2.1rem; }
#resultList .item.show { display: inline-block; vertical-align: top; }
#resultList .item .img { aspect-ratio: 9 / 6; position: relative; border-radius: 2rem 2rem 0 3rem; }
#resultList .item .img .badge { position: absolute; width: 6rem; height: 6rem; display: table ; top: -1rem; left: -1rem; background: url(../images/redemption/offer-badge.svg) no-repeat center center / contain; border-radius: 50%; }
#resultList .item .img .badge span { text-align: center; display: table-cell; vertical-align: middle; font-size: 1.6rem; line-height: 0.8; color: #ff7750; font-weight: 800; letter-spacing: -1px; padding-top: 10%; }
#resultList .item .img .badge span small { display: block; font-size: .85rem; }
#resultList .item .img .logo { position: absolute; max-width: 120px; max-height: 100px; right: 5px; bottom: 5px; }
#resultList .item .txt { padding: 15px 20px; min-height: 90px; border-radius: 0 0 2rem 2rem; }
#resultList .item .txt p { font-size: 17px; font-weight: 600; text-align: center; }
#resultList .item .txt .tt { color: #fff; }
#resultList .item .txt .hl { color: #009440; }
#resultList .item .link { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#resultList .item .link.show { display: block; }

#noresult { background-color: #e6e6e6; width: 97.6%; margin: 0 1.3%; text-align: center; display: none; }
#noresult.show { display: block; }
#noresult p { color: #9e9e9e; font-size: 20px; font-weight: 600; margin: 30px auto 0; }

#gift .js-modal-body { width: 100%; }
#gift .js-modal-body iframe { width: 100%; display: block; height: 90vh; max-height: 90vh; border: none; }

/* Disable badge */
.disable {width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; flex-flow: column nowrap; justify-content: center; text-align: center; color: #fff; font-weight: 700; border-radius: 2rem 2rem 0 3rem;}
.disable:before {content: ''; display:block; width: 100%; height: 35%;}
.disable.c1:before {background: url(../images/redemption/ppl1.png) no-repeat center / contain;}
.disable.c2:before {background: url(../images/redemption/ppl2.png) no-repeat center / contain;}
.disable.c3:before {background: url(../images/redemption/ppl3.png) no-repeat 45% center / contain;}
.disable.c4:before {background: url(../images/redemption/ppl4.png) no-repeat center / contain;}
.disable[data-alert]:after {content: attr(data-alert); display: block; width: 100%; text-align: center; height: 1.3em; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px;}



@media screen and ( min-width:769px) {
    #pointBox.sticky .container {
        position: fixed;
        top: 0px;
        z-index: 10;
        width: 100%;
        left: 0;
        background-color: #fff;
        box-shadow: 0px 0px 6px 1px rgba(0,0,0,.2);
    }
    #pointBox .container .inner {
        position: relative;
    }
    #noresult {
        padding: 100px 0;
    }
    #bookingList {
        min-height: 60vh;
    }
    #bookingList .maxInner {
        max-width: 73rem;
        margin: auto;
    }
    #gift .js-modal-body {
        width: 450px;
    }
}

@media screen and ( max-width:768px) {
    #pointBox { height: auto; margin-bottom: 20px; }
    #pointBox .container .inner { padding: 55px 0 0; background-color: transparent; }
    #filterBox { position: absolute; top: 0; left: 0; width: 100%; }
    #filterBox, #pointsBox { width: 90%; margin: 0 5%; display: block; }
    .sticky #filterBox { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2); }
    #filterBox > h3 {font-size: 14px; line-height: 50px; width: 60px;}
    #filterBox > h3, #filterBox .optrow {height: 50px;}
    #filterBox .optrow {width: calc(50% - 30px);}
    #filterBox .optrow:after {width: .6rem; height: .5rem; right: .65rem; top: 22px;}
    #filterBox .optrow > span {font-size: 14px; line-height: 50px;}
    #filterBox .optrow > span.active { position: absolute; left: 15px; background-color: #fff; }
    #filterBox .optrow > span.active.f {width: calc(100% - 30px);}
    #filterBox .optrow .flist {padding: 6px 15px;}
    #filterBox .optrow .flist .opt {line-height: 3; font-size: 15px;}

    #bookingList {padding: 3rem .75rem;}
    #bookingList .maxInner > .row, #bookingList .maxInner > .row > .columns:first-child {position: initial;}
    #bookingList .ttImg {max-width: 22rem; width: 100%; margin-bottom: 30px; transform: none;}
    #resultList {margin-top: 40px;}
    #resultList .item {width: 100%; margin: 0 0 10px; position: relative; height: 100%; border-radius: 0;}
    #resultList .item.show {display: flex; flex-flow: row nowrap;}
    #resultList .item .img, #resultList .item .txt {min-height: 100px; border-radius: 0;}
    #resultList .item .img .logo {display: none;}
    #resultList .item .img .badge {right: .25rem; left: auto; top: 0; bottom: 0; margin: auto; width: 4rem; height: 4rem;}
    #resultList .item .img .badge span {font-size: 1.2rem;}
    #resultList .item .img .badge span small {font-size: .75rem;}
    #resultList .item .img {position: initial; -ms-flex: 0 0 32%; -webkit-flex: 0 0 32%;flex: 0 0 32%; max-width: 32%;}
    #resultList .item .txt {-ms-flex: 0 0 calc(68% - 4.5rem); -webkit-flex: 0 0 calc(68% - 4.5rem);flex: 0 0 calc(68% - 4.5rem); max-width: calc(68% - 4.5rem); padding: 15px; border-right: 3px solid #F3F3F3; display: flex; align-items: center;}
    #resultList .item .txt .tt {display: table-cell; vertical-align: middle; font-size: 16px; line-height: 1.3;}
    #resultList .item .txt .hl {display: none;}
    #noresult {padding: 80px 40px; margin-bottom: 40px;}
    #noresult p {font-size: 16px;}
    .disable {border-radius: 0;}
    .disable:before {height: 2.85rem;}
    .disable[data-alert]:after {font-size: 1rem;}
}


@media screen and ( max-width:320px) {
    #filterBox .optrow .flist .opt, #resultList .item .txt .tt {
        font-size: 13px;
    }
    .disable {
        font-size: 16px;
    }
}