@charset "utf-8";

/* ====== Global / Section ====== */
#banner {
  background: url(../images/index_bg2.jpg) top right repeat-x;
  padding-bottom: 0;
}

#middle {
  background: none;
}

#middle .wrap {
  top: 0;
}

#middle .wrap>.container {
  background: none;
}

#footer {
  margin-top: 0;
}

/* ====== Index Product ====== */
#index_product {
  background: url(../images/index_pro-bg2.png) bottom right no-repeat;
  padding-bottom: 30px;
  margin-bottom: 12px;
}

#index_product:after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
}

#index_product h3 {
  color: #fcd519;
  background: url(../images/index_ti.png) left center no-repeat;
  padding-left: 90px;
  font-size: 22px;
  text-transform: uppercase;
}

#index-proti-bg {
  background: url(../images/index_pro-bg1.png);
  width: 482px;
  height: 13px;
  display: inline-block;
}

/* 內框漸層 (保持你原設計) */
#index_product #idxprocarousel {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  padding: 12px 60px;
  margin-bottom: 0;
}

#index_product .item {
  background: none;
}

#index_product .carousel-control {
  background: #222;
  border: 0;
  border-radius: 23px;
  color: #fff;
  font-size: 15px;
  font-weight: bolder;
  height: 20px;
  left: 30px;
  line-height: 20px;
  margin-top: -20px;
  opacity: .5;
  position: absolute;
  text-align: center;
  top: 60%;
  width: 20px;
}

#index_product .carousel-control.right {
  left: auto;
  right: 30px;
}

#index_product .carousel-indicators {
  display: none;
}

/* 舊版格狀卡片（若無使用可移除） */
#index_product .span2 {
  background: #fff;
  border: 1px #dcdcdc solid;
  padding: 6px 0;
}

#index_product .span2 .caption {
  display: none;
}

/* RWD */
@media (max-width:999px) {
  #index-proti-bg {
    display: none;
  }
}

/* ====== New Carousel (zero-dep) – 專屬 #idxprocarousel ====== */
#idxprocarousel {
  position: relative;
}

/* 捲動容器（覆蓋舊 jCarousel 設定） */
#idxprocarousel .jcarousel {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* 保持定位 */
}

/* 軌道：用 flex，清除舊版定位/超大寬度 */
#idxprocarousel .jcarousel>ul {
  display: flex !important;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 8px;
  width: auto !important;
  left: auto !important;
  position: static !important;
}

/* 卡片：固定寬度造成水平溢出，清掉 float */
#idxprocarousel .jcarousel>ul>li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  float: none !important;
  display: block !important;
  user-select: none;
}

#idxprocarousel .item img {
  display: block;
  height: auto;
}

.jcarousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  left: 0 !important;
}

.jcarousel ul {
  width: 20000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jcarousel li {
  width: 200px !important;
  float: left;
  box-sizing: border-box;
}

.jcarousel img {
  display: block;
  height: auto !important;
}

/*----------------------*/
.jcarousel-wrapper {
    padding: 12px 60px;
    margin-bottom: 0;	
	background: url('../images/index-pbg.png');
	background-size: 100% 100%;
    background-repeat: no-repeat;
}

.jcarousel-control-prev,
.jcarousel-control-next,
.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
  z-index: 50;
  text-decoration: none;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border-radius: 50%;
  user-select: none;
}


/* RWD */
@media (max-width:1024px) {
  .jcarousel>ul>li {
    width: 220px;
  }
}

@media (max-width:600px) {
  .jcarousel>ul {
    gap: 12px;
  }

  .jcarousel>ul>li {
    width: 60vw;
  }
  .item img {
    width: 65%;
    margin: 0 auto;
  }

}