*{padding: 0;margin:0;}
html{
  width: 100%; 
  height: 100%; 
  margin: 0 auto;
  max-width: 768px;
  overflow: hidden;
  background: #ddd;
}
body{
  background-color:#F9F9F9;
  margin:0;
  width: 100%;
  font-size:.24rem;
  color: #333;
  position: relative;
  height: auto;
  min-height: 100%;
  font-family: "arial","微软雅黑";
  overflow: hidden;
}
a{
  text-decoration: none;
  color:#333;
}
span,i{display: inline-block;}
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
::-webkit-scrollbar,webkit{width:0}

.main{
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
  width: 100%;
  padding-top: .7rem;
}
.main-movedown{
  animation: moveDown 2s linear;
  animation-fill-mode:forwards;
}
.main-moveup{
  animation: moveUp 2s linear;
  animation-fill-mode:forwards;
}
@keyframes moveDown{
  form{
    /*transform: translateY(0);*/
    top:0;
  }
  to{
    /*transform: translateY(-100vh);*/
    top:calc(-100vh - .8rem);
  }
}
@keyframes moveUp{
  form{
    transform: translateY(-100vh);
  }
  to{
    transform: translateY(0);
  }
}
.main p{
  margin-bottom: .2rem;
  line-height: .5rem;
}

/***header***/
.header{
    height: .8rem;
    width: 100%;
    line-height: .8rem;
    background: #fff;
    display: inline-flex;
    position: absolute;
    z-index: 9;
}
.one-title{
  display: inline-block;
  font-size: .35rem;
  flex-grow:1; 
  text-align: center;
}
.header i{
  display: inline-block;
  width: .32rem;
  height: .32rem;
  padding:.1rem;
  margin: .12rem;
}
.menu{
  background: url("/static/images/menu.png") no-repeat;
  background-size: 100% 100%;
  float: left;
}
.search{
  background: url("/static/images/search.png") no-repeat;
  background-size: 100% 100%;
  float: right;
}

.header .search-act{
  width: .32rem;
  height: .32rem;
  background: url("/static/images/search-active.png") no-repeat;
  background-size: 100% 100%;
}
.header .cancle{
  width: .32rem;
  height: .32rem;
  background: url("/static/images/close.png") no-repeat;
  background-size: 100% 100%;
}
/***menu***/
.one-menu{
  width: 3rem;
  height: 100vh;
  position: absolute;
  top: 0;
  /*opacity: 0;*/
  left: calc(-3rem - 10px); 
  background: #fff;
  box-shadow: 4px -2px 16px 0px #adabab;
  text-align: center;
  padding-top: .6rem;
  box-sizing: border-box;
  z-index: 99;
}
.link-to{
  display: inline-block;
  padding: .1rem .3rem;
  width: 2.4rem;
  font-size: .3rem;
  line-height: .7rem;
  text-decoration: none;
  color: #333;
  }
/***home***/
.home-bg{
  height: calc(100vh - .7rem);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color:#fff;
}
.home-content{ 
  padding: .5rem;
  margin-bottom: 1.3rem;
}
.home-content  p{
  text-align: justify;
}
.home-bgcolor{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
}
.home-desc{
  position: absolute;
  bottom: .5rem;
  padding: 0 .5rem;
  text-align: center;
}
.home-day{
  font-size: .8rem;
  font-weight: normal;
  margin: .1rem 0;
}
.home-month{
  font-size: .4rem;
  margin: .2rem 0;
}
.home-text-short{
  height: 1.35rem;
  line-height: .45rem;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: .29rem;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.home-down{
  padding: .2rem;
  position: relative;
}
.home-down i{
  width: .8rem;
  height: .4rem;
  background: url(/static/images/down.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -.4rem;
}

.down01{
  animation: down 1s ease infinite;
}
.down02{
  animation: down 1s ease infinite;
  animation-delay:.5s;
}
@keyframes down{
  from{
    transform: translateY(0);
    opacity: 1;
  }
  to{
    transform: translateY(.5rem);
    opacity: 0;
    width: .6rem;
    margin-left: -.3rem;
  }
}
.home-tag{
  color: #54b2d8;
  margin-bottom: .2rem;
}
.home-article-title{
  font-size: .5rem;
  line-height: .7rem;
  margin-bottom: .1rem;
}
.home-article-author{
  margin-bottom: .1rem;
  margin-left: .2rem;
}
.home-article-img{
  height: 2.5rem;
}
.home-article-img img{
  width: 100%;
  height: 100%;
}
.home-read-more{
  font-size: .32rem;
  color: #54b2d8;
  margin: .1rem;
}
.home-title{
  margin-bottom: .2rem;
  line-height: .8rem;
}
.home-article{
  margin-bottom: 1rem;
}
.home-question{
  margin-bottom: 1rem;
}
.home-question p,.home-article p{
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: .42rem;
  display: -webkit-box;
  font-size: .29rem;
  -webkit-box-orient: vertical;
}
.one-more{
  text-align: center;
}
.one-more .to-more{
  font-size: .4rem;
  line-height: .4rem;
  border: 1px solid #ddd;
  padding: .15rem .2rem;
  border-radius: 5px;
  line-height: .4rem;
}
/***picture***/
.picture-box{
  background: #efefef;
  margin-bottom: 1rem;
  text-align: center;
  color:#828282;
}
.content-box{
  padding: .2rem .5rem;
  background: #fff;
  margin-bottom: .2rem;
}
.picture-tag{
    font-size: .45rem;
    color: #A9A9A9;
    margin: .2rem 0;
}
.picture-num{
    color: #333;
    font-weight: normal;
    font-size: .24rem;
    margin-bottom: .2rem;
}
.picture-img-author{
  color: #abaaaa;
    margin: .25rem;
}
.picture-short{
  text-align: left;
    line-height: .4rem;
    font-size: .28rem;
}
.picture-img img{
  width: 100%;
}
.picture-author{
  margin: .35rem 0;
}
/***read***/
.reads-box{
  background: #efefef;
  margin-bottom: 1rem;
}
.article-box{
  padding: .2rem .5rem;
  background: #fff;
  margin-bottom: .2rem;
}
.article-tag{
    text-align: center;
    font-size: .28rem;
    margin-bottom: .5rem;
}
.article-title{
  font-size: .4rem;
    margin: .2rem 0;
    font-weight: normal;
}
.article-author{
  font-size: .26rem;
    margin-bottom: .2rem;
}
.article-img img{
  width: 100%;
}
.article-short{
  font-size: .3rem;
    line-height: .5rem;
    margin: .1rem 0;
    text-indent: 10px;
}
.date{
  font-size: .28rem;
    color: #A9A9A9;
    margin: .2rem 0 .3rem 0;
}
/***music***/
.music-img-box{
  text-align: center;
}
.music-author{
  margin: .2rem 0;
  color: #a9a9a9;
}
.music-img{
  width: 70%;
  border-radius: 50% 50%;
  animation: move linear 10s infinite;
}
@keyframes move{
  0% {transform:rotate(0deg);}
  10% {transform:rotate(36deg);}
  20% {transform:rotate(72deg);}
  30% {transform:rotate(108deg);}
  40% {transform:rotate(144deg);}
  50% {transform:rotate(180deg);}
  60% {transform:rotate(216deg);}
  70% {transform:rotate(252deg);}
  80% {transform:rotate(288deg);}
  90% {transform:rotate(324deg);}
  100% {transform:rotate(360deg);}
}
/***musicDetail***/
.details{
  background: #fff;
  padding:.6rem .5rem;
  font-size: .29rem;
  text-align: justify;
  margin-bottom: 1rem;
}
.detail-title{
  font-size: .5rem;
  line-height: .7rem;
}
.details img{
  width: 100%;
}
.music-detail-img{
  width: 100%;
  margin-bottom: .2rem;
}
.one-gif-box img{
  width: 100%;
  margin:.2rem 0;
}
.music-head{
  position: relative;
  height: 3rem;
}
.music-info{
  text-align: center;
  font-size: .3rem;
  margin: .1rem 0;
}
#popupXiamiMusic{
  display: none;
}
.pause-btn{
  display: none;
}
.music-info div{
  margin: .2rem 0;
}
.music-detail-author{
  display: block;
  margin: .2rem 0;
}
.detail-editor{
  color: #a9a9a9;
  line-height: .4rem;
  font-size: .26rem;
  margin-bottom: .3rem;
  margin-top: .1rem;
}
/***pictureDetail***/
.picture-details{
  text-align: center;
  padding-bottom: 1rem;
}
.picture-details img{
  width: 100%;
}
.picture-author{
  margin: .2rem .4rem;
  font-size: .3rem;
  text-align: right;
  overflow: hidden;
}
.picture-detail-issue-no{
  float: left;
}
.detail-author{
  display: block;
}
.picture-article{
  padding: 0 .5rem;
  text-align: left;
  font-size: .3rem;
  line-height: .5rem;
}
.picture-line{
  width: 2rem;
  height: 1px;
  background: #c3bebe;
  margin: .5rem 0;
}
.picture-detail-day{
  text-align: center;
  font-size: .8rem;
  margin-top: .5rem;
}
.picture-detail-month{
  font-size: .3rem;
  text-align: center;
  margin: .2rem;
}
/***readDetail***/
.reads-details p{
  line-height: .45rem;
  font-size: .3rem;
  text-indent: 20px;
}
.read-detail-article p{
  margin-bottom: 0;
}
.reads-details p:first-child{
  margin-bottom: .1rem;
}
.line{
  width: 2rem;
  height: 3px;
  background: #333;
  margin: .3rem 0;
}
/***questionDetail***/
.question-line{
  width: 100%;
  height: 1px;
  background:#ddd;
}
/***loading***/
.load-box{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  text-align: center;
}
.load-box .loding-img {
  width: 32px;
  margin-top: 50%;
}