.header {
	width: 100%;
	padding: 20px;
}

.banner{
margin-top:15px;
	position: relative;
	width: 100%;
	height: 158px;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 50px;
	background-image: url(https://api.suyanw.cn/api/comic3.php);/*更多图片api地址：https://api.suyanw.cn/自行替换，或者用自己图片链接即可*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	padding: 20px;
	border-radius: 16px
}

 .logo {
	position: absolute;
	left: 50%;
	bottom: -50px;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: -50px;
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 10px 20px 5px #e6e8ea
}
 .logo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-o-object-fit: cover;
	object-fit: cover
}

.author-name {
     display:flex;
     width:100%;
     justify-content: center;
	align-items: center;
	font-size: 25px;
	line-height: 36px;
	font-weight: 500;
	margin-top: 13px
}
.gender-icon{
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 10px 6px 0;
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat
}
.man {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAHDUlEQVR4Xu1aa4wTVRT+zlR2O13jKoZEQYhhO10kalTkoYkGRHa6RGPwFaOI4AN8INH4DhgxajQ+g6goGJAEIQryB93tdFGID4T4ikQS6HQ1QVGJryDaW5CdY+7utkxn+5hOZ8vC7v15e873nfPedO+c+egn9vFE/zx8DAgzMgH6uwMAn0FcnQChpNAN0LTNO9xQjow6Ef4l4zXG1vO7v4dE/8+H02RmgJow/QBjsKXmHEwPT05r+9tElgGmwH8lLDLasx9ONzQuPKgGCu1oXkqLcBmBopUIclQKUm7SajD8P5vvy+R3zAqim8RKAewqJdkwLoCaNRWDMy02eNgM8MdN3zAqgmrFXALrLMfLvMKzXCcqmY1oA1TReA3CHI/nVQtNvCJqtE4+4AMHExpHEh6ZCodEgGgHmEQyMkAETsBtEu8G8m4DvmLBBhPUf3Ra+YMJ4gwizHfarhKbfKPuOmAB1O2NRDtDFTJgCxvluE+qyo80MjitgI6VFvy7kGzTjywh8q/13IqxMhfWZmb6qCxAyY+cx6F4A08tLOq/1AQAvBdDx4j/a1N/sFqFEbDkTzcpJHrwipUVvtvdVT4BvjTo1hAUAZPK1JZIXIJidNgwNgFrcntsJ9GJK0+W3jlDCeIsJN9l9GPRmWmuSm6WcVhUAOkvpNgDLA46dIeQTZCQd+0twnYvTjitd5K5IZ7M52Jc9/6Ceb/vYfa7YwSfcBmBZwLHTkFhEJHYF/ITJY/Aa+AUA/rxTgFJYQzGKAADzZP9NgJUBx05HYhGQ+I8CfwfAHwDwDQA/dSpQChOeU58xK9+8eTPZ0wAAH8xAPAu51LnuKz+GtI70fmrV6+O9jQAAJAHgSQB+BoCJ/w1Y7qXzW/gVr38BwJ8A8DsA/G9gfAe2x99Ae06Bx3zMAAAAAElFTkSuQmCC)
}

 .female {
	background-image: url(data:image/png;base64,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)
}

.desc {
    width: 100%
	padding: 0 12px;
	font-size: 14px;
	text-align: center;
	color: #aaa;
	line-height: 20px;
	margin-top: 4px
}

 .tab-list {
	width: 100%;
	padding: 0 20px;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start
}

 .tab-item, .tab-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}
 .tab-item {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 35px;
	padding: 0 12px;
	width:34%;
	background: #fff;
	border-radius: 17px;
	font-size: 14px;
	line-height: 20px;
	margin-right: 10px
}
 
 .tab-item .text {
	margin-left: 6px
}
 .tab-item:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat
}

.lx:before {
	background-image: url(../assets/lx.png)
}

.dh:before {
	background-image: url(../assets/dh.png)
}

.zy:before {
	background-image: url(../assets/zy.png)
}

.app-list {
	width: 100%;
	background: #f4f6f8;
	padding: 12px;
	flex-wrap: wrap;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.item {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 50%;
	flex-direction: column;
	padding: 8px;
	position: relative;
	color: #222;
	min-height: 70px;
}

.content-wrap {
	width: 100%;
	background: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 14px 16px;
	border-radius: 17px;
	min-height: 70px;
	box-sizing: border-box;
}

.img-wrap {
	flex-shrink: 0;
	width: 45px;
	height: 45px;
	margin-right: 10px
}

.img-wrap img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	border-radius: 12px
}

.app-name {
	font-size: 15px;
	line-height: 1.4;
	width: 100%;
	word-break: break-word;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-family: PingFang SC;
	font-weight: 500;
	margin: 0;
	padding: 0;
}