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

.listBox { background-color: transparent; margin:0.3em auto 0 ; padding: 0;}

.listBox .picList ul li { margin-top: 2em;}

.sort { margin-top: 1.1em; line-height: 2.5; color: #666;}
.sort span {display: inline-block;margin-right: 0.7em;}
.sort a { margin-right: 0.7em; padding: 0 1.2em; display: inline-block; color: #666; background-color: #f3f4f6;
-moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;}
.sort a.cur { color: #fff; background-color: #3b82f6;}

.rankBox { margin-top: 0.7em; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.rankBox .titR { width: 100%; padding:1.2em 0 0; line-height: 2em; text-align: left; color: #333; 
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.rankBox .titR .name { color: #333; display: inline-block; font-weight: bold;}
.rankBox .titR .name .fa { font-size: 1em; color: #ef4444; margin-right: 0.1em;}
.rankBox .titR .name .fa.blue { color: #3b82f6;}
.rankBox .titR .name span { font-weight: normal;}
.rankBox .rBox { width: 32%; margin-right: 2%;}
.rankBox .rBox:nth-child(4n) { margin-right: 0;}
.rankBox .iBox .tit { padding-bottom: 0.5em; border-bottom: 1px solid #e5e7eb;}
.rankBox  .iBox .rankList .num {-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;}

.bookDetail .book { position: relative; z-index: 1; 
display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.bookDetail .book .picb { width:12em;  margin: 1.5em 1.5em 0 0;
box-shadow: 0 1px 0.4em rgb(0 0 0 / 20%); overflow: hidden;
-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
.bookDetail .book .pic { display:block;cursor: pointer; 
position: relative; z-index: 0; padding-top: 135%;overflow: hidden;}
.bookDetail .book .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%;object-fit: cover;}
.bookDetail .book .txtb { flex: 1; margin-top: 1.3em; text-align: left; color: #757575;}
.bookDetail .book .txtb .name { font-weight: bold;color: #000;}
.bookDetail .book .txtb .name h1 {display: inline; color: #000;}
.bookDetail .book .txtb .green { color: #16a34a;}
.bookDetail .book .txtb .label { margin-top: 0.3em; }
.bookDetail .book .txtb .label span { margin-right: 0.7em; padding: 0 0.8em; display: inline-block; color: #3b82f6;
	background-color: #eff6ff; line-height: 2;
	-moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em;}

.bookDetail .book .txtb .time { color: #999; margin-top: 1.1em;}
.bookDetail .book .txtb .info { margin-top: 0.3em; line-height: 2em;}
.bookDetail .book .txtb .info dl { display: flex; justify-content: flex-start;
align-items: flex-start;}
.bookDetail .book .txtb .info dt { color: #444;}
.bookDetail .book .txtb .info dd {color: #111; height: 1.7em; overflow: hidden; color: #666; flex: 1;}
.bookDetail .book .txtb .btnW { margin-top: 0; text-align: left;}
.bookDetail .conL { margin-right: auto;}
.bookDetail .conR {width: auto; margin-right: 4%;}

.bookDetail .intro { padding-top: 0.1em; width:100%;}
.bookDetail .intro .introTxt { line-height: 1.7; color: #444; margin-top: 0.3em;}


@media only screen and (max-width:828px) {
	.bookDetail {padding:1.5em 1.5em 1.5em; display: block;}
	.bookDetail .book .picb { margin-top: 0; width: 12em;}
	.bookDetail .book { margin-right: auto; }
	.bookDetail .book .txtb { margin-left: 1em;}
	.bookDetail .book .txtb .intro {display: none;}
	.bookDetail .book .txtb .btnW .btnRed { padding-left: 0.8em; padding-right: 0.8em;}
	.bookDetail .book .txtb .label span { margin-right: 0.5em;}
}

@media only screen and (max-width:540px) {
	.bookDetail .book { display: block;}
	.bookDetail .book .picb { width: 12em;}
	.bookDetail .book .txtb { margin-left: auto;width: 100%;}
}

.chapBox .conL .iBox { background-color: #fff;}
.chapBox .conL .tit { padding-top: 0.4em; 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: #ff9900; 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 .direList ul { margin: 0.5em 0 0;
 display: flex; justify-content: flex-start; align-items: flex-start;flex-wrap: wrap;}

.direBox .reveList ul { flex-direction: row-reverse;}
.direBox .direList li { width: 33.3%;  line-height: 3.6em; 
color: #444; text-align: left; }
.direBox .direList li .name { margin: 0 1em 0 0;height: 3.1em; overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:1;}
.direBox .direList li a {  cursor: pointer; color: #444;}
.direBox .direList li a:hover {  color: #337ab7;}
.direBox .intro { margin: 1.3em 1em; text-align: left; overflow: hidden; line-height: 1.5; color: #333;}

@media only screen and (max-width:828px) { 
	.direBox .direList li { width: 50%;}
}


/*内容页*/
.readGray { padding-top: 0; background-color: #ebe5d8;}
.conBox {   text-align: left;   }
.conBox .title { margin-top: 0.3em; text-align: center; font-weight: bold; color: #000;}
.conBox .about { margin-top: 0.2em; color: #fff; display: flex; flex-wrap: wrap;
 justify-content: center; align-items: flex-start;}

.conBox .about a {  line-height: 1.6em;
    margin-top: 0.5em;
    margin-right: 0.3em;
    padding: 0 0.6em;
    display: inline-block;
    color: #fff;
    background: linear-gradient(to bottom, rgba(107, 197, 224, 1) 0%, rgba(76, 157, 182, 1) 100%);
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
}
.conBox .about a:hover { color: #fff;}
.conBox .about span {  line-height: 1.6em;   margin-top: 0.5em;
    margin-right: 0.3em;
    padding: 0 0.6em;
    display: inline-block;
    color: #fff;
    background: linear-gradient(to bottom, rgba(107, 197, 224, 1) 0%, rgba(76, 157, 182, 1) 100%);
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;}
.conBox .about .green {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6cbe6c+0,4c964c+100 */
	background: linear-gradient(to bottom,  rgba(108,190,108,1) 0%,rgba(76,150,76,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.conBox .about .gray {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#838383+0,626262+100 */
	background: linear-gradient(to bottom,  rgba(131,131,131,1) 0%,rgba(98,98,98,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.tools { margin: 1.2em 2em 0; display: flex; justify-content: flex-end; align-items: center;
flex-wrap: wrap;}
.tools a { display: flex; justify-content: center; align-items: center;
width: 2.2em; height: 2.2em; margin-left: 0.5em;
 color: #fff; background-color: #4c5356;
 -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; }
 .tools .btnLight { display: none;}

.conBox .content { margin: 0.8em 1.3em 0;  color: #000;  line-height:2; overflow: hidden;}
.conBox .content p {font-size: 1em; text-indent: 2em;text-align: justify;	word-wrap: break-word;;}
.conBox .content img { max-width: 100%; height: auto;}
		
.conBox .btnW { margin: 1em 0 1.8em; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.conBox .btnW a { 
line-height: 2.1em;
    margin-top: 0.5em;
    margin-right: 0.3em;
    padding: 0 0.6em;
    display: inline-block;
    color: #fff;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1ca4e7+0,047eba+100 */
    background: linear-gradient(to bottom,  rgba(28,164,231,1) 0%,rgba(4,126,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;}
.conBox .btnW .blue {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6cbe6c+0,4c964c+100 */
		 background: linear-gradient(to bottom, rgba(107, 197, 224, 1) 0%, rgba(76, 157, 182, 1) 100%);
	}
.conBox .btnW .green {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6cbe6c+0,4c964c+100 */
		background: linear-gradient(to bottom,  rgba(108,190,108,1) 0%,rgba(76,150,76,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
.conBox .btnW .gray {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#838383+0,626262+100 */
		background: linear-gradient(to bottom,  rgba(131,131,131,1) 0%,rgba(98,98,98,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.conBox .btnErrorW { margin-top: 1.7em; font-size: 16px;text-align: center;}
.conBox .btnError { cursor: pointer; line-height: 2.1em; font-weight: bold;
    margin-top: 0.5em;
    margin-right: 0.3em;
    padding: 0 1em;
    display: inline-block;
    color: #fff;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em; background-color: #3b82f6;}

.conBox .conTip { padding: 0.8em 1em; color: #333;
    line-height: 1.45;   border-top: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(0, 0, 0, 0.05);}
.conBox .conTip a { margin-right: 0.2em; color: #337ac4;}
.conBox .conTip a:hover {color: #ff4400}

.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) { 
	.tools { margin: 1.2em auto 0;}
	.conBox { width: auto;
	   -moz-border-radius:0.2em; 
	   -webkit-border-radius:0.2em; 
	   border-radius:0.2em;	}
	.conBox .title {font-size: 18px; margin-top: 2em; }
	.conBox .btnErrorW { display: block;}
	.conBox .titBox .btnAddBook {display: block; font-size: 10px;}
	.conBox .titBox .btnAddBook img { display: block; width: 3.2em; height: auto;
	  margin: 0 auto 0.3em;	}
	.conBox .content { margin: 1em auto 0; width: auto; }
}

@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;}
}
  
.floatRBox {position: fixed; bottom:4em; right: 50%; margin-right: -898px;
    z-index: 999;}
	
@media only screen and (max-width:1960px) {
	.floatRBox { margin-right: -0em; right:2%; }
}
	
.floatPBox .btnF { cursor: pointer; margin-top: -1px; 
display: flex; flex-direction: column; justify-content: center; align-items: center;
 background-color:rgba(50,121,181,0.5); padding: 0;
 font-size: 3em; line-height: 1; color: #fff;height: 1.3em; width: 1.3em;
position: relative; z-index: 0; 
-moz-border-radius:0.1em; -webkit-border-radius:0.1em; border-radius:0.1em;}
.floatPBox .btnF .fa { margin-bottom: 0.15em;}
.floatPBox .btnF:hover { color: #fff;}
.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;
}


.set {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.set  .color { display: flex; justify-content: flex-start; 
align-items: center;  padding: 0.9em 0; margin-right: 1.6em;}
.set  .color .item {
	width:1.66em; height: 1.66em; margin:0 0.4em;
	border: 1px solid #e0d8c2;
	background-color: #fbf7ed;
}
.set  .color .item:nth-child(2) {
	border: 1px solid #e0d8c2;
	background-color: #f6edd4;
}
.set  .color .item:nth-child(3) {
	border: 1px solid #d3dcd2;
	background-color: #eaf4e9;
}
.set  .color .item:nth-child(4) {
	border: 1px solid #d0dadc;
	background-color: #e8f3f5;
}
.set  .color .item:nth-child(5) {
	border: 1px solid #ded1d0;
	background-color: #f6e8e7;
}
.set  .color .item:nth-child(6) {
	border: 1px solid #cececd;
	background-color: #e5e5e4;
}
.set  .color .item:nth-child(7) {
	border: 1px solid #464847;margin-right: 0;
}

.set  .size {  display: flex;
justify-content: flex-start; align-items: center; width: 6.6em; margin: 0.9em auto 0.9em 0;
border: 1px solid #0277bd; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1ca4e6+0,037db9+100 */
background: linear-gradient(to bottom,  rgba(28,164,230,1) 0%,rgba(3,125,185,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;
} 
.set .size .sizeTxt { color: #fff; width: 2.5em; text-align: center;}
.set .size .btnSubt { cursor: pointer; color: #fff; text-align: center; overflow: hidden; 
display: block;
 width: 2em; height: 1.66em; line-height: 1.8em; border-right:1px solid #0277bd; }
 .set .size .btnSubt .fa { font-size: 1.1em; color: #fff;}
.set .size .input { margin: 0 0.3em; border: 0; width: 2.5em;
 font-size: 1em; color: #fff; background-color: transparent;
 text-align: center; outline-width: 0;}
.set  .size .btnPlus { cursor: pointer;color: #fff; text-align: center;overflow: hidden; 
display: block;
width: 2em; height: 1.66em; line-height: 1.8em; border-left:1px solid  #0277bd;}
.set .size .btnPlus .fa { font-size: 1.1em; color: #fff;}
.set .size .gray { color: #fff;}


.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 .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 .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 .pt { margin-top: 0.5em;}

.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 .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){
		.floatPBox.floatLBox .btnF.cur::after { width: 100%; height: 0.7em; top: 100%; left: 0;}

}



/*弹出框 设置*/
.popupSet { position: fixed; z-index: 1000; top: 0; left:0; width: 100vw; height: 100vh;background-color: rgba(0,0,0,0.5);
display: none; justify-content: center; align-items: flex-end;}
.popupSet.show { display: flex; }
.popupSet .popupBox { position: relative; z-index: 0; max-width: 31em; width: 98%;
	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: block; text-align: center;
	-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
.popupSet .close { position: absolute; top: 1em; right: 1em; cursor: pointer;color: #666;}
.popupSet .tit { text-align: left;}
.popupSet .conP{ padding: 11% 16% 8%;}
.popupSet .list dl { margin-top: 1.4em; 
display: flex; flex-wrap: wrap; justify-content: flex-start; align-items:center;}
.popupSet .list dl:first-child { margin-top: 0;}
.popupSet .list dt { width: 2em; color: #888;}
.popupSet .list dd { margin-left: 0.8em; flex: 1;}


.popupSet  .color { display: flex; justify-content:space-between; 
align-items: center; }
.popupSet  .color .item { cursor: pointer;
	width:2.4em; height: 2.4em;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	border: 1px solid #ddd;
	background-color: #fff;
	margin-right: 0.8em;
}
.popupSet  .color .item:nth-child(2) {
	border: 1px solid #ddd;
	background-color: #ededed;
}
.popupSet  .color .item:nth-child(3) {
	border: 1px solid #ddd;
	background-color: #f7efd0;
}
.popupSet  .color .item:nth-child(4) {
	border: 1px solid #d0dadc;
	background-color: #f9e6e6;
}
.popupSet  .color .item:nth-child(5) {
	border: 1px solid #ded1d0;
	background-color: #cddfcd;
}

.popupSet  .color .sel { 
	border: 1px solid #ff0000 !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: space-between; align-items: flex-start;}
.popupSet .fontFamily .item { flex: 1; display: block; cursor: pointer; 
line-height: 2.2em; margin-right: 0.7em; width:30%; text-align: center;
background-color: rgba(255,255,255,0.7); border: 1px solid #e4e3e1; color: #262626;
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;}
.popupSet .fontFamily .item.sel {border: 1px solid #ff0000;color:#ff0000 ;}

@media only screen and (max-width:828px) { 
	.popupSet .conP{ padding: 4em 2em 3em;}
	.popupSet .fontFamily .item { width:5em;}
}

.popupSet .size {  display: flex; 
justify-content: space-between; align-items: stretch; width: 100%; 
border: 1px solid #eee; background-color: rgba(255,255,255,0.7);} 

.popupSet .size .btnSubt { cursor: pointer; font-size: 1.25em;color: #000;
 width: 30%; line-height: 1.8;border-right:1px solid  #eee;}
.popupSet .size .input { margin: 0 0.3em; border: 0; width: 30%;
 font-size: 1em; color: #a6a6a6; background-color: transparent;
 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  #eee;}
.popupSet .size .gray { color: #b2b2b2;}



.fontFamily1 {font-family: "微软雅黑";}
.fontFamily2 {font-family: "PingFang SC";}
.fontFamily3 { font-family: "Lantinghei SC";}

.bg1 { background-color: #fff; }
.bg2 { background-color: #ededed;}
.bg3 { background-color: #f7efd0;}
.bg4 { background-color: #f9e6e6;}
.bg5 { background-color: #cddfcd;}

.bgLight {}
.bgBlack { background-color: rgb(45, 49, 52);}
.bgBlack .iBox.conBox {background: rgb(32, 40, 46);}
.bgBlack .conBox .title { color: #999;}
.bgBlack .conBox .content { color: #999;}
.bgBlack .position { color: #999; border-bottom: 1px solid #383e43}
.bgBlack .position a { color: #999;}
.bgBlack .position a:hover{ color: #999;}

.bgBlack .footer {
 color: #666; background-color: #242729;}
.bgBlack .footer a {color: #666;}
.bgBlack .footer a:hover { color: #000;}

.bgBlack .readPage {
background-color: #474b4e; 
border: 1px solid #e4e4e4;}
.bgBlack .readPage a { color: #fff;}
.bgBlack .readPage a:hover { background-color: #3a3e41; color: #fff;}

.bgBlack .popupAsk .popupBox .btnBlue { border: 1px solid #000; color: #eee;}

.bgBlack .popupAsk .popupBox { background-color: #000;}
.bgBlack .popupAsk .popupBox .tit { color: #666;}
.bgBlack .popupAsk .popupBox .iW { border: 1px solid #666;}
.bgBlack .popupAsk .popupBox .list dl {color: #666;border: 1px solid #666;}
.bgBlack .popupAsk .popupBox .iW .input { color: #666;}
.bgBlack .popupAsk .popupBox .list .textarea { color: #666;}

.bgBlack .popupAsk input::-webkit-input-placeholder{	color: #444;}
.bgBlack .popupAsk input::-moz-placeholder{	color: #444;}
.bgBlack .popupAsk input:-ms-input-placeholder{	color: #444;}

.bgBlack .popupAsk textarea::-webkit-input-placeholder{	color: #444;}
.bgBlack .popupAsk textarea::-moz-placeholder{	color: #444;}
.bgBlack .popupAsk textarea:-ms-input-placeholder{	color: #444;}
.bgBlack .popupAsk .popupBox .close { background-image: url(../images/close.png);}

.bgBlack .popupError .popupBox { background-color: #000; color: #666;}
.bgBlack .popupError .popupBox .tit { color: #666;}
.bgBlack .popupError .popupBox .list li { border: 1px solid #666;}
.bgBlack .popupError .popupBox .list dl { color: #666;}
.bgBlack .popupError .popupBox .list dl { border: 1px solid #666;}
.bgBlack .popupError .popupBox .close { background-image: url(../images/close.png);}

.bgBlack .popupError .popupBox .list .textarea { color: #666; background-color: transparent;}

.bgBlack .popupError input::-webkit-input-placeholder{	color: #444;}
.bgBlack .popupError input::-moz-placeholder{	color: #444;}
.bgBlack .popupError input:-ms-input-placeholder{	color: #444;}

.bgBlack .popupError textarea::-webkit-input-placeholder{	color: #444;}
.bgBlack .popupError textarea::-moz-placeholder{	color: #444;}
.bgBlack .popupError textarea:-ms-input-placeholder{	color: #444;}

.bgBlack  .popupError .popupBox .list li.sel { border: 1px solid #3b82f6;}

.bgBlack .popupError .popupBox .btnBlue { border: 1px solid #000; color: #eee;}

.bgBlack .popupSet .popupBox { background-color: #000;}