body {

	margin: 0px;

	background-color: #cac9a7;

	background-image: linear-gradient(#f3f2ca, #cac9a7);

}



ul {

	padding: 0px;

}



ul li,

a {

	list-style: none;

	text-decoration: none;

	color: #222222;

}



img {

	border: 0px;

	width: 100%;

}



.header {

	height: 64px;

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	z-index: 999;

	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .25);

	background-color: #ffffff;



}



.headerLogo {

	width: 10%;

	float: left;

}
.headerLogo img{
	margin-top:15px;	
}


#searchGames {

	display: none;

}



#searchGames1 {

	width: 100%;

}



.headerNav {

	float: left;

	width: 70%;

}



.headerSearch {

	text-align: center;

	height: 100%;

	float: left;

	width: 20%;

}



.headerMenu {

	cursor: pointer;

	float: right;

}



.headerMenu span {

	display: block;

	height: 64px;

	line-height: 64px;

	font-size: 25px;



}



.navUl {

	float: right;

	color: #ffffff;

	display: flex;

	height: 64px;

	font-size: 0;

}



.navLi {

	position: relative;

	vertical-align: middle;

	display: flex;

	align-items: center;

	margin-left: 32px;

	box-sizing: border-box;

	cursor: pointer;

}



.navMore {

	position: relative;

	display: none;

}



.showNavMore {

	display: inline-block;

}



.navMore>div {

	position: absolute;

	z-index: 99;

	width: 200px;

	background-color: #e7cf1f;

	top: 25px;

	left: -120px;

	min-height: 50px;

	padding: 10px 3px;



}



.navLi:hover {

	background-color: #e7cf1f;

}



/* .navLi:hover + .navMore {

	visibility: visible;

	display: inline-block;

} */



.categoryNav {

	margin-bottom: 10px;

}



.categoryNav .category {

	display: flex;

	flex-direction: row;

	flex-wrap: wrap;

}



.navLi {

	width: 30%;

	display: inline-block;

	margin: 0px 5px;

	padding: 0px 5px;

	line-height: 50px;

	box-shadow: 2px 2px 2px 2px #eeeeee;

}



.navLi a {}



.navLi img {

	float: left;

	border-radius: 3px;

	margin-right: 8px;

	width: 50px;

	height: 50px;

	margin-left: 3px;

}



.gamesContainer {

	display: grid;

	grid-template-areas:

		'. . . . . .'

		'g4 g4 g4 . . .'

		'g4 g4 g4 . . .'

		'g4 g4 g4 . . .'

		'. g1 g1 g1 . .'

		'. g1 g1 g1 . .'

		'. g1 g1 g1 . .'

		'. . g2 g2 g2 .'

		'. . g2 g2 g2 .'

		'. . g2 g2 g2 .'

		'. . . g3 g3 g3'

		'. . . g3 g3 g3'

		'. . . g3 g3 g3';

	grid-template-columns: repeat(6, 1fr);

	grid-gap: 10px;

}



.moreGameRow {

	display: grid;

	grid-template-areas:

		'. . . . . . '

		'. g4 g4 g5 g5 .'

		'. g4 g4 g5 g5 .';

	grid-template-columns: repeat(6, 1fr);

	grid-gap: 10px;

}



.moreGameRow2 {

	display: grid;

	grid-template-areas:

		'. g4 g4 g5 g5 . '

		'. g4 g4 g5 g5 .'

		'. . . . . .';

	grid-template-columns: repeat(6, 1fr);

	grid-gap: 10px;

}



.gameDetailRow {

	background-color: #ffffff;

	padding: 5px;

	display: grid;

	grid-template-areas:

		'i i i i o o'

		'i i i i o o';

	grid-template-columns: repeat(6, 1fr);

	grid-gap: 10px;

}



.g1 {

	grid-area: g1;

}



.g2 {

	grid-area: g2;

}



.g3 {

	grid-area: g3;

}



.g4 {

	grid-area: g4;

}



.g5 {

	grid-area: g5;

}



.showHeaderNav {

	display: none;

}



#searchGames::placeholder {

	color: black;

	font-size: 15px;

}



.gameDetail {

	margin-top: 100px;

	background: #fff;

	padding: 10px;

}



.gamesUl {

	display: flex;

	flex-direction: row;

	flex-wrap: wrap;

}



.rowLine>.gamesRow>div {

	width: 200px;

	display: inline-block;

}



.gamesCol {

	width: 16.6%;

	margin: 10px auto;

	padding-left: 8px;

	padding-right: 8px;

	box-sizing: border-box;

}



.gamesColDiv {

	position: relative;

	box-shadow: 0px 2px 9px 1px rgba(0, 52, 75, .2);

	border-radius: 8px;

	overflow: hidden;

}



.leftImg {

	float: left;

	width: 25%;

	text-align: center;

}



.leftImg a {

	display: block;

	margin: 0 auto;

}



.leftImg img {

	width: 300px;

	height: 300px;

	margin-bottom: 20px;

}



.leftDescript {

	float: left;

	width: 25%;

}



.leftMore {

	float: left;

	width: 50%;

}



.playNow {

	width: 180px;

	height: 40px;

	background-color: #ff3333;

	border-radius: 4px;

	font-family: "Roboto Slab";

	font-size: 16px;

	font-weight: bold;

	font-stretch: normal;

	line-height: 40px;

	letter-spacing: 0px;

	color: #fff;

	text-align: center;

	display: inline-block;

}



.mainBox {

	margin-top: 100px;

}



.mainBox p {

	color: #444444;

}



.content {

	max-width: 1300px;

	margin: 0 auto;

}



.clearBoth {

	clear: both;

}



.hiddenls {

	display: none;

}



@media (max-width:1300px) {

	.content {

		width: 90%;

	}



}



@media (min-width:800px) {

	.navLi {

		width: 12% !important;

	}



	.showNav {

		display: block;

		overflow: hidden;

		height: 130px;

		background-color: #ffffff;

		padding: 5px 10px;

		margin-top: 10px;

		border-radius: 5px;



	}

}



@media (max-width:800px) {

	.headerSearch {

		display: none;

	}



	.hiddenms {

		display: none;

	}



	.hiddenls {

		display: block;

	}



	.showHeaderNav {

		float: right;

		line-height: 64px;

		display: block;

	}



	.header .headerNav {

		display: none;

		width: 100%;

		background-color: #ffffff;

	}



	.navLi {

		width: 100%;

		margin: 0px;

		border-bottom: 1px solid #e1e1e1;

		text-align: left;

		box-shadow: 0px 0px;

	}



	#searchGames {

		display: block;

	}



	.gamesContainer {

		display: grid;

		grid-template-areas:

			'. . .'

			'. . .'

			'. . .'

			'. . .'

			'g4 g4 g4'

			'g4 g4 g4'

			'g4 g4 g4'

			'. . .'

			'. . .'

			'. . .'

			'g1 g1 g1'

			'g1 g1 g1'

			'g1 g1 g1'

			'. . .'

			'. . .'

			'. . .'

			'g2 g2 g2'

			'g2 g2 g2'

			'g2 g2 g2'

			'. . .'

			'. . .'

			'g3 g3 g3'

			'g3 g3 g3'

			'g3 g3 g3'

			'. . .';

		grid-template-columns: repeat(3, 1fr);

		grid-gap: 10px;

	}



	.moreGameRow {

		grid-template-areas:

			'. .'

			'. .'

			'g4 g4'

			'g4 g4'

			'. .'

			'. .'

			'g5 g5'

			'g5 g5'

			'. .';

		grid-template-columns: repeat(2, 1fr);

	}



	.moreGameRow2 {

		grid-template-areas:

			'. .'

			'g4 g4'

			'g4 g4'

			'. .'

			'. .'

			'g5 g5'

			'g5 g5'

			'. .'

			'. .';

		grid-template-columns: repeat(2, 1fr);

	}

	

	.gameDetailRow {

		background-color: #ffffff;

		display: grid;

		grid-template-areas:

			'i i i i'

			'i i i i';

		grid-template-columns: repeat(4, 1fr);

		grid-gap: 10px;

	}

	.gameDetailOther{

		display: none;

	}



}



@media (min-width:769px) and (max-width:800px) {

	.navLi {

		width: 45% !important;

	}



	.leftImg,

	.leftDescript.leftMore {

		width: 100%;

		float: none;

	}



	.leftImg img {

		width: 400px;

		height: 400px;

	}



	.showNav {

		display: block;

		overflow: hidden;

		height: 270px;

		background-color: #ffffff;

		padding: 5px 10px;

		margin-top: 10px;

		border-radius: 5px;

	}

}



@media (min-width:768px) and (max-width:992px) {

	.navLi {

		width: 100%

	}



	.gamesCol {

		width: 25%;

	}



	.leftImg,

	.leftDescript {

		width: 50%;

	}



	.leftMore {

		display: none;

	}

}



@media (min-width:768px) and (max-width:1300px) {



	.leftImg,

	.leftDescript {

		width: 50%;

	}



	.leftMore {

		display: none;

	}

}



@media (max-width:768px) {

	.navLi {

		width: 100%;

	}



	.gamesCol {

		width: 50%;

	}



	.leftImg,

	.leftDescript,

	.leftMore {

		width: 100%;

		float: none;

	}



	.leftImg img {

		max-width: 400px;

		max-height: 400px;

	}



	footer {

		display: block !important;

	}



	.showNav {

		display: block;

		overflow: hidden;

		height: 450px;

		background-color: #ffffff;

		padding: 5px 10px;

		margin-top: 10px;

		border-radius: 5px;

	}



	.rowLine>.gamesRow>div {

		width: 150px;

		display: inline-block;

	}

}



#searchGames,

#searchGames1 {

	width: 100%;

	margin: 10px 0px;

	padding: 0.375rem 0.75rem;

	font-size: 1rem;

	font-weight: 400;

	line-height: 1.5;

	color: #555555;

	background-color: #e1e1e1;

	background-clip: padding-box;

	border: 1px solid #6BF8FF;

	appearance: none;

	border-radius: 0.375rem;

	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}



.categoryNav ul {

	text-align: center;

	width: 100%;

	margin: 10px auto;

}



.common_title {

	color: #fcf556;

}



footer {

	background-color: #ffffff;

	padding: 20px 0px;

	text-align: center;

	margin-top: 20px;

}



footer .link a {

	font-weight: 600;

}



footer .company {

	color: #555555;

}



.gamesCol:hover .gamesColDiv {

	box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, .1);

	transform: translateY(-4px);

}



.fixTop {

	position: fixed;

	right: 20px;

	bottom: 20px;

}



.fixTop i {

	cursor: pointer;

	font-size: 40px !important;

}



.maskLayer {

	display: none;

	position: absolute;

	bottom: 0px;

	background: rgba(51, 51, 51, 0.8);

	width: 100%;

	line-height: 20px;

	color: #fff;

	cursor: pointer;

	text-align: center;

}



.maskLayer p {

	margin: 0px;

	padding: 10px;

}



.gameDescript {

	margin-bottom: 0px;

}



.gameSeparate {

	width: 60px;

	border: 1px solid #fff;

	display: inline-block;

	margin-top: 14px;

}



.gameShow {

	width: 100%;

	text-align: center;

	position: absolute;

	bottom: 15px;

}



.gameShowText {

	width: 50%;

	font-size: 16px;

	margin-top: 20px;

	background-color: #e1e1e1;

	border-radius: 5px;

	padding: 5px 15px;

	font-weight: normal;

	display: none;

}



.gamesColDiv:hover {

	border: 1px solid #e7cf1f;

}



.gamesColDiv:hover .gameShowText {

	display: inline-block;

}



.gamesColDiv:hover .maskLayer {

	display: block;

}



.gamesColDiv:hover .gameShowText {

	display: inline-block;

}



.show {

	display: block !important;

}



.marginTop120 {

	margin-top: 100px;

}
.headerLogo img{
	margin-top: 20px;
}