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; 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; -webkit-backface-visibility: hidden; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;} html {scroll-behavior: smooth;} 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: 0; } .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.5; 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.5); 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.5 * 1); } .line-clamp-2 {-webkit-line-clamp : 2; height : calc(1em * 1.5 * 2); } .line-clamp-3 {-webkit-line-clamp : 3; height : calc(1em * 1.5 * 3); } .line-clamp-4 {-webkit-line-clamp : 4; height : calc(1em * 1.5 * 4); } .line-clamp-5 {-webkit-line-clamp : 5; height : calc(1em * 1.5 * 5); } /* lity css */ .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} .mbo {display: none;} .row .row {margin: 0} @keyframes card {0% {transform: rotateY(0deg)} 50% {transform: rotateY(-5deg)} 100% {transform: rotateY(5deg)}} body { margin: 0px; background-color: #fff; position: relative; height: 100%; font-family: Noto Sans TC, "Microsoft YaHei","Source Han Sans",PingFangHK,"Heiti TC",Arial,Verdana,sans-serif; font-weight: 400; color: #222;} #bodyWrap {margin: auto;} @media only screen and (max-width: 48rem) { /* html, body {font-size: 11px;} */ .mbo {display: block;} .dko {display: none!important;} } #header {background-color: #fff; padding: 1vw 2vw;} #header .inner {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;} #header .logos {display: flex; flex-flow: row nowrap; align-items: center;} #header .logos .openrice-logo {-ms-flex: 0 0 10vw; -webkit-flex: 0 0 10vw; flex: 0 0 10vw; max-width: 10vw;} #header .logos .openrice-logo img {width: 100%;} #header .logos .visa-logo {-ms-flex: 0 0 11vw; -webkit-flex: 0 0 11vw; flex: 0 0 11vw; max-width: 11vw; margin-left: .75vw; padding-bottom: 3vw; background: url(../images/logo-visa@2x.png) no-repeat center / contain;} #header .headerRight {display: flex; flex-flow: row nowrap; align-items: center;} #header .headerRight .langBtn {width: 4vw; display: block; font-size: 1vw; color: #4e3c2e; text-align: center; border: 1px solid; border-radius: .35vw; margin-right: 1.5vw; line-height: 2;} #header .headerRight .facebook-share {width: 1.25vw; padding-bottom: 1.5vw; display: block; background: url(../images/social-icons/fb1.svg) no-repeat center / contain;} @media only screen and (max-width: 48rem) { #header {padding: 2.5vw 3vw;} #header .logos .openrice-logo {-ms-flex: 0 0 18vw; -webkit-flex: 0 0 18vw; flex: 0 0 18vw; max-width: 18vw;} #header .logos .visa-logo {-ms-flex: 0 0 19vw; -webkit-flex: 0 0 19vw; flex: 0 0 19vw; max-width: 19vw; padding-bottom: 5vw;} #header .headerRight .langBtn {width: 10vw; font-size: 2.5vw; margin-right: 0; border-radius: 1vw; line-height: 1.5; padding: 0 0 .3vw;} } #KV img {width: 100%;} #introBlock {text-align: center; padding-top: 3.35vw;} #introBlock .textBlock {font-size: 2.5vw; font-weight: 500; line-height: 1.8;} .en #introBlock .textBlock {font-size: 1.95vw; letter-spacing: 0;} #introBlock .textBlock .buTxt {font-weight: 700; color: #4e3c2e;} #introBlock .textBlock .b {color: #0435d4;} .en #introBlock .textBlock .b {font-weight: 700;} #introBlock .textBlock .g {color: #1bc998;} #introBlock .textBlock .r {color: #ea201d;} #introBlock .textBlock .visa {display: inline-block; vertical-align: middle; width: 14vw; padding-bottom: 3vw; background: url(../images/logo-ClicktoPay.png) no-repeat center / contain; margin-top: -.35vw;} .en #introBlock .textBlock .visa {width: 11vw;} #introBlock .offerBlock {background-color: #f7f7f7; margin-top: 9.5vw; padding: 1px 0 3vw;} #introBlock .offerBlock .container {max-width: 82vw; margin: -7.5vw auto 0;} #introBlock .offerBoxes {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;} #introBlock .offerBoxes .offerBox {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;} #introBlock .offerBoxes .offerBox img {width: 100%;} #introBlock .text-ol {margin-top: 1vw; color: #555; text-align: left; padding: 0 1.5vw;} #introBlock .text-ol > p {font-size: 1.4vw; line-height: 1; margin-bottom: .85vw;} #introBlock .text-ol > ol {padding-left: 1.4vw;} #introBlock .text-ol > ol li {font-size: 1.4vw; line-height: 1.2; margin-bottom: .85vw; } #introBlock .date {background-color: #febc00; color: #4e3c2e; font-size: 1.85vw; font-weight: 700; display: inline-block; line-height: 2.4; padding: 0 5vw .2vw; margin: 1vw auto 1.25vw; border-radius: 1vw;} #introBlock .note {font-size: 1.75vw; font-weight: 600; line-height: 1; margin-bottom: 1vw;} #introBlock .tnc {display: inline-block; font-size: 1.25vw; font-weight: 300; line-height: 1; border-bottom: 1px solid; color: #466adf; padding-bottom: .3vw; letter-spacing: 0;} @media only screen and (min-width: 48rem) { #introBlock .offerBoxes .offerBox {perspective: 100rem;} #introBlock .offerBoxes .offerBox img:hover {animation: card .8s cubic-bezier(.62, .28, .23, .99) infinite alternate; backface-visibility: hidden;} } @media only screen and (max-width: 48rem) { #introBlock {padding-top: 5vw;} #introBlock .textBlock {max-width: 90vw; margin: auto; font-size: 4.5vw; line-height: 1.7;} .en #introBlock .textBlock {font-size: 4.15vw;} #introBlock .offerBlock {margin-top: 19vw; padding-bottom: 4vw;} #introBlock .offerBlock .container {margin-top: -16.5vw;} #introBlock .offerBoxes .offerBox {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} #introBlock .text-ol > p {font-size: 3vw; margin-bottom: 1vw;} #introBlock .text-ol > ol {padding-left: 3vw;} #introBlock .text-ol > ol li {font-size: 3vw; line-height: 1.5;} #introBlock .date {font-size: 3.85vw; padding: 0 8vw .2vw; margin: 2vw auto 2.5vw;} .en #introBlock .date {padding: 2vw 15vw 2.2vw; line-height: 1.5;} #introBlock .note {font-size: 3.35vw;} #introBlock .tnc {font-size: 2.6vw;} } #howToBlock {padding: 2vw 0; background: url(../images/howtouse_bg.gif);} #howToBlock .tabGroup {text-align: center;} #howToBlock .tabGroup .container {max-width: 42vw; margin: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;} #howToBlock .tabGroup .tab {-ms-flex: 0 0 47.5%; -webkit-flex: 0 0 47.5%; flex: 0 0 47.5%; max-width: 47.5%; border-radius: 1.25vw; overflow: hidden; background-color: #febc00; padding: .375vw; cursor: pointer; transition: all .2s ease-in-out;} #howToBlock .tabGroup .tab.active {background-color: #fff;} #howToBlock .tabGroup .tab > * {display: block; font-size: 1.85vw; font-weight: 700; line-height: 1.3; color: #0435d4; background: linear-gradient(168deg,#fff 60%, #e0e3e7 80%); box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.25); border-radius: 1vw; padding: 1vw 0; transition: all .2s ease-in-out;} #howToBlock .tabGroup .tab.active > * {background: #febc00; color: #4e3c2e; } #howToBlock .howToContentGroup .container {max-width: 76vw; margin: auto;} #howToBlock .howToContent {max-height: 0; opacity: 0; overflow: hidden; position: relative; transition: max-height .2s ease-in-out, opacity .4s ease-in-out;} #howToBlock .howToContent.expanded {opacity: 1;} #howToBlock .howToContent .closeBtn {display: block; width: 4vw; height: 4vw; border-radius: 50%; position: absolute; top: 4vw; right: 0; background-color: #fff; cursor: pointer;} #howToBlock .howToContent .closeBtn:before, #howToBlock .howToContent .closeBtn:after {content: ''; display: block; position: absolute; width: 60%; height: 4px; background-color: #0435d4; top: 0; bottom: 0; left: 0; right: 0; margin: auto;} #howToBlock .howToContent .closeBtn:before {transform: rotate(45deg);} #howToBlock .howToContent .closeBtn:after {transform: rotate(-45deg);} #howToBlock .howToContent .inner {display: flex; flex-flow: row wrap; justify-content: space-between; padding: 3.5vw 0 2vw;} #howToBlock .phoneBlock {-ms-flex: 0 0 34%; -webkit-flex: 0 0 34%; flex: 0 0 34%; max-width: 34%;} #howToBlock .phoneBlock .phone {position: relative; padding: 1.5vw 1.5vw 3.65vw; border-radius: 1.5vw; background-color: #ccc;} #howToBlock .phoneBlock .phone .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} #howToBlock .phoneBlock .phone .swiper-pagination {position: absolute; width: 100%; bottom: 1.3vw; left: 0; text-align: center;} #howToBlock .phoneBlock .phone .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 .5vw; width: .85vw; height: .85vw;} #howToBlock .phoneBlock .phone .swiper-pagination-bullets .swiper-pagination-bullet-active {background: #febc00;} #howToBlock .stepsBlock {-ms-flex: 0 0 60%; -webkit-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; display: flex; flex-flow: column nowrap; justify-content: space-around;} #howToBlock .stepTitle {font-size: 3.15vw; line-height: 1.4; font-weight: 700; color: #fff;} #howToBlock .stepsBlock ol {list-style: none; counter-reset: custom-counter;} #howToBlock .stepsBlock ol li {color: #fff; font-size: 1.75vw; font-weight: 500; line-height: 1.5; margin-bottom: .95vw; counter-increment: custom-counter; position: relative; cursor: pointer;} #howToBlock .stepsBlock ol li.active {color: #febc00; font-weight: 800;} @media only screen and (min-width: 48rem) { .en #howToBlock .stepTitle {font-size: 2.85vw;} #howToBlock .stepsBlock ol {padding-left: 1.85vw;} .en #howToBlock .stepsBlock ol li {font-size: 1.6vw;} #howToBlock .stepsBlock ol li::before {content: counter(custom-counter); position: absolute; left: -1.85vw; display: inline-block;} #howToBlock .stepsBlock ol li.active::before {border-bottom: 4px solid;} } @media only screen and (max-width: 48rem) { #howToBlock {padding: 4vw 0;} #howToBlock .tabGroup .container {max-width: 88vw;} #howToBlock .tabGroup .tab {border-radius: 8px; padding: 3px;} #howToBlock .tabGroup .tab > * {font-size: 3.85vw; line-height: 1.4; border-radius: 5px; box-shadow: none; padding: 1.5vw 0;} #howToBlock .howToContent .inner {padding: 10vw 0 7vw;} #howToBlock .howToContent .closeBtn {width: 7vw; height: 7vw;} #howToBlock .phoneBlock, #howToBlock .stepsBlock {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} #howToBlock .phoneBlock .phone {padding: 4.5vw 4.5vw 11.5vw;} #howToBlock .stepTitle {font-size: 4.5vw; line-height: 1.3; text-align: center; margin-bottom: 4vw;} #howToBlock .stepsBlock ol {margin-top: 3vw; padding-left: 0;} #howToBlock .stepsBlock ol li {font-size: 3.95vw; display: none;} #howToBlock .stepsBlock ol li.active {display: block; color: #fff;} #howToBlock .phoneBlock .phone .swiper-pagination {bottom: 2.5vw;} #howToBlock .phoneBlock .phone .swiper-pagination-bullets .swiper-pagination-bullet {width: 2.5vw; height: 2.5vw; margin: 0 1.5vw;} } #buSection {padding: 0 0 5vw;} #buSection .buBlock {margin-top: 5vw;} #buSection .buBlock .container {max-width: 80vw; margin: auto; position: relative;} #buSection .buBlock .header {position: relative; margin-bottom: 1.75vw;} #buSection .buBlock .ttImg {display: block; margin: auto;} #buSection .buBlock .moreBtn {display: inline-block; position: absolute; right: 0; bottom: 1vw; font-size: 1.6vw; font-weight: 500; line-height: 2.6; padding: 0 1.5vw .1vw 2.25vw; color: #fff; background-color: #0435d4; border-radius: 10vw;} #buSection .buBlock .moreBtn:after {content: ''; display: inline-block; vertical-align: middle; width: 1.25vw; height: 1.15vw; margin: 0 0 .25vw .65vw; background: url(../images/arrow_y.png) no-repeat center / contain; transition: all .2s ease-in-out;} #buVoucherBlock .ttImg {max-width: 25vw; padding-bottom: 7vw; background: url(../images/logo-voucher_tc@2x.png) no-repeat center / contain;} .en #buVoucherBlock .ttImg {background: url(../images/logo-voucher_en@2x.png) no-repeat center / contain;} #buTasBlock .ttImg {max-width: 25vw; padding-bottom: 7vw; background: url(../images/logo-tas_tc@2x.png) no-repeat center / contain;} .en #buTasBlock .ttImg {background: url(../images/logo-tas_en@2x.png) no-repeat center / contain;} @media only screen and (min-width: 48rem) { #buSection .buBlock .moreBtn:hover:after {transform: translateX(20%);} } @media only screen and (max-width: 48rem) { #buSection {padding: 0 0 15vw;} #buSection .buBlock {position: relative; padding-bottom: 15vw;} #buSection #buTasBlock.buBlock {margin-top: 9vw;} #buSection .buBlock .container {max-width: 82vw; position: unset;} #buSection .buBlock > .container {position: relative;} #buVoucherBlock .ttImg {max-width: 60vw; padding-bottom: 17vw;} #buTasBlock .ttImg {max-width: 62vw; padding-bottom: 18vw;} #buSection .buBlock .header {position: unset; margin-bottom: 3.5vw;} #buSection .buBlock .moreBtn {left: 0; margin: auto; display: block; width: 32vw; font-size: 4.25vw; bottom: 0; padding: 0 4vw .1vw 6vw;} .en #buSection .buBlock .moreBtn {width: 38vw;} #buSection .buBlock .moreBtn:after {width: 3.5vw; height: 3.5vw; margin: 0 0 .5vw 1.5vw;} } #buSection .buBlock .swiper-button-next, #buSection .buBlock .swiper-button-prev {width: 4.5vw; height: 4.5vw; box-shadow: 0 0 8px -1px rgba(0, 0, 0, .35); border-radius: 50%; background-color: #fff;} #buSection .buBlock .swiper-button-next {right: 0; transform: translateX(70%);} #buSection .buBlock .swiper-button-prev {left: 0; transform: translateX(-70%);} #buSection .buBlock .swiper-button-next::after, #buSection .buBlock .swiper-button-prev::after {content: ''; display: block; position: absolute; width: 45%; height: 45%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: url(../images/arrow_g.png) no-repeat center / contain;} #buSection .buBlock .swiper-button-prev::after {transform: rotate(180deg);} #buSection .buBlock .swiper-slide {padding: 1px 3px 4px;} @media only screen and (max-width: 48rem) { #buSection .buBlock .swiper-button-next, #buSection .buBlock .swiper-button-prev {width: 8.5vw; height: 8.5vw;} #buSection .buBlock .swiper-button-prev {transform: translateX(-50%);} #buSection .buBlock .swiper-button-next {transform: translateX(50%);} } .voucher {display:block; text-align:left; margin:0; width: 100%; overflow: hidden; box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, .25); border-radius: .5vw;} .voucher .vw .v {display: none} .voucher .vw .v.active {display: block} .voucher .btm .vw .v {margin-top: .85vw} .voucher .img {height: 16vw; position: relative;} .voucher .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .voucher .tag {position: absolute; left: 1vw; top: .8vw; font-size: 1.8vw; color: #fff; font-weight: 800; padding: 0 .8vw .2vw; background-color: #02a25a; border-radius: .25vw; line-height: 1.6; text-align: center;} .voucher .text {position:relative; padding: .85vw 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% - 16vw); background-color:#fff;} .voucher .text .top { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding:0 1.25em} .voucher .text .name {font-size: 2.1vw; letter-spacing: 0; color:#000; font-weight: 800; line-height: 1.2;margin: .5vw 0 .7vw} .voucher .text .subtags {font-size:1.05vw; font-weight: 500; color:#8c8c8c; line-height: 1; margin: .2vw 0;} .voucher .text .tt {color:#000; font-weight:600; font-size:1.7vw; -webkit-line-clamp:2; max-height:calc(1em * 1.4 * 2); display:-webkit-box; -webkit-box-orient:vertical; position:relative; line-height:1.4; overflow:hidden;text-overflow:ellipsis; margin: .4vw 0 .6vw; padding-left: 1.5vw} .voucher .text .tt:before {content:"";display:block;left:0;width:.5vw;height:calc(1em * 1.4 * 2);background-color:green;position:absolute;top:0} .voucher .text .desc p {font-size: 1.1vw; font-weight: 500; color:#8a8a8a; -webkit-line-clamp:3;max-height:calc(1em * 1.5 * 3); display:-webkit-box; -webkit-box-orient:vertical; position:relative;line-height:1.5; 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-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: .85vw; padding: 0 1.25em 1.2em} .voucher .text .btm p {padding: .6vw 0 .5vw; font-size: .95vw; 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:1vw;text-align:center;border-radius:4px;line-height:1.7;padding:0 .8vw;border:1px solid;color:#bdbdbd;font-weight:600;display:inline-block;vertical-align:top;margin-right:.2vw;margin-bottom:.3vw;background-color:#f9f9f9;z-index: 2;} .voucher .text .vwPriceBtns .priceBtn.active{color:#fff;background-color:#02a25a;border-color:#02a25a;cursor:default} .voucher .text .priceAndctaRow {display: flex; flex-flow: row nowrap; align-items: center;} .voucher .text .prices {display: block; -ms-flex:0 0 51%; -webkit-flex:0 0 51%; flex: 0 0 51%; max-width: 51%; margin-right: 2%;} .voucher .text .prices .price {display: inline-block; vertical-align: bottom} .voucher .text .prices .price > span {display: inline-block; vertical-align:text-bottom;} .voucher .text .prices .price .discount {color:#009245;font-size: 2.6vw; position:relative; font-weight:800;line-height:1; margin-right: .5vw} .voucher .text .prices .price .original {color:#ed1c24; font-size: 1.1vw; display:block; text-decoration:line-through; font-style:italic; display:inline-block; letter-spacing:-1px} .voucher .text .vlinkBtn {display: block; -ms-flex:0 0 33%; -webkit-flex:0 0 33%; flex:0 0 33%; max-width: 33%; margin-right: 3%; border-radius: .3vw; text-align: center; letter-spacing: .05vw; padding: 0 0 .2vw;line-height: 2.2; font-size: 1.35vw; color:#fff; background-color:#00a25a; font-weight:600;} .voucher .text .shareBtn {display: block; -ms-flex:0 0 11%; -webkit-flex:0 0 11%; flex:0 0 11%; max-width: 11%; padding-bottom: 11%; background: url(../images/social-icons/share_button.svg) no-repeat center center / contain; } @media (min-width: 48rem) { .voucher .text .vwPriceBtns .priceBtn:hover{border:1px solid red} .voucher .text .vlinkBtn:hover{background-color:#0ed87e} .voucher .text .tt:hover{background-color:#f0fff7} } @media (max-width: 48rem) { .voucher{height: auto!important;} .voucher .img{height: 45vw;} .voucher .tag {left: 3vw; top: 2vw; font-size: 6vw; padding: 0 2vw .4vw; border-radius: 1vw;} .voucher .text {padding-top: 2.85vw;} .voucher .text .top {padding: 0 4vw;} .voucher .text .btm {padding: 0 4vw 3.5vw; margin-top: 3vw;} .voucher .text .subtags {font-size: 3.15vw;} .en .voucher .text .subtags {font-size: 3vw;} .voucher .text .name {font-size: 6vw; margin: 1.5vw 0;} .en .voucher .text .name {font-size: 5vw;} .voucher .text .tt {font-size: 4.5vw; padding-left: 3.5vw; -webkit-line-clamp: 3; max-height: calc(1em * 1.4 * 3); margin: 2vw 0;} .en .voucher .text .tt {-webkit-line-clamp: 4; max-height: calc(1em * 1.4 * 4);} .en .voucher .text .tt {font-size: 3.65vw;} .voucher .text .tt:before {width: 1.5vw; height: 100%;} .voucher .text .desc p {font-size: 3.35vw;} .en .voucher .text .desc p {font-size: 3vw;} .voucher .btm .vw .v {margin-top: 2.85vw;} .voucher .text .btm p {font-size: 3vw; padding: 1.5vw 0;} .voucher .text .vwPriceBtns .morebtn, .voucher .text .vwPriceBtns .priceBtn {font-size: 4vw; padding: 0 2vw; margin-right: 1vw; margin-bottom: 1vw;} .voucher .text .prices .price .discount {font-size: 7.25vw; margin-right: 1vw;} .voucher .text .prices .price .original {font-size: 3.65vw;} .voucher .text .vlinkBtn {font-size: 4vw; border-radius: 1.5vw;} } .offerItem {display:block; text-align:left; margin:0; width: 100%; overflow: hidden; box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, .25); border-radius: .5vw; background-color: #fff;} .offerItem .itemTop .offerImg {height: 16vw; position: relative;} .offerItem .itemTop .offerImg img {display: block; width: 100%; height: 100%; object-fit: cover;} .offerItem .itemTop .offerImg .tag {position: absolute; left: 1vw; top: .8vw; font-size: 1.8vw; color: #fff; font-weight: 800; padding: 0 .8vw .2vw; background-color: #008543; border-radius: .25vw; line-height: 1.6; text-align: center;} .offerItem .itemBtm {position:relative; padding: .85vw 0 1.25em; display: flex; flex-flow:row wrap; height: calc(100% - 16vw); background-color:#fff;} .offerItem .itemBtm > div {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 1.25em;} .offerItem .itemBtm .newJoin {margin-left: -2px; color: #f57144; border: 1px solid #f57144; border-radius: 3px; display: inline-block; margin: 0 5px 0 0; padding: 3px 7px 2px; font-size: 12px; line-height: 1;} .offerItem .itemBtm small {font-size:1.05vw; font-weight: 500; color:#8c8c8c; line-height: 1; margin: .2vw 0;} .offerItem .itemBtm .poiName {font-size: 2.1vw; letter-spacing: 0; color:#000; font-weight: 800; line-height: 1.2;margin: .5vw 0 .8vw;} .offerItem .itemBtm .offerDesc {border-top: 1px solid #dfdfdf; display: block; width: 100%; padding: 0.75vw 0 1.5vw; font-size: 1.45vw; color: #000; font-weight: 500; line-height: 1.3;} .offerItem .ctaRow {display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; align-items: center; -ms-flex-align: end; -webkit-box-align: end; -webkit-align-items: flex-end; align-self: flex-end;} .offerItem .btn {display: block; -ms-flex:0 0 33%; -webkit-flex:0 0 33%; flex:0 0 33%; max-width: 33%; border-radius: .3vw; text-align: center; letter-spacing: .05vw; padding: 0 0 .2vw;line-height: 2.2; font-size: 1.35vw; color:#fff; background-color:#ec1e24; font-weight: 600;} .offerItem .period {display: block; -ms-flex:0 0 48%; -webkit-flex:0 0 48%; flex:0 0 48%; max-width: 48%;} .offerItem .shareBtn {display: block; -ms-flex:0 0 13%; -webkit-flex:0 0 13%; flex:0 0 13%; max-width: 13%; padding-bottom: 13%; background: url(../images/social-icons/share_button.svg) no-repeat center center / contain;} @media (min-width: 48rem) { .offerItem .btn:hover {background-color:#ff0007;} } @media (max-width: 48rem) { .offerItem {height: auto!important;} .offerItem .itemTop .offerImg {height: 45vw;} .offerItem .itemTop .offerImg .tag {left: 3vw; top: 2vw; font-size: 6vw; padding: 0 2vw .4vw; border-radius: 1vw;} .offerItem .itemBtm > div {padding: 0 4vw;} .offerItem .itemBtm small {font-size: 3.15vw;} .en .offerItem .itemBtm small {font-size: 3vw;} .offerItem .itemBtm .poiName {font-size: 6vw; margin: 1.5vw 0 3vw;} .en .offerItem .itemBtm .poiName {font-size: 5vw;} .offerItem .itemBtm .offerDesc {font-size: 4vw; padding: 1.75vw 0 3.5vw;} .en .offerItem .itemBtm .offerDesc {font-size: 3.5vw;} .offerItem .btn {font-size: 4vw; border-radius: 1.5vw;} } .footerWrap {position: relative; background-color: #000; padding: 30px 30px;} .footerWrap .container {max-width: 90vw; margin: auto;} .footerWrap .row {max-width: none;} .footTopTxt {color: #fff;} .footTopTxt p {font-weight: 600; margin-bottom: 5px; font-size: 1.4vw;} .footTopTxt small {font-size: 1vw;} .footTopSocialGroup {text-align: right;} .footTopSocialGroup .foot-social {display: inline-block; vertical-align: middle; margin: 0 .5vw; width: 1.5vw; height: 1.5vw;} .footTopSocialGroup .foot-social.ig {background: url(https://static5.orstatic.com/info/dbs-instaredeem/images/instagram.svg) no-repeat center center; } .footTopSocialGroup .foot-social.yt {background: url(https://static6.orstatic.com/info/dbs-instaredeem/images/youtube.svg) no-repeat center center; } .footTopSocialGroup .foot-social.fb {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/facebook.svg) no-repeat center center; } .footerCR {color: #fff; margin-top: 8px; text-align: right;} .footerCR > span.copyright-text {font-size: .85vw;} #OR_FOOT_logo {display: inline-block; vertical-align: middle; width: 1.65vw; height: 1.65vw; margin-right: 5px; background: url(https://static5.orstatic.com/info/global/img/footer-or-logo.png) no-repeat center / contain;} #backtopBtn {position: absolute; left: 0; right: 0; margin: auto; top: -20px; width: 41px; height: 41px; background: url(https://www.openrice.com/info/global/img/backtopArr.png) no-repeat center center; background-color: #fff; cursor: pointer; z-index: 10; border: 1px solid #b7b7b7; border-radius: 50%;} @media only screen and (max-width: 640px) { .footerWrap {padding: 8vw 7vw; text-align: center;} #backtopBtn {width: 8vw; height: 8vw; top: -4vw; background-size: 90%;} .footTopTxt p {font-size: 4.5vw;} .footTopTxt small {font-size: 3vw; display: block; line-height: 1.7;} .footTopSocialGroup {text-align: center; margin-top: 20px;} .footTopSocialGroup .foot-social {width: 5vw; height: 5vw; margin: 0 2vw;} .footerCR {text-align: center;} .footerCR .mRowDrop {display: block;} .footerCR > span.copyright-text {font-size: 2.5vw;} #OR_FOOT_logo {width: 3.5vw; height: 3.5vw;} }