@font-face {
  font-family: 'iconfont';  /* project id 967744 */
  /*src: url('//at.alicdn.com/t/font_967744_592vb5h7a08.eot');
  src: url('//at.alicdn.com/t/font_967744_592vb5h7a08.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_967744_592vb5h7a08.woff') format('woff'),
  url('//at.alicdn.com/t/font_967744_592vb5h7a08.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_967744_592vb5h7a08.svg#iconfont') format('svg');*/
}

body {
  background-color: #f4f5f5;
  overflow-y: scroll;
}
.topbar {
  height: 60px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #eee;
  border-top: 3px solid #e39939;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
}
.topbar__left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.topbar__logo {
  width: 6rem;
  padding: .4rem;
}
.topbar__logo > img {
  width: 100%;
}
.icon {
  font-family: "iconfont" !important;
  font-size: .6rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-find:before { content: "\e618"; }
.icon-arrow-down:before { content: "\e6a4"; }
.icon-arrow-down2:before { content: "\e623"; }
.icon-time:before { content: "\e606"; }
.icon-home:before { content: "\e617"; }
.icon-edit:before { content: "\e642"; }
.icon-more:before { content: "\e60c"; }
.icon-back:before { content: "\e606"; }
.icon-bookmark:before { content: "\e606"; }
.icon-arrow-up:before { content: "\e60b"; }
.icon-finger:before { content: "\e68d"; }
.icon-arrow-right:before { content: "\e656"; }
.icon-arrow-left:before { content: "\e657"; }
.topbar .topbar__btn {
  font-size: .7rem !important;
  margin-right: .5rem;
  color: #666;
}
.topbar .topbar__btn em + i {
  margin-left: -.2rem;
}
.topbar__btn > .icon {
  font-weight: bold;
  font-size: .7rem;
}

.topbar__right .topbar__btn > .icon {
  font-size: .9rem;
}
.cats-wrap {
  height: 52px;
  position: relative;
}
.cats {
  background-color: #fff;
  margin-bottom:0.4rem;
  font-size: .7rem;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.cats-wrap:after {
  content: '';
  position: absolute;
  height: 1px;
  left: .0rem;
  right: 0rem;
  width: auto;
  bottom: 0;
  background-color: #eee;
}
.cats__item {
  display: inline-block;
}
.cats__item > a {
  padding: .8rem .4rem;
  display: block;
  white-space: nowrap;
  color: #111;
}
.cats__item.active > a {
  color: #e39939;
  font-weight: bold;
}
.childs {
  box-shadow: 0 0px 5px #ccc;
  overflow: hidden;
  margin-top:0rem;
  background-color: #fff;
}
.childs__item {
  display: block;
  float: left;
  width: 33.3%;
  text-align: center;
  margin-top:0.2rem;
  padding: .2rem .1rem;
  box-sizing: border-box;
}
.childs__item > a {
  padding: .2rem .1rem;
  font-size: .5rem;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}
.childs__item.active > a {
  color: #fff;
  background-color: #e39939;
  border-radius: 5px;
}
.list-wrap {
  padding-bottom: .5rem;
  overflow: hidden;
}
.info-list {
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.info-list__item {
  overflow: hidden;
  position: relative;
}
.info-list__item > a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: .6rem .5rem;
  line-height: .9rem;
  
}
.info-list__item .title {
  font-size: .7rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.info-list__item .date, .info-list__item .desc {
  font-size: .5rem;
  color: #999;
}
.info-list__item.top .title {
  color: #ff0000;
  position: relative;
  padding-left: .8rem;
}
.info-list__item.top .title:before {
  content: '';
  position: absolute;
  left: 0;
  top: .1rem;
  width: .7rem;
  height: .7rem;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+LUNEtwAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAABlBMVEXjmTn09fVyU+rOAAAAL0lEQVQI12NgQAPy+z8wMDExMDCxALH9AwYmBQUGJiU8mLWBgUkigYHngQADFgAAbmgHFVHUdkEAAAAASUVORK5CYII=');
  background-size: 100% 100%;
  border-radius: .1rem;
  font-size: .4rem;
}
.info-list__item .date {
  width: 17%;
  margin-left: 3%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  font-size: .5rem;
}
.info-list__item .date > i {
  font-size: .5rem;
}
.info-list__item .date > em {
  margin-left: .15rem;
}
.info-list__item__content {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.info-list__item .desc {
  margin-top: .4rem;
  line-height: .8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.info-list__item:not(:last-child):after {
  content: '';
  position: absolute;
  height: 1px;
  left: .6rem;
  right: 0rem;
  width: auto;
  bottom: 0;
  background-color: #eee;
}
.header {
  height: 112px;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1;
}
@-webkit-keyframes card-loading {
  0%,to {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}

@keyframes card-loading {
  0%,to {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}
.info-list__item.no-content .title,
.info-list__item.no-content .desc {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg,rgba(207,216,220,.2),rgba(207,216,220,.4),rgba(207,216,220,.2));
  animation: card-loading 1.4s ease infinite;
  height: .8rem;
  background-size: 600% 600%
}
.info-list__item.no-content {
  padding: .6rem .5rem;
}
.info-list__item.no-content .desc {
  width: 60%;
}
.nomore {
  text-align: center;
  padding: .7rem 0;
  padding-bottom: 2.8rem;
  color: #999;
  font-size: .6rem;
}
.load-more {
  padding: .7rem 0;
  padding-bottom: 3.3rem;
  display: flex;
  font-size: .6rem;
  align-items: center;
  justify-content: center;
}
.load-more > a {
  display: flex;
  color: #999;
  border: 1px solid #ddd;
  background-color: rgba(255,255,255,.8);
  padding: .3rem .5rem;
  border-radius: .3rem;
  align-items: center;
  justify-content: center;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: .3
  }
}
.load-more > a > i {
  font-size: 1rem;
  animation: fade 1s ease-out infinite; 
}
.pop-menu {
  position: absolute;
  top: 1.6rem;
  left: -1.3rem;
  background-color: #fff;
  z-index: 2;
  width: 5rem;
  border: 1px solid #ddd;
  box-shadow: 0 0 .2rem #ccc;
  border-radius: .2rem;
}
.pop-menu > li > a {
  display: block;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  color: #333;
}

.footer {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: row;
}
.footer > a {
  flex: 1;
  padding: .4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}
.footer > a > i {
  font-size: 1rem;
}
.footer > a > em {
  margin-top: .2rem;
  font-size: .5rem;
}

.back-to-top {
  position: fixed;
  display: block;
  bottom: 3rem;
  right: .5rem;
  padding: .5rem;
  font-size: 1.2rem;
  background-color: rgba(0, 0, 0, .3);
  color: #fff;
  border-radius: .2rem;
}
.back-to-top > i {
  font-size: 1.2rem;
}
.search-layer {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: auto;
  right: 0;
  bottom: 0;
  height: auto;
  background-color: rgba(255, 255, 255, 1);
}
.search-layer .search-bar {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.search-layer .search-bar__field {
  flex: 1;
  padding: .2rem;
}
.search-layer .search-bar__field > input {
  display: block;
  width: 100%;
  border-radius: 1rem;
  background-color: #f3f3f3;
  padding: .35rem;
  box-sizing: border-box;
}
.search-layer .search-bar__btn {
  padding: .5rem;
}
.search-layer .search-bar__btn > i {
  font-size: 1rem;
}
.search-history, .search-recommend {
  padding: 0 .6rem;
  background-color: #fff;
}
.search-history__item {
  padding: .6rem 0;
  font-size: .6rem;
  border-bottom: 1px solid #eee;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.search-history__item .icon {
  color: #999;
}
.search-recommend {
  padding: .6rem;
}
.search-recommend__item {
  padding: .2rem .4rem;
  background-color: #f3f3f3;
  color: #666;
  font-size: .6rem;
  border-radius: .3rem;
  margin: .4rem;
  display: inline-block;
}