:root {
  --crl-border-soild: 1px solid #e3e8f7;
  --crl-border-dashed: 1px dashed #e3e3e3;
  --crl-border-radius: 16px;
  --crl-card-bg: hsla(0, 0%, 4%, 0.51);
}

:root {
  --crl-color-main: #707b7c;
}

:root {
  --crl-div-radius: 8px;
}

:root {
  --crl-color-white: #fff;
}

:root {
  --crl-color-main-op: var(--crl-theme-op) !important;
}

:root {
  --crl-color-main-none: var(--crl-theme-none) !important;
}

:root {
  --crl-color-main: var(--crl-theme) !important;
}

:root {
  --crl-color-main-op: var(--crl-theme-op) !important;
}

:root {
  --crl-color-main-none: var(--crl-theme-none) !important;
}

:root {
  --crl-color-main: #202020 !important;
}

:root {
  --crl-color-main-op: #20202023 !important;
}

:root {
  --crl-color-main-none: #20202000 !important;
}

:root {
  --crl-color-main: #b83818 !important;
}

:root {
  --crl-color-main-op: #b8381823 !important;
}

:root {
  --crl-color-main-none: #b8381800 !important;
}

:root {
  --crl-color-main: #2040e0 !important;
}

:root {
  --crl-color-main-op: #2040e023 !important;
}

:root {
  --crl-color-main-none: #2040e000 !important;
}

:root {
  --crl-color-main: var(--crl-theme) !important;
}

:root {
  --crl-color-main-op: var(--crl-theme-op) !important;
}

:root {
  --crl-color-main-none: var(--crl-theme-none) !important;
}

:root {
  --crl-snackbar-time: 5000ms !important;
}

/* 弹窗 */
.snackbar-container {
  display: flex;
  justify-content: center;
  background: #707b7c !important;
  border-radius: 0px !important;
  max-width: none !important;
  min-width: 100% !important;
  margin: 0px !important;
  left: 0px !important;
  height: 60px !important;
  transform: none !important;
}

.snackbar-container p {
  font-weight: 700 !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  display: flex !important;
  justify-content: center !important;
  margin: auto !important;
}

.snackbar-container .action {
  font-weight: 700;
  transition: all 0.3s ease 0s;
  color: var(--crl-color-white) !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  border: var(--style-border) !important;
}

.snackbar-container .action:hover {
  color: var(--crl-color-main) !important;
  background: var(--crl-color-white) !important;
}

.snackbar-container::after {
  position: absolute;
  width: 0px;
  height: 100%;
  left: 0px;
  top: 0px;
  background: var(--crl-color-white);
  opacity: 0.1;
  content: "";
  animation: snackbar-progress 5000 linear forwards;
  pointer-events: none;
}

@keyframes snackbar-progress {
  0% {
    width: 0px;
  }

  100% {
    width: 100%;
  }
}

/*OWO*/
#owo-big {
  position: fixed;
  align-items: center;
  background-color: rgb(255, 255, 255);
  border: 1px #aaa solid;
  border-radius: 10px;
  z-index: 9999;
  display: none;
  transform: translate(0, -105%);
  overflow: hidden;
  animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
}

[data-theme=dark] #owo-big {
  background-color: #4a4a4a
}

#owo-big img {
  width: 100%;
}

/* 动画效果代码由 crl：https://blog.zhcrl.com/ 提供 */
@keyframes owoIn {
  0% {
    transform: translate(0, -95%);
    opacity: 0;
  }

  100% {
    transform: translate(0, -105%);
    opacity: 1;
  }
}

/* end OWO */

/* 友情链接 */
svg.icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 20px;
}

#recent-posts>.recent-post-item {
  position: relative;
}

/* 头像微调 */
.flink-item-icon {
  margin-right: 0 !important;
  transition: .5s !important;
}

.flink-item-name,
.flink-item-desc {
  padding-left: 10px !important;
}

#article-container .flink .flink-list>.flink-list-item {
  height: 100px;
  border-radius: var(--crl-div-radius);
  border: var(--crl-border-soild);
}

/* 去掉原来自带的before */
#article-container .flink .flink-list>.flink-list-item::before {
  content: none;
}

/* 鼠标经过改变背景 */
#article-container .flink .flink-list>.flink-list-item:hover {
  background-color: #61bcf2cc;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

/* 鼠标经过改变文字颜色 */
#article-container .flink .flink-list>.flink-list-item:hover a {
  color: white !important;
}

/* 鼠标经过头像滚动 */
#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
  width: 60px;
  margin-left: -70px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

/* end 友情链接 */
.post-info{
  text-align: center!important;
}
/* 评论区 */
.tk-avatar {
  box-shadow: var(--crl-shadow-border);
  width: 32px !important;
  height: 32px !important;
}

.tk-avatar.tk-has-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 100% !important;
}

.tk-row .tk-avatar {
  display: none;
}

.tk-avatar .tk-avatar-img {
  height: 32px !important;
}

.tk-avatar .tk-avatar-img:hover {
  transform: rotate(360deg);
}

img.tk-avatar-img {
  height: 32px !important;
}

.tk-avatar {
  margin-right: 0.5rem !important;
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1)::before {
  content: "输入QQ号会自动获取昵称和头像";
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2)::before {
  content: "收到回复将会发送到你的邮箱";
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3)::before {
  content: "可以通过昵称访问你的网站";
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
  display: block;
  animation: 0.3s ease 0s 1 normal none running commonTipsIn;
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
  display: block;
  animation: 0.3s ease 0s 1 normal none running commonTriangleIn;
}

.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
  display: none;
  position: absolute;
  top: -60px;
  white-space: nowrap;
  border-radius: 10px;
  left: 50%;
  transform: translate(-50%);
  padding: 14px 18px;
  background: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  z-index: 100;
}

.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
  display: none;
  content: "";
  position: absolute;
  border-width: 12px;
  border-style: solid;
  border-color: rgb(68, 68, 68) transparent transparent;
  border-image: initial;
  left: 50%;
  transform: translate(-50%, -46px);
}

.tk-nick {
  line-height: 32px;
  font-size: 1rem !important;
}

.el-input-group__append,
.el-input-group__prepend {
  background-color: var(--crl-card-bg) !important;
  color: var(--crl-fontcolor) !important;
  border-color: var(--crl-card-border) !important;
}

.el-input__inner {
  background: var(--crl-background) !important;
  border: 1px solid var(--crl-card-border) !important;
  color: var(--crl-fontcolor) !important;
}

.page .el-input__inner {
  background: var(--crl-card-bg) !important;
}

.el-input__inner:focus {
  border: 1px solid var(--crl-color-main) !important;
}

.el-textarea__inner {
  background: var(--crl-background) !important;
  color: var(--crl-fontcolor) !important;
  border-radius: 12px !important;
  min-height: 100px !important;
  padding: 16px 16px 40px !important;
  border: var(--style-border-always) !important;
}

@media screen and (max-width: 768px) {
  .el-textarea__inner {
    border-radius: 4px !important;
    background: var(--card-bg) !important;
  }
}

#page .el-textarea__inner {
  box-shadow: var(--crl-shadow-border);
  background: var(--crl-card-bg) !important;
}

.el-textarea__inner:focus {
  box-shadow: var(--crl-shadow-main);
  border: var(--style-border-hover-always) !important;
}

#page .tk-meta-input .el-input {
  box-shadow: var(--crl-shadow-border);
}

#twikoo .tk-row .tk-col {
  flex-direction: column-reverse !important;
}

#twikoo>div.tk-comments>div.tk-comments-container>div.tk-comments-title>span:nth-child(1) {
  display: none !important;
}

.tk-tag {
  transform: translateY(-2px);
}

.tk-tag-green {
  border-radius: 4px !important;
  border: 0px solid rgb(225, 243, 216) !important;
  font-size: 0.5rem !important;
}

[data-theme="dark"] .tk-tag-green {
  background-color: rgba(103, 194, 58, 0.13) !important;
}

.tk-tag-yellow {
  border-radius: 4px !important;
  border: 0px solid rgb(225, 243, 216) !important;
  font-size: 0.5rem !important;
}

[data-theme="dark"] .tk-tag-green {
  background-color: rgba(192, 194, 58, 0.13) !important;
}

.tk-tag-red {
  border-radius: 4px !important;
  border: 0px solid rgb(243, 216, 216) !important;
  font-size: 0.5rem !important;
}

[data-theme="dark"] .tk-tag-red {
  background-color: rgba(194, 58, 58, 0.13) !important;
}

.el-button {
  background-color: var(--crl-fontcolor) !important;
  border: 0 solid var(--crl-color-main) !important;
  color: var(--crl-background) !important;
  border-radius: 8px !important;
}

.el-button:hover {
  background: var(--crl-color-main) !important;
  color: var(--crl-color-white) !important;
}

.el-button.tk-preview {
  display: none !important;
}

#twikoo>div.tk-comments>div.tk-submit>div.tk-row.actions>a {
  display: none !important;
}

#twikoo {
  z-index: 102;
}

.twikoo-info {
  color: var(--crl-secondtext);
}

.tk-action-link {
  color: var(--crl-lighttext) !important;
}

.tk-action-icon svg {
  fill: var(--crl-lighttext) !important;
}

button.el-button.tk-cancel.el-button--default.el-button--small {
  background: var(--crl-secondbg) !important;
  border-radius: 8px !important;
  color: var(--crl-fontcolor) !important;
}

.tk-submit-action-icon.__markdown {
  display: none;
}

.tk-comments .el-button--primary {
  box-shadow: var(--crl-shadow-black);
  transition: all 0.3s ease 0s;
  width: 5rem;
  position: absolute;
  top: -53px;
  right: 0px;
  height: 32px;
  border-color: var(--crl-fontcolor) !important;
  color: var(--crl-card-bg) !important;
  border-radius: 4px !important;
  margin-left: 0.5rem !important;
}

.tk-comments .el-button--primary.is-disabled,
.tk-comments .el-button--primary.is-disabled:active,
.tk-comments .el-button--primary.is-disabled:focus,
.tk-comments .el-button--primary.is-disabled:hover {
  opacity: 0.4;
}

.tk-row-actions-start {
  position: absolute;
  top: -100px;
  left: 17px;
}

@media screen and (max-width: 768px) {
  .tk-submit .el-button--primary {
    width: 5rem;
    height: 132px;
    top: -161px;
  }

  .tk-row-actions-start {
    top: -210px;
  }
}

.tk-comments-title {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.tk-extras {
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tk-icon.__comments:first-child {
  display: none;
}

.tk-icon.__comments {
  margin-left: 0px !important;
}

.tk-row.actions {
  margin-bottom: 0.5rem !important;
  margin-left: 0px !important;
  margin-top: 0.5rem !important;
  justify-content: space-around !important;
}

.tk-meta-input {
  margin-top: 0.8rem;
  width: calc(100% - 5.5rem);
  position: relative !important;
}

#post-comment blockquote {
  background: var(--crl-secondbg);
  border: var(--style-border);
  box-shadow: none;
  margin: 0px 0px 0.5rem;
  font-size: 0.6rem;
  color: var(--crl-secondtext);
  border-radius: 8px;
}

.tk-content .tk-owo-emotion {
  width: 3em;
  margin: 0px 2px;
}

.OwO .OwO-body .OwO-bar .OwO-packages li {
  line-height: 45px !important;
  font-size: 28px !important;
}

.OwO .OwO-body {
  z-index: 102;
  width: 500px;
}

#owo-big {
  position: fixed;
  align-items: center;
  background-color: var(--crl-card-bg);
  border: var(--style-border-always);
  border-radius: 10px;
  z-index: 9999;
  display: none;
  transform: translate(0px, -105%);
  overflow: hidden;
  animation: 0.3s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running owoIn;
  padding: 1rem;
}

#owo-big img {
  width: 100%;
}

.tk-owo-emotion,
.twikoo .OwO-item img {
  pointer-events: none;
}

.tk-extra {
  background: var(--crl-card-bg);
  border: var(--style-border-always);
  padding: 1px 5px 1px 2px;
  border-radius: 8px;
  font-size: 0.5rem;
  margin-right: 4px !important;
  color: var(--crl-secondtext) !important;
  display: inline !important;
  margin-top: 6px !important;
}

.tk-extra .tk-icon {
  display: none;
}

.tk-expand {
  border: var(--style-border-always);
  box-shadow: var(--crl-shadow-border);
  border-radius: 12px;
  background: var(--crl-card-bg) !important;
  color: var(--crl-fontcolor) !important;
}

.tk-expand:hover {
  background: var(--crl-theme) !important;
  color: var(--crl-color-white) !important;
}

.tk-time {
  font-size: 0.8rem;
  margin-left: 0.5rem;
  color: var(--crl-secondtext) !important;
}

.tk-comments-container>.tk-comment {
  background: var(--crl-card-bg);
  transition: all 0.3s ease 0s;
  border-radius: 12px;
  padding: 0.5rem 0px 0px;
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-image: initial;
  border-top: var(--style-border-dashed);
  margin-top: 0px !important;
  margin-bottom: 0.5rem !important;
}

#page .tk-comments-container>.tk-comment {
  padding: 1rem 1rem 1.5rem;
}

.tk-comments-container>.tk-comment {
  padding: 1rem;
  border: var(--style-border-always);
  box-shadow: var(--crl-shadow-border);
}

.tk-icon.__comments {
  left: 0.5rem;
}
}

.tk-icon {
  position: absolute;
}

#post-comment .comment-head {
  margin-bottom: 0.5rem;
  font-size: 0.8em !important;
}

.tk-comments-no {
  display: none !important;
}

.tk-comments-container {
  margin-top: 0.5rem;
  min-height: 0px !important;
}

.tk-replies>.tk-comment {
  background: var(--crl-card-bg);
  border-top: var(--style-border-dashed);
  border-radius: 12px;
  padding: 1rem 0px 0px;
  transition: all 0.3s ease 0s;
  margin-top: 0px;
}

.tk-content p {
  margin: 0px !important;
}

.tk-replies .tk-content span:first-child {
  font-size: 0.5rem;
  color: var(--crl-secondtext);
}

@media screen and (max-width: 768px) {
  .tk-meta-input .el-input .el-input-group__prepend {
    padding: 0px 0.3rem !important;
  }

  .tk-meta-input {
    display: flex;
    flex-direction: column;
    top: 0px;
    position: inherit !important;
  }

  .tk-meta-input .el-input {
    margin-bottom: 8px;
    margin-left: 0px !important;
    width: 100% !important;
  }

  .tk-icon {
    position: absolute;
    right: 0px;
  }
}

/* end 评论区 */

#statistic {
  font-size: 18px;
  padding: 20px;
  border-radius: var(--crl-div-radius);
  width: 100%;
  color: var(--font-color);
  background-color: var(--card-bg);
}

div#statistic .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div#statistic a {
  text-decoration: none;
}

#statistic .content div {
  display: inline-block;
}

#statistic div span {
  font-size: 14px;
  line-height: 1.3;
  display: block;
}

#statistic div .num {
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: .8rem;
}

.post-bg #post-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 首页分类条展示 */
#category-bar {
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  background: var(--crl-card-bg);
  border-radius: var(--crl-div-radius);
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 1rem;
  border: var(--style-border);
}

@media screen and (max-width: 768px) {
  #category-bar {
    border-radius: 0;
  }
}

#category #category-bar {
  padding: 0;
  border: none;
}

#category a.category-bar-item.select a {
  display: none;
}

.category-in-bar {
  display: flex;
  white-space: nowrap;
}

.category-in-bar-tips {
  margin-right: 1rem;
}

.category-bar-items {
  white-space: nowrap;
  overflow-x: scroll;
  display: flex;
}



.category-bar-items::-webkit-scrollbar {
  display: none;
}

.category-bar-item a {
  padding: 0.1rem 0.5rem;
  margin: 0 0.25rem;
  font-weight: bold;
  border-radius: 12px;
}

.category-bar-item:hover a {
  background: var(--crl-color-main);
  color: var(--crl-color-white);
}

.category-bar-item.select a {
  background: var(--crl-color-main);
  color: var(--crl-color-white);
  border-radius: 12px;
}

.category-bar-more {
  margin-left: 1rem;
  font-weight: bold;
}

/**首页*/
:root {
  --mj-white: #fff;
  --mj-card-bg: #fff;
  --mj-theme: #425AEF;
  --mj-main: #425AEF;
  --mj-secondbg: #ededed;
  --mj-card-border: #e3e8f7;
  --style-border: var(--crl-border-soild) var(--mj-card-border);
  --style-hover-border: var(--crl-border-soild) var(--mj-theme);
}

/* home top */
#home_top {
  max-width: 1500px;
  width: 100%;
  margin-top: .5rem;
  padding: 0 15px;
  margin: 0 auto;
}

.home_top_group {
  border-radius: 12px;
  overflow: auto;
  width: 100%;
  margin-bottom: 0;
}

.homeTopGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 1rem;
  overflow: auto;
  overflow-x: score;
  border-radius: 12px;
}

.homeTopGroup::-webkit-scrollbar {
  display: none;
}

.homeTopGroup #banner_group {
  display: flex;
}

div#banners {
  display: none;
}

@media screen and (min-width: 1300px) {
  .homeTopGroup #banner_group {
    width: calc(100% - 600px - 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  div#banners {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--mj-main);
    margin-bottom: .5rem;
    margin-right: .5rem;
    border: var(--style-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }

  div#banners:hover {
    border: var(--style-hover-border);
  }

  .homeTopGroup .category_group {
    flex-direction: row !important;
  }

  .homeTopGroup .category_item {
    width: calc(100% / 3 - .33rem);
    height: 100% !important;
    margin-right: .5rem;
  }

  .homeTopGroup .category_item:nth-child(3) {
    margin-right: 0;
    display: flex !important;
  }

  #banner-page {
    width: 100%;
    height: 100%;
  }

  .top_post_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    height: calc(328px + .5rem);
    align-content: space-between;
    width: calc(600px + 1.5rem);
  }
}

.homeTopGroup .category_group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px;
}

.homeTopGroup .category_item {
  overflow: hidden;
  transform: scale(1);
  transition: .3s;
  height: 48%;
  border-radius: 12px;
}

.homeTopGroup .category_item:nth-child(3) {
  display: none;
}

.homeTopGroup .category_item a.category_button {
  height: 100%;
  width: 100%;
  background: var(--mj-card-bg);
  border-radius: 12px;
  display: inline-block;
  text-align: left;
  line-height: 4em;
  font-weight: 700;
  font-size: .9rem;
  color: var(--mj-white);
  transition: all .4s cubic-bezier(.39, .575, .565, 1);
  transform: scale(1);
  overflow: hidden;
  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei;
}

.category_button_text {
  padding-left: 25px;
}

a.category_button i {
  font-size: 3rem;
  opacity: .3;
  position: absolute;
  right: 15px;
  top: 10%;
  transition: .3s;
  transform: rotate(-10deg);
  /*width: 100px;
  text-align: center;*/
}

a.category_button:hover i {
  opacity: .8;
  transition: .8s;
  transition-delay: .15s;
  transform: scale(1.1)
}

a.category_button:hover:after {
  width: 3rem;
  transition: .8s;
}

a.category_button:after {
  top: 40px;
  width: 1rem;
  left: 25px;
  height: 2px;
  background: var(--mj-white);
  content: "";
  border-radius: 1px;
  position: absolute;
  transition: .8s;
}

@media screen and (max-width: 768px) {
  #home_top {
    padding: 0 5px;
  }

  .homeTopGroup .category_group {
    min-width: 130px !important;
  }

  .top_post_group .top_post_item {
    border-radius: 0;
  }
}

.top_post_group {
  display: flex;
  position: relative;
}

.top_post_group .top_post_item {
  display: flex;
  width: 200px;
  min-width: 200px;
  height: 164px;
  max-height: 164px;
  flex-direction: column;
  align-items: flex-start;
  margin-left: .5rem;
  background: var(--mj-card-bg);
  border-radius: var(--crl-div-radius);
  overflow: hidden;
  border: var(--style-border);
}

.top_post_group .top_post_item:hover {
  border: var(--style-hover-border);
}

.top_post_group .top_post_item .post_cover {
  width: 100%;
  height: 110px;
  position: relative;
}

.top_post_group .top_post_item .post_cover img {
  object-fit: cover;
  width: 100%;
  height: 110px;
  background: var(--mj-secondbg);
}

.top_post_group .top_post_item .post_cover .post_cover_info {
  position: absolute;
  top: 0;
  width: 101%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7) !important;
  transition: all 0.3s ease;
  display: flex;
}

.top_post_group .top_post_item:hover .post_cover .post_cover_info {
  opacity: 1;
}

.top_post_group .top_post_item .post_cover .post_cover_info .post_cover_text {
  color: #fff;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 400;
  margin: 20px 0;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.top_post_group .top_post_item:hover .post_info,
.top_post_group .top_post_item:focus .post_info {
  /*background: var(--mj-theme);*/
  box-shadow: inset 0 -60px 0 0 var(--mj-theme);
}

.top_post_group .top_post_item .post_info a {
  color: var(--mj-fontcolor) !important;
  transition: 0;
}

.top_post_group .top_post_item:hover .post_info a {
  color: var(--mj-white) !important;
}

.top_post_group .top_post_item .post_info {
  padding: .2rem .5rem .3rem .5rem !important;
  transition: .3s;
  width: 100%;
  height: 100%;
}

.top_post_group .top_post_item .post_info .article-title {
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  font-weight: 600;
  font-size: .8rem !important;
  padding: 0 !important;
}


/**背景*/
/* 由于全屏会出bug，所以直接给他隐藏 */

.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme='dark'] .wb-body,
[data-theme='dark'] #changeBgBox {
  background: #333 !important;
}

.bgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
  width: 166px;
  margin: 10px;
  background-size: cover
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

.box {
  height: 100px;
}

/* 老用户如果不再使用页面版可删除下面代码 */
/* #color {
  border: none;
  background: transparent;
  width: 166px;
  height: 110px;
  margin: 5px 10px;
  position: relative;
  cursor: pointer;
}

#color::before {
  position: absolute;
  color: rgb(255, 255, 255);
  left: 38px;
  top: 44px;
  content: '自定义颜色';
} */

@media screen and (max-width: 768px) {

  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
    height: 73px;
    width: 135px;
  }

  .pimgbox {
    height: 205px;
  }

  /* 老用户如果不再使用页面版可删除下面代码 */
  /* #color {
      width: 141px;
      height: 83px;
      margin: 7px;
  }
  #color::before {
      left: 33px;
      top: 33px;
  }     */

  /* 2.0新增内容 */
  .wb-min {
    display: none;
  }

  #changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
  }
}

/* 最新文章图标 */
.newPost-left,
.newPost-right {
  position: absolute;
  top: 0;
  color: white;
  padding: 0 15px;
  background-color: #49b1f5;
  border-radius: 0 0 10px 10px;
}

.newPost-left {
  left: 15px;
}

.newPost-right {
  right: 15px;
}

/* 标签 */
#aside-content .card-tag-cloud a {
  border: var(--crl-border-soild);
  line-height: 1.5;
  border-radius: 6px;
  margin: 3px;
  padding: 0 5px;
}

.tag-cloud-list a {
  border: var(--crl-border-soild);
  line-height: 1.5;
  border-radius: 6px;
  padding: 5px 15px;
  font-size: 1.2rem;
  margin: 5px;
}

/*夜间模式*/
[data-theme=dark] {
  --search-bg: rgb(47 48 50);
  --card-bg: rgb(47 48 50 / 50%);
  --scrollbar-color: #555
}

/*透明度END*/
/*单个分类*/
.page #category .category-list-bar,
#tag .tag-list-bar {
  width: 100%;
  height: 3rem;
  background-color: var(--kk-card-bg);
  border-radius: 0.5rem;
  line-height: 3rem;
  display: flex;
}

.page #category .category-list-bar .iconfont,
#tag .tag-list-bar .iconfont {
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-size: 1.25rem;
}

.page #category .category-list-bar .lists,
#tag .tag-list-bar .lists {
  width: calc(100% - 3rem);
  overflow: scroll;
}

.page #category .category-list-bar .lists::-webkit-scrollbar,
#tag .tag-list-bar .lists::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.page #category .category-list-bar .lists ul,
#tag .tag-list-bar .lists ul {
  width: max-content;
  height: 3rem;
  display: flex;
  align-items: center;
}

.page #category .category-list-bar .lists .category-list .category-list-item,
#tag .tag-list-bar .lists ul a {
  padding: 0 0.4rem;
  margin: 0 0.3rem;
  height: 2rem;
  line-height: 2rem;
  /*background: #fff;*/
  border-radius: 0.4rem;
  transition: 0.2s;
}

.page #category .category-list-bar .lists .category-list .category-list-item:hover,
.page #category .category-list-bar .lists .category-list .category-list-item.checked,
#tag .tag-list-bar .lists ul a:hover,
#tag .tag-list-bar .lists ul a.checked {
  background-color: var(--kk-border-white);
}

.page #category .category-list-bar .lists .category-list .category-list-item span {
  display: none;
}

/*漫天繁星**/
#universe {
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#footer {
  background: 0 0
}

#footer::before {
  content: none
}

[data-theme=dark] #footer::before {
  content: none
}

div#footer_icon {
  border-radius: 15px 15px 0 0;
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

#footer_icon i {
  padding-top: 1px;
  font-size: 20px;
  color: #fff;
  transition: .3s
}

a.icon_link {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  background-color: var(--font-color);
  border-radius: 3rem
}

[data-theme=dark] a.icon_link {
  background-color: #ececec
}

[data-theme=dark] #footer_icon i {
  color: #202020
}

#footer_icon a:hover {
  background-color: #49b1f5
}

[data-theme=dark] #footer_icon a:hover i {
  color: #fff
}

.icon_left,
.icon_right {
  display: flex
}

img.footer_logo {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
  cursor: pointer;
  filter: drop-shadow(0 0 12px rgba(187, 138, 64, .35));
  transition: cubic-bezier(0, 0, 0, 1.29) .5s;
  transition: all .25s
}

img.footer_logo:hover {
  filter: drop-shadow(0 0 15px rgba(187, 138, 64, .7))
}

#footer_icon,
#crl-footer {
  margin: auto;
  max-width: 1200px;
  width: 97%;
  background: rgba(245, 249, 255, .6)
}

[data-theme=dark] #footer_icon,
[data-theme=dark] #crl-footer {
  background: rgba(24, 24, 30, .5)
}

#crl-footer {
  border-radius: 0 0 15px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding: 0 2rem 2rem
}

#crl-footer .footer-group {
  min-width: 120px
}

#crl-footer .footer-title {
  color: var(--font-color)
}

#crl-footer .footer-links {
  display: flex;
  flex-direction: column
}

#crl-footer .footer-item {
  font-size: 1rem;
  line-height: 1;
  margin: .38rem 0;
  color: var(--font-color)
}

#footer-bottom {
  font-size: 1rem;
  padding: 1rem;
  color: var(--font-color);
  margin-top: 1rem;
  background: var(--card-bg);
  display: flex !important;
  overflow: hidden;
  z-index: 1002;
  transition: .3s;
  border-top: 1px solid #e3e8f7
}

#footer-bottom .footer-bottom-links {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap
}

#footer-bottom .footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
  min-height: 32px;
  color: var(--font-color);
  font-weight: 700;
  white-space: nowrap
}

#footer-bottom>div>div.footer-bottom-left>span {
  margin-right: 1rem
}

#footer-bottom .footer-bottom-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

#footer-bottom .footer-bottom-link {
  margin-right: 1rem;
  color: var(--font-color);
  font-weight: 700;
  white-space: nowrap
}

@media screen and (max-width:768px) {
  ul.menus_item_child {
    padding-left: 40px !important
  }

  #rightMenu {
    display: none;
  }

  #bber-talk {
    padding: 0 12px 0 8px
  }

  #crl-footer {
    padding: 1rem
  }

  #crl-footer .footer-group {
    text-align: center
  }

  #footer-bottom {
    padding: 1rem 0
  }

  #footer-bottom .footer-bottom-link {
    margin-right: .5rem
  }

  .footer-bottom-left,
  .footer-bottom-right {
    width: 100%;
    justify-content: center
  }

  img.footer_logo {
    display: none
  }
}

:root {
  --crl-border-soild: 1px solid #e3e8f7;
  --crl-border-dashed: 1px dashed #e3e3e3;
  --crl-border-radius: 16px;
  --crl-div-radius: 8px;
}

/**圆角*/
#recent-posts>.recent-post-item {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* 目录圆角 */
#aside-content #card-toc .toc-content .toc-link.active {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* 修改图片圆角 */
img[src*="#img-radius"] {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* 侧边栏圆角 */
#aside-content .card-widget {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* 文章页圆角 */
.layout>div:first-child:not(.recent-posts) {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* 双栏卡片圆角 */
#recent-posts>.recent-post-item {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}

/* github按钮圆角 */
#card-info-btn {
  border-radius: var(--crl-border-radius);
  overflow: hidden;
  border: var(--crl-border-soild);
}

#card-info-btn:before {
  border-radius: var(--crl-border-radius);
  border: var(--crl-border-soild);
}


/*进度条*/
/* 在下面修改进度条外观 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: .3s ease-in
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%
}

.pace.pace-inactive {
  opacity: 0;
  transition: .3s;
  top: -8px
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/*字体*/
@font-face {
  font-family: 'hmos';
  /* 字体名自定义即可 */
  src: url('/crl/fonts/HMOS.ttf')format('ttf');
  /* 字体文件路径 */
  font-display: swap;
}

@font-face {
  font-family: 'crl';
  /* 字体名自定义即可 */
  src: url('/crl/fonts/crl-blog.woff2')format('woff2');
  /* 字体文件路径 */
  font-display: swap;
}

@font-face {
  font-family: 'hmos_code';
  /* 字体名自定义即可 */
  src: url('/crl/fonts/HMOS_CODE.ttf')format('ttf');
  /* 字体文件路径 */
  font-display: swap;
}

@font-face {
  font-family: 'hmos_pro';
  /* 字体名自定义即可 */
  src: url('/crl/fonts/HMOS.woff2')format('woff2');
  /* 字体文件路径 */
  font-display: swap;
}

@font-face {
  font-family: 'hmos_code_pro';
  /* 字体名自定义即可 */
  src: url('/crl/fonts/HMOS_CODE.woff2')format('woff2');
  /* 字体文件路径 */
  font-display: swap;
}

/*字体*/

/*导航条*/
@-webkit-keyframes aplayer-roll {
  0% {
    left: 0
  }

  to {
    left: -100%
  }
}

@keyframes aplayer-roll {
  0% {
    left: 0
  }

  to {
    left: -100%
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

/** 指针样式**/
body {
  cursor: url('/crl/img/x1.cur'), default;
}

a:hover {
  cursor: url('/crl/img/x2.cur'), pointer;
}

/** end 指针样式**/

/* menu 右键菜单 */
/* rightMenu */
#rightMenu {
  display: none;
  position: fixed;
  width: 160px;
  height: fit-content;
  top: 10%;
  left: 10%;
  background-color: var(--card-bg);
  border: 1px solid var(--font-color);
  border-radius: 8px;
  z-index: 100;
}

#rightMenu .rightMenu-group {
  padding: 7px 6px;
}

#rightMenu .rightMenu-group:not(:nth-last-child(1)) {
  border-bottom: 1px solid var(--font-color);
}

#rightMenu .rightMenu-group.rightMenu-small {
  display: flex;
  justify-content: space-between;
}

#rightMenu .rightMenu-group .rightMenu-item {
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  transition: 0.3s;
  color: var(--font-color);
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 4px;
}

#rightMenu .rightMenu-group .rightMenu-item:hover {
  background-color: var(--text-bg-hover);
}

#rightMenu .rightMenu-group .rightMenu-item i {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}

#rightMenu .rightMenu-group .rightMenu-item span {
  line-height: 30px;
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item * {
  height: 40px;
  line-height: 40px;
}

.rightMenu-group.hide {
  display: none;
}

/* end 右键菜单 */

/* nav 菜单栏修改 */
#site-name::before {
  opacity: 0;
  background-color: var(--lyx-theme) !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  content: "\f015";
  box-shadow: 0 0 5px var(--lyx-theme);
  font-family: "Font Awesome 6 Free";
  text-align: center;
  color: white;
  line-height: 34px;
  /*如果有溢出或者垂直不居中的现象微调一下这个参数*/
  font-size: 18px;
  /*根据个人喜好*/
}

#site-name:hover::before {
  opacity: 1;
  scale: 1.03;
}

#site-name {
  position: relative;
  font-size: 24px;
  /*一定要把字体调大点，否则效果惨不忍睹！*/
}

:root {
  --lyx-theme: #707b7c
    /*我的主题色*/
}

#nav a:hover {
  background: var(--crl-color-main);
  transition: 0.3s;
}

#nav-totop:hover .totopbtn i {
  opacity: 1;
}

#nav-totop #percent {
  font-size: 12px;
  background: var(--crl-color-white);
  color: var(--crl-color-main);
  width: 25px;
  height: 25px;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

.nav-fixed #nav-totop #percent,
.page #nav-totop #percent {
  background: var(--crl-font-color);
  color: var(--crl-card-bg);
}

#nav-totop {
  width: 35px;
}

#page-header:not(.is-top-bar) #percent {
  transition: 0.3s;
}

#page-header:not(.is-top-bar) #nav-totop {
  width: 0;
  opacity: 0;
  transition: width 0.3s, opacity 0.2s;
  margin-left: 0 !important;
}

#nav-totop #percent {
  font-weight: 700;
}

#nav-totop:hover #percent {
  opacity: 0;
  transform: scale(1.5);
  font-weight: 700;
}

.nav-fixed #nav-totop #percent,
.page #nav-totop #percent {
  font-size: 13px;
}

#page-header #nav #nav-right div {
  margin-left: 0.5rem;
  padding: 0;
}

#nav-totop {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.nav-button {
  cursor: pointer;
}

div#menus {
  display: flex;
  align-items: center;
}

#page-header #nav .nav-button a {
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nav .site-page {
  padding-bottom: 0px;
}

#nav *::after {
  background-color: transparent !important;
}

/* 顶栏修改 */
#nav .menus_items .menus_item .menus_item_child li:hover a {
  color: white !important;
}

#nav .menus_items .menus_item .menus_item_child li {
  margin: 6px;
  border-radius: 5px !important;
  transition: all 0.3s;
}

#site-name,
.shuoshuo {
  white-space: nowrap;
  overflow: hidden;
}

#site-name {
  padding: 0 8px;
  position: relative;
}

#site-name *:not(i):hover {
  display: none !important;
}

#blog_name #site-name:hover::after {
  opacity: 1;
  transform: scale(1.01);
}

#blog_name #site-name::after {
  opacity: 0;
  background-color: var(--crl-color-main) !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '\f015';
  box-shadow: 0 0 5px var(--crl-color-main);
  font-family: 'Font Awesome 6 Free';
  text-align: center;
  color: white;
}

#site-name i {
  position: absolute;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
  left: 0;
  opacity: 0;
}

#site-name:hover i {
  opacity: 1;
}

.search-dialog {
  border-radius: var(--crl-border-radius);
  background-color: rgb(47 48 50 / 50%);
  border: var(--crl-border-soild);
  padding: 4px;
}

.local-search__hit-item {
  margin-top: 8px;
  border: var(--crl-border-dashed);
  border-radius: var(--crl-div-radius);
  padding: 4px;
}


.search-dialog-title {
  font-style: black;
}

#local-search .search-dialog .search-result-list {
  overflow-y: auto;
  max-height: 400px
}

/* 横向排布子菜单 */
#nav .menus_items .menus_item .menus_item_child li {
  display: inline-block;
}

/* 圆角隐藏 */
ul.menus_item_child {
  overflow: hidden;
  border-radius: 5px;
}

/* 一级菜单居中 */
#nav .menus_items {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 60px;
}

#nav .menus_items .menus_item:hover .menus_item_child {
  display: block;
  transform: translateX(-50%);
  right: auto;
  left: auto !important;
}

#nav .menus_items .menus_item:hover {
  padding: 0 5px 27px 5px !important;
  margin-bottom: -15px !important;
}

#nav .menus_items .menus_item .menus_item_child {
  top: 44px;
}

@media screen and (min-width: 768px) {
  .page .menus_item:hover>a.site-page {
    color: var(--anzhiyu-white) !important;
    background: var(--crl-color-main);
    transition: 0.3s;
    box-shadow: var(--anzhiyu-shadow-main);
  }
}

#nav .menus_items .menus_item:hover .menus_item_child {
  padding: 6px 4px;
  box-sizing: content-box;
  line-height: 35px;
}

#nav .menus_items .menus_item .menus_item_child li {
  margin: 0 3px;
}

#nav .menus_items .menus_item .menus_item_child li a {
  padding: 2px 16px;
}

.nav-fixed #nav {
  transform: translateY(58px) !important;
  -webkit-transform: translateY(58px) !important;
  -moz-transform: translateY(58px) !important;
  -ms-transform: translateY(58px) !important;
  -o-transform: translateY(58px) !important;
}

#nav {
  padding: 0 calc((100% - 1420px) / 2);
  transition: 0.3s;
  background: var(--anzhiyu-maskbgdeep);
  backdrop-filter: saturate(180%) blur(20px);
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

#nav a {
  border-radius: 8px;
  color: var(--font-color);
}

.page #nav a:hover {
  color: var(--anzhiyu-white) !important;
  background: var(--crl-color-main);
  transition: 0.3s;
  box-shadow: var(--anzhiyu-shadow-main);
}

#menus>div.menus_items>div>a {
  letter-spacing: 0.3rem;
  font-weight: 700;
  padding: 0em 0.3em 0em 0.5em;
  height: 35px;
}

#nav .menus_items .menus_item {
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
}

#menus>div.menus_items>div>a {
  line-height: 35px;
}

#page-header #nav a:hover,
#page-header.nav-fixed #nav a:hover,
#page-header.nav-fixed #nav #site-name:hover,
#page-header.nav-fixed #nav #toggle-menu:hover {
  color: var(--anzhiyu-white);
}

#nav-totop .totopbtn i {
  position: absolute;
  display: flex;
  opacity: 0;
}

#page-name::before {
  font-size: 18px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  color: white !important;
  top: 0;
  left: 0;
  content: '回到顶部';
  background-color: var(--crl-color-main);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  opacity: 0;
  box-shadow: 0 0 3px var(--crl-color-main);
  line-height: 45px;
  /*如果垂直位置不居中可以微调此值，也可以删了*/
}

#page-name:hover:before {
  opacity: 1;
}

#name-container {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

#name-container:hover {
  transform: translateX(-50%) scale(1.03);
}

#page-name {
  position: relative;
  padding: 10px 30px;
}

center#name-container {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'ZhuZiAYuanJWD';
}

.nav-fixed.nav-visible #name-container {
  top: 60px;
  transition: 0.3s;
}

.nav-fixed.nav-visible #menus .menus_items {
  bottom: -0px;
  transition: 0.3s;
  line-height: 60px;
}

.nav-fixed #menus .menus_items {
  bottom: 60px;
  transition: 0.3s;
}

.nav-fixed #name-container {
  top: 15%;
  transition: 0.3s;
}

#name-container {
  bottom: 60px;
}

.mask-name-container {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .mask-name-container {
    width: 600px;
  }
}

@media screen and (max-width: 500px) {
  .mask-name-container {
    display: none;
  }
}

#sidebar #sidebar-menus .menus_items .site-page:hover {
  color: var(--anzhiyu-white);
  border-radius: var(--anzhiyu-border-radius);
}

#nav .menus_items .menus_item>a>i:last-child {
  display: none;
}

#nav #search-button {
  font-size: 1.3em;
}

#page-header.not-top-img #nav .back-home-button {
  color: var(--anzhiyu-fontcolor);
}

@media screen and (min-width: 900px) {
  #nav .back-home-button:hover {
    box-shadow: var(--anzhiyu-shadow-main);
  }
}

.back-home-button:hover {
  background: var(--crl-color-main);
  color: var(--anzhiyu-white) !important;
}

.back-home-button {
  display: flex;
  width: 35px;
  height: 35px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  transition: 0.3s;
  border-radius: 8px;
  color: var(--anzhiyu-white);
}

.back-home-button:hover .back-menu-list-groups {
  display: flex;
  opacity: 1;
  transition: 0.3s;
  top: 55px;
  pointer-events: auto;
  left: 0;
}

.back-home-button .back-menu-list-groups {
  position: absolute;
  top: 65px;
  left: 0;
  background: var(--anzhiyu-card-bg);
  border-radius: 12px;
  border: var(--style-border);
  flex-direction: column;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
  box-shadow: var(--anzhiyu-shadow-border);
  transition: 0s;
  opacity: 0;
  pointer-events: none;
}

.back-home-button .back-menu-list-group {
  display: flex;
  flex-direction: column;
}

.back-home-button .back-menu-list-group .back-menu-list-title {
  margin: 8px 0 0 16px;
  transition: 0.3s;
}

.back-home-button .back-menu-list {
  display: flex;
  flex-direction: column;
}

.back-home-button .back-menu-list::before {
  position: absolute;
  top: -22px;
  left: 0px;
  width: 100%;
  height: 25px;
  content: '';
}

.back-home-button .back-menu-list-group:hover .back-menu-list-title {
  color: var(--crl-color-main);
}

.back-home-button .back-menu-list-groups:hover {
  border: var(--style-border-hover);
}

.back-home-button .back-menu-list .back-menu-item {
  display: flex;
  align-items: center;
  margin: 4px 8px;
  padding: 4px 8px !important;
  transition: 0.3s;
  border-radius: 8px;
}

.back-home-button .back-menu-list .back-menu-item .back-menu-item-text {
  font-size: var(--global-font-size);
  margin-left: 0.5rem;
  color: var(--anzhiyu-fontcolor);
  white-space: nowrap;
}

#nav #blog_name {
  flex-wrap: nowrap;
  height: 60px;
  display: flex;
  align-items: center;
  /* z-index: 102; */
  transition: 0.3s;
}

.back-home-button .back-menu-list .back-menu-item .back-menu-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: var(--anzhiyu-secondbg);
}

#page-header #nav .back-home-button {
  color: var(--anzhiyu-fontcolor);
  cursor: pointer;
  position: relative;
}

.page #nav a:hover {
  color: var(--anzhiyu-white) !important;
  background: var(--crl-color-main);
  transition: 0.3s;
  box-shadow: var(--anzhiyu-shadow-main);
}

@media screen and (min-width: 1300px) {
  #nav a:hover {
    transform: scale(1.03);
  }
}

.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text {
  color: var(--anzhiyu-white);
}

.back-menu-item-icon.loading img {
  width: 25px;
}

/* end 菜单栏 */

/* 主页哔哔bb */
#bber-talk {
  width: 100%;
  height: 25px;
  line-height: 25px;
}

#bber-talk .li-style {
  width: 100%;
  height: 25px;
  text-align: center;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
}

#bber-talk .li-style:hover {
  color: #49b1f5;
}

#bber-talk ul,
li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

#bbTimeList {
  background: var(--card-bg);
  color: var(--font-color);
  margin-top: 1rem;
  padding: 0.6rem 1rem 0.5rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
}

#bbtalk {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#bber-talk {
  width: 100%;
  height: 25px;
  line-height: 25px;
  display: flex;
  flex-direction: column;
}

#bbtalk {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bber-talk .li-style {
  width: auto;
  max-width: 100%;
  height: 25px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease 0s;
  font-weight: 700;
  margin: auto;
  cursor: pointer;
  white-space: nowrap;
}

#bbTimeList .li-style:hover {
  color: var(--crl-theme);
  transition: all 0.3s ease 0s;
}

li,
ul {
  list-style: none;
  display: block;
  margin: 0px;
  padding: 0px;
}

#bbTimeList {
  background: var(--crl-none);
  color: var(--crl-fontcolor);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  box-shadow: var(--crl-shadow-lightblack);
  display: flex;
  transition: all 0.3s ease 0s;
  margin-bottom: 1rem;
  border: var(--style-border);
  align-items: center;
  height: 50px;
}

#bbTimeList:hover {
  border: var(--style-border-hover);
  box-shadow: var(--crl-shadow-main);
}

@media screen and (min-width: 1300px) {
  #bbTimeList {
    margin-bottom: 1rem;
  }
}

.bber-gotobb {
  line-height: 25px;
  margin-left: 1rem;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.bber-gotobb:hover {
  opacity: 0.8;
  color: var(--crl-theme);
}

.icon-bblogo {
  font-size: 2rem;
  line-height: 22px;
  margin-right: 1rem;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.icon-bblogo:hover {
  opacity: 0.8;
  color: var(--crl-theme);
}

#bber .timeline #waterfall {
  opacity: 0;
  transition: all 0.3s ease 0s;
}

#bber .timeline #waterfall.show {
  opacity: 1;
}

#bber .timeline ul li.item {
  position: relative;
  width: 32%;
  border: var(--style-border-always);
  border-radius: 12px;
  padding: 1rem 1rem 0.5rem;
  transition: all 0.3s ease 0s;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--crl-card-bg);
  box-shadow: var(--crl-shadow-border);
  margin-right: 2%;
}

#bber .timeline ul li.item hr {
  display: flex;
  position: relative;
  margin: 8px 0px;
  border: 1px dashed var(--crl-theme-op);
  width: 100%;
}

@media screen and (max-width: 768px) {
  #bber .timeline ul li.item {
    padding: 0px;
  }
}

#bber .timeline ul li.item:hover {
  border: var(--style-border-hover);
}

#bber ul.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#bber li.item {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

@media screen and (max-width: 1300px) {
  #bber .timeline ul li.item {
    width: 49%;
    margin-right: 1%;
  }
}

@media screen and (max-width: 768px) {
  #bber .timeline ul li.item {
    width: 100%;
    margin-right: 0px;
  }

  #bber .timeline ul li.item {
    padding: 16px 20px;
  }
}

.timeline ul .list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.bb-info {
  display: inline;
  float: right;
  line-height: 1;
  color: var(--crl-secondtext);
  margin-left: auto;
  margin-bottom: 1rem;
  margin-right: 0.5rem;
}

.bb-info:hover {
  color: var(--crl-hovertext);
}

#bber {
  margin-top: 1rem;
  width: 100%;
}

#bber div.bber-content {
  display: flex;
  flex-flow: wrap;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

#bber>section>ul>li.item {
  margin-bottom: 1rem;
}

#bber .bber-info {
  display: flex;
  align-items: center;
}

#bber .bber-info .fa-rectangles-mixed {
  margin-right: 8px;
}

#bber .bber-content-link {
  display: flex;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  align-items: center;
  background-color: rgba(245, 108, 108, 0.13);
  color: rgb(245, 108, 108);
  padding: 0px 8px;
  border-radius: 20px;
}

#bber .bber-content-link:hover {
  background-color: var(--crl-color-main);
  color: var(--crl-color-white);
}

#bber .bber-content-link i {
  margin-right: 3px;
}

#bber .bber-reply {
  cursor: pointer;
  padding: 0px 4px;
}

#bber .bber-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#bber .count {
  color: var(--crl-secondtext);
  font-size: 0.8rem;
}

#bber p {
  margin: 0px;
}

#bber .datafrom i {
  margin-right: 4px;
}

#bber .bber-music {
  width: 100%;
  height: 90px;
  margin: 0.5rem 0px;
  border-radius: 8px;
  overflow: hidden;
  border: var(--style-border-always);
  background: var(--crl-secondbg);
}

#bber .aplayer {
  margin: 0px;
}

#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0px;
  color: var(--crl-fontcolor);
}

#bber .aplayer.aplayer-withlrc .aplayer-pic {
  height: 82px;
  width: 82px;
  margin: 4px;
  border-radius: 4px;
}

#bber .aplayer .aplayer-info .aplayer-music {
  height: 23px;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  padding: 0px;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
  background: var(--crl-gray);
  height: 8px;
  border-radius: 12px;
  transition: all 0.3s ease 0s;
  overflow: hidden;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar {
  height: 12px;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 100%;
  border-radius: 12px;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  height: 100%;
  border-radius: 12px;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
  display: none;
}

#bber .aplayer .aplayer-info .aplayer-controller {
  align-items: center;
}

#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  position: initial;
}

#bber-tips {
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

#bber .bber-content-img img {
  object-fit: cover;
  max-height: 100%;
  border-radius: 12px;
}

#bber .bber-content-img {
  height: 100px;
  margin: 0.2rem auto 0.3rem 0px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  position: relative;
}

#bber>section>ul>li>div .bber-info-time {
  color: var(--crl-fontcolor);
  font-size: 0.7rem;
  background-color: var(--crl-gray-op);
  padding: 0px 8px;
  border-radius: 20px;
  cursor: default;
}

#bber .bber-content .datacont {
  order: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--crl-fontcolor);
  width: 100%;
  line-height: 1.38;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  text-align: justify;
}

#bber>section>ul>li>div .datafrom {
  order: 2;
  color: var(--crl-secondtext);
  font-size: 0.7rem;
  margin-left: 8px;
}

#bber>section>ul>li>div .datafrom small {
  font-size: 0.7rem;
}

/* end 说说菜单 */

/* player 音乐页面 */
/* 播放器大小 */
.music-player {
  width: 570px;
  height: 500px;
}

.music-player h3 {
  margin: 0px 0 1px !important;
}

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1537976418058');
  /* IE9*/
  src: url('iconfont.eot?t=1537976418058#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
    url('iconfont.ttf?t=1537976418058') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg?t=1537976418058#iconfont') format('svg');
  /* iOS 4.1- */
}

.icon-prev:before {
  content: "\f0069";
}

.icon-next:before {
  content: "\f006a";
}

.icon-play:before {
  content: "\e66a";
}

.icon-pause:before {
  content: "\e76a";
}

.icon-random:before {
  content: "\e622";
}

.icon-muted:before {
  content: "\e61e";
}

.icon-volume:before {
  content: "\e87a";
}

.icon-loop:before {
  content: "\e66c";
}

.icon-single:before {
  content: "\e66d";
}


/* 播放器位置 */
.music-player {
  position: relative;
  margin: 0px auto;
}

/* 歌曲列表 */

.music-player__list {
  width: 100%;
  padding: 10px;
  margin-top: 30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.music__list__item {
  padding-left: 25px;
  color: #ccc;
  position: relative;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
}

.music__list__item:last-of-type {
  margin: 0;
}

.music__list__item.play {
  color: #fff;
}

.music__list__item.play:before {
  font-family: 'iconfont';
  content: "\e87a";
  position: absolute;
  left: 0px;
  top: 4px;
}

/* 播放器主体 */
.music-player__main {
  height: 180px;
  padding: 25px;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* 播放器主体模糊背景 */
.music-player__blur {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

/* 播放器唱片效果 */
.music-player__disc {
  float: left;
  width: 130px;
  height: 130px;
  background: url(/img/cd.png) no-repeat center;
  background-size: 100%;
  position: relative;
}

/* 唱片指针 */
.music-player__pointer {
  width: 25px;
  position: absolute;
  right: -10px;
  top: 0;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/* 唱片指针播放状态 加play类名 */
.music-player__pointer.play {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* 唱片歌曲图片 */
.music-player__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 播放器控件 */
.music-player__controls {
  width: 330px;
  height: 130px;
  float: right;
}

/* 歌曲信息 */
.music__info {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
}

.music__info .music__info--title {
  color: #fff;
}

.music__info .music__info--title {
  font-size: 16px;
}

/* 控件 */

.player-control {
  width: 100%;
}

.player-control__content {
  overflow: hidden;
}

/* 播放暂停按钮 */
.player-control__btns {
  float: left;
  overflow: hidden;
}

.player-control__btn {
  float: left;
  margin: 0 5px;
  font-weight: bolder;
  color: #fff;
  cursor: pointer;
}

.player-control__volume {
  float: right;
  overflow: hidden;
}

.control__volume--progress {
  float: left;
  width: 100px;
  position: relative;
  top: 8px;
}

.player__song--timeProgess {
  font-size: 12px;
  color: #fff;
  padding: 0px 3px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.player-control__content .nowTime {
  float: left;
}

.player-control__content .totalTime {
  float: right;
}

.music-player .progress {
  background: rgba(0, 0, 0, 0.3);
  height: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  overflow: hidden;
  margin: 0.5rem 0 !important;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.music-player .progress .back {
  width: 0px;
  height: 100%;
  border-radius: 2px;
  background: rgb(12, 182, 212);
}

.music-player .progress .pointer {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  position: absolute;
  top: -1px;
  left: 0;
}

.music-player .progress:hover .pointer {
  opacity: 1;
}


/* 播放 画片 动画 */

@-webkit-keyframes disc {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes disc {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.music-player__image.play {
  -webkit-animation: disc 5s linear 0s infinite;
  animation: disc 5s linear 0s infinite;
}

/*  播放进度  */
.player__song--progress {
  width: 100%;
  margin-top: 15px;
}

.music-player h1,
.music-player h2,
.music-player h3,
.music-player h4,
.music-player h5,
.music-player h6,
.music-player p {
  margin: 0;
  padding: 0;
}

.music-player li {
  list-style: none;
}

/* end 音乐页面 */