@charset "utf-8";

/* 輪播 - 共用按鈕 */
.slicks-btn .slick-slide > div {
  line-height: 0;
}
.slicks-btn .slick-arrow {
	position: absolute;
  z-index: 6;
	top: 50%;
	margin-top: -21px;
	padding: 0;
	width: 42px;
	height: 42px;
  font-size: 0;
  letter-spacing: 0;
	text-indent: -9999px;
  line-height: 0;
	outline: none;
  border: none;
  background: none;
  overflow: hidden;
}
.slicks-btn .slick-arrow:before,
.slicks-btn .slick-arrow:after {
	display: block;
	content: "";
	position: absolute;
	width: 50%;
	height: .2rem;
	background-color: #313131;
}
.slicks-btn .slick-arrow:before {
	top: 2.8rem;
	left: 8px;
  -webkit-transform: rotate(55deg);
  -moz-transform: rotate(55deg);
  -ms-transform: rotate(55deg);
  -o-transform: rotate(55deg);
  transform: rotate(55deg);
}
.slicks-btn .slick-arrow:after {
	top: 1.2rem;
	left: 8px;
  -webkit-transform: rotate(-55deg);
  -moz-transform: rotate(-55deg);
  -ms-transform: rotate(-55deg);
  -o-transform: rotate(-55deg);
  transform: rotate(-55deg);
}
.slicks-btn:not(.thumb-slider) .slick-next {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.slicks-btn .slick-arrow.slick-disabled {
  opacity: 0.1;
  pointer-events: none
}
.slicks-btn .slick-prev {
  left: 0;
}
.slicks-btn .slick-next {
  right: 0;
}
.slicks-btn .slick-arrow:hover:before,
.slicks-btn .slick-arrow:hover:after {
	background-color: #b81c22;
}

.slicks-btn .slick-dots {
  position: absolute;
  left: 0;
  bottom: 35px;
  margin-bottom: 0;
  padding: 0 10px;
  width: 100%;
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  line-height: 0;
}
.slicks-btn .slick-dots li {
  display: inline-block;
  position: relative;
  padding: 0 5px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.slicks-btn .slick-dots li::marker {
  display: none;
}
.slicks-btn .slick-dots button {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  padding: 0;
  width: 10px;
  height: 10px;
  text-indent: -9999px;
  line-height: 1rem;
  border: none;
  border-radius: 100%;
  background: none #fff;
  box-shadow: none;
  overflow: hidden;
}
.slicks-btn .slick-dots li.slick-active button {
  background-color: #b81c22;
}
@media all and (max-width: 991px) {
  .slicks-btn .slick-dots li {
    padding: 0 3px;
    width: 14px;
    height: 14px;
  }
  .slicks-btn .slick-dots button {
    width: 8px;
    height: 8px;
  }
}
@media all and (max-width: 575px) {
  .slicks-btn .slick-dots li {
    width: 12px;
    height: 12px;
  }
  .slicks-btn .slick-dots button {
    width: 6px;
    height: 6px;
  }
}

/* index */
@media all and (max-width: 991px) {
  .ban-slick.slicks-btn .slick-dots {
    bottom: 12px;
    text-align: right;
  }
}

.prod-slick.slicks-btn .slick-arrow {
  top: 45%;
}
.prod-slick.slicks-btn .slick-prev {
  left: -42px;
}
.prod-slick.slicks-btn .slick-next {
  right: -42px;
}
@media all and (max-width: 1639px) {
  .prod-slick.slicks-btn .slick-dots {
    bottom: 0;
  }
  .prod-slick.slicks-btn .slick-dots button {
    background-color: #888;
  }
}

@media all and (max-width:991px) {
  .links-slick.slicks-btn .slick-dots {
    bottom: 0;
  }
  .links-slick.slicks-btn .slick-dots button {
    background-color: #888;
  }
}

/* product */
.pic-slick.slicks-btn .slick-prev {
  left: -40px;
}
.pic-slick.slicks-btn .slick-next {
  right: -40px;
}
@media all and (min-width:1025px) {
  .pic-slick.slicks-btn .slick-arrow {
    display: none;
  }
}