@font-face {

  font-family: 'FuturaPress Press';

  font-style: normal;

  font-weight: normal;

  src: local('FuturaPress Press'), url('Junior.woff') format('woff');

  }



  @font-face {

  font-family: 'Pretendard-Regular';

  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');

  font-weight: 400;

  font-style: normal;

  }



  /* 기본 스타일 초기화 */

  * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }



  body {

    font-family: 'Pretendard-Regular', sans-serif;

      margin: 0;

      padding: 0;

      min-height: 100%;

      height: 100%;

      display: flex;

      flex-direction: column;

      overflow-x: hidden; /* 가로 스크롤 방지 */

  }



  /* 커스텀 커서 스타일 */

  .custom-cursor {

          position: absolute;

          width: 15px;

          height: 15px;

          background-color: #FFDB00; /* 노란색 배경 */

          border-radius: 50%; /* 완전한 원 */

          pointer-events: none; /* 커서가 클릭 이벤트를 막지 않도록 */

          transform: translate(-50%, -50%);

          z-index: 9999; /* 커서가 모든 요소 위로 보이도록 설정 */

          transition: transform 0.1s ease; /* 부드러운 움직임 */

      }

  

  /* 헤더 스타일 */

  header {

    background-color: #fff;

    padding: 8px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    justify-content: space-between; /* 양쪽 끝 정렬 */

}



nav {

    display: flex;

    justify-content: space-between; /* 양쪽 끝 정렬 */

    margin-bottom: 10px;

    font-size: 14px;

}



nav a {

    display: flex; /* 수평 정렬을 위해 flex 사용 */

    align-items: center; /* 수직 정렬 */

    padding: 10px 15px;

    color: #000;

    text-decoration: none;

    transition: background-color 0.3s;

    margin: 0; /* 간격 좁히기 */

    border-right: 1px solid transparent; /* 오른쪽 경계 추가 */

}



nav a:last-child {

    border-right: none; /* 마지막 링크의 오른쪽 경계 제거 */

}

nav a:hover {

    background-color: #FFC90D;

}

.header-content {

    display: flex; /* Flexbox 사용 */

    align-items: center; /* 수직 정렬 */

    margin-left: 10px; /* 왼쪽으로 10px 이동 */

}



.hero {

    height: 600px; /* 세로 비율 3배 늘림 */

    align-items: center;

    justify-content: center;

    position: relative;

    margin-bottom: 100px; /* 간격 확장 */

    z-index: 5;

}



.hero h1 {

    font-family: 'FuturaPress Press', sans-serif;

    font-size: 50px;

    margin: 0;

    text-align: center;

}



.description {

    text-align: left;

    font-size: 18px;

    margin: 60px auto;

    width: 80%;

    color: #000000;

    line-height: 1.8;

    margin-left: 50px; /* 왼쪽 여백 추가 */

}



.main-title {

    text-align: left;

    font-family: 'FuturaPress Press', sans-serif;

    font-size: 50px;

    margin: 100px 0; /* 간격 확장 */

    margin-left: 50px; /* 왼쪽 여백 추가 */

}

.categories-title {

    text-align: center;

    font-family: 'FuturaPress Press', sans-serif;

    font-size: 50px;

    margin: 200px 0; /* 간격 확장 */

}

.featured-title {

    text-align: left;

    font-family: 'FuturaPress Press', sans-serif;

    font-size: 50px;

    margin: 30px; /* 간격 확장 */

    margin-left:50px; /* 왼쪽 여백 추가 */

}



.category-box {

    width: 50%; /* 박스 너비 조정 가능 */

    height: 50px; /* 박스 높이 조정 가능 */

    background-color: #000; /* 검정색 박스 */

    margin: 20px auto; /* 중앙 정렬 */

}



.categories {

    text-align: center;

    font-size: 16px;

    font-family: 'FuturaPress Press', sans-serif;

    line-height: 2.2;

    margin-bottom: 30px; /* 간격 확장 */

}



.category-divider {

    width: 50%; /* 선 길이 조정 가능 */

    height: 3px; /* 선 두께 */

    background-color: #000; /* 검정색 */

    margin: 0 auto; /* 중앙 정렬 */

}



.product-section {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: 180px 0; /* 간격 확장 */

}



.image-row {

    display: flex;

    justify-content: center;

    margin-bottom: 100px; /* 간격 확장 */

}



.image-box {

    width: 380px;

    height: 250px;

    background-color: #ccc;

    margin: 20px;

}



footer {

    background-color: #f8f8f8;

    padding: 150px; /* 간격 확장 */

    text-align: center;

    font-family: 'Pretendard-Medium', sans-serif;

    margin-top: auto; /* 화면 하단에 고정 */

}



.footer-links {

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

    margin: 40px 0;

}



.footer-links div {

    margin: 10px 20px;

    font-size: 16px;

}



.footer-description {

    font-size: 14px;

    color: #666;

    margin-top: 20px;

}



/* Custom styles for the new section */

.product-navigation {

    display: flex;

    justify-content: space-between;

    width: 100%;

    font-size: 15px;

    color: #000;

    margin: 0; /* 간격 제거 */

    border: 1px solid #000; /* 검정 테두리 추가 */

}



.nav-box {

    flex: 1; /* 동일한 비율로 나눔 */

    margin: 0; /* 간격 제거 */

    background-color: #fff;

    text-align: center;

    padding: 20px;

    transition: background-color 0.3s, font-weight 0.3s; /* font-weight 변화 추가 */

    cursor: pointer; /* 마우스 커서 변경 */

    border: 0.5px solid #000; /* 각 칸에 네모 테두리 추가 */

    box-sizing: border-box; /* 패딩과 테두리를 포함하여 크기 계산 */

}



.nav-box:hover {

    background-color: #FFC90D; /* 마우스 오버 시 색상 변경 */

    font-weight: bold; /* 마우스 오버 시 글씨 볼드 처리 */

}



/* Additional Styles for the Table Section */

table {

    margin: 120px auto;

    border-collapse: collapse;

    width: 80%;

}



th, td {

    border: 1px solid #ccc;

    padding: 20px;

    text-align: center;

    vertical-align: middle;

}



img {

    max-width: 180vh;

    max-height: 100vh;

    display: block;

    margin: auto;

}



/* Custom Styles for Header Text */

nav a:first-child p {

    font-size: 10px; /* 글씨 크기 조정 */

    line-height: 1; /* 행간 조정 */

    margin-right: 10px; /* 오른쪽으로 10px 이동 */

}



nav a:first-child:hover {

    background-color: transparent; /* 노란 박스 효과 제거 */

}



/* 추가된 이미지 스타일 */

.header-image {

    width: 100px; /* 이미지 크기 조절 */

    margin-right: 20px; /* 이미지와 텍스트 간격 */

}





@keyframes walk {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }

    25% {

        transform: translate(-60%, -50%) rotate(-10deg); /* 왼쪽으로 이동하며 회전 */

    }

    50% {

        transform: translate(-50%, -50%) rotate(0deg); /* 중앙으로 이동하며 회전 복원 */

    }

    75% {

        transform: translate(-40%, -50%) rotate(10deg); /* 오른쪽으로 이동하며 회전 */

    }

    100% {

        transform: translate(-50%, -50%) rotate(0deg); /* 원래 위치로 복원 */

    }

}





.G-image {

    position: absolute; /* 절대 위치 설정 */

    top: 40%; /* 위치 조정 */

    left: 37%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 3; /* G 이미지를 가장 위로 */

}



.font-image {

    position: absolute; /* 절대 위치 설정 */

    top: 30%; /* 위치 조정 */

    left: 17%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 3; /* Font 이미지를 가장 위로 */

}



/* 추가된 Featured Products 이미지 스타일 */

.featured-image {

    display: block;

    margin: 0 auto;

    left: 20%; /* 위치 조정 */

    width: 80%; /* 이미지 너비 조정 */

    height: auto; /* 비율 유지 */

    margin: 230px;

}



.dog-image {

    position: absolute; /* 절대 위치 설정 */

    top: 330%; /* 위치 조정 */

    left: 23%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 3; /* 소파를 가장 위로 */

}



.light-image {

    position: absolute; /* 절대 위치 설정 */

    top: 306%; /* 위치 조정 */

    left: 88%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 4; /* 소파를 가장 위로 */

}



.dog_font-image {

    position: absolute; /* 절대 위치 설정 */

    top: 280%; /* 위치 조정 */

    left: 47%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 7; /* 소파를 가장 위로 */

}



.D-image {

    position: absolute; /* 절대 위치 설정 */

    top: 300%; /* 위치 조정 */

    left: 63%; /* 위치 조정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 4; /* 소파를 가장 위로 */

}



/* 테이블 셀에 마우스 오버 시 효과 추가 */

td:hover {

    background-color: #FFC90D; /* 마우스 오버 시 노란색으로 변경 */

    transition: background-color 0.3s; /* 색상 변경 시 애니메이션 효과 */

}



/* 추가된 bottom logo 스타일 */

.bottom-logo {

    position: absolute; /* 절대 위치 설정 */

    transform: translate(-50%, -50%); /* 중앙 정렬 */

    z-index: 4; /* 소파를 가장 위로 */

    top: 668%; /* 위치 조정 */

    left: 77%; /* 위치 조정 */

}





  /* 컨테이너 스타일 */

  .container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

  }



  /* 이미지 및 텍스트 레이아웃 */

  .layout {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    max-width: 1200px;

    margin: 0 auto;

  }



  /* 로고 스타일 */

  .logo1 img {

    position: absolute; /* 화면 스크롤과 관계없이 고정 */

    top: 1230px;

    left: 50%; /* 가로 중앙 */

    transform: translateX(-50%); /* 정확히 중앙 정렬 */

    width: 400px;

    height: auto;

  }





  .img1, .img2 {

  position: absolute;

  width: 100%; /* 기본적으로 이미지가 컨테이너에 맞게 조정됨 */

  max-width: 700px; /* 이미지 최대 크기 제한 */

  height: auto; /* 비율 유지 */

  transition: transform 0.3s ease; /* 부드러운 효과 추가 */

}



/* .img1 스타일 */

.img1 {

  top: 1400px;

  left: -16%;

  transform: rotate(18deg) scaleX(-1); /* 이미지 기울이기 및 뒤집기 */

}



/* .img2 스타일 */

.img2 {

  top: 1620px;

  right: -12%;

  max-width: 600px;

  transform: rotate(11deg); /* 이미지 기울이기 */

}



/* 반응형 처리 */

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

  .img1, .img2 {

      max-width: 30%; /* 작은 화면에서는 크기를 90%로 조정 */

  }

  .img1 {

      left: -8%; /* 위치 조정 */

  }

  .img2 {

      right: -5%; /* 위치 조정 */

  }

}



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

  .img1, .img2 {

      max-width: 30%; /* 더 작은 화면에서는 크기를 80%로 축소 */}

  .img1 {

      top: 1000px; /* 위치 조정 */

      left: 0; /* 화면 가운데 정렬 */

      transform: rotate(18deg) scaleX(-1); /* 이미지 기울이기 및 뒤집기 */

  }

  .img2 {

      top: 1200px; /* 위치 조정 */

      right: 0; /* 화면 가운데 정렬 */

      transform: rotate(11deg); /* 이미지 기울이기 */

  }

}





  .headline {

    font-family: 'Pretendard-Regular';

    font-size:34px;

    font-weight: 800;

    top: 1500px;

    left: 50%; /* 가로 중앙 */

    transform: translateX(-50%); /* 정확히 중앙 정렬 */

    margin: 20px 0;

    position: absolute;

    text-align: center;

  }



  .description {

    font-family: 'Pretendard-Regular';

    font-size: 17px;

    background-color: #fff;

    position: absolute; /* 화면 스크롤과 관계없이 고정 */

    top: 1600px;

    left: 50%; /* 가로 중앙 */

    transform: translateX(-50%); /* 정확히 중앙 정렬 */

    color: #000;

    text-align: center;

    line-height: 1.8;

    text-align: center;

  }



  .vertical-line {

    position: absolute; /* 화면 스크롤과 관계없이 고정 */

    top: 1050px;

    left: 50%; /* 가로 중앙 */

    transform: translateX(-50%); /* 정확히 중앙 정렬 */

    width: 1px;

    height: 100vh; /* 화면 전체 높이 */

    width: 2px; /* 라인의 두께 */

    height: 17%; /* 라인의 길이 (화면의 80% 높이) */

    background-color: #cbcbcb; /* 라인의 색상 */

  }







  

  /*!!!!!!!크리스마스 마켓!!!!!!!*/



  .marquee {

          background-color: #c00; /* 크리스마스 테마 빨간색 */

          color: white;

          font-size: 40px;

          font-weight: bold;

          white-space: nowrap;

          overflow: hidden;

          position: relative;

          height: 60px;

          display: flex;

          align-items: center;

      }



      .marquee-content {

          display: inline-block;

          animation: marquee 10s linear infinite;

      }



      @keyframes marquee {

          0% {

              transform: translateX(100%);

          }

          100% {

              transform: translateX(-100%);

          }

      }



      .xmas_container {

  display: grid;

  grid-template-columns: 60% 40%; /* 두 열이 항상 동일한 비율로 나뉘도록 설정 */

  grid-gap: 20px;

  align-items: stretch; /* 아이템 높이를 그리드 셀에 맞춤 */

  border: 1px solid #000000;

}



      .xmas_video-section {

          position: relative;

          overflow: hidden;

      }



      .xmas_video-section video {

  width: 100%;

  height: 100%;

  object-fit: cover; /* 비디오가 항상 셀을 꽉 채우도록 설정 */

}



      .xmas_text-section {

          padding: 50px;

          padding-bottom: 30px; /* 아래쪽 여백 줄임 */

      }



      .xmas_text-section h2 {

          font-size: 25px;

          margin: 0 0 20px;

          font-weight: normal;

          color: #919191;

      }



      .xmas_text-section h1 {

          font-size: 33px;

          margin: 0 0 20px;

          font-weight: bold;

          color: #000;

      }



      .xmas_text-section p {

          font-size: 16px;

          margin: 0 0px 20px;

          line-height: 1.6;

          color: #555;

      }



      .xmas_cta-button {

          margin-top: 20px;

          margin-bottom: 10px; /* 아래쪽 여백을 줄임 */

          display: inline-flex;

          align-items: center;

          color: #000;

          text-decoration: none;

          font-size: 18px;

          font-weight: bold;

          border: 1px solid #000;

          padding: 10px 20px;

          transition: background-color 0.3s, color 0.3s;

      }



      .xmas_cta-button:hover {

          background-color: #000;

          color: white;

      }



      .xmas_cta-button svg {

          margin-left: 10px;

          width: 16px;

          height: 16px;

          fill: currentColor;

      }







    

      /*!!!!!!!온라인 홈퍼니싱!!!!!!!*/



      .homefurnishings_container {

        display: grid;

        grid-template-columns: auto; /* 두 열이 항상 동일한 비율로 나뉘도록 설정 */

        grid-template-rows: 369.4px;

        align-items: stretch; /* 아이템 높이를 그리드 셀에 맞춤 */

    }



    .homefurnishings_img-section {

        position: relative;

        overflow: hidden;

    }



    .homefurnishings_img-section img {

        margin: 0;

        padding: 0;

        width: 100%;

        height: auto;

        object-fit: cover; /* 비디오가 항상 셀을 꽉 채우도록 설정 */

    }



    .homefurnishings_cta-button {

        margin-top: -2px;

        max-width: 100%; /* 화면을 벗어나지 않도록 버튼의 최대 폭 제한 */

        overflow: hidden; /* 초과 내용을 숨김 */

        display: flex; /* 플렉스 박스 사용 */

        justify-content: space-between; /* 텍스트와 버튼 사이 간격 유지 */

        align-items: center; /* 아이템 수직 정렬 */

        padding: 20px 35px; /* 내부 여백 조정 */

        background-color: #000000;

        color: white;

    }



    .homefurnishings_cta-button:hover {

        background-color: #0047cc;

        color: white;

    }



    .homefurnishings_cta-button svg {

        margin-left: auto; /* 자동으로 오른쪽 정렬 */

        margin-right: 10px; /* 오른쪽 여백 추가 */

        width: 30px; /* 적절한 크기로 조정 */

        height: 30px; /* 적절한 크기로 조정 */

        fill: currentColor;

        transform: rotate(90deg); /* 버튼이 벗어나지 않도록 기본 회전 제거 */

        transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease; /* 부드러운 효과 */

    }



    .homefurnishings_h2 {

        font-size: 25px;

        line-height: 1.2;

    }









    /*!!!!!!!!팝업!!!!!!!!*/



    .popup_container {

      position: relative;

      width: 100%;

      height: 800px;

      background-image: url('jsy_source/Popup1.jpg'); /* 배경 이미지 URL */

      background-size: cover;

      background-position: center;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

    }



    .popup_overlay {

      position: absolute;

      width: 65%;

      height: 130%;

      background-image: url('jsy_source/Popup2.jpg'); /* 타원형 이미지 URL */

      background-size: cover;

      background-position: center;

      border-radius: 50%;

      clip-path: ellipse(50% 30% at 50% 50%);

      z-index: 2;

      left: 30%;

      bottom: -18%;

    }



    .popup_text-container {

      position: absolute;

      top: 8%;

      left: 3%;

      color: white;

      z-index: 3;

    }



    .popup_text-container h1 {

      font-size: 34px;

      margin: 0;

    }



    .popup_text-container h2 {

      font-size: 22px;

      margin: 0;

    }



    .popup_text-container p {

      font-size: 16px;

      margin: 10px 0 0 0;

      font-weight: 400;

      line-height: 25px;

    }





    /*!!!!!!!!!인스타 이케아로꾸민우리집 파트!!!!!!!*/

      .insta_container {

        text-align: center;

        line-height: 50px;

      }



      .insta_container h1 {

        text-align: center;

        font-size: 30px;

        font-weight: 600;

      }



      .insta_container p {

        text-align: center;

        font-size: 17px;

        color: #666;

        line-height: 23px;

        

      }



      .insta_grid1 {

        display: grid;

        grid-template-columns: repeat(3, 1fr); /* 한 행에 3개의 이미지 */

        grid-template-rows: auto; /* 행 높이 자동 조절 */

        gap: 20px; /* 이미지 간 간격 설정 */

        margin: 0 auto; /* 가운데 정렬 */

        max-width: 1200px; /* 최대 너비 설정 */

      }

      

      .insta_grid1 img {

        width: 100%; /* 이미지 너비를 그리드 셀에 맞춤 */

        height: 100%; /* 이미지 높이 자동 조절 */

        object-fit: cover; /* 이미지 비율 유지 및 채우기 */

        border: 2px solid #fff; /* 선택적: 이미지 테두리 추가 */

      }







    /*........푸터........*/



    footer {

      padding: 40px;  

      display: flex;

      flex-wrap: wrap;

      flex-direction: column;

      border-top: 1px solid #d0c6b8; /* 상단 선 추가 */

      background-color:  #FFF8DA;

  }

  .footer-section {

      flex: 1;

      min-width: 200px;

      margin: 10px;

      padding: 10px;

      border-right: 1px solid #d0c6b8; /* 각 섹션 구분선 */

      text-align: left; /* 좌측 정렬 설정 */

  }

  .footer-section:last-child {

      border-right: none; /* 마지막 섹션의 선 제거 */

  }

  .footer-row {

      display: flex;

      flex: 1;

      justify-content: space-between;

      margin: 30px 0;

  }

  .footer-row2 {

      display: flex;

      flex: 1;

      justify-content: space-between;

      margin: 30px 0;

      align-items: center;

  }

  .social-section {

      flex: 1;

      text-align: center;

      position: relative;

      padding: 20px 0; /* 위아래 간격 늘림 */

      

  }

  .social-section:not(:last-child) {

      border-right: 1px solid #d0c6b8; /* 소셜 링크 구분선 */

  }

  .social-section:last-child {

      border-bottom: 1px solid #d0c6b8; /* 소셜 링크 하단 선 */

  }

  .footer-bottom-container {

display: flex; /* Flexbox로 정렬 */

justify-content: space-between; /* 양쪽 끝으로 정렬 */

align-items: stretch; /* 자식 요소의 높이를 맞춤 */

margin-top: 0px; /* 상단 여백 조정 */

padding: 10px 50px; /* 좌우 여백 추가 */

background-color:  #FFF8DA;

}



.footer-bottom, .footer-bottom2 {

flex: 1; /* 동일한 비율로 공간 차지 */

text-align: left; /* 왼쪽 정렬 */

font-size: 10px; /* 글씨 크기 변경 */

line-height: 1; /* 행간 늘리기 */

color: rgb(114, 114, 114);

margin-bottom: 80px;

background-color:  #FFF8DA;

}

.footer-bottom2 {

border-left: 1px solid #d0c6b8; /* 왼쪽 선 추가 */

padding-left: 50px; /* 왼쪽 여백 추가 */

background-color:  #FFF8DA;

}



.footer-bottom2 {

margin-left: 750px; /* 두 섹션 사이의 간격 조정 */

}

  footer p, .footer-section a {

      font-size: 10px; /* 글씨 크기 변경 */

      line-height: 3; /* 행간 늘리기 */

      margin: 5px 0; /* 간격 조정 */

  }

  footer h3 {

      font-size: 14px; /* 글씨 크기 변경 */

      font-weight: bold; /* 글씨 굵기 변경 */

  }

  

  .button {

    display: inline-block;

    padding: 10px 15px;

    margin: 5px 0;

    background-color: #000000; /* 버튼 배경색 */

    color: #ffffff; /* 글씨 색상 */

    text-decoration: none; /* 밑줄 제거 */

}

.button:hover {

    background-color: #696969; /* 호버 시 색상 변화 */

}

    







/* 그리드 컨테이너 */

.main_grid-container {

    display: grid;

    grid-template-columns: 1fr 2fr 1fr; /* 3개의 컬럼 비율 */

    max-width: 100vw; /* 최대 너비 */

    width: 1800px;

    height: 500px;

  }



  /* 왼쪽, 오른쪽 칼럼 스타일 */

  .main_grid-item1 img {

    width: 150%;

    height: auto;

    object-fit: cover;

    transform: rotate(-10deg) scaleX(-1) translateY(-80px) translateX(100px); /* 좌우 반전 및 아래로 이동 */



  }



  .main_grid-item2 img {

    width: 150%;

    height: auto;

    object-fit: cover;

    transform: rotate(10deg) translateY(200px) translateX(0px); /* 기울기 및 위로 이동 */

  }



  /* 가운데 칼럼 스타일 */

  .main_content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;

  }



  .main_content h1 {

    font-size: 32px;

    margin-bottom: 20px;

    font-weight: bold;

  }



  .main_content p {

    font-size: 16px;

    line-height: 1.8;

    color: #333;

    margin-bottom: 10px;

  }



  .main_logo img {

    width: 150px;

    margin-bottom: 20px;

  }



  .full-screen-image {

    width: 100vw; /* 뷰포트 너비 100% */

    height: 100vh; /* 뷰포트 높이 100% */

    background-image: url('jsy_source/main.png'); /* 이미지 경로 설정 */

    background-size: cover; /* 이미지 비율 유지하며 꽉 채움 */

    background-position: center; /* 이미지 중앙 정렬 */

    background-repeat: no-repeat; /* 이미지 반복 금지 */

  }







  /* 타이틀 스타일 */

.color_title {

    font-size: 24px;

    margin-bottom: 30px; /* 타이틀과 그리드 사이 간격 */

    color: #000;

    text-align: center; /* 중앙 정렬 */

    align-items: center;

    line-height: 20px;

  }

  

  /* 그리드 컨테이너 */

  .color_grid-container {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4열 구성 */

    gap: 20px; /* 카드 사이 간격 */

    width: 94vw; /* 전체 너비 */

    align-items: center;

    margin: 50px;

  }

  

  /* 그리드 아이템 */

  .color_grid-item {

    position: relative;

    border: 1px solid #000; /* 테두리 */

    overflow: hidden;

    align-items: center;

  }

  

  /* 이미지 스타일 */

  .color_grid-item img {

    width: 100%;

    height: auto;

    display: block;

  }

  

  /* 라벨 스타일 */

  .color_grid-item .label {

    position: absolute;

    bottom: 20px; /* 이미지 하단에서 20px 띄움 */

    left: 10%; /* 중앙 정렬을 위해 좌측 여백 */

    width: 80%;

    background-color: #fff;

    text-align: center;

    padding: 10px 0;

    font-weight: bold;

    font-size: 16px;

    border: 1px solid #000; /* 라벨 테두리 */

  }