/* 鼠标悬浮效果 */
a:hover {
    transform: translateX(5px) scale(1.05);
    box-shadow: 0 0 15px rgba(218, 165, 32, 0.8);
}

a:hover div {
    transform: translateY(0) !important;
}
/* 1. 页面主体容器：居中显示，定义固定宽度（根据你的页面调整，如1400px） */
.main-content {
  width: 100%;
  max-width: 1400px; /* 关键：主体最大宽度，广告栏将在其外侧 */
  margin: 0 auto; /* 居中 */
  padding: 0 15px; /* 小屏时的内边距 */
  box-sizing: border-box;
}

/* 2. 广告栏基础样式：固定定位，基于主体容器对齐 */
.ad-sidebar {
  position: fixed;
  top: 50%;
  z-index: 50;
  transform: translateY(-50%); /* 垂直居中 */
  display: none; /* 默认隐藏，大屏时显示 */
}

/* 3. 左侧广告栏：在主体容器左侧外侧 */
.ad-left {
  /* 核心：主体容器左侧 - 广告宽度 - 间距（20px） */
  left: calc(50% - (1400px / 2) - 185px - 50px);
}

/* 4. 右侧广告栏：在主体容器右侧外侧 */
.ad-right {
  /* 核心：主体容器右侧 + 间距（20px） */
  right: calc(50% - (1400px / 2) - 235px);
}

/* 5. 广告栏内部样式（复用原有风格） */
.ad-container-inner {
  background: #8B0000; /* 深姨妈红 */
  border: 2px solid #FFD700; /* 亮金色边框 */
  border-radius: 0 10px 10px 0; /* 左侧广告圆角在右 */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); /* 金色光晕 */
  padding: 10px;
}
/* 右侧广告栏圆角调整（右侧广告圆角在左） */
.ad-right .ad-container-inner {
  border-radius: 10px 0 0 10px;
}

/* 标题样式（复用原有） */
.ad-title-text {
  text-align: center;
  color: #00fff5; /* 自定义蓝色 */
  font-weight: bold;
  font-size: 19px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 15px;
}

/* 广告项样式（保留悬浮效果） */
.float-ad-item {
  display: block;
  width: 200px;
  height: 130px;
  margin-bottom: 15px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* 最后一个广告项去掉底部间距 */
.float-ad-item:last-child {
  margin-bottom: 0;
}

/* 广告图片样式 */
.ad-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充，兼容现代浏览器 */
}

/* 悬浮文字样式（保留滑入效果） */
.ad-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: 8px;
  font-size: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.ad-title {
  font-weight: bold;
  color: #ff0800;
  margin-bottom: 3px;
  font-size: 13px;
}

/* 6. 响应式适配：不同分辨率下的显示逻辑 */
/* 大屏（≥1400px + 广告宽度 + 间距）：显示广告栏 */
@media (min-width: 1815px) { /* 1400（主体） + 185（广告宽）*2 + 20（间距）*2 = 1810，留5px余量 */
  .ad-sidebar {
    display: block;
  }
}

/* 中屏（1200px ~ 1814px）：隐藏广告栏（避免遮挡主体） */
@media (max-width: 1814px) and (min-width: 768px) {
  .ad-sidebar {
    display: none;
  }
}

/* 小屏（<768px）：完全隐藏广告栏（屏幕空间不足） */
@media (max-width: 767px) {
  .ad-sidebar {
    display: none !important;
  }
}

/* 7. 旧浏览器兼容（IE 9+） */
/* IE 不支持 object-fit，用背景图替代 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .float-ad-item {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .float-ad-item img {
    display: none; /* 隐藏img，用背景图显示 */
  }
  /* 为每个广告项设置背景图（对应img的src） */
  .float-ad-item:nth-child(2) { background-image: url('/index/v4/20hyz.jpg'); }
  .float-ad-item:nth-child(3) { background-image: url('/index/v4/16.jpg'); }
  .float-ad-item:nth-child(4) { background-image: url('/index/v4/30.jpg'); }
  .float-ad-item:nth-child(5) { background-image: url('/index/v4/18hyz.jpg'); }
}