@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:SCDream7;
    src:  url(../fonts/SCDream7.otf)
}
@font-face {
    font-family:SCDream8;
    src:  url(../fonts/SCDream8.otf)
}
@font-face {
    font-family:SCDream9;
    src:  url(../fonts/SCDream9.otf)
}
html{
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll !important;
}
html::-webkit-scrollbar {
    width:6px;
    background:#000000;
}
html::-webkit-scrollbar-thumb{
    background:#f0fb55;
    background-image:linear-gradient(#f0fb55,#99ff14);
    border-radius:6px;
}
body{
    height:100%;
    padding-right: 0 !important; 
    text-align:center;
    background-color:#000;
    color:#fff;
    font-size:13px;
    font-family:"SCDream4", Arial, sans-serif;
}
body.active{
    overflow:hidden;
}
button,a,input,select,textarea{
    outline:none !important;
}
button{
    padding:0;
}
.wrapper{
    width:100%;
    position:relative;
    overflow:hidden;
}
.bs-ul{
    list-style:none;
    margin-bottom:0;
    width:auto;
    display:table;
    padding-top:40px;
}
.bs-ul li{
    list-style:none;
    width:auto;
    height:auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position:relative;
}
.container{
    position:relative;
}
@media (min-width: 1200px){
    .container {
        max-width:1400px;
    }
}
@media (max-width: 1200px){
    .container {
        max-width:100%;
    }
}

.firefly-bg{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
    z-index:96;
}

/* Header Main */

.header-main{
    width:100%;
    height:90px;
    background-color:rgba(4,31,36,0.66);
    border-bottom:solid 1px #0a3138;
    box-shadow:0 0 16px rgba(8,10,6,1);
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    transition:0.3s;
}
.header-main.affix{
    background-color:rgba(4,31,36,1);
}
.header-main:before{
    content:'';
    width:100%;
    min-width:1780px;
    height:242px;
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    background-image:url(../images/deco-top.png);
    background-repeat:no-repeat;
    background-position:left top;
    pointer-events:none;
    transition:0.3s;
}
.header-main.affix:before{
    top:-60%;
}
.header-main .container{
    max-width:1486px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 146px 0 15px;
    z-index:1;
}

/* Diamond Logo */

.diamond-logo{
    width:222px;
    top:-7px;
    left:30px;
    position:absolute;
    display:inline-block;
    transition:0.3s;
    z-index:9;
}
.affix .diamond-logo{
    width:140px;
}
.diamond-logo img{
    position:absolute;
}
.diamond-logo .panel{
    width:100%;
    position:relative;
    animation:lgPanelAnim 12s ease infinite;
}
@keyframes lgPanelAnim{
    0%{opacity:0;transform:rotate(-90deg);}
    10%{opacity:1;transform:rotate(0deg);}
    95%{opacity:1;transform:rotate(0deg);}
    100%{opacity:0;transform:rotate(0deg);}
}
.diamond-logo .dias-lg{
    width:64.42%;
    left:0;
    right:2%;
    top:5%;
    margin:0 auto;
    animation:lgDiasLgAnim 12s ease infinite;
}
@keyframes lgDiasLgAnim{
    0%{opacity:0;transform:translateX(-25%);}
    5%{opacity:0;transform:translateX(-25%);}
    15%{opacity:1;transform:translateX(0);}
    95%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.diamond-logo .dias-sm{
    width:27.03%;
    position:absolute;
    left:15.5%;
    top:29%;
    animation:lgDiasSmAnim 12s ease infinite;
}
@keyframes lgDiasSmAnim{
    0%{opacity:0;transform:translateX(25%);}
    5%{opacity:0;transform:translateX(25%);}
    15%{opacity:1;transform:translateX(0);}
    95%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.diamond-logo .dias-sm .diamond-img{
    width:100%;
    position:relative;
}
.diamond-logo .dias-sm .glow{
    width:95%;
    left:-32%;
    top:-16%;
    animation:lgGlowAnim 0.8s ease infinite; 
}
@keyframes lgGlowAnim{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.diamond-logo .diamond{
    width:60.0%;
    left:18.1%;
    top:40%;
    animation:lgDiamondAnim 12s ease infinite;
}
@keyframes lgDiamondAnim{
    0%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(20%);*/
        transform:translateY(20%);
    }
    10%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(20%);*/
        transform:translateY(20%);
    }
    15%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    95%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    100%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
}
.diamond-logo .slot{
    width:51.36%;
    left:18%;
    right:0;
    margin:0 auto;
    bottom:1%;
    animation:lgSlotAnim 12s ease infinite;
}
@keyframes lgSlotAnim{
    0%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(-20%);*/
        transform:translateY(-20%);
    }
    10%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(-20%);*/
        transform:translateY(-20%);
    }
    15%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    95%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    100%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
}

/* Main Menu */

.main-menu li{
    padding:0 5px;
}
.main-menu li a{
    color:#ffffff;
    text-decoration:none;
    position:relative;
    padding:5px 10px;
    z-index:1;
    display:inline-block;
    transition:0.3s;
    font-size: 18px;

    /* font-size: 16px; */
}
.main-menu li a i{
    color:#7adc4f;
    margin-right:3px;
    transition:0.3s;
}
@media (min-width:1150px){
    .main-menu li a:hover{
        color:#063c02;
        font-family:SCDream6;
        transition-delay:0.1s;
    }
    .main-menu li a:before{
        content:'';
        width:29px;
        height:100%;
        border-radius:50%;
        border:solid 2px #14600e;
        background-color:#edf95c;
        background-image:linear-gradient(#edf95c,#99ff14,#5ea700);
        position:absolute;
        left:0;
        right:0;
        top:0;
        margin:0 auto;
        opacity:0;
        pointer-events:none;
        z-index:-1;
    }
    .main-menu li a:hover:before{
        animation:mainmenuLinkAnim 0.3s ease 1 forwards;
    }
    @keyframes mainmenuLinkAnim{
        0%{opacity:0;transform:translateY(-150%);width:29px;border-radius:50%;}
        50%{opacity:1;transform:translateY(0);width:29px;border-radius:50%;}
        100%{opacity:1;transform:translateY(0);width:100%;border-radius:16px;}
    }
    .main-menu li a:hover i{
        color:#063c02;
        transition-delay:0.1s;
    }
}

/* Before After Login */

.bal-container{
    
    position:absolute;
    right:200px;
}
.bal-container .mobile{
    display:none;
}
.before-login{
    display:none;
}
.before-login.active{
    display:block;
}
.before-login .panel{
    width:230px;
    height:46px;
    border-radius:23px;
    background-color:#020d0f;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:135px;
}
.before-login button{
    width:50%;
    background-color:transparent;
    border:none;
    color:#ffba00;
    font-family:SCDream6;
    border-right:solid 1px #032024;
    transition:0.3s;
}
.before-login button:hover{
    color:#7adc4f;
    text-shadow:0 0 10px rgba(237,255,230,0.5);
}
.before-login button:last-child{
    border-right:none;
}
.before-login button .mob-icon{
        display:none;
    }
.before-login button.orange-bg{
    color:#e16419;
}
.before-login button.orange-bg:hover{
    color:#7adc4f;
}

/* After Login */

.after-login{
    display:none;
}
.after-login.active{
    display:block;
}
.sidebar-right{
    width:480px;
    margin-right:10px;
}
.sidebar-right p{
    margin:0;
}
.sidebar-right .al-inner{
    top:-14px;

    width:100%;
    float:left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.sidebar-right .al-cont{
    min-width:calc(22% - 4px);
    height:30px;
    float:left;
    display:flex;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    margin:5px 5px;
    border:solid 1px #0a3138;
    background-color:rgba(0,0,0,0.25);
    border-radius:2px;
}
.sidebar-right .al-cont .labels{
    width:30px;
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    border-radius:5px;
    color:#7adc4f;
}
.sidebar-right .al-cont .labels a{
    color:#7adc4f;
    font-size:14px;
    text-decoration:none;
    transition:0.3s;
}
.sidebar-right .al-cont .labels a:hover{
    color:#fff156;
}
.sidebar-right .al-cont .labels i{
    font-size:12px;
}
.sidebar-right .al-cont .info{
    width:calc(100% - 30px);
    height:100%;
    float:left;
    position:relative;
    display:flex;
    align-items: center;
    justify-content:flex-start;
    padding:0 5px 0;
}
.sidebar-right .al-cont .info p{
    color:#fff;
    font-size:11px;
    white-space:nowrap;
    text-shadow:0 1px 1px #000;
}
.sidebar-right .al-cont .info .symbol{
    color:#63a3af;
}

/* Progressbar */

.progressbar{
    width:calc(100% - 33px);
    height:18px;
    overflow:hidden;
    position:relative;
}
.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,#135865,#135865 3px,transparent 0,transparent 6px);
    background-size:6px 20px;
    background-position:0 0;
    background-repeat:repeat-x;
}
.progressbar .percent{
    width:80%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:3;
    background-color:transparent;
    background-image:linear-gradient(90deg,#7adc4f,#7adc4f 3px,transparent 0,transparent 6px);
    background-size:6px 20px;
    background-position:0 0;
    background-repeat:repeat-x;
}
.sidebar-right .al-cont .info .percent-text{
    color:#a2f0ff;
    font-size:10px;
    display:inline-block;
    width:28px;
    text-align:center;
    position:relative;
    z-index:1;
    margin-left:auto;
}
.sidebar-right .al-cont .message-btn{
    background-color:transparent;
    border:none;
    color:#fff;
    font-size:12px;
    text-shadow:0 1px 1px #000;
}
.mess-count{
    color:#f7f426;
    font-size:10px;
    margin-left:8px;
    animation:letter_anim 1s linear infinite;
}
@keyframes letter_anim{
    0% {opacity:0.25}
    35% {opacity:1}
    65% {opacity:1}
    100% {opacity:0.25}
}
.sidebar-right .btn-group{
    border:none;
    background-color:transparent;
}
.sidebar-right .btn-group button{
    width:calc(50% - 2px);
    height:100%;
    background-color:#1798af;
    border:solid 1px #0a3138;
    border-radius:2px;
    color:#fff;
    font-size:12px;
    margin:0 2px;
    transition:0.3s;
    overflow:hidden;
    position:relative;
    z-index:1;
}
.sidebar-right .btn-group button:hover{
    background-color:#00d8de;
}
.sidebar-right .btn-group .logout-btn{
    background-color: #518c96;
}
.sidebar-right .btn-group .logout-btn:hover{
    background-color: #8faaaf;
}

/* Banner Section */

.banner-section{
    height:482px;
    padding:89px 0 0;
}
.banner-section:before,
.banner-section:after{
    content:'';
    width:100%;
    height:737px;
    background-position:center top;
    background-repeat:no-repeat;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.banner-section:before{
    background-image:url(../images/banner-bg.png);
}
.banner-section:after{
    background-image:url(../images/banner-bg2.png);
    z-index:1;
}
@media (min-width:1921px){
    .banner-section:before,
    .banner-section:after{
        background-size:cover;
    }
}
.banner-section .container{
    height:100%;
    padding:0;
}

/* Banner Carousel */

.banner-carousel{
    width:100%;
    height:238px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:3;
}
.banner-carousel .carousel{
    padding:30px 0 25px;
}
.banner-carousel .carousel-inner{
    height:100%;
}
.banner-carousel .carousel-inner .carousel-item{
    height:100%;
}
.banner-carousel .carousel-container{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.banner-carousel .carousel-container h1{
    color:#fff;
    font-size:45px;
    font-family:SCDream8;
    text-shadow:0 3px 2px rgba(0,0,0,0.72),
                2px 2px 0 #030f18,
                2px -2px 0 #030f18,
                -2px -2px 0 #030f18,
                -2px 2px 0 #030f18;
    animation:bannerCarouselh1 5s ease 1 forwards;
}
@keyframes bannerCarouselh1{
    0%{opacity:0;transform:translateY(25%);}
    15%{opacity:1;transform:translateY(0);}
    90%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}
.banner-carousel .carousel-container h2{
    color:#ffe71e;
    font-size:35px;
    font-family:SCDream8;
    text-shadow:0 3px 2px rgba(0,0,0,0.72),
                2px 2px 0 #030f18,
                2px -2px 0 #030f18,
                -2px -2px 0 #030f18,
                -2px 2px 0 #030f18;
    animation:bannerCarouselh2 5s ease 1 forwards;
}
@keyframes bannerCarouselh2{
    0%{opacity:0;transform:translateY(-25%);}
    15%{opacity:1;transform:translateY(0);}
    90%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}

/* Carousel Indicator */

.banner-carousel .carousel-indicators{
    margin:0;
    bottom:0;
}
.banner-carousel .carousel-indicators li{
    width:13px;
    height:13px;
    border-radius:50%;
    background-color: #ffffff;
    border:none;
    opacity:1;
    transition:0.3s ease all;
    background-clip:border-box;
    margin:0 3px 0;
}
.banner-carousel .carousel-indicators li:hover{
    background-color:#64c0e6;
}
.banner-carousel .carousel-indicators .active{
    background-color: #f80314;
}
.banner-carousel .carousel-indicators .active:hover{
    background-color: #f80314;
}

/* Jackpot Section */

.jackpot-section .container{
    max-width:997px;
    height:312px;
    position:relative;
    padding:35px 0 0;
}
.jackpot-section .container:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-image:url(../images/jackpot-bg.png);
    background-position:center top;
    z-index:1;
}

/* Labels */

.jackpot-section .labels{
    margin-bottom:-1.25%;
    position:relative;
    z-index:1;
}
.jackpot-section .labels .center{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.jackpot-section .labels .title-img{
    position:relative;
    z-index:1;
}
.jackpot-section .labels .deco-img{
    margin:8px 0 0 -22px;
    animation:jackpotDecoAnim 0.8s ease infinite;
}
@keyframes jackpotDecoAnim{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(10deg);}
    50%{transform:rotate(-10deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(0deg);}
}
/* Amount */

.jackpot-section .amount{
    position:relative;
    z-index:1;
}
.jackpot-section .amount span{
    color:#ffffff;
    font-size:60px;
    font-family:SCDream8;
    background: -webkit-linear-gradient(#cccccc,#ffffff,#cccccc,#ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    vertical-align:baseline;
    position: relative;
}
.jackpot-section .amount .text-sm{
    font-size:50px;
}
.jackpot-section .amount .text-xs{
    font-size:40px;
}
.jackpot-section .amount span:before{
    content:attr(data-text);
    right:0;
    bottom:0;
    position: absolute;
    z-index:-1;
    text-shadow:0 3px 2px rgba(0,0,0,1);
}
/* Information Carousel */
.information-carousel{
    padding:0 15px;
    position:relative;
    z-index:3;
}
.information-carousel .carousel-inner .carousel-item{
    animation:infoCarouselAnim 5s ease 1 forwards;
}
@keyframes infoCarouselAnim{
    0%{opacity:0;transform:translateY(-100%);}
    20%{opacity:1;transform:translateY(0);}
    90%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(100%);}
}
.information-carousel .carousel-inner .carousel-item span{
    color:#4dc0f5;
}

/* Banner Background */

.banner-background{
    width:1400px;
    height:100%;
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:2;
}
.banner-background img{
    position:absolute;
}
.banner-background .slot-girl{
    width:117.29%;
    left:-13.75%;
    bottom:-23%;
    transform-origin:top left;
    z-index:1;
    animation:slotGirlAnim 10s ease infinite; 
}
@keyframes slotGirlAnim{
    0%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(20%);*/
        transform:translateY(20%);
    }
    10%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    95%{
        opacity:1;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
    100%{
        opacity:0;
        /*-webkit-transform:-webkit-translateY(0);*/
        transform:translateY(0);
    }
}
.banner-background .roulette{
    width:28.43%;
    left:5.25%;
    bottom:-37.5%;
    animation:rouletteAnim 10s ease infinite;
}
@keyframes rouletteAnim{
    0%{
        opacity:0;
        transform:rotate(-100deg);
    }
    15%{
        opacity:1;
        transform:rotate(0deg);
    }
    95%{
        opacity:1;
        transform:rotate(0deg);
    }
    100%{
        opacity:0;
        transform:rotate(0deg);
    }
}
.banner-background .glow-right{
    width:38.08%;
    right:-6.5%;
    bottom:-22.5%;
    position:absolute;
    animation:glowRightAnim 10s ease infinite; 
}
@keyframes glowRightAnim{
    0%{opacity:0;}
    5%{opacity:0;}
    10%{opacity:1;}
    95%{opacity:1;}
    100%{opacity:0;}
}
.banner-background .glow-right img{
    width:100%;
    position:relative;
    animation:glowImgAnim 1s ease infinite; 
}
@keyframes glowImgAnim{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.banner-background .slot-boy{
    width:36.79%;
    right:-7.5%;
    bottom:-24%;
    animation:slotBoyAnim 10s ease infinite;
}
@keyframes slotBoyAnim{
    0%{
        opacity:0;
        transform:translateX(-25%);
    }
    10%{
        opacity:1;
        transform:translateX(0);
    }
    95%{
        opacity:1;
        transform:translateX(0);
    }
    100%{
        opacity:0;
        transform:translateX(0);
    }
}
.banner-background .chimney-girl{
    width:21%;
    right:9.75%;
    bottom:-37.75%;
    animation:rollerAnim 10s ease infinite; 
    animation:chimneyGirlAnim 10s ease infinite;
}
@keyframes chimneyGirlAnim{
    0%{
        opacity:0;
        transform:translateX(25%);
    }
    10%{
        opacity:1;
        transform:translateX(0);
    }
    95%{
        opacity:1;
        transform:translateX(0);
    }
    100%{
        opacity:0;
        transform:translateX(0);
    }
}

/* Page Content */

.page-content{
    background-image:url(../images/main-bg.png);
    background-repeat:no-repeat;
    background-position:center top;
    position:relative;
}
@media (min-width:1921px){
    .page-content{
        background-size:cover;
    }
}
.page-content:before{
    content:'';
    width:100%;
    min-width:1920px;
    height:242px;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    background-image:url(../images/deco-bottom.png);
    background-repeat:no-repeat;
    background-position:right bottom;
    pointer-events:none;
}
.company-section .company-box{
    border:solid 1px #526c8e;
    border-radius:10px;
    background-color:rgba(3,7,20,0.73);
}
.company-section .company-container{
    display:flex;
    align-content:flex-start;
    align-items:stretch;
    justify-content:center;
    flex-wrap:wrap;
    padding:50px 15px 40px;
}
.company-section-text{
    color:#ffc107;
    font-size:20px;
    font-family:SCDream8;
    text-align:center;
    margin:30px 0 0 0;
}
.company-btn{
    display:inline-block;
    position:relative;
    margin:8px 5px;
    z-index:3;
    animation:companyBtn 0.5s ease 1 backwards;
}
@keyframes companyBtn{
    0%{opacity:0;transform:translateY(20%);}
    100%{opacity:1;transform:translateY(0);}
}
.company-btn .btn-container{
    width:210px;
    height:210px;
    position:relative;
    border-radius:5px;
    border-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%) 30;
    border-width: 2px;
    border-style: solid;
    background-color:#000;
    padding:3px 0 4px;
    box-shadow:0 3px 4px #000;
    top:0;
    transition:0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width:720px){
    .company-btn .btn-container{
        width:100px;
        height:100px;
    }
}

.company-btn:hover .btn-container{
    background-color:#14600e;
    top:-12px;
}
.company-btn .btn-container:before,
.company-btn .btn-container:after{
    content:'';
    width:100%;
    height:6px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:0 auto;
    border-radius:0 0 2px 2px;
    transition:0.3s;
    opacity:0;
}
.company-btn .btn-container:before{
    width:calc(100% - 20px);
    background-color: #65a710;
}
.company-btn .btn-container:after{
    width:calc(100% - 10px);
    background-color: #99ff14;
}
.company-btn:hover .btn-container:before{
    transition-delay:0.1s;
    bottom:-12px;
    opacity:1;
}
.company-btn:hover .btn-container:after{
    bottom:-6px;
    opacity:1;
}
.company-btn .btn-container .btn-panel{
    width:90%;
    border-radius:5px;
    background-color:#000;
    overflow:hidden;
}
.company-btn .main-img{
    width:200px;
    transition:0.3s;
}
.company-btn:hover .main-img{
    opacity:0.5;
}
.company-btn .play-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    border:solid 2px #14600e;
    color:#063c02;
    font-size:14px;
    font-family:SCDream9;
    text-shadow:0 1px 0 rgba(255,255,255,0.75);
    background-color:transparent;
    box-shadow:0 0 5px rgba(255,255,255,0.75);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    z-index:1;
    transition:0.5s;
    opacity:0;
    transform:translateY(100%) rotateY(360deg);
    overflow:hidden;
}
.company-btn:hover .play-btn{
    opacity:1;
    transform:translateY(0) rotateY(0deg);
}
.company-btn .play-btn:hover{
    transition:0.3s;
    box-shadow:0 0 10px rgba(255,255,255,1);
}
.company-btn .play-btn:before{
    content:'';
    width:100%;
    height:100%;
    background-image:linear-gradient(#edf95c,#99ff14,#5ea700);
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    transition:0.3s;
}

/* company btn footer*/

.company-btn .footer{
    width:100%;
    max-width:100px;
    height:33px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#049f04;
    background-image:linear-gradient(#049f04,#102703);
    z-index:1;
}
.company-btn .footer:before,
.company-btn .footer:after{
    content:'';
    width:35px;
    height:100%;
    position:absolute;
    bottom:0;
    background-image:linear-gradient(#049f04,#102703);
    pointer-events:none;
    transition:0.3s;
    z-index:-1;
}
.company-btn .footer:before{
    left:-20px;
    transform:skew(-30deg);
    border-radius:8px 0 0 0;
}
.company-btn .footer:after{
    right:-20px;
    transform:skew(30deg);
    border-radius:0 8px 0 0;
}
.company-btn .footer .bg{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#61ac01;
    background-image:linear-gradient(#61ac01,#14600e);
    z-index:1;
    transition:0.3s;
    opacity:0;
}
.company-btn:hover .footer .bg{
    opacity:1;
}
.company-btn .footer .bg:before,
.company-btn .footer .bg:after{
    content:'';
    width:35px;
    height:100%;
    position:absolute;
    bottom:0;
    background-image:linear-gradient(#61ac01,#14600e);
    pointer-events:none;
    transition:0.3s;
    z-index:-1;
}
.company-btn .footer .bg:before{
    left:-20px;
    transform:skew(-30deg);
    border-radius:8px 0 0 0;
}
.company-btn .footer .bg:after{
    right:-20px;
    transform:skew(30deg);
    border-radius:0 8px 0 0;
}
.company-btn .footer .icon{
    position:relative;
    z-index:2;
}
.company-btn .name{
    color:#fff;
    margin:10px 0 0;
    display:inline-block;
}

/* Footer Section */

.footer-section  .container{
    max-width:1340px;
}
.footer-section  .company-logo{
    padding:50px 0 25px;
}
.footer-section  .company-logo img{
    display:inline-block;
    vertical-align:middle;
    margin:5px;
}
.footer-section  .copyright{
    color:#666666;
    font-size:12px;
    padding:24px 0;
    background-color:#0c0c0c;
    border-top:solid 1px #252525;
}

/* Scroll To Top */

.scroll-top{
    width:60px;
    height:60px;
    box-shadow: 0 4px 0 rgba(84,138,3,1);
    background-color:#f0fb55;
    background-image:linear-gradient(#f0fb55,#99ff14);;
    text-shadow:0 1px 0 rgba(255,255,255,0.2);
    border:none;
    border-radius:50%;
    position:fixed;
    bottom:20px;
    right:30px;
    color: #264000;
    font-size:24px;
    z-index:10;
    transition:0.3s;
    overflow:hidden;
    padding:0;
}
.scroll-top:hover{
    box-shadow: 0 4px 0 rgba(84,138,3,1),
                0 0 20px rgba(255,255,255,0.75);
}

/*=========================================================== M O D A L ===============================================================*/
   
.modal-backdrop{
    background-color:#000;
    z-index:101;
}
.modal-backdrop.show {
    opacity:1;
}
.modal-backdrop:before,
.modal-backdrop:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.modal-backdrop:before{
    background:radial-gradient(ellipse at bottom, #031519 0%, #041f24 100%);
}
.modal-backdrop:after{
    width: 400vw;
    height: 400vh;
    top: 50%;
    left: 50%;
    margin-top: -200vh;
    margin-left: -200vw;
    background-size: 240px 240px;
    background-image:url(../images/stars.svg);
    animation:spin 200s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* Modal App */

.modal-app{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    overflow:hidden;
    z-index:103;
    display:none;
    animation:modalAppAnim 0.5s ease 1 forwards;
}
@keyframes modalAppAnim{
    0%{opacity:0;}
    100%{opacity:1;}
}
.modal-app.show{
    display:block;
}
.modal-app.show *{
    pointer-events:auto;
}
.modal-app:before,
.modal-app:after{
    content:'';
    display:block;
    width:1px;
    height:10rem;
    position:fixed;
    background-color:#7adc4f;
    transition:1s;
}
.modal-app:before{
    left:80px;
    top:140px;
}
.modal-app:after{
    right:80px;
    bottom:0;
}
.modal-app .diamond-logo{
    width:100px;
    left:20px;
    top:20px;
    position:absolute;
}

/* Close Button */

.modal-close-btn{
    width:50px;
    height:50px;
    background-color:transparent;
    border:1px solid rgba(255, 255, 255, 0.15);
    position:absolute;
    background-color:rgba(0,0,0,0);
    right:50px;
    top:30px;
    transition:0.3s;
    outline:none;
}
.modal-close-btn:before,
.modal-close-btn:after{
    content:'';
    width:2px;
    height:calc(100% - 20px);
    background-color:#7adc4f;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    transform:rotate(45deg);
    transition:0.5s;
}
.modal-close-btn:after{
    transform:rotate(-45deg);
}
.modal-close-btn:hover:before{
    transform:rotate(135deg);
    background-color:#ffd662;
}
.modal-close-btn:hover:after{
    transform:rotate(-135deg);
    background-color:#ffd662;
}

/* Modal Menu Side */

.modal-menu-side{
    width:36px;
    position:absolute;
    right:60px;
    top:50%;
    transform:translateY(-50%);
}
.modal-menu-side button{
    width:100%;
    height:36px;
    position:relative;
    margin:10px 0;
    color:#fff;
    font-size:20px;
    background-color:rgba(0,0,0,0);
    border:none;
    text-shadow:0 2px 1px #000;
    transition:0.3s;
}
.modal-menu-side button:hover{
    color:#7adc4f;
}
.modal-menu-side button .text{
    color:#fff;
    font-size:13px;
    right:60px;
    top:10px;
    position:absolute;
    white-space:nowrap;
    display:inline-block;
    transform-origin:center;
    transform:scale(0);
    transition:0.3s;
}
.modal-menu-side button .text:after {
    content: "";
    width:8px;
    height:1px;
    position:absolute;
    top:0;
    bottom:0;
    right:-18px;
    margin:auto 0;
    background-color:rgba(255,255,255,0.15);
}
@media (min-width:990px){
    .modal-menu-side button:hover .text{
        transform:scale(1);
    }
}

/* Modal */

.modal{
    padding-right:0 !important;
    overflow-y:auto;
    z-index:102;
    padding:0 200px !important;
}
.modal::-webkit-scrollbar {
    width:0;
    background-color:transparent;
}
.modal::-webkit-scrollbar-thumb{
    background-color:transparent;
}

/* Modal Dialog */

.modal-dialog{
    width:94%;
    max-width:1110px;
    margin:50px auto;
}
.modal-dialog.size-lg{
    max-width:1400px;
}
.modal-content{
    border:none;
    background-color:transparent;
    flex-direction:row;
    z-index:1;
}
.modal-content *::-webkit-scrollbar {
    width:8px;
    border-radius:8px;
    background:#020c0e;
}
.modal-content *::-webkit-scrollbar-thumb{
    background-color:#7adc4f;
    border-radius:8px;
    border:solid 1px #080400;
}
.fs-44{
    font-size:44px;
}
.text-gray{
    color:rgba(255,255,255,0.5);
}

/* Modal Menu */

.modal-menu{
    width:100%;
    border:none;
    position:relative;
    left:-5px;
    padding:0;
    margin:0 0 30px;
    z-index:1;
}
.modal-menu button{
    width:100%;
    border:none;
    padding:15px 15px;
    background-color:rgba(255,255,255,0);
    margin:0 0 15px;
    transition:0.3s;
    color:#fff;
    font-size:18px;
    position:relative;
    text-align:left;
    z-index:1;
}
.modal-menu button:hover{
    color:#fff;
}
.modal-menu button:hover{
    background-color:rgba(255,255,255,0.08);
}
.modal-menu .active{
    background-color:rgba(255,255,255,0.08);
}
.modal-menu button .icon{
    min-width:40px;
    color:#7adc4f;
    text-align:center;
    transition:0.3s;
}
.modal-menu button .indicator{
    height:16px;
    width:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:-8px;
    bottom:0;
    top:0;
    margin:auto 0;
    background-color:#7adc4f;
    font-size:12px;
    transition:0.3s;
    color:#103101;
    opacity:0;
}
.modal-menu .active .indicator{
    opacity:1;
}

/* Modal Body */

.modal-body{
    border:none;
    border-radius:5px;
    padding:0;
}
.modal-title{
    text-align:center;
    margin-bottom:40px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    white-space:nowrap;
    letter-spacing:5px;
}
.modal-title:before{
    content:'';
    width:40px;
    height:1px;
    background-color:#7adc4f;
    margin-right:15px;
}
.modal-title .title{
    color:#fff;
}
.modal-title .sub{
    color:#7adc4f;
}

/* Modal Information */

.modal-information{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border-radius:6px;
    color:#fff;
    font-family:SCDream5;
}
.modal-information button{
    width:140px;
    height:45px;
    border:none;
    background-color:#7adc4f;
    color:#fff;
    transition:0.3s;
}
.modal-information button:hover{
    background-color:#219622;
}

/* Form Container */

.form-container{
    width:100%;
    display:inline-block;
}
.form-container .form-group{
    width:100%;
    float:left;
    margin:0 0 20px;
}
.form-container .labels{
    width:100%;
    float:left;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:#fff;
    margin:0 0 15px;
    padding:0 25px 0;
    position:relative;
}
.form-container .labels .asterisk{
    color:#ff5c5c;
    margin-left:5px;
}
.form-container .infos{
    width:100%;
    float:right;
}
.form-container .no-label .infos {
    width:100%;
}
.form-container .form-group .input-container{
    width:100%;
    float: left;
    position:relative;
}
.form-container .form-group input{
    width:100%;
    height:50px;
    float: left;
    background-color:rgba(200, 200, 200, 1);
    border:none;
    padding:0 25px;
    color: #000;
}
.form-container .form-group input:read-only{
    color: #108441;
    font-size:16px;
    font-family:SCDream6;
}
.form-container .form-group input::-webkit-input-placeholder{
    color:#757575;
}
.form-container .w-btn .input-container{
    width:calc(100% - 125px);
    border-radius:3px;
}
.form-container .form-group select {
    width:100%;
    height:50px;
    float: left;
    background-color:rgba(255, 255, 255,1);
    border:none;
    padding:0 25px;
    color: #757575;
}
.form-container .form-group select option{
    color:#000;
}
.form-container .form-group textarea {
    width:100%;
    height:200px;
    float: left;
    background-color:#fff;
    border:none;
    padding:15px 25px;
    color: #fff;
    resize:none;
}
.form-container .form-group textarea::-webkit-input-placeholder{
    color:#6b574b;
}
.form-container .form-group .form-btn{
    width:120px;
    height:50px;
    border: none;
    float:right;
    padding: 0;
    margin:0;
    white-space: nowrap;
    background-color:#25b0c7;
    color: #fff;
    position:relative;
    transition: 0.3s;
}
.form-container .form-group .form-btn:hover{
    background-color:#00dbff;
}

/* 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:40px;
    float: left;
    margin: 0 2px;
    background-color: #2d5156;
    border: none;
    color: #fff;
    font-size: 12px;
    transition: 0.3s;
    padding: 0;
}
.form-container .form-group .infos .btn-grp button:hover {
    background-color:#71a2a9;
}
.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:#25b0c7;
    color:#fff;
}
.form-container .form-group .infos .btn-grp button:last-child:hover {
    background-color:#00dbff;
}

/* Modal Footer */

.modal-footer{
    border:none;
    margin:20px 0 0;
    padding:0;
    flex-wrap:nowrap;
    justify-content:center;
}
.modal-footer .btn-style{
    width:100%;
    max-width:160px;
    height:50px;
    background-color:#7adc4f;
    border:none;
    color:#fff;
    font-size:14px;
    letter-spacing:3px;
    padding:0 10px;
    margin:0 3px;
    position:relative;
    transition:0.3s;
    overflow:hidden;
    z-index:1;
}
.modal-footer .btn-style:hover{
    background-color:#219622;
}
.modal-footer .btn-style.dark-bg{
    background-color:#6c947d;
    color:#fff;
}
.modal-footer .btn-style.dark-bg:hover{
    background-color:#63d694;
}

/* -- BS Table -- */

.bs-table{
    width:100%;
    border-collapse:collapse;
}
.bs-table thead th{
    height:50px;
    color:#fff;
    text-align:center;
    background-color:#284b5a;
}

.bs-table tr td{
    height:50px;
    color:#fff;
    font-size:12px;
    text-align:center;
    padding:1px;
    transition:0.3s;
    background-color:rgba(255,255,255,0.05);
    border-bottom:solid 1px #1d343e;
}
.bs-table tr:hover td{
    background-color:rgba(255,255,255,0.1);
}
.bs-table tr.active td{
    background-color:rgba(255,255,255,0.05);
}
.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:hover td.title{
    color:#7adc4f;
}
.bs-table tr:hover td a{
    color:#7adc4f;
}
.bs-table tr.active td.title{
    color:#ffd800;
}
.bs-table tr.active td a{
    color:#ff6dea;
}
.new-icon{
    width:16px;
    height:16px;
    background-color:#7adc4f;
    display:inline-block;
    color:#fff;
    font-size:8px;
    vertical-align:middle;
    text-align:center;
    margin:0 0 0 5px;
    padding:2px 0 0;
    border-radius:2px;
}

/* Message Content */

.message-content{
    width: 100%;
    height: 300px;
    border:solid 1px #1d343e;
    margin:10px 0 20px;
    padding: 10px;
}
.message-content .inner-container {
    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;
}

/* Pagination */

.pagination{
    margin:20px 0 0;
}
.pagination li{
    float:left;
}
.pagination>li>a{
    width:30px;
    height:30px;
    color:#fff;
    font-size:14px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 4px;
    background-color:rgba(255,255,255,0);
    border:solid 1px rgba(255,255,255,0.3);
    border-radius:50%;
    transition:0.3s;
}
.pagination .turn-pg a{
    color:#fff;
    font-size:12px;
}
.pagination>li>a:hover{
    background-color:rgba(255,255,255,0.15);
}
.pagination>.turn-pg>a:hover{
    color:#fb9659;
    background-image:none;
}
.pagination .active{
    color:#063c02;
    font-family:SCDream6;
    border-color:#7adc4f;
    background-color:#7adc4f;
}

/* Gamelist */

.gamelist-title{
    width:100%;
    padding:10px 0;
    margin:0 0 15px;
    border:solid 1px rgba(255,255,255,0.1);
    color:#ffffff;
}
.gamelist-container{
    width:100%;
    border:solid 1px #1d343e;
    background-color:rgba(255,255,255,0.05);
    padding:10px;
}
.gamelist-container .scroll-container{
    width:100%;
    height:620px;
    overflow-y:scroll;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding-right:5px;
}
.game-btn{
    width:calc(20% - 16px);
    min-height: 50px;
    display:inline-block;
    margin:10px 8px;
    border-radius:5px;
    border:solid 2px #0f9210;
    padding:5px;
    transition:0.3s;
}
.game-btn:hover{
    border-color:#7adc4f;
    box-shadow:0 0 10px rgba(255,255,255,0.5);
}
.game-btn .btn-container{
    width:100%;
    border-radius:5px;
    overflow:hidden;
    position:relative;
    background-color:#041f24;
}
.game-btn .main-img{
    width:100%;
    height:100%;
    transition:0.3s;
}
.game-btn:hover .main-img{
    opacity:0.5;
}
.game-btn .footer{
    width:100%;
    height:35px;
    position:absolute;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(0,0,0,0.75);
    color:#fff;
}
.game-btn .play-btn{
    width:50px;
    height:50px;
    border-radius:50%;
    border:solid 2px #14600e;
    color:#063c02;
    font-size:22px;
    font-family:SCDream9;
    text-shadow:0 1px 0 rgba(255,255,255,0.75);
    background-color:transparent;
    box-shadow:0 0 5px rgba(255,255,255,0.75);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:15px;
    margin:auto;
    z-index:1;
    transition:0.3s;
    opacity:0;
    transform:scale(0);
    overflow:hidden;
}
.game-btn:hover .play-btn{
    opacity:1;
    transform:scale(1);
}
.game-btn .play-btn:hover{
    transition:0.3s;
    box-shadow:0 0 10px rgba(255,255,255,1);
}
.game-btn .play-btn:before{
    content:'';
    width:100%;
    height:100%;
    background-image:linear-gradient(#edf95c,#99ff14,#5ea700);
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    transition:0.3s;
}
.loading-bar{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}
.loading-bar img{
    width:100%;
}

/* Mypage Tabs */

.modal-tabs{
    width:100%;
    min-height:500px;
    float:left;
}
.modal-tabs .mp-tab{ 
    width:100%;
    float:left;
    margin-top:20px;
    animation:modalTabAnim 0.5s ease 1;
    display:none;
}
@keyframes modalTabAnim{
    0%{opacity:0;transform:rotateY(-50deg);}
    100%{opacity:1;transform:rotateY(0deg);}
}
.modal-tabs .mp-tab.active{ 
    display:block
}
.level-information{
    width:100%;
    height:80px;
    float:left;
    position:relative;
    margin-bottom:10px;
    border-radius: 3px;
    background-color: rgba(255,255,255,0.05);
    border: solid 1px #1d343e;
}
.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: #ffd400;
    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:38px;
    border-radius:1px;
    padding:0 5px;
    color:#000;
    font-size:12px;
    background-color:#ffffff;
    border:none;
    border-radius:3px;
}
.level-information .point-form input::-webkit-input-placeholder{
    color:#000;
}
.level-information .points-btn{
    width:110px;
    height:38px;
    color:#fff;
    font-size:12px;
    border:none;
    border-radius:1px;
    background-color:#2a86dd;
    transition:0.3s;
    white-space:nowrap;
    position:absolute;
    right:10px;
    border-radius:3px;
}
.level-information .points-btn:hover{ 
    background-color:#61b2ff;
    color:#000;
}

/* With Depth */

.with-depth tr.depth-click {
    cursor: pointer;
}
.with-depth tr.dropdown td{
    padding:0;
    border:none;
    height:auto;
    background-color:transparent;
}
.bs-table tr .about {
    text-align: left;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0 0 10px;
}
.with-depth .message-content{
    display:none;
    height:200px;
    margin:5px 0;
}
.bs-table tr td.nav-td{
    width:40px;
}
.bs-table tr td .delete-btn{
    background-color:transparent;
    border:none;
    color:#79a0b1;
    font-size:14px;
    transition:0.3s;
}
.bs-table tr td .delete-btn:hover{
    color:yellow;
}
.bs-table tr td .nav-btn{
    width:20px;
    height:20px;
    background-color:#7adc4f;
    border:none;
    border-radius: 50%;
    transition: 0.3s;
    color: #e53e38;
    font-size: 12px;
    padding:0 0 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.bs-table tr td .nav-btn:hover{
    background-color:#47b98d;
}
.bs-table tr td .nav-btn:before,
.bs-table tr td .nav-btn:after{
    content:'';
    width:2px;
    height:50%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    position:absolute;
    background-color:#fff;
    transition:0.3s;
}
.bs-table .nav-td .nav-btn:after{
    transform:rotate(90deg);
}
.bs-table tr.active td .nav-btn:before{
    height:0;
}

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

.left-menu-btn{
    width:42px;
    height:42px;
    float:left;
    margin-left:15px;
    background-color:transparent;
    border:1px solid rgba(255, 255, 255, 0.15);
    z-index:1;
    float:left;
    padding:0;
    display:none;
}
.left-menu-btn span {
    display:block;
    width:calc(100% - 16px);
    height:2px;
    background-color:#7adc4f;
    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:7px;
    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:-9px;
    transform: rotate(45deg);
    transition: top .3s 0s,transform .3s .3s;
}
.mobile-btn{
    width:42px;
    height:42px;
    border:none;
    background-color:transparent;
    color:#7adc4f;
    font-size:24px;
    float:left;
    margin-left:0px;
    padding:0;
    position:relative;
}
.right-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
}
.right-menu-btn .over-icon{
    font-size:8px;
    transform:rotate(0deg);
    margin-left:2px;
    transition:0.3s;
}
.right-menu-btn.opened .over-icon{
    transform:rotate(180deg);
}
.sn-overlay{
    width:100%;
    height:100%;
    position:fixed;
    z-index:96;
    background-color:rgba(0,0,0,0.6);
    top:0;
    left:0;
    pointer-events:none;
    opacity:0;
    transition:0.3s;
}
.sn-overlay.active{
    opacity:1;
    pointer-events:auto;
}
@media (max-width:1620px){
    .game-btn{
        width:calc(25% - 16px);
    }
}
@media (max-width:1360px){
    .header-main:before{
        width:200%;
        min-width:initial;
        left:-220px;
        transform:translateX(0);
    }
    .header-main .container{
        justify-content:flex-start;
        padding: 0 15px 0;
    }
    .header-main:before{
        top:-60%;
    }
    .diamond-logo{
        width:120px;
    }
    .affix .diamond-logo {
        width: 120px;
    }
    .main-menu{
        margin-left:180px;
    }
    .bal-container {
        position:relative;
        margin-left:auto;
    }
    .before-login .panel{
        margin-right:0;
    }
    .sidebar-right{
        margin-right:0;
    }
    .game-btn{
        width:calc(33.33% - 16px);
    }
}
@media (max-width:1220px){
    .main-menu li{
        padding:0 2px;
    }
    .modal{
        padding: 0 180px !important;
    }
    .modal-menu button{
        padding: 15px 10px;
        font-size:14px;
    }
    .modal-menu button .icon {
        min-width:30px;
    }
}
@media (max-width:1150px){
    .left-menu-btn{
        display:block;
    }
    .sidebar-left{
        width:280px;
        height:100%;
        top:90px;
        right:-100%;
        background-color: #031519;
        border-left: solid 1px #162629;
        margin:0;
        padding:0 0 120px;
        display:block;
        overflow-y:auto;
        position:fixed;
        transition:0.5s;
    }
    .sidebar-left.active{
        right: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;
    }
    .main-menu li a {
        width:100%;
        height:50px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:0 20px;
        border-top: solid 1px #07262d;
        border-bottom: solid 1px #010c0e;
        border-radius:0;
    }
    .main-menu li:first-child a{
        border-top:none;
    }
    .main-menu li a:before {
        display:none;
    }
    .main-menu li a i{
        display:inline-block;
        width:25px;
        font-size:18px;
        margin-right:15px;
    }
    .sidebar-right{
        width:280px;
        height:100%;
        top:90px;
        right:0;
        margin:0;
        padding:0 0 120px;
        overflow-y:auto;
        position:fixed;
        transition:0.5s;
        pointer-events:none;
    }
    .sidebar-right.active{
        pointer-events:auto;
    }
    .sidebar-right::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .sidebar-right::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .sidebar-right .al-inner{
        position:relative;
        top:-100%;
        opacity:0;
        background-color: #031519;
        padding:2px 4px 20px;
        border-left: solid 1px #162629;
        border-bottom: solid 1px #162629;
        transition:0.5s;
    }
    .sidebar-right.active .al-inner{
        top:0;
        opacity:1;
    }
    .after-login .al-cont {
        width:100%;
        height:40px;
        padding:8px 10px;
        margin:2px 0;
    }
    .after-login .al-cont:nth-child(1){
        order:1;
    }
    .after-login .al-cont:nth-child(2){
        order:4;
    }
    .after-login .al-cont:nth-child(3){
        order:5;
    }
    .after-login .al-cont:nth-child(4){
        order:2;
    }
    .after-login .al-cont:nth-child(5){
        order:3;
    }
    .after-login .al-cont:nth-child(6){
        order:6;
    }
    .after-login .btn-group{
        height:40px;
        margin:20px 0 1px;
        padding:0 5px;
        background-color:transparent;
        background-image:none;
    }
    .bal-container .mobile{
        display:block;
    }
}
@media (max-width:990px){
    .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%;
        border-radius:5px 0 0 5px;
    }
    .level-information .points-btn{
        width:40%;
        position:relative;
        right:0;
        font-size:8px;
        border-radius:0 5px 5px 0;
    }
    .level-information .points-btn:hover{ 
        background-color:#86e8df;
    }
    .bs-table td .level-txt {
        width: 100%;
        text-align: center;
    }
}
@media (max-width:990px){
    .modal-app .diamond-logo{
        width:80px;
        left:20px;
        top:15px;
    }
    .modal-close-btn {
        right:25px;
    }
    .modal {
        padding: 0 140px !important;
    }
    .modal-dialog{
        margin:140px auto 50px;
    }
    .modal-menu{
        width:calc(100% + 6px);
        border:none;
        position:relative;
        left:-3px;
        padding:0;
        margin:0 0 50px;
        z-index:1;
    }
    .modal-menu{
        display:flex;
    }
    .modal-menu button{
        width:calc(100% - 6px);
        margin:0 3px 5px;
        font-size:10px;
        float:left;
        text-align:center;
    }
    .modal-menu button .icon {
        width:100%;
        font-size:22px;
        min-width:initial;
        margin:0 0 10px;
    }
    .modal-menu button .indicator{
        width:50%;
        height:14px;
        right:0;
        left:0;
        top:auto;
        bottom:-7px;
        margin:0 auto;
    }
    .gamelist-container .scroll-container{
        height:auto;
        overflow-y:auto;
        padding-right:0;
    }
}
@media (max-width:767px){
    .modal-menu-side {
        display:none;
    }
    .modal-app:before,
    .modal-app:after{
        display:none;
    }
    .modal {
        margin:100px 0 0;
        overflow-y:scroll;
        padding: 0 0 !important;
    }
    .modal-dialog{
        margin:20px auto 180px;
    }
    .modal-body {
        text-align:center;
    }
    .modal-title {
        margin-bottom:30px;
    }
}
@media (max-width:600px){
    .banner-carousel .carousel-container h1{
        font-size:7.5vw;
    }
    .banner-carousel .carousel-container h2{
        font-size:5.9vw;
    }
    .jackpot-section .labels .title-img{
        width:55.22%;
    }
    .jackpot-section .labels .deco-img{
        margin:2% 0 0 -4.25%;
        width:16.33%;
    }
    .jackpot-section .amount span{
        font-size:10vw;
    }
    .jackpot-section .amount .text-sm {
        font-size: 8.4vw;
    }
    .jackpot-section .amount .text-xs {
        font-size:6.7vw;
    }
    .mypageModal .modal-nav{
        flex-wrap:wrap;
    }
    .mypageModal .modal-nav button {
        width:calc(33.33% - 6px);
    }
}
@media (max-width:540px){
    .header-main {
        height:60px;
    }
    .header-main:before{
        left:-340px;
    }
    .diamond-logo{
        width:90px;
    }
    .affix.header-main:before{
        left:-340px;
    }
    .affix .diamond-logo{
        width:90px;
    }
    .sidebar-left{
        top:60px;
    }
    .before-login .panel{
        width:auto;
        height:auto;
        border-radius:0;
        background-color:transparent;
    }
    .before-login button{
        width:42px;
        height:42px;
        background-color:transparent;
        border:none;
        border-right:none;
        transition:none;
        font-size:26px;
    }
    .before-login button .desk-icon{
        display:none;
    }
    .before-login button .mob-icon{
        display:inline-block;
    }
    .before-login button span{
        display:none;
    }
    .sidebar-right{
        top:60px;
    }
    .banner-section{
        height:auto;
        padding:60px 0 0;
    }
    .banner-carousel{
        height:auto;
        padding:15px 15px 10px;
    }
    .banner-carousel .carousel {
        padding:20px 0 25px;
    }
    .jackpot-section .container{
        height:auto;
        padding:20px 0 15px;
    }
    .company-section .container {
        border-radius:0;
        padding:15px 15px;
    }
    .footer-section .company-logo {
        padding:25px 0;
    }
    .bs-table tr td a {
        display: inline-block;
        vertical-align: middle;
        max-width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bs-table tr td.date{
        font-size:10px;
    }
    .modal-footer .btn-style {
        width: 100%;
    }
    .game-btn {
        width: calc(50% - 16px);
    }
}


/* 공지팝업 */
.pop01_popup1 {position:absolute; z-index:1000000000;}
.pop01_popup2 {position:absolute; z-index:1000000000;}
.pop01_popup_wrap {float:left;z-index:1000000000;}
.pop01_popup_btn_wrap {float:right;z-index:1000000000;}
.pop01_popup_btn_wrap ul li {float:left; margin:0 0 0 5px;}
.pop01_popup_btn {float:right; background:#e89006; min-width:60px; height:36px; line-height:40px; padding:0 15px 0 15px; text-align:center; display:inline-block; font-family:nanumgothic, sans-serif; color:#ffffff; font-size:12px; font-weight:600;}
.pop01_popup_box {float:left; background:#000000; border:5px solid #e89006;clear:both;z-index:1000000000;}
.pop01_popup_text {float:left; width:100%;z-index:1000000000;}
.pop01_popup_text h2 {font-size: 16px;}
.pop01_popup_font1 {float:left; width:100%; font-family:'nanumsquare', sans-serif; font-size:22px; letter-spacing:-1px; font-weight:700; color:#e89006; line-height:40px;}
.pop01_popup_font2 {float:left; width:100%; font-family:'nanumgothic', sans-serif; font-size:16px; letter-spacing:-1px; font-weight:400; color:#ffffff; line-height:28px;}




.neon {
	animation: neon 1s ease infinite;
	-moz-animation: neon 1s ease infinite;
	-webkit-animation: neon 1s ease infinite;
  }

  @keyframes neon {
	0%,
	100% {
	  /* text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914; */
	  color: #FED128;
	}
	50% {
	  /* text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A; */
	  color: #806914;
	}
}