@charset "UTF-8";
/*================ Module-specific styles ================*/
/*============================================================================
  To update Slick slider to a new version,
  scroll down to #Slick Slider SCSS and follow the instructions

  Default Slick classes all start with '.slick'
  Custom classes all start with '.hero'

  Extra specificity in selectors is used to override default
  styles before including the default Slick CSS
==============================================================================*/
/*================ Variables ================*/
/*================ Prev/next and pagination ================*/
.slick-slider .slick-dots {
  margin: 0;
  bottom: 10px;
}

.slick-slider .slick-dots li {
  margin: 0;
  vertical-align: middle;
}

.slick-slider .slick-dots li button {
  position: relative;
}

.slick-slider .slick-dots li button:focus {
  outline: none;
}

.slick-slider .slick-dots li button:before,
.slick-slider .slick-dots li a:before {
  text-indent: -9999px;
  border-radius: 100%;
  background: #888888 !important;
  width: 6px;
  height: 6px;
  margin: 5px 0 0 5px;
  opacity: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.slick-slider .slick-dots li.slick-active a:before {
  background: #ffffff !important;
}

.slick-slider .slick-dots li.slick-active button:before {
  background: #ffffff !important;
  opacity: 1;
  width: 6px;
  height: 6px;
  margin: 5px 0 0 5px;
}

.slick-slider .slick-dots li button:active:before {
  opacity: 0.5;
}

/*============================================================================
  #Slick Slider overrides
    - If upgrading Slick's styles, use the following variables/functions
      instead of the slick defaults
    - Only overwrite slick's default styles starting at #Slick Slider SCSS
==============================================================================*/
/*============================================================================
  #Slick Slider SCSS
    - Everything below this line is unchanged from Slick's scss file
    - When updating to a new version, don't include the variables/function
      that were modified above
==============================================================================*/
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 1.875rem;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-loading .slick-list {
  background: white url(//cdn.shopify.com/s/files/1/0290/8284/5232/t/6/assets/ajax-loader.gif?v=4135686330247201572) center center no-repeat;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  max-height: 100vh;
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  width: 0.6rem;
  line-height: 0;
  cursor: pointer;
  padding: 0;
  border: none;
}

.slick-prev .icon:before,
.slick-next .icon:before {
  bottom: 0;
}

.slick-prev .icon:before,
.slick-next .icon:before {
  position: relative;
  transition: top 0.1s linear;
  font-size: 0.6rem;
  color: #3c3c3c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev:hover .icon:before,
.slick-next:hover .icon:before {
  top: -0.125rem;
}

/* Dots */
.slick-dots {
  position: absolute;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li.slick-active button:before {
  color: #3c3c3c;
}

.slick-dots button,
.slick-dots a {
  border: 0;
  background: transparent;
  display: block;
  height: 16px;
  width: 16px;
  line-height: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.slick-dots button:before,
.slick-dots a:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 1.25rem;
  height: 1.25rem;
  font-family: "slick-icons, sans-serif";
  font-size: 0.375rem;
  line-height: 1.25rem;
  text-align: center;
  color: #3c3c3c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.productSlider .slick-dots {
  position: relative;
  margin-top: 15px;
}
.productSlider .slick-dots li {
  margin: 0 5px;
}
.productSlider .slick-dots li.slick-active button:before {
  width: 8px;
  height: 8px;
  background: #666666 !important;
}
.productSlider .slick-dots li button:before, .productSlider .slick-slider .slick-dots li a:before {
  width: 8px;
  height: 8px;
  background: #C8C8C8 !important;
}
.productSlider .slick-arrow {
  position: absolute;
  z-index: 10;
  width: 48px;
  height: 100%;
  color: transparent;
  overflow: hidden;
  top: 0;
}
.productSlider .slick-arrow:focus {
  outline: none;
}
.productSlider .slick-arrow.slick-prev {
  left: 0;
  transform: rotate(180deg);
}
.productSlider .slick-arrow.slick-next {
  right: 0;
}

@media (max-width: 1279px) {
  .productSlider .slick-dots {
    margin-top: -45px;
  }
}
@media (max-width: 767px) {
  .mainvisual .heroSlide {
    height: 667px;
  }
  .mainvisual .heroSlideTxt {
    position: absolute;
    bottom: 35px;
    left: 30px;
  }
  .mainvisual .heroSlideTxt p:not(:last-child) {
    margin-bottom: 7px;
  }
  .mainvisual .heroSlideTxt span {
    font-size: 10px;
  }

  .categoryCarousel .slick-list {
    padding: 0 30px;
  }
  .categoryCarousel .slick-arrow {
    width: 30px;
  }
}