@charset "utf-8";

#content {
	height: 902px;
}
/**内容===================================================*/
.list_pic_section .list_pic_w {
	padding-bottom:48px;
}
/**筛选===================================================*/
.list_pic_section .screen {
	padding: 16px;
}
.list_pic_section .screen .type_design span {
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 2px;
	font-size: 12px;
	line-height: 12px;
	border: 1px solid #27C24C;
	color: #27C24C!important;
	margin-right: 8px;
	margin-bottom:8px;
	display: inline-block;
}
.list_pic_section .screen .type_design span:hover {
	background: #27C24C;
	color:#fff !important;
	border: 1px solid rgba(0,0,0,.1);
}
.list_pic_section .screen .type_design .s_click {
	background: #27C24C !important;
	color: #FFF !important;
	border: 1px solid #27C24C !important;
	cursor:default !important;
}
/**作品列表***************************/
.works {
	position: relative;
	width: 304px;
	height: 256px;
	margin: 0 24px 24px 0;
	float: left;
	overflow: hidden;
}
.works .imgload {
	width: 304px;
	height: 168px;
	border-radius: 4px;
	background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
	transition: all .3s ease;
}
.works a:hover .imgload {
	height: 256px;
}

.works .pictxt {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 8px  0 16px 0;
	overflow:hidden;
	height:64px;
	transition: all .3s ease;
}
.works a:hover .pictxt {
	width: calc(100% - 32px);
	background: rgba(0,0,0,.7);
	padding: 8px  16px 16px 16px;
	color: #fff;
	backdrop-filter: blur(8px);
}
/*图片划过改变文字大小效果*/
.works h3 {
	font-size: 22px;
	font-weight: 300;
	margin: 5px 0 10px 0;
	overflow: hidden;/*超出部分隐藏*/
	white-space: nowrap;/*不换行*/
	text-overflow: ellipsis;/*超出部分文字以...显示*/
}
.works .wz-z {
	float: left;
}
.works .wz-y {
	float: right;
	margin-top: -6px;
}
.works .ico-size {
	margin-right: 8px;
	margin-left: 0;
	height: 24px;
	width: 24px;
	line-height: 24px;
	font-size: 24px;
}

/* 出现滚动条 * ████████████████████████████████████████████████████████████████████████████████*/
.scroll_y {
	overflow-y: scroll;
	overflow-x: hidden;
}

.scroll_y::-webkit-scrollbar {
    width: 48px;
	background-image:
	linear-gradient(90deg,
		transparent 0,
		transparent 100%
	)
}
.scroll_y::-webkit-scrollbar-thumb {
	background-image:
	linear-gradient(90deg,
		transparent 16px,
		#27C24C 16px, 20px,
		transparent 20px
	)
}