.article-page,
.article-page * {
  box-sizing: border-box;
}

.article-page {
  width: 100%;
  padding-bottom: 60px;
  background: #f8f8f8;
  overflow: hidden;
}

.article-wrap {
  width: 1200px;
  margin: 0 auto;
}

.article-breadcrumb {
  height: 42px;
  line-height: 42px;
  color: #999;
  font-size: 12px;
}

.article-breadcrumb a {
  color: #666;
}

.article-breadcrumb i {
  padding: 0 8px;
  color: #bbb;
  font-style: normal;
}

.article-categories {
  min-height: 75px;
  padding: 20px 24px;
  margin-bottom: 18px;
  border-top: 3px solid #358ff0;
  background: #fff;
  overflow: hidden;
}

.article-categories .label {
  float: left;
  width: auto;
  height: 32px;
  line-height: 32px;
  color: #999;
}

.article-categories ul {
  float: left;
  width: 850px;
  overflow: hidden;
}

.article-categories li {
  float: left;
  margin-right: 10px;
}

.article-categories li a {
  display: block;
  height: 32px;
  padding: 0 18px;
  border: 1px solid #dfe4e8;
  border-radius: 17px;
  color: #666;
  line-height: 30px;
}

.article-categories li a:hover,
.article-categories li.cur a {
  border-color: #1cabff;
  background: #1cabff;
  color: #fff;
}

.article-categories-levels {
  padding: 16px 24px 8px;
}

.article-categories-levels .article-category-row {
  position: relative;
  min-height: 38px;
  padding-left: 88px;
  overflow: hidden;
}

.article-categories-levels .article-category-row + .article-category-row {
  padding-top: 13px;
  border-top: 1px solid #f0f2f4;
}

.article-categories-levels .article-category-row .label {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  width: 72px;
  height: 30px;
  color: #7b858e;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
}

.article-categories-levels .article-category-row + .article-category-row .label {
  top: 13px;
}

.article-categories-levels .article-category-row ul {
  float: none;
  width: auto;
}

.article-categories-levels .article-category-row li {
  margin: 0 10px 8px 0;
}

.article-categories-levels .article-category-row li a {
  height: 30px;
  padding: 0 16px;
  border-color: #e1e7ec;
  background: #fafbfc;
  line-height: 28px;
}

.article-categories-levels .article-category-row li a:hover,
.article-categories-levels .article-category-row li.cur a {
  border-color: #1cabff;
  background: #1cabff;
  color: #fff;
}

.article-categories-levels font {
  padding-left: 2px;
  color: #ff5b4d !important;
  font-size: 12px;
}

.article-categories-levels li.cur font,
.article-categories-levels li a:hover font {
  color: #fff !important;
}

.article-categories .update-count {
  float: right;
  height: 32px;
  line-height: 32px;
  color: #aaa;
  font-size: 12px;
}

.article-categories .update-count em {
  padding: 0 3px;
  color: #ff6547;
  font-style: normal;
}

.article-layout {
  position: relative;
  width: 1200px;
  overflow: hidden;
}

.article-main {
  float: left;
  width: 832px;
  background: #fff;
}

.article-title {
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid #edf0f2;
  line-height: 60px;
}

.article-title h1 {
  display: inline-block;
  padding-left: 12px;
  border-left: 4px solid #1cabff;
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  vertical-align: middle;
}

.article-list h2 a:hover {
  color: #1cabff;
}

.article-meta {
  height: 22px;
  margin-top: 4px;
  color: #a2a8ae;
  font-size: 12px;
  line-height: 22px;
}

.article-meta span {
  margin-right: 18px;
}

.article-meta .tag {
  padding: 2px 8px;
  border-radius: 2px;
  background: #eaf6ff;
  color: #2699e6;
}

.article-meta .tag a {
  color: inherit;
}

.article-list {
  padding: 0 24px;
}

.article-list li {
  min-height: 157px;
  padding: 18px 0;
  border-bottom: 1px solid #edf0f2;
  overflow: hidden;
}

.article-list .article-empty {
  min-height: 180px;
  padding-top: 78px;
  border-bottom: 0;
  color: #a2a8ae;
  font-size: 14px;
  text-align: center;
}

.article-list .thumb {
  float: left;
  width: 240px;
  height: 120px;
  border-radius: 5px;
  object-fit: cover;
}

.article-list .info {
  margin-left: 260px;
}

.article-list h2 {
  height: 27px;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.article-list .intro {
  height: 42px;
  color: #7d8790;
  font-size: 13px;
  line-height: 21px;
  overflow: hidden;
}

.article-main > .tspage {
  clear: both;
  height: auto !important;
  padding: 30px 24px 34px !important;
  border-top: 1px solid #edf0f2;
  background: #fff !important;
  line-height: 36px !important;
  text-align: center !important;
  overflow: visible !important;
}

.article-main > .tspage > .tspage {
  height: 36px !important;
  padding: 0 !important;
  background: #fff !important;
  line-height: 36px !important;
  text-align: center !important;
  overflow: visible !important;
}

.article-main .tsp_count,
.article-main .tsp_change {
  display: none !important;
}

.article-main .tsp_nav {
  height: 36px;
  text-align: center !important;
}

.article-main .tsp_nav > i,
.article-main .tsp_nav > b,
.article-main .tsp_nav > a {
  display: inline-block !important;
  min-width: 36px;
  height: 36px;
  padding: 0 11px !important;
  margin: 0 3px;
  border: 1px solid #e1e7ec !important;
  border-radius: 4px;
  background: #fff !important;
  color: #69737d !important;
  font-weight: normal;
  font-style: normal;
  line-height: 34px;
  text-align: center;
  vertical-align: top;
}

.article-main .tsp_nav > i {
  background: #f7f9fb !important;
  color: #abb2b9 !important;
}

.article-main .tsp_nav > b {
  border-color: #1cabff !important;
  background: #1cabff !important;
  color: #fff !important;
}

.article-main .tsp_nav > a:hover {
  border-color: #1cabff !important;
  background: #f2faff !important;
  color: #1cabff !important;
  text-decoration: none;
}

.article-main .tsp_nav > a i {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  line-height: inherit;
}

.article-side {
  position: relative;
  float: right;
  width: 350px;
}

.article-side-inner {
  width: 350px;
  overflow: hidden;
}

.article-side-inner.is-fixed {
  position: fixed;
  bottom: 18px;
  z-index: 20;
}

.article-side-inner.is-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
}

.article-side-inner .article-side-box:last-child {
  margin-bottom: 0;
}

.article-side-box {
  margin-bottom: 18px;
  background: #fff;
  overflow: hidden;
}

.side-title {
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #edf0f2;
  line-height: 58px;
}

.side-title h2 {
  float: left;
  padding-left: 10px;
  margin-top: 19px;
  border-left: 3px solid #1cabff;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
}

.side-title .more {
  float: right;
  color: #aaa;
  font-size: 12px;
}

.hot-article-list {
  padding: 0 18px 8px;
}

.hot-article-list li {
  height: 47px;
  border-bottom: 1px dashed #eceff1;
  line-height: 47px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hot-article-list i {
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 11px;
  background: #c2c8ce;
  color: #fff;
  font-style: normal;
  line-height: 21px;
  text-align: center;
  vertical-align: middle;
}

.hot-article-list li:nth-child(1) i {
  background: #fe3944;
}

.hot-article-list li:nth-child(2) i {
  background: #fa805d;
}

.hot-article-list li:nth-child(3) i {
  background: #f3bd48;
}

.topic-list {
  padding: 0 18px 8px;
}

.topic-item {
  display: block;
  width: 314px;
  padding: 16px 0 18px;
}

.topic-item + .topic-item {
  border-top: 1px solid #edf0f2;
}

.topic-item img {
  display: block;
  width: 314px;
  height: 194px;
  border-radius: 8px;
  object-fit: cover;
}

.topic-item h3 {
  height: 27px;
  margin-top: 10px;
  color: #111820;
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.topic-item:hover h3 {
  color: #1cabff;
}

.topic-meta {
  height: 25px;
  color: #9299a2;
  font-size: 12px;
  line-height: 25px;
}

.topic-meta:before {
  content: "";
  display: inline-block;
  width: 18px;
  margin-right: 5px;
  border-top: 1px solid #aeb5bd;
  vertical-align: middle;
}

.topic-meta time {
  margin-left: 5px;
}

.topic-meta em {
  float: right;
  color: #ff4c38;
  font-style: normal;
  font-weight: 600;
}

.hot-app-list {
  padding: 4px 18px 8px;
}

.hot-app-list li {
  height: 75px;
  padding: 13px 0;
  border-bottom: 1px solid #edf0f2;
  overflow: hidden;
}

.hot-app-list li:last-child {
  border-bottom: none;
}

.hot-app-list img {
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.hot-app-list .info {
  margin: 0 55px 0 58px;
}

.hot-app-list strong {
  display: block;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hot-app-list span {
  display: block;
  color: #999;
  font-size: 11px;
  line-height: 21px;
}

.hot-app-list .download {
  float: right;
  width: 48px;
  height: 27px;
  margin-top: -38px;
  border-radius: 3px;
  background: #eaf6ff;
  color: #1b9de9;
  font-size: 12px;
  line-height: 27px;
  text-align: center;
}

.hot-app-list .download:hover {
  background: #1cabff;
  color: #fff;
}