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;} fieldset, img {border:0;} ol, ul {list-style:none;} *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } .clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 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;} .hidden {display: none!important;} .dko {display: inline-block;} .mbo {display: none!important;} .left {float:left;} .right {float:right;} * html .clearfix {zoom:1;} /* IE6 */*:first-child+html .clearfix {zoom:1;} /* IE7 */img {max-width:100%;} a {text-decoration:none;} .noScroll {overflow:hidden;} .dktbreak {display: block;} @media (max-width:768px) { .dko {display: none!important;} .mbo {display: block!important;} .dktbreak {display: none;} } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ img {max-width: 100%;display: block;} img.ctrImg {display: block; margin: auto;} img.fullwidth {width: 100%;} h2 {font-size: 1.8em;margin-bottom: 5px;} h3 {font-size: .9em;} p {line-height: 1.6; font-size: 14px;} small {font-size: .75rem;} a {text-decoration: none;} div {-webkit-overflow-scrolling: touch;} .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.25 * 1); } .line-clamp-2 {-webkit-line-clamp : 2; height : calc(1em * 1.25 * 2); } .line-clamp-3 {-webkit-line-clamp : 3; height : calc(1em * 1.25 * 3); } .line-clamp-4 {-webkit-line-clamp : 4; height : calc(1em * 1.25 * 4); } .alignCtr {margin: auto; width: 90%;} .txtCtr {text-align: center;} .lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#000;background:rgba(0,0,0,0.8);outline:none!important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease} .lity.lity-opened{opacity:1} .lity.lity-closed{opacity:0} .lity-active {overflow: hidden;} .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:101%;-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; 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);background:#000} .lity-hide{display:none} @keyframes fadeoutW { 0% {opacity: 1; } 99% {opacity: 0; } 100% {visibility: hidden; } } body {margin: 0px; position: relative; height: 100%;font-family: Noto Sans TC, Arial,'Microsoft YaHei',"Microsoft JhengHei","Source Han Sans","PingFangHK","Heiti TC",Verdana,Geneva,sans-serif; position:relative; height:100%; color: #483e32;} #bodyContent {position: relative; width: 100%; margin:auto; max-width: none; min-width: 1260px; background: #ebf7ed;} @media (max-width: 1500px) { html, body {font-size: 13px;} } @media (max-width: 768px) { html, body {font-size: 10px;} #bodyContent {max-width: 768px; min-width: 0;} } .caret {display: inline-block;width: 0;height: 0;margin-left: 8px; margin-bottom: 3px; vertical-align: middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;} #headerNew {position: absolute; top: 0.5%;; right: 4%; z-index: 10;} @media (min-width: 80rem) { #headerNew {top: 2vw; right: 4vw;} } #headerNew .li {display: inline-block; vertical-align: middle; margin-left: .65rem; position: relative; color: #fff; font-size: 1rem; font-weight: 600;} #headerNew a.facebook-share, #headerNew .headerLangBtn {border: 1px solid #fff; cursor: pointer;} #headerNew .headerLangBtn {border-radius: 20px; line-height: 1; font-size: 1.2rem; padding: 7px 18px; background-color: #fff; color: #66b95c;} #headerNew a.facebook-share {font-size: 1rem; color: #fff; margin-left: 5px; border-radius: 50%; line-height: 1.2; background: url(../images/social-icons/fb1.svg) no-repeat center / 56%; display: inline-block; vertical-align: middle; width: 2.35rem; height: 2.35rem;} #headbarLang.open .caret {-webkit-transform: rotate(180deg);transform: rotate(180deg);} .lang-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;} #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 {list-style: none;} .lang-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{background-color: #e5e5e5;} .lang-dropmenu-block ul li a.active span {font-size:15px;font-weight: 700;color:#3e75d9;} @media (max-width: 48rem) { #headerNew {top: 23vw; right: 5%;} #headerNew .headerLangBtn {border-radius: 3rem; border: 1px solid; padding: 1.25vw 3vw; font-size: 2.75vw;} .caret {margin-left: 1vw; border-top: 3px solid; border-right: 3px solid transparent; border-left: 3px solid transparent; margin-bottom: 2px;} } .footerWrap .footerTop {background-color: #71bd65; padding: 30px 15px;} .footTopTxt {color: #fff; max-width: 625px;} .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(../images/social-icons/instagram.svg) no-repeat center center; width: 20px; height: 20px;} .footTopSocialGroup .foot-social.yt {background: url(../images/social-icons/youtube.svg) no-repeat center center; width: 20px; height: 20px;} .footTopSocialGroup .foot-social.fb {background: url(../images/social-icons/facebook.svg) no-repeat center center; width: 20px; height: 20px;} #tncBtn {color: #fff; border: 1px solid; border-radius: 2px; display: inline-block; vertical-align: middle; line-height: 2; padding: 0 8px; font-size: .7rem; margin-left: 10px;} .footerCR {color: #fff; margin-top: 5px; text-align: right;} .footerCR > span {display: inline-block; vertical-align: middle;} .footerCR > span.copyright-text {font-size: .7rem; margin-left: 5px;} #backtopBtn {position: absolute;right: 20px;top: -20px;width: 41px;height: 41px;background: url(https://static6.orstatic.com/info/global/img/backtopArr.png) no-repeat center center / contain;cursor: pointer;} @media only screen and (max-width: 640px) { .footTopTxt {max-width: 80%; margin: auto;} .footTopTxt p {font-size: 3vw; text-align: center;} .footTopTxt small {font-size: 1.85vw; display: block; line-height: 1.8;} .footTopSocialGroup {text-align: center; margin-top: 20px;} .footerCR {text-align: center; margin-top: 3vw;} .footerCR > span#OR_FOOT_logo {max-width: 2.85vw; vertical-align: middle;} .footerCR > span.copyright-text {font-size: 2vw;} } @media (max-width: 360px) {.footerCR > span {font-size: 9px;}} #pageTop {background: url(../images/cash_bg.jpg); clip-path: circle(416rem at 50% -314rem);} .en #pageTop {clip-path: circle(426rem at 50% -310rem);} @media (min-width: 80rem) { #pageTop {clip-path: circle(400vw at 50% calc(-345vw + 607px));} .en #pageTop {clip-path: circle(400vw at 50% calc(-341vw + 637px));} } @media (min-width: 93.75rem) { #pageTop {clip-path: circle(413vw at 50% calc(-354vw + 734px));} .en #pageTop {clip-path: circle(423vw at 50% calc(-357vw + 765px));} } @media (max-width: 48rem) { #pageTop {background-size: 10% auto; clip-path: circle(259vw at 50% 61vw);} .en #pageTop {background-size: 10% auto; clip-path: circle(275vw at 50% 82vw);} } #KV {position: relative;} #KV .logos {position: absolute; z-index: 2; top: 10%; left: 6%; width: 29%; display: flex; flex-flow: row nowrap; justify-content: space-between;} #KV .logos .orLogo {-ms-flex: 0 0 49%; -webkit-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%;} #KV .logos .hsLogo {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;} #KV .logos a img {width: 100%;} #KV .KVimg {position: relative;} @media (max-width: 48rem) { #KV {margin-top: -15vw;} #KV:before {content: ''; display: block; position: absolute; z-index: 0; top: 15vw; width: 100%; padding-bottom: 50%; background-color: #fff;} #KV .logos {top: 17%; left: 8%; width: 60%;} #KV .KVimg {z-index: 1;} } #cardSec {margin-top: 2rem;position: relative;} #cardSec .icons {position: absolute; top: 0; right: 10%;width: 20%;} #cardSec .container {max-width: 42rem; margin: auto;} @media (min-width: 80rem) { #cardSec {margin-top: 3.5vw;} .en #cardSec {margin-top: 1.5vw;} } @media (min-width:128rem) { } @media (max-width: 48rem) { #cardSec {margin-top: 0;} #cardSec .container {max-width: 64vw;} #cardSec .icons {display: none;} } #infoSec {padding: .75rem 2rem 5rem;} #infoSec .container {max-width: 90rem; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-between;} .en #infoSec .container {max-width: 100rem;} #infoSec .container > div:first-child {-ms-flex: 0 0 40%; -webkit-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;} #infoSec .container > div:last-child {-ms-flex: 0 0 58%; -webkit-flex: 0 0 58%; flex: 0 0 58%; max-width: 58%;} #infoSec .textBlock {position: relative; background-color: #d4f0dc; border-radius: 6rem 0 6rem 0; padding: 2rem 3rem;} #infoSec .textBlock p {font-size: 1.375rem; font-weight: 700; line-height: 1.75;} span.g {color: #088c42; font-weight: 800;} span.funDollar {display: inline-block; vertical-align: middle; background: url(../images/fun_dollar.svg) no-repeat center / contain; width: 11rem; height: 1.4rem; margin-bottom: .2rem;} span.funDollars {display: inline-block; vertical-align: middle; background: url(../images/fun_dollars.svg) no-repeat center / contain; width: 11rem; height: 1.4rem; margin-bottom: .2rem;}sup {font-size: 60%; top: -.6em;} #infoSec .textBlock hr {border-color: #2df082; display: block; max-width: 97%; margin: 1rem auto;} #infoSec .textBlock p.date {font-size: 1.65rem; font-weight: 800;} #infoSec .textBlock .tnc {color: #0066cc; border-bottom: 1px solid #0066cc; font-size: 1.25rem; display: inline-block; margin-top: .5rem;} #infoSec .textBlock .tnc:after {content: ''; display: inline-block; vertical-align: middle; background: url(../images/arrow-blue.png) no-repeat center center / contain; width: .975rem; height: .975rem; margin: 0 0 .15rem .25rem;} #infoSec .textBlock .btn {position: absolute; right: 0%; bottom: -5%;} #infoSec .textBlock .btn:before, #infoSec .textBlock .btn:after {content: ''; display: block; position: absolute; width: 87%; height: 87%; z-index: 1; transition: all .2s ease-in-out;} #infoSec .textBlock .btn:before {left: -2%; bottom: 5.5%; background: url(../images/button-deco1.png) no-repeat center / contain;} .en #infoSec .textBlock .btn:before {left: -17%; bottom: 7.5%;} #infoSec .textBlock .btn:after {right: 2%; top: -30%; background: url(../images/button-deco2.png) no-repeat center / contain;} .en #infoSec .textBlock .btn:after {right: -1%; top: -16%;} #infoSec .textBlock .btn span {color: #088c42; font-size: 1.65rem; font-weight: 800; display: block; line-height: 1; background-color: #fff; padding: 1.45rem 2.35rem; border-radius: 3rem; border: 3px solid #088c42; position: relative; transition: background-color .2s ease-in-out;} #infoSec .textBlock .btn span:after {content: ''; display: inline-block; vertical-align: middle; background: url(../images/arrow-green.png) no-repeat center center / contain; width: 1.55rem; height: 1.55rem; margin: 0 0 .3rem .5rem;} #infoSec .note {margin: 5rem auto 2.5rem; padding: 0 13rem; font-weight: 600;} #infoSec .note ol {padding-left: 1rem;} #infoSec .note ol li {font-size: .875rem; line-height: 1.6;} @media (min-width: 48rem) { .en #infoSec {padding-top: 1.5rem;} .en #infoSec .container > div:first-child img {margin-top: 2rem;} .en #infoSec .textBlock {padding: 2rem 2.5rem 2rem 4rem;} .en #infoSec .textBlock p {font-size: 1.25rem;} .en #infoSec .textBlock p.date {font-size: 1.35rem;} #infoSec .textBlock .btn:hover:before {left: -4%; bottom: -1%;} #infoSec .textBlock .btn:hover:after {right: -4%; top: -32%;} .en #infoSec .textBlock .btn:hover:before {left: -17%; bottom: -10%;} .en #infoSec .textBlock .btn:hover:after {right: -5%; top: -16%;} #infoSec .textBlock .btn:hover span {color: #fff; background-color: #088c42;} #infoSec .textBlock .btn:hover span:after {background: url(../images/arrow-white.png) no-repeat center center / contain;} .en #infoSec .textBlock .tnc {margin-top: 1.5rem;} .en #infoSec .textBlock .btn span {font-size: 1.35rem;} } @media (max-width: 48rem) { #infoSec {padding: 0 8vw 15vw;} #infoSec .container > div:first-child, #infoSec .container > div:last-child {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} #infoSec .container > div:first-child img {max-width: 80%; margin: 0 auto 4vw;} #infoSec .textBlock {padding: 4vw 6vw; border-radius: 15vw 0 15vw 0;} .en #infoSec .textBlock {padding: 4vw 6vw 12vw;} #infoSec .textBlock p {font-size: 2.8vw;} span.funDollar , span.funDollars {width: 25vw; height: 2.8vw; margin-bottom: .2vw;} #infoSec .textBlock p.date {font-size: 3.65vw;} .en #infoSec .textBlock p.date {font-size: 3vw;} #infoSec .textBlock .tnc {font-size: 2.85vw;} #infoSec .textBlock .tnc:after {width: 2.25vw; height: 2.5vw; margin: 0 0 0.25vw 0.8vw;} .en #infoSec .textBlock .btn:before {left: -22%;} .en #infoSec .textBlock .btn:after {right: -12%;} #infoSec .textBlock .btn span {font-size: 3.2vw; letter-spacing: 0; padding: 2.5vw 4vw; border-width: 2px;} #infoSec .textBlock .btn span:after {width: 2.5vw; height: 2.6vw; margin: 0 0 .35vw 1.5vw;} #infoSec .note {padding: 0; margin-bottom: 5vw;} #infoSec .note p {font-size: 2vw;} #infoSec .note ol {padding-left: 2vw;} #infoSec .note ol li {font-size: 2vw; text-align: justify;} } #connectSec {position: relative; margin: -1.25vw auto; z-index: 1;} .en #connectSec {margin: -1vw auto;} #connectSec .container {max-width: 50rem; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;} .en #connectSec .container {max-width: 55rem;} #connectSec .container > div:first-child {-ms-flex: 0 0 36%; -webkit-flex: 0 0 36%; flex: 0 0 36%; max-width: 36%;} #connectSec .container > div:last-child {-ms-flex: 0 0 63%; -webkit-flex: 0 0 63%; flex: 0 0 63%; max-width: 63%; text-align: center;} #connectSec .btn {display: block; border-radius: 4rem; border: 6px solid #f8b807; overflow: hidden; padding: 5px; background-color: #fff;} #connectSec .btn span {font-size: 2rem; font-weight: 800; } .en #connectSec .btn span {font-size: 1.9rem; line-height: 1.1;} #connectSec .btn > span {color: #483e32; display: block; background-color: #fff; background: linear-gradient(120deg, #db8134 20%, #e7bb48 35%, #f2f453 85%); border-radius: 4rem; padding: 3px; overflow: hidden;} #connectSec .btn > span > span {display: block; background-color: #fff; padding: 1.45rem 1.75rem 1.45rem 2.35rem; border-radius: 4rem; line-height: 1; } .en #connectSec .btn > span > span {padding: .75rem 1.75rem .75rem 2.35rem; position: relative;} #connectSec .btn > span > span:after {content: ''; display: inline-block; vertical-align: middle; background: url(../images/blind-icon.png) no-repeat center center / contain; width: 2.15rem; height: 2.15rem; margin: 0 0 .25rem .6rem;} .en #connectSec .btn > span > span:after {position: absolute; top: 31%; left: 85%;} #connectSec .btn span.hl {color: #c85427; } #connectSec .link {display: inline-block; color: #0066cc; font-size: 1.25rem; margin-top: .75rem;} .en #connectSec .link {padding-right: 1.75rem; line-height: 1.2; position: relative;} #connectSec .link:after {content: ''; display: inline-block; vertical-align: middle; background: url(../images/arrow-blue.png) no-repeat center center / contain; width: .975rem; height: .975rem; margin: 0 0 .45rem .25rem;} .en #connectSec .link:after {position: absolute; top: 0; bottom: 0; right: 0%; margin: auto;} @media (min-width: 48rem) { #connectSec .btn:hover > span {transition: color .2s ease-in-out; color: #fff; } #connectSec .btn:hover > span > span {transition: background-color .2s ease-in-out; background-color: #088c42;} #connectSec .btn:hover span.hl {transition: color .2s ease-in-out; color: #fff;} #connectSec .btn:hover > span > span:after {transition: all .2s ease-in-out; width: 0; opacity: 0;} } @media (max-width: 48rem) { #connectSec {margin: -4vw auto -2vw;} #connectSec .container, .en #connectSec .container {max-width: 85%;} #connectSec .btn {border-width: 2px; padding: .75vw; border-radius: 10vw;} #connectSec .btn span, .en #connectSec .btn span {font-size: 3vw;} #connectSec .btn > span {padding: .5vw; border-radius: 10vw;} #connectSec .btn > span > span {border-radius: 10vw; padding: 2.5vw 2vw 2vw;} #connectSec .btn > span > span:after {width: 3.5vw; height: 3.5vw; margin: 0 0 0.3vw 1vw;} #connectSec .link {font-size: 2vw;} .en #connectSec .link {margin-top: .5rem;} #connectSec .link:after {width: 1.5vw; height: 1.5vw; margin: 0 0 0.85vw 0.25vw;} } #infoSec2 {background: url(../images/cash_bg.jpg); padding: 5rem 2rem 6rem; clip-path: circle(400vw at 50% 400vw);} #infoSec2 .container {max-width: 62rem; margin: auto;} #infoSec2 .box {border: 2px solid #c85427; border-radius: 0 0 .5rem 5rem; padding: 2rem 3rem;} #infoSec2 .box p {text-align: center; font-size: 1.375rem; font-weight: 700;} #infoSec2 .box ol {max-width: 50rem; margin: .95rem auto 0; padding-left: 2rem;} #infoSec2 ol li {list-style-type: auto;} #infoSec2 .box ol li {text-align: left; font-size: 1.425rem; font-weight: 800; margin-top: .3rem;} #infoSec2 .container > p {text-align: center; font-size: 1.075rem; font-weight: 700;} @media (max-width: 48rem) { #infoSec2 {background-size: 10% auto; clip-path: circle(200vw at 50% 200vw); padding: 12vw 0 10vw;} #infoSec2 .container {max-width: 80%;} #infoSec2 .box {border: 1px solid #c85427; border-radius: 0 0 1vw 13vw; padding: 3vw 8vw 4vw;} #infoSec2 .box p {font-size: 3vw;} #infoSec2 .box ol li {font-size: 3.1vw;} #infoSec2 .container > p {font-size: 2vw;} } #bannerSec {margin-top: 4rem;} #bannerSec .container {max-width: 62rem; margin: auto;} #bannerSec .bannerImg {width: 100%;} @media (max-width: 48rem) { #bannerSec {margin-top: 8vw;} } #menuPage {padding: 2rem 0;} #menuPage .ttImgWrap {position: relative; margin-top: -4rem; z-index: 1;} #menuPage .container {max-width: 90rem; margin: 2.5rem auto 0; position: relative;} #menuPage .swiper-slide {border-radius: 20px; overflow: hidden; padding: 2px; background: linear-gradient(120deg, #db8134 20%, #e7bb48 35%, #f2f453 85%);} #menuPage .swiper-button-prev, #menuPage .swiper-button-next {width: 6rem; height: 6rem; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,.1); text-align: center; top: 37%;} #menuPage .swiper-button-prev {left: -4.5rem;} #menuPage .swiper-button-next {right: -4.5rem;} #menuPage .swiper-button-prev:after, #menuPage .swiper-button-next:after {font-size: 1.85rem; color: #088c42; font-weight: 800;} @media (min-width: 48rem) { #menuPage {padding: 0 6rem 2rem;} } @media (max-width: 48rem) { #menuPage {padding: 5vw 0;} #menuPage .ttImgWrap {max-width: 65%; margin: -10vw auto 0;} #menuPage .container {margin-top: 2rem;} #menuPage .swiper-button-prev, #menuPage .swiper-button-next {display: none;} } #menuPage .poi {display: block; font-size: 1rem; background-color: #fff; border-radius: 18px; overflow: hidden;} #menuPage .poi .vw {display: block;} #menuPage .poi .vw .v {display: none;} #menuPage .poi .vw .v.active {display: block;} #menuPage .poi .topImg {display: block; height: 250px; position: relative; } #menuPage .poi .topImg .v {height: 100%; position: relative;} #menuPage .poi .topImg .img {height: 100%;} #menuPage .poi .topImg .img:before {content: "";display: block;width: 100%;height: 100%;position: absolute;background: #ffffff;top: 0;left: 0;padding: 0;margin: 0;z-index: 99;} #menuPage .poi .topImg .v.active .img:before {-webkit-animation-name: fadeoutW; -webkit-animation-duration: 1s;-webkit-animation-fill-mode: forwards;animation-name: fadeoutW; animation-duration: 1s;animation-fill-mode: forwards;opacity: 1;} #menuPage .poi .topImg .reminder {display:block;;padding:0.4em 1em;background-color: red;font-size:0.8em;color: white;line-height:1.4;position: absolute;bottom: 5%;right: 5%;border-radius: 50px;} #menuPage .poi .text {position: relative; text-align: left; padding: .75em 1.25em 1.5em; 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% - 250px);} #menuPage .poi .text .top {-ms-flex: 0 0 100%;-webkit-box-flex: 0;-webkit-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} #menuPage .poi .text .subtags {font-size: 0.9em; color: #8c8c8c; line-height: 1; margin: 0.6em 0 .75em;} #menuPage .poi .text .name {font-size: 1.5em; color: #000; font-weight: 800; line-height: 1.2; display: block; margin-bottom: .4em;} #menuPage .poi .text .offer_intro {margin-bottom: 1em;font-size:0.9em;line-height: 1.5;} #menuPage .poi .text .offerTT {position: relative;} #menuPage .poi .text .offerTT.extra {border-bottom: 1px dashed #ccc; padding-bottom: .85em; margin-bottom: .75em;} #menuPage .poi .text .offerTT > div {margin-bottom: 3px;} #menuPage .poi .text .offerTT .tag {font-size: 0.85em;line-height: 1.5;border-radius: 3px;border: 1px solid #000;color: #000;font-weight: 800;padding: 0.15em 0.45em 0.2em 0.6em;margin: 0 0.3em 0 0;position: relative;letter-spacing: 0.1em;vertical-align: text-bottom;} #menuPage .poi .text .offerTT.extra .tag {border: 1px solid #00A25A; color: #00A25A;top:0;} #menuPage .poi .text .offerTT .tt {color: #000;font-weight: 800;font-size: 1.2em;margin-bottom: .4em;letter-spacing: 0.05em;line-height: 1.4;} #menuPage .poi .text .offerTT.extra .tt {color: #00A25A;font-size: 1em;} #menuPage .poi .text .btm {-ms-flex: 0 0 100%;-webkit-box-flex: 0;-webkit-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%; -ms-flex-align: end;-webkit-box-align: end;-webkit-align-items: flex-end; align-self: flex-end;} #menuPage .poi .text .vwPriceBtns {padding-top: 0.5em;padding-bottom: 0.2em;} #menuPage .poi .text .vwPriceBtns.vw1 {display: none;} #menuPage .poi .text .vwPriceBtns .Btn {cursor: pointer; position: relative; font-size: .925em; text-align: center; border-radius: 4px; line-height: 1.85; border: 1px solid; color: #000; font-weight: 800; display: block; display: -webkit-inline-box; -webkit-box-orient: vertical; z-index: 1; margin-right: 0.25%; margin-bottom: .3em; overflow: hidden; text-overflow: ellipsis; padding: 0 7px; -webkit-line-clamp: 1; height: calc(1em * 2 * 1);} .en #menuPage .poi .text .vwPriceBtns .Btn {text-align: left;} #menuPage .poi .text .vwPriceBtns .Btn.active {color: #B90000; border-color: #B90000; cursor: default;} #menuPage .poi .text .prices {margin-top: .7em;} #menuPage .poi .text .prices .price {display: inline-block; vertical-align: bottom;margin-bottom: 0.5em;} #menuPage .poi .text .prices .price > span {display: inline-block; vertical-align: text-bottom; margin-right: .15em;} #menuPage .poi .text .prices .price .discount {color: #009245; font-size: 2.2em; position: relative; font-weight: 800; line-height: 1;} #menuPage .poi .text .prices .price .original {color: #ed1c24; font-size: .9em; display: block; padding-left: 2px; text-decoration: line-through; font-style: italic; display: inline-block;letter-spacing: -1px;} #menuPage .poi .text .desc p {font-size: 0.9em; color: #8a8a8a; -webkit-line-clamp : 3; max-height: calc(1em * 1.6 * 3); display : -webkit-box; -webkit-box-orient : vertical; position: relative; line-height: 1.6; overflow: hidden; text-overflow: ellipsis;} #menuPage .poi .text .desc ul {margin-top: .5em; padding-left: 1em;} #menuPage .poi .text .desc ul li {font-size: .75em; margin-bottom: .25em; color: #555;} #menuPage .poi .text .btns {display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -ms-flex-flow: row nowrap;-webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; margin-top: 1em; } #menuPage .poi .text .btns > a.linkBtn {border-radius: 3px; border: 1px solid; letter-spacing: 1px; padding: 0 .8em;line-height: 2.3;font-size: 1.1rem; text-align: center; font-weight: 800; -ms-flex: 0 0 42%; -webkit-flex: 0 0 42%;flex: 0 0 42%;max-width: 42%; } #menuPage .poi .text .btns > a.bookLinkBtn {margin-right: 1%; color: #555; border-color: #555;} #menuPage .poi .text .btns > a.menuLinkBtn {color: #fff;background-color: #00A25A; border-color: #00A25A;} #menuPage .poi .text .btns > a.shareBtn {-ms-flex: 0 0 12%; -webkit-flex: 0 0 12%;flex: 0 0 12%; max-width: 12%; padding-bottom: 12%; background: url(../images/social-icons/share_button.svg) no-repeat center center; background-size: contain;} @media (min-width: 769px) { #menuPage .poi .text .name {font-size: 22px;} } @media (max-width: 680px) { #menuPage .poi .topImg {height: 160px;} #menuPage .poi .text {height: calc(100% - 160px);} #menuPage .poi .text .tt { font-size: 1.3em; } } @media (max-width: 320px) { #menuPage .poi .text .name {font-size: 1.3em;} #menuPage .poi .text .offerTT .tt{font-size: 1.2em;} #menuPage .poi .text .tt { font-size: 1.1em; } #menuPage .poi .text .vwPriceBtns .Btn {margin-right: 0.5%;} #menuPage .poi .text .offerTT .tag {top: -0.15em;font-size: 0.8em;} #menuPage .poi .text .offerTT.extra .tag {top: -0.1em;} } #travelSec {padding: 0 1.5rem; position: relative; background: url(../images/travel-bg.png) no-repeat center bottom / 100% auto; overflow: hidden;} #travelSec:after {content: ''; display: block; position: absolute; bottom: -475rem; left: -200rem; width: 480rem; height: 480rem; border-radius: 50%; background-color: #71bd65;} #travelSec .ttImgWrap {margin-bottom: -1rem;} #travelSec .countriesBlock {max-width: 90%; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-between;} #travelSec .countriesBlock .country {-ms-flex: 0 0 18%; -webkit-flex: 0 0 18%; flex: 0 0 18%; max-width: 18%; position: relative;} #travelSec .btm {padding-top: 2%; position: relative;} #luggage {position: relative; display: block; margin: auto; width: 21rem; padding-bottom: 45%; background: url(../images/swiper-deco.png) no-repeat center / contain; z-index: 2;} #luggage .inner {position: absolute; width: 56%; top: 30%; left: 0; right: 0; margin: auto;} #luggage .inner:after {content: ''; display: block; position: absolute; z-index: 1; top: -15%; left: -15%; width: 130%; height: 130%; background: url(../images/swiper-img.png) no-repeat center / contain;} #luggage .inner .swiper-container {width: 100%; border-radius: 25%;} #travelSec .btm .deco {display: block; position: absolute; z-index: 1;} #travelSec .btm .deco span {display: block;} @media (min-width: 48rem) { #travelSec .countriesBlock .country:first-child:before {content: ''; display: block; position: absolute; background: url(../images/deco-line2.png) no-repeat center / contain; width: 15%; padding-bottom: 10%; top: 45%; right: 105%;} #travelSec .countriesBlock .country:after {content: ''; display: block; position: absolute;} #travelSec .countriesBlock .country:not(:last-child):after {background: url(../images/deco-line.png) no-repeat center / contain; width: 15%; padding-bottom: 3%; top: 45%; left: 100%;} #travelSec .countriesBlock .country:last-child:before {content: ''; display: block; position: absolute; background: url(../images/deco-line3.png) no-repeat center / contain; width: 15%; padding-bottom: 10%; top: 40%; left: 105%;} #travelSec .countriesBlock .country:last-child:after {content: ''; display: block; position: absolute; background: url(../images/deco-line-plane.png) no-repeat center / contain; width: 38%; padding-bottom: 23%; top: 20%; left: 110%;} #travelSec .btm .deco1 {animation: shake 16s ease-in-out 0s infinite normal none;background: url(../images/travel-deco-left.png) no-repeat center / contain; width: 35%; padding-bottom: 34%; bottom: -3%; left: 2%;} #travelSec .btm .deco2 {animation: shake2 16s ease-in-out 0s infinite normal none;background: url(../images/travel-deco-right.png) no-repeat center / contain; width: 38%; padding-bottom: 32%; bottom: -5%; right: -2%;} #travelSec .btm .deco3 {width: 14%; top: 11%; right: 25%;} #travelSec .btm .deco3 span { position: absolute;animation: fly 60s linear infinite;width:155px;background: url(../images/deco-airplane.png) no-repeat center / contain; padding-bottom: 28%;} #travelSec .btm .deco4 {width: 7%; top: 15%; right: 17%;} #travelSec .btm .deco4 span {background: url(../images/deco-airplane-2.png) no-repeat center / contain; padding-bottom: 21%;} } @media (min-width: 80rem) { #travelSec:after {bottom: -593vw; left: -250vw; width: 600vw; height: 600vw; } #travelSec .countriesBlock {width: 80%;} #luggage {animation: move 15s ease-in-out 0s infinite normal none;width: 20%; padding-bottom: 31%;} } @media (max-width: 48rem) { #travelSec {padding: 3vw 0 10vw; background: url(../images/travel-bg-lower-m.png) no-repeat center 163vw / 100% auto, linear-gradient(180deg, transparent 0%, #fff 50vw);} #travelSec:before {content: ''; display: block; position: absolute; z-index: 0; width: 100%; left: 0; top: -5vw; height: 100%; background: url(../images/travel-bg-upper-m.png) no-repeat center top / 100% auto;} #travelSec:after {bottom: -375vw; left: -150vw; width: 400vw; height: 400vw;} #travelSec .ttImgWrap {position: relative; max-width: 80%; margin: 0 auto; z-index: 1;} #travelSec .countriesBlock {max-width: 80%; margin: 0 auto; justify-content: center;} #travelSec .countriesBlock .country {-ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 1.5vw 2.5vw;} #travelSec .btm {padding-top: 7vw;} #luggage {margin: 0 0 0 3vw; width: 44vw; padding-bottom: 70vw;} #travelSec .btm .deco2 {background: url(../images/travel-deco-m.png) no-repeat center / contain; width: 84vw; padding-bottom: 92vw; bottom: -11vw; left: auto; right: -16vw; z-index: 2;} } #stickyMsg {display: block; position: fixed; z-index: 10; bottom: 8%; left: 103%; width: 10rem; transition: all .3s ease-in-out; opacity: 0;} #stickyMsg.show {opacity: 1; left: calc(100% - 12rem);} #stickyMsg img {width: 100%;} @media (max-width: 48rem) { #stickyMsg {width: 22vw; bottom: 4%;} #stickyMsg.show {left: calc(100% - 24vw);} } /*--------Effect---------*/ @keyframes shake { 0%,100% {transform: rotate(0deg);transform-origin: 50% 50%;} 10% {transform: rotate(3deg);} 20%,40%,60% {transform: rotate(-4deg);} 30%,50%,70% {transform: rotate(4deg);} 80% {transform: rotate(-3deg);} 90% {transform: rotate(3deg);} } @keyframes shake2 { 0%,100% {transform: translateX(0%);transform-origin: 50% 50%;} 15% {transform: translateX(-5px) rotate(-6deg);} 30% {transform: translateX(5px) rotate(6deg);} 45% {transform: translateX(-5px) rotate(-3.6deg);} 60% {transform: translateX(3px) rotate(2.4deg);} 75% {transform: translateX(-2px) rotate(-1.2deg);} } @keyframes fly { 0% { left: 100% /* 起始位置 */ } 100% { left: -500%; /* 向左移動，超出视口 */ } } @keyframes move { 0% { left: 0% /* 起始位置 */ } 25% { left: 5%; /* 向左移動，超出视口 */ } 75%{left: -5%} 100%{left: 0%} }