.banner-ranking{animation:banner-entrance .6s ease-out;cursor:pointer;display:flex;flex-direction:column;margin-top:24px;max-width:500px;position:relative;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,filter .3s ease;width:100%}.banner-ranking:hover{filter:brightness(1.05);transform:translateY(-12px) scale(1.03);z-index:10}.banner-ranking:hover .banner-ranking-icon{filter:saturate(1.5) drop-shadow(0 8px 16px rgba(0,0,0,.3));transform:scale(1.05) rotate(5deg)}.banner-ranking:hover .banner-ranking-img-container:before{animation:light-sweep .8s ease forwards}.banner-ranking .title-ranking{animation:title-slide-in .8s ease-out .2s both;line-height:27px;margin-right:3%;text-align:right;transition:all .2s ease}.banner-ranking .title-ranking.lock,.banner-ranking .title-ranking.passed{filter:brightness(.6)}.banner-ranking .banner-ranking-icon{animation:icon-bounce .3s ease-out .2s both;height:auto;left:0;max-width:105px;min-width:64px;-o-object-fit:contain;object-fit:contain;position:absolute;top:-5%;transition:all .2s ease;width:16vw}.banner-ranking .banner-ranking-icon:hover{transform:scale(1.1) rotate(5deg)}.banner-ranking .banner-ranking-icon.lock{opacity:.6!important}.banner-ranking .banner-ranking-img-container{align-items:center;animation:container-scale .3s ease-out .1s both;border-radius:16px;display:flex;justify-content:center;overflow:hidden;position:relative;transition:all .2s ease}.banner-ranking .banner-ranking-img-container:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1) 20%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,.1) 80%,transparent);content:"";height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transform:skew(-25deg);width:50%;z-index:2}.banner-ranking .banner-ranking-img-container .banner-ranking-img{height:100%;-o-object-fit:contain;object-fit:contain;transition:all .2s ease;width:100%}.banner-ranking .banner-ranking-img-container .banner-ranking-img:hover:not(.passed,.lock){filter:brightness(1.2);transform:scale(1.05)}.banner-ranking .banner-ranking-img-container .banner-ranking-img.lock,.banner-ranking .banner-ranking-img-container .banner-ranking-img.passed{filter:brightness(.6)}.banner-ranking .banner-ranking-img-container .base-tag{bottom:5%;position:absolute;right:5%;z-index:1}.banner-ranking .banner-ranking-img-container .descritpion-status{align-items:center;animation:status-slide-up .5s ease-out .6s both;background:linear-gradient(180deg,var(--secondary-theme-color) 0,var(--primary-theme-color) 100%);bottom:0;display:flex;justify-content:center;left:0;min-height:33%;padding:8px 0;position:absolute;transition:all .2s ease;width:100%}.banner-ranking .stauts-banner{align-items:center;animation:status-banner .2s ease .8s both;border-radius:50%;display:flex;height:40px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .2s ease;width:40px}.banner-ranking .stauts-banner:hover{transform:translate(-50%,-50%) scale(1.2)}.banner-ranking .stauts-banner.passed{background-color:#35a328;box-shadow:0 0 10.5px 2px #35a328}.banner-ranking .stauts-banner.passed:hover{box-shadow:0 0 20px 4px #35a328}.banner-ranking .stauts-banner.lock{background-color:#f62a00;box-shadow:0 0 10.5px 2px #f62a00}.banner-ranking .stauts-banner.lock:hover{box-shadow:0 0 20px 4px #f62a00}.banner-ranking .stauts-banner svg{transition:all .2s ease}.banner-ranking .stauts-banner svg:hover{transform:rotate(1turn)}.banner-ranking .stauts-banner svg path{stroke:#fff}@keyframes banner-entrance{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes title-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes icon-bounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{transform:scale(1.2) rotate(0)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes container-scale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes status-slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes status-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes light-sweep{0%{left:-100%}to{left:150%}}
