.container {
	display: inline-block;
	width: 100%; max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.container > .contents {
	display: inline-block;
	width: 100%;
	background-color: #fff;
	margin-bottom: 100px;
}

.container > .contents > .category_box {
	display: inline-block;
	width: 100%; 
	margin-bottom: 42px;
}

.container > .contents > .category_box > ul {
	display: inline-block;
}

.container > .contents > .category_box > ul > li {
	float: left; list-style: none;
	display: inline-block;
	width: 175.5px; height: 50px; line-height: 50px;
	text-align: center;
	background-color: #f3f3f3;
	border: 1px solid #d3d3d3;
}

.container > .contents > .category_box > ul > li > a {
	display: inline-block;
	width: 100%; height: 100%;
	text-decoration: none;
	color: #212255; font-size: 14px;
}

.container > .contents > .category_box > ul > li.active_category {
	background-color: #212255;
	border: 1px solid #212255;
}

.container > .contents > .category_box > ul > li.active_category > a {
	color: #fff;
}

.container > .contents > .case_box {
	display: inline-block;
	width: 100%;
}

.container > .contents > .case_box > ul {
	display: inline-block;
	width :100%;
}


.container > .contents > .case_box > ul > li {
	list-style: none;
	float: left;
	width: 200px;
	border: 1px solid #d3d3d3;
	box-sizing: border-box;
	margin: 0px 8px 20px;
}

.container > .contents > .case_box > ul > li:hover {
	border: 1px solid #212255;
}

.container > .contents > .case_box > ul > li > a {
	text-decoration: none;
	font-size: 13px; color: #373737;
}

.container > .contents > .case_box > ul > li > a > img {
	margin-top: 10px;
	width: 178px; height: 145px;
}

.container > .contents > .case_box > ul > li > a > p {
	width: 178px; height: 38px; line-height: 19px;
	margin: 15px auto;
	text-align: left;
	font-size: 13px;
	overflow: hidden;
}



.container > .contents > .paging_box {
	display: inline-block;
	width: 100%;
	margin-top: 10px;
}

.container > .contents > .paging_box > ul {
	display: inline-block;
}

.container > .contents > .paging_box > ul > li {
	display: inline-block;
	height: 29px; line-height: 29px;
	list-style: none;
	float: left;
	border: 1px solid #d3d3d3;
	margin: 0px 2px;
}

.container > .contents > .paging_box > ul > li.active_page {
	border: 1px solid #212255;
	background-color: #212255;
}

.container > .contents > .paging_box > ul > li > a{
	display: inline-block;
	height: 29px; line-height: 29px;
	padding: 0px 12px;
	box-sizing: border-box;
	text-decoration: none;
	font-size: 12px; color: #212255;
}

.container > .contents > .paging_box > ul > li.active_page > a {
	color: #fff;
}




@media (max-width: 420px){ 
	.container {
		max-width: 100%;
	}
	.container > .contents > .category_box > ul {
		width: 100%;
		padding: 0px;
		box-sizing: border-box;
	}

	.container > .contents > .category_box > ul > li {
		float: none;
		width: 90%;
		box-sizing: border-box;
	}

	.container > .contents > .case_box > ul > li {
		float: none;
		width: 90%;
	    margin: 0px auto 20px;
	}
	.container > .contents > .case_box > ul > li > a > p {
		width: 90%;
	}

	.container > .contents > .case_box > ul > li > a > img {
		width: 90%; height: 145px;
	}

}

@media (max-width: 819px) and (min-width: 421px) { 
	.container {
		max-width: 400px;
	}
	.container > .contents > .category_box > ul {
		width: 100%;
		padding: 0px;
		box-sizing: border-box;
	}

	.container > .contents > .category_box > ul > li {
		width: 50%;
		box-sizing: border-box;
	}

	.container > .contents > .case_box > ul > li {
		width: 188px;
	    margin: 0px 6px 20px;
	}
}

@media (max-width: 1043px) and (min-width: 820px) { 
	.container {
		max-width: 800px;
	}
	.container > .contents > .category_box > ul {
		padding: 0px 5px;
		box-sizing: border-box;
	}

	.container > .contents > .category_box > ul > li {
		width: 261px;
	}

	.container > .contents > .case_box > ul > li {
		width: 188px;
	    margin: 0px 6px 20px;
	}
}

@media (max-width: 1099px) and (min-width: 1044px) { 
	.container {
		max-width: 1024px;
	}

	.container > .contents > .category_box > ul > li {
		width: 165px;
	}

	.container > .contents > .case_box > ul > li {
	    margin: 0px 2px 20px;
	}

}

@media (min-width: 1100px){

}


/*
	@media (max-width: 420px){ 

	}

	@media (max-width: 819px) and (min-width: 421px) { 

	}

	@media (max-width: 1043px) and (min-width: 820px) { 

	}

	@media (max-width: 1099px) and (min-width: 1044px) { 

	}

	@media (min-width: 1100px){

	}
*/