/* =====================================================
   AITOZ TOP SLIDER 2026
   PC: existing 1000px slide / 3-slide bxSlider
   SP: full-width / 1-slide bxSlider
   CSS for the slider only; global resets are excluded.
   ===================================================== */

/* --- PC / base (original slider.css) --- */
.slide_all {
  width: 100%;
  height: 380px;
  margin: 0 auto 70px;
  position: relative;
  top: 140px;
  overflow: hidden;
}

.slide_wrap {
  width: 3000px;
  position: absolute;
  left: 50%;
  margin-left: -1540px;
}

.slide_body { width: 100%; }
.slide { width: 1000px; margin-left: 20px; }
.slide img { display: block; width: 100%; height: auto; vertical-align: bottom; }

/* --- bxSlider controls / pager (shared) --- */
.bx-controls-direction,
.bx-pager {
  text-align: center;
  height: 25px;
  margin-left: 100px;
}
.bx-controls-direction a,
.bx-pager-item { display: inline-block; }
.bx-pager-item a {
  display: block;
  width: 10px;
  height: 10px;
  margin: 10px 10px 0 0;
  border-radius: 50%;
  background: #000;
  opacity: .3;
  text-indent: -9999px;
  overflow: hidden;
}
.bx-pager-item a.active { opacity: 1; }
.bx-controls-direction a { padding: 0 5px; color: #000; text-decoration: none; }

/* --- Mobile (merged from slider_sp.css + responsive adjustments) --- */
@media screen and (max-width: 768px) {
  .slide_all {
    height: auto;
    aspect-ratio: 20 / 7; /* original images: 1000 x 350 */
    top: auto;
    margin: 50px auto 10px;
    overflow: hidden;
  }

  .slide_wrap {
    width: 100%;
    height: auto;
    position: relative;
    left: auto;
    margin-left: 0;
  }

  .slide_body { width: 100%; }
  .slide { width: 100%; margin-left: 0; }
  .slide img { width: 100%; height: auto; }

  /* bxSlider inserts its own wrapper and viewport. */
  .slide_all .bx-wrapper,
  .slide_all .bx-viewport { max-width: 100%; }

  .slide_all .bx-controls-direction,
  .slide_all .bx-pager { margin-left: 0; }
}