/* todo 1 */
:root {
  --side-bar-bg-color: #fff;
  --control-text-color: #777;
  --select-text-bg-color: #ffafa3;
  --active-file-text-color: #262626;
  --active-file-border-color: #f22f27;
  /* --active-file-bg-color: #fff3f0; */
  --primary-color: #f22f27;
  /* 中性色 */
  --mid-1: #ffffff;
  --mid-2: #fafafa;
  --mid-3: #f5f5f5;
  --mid-4: #f0f0f0;
  --mid-5: #d9d9d9;
  --mid-6: #bfbfbf;
  --mid-7: #8c8c8c;
  --mid-8: #595959;
  --mid-9: #434343;
  --mid-10: #262626;
  --mid-11: #1f1f1f;
  --mid-12: #141414;
  --mid-13: #000000;
  /* 主题色 */
  --main-1: #fff3f0;
  --main-2: #ffd4cc;
  --main-3: #ffafa3;
  --main-4: #ff887a;
  --main-5: #ff5d52;
  --main-6: #f22f27;
  --main-7: #cc1616;
  --main-8: #a60a0f;
  --main-9: #80010a;
  --main-10: #590009;
}
/* todo 36 */
html {
  line-height: 1.15;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 26px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 21px;
}
h6 {
  font-size: 18px;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code, 
kbd, /* 键盘 */
samp {
  /* 计算机代码样本 */
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]-moz-focusring,
[type="reset"]-moz-focusring,
[type="submit"]-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
[hidden],
template {
  display: none;
}
*,
:after,
:before {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}
html {
  font-size: 62.5%; /* %表示相对于父元素的大小 */
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}
body,
html {
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
  background-color: #fff;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, 微软雅黑, Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #403e3e;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.darkmode {
  background: rgba(0, 0, 0, 0.6);
}
body.darkmode * {
  color: #f2f2f2;
}
body.darkmode .article-entry code {
  background: #c7c7c7 !important;
  color: #c7254e !important;
}
body.darkmode .archive-article-date,
body.darkmode .archive-year-wrap .archive-year,
body.darkmode .article-category .article-category-link,
body.darkmode .article-date,
body.darkmode .article-header .article-title,
body.darkmode .article-tag-list:before,
body.darkmode .category-list .category-list-item i,
body.darkmode .category-list a:hover .category-list-item,
body.darkmode .share-outer i,
body.darkmode .tag-list > .tag-list-item:before,
body.darkmode a.toc-link {
  color: #e6e6e6 !important;
}
body.darkmode #reward .reward-p,
body.darkmode #reward .reward-p i,
body.darkmode .float_btns i,
body.darkmode .local-search-input,
body.darkmode .share-icons a i {
  color: #7a7a7a !important;
}
body.darkmode .is-position-fixed {
  background-color: transparent;
}
body.darkmode .v * {
  color: #555 !important;
}
body.darkmode .article-tag-list .article-tag-list-link,
body.darkmode .tag-list > .tag-list-item .tag-list-link {
  background: #e6e6e6 !important;
  color: #555 !important;
}
body.darkmode #vcomments-box #vcomments {
  background-color: hsla(0, 0%, 100%, 0.1) !important;
}
body.darkmode #vcomments-box #vcomments * {
  color: #f1f1f1 !important;
}
body.darkmode .v .vbtn {
  background-color: transparent !important;
}
body.darkmode .v .vlist .vcard .vhead .vsys {
  border: 1px solid #f1f1f1 !important;
  background-color: transparent !important;
}
body.darkmode input::-webkit-input-placeholder {
  color: #ccc;
}
body.darkmode input::-moz-input-placeholder {
  color: #ccc;
}
body.darkmode input::-ms-input-placeholder {
  color: #ccc;
}
body.darkmode .categories-box a {
  color: #f2f2f2;
}
body.darkmode #friends_link .friends_li a {
  background-color: hsla(0, 0%, 100%, 0.15);
  color: #fff;
}
a {
  color: #0681d0;
}
a:hover {
  color: #19a1f8;
}
a:active {
  color: #067bc6;
}
a.disabled {
  color: #adb5bd;
}
dir,
menu,
ul {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
button {
  outline: 0;
  cursor: pointer;
}
.archive-article-date,
.archive-year-wrap .archive-year,
.article-category .article-category-link,
.article-date {
  text-decoration: none;
  color: #5c6b72;
}
.archive-article-date:hover,
.archive-year-wrap .archive-year:hover,
.article-category .article-category-link:hover,
.article-date:hover {
  color: #5c6b72;
}
.archive-article-inner {
  border-radius: 4px;
}
.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  margin: 2.5rem 0 1.5rem;
}
.article-entry hr {
  height: 0.1rem;
  background-color: #999;
  border: none;
  padding: 0;
  margin: 1.5rem 0;
}
.article-entry strong {
  font-weight: 700;
}
.article-entry cite, /* 引用 */
.article-entry em {
  /* 斜体 */
  font-style: italic;
}
.article-entry sub,
.article-entry sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article-entry sup {
  top: -0.5rem;
}
.article-entry sub {
  bottom: -0.25rem;
}
.article-entry small {
  /* 小号 */
  font-size: 85%;
}
.article-entry abbr,
.article-entry acronym {
  border-bottom: 0.1rem dotted #999;
}
.article-entry dl,
.article-entry ol,
.article-entry ul {
  margin: 1.5rem 0 1.5rem 2rem;
}
.article-entry blockquote,
.article-entry p,
.article-entry table {
  margin: 1.5rem 0;
}
.article-entry img,
.article-entry video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
.article-entry iframe {
  /* 响应式视频 */
  border: none;
}
.article-entry table {
  width: 100%;
  max-width: 70rem;
  border: 1px solid #dedede;
  margin: 15px auto;
  border-collapse: collapse;
  empty-cells: show;
}
.article-entry table td,
.article-entry table th {
  border: 1px solid #dedede;
  padding: 5px 10px;
}
.article-entry table th {
  font-weight: 700;
  text-align: center !important;
  background: rgba(158, 188, 226, 0.2);
  white-space: nowrap;
}
.article-entry table td:first-child {
  white-space: nowrap;
}
.article-entry blockquote {
  display: block;
  padding: 0 1.5rem;
  width: 100%;
  overflow: auto;
  border-left: 0.3rem solid #cce5ff;
  color: #5c6b72;
}
.article-entry blockquote > :first-child {
  margin-top: 0;
}
.article-entry blockquote > :last-child {
  margin-bottom: 0;
}
.article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 0.5rem;
}
/* TODO 440 */
/* ********************************************* */
.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: text;
}
.article-entry h1:hover a.anchor,
.article-entry h2:hover a.anchor,
.article-entry h3:hover a.anchor,
.article-entry h4:hover a.anchor,
.article-entry h5:hover a.anchor,
.article-entry h6:hover a.anchor {
  text-decoration: none; /* 删除锚点的虚线框 */
}
.article-entry h1 tt,
.article-entry h1 code {
  font-size: inherit !important;
}

.article-entry h2 tt,
.article-entry h2 code {
  font-size: inherit !important;
}

.article-entry h3 tt,
.article-entry h3 code {
  font-size: inherit !important;
}

.article-entry h4 tt,
.article-entry h4 code {
  font-size: inherit !important;
}

.article-entry h5 tt,
h5 code {
  font-size: inherit !important;
}

.article-entry h6 tt,
.article-entry h6 code {
  font-size: inherit !important;
}

.article-entry h2 a,
.article-entry h3 a {
  color: #34495e;
}
.article-entry h1 {
  text-align: center;
  padding-bottom: 0.3em;
  font-size: 2.2em;
  line-height: 1.2;
  margin: 2.4em auto 1.2em;
  color: var(--main-10);
}
.article-entry h1:after {
  content: "";
  display: block;
  margin: 0.2em auto 0;
  width: 100px;
  height: 2px;
  border-bottom: 2px solid var(--main-6);
}
.article-entry h2 {
  margin: 0.8em auto 0.8em;
  /* padding-left: 10px; */
  /* display:inline-block; */
  line-height: 1.4;
  font-size: 1.8em;
  /* border-left: 9px solid var(--main-6); */
  /* border-bottom: 1px solid #ddd; */
  border-bottom: 1px solid var(--main-6); /* 底部边框 */
}

.article-entry h2::before {
  content: "# ";
  color: #f22f27;
}
.article-entry h3 {
  font-size: 1.4em;
  line-height: 1.43;
  margin: 0.5em auto 0.5em;
  padding-left: 9px;
  border-left: 5px solid #f22f27;
}
.article-entry h4 {
  margin-top: 0.5em;
  font-size: 1.2em;
  padding-left: 6px;
  padding-right: 6px;
  display: inline-block;
  border: 1px solid var(--main-6);
  border-top: 4px solid var(--main-6);
}

.article-entry table,
.article-entry ul,
.article-entry ol,
.article-entry dl,
.article-entry p,
.article-entry blockquote {
  margin: 0.8em 0; /* 段落间距 */
}
.article-entry li > ol,
.article-entry li > ul {
  margin: 0 0;
}

.article-entry hr {
  height: 2px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
  overflow: hidden;
  box-sizing: content-box;
}
.article-entry a {
  /* 链接 */
  color: blue;
  font-weight: 500;
  padding: 0 2px;
  text-decoration: none;
}
.article-entry blockquote {
  /* 引用块 */
  border-left: 4px solid rgb(239, 112, 96);
  padding: 10px 15px;
  color: #3f3f3f;
  background-color: #fff9f9;
}
.article-entry table {
  padding: 0;
  word-break: initial; /* 保持表格内文字不换行 */
}

.article-entry table tr {
  /* border-top: 1px solid var(--main-6); 表格的横线 */
  margin: 0;
  padding: 0;
}

.article-entry table tr:nth-child(2n),
.article-entry thead {
  /* 表格的偶数行 */
  background-color: #fafafa;
}

.article-entry table tr th {
  /* 表格的标题 */
  font-weight: bold;
  border: 1px solid var(--main-6);
  border-bottom: 0;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

.article-entry table tr td {
  /* 表格的内容 */
  border: 1px solid var(--main-6);
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

.article-entry table tr th:first-child,
.article-entry table tr td:first-child {
  margin-top: 0;
}

.article-entry table tr th:last-child,
.article-entry table tr td:last-child {
  margin-bottom: 0;
}
.article-entry strong {
  /* 加粗 */
  padding: 0.1em;
  color: #dc3545;
}
.article-entry cite, /* 引用 */
.article-entry em {
  /* 斜体 */
  padding: 0 2px 0 2px;
  font-style: normal;
  color: #ff3502;
}
/* todo 633 */
/* ************************************************* */
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#app,
.cover {
  position: relative;
}
.cover {
  padding: 0;
  margin-bottom: 3rem;
  text-align: center;
}
.cover .forkMe {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
}
.content.anim,
.sidebar.anim {
  transition: all 0.3s ease-in-out;
}
.content {
  position: relative;
  z-index: 1;
  margin-left: 0;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.content.on {
  margin-left: 0 !important;
}
.sidebar {
  position: fixed;
  z-index: 9;
  left: -8rem;
  bottom: 0;
  width: 8rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.sidebar.on {
  left: 0;
}
.navbar-toggle {
  position: absolute;
  top: 1.5rem;
  left: 9.5rem;
  border: none;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: all 0.3s ease-in-out;
  opacity: 0.5;
}
.navbar-toggle:hover {
  opacity: 1;
}
.navbar-toggle:before {
  /* 三横 */
  content: "\ee09";
  font-family: remixicon;
  font-size: larger;
}
.outer,
.wrap {
  position: relative;
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin: auto;
  min-height: calc(100% - 157px);
}
.outer:after,
.outer:before,
.wrap:after,
.wrap:before {
  content: "";
  display: table;
  clear: both;
}
.local-search {
  width: 100%;
}
#main {
  position: relative;
}
@media (min-width: 768px) {
  .cover {
    margin-bottom: 0;
    height: 100%;
  }
  .outer,
  .wrap {
    width: 70rem;
    padding-right: 0;
    padding-left: 0;
  }
  .local-search {
    width: 70rem;
  }
  .content.on {
    transform: none;
  }
}
@media (max-width: 768px) {
  .cover .forkMe {
    display: none;
  }
  .content.on {
    margin-left: -1px !important;
  }
  .sidebar {
    background-color: #403e3e;
  }
  .navbar-toggle {
    transform: scale(1.1);
  }
}
.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.categories-box {
  max-width: 320px;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  border-left: 1px solid #eee;
}
.categories-box span {
  padding-left: 5px;
  color: #aaa;
  font-size: 14px;
}
.categories-box ol li,
.categories-box ul li {
  list-style: none;
  margin: 15px 0;
  padding-left: 15px;
  padding-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  word-wrap: break-word;
  border-bottom: 1px solid #eee;
}
.categories-box ol li:last-child,
.categories-box ul li:last-child {
  margin-bottom: 0;
  border-bottom: 0 solid #000;
}
.categories-box ol li i,
.categories-box ul li i {
  font-style: normal;
  margin-left: 10px;
  color: #007cfc;
}
.categories-box a {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  color: #403e3e;
}
.categories-box a:hover {
  opacity: 0.8;
}
.categories-box a:before {
  content: "\efde";
  font-family: remixicon;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}
.categories-box ol ol,
.categories-box ol ul,
.categories-box ul ol,
.categories-box ul ul {
  list-style: none;
  padding-left: 0;
  margin: 0 20px;
}
.categories-box ol ol li,
.categories-box ol ul li,
.categories-box ul ol li,
.categories-box ul ul li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  border: none;
  padding-bottom: 0;
}
.archive-list-count:before,
.category-list-count:before,
.tag-list-count:before {
  content: "(";
}
.archive-list-count:after,
.category-list-count:after,
.tag-list-count:after {
  content: ")";
}
.tag-list {
  list-style: none;
  padding-left: 0;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.tag-list > .tag-list-item {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 120%;
}
.tag-list > .tag-list-item:before {
  content: "\eec3";
  font-family: remixicon;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  color: #5d5a5a;
}
.tag-list > .tag-list-item .tag-list-link {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 1.5rem;
  border-radius: 15px;
  background-color: #5d5a5a;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
  transition: 0.2s;
}
.tag-list > .tag-list-item .tag-list-link:hover {
  transform: scale(1.1);
}
.cover-frame {
  position: relative;
  min-width: 100%;
  height: 100vh;
}
.cover-frame .bg-box {
  width: 100%;
  height: 100%;
}
.cover-frame .bg-box > img {
  display: block;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}
.cover-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}
.cover-inner h1 {
  font-size: 7rem;
  margin: 0;
  opacity: 0.95;
}
.cover-inner #subtitle-box,
.cover-inner h1 {
  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, Microsoft JhengHei,
    Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.cover-inner #subtitle-box {
  font-size: 3rem;
  margin: 0.5rem 0 1.5rem;
}
.cover-inner,
.cover-inner a {
  color: #fff;
  text-decoration: none;
}
.cover-inner img,
.cover-inner video {
  position: relative;
}
.cover-inner .cover-logo {
  width: 6rem;
}
.cover-learn-more {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 0;
  width: 100%;
}
.cover-learn-more a > i {
  font-size: 3rem;
  color: #fff;
  -webkit-animation: down 1s linear infinite;
  animation: down 1s linear infinite;
}
.cover-learn-more a > i:hover {
  color: #1e3e3f;
}
.float_btns {
  position: sticky;
  bottom: 10rem;
  right: 50px;
  z-index: 9996;
  text-align: center;
  transform: scale(1.2);
  width: 50px;
  float: right;
}
#mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9998;
  display: none;
}
.word_count {
  margin-top: 5px;
  color: #717f8c;
  padding-bottom: 1rem;
  border-bottom: 1px solid #efefef;
}
@media (max-width: 768px) {
  .cover-inner {
    transform: translate(-50%, -70%);
    width: 100%;
  }
  .cover-inner h1 {
    font-size: 4.5rem;
  }
  .cover-inner #subtitle-box {
    font-size: 2rem;
  }
  .float_btns {
    right: 10px;
  }
}
@-webkit-keyframes down {
  0% {
    margin-bottom: 0;
    opacity: 1;
  }
  to {
    margin-bottom: -15px;
    opacity: 0.1;
  }
}
@keyframes down {
  0% {
    margin-bottom: 0;
    opacity: 1;
  }
  to {
    margin-bottom: -15px;
    opacity: 0.1;
  }
}
.search-form-wrap {
  width: 100%;
  position: fixed;
  top: -100%;
  right: 8rem;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}
.search-form-wrap.on {
  top: 0;
  opacity: 1;
}
.local-search {
  position: relative;
  margin: 0 auto;
  padding: 1rem 3rem;
  background-color: rgba(64, 62, 62, 0.9);
  box-shadow: 0 1rem 3rem rgba(30, 62, 63, 0.05);
  max-height: 100vh;
  overflow-y: auto;
}
.local-search-input {
  font-size: 120%;
  border: 0;
  border-radius: 0.4rem;
  width: 100%;
  padding: 1rem 1.5rem;
  outline: none;
}
.local-search-input::-webkit-search-cancel-button,
.local-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.local-search-close {
  position: absolute;
  top: 1.85rem;
  right: 4.25rem;
  display: block;
  height: 2rem;
  width: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.local-search-close:before {
  font-size: 150%;
  content: "\eb52";
  font-family: remixicon;
}
.local-search-result {
  text-align: left;
}
.search-result-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.search-result-list li {
  padding: 1.5rem 0;
}
.search-result-list li:not(:last-child) {
  border-bottom: 0.1rem solid #999;
}
.search-result-list li .search-result-title {
  font-size: 1.6rem;
  font-weight: 700;
}
.search-result-list li .search-result {
  color: #fff;
  padding-top: 0.5rem;
  margin: 0;
  max-height: 12rem;
  overflow: hidden;
}
.search-result-list li em.search-keyword {
  font-style: normal;
  color: #0681d0;
}
.search-result-empty {
  padding: 2.6rem 0 0;
  color: #fff;
}
.search-result-empty p {
  text-align: center;
}
.article {
  padding: 5rem 0 3rem;
  font-size: 110%;
}
.article .sea-center {
  text-align: center;
  color: #000;
}
.article .sea-center:after {
  /* border-bottom: 2px dashed #cce5ff; 这里修改下划线颜色 */
  border-bottom: 2px dashed var(--main-6);
  content: "";
  width: 100px;
  display: block;
  margin: 0.2em auto 0;
  height: 2px;
}
.article-topping {
  display: inline-block;
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 4px;
  font-style: normal;
  font-size: 12px;
  background-color: #ea434a;
  color: #fff;
  height: 22px;
  line-height: 24px;
  transform: translateY(-8px);
}
.article-meta:after,
.article-meta:before {
  content: "";
  display: table;
  clear: both;
}
.article-date:before {
  content: "\eaf2";
  margin-right: 0.15rem;
  font-family: remixicon;
  opacity: 0.5;
}
.article-category {
  display: inline-block;
  margin-left: 1.5rem;
}
.article-category:before {
  content: "\efde";
  font-family: remixicon;
  margin-right: 0.15rem;
  opacity: 0.6;
}
.archive-article-header + .article-category {
  /* 分类页的文章标题 */
  margin-left: 0;
}
.article-entry {
  font-size: 103%;
  margin-top: 0.5rem;
  line-height: 1.6;
  color: #403e3e;
}
.article-entry:after,
.article-entry:before {
  content: "";
  display: table;
  clear: both;
}
.article-entry .pullquote {
  /* 引用 */
  text-align: left;
  width: 45%;
  margin: 0;
}
.article-entry .pullquote.left {
  /* 左引用 */
  margin-left: 0.5em;
  margin-right: 1em;
}
.article-entry .pullquote.right {
  /* 右引用 */
  margin-right: 0.5em;
  margin-left: 1em;
}
.article-entry .caption {
  /* 引用文字 */
  color: #999;
  display: block;
  font-size: 0.9em;
  margin-top: 0.5em;
  position: relative;
  text-align: center;
}
.article-entry .video-container {
  /* 视频 */
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}
.article-entry .video-container embed,
.article-entry .video-container iframe,
.article-entry .video-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.article-header {
  position: relative;
}
.article-header h1,
.article-header h2 {
  margin: 0;
}

.article-header .article-title {
  font-size: 34px;
  font-weight: 700;
  /* border-left: 4px solid #403e3e; 设置标题左边框 */
  /* todo 1212*/
  text-align: center;
  /*padding-bottom: 0.3em;   文章标题下方留白 */
  /* font-size: 2.2em;  */
  /* line-height: 1.2; */
  /* margin: 2.4em auto 1.2em; 顶部留白 */
  color: var(--main-10);
  /* todo 1219 */
}
/* todo 1225*/
.article-header .article-author,
.article-header .article-title {
  display: block; /* 块级元素 */
  margin-bottom: 3rem; 
  text-decoration: none; /* 去掉下划线 */
  /* color: #403e3e; */
  /* padding-left: 2rem; 左边留白 */
}
.article-header .article-author {
  /* 文章作者 */
  font-size: 20px; /* 文章作者字体大小 */
}

.article-footer:after,
.article-footer:before {
  content: "";
  display: table;
  clear: both;
}
.declare { /* 声明 */
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  color: #999;
  border-bottom: 1px solid #f6f6f6;
}
.declare ul,
.declare ul li {
  list-style: none;
}
.article-tag-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.article-tag-list:before {
  color: #5d5a5a;
  content: "\eec3";
  font-family: remixicon;
  margin-right: 0.5rem;
}
.article-tag-list .article-tag-list-item {
  display: inline-block;
  padding-right: 1rem;
}
.article-tag-list .article-tag-list-link {
  font-size: 11px;
  text-decoration: none;
  display: block;
  color: #fff;
  float: left;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  position: relative;
  border-radius: 9px;
  background-color: #5d5a5a;
}
.article-comment-link {
  float: right;
}
.article-comment-link:before {
  content: "\ee0d";
  font-family: remixicon;
  padding-right: 8px;
}
.article-share-link {
  cursor: pointer;
  float: right;
  margin-left: 20px;
}
.article-share-link:before {
  content: "\ef76";
  font-family: remixicon;
  padding-right: 6px;
}
.article-nav {
  position: relative;
  padding-top: 1.5rem;
  margin: 1rem 0 2rem;
  border-top: 0.1rem solid #eee;
}
.article-nav:after,
.article-nav:before {
  content: "";
  display: table;
  clear: both;
}
.article-nav-link {
  display: block;
  text-decoration: none;
}
.article-nav-link:first-child {
  float: left;
}
.article-nav-link:last-child {
  float: right;
  text-align: right;
}
.article-nav-caption {
  color: #5c6b72;
}
.article-nav-title {
  font-size: inherit;
}
.article-share-box {
  position: absolute;
  display: none;
  background: #fff;
  border-radius: 0.4rem;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  margin-left: -145px;
  overflow: hidden;
  z-index: 1;
}
.article-share-box.on {
  display: block;
}
.article-share-input {
  width: 100%;
  background: none;
  box-sizing: border-box;
  padding: 0 1.5rem;
  outline: none;
  border: none;
  border-bottom: 0.1rem solid #999;
  height: 3.6rem;
  line-height: 3.6rem;
}
.article-share-links:after,
.article-share-links:before {
  content: "";
  display: table;
  clear: both;
}
.article-share-facebook,
.article-share-google,
.article-share-pinterest,
.article-share-twitter {
  position: relative;
  display: block;
  float: left;
  width: 5rem;
  height: 3.6rem;
  color: #403e3e;
  text-align: center;
  text-decoration: none;
}
.article-share-facebook:before,
.article-share-google:before,
.article-share-pinterest:before,
.article-share-twitter:before {
  font-size: 20px;
  font-family: remixicon;
}
.article-share-facebook:hover,
.article-share-google:hover,
.article-share-pinterest:hover,
.article-share-twitter:hover {
  color: #fff;
}
.article-share-twitter:before {
  content: "\f068";
}
.article-share-twitter:hover {
  background: #00aced;
  text-shadow: 0 1px #008abe;
}
.article-share-facebook:before {
  content: "\ec30";
}
.article-share-facebook:hover {
  background: #3b5998;
  text-shadow: 0 1px #2f477a;
}
.article-share-pinterest:before {
  content: "\eea8";
}
.article-share-pinterest:hover {
  background: #cb2027;
  text-shadow: 0 1px #a21a1f;
}
.article-share-google:before {
  content: "\ed15";
}
.article-share-google:hover {
  background: #dd4b39;
  text-shadow: 0 1px #be3221;
}
.pswp__caption__center {
  text-align: center !important;
}
.tocbot {
  padding: 20px;
  position: absolute;
  right: -28rem;
  top: 14rem;
  font-size: 80%;
  opacity: 0.95;
  max-width: 255px;
  border-radius: 8px;
}
.tocbot > .toc-list {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 70vh;
}
.tocbot > .toc-list::-webkit-scrollbar {
  width: 4px;
}
.tocbot > .toc-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.tocbot > .toc-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.toc-list {
  list-style: none;
  margin-left: 0;
  padding-left: 1rem;
}
a.toc-link {
  height: 100%;
  color: #172d3e;
  text-decoration: none;
  font-size: 115%;
}
.is-collapsible {
  max-height: 1000px;
  overflow: hidden;
  transition: all;
}
.is-collapsed {
  max-height: 0;
}
.is-position-fixed {
  position: fixed !important;
  top: 0;
  right: 6rem;
  background-color: #fff;
  z-index: 996;
}
.toc-link:before {
  background-color: #cce5ff;
  content: " ";
  display: inline-block;
  height: inherit;
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 2px;
}
.is-active-link:before {
  background-color: #3d85c6;
}
.is-active-link {
  font-weight: 700;
}
.article-gallery {
  position: relative;
}
.article-gallery-photos {
  position: relative;
  overflow: hidden;
}
.article-gallery-img {
  display: none;
  max-width: 100%;
}
.article-gallery-img:first-child {
  display: block;
}
.article-gallery-img.loaded {
  position: absolute;
  display: block;
}
.article-gallery-img img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.article-albums {
  position: relative;
}
.article-albums-photos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.article-albums-photos:after,
.article-albums-photos:before {
  content: "";
  display: table;
  clear: both;
}
.article-albums-photos:after {
  content: "";
  flex-grow: 999999999;
}
.article-albums-photos .article-albums-item {
  position: relative;
  flex-grow: 1;
  margin: 0.5rem;
  overflow: hidden;
}
.article-albums-photos .article-albums-item img {
  -o-object-fit: cover;
  object-fit: cover;
  max-width: 100%;
  min-width: 100%;
  vertical-align: center;
}
.article-albums-photos .article-albums-item .article-albums-caption {
  display: block;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
}
@media (min-width: 576px) {
  .article-albums-item img {
    height: 32rem;
  }
  .article-albums-item .article-albums-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
    color: #fff;
    padding: 1rem;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease-in-out;
  }
  .article-albums-item:hover .article-albums-caption {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 768px) {
  .article-albums-item img {
    height: 20rem;
  }
}
.justified-gallery {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  background: #adb5bd;
  opacity: 1;
  margin: 0;
  padding: 0;
}
.justified-gallery > a > a > img,
.justified-gallery > a > a > svg,
.justified-gallery > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > a > img,
.justified-gallery > div > a > svg,
.justified-gallery > div > img,
.justified-gallery > div > svg,
.justified-gallery > figure > a > img,
.justified-gallery > figure > a > svg,
.justified-gallery > figure > img,
.justified-gallery > figure > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 1;
}
.justified-gallery > a > .caption,
.justified-gallery > div > .caption,
.justified-gallery > figure > .caption {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  color: #fff;
}
.justified-gallery > a > .caption.caption-visible,
.justified-gallery > div > .caption.caption-visible,
.justified-gallery > figure > .caption.caption-visible {
  display: initial;
}
.justified-gallery > .jg-entry-visible {
  opacity: 1;
  background: none;
}
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > a > svg,
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > svg {
  opacity: 1;
  transition: opacity;
}
.justified-gallery > .jg-filtered {
  display: none;
}
.justified-gallery > .jg-filtered > .spinner {
  position: absolute;
  bottom: 0;
  margin-left: -24px;
  padding: 10px 0;
  left: 50%;
  opacity: 1;
  overflow: initial;
}
.justified-gallery > .jg-filtered > span {
  display: inline-block;
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #000;
  border-radius: 6px;
}
.articles .article {
  padding: 4.5rem 0;
}
.articles .article:not(:last-child) {
  border-bottom: 0.1rem solid #ddd;
}
.articles .article-entry {
  margin-top: 1rem;
  padding: 0 2rem 2rem;
  border: 1px dashed #dfdede;
}
.articles .article-entry .article-more-link {
  display: inline-block;
  float: right;
  background-color: #403e3e;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none;
}
.articles .article-entry .article-gallery {
  margin-top: 1.5rem;
}
.articles .article-footer {
  margin-top: 1rem;
}
.archives-wrap {
  position: relative;
}
.archives-wrap:after,
.archives-wrap:before {
  content: "";
  display: table;
  clear: both;
}
.archives-wrap:first-child {
  margin-top: 3rem;
}
.archives-wrap:last-child {
  margin-bottom: 3rem;
}
.archive-year-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 6rem;
}
.archive-year-wrap .archive-year {
  position: relative;
  display: inline-block;
}
.archive-year-wrap .archive-year:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.15rem;
  background-color: #5c6b72;
  width: 100%;
}
.archives {
  margin-left: 6rem;
  border-left: 0.1rem dashed #999;
  padding-left: 3rem;
}
.archives:after,
.archives:before {
  content: "";
  display: table;
  clear: both;
}
.archive-article-inner {
  margin-bottom: 1.5rem;
}
.archive-article-header {
  display: table-row;
}
.archive-article-header > a,
.archive-article-header > h2 {
  display: table-cell;
}
.archive-article-header h2 {
  margin: 0;
  padding-left: 3rem;
}
.archive-article-header h2 .archive-article-title {
  text-decoration: none;
  font-size: 1.8rem;
}

.archive-article-footer {
  margin-top: 1.5rem;
}
.archive-article-date {
  position: relative;
  display: block;
}
.archive-article-date:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3.5rem;
  margin-top: -0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background-color: #999;
}
.page-type-title {
  margin: 0;
  padding: 3rem 0;
}
.page-nav {
  margin: 3rem auto 5rem;
  text-align: center;
  overflow: hidden;
  font-size: 115%;
}
.page-nav:after,
.page-nav:before {
  content: "";
  display: table;
  clear: both;
}
.page-nav a,
.page-nav span {
  padding: 1rem 1.5rem;
  line-height: 1;
}
.page-nav a {
  text-decoration: none;
}
.page-nav .prev {
  float: left;
}
.page-nav .next,
.page-nav .prev {
  border-radius: 6px;
  border: 1px solid;
}
.page-nav .next {
  float: right;
}
.page-nav .page-number {
  display: inline-block;
}
@media mq-mobile {
  .page-nav .page-number {
    display: none;
  }
}
.page-nav .current {
  font-weight: 700;
}
.page-nav .space {
  color: #999;
}
.footer {
  border-top: 2px solid #f6f6f6;
  padding: 3rem 0;
  font-size: 115%;
}
.footer .outer > ul {
  position: relative;
  display: flex;
  justify-content: center;
}
.footer .outer > ul li {
  display: inline-block;
  padding: 0.3rem 0;
}
.footer .outer > ul li a {
  text-decoration: none;
}
.footer .outer > ul li .division {
  display: inline;
  margin: 0 5px;
}
.footer .outer > ul li i {
  margin: 0 2px;
  font-style: normal;
  transform: translateY(2px);
}
.footer .outer > ul span {
  margin-right: 6px;
}
.heart_icon {
  display: inline-block;
  margin: 0 0.4rem;
  font-size: 1em;
  color: red;
  -webkit-animation: footerHeartBeat 1.2s infinite;
  animation: footerHeartBeat 1.2s infinite;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-name: footerHeartBeat;
  animation-name: footerHeartBeat;
}
@-webkit-keyframes footerHeartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
@keyframes footerHeartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.float-none {
  float: none !important;
}
.article-entry .highlight,
.article-entry pre {
  background: #2d2d2d;
  margin: 10px 0;
  padding: 10px;
  overflow: hidden;
  overflow-x: auto;
  color: #dedede;
  font-size: 0.9em;
  line-height: 1.5;
}
.article-entry .highlight::-webkit-scrollbar,
.article-entry pre::-webkit-scrollbar {
  height: 10px;
  width: 7px;
  background: rgba(0, 0, 0, 0.1);
}
.article-entry .highlight::-webkit-scrollbar:hover,
.article-entry pre::-webkit-scrollbar:hover {
  background: rgba(0, 0, 0, 0.2);
}
.article-entry .highlight::-webkit-scrollbar-thumb,
.article-entry pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
.article-entry .highlight::-webkit-scrollbar-thumb:hover,
.article-entry pre::-webkit-scrollbar-thumb:hover {
  -ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  -o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}
.article-entry .highlight::-webkit-scrollbar-track,
.article-entry pre::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
}
.article-entry .gist .gist-file .gist-data .line-numbers,
.article-entry .highlight .gutter pre,
.article-entry .highlight .gutter pre .line {
  color: grey;
}
.article-entry code,
.article-entry pre {
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
}
.article-entry code {
  background: #eee;
  color: #c7254e;
  padding: 0 0.3em;
  border: none;
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0;
  color: #dedede;
}
.article-entry .highlight {
  border-radius: 4px;
}
.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article-entry .highlight table {
  margin: 0;
  width: auto;
  border: none;
}
.article-entry .highlight td {
  border: none;
  padding: 0;
}
.article-entry .highlight figcaption {
  color: #8e908c;
  line-height: 1em;
  margin-bottom: 1em;
}
.article-entry .highlight figcaption:after,
.article-entry .highlight figcaption:before {
  content: "";
  display: table;
}
.article-entry .highlight figcaption:after {
  clear: both;
}
.article-entry .highlight figcaption a {
  float: right;
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.article-entry .highlight .gutter pre .line {
  text-shadow: none;
}
.article-entry .highlight .line {
  color: #dedede;
  min-height: 19px;
}
.article-entry .gist {
  margin: 0 -20px;
  border-color: #ddd;
  border-style: solid;
  border-width: 1px 0;
  background: #272822;
  padding: 15px 20px 15px 0;
}
.article-entry .gist .gist-file {
  border: none;
  font-family: Source Code Pro, Consolas, Monaco, Menlo, monospace;
  margin: 0;
}
.article-entry .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-entry .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
}
.article-entry .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-entry .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article-entry .gist .gist-file .gist-meta {
  background: #272822;
  color: #8e908c;
  font: 0.85em Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article-entry .gist .gist-file .gist-meta a {
  color: #258fb8;
  font-weight: 400;
}
.article-entry .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment {
  color: #9c9;
}
pre .class .params,
pre .function .keyword,
pre .keyword {
  color: #66d9ef;
}
pre .css .value,
pre .doctype,
pre .function,
pre .params,
pre .tag {
  color: #dedede;
}
pre .at_rule,
pre .at_rule .keyword,
pre .css ~ * .tag,
pre .preprocessor,
pre .preprocessor .keyword,
pre .title {
  color: #f92672;
}
pre .attribute,
pre .built_in,
pre .class,
pre .css ~ * .class,
pre .function .title {
  color: #a6e22e;
}
pre .string,
pre .value {
  color: #dedede;
}
pre .number {
  color: #c9c;
}
pre .css ~ * .id,
pre .id {
  color: #fd971f;
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 0.2rem;
  background-color: #3d85c6;
}
.pace-inactive {
  display: none;
}
@media (max-width: 768px) {
  .pace {
    display: none;
  }
}
.gitalk,
.markdown-body {
  font-size: 1.4rem !important;
}
.gt-container .gt-avatar.gt-comment-avatar img {
  border-radius: 50%;
}
.macbook {
  position: relative;
}
.macbook .macbook-screen {
  position: relative;
  background-color: transparent;
  border-radius: 1rem;
  border: 1.25rem solid #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15),
    inset 0 0 0.5rem rgba(0, 0, 0, 0.15);
}
.macbook .macbook-keyboard {
  display: none;
  position: relative;
  box-sizing: content-box;
  background-color: #fff;
  border-bottom: 0.75rem solid #f2f2f2;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  margin: -0.5rem -5rem 0;
  height: 0.5rem;
  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.15);
}
.macbook .macbook-keyboard:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f2f2f2, #fff, #f2f2f2);
  box-shadow: inset 0 0 0.1rem rgba(0, 0, 0, 0.05);
  width: 20%;
  height: 0.3rem;
  border-radius: 0.125rem;
}
@media (min-width: 768px) {
  .macbook .macbook-screen {
    border-width: 2rem 1.25rem 1.25rem;
  }
  .macbook .macbook-keyboard {
    display: block;
  }
}
.macbook-wrap {
  padding: 1rem 9rem;
}
.scrolling-wrap {
  min-height: 30rem;
  overflow: hidden;
}
.scrolling {
  position: absolute;
  top: 30rem;
  width: 100%;
  -webkit-animation: scrolling-animation 10s ease-in-out 1s infinite;
  animation: scrolling-animation 10s ease-in-out 1s infinite;
}
@-webkit-keyframes scrolling-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
    transform: translateY(0);
  }
  30% {
    transform: translateY(-35%);
  }
  60% {
    transform: translateY(-75%);
  }
  90% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes scrolling-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
    transform: translateY(0);
  }
  30% {
    transform: translateY(-35%);
  }
  60% {
    transform: translateY(-75%);
  }
  90% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-100%);
  }
}
#reward-out {
  position: relative;
  width: 100%;
}
#reward-btn {
  position: relative;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
  font-size: 18px;
  color: #fff;
  background: #403e3e;
  text-decoration: none;
  border-radius: 4px;
  margin: 60px 0 60px 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
#reward-btn:active,
#reward-btn:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
}
#reward {
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  margin: 60px 0;
  padding: 0 20px 20px;
  background-color: #dbedff;
  display: none;
}
#reward.ready {
  visibility: hidden;
  display: block;
  transform: translate(-50%, -100%);
  transition: 0.3s;
}
#reward.in {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%);
}
#reward .close {
  height: 28px;
  line-height: 28px;
  width: 28px;
  display: block;
  text-align: center;
  position: absolute;
  right: -12px;
  top: -10px;
  border-radius: 50%;
  background-color: #403e3e;
  cursor: pointer;
}
#reward .close i {
  font-size: 20px;
  color: #fff;
}
#reward .reward-p {
  color: #403e3e;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  text-shadow: 1px 1px 1px #70b6ff;
}
#reward .reward-p i {
  margin: 0 10px;
  transform: translateY(2px);
}
#reward .reward-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#reward .reward-box .reward-item {
  text-align: center;
  margin: 0 10px;
}
#reward .reward-type {
  font-size: 16px;
  display: block;
  color: #000;
  margin-top: 10px;
}
#reward .reward-img {
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 3px;
}
@media (max-width: 768px) {
  #reward {
    padding: 0 10px 10px;
  }
  #reward .reward-img {
    max-width: 10rem;
    max-height: 10rem;
    margin: 0 5px;
  }
}
.share-wrap {
  min-height: 20px;
  display: none;
  position: relative;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 250px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.share-wrap .arrow {
  position: absolute;
  z-index: -1;
  top: -3px;
  right: 20px;
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background-color: #f5f5f5;
}
.share-btn {
  float: right;
  position: relative;
}
.share-outer {
  display: flex;
  justify-content: flex-end;
  border: none;
  text-shadow: none;
  text-decoration: none;
  width: auto;
  color: #0681d0;
  height: 28px;
  line-height: 26px;
}
.share-outer i {
  font-size: 18px;
  margin-right: 5px;
  color: #36adf9;
}
.share-outer:hover {
  transform: none;
  cursor: pointer;
}
.share-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.share-icons a {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  margin: 3px;
  transition: 0.3s;
  text-align: center;
  color: #70b6ff;
  width: 28px;
  height: 28px;
  line-height: 26px;
  font-size: 13px;
}
.share-icons a i {
  font-size: 24px;
}
.share-icons a.weibo {
  color: #d81e06;
}
.share-icons a.weixin {
  color: #51c332;
}
.share-icons a.qq {
  color: #4cafe9;
}
.share-icons a.douban {
  color: #05b711;
}
.share-icons a.twitter {
  color: #00aced;
}
.share-icons a.facebook {
  color: #3b5998;
}
.share-icons a.google {
  color: #dd4b39;
}
.share-icons a:active {
  color: ocean;
}
.share-icons a:hover {
  transform: scale(1.2);
}
.wx-share-modal {
  position: fixed;
  top: 24%;
  left: 50%;
  z-index: 9999;
  padding: 20px;
  text-align: center;
  color: #727272;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translate(-50%, -200%);
}
.wx-share-modal p {
  margin-bottom: 10px;
}
.wx-share-modal.ready {
  visibility: 0;
  display: block;
  transform: translate(-50%, -100%);
  transition: 0.3s;
}
.wx-share-modal.in {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%);
}
.wx-share-modal .modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  line-height: 20px;
}
.wx-share-modal .modal-close i {
  font-size: 24px;
}
.wx-share-modal .modal-close:active,
.wx-share-modal .modal-close:hover {
  color: rgba(0, 0, 0, 0.4);
}
#share-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: none;
}
#friends_link .friends_li {
  list-style: none;
  float: left;
}
#friends_link .friends_li a {
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  text-decoration: none;
  background-color: rgba(6, 129, 208, 0.1);
  color: #000;
  border-radius: 6px;
  margin-right: 20px;
  margin-bottom: 20px;
}
#friends_link .friends_li a img {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
#friends_link .friends_li a i {
  font-size: 25px;
  width: 40px;
  height: 40px;
}
#friends_link .friends_li a:hover {
  background-color: rgba(6, 129, 208, 0.15);
}
.ads {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 2;
  transform: translateX(110%);
}
.ads li, /* ads 表示广告 */
.ads ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.ads img {
  display: block;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .ads {
    display: none;
  }
}
.navbar {
  position: relative;
  padding-top: 3rem;
  text-align: center;
}
.navbar .nav {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.navbar .nav .nav-item-link {
  display: block;
  padding: 1rem;
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.navbar .nav .nav-item-link:hover {
  opacity: 0.8;
  background-color: #403e3e;
}
.navbar .nav.nav-main {
  height: 60vh;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.navbar .nav.nav-main::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.navbar .nav.nav-main .nav-item-link i {
  font-size: 1rem;
  display: block;
  line-height: 1;
}
.navbar-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 2rem;
}
.logo {
  text-align: center;
  margin-bottom: 2rem;
}
.logo img {
  width: 4.2rem;
}
.todark,
.totop {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 3.2rem;
  background-color: #efefef;
  line-height: 3rem;
  opacity: 0.6;
  transition: opacity 1s ease;
}
.todark:hover,
.totop:hover {
  opacity: 1;
}
.totop {
  margin-bottom: 0.8rem;
}
.totop:hover > i {
  -webkit-animation: rocket 0.3s ease-in-out;
  animation: rocket 0.3s ease-in-out;
}
@-webkit-keyframes rocket {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-3.2rem);
    opacity: 0;
  }
  55% {
    transform: translateY(3.2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rocket {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-3.2rem);
    opacity: 0;
  }
  55% {
    transform: translateY(3.2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 60%;
  }
}