@font-face {
    font-family:SCDream4;
    src:  url(../fonts/SCDream4.otf)
}
@font-face {
    font-family:SCDream6;
    src:  url(../fonts/SCDream6.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;
}
body{
    text-align:center;
    background-color:#222022;
    color:#fff;
    font-size:14px;
}
body.active{
    overflow:hidden;
}
button,a,input,textarea,select{
    outline:none !important;
}
.wrapper{
    width:100%;
    overflow-x:hidden;
    position:relative;
    z-index:1;
}
.bs-ul{
    list-style:none;
    margin-top:10px;
    height:37px;
    padding:0;
	width:100%;
	display: inline-block;
	float: right;
	text-align:right;
	margin-right:auto;
}

.bs-ul > li {
    list-style:none;
    float:right;
    text-align: center;
    vertical-align: middle;
}

.bs-ul > li > ul {
    width: 140px;
    display: none;
    position: absolute;
    font-size: 14px;
    font-weight: 800;
    background: #000000;
    padding-left: 0px;
    list-style: none;
    margin-left: -10px;
	padding-top:10px;
}
.bs-ul > li:hover > ul {
		display:block;
}
.bs-ul > li > ul > li {
    padding: 10px 20px;
    text-align: center;
}
.bs-ul > li > ul > li a {
    color: #cccccc;
    padding-left: 0px;
}

.bs-ul > li > ul > li:hover {
		background: #d38009;
		transition: ease 1s;
}
.bs-ul > li > ul > li {
		padding:10px 20px;
		text-align:center;
}
.bs-ul > li > ul > li a {
  color: #cccccc;
  padding-left: 0px;
}
.bs-ul > li > ul > li a:hover {
  color: #ffffff;
}

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

/* Header Main */

.header-main{
    height: 150px;
    background-color:#000000;
    z-index:99;
    position: fixed;
    transition:0.3s;
	width: 100%;
    background: url(../img/top_bg.png?v=6) repeat-x;
	backface-visibility: hidden;
}
.header-main .container{
    display:flex;
    align-items:center;
    height:100%;
}

/* Main Menu */

.sidebar-left li{
    padding:0 20px;
}
.sidebar-left li a{
    text-decoration:none;
}
.sidebar-left li a p{
    color:#ffffff;
    margin:0;
    transition:0.3s;
}
.sidebar-left li a:hover p{
    color:#f1a715;
}
.sidebar-left li a .kr{
    font-family:SCDream6;
	font-size:16px;
}
.sidebar-left li a .en{
    width:72px;
    font-size:12px;
    background-color:#525252;
    border-radius:4px;
    margin:3px 0 0;
}
.sidebar-left li a:hover .en{
    color:#e9d7ae;
    background-color:#525252;
}


/* Aladdin Logo */

.aladdin-logo{
    width:20%;
    left:0;
    bottom:0;
    margin-top:-40px;
}
.aladdin-logo img{
}
.aladdin-logo .pane{

    width:100%;
    position:relative;
}
.aladdin-logo .lamp{
    width:100%;
    left:-3px;
    top:0;
    bottom:0;
    margin:auto 0;
    z-index:1;
    animation:lgLampAnim 10s ease infinite;
}
@keyframes lgLampAnim{
    0%{opacity:0;transform:rotate(0deg);}
    2%{transform:rotate(0deg);}
    4%{transform:rotate(10deg);}
    6%{transform:rotate(-10deg);}
    8%{transform:rotate(5deg);}
    10%{transform:rotate(-5deg);}
    12%{opacity:1;transform:rotate(0deg);}
    95%{opacity:1;transform:rotate(0deg);}
    100%{opacity:0;transform:rotate(0deg);}
}
.aladdin-logo .flash-kr{
    width:44.16%;
    right:10%;
    top:0;
    bottom:3%;
    margin:auto 0;
    z-index:1;
    transform-origin:center left;
    animation:lgAladdinKrAnim 10s ease infinite;
}
@keyframes lgAladdinKrAnim{
    0%{opacity:0;transform:scale(0);}
    10%{opacity:0;transform:scale(0);}
    20%{opacity:1;transform:scale(1);}
    95%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(1);}
}
.aladdin-logo .flash-en{
    width:33.34%;
    right:18%;
    bottom:10%;
    z-index:1;
    animation:lgAladdinEnAnim 10s ease infinite;
}
@keyframes lgAladdinEnAnim{
    0%{opacity:0;transform:translateY(-50%);}
    15%{opacity:0;transform:translateY(-50%);}
    25%{opacity:1;transform:translateY(0);}
    95%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}

/* Before After Login */

.bal-container{
	margin-top:-20px;
	text-align:right;
	width:80%;
	height:100px;
}
.bal-container .mobile{
    display:none;
}
.bal-container .desktop{
    display:block;
	width:100%;
	text-align:right;
	height:40px;
}

.before-login{
    display:none;
}
.before-login.active{
    display: inline-block;
	float: right;
	text-align:right;
}
.before-login input{
    width:174px;
    height:40px;
    background-color:#000000;
    border-radius:20px;
    border:solid 2px #7b7b7b;
    margin:0 2px;
    padding:0 12px;
    float:left;
    color:#000;
    font-size:12px;
}
.before-login input::-webkit-input-placeholder{
    color:#cc8801;
    font-size:12px;
}
.before-login .desktop button{
    width:90px;
    height:20px;
    background-color:#f1a715;
    border:none;
    border-radius:10px;
    margin:1px 2px;
    color:#000000;
    font-size:12px;
    position:relative;
    z-index:1;
    overflow:hidden;
    transition:0.3s;
}
.before-login .desktop button:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:-20%;
    background-color:rgba(249,249,249,0.12);
    transform-origin:bottom left;
    transform:rotate(-20deg);
    z-index:-1;
    pointer-events:none;
}
.before-login .desktop button:hover{
    background-color:#ffffff;
}
.before-login .desktop .blue-bg{
    background-color:#f1a715;
    color:#010d01;
}
.before-login .desktop .blue-bg:hover{
    background-color:#ffffff;
}

/* After Login */

.after-login{
    display:none;
}
.after-login.active{
    display:block;
	float:right;
}
.after-login .desktop{
    width:800px;
    display:block;
}
.after-login .mobile{
    display:none;
}

.after-login p{
    margin:0;
}
.after-login .al-inner{
    width:100%;
    float:right;
}
.after-login .al-row{
    width:100%;
    height:auto;
    float:right;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    margin:3px 0;
}
.after-login .al-cont{
    width:calc(25% - 4px);
    height:30px;
    float:left;
    display:flex;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    background-color:transparent;
    border-radius:5px;
    overflow:hidden;
    background-image: linear-gradient(rgba(255,255,255,0.15),rgba(0,0,0,0.1));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 0 rgba(0,0,0,0.25);
    margin:0 2px;
}
.after-login .al-cont .labels{
    width:auto;
    min-width:35px;
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    padding:0 5px 0 8px;
    background-color:#44112a;
    border-left:solid 2px #c4538b;
    color:#f574b3;
    font-size:11px;
    border-radius:3px 0 0 3px;
}
.after-login .al-cont .labels:before {
    content: '';
    position: absolute;
    width: 20px;
    top: 0;
    right: -5px;
    bottom: 0;
    transform: skew(-10deg);
    background: #44112a;
    z-index: -1;
    pointer-events:none;
}
.after-login .al-cont .labels a{
    color:#f574b3;
    font-size:16px;
    text-decoration:none;
    transition:0.3s;
}
.after-login .al-cont .labels a:hover{
    color:#fff156;
}
.after-login .al-cont .labels i{
    font-size:14px;
}
.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:0 5px 0 15px;
}
.after-login .al-cont .info p{
    color:#fff;
    font-size:12px;
    white-space:nowrap;
}
.after-login .al-cont .info .symbol{
    color:#faa5ce;
}

/* Progressbar */

.after-login .al-cont.prog-b{
}
.after-login .al-cont.prog-b .info{
    width:100%;
}
.progressbar{
    width:100%;
    height:16px;
    overflow:hidden;
    position:relative;
    background-color:#320b1e;
    border:solid 1px #320b1e;
    border-radius:3px;
}
.progressbar .percent{
    width:0%;
    height:100%;
    float:left;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#f55fa9;
}
.after-login .al-cont .progressbar .percent p{
    color:#320b1e;
    font-size:10px;
    position:relative;
    z-index:1;
}
.after-login .al-cont .message-btn{
    background-color:transparent;
    border:none;
    color:#fff;
    font-size:12px;
}
.mess-count{
    color:#6defff;
    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}
}
.after-login .btn-group{
    padding:4px 2px;
}
.after-login .btn-group button{
    width:calc(50% - 4px);
    height:100%;
    margin:0 2px;
    float:left;
    background-color:#fdb73c;
    border:none;
    border-radius:2px;
    color:#010d01;
    font-size:12px;
    transition:0.3s;
}
.after-login .btn-group button:hover{
    background-color:#e4db2c;
    color:#000;
}
.after-login .btn-group .gray-bg{
    background-color: #1dbdd0;
}
.after-login .btn-group .gray-bg:hover{
    background-color: #40d780;
}

/* Banner Section */


@media(max-width:1920px){
    .banner-section{
        background-size:initial;
    }
}
.banner-section:before,
.banner-section:after{
    content:'';
    width:100%;
    background-color:#000000;
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
}
.banner-section:after{
    background-color:#000000;
    bottom:5px;
    box-shadow:none;
}
.banner-section .container{
    height:100%;
    position:relative;
}
.banner-carousel{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.banner-carousel .carousel-inner{
    width:calc(100% - 644px);
    margin-right:auto;
    overflow:visible;
}
.banner-carousel .text-container{
    display:inline-block;
    float:right;
    text-align:left;
    position:relative;
    z-index:1;
    animation:jackInTheBox 1s ease 1;
}
@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.banner-carousel .text-container p{
    color:#ffffff;
    font-size:20px;
    text-shadow:0 2px 1px #000000;
    margin:0;
}
.banner-carousel .text-container h1{
    color:#ffffff;
    font-size:55px;
    font-family:SCDream8;
    text-shadow:0 2px 1px #000000;
    margin:0;
}
.banner-carousel .text-container h2{
    color:#f1a715;
    font-size:50px;
    font-family:SCDream8;
    margin:0;
    background:-webkit-linear-gradient(#f1a715,#d09416);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:relative;
}
.banner-carousel .text-container .yellow{
    background:-webkit-linear-gradient(#f0cf48,#ff7c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:relative;
}
.banner-carousel .text-container h2:after{
    content:attr(data-text);
    background:none;
    left:0;
    top:0;
    position: absolute;
    z-index:-1;
    text-shadow:0 4px 1px #000000;
}
.banner-carousel .carousel-indicators{
    width:100%;
    max-width:1048px;
    height:50px;
    background-image:url(../img/bg/indicator-bg.png);
    background-position:center;
    background-size:cover;
    left:0;
    right:0;
    bottom:-50px;
    margin:0 auto 0;
    padding:12px 0 0;
}
.banner-carousel .carousel-indicators li{
    width:14px;
    height:14px;
    background-color: #d4d2d3;
    border-radius:50%;
    border:none;
    opacity:1;
    margin:0 4px;
}
.banner-carousel .carousel-indicators .active{
    background-color: #f1a715;
}

/* Board Section */

.board-section{
    width:640px;
    height:100%;
    float:right;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    z-index:2;
    padding:2px 5px 12px 0;
}
.board-mobile{
    width:100%;
    height:auto;
    align-items:flex-start;
    justify-content:center;
    padding:0;
    float:none;
    margin:30px 0 0;
    display:none;
}
.board-mobile:before,
.board-mobile:after{
    display:none;
}
.board-section:before,
.board-section:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    background-color:rgba(0,0,0,0.75);
    transform:skew(-24deg);
    transform-origin:bottom left;
    pointer-events:none;
    z-index:-1;
}
.board-section:after{
    width:100%;
    right:-100%;
}
.board-pane{
    width:499px;
    height:220px;
    float:right;
    background-image:url(../img/bg/notice-bg.png);
    padding:0 0 0 75px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    filter:drop-shadow(0 5px 5px #000);
}
.board-mobile .board-pane{
    width:460px;
    height:232px;
    background-image:linear-gradient(#201e1b,#060501);
    border:solid 1px #2f2f2e;
    box-shadow:0 5px 5px #000;
    border-radius:10px;
    margin:10px 10px;
    padding:0;
    filter:none;
    order:2;
}
.board-pane.rolling-board{
    width:595px;
    height:209px;
    float:right;
    background-image:url(../img/bg/board-bg.png?v=5);
    padding:0 0 0 140px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    order:1;
}
.board-mobile .board-pane.rolling-board{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    height:auto;
    background-image:none;
    padding:0;
    box-shadow:none;
    border:none;
    margin:0;
}
.board-pane .board-pane-inner{
    width:100%;
    max-width:390px;
    margin:0 auto;
}
.board-pane .header{
    width:100%;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:solid 1px #333333;
    padding:0 10px;
}
.board-pane .header .title{
    color:#f1a715;
    font-size:18px;
    font-family:SCDream6;
    font-style:italic;
    text-shadow:0 1px 1px #000000;
}
.board-pane .header .more-link{
    color:#cccccc;
    font-size:11px;
}
.board-pane .content{
    width:100%;
    margin:15px 0 0;
}
.board-pane table{
    width:100%;
}
.board-pane table td{
    height:30px;
    color:#fff;
    font-size:12px;
}
.board-pane table td a{
    color:#fff;
    font-size:12px;
    display:inline-block;
    max-width:300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-pane table td a:hover{
    color:#525252;
}
.board-pane table .date-td{
    color:#999999;
}

.board-pane .popular-games{
    width:calc(46% - 12px);
    position:relative;
    z-index:1;
    float:left;
}
.board-mobile .board-pane .popular-games{
    width:calc(36% - 20px);
    background-image:linear-gradient(#201e1b,#060501);
    border:solid 1px #2f2f2e;
    box-shadow:0 5px 5px #000;
    border-radius:10px;
    margin:10px 10px;
    padding:15px;
    order:2;
}
.board-pane .popular-games .header{
    height:40px;
    justify-content:center;
    border-bottom:none;
}
.board-mobile .board-pane .popular-games .header{
    border-bottom:solid 1px #333333;
}
.board-pane .popular-games .content{
    padding:5px 0 0;
}
.popular-games ul{
    width:100%;
    display:table;
    padding:0;
    list-style:none;
}
.popular-games ul li {
    display:table-row;
    height:28px;
    cursor:pointer;
    transition:0.3s;
    list-style:none;
}
.popular-games ul li .td {
    display:table-cell;
    text-align:left;
    vertical-align:middle;
    list-style:none;
}
.popular-games ul li .td a{
    display:inline-block;
    max-width:98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#f4f4f4;
    font-size:12px;
}
.popular-games ul li .td a:hover{
    color:#525252;
}

.popular-games ul li .winner-td{
    width:46%;
    padding:0 2px 0 19px;
    position:relative;
}
.popular-games ul li .winner-td:after{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    top:0;
    bottom:0;
    left:5px;
    margin:auto 0;
    border-radius:50%;
    background-color:#ffdf4e;
    box-shadow:0 0 7px rgba(248,211,103,0.75);
    animation:winTdDecoAnim 0.5s ease infinite;
}

/* Big Win */

.board-pane .big-win{
    width:calc(50% - 12px);
    position:relative;
    float:left;
    z-index:1;
    padding:0 10px;
    margin-left:14px;
}
.board-mobile .board-pane .big-win{
    width:calc(64% - 20px);
    background-image:linear-gradient(#201e1b,#060501);
    border:solid 1px #2f2f2e;
    box-shadow:0 5px 5px #000;
    border-radius:10px;
    padding:15px;
    margin:10px 10px;
    order:1;
}
.board-pane .big-win .header{
    height: 40px;
    justify-content: center;
    border-bottom: none;
}
.board-pane .big-win .header .title{
    color:#f1a715;
    font-size: 18px;
    font-family: SCDream6;
    font-style: italic;
    text-shadow:0 1px 1px #000;
}
.board-pane .big-win .header .title img{
    animation:bigWinHeadAnim 1.5s linear infinite;
    display:inline-block;
    vertical-align:middle;
    position:relative;
    z-index:2;
    margin-right:-13px;
}
.board-mobile .board-pane .big-win .header .title img{
    animation:none;
}
@keyframes bigWinHeadAnim{
    0%{transform:translateY(0);}
    50%{transform:translateY(-3px);}
    100%{transform:translateY(0);}
}
.board-pane .big-win .header .title .thin{
    font-family:SCDream6;
}
.big-win ul{
    width:100%;
    display:table;
    padding:0;
    list-style:none;
}
.big-win ul li {
    display:table-row;
    height:28px;
    cursor:pointer;
    transition:0.3s;
    list-style:none;
}

.big-win ul li:hover{
    background-color:rgba(0,0,0,0.3);
}
.big-win ul li .td{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    color:#ffffff;
    font-size:12px;
    font-family:SCDream4;
    list-style:none;
}
.big-win ul li .winner-td{
    width:46%;
    padding:0 2px 0 19px;
    position:relative;
}
.big-win ul li .winner-td:after{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    top:0;
    bottom:0;
    left:5px;
    margin:auto 0;
    border-radius:50%;
    background-color:#ffdf4e;
    box-shadow:0 0 7px rgba(248,211,103,0.75);
    animation:winTdDecoAnim 0.5s ease infinite;
}
@keyframes winTdDecoAnim{
    0%{box-shadow:0 0 7px rgba(248,211,103,0.75);}
    50%{box-shadow:0 0 7px rgba(248,211,103,0);}
    100%{box-shadow:0 0 7px rgba(248,211,103,0.75);}
}
.big-win ul li .winner-td span{
    width:100%;
    display:inline-block;
    text-align:left;
    float:left;
}
.big-win ul li .win-info-td{
    width:54%;
    padding:0 6px 0 2px;
}
.big-win ul li .win-info-td span{
    width:100%;
    text-align:right;
    display:inline-block;
    float:right;
}
.big-win ul li .td .user{
    font-size:12px;
}
.big-win ul li .td .amount{
    color:#525252;
    font-size:12px;
    font-family:SCDream6;
}
.big-win ul li .td .date{
    color:#2a7add;
}

/* Page Content */

.page-content{
    padding:0;
}

/* SLot Section */
ul{
   list-style:none;
   padding:0;margin:0;
   }
  .list-inline {
    padding:0;margin:0;
}
li{
   list-style:none;
   padding:0;margin:0;
   }
.slot-section {
background-image:url(../img/bg/bg_main_1.jpg?v=4);
    background-position:top center;
    background-repeat:no-repeat;
	background-size: cover;
	padding-bottom:80px;
}
@media (min-width: 1200px){
    .slot-section .container {
        max-width:1440px;
    }
}
.slot-section .container{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
}
.slot-section2 {
background-image:url(../img/bg/bg_main_2.jpg?v=4);
    background-position:top center;
    background-repeat:no-repeat;
	background-size: cover;
	padding-bottom:80px;
}
@media (min-width: 1200px){
    .slot-section2 .container {
        max-width:1440px;
    }
}
.slot-section2 .container{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
}
.slot-btn{
    width:218px;
    display:inline-block;
    filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);
    margin:10px 8px;
}
.slot-btn .main-container{
    width:100%;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    background-color:#3c3c3c;
    padding:1px;
}
.slot-btn .inner{
    width:100%;
    position:relative;
    overflow:hidden;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}
.slot-btn .main-img{
    width:100%;
}
.slot-btn .footer{
    width:100%;
    position:absolute;
    left:0;
    bottom:-40px;
    padding:25px 15px 10px;
    z-index:1;
    transition:0.3s;
}
.slot-btn:hover .footer{
    bottom:0;
}
.slot-btn .footer:before,
.slot-btn .footer:after{
    content:'';
    width:150%;
    height:200%;
    position:absolute;
    right:0;
    top:0;
    background-color:rgba(0,0,0,0.8);
    transform:rotate(-13deg);
    transform-origin:top right;
    pointer-events:none;
    z-index:-1;
    transition:0.3s;
}
.slot-btn .footer:before{
    top:0;
    background-color:#525252;
    transform:rotate(-10deg);
    opacity:0;
}
.slot-btn:hover .footer:before{
    top:-10px;
    opacity:1;
    transition-delay:0.2s;
}
.slot-btn .footer:after{
    background-color:rgba(0,0,0,0.8);
}
.slot-btn:hover .footer:after{
    background-color:rgba(0,0,0,1);
}
.slot-btn .footer .icon-container{
    width:100%;
    height:30px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}
.slot-btn .footer .name{
    text-align:right;
    margin:5px 0 10px;
    padding:0 5px 0 0;
    color:#ffffff;
    font-size:13px;
}
.slot-btn .footer .play-btn{
    width:90%;
    height:27px;
    border-radius:3px;
    border:none;
    transform:scale(0);
    transition:0.3s;
    color:#fff;
    font-size:13px;
    background-color:#525252;
}
.slot-btn:hover .footer .play-btn{
    transform:scale(1);
    transition-delay:0.1s;
}
.slot-btn .footer .play-btn:hover{
    color:#fff;
    background-color:#95239e;
}

/* Footer Section */

.footer-section{
    background-color:#151515;
    border-top:solid 3px #2a2a29;
    padding:50px 0 30px;
}
.footer-section .company-logo{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}
.footer-section .company-logo img{
    margin:8px 5px;
    display:inline-block;
    vertical-align:middle;
}
.footer-section .copyright{
    margin:60px 0 0;
}
.footer-section .copyright span{
    color:#3f3d3d;
    font-size:10px;
}

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

.sn-overlay{
    content:'';
    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:26px;
    height:35px;
    float:left;
    background-color:transparent;
    border:none;
    z-index:1;
    float:left;
    padding:0;
    display:none;
}
.left-menu-btn span {
    display:block;
    width:100%;
    height:4px;
    background-color:#0e0007;
    margin:0 auto 5px;
}
.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:9px;
    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;
}
.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);
}
.bal-container .mobile button{
    width:30px;
    height:30px;
    background-color:#df6ca5;
    border:none;
    border-radius:3px;
    color:#000;
    font-size:14px;
    margin:0 3px;
    padding:0;
    float:left;
    text-align:center;
    position:relative;
}
.bal-container .mobile button:last-child{
    margin-right:0;
}
.bal-container .mobile button .fa-sign-in-alt{
    font-size:16px;
    top:1px;
    position:relative;
}

@media(max-width:1380px){
    .header-main {
        height:91px;
    }
    /*.apple-logo{
        width:180px; 
        right:40px;
    }*/

    .aladdin-logo{
        width:180px;
        right:40px;
    }

    .before-login input {
        width:150px;
    }
}
@media(max-width:1240px){
    .header-main {
        height:57px;
        border-top-width:2px;
    }
    .left-menu-btn{
        display:block;
    }
    /*.apple-logo{
        width:120px;
        right:0;
    }*/
    .aladdin-logo{
        width:120px;
        right:0;
    }
    .bal-container .mobile{
        display:block;
    }
    .before-login .desktop{
        display:none;
    }
    .before-login input {
        width:150px;
    }
    .sidebar-left{
        width:280px;
        height:100%;
        top:58px;
        left:-100%;
        background-color:#060501;
        border-right: solid 1px #202020;
        margin:0;
        padding:0 0 60px;
        display:block;
        overflow-y:auto;
        position:fixed;
        transition:0.5s;
		z-index: 9999;
    }
    .sidebar-left.active{
        left:0;
    }
    .sidebar-left::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .sidebar-left::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .sidebar-left .bs-ul{
        width:100%;
        height:auto;
        float:left;
        display:block;
    }
    .sidebar-left li{
        width:100%;
        float:left;
        display:block;
        padding:0;
    }
    .sidebar-left li a{
        width:100%;
        height:40px;
        float:left;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        border-top: solid 1px #242424;
        border-bottom: solid 1px #000;
        background-color: #141414;
        padding:0 15px;
    }
    .sidebar-left li a p {
        color: #fff;
        margin-right:10px;
    }
    .after-login .sidebar-right{
        width:280px;
        height:100%;
        top:58px;
        right:-100%;
        background-color:#060501;
        border-left: solid 1px #202020;
        margin:0;
        padding:0 0 60px;
        display:block;
        overflow-y:auto;
        position:fixed;
        transition:0.5s;
    }
    .sidebar-right.active{
        right:0;
    }
    .sidebar-right::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .sidebar-right::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .after-login .al-row {
        padding:0 5px;
        margin:0;
    }
    .after-login .al-cont {
        width:100%;
        height:35px;
        margin:4px 0;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 0 rgba(255,255,255,0.15);
    }
    .after-login .btn-group{
        margin:10px 0 1px;
        padding:0;
        background-color:transparent;
        background-image:none;
    }
    .banner-section{
        margin:0;
        border-top:solid 1px #000;
        height:350px;
    }
    .banner-carousel .carousel-inner{
        width:100%;
    }
    .banner-carousel .text-container{
        float:none;
    }
    .banner-section .board-section{
        display:none;
    }
    .page-content {
        padding:55px 0 50px;
    }
    .board-mobile {
        display:flex;
    }
}
@media(max-width:767px){
    .slot-btn {
        width:calc(33.33% - 16px);
    }
}
@media(max-width:640px){
    .banner-section {
        background-size:contain;
        background-size:210%;
        height:240px;
    }
    .banner-carousel .text-container p{
        font-size:14px;
    }
    .banner-carousel .text-container h1{
        font-size:40px;
    }
    .banner-carousel .text-container h2{
        font-size:35px;
    }
    .banner-carousel .text-container h2:after{
        text-shadow:0 2px 1px #000000;
    }
    .board-mobile .board-pane{
        width:100%;
    }
    .board-mobile .board-pane .popular-games{
        margin: 10px 5px;
    }
    .board-mobile .board-pane .big-win{
        margin: 10px 5px;
    }
}
@media(max-width:500px){
    .page-content {
        padding:40px 0 50px;
    }
    .banner-section {
        height:160px;
        padding:0 0 10px;
    }
    .banner-carousel .text-container p{
        font-size:14px;
    }
    .banner-carousel .text-container h1{
        font-size:30px;
    }
    .banner-carousel .text-container h2{
        font-size:25px;
    }
    .slot-btn {
        width:calc(50% - 16px);
    }
}
@media(max-width:400px){
    .board-mobile .board-pane{
        padding:0 10px;
    }
    .board-mobile .board-pane.rolling-board {
        flex-wrap:wrap;
    }
    .board-mobile .board-pane .popular-games{
        width:100%;
        margin: 10px 10px;
    }
    .board-mobile .board-pane .big-win{
        width:100%;
        margin: 10px 10px;
    }
}

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

.modal-backdrop{
}
.modal-backdrop.show {
}
.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:900px;
    margin:20px auto;
}
.modal-dialog.size-sm{
    max-width:600px;
}
.modal-dialog.size-lg{
    max-width:1024px;
}
.modal-dialog.size-xl{
    max-width:1200px;
}
.modal-content{
    border:none;
    background-color:#000000;
    background-image:linear-gradient(#000000,#82194c);
    border-radius:10px;
    border:solid 1px #3e0025;
    box-shadow:0 5px 10px rgba(0,0,0,0.5);
    padding:8px;
    z-index:1;
}
.modal-content .close-btn{
    width:100px;
    height:30px;
    position:absolute;
    right:20px;
    top:-12px;
    border-radius:10px;
    background-color:#202020;
    border:solid 2px #000000;
    z-index:2;
    color:#fff;
    transition:0.3s;
    box-shadow:inset 0 3px 0 rgba(0,0,0,0.2),
                inset 0 -2px 0 rgba(0,0,0,0.2),
                0 1px 0 rgba(0,0,0,0.5);
}
.modal-content .close-btn:hover{
    background-color:#571636;
}

/* Modal Pane */

.modal-content .modal-pane{
    background-color:#0a0a0a;
    border-radius:8px;
    border:solid 1px #3e0025;
    box-shadow:0 -2px 0 rgba(0,0,0,0.4);
    overflow:hidden;
    position:relative;
    padding:0 0 0 200px;
    z-index:1;
}
.size-sm .modal-content .modal-pane{
    padding:0;
}
.modal-content .modal-pane:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-image:url(../img/bg/bg_shape.png);
    background-size:cover;
    pointer-events:none;
    filter:blur(4px);
    z-index:-1;
}
.modal-menu{
    width:200px;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    box-shadow:2px 0 10px rgba(0,0,0,0.25);
    padding:3px;
    z-index:1;
}
.modal-menu:before{
    content:'';
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    background-image:url(../img/bg/left-stripes.png);
    background-position:left top;
    pointer-events:none;
    opacity:0.4;
    z-index:-1;
}
/*.modal-menu .apple-logo{
    width:calc(100% + 6px);
    position:relative;
    margin:-3px 0 15px -3px;
    background-color:#6a2748;
}
.modal-menu .apple-logo img{
    animation:none;
}
.modal-menu .apple-logo .pane{
    opacity:0;
}*/

.modal-menu .aladdin-logo{
    width:calc(100% + 6px);
    position:relative;
    margin:-3px 0 15px -3px;
    background-color:#6a2748;
}
.modal-menu .aladdin-logo img{
    animation:none;
}
.modal-menu .aladdin-logo .pane{
    opacity:0;
}

.modal-menu .game-logo{
    width:calc(100% + 6px);
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin:-3px 0 15px -3px;
    background-color:#6a2748;
}
.modal-menu button{
    width:100%;
    height:50px;
    background-color:transparent;
    border:none;
    position:relative;
    z-index:1;
    color:#ffff;
    margin:0 0 3px;
    text-align:left;
    transition:0.3s;
}
.modal-menu button:hover{
    color:#ff75b9;
}
.modal-menu .active:hover{
    color:#fff;
}
.modal-menu button:before,
.modal-menu button:after{
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/bg/modal-menu.png);
    background-repeat:no-repeat;
    background-position:bottom left;
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    z-index:-1;
    transition:0.3s;
    pointer-events:none;
}
.modal-menu button:after{
    background-position:top left;
}
.modal-menu .active:before,
.modal-menu .active:after{
    opacity:1;
}
.modal-menu button .icon-container{
    width:40px;
    height:26px;
    background-color:#000000;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    float:left;
    margin:0 15px 0;
    border-radius:3px;
    color:#fff;
}
.modal-menu button .text-container{
    min-width:70px;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
}

/* Modal Nav */

.modal-nav{
    width:100%;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top:solid 1px rgba(0,0,0,0.1);
    border-bottom:solid 1px rgba(255,255,255,0.05);
    padding:10px 5px;
}
.modal-nav button{
    width:110px;
    color:#a6a6a7;
    font-size:12px;
    border:none;
    background-color:transparent;
    transition:0.3s;
    padding:0;
    margin:0 2px 0;
    position:relative;
    z-index:0;
}
.modal-nav button:first-child{
    margin-left:0;
}
.modal-nav button:last-child{
    margin-right:0;
}
.my-page-nav button{
    width:16.66%;
    font-size:12px;
}
.modal-nav button:hover{
    color:#000000;
}
.modal-nav button.active{
    color:#000000;
    z-index:2;
}
.modal-nav button.active:hover{
    color:#000000;
}
.modal-nav button i{
    font-size:20px;
    margin:0 0 10px;
}
.modal-nav button span{
    display:block;
}
.modal-nav button.active i{
    color: #000000;
}

/* Moda Header */

.modal-header{
    height:50px;
    background-color:rgba(255,255,255,0.04);
    border-bottom:solid 1px rgba(255,255,255,0.1);
    border-radius:0;
    justify-content:center;
    align-items:center;
    padding:0;
}
.modal-header h6{
    color:#c8b0db;
    font-family:SCDream6;
    margin:0;
}
.modal-header h6 .fa-apple{
    font-size:24px;
}
.modal-body{
    min-height:500px;
    background-color:rgba(0,0,0,0.1);
    border-top:solid 1px rgba(0,0,0,0.1);
    padding:20px 15px;
    position:relative;
    z-index:1;
}
.size-sm .modal-body{
    min-height:auto;
}
.modal-pane:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50%;
    margin: 0 auto;
    z-index:-1;
    background-image: radial-gradient(closest-side at 50% 50%,rgba(67,18,42,0.4),rgba(131,176,83,0));
    opacity:1;
}
.modal-body .modal-body-inner{
    width:90%;
    margin:0 auto;
}

/* Form Container */

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

/* Deposit Ask */

.deposit-ask{
    width:100%;
    min-height:60px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border-top: solid 1px rgba(0,0,0,0.1);
    border-bottom: solid 1px rgba(255,255,255,0.05);
    padding: 10px 15px;
}
.deposit-ask button{
    width:140px;
    height:35px;
    border-radius:2px;
    border:none;
    background-color:#56495f;
    color:#fff;
    font-size:12px;
    float:left;
    transition:0.3s;
}
.deposit-ask button:hover{
    background-color:#9a78b5;
}
.deposit-ask span{
    color:#a6a6a7;
    font-size:12px;
    float:left;
    margin-left:15px;
}

/* Form Group */
.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;
    margin:0 0 8px;
    padding:0 5px;
    color:#ffffff;
    font-size:13px;
}
.form-container .labels p{
    margin:0;
}
.form-container .infos{
    width:100%;
    float:left;
}
.form-container .form-group input{
    width:100%;
    height: 40px;
    float: left;
    background-color:#d2afc0;
    border:none;
    border-radius:3px;
    color: #000;
    padding:0 10px;
}
.form-container .form-group .readonly{
    color: #410020;
    font-size:16px;
    font-family:SCDream6;
}
.form-container .form-group input::-webkit-input-placeholder{
    color:#17060e;
}
.form-container .w-btn input{
    width:calc(100% - 145px);
    border-radius:3px 0 0 3px;
}
.joinModal .form-container .w-btn input{
    width:calc(100% - 105px);
}
.form-container .form-group select {
    width:100%;
    height: 40px;
    float: left;
    background-color:#d2afc0;
    border:none;
    border-radius:3px;
    color: #000;
    padding:0 10px;
}
.form-container .form-group select option{
    color: #17060e;
}
.form-container .form-group textarea {
    width:100%;
    height:200px;
    float:left;
    padding:10px;
    background-color:#d2afc0;
    border:none;
    border-radius:3px;
    color:#cdc3fb;
    resize:none;
}
.form-container .form-group textarea::-webkit-input-placeholder{
    color:#17060e;
}
.form-container .form-group.w-btn button{
    width:140px;
    height:40px;
    border: none;
    float:right;
    padding: 0;
    white-space: nowrap;
    border-radius:3px;
    background-color: #a75b9d;
    color: #fff;
    position:relative;
    transition: 0.3s;
}
.joinModal .form-container .form-group.w-btn button{
    width:100px;
}
.form-container .form-group.w-btn button:hover{
    background-color:#f75ae2;
}
.form-container .form-group .rem-text{
    width:100%;
    float:left;
    text-align:left;
    color:#826d7e;
    font-size:12px;
    margin:8px 0 0;
}

/* 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:#5f4754;
    border:none;
    color: #fff;
    font-size: 12px;
    transition: 0.3s;
    padding: 0;
    border-radius:2px;
}
.form-container .form-group .infos .btn-grp button:hover {
    background-color: #b57a9a;
}
.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:#ff344d;
    color:#fff;
}
.form-container .form-group .infos .btn-grp button:last-child:hover {
    background-color:#c94242;
}

/* -- MODAL FOOTER -- */

.modal-footer{
    width:100%;
    border:none;
    justify-content:center;
    flex-wrap:nowrap;
    padding:15px 0 30px;
}
.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:5px;
    margin:0 4px;
    color:#ff92c8;
    font-size:13px;
    position:relative;
    z-index:1;
    overflow:hidden;
    background-color: transparent;
    background-image: linear-gradient(rgba(255,255,255,0.1),rgba(0,0,0,0));
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.75),0 2px 0 rgba(0,0,0,0.75);
    border: solid 1px #62495e;
    text-shadow:0 2px 0 rgba(0,0,0,1);
    transition:0.3s;
}
.modal-footer .btn-grp button:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    background-image: linear-gradient(rgba(255,255,255,0.1),rgba(0,0,0,0));
    transition:0.3s;
    opacity:0;
}
.modal-footer .btn-grp button:hover:before{
    opacity:1;
}
.modal-footer .btn-grp button:hover{
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.5),0 2px 0 rgba(0,0,0,0.75);
    border: solid 1px #a783a1;
}
.modal-footer .btn-grp .gray-text{
    color:#ccc;
}
.modal-footer .btn-grp .blue-text{
    color:#4de8fb;
}
.modal-footer .btn-grp.one-btn button{
    width:100%;
    max-width:200px;
}

/* -- BS Table -- */

.bs-table{
    width:100%;
    float:left;
}
.bs-table thead{
    background-image:url(../img/bg/table-head.png);
    background-size:cover;
}
.bs-table thead th{
    height:40px;
    color:#808080;
    font-size:12px;
    text-align:center;
}
.bs-table tr td{
    height:40px;
    color:#fff;
    font-size:12px;
    text-align:center;
    padding:1px;
    transition:0.3s;
    background-color:rgba(154, 40, 96, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 -1px rgba(255, 255, 255, 0.04);
}
.bs-table tr:hover td{
    background-color:rgba(154, 40, 96, 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:#ff2ae1;
}
.bs-table tr:hover td a{
    color:#000000;
}
.bs-table tr.active td.title{
    color:#ff6dea;
}
.bs-table tr.active td a{
    color:#ff6dea;
}
.new-icon {
    width: 14px;
    height: 14px;
    background-color: #5cceff;
    border-radius:3px;
    border:none;
    display: inline-block;
    color: #000;
    font-size: 8px;
    text-align:center;
    vertical-align: middle;
    margin: 0 0 0 8px;
    padding: 2px 0 0 0;
}

/* Message Content */

.message-content{
    width: 100%;
    height: 300px;
    float: left;
    background-color:rgba(154, 40, 96, 0.1);
    border:1px solid rgba(255, 255, 255, 0.05);
    margin:5px 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;
}
.message-content .inner-container::-webkit-scrollbar {
    width:8px;
    border-radius:8px;
    background:#14090f;
}
.message-content .inner-container::-webkit-scrollbar-thumb{
    background: #301c28;
    border-radius:8px;
    border:solid 1px #14090f;
}

/* 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:#fff;
    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:rgba(255,255,255,0.1);
    border:solid 1px #7b7b7b;
    color:#fff;
}
.pagination .active{
    color:#fff;
    background-color:#ff344d;
    border:solid 1px #ff344d;
}
.pagination .active:hover{
    color:#fff;
    background-color:#ff344d;
    border:solid 1px #ff344d;
}

/* Mypage Tabs */

.myPageModal .tab-mdl{
    min-height:600px;
}
.my-page-tabs{
    width:100%;
    float:left;
}
.my-page-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);}
}
.my-page-tabs .mp-tab.active{
    display:block
}
.level-information{
    width:100%;
    height:80px;
    float:left;
    position:relative;
    border-radius:5px;
    margin-bottom:10px;
    background-color:rgba(12,12,12,0.4);
}
.level-information:before,
.level-information:after{
    content:'';
    width:100%;
    height:3px;
    border-top:solid 1px #351927;
    border-bottom:solid 1px #351927;
    position:absolute;
    left:0;
}
.level-information:before{
    top:0;
}
.level-information:after{
    bottom:0;
}
.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:37px;
    border-radius:1px;
    padding:0 5px;
    color:#fff;
    font-size:12px;
    background-color:#0d0b0b;
    border:solid 1px #372832;
    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:#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 */

.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;
    background-color:rgba(154, 40, 96, 0.05);
}
.bs-table tr.dropdown .mess-cont{
    width:100%;
    float:left;
    display:none;
    background-color:rgba(154, 40, 96, 0);
    border:1px solid rgba(255, 255, 255, 0.07);
    text-align:left;
    padding:10px;
    color:#fff;
    font-size:12px;
    position:relative;
    margin:0 0 2px;
    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;
    border-radius:8px;
    background:#14090f;
}
.bs-table tr.dropdown .mess-cont .scroll::-webkit-scrollbar-thumb{
    background: #301c28;
    border-radius:8px;
    border:solid 1px #14090f;
}
.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 #442c3e;
    border-radius: 50%;
    transition: 0.3s;
    color: #926d7f;
    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:#926d7f;
    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);
}

/* Game Btn */

.game-list-container{
    width:100%;
}
.game-list-container .scroll-container{
    width:100%;
    height:580px;
    overflow-y:scroll;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
}
.game-list-container .scroll-container::-webkit-scrollbar {
    width:8px;
    border-radius:8px;
    background:#14090f;
}
.game-list-container .scroll-container::-webkit-scrollbar-thumb{
    background: #301c28;
    border-radius:8px;
    border:solid 1px #14090f;
}
.game-btn{
    width:20%;
    width:calc(20% - 20px);
    display:inline-block;
    float:left;
    margin:15px 10px;
    text-decoration:none;
    background-color:#000;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    border:solid 1px #ce9db4;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    transition:0.3s;
}
.game-btn:hover{
    border:solid 1px #000000;
}
.game-btn .main-cont{
    width:100%;
    position:relative;
}
.game-btn .main-cont .main-img{
    width:100%;
    height:100%;
}
.game-btn .name-cont{
    width:100%;
    float:left;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 10px 0 5px;
}
.game-btn .name-cont:before{
    content:'';
    width:150%;
    height:calc(100% + 15px);
    position:absolute;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.6);
    transform:rotate(-10deg);
    transform-origin:top right;
    z-index:-1;
    transition:0.3s;
}
.game-btn:hover .name-cont:before{
    background-color:rgba(0,0,0,1);
}
.game-btn .name-cont p{
    color:#fff;
    font-size:13px;
    margin:0;
    white-space:nowrap;
    transition:0.3s;
}
.game-btn:hover .name-cont p{
    color:#ce9db4;
}
.game-btn .play-btn{
    width:100%;
    height:40px;
    border:none;
    background-color:transparent;
    text-align:left;
    color:#fff;
    font-size:12px;
    z-index:2;
    opacity:0;
    padding:0;
    transition:0.4s;
    position:absolute;
    top:0;
    left:0;
    padding:0 0 8px;
}
.game-btn .play-btn i{
    margin-left:3px;
    font-size:14px;
    color:#f1a715;
}
.game-btn .play-btn:before{
    content:'';
    width:150%;
    height:calc(100% + 15px);
    position:absolute;
    right:0;
    top:-100%;
    background-color:rgba(0,0,0,0.6);
    transform:rotate(-10deg);
    transform-origin:bottom left;
    z-index:-1;
    transition:0.3s;
}
.game-btn:hover .play-btn{
    opacity:1;
    padding:0 10px 8px;
}
.game-btn:hover .play-btn:before{
    top:0;
}
.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%;
}
@media(max-width:1100px){
    .game-btn {
        width: calc(25% - 16px);
        margin: 10px 8px;
    }
}
@media(max-width:1024px){
    .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%;
    }
    .level-information .points-btn{
        width:40%;
        position:relative;
        right:0;
        font-size:8px;
    }
    .level-information .points-btn:hover{ 
        background-color:#86e8df;
    }
}
@media(max-width:880px){
    .game-btn {
        width: calc(33.33% - 16px);
    }
}
@media(max-width:767px){
    .modal-content{
        padding:4px;
    }
    .modal-content .modal-pane{
        display:flex;
        align-items:flex-start;
        justify-content:center;
        flex-wrap:wrap;
        padding:0;
    }
    .modal-menu{
        width:100%;
        height:auto;
        display:flex;
        position:relative;
        order:2;
    }
    .modal-menu button{
        text-align:center;
    }
    .modal-menu button .icon-container {
        width: 50px;
        height: 30px;
        margin: 0 auto;
        float:none;
    }
    .modal-menu button .text-container {
        display:none;
    }
    /*.modal-menu .apple-logo {
        display:none;
    }*/

    .modal-menu .aladdin-logo {
        display:none;
    }

    .gameListModal .modal-menu{
        flex-wrap:wrap;
    }
    .modal-menu .game-logo {
        width:100%;
        height:50px;
        margin:0;
    }
    .gameListModal .modal-menu button{
        width:calc(33.33% - 2px);
        height:35px;
        font-size:12px;
        margin:1px;
        background-color:#c26d97;
    }
    .gameListModal .modal-menu button:before,
    .gameListModal .modal-menu button:after{
        display:none;
    }
    .gameListModal .modal-menu button .icon-container {
        width:auto;
        background-color:transparent;
        height:auto;
        margin: 0;
        display:inline-block;
        float:none;
    }
    .gameListModal .modal-menu button .text-container {
        min-width:inherit;
        display:inline-block;
    }
    .game-list-container .scroll-container{
        height: auto;
        overflow-y:auto;
    }
    .game-btn {
        width: calc(25% - 16px);
    }
    .modal-header{
        width:100%;
        order:1;
    }
    .modal-body {
        order:4;
        padding:0;
    }
    .modal-body .modal-body-inner {
        width:100%;
        padding:20px 10px;
    }
    .deposit-ask{
        order:3;
    }
    .modal-nav{
        order:3;
    }
    .modal-nav button i{
        margin: 0 0 5px;
    }
    .modal-nav button{
        font-size:8px;
        white-space:nowrap;
        margin:0;
        width: 100%;
    }
    .slot-btn .main-container{
        clip-path:none;
        -webkit-clip-path:none;
        border-radius:5px;
    }
    .slot-btn .inner{
        clip-path:none;
        -webkit-clip-path:none;
        border-radius:3px;
    }
}
@media(max-width:500px){
    .modal-content .close-btn{
        width:80px;
        height:26px;
        right:5px;
    }
    .bs-table tr td a{
        max-width:170px;
    }
    .board-pane table td a{
        max-width:230px;
    }
    .bs-table tr td.date{
        font-size: 10px;
    }
    .new-icon {
        margin: 0;
    }
    .modal-footer .btn-grp button{
        width:100%;
    }
    .bs-table tr.depth-click .about{
        max-width:170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-btn {
        width: calc(33.33% - 16px);
    }
    .banner-carousel .carousel-indicators{
        padding: 15px 0 0;
    }
}
@media(max-width:400px){
    .deposit-ask span{
        font-size: 10px;
        margin-left:10px;
    }
    .game-btn {
        width: calc(50% - 16px);
    }
}

.custom2-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 900;
  font-style: normal;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
  outline: none;
  border: 1px solid #ba6;
}
.custom2-btn:active{
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

.custom3-btn {
  height: 40px;
  text-align:center;
  color: #000;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
  outline: none;
  border: 1px solid #ba6;
}
.custom3-btn:active{
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/* 1 */
.btn2-1{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(180deg,#fea 0%,#dc8 49%,#a95 51%,#dc8 100%);
  border-radius: 5px;
}

/* 2 */
.btn2-2{
  background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
  background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8  63%, #fea 87%, #a95);
}

/* 3 */
.btn2-3{
  background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea));
}

/* 4 */
.btn2-4{
   color: #fff;
 background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%),
    -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%),
    
    linear-gradient(180deg, #a95 0%, 
    #fea 47%, 
    #dc8 53%,
    #fea 100%);
  
}

/* 5 */
.btn2-5{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #7c7c7c;
  background: linear-gradient(180deg,#e6e6e6 0%,rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%,rgba(0, 0, 0, 0.25) 100%);
  border-radius: 5px;
}

/* 6 */
.btn2-6{
  border-color: #7c7c7c;
  background: linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
  background: -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25)  63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4));
}

/* 7 */
.btn2-7{
  border-color: #7c7c7c;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6));
}

/* 8 */
.btn2-8{
 border-color: #7c7c7c;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}

/* 9 */
.btn2-9{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #D9A3A9;
  background: linear-gradient(180deg,#FFE6E9 0%,#DDA6AE 49%, #B76E79 51%,#DDA6AE 100%);
  border-radius: 5px;
}

/* 10 */
.btn2-10{
  border-color: #D9A3A9;
  background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
  background: -webkit-linear-gradient(top,  #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9  63%, #FFE6E9 87%, #DDA6AE);
}

/* 11 */
.btn2-11{
  border-color: #D9A3A9;
  background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9));
}

/* 12 */
.btn2-12{
 border-color: #D9A3A9;
background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0)  3%, rgba(255, 230, 233,.1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(183, 110, 121,0) 0%, rgba(183, 110, 121,0)   2%, rgba(183, 110, 121, .2) 2.25%),
    -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0) .6%, rgba(255, 230, 233,.3) 1.1%),
    
    linear-gradient(180deg, #D9A3A9  0%, 
    rgba(255, 230, 233,1) 47%, 
    #D9A3A9 53%,
    rgba(255, 230, 233,.7)100%);
}


/* 13 */
.btn2-13{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #111;
  color: #555;
  background: linear-gradient(180deg,#555 0%,#222 49%, #000 51%,#222 100%);
  border-radius: 5px;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
}

/* 14 */
.btn2-14{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
  border-color: #111;
  color: #555;
  background: -webkit-linear-gradient(top,  #000, #222 15%, #333 28%, #000  63%, #2f2f2f 87%, #000);
}

/* 15 */
.btn2-15{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,0.3);
  border-color: #111;
  color: #555;
  text-shadow: -1px -1px 1px rgba(0,0,0,1);
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
}

/* 16 */
.btn2-16{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
 border-color: #111;
  color: #555;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,0%)  0%, 
    hsl(0,0%,10%) 47%, 
    hsl(0,0%,0%) 53%,
    hsl(0,0%,10%)100%);
}