ul,
ol,
li {
  margin: 0;
  padding: 0;
  /* list-style: none; */
}
.club-detail p,
.club-detail h1,
.club-detail h2,
.club-detail h3,
.club-detail h4 {
  margin: 0;
}
.club-detail a {
  text-decoration: none;
  color: inherit;
}
.club-detail {
  font-size: 14px;
}
.club-detail * {
  box-sizing: border-box;
}
.club-detail img {
  width: 100%;
  height: 100%;
  display: block;
}

.club-detail .breadcrumb-wrapper {
  width: 100%;
  background: #f5f5f5;
  height: 44px;
  display: flex;
  align-items: center;
}
.club-detail .breadcrumb {
  display: flex;
  align-items: center;
  width: 1180px;
  margin: 0 auto;
  color: #888999;
}

.club-detail .breadcrumb li {
  height: 24px;
  display: flex;
  align-items: center;
}

.club-detail .breadcrumb-icon {
  width: 24px;
  height: 24px;
  margin: 0 6px;
}

.club-detail-container {
  width: 1180px;
  margin: 0 auto;
}

.club-detail .title-h1 {
  font-size: 32px;
  font-weight: bold;
  padding: 24px 0 20px 0;
}
.club-detail .title-h2 {
  font-size: 26px;
  font-weight: bold;
}

.club-detail .tags {
  display: flex;
}
.club-detail .tags > .tag {
  display: flex;
  background: #f5f7fa;
  border-radius: 47px;
  padding: 11px 14px;
}
.club-detail .tag:not(:last-child) {
  margin-right: 8px;
}
.club-detail .tags > .tag > .tag-title {
  color: #888999;
}
.club-detail .tags > .tag > .tag-content {
  color: #2266ff;
  font-weight: bold;
}
.club-detail .tags .tag > span:not(:last-child) {
  margin-right: 12px;
}

.club-detail-banner {
  width: 1180px;
  height: 496px;
  margin: 20px 0 50px;
}
.club-detail-banner > img {
  object-fit: cover;
}

.club-detail-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
}
.article-html {
  position: relative;
}
.article-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  z-index: 1;
}
.article-loading.hide {
  display: none;
}
.article-loading-svg {
  width: 3.25em;
  transform-origin: center;
  animation: rotate 2s linear infinite;
}
.article-loading-svg.hide {
  display: none;
}

.article-loading circle {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}
.club-detail-left {
  flex: 1;
  margin-right: 42px;
}
.club-detail-left .dynamic-html {
  margin: 30px 0 50px;
  width: 772px;
  overflow: hidden;
}
.club-detail-left .dynamic-html > * {
  line-height: 1.6;
  margin: 13px 0;
}
.club-detail-left .dynamic-html img {
  margin: 13px auto !important;
}
.related-article {
  width: 100%;
}
.related-article-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
}
.related-article-middle .related-article-more {
  display: inline-block;
  font-size: 14px;
  margin-top: 33px;
  color: #888999 !important;
}
.related-article-middle .related-article-more:hover {
  color: #2266ff !important;
}
.related-article-middle {
  display: flex;
  margin-bottom: 30px;
}
.related-article__left {
  width: 378px;
}

.related-article__left .related-article-cover {
  display: block;
  width: 100%;
  height: 223px;
  border-radius: 6px;
  overflow: hidden;
}
.related-article-cover > img {
  transition: transform 0.3s ease-in-out;
}
.related-article-cover:hover > img {
  transform: scale(1.1);
}
.related-article_title {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 22px;
  margin-top: 14px;
}
.related-article_title:hover {
  color: #2266ff;
}
.related-article_info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.related-article_author > i {
  font-size: 16px;
  font-style: italic;
}
.related-article_author > i:first-child {
  color: #888999;
}
.related-article_author > span:last-child {
  color: #4a4a54;
}
.related-article_total {
  display: flex;
}
.related-article_total img {
  width: 21px;
  margin-right: 4px;
}
.related-article_total-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.related-article_total-item:first-child {
  margin-right: 20px;
}
.related-article_total-item:first-child::before {
  content: "";
  background: url("/assets/club/images/eyes.png") no-repeat;
  background-size: 100% 100%;
  width: 21px;
  height: 13px;
  margin-right: 4px;
  margin-top: -2px;
}
.related-article_total-item:hover {
  color: #2266ff;
}
.related-article_total-item:first-child:hover:before {
  background: url("/assets/club/images/eyes-active.png") no-repeat;
}
.related-article_total-item:last-child::before {
  content: "";
  background: url("/assets/club/images/comment.png") no-repeat;
  background-size: 100% 100%;
  width: 21px;
  height: 20px;
  margin-right: 4px;
}
.related-article_total-item:last-child:hover:before {
  background: url("/assets/club/images/comment-active.png") no-repeat;
  background-size: 100% 100%;
}
.related-article_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  line-height: 24px;
  color: #4a4a54 !important;
  font-size: 16px;
  word-break: break-all;
  word-wrap: break-word;
  cursor: pointer;
}

.related-article-more {
  display: block;
  color: #2266ff !important;
  margin-top: 33px;
  font-size: 18px;
  margin-bottom: 4px;
}
.related-article-more:hover {
  color: #2266ff;
}
.related-article__right {
  margin-left: 20px;
  width: 374px;
  margin-top: -20px;
}
.related-article__right .related-article-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #e4e5ea;
  position: relative;
  height: 114px;
}
.related-article-item:last-child {
  border-bottom: none;
}
.related-article-item-content {
  flex: 1;
}
p.related-article-item_title {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 273px;
  margin-bottom: 6px;
  height: 24px;
}
.related-article-item_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  line-height: 24px;
  color: #4a4a54;
  font-size: 16px;
  word-break: break-all;
  word-wrap: break-word;
}
.related-article-item_cover {
  width: 80px;
  height: 74px;
  border-radius: 4px;
  margin-right: 20px;
  overflow: hidden;
}
.related-article-item_cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-article-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3f3f3f;
  visibility: hidden;
  border-radius: 6px;
  padding: 26px 50px;
}
p.related-article-item-mask_title {
  width: 280px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  margin-bottom: 6px;
  height: 24px;
}
.related-article-item-mask_desc {
  width: 280px;
  height: 44px;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
  color: #888999;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.related-article-item:hover .related-article-item-mask {
  visibility: visible;
}
.related-article-footer {
  display: flex;
}
.related-article-footer_item {
  width: 244px;
}
.related-article-footer_item .related-article-cover {
  display: block;
  width: 100%;
  height: 146px;
  border-radius: 6px;
  overflow: hidden;
}
.related-article-footer_item .related-article_title {
  margin-bottom: 4px;
  height: 24px;
}
.related-article-cover > img {
  transition: transform 0.3s ease-in-out;
}
.related-article-cover:hover > img {
  transform: scale(1.1);
}
.related-article-footer_item:not(:last-child) {
  margin-right: 20px;
}
.club-detail-right {
  width: 366px;
}

.club-detail-right .title-h2 {
  color: #063082;
  background: url("/assets/club/images/border-bg.png") no-repeat;
  background-size: 100% 2px;
  background-position: bottom left;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.recommended-quay {
  margin-top: 40px;
}
.provincial-wharf-item {
  display: block;
  padding: 20px 18px;
  background: #f5f7fa;
  border-radius: 6px;
  width: 100%;
  height: 310px;
  cursor: pointer;
}
.provincial-wharf-item:hover .provincial-wharf-item__title {
  color: #2266ff;
}
.provincial-wharf-item:hover .provincial-wharf-item_img-wrapper > img {
  transform: scale(1.1);
}
.provincial-wharf-item:not(:last-child) {
  margin-bottom: 20px;
}
.provincial-wharf-item__title {
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 超出一行省略号显示 */
  font-family: "Microsoft YaHei";
}
.provincial-wharf-item_img-wrapper {
  position: relative;
  width: 100%;
  height: 185px;
  margin: 16px 0;
  display: block;
  overflow: hidden;
}
.provincial-wharf-item_img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.provincial-wharf-item_location {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 28px;
  background: url(/assets/club/images/location-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.provincial-wharf-item_location > div {
  color: #ffffff;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.provincial-wharf-item_infos {
  display: flex;
}

.provincial-wharf-item_infos-item {
  position: relative;
  min-width: 84px;
}

.provincial-wharf-item_infos-item > div:first-child {
  color: #888999;
  margin-bottom: 5px;
}
.provincial-wharf-item_infos-item:not(:first-child) {
  padding: 0 28px;
}
.provincial-wharf-item_infos-item::after {
  content: "";
  width: 1px;
  height: 15px;
  background-color: #cdcdd4;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.provincial-wharf-item_infos-item:last-child::after {
  visibility: hidden;
}