@font-face {
    font-family:SCDream4;
    src:url(../fonts/SCDream4.otf);
}
@font-face {
    font-family:SCDream5;
    src:url(../fonts/SCDream5.otf);
}
@font-face {
    font-family:SCDream6;
    src:url(../fonts/SCDream6.otf);
}
@font-face {
    font-family:SCDream8;
    src:url(../fonts/SCDream8.otf);
}
html{
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll !important;
}
body{
    height:100%;
    padding-right: 0 !important; 
    text-align:center;
    background-color:#0c0906;
    color:#fff;
    font-size:13px;
    font-family:"SCDream4", Arial, sans-serif;
}
body.active{
    overflow:hidden;
}
button{
    cursor:pointer;
}
button,input,select,textarea{
    outline:none !important;
}
.wrapper{
    width:100%;
    float:left;
    position:relative;
    overflow-x:hidden;
    z-index:1;
}
.wrapper.affix{
    padding-top:70px;
}
.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;
    position:relative;
}

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

/* Header Main */

.header-main{
    height:185px;
    background-image:url(../img/bg/header-bg.png);
    background-position:center center;
    position:relative;
    z-index:99;
    transition:0.3s;
    overflow:hidden;
}
.header-main .container{
    height:62px;
    display:flex;
    align-items:center;
    margin-top:41px;
}
.link-main li{
    padding:0 25px;
}
.link-main li:first-child{
    padding-left:0;
}
.link-main li a{
    color:#cccccc;
    font-family:SCDream5;
    position:relative;
    padding:5px 0;
    text-decoration:none;
    transition:0.3s;
    cursor: pointer;
}
.link-main li a:hover{
    color:#6ce822;
}
.link-main li a i{
    color:#ffb23f;
    margin-right:3px;
    transition:0.3s;
}
.link-main li a:hover i{
    color:#6ce822;
}
.link-main li a:before{
    content:'';
    width:0;
    height:1px;
    background-color:#ffb23f;
    box-shadow:0 0 3px #ffcf87;
    border-radius:5px;
    position:absolute;
    transition:0.3s;
}
.link-main li a:before{
    bottom:0;
    right:0;
}
.link-main li a:hover:before{
    width:0;
}

/* -- KK LOGO -- */

.kk-logo{
    width:228px;
    display:inline-block;
    position:absolute;
    left:2%;
    right:0;
    top:0;
    margin:0 auto;
    z-index:9;
}
.kk-logo img{
    position:absolute;
}
.kk-logo .pattern{
    width:100%;
    position:relative;
    opacity:0;
}
.kk-logo .glow{
    width:100%;
    left:0;
    top:0;
    animation:lgGlowAnim 15s ease infinite;
}
@keyframes lgGlowAnim{
    0%{opacity:0;}
    8%{opacity:0;}
    18%{opacity:1;}
    28%{opacity:0;}
    38%{opacity:1;}
    48%{opacity:0;}
    58%{opacity:1;}
    68%{opacity:0;}
    78%{opacity:1;}
    88%{opacity:0;}
    98%{opacity:1;}
    100%{opacity:0;}
}
.kk-logo .pane{
    width:63.6%;
    left:0;
    right:1.5%;
    margin:0 auto;
    top:1%;
    opacity:1;
}
.kk-logo .k{
    width:39.48%;
    left:0;
    right:18%;
    margin:0 auto;
    top:10%;
    animation:lgKAnim 15s ease infinite;
}
@keyframes lgKAnim{
    0%{opacity:1;transform:scale(0); right:0;}
    4%{opacity:1;transform:scale(1); right:0;}
    8%{opacity:1;transform:scale(1); right:18%;}
    28%{opacity:1;transform:scale(1); right:18%;}
    33%{opacity:1;transform:scale(1); right:0%;}
    38%{opacity:1;transform:scale(1); right:0%;}
    43%{opacity:1;transform:scale(1); right:18%;}
    63%{opacity:1;transform:scale(1); right:18%;}
    68%{opacity:1;transform:scale(1); right:0%;}
    73%{opacity:1;transform:scale(1); right:0%;}
    78%{opacity:1;transform:scale(1); right:18%;}
    98%{opacity:1;transform:scale(1); right:18%;}
    100%{opacity:0;transform:scale(1); right:18%;}
}
.kk-logo .k-half{
    width:37.29%;
    left:24.5%;
    right:0;
    margin:0 auto;
    top:10%;
    animation:lgKhalfAnim 15s ease infinite;
}
@keyframes lgKhalfAnim{
    0%{opacity:1;transform:scale(0); left:3%;}
    4%{opacity:1;transform:scale(1); left:3%;}
    8%{opacity:1;transform:scale(1); left:24.5%;}
    28%{opacity:1;transform:scale(1); left:24.5%;}
    33%{opacity:1;transform:scale(1); left:3%;}
    38%{opacity:1;transform:scale(1); left:3%;}
    43%{opacity:1;transform:scale(1); left:24.5%;}
    63%{opacity:1;transform:scale(1); left:24.5%;}
    68%{opacity:1;transform:scale(1); left:3%;}
    73%{opacity:1;transform:scale(1); left:3%;}
    78%{opacity:1;transform:scale(1); left:24.5%;}
    98%{opacity:1;transform:scale(1); left:24.5%;}
    100%{opacity:0;transform:scale(1); left:24.5%;}
}
.kk-logo .slot{
    width:51.76%;
    left:0;
    right:8.5%;
    margin:0 auto;
    bottom:15%;
    animation:lgSlotAnim 15s ease infinite;
}
@keyframes lgSlotAnim{
    0%{opacity:0;transform:translateY(-50%);}
    6%{opacity:0;transform:translateY(-50%);}
    11%{opacity:1;transform:translateY(0);}
    98%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}
.kk-logo .fruits{
    width:22.81%;
    right:10.75%;
    bottom:19.5%;
    transform-origin:bottom left;
    animation:lgFruitsAnim 15s ease infinite;
}
@keyframes lgFruitsAnim{
    0%{opacity:0;transform:scale(0);}
    8%{opacity:0;transform:scale(0);}
    13%{opacity:1;transform:scale(1.1);}
    18%{opacity:1;transform:scale(1);}
    28%{opacity:1;transform:scale(1.05);}
    38%{opacity:1;transform:scale(1);}
    48%{opacity:1;transform:scale(1.05);}
    58%{opacity:1;transform:scale(1);}
    68%{opacity:1;transform:scale(1.05);}
    78%{opacity:1;transform:scale(1);}
    88%{opacity:1;transform:scale(1.05);}
    98%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(1);}
}

/* Line Notice */
.notice-carousel{
    padding-left:18px;
}
.notice-carousel .fa-bell{
    color:#f62f2f;
    font-size:14px;
    vertical-align:middle;
    position:absolute;
    left:0;
    bottom:2px;
    animation:noticeBellAnim 3s ease infinite;
}
@keyframes noticeBellAnim{
    0%{transform:rotate(0deg)}
    5%{transform:rotate(20deg)}
    10%{transform:rotate(-20deg)}
    15%{transform:rotate(20deg)}
    20%{transform:rotate(0deg)}
    100%{transform:rotate(0deg)}
}
.notice-carousel .carousel-inner{
    width:100%;
    color:#ffcc00;
    font-size:12px;
    font-style:italic;
    vertical-align:middle;
}
.notice-carousel .carousel-inner .carousel-item{
    animation:noticeAnim 3s ease 1 forwards;
}
@keyframes noticeAnim{
    0%{opacity:0;transform:translateY(-100%);}
    20%{opacity:1;transform:translateY(0);}
    90%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(100%);}
}
.notice-carousel .carousel-inner .carousel-item span{
    display: inline-block;
    vertical-align: middle;
    max-width:320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- BEFORE AFTER LOGIN -- */

.before-login{
    display:none;
}
.before-login.active{
    display:block;
}
.before-login button{
    width:86px;
    height:36px;
    border-radius:18px;
    background-color:#1a1919;
    border:solid 1px #252121;
    float:left;
    margin-left:28px;
    color:#ffb23f;
    font-family:SCDream5;
    text-shadow:0 1px 1px rgba(0,0,0,1);
    transition:0.3s;
}
.before-login .join-btn{
    width:100px;
    color:#ed3d3d;
}
.before-login button:hover{
    background-color:#ffb23f;
    border:solid 1px #ffd28d;
    color:#000;
    text-shadow:0 1px 1px rgba(0,0,0,0);
}
.before-login .join-btn:hover{
    color:#fde2e2;
    background-color:#ed3d3d;
    border:solid 1px #ff7171;
}

/* After Login */

.after-login{
    float:left;
    display:none;
    margin:6px 0 0;
}
.after-login.active{
    display:block;
}
.after-login .desktop{
    display:block;
    width:400px;
}
.after-login .mobile{
    width:100%;
    float:left;
    display:none;
}
.after-login .mobile .mob-btn {
    width: 50%;
    height: 100%;
    margin-left: 0;
    border-radius: 0;
    border: none;
    background-color: #1a1919;
    float: left;
    color: #00b6fa;
    font-family: SCDream5;
    transition: 0.3s;
}
.after-login .mobile .gray{
    color: #ccc;
}
.after-login .mobile .mob-btn:hover{
    background-color: #00b6fa;
    color: #000;
}
.after-login .mobile .gray:hover{
    color: #000;
    background-color:#ccc;
}
.after-login p{
    margin:0;
}
.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;
    position:relative;
    margin:2px 0;
}
.after-login .al-cont{
    width:36%;
    height:28px;
    float:left;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content:flex-start;
    position:relative;
}
.after-login .al-cont.user-name{
    width:28%;
}
.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:auto;
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    position:relative;
}
.after-login .al-cont.user-name .labels i{
    margin-right:0;
}
.after-login .al-cont .labels span{
    color:#ccc;
    font-size:11px;
}
.after-login .al-cont .labels i{
    color:#ffb23f;
    margin-right:5px;
}
.after-login .al-cont .labels .arrow-icon{
    color:#dcdcdc;
    font-size:18px;
    text-shadow:0 0 1px #000;
    margin-right:5px;
}
.after-login .al-cont .labels a{
    color:#ccc;
    font-size:12px;
    text-decoration:none;
    transition:0.3s;
}
.after-login .al-cont .labels a:hover{
    color:#e88a01;
}
.after-login .al-cont .labels img{
    width:20px;
}
.after-login .al-cont .info{
    width:auto;
    height:100%;
    float:left;
    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:11px;
    white-space:nowrap;
}
.after-login .user-name .info p{
    color:#00b6fa;
    margin-right:2px;
    max-width:70px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.after-login .al-cont .info .symbol{
    color:#929292;
}

/* Progressbar */

.after-login .al-cont.prog-b{
    width:49.5%;
    border-radius:3px;
    padding: 0 5px 0 70px;
    margin-right:0;
}
.after-login .al-cont.prog-b .labels{
    width:70px;
    position:absolute;
    left:0;
    top:0;
}
.after-login .al-cont.prog-b .info{
    width:100%;
}
.progressbar{
    width:100%;
    height:26px;
    overflow:hidden;
    position:relative;
    border-radius: 18px;
    background-color:#20201f;
    border:solid 1px #3a3737;
}
.progressbar .percent{
    width:20%;
    height:calc(100% - 4px);
    float:left;
    position:relative;
    top:2px;
    left:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
}
.progressbar .percent:before{
    content:'';
    width:400%;
    height:100%;
    background-color:#ffffcb;
    background-image: linear-gradient(to right,#cccccc,#fff,#cccccc,#fff,#cccccc,#fff);
    position:absolute;
    left:0;
    top:0;
    display:block;
    z-index:1;
    animation:progressbarAnim 1s linear infinite;
}
@keyframes progressbarAnim{
    0%{left:0;}
    100%{left:-300%;}
}
.after-login .al-cont .progressbar .percent p{
    color:#000;
    font-size:12px;
    font-family:SCDream6;
    position:relative;
    z-index:2;
}
.after-login .al-cont.btn-grp{
    width:49.5%;
    padding-left:0;
    float:right;
    /*margin-left:auto;*/
}
.after-login .al-cont.btn-grp button{
    width:34%;
    height:28px;
    float:left;
    margin:0 1%;
    transition:0.3s;
    position:relative;
    white-space:nowrap;
    color:#ffb23f;
    font-size:11px;
    border-radius: 18px;
    background-color: #1a1919;
    border: solid 1px #2c2b2b;
    z-index:1;
}
.after-login .al-cont.btn-grp button:hover{
    background-color:#ffb23f;
    color:#000;
}
.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.red{
    color:#ed3d3d;
}
.after-login .al-cont.btn-grp button.gray{
    color:#ccc;
}
.after-login .al-cont.btn-grp button.red:hover{
    background-color:#ed3d3d;
    color:#fde2e2;
}
.after-login .al-cont.btn-grp button.gray:hover{
    background-color:#ccc;
    color:#000;
}
.mess-count{
    width:17px;
    height:17px;
    color:#000;
    font-size:8px;
    background-color:#fff;
    border-radius:50%;
    position:absolute;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    top:-2px;
    right:-1px;
    z-index:1;
    animation:letter_anim 1s linear infinite;
}
@keyframes letter_anim{
    0% {opacity:0}
    35% {opacity:1}
    65% {opacity:1}
    100% {opacity:0}
}

/* -- BANNER SECTION -- */

.banner-section{
    height:531px;
    margin-top:-66px;
    position:relative;
}
.banner-section:before{
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/bg/banner-bg.png);
    background-position:top center;
    background-repeat:repeat-x;
    position:absolute;
    left:0;
    top:0;
    animation:bannerBgAnim 2.5s linear infinite;
}
@keyframes bannerBgAnim{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.banner-section .container{
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    flex-direction: column;
}
.banner-section .container:before,
.banner-section .container:after{
    content:'';
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background-repeat:no-repeat;
    pointer-events:none;
}
.banner-section .container:before{
    width:1512px;
    background-image:url(../img/characters/thief.png);
    background-position:top 10px left;
    animation:thiefAnim 10s ease infinite;
}
@keyframes thiefAnim{
    0%{opacity:0;transform:translateX(-20%) rotate(0deg);}
    10%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    20%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    25%{opacity:1;transform:translateX(-50%) rotate(1deg);}
    30%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    40%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    45%{opacity:1;transform:translateX(-50%) rotate(1deg);}
    50%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    60%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    65%{opacity:1;transform:translateX(-50%) rotate(1deg);}
    70%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    80%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    85%{opacity:1;transform:translateX(-50%) rotate(1deg);}
    90%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    98%{opacity:1;transform:translateX(-50%) rotate(0deg);}
    100%{opacity:0;transform:translateX(-50%) rotate(0deg);}
}
.banner-section .container:after{
    width:1842px;
    background-image:url(../img/characters/witch.png);
    background-position:top 5px right;
}
.banner-container{
    width:100%;
    max-width:1230px;
    min-height:150px;
    margin:0 auto;
    position:relative;
    border:solid 3px rgba(255,255,255,0.06);
    box-sizing:border-box;
    background-clip: content-box;
    box-shadow:0 6px 2px rgba(0,0,0,0.9);
    border-radius:75px;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    background-color:rgba(0,0,0,0.4);
}
.banner-container:before{
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/bg/pattern.jpg);
    box-shadow:inset 0 1px 16px rgba(0,0,0,1);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border-radius:75px;
    opacity:0.2;
    pointer-events:none;
}
.banner-container:after{
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/characters/banner-glow.png);
    background-repeat:no-repeat;
    background-position:top left;
    position:absolute;
    left:10px;
    top:4px;
    margin:auto;
    pointer-events:none;
}

/* -- BANNER CAROUSEL -- */

.banner-carousel{
    max-width:calc(55% - 50px);
    padding:13px 0 0;
    z-index:2;
    margin:0 0 0 50px;
}
.banner-carousel .carousel-indicators{
    top:0;
    bottom:auto;
    margin:0 0;
    justify-content:flex-start;
}
.banner-carousel .carousel-indicators li{
    width:13px;
    height:13px;
    background-color:#ffffff;
    border-radius:50%;
    margin:0 3px;
}
.banner-carousel .carousel-indicators .active {
    background-color:#c83b3b;
}
.banner-carousel h1{
    color:#ffa00c;
    font-size:45px;
    font-family:SCDream8;
    margin:0;
    max-width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:0 3px 2px rgba(0,0,0,0.72),
                0 1px 0 rgba(0,0,0,1),
                0 -1px 0 rgba(0,0,0,1),
                1px 0 0 rgba(0,0,0,1),
                -1px 0 0 rgba(0,0,0,1);
}
.banner-carousel h2{
    color:#6ce822;
    font-family:SCDream6;
    margin:0;
    max-width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:0 3px 2px rgba(0,0,0,0.72),
                0 1px 0 rgba(0,0,0,1),
                0 -1px 0 rgba(0,0,0,1),
                1px 0 0 rgba(0,0,0,1),
                -1px 0 0 rgba(0,0,0,1);
}

/* -- JACKPOT CONTAINER -- */

.jackpot-container{
    position:relative;
    text-align:center;
    margin:10px 50px 0 0;
    max-width:calc(45% - 50px);
}
.jackpot-container:before{
    content:'';
    width:432px;
    height:190px;
    position:absolute;
    left:50%;
    top:-55%;
    transform:translateX(-50%);
    background-image:url(../img/characters/jackpot-glow.png);
    animation:jackpotGlowAnim 1s linear infinite;
}
@keyframes jackpotGlowAnim{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.jackpot-container .labels{
    display:inline-block;
    position:relative;
}
.jackpot-container .labels .mega-img{
    position:absolute;
    left:25px;
    top:-36px;
    animation:megaImgAnim 1s linear infinite;
}
@keyframes megaImgAnim{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}
.jackpot-container .amount{
    margin:-4% 0 0;
}

.jackpot-container .amount span {
    color: #ffffff;
    font-size: 55px;
    font-family: SCDream8;
    background: -webkit-linear-gradient(#d5d5d5 25%, #eaeaea 50%, #fff 75%, #cecece 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.jackpot-container .amount span:before{
    content:attr(data-text);
    left:0;
    top:0;
    position: absolute;
    text-shadow:0 2px 2px rgba(0,0,0,1);
    z-index:-1;
}

/* -- PAGE CONTENT -- */

.page-content{
    background-image:url(../img/bg/main-bg.png);
    background-position:top 30px center;
    background-repeat:no-repeat;
    margin:-105px 0 0;
}
.slot-section{
    padding:0 15px;
}
.slot-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
}
.slot-btn{
    width:200px;
    display:inline-block;
    position:relative;
    margin:11px;
    text-decoration:none;
}
.slot-btn:hover{
    text-decoration:none;
}
.slot-btn .inner-cont{
    width:100%;
    padding:20px;
    position:relative;
    border:solid 1px #fff;
    border-top-color:#cfcfcf;
    border-radius:50%;
    background-image:linear-gradient(#989ca0,#dde4e6,#ffffff,#9aa4aa,#cccccc,#ffffff,#b6b8bd,#ffffff,#cccccc,#9ba0aa,#cccccc);
}
.slot-btn .inner-cont:before,
.slot-btn .inner-cont:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border-radius:50%;
    transition:1s;
}
.slot-btn .inner-cont:before{
    width:calc(100% - 16px);
    height:calc(100% - 16px);
    border:solid 1px #ffffff;
    background-image:linear-gradient(#7cddfa,#175f8d);
}
.slot-btn .inner-cont:after{
    width:calc(100% - 32px);
    height:calc(100% - 32px);
    background-image:linear-gradient(#00355d,#00b6fa);
}
.slot-btn:hover .inner-cont:before{
    transform:rotate(360deg);
}
.slot-btn:hover .inner-cont:after{
    transform:rotate(-360deg);
}
.slot-btn .main-cont{
    width:100%;
    position:relative;
    border-radius:50%;
    overflow:hidden;
    background-color:#000;
    z-index:1;
}
.slot-btn .main-cont:before{
    content:'';
    width:120%;
    height:100%;
    position:absolute;
    left:-140%;
    top:0;
    transform:skew(-25deg);
    background-image:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.1));
    transition:0.5s;
}
.slot-btn:hover .main-cont:before{
    left:-10%;
}
.slot-btn .main-cont:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    border-radius:50%;
    box-shadow:inset 0 1px 13px #110f0f;
}
.slot-btn .main-cont .main-img{
    width:100%;
    transition:0.3s;
}
.slot-btn:hover .main-cont .main-img{
    opacity:0.25;
}
.slot-btn .main-cont .hover{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.slot-btn .main-cont .hover .play-btn{
    width:80px;
    height:30px;
    border-radius:4px;
    background-color: #00b5f8;
    border: solid 1px #0c5979;
    border-top-color:#7cddfa;
    border-left-color: #00789c;
    border-right-color: #00789c;
    color: #fff;
    box-shadow: inset 0 0 0 1px #003050;
    text-shadow:0 1px 0 #000;
    background-image:linear-gradient(#00b5f8,#00355d);
    display:block;
    margin:0 auto 5px;
    opacity:0;
    transition:0.3s;
    transform:translateY(50%);
}
.slot-btn .main-cont .hover img{
    transition:0.3s;
    transform:translateY(-50%);
    opacity:0;
}
.slot-btn:hover .main-cont .play-btn{
    transition-delay:0.2s;
    transform:translateY(0);
    opacity:1;
}
.slot-btn:hover .main-cont .hover img{
    transition-delay:0.2s;
    transform:translateY(0);
    opacity:1;
}
.slot-btn .logo-cont{
    width:100%;
    height:40px;
    background-color:rgba(0,0,0,0.7);
    position:absolute;
    bottom:0;
    left:0;
    opacity:1;
    transition:0.3s;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 0 8px;
}
.slot-btn:hover .logo-cont{
    bottom:-100%;
    opacity:1;
}
.slot-btn .name{
    color:#cccccc;
    font-size:12px;
    margin:10px 0 0;
    transition:0.3s;
}
.slot-btn:hover .name{
    color:#ffa00c;
}

/* -- FOOTER MAIN -- */

.footer-main{
    position:relative;
}
.footer-main:before,
.footer-main:after{
    content:'';
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    position:absolute;
    left:50%;
    bottom:34px;
    transition:1s ease;
    transform:translateX(-50%);
    opacity:0;
    pointer-events:none;
}
.footer-main:before{
    width:1630px;
    height:269px;
    background-image:url(../img/characters/slot-characters.png);
    background-position:left bottom;
    transform:translateX(-40%);
}
.footer-main:after{
    width:1592px;
    height:397px;
    background-image:url(../img/characters/rich-man.png);
    background-position:right bottom;
    bottom:0;
    transform-origin:top center;
    transform:translateX(-60%);
}
.footer-anim:before,
.footer-anim:after{
    opacity:1;
    transform:translateX(-50%);
}
.footer-main .company-logo{
    width:100%;
    max-width:1473px;
    min-height:143px;
    margin:70px auto 0;
    padding:11px 0;
    position:relative;
    z-index:1;
}
.footer-main .company-logo:before,
.footer-main .company-logo:after{
    content:'';
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.footer-main .company-logo:before{
    left:30px;
    background-image:url(../img/bg/footer-glow.png);
    background-repeat:no-repeat;
    background-position:bottom right;
    animation:footerGlowAnim 1s ease infinite;
}
@keyframes footerGlowAnim{
    0%{opacity:1;}
    50%{opacity:0.4;}
    100%{opacity:1;}
}
.footer-main .company-logo:after{
    background-image:url(../img/bg/footer-bg.png);
    background-repeat:no-repeat;
    background-position:top center;
}
.footer-main .company-logo .center{
    width:100%;
    max-width:960px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.footer-main .company-logo img{
    max-width:72px;
    margin:6px 5px;
    display:inline-block;
    vertical-align:middle;
}
.copyright-container{
    min-height:34px;
    background-color:#2e2e2e;
    position:relative;
    z-index:1;
}
.copyright-container:before{
    content:'';
    width:100%;
    height:36px;
    position:absolute;
    left:0;
    right:0;
    top:-36px;
    margin:0 auto;
    background-image:url(../img/bg/copyright-bg.png);
    background-repeat:no-repeat;
    background-position:center;
}
.copyright-container span{
    color:#6d6d6d;
    font-size:10px;
}

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

.modal-backdrop.show {
    opacity:0.75;
}
.modal{
    padding-right:0 !important;
    overflow-y:auto;
}
.modal::-webkit-scrollbar {
    width:0;
    background-color:transparent;
}
.modal::-webkit-scrollbar-thumb{
    background-color:transparent;
}
.modal-dialog{
    width:98%;
    max-width:700px;
    margin:20px auto;
}
.loginModal .modal-dialog{
    max-width:600px;
}
.joinModal .modal-dialog{
    max-width:600px;
}
.mypageModal .modal-dialog{
    max-width:800px;
}
.historyModal .modal-dialog{
    max-width:800px;
}
.gameListModal .modal-dialog{
    max-width:1060px;
}
.modal-content{
    border:none;
    background-color:transparent;
}
.mypageModal .modal-body{
    min-height:600px;
}
.historyModal .modal-body{
    min-height:600px;
}

.modal-content{
    border-radius:15px;
    border:solid 1px #313131;
    border-top-color:#313131;
    background-color:#151515;
    z-index:1;
    box-shadow:0 5px 15px #000;
}

/* -- Modal Header -- */

.modal-header{
    width:100%;
    height:60px;
    float:right;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#98cc44;
    background:linear-gradient(to bottom, rgba(209,209,209,1) 0%,rgba(183,183,183,1) 100%);
    border-top:solid 1px #fff;
    padding: 0 20px 21px;
    border-radius:15px 15px 0 0;
}
.modal-header:before,
.modal-header:after{
    content:'';
    width:5px;
    height:30px;
    background-color:rgba(183,183,183,1);
    position:absolute;
    bottom:-30px;
    z-index:2;
}
.modal-header:before{
    left:0;
    border-radius:0 0 25px 0;
}
.modal-header:after{
    border-radius:0 0 0 25px;
    right:0;
}
.modal-header .title{
    color:#000;
    font-size:18px;
    font-family:SCDream6;
    margin-right:auto;
}
.modal-header .title i{
    margin-right:5px;
}
.modal-header .close-btn{
    width:135px;
    height:33px;
    background-color:transparent;
    border:none;
    background-image:url(../img/bg/close-modal.png);
    background-size:cover;
    position:absolute;
    right:15px;
    top:-10px;
    color:#fff;
    font-size:14px;
    transition:0.3s;
    outline:none;
}
.modal-header .close-btn:hover{
    color:#ffe31d;
}

/* -- Modal Body -- */

.modal-body{
    width:calc(100% - 10px);
    margin:0 auto 0;
    border-radius:15px;
    margin: -15px auto 5px;
    position:relative;
    background-color:#1d1d1e;
}
.modal-body:before {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    top: -7px;
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0));
    border-top: solid 1px rgba(255,255,255,0.3);
}

/* Modal Menu */

.modal-menu{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 15px;
    position:relative;
    background-image:url(../img/bg/dot.jpg);
    border-radius:20px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,0.15),
                0 1px 2px rgba(0,0,0,0.5);
}
.modal-menu .mm-btn{
    width:50%;
    height:48px;
    border:none;
    background-color:transparent;
    position:relative;
    z-index:1;
    color:#fff;
    font-size:14px;
    transition:0.3s;
}
.modal-menu .mm-btn.active{
    color:#ffb23f;
}
.modal-menu .mm-btn:hover{
    color:#ffb23f;
}
.modal-menu .mm-btn:before{
    content:'';
    width:100%;
    height:48px;
    position:absolute;
    left:0;
    top:0;
    border-left:solid 1px #43464c;
    border-right:solid 1px #131415;
    transform:skew(-25deg);
}
.modal-menu .mm-btn:after{
    content:'';
    width:33px;
    height:16px;
    position:absolute;
    left:0;
    right:0;
    top:-6px;
    margin:0 auto;
    background-image:url(../img/bg/hover-bg.png);
    opacity:0;
    transition:0.3s;
}
.modal-menu .mm-btn.active:after{
    opacity:1;
}
.modal-menu .mm-btn:first-child:before{
    border-left:none;
}
.modal-menu .mm-btn:last-child:before{
    border-right:none;
}

/* Deposit Ask */

.deposit-ask{
    width:100%;
    min-height:60px;
    position:relative;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background-color:rgba(62, 62, 62, 0.75);
    box-shadow:inset 0 2px 2px rgba(0,0,0,0.25),
                0 1px 2px rgba(0,0,0,0.25);
    border:solid 1px #404040;
    border-radius:5px;
}
.deposit-ask button{
    width:140px;
    height:35px;
    border-radius:2px;
    border:none;
    background-color:#067c9e;
    color:#fff;
    font-size:12px;
    font-family:SCDream5;
    box-shadow:inset 1px 1px 1px rgba(255,255,255,.15),
                0 1px 2px rgba(0,0,0,0.25);
    float:left;
    transition:0.3s;
}
.deposit-ask button:hover{
    color:#000;
    background-color:#54d8ff;
}
.deposit-ask span{
    color:#fff;
    font-size:12px;
    float:left;
    margin-left:10px;
}

/* Form Container */

.form-container{
    width:90%;
    margin:20px 5%;
    float:left;
}
.form-container .form-group{
    width:100%;
    float:left;
}
.form-container .labels{
    width:105px;
    height:42px;
    float:left;
    text-align:left;
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.form-container .labels i{
    color:#848484;
    margin-right:8px;
}
.form-container .labels span{
    color:#fff;
    margin:0;
    display:inline-block;
}
.form-container .infos{
    width:100%;
    float:left;
    padding-left:105px;
}
.form-container .form-group input{
    width:100%;
    height: 42px;
    float: left;
    padding:0 9px;
    background-color: #0a0a0a;
    border-radius: 3px;
    border: solid 1px #2d2d2d;
    color: #fff;
    font-size: 12px;
}
.form-container .form-group input::-webkit-input-placeholder{
    color:#ccc;
}
.form-container .w-btn input{
    width:calc(100% - 85px);
}
.form-container .form-group select {
    width:100%;
    height: 42px;
    background-color: #0a0a0a;
    border-radius: 3px;
    border: solid 1px #2d2d2d;
    padding: 0 9px;
    color: #fff;
    font-size: 12px;
}
.form-container .form-group textarea {
    width:100%;
    height: 200px;
    float: left;
    padding:10px;
    background-color: #0a0a0a;
    border-radius: 3px;
    border: solid 1px #2d2d2d;
    color: #fff;
    font-size: 12px;;
    resize:none;
}
.form-container .form-group textarea::-webkit-input-placeholder{
    color:#ccc;
}
.form-container .form-group.w-btn button{
    width:80px;
    height: 40px;
    border: none;
    float:right;
    padding: 0;
    white-space: nowrap;
    border-radius:3px;
    background-color: #ffae28;
    color: #000;
    position:relative;
    transition: 0.3s;
    top:1px;
}
.form-container .form-group.w-btn button:hover{
    background-color:#ec7535;
}

/* Form Btn Group */

.form-container .form-group .infos .btn-grp {
    width:100%;
    float:left;
}
.form-container .form-group .infos .btn-grp button {
    width:16.66%;
    width:calc(16.66% - 4px);
    height:30px;
    float: left;
    margin: 0 2px;
    background-color:#b5b5b5;
    border:none;
    color: #000;
    font-size: 12px;
    transition: 0.3s;
    padding: 0;
    border-radius:2px;
}
.form-container .form-group .infos .btn-grp button:hover {
    background-color:#ffffff;
}
.form-container .form-group .infos .btn-grp button:first-child {
    margin-left:0;
    width:calc(16.66% - 2px);
}
.form-container .form-group .infos .btn-grp button:last-child {
    width:calc(16.66% - 2px);
    margin-right:0;
    background-color:#ca4347;
    color:#fff;
}
.form-container .form-group .infos .btn-grp button:last-child:hover {
    background-color:#ff4242;
    color:#fff;
}

/* -- MODAL FOOTER -- */

.modal-footer{
    border:none;
    justify-content:center;
    padding:15px 0;
    width:100%;
}
.modal-footer .btn-grp{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.modal-footer .btn-grp button{
    width:160px;
    height:44px;
    border-radius:20px;
    margin:0 4px;
    color:#000;
    font-size:14px;
    font-family:SCDream6;
    position:relative;
    z-index:1;
    background-color:#ffb23f;
    border:solid 1px rgba(255,255,255,0.4);
    box-shadow:0 1px 2px rgba(0,0,0,0.5);
    transition:0.3s;
    overflow:hidden;
}
.modal-footer .btn-grp button:hover{
    color:#0b1d00;
    background-color:#6ce822;
}
.modal-footer .btn-grp .gray{
    color:#fff;
    font-family:SCDream4;
    background-color:#4a4a4a;
    border-color:rgba(255,255,255,0.15);
}
.modal-footer .btn-grp .gray:hover{
    color:#000;
    background-color:#ccc;
    border-color:rgba(255,255,255,1);
}
.modal-footer .btn-grp .peach{
    background-color:#ff883a;
}
.modal-footer .btn-grp .peach:hover{
    background-color:#f5d341;
}
.modal-footer .btn-grp.one-btn button{
    width:100%;
    max-width:200px;
}

/* -- BS Table -- */

.bs-table{
    width:100%;
    float:left;
}
.bs-table thead{
    background-color:rgba(255,255,255,0.15);
}
.bs-table thead th{
    height:40px;
    color:#fff;
    text-align:center;
}
.bs-table thead th:first-child{
    border-radius:5px 0 0 5px;
}
.bs-table thead th:last-child{
    border-radius:0 5px 5px 0;
}
.bs-table thead.one-child th:first-child{
    border-radius:5px;
}
.bs-table thead.one-child th:last-child{
    border-radius:5px;
}
.bs-table tr td{
    height:40px;
    color:#fff;
    font-size:12px;
    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(0,0,0,0.25);
}
.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: #fff960;
}
.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;
    display:inline-block;
    vertical-align:middle;
    max-width:90%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.bs-table tr td a:hover{
    color:#ffb23f;
}
.new-icon{
    width:30px;
    height:15px;
    border-radius:2px;
    border:none;
    color:#000;
    font-size:8px;
    background-color:#6ce822;
    display:inline-block;
    vertical-align:middle;
    padding:2px 0 0 0;
    margin-left:5px;
    position:relative;
    top:-1px;
}

/* Notice */

.board-view {
    width: 100%;
    height: 300px;
    float: left;
    background-color:rgba(0,0,0,0.5);
    margin:0 0 20px;
    padding: 10px;
    border-radius:0 0 5px 5px;
}
.board-view .inner-cont {
    width: 100%;
    height: 100%;
    float: left;
    color: #fff;
    font-size:12px;
    font-family:SCDream4;
    white-space:pre-wrap;
    text-align: left;
    overflow-y: scroll;
    padding:5px 10px;
}
.board-view .inner-cont::-webkit-scrollbar {
    width:8px;
    background:#3f3f40;
}
.board-view .inner-cont::-webkit-scrollbar-thumb{
    background: #191919;
    border:solid 1px #3f3f40;
}

/* Pagination */

.pagination{
    margin:20px 0 0;
}
.pagination li{
    float:left;
}
.pagination>li>a{
    width:24px;
    height:24px;
    color:#000;
    font-size:12px;
    font-family:SCDream4;
    text-decoration:none;
    background-color:#c9c9c9;
    border:solid 1px #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 2px;
    border-radius:2px;
    transition:0.3s;
}
.pagination .turn-pg a{
    color:#000;
    font-size:12px;
    margin:0 10px;
}
.pagination>li>a:hover{
    background-color: #484848;
    border:solid 1px #7b7b7b;
    color:#fff;
}
.pagination .active{
    background-color:#ffb23f;
    border:solid 1px #fbea82;
}
.pagination .active:hover{
    color:#000;
    background-color:#ffb23f;
}

/* Modal Menu */

.modal-nav{
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:0 0 15px;
    background-color:#35383f;
    box-shadow:0 1px 2px rgba(0,0,0,0.5);
    border-radius:10px;
    overflow:hidden;
    z-index:1;
}
.modal-nav:before{
    content:'';
    width:100%;
    height:50%;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#2e3138;
    z-index:-1;
}
.modal-nav button{
    width:110px;
    height:35px;
    color:#fff;
    font-family:SCDream5;
    background-color:transparent;
    border:none;
    border-left: solid 1px #40444c;
    border-right: solid 1px #2a2d33;
    transition:0.3s;
    padding:0;
    position:relative;
    z-index:1;
}
.modal-nav button:first-child{
    margin-left:0;
    border-left:none;
}
.modal-nav button:last-child{
    margin-right:0;
    border-right:none;
}
.gameListModal .modal-nav button:last-child{
    display:none;
}
.my-page-nav button{
    width:16.66%;
    font-size:12px;
}
.modal-nav button:hover{
    color:#8ca2d6;
}
.modal-nav button.active{
    color:#00b6fa;
}
.modal-nav button.active:hover{
    color:#00b6fa;
}
.modal-nav button i{
    color:#00b6fa;
    margin-right:-11px;
    opacity:0;
    transition:0.3s;
    animation:modalNavActiveAnim 1s ease infinite;
}
@keyframes modalNavActiveAnim{
    0%{transform:translateX(0);}
    50%{transform:translateX(-2px);}
    100%{transform:translateX(0);}
}
.modal-nav button.active i{
    margin-right:2px;
    opacity:1;
}

/* Gamelist Modal */

.game-list-container{
    width:100%;
    margin:0 0 15px;
    padding:5px 5px;
    position:relative;
}
.game-list-container:before{
    content:'';
    width:100%;
    height:20%;
    position:absolute;
    left:0;
    bottom:0;
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
    z-index:1;
    pointer-events:none;
    border-radius:0 0 5px 5px;
}
.game-list-container .scroll-container{
    width:100%;
    height:580px;
    overflow-y:scroll;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
    position:relative;
}
.game-list-container .scroll-container::-webkit-scrollbar {
    width:8px;
    background:#3f3f40;
}
.game-list-container .scroll-container::-webkit-scrollbar-thumb{
    background: #191919;
    border:solid 1px #3f3f40;
}
.game-btn{
    width:calc(16.66% - 16px);
    display:inline-block;
    float:left;
    margin:8px 8px;
    text-decoration:none;
    position:relative;
    transition:0.3s;
}
.game-btn:before{
    content:'';
    width:100%;
    height:40px;
    position:absolute;
    left:0;
    bottom:-40px;
    background-image:url(../img/bg/game-shadow.png);
    background-size:100% 100%;
}
.game-btn .main-cont{
    width:100%;
    position:relative;
    background-color:#000;
    border:solid 1px rgba(255,178,63,0);
    border-radius:5px;
    overflow:hidden;
    transition:0.3s;
}
.game-btn:hover .main-cont{
    border:solid 1px rgba(255,178,63,1);
}
.game-btn .main-cont .main-img{
    width:100%;
    height:100%;
    transition:0.3s;
}
.game-btn:hover .main-cont .main-img{
    opacity:0.3;
}
.game-btn .name-cont{
    width:100%;
    height:35px;
    float:left;
    position:absolute;
    transform:translateY(0);
    border-top:solid 1px rgba(170,170,170,0.5);
    background-color:rgba(68,68,68,0.5);
    bottom:0;
    left:0;
    z-index:2;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.game-btn .play-btn{
    width:45px;
    height:45px;
    border-radius:50%;
    border:solid 1px #5f5e5e;
    background-color:#35383f;
    color:#fbb44b;
    font-size:20px;
    text-shadow:0 2px 0 rgba(0,0,0,0.75);
    box-shadow:0 2px 5px rgba(0,0,0,1);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:25px;
    margin:auto;
    padding:0 0 0 4px;
    z-index:1;
    opacity:0;
    transform:translateY(-50%);
    transition:0.3s;
}
.game-btn .play-btn:before,
.game-btn .play-btn:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border-radius:50%;
    z-index:-1;
}
.game-btn .play-btn:before{
    width:calc(100% - 2px);
    height:calc(100% - 2px);
    background-color:#2e3138;
}
.game-btn .play-btn:after{
    width:calc(100% - 6px);
    height:calc(100% - 6px);
    background-image:linear-gradient(#575d6b,#2e3138);
}
.game-btn:hover .play-btn{
    opacity:1;
    transform:translateY(0);
}
.loading-bar{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    background-color:#0e0e0e;
}
.loading-bar img{
    width:100%;
}

/* Mypage Tabs */

.my-page-tabs{
    width:100%;
    float:left;
}
.my-page-tabs .mp-tab{
    width:100%;
    float:left;
    animation:modalTabAnim 0.5s ease 1;
    display:none;
}
@keyframes modalTabAnim{
    0%{opacity:0;transform:rotateY(-50deg);}
    100%{opacity:1;transform:rotateY(0deg);}
}
.my-page-tabs .mp-tab.active{
    display:block
}
.my-page-tabs .form-container .labels{
    width:125px;
}
.my-page-tabs .form-container .infos{
    padding-left:125px;
}
.level-information{
    width:100%;
    height:80px;
    float:left;
    position:relative;
    border-radius:5px;
    margin-bottom:10px;
    background-color:rgba(62, 62, 62, 0.5);
}
.level-information .container{ 
    width:auto; 
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    padding:0 20px;
}
.level-information .container .inner{ 
    width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.level-information .container span{ 
    color:#fff;
    font-size:14px;
    white-space:nowrap;
}
.level-information .container .labels{ 
    margin-right:10px;
}
.level-information .container .amount{
    color: #e9ce36;
    font-size:18px;
    display:inline-block;
    position:relative;
    margin:0;
    vertical-align:middle;
}
.level-information .point-form{
    width:310px;
    height:100%;
    float:right;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 125px 0 5px;
    position:relative;
}
.level-information .point-form input{
    width:100%;
    height:37px;
    border-radius:1px;
    padding:0 5px;
    color:#fff;
    font-size:12px;
    background-color: #353535;
    border: solid 1px #505050;
    border-radius:3px;
}
.level-information .point-form input::-webkit-input-placeholder{
    color:#ccc;
}
.level-information .points-btn{
    width:110px;
    height:35px;
    color:#fff;
    font-size:12px;
    border:none;
    border-radius:1px;
    background-color:#c13131;
    transition:0.3s;
    white-space:nowrap;
    position:absolute;
    right:10px;
    border-radius:3px;
}
.level-information .points-btn:hover{ 
    background-color:#eaaa27;
    color:#000;
}

/* With Depth */

.bs-table tr.depth-click{
    cursor:pointer;
}
.bs-table tr.depth-click .about{
    text-align:left;
    padding:0 0 0 10px;
}
.bs-table tr.dropdown td{
    height:auto;
    border:none;
    padding:0;
}
.bs-table tr.dropdown .mess-cont{
    width:100%;
    float:left;
    display:none;
    background-color: rgba(0,0,0,0.5);
    border:solid 1px rgba(255,255,255,0.05);
    border-top:none;
    text-align:left;
    padding:10px;
    color:#fff;
    font-size:12px;
    position:relative;
    border-radius: 3px;
}
.bs-table tr.dropdown .mess-cont *{
    font-family:SCDream4;
}
.bs-table tr.dropdown .mess-cont .scroll{
    width:100%;
    height:150px;
    float:left;
    overflow-y:scroll;
    color:#fff;
    font-size:12px;
    white-space:pre-wrap;
}
.bs-table tr.dropdown .mess-cont .scroll::-webkit-scrollbar {
    width:8px;
    background:#3f3f40;
}
.bs-table tr.dropdown .mess-cont .scroll::-webkit-scrollbar-thumb{
    background: #191919;
    border:solid 1px #3f3f40;
}
.bs-table tr.dropdown .mess-cont .title{
    color:yellow;
    font-size:18px;
    margin-bottom:10px;
}
.bs-table .nav-td{
    width:40px;
}
.bs-table .nav-td button {
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0);
    border: solid 1px #3c3c3c;
    border-radius: 50%;
    transition: 0.3s;
    color: #ffb23f;
    font-size: 12px;
    padding:0 0 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.bs-table .nav-td .open-btn span{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
}
.bs-table .nav-td .open-btn span:before,
.bs-table .nav-td .open-btn span:after{
    content:'';
    width:1px;
    height:50%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    position:absolute;
    background-color:#ffb23f;
    transition:0.3s;
}
.bs-table .nav-td .open-btn span:after{
    transform:rotate(90deg);
}
.bs-table .nav-td .open-btn.active span:before,
.bs-table .nav-td .open-btn.active span:after{
    background-color:#ea5d5d;
}
.bs-table .nav-td .open-btn.active span:before{
    transform:rotate(45deg);
}
.bs-table .nav-td .open-btn.active span:after{
    transform:rotate(135deg);
}
.bs-table .nav-td button:hover{
    background-color:rgba(0,0,0,0.5);
}

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

.sn-overlay{
    width:100%;
    height:100%;
    position:fixed;
    z-index:96;
    background-color:rgba(0,0,0,0.75);
    top:0;
    left:0;
    pointer-events:none;
    opacity:0;
    transition:0.3s;
}
.sn-overlay.active{
    opacity:1;
    pointer-events:auto;
}
.left-menu-btn{
    width:auto;
    height:35px;
    float:left;
    border:none;
    background-color:transparent;
    display:none;
    z-index:2;
    position:relative;
}
.left-menu-btn span {
    display: block;
    width:30px;
    height:2px;
    background:#ffb23f;
    margin:0 auto 6px;
}
.left-menu-btn span:first-child {
    position: relative;
    margin-top:0;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.left-menu-btn span:nth-child(2) {
    opacity: 1;
    transition: opacity .3s;
}
.left-menu-btn span:last-child {
    margin-bottom: 0;
    position: relative;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.left-menu-btn.opened span:first-child {
    top: 8px;
    transform: rotate(-45deg);
    transition: top .3s 0s,transform .3s .3s,color .3s .3s;
}
.left-menu-btn.opened span:nth-child(2) {
    opacity: 0;
}
.left-menu-btn.opened span:last-child {
    top: -8px;
    transform: rotate(45deg);
    transition: top .3s 0s,transform .3s .3s;
}
.right-menu-btn{
    width: 36px;
    height: 36px;
    background-color:transparent;
    border: none;
    box-shadow: none;
    float: left;
    margin-left: 5px;
    padding: 0;
    text-align: center;
    position: absolute;
    right:15px;
    bottom:-43px;
    z-index: 1;
    color: #6ce822;
    font-size: 26px;
    display:none;
}
.right-menu-btn .norm-icon{
    opacity:1;
    transform:scale(1);
    transition:0.3s;
}
.right-menu-btn.opened .norm-icon{
    opacity:0;
    transform:scale(0);
}
.right-menu-btn .over-icon{
    transition:0.3s;
    opacity:0;
    position:absolute;
    left:0;
    right:0;
    top:9px;
    bottom:0;
    margin:auto;
    transform:scale(1.5);
}
.right-menu-btn.opened .over-icon{
    opacity:1;
    transform:scale(1);
}

@media (max-width:1360px){
    .header-main{
        height:90px;
        background-image:linear-gradient(to right,#101010,#101010,#4b4b4c,#101010,#101010);
        border-top:5px solid #20201f;
        border-bottom:5px solid #101010;
        box-shadow:inset 0 3px 0 #121213;
        overflow:visible;
        box-shadow:0 1px 0 rgba(255,255,255,0.1);
    }
    .header-main:before,
    .header-main:after{
        content:'';
        width:100%;
        height:1px;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        margin:auto 0;
        z-index:-1;
    }
    .header-main:before{
        background-image:linear-gradient(to right,#090808,#2b2a2a,#090808);
        top:-1px;
    }
    .header-main:after{
        background-image:linear-gradient(to right,#0b0b0b,#3b3b3b,#0b0b0b);
        top:1px;
    }
    .header-main .container{
        height:100%;
        margin-top:0;
    }
    .kk-logo{
        width:150px;
    }
}
@media (max-width:1100px){
    .banner-container {
        justify-content:center;
    }
    .banner-carousel{
        max-width:initial;
        margin:25px auto 50px;    
    }
    .jackpot-container{
        width:100%;
        margin: 10px auto;
        max-width:initial;
    }
    .jackpot-container .amount {
        margin:-1% 0 0;
    }
    .page-content{
        margin: -70px 0 0;
    }
    .footer-main .company-logo {
        border-top:solid 1px #373333;
        background-color:#0000;
        background-image:url(../img/bg/footer-bg-mob.png);
        background-repeat:no-repeat;
        background-position:top center;
        background-size:contain;
        padding:11px 0 60px;
    }
    .footer-main .company-logo:before,
    .footer-main .company-logo:after{
        display:none;
    }
    .footer-main:before, 
    .footer-main:after{
        display:none;
    }
}
@media (max-width:1080px){
    .header-main{
        height:50px;
        border-top:1px solid #313131;
        border-bottom:1px solid #101010;
        margin:35px 0 0;
    }
    .left-menu-btn{
        display:block;
    }
    .sidebar-left{
        width:280px;
        height:100%;
        top:86px;
        left:-100%;
        background-color:#101010;
        border-right: solid 1px rgb(50 50 51);
        padding-bottom:80px;
        margin:0;
        padding:0 0 100px;
        display:block;
        overflow-y:auto;
        position:fixed;
        transition:0.5s;
    }
    .sidebar-left.active{
        left:0;
    }
    .sidebar-left::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .sidebar-left::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .sidebar-left li{
        width:100%;
        display:block;
        padding:0;
    }
    .sidebar-left li a{
        width:100%;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        background-color:#35383f;
        border-top: solid 1px rgb(70 72 78);
        border-bottom: solid 1px rgb(35 37 41);
        padding:0 15px;
    }
    .kk-logo{
        width:80px;
        top:-2px;
    }
    .before-login button{
        margin-left:5px;
        text-shadow:none;
    }
    .bal-container{
        width:100%;
        height:35px;
        position:absolute;
        left:0;
        top:-36px;
        border-bottom:solid 1px #000;
    }
    .before-login{
        width:100%;
        height:100%;
        float:left;
    }
    .before-login button{
        width:50%;
        height:100%;
        margin-left:0;
        border-radius:0;
        border:none;
    }
    .before-login .join-btn{
        width:50%;
    }
    .after-login{
        width:100%;
        height:100%;
        float:left;
        margin:0;
    }
    .after-login .mobile{
        height:100%;
        display:block;
    }
    .after-login .sidebar-top{
        width:280px;
        height:100%;
        top:86px;
        right:-100%;
        background-color: #101010;
        border-bottom: solid 1px rgb(50 50 51);
        padding-bottom: 80px;
        margin: 0;
        padding: 0 0 100px;
        display: block;
        overflow-y: auto;
        position: fixed;
        transition: 0.5s;
    }
    .sidebar-top.active{
        right:0;
    }
    .sidebar-top::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .sidebar-top::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .after-login .al-row{
        margin:0;
        padding:0;
    }
    .after-login .al-cont {
        width:100%;
        height:40px;
        padding:0 10px 0 15px;
        background-color:#35383f;
        border-top: solid 1px rgb(70 72 78);
        border-bottom: solid 1px rgb(35 37 41);
    }
    .after-login .al-cont.user-name {
        width:100%;
    }
    .after-login .al-cont.prog-b {
        width:100%;
        padding: 0 10px 0 90px;
    }
    .after-login .al-cont.btn-grp {
        width:100%;
        margin-left:0;
        justify-content:center;
        padding:0 5px;
    }
    .after-login .al-cont .labels {
        width:75px;
    }
    .after-login .al-cont.prog-b .labels{
        width:75px;
        left:15px;
    }
    .after-login .al-cont .info{
        padding:0;
    }
    .right-menu-btn{
        display:block;
    }
    .game-list-container{
        padding: 5px 0;
    }
    .game-list-container:before{
        display:none;
    }
    .game-list-container .scroll-container {
        height: auto;
        overflow-y:visible;
    }
    .game-btn {
        width:calc(20% - 16px);
    }
}
@media (max-width:800px){
    .game-btn {
        width:calc(25% - 16px);
    }
}
@media (max-width:720px){
    .slot-btn {
        width:calc(33.33% - 22px);
    }
    .level-information .container{ 
        width:25%; 
    }
    .level-information .container:first-child{ 
        width:20%; 
    }
    .level-information .container span{
        font-size:12px;
    }
    .level-information .container .labels{ 
        margin-right:0;
    }
    .level-information .container .amount{
        font-size:14px;
    }
    .level-information .point-form{
        width:55%;
        padding:0 5px;
    }
    .level-information .point-form input{
        width:58%;
        /*margin-right:%;*/
    }
    .level-information .points-btn{
        width:40%;
        position:relative;
        right:0;
        font-size:8px;
    }
    .level-information .points-btn:hover{ 
        background-color:#86e8df;
    }
}
@media (max-width:600px){
    .banner-section {
        height:auto;
        margin:0;
        padding:20px 0;
        align-items:flex-start;
    }
    .banner-section {
        background-position: center;
        background-size: contain;
    }
    .banner-section .container:before,
    .banner-section .container:after{
        display:none;
    }
    .banner-container{
        border-radius:15px;
    }
    .banner-container:after{
        border-radius:10px;
        background-image: url(../img/characters/banner-glow.png);
        background-position:top left -50px;
        left:2px;
        top:2px;
    }
    .banner-carousel{
        margin: 25px auto 8%;
    }
    .banner-carousel h1{
        font-size:7.5vw;
    }
    .banner-carousel h2{
        font-size:5.4vw;
    }
    .jackpot-container:before {
        content: '';
        width:100%;
        height:100%;
        background-size:contain;
        background-repeat:no-repeat;
        background-position:top center;
        top:-25%;
    }
    .jackpot-container .labels{
        width:59.05%;
    }
    .jackpot-container .labels .mega-img{
        width:31.53%;
        top:-62%;
    }
    .jackpot-container .labels .text-img{
        width:100%
    }
    .jackpot-container .amount span{
        font-size:9.3vw;
    }
    .page-content{
        margin:0 0 0;
    }
    .my-page-tabs .form-container .labels {
        width:100%;
    }
    .form-container .labels {
        width:100%;
        height:auto;
        float: left;
        position:relative;
        margin:0 0 5px;
        padding:0 10px;
    }
    .my-page-tabs .form-container .infos {
        padding-left:0;
    }
    .form-container .infos{
        padding-left:0;
    }
    .modal-nav{
        flex-wrap:wrap;
    }
    .modal-nav button{
        width:33.33%;
    }
    .modal-nav button{
        border-bottom:solid 1px #40444c;
        border-top:solid 1px #2a2d33;
    }
    .gameListModal .modal-nav button:last-child{
        display:block;
    }
    .game-btn {
        width:calc(33.33% - 16px);
    }
}
@media (max-width:500px){
    .slot-btn {
        width:calc(50% - 22px);
    }
    .modal-body{
        padding:1rem 5px; 
    }
    .form-container {
        width:100%;
        margin: 20px 0;
        float: left;
    }
    .bs-table thead th {
        font-size:12px;
    }
    .bs-table tr td a {
        max-width:150px;
    }
    .bs-table tr td.date {
        width:auto;
        font-size:10px;
    }
    .new-icon{
        margin-left:0;
    }
    .game-btn {
        width:calc(50% - 16px);
    }
    .mypageModal .modal-body{
        min-height:500px;
    }
    .historyModal .modal-body{
        min-height:500px;
    }
    .bs-table tr.depth-click .about {
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}