/* 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: fff;
}

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

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

/* 브랜드 박스 스타일 */
.brand-box {
  width: 80px; /* 가로 크기 */
  height: 130px; /* 세로 크기 */
  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: 10px 0 0; /* 위쪽 패딩 제거 또는 줄임 */
    text-align: center;
    flex-grow: 0; /* 텍스트 영역이 늘어나지 않도록 */
}

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

/* 설명 텍스트 스타일 */
.brand-text p {
  font-size: 0.5rem;
  color: #666;
  margin: -8px 0;  /* 위, 아래 마진을 줄여서 간격을 줄임 */
  line-height: 1; /* 줄 간격을 더 좁힘 */
}

/* 모바일 화면 크기에 맞춰 간격 및 크기 조정 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);  /* 모바일에서는 한 줄에 2개씩 표시 */
    gap: 2px;  /* 간격을 조금 더 넓힘 */
  }

  .brand-box {
    width: 70px;  /* 모바일에서는 박스의 가로 크기 줄임 */
    height: 120px;  /* 세로 크기 줄임 */
  }

  .brand-text h2 {
    font-size: 0.6rem;  /* 제목 글자 크기 줄임 */
    margin: 8px 0;  /* 간격 좁히기 */
  }

  .brand-text p {
    font-size: 0.45rem;  /* 설명 텍스트 크기 줄임 */
  }
}

/* BASIC css end */