/* BASIC css start */
/* =========================================================
   쿠션이야기 PC 메인 CSS
   ========================================================= */

body #footer {
  margin-top: 0;
}


/* ---------------------------------------------------------
   메인배너
--------------------------------------------------------- */
.mainBanner {
  margin-bottom: 60px;
}

.mainBanner .inner ul li a img {
  width: 100%;
}

.mainBanner .swiper-button-prev,
.mainBanner .swiper-button-next {
  top: 50%;
  width: 96px;
  height: 96px;
  margin-top: -48px;
  opacity: 0;
  transition: opacity .3s ease;
}

.mainBanner .swiper-button-prev {
  left: 8.6%;
}

.mainBanner .swiper-button-next {
  right: 8.6%;
}

.mainBanner:hover .swiper-button-prev,
.mainBanner:hover .swiper-button-next {
  opacity: 1;
}


/* ---------------------------------------------------------
   메인배너 - 블랙프라이데이 (bf-)
   띠 색상은 --bf-lime 한 곳만 바꾸면 됨
--------------------------------------------------------- */
.bf-slide {
  --bf-lime: #E2FF7A;
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  background: #000;
}

.bf-slide > img {
  display: block;
  width: 100%;
  height: auto;
}

.bf-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: clamp(28px, 2.6cqw, 52px);
  overflow: hidden;
  background: var(--bf-lime);
  color: #0A0A0A;
  pointer-events: none;
}

.bf-ribbon--top {
  top: 0;
}

.bf-ribbon--bottom {
  bottom: 0;
}

.bf-track {
  display: flex;
  width: max-content;
  animation: bf-flow var(--bf-dur, 40s) linear infinite;
  will-change: transform;
}

.bf-ribbon--bottom .bf-track {
  animation-direction: reverse;
}

.bf-set {
  display: flex;
  flex-shrink: 0;
}

.bf-item {
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  padding-right: 1.4em;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(14px, 1.3cqw, 24px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.bf-item::after {
  content: "";
  width: .26em;
  height: .26em;
  border-radius: 50%;
  background: currentColor;
}

/* 아래 띠 - 블랙 바탕 + 라임 네온 */
.bf-ribbon--neon {
  background: #000;
  color: var(--bf-lime);
  border-top: 1px solid var(--bf-lime);
  border-bottom: 1px solid var(--bf-lime);
  box-shadow: 0 0 16px color-mix(in srgb, var(--bf-lime) 35%, transparent);
}

.bf-ribbon--neon .bf-item {
  text-shadow:
    0 0 6px color-mix(in srgb, var(--bf-lime) 60%, transparent),
    0 0 14px color-mix(in srgb, var(--bf-lime) 30%, transparent);
}

@keyframes bf-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-track {
    animation: none;
  }
}


/* ---------------------------------------------------------
   슬라이드 화살표 이미지 (공통)
--------------------------------------------------------- */
.mainBanner .swiper-button-prev:after,
.mainBanner .swiper-button-next:after,
.sec01 .swiper-button-prev:after,
.sec01 .swiper-button-next:after,
.sec03 .swiper-button-prev:after,
.sec03 .swiper-button-next:after {
  width: 100%;
  height: 100%;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mainBanner .swiper-button-prev:after {
  background-image: url(//skin.makeshop.co.kr/skin/fragrance/pc/img/main-left.png);
}

.mainBanner .swiper-button-next:after {
  background-image: url(//skin.makeshop.co.kr/skin/fragrance/pc/img/main-right.png);
}

.sec01 .swiper-button-prev:after,
.sec03 .swiper-button-prev:after {
  background-image: url(//skin.makeshop.co.kr/skin/fragrance/pc/img/slide-left.png);
}

.sec01 .swiper-button-next:after,
.sec03 .swiper-button-next:after {
  background-image: url(//skin.makeshop.co.kr/skin/fragrance/pc/img/slide-right.png);
}


/* ---------------------------------------------------------
   메인 컨텐츠 공통
--------------------------------------------------------- */
.main-cont {
  width: 1400px;
  margin: 0 auto;
}

.main-cont > div {
  margin-bottom: 100px;
}

.sec_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin-bottom: 16px;
}

.sec_title h2 {
  font-size: 20px;
  font-weight: 500;
}

.sec_title a img {
  margin-left: 4px;
}

/* 구매 리뷰, Instagram 타이틀 */
.main-heading {
  text-align: center;
  font-size: 25px;
}


/* ---------------------------------------------------------
   sec01 - 가로 상품 슬라이드 (MD's PICK, 쿠션세트, 1+1)
--------------------------------------------------------- */
.sec01 .prdList ul li .imgWrap img {
  max-width: 220px;
}

.sec01 .swiper-button-prev,
.sec01 .swiper-button-next {
  top: 35%;
  width: 52px;
  height: 52px;
}

.sec01 .swiper-button-prev {
  left: 0;
}

.sec01 .swiper-button-next {
  right: 0;
}


/* ---------------------------------------------------------
   sec02 - 신상품
--------------------------------------------------------- */
.sec02 .prdList.basic ul {
  gap: 60px 16px;
}

.sec02 .prdList.basic ul li {
  width: 338px;
}


/* ---------------------------------------------------------
   sec03 - 이주의 베스트 (탭)
--------------------------------------------------------- */
.sec03 {
  position: relative;
  padding: 50px 0;
}

/* 화면 끝까지 꽉 차는 회색 배경 */
.sec03::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background: #f9f9f9;
  transform: translateX(-50%);
}

.sec03 .keywordTabBtn {
  margin-bottom: 20px;
}

.sec03 .keywordTabBtn ul li {
  display: block;
  width: auto;
  padding: 0 14px;
  border: 1px solid #ededed;
  border-radius: 40px;
  font-size: 13px;
  line-height: 28px;
  color: var(--txt);
  cursor: pointer;
}

.sec03 .keywordTabBtn ul li.swiper-slide-thumb-active {
  border-color: var(--point_color);
  background: var(--point_color);
  color: #fff;
  font-weight: 600;
}

.sec03 .swiper-button-prev,
.sec03 .swiper-button-next {
  top: 40%;
  width: 36px;
  height: 36px;
}

.sec03 .swiper-button-prev {
  left: 0;
}

.sec03 .swiper-button-next {
  right: 0;
}


/* ---------------------------------------------------------
   sec04 - 이주의 큐레이션
--------------------------------------------------------- */
.sec04 .inner_list {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* 3개 컬럼 폭 동일하게 */
.sec04 .inner_list > div {
  flex: 1 1 0;
  min-width: 0;
}

/* 큐레이션 배너 */
.sec04 .inner_list .chanceBan {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  isolation: isolate;
}

.sec04 .inner_list .chanceBan > img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 그라데이션 */
.sec04 .inner_list .chanceBan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}

.sec04 .inner_list .chanceBan .chanceTxt {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  color: #fff;
  pointer-events: none;
}

.sec04 .inner_list .chanceBan .chanceTxt strong,
.sec04 .inner_list .chanceBan .chanceTxt span {
  display: block;
  font-size: 22px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 큐레이션 상품 리스트 */
.sec04 .prdList ul li {
  position: relative;
  margin-top: 12px;
}

.sec04 .prdList ul li a {
  display: flex;
  align-items: flex-start;
}

.sec04 .prdList ul li a .imgWrap {
  flex: 0 0 92px;
  width: 92px;
  margin-right: 20px;
}

.sec04 .prdList ul li a .textWrap {
  min-width: 0;
}

.sec04 .prdList ul li .imgWrap img {
  border-radius: 10px;
}


/* ---------------------------------------------------------
   인스타그램
--------------------------------------------------------- */
.instaSection {
  width: 100%;
  margin: 80px 0;
}

.instaSection .main-heading {
  margin-bottom: 40px;
}

.instaInner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.lightwidget-widget {
  width: 100%;
  border: 0;
  overflow: hidden;
}
/* BASIC css end */