.filter { background: #fff; width: 100%; padding: 0 .01rem; }
.filter td { text-align: center; color: #000; padding: .02rem .01rem; padding-bottom: 0; border-bottom: .02rem solid #eee; }
.filter a { color: #000; padding: 0 .2rem; background: #fff; height: .35rem; line-height: .35rem; display: block; }
.filter td.cur { border-color: #ff9933; }

.groupbox { position: relative; padding-top: 9em; }

.gside { position: fixed; left: 0; bottom: .5rem; top: 1.67rem; width: 5em; border-right: 1px solid #eee; overflow-y: scroll; }
.gside li { display: block; height: 2.6em; line-height: 2.6em; text-align: center; font-weight: bold; }
.gside li.cur { background: #eee }
.gside li a { display: block; color: #000; }
.grouparea { margin-left: 5em; padding: 0 1em; height: 50em; overflow-y: scroll; }
.grouparea .one { position: relative; }
.grouparea .one a { display: block; padding: 1em 0; color: #000; }
.grouparea .one .img { width: 3em; height: 3em; border-radius: 1.5em; float: left; margin-right: .5em; overflow-y: hidden; }
.grouparea .one .img img { display: block; width: 3em; height: 3em; }
.grouparea .one p { color: #808080; }
.grouparea .one .joinbox { position: absolute; right: 0; top: 1.7em; display: block; border: 1px solid #ff9933; color: #ff9933; padding: 0 1em; height: 1.5em; line-height: 1.5em; border-radius: 1.5em; }
.grouparea .more { text-align: center; height: 3em; line-height: 3em; color: #000; background: #eee; border-radius: 3px; margin-bottom: 1em; }
.grouparea .empty { font-size: .14rem; text-align: center; padding: .1rem 0; color: #808080; }

.topbar { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 99; padding-top: 40px; background: #fff; border-bottom: 1px solid #eee; }

.cps { padding: .05rem .05rem .05rem 0; }
.cps .title { border-bottom: none; }
.cps li { width: 20%; position: relative; display: block; float: left; }
.cps li .pic { display: block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background-size: cover; background-position: center; border-radius: 50%; overflow: hidden; }
.cps li a { display: block; text-align: center; margin-left: .05rem; margin-top: .05rem; color: #000; padding: 0 .08rem; }
.cps li a.cur .br { border: .02rem solid #ff9933; border-radius: 50%; }
.cps li h3 { font-size: .13rem; min-height: .22rem; line-height: .22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cps li.cur a { color: #FFA858; }
.cps.cps4 li { width: 25%; }
.cps.cps4 li a { padding: 0 .12rem; }
.cps.cps3 li { width: 33.33%; }
.cps.cps3 li a { padding: 0 .3rem; }

.topbar .flags { width: 3.46rem; height: .26rem; border: 1px solid #ccc; border-radius: .26rem; line-height: .26rem; text-align: center; margin: .05rem auto; }
.topbar .flags a { display: inline-block; color: #808080; height: .24rem; line-height: .24rem; border-radius: .24rem; width: 1.7rem; margin-top: .01rem; }
.topbar .flags a.cur { background: #f5be00; color: #333; }