@import '../base/mixin.scss';
.comment-page{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background: url('../../img/comment-bg.jpg') center center no-repeat;
    background-size: cover;
    .book-header{
        height: px2rem(100);
        line-height: px2rem(100);
        background: url('../../img/hunter-logo.png') 10px center no-repeat;
        background-size: px2rem(786) px2rem(63);
        padding-left: px2rem(900);
    }
    .mod-btn{
        display: inline-block;
        width: px2rem(160);
        line-height: px2rem(50);
        height: px2rem(50);
        word-spacing: 4px;
        text-align: center;
        color: #fffefe;
        font-size: px2rem(20);
        background-color: #080807;
        margin-right: px2rem(46);
        cursor: pointer;
        &.active{
            background-color: #ff6600;
            color: #ffffff;
        }
    }
    .go-back-btn{
        float: right;
        width: px2rem(158);
        line-height: px2rem(66);
        font-size: px2rem(20);
        background-color: #ff6600;
        color: #ffffff;
        border-radius: px2rem(33);
        text-align: center;
        margin-top: px2rem(30);
        margin-right: px2rem(20);
        cursor: pointer;
    }
    .page-comment{
        display: none;
    }
    .page-book{
        overflow: auto;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .book-modal{
        // position: absolute;
        // z-index: 1;
        // top: px2rem(100);
        // left: px2rem(30);
        // right: px2rem(30);
        padding: px2rem(20);
        margin: 0 px2rem(30);
        border-top: 2px solid #ff6600;
        background-color: rgba($color: #000000, $alpha: .5);
        img{
            width: px2rem(350);
            height: auto;
            &.fr{
                margin-left: px2rem(20);
            }
            &.fl{
                margin-right: px2rem(20);
            }
        }
        .info{
            margin-right: px2rem(370);
        }
        h3{
            color: #ffffff;
            font-size: px2rem(30);
            margin-bottom: px2rem(10);
        }
        p{
            color: #ffffff;
            font-size: px2rem(24);
            line-height: 1.6;
        }
    }
    .book-btn-bottom{
        // position: absolute;
        // z-index: 10;
        // bottom: px2rem(220);
        // left: 50%;
        display: block;
        width: px2rem(208);
        margin: px2rem(50) auto;
        // margin-left: -px2rem(104);
        height: px2rem(70);
        line-height: px2rem(70);
        cursor: pointer;
        background-color: #ff6600;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
    }
    .poster-wrapper{
        // position: absolute;
        // cursor: pointer;
        // bottom: px2rem(24);
        // left: 0;
        // right: 0;
        // margin-top: px2rem(40);
        text-align: center;
        img{
            display: inline-block;
            width: px2rem(272);
            margin: 0 px2rem(32);
        }
    }
    video{
        width: px2rem(1000);
    }
    .page-comment{
        width: 1100px;
        margin: 0 auto;
        iframe{
            height: px2rem(840);
            overflow: auto;
        }
    }
}