@charset 'UTF-8';


.page-artical {
    header {
        padding: 0 px2rem(25);
    }
    .mod-hd {
        .artical-hd {
            
            padding: 0 px2rem(25);
            @include clearfix;
            height: px2rem(90);
            line-height: px2rem(90);
            border-bottom: 1px solid $borderColor;
            .icon-back {
                float: left;
                display: block;
                margin-top: px2rem(22);
                width: px2rem(45);
                height: px2rem(45);
                background: url(../img/icon-back.png) no-repeat;
                background-size: 100% 100%; 
            }
            span {
                font-size: px2rem(30);
                color: #333;
                margin-left: px2rem(30);
                float: left;
                
            }
            .icon-more {
                float: right;
                display: block;
                width: px2rem(45);
                height: px2rem(45);
                background: url(../img/icon-more.png) no-repeat;
                background-size: 100% 100%;
                margin-top: px2rem(22);
                position: relative;
                .g-select {
                    left: -px2rem(130);
                    &:before {
                        left: px2rem(140);
                    }
                }
            }
            .btn-poster {
                display: block;
                width: px2rem(120);
                height: px2rem(56);
                border-radius: 5px;
                border: 1px solid $mainColor;
                color: $mainColor;
                font-size: px2rem(24);
                text-align: center;
                line-height: px2rem(56);
                float: right;
                margin-top: px2rem(17);
                margin-right: px2rem(33);
            }
        } 

                  
        .user-hd {
            padding: px2rem(30) 0;
            width: px2rem(700);
            margin: 0 auto;
            @include clearfix ;
            overflow: hidden;
            border-bottom: 1px solid $borderColor;
            .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(350);
                position: relative;
                height: px2rem(64);
                h3 {
                    width: 100%;
                    @include ellipsis;
                    font-size: px2rem(26);
                    color: #666;
                    margin-bottom: px2rem(12);
                }
                p {
                    width: 100%;
                    @include ellipsis;
                    font-size: px2rem(20);
                    color: #999;
                }
                .single-name {
                    width: 100%;
                    @include ellipsis;
                    font-size: px2rem(26);
                    color: #666;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                }
            }
            .fr {
                line-height: px2rem(64);
                font-size: px2rem(20);
                color: #999;
                margin-left: px2rem(25);
                i {
                    display: inline-block;
                }
            }
            .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%;
            }
        }
    }
    .mod-bd {
        padding: 0 px2rem(25) ;
        .comment-wrap {
            background: #f5f5f5;
            padding: px2rem(20) px2rem(25);
            .comment-hd {
                @include clearfix;
                font-size: px2rem(26);
                line-height: px2rem(35);
                color: #999;
                p {
                    float: left;
                    width: px2rem(450);
                    @include ellipsis;
                }
                span {
                    color: #3db3f2;
                    font-size: px2rem(26);
                }
                em {
                    float: right;
                    font-size: px2rem(26);
                }
            }
            .comment-bd {
                color: #333;
                font-size: px2rem(30);
                line-height: px2rem(34);
                margin: px2rem(15) 0;
                position: relative;
                .g-select-horizontal {
                    // display: block;
                    top: -px2rem(75);
                    transform: translateX(0);
                    left: px2rem(40);
                    &:before {
                        content:"";
                        position: absolute;
                        @include triangle-down(px2rem(15), #666);
                        top: px2rem(50);
                        right: 50%;
                        font-size: px2rem(26);
                        color:#fff;            
                        transform: translateX(50%); 
                    }
                }
            }
        }
        .main-floor {
            padding-bottom: px2rem(50);
            border-bottom: 1px solid $borderColor;
            .vote-artical {
                padding-bottom: px2rem(50);
                .vote-wrap {
                    padding: px2rem(50) 0;
                    .vote-row {
                        position: relative; 
                        padding-left: px2rem(65);
                        input {
                            display: none;
                        }
                        .check-box {
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: px2rem(28);
                            height: px2rem(28);
                            border-radius: 50%;
                            border: 2px solid #000;
                            background: #fff;
                        }
                        input:checked+.check-box {
                            &:after {
                                width: 100%;
                                height: 100%;
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                border: 1px solid #fff;
                                border-radius: 100%;
                                background: $mainColor;
                                box-sizing: border-box;
                            }
                        }
                        p {
                            line-height: px2rem(64);
                            font-size: px2rem(36);
                            color: #333;
                        }
                        input:checked+.check-box+p {
                            color: $mainColor;
                        }
                    }
                    
                }

                
                .text {
                    line-height: px2rem(44);
                    font-size: px2rem(24);
                    color: #999;
                    text-align: center;
                    margin-top: px2rem(20);
                }
            }
            .wanted-artical {
                padding: px2rem(45) 0;
                .btn-wrap {
                    margin-top: px2rem(50);
                }
            }
            .pay-artical {
                padding: px2rem(45) 0;
                .btn-wrap {
                    margin-top: px2rem(50);
                }
            }
            .tips {
                color: #999999;
                font-size: px2rem(26);
                text-align: center;
                line-height: px2rem(36);
                background: #f5f5f5;
                padding: px2rem(20) px2rem(40);
                span {
                    color: #f3493d;
                }
            }
            .btn-wrap {
                text-align: center;
                .comm-btn {
                    display: inline-block;
                    border-radius: 5px;
                    font-size: px2rem(34);
                    color: #fff;
                    padding: 0 px2rem(15);
                    height: px2rem(66);
                    background: $mainColor;
                    line-height: px2rem(66);
                    text-align: center;
                }
            }
            
            .title {
                padding: px2rem(35) 0;
                width: px2rem(576);
                margin: 0 auto;
                text-align: center;
                color: #333;
                font-size: px2rem(48);
                line-height: px2rem(67);
                span {
                    color: #3db3f2  
                }
                
            }
            .content {
                color: #333;
                font-size: px2rem(36);
                line-height: px2rem(64);
                img {
                    width: 100%;
                    margin:  px2rem(10) 0;
                }
                
            }
            .ctrl-panel {
                @include clearfix;
                margin-bottom: px2rem(25);
                a {
                    display: inline;
                    float: right;
                    height: px2rem(44);
                    line-height: px2rem(60);
                    padding-left: px2rem(55);
                    position: relative;
                    font-size: px2rem(24);
                    color: $grayFont;
                    margin-left: px2rem(25);
                    &:after {
                        content: "";
                        position: absolute;
                        width: px2rem(44);
                        height: px2rem(44);
                        top: 0;
                        left: 0;                        
                    }
                }
                .ctrl-like {
                    color: #f3493d;
                    &:after {
                        background: url(../img/icon-like.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .ctrl-quote:after {
                    background: url(../img/icon-quote.png) no-repeat;
                    background-size: 100% 100%;
                    background-position: 0 3px; 
                }
                .ctrl-comment:after {
                    background: url(../img/icon-comment1.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
        .floor {
            padding: px2rem(45) 0 px2rem(35) px2rem(80);
            border-bottom: 1px solid $borderColor;
            position: relative; 
            &:last-child {
                border: none;
            }
            .avatar {
                position: absolute;
                top: px2rem(35);
                left: 0;
                width: px2rem(64);
                height: px2rem(64);
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .floor-hd {
                line-height: px2rem(35);
                height: px2rem(35);
                position: relative;
                i {
                    position: absolute;
                    right: 0;
                    top: 0;
                    color: #999;
                    font-size: px2rem(32);
                    width: px2rem(35);
                    height: px2rem(35);
                    background: url(../img/icon-more.png) no-repeat;
                    background-size: 100% 100%; 
                }
                .nick {
                    font-size: px2rem(26);
                    color: #999;
                    line-height: px2rem(35);
                }
                .poster,.level {
                    display: inline-block;
                    width: px2rem(54);
                    height:px2rem(26) ;
                    line-height: px2rem(30);
                    text-align: center;
                    color: #fff;
                    font-size: px2rem(20);
                    
                    border-radius: 3px;
                    margin-left: px2rem(10);
                }
                .level {
                    background: #f3493d;
                }
                .poster {
                    background: $mainColor;
                }
            }
            .floor-bd {
                font-size: px2rem(30);
                line-height: px2rem(36);
                color: #333;
                margin: px2rem(25) 0;
            }
            .floor-ft {
                @include clearfix;
                margin-bottom: px2rem(25);
                .l {
                    float: left;
                    font-size: px2rem(24);
                    color: #999;
                    margin-right: px2rem(23);
                    line-height: px2rem(44);
                }
                a {
                    float: right;
                    margin-left: px2rem(25);
                    display: inline;
                    height: px2rem(44);
                    line-height: px2rem(44);
                    padding-left: px2rem(55);
                    position: relative;
                    font-size: px2rem(24);
                    color: $grayFont;
                    margin-left: px2rem(25);
                    &:after {
                        content: "";
                        position: absolute;
                        width: px2rem(44);
                        height: px2rem(44);
                        top: 0;
                        left: 0;                        
                    }
                }
                .ctrl-quote:after {
                    background: url(../img/icon-quote.png) no-repeat;
                    background-size: 100% 100%;
                    background-position: 0 3px; 
                }
                .ctrl-comment:after {
                    background: url(../img/icon-comment1.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .floor-quote {
                padding: px2rem(75) px2rem(20);
                border: 1px solid $borderColor;
                margin-top: px2rem(25);
                position: relative; 
                &:after {
                    content: "";
                    width: px2rem(33);
                    height: px2rem(33);
                    background: url(../img/icon-quote2.png) no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: px2rem(22);
                    left: px2rem(25);
                }
                &:before {
                    content: "";
                    width: px2rem(33);
                    height: px2rem(33);
                    background: url(../img/icon-quote1.png) no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: px2rem(22);
                    right: px2rem(25);
                }
                p {
                    font-size: px2rem(26);
                    color: #999;
                    
                    line-height: px2rem(48);
                    span {
                        color: #3db3f2;
                    }
                }
                div {
                    font-size: px2rem(30);
                    color: #999;
                    line-height: px2rem(48);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
            }
        }
    }

    .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%);
            }
        }
        .reply  {
            right: px2rem(28); 
            background: $mainColor;
            &:active {
                background: #c73434;
            }
            i {
                width: px2rem(39);
                height: px2rem(44);
                background: url(../img/icon-reply.png) no-repeat;
                background-size: 100% 100%; 
            }
        }
        .top {
            right: px2rem(147); 
            background: #666666;
            &:active {
                background: #4d4d4d;
            }
            i {
                
                width: px2rem(27);
                height: px2rem(46);
                background: url(../img/icon-top.png) no-repeat;
                background-size: 100% 100%; 
            }
        }
    }
}