<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text:400,400i&display=swap&subset=latin-ext" rel="stylesheet">

  /* 일반 태블릿 및 소형 데스크톱 */
@media (max-width: 1199px) {
  #s_blank {
    height: 100px;
  }
}

/* 모바일 기기 (스마트폰) */
@media (max-width: 767px) {
  #s_blank {
    height: 100px;
  }
}

/* 데스크톱 */
@media (min-width: 1200px) {
  #s_blank {
    height: 100px;
  }
}

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
      z-index: 1;
    }

    .banner {
      position: relative;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      z-index: 2;
    }

    .banner-text h1 {
      font-size: 35px;
      color: white;
      margin-bottom: 10px;	  
	  font-family:'Cal Sans', sans-serif;
	   letter-spacing: 0.1em;
    }

    .banner-text p {
      font-size: 18px;
      color: white;
	  font-family:'NanumSquareNeo', sans-serif;
    }

    @media (max-width: 1024px) {
      .banner {
        height: 120px;
        padding: 20px;
      }

      .banner-text h1 {
        font-size: 25px;
      }

      .banner-text p {
        font-size: 14px;
      }
    } 


		/* wrapper3: Full width, white background */
        .wrapper4 {
            width: 100%;
            background-color: #fff;
        }
        
        /* container3: Max 1200px on PC, 10px padding on mobile/tablet */
        .container4 {
            max-width: 100%;
            margin: 0 auto;
            padding: 0px 10px; /* 모바일/태블릿: 상하 40px, 좌우 10px 여백 */
            background-color: #fff;
            box-sizing: border-box;
        }

        /* PC (1200px 이상) 스타일 */
        @media (min-width: 1200px) {
            .container4 {
                max-width: 1200px; /* PC: 1200px 고정 너비 */
                padding: 40px 0px 0px 0px; /* PC: 상하 80px 여백 */
            }
            .header-section {
                margin-bottom: 60px;
            }
            .feature-grid {
                grid-template-columns: repeat(2, 1fr); /* PC: 2열 */
                gap: 40px;
            }
            .text-small { font-size: 16px; color: #555;}
            .text-large { font-size: 21px; } /* 제목 크기 조정 */
            .text-xlarge { font-size: 34px; }
            .text-content-large { font-size: 20px; }
        }

        /* 모바일/태블릿 스타일 (1200px 미만) */
        @media (max-width: 1199px) {
            .header-section {
                margin-bottom: 40px;
            }
            .feature-grid {
                grid-template-columns: 1fr; /* 모바일: 1열 */
                gap: 32px;
            }
            .text-small { font-size: 14px; color: #555;}
            .text-large { font-size: 17px; }
            .text-xlarge { font-size: 22px; }
            .text-content-large { font-size: 14px; }
        }
        
        /* 폰트 크기 및 스타일 (재사용 클래스로 간결화) */
        .text-xlarge { font-weight: 700; color: #111827; } /* 대표 이름 (bold, gray-900) */
        .text-large { font-weight: 500; color: #1f2937; } /* 주요 제목 (medium, gray-800) */
        .text-content { font-size: 16px; font-weight: 400; color: #4b5563; line-height: 1.6; } /* 본문 (regular, gray-600) */
        .text-content-bold { font-weight: 600; color: #1f2937; } /* 박스 제목 (semibold, gray-800) */
        .text-footer { font-weight: 500; color: #374151; } /* 푸터 텍스트 (medium, gray-700) */

        /* Feature Boxes Grid Styles */
        .feature-grid {
            display: grid;
            list-style: none; /* 리스트 스타일 제거 */
            padding: 0;
            margin: 0;
        }

        /* Feature Box Base Styles */
        .feature-box {
            border: 2px solid #f8f8f8;
            border-radius: 12px;
            padding: 32px; /* p-8 */
            transition: all 300ms ease-in-out;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            box-sizing: border-box;
        }
        /* Custom styling for hover effect */
        .feature-box:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.03); /* Subtle lift effect */
            transform: translateY(-4px);
        }

        /* Custom number circle styling */
        .number-circle {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 16px;
            background-color: #f8f8f8;
            color: #374151;
            border: 2px solid #f8f8f8;
            border-radius: 50%;
        }

        /* Footer Styles */
        .footer-section {
            margin-top: 48px;
            padding-top: 32px;
            border-top: 1px solid #f3f4f6;
            max-width: 1200px; /* max-w-4xl */
        }