.s12n27cf { height: 3.75rem; width: 23.75rem; background-color: transparent; border-radius: var(--border-radius); padding: .25rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; color: #767b81; position: absolute; left:50%; transform:translateX(-50%) } .dilog-root { width:100%; height:100%; position: relative; top:50%; left:50%; transform: translateX(-50%) translateY(-50%) } /* @media only screen and (max-width: 621px) { .dilog-root { top:30%; left:0%; transform: translateX(0%) translateY(-50%) } } */ .top-txt-tit { display: flow; position: relative; left: 50%; translate: -50% 0; border-radius: 2px; width: 5rem; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; text-align: center; font-size: .65rem; line-height: .75rem; height: .75rem; background-color: #ffc42c; margin: .25rem 0; color: #000 } .s12n27cf .left-cont { /* background-color: #191a1b; border-radius: var(--border-radius); */ width: 5rem; background-color: transparent; /* -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; text-align: center */ } .s12n27cf .left-cont .left-cont-img { top: -1.75rem; left: -0.25rem; position: absolute; z-index: 10; -webkit-animation: pulse-s1n8shi6 2s infinite linear; animation: pulse-s1n8shi6 2s infinite linear } .s12n27cf .left-cont .tit { font-size: .75rem; line-height: .75rem; height: .75rem; margin-top: 1rem } .s12n27cf .left-cont .amount { color: #e9d317; font-size: 1rem; line-height: 1.1875rem; height: 1.1875rem; font-weight: 800; margin-top: .3125rem } .s12n27cf .right-cont { background-color: #191a1b; border-style: solid; border-color: #27232a; border-radius: 6px; border-radius: var(--border-radius); -webkit-flex: auto; -ms-flex: auto; flex: auto; margin-left: .25rem; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; position: relative; overflow: hidden } .s12n27cf .right-cont .data-cont { padding: .625rem 1.5625rem 0 3.75rem; width: 100%; height: 5.75rem } .s12n27cf .right-cont .data-cont .icon { height: 1.25rem; position: absolute; top: 2.25rem; right: .3125rem } .s12n27cf .right-cont .data-cont .avatar { position: absolute; top: .9375rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; left: 1rem } .s12n27cf .right-cont .data-cont .cont .name { color: #94a3c8; font-size: .9375rem } .s12n27cf .right-cont .data-cont .cont .win { white-space: nowrap } .s12n27cf .right-cont .data-cont .cont .win .amount { color: #45cb1d } .s12n27cf .right-cont .data-cont .cont .win .currency { color: #fff } .s12n27cf .right-cont .data-cont .cont .type b { color: #f1905c } .s150tarq { position: absolute; width: 25.75rem; height: 25.75rem; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; left: 0; top: 0 } @media only screen and (max-width: 621px) { .s150tarq { width: 21.75rem; height: 21.75rem; } } @-webkit-keyframes lightRot-s150tarq { 0% { -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); transform: rotate(22.5deg) } 50% { -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); transform: rotate(22.5deg) } 51% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } } @keyframes lightRot-s150tarq { 0% { -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); transform: rotate(22.5deg) } 50% { -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); transform: rotate(22.5deg) } 51% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } } .s150tarq .spin-img { position: absolute; width: 25.75rem; height: 25.75rem; left: 0; top: 0 } .s150tarq .spin-light { position: absolute; width: 25.75rem; height: 25.75rem; z-index: 1; left: 0; top: 0 } @media only screen and (max-width: 621px) { .s150tarq .spin-img { width: 21.75rem; height: 21.75rem; } .s150tarq .spin-light { width: 21.75rem; height: 21.75rem; } } .s150tarq .spin-light.active.light { -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); transform: rotate(22.5deg) } .s150tarq .spin-item { position: absolute; height: 1.5rem; width: 5.5rem; top: 50%; left: 50%; line-height: 1.5rem; margin-top: -.75rem; -webkit-transform-origin: -4rem center; -ms-transform-origin: -4rem center; transform-origin: -4rem center; margin-left: 4rem; color: #fff; font-size: .9375rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } @media only screen and (max-width: 621px) { .s150tarq .spin-item { -webkit-transform-origin: -3rem center; -ms-transform-origin: -3rem center; transform-origin: -3rem center; margin-left: 3rem; } } .s150tarq .spin-item .amount { text-align: right; margin-right: .3125rem; font-weight: 600; font-size: 1.125rem; text-shadow: 0px 2px 0px rgba(0, 0, 0, .3) } .s150tarq .spin-item.fiat .coin-icon { border-radius: 50%; text-align: center; line-height: 2rem; font-size: .75rem; border: 1px solid #fff; box-shadow: 0 0 5px #00000080 } .s150tarq .spin-item .amount { -webkit-flex: auto; -ms-flex: auto; flex: auto } .s150tarq .spin-item .icon { position: absolute; right: -.3125rem; top: -.3125rem; fill: #fff; opacity: .7; height: .6875rem; width: .6875rem; border-radius: var(--border-radius) } .s150tarq .spin-item .coin-icon { height: 1.75rem; width: 1.75rem } @media only screen and (max-width: 621px) { .s150tarq .spin-item .coin-icon { height: 1.25rem; width: 1.25rem } .s150tarq .spin-item .amount { font-size: 0.9375rem; } } .qye7393 { line-height: 2.125rem; font-size: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-family: sans-serif; padding-top: 0.25rem } .qye7393 .claim-time { font-size: 1.75rem; padding-left: 2.5rem; padding-top: 0.5rem; white-space: nowrap; position: absolute; color:#fff; } .qye7393 .lo-ribbon { -webkit-align-items: right; -webkit-box-align: right; -ms-flex-align: right; align-items: right; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; /* color: #767b81; */ position: absolute; left: 50%; width: 4rem; height: auto; transform: translateX(-11.5rem) } .qye7393 .lo-timer { -webkit-align-items: right; -webkit-box-align: right; -ms-flex-align: right; align-items: right; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; /* color: #767b81; */ position: absolute; left: 50%; width: 3.5rem; height: auto; transform: translateX(-11rem) translateY(0.25rem) } .s1et3xev { font-weight: 900; background-image: linear-gradient(to bottom, #FFB03B, #FCEE21, #FFFF89, #FDDB3E, #FFDB49, #FFEB7D, #FDA60A); -webkit-filter: drop-shadow(2px 2px 0 #C55B1A); filter: drop-shadow(1px 1px 0 #C55B1A); -webkit-background-clip: text; color: transparent; line-height: 3.125rem; font-size: 3.5rem; font-style: normal; -webkit-flex: auto; -ms-flex: auto; flex: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 4rem } .srwwvyw { position: absolute; width: 100%; border-radius: .5rem; top: 24rem } @media only screen and (max-width: 621px) { .srwwvyw { top: 20rem } } @-webkit-keyframes fade-in-srwwvyw { 0% { opacity: 0.2; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -ms-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2) } 80% { opacity: .8; -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2); -ms-transform: translateX(-50%) translateY(-50%) scale(1.2); transform: translateX(-50%) translateY(-50%) scale(1.2) } to { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1) } } @keyframes fade-in-srwwvyw { 0% { opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(0); -ms-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0) } 80% { opacity: .8; -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2); -ms-transform: translateX(-50%) translateY(-50%) scale(1.2); transform: translateX(-50%) translateY(-50%) scale(1.2) } to { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1) } } @-webkit-keyframes fade-in2-srwwvyw { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fade-in2-srwwvyw { 0% { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes rotate-srwwvyw { 0% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0) } to { -webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(360deg); transform: translateX(-50%) translateY(-50%) rotate(360deg) } } @keyframes rotate-srwwvyw { 0% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0) } to { -webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(360deg); transform: translateX(-50%) translateY(-50%) rotate(360deg) } } .srwwvyw .bg-wrap { position: absolute; z-index: 1; padding-top: 10rem; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 621px) { .srwwvyw .bg-wrap { padding-top: 6rem; } } .srwwvyw .img-bg { position: fixed; width: 31.25rem; height: 31.25rem; left: 50%; top: 20rem; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: rotate-srwwvyw 5s linear infinite; animation: rotate-srwwvyw 5s linear infinite } .srwwvyw .img_glod { position: fixed; width: auto; height: 26.25rem; left: 50%; top: 20rem; transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; opacity: 0; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: fade-in-srwwvyw .8s ease-out both; animation: fade-in-srwwvyw .8s ease-out both } @media only screen and (max-width: 621px) { .srwwvyw .img_glod { height: 21.25rem; top: 15rem; } .srwwvyw .img-bg { top: 15rem; } } /* .srwwvyw .cont { background-size: 100% auto; background-position: center; background-repeat: no-repeat; position: relative; z-index: 3; height: 100%; padding: 2.75rem .75rem; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } */ .srwwvyw .win-cont { padding-top: 2rem; } .srwwvyw .win-cont .win-cont-btn { padding-top: 4rem; padding-bottom: 2rem; } .srwwvyw .cont .tit { color: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1.625rem } .srwwvyw .cont .desc { font-size: 1rem; width: 70%; margin: .75rem auto 0; color: #98a7b5 } .srwwvyw .ui-button { margin: 0 auto; width: 25rem } .s1j2bted { position: absolute; width: 25.75rem; height: 25.75rem; left: 50%; margin-left: -12.875rem; top: 0 } @media only screen and (max-width: 621px) { .s1j2bted { width: 21.75rem; height: 21.75rem; margin-left: -10.875rem; } } .s1j2bted .spin-wrap-rot-anim { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; --rot-anim-end-slow-angle: 1500deg; --rot-anim-end-angle: 1710deg; -webkit-animation: spin-wrap-rot-anim 4s 1 linear forwards; animation: spin-wrap-rot-anim 4s 1 linear forwards } @-webkit-keyframes spin-wrap-rot-anim { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 75% { -webkit-transform: rotate(var(--rot-anim-end-slow-angle)); -ms-transform: rotate(var(--rot-anim-end-slow-angle)); transform: rotate(var(--rot-anim-end-slow-angle)) } 100% { -webkit-transform: rotate(var(--rot-anim-end-angle)); -ms-transform: rotate(var(--rot-anim-end-angle)); transform: rotate(var(--rot-anim-end-angle)) } } @keyframes spin-wrap-idle-anim { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 75% { -webkit-transform: rotate(var(--rot-anim-end-slow-angle)); -ms-transform: rotate(var(--rot-anim-end-slow-angle)); transform: rotate(var(--rot-anim-end-slow-angle)) } 100% { -webkit-transform: rotate(var(--rot-anim-end-angle)); -ms-transform: rotate(var(--rot-anim-end-angle)); transform: rotate(var(--rot-anim-end-angle)) } } .s1j2bted .point-img { position: absolute; z-index: 5; height: 5.59375rem; right: 0.25rem; top: 10rem; width: 10rem; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } @media only screen and (max-width: 621px) { .s1j2bted .point-img { right: 0rem; top: 8.4925rem; height: 4.59375rem; width: 9rem; } } .s1j2bted .point-img img { width: 100%; height: 100% } .s1j2bted .point-img-anim { position: absolute; z-index: 5; height: 5.59375rem; right: 0.25rem; top: 10rem; width: 10rem; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-animation: point-img-anim 0.5s 1 linear forwards; animation: point-img-anim 0.5s 1 linear forwards; } @media only screen and (max-width: 621px) { .s1j2bted .point-img-anim { right: 0rem; top: 8.4925rem; height: 4.59375rem; width: 9rem; } } .s1j2bted .point-img-anim img { width: 100%; height: 100% } @-webkit-keyframes point-img-anim { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes point-img-anim { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .s1n8shi6 { height: 25.75rem; position: relative; margin: 0rem auto 1.875rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } @media only screen and (max-width: 621px) { .s1n8shi6 { height: 21.75rem; margin: 0rem auto 1.0rem; } } @-webkit-keyframes pulse-s1n8shi6 { 0% { -webkit-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); -ms-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); transform: rotate(-5deg) scale(0.7) } 50% { -webkit-transform: rotate(0deg) scale3d(0.9, 0.9, 0.9); -ms-transform: rotate(0deg) scale3d(0.9, 0.9, 0.9); transform: rotate(0) scale(0.9) } to { -webkit-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); -ms-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); transform: rotate(-5deg) scale(0.7) } } @keyframes pulse-s1n8shi6 { 0% { -webkit-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); -ms-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); transform: rotate(-5deg) scale(0.7) } 50% { -webkit-transform: rotate(0deg) scale3d(0.9, 0.9, 0.9); -ms-transform: rotate(0deg) scale3d(0.9, 0.9, 0.9); transform: rotate(0) scale(0.9) } to { -webkit-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); -ms-transform: rotate(-5deg) scale3d(0.7, 0.7, 0.7); transform: rotate(-5deg) scale(0.7) } } .s1n8shi6 .img_bg { position: absolute; left: 50%; top: 50%; width: auto; height: 120%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .7 } .s1n8shi6 canvas { position: absolute; top: 0; top: 8.875rem; left: 65%; z-index: 13; margin-left: -3.125rem; pointer-events: none } .s1n8shi6 .btn-img { position: absolute; width: 6.5rem; height: 6.5rem; top: 9.625rem; left: 50%; z-index: 11; margin-left: -3.25rem; cursor: pointer; -webkit-transition: -webkit-transform .2s ease; -webkit-transition: transform .2s ease; transition: transform .2s ease } @media only screen and (max-width: 621px) { .s1n8shi6 .btn-img { top: 7.625rem; } } .s1n8shi6 .btn-img:not(.loading):hover { -webkit-transform: scale(1.1) !important; -ms-transform: scale(1.1) !important; transform: scale(1.1) !important } .s1n8shi6 .btn-img .spin-particles { position: absolute; width: 5.5rem; height: 5.5rem; border-radius: var(--border-radius); overflow: hidden; top: 0; left: .5rem } .s1n8shi6 .btn-img .btn-txt { position: absolute; width: 5.5rem; height: 3.5rem; top: 1.5625rem; left: .5rem } .s1n8shi6 .btn-img:not(.loading) .btn-txt { -webkit-animation: pulse-s1n8shi6 2s infinite linear; animation: pulse-s1n8shi6 2s infinite linear } .s1n8shi6 .btn-img img { width: 100%; height: 100% } .s1n8shi6 .btn { position: absolute; width: 15rem; left: 3.75rem; bottom: 0 } .s1583o6t .pop { width: 26.25rem; height: 58.625rem; padding: 0 !important } @media only screen and (max-width: 621px) { .s1583o6t .pop { width: 100%; height: 55.625rem; } } .s1583o6t.pop .close-icon { z-index: 20 } .s1583o6t.pop .close-icon svg { fill: #fff } .s1583o6t .head-img { width: 100%; position: absolute; left: 0; top: -5rem; z-index: 9; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .s1583o6t #spin { background-color: transparent; position: relative; padding: 0; border-radius: var(--border-radius) } .s1583o6t .spin-cont { position: relative; width: 24.25rem; overflow: hidden; z-index: 1; left: 50%; transform-origin: left top; transform: translateX(-50%); } .s1583o6t .head { text-align: center; color: #fff; font-weight: 700; position: relative; z-index: 10; background-size: 100% auto; height: 18.625rem; background-position: center; /* padding: 2.5rem 0 1.25rem */ } .s1583o6t .head .top-cont { width: 100%; translate: -50% 0; position: absolute } @media only screen and (max-width: 621px) { .s1583o6t .head { /* height: 24.625rem; */ } .s1583o6t .head .top-cont { /* padding-top: 7rem; width: 23.75rem */ } } .s1583o6t .head .txt { font-weight: 900; font-size: 2.0625rem; line-height: 2.5rem; background-image: linear-gradient(to bottom, #ffffff, #A27BEB); -webkit-filter: drop-shadow(1px 1px 0 #7F4CD6); filter: drop-shadow(1px 1px 0 #7F4CD6); color: transparent; -webkit-background-clip: text } .s1583o6t .head .amount { font-weight: 900; font-size: 3rem; line-height: 3.125rem; -webkit-background-clip: text; color: #fff } .s1583o6t .bg { opacity: .65; -webkit-filter: blur(26px); filter: blur(26px); position: fixed } .s1583o6t .bg-a { width: 12.5rem; height: 12.5rem; background-image: radial-gradient(circle at 50% 50%, #8729FF, rgba(25, 26, 27, 0)); top: 10rem; right: -16rem } .s1583o6t .bg-b { width: 9.375rem; height: 9.375rem; top: 18.125rem; left: 14rem; background-image: radial-gradient(circle at 50% 50%, #7803FF, rgba(25, 26, 27, 0)) } .s1583o6t .bg-c { width: 26.875rem; height: 12.5rem; background-image: radial-gradient(circle at 50% 50%, #4F19B1, rgba(25, 26, 27, 0)); top: 1.875rem; left: 15.125rem } .s1583o6t .bg-d { width: 26.875rem; height: 12.5rem; background-image: radial-gradient(circle at 50% 50%, #4F19B1, rgba(25, 26, 27, 0)); top: 35.875rem; right: 15.125rem } .s1583o6t .bg-l { width: 20rem; height: 20rem; background-image: radial-gradient(circle at 50% 50%, #5606eb, rgba(25, 26, 27, 0)); top: 4rem; right: 55.125rem; rotate: 40deg } .s1583o6t .bg-r { width: 25rem; height: 25rem; background-image: radial-gradient(circle at 50% 50%, #5606eb, rgba(25, 26, 27, 0)); top: 25rem; left: 50.125rem; rotate: 25deg } .s12n27cf .spin-footer { padding: 0; margin: .5rem; background-color: transparent; height: 2.375rem } .s12n27cf .spin-footer .tit { color: #fff } .s12n27cf .spin-footer .left-cont, .s12n27cf .spin-footer .right-cont { background-color: #261d3e } .s12n27cf .spin-footer .left-cont .tit, .s12n27cf .spin-footer .right-cont .tit { margin-top: 1.25rem } .s12n27cf .spin-footer .left-cont .type, .s12n27cf .spin-footer .right-cont .type { display: none } .s12n27cf .spin-footer .left-cont .data-cont, .s12n27cf .spin-footer .right-cont .data-cont { height: 100% } .s12n27cf .spin-footer .left-cont .icon, .s12n27cf .spin-footer .right-cont .icon { top: 1.5rem } .s1583o6t.fiat-spin .head .txt { background-image: linear-gradient(to bottom, #ffffff, #96D869); -webkit-filter: drop-shadow(2px 2px 0 #478A1A); filter: drop-shadow(2px 2px 0 #478A1A) } .s1583o6t.fiat-spin #spin { background-color: #102311 } .s1583o6t.fiat-spin .bg-a, .s1583o6t.fiat-spin .bg-b, .s1583o6t.fiat-spin .bg-c { background-image: radial-gradient(circle at 50% 50%, rgba(7, 250, 46, .67), rgba(0, 0, 0, 0)) } .s1583o6t.fiat-spin .spin-footer { padding: 0; background-color: transparent } .s1583o6t.fiat-spin .spin-footer .left-cont, .s1583o6t.fiat-spin .spin-footer .right-cont { background-color: #183319 } .normal-hand { pointer-events:none; position:fixed; top: 31.625rem; left: 50%; /* margin-left: -3.25rem; */ transform-origin: left top; z-index: 100; -webkit-animation: normal-hand-anim 0.5s infinite linear; animation: normal-hand-anim 0.5s infinite linear } /* @media only screen and (max-width: 621px) { .normal-hand { top:67%; } } */ @-webkit-keyframes normal-hand-anim { 0% { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } 50% { -webkit-transform: translateY(-50px) rotate(0deg) scale3d(1.1, 1.1, 1.1); -ms-transform: translateY(-50px) rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: translateY(-50px) rotate(0) scale3d(1.1, 1.1, 1.1) } to { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } } @keyframes normal-hand-anim { 0% { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } 50% { -webkit-transform: translateY(-50px) rotate(0deg) scale3d(1.1, 1.1, 1.1); -ms-transform: translateY(-50px) rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: translateY(-50px) rotate(0) scale3d(1.1, 1.1, 1.1) } to { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } } .normal-hand-sh { pointer-events:none; position:fixed; top: 32.625rem; left: 50%; transform-origin: left top; z-index: 100; -webkit-animation: normal-hand-sh-anim 0.5s infinite linear; animation: normal-hand-sh-anim 0.5s infinite linear } /* @media only screen and (max-width: 621px) { .normal-hand-sh { top:68%; } } */ @-webkit-keyframes normal-hand-sh-anim { 0% { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } 50% { -webkit-transform: translateY(0px) rotate(0deg) scale3d(0.8, 0.8, 0.8); -ms-transform: translateY(0px) rotate(0deg) scale3d(0.8, 0.8, 0.8); transform: translateY(0px) rotate(0) scale3d(0.8, 0.8, 0.8) } to { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } } @keyframes normal-hand-sh-anim { 0% { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } 50% { -webkit-transform: translateY(0px) rotate(0deg) scale3d(0.8, 0.8, 0.8); -ms-transform: translateY(0px) rotate(0deg) scale3d(0.8, 0.8, 0.8); transform: translateY(0px) rotate(0) scale3d(0.8, 0.8, 0.8) } to { -webkit-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); -ms-transform: translateY(0px) rotate(-5deg) scale3d(1, 1, 1); transform: translateY(0px) rotate(-5deg) scaleZ(1) } } .s1j2bted .spin-wrap-idle-anim { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-animation: spin-wrap-idle-anim 1.25s infinite linear; animation: spin-wrap-idle-anim 1.25s infinite linear } @-webkit-keyframes spin-wrap-idle-anim { 0% { -webkit-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); transform: rotate(-2.5deg) } 50% { -webkit-transform: rotate(2.5deg); -ms-transform: rotate(2.5deg); transform: rotate(2.5) } to { -webkit-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); transform: rotate(-2.5deg) } } @keyframes spin-wrap-idle-anim { 0% { -webkit-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); transform: rotate(-2.5deg) } 50% { -webkit-transform: rotate(2.5deg); -ms-transform: rotate(2.5deg); transform: rotate(2.5) } to { -webkit-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); transform: rotate(-2.5deg) } }