body, .container { width: 650px; } .container > .cont { margin-left: 15px; } .head-box { margin-top: 10px; } .head-box .label { font-size: 14px; } .char-list { display: flex; flex-wrap: wrap; padding: 10px; } .char-item { margin: 5px; } .char-item .name { margin-top: 5px; display: block; font-size: 14px; color: #fff; text-align: center; text-shadow: 0 0 1px #000; } .char-item.new-char .name:before { content: ""; display: inline-block; width: 8px; height: 8px; background: #90e800; border-radius: 50%; margin-right: 3px; } .char-icon { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; box-shadow: 1px 1px 3px 0 #000; overflow: visible; } .char-icon .img { background-size: auto 100%; background-position: top center; overflow: hidden; border-radius: 50%; } .cont-footer { display: flex; background: rgba(0, 0, 0, 0.4); } .cont-footer span { width: 50%; } .cont-footer .serv { text-align: right; } .cont-footer .new-tip:before { content: ""; display: inline-block; width: 8px; height: 8px; background: #90e800; border-radius: 50%; margin-right: 3px; } /*# sourceMappingURL=profile-list.css.map */