body {
	list-style-type: none;
	background: #DDD;
	min-height: 80vh;
	box-sizing: border-box;
	margin: 0;
}

.filtr-container {
	list-style-type: none;
	position: relative;
	margin-left: 5px;		/*边框距离*/
	margin-right: 5px;		/*边框距离*/
	padding: 1em;
	margin-bottom: 20px;
	background: hsla(0,0%,100%,.25) border-box;
	overflow: hidden;
	border-radius: .3em;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                                    0 .5em 1em rgba(0, 0, 0, 0.6);
}

                /*使用滤镜模糊边缘*/

		.button{
			font-size: 20px !important;
			width: 140px;
			line-height: 38px;
			text-align: center;
			color: #000;
			text-shadow:1px 1px 1px #333;
			border-radius: 5px;
			margin:0 20px 20px 0;
			position: relative;
			overflow: hidden;
		}
		.button:nth-child(6n){
			margin-right: 0;
		}
		.button.gray{
			color: #8c96a0;
			text-shadow:1px 1px 1px #fff;	/* --标签备注  */  
			border:1px solid #dce1e6;
			box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;	/* --标签备注  */  
			background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
			background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
			background: linear-gradient(top,#f2f3f7,#e4e8ec);
		}
		.button.blue{
			border:1px solid #1e7db9;
			box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
			background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
			background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
			background: linear-gradient(top,#42a4e0,#2e88c0);
		}



                /*以上添加*/









.filtr-container::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: -30px;
	z-index: -1;
	-webkit-filter: blur(20px);
	filter: blur(20px);
}

.claTick {
	opacity: 0;
	list-style-type: none;
	width: 70px;
	height: 70px;
	background-size: 100% 100%;
	z-index: 3;

	
}

.cradname {
	background-size: 100px;
	line-height: 25px;
	color: #FFF;
	font-size: 18px;
	margin-top: 5px;
}

.tile {
	display: inline-block;
	position: relative;
	width: 100px;
	height: 120px;
	float: left;
	margin-left: 2px;		/*  图片之间 | 间隔*/
	margin-bottom: 2px;		/*  图片之间 - 间隔*/
}

.tile img {
	width: 100px;
	height: 120px;
	border-radius: 10px;
}

.biaoti {
	margin-left: 20px;
	font-size: 70px;
	color: #008CBA;
	text-shadow: 0.03em 0.03em 0.03em #444;
	font-weight: bold;
}

.searchinput {
	border-right-width: 0px;
	padding-left: 3px;
	font-size: 28px;
	width: 500px;
	float: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	color: #000;
	vertical-align: middle;
	border-left-width: 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 5px;
}

.searchinput2 {
	border-right-width: 0px;
	padding-left: 3px;
	font-size: 28px;
	width: 310px;
	float: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	color: #000;
	vertical-align: middle;
	border-left-width: 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 5px;
}

.test_box {   
             width: 650px;  
             _height: 10px;    
             margin-left: auto;   
             margin-right: auto;  
             padding: 3px;    
             outline: 0;    
             border: 1px solid #a0b3d6;    
             font-size: 12px;    
             word-wrap: break-word;   
             overflow-x: hidden;    
             overflow-y: auto;    
             _overflow-y: visible;
          }



.tab_search {
	text-align: center;
	font-size: 28px;
	background-color: #fff;
	height: 60px;
	border-top-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 5px;
}

.buton {
	width: 140px;
	height: 60px;
	font-size: 26px;
	text-align: center;
	color: #fff;
	border: 2px solid #ff0000;
	background-color: #ff0000;
	border-top-left-radius: 0px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 0px;
}


.butrest {
	width: 130px;
	height: 60px;
	font-size: 26px;
	text-align: center;
	color: #fff;
	background-color: #ff0000;
	border: 2px solid #ff0000;
	margin-left: 12px;
	border-radius: 5px;
}


.butrest1 {
	width: 130px;
	height: 60px;
	font-size: 26px;
	text-align: center;
	color: #fff;
	background-color: #ff00ff;
	border: 2px solid #ff00ff;
	margin-left: 12px;
	border-radius: 5px;
}

.butrest2 {
	width: 100px;
	height: 60px;
	font-size: 26px;
	text-align: center;
	color: #fff;
	background-color: #00aaff;
	border: 2px solid #00aaff;
	margin-left: 12px;
	border-radius: 5px;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.item-desc {
	white-space:nowrap;  /* --不换行  --*/ 
	text-transform: capitalize;     /* --标签备注:首字母大写  --*/ 
	/* --标签备注:首字母大写 background-color: rgba(0,0,0,0.7);	取消文字底色 */  
	background-color: rgba(255,0,0,0.7);
	position: absolute;
	text-align: center;
	z-index: 1;
	width: 100px;
	line-height: 20px;
	color: #FFF;
	font-size: 16px;
	top: 100px;
	left: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.item-desc1 {
	white-space:nowrap;  /* --不换行  --*/ 
	text-transform: capitalize;     /* --标签备注:首字母大写  --*/ 
	/* --标签备注:首字母大写 background-color: rgba(0,0,0,0.7);	取消文字底色 */  
	background-color: rgba(255,0,255,0.7);
	position: absolute;
	text-align: center;
	z-index: 1;
	width: 100px;
	line-height: 20px;
	color: #FFF;
	font-size: 16px;
	top: 100px;
	left: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.item-desc2 {
	white-space:nowrap;  /* --不换行  --*/ 
	text-transform: capitalize;     /* --标签备注:首字母大写  --*/ 
	/* --标签备注:首字母大写 background-color: rgba(0,0,0,0.7);	取消文字底色 */  
	background-color: rgba(0,0,255,0.7);
	position: absolute;
	text-align: center;
	z-index: 1;
	width: 100px;
	line-height: 20px;
	color: #FFF;
	font-size: 16px;
	top: 100px;
	left: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.item-desc3 {
	white-space:nowrap;  /* --不换行  --*/ 
	text-transform: capitalize;     /* --标签备注:首字母大写  --*/ 
	/* --标签备注:首字母大写 background-color: rgba(0,0,0,0.7);	取消文字底色 */  
	background-color: rgba(255,100,0,0.8);
	position: absolute;
	text-align: center;
	z-index: 1;
	width: 100px;
	line-height: 20px;
	color: #FFF;
	font-size: 16px;
	top: 100px;
	left: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}




.cradmenu {
	background-color: #999;
	margin-left: 30px;
	margin-right: 30px;
}

input[type="radio"] {
	display: none;
}


input[type="radio"][id="Sh"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Sh"]:checked ~ .Sa,
input[type="radio"][id="Sh"]:checked ~ .Ar,
input[type="radio"][id="Sh"]:checked ~ .La,
input[type="radio"][id="Sh"]:checked ~ .Ri,
input[type="radio"][id="Sh"]:checked ~ .Ca,
input[type="radio"][id="Sh"]:checked ~ .As,
input[type="radio"][id="Sh"]:checked ~ .Be,
input[type="radio"][id="Sh"]:checked ~ .Ru,
input[type="radio"][id="Sh"]:checked ~ .Av,
input[type="radio"][id="Sh"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Sa"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Sa"]:checked ~ .Sh,
input[type="radio"][id="Sa"]:checked ~ .Ar,
input[type="radio"][id="Sa"]:checked ~ .La,
input[type="radio"][id="Sa"]:checked ~ .Ri,
input[type="radio"][id="Sa"]:checked ~ .Ca,
input[type="radio"][id="Sa"]:checked ~ .As,
input[type="radio"][id="Sa"]:checked ~ .Be,
input[type="radio"][id="Sa"]:checked ~ .Ru,
input[type="radio"][id="Sa"]:checked ~ .Av,
input[type="radio"][id="Sa"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Ar"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Ar"]:checked ~ .Sh,
input[type="radio"][id="Ar"]:checked ~ .Sa,
input[type="radio"][id="Ar"]:checked ~ .La,
input[type="radio"][id="Ar"]:checked ~ .Ri,
input[type="radio"][id="Ar"]:checked ~ .Ca,
input[type="radio"][id="Ar"]:checked ~ .As,
input[type="radio"][id="Ar"]:checked ~ .Be,
input[type="radio"][id="Ar"]:checked ~ .Ru,
input[type="radio"][id="Ar"]:checked ~ .Av,
input[type="radio"][id="Ar"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="La"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="La"]:checked ~ .Sh,
input[type="radio"][id="La"]:checked ~ .Sa,
input[type="radio"][id="La"]:checked ~ .Ar,
input[type="radio"][id="La"]:checked ~ .Ri,
input[type="radio"][id="La"]:checked ~ .Ca,
input[type="radio"][id="La"]:checked ~ .As,
input[type="radio"][id="La"]:checked ~ .Be,
input[type="radio"][id="La"]:checked ~ .Ru,
input[type="radio"][id="La"]:checked ~ .Av,
input[type="radio"][id="La"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Ri"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Ri"]:checked ~ .Sh,
input[type="radio"][id="Ri"]:checked ~ .Sa,
input[type="radio"][id="Ri"]:checked ~ .Ar,
input[type="radio"][id="Ri"]:checked ~ .La,
input[type="radio"][id="Ri"]:checked ~ .Ca,
input[type="radio"][id="Ri"]:checked ~ .As,
input[type="radio"][id="Ri"]:checked ~ .Be,
input[type="radio"][id="Ri"]:checked ~ .Ru,
input[type="radio"][id="Ri"]:checked ~ .Av,
input[type="radio"][id="Ri"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Ca"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Ca"]:checked ~ .Sh,
input[type="radio"][id="Ca"]:checked ~ .Sa,
input[type="radio"][id="Ca"]:checked ~ .Ar,
input[type="radio"][id="Ca"]:checked ~ .La,
input[type="radio"][id="Ca"]:checked ~ .Ri,
input[type="radio"][id="Ca"]:checked ~ .As,
input[type="radio"][id="Ca"]:checked ~ .Be,
input[type="radio"][id="Ca"]:checked ~ .Ru,
input[type="radio"][id="Ca"]:checked ~ .Av,
input[type="radio"][id="Ca"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="As"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="As"]:checked ~ .Sh,
input[type="radio"][id="As"]:checked ~ .Sa,
input[type="radio"][id="As"]:checked ~ .Ar,
input[type="radio"][id="As"]:checked ~ .La,
input[type="radio"][id="As"]:checked ~ .Ri,
input[type="radio"][id="As"]:checked ~ .Ca,
input[type="radio"][id="As"]:checked ~ .Be,
input[type="radio"][id="As"]:checked ~ .Ru,
input[type="radio"][id="As"]:checked ~ .Av,
input[type="radio"][id="As"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Be"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Be"]:checked ~ .Sh,
input[type="radio"][id="Be"]:checked ~ .Sa,
input[type="radio"][id="Be"]:checked ~ .Ar,
input[type="radio"][id="Be"]:checked ~ .La,
input[type="radio"][id="Be"]:checked ~ .Ri,
input[type="radio"][id="Be"]:checked ~ .Ca,
input[type="radio"][id="Be"]:checked ~ .As,
input[type="radio"][id="Be"]:checked ~ .Ru,
input[type="radio"][id="Be"]:checked ~ .Av,
input[type="radio"][id="Be"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Ru"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Ru"]:checked ~ .Sh,
input[type="radio"][id="Ru"]:checked ~ .Sa,
input[type="radio"][id="Ru"]:checked ~ .Ar,
input[type="radio"][id="Ru"]:checked ~ .La,
input[type="radio"][id="Ru"]:checked ~ .Ri,
input[type="radio"][id="Ru"]:checked ~ .Ca,
input[type="radio"][id="Ru"]:checked ~ .As,
input[type="radio"][id="Ru"]:checked ~ .Be,
input[type="radio"][id="Ru"]:checked ~ .Av,
input[type="radio"][id="Ru"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Av"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Av"]:checked ~ .Sh,
input[type="radio"][id="Av"]:checked ~ .Sa,
input[type="radio"][id="Av"]:checked ~ .Ar,
input[type="radio"][id="Av"]:checked ~ .La,
input[type="radio"][id="Av"]:checked ~ .Ri,
input[type="radio"][id="Av"]:checked ~ .Ca,
input[type="radio"][id="Av"]:checked ~ .As,
input[type="radio"][id="Av"]:checked ~ .Be,
input[type="radio"][id="Av"]:checked ~ .Ru,
input[type="radio"][id="Av"]:checked ~ .Li{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

input[type="radio"][id="Li"]:checked + label {
	background: #E8E800;
	;
  	border-radius: 10px;
	color: #000;
}
input[type="radio"][id="Li"]:checked ~ .Sh,
input[type="radio"][id="Li"]:checked ~ .Sa,
input[type="radio"][id="Li"]:checked ~ .Ar,
input[type="radio"][id="Li"]:checked ~ .La,
input[type="radio"][id="Li"]:checked ~ .Ri,
input[type="radio"][id="Li"]:checked ~ .Ca,
input[type="radio"][id="Li"]:checked ~ .As,
input[type="radio"][id="Li"]:checked ~ .Be,
input[type="radio"][id="Li"]:checked ~ .Ru,
input[type="radio"][id="Li"]:checked ~ .Av{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}





input[type="radio"][id="reset"]:checked + label {
	background: #E8E800;
	;	border-radius: 10px;
	color: #000;
}

label {
	width: 60px;
	float: left;
	text-align:center; /*水平居中*/
	color: #000;        /* 默认标题颜色*/
	font-size: 18px;
	margin-bottom: 20px;
	margin-right: 30px;
	margin-left: 30px;
	cursor: pointer;
}

label img {
	width: 50px;
	height: 50px;
}

.lood {
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	border-radius: 10px;
	list-style-type: none;
	position: relative;
	background: hsla(0,0%,100%,.25) border-box;
	background-color: #008CBA;
	border-bottom: #000 2px solid;
	border-left: #000 2px solid;
	border-top: #000 2px solid;
	border-right: #000 2px solid;
	overflow: hidden;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                                    0 .5em 1em rgba(0, 0, 0, 0.2);
}

.lood a {
	text-align: center;
	font-size: 30px;
	color: #fff;
	border-radius: 10px;
}

.cradid {
	margin-bottom: 80px;
	margin-left: 30px;
	margin-right: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	list-style-type: none;
	position: relative;
	background: hsla(0,0%,100%,.25) border-box;
	overflow: hidden;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                                    0 .5em 1em rgba(0, 0, 0, 0.6);
}

.contentid {
	margin-top: 80px;
	margin-left: 30px;
	margin-right: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	list-style-type: none;
	position: relative;
	background: hsla(0,0%,50%,.15) border-box;
	background-color: #008CBA;
	border-bottom: #cccccc 0px solid;
	border-left: #000 2px solid;
	border-top: #000 2px solid;
	border-right: #000 2px solid;
	overflow: hidden;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                                    0 .5em 1em rgba(0, 0, 0, 0.2);
}

.contentid a {
	text-align: center;
	font-size: 25px;
	color: #fff;
}

.cradid-container {
	list-style-type: none;
	position: relative;
	margin-left: 30px;
	margin-right: 30px;
	background-color: #330;
	background: hsla(0,0%,90%,.25) border-box;
	border-bottom: #000 2px solid;
	border-left: #000 2px solid;
	border-top: #000 0px solid;
	border-right: #000 2px solid;
	overflow: hidden;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                                    0 .5em 1em rgba(0, 0, 0, 0.6);
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

                    /*使用滤镜模糊边缘*/
.cradid-container::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: -30px;
	z-index: -1;
	-webkit-filter: blur(20px);
	filter: blur(20px);
}

.card-desc {
	display: inline-block;
	position: relative;
	width: 100px;
	height: 120px;
	float: left;
}

.card-desc  a {
	position: absolute;
	background-color: rgba(0,0,0,0.7);
	text-transform: uppercase;
	z-index: 3;
	text-align: center;
	width: 100px;
	line-height: 20px;
	color: #FFF;
	font-size: 14px;
	top: 80px;
	left: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.goTop {
	position: fixed;
	right: 30;
	bottom: 100;
	z-index: 999;
	width: 80px;
	height: 80px;
	;border: solid 1px #f9f9f8;
	border-radius: 6px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	cursor: pointer
}

.goTop:hover {
	height: 80px;
	background-position: 16px 16px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
}