@charset "utf-8";
/* CSS Document */
/*首页动态组件*/

#preview_topic_index_page{
  /*width: 1200px;*/
  /*padding-left: 30px;*/
  /*padding-right: 30px;*/

  /*margin: 0 auto;*/
  position: relative;
  z-index: 99;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.preview_topic_index_page {
  /*margin-top: -120px;*/
}
.content-container,.double-column-container,.double-column-topic-container,.multiple-image-container,.photo-on-container,.photo-flat-container,.photo-word-container,.topic-list-container,.type_nav_box {
  width: 1200px;
  /*padding-left: 50px;*/
  /*padding-right: 50px;*/
  min-height: 200px;
}
.content-container {
  position: relative;
}
.swiper-container {
  width: 1200px;
}
.swiper-button-prev-custom {
  left: -80px!important;
}
.swiper-button-next {
  right: -80px!important;
}
.swiper-button-prev-custom,.swiper-button-next-custom {
  width:45px;
  padding: 10px;
  border-radius: 50%;
  background-color: white;
  background-image: unset;
  font-size: 24px;
  color: black;
}
.swiper-slide {
  position: relative;
  width: 224px;
  height: 220px;
}
.swiper-img-item{
  width: 100%;
  height: 100%;
  border-radius: 8px;
  cursor: pointer;
}
.swiper-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.swiper-title {
  width: calc(100% - 16px);
  margin: 8px;
  opacity: 0.6;
  height: 70px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 8px;
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
  text-align: center;
  color: black;
  position: absolute;
  bottom:0px;
  z-index: 99;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.double-column-item-title {
  color: #333333;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Microsoft YaHei;
  font-size: 18px;
}
.double-column-item-author {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-title {
  font-size: 18px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 30px;
  text-overflow: ellipsis;
}
.item-author {
  font-size: 14px;
  color: #bebebe;
}
.item-num:hover {
  color: white;
}

.middle-div {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
.more-btn {
  margin-left: auto;
  margin-right: 10px;
  font-size: 16px;
  color: #999999;
  line-height: 22px;
}
.area-list {
  background-color: white;
  display: flex;
  align-items: center;
  width: fit-content;
  height: 60px;
  border-radius: 50px;
}
.area-name{
  height: 100%;
  min-width: 120px;
  width: fit-content;
  text-align: center;
  cursor: pointer;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 20px;
  color: #333333;
  line-height: 36px;
  overflow: hidden;
  padding: 10px 30px;
}
.selected-area {
  color: white!important;
  font-weight: bold;
  text-align: center;
  border-radius: 50px;
  padding: 10px 30px;
}

#cpnt_custom_Single_Image {
  width: 100%;
  height: 300px;
}

.double-column-content-container {
  margin: 10px 3px;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  height: 103px;
}
.double-column-content-container:hover div,.double-column-content-container:hover div span,.photo-word-item:hover div{
  color: white!important;
}

.big-title {
  position: relative;
  font-size: 32px!important;
  line-height: 66px;
  font-weight: bold;
  text-align: center;
  color:#000000!important;
  margin-bottom: 20px;
}
.big-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 4px;
  width: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.image-list-container {
  border-radius: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-title {
  padding: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: bold;
  color:black;
  line-height: 35px;
}

.book-title:hover{
  color:white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.card-item {
  border-radius: 8px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  cursor: pointer;
}
.photo-word-item {
  display: flex;
  border-radius: 3px;
}
.photo-word-topic{
  width: 80%;
  color: #333333;
  font-weight: bold;
  padding-left: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.photo-word-date {
  width: 20%;
  font-size: 18px;
  color: #99999;
  font-weight: unset!important;
}
.photo-word-item, .double-column-item ,.image-item {
  cursor: pointer;
}
.card-item img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  object-fit: contain;
}

.area-list {
  margin-bottom: 10px;
}
.type-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top:40%;
  background-color: #0a84ff;
}
.preview-play-button {
  z-index:99;
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left: 50%;

}
.photo-on-content,.photo-flat-content,.photo-word-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-word-content {
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  height: 470px;
  align-items: unset!important;
}
.photo-word-container {
}
.photo-word-left {
  width: 450px;
  margin-right: 20px;
}
.photo-word-content-list {
  width: calc(100% - 470px);
}
.photo-word-content-list div {
  line-height: 54px;
  font-size: 18px;
}
.photo-word-date {
  color:grey;
}
.photo-word-container {
  border-radius: 10px;
}
.preview-page-top-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 40px;
}
.more-btn {
  position: absolute;
  right:20px;
  width: fit-content;
  cursor: pointer;
}
.index_page_title {
  font-size: 30px;
  color: white;
}
/*.preview-swipe-button {*/
/*  border-radius: 50%;*/
/*  width: 50px;*/
/*  heihgt: 50x;*/
/*  text-align: center;*/
/*  padding: 10px;*/
/*  background-color: white;*/
/*  background-image: unset;*/
/*  font-size: 24px;*/
/*  color: black;*/
/*}*/
.preview-right_box {
  text-align: center;
  color: white;
}
.preview-header {
  width: 100vw;
}
.preview-header-right {
}
.topic-list-container {
  min-height: unset;
}

.topic-list-content {
  display: flex;
  flex-wrap: wrap;
}

.topic-list-name {
  width: 18%;
  height:50px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 25px;
  padding: 12px 23px;
  border: 1px solid;
  background: white;
  color: #333333;
  margin-left: 5px;
  margin-right: 5px;
  -webkit-line-clamp: 1;
  text-align: center;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font-size: 16px;
}