@font-face {
	font-family:SCDream4;
	src:url(../fonts/SCDream4.otf);
}
@font-face {
	font-family:SCDream5;
	src:url(../fonts/SCDream5.otf);
}
@font-face {
	font-family:SCDream6;
	src:url(../fonts/SCDream6.otf);
}
@font-face {
	font-family:SCDream8;
	src:url(../fonts/SCDream8.otf);
}
html{
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll !important;
}
body{
	height:100%;
	padding-right: 0 !important; 
	text-align:center;
	background-color:#0c0906;
	color:#fff;
	font-size:13px;
	font-family:"SCDream4", Arial, sans-serif;
}
body.active{
	overflow:hidden;
}
button{
	cursor:pointer;
}
button,input,select,textarea{
	outline:none !important;
}
.wrapper{
	width:100%;
	float:left;
	position:relative;
	overflow-x:hidden;
	z-index:1;
}
.wrapper.affix{
	padding-top:70px;
}
.bs-ul{
	list-style:none;
	margin-bottom:0;
	width:auto;
	display:table;
	height:100%;
	padding:0;
}
.bs-ul li{
	list-style:none;
	width:auto;
	height:auto;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position:relative;
}

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

/* Header Main */

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

/* -- KK LOGO -- */

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

@media (max-width:600px){
	.kk-logo .k{
		top:10px;
	}

	.kk-logo .fruits{
		bottom:-18px;
	}	
}






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

/* -- BEFORE AFTER LOGIN -- */

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

/* After Login */

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

/* Progressbar */

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




/* -- BANNER SECTION -- */

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

/* -- BANNER CAROUSEL -- */

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

/* -- JACKPOT CONTAINER -- */

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

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

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

/* -- PAGE CONTENT -- */

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

/* -- FOOTER MAIN -- */

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

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

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

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

/* -- Modal Header -- */

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

/* -- Modal Body -- */

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

/* Modal Menu */

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

/* Deposit Ask */

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

/* Form Container */

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

/* Form Btn Group */

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

/* -- MODAL FOOTER -- */

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

/* -- BS Table -- */

.bs-table{
	width:100%;
	float:left;
}
.bs-table thead{
	background-color:rgba(255,255,255,0.15);
}
.bs-table thead th{
	height:40px;
	color:#fff;
	text-align:center;
}
.bs-table thead th:first-child{
	border-radius:5px 0 0 5px;
}
.bs-table thead th:last-child{
	border-radius:0 5px 5px 0;
}
.bs-table thead.one-child th:first-child{
	border-radius:5px;
}
.bs-table thead.one-child th:last-child{
	border-radius:5px;
}
.bs-table tr td{
	height:40px;
	color:#fff;
	font-size:12px;
	text-align:center;
	padding:1px;
	transition:0.3s;
	border-bottom:solid 1px rgba(255,255,255,0.05);
}
.bs-table tr:hover td{
	background-color:rgba(0,0,0,0.25);
}
.bs-table tr td.count{
	width:10%;
}
.bs-table tr td.title{
	text-align:left;
	padding:0 10px;
	cursor:pointer;
}
.bs-table tr td.date{
	width:20%;
	font-size:12px;
}
.bs-table tr td.red{
	color: #fff960;
}
.bs-table td .level-txt{
	display:inline-block;
	width:45px;
	text-align:left;
}
.bs-table tr td a{
	color:#fff;
	font-size:12px;
	transition:0.3s;
	display:inline-block;
	vertical-align:middle;
	max-width:90%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.bs-table tr td a:hover{
	color:#ffb23f;
}
.new-icon{
	width:30px;
	height:15px;
	border-radius:2px;
	border:none;
	color:#000;
	font-size:8px;
	background-color:#6ce822;
	display:inline-block;
	vertical-align:middle;
	padding:2px 0 0 0;
	margin-left:5px;
	position:relative;
	top:-1px;
}

/* Notice */

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

/* Pagination */

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

/* Modal Menu */

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

/* Gamelist Modal */

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

/* Mypage Tabs */

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

/* With Depth */

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

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

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

@media (max-width:1360px){
	.header-main{
		height:90px;
		background-image:linear-gradient(to right,#101010,#101010,#4b4b4c,#101010,#101010);
		border-top:5px solid #20201f;
		border-bottom:5px solid #101010;
		box-shadow:inset 0 3px 0 #121213;
		overflow:visible;
		box-shadow:0 1px 0 rgba(255,255,255,0.1);
	}
	.header-main:before,
	.header-main:after{
		content:'';
		width:100%;
		height:1px;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		margin:auto 0;
		z-index:-1;
	}
	.header-main:before{
		background-image:linear-gradient(to right,#090808,#2b2a2a,#090808);
		top:-1px;
	}
	.header-main:after{
		background-image:linear-gradient(to right,#0b0b0b,#3b3b3b,#0b0b0b);
		top:1px;
	}
	.header-main .container{
		height:100%;
		margin-top:0;
	}
	.kk-logo{
		width:150px;
	}
}
@media (max-width:1100px){
	.banner-container {
		justify-content:center;
	}
	.banner-carousel{
		max-width:initial;
		margin:25px auto 50px;    
	}
	.jackpot-container{
		width:100%;
		margin: 10px auto;
		max-width:initial;
	}
	.jackpot-container .amount {
		margin:-1% 0 0;
	}
	.page-content{
		margin: -70px 0 0;
	}
	.footer-main .company-logo {
		border-top:solid 1px #373333;
		background-color:#0000;
		background-image:url(../img/bg/footer-bg-mob.png);
		background-repeat:no-repeat;
		background-position:top center;
		background-size:contain;
		padding:11px 0 60px;
	}
	.footer-main .company-logo:before,
	.footer-main .company-logo:after{
		display:none;
	}
	.footer-main:before, 
	.footer-main:after{
		display:none;
	}
}
@media (max-width:1080px){
	.header-main{
		height:50px;
		border-top:1px solid #313131;
		border-bottom:1px solid #101010;
		margin:35px 0 0;
	}
	.left-menu-btn{
		display:block;
	}
	.sidebar-left{
		width:280px;
		height:100%;
		top:86px;
		left:-100%;
		background-color:#101010;
		border-right: solid 1px rgb(50 50 51);
		padding-bottom:80px;
		margin:0;
		padding:0 0 100px;
		display:block;
		overflow-y:auto;
		position:fixed;
		transition:0.5s;
	}
	.sidebar-left.active{
		left:0;
	}
	.sidebar-left::-webkit-scrollbar {
		width:0px;
		background:transparent;
	}
	.sidebar-left::-webkit-scrollbar-thumb {
		background:transparent;
	}
	.sidebar-left li{
		width:100%;
		display:block;
		padding:0;
	}
	.sidebar-left li a{
		width:100%;
		height:40px;
		display:flex;
		align-items:center;
		justify-content:flex-start;
		background-color:#35383f;
		border-top: solid 1px rgb(70 72 78);
		border-bottom: solid 1px rgb(35 37 41);
		padding:0 15px;
	}
	.kk-logo{
		width:80px;
		top:-2px;
	}
	.before-login button{
		margin-left:5px;
		text-shadow:none;
	}

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






.slot_sp_game {
	width: 220px;
	height: 220px;
	position: relative;
	border: solid 1px #000000;
	background-color: transparent;
	display: inline-block;
	margin: 0 0px;
	margin-bottom: 10px;
	cursor: pointer;
	overflow: hidden;
	transition: 0.5s;
}

.slot_sp_game img {
	width:  100%;
	transition: 0.5s;
}

.slot_sp_game .overlay {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.5s;
}

.slot_sp_game button {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 35px;
	border: none;
	background-image: linear-gradient(#b33026, #e64611);
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	font-family: NotoSansKr-Regular;
	transition: 0.5s;
}

.slot_sp_game .foot {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 41px;
	background-color: rgba(0, 0, 0, 0.75);
	display: table;
	transition: 0.5s;
}

.slot_sp_game .foot p {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size: 14px;
	padding-left: 10px;
	padding-right: 10px;
}

.slot_sp_game:hover {
	border: solid 1px #026975;
}

.slot_sp_game:hover img {
	transform: scale(1.4);
}

.slot_sp_game:hover .overlay {
	opacity: 1;
}

.slot_sp_game:hover .foot {
	opacity: 0;
}





.navigation-page .guest_name {
	font-size: 13px;
	color: #c1ad8b;
	position: relative;
	top: 2px;
}

.navigation-page .guest-dm {
	width: 38px;
	background: #b13d3b;
	text-align: center;
	height: 18px;
	vertical-align: top;
	line-height: 18px;
	border-radius: 3px;
	margin-left: 5px;
	color: #fff;
}

.navigation-page .guest-dm:hover {
	background: #c14d4a;
}

.navigation-page .balance-container1 {
	width: auto;
	height: 26px;
	display: inline-block;
	margin-right: 3px;
	margin-left: 3px;
	vertical-align: top;
}

.navigation-page .balance-container {
	width: 215px;
	height: 26px;
	border: 1px solid #585858;
	display: inline-block;
	margin-right: 3px;
	margin-left: 3px;
	vertical-align: top;
}

.navigation-page .balance-container2 {
	width: 155px;
	height: 26px;
	border: 1px solid #585858;
	display: inline-block;
	margin-right: 3px;
	margin-left: 3px;
	vertical-align: top;
}


.login-container.wallet-part {
	width: 800px;
	position: relative;
	color: #666666;
}

.navigation-page .reload-balance {
	cursor: pointer;
	display: inline-block;
	width: 24px;
	height: 24px;
	border-right: 1px solid #585858;
	float: left;
	background: url("/img/refresh-icon.svg") left 4px center no-repeat;
}

.navigation-page .guest-balance-container {
	width: 188px;
	height: 24px;
	text-align: left;
	/*float: left;*/
	font-size: 13px;
	padding: 0 3px 0 30px;
	cursor: pointer;
	background: url("/img/chevron-down-icon.svg") center right 5px no-repeat;
	line-height: 24px;
}


.navigation-page .guest-point-container {
	width: 158px;
	height: 24px;
	text-align: left;
	float: left;
	font-size: 13px;
	padding: 0 10px 0 5px;
	cursor: pointer;
	background: url("/common/images/chevron-down-icon.svg") center right 5px no-repeat;
	line-height: 24px;
}

.pull-right {
	float:right;
}

p.dm-btn {
	width: 50px;
	height: 30px;
	background: #cc001b;
	border-radius: 3px;
	color: #ffffff;
	font-size: 14px;
	line-height: 26px;
	margin: 0;
	text-align: center;
	padding: 0 6px;
	cursor: pointer;
}

/*
.mess-count{
	width:17px;
	height:17px;
	color:#000;
	font-size:8px;
	background-color:#fff;
	border-radius:50%;
	position:absolute;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	top:-2px;
	right:-1px;
	z-index:1;
	animation:letter_anim 1s linear infinite;
}
@keyframes letter_anim{
	0% {opacity:0}
	35% {opacity:1}
	65% {opacity:1}
	100% {opacity:0}
}
*/





.game-buttons-container {
	font-size: 0;
	background: rgba(22, 14, 14, .8);
	padding: 15px;
	border-radius: 10px;
	margin-bottom: 10px;
}

.game-buttons-container .game-button {
	width: calc(1200px / 2);
	margin-right: 10px;
	height: 200px;
	display: inline-block;
	transition: all .5s;
	cursor: pointer;
	padding: 6px 20px;
	position: relative;
	font-weight: 700;
}

.game-buttons-container .game-button:last-child {
	margin-right: 0;
}

.game-buttons-container .game-button.live {
	background: url("/img/game-button/game-button-casino.png?5");
}

.game-buttons-container .game-button.sports {
	background: url("/img/game-button/game-button-2.jpg");
}

.game-buttons-container .game-button.slot {
	background: url("/img/game-button/game-button-slot.png?5");
}

.game-buttons-container .game-button.Others {
	background: url("/img/game-button/game-button-4.jpg");
}

.game-buttons-container .game-button.live:hover {
	background: url("/img/game-button/game-button-casino-hover.png?5");
}

.game-buttons-container .game-button.sports:hover {
	background: url("/img/game-button/game-button-2-hover.jpg");
}

.game-buttons-container .game-button.slot:hover {
	background: url("/img/game-button/game-button-slot-hover.png?5");
}

.game-buttons-container .game-button.Others:hover {
	background: url("/img/game-button/game-button-4-hover.jpg");
}

.game-button .title-container {
	position: absolute;
	bottom: 6px;
	height: 50px;
	width: 560px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.game-button .title-container span {
	font-size: 18px;
	color: #ffffff;
}

.game-button .title-container button {
	font-size: 12px;
	color: #121212;
	width: 105px;
	height: 35px;
	border-radius: 0;
	font-weight: 600;
}

.game-button .title-container button.btn-yellow:hover,
.game-button:hover .title-container span {
	color: #fad981;
}


.btn-yellow {
	border: 1px solid #fad981;
	background: #efd48c;
	background: -moz-linear-gradient(top, #efd48c 0%, #ddad2d 100%);
	background: -webkit-linear-gradient(top, #efd48c 0%, #ddad2d 100%);
	background: linear-gradient(to bottom, #efd48c 0%, #ddad2d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efd48c', endColorstr='#ddad2d', GradientType=0);
	color: #121212;
	font-weight: 700;
}

.btn-yellow:hover,
.game-button:hover .title-container button {
	border: 1px solid #fad981;
	background: #000000;
	color: #fad981;
}


.btn-violet,
.btn-violet:focus {
	font-weight: 700;
	border: 1px solid #6f6f6f;
	background: #5027aa;
	background: -moz-linear-gradient(top, #5027aa 0%, #2a1d5e 100%);
	background: -webkit-linear-gradient(top, #5027aa 0%, #2a1d5e 100%);
	background: linear-gradient(to bottom, #000000 0%, #454545 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5027aa', endColorstr='#2a1d5e', GradientType=0);
	color: #f4b741;
}

.btn-violet:hover {
	border: 1px solid #404040;
	background: #000000;
	color: #f4b741;
}

.cc-center {
	height: auto;
	margin-top: 0px;
	display: none;
	position: relative;
	top: -100%;
	animation: cc_anim 1s ease 1 forwards;
}

.cc-center.active {
	display: inline-block;
}


@media (max-width:600px){
	.pc-visible { display: none; }
	.mobile-visible { display: ; }
}
@media (min-width:600px){
	.pc-visible { display: ; }
	.mobile-visible { display: none; }
}