#top {
	width: 100%;
	height: 672px;
	max-width: 1920px;
	background: url(../images/bg/top-bg.jpg) no-repeat center top;
}
#top .nav {
	width: 100%;
	max-width: 1920px;
	height: 107px;
	min-width: 1260px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: url(../images/nav-bg.png) no-repeat center top;
}
#top .nav ul{
	width: 1260px;
	margin: 0 auto;
}
#top .nav ul li {
	display: inline-block;
	width: 162px;
	height: 72px;
	font-size: 0;
}
#top .nav ul li.join {
	margin-left: 60px;
}
#top .nav ul li.rule {
	margin-left: 420px;
}
#top .nav ul li.all {
	margin-left: 58px;
}
#top .nav ul li a,
#middle1 a,
#bottom .more,
#middle1 .activity,
#middle1 .review,
#middle1 .reward {
	display: block;
}
#top .nav ul li a i,
#middle1 a,
#bottom .more,
#middle1 .activity,
#middle1 .review,
#middle1 .reward {
	background-image: url(../images/sprites.png);
}
#top .nav ul li a i {
	display: block;
	width: 162px;
	height: 72px;
}
#top .nav ul li.back a i {
	background-position: 0px 0px;
}
#top .nav ul li.back:hover a i {
	background-position: -161px 0px;
}
#top .nav ul li.join a i {
	background-position: -323px 0px;
}
#top .nav ul li.join:hover a i {
	background-position: -485px 0px;
}
#top .nav ul li.rule a i {
	background-position: -647px 0px;
}
#top .nav ul li.rule:hover a i {
	background-position: -808px 0px;
}
#top .nav ul li.all a i {
	background-position: 0px -72px;
}
#top .nav ul li.all:hover a i {
	background-position: -161px -72px;
}
#middle1 {
	width: 100%;
	height: 705px;
	max-width: 1920px;
	background: url(../images/bg/middle-bg1.jpg) no-repeat center top;
	position: relative;
}
#middle1 .activity {
	width: 404px;
	height: 205px;
	position: absolute;
	left: 50%;
	margin-left: -606px;
    top: 220px;
	cursor: pointer;
	background-position: 0px -509px;
}
#middle1 .activity:hover {
	background-position: -409px -728px
}
#middle1 .review {
	width: 406px;
	height: 209px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
    top: 220px;
	cursor: pointer;
	background-position: -409px -509px;
}
#middle1 .reward {
	width: 388px;
	height: 204px;
	position: absolute;
	left: 50%;
	margin-left: 305px;
    top: 220px;
	cursor: pointer;
	background-position: 0px -728px;
}
#middle1 .download {
	width: 459px;
	height: 152px;
	position: absolute;
	left: 50%;
	 margin-left: -430px;
    top: 525px;
    background-position: 0px -205px;
/*	background-color: red;*/
}
#middle1 .joinbtn {
	width: 375px;
	height: 152px;
	position: absolute;
	left: 50%;
	 top: 525px;
	  margin-left: 72px;
	  background-position: -485px -205px
/*	background-color: red;*/
}
#middle2 {
	width: 100%;
	height: 920px;
	max-width: 1920px;
	background: url(../images/bg/middle-bg2.jpg) no-repeat center top;
}
#bottom {
	width: 100%;
	height: 1665px;
	max-width: 1920px;
	position: relative;
	background: url(../images/bg/bottom-bg.jpg) no-repeat center top;
}
#bottom .show {
	width: 1215px;
	margin: 0 auto;
	padding-top: 160px;
}
#bottom .show ul li {
	float: left;
	margin-right: 25px;
	margin-bottom: 20px;
}
#bottom .show ul li a {
	position: relative;
	display: block;
	width: 278px;
	height: 325px;
}
#bottom .show ul li a img {
	position: absolute;
	top: 9px;
	left: 9px;
	width: 259px;
	height: 257px;
}
#bottom .show ul li a .img-frame {
	position: absolute;
	width: 278px;
	height: 325px;
	background: url(../images/listbg.png) no-repeat center top;
}
#bottom .show ul li a .img-frame p {
	font-size: 25px;
	color: #fff;
}
#bottom .show ul li a .img-frame p.author {
	margin-top: 252px;
	margin-left: 13px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width: 230px;
}
#bottom .show ul li a .img-frame p.works-name {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
}
#bottom .more {
	    width: 400px;
    height: 152px;
    /* background-color: red; */
    position: absolute;
    left: 50%;
    margin-left: -220px;
    top: 925px;
    background-position: 0px -1170px;
	
}
#back-top {
	position: fixed;
	top: 312px;
	right: 5px;
	cursor: pointer;
}
#popup {
	position: fixed;
	width: 100%;
	top: 0px;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	display: none;
	z-index: 10000;
}
#popup .popup-content {
	position: fixed;
	left: 50%;
	margin-left: -478px;
	top: 50px;
	width: 956px;
	height: 609px;
	top: 110px;
}
#popup .popup-content #close {
	width: 53px;
	height: 56px;
	position: absolute;
	left: 894px;
	top: 5px;
	cursor: pointer;
	background-image: url(../images/sprites.png);
	background-position: 0px -144px;
}
#popup .popup-content #close:hover {
	background-position: -61px -144px;
}
.rule_box{
	width: 1px;
	height: 1px;
	position: absolute;
	left: 50%;
    top: 1000px;
    opacity: 0;
}