/*
BABBER
*/
.wrapper-banner {
  padding: 7% 14%;
  clear: both;
  position: relative;
  overflow: hidden;
}

.wrapper-banner.page {
  padding: 2% 5%;
  background: linear-gradient(
    to right,
    rgba(7, 11, 19, 1) 0%,
    rgba(177, 184, 196, 1) 66%,
    rgba(177, 184, 196, 1) 66%
  );
  margin-top: calc(1% + 5rem);
}

.wrapper-banner.banner-proto {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.wrapper-banner__blue {
  position: absolute;
  top: 50px;
  left: -32%;
  width: 52%;
  z-index: 2;
  overflow: hidden;
}
@media screen and (min-width: 576px) {
  .wrapper-banner__blue {
    left: -34%;
  }
}
@media screen and (min-width: 768px) {
  .wrapper-banner__blue {
    left: -36%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper-banner__blue {
    left: -25%;
    width: 40%;
  }
}
/*
LOCATION
*/
.wrapper-location {
  color: #7d8490;
  font-size: 0.9rem;
  text-decoration: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 10.5%;
  font-weight: bold;
  text-wrap: nowrap;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.wrapper-location.white a {
  color: rgba(0, 0, 0, 1);
}

.wrapper-location.page {
  padding: 2% 5%;
}

.wrapper-location.page,
.wrapper-location.pro {
  margin-top: calc(5% + 2.5rem);
}

.wrapper-location li {
  position: relative;
}

.wrapper-location a:not(:last-child) li::after {
  position: absolute;
  content: "";
  top: 10px;
  right: -20px;
  background-image: url(../img/all/btn--.svg);
  background-size: 10px auto;
  display: block;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
}

.mask-banner {
  position: absolute;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loaction-home {
  position: relative;
}

/* .loaction-home:before{
    content:'';
    width: 14px;
    height: 14px;
    background-image: url(../img/all/icon-home.svg);
    background-size:14px auto ;
    position: absolute;
    left:0;
    top:3px
} */
.wrapper-location a:last-child li {
  color: #eb4949;
  font-weight: bold;
}

.wrapper-location.white a:last-child li {
  color: rgba(24, 83, 160, 1);
}
@media screen and (min-width: 768px) {
  .wrapper-location {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
/*BANNER text*/
.wrapper-banner__text {
  margin-top: 4.2%;
}

.banner-text__lg {
  color: #ffffff;
  font-family: "IBM";
  font-size: 1.5rem;
  letter-spacing: 0px;
  word-spacing: 0px;
  line-height: normal;
  font-weight: bold;
  background-image: url(../img/page/diamond-red.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 0px top 15px;
  padding-right: 35px;
  display: inline-block;
  position: relative;
  top: 60px;
}

.banner-text__md {
  color: #ffffff;
  font-family: "IBM";
  font-size: 1.5rem;
  letter-spacing: 0px;
  word-spacing: 0px;
  line-height: normal;
  font-weight: bold;
  background-image: url(../img/page/diamond-red.svg);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: left 0px;
}

.txten {
  word-spacing: -10px;
  font-weight: normal;
}

.banner-subtext {
  color: #ffffff;
  font-size: 2rem;
  max-width: 280px;
  position: relative;
  top: 2.5rem;
}

.banner-subtext span {
  position: relative;
}

@media screen and (min-width: 768px) {
  .wrapper-location.page,
  .wrapper-location.pro {
    margin-top: calc(1% + 3rem);
  }

  .banner-text__lg {
    font-size: 1.75rem;
    background-size: 25px;
    background-position: right 0px top 20px;
  }

  .banner-text__md {
    font-size: 2.8rem;
  }

  .banner-subtext {
    font-size: 4rem;
  }

  .txten {
    word-spacing: -10px;
  }
}

@media screen and (min-width: 1280px) {
  .banner-text__lg {
    font-size: 2rem;
  }

  .banner-text__md {
    font-size: 3rem;
  }

  .txten {
    word-spacing: -20px;
  }

  .banner-subtext {
    font-size: 5.5rem;
    max-width: 1150px;
  }

  /*     .banner-subtext span:after{
        right: -75px;
        width: 50px;
    } */
}
@media screen and (min-width: 576px) {
  .wrapper-banner {
    padding: 4% 13%;
  }
}
@media screen and (min-width: 768px) {
  .wrapper-banner {
    padding: 2.5% 13%;
  }
}
@media screen and (min-width: 768px) {
  .wrapper-banner {
    padding: 1.8% 13%;
  }
}
@media screen and (min-width: 1360px) {
  .wrapper-banner {
    padding: 0.65% 13.724%;
  }
}

/*circle-dot*/
.circle-dot {
  --width: 50px;
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  border: 1px solid var(--main-color);
  position: relative;
  overflow: hidden;
}

.circle-dot.whitedot {
  border: 1px solid #ffffff;
}

.circle-dot.grayfilldot {
  border: 1px solid var(--bs-gray-400);
  background-color: var(--bs-gray-400);
}

.circle-dot.samlldot {
  --width: 40px;
}

.circle-dot:after {
  --dotwidth: 0px;
  content: "";
  width: var(--dotwidth);
  height: var(--dotwidth);
  position: absolute;
  display: block;
  background-color: var(--sub-color);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-left: calc(var(--dotwidth) / 2 * -1);
  margin-top: calc(var(--dotwidth) / 2 * -1);
  z-index: 0;
}

.circle-dot.grayfilldot:after {
  background-color: var(--bs-gray-400);
}

.circle-dot.whitedot:after {
  background-color: #ffffff;
}

.circle-dot div {
  width: var(--width);
  height: var(--width);
  background-image: url(../img/all/btn-cross.svg);
  background-repeat: no-repeat;
  background-size: 17px auto;
  background-position: center;
  position: relative;
  z-index: 1;
}

.circle-dot.grayfilldot div,
.circle-dot.whitedot div {
  filter: brightness(0) invert(1);
}

/*
*detail
*/
.wrapper-banner__pagetitle {
  background: linear-gradient(
    to right,
    rgba(7, 11, 19, 1) 0%,
    rgba(177, 184, 196, 1) 66%,
    rgba(177, 184, 196, 1) 66%
  );
}

/*cata*/
.slick-cata-wrapper {
  position: relative;
  border-bottom: 1px solid var(--bs-gray-300);
  background-color: #eaeff4;
  overflow: hidden;
  padding: 0 2rem;
}

.slick-cata a {
  flex: 0 0 auto;
}

.slick-cata a:not(:last-child) {
  /*     background-image: url(../img/page/slickcata-line.jpg); */
  background-repeat: no-repeat;
  background-position: right center;
}

.slick-cata li {
  color: #000;
  height: 100%;
  padding: 1rem 1.3rem;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
}
.slick-cata li:hover {
  color: var(--main-color);
}

@media screen and (min-width: 576px) {
  .slick-cata li {
    padding: 1rem 1.5rem;
  }
}

.slick-cata .slick-list {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .slick-cata .slick-track {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    transform: none !important;
    padding: 0rem;
  }

  .slick-cata .slick-slide {
    width: auto !important;
  }
}
.activeli {
  color: var(--main-color);
  background-color: #ffffff;
  border-left: 1px solid var(--bs-gray-300);
  border-right: 1px solid var(--bs-gray-300);
  border-bottom: 3px solid var(--main-color);
}
.slick-prev,
.slick-next {
  z-index: 1;
  width: 30px;
  height: 30px;
}

.slick-prev {
  bottom: -15px;
  left: -30px !important;
}

.slick-next {
  bottom: -15px;
  right: -30px !important;
}

/*
*
*detail END
*
*/

/* 
*
*
商品分類選單樣式
*
*
*
*
 */
.product-category-list .category-item {
  position: relative;
  transition: all 0.3s ease;
}

.product-category-list .category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

@media (min-width: 768px) {
}