@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-family: Pretendard-Bold;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Black';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-family: Pretendard-black;
    font-style: normal;
}

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll !important;
}

html::-webkit-scrollbar {
    width: 0;
}

html::-webkit-scrollbar-thumb {
    width: 0;
}

div::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
    background-color: #323232;
}

div::-webkit-scrollbar-thumb {
    width: 8px;
    border-radius: 4px;
    border: solid 1px #323232;
    background-color: #111111;
}

body {
    height: 100%;
    padding-right: 0 !important;
    text-align: center;
    background-color: #0a0a0a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: "Pretendard-Light", sans-serif;
}

body.active {
    overflow: hidden;
}

button, a, input, select, textarea {
    outline: none !important;
    transition: 0.3s;
}

button { padding: 0; white-space: nowrap; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: #98a7b5; text-decoration: none; position:relative; }

a:hover { color: #ffffff; text-decoration: none; }

img { pointer-events: none; }

tr { cursor: pointer; }

.w-b, .w-a, .w-ba {
    position: relative;
    z-index: 1;
}

.w-b:before, 
.w-a:after,
.w-ba:before, 
.w-ba:after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: 0.3s;
}

.text-yellow { color: #fff373 !important; }
.text-gray { color: #cccccc !important; }
.font-light { font-family: Pretendard-Light; }
.font-bold { font-family: Pretendard-Bold; }
.font-black { font-family: Pretendard-Black; }

.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#47e9f1, #47e9f1, #596dec, #596dec);
    background-size: 100% 100%;
}

.dflex-ac-jc {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dflex-ac-js {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.dflex-acs-jc {
    display: flex !important;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.bs-ul,
.bs-ul-df {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: table;
    padding: 0;
}

.bs-ul-df {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.bs-ul li,
.bs-ul-df li {
    list-style: none;
    width: auto;
    height: auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.bs-ul-df li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    position: relative;
    max-width: 1430px;
}


/* Button Styles */

.btn-orange {
    color: #ffffff;
    font-size: 16px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #ec2414;
    background-image: linear-gradient(#ff6c26, #ec2414);
    border: solid 1px #ff512f;
}

.btn-orange:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    transition: 0.3s;
    background-image: linear-gradient(#ffce1a, #d16b11);
    opacity: 0;
}

@media(min-width: 921px){
    .btn-orange:hover:before {
        opacity: 1.0;
    }

    .btn-orange:hover {
        border-color: #c98b00;
        color: #000000;
    }
}


/* Wrapper */

.wrapper {
    width: 100%;
    min-height: 100%;
    min-width: 360px;
    position: relative;
    overflow: hidden;
    padding: 0 0 140px;
    transition: 0.3s;
}

.wrapper:before,
.wrapper:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}

.wrapper:before {
    background-image: url(../img/bg/space-bg.png);
    background-position: top center;
    transform-origin: top center;
    animation: spaceBgAnim 16s ease infinite;
}

@keyframes spaceBgAnim {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

.wrapper:after {
    top: -100%;
    border-radius: 50%;
    box-shadow: 0 0 300px rgba(226, 59, 26, 1.0), 0 0 200px rgba(226, 59, 26, 0.75);
    z-index: 5;
}

@media(min-width: 1921px) {
    .wrapper:before {
        background-size: cover;
    }
}


/* Header Section */

.header-section {
    width: 100%;
    height: 105px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    position: relative;
    z-index: 100;
}

.header-section:before {
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -4px;
    background-image: linear-gradient(to right, rgba(252, 133, 27, 0), rgba(252, 133, 27, 0.5), rgba(252, 133, 27, 0));
}


/* Logo */

.logo {
    width: 206px;
    display: inline-block;
    position: relative;
}

.logo img, .logo div {
    position: absolute;
    bottom: 0;
}

.logo .logo-img,
.logo div .d-img {
    width: 100%;
    position: relative;
}

.logo .logo-img {
    opacity: 0;
}

.logo .x {
    width: 28.65%;
    left: 0;
    animation: lgX 7s ease infinite;
}

@keyframes lgX {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
    }
    15% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
    95% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }
}

.logo .solution {
    width: 71.36%;
    right: 0;
    bottom: 26%;
}

.logo .solution .d-img {
    opacity: 0;
}

.logo .s {
    width: 15.65%;
    left: 0;
    animation: lgS 7s ease infinite;
}

@keyframes lgS {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    5% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    15% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .o {
    width: 14.29%;
    left: 17.25%;
    bottom: 3%;
    animation: lgO 7s ease infinite;
}

@keyframes lgO {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    7% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    17% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .l {
    width: 3.41%;
    left: 33.75%;
    bottom: 3%;
    animation: lgL 7s ease infinite;
}

@keyframes lgL {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    9% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    19% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .u {
    width: 13.61%;
    left: 39.5%;
    bottom: 3%;
    animation: lgU 7s ease infinite;
}

@keyframes lgU {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    11% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    21% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .t {
    width: 9.53%;
    right: 36.25%;
    bottom: 3%;
    animation: lgT 7s ease infinite;
}

@keyframes lgT {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    13% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    23% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .i {
    width: 4.09%;
    right: 31.5%;
    bottom: 3%;
    animation: lgI 7s ease infinite;
}

@keyframes lgI {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    15% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    25% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .o2 {
    width: 14.29%;
    right: 15.25%;
    bottom: 3%;
    animation: lgO2 7s ease infinite;
}

@keyframes lgO2 {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    17% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    27% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}

.logo .n {
    width: 12.93%;
    right: 0;
    bottom: 2%;
    animation: lgN 7s ease infinite;
}

@keyframes lgN {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    19% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
    }
    29% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* Page Content */

.page-content {
    width: 100%;
    position: relative;
    z-index: 10;
}

.page-content .container {
    z-index: 5;
}

.main-page, .sub-page {
    display: none;
}

.main-page.active, .sub-page.active {
    display: block;
}

.main-page {
    padding: 45px 0 65px;
}

.page-title {
    font-size: 30px;
    width: 100%;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    margin: 0 0 25px;
    transition: 0.3s;
    animation: pageTitle 0.8s ease 1 backwards;
}

@keyframes pageTitle {
    0% { 
        opacity: 0;
        transform: translateY(-100%);
    }
    100% { 
        opacity: 1.0;
        transform: translateY(0);
    }
}

.category-wrap {
    width: 100%;
}

.category-btn {
    width: calc(25% - 30px);
    max-width: 200px;
    margin: 0 15px;
    color: #ffffff;
}

.category-btn .btn-wrap {
    width: 100%;
    border-radius: 100px;
    transition: 0.3s;
    padding: 0 0 55px;
}

.category-btn:hover .btn-wrap {
    transform: translateY(-10px);
    background-color: #444444;
}

.category-btn .btn-wrap:before,
.category-btn .btn-wrap:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 100px;
    background-image: linear-gradient(rgba(85, 85, 85, 1.0), rgba(51, 51, 51, 0.25));
    backdrop-filter: blur(5px);
    
}

.category-btn .btn-wrap:before {
    animation: cBtnWrap 1s ease 0.5s 1 backwards;
}

@keyframes cBtnWrap {
    0% { 
        opacity: 0;
        height: 50%;
    }
    100% { 
        opacity: 1.0;
        height: 100%;
    }
}

.category-btn:hover .btn-wrap:before {
    opacity: 0;
}

.category-btn .btn-wrap:after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4), #444444);
    opacity: 0;
}

.category-btn:hover .btn-wrap:after {
    opacity: 1.0;
}

.category-btn .c-panel {
    width: 100%;
    padding: 10px;
    border-radius: 50%;
    background-color: #333333;
    animation: cPanel 1.5s ease 1 forwards;
}

@keyframes cPanel {
    0% {
        opacity: 0;
        transform: rotate(-360deg);
    }
    90% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
}

.category-btn .c-panel:before,
.category-btn .c-panel:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: solid 10px rgba(255, 255, 255, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.category-btn .c-panel:before {
    border: none;
    box-shadow: none;
    background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50.01%, rgba(255, 255, 255, 0) 100%);
}

.category-btn:hover .c-panel:before {
    transition: 0.5s;
    transform: rotate(180deg);
}

.category-btn:hover .c-panel:after {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    left: -10px;
    top: -10px;
    border-color: #555555;
    border-width: 8px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.25);
}

.category-btn .c-img {
    width: 100%;
}

.category-btn:hover .c-img {
    animation: catImgAnim 1.5s linear infinite;
}

@keyframes catImgAnim {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

.category-btn .img-panel {
    width: 100%;
    border-radius: 50%;
    background-image: linear-gradient(to bottom left, #003eaf, #2893d0);
}

.category-btn.slot-link .img-panel {
    /*background-image: linear-gradient(to bottom left, #874e05, #ddb336);*/
    background-image: linear-gradient(to bottom left, #6f1490, #d738d2);
}

.category-btn.sports-link .img-panel {
    background-image: linear-gradient(to bottom left, #134913, #72a53c);
}

.category-btn.minigames-link .img-panel {
    background-image: linear-gradient(to bottom left, #320e68, #7d3ed7);
}

.category-btn .img-panel:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: 0;
    top: 0;
    border: solid 1px rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.4);
}

.category-btn .c-info {
    width: 100%;
    margin: 15px 0 0;
}

.category-btn .c-info {
    animation: cInfo 0.8s ease 1.5s 1 backwards;
}

@keyframes cInfo {
    0% { 
        opacity: 0;
        transform: scale(0.5);
    }
    100% { 
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.category-btn .c-info .kr-text,
.category-btn .c-info .en-text {
    width: 100%;
    display: inline-block;
    font-size: 22px;
}

.category-btn .c-info .en-text {
    color: #999999;
    font-size: 11px;
    letter-spacing: 2px;
}

.category-btn .c-tag {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    border-radius: 100px;
    left: 0;
    top: 0;
    animation: cTag 0.8s ease 1.3s 1 backwards;
}

@keyframes cTag {
    0% { 
        height: 63%;
    }
    100% { 
        height: 100%;
    }
}

.category-btn .c-tag div {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    padding: 4px 0 0;
}

.category-btn .c-tag div:before {
    width: 100%;
    height: 200%;
    border-radius: 50%;
    background-color: #111111;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
    top: 0;
    left: 0;
}

.category-btn .c-tag img {
    width: 22px;
    opacity: 0.5;
    transition: 0.3s;
}

.category-btn:hover .c-tag img {
    transform: rotate(90deg);
    opacity: 1.0;
}

.category-btn .hover {
    width: 117%;
    left: -8.5%;
    bottom: 40%;
    position: absolute;
    z-index: 5;
    transition: 0.3s;
    filter: brightness(125%);
    opacity: 0;
}

.category-btn:hover .hover {
    bottom: 15%;
    opacity: 1.0;
    filter: drop-shadow(0 0 5px rgba(253, 64, 27, 1.0));
}


/* Page Badge */

.page-badge {
    margin: 40px 0 0;
    font-size: 24px;
    white-space: nowrap;
    padding: 1.78% 5.9%;
    transition: 0.3s;
    animation: pageBadge 0.8s ease 1 backwards;
}

@keyframes pageBadge {
    0% { 
        opacity: 0;
        transform: translateY(100%);
    }
    100% { 
        opacity: 1.0;
        transform: translateY(0);
    }
}

.page-badge:before,
.page-badge:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: solid 1px rgba(255, 108, 19, 0.15);
    border-radius: 50px;
}

.page-badge:before {
    animation: badgeBorder02 1s ease infinite;
}

@keyframes badgeBorder02 {
    0% {
        border-color: rgba(255, 108, 19, 0.15);
        background-color: rgba(196, 32, 0, 0);
    }
    25% {
        border-color: rgba(255, 108, 19, 0.15);
        background-color: rgba(196, 32, 0, 0);
    }
    75% {
        border-color: rgba(255, 108, 19, 0.15);
        background-color: rgba(196, 32, 0, 0.25);
    }
    100% {
        border-color: rgba(255, 108, 19, 0.15);
        background-color: rgba(196, 32, 0, 0);
    }
}

.page-badge:after {
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    right: 0;
    bottom: 0;
    margin: auto;
    border-color: rgba(255, 108, 19, 0.30);
    animation: badgeBorder01 1s ease infinite;
}

@keyframes badgeBorder01 {
    0% {
        border-color: rgba(255, 108, 19, 0.30);
        background-color: rgba(196, 32, 0, 0);
    }
    50% {
        border-color: rgba(255, 108, 19, 0.50);
        background-color: rgba(196, 32, 0, 0.25);
    }
    100% {
        border-color: rgba(255, 108, 19, 0.30);
        background-color: rgba(196, 32, 0, 0);
    }
}

.page-badge .bg {
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50px;
    position: absolute;
    background-image: linear-gradient(#ff512f, #ec2414);
    border: solid 1px #c42000;
    z-index: 2;
}

.page-badge .bg:before {
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    background-image: linear-gradient(to right, rgba(255, 131, 93, 0), rgba(255, 131, 93, 1.0), rgba(255, 131, 93, 0));
}

.page-badge .text {
    position: relative;
    z-index: 5;
}

.page-badge .text .title {
    animation: badgeTitle 1s ease infinite;
}

@keyframes badgeTitle {
    0% { color: #fff373; text-shadow: 0 1px 0 rgba(255, 255, 255, 0) }
    50% { color: #570000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) }
    100% { color: #fff373; text-shadow: 0 1px 0 rgba(255, 255, 255, 0) }
}


/* Visual Wrap */

.visual-wrap {
    width: 100%;
    height: 100%;
    max-height: 618px;
    position: absolute;
    left: 0;
    top: 0;
}

.visual-wrap:after {
    width: 100%;
    height: 394px;
    left: 0;
    bottom: -381px;
    background-image: url(../img/bg/floor-bg.png);
    background-repeat: repeat-x;
    background-position: top center;
}

.visual-wrap img,
.visual-wrap div {
    position: absolute;
    bottom: 0;
}

.visual-wrap img {
    z-index: 15;
}

.visual-wrap div .d-img {
    width: 100%;
    position: relative;
    z-index: 5;
}

.visual-panel {
    width: 35.84%;
    max-width: 688px;
}

.visual-panel.left {
    left: 0;
}

.visual-panel.right {
    right: 0;
}

.visual-panel .backstage {
    z-index: 10;
}

.visual-panel.left .backstage {
    animation: backstageLeft 2s ease 1 backwards;
}

@keyframes backstageLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1.0;
        transform: translateX(0);
    }
}

.visual-panel.right .backstage {
    transform: rotateY(180deg);
    animation: backstageRight 2s ease 1 backwards;
}

@keyframes backstageRight {
    0% {
        opacity: 0;
        transform: translateX(100%) rotateY(180deg);
    }
    100% {
        opacity: 1.0;
        transform: translateX(0) rotateY(180deg);
    }
}


/* Visual Left */

.visual-panel .soccer {
    width: 47.97%;
    max-width: 330px;
    left: -14%;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    animation: visualMainChar 1.5s ease 1.5s 1 backwards;
}

@keyframes visualMainChar {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    100% {
        opacity: 1.0;
        transform: translateY(0);
    }
}

.visual-panel .soccer .d-img {
    z-index: 20;
}

.visual-panel .soccer .stars {
    width: 111.52%;
    max-width: 368px;
    left: -41%;
    top: 5.25%;
    animation: vStarAnim 3s ease infinite;
}

@keyframes vStarAnim{
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(20deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.visual-panel .slotmachine {
    width: 71.52%;
    max-width: 492px;
    left: -0.5%;
    bottom: -8.5%;
    transform-origin: botto center;
    animation: visualSlotmachine 0.8s ease 2.2s 1 backwards;
}

@keyframes visualSlotmachine {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.visual-panel .goonz {
    width: 47.1%;
    max-width: 324px;
    left: 4.25%;
    bottom: -20%;
    animation: visualLeftChar 1s ease 2s 1 backwards;
}

@keyframes visualLeftChar {
    0% {
        opacity: 0;
        transform: translateX(25%);
    }
    100% {
        opacity: 1.0;
        transform: translateX(0);
    }
}

.visual-panel .spaceman {
    width: 44.77%;
    max-width: 308px;
    right: 18.75%;
    bottom: -31.25%;
    z-index: 15;
    animation: visualRightChar 1s ease 2s 1 backwards;
}

@keyframes visualRightChar {
    0% {
        opacity: 0;
        transform: translateX(-25%);
    }
    100% {
        opacity: 1.0;
        transform: translateX(0);
    }
}

.visual-panel .spaceman .d-img {
    z-index: 20;
}

.visual-panel .gem {
    width: 67.86%;
    right: -24.75%;
    bottom: 13%;
}

.visual-panel .gem .spark {
    width: 44.98%;
    right: 7%;
    top: -3%;
    z-index: 20;
    animation: sparkAnim 1s ease infinite;
}

@keyframes sparkAnim {
    0% { opacity: 0.5; }
    50% { opacity: 1.0; }
    100% { opacity: 0.5; }
}


/* Visual Right */

.visual-panel .dealer {
    width: 70.5%;
    max-width: 485px;
    left: 0;
    right: -10.75%;
    margin: 0 auto;
    z-index: 1;
    animation: visualMainChar 1.5s ease 1.5s 1 backwards;
}

.visual-panel .dealer .d-img {
    z-index: 20;
}

.visual-panel .dealer .monitor {
    width: 61.86%;
    max-width: 300px;
    right: -8.25%;
    top: 4.5%;
    animation: monitorAnim 1.5s ease infinite;
}

@keyframes monitorAnim {
    0% {
        filter: brightness(100%);
    }
    15% {
        filter: brightness(150%);
    }
    30% {
        filter: brightness(100%);
    }
    45% {
        filter: brightness(150%);
    }
    60% {
        filter: brightness(100%);
    }
    100% {
        filter: brightness(100%);
    }
}

.visual-panel .baseball {
    width: 62.5%;
    right: 0;
    bottom: -22%;
    z-index: 10;
    animation: visualRightChar 1s ease 2s 1 backwards;
}

.visual-panel .baseball .ball {
    width: 10.7%;
    right: 5%;
    top: 10%;
    animation: vBallAnim 2s linear infinite;
}

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

.visual-panel .slotman {
    width: 58.14%;
    left: 7%;
    bottom: -29%;
    animation: visualLeftChar 1s ease 2s 1 backwards;
}


/* Board Section */

.board-section {
    width: 100%;
    margin: 40px 0 0;
    position: relative;
    z-index: 15;
    display: none;
}

.board-section.active {
    display: block;
}

.board-wrap {
    width: 100%;
    max-width: 1266px;
    margin: 0 auto;
    padding: 2px 34px;
    position: relative;
    animation: boardAnim 1s ease 0.5s 1 backwards;
}

@keyframes boardAnim {
    0% { 
        opacity: 0;
        transform: translateY(50%);
    }
    100% { 
        opacity: 1.0;
        transform: translateY(0);
    }
}

.board-wrap br {
    display: none;
}

.board-wrap .side-bg {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
}

.board-wrap .side-bg.left {
    left: 0;
}

.board-wrap .side-bg.right {
    right: 0;
}

.board-wrap .side-bg:before,
.board-wrap .side-bg:after {
    width: 100%;
    height: 100%;
    left: 30px;
    top: 0;
    border-radius: 80px;
    box-shadow: -30px 0 0 rgba(168, 50, 27, 0.4);
}

.board-wrap .side-bg:after {
    box-shadow: -15px 0 0 rgba(168, 50, 27, 1.0);
}

.board-wrap .side-bg.right:before {
    left: auto;
    right: 30px;
    box-shadow: 30px 0 0 rgba(168, 50, 27, 0.4);
}

.board-wrap .side-bg.right:after {
    left: auto;
    right: 30px;
    box-shadow: 15px 0 0 rgba(168, 50, 27, 1.0);
}

.board-panel {
    width: 100%;
    min-height: 150px;
    background-color: rgba(17, 17, 17, 0.7);
    border-radius: 80px;
    color: #cccccc;
    font-size: 20px;
    padding: 2.25% 2%;
    overflow: hidden;
}

.board-panel:before {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 80px;
    border: solid 1px rgba(246, 87, 18, 0.5);
    border-left-width: 2px;
    border-right-width: 2px;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0));
    z-index: 2;
}

.board-panel p {
    position: relative;
    z-index: 5;
}

.board-panel .bg {
    width: 25%;
    height: calc(100% - 4px);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: rgba(17, 17, 17, 1.0);
    background-image: linear-gradient(to left, rgba(253, 64, 27, 0), rgba(253, 64, 27, 0.1), rgba(253, 64, 27, 0.2));
    z-index: 1;
}

.board-panel .bg.left {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}

.board-panel .bg.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(253, 64, 27, 0), rgba(253, 64, 27, 0.1), rgba(253, 64, 27, 0.2));
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}

.board-panel .bg:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: repeat-y;
    background-position: top left;
    background-image: url(../img/bg/dot-bg.jpg);
    mix-blend-mode: color-burn;
    opacity: 0.5;
}

.board-panel .bg.right:before {
    transform: rotateY(180deg);
}


/* Footer Section */

.footer-section {
    width: 100%;
    height: 90px;
    background-color: #000000;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 2px;
    margin: -90px 0 0;
    position: relative;
    z-index: 10;
}


/*=========================================================== S T A R S ===============================================================*/

 #sky {
     width: 100%;
     height: 100%;
     background-color: black;
     opacity: 0.5;
}
 .star {
     opacity: 0;
     position: absolute;
     background: white;
     box-shadow: 0px 0px 20px 0px #fff;
     border-radius: 100%;
     transform-origin: 0, 0;
     animation-timing-function: linear, linear !important;
     animation-iteration-count: infinite, infinite !important;
     animation-delay: -30s, -30s !important;
     z-index: 1;
}
 .size-1 {
     width: 1px;
     height: 1px;
}
 .size-2 {
     width: 2px;
     height: 2px;
}
 .axis-1 {
     animation: anim0 32836ms, fade1 32836ms;
}
 .axis-2 {
     animation: anim0 33152ms, fade3 33152ms;
}
 .axis-3 {
     animation: anim0 40051ms, fade10 40051ms;
}
 .axis-4 {
     animation: anim4 37185ms, fade7 37185ms;
}
 .axis-5 {
     animation: anim4 10688ms, fade6 10688ms;
}
 .axis-6 {
     animation: anim4 16233ms, fade2 16233ms;
}
 .axis-7 {
     animation: anim4 32282ms, fade8 32282ms;
}
 .axis-8 {
     animation: anim8 38400ms, fade10 38400ms;
}
 .axis-9 {
     animation: anim8 27062ms, fade1 27062ms;
}
 .axis-10 {
     animation: anim8 34117ms, fade3 34117ms;
}
 .axis-11 {
     animation: anim8 30922ms, fade9 30922ms;
}
 .axis-12 {
     animation: anim12 42698ms, fade6 42698ms;
}
 .axis-13 {
     animation: anim12 44703ms, fade3 44703ms;
}
 .axis-14 {
     animation: anim12 21138ms, fade3 21138ms;
}
 .axis-15 {
     animation: anim12 18139ms, fade6 18139ms;
}
 .axis-16 {
     animation: anim16 12690ms, fade9 12690ms;
}
 .axis-17 {
     animation: anim16 44592ms, fade4 44592ms;
}
 .axis-18 {
     animation: anim16 10968ms, fade5 10968ms;
}
 .axis-19 {
     animation: anim16 19302ms, fade7 19302ms;
}
 .axis-20 {
     animation: anim20 43333ms, fade3 43333ms;
}
 .axis-21 {
     animation: anim20 8319ms, fade9 8319ms;
}
 .axis-22 {
     animation: anim20 30115ms, fade5 30115ms;
}
 .axis-23 {
     animation: anim20 18471ms, fade10 18471ms;
}
 .axis-24 {
     animation: anim24 38669ms, fade4 38669ms;
}
 .axis-25 {
     animation: anim24 30336ms, fade9 30336ms;
}
 .axis-26 {
     animation: anim24 8377ms, fade5 8377ms;
}
 .axis-27 {
     animation: anim24 17134ms, fade8 17134ms;
}
 .axis-28 {
     animation: anim28 11803ms, fade5 11803ms;
}
 .axis-29 {
     animation: anim28 10669ms, fade1 10669ms;
}
 .axis-30 {
     animation: anim28 17101ms, fade5 17101ms;
}
 .axis-31 {
     animation: anim28 6573ms, fade4 6573ms;
}
 .axis-32 {
     animation: anim32 16255ms, fade5 16255ms;
}
 .axis-33 {
     animation: anim32 5843ms, fade6 5843ms;
}
 .axis-34 {
     animation: anim32 27187ms, fade10 27187ms;
}
 .axis-35 {
     animation: anim32 22557ms, fade5 22557ms;
}
 .axis-36 {
     animation: anim36 22644ms, fade2 22644ms;
}
 .axis-37 {
     animation: anim36 22585ms, fade10 22585ms;
}
 .axis-38 {
     animation: anim36 7474ms, fade4 7474ms;
}
 .axis-39 {
     animation: anim36 23095ms, fade6 23095ms;
}
 .axis-40 {
     animation: anim40 38866ms, fade5 38866ms;
}
 .axis-41 {
     animation: anim40 42818ms, fade5 42818ms;
}
 .axis-42 {
     animation: anim40 23838ms, fade4 23838ms;
}
 .axis-43 {
     animation: anim40 37272ms, fade8 37272ms;
}
 .axis-44 {
     animation: anim44 44680ms, fade10 44680ms;
}
 .axis-45 {
     animation: anim44 41796ms, fade1 41796ms;
}
 .axis-46 {
     animation: anim44 37304ms, fade10 37304ms;
}
 .axis-47 {
     animation: anim44 26153ms, fade6 26153ms;
}
 .axis-48 {
     animation: anim48 24156ms, fade1 24156ms;
}
 .axis-49 {
     animation: anim48 25109ms, fade8 25109ms;
}
 .axis-50 {
     animation: anim48 6799ms, fade1 6799ms;
}
 .axis-51 {
     animation: anim48 27095ms, fade10 27095ms;
}
 .axis-52 {
     animation: anim52 17548ms, fade3 17548ms;
}
 .axis-53 {
     animation: anim52 33217ms, fade10 33217ms;
}
 .axis-54 {
     animation: anim52 22176ms, fade4 22176ms;
}
 .axis-55 {
     animation: anim52 8756ms, fade5 8756ms;
}
 .axis-56 {
     animation: anim56 39127ms, fade9 39127ms;
}
 .axis-57 {
     animation: anim56 38263ms, fade2 38263ms;
}
 .axis-58 {
     animation: anim56 34349ms, fade9 34349ms;
}
 .axis-59 {
     animation: anim56 6534ms, fade3 6534ms;
}
 .axis-60 {
     animation: anim60 25490ms, fade5 25490ms;
}
 .axis-61 {
     animation: anim60 32060ms, fade5 32060ms;
}
 .axis-62 {
     animation: anim60 38455ms, fade10 38455ms;
}
 .axis-63 {
     animation: anim60 43086ms, fade4 43086ms;
}
 .axis-64 {
     animation: anim64 35435ms, fade8 35435ms;
}
 .axis-65 {
     animation: anim64 44852ms, fade4 44852ms;
}
 .axis-66 {
     animation: anim64 28304ms, fade8 28304ms;
}
 .axis-67 {
     animation: anim64 25976ms, fade8 25976ms;
}
 .axis-68 {
     animation: anim68 15821ms, fade3 15821ms;
}
 .axis-69 {
     animation: anim68 41355ms, fade7 41355ms;
}
 .axis-70 {
     animation: anim68 25157ms, fade1 25157ms;
}
 .axis-71 {
     animation: anim68 26029ms, fade4 26029ms;
}
 .axis-72 {
     animation: anim72 38856ms, fade3 38856ms;
}
 .axis-73 {
     animation: anim72 42905ms, fade10 42905ms;
}
 .axis-74 {
     animation: anim72 26780ms, fade7 26780ms;
}
 .axis-75 {
     animation: anim72 24551ms, fade3 24551ms;
}
 .axis-76 {
     animation: anim76 32161ms, fade4 32161ms;
}
 .axis-77 {
     animation: anim76 35005ms, fade10 35005ms;
}
 .axis-78 {
     animation: anim76 31610ms, fade8 31610ms;
}
 .axis-79 {
     animation: anim76 20053ms, fade3 20053ms;
}
 .axis-80 {
     animation: anim80 19418ms, fade7 19418ms;
}
 .axis-81 {
     animation: anim80 6537ms, fade3 6537ms;
}
 .axis-82 {
     animation: anim80 17120ms, fade7 17120ms;
}
 .axis-83 {
     animation: anim80 26130ms, fade9 26130ms;
}
 .axis-84 {
     animation: anim84 20930ms, fade1 20930ms;
}
 .axis-85 {
     animation: anim84 10475ms, fade7 10475ms;
}
 .axis-86 {
     animation: anim84 30781ms, fade7 30781ms;
}
 .axis-87 {
     animation: anim84 43581ms, fade3 43581ms;
}
 .axis-88 {
     animation: anim88 18473ms, fade8 18473ms;
}
 .axis-89 {
     animation: anim88 43193ms, fade3 43193ms;
}
 .axis-90 {
     animation: anim88 32850ms, fade7 32850ms;
}
 .axis-91 {
     animation: anim88 14282ms, fade2 14282ms;
}
 .axis-92 {
     animation: anim92 7870ms, fade3 7870ms;
}
 .axis-93 {
     animation: anim92 17230ms, fade8 17230ms;
}
 .axis-94 {
     animation: anim92 7216ms, fade7 7216ms;
}
 .axis-95 {
     animation: anim92 35186ms, fade10 35186ms;
}
 .axis-96 {
     animation: anim96 9742ms, fade10 9742ms;
}
 .axis-97 {
     animation: anim96 33187ms, fade1 33187ms;
}
 .axis-98 {
     animation: anim96 24893ms, fade10 24893ms;
}
 .axis-99 {
     animation: anim96 25068ms, fade9 25068ms;
}
 .axis-100 {
     animation: anim100 39378ms, fade5 39378ms;
}
 .axis-101 {
     animation: anim100 34554ms, fade5 34554ms;
}
 .axis-102 {
     animation: anim100 19491ms, fade10 19491ms;
}
 .axis-103 {
     animation: anim100 43737ms, fade10 43737ms;
}
 .axis-104 {
     animation: anim104 43729ms, fade7 43729ms;
}
 .axis-105 {
     animation: anim104 28105ms, fade8 28105ms;
}
 .axis-106 {
     animation: anim104 42144ms, fade7 42144ms;
}
 .axis-107 {
     animation: anim104 7981ms, fade4 7981ms;
}
 .axis-108 {
     animation: anim108 18664ms, fade8 18664ms;
}
 .axis-109 {
     animation: anim108 35889ms, fade4 35889ms;
}
 .axis-110 {
     animation: anim108 30154ms, fade3 30154ms;
}
 .axis-111 {
     animation: anim108 33314ms, fade10 33314ms;
}
 .axis-112 {
     animation: anim112 28125ms, fade7 28125ms;
}
 .axis-113 {
     animation: anim112 12829ms, fade7 12829ms;
}
 .axis-114 {
     animation: anim112 5949ms, fade7 5949ms;
}
 .axis-115 {
     animation: anim112 19192ms, fade10 19192ms;
}
 .axis-116 {
     animation: anim116 40679ms, fade6 40679ms;
}
 .axis-117 {
     animation: anim116 39169ms, fade3 39169ms;
}
 .axis-118 {
     animation: anim116 25592ms, fade8 25592ms;
}
 .axis-119 {
     animation: anim116 36869ms, fade10 36869ms;
}
 .axis-120 {
     animation: anim120 18606ms, fade5 18606ms;
}
 .axis-121 {
     animation: anim120 29233ms, fade3 29233ms;
}
 .axis-122 {
     animation: anim120 15055ms, fade3 15055ms;
}
 .axis-123 {
     animation: anim120 39705ms, fade8 39705ms;
}
 .axis-124 {
     animation: anim124 42033ms, fade7 42033ms;
}
 .axis-125 {
     animation: anim124 24434ms, fade10 24434ms;
}
 .axis-126 {
     animation: anim124 22375ms, fade3 22375ms;
}
 .axis-127 {
     animation: anim124 31053ms, fade7 31053ms;
}
 .axis-128 {
     animation: anim128 28049ms, fade6 28049ms;
}
 .axis-129 {
     animation: anim128 8375ms, fade4 8375ms;
}
 .axis-130 {
     animation: anim128 8283ms, fade8 8283ms;
}
 .axis-131 {
     animation: anim128 19754ms, fade5 19754ms;
}
 .axis-132 {
     animation: anim132 15511ms, fade10 15511ms;
}
 .axis-133 {
     animation: anim132 26791ms, fade3 26791ms;
}
 .axis-134 {
     animation: anim132 42498ms, fade10 42498ms;
}
 .axis-135 {
     animation: anim132 39198ms, fade10 39198ms;
}
 .axis-136 {
     animation: anim136 19129ms, fade2 19129ms;
}
 .axis-137 {
     animation: anim136 38200ms, fade8 38200ms;
}
 .axis-138 {
     animation: anim136 37042ms, fade9 37042ms;
}
 .axis-139 {
     animation: anim136 24526ms, fade2 24526ms;
}
 .axis-140 {
     animation: anim140 33523ms, fade8 33523ms;
}
 .axis-141 {
     animation: anim140 34252ms, fade2 34252ms;
}
 .axis-142 {
     animation: anim140 8780ms, fade10 8780ms;
}
 .axis-143 {
     animation: anim140 5495ms, fade5 5495ms;
}
 .axis-144 {
     animation: anim144 36187ms, fade5 36187ms;
}
 .axis-145 {
     animation: anim144 23689ms, fade6 23689ms;
}
 .axis-146 {
     animation: anim144 44708ms, fade9 44708ms;
}
 .axis-147 {
     animation: anim144 43147ms, fade9 43147ms;
}
 .axis-148 {
     animation: anim148 8038ms, fade5 8038ms;
}
 .axis-149 {
     animation: anim148 8649ms, fade5 8649ms;
}
 .axis-150 {
     animation: anim148 34803ms, fade3 34803ms;
}
 .axis-151 {
     animation: anim148 17259ms, fade3 17259ms;
}
 .axis-152 {
     animation: anim152 36740ms, fade4 36740ms;
}
 .axis-153 {
     animation: anim152 6143ms, fade8 6143ms;
}
 .axis-154 {
     animation: anim152 25470ms, fade4 25470ms;
}
 .axis-155 {
     animation: anim152 35907ms, fade5 35907ms;
}
 .axis-156 {
     animation: anim156 27740ms, fade5 27740ms;
}
 .axis-157 {
     animation: anim156 10831ms, fade1 10831ms;
}
 .axis-158 {
     animation: anim156 16060ms, fade2 16060ms;
}
 .axis-159 {
     animation: anim156 14899ms, fade9 14899ms;
}
 .axis-160 {
     animation: anim160 30044ms, fade2 30044ms;
}
 .axis-161 {
     animation: anim160 32284ms, fade3 32284ms;
}
 .axis-162 {
     animation: anim160 18911ms, fade4 18911ms;
}
 .axis-163 {
     animation: anim160 37572ms, fade1 37572ms;
}
 .axis-164 {
     animation: anim164 17548ms, fade6 17548ms;
}
 .axis-165 {
     animation: anim164 24071ms, fade4 24071ms;
}
 .axis-166 {
     animation: anim164 32222ms, fade8 32222ms;
}
 .axis-167 {
     animation: anim164 20095ms, fade3 20095ms;
}
 .axis-168 {
     animation: anim168 27257ms, fade2 27257ms;
}
 .axis-169 {
     animation: anim168 13097ms, fade2 13097ms;
}
 .axis-170 {
     animation: anim168 5885ms, fade1 5885ms;
}
 .axis-171 {
     animation: anim168 42078ms, fade2 42078ms;
}
 .axis-172 {
     animation: anim172 5579ms, fade6 5579ms;
}
 .axis-173 {
     animation: anim172 28391ms, fade7 28391ms;
}
 .axis-174 {
     animation: anim172 12350ms, fade2 12350ms;
}
 .axis-175 {
     animation: anim172 38401ms, fade9 38401ms;
}
 .axis-176 {
     animation: anim176 6450ms, fade1 6450ms;
}
 .axis-177 {
     animation: anim176 19047ms, fade8 19047ms;
}
 .axis-178 {
     animation: anim176 10401ms, fade5 10401ms;
}
 .axis-179 {
     animation: anim176 24294ms, fade10 24294ms;
}
 .axis-180 {
     animation: anim180 33600ms, fade2 33600ms;
}
 .axis-181 {
     animation: anim180 16156ms, fade9 16156ms;
}
 .axis-182 {
     animation: anim180 7211ms, fade1 7211ms;
}
 .axis-183 {
     animation: anim180 31616ms, fade1 31616ms;
}
 .axis-184 {
     animation: anim184 33998ms, fade3 33998ms;
}
 .axis-185 {
     animation: anim184 25916ms, fade6 25916ms;
}
 .axis-186 {
     animation: anim184 36789ms, fade7 36789ms;
}
 .axis-187 {
     animation: anim184 21325ms, fade6 21325ms;
}
 .axis-188 {
     animation: anim188 11893ms, fade1 11893ms;
}
 .axis-189 {
     animation: anim188 14277ms, fade8 14277ms;
}
 .axis-190 {
     animation: anim188 26736ms, fade3 26736ms;
}
 .axis-191 {
     animation: anim188 41157ms, fade1 41157ms;
}
 .axis-192 {
     animation: anim192 20560ms, fade2 20560ms;
}
 .axis-193 {
     animation: anim192 27683ms, fade3 27683ms;
}
 .axis-194 {
     animation: anim192 44720ms, fade6 44720ms;
}
 .axis-195 {
     animation: anim192 42504ms, fade8 42504ms;
}
 .axis-196 {
     animation: anim196 9205ms, fade2 9205ms;
}
 .axis-197 {
     animation: anim196 24672ms, fade4 24672ms;
}
 .axis-198 {
     animation: anim196 7912ms, fade5 7912ms;
}
 .axis-199 {
     animation: anim196 25567ms, fade10 25567ms;
}
 .axis-200 {
     animation: anim200 9393ms, fade10 9393ms;
}
 .axis-201 {
     animation: anim200 6523ms, fade10 6523ms;
}
 .axis-202 {
     animation: anim200 42126ms, fade9 42126ms;
}
 .axis-203 {
     animation: anim200 42958ms, fade10 42958ms;
}
 .axis-204 {
     animation: anim204 15297ms, fade9 15297ms;
}
 .axis-205 {
     animation: anim204 41788ms, fade10 41788ms;
}
 .axis-206 {
     animation: anim204 37529ms, fade5 37529ms;
}
 .axis-207 {
     animation: anim204 27362ms, fade7 27362ms;
}
 .axis-208 {
     animation: anim208 14322ms, fade1 14322ms;
}
 .axis-209 {
     animation: anim208 19614ms, fade8 19614ms;
}
 .axis-210 {
     animation: anim208 42465ms, fade8 42465ms;
}
 .axis-211 {
     animation: anim208 26507ms, fade8 26507ms;
}
 .axis-212 {
     animation: anim212 14675ms, fade2 14675ms;
}
 .axis-213 {
     animation: anim212 5404ms, fade6 5404ms;
}
 .axis-214 {
     animation: anim212 40263ms, fade10 40263ms;
}
 .axis-215 {
     animation: anim212 12621ms, fade8 12621ms;
}
 .axis-216 {
     animation: anim216 9561ms, fade6 9561ms;
}
 .axis-217 {
     animation: anim216 42456ms, fade4 42456ms;
}
 .axis-218 {
     animation: anim216 33674ms, fade6 33674ms;
}
 .axis-219 {
     animation: anim216 6469ms, fade2 6469ms;
}
 .axis-220 {
     animation: anim220 27217ms, fade3 27217ms;
}
 .axis-221 {
     animation: anim220 27725ms, fade9 27725ms;
}
 .axis-222 {
     animation: anim220 20134ms, fade4 20134ms;
}
 .axis-223 {
     animation: anim220 16867ms, fade4 16867ms;
}
 .axis-224 {
     animation: anim224 25432ms, fade3 25432ms;
}
 .axis-225 {
     animation: anim224 5034ms, fade1 5034ms;
}
 .axis-226 {
     animation: anim224 21216ms, fade2 21216ms;
}
 .axis-227 {
     animation: anim224 12419ms, fade6 12419ms;
}
 .axis-228 {
     animation: anim228 40676ms, fade1 40676ms;
}
 .axis-229 {
     animation: anim228 12403ms, fade9 12403ms;
}
 .axis-230 {
     animation: anim228 41766ms, fade5 41766ms;
}
 .axis-231 {
     animation: anim228 33987ms, fade4 33987ms;
}
 .axis-232 {
     animation: anim232 30078ms, fade7 30078ms;
}
 .axis-233 {
     animation: anim232 35573ms, fade2 35573ms;
}
 .axis-234 {
     animation: anim232 20313ms, fade3 20313ms;
}
 .axis-235 {
     animation: anim232 21163ms, fade5 21163ms;
}
 .axis-236 {
     animation: anim236 13600ms, fade8 13600ms;
}
 .axis-237 {
     animation: anim236 21768ms, fade1 21768ms;
}
 .axis-238 {
     animation: anim236 28800ms, fade2 28800ms;
}
 .axis-239 {
     animation: anim236 9979ms, fade8 9979ms;
}
 .axis-240 {
     animation: anim240 35586ms, fade3 35586ms;
}
 .axis-241 {
     animation: anim240 23988ms, fade3 23988ms;
}
 .axis-242 {
     animation: anim240 24329ms, fade7 24329ms;
}
 .axis-243 {
     animation: anim240 20153ms, fade6 20153ms;
}
 .axis-244 {
     animation: anim244 30464ms, fade10 30464ms;
}
 .axis-245 {
     animation: anim244 8391ms, fade6 8391ms;
}
 .axis-246 {
     animation: anim244 29553ms, fade5 29553ms;
}
 .axis-247 {
     animation: anim244 15895ms, fade10 15895ms;
}
 .axis-248 {
     animation: anim248 41627ms, fade8 41627ms;
}
 .axis-249 {
     animation: anim248 9289ms, fade1 9289ms;
}
 .axis-250 {
     animation: anim248 23652ms, fade4 23652ms;
}
 .axis-251 {
     animation: anim248 27832ms, fade2 27832ms;
}
 .axis-252 {
     animation: anim252 32301ms, fade3 32301ms;
}
 .axis-253 {
     animation: anim252 40382ms, fade5 40382ms;
}
 .axis-254 {
     animation: anim252 42323ms, fade7 42323ms;
}
 .axis-255 {
     animation: anim252 5044ms, fade8 5044ms;
}
 .axis-256 {
     animation: anim256 25655ms, fade3 25655ms;
}
 .axis-257 {
     animation: anim256 35378ms, fade3 35378ms;
}
 .axis-258 {
     animation: anim256 37871ms, fade8 37871ms;
}
 .axis-259 {
     animation: anim256 15285ms, fade8 15285ms;
}
 .axis-260 {
     animation: anim260 42937ms, fade5 42937ms;
}
 .axis-261 {
     animation: anim260 6713ms, fade5 6713ms;
}
 .axis-262 {
     animation: anim260 36377ms, fade10 36377ms;
}
 .axis-263 {
     animation: anim260 32475ms, fade6 32475ms;
}
 .axis-264 {
     animation: anim264 5178ms, fade5 5178ms;
}
 .axis-265 {
     animation: anim264 12252ms, fade5 12252ms;
}
 .axis-266 {
     animation: anim264 32146ms, fade4 32146ms;
}
 .axis-267 {
     animation: anim264 44411ms, fade4 44411ms;
}
 .axis-268 {
     animation: anim268 6866ms, fade2 6866ms;
}
 .axis-269 {
     animation: anim268 40876ms, fade10 40876ms;
}
 .axis-270 {
     animation: anim268 22809ms, fade3 22809ms;
}
 .axis-271 {
     animation: anim268 29445ms, fade1 29445ms;
}
 .axis-272 {
     animation: anim272 18057ms, fade6 18057ms;
}
 .axis-273 {
     animation: anim272 36949ms, fade8 36949ms;
}
 .axis-274 {
     animation: anim272 23570ms, fade3 23570ms;
}
 .axis-275 {
     animation: anim272 20882ms, fade4 20882ms;
}
 .axis-276 {
     animation: anim276 42065ms, fade9 42065ms;
}
 .axis-277 {
     animation: anim276 39329ms, fade5 39329ms;
}
 .axis-278 {
     animation: anim276 6879ms, fade10 6879ms;
}
 .axis-279 {
     animation: anim276 9646ms, fade3 9646ms;
}
 .axis-280 {
     animation: anim280 38821ms, fade3 38821ms;
}
 .axis-281 {
     animation: anim280 38072ms, fade4 38072ms;
}
 .axis-282 {
     animation: anim280 5179ms, fade6 5179ms;
}
 .axis-283 {
     animation: anim280 39265ms, fade8 39265ms;
}
 .axis-284 {
     animation: anim284 30843ms, fade7 30843ms;
}
 .axis-285 {
     animation: anim284 10990ms, fade4 10990ms;
}
 .axis-286 {
     animation: anim284 40873ms, fade6 40873ms;
}
 .axis-287 {
     animation: anim284 26633ms, fade3 26633ms;
}
 .axis-288 {
     animation: anim288 13232ms, fade4 13232ms;
}
 .axis-289 {
     animation: anim288 20488ms, fade3 20488ms;
}
 .axis-290 {
     animation: anim288 42911ms, fade6 42911ms;
}
 .axis-291 {
     animation: anim288 24449ms, fade2 24449ms;
}
 .axis-292 {
     animation: anim292 11300ms, fade10 11300ms;
}
 .axis-293 {
     animation: anim292 38404ms, fade7 38404ms;
}
 .axis-294 {
     animation: anim292 14632ms, fade10 14632ms;
}
 .axis-295 {
     animation: anim292 9136ms, fade8 9136ms;
}
 .axis-296 {
     animation: anim296 5471ms, fade6 5471ms;
}
 .axis-297 {
     animation: anim296 43054ms, fade1 43054ms;
}
 .axis-298 {
     animation: anim296 24323ms, fade4 24323ms;
}
 .axis-299 {
     animation: anim296 21032ms, fade8 21032ms;
}
 .axis-300 {
     animation: anim300 44962ms, fade8 44962ms;
}
 .axis-301 {
     animation: anim300 36780ms, fade8 36780ms;
}
 .axis-302 {
     animation: anim300 33674ms, fade10 33674ms;
}
 .axis-303 {
     animation: anim300 37401ms, fade1 37401ms;
}
 .axis-304 {
     animation: anim304 14843ms, fade4 14843ms;
}
 .axis-305 {
     animation: anim304 44992ms, fade8 44992ms;
}
 .axis-306 {
     animation: anim304 27514ms, fade2 27514ms;
}
 .axis-307 {
     animation: anim304 36718ms, fade4 36718ms;
}
 .axis-308 {
     animation: anim308 7982ms, fade2 7982ms;
}
 .axis-309 {
     animation: anim308 6357ms, fade7 6357ms;
}
 .axis-310 {
     animation: anim308 40125ms, fade10 40125ms;
}
 .axis-311 {
     animation: anim308 6773ms, fade7 6773ms;
}
 .axis-312 {
     animation: anim312 37868ms, fade7 37868ms;
}
 .axis-313 {
     animation: anim312 13330ms, fade6 13330ms;
}
 .axis-314 {
     animation: anim312 12973ms, fade6 12973ms;
}
 .axis-315 {
     animation: anim312 39608ms, fade9 39608ms;
}
 .axis-316 {
     animation: anim316 15854ms, fade1 15854ms;
}
 .axis-317 {
     animation: anim316 7026ms, fade6 7026ms;
}
 .axis-318 {
     animation: anim316 18719ms, fade8 18719ms;
}
 .axis-319 {
     animation: anim316 38062ms, fade9 38062ms;
}
 .axis-320 {
     animation: anim320 20496ms, fade2 20496ms;
}
 .axis-321 {
     animation: anim320 22414ms, fade10 22414ms;
}
 .axis-322 {
     animation: anim320 17081ms, fade10 17081ms;
}
 .axis-323 {
     animation: anim320 14648ms, fade2 14648ms;
}
 .axis-324 {
     animation: anim324 23622ms, fade1 23622ms;
}
 .axis-325 {
     animation: anim324 20221ms, fade8 20221ms;
}
 .axis-326 {
     animation: anim324 18201ms, fade2 18201ms;
}
 .axis-327 {
     animation: anim324 14456ms, fade2 14456ms;
}
 .axis-328 {
     animation: anim328 6485ms, fade5 6485ms;
}
 .axis-329 {
     animation: anim328 38971ms, fade10 38971ms;
}
 .axis-330 {
     animation: anim328 39860ms, fade8 39860ms;
}
 .axis-331 {
     animation: anim328 19045ms, fade8 19045ms;
}
 .axis-332 {
     animation: anim332 18899ms, fade7 18899ms;
}
 .axis-333 {
     animation: anim332 39236ms, fade9 39236ms;
}
 .axis-334 {
     animation: anim332 17002ms, fade2 17002ms;
}
 .axis-335 {
     animation: anim332 30000ms, fade2 30000ms;
}
 .axis-336 {
     animation: anim336 9838ms, fade4 9838ms;
}
 .axis-337 {
     animation: anim336 11728ms, fade10 11728ms;
}
 .axis-338 {
     animation: anim336 41193ms, fade3 41193ms;
}
 .axis-339 {
     animation: anim336 16134ms, fade10 16134ms;
}
 .axis-340 {
     animation: anim340 41220ms, fade8 41220ms;
}
 .axis-341 {
     animation: anim340 44245ms, fade10 44245ms;
}
 .axis-342 {
     animation: anim340 13357ms, fade6 13357ms;
}
 .axis-343 {
     animation: anim340 6974ms, fade1 6974ms;
}
 .axis-344 {
     animation: anim344 6144ms, fade10 6144ms;
}
 .axis-345 {
     animation: anim344 35727ms, fade3 35727ms;
}
 .axis-346 {
     animation: anim344 25435ms, fade10 25435ms;
}
 .axis-347 {
     animation: anim344 29684ms, fade4 29684ms;
}
 .axis-348 {
     animation: anim348 5746ms, fade9 5746ms;
}
 .axis-349 {
     animation: anim348 43479ms, fade4 43479ms;
}
 .axis-350 {
     animation: anim348 26078ms, fade3 26078ms;
}
 .axis-351 {
     animation: anim348 34106ms, fade10 34106ms;
}
 .axis-352 {
     animation: anim352 33732ms, fade8 33732ms;
}
 .axis-353 {
     animation: anim352 29551ms, fade6 29551ms;
}
 .axis-354 {
     animation: anim352 43154ms, fade2 43154ms;
}
 .axis-355 {
     animation: anim352 21415ms, fade1 21415ms;
}
 .axis-356 {
     animation: anim356 35235ms, fade5 35235ms;
}
 .axis-357 {
     animation: anim356 10200ms, fade8 10200ms;
}
 .axis-358 {
     animation: anim356 9356ms, fade7 9356ms;
}
 .axis-359 {
     animation: anim356 43557ms, fade2 43557ms;
}
 .axis-360 {
     animation: anim360 8475ms, fade10 8475ms;
}
 @keyframes fade1 {
     8% {
         opacity: 0;
    }
     18% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade2 {
     7% {
         opacity: 0;
    }
     17% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade3 {
     4% {
         opacity: 0;
    }
     14% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade4 {
     12% {
         opacity: 0;
    }
     22% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade5 {
     7% {
         opacity: 0;
    }
     17% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade6 {
     18% {
         opacity: 0;
    }
     28% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade7 {
     8% {
         opacity: 0;
    }
     18% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade8 {
     9% {
         opacity: 0;
    }
     19% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade9 {
     11% {
         opacity: 0;
    }
     21% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fade10 {
     14% {
         opacity: 0;
    }
     24% {
         opacity: 1;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes anim4 {
     100% {
         transform: translate(79.8051240208vw, 5.5805178995vh);
    }
}
 @keyframes anim8 {
     100% {
         transform: translate(79.2214454993vw, 11.1338480768vh);
    }
}
 @keyframes anim12 {
     100% {
         transform: translate(78.2518080587vw, 16.6329352654vh);
    }
}
 @keyframes anim16 {
     100% {
         transform: translate(76.9009356751vw, 22.0509884654vh);
    }
}
 @keyframes anim20 {
     100% {
         transform: translate(75.1754096629vw, 27.3616114661vh);
    }
}
 @keyframes anim24 {
     100% {
         transform: translate(73.0836366114vw, 32.5389314461vh);
    }
}
 @keyframes anim28 {
     100% {
         transform: translate(70.6358074287vw, 37.5577250229vh);
    }
}
 @keyframes anim32 {
     100% {
         transform: translate(67.8438476925vw, 42.3935411387vh);
    }
}
 @keyframes anim36 {
     100% {
         transform: translate(64.72135955vw, 47.0228201834vh);
    }
}
 @keyframes anim40 {
     100% {
         transform: translate(61.2835554495vw, 51.4230087749vh);
    }
}
 @keyframes anim44 {
     100% {
         transform: translate(57.5471840271vw, 55.5726696367vh);
    }
}
 @keyframes anim48 {
     100% {
         transform: translate(53.5304485087vw, 59.4515860382vh);
    }
}
 @keyframes anim52 {
     100% {
         transform: translate(49.252918026vw, 63.0408602885vh);
    }
}
 @keyframes anim56 {
     100% {
         transform: translate(44.7354322777vw, 66.3230058044vh);
    }
}
 @keyframes anim60 {
     100% {
         transform: translate(40vw, 69.2820323028vh);
    }
}
 @keyframes anim64 {
     100% {
         transform: translate(35.0696917431vw, 71.9035237039vh);
    }
}
 @keyframes anim68 {
     100% {
         transform: translate(29.9685274733vw, 74.1747083653vh);
    }
}
 @keyframes anim72 {
     100% {
         transform: translate(24.72135955vw, 76.0845213036vh);
    }
}
 @keyframes anim76 {
     100% {
         transform: translate(19.353751648vw, 77.6236581021vh);
    }
}
 @keyframes anim80 {
     100% {
         transform: translate(13.8918542133vw, 78.784620241vh);
    }
}
 @keyframes anim84 {
     100% {
         transform: translate(8.3622770614vw, 79.5617516295vh);
    }
}
 @keyframes anim88 {
     100% {
         transform: translate(2.7919597362vw, 79.9512661615vh);
    }
}
 @keyframes anim92 {
     100% {
         transform: translate(-2.7919597362vw, 79.9512661615vh);
    }
}
 @keyframes anim96 {
     100% {
         transform: translate(-8.3622770614vw, 79.5617516295vh);
    }
}
 @keyframes anim100 {
     100% {
         transform: translate(-13.8918542134vw, 78.784620241vh);
    }
}
 @keyframes anim104 {
     100% {
         transform: translate(-19.353751648vw, 77.6236581021vh);
    }
}
 @keyframes anim108 {
     100% {
         transform: translate(-24.72135955vw, 76.0845213036vh);
    }
}
 @keyframes anim112 {
     100% {
         transform: translate(-29.9685274733vw, 74.1747083653vh);
    }
}
 @keyframes anim116 {
     100% {
         transform: translate(-35.0696917431vw, 71.9035237039vh);
    }
}
 @keyframes anim120 {
     100% {
         transform: translate(-40vw, 69.2820323027vh);
    }
}
 @keyframes anim124 {
     100% {
         transform: translate(-44.7354322777vw, 66.3230058044vh);
    }
}
 @keyframes anim128 {
     100% {
         transform: translate(-49.2529180261vw, 63.0408602885vh);
    }
}
 @keyframes anim132 {
     100% {
         transform: translate(-53.5304485087vw, 59.4515860382vh);
    }
}
 @keyframes anim136 {
     100% {
         transform: translate(-57.5471840271vw, 55.5726696367vh);
    }
}
 @keyframes anim140 {
     100% {
         transform: translate(-61.2835554495vw, 51.4230087749vh);
    }
}
 @keyframes anim144 {
     100% {
         transform: translate(-64.72135955vw, 47.0228201834vh);
    }
}
 @keyframes anim148 {
     100% {
         transform: translate(-67.8438476924vw, 42.3935411387vh);
    }
}
 @keyframes anim152 {
     100% {
         transform: translate(-70.6358074286vw, 37.5577250229vh);
    }
}
 @keyframes anim156 {
     100% {
         transform: translate(-73.0836366112vw, 32.5389314461vh);
    }
}
 @keyframes anim160 {
     100% {
         transform: translate(-75.1754096624vw, 27.3616114661vh);
    }
}
 @keyframes anim164 {
     100% {
         transform: translate(-76.9009356743vw, 22.0509884654vh);
    }
}
 @keyframes anim168 {
     100% {
         transform: translate(-78.2518080574vw, 16.6329352656vh);
    }
}
 @keyframes anim172 {
     100% {
         transform: translate(-79.2214454971vw, 11.1338480771vh);
    }
}
 @keyframes anim176 {
     100% {
         transform: translate(-79.8051240171vw, 5.5805179vh);
    }
}
 @keyframes anim180 {
     100% {
         transform: translate(-79.9999999939vw, 0.0000000008vh);
    }
}
 @keyframes anim184 {
     100% {
         transform: translate(-79.805124011vw, -5.5805178982vh);
    }
}
 @keyframes anim188 {
     100% {
         transform: translate(-79.2214454836vw, -11.1338480746vh);
    }
}
 @keyframes anim192 {
     100% {
         transform: translate(-78.2518080337vw, -16.6329352618vh);
    }
}
 @keyframes anim196 {
     100% {
         transform: translate(-76.9009356358vw, -22.0509884595vh);
    }
}
 @keyframes anim200 {
     100% {
         transform: translate(-75.1754096017vw, -27.3616114568vh);
    }
}
 @keyframes anim204 {
     100% {
         transform: translate(-73.0836365169vw, -32.5389314314vh);
    }
}
 @keyframes anim208 {
     100% {
         transform: translate(-70.6358072839vw, -37.557725vh);
    }
}
 @keyframes anim212 {
     100% {
         transform: translate(-67.8438474725vw, -42.3935411032vh);
    }
}
 @keyframes anim216 {
     100% {
         transform: translate(-64.7213592185vw, -47.022820129vh);
    }
}
 @keyframes anim220 {
     100% {
         transform: translate(-61.2835549536vw, -51.423008692vh);
    }
}
 @keyframes anim224 {
     100% {
         transform: translate(-57.5471832906vw, -55.5726695113vh);
    }
}
 @keyframes anim228 {
     100% {
         transform: translate(-53.5304474226vw, -59.4515858499vh);
    }
}
 @keyframes anim232 {
     100% {
         transform: translate(-49.2529164353vw, -63.0408600078vh);
    }
}
 @keyframes anim236 {
     100% {
         transform: translate(-44.735429963vw, -66.3230053889vh);
    }
}
 @keyframes anim240 {
     100% {
         transform: translate(-39.9999966533vw, -69.2820316917vh);
    }
}
 @keyframes anim244 {
     100% {
         transform: translate(-35.0696869337vw, -71.9035228111vh);
    }
}
 @keyframes anim248 {
     100% {
         transform: translate(-29.9685206026vw, -74.1747070689vh);
    }
}
 @keyframes anim252 {
     100% {
         transform: translate(-24.721349791vw, -76.0845194323vh);
    }
}
 @keyframes anim256 {
     100% {
         transform: translate(-19.3537378633vw, -77.6236554167vh);
    }
}
 @keyframes anim260 {
     100% {
         transform: translate(-13.891834847vw, -78.7846164089vh);
    }
}
 @keyframes anim264 {
     100% {
         transform: translate(-8.362249995vw, -79.5617461908vh);
    }
}
 @keyframes anim268 {
     100% {
         transform: translate(-2.7919220994vw, -79.9512584836vh);
    }
}
 @keyframes anim272 {
     100% {
         transform: translate(2.7920118149vw, -79.951255378vh);
    }
}
 @keyframes anim276 {
     100% {
         transform: translate(8.3623487803vw, -79.5617365594vh);
    }
}
 @keyframes anim280 {
     100% {
         transform: translate(13.8919525223vw, -78.7845992823vh);
    }
}
 @keyframes anim284 {
     100% {
         transform: translate(19.3538857994vw, -77.6236290907vh);
    }
}
 @keyframes anim288 {
     100% {
         transform: translate(24.7215418116vw, -76.0844813291vh);
    }
}
 @keyframes anim292 {
     100% {
         transform: translate(29.9687740459vw, -74.1746535294vh);
    }
}
 @keyframes anim296 {
     100% {
         transform: translate(35.0700239391vw, -71.9034488065vh);
    }
}
 @keyframes anim300 {
     100% {
         transform: translate(40.0004457508vw, -69.2819304349vh);
    }
}
 @keyframes anim304 {
     100% {
         transform: translate(44.7360280553vw, -66.3228678216vh);
    }
}
 @keyframes anim308 {
     100% {
         transform: translate(49.2537112853vw, -63.0406741325vh);
    }
}
 @keyframes anim312 {
     100% {
         transform: translate(53.5315007796vw, -59.4513358667vh);
    }
}
 @keyframes anim316 {
     100% {
         transform: translate(57.5485748204vw, -55.5723347095vh);
    }
}
 @keyframes anim320 {
     100% {
         transform: translate(61.2853871724vw, -51.4225620336vh);
    }
}
 @keyframes anim324 {
     100% {
         transform: translate(64.7237636756vw, -47.0222264458vh);
    }
}
 @keyframes anim328 {
     100% {
         transform: translate(67.8469924807vw, -42.39275481vh);
    }
}
 @keyframes anim332 {
     100% {
         transform: translate(70.6399075605vw, -37.5566872034vh);
    }
}
 @keyframes anim336 {
     100% {
         transform: translate(73.0889651791vw, -32.5375662873vh);
    }
}
 @keyframes anim340 {
     100% {
         transform: translate(75.1823130503vw, -27.3598215917vh);
    }
}
 @keyframes anim344 {
     100% {
         transform: translate(76.9098519779vw, -22.0486492345vh);
    }
}
 @keyframes anim348 {
     100% {
         transform: translate(78.2632898269vw, -16.6298876035vh);
    }
}
 @keyframes anim352 {
     100% {
         transform: translate(79.2361877464vw, -11.1298895415vh);
    }
}
 @keyframes anim356 {
     100% {
         transform: translate(79.8239986358vw, -5.5753915744vh);
    }
}
 @keyframes anim360 {
     100% {
         transform: translate(80.0240979233vw, 0.0066192762vh);
    }
}


/*=========================================================== SUB PAGE ===============================================================*/

.subpage-show .page-title {
    animation: pageTitleOut 0.5s ease 1 forwards;
}

@keyframes pageTitleOut {
    0% { 
        opacity: 1.0;
        transform: translateY(0);
    }
    100% { 
        opacity: 0;
        transform: translateY(-200%);
    }
}

.subpage-show .page-badge {
    animation: pageBadgeOut 0.5s ease 1 forwards;
}

@keyframes pageBadgeOut {
    0% { 
        opacity: 1.0;
        transform: translateY(0);
    }
    100% { 
        opacity: 0;
        transform: translateY(100%);
    }
}

.subpage-show .board-wrap {
    animation: boardOut 0.5s ease 1 forwards;
}

@keyframes boardOut {
    0% { 
        opacity: 1.0;
        transform: translateY(0);
    }
    100% { 
        opacity: 0;
        transform: translateY(100%);
    }
}

.subpage-show .main-page .category-btn {
    animation: cbOut 0.8s ease 1 forwards;
}

.subpage-show .main-page .category-btn:nth-child(2) { animation-delay: 0.1s; }
.subpage-show .main-page .category-btn:nth-child(3) { animation-delay: 0.2s; }
.subpage-show .main-page .category-btn:nth-child(4) { animation-delay: 0.3s; }

@keyframes cbOut {
    0% {
        opacity: 1.0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%);
    }
}


/* Visual */

.subpage-show .visual-panel .soccer,
.subpage-show .visual-panel .slotmachine,
.subpage-show .visual-panel .goonz,
.subpage-show .visual-panel .spaceman {
    animation: visualLeftOut 0.8s ease 0.8s 1 forwards;
}

@keyframes visualLeftOut {
    0% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-25%);
    }
}

.subpage-show .visual-wrap .visual-panel.left .backstage {
    animation: backstageLeftOut 2s ease 1.5s 1 forwards;
}

@keyframes backstageLeftOut {
    0% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.subpage-show .visual-panel .dealer,
.subpage-show .visual-panel .baseball,
.subpage-show .visual-panel .slotman {
    animation: visualRightOut 0.8s ease 0.8s 1 forwards;
}

@keyframes visualRightOut {
    0% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(25%);
    }
}

.subpage-show .visual-wrap .visual-panel.right .backstage {
    animation: backstageRightOut 2s ease 1.5s 1 forwards;
}

@keyframes backstageRightOut {
    0% {
        opacity: 1.0;
        transform: translateX(0) rotateY(180deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotateY(180deg);
    }
}


/* Home Btn */

.home-btn {
    height: 50px;
    padding: 0 60px;
    background-color: transparent;
    border: none;
    margin: 5px auto 20px;
    position: relative;
    color: #ffcaa9;
    font-size: 14px;
    transform-origin: top center;
}

.mainpage-show .home-btn {
    animation: homeBtnOut 1s ease 1 forwards;
}

@keyframes homeBtnOut {
    0% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.home-btn:hover {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 42, 0, 0.4); 
}

.home-btn .bg {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.home-btn .bg.left {
    left: 0;
}

.home-btn .bg.right {
    right: 0;
}

.home-btn .bg:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(153, 40, 0, 0.5);
}

.home-btn:hover .bg:before {
    background-color: rgba(255, 67, 0, 0.5);
}

.home-btn .bg.left:before {
    border-radius: 0 0 0 10px;
    transform-origin: top left;
    transform: skew(25deg);
}

.home-btn .bg.right:before {
    border-radius: 0 0 10px 0;
    transform-origin: top right;
    transform: skew(-25deg);
}

.home-btn i {
    margin-right: 5px;
    position: relative;
    z-index: 2;
}

.home-btn .text {
    position: relative;
    z-index: 2;
}


/* Category Menu */

.category-menu {
    margin: 0 0 20px;
    padding: 15px;
    background-image: linear-gradient(to right, rgba(60, 60, 60, 0), rgba(60, 60, 60, 0.25), rgba(60, 60, 60, 0));
    backdrop-filter: blur(5px);
    border-radius: 10px;
    max-width: 100%;
}

.mainpage-show .category-menu {
    animation: cmOutAnim 1s ease 1 forwards;
}

@keyframes cmOutAnim {
    0% {
        opacity: 1.0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%);
    }
}

@media(min-width: 992px) {
    .category-menu .category-btn {
        width: calc(25% - 20px);
        max-width: 250px;
        margin: 0 10px;
    }

    .category-menu .category-btn .btn-wrap {
        justify-content: flex-start;
        padding: 0;
        height: 60px;
    }

    .category-menu .category-btn:hover .btn-wrap {
        transform: translateY(0);
    }

    .category-menu .category-btn .btn-wrap:before,
    .category-menu .category-btn .btn-wrap:after {
        background-image: linear-gradient(to left, rgba(85, 85, 85, 0.5), rgba(51, 51, 51, 0.25));
    }

    .category-menu .category-btn .btn-wrap:after {
        background-image: linear-gradient(to left, rgba(85, 85, 85, 0.8), rgba(1, 1, 1, 0.5));
    }

    .category-menu .category-btn.active .btn-wrap:after {
        opacity: 1.0;
        background-image: linear-gradient(to left, #7d2d0b, #511800);
    }

    .category-menu .category-btn .btn-wrap:before,
    .category-menu .category-btn .btn-wrap:after {
        animation: cmenuBtnWrap 0.8s ease 0.5s 1 backwards;
    }

    @keyframes cmenuBtnWrap {
        0% { 
            opacity: 0;
            transform: translateX(-25%);
        }
        100% { 
            opacity: 1.0;
            transform: translateX(0);
        }
    }

    .category-menu .category-btn .c-panel {
        width: 70px;
        padding: 5px;
    }

    .category-menu .category-btn.active .c-panel {
        background-color: #4f1700;
    }

    .category-menu .category-btn .c-panel:after {
        border-width: 5px;
    }

    .category-menu .category-btn.active .c-panel:after {
        border-color: #6d270a;
    }

    .category-menu .category-btn:hover .c-panel:after {
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        left: -5px;
        top: -5px;
    }

    .category-menu .category-btn.active .img-panel {
        background-image: linear-gradient(#ff7c2f, #ec2414);
    }

    .category-menu .category-btn.active .img-panel:after {
        border: none;
    }

    .category-menu .category-btn.active .c-img {
        animation: catImgAnim 1.5s linear infinite;
    }

    .category-menu .category-btn .c-info {
        width: calc(100% - 85px);
        margin: 0 0 0 15px;
        text-align: left;
    }

    .category-menu .category-btn .c-info .kr-text, 
    .category-menu .category-btn .c-info .en-text {
        font-size: 16px;
    }

    .category-menu .category-btn .c-info .en-text {
        font-size: 11px;
    }

    .category-menu .category-btn.active .c-info .en-text {
        color: #ffcaa9;
    }

    .category-menu .category-btn .c-tag {
        animation: cmenuTag 0.5s ease 0.8s 1 backwards;
    }

    @keyframes cmenuTag {
        0% {
            opacity: 0;
            width: 63%;
        }
        100% {
            opacity: 1.0;
            width: 100%;
        }
    }

    .category-menu .category-btn .c-tag div {
        width: 25px;
        height: 50px;
        left: auto;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto 0;
        padding: 0;
    }

    .category-menu .category-btn .c-tag div:before {
        width: 200%;
        height: 100%;
        background-color: #222222;
        box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.25);
    }

    .category-menu .category-btn.active .c-tag div:before {
        background-color: #511800;
    }

    .category-menu .category-btn .c-tag img {
        width: 14px;
        filter: grayscale(100%);
    }

    .category-menu .category-btn:hover .c-tag img,
    .category-menu .category-btn.active .c-tag img {
        filter: grayscale(0);
        opacity: 1.0;
    }
}


/* Providers Panel */

.providers-panel {
    width: calc(100% + 20px);
    margin: 0 -10px;
    display: none;
}

.providers-panel.active {
    display: block;
}

.sc-btn {
    width: calc(16.66% - 20px);
    max-width: 216px;
    margin: 0 10px 20px;
    padding: 0 0 10px;
    background-color: rgba(51, 51, 51, 0.75);
    border-radius: 15px;
    backdrop-filter: blur(5px);
    white-space: nowrap;
    color: #ffffff;
    animation: scBtnAnim 0.5s ease 1 backwards;
}

.sc-btn:hover {
    background-color: rgba(68, 68, 68, 0.75);
}

.sports-providers .sc-btn {
    width: calc(50% - 20px);
    max-width: 700px;
}

@keyframes scBtnAnim {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

.mainpage-show .sc-btn {
    animation: scOut 0.8s ease 1 forwards;
    animation-delay: 0s !important;
}

@keyframes scOut {
    0% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

.sc-btn:before {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10px;
    background-image: url(../img/bg/dot-bg.png);
    background-repeat: repeat;
    opacity: 0.4;
}

.sc-btn .glow-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sc-btn .glow-bg:before,
.sc-btn .glow-bg:after {
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: radial-gradient(rgba(253, 64, 27, 1.0), rgba(253, 64, 27, 0.25), rgba(253, 64, 27, 0), rgba(253, 64, 27, 0));
    background-size: 100% 100%;
}

.casino-providers .sc-btn .glow-bg:before {
    background-image: radial-gradient(rgba(0, 79, 197, 1.0), rgba(0, 79, 197, 0.25), rgba(0, 79, 197, 0), rgba(0, 79, 197, 0));
}

.slot-providers .sc-btn .glow-bg:before {
    background-image: radial-gradient(rgba(150, 49, 183, 1.0), rgba(150, 49, 183, 0.25), rgba(150, 49, 183, 0), rgba(150, 49, 183, 0));
}

.sports-providers .sc-btn .glow-bg:before {
    background-image: radial-gradient(rgba(51, 133, 6, 0.75), rgba(51, 133, 6, 0.25), rgba(51, 133, 6, 0), rgba(51, 133, 6, 0));
}

.sports-providers .sc-btn .glow-bg:before,
.sports-providers .sc-btn .glow-bg:after {
    width: 80%;
}

.providers-panel .sc-btn .glow-bg:after {
    background-image: radial-gradient(rgba(253, 64, 27, 1.0), rgba(253, 64, 27, 0.25), rgba(253, 64, 27, 0), rgba(253, 64, 27, 0));
}

.sc-btn .glow-bg:after {
    opacity: 0;
}

.sc-btn:hover .glow-bg:before {
    opacity: 0;
}

.sc-btn:hover .glow-bg:after {
    opacity: 1.0;
}

.sc-btn .g-logo {
    width: 50px;
    height: 50px;
    background-color: rgba(4, 4, 4, 0.75);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.sc-btn .g-bg {
    width: 74.08%;
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    background-color: #fd401b;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
}

.sc-btn .g-bg .sc-circle {
    width: 60%;
    height: 140%;
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    transition: 0.3s;
}

.sc-btn:hover .g-bg .sc-circle {
    transform: scale(1.2);
}

.sports-providers .sc-btn .g-bg .sc-circle {
    width: 32.78%;
    height: 185.95%;
}

.sc-btn .g-bg .sc-circle:before {
    width: 68%;
    height: 68%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 50%;
    background-color: #fd401b;
}

.casino-providers .sc-btn .g-bg,
.casino-providers .sc-btn .g-bg .sc-circle:before {
    background-color: #1659bb;
}

.slot-providers .sc-btn .g-bg,
.slot-providers .sc-btn .g-bg .sc-circle:before {
    background-color: #883c91;
}

.sports-providers .sc-btn .g-bg,
.sports-providers .sc-btn .g-bg .sc-circle:before {
    background-color: #368d2b;
}

.providers-panel .sc-btn:hover .g-bg,
.providers-panel .sc-btn:hover .g-bg .sc-circle:before {
    background-color: #fd401b;
}

.sc-btn .g-img {
    position: relative;
    z-index: 5;
    transition: 0.3s;
}

.sc-btn:hover .g-img {
    transform: translateY(-5%);
}

.sc-btn .play-btn {
    width: 80%;
    max-width: 120px;
    height: 38px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 20;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: scale(0.5);
    opacity: 0;
}

.sc-btn:hover .play-btn {
    transform: scale(1.0);
    opacity: 1.0;
}

.sc-btn .g-footer .g-name,
.sc-btn .g-footer .g-cat {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 10;
}

.sc-btn .g-footer .g-cat {
    color: #fd5c1b;
    font-size: 10px;
    letter-spacing: 2px;
    margin: -2px 0 0;
    transition: 0.3s;
}

.casino-providers .sc-btn .g-footer .g-cat {
    color: #4597ff;
}

.slot-providers .sc-btn .g-footer .g-cat {
    color: #ff7efe;
}

.sports-providers .sc-btn .g-footer .g-cat {
    color: #96ed3f;
}

.providers-panel .sc-btn:hover .g-footer .g-cat {
    color: #fd5c1b;
}


/*=========================================================== M O D A L ===============================================================*/

.modal-backdrop.show {
    opacity: initial;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.modal {
    padding: 0 !important;
    overflow-y: auto;
}

.modal::-webkit-scrollbar {
    width: 0;
}

.modal-dialog {
    max-width: 1300px;
    padding: 0 45px !important;
    margin: 20px auto !important;
}

.modal-content {
    background-color: transparent;
    border: none;
    border-radius: 0px;
}


/* Modal Close */

.modal .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background-color: rgba(63, 63, 63, 0.5);
    backdrop-filter: blur(5px);
    border: none;
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 5;
}

.modal .close-btn:before,
.modal .close-btn:after {
    width: 1px;
    height: 60%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #ccc9db;
    transition: 0.3s;
}

.modal .close-btn:before {
    transform: rotate(-45deg);
}

.modal .close-btn:after {
    transform: rotate(45deg);
}

.modal .close-btn:hover:before {
    transform: rotate(-135deg);
    background-color: #dd3000;
}

.modal .close-btn:hover:after {
    transform: rotate(-45deg);
    background-color: #dd3000;
}


/* Modal Wrapper */

.modal-wrapper {
    width: 100%;
    min-height: 610px;
    margin: 0 auto;
    background-color: #222222;
    border-radius: 15px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);
    padding: 0 50px 30px;
}

.modal-header {
    width: 100%;
    border: none;
    padding: 20px 0 10px;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
}

.modal-header:before {
    width: 50%;
    height: 200%;
    left: 0;
    right: 0;
    bottom: -200%;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.25);
}

.modal-menu {
    width: 100%;
    padding: 10px;
    margin: 0 0 10px;
    border-radius: 10px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.modal-menu button {
    width: calc(20% - 4px);
    height: 34px;
    max-width: 160px;
    background-color: transparent;
    color: #999999;
    border: none;
    margin: 2px;
    border-radius: 25px;
}

.modal-menu button:hover {
    color: #ffffff;
}

.modal-menu button i {
    transition: 0.3s;
}

.modal-menu button:hover i {
    color: #fd5c1b;
}

.modal-menu button.active {
    background-image: linear-gradient(#ff6c26, #b51407);
    border: solid 1px #ff512f;
    color: #ffffff;
}

.modal-menu button.active i {
    color: #fff49b;
}

.game-list-container {
    width: calc(100% + 8px);
    align-items: stretch;
    align-content: stretch;
    max-height: 618px;
    overflow-y: scroll;
    margin-right: -8px;
    padding: 10px 0 0;
}

.game-btn {
    width: calc(16.66% - 18px);
    margin: 0 9px 12px;
    display: inline-block;
    position: relative;
    color: #ffffff;
    padding: 1px;
    border-radius: 15px;
}

.game-btn:hover {
    transform: translateY(-5px);
}

.game-btn:before {
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: linear-gradient(#ff7f12, #ec2414);
    border-radius: 15px;
}

.game-btn:hover:before {
    height: 100%;
}

.game-btn .tag-img {
    left: -5px;
    top: -5px;
    position: absolute;
    z-index: 10;
}

.game-btn .g-panel {
    width: 100%;
    min-height: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    align-items: stretch;
    align-content: stretch;
    padding-bottom: 30px;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.25);
}

.game-btn:hover .g-panel {
    background-color: #333333;
}

.game-btn .g-panel:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 14px;
    z-index: 5;
    border: solid 1px #fd401b;
    opacity: 0;
}

.game-btn:hover .g-panel:before {
    opacity: 1.0;
}

.game-btn .g-cont {
    width: 100%;
    min-height: 100%;
    position: relative;overflow: hidden;
}

.game-btn .g-img {
    transition: 0.3s;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}

.game-btn:hover .g-img {
    opacity: 0.5;
    filter: blur(2px);
}

.game-btn .g-footer {
    width: 100%;
    padding: 20px 10px 10px;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
}

.game-btn .g-footer:before {
    width: 100%;
    height: 120%;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(34, 34, 34, 0), rgba(34, 34, 34, 0.75), rgba(34, 34, 34, 1.0));
}

.game-btn .g-footer .text-panel {
    width: 100%;
}

.game-btn .g-footer .text-panel .g-name,
.game-btn .g-footer .text-panel .g-providers {
    width: 100%;
    display: inline-block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.game-btn .g-footer .text-panel .g-providers {
    font-size: 12px;
    color: #999999;
}

.game-btn .play-btn {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 10px;
    margin: auto;
    border-radius: 50%;
    font-size: 42px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
    padding: 0 0 0 4px;
    opacity: 0;
    transform: translateY(100%) scale(0.5) rotate(-360deg);
}

.game-btn:hover .play-btn {
    opacity: 1.0;
    transform: translateY(0) scale(1.0) rotate(0deg);
}

.hidden {
    display: none !important
}

.wrapper_loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1976;
}

.wrapper_loading_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    width: 150px;
    height: 150px;
}