@font-face {
  font-family: 'FXAiQingQiXiangSuo';
  src: url('https://ericamblog.oss-cn-shanghai.aliyuncs.com/2021/FXAiQingQiXiangSuo.ttf');
}
@media screen and (min-width: 1200px) {
  #tab1 {
    position: fixed;
    left: 3%;
    z-index: 40;
  }
  .tab {
    position: fixed;
    z-index: 15;
    top: 5%;
    left: 15%;
    width: 50px;
    height: 50px;
    margin-left: -35px;
    margin-top: -35px;
    cursor: pointer;
  }
  .tab .bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
  }
  .tab .bars span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 26px;
    height: 3px;
    margin-left: -13px;
    margin-top: -1px;
    background-color: #8dc1ca;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
  }
  .tab .bars span:first-child {
    margin-top: -7px;
  }
  .tab .bars span:nth-child(2) {
    -webkit-transition-delay: 0.075s;
    transition-delay: 0.075s;
  }
  .tab .bars span:last-child {
    margin-top: 5px;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
  }
  .tab:hover .bars span {
    width: 30px;
    margin-left: -15px;
  }
  .tab.active .bars span {
    width: 0;
    margin-left: -15px;
  }
  .tab.active .bars span:first-child {
    margin-top: 0px;
    width: 30px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .tab.active .bars span:last-child {
    margin-top: 0px;
    width: 30px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
  }
  .tag-container,
  #post-container {
    min-height: 100vh;
  }
  body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  body::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.01);
    -webkit-box-shadow: inset 0 0 6px transparent;
  }
  body::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  }
  body::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  }
  body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #1ba784;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  body::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.4);
  }
  .side {
    position: fixed;
    width: 22%;
    z-index: 20;
    justify-content: center;
    display: flex;
    max-width: 350px;
  }
  #main {
    justify-content: center;
    text-align: center;
    z-index: 10;
    left: 0;
    width: 60vw;
    margin-left: 20vw;
  }
  #content {
    width: 100%;
    position: relative;
  }
  #bg {
    background-size: cover !important;
    width: 100vw;
    /*宽度铺满屏幕*/
    min-height: 100vh;
    padding-top: 52.734%;
    /*图片高度除以宽度，得到此值*/
    background: url("") center center;
    /*两个center分别为水平和垂直方向的对齐方式*/
    background-size: 100%;
    /*背景水平铺满*/
    filter: blur(10px);
    /*虚化值，越大越模糊*/
    position: fixed;
    left: 0;
  }
  .nav-large {
    display: block;
    position: absolute;
    /*设置内容层绝对定位*/
    width: 100%;
    text-align: center;
    z-index: 2;
    /*将内容至于上层*/
    min-height: 100vh;
  }
  .mobilebar {
    display: none;
  }
  .topindex {
    width: 60vw;
    margin-top: 50px;
    left: 25vw;
  }
}
@media screen and (max-width: 1200px) {
  #main {
    margin-left: 0;
  }
  html,
  body {
    height: auto;
  }
  html,
  body {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  #content {
    max-width: 100vw;
  }
  #landlord {
    display: none;
  }
  .mobilebar {
    display: block;
  }
  .pagination-container {
    margin-top: 30px;
    display: flex;
  }
  .pagination-container a {
    width: 50%;
    border: solid grey;
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20%;
    background: lightblue;
    font-weight: bold;
  }
  .pagination-container .mobile-nextpage {
    border-radius: 0 5px 5px 0;
  }
  .pagination-container .mobile-prevpage {
    border-radius: 5 0px 0px 5px;
  }
  .tag {
    width: 40%;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*???? ????0*/
  40% {
    opacity: 0;
  }
  /*???? ????0*/
  100% {
    opacity: 1;
  }
  /*???? ????1*/
}
@-webkit-keyframes fade-in {
  /*??webkit??*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#side {
  animation: fade-in;
  /*????*/
  animation-duration: 1s;
  /*??????*/
  -webkit-animation: fade-in 1s;
  /*??webkit??*/
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
}
.side {
  height: 100vh;
}
#side {
  overflow-y: scroll;
}
#side::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}
#side::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: inset 0 0 6px transparent;
}
#side::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
#side::-webkit-scrollbar-track:active {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
#side::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#side::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#side::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}
.r_m_div {
  width: 100%;
  display: flex;
}
.musicbtn {
  width: 40px;
  margin-left: 80%;
  position: absolute;
  top: 1%;
  cursor: pointer;
}
.description {
  margin-top: 5%;
  text-align: center;
  font-size: 12px;
  color: white;
  font-weight: lighter;
  display: flex;
  justify-content: center;
}
.sitename {
  margin-top: 6%;
  text-align: center;
  font-size: 25px;
  font-weight: 900;
  color: antiquewhite;
  font-family: Arial, Verdana, "宋体";
}
.menuicon {
  height: auto;
  width: 23px;
  padding-bottom: 3px;
  display: none;
}
.sitetime {
  display: flex;
  justify-content: center;
}
.menutopavatar {
  /*该动画只执行一次*/
  -webkit-transform: rotate(0deg);
  /*i图标旋转*/
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  /*transform进行动画，动画用时1秒钟*/
  transition: -webkit-transform 0.9s ease-in-out;
}
.menutopavatar:hover {
  /*该动画只执行一次*/
  -webkit-transform: rotate(360deg);
  /*鼠标hover时，i图标旋转*/
  transform: rotate(360deg);
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  /*transform进行动画，动画用时1秒钟*/
  transition: -webkit-transform 0.9s ease-in-out;
}
.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  /*该动画只执行一次*/
  -webkit-transform: rotate(0deg);
  /*i图标旋转*/
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  /*transform进行动画，动画用时1秒钟*/
  transition: -webkit-transform 0.9s ease-in-out;
}
.avatar-border {
  margin: 0 auto;
  margin-top: 15%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 0 0 30px #a67c40;
}
.avatar:hover {
  /*该动画只执行一次*/
  -webkit-transform: rotate(360deg);
  /*鼠标hover时，i图标旋转*/
  transform: rotate(360deg);
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  /*transform进行动画，动画用时1秒钟*/
  transition: -webkit-transform 0.9s ease-in-out;
}
.share-button {
  margin: 0 auto;
  margin-top: 5%;
  width: 250px;
  height: 35px;
  background: #dfe6e9;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  display: flex;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s linear;
}
.share-button span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  border: solid;
  border: #000;
  color: #f1f1f1;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 10px;
  font-weight: lighter;
  transition: 0.6s linear;
  border-radius: 3px;
  z-index: 2;
}
.share-button i {
  text-align: center;
}
.share-button:hover span {
  transform: translateX(-100%);
  transition-delay: 0.3s;
}
.share-button a {
  flex: 1;
  font-size: 26px;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: 0.3s linear;
  z-index: 1;
}
.share-button:hover a {
  opacity: 1;
  transform: translateX(0);
}
.siteinfocontainer {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.siteinfo {
  width: 100px;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: center;
  font-family: Arial;
}
.menucontainer {
  margin-top: 5px;
}
.mchocie {
  margin-top: 4%;
  text-align: center;
  font-size: 16px;
  color: #495057;
  font-weight: bold;
  height: 30px;
}
hr {
  margin-top: 5%;
  margin-bottom: 2%;
  width: 200px;
}
.menucontainer span {
  font-size: 19px;
  color: transparent;
  text-transform: uppercase;
  line-height: 1em;
  width: 7em;
  border-top: 1px solid transparent;
  position: relative;
  transition: 0.3s;
  top: 25%;
}
.menucontainer span:hover {
  border-top: 1px solid yellow;
}
.menucontainer span::before,
.menucontainer span::after {
  content: attr(data-text);
  position: absolute;
  top: -0.5em;
  left: 0;
  width: 100%;
  transition: 0.3s ease-out;
  color: antiquewhite;
}
.menucontainer span::before {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.menucontainer span::after {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.menucontainer span:hover::before,
.menucontainer span:hover::after {
  color: yellow;
  transition: left 0.2s ease-out;
  transition-delay: 0.1s;
}
.menucontainer .mchocie:nth-child(odd) span:hover::before,
.menucontainer .mchocie:nth-child(even) span:hover::after {
  left: -0.15em;
}
.menucontainer .mchocie:nth-child(even) span:hover::before,
.menucontainer .mchocie:nth-child(odd) span:hover::after {
  left: 0.15em;
}
.menubutton {
  font-size: 1.1em;
  font-family: kaiti;
  color: antiquewhite;
}
.menubutton:hover {
  font-size: 1.2em;
  color: black;
  text-decoration: none;
}
.mchocie a:active {
  text-decoration: none;
}
.mchocie a:visited {
  text-decoration: none;
}
.moon {
  position: fixed;
  width: 48px;
  height: 48px;
  right: 1%;
  bottom: 8%;
  border-radius: 50%;
  background: black;
  z-index: 30;
  cursor: pointer;
}
#footinfo {
  color: white;
  font-family: Arial, Verdana, "宋体";
  font-weight: lighter;
  text-align: center;
}
#footinfo a {
  color: white;
  font-family: Arial, Verdana, "宋体";
}
#sitegotimeDate,
#sitegotimes {
  margin-top: 2%;
  color: white;
  font-weight: lighter;
  font-size: 12px;
  display: inline;
  float: center;
}
.icon {
  width: 18px;
  cursor: pointer;
}
.search {
  margin: 0 auto;
  width: 200px;
  display: flex;
  cursor: pointer;
  margin-top: 5%;
  position: relative;
  height: 30px;
  text-align: right;
  line-height: 30px;
}
.search button {
  position: absolute;
  top: 0;
  right: 0px;
  width: 42px;
  height: 33px;
  border: none;
  background: #7ba7ab;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
.search button:before {
  content: "🔍";
  font-size: 15px;
  color: #f9f0da;
}
.search input {
  width: 100%;
  height: 33px;
  padding-left: 10px;
  border: 2px solid #7ba7ab;
  border-radius: 10px;
  outline: none;
  font-size: 12px;
  background: white;
  color: #9e9c9c;
  opacity: 0.6;
}
.search input:hover {
  opacity: 1;
}
.search input:focus {
  opacity: 1;
}
.search .search-results {
  display: block;
  z-index: 1000;
  position: absolute;
  top: 30px;
  width: 200px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  border-radius: 5px;
  background: #ccc;
  box-shadow: 0 0.3rem 0.5rem #333;
}
.search .search-results::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}
.search .search-results::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: inset 0 0 6px transparent;
}
.search .search-results::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
.search .search-results::-webkit-scrollbar-track:active {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
.search .search-results::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.search .search-results::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.search .search-results::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}
.search .search-results .result-item {
  background: white;
  color: #000;
  font-family: "Microsoft JhengHei", miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, Sans-Serif;
  font-weight: lighter;
  padding: 3px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
}
.searchtop {
  width: auto;
  margin: 0;
}
#vistornum {
  margin-top: 1%;
  color: white;
}
#busuanzi_value_site_uv {
  color: lightgreen;
}
.menutopbutton {
  color: white;
}
.menutopbutton:hover {
  font-size: 17px;
}
@media screen and (max-width: 1200px) {
  .moon {
    display: none;
  }
  .avatar-border {
    position: absolute;
    /* margin-bottom: 10%; */
    top: 30%;
    width: 120px;
    height: 120px;
    margin-top: 0;
  }
  .avatar {
    width: 120px;
    height: 120px;
  }
}
.menutopavatar {
  margin-left: 30px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
.social {
  width: 25px;
  margin-top: 10px;
  margin-left: 10px;
}
#socialMenu {
  display: none;
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}
#socialMenu .socialContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f8ff;
  border-radius: 15px;
  margin-left: 20%;
  width: 60%;
  height: 7vh;
  margin-top: 35vh;
}
#socialMenu .socialContainer .icon {
  width: 40px;
  margin-left: 40px;
  margin-right: 40px;
}
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.searchresults {
  color: black;
  font-size: 12px;
}
.searchresults:hover {
  text-decoration: none;
  color: black;
}
.musictop {
  position: relative;
  margin-top: 25%;
  width: 30px;
  margin-left: 30%;
}
#loading-aname {
  position: fixed;
  display: flex;
  left: 45vw;
  top: 30vh;
  z-index: 30;
}
.loading-aname {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 10px solid #e74c3c;
  animation: a1 2s linear infinite;
}
.loading-aname::before,
.loading-aname::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: -3px;
  box-sizing: border-box;
  border-radius: 50%;
}
.loading-aname::before {
  border-top: 10px solid #3498db;
  transform: rotate(240deg);
}
.loading-aname::after {
  border-top: 10px solid #e67e22;
  transform: rotate(120deg);
}
@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes a2 {
  to {
    transform: rotate(-360deg);
  }
}
.loadingbackground {
  background: #363433;
  position: fixed;
  width: 120vw;
  height: 120vh;
  z-index: 20;
  opacity: 0.6;
  left: 0;
  top: 0;
}
.pjaxloading {
  display: none;
}
@media (min-width: 330px) {
  #loading-aname {
    top: 40vh;
    left: 25vw;
  }
}
@media (min-width: 468px) {
  #loading-aname {
    top: 40vh;
    left: 26vw;
  }
}
@media (min-width: 768px) {
  #loading-aname {
    top: 40vh;
    left: 40vw;
  }
}
@media (min-width: 992px) {
  #loading-aname {
    top: 30vh;
  }
}
@media (min-width: 1200px) {
  #loading-aname {
    top: 30vh;
    left: 45vw;
  }
  .menutopavatar {
    margin-top: 5%;
  }
  .navbar-fixed-top {
    width: 90%;
    margin-left: 5%;
    border-radius: 0 0 10px 10px;
  }
}
.popup {
  position: absolute;
  top: 0;
  width: 200vw;
  height: inherit;
  flex-direction: column;
  justify-content: flex-start;
  display: none;
  z-index: 9999;
}
.popup:target {
  display: flex;
}
.popup .back {
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
  height: 2em;
  line-height: 2em;
  background-color: #ddd;
  color: black;
  text-decoration: none;
}
.popup .back:visited {
  color: black;
}
.popup .back:hover {
  background-color: #eee;
}
.popup p {
  font-size: 100px;
  text-align: center;
  margin: 0.1em 0.05em;
}
/* animation effects */
.popup > * {
  filter: opacity(0);
  animation: fade-in 0.5s ease-in forwards;
  animation-delay: 1s;
}
@keyframes fade-in {
  to {
    filter: opacity(1);
  }
}
.popup::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 50%;
  background-color: black;
  animation: open-animate 1s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
  animation-delay: 1.5s;
}
@keyframes open-animate {
  to {
    height: 100vh;
    top: 0;
  }
}
.popup::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: white;
  top: calc((100% - 2px) / 2);
  left: 0;
  animation: line-animate 1.5s cubic-bezier(0.8, 0.2, 0, 1.2);
}
@keyframes line-animate {
  20% {
    width: 20%;
  }
  100% {
    width: 100%;
  }
}
.flycontainer {
  width: 200vw;
  height: 100vh;
  background-color: black;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  z-index: 1040;
  display: none;
}
.flyword {
  display: flex;
  color: white;
  font-family: kaiti;
  font-size: 100px;
  margin-left: 40%;
}
.pagi {
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.pagi ul {
  margin: 50px 0 0 0;
  position: relative;
  left: 0%;
  display: flex;
  padding: 0;
  z-index: 3;
}
.pagi ul li {
  list-style: none;
  font-family: sans-serif;
}
.pagi ul li a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  background: #353535;
  color: #565656;
  text-decoration: none;
  margin: 5px;
  border-radius: 4px;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.5);
}
.pagi ul li a.active,
.pagi ul li a:hover {
  color: #fff;
  text-shadow: 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b, 0 0 20px #ffe01b;
}
@media screen and (max-width: 1200px) {
  .pagination-container {
    display: block;
  }
  .pcpagi {
    display: none;
  }
  .pagination-container {
    margin-top: 30px;
    display: flex;
  }
  .pagination-container a {
    width: 50%;
    border: solid grey;
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20%;
    background: lightblue;
    font-weight: bold;
  }
  .pagination-container .mobile-nextpage {
    border-radius: 0 5px 5px 0;
  }
  .pagination-container .mobile-prevpage {
    border-radius: 5 0px 0px 5px;
  }
}
@media screen and (min-width: 1200px) {
  .pagination-container {
    display: none;
  }
  .pcpagi {
    display: block;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#post-container {
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
}
#post {
  position: relative;
}
.postshow {
  padding: 0px 0 80px 0;
  position: relative;
  z-index: 1;
}
.posttitlebox {
  position: absolute;
  z-index: 2;
  bottom: 17px;
  width: 100%;
}
.posttitle {
  font-size: 2em;
  color: #f7f7f7;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: lighter;
  position: relative;
  padding-left: 2%;
  float: left;
  cursor: pointer;
}
.posttitlewithoutimg {
  font-size: 2em;
  color: #f7f7f7;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: lighter;
  position: relative;
  padding-left: 2%;
  float: left;
  cursor: pointer;
}
.postimage {
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
.postdate {
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  background: #ff4e6a;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  display: inline;
  float: left;
}
.poststatus {
  margin-left: 10px;
  background: #ffaa73;
  width: 150px;
}
.posttag {
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  border-radius: 10px;
  left: 0;
  display: inline;
  float: left;
}
.postlink {
  margin-left: 5px;
  border: solid;
  border-radius: 10px;
  padding: 5px 10px 5px 10px;
  color: #3cdc82;
}
.postlink:hover {
  text-decoration: none;
  color: #3cdc82;
}
.postinfo {
  margin-left: 0;
}
.postdate i {
  padding-right: 10px;
}
a:hover {
  text-decoration: none;
}
.elegloading {
  padding: 50px;
}
#bbonetalkContainer {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 5px;
  height: 50px;
  padding-left: 40px;
  background: rgba(239, 52, 115, 0.5);
  border-radius: 5px;
  text-align: left;
  display: block;
  color: white;
  font-size: 18px;
}
#bbonetalkContainer a {
  font-family: kaiti;
  color: white;
  font-size: 18px;
}
#bber-talk {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  line-height: 2em;
  height: 45px;
  max-width: 760px;
  text-align: left;
  padding: 5px 15px;
  margin-bottom: 3em;
  position: relative;
  background-color: var(--light-header);
  border-radius: 8px;
  font-size: 15px;
}
#bber-talk svg {
  fill: currentColor;
  vertical-align: middle;
  display: inline;
  margin-right: 5px;
}
.talk-list {
  margin: 0;
  max-height: 35px;
  overflow: hidden;
}
.talk-list li {
  list-style: none;
  margin-bottom: 10px;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  #post {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .posttitlewithoutimg,
  .posttitle {
    font-size: 3em;
    padding: 0;
    font-weight: bold;
  }
  .posttitlebox {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    z-index: 2;
    bottom: inherit;
    width: 100%;
  }
  .posttag {
    display: none;
  }
  #post-container {
    margin-top: 50px;
  }
  .postshow {
    padding: 0px 20px 80px 20px;
  }
  .postimage {
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    width: 90%;
  }
  #bbonetalkContainer {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .posttitlewithoutimg,
  .posttitle {
    font-size: 2.5em;
    padding: 0;
    font-weight: bold;
  }
}
@media screen and (max-width: 760px) {
  .posttitlewithoutimg,
  .posttitle {
    font-size: 1.2em;
    padding: 0;
    font-weight: bold;
  }
}
@media screen and (min-width: 768px) {
  .eleg-allpostscontainer {
    width: 90%;
    margin-left: 5%;
    background: none;
  }
  .eleg-posts {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .eleg-postcontainer-left {
    width: 100%;
    max-height: 250px;
    justify-content: left;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-postcontainer-right {
    width: 100%;
    max-height: 250px;
    text-align: right;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-img-left {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(250deg, transparent 20%, white 50%);
    border-radius: 10px 0 0 10px;
  }
  .eleg-img-right {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, white 50%);
    border-radius: 0 10px 10px 0;
  }
  .eleg-title {
    width: 100%;
    font-size: 25px;
    margin-top: 20px;
    color: black;
    z-index: 1;
    font-weight: bold;
    text-align: center;
  }
  .eleg-info {
    margin-top: 20px;
    width: 100%;
    z-index: 1;
    text-align: center;
  }
  .eleg-tags {
    width: 100%;
    justify-content: center;
    display: inline;
  }
  .eleg-date {
    font-size: 9px;
    float: none;
  }
  .eleg-stats {
    font-size: 9px;
    width: auto;
    float: none;
  }
  .eleg-postlink {
    font-size: 9px;
  }
  .eleg-swordsmen {
    display: none;
  }
  .eleg-swordsmen-left {
    display: none;
  }
  .eleg-btn {
    color: #806d9e;
    border: 1px solid;
    padding: 10px 50px 10px 50px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
  }
  .eleg-btn:hover {
    color: #806d9e;
    font-size: 22px;
  }
}
@media screen and (min-width: 1200px) {
  .eleg-allpostscontainer {
    width: 100%;
    margin-left: 0;
  }
  .eleg-posts {
    margin-top: 20px;
    margin-bottom: 80px;
  }
  .eleg-postcontainer-left {
    width: 100%;
    max-height: 250px;
    justify-content: left;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-postcontainer-right {
    width: 100%;
    max-height: 250px;
    text-align: right;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-img-left {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(250deg, transparent 20%, white 50%);
    border-radius: 10px 0 0 10px;
  }
  .eleg-img-right {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, white 50%);
    border-radius: 0 10px 10px 0;
  }
  .eleg-info {
    margin-top: 20px;
    width: 100%;
    z-index: 1;
    text-align: center;
  }
  .eleg-title {
    margin-top: 20px;
    color: black;
    font-size: 25px;
    font-weight: bold;
  }
  .eleg-tags {
    width: 100%;
    justify-content: center;
    display: inline;
  }
  .eleg-date {
    font-size: 9px;
    float: none;
  }
  .eleg-stats {
    font-size: 9px;
    width: auto;
    float: none;
  }
  .eleg-postlink {
    font-size: 9px;
  }
  .eleg-swordsmen {
    height: 150px;
    z-index: 1;
    position: absolute;
    margin-top: 100px;
    left: -10px;
    display: block;
  }
  .eleg-swordsmen-left {
    height: 130px;
    z-index: 1;
    position: absolute;
    margin-top: 120px;
    right: 10px;
    display: block;
  }
  .eleg-btn {
    color: #806d9e;
    border: 1px solid;
    padding: 10px 50px 10px 50px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
  }
  .eleg-btn:hover {
    color: #806d9e;
    font-size: 22px;
  }
}
@media screen and (max-width: 768px) {
  .eleg-allpostscontainer {
    width: 90%;
    margin-left: 5%;
    background: none;
  }
  .eleg-posts {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .eleg-bg {
    width: 86%;
    height: 250px;
    background: #e2e1e4;
    opacity: 0.7;
    position: absolute;
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-postcontainer-left {
    width: 100%;
    height: 250px;
    justify-content: left;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-postcontainer-right {
    width: 100%;
    height: 250px;
    text-align: right;
    display: flex;
    background: rgba(226, 225, 228, 0.7);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  .eleg-img-left {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(250deg, transparent 20%, white 50%);
    border-radius: 10px 0 0 10px;
  }
  .eleg-img-right {
    width: 400px;
    height: 250px;
    max-width: 50%;
    position: relative;
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, white 50%);
    border-radius: 0 10px 10px 0;
  }
  .eleg-title {
    width: 100%;
    font-size: 25px;
    margin-top: 20px;
    color: black;
    z-index: 1;
    font-weight: bold;
    text-align: center;
  }
  .eleg-info {
    margin-top: 20px;
    width: 100%;
    z-index: 1;
    text-align: center;
  }
  .eleg-tags {
    width: 100%;
    justify-content: center;
    display: inline;
  }
  .eleg-date {
    font-size: 9px;
    float: none;
  }
  .eleg-stats {
    font-size: 9px;
    width: auto;
    float: none;
  }
  .eleg-postlink {
    font-size: 9px;
  }
  .eleg-swordsmen {
    display: none;
  }
  .eleg-swordsmen-left {
    display: none;
  }
  .eleg-btn {
    color: #806d9e;
    border: 1px solid;
    padding: 10px 50px 10px 50px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
  }
  .eleg-btn:hover {
    color: #806d9e;
    font-size: 22px;
  }
}
@media screen and (max-width: 500px) {
  .eleg-allpostscontainer {
    margin-left: 1vw;
    width: 98vw;
    margin-top: 0;
    background: none;
  }
  .eleg-bg {
    width: 98vw;
  }
  .eleg-posts {
    margin-bottom: 60px;
  }
  .eleg-img-left {
    width: 98vw;
    position: absolute;
    max-width: 98%;
    -webkit-mask-image: linear-gradient(0, transparent 0, white 50%);
    border-radius: 10px;
  }
  .eleg-img-right {
    width: 98vw;
    position: absolute;
    max-width: 98%;
    -webkit-mask-image: linear-gradient(0, transparent 0, white 50%);
    border-radius: 10px;
  }
  .eleg-btn {
    color: white;
  }
  .eleg-btn:hover {
    color: white;
    font-size: 22px;
  }
  .eleg-title {
    color: white;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
pre code table {
  margin: 0;
}
pre code td,
th {
  text-align: left;
  border: none;
}
.hljs-ln td {
  padding-left: 15px;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: normal;
}
pre code tr:nth-child(2n) {
  background: none;
}
.toc-container {
  position: fixed;
  width: 15%;
  z-index: 101;
  right: 3%;
  top: 10%;
  text-align: left;
}
.readingmode {
  background: rgba(238, 247, 242, 0.8);
  color: rgba(249, 114, 61, 0.8);
  position: fixed;
  width: 50px;
  font-size: 30px;
  z-index: 1000;
  bottom: 30px;
  right: 16%;
  bottom: 6%;
  border-radius: 30%;
  cursor: pointer;
}
.toc-container li {
  position: sticky;
  list-style: none;
  font-family: sans-serif;
  font-weight: bold;
  padding-top: 15px;
}
.markdownIt-TOC li a {
  color: antiquewhite;
  display: block;
  transition: all 0.3s;
  font-size: 13px;
  font-weight: lighter;
}
.markdownIt-TOC li a:hover {
  text-decoration: underline;
}
.markdownIt-TOC li a.current {
  color: white;
  border: solid;
  border-radius: 5px;
}
.text {
  padding: 20px;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc', 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif;
}
.text p,
.text ul {
  color: rgba(0, 0, 0, 0.7);
}
.text h1,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6 {
  font-family: "宋体", 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc', 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif;
  font-weight: 1000;
}
.markdownIt-TOC {
  height: 50vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.markdownIt-TOC::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}
.markdownIt-TOC::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: inset 0 0 6px transparent;
}
.markdownIt-TOC::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
.markdownIt-TOC::-webkit-scrollbar-track:active {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
.markdownIt-TOC::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #a7a8bd;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.markdownIt-TOC::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.markdownIt-TOC::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}
.markdownIt-TOC li ul {
  padding-left: 0%;
}
h6,
.text,
pre,
a,
div {
  font-size: 15px;
}
.text {
  line-height: 2.3;
}
h1 {
  font-size: 25px;
}
h2 {
  font-size: 23px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 17px;
}
h5 {
  font-size: 15px;
}
code {
  overflow: scroll;
}
.vcomments {
  z-index: 102;
}
#comment {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  width: 100%;
}
.comment {
  width: 100vw;
  margin-left: 0;
}
@media screen and (max-width: 1200px) {
  .tog {
    display: none;
  }
  .postinfo-detail {
    margin-left: 10px;
  }
  .toc-container {
    display: none;
  }
}
pre code {
  font-size: 13px;
  white-space: inherit;
  overflow-y: auto;
  border-radius: 10px;
  line-height: 25px;
  padding: 20px;
}
@media screen and (min-width: 1200px) {
  #comment {
    margin-top: 350px;
  }
  .commentcontainer {
    padding: 30px;
  }
  .postinfo-detail {
    margin-left: 0;
  }
  .copybt {
    position: absolute;
    width: 10%;
    right: 7%;
    color: white;
    /*字体颜色*/
    background-color: cornflowerblue;
    /*按钮背景颜色*/
    border-radius: 3px;
    /*让按钮变得圆滑一点*/
    border-width: 0;
    /*消去按钮丑的边框*/
    margin: 0;
    outline: none;
    /*取消轮廓*/
    font-family: "Microsoft JhengHei", miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, Sans-Serif;
    text-align: center;
    /*字体居中*/
    cursor: pointer;
  }
  .toggleContainer {
    position: fixed;
    right: 16%;
    bottom: 12%;
    z-index: 100;
    display: none;
    cursor: pointer;
  }
  .toggle {
    background: black;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 50%;
  }
  .toggle i {
    font-size: 25px;
    color: white;
  }
}
@media screen and (max-width: 1200px) {
  .readingmode {
    display: none;
  }
  #comment {
    background: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .commentcontainer {
    padding: 30px;
  }
  .copybt {
    position: absolute;
    width: 15%;
    right: 10%;
    color: white;
    /*字体颜色*/
    background-color: cornflowerblue;
    /*按钮背景颜色*/
    border-radius: 3px;
    /*让按钮变得圆滑一点*/
    border-width: 0;
    /*消去按钮丑的边框*/
    margin: 0;
    outline: none;
    /*取消轮廓*/
    font-family: "Microsoft JhengHei", miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, Sans-Serif;
    text-align: center;
    /*字体居中*/
    cursor: pointer;
  }
}
/* for block of numbers */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  color: #ccc;
  vertical-align: top;
  padding-right: 5px;
  /* your custom style here */
}
/* for block of code */
.hljs-ln-code {
  padding-left: 30px;
}
.tvcontainer {
  position: relative;
  padding: 30% 45%;
}
.tv {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.music {
  width: 100%;
  height: 110;
  border: 0;
  margin: 0;
}
table {
  width: 80%;
  margin: 30px auto;
  border: #aaa 2px;
  border-collapse: separate;
  border-spacing: 5px;
}
td,
th {
  padding: 5px;
  text-align: center;
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
tr:nth-child(2n) {
  background: #F5F5F5;
}
@media screen and (min-width: 1200px) {
  #comment {
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
  #bar {
    display: none;
  }
  .posttop {
    margin-top: 50px;
  }
}
#postmain {
  justify-content: center;
  padding: 0;
  z-index: 98;
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
}
.commentcontainer {
  text-align: left;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.archives-year {
  padding-top: 5%;
  font-size: 2em;
  font-weight: bold;
  text-align: left;
  text-decoration: underline;
  padding-left: 5%;
  color: white;
}
.archives-content {
  min-height: 100vh;
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
  background: rgba(53, 51, 60, 0.5);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding-bottom: 50px;
}
.archives-content ul {
  margin: 0;
  margin-top: 2%;
  list-style: none;
  position: relative;
  color: #fff;
  font-size: 13px;
}
@media screen and (min-width: 1200px) {
  .archives-content ul {
    padding: 1px 100px;
  }
}
.archives-content ul li {
  position: relative;
  margin-left: 30px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 14px;
  border-radius: 6px;
  width: 80%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
}
.archives-content ul li:not(:first-child) {
  margin-top: 60px;
}
.archives-content ul li > span {
  width: 2px;
  height: 100%;
  background: #ff4e6a;
  opacity: 0.8;
  left: -30px;
  top: 0;
  position: absolute;
}
.archives-content ul li > span:before,
.archives-content ul li > span:after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  background: #ff4e6a;
  left: -5px;
  top: 0;
}
.archives-content ul li span:after {
  top: 100%;
}
.archives-content ul li > div {
  margin-left: 10px;
}
.archives-content div .title,
.archives-content div .type {
  font-weight: 600;
  font-size: 12px;
}
.archives-content div > div {
  margin-top: 5px;
}
.archives-title {
  color: black;
  text-align: left;
  font-weight: 300;
  font-size: 1.5em;
}
.archives-time {
  padding-top: 3%;
  text-align: left;
  font-weight: lighter;
  color: black;
}
@media screen and (max-width: 1200px) {
  .archives-content ul li > span {
    display: none;
  }
  .archives-content ul {
    padding: 0px;
  }
  .archives-content {
    margin-top: 60px;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*��ʼ״̬ ͸����Ϊ0*/
  40% {
    opacity: 0;
  }
  /*����״̬ ͸����Ϊ0*/
  100% {
    opacity: 1;
  }
  /*����״̬ ͸����Ϊ1*/
}
@-webkit-keyframes fade-in {
  /*���webkit�ں�*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.allcontent {
  height: auto;
  min-height: 100vh;
  justify-content: left;
  text-align: left;
  animation: fade-in;
  /*��������*/
  animation-duration: 1s;
  /*��������ʱ��*/
  -webkit-animation: fade-in 1s;
  /*���webkit�ں�*/
}
#articlecontent {
  background: white;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
blockquote {
  background-color: #eff8f0;
  border-color: #5cb85c;
}
summary {
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}
.text {
  padding-top: 60px;
  padding-bottom: 50px;
  z-index: 5;
}
.text img {
  width: 50%;
  margin-left: 25%;
  margin-top: 15px;
  margin-bottom: 15px;
}
.prev-post {
  margin-top: 10px;
  background: white;
  font-size: 1.4em;
  color: black;
}
.next-post {
  background: white;
  font-size: 1.4em;
  color: black;
}
.prev-post a,
.next-post a {
  color: black;
  font-family: "Microsoft JhengHei", miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, Sans-Serif;
  font-weight: lighter;
  padding: 2px;
  font-size: 16px;
}
.prev-post a:hover,
.next-post a:hover {
  text-decoration: none;
  color: black;
}
#texttitle {
  padding-top: 50px;
}
.readercount {
  opacity: 0.7;
  font-weight: lighter;
}
.imgloading {
  padding: 30%;
  border-radius: 20px;
  background: rgba(204, 204, 214, 0.4);
}
@media screen and (min-width: 1200px) {
  .prev-post,
  .next-post {
    display: none;
  }
  .prev-post-pc,
  .next-post-pc {
    display: block;
  }
  .allcontent .postdate,
  .allcontent .poststatus,
  .allcontent .posttag {
    font-size: 15px;
  }
  #texttitle {
    margin-top: 50px;
  }
  .postimage {
    width: 100%;
  }
  .allcontent #vcomments {
    margin-top: 100px;
  }
  .hotnum {
    font-size: 18px;
  }
}
@media screen and (max-width: 1200px) {
  #articlecontent {
    background: none;
  }
  .postpadding {
    padding: 0;
  }
  #postdetail {
    margin-top: 5vh;
  }
  .prev-post,
  .next-post {
    margin-top: 25px;
    border: solid;
    border-radius: 10px;
    box-shadow: 2ch;
    padding: 0;
    display: block;
    width: 80%;
    margin-left: 10%;
  }
  .prev-post-pc,
  .next-post-pc {
    display: none;
  }
  #articlecontent {
    box-shadow: none;
    border-radius: 0;
  }
}
#npcontainer {
  float: right;
  width: 35%;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  cursor: pointer;
  max-height: 200px;
}
#ppcontainer {
  float: left;
  width: 35%;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  cursor: pointer;
  max-height: 200px;
}
.opimg {
  border-radius: 10px 10px 0 0;
  height: 200px;
}
.optitle {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: white;
  margin: 0;
  padding: 10px;
  opacity: 0.5;
  text-align: center;
  border-radius: 0 0 10px 10px;
}
.sharebtn {
  width: 30%;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2F80ED, #56CCF2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border: none;
  border-color: #B0E0E6;
  color: white;
  padding: 10px;
  border-radius: 10px;
}
.sharebtn:focus {
  outline: none;
}
.shareicon {
  width: 30px;
  margin-left: 10px;
}
#otherpost {
  margin-top: 10px;
  margin-bottom: 50px;
}
.sharebtnContainer {
  background: white;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.shareContainer {
  padding-bottom: 10px;
  background: none;
  text-align: right;
  border-radius: 10px;
  margin-right: 20px;
}
.postdetailimg {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 100%;
  overflow: hidden;
  max-height: 70vh;
}
.donateContainer {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.donatebtn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: rgba(236, 45, 122, 0.7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-family: kaiti;
  font-weight: bold;
}
.donateImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  border: solid lightgrey;
}
.donate {
  width: 200px;
  height: 200px;
  display: none;
}
.postfooter {
  margin-top: 10px;
  margin-left: 3%;
  margin-right: 3%;
  padding-bottom: 50px;
}
.post-copyright {
  margin: 2em 0 0;
  padding: 0.5em 1em;
  border-left: 3px solid #ff1700;
  background-color: #f9f9f9;
  list-style: none;
}
.post-copyright li {
  padding: 5px;
}
.lazyload {
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  #live2d-widget {
    display: none;
  }
  .welcome {
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    background: url("") fixed no-repeat;
    background-size: cover !important;
    border-radius: 0 0 10px 10px;
  }
  .cursorcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
  }
  .mobiledescribtion {
    font-size: 20px;
    color: white;
    top: 40vh;
    position: absolute;
  }
  .avatar-border {
    position: absolute;
    top: 20vh;
    width: 120px;
    height: 120px;
    margin-top: 0;
  }
  .plbg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: -1;
    left: 0;
    opacity: 0.7;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#friendscontainer {
  position: relative;
  z-index: 999;
  overflow: auto;
  padding-bottom: 30px;
}
#friendsrule {
  background: rgba(147, 213, 220, 0.4);
  margin-left: 5%;
  width: 90%;
  padding: 30px;
  min-height: 50px;
  text-align: left;
  color: white;
  border-radius: 5px;
  border-left: #22a2c3 10px solid;
  border-right: #22a2c3 10px solid;
  font-size: 20px;
}
@media screen and (min-width: 1200px) {
  .friends-title {
    float: left;
    margin-top: 30px;
    height: 80px;
    width: 80%;
    text-align: left;
    margin-left: 75px;
    font-size: 35px;
    font-family: fangsong;
    font-weight: bold;
    color: rgba(226, 225, 208, 0.8);
    text-decoration: underline;
    margin-top: 20px;
  }
  #pcintroimg {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .sea {
    width: 500px;
    height: 200px;
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
  }
  .sea .title {
    color: white;
    font-size: 24px;
    font-family: serif;
    text-align: center;
    line-height: 250px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    position: absolute;
    z-index: 1;
    width: 100%;
  }
  .sea .wave {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 43%;
    top: -650px;
    left: calc((350px - 650px) / 2);
    animation: drift linear infinite;
    transform-origin: 50% 48%;
  }
  .sea .wave:nth-of-type(1) {
    background: deepskyblue;
    filter: opacity(0.4);
    animation-duration: 5s;
  }
  .sea .wave:nth-of-type(2) {
    background: deepskyblue;
    filter: opacity(0.4);
    animation-duration: 7s;
  }
  .sea .wave:nth-of-type(3) {
    background-color: orangered;
    filter: opacity(0.1);
    animation-duration: 9s;
  }
  @keyframes drift {
    from {
      transform: rotate(1turn);
    }
  }
  #friendscontainermobile {
    display: none;
  }
  #friendscontainer {
    display: block;
  }
  #friendscontainer {
    margin-top: 50px;
    min-height: 80vh;
    animation: fade-in;
    /*动画名称*/
    animation-duration: 1s;
    /*动画持续时间*/
    -webkit-animation: fade-in 1s;
    /*针对webkit内核*/
    border-radius: 20px;
  }
  /* ---------------------------------用户信息展示表单 ------------------------------*/
  #friendscontainer .infoForm {
    float: left;
    width: 80%;
    height: 100px;
    margin-top: 20px;
    margin-left: 75px;
    flex-direction: column;
    background: rgba(251, 242, 227, 0.5);
    text-align: center;
    z-index: 100;
    overflow: hidden;
    line-height: 5px;
    word-wrap: break-word;
    cursor: pointer;
  }
  #friendscontainer .favatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
    float: left;
    display: inline;
    opacity: 1;
  }
  #friendscontainer .infoForm h2,
  #friendscontainer .infoForm h3 {
    color: white;
    font-weight: lighter;
    margin-top: 10px;
  }
  #friendscontainer .infoForm h2 {
    color: antiquewhite;
    font-size: 20px;
  }
  #friendscontainer .infoForm h3 {
    font-size: 15px;
    margin: 0;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }
  .fcl {
    width: 100%;
    margin-left: 5%;
  }
  .fct {
    width: 70%;
    margin-left: 5%;
  }
}
@media screen and (min-width: 1308px) {
  #friendscontainer .infoForm {
    width: 40%;
  }
}
@media screen and (min-width: 1565px) {
  #friendscontainer .infoForm {
    width: 25%;
  }
}
@media screen and (max-width: 1200px) {
  .archives-content ul li > span {
    display: none;
  }
  .archives-content ul {
    padding: 0px;
  }
  .fcl,
  .fct {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .friends-title {
    width: 90%;
    margin-left: 5%;
    font-size: 30px;
    font-family: fangsong;
    text-decoration: underline;
    font-weight: bold;
    color: black;
    margin-top: 10px;
  }
  #pcintroimg {
    display: none;
  }
  #friendscontainermobile {
    margin-top: 60px;
    position: relative;
    min-height: 70vh;
    display: block;
    animation: fade-in;
    /*动画名称*/
    animation-duration: 1s;
    /*动画持续时间*/
    -webkit-animation: fade-in 1s;
    /*针对webkit内核*/
    width: 100vw;
  }
  .fricontent {
    width: 90%;
  }
  #friendscontainer {
    display: none;
  }
  .friend-box img {
    height: 100px;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
    float: left;
  }
  .friend-box {
    cursor: pointer;
    background: rgba(173, 213, 162, 0.7);
    width: 90%;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5%;
    overflow: hidden;
  }
  .flink-info {
    padding: 5px;
    color: white;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .friend-box .title {
    margin-top: 10px;
    color: white;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
  }
}
@media screen and (max-width: 750px) {
  .fcl {
    width: 100vw;
  }
}
@media screen and (max-width: 425px) {
  .friend-box .title {
    font-size: 15px;
  }
}
body {
  overflow-x: hidden;
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
}
#talkContainer .talk::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}
#talkContainer .talk::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: inset 0 0 6px transparent;
}
#talkContainer .talk::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
#talkContainer .talk::-webkit-scrollbar-track:active {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
#talkContainer .talk::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#talkContainer .talk::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#talkContainer .talk::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#talks {
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
}
#talkContainer .talk {
  width: 100%;
  min-height: 130px;
  height: auto;
  position: relative;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /*考虑浏览器兼容性*/
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  margin-bottom: 30px;
  border: 1px solid;
  border-radius: 10px;
  background: #FEFFF9;
  overflow: auto;
}
.ainfo {
  padding: 20px;
  height: auto;
}
.ainfo-intro {
  float: left;
}
.introcomment {
  display: inline;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
}
.intro1 {
  display: inline;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.author {
  display: inline;
  font-size: 18px;
  color: #6A5ACD;
  margin-right: 10px;
  font-weight: bold;
}
.time {
  display: inline;
  font-size: 15px;
  color: gray;
  margin-right: 10px;
}
#talkContainer .talk .talkcontent {
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;
  word-wrap: break-word;
  width: 70%;
  text-align: left;
  font-size: 18px;
}
.talk .talkimg {
  position: absolute;
  height: 100%;
  width: 170px;
  right: 0;
}
#getmorebt {
  width: 80%;
  float: left;
  padding: 10px;
  background: aliceblue;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 50px;
}
#getmorebt:focus {
  outline: 0;
}
@media screen and (min-width: 1200px) {
  #getmorebt {
    margin-left: 10%;
  }
  .talkShow {
    display: block;
    position: absolute;
    /*设置内容层绝对定位*/
    width: 100%;
    text-align: center;
    z-index: 2;
  }
  .tbar {
    display: none;
  }
}
@media screen and (max-width: 475px) {
  .talk .talkimg {
    width: 100px;
  }
}
@media screen and (max-width: 768px) and (min-width: 475px) {
  .talk .talkimg {
    width: 150px;
  }
}
@media screen and (max-width: 1200px) {
  .side {
    display: none;
  }
  .tbar {
    display: block;
  }
  #talkContainer .talk {
    width: 110%;
  }
  #talks {
    max-width: 90vw;
    margin-top: 50px;
  }
  #getmorebt {
    width: 110%;
  }
}
@media screen and (max-width: 1200px) {
  #talkContainer .talk .talkcontent {
    font-size: 15px;
  }
  .talkShow {
    width: 90%;
  }
}
@media screen and (max-width: 425px) {
  #talkContainer .talk .talkcontent {
    width: 55%;
  }
}
/* 触发弹窗图片的样式 */
.talkimg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.talkimg:hover {
  opacity: 0.7;
}
/* 弹窗背景 */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* 图片 */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
/* 添加动画 */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* 关闭按钮 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 80px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 小屏幕中图片宽度为 100% */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
a {
  text-decoration: none;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tags-container {
  margin-top: 50px;
  min-height: 30vh;
  width: 100%;
  border-radius: 40px;
  position: absolute;
  padding-bottom: 70px;
  animation: fade-in;
  /*动画名称*/
  animation-duration: 1s;
  background: rgba(204, 204, 214, 0.5);
  /*动画持续时间*/
  -webkit-animation: fade-in 1s;
  /*针对webkit内核*/
}
.tagsbackgroundleft {
  background: #363433;
  width: 58.33%;
  opacity: 0.7;
}
.tagsbackgroundtop {
  background: #363433;
  width: 50%;
  opacity: 0.7;
}
.tagintro {
  padding-top: 2%;
  padding-left: 5%;
  font-size: 2em;
  font-weight: bold;
  text-align: left;
}
.tags-container .tag {
  display: inline;
  float: left;
  width: 20%;
  margin-left: 2%;
  margin-top: 5%;
  margin-right: 2%;
  border: solid;
  border-radius: 7px;
  padding: 5px;
  color: #3cdc82;
  font-size: 1.2em;
}
.tagsimg {
  width: 60%;
  max-height: 60vh;
  border-radius: 40px;
  margin-left: 0;
}
@media screen and (max-width: 1200px) {
  .tags-container .tag {
    width: 20%;
    margin-top: 2vh;
    border: none;
  }
  .tagsbackgroundleft {
    display: none;
  }
  .tags-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0px;
  }
  .tagsimg {
    margin-left: 20%;
    margin-top: 70px;
  }
  .tagsbackgroundtop {
    display: none;
  }
}
.postimage {
  width: 100%;
}
.tag-container {
  min-height: 100vh;
  animation: fade-in;
  /*��������*/
  animation-duration: 1s;
  /*��������ʱ��*/
  -webkit-animation: fade-in 1s;
  /*���webkit�ں�*/
}
@media screen and (max-width: 1200px) {
  .tag-container {
    margin-top: 100px;
    animation: fade-in;
    /*��������*/
    animation-duration: 1s;
    /*��������ʱ��*/
    -webkit-animation: fade-in 1s;
    /*���webkit�ں�*/
  }
}
@media screen and (max-width: 768px) {
  .tag-container {
    margin-top: 2%;
  }
  .tags-container .tag {
    width: 25%;
  }
}
@media screen and (max-width: 425px) {
  .tags-container .tag {
    width: 40%;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*��ʼ״̬ ͸����Ϊ0*/
  40% {
    opacity: 0;
  }
  /*����״̬ ͸����Ϊ0*/
  100% {
    opacity: 1;
  }
  /*����״̬ ͸����Ϊ1*/
}
@-webkit-keyframes fade-in {
  /*���webkit�ں�*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.postimage {
  width: 100%;
}
.tag-container {
  min-height: 100vh;
  animation: fade-in;
  /*��������*/
  animation-duration: 1s;
  /*��������ʱ��*/
  -webkit-animation: fade-in 1s;
  /*���webkit�ں�*/
}
@media screen and (max-width: 1200px) {
  .tag-container {
    margin-top: 100px;
    animation: fade-in;
    /*��������*/
    animation-duration: 1s;
    /*��������ʱ��*/
    -webkit-animation: fade-in 1s;
    /*���webkit�ں�*/
  }
}
.miniMode {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 99;
  background: #fff;
  padding-right: 18px;
  transition: all 0.3s ease;
  max-width: 400px;
}
@media screen and (min-width: 1200px) {
  .aplayer-body {
    display: block;
  }
  .aplayer {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .miniMode {
    display: none;
  }
}
.tk-actions a {
  color: white;
  border: 1px solid;
  padding: 5px 10px 5px 10px;
  background-color: #baccd9;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.tk-actions a:hover {
  color: white;
}
.tk-content span {
  text-align: left;
}
.twikoo p {
  margin-top: 30px;
}
.tk-nick {
  font-size: 16px;
  color: #b2cf87;
}
.tk-content p {
  font-size: 15px;
}
.tk-content span a {
  color: #fbf2e3;
  margin-left: 5px;
  text-decoration: underline;
  font-size: 12px;
}
.twikoo .el-textarea__inner {
  border: white 1px solid;
}
.twikoo .tk-extra {
  color: #f9f4dc;
}
.twikoo .tk-footer a {
  color: #a4cab6;
}
.twikoo .tk-footer a:hover {
  color: #a4cab6;
}
.tk-comment {
  margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
  .veditor::placeholder {
    color: #b3b3b3;
    font-size: 18px;
    text-align: center;
    line-height: 3rem;
    font-family: kaiti;
  }
}
.vcontent p {
  color: white;
}
.vinput::placeholder {
  color: white;
}
#ispeak .count {
  margin-top: 30px;
  font-size: 25px;
  color: ghostwhite;
}
#ispeak button {
  width: 80%;
}
@media screen and (min-width: 1200px) {
  #ispeak .xk-card {
    background: rgba(255, 255, 255, 0.5);
  }
  #ispeak .xk-card-content img {
    max-width: 1000px;
    width: 60%;
    margin-right: 40%;
    height: auto;
    display: flex;
    left: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  #ispeak .xk-card-content {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    line-height: 1.5;
  }
}
@media screen and (max-width: 1024px) {
  #ispeak .xk-card {
    background: rgba(255, 255, 255, 0.5);
  }
  #ispeak .xk-card-content img {
    max-width: 800px;
    width: 60%;
    margin-right: 40%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  #ispeak .xk-card {
    background: rgba(255, 255, 255, 0.5);
  }
  #ispeak .xk-card-content img {
    max-width: 760px;
    width: 60%;
    margin-right: 40%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  #ispeak .xk-card {
    background: rgba(255, 255, 255, 0.5);
  }
  #ispeak .xk-card-content img {
    width: 100%;
    margin-right: 0%;
    margin-bottom: 10px;
  }
}

      .sitename {
        color: #4c6ef5;
      }
    
        .description {
          color: #fcc419;
        }
      
        .menubutton {
          color: #fa5252;
        }

        .menucontainer span::before,
        .menucontainer span::after {
          color:#fa5252;
          content: attr(data-text);
          position: absolute;
          top: -0.5em;
          left: 0;
          width: 100%;
          transition: 0.3s ease-out;
        }

        .menubutton:visited{
          color: #fa5252;
        }

        .menutopbutton{
          color: #fa5252;
        }

        .menutopbutton:visited{
          color: #fa5252;
        }
      
        .posttitle {
          color: #ffd43b;
        }
        .eleg-title{
          color: #ffd43b;
        }
      
        #sitegotimeDate,#sitegotimes,#footinfo,#footinfo a{
          color: #fd7e14;
        }
      
        .mobiledescribtion{
          color: #fd7e14;
        }
      
        .navbar-inverse{
          background-color: rgba(143,168,171,0.8);
        }