/* common value, do not edit unless you have global search and confirm it is safe */
/* Color Theme */
/* Color theme for landing */
/* header scss variable */
/* (Flexbox Mixin Helper) */
/* (Calc Mixin Helper) */
/*  START: Animation Mixin */
/* Clockwise Spinning */
/* Anti-clockwise Spinning */
/*  END: Animation Mixin */
/* line 7, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
#recommendation-slider-top-container {
  background-color: #FDDC66;
}
/* line 10, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
#recommendation-slider-top-container .image-container {
  display: block;
  position: relative;
  overflow: hidden;
}
/* line 8, ../../../../resource/compass/_ui/shared/common/css/ui/ui-image-container.scss */
#recommendation-slider-top-container .image-container img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* line 15, ../../../../resource/compass/_ui/shared/common/css/ui/ui-image-container.scss */
#recommendation-slider-top-container .image-container.loading, #recommendation-slider-top-container .image-container.error {
  background-image: url("/_ui/shared/common/svg/common/logoHktvmall-white.svg");
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #EBECE9;
}
/* line 24, ../../../../resource/compass/_ui/shared/common/css/ui/ui-image-container.scss */
#recommendation-slider-top-container .image-container:not(.error) img {
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* line 31, ../../../../resource/compass/_ui/shared/common/css/ui/ui-image-container.scss */
#recommendation-slider-top-container .image-container.error img {
  bottom: 10px;
  right: 10px;
}

/* line 15, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider {
  background-image: url(/_ui/desktop/common/images/sprite/deals-s42994f6e4e.png);
  background-position: 0 -421px;
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
  height: 434px;
  width: 1188px;
  display: block;
  margin: 0 auto;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* line 15, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
  .recommendation-slider {
    background-image: url(/_ui/desktop/common/images/sprite/deals-2x-seee71fa6e2.png);
    background-size: 1188px 855px;
    background-position: 0 -421px;
    height: 434px;
    width: 1188px;
  }
}
/* line 20, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .header {
  padding-top: 40px;
  padding-bottom: 25px;
  text-align: center;
}
/* line 25, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
body.language-zh .recommendation-slider .header .title {
  background-image: url(/_ui/desktop/common/images/sprite/deals-s42994f6e4e.png);
  background-position: -798px 0;
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
  height: 53px;
  width: 200px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* line 25, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
  body.language-zh .recommendation-slider .header .title {
    background-image: url(/_ui/desktop/common/images/sprite/deals-2x-seee71fa6e2.png);
    background-size: 1188px 855px;
    background-position: -798px 0;
    height: 53px;
    width: 200px;
  }
}
/* line 29, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
body.language-en .recommendation-slider .header .title {
  background-image: url(/_ui/desktop/common/images/sprite/deals-s42994f6e4e.png);
  background-position: -417px 0;
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
  height: 53px;
  width: 381px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* line 29, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
  body.language-en .recommendation-slider .header .title {
    background-image: url(/_ui/desktop/common/images/sprite/deals-2x-seee71fa6e2.png);
    background-size: 1188px 855px;
    background-position: -417px 0;
    height: 53px;
    width: 381px;
  }
}
/* line 34, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .single-slide-container {
  padding: 0 85px;
  text-align: center;
}
/* line 39, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .ui-deals-banner {
  display: inline-block;
  width: 336px;
  height: 252px;
  padding: 0 5px;
  box-sizing: border-box;
}
/* line 46, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .ui-deals-banner a {
  display: inline-block;
  vertical-align: top;
  width: 326px;
  height: 252px;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
/* line 55, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .ui-deals-banner a:hover {
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
/* line 60, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .ui-deals-banner a .caption {
  width: 326px;
  height: 101px;
  padding: 11px 10px 25px 10px;
  background-color: #FFF;
}
/* line 66, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .ui-deals-banner a .caption .caption-text {
  max-width: 100%;
  color: #1A1A1A;
  font-weight: bold;
  text-align: left;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 66px;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
}
/* line 78, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider {
  width: 1188px;
  position: relative;
}
/* line 82, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-list {
  overflow: visible;
}
/* line 86, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  width: 85px;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/* line 96, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow button {
  display: block;
  position: absolute;
  top: 118px;
  width: 66px;
  height: 66px;
}
/* line 104, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-prev {
  left: 0;
}
/* line 107, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-prev button {
  left: 35px;
  background-image: url("/_ui/shared/common/svg/arrows/red-circular-arrow-prev.svg");
}
/* line 112, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-prev:hover button {
  background-image: url("/_ui/shared/common/svg/arrows/red-circular-arrow-prev-hover.svg");
}
/* line 117, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-next {
  right: 0;
}
/* line 120, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-next button {
  right: 35px;
  background-image: url("/_ui/shared/common/svg/arrows/red-circular-arrow-next.svg");
}
/* line 125, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-arrow.slick-next:hover button {
  background-image: url("/_ui/shared/common/svg/arrows/red-circular-arrow-next-hover.svg");
}
/* line 131, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-dots {
  position: absolute;
  bottom: -22px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* line 137, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-dots li {
  display: inline-block;
  height: 12px;
}
/* line 141, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-dots li button {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  font-size: 0;
}
/* line 152, ../../../../resource/compass/_ui/desktop/common/css/recommendation-slider-deals.scss */
.recommendation-slider .slick-slider .slick-dots li.slick-active button {
  background-color: #FB4241;
}