@media screen and (min-width: 660px) and (max-width: 820px) {
    .menu-wrapper {
        position: fixed;
        left: 10%;
        z-index: 110;  /* 高于书籍flipbook-container */
        width: 80%;
        height: 46px;
        text-align: center;
        background: #444;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .init-menu {
        width:  236px;
        height: 46px;
        margin: 0 auto ;
    }
    .init-menu .magnify-btn,
    .init-menu .thumbnail-btn,
    .init-menu .play-btn,
    .init-menu .voice-btn,
    .init-menu .share-btn,
    .init-menu .full-btn {
        display: none;
    }
    .init-menu .more-btn {
        display: block!important;
    }
    .init-menu .page-input-wrapper {
        margin-right: 5px;
        float: left;
        width: 92px;
        line-height: 40px;
        color: rgb(51, 51, 51);
        border-radius: 5px;
    }
    .init-menu .page-input{
        text-align: center;
        border-radius: 5px;
    }
    .extendedBar {
        display: none;
        position: absolute;
        box-sizing: border-box;
        padding-top: 2px;
        padding-left: 2px;
        color: #fff;
        position: relative;
        z-index: 140;
        background-color: rgb(68, 68, 68);
        width: 160px;
        height: 190px;
        /*left: 168px;*/
        top: 5px;
        opacity: 1;
        font-size: 12px;
        border-radius: 5px;
    }
    .extendedBar .magnify-btn,
    .extendedBar .thumbnail-btn,
    .extendedBar .play-btn,
    .extendedBar .voice-btn,
    .extendedBar .share-btn,
    .extendedBar .full-btn{
        display: block;
        color: #000;
        color: #FFFFFF;
        width: 150px;
        height: 30px;
        border-radius: 3px;
        cursor: pointer;
        opacity: 1;
    }
    .extendedBar .magnify-btn:hover,
    .extendedBar .thumbnail-btn:hover,
    .extendedBar .play-btn:hover,
    .extendedBar .voice-btn:hover,
    .extendedBar .share-btn:hover,
    .extendedBar .full-btn:hover{
        background: rgb(113, 113, 113);
    }
    .extendedBar  img {
        width: 22px;
        height: 22px;
        float: left;
        margin-left: 4px;
        margin-top: 4px;
    }
    .extendedBar span {
        float: left;
        margin-left: 12px;
        line-height: 30px;
    }
}

@media screen and (max-width: 660px)  {
    .menu-wrapper {
        min-width: 500px;
    }
    .searchBar {
        display: none;
    }



}