*[hidefocus],input,textarea,a{outline:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
fieldset,img,html,body,iframe{border:0;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
caption,th{font-weight:normal;font-style:normal;text-align:left;}
em,strong{font-weight:bold;font-style:normal;}
body,textarea,select,input,pre{font-family:'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;font-size:14px;color:#555;}
body{background:#f8f8f8;line-height:1.5em;-webkit-text-size-adjust:none;}
a,button{cursor:pointer;}
textarea{resize:none;overflow:auto;}
pre{white-space:pre-wrap;}
html,body{height: 100%; background:#f2f6fd;}
a{color:#333;text-decoration:none;}
a,a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);}
input{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only;}
.clear:before,.clear:after { content: ""; display: table;}
.clear:after {clear: both;}

button {-webkit-tap-highlight-color: rgba(255,255,255,0)}
img{ width:100%; display:block; padding:0; margin:0;}
/**
 * 首页
 */
.wrap-empty{ width:10rem; height:100%;}
.wrap-empty svg{ position: fixed; top:50%; left:50%; margin:-30px 0 0 -30px;}
.wrap{ width: 10rem; margin:0 auto; min-height:100%; background: url(../images/bg.jpg) no-repeat; background-size:100% 100%; padding:1rem 0 0 0; box-sizing: border-box; position: fixed; top:0; left:0; display: none;}
.album{ width:9.1rem; height:13.6rem; background:#fff; margin:.32rem 0 0 .32rem;}
#album {width:9.1rem; height:13.6rem; background:#fff; margin:-6.05rem 0 0 -4.55rem; z-index: 99; position: fixed !important; top:50%; left:50%;}

#album .turn-page { background-color: white;}
/* #album .cover { width:100%; height:100%;} */

#album .cover h1 {
    color: white;
    text-align: center;
    font-size: 50px;
    line-height: 500px;
    margin: 0px;
}

#album .loader {
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 238px;
    left: 188px;
}

#album .data {
    text-align: center;
    font-size: 40px;
    color: #999;
    height: 13.6rem;
}

.controls {
    width: 100%; background:rgba(0,0,0,.6); color:#fff;
    padding:.2rem 0;
    text-align: center;
    font: 30px arial;
    position: fixed; bottom:0; left:0; transition: bottom 1s;
    z-index: 100;
}
.controls img{ width:.4rem; height:.4rem; display: inline-block; margin:0 .3rem; vertical-align: middle;}
.pagination-num{ background:#fff; color:#333; padding:0 .4rem; display: inline-block; font-size:.4rem; vertical-align: middle;}

.controls input,
.controls label {
    font: 30px arial;
}





.header{ background: rgba(0,0,0,.6); width:100%; position: fixed; top:0; left:0; z-index: 100; padding:.43rem 0 .3rem 0; transition: top 1s;}
.portrait{ float: left;  width:8rem; overflow: hidden;}
.portrait-pic{ width:1.4rem; height:1.4rem; border-radius:1.4rem; margin:0 0 0 .2rem; overflow: hidden; float: left;}
.portrait img{width:1.4rem;  }
.user-info{ float: left; color:#fff; padding:0 0 0 .3rem; width:5rem; overflow: hidden;}
.user-info h3{ line-height:.8rem; font-size:.36rem;}
.album-right{ float: right;}
.add-wx{ width:1.87rem; height:1.4rem; float: left; text-align: center; color:#fff;}
.add-wx img{ width:.95rem; margin:0 auto;}
.left-line{ border-left:1px solid #fff;}

.header-show{ top:-2.2rem; transition: top 1s;}
.foot-show{ bottom:-1rem; transition: bottom 1s;}

.thick{ background-image:url(../images/thick.jpg); position: fixed; top:50%; left:9.52rem; width:.2rem; height:13.6rem; margin:-6.05rem 0 0 0;}
.normal_left_border{ background-image: linear-gradient(left,rgba(20,20,20,0.5),rgba(240,240,200,0)); background-image: -webkit-gradient(linear,left top,right top,from(rgba(20,20,20,0.5)),to(rgba(240,240,200,0))); position: absolute; top:0; left:0; width:.3rem; height:13.6rem; z-index: 1000;}

.showMessage {
    padding: .1rem .3rem; font-size:.32rem;
    border-radius: 5px;
    position: fixed;
    top: 45%;
    left: 32%;
    color: #ffffff;
    background: rgba(0,0,0,.6);
    z-index: 100;
}