#home_top {
    font-family: iconfont;
  max-width: 1400px;
  margin: auto;
  margin-top: .5rem;
  padding: 0 1.5rem;
  width: 100%
}

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

.recent-top-post-group {
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 0
}

.recent-post-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: scroll
}

.recent-post-top::-webkit-scrollbar {
  display: none
}

@media screen and (min-width:1300px) {
  .recent-post-top {
      overflow-x: visible
  }

  .recent-top-post-group {
      overflow: visible;
      overflow-x: visible
  }
}

@media screen and (max-width:768px) {
  .recent-top-post-group {
      border-radius: 0;
      background: var(--bywind-background)
  }
}

.categoryItem {
  overflow: hidden;
  transform: scale(1);
  transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
  height: 48%;
  border-radius: 12px
}

a.categoryButton {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.67);
  border-radius: 12px;
  display: inline-block;
  text-align: left;
  line-height: 4em;
  font-weight: 800;
  font-size: 16px;
  color: #FFF;
  transition: all .8s cubic-bezier(.39, .575, .565, 1);
  transform: scale(1);
  overflow: hidden
}

a.categoryButton i {
  transform: scale(1.0) rotate(15deg)
}

@media screen and (min-width:1300px) {
  a.categoryButton:active {
      transform: scale(0.97)
  }
}

@media screen and (max-width:768px) {
  a.categoryButton {
      border-radius: 8px
  }

  .categoryItem {
      border-radius: 0px;
      height: 47%;
      box-shadow: none !important
  }
}

a.categoryButton:after {
  top: 45px;
  width: 1rem;
  left: 21px;
  height: 2px;
  background: #fff;
  content: "";
  border-radius: 1px;
  position: absolute
}

.categoryButtonText {
  padding-left: 21px
}

a.categoryButton i {
  font-size: 4rem;
  opacity: .3;
  position: absolute;
  right: 15px;
  top: 10%;
  transition: 0.3s;
  width: 100px;
  text-align: center;
  filter: blur(2px)
}

@media screen and (max-width:768px) {
  a.categoryButton i {
      display: none
  }

  .recent-post-top .categoryGroup {
      min-width: 130px !important;
      margin-bottom: 0.5rem;
      margin-left: 1rem;
      max-height: 164px;
      overflow: hidden;
      position: relative
  }
}

.topGroup {
  display: flex
}

#bannerGroup {
  display: flex
}

div#banners {
  display: none
}


.topGroup .todayCard {
  display: none
}

@media screen and (min-width:1300px) {
  .topGroup {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      height: calc(328px + 0.5rem);
      align-content: space-between;
      width: calc(600px + 1.5rem);
      position: relative
  }

  div#bannerGroup {
      width: calc(100% - 600px - 2rem);
      margin-right: 0.5rem;
      height: calc(328px + 0.5rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between
  }

  div#banners {
      display: flex;
      width: 100%;
      height: 76%;
      background: var(--body-bg-color);
      margin-bottom: 0.5rem;
      border: var(--style-border);
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
      flex-direction: column;
      overflow: hidden;
      transition: 0.3s;
      clip-path: inset(0 0 0 0 round 12px)
  }

  div#banners:hover {
      box-shadow: var(--bywind-shadow-main)
  }

  .banners-title {
      top: 2rem;
      left: 1.5rem;
      position: absolute;
      display: flex;
      flex-direction: column
  }

  .banners-title-big {
      font-size: 36px;
      line-height: 1;
      font-weight: bold;
      margin-bottom: 8px
  }

  .banners-title-small {
      font-size: 12px;
      line-height: 1;
      color: var(--bywind-secondtext);
      margin-top: 8px;
      margin-bottom: 0.5rem
  }

  #banner-hover {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: var(--body-bg-color);
      color: var(--bywind-white);
      padding-left: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s
  }

  .bannerText {
      font-size: 4rem;
      line-height: 4rem;
      font-weight: bold
  }

  #banners:hover #banner-hover {
    color: #Fff;
      opacity: 1;
      padding-left: 2rem;
      background: #4259efc9;
      backdrop-filter: blur(50px);
      -webkit-backdrop-filter: blur(50px);
      -webkit-backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
      transition: 0.3s;
      background-size: 200%;
      cursor: pointer
  }

  #banners #banner-hover i {
      font-size: 80px;
      opacity: 0.4
  }

  .topGroup .todayCard {
      position: absolute;
      width: calc(600px + 1rem);
      height: 100%;
      z-index: 1;
      top: 0;
      left: 0;
      background: var(--bywind-card-bg);
      border-radius: 12px;
      margin-left: 0.5rem;
      overflow: hidden;
      transition: 0.3s;
      display: flex;
      cursor: pointer;
      pointer-events: all
  }

  .topGroup .todayCard::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0
  }

  .topGroup .todayCard .todayCard-info {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      z-index: 2;
      color: var(--bywind-white);
      max-width: 60%;
      transition: 0.3s
  }

  .topGroup .todayCard .todayCard-info .todayCard-title {
      font-size: 28px;
      font-weight: bold;
      line-height: 36px;
      color: #fff;
  }

  .topGroup .banner-button-group {
      position: absolute;
      right: 2rem;
      bottom: 2rem;
      display: flex;
      transition: 0.3s
  }

  .topGroup .todayCard .todayCard-cover {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      z-index: -1;
      transition: 0.3s
  }
}

.tags-group-icon {
  width: 120px;
  height: 120px;
  border-radius: 30px
}

.tags-group-all {
  display: flex;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg)
}

.tags-group-wrapper {
  margin-top: 5rem;
  display: flex;
  flex-wrap: nowrap;
  animation: rowup 60s linear infinite
}

.tags-group-icon-pair .tags-group-icon:nth-child(even) {
  margin-top: 1rem;
  transform: translate(-60px)
}

.tags-group-icon-pair {
  margin-left: 1.5rem;
  margin-top: 2rem
}

.tags-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 66px;
  font-weight: 700;
  box-shadow: var(--bywind-shadow-blackdeep)
}

.tags-group-icon img {
  width: 60%;
  height: 60%
}

.categoryItem:hover i {
  opacity: .8;
  transition: .8s;
  transition-delay: .15s;
  transform: scale(1.03) rotate(0);
  font-size: 4rem;
  filter: blur(0)
}

@media screen and (min-width:1300px) {
  .categoryItem:hover i {
      transform: scale(1.03) rotate(0)
  }
}

.recent-post-top .categoryGroup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px
}

.categoryGroup .categoryItem:nth-child(3) {
  display: none
}

@media screen and (min-width:1300px) {
  .recent-post-top .categoryGroup {
      flex-direction: row;
      height: 24%
  }

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

  .categoryItem:last-child {
      margin-right: 0
  }

  .categoryItem:hover {
      width: 50%
  }

  .categoryGroup .categoryItem:nth-child(3) {
      display: flex
  }
}

a.categoryButton.bikan {
  background: linear-gradient(to right, #358bff, #15c6ff);
  background-size: 200%
}

a.categoryButton.remen {
  background: linear-gradient(to right, #f65, #ffbf37);
  background-size: 200%
}

a.categoryButton.shiyong {
  background: linear-gradient(to right, #18e7ae, #1eebeb);
  background-size: 200%
}

a.categoryButton:hover {
  background-position: 100% 0
}

@keyframes rowup {
  from {
      transform: translateX(0)
  }

  to {
      transform: translateX(-50%)
  }
}

.banner-button-text a {
  color: #fff;
  font-weight: 700
}

.banner-button-text {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: .3s;
  cursor: pointer;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 40px;
  width: 118px;
  justify-content: center
}

.banner-button-text:hover {
  background-color: var(--theme-color)
}

@media screen and (max-width:1300px) {
  #home_top {
      display: none
  }
}

.icon-star-smile-fill::before {
  content: "\e699";
}

.icon-fire-fill::before {
  content: "\e630";
}

.icon-book-mark-fill::before {
  content: "\e606";
}