@charset "UTF-8";


.page-forum {
    .g-header {
        padding: 0 px2rem(25);
    }
    
    .mod-crumbs {
        padding: 0 px2rem(25);
        @include clearfix;
        .crumbs {
            width: px2rem(400);
            @include ellipsis;
            line-height: px2rem(88);
            font-size: px2rem(30);
            color: #333;
            a {
                color: #333;
            }
        }
        .btn {
            float: right;
            width: px2rem(120);
            height: px2rem(56);
            line-height: px2rem(56);
            text-align: center;
            color: #fff;
            margin: px2rem(17) 0 0 px2rem(30);
            font-size: px2rem(24);
            display: block;
            border-radius: 5px; 
            &.follow {
                background: #ff2b68;
            }
            &.sign-in {
                background: #f3493d;
            }
        }
    }
    .mod-filter {
        @include clearfix;
        height: px2rem(90);
        padding: 0 px2rem(25);
        .filter {
            line-height: px2rem(90);
            font-size: px2rem(24);
            color: #666;
            position: relative;
            i {
                display: inline-block;
                width: px2rem(25);
                height: px2rem(25);
                background: url(../img/icon-pull.png) no-repeat;
                background-size: 100% 100%;
                margin-left: px2rem(10);
            }
        }
        .filter.fr {
            .g-select {
                left: -px2rem(20);
            }
        }
    }
    .mod-forum {
        padding: 0 px2rem(25);
        .forum-item {
            padding-top: px2rem(25);
            padding-bottom: px2rem(35);
            border-bottom: 1px solid #dedede;
            .forum-hd {
                @include clearfix ;
                overflow: hidden;
                .avatar {
                    float: left;
                    width: px2rem(64);
                    height: px2rem(64);
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%; 
                    }
                }
                .text-wrap {
                    float: left;
                    margin-left: px2rem(20);
                    width: px2rem(380);
                    h3 {
                        width: 100%;
                        @include ellipsis;
                        font-size: px2rem(26);
                        color: #666;
                        margin-bottom: px2rem(16);
                    }
                    p {
                        width: 100%;
                        @include ellipsis;
                        font-size: px2rem(20);
                        color: #999;
                    }
                }
                .fr {
                    line-height: px2rem(64);
                    font-size: px2rem(20);
                    color: #999;
                    i {
                        display: inline-block;
                        margin-left: px2rem(11);
                    }
                }
                .comment i {
                    width: px2rem(25);
                    height: px2rem(25);
                    background: url(../img/icon-comment.png) no-repeat;
                    background-size: 100% 100%; 
                }
                .watch i {
                    width: px2rem(27);
                    height: px2rem(23);
                    background: url(../img/icon-watch.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .forum-bd {
                margin-top: px2rem(20);
                h3 {
                    line-height: px2rem(44);
                    color: #000;
                    font-size: px2rem(32);
                    .label {
                        color: #3db3f2;
                    }
                }
                p {
                    margin-top: px2rem(15);
                    width: 100%;
                    @include ellipsis;
                    font-size: px2rem(30);
                    color: #999;
                    line-height: px2rem(40);
                }
                .img-box {
                    margin: px2rem(25) 0 0 0;
                    @include clearfix;
                    margin-right: -px2rem(20);                    
                    .img {
                        float: left;
                        width: px2rem(220);
                        height: px2rem(220);
                        background-repeat: no-repeat;
                        background-size: cover; 
                        background-position: center top;
                        margin-right: px2rem(20);
                    }
                }
            }
        }
    }
    .g-ft-ad {
        .btn-wrap {
            a {
                width: px2rem(88);
                height: px2rem(88);
                border-radius: 50%;
                border: 2px solid #333333; 
                position: absolute;
                top: -px2rem(125);
            }
            i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .publish  {
            right: px2rem(28); 
            background: $mainColor;
            &:active {
                background: #c73434;
            }
            i {
                width: px2rem(40);
                height: px2rem(39);
                background: url(../img/icon-publish.png) no-repeat;
                background-size: 100% 100%; 
            }
        }
        .reflash {
            right: px2rem(147); 
            background: #666666;
            &:active {
                background: #4d4d4d;
            }
            i {
                width: px2rem(43);
                height: px2rem(48);
                background: url(../img/icon-reflash.png) no-repeat;
                background-size: 100% 100%; 
            }
        }
    }
}