/*reset*/

body,ul,li,h2,h3,div{margin:0;padding:0;border:0;}

body{font-size:12px; font-family:"Microsoft YaHei";}

ul{list-style-type:none;}

a{text-decoration:none;}



/*body{background:url(../images/beige_paper.png) left top repeat;}*/



.list{

	width:100%;

	height:auto;

	margin-top:0px;

}

.list li{

	width:205px;

	margin:0 auto;

	height:48px;

	margin-bottom:10px;

	/*background:#FFF;*/

	box-shadow:0px 0px 2px rgba(0, 0, 0,0.2);

	-webkit-transition:0.2s all ease;

	-moz-transition:0.2s all ease;

	-ms-transition:0.2s all ease;

	-o-transition:0.2s all ease;

	transition:0.2s all ease;

	overflow:hidden;

	position:relative;

	border: 1px solid #ccc;

}

.list .border{

	height:48px;

	position:absolute;

	left:0; top:0;

	width:10px;

	overflow:hidden;

	opacity:0;

	/*background:#B22222;*/

	-webkit-transition:0.3s all ease;

	-moz-transition:0.3s all ease;

	-ms-transition:0.3s all ease;

	-o-transition:0.3s all ease;

	-webkit-transition:.5s left ease;

}

.list li:hover{

	background:#fff;

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

	

}

.list li:hover .border{

	opacity:1;

	left:195px;

	background:#B22222;

}

.text h2,.text a{

	font-family:"Microsoft YaHei";

	color:#333;

	text-shadow:1px 2px 4px #999;

	font-size:12px;

	font-weight:normal;

	-webkit-transition:0.2s all ease;

	-moz-transition:0.2s all ease;

	-ms-transition:0.2s all ease;

	-o-transition:0.2s all ease;

}

.text h2{

	margin-top: 10px;

}

.text h3{

	font-family:Verdana;

	font-size:14px;

	color:#666;

	font-weight:normal;

	-webkit-transition:0.3s all ease;

	-moz-transition:0.3s all ease;

	-ms-transition:0.3s all ease;

	-o-transition:0.3s all ease;

}

.list li:hover h2,.list li:hover  a{

	color:#000;

	font-size:12px;

	text-shadow:1px 2px 4px #333;

}

.list li:hover .text h3{

	color:#F60;

	font-size:18px;

	margin-top:1px;

}

.list li .icon{

	width:40px;

	height:48px;

	margin-left:5px;

	margin-top:15px;

	margin-right:5px;

	float:left;

	font-size:16px;

	font-family:'WebSymbolsRegular';

	line-height:48px;

	text-align:center;

	-webkit-transition:0.3s all ease;

	-moz-transition:0.3s all ease;

	-ms-transition:0.3s all ease;

	-o-transition:0.3s all ease;

	text-shadow:0 0 3px #CCCCCC;

	color: #1E1D1D;

}

.list li:hover .icon{

	color:#B22222;

	font-size:14px;

}

.list li:hover .text{

	-webkit-animation-name:shake;

	-moz-animation-name:shake;

}

.text{

	width:150px;

	height:auto;

	float:left;

	margin-top:5px;

	height:48px;

	-webkit-animation:.5s .2s ease both;

-moz-animation:1s .2s ease both;

}



@-webkit-keyframes shake{

0%,100%{-webkit-transform:translateX(0);}

20%,60%{-webkit-transform:translateX(-10px);}

40%,80%{-webkit-transform:translateX(10px);}

}

@-moz-keyframes shake{

0%,100%{-moz-transform:translateX(0);}

20%,60%{-moz-transform:translateX(-10px);}

40%,80%{-moz-transform:translateX(10px);}

}