*{
    margin:0;
    padding:0;
}

.scroll-wrap {
    width: 100vw;
    overflow-x: auto;
    z-index: 10;
}

.book-wrap {
    position: relative;
    width: 1920px;
    margin: 0 auto;
}
.book-wrap .boot-dir-wrap {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 280px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    z-index: 1000;
    border-radius: 15px;
}
.book-wrap .boot-dir-wrap h2 {
    margin-bottom: 15px;
    color: var(--main-color);
}
.book-wrap .boot-dir-wrap ul li {
    line-height: 40px;
    border-top: 1px solid #ddd;
    cursor: pointer;
    transition: padding .3s ease, background .3s ease, color .3s ease;
}
.book-wrap .boot-dir-wrap ul li:hover {
    background: var(--main-color);
    color: #fff;
    padding-left: 20px;
}
.book-wrap .wrap {
    padding: 20px;
}
.book-wrap .wrap h3 {
    text-align: center;
}
.book-wrap .wrap .rich-text {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
}
.boot-wrap .other-page .rich-text h4:first-of-type {
    margin-top: unset;
}
.book-wrap .wrap .rich-text h4 {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 16px;
    text-align: center;
}
.book-wrap .wrap .rich-text h5 {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1;
}

    /* Booklet jQuery Plugin Style*/
.booklet{
    -moz-box-shadow:0px 0px 1px #fff;
    -webkit-box-shadow:0px 0px 1px #fff;
    box-shadow:0px 0px 1px #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.booklet .b-wrap-left  {
    background:#fff url(/images/book/left_bg.jpg) no-repeat top left;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-size: cover;
    box-sizing: border-box;
}
.booklet .b-wrap-right {
    background:#efefef url(/images/book/right_bg.jpg) no-repeat top left;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-size: cover;
}
.booklet .b-counter {
    bottom:10px;
    position:absolute;
    display:block;
    width:90%;
    height:20px;
    border-top:1px solid #ddd;
    color:#222;
    text-align:center;
    font-size:12px;
    padding:5px 0 0;
    background:transparent;
    -moz-box-shadow:0px -1px 1px #fff;
    -webkit-box-shadow:0px -1px 1px #fff;
    box-shadow:0px -1px 1px #fff;
    opacity:0.8;
}
.book_wrapper{
    margin:0 auto;
    padding-top:58px;
    width:1200px;
    height:800px;
    position:relative;
    background:transparent url(/images/book/bg.png) no-repeat 9px 27px;
    background-size: contain;
}
.book_wrapper a.article,
.book_wrapper a.demo{
    background:transparent url(/images/book/circle.png) no-repeat 50% 0px;
    display:block;
    width:95px;
    height:41px;
    text-decoration:none;
    outline:none;
    font-size:16px;
    color:#555;
    float:left;
    line-height:41px;
    padding-left:47px;
}
.book_wrapper a.demo{
    margin-left:50px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
    background-position:50% -41px;
    color:#13386a;
}
.book_wrapper img{
    margin:10px 0px 5px 35px;
    width:300px;
    padding:4px;
    border:1px solid #ddd;
    -moz-box-shadow:1px 1px 1px #fff;
    -webkit-box-shadow:1px 1px 1px #fff;
    box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
    border:1px solid #E6E3C2;
}
a#next_page_button,
a#prev_page_button{
    display:none;
    position:absolute;
    width:41px;
    height:40px;
    cursor:pointer;
    margin-top:-20px;
    top:50%;
    background:transparent url(/images/book/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
    left:-30px;
}
a#next_page_button{
    right:-30px;
    background-position:-41px -40px;
}
a#next_page_button:hover{
    background-position:-41px 0px;
}
a#prev_page_button:hover{
    background-position:0px 0px;
}
.loading{
    width:160px;
    height:56px;
    position: absolute;
    top:50%;
    margin-top:-28px;
    right:135px;
    line-height:56px;
    color:#fff;
    padding-left:60px;
    font-size:15px;
    background: #000 url(/images/book/ajax-loader.gif) no-repeat 10px 50%;
    opacity: 0.7;
    z-index:9999;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}