/* BASIC css start */
/* 이미지 스타일 */
.brand-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}


/* 기본 스타일 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* contentWrapper 스타일 */
#contentWrapper {
  width: 100%;  /* contentWrapper가 화면의 100%를 차지 */
  max-width: 1200px;  /* 최대 너비 설정 (예: 1200px로 설정) */
  margin: 20px auto 0;  /* 페이지 중앙에 배치 */
  padding: 20px;  /* 상하 좌우 여백 */
}

/* 페이지 컨테이너 */
.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 한 줄에 6개의 브랜드 박스 */
  gap: 20px;  /* 브랜드 박스 사이에 간격 */
  width: 100%;
  justify-items: center;
}

/* 브랜드 박스 스타일 */
.brand-box {
  width: 140px; /* 가로 크기 */
  height: 220px; /* 세로 크기 */
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  display: flex;
    flex-direction: column;
    justify-content: space-between; /* 또는 space-around */
    padding: 10px;
}

.brand-image {
    width: 100%;
    height: auto; /* 높이를 auto로 설정하여 이미지 비율 유지 */
    object-fit: contain;
    object-position: top center; /* 이미지를 위쪽 중앙에 배치 */
    margin-bottom: auto; /* 아래쪽 마진을 auto로 설정하여 텍스트를 아래로 밀기 */
    border-radius: 5px;
}

.brand-text {
    padding: 15px 0 0; /* 위쪽 패딩 제거 또는 줄임 */
    text-align: center;
    flex-grow: 0; /* 텍스트 영역이 늘어나지 않도록 */
}

/* h2 (브랜드 이름) 위에 선 추가 */
.brand-text h2 {
  font-size: 0.9rem;
  color: #333;
  margin: 8px 0;
  padding-top: 10px;
  border-top: 1px solid #000;
}

/* 설명 텍스트 스타일 */
.brand-text p {
  font-size: 0.8rem;
  color: #666;
}

/* BASIC css end */