.hk-product {
    position: relative;
    padding: 150px 0 100px;
    overflow: hidden;
    background: #fff;
}

.hk-product__image {
    margin-top: 80px;
    overflow: hidden;
}

.hk-product__image img {
    width: 100%;
    object-fit: cover;
}



.hk-product-content,
.hk-product-content *{box-sizing:border-box}
.hk-product-content{width:100%;max-width:1400px;margin:0 auto;padding:100px 0;color:#333;background:#fff}
.hk-product-content a{color:inherit;text-decoration:none}

/* 3개 탭 메뉴 */
.hk-product-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:10px;margin:0 0 40px; transition: all 0.3 ease-in;}
.hk-product-tabs button{height:60px;border-radius:5px;background:#333;color:#fff;font-size:18px;font-weight:600;border:0;cursor:pointer;transition:all 0.3s ease;}
.hk-product-tabs button:hover{background:#222;border-color:#333}
.hk-product-tabs button.is-active{background:#c01521;color:#fff;}
.hk-product-tabs button.is-active:hover{background:#a30013;color:#fff}





@media (max-width:1080px){
    .hk-product-grid {
        padding: 20px;
    }
    
    .hk-product-content {padding:60px 0;}
    .hk-product-tabs {gap:5px; margin: 0 0 20px;}
    .hk-product-tabs button {height: auto; font-size:14px; padding: 10px 0;}
}

@media (max-width: 1024px) {
    .hk-product {
        padding: 100px 0 80px;
    }
}

@media (max-width:760px){
  
  .hk-product {
        padding: 60px 0 40px;
    }
  
  .hk-product-grid {
        padding: 0px;
    }
}

@media (max-width:420px){
  .hk-product-tabs{grid-template-columns:repeat(3,1fr);gap:4px}
}








.hk-product-content__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 40px
}
.hk-product-content__count {
  font-size: 16px;
  color: #333
}
.hk-product-content__search {
  display: flex;
  align-items: center;
  width: 336px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px;
}
.hk-product-content__search input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #333
}
.hk-product-content__search input::placeholder {
  color: #aaa
}
.hk-product-content__search button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #888;
  line-height: 1
}
/* 탭 패널 (타워형 / 슬림형 / 박스타입) */
.hk-product-panel {
  display: none
}
.hk-product-panel.is-active {
  display: block
}
/* 4열 x 5줄 = 20개 그리드 */
.hk-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px 20px
}
.hk-product-card {
  min-width: 0
}
.hk-product-card__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #e0e5ee;
  transition: all 0.3s ease;
}
.hk-product-card__image:hover {
  border: 1px solid #333;
  transition: all 0.3s ease;
}

.hk-product-card__image:hover img {
    transform: scale(1.03);
    /*filter: brightness(0.78);*/
    transition: all 0.3s ease;
}

.hk-product-card__image:hover .hk-product-card__badge {
    background: #c01521;
    color: #fff;
    /*transform: translateY(-2px);*/
    transition: all 0.3s ease;
}


.hk-product-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.hk-product-card__badge {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 4px 9px;
  border: 0;
  border-radius: 5px;
  background: #333;
  font-size: 12px;
  color: #fff;
  pointer-events: none
}
.hk-product-card__title {
  margin: 12px 4px 8px;
  font-size: 18px;
  font-weight: 900;
  color: #222;
  letter-spacing: -.02em
}
.hk-product-card__spec {
  width: 100%;
  border-top: 1px solid #333;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px
}
.hk-product-card__spec th, .hk-product-card__spec td {
  padding: 5px 0;
  border-bottom: 1px solid #e0e5ee;
  text-align: left;
  vertical-align: top;
  line-height: 1.4
}
.hk-product-card__spec th {
  width: 25%;
  font-weight: 500;
  padding-left: 4px;
}
.hk-product-card__spec td {
  color: #555;
  word-break: break-word
}
/* 페이지네이션 */
.hk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 46px;
  font-size: 12px;
  color: #999;
}
.hk-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 20px;
}
.hk-pagination a.is-active {
  color: #111;
  font-weight: 700;
  border-bottom: 1px solid #111;
}
.hk-pagination__arrow {
  font-size: 15px;
  color: #666;
}


@media (max-width:1080px) {
  .hk-product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 20px;
  }
  .hk-product-content {padding:60px 0;}
  .hk-product-tabs {gap:5px; margin: 0 0 20px;}
  .hk-product-tabs button {height: auto; font-size:14px; padding: 10px 0;}
}

@media (max-width: 1024px) {
    .hk-product {
        padding: 100px 0 80px;
    }
}

@media (max-width:760px) {
  
  .hk-product {
      padding: 60px 0 40px;
  }
  .hk-product-tabs button {
      height: 44px;
      font-size: 13px;
  }
  .hk-product-content__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
  }
  .hk-product-content__search {
      width: 100%;
  }
  .hk-product-grid {
      /*grid-template-columns: 1fr;*/
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 0px;
  }
  .hk-product-card__title {
      font-size: 16px
  }
  .hk-product-card__spec {
      font-size: 12px;
  }
}


@media (max-width:420px) {
  .hk-product-tabs{
      grid-template-columns:repeat(3,1fr);
      gap:4px;
  }
  
  /*.hk-product-grid {
      /*grid-template-columns: 1fr;*/
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 0px;
  }*/
  
  .hk-product-card__spec th {display:none;}
}