.homepage{padding:.15rem;background:url('../../images/bg-home-title.png') no-repeat center top;padding-top:1rem;background-size:auto .6rem;display:grid;gap:.15rem;background-position-y:.4rem}
.user-info{background:#fff;border-radius:.04rem;position:relative;display:grid}
.user-info .avatar{position:absolute;top:-12px;width:.8rem;height:.8rem;border:4px solid #f0f0f2;border-radius:50%;background:#fff;overflow:hidden;left:.1rem}
.user-info .avatar img{width:.8rem;height:.8rem}
.user-info .info{padding:.2rem}
.user-info .nick{padding-left:.85rem}
.user-info .nick h3{font-weight:600}
.user-info .ext{padding-left:.85rem;color:#777;font-size:.12rem;margin-top:.05rem;display:flex;gap:.1rem}
.user-info .signature{padding-top:.2rem;color:#666}
.user-info .right .btn-follow{position:absolute;top:.2rem;right:.2rem;background:#eee;font-size:.12rem;width:.5rem;height:.22rem;line-height:.22rem;border-radius:.02rem;text-align:center;display:flex;align-items:center;justify-content:center}
.user-info .right .btn-follow i{transform:rotate(45deg);display:inline-block;margin-right:.02rem;font-size:.1rem}
.user-info .right .btn-followed{background:#ff9800;color:#fff}
.user-info .right .btn-follow:hover{background:#ff98009c;color:#fff}
.statistics{border-top:1px solid #eee;margin:0 .15rem;padding:.2rem 0;display:flex;gap:.1rem}
.statistics .item{display:grid;justify-items:center;flex-grow:1;gap:.06rem}
.statistics .item .num{color:#222226;font-weight:600;font-size:.2rem;line-height:.24rem}
.statistics .item .text{color:#555666;font-size:14px}
.user-data{background:#fff;border-radius:.04rem;padding:.15rem;padding-top:0}
.user-data .types{border-bottom:2px solid #eee;display:flex;justify-content:space-between}
.user-data .types li{height:.55rem;line-height:.55rem;flex-grow:1;padding:0 .1rem;border-bottom:2px solid transparent;margin-bottom:-2px}
.user-data .types li.active{border-bottom-color:#ff9800}
.user-data .types li.active a{color:#ff9800;font-weight:700}
.user-data .types li:hover{border-bottom-color:#f8d197}
.user-data .types li:hover a{color:#ffaa2c}
.user-data .types li a{display:block;text-align:center;font-size:.16rem}
.user-data .list .nodata{min-height:1.8rem;text-align:center;color:#666;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem}
.user-data .list .nodata i{font-size:.5rem;color:#999}
.user-data .list ul{display:grid;gap:.2rem;padding-top:.15rem}
.user-data .list ul li{border-bottom:1px solid #eee;padding-bottom:.15rem}
.user-data .list ul li:last-child{border-bottom:0}
ul.manual li{display:grid;grid-template-columns:1.3rem auto}
ul.manual li .cover a img{width:1.2rem;height:.75rem;border-radius:.04rem}
ul.manual li .intro{display:flex;flex-direction:column;justify-content:space-between}
ul.manual li .intro span.title{font-size:.16rem}
ul.manual li .intro a:hover span.title{text-decoration:underline;color:#2d1912}
ul.manual li span.price{color:#ff5722;margin-left:.1rem}
ul.manual li .intro p{display:none;color:#555}
ul.manual li .intro a:hover p{color:#222}
ul.manual li .ext{font-size:.12rem;color:#777}
@media (min-width:1200px){.homepage{background-size:auto .95rem;background-position-y:.24rem;padding-top:1.2rem}
.user-info{width:1200px;margin:0 auto;display:flex;justify-content:space-between}
.user-info .right .btn-follow{width:.7rem;height:.3rem;top:.15rem;right:.15rem;font-size:.14rem}
.statistics{margin-top:.35rem;border-top:0;width:350px;padding:.25rem 0 0}
.user-data{width:1200px;margin:0 auto}
.user-data .types{justify-content:flex-start}
.user-data .types li{min-width:100px;flex-grow:0}
ul.manual{padding-top:.2rem;gap:.2rem}
ul.manual li .intro p{display:block;font-size:.14rem;line-height:180%}
ul.manual li{grid-template-columns:1.95rem auto;padding-bottom:.2rem}
ul.manual li .cover a img{width:1.8rem;height:1.2rem}
ul.manual li .intro span.title{font-size:.18rem;margin-bottom:.1rem;display:inline-block}
ul.manual li .ext{font-size:.14rem}
ul.manual li .ext span{margin-right:.1rem}
}
ul.fans li{display:grid;gap:.1rem;grid-template-columns:.45rem auto}
ul.fans li .avatar{border:2px solid #eee;width:.47rem;height:.47rem;border-radius:50%}
ul.fans li .avatar img{width:.45rem;height:.45rem;border-radius:50%}
ul.fans li .intro{display:flex;justify-content:space-between;align-items:center}
ul.fans li .intro .nick{font-size:.16rem;font-weight:400}
ul.fans li .intro .desc{color:#777;font-size:.13rem}
ul.fans li .intro .ext{color:#777}
ul.answer li .title{font-size:.16rem;height:.24rem;line-height:.24rem}
ul.answer li .title a{align-items:center;gap:.06rem;color:#111}
ul.answer li .title a .tag{width:.22rem;height:.22rem;display:inline-block;text-align:center;line-height:.22rem;border-radius:.02rem;background:#fff3e0;color:#ff5722;font-size:.14rem;margin-right:.1rem}
ul.answer li .title a:hover{text-decoration:underline}
ul.answer li .title a:hover .tag{text-decoration:none}
ul.answer li .content{margin-top:.1rem;color:#222;line-height:.22rem}
ul.answer li .foot{margin-top:.1rem;color:#777;display:flex;gap:.1rem}