/* ----------------------------------- 群组主页模板样式2  ----------------------------------- */
#navfirst_item {
    display: none;
}
/* banner */
.group-banner {
    width: 100%;
    min-width: 1129px;
    min-height: 248px;
    background: #3c3e43 url(//7nsts.w3cschool.cn/images/w3c/vip-banner.png?t=181130);
}
.group-banner-main{
    margin: 20px 0;
    overflow: hidden;
}
.group-logo,.groupinfo-item {
    display: inline-block;
    vertical-align: middle;
}
.group-logo {
    width: 150px;
    height: 150px;
    border: 4px solid #eee;
    border-radius: 4px;
    margin-right: 40px;
}
.group-logo img {
    display: block;
    width: 100%;
    height: 100%;
}
.groupinfo-item {
    max-width: 500px;
}
.groupinfo-item div {
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
}
.groupinfo-item .group-name {
    font-size: 20px;
    font-weight: 600;
}
.groupinfo-item span {
    margin-right: 15px;
}
.groupinfo-item .groupinfo-intro {
    line-height: 24px;
    word-wrap: break-word;
}
.groupinfo-stats {
    float: right;
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
}
.focus-group {
    margin-top: 20px;
}
.focus-group a {
    display: inline-block;
    padding: 4px 18px;
    line-height: 24px;
    font-size: 14px;
    border-radius: 4px;
}
.focus-group .focus {
    background-color: #d9534f;
    border: 1px solid #d9534f;
    color: #fff;
}
.focus-group .focus:hover {
    background-color: #d2322d;
    border: 1px solid #d2322d;
    color: #fff;
}

/* 导航 */
.fixed-item {
    height: 66px;
    line-height: 66px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 1px 1px 8px #ccc;
    display: none;
}
.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    opacity: 0.95;
    display: block;
}
.fixed-wrapper {
    padding: 0;
}
.fixed-wrapper * {
    display: inline-block;
    vertical-align: middle;
}
.fixed-groupinfo-item:hover .fixed-group-name {
    color: #900b09;
}
.fixed-group-logo {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: -3px;
}
.fixed-group-name {
    font-size: 16px;
    color: #333;
}
.fixed-wrapper .focus-group {
    margin-top: 0;
    float: right;
}

/* group-content */
/* 左侧 */
.group-container {
    float: left;
    width: 834px;
    background-color: #fff;
    margin-right: 15px;
}
/* 目录 */
.group-container-nav {
    height: 80px;
    border-bottom: 1px solid #ddd;
}
.group-container-nav li {
    float: left;
    display: table;
    width: 16.66%;
    height: 80px;
    text-align: center;
}
.group-container-nav li a {
    display: table-cell;
    vertical-align: middle;
}
.group-container-nav li .icon-group-tag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: -32px 0px;
    vertical-align: middle;
}
.group-container-nav li span {
    font-size: 16px;
    color: #999;
    vertical-align: middle;
    display: inline-block;
    margin-left: 5px;
}
.group-container-nav li.current a {
    border-bottom: 2px solid #d9534f;
}
.group-container-nav li.current .icon-group-tag,.group-container-nav li:hover .icon-group-tag {
    background-position: 0px 0px;
}
.group-container-nav li.current span,.group-container-nav li:hover span {
    color: #d9534f;
}
.group-container-nav li .icon-group-all {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-all.png");
}
.group-container-nav li .icon-group-new {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-new.png");
}
.group-container-nav li .icon-group-stack {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-stack.png");
}
.group-container-nav li .icon-group-knowledge {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-knowledge.png");
}
.group-container-nav li .icon-group-discuss {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-discuss.png");
}
.group-container-nav li .icon-group-user {
    background-image: url("//7nsts.w3cschool.cn/images/w3c/icon-group-user.png");
}
/* 内容 */
.group-box-content {
    background-color: #fff;
    min-height: 600px;
    padding: 5px 0 25px;
}
.sidebar-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    overflow: hidden;
    margin: 20px 0 0;
}
.sidebar-title h2 {
    font-size: 16px;
    color: #333;
}
.sidebar-title h2::before {
    content: "";
    background: #AE4141;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    margin-bottom: 3px;
    vertical-align: middle;
}
.group-box {
    padding: 0 20px;
    overflow: hidden;
    background-color: #fff;
}
.group-box-list h3 {
    margin-top: 20px;
    font-size: 16px;
    color: #d9534f;
    font-weight: normal;
}
.group-box-item {
    position: relative;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
}
.group-box-item + .group-box-item {
    border-top: 1px dashed #E6E6E6;
}
.group-box-notice {
    margin: 20px 0;
    font-size: 14px;
    color: #666;
    text-align: center;
}
.group-box-item .u-avatar {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.info-date {
    float: right;
    line-height: 32px;
    margin-right: 10px;
}
.info-link {
    display: block;
    font-size: 16px;
    margin-top: 10px;
}
.info-content {
    margin-top: 10px;
    color: #333;
    line-height: 24px;
    overflow: hidden;
}
.group-projectlist {
   margin-left: -25px;
   overflow: hidden;
   padding-top: 20px;
}
.group-projectbox {
    position: relative;
    float: left;
    width: 21.7%;
    margin: 0 0 20px 25px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border-radius: 6px;
}
.group-projectbox:hover {
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
}
.group-projectbox a {
    color: #333;
}
.group-projectbox a:hover {
    color: #900b09;
}
.group-project-img {
    position: relative;
    height: 111px;
}
.group-project-img img {
    display: block;
    width: 100%;
    height: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.group-project-desc {
    padding: 10px;
}
.group-project-desc h4 {
    text-align: center;
    font-size: 14px;
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.group-project-desc span {
    display: inline-block;
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}
.group-stack-item .group-project-desc {
    padding: 15px 10px;
    min-height: 32px;
}
.group-userlist {
    margin-left: -15px;
    overflow: hidden;
}
.group-userlist li {
    display: inline-block;
    width: 10%;
    margin: 20px 0 0 15px;
    text-align: center;
}
.group-usermeta {
    margin-top: 10px;
    font-size: 14px;
}
.group-usermeta a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: #333;
}
.group-usermeta a:hover {
    color: #900b09;
}
.avatar-img {
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 4px solid #FFF;
    box-shadow: 0px 3px 3px rgba(193, 191, 192, 0.5);
    overflow: hidden;
    border-radius: 50%;
}
.avatar-img:hover {
    width: 53px;
    height: 53px;
    border: none;
}
.userlist-more {
    display: inline-block;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
    padding: 5px 12px;
    border-radius: 4px;
    margin-top: 20px;
}
.userlist-more:hover {
    background-color: #d9534f;
    border: 1px solid #d9534f;
    color: #fff;
}

/* 右侧 */
.group-aside {    
    float: left;
    width: 280px;
}
.aside-title {
    margin: 10px 15px 0;
    padding-top: 15px;
}
.aside-title h2 {
    font-size: 16px;
    color: #333;
}
.aside-title h2::before {
    content: "";
    background: #AE4141;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    margin-bottom: 3px;
    vertical-align: middle;
}
.group-aside-box {
    margin-bottom: 10px;
}
.group-aside-box2 {
    background-color: #fff;
    padding-bottom: 20px;
}
.creator-bg {
    position: relative;
    background: #ECE9E6;  
    background: -webkit-linear-gradient(to bottom, #c3c3c3, #ECE9E6);  
    background: linear-gradient(to bottom, #c3c3c3, #ECE9E6); 
    height: 68px;
    border-radius: 6px 6px 0 0;
}
.creator-img {
    position: absolute;
    width: 72px;
    height: 72px;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: 0 auto;
}
.creator-img img {
    width: 64px;
    height: 64px;
}
.creator-img img:hover {
    width: 72px;
    height: 72px;
}
.creator-meta {
    background-color: #fff;
    padding: 30px 20px 20px 40px;
}
.creator-meta span {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.creator-meta a {
    color: #333;
}
.creator-meta a:hover {
    color: #900b09;
}
.aside-userlist {
    margin: 0;
}
.aside-userlist li {
    float: left;
    width: 73px;
    height: 86px;
    margin: 15px 10px 0 10px;
}
.aside-userbox {
    text-align: center;
}



/* ----------------------------------- 页面自适应 ----------------------------------- */
@media (min-width:1200px) {
    .group-container {
        width: 834px;
    }
}
@media (min-width:1300px) {
    .group-container {
        width: 934px;
    }
}