@charset "utf-8";

/* CSS Document */

body{margin: 0;padding: 0;}

ul{margin: 0;padding: 0; list-style: none;}

a{text-decoration: none;}

h3,p{margin: 0;font-weight: normal;}

.main_box{

	width: 100%;

	position: relative;

}

.box{

	width: 1200px;

	margin: 10px auto;

	padding: 30px 0;

}

.box ul li{

	width: 18%;

	height: 380px;

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

	float: left;

	text-align: center;

	position: relative;

	transition: all .6s ease-out;

}

.box ul li a{ position: unset;}

.box ul li h3{

	padding-top: 30px;

	color: #333;

	font-size: 24px;

}

.box ul li p{

	margin-top: 7px;

	color: #666;

	font-size: 16px;

}

.box ul li img{

	width: 180px;

	position: absolute;

	left: 50%;

	transform: translateX(-50%);

	bottom: 40px;

	transition: all .6s ease-out;

}

.box ul .on{

	width: 28%;

	background-color: #d82019;

	text-align: left;

}

.box ul .on h3{

	padding-left: 20px;

	color: #FFF;

}

.box ul .on p{

	margin-left: 20px;

	color: #FFF;

}

.box ul .on img{

	-webkit-filter: brightness(0) invert(1);

    filter: brightness(0) invert(1);

	left: 70%;

}





@media screen and (max-width:1200px){

	.box{

		width: 100%;

		margin: 10px auto;

		padding: 30px 40px;

	}



	.box ul li{ height: 300px;}

	.box ul li h3{ font-size: 20px;}

	.box ul li p{ font-size: 14px;}

	.box ul li img{ width: 130px;}







}

@media screen and (max-width:999px){

	.box ul li{ width: 19%;height: 250px;}

	.box ul .on{ width: 24%;}

	.box ul li img { width: 100px; }

}

@media screen and (max-width:799px){



	.box ul li {width: 33%;}

	.box ul .on { width: 66%; }

	.box{ padding: 30px 20px;}

}

@media screen and (max-width:599px){

	

	.box ul li {width: 50%;}

	.box ul .on { width: 100%; }

	.box{ padding: 15px;}

	.box ul li h3 { font-size: 18px; padding-top: 15px; }

	.box ul li p { font-size: 12px; margin-top: 0px;}

}