@font-face {
    font-family: SCDream1;
    src: url(../../365casino/SCDream1.otf)
}

@font-face {
    font-family: SCDream4;
    src: url(../../365casino/SCDream4.otf)
}

@font-face {
    font-family: SCDream5;
    src: url(../../365casino/SCDream5.otf)
}

@font-face {
    font-family: SCDream6;
    src: url(../../365casino/SCDream6.otf)
}

@font-face {
    font-family: SCDream8;
    src: url(../../365casino/SCDream8.otf)
}

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

body {
    background-image: url(../../365casino/main-bg.jpg);
    background-color: #131313;
    background-position: top center;
    background-repeat: repeat-x;
    height: 100%;
    padding-right: 0 !important;
    /*text-align: center;*/
}

body.active {
    overflow: hidden;
}

body.mld-active {
    overflow: hidden;
}

input, button, select, a, p, th, td, span {
    outline: none !important;
    font-family: SCDream4, Fallback, sans-serif;
}

.wrapper {
    width: 100%;
    float: left;
    position: relative;
    z-index: 1;
}

.wrapper p {
    margin: 0;
}

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

.wrapper .mo_menu {
    display:none;
}

.bs-ul {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: table;
    height: 100%;
    padding: 0;
}

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

/* -- TOP MAIN -- */

.top-main {
    width: 100%;
    float: left;
    position: relative;
}

.top-main:before {
    content: '';
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #200000, #db1410, #200000);
    box-shadow: 0 7px 8px rgba(0, 0, 0, 1),
    0 7px 8px rgba(0, 0, 0, 1),
    0 7px 8px rgba(0, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
}

.top-main:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(../../365casino/banner-bg.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* -- MOVING BG -- */

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

.moving-bg .mb-1 {
    width: 31.06%;
    position: absolute;
    left: 0;
    top: 0;
}

.moving-bg .mb-2 {
    width: 27.87%;
    position: absolute;
    right: 27%;
    top: 0;
    /*animation: movBgSecAnim 20s ease 1;*/
}

@keyframes movBgSecAnim {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    60% {
        transform: translateX(-100%);
    }
    90% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

.moving-bg .mb-3 {
    width: 31.65%;
    position: absolute;
    right: 28.25%;
    top: 23.50%;
    /*animation: movBgThirdAnim 24s linear 1;*/
}

@keyframes movBgThirdAnim {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-60%);
    }
    100% {
        transform: translateX(0);
    }
}

.moving-bg .mb-4 {
    width: 32.70%;
    position: absolute;
    right: 0;
    top: 0;
    /*animation: movBgFourAnim 24s ease 1;*/
}

@keyframes movBgFourAnim {
    0% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50%);
    }
    60% {
        transform: translateX(50%);
    }
    95% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

/* -- NAV MAIN -- */

.nav-main {
    width: 100%;
    height: 99px;
    float: left;
    margin-top: 71px;
    text-align: center;
    background-image: url(../../365casino/nav-bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
    z-index: 98;
}

.nav-main .nav-cont {
    width: 1346px;
    height: 77px;
    display: inline-block;
    vertical-align: top;
    margin-top: 17px;
}

.nav-main .nav-cont .left {
    width: auto;
    height: 100%;
    float: left;
}

.nav-main .nav-cont .bs-ul li {
    position: relative;
    padding: 0 30px;
}

.nav-main .nav-cont .bs-ul li:before {
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../../365casino/nav-border.png);
    background-size: 100% 100%;
}

.nav-main .nav-cont .left .bs-ul li:first-child:before {
    display: none;
}

.nav-main .nav-cont .bs-ul li a {
    color: #fff;
    font-size: 16px;
    font-family: SCDream5;
    text-shadow: 0 1px 1px #330000;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    padding: 5px 10px;
}

.nav-main .nav-cont .bs-ul li a.yellow {
    color: #ffff00;
}

.nav-main .nav-cont .bs-ul li a i {
    margin-right: 3px;
}

.nav-main .nav-cont .bs-ul li a span {
    font-family: SCDream5;
}

/* -- HOVER STYLE -- */

.over-style {
    position: relative;
    overflow: hidden;
    border-radius: 8px 2px 8px 2px;
    box-shadow: 0 0 0 #000;
    transition: 0.3s;
    z-index: 1;
}

.over-style:hover {
    box-shadow: 0 0 3px #000;
}

.over-style:before, .over-style:after {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all .5s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 0;
    z-index: -1;
}

.over-style:before {
    top: 0;
    left: 0;
}

.over-style:after {
    bottom: 0;
    right: 0;
}

.over-style:hover:before {
    left: 50%;
    opacity: 0.9;
}

.over-style:hover:after {
    right: 50%;
    opacity: 0.9;
}

.over-style .os-cont {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    z-index: 1;
}

.over-style .os-cont:before, .over-style .os-cont:after {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all .5s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 0;
    z-index: -1;
}

.over-style .os-cont:before {
    top: 0;
    right: 0;
}

.over-style .os-cont:after {
    bottom: 0;
    left: 0;
}

.over-style:hover .os-cont:before {
    top: 50%;
    opacity: 0.9;
}

.over-style:hover .os-cont:after {
    bottom: 50%;
    opacity: 0.9;
}

/* -- BEFORE AFTER LOGIN  -- */

.bal-container {
    width: auto;
    height: 100%;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.before-login {
    height: 100%;
    float: left;
    display: none;
}

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

.after-login {
    float: left;
    display: none;
    margin-right: 10px;
}

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

.after-login .desktop {
    display: block;
    width: 440px;
}

.after-login .mobile {
    width: 100%;
    float: left;
    display: none;
}

.after-login .al-inner {
    width: 100%;
    float: left;
}

.after-login .al-row {
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 1px 0;
    position: relative;
    border-radius: 15px 4px 15px 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 0 5px;
}

.after-login .al-cont {
    width: 32.66%;
    height: 34px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0.50%;
    position: relative;
    padding: 0 0 0 50px;
}

.after-login .al-cont:first-child {
    margin-left: 0;
}

.after-login .al-cont:last-child {
    margin-right: 0;
}

.after-login .al-cont.btn-grp {
    border-bottom: none;
}

.after-login .al-cont .labels {
    width: 50px;
    height: 100%;
    position: absolute;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 3px;
}

.after-login .al-cont .labels .inner {
    width: 100%;
    height: 100%;
    float: left;
    color: #ffcd5b;
    font-size: 12px;
    text-shadow: 0 1px 1px #000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.after-login .al-cont .labels .inner i {
    color: #ffcd5b;
}

.after-login .al-cont .labels .inner a {
    color: #ffcd5b;
    font-size: 12px;
    text-decoration: none;
    transition: 0.3s;
    text-shadow: 0 1px 1px #000;
}

.after-login .al-cont .labels .inner a:hover {
    color: #fcdd5e;
    text-shadow: 0 0 10px #fcdd5e;
}

.after-login .al-cont .labels i {
    color: #fff;
}

.after-login .al-cont .labels img {
    width: 20px;
}

.after-login .al-cont .info {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5px;
}

.after-login .al-cont .info p {
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000;
}

.after-login .al-cont.prog-b {
    width: 49.5%;
    padding-right: 40px;
}

.after-login .al-cont.prog-b .labels {
    width: 55px;
}

.after-login .al-cont.prog-b .labels .inner {
    font-size: 12px;
}

.progressbar {
    width: 100%;
    height: 18px;
    overflow: hidden;
    position: relative;
    background-color: rgba(255, 255, 255, 1);
}

.progressbar:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: transparent;
    background-image: linear-gradient(90deg, #5e0c09, #5e0c09 3px, transparent 0, transparent 6px);
    background-size: 6px 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
}

.progressbar .percent {
    /*width:80%;*/
    height: 100%;
    float: left;
    background-color: #fb4b4b;
    position: relative;
    overflow: hidden;
}

.progressbar .percent:before {
    content: '';
    width: 400%;
    height: 100%;
    background-image: linear-gradient(to right, #ff8e00, #ffbb65, #ff8e00, #ffbf6e);
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    animation: percent_anim 2s linear infinite;
    z-index: 1;
}

@keyframes percent_anim {
    0% {
        left: 0;
    }
    50% {
        left: -300%;
    }
    100% {
        left: 0;
    }
}

.after-login .al-cont.prog-b .percent-text {
    width: 42px;
    height: 100%;
    position: absolute;
    left: 40px;
    top: 0;
    color: #ff8484;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-shadow: 0 1px 1px #000;
}

.after-login .al-cont.btn-grp {
    width: 49.5%;
    padding-left: 0;
}

.after-login .al-cont.btn-grp button {
    width: 34%;
    height: 24px;
    float: left;
    margin: 0 1%;
    border: none;
    transition: 0.3s;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    border-top-color: #dcbf9d;
    border-left-color: #b69a76;
    border-right-color: #b69a76;
    border-bottom-color: #7f643e;
    color: #211100;
    font-size: 12px;
    font-family: SCDream6;
    background-color: #df801f;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.after-login .al-cont.btn-grp button:hover {
    background-color: #ffd230;
}

.after-login .al-cont.btn-grp button:first-child {
    margin-left: 0;
}

.after-login .al-cont.btn-grp button:last-child {
    margin-right: 0;
}

.after-login .al-cont.btn-grp button.message {
    width: 28%;
}

.after-login .al-cont.btn-grp button.blue {
    background-color: #12a9ff;
    color: #000;
}

.after-login .al-cont.btn-grp button.red {
    background-color: #c53b37;
    color: #fff;
    font-family: SCDream4;
}

.after-login .al-cont.btn-grp button.blue:hover {
    background-color: #32f1b3;
}

.after-login .al-cont.btn-grp button.red:hover {
    background-color: #ff2525;
}

.mess-count {
    width: 17px;
    height: 17px;
    color: #fff;
    font-size: 8px;
    background-color: #0f1f2f;
    border: solid 1px #cdcdc3;
    border-radius: 50%;
    position: absolute;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    top: -2px;
    right: -1px;
    z-index: 1;
    animation: letter_anim 1s linear infinite;
}
.memo_count_exist {
    display:block;
}

@keyframes letter_anim {
    0% {
        opacity: 0
    }
    35% {
        opacity: 1
    }
    65% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

/* -- TSF LOGO -- */

.tsf-logo {
    width: 196px;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -36%;
    z-index: 9;
}

.tsf-logo img {
    position: absolute;
    margin: 0 auto;
}

.tsf-logo .pane {
    width: 100%;
    position: relative;
}

.tsf-logo .roulette {
    width: 55.11%;
    right: -2%;
    top: -22%;
    z-index: 1;
    animation: lgRouletteAnim 20s ease infinite;
}

@keyframes lgRouletteAnim {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }
    5% {
        opacity: 0;
        transform: rotate(0deg);
    }
    15% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(720deg);
    }
}

.tsf-logo .cards {
    width: 40%;
    right: -21.50%;
    top: -13%;
    animation: lgCardsAnim 20s ease infinite;
}

@keyframes lgCardsAnim {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 0;
        transform: translateY(0);
    }
    15% {
        opacity: 1;
        transform: translateY(5px);
    }
    30% {
        opacity: 1;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(5px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    60% {
        opacity: 1;
        transform: translateY(5px);
    }
    70% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(5px);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.tsf-logo .cont {
    width: 77.05%;
    left: -3%;
    right: 0;
    top: 9.25%;
    margin: 0 auto;
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 2;
}

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

.tsf-logo .three {
    width: 33.78%;
    left: 0;
    animation: lgThreeAnim 20s ease infinite;
}

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

.tsf-logo .heart {
    width: 10.60%;
    left: 14%;
    bottom: 23%;
}

.tsf-logo .cont .six {
    width: 39.07%;
    left: 0;
    right: 0;
    z-index: 1;
    animation: lgSixAnim 20s ease infinite;
}

@keyframes lgSixAnim {
    0% {
        opacity: 1;
        transform: translateY(100%);
    }
    3% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.tsf-logo .spade {
    width: 10.60%;
    left: 0;
    right: 0;
    bottom: 23%;
}

.tsf-logo .five {
    width: 33.78%;
    right: 0;
    animation: lgFiveAnim 20s ease infinite;
}

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

.tsf-logo .diamond {
    width: 8.61%;
    right: 15%;
    bottom: 23%;
}

.tsf-logo .card-symbol {
    animation: lgCardSymbolAnim 20s linear infinite;
}

@keyframes lgCardSymbolAnim {
    0% {
        opacity: 0;
        transform: rotateY(0deg);
    }
    5% {
        opacity: 0;
        transform: rotateY(0deg);
    }
    10% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotateY(900deg);
    }
}

.tsf-logo .casino {
    width: 70%;
    left: -3.50%;
    right: 0;
    bottom: 10%;
    animation: lgCasinoAnim 20s ease infinite;
}

@keyframes lgCasinoAnim {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    3% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* -- BG MAIN -- */

.bg-main {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.bg-main .center {
    width: 1342px;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    position: absolute;
}

.bg-main .center .cent-inner {
    width: 1920px;
    height: 100%;
    left: -289px;
    top: 0;
    position: absolute;
}

.bg-main .left-bg {
    width: 21.39%;
    display: inline-block;
    position: absolute;
    left: 11%;
    bottom: -25.25%;
}

.bg-main .left-bg img {
    position: absolute;
    opacity: 1;
}

.bg-main .left-bg .roulette {
    width: 63.63%;
    left: -14%;
    top: 8%;
    z-index: 1;
    /*animation: bmRouletteAnim 20s ease infinite;*/
}

@keyframes bmRouletteAnim {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    5% {
        opacity: 0;
        transform: translateY(50%);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    25% {
        opacity: 1;
        transform: translateY(5%);
    }
    35% {
        opacity: 1;
        transform: translateY(0);
    }
    45% {
        opacity: 1;
        transform: translateY(5%);
    }
    55% {
        opacity: 1;
        transform: translateY(0);
    }
    65% {
        opacity: 1;
        transform: translateY(5%);
    }
    75% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(5%);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.bg-main .left-bg .fireworks {
    width: 217.92%;
    right: -157.50%;
    top: -3.50%;
    z-index: 1;
    /*animation: bmFirewoksAnim 20s ease infinite;*/
}

@keyframes bmFirewoksAnim {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    10.5% {
        opacity: 1;
    }
    11% {
        opacity: 0.5;
    }
    11.5% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    15.5% {
        opacity: 0.5;
    }
    16% {
        opacity: 1;
    }
    16.5% {
        opacity: 0.5;
    }
    17% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.5% {
        opacity: 0.5;
    }
    51% {
        opacity: 1;
    }
    51.5% {
        opacity: 0.5;
    }
    52% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bg-main .left-bg .casino-man {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 2;
    animation: bmCasinoAnim 20s ease 1;
}

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

.bg-main .left-bg .glow-left {
    width: 150.36%;
    left: -35%;
    top: 10%;
    bottom: 0;
    margin: auto 0;
    z-index: 2;
    /*animation: bmGlowLeftAnim 20s ease 1;*/
}

@keyframes bmGlowLeftAnim {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    35% {
        opacity: 1;
    }
    45% {
        opacity: 0.5;
    }
    55% {
        opacity: 1;
    }
    65% {
        opacity: 0.5;
    }
    75% {
        opacity: 1;
    }
    85% {
        opacity: 0.5;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bg-main .right-bg {
    width: 29.38%;
    display: inline-block;
    position: absolute;
    right: 2.25%;
    bottom: -16.25%;
}

.bg-main .right-bg img {
    position: absolute;
    opacity: 1;
}

.bg-main .right-bg .glow-right {
    width: 140.05%;
    top: -33.25%;
    left: -30%;
    z-index: 1;
    animation: bmGlowRightAnim 20s ease 1;
}

@keyframes bmGlowRightAnim {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bg-main .right-bg .eva-girl {
    width: 28.98%;
    left: 13.50%;
    top: -5%;
    z-index: 1;
    animation: bmEvaAnim 20s ease 1;
}

@keyframes bmEvaAnim {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    3% {
        opacity: 0;
        transform: translateY(50%);
    }
    8% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.bg-main .right-bg .car {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 2;
    animation: bmCarAnim 20s ease 1;
}

@keyframes bmCarAnim {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }
    6% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.bg-main .right-bg .gun-man {
    width: 49.01%;
    right: 5%;
    top: -1%;
    z-index: 3;
    animation: bmGunManAnim 20s ease 1;
}

@keyframes bmGunManAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    5% {
        opacity: 0;
        transform: translateX(-50%);
    }
    12% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.explode-img {
    width: 101.79%;
    left: 0.75%;
    right: 0;
    top: 107%;
    margin: 0 auto;
    position: absolute;
    transform-origin: top center;
    /*animation: bmExplodeAnim 20s ease infinite;*/
}

@keyframes bmExplodeAnim {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    5% {
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    25% {
        opacity: 1;
        transform: scale(0.95);
    }
    35% {
        opacity: 1;
        transform: scale(1);
    }
    45% {
        opacity: 1;
        transform: scale(0.95);
    }
    55% {
        opacity: 1;
        transform: scale(1);
    }
    65% {
        opacity: 1;
        transform: scale(0.95);
    }
    75% {
        opacity: 1;
        transform: scale(1);
    }
    85% {
        opacity: 1;
        transform: scale(0.95);
    }
    95% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* -- BANNER MAIN -- */

.banner-main {
    width: 100%;
    height: 375px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding-right: 6%
}

.jackpot-main {
    width: auto;
    display: inline-block;
    text-align: center;
    position: relative;
    top: -9px;
    padding-left: 2%;
}

.jackpot-main .title {
    color: #ffffff;
    font-size: 48px;
    font-family: SCDream6;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 1);
}

.jackpot-main .title .highlight {
    color: #ffffff;
    font-size: 60px;
    font-family: SCDream8;
    text-shadow: none;
    background: -webkit-linear-gradient(#dc8632, #ff6e02, #fbd07d, #fb8b37, #f94803);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.jackpot-main .title .blue {
    color: #238cee;
    font-size: 48px;
    font-family: SCDream6;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 1);
}

.jackpot-main .title span:after {
    content: attr(data-text);
    background: none;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 1),
    0 0 2px #471a08;
}

.jackpot-main .amount-cont {
    width: 480px;
    height: 90px;
    display: inline-block;
    text-align: center;
    border-radius: 40px;
    border: solid 1px #990000;
    background-image: url(../../365casino/amount-bg.png);
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75),
    0 0 6px rgba(255, 156, 156, 0.60);
    animation: jmContAnim 0.5s ease infinite;
}

@keyframes jmContAnim {
    0% {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75),
        0 0 6px rgba(255, 156, 156, 0.60);
    }
    50% {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75),
        0 0 0 rgba(255, 156, 156, 0.60);
    }
    100% {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75),
        0 0 6px rgba(255, 156, 156, 0.60);
    }
}

.jackpot-main .amount-cont .amount {
    color: #ffffff;
    font-size: 48px;
    font-family: SCDream8;
    text-shadow: 0 4px 3px #000;
}

.jackpot-main .amount-cont .symbol {
    color: #defe04;
    font-size: 35px;
    font-family: SCDream8;
    text-shadow: 0 3px 3px #000;
    margin-left: 15px;
}

.announce-main {
    /*width: auto;*/
    width: 520px;
    display: inline-block;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
    position: relative;
    top: 5px;
    margin-left: -1.50%;
}

.announce-carousel {
    width: auto;
    display: inline-block;
}

.announce-main .text-cont {
    width: auto;
    display: inline-block;
    text-align: left;
    padding: 0 80px 25px 80px;
}

.announce-main .text-cont p {
    animation: announceAnim 4s ease 1 backwards;
}

.announce-main .text-cont p:last-child {
    animation-delay: 0.1s;
}

@keyframes announceAnim {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    20% {
        opacity: 1;
        transform: translateX(0);
    }
    80% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.announce-main .text-cont .title {
    color: #ffffff;
    font-size: 36px;
    font-family: SCDream8;
    text-shadow: 0 3px 2px #000,
    0 0 1px #000;
}

.announce-main .text-cont .title span {
    font-size: 60px;
    font-family: SCDream8;
    position: relative;
    top: 2px;
}

.announce-main .text-cont .title span.green {
    color: #27ff03;
}

.announce-main .text-cont .title span.blue {
    color: #12a9ff;
}

.announce-main .text-cont .title span.red {
    color: #f45637;
}

.announce-main .text-cont .sub {
    color: #ffe71e;
    font-size: 36px;
    font-family: SCDream6;
    text-shadow: 0 3px 2px #000,
    0 0 1px #000;
    margin-top: -12px;
}

.announce-carousel .carousel-indicators {
    bottom: 0;
    margin-bottom: 0;
}

.announce-carousel .carousel-indicators li {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 1px;
    background-color: #fff;
    border: 1px solid #fff;
}

.announce-carousel .carousel-indicators .active {
    width: 13px;
    height: 13px;
    margin: 0 1px;
    background-color: #c83b3b;
    border: 1px solid #c83b3b;
}

/* -- PAGE CONTENT -- */

.page-content {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: -72px;
}

.sc-container {
    width: 100%;
    max-width: 1346px;
    display: inline-block;
    vertical-align: top;
    border: 2px solid #292727;
    border-radius: 5px;
    position: relative;
    padding-bottom: 40px;
    box-shadow: 0 6px 10px #000000;
}

.slot-container {
    width: 100%;
    float: left;
    position: relative;
    z-index: 3;
}

.casino-container {
    width: 100%;
    float: left;
    position: relative;
    z-index: 3;
    margin-top: 15px;
}

.sc-container .panel-head {
    width: 100%;
    float: left;
    text-align: center;
    margin: 5px 0;
}

.sc-container .panel-head .title {
    color: #ff9600;
    font-size: 40px;
    font-family: SCDream1;
}

.sc-container .panel-head .title .bold {
    font-family: SCDream8;
}

.sc-container .panel-head .title span {
    font-family: SCDream1;
    text-shadow: none;
    background: -webkit-linear-gradient(#ffeea9, #ffb71c, #ff9600, #ff9600, #ff9600);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.sc-container .panel-head .title span:after {
    content: attr(data-text);
    background: none;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    text-shadow: 0 0 8px rgba(221, 187, 29, 0.30);
}

.sc-container .casino-container .panel-head .title span {
    background: -webkit-linear-gradient(#ffffff, #cccccc, #ffffff, #cccccc, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sc-container .casino-container .panel-head .title span:after {
    text-shadow: 0 0 8px rgba(219, 222, 219, 0.30);
}

.sc-container .pane-body {
    width: 100%;
    float: left;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* SC BTN */

.sc-btn {
    width: 210px;
    float: left;
    margin: 4px;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 2px 2px #000,
    0 0 18px rgba(0, 0, 0, 0.75);
}

.sc-btn:before, .sc-btn:after {
    content: '';
    width: 100%;
    width: calc(100% - 6px);
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: linear-gradient(to right, #200000, #f6ae00, #200000);
    z-index: 2;
    transition: 0.3s;
    border-radius: 3px;
    transition: 0.3s;
}

.sc-btn:before {
    top: 0;
}

.sc-btn:after {
    bottom: 0;
}

.sc-btn .border-over {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.sc-btn .border-ud:before, .sc-btn .border-ud:after {
    content: '';
    width: 0;
    height: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    background-color: #f6ae00;
    border-radius: 3px;
    transition: ease 0.3s;
    opacity: 0;
}

.sc-btn .border-ud:before {
    top: 0;
}

.sc-btn .border-ud:after {
    bottom: 0;
}

.sc-btn:hover .border-ud:before, .sc-btn:hover .border-ud:after {
    width: 100%;
    opacity: 1;
}

.sc-btn .border-side:before, .sc-btn .border-side:after {
    content: '';
    width: 1px;
    height: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
    background-color: #f6ae00;
    border-radius: 3px;
    transition: ease 0.3s;
    opacity: 0;
}

.sc-btn .border-side:before {
    left: 0;
}

.sc-btn .border-side:after {
    right: 0;
}

.sc-btn:hover .border-side:before, .sc-btn:hover .border-side:after {
    height: 100%;
    opacity: 1;
}

.sc-btn .main-cont {
    width: 100%;
    float: left;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    border: 1px solid #200000;
    transition: 0.3s;
    background-image: url(../../365casino/sc-bg.jpg);
    background-size: 100% 100%;
    min-height:198px;
}

.sc-btn .main-cont:before {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    z-index: 2;
    transition: 0.3s;
    opacity: 1;
}

.sc-btn:hover .main-cont:before {
    opacity: 0;
}

.sc-over {
    width: 100%;
    float: left;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    z-index: 1;
}

.sc-over:before, .sc-over:after {
    content: '';
    position: absolute;
    background-size: 200% 200%;
    transition: all .5s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
}



.sc-over:before {
    top: 0;
    left: 0;
    background-position: right top;
}

.sc-over:after {
    bottom: 0;
    right: 0;
    background-position: left bottom;
}

.sc-btn:hover .sc-over:before {
    left: 50%;
    opacity: 1;
}

.sc-btn:hover .sc-over:after {
    right: 50%;
    opacity: 1;
}

.sc-over .sc-in {
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    z-index: 1;
}

.sc-over .sc-in:before, .sc-over .sc-in:after {
    content: '';
    position: absolute;
    background-size: 200% 200%;
    transition: all .5s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
}



.sc-over .sc-in:before {
    top: 0;
    right: 0;
    background-position: right bottom;
}

.sc-over .sc-in:after {
    bottom: 0;
    left: 0;
    background-position: left top;
}

.sc-btn:hover .sc-over .sc-in:before {
    top: 50%;
    opacity: 1;
}

.sc-btn:hover .sc-over .sc-in:after {
    bottom: 50%;
    opacity: 1;
}

.sc-btn .sc-img {
    width: 100%;
    left: 0;
    position: relative;
    opacity: 1;
    z-index: 1;
    left: 0;
    transform-origin: top center;
    transition: ease 0.5s;
}

.sc-btn:hover .sc-img {
    opacity: 0;
}

.sc-btn .sc-glow {
    width: 173.08%;
    position: absolute;
    left: -11.75%;
    bottom: -25%;
    z-index: 1;
    /*animation: scGlowAnim 2s linear infinite;*/
}

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

.sc-btn .foot {
    width: 100%;
    height: 36px;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
}

.sc-btn .foot .bg {
    width: 100%;
    height: 36px;
    left: -100%;
    bottom: -1px;
    position: absolute;
    background-image: linear-gradient(to bottom, #2b2b2b, #000000);
    transition: ease 0.3s;
}

.sc-btn:hover .foot .bg {
    left: 0;
}

.sc-btn .foot .bg:before {
    content: '';
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    background-image: linear-gradient(to right, #200000, #f6ae00, #200000);
    border-radius: 3px;
    transition: 0.3s;
}

.sc-btn .foot .bg:after {
    content: '';
    width: 91px;
    height: 36px;
    right: -91px;
    top: 0;
    position: absolute;
    background-image: url(../../365casino/sc-foot.png);
    background-repeat: no-repeat;
}

.sc-btn .foot .bg:before {
    top: 0;
}

.sc-btn .foot .icon-img {
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 1;
}

.sc-btn .foot .name-btn {
    width: 85px;
    height: 28px;
    position: absolute;
    right: 7px;
    bottom: 5px;
    border-radius: 3px;
    background-color: #bd1713;
    border: solid 1px #e05151;
    color: #ffffff;
    font-size: 13px;
    transition: 0.5s;
}

.sc-btn:hover .foot .name-btn {
    color: #ffb71c;
    background-color: transparent;
    border: solid 1px transparent;
    text-shadow: 0 1px 1px #000;
}

.sc-btn .hover {
    width: 100px;
    height: 34px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    opacity: 0;
    overflow: hidden;
    border-radius: 8px 2px 8px 2px;
    box-shadow: 0 0 5px #000;
}

.sc-btn:hover .hover {
    opacity: 1;
}

.sc-btn .hover:before, .sc-btn .hover:after {
    content: '';
    position: absolute;
    background-color: #ffb921;
    transition: all .8s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 1;
}

.sc-btn .hover:before {
    top: 0;
    left: 0;
}

.sc-btn .hover:after {
    bottom: 0;
    right: 0;
}

.sc-btn:hover .hover:before {
    left: 50%;
    opacity: 0.9;
}

.sc-btn:hover .hover:after {
    right: 50%;
    opacity: 0.9;
}

.sc-btn .hover button {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    border: none;
    z-index: 1;
}

.sc-btn .hover button:before, .sc-btn .hover button:after {
    content: '';
    position: absolute;
    background-color: #ffb921;
    transition: all .8s ease;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    opacity: 1;
    z-index: -1;
}

.sc-btn .hover button:before {
    top: 0;
    right: 0;
}

.sc-btn .hover button:after {
    bottom: 0;
    left: 0;
}

.sc-btn:hover .hover button:before {
    top: 50%;
    opacity: 0.9;
}

.sc-btn:hover .hover button:after {
    bottom: 50%;
    opacity: 0.9;
}

.sc-btn .hover button span {
    color: #000;
    position: relative;
    z-index: 1;
    font-family: SCDream6;
}

/* -- FOOTER MAIN -- */

.footer-main {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.footer-main .footer-bg {
    position: relative;
    left: 5%;
    margin-bottom: -203px;
}

.footer-main .top-cont {
    width: 100%;
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: solid 1px #252525;
    text-align: center;
    padding: 30px 10px 13px 10px;
}

.footer-main .top-cont .copyright {
    color: #868686;
    font-size: 14px;
}

.footer-main .company-cont {
    width: 100%;
    float: left;
    margin-top: 15px;
}

.footer-main .company-cont .center {
    width: 100%;
    max-width: 1280px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.footer-main .company-cont img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 10px 10px
}

/*********************************************************************** M O B I L E *********************************************************************************/

.mypg-btn {
    width: auto;
    height: 45px;
    background-color: transparent;
    border: none;
    margin-left: 10px;
}

.mypg-btn span {
    display: block;
    width: 36px;
    height: 5px;
    background-color: #ff3300;
    box-shadow: 0 1px 2px #000;
    margin: 0 auto 6px;
    border-radius: 2px;
}

.mypg-btn span:first-child {
    position: relative;
    margin-top: 0;
    top: 0;
    transition: top .3s .3s, transform .3s 0s;
}

.mypg-btn span:nth-child(2) {
    opacity: 1;
    transition: opacity .3s;
}

.mypg-btn span:last-child {
    margin-bottom: 0;
    position: relative;
    top: 0;
    transition: top .3s .3s, transform .3s 0s;
}

.mypg-btn.opened span:first-child {
    top: 11px;
    transform: rotate(-45deg);
    transition: top .3s 0s, transform .3s .3s, color .3s .3s;
}

.mypg-btn.opened span:nth-child(2) {
    opacity: 0;
}

.mypg-btn.opened span:last-child {
    top: -11px;
    transform: rotate(45deg);
    transition: top .3s 0s, transform .3s .3s;
}

.sn-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 96;
    background-color: rgba(0, 0, 0, 0.5);
    top: 145px;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.sn-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 1380px) {
    .nav-main .nav-cont {
        width: 98%;
    }

    .nav-main .nav-cont .bs-ul li {
        padding: 0 15px;
    }

    .tsf-logo {
        width: 140px;
        top: -5%;
    }

    .banner-main {
        width: 100%;
        height: 27.25vw;
        padding-right: 0;
    }

    .jackpot-main {
        padding-left: 0;
    }

    .announce-main {
        margin-left: 0;
    }

    .bg-main .center {
        width: 100%;
    }

    .bg-main .center .cent-inner {
        width: 100%;
        left: 0;
    }

    .bg-main .left-bg {
        left: 0;
        top: 170px;
        bottom: auto;
    }

    .bg-main .right-bg {
        right: 0;
        top: 190px;
        bottom: auto;
    }

    .footer-main .footer-bg {
        width: 75.80%;
        margin-bottom: -15%;
    }
}

@media (max-width: 1160px) {
    .nav-main {
        height: 40px;
        background-position: center;
        margin-top: 110px;
        border-top: solid 1px #ffa370;
        box-shadow: 0 0 5px #000, 0 0 5px #000;
    }

    .nav-main .nav-cont {
        width: 100%;
        height: 100%;
        margin-top: 0;
    }

    .nav-main .nav-cont .left {
        width: 100%;
    }

    .nav-main .nav-cont .left .bs-ul {
        width: 100%;
    }

    .nav-main .nav-cont .left .bs-ul li {
        width: 25%;
    }

    .tsf-logo {
        width: 110px;
        top: auto;
        bottom: 45px;
    }

    .bal-container {
        width: auto;
        height: 40px;
        position: absolute;
        top: -72px;
        right: 15px;
    }

    .nav-main .nav-cont .bs-ul li {
        padding: 0 0;
    }

    .nav-main .nav-cont .bal-container .bs-ul li:before {
        display: none;
    }

    .after-login {
        margin-right: 0;
    }

    .after-login .mobile {
        display: block;
    }

    .after-login .desktop {
        width: 280px;
        height: 100%;
        float: left;
        position: fixed;
        overflow-y: auto;
        left: -100%;
        top: 151px;
        padding-bottom: 100px;
        opacity: 0;
        transition: 0.3s;
        background-color: #121212;
        border-right: solid 1px #313131;
        box-shadow: 0 0 5px #000;
    }

    .after-login .desktop.active {
        left: 0;
        opacity: 1;
    }

    .after-login .desktop::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }

    .after-login .desktop::-webkit-scrollbar-thumb {
        background: transparent;
    }

    .after-login .al-inner {
        padding: 10px;
    }

    .after-login .al-row {
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 0;
        background-color: transparent;
        padding: 0 0;
    }

    .after-login .al-cont {
        width: 100%;
        height: 36px;
        margin: 1px 0;
        padding: 0 0 0 55px;
        border-radius: 15px 2px 15px 2px;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .after-login .al-cont.prog-b {
        width: 100%;
    }

    .after-login .al-cont.btn-grp {
        width: 100%;
        height: 45px;
        padding: 0 10px;
    }

    .after-login .al-cont.btn-grp button {
        height: 30px;
    }

    .after-login .al-cont .info {
        justify-content: flex-start;
    }

    .progressbar:before {
        background-image: linear-gradient(90deg, #2a2a2a, #2a2a2a 3px, transparent 0, transparent 6px);
    }

    .bal-container {
        width: 100%;
        right: 0;
        padding: 0 10px;
    }

    .after-login {
        width: 100%;
    }

    .before-login {
        width: 100%;
    }

    .after-login .mobile {
        height: 100%;
    }

    .bal-container .bs-ul {
        width: 100%;
        height: 100%;
        float: left;
    }

    .bal-container .bs-ul li {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bal-container .bs-ul li:first-child {
        float: left;
    }

    .bal-container .bs-ul li:last-child {
        float: right;
    }

    .nav-main .nav-cont .bs-ul li .logout-btn {
        position: relative;
        top: 12px;
    }

    .banner-main {
        padding-bottom: 72px;
    }

    .jackpot-main .title {
        font-size: 4vw;
    }

    .jackpot-main .title .highlight {
        font-size: 5vw;
    }

    .jackpot-main .title .blue {
        font-size: 4vw;
    }

    .jackpot-main .amount-cont {
        width: auto;
        height: auto;
        padding: 1% 8%;
    }

    .jackpot-main .amount-cont .amount {
        font-size: 4vw;
    }

    .jackpot-main .amount-cont .symbol {
        font-size: 3vw;
    }

    .announce-main .text-cont {
        padding: 0 40px 25px 40px;
    }

    .announce-main .text-cont .title {
        font-size: 3.1vw;
    }

    .announce-main .text-cont .title span {
        font-size: 5.2vw;
    }

    .announce-main .text-cont .sub {
        font-size: 3.1vw;
        margin-top: -3%;
    }

    .top-main:after {
        background-size: cover;
    }
}

@media (max-width: 767px) {
    .nav-main {
        background-position: left -235px center;
    }

    .banner-main {
        height: 38vw;
    }

    .bg-main .left-bg {
        width: 30%;
        top: 155px;
        left: -5%;
    }

    .bg-main .right-bg {
        width: 38%;
        right: -5%;
        top: 170px;
    }

    .sc-container .pane-body {
        padding: 0 10px;
    }

    .sc-btn {
        width: 32.33%;
        margin: 4px 0.50%;
    }
}

@media (max-width: 660px) {
    .sc-btn .foot .icon-img {
        max-width: 70px;
    }

    .sc-btn .foot .name-btn {
        width: 70px;
        right: 3px;
        font-size: 11px;
        white-space: nowrap;
    }
}

@media (max-width: 500px) {
    .banner-main {
        height: 43vw;
    }

    .announce-main .text-cont {
        padding: 0 10px 25px 10px;
    }

    .announce-carousel .carousel-indicators li {
        width: 10px;
        height: 10px;
    }

    .announce-carousel .carousel-indicators .active {
        width: 10px;
        height: 10px;
    }

    .sc-btn {
        width: 48.50%;
        margin: 4px 0.75%;
    }

    .footer-main .footer-bg {
        width: 100%;
        margin-bottom: -22%;
    }
	.wrapper .mo_menu {
		display:block;
	}
	.header-registration, .horizontal-navigation{
		display:none;
	}
	#offcanvas-flip.flip_open{
    	position: fixed;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	width: 100vw;
    	z-index: 1000;
	}
    #offcanvas-flip.flip_open:before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.15s linear;
    }
	#offcanvas-flip.flip_open .uk-offcanvas-bar{
        left:auto;
    	right: 0;
	}
	#offcanvas-flip.flip_open .uk-offcanvas-close{
        line-height: 1;
        background-color: transparent;
    }
}

@media (max-width: 414px) {
    .banner-main {
        height: 62vw;
    }

    .announce-main {
        width: 100%;
        margin-top: -10%;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }

    .jackpot-main .title {
        font-size: 6vw;
    }

    .jackpot-main .title .highlight {
        font-size: 7vw;
    }

    .jackpot-main .title .blue {
        font-size: 6vw;
    }

    .jackpot-main .amount-cont {
        width: auto;
        height: auto;
        padding: 1% 8%;
    }

    .jackpot-main .amount-cont .amount {
        font-size: 6vw;
    }

    .jackpot-main .amount-cont .symbol {
        font-size: 5vw;
    }

    .announce-main .text-cont {
        padding: 0 10px 0 10px;
    }

    .announce-main .text-cont .title {
        font-size: 5vw;
    }

    .announce-main .text-cont .title span {
        font-size: 7vw;
    }

    .announce-main .text-cont .sub {
        font-size: 5vw;
        margin-top: -2%;
    }

    .announce-carousel .carousel-indicators {
        display: none;
    }

    .bg-main .left-bg {
        width: 40%;
    }

    .bg-main .right-bg {
        width: 50%;
        right: -10%;
    }
}

/*=============================================================================================================================*/

/************************************************************ MODAL ************************************************************/

/*=============================================================================================================================*/

.modal {
    padding-right: 0 !important;
}

.modal-open {
    padding-right: 0 !important;
}

.modal-open .modal::-webkit-scrollbar {
    width: 0px;
    background: transparent !important;
}

.modal-open .modal::-webkit-scrollbar-thumb {
    background: transparent;
}

.modal-backdrop.in {
    opacity: 0.6;
}

.modal-header{
	width: 100%;
    height: 58px;
    line-height: 58px;
    color: white;
    font-weight: bold;
    background: linear-gradient(to right, black, #1B2430);
    cursor: move;
    font-size: 30px;
    padding-left: 10px;
}

.modal-content{
	overflow: hidden;
}

.bs-modal {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 30px 10px;
    overflow-y: scroll;
}

.bs-modal::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
}

.bs-modal p {
    margin: 0;
}

.bs-modal button {
    padding: 0;
}

.bsm-cont {
    width: 100%;
    display: inline-block;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
}

.bsm-inner {
    width: 100%;
    float: left;
    position: relative;
    padding: 0;
    overflow: hidden;
    border: solid 1px #656565;
    border-radius: 5px;
    padding-left: 130px;
}

.nav-mdl {
    width: 130px;
    height: 100%;
    float: left;
    /* position: absolute; */
    left: 0;
    background-color: #191919;
    top: 0;
    z-index: 3;
    box-shadow: 0 0 10px #000;
}

.nav-mdl .nav-cont {
    width: 100%;
    float: left;
    padding: 10px;
    position: relative;
}

.nav-mdl .nav-btn {
    width: 100%;
    height: 90px;
    float: left;
    background-image: linear-gradient(#2c2d2f, #2c2d2f);
    border: none;
    color: #9c9c9e;
    font-size: 12px;
    font-family: SCDream6;
    position: relative;
    z-index: 1;
    border-right: 1px solid #1a1a1c;
    border-left: 1px solid #3b3b3d;
    border-top: 2px solid #4c4d4f;
    /*border-radius: 30px 5px 35px 5px;*/
    border-radius: 20px 20px 5px 5px;
    padding-bottom: 2px;
    transition: 0.3s;
    overflow: hidden;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.nav-mdl .nav-btn:hover {
    color: #00dcff;
    border-top: 2px solid #5c5d5f;
}

.nav-mdl .nav-btn.active {
    /*border-top: 2px solid #edd190;*/
    border-left: 1px solid #deb826;
    color: #ffb219;
    text-shadow: 0 0 15px rgb(225 183 19);
    background-image: linear-gradient(#eaa123, #97580a);
    /* margin: -5px 0; */
    z-index: 2;
}

.nav-mdl .nav-btn.active:first-child {
    margin-top: 0;
}

.nav-mdl .nav-btn:first-child {
    border-left: none;
}

.nav-mdl .nav-btn:last-child {
    border-right: none;
}

.nav-mdl .nav-btn:before,
.nav-mdl .nav-btn:after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    transition: 0.3s;
    opacity: 1;
}

.nav-mdl .nav-btn:before {
    top: 0;
    background-image: linear-gradient(#37383a, #2c2d2f);
}

.nav-mdl .nav-btn:after {
    bottom: 0;
    background-image: linear-gradient(#212224, #15161a);
}

.nav-mdl .nav-btn:hover:before {
    background-image: linear-gradient(#48494b, #3c3d3f);
}

.nav-mdl .nav-btn:hover:after {
    background-image: linear-gradient(#323335, #272729);
}

.nav-mdl .nav-btn.active:before {
    opacity: 0;
}

.nav-mdl .nav-btn.active:after {
    opacity: 0;
}

.nav-mdl .nav-btn button {
    width: 100%;
    height: 100%;
    float: left;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 1px #330000;
}

.nav-mdl .nav-btn.active button {
    color: #fff;
    text-shadow: 0 0 15px rgb(255, 117, 25);
}

.nav-mdl .nav-btn button i {
    font-size: 24px;
}

@media (min-width: 800px) {
    .nav-mdl .nav-btn {
        height: 98px;
    }
}

.modal-body {
    width: 100%;
    float: left;
    text-align: center;
    position: relative;
    background-image: url(../../365casino/modal-bg.png);
    background-repeat: no-repeat;
    background-position: top 2px center;
    background-color: #121212;
    border-left: none;
    /* padding: 0; */
    z-index: 1;
}

.modal-body:before, .modal-body:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

.modal-body:before {
    background-image: url(../../365casino/modal-bg-left.png);
    background-position: top left;
}

.modal-body:after {
    background-image: url(../../365casino/modal-bg-right.png);
    background-position: bottom right;
}
.mypage .modal-body:before,
#registModal .modal-body:before,
#request_charge .modal-body:before,
#request_exchange .modal-body:before{
	background-image:none;
}
#notiReadModal .modal-title, #qnaWriteModal .modal-title, #myInfoModify .modal-title, #fastQnAWriteModal .modal-title, #eventQnAWriteModal .modal-title{
	margin:0;
}
#notiReadModal .modal-body:before, #notiReadModal .modal-body:after,
#eventQnAWriteModal .modal-body:before, #eventQnAWriteModal .modal-body:after,
#fastQnAWriteModal .modal-body:before, #fastQnAWriteModal .modal-body:after,
#myInfoModify .modal-body:before, #myInfoModify .modal-body:after,
#qnaWriteModal .modal-body:before, #qnaWriteModal .modal-body:after{
	background-image:none;
}

.modal-body .mdl-head {
    width: 100%;
    float: left;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    margin-top: 15px;
}

.modal-body .mdl-head .mdl-title {
    width: 100%;
    float: left;
    text-align: center;
}

.modal-body .mdl-head .mdl-title div {
    width: auto;
    display: inline-block;
    vertical-align: top;
    animation: mdlTitleAnim 0.8s ease 1;
    display: none;
}

.modal-body .context {
    min-height: 400px;
    margin: 0 -10px;
    padding: 10px;
    text-align: left;
    background-color: #fff;
    border-radius: 4px;
}

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

.modal-body .mdl-head .mdl-title .active {
    display: block;
}

.modal-body .mdl-head .mdl-title div p {
    font-family: SCDream6;
    text-shadow: 0 3px 2px #000000;
}

.modal-body .mdl-head .mdl-title div .en {
	margin:0;
    color: #ffffff;
    font-size: 22px;
}

.modal-body .mdl-head .mdl-title div .kr {
    color: #ffbb7f;
    font-size: 35px;
    margin-top: -5px;
}

.modal-body .form-container .form-group.half {
    width: 50%;
}

.modal-body .form-container .form-group .infos .btn-grp button {
    width: 13%;
}

.modal-body .form-container .form-group .labels{
    width: 130px;
    padding-left: 10px;
}

.modal-body .form-container .form-group .infos {
    padding-left: 10px;
}

.modal-body .form-container .form-group .infos input {
    width: 100%;
    border-radius: 5px;
}

.modal-body .form-container .form-group .infos select {
    border-radius: 5px;
}

.modal-body .form-container .form-group.dup .infos input {
    width: calc( 100% - 120px);
}

.modal-body .form-container .form-group.dup .infos input + button{
	height: 50px;
    margin-left:10px;
}

.mypage .modal-body .form-container .form-group .infos {
	display: flex; justify-content: space-between;
}

.modal-body .button {
	height: auto;
    line-height: 1em;
	border: 0 none;
}

.modal-footer{
	justify-content: center;
}

.modal-header .modal-close{
	margin: 0 0 -1rem auto;
	background: url(../../icon-close.png) no-repeat;
	opacity:1;
}

.mdl-close-btn {
    width: 41px;
    height: 43px;
    top: 12px;
    right: 12px;
    position: absolute;
    background-color: transparent;
    background-image: url(../../365casino/close.png);
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
    border: none;
    z-index: 3;
}

.mdl-close-btn:before, .mdl-close-btn:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.5s;
}

.mdl-close-btn:before {
    background-image: url(../../365casino/close.png);
    opacity: 1;
}

.mdl-close-btn:after {
    background-image: url(../../365casino/close-on.png);
    opacity: 0;
}

.mdl-close-btn:hover:before {
    opacity: 0;
}

.mdl-close-btn:hover:after {
    opacity: 1;
}

.modal-body .tab-mdl {
    width: 100%;
    /*height: 100%; 입금신청>입금계좌문의가 하단으로 떨어짐*/
    float: left;
    padding: 10px 20px 0;
    position: relative;
    z-index: 1;
    display: none;
}

.subpgModal .modal-body .tab-mdl {
    min-height: 680px;
}

@keyframes modalTabAnim {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.modal-body .tab-mdl:before, .modal-body .tab-mdl:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.modal-body .tab-mdl.deposit {
    padding-bottom: 90px;
}

.modal-body .tab-mdl.active {
    display: block;
    animation: modalTabAnim 0.8s 0s ease 1 backwards;
}

.mdl-menu {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    background-color: #151515;
    border-bottom: solid 1px #f06a82;
    position: relative;
    padding-left: 82px;
    padding-top: 20px;
}

.mdl-menu .deco {
    width: 50px;
    height: 35px;
    position: absolute;
    left: 30px;
    bottom: 0;
    background-color: #f06a82;
    border-radius: 3px 3px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdl-menu .deco i {
    color: #fff;
    font-size: 14px;
}

.mdl-menu a {
    width: auto;
    height: 40px;
    float: left;
    padding: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    margin: 0 20px;
    transition: 0.3s;
    text-decoration: none;
    position: relative;
}

.mdl-menu a:hover {
    color: #f06a82;
}

.mdl-menu a.active {
    color: #f06a82;
}

.mdl-menu a.active:hover {
    color: #f06a82;
}

.form-container {
    width: 100%;
    float: left;
}

.form-container .form-group {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 120px;
    margin-bottom: 30px;
}

.form-container .form-group p {
    margin: 0;
}

.form-container .form-group .labels {
    width: 110px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form-container .form-group .labels p {
    color: #ffffff;
    font-size: 16px;
    text-shadow: 0 2px 1px #000000;
}

.form-container .form-group .infos {
    width: 100%;
    float: left;
    text-align: left;
}

.form-container .form-group .infos p {
    color: #ff9c0e;
    font-size: 22px;
    font-family: SCDream6;
    /* margin-top: 8px; */
}

.form-container .form-group .infos input, .form-container .form-group .infos select {
    width: 100%;
    height: 50px;
    float: left;
    background-color: #fff;
    border: none;
    color: #000;
    font-size: 17px;
    font-family: SCDream5;
    padding: 0 20px;
    border-radius: 10px;
	box-sizing: border-box;
}

.form-container .form-group .infos input::placeholder {
    color: #4f4f4f;
}

.form-container .form-group.w-btn .infos input {
    width: 75%;
}

.form-container .form-group.w-btn .infos button {
    width: 24%;
    height: 50px;
    border: 1px solid;
    border-top-color: #dcbf9d;
    border-left-color: #b69a76;
    border-right-color: #b69a76;
    border-bottom-color: #7f643e;
    padding: 0;
    white-space: nowrap;
    margin-left: 1%;
    border-radius: 10px;
    color: #4e2800;
    font-size: 18px;
    font-family: SCDream6;
    background-color: #df801f;
    transition: 0.3s;
    box-shadow: 0 3px 3px #000000;
}

.form-container .form-group.w-btn .infos button:hover {
    color: #4c3709;
    background-color: #e2a417;
}

.form-container .form-group .infos label {
    width: 100%;
    height: 50px;
    float: left;
    position: relative;
}

.form-container .form-group .infos label select {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 17px;
    padding: 0 10px;
}


.form-container .form-group .infos label i {
    right: 3px;
    top: 8px;
    color: #ccc;
    font-size: 26px;
    pointer-events: none;
    position: absolute;
}

.form-container .form-group .infos .btn-grp {
    width: 100%;
    float: left;
    margin-top: 10px;
}

.form-container .form-group .infos .btn-grp button {
    width: 15.83%;
    height: 35px;
    float: left;
    margin: 0 0.50%;
    background-color: #656565;
    border: none;
    color: #fff;
    font-size: 12px;
    transition: 0.3s;
    padding: 0;
    border-radius: 3px;
}

.form-container .form-group .infos .btn-grp button:hover {
    background-color: #8e8e8e;
    color: #000;
}

.form-container .form-group .infos .btn-grp button:first-child {
    margin-left: 0;
}

.form-container .form-group .infos .btn-grp button:last-child {
    margin-right: 0;
    background-color: #da2430;
    color: #fff;
    font-family: SCDream6;
}

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

.deposit-ask {
    width: 100%;
    height: 80px;
    float: left;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 40px;
}

.deposit-ask button {
    width: 140px;
    height: 35px;
    background-color: #ffe054;
    color: #000;
    font-size: 14px;
    border-radius: 3px;
    border: none;
    transition: 0.3s;
}

.deposit-ask button i {
    margin-right: 5px;
}

.deposit-ask p {
    color: #fff;
    font-size: 12px;
    margin-left: 20px;
}

.deposit-ask button:hover {
    background-color: #ff972c;
}

.modal-btn-foot {
    width: 100%;
    height: auto;
    float: left;
    margin: 30px 0 20px 0;
    text-align: center;
}

.modal-btn-foot .btn-cont {
    width: auto;
    display: inline-block;
}

.modal-btn-foot .btn-cont button {
    width: 150px;
    height: 60px;
    float: left;
    border: none;
    border: 1px solid;
    border-top-color: #dcbf9d;
    border-left-color: #b69a76;
    border-right-color: #b69a76;
    border-bottom-color: #7f643e;
    background-color: #df801f;
    margin: 0 8px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    color: #4e2800;
    font-size: 18px;
    font-family: SCDream6;
    transition: 0.3s;
    box-shadow: 0 3px 3px #000000;
}

.modal-btn-foot .btn-cont button span {
    font-family: SCDream6;
    z-index: 1;
}

.modal-btn-foot .btn-cont button.red {
    background-color: #bd1713;
    color: #fff;
    border-top-color: #fe8383;
    border-left-color: #db4f4f;
    border-right-color: #db4f4f;
    border-bottom-color: #a60202;
}

.modal-btn-foot .btn-cont button.green {
    background-color: #3bb33b;
    color: #073807;
    border-top-color: #8dff8d;
    border-left-color: #69ea69;
    border-right-color: #69ea69;
    border-bottom-color: #116111;
}

.modal-btn-foot .btn-cont button i {
    margin-right: 3px;
}

.modal-btn-foot .btn-cont button:hover {
    color: #fff;
}

/* LOGIN */

.loginModal .bsm-cont {
    width: 800px;
}

.bsm-inner {
    padding-left: 0;
}

.sub-page .bsm-inner {
    padding-left: 130px;
}

.loginModal .form-container .form-group {
    padding-left: 0;
}

.loginModal .modal-body .tab-mdl {
    padding: 40px 75px;
}

/* JOIN */

.joinModal .bsm-cont {
    width: 800px;
}

.joinModal .bsm-inner {
    padding-left: 0;
}

.joinModal .modal-body .tab-mdl {
    padding: 40px 75px;
}

/* EVENT NOTICE */

.board-view {
    width: 100%;
    height: 300px;
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, .2);
    margin-top: 5px;
    padding: 10px;
    border-radius: 5px;
}

.board-view .inner-cont {
    width: 100%;
    height: 100%;
    float: left;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    overflow-y: scroll;
}

.board-view .inner-cont::-webkit-scrollbar {
    width: 10px;
    background: #1f1f1f;
}

.board-view .inner-cont::-webkit-scrollbar-thumb {
    background: #151515;
}

/* -- BS Table -- */

.bs-table {
    width: 100%;
    float: left;
}

.bs-table thead {
    background-color: #2f2e2d;
}

.bs-table thead th {
    height: 40px;
    color: #fff;
    font-size: 14px;
    text-align: center;
	vertical-align: middle;
}

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

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

.bs-table tr td {
    height: 44px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px #3a3a3a;
    padding: 1px;
    transition: 0.3s;
	vertical-align:middle;
}

.bs-table tr:hover td {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ff7745;
}

.bs-table tbody tr:last-child td {
    border-bottom: none;
}

.bs-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

.bs-table tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}

.bs-table tr td.count {
    /*width:10%;*/
}

.bs-table tr td.title {
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}

.bs-table tr td.date {
    /*width:20%;*/
    font-size: 12px;
}

.bs-table tr td.red {
    color: #fea304;
}

.bs-table td .level-txt {
    display: inline-block;
    width: 45px;
    text-align: left;
}

.bs-table tr td a {
    color: #fff;
    font-size: 12px;
    transition: 0.3s;
    text-decoration: none;
}

.bs-table tr:hover td a {
    color: #ff7745;
}

.new-icon {
    width: 30px;
    height: 15px;
    border-radius: 2px;
    border: none;
    color: #000;
    font-size: 8px;
    background-color: #ffe25c;
    display: inline-block;
    vertical-align: middle;
}

/* -- Pagination -- */

.pagination > li > a {
    color: #fff;
    font-size: 14px;
    font-family: SCDream4;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .2);
    background-color: transparent;
    width: 25px;
    height: 25px;
    padding: 2px 0;
    margin: 0 2px;
    border-radius: 2px;
}

.pagination li.turn-pg a {
    color: #fff;
    padding: 0 0;
    font-size: 18px;
    background-color: rgba(255, 255, 255, .15);
}

.pagination li.turn-pg a span {
    position: relative;
    top: -3px;
    font-family: Arial;
}

.pagination li.space-r a {
    margin-right: 7px;
}

.pagination li.space-l a {
    margin-left: 7px;
}

.pagination > li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3)
}

.pagination > li.turn-pg > a:hover {
    background-color: rgba(28, 165, 255, 0.3);
    border: 1px solid rgba(0, 166, 255, 0.3);
}

.pagination .active {
    color: #fff;
    background-color: #ff7519;
    border: none;
}

.pagination .active:hover {
    color: #000;
    background-color: rgba(255, 163, 4, 1);
    border: 1px solid rgba(255, 163, 4, 1);
}

/* -- Gamelist -- */

.gamelistModal .bsm-cont {
    width: 1200px;
}

.gamelist-cont {
    position: relative;
    width: 100%;
    /*height: 635px;*/
    float: left;
    /*overflow-y: scroll;*/
    margin-top: -15px;
    z-index: 1;
}

.gamelist-cont::-webkit-scrollbar {
    width: 10px;
    background: #585858;
    border-radius: 5px;
}

.gamelist-cont::-webkit-scrollbar-thumb {
    background: #313131;
    border-radius: 5px;
}

.gl-inner {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    /* top: -10px; */
}

.game-btn {
    width: 15%;
    display: inline-block;
    margin: 15px 0.75%;
    position: relative;
    background-color: transparent;
    border-radius: 5px;
    border: solid 1px #ccc;
    transition: 0.3s;
}

.game-btn:hover {
    border: solid 1px #FF7619;
}

.game-btn .inner {
    width: 100%;
    float: left;
    position: relative;
}

.game-btn .img-cont {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5px;
}

.game-btn .img-cont .main-img {
    width: 100%;
    transition: 0.3s;
    opacity: 1;
}

.game-btn:hover .img-cont .main-img {
    opacity: 0.4;
}

.game-btn .img-cont .icon-cont {
    width: 100%;
    position: absolute;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-family: SCDream7;
    transition: 0.3s;
    opacity: 0;
}

.game-btn:hover .img-cont .icon-cont {
    opacity: 1;
}

.game-btn .game-name {
    width: 90%;
    height: 34px;
    float: left;
    position: absolute;
    bottom: -17px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #966a0b;
    border: solid 3px #121212;
    color: #fff;
    font-size: 14px;
    transition: 0.3s;
    border-radius: 30px;
}

.game-btn:hover .game-name {
    background: #ffffff;
    color: #FF7619;
    border: solid 2px #FF7619;
}

/* MY PAGE */

.mypage-nav {
    width: 100%;
    float: left;
    margin-bottom: 40px;
    border-radius: 20px 4px 20px 4px;
    box-shadow: 0 0 5px #000;
    overflow: hidden;
}

.mypage-nav button {
    width: 100%;
    height: 40px;
    float: left;
    background-color: #2f2f2f;
    border: none;
    color: #9c9c9e;
    font-size: 12px;
    font-family: SCDream6;
    position: relative;
    z-index: 1;
    border-right: 1px solid #1a1a1c;
    border-left: 1px solid #3b3b3d;
    border-top: 2px solid #4c4d4f;
    padding-bottom: 2px;
    transition: 0.3s;
}

.mypage-nav button:hover {
    color: #f3d752;
    border-top: 2px solid #5c5d5f;
}

.mypage-nav button.active {
    color: #f3d752;
    border-top: 2px solid #f3d752;
    text-shadow: 0 0 15px rgba(243, 215, 82, 0.55);
}

.mypage-nav button:first-child {
    border-left: none;
}

.mypage-nav button:last-child {
    border-right: none;
}

.mypage-nav button:before,
.mypage-nav button:after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    transition: 0.3s;
    opacity: 1;
}

.mypage-nav button:before {
    top: 0;
    background-image: linear-gradient(#37383a, #2c2d2f);
}

.mypage-nav button:after {
    bottom: 0;
    background-image: linear-gradient(#212224, #15161a);
}

.mypage-nav button:hover:before {
    background-image: linear-gradient(#48494b, #3c3d3f);
}

.mypage-nav button:hover:after {
    background-image: linear-gradient(#323335, #272729);
}

.mypage-nav button.active:before {
    opacity: 0;
}

.mypage-nav button.active:after {
    opacity: 0;
}

.mypageModal .tab-mdl {
    min-height: 600px;
}

.mypage-tabs {
    width: 100%;
    float: left;
    min-height: 511px;
}

.mypage-tabs .mp-tab {
    width: 100%;
    float: left;
    animation: modalTabAnim 0.8s ease 1;
    display: none;
}

@keyframes modalTabAnim {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.mypage-tabs .mp-tab.active {
    display: block
}

.mypageModal .form-container .form-group {
    padding-left: 150px;
}

.mypageModal .form-container .form-group .labels {
    width: 150px;
}

.mypageModal .mp-info {
    width: 100%;
    height: 80px;
    float: left;
    background-color: rgba(204, 204, 204, .20);
    border: solid 1px #616161;
    border-radius: 10px;
    margin-bottom: 10px;
}

.mypageModal .mp-info .cont {
    width: 25%;
    height: 100%;
    float: left;
    display: table;
}

.mypageModal .mp-info .cont span {
    color: #fff;
    font-size: 14px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.mypageModal .mp-info .cont span img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.mypageModal .mp-info .cont span p:first-child {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.mypageModal .mp-info .cont span p:last-child {
    color: #ffd400;
    font-size: 18px;
    display: inline-block;
    position: relative;
    margin: 0;
    vertical-align: middle;
}

.mypageModal .mp-info .point-form {
    width: 100%;
    height: 35px;
    border: none;
    border-radius: 3px;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.5);
}

.mypageModal .mp-info .point-form::-webkit-input-placeholder {
    color: #ccc;
}

.mypageModal .mp-info .points-btn {
    color: #fff;
    font-size: 11px;
    width: auto;
    height: 35px;
    border: none;
    border-radius: 5px;
    background-color: #009aff;
    padding: 0 10px;
    transition: 0.3s;
    white-space: nowrap;
}

.mypageModal .mp-info .points-btn:hover {
    background-color: #0a88e6;
}

.mypageModal .my-table {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    margin-top: 20px;
}

.mypageModal .my-table:before {
    content: '';
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 1px;
    transition: opacity .2s linear;
    background: radial-gradient(ellipse at center, #b7853c 0, rgba(75, 251, 181, 0) 68%);
}

.soon-text {
    color: #fff;
    padding: 50px 0;
}

/* 1:1 */
.with-depth tr th i {
    margin-right: 5px;
}

.with-depth tr td {
    height: auto;
    padding: 11px 5px;
}

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

.with-depth tr .title-td {
    text-align: left;
    padding: 0 5px 0 10px;
}

.with-depth tr .nav-td {
    width: 5%;
}

.with-depth tr .nav-td button {
    width: auto;
    width: 30px;
    height: 20px;
    padding: 0 5px;
    border: none;
    background-color: #ef6868;
    color: #fff;
    font-size: 10px;
    margin: 0 3px;
    border-radius: 3px;
    transition: 0.3s;
}

.with-depth tr .nav-td button:hover {
    background-color: #ff0000;
}

.with-depth tr .nav-td button.active {
    background-color: #fb6a2f;
}

.with-depth tr .nav-td button.active:hover {
    background-color: #20a2ff;
    color: #000;
}

.with-depth tr .option-td {
    width: 5%;
}

.with-depth tr .option-td button {
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 14px;
    transition: 0.3s;
}

.with-depth tr .option-td button:hover {
    color: #ff9954;
}

.with-depth tr .nav-td .ud-icon {
    transition: 0.3s;
    display: inline-block;
    transform: rotate(90deg);
    font-size: 14px;
    vertical-align: middle;
}

.with-depth tr.dropdown td {
    padding: 0;
    border: none;
}

.with-depth .mess-cont {
    display: none;
    width: 100%;
    width: calc(100% - 20px);
    height: 200px;
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, .2);
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

.with-depth .mess-cont .inner {
    width: 100%;
    height: 100%;
    float: left;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    overflow-y: scroll;
}

.with-depth .mess-cont .inner::-webkit-scrollbar {
    width: 10px;
    background: #1f1f1f;
}

.with-depth .mess-cont .inner::-webkit-scrollbar-thumb {
    background: #151515;
}

.inquiry-form {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    margin-top: 10px;
}

.inquiry-form input {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: solid 1px #505050;
    background-color: rgba(31, 35, 39, 0.66);
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
}

.inquiry-form input::-webkit-input-placeholder {
    color: #fff;
    font-size: 14px;
}

.inquiry-form .textarea-cont {
    width: 100%;
    height: 150px;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 15px 10px;
    margin-top: 5px;
    border-radius: 5px;
}

.inquiry-form .textarea-cont textarea {
    width: 100%;
    height: 100%;
    float: left;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    resize: none;
    outline: none;
}

.inquiry-form .textarea-cont textarea::-webkit-scrollbar {
    width: 10px;
    background: #1d2124;
    border-radius: 10px;
}

.inquiry-form .textarea-cont textarea::-webkit-scrollbar-thumb {
    background: #339933;
    border-radius: 10px;
}

.inquiry-form textarea::-webkit-input-placeholder {
    color: #fff;
    font-size: 14px;
}

#mypage .bsm-inner{
	display: flex;
	/* padding-left:130px; */
}

@media (max-width: 1200px) {
	#mypage .bsm-inner{
		display: block;
		padding-left:0;
	}

    .nav-mdl {
        width: 100%;
        height: auto;
        position: relative;
        padding-top: 0;
        background-color: #161616;
        border-right: none;
        padding: 0 5px;
    }

    .nav-mdl .nav-btn {
        width: 100%;
        height: 40px;
        left: 0;
        float: left;
        margin: 3px 0;
    }

    .nav-mdl .nav-btn.active:first-child {
        margin-top: 3px;
    }

    .nav-mdl .nav-btn.active {
        margin: 3px 0;
    }

    .subpgModal .nav-mdl .nav-btn {
        width: 25%;
    }

    .nav-mdl.three .nav-btn {
        width: 33.33%;
    }

    .nav-mdl .nav-btn button i {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }

    .nav-mdl .nav-btn button p {
        display: inline-block;
        vertical-align: middle;
        /* color: red; */
    }
}

@media (max-width: 1024px) {
    .game-btn {
        width: 32.33%;
        margin: 10px 0.5%;
    }
	.modal-body .form-container .form-group .infos input,
	.modal-body .form-container .form-group .infos select{
		height: 40px;
	}
	.modal-body .form-container .form-group.half {
		width: 100%;
	}
	.modal-body .form-container .form-group.dup .infos input {
		width: calc(100% - 120px);
		height: 40px;
	}
	.modal-body .form-container .form-group.dup .infos input + button{
		height: 40px;
	}
}

@media (min-width: 991px) {
	.desktop-hidden {
		display: none !important;
	}
}

@media (max-width: 990px) {
	.mobile-th, .mobile-td, .mobile-hidden {
		display: none !important;
	}
}

@media (max-width: 800px) {
    .bsm-inner {
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .modal-body .mdl-head .mdl-title div .kr {
        color: #ffbb7f;
        font-size: 20px;
        margin-top: 0;
    }

    .modal-body:before {
        background-size: 250px 138px;
    }

    .modal-body:after {
        background-size: 350px 108px;
    }

    .joinModal .modal-body .tab-mdl {
        padding: 40px 20px;
    }

    .loginModal .modal-body .tab-mdl {
        padding: 40px 20px;
    }

    .modal-body .tab-mdl {
        padding: 10px 0px;
    }

    .form-container .form-group {
        padding-left: 0;
        margin-bottom: 15px;
    }

    .form-container .form-group .labels {
        width: 100%;
        height: auto;
        position: relative;
        float: left;
        display: inline-block;
        text-align: left;
        padding-left: 5px;
        margin-bottom: 5px;
    }

    .form-container .form-group .infos input {
        height: 30px;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 5px;
    }

    .form-container .form-group .labels p {
        font-size:13px;
    }

    .form-container .form-group .infos label {
        height: auto;
        margin-bottom: 0;
    }

    .form-container .form-group .infos label select {
        height: 40px;
        font-size: 14px;
        padding: 0 10px;
        border-radius: 5px;
    }

    .form-container .form-group.w-btn .infos button {
        height: 40px;
        border-radius: 5px;
        font-size: 14px;
    }

    .form-container .form-group .infos {
        text-align: center;
    }

    .mypageModal .form-container .form-group {
        padding-left: 0;
    }

    .deposit-ask {
		position: static;
        padding: 0 20px;
    }

    .gamelist-cont {
        height: auto;
        overflow-y: auto;
    }

    .gl-inner {
        /* top: -10px; */
        left: 0;
    }

    .game-btn {
        width: 31.83%;
    }
	.modal-body .tab-mdl.deposit {
		padding-bottom: 0px;
	}
	.modal-body .deposit-ask button{
		width: 160px;
	}
	.modal-body .form-container .form-group .infos .btn-grp{
		display:flex;
		justify-content: space-between;
	}
	.modal-body .form-container .form-group .infos .btn-grp button {
		/* width: auto; */
		flex: 1 0 auto;
		min-width: 80px;
		margin: 4px;
	}
	.modal-body .bs-table {
		margin-top: 10px;
	}
	.mp-tab .ui.form .fields {
        margin: 0;
    }
	.ui.form.qnaWriteModal .ui.button.floated{
		margin:5px 0 0;
	}
	.ui.form.qnaWriteModal .form-inline + .field > label{
		display:none;
	}
}
@media (max-width: 576px) {
    #slot_list .modal-dialog {
        max-width: 100%;
        margin: 1.75rem auto;
    }
}
	.ui.form.qnaWriteModal .form-inline > .field{
		padding-left: 0.5em;
	    padding-right: 0.5em;
	}
@media (max-width: 500px) {
    .nav-main .nav-cont .bs-ul li a {
        font-size: 14px;
        padding: 0 0;
    }

    .nav-mdl .nav-btn {
        border-radius: 30px 5px 30px 5px;
    }

    .subpgModal .modal-body .tab-mdl {
        min-height: auto;
    }

    .subpgModal .nav-mdl .nav-btn {
        width: 50%;
    }

    .bs-table tr td a {
        display: inline-block;
        vertical-align: middle;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-btn-foot .btn-cont {
        width: 100%;
    }

    .modal-btn-foot .btn-cont button {
        width: 48%;
        height: 30px;
        margin: 0 1%;
        font-size: 14px;
    }

    .joinModal .modal-btn-foot .btn-cont button {
        width: 100%;
        margin: 0 0;
    }

    .modal-btn-foot.three .btn-cont button {
        width: 32%;
    }

    .modal-btn-foot.three .btn-cont button:first-child {
        margin-left: 0;
    }

    .modal-btn-foot.three .btn-cont button:last-child {
        margin-right: 0;
    }

    .mypageModal .mp-info .cont span {
        font-size: 10px;
        padding: 0 3px;
    }

    .mypageModal .mp-info .cont:first-child {
        width: 19%;
    }

    .mypageModal .mp-info .cont:nth-child(3) {
        width: 30%;
    }

    .mypageModal .mp-info .cont span p:first-child {
        font-size: 10px;
    }

    .mypageModal .mp-info .cont:nth-child(2) span p:first-child {
        position: relative;
        top: -5px;
    }

    .mypageModal .mp-info .cont span p:last-child {
        font-size: 14px;
    }

    .mypageModal .mp-info .cont span img {
        display: block;
        margin: 3px auto 0 auto;
    }

    .mypageModal .mp-info .points-btn {
        width: 100%;
        font-size: 8px;
        padding: 0 5px;
    }

    .bs-table tr td a {
        display: inline-block;
        vertical-align: middle;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bs-table thead th {
        font-size: 12px;
    }
}

@media (max-width: 414px) {
    .bs-table tr td a {
        max-width: 160px;
    }

    .game-btn {
        width: 48.5%;
    }

    .mypage-nav {
        margin-bottom: 20px;
    }

    .nav-mdl .nav-btn button {
        white-space: nowrap;
    }

    .mypageModal .nav-mdl .nav-btn button {
        font-size: 11px;
    }

    .historyModal .nav-mdl .nav-btn button {
        font-size: 12px;
    }
}

.ui.form .inline.field input[type="date"]{
	height: 36px;
	margin:0;
	box-sizing:border-box;
}
.ui.form .inline.field span{
	display:inline-block;
	margin:0em 0.85714286em;
	color:#fff;
}
.ui.form .ui.button{
	vertical-align: middle;
}

.layer_wrap {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index:1041;
}
.layer_wrap.active {
  display: block;
}
.layer_wrap .dimm {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0);
  opacity: 0.6;
}
.layer_wrap .layer_container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 840px;
  max-height: 90vh;
}
.layer_wrap .layer_container .layer_content {
  position: relative;
}
.layer_wrap .layer_container .layer_content:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  background-position: bottom right;
  background-image: url(../images/modal-bg-right.png);
}
.layer_wrap .layer_container .layer_content > .header {
  position: relative;
  width: 100%;
  background: linear-gradient(to right, black, #1b2430);
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  text-align: center;
  color: white;
  font-weight: bold;
}
.layer_wrap .layer_container .layer_content > .header .close_btn {
  position: absolute;
  border: 0;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-size: 25px;
  background: url(../images/icon-close.png) 0 0 no-repeat;
}

.layer_wrap .layer_container .layer_content .content {
  width: 100%;
  min-height: 500px;
  max-height: calc( 90vh - 50px );
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  position: relative;
  background: url(../images/modal-bg.png) top 2px center no-repeat;
  background-color: #121212;
  overflow-y: auto;
}

.layer_wrap .layer_container .layer_content .content::-webkit-scrollbar {width: 8px;height:8px;}
.layer_wrap .layer_container .layer_content .content::-webkit-scrollbar-thumb {background-color: rgba(255 255 255 / 60%);border-radius: 10px;background-clip: padding-box;border: 2px solid transparent;}
.layer_wrap .layer_container .layer_content .content::-webkit-scrollbar-track {background-color: rgba(0 0 0 / 10%);border-radius: 10px;box-shadow: inset 0px 0px 3px white;}
.layer_wrap .layer_container .layer_content .content:-webkit-input-placeholder, :-ms-placeholder, :-moz-placeholder, ::placeholder { }

.layer_wrap .layer_container .layer_content .content .title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 10px;
  margin-top: 15px;
  overflow: hidden;
}
.layer_wrap.slot_wrap .layer_container {
  width: 100%;
  max-width:1200px;
}
.layer_wrap.slot_wrap .layer_container .layer_content:after{
	background: none;
}
.layer_wrap.slot_wrap .layer_container .layer_content .content{
	height: 635px;
}