/* normalize css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* jsScrollpane css */
.jspContainer{overflow:hidden;position:relative}.jspHorizontalBar,.jspPane,.jspVerticalBar{position:absolute}.jspVerticalBar{top:0;right:0;width:16px;height:100%;background:red}.jspHorizontalBar{bottom:0;left:0;width:100%;height:16px;background:red}.jspCap{display:none}.jspHorizontalBar .jspCap{float:left}.jspTrack{background:#dde;position:relative}.jspDrag{background:#bbd;position:relative;top:0;left:0;cursor:pointer}.jspHorizontalBar .jspDrag,.jspHorizontalBar .jspTrack{float:left;height:100%}.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;padding:0;margin:0}.jspArrow.jspDisabled{cursor:default;background:#80808d}.jspVerticalBar .jspArrow{height:16px}.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%}.jspVerticalBar .jspArrow:focus{outline:0}.jspCorner{background:#eeeef4;float:left;height:100%}* html .jspCorner{margin:0 -3px 0 0}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

/* main css */
canvas {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none
}

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.cf:before,
.cf:after {
    content: ' ';
    display: table
}

.cf:after {
    clear: both
}

.cf {
    *zoom: 1
}

a {
    text-decoration: none;
    color: inherit
}

a:focus,
a:active,
a:visited,
a img:focus,
a img:active,
a img:visited,
.scroll-pane:focus,
.scroll-pane:active,
.scroll-pane:visited,
button:focus,
button:active,
button:visited {
    border: none;
    outline: none
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    font-weight: 400
}

ul,
ol,
dl {
    margin: 0;
    padding: 0
}

.ctr {
    text-align: center !important
}

.lft {
    text-align: left !important
}

.rgt {
    text-align: right !important
}

.ylw {
    color: #ffe000
}

.indent {
    margin-left: 9%;
    display: block
}

.undrlne {
    text-decoration: underline
}

.tpl-header {
    display: none
}

.tpl-right-nav {
    display: none
}

body {
    background: url("main-bg.jpg") center top no-repeat;
    font-size: 14px;
    height: 895px;
    min-width: 320px
}

.inner {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

.content {
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    height: 850px;
    overflow: hidden;
    position: relative
}

.content-left {
    position: relative;
    max-width: 350px;
    width: 100%;
    display: inline-block;
    vertical-align: top
}

.content-right {
    position: relative;
    max-width: 982px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: -340px
}

.banner {
    max-width: 380px;
    width: 100%;
    text-align: left;
    color: #fff;
    height: 800px
}

.banner p {
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px;
    font-size: 29px
}

.id .banner p {
    font-size: 24px
}

.banner-logo {
    background-size: contain;
    width: 347px;
    height: 80px;
    margin: 0 0 10px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.banner-logo:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: drop-shadow(0 0 5px #ffe000);
    -moz-filter: drop-shadow(0 0 5px #ffe000);
    -o-filter: drop-shadow(0 0 5px #ffe000);
    -ms-filter: drop-shadow(0 0 5px #ffe000);
    filter: drop-shadow(0 0 5px #ffe000)
}

.banner-logo>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%
}

.lights {
    opacity: .5
}

.prize .lights {
    opacity: .3
}

.qr {
    position: relative;
    cursor: pointer;
    max-width: 350px;
    width: 100%;
    height: 200px;
    z-index: 2
}

.qr.act {
    display: block
}

.qr a {
    font-weight: 400
}

.qr-phone,
.qr-info {
    display: inline-block;
    vertical-align: top;
    position: relative
}

.qr-phone {
    background: url(smartphone.png) no-repeat;
    width: 118px;
    height: 200px;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.qr-code {
    position: absolute;
    left: 6px;
    top: 23px;
    background: rgba(0, 0, 0, .6);
    width: 107px;
    height: 157px;
    padding-top: 15px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.qr-code>img {
    width: 97px;
    border: 2px solid #000
}

.qr:hover .qr-phone {
    top: -50px
}

.qr:hover .qr-code {
    opacity: 1
}

.qr-info {
    color: #fff;
    margin: 15px 0 0 5px;
    width: 62%;
    text-align: center
}

.qr-info>img,
.qr-info>p {
    display: inline-block;
    vertical-align: middle
}

.qr-info>img {
    position: relative;
    z-index: 2
}

.qr-info>p {
    font-size: 12px;
    width: 82%;
    background: rgba(66, 21, 5, .62);
    padding: 10px;
    position: relative;
    right: 10px;
    z-index: 1
}

.kr .qr-info>p {
    font-size: 12px
}

.th .qr-info>p {
    font-size: 12px
}

.wheel-wrap {
    width: 885px;
    height: 700px;
    margin: 0 auto;
    position: absolute;
    left: 300px;
    top: 185px
}

.wheel-stand {
    background: url(stand.png) no-repeat;
    width: 465px;
    height: 195px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
    top: -430px
}

.wheel-top {
    background: url(wheel-top-bg.png) no-repeat;
    width: 447px;
    height: 184px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    top: -97px;
    left: -6px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.wheel-top:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: drop-shadow(0 0 5px #ffe000);
    -moz-filter: drop-shadow(0 0 5px #ffe000);
    -o-filter: drop-shadow(0 0 5px #ffe000);
    -ms-filter: drop-shadow(0 0 5px #ffe000);
    filter: drop-shadow(0 0 5px #ffe000)
}

.wheel-top h2 {
    color: #fff;
    font-family: "Montserrat", "Opensans", Arial, sans-serif;
    font-size: 35px;
    text-transform: uppercase;
    position: relative;
    top: 52px;
    line-height: 1
}

.id .wheel-top h2 {
    font-size: 30px
}

.id .wheel-top h2 {
    top: 50px
}

.kr .wheel-top h2 {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    top: 46px
}

.sc .wheel-top h2 {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    top: 40px
}

.th .wheel-top h2 {
    font-family: Tahoma, Arial, sans-serif !important;
    top: 45px;
    font-weight: 700
}

.vn .wheel-top h2 {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important;
    top: 45px
}

.wheel-top h2 span {
    font-family: "Montserrat-Bold", "Opensans-Bold", Arial, sans-serif;
    font-size: 35px
}

.kr .wheel-top h2 span {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    font-weight: 700
}

.sc .wheel-top h2 span {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    font-weight: 700;
    font-size: 30px
}

.th .wheel-top h2 span {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 700
}

.vn .wheel-top h2 span {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important;
    font-weight: 700
}

.id .wheel-top h2 span {
    font-size: 30px
}

.wheel-holder {
    width: 540px;
    height: 640px;
    margin: 0 auto;
    position: relative;
    top: -145px;
    left: -7px
}

.wheel-holder>img {
    position: absolute;
    text-align: center;
    width: 100%
}

.wheel {
    top: 0;
    left: 0;
    z-index: 1
}

.clacker {
    top: -5px;
    left: calc(50% - 32px);
    z-index: 2;
    transform-origin: top center;
    max-width: 50px
}

.emblem>img {
    position: absolute;
    top: -3px;
    left: 50px;
    max-width: 120px;
    height: auto
}

.slice {
    position: absolute;
    top: 64px;
    left: calc(50% - 86px);
    z-index: 2;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.wheel-holder:hover .slice {
    -webkit-filter: drop-shadow(0 0 15px #fff) !important;
    -moz-filter: drop-shadow(0 0 15px #fff) !important;
    -o-filter: drop-shadow(0 0 15px #fff) !important;
    -ms-filter: drop-shadow(0 0 15px #fff) !important;
    filter: drop-shadow(0 0 15px #fff) !important
}

.slice.act {
    opacity: 1
}

.slice2 {
    top: 57px;
    left: calc(50% - 86px)
}

.slice3 {
    top: 57px;
    left: calc(50% - 87px)
}

.slice4 {
    top: 57px;
    left: calc(50% - 86px)
}

.slice5 {
    top: 57px;
    left: calc(50% - 84px)
}

.slice6 {
    top: 57px;
    left: calc(50% - 84px)
}

.slice7 {
    top: 59px;
    left: calc(50% - 83px)
}

.slice8 {
    top: 60px;
    left: calc(50% - 81px)
}

.slice9 {
    top: 60px;
    left: calc(50% - 81px)
}

.slice10 {
    top: 60px;
    left: calc(50% - 83px)
}

.emblem {
    position: absolute;
    z-index: 3;
    width: 215px;
    top: calc(50% - 108px);
    left: calc(50% - 109px);
    cursor: pointer
}

.emblem>img.emblem-bg {
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.emblem:hover>img.emblem-bg {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

.host {
    position: absolute;
    left: 10px;
    top: 361px;
    z-index: 1
}

.btns {
    position: absolute;
    text-align: center;
    width: 580px;
    float: right;
    z-index: 2;
    top: 775px;
    left: 435px
}

.btn {
    position: relative;
    width: 211px;
    height: 164px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.btn1 {
    background: url(btn1-bg.png) no-repeat;
    margin: 0 40px 0 0
}

.btn2 {
    background: url(btn2-bg.png) no-repeat;
    margin: 0 0 0 40px
}

.btn>img {
    position: absolute;
    top: 0;
    left: 0
}

.btn1-img1 {
    z-index: 1
}

.btn1-img2 {
    z-index: 3
}

.btn1-img3 {
    z-index: 2
}

.btn>span {
    font-family: "Montserrat-Bold", OpenSans-Bold, Arial, sans-serif;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    top: 20px
}

.kr .btn>span {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    font-weight: 700;
    top: 26px
}

.sc .btn>span {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    font-weight: 700;
    top: 26px
}

.th .btn>span {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 700;
    top: 28px
}

.vn .btn>span {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important;
    font-weight: 700
}

.btn:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}

.btns2 {
    top: 951px
}

.btn-ylw {
    position: relative;
    display: inline-block;
    font-family: "OpenSans-SemiBold", Arial, sans-serif;
    font-size: 12px;
    color: #ffe000;
    text-transform: uppercase;
    margin: 0 3px;
    border: 2px solid #ffe000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: rgba(0, 0, 0, .8);
    padding: 15px 20px;
    cursor: pointer;
    height: auto;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.kr .btn-ylw {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    font-weight: 700
}

.sc .btn-ylw {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    font-weight: 700
}

}

.th .btn-ylw {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 700
}

.vn .btn-ylw {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important;
    font-weight: 700
}

.btn-ylw:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    top: -30px;
    height: 100px
}

.overlay {
    background: rgba(0, 0, 0, .8);
    display: none;
    height: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    background-attachment: local;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300;
    z-index: 25
}

.lbox {
    background: url(lbox-bg.png) center no-repeat;
    color: #fff;
    margin: 250px auto 0;
    position: relative;
    text-align: center;
    display: none;
    padding: 15px;
    line-height: 1.2;
    max-width: 470px;
    max-height: 290px;
    background-size: contain
}

.lbox h1 {
    text-transform: uppercase;
    color: #af0000;
    font-size: 37px;
    font-weight: 900
}

.id .lbox h1 {
    font-size: 22px
}

.in .lbox h1 {
    font-size: 27px
}

.vn h1 {
    font-size: 31px
}

.lbox h2 {
    color: #490000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3
}

.lbox-content {
    padding: 52px 20px 20px
}

.lbox .button-div {
    margin: 0 auto;
    max-width: 235px
}

.lbox .claim-button {
    background: #af0000;
    color: #ffe3ac;
    text-transform: uppercase;
    padding: 15px;
    font-size: 24px;
    border-radius: 20px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.win {
    display: none;
    margin-bottom: 20px;
    table-layout: fixed
}

.mid {
    height: auto
}

.mid h4 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 2px solid #ffe000;
    margin: 0 auto 30px
}

.mid h4 span {
    display: inline-block;
    background: rgba(16, 6, 2, 1);
    padding: 0 20px;
    position: relative;
    top: 13px
}

ol {
    margin: 0 auto 20px
}

ol li>ul,
ol li>ol {
    width: 100%
}

li {
    text-align: left;
    padding-left: 75px;
    padding-top: 25px;
    margin-bottom: 5px;
    background: url(rectangle-red.png) no-repeat;
    height: 65px;
    font-size: 20px
}

.vn li {
    padding-top: 27px;
    font-size: 18px
}

li:hover {
    background: url(rectangle-yellow.png) no-repeat;
    height: 70px;
    padding-top: 30px;
    color: #9a0602
}

li .bolder {
    font-weight: 700
}

li a {
    text-decoration: none;
    text-transform: uppercase
}

ul>li {
    list-style-type: none
}

.accord>ul {
    margin: 0 auto
}

.accord>ul>li {
    list-style-type: none
}

.accord>ul>li>ol {
    width: 100%
}

.lbox-fdb,
.lbox-gadgets {
    padding: 15px 0
}

.nav {
    border-top: 2px solid #ffe000;
    border-bottom: 2px solid #ffe000
}

.nav-tab {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding: 6px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.nav-tab:hover span {
    background: rgba(255, 254, 0, .4)
}

.nav-tab1 {
    margin-right: -3px;
    border-right: 2px solid #ffe000
}

.nav-tab2 {
    margin-left: -3px;
    border-left: 2px solid #ffe000
}

.nav-tab>span {
    display: inline-block;
    width: 100%;
    background: none;
    color: #ffe000;
    font-size: 20px;
    padding: 10px;
    text-transform: uppercase
}

.nav-tab.act span,
.nav-tab.act:hover span {
    background: #ffe000
}

.nav-tab.act span,
.nav-tab.act:hover span {
    color: #100602
}

.tab-content {
    padding: 15px;
    display: none
}

.tab-content.act {
    display: block
}

.tab-content h3 {
    font-size: 20px;
    color: #ffe000;
    margin-bottom: 20px
}

.tab-content p {
    margin-bottom: 12px
}

.tab-content h5 {
    font-size: 16px;
    color: #ffe000;
    margin-bottom: 20px
}

.btn-optin {
    background: #ffe000;
    color: #100602;
    padding: 10px 15px;
    font-size: 20px;
    display: inline-block;
    margin: 10px auto 20px;
    border-radius: 5px;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s
}

.btn-optin:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.id .btns-lbox .btn-optin {
    font-size: 18px
}

.th .btns-lbox .btn-optin {
    font-size: 18px
}

.vn .btns-lbox .btn-optin {
    font-size: 15px
}

.tab-content li a {
    color: #ffe000;
    text-decoration: underline
}

table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto
}

li table {
    margin: 5px 0
}

th,
td {
    border: 1px solid #ffe000;
    padding: 5px
}

th {
    background: #ffe000;
    color: #100602
}

td {
    color: #fff
}

.btns-lbox {
    width: 60%;
    text-align: center;
    margin: 0 auto 20px
}

.btns-lbox .btn-optin {
    width: 30%;
    margin: 0 1%
}

.lbox-gadgets .tab-content2 table {
    width: 50%
}

.prize {
    background: url(prize-game-label-bg.png) center top no-repeat;
    width: 300px;
    height: 360px;
    margin: 0 auto 50px;
    position: relative
}

.prize>img,
.prize>span {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center
}

.prize .prize-label {
    font-family: "Montserrat-Bold", "Opensans-Bold", Arial, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    top: 44px;
    left: 0
}

.sc .prize .prize-label {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    font-weight: 700
}

.kr .prize .prize-label {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    font-weight: 700
}

.th .prize .prize-label {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 700;
    top: 36px
}

.vn .prize .prize-label {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important;
    font-weight: 700
}

.prize .prize-date {
    top: 365px;
    left: 0
}

.owl-carousel {
    width: 300px;
    margin: 0 auto
}

.owl-prev {
    background: url(slider-btn-left.png) no-repeat !important;
    display: block;
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    left: -50px;
    color: transparent !important
}

.owl-next {
    background: url(slider-btn-right.png) no-repeat !important;
    display: block;
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    right: -50px;
    color: transparent !important
}

.accord {
    padding: 5px 4px;
    border-radius: 2px
}

.accord h3 {
    text-align: center;
    font-size: 18px;
    position: relative;
    margin-bottom: 10px !important;
    color: #ffed8c !important;
    cursor: pointer;
    text-decoration: underline
}

.accord ol,
.accord ul {
    margin-top: 10px;
    margin-bottom: 0;
    display: none
}

.accord>ul,
.accord>ul>li {
    padding-left: 0
}

.accord.act .jspPane {
    top: -100% !important
}

.accord>h3>.accord-arw {
    display: inline-block;
    margin-left: 10px;
    line-height: 0;
    position: relative;
    top: 5px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
}

.accord.act>h3>.accord-arw {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.tpl-download-btn {
    display: none
}

.tpl-lang-select li {
    padding: 0
}

.id .tpl-join-now,
.vn .tpl-join-now {
    width: 100px
}

.en .hide-en {
    display: none
}

.id .hide-id {
    display: none
}

.kr .hide-kr {
    display: none
}

.sc .hide-sc {
    display: none
}

.ch .hide-ch {
    display: none
}

.th .hide-th {
    display: none
}

.vn .hide-vn {
    display: none
}

.in .hide-in {
    display: none
}

body {
    font-family: "OpenSans", Arial, sans-serif
}

body.sc,
body.ch {
    font-family: "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif !important;
    font-size: 14px
}

body.kr {
    font-family: "Malgun Gothic", Arial, sans-serif !important;
    word-break: keep-all
}

body.th {
    font-family: Tahoma, Arial, sans-serif !important
}

body.vn {
    font-family: Calibri, "Times New Roman", Arial, sans-serif !important
}

@font-face {
    font-family: 'OpenSans';
    src: url(OpenSans.woff) format('woff'), url('OpenSans.eot?#iefix') format('embedded-opentype'), url(OpenSans.ttf) format('truetype'), url(OpenSans.otf) format('opentype'), url('OpenSans.svg#OpenSans') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url(OpenSans-Light.woff) format('woff'), url('OpenSans-Light.eot?#iefix') format('embedded-opentype'), url(OpenSans-Light.ttf) format('truetype'), url(OpenSans-Light.otf) format('opentype'), url('OpenSans-Light.svg#OpenSans-Light') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url(OpenSans-Semibold.woff) format('woff'), url('OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), url(OpenSans-Semibold.ttf) format('truetype'), url(OpenSans-Semibold.otf) format('opentype'), url('OpenSans-Semibold.svg#OpenSans-Semibold') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url(OpenSans-Bold.woff) format('woff'), url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url(OpenSans-Bold.ttf) format('truetype'), url(OpenSans-Bold.otf) format('opentype'), url('OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat';
    src: url(Montserrat-Regular.woff) format('woff'), url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url(Montserrat-Regular.ttf) format('truetype'), url(Montserrat-Regular.otf) format('opentype'), url('Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url(Montserrat-Bold.woff) format('woff'), url('Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url(Montserrat-Bold.ttf) format('truetype'), url(Montserrat-Bold.otf) format('opentype'), url('Montserrat-Bold.svg#Montserrat-Bold') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'MyriadPro-Bold';
    src: url(MyriadPro-Bold.woff) format('woff'), url('MyriadPro-Bold.eot?#iefix') format('embedded-opentype'), url(MyriadPro-Bold.ttf) format('truetype'), url(MyriadPro-Bold.otf) format('opentype'), url('MyriadPro-Bold.svg#MyriadPro-Bold') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'MyriadPro-BoldCond';
    src: url(MyriadPro-BoldCond.woff) format('woff'), url('MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'), url(MyriadPro-BoldCond.ttf) format('truetype'), url(MyriadPro-BoldCond.otf) format('opentype'), url('MyriadPro-BoldCond.svg#MyriadPro-BoldCond') format('svg');
    font-weight: 400;
    font-style: normal
}

.clacker.act {
    -webkit-animation-name: clack;
    animation-name: clack;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    animation-direction: normal
}

@-webkit-keyframes clack {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    50% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }
    100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@keyframes clack {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    50% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }
    100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

.clacker.act-slow {
    -webkit-animation-name: clack;
    animation-name: clack;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    animation-direction: normal
}

.wheel.act {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    animation-direction: normal
}

.wheel.act.week1 {
    -webkit-animation-name: spin1;
    animation-name: spin1
}

@-webkit-keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg)
    }
}

@keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg)
    }
}

.wheel.act.week2 {
    -webkit-animation-name: spin2;
    animation-name: spin2
}

@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1403deg);
        transform: rotate(1403deg)
    }
}

@keyframes spin2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1403deg);
        transform: rotate(1403deg)
    }
}

.wheel.act.week3 {
    -webkit-animation-name: spin3;
    animation-name: spin3
}

@-webkit-keyframes spin3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1368deg);
        transform: rotate(1368deg)
    }
}

@keyframes spin3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1368deg);
        transform: rotate(1368deg)
    }
}

.wheel.act.week4 {
    -webkit-animation-name: spin4;
    animation-name: spin4
}

@-webkit-keyframes spin4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1332deg);
        transform: rotate(1332deg)
    }
}

@keyframes spin4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1332deg);
        transform: rotate(1332deg)
    }
}

.wheel.act.week5 {
    -webkit-animation-name: spin5;
    animation-name: spin5
}

@-webkit-keyframes spin5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1297deg);
        transform: rotate(1297deg)
    }
}

@keyframes spin5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1297deg);
        transform: rotate(1297deg)
    }
}

.wheel.act.week6 {
    -webkit-animation-name: spin6;
    animation-name: spin6
}

@-webkit-keyframes spin6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1261deg);
        transform: rotate(1261deg)
    }
}

@keyframes spin6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1261deg);
        transform: rotate(1261deg)
    }
}

.wheel.act.week7 {
    -webkit-animation-name: spin7;
    animation-name: spin7
}

@-webkit-keyframes spin7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1225deg);
        transform: rotate(1225deg)
    }
}

@keyframes spin7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1225deg);
        transform: rotate(1225deg)
    }
}

.wheel.act.week8 {
    -webkit-animation-name: spin8;
    animation-name: spin8
}

@-webkit-keyframes spin8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1189deg);
        transform: rotate(1189deg)
    }
}

@keyframes spin8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1189deg);
        transform: rotate(1189deg)
    }
}

.wheel.act.week9 {
    -webkit-animation-name: spin9;
    animation-name: spin9
}

@-webkit-keyframes spin9 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1153deg);
        transform: rotate(1153deg)
    }
}

@keyframes spin9 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1153deg);
        transform: rotate(1153deg)
    }
}

.wheel.act.week10 {
    -webkit-animation-name: spin10;
    animation-name: spin10
}

@-webkit-keyframes spin10 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1117deg);
        transform: rotate(1117deg)
    }
}

@keyframes spin10 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1117deg);
        transform: rotate(1117deg)
    }
}

.qr-info>img.mobi480,
.accord-arw>img,
.btn>img {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.btn1 .btn1-img1 {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.btn1 .btn1-img2 {
    -webkit-animation-duration: .9s;
    animation-duration: .9s
}

.btn2 .btn2-img1 {
    -webkit-animation-duration: .9s;
    animation-duration: .9s
}

.btn2 .btn2-img2 {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -5px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -5px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -2px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -2px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -1px, 0);
        transform: translate3d(0, -1px, 0)
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -5px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -5px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -2px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -2px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -1px, 0);
        transform: translate3d(0, -1px, 0)
    }
}

.qr-info>img.desk,
.qr-info>img.mobi {
    animation-name: bounce-side;
    transform-origin: center bottom;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes bounce-side {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(-5px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(-5px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
}

@keyframes bounce-side {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(-5px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(-5px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
}

.owl-prev {
    animation-name: bounce-prev;
    transform-origin: center bottom;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes bounce-prev {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(-3px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(-3px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-3px, 0, 0);
        transform: translate3d(-3px, 0, 0)
    }
}

@keyframes bounce-prev {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(-3px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(-3px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-3px, 0, 0);
        transform: translate3d(-3px, 0, 0)
    }
}

.owl-prev:hover {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.owl-next {
    animation-name: bounce-next;
    transform-origin: center bottom;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes bounce-next {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(3px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(3px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0)
    }
}

@keyframes bounce-next {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(3px, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(3px, 0, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0)
    }
}

@keyframes pulse {
    from,
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
}

@-webkit-keyframes pulse {
    from,
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
}

.owl-next:hover {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.mobi {
    display: none
}

.desk {
    display: block
}

.mobi480 {
    display: none
}

.mobi320 {
    display: none
}

.qr-info img.mobi480 {
    display: none
}

.tpl-copyright {
    height: 112px
}

/* responsive css */
@media only screen and (max-width:1500px) {
    li {
        text-align: left;
        padding-left: 50px;
        padding-top: 23px;
        margin-bottom: 0;
        height: 50px;
        font-size: 16px;
        background-size: contain
    }
    .banner {
        max-width: 320px
    }
    .inner {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        position: relative
    }
    .wheel-wrap {
        width: 600px;
        height: 500px;
        margin: 0 auto;
        position: absolute;
        left: 360px;
        top: 100px
    }
    .wheel-top {
        width: 360px;
        height: 184px;
        background-size: contain;
        position: relative
    }
    .wheel-holder {
        width: 427px;
        height: 640px;
        margin: 0 auto;
        position: relative;
        top: -170px;
        left: -7px
    }
    .wheel-stand {
        width: 465px;
        height: 195px;
        position: relative;
        z-index: 0;
        margin: 0 auto;
        top: -570px
    }
    .content {
        height: 615px
    }
    .tpl-copyright {
        height: 194px
    }
    .emblem>img {
        position: absolute;
        top: -50px;
        left: 60px;
        max-width: 100px;
        height: auto
    }
    .wheel-top h2 {
        top: 44px;
        font-size: 25px
    }
    .wheel-top h2 span {
        font-size: 25px
    }
    .wheel-holder>img.clacker {
        max-width: 45px;
        height: auto;
        left: calc(50% - 26px);
        top: -10px
    }
    .banner p {
        font-size: 24px
    }
    .sc .wheel-top h2 {
        top: 32px
    }
    .kr .wheel-top h2 {
        top: 41px
    }
    .id .banner p {
        font-size: 20px
    }
    .id .wheel-top h2 span {
        font-size: 23px
    }
    .id .wheel-top h2 {
        top: 50px;
        font-size: 23px
    }
    .th .wheel-top h2 {
        top: 40px
    }
    .vn li {
        padding-top: 23px;
        font-size: 15px
    }
    li:hover {
        background-size: contain;
        padding-left: 59px;
        padding-top: 27px
    }
    .content {
        padding-top: 25px
    }
    .banner-logo {
        width: 347px;
        height: 60px;
        margin: 0 0 9px
    }
    .banner-logo>img {
        width: 75%
    }
    .banner p {
        margin: 0 0 10px
    }
    .lbox {
        margin: 170px auto 0
    }
}

@media only screen and (max-width:1023px) {
    .banner-logo {
        width: 100%
    }
    .wheel-holder>img {
        width: 100%;
        height: auto
    }
    .wheel-holder>img.clacker {
        max-width: 45px;
        height: auto;
        left: calc(50% - 26px);
        top: -5px
    }
    .wheel-wrap {
        width: 470px;
        left: 316px;
        top: 0
    }
    .wheel-holder {
        width: 470px;
        top: 15px;
        left: -7px
    }
    .emblem>img {
        position: absolute;
        top: -32px;
        left: 55px;
        max-width: 110px;
        height: auto
    }
    .emblem {
        width: 0;
        height: 0
    }
    .wheel-top {
        background-size: contain;
        width: 300px;
        height: 144px;
        top: 65px
    }
    .wheel-top h2 {
        font-size: 22px;
        top: 38px
    }
    .wheel-top h2 span {
        font-size: 22px
    }
    .banner {
        max-width: 320px;
        width: 100%;
        text-align: left;
        color: #fff;
        height: 650px
    }
    .banner-logo>img {
        width: 85%
    }
    .wheel-stand {
        top: -340px
    }
    li {
        padding-left: 54px;
        padding-top: 21px;
        height: 53px;
        font-size: 19px;
        background-size: contain
    }
    li:hover {
        padding-top: 25px;
        color: #9a0602;
        background-size: contain;
        width: 100%;
        padding-left: 58px
    }
    .banner p {
        font-size: 24px
    }
    .content,
    body {
        height: 710px
    }
    body {
        background: url(bg-768.jpg) center top no-repeat
    }
    .inner {
        max-width: 768px
    }
    .sc .wheel-top h2 {
        top: 23px
    }
    .kr .wheel-top h2 {
        top: 33px
    }
    .id .wheel-top h2 {
        top: 37px;
        font-size: 20px
    }
    .id .wheel-top h2 span {
        font-size: 20px
    }
    .id li {
        font-size: 18px
    }
    .id .banner p {
        font-size: 20px
    }
    .th .wheel-top h2 {
        top: 33px
    }
    .th li {
        font-size: 17px
    }
    .vn li {
        padding-top: 24px;
        font-size: 15px
    }
    .vn .wheel-top h2 {
        top: 33px
    }
    .in li {
        font-size: 17px
    }
}

@media only screen and (max-width:767px) {
    body {
        background: url(bg-600.jpg) center top no-repeat
    }
    .inner {
        max-width: 600px
    }
    .banner {
        max-width: 240px;
        height: 550px
    }
    li {
        padding-left: 45px;
        padding-top: 15px;
        height: 41px;
        font-size: 15px;
        background-size: contain
    }
    li:hover {
        padding-top: 19px;
        height: 46px;
        padding-left: 48px
    }
    .banner-logo>img {
        width: 90%
    }
    .banner p {
        font-size: 18px
    }
    .banner-logo {
        height: 60px
    }
    .content,
    body {
        height: 570px
    }
    .wheel-wrap {
        width: 360px;
        left: 259px;
        height: 550px
    }
    .wheel-holder {
        width: 360px;
        top: -7px
    }
    .wheel-top {
        background-size: contain;
        width: 240px;
        height: 144px;
        top: 65px
    }
    .wheel-stand {
        width: 324px;
        height: 264px;
        top: -415px;
        background-size: contain
    }
    .wheel-top h2 {
        font-size: 18px;
        top: 30px
    }
    .wheel-top h2 span {
        font-size: 18px
    }
    .emblem>img {
        top: -74px;
        left: 67px;
        max-width: 85px
    }
    .wheel-holder>img.clacker {
        max-width: 35px;
        height: auto;
        left: calc(50% - 20px);
        top: -5px
    }
    .lbox {
        max-width: 420px;
        margin: 150px auto 0
    }
    .id .banner p {
        font-size: 15px
    }
    .id li {
        font-size: 13px;
        padding-top: 16px
    }
    .th li {
        font-size: 13px;
        padding-top: 16px
    }
    .vn li {
        padding-top: 18px;
        font-size: 12px
    }
    .in li {
        font-size: 13px;
        padding-top: 17px
    }
    .sc .wheel-top h2 span {
        font-size: 20px
    }
    .kr .wheel-top h2 {
        top: 26px
    }
    .id .wheel-top h2 {
        top: 30px;
        font-size: 16px
    }
    .id .wheel-top h2 span {
        font-size: 16px
    }
    .th .wheel-top h2 {
        top: 25px
    }
    .vn .wheel-top h2 {
        top: 28px
    }
    .tpl-copyright {
        height: 50px
    }
}

@media only screen and (max-width:599px) {
    .desk {
        display: none
    }
    .mobi {
        display: block
    }
    body {
        background: url(bg-480.jpg) center top no-repeat #000;
        font-size: 13px
    }
    .native .tpl-back-btn {
        visibility: hidden
    }
    .native #tpl-download-btn-mobi {
        visibility: hidden
    }
    .native #tpl-logo-mobi {
        pointer-events: none
    }
    .banner {
        margin: 0 auto;
        height: 65px;
        max-width: 480px
    }
    .float {
        display: none
    }
    .host {
        display: none
    }
    .content {
        height: 945px;
        padding-top: 30px
    }
    .lbox {
        max-width: 320px;
        background-size: contain;
        margin: 200px auto 0;
        max-height: 200px
    }
    .lbox-content {
        padding: 16px 15px 13px
    }
    .id .lbox-content {
        padding: 25px 5px 10px
    }
    .lbox h1 {
        font-size: 22px
    }
    .id .lbox h1 {
        font-size: 17px
    }
    .in .lbox h1 {
        font-size: 20px
    }
    .lbox h2 {
        font-size: 14px;
        line-height: 1.5
    }
    .lbox .button-div {
        max-width: 180px
    }
    .lbox .claim-button {
        font-size: 20px
    }
    .banner-logo {
        width: 194px;
        margin: 0 auto 544px
    }
    .banner-logo>img {
        width: 100%;
        height: auto
    }
    li {
        padding-left: 45px;
        padding-top: 22px;
        height: 54px;
        font-size: 15px;
        background-size: contain;
        display: inline-block;
        margin: 0 10px;
        background-position: center;
        width: 210px
    }
    li:hover {
        padding-top: 16px;
        height: 40px;
        width: 210px
    }
    ul {
        text-align: center
    }
    .banner p {
        text-align: center
    }
    .side-offers {
        z-index: 10;
        position: relative
    }
    .wheel-wrap {
        height: 450px;
        position: relative;
        margin: 0 auto;
        left: auto;
        right: auto;
        top: 76px;
        width: 100%;
        background-position: top center
    }
    .wheel-top {
        background-size: contain;
        width: 251px;
        height: 104px;
        top: -76px;
        left: 0
    }
    .id .wheel-top h2 {
        top: 21px
    }
    .th .wheel-top h2 {
        font-size: 17px
    }
    .wheel-holder {
        width: 430px;
        height: 470px;
        top: -107px;
        left: 0
    }
    .wheel-stand {
        width: 324px;
        height: 264px;
        top: -280px;
        background-size: contain
    }
    .wheel-holder>img {
        width: 100%;
        height: auto
    }
    .wheel-holder>img.clacker {
        max-width: 40px;
        height: auto;
        top: -5px
    }
    .emblem {
        width: 158px;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }
    .emblem>img {
        max-width: 95px;
        height: auto;
        top: 12px;
        left: 33px
    }
    .wheel-top h2 {
        font-size: 22px;
        top: 30px
    }
    .wheel-top h2 span {
        font-size: 22px
    }
    .sc .wheel-top h2 span {
        font-size: 21px
    }
    .kr .wheel-top h2 {
        top: 24px
    }
    .btns {
        position: relative;
        margin: 0 auto;
        top: auto;
        left: auto;
        right: auto;
        float: none;
        margin: 0 auto;
        top: -100px
    }
    .btns2 {
        display: none
    }
    .btn {
        background-size: contain;
        width: 190px;
        height: 148px
    }
    .btn>img {
        width: 100%;
        height: auto
    }
    .btn>span {
        font-size: 12px;
        top: 18px
    }
    .btn>span>br {
        line-height: 1
    }
    .box-head {
        width: 223px;
        height: 88px;
        margin: -72px auto 20px
    }
    .box-head h1 {
        width: 100%;
        font-size: 16px;
        top: 31px
    }
    .en .box-head h1,
    .id .box-head h1,
    .in .box-head h1 {
        top: 21px
    }
    .id .box-head h1 {
        font-size: 15px
    }
    .box-head>img,
    .box-head>span {
        width: 100%;
        height: 100%
    }
    .box-head>span.box-head-games-img1 {
        background-size: contain;
        width: 74px;
        height: 74px;
        top: 22px
    }
    .box-head>span.box-head-games-img2 {
        background-size: contain;
        width: 74px;
        height: 74px;
        top: 22px
    }
    .box-head>span.box-head-games-img1.act {
        left: -36px
    }
    .box-head>span.box-head-games-img2.act {
        right: -36px
    }
    .lbox .mid h3 {
        font-size: 18px
    }
    .lbox .mid p {
        font-size: 14px
    }
    .lbox .mid h4 {
        font-size: 18px
    }
    .game {
        background-size: contain;
        width: 180px;
        height: 180px;
        margin: 0 -10px 20px
    }
    .game>img {
        width: 100%;
        height: 100%
    }
    .game>span {
        top: 170px;
        font-size: 12px
    }
    .nav-tab>span {
        font-size: 16px;
        padding: 7px
    }
    .lbox .mid h3 {
        font-size: 16px
    }
    .tab-content h5 {
        font-size: 14px
    }
    .btns-lbox {
        width: 80%
    }
    .btn-optin {
        font-size: 16px;
        padding: 10px
    }
    .box-head>img.box-head-gadgets-img1 {
        width: 109px;
        height: 68px;
        top: 10px
    }
    .box-head>img.box-head-gadgets-img2 {
        width: 109px;
        height: 68px;
        top: 15px
    }
    .box-head>img.box-head-gadgets-img3 {
        width: 109px;
        height: 68px;
        top: 26px
    }
    .box-head>img.box-head-gadgets-img4 {
        width: 109px;
        height: 68px;
        top: 15px
    }
    .box-head>img.box-head-gadgets-img1.act {
        left: -107px;
        top: 10px
    }
    .box-head>img.box-head-gadgets-img2.act {
        left: -49px;
        top: 15px
    }
    .box-head>img.box-head-gadgets-img3.act {
        right: -86px;
        top: 26px
    }
    .box-head>img.box-head-gadgets-img4.act {
        right: -49px;
        top: 15px
    }
    .kr .lbox-fdb .box-head h1,
    .sc .lbox-fdb .box-head h1,
    .th .lbox-fdb .box-head h1 {
        top: 28px
    }
    .id .wheel-top h2 span {
        font-size: 16px
    }
    .id .wheel-top h2 {
        top: 31px;
        font-size: 16px
    }
    .id li {
        font-size: 13px;
        padding-top: 23px
    }
    .th .wheel-top h2 {
        top: 24px
    }
    .th li {
        font-size: 12px;
        padding-top: 24px
    }
    .vn .wheel-top h2 {
        top: 26px
    }
    .vn li {
        padding-top: 25px;
        font-size: 11px
    }
    .vn .lbox h1 {
        font-size: 23px
    }
    .vn .lbox h2 {
        font-size: 15px
    }
    .in li {
        font-size: 13px;
        padding-top: 23px
    }
}

@media only screen and (max-width:479px) {
    body {
        background: url(bg-320.jpg) center top no-repeat #000
    }
    .inner {
        max-width: 320px
    }
    .wheel-holder {
        width: 378px;
        height: 423px;
        top: -103px;
        left: -30px
    }
    .wheel-holder>img.clacker {
        max-width: 35px;
        height: auto;
        top: -5px
    }
    .banner-logo {
        margin: 0 auto 485px
    }
    .content {
        height: 1100px
    }
    li:hover {
        height: 42px
    }
}