/* 공통 */

.s2-page-megazone-solution .jb-background { padding: 100px 0px 100px 0px }
.s2-page-megazone-solution .jb-background-02 { padding: 200px 0px 100px 0px }


.s2-page-megazone-solution h1 { margin: 0px 0px 20px 0px; text-align: center; font-size: 35px; font-weight: 600; color: #1671FE; }
.s2-page-megazone-solution h2 {margin: 0px 0px 20px 0px; text-align: center; font-size: 45px; font-weight: 700; line-height: 1.7; }
.s2-page-megazone-solution h3 { margin: 0px 0px 20px 0px; text-align: center; font-size: 35px; font-weight: 600; }
.s2-page-megazone-solution h4 { margin: 0px 0px 80px 0px; text-align: left; font-size: 42px; font-weight: 600; }
.s2-page-megazone-solution h5 { margin: 0px 0px 20px 0px; text-align: center; font-size: 28px; font-weight: 600; }
.s2-page-megazone-solution h6 { margin: 0px 0px 20px 0px; text-align: left; font-size: 38px; font-weight: 600; }



.s2-page-megazone-solution .s2-paragraph-04 { text-align: right; font-size: 14px; line-height: 1.8; font-weight: 100; margin-top: 20px; }
.s2-page-megazone-solution .s2-paragraph-05 { text-align: left; font-size: 18px; line-height: 1.8; font-weight: 300; margin: 0px 0px 50px 0px; }
.s2-page-megazone-solution .s2-paragraph-06 { text-align: center; font-size: 26px; line-height: 1.8; font-weight: 300; margin: 40px 0px 40px 0px; color: #ffffff;}





.s2-ul  { margin-top: 35px; }
.s2-ul li { position: relative; list-style: none; font-size: 15px; font-weight: 300; }
.s2-ul li::after { content: ''; position: absolute; left: -15px; top: 10px; width: 4.5px; height: 4.5px; background-color: #000000; border-radius: 50%; }







.s2-home-01-background-solution-02 { padding-top: 1px; background-image: url( "/wp-content/uploads/solution-megazon-img-01.jpg" ); background-size: cover; background-repeat: no-repeat; background-position: center; }







/* 바깥 3:2 그룹 */
.s2-page-megazone-solution .s2-grid-box-group {
  margin-top: 60px;
  display: flex;

  align-items: flex-start;
}

/* 왼쪽/오른쪽 그룹 비율 */
.s2-page-megazone-solution .s2-grid-box-group .s2-grid-group:first-child {
  flex: 3;
}

.s2-page-megazone-solution .s2-grid-box-group .s2-grid-group:last-child {
  flex: 2;

margin-left: 40px;
}

/* 그룹 공통 */
.s2-page-megazone-solution .s2-grid-group {
  min-width: 0;
}

/* 그룹 제목 */
.s2-page-megazone-solution .s2-grid-group-title {
  margin: 0 0 20px;
  text-align: center;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  color: #212121;
}

/* 왼쪽 3개 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); grid-column-gap: 20px;
  
}

/* 오른쪽 2개 */
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 20px;
}

/* 카드 전체 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-item,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-item {
  display: flex;
  flex-direction: column;
}

/* 카드 상단 카테고리 텍스트 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-text,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-text {
  margin: 0 0 20px;
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  color: #212121;
}

/* 카드 박스 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-item-02,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-item-02 {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
  border: 1px solid #eeeeee;
  height: 100%;
  overflow: hidden;   /* auto 말고 hidden 또는 visible */
  background: #fff;
  text-align: center;
}

/* 아이콘 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-icon,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-icon {
  margin: 0;
  text-align: center;
}

.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-icon img,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-icon img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* 카드 제목 */
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-title,
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-title {
  margin-top: 20px;
  text-align: center;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: #212121;
  word-break: keep-all;
}

/* 반응형 */
@media (max-width: 1080px) {
  .s2-page-megazone-solution .s2-grid-box-group {

    gap: 40px;
  }


  .s2-page-megazone-solution .s2-grid-box-2xn-icon-02 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .s2-page-megazone-solution .s2-grid-box-3xn-icon-02,
  .s2-page-megazone-solution .s2-grid-box-2xn-icon-02 {
    grid-template-columns: 1fr;
  }


  .s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-text,
  .s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-text {
    font-size: 22px;
  }
}








/* =========================
   인프라 서비스 2 / 2 / 1 최종본
   중첩 group 없이 5칸 grid로 고정
   ========================= */

.s2-page-megazone-solution .infra-225-section {
  margin-top: 80px;
}

/* 메인 타이틀 */
.s2-page-megazone-solution .infra-225-main-title {
  margin: 0 0 120px;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 700;
  color: #212121;
}

/* 바깥 5칸 고정 grid */
.s2-page-megazone-solution .infra-225-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)  /* card1 */
    minmax(0, 1fr)  /* card2 */
    0px            /* gap 1 */
    minmax(0, 1fr)  /* card3 */
    minmax(0, 1fr)  /* card4 */
    0px            /* gap 2 */
    minmax(0, 1fr); /* card5 */

  grid-template-areas:
    "title1 title1 . title2 title2 . title3"
    "card1  card2  . card3  card4  . card5";

  column-gap: 20px; /* 일반 카드 사이 */
  row-gap: 20px;
  align-items: start;
}

/* 제목 공통 */
.s2-page-megazone-solution .infra-225-group-title {
  margin: 0;
  text-align: center;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  color: #212121;
  word-break: keep-all;
}

/* 제목 위치 */
.s2-page-megazone-solution .infra-225-title-1 { grid-area: title1; }
.s2-page-megazone-solution .infra-225-title-2 { grid-area: title2; }
.s2-page-megazone-solution .infra-225-title-3 { grid-area: title3; }

/* 카드 위치 */
.s2-page-megazone-solution .infra-225-card-1 { grid-area: card1; }
.s2-page-megazone-solution .infra-225-card-2 { grid-area: card2; }
.s2-page-megazone-solution .infra-225-card-3 { grid-area: card3; }
.s2-page-megazone-solution .infra-225-card-4 { grid-area: card4; }
.s2-page-megazone-solution .infra-225-card-5 { grid-area: card5; }

/* 카드 공통 */
.s2-page-megazone-solution .infra-225-card {
  min-width: 0;
}




.s2-page-megazone-solution .infra-225-card-inner {
  width: 100%;
  min-height: 200px;     /* 360 → 280 */
  padding: 5px;    /* 위아래 패딩도 살짝 줄임 */
  border: 1px solid #eeeeee;
  border-radius: 18px;
  box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
  background: #ffffff;
  box-sizing: border-box;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* 핵심 */
}





/* 아이콘 */
.s2-page-megazone-solution .infra-225-icon {
  margin: 0;
}

.s2-page-megazone-solution .infra-225-icon img {
  display: block;
  
  height: auto;
  margin: 0 auto;
}

/* 텍스트 */
.s2-page-megazone-solution .infra-225-text {
  margin: 20px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: #212121;
  word-break: keep-all;
}

/* =========================
   태블릿
   ========================= */
@media (max-width: 1200px) {
  .s2-page-megazone-solution .infra-225-main-title {
    margin-bottom: 90px;
    font-size: 52px;
  }


  .s2-page-megazone-solution .infra-225-group-title {
    font-size: 26px;
  }

  .s2-page-megazone-solution .infra-225-card-inner {
    min-height: 300px;
    padding: 34px 20px;
  }
}

/* =========================
   모바일
   ========================= */
@media (max-width: 767px) {
  .s2-page-megazone-solution .infra-225-main-title {
    margin-bottom: 50px;
    font-size: 40px;
  }

  .s2-page-megazone-solution .infra-225-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title1"
      "card1"
      "card2"
      "title2"
      "card3"
      "card4"
      "title3"
      "card5";
    row-gap: 24px;
  }

  .s2-page-megazone-solution .infra-225-group-title {
    font-size: 24px;
  }

  .s2-page-megazone-solution .infra-225-card-inner {
    min-height: auto;
  }
}







/* 5xn .s2-grid-box-5xn-icon */

.s2-page-megazone-solution .s2-grid-box-5xn-icon {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: stretch;
}

@media (max-width: 767px) {
  .s2-page-megazone-solution .s2-grid-box-5xn-icon {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

/* 카드 바깥 */
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-item {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* 카드 내부 */
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-item-02 {
  min-height: 200px;              /* ← 높이 맞춤 기준 */
  height: auto;                   /* 기존 100% 제거 */
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;               /* 기존 overflow-x:auto 제거 */
  box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
  border: 1px solid #eeeeee;
  background: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;        /* ← 밑에 휑한 느낌 줄이는 핵심 */
  text-align: center;
  box-sizing: border-box;
}

/* 아이콘 */
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-icon {
  display: block;
  text-align: center;
  margin: 0;
}

.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-icon img {
  display: block;
  width: 80%;
  margin: 0 auto;
}

/* 카드 제목 */
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-title {
  margin-top: 20px;
  text-align: center;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: #212121;
  word-break: keep-all;
}

/* 카드 위 큰 텍스트 */
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-text {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  color: #212121;
}











/* 4xn .s2-grid-box-4xn-icon */


.s2-page-megazone-solution .s2-grid-box-4xn-icon { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-page-megazone-solution .s2-grid-box-4xn-icon { grid-template-columns: 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-item { padding: 20px; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee;}


.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-icon { display: inline; text-align: center; }
.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-icon img { margin: 0px auto; width: 80%; }


.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-title {  margin-top: 20px; text-align: center; font-weight: 300; font-size: 18px; color: #212121; }
.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-text {  margin-top: 10px; text-align: center; font-weight: 100; font-size: 14px; color: #212121; }


/* 4xn .s2-grid-box-4xn-icon */







/* 3xn .s2-grid-box-3xn-icon */


.s2-page-megazone-solution .s2-grid-box-3xn-icon { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-page-megazone-solution .s2-grid-box-3xn-icon { grid-template-columns: 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-page-megazone-solution .s2-grid-box-3xn-icon .s2-grid-item {border-radius: 10px; overflow-x: auto; }


.s2-page-megazone-solution .s2-grid-box-3xn-icon .s2-grid-icon { display: inline; text-align: center; }
.s2-page-megazone-solution .s2-grid-box-3xn-icon .s2-grid-icon img { width: 100px; margin: 0px auto; }


.s2-page-megazone-solution .s2-grid-box-3xn-icon .s2-grid-title {  margin-top: 20px; text-align: center; font-weight: 300; font-size: 18px; color: #212121; }
.s2-page-megazone-solution .s2-grid-box-3xn-icon .s2-grid-text {  margin-top: 10px; text-align: center; font-weight: 100; font-size: 14px; color: #212121; }


/* 3xn .s2-grid-box-3xn-icon */











@media ( max-width: 1280px ) {

.s2-page-megazone-solution h1 { font-size: 30px; }
.s2-page-megazone-solution h2 { font-size: 40px; }
.s2-page-megazone-solution h4 { font-size: 34px; }
.s2-page-megazone-solution h5 { font-size: 22px; }

.s2-page-megazone-solution .s2-paragraph-06 { font-size: 24px; }

.s2-page-megazone-solution .s2-grid-group-title { font-size: 22px; }
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-text { font-size: 22px; }
.s2-page-megazone-solution .infra-225-group-title { font-size: 22px; }

.s2-page-megazone-solution .infra-225-card-inner { padding: 5px; min-height: 190px; }
.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-item-02, 
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-item-02 { padding: 10px 5px 5px 5px; }

.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-item-02 { min-height: 190px; }

.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-icon img { width: 100%; }
  
}





@media ( max-width: 1024px ) {

.s2-page-megazone-solution h2 { font-size: 38px; }
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-text { font-size: 22px; }
.s2-page-megazone-solution .s2-grid-box-group .s2-grid-group:last-child { margin-left: 0px; }
.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-title { font-size: 16px; }
.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-title { font-size: 16px; }
.s2-page-megazone-solution .infra-225-text { font-size: 16px; }

.s2-page-megazone-solution .infra-225-icon img { width: 100%; }

.s2-page-megazone-solution .s2-grid-box-5xn-icon { grid-template-columns: 1fr 1fr 1fr; }
.s2-page-megazone-solution .s2-grid-box-4xn-icon { grid-template-columns: 1fr 1fr; }

.s2-page-megazone-solution .s2-grid-box-group { display: block; }
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-item-02 { padding: 20px; }
.s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-icon img { width: 80%; }
.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-icon img { width: 70%; }


   .s2-page-megazone-solution .infra-225-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "title1 title1"
            "card1 card2"

            "title2 title2"
            "card3 card4"

            "title3 title3"
            "card5 card5";

    row-gap: 0px; 
            
    }



    
.s2-page-megazone-solution .infra-225-title-1,
.s2-page-megazone-solution .infra-225-title-2,
.s2-page-megazone-solution .infra-225-title-3{ margin-bottom:20px; }

.s2-page-megazone-solution .infra-225-card-2,
.s2-page-megazone-solution .infra-225-card-4{ margin-bottom:60px; }



.s2-page-megazone-solution .infra-225-icon img { width: 75%; }



.s2-page-megazone-solution .infra-225-card-5 .infra-225-icon img { width: 50%; }


 
}




@media ( max-width: 768px ) {

.s2-page-megazone-solution h1 { font-size: 28px; }
.s2-page-megazone-solution h2 { font-size: 38px; }
.s2-page-megazone-solution h4 { font-size: 36px; }

.s2-page-megazone-solution .s2-paragraph-06 { font-size: 20px; }

.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-icon img, .s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-icon img { width: 50%; }

}





@media ( max-width: 430px ) {


.s2-page-megazone-solution h1 { font-size: 26px; }
.s2-page-megazone-solution h2 { font-size: 32px; }
.s2-page-megazone-solution h4 { font-size: 30px; }
.s2-page-megazone-solution h5 { font-size: 22px; }

.s2-page-megazone-solution .s2-grid-box-2xn-icon .s2-grid-title-01 { font-size: 26px; }


.s2-page-megazone-solution .s2-grid-box-5xn-icon { grid-template-columns: 1fr;}

.s2-page-megazone-solution .s2-grid-box-4xn-icon {
        grid-template-columns: 1fr;
    }


    
   .s2-page-megazone-solution .infra-225-grid {

        grid-template-columns: 1fr;

        grid-template-areas:
            "title1"
            "card1"
            "card2"

            "title2"
            "card3"
            "card4"

            "title3"
            "card5";

        row-gap: 0px;
    }


    
    /* 제목 아래 20px */
    .infra-225-title-1,
    .infra-225-title-2,
    .infra-225-title-3 {
        margin-bottom: 20px;
    }

    /* 그룹 간 60px */
    .infra-225-card-2,
    .infra-225-card-4 {
        margin-bottom: 60px;
    }



.s2-page-megazone-solution .s2-grid-box-3xn-icon-02 .s2-grid-icon img, .s2-page-megazone-solution .s2-grid-box-2xn-icon-02 .s2-grid-icon img { width: 60%; }

.s2-page-megazone-solution .infra-225-icon img { width: 60%; }
 
.s2-page-megazone-solution .s2-grid-box-4xn-icon .s2-grid-icon img { width: 55%; }


.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-icon img { width: 50%; }


    .s2-page-megazone-solution .infra-225-card-inner {
        min-height: 100px;
    }


.s2-page-megazone-solution .s2-grid-box-5xn-icon .s2-grid-item-02 { padding: 5px; min-height: 150px; }
    

}