﻿
.recommend {
	position:relative;
	padding:30px 0 50px;
	text-align:center;
	
}
.recommend .help {
	position:absolute;
	right:30px;
	top:68px;
	color:#fff
}
.recommend .trigger-menu {
	margin:30px 0 0;
	text-align:left
}
.recommend .collection-wrap,.recommend .wrap {
	height:320px;
	margin-top:80px;
	padding:0 20px;
	border:1px solid #e6e6e6;
	border-radius:4px;
	background-color:hsla(0,0%,71%,.1);
	transition:.2s ease;
	-webkit-transition:.2s ease;
	-moz-transition:.2s ease;
	-o-transition:.2s ease;
	-ms-transition:.2s ease
}
.recommend .collection-wrap:hover,.recommend .wrap:hover {
	box-shadow:0 5px 20px rgba(0,0,0,.1)
}
.recommend .collection-wrap .avatar,.recommend .collection-wrap .avatar-collection,.recommend .wrap .avatar,.recommend .wrap .avatar-collection {
	width:80px;
	height:80px;
	margin:-40px 0 10px;
	display:inline-block;
	border:1px solid #ddd;
	background-color:#fff
}
.recommend .collection-wrap .avatar-collection img,.recommend .collection-wrap .avatar img,.recommend .wrap .avatar-collection img,.recommend .wrap .avatar img {
	vertical-align:baseline
}
.recommend .collection-wrap .avatar,.recommend .wrap .avatar {
	border-radius:40px
}
.recommend .collection-wrap .avatar-collection,.recommend .wrap .avatar-collection {
	border-radius:8px
}
.recommend .collection-wrap h4,.recommend .wrap h4 {
	font-size:21px;
	font-weight:700;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.recommend .collection-wrap h4 i,.recommend .wrap h4 i {
	margin-right:-5px;
	vertical-align:middle
}
.recommend .collection-wrap .collection-description,.recommend .collection-wrap .description,.recommend .wrap .collection-description,.recommend .wrap .description {
	min-height:50px;
	font-size:13px;
	line-height:25px
}
.recommend .collection-wrap .collection-description,.recommend .wrap .collection-description {
	min-height:55px
}
.recommend .collection-wrap .btn,.recommend .wrap .btn {
	width:100px;
	padding:8px 0
}
.recommend .collection-wrap .btn i,.recommend .wrap .btn i {
	font-size:14px
}
.recommend .collection-wrap .btn span,.recommend .wrap .btn span {
	vertical-align:middle
}
.recommend .collection-wrap .user-follow-button,.recommend .wrap .user-follow-button {
	width:100px;
	padding:8px 0
}
.recommend .collection-wrap .user-follow-button i,.recommend .wrap .user-follow-button i {
	font-size:14px
}
.recommend .collection-wrap .user-follow-button span,.recommend .wrap .user-follow-button span {
	font-size:16px;
	vertical-align:middle
}
.recommend .collection-wrap hr,.recommend .wrap hr {
	border-color:#eaeaea
}
.recommend .collection-wrap .meta,.recommend .wrap .meta {
	float:left;
	margin-top:-29px;
	padding-right:10px;
	font-size:12px;
	color:#969696;
	background-color:#f8f8f8
}
.recommend .collection-wrap .recent-update,.recommend .wrap .recent-update {
	min-height:75px
}
.recommend .collection-wrap .new,.recommend .wrap .new {
	font-size:13px;
	line-height:25px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	display:block;
	text-align: left;
}
.recommend .collection-wrap .new:hover,.recommend .wrap .new:hover {
	text-decoration:underline
}
.recommend .collection-wrap .count,.recommend .wrap .count {
	font-size:14px
}
.recommend .wrap .description {
	margin:0 auto 10px;
	max-width:180px
}
.recommend .collection-wrap {
	height:280px
}
.recommend .btn-danger {
	width:38.2%;
	padding:10px 0;
	margin:40px 0;
	font-size:15px;
	border-radius:20px;
	background-color:#a5a5a5;
	border:none
}
.recommend .btn-danger:hover {
	background-color:#9b9b9b
}
.recommend .btn-danger.display_false {
	display:none
}
.recommend .saving {
	margin:30px 0 50px
}
.recommend .saving img {
	width:18px;
	height:18px;
	margin-right:5px
}
.recommend .saving span {
	font-size:14px;
	color:#969696;
	vertical-align:middle
}
@media (max-width:1080px) {
	.recommend .help {
	top:56px
}
.recommend .collection-wrap .collection-description {
	min-height:75px
}
.recommend .collection-wrap {
	height:300px
}
}.reader-night-mode .collection-wrap,.reader-night-mode .collection-wrap hr,.reader-night-mode .recommend .wrap,.reader-night-mode .recommend .wrap hr {
	border-color:#2f2f2f
}
.reader-night-mode .collection-wrap .collection-description,.reader-night-mode .collection-wrap .count a,.reader-night-mode .collection-wrap .description,.reader-night-mode .collection-wrap .name,.reader-night-mode .recommend .wrap .collection-description,.reader-night-mode .recommend .wrap .count a,.reader-night-mode .recommend .wrap .description,.reader-night-mode .recommend .wrap .name {
	color:#c8c8c8
}
.reader-night-mode .collection-wrap .avatar,.reader-night-mode .collection-wrap .avatar-collection,.reader-night-mode .recommend .wrap .avatar,.reader-night-mode .recommend .wrap .avatar-collection {
	background-color:#3f3f3f;
	border-color:#2f2f2f
}
.reader-night-mode .collection-wrap .new,.reader-night-mode .recommend .wrap .new {
	color:#969696
}
.reader-night-mode .collection-wrap .new:hover,.reader-night-mode .recommend .wrap .new:hover {
	color:#c8c8c8
}
.reader-night-mode .collection-wrap .meta,.reader-night-mode .recommend .wrap .meta {
	background-color:#4b4b4b
}
