/* 首页轮播 */
.banner-box {
	padding:40px 0;
	overflow:hidden;
}
.banner .item {opacity:.6;overflow:hidden;}
.banner .pic {position:relative;padding-top:44.8%;height:0;transition: .5s;display: block;}
.banner .pic img{transition: .5s;}
.banner .slick-list {padding:0 17.3% !important}
.banner .item img {
	position:absolute;
	top: 7%;
	left:50%;
	display:block;
	height:86%;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	transform: translateX(-50%);
}
.banner .item.slick-current {
	padding: 0;
	opacity: 1;
}
.banner .item.slick-current .pic img {
	top: 0;
	height: 100%;
}
.banner .slick-slide {
	transition: .5s;
}
.banner .slick-arrow {
	display:none !important;
	width:100px;
	height:120px;
	background-color:rgba(255,255,255,.4);
	color: #333;
}
.banner-box:hover .banner .slick-arrow {display:inline-block!important}
.banner .slick-dots {position:absolute;left:0;bottom:20px;}
.slick-list {width:1609px;max-width:100%;margin:0 auto}


/* 歌曲分类 */
.case-box {
	margin: 30px 0;
}
.case-list .item{
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.case-list .bg img{width:100%;}
.case-list .mk{position: absolute;top:0;left:15px;width:calc(100% - 30px);height:100%;display: flex;justify-content: center;align-items: center;font-size:22px;color:#fff;}
.case-list .mk img{margin-right:15px;}

.case-list .mk i.icon{font-size:4rem;}

/* 分类用户信息 */
.fl-userinfo{display: flex;background-color: #efefef;padding:2rem 1rem;}
.fl-userinfo .head{flex:1;overflow: hidden;}
.fl-userinfo .head img{border-radius: 50%;}
.fl-userinfo .infos{flex:2;margin-left:15px;}
.fl-userinfo .info2{display: flex;align-items: stretch;}
.fl-userinfo .infos .name{margin-bottom:10px;text-align: center;}
.fl-userinfo .infos .name span{font-size:18px;}
.fl-userinfo .info2 .item{border-left:1px solid #ddd;width:33.33%;text-align: center;font-size:14px;}
.fl-userinfo .info2 .item:nth-child(1){border-left:none;}
.fl-userinfo .info2 .item .tit{color:#888;}
.fl-userinfo .icon{color:#ffcc00;margin-left:5px;font-size:16px;}

/* 热门榜单 */
.hot-tag {
	font-size:12px;
	background-color: #eee;
	padding:2rem 0;
	display: flex;
}
.hot-tag .tit{
	min-width:110px;
	padding: 0 20px;
}
.tit .icon-fire{color: #ef4d3a;margin-right:5px;}
.hot-tag button{
	display: inline-block;
	height: 22px;
	padding:2px 15px;
	color:#666;
	border: 0;
	background: transparent;
	outline: 0;
}
.hot-tag button:hover{
	color: #ef4d3a;
}
.hot-tag button.hot{
	background-color: #ef4d3a;
	color:#fff;
}
.hot-tag button.hot:hover{
	color: #fff;
}

.hot-bg{
	padding:20px 40px;
	padding-bottom:0;
	background-color: #fff;
}
.hot-list {
	display: none;
}
.hot-list:first-child {
	display: block;
}
.hot-list li{
	display: flex;
	min-height: 44px;
	padding-left: 35px;
	font-size: 14px;
	margin-bottom: 1.8rem;
}
.hot-list .num{position: absolute;display: inline-block;top:0;left:0;color:#ddd;font-size:20px;font-weight: bold;line-height:1em;font-style: italic;}
.hot-list .name .music-name{
	font-weight: bold;
	font-size:15px;
	color:#000;
}
.hot-list .left, .hot-list .name .start{
	color: #888;
}
.hot-list .name .start{
	padding: 0 10px;
}
.hot-list .right{
	margin-left:auto;
	margin-right:2rem;
}
.hot-list .right div{
	height: 22px;
	text-align: right;
}
.hot-list .right a, .hot-list .right button {
	padding:0 5px;
	color:#888;
}
.hot-list .right a:hover, .hot-list .right button:hover {
	color:#ef4d3a;
}

/* 曲谱推荐 */
.qptj-bg{background-color: #fff;padding:20px;}
.qptj-list li {
	position: relative;
	display: flex;
	align-items: stretch;
	margin-bottom: 14px;
}
.qptj-list .img{flex:1 ;cursor: pointer;}
.qptj-list .info{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 20px;
	flex:2.5;
}
.qptj-list .info .tit{margin-bottom:1rem;font-weight: bold;font-size:14px;}
.qptj-list .info .pubs{
	margin-bottom:1rem;
	font-size:14px;
	color:#888;
	font-size:12px;
}
.qptj-list .info .tag{
	margin-right:20px;
	padding:2px 5px;
	display: inline-block;
	color:#ef4d3a;
	border:1px solid #ef4d3a;
	border-radius: 4px;
}
.qptj-list .info .sbtn a{color:#888;padding-right:5px;}
.qptj-list .info .sbtn a:hover{color: #ef4d3a;}

.rmgs-list {display: none;}
.rmgs-list:first-of-type {display: block;}
.rmgs-box .slick-arrow {width:40px;height:40px;border-radius: 50%;top:20%;background: #ef4d3a;color: #fff;}
.rmgs-box .slick-dots li {display:inline-block;margin:0 9px;padding:0;float:unset;width: auto;}
.yzzz-box li {margin-bottom: 0}

@media screen and (max-width:768px) {
	.banner-box {padding:30px 12px;}
	.banner {
		height: 280px;
	}
	.banner .slick-list, .banner .slick-track, .banner .item, .banner-box .banner .item .pic {
		height: 100%;
	}
	.banner .slick-list {
		padding: 0 !important;
	}
	.banner-box .item img {
		position: relative;
		top: 0;
		padding:0;
		height: 100%;
	}
	.banner-box .item .pic {
		padding-top: 0!important;
		border-radius: 10px;
		overflow: hidden;
	}
	.banner-box .slick-dots>li button {
		width: 10px;
		height: 2px;
		border-radius: 0;
	}

	.case-list .mk {
		font-size: 20px;
	}

	.case-list .mk i.icon {
		font-size:2.5rem;
	}

	.hot-box, .qptj-box {width:100%;padding:0;}

	.hot-list li {
		padding-right: 0;
	}

	.hot-list .right {
		margin-right: 0;
	}

	.case-box {
		margin-bottom: 0;
	}

	.case-list li {
		width: 50%;
		margin-bottom:30px;
	}

	.case-list li .mk img {
		width:24px;
	}
	.case-list li .item {
		border-radius: 10px;
	}

	.hot-tag .tit {
		min-width: 80px;
		padding: 0 20px 0 15px;
	}
}

@media screen and (max-width:600px) {
	.banner {
		height: 200px;
	}
}

@media screen and (max-width:375px) {
	.case-list .mk {
		font-size: 16px;
	}

	.hot-bg {
		padding: 20px 30px;
	}

	.hot-list li {
		padding-left: 30px;
	}

	.hot-list .name .music-name {
		display: block;
	}

	.qptj-list li {
		margin-bottom: 52px;
	}

	.qptj-list .info .pubs {
		width: 100%;
		position: absolute;
		right: 0;
		bottom: -26px;
		margin: 0; 
	}

	.qptj-list .img {
		position: relative;
		overflow: hidden;
	}

	.qptj-list .img img{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		max-width: unset;
		height: 100%;
	}
}