html[lang=ko] {
    word-break: keep-all;
    font-family: RixSGo, sans-serif
}

@-webkit-keyframes fade-in {
    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    100% {
        opacity: 1
    }
}

@-webkit-keyframes reveal-down {
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes reveal-down {
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes reveal-up {
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes reveal-up {
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes mask-reveal-from-right {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@keyframes mask-reveal-from-right {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@-webkit-keyframes mask-hide-to-left {
    100% {
        -webkit-clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
        clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%)
    }
}

@keyframes mask-hide-to-left {
    100% {
        -webkit-clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
        clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%)
    }
}

@-webkit-keyframes mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@keyframes mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@-webkit-keyframes hero-mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px))
    }
}

@keyframes hero-mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px))
    }
}

@-webkit-keyframes page-header-mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%)
    }
}

@keyframes page-header-mask-reveal-from-top {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%)
    }
}

@-webkit-keyframes scale-down {
    100% {
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes scale-down {
    100% {
        transform: scaleY(1);
        opacity: 1
    }
}

@-webkit-keyframes watercolour-reveal {
    0% {
        opacity: 1;
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }

    100% {
        opacity: 1;
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }
}

@keyframes watercolour-reveal {
    0% {
        opacity: 1;
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }

    100% {
        opacity: 1;
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }
}

@-webkit-keyframes letter-spacing-reveal {
    100% {
        opacity: 1;
        letter-spacing: -.03em
    }
}

@keyframes letter-spacing-reveal {
    100% {
        opacity: 1;
        letter-spacing: -.03em
    }
}

.content-gutter {
    padding-left: 20px;
    padding-right: 20px
}

@media screen and (min-width:550px) {
    .content-gutter {
        padding-left: 40px;
        padding-right: 40px
    }
}

.content-gutter--large {
    padding-left: 20px;
    padding-right: 20px
}

@media screen and (min-width:960px) {
    .content-gutter--large {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media screen and (min-width:1280px) {
    .content-gutter--large {
        padding-left: 80px;
        padding-right: 80px
    }
}

@-webkit-keyframes rotate {
    to {
        --angle: 270deg
    }
}

@keyframes rotate {
    to {
        --angle: 270deg
    }
}

.is-vhidden {
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important
}


@media screen and (min-width:960px) {
    .main {
        min-height: 25rem
    }
}

body:has(.showLatestNews) {
    background-color: #dbd9d6
}

[data-riotbar-link-id=login]:not(.riotbar-mobile-menu-link) {
    background: #d1363a;
    border-radius: 1.6rem !important;
    padding: .6rem 1.4rem !important;
    min-height: unset;
    height: unset !important;
    font-size: 12px !important;
    line-height: normal !important;
    margin-top: 18px !important;
    margin-bottom: 20px !important;
    transition: background .2s ease-out
}

[data-riotbar-link-id=login]:not(.riotbar-mobile-menu-link):hover {
    background: #da5e61
}

@media screen and (min-width:550px) and (max-width:959px) {
    @supports ((-o-object-fit:cover) or (object-fit:cover)) {
        .text-with-image__image .responsive-media {
            min-height: 500px;
            padding-bottom: 0 !important
        }

        .text-with-image__image img {
            -o-object-fit: cover;
            object-fit: cover;
            width: 100%;
            height: 100%
        }
    }
}

@-webkit-keyframes link-underline-mask {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
        clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%)
    }
}

@keyframes link-underline-mask {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
        clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%)
    }
}

@-webkit-keyframes link-underline-mask-hover {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@keyframes link-underline-mask-hover {
    0.1% {
        opacity: 1
    }

    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

[class*=widget__wrapper--cardgrid]:last-child {
    margin-bottom: 40px
}

@media screen and (min-width:550px) {
    [class*=widget__wrapper--cardgrid]:last-child {
        margin-bottom: 50px
    }
}

@media screen and (min-width:1600px) {
    [class*=widget__wrapper--cardgrid]:last-child {
        margin-bottom: 80px
    }
}

@-webkit-keyframes slide-button__progress {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes slide-button__progress {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes fade-in {
    0% {
        background-color: #000
    }

    100% {
        background-color: rgba(0, 0, 0, .6)
    }
}

@keyframes fade-in {
    0% {
        background-color: #000
    }

    100% {
        background-color: rgba(0, 0, 0, .6)
    }
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .button-standard:not(.button-standard--lightHoverEffect)::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
        background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
    }

    .button-standard:not(.button-standard--lightHoverEffect):active::after {
        background-color: #fff
    }
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .button-standard--lightHoverEffect::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, rgba(10, 10, 10, .8), rgba(10, 10, 10, .4));
        background: conic-gradient(from var(--angle), rgba(10, 10, 10, .8), rgba(10, 10, 10, .3), #0a0a0a)
    }

    .button-standard--lightHoverEffect:active::after {
        background-color: #0a0a0a
    }
}

@-webkit-keyframes black-button-hover {
    0% {
        background-color: rgba(128, 128, 128, .2)
    }

    50% {
        background-color: rgba(128, 128, 128, .4)
    }

    100% {
        background-color: rgba(128, 128, 128, .3)
    }
}

@keyframes black-button-hover {
    0% {
        background-color: rgba(128, 128, 128, .2)
    }

    50% {
        background-color: rgba(128, 128, 128, .4)
    }

    100% {
        background-color: rgba(128, 128, 128, .3)
    }
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .careers__jobs__count::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, rgba(10, 10, 10, .8), rgba(10, 10, 10, .4));
        background: conic-gradient(from var(--angle), rgba(10, 10, 10, .8), rgba(10, 10, 10, .3), #0a0a0a)
    }

    .careers__jobs__count:active::after {
        background-color: #0a0a0a
    }
}

@-webkit-keyframes bg-fade-in {
    0% {
        background-color: rgba(173, 172, 170, .2)
    }

    50% {
        background-color: rgba(128, 128, 128, .4)
    }

    100% {
        background-color: rgba(128, 128, 128, .3)
    }
}

@keyframes bg-fade-in {
    0% {
        background-color: rgba(173, 172, 170, .2)
    }

    50% {
        background-color: rgba(128, 128, 128, .4)
    }

    100% {
        background-color: rgba(128, 128, 128, .3)
    }
}


.content-showcase__embla {
    max-width: 100vw;
    margin: auto;
    padding: 0 1.25rem
}

.content-showcase__embla__viewport {
    overflow: hidden
}

.content-showcase__embla__container {
    display: -ms-flexbox;
    display: flex;
    -ms-touch-action: pan-y pinch-zoom;
    touch-action: pan-y pinch-zoom;
    margin-left: 20px
}

@media screen and (min-width:1440px) {
    .content-showcase__embla__container {
        margin-left: 0
    }
}

.content-showcase__header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (min-width:960px) {
    .content-showcase__header {
        margin-bottom: 3.75rem
    }
}

.embla {
    max-width: 99vw;
    width: 100%;
    margin: auto;
    --slide-height: 42rem;
    --slide-spacing: 3rem;
    --slide-size: 70%
}

@media screen and (min-width:550px) {
    .embla {
        --slide-size: 50%
    }
}

@media screen and (min-width:960px) {
    .embla {
        --slide-size: 25%
    }
}

@media screen and (max-width:959px) {
    .embla {
        --slide-size: 30%
    }
}

@media screen and (max-width:576px) {
    .embla {
        --slide-size: 50%
    }
}

@media screen and (min-width:1440px) {
    .embla {
        --slide-size: 20%
    }
}

@media screen and (min-width:1920px) {
    .embla {
        --slide-size: 14%
    }
}

.embla__viewport {
    overflow: hidden
}

.embla__container {
    display: -ms-flexbox;
    display: flex;
    -ms-touch-action: pan-y pinch-zoom;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1)
}

.embla__slide {
    transform: translate3d(0, 0, 0);
    -ms-flex: 0 0 var(--slide-size);
    flex: 0 0 var(--slide-size);
    min-width: 0;
    padding-left: 30px;
}

.embla__slide__container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: auto;
    aspect-ratio: 387/650;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
    background: grey;
    margin: 0 -3rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.embla__slide__container:active,
.embla__slide__container:focus,
.embla__slide__container:hover {
    outline: 0;
    text-decoration: none;
    transition: all .2s ease-out
}

.embla__slide__container:active {
    transition: all .2s ease-out
}

.embla__slide__container:focus-visible::after {
    opacity: 1
}

.embla__slide__container:active::after {
    opacity: 0
}

.embla__slide__container::after {
    content: '';
    border: 2px solid rgba(249, 249, 249, .4);
    border-radius: 12px;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    padding: 2px;
    color: #f9f9f9;
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .1s ease-out;
    z-index: 4;
    border: 2px solid rgba(249, 249, 249, .4)
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .embla__slide__container::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
        background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
    }

    .embla__slide__container:active::after {
        background-color: #fff
    }
}

.embla__slide__container:active .content-showcase__main__slide__content:before,
.embla__slide__container:focus-visible .content-showcase__main__slide__content:before,
.embla__slide__container:focus-within .content-showcase__main__slide__content:before,
.embla__slide__container:hover .content-showcase__main__slide__content:before {
    background-color: rgba(0, 0, 0, .1)
}

.content-showcase__main__slide__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.content-showcase__main__slide__content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);
    z-index: 1;
    transition: background-color .3s ease-in-out
}

.content-showcase__main__slide__logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin: 30px auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -ms-transform: translateX(30px);
    transform: translateX(30px)
}

.content-showcase__main__slide__logo img {
    max-width: 50%;
    max-height: 50%;
    -o-object-fit: contain;
    object-fit: contain;
    -ms-transform: scaleY(1);
    transform: scaleY(1)
}

.content-showcase__main__slide__bkg-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -ms-transform-origin: center;
    transform-origin: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: rotate(5deg) scale(1.4);
}

.content-showcase__main__slide__platforms {
    position: absolute;
    bottom: 7px;
    right: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -moz-column-gap: 8px;
    column-gap: 8px;
    z-index: 2;
    padding: .25rem 0
}

.content-showcase__main__slide__platforms .icon,
.content-showcase__main__slide__platforms .icon svg {
    width: auto !important;
    height: 21px !important;
    line-height: 21px !important;
    display: -ms-flexbox;
    display: flex
}

.content-showcase__main__slide__platforms__coming-soon {
    font-size: .875rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: .25rem 1rem;
    background-color: rgba(138, 136, 135, .5);
    border-radius: 20px;
    letter-spacing: .05rem
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .content-showcase__secondary__slide::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
        background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
    }

    .content-showcase__secondary__slide:active::after {
        background-color: #fff
    }
}

@-moz-document url-prefix() {
    .custom-select {
        overflow: hidden
    }

    .custom-select select:focus {
        box-shadow: none !important
    }
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .game-card__link::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
        background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
    }

    .game-card__link:active::after {
        background-color: #fff
    }
}

.games {
    position: relative;
    background-color: #141212
}

.games__content {
    position: relative;
    background-color: #141212;
    display: -ms-flexbox;
    display: flex;
    max-width: 3600px;
    margin: 0 auto;
    -ms-flex-pack: center;
    justify-content: center
}

@-webkit-keyframes reveal-content {
    0% {
        height: 0;
        width: 0;
        opacity: 0
    }

    49.9% {
        height: 0;
        width: 0;
        opacity: 0
    }

    50% {
        height: auto;
        width: auto;
        opacity: 0
    }

    100% {
        height: auto;
        width: auto;
        opacity: 1
    }
}

@keyframes reveal-content {
    0% {
        height: 0;
        width: 0;
        opacity: 0
    }

    49.9% {
        height: 0;
        width: 0;
        opacity: 0
    }

    50% {
        height: auto;
        width: auto;
        opacity: 0
    }

    100% {
        height: auto;
        width: auto;
        opacity: 1
    }
}



@-webkit-keyframes manifesto-reveal-ctabutton {
    0% {
        opacity: 0
    }

    49.9% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes manifesto-reveal-ctabutton {
    0% {
        opacity: 0
    }

    49.9% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes manifesto-reveal-content {
    0% {
        max-height: 0
    }

    49.9% {
        max-height: 0
    }

    50% {
        max-height: none
    }

    100% {
        max-height: none
    }
}

@keyframes manifesto-reveal-content {
    0% {
        max-height: 0
    }

    49.9% {
        max-height: 0
    }

    50% {
        max-height: none
    }

    100% {
        max-height: none
    }
}

@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .1)
    }

    100% {
        box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0)
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .1)
    }

    100% {
        box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0)
    }
}

@-webkit-keyframes slide-in {
    0% {
        visibility: hidden;
        transform: translateY(-40%);
        opacity: 0
    }

    100% {
        visibility: visible;
        transform: translateY(-50%);
        opacity: 1
    }
}

@keyframes slide-in {
    0% {
        visibility: hidden;
        transform: translateY(-40%);
        opacity: 0
    }

    100% {
        visibility: visible;
        transform: translateY(-50%);
        opacity: 1
    }
}

@-webkit-keyframes progress-fill {
    0% {
        stroke-dashoffset: 83px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes progress-fill {
    0% {
        stroke-dashoffset: 83px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes smoke-billow-1 {
    25% {
        transform: translate(10%, 0)
    }

    75% {
        transform: translate(-10%, 0)
    }
}

@keyframes smoke-billow-1 {
    25% {
        transform: translate(10%, 0)
    }

    75% {
        transform: translate(-10%, 0)
    }
}

@-webkit-keyframes smoke-billow-2 {
    25% {
        transform: translate(-10%, 0)
    }

    75% {
        transform: translate(10%, 0)
    }
}

@keyframes smoke-billow-2 {
    25% {
        transform: translate(-10%, 0)
    }

    75% {
        transform: translate(10%, 0)
    }
}

@-webkit-keyframes smoke-billow-3 {
    25% {
        transform: translate(0, -2%)
    }

    75% {
        transform: translate(5%, 2%)
    }
}

@keyframes smoke-billow-3 {
    25% {
        transform: translate(0, -2%)
    }

    75% {
        transform: translate(5%, 2%)
    }
}

@-webkit-keyframes smoke-billow-4 {
    25% {
        transform: translate(-2%, 2%)
    }

    75% {
        transform: translate(5%, -3%)
    }
}

@keyframes smoke-billow-4 {
    25% {
        transform: translate(-2%, 2%)
    }

    75% {
        transform: translate(5%, -3%)
    }
}

@-webkit-keyframes status-update-highlight {

    0%,
    75% {
        background-color: #403f3e
    }

    100% {
        background-color: transparent
    }
}

@keyframes status-update-highlight {

    0%,
    75% {
        background-color: #403f3e
    }

    100% {
        background-color: transparent
    }
}

@-webkit-keyframes tab-content-reveal {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes tab-content-reveal {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .themed-icon-button::after {
        border: 0;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --angle: -90deg;
        -webkit-animation: 8s rotate linear infinite;
        animation: 8s rotate linear infinite;
        background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
        background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
    }

    .themed-icon-button:active::after {
        background-color: #fff
    }
}

@-webkit-keyframes sequential-fade-in {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes sequential-fade-in {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@supports (grid-auto-flow:row) {
    .timeline-bar {
        width: auto !important;
        margin-left: 0 !important;
        margin-bottom: 0;
        float: none;
        clear: none
    }
}

@supports (grid-auto-flow:row) {
    .timeline-group__items {
        display: grid;
        grid-auto-flow: row dense;
        grid-gap: 10px 40px
    }

    .timeline-group__items:after,
    .timeline-group__items:before {
        content: none
    }
}

@-webkit-keyframes timer-icon-fill {
    0% {
        stroke-dashoffset: 105px;
        opacity: 0
    }

    5% {
        opacity: 1
    }

    95% {
        opacity: 1
    }

    100% {
        opacity: 0;
        stroke-dashoffset: 0
    }
}

@keyframes timer-icon-fill {
    0% {
        stroke-dashoffset: 105px;
        opacity: 0
    }

    5% {
        opacity: 1
    }

    95% {
        opacity: 1
    }

    100% {
        opacity: 0;
        stroke-dashoffset: 0
    }
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .theme-ruination .superhero-feature__heading {
        background-image: url(/assets/img/content/theme/ruination/7790a9f6c901256c753bad1547f86f31/button-bg.jpg);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
        filter: drop-shadow(1px 2px 0 #a38e40) drop-shadow(0 0 10px #0d1819) drop-shadow(0 0 20px #0d1819)
    }
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .theme-sentinels .superhero-feature__heading {
        background-image: url(/assets/img/content/theme/sentinels/6414975d90fb81232ff1efeb60ff287a/texture.jpg);
        background-size: 50% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none
    }
}

.embla__container {
  display: flex;
  gap: 12px;
  padding: 10px;
}

.embla__slide__container_img{
    width: 100%;
    height: auto
}

.embla-background{
    background: url("/assets/image/home/Page_06_new.jpg");
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
}