.cl-bg{
	background: #fff;
}
.cl-banner {
	background:#fff url(../images/cl-banner.webp) no-repeat center;
	background-size: cover;
}
.cl-banner-title{
		display: flex;
		align-items: center;
}
.cl-banner-text {
	margin: 0;
}

.cl-banner-text h1 {
	font-size: 60px;
	line-height: 60px;
}
.cl-banner-text h1 span{
	color: #FF4218;
	font-weight: 600;
}
.mySwiper{
	width: 400px;
	height:480px;
}
.swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	height: 100%;
	width: 300px;
}

.swiper-slide:nth-child(1n) {
	background: linear-gradient(20deg, #FF9A26 20%, #E05B3E 80%) no-repeat;
}

.swiper-slide:nth-child(2n) {
	background: linear-gradient(120deg, #28DAA1 20%, #5591E2 80%) no-repeat;
}

.swiper-slide:nth-child(3n) {
	background: linear-gradient(120deg, #C26AD6 20%, #634DC0 80%) no-repeat;
}

.cover-play{
	padding: 30px;
}
.cover-play p{
	margin: 0;
	padding: 0;
}
.cover-play p img{
	border-radius: 16px;
	box-shadow: 4px 4px 8px rgb(0, 0, 0,0.2);
	margin: 0 0 8px 0;
}
.cover-play b{
	font-size: 42px;
	line-height: 46px;
	font-weight: 600;
}
.cover-pay-block{
	margin: 0;
	display: flex;
}
.cover-pay-title{
	margin: 10px 0;
}
.cover-pay-title p span{
	font-size: 18px;
}
.cover-pay-block p:nth-child(1){
	width:68px;
	padding: 0;
}
.ai-play{
	display: block;
	width: 62px;
	height: 62px;
	background: url(../images/ic-play-btn.svg) no-repeat center top;
	cursor: pointer;
	outline: none;
	border: 0;
}
.ai-pause{
	background: url(../images/ic-pause-btn.svg) no-repeat center top!important;
}
.audio-player{
	display: none;
}
.cover-paly-time{
	width: calc(100% - 68px);
	background: url(../images/ic-play-time1.svg) no-repeat center center;
}
.cover-time2{
	width: calc(100% - 68px);
	background: url(../images/ic-play-time2.svg) no-repeat center center!important;
}
.cover-time3{
	width: calc(100% - 68px);
	background: url(../images/ic-play-time3.svg) no-repeat center center!important;
}

.searhBtn{
	width: 100%;
	border: 2px #FFAE9D solid;
	border-radius: 8px;
	font-size: 20px;
	padding: 16px 16px 16px 52px;
	outline: #E05B3E;
	position: relative;
	background:#fff url(../images/ic-search-btn.svg) no-repeat 10px center;
}
.searhBtn::before{
	content: '';
	width: 24px;
	height: 24px;
	border: 2px #000 solid;
	display: block;
	position: absolute;
}
.block-title{
	text-align: center;
	padding: 30px 0;
}
.cover-main{
	margin: 0;
	justify-content: start;
	flex-wrap: wrap;
}

.cover-block{
	background: #F6F6F6;
	border-radius: 8px;
	padding: 16px;
	display: flex;
	cursor: pointer;
	position: relative;
	margin: 10px;
	color: #000;
}
.cover-block:hover{
	text-decoration: none;
	background: #FFF7F6;
}
.cover-block::after{
	content: '';
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	border: 2px #ccc solid;
	background: url(../images/ic-cover-play.svg) no-repeat center center;
	position: absolute;
	top: 45px;
	right: 20px;
}
.cover-block div:nth-child(1){
	width: 30%;
}
.cover-block div:nth-child(1) img{
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.cover-block div:nth-child(2){
	width: 70%;
	padding: 0 16px;
	display: flex;
	align-items: center;
}
.cover-block div:nth-child(2) p {
	overflow: hidden;
	padding: 0 38px 0 0;
}
.cover-block div:nth-child(2) p b{
	display: block;
	font-size: 20px;
	width: 100%;
	white-space: nowrap; 
	overflow: hidden;    
	text-overflow: ellipsis;
}
.cover-block div:nth-child(2) span{
	width: 100%;
	color: gray;
}
.pm0{
	padding: 0;
	margin: 0;
}


.cover-model-bg{
	background: #FFF7F6;
}
.cover-model{
	margin: 10px 0;
	padding: 20px;
	position: relative;
	overflow: hidden;
}
.cover-model p{
	margin: 0;
	padding: 0;
	text-align: center;
}
.cover-model p img{
	border-radius: 16px;
	width: 100%!important;
	height: auto!important;;
}
.cover-model p b{
	display: block;
	font-size: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 8px 0;
}
.cover-model div{
	height: 60px;
	text-align: center;
}
.cover-model div section{
	display: none;
}
.cover-model:hover div section{
	display: block;
}
.cover-model div section a{
	font-weight: 500;
	background: #FF4218;
	border-radius: 6px;
	font-size: 16px;
	color: #fff;
	padding: 4px 8px;
	margin: 0 8px;
	display: inline-block;
}
.cover-model div section a:hover{
	text-decoration: none;
}
.cover-model div section button{
	background: none;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 16px;
	border: 1px #FF4218 solid;
	cursor: pointer;
	color: #FF4218;
	font-weight: 500;
}
.cover-model-tag{
	position: absolute;
	width: 50px;
	height: 80px!important;
	background: url(../images/ic-covers-tag.svg) no-repeat center top;
	right: 20px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 14px;
	padding: 20px 0 0 0;
}
.cover-dl-flex{
	display: flex;
	align-items: center;
}
.cover-dl-blcok{
	cursor: pointer;
	padding:16px;
	box-shadow: 0 2px 6px rgb(188, 188, 188,0.2);
	border-radius: 8px;
	background: #fff;
	color: #000;
	margin: 30px 0;
}
.cover-dl-photos img{
	width: 100%;
	border-radius: 8px;
}
.cover-dl-title{
	padding: 0 30px;
}
.cover-dl-title p{
	margin: 0;
	padding: 0;
}
.cover-dl-title p b{
	font-size: 20px;
}
.cover-dl-title p span{
	color: gray;
	font-size: 16px;
	display: block;
	padding: 8px 0;
}
.cover-dl-view{
	text-align: center;
}
.cover-dl-view p{
	margin: 0;
	padding: 0;
}
.cover-dl-view p b{
	font-size: 20px;
}
.cover-dl-view p span{
	color: gray;
	font-size: 16px;
	display: block;
	padding: 8px 0;
}
.cover-dl-play{
	display: flex;
	align-items: center;
	justify-content: center;
}
.cover-dl-play button{
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
	background: none;
	border: 1px #ccc solid;
}

.cover-singify{
	background: url(../images/sf-bottom-bg.webp) no-repeat center;
	background-size: cover;
	border-radius: 16px;
	padding: 60px 120px;
}
.cover-singify-title{
	width: 50%;
}
.cover-singify-logo{
	display: flex;
	align-items: center;
}
.cover-singify-logo b{
	font-size: 28px;
	font-weight: bold;
	display: block;
	margin: 0 0 0 16px;
}

.cover-singify-title p a{
  display:inline-block
  border: none;
  background:linear-gradient(120deg,#FF9A26, #FF4218) no-repeat;
  border-radius:8px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 25px 60px;
  cursor: pointer;
  margin: 8px 0 0 0;
  transition: .3s linear;
  position: relative;
  top: 0;
  box-shadow: 0 4px 4px rgb(0, 0, 0,0.1);
}
.cover-singify-title p a:hover{
  top: -3px;
  background:linear-gradient(120deg,#FF9A26, #FF4218) no-repeat;
  box-shadow: 0 4px 8px rgb(0, 0, 0,0.2);
  text-decoration: none;
}
.search-title{
	display: flex;
}
.search-title h2{
	text-align: left;
	font-size: 24px;
	width: 80%;
}
.search-title p{
	width: 20%;
	text-align: right;
}
.search-title p span{
	font-size: 18px;
	color: gray;
	display: block;
	padding: 20px 0;
}
.nodata{
	text-align: center;
	padding: 30px;
}
.nodata p{
	margin: 0;
	padding: 8px 0;
}
.nodata p b{
	font-size: 24px;
}
.nodata p span{
	font-size: 16px;
	color: #555;
}
.coverloading{
	text-align: center;
	padding: 30px 0;
	display: none;
	min-height: 500px;
}
.coverpage{
	text-align: center;
}
.coverpage span{
	display: inline-block;
	border-radius: 4px;
	border: 1px #ccc solid;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
	font-weight:500;
	margin: 0 4px;
}
.coverpage span:hover{
	border: 1px #FF4218 solid;
	color: #FF4218;
}
.coverpage .sel{
	background:#FF4218;
	border: 1px #FF4218 solid;
	color: #fff;
}
