/* 控件父元素命名：compareSlider_8dK3a */
.compareSlider_8dK3a {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  overflow: hidden;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-x;
}

.compareSlider_8dK3a .compareSliderText_8dK3a {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--slider_text_color);
  font-size: var(--slider_text_size);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  padding: 0.6em 2em;
  border-radius: 2em;
  pointer-events: none;
  width: 90%;
}

.compareSlider_8dK3a .compareSliderText2_8dK3a {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--slider_text_color2);
  font-size: var(--slider_text_size2);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  padding: 0.6em 2em;
  border-radius: 2em;
  pointer-events: none;
}

.compareSlider_8dK3a .compareSliderImgDark_8dK3a,
.compareSlider_8dK3a .compareSliderImgLight_8dK3a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: none;
  pointer-events: none;
  user-select: none;
}

.compareSlider_8dK3a .compareSliderImgDark_8dK3a {
  z-index: 1;
}

.compareSlider_8dK3a .compareSliderImgLight_8dK3a {
  z-index: 2;
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.45s cubic-bezier(.4,0,.2,1);
}

.compareSlider_8dK3a .compareSliderBarWrap_8dK3a {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 90px;
  margin-left: -45px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: ew-resize;
  touch-action: none;
  transition: left 0.45s cubic-bezier(.4,0,.2,1);
}

.compareSlider_8dK3a .compareSliderBarEllipse_8dK3a {
  position: relative;
  width: 90px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fff;
  transition: background 0.2s;
  gap: 0;
  pointer-events: auto;
  user-select: none;
}

/* .compareSlider_8dK3a .compareSliderBarEllipse_8dK3a:active {
  background: #f5f5f5;
} */

.compareSlider_8dK3a .compareSliderArrowLeft_8dK3a,
.compareSlider_8dK3a .compareSliderArrowRight_8dK3a {
  width: 38px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  margin-left: 7px;
  position: relative;
  pointer-events: none;
}

.compareSlider_8dK3a .compareSliderArrowRight_8dK3a {
  margin-left: 7px;
  margin-right: 7px;
}

.compareSlider_8dK3a .compareSliderArrowIcon_8dK3a {
  font-size: 1.8em;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(33,150,243,0.13));
  user-select: none;
  pointer-events: none;
}

/* 响应式适配 */
@media (max-width: 960px) {
  .compareSlider_8dK3a { min-height: 260px; }
  .compareSlider_8dK3a .compareSliderBarWrap_8dK3a { width: 60px; margin-left: -30px; }
  /* .compareSlider_8dK3a .compareSliderBarEllipse_8dK3a { width: 60px; height: 28px; border-radius: 28px/14px;} */
  .compareSlider_8dK3a .compareSliderArrowLeft_8dK3a,
  .compareSlider_8dK3a .compareSliderArrowRight_8dK3a { width: 24px; height: 28px; border-radius: 28px 0 0 28px / 14px 0 0 14px;}
  .compareSlider_8dK3a .compareSliderArrowRight_8dK3a { border-radius: 0 28px 28px 0 / 0 14px 14px 0;}
  .compareSlider_8dK3a .compareSliderArrowIcon_8dK3a { font-size: 1.2em; }
  .compareSlider_8dK3a .compareSliderText_8dK3a { font-size: var(--slider_text_size); top: 60px;}
  .compareSlider_8dK3a .compareSliderText2_8dK3a { font-size: var(--slider_text_size2); top: 60px;}
}

@media (max-width: 500px) {
  .compareSlider_8dK3a { min-height: 160px; }
  .compareSlider_8dK3a .compareSliderBarWrap_8dK3a { width: 38px; margin-left: -19px; }
  /* .compareSlider_8dK3a .compareSliderBarEllipse_8dK3a { width: 72px; height: 32px; border-radius: 6px/6px;} */
  .compareSlider_8dK3a .compareSliderArrowLeft_8dK3a,
  .compareSlider_8dK3a .compareSliderArrowRight_8dK3a { width: 12px; height: 18px; border-radius: 18px 0 0 18px / 9px 0 0 9px;}
  .compareSlider_8dK3a .compareSliderArrowRight_8dK3a { border-radius: 0 18px 18px 0 / 0 9px 9px 0;}
  .compareSlider_8dK3a .compareSliderArrowIcon_8dK3a { font-size: 0.8em; }
  .compareSlider_8dK3a .compareSliderText_8dK3a { font-size: var(--slider_text_size); top: 32px;}
  .compareSlider_8dK3a .compareSliderText2_8dK3a { font-size: var(--slider_text_size2); top: 32px;}
}
.advanced-component{margin-top:2rem;margin-bottom:2rem}