.container {
  flex-direction: column;
  margin-bottom: 12px;
}
.container > .banner {
  margin-bottom: 12px;
  width: 956px;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.container > .banner > .swiper-wrapper > .swiper-slide > a > img {
  width: 956px;
  height: 320px;
  object-fit: cover;
}
.container > .banner > .swiper-wrapper > .swiper-slide > .title {
  position: absolute;
  max-width: 577px;
  height: 61px;
  background: rgba(51, 51, 51, 0.75);
  box-shadow: 0 0 4px rgba(153, 153, 153, 0.25);
  font-size: 32px;
  font-weight: 500;
  line-height: 61px;
  color: #fff;
  padding: 0 16px;
  bottom: 92px;
  left: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.container > .banner > .swiper-wrapper > .swiper-slide > .synopsis {
  position: absolute;
  max-width: 790px;
  height: 36px;
  background: rgba(51, 51, 51, 0.75);
  box-shadow: 0 0 4px rgba(153, 153, 153, 0.25);
  bottom: 48px;
  left: 48px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  color: #fff;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.container > .banner > .swiper-button-prev,
.container > .banner > .swiper-button-next {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  border-radius: 8px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.container > .banner:hover > .swiper-button-prev,
.container > .banner:hover > .swiper-button-next {
  opacity: 1;
  visibility: visible;
}
.container > .banner > .swiper-pagination {
  bottom: 16px;
}
.container > .banner > .swiper-pagination > .swiper-pagination-bullet {
  width: 36px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 4px rgba(153, 153, 153, 0.25);
  opacity: 0.5;
  border-radius: unset;
}
.container > .banner > .swiper-pagination > .swiper-pagination-bullet-active {
  opacity: 1;
}
.container > .main-container {
  display: flex;
  width: 956px;
}
.container > .main-container > .left {
  display: flex;
  flex-direction: column;
  width: 624px;
}
.container > .main-container > .left > .tab-bar {
  width: 576px;
  height: 60px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  padding: 0 24px;
  align-items: flex-end;
}
.container > .main-container > .left > .tab-bar > .item {
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  position: relative;
}
.container > .main-container > .left > .tab-bar > .item.active {
  padding: 15px 15px 11px 15px;
  border-bottom: 4px solid #49a8fc;
}
.container > .main-container > .left > .tab-bar > .item > .dot {
  position: absolute;
  right: 0;
  top: 22px;
  width: 8px;
  height: 8px;
  background: #db496a;
  border-radius: 50%;
}
.container > .main-container > .left > .list-container {
  width: 624px;
  background: #fff;
  border-radius: 10px;
  padding: 24px 0;
  margin-top: 12px;
}
.container > .main-container > .left > .list-container > .list > .item,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item {
  flex: 1;
  display: flex;
  padding: 0 24px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .avatar {
  align-self: flex-start;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .avatar {
  align-self: flex-start;
  position: relative;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .avatar
  > a
  > img,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .avatar
  > a
  > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: aliceblue;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .avatar
  > .number {
  border: 2px solid #fff;
  background: #db496a;
  color: #fff;
  min-width: 17px;
  height: 17px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: absolute;
  top: 0;
  right: -5px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f2f4fa;
  margin-bottom: 24px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 24px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content.last,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content.last {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  .label,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  .label {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  margin-left: 8px;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author {
  display: flex;
  align-items: center;
  width: 502px;
  margin-bottom: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item.game
  > .content
  > .author,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item.game
  > .content
  > .author {
  margin-bottom: 0;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author
  > .nickname,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .nickname {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author
  > .time,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .time {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-left: 8px;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .tips {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-left: 8px;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .btn-look-all {
  margin-left: 8px;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(153, 153, 153, 0.25);
  border-radius: 5px 5px 5px 5px;
  height: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #e4768f;
  padding: 2px 8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author
  > .game {
  font-size: 12px;
  font-weight: 500;
  color: #49a8fc;
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .game {
  font-size: 12px;
  font-weight: 500;
  color: #49a8fc;
  margin-left: 8px;
  min-width: 50px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author
  > .price,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .price {
  font-size: 12px;
  font-weight: 500;
  color: #db496a;
  margin-left: 8px;
  display: flex;
  align-items: center;
  text-decoration: underline;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .author
  > .price
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .author
  > .price
  > i {
  width: 17px;
  height: 17px;
  background-image: url("/style/img/common/icon_chart.png");
  background-size: 17px 17px;
  background-repeat: no-repeat;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .score,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .score {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 4px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .score
  > .time,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .score
  > .time {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  opacity: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .score
  > .star,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .score
  > .star {
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .score
  > .star
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .score
  > .star
  > i {
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-image: url("/style/img/common/star.png");
  margin-right: 2px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .score
  > .star
  > i.active,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .score
  > .star
  > i.active {
  background-image: url("/style/img/common/star_active.png");
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .title,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  line-height: 24px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .title.light,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .title.light {
  font-weight: 500;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .text,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .text {
  margin-bottom: 12px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .text
  > a,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .text
  > a {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  opacity: 1;
  line-height: 21px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .image,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .image {
  display: flex;
  margin-bottom: 12px;
  margin-left: -8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .image
  > a
  > img,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .image
  > a
  > img {
  width: 162px;
  height: 90px;
  border-radius: 5px;
  object-fit: cover;
  margin-left: 8px;
  background-color: aliceblue;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .image
  > a
  > img.cover,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .image
  > a
  > img.cover {
  width: 65px;
  height: 90px;
  border-radius: 5px;
  object-fit: cover;
  margin-left: 8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .lighting,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .lighting {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: #f2f4fa;
  margin-bottom: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .lighting
  > .cover,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .cover {
  width: 162px;
  height: 90px;
  border-radius: 5px 0 0 5px;
  object-fit: cover;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .lighting
  > .lighting-desc,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .lighting-desc {
  width: 100%;
  color: #999;
  font-size: 14px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .lighting
  > .btn-lighting,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .btn-lighting {
  height: 24px;
  background-color: #111;
  border-radius: 5px;
  color: #eedebd;
  font-size: 12px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag {
  display: flex;
  margin-left: -8px;
  flex-wrap: wrap;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > a,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > a {
  display: flex;
  align-items: center;
  background: #f2f4fa;
  border: 1px solid #f2f4fa;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  margin-left: 8px;
  margin-bottom: 12px;
  padding: 4px 8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > a
  > i.icon-circle,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > a
  > i.icon-circle {
  margin-right: 4px;
  color: #49a8fc;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > a
  > i.icon-topic,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > a
  > i.icon-topic {
  margin-right: 4px;
  font-size: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > a
  > i.icon-tag,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > a
  > i.icon-tag {
  margin-right: 4px;
  font-size: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > span,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > span {
  display: flex;
  align-items: center;
  background: #f2f4fa;
  border: 1px solid #f2f4fa;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  margin-left: 8px;
  margin-bottom: 12px;
  padding: 4px 8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > span
  > i.icon-tag,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > span
  > i.icon-tag {
  margin-right: 4px;
  font-size: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item {
  padding: 4px 8px;
  background: #f2f4fa;
  border: 1px solid #f2f4fa;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  display: flex;
  align-items: center;
  margin-left: 8px;
  margin-bottom: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item.common,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item.common {
  background: #49a8fc;
  border: 1px solid #49a8fc;
  color: #fff;
  opacity: 1;
  padding: 1px 10px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item.essence,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item.essence {
  background: #ffd21e;
  border: 1px solid #ffd21e;
  color: #fff;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item.essence
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item.essence
  > i {
  width: 12px;
  height: 12px;
  background-image: url("/style/img/common/essence_white.png");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 4px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item.offer-reward,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item.offer-reward {
  background: #ed8926;
  border: 1px solid #ed8926;
  color: #fff;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .tag
  > .item.offer-reward
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .tag
  > .item.offer-reward
  > i {
  width: 12px;
  height: 12px;
  background-image: url("/style/img/editor/offer_reward_white.png");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 4px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left {
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .view,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .view {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .view
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .view
  > i.icon-view {
  margin-right: 4px;
  color: #999;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .view
  > span,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .view
  > span {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  opacity: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 40px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise
  > i.icon-praise {
  margin-right: 4px;
  color: #999;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise.loading
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise.loading
  > i.icon-praise {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background: url("/style/img/common/loading.gif");
  background-size: 12px 12px;
  color: #fff;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise.active
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise.active
  > i.icon-praise {
  margin-right: 4px;
  color: #49a8fc;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise.active.loading
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise.active.loading
  > i {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background: url("/style/img/common/loading.gif");
  background-size: 12px 12px;
  color: #fff;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .praise
  > span,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .praise
  > span {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  opacity: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > a,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > a {
  margin-right: 40px;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > a
  > span,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > a
  > span {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  opacity: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > a
  > i.icon-comment,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > a
  > i.icon-comment {
  color: #999;
  margin-right: 4px;
  opacity: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .action-more,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .action-more {
  position: relative;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item
  > .content
  > .action
  > .left
  > .action-more
  > i,
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-dynamic
  > .item
  > .content
  > .action
  > .left
  > .action-more
  > i.icon-more1 {
  margin-right: 4px;
  display: inline-table;
  cursor: pointer;
  color: #999;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic {
  display: flex;
  flex-direction: column;
  height: 265px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-background-mask-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-background-mask {
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(8px);
  opacity: 0.75;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-head {
  display: flex;
  margin: 24px;
  z-index: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-head
  > .slot-name {
  height: 25px;
  background: rgba(73, 168, 252, 1);
  border: 1px solid #49a8fc;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
  padding: 0 8px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list {
  width: 100%;
  z-index: 1;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .swiper-slide {
  width: auto;
  height: 183px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item-padding {
  height: 1px;
  width: 24px;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item-padding.right {
  width: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item {
  display: flex;
  flex-direction: column;
  width: 207px;
  margin-right: 12px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item
  > .cover
  > img {
  width: 207px;
  height: 115px;
  object-fit: cover;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item
  > .title {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item
  > .info {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 14px;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item
  > .info
  > .avatar
  > img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.container
  > .main-container
  > .left
  > .list-container
  > .list
  > .item-slot-topic
  > .slot-list
  .slot-item
  > .info
  > .nickname {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 8px;
}
.container > .main-container > .left > .home-container {
  width: 624px;
  margin-top: 12px;
}
.container > .main-container > .left > .home-container > .follow-block {
  width: 624px;
  background: #fff;
  border-radius: 10px;
  padding: 24px 0 30px 0;
  position: relative;
  margin-bottom: 12px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .loading-mask {
  position: absolute;
  border-radius: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(169, 169, 169, 0.75);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  padding: 0 24px;
  margin-bottom: 24px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-list
  > .avatar {
  position: relative;
  margin-right: 24px;
  cursor: pointer;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-list
  > .avatar:last-child {
  margin-right: 0;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-list
  > .avatar
  > img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}
.container
  > .main-container
  > .left
  > .home-container
  > .follow-block
  > .follow-user-list
  > .avatar
  > .number {
  border: 2px solid #fff;
  background: #db496a;
  color: #fff;
  min-width: 17px;
  height: 17px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: absolute;
  top: 0;
  right: -5px;
}
.container > .main-container > .left > .home-container > .list-block {
  width: 624px;
  background: #fff;
  border-radius: 10px;
  padding: 24px 0;
}
.container > .main-container > .left > .home-container > .list-block > .list {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 2px solid #f2f4fa;
  margin-top: 24px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item:first-child {
  margin-top: 0;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 376px;
  height: 110px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-content {
  display: flex;
  flex-direction: column;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-content
  > .title {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: bold;
  color: #121212;
  line-height: 27px;
  display: block;
  word-break: break-all;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-content
  > .summary {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 25px;
  margin-top: 6px;
  display: block;
  word-break: break-all;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .left {
  flex: 1;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .left
  > .post-view {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .left
  > .post-view
  > i.icon-view {
  color: #999;
  margin-right: 4px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .left
  > .post-reply {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  margin-left: 30px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .left
  > .post-reply
  > i {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-image: url(/style/img/common/comment.png);
  margin-right: 4px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .right
  > .post-circle {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .left
  > .post-bar
  > .right
  > .post-circle
  > .icon-circle {
  margin-right: 4px;
  color: #49a8fc;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .right {
  flex-shrink: 0;
  margin-left: 16px;
}
.container
  > .main-container
  > .left
  > .home-container
  > .list-block
  > .list
  > .item
  > .right
  > .cover
  > img {
  width: 184px;
  height: 104px;
  object-fit: cover;
  border-radius: 5px;
  background-color: aliceblue;
}
.container > .main-container > .left > .list-container > .top-loading,
.container > .main-container > .left > .home-container .top-loading {
  position: relative;
  padding: 24px 0;
}
.container > .main-container > .left > .list-container > .bottom-loading,
.container > .main-container > .left > .home-container .bottom-loading {
  position: relative;
  margin-bottom: 24px;
}
.container > .main-container > .right {
  display: flex;
  flex-direction: column;
  width: 320px;
  margin-left: 12px;
}
.container > .main-container > .right > .topic-top {
  width: 272px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.container > .main-container > .right > .topic-top > .title-header {
  display: flex;
  justify-content: space-between;
}
.container > .main-container > .right > .topic-top > .title-header > .title {
  border-left: 4px solid #49a8fc;
  height: 22px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-left: 8px;
  flex: 1;
}
.container > .main-container > .right > .topic-top > .title-header > .tools {
  display: flex;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .title-header
  > .tools
  > .more {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .title-header
  > .tools
  > .more
  > i {
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-image: url("/style/img/common/more.png");
  margin-left: 4px;
}
.container > .main-container > .right > .topic-top > .list-container {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.container > .main-container > .right > .topic-top > .list-container > .item {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .index {
  font-size: 14px;
  font-weight: 500;
  color: #49a8fc;
  flex-shrink: 0;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .topic {
  flex: 1;
  display: flex;
  align-items: center;
  width: 0;
  margin: 0 16px;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .topic
  > a {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .topic
  > a
  > .icon-hot {
  margin-right: 4px;
  display: inline-flex;
  color: #db496a;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .topic
  > a
  > .icon-new {
  margin-right: 4px;
  display: inline-flex;
  color: #49a8fc;
}
.container
  > .main-container
  > .right
  > .topic-top
  > .list-container
  > .item
  > .view {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  flex-shrink: 0;
}
.container > .main-container > .right > .benefit-exchange {
  width: 272px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.container > .main-container > .right > .benefit-exchange > .title-header {
  display: flex;
  justify-content: space-between;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .title-header
  > .title {
  border-left: 4px solid #49a8fc;
  height: 22px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-left: 8px;
  flex: 1;
}
.container > .main-container > .right > .benefit-exchange > .list-container {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .cover
  > img {
  width: 272px;
  height: 98px;
  border-radius: 10px;
  object-fit: cover;
  background-color: aliceblue;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .name {
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .name
  > a {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .name
  > a
  > .icon-hot {
  margin-right: 4px;
  color: #db496a;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .name
  > a
  > .icon-new {
  margin-right: 4px;
  color: #49a8fc;
}
.container
  > .main-container
  > .right
  > .benefit-exchange
  > .list-container
  > .item
  > .quantity {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #999;
}
.container > .main-container > .right > .interest-user {
  width: 272px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.container > .main-container > .right > .interest-user > .title-header {
  display: flex;
  justify-content: space-between;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .title-header
  > .title {
  border-left: 4px solid #49a8fc;
  height: 22px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-left: 8px;
  flex: 1;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .title-header
  > .tools {
  display: flex;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .title-header
  > .tools
  > .exchange {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  display: flex;
  align-items: center;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .title-header
  > .tools
  > .exchange
  > i {
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-image: url("/style/img/common/refresh.png");
  margin-right: 4px;
}
.container > .main-container > .right > .interest-user > .list-container {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .avatar
  > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .info {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  flex: 1;
  width: 124px;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .info
  > .nickname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .info
  > .from-circle {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .info
  > .from-circle
  > .circle {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .action {
  margin-left: 12px;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .action
  > .btn-follow {
  width: 74px;
  height: 29px;
  background: #fff;
  border: 1px solid #f2f4fa;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #49a8fc;
  position: relative;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .action
  > .btn-follow.followed {
  color: #999;
}
.container
  > .main-container
  > .right
  > .interest-user
  > .list-container
  > .item
  > .action
  > .btn-follow.duration {
  color: #fff;
}
.share-menu {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 10px;
  z-index: 9999;
}
.share-menu > ul {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 4px rgba(153, 153, 153, 0.25);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  padding: 6px 12px;
}
.share-menu > ul > li {
  display: flex;
  align-items: center;
  width: 80px;
  padding: 6px 0;
  cursor: pointer;
}
.share-menu > ul > li:hover {
  color: #49a8fc;
}
.main-container > .right > .manage-action {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.main-container > .right > .manage-action > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.main-container > .right > .manage-action > .icon > i {
  width: 22px;
  height: 22px;
  background-image: url(/style/img/common/manage2_black.png);
  background-size: 22px 22px;
  background-repeat: no-repeat;
}
.main-container > .right > .manage-action > .icon > span {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-left: 12px;
}
.main-container > .right > .manage-action > .icon.active > i {
  width: 22px;
  height: 22px;
  background-image: url(/style/img/common/manage2_active.png);
  background-size: 22px 22px;
  background-repeat: no-repeat;
}
.main-container > .right > .manage-action > .icon.active > span {
  font-size: 14px;
  font-weight: 500;
  color: #49a8fc;
  margin-left: 12px;
}
.main-container > .right > .fast-image-navigate {
  display: flex;
  flex-direction: column;
}
.main-container > .right > .fast-image-navigate > .fast-nav-img {
  margin-top: 12px;
  position: relative;
  display: inline-block;
}
.main-container > .right > .fast-image-navigate > .fast-nav-img > img {
  width: 320px;
  height: 116px;
  border-radius: 10px;
  object-fit: cover;
  background-color: aliceblue;
}
.main-container > .right > .fast-image-navigate > .fast-nav-img > .cover {
  width: 320px;
  height: 116px;
  border-radius: 10px;
  background: rgba(51, 51, 51, 0.55);
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-container > .right > .fast-image-navigate > .fast-nav-img > .cover > i {
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(124, 124, 124, 0.5);
  margin: 0 6px;
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i:hover {
  background-color: rgba(124, 124, 124, 0.8);
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i.icon-top {
  background-image: url("/style/img/common/more_active.png");
  transform: rotate(-90deg);
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i.icon-up {
  background-image: url("/style/img/common/go_top_active.png");
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i.icon-setting {
  background-image: url("/style/img/common/setting_active.png");
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i.icon-down {
  background-image: url("/style/img/common/go_top_active.png");
  transform: rotate(180deg);
}
.main-container
  > .right
  > .fast-image-navigate
  > .fast-nav-img
  > .cover
  > i.icon-bottom {
  background-image: url("/style/img/common/more_active.png");
  transform: rotate(90deg);
}
.main-container > .right > .btn-fast-img-nav-add {
  width: 320px;
  height: 116px;
  background: #fff;
  border: 1px dashed #999;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  cursor: pointer;
}
.main-container > .right > .btn-fast-img-nav-add > i {
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-image: url("/style/img/common/setting_black.png");
  background-repeat: no-repeat;
}
.float-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.float-mask > .container {
  background: #fff;
  filter: drop-shadow(0 0 4px rgba(153, 153, 153, 0.25));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 24px;
}
.float-mask > .container > .title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.float-mask > .container > .content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.float-mask > .container > .content > .action button {
  background: #fff;
  border: 1px solid #f2f4fa;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.float-mask > .container > .content > .action button.cancel {
  background: #db496a;
  border: 1px solid #db496a;
  color: #fff;
  opacity: 1;
}
.float-mask > .container > .content > .action button.active {
  background: #49a8fc;
  border: 1px solid #49a8fc;
  color: #fff;
  opacity: 1;
}
.side-image-manage-float > .container {
  width: 539px;
  padding: 24px;
}
.side-image-manage-float > .container > .content > .info-container {
  display: flex;
  flex-direction: column;
}
.side-image-manage-float > .container > .content > .info-container > .label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .link-container {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 24px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .link-container
  > .link-name {
  padding: 0 16px;
  width: 264px;
  height: 32px;
  background: #fff;
  border: 2px solid #f2f4fa;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .link-container
  > .link-name
  > input {
  width: 100%;
  border: 0;
  outline: 0;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .link-container
  > .link-url {
  padding: 0 16px;
  width: 187px;
  height: 32px;
  background: #fff;
  border: 2px solid #f2f4fa;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .link-container
  > .link-url
  > input {
  width: 100%;
  border: 0;
  outline: 0;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container {
  display: flex;
  margin-top: 16px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .upload-container {
  width: 220px;
  height: 80px;
  background: #fff;
  border: 1px dashed #999;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .upload-container
  > i {
  width: 30px;
  height: 30px;
  background-image: url(/style/img/common/add.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .img-container {
  width: 220px;
  height: 80px;
  position: relative;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .img-container
  > img {
  width: 220px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .img-container
  > .cover {
  position: absolute;
  width: 220px;
  height: 80px;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.55);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .img-container
  > .cover
  > i {
  width: 30px;
  height: 30px;
  background-image: url("/style/img/common/image_white.png");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .txt {
  margin-left: 12px;
  margin-bottom: -10px;
}
.side-image-manage-float
  > .container
  > .content
  > .info-container
  > .image-container
  > .txt
  > p {
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #999;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
.side-image-manage-float > .container > .btn-close {
  position: absolute;
  right: 24px;
  top: 24px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #999;
  opacity: 1;
  cursor: pointer;
}
.side-image-manage-float > .container > .content > .info-container {
  margin: 36px 0;
}
.side-image-manage-float > .container > .content > .action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-image-manage-float
  > .container
  > .content
  > .action
  > .left
  > .btn-delete {
  width: 104px;
  height: 36px;
  background: #fff;
  border: 1px solid #f2f4fa;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #db496a;
  position: relative;
}
.side-image-manage-float
  > .container
  > .content
  > .action
  > .left
  > .btn-delete.duration {
  color: #fff;
}
.side-image-manage-float
  > .container
  > .content
  > .action
  > .right
  > .btn-cancel {
  width: 76px;
  height: 36px;
  background: #fff;
  border: 1px solid #f2f4fa;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(153, 153, 153, 1);
}
.side-image-manage-float > .container > .content > .action > .right > .btn-yes {
  margin-left: 16px;
  position: relative;
  width: 76px;
  height: 36px;
  background: #49a8fc;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.side-image-manage-float
  > .container
  > .content
  > .action
  > .right
  > .btn-yes.duration {
  color: #49a8fc;
}
.no-data {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmg-loading {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmg-loading > .line {
  display: inline-block;
  width: 15px;
  height: 5px;
  border-radius: 5px;
  background-color: #49a8fc;
  margin: 0 2px;
}
.cmg-loading > .line:nth-last-child(1) {
  animation: loadingCMG 1.5s 1s infinite;
}
.cmg-loading > .line:nth-last-child(2) {
  animation: loadingCMG 1.5s 0.5s infinite;
}
.cmg-loading > .line:nth-last-child(3) {
  animation: loadingCMG 1.5s 0 infinite;
}
@keyframes loadingCMG {
  0 {
    width: 15px;
  }
  50% {
    width: 35px;
  }
  100% {
    width: 15px;
  }
}