* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-size: 12px;
    line-height: 20px;
    color: #333;
    background: 0 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.container-bg .header {
    background: url(/assets/img/pdf/bg-header.png);
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 9;
}

.back {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 60px;
}
.back img {
    width: 100%;
}
.container-bg .footer {
    background: url(/assets/img/pdf/bg-footer.png);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
}

.container-bg .main .main-top {
    position: absolute;
    right: 0;
    top: 70px;
    left: 0;
    height: 120px;
}
.container-bg .main .main-top .main-top-left {
    position: absolute;
    background-position: -3px -295px;
    background-image: url(/assets/img/pdf/border.png);
    background-color: #ba8276;
    background-repeat: no-repeat;
    height: 100%;
    width: 165px;
    top: 0;
    left: 0;
}
.container-bg .main .main-top .main-top-center {
    position: absolute;
    background-image: url(/assets/img/pdf/center-top.png);
    height: 100%;
    right: 165px;
    top: 0;
    left: 165px;
}
.container-bg .main .main-top .main-top-right {
    position: absolute;
    background-position: -178px -295px;
    background-image: url(/assets/img/pdf/border.png);
    background-color: #ba8276;
    background-repeat: no-repeat;
    width: 165px;
    height: 100%;
    right: 0;
    top: 0;
}

.container-bg .main .main-center {
    position: absolute;
    right: 0;
    top: 190px;
    left: 0;
    bottom: 120px;
}
.container-bg .main .main-center .main-center-left {
    position: absolute;
    background-image: url(/assets/img/pdf/center-left.png);
    height: 100%;
    width: 165px;
    top: 0;
    left: 0;
}
.container-bg .main .main-center .main-center-center {
    position: absolute;
    background-image: url(/assets/img/pdf/center-center.png);
    height: 100%;
    right: 165px;
    top: 0;
    left: 165px;
}
.container-bg .main .main-center .main-center-right {
    position: absolute;
    background-image: url(/assets/img/pdf/center-right.png);
    width: 165px;
    height: 100%;
    right: 0;
    top: 0;
}

.container-bg .main .main-bottom {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    height: 120px;
}
.container-bg .main .main-bottom .main-bottom-left {
    position: absolute;
    background-position: -3px -437px;
    background-image: url(/assets/img/pdf/border.png);
    height: 100%;
    background-repeat: no-repeat;
    width: 165px;
    top: 0;
    left: 0;
}
.container-bg .main .main-bottom .main-bottom-center {
    position: absolute;
    background-image: url(/assets/img/pdf/center-bottom.png);
    height: 100%;
    right: 165px;
    top: 0;
    left: 165px;
}
.container-bg .main .main-bottom .main-bottom-right {
    position: absolute;
    background-position: -178px -437px;
    background-image: url(/assets/img/pdf/border.png);
    background-repeat: no-repeat;
    width: 165px;
    height: 100%;
    right: 0;
    top: 0;
}

.container-main-top {
    text-align: center;
    height: 80px;
    z-index: 99;
    position: absolute;
    top: 0;
    width: 100%;
}
.container-main-top .title {
    cursor: default;
    font-size: 20px;
    font-weight: bold;
    color: #743D0D;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    max-width: 595px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: 18px;
    text-align: center;
    height: 44px;
    line-height: 44px;
    z-index: 1;
}
.container-main-top .search {
    position: absolute;
    border-radius: 18px;
    right: 25px;
    top: 22px;
    z-index: 11;
    height: 36px;
}
.container-main-top .search .search-content {
    position: relative;
    left: 0;
    top: 0;
    width: 310px;
}
.container-main-top .search .search-content input {
    border:none;
    background:#FFFFFF;
    width: 100%;
    height:36px;
    line-height: 36px;
    border-radius: 18px;
    padding: 0 30px 0 36px;
}
.container-main-top .search .search-content .icon {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 6px;
    padding: 4px;
    left: 8px;
    cursor: pointer;
}

.container-main-center {
    overflow: hidden;
    position: absolute;
    left: 25px;
    right: 25px;
    padding: 0 15px;
    box-sizing: border-box;
    top: 85px;
    bottom: 50px;
}
.container-main-center .top {
    position:relative;
    height:auto;
    top:0;
    color:#666666;
    width:100%;
    text-align:center;
    font-size:14px;
    overflow: hidden;
}
.container-main-center .top .order {
    position: relative;
    float: right;
    display: inline-block;
    height: 42px
}
.container-main-center .top .order .order-left,.container-main-center .top .order .order-right {
    position: relative;
    cursor: pointer;
    float: left;
    display: inline-block;
    line-height: 42px;
    height: 42px;
    width: 105px;
    background-color: #f4f4f4;
    color: #797774;
}
.container-main-center .top .order .order-left {
    border-top-left-radius: 21px;
    border-bottom-left-radius: 21px;
}
.container-main-center .top .order .order-right {
    border-left: 1px solid #E0E0E0;
    border-top-right-radius: 21px;
    border-bottom-right-radius: 21px;
}
.container-main-center .top .order .title {
    vertical-align: top;
    display: inline-block;
    height: 42px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.container-main-center .top .order .arrow-box {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 42px;
    left: 5px;
}
.container-main-center .top .order .arrow-box .top-arrow,.container-main-center .top .order .arrow-box .bottom-arrow {
    position: absolute;
    left: 0;
    border-style: solid;
    border-color: rgb(102, 102, 102) transparent;
    border-image: initial;
}
.container-main-center .top .order .arrow-box .top-arrow {
    top: 13px;
    border-width: 0 4px 5px;
}
.container-main-center .top .order .arrow-box .bottom-arrow {
    bottom: 13px;
    border-width: 5px 4px 0;
}

.container-main-center .center {
    position: absolute;
    left: 0;
    top: 60px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    margin: 0 20px;
    color: rgb(255, 255, 255);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.container-main-center .center .items {
    position: relative;
    z-index: 1;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    height: 255px;
}
.container-main-center .center .items .list {
    position: absolute;
    z-index: 2;
    text-align: left;
    height: 166px;
    width: 90%;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0);
}
.container-main-center .center .items .item {
    cursor: pointer;
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 6px 24px;
    bottom: 30px;
    width: 128px;
    height: 166px;
}
.container-main-center .center .items .item .box {
    z-index: 1;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: relative;
}
.container-main-center .center .item .thumb {
    pointer-events: none;
    max-width: 128px;
    max-height: 166px;
    width: 121px;
    height: 166px;
    display: inline;
    transition: all .25s;
    -webkit-transition: all .25s;
    cursor: pointer;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    z-index: 1;
    position: absolute;
    bottom: 0;
    box-shadow: #888 0 0 4px 0;
    -webkit-box-shadow: #888 0 0 4px 0;
}

.container-main-center .center .items .item .box:hover .thumb {
    box-shadow: #333 0 0 8px 0;
     -webkit-box-shadow: #333 0 0 8px 0;
}

.container-main-center .center .bg{
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 100%;
    height: 91px;
    bottom: -13px;
}
.container-main-center .center .bg .bg-left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 80px;
    height: 91px;
    background: url(/assets/img/pdf/items-left.png) right center no-repeat;
}
.container-main-center .center .bg .bg-center {
    position: absolute;
    left: 80px;
    right: 80px;
    z-index: 1;
    text-align: center;
    height: 91px;
    background: url(/assets/img/pdf/items-center.png) center center repeat-x;
}
.container-main-center .center .bg .bg-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 80px;
    height: 91px;
    background: url(/assets/img/pdf/items-right.png) left center no-repeat;
}

.container-main-center .bottom {
    position: absolute;
    line-height: 40px;
    color: rgb(255, 255, 255);
    right: 35px;
    bottom: 0;
}

::-webkit-scrollbar {
    width: 10px;  /* 设置滚动条的宽度 */
    border-radius: 2em;
}

::-webkit-scrollbar-track {
    background-color: rgba(150, 150, 150, .2);

}

::-webkit-scrollbar-thumb {
    background-color: #553E3C;  /* 设置滚动条滑块的背景色 */
    border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #553E3C;  /* 设置滚动条滑块的背景色（鼠标悬停时） */
}