@charset "utf-8";
.gs-news-3 {
  padding: 1.4rem 0;
}
.gs-news-3 .containers {
  overflow: visible;
}
.gs-news-3 .con {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .gs-news-3 .con {
    display: block;
  }
}
.gs-news-3 .con .detailMain {
  width: 63.7%;
}
@media (max-width: 767px) {
  .gs-news-3 .con .detailMain {
    width: 100%;
  }
}
.gs-news-3 .con .side {
  width: 27.8%;
}
@media (max-width: 767px) {
  .gs-news-3 .con .side {
    width: 100%;
  }
}
.gs-news-3 .con .side .aboutBox {
  margin-top: 4em;
}
@media (max-width: 767px) {
  .gs-news-3 .con .side .aboutBox {
    margin-top: 3em;
  }
}
.gs-news-3 .con .side .aboutBox .title {
  color: var(--color1);
  padding: 1em 0;
  font-size: var(--font-size8);
}
.gs-news-3 .con .side .aboutBox .list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6em 2.2%;
  border-top: 1px solid #ebebeb;
}
.gs-news-3 .con .side .aboutBox .list li .pic {
  position: relative;
  z-index: 0;
  width: 8em;
  padding-top: 5.6em;
  display: block;
  cursor: pointer;
}
.gs-news-3 .con .side .aboutBox .list li .pic img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.gs-news-3 .con .side .aboutBox .list li .txt {
  flex: 1;
  margin-left: 7.9%;
}
.gs-news-3 .con .side .aboutBox .list li .txt .name {
  line-height: 1.4em;
  height: 2.8em;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.gs-news-3 .con .side .aboutBox .list li .txt .name a {
  font-size: var(--font-size8);
  color: var(--color2);
  transition: all 0.5s ease;
}
.gs-news-3 .con .side .aboutBox .list li .txt .name a:hover {
  color: var(--color);
}
.gs-news-3 .con .side .aboutBox .list li .txt .date {
  font-size: var(--font-size9);
  margin-top: 0.8em;
  color: var(--color4);
}
.gs-news-3 .title {
  font-size: var(--font-size2);
  color: var(--color1);
}
.gs-news-3 .about {
  display: flex;
  align-items: center;
  padding: 2.8% 0 0;
}
.gs-news-3 .date {
  color: var(--color4);
  margin-right: 0.3rem;
}
.gs-news-3 .content {
  border-top: 1px solid var(--color8);
  margin-top: 4.3%;
  padding-top: 3.6%;
  margin-bottom: 7.8%;
  font-size: var(--font-size8);
  color: var(--color4);
  line-height: 2.3;
}
.gs-news-3 .content ul li {
  list-style: inherit;
}
.gs-news-3 .content a {
  color: var(--color);
}
.gs-news-3 .content a:hover {
  text-decoration: underline;
}
.gs-news-3 .content img {
  max-width: 100%;
  height: auto;
}
.gs-news-3 .share-box {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  font-size: var(--font-size8);
  color: #666666;
}
.gs-news-3 .share-box .share {
  width: 100%;
  height: auto;
  margin-left: 10px;
  flex: 1;
  display: flex;
}
.gs-news-3 .share-box .share .item {
  width: auto;
  height: auto;
  position: relative;
  z-index: 1;
}
.gs-news-3 .share-box .share .item .icon-box {
  width: 0.3rem;
  min-width: 24px;
  height: 0.3rem;
  min-height: 24px;
  border-radius: 50%;
  background: #D8D8D8;
  font-size: 0;
  color: #FFFFFF;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-news-3 .share-box .share .item .icon-box svg {
  width: 50%;
  height: 50%;
}
.gs-news-3 .share-box .share .item .icon-box svg * {
  fill: currentColor !important;
  stroke: none !important;
  fill-opacity: 1 !important;
}
.gs-news-3 .share-box .share .item .qrcode {
  width: 1.2rem;
  min-width: 80px;
  max-width: 120px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 10;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s ease;
}
.gs-news-3 .share-box .share .item .qrcode::before {
  content: '';
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
  border-width: 0 7px 8px 7px;
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
}
.gs-news-3 .share-box .share .item .qrcode .img {
  width: 100%;
  height: auto;
  padding: 0.1rem;
  background: #FFFFFF;
  border-radius: 3px;
  overflow: hidden;
}
.gs-news-3 .share-box .share .item .qrcode .img img {
  width: 100%;
}
.gs-news-3 .share-box .share .item .qrcode .img canvas {
  width: 100%;
  max-width: 100%;
}
.gs-news-3 .share-box .share .item:hover .icon-box {
  background: var(--color);
}
.gs-news-3 .share-box .share .item:hover .qrcode {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 10px);
}
.gs-news-3 .share-box .share .item + .item {
  margin-left: 0.1rem;
}
.gs-news-3 .aboutBot {
  margin-top: 4%;
  border-top: 1px solid var(--color8);
  padding-top: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .gs-news-3 .aboutBot {
    display: block;
  }
}
.gs-news-3 .aboutBot .pageTurn3 {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gs-news-3 .aboutBot .btnPrev,
.gs-news-3 .aboutBot .btnNext {
  font-size: var(--font-size8);
  color: var(--color3);
  transition: all 0.5s ease;
}
.gs-news-3 .aboutBot .btnPrev:hover,
.gs-news-3 .aboutBot .btnNext:hover {
  color: var(--color);
}
.gs-news-3 .aboutBot .btnBack {
  width: auto;
  height: auto;
  background: var(--color9);
  line-height: 3.2;
  padding: 0 1.9em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--font-size8);
  color: var(--color3);
  transition: all 0.5s ease;
}
.gs-news-3 .aboutBot .btnBack i {
  width: 12px;
  height: 12px;
  position: relative;
  z-index: 1;
  margin-left: 10px;
  color: currentColor;
}
.gs-news-3 .aboutBot .btnBack i::before,
.gs-news-3 .aboutBot .btnBack i::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  background: currentColor;
}
.gs-news-3 .aboutBot .btnBack i::before {
  width: 2px;
  top: 0;
  margin-left: -1px;
}
.gs-news-3 .aboutBot .btnBack i::after {
  height: 2px;
  left: 0;
  margin-top: -1px;
}
.gs-news-3 .aboutBot .btnBack:hover {
  background: var(--color);
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .gs-news-3 .aboutBot .btnBack {
    padding: 0 1em;
    line-height: 2.6;
  }
  .gs-news-3 .aboutBot .btnBack i {
    width: 10px;
    height: 10px;
  }
}