@charset "utf-8";
html, body{ width: 100%; }
body{ background-color: #2e0274; min-height: 100%; }
.swiper-container { position: fixed; background: url(../images/nav_bg.png) no-repeat center; text-align: center; z-index: 998; height: .7rem; width: 100%; }
.swiper-wrapper{ width: 6rem; margin: 0 auto; }
.swiper-slide{ height: 100%; width: 1.5rem !important; }
.swiper-slide.on{ background: url(../images/nav_font_bg.png) no-repeat center; background-size: 100% 100%; }
.swiper-slide a{ font-size: .25rem; line-height: .7rem; display: inline-block; width: 1.5rem; height: .7rem; color: #fff; }
.swiper-slide.on a{ color: #3c28d4 }

.content{ padding-top: .7rem; margin: 0 .3rem; padding-top: .9rem; padding-bottom: .2rem; }
.content .rule-box{ height: 3.4rem; padding: .1rem; position: relative; background: url('../images/panelbg.jpg') no-repeat center; background-size: cover; }
.rule-box .rule{ position: absolute; top: .1rem; left: .1rem; right: .1rem; bottom: .1rem; padding: .2rem .3rem; box-sizing: border-box; background-color: #e9ddfe; }
.rule-box .rule .title{ font-size: .26rem; color: #21085c; font-weight: bold; line-height: .4rem; }
.rule-box .rule .detail{ font-size: .22rem; color: #21085c; margin: .05rem 0; }

.dance-box{ width: 100%; background-color: #511dbb; margin-top: .2rem; margin-bottom: .2rem; border-radius: .05rem; }
#list{ display: none; width: 5.7rem; margin: 0 auto; padding-top: .1rem; overflow: hidden; }
#list .dance-info{ height: 2.4rem; width: 1.8rem; margin: 0 .05rem .1rem; box-sizing: border-box; background-color: #fff; float: left; }
#list .cover-img{ display: block; width: 1.8rem; height: 1.8rem; }
#list .cover-img img{ width: 1.8rem; height: 1.8rem; }
#list .nickname{ height: .3rem; font-size: .18rem; color: #180a33; line-height: .3rem; padding: 0 .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#list .dance{ height: .3rem; padding: 0 .1rem; }
#list .type{ line-height: .3rem; font-size: .18rem; color: #666; float: left; }
#list .play-num{ position: relative; padding-left: .3rem; line-height: .3rem; font-size: .18rem; float: right;}
#list .play-num::before{ content: ' '; display: block; height: .25rem; width: .25rem; position: absolute; left: 0; top: 0; background: url('../images/playicon2.png') no-repeat center; background-size: contain; }

.bottom{ height: .4rem; text-align: center; }
.bottom p{ display: inline-block; font-size: .24rem; color: #a598e5; line-height: .4rem; text-align: center; }
.bottom .loadmore{ display: none; width: 1rem; padding-right: .4rem; position: relative; margin: 0 auto; }
.bottom .loadmore::after{ content: ' '; display: block; width: .2rem; height: .2rem; position: absolute; top: .1rem; right: .1rem; background: url('../images/toloadicon.png') no-repeat center; background-size: cover; }
.bottom .loading img{ width: .24rem; height: .24rem; margin: 0 .1rem; vertical-align: middle; }

/* 导航 */
/*.swiper-container-style{
	background: url(../images/nav_bg.png) no-repeat center;
	text-align: center;
	height: .7rem;
	padding: 0 .2rem;
	position: fixed;
    z-index: 999;
    width: 100%;
}
.swiper-wrapper-style{
	width: 100%;
	height: .7rem;
	line-height: .7rem;	
}
.swiper-slide-style{
 	height: 100%;
	width: 1.8rem;
}
.width-slide{
	width: 1rem !important;
	margin-right: .39rem;
}
.swiper-slide-style a{
	width: 1.61rem;
	height: .7rem;
	font-size: .28rem;
	display: inline-block;
	color: #fff;
}
.swiper-slide-style:nth-child(4) a{
	color: #3c28d4;
	background: url(../images/nav_font_bg.png) no-repeat center;
	background-size: 100%;
	width: 1.61rem;
    height: .7rem;
}*/