.a {
  transition: -webkit-transform, top, background-color 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform, top, background-color 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform, top, background-color 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  box-sizing: border-box;
  background-color: #fff;
  font-family: 'Varela', 'Microsoft Yahei';
}
a {
  text-decoration: none;
  transition: all 0.2s;
  font-weight: normal;
  color: #333;
}
.module-cmt-list {
  display: none !important;
}
#feedAv {
  position: absolute !important;
  height: 0px;
  transform: scale(0) !important;
}
#pop_ad {
  transform: scale(0) !important;
}
* {
  -webkit-overflow-scrolling: touch;
}
.icon {
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: -0.3rem;
  fill: currentColor;
  overflow: hidden;
}
.iconfont {
  color: #787878;
  margin-top: -1px;
  font-size: 1rem !important;
  padding: 0 0.2rem;
}
::-webkit-scrollbar {
  width: 0rem;
}
::selection {
  color: #333;
  background: #bbdefb;
}
@font-face {
  font-family: 'Varela';
  src: url("../font/Varela.woff2") format('woff2');
}
.post-entry {
  width: 100%;
  height: 100%;
  padding: 0.675rem;
}
.post-entry a {
  color: #1976d2;
}
.post-entry a:hover {
  color: #42a5f5;
}
.post-entry .hidden {
  display: none;
}
.top {
  z-index: 1;
  top: -1rem;
  right: -3rem;
  position: absolute;
  transform: rotate(30deg);
}
.top .iconfont {
  color: #f46267;
  font-size: 4rem !important;
}
.post-entry,
.post-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}
.post-entry .header,
.post-wrap .header {
  position: relative;
  margin-bottom: 1rem;
}
.post-entry .header .title,
.post-wrap .header .title {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.post-entry .header .meta,
.post-wrap .header .meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #898989;
}
.post-entry .header .meta a,
.post-wrap .header .meta a {
  font-size: 0.75rem;
  color: #898989;
}
.post-entry .header .meta a:hover,
.post-wrap .header .meta a:hover {
  color: #42a5f5;
}
.post-entry .header .meta .item,
.post-wrap .header .meta .item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 50%;
  margin-bottom: 1rem;
}
.post-entry .header .meta .item a,
.post-wrap .header .meta .item a {
  padding-right: 0.3rem;
}
.post-entry .header .meta .icon,
.post-wrap .header .meta .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
}
.post-entry .quote,
.post-wrap .quote {
  float: right;
}
.post-entry .post-copyright,
.post-wrap .post-copyright {
  font-size: 0.875rem;
  color: #31708f;
  border-radius: 0.2rem;
  background-color: #c7e4f3;
  text-align: left;
  padding: 0.5rem 1rem;
}
.post-entry .post-copyright div,
.post-wrap .post-copyright div {
  padding: 0.3rem;
}
.post-entry .changyan,
.post-wrap .changyan {
  margin-top: 1rem;
}
.post-entry .post-guide,
.post-wrap .post-guide {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.post-entry .post-guide .item,
.post-wrap .post-guide .item {
  width: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.post-entry .post-guide .item a,
.post-wrap .post-guide .item a {
  font-size: 0.875rem;
}
.post-entry .post-guide .left,
.post-wrap .post-guide .left {
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.post-entry .post-guide .left a:before,
.post-wrap .post-guide .left a:before {
  content: '\e7ec';
  font-weight: 600;
  font-family: 'iconfont' !important;
  font-size: 0.875rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.post-entry .post-guide .right,
.post-wrap .post-guide .right {
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.post-entry .post-guide .right a:after,
.post-wrap .post-guide .right a:after {
  content: '\e7eb';
  font-weight: 600;
  font-family: 'iconfont' !important;
  font-size: 0.875rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.post-entry .post-reward,
.post-wrap .post-reward {
  margin: 2rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.post-entry .post-reward #reward-button,
.post-wrap .post-reward #reward-button {
  cursor: pointer;
  color: #333;
  padding: 0.7rem;
  font-size: 0.875rem;
  border-radius: 0.7rem;
  font-weight: 600;
  transition: all 0.4s;
  background-color: #fed336;
}
.post-entry .post-reward #reward-button:hover,
.post-wrap .post-reward #reward-button:hover {
  color: #fff;
  transform: scale(1.1, 1.1);
}
.post-entry .post-reward #qr,
.post-wrap .post-reward #qr {
  margin: 1rem;
  display: none;
}
.post-entry .post-reward #qr .wrap,
.post-wrap .post-reward #qr .wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.post-entry .post-reward #qr .wrap .bg-wrap,
.post-wrap .post-reward #qr .wrap .bg-wrap {
  text-align: center;
  font-size: 0.875rem;
}
.post-entry .post-reward #qr .wrap .bg,
.post-wrap .post-reward #qr .wrap .bg {
  width: 10rem;
  height: 10rem;
  margin: 0.2rem 1rem;
  display: block;
  border-radius: 0.2rem;
  background-size: cover;
  background-position: center center;
  background-color: #c9c6c1;
}
.post-entry .google-ads,
.post-wrap .google-ads {
  margin-bottom: 2rem;
}
.post-entry #comment,
.post-wrap #comment {
  margin-top: 3rem;
}
.post-entry #comment .info,
.post-wrap #comment .info {
  display: none;
}
.post-entry .hljs,
.post-wrap .hljs {
  padding: 0.75rem;
  border-radius: 0.35rem;
}
.post-entry pre,
.post-wrap pre,
.post-entry code,
.post-wrap code {
  font-size: 0.75rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.post-entry code:not(.hljs),
.post-wrap code:not(.hljs) {
  color: #1565c0;
  margin: 0 0.2rem;
  background: #e3f2fd;
  padding: 0.2rem;
  border-radius: 0.3rem;
  border: 1px solid #eee;
}
.post-entry p,
.post-wrap p,
.post-entry table,
.post-wrap table {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.post-entry p,
.post-wrap p {
  margin: 0.5rem 0;
}
.post-entry table,
.post-wrap table {
  width: 100%;
  margin: 0.5rem 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.post-entry img,
.post-wrap img,
.post-entry video,
.post-wrap video {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
  margin: 0.5rem 0;
  box-sizing: border-box;
  border-radius: 0.3rem;
  border: 1px solid #e6e6e6;
}
.post-entry iframe,
.post-wrap iframe {
  border: none;
}
.post-entry th,
.post-wrap th {
  font-weight: bold;
  border-bottom: 3px solid #ddd;
  padding-bottom: 0.5em;
}
.post-entry td,
.post-wrap td {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.post-entry blockquote,
.post-wrap blockquote {
  font-size: 0.9rem;
  margin: 0.9rem 0;
  text-align: left;
  padding: 0.5rem 1rem;
  color: #4d4d4c;
  border-radius: 0.2rem;
  background-color: #e3f2fd;
  border-left: 0.45rem solid #1e88e5;
}
.post-entry blockquote footer,
.post-wrap blockquote footer {
  font-size: 1rem;
  margin: 1.5rem 0;
}
.post-entry blockquote footer cite:before,
.post-wrap blockquote footer cite:before {
  content: '—';
  padding: 0 0.5em;
}
.post-entry h1,
.post-wrap h1,
.post-entry h2,
.post-wrap h2,
.post-entry h3,
.post-wrap h3,
.post-entry h4,
.post-wrap h4,
.post-entry h5,
.post-wrap h5,
.post-entry h6,
.post-wrap h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: bold;
  position: relative;
  border-bottom: 1px solid #ddd;
}
.post-entry h1 .post-anchor,
.post-wrap h1 .post-anchor,
.post-entry h2 .post-anchor,
.post-wrap h2 .post-anchor,
.post-entry h3 .post-anchor,
.post-wrap h3 .post-anchor,
.post-entry h4 .post-anchor,
.post-wrap h4 .post-anchor,
.post-entry h5 .post-anchor,
.post-wrap h5 .post-anchor,
.post-entry h6 .post-anchor,
.post-wrap h6 .post-anchor {
  font-weight: bolder;
  font-size: 1.6rem;
  margin-left: 0.3rem;
}
.post-entry h1,
.post-wrap h1 {
  font-size: 1.75rem;
  line-height: 1.75rem;
}
.post-entry h2,
.post-wrap h2 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.post-entry h3,
.post-wrap h3 {
  font-size: 1.25rem;
  line-height: 1.25rem;
}
.post-entry h4,
.post-wrap h4 {
  font-size: 1rem;
  line-height: 1rem;
}
.post-entry h5,
.post-wrap h5 {
  font-size: 0.875rem;
  line-height: 0.875rem;
}
.post-entry h6,
.post-wrap h6 {
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #ddd;
}
.post-entry hr,
.post-wrap hr {
  border: 1px dashed #ddd;
}
.post-entry strong,
.post-wrap strong {
  font-weight: bold;
}
.post-entry em,
.post-wrap em,
.post-entry cite,
.post-wrap cite {
  font-style: italic;
}
.post-entry sup,
.post-wrap sup,
.post-entry sub,
.post-wrap sub {
  font-size: 0.75rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.post-entry sup,
.post-wrap sup {
  top: -0.5rem;
}
.post-entry sub,
.post-wrap sub {
  bottom: -0.2rem;
}
.post-entry small,
.post-wrap small {
  font-size: 0.85rem;
}
.post-entry acronym,
.post-wrap acronym,
.post-entry abbr,
.post-wrap abbr {
  border-bottom: 1px dotted;
}
.post-entry ul,
.post-wrap ul,
.post-entry ol,
.post-wrap ol,
.post-entry dl,
.post-wrap dl {
  font-size: 0.875rem;
  margin: 0.5rem 1rem;
  line-height: 1.5rem;
}
.post-entry ul ul,
.post-wrap ul ul,
.post-entry ol ul,
.post-wrap ol ul,
.post-entry ul ol,
.post-wrap ul ol,
.post-entry ol ol,
.post-wrap ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
.post-entry ul,
.post-wrap ul {
  list-style: disc;
}
.post-entry ol,
.post-wrap ol {
  list-style: decimal;
}
.post-entry dt,
.post-wrap dt {
  font-weight: bold;
}
.post-entry #myChart,
.post-wrap #myChart,
.post-entry #doughnut-chart,
.post-wrap #doughnut-chart {
  margin: 1.5rem 0;
}
#post-toc {
  position: fixed;
  top: 15%;
  right: 0.5rem;
  z-index: 999;
  padding: 1rem;
  width: 17rem;
  height: 30rem;
  overflow: auto;
  font-size: 0.875rem;
  list-style-type: none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-color: #f7f7f7;
}
#post-toc .title {
  font-weight: bold;
  font-size: 1.875rem;
}
#post-toc .toc-number {
  font-size: 0.8125rem;
}
#post-toc .toc > li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.4rem;
}
#post-toc .toc > li > a {
  width: 100%;
}
#post-toc .toc > li > ol,
#post-toc .toc > li ul > a {
  margin-top: 0.3rem;
}
#post-toc a:hover {
  color: #42a5f5;
}
#post-toc ul,
#post-toc ol,
#post-toc dl {
  margin: 0.4rem 1rem;
  list-style-type: none;
}
#post-toc ul ul,
#post-toc ol ul,
#post-toc ul ol,
#post-toc ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #011627;
  color: #d6deeb;
}
.hljs-keyword {
  color: #c792ea;
  font-style: italic;
}
.hljs-built_in {
  color: #addb67;
  font-style: italic;
}
.hljs-type {
  color: #82aaff;
}
.hljs-literal {
  color: #ff5874;
}
.hljs-number {
  color: #f78c6c;
}
.hljs-regexp {
  color: #5ca7e4;
}
.hljs-string {
  color: #ecc48d;
}
.hljs-subst {
  color: #d3423e;
}
.hljs-symbol {
  color: #82aaff;
}
.hljs-class {
  color: #ffcb8b;
}
.hljs-function {
  color: #82aaff;
}
.hljs-title {
  color: #dcdcaa;
  font-style: italic;
}
.hljs-params {
  color: #7fdbca;
}
.hljs-comment {
  color: #637777;
  font-style: italic;
}
.hljs-doctag {
  color: #7fdbca;
}
.hljs-meta {
  color: #82aaff;
}
.hljs-meta-keyword {
  color: #82aaff;
}
.hljs-meta-string {
  color: #ecc48d;
}
.hljs-section {
  color: #82b1ff;
}
.hljs-tag,
.hljs-name,
.hljs-builtin-name {
  color: #7fdbca;
}
.hljs-attr {
  color: #7fdbca;
}
.hljs-attribute {
  color: #80cbc4;
}
.hljs-variable {
  color: #addb67;
}
.hljs-bullet {
  color: #d9f5dd;
}
.hljs-code {
  color: #80cbc4;
}
.hljs-emphasis {
  color: #c792ea;
  font-style: italic;
}
.hljs-strong {
  color: #addb67;
  font-weight: bold;
}
.hljs-formula {
  color: #c792ea;
}
.hljs-link {
  color: #ff869a;
}
.hljs-quote {
  color: #697098;
  font-style: italic;
}
.hljs-selector-tag {
  color: #ff6363;
}
.hljs-selector-id {
  color: #fad430;
}
.hljs-selector-class {
  color: #addb67;
  font-style: italic;
}
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #c792ea;
  font-style: italic;
}
.hljs-template-tag {
  color: #c792ea;
}
.hljs-template-variable {
  color: #addb67;
}
.hljs-addition {
  color: #addb67;
  font-style: italic;
}
.hljs-deletion {
  color: rgba(239,83,80,0.565);
  font-style: italic;
}
@media only screen and (max-width: 2460px), only screen and (max-device-width: 2460px) {
  html,
  body {
    font-size: 1rem;
  }
  #header {
    display: none !important;
  }
}
@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) {
  html,
  body {
    font-size: 1rem;
  }
  #side {
    display: none !important;
  }
  #pagemap {
    display: none !important;
  }
  #header {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
  #container {
    padding: 0.2rem;
  }
  #container .main {
    margin-top: 3.5rem !important;
    padding: 0rem !important;
  }
  #container .posts .item .bg {
    height: 17rem !important;
  }
  #container .posts .item .describe .meta .l .warp .desp {
    display: none !important;
  }
  #search-shade .input-wrap {
    width: 90% !important;
  }
  #search-shade .search-result {
    width: 90% !important;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
.showSearch {
  -webkit-animation-name: showBounce;
  animation-name: showBounce;
}
.hiddenSearch {
  -webkit-animation-name: hiddenBounce;
  animation-name: hiddenBounce;
}
.showToc {
  -webkit-animation-name: showBounce;
  animation-name: showBounce;
}
.hiddenToc {
  -webkit-animation-name: hiddenBounce;
  animation-name: hiddenBounce;
}
.showMenuMask {
  -webkit-animation-name: showMenuMask;
  animation-name: showMenuMask;
}
.hideMenuMask {
  -webkit-animation-name: hideMenuMask;
  animation-name: hideMenuMask;
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-0.4s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.animated.delay-0.7s {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}
@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
@-moz-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-o-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-moz-keyframes showBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes showBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes showBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes showBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes hiddenBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
}
@-webkit-keyframes hiddenBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
}
@-o-keyframes hiddenBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes hiddenBounce {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
  }
}
@-moz-keyframes showMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes showMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes showMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes showMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes hideMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes hideMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-o-keyframes hideMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes hideMenuMask {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-moz-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-o-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-moz-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
#archives {
  padding: 1rem;
}
#archives .title {
  font-size: 2rem;
  margin-bottom: 2rem;
}
#archives .wrap {
  margin-bottom: 1rem;
}
#archives .meta > a {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  background-color: #bbdefb;
}
#archives .meta > a:hover {
  background-color: #e3f2fd;
}
#archives .year {
  margin-top: 1rem;
  margin-left: 1rem;
}
#archives .year .item {
  padding: 0.2rem 0.3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#archives .year .item a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#archives .year .item a span:nth-child(1) {
  color: #898989;
  font-size: 0.8rem;
  margin-right: 2rem;
}
#archives .year .item a span:nth-child(2) {
  font-size: 1rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
}
#archives .year .item a span:nth-child(2):hover {
  background-color: #e3f2fd;
}
#categories,
#tags {
  padding: 1rem;
}
#categories .title,
#tags .title {
  font-size: 2rem;
}
#categories li,
#tags li {
  list-style-type: none;
}
#categories .list,
#tags .list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
#categories .list li,
#tags .list li {
  cursor: pointer;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin: 0.2rem;
  background-color: #e3f2fd;
}
#categories .list li:hover,
#tags .list li:hover {
  background-color: #bbdefb;
}
#categories .list li sup,
#tags .list li sup {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  margin-left: 0.3rem;
  font-size: 0.625rem;
}
#categories .list .active,
#tags .list .active {
  background-color: #bbdefb;
}
#categories .post-wrap,
#tags .post-wrap {
  padding: 1rem 0.5rem;
}
#categories .post-wrap .post,
#tags .post-wrap .post {
  display: none;
  margin-top: 2rem;
}
#categories .post-wrap .active,
#tags .post-wrap .active {
  display: block;
}
#categories .post-wrap li,
#tags .post-wrap li {
  margin-bottom: 0.5rem;
}
#categories .post-wrap a,
#tags .post-wrap a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#categories .post-wrap a span:nth-child(1),
#tags .post-wrap a span:nth-child(1) {
  color: #898989;
  font-size: 0.8rem;
  margin-right: 2rem;
}
#categories .post-wrap a span:nth-child(2),
#tags .post-wrap a span:nth-child(2) {
  font-size: 1rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
}
#categories .post-wrap a span:nth-child(2):hover,
#tags .post-wrap a span:nth-child(2):hover {
  background-color: #e3f2fd;
}
#friends {
  padding: 1rem;
}
#friends .title {
  font-size: 2rem;
  margin-bottom: 3rem;
}
#friends ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
}
#friends ul a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#friends ul a:hover > .photo {
  transform: rotate(360deg);
}
#friends ul li {
  width: 50%;
  margin-bottom: 1rem;
}
#friends .photo {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  background-size: cover;
  background-position: center center;
  background-color: #c9c6c1;
  margin-right: 1rem;
  transition: all 0.5s;
}
#friends .list {
  min-height: 15rem;
  margin-bottom: 2rem;
}
#friends .meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#friends .name,
#friends .time {
  margin-bottom: 0.2rem;
  transition: all 0.3s;
}
#friends .name:hover,
#friends .time:hover {
  color: #1976db;
}
#friends .name {
  font-weight: bold;
  font-size: 1.2rem;
}
#friends .time {
  font-size: 0.75rem;
  color: #898989;
}
#friends blockquote {
  font-size: 0.875rem;
  margin: 0.9rem 0;
  text-align: left;
  padding: 0.5rem 1rem;
  color: #4d4d4c;
  border-radius: 0.2rem;
  background-color: #e3f2fd;
  line-height: 1.5rem;
  border-left: 0.45rem solid #1e88e5;
}
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1573718463074'); /* IE9 */
  src: url('iconfont.eot?t=1573718463074#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1573718463074') format('woff'),
  url('iconfont.ttf?t=1573718463074') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1573718463074#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
  content: "\e69a";
}

.icon-qqkongjian:before {
  content: "\e80f";
}

.icon-sousuo:before {
  content: "\e651";
}

.icon-dangdi:before {
  content: "\e6d7";
}

.icon-zuirehotxiankuang:before {
  content: "\e837";
}

.icon-douban:before {
  content: "\e64d";
}

.icon-github:before {
  content: "\e718";
}

.icon-weixin:before {
  content: "\e62b";
}

.icon-google:before {
  content: "\e692";
}

.icon-weibo:before {
  content: "\e608";
}

.icon-time-circle:before {
  content: "\e784";
}

.icon-eye1:before {
  content: "\e78f";
}

.icon-folder:before {
  content: "\e7d1";
}

.icon-tag1:before {
  content: "\e7e4";
}

.icon-share:before {
  content: "\e7e7";
}

.icon-right:before {
  content: "\e7eb";
}

.icon-left:before {
  content: "\e7ec";
}

.icon-arrowup:before {
  content: "\e7ee";
}

.icon-menu:before {
  content: "\e7f4";
}

.icon-alipay:before {
  content: "\e87c";
}

.icon-zhihu:before {
  content: "\e87d";
}

.icon-facebook:before {
  content: "\e87e";
}

.icon-instagram:before {
  content: "\e87f";
}

.icon-QQ:before {
  content: "\e882";
}

.icon-twitter:before {
  content: "\e883";
}

.icon-icon-test:before {
  content: "\e673";
}

.icon-icon-test1:before {
  content: "\e676";
}

.icon-rss:before {
  content: "\e6bb";
}

.icon-menu-:before {
  content: "\e600";
}


.overflow {
  overflow: hidden;
}
#header .icon-sousuo,
#side .icon-sousuo {
  font-size: 1.4rem !important;
}
#pagemap {
  display: inline-block;
  position: fixed;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  z-index: 999;
}
.hide {
  display: none !important;
}
#header {
  z-index: 999;
  position: fixed;
  width: 98%;
  height: 3.5rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  background-color: #f7f7f7;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#header .intro {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#header .logo {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  border-radius: 0.6rem;
  background-size: cover;
  background-position: center center;
  background-color: #c9c6c1;
}
#header .icon-menu {
  cursor: pointer;
  margin-top: 1rem;
  font-size: 1.5rem !important;
}
#header .search-box {
  font-weight: 600;
}
#side {
  top: 0;
  left: 0;
  width: 15rem;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  z-index: 999;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: fixed;
  transition: all 0.3s ease-out;
  box-sizing: border-box;
  background-color: #f7f7f7;
}
#side.active {
  width: 5rem;
}
#side.active .magnify {
  display: none;
}
#side.active .shrink {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#side .shrink {
  display: none;
  padding: 2rem 0;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#side .shrink .icon-menu {
  cursor: pointer;
  margin-top: 1rem;
  font-size: 2rem !important;
}
#side .shrink .search-box {
  font-weight: 600;
  margin-top: 1rem;
}
#side .magnify {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#side .magnify .bottom {
  flex: 1;
  padding: 2rem 1rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
#side .magnify .bottom .follow {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#side .magnify .bottom .follow a {
  width: 25%;
  padding: 0.25rem 0;
  border-radius: 0.3rem;
  text-align: center;
  text-decoration: none;
}
#side .magnify .bottom .follow a .iconfont {
  color: #333 !important;
  font-size: 1.5rem !important;
}
#side .magnify .bottom .follow a:hover {
  background-color: #dee0e2;
}
#side .about {
  padding: 2rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#side .about .author {
  font-size: 2rem;
  font-weight: 600;
}
#side .logo {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background-size: cover;
  background-position: center center;
  background-color: #c9c6c1;
}
#side .nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
#side .nav a {
  position: relative;
  border-radius: 0.1rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
}
#side .nav a:hover:before {
  height: 30%;
}
#side .nav a:before {
  content: '';
  display: block;
  width: 4rem;
  height: 0;
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  z-index: -1;
  margin-right: 4rem;
  border-radius: 0.2rem;
  background-color: #90caf9;
  transition: all 0.3s ease;
}
#side .nav .iconfont {
  font-weight: 600;
}
#side .nav .current:before {
  height: 50%;
}
#menu-mask {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #000;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#menu-mask .icon-close {
  cursor: pointer;
  color: #f0f0f0;
  font-weight: bolder;
  font-size: 2rem !important;
}
#menu-mask .nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 1rem;
}
#menu-mask .nav a {
  cursor: pointer;
  width: 100%;
  padding: 1rem;
  color: #a9a9a9;
  text-align: center;
  font-size: 1.3rem;
}
#menu-mask .nav a:hover {
  color: #fff;
}
#search-shade {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  padding: 2rem 0;
  display: none;
  background-color: #f1f1f1;
  box-sizing: border-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#search-shade .input-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  width: 60%;
  max-width: 800px;
  min-height: 5rem;
  box-sizing: border-box;
  background: #fff;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
#search-shade .input-wrap input {
  width: 100%;
  height: 100%;
  border: 0;
  color: #363636;
  outline: none;
  font-size: 1.5rem;
  padding: 0 1rem;
}
#search-shade .input-wrap .iconfont {
  font-size: 2rem !important;
}
#search-shade .input-wrap .icon-close {
  cursor: pointer;
}
#search-shade .search-result {
  overflow: auto;
  width: 60%;
  max-width: 800px;
  height: auto;
  background: #fff;
  border-radius: 0.5rem;
}
#search-shade .search-result .meta {
  margin: 1rem 2rem;
  height: 4rem;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-bottom: 1px dashed #363636;
}
#search-shade .search-result .meta img {
  width: 2.5rem;
  border-radius: 0.3rem;
}
#search-shade .search-result li {
  list-style-type: none;
}
#search-shade .search-result a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 5rem;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 0.3rem;
  box-sizing: border-box;
  transition: background-color 0.2s;
  border-bottom: 1px solid #e0e0e0;
}
#search-shade .search-result a:hover {
  background-color: #e3f2fd;
}
#search-shade .search-result a .left {
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 0.3rem;
  margin-right: 1rem;
  background-size: cover;
  background-position: center center;
}
#search-shade .search-result a .right {
  flex: 1;
}
#search-shade .search-result a .right .title {
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}
#search-shade .search-result a .right .time {
  color: #818181;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
#search-shade .search-result a .right .intro {
  font-size: 0.875rem;
}
#fixed-menu {
  bottom: 1rem;
  right: 1rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  position: fixed;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  z-index: 999;
  border-radius: 100%;
  background-color: #7f7f7f;
  transition: all 0.2s;
}
#fixed-menu:hover {
  transform: scale(1.1, 1.1);
}
#fixed-menu .iconfont {
  color: #fff;
  font-size: 1.5rem !important;
}
.menu-reset {
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) !important;
}
#fixed-menu-wrap {
  z-index: 999;
}
#fixed-menu-wrap span {
  bottom: 1rem;
  right: 1rem;
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
  text-align: center;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  border-radius: 100%;
  box-sizing: border-box;
  font-weight: bold;
  background-color: #313131;
  opacity: 1;
  transition: all 0.3s;
}
#fixed-menu-wrap span:nth-child(1) {
  font-size: 1rem;
  transform: translate3d(-170%, 0, 0);
}
#fixed-menu-wrap span:nth-child(2) {
  font-size: 0.75rem;
  transform: translate3d(-130%, -120%, 0);
}
#fixed-menu-wrap span:nth-child(3) {
  font-size: 0.875rem;
  transform: translate3d(-12%, -170%, 0);
}
#progress {
  top: 0;
  position: fixed;
  width: 100%;
  height: 0.2rem;
  text-align: left;
  z-index: 9999;
}
#progress .line {
  width: 0%;
  height: 0.2rem;
  background-color: #09f;
}
#container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}
#container .main {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 700px;
  padding: 2rem;
}
#container .main footer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  height: 5rem;
}
#container .main footer .copyright,
#container .main footer .icp {
  text-align: center;
  color: #7a7a7a;
  font-size: 0.75rem;
}
#container .main footer a {
  color: #1976d2;
}
#container .main footer a:hover {
  color: #42a5f5;
}
#container .navbar {
  width: 100%;
  height: 6rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#container .navbar .toggle {
  width: 30%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
#container .navbar .toggle .toggle-icon {
  font-size: 2rem !important;
  cursor: pointer;
  color: #0c0807;
}
#container .navbar .search {
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#container .navbar .search .input-warp {
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
  border-radius: 1rem;
  padding: 0.5rem;
  background-color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#container .navbar .search .input-warp .icon {
  color: #262626;
}
#container .navbar .search .input-warp input {
  width: 100%;
  border: 0;
  color: #c6c6c6;
  background-color: #fff;
  font-size: 1.1rem;
  caret-color: #333;
  outline: none;
}
#container .navbar .search ::-webkit-input-placeholder {
/* WebKit browsers */
  color: #c6c6c6;
  font-size: 1.1rem;
}
#container .navbar .search ::-moz-placeholder {
/* Mozilla Firefox 19+ */
  color: #c6c6c6;
  font-size: 1.1rem;
}
#container .navbar .search :-ms-input-placeholder {
/* Internet Explorer 10+ */
  color: #c6c6c6;
  font-size: 1.1rem;
}
#container .posts ul {
  list-style: none;
}
#container .posts .item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 10rem;
  border-radius: 0.3rem;
  margin-bottom: 2rem;
  background-color: #fff;
  transition: all 0.3s;
  border: 1px solid #e1e4e8;
}
#container .posts .item:hover {
  transform: translateY(-0.01rem);
}
#container .posts .item .bg {
  width: 100%;
  height: 20rem;
  overflow: hidden;
  border-bottom: 1px solid #e1e4e8;
}
#container .posts .item .bg .photo {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-size: cover;
  background-position: center center;
  background-color: #fff;
  transition: transform 0.4s ease-out;
}
#container .posts .item .bg .photo:hover {
  transform: scale(1.03, 1.03);
}
#container .posts .item .describe {
  flex: 1;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 1rem;
  font-size: 0.8rem;
}
#container .posts .item .describe .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#container .posts .item .describe .title a {
  color: #333;
  font-size: 1.5rem;
}
#container .posts .item .describe .title a:hover {
  color: #1976d2;
}
#container .posts .item .describe .date {
  color: #7a7a7a;
  font-size: 0.8rem;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#container .posts .item .describe .date .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.1rem;
}
#container .posts .item .describe .meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#container .posts .item .describe .meta .l {
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#container .posts .item .describe .meta .l .warp {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  margin-top: 0.3rem;
}
#container .posts .item .describe .meta .l .warp .desp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#container .posts .item .describe .meta .l .warp .desp a {
  color: #999;
  padding-right: 0.3rem;
}
#container .posts .item .describe .meta .l .warp .desp a:hover {
  color: #1e88e5;
}
#container .posts .item .describe .meta .l .warp .icon {
  cursor: pointer;
  color: #7a7a7a;
  width: 1.1rem;
  height: 1.1rem;
  transition: all 0.3s;
  margin-right: 0.5rem;
}
#container .posts .item .describe .meta .l .warp .icon:hover {
  color: #333;
  transform: scale(1.1, 1.1);
}
#container .posts .item .describe .meta .r {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  width: 40%;
  margin: 0.3rem 0;
}
#container .posts .item .describe .meta .r a {
  color: #333;
  display: inline-block;
  padding: 0.7rem;
  text-align: center;
  border-radius: 0.7rem;
  font-weight: 600;
  transition: all 0.3s;
  background-color: #fed336;
}
#container .posts .item .describe .meta .r a:hover {
  color: #fff;
  transform: scale(1.1, 1.1);
}
#container .posts .item .describe .excerpt {
  margin: 0.5rem 0;
}
#container .paginator {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
#container .paginator .current {
  color: #fff !important;
  border-color: #3273dc !important;
  background-color: #3273dc !important;
}
#container .paginator .page-number {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0.3rem;
  font-size: 0.9rem;
  border-radius: 5px;
  color: #0c0807;
  border-color: #3273dc;
  background-color: #f7f7f7;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.2s;
}
#container .paginator .page-number:hover {
  color: #fff !important;
  border-color: #3273dc !important;
  background-color: #3273dc !important;
}