#banner {margin-bottom: 3rem; text-align: center;}
#banner .inner {position: relative; display: inline-block;}
#banner .bannerImg {max-width: 54rem; width: 100%;}
#banner .tncBtn1, #banner .tncBtn2 {display: block; position: absolute; z-index: 1; width: 12%; padding-bottom: 4%; left: 24%;}
#banner .tncBtn1 {bottom: 38%;}
#banner .tncBtn2 {bottom: 10%;}

@media (max-width: 48rem) {
  #banner {margin: -3vw 0 0;}
  #banner .tncBtn1 {width: 23%; padding-bottom: 8%; bottom: 28%; left: 40%;}
  #banner .tncBtn2 {width: 23%; padding-bottom: 8%; bottom: 8%; left: 40%;}
}

@media (min-width: 48rem) {
  span.deco {position: absolute; z-index: 0;}
  
  span.deco1:after {content: ''; display: block; background: url(../images/subpage/booking/deco04.png) no-repeat center center; background-size: contain; width: 8vw; height: 10vw; max-width: 10rem; max-height: 12rem;}
  span.deco2:after {content: ''; display: block; background: url(../images/subpage/booking/deco05.png) no-repeat center center; background-size: contain; width: 11vw; height: 9vw; max-width: 13rem; max-height: 11rem;}
  span.deco3:after {content: ''; display: block; background: url(../images/subpage/booking/deco06.png) no-repeat center center; background-size: contain; width: 17.5vw; height: 16vw; max-width: 21rem; max-height: 19rem; transform: rotate(30deg);}
  span.deco4:after {content: ''; display: block; background: url(../images/subpage/booking/deco03.png) no-repeat center center; background-size: contain; width: 8vw; height: 8vw; max-width: 9rem; max-height: 9rem;}
  span.deco5:after {content: ''; display: block; background: url(../images/mainpage/deco05.png) no-repeat center center; background-size: contain; width: 9vw; height: 8vw; max-width: 10rem; max-height: 9rem;}
  span.deco6:after {content: ''; display: block; background: url(../images/mainpage/deco04.png) no-repeat center center; background-size: contain; width: 11vw; height: 10vw; max-width: 13rem; max-height: 12rem;}

  span.deco1 {top: 12rem; left: 4rem; animation: float4 3.6s ease-in-out infinite alternate;}
  span.deco2 {top: 8rem; right: 3rem; animation: float4 3s ease-in-out infinite alternate;}
  span.deco3 {top: 35rem; left: -2rem; animation: float2 3.2s ease-in-out infinite alternate;}
  span.deco4 {top: 30rem; right: 5rem; animation: float3 3s ease-in-out infinite alternate;}
  span.deco5 {bottom: 12rem; right: 2rem; animation: float2 3.3s ease-in-out infinite alternate;}
  span.deco6 {bottom: 20rem; left: 1rem; animation: float1 3s ease-in-out infinite alternate;}
}



.voucher{display:inline-block;vertical-align:top;text-align:left;margin:0 .5em 1em;font-size:1rem;width:400px;background-color:#fff;overflow: hidden;}
.voucher .vw .v {display: none}
.voucher .vw .v.active {display: block}
.voucher .btm .vw .v {margin-top: .8em}
.voucher .img {height: 200px;position: relative;border-style: solid;border-width: 1px 1px 0 1px;border-color: #dfdfdf}
.voucher .text{position:relative;padding:.85em 0 0 0;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;height:calc(100% - 200px)}
.voucher .text .top{-ms-flex:0 0 100%;-webkit-box-flex:0;-webkit-flex:0 0 100%;flex:0 0 100%;max-width:100%;padding:0 1.25em}
.voucher .text .name{font-size:1.5em;letter-spacing:0;color:#000;font-weight:800;line-height:1.2;margin:.3em 0 .4em}
.voucher .text .subtags{font-size:.9em;color:#8c8c8c;line-height:1;margin:.2em 0}
.voucher .text .tt{color:#000;font-weight:600;font-size:1.3em;-webkit-line-clamp:2;max-height:calc(1em * 1.5 * 2);display:-webkit-box;-webkit-box-orient:vertical;position:relative;line-height:1.5;overflow:hidden;text-overflow:ellipsis;margin:.4em 0 0.4em 0;padding-left:1em}
.voucher .text .tt:before{content:"";display:block;left:0;width:.3em;height:calc(1em * 1.5 * 2);background-color:green;position:absolute;top:0}
.voucher .text .desc p{font-size:1.1em;color:#8a8a8a;-webkit-line-clamp:3;max-height:calc(1em * 1.6 * 3);display:-webkit-box;-webkit-box-orient:vertical;position:relative;line-height:1.6;overflow:hidden;text-overflow:ellipsis}
.voucher .text .desc p:first-child~*,.voucher .text .desc ul,.voucher .text .desc ul~*{display:none}
.voucher .text .btm{-ms-flex:0 0 100%;-webkit-box-flex:0;-webkit-flex:0 0 100%;flex:0 0 100%;max-width:100%;-ms-flex-align:end;-webkit-box-align:end;-webkit-align-items:flex-end;align-self:flex-end;border-top:1px dashed #bdbdbd;margin-top:1em;padding:0 1.25em 1.2em}
.voucher .text .btm p{padding:.9em 0 .5em .2em;font-weight:400;color:#8c8c8c}
.voucher .text .btm p.vw1{display:none}
.vwPriceBtns.vw1{display:none}
.voucher .text .vwPriceBtns .morebtn,.voucher .text .vwPriceBtns .priceBtn{cursor:pointer;position:relative;font-size:1em;text-align:center;border-radius:4px;line-height:1.7;padding:0 .8em;border:1px solid;color:#bdbdbd;font-weight:600;display:inline-block;vertical-align:top;margin-right:.2em;margin-bottom:.3em;background-color:#f9f9f9;z-index: 2;}
.voucher .text .vwPriceBtns .priceBtn.active{color:#fff;background-color:#02a25a;border-color:#02a25a;cursor:default}
.voucher .text .vwPriceBtns .morebtn{font-size:.9em;line-height:1.94}
.voucher .text .prices{display:inline-block; max-width: calc(100% - 160px);}
.voucher .text .prices .price{display:inline-block;vertical-align:bottom}
.voucher .text .prices .price>span{display:inline-block;vertical-align:text-bottom;margin-right:.15em}
.voucher .text .prices .price .discount{color:#009245;font-size:2.5em;position:relative;font-weight:800;line-height:1;margin-right:.1em}
.voucher .text .prices .price .original{color:#ed1c24;font-size:.9em;display:block;padding-left:2px;text-decoration:line-through;font-style:italic;display:inline-block;letter-spacing:-1px}
.voucher .text .prices .sold{color:#8a8a8a;font-size:12px;padding:0 5px;line-height:1;display:inline-block;vertical-align:bottom;position:relative;top:-.2em;margin-left:1em;border-left:1px solid}
.voucher .text .vlinkBtn{display:inline-block;border-radius:5px;letter-spacing:1px;padding:0 .8em;line-height:2.3;font-size:1.1em;text-align:center;color:#fff;background-color:#00a25a;font-weight:600;float:right}
.voucher .tag{position:absolute;left:15px;top:10px;font-size:1.5em;color:#fff;font-weight:800;padding:0 8px;background-color:#02a25a;border-radius:3px;line-height:1.8;text-align:center}
 
.voucher .text .shareBtn {display: block; float:right; width: 40px; height: 40px; background: url(../images/social-icons/share_button.svg) no-repeat center center / contain; margin: .075rem 0 0 .65rem;}

@media (min-width: 769px) {
  .voucher .text .btm{border-radius:0 0 10px 10px}
  .voucher .text .vwPriceBtns .priceBtn:hover{border:1px solid red}
  .voucher .text .vlinkBtn:hover{background-color:#0ed87e}
  .voucher .img{border-radius:10px 10px 0 0}
  .voucher .text{border-radius:0 0 10px 10px;border-style:solid;border-width:0 1px 1px 1px;border-color:#dfdfdf}
  .voucher .text .vwPriceBtns .morebtn,.voucher .text .vwPriceBtns .priceBtn{font-size:1.1em;line-height:1.9}
  .voucher .text .vwPriceBtns .morebtn{font-size:1em;line-height:2.1}
  .voucher .text .tt:hover{background-color:#f0fff7}
}

@media (min-width: 769px) {
  .voucher{width:31%; /* min-width: 22rem; */}
}
@media (min-width: 1400px) {
  .voucher{width:31%;}
}
 
@media (min-width: 1500px) {
  .voucher .text .name{font-size:1.7em}
}

/* @media (max-width: 1215px) and (max-width: 1280px) {
  .voucher{margin:0 0.1em 1em;}
} */
@media (max-width: 768px) {
  .voucher{width:46%}
  .voucher .img{height:170px;}
  .voucher .text .shareBtn {width: 35px; height: 35px; margin: 0 0 0 .65rem;}
}

@media (max-width: 680px) {
  #resultList{min-height:100vh}
  #resultList .list{padding:2em 1em}
  .voucher{margin:0 0 1em;width:100%}
  .voucher .tag{font-size:1.4em}
  .voucher .text .name{font-size:1.4em}
  .voucher{border-bottom:2px solid #dfdfdf}
  .voucher .text .tt{-webkit-line-clamp:initial;max-height:100%;display:inline-block;overflow:initial;text-overflow:initial}
  .voucher .text .tt:before{height:100%}
  .voucher .text .btm {padding: 0 1.25em 0.95em;}
}

@media (max-width: 480px) {
  .voucher .img{height:197px}
}

@media (max-width: 400px) {
  .voucher .img{height:185px}
}

@media (max-width: 320px) {
  .voucher .text .name{font-size:1.3em}
  .voucher .img{height:160px}
}