/*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; 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; } .clickableArea {width:100vw;height: 100vh;position: absolute;z-index: 1;} .mbl {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;} img.ctrImg { display: block; margin: auto; } img.ctrImg.KV { display: block; margin: auto; width: 100%;} img.ctrImg.card { display: block; margin: auto; height: 55px;} img.ctrImg.offertt { display: block; margin: auto; width: 80%; max-width: 700px} img.ctrImg.vouchertt { display: block; margin: auto; width: 100%; max-width: 550px} img.ctrImg.howtott { display: block; margin: auto; width: 90%; max-width: 700px} img.ctrImg.poitt { display: block; margin: auto; width: 80%; max-width: 350px} @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; } html { scroll-behavior: smooth; } [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 * {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.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} .linkbtn {display: inline-block;box-shadow: inset -0.5px -1.9px 5px 0 rgba(0, 1, 0, 0.35); background-image: linear-gradient(to top, #b5c0e7, #eeeaf3); padding: 7px 20px; color: #1a3444; text-align: center; letter-spacing: 2px; font-weight: 600; line-height: 1;} .containerL { width: 100%; margin: auto;} .containerM { width: 100%; margin: auto; max-width: 1150px;} .containerXS { width: 100%; margin: auto; max-width: 750px;} .containerCard { width: 100%; margin: auto; max-width: 1150px;} @media (min-width:641px) { .containerL { max-width: 1000px; } /*.containerM {width: 70%;}*/ .containerXS {width: 70%;} } @media (min-width:1300px) { .containerL { width: 100%; margin: auto; max-width: 1200px; } } @media (min-width:1500px) { .containerL { width: 100%; margin: auto; max-width: 1450px; } } @media (max-width:640px) { .containerL { max-width: 100%; } .containerM { width: 85%; } .containerCard { width: 100%; } .containerXS { width: 75%;} img.ctrImg.vouchertt {width: 88%;margin-bottom:2%;} img.ctrImg.card { height: auto;} .mbl {display: block;} } .containerS { width: 100%; margin: auto; max-width: 1000px; } .containerSS { width: 100%; margin: auto; max-width: 600px; } .mbo {display: none;} #tcBtn {display: inline-block;} .row .row {margin: 0} .en * {letter-spacing: 0!important;} span.nobreak {white-space: nowrap;} .caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;} .headerInner{position:relative}@font-face{font-family:icomoon;src:url(https://www.openrice.com/info/global/icomoon/icomoon.eot?ee7fk8);src:url(https://www.openrice.com/info/global/icomoon/icomoon.eot?ee7fk8#iefix) format('embedded-opentype'),url(https://www.openrice.com/info/global/icomoon/icomoon.ttf?ee7fk8) format('truetype'),url(https://www.openrice.com/info/global/icomoon/icomoon.woff?ee7fk8) format('woff'),url(https://www.openrice.com/info/global/icomoon/icomoon.svg?ee7fk8#icomoon) format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!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-google:before{content:"\e900"}.icon-facebook:before{content:"\ea90"}.icon-twitter:before{content:"\ea96"}.icon-youtube:before{content:"\ea9d"}.icon-instagram:before{content:"\ea92"}.icon-chevron-thin-left:before{content:"\e902"}.icon-chevron-thin-right:before{content:"\e901"}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.headerInner .li,.headerInner .li a{color:#4e3c2e;font-size:14px}img{max-width:100%}.globalContainer{max-width:1000px;width:100%;margin:auto;padding:8px}.headerWrap{background-color:#fff155}.headerInner>a{float:left}.headerInner>div.headerDesktop{float:right;margin-top:8px}.headerInner .openrice-logo>img{max-width:110px;display:inline-block}.headerInner .li{font-weight:700;display:inline-block;vertical-align:middle;margin-left:25px}#mHeaderMenu{width:100%;background-color:rgba(0,0,0,.7);max-height:0;overflow:hidden;z-index:99;text-align:center;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}@media (max-width:640px){.headerInner>div.headerDesktop{display:none}#mHeaderMenu,.burgerNav,.mMenuLinks,.mMenuLinks>a,.mMenuSocials{display:block}.headerInner .openrice-logo>img{max-width:100px}.mMenuLinks>a{border-bottom:1px solid rgba(255,255,255,.25)}} #headerNew {position: relative;z-index: 99;} #headerNew > .inner { background-color: #fff; padding: 10px 15px; border-bottom: 1px solid #eee;} #headerNew .maxWidth { max-width: 1200px;margin: auto;} #headerNew .openrice-logo > img { height: 30px; display: inline-block; padding-right:5px;} #headerNew .cx-logo {display: inline-block; vertical-align: middle;} #headerNew .cx-logo > img {position: relative; height:33px;} .en #headerNew .cx-logo > img {height:32px;} #headerNew .headerDesktop { float: right; margin-top: 6px;} #headerNew .headerDesktop .li { font-size: 12px;font-weight: 700;display: inline-block;vertical-align: middle;margin-left: 5px; position: relative;} #headerNew .headerDesktop .li > a {font-size: 15px; border: 1px solid #000; padding: 5px 10px; border-radius: 3px; line-height: 1;cursor: pointer; letter-spacing: 2px; color: #000;} #headerNew .headerDesktop .li > a.joinBtn {font-size: 15px; background-color: #4e3c2d; padding: 5px 12px; border-radius: 3px; line-height: 1;cursor: pointer; letter-spacing: 2px; color: #ffffff;} #headerNew .headerDesktop .faq-icon {width: 20px; height: 16px; background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/icon_faq.svg) no-repeat center center; background-size: contain; margin-right: 2px;display: inline-block;vertical-align: top;} #headerNew .headerDesktop .li a.facebook-share {padding: 5px 6px; margin-left: 5px; border-radius: 50%; line-height: 1.2;} .dbs-icon{width: 40px;float:right ;display: inline-block;position: relative; top: -3px;margin-left: 3px;} #headbarLang {margin-left: 1em; margin-top: 4px;} #headbarLang .headerLangBtn {display: block;margin: 0;cursor: pointer; padding-right: 5px; font-size: .85em; line-height: 1;} #headbarLang .headerLangBtn > span {display: inline-block; vertical-align: middle;} #headbarLang .headerLangBtn .lang-icon {width: 23px; height: 23px; background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/lang_icon.svg) no-repeat center center; background-size: contain; margin-right: 2px;} #headbarLang .lang-dropmenu-block {opacity: 0;display: none;will-change: transform;} #headbarLang.open .lang-dropmenu-block {opacity: 1;display: block;animation: animShowLangMenu .3s;-webkit-transform: translateY(0px);transform: translateY(0px);} @keyframes animShowLangMenu { 0% {opacity: 0;-webkit-transform: translateY(-10px);transform: translateY(-10px);} 100% {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);} } #headbarLang .lang-dropmenu-block ul {min-width: 90px; background: #fff;-webkit-border-radius: 4px; border-radius: 4px;position: absolute;top: 100%;right: 0;z-index: 1000;padding: 5px 0; margin: 0;font-size: 14px; text-align: left;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);} #headbarLang .lang-dropmenu-block ul li {} #headbarLang .lang-dropmenu-block ul li a {color: #8b817a; font-size: 14px;font-weight: 400; line-height: 35px;padding: 0 12px;display: block;} #headbarLang .lang-dropmenu-block ul li a:hover{background-color: #e5e5e5;} #headbarLang .lang-dropmenu-block ul li a.active span {font-size:15px;font-weight: 700;color:#3e75d9;} @media (max-width:640px) { #headerNew .openrice-logo > img {display: inline-block;vertical-align: text-top;} #headerNew .cx-logo > img {top: 3px;} .en #headerNew .cx-logo > img {top: 3px;} #headerNew .headerDesktop {margin-top: 4px;} #headbarLang {margin:7px .75em 0;} .en #headbarLang {margin-top: 5px;} #headbarLang .headerLangBtn {font-size: .8em; padding: 0;} } @media (max-width:520px) { #headerNew .headerDesktop .li { display: none;} } @media (max-width:320px) { #headerNew .openrice-logo > img {height: 27px;} #headerNew .cx-logo >img {height: 32px;} .en #headerNew .cx-logo >img {height: 32px;} #headerNew > .inner { background-color: #fff; padding: 15px 10px; border-bottom: 1px solid #eee;} .dbs-icon{ display: none;} } span.nobreak {white-space: nowrap;} body { margin: 0px; background-color: #fff; position: relative; height: 100%; font-family: Lato, "Microsoft YaHei","Source Han Sans",PingFangHK,"Heiti TC",Arial,Verdana,sans-serif; font-weight: 500; color: #222;} /*#bodyContent {overflow: hidden;}*/ #bodyWrap {margin: auto;} #howtouse #bodyWrap body{ background-color: #e3e3e3; } /*@media only screen and (min-width: 769px) { #bodyWrap { min-width: 1280px;} }*/ @media only screen and (max-width: 641px) { /* html, body {font-size: 11px;} */ #bodyWrap { margin: auto; min-width: 0; } } @media only screen and (max-width: 640px) { p {font-size: 14px;} .mbo {display: block;} .dko {display: none!important;} .grid-button {padding: 7px; position: absolute; z-index: 1000; right: 10px; top: 5px; border-radius: 50%; background: #fff;} .grid-button .grid {position: relative;display: block; width: 22px; height: 20px; cursor: pointer; margin: 0 auto; float: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .grid-button .grid > span {position: absolute; top: calc(50% - 1px); display: block; width: 100%; height: 3px; background-color: #6559a5; } .grid-button .grid > span:before, .grid-button .grid > span:after {content: ""; position: absolute; width: 100%; height: 100%; background-color: #6559a5; -webkit-transition: all 0.3s; transition: all 0.3s; } .grid-button .grid > span:before {-webkit-transform: translateY(-7px); transform: translateY(-7px); } .grid-button .grid > span:after {-webkit-transform: translateY(7px); transform: translateY(7px); } .grid-button .grid.open > span, .grid-button .grid.open > span:before, .grid-button .grid.open > span:after {background-color: #6559a5;} .grid-button .grid.open {-webkit-transform: rotate(45deg); transform: rotate(45deg); } .grid-button .grid.open > span:before {-webkit-transform: rotate(90deg); transform: rotate(90deg); } .grid-button .grid.open > span:after {-webkit-transform: rotate(90deg); transform: rotate(90deg); } #headmenus {opacity: 1;visibility: visible;width: calc(100% - 50px);height: 100%;position: fixed;top: 0;left: 100%;z-index: 1000;background:url(https://static5.orstatic.com/info/dbs-instaredeem/images/bg-purple.jpg);-webkit-transition: all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} #headmenus.navOpened {left: 55px;box-shadow: -4px 0px 4px rgba(0,0,0,0.15);} #headmenus > .wrap {overflow-y: scroll; padding: 60px 0 0; text-align: left; height: 100%;} #headmenus > .wrap .mmenuKv {background: url(https://static5.orstatic.com/info/dbs-instaredeem/images/KV-menu.jpg) no-repeat center center; background-size: cover; padding-bottom: 44%; margin-bottom: 30px;} #headmenus > .wrap > a {display: block; font-weight: 600; font-size: 24px; letter-spacing: 5px; margin: 10px 30px; line-height: 50px; color: #fff; position: relative; padding-left: 80px; border-radius: 20px;} #headmenus > .wrap > a:before {content: ''; display: block; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #fff; position: absolute; left: 25px; top: 0; bottom: 0; margin: auto;} #headmenus > .wrap > a.active {border: 1px solid #fff; color: #733588;} #headmenus > .wrap > a.active:before {background: url(https://static8.orstatic.com/info/dbs-instaredeem/images/menu-heart@2x.png) no-repeat center 65%; background-size: 70%; background-color: #733588; border-color: #733588;} } @media only screen and (max-width: 340px) { #headmenus > .wrap > a {font-size: 20px; letter-spacing: 3px; margin: 5px 20px; padding-left: 70px;} } .footerWrap {position: relative;} .footerWrap .footerTop {background-color: #000; padding: 30px 30px;} .footTopTxt {color: #fff;} .footTopTxt p {font-weight: 600; margin-bottom: 5px; font-size: 1.1rem;} .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(https://static5.orstatic.com/info/dbs-instaredeem/images/instagram.svg) no-repeat center center; width: 20px; height: 20px;} .footTopSocialGroup .foot-social.yt {background: url(https://static6.orstatic.com/info/dbs-instaredeem/images/youtube.svg) no-repeat center center; width: 20px; height: 20px;} .footTopSocialGroup .foot-social.fb {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/facebook.svg) no-repeat center center; width: 20px; height: 20px;} .footTopSocialGroup .foot-social.mw {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/mewe.svg) no-repeat center center; width: 35px; height: 35px;} .footerWrap .columns.mbo {text-align: center;margin: 2rem 0 0;} #tncBtn, .footerWrap .faqBtn, .footerWrap .joinBtn {color: #fff; border: 1px solid; border-radius: 2px; display: inline-block; vertical-align: middle; line-height: 2; padding: 0 8px; } #tncBtn {margin-left: 10px;font-size: .7rem;} .footerWrap .faqBtn, .footerWrap .joinBtn {margin-right: 10px;font-size: 1rem;} .footerCR {color: #fff; margin-top: 5px; text-align: right;} .footerCR > span {display: inline-block; vertical-align: middle;} .footerCR > span.copyright-text {font-size: .7rem; margin-left: 5px;} #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) { .footTopTxt /*{text-align: center;}*/ .footTopTxt p {font-size: 1rem;} .footTopTxt small {font-size: .75em;} .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;} .footTopSocialGroup .foot-social.ig {width: 35px; height: 35px;} .footTopSocialGroup .foot-social.yt {width: 35px; height: 35px;} .footTopSocialGroup .foot-social.fb {width: 35px; height: 35px;} .footTopSocialGroup .foot-social.mw {width: 45px; height: 45px;} } @media (max-width: 360px) {.footerCR > span {font-size: 9px;}} /*------------ card ------------*/ .cardSec{ padding: 25px 0; background-color:#f6f6f6} .cardSec .cardBox { max-width: 390px; width:90%; margin:0 auto; text-align:center;} @media (max-width:499px) { .cardSec{ padding: 15px 0; background-color:#eaeaea} } /*------------ KV + OfferSec ------------*/ .KV {position: relative; z-index: 0; } #card {position: relative; padding: 20px 20px ;font-size: 0; background-color: #f3f3f3; border-bottom: 1px solid #e3e3e3; } #offerSec {background: url(../images/intro_bg.gif); background-color: #ffffff ;padding: 50px 0 ;text-align: center; } #offerSec > .maxWidth > .row > .columns {margin-bottom: 80px;} #offerSec > .maxWidth > .row > .columns:first-child h3 {margin-top: -30px;} #offerSec > .maxWidth > .row > .columns:last-child {margin-bottom: 30px;} #offerSec .offerImg {position: relative;} #offerSec .offerImg .tag {position: absolute; top: -20%; left: -15%; max-width: 25%;z-index: 2} #offerSec .iconImg {max-width: 70px; margin: auto;} #offerSec > .maxWidth > .row .row {max-width: 1000px; margin: 0 auto 100px; } #offerSec .offerImg.offer3 {max-width: 700px; margin: 0 auto 30px;} #offerSec .row {padding-top: 15px !important; padding-bottom: 20px !important;} #offerSec h3 {color: #333; font-size: 1.5em; font-weight: 600; line-height: 2.5rem;} .en #offerSec h3 {line-height: 1.3; padding: 10px;} #offerSec p {color: #000; font-size: 1.3em; font-weight: 500; line-height: 1.9;} #offerSec p.date {color:#e5000e;font-size:1.5em;font-weight:600;border:1px solid #e5000e;padding:10px 80px;max-width:fit-content;margin:auto;border-radius:50px;line-height:1.5;margin-bottom:15px;} #offerSec p.note {color:#e5000e;font-size:1.5em;font-weight:600;margin-bottom:10px;} #offerSec p.app {font-size: 1em;text-align: center;margin-top: 10px;border: 1px solid #ff6600;color: #ff6600;display: inline-block;padding: 2px 20px;border-radius: 50px;} #offerSec span.bigOrange {font-size: 1.6em;color: #f54900;font-weight: 900;} #offerSec > .containerM > .dateDesc { background: linear-gradient(to right, #ff782c, #ffb52d);border: 1px solid #ff782c;padding: 5px 4%;border-radius: 10px; display: inline-block;} #offerSec > .containerM > .dateDesc > p { font-size: 22px; font-weight: bold; letter-spacing: normal; text-align: center; color: #ffffff;margin: 0px; } #offerSec > .containerM > .dateDesc > p span.info1{ display: inline-block;} #offerSec > .containerM > .dateDesc > p span.info2{ display: inline-block;} a.link {color: #0066cc; border-bottom: 1px solid #0066cc; margin: 10px 0; font-size: .8rem} a.link:hover {border-bottom: 0px solid #0066cc; } @media screen and (max-width: 768px){ #offerSec {background: url(../images/intro_bg.gif); background-color: #ffffff ;padding: 30px 0 50px 0 ;text-align: center; } #offerSec .iconImg {max-width: 55px; margin: 20px auto;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);} #offerSec .offerImg .tag {width: 25%;top: -15%;left: -10%;} #offerSec h3 {font-size: 1.2em; margin-top:20px;line-height:1.5; } #offerSec p {font-size: 1em;letter-spacing: 0px;} #offerSec p.date {font-size:1.1em;padding:10px 0;max-width:100%; letter-spacing: 0px;} #offerSec p.note {font-size:1.3em;} #offerSec .row {padding-top: 5px !important; padding-bottom: 10px !important;} } @media (max-width: 640px) { #card {padding: 10px 20px; } #offerSec a.link {display: inline; line-height: 1.5;} #offerSec p.app {margin: 10px 0; font-size: 0.85em; line-height: 1.4;padding: 3%;} .en #offerSec p.app {margin: 10px 0; font-size: 0.8em; line-height: 1.4;padding: 1% 3%;} #offerSec > .containerM > .dateDesc > p { font-size: 18px; line-height: 1.5;} } @media (max-width: 320px) { #offerSec p {font-size: 0.9em;letter-spacing: 0px;} } /*********** #section2 phone styeps ***********/ #section2 {padding: 70px 20px; text-align: center;background: url(../images/howto_bg.jpg);} #section2 .mbo {display: none;} #section2 .tt {padding: 0 2em;} #section2 .tt h1 { text-align: left;font-size: 1.5rem; color: #fff; background-color: #e80019;line-height: 1.5; margin-bottom: 10px; display: table;padding: 1% 1% 1% 3%;border-radius: 5px;} #section2 .tt h2 {text-align: left; font-size: 36px; line-height: 1.5; color: #4e3b2d; margin-bottom: 10px;} #section2 .tt p {text-align: left; font-size: 20px; color: #e80019; line-height: 1.3; margin: 0px 0 25px 0;; font-weight: 600;} #section2 .tt .ORpay-card-icon {display: inline-block;height: 55px;margin-right: 10px;} #section2 .tt_en {padding: 0 1em;} #section2 .tt_en h2 {letter-spacing: -0.5px !important; text-align: left; font-size: 32px; line-height: 1em; color: #f54900; margin-bottom: 10px;} #section2 .tt_en p {letter-spacing: -0.5px !important; text-align: left; font-size: 20px; color: #e80019; line-height: 1em; margin: 0px 0 25px 0; font-weight: 600;} #section2 .tt_en .ORpay-card-icon {display: inline-block;height: 55px;margin-right: 10px;} #section2 #tabContents {padding: 0; margin-top: 20px;} #section2 #tabContents > .container {max-width: 1050px; margin: auto; position: relative;} #section2 #tabContents > .container .slider {max-width: 220px; margin: 0 auto; padding: 40px 10px; display: inline-block; white-space: nowrap;} #section2 #tabContents > .container .slider:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #ccc; box-shadow: 0px 0px 10px 0px rgb(0,0,0,.15);} #section2 #tabContents > .container .slider:after {content: ''; display: block; position: absolute; width: 140%; padding-bottom: 90%; background: url(../images/howtouse/cardface-diningoffers.png) no-repeat center / contain; top: 2%; left: -20%; filter: drop-shadow(1px 1px 6px rgba(0,0,0,.15)); z-index: 0; opacity: 0; transition: all .2s;} #section2 #tabContents > .container .slider.atTapCardSlide:after {animation: tapCard 1s ease-in-out; opacity: 1;} @keyframes tapCard { 0% {transform: translate(-90%, -30%) rotate(-25deg);} 100% {transform: translate(0, 0) rotate(0deg);} } #section2 #tabContents > .container .slider.slick-initialized {overflow: visible;} #section2 #tabContents > .container .slider .slide {display: inline-block; vertical-align: top;} #section2 #tabContents > .container .text {padding: 0 1em 0 2em; font-size: 18px; display: inline-block;} #section2 #tabContents > .container .text ul {counter-reset: step-counter; padding:0; } #section2 #tabContents > .container .text ul li {text-align: left; padding: 0 0 5px 25px; font-size: 20px; line-height: 1.7; font-weight: 400;list-style:none; position: relative; letter-spacing: 1px; cursor: pointer; color: #000;} .en #section2 #tabContents > .container .text ul li {letter-spacing: 0;} #section2 #tabContents > .container .text ul li:before {counter-increment: step-counter; content: counter(step-counter); display:block; position: absolute; left: 0; top: 0; margin: 0; text-align: center;} #section2 #tabContents > .container .text ul li.active {opacity: 1; font-weight: 600; color: #eb2e20;} #section2 #tabContents > .container .text ul li.active:before {text-decoration: underline;} #section2 #tabContents > .container .text ul li .payIcon {display: inline-block; vertical-align: middle; width: 50px; height: 50px; background: url(../images/pay_icon_m.png) no-repeat center center; background-size: contain; margin-left: 5px;} .slick-dots {bottom: -18px;} .slick-dots li {width: 8px; height: 8px; padding: 0; margin: 0 2px;} .slick-dots li button {height: 100%; border-radius: 50%; margin: 0; background: #f7f7f7;} .slick-dots li.slick-active button {background: #f54a02;} #section2 #tabContents > .container .slider {position: relative;} #section2 #tabContents > .container .slider .swiper-pagination {bottom: 10px;} #section2 #tabContents > .container .slider .swiper-pagination .swiper-pagination-bullet {background: #fff; opacity: 1;} #section2 #tabContents > .container .slider .swiper-pagination .swiper-pagination-bullet-active {background: #e80019;} @media (min-width:769px) { } @media (max-width:768px) { #section2 {padding: 40px 0 0;} #section2 .dko {display: none;} #section2 .mbo {display: block;} #section2 .tt h1 { font-size: 1.2rem; display: inline-block;} #section2 .tt h2 {width: 100%; text-align: center; font-size: 1.9rem;; line-height: 1.5; color: #4e3a2c; margin-bottom: 10px;} .en #section2 .tt h2 {width: 100%; } #section2 .tt p {width: 100%; text-align: center; font-size: 16px;line-height: 1.5; margin: 0px;} #section2 .tt_en h2 {letter-spacing: 0px !important; width: 100%; text-align: center; font-size: 24px; line-height: 1.3; color: #f54900; margin-bottom: 10px;} #section2 .tt_en p {letter-spacing: 0.5px !important;; width: 100%; text-align: center; font-size: 16px;line-height: 1.3; margin: 0px;} #section2 #tabContents {padding: 10px 0 40px; margin: 0;} #section2 #tabContents > .container .slider {display: block; margin: 20px auto 0; position: relative;} #section2 #tabContents > .container .slider .slick-arrow {font-size: 0; position: absolute; top: 0; bottom: 0; margin: auto; width: 25px; height: 50px; background: url(../images/arrow-active.svg) no-repeat center center;background-size: contain; border: none; z-index: 1;} #section2 #tabContents > .container .slider .slick-prev {left: -50px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);} #section2 #tabContents > .container .slider .slick-next {right: -50px;} #section2 #tabContents > .container .text {display: block;padding: 0 1em ;} #section2 #tabContents > .container .text ul {margin: 0; padding: 15px 0 0;} #section2 #tabContents > .container .text ul li {display: none; text-align: center; font-size: 16px; padding: 0; line-height: 1.2;} #section2 #tabContents > .container .text ul li.active {display: block;} #section2 #tabContents > .container .text ul li:before {display: none;} #section2 #tabContents > .container .text ul li .payIcon {width: 40px; height: 40px;} } /*------------ voucher Sec ------------*/ /*#DBSvoucher .swiper-container {overflow-y: visible;overflow-x:hidden;}*/ #DBSvoucher {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/voucher-offer_bg.gif);padding:1px 0 50px 0;} #DBSvoucher > .result-container > section {/*margin-bottom: 40px;*/} #DBSvoucher > .result-container > h1 {color: #222; font-size: 2em; font-weight: 600; text-align: center; margin:20px auto 50px auto;} #DBSvoucher > .result-container > h1 span {color: #fff; background-color: #04a35b; padding:10px 20px; margin: 0 10px; } #DBSvoucher > .result-container > p {font-size: 1.3em; margin:10px 0; text-align: center;} #DBSvoucher .voucher {margin:0;max-width: 100%;} #DBSvoucher .voucher.soldout:before, #DBSvoucher .voucher.soldout:after {content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 1; } #DBSvoucher .voucher.soldout:before {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); border-radius: 5px;} #DBSvoucher .voucher.soldout:after {background: url(../images/soldout.png) no-repeat center center; background-size: contain; right: 0; bottom: 0; margin: auto; width: 160px; height: 140px;} #DBSvoucher .voucher .DBSofferBage {display: inline-block;vertical-align: text-bottom;font-size: 1em; background-color: #ec2327;padding: 0.35em 0.5em 0.4em;color: white;margin-right: 0.2em;border-radius: 2px;} #DBSvoucher .voucher .text .prices {float: right;} #DBSvoucher .voucher .text .tcRemark {display: inline-block; font-size: 0.8em;line-height: 1.5;color:#000000;font-weight: 400;max-width: 55%;} #DBSvoucher .voucher .text .btm {padding: 0;} #DBSvoucher .voucher .text .btm > div:first-child {padding: 0 1.25em 0.7em;} #DBSvoucher .voucher .text .btm > div:last-child {padding: 0 1.25em 1.2em;border-top: 1px dashed #bdbdbd} #DBSvoucher .voucher.inactive:after {content: "";display: block;width: 100%;height: 100%;background:url(https://static7.orstatic.com/info/dbs-instaredeem/images/flash-deal_logo_tc.png) no-repeat center center;background-color:white;position: absolute;top: 0;left: 0;z-index: 99;} .en #DBSvoucher .voucher.inactive:after {content: "";display: block;width: 100%;height: 100%;background:url(https://static7.orstatic.com/info/dbs-instaredeem/images/flash-deal_logo_en.png) no-repeat center center;background-color:white;position: absolute;top: 0;left: 0;z-index: 99;} #DBSvoucher .offerDate {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/tag_sale_tc.png) no-repeat center;background-size: contain;width: 140px;height: 85px;;position: absolute;top:-3%;right:-3%;text-align: center;z-index: 999;} .en #DBSvoucher .offerDate {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/tag_sale_en.png) no-repeat center;background-size: contain;} #DBSvoucher .offerDate span {color: white;font-size: 2em;font-weight: 800;position: relative;top: 40%;} #DBSvoucher .swiper-button-next, #DBSvoucher .swiper-button-prev {width: 2.8rem;color: green;background-color:rgba(255,255,255,0.7);border: 2px solid;border-radius: 100px;} #DBSvoucher .swiper-button-next.swiper-button-disabled, #DBSvoucher .swiper-button-prev.swiper-button-disabled {opacity: 0;} #DBSvoucher .swiper-button-next:after, #DBSvoucher .swiper-button-prev:after {font-size: 1rem;font-weight: 800;} #DBSvoucher .voucher .text .prices .price .discount {font-size: 2em;} @media (min-width: 1500px) { #DBSvoucher .containerL {max-width: 1200px;} } @media (max-width: 768px) { #DBSvoucher {padding:40px 0 ;} #DBSvoucher > .result-container > h1 {font-size: 1.3em; margin:10px auto 20px auto; } .en #DBSvoucher > .result-container > h1 {font-size: 1.1em; margin:10px auto 20px auto; } #DBSvoucher > .result-container > h1 span {padding:10px 20px; margin: 10px 10px; display: inline-block;} #DBSvoucher > .result-container > p {font-size: 1em; margin:10px ; text-align: center;} #DBSvoucher .voucher .DBSofferBage {font-size: 1em;} #DBSvoucher .voucher .text .prices {font-size: 0.8em;} } @media (max-width: 320px) { /*#offerSec .offerImg .tag {left: -10px;}*/ #DBSvoucher > .result-container > p {font-size: 0.9em;margin: 5px auto;} } /*------------ Tab howtouse ------------*/ .menuSec{background:#f3f3f3;padding:50px 0 0 0;} .menuSec p {font-size: 1.2em; text-align: center;margin-top: 10px;} .menuSec .menuBox { max-width: 1200px; width:100%; margin:25px auto 0; text-align:center; position: relative;font-size: 0;bottom: -1px;overflow: hidden;} .menuSec .menuBox span {display:inline-block;cursor:pointer;width: 20%; max-width:530px;position: relative;z-index: 999;margin: 0 2px -1px 2px;border:solid #c7c6c6;border-width: 1px 1px 0 1px;border-radius: 20px 20px 0 0;} .menuSec .menuBox span.active, .PoimenuSec .menuBox span:not(.active):hover {background-color: white;} .en .menuSec .menuBox span {display:inline-block;cursor:pointer;width: 26%; max-width:530px;position: relative;z-index: 999;margin: 0 2px -1px 2px;border:solid #c7c6c6;border-width: 1px 1px 0 1px;border-radius: 20px 20px 0 0;} @media (max-width:499px) { .menuSec{background:#f3f3f3; padding:40px 0 0 0;} .menuSec .menuBox span {width: 45%;border-radius: 10px 10px 0 0; padding: 1%;} .en .menuSec .menuBox span {width: 45%;border-radius: 10px 10px 0 0; padding: 1%;} } #tabContent .swiper-container {padding: 10px 0;} #tabContent p {margin: 10px 0; font-size: 1.2em;} #indexPage #voucherSpec .poiList {overflow: hidden;padding: 20px 0;} #indexPage #voucherSpec .swiper-container {overflow: visible;} #indexPage .swiper-container, #indexPage .swiper-slide {height: auto;} @media (max-width:640px) { #tabContent p {margin: 10px 20px; font-size: 1em;} .menuSec p {margin: 10px 0; font-size: 0.9em;line-height: 1.4;} } /* DBS Registration */ .signup {padding-bottom: 20px;border-top:1px solid #b9b8b8;} .signup .e-tt{ text-align: center;font-size: 3.4em; letter-spacing: 1.5px; line-height: 1; } .signup h2{font-size:1.3em;padding: 30px;} .signup .e-tt img {margin: 0 auto;max-width: 80%; padding:70px 0 5px;} @media (max-width:640px) { .signup {padding-bottom: 20px;} .signup .e-tt img{margin: 0 auto;max-width: 95%; padding:60px 30px 10px} .signup h2{font-size:1.2em;padding: 20px;} } /* Use DBS dollar */ .use_dollar {padding-bottom: 20px;border-top:1px solid #b9b8b8;} .use_dollar .e-tt{ text-align: center;font-size: 3.4em; letter-spacing: 1.5px; line-height: 1; } .use_dollar h2{font-size:1.3em;padding: 30px;} .use_dollar .e-tt img{margin: 0 auto;max-width: 80%; padding:70px 0 60px} @media (max-width:640px) { .use_dollar {padding-bottom: 20px;} .use_dollar .e-tt img{margin: 0 auto;max-width: 95%; padding:60px 10px 50px;} .use_dollar h2{font-size:1.2em;padding: 20px;} } /* Tab show*/ #DBS_dollar_info.show > center, #DBS_signup_info.show > center, #DBS.signup.show > center, #DBS.signup.show > center {opacity: 1; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 100; -webkit-transform: translateY(0px); transform: translateY(0px); } #DBS_dollar_info > center , #DBS_signup_info > center {opacity: 0; -webkit-transform: translateY(-3px); transform: translateY(-3px); position: absolute; width: 100%; z-index: -1; left: 0; } /*------------ POI Tab 人氣滋選------------*/ .PoimenuSec{background:#f3f3f3; padding:50px 0 0 0;border-bottom:1px solid #c4c3c3;} .PoimenuSec p {font-size: 1.2em; text-align: center;margin-top: 10px;} .PoimenuSec .menuBox { max-width: 1200px; height: 78px; width:100%; margin:20px auto 0; text-align:center; position: relative;font-size: 0;bottom: -1px;} .PoimenuSec .menuBox.sticky {bottom: 0;} .PoimenuSec .menuBox.sticky section {max-width:1200px;margin: auto;} .menuBox .container {-webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; top: -70px; text-align: center; font-size: 0;} .menuBox.sticky .container {padding: 0; position: fixed; z-index: 999999; 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); background: rgba(243,243,243, 0.95);overflow: hidden;} .PoimenuSec .menuBox span {display:inline-block;cursor: pointer;border: solid #c7c6c6;border-width: 1px 1px 0 1px;border-radius: 20px 20px 0 0;position: relative;z-index: 999;margin: 0 2px -1px 2px; } .PoimenuSec .menuBox.sticky span {border-width: 0 2px 0 0;border-radius:0;border-color: white;margin: 0;} .PoimenuSec .menuBox.sticky span:first-child{border-left: 2px solid white;} .PoimenuSec .menuBox span.active, .PoimenuSec .menuBox span:not(.active):hover {background-color: white;} .PoimenuSec .menuBox span#tab_tas{width: 20%;max-width: 308px;} .PoimenuSec .menuBox span#tab_voucher {width: 20%;max-width: 307px;} .PoimenuSec .menuBox span#tab_orpay {width: 20%;max-width: 310px;} .PoimenuSec .menuBox span#tab_booking {width: 26%;max-width: 400px;} .Poibox-bg {padding: 60px 0 ;border-top:1px solid #b9b8b8; margin: 0 auto;} @media (max-width:499px) { .PoimenuSec{background:#f3f3f3; padding:20px 0 0 0;} .PoimenuSec .menuBox {height: 65px;} .PoimenuSec .menuBox span {height:65px;margin: 0;} .PoimenuSec .menuBox span#tab_booking {width: 20%;} } @media (max-width:360px) { .PoimenuSec .menuBox {height: 52px;} .PoimenuSec .menuBox span {height:52px;border-radius: 10px 10px 0 0;} } #tasListing.show, #voucherListing.show, #orpayListing.show, #bookingListing.show {opacity: 1; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 100; -webkit-transform: translateY(0px); transform: translateY(0px); height: 100%;} #tasListing, #voucherListing, #orpayListing, #bookingListing {opacity: 0; -webkit-transform: translateY(-3px); transform: translateY(-3px); position: absolute; width: 100%; z-index: -1; left: 0;height: 0;overflow: hidden;} /*#tabContent2 .DBS_tag {font-size: 0.85rem;line-height: 1.5;border-radius: 3px;border: 1px solid #000;color: #000;font-weight: 800;padding: 0.15rem 0.45rem 0.2rem 0.6rem;margin: 0 0.3rem 0 0;position: relative;letter-spacing: 0.1rem;vertical-align: text-bottom;} #tabContent2 .DBS_tag {border: 1px solid #e90a22; color: #e90a22;top:0;} #tabContent2 .DBS_tt {color: #000;font-weight: 800;font-size: 1.2rem;margin-bottom: .4rem;letter-spacing: 0.05rem;line-height: 1.4;} #tabContent2 .DBS_tt {color: #e90a22;font-size: 0.95rem;}*/ #indexPage #tasPage .offerItem, #indexPage #payPage .offerItem {padding: 0 0 80px;} #indexPage.en #tasPage .offerItem, #indexPage.en #payPage .offerItem {padding:0 0 90px;} #indexPage #tasPage .offerItem a.btn, #indexPage #payPage .offerItem a.btn {bottom: 20px;} #indexPage.en #tasPage .offerItem a.btn, #indexPage.en #payPage .offerItem a.btn {bottom: 20px;} .en #indexPage #tasPage .offerItem a.btn, .en #indexPage #payPage .offerItem a.btn {bottom: 20px;} #tasPage .offerItem a.shareBtn, #payPage .offerItem a.shareBtn {position: absolute; bottom: 20px; right: 15px; display: block; background: url(../images/share_button.svg) no-repeat center center; background-size: contain; width: 40px; height: 40px;} #voucher .voucher .text .shareBtn {display: block; float:right; width: 35px; height: 35px; background: url(../images/share_button.svg) no-repeat center center / contain; margin: .2rem 0 0 .5rem;} #voucher .voucher .text .prices {max-width: calc(100% - 150px);} .en #voucher .voucher .text .prices {max-width: calc(100% - 120px);} #voucher .voucher .text .prices .price .discount {font-size: 2.25em;} /*#indexPage .voucher .text {height: auto;}*/ #voucherListing .voucher .text .btm {padding:0 1.25em 1em;} #voucherListing .voucher, #bookingListing .bookingMenuPage .poi {} .DBS_tnc {width: 100%; font-size: 0.8rem;border-top: 1px dashed #919191;padding: 0.7rem;position: absolute;bottom: 0;color: black;line-height: 1.2;} .en .DBS_tnc {width: 100%; font-size: 0.85rem;border-top: 1px dashed #919191;padding: 0.7rem;position: absolute;bottom: 0;color: black; line-height: 1.2} #voucherListing .voucher .DBS_tnc, #bookingListing .bookingMenuPage .poi .DBS_tnc {position: relative; text-align: left; bottom: 5px;} .en #voucherListing .voucher .DBS_tnc, .en #bookingListing .bookingMenuPage .poi .DBS_tnc {position: relative;text-align: left;bottom: 10px;} @media (max-width:768px) { .DBS_tnc {margin-top:1rem;position: relative;padding: 0.7rem 1rem;} .en .DBS_tnc {margin-top:1rem;position: relative;padding: 0.7rem 1rem;} #voucherListing .voucher, #indexPage #tasPage .offerItem, #indexPage #payPage .offerItem, #bookingListing .bookingMenuPage .poi {padding: 0;} .en #voucherListing .voucher, #indexPage.en #tasPage .offerItem, #indexPage.en #payPage .offerItem, .en #bookingListing .bookingMenuPage .poi {padding: 0;} #indexPage #tasPage .offerItem a.btn, #indexPage #payPage .offerItem a.btn {bottom: 10px;} #indexPage.en #tasPage .offerItem a.btn, #indexPage.en #payPage .offerItem a.btn {bottom: 10px;} #tasPage .offerItem a.shareBtn, #payPage .offerItem a.shareBtn {position: relative; bottom: 10px; float: right; margin-top: .15rem;} #voucherListing .DBS_tnc, #bookingListing .DBS_tnc {margin-top: 0;text-align: left;} } @media (max-width:640px) { #voucherListing .voucher .text, #bookingListing .bookingMenuPage .poi .text {height: auto;} } /*card*/ .cardSec {background: url(https://static6.orstatic.com/info/dbs-instaredeem/images/card_bg.gif); padding: 50px 20px 70px; font-size: 0;} .cardSec .ttImg {margin-bottom: 25px; max-width: 410px; width: 100%;} .cardSec h1 {line-height: 1.2; font-size: 3rem; margin-bottom: 3%; text-align: center;} .cardSec p {line-height: 1.5; font-size: 1.2rem; font-weight: 600;} .cardSec .cou {display: inline-block; vertical-align: top; width: 90%; margin: 0 2%; position: relative; } .cardSec ul {margin: 25px} .cardSec li {line-height: 1.5; font-size: 1.1rem; font-weight: 600;} .cardSec p.sp {line-height: 1.5; font-size: 1.8rem; margin-top: 10%;} .en .cardSec p.sp {line-height: 1.5; font-size: 1.8rem; margin-top: 10%;} .cardSec p.note{font-size: .9rem; line-height: 1.8 ;font-weight: 500;margin: 10px 0;} .en .cardSec p.note{font-size: .9rem; line-height: 1.5 ;font-weight: 500;margin: 10px 0;} .cardSec .red{color: #e80b22} .cardSec p.period {border-radius: 8px; border: 2px solid; padding: 10px 20px; line-height: 1.5; font-size: 1.4rem; display:inline-block; text-align: center; max-width: 600px;background-color: #fff} .cardSec p.rule1{font-size: 1.2rem; line-height: 1.8 ;font-weight: 500;width: 90%; max-width: fit-content ;margin: auto} .cardSec p.rule2{font-size: 1.4rem; line-height: 1.8 ;font-weight: 600;width: 90%; max-width: fit-content ;margin: auto} @media (min-width: 1500px) { .cardSec p {line-height: 1.8; font-size: 1.35rem;} .en .cardSec p {line-height: 1.5; font-size: 1.35rem;} .cardSec li {line-height: 1.8; font-size: 1.25rem;} .en .cardSec li {line-height: 1.5; font-size: 1.25rem;} } @media (max-width: 768px) { .cardSec p.period {padding: 15px 0px; line-height: 1.2; font-size: 1.1rem; width: 100%; letter-spacing: 0px} .cardSec h1 {font-size: 2rem; margin-bottom: 10%; } .cardSec p {line-height: 1.6; font-size: 1.15rem; margin-top: 10%; } .cardSec ul {margin: 15px} .cardSec li {line-height: 1.6; font-size: 1rem;} .cardSec p.note{font-size: .8rem; line-height: 1.6 ;} .en .cardSec p.note{font-size: .8rem; line-height: 1.2 ;} .cardSec p.rule1{font-size: .9rem; text-align: center;line-height: 1.5; margin-bottom: 2%;} .cardSec p.rule2{font-size: 1.2rem; text-align: center;line-height: 1.2} .cardSec p.sp {line-height: 1.5; font-size: 1.2rem; } .en .cardSec p.sp {line-height: 1.5; font-size: 1.2rem; } } /*howtouse*/ .howtouse h1{text-align: center; text-decoration: none; border-bottom: 10px solid black; width: 20%; margin: 30px auto;padding-top: 30px;} .en .howtouse h1{width:25%} .howtouse .photo{width: 90%;margin: 5%;} .numberCircle{padding: 10px 0;} .numberCircle span{display: inline-block; border-radius: 50%; width: 25px; height: 25px; padding: 2px; background: #fff; color: #666; text-align: center; font: 19px Arial, sans-serif; float: left;margin-right: 10px;} #howtouse .swiper-button-prev:after, #howtouse .swiper-button-next:after {width: 40px;height: 40px;font-size: 18px;color: #b3b3b3;font-weight: bold;background-color: #fff;border-radius: 50%; position: absolute; text-align: center;padding: 10px 5px 10px 5px;top: 80%;box-shadow: 2px 2px 2px #727575;} @media (max-width:640px){ .howtouse h1{width:55%;} .en .howtouse h1{width:75%;} } /* 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); } .moreBtns {text-align: center; margin: 2rem auto;} .moreBtns > a {background-color: #fd5f00; color: #fff; letter-spacing: 2px;display: inline-block; width: 100%; font-size: 1.5rem; text-align: center; padding: 0 15px; font-weight: 600; border-radius: 10px; line-height: 1.5;border: 1px solid #fd5f00;padding: 10px 20px;} .moreBtns > a span:after {background: url(https://static7.orstatic.com/info/dbs-instaredeem/images/bn_arrow.png) no-repeat center center; background-size: contain;content: ''; display: inline-block; vertical-align: middle; width: 35px; height: 23px; margin-left: 5px;margin-top: -0.2em;} @media (min-width: 641px) { .moreBtns > a {width: 300px; margin: 0 5px;} } @media (max-width: 640px) { #indexPage .result_wrapper {padding: 20px 0 0 0;} #indexPage .result_wrapper h1 {position: relative;margin:0 auto 10px;left: -1%;} #indexPage .result_wrapper:not(#bookingListing) h1 {max-width: 320px;} #indexPage #bookingListing.result_wrapper {max-width: 400px;} #indexPage .result-container {padding: 0 5% 20px;} #indexPage #DBSvoucher .result-container {padding: 0 0 20px;} .moreBtns > a {font-size: 1.2rem; margin: 5px auto; line-height: 2.2; } .moreBtns > a span:after {height: 18px; width: 27px; margin-top: -1px;} } @media (max-width: 320px) { #indexPage .result_wrapper:not(#bookingListing) h1 {max-width: 100%;} } #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;}