.book-box {
    margin: 0 auto;
    max-width: 960px;
    background: url(../images/book-shadow.png) no-repeat left bottom;
    padding-bottom: 83px;
}

.book-outer {
    background: url(../images/pattren-bg.gif) repeat;
    max-width: 960px;
    height: 430px;
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    position: relative;
}

    .book-outer:before {
        content: '';
        background: url(../images/before-bg.gif) repeat-y left top;
        position: absolute;
        left: -8px;
        top: -1px;
        width: 9px;
        min-height: 430px;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    .book-outer:after {
        content: '';
        background: url(../images/after-bg.gif) repeat-y left top;
        position: absolute;
        right: -10px;
        top: -1px;
        width: 9px;
        min-height: 430px;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

.booklet:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 137px;
    background: #ecc000;
}

.booklet {
    background: url(../images/main-bg.gif) no-repeat right top;
    max-width: 960px;
    min-height: 430px;
    position: relative;
    float: left;
    overflow: visible !important;
}

    .booklet .b-page {
        left: 0;
        top: 0;
        overflow: hidden;
        position: absolute;
        padding: 0;
        outline: 1px solid transparent;
    }

    .booklet .b-pN {
    }

    .booklet .b-p0 {
    }

    .booklet .b-p1 {
    }

    .booklet .b-p2 {
    }

    .booklet .b-p3 {
    }

    .booklet .b-p4 {
    }

    .booklet .b-wrap {
        padding: 0 !important;
        top: 0;
        position: absolute;
    }

    .booklet .b-wrap-left {
        position: relative;
    }

    .booklet .b-wrap-right {
        background: url(../images/main-bg.gif) no-repeat right top;
    }

.left-page {
    float: left;
    width: 100%;
    margin: 27px 0 0 0;
    position: relative;
    height: 420px;
}

.frame {
    max-width: 244px;
    margin: 0 auto;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    display: block;
    position: relative;
    z-index: 9;
}

    .frame img {
        width: 100%;
        display: block;
    }

.left-page .bottom {
    position: absolute;
    left: 0;
    bottom: 17px;
    width: 100%;
    background: #ecc000;
    min-height: 137px;
}

.cart-price {
    max-width: 244px;
    margin: 75px auto 0;
    overflow: hidden;
}

    .cart-price span.cart {
        background: url(../images/cart-icon2.png) no-repeat left top;
        line-height: 23px;
        width: 27px;
        height: 23px;
        float: left;
        margin: 0 9px 0 72px;
    }

    .cart-price strong.price {
        font-size: 24px;
        color: #000;
        float: left;
        line-height: 23px;
        border-left: 1px solid #5a5a5a;
        padding: 0 0 0 10px;
    }

.right-page {
    float: right;
    width: 100%;
    margin: 88px 0 0 0;
    position: relative;
    height: 342px;
}

    .right-page .text {
        float: left;
        width: 100%;
        margin: 0 0 0 25px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .right-page .text h1 {
            font-size: 30px;
            color: #232323;
            margin: 0 0 6px 0;
        }

        .right-page .text strong.name {
            font-size: 20px;
            line-height: 20px;
            color: #ecc000;
            display: block;
            padding: 0 0 8px 0;
        }

.rating-box {
    float: left;
    width: 100%;
    margin: 0 0 32px 0;
}

.right-page .text a.btn-shop {
    width: 126px;
    height: 38px;
    float: left;
    border: 1px solid #ffd800;
    border-radius: 5px;
    text-decoration: none;
    line-height: 38px;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background: #ecc000;
    background: -moz-linear-gradient(top,#d4e147 0%,#b3cb31 3%,#abc52f 28%,#8eb325 69%,#87af22 85%,#89b122 97%,#bbd232 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#d4e147),color-stop(3%,#b3cb31),color-stop(28%,#abc52f),color-stop(69%,#8eb325),color-stop(85%,#87af22),color-stop(97%,#89b122),color-stop(100%,#bbd232));
    background: -webkit-linear-gradient(top,#d4e147 0%,#b3cb31 3%,#abc52f 28%,#8eb325 69%,#87af22 85%,#89b122 97%,#bbd232 100%);
    background: -o-linear-gradient(top,#d4e147 0%,#b3cb31 3%,#abc52f 28%,#8eb325 69%,#87af22 85%,#89b122 97%,#bbd232 100%);
    background: -ms-linear-gradient(top,#d4e147 0%,#b3cb31 3%,#abc52f 28%,#8eb325 69%,#87af22 85%,#89b122 97%,#bbd232 100%);
    background: linear-gradient(to bottom,#d4e147 0%,#b3cb31 3%,#abc52f 28%,#8eb325 69%,#87af22 85%,#89b122 97%,#bbd232 100%);
}

    .right-page .text a.btn-shop:hover {
        text-decoration: underline;
    }

.right-page .bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    background: url(../images/right-bottom-bg.gif) repeat-y left top;
    min-height: 137px;
}

    .right-page .bottom .text {
        float: left;
        width: 100%;
        margin: 0 0 0 25px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .right-page .bottom .text .inner {
            float: left;
            max-width: 282px;
            padding: 38px 0 0 0;
        }

            .right-page .bottom .text .inner p {
                font-size: 12px;
                color: #fff;
                margin: 0 0 10px 0;
            }

            .right-page .bottom .text .inner a.readmore {
                font-size: 14px;
                line-height: 10px;
                color: #fff;
                font-weight: bold;
                border-top: 2px solid #fff;
                padding: 10px 0 0 0;
                float: left;
                text-decoration: none;
            }

                .right-page .bottom .text .inner a.readmore:hover {
                    text-decoration: underline;
                }

.batch-icon {
    float: left;
    margin: 28px 0 0 0;
}

.booklet .b-pN .b-wrap, .booklet .b-p1 .b-wrap, .booklet .b-p2 .b-wrap, .booklet .b-p3 .b-wrap, .booklet .b-p4 .b-wrap {
    left: 0;
}

.booklet .b-p0 .b-wrap {
    right: 0;
}

.booklet .b-page-blank {
    padding: 0;
    width: 100%;
    height: 100%;
}

.booklet .b-page-cover {
    padding: 0;
    width: 100%;
    height: 100%;
    background: #925C0E;
}

    .booklet .b-page-cover h3 {
        color: #fff;
    }

.booklet .b-counter {
    bottom: 0;
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 0;
    line-height: 24px;
    text-align: center;
    padding: 0;
    text-indent: -9000px;
}

.booklet .b-wrap-left .b-counter {
    left: 10px;
    background: url(../images/left-arrow.png) no-repeat left top;
    width: 24px;
    height: 24px;
    content: "";
    display: block;
    text-indent: -9000px;
    font-size: 0;
}

.booklet .b-wrap-right .b-counter {
    right: 0;
    background: url(../images/right-arrow.png) no-repeat left top;
    width: 24px;
    height: 24px;
    content: "";
    display: block;
    text-indent: -9000px;
    font-size: 0;
}

.booklet .b-grab {
    cursor: url("images/openhand.cur"),default;
}

.booklet .b-grabbing {
    cursor: url("images/closedhand.cur"),default;
}

.booklet .b-overlay {
    top: 0;
    position: absolute;
    height: 100%;
    width: 50%;
}

.booklet .b-overlay-prev {
    left: 0;
}

.booklet .b-overlay-next {
    right: 0;
}

.booklet .b-tab {
    background: #000;
    height: 40px;
    width: 100%;
    padding: 10px 0 0;
    text-align: center;
    color: #ccc;
    position: absolute;
    font-size: 11px;
}

.booklet .b-tab-prev {
    left: 0;
}

.booklet .b-tab-next {
    right: 0;
}

.booklet .b-tab:hover {
    background: #aaa;
    color: #000;
}

.booklet .b-arrow {
    display: block;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    height: 100%;
    width: 74px;
}

    .booklet .b-arrow div {
        display: none;
        text-indent: -9999px;
        height: 170px;
        width: 74px;
        position: absolute;
        left: 0;
        top: 25%;
    }

.booklet .b-arrow-next {
    right: -80px;
}

.booklet .b-arrow-prev {
    left: -80px;
}

.booklet .b-arrow-next div {
    background: url(../images/arrow-next.png) no-repeat left top;
}

.booklet .b-arrow-prev div {
    background: url(../images/arrow-prev.png) no-repeat left top;
}

body {
    z-index: 0;
}

.b-menu {
    z-index: 100;
}

.b-selector {
    z-index: 100;
}

.booklet {
    z-index: 10;
}

.b-pN {
    z-index: 10;
}

.b-p0 {
    z-index: 30;
}

.b-p1 {
    z-index: 20;
}

.b-p2 {
    z-index: 20;
}

.b-p3 {
    z-index: 30;
}

.b-p4 {
    z-index: 10;
}

.b-prev {
    z-index: 40;
}

.b-next {
    z-index: 40;
}

.b-counter {
    z-index: 0;
}

.b-menu {
    height: 40px;
    padding: 0 0 10px;
}

.b-selector {
    height: 40px;
    position: relative;
    float: right;
    border: none;
    color: #cecece;
    cursor: pointer;
    font: normal 12px "Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

    .b-selector .b-current {
        padding: 8px 15px 12px;
        line-height: 20px;
        min-width: 18px;
        height: 20px;
        display: block;
        background: #000;
        text-align: center;
    }

.b-selector-page {
    width: auto;
    margin-left: 15px;
}

.b-selector-chapter {
    width: auto;
}

.b-selector:hover {
    color: #fff;
    background-position: left 0px;
}

    .b-selector:hover .b-current {
        background-position: right 0px;
    }

.b-selector ul {
    overflow: hidden;
    margin: 0;
    list-style: none !important;
    position: absolute;
    top: 40px;
    right: 0;
    padding: 0 0 10px;
    background: #000;
    width: 240px;
}

.b-selector li {
    border: none;
}

.b-selector a {
    color: #cecece;
    height: 14px;
    text-decoration: none;
    display: block;
    padding: 5px 10px;
}

    .b-selector a .b-text {
        float: left;
        clear: none;
    }

    .b-selector a .b-num {
        float: right;
        clear: none;
    }

    .b-selector a:hover {
        color: #fff;
    }

@media (min-width: 768px) and (max-width: 979px) {
    body {
        padding: 0 20px;
    }

    .batch-icon {
        display: none;
    }
}

@media (max-width: 767px) {
    body {
        padding: 0 20px;
    }

    .batch-icon {
        display: none;
    }

    .right-page .bottom .text .inner {
        padding: 0;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0 20px;
    }

    .right-page {
        margin: 24px 0 0 0;
        min-height: 406px;
    }

        .right-page .text h1 {
            font-size: 22px;
        }

        .right-page .text {
            margin: 0 3px 0 0;
        }

        .right-page .bottom .text .inner {
            padding: 0;
        }

        .right-page .bottom .text {
            margin: 0 0 0 5px;
        }

    .cart-price span.cart {
        margin: 0 9px 0 6px;
    }

    .cart-price {
        margin: 35px 0 0 0;
    }

    .batch-icon {
        display: none;
    }

    .right-page .bottom .text .inner p {
        font-size: 9px;
    }

    .cart-price strong.price {
        font-size: 17px;
    }
}

@media (max-width: 979px) {
    body {
        padding: 0 20px;
    }
}