/* CSS Document */
body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, table, td, tr, th, p {padding: 0; margin: 0; font-family: "Microsoft YaHei"; }
li, dd, ol, ul {list-style-type: none;}
.fl { float:left; display:inline-block;}
.fr {display:inline-block; float:right;}
*{ font-size:16px;}
i{ font-style:normal;}
img {border: none;}
h1 {font-size: 14px;}
h2 {font-size: 14px;}
h3 {font-size: 18px;}
h4 {font-size: 20px;}  
h5 {font-size: 22px;}
h6 {font-size: 24px; border-bottom:1px #000000 dashed;}
a{ text-decoration:none;}
.clear {clear:both;width: 100%;height: 0px;display: block;overflow: hidden;}
input{ outline:none }
input:focus { outline: none; }
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%;}
body{ background:#fff;}
/*背景图开始*/
.top{ width:100%; height:78px; background:url(images/topCenter.png) repeat-x center; position:relative;}
.bottom{ width:100%; height:40px; background:url(images/bottomCenter.png) repeat-x center;}
.content{ width:100%; height: calc(100% - 118px); background:url(images/bookshelf2-middle.png) repeat; position:relative;}
.cent_top, .cent_bottom{width:100%; height:120px;position:absolute; z-index:1;}
.cent_top{  background:url(images/bookshelf2-top.png) repeat-x;  top:0px;}
.cent_bottom{ background:url(images/bookshelf2-bottom.png) repeat-x;  bottom:0px;}
.cent_left, .cent_right{ width:165px; height:100%; z-index:2; position:absolute;}
.cent_left{background:url(images/bookshelf2-left.png) repeat-y left;left:0px; }
.cent_right{ background:url(images/bookshelf2-right.png) repeat-y left; right:0px;}
.cent_left_top, .cent_left_bottom, .cent_right_top, .cent_right_bottom{position: absolute;height:120px; width:165px; z-index:3;}
.cent_left_top{background: url(images/1.png) no-repeat -3px -299px; top: 0;left: 0;}
.cent_left_bottom{background: url(images/1.png) no-repeat -3px -437px; bottom: 0;left: 0;}
.cent_right_top{background: url(images/1.png) no-repeat -178px -299px; top: 0;right: 0;}
.cent_right_bottom{background: url(images/1.png) no-repeat -178px -437px; bottom: 0;right: 0;}
/*背景图结束*/
/*top开始*/
.top .logo{ padding:9px 0px 0px 50px; float:left;}

.top .logo img{ height:60px; width:auto; }
.top-title{cursor: default;font-size: 20px;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;}
.right-top{ float:right; padding-top:20px; padding-right:20px;}
.top .chaolian i{ cursor:pointer;}
.top .chaolian i img{ vertical-align:middle;}
.top .qhzhuce{ width:225px; float:right; margin:0px 10px 0px 0px; position:relative;display:none;}
.top .qhzhuce .input_ss{ border: 1px #fff solid; border-radius:25px; color: #999; width:200px; height:35px;line-height:35px;  padding: 0px 10px; background:url(images/sech.png) no-repeat center right 10px #FFFFFF; background-size:auto 60%; font-size:12px;}
.top .qhzhuce .button_tj{ position:absolute; display:inline-block; top:0px; right:-22px; height:100%; width:50px; text-align:center;cursor:pointer; border:0px; background:none;}
i.fenx{ width:35px; height:35px; background:rgba(0,0,0,0.5); border-radius:50%; overflow:hidden; display:inline-block; float:right; margin:0px 10px 0px 0px; cursor:pointer; text-align:center;}
i.fenx:hover{background:rgba(0,0,0,0.8);}
i.fenx img{ width:60%; margin-top:20%;}
/*右侧目录*/
.listings{ display:none;border-left: 1px solid rgb(187, 187, 187);z-index:101;position: fixed;height: 100%;color: rgb(255, 255, 255);background: rgb(255, 255, 255);top: 0px;width: 300px;right: -350px;transform: translate3d(-350px, 0px, 0px);}
.listings-top{ width:100%; height:96px; padding-bottom:10px; background:url(images/topBackground.png) repeat-x top center; background-size:auto 100%; position:relative;}
.listings-top p{text-align: center; padding:10px 0px;vertical-align: middle;font-size: 16px;line-height: 36px;}
.listings-top .qhzhuce{ display:block; margin:0 auto; left:50%; float:none !important; transform:translateX(-50%); position:absolute;}
.listings-ul{ width:90%; margin:10px auto;}
.listings-ul li{ line-height:32px; padding-left:15px; }
.listings-ul li:hover{ background:#f4f4f4;}
.listings-ul li a{font-size:14px; color:#333;}
.listings-ul li.wenjianjia_li a{ font-weight:bold; padding-left:10px;}
@media screen and (max-width:750px){
.top .logo{ padding:9px 0px 0px 10px;}
.right-top{ padding-right:0px;}
}
@media screen and (max-width:380px){
.listings{width: 80%; }
.right-top{ padding-top:27px;}
i.fenx{ width:30px; height:30px;margin:0px 5px 0px 0px;}
}

/*书架内容开始*/
.content-neir{ width: calc(100% - 200px); height: calc(100% - 200px); margin:100px;  position:absolute; z-index:100; overflow-x:hidden; overflow-y:auto;}
.content-neir::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.content-neir::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
background:rgba(0,0,0,0.5);
}
.content-neir::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
border-radius: 2px;
background:rgba(255,255,255,0.3);
}
/*排序按钮*/
.aniu-paixu{ height:42px;  border-radius:21px; overflow:hidden; background:#f4f4f4; position:relative; z-index:11; display:inline-block; float:right; right:30px; top:10px; padding:0px 8px;}
@media screen and (max-width:750px){
.aniu-paixu{right:10px;}
}
.left-aniu, .right-aniu{ display:inline-block; height:100%; text-align:center; padding:0px 15px; }
@media screen and (max-width:550px){
.left-aniu, .right-aniu{padding:0px 8px;}	
	}
.boder-center{ border-left: 1px solid #E0E0E0;  border-right: 1px solid #E0E0E0;}
.aniu-paixu span{ display:inline-block;}
.aniu-paixu span.text{font-size:14px; color:#797774;line-height:42px; vertical-align:top;}
.aniu-paixu .arrow-box{ padding-left:10px; padding-top:4px; position:relative;}
.aniu-paixu .arrow-box i{display:block; cursor:pointer; border-color: rgb(102, 102, 102) transparent; }
.aniu-paixu .arrow-box i:hover, .aniu-paixu .arrow-box i.here{border-color: rgb(43, 133, 234) transparent;}
.aniu-paixu .arrow-box i.top-arrow{ margin:8px 0px; border-width: 0px 4px 5px;border-style: solid;border-image: initial;}
.aniu-paixu .arrow-box i.bottom-arrow{   border-width: 5px 4px 0px;border-style: solid;border-image: initial;}
.position-dq{  height:42px; line-height:42px; position:relative; z-index:11; display:inline-block; float:left; left:30px; top:10px; color:#FFFFFF;}
.position-dq a.aniu-fanhui{display: block;position: relative;float: left;height: 42px;line-height: 42px;width: 130px;border-radius: 21px;cursor: pointer;background:#f4f4f4; text-align:center; color:#797774; font-size:14px; margin-right:20px;} 
.position-dq span{ font-size:14px;}
.position-dq span i{ color:#743D0D;font-size:14px;}


/*书架内容开始*/
.cont_leftShelf{ width:100%; background:url(images/leftShelf.png) top  left repeat-y ;}
.cont_rightShelf{ width:100%; background:url(images/rightShelf.png) top right repeat-y;}
ul.ul_neir{ width: calc(100% - 222px); margin-left:111px;background:url(images/centerShelf.png) repeat left top; padding-bottom:20px; font-size:0px;}
ul.ul_neir li{cursor: pointer; text-align: center;position: relative;display:block; float:left; padding-top:10px; width: 132px;height: 140px; margin: 0px 12px 43px; overflow:hidden;   bottom:-8px;}
ul.ul_neir li img{ width:98px; height:140px;box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2); display:block; margin:0 auto; position:absolute; bottom:0px; left:50%;transform:translate(-50%, 0);}
ul.ul_neir li .wenzi{color: #FFFFFF;position: absolute;font-size: 14px;left: 50%; transform:translateX(-50%);width: 100%;z-index: 10;visibility: visible;opacity: 1;bottom: 0px; line-height:26px;border-radius: 3px;border: 1px solid #bbbbbb;background: rgba(0, 0, 0, 0.5);overflow: hidden;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;box-orient: vertical;display: -webkit-box;display: box;}
ul.ul_neir li:hover img{box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);}
ul.ul_neir li.wejianj-li img.pic_fm{ width:80px; height:auto !important;}
ul.ul_neir li.wejianj-li .wenjianjia img{ height:auto !important; width:108px;box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0);}
ul.ul_neir li.wejianj-li:hover .wenjianjia img{box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0);}
ul.ul_neir li.wejianj-li .pic-benshu{ pointer-events: none;z-index: 14;color: rgb(102, 102, 102);text-align: center;position: absolute;font-size: 12px;inset: auto 12px 20% auto;width: auto;height: 18px;line-height: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 26%;padding: 0px 5px;border-bottom-left-radius: 9px;border-top-left-radius: 9px;background: rgba(255, 255, 255, 0.3);}
@media screen and (max-width:750px){
.content-neir{ width: 100%; height: calc(100% - 160px); margin:80px 0px; }
ul.ul_neir{width: calc(100% - 100px); margin-left:50px;}
}
/*底部*/
.footer{ height:50px; width:100%; position:absolute; bottom:10px; z-index:103;}
.erweima{ width:100%; position:absolute; bottom:0px;}
.erweima_pic{width: 42px;height: 42px;z-index: 13;border-radius: 4px;position: absolute;bottom: 0px;left: 30px; cursor:pointer; background: rgba(0, 0, 0, 0.4);display: block;}
.erweima img{margin: 9px; display:block; width:25px;}
.benshu-text{ line-height:60px; color:#FFFFFF; text-align:right; font-size:14px; padding-right:30px;}
.dizhi-text{ display:none; transition: all 0.25s ease 0s;position: absolute;z-index: 0;bottom: 0px;left: 80px;width: 360px;height: 200px;text-align: center;font-size: 12px;background: rgba(0, 0, 0, 0.4);}
.erweima:hover .dizhi-text{ display:block !important;}
.dizhi-text-juzhong{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:289px; }
.dizhi-text-pic{ display:inline-block; width:74px; height:74px; background:#FFFFFF; float:left;}
.dizhi-text-pic img{ width:100%; margin:0px;}
.dizhi-text-wenzi{ color:#FFFFFF; text-align:left; width:205px; margin-left:10px; float:left; }
.dizhi-text-wenzi p{font-size:14px;}
.dizhi-text-wenzi span{    font-size: 16px; font-weight: bold;}
@media screen and (max-width:500px){
.dizhi-text{ display:none; width:86%; left:7%; bottom:52px;}
}