html,body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto
}

.gridBox {
	min-width: 1170px
}

.gridBox ul {
	height: 100%;
	padding: 0 .5%
}

.gridBox ul>li {
	float: left;
	height: 100%;
	width: 25%;
	margin: 1.3% 0;
	cursor: pointer
}

.gridBox ul>li a>h3,.gridBox ul>li a p {
	width: 85%;
	margin: 0 auto
}

.gridBox ul>li a>h3 {
	font-size: 18px;
	color: #5c6670;
	margin-top: 12px
}

.gridBox ul>li a>p {
	font-size: 14px;
	color: #a4a9ad
}

.gridBox ul>li .gridBoxItem {
	cursor: pointer;
	margin: 0 auto;
	width: 95%;
	height: 228px;
	border-radius: 4px;
	-webkit-transition: box-shadow 200ms ease-out;
	transition: box-shadow 200ms ease-out
}

.gridBox ul>li .gridBoxItem1 {
	background: url(images/m1_71269e8b.jpg) center no-repeat;
	background-size: cover
}

.gridBox ul>li .gridBoxItem2 {
	background: url(images/life_138cc812.jpg) center no-repeat;
	background-size: cover
}

.gridBox ul>li .gridBoxItem3 {
	background: url(images/store_69a22c62.jpg) center no-repeat;
	background-size: cover
}

.gridBox ul>li .gridBoxItem4 {
	background: url(images/n1s_b3c628b7.jpg) center no-repeat;
	background-size: cover
}

.gridBox ul li:hover .gridBoxItem {
	-webkit-filter: brightness(103%);
	filter: brightness(103%);
	box-shadow: 0 20px 40px -10px rgba(0,0,0,.2)
}

.gridBox ul li:hover h3 {
	color: #212121
}