/* slider-style.css - 360极速浏览器兼容版 */
/* 公共样式（兼容IE/360） */
.custom-blue-slider {
  margin:30px auto; 
  position:relative; 
  overflow:hidden; 
  border-radius:16px; 
  box-shadow:0 8px 32px rgba(0,119,255,0.15);
  background:#f0f7ff; /* 去掉渐变，兼容IE */
  padding:10px;
  width:100%;
  max-width:900px; /* 横版默认宽度 */
}
/* 兼容竖版 */
.slider-vertical {
  max-width:400px!important;
}

.slider-wrapper {
  overflow:hidden; 
  border-radius:12px; 
  position:relative; 
  width:100%;
  /* 替换aspect-ratio：用padding-top模拟比例 */
  padding-top:56.25%; /* 16:9 横版 */
  height:0;
}
/* 竖版9:16 */
.slider-vertical .slider-wrapper {
  padding-top:177.78%!important;
}

.slider-track {
  display:flex; 
  transition:transform 0.6s ease; /* 替换cubic-bezier为ease，兼容IE */
  height:100%;
  position:absolute; /* 配合wrapper的padding-top */
  top:0;
  left:0;
  width:100%;
}

.slider-slide {
  width:100%; 
  flex:0 0 100%; /* 替换flex-shrink */
  border-radius:12px; 
  object-fit:cover; 
  height:100%;
}

.slider-btn {
  position:absolute; 
  top:50%; 
  margin-top:-25px; /* 替换transform:translateY(-50%)，兼容IE */
  border-radius:50%; 
  border:none; 
  background:rgba(255,255,255,0.5); 
  color:#1677ff; 
  cursor:pointer; 
  box-shadow:0 2px 8px rgba(0,0,0,0.1); 
  transition:all 0.3s ease; 
  z-index:10; 
  display:block; /* 替换flex，兼容IE */
  text-align:center;
  line-height:50px; /* 按钮文字居中 */
  width:50px;
  height:50px;
  font-size:18px;
}
/* 竖版按钮 */
.slider-vertical .slider-btn {
  width:45px!important; 
  height:45px!important; 
  font-size:16px!important;
  line-height:45px!important;
  margin-top:-22.5px!important;
}

.slider-prev {left:20px;}
.slider-next {right:20px;}
.slider-vertical .slider-prev {left:15px!important;}
.slider-vertical .slider-next {right:15px!important;}

.slider-dots {
  position:absolute; 
  left:50%; 
  margin-left:-50px; /* 替换transform:translateX(-50%)，兼容IE */
  display:block; /* 替换flex，兼容IE */
  bottom:20px;
  z-index:10;
}
.slider-vertical .slider-dots {
  bottom:15px!important;
}

.slider-dot {
  border:none; 
  cursor:pointer; 
  transition:all 0.3s ease; 
  background:rgba(255,255,255,0.7);
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block; /* 横向排列圆点 */
  margin:0 5px; /* 替换gap */
}
.slider-vertical .slider-dot {
  width:10px!important; 
  height:10px!important;
  margin:0 4px!important;
}

.slider-dot.active {
  width:24px; 
  border-radius:12px; 
  background:#1677ff;
}
.slider-vertical .slider-dot.active {
  width:20px!important; 
  border-radius:10px!important;
}

/* 响应式适配 */
@media (max-width:768px) {
  .custom-blue-slider {
    max-width:95%!important; 
    padding:5px!important;
  }
  .slider-btn {
    width:40px!important; 
    height:40px!important; 
    font-size:16px!important;
    line-height:40px!important;
    margin-top:-20px!important;
  }
  .slider-prev {left:10px!important;}
  .slider-next {right:10px!important;}
  
  .slider-vertical .slider-btn {
    width:38px!important; 
    height:38px!important; 
    font-size:14px!important;
    line-height:38px!important;
    margin-top:-19px!important;
  }
  .slider-vertical .slider-prev {left:8px!important;}
  .slider-vertical .slider-next {right:8px!important;}
}
@media (min-width:769px) and (max-width:1024px) {
  .slider-vertical {max-width:70%!important;}
  .slider-horizontal {max-width:90%!important;}
}