.bg-wrap{
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat,repeat;
    background-size: 100% auto,100%;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 20px #0000004d,0 0 30px #0000004d;
    transform: translate(-50%)
}

@media (min-width: 576px) {
    .bg-wrap{
        width:576px
    }
}

.bg-wrap .tunnel-light{
    position: absolute;
    top: 7.9rem;
    padding-bottom: 95.1041666667%;
    width: 100%;
    background-size: 100% auto
}

.bg-wrap .tunnel-light .after-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    opacity: .9;
    animation: after-image-effect .5s infinite linear forwards
}

@keyframes after-image-effect {
    to {
        opacity: 0;
        transform: scale(.8)
    }
}

.bg-wrap .light{
    position: absolute;
    top: 7.9rem;
    padding-bottom: 96.5608465608%;
    width: 100%;
    background-size: 100% auto
}

.bg-wrap .light.light-on{
    animation: shrink .5s infinite linear forwards
}

@keyframes shrink {
    to {
        opacity: 0;
        transform: scale(2)
    }
}

.bg-wrap .path{
    position: absolute;
    top: 25.4rem;
    padding-bottom: 82.2916666667%;
    width: 100%;
    background-size: 100% 100%
}

.animation-scene {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 6;
    pointer-events: none
}

.activity-title-winner-list-wrap{
    position: absolute;
    top: -2.8rem;
    width: 100%;
    z-index: 8
}

.activity-title-winner-list-wrap .date{
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translate(-50%);
    padding: .4rem .7rem;
    font-size: 1.65rem;
    text-align: center;
    white-space: nowrap;
    color: var(--date);
    background-size: 100% 100%;
    border-radius: 3rem;
    letter-spacing: 1.2px
}

.activity-title-winner-list-wrap .date .hint{
    font-size: .8rem
}

@media (min-width: 576px) {
    .activity-title-winner-list-wrap .date{
        font-size:1.9rem
    }
}

.activity-title-winner-list-wrap .title{
    position: relative;
    padding-bottom: 83.125%;
    width: 100%;
    background-size: 100% auto;
    z-index: 2
}

.activity-title-winner-list-wrap .winner-list{
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-bottom:0;
    height:40px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 1
}
.activity-title-winner-list-wrap .winner-list ul{
    height:100%;
    width:100%;
}
.activity-title-winner-list-wrap .winner-list ul li{
    height:100%;
}

.activity-title-winner-list-wrap .winner-list .award{
    position: absolute;
    margin-top: 16px;
    margin-left:0;
    text-align: center;
    height:100%;
    width:100%;
    font-size: 1rem;
    color: var(--winner-list-award)
}


.fade-enter-active,.fade-leave-active{
    transition: opacity .3s ease
}

.fade-enter-from,.fade-leave-to{
    opacity: 0
}

.wheel-wrap {
    position: relative;
    top: 2.8rem;
    width: 100%;
    z-index: 1;
    transform-origin: center 74.5%;
    transform: scale(1)
}

@media (min-width: 576px) {
    .wheel-wrap {
        transform-origin:center 63%
    }
}

.wheel-wrap .wheel {
    position: relative;
    left: 4.375%;
    padding-bottom: 91.25%;
    width: 91.25%
}

.wheel-wrap .wheel .wheel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: right top;
    background-size: 800% auto;
    z-index: 1;
    transition: transform 3s;
    animation: wheel-rotate 10s infinite linear
}

@keyframes wheel-rotate {
    to {
        transform: rotate(360deg)
    }
}

.wheel-wrap .wheel .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: 2
}

.wheel-wrap .wheel .frame .wheel-spot {
    position: absolute;
    top: 0%;
    left: 0%;
    padding-bottom: 9.8969072165%;
    width: 10%;
    background-size: 100% auto;
    opacity: 0;
    animation: twink-on-frame 2.5s infinite linear forwards
}

@keyframes twink-on-frame {
    50% {
        opacity: 1
    }

    to {
        transform: rotate(-360deg);
        opacity: 0
    }
}

.wheel-wrap .wheel .frame .wheel-spot:nth-child(1) {
    top: 1%;
    left: 57%;
    animation-delay: 1s
}

.wheel-wrap .wheel .frame .wheel-spot:nth-child(2) {
    top: 33%;
    left: 1%;
    animation-delay: .5s
}

.wheel-wrap .wheel .pin {
    position: absolute;
    top: 0;
    left: 18%;
    padding-bottom: 20.3649635036%;
    width: 15.5%;
    background-size: 100% auto;
    transform-origin: center 30%;
    transform: rotate(-30deg);
    animation: rotate 2s infinite linear alternate-reverse;
    z-index: 3
}

@keyframes rotate {
    50% {
        transform: rotate(-20deg)
    }

    to {
        transform: rotate(-40deg)
    }
}

.wheel-wrap .wheel .pin .wheel-spot {
    position: absolute;
    top: -25%;
    left: -4%;
    padding-bottom: 108.8659793814%;
    width: 110%;
    background-size: 100% auto;
    animation: twink-on-pin 2s infinite linear forwards;
    opacity: 0
}

@keyframes twink-on-pin {
    50% {
        opacity: 1
    }

    to {
        transform: rotate(360deg);
        opacity: 0
    }
}

.wheel-wrap .wheel .arrow-left,.wheel-wrap .wheel .arrow-right {
    position: absolute;
    padding-bottom: 10%;
    width: 6%;
    background-size: 100% auto;
    opacity: 0;
    z-index: 4
}

.wheel-wrap .wheel .arrow-left {
    top: 35%;
    left: 7%;
    transform: rotate(15deg);
    animation: forward-left 1s infinite linear forwards
}

@keyframes forward-left {
    50% {
        opacity: 1
    }

    to {
        transform: rotate(15deg) translate(3px,-.5rem);
        opacity: 0
    }
}

.wheel-wrap .wheel .arrow-right {
    top: 30%;
    right: 7%;
    transform: rotate(165deg);
    animation: forward-right 1s infinite linear forwards
}

@keyframes forward-right {
    50% {
        opacity: 1
    }

    to {
        transform: rotate(165deg) translate(3px,-.5rem);
        opacity: 0
    }
}

.wheel-wrap .wheel .decoration-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5
}

.wheel-wrap .wheel .decoration-container .left-1,.wheel-wrap .wheel .decoration-container .left-2,.wheel-wrap .wheel .decoration-container .right-1,.wheel-wrap .wheel .decoration-container .right-2 {
    position: absolute;
    padding-bottom: 31.25%;
    width: 31.25%;
    background-size: 100% auto
}

.wheel-wrap .wheel .decoration-container .left-1,.wheel-wrap .wheel .decoration-container .left-2 {
    top: 50%;
    left: 50%
}

.wheel-wrap .wheel .decoration-container .right-1,.wheel-wrap .wheel .decoration-container .right-2 {
    top: 50%;
    right: 50%
}

.wheel-wrap .wheel .decoration-container .left-1 {
    animation: grow-left-1 .1s 1 linear forwards;
    animation-delay: 1s
}

@keyframes grow-left-1 {
    to {
        top: -6%;
        left: -5%
    }
}

.wheel-wrap .wheel .decoration-container .left-2 {
    animation: grow-left-2 .1s 1 linear forwards;
    animation-delay: 1s
}

@keyframes grow-left-2 {
    to {
        top: 85%;
        left: -15%
    }
}

.wheel-wrap .wheel .decoration-container .right-1 {
    animation: grow-right-1 .1s 1 linear forwards;
    animation-delay: 1s
}

@keyframes grow-right-1 {
    to {
        top: -13%;
        right: -15%
    }
}

.wheel-wrap .wheel .decoration-container .right-2 {
    animation: grow-right-2 .1s 1 linear forwards;
    animation-delay: 1s
}

@keyframes grow-right-2 {
    to {
        top: 81%;
        right: -15%
    }
}

@keyframes grow {
    to {
        transform: scale(1.05)
    }
}

.wheel-wrap .wheel .deco-left,.wheel-wrap .wheel .deco-right {
    position: fixed;
    top: -2.8rem;
    left: 0;
    padding-bottom: 299px;
    transform-origin: center bottom;
    width: 480px;
    background-size: 100% auto;
    z-index: 7;
    animation: grow .5s infinite linear alternate-reverse
}

@media (min-width: 576px) {
    .wheel-wrap .wheel .deco-left,.wheel-wrap .wheel .deco-right {
        padding-bottom:358.8px;
        width: 576px
    }
}

.wheel-wrap .wheel .deco-left {
    z-index: 6
}

.wheel-wrap .wheel .deco-right {
    z-index: 5;
    animation-delay: .2s
}

.wheel-wrap .deck {
    position: relative;
    margin-top: -26.8%;
    padding-bottom: 28.2291666667%;
    width: 100%;
    background-size: 100% auto;
    z-index: 7
}

@media (min-width: 576px) {
    .wheel-wrap .deck {
        margin-top:-25%
    }
}

.wheel-wrap-game{
    /* position: absolute; */
    top: 8.8%;
    left: 0;
    width: 100%;
    z-index: 2;
    transform: scale(0);
    transform-origin: center 74.5%;
    display:none;
}

@media (min-width: 576px) {
    .wheel-wrap-game{
        transform-origin:center 63%
    }
}

.wheel-wrap-game .wheel{
    position: relative;
    padding-bottom: 100%;
    width: 100%;
    z-index: 2
}

.wheel-wrap-game .wheel .wheel-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 14.2857% top;
    background-size: 800% auto;
    transition: all .5s;
    z-index: 1;
}

.wheel-wrap-game .wheel .wheel-bg.wheelBg{
    /*animation-name: wheel-rotate-all;*/
    /*animation-duration: .1s;*/
    /*animation-timing-function: ease-out;*/
    /*transition: transform .5s ease-out;*/
    /*animation: wheel-rotate-all 2.9s ease-out forwards;*/
}


.wheel-wrap-game .wheel .wheel-bg .award-container{
    position: absolute;
    width: 100%;
    height: 100%
}

.wheel-wrap-game .wheel .wheel-bg .award-container .award{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 81%
}

.wheel-wrap-game .wheel .wheel-bg .award-container .award .text{
    width: 44.3%;
    font-size: .85rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    color: var(--wheel-game-award-text);
    transform: rotate(360deg)
}

.wheel-wrap-game .wheel .wheel-bg .award-container .award .text.longest-text{
    font-size: .75rem
}

@media (min-width: 576px) {
    .wheel-wrap-game .wheel .wheel-bg .award-container .award .text{
        font-size:1.05rem
    }

    .wheel-wrap-game .wheel .wheel-bg .award-container .award .text.longest-text{
        font-size: .95rem
    }
}

.wheel-wrap-game .wheel .wheel-bg .award-container .award .text .random-award-icon{
    padding-bottom: 24.6105919003%;
    width: 100%;
    background-size: 100% auto
}

.wheel-wrap-game .wheel .frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: 2
}

.wheel-wrap-game .wheel .frame .frame-light{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto
}

.wheel-wrap-game .wheel .pin{
    position: absolute;
    top: 2.8rem;
    left: 2.8rem;
    padding-bottom: 20.3649635036%;
    width: 15.5%;
    background-size: 100% auto;
    transform-origin: center 30%;
    transform: rotate(-45deg);
    z-index: 3
}

.wheel-wrap-game .wheel .pin.swinging{
    animation: swinging .1s infinite linear alternate-reverse
}

@keyframes swinging {
    50% {
        transform: rotate(-35deg)
    }

    to {
        transform: rotate(-55deg)
    }
}

.wheel-wrap-game .deck{
    position: absolute;
    top: 82%;
    left: 0;
    padding-bottom: 23.347107438%;
    width: 100%;
    background-size: 100% auto;
    z-index: 1
}

.user-wrap {
    position: relative;
    margin-top: -.1rem;
    margin-left: 10.835%;
    padding-bottom: 16.2493085106%;
    width: 78.33%;
    background-size: 100% auto;
    opacity: 0;
    z-index: 3;
    transition: all 1s
}

.user-wrap.show {
    opacity: 1
}

.user-wrap .flex-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%
}

.user-wrap .flex-wrap .apply-wrap,.user-wrap .flex-wrap .condition-wrap {
    display: flex;
    width: 50%;
    flex-direction: column
}

.user-wrap .flex-wrap .apply-wrap {
    justify-content: flex-end;
    margin-bottom: 1.8%;
    height: 44%
}

.user-wrap .flex-wrap .apply-wrap .apply-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.8%;
    padding-left: 3%;
    width: 100%
}

.user-wrap .flex-wrap .apply-wrap .apply-container .title {
    padding-bottom: 7.2146596859%;
    width: 53%;
    background-position: center top;
    background-size: 100% auto
}

.user-wrap .flex-wrap .apply-wrap .apply-container .title.daily {
    background-position: center bottom
}

.user-wrap .flex-wrap .apply-wrap .apply-container .count {
    margin-left: 4%;
    width: 42%;
    font-size: .8rem;
    color: var(--user-wrap-apply-count);
    transform: translateY(4%);
    vertical-align: bottom
}

@media (min-width: 576px) {
    .user-wrap .flex-wrap .apply-wrap .apply-container .count {
        font-size:1rem
    }
}

.user-wrap .flex-wrap .condition-wrap {
    justify-content: flex-end;
    margin-bottom: 1.8%;
    height: 66%
}

.user-wrap .flex-wrap .condition-wrap.only-1-condition {
    justify-content: center
}

.user-wrap .flex-wrap .condition-wrap .condition-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.8%;
    padding-left: 6.2%;
    width: 100%
}

.user-wrap .flex-wrap .condition-wrap .condition-container .title {
    padding-bottom: 7.4566666667%;
    width: 22.37%;
    background-position: center top;
    background-size: 100% auto
}

@media (min-width: 576px) {
    .user-wrap .flex-wrap .condition-wrap .condition-container .title {
        padding-bottom:7.3333333333%;
        width: 22%
    }
}

.user-wrap .flex-wrap .condition-wrap .condition-container .title.bet {
    background-position: center center
}

.user-wrap .flex-wrap .condition-wrap .condition-container .title.draw {
    background-position: center bottom
}

.user-wrap .flex-wrap .condition-wrap .condition-container .amount {
    margin-left: 4%;
    width: 42%;
    font-size: .8rem;
    transform: translateY(4%);
    color: var(--user-wrap-condition-amount)
}

@media (min-width: 576px) {
    .user-wrap .flex-wrap .condition-wrap .condition-container .amount {
        font-size:1rem
    }
}

.threshold-wrap {
    position: relative;
    margin-top: .4rem;
    width: 100%;
    z-index: 4
}

.threshold-wrap.game-on {
    animation: scale-y .1s 1 linear
}

@keyframes scale-y {
    10% {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

.threshold-wrap.game-on .threshold-container.out-of-visible-range {
    opacity: 0
}

.threshold-wrap.game-on .threshold-container .bet-container .information-container {
    width: 100%
}

.threshold-wrap.game-on .threshold-container .bet-container .bet-btn {
    width: 0%
}

.threshold-wrap.game-on .switch-btn-container {
    opacity: 0
}

.threshold-wrap .scroll-wrap {
    display: inline-flex;
    transition: all .5s
}

.threshold-wrap .threshold-container {
    position: relative;
    background-size: 100% auto;
    transition: opacity .3s
}

.threshold-wrap .threshold-container.goal {
    background-position: center bottom
}

.threshold-wrap .threshold-container.out-of-visible-range {
    opacity: .5
}

.threshold-wrap .threshold-container .level-container {
    position: absolute;
    top: 1.5%;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%
}

.threshold-wrap .threshold-container .level-container .sign {
    padding-bottom: 6.8026153846%;
    width: 8.67%;
    background-size: 100% auto
}

.threshold-wrap .threshold-container .level-container .text {
    margin: .4rem 0 0 .2rem;
    font-size: 1.3rem;
    color: var(--threshold-wrap-level-text)
}

.threshold-wrap .threshold-container .bet-container {
    position: absolute;
    top: 21%;
    left: 5.5%;
    display: flex;
    width: 88.5%;
    height: 65%
}

.threshold-wrap .threshold-container .bet-container .information-container {
    display: flex;
    width: 76%;
    flex-direction: column
}

.threshold-wrap .threshold-container .bet-container .information-container .max-amount-container,.threshold-wrap .threshold-container .bet-container .information-container .condition-container {
    height: 50%;
    widows: 100%
}

.threshold-wrap .threshold-container .bet-container .information-container .max-amount-container {
    display: flex;
    align-items: center;
    justify-content: center
}

.threshold-wrap .threshold-container .bet-container .information-container .max-amount-container .title {
    padding-bottom: 2.4008064516rem;
    width: 2.29rem;
    background-size: 100% auto
}

.threshold-wrap .threshold-container .bet-container .information-container .max-amount-container .max-amount {
    margin-left: 2%;
    font-size: 2.1rem;
    font-weight: bolder;
    color: var(--threshold-wrap-max-amount)
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container {
    display: flex;
    justify-content: center
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container.total-count-1 .condition {
    width: 100%
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container.total-count-2 .condition {
    width: 50%
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container.total-count-3 .condition {
    width: 33.3333%
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition .title {
    margin-bottom: .2rem;
    padding-bottom: .9684210526rem;
    width: 2.3rem;
    background-size: 300% 200%
}

@media (min-width: 576px) {
    .threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition .title {
        padding-bottom:1.2631578947rem;
        width: 3rem
    }
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition .amount {
    font-size: .8rem;
    color: var(--threshold-wrap-condition-amount-default)
}

@media (min-width: 576px) {
    .threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition .amount {
        font-size:1rem
    }
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.goal .amount {
    color: var(--threshold-wrap-condition-amount-goal)
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.deposit .title {
    background-position: left top
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.deposit.goal .title {
    background-position: left bottom
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.bet .title {
    background-position: center top
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.bet.goal .title {
    background-position: center bottom
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.draw .title {
    background-position: right top
}

.threshold-wrap .threshold-container .bet-container .information-container .condition-container .condition.draw.goal .title {
    background-position: right bottom
}

.threshold-wrap .threshold-container .bet-container .bet-btn {
    position: absolute;
    top: 7%;
    right: 1%;
    padding-bottom: 24.5%;
    width: 24.5%;
    background-position: center bottom;
    background-size: 100% 400%;
    pointer-events: visible
}

.threshold-wrap .threshold-container .bet-container .bet-btn.goal {
    background-position: center top;
    cursor: pointer
}

.threshold-wrap .threshold-container .bet-container .bet-btn.goal:hover {
    background-position: center 33.3333%
}

.threshold-wrap .threshold-container .bet-container .bet-btn.goal-but-pass {
    background-position: center 66.6666%
}

.threshold-wrap .switch-btn-container {
    position: absolute;
    bottom: 37%;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s
}

.threshold-wrap .switch-btn-container .left,.threshold-wrap .switch-btn-container .right {
    padding-bottom: 9.3017241379%;
    width: 6.5%;
    background-position: left center;
    background-size: auto 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: visible
}

.threshold-wrap .switch-btn-container .left.start,.threshold-wrap .switch-btn-container .left.end,.threshold-wrap .switch-btn-container .right.start,.threshold-wrap .switch-btn-container .right.end {
    opacity: 0;
    cursor: default;
    animation: none
}

.threshold-wrap .switch-btn-container .left {
    animation: flow-left 1.9s infinite linear
}

@keyframes flow-left {
    20%,80% {
        opacity: 1
    }

    to {
        transform: translate(-.6rem);
        opacity: 0
    }
}

.threshold-wrap .switch-btn-container .right {
    background-position: right center;
    animation: flow-right 1.9s infinite linear
}

@keyframes flow-right{
    20%,80% {
        opacity: 1
    }

    to {
        transform: translate(.6rem);
        opacity: 0
    }
}

.main-content-wrap {
    position: relative;
    overflow-x: hidden;
    margin: 0 auto;
    width: 480px;
    height: 100%;
    z-index: 2
}

@media (min-width: 576px) {
    .main-content-wrap {
        width:576px
    }
}

.event-wrap {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 480px;
    min-height: 100vh;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    scroll-behavior: smooth;
    scrollbar-width: none
}

.event-wrap::-webkit-scrollbar {
    display: none
}

@media (min-width: 1920px) {
    .event-wrap {
        background-size:100% auto
    }
}

.receive-coin {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 13
}

.receive-coin .receive-coin-canvas {
    width: 100%;
    height: 100%
}