.mini-gbox-wrap * { margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; }
.mini-gbox-wrap { position:fixed; z-index:2147483647; width:100%; height:100%; top:0; left:0 }
    .mini-gbox-wrap .ooverlay { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8) }
    .mini-gbox-wrap .mini-gbox { position:absolute; z-index:2; width:94%; height:94%; left:3%; top:3%; opacity:0 }
    .mini-gbox-wrap .mini-gbox.aaa { opacity:1 } 

.fw-wrap {
  font-family:Arial; height: 100%; display: flex; align-items: center; justify-content: center; background-size:cover; background-position:center center; background-repeat:no-repeat; transition:none;
}
.fw-wrap img { max-width:100% }

.fw-close { position:absolute; right:15px; top:15px; cursor:pointer }
    .fw-close img { max-width:50px; }
    .fw-close:hover { filter:brightness(1.4) }

.fw-holder { max-width:700px; margin-top:0; position:relative; width:90%; height:100% }
    .fw-holder .fw-top { position:absolute; z-index:1; top:0 }

    .fw-holder .fw-con { position:absolute; width:82vh; padding-bottom:82vh; height:0; top:52%; left:50%; transform:translate(-50%,-50%) }
        .fw-holder .fw-con .bbg {  }
        .fw-holder .fw-con img { width:100%; max-width:none }

    .fw-holder .fw-btm { position:absolute; bottom:1%; left:0; width:100% }
    
.fw-token { position:absolute; max-width:25%; bottom:0; left:0; margin-bottom:-2% }
    .fw-token .bbg {  }
    .fw-token .tt { position:absolute; font-size:26px; color:#ffffff; font-weight:bold; width:40%; top:32%; left:50%; height:35%; display:flex; justify-content:center; align-items:center }

.fw-spinbtn { position:absolute; max-width:33%; bottom:0; left:50%; transform:translateX(-50%); filter:grayscale(1); pointer-events:none }
    .fw-spinbtn.aaa { filter:grayscale(0); pointer-events:auto; cursor:pointer }
    .fw-spinbtn:hover img { filter:brightness(1.3); transform:scale(1.1) }
    .fw-spinbtn.stop { pointer-events:none; filter:grayscale(1) }

.fw-history { position:absolute; max-width:25%; bottom:0; right:0; margin-bottom:-2%; cursor:pointer }

.fw-wheel { position:absolute; top:9%; left:9%; width:82%; height:82% }
    .fw-wheel .fw-wheel-btn { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(0deg); z-index:10; width:22%; }
    .fw-wheel .fw-wheel-body { border-radius:50%; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; box-shadow:0 0 0 2px #111111; background-color:#111111; transition:transform 3s ease-out }
    .fw-wheel .fw-wheel-body.run { transition:transform 0.2s linear }
    .fw-wheel .fw-wheel-body.reset { transition:none }
    .fw-wheel .fw-wheel-body .fw-items-bg { position:absolute; top:0; left:0; width:100% }
    .fw-wheel .fw-wheel-body .fw-items { position:absolute; width:50%; height:50%; background: var(--clr); transform-origin:bottom right; transform:rotate(calc(45deg * var(--i))); clip-path:polygon(0 0, 60% 0, 100% 100%, 0 60%); display:flex; justify-content:center; align-items:center }
    .fw-wheel .fw-wheel-body .fw-items span { position:relative; transform:rotate(45deg); font-size:2.2em; font-weight:bold; color:#ffffff; text-shadow:3px 5px 2px rgba(0,0,0,0.15) }

.fw-spin-wheel.f2 .fw-items span { font-size:1.8em; }
.fw-spin-wheel.f3 .fw-items span { font-size:1.6em; }
.fw-spin-wheel.f4 .fw-items span { font-size:1.4em; }

.fw-spin-wheel[aa="2"] .fw-items { width:100%; transform-origin:bottom center; clip-path:none }
    .fw-spin-wheel[aa="2"] .fw-items span { transform:rotate(90deg) }
.fw-spin-wheel[aa="3"] .fw-items { clip-path:none; }
.fw-spin-wheel[aa="4"] .fw-items { clip-path:none }
.fw-spin-wheel[aa="5"] .fw-items { clip-path:polygon(0 0, 85% 0, 100% 100%, 0 85%) }
.fw-spin-wheel[aa="6"] .fw-items { clip-path:polygon(0 0, 75% 0, 100% 100%, 0 75%) }
.fw-spin-wheel[aa="7"] .fw-items { clip-path:polygon(0 0, 65% 0, 100% 100%, 0 65%) }
.fw-spin-wheel[aa="8"] .fw-items { clip-path:polygon(0 0, 59% 0, 100% 100%, 0 59%) }
.fw-spin-wheel[aa="9"] .fw-items { clip-path:polygon(0 0, 54% 0, 100% 100%, 0 54%) }
.fw-spin-wheel[aa="10"] .fw-items { clip-path:polygon(0 0, 50% 0, 100% 100%, 0 50%) }
.fw-spin-wheel[aa="11"] .fw-items { clip-path:polygon(0 0, 46% 0, 100% 100%, 0 46%) }
.fw-spin-wheel[aa="12"] .fw-items { clip-path:polygon(0 0, 43% 0, 100% 100%, 0 43%) }
.fw-spin-wheel[aa="13"] .fw-items { clip-path:polygon(0 0, 40% 0, 100% 100%, 0 40%) }
.fw-spin-wheel[aa="14"] .fw-items { clip-path:polygon(0 0, 38% 0, 100% 100%, 0 38%) }
.fw-spin-wheel[aa="15"] .fw-items { clip-path:polygon(0 0, 36% 0, 100% 100%, 0 36%) }
.fw-spin-wheel[aa="16"] .fw-items { clip-path:polygon(0 0, 34% 0, 100% 100%, 0 34%) }
.fw-spin-wheel[aa="17"] .fw-items { clip-path:polygon(0 0, 32% 0, 100% 100%, 0 32%) }
.fw-spin-wheel[aa="18"] .fw-items { clip-path:polygon(0 0, 31% 0, 100% 100%, 0 31%) }
.fw-spin-wheel[aa="19"] .fw-items { clip-path:polygon(0 0, 29% 0, 100% 100%, 0 29%) }
.fw-spin-wheel[aa="20"] .fw-items { clip-path:polygon(0 0, 28% 0, 100% 100%, 0 28%) }
.fw-spin-wheel[aa="21"] .fw-items { clip-path:polygon(0 0, 27% 0, 100% 100%, 0 27%) }
.fw-spin-wheel[aa="22"] .fw-items { clip-path:polygon(0 0, 26% 0, 100% 100%, 0 26%) }
.fw-spin-wheel[aa="23"] .fw-items { clip-path:polygon(0 0, 25% 0, 100% 100%, 0 25%) }
.fw-spin-wheel[aa="24"] .fw-items { clip-path:polygon(0 0, 24% 0, 100% 100%, 0 24%) }
.fw-spin-wheel[aa="25"] .fw-items { clip-path:polygon(0 0, 23% 0, 100% 100%, 0 23%) }
.fw-spin-wheel[aa="26"] .fw-items { clip-path:polygon(0 0, 22% 0, 100% 100%, 0 22%) }
.fw-spin-wheel[aa="27"] .fw-items { clip-path:polygon(0 0, 21% 0, 100% 100%, 0 21%) }
.fw-spin-wheel[aa="28"] .fw-items { clip-path:polygon(0 0, 20.5% 0, 100% 100%, 0 20.5%) }
.fw-spin-wheel[aa="29"] .fw-items { clip-path:polygon(0 0, 20% 0, 100% 100%, 0 20%) }
.fw-spin-wheel[aa="30"] .fw-items { clip-path:polygon(0 0, 19.5% 0, 100% 100%, 0 19.5%) }
.fw-spin-wheel[aa="31"] .fw-items { clip-path:polygon(0 0, 19% 0, 100% 100%, 0 19%) }
.fw-spin-wheel[aa="32"] .fw-items { clip-path:polygon(0 0, 18.5% 0, 100% 100%, 0 18.5%) }
.fw-spin-wheel[aa="33"] .fw-items { clip-path:polygon(0 0, 18% 0, 100% 100%, 0 18%) }
.fw-spin-wheel[aa="34"] .fw-items { clip-path:polygon(0 0, 17.5% 0, 100% 100%, 0 17.5%) }
.fw-spin-wheel[aa="35"] .fw-items { clip-path:polygon(0 0, 17% 0, 100% 100%, 0 17%) }
.fw-spin-wheel[aa="36"] .fw-items { clip-path:polygon(0 0, 16.5% 0, 100% 100%, 0 16.5%) }

.fw-res { position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:12; opacity:0; visibility:hidden }
.fw-res.aaa { opacity:1; visibility:visible}
    .fw-res .overlay { position:absolute; z-index:1; background:rgba(0,0,0,0.7); width:100%; height:100% }
    .fw-res .fw-res-con { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:88%; max-width:870px }
        .fw-res .fw-res-con::after { content:''; position:absolute; /*background:url(../img/pop-label.png);*/ width:100%; height:100%; top:0px; left:0px; z-index:-1; background-size:cover  }
        .fw-res .fw-res-con .res-top { display:flex; justify-content:center; margin-top:8%; margin-bottom:-2%; filter:grayscale(1) }
        .fw-res .fw-res-con .res-label small { font-size:24px; display:block }
        .fw-res .fw-res-con .res-label { text-transform:uppercase; color:#111111; font-size:66px; font-weight:bold; text-align:center; text-shadow:0px 3px 10px #ffffff,0px 3px 10px #ffffff,0px 3px 10px #ffffff,0px 3px 10px #ffffff,0px 3px 10px #ffffff,0px 3px 10px #ffffff; line-height:normal; margin:-3% 0 2%}
        
        .fw-res .res-con { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center }
        .fw-res .res-bbg { position:relative; z-index:1; }
        .fw-res .res-title {  }
        .fw-res .res-button { cursor:pointer; max-width:50% }
            .fw-res .res-button:hover img { filter:brightness(1.4); transform:scale(1.05) }
            
.fw-res[res="win"] .fw-res-con .res-bbg { animation: blink 1s ease infinite; filter:brightness(1.8); }
.fw-res[res="win"] .fw-res-con .res-title { animation: zoom 1s ease infinite; }
.fw-res[res="lose"] .fw-res-con .res-bbg { filter:grayscale(1); opacity:0.7 }
.fw-res[res="lose"] .fw-res-con .res-title { display:none }

.fw-winnerlist { position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:12; opacity:0; visibility:hidden }
.fw-winnerlist.aaa { opacity:1; visibility:visible}
    .fw-winnerlist .overlay { position:absolute; z-index:1; background:rgba(0,0,0,0.7); width:100%; height:100% }
    .fw-winnerlist .ccon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:88%; max-width:480px }

.fw-wl-wrap { background-color:#ffffff; border-radius:6px; overflow:hidden }
    .fw-wl-tabs-wrap { display:flex; justify-content:center; align-items:center; background:#36304a; color:#ffffff }
        .fw-wl-tabs-wrap .fw-wl-tabs { text-align:center; width:100%; text-transform:uppercase; font-weight:bold; height:40px; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:16px; }
        .fw-wl-tabs-wrap .fw-wl-tabs.aaa, .fw-wl-tabs-wrap .fw-wl-tabs:hover { background:#201c2f; color:#ffffff }

.fw-wl-wrap .fw-wl-con { max-height:60vh; overflow-y:auto; }
    .fw-wl-wrap .fw-wl-con .fw-wl { display:none }
    .fw-wl-wrap .fw-wl-con .fw-wl.aaa { display:block }

.fw-wl table { width:100%; text-align:center; font-size:14px; color:#555555 }
    .fw-wl table thead { background-color:#111111; color:#ffffff; position:sticky; top:0 }
    .fw-wl table tbody { font-size:12px; }
    .fw-wl table th, .fw-wl table td { padding:8px; width:33.33%; text-align:center }
    .fw-wl table tbody tr:nth-child(even) { background-color:#f5f5f5 }
    .fw-wl table tbody tr td { background:transparent }

.fw-wl-close { position:absolute; right:-15px; top:-15px; cursor:pointer }
    .fw-wl-close img { max-width:40px; }
    .fw-wl-close:hover { filter:brightness(1.4) }

.mob-landscape .fw-holder { max-width:44vw; height:100% }
.mob-landscape .fw-wheel .fw-wheel-body .fw-items span { font-size:1.4em }
.mob-landscape .fw-spin-wheel.f2 .fw-items span { font-size:1.2em; }
.mob-landscape .fw-spin-wheel.f3 .fw-items span { font-size:1em; }
.mob-landscape .fw-spin-wheel.f4 .fw-items span { font-size:0.8em; }
.mob-landscape .fw-token .tt { font-size:3vw }
.mob-landscape .fw-token { left:-4%; max-width:32% }
.mob-landscape .fw-spinbtn { max-width:42%; }
.mob-landscape .fw-history { right:-2%; max-width:32% }
.mob-landscape .fw-holder .fw-con { margin-bottom:6%; width:82vh; padding-bottom:82vh; }

.shake {animation: shake 0.5s ease infinite; }
.spinstart { animation: wheelspin 5s ease-in-out; }
.wheelspin {animation: infinitespin 0.2s ease-in; animation-iteration-count: 10; }

@keyframes infinitespin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes shake {
  30% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-5deg);
  }
}

@keyframes blink {
  50% {
    filter:brightness(1);
  }
}

@keyframes zoom {
  50% {
    transform:scale(1.05);
  }
}

@keyframes wheelspin {
    0%{ transform:translate(-50%, -50%) }
    20%{ transform:translate(-50%, -50%) rotate(-20deg) }
    25%{ transform:translate(-50%, -50%) rotate(-4deg) }
    30%{ transform:translate(-50%, -50%) rotate(-8deg) }
    35%{ transform:translate(-50%, -50%) rotate(-4deg) }
    40%{ transform:translate(-50%, -50%) rotate(-8deg) }
    45%{ transform:translate(-50%, -50%) rotate(-4deg) }
    50%{ transform:translate(-50%, -50%) rotate(-8deg) }
    55%{ transform:translate(-50%, -50%) rotate(-4deg) }
    60%{ transform:translate(-50%, -50%) rotate(-8deg) }
    65%{ transform:translate(-50%, -50%) rotate(-4deg) }
    70%{ transform:translate(-50%, -50%) rotate(-8deg) }
    75%{ transform:translate(-50%, -50%) rotate(-4deg) }
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 820px) {
    .fw-holder { height:102vw }
    .fw-holder .fw-con { width:110%; padding-bottom:110% }
}

@media only screen and (max-width: 600px) {

    .fw-wheel .fw-wheel-body .fw-items span { font-size:1.8em }
    .fw-spin-wheel.f2 .fw-items span { font-size:1.4em; }
    .fw-spin-wheel.f3 .fw-items span { font-size:1.2em; }
    .fw-spin-wheel.f4 .fw-items span { font-size:1em; }

    .fw-token .tt { font-size:4vw }
    .fw-token { left:-4%; max-width:32% }
    .fw-spinbtn { max-width:42%; }
    .fw-history { right:-2%; max-width:32% }
    .fw-holder .fw-con { margin-bottom:6%; }
    .fw-res .fw-res-con .res-label { font-size:16vw }

    .fw-res .res-bbg { transform:scale(1.8) }

}