﻿.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;
}


    