jmalcloud-view/src/styles/articles.scss

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .blur {
    background: rgba(255, 255, 255, .85) !important;
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    backdrop-filter: saturate(200%) blur(20px)
  }
}

.shadow {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
}

.shadow.floatable {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.shadow.floatable:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
}

@font-face {
  font-family: 'Varela Round';
  src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf);
  font-weight: 400;
  font-style: normal
}

* {
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 0
}

html {
  color: #444;
  width: 100%;
  height: 100%;
  font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent
}

body {
  background-color: #f4f4f4
}

body.modal-active {
  overflow: hidden
}

@media screen and (max-width:680px) {
  body.modal-active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }
}

::-moz-selection {
  background: rgba(33, 150, 243, .2)
}

::selection {
  background: rgba(33, 150, 243, .2)
}

h1 {
  font-size: 1.625rem
}

h2 {
  font-size: 1.375rem
}

h3 {
  font-size: 1.25rem
}

h4 {
  font-size: 1.125rem
}

h5 {
  font-size: 1rem
}

h6 {
  font-size: 1rem
}

h1, h2, h3, h4, h6 {
  font-weight: 400
}

a {
  color: #2196f3;
  cursor: pointer;
  text-decoration: none;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

a:hover {
  color: #ff5722
}

a:active, a:hover {
  outline: 0
}

pre {
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  -webkit-tab-size: 4
}

img {
  max-width: 100%
}

.clearfix {
  zoom: 1
}

.clearfix:after, .clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  clear: both
}

.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none
}

.inner {
  position: relative;
  width: 80%;
  max-width: 710px;
  margin: 0 auto
}

.vertical {
  display: table-cell;
  vertical-align: middle
}

ol, ul {
  padding-left: 0
}

li {
  list-style: none
}

ul.h-list {
  display: flex;
  align-items: center;
  height: 100%
}

ul.h-list > li {
  height: 100%;
  justify-content: center
}

article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section, summary {
  display: block
}

abbr[title] {
  border-bottom: 1px dotted
}

b, strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.6em
}

sub {
  bottom: -.3em
}

img {
  border: 0;
  background: 0 0;
  max-width: 100%
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  border: 0;
  border-radius: 1px;
  border-bottom: 1px solid rgba(68, 68, 68, .1)
}

pre {
  overflow: auto
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  overflow: visible
}

button, select {
  text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled], html input[disabled] {
  cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto
}

optgroup {
  font-weight: 700
}

table {
  border-collapse: collapse;
  margin-top: .7em;
  margin-bottom: .7em;
  width: 100%
}

table th {
  background-color: #efefef
}

table td, table th {
  padding: 4px 12px;
  border: 1px solid #eaeaea
}

table tr {
  background-color: #f9f9f9
}

table tbody > tr {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

table tbody > tr:hover {
  background-color: #efefef
}

overflow table {
  overflow: auto;
  display: block
}

overflow table tr {
  word-break: keep-all
}

td, th {
  padding: 0
}

.highlight {
  position: relative;
  width: 100%;
  margin: 1rem 0;
  display: block;
  background: #f6f6f6;
  font-size: .8125rem;
  font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.highlight figcaption {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  padding: 4px 8px 4px 8px;
  background-color: #eaeaea
}

.highlight table {
  overflow: auto;
  display: block;
  margin: 0;
  background-color: transparent;
  border: none
}

.highlight table td, .highlight table th {
  padding: 0;
  border: none
}

.highlight table tr {
  background-color: transparent
}

.highlight table tr:hover {
  background-color: transparent
}

.highlight table .gutter {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  padding: 0 12px;
  text-align: right;
  border-width: 0;
  margin-left: 0;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: #eaeaea
}

.highlight table .gutter pre {
  color: rgba(68, 68, 68, .65)
}

.highlight table pre {
  background: 0 0;
  margin: 0;
  padding: 0;
  border: none
}

.highlight table .code {
  padding: 16px;
  vertical-align: top;
  background-color: transparent
}

.highlight table .code:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(68, 68, 68, .65);
  font-size: .75rem;
  padding: 4px 8px
}

.highlight.html .code:before {
  content: "HTML"
}

.highlight.js .code:before {
  content: "JS"
}

.highlight.bash .code:before {
  content: "bash"
}

.highlight.shell .code:before {
  content: "shell"
}

.highlight.css .code:before {
  content: "css"
}

.highlight.less .code:before {
  content: "less"
}

.highlight.stylus .code:before {
  content: "stylus"
}

.highlight.swift .code:before {
  content: "Swift"
}

.highlight.objc .code:before {
  content: "ObjC"
}

.highlight.c .code:before {
  content: "C"
}

.highlight.cpp .code:before {
  content: "C++"
}

.highlight.java .code:before {
  content: "Java"
}

.highlight.python .code:before {
  content: "Python"
}

.highlight.yaml .code:before {
  content: "YAML"
}

.highlight.plain .code:before {
  content: ""
}

pre .line {
  color: rgba(68, 68, 68, .9)
}

pre .marked {
  background-color: rgba(254, 213, 66, .4);
  padding: 2px 8px 2px 0;
  border-radius: 2px;
  width: 100%
}

pre .title {
  color: #3f51b5
}

pre .comment {
  color: rgba(68, 158, 72, .7)
}

pre .attr, pre .javascript .function, pre .keyword {
  color: #9c27b0
}

pre .built_in, pre .tag .name, pre .type {
  color: #4ba7ee
}

pre .attribute, pre .css .class, pre .css .id, pre .css .pseudo, pre .html .doctype,
pre .regexp, pre .ruby .constant, pre .variable, pre .xml .doctype, pre .xml .pi,
pre .xml .tag .title {
  color: #fd8607
}

pre .constant, pre .literal, pre .number, pre .params, pre .preprocessor {
  color: #fd8607
}

pre .class, pre .css .rules .attribute, pre .ruby .class .title {
  color: #ff9800
}

pre .string {
  color: #449e48
}

pre .header, pre .inheritance, pre .ruby .symbol, pre .value, pre .xml .cdata {
  color: #4caf50
}

pre .css .hexcolor {
  color: #6cc
}

pre .coffeescript .title, pre .function, pre .javascript .title, pre .perl .sub,
pre .python .decorator, pre .python .title, pre .ruby .function .title,
pre .ruby .title .keyword {
  color: #69c
}

.html .tag .name {
  color: #ee2b29
}

.alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  text-align: center;
  padding: 30px 36px 29px 36px;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  font-weight: 700;
  font-size: 1.125rem
}

.alert.alert-success {
  color: #247830;
  background: #daf4de
}

.alert.alert-info {
  color: #028baf;
  background-color: #e4f9ff
}

.alert.alert-warning {
  color: #c48700;
  background-color: #fffdf7
}

.alert.alert-danger {
  color: #ef0b01;
  background-color: #fff
}

.highlight {
  position: relative
}

.btn-copy {
  display: inline-block;
  cursor: pointer;
  border: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  font-size: calc(.8125rem - 1px);
  font-weight: 700;
  padding: 4px 8px;
  color: rgba(68, 68, 68, .65);
  background: #fff;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.btn-copy > i {
  margin-right: 4px
}

.btn-copy:hover {
  color: #ff5722;
  background: #ffeee8
}

.highlight:hover .btn-copy {
  opacity: 1
}

.article-entry div.info {
  background-color: rgba(27, 205, 252, .2);
  border-left: 4px solid #1bcdfc;
  border-radius: 4px
}

.article-entry div.success {
  background-color: rgba(61, 197, 80, .2);
  border-left: 4px solid #3dc550;
  border-radius: 4px
}

.article-entry div.warning {
  background-color: rgba(255, 189, 43, .2);
  border-left: 4px solid #ffbd2b;
  border-radius: 4px
}

.article-entry div.danger {
  background-color: rgba(254, 95, 88, .2);
  border-left: 4px solid #fe5f58;
  border-radius: 4px
}

fancybox {
  display: flex;
  justify-content: center;
  align-items: center
}

fancybox a {
  margin: 0 1px;
  padding: 0
}

@media screen and (max-width:500px) {
  fancybox a {
    margin: 0 .5px
  }
}

fancybox a > img {
  margin: 0
}

.l_main #comments {
  position: relative
}

.l_main #comments #valine_container img {
  display: inline
}

.l_main #comments #valine_container .vwrap {
  border-radius: 12px;
  border-style: dashed;
  border: 1px dashed rgba(68, 68, 68, .3);
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main #comments #valine_container .vwrap:hover {
  border: 1px dashed #2196f3
}

.l_main #comments #valine_container .vwrap .vheader .vinput {
  border-radius: 0;
  border-bottom: 1px dashed rgba(68, 68, 68, .3)
}

.l_main #comments #valine_container .vwrap .vheader .vinput:hover {
  border-bottom: 1px dashed #2196f3
}

.l_main #comments #valine_container .vwrap .vheader .vinput:focus {
  border-bottom: 1px solid #2196f3
}

.l_main #comments #valine_container .vwrap .vedit .vctrl span {
  color: #2196f3;
  padding: 0;
  margin: 10px
}

.l_main #comments #valine_container button {
  border: none;
  padding: 8px 2rem 7px 2rem;
  border-radius: 4px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main #comments #valine_container button:hover {
  color: #ff5722;
  background: #ffeee8
}

.l_main #comments #valine_container blockquote {
  padding: 16px;
  border-left: 2px solid #2196f3;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main #comments #valine_container blockquote p {
  text-align: left;
  word-wrap: normal
}

.l_main #comments #valine_container pre code {
  border: none
}

.l_main #comments #valine_container .vemoji-btn, .l_main #comments #valine_container .vpreview-btn,
.l_main #comments #valine_container a {
  color: #2196f3;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main #comments #valine_container .vemoji-btn:hover, .l_main #comments #valine_container .vpreview-btn:hover,
.l_main #comments #valine_container a:hover {
  color: #ff5722;
  text-decoration: underline
}

.l_main #comments #valine_container div.info {
  box-shadow: none
}

.l_main #comments #valine_container div.info > div.power, .l_main #comments #valine_container div.info > div.power a {
  font-size: .75rem
}

.l_main #comments #valine_container .vhead span.vnick {
  color: rgba(68, 68, 68, .65)
}

.l_main #comments #valine_container .vhead a.vnick {
  color: #ff9800;
  font-weight: 700
}

.l_main #comments #valine_container .vhead a.vnick:hover {
  color: #ff5722;
  text-decoration: underline
}

.l_main #comments #valine_container .vhead .vsys {
  margin: 2px;
  padding: 1px 8px;
  background-color: rgba(68, 68, 68, .1)
}

.l_main #comments #valine_container .vcard .vquote {
  border-left: none
}

.l_main #comments #valine_container .vcard .vh {
  border-bottom: 1px dashed rgba(68, 68, 68, .1)
}

.l_main #comments #valine_container .vmeta .vat {
  font-weight: 700;
  color: #2196f3;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main #comments #valine_container .vmeta .vat:hover {
  color: #ff5722;
  text-decoration: underline
}

.l_main #comments #valine_container .vmeta .vat:active {
  color: #ff5621
}

.l_main #comments #valine_container .vinput {
  color: #444
}

.l_main #comments #valine_container p {
  color: #444
}

.l_main #comments .vemojis {
  justify-content: space-between
}

.l_main #comments .vemojis i {
  width: auto;
  height: 36px;
  padding: 0;
  margin: 8px 8px 0 8px
}

.l_main #comments .vemojis i #emoji {
  height: 24px;
  margin-top: 6px;
  background: 0 0
}

.l_main #comments p #emoji {
  display: inline;
  max-height: 28px;
  background: 0 0
}

#archive-page {
  margin-bottom: 32px
}

#archive-page .archive .archive-year {
  margin-top: 4em;
  margin-bottom: 1em
}

#archive-page .archive .archive-year:first-child {
  margin-top: 0;
  padding-top: 0
}

#archive-page .archive .archive-year h2 {
  margin-top: 1em
}

#archive-page .archive .archive-post a {
  color: #444;
  width: 100%;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  background: 0 0;
  border-left: 2px solid transparent;
  border-radius: 2px;
  vertical-align: middle;
  text-decoration: none;
  font-size: .875rem;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

#archive-page .archive .archive-post a.child {
  padding-left: 32px
}

#archive-page .archive .archive-post a:hover {
  background: #e8f4fd;
  border-left: 2px solid #2196f3
}

#archive-page .archive .archive-post a:active {
  border-left: 4px solid #2196f3
}

#archive-page .archive .archive-post time {
  flex: none;
  vertical-align: middle;
  padding: .4em;
  padding-left: 2em;
  color: rgba(68, 68, 68, .65)
}

@media screen and (max-width:500px) {
  #archive-page .archive .archive-post time {
    padding-left: 1em
  }
}

#archive-page .archive .archive-post .title {
  flex: auto;
  padding: .4em
}

#archive-page .archive .archive-post .title i {
  color: #ff5722
}

#archive-page .archive .archive-post .title i.red {
  color: #fe5f58
}

#archive-page .archive .archive-post .title i.green {
  color: #3dc550
}

#archive-page .archive .archive-post .title i.yellow {
  color: #ffbd2b
}

#archive-page .archive .archive-post .title i.blue {
  color: #1bcdfc
}

#archive-page .archive .archive-post .title i.theme {
  color: #2196f3
}

#archive-page .archive .archive-post .title i.accent {
  color: #ff5722
}

#archive-page .archive .archive-post .title i.orange {
  color: #ff5722
}

#archive-page .archive .all-categories time {
  color: #444
}

#archive-page .archive .all-categories .title {
  color: rgba(68, 68, 68, .65)
}

#archive-page .archive .all-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-items: baseline;
  word-spacing: 8px;
  text-align: center
}

#archive-page .archive .all-tags > a {
  color: rgba(68, 68, 68, .65);
  margin-right: 16px
}

#archive-page .archive .all-tags > a.active, #archive-page .archive .all-tags > a:active,
#archive-page .archive .all-tags > a:hover {
  color: #ff5722 !important
}

.article {
  color: #555;
  word-wrap: break-word
}

.article img {
  position: relative;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

@media screen and (max-width:500px) {
  .article img {
    box-shadow: none
  }
}

.article div > img, .article p > img {
  display: block;
  margin: auto;
  border-radius: 4px
}

@media screen and (max-width:500px) {
  .article div > img, .article p > img {
    border-radius: 2px
  }
}

.article span img {
  display: inline;
  margin: auto
}

.article center, .article center p {
  text-align: center
}

.article .aplayer {
  margin: 0;
  display: inline-block;
  width: 400px;
  max-width: 100%;
  border-radius: 4px;
  color: #666
}

.article div.small-img img, .article p.small-img img {
  width: auto;
  max-width: 100%;
  margin: 0;
  box-shadow: none
}

.article s {
  color: rgba(85, 85, 85, .75)
}

.article u {
  color: #ff5722
}

.article p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: justify;
  max-width: 100%;
  overflow: auto
}

.article p.has-jax {
  font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
  background: rgba(255, 255, 255, 0);
  padding: 16px 8px;
  border-radius: 4px
}

.article p.has-jax .mjx-chtml.MJXc-display {
  margin: 0
}

.article ol, .article ul {
  font-size: .9375rem;
  list-style: initial;
  padding-left: 8px;
  margin-left: 16px;
  margin-top: 1rem;
  margin-bottom: 1rem
}

.article ol ol, .article ol ul, .article ul ol, .article ul ul {
  margin-top: 0;
  margin-bottom: 0
}

.article ol.task-list, .article ul.task-list {
  padding-left: 0;
  margin-left: 4px
}

.article ol.task-list li, .article ul.task-list li {
  list-style: none
}

.article ol.task-list li input, .article ul.task-list li input {
  margin-right: 4px
}

.article ul > li {
  list-style: initial
}

.article ol > li {
  list-style: decimal
}

.article a {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.article a:before {
  display: none
}

.article a:hover {
  color: #ff5722;
  text-decoration: underline
}

.article a:active {
  color: #d93400
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  position: relative
}

.article h1:first-child, .article h2:first-child, .article h3:first-child,
.article h4:first-child, .article h5:first-child, .article h6:first-child {
  margin-top: 0;
  padding-top: 0
}

.article h1.title, .article h2.title, .article h3.title, .article h4.title,
.article h5.title, .article h6.title {
  left: 0
}

.article h1.title:before, .article h2.title:before, .article h3.title:before,
.article h4.title:before, .article h5.title:before, .article h6.title:before {
  content: none
}

.article h1, .article h2 {
  margin-top: 2.5em;
  padding-bottom: .2em;
  border-bottom: 1px solid rgba(68, 68, 68, .1)
}

.article h1 {
  text-align: left;
  color: #444
}

.article h2 {
  text-align: left;
  color: #444
}

.article h3 {
  margin-top: 1.5em;
  text-align: left;
  color: #2196f3
}

.article h4 {
  padding-top: 1em;
  text-align: left;
  margin-bottom: 1rem;
  color: #444
}

.article h5 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #444
}

.article h6 {
  margin-bottom: 1rem;
  color: #444
}

.article .subtitle h6 {
  color: rgba(68, 68, 68, .9)
}

.article figure figcaption span {
  display: inline-block;
  margin-right: 5px
}

.article blockquote {
  background: #e8f4fd;
  border-left: 4px solid #2196f3;
  border-radius: 4px
}

.article blockquote, .article div.danger, .article div.info, .article div.success,
.article div.warning {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  position: relative;
  width: 100%;
  padding: .7em 1.2em;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.article blockquote, .article blockquote ol, .article blockquote p,
.article blockquote ul, .article div.danger, .article div.danger ol,
.article div.danger p, .article div.danger ul, .article div.info, .article div.info ol,
.article div.info p, .article div.info ul, .article div.success, .article div.success ol,
.article div.success p, .article div.success ul, .article div.warning,
.article div.warning ol, .article div.warning p, .article div.warning ul {
  text-align: left;
  word-wrap: normal;
  font-size: .9375rem;
  margin-top: .5rem;
  margin-bottom: .5rem
}

.article blockquote footer, .article div.danger footer, .article div.info footer,
.article div.success footer, .article div.warning footer {
  padding: 0;
  text-align: justify;
  color: inherit;
  font-style: italic;
  margin: .5rem 0
}

.article blockquote footer cite, .article div.danger footer cite, .article div.info footer cite,
.article div.success footer cite, .article div.warning footer cite {
  color: rgba(68, 68, 68, .65);
  margin-left: 1em
}

.article blockquote footer cite::before, .article div.danger footer cite::before,
.article div.info footer cite::before, .article div.success footer cite::before,
.article div.warning footer cite::before {
  content: '----';
  padding: 0 .3em
}

.article blockquote.pullquote.right, .article div.danger.pullquote.right,
.article div.info.pullquote.right, .article div.success.pullquote.right,
.article div.warning.pullquote.right {
  border-left: none;
  border-right: 4px solid #2196f3
}

.article blockquote.pullquote.right p, .article div.danger.pullquote.right p,
.article div.info.pullquote.right p, .article div.success.pullquote.right p,
.article div.warning.pullquote.right p {
  text-align: right
}

.article pre {
  display: block;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: auto;
  background: #f6f6f6;
  font-size: .8125rem;
  font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
  border: 1px solid #ddd;
  padding: 16px
}

.article div > pre {
  border-radius: 4px
}

.article div > pre > code {
  padding: 0;
  margin: 0;
  background: 0 0;
  color: rgba(68, 68, 68, .9)
}

.article code {
  font-family: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, Ubuntu;
  padding: 4px 2px 2px 2px;
  margin: 0;
  vertical-align: middle;
  border-radius: 2px;
  line-height: 1.45;
  font-size: .8125rem;
  color: #4f5a60;
  background: #f7f8f8
}

@media screen and (max-width:500px) {
  .article ol, .article ul {
    font-size: .875rem
  }

  .article figure {
    font-size: 13px;
    line-height: 1.6em
  }
}

.article .widget {
  background: 0 0;
  margin: 1rem 0;
  box-shadow: none;
  border-radius: 4px;
  cursor: auto;
  background: #f4f4f4;
  padding: 8px 0;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.article .widget:hover {
  box-shadow: none
}

.article .widget:active {
  box-shadow: none
}

.article .widget header {
  padding: 4px .6em;
  padding-bottom: 0;
  color: rgba(68, 68, 68, .85)
}

.article .widget.copyright, .article .widget.qrcode {
  background: 0 0;
  padding: 0
}

.article .widget.copyright header, .article .widget.qrcode header {
  display: none
}

.article .widget.copyright .content, .article .widget.qrcode .content {
  padding: 0
}

.article .widget .content {
  padding: 0 .6em;
  margin: 0
}

.article .widget .content ul.entry, .article .widget .content ul.popular-posts {
  padding-left: 9px;
  margin-left: 16px
}

.article .widget .content ul.entry a, .article .widget .content ul.popular-posts a {
  display: inline;
  border-left: none;
  padding: 0;
  padding-left: 4px;
  color: #2196f3;
  font-weight: 400
}

.article .widget .content ul.entry a.active, .article .widget .content ul.entry a:active,
.article .widget .content ul.entry a:hover, .article .widget .content ul.popular-posts a.active,
.article .widget .content ul.popular-posts a:active, .article .widget .content ul.popular-posts a:hover {
  border-left: none;
  background: 0 0;
  color: #ff5722
}

.article .widget.qrcode > .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 4px
}

.article .widget.qrcode > .content > fancybox, .article .widget.qrcode > .content > img {
  margin: 0 8px
}

.article .widget.qrcode > .content img {
  margin-bottom: 4px
}

.article .widget-blur {
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}

article .readmore > a {
  font-size: .875rem
}

article .readmore > a:hover {
  text-decoration: none
}

.cover-wrapper .cover {
  top: 0;
  left: 0;
  max-width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  color: #555;
  padding: 16px
}

.cover-wrapper .cover .white {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.cover-wrapper .cover .cover-body div.b {
  margin-top: 8vh;
  margin-bottom: 8vh
}

.cover-wrapper .cover.half {
  margin-bottom: -100px;
  max-height: 640px;
  min-height: 400px;
  height: calc(36vh - 64px + 200px)
}

.cover-wrapper .cover.half .cover-body div.b {
  margin-top: 10%
}

@media screen and (max-width:500px) {
  .cover-wrapper .cover.half .cover-body div.a {
    margin-top: 4vh
  }
}

.cover-wrapper .cover .scroll-down {
  width: 100%;
  height: 64px;
  position: absolute;
  bottom: 0;
  text-align: center;
  cursor: pointer
}

.cover-wrapper .cover .scroll-down .scroll-down-effects {
  color: #fff;
  font-size: 24px;
  line-height: 64px;
  position: absolute;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  -webkit-animation: scroll-down-effect 1.5s infinite;
  animation: scroll-down-effect 1.5s infinite
}

@-webkit-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1
  }

  50% {
    top: -16px;
    opacity: .4
  }

  100% {
    top: 0;
    opacity: 1
  }
}

@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1
  }

  50% {
    top: -16px;
    opacity: .4
  }

  100% {
    top: 0;
    opacity: 1
  }
}

.cover-wrapper .cover .cover-body {
  margin: auto
}

.cover-wrapper .cover .cover-body, .cover-wrapper .cover .cover-body div.a,
.cover-wrapper .cover .cover-body div.b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%
}

.cover-wrapper .cover .cover-body .title {
  font-size: 3rem;
  line-height: 1.2
}

.cover-wrapper .cover .cover-body .subtitle {
  font-size: .875rem
}

.cover-wrapper .cover .cover-body .logo {
  max-height: 100px;
  max-width: calc(100% - 4 * 16px)
}

@media screen and (min-height:1024px) {
  .cover-wrapper .cover .cover-body .title {
    font-size: 3.6rem
  }

  .cover-wrapper .cover .cover-body .subtitle {
    font-size: 1.05rem
  }

  .cover-wrapper .cover .cover-body .logo {
    max-height: 150px
  }
}

.cover-wrapper .cover .cover-body .m_search {
  position: relative;
  max-width: calc(100% - 16px);
  width: 320px;
  vertical-align: middle
}

.cover-wrapper .cover .cover-body .m_search .form {
  position: relative;
  display: block;
  width: 100%
}

.cover-wrapper .cover .cover-body .m_search .icon, .cover-wrapper .cover .cover-body .m_search .input {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.cover-wrapper .cover .cover-body .m_search .icon {
  position: absolute;
  display: block;
  line-height: 2.5rem;
  width: 32px;
  top: 0;
  left: 1rem;
  color: rgba(85, 85, 85, .75)
}

.cover-wrapper .cover .cover-body .m_search .input {
  display: block;
  height: 2.5rem;
  width: 100%;
  box-shadow: none;
  box-sizing: border-box;
  font-size: .875rem;
  -webkit-appearance: none;
  padding-left: 36px;
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: none;
  color: #444
}

@media screen and (max-width:500px) {
  .cover-wrapper .cover .cover-body .m_search .input {
    padding-left: 36px
  }
}

.cover-wrapper .cover .cover-body .m_search .input:hover {
  background: rgba(255, 255, 255, .8)
}

.cover-wrapper .cover .cover-body .m_search .input:focus {
  background: #fff
}

.cover-wrapper .cover .cover-body .menu {
  margin-top: 16px
}

.cover-wrapper .cover .cover-body .menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center
}

.cover-wrapper .cover .cover-body .menu ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  height: auto
}

.cover-wrapper .cover .cover-body .menu ul > li > a {
  font-size: .875rem;
  padding: 2px;
  margin: 4px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  color: #555;
  border-bottom: 2px solid transparent
}

.cover-wrapper .cover .cover-body .menu ul > li > a.active, .cover-wrapper .cover .cover-body .menu ul > li > a:active,
.cover-wrapper .cover .cover-body .menu ul > li > a:hover {
  color: #2196f3;
  border-bottom: 2px solid #2196f3
}

.cover-wrapper .cover .cover-body .menu ul > li > a.white {
  color: rgba(255, 255, 255, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.cover-wrapper .cover .cover-body .menu ul > li > a.white.active, .cover-wrapper .cover .cover-body .menu ul > li > a.white:active,
.cover-wrapper .cover .cover-body .menu ul > li > a.white:hover {
  color: #fff;
  border-bottom: 2px solid #fff
}

.cover-wrapper .cover .cover-body .switcher > li a:hover {
  background: rgba(68, 68, 68, .15)
}

footer {
  position: relative;
  bottom: 10px;
  padding: 10px 10px 10px 10px;
  width: 100%;
  color: rgba(68, 68, 68, .65);
  margin: 0 auto;
  overflow: hidden;
  text-align: center
}

footer, footer p {
  font-size: .8125rem
}

footer.white, footer.white a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

footer .codename {
  text-decoration: underline
}

footer .social-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 4px 8px;
  font-size: 16px
}

footer a {
  color: rgba(68, 68, 68, .65);
  padding: 0;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

footer a.social {
  position: relative;
  display: inline-block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 100px
}

footer a.social:hover {
  background: #e8f4fd;
  color: #2196f3
}

footer .copyright {
  margin-top: 16px;
  font-size: .75rem
}

@media screen and (max-width:768px) {
  footer {
    justify-content: center
  }
}

.article.typo.l_friends .friends-group .friend-content {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
  border-radius: 12px;
  align-items: flex-start;
  line-height: 1.3
}

.article.typo.l_friends .friends-group .friend-content .friend-card {
  display: flex;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  padding: 8px 0;
  margin: 8px;
  margin-top: calc(2.25 * 16px + 32px);
  color: rgba(68, 68, 68, .65);
  background: #f4f4f4;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  width: calc(100% / 4 - 16px)
}

@media screen and (max-width:1024px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: calc(100% / 4 - 16px)
  }
}

@media screen and (max-width:768px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: calc(100% / 2 - 16px)
  }
}

.article.typo.l_friends .friends-group .friend-content .friend-card:hover {
  text-decoration: none
}

.article.typo.l_friends .friends-group .friend-content .friend-card:hover .friend-left .avatar {
  transform: scale(1.2) rotate(12deg);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-left {
  display: flex;
  align-self: center
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-left .avatar {
  width: 64px;
  height: 64px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  margin: 16px 8px 4px 8px;
  margin-top: calc(-1.25 * 16px - 32px);
  border-radius: 100%;
  border: 2px solid #fff;
  background: #fff
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right {
  margin: 4px 8px;
  display: flex;
  flex-direction: column;
  text-align: center
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p {
  text-align: center
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right .friend-tags-wrapper {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  margin-left: -2px;
  word-break: break-all
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p {
  margin: 0
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p.friend-name {
  font-size: .8125rem;
  padding-top: 4px;
  font-weight: 700
}

.article.typo.l_friends .friends-group .friend-content .friend-card .friend-right p.tags {
  font-size: .75rem;
  display: inline;
  background: 0 0;
  word-wrap: break-word;
  padding-right: 4px
}

.l_body {
  position: relative;
  margin: 16px 16px 0 16px;
}

.l_body.nocover {
  margin-top: 64px
}

@media screen and (max-width:425px) {
  //.l_body {
  //  margin: 80px 0 16px
  //}
  //
  //.l_body.nocover {
  //  margin-top: 48px
  //}
}

.l_body .s-top {
  transition: all .6s ease;
  -moz-transition: all .6s ease;
  -webkit-transition: all .6s ease;
  -o-transition: all .6s ease;
  z-index: 9;
  position: fixed;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 100%;
  bottom: 32px;
  right: 32px;
  transform: translateY(100px) scale(0);
  transform-origin: bottom;
  color: #444
}

@media screen and (max-width:768px) {
  .l_body .s-top {
    right: 16px
  }
}

.l_body .s-top.show {
  transform: translateY(0) scale(1)
}

.l_body .s-top.show.hl {
  background: #2196f3;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
}

@media screen and (min-width:768px) {
  .l_body .s-top:hover {
    transform: scale(1.2);
    border-radius: 25%;
    background: #2196f3;
    color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
  }

  .l_body .s-top:hover.hl {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
  }
}

.l_main {
  width: calc(100% - 1 * 285px);
  padding-right: 16px;
  float: left
}

@media screen and (max-width:1440px) {
  .l_main {
    width: calc(100% - 1 * 240px)
  }
}

@media screen and (max-width:768px) {
  .l_main {
    width: 100%
  }
}

.l_main.no_sidebar {
  width: 100%;
  padding-right: 0;
  max-width: 795px;
  margin: auto
}

.l_main.no_sidebar ~ .l_side {
  display: none
}

.l_main .post-list {
  position: relative;
  margin: 16px auto;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px
}

.l_main .post-list.multiple-columns {
  -webkit-columns: 320px;
  -moz-columns: 320px;
  columns: 320px
}

.l_main ul.popular-posts h3 {
  padding: 0;
  margin: 0;
  font-size: 1rem
}

.l_main .post-wrapper {
  column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid-column
}

.l_main .post-wrapper {
  margin-bottom: 16px
}

.l_main .post-wrapper .post .meta {
  margin-bottom: 16px
}

.l_main .post-wrapper .post .meta .title {
  font-size: 1.375rem
}

.l_main .post-wrapper .post .meta .title a {
  font-size: 1.375rem
}

@media screen and (max-width:500px) {
  .l_main .post-wrapper .post .meta {
    margin-bottom: 16px
  }

  .l_main .post-wrapper .post .meta .title {
    font-size: 1.25rem
  }
}

@media screen and (max-width:500px) and (max-width:500px) {
  .l_main .post-wrapper .post {
    padding: 24px 16px
  }
}

.l_main .widget.grid .content .grid.fixed a {
  width: calc(100% / 8 - 0 * 16px)
}

@media screen and (max-width:1024px) {
  .l_main .widget.grid .content .grid.fixed a {
    width: calc(100% / 7 - 0 * 16px)
  }
}

@media screen and (max-width:768px) {
  .l_main .widget.grid .content .grid.fixed a {
    width: calc(100% / 6 - 0 * 16px)
  }
}

@media screen and (max-width:500px) {
  .l_main .widget.grid .content .grid.fixed a {
    width: calc(100% / 5 - 0 * 16px)
  }
}

@media screen and (max-width:425px) {
  .l_main .widget.grid .content .grid.fixed a {
    width: calc(100% / 4 - 0 * 16px)
  }
}

@media screen and (max-width:375px) {
  .l_main .widget.grid .content .grid.fixed a {
    width: calc(100% / 3 - 0 * 16px)
  }
}

.l_main .post {
  position: relative;
  margin: 16px auto;
  padding: 24px;
  border-radius: 12px
}

@media screen and (max-width:425px) {
  //.l_main .post {
  //  border-radius: 0
  //}
}

.l_main .post h1 {
  font-weight: 400;
  font-size: 1.625rem
}

.l_main .post .meta {
  color: rgba(68, 68, 68, .65)
}

.l_main .post .meta#header-meta {
  margin-top: 0;
  margin-bottom: 16px
}

.l_main .post .meta#footer-meta {
  margin-top: 32px;
  margin-bottom: 8px
}

.l_main .post .meta .aplayer, .l_main .post .meta .thumbnail {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  width: 65px;
  height: 65px;
  border-radius: 100%;
  float: right;
  margin: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
}

.l_main .post .meta .aplayer:hover, .l_main .post .meta .thumbnail:hover {
  border-radius: 25%;
  transform: scale(1.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
}

@media screen and (max-width:500px) {
  .l_main .post .meta .aplayer:hover, .l_main .post .meta .thumbnail:hover {
    border-radius: 100%;
    transform: scale(1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
  }
}

.l_main .post .meta .thumbnail {
  width: auto;
  border-radius: 4px;
  box-shadow: none;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main .post .meta .thumbnail:hover {
  border-radius: 4px;
  transform: scale(1.1) rotate(4deg);
  box-shadow: none
}

.l_main .post .meta .title {
  transition: all .1s ease;
  -moz-transition: all .1s ease;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  margin: 0
}

.l_main .post .meta .title a {
  display: inline;
  font-weight: 400;
  color: #444;
  text-decoration: none
}

.l_main .post .meta .title a:hover {
  color: #ff5722
}

.l_main .post .meta .new-meta-box {
  transition: all .1s ease;
  -moz-transition: all .1s ease;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  padding-top: 4px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.l_main .post .meta .new-meta-box, .l_main .post .meta .new-meta-box i,
.l_main .post .meta .new-meta-box p {
  font-size: .875rem
}

.l_main .post .meta .new-meta-box .new-meta-item {
  color: rgba(68, 68, 68, .65);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0 8px 0 0;
  border-radius: 4px
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn {
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  margin: 2px
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn, .l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn i,
.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn p {
  line-height: 1.5
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1)
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn i {
  padding-left: 3px;
  padding-top: 2px
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn p {
  color: #fff
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover {
  color: #fff
}

.l_main .post .meta .new-meta-box .new-meta-item.link-btns .btn:hover p {
  color: #fff
}

.l_main .post .meta .new-meta-box .new-meta-item .notlink {
  cursor: default
}

.l_main .post .meta .new-meta-box .new-meta-item .notlink:hover {
  color: rgba(68, 68, 68, .65)
}

.l_main .post .meta .new-meta-box .new-meta-item .notlink:hover p {
  color: rgba(68, 68, 68, .65)
}

.l_main .post .meta .new-meta-box .new-meta-item:last-child {
  margin-right: 0
}

.l_main .post .meta .new-meta-box .new-meta-item i, .l_main .post .meta .new-meta-box .new-meta-item img {
  display: inline
}

.l_main .post .meta .new-meta-box .new-meta-item i {
  margin-right: 4px;
  border-radius: 0
}

.l_main .post .meta .new-meta-box .new-meta-item i.fas {
  margin-right: 2px
}

.l_main .post .meta .new-meta-box .new-meta-item a, .l_main .post .meta .new-meta-box .new-meta-item p {
  color: rgba(68, 68, 68, .65);
  padding-left: 0;
  padding-right: 4px
}

.l_main .post .meta .new-meta-box .new-meta-item a {
  display: flex;
  justify-content: center;
  align-items: center
}

.l_main .post .meta .new-meta-box .new-meta-item a img {
  height: 1.2em;
  width: 1.2em;
  margin-right: 5px;
  transform: translateY(-1px)
}

.l_main .post .meta .new-meta-box .new-meta-item a p {
  margin: 0;
  padding-top: 2px;
  font-weight: 400;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_main .post .meta .new-meta-box .new-meta-item a:hover {
  color: #ff5722;
  text-decoration: none
}

.l_main .post .meta .new-meta-box .new-meta-item a:hover p {
  color: #ff5722
}

.l_main .post .meta .new-meta-box .author i, .l_main .post .meta .new-meta-box .author img {
  border-radius: 100%
}

.l_main .post .meta .new-meta-box .share-body {
  display: flex
}

.l_main .post .meta .new-meta-box .share-body a {
  padding: 0;
  margin-right: 4px
}

.l_main .post .meta .new-meta-box .share-body a img {
  height: 1.8em;
  width: auto;
  background: 0 0
}

.l_main .post span > img {
  display: inline-block
}

.l_main .post a img {
  display: inline
}

@media screen and (max-width:768px) {
  .l_main {
    padding-right: 0
  }

  .l_main .post .meta {
    margin-bottom: 16px
  }

  .l_main .post .meta .title {
    font-size: 1.25rem
  }
}

@media screen and (max-width:768px) and (max-width:500px) {
  .l_main {
    width: 100%
  }
}

@media screen and (max-width:768px) and (max-width:500px) {
  .l_main .post {
    padding: 24px 16px
  }
}

details {
  display: block;
  background: #f4f4f4;
  padding: 16px;
  margin: 1rem 0;
  border-radius: 4px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

details summary {
  cursor: pointer;
  padding: 16px;
  margin: -16px;
  color: rgba(85, 85, 85, .7);
  font-size: .875rem;
  font-weight: 700
}

details summary:hover {
  color: rgba(85, 85, 85, .9)
}

details[blue] {
  background: #e8f4fd
}

details[cyan] {
  background: #e8fafe
}

details[green] {
  background: #ebf9ed
}

details[yellow] {
  background: #fff8e9
}

details[red] {
  background: #feefee
}

.body-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch
}

.container--flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center
}

div.hoverbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

div.hoverbox > div.target {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
  padding: 8px;
  margin-left: -4px;
  margin-top: -108px
}

div.hoverbox > div.target > img {
  margin: 0;
  padding: 0;
  height: 128px;
  width: 128px
}

div.hoverbox:hover > div.target {
  display: flex
}

.comments .article p[ct] {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.125rem;
  color: #444
}

.comments .article p[cst] {
  margin-top: .5rem;
  margin-bottom: .5rem;
  font-size: .875rem
}

.white-box {
  background: #fff
}

#loading-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 99999
}

#loading-bar {
  position: fixed;
  width: 0;
  height: 2px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  background-color: #2196f3
}

.l_header {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  line-height: 64px;
  padding: 0 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  background: #fff
}

.l_header .wrapper {
  padding: auto 16px;
  max-width: 1080px;
  margin: auto;
  height: 64px;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_header .wrapper .nav-main {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  transform: translateY(-64px)
}

.l_header .wrapper .nav-sub {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  opacity: 0
}

.l_header .wrapper a:not([href]) {
  cursor: default
}

.l_header .wrapper a.logo {
  color: #444
}

.l_header.no_sidebar .wrapper {
  max-width: 795px
}

@media screen and (max-width:500px) {
  .l_header .wrapper.sub .logo {
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    padding-left: 16px;
    padding-right: 0
  }
}

.l_header .wrapper.sub .nav-main {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  transform: translateY(-128px)
}

.l_header .wrapper.sub .nav-sub {
  opacity: 1
}

.l_header .nav-main, .l_header .nav-sub {
  height: 64px
}

.l_header.hide {
  transform: translateY(100px) scale(0)
}

.l_header.show {
  transform: translateY(0) scale(1)
}

.l_header, .l_header a {
  height: 64px;
  line-height: 64px
}

.l_header .logo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 24px;
  font-size: 1.25rem;
  font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
  letter-spacing: 0
}

@media screen and (max-width:500px) {
  .l_header .logo {
    padding: 0 16px
  }
}

.l_header .logo.img {
  padding: 0 16px 0 0
}

.l_header .logo img {
  height: 100%
}

.l_header img.logo {
  padding: 4px 0
}

.l_header .nav-sub .logo {
  padding: 0 24px;
  font-size: 1rem;
  font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

@media screen and (max-width:500px) {
  .l_header .nav-sub .logo {
    padding: 0 16px;
    letter-spacing: -.5px;
    padding-top: 1px
  }
}

.l_header .menu {
  position: relative;
  flex: 1 0 auto;
  height: 64px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  margin: 0 16px 0 0
}

.l_header .menu li ul.submenu {
  z-index: 1;
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
  margin-top: -8px;
  margin-left: 0;
  border-radius: 6px;
  border: 1px solid #e7e7e7;
  padding: 8px 0
}

.l_header .menu li ul.submenu > hr {
  margin-top: 8px;
  margin-bottom: 8px
}

.l_header .menu li ul.submenu > li {
  white-space: nowrap;
  word-break: keep-all
}

.l_header .menu li ul.submenu > li.header {
  font-size: .75rem;
  font-weight: 700;
  line-height: 2em;
  color: rgba(68, 68, 68, .65);
  margin: 8px 16px 4px
}

.l_header .menu li ul.submenu > li ul {
  margin-left: 0;
  display: none;
  margin-top: -40px;
  left: calc(100% - .5 * 16px)
}

.l_header .menu li ul.submenu > li > a {
  font-size: .875rem;
  font-weight: 700;
  line-height: 33px;
  padding: 0 16px;
  height: 32px;
  border-left: 2px solid transparent
}

.l_header .menu li ul.submenu > li > a.active, .l_header .menu li ul.submenu > li > a:active,
.l_header .menu li ul.submenu > li > a:hover {
  color: #2196f3;
  border-left: 2px solid #2196f3;
  border-bottom: none
}

.l_header .menu li ul.submenu > li > a > i {
  margin-right: 4px
}

.l_header .menu li:hover > ul.submenu {
  display: block
}

.l_header .menu ul > li > a {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  display: block;
  padding: 0 8px;
  color: rgba(68, 68, 68, .85)
}

.l_header .menu ul > li > a.current {
  border-bottom: 2px solid rgba(33, 150, 243, .8)
}

.l_header .menu ul > li > a:hover {
  color: #2196f3;
  border-bottom: 2px solid #2196f3;
  background: #e8f4fd
}

.l_header .menu ul > li > a.active, .l_header .menu ul > li > a:active {
  color: #2196f3;
  border-bottom: 2px solid #2196f3
}

@media screen and (max-width:500px) {
  .l_header .menu {
    display: none
  }
}

.l_header .switcher {
  display: none;
  line-height: 64px
}

.l_header .switcher .s-toc {
  display: none
}

@media screen and (max-width:768px) {
  .l_header .switcher .s-toc {
    display: flex
  }
}

.l_header .switcher > li {
  height: 48px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  margin: 2px
}

@media screen and (max-width:500px) {
  .l_header .switcher > li {
    margin: 0 1px;
    height: 48px
  }
}

.l_header .switcher > li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: .85em 1.1em;
  border-radius: 100px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  color: #2196f3
}

.l_header .switcher > li a.active, .l_header .switcher > li a:active {
  background: #e8f4fd
}

@media screen and (max-width:500px) {
  .l_header .switcher > li a {
    width: 32px;
    height: 48px
  }
}

@media screen and (max-width:500px) {
  .l_header .switcher {
    display: flex;
    padding-left: 8px;
    padding-right: 10px
  }
}

.l_header .nav-sub .switcher {
  display: flex
}

.l_header .m_search {
  position: relative;
  display: flex;
  width: 285px;
  height: 64px
}

@media screen and (max-width:1440px) {
  .l_header .m_search {
    width: 240px
  }
}

.l_header .m_search .form {
  position: relative;
  display: flex;
  width: 100%;
  margin: auto;
  justify-content: flex-start;
  align-items: center
}

.l_header .m_search .icon, .l_header .m_search .input {
  transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease
}

.l_header .m_search .icon {
  position: absolute;
  width: 32px;
  left: 5px;
  color: rgba(68, 68, 68, .7)
}

@media screen and (max-width:500px) {
  .l_header .m_search .icon {
    display: none
  }
}

.l_header .m_search .input {
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  color: #444;
  background: rgba(242, 242, 242, .75);
  box-shadow: none;
  box-sizing: border-box;
  padding-left: 36px;
  font-size: .875rem;
  border-radius: 8px;
  border: 1px dashed transparent
}

@media screen and (max-width:500px) {
  .l_header .m_search .input {
    padding-left: 8px;
    border: none
  }

  .l_header .m_search .input:focus, .l_header .m_search .input:hover {
    border: none
  }
}

.l_header .m_search .input:hover ~ .icon {
  color: rgba(33, 150, 243, .8)
}

.l_header .m_search .input:focus ~ .icon {
  color: #2196f3
}

@media (max-width:500px) {
  .l_header {
    padding: 0
  }

  .l_header .m_search {
    width: 0;
    overflow: hidden;
    position: absolute;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    margin-left: 16px
  }

  .l_header.z_search-open .logo {
    opacity: 0
  }

  .l_header.z_search-open .m_search {
    width: calc(100% - 112px)
  }
}

ul.menu-phone {
  display: none;
  position: fixed;
  padding: 8px 0;
  top: 80px;
  right: 16px;
  z-index: 10000;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
  border-radius: 6px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  transform: scale(0, 0) rotate(12deg);
  transform-origin: right top
}

@media screen and (max-width:500px) {
  ul.menu-phone {
    display: block
  }
}

ul.menu-phone.show {
  transform: scale(1, 1)
}

ul.menu-phone > li > a {
  display: block;
  font-size: 1rem;
  color: #444;
  line-height: 33px;
  height: 32px;
  padding: 0 16px;
  border-left: 2px solid transparent
}

ul.menu-phone > li > a i {
  margin-right: 4px
}

ul.menu-phone > li > a.active {
  border-left: 2px solid #2196f3;
  color: #2196f3
}

.cover-wrapper .l_header {
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transform: translateY(-128px)
}

.cover-wrapper .l_header.show {
  transform: translateY(0)
}

.l_main .prev-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(68, 68, 68, .65);
  margin: 0;
  font-size: 1rem
}

.l_main .prev-next .prev {
  text-align: left;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px
}

.l_main .prev-next .next {
  text-align: right;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px
}

.l_main .prev-next p {
  margin: 16px
}

.l_main .prev-next section {
  color: rgba(68, 68, 68, .65);
  padding: 16px;
  border-radius: 12px
}

.l_main .prev-next section:hover {
  color: #ff5722
}

@media screen and (max-width:425px) {
  .l_main .prev-next section {
    border-radius: 0
  }
}

.l_main .article .prev-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: flex-start
}

.l_main .article .prev-next > a {
  width: 100%;
  padding: 8px;
  color: rgba(68, 68, 68, .65);
  background: #f4f4f4;
  border-radius: 4px
}

.l_main .article .prev-next > a:hover {
  text-decoration: none;
  background: #ffeee8
}

.l_main .article .prev-next > a:hover p.title {
  color: #ff5722
}

.l_main .article .prev-next > a p.title {
  margin: 8px .5rem;
  font-weight: 700;
  font-size: 1rem
}

.l_main .article .prev-next > a p.title > i {
  width: 1rem
}

.l_main .article .prev-next > a p.content {
  font-size: .875rem;
  margin: 0 .5rem;
  text-align: justify;
  word-break: break-all
}

.l_main .article .prev-next > a:only-child {
  margin-left: 0;
  margin-right: 0
}

.l_main .article .prev-next .prev {
  margin-left: 0;
  margin-right: 8px
}

.l_main .article .prev-next .prev p.title {
  text-align: left
}

.l_main .article .prev-next .next {
  margin-left: 8px;
  margin-right: 0
}

.l_main .article .prev-next .next p.title {
  text-align: right
}

#u-search {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px 20px;
  z-index: 999999
}

@media screen and (max-width:680px) {
  #u-search {
    padding: 0
  }
}

#u-search .modal {
  position: fixed;
  height: 80%;
  width: 100%;
  max-width: 640px;
  left: 50%;
  top: 0;
  margin: 64px 0 0 -320px;
  background: #fff;
  z-index: 3;
  border-radius: 4px;
  overflow: hidden
}

@media screen and (max-width:680px) {
  #u-search .modal {
    box-shadow: none;
    max-width: none;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    border-radius: 0
  }
}

#u-search .modal-ajax-content {
  opacity: 0;
  visibility: hidden;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

#u-search .modal-ajax-content.loaded {
  opacity: 1;
  visibility: visible
}

#u-search .modal-header {
  position: relative;
  width: 100%;
  height: 64px;
  z-index: 3;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  background: #f2f2f2;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

@media screen and (max-width:680px) {
  #u-search .modal-header {
    border-radius: 0;
    padding: 0
  }
}

#u-search .modal-header .btn-close {
  display: block;
  position: absolute;
  width: 55px;
  height: 64px;
  top: 0;
  right: 0;
  color: #2196f3;
  cursor: pointer;
  text-align: center;
  line-height: 64px;
  vertical-align: middle;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  z-index: 2
}

#u-search .modal-header .btn-close:hover {
  transform: rotate(90deg)
}

#u-search .modal-header .modal-loading {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: 0 0;
  z-index: 1
}

#u-search .modal-header .modal-loading .modal-loading-bar {
  display: block;
  position: relative;
  width: 0%;
  height: 100%;
  background: #2196f3;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

#u-search .modal-header #u-search-modal-form {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2
}

#u-search .modal-header #u-search-modal-form #u-search-modal-input {
  margin: 16px 50px;
  padding: 0 8px;
  width: calc(100% - 100px - 16px);
  line-height: 2rem;
  border-radius: 4px;
  vertical-align: middle;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  background: 0 0;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

@media screen and (max-width:680px) {
  #u-search .modal-header #u-search-modal-form #u-search-modal-input {
    padding: 0
  }
}

#u-search .modal-header #u-search-modal-form #u-search-modal-input:focus {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px
}

#u-search .modal-header #u-search-modal-btn-submit {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 5px;
  padding-top: 2px;
  background: 0 0;
  border: none;
  width: 50px;
  height: 64px;
  vertical-align: middle;
  color: #2196f3;
  z-index: 2
}

#u-search .modal-footer {
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #fff
}

#u-search .modal-footer .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 0
}

#u-search .modal-footer .logo a {
  display: inline-block;
  height: 50px
}

#u-search .modal-footer .logo.google img {
  height: 24px;
  margin-top: 13px
}

#u-search .modal-footer .logo.baidu img {
  height: 22px;
  margin-top: 14px
}

#u-search .modal-footer .logo img {
  position: relative;
  display: inline-block;
  width: auto;
  height: 18px;
  margin-top: 16px
}

#u-search .modal-footer .modal-error {
  position: relative;
  float: left;
  vertical-align: middle;
  line-height: 50px;
  font-size: 13px;
  z-index: 1
}

#u-search .modal-footer .modal-metadata {
  position: relative;
  float: left;
  vertical-align: middle;
  line-height: 50px;
  font-size: 13px;
  z-index: 1
}

#u-search .modal-footer .nav {
  position: relative;
  display: block;
  float: right;
  vertical-align: middle;
  font-size: .875rem;
  font-weight: 700;
  line-height: 50px;
  color: rgba(68, 68, 68, .65);
  cursor: pointer;
  z-index: 1
}

#u-search .modal-footer .nav:hover {
  color: #ff5722
}

#u-search .modal-footer .nav.btn-next {
  margin-left: 16px
}

#u-search .modal-footer .nav .icon {
  font-size: .875rem
}

#u-search .modal-body {
  position: absolute;
  padding: 16px;
  width: 100%;
  height: calc(100% - 64px);
  top: 64px;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 4px
}

#u-search .modal-body .modal-results {
  list-style: none
}

#u-search .modal-body .modal-results .result {
  position: relative;
  display: block;
  padding: 16px;
  text-decoration: none;
  border-radius: 4px
}

#u-search .modal-body .modal-results .result b[mark] {
  color: #0c7cd5;
  text-decoration: underline
}

#u-search .modal-body .modal-results .result:hover {
  background: #e8f4fd
}

#u-search .modal-body .modal-results .result .title {
  display: inline-block;
  max-width: 100%;
  color: #5e5e5e;
  font-weight: 700;
  padding: 1px;
  margin-bottom: 2px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.125rem
}

#u-search .modal-body .modal-results .result .digest {
  display: block;
  white-space: inherit;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  font-size: .8125rem;
  color: rgba(68, 68, 68, .65)
}

#u-search .modal-body .modal-results .result .icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
  font-size: 11px;
  color: grey
}

#u-search .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 1
}

.l_side {
  width: 285px;
  float: right;
  position: relative;
  display: flex;
  flex-direction: column
}

@media screen and (max-width:1440px) {
  .l_side {
    width: 240px
  }
}

@media screen and (max-width:768px) {
  .l_side {
    width: 100%
  }
}

.widget {
  z-index: 0;
  background: #fff;
  margin-top: 16px;
  border-radius: 12px;
  width: 100%;
  display: none
}

.widget.desktop {
  display: block
}

@media screen and (max-width:768px) {
  .widget {
    display: none !important
  }

  .widget.mobile {
    display: block !important
  }
}

@media screen and (max-width:425px) {
  .widget {
    width: calc(100% - 2 * 16px);
    margin: 16px 16px 0 16px;
    display: none !important
  }

  .widget.mobile {
    display: block !important
  }
}

.widget header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-weight: 700;
  line-height: 1.5em;
  padding: calc(16px - 2px);
  padding-bottom: 0
}

.widget header, .widget header a {
  color: #2196f3
}

.widget header > a:hover {
  color: #ff5722
}

.widget header span.name {
  margin-left: 8px
}

.widget .content {
  text-align: justify;
  font-size: .875rem;
  padding: 8px 0;
  max-height: calc(100% - 264px);
  max-width: 100%
}

.widget .content p {
  margin: .5rem 0
}

.widget .content ul > li a {
  color: rgba(68, 68, 68, .65);
  padding: 0 16px;
  padding-left: 12px;
  line-height: 2;
  display: flex;
  justify-content: space-between;
  align-content: center;
  border-left: 2px solid transparent;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.widget .content ul.entry a .name, .widget .content ul.popular-posts a .name {
  flex: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(68, 68, 68, .8)
}

.widget .content ul.entry a .badge, .widget .content ul.popular-posts a .badge {
  flex: none;
  font-weight: 400;
  font-size: .875rem;
  color: rgba(68, 68, 68, .7)
}

.widget .content ul.entry a:hover, .widget .content ul.popular-posts a:hover {
  border-left: 2px solid #2196f3;
  background: rgba(33, 150, 243, .1)
}

.widget .content ul.entry a.active, .widget .content ul.popular-posts a.active {
  border-left: 2px solid #2196f3
}

.widget .content ul.entry a.active .name, .widget .content ul.popular-posts a.active .name {
  color: #2196f3
}

.widget .content ul.entry a.active .badge, .widget .content ul.popular-posts a.active .badge {
  color: rgba(33, 150, 243, .9)
}

.widget .content ul.entry a:active, .widget .content ul.popular-posts a:active {
  border-left: 4px solid #2196f3
}

.widget .content ul.entry a.child, .widget .content ul.popular-posts a.child {
  padding-left: 32px
}

.widget.blogger {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.widget.blogger .content {
  padding: 0
}

.widget.blogger .content div.avatar {
  display: flex;
  justify-content: center
}

.widget.blogger .content img {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  width: 285px;
  height: 285px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px
}

@media screen and (max-width:1440px) {
  .widget.blogger .content img {
    width: 240px;
    height: 240px
  }
}

@media screen and (max-width:768px) {
  .widget.blogger .content img {
    width: 96px;
    height: 96px;
    border-radius: 100%;
    margin-top: 8px;
    padding: 8px
  }
}

.widget.blogger .content h2 {
  text-align: center;
  font-weight: 700;
  margin: 8px;
  margin-top: 16px
}

@media screen and (max-width:768px) {
  .widget.blogger .content h2 {
    margin: 8px
  }
}

.widget.blogger .content p {
  font-weight: 700;
  text-align: center;
  margin: 8px 8px 0 8px;
  empty-cells: hide
}

.widget.blogger .content .social-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 4px 4px
}

.widget.blogger .content .social-wrapper a {
  color: rgba(68, 68, 68, .65);
  padding: 0;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.widget.blogger .content .social-wrapper a:hover {
  color: #ff5722
}

.widget.blogger .content .social-wrapper a.social {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 100px
}

.widget.blogger .content .social-wrapper a.social:hover {
  background: #e8f4fd;
  color: #2196f3
}

@media screen and (max-width:768px) {
  .widget.blogger .content .social-wrapper {
    justify-content: center;
    display: none
  }
}

@media screen and (max-width:768px) {
  .widget.blogger {
    box-shadow: none;
    background: 0 0 !important;
    margin-top: 32px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }
}

.widget.text .content {
  padding: 4px 16px
}

.widget.text .content, .widget.text .content p {
  font-size: .875rem;
  word-break: break-all
}

.widget.text .content a {
  color: #2196f3;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.widget.text .content a:hover {
  color: #ff5722;
  text-decoration: underline
}

.widget.text .content a:active {
  color: #d93400
}

.widget.list .content {
  padding: 8px 0
}

.widget.list .content a {
  font-size: .875rem;
  font-weight: 700;
  line-height: 2.4em
}

.widget.list .content a:hover {
  text-decoration: none
}

.widget.list .content a i {
  margin-left: 1px
}

.widget.list .content a img {
  display: inline;
  vertical-align: middle;
  height: 2em;
  width: 2em
}

.widget.list .content a img#round {
  border-radius: 100%
}

.widget.grid .content .grid {
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 16px
}

.widget.grid .content .grid a {
  text-align: center;
  border-radius: 12px;
  margin: 4px 0;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(68, 68, 68, .7);
  line-height: 1.5;
  word-wrap: break-word;
  border: 1px solid transparent
}

.widget.grid .content .grid a i {
  margin-top: .3em;
  margin-bottom: .3em;
  font-size: 1.8em
}

.widget.grid .content .grid a img {
  display: inline;
  vertical-align: middle;
  margin-bottom: 4px
}

.widget.grid .content .grid a img#round {
  border-radius: 100%
}

.widget.grid .content .grid a:hover {
  color: #2196f3;
  background: #e8f4fd;
  border-radius: 4px
}

.widget.grid .content .grid a:active {
  color: #2196f3
}

.widget.grid .content .grid a.active {
  color: #2196f3;
  border: 1px solid #2196f3
}

.widget.grid .content .grid.fixed a {
  width: calc(100% / 3 - 0 * 16px)
}

@media screen and (max-width:768px) {
  .widget.grid .content .grid.fixed a {
    width: calc(100% / 6 - 0 * 16px)
  }
}

@media screen and (max-width:500px) {
  .widget.grid .content .grid.fixed a {
    width: calc(100% / 5 - 0 * 16px)
  }
}

@media screen and (max-width:425px) {
  .widget.grid .content .grid.fixed a {
    width: calc(100% / 4 - 0 * 16px)
  }
}

@media screen and (max-width:375px) {
  .widget.grid .content .grid.fixed a {
    width: calc(100% / 3 - 0 * 16px)
  }
}

.widget.tagcloud .content {
  text-align: justify;
  padding: 8px 16px
}

.widget.tagcloud .content a {
  display: inline-block;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  line-height: 1.6em
}

.widget.tagcloud .content a:hover {
  color: #ff5722 !important;
  text-decoration: underline
}

.widget.related_posts .content {
  font-weight: 700
}

.widget.related_posts .content ul {
  margin-top: 8px;
  margin-bottom: 8px
}

.widget.related_posts .content h3 {
  font-size: .875rem;
  font-weight: 700;
  margin: 0
}

.widget.related_posts .content h3 a {
  line-height: inherit;
  padding-top: 4px;
  padding-bottom: 4px
}

.widget.qrcode .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding-left: 16px;
  padding-right: 16px
}

.widget.qrcode .content, .widget.qrcode .content img {
  margin-bottom: 4px
}

.l_side > .widget.page .content {
  padding-top: 0;
  padding-left: 12px;
  padding-right: 12px
}

.aplayer-container {
  display: flex;
  justify-content: center;
  min-height: 100px
}

.aplayer-container meting-js {
  max-width: 100%
}

.aplayer {
  max-width: 500px;
  border-radius: 4px;
  color: #444;
  font-family: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif
}

.aplayer .aplayer-list {
  text-align: left
}

@media screen and (max-width:500px) {
  .aplayer {
    border-radius: 12px
  }
}

div.tabs .highlight, div.tabs ol, div.tabs p, div.tabs ul {
  margin-top: .5rem;
  margin-bottom: .5rem
}

div.tabs {
  display: block;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom: 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
}

div.tabs ul.nav-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  padding-top: 2px;
  background: #efefef;
  border-radius: 4px 4px 0 0;
  padding: 0 4px
}

div.tabs ul.nav-tabs li.tab {
  list-style-type: none;
  border-radius: 4px 4px 0 0
}

div.tabs ul.nav-tabs li.tab a {
  display: block;
  padding: 8px;
  margin: 0 2px;
  text-align: center;
  font-size: .875rem;
  font-weight: 700;
  color: rgba(68, 68, 68, .65);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent
}

div.tabs ul.nav-tabs li.tab a:hover {
  text-decoration: none;
  color: #555;
  border-bottom: 2px solid rgba(68, 68, 68, .65)
}

div.tabs ul.nav-tabs li.tab.active a {
  cursor: default;
  color: #555;
  border-bottom: 2px solid rgba(68, 68, 68, .65)
}

div.tabs .tab-content {
  overflow: hidden
}

div.tabs .tab-content .tab-pane {
  background: #f9f9f9;
  border-top: 0;
  border-radius: 4px;
  padding: .5rem 16px
}

div.tabs .tab-content .tab-pane:not(.active) {
  display: none
}

div.tabs .tab-content .tab-pane.active {
  display: block
}

div.tabs .tab-content .tab-pane.active:nth-of-type(1) {
  border-radius: 0 4px 4px 4px
}

p[small] {
  font-size: .875rem
}

p[large] {
  font-size: 3rem;
  line-height: 1.3
}

p[huge] {
  font-size: 4rem;
  line-height: 1.3
}

p[ultra] {
  font-size: 6rem;
  line-height: 1.3
}

p[huge], p[large], p[small], p[ultra] {
  margin: 0;
  padding: 0
}

p[bold] {
  font-weight: 700
}

p[left] {
  text-align: left
}

p[center] {
  text-align: center
}

p[right] {
  text-align: right
}

p[red], red {
  color: #fe5f58
}

p[yellow], yellow {
  color: #ffbd2b
}

green, p[green] {
  color: #3dc550
}

cyan, p[cyan] {
  color: #1bcdfc
}

blue, p[blue] {
  color: #2196f3
}

gray, p[gray] {
  color: #666
}

.article li > btn a, .article p > btn a {
  line-height: 1.5em;
  background: #2196f3;
  color: #fff;
  padding: 2px 3px 0 3px;
  margin: 2px;
  border-radius: 2px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.article li > btn a:hover, .article p > btn a:hover {
  color: #fff;
  text-decoration: none;
  background: #ff5722
}

.article li > btn[regular] a, .article p > btn[regular] a {
  line-height: 3;
  padding: 9px 16px 7px 16px
}

.article li > btn[regular] a i, .article p > btn[regular] a i {
  margin-right: 2px
}

.article li > btn[large] a, .article p > btn[large] a {
  line-height: 3;
  padding: 11px 40px 9px 40px
}

.article li > btn[large] a i, .article p > btn[large] a i {
  margin: 0 5px 0 -2px
}

.article li > btn[center], .article p > btn[center] {
  display: block;
  text-align: center
}

.article btns {
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
  align-items: flex-start
}

.article btns, .article btns a, .article btns b, .article btns p {
  font-size: .875rem;
  color: #555
}

.article btns[wide] a {
  padding-left: 32px;
  padding-right: 32px
}

.article btns[fill] a {
  flex-grow: 1;
  width: auto
}

.article btns[around] {
  justify-content: space-around
}

.article btns[center] {
  justify-content: center
}

.article btns[grid2] a {
  width: calc(100% / 2 - 16px)
}

@media screen and (max-width:1024px) {
  .article btns[grid2] a {
    width: calc(100% / 2 - 16px)
  }
}

@media screen and (max-width:768px) {
  .article btns[grid2] a {
    width: calc(100% / 2 - 16px)
  }
}

@media screen and (max-width:500px) {
  .article btns[grid2] a {
    width: calc(100% / 1 - 16px)
  }
}

.article btns[grid3] a {
  width: calc(100% / 3 - 16px)
}

@media screen and (max-width:1024px) {
  .article btns[grid3] a {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:768px) {
  .article btns[grid3] a {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  .article btns[grid3] a {
    width: calc(100% / 1 - 16px)
  }
}

.article btns[grid4] a {
  width: calc(100% / 4 - 16px)
}

@media screen and (max-width:1024px) {
  .article btns[grid4] a {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:768px) {
  .article btns[grid4] a {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  .article btns[grid4] a {
    width: calc(100% / 2 - 16px)
  }
}

.article btns[grid5] a {
  width: calc(100% / 5 - 16px)
}

@media screen and (max-width:1024px) {
  .article btns[grid5] a {
    width: calc(100% / 4 - 16px)
  }
}

@media screen and (max-width:768px) {
  .article btns[grid5] a {
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  .article btns[grid5] a {
    width: calc(100% / 2 - 16px)
  }
}

.article btns a {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  margin: 8px;
  margin-top: calc(2.25 * 16px + 32px);
  min-width: 120px;
  font-weight: 700;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  flex-direction: column;
  padding: 8px;
  text-align: center;
  background: #f4f4f4;
  border-radius: 4px
}

.article btns a > i:first-child, .article btns a > img:first-child {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  height: 64px;
  width: 64px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  margin: 16px 8px 4px 8px;
  margin-top: calc(-1.25 * 16px - 32px);
  border: 2px solid #fff;
  background: #fff;
  line-height: 60px;
  font-size: 28px
}

.article btns a > i:first-child[auto], .article btns a > img:first-child[auto] {
  width: auto
}

.article btns a > i:first-child {
  color: #fff;
  background: #2196f3
}

.article btns a b, .article btns a p {
  margin: .25em;
  font-weight: 400;
  line-height: 1.25;
  word-wrap: break-word
}

.article btns a b {
  font-weight: 700;
  line-height: 1.3
}

.article btns a img {
  margin: .4em auto
}

.article btns a:hover {
  text-decoration: none
}

.article btns a:not([href]) {
  cursor: default;
  color: inherit
}

.article btns a[href]:hover {
  background: rgba(255, 87, 34, .15)
}

.article btns a[href]:hover, .article btns a[href]:hover b {
  color: #ff5722
}

.article btns a[href]:hover > i:first-child, .article btns a[href]:hover > img:first-child {
  transform: scale(1.1) translateY(-8px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

.article btns a[href]:hover > i:first-child {
  background: #ff5722
}

.article btns[circle] > a > i:first-child, .article btns[circle] > a > img:first-child {
  border-radius: 32px
}

.article btns[rounded] > a > i:first-child, .article btns[rounded] > a > img:first-child {
  border-radius: 16px
}

.l_side .toc-wrapper {
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  transition: all .28s ease;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

.l_side .toc-wrapper header {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  top: 0;
  padding-bottom: 4px
}

.l_side .toc-wrapper .content {
  max-height: calc(100vh - 144px);
  overflow: auto
}

.l_side .toc-wrapper .content a {
  border-left: 2px solid transparent
}

.l_side .toc-wrapper .content a:hover {
  background: #e8f4fd;
  border-left: 2px solid #2196f3
}

.l_side .toc-wrapper .content a:active {
  border-left: 4px solid #2196f3
}

.l_side .toc-wrapper .content a.active {
  color: #2196f3;
  border-left: 2px solid #2196f3
}

@media screen and (max-width:768px) {
  .l_side .toc-wrapper {
    position: fixed;
    max-height: 1000px;
    width: auto;
    max-width: calc(100% - 2 * 16px);
    top: 64px;
    right: 16px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1);
    visibility: hidden;
    transform: scale(0, 0) rotate(12deg);
    transform-origin: right top
  }

  .l_side .toc-wrapper.active {
    visibility: visible;
    transform: scale(1, 1)
  }
}

@media screen and (max-width:425px) {
  .l_side .toc-wrapper {
    right: 0
  }
}

.l_side .toc-wrapper a {
  padding-left: 8px;
  color: rgba(68, 68, 68, .65);
  font-size: .875rem;
  display: inline-block
}

.l_side .toc-wrapper ol .toc-item.toc-level-1 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-1 .toc-child a {
  padding-left: 12.8px;
  font-weight: 400
}

.l_side .toc-wrapper ol .toc-item.toc-level-2 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-2 .toc-child a {
  padding-left: 25.6px;
  font-weight: 400
}

.l_side .toc-wrapper ol .toc-item.toc-level-3 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-3 .toc-child a {
  padding-left: 38.4px;
  font-weight: 400
}

.l_side .toc-wrapper ol .toc-item.toc-level-4 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-4 .toc-child a {
  padding-left: 51.2px;
  font-weight: 400
}

.l_side .toc-wrapper ol .toc-item.toc-level-5 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-5 .toc-child a {
  padding-left: 64px;
  font-weight: 400
}

.l_side .toc-wrapper ol .toc-item.toc-level-6 .toc-child a, .l_side .toc-wrapper ul .toc-item.toc-level-6 .toc-child a {
  padding-left: 64px;
  font-weight: 400
}

.l_side .toc-wrapper ol li, .l_side .toc-wrapper ul li {
  width: auto;
  text-align: left
}

.l_side .toc-wrapper ol li a, .l_side .toc-wrapper ul li a {
  padding: 0 8px 0 11px;
  font-weight: 700;
  width: 100%
}

.l_side .toc-wrapper:empty {
  display: none
}

.backstretch {
  left: 0;
  top: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 700px;
  z-index: -999998;
  position: absolute;
}

@media only screen and (max-width: 768px){
  .backstretch {
    left: -1000px;
  }
}

@media only screen and (min-width: 768px){
  .backstretch {
    left: -888px;
  }
}

@media only screen and (min-width: 992px){
  .backstretch {
    left: -768px;
  }
}

@media only screen and (min-width: 1200px){
  .backstretch {
    left: -500px;
  }
}

@media only screen and (min-width: 1440px){
  .backstretch {
    left: -300px;
  }
}

//@media only screen and (min-width: 1920px){
//  .backstretch {
//    left: -300px;
//  }
//}