.bookslist .bookslist-group .books-search-group .books-search:after {
	content: ''; display: block; clear: both;
}
.bookslist .bookslist-group .books-search-group {
	padding: 5px 10px; margin: 20px 0; background-color: #f1f5f9;
}

.bookslist .bookslist-group .books-search-group .books-search {
    width: 100%; margin: 20px auto;
    height: 37px; position: relative;
    border: 1px solid #d3d3d3; border-radius: 20px;
    overflow: hidden;
}
.bookslist .bookslist-group .books-search-group .books-search .search-input {
    position: relative; top: -2px;
    height: auto; padding: 5px 10px; margin: 5px;
    outline: none; border: none;
}
.bookslist .bookslist-group .books-search-group .books-search .search-btn {
    position: absolute; top: -2px; right: -2px;
    width: 62px; height: 42px; 
    outline: none; border-left: 1px solid #d3d3d3; cursor: pointer;
    background-color: #f8f8f8;
}
.bookslist .bookslist-group .books-search-group .books-search .search-btn i {
    line-height: 37px; color: #000;
}
@media screen and (max-width: 660px) {
    .bookslist .bookslist-group .books-search-group .books-search {
        width: 100%;
    }
}


.bookslist .bookslist-group .books-list:after {
	content: ''; display: block; clear: both;
}
.bookslist .bookslist-group .books-list .books-item {
	float: left; height: 305px; width: calc(20% - 10px); margin: 0 10px 10px 0;
	position: relative; overflow: hidden; cursor: pointer;
	border-radius: 8px;
}
.bookslist .bookslist-group .books-list .books-item:nth-of-type(5n) {
	width: 20%; margin: 0 0 10px 0;
}
.bookslist .bookslist-group .books-list .books-item img {
    position: absolute; top: 0; left: 0;
    display: block; width: 100%; height: 100%;
    object-fit: cover;

    -webkit-transform:  scale(1, 1);
    -moz-transform:     scale(1, 1);
    -ms-transform:      scale(1, 1);
    -o-transform:       scale(1, 1);
    transform:          scale(1, 1);

    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    transition:         all .3s ease-in-out;
}

.bookslist .bookslist-group .books-list .books-item:hover img {
    -webkit-transform:  scale(1.15, 1.15);
    -moz-transform:     scale(1.15, 1.15);
    -ms-transform:      scale(1.15, 1.15);
    -o-transform:       scale(1.15, 1.15);
    transform:          scale(1.15, 1.15);
}

.bookslist .bookslist-group .books-list .books-item .books-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 22px 5px;
    color: #fff; text-align: left;
    background-color: rgba(0, 0, 0, .35);
}
.bookslist .bookslist-group .books-list .books-item .books-info .books-target {
    position: absolute; bottom: 15px; right: 10px;
    width: 30px; height: 30px;
    line-height: 30px; text-align: center; font-size: 14px;
    border-radius: 50%; color: #fff; background-color: red;
}

.bookslist .bookslist-group .books-list .books-item .recent-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 22px 5px;
    color: #fff; text-align: left;
    background-color: rgba(0, 0, 0, .8);
}
.bookslist .bookslist-group .books-list .books-item .recent-info h2 {
    color: #fff;
}
.bookslist .bookslist-group .books-list .books-item .recent-info h3 {
    color: #dbeafe; margin: 10px 0;
}
.bookslist .bookslist-group .books-list .books-item .recent-info p {
    font-size: 14px; color: #fff; margin: 10px 0;
}

@media screen and (max-width: 1200px) {
    .bookslist .bookslist-group .books-list .books-item { width: calc(25% - 10px); }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(5n) { width: calc(25% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(4n) { width: 25%; margin: 0 0 10px 0; }
}
@media screen and (max-width: 800px) {
    .bookslist .bookslist-group .books-list .books-item { width: calc(33.3333% - 10px); }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(5n) { width: calc(33.3333% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(4n) { width: calc(33.3333% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(3n) { width: 33.3333%; margin: 0 0 10px 0; }
}
@media screen and (max-width: 640px) {
    .bookslist .bookslist-group .books-list .books-item { width: calc(50% - 10px); }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(5n) { width: calc(50% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(4n) { width: calc(50% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(3n) { width: calc(50% - 10px); margin: 0 10px 10px 0; }
    .bookslist .bookslist-group .books-list .books-item:nth-of-type(2n) { width: 50%; margin: 0 0 10px 0; }
}



/* books-detail */
#books-detail {
    position: fixed; bottom: -100%; left: 0; right: 0;
    width: 100%; z-index: 11;
    background-color: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter:blur(50px);
    backdrop-filter:        blur(50px);

    -webkit-transition: all .4s ease-in-out;
    -moz-transition:    all .4s ease-in-out;
    -ms-transition:     all .4s ease-in-out;
    -o-transition:      all .4s ease-in-out;
    transition:         all .4s ease-in-out;
}
#books-detail.active {
    bottom: 0;
}
#books-detail * {
    color: #fff;
}


#books-detail .books-detail-container:after {
    content: ''; display: block; clear: both;
}
#books-detail .books-detail-container {
    display: block; width: 540px; margin: 50px auto;
}

#books-detail .books-detail-container .books-detail-info {
    float: left; width: calc(100% - 140px);
    margin: 0 10px 0 0;
}

#books-detail .books-detail-container .books-detail-info .books-icon-grade {
    width: 60px; height: 30px;
    text-align: center; font-size: 16px;
    line-height: 30px;
    border-radius: 15px;
}
#books-detail .books-detail-container .books-detail-info .books-detail-title {
    margin: 10px 0;
    font-size: 20px; font-weight: 600;
}
#books-detail .books-detail-container .books-detail-info .books-detail-subtitle {
    margin: 10px 0;
    font-size: 18px; color: #f59e0b;
}
#books-detail .books-detail-container .books-detail-info .books-detail-category {
    margin: 10px 0;
    font-size: 18px; font-weight: 600; color: #20978a;
}
#books-detail .books-detail-container .books-detail-info .books-detail-description {
    line-height: 1.5em;
}

#books-detail .books-detail-container .books-detail-thumb {
    float: left; width: 130px; height: 180px;
    overflow: hidden;
    border-radius: 8px;

    -webkit-transform-origin:   50% 50%;
    -moz-transform-origin:      50% 50%;
    -ms-transform-origin:       50% 50%;
    -o-transform-origin:        50% 50%;
    transform-origin:           50% 50%;

    -webkit-transform:  rotate(0deg);
    -moz-transform:     rotate(0deg);
    -ms-transform:      rotate(0deg);
    -o-transform:       rotate(0deg);
    transform:          rotate(0deg);

    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
#books-detail .books-detail-container .books-detail-thumb:hover {
    -webkit-transform:  rotate(-20deg);
    -moz-transform:     rotate(-20deg);
    -ms-transform:      rotate(-20deg);
    -o-transform:       rotate(-20deg);
    transform:          rotate(-20deg);
}
#books-detail .books-detail-container .books-detail-thumb img {
    width: 100%; height: 100%;
}

@media screen and (max-width: 540px) {
    #books-detail .books-detail-container {
        width: calc(100% - 20px); padding: 0 10px;
    }
}