.clearfix::after{ clear: both; display: block; height: 0; content: '';}
#container{ margin: 0 auto;}
#container li{ position:relative;text-align: center;cursor: pointer;  overflow: hidden;}
#container li p{ text-align:center;height:100%; width: 100%; position: absolute; left: 0;  color: #ffffff;z-index: 2;}
#container li .img{ display: block;
-moz-transition:.5s ease-in;
-webkit-transition:.5s ease-in;
-o-transition:.5s ease-in;
-ms-transition:.5s ease-in;
transition:.5s ease-in;}
#container li:hover .img{ transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1)}
#container li p i{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #003355; opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70); font-size: 16px; }
#container li p span{ display: block; width: 94%; margin: 0 auto; line-height: 24px; font-size: 22px; }
#container li p a{ display: block; position: absolute; width: 32px; height: 32px; left:50%; margin-left: -16px; top:120px; background:url("../image/link.png") no-repeat 0 0;}