@charset "utf-8";
/* CSS Document */

.mainI{ padding: 1.25em 0 1.25em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.mainI .side{ width: 20.1%; background-color: #fff; text-align: left;}
.mainI .conI{ flex: 1; margin-left: 0.62em;background-color: #fff;}

.mainS .conI { margin-left: auto;}

.mainW .conI {margin-left: auto; margin-right: 0.62em; }
.mainW .conR {width: 220px; background-color: #fff;}

.mainI .side .sBox { padding: 1.25em 0; margin: 0 1.25em; border-bottom:1px solid #e6e6e6;}
.mainI .side .sBox:last-child { border-bottom: 0;}
.mainI .side .tit { color: #000; font-weight: bold; line-height: 1.33em;}
.mainI .side .list { padding-top: 0.7em;}
.mainI .side .list a { margin: 0.6em 0.9em 0.6em 0;  color: #333; display: inline-block;
-moz-border-radius:0.4em; -webkit-border-radius:0.4em; border-radius:0.4em;
border: 1px solid #fff;}
.mainI .side .list a:hover { color: #FF5757;}
.mainI .side .list a.on {padding: 0 1em; color: #FF5757; border: 1px solid #FF5757;}

@media only screen and (max-width:828px) {
	.mainI{ display: block;}
	.mainI .side{ width: 100%; }
	.mainI .conI{ margin-left:auto; margin-top: 1em;}
	.mainW .conR {width: auto; margin-top: 1em; }
}

.mainS .tab { width: 100%; margin-bottom: 1em; display: flex; justify-content: flex-start; align-items: stretch;
border-bottom: 1px solid #eee; background-color: #fff; line-height: 2.8em;}
.mainS .tab a { color: #111; padding: 0 2em; display: block; cursor: pointer;}
.mainS .tab a.cur { background-color: #FF5757; font-weight: bold; color: #fff;}


/*分类页*/
.cateIBox { margin: 0 1.6em; text-align: left; padding:0.3em 0 1.5em; }
.cateIBox .list ul {display: flex; flex-wrap: wrap;
 justify-content: flex-start; align-items: flex-start;}
.cateIBox .list ul li { border-bottom: 1px solid #e6e6e6; width: 50%;
display: flex; justify-content: flex-start; align-items: flex-start; padding: 1.12em 0;}
.cateIBox .list .picb {width: 7.56em;}
.cateIBox .list .pic { position: relative; z-index: 0; padding-top: 136.3%;
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;
overflow: hidden;}
.cateIBox .list .pic img { position: absolute; left: 0; top: 0;
width: 100%; width: 100%;}
.cateIBox .list .txtb { flex: 1; margin-right: 6.6%; margin-left: 1.5em; text-align: left; color: #999;}
.cateIBox .list .txtb .name { margin-top: 0.5em; font-weight: bold; line-height: 1.2em;
max-height: 2.4em; overflow: hidden;}
.cateIBox .list .txtb .about { color: #999; margin-top: 0.7em;height: 1.5em; overflow: hidden;}
.cateIBox .list .txtb .about span { display: inline-block;}
.cateIBox .list .txtb .about .line { display: inline-block; margin: 0 0.4em; }
.cateIBox .list .txtb .about a { color: #999;}
.cateIBox .list .txtb .about a:hover { color: #FF5757;}
.cateIBox .list .txtb .intro {margin-top: 0.7em;  color: #999; line-height: 1.8;
 height: 3.6em; overflow: hidden;
 text-overflow:ellipsis;
 display:-webkit-box; 
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;}
 .cateIBox .list .txtb .time { margin-top: 0.6em; color: #FF5757;}

@media only screen and (max-width:828px) {
	.cateIBox { margin: 0 1em;}
	.cateIBox .list ul {display: block;}
	.cateIBox .list ul li {	 width: 100%;  }
	.cateIBox .list .txtb { margin-right: 0;}
	.cateIBox .list .txtb .name { height: 1.2em; max-height: 1.2em; margin-top: 0;}
}

/*排行榜*/
.rBox { text-align: center;}
.rBox .rList a { color: #666; border-bottom: 1px solid #f2f2f2;
 line-height: 3.5em; padding-top: 0.1em; display: block; cursor: pointer;}
.rBox .rList a:last-child { border-bottom: 0;}
.rBox .rList a:hover {color: #666;}
.rBox .rList a.on { position: relative; z-index: 0; color: #FF5757;}
.rBox .rList a.on::after { content: ""; display: block; position: absolute;
right: 0; top: 0; height: 100%; width: 0.3em; background-color: #FF5757;}
.rBox .rList a span { position: relative; z-index: 0; display: inline-block;}
.rBox .rList a span .pics { width: 1.57em; height: 1.57em; position: absolute;
left: -2.4em; top: 0.9em; background: url(../images/aicon-on.png) center center no-repeat;
background-size:contain ;}


@media only screen and (max-width:828px) {
	
	.rBox .rList { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
     .rBox .rList a { width: 33.3%;}	
	 .rBox .rList a:last-child { width: 100%;}
}

.rankIBoxZ { margin-top: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;
align-items: flex-start; padding:0 1.25em 1.25em;}
.rankIBox { width: 32%; margin-top: 1.25em; margin-right: 2%;
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);}
.rankIBox:nth-child(3n) { margin-right: 0;}

@media only screen and (max-width:828px) {
	.rankIBox { width: 49%}
	.rankIBox:nth-child(3n) { margin-right: 2%;}
	.rankIBox:nth-child(2n) { margin-right: 0;}
}

@media only screen and (max-width:540px) {
	.rankIBox { width: 100%; margin-right: 0;}
	.rankIBox:nth-child(3n) { margin-right: 0;}
}

.rankICon { border: 1px solid #f7f7f7; padding: 0 0 0 1.25em;}

.rankIBox .tit { color: #000;}
.rankIBox .list ul li{ display: flex; justify-content: flex-start;
align-items: center;}
.rankIBox .list li{ margin-top: 1.1em; color: #4c4c4c;
display: flex; justify-content: space-between; align-items: center;}
.rankIBox .list .num { width: 1.66em; height: 1.66em;  margin-right: 1em; text-align: center; line-height: 1.66;
background-color:#ff4c2f ; color: #fff;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.rankIBox .list .name{ flex: 1; height: 1.5em; overflow: hidden;  display: block;}
.rankIBox .list .pic { margin-right: 1em;}
.rankIBox .list .pic img {display: block; width: 5em; height: 7em;
 object-fit: cover;}
.rankIBox .list .txtb { flex: 1; color: #999;}
.rankIBox .list .author { margin-top: 0.6em;}
.rankIBox .list .hits { margin-top: 0.4em;}
.rankIBox .more {text-align: right; padding: 0.7em 1.2em 0.7em;}
.rankIBox .more a { color: #999;}

@media only screen and (max-width:828px) {
	.iBox .rankList { margin: 1.2em 1.2em 0;}
}

.authorIBox { margin-top: 4em; background-color: #fafafa; 
text-align: left; padding:2.8% 2.9%;
-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;
display: flex; justify-content: flex-start; align-items: center;}
.authorIBox .picb { width: 7.5em;}
.authorIBox .pic { position: relative; z-index: 0; padding-top: 100%;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
overflow: hidden;}
.authorIBox .pic img { position: absolute; left: 0; top: 0;
width: 100%; width: 100%;
object-fit: cover;}
.authorIBox .txtb { flex: 1; margin-left: 1.2em; text-align: left; }
.authorIBox .txtb .name { font-weight: bold;}
.authorIBox .txtb .about { margin-top: 0.3em; color: #666;}
.authorIBox .txtb .intro {margin-top: 0.3em;}

@media only screen and (max-width:828px) {
	.authorIBox { margin-top: 1em; padding: 2.1em 1em; display: block;
	-moz-border-radius:0.8em; -webkit-border-radius:0.8em; border-radius:0.8em;}
	.authorIBox .txtb { margin-top: 1.4em; margin-left: auto;}
	.authorIBox .txtb .name { text-align: center; font-size: 1.25em;}
	.authorIBox .txtb .about { margin-top: 1.3em;}
	.authorIBox .picb { margin: 0 auto; width: 6.66em;}
}

.workBox {margin-top: 1.5em; margin-bottom: 4em; background-color: #fafafa;
 padding:2em 2.9% 0.2em;
-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;}
.workBox .list { margin: 0 auto;}
.workBox .list ul li { 
display: flex; justify-content: flex-start; align-items: stretch;}
.workBox .list ul li:last-child { border-bottom: 0;}
@media only screen and (max-width:828px) {
	.workBox {margin-top: 1em; background-color: #fff;}
	.workBox .list { padding: 0.6em 0 4.6em;}
	.workBox .list ul li { margin-top: 0; padding: 1em 0;
	 border-bottom: 2px solid #efefef;}
	.workBox .list .picb { width: 6.6em;}
	.workBox .list .txtb .intro { margin-top: 0.2em;}
	.rankIBox .list .txtb .time {margin-top: 0.2em;}
}

.bookDetail { margin-top: 0.8em; padding: 3.3%;background-color: #fff; 
display: flex; justify-content: space-between; align-items: flex-start;}
.bookDetail .conL { flex: 1; margin-right: 7%;}
.bookDetail .conR {width: 9.3em; }

.bookDetail .book { margin-right: 7%; display: flex; justify-content: flex-start; align-items: flex-start;}
.bookDetail .book .picb { width: 12.5em;}
.bookDetail .book .pic { display:block;cursor: pointer; 
position: relative; z-index: 0; padding-top: 136%;overflow: hidden;
-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;}
.bookDetail .book .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%;object-fit: cover;}
.bookDetail .book .txtb { flex: 1; margin-left: 4.4%; text-align: left; color: #999;}
.bookDetail .book .txtb .name { font-weight: bold; color: #000;}
.bookDetail .book .txtb .name h1 { font-size: 1em; display: inline;}
.bookDetail .book .txtb .name span { display: inline-block; margin-left: 1em; color: #666; font-weight: normal;}

.bookDetail .book .txtb .label { color: #333;}
.bookDetail .book .txtb .label span { display: inline-block; padding: 0 0.8em;  margin-top: 0.6em; margin-right: 0.9em;
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;}
.bookDetail .book .txtb .label span.blue { color: #6cd;  border: 1px solid #6cd;}
.bookDetail .book .txtb .label span.red { color: #ff4c2f; border: 1px solid #ff4c2f;}

.bookDetail .book .txtb .time { color: #999; margin-top: 1.1em;}

.bookDetail .book .txtb .intro {margin-top: 1.8em;  color: #666; line-height: 1.7; height: 5.1em;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:3; }

.bookDetail .book .txtb .btnW { margin-top: 1em;}
.bookDetail .conL { margin-right: auto;}
	.bookDetail .conR {width: auto; }


.bookDetail .ewm { padding-top: 1em;}
.bookDetail .ewm .picd img { display: block; margin: 0.5em auto 0; height: 10.7em; width: 10.7em;
object-fit: contain;}
.bookDetail .ewm .picd canvas { display: block; margin: 0.5em auto 0; height: 10.7em; width: 10.7em;
	object-fit: contain;}


@media only screen and (max-width:828px) {
	.bookDetail {padding: 1em; display: block;}
	.bookDetail .ewm { padding-top: 2em; display:none;}
	.bookDetail .book { margin-right: auto; }
}


.recoBox { padding: 1.5em 1em; margin-bottom: 1.5em; margin-top: 5em;
 background-color: #f2fdf7; text-align: left;
-moz-border-radius:0.25em; -webkit-border-radius:0.25em; border-radius:0.25em;}
.recoBox .tit{ font-weight: bold; color: #000;}
.recoBox .tab ul { display: flex; justify-content: flex-start; align-items: flex-start;
 line-height: 2.5em;}
.recoBox .tab li { cursor: pointer; position: relative; z-index: 0; 
margin: 0 1.3em 0 1.3em;padding-bottom: 1em; color: #333;}
.recoBox .tab li:first-child { margin-left: 1em;}
.recoBox .tab li a {color: #333;  
 display: block;}
.recoBox .tab li.cur { font-weight: bold; color: #000;}
.recoBox .tab li.cur::after{ position: absolute; z-index: 10; content: ""; display: block;
	height: 0.25em;  left: 0;  margin-left: 0;
	 right: 0; bottom: 1em; 
	 background-image: linear-gradient(to right, rgba(36,183,108,1), rgba(255,255,255,1));
	width: 100%;}
.recoBox .tab li.cur a { color: #000;}
.recoBox .conRE { display: none;}
.recoBox .conRE.show { display: block;}
.recoBox .txt { margin-top: 0.5em; line-height: 2.5em; color: #666;}
.recoBox .txt a { color: #666;}
.recoBox .txt a:hover { color: #24b66b; font-weight: bold;}

.recoBox2 { padding: 1.5em 0 1.8em; 
 background-color: #f2fdf7; text-align: left;
-moz-border-radius:0.25em; -webkit-border-radius:0.25em; border-radius:0.25em;
max-width: 1000px;background-color: #fff;
margin: 1.5em auto 1.7em; position: relative; z-index: 0;
}
.recoBox2 .tit{ font-weight: bold; color: #000;}
.recoBox2 .tab ul { display: flex; justify-content: flex-start; align-items: flex-start;
 line-height: 2.5em;}
.recoBox2 .tab li { cursor: pointer; position: relative; z-index: 0; 
margin: 0 1.3em 0 1.3em; color: #333; padding-bottom: 1em;}
.recoBox2 .tab li:first-child { margin-left: 1.6em;}
.recoBox2 .tab li.cur { font-weight: bold; color: #000;}
.recoBox2 .tab li.cur::after{ position: absolute; z-index: 10; content: ""; display: block;
	height: 0.25em;  left: 0;  margin-left: 0;
	 right: 0; bottom: 1em; 
	 background-image: linear-gradient(to right, rgba(36,183,108,1), rgba(255,255,255,1));
	width: 100%;}
.recoBox2 .tab li.cur a { color: #000;}
.recoBox2 .conRE { display: none;}
.recoBox2 .conRE.show { display: block;}
.recoBox2 .txt { margin: 0.5em 1.8em 0; line-height: 2.5em; color: #666;}
.recoBox2 .txt a { color: #666;}
.recoBox2 .txt a:hover { color: #24b66b; font-weight: bold;}

@media only screen and (max-width:828px) { 
	.recoBox {  margin: 1em 0; padding: 1em 0 1.8em; background-color: #fff;
	   -moz-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em;
	}
	.recoBox .tab { font-size:1.5em ; margin: 0 1em;}
	.recoBox .tab li { margin: 0;}
	.recoBox .tab ul { justify-content: space-between;}
	.recoBox .tab li:first-child { margin-left: 0;}
	.recoBox .tab li a { padding-bottom: 0.4em;}
	.recoBox .txt {margin: 0.5em 1em 0; line-height: 1.9;}
	
	.recoBox2 {  margin: 1em; padding: 1em 0 1.8em;}
	.recoBox2 .tab { font-size:1.5em ; margin: 0 1em;}
	.recoBox2 .tab li { margin: 0;}
	.recoBox2 .tab ul { justify-content: space-between;}
	.recoBox2 .tab li:first-child { margin-left: 0;}
	.recoBox2 .tab li a { padding-bottom: 0.4em;}
	.recoBox2 .txt {margin: 0.5em 1em 0; line-height: 1.9;}
}
@media only screen and (max-width:390px) {
	.recoBox .tab { font-size:1.3em ;}
	.recoBox2 .tab { font-size:1.3em ;}
}
@media only screen and (max-width:350px) {
	.recoBox .tab { font-size:1.1em ;}
	.recoBox2 .tab { font-size:1.1em ;}
}

.chapBox { display: flex; justify-content: space-between; align-items: flex-start;}
.chapBox .conL { margin-top: 0.62em; flex: 1; margin-right: 0.62em;}
.chapBox .conR { margin-top: 0.62em; width: 240px; background-color: #fff;
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;}

@media only screen and (max-width:828px) { 
   .chapBox { display: block;}
   .chapBox .conL { margin-top: 1em; margin-right: 0;}
   .chapBox .conR {width: auto;}
}

.chapBox .conL .iBox { margin-top: 0; padding:0.5em 4.2% 0; background-color: #fff;}
.chapBox .conL .tit { padding-top: 0.1em; line-height: 2.8em; text-align: left; color: #000; border-bottom: 1px solid #efefef;}
.chapBox .conL .tit .name { display: inline-block;}
.chapBox .conL .tit .name::before{ content: ""; display: inline-block; height: 1em; width:0.3em ;
background-color: #FF5757; margin-right: 0.5em; position: relative; top: 0.1em;
-moz-border-radius:0.15em; -webkit-border-radius:0.15em; border-radius:0.15em;}

.chapBox .conL .intro { margin-top: 0.9em; color: #666; line-height: 1.8;}

.chapBox .conL .content { margin-top: 0.9em; padding-bottom: 0.8em; color: #666; line-height: 1.8;}


.direBox { border-top:1px solid #ccc; background-color: #fff;}
.chapBox .conL .direBox {padding-top: 1.2em; padding-bottom: 2.8em;}
.direBox .direList ul { margin-top: 0.6em; 
display: flex; flex-wrap: wrap; justify-content: flex-start;
align-items: flex-start;}
.direBox .direList ul li {line-height: 2.25em;
color: #333; width: 50%; border-bottom: 1px solid #efefef;}
.direBox .direList ul li a { color: #333;}
.direBox .direList ul li a:hover { color: #ff5757;}
.direBox .direList ul li .name { padding: 0 0.8em;}

@media only screen and (max-width:828px) { 
}

.chapBox .conL .speIBox { margin-top: 0.6em; padding-top: 1.2em; border-bottom: 1px solid #cccccc;}

.speIBox .speIList ul { display: flex; flex-wrap:wrap; justify-content: flex-start;
align-items: flex-start; padding-bottom: 1.1em;}
.speIBox .speIList li { margin-top: 0.6em; width: 11.1%; margin-right: 1.6%;}
.speIBox .speIList li:nth-child(8n) { margin-right: 0;}
.speIBox .speIList .pic { display:block; cursor: pointer; 
position: relative; z-index: 0; padding-top: 135%;overflow: hidden;}
.speIBox .speIList .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%;object-fit: cover;}

@media only screen and (max-width:828px) { 
	.speIBox .speIList li { width: 23.8%; margin-right: 1.6%;}
	.speIBox .speIList li:nth-child(4n) { margin-right: 0;}
}


.chapBox .rankSBox { padding: 0.9em 1.25em;}
.chapBox .rankSBox .tit { padding-bottom: 0.5em; border-bottom: 1px solid #f2f2f2; text-align: left;}
.chapBox .rankSBox .list ul { margin-top: 0.9em;}
.chapBox .rankSBox .list ul li { padding: 0.9em 0;
display: flex; justify-content: flex-start; align-items: flex-start;}
.chapBox .rankSBox .list .picb {  width: 6.1em;}
.chapBox .rankSBox .list .pic { position: relative; z-index: 0; padding-top: 135%;
overflow: hidden;}
.chapBox .rankSBox .list .pic img { position: absolute; left: 0; top: 0;
width: 100%; width: 100%; object-fit: cover;}
.chapBox .rankSBox .list .txtb { flex: 1; margin-left: 6%; text-align: left;}
.chapBox .rankSBox .list .txtb .name {height: 1.5em; line-height: 1.5; color: #333; overflow: hidden;}
.chapBox .rankSBox .list .txtb .name a { color: #333;}
.chapBox .rankSBox .list .txtb .author { color: #ccc;height: 1.5em; line-height: 1.5;overflow: hidden;}
.chapBox .rankSBox .list .txtb .intro {margin-top: 0.5em;  color: #999; flex: 1; height: 4.5em; overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:3;}


/*内容页*/
.readGray { padding-top: 0; background-color: #ebe5d8;}
.conBox { max-width: 800px;min-height:100vh ; 
margin: 0 auto; position: relative; z-index: 0; padding-bottom: 1.8em;}
.conBox .position { margin-top: 1.5em; padding: 0; margin-bottom: 1.5em;}
.conBox .position .arrow { font-weight: bold; font-family: "宋体"; color:#999;
 display: inline-block; margin: 0 .4em;}
.conBox .conC {  padding:6% 8% 8%; text-align: left;  background-color: rgba(255,255,255,0.3);
border: 1px solid #d8d8d8;}
.conBox .title { font-weight: normal; color: #262626;}
.conBox .about { color: rgba(0,0,0,0.4);}

.conBox .about a { margin-top: 0.9em; display: inline-block; margin-right: 1em; color: rgba(0,0,0,0.4);}
.conBox .about a:hover { color: #FF5757;}
.conBox .about span { margin-top: 0.9em; display: inline-block; margin-right: 1em;}

.conBox .about .i_book { background: url(../images/i_book.png) 0 center no-repeat;
background-size:1.5em auto; padding-left: 2em;}
.conBox .about .i_author {background: url(../images/i_author.png) 0 center no-repeat;
background-size: 1.5em auto;  padding-left: 2em;}
.conBox .about .i_time {background: url(../images/i_time.png) 0 center no-repeat;
background-size: 1.5em auto;  padding-left: 2em;}
.conBox .about .i_num {background: url(../images/i_words.png) 0 center no-repeat;
background-size: 1.5em auto;  padding-left: 2em;}

.conBox .content { margin: 3em auto 0; color: #262626;  line-height: 1.8}
.conBox .content p {font-size: 1em;
    text-align: justify;
	word-wrap: break-word;
	    margin-bottom: 1.5em;}
		
.conBox .btnW { margin-top: 1.3em;
padding:1.2em; text-align: left;  background-color: rgba(255,255,255,0.3);
border: 1px solid #d8d8d8; 
display: flex; justify-content: space-around; align-items: center;}
.conBox .btnW a { color: #262626;}

.conBox .btnErrorW { margin-top: 1.7em; font-size: 16px;text-align: center;}
.conBox .btnError { cursor: pointer; font-weight: bold;}

.conBox .btnReport,
.conBox .btnSources{display: inline-block; color: #b2b2b2; padding-left: 1.6em;
  background: url(../images/report.png) 0 center no-repeat;
  background-size:1.4em auto ; font-size: 16px; cursor: pointer;}
.conBox .btnReport:hover,
.conBox .btnSources:hover{ color: #0e8cdb;
	  background-image: url(../images/report_2.png)}
.conBox .titBox .btnAddBook { display: none;}

@media only screen and (max-width:828px) { 
	.conBox { margin: 1em;
	   -moz-border-radius:0.8em; 
	   -webkit-border-radius:0.8em; 
	   border-radius:0.8em;
	}
	.conBox .conC { padding: 1.2em 1.2em 2em;}
	.conBox .title {text-align: left;  font-size: 18px; margin-right: 1em;}

	.conBox .btnErrorW { display: block;}
	.conBox .titBox { display: flex; 
	justify-content: space-between; align-items:center;}
	.conBox .titBox .btnAddBook {display: block; font-size: 10px;}
	.conBox .titBox .btnAddBook img { display: block; width: 3.2em; height: auto;
	  margin: 0 auto 0.3em;
	}
}

@media only screen and (max-width:400px) { 
	.conBox .btnW .btnGray { width: 5.8em; margin: 0;}
	.conBox .btnW .btnYell { width: 5.8em; margin: 0;}
}
@media only screen and (max-width:350px) { 
	.conBox .btnW .btnGray { width: 5em; margin: 0;}
	.conBox .btnW .btnYell { width: 5em; margin: 0;}
}
  
.floatLBox { position: fixed; top: 10em;  left: 50%; margin-left: -468px;
    z-index: 999; width:58px ;}
.floatRBox {position: fixed; bottom:0; right: 50%; margin-right: -468px;
    z-index: 999; width:58px ;}
	
.floatPBox .btnF { cursor: pointer; margin-top: -1px; 
display: flex; flex-direction: column; justify-content: center; align-items: center;
 background-color:rgba(255,255,255,0.3); padding: 0;
 font-size: 12px; line-height: 1.28; color: rgba(0,0,0,0.4); height: 58px;
position: relative; z-index: 0; border: 1px solid #ddd8cf;
}
.floatPBox .btnF:hover { color: #ff5757;}
.floatPBox .btnTop { display: none;}
.floatPBox .btnF img { display: block; width:1.4em; height: 1.4em;
object-fit: contain; margin: 0.3em auto 0.4em;}
.floatPBox .btnF img.picsOn { display: none;}

.floatPBox .btnF:hover img.pics { display: none;}
.floatPBox .btnF:hover img.picsOn { display: block;}

.floatPBox .pics img { display: block; width: 4.25em; height: 4.25em;
object-fit: contain; margin: 0 auto 1.5em; background-color: #fff;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
}
.floatPBox.floatLBox .btnF.cur { background-color: #faf9f3;}
.floatPBox.floatLBox .btnF.cur::after { position: absolute; width: 0.7em; right: -0.7em;
left: auto;
top: 0; height: 100%; background-color: #faf9f3; content: "";}
.floatPBox .btnF .pBox {
	position: absolute; top: 50%; margin-top: -5.5em;
	width: 28em; left: -28.4em;
	height: 13em;
	background-color: #fff;
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: none;
}

.popupDire {
	position: absolute; top: 0; margin-top:0;
	width: 800px; left: auto; right: -800px;
	min-height: 25em;
	background-color:#fcfbf5;
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: none; text-align: center;
}
.popupDire.show { display: block;}
.popupDire .close { position: absolute; top: 1em; right: 1em;
width: 1.4em; height: 1.4em; cursor: pointer;
background: url(../images/close_3.png) center center no-repeat;
background-size:contain ;}
.popupDire .tit { color: #ff5757;  text-align: left;padding: 1.5em 1.6em 0;}
.popupDire .tit .name { display: inline-block; border-bottom: 1px solid #ff5757;;}
.popupDire .direList ul { margin: 0.6em 1.6em 1.2em; text-align: left;
display: flex; flex-wrap: wrap; justify-content: flex-start;
align-items: flex-start;}
.popupDire .direList ul li {line-height: 2.25em;
color: #333; width: 50%; border-bottom: 1px solid #efefef;}
.popupDire .direList ul li a { color: #333;}
.popupDire .direList ul li a:hover { color: #ff5757;}


.popupEwm {
	position: absolute; top: 0; margin-top:0;
	width: 28em; left: auto; right: -28.4em;
	height: 25em;
	background-color:#fcfbf5;
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: none; text-align: center;
}
.popupEwm .close { position: absolute; top: 1em; right: 1em;
width: 1.4em; height: 1.4em; cursor: pointer;
background: url(../images/close_3.png) center center no-repeat;
background-size:contain ;}
.popupEwm.show { display: block;}
.popupEwm .tit { padding: 2em 1em 0; text-align: left;}
.popupEwm .tit_2 { margin-top: 2em;}
.popupEwm .tit_3 { color: #a6a6a6; margin-top: 2em;}
.popupEwm .tit_3 a { color: #ff5757;}
.popupEwm img { display: block; width: 8.5em; height: 8.5em;
object-fit: contain; margin: 2em auto 0;}
.popupEwm canvas { display: block; width: 8.5em; height: 8.5em;
	object-fit: contain; margin: 2em auto 0;}


/*弹出框 设置*/
.popupSet { position: absolute; top: 0; margin-top:0;
	width: 40em; left: auto; right: -40.4em;
	height: 33em;
	background-color:#fcfbf5;
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: none; text-align: center;}
.popupSet.show { display: block;}
.popupSet .close { position: absolute; top: 1em; right: 1em;
width: 1.4em; height: 1.4em; cursor: pointer;
background: url(../images/close_3.png) center center no-repeat;
background-size:contain ;}
.popupSet .tit { text-align: left;}
.popupSet  .conP{ padding: 2.6em 6.4%;}
.popupSet  .list {}
.popupSet  .list dl { margin-top: 2em; color: #000; 
display: flex; justify-content: flex-start; align-items:center;}
.popupSet  .list dt { color: #666;}
.popupSet  .list dd { margin-left: 0.8em; flex: 1;}


.popupSet  .color { display: flex; justify-content: flex-start; 
align-items: center; }
.popupSet  .color .item {
	width:2.4em; height: 2.4em; margin-right: 0.4em;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	border: 1px solid #e0d8c2;
	background-color: #fbf7ed;
	margin-right: 0.8em;
}
.popupSet  .color .item:nth-child(2) {
	border: 1px solid #e0d8c2;
	background-color: #f6edd4;
}
.popupSet  .color .item:nth-child(3) {
	border: 1px solid #d3dcd2;
	background-color: #eaf4e9;
}
.popupSet  .color .item:nth-child(4) {
	border: 1px solid #d0dadc;
	background-color: #e8f3f5;
}
.popupSet  .color .item:nth-child(5) {
	border: 1px solid #ded1d0;
	background-color: #f6e8e7;
}
.popupSet  .color .item:nth-child(6) {
	border: 1px solid #cececd;
	background-color: #e5e5e4;
}
.popupSet  .color .item:nth-child(7) {
	border: 1px solid #464847;margin-right: 0;
	background:#464847 url(../images/moon.png) center center no-repeat;
	background-size:1.2em auto;
	
}
.popupSet  .color .sel { 
	border: 1px solid #ed4259 !important;
background-image:url(../images/checked.png);
background-position: center center;
background-size: 1.5em auto;
background-repeat: no-repeat ;
}
.popupSet  .color .item:nth-child(5).sel {
	background-image:url(../images/checked_2.png);
}

.popupSet .fontFamily { display: flex; justify-content: flex-start; align-items: flex-start;}
.popupSet .fontFamily .item { display: block; cursor: pointer; 
line-height: 2.8em; margin-right: 1em; width: 6em; text-align: center;
background-color: rgba(255,255,255,0.7); border: 1px solid #e4e3e1; color: #262626;}
.popupSet .fontFamily .item.sel {border: 1px solid #ed4259;color:#ed4259 ;}

.popupSet .way { display: flex; justify-content: flex-start; align-items: flex-start;}
.popupSet .way .item { display:  flex; justify-content: center; align-items: center;
 cursor: pointer; height: 2.8em;
line-height: 2.8em; margin-right: 1em; width: 6em; text-align: center;
background-color: rgba(255,255,255,0.7); border: 1px solid #e4e3e1; color: #262626;}
.popupSet .way .item img { width: 2em; height: 1.41em; object-fit: contain;}
.popupSet .way .item img:nth-child(1) { display: inline-block;}
.popupSet .way .item img:nth-child(2) { display: none;}
.popupSet .way .item.sel {border: 1px solid #ed4259;color:#ed4259 ;}
.popupSet .way .item.sel img:nth-child(1) { display: none;}
.popupSet .way .item.sel img:nth-child(2) { display: inline-block;}

.popupSet   .size {  display: flex; padding: 0.6em 0;
justify-content: flex-start; align-items: center; width: 16.7em; margin: 0 auto 0 0;
border: 1px solid #e5e5e5; background-color: rgba(255,255,255,0.7);} 

.popupSet .size .btnSubt { cursor: pointer; font-size: 1.25em;color: #000;
 width: 5em; line-height: 1.7;border-right:1px solid  #e5e5e5;}
.popupSet .size .input { margin: 0 0.3em; border: 0; width: 2.5em;
 font-size: 1.25em; color: #a6a6a6;
 text-align: center; outline-width: 0;}
.popupSet   .size .btnPlus { cursor: pointer;font-size: 1.25em;color: #000;
width: 5em;line-height: 1.7;border-left:1px solid  #e5e5e5;}
.popupSet .size .gray { color: #b2b2b2;}


.popupSet .width {  display: flex; padding: 0.6em 0;
justify-content: flex-start; align-items: center; width: 16.7em; margin: 0 auto 0 0;
border: 1px solid #e5e5e5; background-color: rgba(255,255,255,0.7);} 

.popupSet .width .btnSubt { cursor: pointer; font-size: 1.25em;color: #000;
 width: 5em; line-height: 1.7;border-right:1px solid  #e5e5e5;}
.popupSet .width .input { margin: 0 0.3em; border: 0; width: 2.5em;
 font-size: 1.25em; color: #a6a6a6;
 text-align: center; outline-width: 0;}
.popupSet .width .btnPlus { cursor: pointer;font-size: 1.25em;color: #000;
width: 5em;line-height: 1.7;border-left:1px solid  #e5e5e5;}
.popupSet .width .gray { color: #b2b2b2;}

.popupSet  .bright { width: 100%; display: flex; 
justify-content: flex-start; align-items: center;}
.popupSet  .bright .percent { position: relative; z-index: 0;
 height: 1.15em; flex: 1;
background-color: #e1e1e1;
-moz-border-radius:0.8em; -webkit-border-radius:0.8em; border-radius:0.8em;}
.popupSet  .bright .percent span { position: absolute; top: 0; left: 10%;
width: 1.15em; height: 1.15em;
background-color: #fff;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.popupSet  .bright .txt { margin: 0 0.8em;}
.popupSet  .bright .pics { width: 1.8em; height: auto;}

.floatLBox .btnF .pBox {
	position: absolute; top: 50%; margin-top: -5.5em;
	width: 28em; left: auto; right: -28.4em;
	height: 13em;
	background-color: #fff;
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: none;
}
.floatPBox .btnF.cur .pBox {
	display: block;
}
.floatPBox .btnF .pBox  .close { position: absolute; top: 1.1em; right: 1.1em;
width: 2em; height: 2em;
background:url(../images/close.png) center center no-repeat ;
background-size:contain ;}
.floatPBox .btnF .pBox .pBoxC { padding: 4% 5% 8.5%; text-align: left;}
.floatPBox .btnF .pBox .pBoxC  .pt { font-size: 1.7em; color: #000;}
.floatPBox .btnF .pBox .pBoxC  .size { margin-top: 2em; display: flex; 
justify-content: center; align-items: center;
border: 2px solid #f2f2f2; padding: 1.5em 0;}

.floatPBox .btnF .pBox .pBoxC .btnSubt { font-size: 1.5em;color: #999;}
.floatPBox .btnF .pBox .pBoxC .input { margin: 0 2em; border: 0; width: 6em;
border-left: 1px solid #000; font-size: 1.5em; color: #666;
border-right: 1px solid #000; text-align: center; outline-width: 0;}
.floatPBox .btnF .pBox .pBoxC .btnPlus { font-size: 1.5em;color: #999;}
.floatPBox .btnF .pBox .pBoxC .gray { color: #b2b2b2;}

.floatPBox .btnF .pBox .pBoxC .color { display: flex; justify-content: space-around; 
align-items: center; margin-top: 2.35em;}
.floatPBox .btnF .pBox .pBoxC .color .item {
	width: 3.85em; height: 3.85em;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	border: 2px solid #e0e0e0;
	background-color: #e0e0e0;
	margin-right: 0.8em;
}
.floatPBox .btnF .pBox .pBoxC .color .item:nth-child(2) {
	border: 2px solid #d8ffeb;
	background-color: #d8ffeb;
}
.floatPBox .btnF .pBox .pBoxC .color .item:nth-child(3) {
	border: 2px solid #fefcd5;
	background-color: #fefcd5;
}
.floatPBox .btnF .pBox .pBoxC .color .item:nth-child(4) {
	border: 2px solid #ffeeee;
	background-color: #ffeeee;
}
.floatPBox .btnF .pBox .pBoxC .color .item:nth-child(5) {
	border: 2px solid #000;margin-right: 0;
	background:#000 url(../images/moon.png) center center no-repeat;
	background-size:2em auto;
	
}
.floatPBox .btnF .pBox .pBoxC .color .sel { 
	border: 2px solid #000 !important;
background-image:url(../images/checked.png);
background-position: center center;
background-size:1.6em auto;
background-repeat: no-repeat ;
}
.floatPBox .btnF .pBox .pBoxC .color .item:nth-child(5).sel {
	background-image:url(../images/checked_2.png);
}

.floatPBox .btnF .pBox .pBoxC .key { margin-top: 1.7em; display: flex; 
justify-content: space-between; align-items:flex-start;}
.floatPBox .btnF .pBox .pBoxC .key .item .name { color: #707070;}
.floatPBox .btnF .pBox .pBoxC .key .item .pick { margin-top: 1.2em; display: flex;
justify-content: flex-start; align-items: flex-start;}
.floatPBox .btnF .pBox .pBoxC .key .item span { margin-right: 3px; width: 2.85em; height: 2.85em;
 display: flex; justify-content: center; align-items: center;
 background-color: #e4e4e4;
 -moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;}
.floatPBox .btnF .pBox .pBoxC .key .item img {width: 2em; height: 2em; display: block;}

.floatPBox .btnF .mBox {
	position: absolute; top: 50%; margin-top: -9em;
	width: 15em; left: -15.7em;
	height: 18em;
	background-color: #fff;
	-moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
	display: none;
}
.floatPBox .btnF .mBox .pic { padding-top: 2.7em;}
.floatPBox .btnF .mBox .pic img { display: block; width: 9.25em; height: 9.25em;}
.floatPBox .btnF.cur .mBox {
	display: block;
}
.floatPBox .btnF .mBox  .close { position: absolute; top: 1em; right: 1em;
width: 1.3em; height: 1.3em;
background:url(../images/close.png) center center no-repeat ;
background-size:contain ;}
.floatPBox .btnF .mBox .pt { margin-top: 0.5em;}

.popupListen { position: fixed; z-index: 1000; top: 0; left: 0;
 width: 100%; height: 100%;  background-color: rgba(0,0,0,0.5);
 display: flex; justify-content: center; align-items: center; display: none;}
.popupListen .listenBox { position: relative; z-index: 0;
 width: 15.5em; font-size: 26px;
background-color: #fff;
-moz-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em;
}
.popupListen .listenBox  .close { position: absolute; top: 0.6em; right: 0.6em;
width: 1.3em; height: 1.3em; cursor: pointer;
background:url(../images/close.png) center center no-repeat ;
background-size:contain ;}
.popupListen .listenBox .pBoxC { padding:16% 10% 10%;}
.popupListen .listenBox .pBoxC .pic img { display: block; width: 9em;
margin: 0 auto;}
.popupListen .listenBox .pBoxC .pt { margin-top: 0.4em;}

.floatPBox .btnF .dBox {
	position: absolute; top: 50%; margin-top: -20em;
	width: 1126px; right: -1136px;
	height: 40em;
	background-color: #fff;
	-moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
	-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
	display: none;
}
.floatPBox .btnF .dBox .pic { padding-top: 2.7em;}
.floatPBox .btnF .dBox .pic img { display: block; width: 9.25em; height: 9.25em;}
.floatPBox .btnF.cur .dBox {
	display: block;
}
.floatPBox .btnF .dBox  .close { position: absolute; top: 1em; right: 1em;
width: 1.3em; height: 1.3em;
background:url(../images/close.png) center center no-repeat ;
background-size:contain ;}
.floatPBox .btnF .dBox .tit { color: #333; font-weight: bold; display: flex; justify-content: space-between;
 align-items: center; font-size: 24px; margin: 1em 4% 0;}
.floatPBox .btnF .dBox .list { margin: 0.5em 4% 0;
 font-size: 18px;line-height: 3em; height: 30em; overflow-y: auto;}
.floatPBox .btnF .dBox .list  ul { flex-wrap: wrap;
	display: flex; justify-content: flex-start; align-items: flex-start;
}
.floatPBox .btnF .dBox .list li { width: 48%; margin-right: 2%; text-align: left;
border-bottom: 1px dashed  #f2f2f2;}

@media only screen and (max-width:828px){
	.floatLBox { position: relative; top: 0; left: 0; margin: 0 auto; width: auto;
	display: flex; justify-content: flex-start; align-items: flex-start;}
	.floatLBox  .btnF { flex: 1;}
	.popupDire {height: auto; min-height: initial; top: 100%; right: auto; left: 0; width: 100%; margin-top: 0.7em;}
	.floatPBox.floatLBox .btnF.cur::after { width: 100%; height: 0.7em; top: 100%; left: 0;}
	.popupSet {height: auto; min-height: initial; top: 100%; right: auto; left: 0; width: 100%; margin-top: 0.7em}
	.popupEwm { height: auto; min-height: initial; top: 100%; right: auto; left: 0; width: 100%; margin-top: 0.7em;
	 padding-bottom: 2em;
	}
}

.fontFamily1 {font-family: "微软雅黑";}
.fontFamily2 {font-family: "宋体";}
.fontFamily3 { font-family: "楷体";}

.bg1 { background-color: #faf6ed;}
.bg2 { background-color: #f7eed4;}
.bg3 { background-color: #eaf4e9;}
.bg4 { background-color: #e8f3f5;}
.bg5 { background-color: #f6e8e7;}
.bg6 { background-color: #e5e5e4;}
.bg7 { background-color: #474948;}

@media only screen and (max-width:828px) { 
	.bg1::before {  
		background-image: linear-gradient(to bottom, rgba(235, 218, 218, 1), rgba(224, 224, 224, 1));}
	.bg2::before {  
		background-image: linear-gradient(to bottom, rgba(201, 255, 227, 1), rgba(216, 255, 235, 1));}
	.bg3::before { 
		background-image: linear-gradient(to bottom, rgba(253, 250, 197, 1), rgba(254, 252, 213, 1));}
	.bg4::before { 
		background-image: linear-gradient(to bottom, rgba(253, 219, 219, 1), rgba(255, 238, 238, 1));}
	.bg5::before { background: transparent;}
}


.bg7 .conBox .title { color: #ebebec;}
.bg7 .conBox .content { color: #ebebec;}
.bg7 .conBox .content p {color: #ebebec;}
.bg7 .conBox .about dl dd {color: #ebebec;}
.bg7 .conBox  a {color: #ebebec;}
.bg7 .conBox  a:hover {color: #fff;}

.bg7 .floatPBox .btnF {/* background-color: #242424; */ color: #000;}

.bg7 .floatPBox .btnF .pBox { background-color: #2a2b2b;}
.bg7 .floatPBox .btnF .pBox .pBoxC .pt { color: #e5e5e6;}
.bg7 .floatPBox .btnF .pBox .close {
	background-image: url(../images/close_2.png);
}
.bg7 .floatPBox .btnF.cur::after { background-color: #2a2b2b;}

.bg7 .floatPBox .btnF .pBox .pBoxC .input {background-color: #2a2b2b; 
color: #ebebec;}
.bg7 .floatPBox .btnF .dBox {background-color: #2a2b2b;}
.bg7 .floatPBox .btnF .dBox .tit { color: #ebebec;}
.bg7 .floatPBox .btnF .dBox .close {
	background-image: url(../images/close_2.png);
}


/*换源 弹出框*/
.popupSources { position: fixed; z-index: 1000; top: 0; left: 0;
 width: 100%; height: 100%;  background-color: rgba(0,0,0,0.5);
 display: flex; justify-content: center; align-items: center; display: none;}
.popupSources .sourcesBox { position: relative; z-index: 0;
 width: 90%; max-width: 900px; font-size: 26px;
background-color: #fff;
-moz-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em;
}
.popupSources .sourcesBox  .close { position: absolute; top: 0.6em; right: 0.6em;
width: 1.3em; height: 1.3em; cursor: pointer;
background:url(../images/close.png) center center no-repeat ;
background-size:contain ;}
.popupSources .sourcesBox .pBoxC { padding: 1em;}
.popupSources .sourcesBox .pBoxC .pic img { display: block; width: 9em;
margin: 0 auto;}
.popupSources .sourcesBox .pBoxC .pt { margin-top: 0.4em;}
.popupSources .resourseBox { text-align: left; margin-top: 0; padding-top: 0;}
.popupSources .resourseBox .resoList .txtb .about { text-align: left; margin-top:0.2em ; padding: 0;
border-bottom: 0;}
.popupSources .resourseBox .resoList { height: 25em; overflow-y: auto;}

@media only screen and (max-width: 828px){
.popupSources .resourseBox {
    padding: 0;}
}

.labelBox { background-color: #fff;
 padding: 1em; margin: 1em 0 0; text-align: left;
-moz-border-radius:0.8em; -webkit-border-radius:0.8em; border-radius:0.8em;}
.labelBox dl { margin: 0.25em 0; display: flex; 
justify-content: flex-start; align-items: flex-start;}
.labelBox dt { color: #666666;}
.labelBox dd { flex: 1; color: #000;}

.shelfBox {background-color: #fff;
 padding: 1em 1em 4.6em; margin: 1em 0 0; text-align: left;
-moz-border-radius:0.8em; -webkit-border-radius:0.8em; border-radius:0.8em;}
.shelfBox .list { margin-top: -1.5em;}
.shelfBox .list ul {display: flex;
 flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.shelfBox .list ul li { width: 27.5%; margin-top: 1.5em; margin-right: 8.75%;}
.shelfBox .list ul li:nth-child(3n) { margin-right: 0;}
.shelfBox .list .picb { width: 100%}
.shelfBox .list .pic { position: relative; z-index: 0; padding-top: 135%;
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;
overflow: hidden;}
.shelfBox .list .pic img { display: block; position: absolute; left: 0; top: 0;
width: 100%; height: 100%; object-fit: cover;}
.shelfBox .list .txtb { text-align: left; color: #666; line-height: 1.3em; }
.shelfBox .list .txtb .name { margin-top: 0.9em; 
font-weight: bold; font-size: 1.08em; height: 1.3em;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:1;}
.shelfBox .list .txtb .about { color: #666; font-size: 0.9em;
 margin-top: 0.2em; line-height: 1.6;}
.shelfBox .list .txtb .time { margin-top: 0.2em; color: #999; font-size: 0.83em; overflow: hidden; line-height: 1.6;
}
.shelfBox .btnW { text-align: center;}
.shelfBox .btnGreen { margin: 4em auto 0; 
max-width: 16.6em; padding: 0; width: 100%; display: inline-block;
 line-height: 2.8em;}
 
 /*排行榜*/
 
 .rankISBox .tit { text-align: left; line-height: 3em; padding: 0.2em 1.4em 0; color: #000; border-bottom: 1px solid #f2f2f2;}
 
.rankISBox .list { margin: 0 2.1em; padding-bottom: 0.4em;}
 .rankISBox .list ul li { border-bottom: 1px solid #e6e6e6; 
 display: flex; justify-content: flex-start; align-items: flex-start; padding: 1.4em 0;}
  .rankISBox .list ul li:last-child { border-bottom: 0;}
 .rankISBox .list .picb {width: 9.16em;}
 .rankISBox .list .pic { position: relative; z-index: 0; padding-top: 136.3%;
 overflow: hidden;}
 .rankISBox .list .pic img { position: absolute; left: 0; top: 0;
 width: 100%; width: 100%; object-fit: cover; display: block;}
 .rankISBox .list .num { vertical-align: middle; position: relative; top: -0.1em; display: inline-block; font-size: 0.8em;
 width: 1.5em; line-height: 1.5em; height: 1.5em; margin-right: 0.3em; 
 background-color: #f35858; color: #fff; font-weight: bold; text-align: center;
 -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
 .rankISBox .list .txtb { flex: 1; margin-right: 11%; margin-left: 2em; text-align: left; color: #999;}
 .rankISBox .list .txtb .name {  font-weight: bold; line-height: 1.2em;
height: 1.2em; overflow: hidden;}
 .rankISBox .list .txtb .about { color: #999; margin-top: 0.7em;height: 1.5em; overflow: hidden;}
 .rankISBox .list .txtb .about span { display: inline-block;}
 .rankISBox .list .txtb .about .line { display: inline-block; margin: 0 0.4em; }
 .rankISBox .list .txtb .about a { color: #999;}
 .rankISBox .list .txtb .about a:hover { color: #FF5757;}
 .rankISBox .list .txtb .intro {margin-top: 0.7em;  color: #999; line-height: 1.8;
  height: 3.6em; overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;}
  .rankISBox .list .txtb .time { margin-top: 0.7em; color: #999;}
.rankISBox .list .btnW { margin-top: 3.7em; height: 100%; display: flex; justify-content: center; align-items: center;
}
 
 @media only screen and (max-width:828px) {
 	.rankISBox .list .txtb { margin-right: 0; margin-left: 1em;}
    .rankISBox .list .btnW {display: none;}
 }
 

 .rankISBox .list2 { margin: 0 1.5em; padding-bottom: 0.4em;}
  .rankISBox .list2 ul li { 
  display: flex; justify-content: flex-start; align-items: flex-start; padding: 0.8em 0;}
   .rankISBox .list2 ul li:last-child { border-bottom: 0;}
  .rankISBox .list2 .picb {width:5em;}
  .rankISBox .list2 .pic { position: relative; z-index: 0; padding-top:141%;
  overflow: hidden;}
  .rankISBox .list2 .pic img { position: absolute; left: 0; top: 0;
  width: 100%; width: 100%; object-fit: cover; display: block;}
  .rankISBox .list2 .txtb { flex: 1; margin-left: 1em; text-align: left; color: #999;}
  .rankISBox .list2 .txtb .name {   line-height: 1.3em;height: 1.3em; overflow: hidden;}
  .rankISBox .list2 .txtb .about { color: #999; margin-top: 0.1em;height: 1.5em; overflow: hidden;}
  .rankISBox .list2 .txtb .about span { display: inline-block;}
  .rankISBox .list2 .txtb .about .line { display: inline-block; margin: 0 0.4em; }
  .rankISBox .list2 .txtb .about a { color: #999;}
  .rankISBox .list2 .txtb .about a:hover { color: #FF5757;}
  .rankISBox .list2 .txtb .intro {margin-top: 0.6em;  color: #999; line-height: 1.8;
   height: 1.8em; overflow: hidden;
   text-overflow:ellipsis;
   display:-webkit-box; 
   -webkit-box-orient:vertical;
   -webkit-line-clamp:1;}
   
  
  @media only screen and (max-width:828px) {
  	.rankISBox .list .txtb { margin-right: 0; margin-left: 1em;}
  }