/* Headlines（置顶组件）*/
.Headlines {
  width: 1258px;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: linear-gradient(207deg, #fff, rgba(255, 255, 255, 0.05) 44%, #fff);
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .24);
}

.HeadlinesBox {
  display: flex;
  align-items: center;
  gap: 20px;
}

.HeadlinesTitle {
  display: flex;
  align-items: center;
}

.HeadlinesTitle::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #333;
}

.HeadlinesTitle h1,
.HeadlinesTitle h2 {
  color: #000;
  font-size: 22px;
  font-weight: normal;
  line-height: 50px;
}

.HeadlinesTitle a:hover h1,
.HeadlinesTitle a:hover h2 {
  color: #3848a0;
  font-weight: bold;
}

/* Carousel（轮播组件）*/
.Carousel {
  position: relative;
  display: flex;
  width: 1280px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: -3px -3px 10px rgba(255, 255, 255, .58), 3px 3px 10px rgba(166, 182, 195, .72);
}

.CarouselPicBox {
  position: relative;
  width: 840px;
  height: 473px;
}

.CarouselImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.CarouselImg a {
  display: block;
  width: 100%;
  height: 100%;
}

.CarouselImg a img,
.CarouselImg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.CarouselIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 66px;
  transform: translate(-50%, -50%);
  opacity: .9;
  cursor: pointer;
}

.CarouselIcon img {
  width: 100%;
  height: 100%;
}

.CloseBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

.CarouselTitleBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 440px;
  height: 473px;
  background: linear-gradient(-45deg, #e0ecf8, #f3f7fb);
}

.CarouselTitle {
  height: 65px;
}

.CarouselTitle a {
  display: flex;
  align-items: center;
  height: 100%;
}

.CarouselTitle a h3 {
  padding: 0 30px;
  color: #000;
  font-size: 15px;
  font-weight: normal;
  line-height: 30px;
}

.CarouselImg.active {
  opacity: 1;
  visibility: visible;
}

.CarouselIcon:hover {
  opacity: 1;
}

.CloseBtn:hover {
  background: rgba(0, 0, 0, .7);
}

.CarouselTitle.active {
  height: 90px;
  background-image: linear-gradient(to right, #007fe9, #48b9ff);
  box-shadow: 0 0 7px rgba(0, 0, 0, .24);
}

.CarouselTitle.active a h3 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* Headlines（快讯组件）*/
.NewsFlash {
  display: flex;
  align-items: center;
  width: 1280px;
  margin-top: 20px;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.NewsFlashIcon {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.NewsFlashIcon img {
  width: 50px;
  height: 50px;
}

.NewsFlashBox {
  width: 1200px;
  overflow: hidden;
}

.NewsFlashList {
  position: relative;
  white-space: nowrap;
}

.NewsFlashList::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 140px;
  background: linear-gradient(to right,rgba(255,255,255,0),#e0ecf8);
  pointer-events: none;
}

.NewsFlashTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
}

.NewsFlashTitle::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0762cb;
}

.NewsFlashTitle h3 {
  color: #000;
  font-size: 18px;
  font-weight: normal;
  line-height: 50px;
  transition: color .2s;
}

.NewsFlashTitle:hover h3 {
  color: #3848a0;
  font-weight: bold;
}

/* Live（直播组件）*/
.Live {
  margin-top: 20px;
}

.LiveHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 1280px;
  height: 60px;
  color: #000;
  font-size: 25px;
  font-weight: bold;
}

.LiveHeader img {
  width: 50px;
  height: 50px;
}

.LiveBox {
  position: relative;
  width: 1280px;
  overflow: hidden;
  border-radius: 10px;
  border-top: 1px solid #bd1929;
  border-bottom: 2px solid #bd1929;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.LiveArrow {
  position: absolute;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  background: rgba(224,236,248,.85);
  cursor: pointer;
  transition: background .2s;
}

.LiveArrowPrev {
  left: 0;
  border-radius: 10px 0 0 10px;
  border-left: 1px solid #bd1929;
}

.LiveArrowNext {
  right: 0;
  border-radius: 0 10px 10px 0;
  border-right: 1px solid #bd1929;
}

.LiveArrow svg {
  width: 15px;
  height: 25px;
  fill: none;
  stroke: #bd1929;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.LiveArrowDisabled {
  opacity: .3;
}

.LiveList {
  display: flex;
  padding: 20px 40px;
  transition: transform .35s ease;
}

.LiveSlide {
  flex: 0 0 20%;
  padding: 10px;
  box-sizing: border-box;
}

.LiveCard {
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
  transition: box-shadow .2s ease-out,transform .2s ease-out;
}

.LiveImg img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.LiveTitle {
  padding: 15px;
}

.LiveTitle a {
  display: block;
  color: #000;
}

.LiveTitle h3 {
  display: -webkit-box;
  overflow: hidden;
  height: 45px;
  font-size: 16px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.LiveMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #66666666;
  color: rgba(26,26,26,.8);
  font-size: 13px;
}

.LiveTags {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
}

.LiveStreamIng {
  background: #FF192D;
}

.LiveNotStarted {
  background: #FF8000;
}

.LiveEnded {
  background: rgba(0,0,0,.5);
}

.LivePulse {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.LivePulse span {
  width: 5px;
  background: #fff;
  animation: barFade 1s ease-in-out infinite alternate;
}

.LivePulse span:nth-child(1) {
  height: 5px;
}

.LivePulse span:nth-child(2) {
  height: 10px;
  animation-delay: .25s;
}

.LivePulse span:nth-child(3) {
  height: 5px;
  animation-delay: .5s;
}

.LiveArrow:hover {
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
}

.LiveCard:hover {
  box-shadow: 0 2px 10px 3px rgba(32,107,231,.15);
  transform: translateY(-3px);
}

@keyframes barFade {
  from {
    opacity: .3;
    transform: scaleY(.5);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ComponentBox（组件容器）*/
.ComponentBox {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 1280px;
}

/* NewsFeed（信息流组件）*/
.NewsFeed {
  margin-top: 20px;
}

.NewsFeedHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 840px;
  height: 60px;
  color: #000;
  font-size: 25px;
  font-weight: bold;
}

.NewsFeedHeader img {
  width: 30px;
  height: 30px;
}

.NewsFeedList {
  display: flex;
  flex-wrap: wrap;
  width: 840px;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.NewsFeedSlide {
  box-sizing: border-box;
  width: 33.33%;
  padding: 10px;
}

.NewsFeedCard {
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
  transition: box-shadow .2s ease-out,transform .2s ease-out;
}

.NewsFeedImg img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.NewsFeedTitle {
  padding: 15px;
}

.NewsFeedTitle a {
  display: block;
  color: #000;
}

.NewsFeedTitle h3 {
  display: -webkit-box;
  overflow: hidden;
  height: 45px;
  font-size: 16px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.NewsFeedMeta {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #66666666;
  color: rgba(26,26,26,.8);
  font-size: 13px;
}

.NewsFeedLoadMore {
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.NewsFeedLoadMore button {
  width: 200px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #E4EBF5;
  box-shadow: 3px 3px 6px #c8d0e7,-2px -2px 5px #fff;
  color: #9baacf;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: .3s ease;
}

.NewsFeedCard:hover {
  box-shadow: 0 2px 10px 3px rgba(32,107,231,.15);
  transform: translateY(-3px);
}

.NewsFeedLoadMore button:hover {
  color: #000;
  font-weight: bold;
}

.NewsFeedLoadMore button:active {
  box-shadow: inset 2px 2px 5px #c8d0e7,inset -2px -2px 5px #fff;
}

/* TimeChain（滚动播报） */
.TimeChain {
  margin-top: 20px;
}

.TimeChainHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 420px;
  height: 60px;
  color: #000;
  font-size: 25px;
  font-weight: bold;
}

.TimeChainHeader img {
  width: 50px;
}

.TimeChainList {
  position: relative;
  width: 400px;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.TimeLine {
  position: absolute;
  top: 20px;
  bottom: 60px;
  left: 14px;
  width: 2px;
  background: linear-gradient(180deg,#CC151E 0%,#FF3637 45.31%,rgba(255,54,55,0) 100%);
}

.Time {
  display: flex;
  align-items: center;
}

.Dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #FF3637;
}

.Dot i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.Time time {
  color: #FF3637;
  font-size: 15px;
}

.Title {
  margin: 6px 0;
  padding-left: 18px;
}

.Title h3 {
  color: #000;
  font-weight: normal;
}

.ItemFoot {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-left: 18px;
}

.Source {
  color: #86909C;
  font-size: 13px;
  line-height: 22px;
}

.Source span {
  margin-right: 10px;
}

.Share {
  opacity: .5;
  transition: opacity .2s;
}

.Share a {
  display: flex;
}

.Share img {
  width: 17px;
  height: 15px;
}

.ListItem:last-child .ItemFoot {
  margin-bottom: 0;
}

.Title h3:hover {
  color: #3848a0;
  font-weight: bold;
}

.Share:hover {
  opacity: 1;
}

/* AdGroup（广告组件）*/
.AdGroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

.AdBanner {
  position: relative;
  width: 420px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.AdBanner img {
  position: absolute;
  width: 420px;
  height: 100px;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}

.AdLink {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
}

.AdBanner img.Show {
  opacity: 1;
}

/* Visual（视觉组件）*/
.Visual {
  margin-top: 20px;
}

.VisualHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 1280px;
  height: 60px;
  color: #000;
  font-size: 25px;
  font-weight: bold;
}

.VisualHeader img {
  width: 30px;
  height: 30px;
}

.VisualBox {
  width: 1280px;
  height: 309px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.VisualItem {
  position: relative;
  float: left;
  height: 100%;
  overflow: hidden;
}

.VisualImg {
  width: 100%;
  height: 100%;
}

.VisualImg a {
  display: block;
  width: 100%;
  height: 100%;
}

.VisualImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
  transition: filter .4s ease;
}

.VisualOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.5);
}

.VisualTitleV {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: 0;
  width: 80px;
  margin: 0 auto;
}

.VisualTitleV a {
  display: block;
  height: 100%;
  color: #fff;
}

.VisualTitleV h3 {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 22px;
  font-weight: normal;
  height: 100%;
  margin: 0;
}

.VisualTitleH {
  position: absolute;
  bottom: 0;
  width: 530px;
  height: 80px;
}

.VisualTitleH a {
  display: block;
  color: #fff;
}

.VisualTitleH h3 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.VisualItemActive .VisualImg img {
  filter: blur(0);
}

/* Link（链接组件）*/
.Link {
  width: 1280px;
  margin-top: 20px;
  border-radius: 8px;
  background: linear-gradient(-45deg,#e0ecf8,#f3f7fb);
  box-shadow: -3px -3px 10px rgba(255,255,255,.58),3px 3px 10px rgba(166,182,195,.72);
}

.LinkHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 0;
  color: #000;
  font-size: 20px;
  font-weight: bold;
}

.LinkHeader img {
  width: 20px;
  height: 20px;
}

.MediaMatrixBox {
  padding: 20px;
}

.MediaMatrixBoxList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.MediaMatrixBoxImg {
  position: relative;
  flex: 0 0 calc((100% - 20px * 6) / 7);
}

.MediaMatrixBoxImg a {
  display: flex;
  align-items: center;
  height: 72px;
  border: 1px solid hsla(0,0%,10%,.07);
  border-radius: 5px;
  transition: border-color .3s,box-shadow .3s;
}

.MediaMatrixBoxImg img {
  width: 100%;
}

.QrCode {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 160px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .2s,transform .2s;
  pointer-events: none;
}

.QrCode img {
  display: block;
  width: 100%;
  height: auto;
}

.FriendshipLinksBox {
  padding: 20px;
}

.LinksList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.LinksList a {
  color: hsla(0,0%,10%,.6);
  font-size: 20px;
  transition: color .3s;
}

.MediaMatrixBoxImg a:hover {
  box-shadow: 0 2px 10px 3px rgba(32,107,231,.15);
}

.LinksList a:hover {
  color: #3848a0;
  font-weight: bold;
}

.MediaMatrixBoxImg:hover .QrCode {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}