.cs-grid {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4개 고정 */
    gap: 40px 20px;  /* 가로 20px, 세로 40px */
    text-align: center;
}

/* 카드 */
.cs-item {
    background: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 8px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* 카드 높이 동일하게 맞추는 핵심 */
    height: 100%;
}

/* 이미지 통일 */
.cs-item img {
    width: 120px;
    height: auto;
    margin-bottom: 10px;
}

/* 타이틀 */
.cs-title {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
    margin-top: 8px;
    color: #5873fe;
}

.cs-title span {
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
}

.down_cs {
  background-color: #ffffff;
  padding: 20px;
  padding-bottom: 40px;
}


/*설치가이드*/

/* 바깥 래퍼 – 가운데 정렬 */
.support-maeu-wrap {
  width: 100%;
  margin-top: 20px;
}

/* 실제 탭 영역 */
.support-maeu {
  max-width: 1200px;
  margin: 0 auto;                 /* 가운데 정렬 */
  display: flex;
  justify-content: center;
  gap: 80px;
  border-bottom: 1px solid #e5e5e5; /* 1200px까지만 회색선 */
}

/* 기본 탭 */
.support-maeu a {
  position: relative;
  padding: 14px 0 18px;
  font-size: 16px;
  color: #888;
  text-decoration: none;
  font-weight: 500;
}

/* 활성 탭 */
.support-maeu a.active {
  color: #000;
  font-weight: 600;
}

/* 회색선 위에 겹치는 파란 막대 */
.support-maeu a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background-color: #fabc00;
  z-index: 2;
}





/*응급조치 메뉴바*/

/*배너 밑 메뉴바*/
.serve-tab-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -30px; /* 이걸로 위로 끌어올림 */
    position: relative;
    z-index: 10; /* 배너 위로 올라오도록 */
}

    .serve-tab-menu ul {
        display: flex;
        width: 100%;
        max-width: 1200px; /* 필요하면 조절 */
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .serve-tab-menu li {
        flex: 1;
        padding: 0;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        color: #000;
        background: #ffffff;
        border-right: 0.5px solid #e0e0e0;
        cursor: pointer;
    }

    .serve-tab-menu li a {
        text-decoration: none; color: inherit;
        display: block;
        padding: 16px 0;
    }

    
/* 선택된 탭 */
.serve-tab-menu li.active {
    color: #5873fe;
    font-weight: 600;
}




/* 바깥 래퍼 – 가운데 정렬 */
.support-maeu-wrap_02 {
  width: 100%;
  margin-top: 20px;
}

/* 실제 탭 영역 */
.support-maeu_02 {
  max-width: 1200px;
  margin: 0 auto;                 /* 가운데 정렬 */
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 20px;
}

/* 기본 탭 */
.support-maeu_02 a {
  position: relative;
  padding: 14px 0 18px;
  font-size: 16px;
  color: #888;
  text-decoration: none;
  font-weight: 500;
}

/* 활성 탭 */
.support-maeu_02 a.active {
  color: #000;
  font-weight: 600;
}


.cate-btn.down_support {
  padding: 12px 80px;
  color: #fff;
  background-color: #5873fe;
  font-size: 16px;
}


.cate-btn.down_support:hover {
  background: #485fcf
}


.cate-btn.down_support_02 {
  padding: 12px 80px;
  border: 1px solid rgb(153, 153, 153);
  color: #2e2e2e;
  background-color: #f8f8f8;
  font-size: 16px;
}


.cate-btn.down_support_02:hover {
  border: 1px solid #5873fe;
  background: #5873fe;
  color: #ffffff;
}


    

/******************************************************
'* 반응형 (태블릿 / 모바일) - 고객지원 페이지
'******************************************************/

/* 카드 안 버튼을 항상 맨 아래에 정렬 */
.cs-item .cate-btn {
    margin-top: auto;
}

/* 태블릿 (1240px 이하) */
@media (max-width: 1240px) {
    .cs-grid {
        gap: 24px 16px;
        padding: 0 20px;
    }

    .cate-btn.down_support,
    .cate-btn.down_support_02 {
        padding: 12px 40px;
    }

    .support-maeu,
    .support-maeu_02 {
        gap: 40px;
        padding: 0 20px;
    }

    /* 제목 한 줄 고정(nowrap) 해제 */
    .product-text[style*="nowrap"] {
        flex-wrap: wrap !important;
    }

    .product-text .title[style*="nowrap"] {
        white-space: normal !important;
        word-break: keep-all;
    }
}

/* 태블릿 세로 (1024px 이하) */
@media (max-width: 1024px) {
    .cs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cs-title {
        font-size: 20px;
        word-break: keep-all;
    }

    .cs-title span {
        font-size: 15px;
    }

    /* 서브 메뉴 : 여러 줄로 감싸기 */
    .support-maeu,
    .support-maeu_02 {
        flex-wrap: wrap;
        gap: 0 28px;
    }

    /* 다운로드 페이지 소제목이 카드에 가려지지 않도록 (인라인 margin-bottom:-150px 완화) */
    .product-box[style*="-150px"] {
        margin-bottom: -110px !important;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    /* 다운로드 카드 : 2열 */
    .cs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 24px auto 40px;
        padding: 0 16px;
    }

    .cs-item {
        padding: 16px 10px;
    }

    .cs-title {
        font-size: 16px;
        line-height: 1.35;
        margin: 4px 0 12px !important;
    }

    .cs-title span {
        font-size: 13px;
    }

    .cate-btn.down_support,
    .cate-btn.down_support_02 {
        display: block;
        width: 100%;
        flex: none;
        padding: 10px 0;
        font-size: 15px;
    }

    .down_cs {
        padding: 10px 16px 30px;
    }

    /* 다운로드 페이지 소제목 아래 겹침 방지 (인라인 margin-bottom:-150px 완화) */
    .product-box[style*="-150px"] {
        margin-bottom: -50px !important;
    }

    .down_cs .product-box[style*="-150px"] {
        margin-top: -10px !important;
    }

    /* 서브 메뉴 */
    .support-maeu-wrap {
        margin-top: 24px;
    }

    .support-maeu,
    .support-maeu_02 {
        justify-content: flex-start;
        gap: 0 18px;
        padding: 0 16px;
    }

    .support-maeu a,
    .support-maeu_02 a {
        font-size: 14px;
        padding: 10px 0 12px;
    }

    .support-maeu_02 {
        margin-top: 8px;
    }

    /* 페이지 제목 : "응급조치" 아래 줄에 세부 제목 */
    .product-text .title[style*="nowrap"] span {
        display: block;
        margin-top: 6px;
        font-size: 18px;
    }

    /* 안내 이미지 영역 여백 줄이기 */
    .product-box + div[style*="text-align"] {
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }

    .product-box + div[style*="text-align"] img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}