@charset "utf-8";

/* 쇼핑추천 */
.shopping {
}
.shopping .section-slide {
  height: auto;
}

.sw-shopping {
  height: 100%;
}

.good {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #eeeeee;
  text-align: center;
  overflow: hidden;
}
.good > img {
  width: 100%;
  /* 배경색이 mix blend 되므로 색상이 섞인다. */
  /* multiply 는 흰색을 투명하게 한다. */
  /* 자주 사용하지는 않습니다. */
  /* 포토샵 처럼 이미지 블랜드가 가능하다. */
  mix-blend-mode: multiply;
}
.good-info {
  background: #fff;
  text-align: left;
  padding: 20px;
}

.good-info-list {
}
.good-info-list li {
}
.good-info-list li b {
  font-size: 20px;
  line-height: 24px;
  color: #111;
  font-weight: 700;
  white-space: nowrap;
}
.good-info-list li b span {
  color: #ef3e43;
}
.good-info-list li p {
  font-size: 15px;
  line-height: 18px;
  color: #111;
  margin-top: 10px;

  /* 내용이 1줄일 수도 있고 최대 2줄이다 */
  /* 높이값을 지정해서 레이아웃을 지킨다. */
  /* 내용이 넘치는 경우 ... 처리 */
  /* 카페에 적어둘께요. 2줄 말줄임 */
  /* 1. 높이가 있어야 합니다. */
  height: 36px;
  /* 2. 넘치는 영역을 가린다. */
  overflow: hidden;
  /* 3. display: -webkit-box */
  display: -webkit-box;
  /* 4. text-overflow: elipsis */
  text-overflow: ellipsis;
  /* 5. 아래 코드를 입력한다. */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
  .good-info {
    padding: 10px;
  }
}

@media screen and (max-width: 800px) {
  .good {
    min-width: 100px;
  }
  .good-ifnolist > li > p {
    font-size: 1.3rem;
  }
  .good-info-list li b {
    font-size: 15px;
    list-style: 18px;
    white-space: nowrap;
  }
  .good-info {
    padding: 10px;
  }
}

@media screen and (max-width: 760px) {
  .good {
    min-width: 100px;
  }
  .good-ifnolist > li > p {
    font-size: 1.3rem;
  }
  .good-info-list li b {
    font-size: 15px;
    list-style: 18px;
  }
  .good-info-list li p {
    font-size: 1.3rem;
    line-height: 16px;
    height: 32px;
  }
  .good-info {
    padding: 5px;
  }
}