@font-face {
  font-family:SCDream4;
  src:  url(../fonts/SCDream4.otf)
}
@font-face {
  font-family:SCDream6;
  src:  url(../fonts/SCDream6.otf)
}
@font-face {
  font-family:SCDream7;
  src:  url(../fonts/SCDream7.otf)
}

html{
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll !important;
}
body {
	background-color:#131419;
	height:100%;
  	padding-right: 0 !important;
}
body.active{
	overflow:hidden;
}
input, button, select, a, p, td{
	outline:none !important;
	font-family:SCDream4, Fallback, sans-serif;
}
.modal-open {
  padding-right: 0 !important;
}
.modal-open .modal::-webkit-scrollbar {
    width: 0px;
    background: transparent !important;
}
.modal-open .modal::-webkit-scrollbar-thumb {
    background:transparent;
}
.wrapper{
	width:100%;
	float:left;
	overflow-x:hidden;
}
.wrapper p{
	margin:0;
}
.wrapper button{
	white-space:nowrap;
	padding:0;
}
.wrapper .hs-ul{
	list-style:none;
	margin-bottom:0;
	width:auto;
	display:table;
	height:100%;
	padding:0;
}
.wrapper .hs-ul li{
	list-style:none;
	width:auto;
	height:auto;
	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
}
.hs-a{
	position:relative;
	display:inline-block;
	transition:0.3s;
}
.hs-a:hover{
	color:#f9d405 !important;
}
.hs-a.active{
	color:#f9d405 !important;
}
.hs-a .t1{
	height:100%;
    width:20px;
    top:0%;
    left:-23px;
    position:absolute;
}
.hs-a .t1:before, .hs-a .t1:after{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
	content: '';
    width:0;
    height:5px;
    background-color:#f9d405;
    position: absolute;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.hs-a .t1:before{
	top:-7px;
}
.hs-a .t1:after{
	transition-delay: 0.2s;
	top:7px;
}
.hs-a:hover .t1:before, .hs-a:hover .t1:after{
    width:100%;
}
.hs-a.active .t1:before, .hs-a.active .t1:after{
    width:100%;
}
.hs-a .t2{
	height:100%;
    width:20px;
    top:0%;
    right:-23px;
    position:absolute;
}
.hs-a .t2:before, .hs-a .t2:after{
	clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
	content: '';
    width:0;
    height:5px;
    background-color:#f9d405;
    position: absolute;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);
    left:0;
    top:0;
    bottom:0;
    margin:auto;
}
.hs-a .t2:before{
	top:-7px;
}
.hs-a .t2:after{
	transition-delay: 0.2s;
	top:7px;
}
.hs-a:hover .t2:before, .hs-a:hover .t2:after{
    width:100%;
}
.hs-a.active .t2:before, .hs-a.active .t2:after{
    width:100%;
}

.hs-button{
	position:relative;
	overflow:hidden;
	z-index:1;
	transition:0.3s;
}
.hs-button:hover{
	color:#fff !important;
}
.hs-button:before, .hs-button:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition:0.3s linear;
    z-index:-1;
}
.hs-button:before{
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #23B114;
    transform: translateX(-100%);
}
.hs-button:after{
    left: -50px;
    border-left: 50px solid transparent;
    border-top: 80px solid #23B114;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.hs-button:hover:before{
    transform: translateX(-40%);
}
.hs-button:hover:after{
    transform: translateX(45%);
}

/* -- NAV MAIN -- */

.nav-main{
	width:100%;
	height:auto;
	float:left;
	background-color:rgba(20,21,27,0.72);
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	text-align:center;
}
.nav-main .center{
	width:auto;
	min-width:1440px;
	height:100%;
	margin:0 auto;
	display:inline-block;
}
.nav-main .nav-top{
	width:100%;
	height:90px;
	float:left;
	border-bottom:solid 1px #1e2435;
}
.hs-logo{
	width:231px;
	height:64px;
	float:left;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	overflow:hidden;
}
.hs-logo .high{
	width:88px;
	height:54px;
	position:absolute;
	left:20px;
	bottom:0;
	overflow:hidden;
}
.hs-logo .high img{
	position:absolute;
	width:50px;
	left:0;
	top:-10px;
	animation:highAnim 8s ease infinite;
}
@keyframes highAnim{
    0%{opacity:0;transform:translateX(100%);}
    10%{opacity:0;transform:translateX(100%);}
    20%{opacity:1;transform:translateX(0);}
    90%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.hs-logo .one{
	position:absolute;
	width:60px;
	left:67px;
	top:5px;
	animation:oneAnim 8s ease infinite;
}


@keyframes oneAnim{
    0%{opacity:0;transform:translateY(-100%);}
    5%{opacity:1;transform:translateY(30%);}
    10%{opacity:1;transform:translateY(0);}
    90%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}
.hs-logo .slot{
	width:200px;
	height:150px;
	position:absolute;
	left:5px;
	top:0px;
	overflow:hidden;
}
.hs-logo .slot img{
	position:absolute;
	width:200px;
	left:0;
	top:10px;
	animation:slotAnim 8s ease infinite;
}
@keyframes slotAnim{
    0%{opacity:1;transform:translateX(-100%);}
    10%{opacity:1;transform:translateX(-100%);}
    20%{opacity:1;transform:translateX(0);}
    90%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.hs-logo .cherry{
	position:absolute;
	right:0;
	top:16px;
	animation:cherryAnim 8s ease infinite;
}
@keyframes cherryAnim{
    0%{opacity:0;transform:translateY(-100%);}
    20%{opacity:0;transform:translateY(-100%);}
    30%{opacity:1;transform:translateY(20%);}
    40%{opacity:1;transform:translateY(-20%);}
    50%{opacity:1;transform:translateY(10%);}
    60%{opacity:1;transform:translateY(-10%);}
    70%{opacity:1;transform:translateY(10%);}
    80%{opacity:1;transform:translateY(-10%);}
    90%{opacity:1;transform:translateY(10%);}
    100%{opacity:0;transform:translateY(-10%);}
}
.sound-btn{
	width:20px;
	height:20px;
	float:left;
	border:none;
	border-radius:3px;
	background-color:#1e7699;
	position:relative;
	top:55%;
	transform:translateY(-50%);
	color:#000;
	font-size:12px;
	margin-left:10px;
}
.sound-btn i{
	position:relative;
	top:2px;
}
.nav-main .nav-top .link-grp{
	float:left;
	margin-left:40px;
}
.nav-main .nav-top .link-grp li{
	padding:0 18px;
}
.nav-main .nav-top .link-grp li:first-child{
	padding-left:0;
}
.nav-main .nav-top .link-grp li a{
	color:#fff;
	font-size:15px;
	text-decoration:none;
	position:relative;
	top:5px;
}
.nav-main .nav-top .link-grp li .icon{
	margin-right:10px;
	font-size:20px;
	display:none;
}
.l-al-container{
	float:right;
	width:auto;
	height:100%;
	position:relative;
}
.l-al-container .la-ul{
	width:auto;
	height:100%;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
	list-style:none;
}
.login-div{
	width:auto;
	height:100%;
	display:none;
	float:left;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
	padding:0;
}
.login-div.active{
	display:flex;
}
.login-div button{
	width:100px;
	height:35px;
	color:#fff;
	text-decoration:none;
	border:none;
	border-radius:3px;
	float:left;
	margin:0 3px;
}
.login-div button.login{
	color:#000;
	background-color:#f9d405;
}
.login-div button.join{
	background-color:#e51515;
}

.after-login{
	width:auto;
	height:100%;
	display:none;
	float:left;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
}
.after-login.active{
	display:flex;
}
.after-login.afterlog-mobile-menu.active{
	display:none;
}
.after-login.la-ul{
	width:480px;
	padding-inline-start:0;
	padding:15px 0;
}
.after-login li{
	border-right:solid 1px #4e4e4e;
	padding:0 8px;
	height:20px;
	width:50%;
	white-space:nowrap;
}
.after-login li:nth-child(3){
	border-right:none;
}
.after-login li:last-child{
	border-right:none;
	padding-right:0;
}
.after-login li a:hover{
	border-right:solid 1px transparent;
}
.after-login .labels{
	width:50%;
	height:100%;
	border-radius:10px;
	float:left;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:flex-start;
}
.after-login .labels p{
	color:#a3ff12;
	font-size:10px;
}
.after-login .labels i{
	color:#a3ff12;
	font-size:12px;
	margin-right:5px;
}
.after-login .info{
	width:50%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
	float:left;
}
.after-login .info p{
	color:#fff;
	font-size:10px;
}
.mess-notif{
	float:left;
	width:auto;
	height:auto;
	white-space:nowrap;
}
.mess-notif .mess-icon{
	display:inline-block;
	width:30px;
	height:100%;
	border-radius:3px;
	background-color:#a3ff12;
	position:relative;
	color:#000;
	text-align:center;
	font-size:14px;
}
.mess-notif .mess-icon i{
	animation:bellAnim 1s linear infinite;
}
@keyframes bellAnim{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(0deg);}
    60%{transform:rotate(-20deg);}
    70%{transform:rotate(20deg);}
    80%{transform:rotate(-20deg);}
    90%{transform:rotate(20deg);}
    100%{transform:rotate(0deg);}
}
.mess-notif .mess-icon .count{
	width:15px;
	height:15px;
	position:absolute;
	right:-5px;
	top:-10px;
	color:#000;
	font-size:8px;
	border-radius:50%;
	background-color:#a3ff12;
	border:solid 1px #131419;
	text-align:center;
	padding:1px 0;
}
.after-login .btn-grp button{
    display:inline-block;
    width:auto;
    height:100%;
    border-radius:3px;
    font-size:8px;
    position:relative;
    text-align:center;
    border:none;
    padding:0 5px;
    float:left;
    margin-left:5px;
    white-space:nowrap;
}
.after-login .btn-grp button.mp-btn{
    color:#000;
    background-color:#f9d405;
}
.after-login .btn-grp button.logout-btn{
    color:#fff;
    background-color:#e51515;
}
.afterlog-btn{
	width:35px;
	height:35px;
	float:left;
	color:#f9d405;
	font-size:22px;
	border:none;
	background-color:transparent;
	margin-left:20px;
	position:relative;
}
.afterlog-btn .glyphicon{
	position:absolute;
	left:-4px;
	top:50%;
	transform:translateY(-50%) rotate(0deg);
	margin:auto;
	font-size:14px;
	animation:arrowAlAnim 0.8s linear infinite;
	transition:0.3s;
}
@keyframes arrowAlAnim{
    0%{left:-4px;}
    50%{left:-6px;}
    100%{left:-4px;}
}
.afterlog-btn .glyphicon.active{
	transform:translateY(-50%) rotate(180deg);
}


/* -- BODY MAIN -- */

.body-main{
	width:100%;
	height:auto;
	float:left;
}
.hs-header{
	width:100%;
	height:auto;
	float:left;
	margin-top:31px;
	text-align: center;
}
.hs-header .banner {
    position: relative;
}
.hs-header .banner:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 9px;
    width: 50%;
    border-top: 1px solid #363c45;
    border-bottom: 1px solid #363c45;
}
.hs-header .banner:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    width: 70%;
    background: #363c45;
}
.hs-header .banner h2{
    margin: 0 auto;
    z-index: 2;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 62px;
    padding: 0px 63px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: inset 0 3px 0 0 #363c45, inset 0 -3px 0 0 #363c45;
    -moz-box-shadow: inset 0 3px 0 0 #363c45,inset 0 -3px 0 0 #363c45;
    box-shadow: inset 0 3px 0 0 #363c45, inset 0 -3px 0 0 #363c45;
    background: #14151b;
    color: #fff;
    font-family:SCDream6;
    font-weight:normal;
}
.hs-header .banner h2:before, .hs-header .banner h2:after{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    background: #14151b;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: 4px solid #363c45;
    -webkit-transform: rotate(45deg) skew(26deg,26deg);
    -moz-transform: rotate(45deg) skew(26deg,26deg);
    -ms-transform: rotate(45deg) skew(26deg,26deg);
    -o-transform: rotate(45deg) skew(26deg,26deg);
    transform: rotate(45deg) skew(26deg,26deg);
}
.hs-header .banner h2:before{
    left: -63px;
}
.hs-header .banner h2:after{
    right: -63px;
}
.hs-header .sub{
	color:#3d3f4a;
	font-size:12px;
	margin-top:7px;
}

/* -- SLOT CONTAINER -- */

.slot-container{
	width:100%;
	height:auto;
	float:left;
	margin-top:35px;
}
.slot-container .sc-center{
	width:1431px;
	height:auto;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	perspective:900px;
}
.slot-btn{
	width:230px;
	height:auto;
	float:left;
	border-radius:20px;
	background-color:#090a0c;
	border:solid 1px #1f1f21;
	margin:7px 4px;
	position:relative;
	text-decoration:none;
	transition:.5s all ease;
    transform: rotateX(0deg) scale(1);
}
.sb-down{
    transform: rotateX(15deg) scale(0.7);
    perspective:900px;
    box-shadow:0px 20px 50px #333;
}
.sb-down.active{
    transition:.5s all ease;
    transform: rotateX(0deg) scale(1);
    box-shadow:0px 0px 40px #333;
}
.sb-down .img-cont img{
    opacity:0.5;
}
.sb-down.active .img-cont img{
    opacity:1;
}
.slot-btn .img-cont{
	width:100%;
	height:auto;
	float:left;
	position:relative;
	background-color:#000;
	border-radius:18px 18px 0 0;
}
.slot-btn .img-cont .main-img{
	width:100%;
	height:100%;
	border-radius:18px 18px 0 0;
	transition:0.5s;
}
.slot-btn .hot-icon{
	position:absolute;
	left:-19px;
	top:-24px;
	animation:hotslotAnim 3s ease infinite;
	transition:0.5s;
}
@keyframes hotslotAnim{
    0%  { transform: translatex(30px) translatey(-30px); opacity:0;}
    20% { transform: translatex(0) translatey(0); opacity:1;}
    80% { transform: translatex(0) translatey(0); opacity:1;}
    100%{ transform: translatex(-30px) translatey(30px); opacity:0;}
}
.slot-btn .slot-man{
	width:66.50%;
	position:absolute;
	right:0;
	bottom:0;
	animation:slotmanAnim 5s linear infinite;
	transition:0.5s;
}
@keyframes slotmanAnim{
    0%  { transform:translatey(0);}
    50%  { transform:translatey(-20px);}
    100%{ transform:translatey(0);}
}
.slot-btn .img-cont .view-btn{
	width:auto;
	height:40px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	padding:0 25px;
	border:solid 3px #9c0404;
	background-color:#e51515;
	color:#fff;
	font-size:14px;
	animation:viewgameAanim 1s ease 1;
	box-shadow:0 0px 5px #ff6363;
	display:none;
	transition:0.3s;
}
@keyframes viewgameAanim{
    0% {transform: scaleY(0.1);}
	40% {transform: scaleY(1.02);}
	60% {transform: scaleY(0.98);}
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(0.98);}
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(1);}
}
.slot-btn.active .img-cont .view-btn{
    display:block
}
.slot-btn .detail{
	width:100%;
	height:auto;
	float:left;
	padding:0 13px;
	text-align:center;
}
.slot-btn .detail .icon{
	width:100%;
	height:44px;
	float:left;
	border-bottom:solid 1px #333333;
	display: flex;
  	align-items: center;
  	justify-content: center;
}
.slot-btn .detail .icon p{
	color:#eea1a1;
	font-size:17px;
	font-family:SCDream7;
}
.slot-btn .detail .company-name{
	width:100%;
	height:42px;
	float:left;
	display: flex;
  	align-items: center;
  	justify-content: center;
}
.slot-btn .detail .company-name p{
	color:#ffffff;
	font-size:16px;
}

/* -- BOARD MAIN -- */

.board-main{
	width:100%;
	height:auto;
	float:left;
	margin-top:32px;
	padding:40px 0;
	background-color:#181b23;
	text-align:center;
	border-bottom:solid 1px #2d3343;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
}
.board-main .bm-board{
	width:420px;
	height:auto;
	min-height:180px;
	display:inline-block;
	vertical-align:top;
	position:relative;
	border-radius:10px;
	border:solid 1px #21252c;
	margin:10px 25px;
	padding-left:25px;
	padding-right:30px;
	padding-top:18px;
}
.board-main .withdraw-board{
    width:600px;
}
.board-main .bm-board:after{
    font-family: 'Stroke-Gap-Icons';
    font-size: 36px;
    color: #e51515;
    background: #181b23;
    position: absolute;
    right: -20px;
    line-height: 66px;
    width: 40px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.board-main .withdraw-board:after{
	color:#f7b905;
    animation:withIconAnim 3s linear infinite;
}
@keyframes withIconAnim{
    0%{transform:rotate3d(0, 1, 0, 0deg) translateY(-50%)}
    100%{transform:rotate3d(0, 1, 0, 360deg) translateY(-50%)}
}
.board-main .withdraw-board:after{
    content: "\e653";
}
.board-main .cservice-board:after{
    content: "\e67f";
}
.board-main .bm-board .bm-head{
	width:100%;
	height:auto;
	float:left;
	text-align:left;
}
.board-main .bm-board .bm-head p{
	color:#fff;
	font-size:14px;
	font-family:SCDream6;
}
.board-main .withdraw-board .bm-head p{
	font-size:18px;
}
.board-main .bm-board .bm-body{
	width:100%;
	height:auto;
	float:left;
	margin-top:18px;
}
.board-main .bm-board .bm-body table{
	width:100%;
	height:auto;
	float:left;
	text-align:left;
	margin-bottom:10px;
}
.board-main .bm-board .bm-body table td{
	color:#b2bbc6;
	font-size:16px;
	height:22px;
	white-space:nowrap;
	height:40px;
}
.board-main .bm-board .bm-body table td a{
	color:#9aaabb;
	font-size:12px;
}
.board-main .bm-board .bm-body table td .highlight{
	color:#98a1aa;
}
.board-main .bm-board .bm-body table td.date{
	width:32%;
}
.board-main .bm-board .bm-body table td.red{
	color:#f7b905;
}
.board-main .bm-board .bm-body table td.money{
	width:50%;
	text-align:center;
	position:relative;
}
.board-main .bm-board .bm-body table tr:nth-child(1) td.money{
    animation:withTd1Anim 5s linear infinite forwards;
}
.board-main .bm-board .bm-body table tr:nth-child(2) td.money{
    animation:withTd2Anim 5s linear infinite forwards;
}
.board-main .bm-board .bm-body table tr:nth-child(3) td.money{
    animation:withTd3Anim 5s linear infinite forwards;
}
.board-main .bm-board .bm-body table tr:nth-child(4) td.money{
    animation:withTd4Anim 5s linear infinite forwards;
}
.board-main .bm-board .bm-body table tr:nth-child(5) td.money{
    animation:withTd5Anim 5s linear infinite forwards;
}
@keyframes withTd1Anim{
    0%{top:-15px;opacity:0;}
    10%{top:0px;opacity:1;}
    95%{top:0px;opacity:1;}
    100%{top:0px;opacity:0;}
}
@keyframes withTd2Anim{
    0%{top:-15px;opacity:0;}
    5%{top:-15px;opacity:0;}
    15%{top:0px;opacity:1;}
    95%{top:0px;opacity:1;}
    100%{top:0px;opacity:0;}
}
@keyframes withTd3Anim{
    0%{top:-15px;opacity:0;}
    10%{top:-15px;opacity:0;}
    20%{top:0px;opacity:1;}
    95%{top:0px;opacity:1;}
    100%{top:0px;opacity:0;}
}
@keyframes withTd4Anim{
    0%{top:-15px;opacity:0;}
    15%{top:-15px;opacity:0;}
    25%{top:0px;opacity:1;}
    95%{top:0px;opacity:1;}
    100%{top:0px;opacity:0;}
}
@keyframes withTd5Anim{
    0%{top:-15px;opacity:0;}
    20%{top:-15px;opacity:0;}
    30%{top:0px;opacity:1;}
    95%{top:0px;opacity:1;}
    100%{top:0px;opacity:0;}
}

.board-main .bm-cservice{
	width:100%;
	height:auto;
	float:left;
}
.board-main .bm-cservice .download-link{
	width:100%;
	height:auto;
	float:left;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
}
.board-main .bm-cservice .download-link .dl-btn{
	width:50%;
	height:auto;
	float:left;
	text-decoration:none;
	color:#b2bbc6;
	font-size:12px;
	margin:0 0;
}
.board-main .bm-cservice .download-link .dl-btn:first-child{
	margin-left:0;
}
.board-main .bm-cservice .download-link .dl-btn:last-child{
	margin-right:0;
}
.board-main .bm-cservice .download-link .dl-btn img{
	margin-bottom:20px;
}
.board-main .bm-cservice .detail{
	width:43%;
	height:auto;
	float:right;
}
.board-main .bm-cservice .detail .text-cont{
	width:100%;
	height:auto;
	min-height:78px;
	float:left;
	text-align:left;
	color:#9aaabb;
	font-size:12px;
}
.board-main .bm-cservice .contact-btn{
	width:127px;
	height:24px;
	float:left;
	background-color:#565f69;
	border:none;
	border-radius:3px;
	color:#eceff3;
	font-size:11px;
	margin-left:4px;
}
.board-main .bm-cservice .contact-btn img{
	margin-right:5px;
}

/* -- FOOTER MAIN -- */

.footer-main{
	width:100%;
	height:auto;
	float:left;
	padding:70px 0;
	text-align:center;
}
.footer-main img{
	opacity:0.38;
}
.footer-main p{
	color:#595c70;
	font-size:12px;
	margin-top:5px;
}

/* -- GO TO TOP -- */

.scrollup{
	position:fixed;
	right:100px;
	bottom:50px;
    float:right;
    border:none;
    margin-right:30px;
    background: #e51515;
    width:50px;
    height:50px;
    color: #fff;
    font-size:14px;
    text-align: center;
    cursor: pointer;
    z-index:998 !important;
    pointer-events:auto;
    transition:0.5S;
    border-radius:50%;
    box-shadow: 0 0 20px 5px rgba(229,21,21,0.3);
    display:none;
}
.scrollup:hover{
	opacity:0.7;
}

/* -- GAME LIST -- */

.gamelist-body{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
	margin-top:14px;
}
.gamelist-container{
	width:1431px;
	height:auto;
	display:inline-block;
	padding:8px 8px 21px 8px;
	background-color:#1e202e;
	border-radius:8px;
	position:relative;
}
.gamelist-container .gl-menu{
	width:240px;
	height:auto;
	float:left;
	background-color:#181922;
	border-radius:8px;
	box-shadow:0 2px 5px #000;
	padding:4px 3px 8px 3px;
}
.gamelist-container .gl-menu .head{
	width:100%;
	height:80px;
	float:left;
	background-image:url(../images/gl_head_bg.png);
	overflow:hidden;
	border-radius:8px 8px 0 0;
	margin-bottom:4px;
}
.gamelist-container .gl-menu .head .hs-logo{
	float:none;
	display:inline-block;
	transform:translateY(-50%) scale(0.8);
	position:relative;
}
.gamelist-container .gl-menu .link-grp{
	width:100%;
	height:auto;
	float:left;
}
.gamelist-container .gl-menu .link-btn{
	width:100%;
	height:44px;
	float:left;
	padding:0 8px;
	margin:2px 0;
	background-color:#313343;
	box-shadow:inset 0 0 0 transparent;
	border:solid 1px transparent;
	text-decoration:none;
}
.gamelist-container .gl-menu .link-btn:hover{
	background:linear-gradient(#fefefe,#cecece);
	box-shadow:inset 0 4px 15px rgba(0,0,0,0.61);
	border:solid 1px #ada7a7;
}
.gamelist-container .gl-menu .link-btn.active{
	background:linear-gradient(#fefefe,#cecece);
	box-shadow:inset 0 4px 15px rgba(0,0,0,0.61);
	border:solid 1px #ada7a7;
}
.gamelist-container .gl-menu .link-btn.hot{
	background:linear-gradient(#d23428,#e64611);
}
.gamelist-container .gl-menu .link-btn.hot:hover{
	background:linear-gradient(#fefefe,#cecece);
}
.gamelist-container .gl-menu .link-btn .divider{
	width:50%;
	height:100%;
	float:left;
	text-align:left;
	display: flex;
    align-items: center;
    justify-content:flex-start;
}
.gamelist-container .gl-menu .link-btn .divider img{
	width:80%;
	position:relative;
}
.gamelist-container .gl-menu .link-btn.active .divider img{
	filter:invert(1) brightness(0);
}
.gamelist-container .gl-menu .link-btn.hot .divider img{
	width:81px;
	transform:rotate(32deg);
	top:1px;
}
.gamelist-container .gl-menu .hot.active .divider img{
	filter:none;
}
.gamelist-container .gl-menu .link-btn .divider p{
	color:#d3d5dd;
	font-size:14px;
}
.gamelist-container .gl-menu .link-btn.hot .divider p{
	color:#fdfcfc;
	font-size:16px;
	text-shadow:0 0 4px #5b3030,
				0 0 4px #5b3030,
				0 0 4px #5b3030,
				0 0 4px #5b3030,
				0 0 4px #5b3030;
}
.gamelist-container .gl-menu .link-btn.hot:hover .divider p{
	text-shadow:none;
}
.gamelist-container .gl-menu .link-btn:hover .divider p{
	color:#1c1c1e;
}
.gamelist-container .gl-menu .link-btn.hot.active .divider p{
	text-shadow:none;
}
.gamelist-container .gl-menu .link-btn.active .divider p{
	color:#1c1c1e;
}
.gamelist-container .gl-games{
	width:1164px;
	height:auto;
	float:left;
	background-color:#181922;
	border-radius:8px;
	box-shadow:0 2px 5px #000;
	padding:18px 12px;
	margin-left:11px;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
 	align-content:flex-start;
	align-items: top;
	justify-content:flex-start;
}
.gamelist-container .games-btn{
	width:180px;
	height:auto;
	float:left;
	margin:7px 5px;
	position:relative;
	border-radius:8px;
	border:solid 1px #000000;
	overflow:hidden;
	transition:0.3s;
}
.gamelist-container .games-btn:hover{
	border:solid 1px transparent;
}
.gamelist-container .games-btn .main-img{
	width:100%;
	height:100%;
	float:left;
}
.gamelist-container .games-btn .foot{
	width:100%;
	height:28px;
	position:absolute;
	left:0;
	bottom:0;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}
.gamelist-container .games-btn:nth-child(odd) .foot{
	background-color:#232638;
}
.gamelist-container .games-btn:nth-child(even) .foot{
	background-color:#161515;
}
.gamelist-container .games-btn .foot p{
	color:#ffffff;
	font-size:14px;
}
.gamelist-container .games-btn .overlay{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:rgba(83,100,237,0.47);
	border:solid 2px #7985e1;
	transition:0.3s;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
	opacity:0;
}
.gamelist-container .games-btn:hover .overlay{
	opacity:1;
}
.gamelist-container .games-btn .overlay button{
	width:70px;
	height:30px;
	border-radius:5px;
	border:solid 1px #1b436b;
	box-shadow:0 2px 3px #000000;
	background-image:linear-gradient(#3670b8,#0f2a50);
	color:#ffffff;
	font-size:14px;
	position:relative;
	overflow:hidden;
}
.gamelist-container .games-btn .overlay button:before{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	box-shadow:inset 0 3px 40px rgba(0,0,0,0.82);
	z-index:0;
}
.gamelist-container .games-btn .overlay button span{
	position:relative;
	z-index:1;
}
.gamelist-container .side-menu{
	width:60px;
	height:auto;
	position:absolute;
	right:-69px;
	top:2px;
}
.gamelist-container .side-menu a{
	width:60px;
	height:60px;
	float:left;
	display:flex;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
	border-radius:8px;
	background-color:#232747;
	text-decoration:none;
	transition:0.3s;
	text-align:center;
	color:#adb5f1;
	font-size:12px;
	margin-bottom:7px;
}
.gamelist-container .side-menu a img{
	filter:brightness(1) invert(0);
	margin-bottom:3px;
}
.gamelist-container .side-menu a:hover{
	background-color:#23b114;
	color:#fff;
}
.gamelist-container .side-menu a:hover img{
	filter:brightness(0) invert(1);
}


   /* --  * * * * * * * * * * * * * * * * * * *  * -- */

/* --         H I G H 1 S L O T    M O D A L S        -- */

   /* --  * * * * * * * * * * * * * * * * * * *  * -- */


.highslot-modal{
	width:600px;
	height:auto;
	position:absolute;
	top:10%;
	right:0;
	left:0;
	margin:auto;
	z-index:1000;
	box-shadow:none;
	padding:1px;
	margin-bottom:30px;
}
.modal-backdrop {
   background-color:#222430;
}
.modal-backdrop.in{
    opacity:.96;
}

/* Header */

.highslot-modal .header{
	width:100%;
	height:auto;
	float:left;
	padding:10px;
	position:relative;
	text-align:center;
}
.highslot-modal .hs-logo{
	display:block;
	margin:0 auto;
	top:0;
	transform:translateY(0);
	float:none;
	left:10px;
	position:relative !important;
}
.highslot-modal .header p{
	margin:0;
}
.highslot-modal .header .title{
	width:100%;
	float:left;
    margin: 0 auto;
    z-index: 2;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height:40px;
    padding: 0px 10px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    background: transparent;
    color:#fff;
	font-size:22px;
	font-family:SCDream6;
    font-weight:normal;
    border-top:solid 2px #363c45;
    border-bottom:solid 2px #363c45;
    margin-top:10px;
}
.highslot-modal .header .title:before, .highslot-modal .header .title:after{
    content: "";
    display: block;
    width: 100px;
    height:100px;
    position: absolute;
    background:transparent;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border:2px solid #363c45;
    -webkit-transform: rotate(45deg) skew(26deg,26deg);
    -moz-transform: rotate(45deg) skew(26deg,26deg);
    -ms-transform: rotate(45deg) skew(26deg,26deg);
    -o-transform: rotate(45deg) skew(26deg,26deg);
    transform: rotate(45deg) skew(26deg,26deg);
}
.highslot-modal .header .title:before{
    left: -77px;
}
.highslot-modal .header .title:after{
    right: -77px;
}
.highslot-modal .header .sub{
	color:#999999;
	font-size:12px;
	float:left;
	width:100%;
	margin-top:5px;
}
.highslot-modal .header .close-btn{
	float:right;
	border:none;
	color:#c6cbea;
	font-size:26px;
	position:absolute;
	top:5px;
	right:2px;
	background-image:none;
	background-color:transparent;
	padding:0;
}
.highslot-modal .header .close-btn:hover{
	background-color:transparent;
	color:#e51515;
}
.modal_body{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
    border-radius:0 0 8px 8px;
    margin-top:0;
    padding:0;
    box-shadow:none;
}
.modal_body .form-group{
	width:100%;
	height:auto;
	float:left;
	margin-bottom:10px;
	position:relative;
}
.modal_body .form-group.all-text{
	margin-bottom:15px;
}
.modal_body .form-group:first-child{
	margin-top:10px;
}
.modal_body .form-group div{
	height:auto;
	float:left;
}
.modal_body .form-group div:first-child{
	width:100%;
	margin-bottom:5px;
}
.modal_body .form-group div:first-child p{
	float:left;
	color:#ffffff;
	font-size:14px;
	margin-top:9px;
	margin-bottom:0;
}
.modal_body .form-group div:first-child p i{
	font-size:16px;
	color:#a3ff12;
}
.modal_body .form-group div:last-child{
	width:100%;
}
.modal_body .form-group div:last-child p{
	color:#ffad18;
	font-size:30px;
	position:relative;
	margin:0;
}
.modal_body .form-group div:last-child input{
	width:100%;
	height:40px;
	float:left;
	background-color:#fff;
	border:none;
	padding:0 8px;
	color:#000000;
	font-size:12px;
	border-radius:3px;
}
.modal_body .form-group div.w-btn input{
	width:75%;
}
.modal_body .form-group div.w-btn button{
	width:24%;
	height:40px;
	border:solid 1px transparent;
	padding:0;
	white-space:nowrap;
	background-color:#29770e;
	margin-left:1%;
	border-radius:3px;
	color:#fff;
	font-size:12px;
	transition:0.3s;
}
.modal_body .form-group div.w-btn button:hover{
	background-color:#907d14;
	color:#fff;
}
.modal_body .form-group div:last-child input::-webkit-input-placeholder {
	color:gray;
	font-size:12px;
}
.modal_body .form-group div:last-child select{
	width:100%;
	height:40px;
	float:left;
	background-color:#cccccc;
	border:none;
	padding-left:10px;
	color:#000000;
	font-size:12px;
	border-radius:5px;
	position:relative;
}
.modal_body .form-group div:last-child label{
	position:relative;
	width:100%;
	height:40px;
	float:left;
}
.modal_body .form-group div:last-child label svg{
	position:absolute;
	right:3px;
	top:5px;
	color:#1a1a1a;
	font-size:32px;
	pointer-events:none;
}

.modal_body .form-group div.w-info{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:flex-start;
}
.modal_body .form-group div.w-info .labels{
	width:auto;
	float:left;
	text-align:left;
}
.modal_body .form-group div.w-info .info{
	width:auto;
	float:left;
	color:#ffad18;
	font-size:30px;
	text-align:left;
	margin-left:10px;
}

/* Modal Footer */
.modal-btn-grp{
	width:100%;
	height:auto;
	float:left;
	margin:20px 0;
}
.modal-btn-grp button{
	height:40px;
	float:left;
	border:none;
	transition:0.5s;
	border-radius:3px;
	margin:0 1%;
	color:#000;
	font-size:14px;
	font-family:SCDream6;
	background-color:#f9d405;
}
.modal-btn-grp button:first-child{
	margin-left:0;
	color:#fff;
	background-color:#dc3d1c;
}
.modal-btn-grp button:last-child{
	margin-right:0;
}
.modal-btn-grp.two button{
	width:49%;
}
.modal-btn-grp.one button{
	width:100%;
}

/* Category */

.modal_body .category-title{
	width:100%;
	height:auto;
	float:left;
	text-align:left;
	border-bottom:solid 1px #f9d504;
	margin:10px 0;
}
.modal_body .category-title p{
	color:#f9d504;
	font-size:16px;
}
.modal_body .category-title p i{
	font-size:18px;
	margin-right:5px;
}

/* Login Join */

.login-modal{
	width:500px;
}
.modal_body .terms-use{
	width:100%;
	height:auto;
	float:left;
}
.modal_body .terms-use .text-cont{
	width:100%;
	height:160px;
	float:left;
	background-color:#fff;
	padding:5px;
}
.modal_body .terms-use .text-cont .inner{
	width:100%;
	height:100%;
	float:left;
	overflow-y:scroll;
	text-align:left;
	padding:10px;
	color:#000;
	font-size:14px;
}
.modal_body .terms-use .text-cont .inner::-webkit-scrollbar {
    width:10px;
    background:#8c8c8c;
}
.modal_body .terms-use .text-cont .inner::-webkit-scrollbar-thumb {
    background:#333;
}
.modal_body .terms-use .text-cont .inner .title{
	color:#bf2100;
	font-size:14px;
	font-family:SCDream6;
}
.modal_body .terms-use .text-cont .inner .blue{
	color:#264b79;
	font-family:SCDream6;
}
.modal_body .terms-use .question{
	width:100%;
	height:auto;
	float:left;
	text-align:left;
	margin-top:5px;
}
.modal_body .terms-use .question .ques-txt{
	color:#fff;
	font-size:14px;
	display:inline-block;
	margin-right:5px;
}
.modal_body .terms-use .question .choice{
	color:#fff;
	font-size:14px;
	display:inline-block;
	margin-right:5px;
}

/* Deposit */

.modal_body .terms-use.notice{
	margin:10px 0;
}
.deposit-btn{
	width:100%;
	height:50px;
	float:left;
	margin:10px 0;
	border-radius:8px;
	border:none;
	background-color:#29770e;
	color:#fff;
	font-size:16px;
	font-family:SCDream6;
	transition:0.3s;
}
.deposit-btn.custom{
	margin-top:0;
}
.deposit-btn i{
	font-size:20px;
	margin-right:5px;
	position:relative;
	top:2px;
}
.deposit-btn:hover{
	background-color:#23B114;
}

/* Notice Event */

.not-eve-modal{
	width:700px;
}
.not-eve-tbl{
	width:100%;
	height:auto;
	float:left;
	margin-top:10px;
}
.not-eve-row{
	width:100%;
	height:auto;
	float:left;
	margin:2px 0;
}
.not-eve-row .detail{
	width:100%;
	height:35px;
	float:left;
	background-color:#484b5d;
	border-radius:3px;
	overflow:hidden;
	position:relative;
	padding-right:24px;
	cursor:pointer;
	transition:0.3s;
}
.not-eve-row .detail.active{
	border-radius:3px 3px 0 0;
	background-color:#7982b7;
}
.not-eve-row .detail:hover{
	background-color:#7982b7;
}
.not-eve-row .detail table{
	width:100%;
	height:100%;
	float:left;
}
.not-eve-row .detail td{
	text-align:center;
	color:#fff;
	font-size:14px;
}
.not-eve-row .detail td.count{
	width:10%;
}
.not-eve-row .detail td.about{
	text-align:left;
	width:60%;
	padding-left:10px;
}
.not-eve-row .detail td.date{
	width:30%;
}
.not-eve-row .detail .arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%) rotate(0deg);
	right:5px;
	margin:auto;
	color:#000;
	transition:0.3s;
}
.not-eve-row .detail .arrow.active{
	transform:translateY(-50%) rotate(180deg);
}
.not-eve-row .content{
	width:100%;
	height:auto;
	max-height:300px;
	float:left;
	background-color:#fff;
	padding:5px;
	border-radius:0 0 3px 3px;
	position:relative;
	overflow:hidden;
	display:none;
	overflow-y:scroll;
	text-align:left;
	padding:10px;
	color:#000;
	font-size:14px;
}
.not-eve-row .content::-webkit-scrollbar {
    width:10px;
    background:#8c8c8c;
    border:solid 2px #fff;
}
.not-eve-row .content::-webkit-scrollbar-thumb {
    background:#333;
    border:solid 2px #fff;
}
.not-eve-row .detail .delete-btn{
	width:auto;
	height:auto;
	border:none;
	background-color:transparent;
	color:#fff;
}
.not-eve-row .detail .delete-btn:hover{
	color:#f9d504;
}


.not-eve-row .detail.active2{
	border-radius:3px 3px 0 0;
	background-color:#ffffff;
	color:#000;
}

.not-eve-row .detail td.bh_content{
	width:50%;
	color:#000;
}

.not-eve-row .detail td.bh_amount{
	width:15%;
	color:#000;
}

.not-eve-row .detail td.bh_total{
	width:20%;
	color:#000;
}

.not-eve-row .detail td.bg_date{
	width:15%;
	color:#000;
}





/* Customer Service */

.customer-modal{
	width:700px;
}
.cs-textarea{
	width:100%;
	height:250px;
	float:left;
	background-color: rgba(83,100,237,0.47);
    border: solid 2px #7985e1;
    border-radius:8px;
    outline:none;
    resize:none;
    color:#fff;
    font-size:14px;
    padding:10px;
}



   /* --  * * * * * * * * * * * * * * * * * * *  * -- */

/* --         H I G H  1  S L O T   M O B I L E        -- */

   /* --  * * * * * * * * * * * * * * * * * * *  * -- */

.sidenav{
	width:auto;
	height:100%;
	float:left;
}
.sn-overlay{
	width:100%;
	height:100%;
	position:fixed;
	z-index:997;
	background-color:rgba(0,0,0,0.5);
	top:92;
	left:0;
	pointer-events:none;
	opacity:0;
	transition:0.3s;
}
.sn-overlay.active{
	opacity:1;
	pointer-events:auto;
}
.m-menu-btn{
	width:35px;
	height:35px;
	float:left;
	background-color:transparent;
	border:none;
	border-radius:3px;
	margin:0 1%;
	top:50%;
	transform:translateY(-50%);
	display:none;
	z-index:1;
	position:relative;
}
.m-menu-btn span{
    display: block;
    width: 28px;
    height:3px;
    background: #f9d405;
    margin: 0 auto 5px;
    border-radius: 2px;
}
.m-menu-btn span:first-child {
    position: relative;
    margin-top:0;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.m-menu-btn span:nth-child(2) {
    opacity: 1;
    transition: opacity .3s;
}
.m-menu-btn span:last-child {
    margin-bottom: 0;
    position: relative;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.m-menu-btn.opened span:first-child {
    top: 8px;
    transform: rotate(-45deg);
    transition: top .3s 0s,transform .3s .3s,color .3s .3s;
}
.m-menu-btn.opened span:nth-child(2) {
    opacity: 0;
}
.m-menu-btn.opened span:last-child {
    top: -8px;
    transform: rotate(45deg);
    transition: top .3s 0s,transform .3s .3s;
}








/* -- BANNER MAIN -- */

.banner-main{
	width:100%;
	height:630px;
	float:left;
	position:relative;
	overflow:hidden;
   /* background-image:url(../img/banner/banner-bg.jpg);
	background-size:cover;*/
}
.banner-main:before{
	content:'';
	width:100%;
	height:2px;
	background-color:#333;
	box-shadow:0 2px 5px #000;
	float:left;
	position:relative;
}
.banner-main .banner-bg{
	width:100%;
	opacity:0;
}

.banner-img {
	margin-top: 50px;
}

.sky-container {
	width:500px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	transform:rotate(45deg);
	z-index:0;
	pointer-events:none;
}
.sky-container.left{
	left:-400px;
	right:auto;
}
.sky-container.right{
	right:-400px;
	left:auto;
}
.star {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 2px;
	background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
	filter: drop-shadow(0 0 6px #699bff);
	animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.star::before, .star::after {
	position: absolute;
	content: '';
	top: calc(50% - 1px);
	right: 0;
	height: 2px;
	background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
	border-radius: 100%;
	transform: translateX(50%) rotateZ(45deg);
	animation: shining 3000ms ease-in-out infinite;
}
.star::after {
	transform: translateX(50%) rotateZ(-45deg);
}
.star:nth-child(1) {
	top: calc(50% - 200px);
	left: calc(50% - 300px);
	animation-delay: 650ms;
}
.star:nth-child(1)::before, .star:nth-child(1)::after {
	animation-delay: 650ms;
}
.star:nth-child(2) {
	top: calc(50% - -50px);
	left: calc(50% - 190px);
	animation-delay: 150ms;
}
.star:nth-child(2)::before, .star:nth-child(2)::after {
	animation-delay: 150ms;
}
.star:nth-child(3) {
	top: calc(50% - -90px);
	left: calc(50% - 200px);
	animation-delay: 1600ms;
}
.star:nth-child(3)::before, .star:nth-child(3)::after {
	animation-delay: 1600ms;
}
.star:nth-child(4) {
	top: calc(50% - 50px);
	left: calc(50% - 250px);
	animation-delay: 4700ms;
}
.star:nth-child(4)::before, .star:nth-child(4)::after {
	animation-delay: 4700ms;
}
.star:nth-child(5) {
	top: calc(50% - -190px);
	left: calc(50% - 200px);
	animation-delay: 2100ms;
}
.star:nth-child(5)::before, .star:nth-child(5)::after {
	animation-delay: 2100ms;
}
@keyframes tail {
	0% {width: 0;}
	30% {width: 100px;}
	100% {width: 0;}
}
@keyframes shining {
	0% {width: 0;}
	50% {width: 30px;}
	100% {width: 0;}
}
@keyframes shooting {
	0% {transform: translateX(0);}
	100%{transform: translateX(320px);}
}
.banner-deco{
	width:1240px;
	height:100%;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:0 auto;
	z-index:1;
}
.banner-deco img{
	position:absolute;
	opacity:0;
}
.banner-deco .fireball-orange{
	width:30.49%;
	left:-10%;
	bottom:-34%;
	z-index:1;
	animation:fireOrangeAnim 20s ease infinite;
}
@keyframes fireOrangeAnim{
	0%{opacity:0;transform:rotate(0deg) scale(0);}
	5%{opacity:1;transform:rotate(90deg) scale(1);}
	95%{opacity:1;}
	100%{opacity:0;transform:rotate(720deg) scale(1);}
}
.banner-deco .fireball-yellow{
	width:30.49%;
	left:5%;
	bottom:-20%; 
	animation:fireYellowAnim 20s ease infinite;
}
@keyframes fireYellowAnim{
	0%{opacity:0;transform:rotate(0deg) scale(0);}
	1%{opacity:0;transform:rotate(0deg) scale(0);}
	6%{opacity:1;transform:rotate(90deg) scale(1);}
	95%{opacity:1;}
	100%{opacity:0;transform:rotate(720deg) scale(1);}
}
.banner-deco .wolf{
	width:17.34%;
	left:-6.75%;
	bottom:0; 
	z-index:1;
	animation:wolfAnim 20s ease infinite;
}
@keyframes wolfAnim{
	0%{opacity:0;transform:scale(0) translateY(0);}
	3%{opacity:0;transform:scale(0) translateY(0);}
	8%{opacity:1;transform:scale(1) translateY(0);}
	28%{opacity:1;transform:scale(1) translateY(-5%);}
	48%{opacity:1;transform:scale(1) translateY(5%);}
	58%{opacity:1;transform:scale(1) translateY(-5%);}
	68%{opacity:1;transform:scale(1) translateY(5%);}
	78%{opacity:1;transform:scale(1) translateY(-5%);}
	88%{opacity:1;transform:scale(1) translateY(5%);}
	95%{opacity:1;}
	100%{opacity:0;transform:scale(1) translateY(0);}
}
.banner-deco .glow{
	width:17.34%;
	left:-11%;
	bottom:0; 
	z-index:2;
	animation:glowAnim 20s linear infinite;
}
@keyframes glowAnim{
	0%{opacity:0;}
	3%{opacity:0;}
	8%{opacity:1;}
	13%{opacity:0.5;}
	18%{opacity:1;}
	23%{opacity:0.5;}
	28%{opacity:1;}
	33%{opacity:0.5;}
	38%{opacity:1;}
	43%{opacity:0.5;}
	48%{opacity:1;}
	53%{opacity:0.5;}
	58%{opacity:1;}
	63%{opacity:0.5;}
	68%{opacity:1;}
	73%{opacity:0.5;}
	78%{opacity:1;}
	83%{opacity:0.5;}
	88%{opacity:1;}
	93%{opacity:0.5;}
	95%{opacity:1;}
	100%{opacity:0;}
}
.banner-deco .king{
	width:23.31%;
	left:4.10%;
	bottom:0; 
	z-index:2;
	animation:kingAnim 20s ease infinite;
}
@keyframes kingAnim{
	0%{opacity:0;transform:translateY(100%);}
	7%{opacity:0;transform:translateY(100%);}
	12%{opacity:1;transform:translateY(0);}
	17%{opacity:1;transform:translateY(2%);}
	22%{opacity:1;transform:translateY(0);}
	27%{opacity:1;transform:translateY(2%);}
	32%{opacity:1;transform:translateY(0);}
	37%{opacity:1;transform:translateY(2%);}
	42%{opacity:1;transform:translateY(0);}
	47%{opacity:1;transform:translateY(2%);}
	52%{opacity:1;transform:translateY(0);}
	57%{opacity:1;transform:translateY(2%);}
	62%{opacity:1;transform:translateY(0);}
	67%{opacity:1;transform:translateY(2%);}
	72%{opacity:1;transform:translateY(0);}
	77%{opacity:1;transform:translateY(2%);}
	82%{opacity:1;transform:translateY(0);}
	87%{opacity:1;transform:translateY(2%);}
	95%{opacity:1;transform:translateY(0);}
	100%{opacity:0;transform:translateY(0);}
}
.banner-deco .robot{
	width:27.34%;
	left:12%;
	bottom:0; 
	z-index:1;
	animation:robotAnim 20s ease infinite;
}
@keyframes robotAnim{
	0%{opacity:0;transform:scale(0);}
	4%{opacity:0;transform:scale(0);}
	9%{opacity:1;transform:scale(1);}
	95%{opacity:1;}
	100%{opacity:0;transform:scale(1);}
}
.banner-deco .diamond{
	width:14.28%;
	left:22.75%;
	bottom:0; 
	z-index:1;
	animation:diamondAnim 20s ease infinite;
}
@keyframes diamondAnim{
	0%{opacity:1;transform:translateY(100%);}
	8%{opacity:1;transform:translateY(100%);}
	13%{opacity:1;transform:translateY(0);}
	95%{opacity:1;transform:translateY(0);}
	100%{opacity:0;transform:translateY(0);}
}
.banner-deco .coins{
	width:25.09%;
	right:15.25%;
	bottom:0; 
	z-index:2;
	animation:coinsAnim 20s ease infinite;
}
@keyframes coinsAnim{
	0%{opacity:0;transform:translateY(50%);}
	3%{opacity:0;transform:translateY(50%);}
	8%{opacity:1;transform:translateY(0);}
	95%{opacity:1;transform:translateY(0);}
	100%{opacity:0;transform:translateY(0);}
}
.banner-deco .girl{
	width:13.39%;
	right:4.75%;
	bottom:0; 
	z-index:4;
	animation:girlAnim 20s ease infinite;
}
@keyframes girlAnim{
	0%{opacity:0;transform:translateX(-50%);}
	5%{opacity:1;transform:translateX(0);}
	95%{opacity:1;transform:translateX(0);}
	100%{opacity:0;transform:translateX(0);}
}
.banner-deco .rich-man{
	width:16.54%;
	right:10%;
	bottom:14%; 
	z-index:3;
	animation:richManAnim 20s ease infinite;
}
@keyframes richManAnim{
	0%{opacity:0;transform:translateX(50%);}
	5%{opacity:1;transform:translateX(0);}
	95%{opacity:1;transform:translateX(0);}
	100%{opacity:0;transform:translateX(0);}
}
.banner-deco .slot-machine{
	width:36.46%;
	right:-6%;
	bottom:0; 
	z-index:1;
	animation:slotMachineAnim 20s ease infinite;
}
@keyframes slotMachineAnim{
	0%{opacity:0;transform:translateY(-5%);}
	6%{opacity:0;transform:translateY(-5%);}
	16%{opacity:1;transform:translateY(0);}
	26%{opacity:1;transform:translateY(-5%);}
	36%{opacity:1;transform:translateY(0);}
	46%{opacity:1;transform:translateY(-5%);}
	56%{opacity:1;transform:translateY(0);}
	66%{opacity:1;transform:translateY(-5%);}
	76%{opacity:1;transform:translateY(0);}
	86%{opacity:1;transform:translateY(-5%);}
	95%{opacity:1;transform:translateY(0);}
	100%{opacity:0;transform:translateY(0);}
}
.banner-main .bottom-bg{
	width:70.63%;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:0 auto; 
	z-index:1;
}

/* Banner Carousel */

.banner-carousel{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;

	margin-top: 20px; 
	margin-left: 300px;	
}
.banner-carousel .carousel-inner{
	height:100%;
}
.banner-carousel .carousel-inner .item{
	height:100%;
}
.banner-carousel .text-cont{
	width:100%;
	height:100%;
	float:left;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-left: 10px;
}
.banner-carousel .text-cont .inner{
	width:auto;
	display:inline-block;
	text-align:center;
	position: relative;
	left:1%;
}
.banner-carousel .text-cont p{
	word-spacing:0px;
	text-shadow:0 3px 2px rgba(0,0,0,0.72),
				0 -1px 1px #666666,
				0 1px 1px #666666,
				-1px 0 1px #666666,
				1px 0 1px #666666;
	animation:bannerCarouselAnim 6s ease infinite;
}
@keyframes bannerCarouselAnim{
	0%{transform:scale(0) rotateY(180deg) translateY(0); opacity:1;}
	30%{transform:scale(1) rotateY(0deg) translateY(0); opacity:1;}
	80%{transform:scale(1) rotateY(0deg) translateY(0); opacity:1;}
	100%{transform:scale(1) rotateY(0deg) translateY(200%); opacity:0;}
}
.banner-carousel .text-cont .title{
	color:#ffffff;
	font-size:50px;
	font-family:SCDream8;
}
.banner-carousel .text-cont .sub{
	color:#ffe71e;
	font-size:42px;
	font-family:SCDream6;
	margin-top:-12px;
}
.carousel-indicators{
	bottom:10px;
	margin-bottom:0;
	background-image:url(../img/bg/indicator-bg.png);
	background-repeat:no-repeat;
	background-position:center;
}
.carousel-indicators li{
	margin:0 5px;
	background-color:transparent;
	border:none;
	background-image:linear-gradient(#e6e5e5 50%,#f7f7f7 20%,#676767);
	box-shadow:0 2px 2px #000;
}
.carousel-indicators .active {
	width: 10px;
	height: 10px;
	margin:0 5px;
	background-color:transparent;
	background-image:linear-gradient(#9c1012,#57090b);
	position:relative;
	overflow:hidden;
}
.carousel-indicators .active:before{
	content:'';
	position:absolute;
	width:100%;
	height:50%;
	left:0;
	top:0;
	background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.1));
	border-radius:50%;
}



.banner-mobile{
	display: none;
}
.banner-pc{
	display: block;
}



@media(max-width:1610px){
	.gamelist-body {
	    padding-right:69px;
	}
	.gamelist-container {
	    width:98%;
	    float:left;
	    margin-left:1%;
	    display:flex;
		align-items:top;
		justify-content:center;
	}
	.gamelist-container .games-btn {
	    width:15.15%;
	    margin: 7px 0.75%;
	}
}
@media(max-width:1560px){
	.nav-main .center{
		width:100%;
		min-width:100%;
		padding:0 1%;
	}
	.banner-main{
		margin-top:89px;
	}
	.banner-main .banner-carousel .text-cont{
	    width:100%;
		padding:0 2%;
	}
	.banner-main .banner-carousel .txt-img{
		height:70%;
		top:0;
		margin-bottom:50px;
	}
	.banner-main .animation-bg{
	    width:100%;
	    height:100%;
	}
	.banner-main .animation-bg .girl-ball {
	    bottom:29.50%;
	}
	.slot-container .sc-center {
	    width:100%;
		padding:0 2%;
		justify-content:center;
	}
	.l-al-container .afterlog-mobile{
		width:50%;
		height:auto;
		position:fixed;
		z-index:998;
		top:89px;
		right:-100%;
		background-color:rgba(34,36,48,0.98);
		transition:0.3s;
		padding:0;
	}
	.l-al-container .afterlog-mobile.shows{
		right:0;
	}
	.after-login.afterlog-mobile-menu.active{
		display:flex;
	}
	.after-login li{
		width:100%;
		border-right:none;
		padding:0 1%;
		height:40px;
		border-bottom:solid 1px #363c45;
		display:flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content:center;
	}
	.after-login li .mess-notif{
		display:none;
	}
	.after-login .labels{
		width:180px;
		justify-content:flex-start;
	}
	.after-login .labels i{
	    font-size: 14px;
	}
	.after-login .labels p{
	    font-size:12px;
	}
	.after-login .info{
		width:180px;
		margin-left:0;
		justify-content:flex-start;
	}
	.after-login .info p{
	    font-size:12px;
	}
	.after-login .btn-grp{
	    height:auto;
	 	padding-right:1%;
	}
	.after-login .btn-grp button {
		float:left;
	    width: 48%;
	    height:35px;
	    font-size:14px;
	    padding: 0 0;
	    margin:10px 1%;
	}
}
@media(max-width:1300px){
	.gamelist-container .games-btn {
	    width:18.50%;
	}
}
@media(max-width:1270px){
	.nav-main .center{
		padding:0;
	}
	.nav-main .nav-top{
		width:100%;
		height:70px;
		float:left;
		border-bottom:solid 1px #1e2435;
	}
	.m-menu-btn{
		display:block;
	}
	.sidenav{
		position:fixed;
		left:-100%;
		top:69px;
		width:70%;
		background-color:rgba(34,36,48,0.98);
		transition:0.3s;
	}
	.sidenav.active{
		left:0;
	}
	.sidenav::-webkit-scrollbar {
	    width: 0px;
	    background: transparent !important;
	}
	.sidenav::-webkit-scrollbar-thumb {
	    background: #FF0000;
	}
	.nav-main .nav-top .link-grp{
		float:left;
		width:100%;
		height:auto;
		margin-left:0;
	}
	.nav-main .nav-top .link-grp li{
		width:100%;
		height:40px;
		padding:5px 20px;
		float:left;
		text-align:left;
		border-bottom:solid 1px #363c45;
	}
	.nav-main .nav-top .link-grp li:first-child{
		padding-left:20px;
	}
	.nav-main .nav-top .link-grp .icon{
		display:inline-block;
	}
	.banner-main{
		margin-top:69px;
	}
	.hs-logo {
	    position:absolute;
	    left:0;
	    right:0;
	    margin:0 auto;
	    top: 50%;
	    transform: translateY(-50%) scale(0.8);
	}
	.sound-btn {
    	top:50%;
    	margin-left:0;
	}
	.l-al-container{
		margin-right:1%;
	}
	.login-div.la-ul{
		width:70px;
		padding:5px 0;
	}
	.login-div li{
		width:100%;
	}
	.login-div button{
		width:100%;
		height:25px;
		margin:0 0;
		font-size:12px;
	}
	.l-al-container .afterlog-mobile{
		top:69px;
	}
}
@media(max-width:1024px){
	.l-al-container .afterlog-mobile{
		width:100%;
	}
	.banner-main .banner-carousel .main-img{
		width:130%;
		max-width:200%;
		position:relative;
		left:-15%;
	}
	.banner-main .animation-bg .girl-ball {
	    bottom:22.50%;
	}
	.banner-main .banner-carousel .txt-img{
		margin-bottom:35px;
	}
	.banner-main .banner-nav {
	    height:35px;
	}
	.banner-main .banner-nav .bn-center {
	    width: 100%;
	}
	.banner-main .banner-nav .carousel-indicators {
	   width:100%;
	}
	.banner-main .banner-nav .carousel-indicators li a {
	    padding: 0 10px;
	    font-size: 14px;
	}
	.banner-main .banner-nav .lr-btn {
	    display:none;
	}
	.hs-header .banner h2 {
	    font-size:16px;
	    line-height:44px;
	}
	/*gamelist*/
	.gamelist-body{
	    padding-right:0;
	}
	.gamelist-container {
	    flex-wrap:wrap;
	}
	.gamelist-container .gl-menu{
	    width:100%;
	}
	.gamelist-container .gl-menu .head{
	    height:60px;
	}
	.gamelist-container .gl-menu .link-btn {
	    width:25%;
	    padding: 0 5px;
	    margin:0 0;
	    border: solid 1px #181922;
	    display:flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content:center;
	}
	.gamelist-container .gl-menu .link-btn .divider {
	    width:auto;
	    height:auto;
	   	text-align:center;
	   	display:inline-block;
	}
	.gamelist-container .gl-menu .link-btn .divider img {
	    width:50px;
	    margin-right:10px;
	}
	.gamelist-container .gl-menu .link-btn.hot .divider img {
	    width:40px;
	}
	.gamelist-container .gl-menu .link-btn .divider p {
	    font-size:12px;
	}
	.gamelist-container .gl-menu .link-btn.hot .divider p {
	    font-size:12px;
	}
	.gamelist-container .gl-games {
	    width:100%;
	    padding:10px;
	    margin-left:0;
	    justify-content: flex-start;
	    margin-top:10px;
	}
	.scrollup{
		right:10px;
		bottom:20px;
	}
}
@media(max-width:767px){
	.slot-btn {
	    width:32.33%;
	    margin:7px 0.50%;
	}
	.highslot-modal{
		top:1%;
		width:96%;
	}
	.gamelist-container .gl-menu .link-btn .divider{
	    width:100%;
	}
	.gamelist-container .gl-menu .link-btn .divider:first-child{
	    height:15px;
	    margin-top:-5px;
	}
	.gamelist-container .gl-menu .link-btn .divider img {
	    margin-right:0;
	}
	.gamelist-container .games-btn{
	    width:31.80%;
	}
}
@media(max-width:500px){
	.banner-main{
		margin-top:69px;
		height: 140px;
	}
	.banner-mobile{
		display: block;
	}
	.banner-pc{
		display: none;
	}


	.login-div a {
	    font-size:12px;
	}
	.banner-main .banner-carousel .main-img{
		width:150%;
		left:-25%;
	}
	.banner-main .animation-bg .girl-ball {
	    bottom:19.50%;
	}
	.banner-main .banner-nav .carousel-indicators li a {
	    padding: 0 0;
	    font-size: 10px;
	}
	.slot-btn {
	    width:48.5%;
	    margin:7px 0.75%;
	}
	.board-main{
		padding:20px 0;
	}
	.board-main .bm-board{
		width:90%;
		margin:10px 0;
		padding-top:18px;
	}
	.board-main .bm-board .bm-body {
	    margin-bottom: 18px;
	}
	.board-main .bm-cservice .download-link .dl-btn{
		margin:0 0;
	}
	.gamelist-container .games-btn{
	    width:48.5%;
	}
	.gamelist-container .gl-menu .link-btn .divider p {
	    font-size:10px;
	}
	.gamelist-container .gl-menu .link-btn.hot .divider p {
	    font-size:10px;
	}
	.modal_body .form-group div.w-btn button.long{
	    font-size:10px;
	}
	.not-eve-row .detail td {
	    font-size:10px;
	}
	.afterlog-btn {
	    margin-left:10px;
	}
	.mess-notif .mess-icon {
	    width:24px;
	}
	.board-main .bm-board .bm-body table td {
	    font-size:12px;
	}
}
@media(max-width:360px){
	.after-login .labels {
	    width:100px;
	}
	.after-login .info {
	    width:100px;
	}
	.banner-main .banner-carousel .main-img{
		width:170%;
		left:-35%;
	}
	.banner-main .animation-bg .girl-ball{
	    bottom:16.50%;
	}
	.banner-main .banner-carousel .txt-img {
	    margin-bottom:30px;
	}
	.banner-main .banner-nav {
	    height:30px;
	}
}

/* Gamelist Modal */

.gamelist-modal{
	width:930px;
}
.gamelist-modal .gl-modal{
	width:100%;
	height:auto;
	float:left;
	border: solid 2px #7985e1;
    border-radius: 8px;
    background-color: rgba(83,100,237,0.05);
    overflow:hidden;
    display: flex;
    align-items: top;
    justify-content: center;
    padding:20px;
}
.gamelist-modal .gl-modal .glm-gamecont{
	width:100%;
	height:580px;
	float:left;
	display: flex;
    flex-wrap:wrap;
    align-items:flex-start;
 	align-content:flex-start;
    justify-content:flex-start;
    overflow-y:scroll;
}
.gamelist-modal .gl-modal .glm-gamecont::-webkit-scrollbar {
    width:10px;
    background:#7984e1  !important;
}
.gamelist-modal .gl-modal .glm-gamecont::-webkit-scrollbar-thumb {
    background: #232323 !important;
    border: solid 2px #7984e1;
}
.glm-btn{
	width:auto;
	height:auto;
	float:left;
	position:relative;
	background-image:url(../images/games/invi.html);
	margin:0 10px;
	margin-bottom:20px;
}
.glm-btn:hover{
	background-image:url(../images/games/gamelist_hover.png);
	background-size:cover;
}
.glm-btn.disable:hover{
	background-image:url(../images/games/invi.html);
	background-size:cover;
}
.glm-btn .main-img{
	width:100%;
	height:100%;
	opacity:1;
	transition:0.3s;
}
.glm-btn:hover .main-img{
	opacity:0;
}
.glm-btn.disable:hover .main-img{
	opacity:1;
}
.glm-btn .count{
	width: 20px;
    height: 20px;
    background-color: #ff6600;
    border-radius: 3px;
    position:absolute;
    top:20px;
    left:8px;
    color:#fff;
}

@media(max-width:990px){
	.gamelist-modal{
		top:1%;
		width:96%;
	}
	.gamelist-modal .gl-modal .glm-gamecont{
		height:auto;
	    overflow-y:auto;
	}
	.glm-btn{
		width:18.50%;
	    margin:0 0.75%;
	    margin-bottom:10px;
	}
}
@media(max-width:600px){
	.glm-btn{
		width:31.80%;
	    margin:0 0.75%;
	    margin-bottom:10px;
	}
}

/* Message Modal */

.message-modal .cs-textarea{
	text-align:left;
	height:auto;
	min-height:100px;
}
.message-modal .cs-textarea span{
	color:#fac215;
}

/* Code Authentication */

.l-al-container .code-div.active{
	display:flex;
	padding-left:0;
}
.l-al-container .code_cont input{
	float:left;
	width:170px;
	height:35px;
	border-radius:3px;
	border:none;
	background-color:#fff;
	padding:0 5px;
}
.l-al-container .code_cont input::-webkit-input-placeholder{
	color:#000;
	font-size:12px;
	font-family:SCDream4;
}
.l-al-container .code_cont button{
	float:left;
	width:60px;
	height:35px;
	border-radius:3px;
	border:none;
	background-color:#f9d405;
	color:#000;
	font-size:12px;
	margin-left:3px;
}

@media(max-width:1350px){
	.l-al-container .code-div.active{
		width:160px;
	}
	.l-al-container .code_cont input{
		width:100%;
		height:30px;
	}
	.l-al-container .code_cont button{
		width:100%;
		height:25px;
		margin-left:0;
		margin-top:3px;
	}
}
@media(max-width:580px){
	.l-al-container .code-div.active{
		width:70px;
	}
}





.video_bg { position: absolute; top: 0px; left:50%; margin-left:-960px; width: 1920px; height: 488px; overflow: hidden;}
.video_bg video {top: -200px; position: relative; opacity: 0.7; width: 1920px;}

@media(max-width:690px){
	.video_bg {top: 0px; left:50%; margin-left:-300px; width: 700px; height: 420px; }
	.video_bg video {top: 0px; width:700px; margin-left:0px;}
}



.jack_wrap {width:100%;  float:left; padding:50px 0 0 0; width:680px; text-align:right; position:relative; top: 150px; left:150px; z-index:999}
.jack_icon {position:absolute; left:-30px; top:0px; }
.jack_tit {width:90%; float:left;}
.jack_wrap ul li{display:inline-block; margin:0 -4px 0 -4px}
.num_b {width:90%}
.num_s {width:85%}
.jack_num {width:100%; float:left; margin-top:40px;}
.jack_list {width:380px; height:46px; margin:10px 0 0 0;  float:right; background:url("/img/jack_bg.png") no-repeat}
.jack_list table tr td { font-family:'nanumsquare', sans-serif; font-size:12px; font-weight:700; line-height:48px;}
.jack_td1 {color:#ff9c00; padding:0 0 0 65px}
.jack_td2 {color:#ffffff}
.jack_td3 {color:#949494; padding:0 10px 0 0}
/*
.jack_icon img {width: 80%;}
.jack_tit img {width: 50%;}*/