@import url("https://font.elice.io/css?family=Elice+DX+Neolli");

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

@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.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: #0f0f14;
    color: #ffffff;
    font-size: 14px;
    font-family: 'Elice DX Neolli', sans-serif;
    font-weight: 300;
}

body.active {
    overflow: hidden;
}

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

button { padding: 0; }

p { margin: 0; }

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

.font-light { font-weight: 300 !important; }

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

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

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

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

.text-green { color: #96ff6c !important; }

.text-blue { color: #afc5ff !important; }

.text-gray { color: #b2bdcf !important; }

.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#fffdcf, #fffdcf, #ffff5d, #ffaf4e, #ffaf4e);
    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-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;
    align-content: 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;
}

.min-h-auto {
    min-height: auto !important;
}

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

.easy-ticker ul {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    padding: 0;
    position: relative !important;
}

.easy-ticker ul li {
    list-style: none;
    width: auto;
    height: auto;
    position: relative;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}

.container {
    position: relative;
}

@media (min-width: 1560px) {
    .container {
        max-width: 1430px;
    }
}


/* Button Styles */

.btn-red, .btn-gray, .btn-yellow {
    color: #ffffff;
    background-color: #ff230a;
    border-radius: 30px;
    overflow: hidden;
    border: none;
    position: relative;
    font-weight: 300;
    z-index: 1;
}

.btn-yellow {
    color: #68390b;
    background-color: #ffd633;
}

.btn-gray {
    background-color: #21212b;
    border: solid 1px #373744;
    color: #b2bdcf;
}

.btn-red i, .btn-gray i, .btn-yellow i {
    color: rgba(0, 0, 0, 0.75);
    font-size: 18px;
    margin-right: 5px;
}

.btn-gray i {
    color: #b2bdcf;
}


@media(min-width: 1201px){
    .btn-red:hover {
        background-color: #b41e0d;
    }

    .btn-yellow:hover {
        color: #ffffff;
        background-color: #ff970f;
    }

    .btn-gray:hover {
        color: #ffffff;
        background-color: #3b3b4a;
        border-color: #4e4e61;
    }
}


/* Wrapper */

.wrapper {
    width: 100%;
    min-height: 100%;
    min-width: 360px;
    position: relative;
    overflow: hidden;
    padding: 100px 0 0;
    z-index: initial;
}

.wrapper:before {
    width: 100%;
    height: 100%;
    max-height: 619px;
    left: 0;
    top: 0;
    background-image: url(/brands/win_new/static/img/bg/main-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.75;
    animation: wrapperBgAnim 12s linear infinite;
    z-index: initial;
}

@keyframes wrapperBgAnim {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

.wrapper.affix {
    padding: 130px 0 0;
}


/* Header Section */

.header-section {
    width: 100%;
    height: 99px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: #1a1a22;
    border-bottom: solid 1px #242430;
    box-shadow: 0 1px 0 #000000;
}

.header-section .container-fluid {
    max-width: 1920px;
    flex-wrap: nowrap;   /* never let the login button wrap to a second row */
}

/* PC: align the header with the banner below — logo centered over the
   left-menu column (320px) and the top menu starting at the banner's
   left edge (320 + 18px gap = 338px), so they share one vertical guide. */
@media (min-width: 1321px) {
    .header-section .container-fluid {
        max-width: none;
        padding-left: 0;
        padding-right: 16px;
    }

    .header-section .container-fluid .logo {
        flex: 0 0 290px;
        width: 290px;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }

    .header-section .main-menu {
        flex: 1 1 auto;
        margin: 0 18px;
    }

    /* spread the items so the menu pill fills the whole width up to the login */
    .header-section .main-menu > ul {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
}

.affix .header-section {
    position: fixed;
    top: 0;
    left: 0;
}

.logo {
    width: 225px;
    display: inline-block;
    margin: 10px 0 0;
    position: relative;
}

/* header logo: character next to the WIN text */
.header-section .logo {
    display: inline-flex;
    align-items: flex-end;
    width: auto;
    padding-bottom: 6px;
}

/* shared lit "stage" under the character + WIN so they read as one unit */
.header-section .logo::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 2%;
    bottom: 0;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 196, 60, 0.55) 0%,
        rgba(255, 170, 0, 0.28) 38%,
        rgba(255, 170, 0, 0) 72%
    );
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
    animation: lgStageGlow 2.4s ease-in-out infinite alternate;
}

.header-section .logo .logo-char,
.header-section .logo .logo-text {
    position: relative;
    z-index: 1;
}

.header-section .logo .logo-char {
    position: relative;
    right: auto;
    bottom: auto;
    height: 66px;
    width: auto;
    margin-right: -6px;
    transform-origin: 60% 100%;
    /* warm gold-tinted shadow so the WIN glow appears to spill onto the character */
    filter:
        drop-shadow(-4px 0 6px rgba(255, 184, 0, 0.45))
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
    animation: lgCharBob 5s ease-in-out infinite;
}

/* character bobs in sync with the WIN pop (same 5s cycle) so they move together */
@keyframes lgCharBob {
    0%   { transform: translateY(0) rotate(0deg); }
    6%   { transform: translateY(-6px) rotate(3deg); }
    12%  { transform: translateY(1px) rotate(-2deg); }
    18%  { transform: translateY(-2px) rotate(1deg); }
    24%  { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* the ground glow brightens with the WIN glow pulse */
@keyframes lgStageGlow {
    0%   { opacity: 0.55; transform: scaleX(0.92); }
    100% { opacity: 1;    transform: scaleX(1.04); }
}

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

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

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

.logo .logo-text {
    position: relative;
    display: inline-block;
    font-size: 66px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: 3px;
    padding: 2px 6px 6px;
    background: linear-gradient(
        100deg,
        #d98a00 0%,
        #ffd24d 14%,
        #fff7cc 26%,
        #ffffff 33%,
        #ffe06b 42%,
        #ffb400 58%,
        #ffe06b 72%,
        #fff7cc 82%,
        #ffd24d 92%,
        #d98a00 100%
    );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(120, 60, 0, 0.35);
    filter:
        drop-shadow(0 1px 0 rgba(120, 60, 0, 0.55))
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 9px rgba(255, 184, 0, 0.6));
    transform-origin: center bottom;
    will-change: transform, background-position, filter;
    animation:
        lgWinShine 3s linear infinite,
        lgWinGlow 2.4s ease-in-out infinite alternate,
        lgWinPop 5s ease-in-out infinite;
}

/* sweeping glare streak across the letters */
.logo .logo-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    padding: inherit;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0) 62%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lgWinGlare 4.5s ease-in-out infinite;
}

/* flowing metallic gold shimmer */
@keyframes lgWinShine {
    0%   { background-position: 0% 50%; }
    100% { background-position: -260% 50%; }
}

/* pulsing outer glow */
@keyframes lgWinGlow {
    0% {
        filter:
            drop-shadow(0 1px 0 rgba(120, 60, 0, 0.55))
            drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 6px rgba(255, 170, 0, 0.45));
    }
    100% {
        filter:
            drop-shadow(0 1px 0 rgba(120, 60, 0, 0.55))
            drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 16px rgba(255, 200, 40, 0.95));
    }
}

/* lively breathing pop with a little wiggle each cycle */
@keyframes lgWinPop {
    0%   { transform: scale(1) rotate(0deg); }
    6%   { transform: scale(1.14) rotate(-3deg); }
    12%  { transform: scale(0.97) rotate(2deg); }
    18%  { transform: scale(1.04) rotate(-1deg); }
    24%  { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* the bright glare streak sweeping left to right */
@keyframes lgWinGlare {
    0%   { background-position: 160% 0; }
    45%  { background-position: -60% 0; }
    100% { background-position: -60% 0; }
}

.logo .icon {
    width: 36.45%;
    top: 0;
    left: 0;
    animation: lgIconAnim 8s ease infinite;
}

@keyframes lgIconAnim {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }
    5% {
        opacity: 1.0;
        transform: rotate(20deg);
    }
    10% {
        opacity: 1.0;
        transform: rotate(-10deg);
    }
    15% {
        opacity: 1.0;
        transform: rotate(5deg);
    }
    20% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
    95% {
        opacity: 1.0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }
}

.logo .melon {
    width: 72%;
    top: 30%;
    left: 28%;
    animation: lgMelonAnim 8s ease infinite;
}

@keyframes lgMelonAnim {
    0% {
        opacity: 0;
        transform: scale(0.25) translateY(150%);
    }
    5% {
        opacity: 0;
        transform: scale(0.25) translateY(150%);
    }
    13% {
        opacity: 1.0;
        transform: scale(1.1) translateY(0);
    }
    21% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0) translateY(0);
    }
}

.logo .slot {
    width: 35.56%;
    bottom: -9%;
    left: 45.5%;
    animation: lgSlotAnim 8s ease infinite;
}

@keyframes lgSlotAnim {
    0% {
        opacity: 0;
        transform: scale(0.25) translateY(100%);
    }
    7% {
        opacity: 0;
        transform: scale(0.25) translateY(100%);
    }
    15% {
        opacity: 1.0;
        transform: scale(1.1) translateY(-15%);
    }
    23% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0) translateY(0);
    }
}

.logo .symbol {
    width: 12.45%;
    bottom: 2%;
    right: 8%;
}

.logo .symbol .d-img {
    float: left;
    opacity: 0;
}

.logo .arrow-left {
    width: 28.6%;
    bottom: 0;
    left: 0;
    animation: lgArrowLeftAnim 8s ease infinite;
}

@keyframes lgArrowLeftAnim {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    15% {
        opacity: 0;
        transform: scale(1.5);
    }
    18% {
        opacity: 1.0;
        transform: scale(0.8);
    }
    22% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.logo .arrow-right {
    width: 28.6%;
    bottom: 0;
    right: 0;
    animation: lgArrowRightAnim 8s ease infinite;
}

@keyframes lgArrowRightAnim {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    17% {
        opacity: 0;
        transform: scale(1.5);
    }
    20% {
        opacity: 1.0;
        transform: scale(0.75);
    }
    24% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.logo .arrow-up,
.logo .arrow-down {
    width: 28.6%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.logo .arrow-up {
    top: 0;
    animation: lgArrowUpAnim 8s ease infinite;
}

@keyframes lgArrowUpAnim {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    19% {
        opacity: 0;
        transform: scale(1.5);
    }
    22% {
        opacity: 1.0;
        transform: scale(0.75);
    }
    26% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.logo .arrow-down {
    bottom: 0;
    animation: lgArrowDownAnim 8s ease infinite;
}

@keyframes lgArrowDownAnim {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    21% {
        opacity: 0;
        transform: scale(1.5);
    }
    24% {
        opacity: 1.0;
        transform: scale(0.75);
    }
    28% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.logo .red {
    width: 24%;
    top: -4%;
    left: 28%;
    animation: lgRedAnim 8s ease infinite;
}

@keyframes lgRedAnim {
    0% {
        opacity: 0;
        transform: scale(0.25) translateY(150%);
    }
    5% {
        opacity: 0;
        transform: scale(0.25) translateY(150%);
    }
    13% {
        opacity: 1.0;
        transform: scale(1.1) translateY(0);
    }
    21% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0) translateY(0);
    }
}



/* Main Menu */

.main-menu {
    position: relative;
    height: 60px;
    border-radius: 30px;
    background: linear-gradient(180deg, #2e2e3b 0%, #1e1e28 100%);
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 5px 16px rgba(0, 0, 0, 0.45);
    margin: 0 0 0 22px;
    animation: menuGlow 4s ease-in-out infinite;
}
@keyframes menuGlow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 5px 16px rgba(0,0,0,0.45), 0 0 0 rgba(255, 192, 52,0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 5px 16px rgba(0,0,0,0.45), 0 0 18px rgba(255, 192, 52,0.22); }
}

/* ===== a flame that runs around the top-menu border (PC only) ===== */
@property --flame-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes menuFlame {
    to { --flame-angle: 360deg; }
}
@media (min-width: 1321px) {
    .header-section .main-menu::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;                 /* ring thickness */
        background: conic-gradient(from var(--flame-angle),
            rgba(255, 90, 0, 0) 0deg,
            rgba(255, 90, 0, 0) 246deg,
            #ff2a00 280deg,
            #ff7a00 300deg,
            #ffd24d 314deg,
            #fff3b0 322deg,
            #ffd24d 330deg,
            #ff7a00 344deg,
            rgba(255, 90, 0, 0) 360deg);
        /* show only the border ring */
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        z-index: 1;
        filter: drop-shadow(0 0 5px rgba(255, 110, 0, 0.85));
        animation: menuFlame 2.6s linear infinite;
    }
}

.main-menu .btn-panel {
    width: 50px;
    height: calc(100% - 5px);
    background-color: #1a1a22;
    border-radius: 25px 25px 0 0;
    margin: 5px 0 0 40px;
    padding: 3px;
}

.main-menu .btn-panel:before,
.main-menu .btn-panel:after {
    width: 40px;
    height: 40px;
    border-radius: 0 0 20px 0;
    bottom: 0;
    left: -40px;
    box-shadow: 5px 5px 0 #1a1a22;
}

.main-menu .btn-panel:after {
    left: auto;
    right: -40px;
    border-radius: 0 0 0 20px;
    box-shadow: -5px 5px 0 #1a1a22;
}

.sound-btn {
    width: 100%;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: #464658;
    color: #ffffff;
    font-size: 16px;
}

.sound-btn.mobile {
    width: 36px;
    height: 36px;
    margin-left: 15px;
}

.sound-btn:hover {
    background-color: #636b8d;
}

.sound-btn.active {
    animation: shadowAnim 1s ease infinite;
}

@keyframes shadowAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(70, 70, 88, 1.0);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(70, 70, 88, 0);
    }
}

.main-menu ul li {
    padding: 0 15px;
    white-space: nowrap;
}

.main-menu ul li .link-a {
    color: #b2bdcf;
    font-size: 15.5px;
    z-index: 2;
}

.main-menu ul li .link-a:before {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid #ff230a;
    border-bottom: 6px solid transparent;
    top: 0;
    bottom: 2px;
    right: -20px;
    margin: auto 0;
    transition: 0.3s;
    opacity: 0;
    transform: translateX(-50%);
}

.main-menu ul li .link-a i {
    color: #d2daff;
    font-size: 19px;
    margin-right: 7px;
    display: inline-block;
    transition: 0.3s;
}

.main-menu ul li .link-a .text {
    position: relative;
    display: inline-block;
}

.main-menu ul li .link-a .text:after {
    content: '';
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 192, 52,0) 0%, #ffd24d 28%, #ff7a00 50%, #ffd24d 72%, rgba(255, 192, 52,0) 100%);
    left: 0;
    right: 0;
    bottom: -7px;
    margin: 0 auto;
    position: absolute;
    transition: 0.3s;
    opacity: 0;
    transform: scaleX(0.3);
    box-shadow: 0 0 8px rgba(255, 180, 0, 0.85);
}


/* Depth Dropdown */

.depth-btn {
    cursor: pointer;
    position: relative;
}

.depth-btn .link-a i {
    transition: 0.3s;
}

.drop-d {
    width: 218px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    transition: 0.3s;
    z-index: 1;
}

.drop-d.active {
    pointer-events: auto;
}

.drop-d .drop-d-inner {
    width: 100%;
    float: left;
    background-color: #26262f;
    border: solid 1px #34343f;
    border-radius: 15px;
    padding: 10px;
    margin-top: 20px;
    opacity: 0;
    transition: 0.3s;
    position: relative;
}

.drop-d.active .drop-d-inner {
    margin-top: 35px;
    opacity: 1;
}

.drop-d .depth-a {
    width: 100%;
    height: 50px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    transition: 0.3s;
    margin: 0 0 3px;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgba(164, 164, 195, 0.05);
    border: solid 1px rgba(164, 164, 195, 0.1);
    z-index: 1;
}

.drop-d a:last-child {
    margin-bottom: 0;
}

.drop-d .depth-a .icon-panel {
    width: 46px;
    height: calc(100% - 4px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    margin: auto 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    overflow: hidden;
    color: #ffe07a;
    font-size: 20px;
}

/* brand character image fills the circular icon, framed on the face */
.drop-d .depth-a .icon-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
}

.drop-d .depth-a .text-cont {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-left: 61px;
    z-index: 1;
    position: relative;
    color: #b2bdcf;
    font-size: 14px;
}

.drop-d .depth-a .text-cont span {
    transition: 0.3s;
}

@media(min-width: 1261px){
    .main-menu ul li .link-a:hover:before {
        opacity: 1;
        transform: translateX(0);
    }

    .main-menu ul li .link-a:hover {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 196, 60, 0.55);
    }

    .main-menu ul li .link-a:hover i {
        color: #ffd24d;
        transform: scale(1.18) translateY(-1px);
        filter: drop-shadow(0 0 7px rgba(255, 192, 52, 0.85));
    }

    .main-menu ul li .link-a:hover .text:after {
        opacity: 1;
        transform: scaleX(1);
    }

    .depth-btn:hover .link-a {
        color: #ffffff;
    }

    .depth-btn:hover .link-a:before {
        opacity: 1;
        transform: translateX(0);
    }

    .depth-btn:hover .link-a i {
        color: #ff230a
    }

    .drop-d .depth-a:hover {
        background-color: rgba(255, 200, 80, 0.14);
        border-color: rgba(255, 204, 88, 0.5);
        box-shadow: 0 0 10px rgba(255, 190, 60, 0.2);
    }

    .drop-d .depth-a:hover .icon-panel {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .drop-d .depth-a:hover .icon-panel i {
        color: #ffce5a;
        animation: shakeAnim 1s ease 1;
    }

    .drop-d .depth-a:hover .text-cont {
        color: #ffe07a;
        text-shadow: 0 0 8px rgba(255, 190, 60, 0.4);
    }
}


/* Before After Login */

.before-login,
.after-login {
    display: none;
}

.before-login.active,
.after-login.active {
    display: block;
}

.before-login button {
    width: 188px;
    height: 56px;
    margin-left: 8px;
}

.before-login .btn-gray {
    height: 56px;
    margin: -1px 0;
}

.login-link .text {
    font-size: 16px;
    font-weight: 500;
}

/* Donald head as the login button's icon (replaces the old arrow) */
.login-donald {
    height: 46px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
    transform-origin: 55% 90%;
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 5px rgba(255, 190, 60, 0.5));
    animation: loginDonaldHop 2.2s ease-in-out infinite;
    pointer-events: none;
}
/* lively hop + wiggle, then a short rest */
@keyframes loginDonaldHop {
    0%, 60%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    10% { transform: translateY(-7px) rotate(-11deg) scale(1.12); }
    20% { transform: translateY(0) rotate(8deg) scale(1); }
    30% { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
    40% { transform: translateY(0) rotate(4deg) scale(1); }
    50% { transform: translateY(-2px) rotate(-2deg) scale(1.03); }
}

/* login button hover effect: lift + gold glow border, Donald perks up */
.login-link {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.login-link:hover {
    transform: translateY(-2px);
    background-color: #2a2a36;
    border-color: rgba(255, 204, 88, 0.85);
    box-shadow: 0 0 16px rgba(255, 190, 60, 0.55);
}
.login-link:hover .text {
    color: #ffe07a;
}
.login-link:hover .login-donald {
    animation-duration: 0.7s;   /* hops much faster / more frantic on hover */
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 10px rgba(255, 200, 70, 0.95));
}


/* After Login */

.al-d-info {
    margin: 0 40px 0 0;
}

.al-d-info .icon {
    font-size: 24px;
    margin-right: 5px;
}

.after-login button {
    width: 140px;
    height: 48px;
    margin-left: 5px;
}

.after-login .btn-gray {
    height: 50px;
    margin-top: -1px;
    margin-bottom: -1px;
}

.after-login .mobile button {
    width: 130px;
}

.after-login .btn-grp.mobile button {
    width: 100%;
    height: 40px;
    margin: 0 0 8px;
}

.after-login .nav-btn {
    font-size: 24px;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: #9aa1b2;
    margin-right: 30px;
}

.after-login .nav-btn:hover {
    color: #d0dbf3;
}


/* Dropdown */

.drop-down {
    position: relative;
    transition: 0.3s;
}

.drop-down .toggle-btn .arrow-icon {
    color: #FF230A;
    font-size: 18px;
    transition: 0.3s;
}

.drop-down.active .toggle-btn .arrow-icon {
    transform: rotate(180deg);
}

.drop-down-menu {
    width: 240px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 75%;
    background-color: #26262f;
    border: solid 1px #34343f;
    border-radius: 15px;
    padding: 10px;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.drop-down.active .drop-down-menu {
    top: calc( 100% + 10px );
    opacity: 1;
    pointer-events: auto;
}


/* Account Info */

.after-login .account-info {
    padding: 0;
}

.after-login .account-info .row {
    width: 100%;
    height: 48px;
    cursor: pointer;
    margin: 0;
    background-color: rgba(164, 164, 195, 0.05);
    border: solid 1px rgba(164, 164, 195, 0.1);
    margin-bottom: 3px;
    border-radius: 10px;
    color: #d1c7c7;
}

.after-login .account-info .labels{
    text-align:left;
    min-width:110px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font-size: 12px;
    padding: 0 0 0 54px;
}

.after-login .account-info .labels .icon-panel {
    width: 44px;
    height: calc(100% - 6px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    margin: auto 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    overflow: hidden;
    font-size: 20px;
}

.after-login .account-info .information{
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:center;
    color: #ffffff;
    font-size: 14px;
    padding: 0 0 0 5px;
}

.after-login .account-info .information .symbol{
    color: #a3bbd7;
    margin-left:3px;
}


/* Top Section */

.top-section {
    background-color: #16161d;
    padding: 52px 0 15px;
}

.top-section:before {
    width: 100%;
    height: 100px;
    left: 0;
    bottom: -60px;
    background-image: linear-gradient(transparent, #16161d, #16161d);
}

/* curved wave below the CTA cards removed */
.top-section:after {
    display: none;
}

.marquee-section {
    width: 100%;
    height: 40px;
    left: 0;
    top: 0;
    background: rgba(12, 11, 14, 0.62);
    box-shadow:
        inset 0 -1.5px 0 rgba(255, 208, 96, 0.8),
        inset 0 1px 0 rgba(255, 200, 80, 0.12);
    position: absolute;
    z-index: 20;
}

.marquee-section .icon-panel {
    width: 30px;
    height: 30px;
    color: #3a2700;
    font-size: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd24d 0%, #e0a020 100%);
    box-shadow: 0 0 8px rgba(255, 190, 60, 0.5);
}

.marquee-section .icon-panel i {
    display: inline-block;
    animation: shakeAnim 1s ease infinite;
}

@keyframes shakeAnim {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.marquee-section .marquee-wrap {
    width: calc(100% - 40px);
    font-size: 15px;
    letter-spacing: 1px;
    margin-left: auto;
    overflow: hidden;
}

.marquee ul li {
    color: #cdbf9e;
    font-size: 13px;
    white-space: nowrap;
    padding: 4px 80px 0;
    border-right: solid 1px rgba(255, 200, 80, 0.22);
}

.marquee ul li:last-child {
    border-right: none;
}

/* PC: push the bell icon to the far left (almost flush) and let the
   notice slide span the full width, matching the flush left menu below. */
@media (min-width: 1321px) {
    .marquee-section .container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .marquee-section .icon-panel {
        flex: 0 0 30px;
    }
}


/* Banner Section */

.banner-section {
    height: 320px;
}

.banner-section .container {
    height: 320px;
    padding-bottom: 80px;
}

/* Banner main wrapper: transparent passthrough on mobile (children flow into
   .container exactly as before), becomes the right-hand card on PC. */
.banner-main {
    display: contents;
}

/* Left banner menu is PC-only; mobile keeps its own hamburger nav. */
.banner-side-menu {
    display: none;
}

/* ============================================================
   PC (>=1321px): left vertical menu beside a narrower banner.
   Mirrors the header's top menu on the left; banner shrinks to fit.
   ============================================================ */
@media (min-width: 1321px) {
    .banner-section .container {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap;   /* never let the banner wrap below the menu */
        gap: 18px;
        padding-bottom: 0;
    }

    /* Left side menu (wider to fit the 2-column action grid) */
    .banner-side-menu {
        flex: 0 0 290px;
        width: 290px;
        height: 100%;
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 20;
    }

    /* Top 2x2 grid: 충전 · 출금 / 마이페이지 · 고객센터 */
    .banner-side-menu .bsm-grid {
        flex: 2 1 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
    }

    /* grid cells are narrower, so trim spacing/size a touch */
    .banner-side-menu .bsm-grid .bsm-link {
        padding: 0 14px;
        gap: 9px;
        font-size: 16px;
    }

    .banner-side-menu .bsm-grid .bsm-link i {
        font-size: 19px;
    }

    .banner-side-menu .bsm-link {
        position: relative;
        overflow: hidden;
        flex: 1 1 0;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
        border-radius: 12px;
        background: linear-gradient(180deg, #2c2c39 0%, #1b1b24 100%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 2px 6px rgba(0, 0, 0, 0.4);
        color: #e7e7ef;
        font-size: 17px;
        font-weight: 500;
        line-height: 1;
        transition: 0.25s;
    }

    /* icon + label sit above the gif background */
    .banner-side-menu .bsm-link i,
    .banner-side-menu .bsm-link span {
        position: relative;
        z-index: 2;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    .banner-side-menu .bsm-link i {
        font-size: 21px;
        color: #ffd24d;
        transition: 0.25s;
    }

    /* gif as an enlarged background filling the whole button */
    .banner-side-menu .bsm-link .bsm-gif {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: right center;
        opacity: 0.6;
        pointer-events: none;
    }
    /* left-to-right shade so the icon/label stay readable over the gif */
    .banner-side-menu .bsm-casino::after,
    .banner-side-menu .bsm-slot::after,
    .banner-side-menu .bsm-live::after,
    .banner-side-menu .bsm-sports::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg,
            rgba(15, 15, 20, 0.92) 0%,
            rgba(15, 15, 20, 0.55) 42%,
            rgba(15, 15, 20, 0.15) 100%);
    }
    /* gold-line border on the 4 gif menu buttons */
    .banner-side-menu .bsm-casino,
    .banner-side-menu .bsm-slot,
    .banner-side-menu .bsm-live,
    .banner-side-menu .bsm-sports {
        border: 1.5px solid rgba(255, 204, 88, 0.7);
    }

    .banner-side-menu .bsm-link:hover {
        background: linear-gradient(180deg, #ff3a1f 0%, #d51800 100%);
        border-color: rgba(255, 196, 60, 0.55);
        color: #ffffff;
        transform: translateX(3px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 4px 12px rgba(213, 24, 0, 0.5);
    }

    .banner-side-menu .bsm-link:hover i {
        color: #ffffff;
    }

    /* Banner becomes the remaining-width card */
    .banner-main {
        display: flex;
        align-items: center;
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        border-radius: 20px 0 0 20px;
        overflow: hidden;
        background:
            linear-gradient(135deg,
                rgba(38, 38, 52, 0.55) 0%,
                rgba(18, 18, 26, 0.82) 55%,
                rgba(14, 14, 20, 0.9) 100%);
        border: 1.5px solid rgba(255, 202, 84, 0.6);
        border-right: none;
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 0 14px rgba(255, 190, 60, 0.25);
    }

    /* The carousel + characters now live inside the narrower banner card */
    .banner-main .banner-carousel {
        padding-left: 6%;
    }

    .banner-main .banner-carousel h1 {
        font-size: 22px;
    }

    .banner-main .banner-carousel h6 {
        font-size: 13px;
    }

    /* Keep the character cluster inside the (clipped) card.
       max-width caps their size so they don't outgrow the card height
       when the banner stretches wide on large monitors. */
    .banner-main .banner-background .melon {
        width: 34%;
        max-width: 410px;
        right: 6%;
    }
}

/* ============================================================
   Banner bottom CTA row — full-width illustrated category cards.
   PC only (mobile keeps its own category scroller).
   ============================================================ */
.banner-cta {
    display: none;
}

@media (min-width: 1321px) {
    .banner-cta {
        display: flex;
        width: 100%;
        gap: 12px;
        padding: 16px 0 0;
    }

    .bcta-card {
        flex: 1 1 0;
        min-width: 0;
        position: relative;
        display: block;
        height: clamp(290px, 20vw, 400px);
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        background:
            radial-gradient(120% 80% at 50% 38%,
                rgba(150, 102, 20, 0.5) 0%,
                rgba(60, 40, 8, 0.22) 42%,
                rgba(8, 6, 3, 0) 70%),
            linear-gradient(180deg, #1f1808 0%, #0c0904 55%, #050402 100%);
        border: 2px solid #c9961e;
        box-shadow:
            inset 0 0 0 1px rgba(255, 200, 90, 0.35),
            inset 0 0 60px rgba(0, 0, 0, 0.85),
            0 12px 30px rgba(0, 0, 0, 0.55);
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }

    .bcta-card:hover {
        transform: translateY(-6px);
        border-color: #ffc23c;
        box-shadow:
            inset 0 0 0 1px rgba(255, 215, 130, 0.5),
            inset 0 0 60px rgba(0, 0, 0, 0.8),
            0 20px 44px rgba(150, 105, 10, 0.45);
    }

    /* central red ambient light behind the illustration */
    .bcta-light {
        position: absolute;
        left: 50%;
        top: 52%;
        width: 80%;
        height: 48%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse at center,
            rgba(255, 190, 70, 0.55) 0%,
            rgba(200, 130, 20, 0.28) 40%,
            rgba(120, 70, 4, 0) 72%);
        filter: blur(6px);
        pointer-events: none;
        z-index: 1;
        transition: 0.4s;
    }
    .bcta-card:hover .bcta-light {
        background: radial-gradient(ellipse at center,
            rgba(255, 205, 95, 0.7) 0%,
            rgba(225, 150, 30, 0.35) 40%,
            rgba(120, 70, 4, 0) 72%);
    }

    /* golden casino-floor bokeh along the bottom */
    .bcta-floor {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 36%;
        z-index: 1;
        pointer-events: none;
        background:
            radial-gradient(circle at 8% 86%, rgba(255, 196, 90, 0.9) 0, rgba(255, 196, 90, 0) 7px),
            radial-gradient(circle at 20% 94%, rgba(255, 170, 60, 0.8) 0, rgba(255, 170, 60, 0) 9px),
            radial-gradient(circle at 33% 88%, rgba(255, 210, 120, 0.7) 0, rgba(255, 210, 120, 0) 6px),
            radial-gradient(circle at 47% 96%, rgba(255, 180, 70, 0.85) 0, rgba(255, 180, 70, 0) 10px),
            radial-gradient(circle at 60% 89%, rgba(255, 205, 110, 0.7) 0, rgba(255, 205, 110, 0) 7px),
            radial-gradient(circle at 73% 95%, rgba(255, 175, 65, 0.8) 0, rgba(255, 175, 65, 0) 9px),
            radial-gradient(circle at 86% 87%, rgba(255, 200, 95, 0.75) 0, rgba(255, 200, 95, 0) 7px),
            radial-gradient(circle at 95% 93%, rgba(255, 170, 60, 0.7) 0, rgba(255, 170, 60, 0) 8px),
            linear-gradient(180deg, rgba(120, 40, 0, 0) 0%, rgba(160, 55, 5, 0.22) 60%, rgba(90, 30, 0, 0.5) 100%);
        filter: blur(1.5px);
    }

    .bcta-head {
        position: relative;
        z-index: 3;
        padding-top: 30px;
    }

    .bcta-title {
        display: block;
        position: relative;
        font-size: clamp(30px, 2.6vw, 48px);
        font-weight: 900;
        letter-spacing: 0.5px;
        line-height: 1;
        white-space: nowrap;
        background: linear-gradient(180deg, #ffe89a 0%, #ffce5a 30%, #e0a020 62%, #ffd24d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px rgba(70, 45, 0, 0.55);
        filter:
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 10px rgba(255, 180, 40, 0.55));
    }
    /* glossy top highlight on the title */
    .bcta-title::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 46%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        pointer-events: none;
    }

    .bcta-sub {
        display: block;
        margin-top: 8px;
        font-size: clamp(14px, 1.1vw, 19px);
        font-weight: 700;
        letter-spacing: 3px;
        white-space: nowrap;
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    }

    /* central illustration stand-in (icon) */
    .bcta-icon {
        position: absolute;
        left: 50%;
        top: 51%;
        transform: translate(-50%, -50%);
        z-index: 2;
        font-size: clamp(96px, 9vw, 168px);
        line-height: 1;
        color: #ffffff;
        filter:
            drop-shadow(0 0 18px rgba(255, 180, 50, 0.85))
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
        transition: transform 0.4s, filter 0.4s;
    }
    .bcta-card:hover .bcta-icon {
        transform: translate(-50%, -50%) scale(1.08);
        filter:
            drop-shadow(0 0 26px rgba(255, 200, 70, 0.95))
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
    }

    /* ===== background video (replaces the central icon/illustration) ===== */
    .bcta-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
    }
    /* darken top & bottom so the title and description stay readable */
    .bcta-vid-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(8, 6, 3, 0.74) 0%,
            rgba(8, 6, 3, 0.26) 30%,
            rgba(8, 6, 3, 0.30) 60%,
            rgba(8, 6, 3, 0.85) 100%);
    }
    /* the old central icon + ambient glows are superseded by the video */
    .bcta-light, .bcta-floor { display: none; }

    .bcta-desc {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 22px;
        z-index: 3;
        padding: 0 8px;
        font-size: clamp(10px, 0.78vw, 13px);
        font-weight: 700;
        white-space: nowrap;
        color: #f3ecd6;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
    }

    /* slight per-category tint on the central icon */
    .bcta-casino .bcta-icon { color: #ffe08a; }
    .bcta-slot   .bcta-icon { color: #ffd36b; }
    .bcta-live   .bcta-icon { color: #ffce5a; }
    .bcta-sports .bcta-icon { color: #ffffff; }

    /* "라이브 스포츠" is the longest title — shrink it so it stays inside the card */
    .bcta-live .bcta-title {
        font-size: clamp(22px, 1.95vw, 36px);
        letter-spacing: 0;
    }

    /* ===== hover rollover: darken + top-left WIN logo + name + CTA ===== */
    .bcta-card .bcta-over {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        background: linear-gradient(180deg, rgba(8, 6, 3, 0.86) 0%, rgba(4, 3, 1, 0.93) 100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .bcta-card:hover .bcta-over { opacity: 1; }

    /* WIN logo — big, centred at the top of the stack */
    .bcta-over-logo {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }
    .bcta-over-char {
        height: 58px;
        width: auto;
        margin-right: -2px;
        filter:
            drop-shadow(-4px 0 7px rgba(255, 184, 0, 0.45))
            drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
        animation: lgCharBob 5s ease-in-out infinite;
    }
    .bcta-over-win {
        font-size: 42px;
        font-weight: 900;
        font-style: italic;
        line-height: 1;
        letter-spacing: 1px;
        background: linear-gradient(100deg,
            #d98a00 0%, #ffd24d 14%, #fff7cc 26%, #ffffff 33%, #ffe06b 42%,
            #ffb400 58%, #ffe06b 72%, #fff7cc 82%, #ffd24d 92%, #d98a00 100%);
        background-size: 260% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px rgba(120, 60, 0, 0.35);
        filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.6));
        transform-origin: center bottom;
        animation:
            lgWinShine 3s linear infinite,
            lgWinGlow 2.4s ease-in-out infinite alternate,
            lgWinPop 5s ease-in-out infinite;
    }

    /* game name (centre) */
    .bcta-over-name {
        font-size: clamp(30px, 2.6vw, 44px);
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        background: linear-gradient(180deg, #ffe89a 0%, #ffce5a 32%, #e0a020 64%, #ffd24d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 180, 40, 0.5));
        transform: translateY(10px);
        transition: transform 0.35s ease;
    }
    /* "라이브 스포츠" is the longest — shrink it so it stays on one line */
    .bcta-live .bcta-over-name {
        font-size: clamp(22px, 1.95vw, 34px);
        letter-spacing: 0;
    }
    .bcta-card:hover .bcta-over-name { transform: translateY(0); }

    /* 바로가기 button */
    .bcta-over-btn {
        padding: 10px 28px;
        border-radius: 24px;
        background: linear-gradient(180deg, #ffd24d 0%, #e0a020 100%);
        color: #2a1500;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 0 16px rgba(255, 190, 60, 0.55);
        transform: translateY(10px);
        opacity: 0.4;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }
    .bcta-card:hover .bcta-over-btn { transform: translateY(0); opacity: 1; }
}

.banner-carousel {
    width: 100%;
    position: relative;
    z-index: 15;
    padding: 0 0 0 8%;
}

.banner-carousel h1 {
    font-size: 44px;
    margin-bottom: -0.25%;
}

.banner-carousel h6 {
    font-size: 18px;
}

/* Vertical slide is scoped to the .vertical carousel (left half).
   The right carousel has no .vertical class, so Bootstrap's default
   horizontal (translateX) transforms apply instead. */
.vertical .carousel-item-next.carousel-item-left {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.vertical .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.vertical .carousel-item-next,
.vertical .active.carousel-item-right {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.vertical .carousel-item-prev,
.vertical .active.carousel-item-left {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.vertical .carousel-item-next:not(.carousel-item-left),
.vertical .active.carousel-item-right {
  transform: translateY(100%);
}

.vertical .carousel-item-prev:not(.carousel-item-right),
.vertical .active.carousel-item-left {
  transform: translateY(-100%);
}


/* Carousel Nav */

.carousel-nav {
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.carousel-indicators {
    position: relative;
    flex-wrap: wrap;
    margin: 0;
}

.carousel-indicators li {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: solid 1px #494956;
    background-color: rgba(18, 18, 24, 0.5);
    margin: 7px 0;
    opacity: 1.0;
    position: relative;
}

.carousel-indicators li:before {
    content: '';
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    border-radius: 50%;
    background-color: #494956;
    transition: 0.3s;
}

.carousel-indicators li:hover:before {
    background-color: #acb4cb;
}

.carousel-indicators li.active:before {
    background-color: #f5230d;
}

.carousel-control-next,
.carousel-control-prev {
    width: 20px;
    height: 35px;
    position: relative;
    border-radius: 10px;
    background-color: rgba(18, 18, 24, 0.5);
    border: solid 1px #494956;
    margin: 12px 0;
    opacity: 1.0;
}

.carousel-control-next:hover,
.carousel-control-prev:hover {
    color: #ffdf4a;
}


/* Banner Background */

.banner-background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Casino video as the full banner background. */
.banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

/* ---- Split banner: left = video + slide text, right = duck characters ---- */
.banner-half-left {
    position: relative;
}

/* Dark overlay so the slide text stays readable over the video. */
.banner-half-left::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.5) 45%,
        rgba(0, 0, 0, 0.25) 100%);
}

/* Right (characters) half is PC-only; mobile shows just the video + text. */
.banner-half-right {
    display: none;
}

/* Mobile/tablet (<=1320px): the right half is hidden, so the left half must
   fill the whole banner. Without this it shrinks to the slide text width and
   the banner renders as a tiny box. */
@media (max-width: 1320px) {
    /* full-bleed: banner reaches both screen edges (no container side padding) */
    .banner-section .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        height: auto;
    }
    /* give the banner a real height so the video fills it instead of collapsing
       to the text height (which made the video look cropped to a thin slice) */
    .banner-half-left {
        flex: 1 1 100%;
        width: 100%;
        height: 56vw;
        min-height: 200px;
        max-height: 320px;
        display: flex;
        align-items: center;
    }
    /* the vertical slide controls clutter the small mobile banner — hide them
       (the carousel still auto-cycles via data-ride) and let the text use the
       full width */
    .banner-section .carousel-nav {
        display: none;
    }
    .banner-main .banner-carousel {
        padding-left: 7%;
    }
}

@media (min-width: 1321px) {
    .banner-main {
        align-items: stretch;
    }

    .banner-half {
        position: relative;
        flex: 1 1 50%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .banner-half-left {
        display: flex;
        align-items: center;
    }

    .banner-half-right {
        display: flex;
        align-items: center;
    }

    /* readability overlay over the right video (same as the left half) */
    .banner-half-right::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.5) 45%,
            rgba(0, 0, 0, 0.25) 100%);
    }

    /* soft golden divider between the two halves */
    .banner-half-right::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        bottom: 10%;
        width: 2px;
        z-index: 16;
        background: linear-gradient(180deg,
            rgba(255, 194, 58, 0) 0%,
            rgba(255, 194, 58, 0.35) 50%,
            rgba(255, 194, 58, 0) 100%);
    }
}

/* Right carousel nav: horizontal dots + arrows below the slide text. */
.carousel-nav-h {
    width: 100%;
    height: auto;
    left: 0;
    top: 100%;
    bottom: auto;
    margin-top: 16px;
    flex-wrap: nowrap;
    z-index: 16;
}

.carousel-nav-h .carousel-indicators {
    flex-wrap: nowrap;
    width: auto;
}

.carousel-nav-h .carousel-indicators li {
    margin: 0 6px;
}

.carousel-nav-h .carousel-control-prev,
.carousel-nav-h .carousel-control-next {
    margin: 0 10px;
}

.banner-background img,
.banner-background div {
    position: absolute;
    right: 0;
    bottom: 0;
}

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

.banner-background .melon {
    width: 29.58%;
    right: 12.25%;
}

/* watermelon splash hidden, but kept to preserve the character coordinate box */
.banner-background .melon .melon-img {
    animation: none;
    opacity: 0;
    visibility: hidden;
}

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

/* Donald Duck (center, main) */
.banner-background .raccoon {
    width: 70%;
    right: 16%;
    bottom: 12%;
    z-index: 10;
    transform-origin: bottom center;
    animation: banRaccoonAnim 16s ease infinite;
}

@keyframes banRaccoonAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    3% {
        opacity: 0;
        transform: scale(0.5);
    }
    7% {
        opacity: 1.0;
    }
    11% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    95% {
        opacity: 1.0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.banner-background .raccoon .d-img {
    animation: banRaccoonImgAnim 4s ease infinite;
}

@keyframes banRaccoonImgAnim {
    0% {
        transform: translateY(4%);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4%);
    }
}

/* Scrooge McDuck (right, smaller, behind) */
.banner-background .crocs {
    width: 48%;
    right: -16%;
    bottom: 14%;
}

/* Daisy Duck (left, smaller, behind) */
.banner-background .zombie {
    width: 40%;
    right: auto;
    left: -16%;
    bottom: 18%;
    animation: banZombieAnim 16s ease infinite;
}

@keyframes banZombieAnim {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }
    6% {
        opacity: 0;
        transform: translateX(50%);
    }
    16% {
        opacity: 1.0;
        transform: translateX(0);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-background .zombie .d-img {
    transform-origin: top right;
    animation: banZombieImgAnim 4s ease infinite;
}

@keyframes banZombieImgAnim {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    55% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.banner-background .crocs {
    width: 48%;
    right: -16%;
    bottom: 14%;
    animation: banCrocsAnim 16s ease infinite;
}

@keyframes banCrocsAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    6% {
        opacity: 0;
        transform: translateX(-50%);
    }
    16% {
        opacity: 1.0;
        transform: translateX(0);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.banner-background .bomb {
    width: 12.29%;
    right: auto;
    left: -28%;
    top: 15%;
    bottom: auto;
    animation: banBombAnim 16s ease infinite;
}

@keyframes banBombAnim {
    0% {
        opacity: 0;
        transform: translate(125%, -100%);
    }
    8% {
        opacity: 0;
        transform: translate(125%, -100%);
    }
    16% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    95% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

.banner-background .wm-left {
    width: 20.81%;
    right: auto;
    left: 2%;
    top: -21%;
    bottom: auto;
    animation: banWmLeftAnim 16s ease infinite;
}

@keyframes banWmLeftAnim {
    0% {
        opacity: 0;
        transform: translate(125%, 125%);
    }
    5% {
        opacity: 0;
        transform: translate(125%, 125%);
    }
    12% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    95% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

.banner-background .wm-left .d-img {
    animation: banWmLeftImgAnim 4s ease infinite;
}

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

.banner-background .wm-right {
    width: 25.53%;
    right: -28%;
    top: -14%;
    bottom: auto;
    animation: banWmRightAnim 16s ease infinite;
}

@keyframes banWmRightAnim {
    0% {
        opacity: 0;
        transform: translate(-125%, 125%);
    }
    5% {
        opacity: 0;
        transform: translate(-125%, 125%);
    }
    12% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    95% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

.banner-background .wm-right .d-img {
    animation: banWmRightImgAnim 4s ease infinite;
}

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


/* Jackpot Section */

.jackpot-wrap {
    width: 100%;
    height: 80px;
    border-radius: 40px;
    background-image: linear-gradient(#3a3a48, #6d6d83, #3a3a48);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 1.0);
}

.jackpot-wrap:before,
.jackpot-wrap:after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 40px;
}

.jackpot-wrap:before {
    background-color: #20202e;
    box-shadow: 0 1px 0 #4a4a5a;
}

.jackpot-wrap:after {
    background-image: url(/brands/win_new/static/img/bg/texture-bg.jpg);
    background-position: center;
    background-repeat: repeat-x;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}

.jackpot-panel {
    width: calc(30% - 40px);
    max-width: 320px;
    height: 100%;
    position: relative;
    margin: 0 20px;
}

.jackpot-panel.mega {
    width: calc(40% - 40px);
    max-width: 420px;
}

.jackpot-panel .labels {
    width: 100%;
    height: 78px;
    position: absolute;
    left: 0;
    top: -80px;
    font-size: 34px;
    font-weight: 700;
    overflow: hidden;
    padding: 0 0 2%;
}

.jackpot-panel .labels:before {
    width: 131.25%;
    height: 334%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-radius: 50%;
    border: solid 6px #818194;
    background-color: #262631;
    box-shadow: inset 0 0 0 1px #0f0f14;
}

.jackpot-panel .labels .title {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#dcffb1, #7bdd00);
    background-size: 100% 100%;
    display: inline-block;
    position: relative;
}

.jackpot-panel .labels .title:after {
    content:attr(data-text);
    display:inline-block;
    position:absolute;
    left: 0;
    top: 0;
    z-index:-1;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.jackpot-panel.mega .labels {
    height: 98px;
    top: -100px;
    font-size: 48px;
    padding: 0 0 1%;
}

.jackpot-panel.mega .labels .title {
    background-image: -webkit-linear-gradient(#fffe98, #ffc000);
}

.jackpot-panel.mega .labels .title:before {
    content:attr(data-text);
    display:inline-block;
    position:absolute;
    left: 0;
    top: 0;
    z-index:-1;
    white-space: nowrap;
    text-shadow: 0 0 15px rgba(247, 163, 0, 0.75);
    animation: jpAmountAnim 0.5s ease infinite;
}

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

.jackpot-panel .amount {
    color: #f4ffe6;
    font-size: 44px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);
    padding: 1% 0 0;
}

.jackpot-panel.mega .amount {
    color: #fffcb4;
    font-size: 50px;
}


/* Page Content */

.page-content {
    padding: 30px 0 0;
    position: relative;
    z-index: 5;
}

.page-content:before,
.page-content:after {
    width: 100%;
    min-width: 1920px;
    height: 100%;
    min-height: 820px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    /* Donald is a tall image (716x984) — cap its height so the whole figure
       (head included) fits in the bottom decoration instead of being clipped */
    background-size: auto 620px;
}

.page-content:before {
    /* this pseudo carries TWO Donalds: one at the left, one in the centre */
    background-image: url(/brands/win_new/static/img/bg/main-l-bg.png), url(/brands/win_new/static/img/bg/main-l-bg.png);
    background-position: left bottom, center bottom 110px;
    /* faint, lightly-coloured watermark (not full black & white) */
    filter: grayscale(0.55) brightness(1.3) contrast(0.92) opacity(0.10);
}

.page-content:after {
    background-image: url(/brands/win_new/static/img/bg/main-r-bg.png);
    /* raised ~170px off the bottom so the right Donald sits higher */
    background-position: right 0 bottom 170px;
    /* faint, lightly-coloured watermark (not full black & white) */
    filter: grayscale(0.55) brightness(1.3) contrast(0.92) opacity(0.10);
}

/* Providers Section */

.providers-section {
    width: 100%;
    margin: 18px 0 0;
    position: relative;
    z-index: 5;
}

/* watermelon icon above the title removed */
.providers-section .header:after {
    display: none;
}

.providers-section .header {
    margin: 0 0 10px;
}

.providers-section .header:before {
    width: 452px;
    height: 108px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-image: url(/brands/win_new/static/img/bg/phead-bg.png);
    z-index: 5;
}

.providers-section .header:after {
    width: 91px;
    height: 70px;
    left: 0;
    right: 0;
    top: -85px;
    margin: 0 auto;
    background-image: url(/brands/win_new/static/img/icon/melon-icon.png);
    background-size: 100% 100%;
    animation: shakeAnim 2s ease infinite;
    z-index: 5;
}

.providers-section .header .title {
    font-size: 30px;
    position: relative;
    z-index: 10;
}

/* "LIST" goes gold to match the signature (scoped so banner red emphasis stays) */
.providers-section .header .title .text-red {
    color: #ffce5a !important;
    text-shadow: 0 0 12px rgba(255, 180, 40, 0.45);
}

.owl-nav {
    width: 100%;
    max-width: 1080px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
}

.owl-nav-btn {
    width: 50%;
    height: 44px;
    background-color: transparent;
    border: none;
    color: #aaaecc;
    font-size: 24px;
    padding: 0 30px;
}

.owl-nav-btn:hover {
    color: #ffe07a;
}

.owl-nav-btn:before {
    width: 100%;
    height: 100%;
    background-color: rgba(39, 39, 48, 1.0);
    border: solid 1px #3a3a48;
    border-radius: 30px;
    left: 0;
    top: 0;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.owl-nav-btn:last-child:before {
    -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.owl-nav-btn:hover:before {
    background-color: rgba(61, 61, 73, 1.0);
    border-color: #585869;
}


/* Owl Carousel */

.owl-carousel {
    width: calc(100% + 16px);
    margin: 0 -8px;
}

.owl-carousel .item {
    padding: 0 8px;
}

.slot-btn {
    width: 100%;
    max-width: 188px;
    position: relative;
    display: inline-block;
    color: #ffffff;
    padding: 50px 0 0;
}

.owl-item .slot-btn img {
    width: initial;
}

.slot-btn .g-wrap {
    width: 100%;
    position: relative;
}

.slot-btn .g-panel {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    z-index: initial;
    background-color: #3a3a48;
    border: solid 1px #3a3a48;
    transition: 0.3s;
}

.slot-btn:hover .g-panel {
    background-color: #2b2b38;
    border-color: #8383a3;
}

.slot-btn .g-panel:before {
    width: 150%;
    height: 50%;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transform-origin: bottom right;
    transform: rotate(5deg);
    z-index: 5;
    transition: 0.5s;
}

.slot-btn:hover .g-panel:before {
    transform: rotate(2deg);
}

.slot-btn .g-img {
    opacity: 0;
}

.slot-btn .g-panel .g-bg {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    border: solid 5px #8a6a22;
    background-color: #d99a1e;
    border-radius: 50%;
    overflow: hidden;
    transition: 0.3s;
}

.slot-btn:hover .g-panel .g-bg {
    background-color: #0f0f14;
    border-color: #8383a3;
}

.slot-btn .g-panel .g-bg:before{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* gold coin behind the character (replaces the old red watermelon) */
    background-image: url(/brands/win_new/static/img/bg/coin-bg.png);
    background-size: 125%;
    background-position: center;
    background-repeat: no-repeat;
    transition: 1s;
}

.slot-btn:hover .g-panel .g-bg:before{
    transform: scale(1.15);
    filter: brightness(50%);
}

.owl-item .slot-btn .g-char,
.owl-item .slot-btn .g-char-out {
    width: calc(100% + 2px);
    position: absolute;
    left: -1px;
    bottom: 0;
    z-index: 10;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), 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, 1.0), rgba(0, 0, 0, 0));
}

.owl-item .slot-btn .g-char-out {
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 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), rgba(0, 0, 0, 0));
}

.slot-btn:hover .g-char,
.slot-btn:hover .g-char-out {
    animation: slotBtnChar 0.75s ease 1 forwards;
}

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

.owl-item .slot-btn .splash {
    width: 24.1%;
    top: -6%;
    right: 2%;
    position: absolute;
    transform-origin: bottom left;
    opacity: 0;
}

.slot-btn:hover .splash {
    animation: scBtnSplash 1s ease 0.2s 1 forwards;
}

@keyframes scBtnSplash {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        opacity: 1.0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.slot-btn .play-btn {
    width: 140px;
    height: 42px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 40px;
    margin: auto;
    position: absolute;
    z-index: 15;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);
    opacity: 0;
    transform: scale(0.5);
}

.slot-btn .play-btn i {
    font-size: 28px;
    margin: 0 -5px 0 0;
}

.slot-btn:hover .play-btn {
    animation: scBtnSplash 1s ease 0.2s 1 forwards;
}

.slot-btn .g-footer {
    width: 100%;
    height: 80px;
    background-color: #3a3a48;
    border-top: solid 1px #5b5b6f;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 1.0);
    padding: 0 0 2%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    transition: 0.3s;
}

.slot-btn:hover .g-footer {
    background-color: #2b2b38;
}

.slot-btn .g-footer:before {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 8%;
    background-image: url(/brands/win_new/static/img/bg/stripe-bg.png);
    background-position: center;
    background-repeat: no-repeat;
}

.slot-btn .g-name {
    width: 100%;
    display: inline-block;
    margin: 10px 0 0;
}


/* Board Section */

.board-section {
    width: 100%;
    margin: 4px 0 0;
    padding: 14px 0 30px;
    background-color: #16161d;
}

/* curve/gradient decorations removed — the board now sits directly under the
   banner, where the old upward-overlapping curve was cutting the video. */
.board-section:before,
.board-section:after {
    display: none;
}

/* align the three columns by their tops so 이벤트 / 실시간출금현황 / 공지사항 headers line up */
.board-wrapper {
    align-items: flex-start;
}

/* PC: keep all content below the banner within the banner's horizontal area,
   i.e. start at the banner's left edge (left menu 320px + 18px gap = 338px). */
@media (min-width: 1321px) {
    .board-section .container,
    .providers-section .container,
    .page-content .container {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 308px;
        padding-right: 20px;
    }

    .banner-cta {
        padding-left: 308px;
        padding-right: 20px;
    }
}

/* ===== Right member sidebar — the 3rd column (wide screens only) ===== */
.member-sidebar {
    display: none;
}

@media (min-width: 1500px) {
    .member-sidebar {
        display: block;
        position: absolute;
        top: 152px;
        right: 0;
        width: 300px;
        z-index: 30;
    }

    /* reserve room on the right so content/banner don't slide under the sidebar */
    .banner-section .container,
    .board-section .container,
    .providers-section .container,
    .page-content .container,
    .banner-cta {
        padding-right: 320px;
    }

    /* the menu pill ends on the same right guide as the banner (its row is
       capped by padding-right:320), while the login button is lifted out of
       the flow and pinned to the far right so its position is unchanged. */
    .header-section .container-fluid {
        padding-right: 320px;
    }
    /* centre the login button over the 300px member-sidebar column below it
       ( (300 - 188 button) / 2 = 56 ) instead of hugging the right edge */
    .header-section .bal-container {
        position: absolute;
        right: 56px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }

    /* the banner no longer touches the screen edge (sidebar is to its right),
       so round its right corners and restore the right border too */
    .banner-main {
        border-radius: 20px;
        border-right: 1.5px solid rgba(255, 202, 84, 0.6);
    }
}

.member-info {
    background: linear-gradient(180deg, #20202a 0%, #16161d 100%);
    border: 1px solid #2e2e3a;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.mi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #2e2e3a;
}

.mi-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mi-name {
    font-size: 19px;
    font-weight: 500;
    color: #ffffff;
}

.mi-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #6db8ff, #2f7fe0);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

/* buttons don't inherit font-family by default — force the site font
   so the member panel / menu match the rest of the site */
.member-sidebar button,
.banner-side-menu button {
    font-family: inherit;
}

.mi-logout {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: #2c2c39;
    color: #cfcfe0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.mi-logout:hover {
    background: #ff3a1f;
    color: #ffffff;
}

.mi-list {
    list-style: none;
    margin: 0;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid #2e2e3a;
}
.mi-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 2px;
}
.mi-label {
    color: #cdd2dc;
    font-size: 15px;
    font-weight: 400;
}
.mi-value {
    color: #ffe07a;
    font-size: 16px;
    font-weight: 500;
}
.mi-value em {
    font-style: normal;
    font-size: 13px;
    color: #cdd2dc;
    font-weight: 400;
    margin-left: 2px;
}
.mi-conv {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #2c2c39;
    color: #ffe07a;
    font-size: 12px;
    font-weight: 500;
}
.mi-conv:hover {
    background: #ffe07a;
    color: #16161d;
}

.mi-btns {
    display: flex;
    gap: 8px;
    padding-top: 14px;
}
.mi-btn {
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    border-radius: 10px;
    background: #2c2c39;
    border: 1px solid #383848;
    color: #dfe3ec;
    font-size: 13px;
    font-weight: 500;
    transition: 0.2s;
}
.mi-btn:hover {
    background: linear-gradient(180deg, #2e2e3a 0%, #1f1f29 100%);
    border-color: rgba(255, 204, 88, 0.85);
    color: #ffe07a;
    text-shadow: 0 0 8px rgba(255, 190, 60, 0.55);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.45);
    transform: translateY(-2px);
}

/* telegram / TV banner links */
.member-banners {
    margin-top: 14px;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mb-banner {
    position: relative;
    display: block;
    height: 92px;
    border-radius: 14px;
    overflow: hidden;
    padding: 16px 12px 16px 104px;
    border: 2px solid;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s, box-shadow 0.25s;
}
/* animated video background behind the banner content */
.mb-banner .mb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.85;
    pointer-events: none;
}
.mb-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}
.mb-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 46px;
}
/* image icon (e.g. telegram.png, transparent) instead of a font glyph */
.mb-icon-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
}
/* telegram banners: larger image, nudged left */
.member-banners .mb-cs .mb-icon-img,
.member-banners .mb-notice .mb-icon-img {
    width: 100px;
    height: 100px;
}
.member-banners .mb-cs .mb-icon,
.member-banners .mb-notice .mb-icon {
    left: 0;
}
/* tether banner: larger coin */
.member-banners .mb-tether .mb-icon-img {
    width: 104px;
    height: 104px;
}
.member-banners .mb-tether .mb-icon {
    left: -8px;
}
/* 이용규정: nudge the icon slightly left */
.member-banners .mb-rules .mb-icon {
    left: 2px;
}
/* 평생 도메인: nudge the icon slightly left */
.member-banners .mb-domain .mb-icon {
    left: 2px;
}
.mb-title {
    display: block;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}
.mb-go {
    display: inline-block;
    margin-top: 9px;
    padding: 3px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: #e9e9f2;
    font-size: 12px;
    font-weight: 700;
}
.mb-go b {
    color: #ffd36b;
}
.mb-cs {
    background: linear-gradient(110deg, #3a2e10 0%, #221a06 100%);
    border-color: #ffd24d;
}
.mb-cs .mb-icon { color: #ffd66b; }
.mb-cs .mb-title b { color: #ffe07a; }
.mb-notice {
    background: linear-gradient(110deg, #38280c 0%, #241804 100%);
    border-color: #ffc23c;
}
.mb-notice .mb-icon { color: #ffce5a; }
.mb-notice .mb-title b { color: #ffd66b; }
.mb-tv {
    background: linear-gradient(110deg, #3a2a0c 0%, #1f1605 100%);
    border-color: #ffb24a;
}
.mb-tv .mb-icon { color: #ffd24d; }
.mb-tv .mb-title b { color: #ffe07a; }

/* extra info banners (same gold cycle as above) */
.mb-tether {
    background: linear-gradient(110deg, #3a2e10 0%, #221a06 100%);
    border-color: #ffd24d;
}
.mb-tether .mb-icon { color: #ffd66b; }
.mb-tether .mb-title b { color: #ffe07a; }
.mb-rules {
    background: linear-gradient(110deg, #38280c 0%, #241804 100%);
    border-color: #ffc23c;
}
.mb-rules .mb-icon { color: #ffce5a; }
.mb-rules .mb-title b { color: #ffd66b; }
.mb-domain {
    background: linear-gradient(110deg, #3a2a0c 0%, #1f1605 100%);
    border-color: #ffb24a;
}
.mb-domain .mb-icon { color: #ffd24d; }
.mb-domain .mb-title b { color: #ffe07a; }

/* readable over the gold video bg: dark text with a bright cream halo so it
   reads on both the bright-gold and darker frames of the video */
.member-banners .mb-banner .mb-title,
.member-banners .mb-banner .mb-title b {
    /* plain white text with a thin black outline */
    background: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 2.2px #000000;
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.mb-badge {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 5;
    background: #e01010;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    animation: mbBadgeBlink 0.5s steps(1) infinite;
    box-shadow: 0 0 10px rgba(224, 16, 16, 0.9);
}
@keyframes mbBadgeBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.15; }
}

/* ===== INSANE flashy banner animations ===== */
/* flowing gradient bg + breathing/wobble + rainbow neon glow (all banners) */
.mb-banner {
    background-size: 220% 220%;
    animation:
        mbBgFlow 3s linear infinite,
        mbBreathe 1.3s ease-in-out infinite,
        mbRainbowGlow 1.8s linear infinite;
}
@keyframes mbBgFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes mbBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.012) rotate(-0.4deg); }
    75%      { transform: scale(1.012) rotate(0.4deg); }
}
@keyframes mbRainbowGlow {
    0%   { box-shadow: 0 0 8px 0 rgba(255,210,90,0.55), 0 0 16px 1px rgba(255,210,90,0.7); border-color: #ffd24d; }
    33%  { box-shadow: 0 0 8px 0 rgba(255,180,50,0.55), 0 0 16px 1px rgba(255,180,50,0.7); border-color: #ffb83a; }
    66%  { box-shadow: 0 0 8px 0 rgba(255,232,150,0.55), 0 0 16px 1px rgba(255,232,150,0.7); border-color: #ffe79a; }
    100% { box-shadow: 0 0 8px 0 rgba(255,210,90,0.55), 0 0 16px 1px rgba(255,210,90,0.7); border-color: #ffd24d; }
}

/* fast bright light glare (screen blend) */
.mb-banner::after {
    content: "";
    position: absolute;
    top: -25%;
    left: 0;
    width: 40%;
    height: 150%;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 70%);
    transform: translateX(-180%) skewX(-18deg);
    animation: mbShine 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
}
@keyframes mbShine {
    0%   { transform: translateX(-180%) skewX(-18deg); }
    55%  { transform: translateX(360%) skewX(-18deg); }
    100% { transform: translateX(360%) skewX(-18deg); }
}
.mb-notice::after { animation-delay: 0.6s; }
.mb-tv::after { animation-delay: 1.2s; }
.mb-tether::after { animation-delay: 0.9s; }
.mb-rules::after { animation-delay: 0.3s; }
.mb-domain::after { animation-delay: 1.5s; }

/* bouncing, spinning, glowing icon */
.mb-icon {
    z-index: 2;
    animation: mbIconWild 1.1s ease-in-out infinite;
    filter: drop-shadow(0 0 8px currentColor);
}
@keyframes mbIconWild {
    0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
    25%      { transform: translateY(calc(-50% - 9px)) scale(1.15) rotate(-13deg); }
    50%      { transform: translateY(-50%) scale(1) rotate(0deg); }
    75%      { transform: translateY(calc(-50% - 5px)) scale(1.1) rotate(13deg); }
}

/* static title (neon flicker effect removed) */
.mb-title {
    position: relative;
    z-index: 2;
}

/* throbbing glowing CTA */
.mb-go {
    position: relative;
    z-index: 2;
    animation: mbGoBlink 1s ease-in-out infinite;
}
/* continuous blink (opacity + glow) */
@keyframes mbGoBlink {
    0%, 100% { opacity: 1;    box-shadow: 0 0 14px rgba(255,211,107,0.85); }
    50%      { opacity: 0.3;  box-shadow: 0 0 0 rgba(255,211,107,0); }
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .mb-banner, .mb-banner::after, .mb-icon, .mb-title, .mb-go, .mb-badge {
        animation: none !important;
    }
}

.board-panel {
    width: 30.5%;
    margin: 15px 0;
    padding-top: 10px;
}

.board-panel .header {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding: 0 14px;
    margin-bottom: 10px;
    /* gold-line title bar (same look as the WIN GAME LIST bar) */
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    border-radius: 23px;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    box-shadow:
        0 0 12px rgba(255, 190, 60, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.board-panel .header .title-panel {
    color: #e0e9ff;
    font-size: 24px;
}

.board-panel .header .icon-panel {
    margin-right: 8px;
}

.board-panel .header .more-link {
    height: 24px;
    padding: 0 15px;
    color: #ffffff;
    font-size: 12px;
    background-color: rgba(58, 58, 72, 0.5);
    border: solid 1px rgba(58, 58, 72, 0.75);
    border-radius: 12px;
}

.board-panel .header .more-link i {
    color: #ffe070;
    font-size: 14px;
    margin-right: 2px;
    transition: 0.3s;
}

.board-panel .header .more-link:hover {
    background-color: rgba(58, 58, 72, 1.0);
    border-color: rgba(58, 58, 72, 1.0);
}

.board-panel .header .more-link:hover i {
    color: #ff230a;
    transform: rotate(90deg);
}

.board-panel table {
    border-collapse: separate;
    border-spacing: 0;
}

.board-panel table tr td {
    height: 50px;
    color: #ffffff;
    transition: 0.3s;
    border-bottom: solid 1px #2d2d3e;
}

/* gold rollover on each event / notice post row */
.board-panel table tr:hover td {
    background-color: rgba(255, 200, 80, 0.12);
    color: #ffe07a;
    text-shadow: 0 0 8px rgba(255, 190, 60, 0.45);
}

.board-panel table tr:hover td a {
    color: #ffe07a;
}

.board-panel table tr:hover .date-td {
    color: #ffd9a6;
}

/* gold accent bar slides in on the left of the hovered row */
.board-panel table tr td:first-child {
    box-shadow: inset 0 0 0 rgba(255, 206, 90, 0);
}

.board-panel table tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #ffce5a;
}

.board-panel table tr td a {
    color: #ffffff;
}

.board-panel table tr td a:hover {
    color: #ffe07a;
    text-decoration: underline;
}

.board-panel table tr .title-td {
    padding-left: 16px;
}

.board-panel table tr .date-td {
    color: #999ea5;
    font-size: 13px;
    padding-right: 14px;
}

.new-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 5px;
    background-color: #ff230a;
    color: #ffffff;
    font-size: 12px;
    font-family: S-CoreDream-7ExtraBold;
    text-align: center;
    padding: 1px 0 0;
}


/* Realtime Board */

.realtime-board {
    width: calc(39% - 28px);
    margin: 15px 14px;
    background-color: #24242e;
    border: solid 2px #2a2a36;
    border-radius: 26px;
    padding: 0 14px 12px;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 1.0);
}

.realtime-board:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(/brands/win_new/static/img/bg/texture-bg.jpg);
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    opacity: 0.5;
}

.realtime-board .header {
    width: 100%;
    height: 45px;
    margin-top: 8px;
    border-radius: 22px;
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    font-size: 22px;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.realtime-board .content {
    padding: 0;
}

/* Ticker */

.realtime-ticker {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.realtime-ticker ul li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 50px;
    padding: 0 14px;
    cursor: pointer;
    transition: 0.3s;
}

.realtime-ticker ul li .td {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.realtime-ticker ul li:hover .td {
    background-color: rgba(164, 164, 195, 0.15);
}

.realtime-ticker ul li .td:first-child {
    border-radius: 10px 0 0 10px;
}

.realtime-ticker ul li .td:last-child {
    border-radius: 0 10px 10px 0;
}

.realtime-ticker ul li .icon-panel {
    margin: 0 5px 0 3px;
    font-size: 15px;
}

.realtime-ticker ul li div.user {
    width: 28%;
    font-size: 13px;
    justify-content: flex-start;
}

.realtime-ticker ul li div.amount {
    width: 42%;
    font-size: 14px;
    font-weight: 700;
    justify-content: flex-end;
    white-space: nowrap;
}

.realtime-ticker ul li div.date {
    width: 30%;
    justify-content: flex-end;
    padding-right: 6px;
    color: #999ea5;
    font-size: 11px;
    white-space: nowrap;
}


/* Board Download */

.board-download {
    width: 100%;
    margin: 30px 0 0;
}

.board-download ul li {
    padding: 0 60px;
}

.board-download ul li:after {
    width: 1px;
    height: 60%;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    background-color: rgba(164, 164, 195, 0.25);
}

.board-download ul li:last-child:after {
    display: none;
}

.board-download ul li a {
    color: #cccccc;
    font-size: 12px;
}

.board-download ul li a:hover {
    color: #ff230a;
}

.board-download ul li a img {
    max-height: 36px;
    margin-right: 5px;
}

.board-download ul li a:hover img {
    animation: shakeAnim 1s ease 1;
}


/* Footer Section */

.footer-section {
    width: 100%;
    background-color: #1d1d25;
    border-top: solid 1px #262631;
    position: relative;
    z-index: 1;          /* sit above any overlapping decoration from the section above */
}

.footer-providers {
    padding: 50px 0 30px;
    overflow: visible;
}

.footer-providers img {
    margin: 10px 16px;
    vertical-align: middle;
}

.footer-copyright {
    width: 100%;
    background-color: #262631;
    border-top: solid 1px #16161d;
    padding: 40px 0 30px;
}

.footer-copyright .logo {
    width: auto;
    display: inline-flex;
    align-items: flex-end;
    text-align: center;
    position: relative;
}

.footer-copyright .logo::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 4%;
    bottom: 0;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 196, 60, 0.5) 0%,
        rgba(255, 170, 0, 0.25) 40%,
        rgba(255, 170, 0, 0) 72%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
    animation: lgStageGlow 2.4s ease-in-out infinite alternate;
}

.footer-copyright .logo .logo-char {
    position: relative;
    z-index: 1;
    height: 50px;
    width: auto;
    margin-right: -5px;
    transform-origin: 60% 100%;
    filter:
        drop-shadow(-4px 0 6px rgba(255, 184, 0, 0.45))
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
    animation: lgCharBob 5s ease-in-out infinite;
}

.footer-copyright .logo .logo-text {
    position: relative;
    z-index: 1;
    font-size: 52px;
}

.footer-copyright .copyright {
    width: 100%;
    display: inline-block;
    color: #5e5e6e;
    font-size: 10px;
    letter-spacing: 1px;
    margin: 10px 0 0;
}

.footer-copyright:before {
    width: 100%;
    height: 19px;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url(/brands/win_new/static/img/bg/bite-bg.png);
    left: 0;
    top: -1px;
}


/* Scroll Top */

.scroll-top {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
    z-index: 50;
}

.scroll-top:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-image: url(/brands/win_new/static/img/banner/coin.png);
}

.scroll-top:hover:before {
    animation: spinAnim 5s linear infinite forwards;
}

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

.scroll-top i {
    font-size: 30px;
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.3s;
    opacity: 0;
}

.scroll-top:hover i {
    transform: translateY(-10px);
    opacity: 1.0;
}


/* Side Wrapper */

.side-wrapper {
    right: 0;
    top: 150px;
    position: absolute;
    z-index: 90;
    pointer-events: none;
}

.side-wrapper.affix {
    top: 110px;
    position: fixed;
}

.side-wrapper .side-panel {
    width: 240px;
    max-height: 110px;
    border-radius: 15px;
    padding: 5px 5px;
    transition: 0.3s;
    margin-right: -2px;
    margin-bottom: 10px;
    transform: translateX(100%);
    background-color: #454551;
    pointer-events: auto;
}

.side-wrapper .side-panel.active {
    transform: translateX(0);
    max-height: 500px;
}

.side-wrapper .side-panel .side-toggle {
    width: 60px;
    height: 110px;
    position: absolute;
    top: -1px;
    left: -62px;
    border: none;
    background-color: transparent;
    border-radius: 10px;
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
    overflow: hidden;
    padding: 0 0 0 13px;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

.side-wrapper .side-panel.coupon .side-toggle {
    writing-mode: initial;
    text-orientation: initial;
}

.side-wrapper .side-panel .side-toggle:before,
.side-wrapper .side-panel .side-toggle:after {
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    background-color: #f1353a;
    border: solid 4px #79b83a;
    box-shadow: inset 1px 0 2px rgba(0, 0, 0, 1.0);
}

.side-wrapper .side-panel .side-toggle:after {
    background-image: url(/brands/win_new/static/img/bg/seed-bg.jpg);
    background-repeat: repeat;
    background-size: 130px;
    background-position: center;
    opacity: 0.25;
}

.side-wrapper .side-panel .side-toggle:hover:before {
    background-color: #b5151a;
    border-color: #448900;
}

.side-wrapper .side-panel.coupon .side-toggle:before {
    background-color: #3e3e4d;
    border-color: #a5a5b5;
}

.side-wrapper .side-panel.coupon .side-toggle:hover:before {
    background-color: #545468;
    border-color: #b9b9d7;
}

.side-wrapper .side-panel .side-toggle img {
    pointer-events: none;
}

.side-wrapper .side-panel .side-toggle span:first-child {
    color: rgba(0, 0, 0, 0.7);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: 0.3s;
}

.side-wrapper .side-panel .side-toggle:hover span:first-child {
    color: #ffe07a;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

.side-wrapper .side-panel .side-content {
    min-height: 150px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

.side-wrapper .side-panel .close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    right: 5px;
    top: 5px;
    position: absolute;
    border: none;
    color: #ffe07a;
    font-size: 18px;
    z-index: 9;
}

.side-wrapper .close-btn:hover {
    color: #ff230a;
}

/* Reserve Games */

.reserve-games {
    width: 100%;
    padding: 4px 0;
}

.reserve-games li {
    width: 100%;
    padding: 4px 0 4px 5px;
    white-space: normal;
}

.reserve-games .game-panel {
    width: 60px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 8px;
}

.reserve-games .info-panel {
    width: calc(100% - 68px);
    text-align: left;
}

.reserve-games .info-panel .g-name {
    width: 100%;
    text-align: left;
    margin: 0 0 2px;
    max-width: 125px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    overflow: hidden;
    display: inline-block
}

.reserve-games .info-panel button {
    width: 64px;
    height: 20px;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    margin-right: 5px;
}

.reserve-games .info-panel .cancel-btn {
    width: 50px;
    padding: 0;
}


/* Melon Slot Coupon */

.side-wrapper .side-panel.coupon {
    background-image: none;
    border: none;
}

.side-wrapper .side-panel.coupon .lottery-link {
    width: 68.33%;
    position: absolute;
    right: 5%;
    bottom: 3.5%;
    background-color: transparent;
    border: none;
}

.side-wrapper .side-panel.coupon .lottery-link:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(/brands/win_new/static/img/coupon/btn_on.png);
    background-size: 100% 100%;
    transition: 0.3s;
    z-index: 1;
    opacity: 0;
}

.side-wrapper .side-panel.coupon .lottery-link:hover:after {
    opacity: 1;
}

.coupon-panel {
    border-radius: 15px;
    overflow: hidden;
}


/* WS Coupon */

.ws_coupon {
    width: 80px;
    position: relative;
    right: -3px;
    top: -1px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.75));
}

.ws_coupon .explode_img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    animation: infinite;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.ws_coupon .explode_img:nth-child(1) {
    width: 26.67%;
    animation-name: explode_anim1;
}

.ws_coupon .explode_img:nth-child(2) {
    width: 66.20%;
    animation-name: explode_anim2;
}

.ws_coupon .explode_img:nth-child(3) {
    width: 64.29%;
    animation-name: explode_anim3;
}

.ws_coupon .explode_img:nth-child(4) {
    width: 100%;
    animation-name: explode_anim4;
}

.ws_coupon .explode_img:nth-child(5) {
    width: 91.50%;
    animation-name: explode_anim5;
}

.ws_coupon .explode_img:nth-child(6) {
    width: 74.30%;
    animation-name: explode_anim6;
}

@keyframes explode_anim1{
    0%{opacity:0}
    1%{opacity:0}
    2%{opacity:1}
    2.5%{opacity:0}
    100%{opacity:0}
}
@keyframes explode_anim2{
    0%{opacity:0}
    2.5%{opacity:0}
    3.5%{opacity:1}
    4%{opacity:0}
    100%{opacity:0}
}
@keyframes explode_anim3{
    0%{opacity:0}
    3.5%{opacity:0}
    4.5%{opacity:1}
    5%{opacity:0}
    100%{opacity:0}
}
@keyframes explode_anim4{
    0%{opacity:0}
    4.5%{opacity:0}
    5.5%{opacity:1}
    6%{opacity:0}
    100%{opacity:0}
}
@keyframes explode_anim5{
    0%{opacity:0}
    4.5%{opacity:0}
    5.5%{opacity:1}
    6%{opacity:0}
    100%{opacity:0}
}
@keyframes explode_anim6{
    0%{opacity:0}
    5.5%{opacity:0}
    6.5%{opacity:1}
    7%{opacity:0}
    100%{opacity:0}
}

.ws_coupon .coupon_img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 120%;
    animation: infinite;
    animation-name: coupon_anim;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.ws_coupon .coupon_img img {
    width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.ws_coupon .coupon_img button {
    position: absolute;
    width: 43.96%;
    height: 12%;
    left: 13%;
    bottom: 27%;
    background-image: url(/brands/win_new/static/img/coupon/btn.png);
    border: none;
    background-color: transparent;
    background-size: 100% 100%;
    transition: 0.5s;
}

.ws_coupon .coupon_img button:hover {
    background-image: url(/brands/win_new/static/img/coupon/btn_on.png);
}

@keyframes coupon_anim{
    0%{opacity:0}
    7%{opacity:0}
    20%{opacity:1; transform:rotate(0deg);}
    21.5%{transform:rotate(-20deg);}
    23.5%{transform:rotate(20deg);}
    25.5%{transform:rotate(-20deg);}
    27.5%{transform:rotate(20deg);}
    29.5%{transform:rotate(0deg);}
    39%{transform:rotate(0deg);}
    41.5%{transform:rotate(-20deg);}
    43.5%{transform:rotate(20deg);}
    45.5%{transform:rotate(-20deg);}
    47.5%{transform:rotate(20deg);}
    49.5%{transform:rotate(0deg);}
    59.5%{transform:rotate(0deg);}
    61.5%{transform:rotate(-20deg);}
    63.5%{transform:rotate(20deg);}
    65.5%{transform:rotate(-20deg);}
    67.5%{transform:rotate(20deg);}
    69.5%{transform:rotate(0deg);}
    100%{transform:rotate(0deg); opacity:1}
}


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

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-backdrop.show {
    opacity: 1.0;
}

.modal {
    padding: 30px 15px !important;
    overflow-y: auto;
}

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

.modal *::-webkit-scrollbar {
    width: 5px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.modal *::-webkit-scrollbar-thumb {
    background-color: #656e7e;
    background-image: none;
    border: none;
    border-radius: 5px;
}

.modal * { font-weight: 300; }

.modal-dialog {
    max-width: 1400px;
    min-height: 100%;
    padding: 0 !important;
    margin: 0 auto;
}

.eventModal .modal-dialog,
.noticeModal .modal-dialog,
.eventviewModal .modal-dialog,
.noticeviewModal .modal-dialog {
    max-width: 1600px;
}

.modal-content {
    width: 100%;
    background-color: #1a1a22;
    border: none;
    z-index: 1;
    border-radius: 30px;
    overflow: hidden;
    margin: 0 auto;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}


/* Modal Sidebar */

.modal-sidebar {
    width: 280px;
    background-color: #26262f;
    border: solid 1px #34343f;
    border-radius: 20px;
    padding: 0 15px;
    position: relative;
}

.modal-sidebar .ms-header {
    width: 100%;
    margin: 30px 0 20px;
}

.modal-sidebar .ms-header .icon {
    color: #ff9dae;
    margin-right: 5px;
    font-size: 24px;
}

.modal-sidebar .ms-header .icon-img {
    width: 40px;
}

.modal-sidebar .ms-header .title {
    font-size: 24px;
    font-weight: 700;
    margin-left: 8px;
    position: relative;
}


/* Modal Menu */

.modal-menu {
    padding: 0 0 0 5px;
}

.modal-menu .bs-ul {
    width: 100%;
    display: block;
}

.modal-menu .bs-ul li {
    width: 100%;
    display: block;
}

.modal-menu .bs-ul li button {
    width: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    color: #b2bdcf;
    border-radius: 25px;
}

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

.modal-menu .bs-ul li button.active {
    color: #ffffff;
    background-color: #363841;
}

.modal-menu .bs-ul li:last-child button {
    margin-bottom: 0;
}

.modal-menu .bs-ul li button .icon-panel {
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 20px;
    border-radius: 50%;
    margin: 5px;
}

.modal-menu .bs-ul li button:hover .icon-panel {
    color: #ffe07a;
}

.modal-menu .bs-ul li button.active .icon-panel {
    color: #ffffff;
}

.modal-menu .bs-ul li button.active .icon-panel {
    color: #ffffff;
    background-color: #ff230a;
}

.modal-menu .bs-ul li button .text-panel {
    width: calc(100% - 56px);
    padding: 0 0 0 10px;
}

.modal-menu .bs-ul li button .text-panel span {
    transition: 0s;
}


/* Modal Panel */

.modal-panel {
    width: calc(100% - 280px);
    min-height: 700px;
    padding: 0 20px;
}

.modal-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.modal-header {
    width: 100%;
    height: 70px;
    margin: 0 0 20px;
    border: none;
    font-size: 22px;
    padding: 0;
    position: relative;
}

.modal-header .title-panel {
    width: calc(100% - 65px);
    height: 60px;
    border-radius: 30px;
    background-color: #26262f;
    margin-right: auto;
}

.modal-header .icon-wrap {
    width: 50px;
    height: calc(100% - 5px);
    background-color: #1a1a22;
    border-radius: 25px 25px 0 0;
    margin: 5px 30px 0 40px;
    padding: 3px;
}

.modal-header .icon-wrap:before,
.modal-header .icon-wrap:after {
    width: 40px;
    height: 40px;
    border-radius: 0 0 20px 0;
    bottom: 0;
    left: -40px;
    box-shadow: 5px 5px 0 #1a1a22;
}

.modal-header .icon-wrap:after {
    left: auto;
    right: -40px;
    border-radius: 0 0 0 20px;
    box-shadow: -5px 5px 0 #1a1a22;
}

.modal-header .icon-panel {
    width: 100%;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: #ff230a;
    color: #ffffff;
    font-size: 16px;
}

.modal-header .sub {
    font-size: 12px;
    margin-left: 2px;
    letter-spacing: 2px;
    position: relative;
    bottom: -1px;
}


/* Modal Close Button */

.modal .close-btn {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    border-radius: 50%;
    border: none;
    background-color: #262631;
    z-index: 9;
}

.modal .close-btn.seperate {
    width: 50px;
    height: 50px;
    top: 15px;
    right: 15px;
    margin: 0;
}

.modal .close-btn:before,
.modal .close-btn:after {
    width: 1px;
    height: 40%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #b2bdcf;
    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: #ff230a;
}

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


/* Terms of Use */

.terms-use {
    width:100%;
    height:auto;
    margin: 0 0 10px;
    position: relative;
}

.terms-use .icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 0 0 25px 0;
    background-color: #1a1a22;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    padding: 6px;
}

.terms-use .icon-wrap:before,
.terms-use .icon-wrap:after {
    width: 30px;
    height: 30px;
    border-radius: 20px 0 0  0;
    bottom: -30px;
    left: 0;
    box-shadow: -5px -5px 0 #1a1a22;
}

.terms-use .icon-wrap:after {
    left: auto;
    bottom: auto;
    top: 0;
    right: -30px;
    border-radius: 20px 0 0 0;
    box-shadow: -5px -5px 0 #1a1a22;
}

.terms-use .icon-wrap .icon-panel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffd633;
    color: rgba(0, 0, 0, 0.75);
    font-size: 20px;
}

.terms-use .terms-panel {
    width:100%;
    background-color: #363841;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    z-index:1;
}

.terms-use .terms-panel .header {
    width: 100%;
    height: 50px;
    padding: 5px 0 0 70px;
    font-size: 18px;
}

.terms-use .terms-panel .header .sub {
    font-size: 12px;
    letter-spacing: 2px;
}

.terms-use .terms-content {
    width:100%;
    padding: 0 15px 10px;
}

.terms-use .scroll-panel {
    width:100%;
    max-height:120px;
    overflow-y:scroll;
    text-align:left;
    padding: 5px 10px;
    color: #adbbcc;
}

.terms-use .scroll-panel p {
    margin: 5px 0;
}

.terms-use .question {
    width:100%;
    height:auto;
    text-align:left;
    margin: 10px 0;
    font-size: 12px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.terms-use .question .ques-txt {
    color:#bbbbbb;
    margin-right:10px;
}

.terms-use .question input {
    position:relative;
    top:2px;
}

/* Modal Banner */

.modal-banner {
    width: 100%;
    margin-bottom: 30px;
    padding: 12px 15px;
    position: relative;
    border-radius: 30px;
    background-image: linear-gradient(#3a3a48, #6d6d83, #3a3a48);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.modal-banner:before,
.modal-banner:after {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 40px;
}

.modal-banner:before {
    background-color: #20202e;
    box-shadow: 0 1px 0 #4a4a5a;
}

.modal-banner:after {
    background-image: url(/brands/win_new/static/img/bg/texture-bg.jpg);
    background-position: center;
    background-repeat: repeat-x;
    opacity: 0.5;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1.0);
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}

.modal-banner .icon-img {
    margin-right: 10px;
}

.modal-banner button {
    height: 32px;
    padding: 0 25px;
    border-radius: 20px;
    background-color: #3b3b4a;
    border: solid 1px #4e4e61;
    color: #b2bdcf;
}

.modal-banner button i {
    color: #ffe07a;
    display: inline-block;
    vertical-align: middle;
}

.modal-banner button:hover {
    background-color: #ffd633;
    border-color: #ffd633;
    color: rgba(0, 0, 0, 0.75);
}

.modal-banner button:hover i {
    color: rgba(0, 0, 0, 0.75);
}


/* Form Label */

.form-container .form-label {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 5px;
    border-radius: 30px;
}

.form-container .form-label.w-bg {
    padding-left: 15px;
    background-image: linear-gradient(to right, rgba(98, 132, 172, 0.25), rgba(98, 132, 172, 0));
}

.form-container .form-label .labels {
    width: auto;
    min-width: 160px;
    height: auto;
    color: #8492a1;
    font-size: 14px;
    display: inline-block;
    text-align: left;
    margin: 0;
}

.form-container .form-label .amount {
    color: #fff;
    font-size: 20px;
    margin-left: 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1.0);
}

.form-container .form-label .amount .symbol {
    color: #ffe068;
}

.transferModal .form-container .form-group .input-container .icon-panel{
    font-size: 18px;
}

.transferModal .form-container .w-btn .input-container {
    width: calc(100% - 170px);
}

.transferModal .form-container .form-group .form-btn {
    width: 160px;
}

.transferModal .form-container .form-group .form-btn i {
    margin: 0 8px;
    display: inline-block;
    vertical-align: middle;
}

/* Form Container */

.form-container {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.form-container .form-group {
    width: 100%;
    display: inline-block;
    margin: 0 0 20px;
}

.form-container .form-group:last-child {
    margin: 0 0;
}

.form-container .labels {
    width: 100%;
    text-align: left;
    color: #ffffff;
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    padding:0 0 0 5px;
    margin: 0 0 5px;
}

.form-container .infos {
    width: 100%;
    display: flex;
    align-items: center;
}

.form-container .form-group .input-container {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form-container .w-btn .input-container {
    width: calc(100% - 125px);
}

.form-container .form-group input {
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    background-color: #262630;
    border: solid 1px #393946;
    border-radius: 25px;
    transition: 0.3s;
    padding: 0 10px 0 15px;
}

.form-container .w-icon input {
    padding: 0 0 0 50px;
}

.form-container .form-group input::-webkit-input-placeholder {
    color: #7f889b;
}

.form-container .form-group .input-container .icon-panel{
    min-width: 60px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #ffdc4a;
}

.form-container .form-group .select-input {
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    background-color: #262630;
    border: solid 1px #393946;
    border-radius: 25px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    position: relative;
}

.form-container .form-group .select-input select {
    width: 100%;
    height: 100%;
    border: none;
    color: #7f889b;
    background-color: transparent;
    -webkit-appearance: none;
    padding: 0 5px;
    cursor: pointer;
}

.form-container .w-icon .select-input select {
    padding-left: 50px;
}

.form-container .form-group select option {
    background-color: #1f0a0a;
    color: #fff;
}

.form-container .form-group .select-input i {
    font-size: 18px;
    position: absolute;
    right: 15px;
}

.form-container .form-group textarea {
    width: 100%;
    height: 200px;
    float: left;
    color: #ffffff;
    background-color: #262630;
    border: solid 1px #393946;
    transition: 0.3s;
    padding: 20px 18px;
    resize: none;
    border-radius: 15px;
}

.form-container .form-group textarea::-webkit-input-placeholder {
    color: #7f889b;
}

.form-container .form-group .form-btn {
    width: 120px;
    height: 50px;
    float: right;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.3s;
    margin: 0 0 0 10px;
}

.form-container .form-group .form-btn i {
    margin-right: 5px;
    color: rgba(0, 0, 0, 0.75);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}


/* Form Btn Group */

.form-container .form-group .infos .btn-grp {
    width: calc(100% + 4px);
    float: left;
    margin: 0 -2px;
}

.form-container .form-group .infos .btn-grp button {
    width: 16.66%;
    width: calc(16.66% - 4px);
    height: 40px;
    float: left;
    margin: 0 2px;
    background-color: #5d6370;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    transition: 0.3s;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.form-container .form-group .infos .btn-grp button:hover {
    background-color: #5d6e91;
    border-color: #5d6e91;
}

.form-container .form-group .infos .btn-grp button:last-child {
    background-color: #ff230a;
    border-color: #ff230a;
}

.form-container .form-group .infos .btn-grp button:last-child:hover {
    background-color: #b41e0d;
    border-color: #b41e0d;
}


/* Modal Footer */

.modal-footer {
    width: 100%;
    border: none;
    margin: 30px auto 0;
    padding: 0;
}

.form-footer {
    width: calc(100% + 10px);
    margin: 0 -5px;
}

.form-footer button {
    width: 100%;
    max-width: 180px;
    height: 50px;
    margin: 0 5px;
}

.form-footer button.size-lg {
    max-width: 280px;
}


/* BS Table */

.bs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.bs-table thead th {
    height: 50px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    background-color: #3a3a48;
}

.bs-table thead th:first-child {
    border-radius: 10px 0 0 10px;
}

.bs-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}

.bs-table tr {
    cursor: pointer;
}

.bs-table tr td {
    height: 54px;
    color: #ebebeb;
    text-align: center;
    padding: 1px;
    transition: 0.3s;
    border-bottom: solid 1px rgba(255, 255, 255, 0.05);
}

.bs-table tr:hover td {
    background-color: rgba(164, 164, 195, 0.05);
}

.bs-table tr td a {
    color: #ebebeb;
    transition: 0.3s;
    display: inline-block;
    vertical-align: middle;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.bs-table tr td a:hover {
    color: #ff230a;
    text-decoration: underline;
}

.bs-table tr .count-td {
    width: 40px;
    border-bottom: solid 1px #87731d;
}

.bs-table tr .count-tag {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #999ea5;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
}

.bs-table tr .title-td {
    text-align: left;
    padding-left: 15px;
    max-width: 590px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-table tr .date-td {
    width: 20%;
    font-size: 12px;
    font-weight: 300;
    color: #999ea5;
}

.bs-table tr .nav-td {
    width: 40px;
}

.bs-table tr td .delete-btn {
    background-color: transparent;
    border: none;
    color: #adbbcc;
    font-size: 18px;
    transition: 0.3s;
}

.bs-table tr td .delete-btn:hover {
    color: #ffdb4a;
}

.bs-table tr td .nav-btn {
    background-color: transparent;
    border: none;
    position: relative;
}

.bs-table tr td .nav-btn i {
    position: relative;
    color: #fff;
    font-size: 10px;
    transition: 0.3s;
    transform: rotate(0deg);
}

.bs-table tr td .nav-btn:hover i {
    color: #ffd060;
}

.bs-table tr.active td .nav-btn i {
    transform: rotate(180deg);
    top: 5px;
}

.bs-table tr td .plus-btn {
    width: 16px;
    height: 16px;
    background-color: #ff230a;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    padding: 0 0 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.bs-table tr td .plus-btn:hover {
    background-color: #b41e0d;
}

.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after {
    content: '';
    width: 2px;
    height: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    background-color: #ffffff;
    transition: 0.3s;
}

.bs-table tr td .plus-btn:after {
    transform: rotate(90deg);
}

.bs-table tr.active td .plus-btn:before {
    height: 0;
}

.bs-table tr td .plus-btn:hover:before,
.bs-table tr td .plus-btn:hover:after {
    background-color: #ffffff;
}

.status-tag {
    min-width: 68px;
    display: inline-block;
    padding: 2px 10px;
    background-color: #0075ff;
    border-radius: 4px;
    color: #ffffff;
    white-space: nowrap;
    font-size: 12px;
}

.status-tag.green {
    background-color: #27ae27;
}


/* With Depth */

.with-depth .message-content {
    display: none;
    height: 200px;
    margin: 10px 0 5px;
}

.with-depth tr.depth-click {
    cursor: pointer;
}

.with-depth tr.dropdown {
    background-color: transparent;
}

.with-depth tr.dropdown td {
    padding: 0;
    border: none;
    height: auto;
    box-shadow: none;
}

.with-depth tr.dropdown td {
    background-color: transparent;
    border: none;
}

.with-depth tr.dropdown:hover td {
    background-color: transparent;
    border: none;
}


/* Message Content */

.message-content {
    width: 100%;
    height: 400px;
    background-color: #262630;
    border: solid 1px #393946;
    margin: 15px 0 0;
    border-radius: 15px;
    padding: 10px;
}

.messageModal .message-content {
    min-height: 250px;
    max-height: 400px;
}

.message-content .inner-container {
    width: 100%;
    height: 100%;
    color: #bdcde0;
    font-weight: 300;
    white-space: pre-wrap;
    text-align: left;
    overflow-y: scroll;
    padding: 5px 10px;
}


/* Pagination */

.pagination {
    margin: 0;
}

.pagination li {
    float: left;
}

.pagination>li>a {
    width: 30px;
    height: 30px;
    color: #b2bdcf;
    font-size: 12px;
    text-decoration: none;
    background-color: #21212b;
    border: solid 1px #373744;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0 0;
    margin: 0 2px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: 0.3s;
}

.pagination li a:hover {
    color: #ffffff;
    background-color: #3b3b4a;
    border-color: #4e4e61;
}

.pagination li a.active {
    color: #ffffff;
    background-color: #ff230a;
    border-color: #ff230a;
}

.pagination .turn-pg a {
    width: 24px;
    color: #99aabf;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    box-shadow: none;
    border-radius: 8px;
}

.pagination .turn-pg:nth-child(1) a {
    margin-right: 5px;
}

.pagination .turn-pg:nth-child(2) a {
    margin-right: 10px;
}

.pagination .turn-pg:nth-last-child(2) a {
    margin-left: 10px;
}

.pagination .turn-pg:last-child a {
    margin-left: 5px;
}

.pagination .turn-pg a:hover {
    color: #ffe07a;
    background-color: transparent;
}


/* Gameplay */

.gameplay-container {
    width: 100%;
    height: 590px;
    overflow-y: scroll;
    padding-right: 10px;
}

.gameplay-container .gameplay-panel {
    width: calc(100% + 10px);
    margin: 0 -5px;
}

.gameplay-btn {
    width: calc(12.5% - 10px);
    display: inline-block;
    position: relative;
    margin: 0 5px 10px;
}

.gameplay-btn .count-tag {
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    position: absolute;
    color: #ffffff;
    z-index: 30;
    text-align: left;
    padding: 0 0 0 10px;
}

.gameplay-btn .count-tag:before {
    width: 200%;
    height: 100%;
    left: 0;
    bottom: 0;
    transform-origin: bottom left;
    transform: rotate(-40deg);
    background-color: #0053bb;
}

.gameplay-btn.ingame .count-tag:before{ background-color: #b08000; }

.gameplay-btn.reserved .count-tag:before{ background-color: #ab190a; }

.gameplay-btn.mymachine .count-tag:before{ background-color: #437f0e; }

.gameplay-btn .g-panel {
    width: 100%;
    border-radius: 15px;
    background-color: #000000;
    border: solid 1px #224671;
    overflow: hidden;
    position: relative;
}

.gameplay-btn.ingame .g-panel { border-color: #694a0c; }

.gameplay-btn.reserved .g-panel { border-color: #6e2f23; }

.gameplay-btn.mymachine .g-panel { border-color: #2e530d; }

.gameplay-btn .d-img {
    width: 100%;
    position: relative;
}

.gameplay-btn .g-panel:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-image: url(/brands/win_new/static/img/gameplay/starting-bg.jpg);
}

.gameplay-btn.ingame .g-panel:before { background-image: url(/brands/win_new/static/img/gameplay/ingame-bg.jpg); }

.gameplay-btn.reserved .g-panel:before { background-image: url(/brands/win_new/static/img/gameplay/reserved-bg.jpg); }

.gameplay-btn.mymachine .g-panel:before { background-image: url(/brands/win_new/static/img/gameplay/mymachine-bg.jpg); }

.gameplay-btn .g-panel:after {
    width: 160%;
    height: 100%;
    border-radius: 50%;
    left: 50%;
    bottom: -60%;
    transform: translateX(-50%);
    background-color: #0e233e;
    z-index: 10;
}

.gameplay-btn.ingame .g-panel:after { background-color: #382706; }

.gameplay-btn.reserved .g-panel:after { background-color: #350f0c; }

.gameplay-btn.mymachine .g-panel:after { background-color: #122c04; }

.gameplay-btn .shine-panel {
    width: 106%;
    position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
}

.gameplay-btn .shine-panel:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-image: url(/brands/win_new/static/img/gameplay/starting-shine.png);
}

.gameplay-btn.ingame .shine-panel:before { background-image: url(/brands/win_new/static/img/gameplay/ingame-shine.png); }

.gameplay-btn.reserved .shine-panel:before { background-image: url(/brands/win_new/static/img/gameplay/reserved-shine.png); }

.gameplay-btn.mymachine .shine-panel:before { background-image: url(/brands/win_new/static/img/gameplay/mymachine-shine.png); }

.gameplay-btn .shine-panel .d-img {
    opacity: 0;
}

.gameplay-btn.ingame .shine-panel:before {
    animation: ingameAnim 3s linear infinite;
}
@keyframes ingameAnim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Slot Machine */

.gameplay-btn .slotmachine {
    width: 82.28%;
    position: absolute;
    left: 7%;
    right: 0;
    top: 3%;
    margin: 0 auto;
    z-index: 20;
}

.gameplay-btn.mymachine .slotmachine,
.gameplay-btn.reserved .slotmachine {
    filter: brightness(25%);
}

.gameplay-btn .slotmachine .spin-panel {
    width: 53.08%;
    position: absolute;
    left: -9%;
    right: 0;
    top: 31%;
    margin: 0 auto;
}

.gameplay-btn .slotmachine .spin-panel .seven-img {
    opacity: 0;
}

.gameplay-btn .slotmachine .spin-panel .panel {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.gameplay-btn .slotmachine .spin-panel .seven-panel {
    width: 33.33%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.gameplay-btn .slotmachine .spin-panel .seven-panel:nth-child(1) {
    left: 0;
}

.gameplay-btn .slotmachine .spin-panel .seven-panel:nth-child(2) {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.gameplay-btn .slotmachine .spin-panel .seven-panel:nth-child(3) {
    right: 0;
}

.gameplay-btn.ingame .slotmachine .spin-panel .seven-panel:nth-child(1) img {
    animation: spin01Anim 2s ease infinite;
}

@keyframes spin01Anim {
    0% {
        transform: translateY(-66.66%);
    }
    30% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}

.gameplay-btn.ingame .slotmachine .spin-panel .seven-panel:nth-child(2) img {
    animation: spin02Anim 2s ease infinite;
}

@keyframes spin02Anim {
    0% {
        transform: translateY(-66.66%);
    }
    10% {
        transform: translateY(-66.66%);
    }
    40% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}

.gameplay-btn.ingame .slotmachine .spin-panel .seven-panel:nth-child(3) img {
    animation: spin03Anim 2s ease infinite;
}

@keyframes spin03Anim {
    0% {
        transform: translateY(-66.66%);
    }
    20% {
        transform: translateY(-66.66%);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}


/* Gameplay Footer */

.gameplay-btn .g-footer {
    width: calc(100% - 8px);
    height: 30px;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #0053bb;
    color: #ffffff;
    border-radius: 15px;
    z-index: 30;
}

.gameplay-btn.ingame .g-footer { background-color: #b08000; }

.gameplay-btn.reserved .g-footer { background-color: #ab190a; }

.gameplay-btn.mymachine .g-footer { background-color: #437f0e; }


/* Btn Group */

.gameplay-btn .btn-grp {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 50;
    transition: 0.3s;
    border-radius: 10px;
    opacity: 0;
}

.gameplay-btn:hover .btn-grp {
    opacity: 1;
}

.gameplay-btn.mymachine:hover .btn-grp,
.gameplay-btn.reserved:hover .btn-grp {
    opacity: 0;
}

.gameplay-btn.mymachine:hover .btn-grp,
.gameplay-btn.reserved:hover .btn-grp {
    opacity: 0;
}

.gameplay-btn .btn-grp .center {
    width: 80%;
    max-width: 100px;
    margin: 0 auto;
}

.gameplay-btn .btn-grp button {
    width: 100%;
    height: 30px;
    margin: 0 0 6px;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);
    opacity: 0;
}

.gameplay-btn:hover .btn-grp button {
    animation: gamePlayBtn 0.8s ease 0.25s 1 forwards;
}

.gameplay-btn .btn-grp button:nth-child(1) {
    animation-delay: 0s;
}

.gameplay-btn .btn-grp button:nth-child(2) {
    animation-delay: 0.1s;
}

.gameplay-btn .btn-grp button:nth-child(3) {
    animation-delay: 0.2s;
}

.gameplay-btn .g-tag {
    width: 50px;
    height: 50px;
    font-size: 48px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 15px;
    margin: auto;
    z-index: 40;
}

.gameplay-btn.mymachine .g-tag {
    color: #afff7d;
}

.gameplay-btn.reserved .g-tag {
    color: #ff7349;
    font-size: 58px;
}


/* Lottery Modal */

.lotteryModal .modal-dialog {
    max-width: 710px;
}

.lotteryModal .modal-content {
    padding: 10px;
}

.lottery-wrapper {
    width: 100%;
    max-width: 700px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.lottery-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.lottery-header {
    position: relative;
    z-index: 1;
}

.lottery-header .title {
    width: 69.58%;
    margin: 1.6% auto 0;
    position: relative;
    left: 0.25%;
    z-index: 1;
    animation: lotteryTitleAnim 1s ease 1 backwards;
}

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

.lottery-header .title img {
    position: relative;
    z-index: 1;
}

.lottery-header .title:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/brands/win_new/static/img/lottery/jackpot-glow.png);
    background-size: 100% 100%;
    z-index: -1;
    animation: lotteryJackpotGlow 1s ease infinite;
}

@keyframes lotteryJackpotGlow {
    0% {
        opacity: 1.0;
    }
    15% {
        opacity: 0;
    }
    30% {
        opacity: 1.0;
    }
    45% {
        opacity: 0;
    }
    60% {
        opacity: 1.0;
    }
    100% {
        opacity: 1.0;
    }
}

.lottery-header .amount-img {
    width: 87%;
    margin: 0.5% auto 0;
    position: relative;
    right: 0.5%;
    animation: lotteryAmountAnim 1s ease 1 backwards;
}

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

/* Lottery Header Background */

.lottery-header .background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

.lottery-header .background img {
    position: absolute;
    top: 0;
}

.lottery-header .background .pot {
    width: 67.86%;
    left: -2.25%;
    top: -5.5%;
    z-index: 1;
    animation: potAnim 2s ease infinite;
}

@keyframes potAnim {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-5deg);
    }
    45% {
        transform: rotate(2deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.lottery-header .background .carrots {
    width: 33.72%;
    left: -3.15%;
    top: 28%;
    animation: carrotsAnim 3s ease infinite;
}

@keyframes carrotsAnim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(0);
    }
}

.lottery-header .background .leaves {
    width: 35.14%;
    right: 5.5%;
    top: auto;
    bottom: 8.75%;
    animation: leavesAnim 10s ease infinite;
}

@keyframes leavesAnim {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Loterry Board */

.lottery-board {
    width: 91.43%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1%;
    margin: 0 auto;
}

.lottery-board-panel{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 2.5%;
    z-index: 1;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.scratch-btn {
    width: 23.75%;
    background-color: transparent;
    border: none;
    position: relative;
    margin: 0 2% 0.5%;
    animation: scratchBtnAnim 0.8s ease 1 0.1s backwards;
}

.scratch-btn:nth-child(2) { animation-delay: 0.2s; }
.scratch-btn:nth-child(3) { animation-delay: 0.3s; }
.scratch-btn:nth-child(4) { animation-delay: 0.4s; }
.scratch-btn:nth-child(5) { animation-delay: 0.5s; }
.scratch-btn:nth-child(6) { animation-delay: 0.6s; }
.scratch-btn:nth-child(7) { animation-delay: 0.7s; }
.scratch-btn:nth-child(8) { animation-delay: 0.8s; }
.scratch-btn:nth-child(9) { animation-delay: 0.9s; }

@keyframes scratchBtnAnim {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scratch-btn:before,
.scratch-btn:after {
    content: '';
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.scratch-btn:before {
    top: -0.5%;
    background-image: url(/brands/win_new/static/img/lottery/scratch-on.png);
    transition: 0.3s;
    opacity: 0;
}

.scratch-btn:hover:before {
    opacity: 1;
}

.scratch-btn:after {
    background-image: url(/brands/win_new/static/img/lottery/scratch-ing.gif);
    display: none;
}

.scratch-btn:nth-child(2):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing02.gif); }
.scratch-btn:nth-child(3):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing03.gif); }
.scratch-btn:nth-child(4):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing04.gif); }
.scratch-btn:nth-child(5):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing05.gif); }
.scratch-btn:nth-child(6):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing06.gif); }
.scratch-btn:nth-child(7):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing07.gif); }
.scratch-btn:nth-child(8):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing08.gif); }
.scratch-btn:nth-child(9):after { background-image: url(/brands/win_new/static/img/lottery/scratch-ing09.gif); }

.scratch-btn.active:after {
    display: block;
}

.scratch-btn:nth-child(even) .b-img {
    transform: rotateY(180deg);
}

.scratch-btn:hover .b-img {
    animation: lotteryBImg 1s ease 1 forwards;
}

.scratch-btn.active:hover .b-img {
    animation: none;
}

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

.scratch-btn:nth-child(even):hover .b-img {
    animation: lotteryBImgEven 1s ease 1 forwards;
}

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

.scratch-btn .text-panel {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 14%;
    z-index: 5;
    color: #000000;
    font-family: Noto Sans Kr;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: scale(0.5);
    transition: 0.3s;
    transition-delay: 0.5s;
}

.scratch-btn.active .text-panel {
    opacity: 1;
    transform: scale(1.0);
}

.scratch-btn .text-panel .amount,
.scratch-btn .text-panel .text {
    width: 100%;
    display: inline-block;
}

.scratch-btn .text-panel .amount {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: -4%;
}

.scratch-btn .text-panel .text {
    font-size: 24px;
    font-weight: 900;
}

/* Lottery Win */

.lottery-win {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 1;
    display: none;
}

.lottery-win.active {
    display: block;
}

.lottery-win .label-cont {
    width: 43.75%;
    left: 0;
    right: 0;
    top: -22%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
}

.lottery-win .label-cont .bg {
    width: 100%;
}

.lottery-win .text-cont {
    width: 86.25%;
    margin: 0 auto;
    position: absolute;
}

.lottery-win .text-cont:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-image: url(/brands/win_new/static/img/lottery/congrats-on.png);
    background-size: 100% 100%;
    animation: winLabelAnim 0.3s linear infinite;
}

@keyframes winLabelAnim {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.lottery-win .text-cont img {
    width: 100%;
}

.lottery-win .main-cont {
    width: 84.86%;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: absolute;
    animation: lotteryWinAnim 1s ease 1 backwards;
}

@keyframes lotteryWinAnim {
    0% {
        transform: scale(0) translateY(-50%);
    }

    100% {
        transform: scale(1) translateY(-50%);
    }
}

.lottery-win .main-cont:before,
.lottery-win .main-cont:after {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-size: 100% 100%;
}

.lottery-win .main-cont:before {
    background-image: url(/brands/win_new/static/img/lottery/light1-on.png);
    animation: winlightAnim 0.5s linear infinite;
}

@keyframes winlightAnim {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.lottery-win .main-cont:after {
    background-image: url(/brands/win_new/static/img/lottery/light2-on.png);
    animation: winlightSecAnim 0.5s linear infinite;
}

@keyframes winlightSecAnim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.lottery-win .main-cont .main-bg {
    width: 100%;
}

.lottery-win .main-cont .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lottery-win .main-cont .inner .amount {
    color: #ffffff;
    font-size: 100px;
    font-family: Noto Sans Kr;
    font-weight: 900;
    background: -webkit-linear-gradient(#fff5e7, #b6b7b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Android Modal */

.androidModal .modal-dialog {
    max-width: 950px;
}

.androidModal .modal-content {
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);
}


/* Popup Modals */

.messageModal .modal-dialog {
    max-width: 800px;
}

.verifyModal .modal-dialog {
    max-width: 500px;
}


/* Jackpot Modal */

.jackpotModal .modal-dialog {
    max-width: 858px;
}

.jackpotModal .modal-content {
    background-color: transparent;
    box-shadow: none;
}

.jackpot-winner {
    width: 100%;
    position: relative;
}

.jackpot-winner img {
    position: absolute;
}

.jackpot-winner .pattern {
    width: 100%;
    position: relative;
    opacity: 1;
    opacity: 0;
}

.jackpot-winner .panel-glow {
    width: 100%;
    left: 0;
    top: 0;
    animation: jwPanelGlowAnim 1s ease infinite;
}

@keyframes jwPanelGlowAnim {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}

.jackpot-winner .panel {
    width: 63.18%;
    left: 3.5%;
    right: 0;
    top: 18.25%;
    margin: 0 auto;
    animation: jwPanelAnim 20s linear infinite;
}

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

.jackpot-winner .character {
    width: 57.58%;
    left: 0;
    right: 1.1%;
    top: 7%;
    margin: 0 auto;
    transform-origin: bottom right;
    animation: jwCharacterAnim 1s ease 1 forwards;
}

@keyframes jwCharacterAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.jackpot-winner .shine {
    width: 46.97%;
    left: 0;
    right: 20.9%;
    top: 24.5%;
    margin: 0 auto;
    animation: jwShineAnim 0.5s ease 1s infinite;
}

@keyframes jwShineAnim {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}

.jackpot-winner .money {
    width: 71.22%;
    left: 0;
    right: 2.25%;
    top: 16.15%;
    margin: 0 auto;
    transform-origin: bottom center;
    animation: jwCharacterAnim 1s ease 0.5s 1 backwards;
}

.jackpot-winner .user-panel {
    width: 30.31%;
    position: absolute;
    left: 4.5%;
    right: 0;
    top: 46.75%;
    margin: 0 auto;
    color: #fce94e;
    font-family: GmarketSansBold;
}

.jackpot-winner .panel-img {
    width: 100%;
    position: relative;
    opacity: 1;
}

.jackpot-winner .text-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.jackpot-winner .user-panel .labels {
    font-size: 20px;
    margin-right: 2%;
}

.jackpot-winner .user-panel .user {
    font-size: 30px;
    position: relative;
    top: -3%;
}

.jackpot-winner .amount-panel {
    width: 64.22%;
    position: absolute;
    left: 1.75%;
    right: 0;
    bottom: 8.5%;
    margin: 0 auto;
}

.jackpot-winner .amount-text {
    display: inline-block;
    color: #ffffff;
    font-size: 60px;
    font-family: GmarketSansBold;
    transform: rotate(-7deg) skew(-8deg);
    text-shadow: 0 2px 0 #de3225, 0 -2px 0 #de3225, 3px 0 0 #de3225, -3px 0 0 #de3225, 0 0 10px rgba(255, 251, 84, 0.75);
}

.jackpot-winner .amount-text .symbol {
    font-size: 48px;
    text-shadow: 0 3px 0 #de3225, 0 0 10px rgba(255, 251, 84, 0.75);
}

.jackpot-winner .jackpot {
    width: 77.04%;
    left: 2.5%;
    right: 0;
    bottom: 23.75%;
    margin: 0 auto;
    animation: jwJackpotAnim 1s ease 0.3s 1 backwards;
}

@keyframes jwJackpotAnim {
    0% {
        opacity: 0;
        transform: scale(0.25);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.jackpot-winner .congratulation {
    width: 46.28%;
    left: 1.25%;
    right: 0;
    bottom: 2.8%;
    margin: 0 auto;
    animation: jwCongAnim 0.5s ease 0.8s 1 backwards;
}

@keyframes jwCongAnim {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Login & Join */

.loginModal .modal-dialog {
    max-width: 600px;
}

.loginModal .modal-wrap {
    max-width: 400px;
}

.loginModal .logo {
    width: 100%;
    margin: 15px 0 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.loginModal .logo::before {
    content: "";
    position: absolute;
    left: 35%;
    right: 35%;
    bottom: 0;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 196, 60, 0.55) 0%,
        rgba(255, 170, 0, 0.28) 38%,
        rgba(255, 170, 0, 0) 72%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
    animation: lgStageGlow 2.4s ease-in-out infinite alternate;
}

.loginModal .logo .logo-char {
    position: relative;
    z-index: 1;
    height: 62px;
    width: auto;
    margin-right: -6px;
    transform-origin: 60% 100%;
    filter:
        drop-shadow(-4px 0 6px rgba(255, 184, 0, 0.45))
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
    animation: lgCharBob 5s ease-in-out infinite;
}

.loginModal .logo .logo-text {
    position: relative;
    z-index: 1;
}

.joinModal .modal-dialog {
    max-width: 800px;
}

.joinModal .form-footer button {
    max-width: 300px;
}


/* Event Wrap */

.bs-ul-df {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
}

.bs-ul-df li {
    list-style: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

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

.event-btn {
    width: calc(25% - 20px);
    margin: 0 10px 20px;
    background-color: #2e2e37;
    border: solid 1px #2e2e37;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    color: #ffffff;
}

.event-btn:hover {
    background-color: #3f3f48;
    border-color: #6b6b7a;
}

.event-btn .tag {
    width: 110px;
    height: 30px;
    position: absolute;
    right: -2px;
    top: -2px;
    overflow: hidden;
    border-radius: 0 5px 0 0;
    color: #ffffff;
    padding: 0 0 4px 10px;
    transition: 0.3s;
    z-index: 10;
}

.event-btn .tag:before {
    width: 100%;
    height: calc(100% - 1px);
    right: 0;
    top: 0;
    transform-origin: top right;
    background-color: #d91f25;
    background-image: linear-gradient(to left, var(--gradient-primary-1), var(--gradient-primary-2));
    transform: skew(25deg);
    border-radius: 2px;
    border-radius: 0 0 4px 4px;
    box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.5);
}

.event-btn .tag.ended {
    color: #cccccc;
}

.event-btn .tag.ended:before {
    background-color: #2e2e37;
    background-image: linear-gradient(to right, #7c7c8b, #52525e);
}

.event-btn .g-panel {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 10px;
    background-color: var(--bg-01);
}

.event-btn .g-img {
    width: 100%;
    transition: 0.3s;
}

.event-btn:hover .g-img {
    opacity: 0.75;
    transform: scale(1.1);
}

.event-btn .g-info {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    border-radius: 5px;
}

.event-btn .g-info li {
    height: 30px;
    padding: 0 10px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    margin-left: 1px;
    transition: 0.3s;
}

.event-btn .g-info li:first-child {
    border-radius: 5px 0 0 5px;
}

.event-btn .g-info li:last-child {
    border-right: none;
    border-radius: 0 5px 5px 0;
}

.event-btn .g-info li:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

.event-btn .g-info li i {
    margin: 0 5px 0 0;
}

.event-btn .g-info li:hover i {
    color: var(--text-primary);
}

.event-btn .title {
    max-width: 90%;
    color: var(--text-white);
    font-size: 16px;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.event-btn .view-btn {
    width: 80%;
    max-width: 130px;
    height: 44px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.75);
}

.event-btn:hover .view-btn {
    opacity: 1.0;
    transform: scale(1.0);
}


/* Table Nav */

.table-nav {
    width: 100%;
    padding: 10px 0;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.15);
}

.table-nav:last-child {
    border-bottom: none;
}

.table-nav .btn-grp button {
    width: 80px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 5px;
}

.table-nav ul li {
    padding: 0 10px;
}

.table-nav ul li i {
    font-size: 16px;
}

.view-content {
    width: 100%;
    min-height: 300px;
    background-color: #1e1e27;
    border: solid 1px #2a2a35;
    border-radius: 10px;
    padding: 30px 30px;
    margin: 20px 0 0;
    font-size: 18px;
}

.view-content img {
    border-radius: 15px;
}


/* Gift */

.gift-cards {
    width: calc(100% + 8px) !important;
    margin: 10px -4px 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    /*padding: 0 0 15px;*/
    /*border-bottom: solid 1px rgba(255, 255, 255, 0.1);*/
}

.gift-cert {
    width: calc(100% - 8px);
    height: 60px;
    margin: 0 4px;
    flex-grow: 1;
    display: inline-block;
    background-color: #26262f;
    color: #ffffff;
    font-size: 16px;
    border-radius: 30px;
    border: solid 1px #a68411;
}

.gift-cert:nth-child(2) {
    border-color: #bd1e24;
}

.gift-cert:hover {
    background-color: #f7bf04;
}

.gift-cert:nth-child(2):hover {
    background-color: #ed1c24;
}

.gift-cert .g-banner {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    padding: 0 6px;
    flex-wrap: nowrap;
}

.gift-cert .g-banner .g-img{
    margin-right: 10px;
    max-width: 50px;
    transition: 0.3s;
}

.gift-cert .title {
    display: inline-block;
    white-space: nowrap;
    font-size: 22px;
    margin-right: 10px;
}

.gift-cert .sub {
    color: #f7de04;
    font-size: 10px;
    white-space: nowrap;
}

.gift-cert:nth-child(2) .sub {
    color: #ff464d;
}

.gift-cert:hover .sub {
    color: rgba(0, 0, 0, 0.75);
}

.form-container .label-p {
    color: #adbbcc;
    font-size: 14px;
}

.form-container .form-group .gift-form {
    padding: 0;
    margin: 10px 0 0;
    border-bottom: none;
}

.form-container .form-group .gift-form input, .form-container .form-group .gift-form button {
    width: calc(20% - 6px);
    height: 42px;
    margin: 0 3px;
    border-radius: 5px;
}

.form-container .form-group .gift-form input {
    ackground-color: #262630;
    border: solid 1px #393946;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    padding: 0 5px;
}

.form-container .form-group .gift-form input::-webkit-input-placeholder {
    color: #adbbcc;
}

.form-container .form-group .gift-form button {
    width: calc(20% - 3px);
    font-size: 16px;
    margin: 0 0 0 3px;
    border-radius: 5px;
}

.form-container .form-group .gift-form button {
    background-color: #13b413;
    color: #ffffff;
    border: none;
}


.depositModal .modal-banner {
    margin-bottom: 0;
    padding: 6px 10px;
}

.depositModal .form-container .form-group {
    margin: 0 0 15px;
}

.depositModal .form-container .row .form-group {
    margin: 0;
}

.depositModal .modal-footer {
    margin-top: 10px;
}

.deposit-info-link {
    width: 100%;
    max-width: 100%;
    height: 48px;
    background-image: linear-gradient(#2e831c, #124b06);
    border-radius: 30px;
    color: #ffffff;
    font-size: 18px;
    padding: 5px;
    position: relative;
    z-index: 1;
    margin: 10px auto 15px;
    animation: dilAnim 0.5s ease infinite;
}

@keyframes dilAnim {
    0% { color: #ffffff; }
    50% { color: yellow; }
    100% { color: #ffffff; }
}

.deposit-info-link:hover {
    color: #ffffff;
}

.deposit-info-link:before {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border: solid 1px rgba(255, 255, 255, 0.25);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.deposit-info-link:hover:before {
    border-color: #aeff68;
}

.deposit-info-link:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 30px;
    filter: grayscale(1);
    background-image: url(/brands/win_new/static/img/bg/texture-bg.jpg);
    mix-blend-mode: color-dodge;
    opacity: 1.0;
}

.deposit-info-link .hover {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(to right, #ffdd00, #ee5b09);
    transition: 0.3s;
    opacity: 0;
}

.deposit-info-link:hover .hover {
    opacity: 1.0;
}

.deposit-info-link .icon-panel {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    margin-right: 5px;
}

.deposit-info-link .icon-panel i {
    color: #aeff68;
    animation: bannerBtnIcon 1.5s ease infinite;
}

@keyframes bannerBtnIcon {
    0% {
        transform: scale(1.0) rotate(0deg);
    }
    15% {
        transform: scale(1.2) rotate(15deg);
    }
    30% {
        transform: scale(1.2) rotate(-10deg);
    }
    45% {
        transform: scale(1.2) rotate(5deg);
    }
    60% {
        transform: scale(1.0) rotate(0deg);
    }
    100% {
        transform: scale(1.0) rotate(0deg);
    }
}

.di-img {
    width: 100%;
    max-width: 900px;
}

@media(max-width: 500px){
    .deposit-info-link {
        font-size: 14px;
        height: 46px;
    }

    .deposit-info-link .icon-panel {
        width: 28px;
        height: 28px;
    }

    .deposit-info-link .icon-img {
        max-width: 46px;
    }

    .form-container .form-group .gift-form input {
        font-size: 18px;
    }

    .gift-cert {
        height: 50px;
        font-size: 14px;
        padding: 0 5px;
    }

    .gift-cert .g-banner .g-img {
        max-width: 40px;
    }
}

@media(max-width: 414px){
    .form-container .form-group .gift-form button {
        font-size: 14px;
    }

    .form-container .form-group .gift-form input {
        font-size: 16px;
    }
}

.depositInfoModal .modal-dialog {
    max-width: 900px;
}

.depositInfoModal .di-img {
    border-radius: 15px;
}


/* ============================================================
   Promotion popups (top-of-page, like other sites)
   ============================================================ */
/* ===== intro splash video (shown first on load, click to enter) ===== */
.intro-splash {
    position: fixed;
    inset: 0;
    z-index: 100000;            /* above the promo popups (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    cursor: pointer;
}
.intro-splash.hide { display: none; }
.intro-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 92vw;
}
.intro-video {
    max-width: 68vw;
    max-height: 56vh;
    width: auto;
    height: auto;
    /* no border / box-shadow — the rectangular halo read as a border */
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
    animation: introPulse 1.4s ease-in-out infinite;
}
/* characters grow and shrink */
@keyframes introPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* WIN logo above the intro image */
.intro-logo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.intro-logo-char {
    height: 88px;
    width: auto;
    filter:
        drop-shadow(-4px 0 7px rgba(255, 184, 0, 0.45))
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
    animation: lgCharBob 5s ease-in-out infinite;
}
.intro-logo-win {
    font-size: 150px;
    font-weight: 900;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: 1px;
    /* room for the italic overhang so the "N" isn't clipped by the text box */
    padding: 6px 20px 10px;
    background: linear-gradient(100deg,
        #d98a00 0%, #ffd24d 14%, #fff7cc 26%, #ffffff 33%, #ffe06b 42%,
        #ffb400 58%, #ffe06b 72%, #fff7cc 82%, #ffd24d 92%, #d98a00 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(120, 60, 0, 0.35);
    filter: drop-shadow(0 0 9px rgba(255, 184, 0, 0.6));
    transform-origin: center bottom;
    animation:
        lgWinShine 3s linear infinite,
        lgWinGlow 2.4s ease-in-out infinite alternate,
        lgWinPop 5s ease-in-out infinite;
}
.intro-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffd24d 0%, #e0a020 100%);
    color: #2a1500;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(255, 190, 60, 0.55);
    animation: introHintPulse 1.4s ease-in-out infinite;
}
.intro-hint i { font-size: 20px; }
@keyframes introHintPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.promo-popups {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    padding: 110px 12px 24px;
    overflow-y: auto;
    /* modal backdrop: darkens the site and blocks clicks until popups close */
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.promo-popup {
    pointer-events: auto;
    width: 380px;
    max-width: 92vw;
    background: #16161d;
    border: 1px solid #2a2a36;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
}
.pp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 8px 0 12px;
    background: #0f0f14;
    border-bottom: 1px solid #262631;
}
.pp-today {
    background: none;
    border: none;
    color: #aab2c5;
    font-size: 13px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pp-today:hover { color: #ffffff; }
.pp-x {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    color: #aab2c5;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pp-x:hover { background: #ff3a1f; color: #ffffff; }
.pp-img { line-height: 0; }
.pp-img img { display: block; width: 100%; height: auto; }


/* ============================================================
   Slot brand banners — left column below the side menu (PC)
   ============================================================ */
.slot-banners { display: none; }

/* PC: slot banners stacked as a left column */
@media (min-width: 1321px) {
    .slot-banners {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: absolute;
        left: 0;
        /* offset parent is now .top-section (position:relative via .w-ba) since
           the banners were moved inside it: 52px top padding + 320px banner = 372 */
        top: 380px;
        width: 290px;
        z-index: 25;
    }
}

/* ===== mobile CTA cards: 2x2 grid above the board (PC styles are >=1321) ===== */
@media (max-width: 1320px) {
    .banner-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 10px 0;
    }
    .banner-cta .bcta-card {
        position: relative;
        display: block;
        height: 150px;
        border-radius: 10px;
        overflow: hidden;
        border: 1.5px solid rgba(255, 204, 88, 0.7);
        text-decoration: none;
        text-align: center;
        background: #100c06;
    }
    .banner-cta .bcta-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
    .banner-cta .bcta-vid-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(8, 6, 3, 0.7) 0%, rgba(8, 6, 3, 0.22) 34%,
            rgba(8, 6, 3, 0.28) 58%, rgba(8, 6, 3, 0.86) 100%);
    }
    .banner-cta .bcta-head {
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }
    .banner-cta .bcta-title {
        display: block;
        font-size: 23px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        background: linear-gradient(180deg, #ffe89a 0%, #ffce5a 32%, #e0a020 64%, #ffd24d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    }
    .banner-cta .bcta-live .bcta-title { font-size: 17px; }
    .banner-cta .bcta-sub {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        white-space: nowrap;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    }
    .banner-cta .bcta-desc {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 9px;
        z-index: 3;
        padding: 0 6px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.25;
        color: #f3ecd6;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    }
    .banner-cta .bcta-icon,
    .banner-cta .bcta-light,
    .banner-cta .bcta-floor,
    .banner-cta .bcta-over { display: none; }
}

/* mobile: show the member-info panel above the banner (PC keeps it as the
   absolute right sidebar). The telegram/info banners stay PC-only. */
@media (max-width: 1320px) {
    .member-sidebar {
        display: block;
        position: static;
        width: auto;
        margin: 0 10px 8px;
        z-index: auto;
    }
    .member-sidebar .member-banners { display: none; }
    .member-info { padding: 14px 16px; }
    /* member-info rows in 2 columns on mobile */
    .member-sidebar .mi-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
        row-gap: 0;
    }
    .member-sidebar .mi-list li { padding: 8px 2px; }
    .member-sidebar .mi-label { font-size: 14px; }
    .member-sidebar .mi-conv { display: none; }
}

/* mobile deposit/withdraw quick buttons under the banner (PC: hidden) */
.mobile-quick { display: none; }
@media (max-width: 1320px) {
    .mobile-quick {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 10px 0;
    }
    .mq-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 54px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 17px;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(180deg, #2c2c39 0%, #1b1b24 100%);
        border: 1.5px solid rgba(255, 204, 88, 0.7);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.4);
        transition: transform 0.15s ease;
    }
    .mq-btn i {
        font-size: 23px;
        color: #ffd24d;
    }
    .mq-btn:active { transform: translateY(1px); }
}

/* Mobile/tablet: shown below the banner as a 2-column grid (바둑판).
   Prefixed with .slot-banners so these win over the global item styles. */
@media (max-width: 1320px) {
    .slot-banners {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        position: static;
        width: auto;
        padding: 10px 10px 0;
    }
    /* no hover rollover on touch devices (it would stick after a tap) */
    .slot-banners .sb-over,
    .banner-cta .bcta-over { display: none !important; }

    .slot-banners .slot-ban { padding: 0 6px 0 56px; }
    .slot-banners .sb-char { left: 2px; top: 6px; height: 70px; }
    .slot-banners .sb-name { font-size: 12px; white-space: nowrap; }
    .slot-banners .sb-go { font-size: 9.5px; padding: 2px 7px; }
    .slot-banners .sb-cas1 .sb-name,
    .slot-banners .sb-cas2 .sb-name { transform: translateX(-10px); }
    .slot-banners .sb-tag { font-size: 8px; padding: 1px 4px; top: 4px; right: 4px; }
}

/* slot banner item styles — shared by both the PC column and the mobile grid */
.slot-ban {
        position: relative;
        display: flex;
        align-items: center;
        height: 78px;
        padding: 0 12px 0 84px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        text-decoration: none;
        animation: sbGlow 2.2s ease-in-out infinite;
        transition: transform 0.25s;
    }
    .slot-ban:hover { transform: translateY(-3px) scale(1.015); }
    @keyframes sbGlow {
        0%, 100% { box-shadow: 0 5px 14px rgba(0,0,0,0.5), 0 0 6px rgba(255,210,90,0.18); }
        50%      { box-shadow: 0 5px 14px rgba(0,0,0,0.5), 0 0 18px 1px rgba(255,210,90,0.6); }
    }

    /* character image (left) */
    .sb-char {
        position: absolute;
        left: 12px;
        top: 5px;
        bottom: auto;
        height: 90px;
        width: auto;
        z-index: 2;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
        animation: sbCharBob 2.4s ease-in-out infinite;
    }
    @keyframes sbCharBob {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-3px) rotate(-3deg); }
    }

    /* icon fallback (brands without a project image) */
    .sb-icon {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        font-size: 42px;
        color: #ffffff;
        filter: drop-shadow(0 0 9px rgba(255,255,255,0.7));
        animation: sbIconPulse 1.6s ease-in-out infinite;
    }
    @keyframes sbIconPulse {
        0%, 100% { transform: translateY(-50%) scale(1); }
        50%      { transform: translateY(-50%) scale(1.12); }
    }

    .sb-txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        z-index: 2;
    }
    .sb-name {
        color: #ffffff;
        font-size: 19px;
        font-weight: 600;
        line-height: 1;
        text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }
    .sb-go {
        align-self: center;
        padding: 4px 12px;
        border-radius: 12px;
        background: rgba(0,0,0,0.42);
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }
    .sb-go b { color: #ffd84a; font-weight: 700; }
    .sb-go::after { content: " ▶"; color: #ffd84a; }

    /* casino banners carry a CASINO tag at the top-right; reserve room so the
       centered title doesn't run under it */
    /* nudge only the casino title left so it clears the CASINO tag; the CLICK
       button stays centered and on one line like the other banners */
    .sb-cas1 .sb-name,
    .sb-cas2 .sb-name {
        transform: translateX(-24px);
    }

    /* ===== hover rollover: darken + character + game name (left), CTA (right) ===== */
    .slot-ban .sb-over {
        position: absolute;
        inset: 0;
        z-index: 6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 12px;
        background: linear-gradient(180deg, rgba(10, 8, 4, 0.82) 0%, rgba(5, 4, 2, 0.92) 100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .slot-ban:hover .sb-over {
        opacity: 1;
    }
    .sb-over-char {
        height: 44px;
        width: auto;
        flex: 0 0 auto;
        filter:
            drop-shadow(-3px 0 5px rgba(255, 184, 0, 0.45))
            drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
        animation: lgCharBob 5s ease-in-out infinite;
    }
    .sb-over-name {
        color: #ffe07a;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
        text-shadow: 0 0 8px rgba(255, 190, 60, 0.4);
    }
    .sb-over-btn {
        flex: 0 0 auto;
        padding: 5px 13px;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffd24d 0%, #e0a020 100%);
        color: #2a1500;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 0 10px rgba(255, 190, 60, 0.5);
        transform: translateX(8px);
        opacity: 0.5;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .slot-ban:hover .sb-over-btn { transform: translateX(0); opacity: 1; }

    /* sweeping light glare */
    .sb-shine {
        position: absolute;
        top: -25%;
        left: 0;
        width: 38%;
        height: 150%;
        background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 70%);
        transform: translateX(-200%) skewX(-18deg);
        animation: sbShine 3s ease-in-out infinite;
        z-index: 3;
        pointer-events: none;
        mix-blend-mode: screen;
    }
    @keyframes sbShine {
        0%   { transform: translateX(-200%) skewX(-18deg); }
        45%  { transform: translateX(380%) skewX(-18deg); }
        100% { transform: translateX(380%) skewX(-18deg); }
    }
    .sb-2 .sb-shine { animation-delay: 0.3s; }
    .sb-3 .sb-shine { animation-delay: 0.6s; }
    .sb-4 .sb-shine { animation-delay: 0.9s; }
    .sb-5 .sb-shine { animation-delay: 1.2s; }
    .sb-6 .sb-shine { animation-delay: 1.5s; }
    .sb-7 .sb-shine { animation-delay: 1.8s; }
    .sb-8 .sb-shine { animation-delay: 2.1s; }
    .sb-9 .sb-shine { animation-delay: 2.4s; }

    /* per-brand gradient */
    /* Unified gold signature: warm dark base + gold border, varied
       champagne -> amber -> bronze so the column reads cohesive, not flat. */
    /* original per-brand background colours restored; gold borders kept */
    .sb-1 { background: linear-gradient(110deg, #8a1226 0%, #3a0a14 100%); border-color: #ffe9a6; }
    .sb-2 { background: linear-gradient(110deg, #5e1a86 0%, #2a0a3d 100%); border-color: #ffe07a; }
    .sb-3 { background: linear-gradient(110deg, #16427a 0%, #0a2348 100%); border-color: #ffd24d; }
    .sb-4 { background: linear-gradient(110deg, #0f6e4e 0%, #06381f 100%); border-color: #ffc23c; }
    .sb-5 { background: linear-gradient(110deg, #a8430f 0%, #4a1a08 100%); border-color: #ffb24a; }
    .sb-6 { background: linear-gradient(110deg, #8a6510 0%, #3a2a08 100%); border-color: #ffd66b; }
    .sb-7 { background: linear-gradient(110deg, #7a1530 0%, #2a0810 100%); border-color: #f0c266; }
    .sb-8 { background: linear-gradient(110deg, #6a1a7a 0%, #2a0a3a 100%); border-color: #ffcf5a; }
    .sb-9 { background: linear-gradient(110deg, #14506e 0%, #08283a 100%); border-color: #e6c068; }

    @media (prefers-reduced-motion: reduce) {
        .slot-ban, .sb-char, .sb-icon, .sb-shine { animation: none !important; }
    }


/* Casino brand banners (top of the slot banner column) — PC + mobile */
    .sb-cas1 { background: linear-gradient(110deg, #2a2418 0%, #0e0c06 100%); border-color: #ffd45a; }
    .sb-cas2 { background: linear-gradient(110deg, #2e1810 0%, #140a05 100%); border-color: #ffb24a; }
    .sb-cas1 .sb-shine { animation-delay: 0s; }
    .sb-cas2 .sb-shine { animation-delay: 0.3s; }

    .sb-tag {
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 4;
        padding: 1px 7px;
        border-radius: 6px;
        background: linear-gradient(180deg, #ffe089, #e0a020);
        color: #2a1500;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }


/* ===== Provider slide: continuous auto-scroll + drag-to-move (JS-driven) ===== */
.providers-section .owl-carousel {
    overflow: hidden;
    width: 100%;
}
.providers-section .owl-stage-outer {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    cursor: grab;
}
.providers-section .owl-stage-outer::-webkit-scrollbar { display: none; }
.providers-section .owl-stage-outer.dragging { cursor: grabbing; }
/* while dragging, block card clicks so a drag doesn't trigger a card */
.providers-section .owl-stage-outer.dragging .owl-item { pointer-events: none; }
.providers-section .owl-stage {
    display: flex;
    width: max-content;
}
.providers-section .owl-item {
    flex: 0 0 188px;
    width: 220px;
    float: none;
}
/* nav arrows not needed for the auto-flow slide */
.providers-section .owl-nav {
    display: none;
}

/* ===== WIN GAME LIST: the slide stays inside the content (center) area —
   the container keeps its banner-aligned inset (see the .providers-section
   .container rules above), so the marquee no longer bleeds into the left frame.
   The title bar spans that center area left-to-right as a gold-bordered bar. */
.providers-section .header {
    position: relative;
    width: 100%;
    margin: 0 0 14px;
    height: 54px;
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    border-radius: 27px;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    box-shadow:
        0 0 14px rgba(255, 190, 60, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* drop the old glow plate + button background pills so only the bordered bar shows */
.providers-section .header:before { display: none; }
.providers-section .owl-nav-btn:before { display: none; }
/* « » arrows removed from the WIN GAME LIST bar
   (override the .dflex-ac-jc { display:flex !important } on .owl-nav) */
.providers-section .header .owl-nav {
    display: none !important;
}