@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

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

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

body {
    height: 100%;
    padding-right: 0 !important;
    text-align: center;
    background-color: #070b13;
    color: #fff;
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
}

body.active {
    overflow: hidden;
}

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

button {
    padding: 0;
}

a:hover {
    text-decoration: none;
}

img {
    pointer-events: none;
}

.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;
}


.font-medium {
    font-weight: 500 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-black {
    font-weight: 900 !important;
}

.font-gms-light {
    font-family: GmarketSansLight;
}

.font-gms-medium {
    font-family: GmarketSansMedium;
}

.font-gms-bold {
    font-family: GmarketSansBold;
}

.text-red {
    color: #ff4a46 !important;
}

.text-yellow {
    color: #fff65e !important;
}

.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-ac-je {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

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

.dflex-as-jc {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    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 {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: table;
    padding: 0;
}

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

.container {
    position: relative;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1530px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 100%;
    }
}


/* Wrapper */

.wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    padding: 0 0 70px;
}

.wrapper:before,
.wrapper:after {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 1028px;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}

.wrapper:before {
    background-color: #192944;
}

.wrapper:after {
    background-image: url(../img/bg/main-bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
}


/* Mask Background */

.mask-bg {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 1080px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    z-index: 2;
    pointer-events: none;
}

.mask-bg:before,
.mask-bg:after {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 10%;
    background-color: #070b13;
}

.mask-bg:before {
    height: 150%;
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 1.0) 100%);
    mask-image: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 1.0) 100%);
}

.mask-bg:after {
    bottom: -90%;
}


/* Header Section */

.header-section {
    width: 100%;
    max-width: 1920px;
    height: 110px;
    margin: 0 auto;
    z-index: 99;
}

.header-section:before,
.header-section:after {
    width: 100%;
    height: 200%;
    background-color: #0b0f18;
    bottom: 0;
}

.header-section:before {
    left: -50%;
    transform-origin: bottom right;
    transform: rotate(6deg);
}

.header-section:after {
    right: -50%;
    transform-origin: bottom left;
    transform: rotate(-6deg);
}


/* Logo */

.logo {
    width: 253px;
    position: relative;
}

.logo img {
    position: absolute;
    bottom: 1%;
}

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

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

.logo .logo-img {
    width: 100%;
    position: relative;
    opacity: 0;
}

.logo .x {
    width: 19.77%;
    left: 0;
    animation: lgXAnim 8s ease infinite;
}

@keyframes lgXAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    12% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .i {
    width: 4.75%;
    left: 20%;
    animation: lgIAnim 8s ease infinite;
}

@keyframes lgIAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    2% {
        opacity: 0;
        transform: translateY(-50%);
    }
    14% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .m {
    width: 18.58%;
    left: 24.75%;
    animation: lgMAnim 8s ease infinite;
}

@keyframes lgMAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    4% {
        opacity: 0;
        transform: translateY(-50%);
    }
    16% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .a {
    width: 17.79%;
    right: 40%;
    animation: lgAAnim 8s ease infinite;
}

@keyframes lgAAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    6% {
        opacity: 0;
        transform: translateY(-50%);
    }
    18% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .xl {
    width: 19.77%;
    right: 21%;
    animation: lgXlAnim 8s ease infinite;
}

@keyframes lgXlAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    8% {
        opacity: 0;
        transform: translateY(-50%);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .panel {
    width: 20.16%;
    right: 0;
    animation: lgPanelAnim 8s ease infinite;
}

@keyframes lgPanelAnim {
    0% {
        opacity: 0;
        transform: scale(0.25);
    }
    12% {
        opacity: 0;
        transform: scale(0.25);
    }
    22% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.logo .panel .v2 {
    width: 58.85%;
    right: 0;
    left: 0;
    top: 32%;
    margin: 0 auto;
    animation: lgv2Anim 8s ease infinite;
}

@keyframes lgv2Anim {
    0% {
        opacity: 0;
        transform: scale(1.25);
    }
    18% {
        opacity: 0;
        transform: scale(1.25);
    }
    28% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}


/* Page Title */

.page-title {
    z-index: 3;
    margin: 20px 0 0;
    padding: 0 0 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.page-title:before,
.page-title:after {
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.page-title:before {
    width: 50%;
    max-width: 218px;
    background-color: rgba(255, 255, 255, 0.25);
}

.page-title:after {
    width: 25%;
    max-width: 100px;
    background-color: #fc3d4c;
}


/* Banner Section */

.banner-container img {
    position: absolute;
    bottom: 0;
    pointer-events: none;
    transition: 0.5s;
}

.banner-container .banner-img {
    position: relative;
    opacity: 0;
}

.banner-container div {
    position: absolute;
    bottom: 0;
    pointer-events: none;
    transition: 0.5s;
}

.banner-container div .d-img {
    width: 100%;
    position: relative;
}

.banner-section .banner-container .tilt-container{
    width: 100%;
    position:relative;
    transform-style:preserve-3d;
    pointer-events: auto;
    transition: 0s;
}

.banner-container .miner {
    width: 31.77%;
    left: 0;
    right: 19.5%;
    margin: 0 auto;
}

.banner-container:hover .miner {
    transform: translateZ(70px);
}

.banner-container .miner .d-img {
    animation: minerAnim 18s ease infinite;
}

@keyframes minerAnim {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }
    7% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .electricity {
    width: 41.15%;
    left: 17%;
    right: 0;
    margin: 0 auto;
    bottom: auto;
    top: 19%;
    animation: electricAnim 18s ease infinite;
}

@keyframes electricAnim {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.banner-container .electricity .d-img {
    animation: electricImgAnim 0.5s ease infinite;
}

@keyframes electricImgAnim {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.banner-container .slot-woman {
    width: 13.27%;
    left: 13.5%;
    right: 0;
    margin: 0 auto;
}

.banner-container:hover .slot-woman {
    transform: translateZ(50px);
}

.banner-container .slot-woman .d-img {
    animation: slotWomanAnim 18s ease infinite;
}

@keyframes slotWomanAnim {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }
    7% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

/* Left */

.banner-container .dealer-01 {
    width: 13.08%;
    left: 23.85%;
    bottom: 4.3%;
}

.banner-container:hover .dealer-01 {
    transform: translateZ(40px);
}

.banner-container .dealer-01 .d-img {
    animation: dealer01Anim 18s ease infinite;
}

@keyframes dealer01Anim {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }
    2% {
        opacity: 0;
        transform: translateX(-15%);
    }
    9% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .casino-table {
    width: 32.68%;
    left: 13.8%;
    bottom: 1.75%;
}

.banner-container:hover .casino-table {
    transform: translateZ(60px);
}

.banner-container .casino-table .d-img {
    animation: casinoTableAnim 18s ease infinite;
}

@keyframes casinoTableAnim {
    0% {
        opacity: 0;
        transform: translateY(25%);
    }
    6% {
        opacity: 0;
        transform: translateY(25%);
    }
    11% {
        opacity: 1;
        transform: translateY(-5%);
    }
    16% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.banner-container .chips {
    width: 16%;
    left: 12.25%;
    bottom: 46.5%;
    transform-origin: top right;
    animation: chipsAnim 18s ease infinite;
}

@keyframes chipsAnim {
    0% {
        opacity: 0;
        transform: scale(0.25);
    }
    8% {
        opacity: 0;
        transform: scale(0.25);
    }
    13% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.banner-container .roulette {
    width: 19.61%;
    left: 9.5%;
    bottom: 13.25%;
}

.banner-container:hover .roulette {
    transform: translateZ(20px);
}

.banner-container .roulette .roulette-div {
    width: 100%;
    position: relative;
    transform-origin: bottom right;
    animation: rouletteAnim 18s ease infinite;
}

@keyframes rouletteAnim {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }
    5% {
        opacity: 0;
        transform: scale(0.75);
    }
    10% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.banner-container .roulette .d-img {
    animation: slotSpinImgAnim 2s ease infinite;
}

.banner-container .dealer-02 {
    width: 19.61%;
    left: 10.8%;
    bottom: 23.75%;
    animation: dealer02Anim 18s ease infinite;
}

@keyframes dealer02Anim {
    0% {
        opacity: 0;
        transform: translateX(15%);
    }
    2% {
        opacity: 0;
        transform: translateX(15%);
    }
    9% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .chip-ul {
    width: 62.33%;
    left: -42%;
    bottom: auto;
    top: -8%;
    transform-origin: bottom right;
    animation: chipUlAnim 18s ease infinite;
}

@keyframes chipUlAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    7% {
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 1;
        transform: scale(1.1);
    }
    15% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.banner-container .chip-ul .d-img {
    opacity: 0;
}

.banner-container .chip-red {
    width: 21.4%;
    right: 0;
    bottom: auto;
    top: 0;
    animation: chipRedAnim 10s linear infinite;
}

@keyframes chipRedAnim {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.banner-container .chip-blue {
    width: 53.48%;
    left: 0;
    bottom: 0;
    animation: chipBlueAnim 8s linear infinite;
}

@keyframes chipBlueAnim {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.banner-container .pgs-item {
    width: 32.68%;
    left: 12.95%;
    bottom: 11.35%;
    animation: pgsItemAnim 18s ease infinite;
}

@keyframes pgsItemAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    7% {
        opacity: 0;
        transform: scale(0.5);
    }
    17% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.banner-container .dog {
    width: 8.37%;
    left: 0;
    right: 21.5%;
    bottom: auto;
    top: 10.5%;
    margin: 0 auto;
    transform-origin: bottom right;
    animation: dogAnim 18s ease infinite;
}

@keyframes dogAnim {
    0% {
        opacity: 0;
    }
    9% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.banner-container .dog .d-img {
    animation: dogImgAnim 10s ease infinite;
}

@keyframes dogImgAnim {
    0% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(-25%,-60%);
    }
    100% {
        transform: translate(0,0);
    }
}

/* Right */

.banner-container .slot-spin {
    width: 32.68%;
    right: 26.2%;
    bottom: 0;
    animation: slotSpinAnim 18s ease infinite;
}

@keyframes slotSpinAnim {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    7% {
        opacity: 0;
        transform: translateY(15%);
    }
    12% {
        opacity: 1;
        transform: translateY(-5%);
    }
    17% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.banner-container .slot-spin .d-img {
    animation: slotSpinImgAnim 1.5s ease infinite;
}

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

.banner-container .aristocrat {
    width: 10.46%;
    right: 22.4%;
    bottom: auto;
    top: 8.25%;
    animation: aristocratAnim 18s ease infinite;
}

@keyframes aristocratAnim {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    8% {
        opacity: 0;
        transform: translateY(15%);
    }
    13% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.banner-container .cat {
    width: 5.23%;
    right: 31.7%;
    bottom: auto;
    top: 0;
    animation: catAnim 18s ease infinite;
}

@keyframes catAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    10% {
        opacity: 0;
        transform: translateY(-50%);
    }
    14% {
        opacity: 1;
        transform: translateY(5%);
    }
    19% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.banner-container .cat .d-img {
    animation: catImgAnim 3s ease infinite;
}

@keyframes catImgAnim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}

.banner-container .soccer-player {
    width: 32.68%;
    right: 7.2%;
    bottom: 14.25%;
}

.banner-container:hover .soccer-player {
    transform: translateZ(40px);
}

.banner-container .soccer-player .d-img {
    animation: soccerPlayerAnim 18s ease infinite;
}

@keyframes soccerPlayerAnim {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }
    2% {
        opacity: 0;
        transform: translateX(10%);
    }
    9% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .soccer-ball {
    width: 15.4%;
    right: 30.25%;
    bottom: 36.25%;
    animation: soccerBallAnim 18s ease infinite;
}

@keyframes soccerBallAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    4% {
        opacity: 0;
        transform: translateY(-50%);
    }
    11% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .soccer-ball .d-img {
    animation: baseballImgAnim 15s linear infinite;
}

.banner-container .baseball-player {
    width: 26.15%;
    right: 1%;
    bottom: 0;
}

.banner-container:hover .baseball-player {
    transform: translateZ(20px);
}

.banner-container .baseball-player .d-img {
    animation: baseballPlayerAnim 18s ease infinite;
}

@keyframes baseballPlayerAnim {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }
    2% {
        opacity: 0;
        transform: translateX(-10%);
    }
    9% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .baseball {
    width: 40%;
    right: -18%;
    bottom: auto;
    top: -1.75%;
    animation: baseballAnim 18s ease infinite;
}

@keyframes baseballAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    4% {
        opacity: 0;
        transform: translateX(-50%);
    }
    11% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-container .baseball .d-img {
    animation: baseballImgAnim 5s linear infinite;
}

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

.banner-container .gem-pink {
    width: 32.25%;
    right: 28%;
    bottom: auto;
    top: -20%;
    transform-origin: bottom left;
    animation: gemPinkAnim 18s ease infinite;
}

@keyframes gemPinkAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    7% {
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 1;
        transform: scale(1.1);
    }
    15% {
        opacity: 1;
        transform: scale(1.0);
    }
    95% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}


/* Category Section */

.category-section {
    position: relative;
    z-index: 3;
    margin: -5.15% 0 0;
}

@media(min-width: 1921px){
    .category-section {
        margin: -100px 0 0;
    }
}

.category-section:before {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -85px;
    background-image: url(../img/bg/category-bg.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    animation: categoryBgAnim 1s ease 1s 1 backwards;
}

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

.category-btn {
    width: calc(25% - 60px);
    max-width: 190px;
    height: 170px;
    background-color: #2b313a;
    border-radius: 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    margin: 0 30px;
    color: #ffffff;
    animation: categoryBtnAnim 1s ease 1.5s 1 backwards;
}

@keyframes categoryBtnAnim {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-btn:hover {
    color: #ffffff;
    background-color: #3b4759;
}

.category-btn:after {
    width: 100%;
    height: 20%;
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(rgba(63, 76, 97, 1.0), rgba(63, 76, 97, 0));
    left: 0;
    bottom: -22%;
    opacity: 0.4;
    transition: 0.3s;
}

.category-btn:hover:after {
    opacity: 0.75;
}

.category-btn .c-panel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.category-btn .c-panel:before {
    width: 63.25%;
    height: 134%;
    right: 0;
    bottom: 0;
    transform-origin: bottom right;
    transform: skewY(15deg);
    background-image: linear-gradient(#04b4f8, #0366e9);
    border-radius: 15px 15px 10px 0;
    transition: 0.3s;
}

.category-btn:nth-child(1) .c-panel:before {
    background-image: linear-gradient(#f97c37, #f1643b);
}

.category-btn:nth-child(2) .c-panel:before {
    background-image: linear-gradient(#9534f0, #773bf5);
}

.category-btn:nth-child(3) .c-panel:before {
    background-image: linear-gradient(#33edbc, #36ecea);
}

.category-btn:nth-child(4) .c-panel:before {
    background-image: linear-gradient(#04b4f8, #0366e9);
}

.category-btn:hover .c-panel:before {
    width: 70%;
    height: 154%;
}

.category-btn .c-bg {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
}

.category-btn .c-bg:before {
    width: 100%;
    height: 140%;
    left: 0;
    bottom: 0;
    transform-origin: bottom right;
    background-color: #2b313a;
    transform: rotate(-40deg);
    border-radius: 0 15px 0 0;
    z-index: 1;
    transition: 0.3s;
}

.category-btn:hover .c-bg:before {
    background-color: #3b4759;
}

.category-btn .icon-panel {
    width: 100%;
    position: absolute;
    z-index: 3;
    top: -30%;
    right: 0;
    transition: 0.3s;
}

.category-btn:hover .icon-panel {
    top: -40%;
}

.category-btn:hover .icon-panel img {
    animation: catIconAnim 1s ease 1 forwards;
}

@keyframes catIconAnim {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.category-btn .info-panel {
    padding: 0 0 20px 15px;
    position: relative;
    z-index: 3;
}

.category-btn .info-panel .icon {
    width: 100%;
}

.category-btn .info-panel .sub-text,
.category-btn .info-panel .kr-text,
.category-btn .info-panel .en-text {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
}

.category-btn .info-panel .sub-text {
    font-size: 12px;
    font-weight: 300;
    margin: 5px 0 25px;
}

.category-btn .info-panel .en-text {
    color: #5faeff;
    font-weight: 300;
}

.category-btn:nth-child(1) .info-panel .en-text {
    color: #ff9156;
}

.category-btn:nth-child(2) .info-panel .en-text {
    color: #b364ff;
}

.category-btn:nth-child(3) .info-panel .en-text {
    color: #50ffd2;
}

.category-btn:nth-child(4) .info-panel .en-text {
    color: #5faeff;
}

.category-btn .info-panel .kr-text {
    font-size: 18px;
}


/* About Section */

.about-section {
    margin: 30px 0 35px;
    position: relative;
    z-index: 3;
}

.about-section .title-panel {
    background-image: linear-gradient(to right, #123174, #318bf0, #123174);
    font-family: GmarketSansBold;
    font-size: 30px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0 5px 0 #133e76;
    border-radius: 10px;
    padding: 15px 2.25% 10px;
    margin: 0 0 30px;
    overflow: hidden;
    animation: aboutTitleAnim 1s ease 1.8s 1 backwards;
}

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

.about-section .title-panel:before {
    width: 100%;
    height: 110%;
    border-radius: 50%;
    background-image: linear-gradient(to right, #123174, #177bea, #123174);
    left: 50%;
    transform: translateX(-50%);
    bottom: -32%;
}

.about-section .text-panel {
    width: 100%;
    position: relative;
}

.about-section .text-panel .content {
    position: relative;
    z-index: 1;
    animation: aboutTextAnim 0.8s ease 2.3s 1 backwards;
}

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

.about-section .text-panel p {
    color: #9ea8b4;
    margin: 0 0;
    font-size: 23px;
}

.about-section .text-panel p:last-child {
    margin-bottom: 0;
}

.about-section .text-panel .en-text {
    font-size: 26px;
}

.about-section br {
    display: none;        
}


/* Arrow Background */

.about-section .arrow-bg {
    width: 100%;
    max-width: 1400px;
    height: 142px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    pointer-events: none;
}

.about-section .arrow-bg .arrow-left,
.about-section .arrow-bg .arrow-right {
    width: 112px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    background-image: url(../img/bg/arrow-bg.png);
}

.about-section .arrow-bg .arrow-left {
    left: 0;
    transform: rotateY(180deg);
    animation: arrowLeftAnim 0.8s ease 2s 1 backwards;
}

@keyframes arrowLeftAnim {
    0% {
        opacity: 0;
        left: 15%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

.about-section .arrow-bg .arrow-right {
    right: 0;
    animation: arrowRightAnim 0.8s ease 2s 1 backwards;
}

@keyframes arrowRightAnim {
    0% {
        opacity: 0;
        right: 15%;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}

.about-section .arrow-bg .arrow-left:before, .about-section .arrow-bg .arrow-left:after,
.about-section .arrow-bg .arrow-right:before, .about-section .arrow-bg .arrow-right:after {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: 0;
}

.about-section .arrow-bg .arrow-left:before,
.about-section .arrow-bg .arrow-right:before {
    background-image: url(../img/bg/arrow-01.png);
    animation: arrow01Anim 1s ease infinite;
}

@keyframes arrow01Anim {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.about-section .arrow-bg .arrow-left:after,
.about-section .arrow-bg .arrow-right:after {
    background-image: url(../img/bg/arrow-02.png);
    animation: arrow02Anim 1s ease infinite;
}

@keyframes arrow02Anim {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/* Footer Section */

.footer-section {
    width: 100%;
    height: 70px;
    margin: -70px 0 0;
    color: #454f5a;
    font-size: 10px;
    letter-spacing: 1px;
}

.footer-section .container {
    border-top: solid 1px rgba(31, 46, 66, 0.6);
}


/* Subpage Modal */


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

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

.subpageModal .modal-dialog {
    min-height: 100%;
    max-width: 100%;
    background-color: #070b13;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.subpageModal .modal-content {
    width: 100%;
    min-height: 100%;
    border: none;
    border-radius: 0;
    background-color: #070b13;
}

.subpageModal .modal-content:before,
.subpageModal .modal-content:after {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 1028px;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    opacity: 0.07;
}

.subpageModal .modal-content:before {
    background-color: #1f2636;
}

.subpageModal .modal-content:after {
    background-image: url(../img/bg/main-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 45%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 45%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
}

.subpageModal .container {
    max-width: 1430px;
}

/* Modal Header */

.subpageModal .modal-header {
    width: 100%;
    max-width: 1920px;
    height: 110px;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    align-content: center;
    justify-content: center;
    z-index: 99;
    filter: drop-shadow(0 8px 0 #151a25);
    flex-wrap: wrap;
}

.subpageModal .modal-header:before,
.subpageModal .modal-header:after {
    width: 100%;
    height: 200%;
    background-color: #374353;
    background-image: linear-gradient(#374353, #1c2332);
    bottom: 0;
}

.subpageModal .modal-header:before {
    left: -50%;
    transform-origin: bottom right;
    transform: rotate(6deg);
}

.subpageModal .modal-header:after {
    right: -50%;
    transform-origin: bottom left;
    transform: rotate(-6deg);
}

.subpageModal .modal-header .bs-ul li {
    padding: 0 5px;
    color: #7c8498;
}

.subpageModal .modal-header .bs-ul li a {
    color: #7c8498;
    font-size: 12px;
}

.subpageModal .modal-header .bs-ul li a i {
    color: #6ae4fa;
    margin-right: 3px;
}

.subpageModal .modal-header .bs-ul li a:hover {
    color: #ffffff;
}


/* Modal Body */

.subpageModal .modal-body {
    padding: 0 0 90px;
    min-height: calc(100% - 110px);
}

.modal-menu {
    width: 100%;
    margin: 30px 0 0;
    padding: 0 0 25px;
}

.modal-menu:before,
.modal-menu:after {
    width: 100%;
    max-width: 1400px;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.modal-menu:before {
    background-color: rgba(65, 79, 97, 0.25);
}

.modal-menu:after {
    width: 25%;
    max-width: 200px;
    background-color: #ac2241;
}

.menu-btn {
    width: calc(25% - 20px);
    max-width: 250px;
    height: 70px;
    margin: 0 10px;
    padding: 0 0 0 10px;
    border-radius: 10px 20px 10px 10px;
    background-color: rgba(31, 39, 54, 0.9);
    border: solid 1px #364058;
    color: #ffffff;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    flex-wrap: nowrap;
}

.menu-btn:hover {
    color: #ffffff;
    background-color: rgba(45, 54, 72, 0.9);
    border-color: #45506a;
}

.menu-btn.active {
    border-color: #1198d6;
}

.menu-btn:nth-child(1).active {
    border-color: #ff9256;
}

.menu-btn:nth-child(2).active {
    border-color: #ba70ff;
}

.menu-btn:nth-child(3).active {
    border-color: #3cfac8;
}

.menu-btn:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 0.3s;
    opacity: 0;
    background-image: linear-gradient(to right, #1198d6, #1455ca);
}

.menu-btn:nth-child(1):before {
    background-image: linear-gradient(to right, #ff9256, #d44f29);
}

.menu-btn:nth-child(2):before {
    background-image: linear-gradient(to right, #ba70ff, #692fe2);
}

.menu-btn:nth-child(3):before {
    background-image: linear-gradient(to right, #3cfac8, #009897);
}

.menu-btn.active:before {
    opacity: 1;
}

.menu-btn:after {
    width: 80%;
    height: 100%;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -100%;
    box-shadow: 0 0 60px #434c67;
    transition: 0.3s;
}

.menu-btn.active:after {
    opacity: 0;
}

.menu-btn .icon-panel {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #181b21;
    margin-right: 15px;
    transition: 0.3s;
}

.menu-btn:hover .icon-panel {
    background-color: #1f2633;
}

.menu-btn.active .icon-panel {
    background-color: rgba(0, 0, 0, 0.6);
}

.menu-btn.active:hover .icon-panel {
    background-color: rgba(0, 0, 0, 0.6);
}

.menu-btn:hover .icon-panel img {
    animation: shakeAnim 1s ease 1 forwards;
}

@keyframes shakeAnim {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.menu-btn .text-panel .kr-text,
.menu-btn .text-panel .en-text {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
}

.menu-btn .text-panel .en-text {
    color: #7c8498;
    font-size: 12px;
    font-weight: 300;
    transition: 0.3s;
}

.menu-btn:hover .text-panel .en-text {
    color: #04b4f8;
}

.menu-btn:nth-child(1):hover .text-panel .en-text {
    color: #ff9256;
}

.menu-btn:nth-child(2):hover .text-panel .en-text {
    color: #ba70ff;
}

.menu-btn:nth-child(3):hover .text-panel .en-text {
    color: #3cfac8;
}

.menu-btn.active .text-panel .en-text {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

.menu-btn.active:hover .text-panel .en-text {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

.menu-btn .tag {
    width: 50px;
    height: 17px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 10px;
}

.menu-btn .tag:before {
    width: 100%;
    height: 125%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(#04b4f8, #0366e9);
    transform-origin: top left;
    border-radius: 0 0 0 5px;
    transform: skew(10deg) rotate(5deg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.menu-btn:nth-child(1) .tag:before {
    background-image: linear-gradient(#ff9256, #d44f29);
}

.menu-btn:nth-child(2) .tag:before {
    background-image: linear-gradient(#ba70ff, #692fe2);
}

.menu-btn:nth-child(3) .tag:before {
    background-image: linear-gradient(#3cfac8, #009897);
}

.menu-btn:nth-child(4) .tag:before {
    background-image: linear-gradient(#04b4f8, #0366e9);
}


/* Providers Section */

.providers-section {
    width: calc(100% + 20px);
    margin: 40px -10px 0;
}

.providers-panel {
    display: none;
}

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

.providers-btn {
    width: calc(16.66% - 20px);
    max-width: 216px;
    margin: 0 10px 20px;
    display: inline-block;
    color: #95a4b9;
    opacity: 0;
    animation: providersBtnAnim 0.8s ease 1 forwards;
}

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

.providers-btn:hover {
    color: #ffffff;
}

.providers-btn .a-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 30%;
    background-image: linear-gradient(#3f4a63, #1c2332);
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.providers-btn.hotel .a-wrap {
    background-image: linear-gradient(#cccccc, #2a2a2a);
}

.providers-btn.hotel .a-wrap {
    background-image: linear-gradient(#65abe7, #08345b);
}

.providers-btn .a-wrap:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(#65abe7, #08345b);
    transition: 0.3s;
    opacity: 0;
}

.providers-btn.hotel .a-wrap:before {
    background-image: linear-gradient(#eed697, #634906);
}

.providers-btn:hover .a-wrap:before {
    opacity: 1;
}

.providers-btn .a-wrap .a-panel {
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    padding: 3px;
}

.providers-btn .a-wrap .a-panel:before,
.providers-btn .a-wrap .a-panel:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 0.3s;
}

.providers-btn .a-wrap .a-panel:before {
    background-image: linear-gradient(#53617d, #7582a0, #414c62);
}

.providers-btn.hotel .a-wrap .a-panel:before {
    background-image: linear-gradient(#777777, #ffffff, #444444);
}

.providers-btn.hotel .a-wrap .a-panel:before {
    background-image: linear-gradient(#2e7eda, #acd3ff, #104582);
}

.providers-btn .a-wrap .a-panel:after {
    background-image: linear-gradient(#67b9ff, #d1eaff, #4390d1);
    opacity: 0;
}

.providers-btn.hotel .a-wrap .a-panel:after {
    background-image: linear-gradient(#e9b523, #fffad1, #c1a146);
}

.providers-btn:hover .a-wrap .a-panel:after {
    opacity: 1;
}

.providers-btn .a-wrap .a-cont {
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    border: solid 1px #000000;
    background-color: #000000;
}

.providers-btn .a-wrap .a-cont:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.3s;
    opacity: 0;
    z-index: 2;
}

.providers-btn:hover .a-wrap .a-cont:after {
    opacity: 1;
}

.providers-btn .a-img {
    width: calc(100% + 8px);
    margin: 0 -4px;
    transition: 1s;
    position: relative;
    z-index: 1;
}

.providers-btn:hover .a-img {
    transform: scale(1.1);
}

/* Play Button */

.play-btn {
    width: 90%;
    max-width: 100px;
    height: 35px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 5px;
    background-color: transparent;
    border: solid 1px #e14c1b;
    border-top-color: #b31945;
    color: #ffffff;
    box-shadow: 0 1px 0 #c58162, 0 -1px 0 #bb506b, 0 2px 5px rgba(0, 0, 0, 1.0);
    opacity: 0;
    transform: scale(0.5);
    z-index: 3;
    transition: 0.5s;
}

.play-btn:hover {
    border-color: #a61334;
    border-top-color: #f74e73;
    box-shadow: 0 1px 0 #df5474, 0 -1px 0 #fd7a97, 0 2px 5px rgba(0, 0, 0, 1.0);
}

.providers-btn:hover .play-btn {
    animation: playBtnAnim 2s ease 1 forwards;
}

@keyframes playBtnAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    20% {
        opacity: 1;
        transform: scale(1.1);
    }
    60% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

.play-btn:before,
.play-btn:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.play-btn:before {
    background-image: linear-gradient(#c82b4e, #ff6d38);
}

.play-btn:after {
    transition: 0.3s;
    opacity: 0;
    background-image: linear-gradient(#fd7a97, #cb3556);
}

.play-btn:hover:after {
    opacity: 1;
}

.providers-btn .a-footer {
    width: 100%;
    height: 50px;
    background-color: rgba(7, 11, 19, 0.75);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0 5px;
    z-index: 4;
}

.providers-btn .a-name {
    width: 100%;
    display: inline-block;
    margin: 8px 0 0;
}

.providers-btn .tag {
    width: 75%;
    height: 32px;
    left: 0;
    bottom: 50px;
    position: absolute;
    color: #ffffff;
    padding: 0 0 0 20px;
    font-size: 12px;
    transition: 0.3s;
}

.providers-btn:hover .tag {
    transform: translateX(-100%);
}

.providers-btn .tag i {
    font-size: 11px;
}

.providers-btn .tag:before {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    transform-origin: bottom right;
    transform: skew(25deg);
    border-radius: 0 8px 0 0;
    background-image: linear-gradient(to left, #808080, #2a2a2a);
}

.providers-btn .tag:before {
    background-image: linear-gradient(#63a6f2, #163c67);
}


/* Sports Btn */

.sports-btn {
    width: calc(50% - 30px);
    max-width: 550px;
    margin: 0 15px 30px;
    color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    background-color: #000000;
    opacity: 0;
    animation: providersBtnAnim 0.8s ease 1 forwards;
}

.sports-btn:hover {
    color: #ffffff;
}

.sports-btn .a-img {
    width: 100%;
    transition: 0.3s;
}

.sports-btn:hover .a-img {
    opacity: 0.5;
}

.sports-btn .icon-panel {
    width: 100%;
    position: absolute;
    right: 2%;
    top: 0;
    text-align: right;
}

.sports-btn .icon-panel img {
    width: 23.64%;
}

.sports-btn .a-footer {
    width: 100%;
    height: 88px;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 8px 30px 0 0;
}

.sports-btn .a-footer:before,
.sports-btn .a-footer:after {
    width: 110%;
    height: 100%;
    transform-origin: top right;
    right: 0;
    top: 0;
    background-image: linear-gradient(#343c4e, #1c2332);
    border-radius: 10px 20px 0 0;
    transform: rotate(-5deg);
}

.sports-btn .a-footer:after {
    background-image: linear-gradient(#6a91b8, #224668, #0c2137);
    transition: 0.3s;
    opacity: 0;
}

.sports-btn:hover .a-footer:after {
    opacity: 1;
}

.sports-btn .a-footer .kr-text,
.sports-btn .a-footer .en-text {
    width: 100%;
    display: inline-block;
    text-align: right;
}

.sports-btn .a-footer .kr-text {
    font-size: 20px;
}

.sports-btn .a-footer .en-text {
    color: #7c8498;
}

.sports-btn .play-btn {
    width: 90%;
    max-width: 130px;
    height: 45px;
    border-radius: 8px;
}

.sports-btn:hover .play-btn {
    animation: playBtnAnim 2s ease 1 forwards;
}


/* Modal Footer */

.modal-footer {
    width: 100%;
    max-width: 100%;
    height: 70px;
    margin: -70px 0 0;
    color: #454f5a;
    font-size: 10px;
    padding: 0;
    letter-spacing: 1px;
    border: none;
}

.modal-footer .container {
    border-top: solid 1px rgba(31, 46, 66, 0.6);
}


/* Gamelist Section */

.gamelist-section {
    margin: -20px 0 0;
    padding: 0 10px;
    animation: gamelistAnim 1s ease 1 forwards;
}

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

.gamelist-header {
    position: relative;
}

.gamelist-header .title {
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
}

.gamelist-header .back-btn {
    position: absolute;
    background-color: transparent;
    border: none;
    left: 0;
    color: #7d91a8;
    font-size: 18px;
}

.gamelist-header .back-btn:hover {
    color: #ffffff;
}

.gamelist-header .back-btn i {
    color: #6ae4fa;
    margin-right: 3px;
    transition: 0.3s;
}

.gamelist-header .back-btn:hover i {
    color: #fff65e;
}

.gamelist-menu {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    background-color: rgba(29 ,37, 50, 0.9);
    border: solid 1px #283145;
    margin: 15px 0 30px;
}

.gamelist-menu ul {
    width: 100%;
    max-width: 800px;
    height: 100%;
}

.gamelist-menu ul li {
    height: 100%;
    padding: 0 20px;
}

.gamelist-menu ul li:after {
    content: '';
    width: 1px;
    height: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.gamelist-menu ul li:last-child:after {
    display: none;
}

.gamelist-menu ul li a {
    color: #7c8498;
}

.gamelist-menu ul li a:hover {
    color: #ffffff;
}

.gamelist-menu ul li a.active {
    color: #ffffff;
}

.gamelist-menu ul li a i {
    margin-right: 3px;
    transition: 0.3s;
}

.gamelist-menu ul li a:hover i {
    color: #6ae4fa;
}

.gamelist-menu ul li a.active i {
    color: #6ae4fa;
}


/* Game Btn */

.gamelist-container {
    width: calc(100% + 20px);
    margin: 0 -10px;
}

.game-btn {
    width: calc(14.28% - 20px);
    margin: 0 10px 25px;
    display: inline-block;
    color: #7d8396;
}

.game-btn:hover {
    color: #ffffff;
}

.game-btn .g-panel {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background-color: #000000;
}

.game-btn .g-panel:before,
.game-btn .g-panel:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 20px;
    z-index: 1;
    transition: 0.3s;
}

.game-btn .g-panel:before {
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.game-btn .g-panel:after {
    border-radius: 22px;
    border: solid 1px #06b7f7;
    opacity: 0;
}

.game-btn:hover .g-panel:after {
    opacity: 1;
}

.game-btn .g-img {
    transition: 0.3s;
}

.game-btn:hover .g-img {
    opacity: 0.5;
}

.game-btn .play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    padding: 0 0 2px 3px;
}

.game-btn:hover .play-btn {
    animation: playBtnAnim 2s ease 1 forwards;
}

.game-btn .g-name {
    width: 100%;
    display: inline-block;
    margin: 5px 0 0;
    max-width: 96%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}