/*GENERAL*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {margin: 0;padding: 0;} 

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.left { float: left; }
.right { float: right; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
:focus { outline: none; }
.hidden { display: none; }
span.nobreak, i.nobreak {white-space: nowrap; }
* html .clearfix { zoom: 1; }
/* IE6 */
*:first-child + html .clearfix { zoom: 1; }
/* IE7 */
img { max-width: 100%; display: block; }
img.ctrImg { display: block; margin: auto; }
img.maxWidth{width: 100%}
html {scroll-behavior: smooth;}

@font-face { 
  font-family: 'openrice';
  src:  url('../fonts/icomoon.eot?vcyzrx');
  src:  url('../fonts/icomoon.eot?vcyzrx#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?vcyzrx') format('truetype'),
    url('../fonts/icomoon.woff?vcyzrx') format('woff'),
    url('../fonts/icomoon.svg?vcyzrx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class*=" icon-"], [class^=icon-] {font-family: openrice!important;speak: none;font-style: normal;font-weight: 700;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.icon-facebook:before {content: "\ea90";}
.icon-chevron-thin-left:before {content: "\e902";}
.icon-chevron-thin-right:before {content: "\e901";}

h1 {font-size: 2.9em; line-height: 1.2;}
h3 { font-size: 1.6rem; line-height: 1.3; }
p { font-size: 1rem; line-height: 1.6; }
a { text-decoration: none !important; }
.zh h1, .zh h3, .zh p, .zh a, .zh small {letter-spacing: .5px; }
.en *, .en {letter-spacing: 0!important;}
small { font-size: 14px; line-height: 1.5; }
.txtYellow {color: #ffd54a;}
.alignCtr { margin: auto; width: 90%; }
.noScroll { overflow: hidden; }
.txtCtr { text-align: center; }
.noPmargin > p { margin: 0; }

.fx {-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.row1, .row2, .row3 {text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;white-space: normal; }
.row1 {-webkit-line-clamp: 1;}
.row2 {-webkit-line-clamp: 2;}
.row3 {-webkit-line-clamp: 3;}
.line-clamp {display: block; display : -webkit-box; -webkit-box-orient : vertical; position: relative; line-height        : 1.2; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; }
.line-clamp:after {content: ''; text-align : right; bottom: 0; right: 0; width: 25%; display : block; position: absolute; height: calc(1em * 1.2); background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%); }
@supports (-webkit-line-clamp: 1) {.line-clamp:after {display : none !important; } }
.line-clamp-1 {-webkit-line-clamp : 1; height : calc(1em * 1.2 * 1); }
.line-clamp-2 {-webkit-line-clamp : 2; height : calc(1em * 1.2 * 2); }
.line-clamp-3 {-webkit-line-clamp : 3; height : calc(1em * 1.2 * 3); }
.line-clamp-4 {-webkit-line-clamp : 4; height : calc(1em * 1.2 * 4); }
.line-clamp-5 {-webkit-line-clamp : 5; height : calc(1em * 1.2 * 5); }
.preloader { text-align: center; padding: 4em; }
#preloader {font-size: 0; padding: 0; text-align: center;}    


.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#000;background:rgba(0,0,0,0.8);outline:none!important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}
.lity.lity-opened{opacity:1}
.lity.lity-closed{opacity:0}
.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none!important}
.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;}
.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}
.lity-loading .lity-loader{opacity:1}
.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none!important}
.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease; position: relative; border: 15px solid #fff;background-color: #fff;max-height: 100vh!important;}
.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}
.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:10px; top: 10px; margin:auto;background-color: #000; -webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:32px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;outline:0;-webkit-box-shadow:none;    box-shadow: 0 2px 3px rgba(0,0,0,.6); border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%; border: 2px solid #fff;}
.lity-close::-moz-focus-inner{border:0;padding:0}
.lity-image img{max-width:100%;display:block;line-height:0;border:0}
.lity-iframe .lity-container{width:100%;}
.lity-iframe-container{width:100%;height:0;padding-top:100vh;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}
.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);}
.lity-hide{display:none!important}
.lity-active html, .lity-active body {overflow: hidden;}

.containerL { width: 100%; margin: auto; max-width: 1200px; }
.containerS { width: 100%; margin: auto; max-width: 1050px; }

.mbo {display: none;}
.row .row {margin: 0}

/* skeleton */
.skeleton {background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; -webkit-animation: shine 1s ease infinite; animation: shine 1s ease infinite; }


@-webkit-keyframes shine {
  to {background-position: right -40px top 0;}
}
@keyframes shine {
  to {background-position: right -40px top 0;}
}

#headerNew {position: relative; background-color: #fff; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25); z-index: 1;}
#headerNew > .inner { padding: 15px; }
#headerNew .openrice-logo > img { height: 30px; display: inline-block; }
#headerNew .headerRight { float: right; margin-top: 2px;}
#headerNew .headerRight .li { color: #4e3c2e;font-size: 12px;font-weight: 700;display: inline-block;vertical-align: middle;margin-left: 5px; position: relative;}
#headerNew .headerRight .li:first-child {font-size: 13px;}
#headerNew .headerRight .li > a , #headerNew .headerRight .li > div:first-child {color: #4e3c2e;font-size: 12px; border: 1px solid #4e3c2e; padding: 5px 12px; border-radius: 20px; line-height: 1;cursor: pointer;}
#headerNew .headerRight a.buynow{font-weight: 800;border: initial;font-size: 15px; background-color: #f71c31; padding: 5px 12px;border-radius: 3px;line-height: 1; cursor: pointer; letter-spacing: 2px;  color: #ffffff;}
#headerNew .headerRight .li a.facebook-share {padding: 5px 6px; margin-left: 5px; border-radius: 50%; line-height: 1.2;}

@media (max-width:640px) {
  #headerNew .openrice-logo > img { height: 22px; display: inline-block;}
  #headerNew .headerRight {margin-top: 2px;}
}

@media (max-width:340px) {
  #headerNew .openrice-logo > img {height: 19px;}
}


@media (max-width:320px) {
  #headerNew > .inner { background-color: #fff; padding: 10px; border-bottom: 1px solid #eee;}
}

span.nobreak {white-space: nowrap;}



body { margin: 0px; background-color: #fff; position: relative; height: 100%; font-family: "Noto Sans TC", Lato, "Microsoft YaHei","Source Han Sans",PingFangHK,"Heiti TC",Arial,Verdana,sans-serif; }

#bodyWrap { margin: auto; min-width: 1260px;  }

#bodyContent {overflow: hidden;}



@media only screen and (max-width: 768px) {

  #bodyWrap { margin: auto; min-width: 0;  }

}



@media only screen and (max-width: 640px) {
  p {font-size: 14px;}
  .mbo {display: block;} .dko {display: none!important;}
}




.footerWrap .footerTop {background-color: #000; padding: 30px 15px;}
.footTopTxt {color: #fff;}
.footTopTxt p {font-weight: 600; margin-bottom: 5px; font-size: 1.1rem;}
.footTopTxt small {font-size: .8em;}
.en .footTopTxt small {font-size: .75em;}
.footTopSocialGroup {text-align: right;}
.footTopSocialGroup .foot-social {display: inline-block; vertical-align: middle; margin: 0 5px; }
.footTopSocialGroup .foot-social.ig {background: url(../images/instagram.svg) no-repeat center center; width: 20px; height: 20px;}
.footTopSocialGroup .foot-social.yt {background: url(../images/youtube.svg) no-repeat center center; width: 20px; height: 20px;}
.footTopSocialGroup .foot-social.fb {background: url(../images/facebook.svg) no-repeat center center; width: 20px; height: 20px;}

#tncBtn {color: #fff; border: 1px solid; border-radius: 2px; display: inline-block; vertical-align: middle; line-height: 2; padding: 0 8px; font-size: .7rem; margin-left: 10px;}

.footerCR {color: #fff; margin-top: 5px; text-align: right;}
.footerCR > span {display: inline-block; vertical-align: middle;}
.footerCR > span.copyright-text {font-size: .6rem; margin-left: 5px;}
#backtopBtn {position: absolute;right: 20px;top: -20px;width: 41px;height: 41px;background: url(https://www.openrice.com/info/global/img/backtopArr.png) no-repeat center center / contain;cursor: pointer;}

@media only screen and (max-width: 640px) {
  .footTopTxt {text-align: left;}
  .footTopTxt p {font-size: .8rem;}
  .footTopTxt small {font-size: .6em;} 
  .footTopSocialGroup {text-align: center; margin-top: 20px;}
  .footerCR {text-align: center;}
  .footerCR > span#OR_FOOT_logo {max-width: 15px; vertical-align: top;}
  .footerCR .mRowDrop {display: block;}
}

@media (max-width: 360px) {.footerCR > span {font-size: 9px;}}



#indexTop {background: #ffbb00; background: linear-gradient(90deg, #ffbb00 5%, #ffe196 25%, #fff3d6 40%, #ffe196 55%, #ffbb00 100%); overflow: hidden;}

#KV {position: relative; clip-path: polygon(0% 0%, 100% 0%, 100% 67%, 0% 88%); z-index: 0; overflow: hidden;} 

#scrollAlertBar { --scroll-width: 110vw; --scroll-height: 3.5rem; --scroll-items-displayed: 7; --scroll-items-width: calc(var(--scroll-width) / var(--scroll-items-displayed)); --scroll-animation-duration: calc(var(--scroll-items) * 3s); width: var(--scroll-width); height: var(--scroll-height); overflow: hidden; position: relative; -webkit-transform: rotate(-3.5deg); -moz-transform: rotate(-3.5deg); transform: rotate(-3.5deg); margin-left: -5vw; margin-top: -6.6%; z-index: 1; background-color: #fff;}
#scrollAlertBar ul {list-style: none; height: 100%; width: 100%; display: flex; animation: scrolling var(--scroll-animation-duration) linear infinite;}
#scrollAlertBar ul li {display: flex;justify-content: center;align-items: center; flex-shrink: 0; width: var(--scroll-items-width); max-height: 100%; font-size: calc((var(--scroll-width) / var(--scroll-items-displayed)) * 1 / 13.5); white-space: nowrap; color: #ff6800; font-weight: 600; letter-spacing: 0; }
#scrollAlertBar ul li span {color: #00b961; margin-right: .5rem;}

@keyframes scrolling {
  0% {transform: translateX(0);}
  100% {transform: translateX(calc(-1 * var(--scroll-items-width) * var(--scroll-items)));}
}

#introBoxWrap {position: relative; padding: .85% 1.25rem 3rem; text-align: center;}
#introBoxWrap .containerS {position: relative;}
#introBoxWrap p {line-height: 1.45; font-size: 1.5rem; letter-spacing: 1px; color: #00a75b; font-weight: 700; margin-bottom: .85rem;}
#introBoxWrap p span.red {font-size: 1.25em; color: #ff2b37; font-weight: 800;}
#introBoxWrap .cou {display: block; margin: 0; position: relative;}
#introBoxWrap .deco {position: absolute; left: 105%; top: -12%; width: 500px; height: 115px; background: url(../images/text.png) no-repeat center / contain;}

@media only screen and (min-width: 769px) {
  #scrollAlertBar {--scroll-items-displayed: 5;}
  #introBoxWrap p {margin-top: 7%;}
  #introBoxWrap .row .columns:last-child {padding-left: 2.5rem;}
}

@media only screen and (min-width: 1500px) {
  #scrollAlertBar {--scroll-items-displayed: 7;}
}

@media (max-width: 768px) {
  #introBoxWrap {padding: 30px 20px 40px; }
  #introBoxWrap p {font-size: 1.4rem;}
  #introBoxWrap .cou {width: 60%;}
  #introBoxWrap .cou:last-child {margin: 5px 0 30px 20%; }
  #indexTop {background: linear-gradient(300deg, #ffbb00 5%, #ffe196 20%, #fff3d6 30%, #ffe196 45%, #ffbb00 80%);}
  #introBoxWrap p {font-size: 1.1rem; line-height: 2rem;}
  #scrollAlertBar {--scroll-height: 5rem; --scroll-items-displayed: 2; -webkit-transform: rotate(-10.75deg); -moz-transform: rotate(-10.75deg); transform: rotate(-10.75deg); margin-top: -21%; }

}

@media (max-width: 640px) {
  #scrollAlertBar {--scroll-height: 3rem;}
}



@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInImg {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* Float */
.float-effect {
  display: inline-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);
}

.float-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.floating-img {
  transform: translateY(-10%);
  animation: floater 4s ease-in-out infinite;
  transition: ease 0.4s;
}

.floating-img2 {
  transform: translateY(-20%);
  animation: floater2 4.5s ease-in-out infinite;
  transition: ease 0.5s;
}


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

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



/* Tab Menu */
.anchorNav {margin: 0 auto 20px auto;position: relative; height: 85px; text-align: center; }
.anchorNav .container {-webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; top: -70px; text-align: center; font-size: 0; background-color: #00a759; padding: 1rem 1rem .8rem;}
.anchorNav.sticky .container {position: fixed; z-index: 5; width: 100%; max-width: 100%; right: 0; top: 0; -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s; box-shadow: 0px 0px 6px 1px rgba(0,0,0,.2); }

.anchorNav .filterBtn, .anchorNav .allBtn {display: inline-block; vertical-align: middle; position: relative; margin: 0 .75rem; cursor: pointer; padding: 0; height: 55px; width: 160px; background: url(../images/tab/tabs.png) no-repeat; background-size: 108% auto;}

.anchorNav .filterBtn#tap-1 {background-position: center 1.165%;}
.anchorNav .filterBtn#tap-2 {background-position: center 11.95%;}
.anchorNav .filterBtn#tap-3 {background-position: center 22.725%;}
.anchorNav .filterBtn#tap-4 {background-position: center 33.5%;}
.anchorNav .allBtn {background-position: center 44.275%; }

.anchorNav .filterBtn:after, .anchorNav .allBtn:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: url(../images/tab/tabs.png) no-repeat; background-size: 108% auto; transition: opacity .2s;}

.anchorNav .filterBtn#tap-1:after {background-position: center 55.05%;}
.anchorNav .filterBtn#tap-2:after {background-position: center 65.975%;}
.anchorNav .filterBtn#tap-3:after {background-position: center 76.95%;}
.anchorNav .filterBtn#tap-4:after {background-position: center 87.9%;}
.anchorNav .allBtn:after {background-position: center 98.8%;}
.anchorNav .filterBtn.active:after, .anchorNav .allBtn.active:after {opacity: 0;}

@media (min-width: 769px) {
  .anchorNav .filterBtn:hover:after, .anchorNav .allBtn:hover:after {opacity: 0;}
}

@media (max-width: 768px) {
  .anchorNav {height: 80px;}
  .anchorNav .container {font-size: 0; white-space: nowrap;overflow-y: scroll;-ms-overflow-style: none;scrollbar-width: none; padding: 10px;}
  .anchorNav .container::-webkit-scrollbar {display: none;}
  .anchorNav .filterBtn, .anchorNav .allBtn {height: auto; margin: 0 1%; width: 24%; padding-bottom: 8%;}
}

@media (max-width: 640px) {
  .anchorNav {height: 65px;}
  .anchorNav .filterBtn, .anchorNav .allBtn { width: 35%; padding-bottom: 12%;}
}





.result_wrapper {background: #ffeb91; background: linear-gradient(0deg, #ffeb91 30%, #fffae4 100%);padding-bottom: 20px;}

.poiList {margin: auto; font-size: 0; text-align: center; display: none;}

.poiList.active {display: block;}

.poiList .catListTTImg {max-width: 300px; margin-bottom: 40px;}

.offerItem {box-shadow: 0px 1px 10px -1px #ddd; position: relative; text-align: left; background-color: #fff; border-radius: 1rem;}

.offerItem .btn a {min-width: 90px;}

#tasPage .offerItem .itemTop .offerImg {border-radius: 1rem 1rem 0 0;}
#tasPage .offerItem .itemTop .badge .offerTxt span small{width: 45px!important; line-height: 1.1!important; font-size:12px!important;}

.en #tasPage .offerItem .itemTop .badge .offerTxt span small, #tasPage.en .offerItem .itemTop .badge .offerTxt span small {letter-spacing: 0!important; width: 53px!important;}

#tasPage .itemBtm .offerDesc > span {list-style: decimal;display: list-item;margin-left: 1.15em;margin-bottom: .5em;}
#tasPage .itemBtm .offerDesc > span > strong{color:red;}

.result_wrapper .newIcon {position: absolute; right: 8px; top: -15px; background: url(../images/new-poi-icon.png) no-repeat center center; background-size: contain; width: 54px; height: 78px;}

#tasPage .offerItem .btn {display: inline-block; bottom: 20px; border-radius: 5px; position: absolute; left: 15px; padding: 0 0.8em; line-height: 2.5; font-size: 1.1em; text-align: center; font-weight: 600; color: #fff; background-color: #ec1e24;}

.result_wrapper .period {display: inline-block;color: #6c6c6c;position: absolute;left: 130px; bottom: 23px;font-size: .9rem;
    line-height: 1.3em;
    letter-spacing: 1px;}

@media (min-width: 769px) {
  .result-container {margin-bottom: 40px;}
  .poiList {padding: 40px 0;}
}

@media (min-width: 641px) {
  .offerItem {width: 330px; display: inline-block; vertical-align: top; margin: 0 15px 30px; padding: 0 0 90px; }
}

@media (max-width: 768px) {
  .result-container {padding: 0 15px 20px;}
  #tasPage .offerItem {margin-bottom: 20px!important;}
  #tasPage .offerItem .itemTop .badge .offerTxt span small {height: 45px!important;line-height: 1.4!important;}
  .en #tasPage .offerItem .itemTop .badge .offerTxt span small {width: 60px!important;}
  #tasPage .offerItem .btn {position: relative;bottom: auto;}
  .result_wrapper .period {position: relative; left: 30px; bottom: -10px;}
} 


#floatingOrderBtn {position: fixed;z-index: 5; top: 35vh; left: 100px; opacity: 0;transition: all .3s ease-in-out;}
#floatingOrderBtn.show {opacity: 1; left: 1rem;}
#floatingOrderBtn a {display: block; width: 350px;}

#whatsappBox {position: fixed;z-index: 5;bottom: 2rem;right: 100px;opacity: 0;transition: all .3s ease-in-out;}
#whatsappBox.show {right: 1rem;opacity: 1;}
#whatsappBox a {display: block; width: 210px;}

@media screen and ( max-width:768px) {
  #floatingOrderBtn {top: auto; bottom: 1rem;}
  #floatingOrderBtn a {width: 200px;}
  #whatsappBox {bottom: 1rem;}
  #whatsappBox a {width: 120px;}
}



.tt {color: #1a1a1a;font-weight: 600; line-height: 1.4;letter-spacing: 2px;}