*{
                margin:0;
                padding:0;
            }
            .title{
                width:548px;
                height:119px;
                position:absolute;
                top:400px;
                left:150px;
                background:transparent url(title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
				width:70%;
				height:100%;
				float:right;
                margin:0 auto;
				/*background:url(../images/bg.png);*/
				background-repeat:no-repeat;
				background-size:cover;
                background-position: center center;
            }



.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
	
}
.navigation .item{
    position:absolute;
}
.user{
    top:70%;
    right:67%;
	
}
.home{
   top:40%;
   right:59%;
}
.shop{
   top:20%;
   right:45%;
}
.camera{
   top:13%;
   right:30%;
}
.fav{
   top:22%;
   right:15%;
}
a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}
b.iconbg-small{
    width:128px;
    height:128px;
    position:absolute;
    top:-38px;
    left:-38px;
    cursor:pointer;
    background-image: url(../images/r2.png);
    background-size: 100%;
    -webkit-animation-name: spin;
-webkit-animation-duration: 8000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 8000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 8000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 8000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.iconbg-bg{visibility: hidden;}
b.iconbg{
    width:168px;
    height:168px;
    position:absolute;
    top:-58px;
    left:-58px;
    cursor:pointer;
    background-image: url(../images/r4.png);
    background-size: 100%;
    -webkit-animation-name: spin;
-webkit-animation-duration: 8000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 8000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 8000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 8000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
b.iconbg2{
    width:84px;
    height:84px;
    position:absolute;
    top:-16px;
    left:-16px;
    cursor:pointer;
    background-image: url(../images/r3.png);
    background-size: 100%;
}

b.iconbg-bg{
    width:198px;
    height:198px;
    position:absolute;
    top:-73px;
    left:-73px;
    cursor:pointer;
    background-image: url(../images/r2.png);
    background-size: 100%;
    -webkit-animation-name: spin;
-webkit-animation-duration: 8000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 8000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 8000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 8000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@-ms-keyframes spin2 {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(-360deg); }
}
@-moz-keyframes spin2 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-360deg); }
}
@keyframes spin2 {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}
.user a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.home a.icon{
    background:transparent url(../images/home.png) no-repeat 0px 0px;
}
            .fist a.icon{
                background:transparent url(../images/fist.png) no-repeat 0px 0px;
            }
.shop a.icon{
    background:transparent url(../images/shop.png) no-repeat 0px 0px;
}
.camera a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.fav a.icon{
    background:transparent url(../images/fav.png) no-repeat 0px 0px;
}
.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:white;
    font-size:24px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
    text-transform:uppercase;
	font-family:"微软雅黑";
	
}
.item p{
    position:absolute;
    width:147px;
    color:#222;
    font-size:18px;
    top:52px;
    left:52px;
    white-space: nowrap;
    padding-left:10px;
    line-height:auto;
    text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    text-transform:uppercase;
	font-family:"微软雅黑";
	
}
.item p > a{text-decoration: none; display: inline-block; margin-bottom: 8px; color: white}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}