/*GENERAL*/*,*: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;} * html .clearfix {zoom:1;} /* IE6 */*:first-child+html .clearfix {zoom:1;} /* IE7 */img {max-width:100%;} a {text-decoration:none;} .mbl {display: none;} .noScroll {overflow:hidden;} .zh p, .zh a, .zh small, .zh h1, .zh h2, .zh h3 {letter-spacing: 1px;} .en p, .en a, .en small, .en h1, .en h2, .en h3 {letter-spacing: 0px!important;} .ls0 {letter-spacing: 0;} .fx {-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} /*Flex grid */ .row {display:flex;flex-direction:row;flex-wrap:wrap;} .col {flex:1 1 8%;box-sizing:border-box;} .row .row,.row.nested {flex:1 1 auto;} .row.center {justify-content:center;} .center .col {flex-grow:0;flex-shrink:0;} /* columns widths */ [class*="col-"]{height: auto; float: left; width: 100%; box-sizing: border-box; padding:3%; } .col-span-1 {flex-basis:8.3333%;} .col-span-2 {flex-basis:16.6666%;} .col-span-3 {flex-basis:25%;} .col-span-4 {flex-basis:33.3333%;} .col-span-5 {flex-basis:41.6666%;} .col-span-6 {flex-basis:50%;} .col-span-7 {flex-basis:58.3333%;} .col-span-8 {flex-basis:66.6666%;} .col-span-9 {flex-basis:75%;} .col-span-10 {flex-basis:83.3333%;} .col-span-11 {flex-basis:91.6666%;} .col-span-12 {flex-basis:100%;} .container {margin:auto;max-width: 1100px;} span.nobreak, i.nobreak {white-space: nowrap; } .fixed-width {flex:0 0 32.45%;} #tcBtn {display: inline-block!important;} img.ctrImg {display:block; margin: auto;} @media all and (max-width:640px) { .col-span-6,.col-span-7,.col-span-8,.col-span-9,.col-span-10,.col-span-11,.fixed-width {flex-basis:100%;} .nested .col {flex-basis:100%;} } .lity {z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap; ;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; background-color: rgba(70, 50, 40, 0.8);; outline:none!important} .lity-wrap:before {content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em} .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-container:after {content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)} .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;} .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%;max-width:100%} .lity-iframe-container {width:100%;height:100vh;padding-top:0%;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%;} .lity-hide {display:none} .lity-active body {overflow: hidden;} .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;} .itemBtm3 a.bookBtn {border:1px solid #009245!important;color#009245!important;} .itemBtm3 a.bookBtn:hover {background-color: #c8f3dc!important;} .zh .itemBtm .poiName {font-size: 1.3rem;} .swiper-button-disabled {display: none;} /* AOS Custom animation*/ [data-aos="fadein-down"] { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } [data-aos="fadein-down"].aos-animate { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } /* ### 主架構 ### */ body {margin:0px;font-family:Arial,"Noto Sans TC",'Microsoft YaHei',"Microsoft JhengHei","Source Han Sans","PingFangHK","Heiti TC",Verdana,Geneva,sans-serif;background-color:#FFF;position:relative;height:100%;min-width:1024px;font-weight:600; padding-top: 60px; color: #4F3D2E;} /*HEADER*/ #headerNew {position: fixed; width: 100%; top: 0; left: 0; z-index: 10;} #headerNew.is-scrolled {box-shadow: 0px 0px 2px 0px rgba(0,0,0,.6);} .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}* html .clearfix{zoom:1}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 > .inner { background-color: #fff; padding: 12px 8px;} #headerNew .maxWidth {max-width: 1000px;margin: auto; position: relative;} #headerNew .openrice-logo { max-width: 110px; display: inline-block;vertical-align: middle;} #headerNew .openrice-logo > img { display: block;} #headerNew #headmenus {position: absolute; left: 0; right: 0; top: 8px; margin: auto; max-width: 500px; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;} .en #headerNew #headmenus {top: 0;} #headerNew.is-scrolled #headmenus {opacity: 1; visibility: visible;} #headerNew #headmenus .wrap {text-align: center;} #headerNew #headmenus .wrap a.anc {color: #4e3c2e; display: inline-block; vertical-align: middle; letter-spacing: 1px; padding: 2px 20px; border-left: 1px solid #4e3c2e; line-height: 1; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; position: relative;} #headerNew #headmenus .wrap .menuSR1 {display: none!important;} #headerNew #headmenus .wrap a.anc:nth-child(2) {border: none;} #headerNew #headmenus .wrap a.anc.active {color: #FD3C0B;} #headerNew #headmenus .wrap a.anc:after {content: ''; display: block; position: absolute; bottom: -4px; left: 0; right: 0; margin: auto; height: 3px; background-color: #FD3C0B; width: 0;-webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;} #headerNew #headmenus .wrap a.anc.active:after {width: calc(100% - 40px);} #headerNew .headerDesktop { float: right;} #headerNew .headerDesktop .li { color: #4e3c2e;font-size: 12px;font-weight: 700;display: inline-block;vertical-align: middle;margin-left: 5px; position: relative;} #headerNew .headerDesktop .li > a , #headerNew .headerDesktop .li > div:first-child {color: #4e3c2e;font-size: 1.3em; border: 1px solid #4e3c2e; padding: 5px 12px; border-radius: 20px; line-height: 1.5;cursor: pointer;} #headerNew .headerDesktop .li a.facebook-share {padding: 5px 6px; margin-left: 5px; border-radius: 50%; line-height: 1.2;} #headbarFaq.open .caret, #headbarLang.open .caret {-webkit-transform: rotate(180deg);transform: rotate(180deg);} .lang-dropmenu-block, .how-dropmenu-block {opacity: 0;display: none; position: relative;background: #fff;-webkit-border-radius: 4px; border-radius: 4px;position: absolute;top: 100%;right: 0;z-index: 1000;padding: 5px 0; margin: 0;margin-top: 7px; font-size: 14px; text-align: left;-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);} .lang-dropmenu-block {min-width: 80px;} .how-dropmenu-block {min-width: 130px} #headbarFaq.open .how-dropmenu-block, #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);} } .lang-dropmenu-block ul, .how-dropmenu-block ul {list-style: none;} .lang-dropmenu-block ul li {} .lang-dropmenu-block ul li a, .how-dropmenu-block ul li a {color: #8b817a; font-size: 14px; font-weight: 400; line-height: 1.5em; padding: 0.5em 12px 0.55em; display: block; } .lang-dropmenu-block ul li a:hover, .how-dropmenu-block ul li a:hover{background-color: #e5e5e5;} .lang-dropmenu-block ul li a.active span, .how-dropmenu-block ul li a.active span {font-size:15px;font-weight: 700;color:#3e75d9;} #headerNew .headerDesktop .li > #headbarSR1 {background-color:#fe3c0a;color:#ffffff;border: none;} /**** KV 和 bg****/ .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/tc/Kv_desktop.png') no-repeat center top;background-size:cover;padding-bottom:45%;position:relative; background-color: #fffae7;} .en .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/en/Kv_desktop_en.png') no-repeat center top;background-size:cover;background-color: #fffae7;} .topContainer .txt {position: absolute; left: 7%; top: 55.5%; width: 29.5%;} .en .topContainer .txt {top:55%;} .topContainer .txt p {font-size: 15px; line-height: 1.8;text-align: left;} .en .topContainer .txt p {font-size: 14px; line-height: 1.4;} /*.zh .topContainer .txt p {text-align: center;}*/ .topContainer .txt .column {padding:0 0.2rem;} .topContainer .txt a {color: #4F3D2E; border: 1px solid #FD3C0B; border-radius: 8px; display: block; text-align: center; line-height: 1.4; margin-top: 15px;padding: 0.4em 0 0.5em;font-size: 19px;} .en .topContainer .txt a {font-size: 15px;} .topContainer .txt a span {color: #FD3C0B; font-size: 20px;} @media (min-width:1500px) { .container {max-width: 1500px;} .topContainer .txt {width: 29%;} .topContainer .txt p {font-size: 19px; } .topContainer .txt a {font-size: 22px;padding: 0.6em 0 0.8em;} .en .topContainer .txt p {font-size: 19px;line-height: 1.5 } .topContainer .txt a span {font-size: 30px;} .en .topContainer .txt a {font-size: 23px;line-height: 1.3;} } @media (min-width:1280px) { .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/tc/Kv_desktop@2x.png') no-repeat center top;background-size:cover;background-color: #fffae7;} .en .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/en/Kv_desktop_en@2x.png') no-repeat center top;background-size:cover;background-color: #fffae7;} } @media (min-width:769px) { .topContainer {min-width: 1100px;min-height: 580px;} #bodyContent {min-width: 1100px;} .en #headerNew #headmenus .wrap a.anc {max-width: 160px;} .topContainer .txt a:hover {background-color: #ffe33e;border:1px solid #ffac00;} .en #headerNew .headerDesktop .li > #headbarSR1 {font-size: 1.1em;line-height: 1;max-width: 8em;text-align: center;} } @media (max-width:1280px) { .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/tc/Kv_desktop@2x.png') no-repeat center top;background-size:contain;background-color: #ffd400;} .en .topContainer {background:url('https://static6.orstatic.com/info/orpay/images/en/Kv_desktop_en@2x.png') no-repeat center top;background-size:contain;background-color: #ffd400;} } @media (max-width:768px) { body, p {font-size: 14px;} .topContainer , .en .topContainer {background: none; padding: 20px 0 40px ;position:relative; background-color: #FFD400;} .topContainer:before {content: ''; display: block; width: 100%; background:url('https://static6.orstatic.com/info/orpay/images/tc/KV_mobile.png') no-repeat center center;background-size:cover; padding-bottom: 99%; margin-bottom: 20px;} .en .topContainer:before {background:url('https://static6.orstatic.com/info/orpay/images/en/KV_mobile_en.png') no-repeat center center;background-size:cover; } .topContainer .txt {width: 100%; left: auto; top: auto; padding: 0 20px; position: relative;} .topContainer .txt p {font-size: 14px;} .topContainer .txt a span {font-size: 17px;} body > #wrap, #headerNew , .menu-overlay {-webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;} body.navOpened > #wrap {transform: translateX(-70vw);} body.navOpened #headerNew {left: -70vw;} .menu-overlay {position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100%; opacity: 0; background: rgba(0,0,0,.6);} body.navOpened .menu-overlay {left: -70vw; z-index: 100; opacity: 1;} #headerNew > .inner {padding: 9px 15px;} #headerNew .openrice-logo {max-width: 100px;} #headerNew .headerDesktop {display: none;} #headerNew .grid-button {position: absolute; right: 0;} #headerNew .grid-button .grid {position: relative;display: block; width: 27px; height: 30px; cursor: pointer; margin: 0 auto; float: none; -webkit-transition: all 0.3s; transition: all 0.3s; } #headerNew .grid-button .grid > span {position: absolute; top: 50%; display: block; width: 100%; height: 3px; background-color: #000; } #headerNew .grid-button .grid > span:before, #headerNew .grid-button .grid > span:after {content: ""; position: absolute; width: 100%; height: 100%; background-color: #000; -webkit-transition: all 0.3s; transition: all 0.3s; } #headerNew .grid-button .grid > span:before {-webkit-transform: translateY(-9px); transform: translateY(-9px); } #headerNew .grid-button .grid > span:after {-webkit-transform: translateY(9px); transform: translateY(9px); } #headerNew #headmenus {opacity: 1; visibility: visible; position: fixed; z-index: 200; width: 70vw; height: 100vh; top: 0; right: -170vw; background-color: #fff; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;} body.navOpened #headerNew #headmenus {right: -30vw;} #headerNew #headmenus .wrap {} #headerNew #headmenus .wrap .mmtop {background-color: #FFD400; padding: 20px 20px 40px; margin-bottom: 30px; position: relative;} #headerNew #headmenus .wrap .mmtop > div.closebtn {background: url(https://static6.orstatic.com/info/orpay/images/expandbox-close.gif) no-repeat center center; background-size: contain; width: 25px; height: 25px; position: absolute; left: 20px; top: 15px;} #headerNew #headmenus .wrap .mmtop > div.langbtns {text-align: right; font-size: 0; margin-bottom: 30px;} #headerNew #headmenus .wrap .mmtop > div.langbtns a {color: #4e3c2e; display: inline-block; vertical-align: middle; padding: 0 10px; line-height: 1; font-size: 15px;} #headerNew #headmenus .wrap .mmtop > div.langbtns a:last-child {border-left: 1px solid #4e3c2e; padding-right: 0;} #headerNew #headmenus .wrap .mmtop:after {content: ''; display: block; background: url(https://static6.orstatic.com/info/orpay/images/tc/menu_title_m.png) no-repeat center center; background-size: contain; width: 160px; height: 245px; margin: auto;} .en #headerNew #headmenus .wrap .mmtop:after {background: url(https://static6.orstatic.com/info/orpay/images/en/menu_title_en_m.png) no-repeat center center; background-size: contain; width: 200px; height: 210px;} #headerNew #headmenus .wrap > a.anc, #headerNew #headmenus .wrap > a {display: block; line-height: 1.5; margin: 5px auto; padding: 10px 30px; letter-spacing: 2px; font-size: 20px; color: #4e3c2e; border: none; text-align: left; position: relative;} .en #headerNew #headmenus .wrap > a.anc, .en #headerNew #headmenus .wrap > a {font-size: 17px; line-height: 1.3; padding: 0.5em 3em 0.5em 1.5em;} #headerNew #headmenus .wrap a.anc:after {display: none;} #headerNew #headmenus .wrap > a span {position: relative;} #headerNew #headmenus .wrap > a.active span:after {content: '';display: block;position: absolute; bottom: -6px; left: 0; width: 100%; height: 3px; background-color: #FD3C0B;} #headerNew #headmenus .wrap > a:before {content: ''; display: block;position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; width: 15px; height: 20px; background: url(https://static6.orstatic.com/info/orpay/images/arrow.svg) no-repeat center center; background-size: contain;} #headerNew #headmenus .wrap > a.active:before {background: url(https://static6.orstatic.com/info/orpay/images/arrow-active.svg) no-repeat center center; background-size: contain;} #headerNew .headbarSR1 {color: #ffffff;font-size: 1.1em; padding: 5px 12px; border-radius: 20px; line-height: 1.5;cursor: pointer;background-color:#fe3c0a; display: inline-block;position: absolute;right:2.5em; } .en #headerNew .headbarSR1 {font-size: 0.8em; right: 3em;} #headerNew #headmenus .wrap .menuSR1 {display: block!important;} } @media (max-width:640px) { .topContainer .txt p {font-size: 13px;} .en .topContainer .txt p {font-size: 12px;} } @media (max-width:340px) { .en #headerNew #headmenus .wrap .mmtop {margin-bottom: 20px;} #headerNew #headmenus .wrap > a.anc, #headerNew #headmenus .wrap > a {font-size: 18px; padding: 7px 30px; margin: 3px auto;} } #section1 {background-color: #fffae7;padding: 5em 0;} #newOffers {padding-top: 2em;} #newOffers >.row > .column {margin:1em 0;} #newOffers .newOffer {} #newOffers .newOffer >.row {margin-left: 0.5rem;margin-right: 0;background-color: white; overflow: hidden; border-radius: 1em;} #newOffers .newOffer .img {/*min-height: 160px;*/} #newOffers .newOffer .img > img {width: 100%;} #newOffers .txt {padding: 0.8em 2em 1.5em; position: relative;} #newOffers .tt {font-size: 1.2em; font-weight: 900;} #newOffers p {color: black; } #newOffers .ott {font-size: 1.8em; color: #fe3c0a; font-weight: 900;line-height: 1.3;letter-spacing: 0;} .en #newOffers .ott {font-size: 1.8em;line-height: 1.2; } #newOffers .tt span {letter-spacing: 0;} #newOffers .desc {padding-bottom: 0.5em; line-height: 2;} #newOffers .period {color: gray;padding-top:0.3em;position: relative;display: block;} @media (max-width:640px) { #section1 {background-color: #fffae7;padding-bottom: 0;} #newOffers >.row > .column {margin:0;padding:0.5rem;} #newOffers .newOffer >.row {margin-left: 0; border-radius: 5px;} #section1 .title_img {max-width: 95%;} #newOffers .newOffer .img {min-height: 126px;} #newOffers .txt {border-bottom: 1px solid #dadada;} } #section2 {padding: 70px 0 0;} #section2 .mbo {display: none;} #section2 > h1 {text-align: center; font-size: 34px; line-height: 1.4;} #section2 > h1:before {content: ''; display: inline-block; vertical-align: text-bottom; background: url(https://static6.orstatic.com/info/orpay/images/creditcard_icon_m.png) no-repeat center center; background-size: contain; width: 55px; height: 50px; margin-right: 10px;} #section2 > h1 span {color: #FD3C0B;} #section2 > p {text-align: center; font-size: 18px; line-height: 1; margin-top: 15px; font-weight: 400;} #section2 .menuSec {margin-top: 50px;} #section2 .menuSec .menuBox {text-align: center;} #section2 .menuSec .menuBox > div {display: inline-block; vertical-align: bottom; margin: 0 5px;} #section2 .menuSec .menuBox > div .tabmenu {font-size: 22px; display: block; font-weight: 400; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 0 40px; line-height: 2.5; border-width: 1px 1px 0 1px; border-color: #000; border-style: solid; cursor: pointer;} #section2 .menuSec .menuBox > div .tabmenu.active {border-color: #FFD400; background-color: #FFD400;} #section2 .menuSec .menuBox > div .tabmenu .mbo {display: none;} #section2 #tabContents {padding: 0 0 15px; overflow: hidden;} #section2 #tabContents .inner {background-color: #FFD400; padding: 50px 0;} #section2 #tabContents .inner > .container {max-width: 800px; position: relative;} #section2 #tabContents .inner > .container:after {content: ''; display: block; position: absolute; width: 360px; height: 360px; background: url(https://static6.orstatic.com/info/orpay/images/stepKV.png) no-repeat center center; background-size: cover; bottom: -90px; right: -320px;} #section2 #tabContents .inner > .container > div {opacity: 0;-webkit-transform: translateY(-3px); transform: translateY(-3px); position: absolute; width: 100%; z-index: -1; left: 0;} #section2 #tabContents .inner > .container > div.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: 1;-webkit-transform: translateY(0px);transform: translateY(0px);} #section2 #tabContents .inner > .container > div > .row {-ms-flex-align: center; -webkit-box-align: center; align-items: center;} #section2 #tabContents .inner > .container > div .slider {max-width: 220px; margin: 0 auto; padding: 40px 10px; display: inline-block; white-space: nowrap; position: relative;} #section2 #tabContents .inner > .container > div .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: #1c1e23; box-shadow: 0px 0px 10px 0px rgb(0,0,0,.15);} #section2 #tabContents .inner > .container > div .slider:after {content: ''; display: block; position: absolute; width: 140%; padding-bottom: 90%; background: url(../images/caps/newor/cardface-orpay.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 .inner > .container > div .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 .inner > .container > div .slider > div {position: relative; overflow: hidden; z-index: 2;} #section2 #tabContents .inner > .container > div .slider button {display: none!important;} #section2 #tabContents .inner > .container > div .slider .slide {display: inline-block; vertical-align: top;max-height: 400px;} #section2 #tabContents .inner > .container > div .text {max-width: 470px; padding: 0 1em 0; font-size: 18px; display: inline-block;} #section2 #tabContents .inner > .container > div .text > h1 {font-size: 26px; line-height: 1.3; margin: 0;} #section2 #tabContents .inner > .container > div .text > h1 span {color: #FD3C0B;} #section2 #tabContents .inner > .container > div .text ul {counter-reset: step-counter; padding:30px 0 0 0; margin-right: 30px;} #section2 #tabContents .inner > .container > div .text ul li {opacity: 0.5; text-align: left; padding: 0 0 0.7em 0; font-size: 22px; line-height: 1.4; font-weight: 400;list-style:none; position: relative; letter-spacing: 1px; cursor: pointer;} .en #section2 #tabContents .inner > .container > div .text ul li {letter-spacing: 0;} /*#section2 #tabContents .inner > .container > div .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 .inner > .container > div .text ul li.active {opacity: 1;} #section2 #tabContents .inner > .container > div .text ul li .payIcon {display: inline-block; vertical-align: middle; width: 50px; height: 50px; background: url(https://static6.orstatic.com/info/orpay/images/pay_icon_m.png) no-repeat center center; background-size: contain; margin-left: 5px;} /* #section2 #tabContents #tabContent3 .slick-list.draggable{height: 433px!important;} */ @media (min-width:1500px) { #section2 > h1 {font-size: 48px;} } @media (min-width:769px) { #section2 .menuSec .menuBox > div .tabmenu:hover {background-color:#fff98e;} } @media (max-width:768px) { #section2 {padding: 40px 0 0;} #section2 .dko {display: none;} #section2 .mbo {display: block;} #section2 > h1 {font-size: 22px; max-width: 270px; margin: 0 auto} .en #section2 > h1 {max-width: 300px;} #section2 > h1:before {display: block; margin: 0 auto 10px; width: 40px; height: 35px;} #section2 > p {font-size: 12px;} #section2 .menuSec .menuBox {font-size: 0;} #section2 .menuSec .menuBox > div {margin: 0; } #section2 .menuSec .menuBox > div:first-child {width: 35%;} #section2 .menuSec .menuBox > div:nth-child(2) {width: 20%;} #section2 .menuSec .menuBox > div:last-child {width: 45%;} #section2 .menuSec .menuBox > div .tabmenu {border-radius: 0; font-size: 12px; font-weight: bold; line-height: 1.3; padding: 8px 0; margin: auto; border-left:0;border-right:0;border-color: #e2dede;} #section2 .menuSec .menuBox > div .tabmenu .mbo {display: block;} #section2 #tabContents {padding: 0 0 6px;} #section2 #tabContents h1 {text-align: center; padding: 0 30px} #section2 #tabContents h1 .red {color: #FD3C0B;} #section2 #tabContents .inner {padding: 40px 0 0;} #section2 #tabContents .inner > .container:after {background: url(https://static6.orstatic.com/info/orpay/images/stepKV_m.png) no-repeat center center; background-size: cover; position: relative; bottom: -9px; right: auto; width: 100%; height: auto; padding-bottom: 65%; margin: 10px auto 0;} #section2 #tabContents .slider img {max-width: 180px;} #section2 #tabContents .inner > .container > div .slider {display: block; margin: 20px auto 0; position: relative;/* overflow: visible;*/max-width: 200px;} #section2 #tabContents .inner > .container > div .slider .slick-arrow {font-size: 0; position: absolute; top: 0; bottom: 0; margin: auto; width: 25px; height: 50px; background: url(https://static6.orstatic.com/info/orpay/images/arrow-active.svg) no-repeat center center;background-size: contain; border: none; z-index: 1;} #section2 #tabContents .inner > .container > div .slider .slick-prev {left: -50px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);} #section2 #tabContents .inner > .container > div .slider .slick-next {right: -50px;} #section2 #tabContents .inner > .container > div .text {display: block;padding-top: 1em;} #section2 #tabContents .inner > .container > div .text ul {margin: 0; padding: 5px 0 0;} #section2 #tabContents .inner > .container > div .text ul li {display: none; text-align: center; font-size: 18px; padding: 0;} .en #section2 #tabContents .inner > .container > div .text ul li {line-height: 25px; margin-top: 15px;} #section2 #tabContents .inner > .container > div .text ul li.active {display: block;} /*#section2 #tabContents .inner > .container > div .text ul li:before {display: none;}*/ #section2 #tabContents .inner > .container > div .text ul li .payIcon {width: 40px; height: 40px;} #section2 #tabContents #tabContent3 .slick-list.draggable{height: 350px!important;} } #section3 {border-top: 2px solid #4F3D2E; } @media (max-width:768px) { #section3 .ttImg {max-width: 260px;} } /**** 餐廳區 ****/ .result_wrapper {width:100%; margin:0 auto; padding:0px 0 10px;} .result_wrapper.offsettop {padding-top: 90px;} .anchorNav {margin:auto; position:relative; text-align:center; padding:15px 0px; background-color:#82003e;} .anchorNav.sticky {top: 0px; z-index: 20; position: fixed; width: 100%; left: 0; padding-top:20px; -webkit-box-shadow: 0px 1px 1px 0px rgba(26, 26, 26); -moz-box-shadow: 0px 1px 1px 0px rgba(26, 26, 26); box-shadow: 0px 1px 1px 0px rgba(26, 26, 26);} .anchorNav .container {font-size:0; position:relative; margin:auto; max-width:1100px; } .anchorNav span {display:inline-block; vertical-align:middle; cursor:pointer; width:190px; height:58px; margin:0 15px;} .anchorNav span#tap-teppanyaki {background:url(https://static7.orstatic.com/info/orpay/images/tap-teppanyaki.png) center no-repeat;background-size:contain;} .anchorNav span#tap-teppanyaki:hover { opacity:0.8} .anchorNav span#tap-fine-dine {background:url(https://static8.orstatic.com/info/orpay/images/tap-fine-dine.png) center no-repeat;background-size:contain;} .anchorNav span#tap-fine-dine:hover { opacity:0.8} .anchorNav span#tap-steak {background:url(https://static8.orstatic.com/info/orpay/images/tap-steak.png) center no-repeat;background-size:contain;} .anchorNav span#tap-steak:hover { opacity:0.8} .anchorNav span#tap-cafe {background:url(https://static8.orstatic.com/info/orpay/images/tap-cafe.png) center no-repeat;background-size:contain;} .anchorNav span#tap-cafe:hover { opacity:0.8} .result-container {padding-top: 20px;} .member_Box {max-width:1100px; margin:4% auto 50px; padding:0; text-align:center;} .member_Box .container {margin:0 auto;display:block} #swipebox-slider .slide img {max-width: 100%;} .result_wrapper .moreBtn {color: #ffffff; letter-spacing: 2px; width: 100%; max-width: 360px; text-align: center; line-height: 2.6; padding: 0; border-radius: 30px; border: 1px solid #009245; margin: 30px auto; display:block; font-size: 2em;background-color: #009245;} #section4 {background-color: #f2f2f2; padding-bottom: 50px;} #poiLogos {font-size: 0; margin-top: 30px;} #poiLogos .column {padding: 2px;} #poiLogos > div > .img {position: relative; display: inline-block; vertical-align: top;width:100%;padding-bottom: 100%;} #poiLogos > div > .img a {position: absolute; width: 100%; height: 100%; left: 0; top: 0;} /**** sponsorRow ****/ #sponsorRow .sponsorGroup {display:block;vertical-align:middle;width:100%;margin:15px auto; text-align: center;} #sponsorRow .sponsorGroup p {display:inline-block;vertical-align:middle;font-size:1em;line-height:1.2;text-align:left;color:#646464;font-weight:700;margin-right:15px; letter-spacing: 2px;} #sponsorRow .sponsorGroup ul {display:inline-block;vertical-align:middle;margin:0;padding:0;} #sponsorRow .sponsorGroup ul li {padding-bottom:0;position:relative;list-style:none;display:inline-block;vertical-align:middle;} #sponsorRow .sponsorGroup ul li img {margin:auto;max-height:65px;max-width:150px;margin-right:15px;} #sponsorRow .sponsorGroup img {display: inline-block; vertical-align: middle;max-width: 360px;} #sponsorRow .sponsorGroup p:last-child {vertical-align:bottom;margin-bottom:9px;} #footer .footTopCol2R {width: 69%;} @media (min-width: 1500px) { .member_Box {max-width:1500px;} } @media (min-width: 769px) { .lity-content {border: 15px solid #fff;} .result_wrapper .moreBtn:hover {background-color:#00d800;} } @media (min-width: 641px) { #swipebox-slider .slide img {max-width: 600px;} } @media screen and ( max-width:768px) { body {min-width:0; padding-top: 50px;} .mbl {display: block;} #sponsorRow .sponsorGroup p {margin-bottom: 15px;} #sponsorRow .sponsorGroup img {display: block; margin: auto; max-width: 300px!important;} } @media (max-width:640px) { .result_wrapper.offsettop {padding-top: 29%;} .result-container {padding:0 0 5%;} .member_Box .container {margin:0 auto;display:block; width:100%; /*background-color: #ececec;*/} .anchorNav {padding:0px 0 ;width:100%;} .anchorNav.sticky {padding-top:0px;} .result_wrapper .moreBtn {width: 90%;} .anchorNav span {width:45%; height:auto; padding-bottom:14%; margin:0px 1%;} .member_Box {background-color:transparent; width:100%;padding:0; margin-bottom: 0} #section4 {padding: 0 10px 30px;} #section4 .ttImg {max-width: 300px;} } @media (max-width:320px) { #newOffers .newOffer .img {min-height: 100px;} .en #headerNew #headmenus .wrap .menuSR1 {display: none!important;} } /* iPad Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #newOffers .newOffer .img {min-height: 120px;} #headerNew #headmenus .wrap .mmtop:after {height: 360px;width: 100%;} #newOffers >.row > .column, #otherPage .member_Box .poiList .column {flex: 0 0 50%;padding: 0.3% 1%;} #poiLogos > .column {flex: 0 0 20%;} #section2 {display: none;} #section3 .ttImg {max-width: 100%;} }