img{
	max-width:100%;
	height:auto;
	display: block;
	width:100%;
}
.container{
	width:100%;
	height:auto;
	position:relative;
	padding-top: 40px;
	background-color: #F6F6F6;
}
header{height:50px;
	/*---滑动需要---*/
	/*margin-bottom: 50px;*/
}
.filter-part{
	width:100%;
	height:50px;
	background-color: #f6f6f6;
	position: relative;
	/*---滑动需要---*/
	position: fixed;
	top:50px;left:0;
	z-index:400;
	-webkit-transition:top 0.5s ease 0s;
			transition:top 0.5s ease 0s;
}
.filter-part.moveup{
	top:-2px;
}
.filter-part{
	box-shadow: rgb(204, 204, 204) 0px 1px 3px;
}
.filter-part .inner{
	width:80%;
	height:100%;
	position: absolute;
	left:0;
	right:0;
	margin:0 auto;
}
.cate{
	width: 10%;
	height:100%;
	float: left;
	position: relative;
}
.cate h3{
	position: absolute;
	width:100%;
	min-width: 85px;
	text-align: center;
	top:50%;
	left:50%;
	/*font-size: 14px;*/
	text-align: left;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
.wrapletter{
	width:90%;
	height:100%;
	display: inline;
	float: left;
	color:#808080;
}
.wrapletter ul{
	padding-left: 1.2%;
	display: block;
	width:100%;
	height:100%;
	position: relative;
}
.wrapletter ul li{
	width:3.8%;
	height:100%;
	/*display: inline-block;*/
	float:left;
	position: relative;
	text-align: right;
}
.letter span{
	display: block;
	position: absolute;
	font-size:14px;
	color:#808080;
	top:50%;
	/*left:50%;*/
	right:0;
	transform:translate(0,-50%); 
	-webkit-transform:translate(0,-50%);
}
.search {
	width:10%;
	height:100%;
	float:right;
	position:relative;
}
.search_logo{
	background:url(../img/icon/icon1.svg) no-repeat -438px 0;
	width:20px;
	height:20px;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	cursor: pointer;
}
/*内容区域*/
.content{
	width:80%;
	height:auto;
	margin:0 auto;
	position: relative;
	margin-bottom: 40px;
}
.loading{
	width:100%;
	height:120px;
	position: relative;
}
.loading p{
	/*font-size: 24px;*/
	width:100%;
	position: absolute;
	top:50%;
	text-align: center;
	cursor:pointer;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	
}
.loading span {
	color:#FC2508;
}
.artists{
	width:100%;
	height:auto;
	position:relative;
}
.artist{
	width:48%;
	height:auto;
	float: left;
	position:relative;
	margin-bottom: 60px;
	/*background-color: #FFF;*/
}
.artist:nth-child(2n+1){
	margin-right: 2%;
}
.artist:nth-child(2n){
	margin-left: 2%;
}
/*to res*/
.res_name{
	display:none;
	position: absolute;
	bottom: 0;
	width:95%;
	padding-right: 5%;
	text-align: right;
	height:28px;
	background-color: #F6F6F6;
	opacity: 0.5;
	font-size:14px;
	line-height: 30px; 
}
.cluster{
	width:58.8%;
	height:auto;
	margin-top: 3.5%;
	padding: 1% 0;
	float: left;
	overflow: hidden;
	position:relative;
	vertical-align: middle;
	background-color: #FFF;
	box-shadow: rgb(220, 220, 220) 0px 4px 8px;
}
.cluster .sub{
	width:48%;
	height:auto;
	float: left;
	margin:0.5% 0;
}
/*4种样式 bug to fix*/
.tmp4 .sub:nth-child(2n+1){
	margin-left:2%;
	margin-right: 1%;
}
.tmp1 .sub:nth-child(1){
	width:97%;
	margin-left: 2%;
	margin-right: 1%;
}
.tmp1 .sub:nth-child(2){
	display: none;
}
.tmp2 .sub:nth-child(2n+1){
	width:48%;
	margin-left:2%;
	margin-right: 1%;
}
.tmp2 .sub{
	width:48%;
}
.tmp3 .sub:nth-child(1){
	width:48%;
	margin-left: 2%;
	margin-right: 1%;
}
.tmp3 .sub:nth-child(2),.tmp3 .sub:nth-child(3){
	width: 48%;
}
.front{
	width:34%;
	height:auto;
	padding: 0.5%;
	position: relative;
	float:left;
	background-color: #FFFFFF;
	box-shadow: rgb(204, 204, 204) 0px 4px 8px;
}
.front img{
	display: block;
	float:right;
}
.front:hover{
	padding: 0;
	margin:0.5%;
}
.front:hover a{
	border: 3px solid #FFFFFF;
	width:60%;
	height:80%;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	/*a被覆盖，修改其z-index by lmf 20160929*/
	z-index: 10;
}
.front a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
}
.art_name{
	width:6%;
	/*height:100%;*/
	float:left;
	margin-top: 3.5%;
	overflow: hidden;
	position: relative;
	background-color: #FFF;
	box-shadow: rgb(204, 204, 204) 0px 4px 8px;
	/*height: auto;*/
	/*width: auto;*/
	height: 289px;
}
.art_name h3{
	display:block;
	word-break: keep-all;
	white-space: nowrap;
	line-height: 24px;
	font-size:14px;
	letter-spacing: 2px;
	/*position: absolute;*/
    	transform-origin:0 0;
	-ms-transform-origin:0 0;
	-webkit-transform-origin:left bottom;
	-moz-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	
	width: auto;
	/*background-color: #FFF;*/
}
/*弹出搜索框*/
.over_search{
	position: fixed;
	width: 100%;
	height:auto;
	min-height:100%;
	display: none;
	overflow: auto;
	background: rgba(0,0,0,0.9);
	/*background-color: #000;
	opacity:0.9;*/
	z-index: 999;
	color:#FFF;
}
.over_search .inner{
	position: absolute;
	width:72%;
	margin-left: 14%;
	margin-right: 14%;
	margin:0 auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
.o_search{
	background: url(../img/icon/icon1.svg) no-repeat -517px 0;
	width:24px;
	height:24px;
	cursor:pointer;
	position: absolute;
	top:0;
	bottom: 0;
	right:0;
	left:0;
	margin:auto;
}
.o_cancel{
	background: url(../img/icon/icon1.svg) no-repeat -595px -125px;
	width:24px;
	height:24px;
	/*float:right;*/
	position: absolute;
	right: 30px;
	top:30px;
	z-index: 9999;
	/*margin-bottom: 10px;*/
	cursor:pointer;
}
.o_input{
	width:100%;
	height:58px;
	position: relative;
	border-bottom: 1px solid #FFF;
	overflow: hidden;
}
.o_input input{
	width:100%;
	/*margin-left: -1px;
	margin-top:-1px;*/
	font-size: 24px;
	line-height: 200%;
	padding-bottom:50px;
	/*text-indent: 50px;*/
	margin-left: 50px;
	color:#FFF;
	/*background-color:#000; 
	opacity:0.9;*/
	background-color:transparent;
	border:none;	
}
.o_input .wrap{
	width:24px;
	height: 100%;
	position: absolute;
	top:40%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
}
.result{
	width:100%;
	height:auto;
	min-height: 400px;
	margin-top: 40px;
	position: relative;
}
.r_feed{
	font-size: 14px;
	color:#808080;
}
.r_num{
	width:100px;
	height:100px;
	text-align: center;
	color:#FFF;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
.r_num .wrap{
	width:300px;
	height:auto;
}
.r_num span:first-child{
	font-size: 48px;
}
.r_num span:last-child{
	font-size: 18px;
}
body{
	min-width: 1124px;
}

/*responsive*/
@media screen and (min-width: 1920px){
	/*body{
		font-size: 20px;
	}*/
	
	.front_right h1{
		font-size: 90px;
	}
}
@media screen and (min-width: 1441px){
	.cate h3{
		font-size: 18px;
	}
	.letter span{
		font-size: 18px;
	}
	.link{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		border: 2px solid #f33;
		margin-left: 10px;
	}
}


@media screen and (max-width: 1024px){
	.art_name span{
		font-size: 12px;
	}
	.art_name h3{
		line-height: 16px;
	}
	body{
		min-width:0;
	}
}
@media screen and (max-width:850px){
	
}
@media screen and (max-width: 768px){
	body{
		min-width:0;
	}
	.container{
		padding-top: 0px;
	}
	.backTop{
		right:30px;
		bottom:83px;
	}
 	.artist{
 		width:100%;
 		margin-left:0;
 		margin-right: 0;
 		margin-top:5px;
 	}
	.cluster .sub{
		margin:0;
	}
	.front{
		padding:0;
	}
	.front:hover{
		padding: 0;
		margin:0;
	}
	.front a:hover{
		border: 0;
		width:100%;
		height:100%;
		left:0;
		top:0;
		transform:translate(0,0);
		-webkit-transform:translate(0,0);
	}
 	.res_name{
 		display: block;
 		font-size:12px;
 	}
	/*.cate h2{
		width:80%;
		font-size: 14px;
		min-width: 0;
	}*/
	.cate h3{
		text-align: center;
	}
 	.filter-part>.inner{
 		width:100%;
 		font-size: 12px;
 	}
 	.over_search .inner{
 		width:92%;
 		left:4%;
 		right:4%;
 	}
 	.o_cancel{
 		right:20px;
 	}
 	.o_input{
 		height:60px;
 	}
 	.o_input input{
 		font-size: 18px;
 		line-height: 45px;
 		padding-bottom: 40px;
 		background-color: transparent;
 	}
 	.r_feed{
 		font-size: 16px;
 	}
 	.r_num span:first-child{
 		font-size: 48px;
 	}
 	.r_num span:last-child{
 		font-size: 18px;
 	}
 	.cate{
 		width:20%;
 	}
 	.letter span{
 		/*font-size: 18px;*/
 		font-size: 12px;
 	}
 	.wrapletter{
 		width:70%;
 		position: relative;
 		overflow: hidden;
 	}
 	.r_num span:first-child{
 		font-size: 36px;
 	}
 	.wrapletter ul{
		/*overflow: auto;*/
		overflow:hidden;
		position: relative;
		width:1560px;
		height:100%;
		/*margin-left: -560px;*/
 	}
 	.wrapletter ul li{
 		width:60px;
 	}
 	.content{
 		width:100%;
 	}
 	.artist .cluster{
 		width: 49.6%;
 		height:100%;
 		padding:0;
 		float:right;
 		position: relative;
 		overflow: hidden;
 	}
 	.cluster .sub:nth-child(2n+1){
 		margin-left: 0;
 		margin-right: 0;
 	}
 	.cluster  .sub{
 		display: none;
 	}
 	/*.cluster .sub:nth-child(1){
 		display: block;
 		position: absolute;
 		top:0;
 		right:0;
 	}
 	.cluster .sub:nth-child(2){
 		display: block;
 		position: absolute;
 		bottom:0;
 		right:0;
 	} */
 	.cluster .sub img{
 		display: block;
 		/*float:right;*/
 		vertical-align: text-bottom;	
 	}
 	.artist:nth-child(2n+1){
	  margin-right: 0;
	}
	.artist:nth-child(2n){
		margin-left: 0;
	}
 	.art_name{
 		display: none;
 	}
 	.cluster .sub{
		width: 100%;
 	}
 	.artist .front{
 		width:49.6%;
 		/*width:90%;
 		margin: 0 5%;*/
 		margin-right: 0.8%;
 		float: left;
 	}
 	/*bug fixed s*/
 	.cluster{
 		position: relative;
 		margin-top: 0px;
 		background-color: #F6F6F6;
 	}
 	.cluster .sub img{
 		width:100%;
 		height:100%;
 	}
 	.cluster .sub:nth-child(1){
 		display: block;
 		/*position: absolute;*/
 		/*top:0;
 		right:0;*/
 	}
 	.cluster .sub:nth-child(2){
 		display: block;
 		/*position: absolute;*/
 		/*bottom:0;
 		right:0;*/
 	} 
 	.tmp4  .sub{
		height:49.2%;
 	}
 	.tmp4 .sub:nth-child(1){
		top:0;
		right:0;
 	}
 	.tmp4 .sub:nth-child(2){
		bottom:0;
		right:0;
 	}
 	.tmp1 .sub:nth-child(1){
 		width:100%;
 		height:49.2%;
 		/*position: absolute;*/
 		/*top:0;*/
 		/*right:0;*/
 	}
 	.tmp1 .sub:nth-child(2){
		width:100%;
		height:49.2%;
		position: absolute;
		right: 0;
		bottom: 0;
 	}
 	.tmp1 .sub:nth-child(2){
		display: block;
	}
 	.tmp2 .sub:nth-child(1){
 		width:100%;
 		height:100%;
 	}
 	.tmp2 .sub:nth-child(2){
 		display: none;
 	}
 	.tmp3 .sub:nth-child(1){
		width:100%;
		height:100%;
 	}
 	.tmp3 .sub:nth-child(2),.tmp3 .sub:nth-child(3){
 		display: none;
 	}
 	/*bug fixed e*/
 	.category{
 		margin-top: 60px;
 	}
 	.info_title{
		width:100%;
		height:50%;
		position:absolute;
		bottom: 0;
	}
	.info_img{
		width:100%;
		height:50%;
		position:absolute;
		top:0;
	 }
	 .artist{
	 	margin-top: 25px !important;
	 	margin-bottom: 0px;
	 }
	 .artist:first-child{
	 	margin-top: 0px;
	 }
	 .loading{
	 	height:100px;
	 }

}