.container{margin:0 auto;padding:30px 0;width:1200px}
.writer{display:flex;flex-direction:column;align-items:center;padding:25px 5% 30px 5%;box-sizing:border-box;background-image:url('/static/image/writer-background.jpg');background-repeat:no-repeat;height:300px;color:#fff}
.writer img{width:80px;height:80px;border-radius:50%}
.writer h1{margin-top:20px;font-size:20px;font-weight:700}
.writer p{margin-top:20px;line-height:2;font-size:14px}
.writer span{margin:0 15px;font-size:16px}
.writer-article{margin-top:25px;background-color:#fff}
.writer-article .head{display:flex;justify-content:center;border-bottom:1px solid #eee}
.head span{margin:0 15px;padding:15px 3px;font-size:14px;cursor:pointer}
.head .active{color:#1ba2e6;border-bottom:2px solid #1ba2e6}
.writer-article ul{display:none;flex-direction:column;padding:20px}
.writer-article .active{display:flex}
.writer-article li{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid #eee}
.item-img{position:relative;width:30%}
.item-img img{width:100%;border-radius:6px}
.item-category{position:absolute;left:10px;top:10px;padding:4px 8px;font-size:12px;line-height:14px;color:#fff;background-color:#000;background:rgba(0,0,0,.6);border-radius:3px;text-decoration:none}
.item-category:hover{background-color:#1ba2e6}
.item-content{display:flex;flex-direction:column;width:68%}
.item-title{margin-bottom:10px;font-size:22px;line-height:1.5}
.item-excerpt{line-height:2;font-size:15px;color:#555}
.item-meta{margin-top:100px;display:flex;justify-content:space-between;font-size:13px;color:#999}
.item-meta i{margin-right:5px}