.header_img { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%), url(./img/head.png) no-repeat center center / cover; }

/* product */
.product-wrap { display: flex; flex-direction: column; gap: 100px; }
.product-title {font-size: 44px;font-weight: 800;color: var(--black);margin: 0 0 20px;letter-spacing: -0.02em;line-height: 1.3;}
.product-desc.card {border: 1px solid var(--line-color);background: #fff;border-radius: 12px;padding: 40px;line-height: 1.7;color: var(--grey-5);font-size: 15px;box-shadow: 0 1px 2px rgba(0,0,0,0.04);}
.product-desc.card .card-title {font-size: 28px;font-weight: 700;color: var(--black);margin: 0 0 12px;letter-spacing: -0.01em;}
.product-desc.card .card-title::before {content: "|";color: var(--main-color);padding-right: 10px;}
.product-desc.card p {margin: 0;line-height: 1.75;font-size: 20px;}

.unit-wrap { margin-top: 30px; }
.unit-title {font-size: 36px;font-weight: 700;color: var(--black);margin: 60px 0 30px;}
.unit-title::before {content: "|";color: var(--main-color);padding-right: 10px;}
.unit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.unit-grid.type { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.unit-item {background: #fff;border: 1px solid #E6ECF5;border-radius: 16px;padding: 60px 24px 120px;min-height: 180px;position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 14px;text-align: center;transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;}
.unit-item .unit-head {font-weight: 700;color: var(--main-color);font-size: 31px;}
.unit-item .unit-icon { position: relative; width: 180px; height: auto; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.unit-item .unit-icon .layer { position: static; width: auto; height: auto; max-width: 100%; object-fit: contain; }
.unit-item .unit-icon .layer.bottom { opacity: 1; }
.unit-grid.type .unit-type-icon {border-radius: 8px;display: flex;align-items: center;justify-content: center;overflow: hidden; width: 100%;}
.unit-grid.type .unit-type-icon img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
.unit-grid.type .unit-item {background: #fff;min-height: 220px;padding: 20px 0;border: 0;box-shadow: none;}
.unit-grid.type .unit-head {margin-top: 12px;display: inline-block;padding: 12px 24px;background: var(--main-color);color: #fff;border-radius: 999px;font-size: 18px;font-weight: 800;letter-spacing: -0.02em;}

/* Colorbox icon size (desktop) */
/* .product-section#colorbox .unit-grid.type .unit-type-icon { width: 200px; height: 150px; background: transparent; } */
.badge {position: absolute;left: 50%;bottom: 20%;transform: translateX(-50%);padding: 12px 24px;background: var(--grey-5);color: #fff;border-radius: 999px;font-size: 18px;font-weight: 700;line-height: 1;}

/* Row-specific box styles (desktop) */
@media (min-width: 1025px) {
  .unit-grid > li:nth-child(-n+3) {
    background: #FAFBFC;
    border-color: #E6ECF5;
  }
  .unit-grid > li:nth-child(n+4) {
    background: #fff;
    border-color: rgba(0, 54, 122, 0.35);
  }
}

.image-wrap {margin-top: 60PX;}
.image-title {font-size: 36px;font-weight: 700;color: var(--black);margin: 0 0 8px;letter-spacing: -0.01em;}
.image-title::before {content: "|";color: var(--main-color);padding-right: 10px;}
.image-subtitle {font-size: 20px;font-weight: 400;color: var(--grey-4);margin: 0 0 16px;}
.image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.img-card { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin: 0; }
/* .img-card .img-label { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-block; padding: 4px 10px; background: rgba(0, 54, 122, 0.85); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; } */
.img-card img {display: block;width: 100%;max-height: 520px;height: auto;background: #fff;object-fit: cover;cursor: pointer;}

/* responsive */
@media (max-width: 1024px) {
  .sub_container { margin-bottom: 80px; }
  .sub-top-text {font-size: 36px;margin-bottom: 40px;}
  .product-wrap { gap: 60px; }
  .product-title {font-size: 24px;margin-bottom: 16px;}
  .product-desc.card {padding: 40px 30px;border-radius: 10px;font-size: 14px;}
  .product-desc.card .card-title {font-size: 20px;margin-bottom: 10px;}
  .product-desc.card .card-title::before {padding-right: 5px;}
  .unit-wrap { margin-top: 24px; }
  .unit-title {font-size: 20px;margin-bottom: 12px;}
  .unit-title::before {padding-right: 5px;}
  .unit-grid {grid-template-columns: repeat(1, minmax(0, 1fr));gap: 20px;}
  .unit-grid.type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-item {min-height: 180px;padding: 50px 50px 80px;border-radius: 12px;gap: 12px; background-color: #f9f9f9;aspect-ratio: auto;}
  .unit-item .unit-head {}
  .unit-item .unit-icon { width: 160px; height: 80px; }
  .badge {left: 50%;right: auto;bottom: 10%;transform: translateX(-50%);padding: 12px 24px;background: var(--grey-5);}.image-wrap { margin-top: 24px; }
  .image-title {font-size: 20px;margin-bottom: 6px;}
  .image-title::before {padding-right: 5px;}
  .image-subtitle {font-size: 16px;margin-bottom: 12px;}
  .image-grid { grid-template-columns: 1fr; gap: 12px; }
  .img-card { border-radius: 10px; }
  .product-desc.card p{font-size: 16px;}
}

/* responsive */
@media (max-width: 500px) {
  .unit-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; }
  .unit-grid.type { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
}