*{
    box-sizing: border-box;
}
.book{
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #DE9678;
    border-radius: 5px;
    width: 1200px;
    /* background: rgba(222, 150, 120, .3); */
}
.booknav{
    width: 358px;
    height: 750px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #DE9678;
    border-right: none;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 1px 23px 58px  rgba(196, 118, 94, 0.38);
}
.booknav::-webkit-scrollbar{
    display: none;
}
.booknav > div{
    width: 100%;
    font-size: 18px;
}
.booknav > div + div{
    margin-top: 18px;
}
.booknav > div p{
    position: relative;
    padding-left: 23px;
    width: 100%;
    line-height: 40px;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(252, 237, 232, 1) 0%, rgba(255, 240, 232, 0) 100%);
}
.booknav > div p::before{
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C72A2A;
    content: '';
    top: 50%;
    left: 7px;
    margin-top: -3px;
}
.booknav > div.on p{
    font-weight: bold;
    color: #C72A2A;
}
.booknav > div p i{
    position: absolute;
    top: 0px;
    right: 10px;
}
.booknav > div.on p i{
    transform: rotate(180deg);
}
.booknav .booklist{
    display: none;
}
.booknav .booklist.on{
    display: block;
}
.booknav .booklist span{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.booknav .booklist span a.on{
    color: #C72A2A;
}
.booknav .booklist b{
    display: block;
    margin: 20px 0;
}
.bookinfo{
    width: 800px !important;
    padding-right: 20px;
    position: relative;
    box-shadow: 1px 23px 58px  rgba(196, 118, 94, 0.38);
    border: 1px solid #DE9678;
    border-radius: 5px;
}
.bookinfo::before,.bookinfo::after{
    content: '';
    position: absolute;
    top: -1px;
    right: 13px;
    width: 8px;
    height: 100%;
    border: 1px solid #DE9678;
    border-left: none;
    border-radius: 0 5px 5px 0;
}
.bookinfo::after{
    right: 6px;
}
.bookinfo .page-wrapper{
    width: 100%;
    /* border: 1px solid #DE9678; */
    border-radius: 5px;
    height: 750px;
    overflow: hidden;
}
.bookinfo > div{
    padding: 0 20px;
    height: 100%;
    background-color: #fff;
}
.bookinfo > div img{
    max-width: 100%;
}

.bookinfo .page{
    /* padding: 40px 30px 40px 30px; */
    position: relative;
    overflow-y: auto;
}
.bookinfo .page::-webkit-scrollbar{
    position: absolute;
    right: 10px;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #FC9292;
    border-radius: 3px;
}
.bookinfo .page::-webkit-scrollbar-button{
    display: none;
}
.bookinfo .page::-webkit-scrollbar-thumb{
    width: 5px;
    background: #C20600;
    border-radius: 3px;
}
.bookinfo .page .article-title{
    text-align: center;
    font-size: 24px;
}
.bookinfo .page .article-title,.bookinfo .page .article-content{
    width: 90%;
    margin: 30px auto;
}
@media screen and (max-width: 1200px) {
    .book{
        width: 100%;
    }
    .booknav{
        margin-bottom: 5px;
        width: 100%;
        height: 200px;
        border-right: 1px solid #DE9678;
    }
    .bookinfo{
        width: 100% !important;
        height: 500px;
        padding-right: 0px;
    }
    .bookinfo::before,.bookinfo::after{
        display: none;
    }
    .bookinfo .page .article-title{
        font-size: 20px;
    }
    .booknav > div{
        font-size: 14px;
    }
    .booknav .booklist b{
        margin: 10px 0;
    }
    .booknav .booklist span{
        line-height: 32px;
        height: 32px;
    }
    .booknav > div p{
        line-height: 32px;
    }
    .booknav > div + div{
        margin-top: 10px;
    }
}