/******组件样式*****/
/* 全局基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;}

/* 最外层容器 - 居中 + 精致包裹 */
.tab-box {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;}

/* 标题区域 - 高级居中排版 */
.tit h1 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 2px;
  position: relative;}
.tit h1::after {
  content: "";
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  display: block;
  margin: 16px auto 0;
  border-radius: 2px;}

/* 主图容器 - 高级卡片感 */
.content-wp {
  position: relative;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);}

/* 主图样式 - 无边距、完美展示 */
.slick-inner .item {
  outline: none;}
.slick-inner .pic img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;}

/* 轮播切换时的平滑过渡 */
.slick-slide {
  transition: all 0.4s ease;}

/* 缩略图外层容器 */
.tab-inner {
  max-width: 100%;
  margin: 0 auto;}
.con1 {
  width: 100%;}

/* 缩略图容器 - 居中 + 间距舒适 */
.rota-box {
  padding: 10px 0;}
.slick-nav {
  display: flex;
  gap: 14px;
  justify-content: center;}

/* 缩略图项 - 精致圆角 + 阴影 + 选中效果 */
.slick-nav .item {
  width: 130px;
  height: 100%;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  outline: none;
  border: 3px solid transparent;}

/* 缩略图 激活状态 = 高亮边框 */
.slick-nav .item.slick-active {
  border-color: #409eff;
  /* transform: translatey(-4px); */
  box-shadow: 0 6px 18px rgba(64, 158, 255, 0.25);}

/* 缩略图图片 */
.slick-nav .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;}

/* 缩略图 hover 轻微放大 */
.slick-nav .item:hover img {
  transform: scale(1.08);}

/* —————————— 响应式（手机/平板自动适配） —————————— */
@media (max-width: 768px) {
  .tab-box {
    margin: 30px auto;}
  .tit h1 {
    font-size: 24px;
    margin-bottom: 24px;}
  .slick-inner .pic img {
    height: 100%;}
  .slick-nav .item {
    width: 90px;
    height: 100%;}
  .slick-nav {
    gap: 8px;}
}

/* Slick 轮播必须基础样式 */
.slick-slide {
  float: left;}
.slick-initialized .slick-slide {
  display: block;}