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

:root {
    --color-text: #333333;
    --color-gray: #999999;
}

.mainBox .container {
    width: 1440px !important;
    margin: 0 auto;
}

.leftContainer {
    width: 972px;
}

.mainBox {
    margin-top: 40px;
}

.sub_leftBar_button {
    display: none !important;
}

.book {
    /* display: flex; */
    margin-bottom: 30px !important;
}

.booktop {
    display: flex;
    height: auto;
    width: 100%;
    background: url('../images-index/booktop.png') no-repeat center top;
    position: relative;
    padding-bottom: 66px;
}

.booktop::after {
    position: absolute;
    content: "";
    background: url(../images-index/bookmiddle.png);
    width: 100%;
    height: calc(100% - 829px);
    bottom: 0;
    z-index: -2;
}


/* 自定义下拉框样式 */

.custom-select-container {
    width: 170px;
    height: 50px;
    position: relative;
    display: inline-block;
    margin-right: 16px;
    border: 1px solid #e1e1e1;
}

.custom-select-display {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.custom-select-display1 {
    width: 174px;
    height: 100%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.custom-select-value {
    display: flex;
    align-items: center;
    padding: 2px 25px;
    box-sizing: border-box;
    font-size: 18px;
    width: 100%;
    height: 100%;
    background: url(../images-index/arrow.png) no-repeat center right 15px;
}

.custom-select-value span {
    color: var(--color-gray);
}

.custom-select-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}

.select-oprions {
    font-size: 18px;
    color: var(--color-text);
}


/* 下拉箭头样式 */

.custom-select-arrow {
    margin-left: auto;
}

.booktop .left {
    width: 974px;
    height: auto;
    padding-left: 66px;
    padding-right: 40px;
}

.booktop .left .content {
    margin-top: 26px;
}

.booktop .left .content .title {
    height: 66px;
    width: 100%;
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: bold;
    line-height: 51px;
    color: var(--color-text);
    background: url(../images-index/split.png) no-repeat bottom left;
}

.booktop .left .content .search {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    display: flex;
}

.booktop .left .content .search .label1 {
    font-size: 18px;
    color: var(--color-text);
    margin-right: 32px;
}

.booktop .left .content .search .label2 {
    font-size: 18px;
    color: var(--color-text);
    margin-right: 16px;
}

.booktop .left .content .search .label3 {
    font-size: 18px;
    color: var(--color-text);
}

.booktop .left .content .search .search-input {
    height: 48px;
    border: 1px solid #e1e1e1;
    padding-left: 20px;
    font-size: 18px;
    color: var(--color-text);
}

.booktop .left .content .search .search-input1 {
    width: 772px;
}

.booktop .left .content .search .search-input2 {
    width: 320px;
}

.booktop .left .content .search .search-input3 {
    width: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    padding-left: 0;
    text-align: center;
}

.searchBtns {
    margin-top: 30px;
    margin-left: 262px;
    margin-bottom: 48px;
}

.searchBtns button {
    width: 150px;
    height: 46px;
    border: none;
    background-color: #295de0;
    font-size: 18px;
    color: #fff;
    border-radius: 3px;
}

.searchBtns button:nth-child(1) {
    margin-right: 40px;
}

.bootbottm {
    width: 100%;
    height: 59px;
    background: url(../images-index/bookbottom.png) no-repeat center;
    /* bottom: 50px; */
}

.booktop .right {
    position: relative;
    width: 466px;
    padding-left: 44px;
    padding-top: 46px;
}

.booktop .right .content {
    line-height: 36px;
    width: 372px;
    height: 300px;
    padding: 30px 20px;
    font-size: 18px;
    color: var(--color-text);
    background-color: #edf7ff;
    margin-bottom: 30px;
}

.right .title {
    width: 372px;
    height: 46px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--color-text);
    background: url(../images-index/split.png) no-repeat bottom left;
}

.booktop .right .content p {
    text-indent: 2em;
    height: 174px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* 控制显示行数 */
    -webkit-box-orient: vertical;
}

.booktop .right .content .enter {
    margin-top: 30px;
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: none;
    color: #295de0;
    font-size: 16px;
    display: block;
    text-align: center;
}

.booktop .right .department .span1 {
    font-size: 18px;
    color: #666666;
    margin-right: 30px;
    line-height: 30px;
}

.booktop .right .department .span2 {
    font-size: 18px;
    color: #666666;
    margin-right: 15px;
    line-height: 30px;
}

.booktop .right .department .span3 {
    font-size: 18px;
    color: #666666;
    margin-right: 6px;
}

.booktop .right .department .span4 {
    font-size: 18px;
    color: #666666;
    margin-right: 6px;
}

.booktop .right .department .span5 {
    font-size: 18px;
    color: #666666;
    margin-right: 6px;
}

.booktop .right .department .span6 {
    font-size: 18px;
    color: #666666;
    line-height: 30px;
}

.booktop .right .department .departmentlable {
    display: flex;
}

.booktop .right .department .departmentlable .departmentleft {
    width: 95px;
}

.booktop .right .department .departmentlable .departmentright {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
}

.booktop .right .department .departmentlable .departmentright .namebox {
    width: calc(30%);
    margin-bottom: 10px;
}

.booktop .right .department .departmentlable .departmentright .name {
    width: 55px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
    text-align-last: justify;
    color: var(--color-text);
}

.booktop .right .department .departmentlable .departmentright .long {
    display: block;
    width: 258px;
    line-height: 30px;
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 10px;
}

.qk {
    display: flex;
    justify-content: space-between;
}


/* 下拉框容器样式 */

.qk-container {
    width: 372px;
}


/* 行容器样式 */

.qk-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
}


/* 每个下拉框项样式 */

.qk-item {
    width: 170px;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}


/* 标签样式 */

.qk-item label {
    margin-right: 8px;
    font-size: 16px;
    color: var(--color-text);
}


/* 下拉框样式 */

.qk-item select {
    width: 170px;
    height: 50px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    flex: 1;
    box-sizing: border-box;
}

.books {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}

.books a {
    margin-right: 19px;
}

.books a:nth-child(3n) {
    margin-right: 0;
}

.books .book {
    text-align: center;
    position: relative;
    width: 276px;
    height: 338px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    background: url(../images-index/book.png) no-repeat center;
}

.books .book img {
    width: 67%;
    margin-top: -70px;
}

.books .book .count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 35px;
    bottom: 45px;
    height: 40px;
    border: 1px solid #f2f2f2;
    width: 210px;
    font-size: 16px;
    color: var(--color-gray);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 10px;
}

.link {
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px !important;
}

.link a:first-child {
    margin-right: 30px;
}

.link .gwygb {
    width: 705px;
    height: 132px;
    background: url(../images-index/gwy.png) no-repeat center;
}

.link .zzqgb {
    width: 705px;
    height: 132px;
    background: url(../images-index/zzq.png) no-repeat center;
}

.hvr-float-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(3, 94, 165, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(3, 94, 165, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

.gb .title {
    width: 100%;
    height: 36px;
    background: url(../images-index/jt.png) no-repeat center;
    margin-bottom: 26px;
}

.gb .title span {
    display: block;
    width: 100%;
    font-size: 28px;
    font-weight: bold;
    color: #295de0;
    text-align: center;
}

.gb .imgs {
    display: flex;
    gap: 30px;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
}

.gb .imgs a {
    width: 264px;
    height: 144px;
    overflow: hidden;
    display: block;
}

.gb .img {
    position: relative;
    width: 264px;
    height: 144px;
    transition: all .3s;
}

.gb a:hover .img {
    transform: scale(1.1);
}

.gb .img1 {
    background: url(../images-index/tzq.png) no-repeat center;
}

.gb .img2 {
    background: url(../images-index/tkx.png) no-repeat center;
}

.gb .img3 {
    background: url(../images-index/hl.png) no-repeat center;
}

.gb .img4 {
    background: url(../images-index/qs.png) no-repeat center;
}

.gb .img5 {
    background: url(../images-index/wc.png) no-repeat center;
}

.gb .img6 {
    background: url(../images-index/xc.png) no-repeat center;
}

.gb .img7 {
    background: url(../images-index/hm.png) no-repeat center;
}

.gb .img8 {
    background: url(../images-index/yq.png) no-repeat center;
}

.gb .img9 {
    background: url(../images-index/sh.png) no-repeat center;
}

.gb .img .title {
    position: absolute;
    bottom: -20px;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}

@media (max-width: 750px) and (min-width: 320px) {
    body,
    html {
        zoom: 1 !important;
        min-width: 3.2rem;
    }
    .mainBox .container {
        width: 6.9rem !important;
        margin-bottom: .3rem;
    }
    .mainBox {
        margin-top: 0.4rem;
        background-color: #ffffff;
        box-sizing: border-box;
        padding-top: .4rem;
    }
    .booktop {
        background: none;
        display: block;
        padding-bottom: 0;
    }
    .booktop::after {
        background: none;
    }
    .booktop .left {
        width: 100%;
        padding: 0;
        float: left;
    }
    .booktop .left .content {
        margin-top: 0;
    }
    .booktop .left .content .title {
        height: 0.75rem;
        font-size: .34rem;
        line-height: .5rem;
        margin-bottom: .3rem;
        background-size: 180%;
    }
    .booktop .left .content .title span {
        font-size: .34rem !important;
    }
    .booktop .left .content .search .label1 {
        margin-right: .56rem;
        font-size: .28rem;
        line-height: .7rem;
        float: left;
        display: block;
    }
    .booktop .left .content .search .label2 {
        margin-right: 0.2rem;
        font-size: .28rem;
        line-height: .7rem;
        float: left;
        display: block;
    }
    .booktop .left .content .search .search-input1,
    .booktop .left .content .search .search-input2 {
        width: 5.56rem;
        height: .7rem;
        margin-right: 0 !important;
        box-sizing: border-box;
        padding-left: .2rem !important;
    }
    .custom-select-container {
        width: 5.56rem !important;
        height: .7rem;
        box-sizing: border-box;
    }
    .custom-select-value {
        padding: 0 .2rem;
    }
    .custom-select-value span {
        font-size: .28rem;
        line-height: .68rem;
    }
    .custom-select-container2 {
        width: 3.25rem !important;
        float: left;
    }
    .custom-select-container2 .label2 {
        float: right;
    }
    .select-oprions {
        font-size: .28rem;
    }
    .booktop .left .content .search .search-input3 {
        width: 1rem !important;
        height: .7rem;
        box-sizing: border-box;
        margin-right: .2rem;
        font-size: .28rem;
        line-height: .68px;
    }
    .booktop .left .content .search .label3 {
        float: right;
        font-size: .28rem;
        display: block;
        line-height: .7rem;
    }
    .searchBtns {
        display: table;
        margin: 0 auto;
        margin-top: .3rem;
    }
    .searchBtns button {
        width: 2.1rem;
        height: .7rem;
        font-size: .28rem;
    }
    .searchBtns button:nth-child(1) {
        margin-right: .4rem;
    }
    .books {
        min-height: 7rem !important;
        margin-top: .5rem;
    }
    .books a {
        margin-right: .3rem;
    }
    .books a:nth-child(3n) {
        margin-right: .3rem;
    }
    .books a:nth-child(2n) {
        margin-right: 0;
    }
    .books .book {
        width: 3.3rem;
        height: 4rem;
        margin-bottom: .3rem !important;
        background-size: 100%;
    }
    .books .book img {
        margin-top: -.7rem;
    }
    .books .book .count {
        width: 100%;
        font-size: .28rem;
        height: auto;
        line-height: .45rem;
        box-sizing: border-box;
        border: 0;
        bottom: .4rem;
        padding: 0 .3rem;
    }
    .pages {
        margin: 0 auto;
        margin-top: 0 !important;
        margin-bottom: 0.1rem !important;
    }
    .pages a,
    .pages b {
        line-height: .8rem;
    }
    .booktop .right {
        width: 100%;
        float: left;
        padding: 0;
    }
    .right .title {
        width: 100%;
        height: 0.75rem;
        font-size: .34rem;
        line-height: .5rem;
        margin-bottom: 0.3rem;
        background-size: 180%;
    }
    .right .title span {
        font-size: .34rem !important;
    }
    .booktop .right .content {
        width: 100%;
        height: 5.2rem;
        font-size: .28rem;
        line-height: .45rem;
        padding: .3rem .4rem;
        text-align: justify;
        margin-bottom: .3rem;
    }
    .booktop .right .content p {
        -webkit-line-clamp: 6;
        height: auto;
        font-size: .32rem;
        line-height: .56rem;
    }
    .booktop .right .content .enter {
        margin-top: .3rem;
        font-size: .3rem;
        height: .8rem;
        line-height: .8rem;
    }
    .booktop .right .department .span1 {
        font-size: .32rem;
        margin-right: .52rem;
        line-height: .48rem !important;
    }
    .booktop .right .department .span2 {
        font-size: .32rem;
        margin-right: .2rem;
        line-height: .48rem !important;
    }
    .booktop .right .department .span3,
    .booktop .right .department .span4,
    .booktop .right .department .span5 {
        margin-right: 0.06rem;
        font-size: .32rem;
        line-height: .48rem !important;
    }
    .booktop .right .department .span6 {
        font-size: .32rem;
        line-height: .48rem !important;
    }
    .booktop .right .department .departmentlable .departmentright {
        font-size: .32rem !important;
        line-height: .48rem !important;
    }
    .booktop .right .department .departmentlable .departmentright .namebox {
        margin-bottom: .2rem;
    }
    .booktop .right .department .departmentlable .departmentright .name {
        font-size: .32rem;
        line-height: .48rem !important;
        text-align-last: left !important;
    }
    .booktop .right .department .departmentlable .departmentright .long {
        font-size: .32rem;
        line-height: .48rem !important;
    }
    .booktop .right .department .departmentlable .departmentleft {
        margin-top: 0 !important;
    }
    .booktop .right .department .departmentlable .departmentleft {
        width: 1.7rem;
    }
    .department {
        margin-bottom: 0.1rem !important;
    }
    .qk-container {
        width: 100%;
    }
    .qk-item {
        width: 3.3rem;
        height: .7rem;
        margin-bottom: .3rem;
    }
    .qk-item .custom-select-container,
    .custom-select-display1 {
        width: 3.3rem !important;
    }
    .qk-item select {
        width: 3.3rem !important;
        height: .7rem;
    }
    .bootbottm {
        display: none;
    }
    .link {
        display: block;
        margin-bottom: 0 !important;
    }
    .link a {
        float: left;
    }
    .link .gwygb,
    .link .zzqgb {
        width: 6.9rem;
        height: 1.5rem;
        background-size: 100%;
    }
    .link .gwygb {
        margin-top: .1rem;
        background: url(../images-index/gwy2.png) no-repeat center;
        background-size: 100%;
    }
    .link .zzqgb {
        margin-top: .3rem;
        background: url(../images-index/zzq2.png) no-repeat center;
        background-size: 100%;
    }
    .gb {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .gb .title {
        height: auto;
        background-size: 250%;
        margin-bottom: .3rem;
    }
    .gb .title span {
        font-size: .34rem;
    }
    .gb .imgs {
        gap: .3rem
    }
    .gb .imgs a {
        width: 3.3rem;
        height: auto;
        float: left;
    }
    .gb .img {
        width: 3.3rem;
        height: 1.8rem;
    }
    .gb .img .title {
        bottom: -.15rem;
        font-size: .28rem;
    }
}