@import '../base/mixin.scss';
.comment-page{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../../img/comment-bg.jpg') center center no-repeat;
    background-size: cover;
    .move-bg{
        position: fixed;
        z-index: -1;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: url('../../img/comment-bg.jpg') center center no-repeat;
        background-size: cover;
    }
    .book-header{
        height: px2rem(96);
        line-height: px2rem(96);
        background: url('../../img/hunter-logo.png') 10px center no-repeat;
        background-size: px2rem(786) px2rem(63);
        background-color: rgba($color: #000000, $alpha: .4);
        border-bottom: 1px solid #ff6600;
        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(48);
        font-size: px2rem(20);
        color: #ff6600;
        border: 1px solid #ff6600;
        text-align: center;
        margin-top: px2rem(26);
        margin-right: px2rem(20);
        cursor: pointer;
    }
    .page-comment{
        display: none;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .book-modal{
        position: absolute;
        z-index: 1;
        padding: px2rem(20);
        border-top: 2px solid #ff6600;
        background-color: rgba($color: #000000, $alpha: .5);
        img{
            width: px2rem(294);
            height: auto;
            &.fr{
                margin-left: px2rem(20);
            }
            &.fl{
                margin-right: px2rem(20);
            }
        }
        .info{
            width: px2rem(680);
        }
        h3{
            color: #ffffff;
            font-size: px2rem(30);
            margin-bottom: px2rem(10);
        }
        p{
            color: #ffffff;
            font-size: px2rem(14);
            line-height: 1.6;
        }
    }
    .book-modal-1{
        top: px2rem(158);
        left: px2rem(36);
    }
    .book-modal-2{
        top: px2rem(380);
        right: px2rem(122);
    }
    .bear{
        position: absolute;       
        top: px2rem(366);
        left: px2rem(20);
        width: px2rem(648);
        height: px2rem(571);
        background: url('../../img/book-bear.png');
        background-size: 100%;
    }
    .deer{
        position: absolute;       
        top: px2rem(60);
        right: px2rem(130);
        width: px2rem(635);
        height: px2rem(777);
        background: url('../../img/book-deer.png');
        background-size: 100%;
    }
    .book-btn-bottom{
        position: absolute;
        z-index: 10;
        bottom: px2rem(280);
        left: 50%;
        width: px2rem(208);
        margin-left: -px2rem(104);
        height: px2rem(71);
        background: url('../../img/book-btn.png') no-repeat;
        background-size: 100%;
        cursor: pointer;
    }
    .poster-wrapper{
        position: absolute;
        cursor: pointer;
        bottom: 0;
        left: 0;
        right: 0;
        img{
            display: inline-block;
            width: px2rem(582);
            margin-right: px2rem(15);
        }
    }
    video{
        width: px2rem(1000);
    }
    .page-comment{
        width: 1100px;
        margin: 0 auto;
        iframe{
            height: px2rem(840);
            overflow: auto;
        }
    }
}