.wid {max-width:1440px; margin:0 auto; width:100%; padding:0 20px;}
.wid:after {content:''; clear:both; display: table;}
.pagination {margin-top:20px;}
.book {margin-top:140px; padding-bottom:100px;}
.book .top_banner {height:260px; background:url('../img/book_top_bg.jpg')no-repeat center; background-size:cover; text-align: center; padding:54px 30px 0 30px;}
.book .top_banner h1 {font-size:33px; color:#222;}
.book .top_banner p {margin-top:12px; font-size:15px; color:#666; line-height:1.4em; font-weight:300;}
.book .top_banner span {display: inline-block; width:100%; margin-top:25px; font-size:14px; color:#999;}
.book .top_banner span b {color:#222;}
.book .top_banner span img {margin:-2px 10px 0 10px;}

.book .tab_bt {max-width:480px; width:100%; margin:-28px auto 0 auto;}
.book .tab_bt:after {content:''; clear:both; display: table;}
.book .tab_bt button {float:left; width:calc(100% / 3); border:1px solid #e4e4e4; background:#fff; color:#999; font-size:16px; height:55px;}
.book .tab_bt button.on {background:#222; color:#fff; font-weight:600;}


.book .pro_top {margin-top:30px;}
.book .pro_top:after {content:''; clear:both; display: table;}
.book .pro_top span {font-size:13px; color:#999;}


.book .select { float:right; width:100px; position: relative; top:-7px;}
.book .select .label {width:100%; text-align:left; border:none; height:30px; padding-left: 15px; background: transparent; cursor: pointer; font-size:13.5px; padding-bottom:1px; color:#666; background:url('../img/down_arrow.svg')no-repeat center right 15px #fff;  background-size:10px ; border:none; font-weight:500; border-radius:8px;}
.book .select .optionList {position: absolute; top:33px; left: 0; width: 100%;  max-height: 0; transition: .3s ease-in;  border:1px solid rgba(255,255,255,0); z-index: 1; background:rgba(255,255,255,0);  overflow:hidden; border-radius:8px; }
.book .select.active .optionList {max-height: 150px; border:1px solid #e4e4e4; overflow:auto; background:#fff;}
.book .select .optionItem { padding:10px 14px 0 14px; font-size:13.5px; color:#777; font-weight:500; cursor: pointer;}
.book .select .optionItem:last-child {padding-bottom:12px;}
.book .select .optionList::-webkit-scrollbar {width: 6px;}
.book .select .optionList::-webkit-scrollbar-thumb {background: #eee; border-radius: 45px;}

.book .list {margin-top:5px;}
.book .list:after {content:''; clear:both; display: table;}
.book .list .box {float:left; width:calc((100% - 75px) / 4); margin-right:25px; margin-bottom:40px; cursor: pointer; box-shadow: 2px 2px 10px rgba(0,0,0,.07); border-radius:10px;}
.book .list .box:nth-child(4n) {margin-right:0;}
.book .list .box .img {width:100%; padding-top:100%; border-radius:10px 10px 0 0; border:1px solid #eee; position: relative;}
.book .list .box .img b {position: absolute; right:10px; top:10px; padding:4px 0 5px 0; width:47px; text-align: center; border-radius:5px; font-size:13px; font-weight:500;}
.book .list .box .img b.col1 {background:#59AD7D; color:#fff;}
.book .list .box .img b.col2 {background:#fff; color:#bbb; border:1px solid #DDDDDD}
.book .list .box .img b.col3 {background:#222; color:#fff;}

.book .list .box .txt {width:100%; padding:16px 20px 22px 20px; border-radius:0 0 10px 10px; background:#fff; height:108px; position: relative;}
.book .list .box .txt p {font-size:17px; color:#222; font-weight:600;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height:1.3em;}
.book .list .box .txt span {display: inline-block; width:100%; margin-top:10px; font-size:14px ;color:#aaa; position: absolute; left:20px; bottom:20px;}

	.book .list .box {float:left; width:calc((100% - 50px) / 3); }
	.book .list .box:nth-child(4n) {margin-right:25px;}
	.book .list .box:nth-child(3n) {margin-right:0;}

@media screen and (max-width:1200px) {
	.book .list .box {float:left; width:calc((100% - 50px) / 3); }
	.book .list .box:nth-child(4n) {margin-right:25px;}
	.book .list .box:nth-child(3n) {margin-right:0;}
	.book .list .box .txt p {font-size:16px;}
	.book .list .box .txt span {margin-top:7px;}


}


@media screen and (max-width:768px) {
	.book {padding-bottom:50px;}
	.book .top_banner {padding:38px 30px 0 30px; height:225px; background-position: center right;}
	.book .top_banner h1 {font-size:25px;}
	.book .top_banner p {font-size:13px;}
	.book .top_banner span {font-size:12px; }
	.book .top_banner span img {width:6px; margin:-2px 7px 0 7px;}

	.book .tab_bt button {height:50px; font-size:15px;}

	.book .pro_top {margin-top:18px;}

	.book .list .box {float:left; width:calc((100% - 10px) / 2); margin-right:10px;}
	.book .list .box:nth-child(4n) {margin-right:10px;}
	.book .list .box:nth-child(3n) {margin-right:10px;}
	.book .list .box:nth-child(2n) {margin-right:0;}
	.book .list .box .txt {padding:14px 15px 23px 15px; height:90px;}
	.book .list .box .txt p {font-size:14.5px; line-height:1.25em;}
	.book .list .box .txt span {margin-top:5px; font-size:12px; left:15px; bottom:16px;}

	.pagination {margin-top:0;}
	
}