@charset "utf-8";
/* ===== ccon5 : PARTNER BRANDS 입점브랜드 (공통 재사용 섹션) =====
   PSD 03_제품 y4448~5198 · 라운드탑 r80 · bg=ccon5_bg(크림 #f8f4eb + 하단 동물 라인아트).
   게시판 partner_brands 연동. 2행 반대방향 CSS 마퀴(animate.css marqueeX/marqueeX_r keyframes).
   원본 set + 복제 set(absol left/right:100%) 로 seamless. PHP가 개수비례 repeat + duration →
   로고 1개든 500개든 동일 속도·끊김 없음. 로고 = 게시판 첨부 원본 직접(썸네일 X, 여백/업스케일 회피). */

.ccon5 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--px) * 80) calc(var(--px) * 80) 0 0;
  background: #f8f4eb;
}

.ccon5_iner {
  padding-top: 6.5vw;
  padding-bottom: 9.8vw;
}

/* 헤드 : eyebrow / 타이틀 / 설명 (중앙 스택) */
.ccon5_eyb {
  color: #8a8a8a;
  font-size: calc(var(--px) * 17);
  letter-spacing: 0.01vw;
  line-height: 1;
}

.ccon5_tit {
  margin-top: 1.6vw;
  color: #141414;
  font-size: calc(var(--px) * 40);
  letter-spacing: -0.11vw;
  line-height: 1;
}

.ccon5_desc {
  margin-top: 1.3vw;
  color: #141414;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
  line-height: 1.5;
  text-align: center;
  font-weight: 500;
}

/* ===== 마퀴 2행 ===== */
/* 행 = 넘침 잘라내는 뷰포트 */
.ccon5_row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.ccon5_row1 {
  margin-top: 2.9vw;
}

.ccon5_row2 {
  margin-top: 0.6vw;
}

/* 트랙 = 원본 set(흐름) + 복제 set(absol) 담는 relative. 폭=set폭(복제는 absol). duration 은 인라인(개수비례) */
.ccon5_track {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 40s linear infinite;
}

.ccon5_track_r {
  animation-name: marqueeX_r;
}

/* set = 로고 알약 한 벌(반복 포함) */
.ccon5_set {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 복제 set — 정방향은 오른쪽(left:100%) / 역방향은 왼쪽(right:100%) 에 이어붙여 seamless */
.ccon5_set_dup {
  position: absolute;
  top: 0;
  left: 100%;
}

.ccon5_set_dup_r {
  position: absolute;
  top: 0;
  right: 100%;
}

/* 흰 알약 박스 (로고 담는 sitem) — 알약 226×118 + 우측 갭 16(=피치 242) */
.ccon5_sitem {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 226);
  height: calc(var(--px) * 118);
  margin-right: calc(var(--px) * 16);
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 999);
  background: #fff;
  overflow: hidden;
  aspect-ratio: unset;
}

/* 로고 = 자연비율 그대로(레터박스 여백 없음). 알약보다 크면 90%W/78%H 안으로만 축소 */
.ccon5_sitem img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 78%;
}

/* 로고 없을 때 준비중 텍스트 */
.ccon5_ready {
  color: #b8b8b8;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
}

/* ===== 모바일 (≤599) =====
   PC 사이징은 전부 calc(--px*N) → 모바일(--px≈0.205)서 microscopic 붕괴
   (eyb 3.5·tit 8.2·desc 3.7px, 알약 46×24px). vw 로 재정의.
   ccon5.css 는 섹션 include 안에서만 로드 → 이 블록은 ccon5 에만 적용(크로스페이지 무영향). */
@media screen and (max-width: 599px) {
  .ccon5 {
    border-radius: 6vw 6vw 0 0;
  }

  .ccon5_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .ccon5_eyb {
    font-size: 3.4vw;
    letter-spacing: 0.2vw;
  }

  .ccon5_tit {
    margin-top: 6vw;
    font-size: 7vw;
    letter-spacing: -0.2vw;
  }

  .ccon5_desc {
    margin-top: 3vw;
    max-width: 64vw;
    font-size: 3.6vw;
    line-height: 1.55;
  }

  .ccon5_row1 {
    margin-top: 6vw;
  }

  .ccon5_row2 {
    margin-top: 3vw;
  }

  /* 알약 = PC 226×118(≈1.9:1) 비율 유지하며 vw 확대 (모바일 ~2.5개 노출) */
  .ccon5_sitem {
    width: 38vw;
    height: 20vw;
    margin-right: 3vw;
  }

  .ccon5_ready {
    font-size: 3.6vw;
  }

  .ccon5_sitem img {
    max-width: 70%;
    max-height: 78%;
  }
}