/* ============ 舞台 ============ */
.stage {position: relative;width: 100%;  height:auto; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.5px; color: #1f2937; }
.brand .dot {
  width: 10px; height: 10px; border-radius: 50%;background: linear-gradient(135deg, #2563eb, #06b6d4);box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.trackBox{ height: 6.2rem; }
.track { position: relative; width: 100%; height: 100%; }

.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rem;
  height: 6rem;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), opacity 0.5s ease, filter 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform, opacity;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
}
.slide.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
}
.slide.is-prev {
  transform: translate(calc(-50% - 6rem), -50%) scale(0.3);
  opacity: 0.85;
  z-index: 5;
  filter: brightness(0.97);
  -webkit-transform: translate(calc(-50% - 6rem), -50%) scale(0.3);
  -moz-transform: translate(calc(-50% - 6rem), -50%) scale(0.3);
  -ms-transform: translate(calc(-50% - 6rem), -50%) scale(0.3);
  -o-transform: translate(calc(-50% - 6rem), -50%) scale(0.3);
}
.slide.is-next {
  transform: translate(calc(-50% + 6rem), -50%) scale(0.3);
  opacity: 0.85;
  z-index: 5;
  filter: brightness(0.97);
  -webkit-transform: translate(calc(-50% + 6rem), -50%) scale(0.3);
  -moz-transform: translate(calc(-50% + 6rem), -50%) scale(0.3);
  -ms-transform: translate(calc(-50% + 6rem), -50%) scale(0.3);
  -o-transform: translate(calc(-50% + 6rem), -50%) scale(0.3);
}
.slide.is-far-prev, .slide.is-far-next {
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%) scale(0.25);
  -moz-transform: translate(-50%, -50%) scale(0.25);
  -ms-transform: translate(-50%, -50%) scale(0.25);
  -o-transform: translate(-50%, -50%) scale(0.25);
}

.slide .product {
  width: 60%; height: 86%; object-fit: contain;
  /* filter: drop-shadow(0 10px 28px rgba(20,30,50,0.12)); */
  transition: transform 0.6s ease;
}
.slide.is-active .product { transform: scale(1.02); }

.slide .tag {
  position: absolute; top: 18px; left: 22px;
  font-size: 11px; letter-spacing: 1.5px; color: #9ca3af;
  text-transform: uppercase; font-weight: 500;
}
.slide.is-active .tag { color: #6b7280; }

/* .device-svg { width: 78%; height: 78%; filter: drop-shadow(0 10px 26px rgba(20,30,50,0.14)); } */

/* ============ 导航 ============ */
.ctrl {
  position: absolute; top: 50%; transform: translateY(-50%);   gap: 8px;
  user-select: none;   background: #eef0f2; width: 28%; height: 2.4rem;  
}
.ctrl .arrow {    line-height: 1; }
.ctrl .label {    letter-spacing: 0.5px; }
.ctrl-prev { left: 0;  border-top-right-radius: 2rem;border-bottom-right-radius: 2rem; }
.ctrl-next { right: 0;border-top-left-radius: 2rem;border-bottom-left-radius: 2rem; }

/* ============ 底部 ============ */
.footer {
     z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
 
}
.product-name {   letter-spacing: 0.5px; text-align: center; transition: opacity 0.4s ease; }
.product-sub {   letter-spacing: 1px; transition: opacity 0.4s ease; }
.dots { display: flex; gap: 8px; margin-top: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; cursor: pointer; transition: all 0.3s ease; }
.dot.active { width: 22px; border-radius: 4px; background: #2563eb; }

.idxEquipmentMore .round{ position: absolute; right: -.2rem; top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
.idxEquipmentMore:hover .round{ transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); }

@media (max-width: 1200px) {
/*   .slide { width: 520px; height: 380px; }
    .ctrl-prev { left: 12px; } .ctrl-next { right: 12px; } 
*/
  .slide.is-prev { transform: translate(calc(-50% - 4.2rem), -50%) scale(0.3); -webkit-transform: translate(calc(-50% - 4.2rem), -50%) scale(0.3); -moz-transform: translate(calc(-50% - 4.2rem), -50%) scale(0.3); -ms-transform: translate(calc(-50% - 4.2rem), -50%) scale(0.3); -o-transform: translate(calc(-50% - 4.2rem), -50%) scale(0.3); }
  .slide.is-next { transform: translate(calc(-50% + 4.2rem), -50%) scale(0.3); -webkit-transform: translate(calc(-50% + 4.2rem), -50%) scale(0.3); -moz-transform: translate(calc(-50% + 4.2rem), -50%) scale(0.3); -ms-transform: translate(calc(-50% + 4.2rem), -50%) scale(0.3); -o-transform: translate(calc(-50% + 4.2rem), -50%) scale(0.3); }


  
}
@media (max-width: 767px) {

  .trackBox{ height: 5rem;}
  .slide{ width: 6rem; height: 4rem;}
  .slide.is-prev, .slide.is-next { opacity: 0; pointer-events: none; }
  .slide.is-prev { transform: translate(calc(-50% - 100vw), -50%) scale(0.6); -webkit-transform: translate(calc(-50% - 100vw), -50%) scale(0.6); -moz-transform: translate(calc(-50% - 100vw), -50%) scale(0.6); -ms-transform: translate(calc(-50% - 100vw), -50%) scale(0.6); -o-transform: translate(calc(-50% - 100vw), -50%) scale(0.6); }
  .slide.is-next { transform: translate(calc(-50% + 100vw), -50%) scale(0.6); -webkit-transform: translate(calc(-50% + 100vw), -50%) scale(0.6); -moz-transform: translate(calc(-50% + 100vw), -50%) scale(0.6); -ms-transform: translate(calc(-50% + 100vw), -50%) scale(0.6); -o-transform: translate(calc(-50% + 100vw), -50%) scale(0.6); }
  .ctrl .label { display: none; }
  .ctrl{ width: 10%; height: 1rem; padding: 0; justify-content: center;}
  .footer{ text-align: center; padding: 20px;}
}