@charset "utf-8";
/* CSS Document */
body{margin: 0;padding: 0;}
ul{margin: 0;padding: 0; list-style: none;margin: 0 auto;}
a{text-decoration: none;}
h3,p{margin: 0;font-weight: normal;}
.main_box{
	width: 100%;
	position: relative;
}
.boxT{
	width: 100%;
	/* margin: 10px auto;
	padding: 15px; */
}
.boxT_ul_li{
	width: 18%;
	/* height: 300px; */
	box-shadow: 3px 2px 30px rgba(0,0,0,.1);
	float: left;
	text-align: center;
	position: relative;
	transition: all .6s ease-out;
	margin-top: 50px;
}
/* .boxT ul li h3{
	padding-top: 30px;
	color: #333;
	font-size: 18px;
} */
.boxT ul li p{
	margin-top: 7px;
	color: #666;
	font-size: 14px;
}
.boxT ul li img{
	display: block;
	width: 38px;
	position: absolute;
	right: 26px;
	bottom: 40px;
	transition: all .6s ease-out;
}
.boxT ul li:hover{
	width: 15%;
	height: 400px;
	background-color: #6ab0e8;
	text-align: left;
	margin-top: 20px;
}
/* .boxT ul li:hover  h3{
	padding-left: 20px;
	color: #FFF;
} */
.boxT ul li:hover  p{
	margin-left: 20px;
	color: #FFF;
}
/* .boxT ul li:hover img{
	width: 90%;
    position: absolute;
    right: 8px;
    bottom: 10px;
    border: 2px #3e3d3d solid;
} */
/* .box ul .on{
	width: 402px;
	height: 400px;
	background-color: #6ab0e8;
	text-align: left;
	margin-top: 20px;
} 

.box ul .on h3{
	padding-left: 20px;
	color: #FFF;
}
.box ul .on p{
	margin-left: 20px;
	color: #FFF;
}
.box ul .on img{
	width: 382px;
    position: absolute;
    right: 8px;
    bottom: 10px;
    border: 2px #3e3d3d solid;
}*/
/* .box ul .head{
	width: 402px;
	height: 20px;
	background-color: red;
	position: relative;
	top: -10px;
} */

.head{
	display: none;
}
.head{
	height: 30px;
	width: 200px;
	background-color: rgb(0, 255, 85);
	position: absolute;
	top: -30px;
}
.boxT ul li .head,.after{
display: none;
}
.boxT ul li:hover .head,.after{
display: block;
}
.boxT ul li .before{
display: block;
}
.boxT ul li:hover img{
	display: none;
}
.boxT ul li:hover .before{
	display: none;
}