@charset "utf-8";
/* CSS Document */
.main-mobile{
	background: #0a2035;
}
.w-100{
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	display: block;
}
.w-768{
	width: 100%;
	max-width: 768px;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 0 5px;
	display: block;
}
.btn-login{
	background-image: linear-gradient(to right, #838a5e , #29455a);
	background-size: 100% 100%;
	border: 1px solid #82885f !important;
	border-radius: 20px !important;
	font-size: 0.8rem;
	text-align: left !important;
	margin-left: 1px;
	font-weight: bold;
	color: #ffffff;
	display: block;
}
.btn-register{
	background-image: linear-gradient(to right, #204361 , #2178e1);
	background-size: 100% 100%;
	border: 1px solid #227be7 !important;
	border-radius: 20px !important;
	text-align: right !important;
	margin-right: 1px;
	font-size: 0.8rem;
	font-weight: bold;
	color: #ffffff;
	display: block;
}
/*.header{
	padding: 5px 0;
	background: url("../images/header/bg-header.png") no-repeat center;
	background-size: 100% 100%;
}*/
.btn-icon i img{
	width: 100%;
	max-width: 25px;
	height: auto;
}
.home{
	text-align: center;
}
.register{
	text-align: right !important;
}
.logo a img{
	width: 100%;
	max-width: 200px;
	height: auto;
	display: block;
}
.logo a{
	padding: 13px 2px;
}
.login{
	padding: 5px 0;
	display: block;
}
.register{
	padding: 5px 0;
	display: block;
}
.head{
	background-image: -webkit-linear-gradient(top, #0a6d8d 13%, #12416f 73%, #086789);
    background-image: linear-gradient(180deg, #0a6d8d 13%, #12416f 73%, #086789);
    box-shadow: 0 2px 1px -2px rgb(33 33 33), inset 0 -1px 0 0 #003b72, inset 0 -2px 1px 0 #007fff;
}
.step-01{
	background: url("../images/btn-01.png") no-repeat;
	background-size: 100% 100%;
}
.step{
	margin: 5px auto;
	padding: 15px 0;
	font-size: 0.75rem;
	color: #ffffff;
	font-weight: bold;
}
.step i img{
	width: 100%;
	max-width: 20px;
	height: auto;
}
.step-02{
	background: url("../images/bg-03.png") no-repeat;
	background-size: 100% 100%;
}
.step-03{
	background: url("../images/btn-02.png") no-repeat;
	background-size: 100% 100%;
}
.contain{
	margin: 5px auto;
}
.item-games{
	border: 1px solid #086789;
	border-radius: 25px;
	margin: 4px auto;
	overflow: hidden;
	position: relative;
}
.item-games p.title-games{
	width: 100%;
	position: absolute;
	top: 5px;
	left: 0;
	font-size: 0.8rem;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	display: block;
}
.item-games a img{
	width: 100%;
}
.item-games a p.play-01{
	width: 100%;
    max-width: 60px;
    position: absolute;
    top: 54%;
    left: 21%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: bold;
}
.item-games a .play-02{
	width: 100%;
    max-width: 60px;
    position: absolute;
    top: 54%;
    right: 3%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: bold;
}
.footer{
	bottom: 0;
	left: 0;
	background: url("../images/footer/bg.jpg") repeat-x bottom;
}
.item-footer{
	display: flex;
	padding: 2px 0;
}
.footer-icon{
	flex: 1;
	padding: 5px 0;
	padding-top: 10px;
}
.footer-icon a span{
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	font-size: 0.75rem;
	color: #ffffff;
	display: block;
}
.acitve-foorer{
	background: url("../images/footer/active.png") no-repeat center;
	background-size: 100% 100%;
}
.lobbys{
	padding-bottom: 60px;
}
.item-lobbys{
	width: 100%;
	height: auto;
	position: relative;
	margin: 2px auto;
	overflow: hidden;
	display: block; 
}
.item-lobbys a p.title-games{
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 2px;
	font-size: 0.8rem;
	color: #ffffff;
	font-weight: bold;
	display: block;
}
.item-lobbys a img{
	width: 100%;
	height: auto;
}
.btn-01{
	background: url("../images/lobby/btn.png") no-repeat;
	background-size: 100% 100%;
	padding: 5px 20px;
	font-size: 0.7rem;
	color: #ffffff;
}
.item-lobbys a p.play-01{
	position: absolute;
	top: 50%;
	left: 20%;
	transform: translate(-50%, -50%);
}
.item-lobbys a p.play-02{
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translate(-50%, -50%);
}
.item-03{
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 2px auto;
	display: block;
}
.item-03 img{
	width: 100%;
}
.item-03 p.title-03{
	position: absolute;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	font-size: 0.7rem;
	color: #ffffff;
	left: 0;
	bottom: 5px;
}
.btn-slot{
	width: 100%;
	margin: 2px auto;
	background-image: -webkit-linear-gradient(top, #0a6d8d 13%, #12416f 73%, #086789);
    background-image: linear-gradient(180deg, #0a6d8d 13%, #12416f 73%, #086789);
    box-shadow: 0 2px 1px -2px rgb(33 33 33), inset 0 -1px 0 0 #003b72, inset 0 -2px 1px 0 #007fff;
	font-size: 0.6rem;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
}
.contain-slot{
	margin: 5px auto;
}
.item-slot{
	width: 100%;
	margin: 2px auto;
	background-image: -webkit-linear-gradient(top, #0a6d8d 13%, #12416f 73%, #086789);
    background-image: linear-gradient(180deg, #0a6d8d 13%, #12416f 73%, #086789);
    box-shadow: 0 2px 1px -2px rgb(33 33 33), inset 0 -1px 0 0 #003b72, inset 0 -2px 1px 0 #007fff;
	border-radius: 5px;
	overflow: hidden;
}
.item-slot a img{
	width: 100%;
}
.item-slot a p{
	color: #ffffff;
	font-size: 0.7rem;
}
@media only screen and (max-width: 600px) {
  .item-lobbys a p.play-02{
	position: absolute;
	top: 50%;
	right: -4%;
	transform: translate(-50%, -50%);
}
}