/* CSS Document */
body{--bgcolor:#C7C2A4;--bgcolor2:rgba(255,255,255,0.2);--mp3bgcolor:rgba(0,0,0,0.5);--textcolor:#000000;--titlecolor:#2E2010;--shadow:#ffffff;--bgimg:none;--morebgcolor:rgba(110,105,74,0.8);--morecolor:#ffffff;--bordercolor:rgba(255,255,255,0.2);--bordercolor2:rgba(0,0,0,0.2);}

body{--bgcolor:#161E20;--bgcolor2:#203129;--mp3bgcolor:rgba(0,0,0,0.8);--textcolor:#A4ADA8;--titlecolor:#FCF0C8;--shadow:rgba(255,255,255,0.6);--bgimg:url(bg.jpg);--morebgcolor:rgba(0,0,0,0.6);--morecolor:#A4ADA8;--bordercolor:rgba(255,255,255,0.1);--bordercolor2:rgba(0,0,0,0.5);}


body{
	margin:auto;
	padding:0;
background: var(--bgcolor);color:var(--textcolor); 	background-image: var(--bgimg);
	background-repeat: repeat;
}
a{
	text-decoration: none;color:var(--textcolor); color:var(--textcolor);
}
div{ margin:auto;}
.box{ width:600px; max-width:100%; margin:auto; padding-left:10px; padding-right:10px; box-sizing:border-box;}
.clear{ clear:both;}
.showcontent { clear:both; float:left; width:100%; line-height:1.5; font-size:14px;}
.showcontent+.showcontent{ margin-top:10px;}
.showcontent *{ max-width:100%;}
.showcontent .title{
	display:table-cell;
	writing-mode: vertical-lr;
	float:left;
	width:50px;
	text-align:center;
	min-height:200px;
	letter-spacing:5px;text-shadow:var(--shadow) 0px 0px 3px; color:var(--titlecolor); font-size:28px; margin:auto;
}
.showcontent .title .more,.showcontent .title2 .more{ float:right; font-size:14px; color:#555555;}
/*.showcontent .img{ width:calc(100% - 50px); max-height:200px;display:table-cell; min-height:200px; float:right; overflow:hidden;border-radius:5px; display: flex; justify-content:center; align-items:center;} */
.showcontent .img{ width:100%; display:table-cell; min-height:200px; float:right; overflow:hidden;display: flex; justify-content:center; align-items:center;} 
.mpli{ width:100%; max-height:175px; overflow:hidden;border-radius:5px; background-color:#6E694A;background-color:#232323;}
.mpli .imgs{ width:calc(100% - 200px); float:left; margin-top:0;overflow:hidden; position:relative;}
.mpli .imgs .qrcode{ position:absolute; bottom:5px; right:5px;width:120px;   background-color:#FFFFFF;text-align:center; line-height:1; font-size:12px;}
.mpli .imgs .qrcode>div{
	display:table-cell;
	writing-mode: vertical-lr;
	float:right;
	width:12px;
	height:100px;
	margin-right:6px;
	letter-spacing: 5px;
}
.gomore{ cursor:pointer; position:absolute; top:30vh; left:-35px; width:15px; background-color:var(--morebgcolor);  font-size:14px; padding:10px; border-radius:5px 0 0 5px;letter-spacing: 3px;writing-mode: vertical-lr; z-index:3; color:var(--morecolor);  }

/*.gomore a{ display:block; float:left; width:100%;color:var(--morecolor);}*/

.nav{ position:fixed; top:0; right:-80%; height:100vh; width:80%; z-index:10; background: var(--bgcolor);-webkit-transition:500ms; -moz-transition:500ms; -ms-transition:500ms; transition:500ms;}
.nav.hover{ right:0;}
.nav.hover+.bg{ position:fixed; z-index:9; background-color:rgba(0,0,0,0.3); left:0; top:0; height:100vh; width:100vw;}
.nav ul{ height:100vh; overflow-y:auto; width:100%; float:left;padding:0; margin:auto;}
.nav ul li{
	list-style-type: none;
	padding:0;
	margin:auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:var(--bordercolor);
 position:relative;
}
.nav ul li i{ margin-right:3px;}
.nav ul li:after{ content:''; position:absolute; left:0; bottom:0; width:100%;	border-top-width: 1px;
	border-top-style: solid;
	border-top-color:var(--bordercolor2);}
.nav ul li a{ display:block; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px;}


.mpli .imgs .qrcode img{ width:100px; float:left; height:100px;}
.mpli .imgs> img{ min-height:175px; max-height:175px; min-width:100%; max-width:150%; float:left; }
.mpli .right{ float:right;width:200px; }


.qrblock{background:var(--bgcolor2); padding:15px; border-radius:5px; }
.qrblock+.qrblock{ margin-top:10px;}
.qrblock.item1{background:rgba(255,255,255,0);}
.item2{border-radius: 0px 0px 5px 5px;}
.showcontent .title2{
/*	text-shadow:#ffffff 0px 0px 5px;*/
	color:var(--titlecolor);
	font-size:20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:rgba(255,255,255,0.5);
	padding-bottom:10px; margin:auto;margin-bottom:10px; position:relative; line-height:1.2; 
	/*font-weight: bold;*/
}
.showcontent p{text-indent: 2rem;}
.showcontent .title2:after{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(0,0,0,0.3); position:absolute; bottom:0px; width:100%; content:''; float:left; left:0;
}
.showcontent .hc+.title2{ margin-top:15px;}
.qrblock.item2 .hc>div{ padding-top:3px; padding-bottom:3px;}

.jp-state-playing .xuanzhuan{
 -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 5s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 5s;
    -webkit-animation: rotate 15s linear infinite;
    -moz-animation: rotate 15s linear infinite;
    -o-animation: rotate 15s linear infinite;
    animation: rotate 15s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}


.box{ padding-bottom:120px;}
.mp3{ position:fixed; bottom:0px; border-radius:0px; width:100%; z-index:2; background-color:var(--mp3bgcolor); line-height:16px;padding-left:20px; padding-top:20px; padding-bottom:10px;padding-right:20px;box-sizing:border-box;}
.mp3 .box{ padding-bottom:0;}
.mp3 .tops{ padding-bottom:10px;}
.mp3 .tops .img{
	box-sizing:border-box;
	background-color:#FFFFFF;
	width:40px;
	height:40px;
	border-radius:100%;
	float:left;
	overflow:hidden;
	border: 2px solid #FFFFFF;
}
.mp3 .tops .img img{ height:100%; height:100%;}
.mp3 .tops .img+.right{
	margin-left:50px;
	font-size:14px;
	color:#ffffff;
	font-weight: lighter; line-height:1.2;
}
.mp3 .tops .t{
	font-size:14px;
	color:#ffffff;
	font-weight: bold;
}
.mp3 .tops .item{ padding-top:5px;}
.mp3 .tops .item>div{ display:inline-block; color:rgba(255,255,255,0.6); font-size:12px;}
.mp3 .tops .item>div+div{ padding-left:10px;}
.jp-playlist{ display:none}
/*音乐播放*/
/*.jp-audio .jp-volume-controls{ display:none;}*/
.jp-audio{ width:100%; padding:0;}
.jp-current-time,.jp-duration{ float:none; display:inline-block;width:auto; position:relative; color:#FFFFFF; font-size:12px;}
.time{ float:right; width:80px; text-align:right;margin-top:8px;  }
.jp-audio .jp-controls{ width:32px; float:left;  background:none;

  overflow: hidden;
background-color:rgba(0,0,0,0);border:none;
  height: 32px;}
 .jp-controls button,.jp-volume-controls button{ background-color:rgba(0,0,0,0); border:none;} 
 
.jp-progress,.jp-volume-bar{ width:calc(100% - 120px); float:left; background-image:none; background-color:rgba(255,255,255,0.2); height:3px; margin-top:15.5px; }
.jp-play-bar,.jp-volume-bar-value{ float:left;  background-image:none;background-color:#ffffff; height:100%; }
.jp-seek-bar{ background-image:none;float:left; height:100%;}
.jp-duration{ margin-left:5px;color: #999999;}
.jp-duration:before{
	content:'';
	height:10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999999;
	position: absolute;
	left: -5px;transform: rotate(30deg); top:50%; margin-top:-5px;
}
/*.jp-audio .jp-controls-holder{ height:30px;}*/
.jp-controls button {
  display: block;
  float: left;
  overflow: hidden;
  text-indent: -9999px;
  height: 32px;

  padding: 0;
  border: none;
  cursor: pointer;
}

.jp-type-playlist .jp-play,.jp-type-playlist .jp-play:focus,.jp-state-playing div.jp-type-playlist .jp-play:focus{ background-image:none;color:#FFFFFF; text-indent:0;}
 .jp-type-playlist .jp-play i:before {
  content: "\ea82";
}
.jp-type-playlist .jp-play i{font-size:32px;}
.jp-volume-controls button i{font-size:20px;line-height:32px;}
.jp-state-playing div.jp-type-playlist .jp-play i:before {
  content: "\e616";
}


.jp-audio .jp-controls-holder{ float:left; width:calc(100% - 40px);}
.jp-volume-controls{ float:right; width:30px;}
.jp-volume-controls .jp-mute { color:#FFFFFF; float:left;}
.jp-volume-controls .jp-mute i:before {
    content: "\e660";
}
.jp-volume-controls .jp-mute i:before {
    content: "\e660";
}
.jp-state-muted .jp-volume-controls .jp-mute i:before { content: "\e698";}
.jp-volume-bar{ width:calc(100% - 30px); display:none;}