.indexPage {
  background: url(../../../images/pc/index/index.jpg) top center no-repeat;
  background-size: cover;
  width: 100%;
  height: 30.27rem;
  position: relative;
}

.main {
  width: 14rem;
  margin: 4rem auto 0;
}

/* 顶部三列布局 */
.main__top-section {
  display: flex;
  justify-content: center;
  /* align-items: flex-start; */
}

/* 功能按钮区域 */
.main__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.main__buttons a:first-child{
  display: inline-block;
  width: 3.11rem;
  height: 0.97rem;
}
.main__buttons a:first-child img{
  padding: 0;
}
.main__buttons a{
   display: inline-block;
  width: 2.35rem;
  height: 0.67rem;
}
.main__buttons a img{
  padding-left: 0.3rem;
}
.main__button {
  display: block;
  transition: transform 0.3s ease;
}

.main__button:hover {
  transform: translateX(0.05rem);
}

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

/* 轮播图区域 */
.main__swiper {
  width: 5.34rem;
  height: 3.26rem;
  position: relative;
}

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main__swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: -1;
}

.main__swiper .swiper-slide::after{
  content: '';
  position: absolute;
   width: 5.34rem;
  height: 3.26rem;
  left: 0;
  top: -0.01rem;
  background: url(../../../images/pc/index/swiper-bg.png) no-repeat;
  background-size: cover;
  z-index: 0;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swiper 分页器样式 */
.swiper-pagination-bullet {
  width: 0.44rem;
  height: 0.03rem;
  background: url(../../../images/pc/index/swiper-pagination-bullet.png) no-repeat;
  background-size: cover;
  opacity: 1;
  border-radius: 0;
}

.swiper-pagination-bullet-active {
  background: url(../../../images/pc/index/swiper-pagination-bullet-active.png) no-repeat;
  background-size: cover;
}
.main__swiper .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizonta{
  bottom: -0.23rem;
    right: 0;
    text-align: right;
}
/* 公告区域 */
.main__notice {
  width: 5.67rem;
  height: 3.41rem;
  background: url(../../../images/pc/index/notice-bg.png) no-repeat;
  background-size: 100% 100%;
}

.notice-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 4.96rem;
  height: 0.72rem;
    margin: 0 auto;
}

.notice-tab {
font-size: 0.18rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 0.63rem;
    height: 0.72rem;
    text-align: center;
   font-family: 'bdzyjt';
}
.notice-tab p:last-child{
line-height: 0.05rem;
}
.notice-tab:hover {
  color: #3ae4ff;
}

.notice-tab.active {
  color: #3ae4ff;

}
.notice-tab p:first-child{
  margin-top: 0.2rem;
}
.notice-tab.active p{
  position: relative;
}
.notice-tab.active p:first-child::after{
  content: ""; /* 必须设置content属性，即使是空内容 */
  display: block; /* 确保伪元素以块级元素显示 */
  position: absolute;
  top: 0;
  left: 0;
  width: 0.63rem;
  height: 0.33rem;
  background: url(../../../images/pc/index/notice-title-active.png) no-repeat;
  background-size: cover;
}

.notice-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0rem;
  left: 0;
  width: 0.63rem;
  height: 0.08rem;
  background: url(../../../images/pc/index/notice-underline.png) no-repeat;
  background-size: cover;
}

.notice-more {
  font-size: 0.18rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 0.63rem;
    height: 0.72rem;
    text-align: center;
   font-family: 'bdzyjt';
   margin-left: auto;
}

.notice-more:hover {
   color: #3ae4ff;
}
.notice-more p:first-child{
  margin-top: 0.2rem;
}
.notice-more p:last-child{
line-height: 0.05rem;
}
.notice-contents {
  position: relative;
   width: 4.96rem;
    margin: 0 auto;
}

.notice-content {
  display: none;
  height: 2.69rem;
}

.notice-content.active {
  display: block;
}
.notice-title{
height: 0.65rem;
line-height: 0.65rem;
border-bottom: 0.01rem solid #3b3f49;
color: #fefefe;
font-size: 0.24rem;
font-weight: bold;
    padding: 0 0.32rem 0 0.3rem;
}
.notice-title a{
    display: inline-block;
  width: 100%;
  height: 100%;
  color: #fefefe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice-item {
     height: 0.5rem   ;
     color: #fff;
     font-size: 0.16rem;
     padding: 0 0.32rem 0 0.3rem;
     border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1);
 }
.notice-item a{
    display: flex;
    align-items: center;
    gap: 0.16rem;
    color: #fff;
    font-size: 0.16rem;
    height: 100%;
}
.notice-item:last-child {
  border-bottom: none;
}
.notice-item:hover .notice-tag{
  width: 0.17rem;
  height: 0.18rem;
background: url(../../../images/pc/index/notice-icon-active.png) no-repeat;
background-size: cover;
}
.notice-item:hover{
color: #ffeb56;
}
.notice-tag {
  width: 0.17rem;
  height: 0.18rem;
background: url(../../../images/pc/index/notice-icon.png) no-repeat;
background-size: cover;
}

.notice-text {
  flex: 1;


  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-date {
  white-space: nowrap;
}

/* 游戏攻略和排行榜区域 */
.main__game-section {
display: flex;
    justify-content: space-between;
    margin-top: 0.8rem;
}

/* 游戏攻略区域 */
.main__guide {
  width: 6.5rem;
}

.guide-header {
  width: 6.6rem;
  height: 0.39rem;
  background: url(../../../images/pc/index/guide-header.png) no-repeat;
  background-size: cover;
}
.guide-swiper-container {
    position: relative;
    width: 100%;
    height: 3.98rem;
    margin-top: 0.1rem;
}

.guide-swiper {
  width:5.6rem;
  height: 3.98rem;
  overflow: hidden;
  margin: 0;
}

.guide-swiper .swiper-wrapper {
  transition-timing-function: ease-out;
}

.guide-swiper .swiper-slide {
width: 2.8rem !important;
    height: 3.98rem;
}

.guide-swiper .swiper-slide::after {
  display: none;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 攻略Swiper右指示器 */
.guide-swiper-button-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.37rem;
    height: 0.52rem;
    background: url(../../../images/pc/index/game-swiper-btn.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
}

.guide-swiper-button-next:hover {
  transform: translateY(-50%) scale(1.1);
}

/* 排行榜区域 */
.main__ranking {
  width: 6.5rem;
}

.ranking-header {
    width: 6.4rem;
  height: 0.39rem;
  background: url(../../../images/pc/index/ranking-header.png) no-repeat;
  background-size: cover;
}

.ranking-tabs {
  display: flex;
  justify-content: flex-end;
}

.ranking-tab {
font-size: 0.16rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'bdzyjt';
        height: 0.3rem;
    line-height: 0.3rem;
}
.ranking-tabs span{
  font-size: 0.16rem;
    color: #fff;
    margin: 0 0.05rem;
}
.ranking-tab:hover {
  color: #3ae4ff;
}

.ranking-tab.active {
  color: #3ae4ff;
}

.ranking-table-header {
display: flex;
    align-items: center;
    font-size: 0.16rem;
    color: #fff;
    height: 0.56rem;
    line-height: 0.56rem;
    width: 6.4rem;
}

.ranking-col {
  text-align: center;
}

.ranking-col-rank {
  width:1.2rem;
}

.ranking-col-name {
  flex: 1;
  text-align: center;
}

.ranking-col-level {
  width: 0.8rem;
}

.ranking-col-job {
  width: 0.8rem;
}

.ranking-col-server {
  width: 0.8rem;
}

.ranking-content {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.ranking-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.ranking-item {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 0.16rem;
  color: #fff;
      width: 6.4rem;
    height: 0.63rem;
}

.ranking-item:hover {
  background: url(../../../images/pc/index/ranking-item-bg.png) no-repeat;
  background-size: cover;
}
.ranking-item span{
  height: 0.63rem;
  line-height: 0.63rem;
}
.ranking-rank {
  width: 1.2rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ranking-item--top2 .ranking-rank .icon{
   background: url(../../../images/pc/index/second-icon.png) no-repeat;
  background-size: cover;
}
.ranking-item--top1 .ranking-rank .icon{
   background: url(../../../images/pc/index/first-icon.png) no-repeat;
  background-size: cover;
}
.ranking-item--top3 .ranking-rank .icon{
   background: url(../../../images/pc/index/third-icon.png) no-repeat;
  background-size: cover;
}
.ranking-rank .icon{
  width: 0.34rem;
  height: 0.23rem;
  background: url(../../../images/pc/index/other-icon.png) no-repeat;
  background-size: cover;
      display: flex;
    justify-content: center;
    font-size: 0.12rem;
    line-height: 0.3rem;
}


.ranking-name {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-level {
  width: 0.8rem;
  text-align: center;
}

.ranking-job {
  width: 0.8rem;
  text-align: center;
}

.ranking-server {
  width: 0.8rem;
  text-align: center;
}

/* 职业介绍区域 */
.job-section {
  margin-top: 1rem;
}
.job-header{
width: 14rem;
height: 0.39rem;
background: url(../../../images/pc/index/job-title.png) no-repeat;
background-size: cover;
}
.job-swiper-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  margin-top: 0.3rem;
}

.job-swiper-container {
  position: relative;
  width: 11.5rem;
  overflow: hidden;
}

.job-swiper {
  width: 100%;
  height: 5.38rem;
  overflow: visible;
}

.job-swiper .swiper-wrapper {
  display: flex;
  gap: 0.51rem;
}

.job-swiper .swiper-slide {
  width: 3.36rem !important;
  height: 5.38rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-swiper .swiper-slide img {
  width: 3.36rem;
  height: 5.38rem;
  object-fit: cover;
}

/* 左右导航按钮 */
.job-btn {
  width: 0.46rem;
  height: 0.92rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.job-btn:hover {
  transform: scale(1.1);
}

.job-btn-left {
  background: url(../../../images/pc/index/job-btn-left.png) no-repeat center;
  background-size: contain;
}

.job-btn-right {
  background: url(../../../images/pc/index/job-btn-right.png) no-repeat center;
  background-size: contain;
}

.job-avatars {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  justify-content: center;
}
.job-avatars .job-avatar{
  display: flex;
  justify-content: center;
}
.job-avatars .job-avatar a{
  display: inline-block;
  width:0.76rem;
  height: 0.7rem;
  transition: transform 0.3s ease;
  background: url(../../../images/pc/index/job-photo1.png) no-repeat;
  background-size: cover;
}
.job-avatars .job-avatar:nth-child(2) a{

  background: url(../../../images/pc/index/job-photo2.png) no-repeat;
  background-size: cover;
}
.job-avatars .job-avatar:nth-child(3) a{

  background: url(../../../images/pc/index/job-photo3.png) no-repeat;
  background-size: cover;
}
.job-avatars .job-avatar:nth-child(4) a{

  background: url(../../../images/pc/index/job-photo4.png) no-repeat;
  background-size: cover;
}
/* .job-avatars .job-avatar a:hover {
   width:0.84rem;
  height: 0.84rem;
  background-position-y: -0.8rem;
} */

.job-avatars .job-avatar.active a{
  width:0.84rem;
  height: 0.84rem;
  background-position-y: -0.8rem;
}

/* 影像档案和关于我们区域 */
.main__media-section {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

/* 影像档案区域 */
.media-archive {
  flex: 1;

}

.media-header {
  width: 9.26rem;
  height: 0.39rem;
  background: url(../../../images/pc/index/media-header.png) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  align-items: center;

}

.media-tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.media-tab {
  font-size: 0.16rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'bdzyjt';
  transition: all 0.3s ease;
}

.media-tab:hover {
  color: #3ae4ff;
}

.media-tab.active {
  color: #3ae4ff;
  position: relative;
}

.media-content{
  width: 9.26rem;
}

.tab-divider {
  color:#fff;
  font-size: 0.16rem;
}

/* 内容面板 */
.media-panel {
  display: none;
}

.media-panel.active {
  display: block;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.15rem;
      margin: 0.15rem;
}

.media-item {
  position: relative;
  transition: transform 0.3s ease;
  width: 4.48rem;
  height: 2.5rem;
  background: url(../../../images/pc/index/wallpaper-bg.png) no-repeat;
  background-size: cover;
  display: flex;
    justify-content: center;
    align-items: center;

}

.media-item:hover {
  transform: scale(1.05);
}

.media-item img {
  width: 4.34rem;
  height: 2.36rem;
  display: block;
}
.video-item{
  position: relative;
}
.video-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}



/* 视频播放按钮 */
.video-item {
  position: relative;
}

.video-play-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.91rem;
  height: 0.90rem;
  background:url(../../../images/pc/index/video-play-icon.png) no-repeat;
  background-size: cover;
  transition: all 0.3s ease;
}

.video-item:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

/* 关于我们区域 */
.about-us {
  width: 3.74rem;

}

.about-header {
    width: 3.74rem;
  height: 0.39rem;
  background: url(../../../images/pc/index/about-header.png) no-repeat;
background-size: cover;
}


.about-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.about-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.2rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}



.about-icon {
  width: 2.07rem;
  height: 2.07rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;  /* 加上过渡动画 */
}

/* 鼠标悬浮时给 img 添加背景 */
.about-icon:hover img {

  background: url(../../../images/pc/index/about-bg.png) no-repeat;
  background-size: cover;
}

/* 视频播放弹窗 */
.skin_video .lay_content {
    margin-top: 0!important;
    width: 100%;
    height: 100%;
}

.skin_video .view-pop {
    width: 100%;
    height: 100%;
    background: #000;
}

.skin_video #myAudio,
.skin_video #externalVideoFrame {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

.skin_video .lay_close {
    z-index: 8
}