html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
html{font-size:62.5%;} 
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }  
.middle {
    width: 100%;
    height:100%;
    height: auto;
    text-align:center;
    /*top: 0px;
    left: 0px;*/
    /*margin-left: -550px;
    position: absolute;*/
}
.middle .logo {
    width: 16%;
    height: 10%;
    /*left: 36%;
    top: 0px;
    position: absolute;*/
}
.middle ul {
    width: 100%;
    height:auto;
    z-index:2;
}
.middle .middlebg{
    width:80%;
    left: 10%;
    bottom: 22%;
    position: absolute;
    display:block;
    height:auto;
    background:url(../image/middlebg.png) repeat-x;
    border: 2px solid #808080;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
    z-index:1;
}
.middle ul li {
    position:relative;
    list-style: none outside none;
    float:left;
    text-align:center;
    width:22%;
    height:auto;
    margin:1%;
    margin-left:5%;
    display:inline-block;
    position:relative;
}
.middle ul li img {
    width: auto\9;
    height: auto;
    max-width: 100%;
}
.middle ul li span {
    position:absolute;
    bottom:15px;
    left:0;
    font-size:1.8rem;
    width:100%;
    color:white;
    font-weight:bold;
    font-family:'Microsoft YaHei';
    -webkit-text-stroke:1px #000000;
    z-index:999;
}