* { box-sizing: border-box; }
body { margin: 0; padding-top: 65px; background: #f2f4f5; color: #212529; font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { color: #0056b3; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid #e45956; outline-offset: 3px; }
.navbar { position: fixed; z-index: 10; inset: 0 0 auto; height: 58px; background: #fff; box-shadow: 0 1px 4px #9c9c9c80; }
nav { display: flex; align-items: center; width: calc((100% - 16px) * 10 / 12); height: 100%; margin-left: calc((100% - 16px) / 12); }
.brand { display: grid; place-items: center; align-self: stretch; width: 58px; flex-shrink: 0; margin-right: 20px; background: #e45956; }
.brand img { width: 28px; height: auto; }
.nav-link { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 5px 10px; white-space: nowrap; font-size: 15px; color: #525252; }
.active::after { content: ""; position: absolute; margin-top: 20px; width: 12px; height: 3px; background: #e45956; border-radius: 3px; }
nav form { position: relative; margin: 0 0 0 10px; }
input { display: block; width: 212px; border: 1px solid #e2e2e2; border-radius: 23px; padding: 7px 36px 7px 20px; background: #efefef; color: grey; font: inherit; font-size: 14px; line-height: 21px; }
input::placeholder { color: #b9b9b9; opacity: 1; }
nav button { position: absolute; top: 0; right: 10px; display: grid; place-items: center; width: 36px; height: 100%; padding: 0; border: 0; background: transparent; color: grey; cursor: pointer; }
nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-search { display: none; }
.login { margin-left: auto; padding: 8px 0; font-size: 14px; }
.content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.feed { grid-column: 2 / span 6; min-width: 0; }
aside { grid-column: 8 / span 4; min-width: 0; padding: 0 15px; }
.ae { position: relative; background: #fff; }
.ae::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #ebeeef; pointer-events: none; }
.article-link { display: flex; }
.ae-container { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 16px 10px 16px 20px; }
.tp { display: table; table-layout: fixed; width: 100%; padding-top: 2px; overflow-wrap: anywhere; }
.tp span { color: #1a1a1a; font-size: 15px; line-height: 20px; letter-spacing: .4px; }
.meta { font-size: 13px; color: #929191; margin-top: 3px; }
.ae-avatar { flex-shrink: 0; padding: 20px 10px; }
.ae-profile-img { display: block; width: 45px; height: 45px; border-radius: 2px; object-fit: cover; }
.load { display: flex; justify-content: center; padding: 5px 0; }
.load[hidden] { display: none; }
.load-more { display: block; width: 100%; border: 0; border-radius: 3px; background: #fff; color: #e45956; text-align: center; padding: 10px; font-size: 14px; line-height: 21px; letter-spacing: 1px; cursor: pointer; }
.load-more[aria-disabled="true"] { opacity: .6; cursor: wait; }
#load-status { color: #777; text-align: center; font-size: 14px; }
#load-status:empty { display: none; }
.hot { background: #fff; padding: 10px; }
h2 { margin: 0; color: #8590a6; font-size: 14px; line-height: 24px; font-weight: 900; }
h2 + .hot-a { margin-top: 5px; }
.hot-a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 5px 0; line-height: 23px; font-size: 13px; color: #676565; letter-spacing: .4px; }
.brand-info { margin-top: 5px; padding: 10px; color: #8590a6; font-size: 13px; }
.brand-info > div { padding: 5px 0; }
.promotion { color: #f44336; font-weight: bold; }
.empty { margin: 0; padding: 40px 20px; text-align: center; background: #fff; color: #777; }
@media (max-width: 767px) {
  body { padding-top: 60px; }
  .content { display: block; }
  aside { display: none; }
  nav { width: calc(100% - 16px); margin-left: 0; }
}
@media (max-width: 700px) {
  .nav-link { font-size: 14px; }
  nav form { display: none; }
  .mobile-search { display: flex; }
}
