.u-section-1 {
  filter: none;
}

.u-section-1 .u-sheet-1 {
  min-height: 400px;
}

.u-section-1 .u-custom-html-1 {
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 409px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 400px;
  }
}.u-section-3 .u-sheet-1 {
  min-height: 400px;
}

.u-section-3 .u-layout-wrap-1 {
  margin-top: 60px;
  margin-bottom: 60px;
  position: relative;
}

.u-section-3 .u-image-1 {
  min-height: 380px;
  background-image: url("https://assets.nicepagecdn.com/b0472b76/6585641/images/01.webp");
  background-position: 50% 50%;
}

.u-section-3 .u-container-layout-1 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  padding: 30px;
}

.u-section-3 .u-image-2 {
  min-height: 380px;
  background-image: url("https://assets.nicepagecdn.com/b0472b76/6585641/images/02-15.webp");
  background-position: 50% 50%;
}

.u-section-3 .u-container-layout-2 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  padding: 30px;
}

.u-section-3 .u-image-3 {
  min-height: 380px;
  background-image: url("https://assets.nicepagecdn.com/b0472b76/6585641/images/03.webp");
  background-position: 50% 50%;
}

.u-section-3 .u-container-layout-3 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  padding: 30px;
}

@media (max-width: 1199px) {
  .u-section-3 .u-sheet-1 {
    min-height: 333px;
  }

  .u-section-3 .u-image-1 {
    min-height: 313px;
  }

  .u-section-3 .u-image-2 {
    min-height: 313px;
  }

  .u-section-3 .u-image-3 {
    min-height: 313px;
  }
}

@media (max-width: 991px) {
  .u-section-3 .u-sheet-1 {
    min-height: 260px;
  }

  .u-section-3 .u-image-1 {
    min-height: 240px;
  }

  .u-section-3 .u-image-2 {
    min-height: 240px;
  }

  .u-section-3 .u-image-3 {
    min-height: 240px;
  }
}

@media (max-width: 767px) {
  .u-section-3 .u-sheet-1 {
    min-height: 1100px;
  }

  .u-section-3 .u-image-1 {
    min-height: 540px;
  }

  .u-section-3 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-image-2 {
    min-height: 540px;
  }

  .u-section-3 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-image-3 {
    min-height: 540px;
  }

  .u-section-3 .u-container-layout-3 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 575px) {
  .u-section-3 .u-sheet-1 {
    min-height: 700px;
  }

  .u-section-3 .u-image-1 {
    min-height: 340px;
  }

  .u-section-3 .u-image-2 {
    min-height: 340px;
  }

  .u-section-3 .u-image-3 {
    min-height: 340px;
  }
}.u-section-4 .u-sheet-1 {
  min-height: 400px;
}

.u-section-4 .u-custom-html-1 {
  margin-bottom: 60px;
}

.u-section-4 .embed-responsive-1 {
  position: absolute;
  width: 178%;
  left: -39%;
  height: 178%;
  top: -39%;
}

@media (max-width: 991px) {
  .u-section-4 .embed-responsive-1 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

@media (max-width: 767px) {
  .u-section-4 .embed-responsive-1 {
    width: 178%;
    left: -39%;
    height: 178%;
    top: -39%;
  }
}

@media (max-width: 575px) {
  .u-section-4 .embed-responsive-1 {
    width: 209%;
    left: -55%;
    height: 100%;
    top: 0%;
  }
}.u-section-6 .u-sheet-1 {
  min-height: 400px;
}

.u-section-6 .u-custom-html-1 {
  margin-bottom: 60px;
}.u-section-8 .u-sheet-1 {
  min-height: 400px;
}

.u-section-8 .u-custom-html-1 {
  margin-bottom: 60px;
}.u-section-10 .u-sheet-1 {
  min-height: 400px;
  margin-bottom: 0;
}

.u-section-10 .u-text-1 {
  margin: 20px auto 0;
}

.u-section-10 .u-gallery-1 {
  height: 375px;
  margin-top: 20px;
  margin-bottom: 60px;
}

.u-section-10 .u-gallery-inner-1 {
  --gap: 0px;
}

.u-section-10 .u-gallery-item-1 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-1 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-2 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-2 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-3 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-3 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-4 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-4 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-5 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-5 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-6 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-6 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-7 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-7 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-item-8 {
  margin-right: 10px;
}

.u-section-10 .u-over-slide-8 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 20px;
}

.u-section-10 .u-gallery-nav-1 {
  position: absolute;
  left: 10px;
  width: 40px;
  height: 40px;
}

.u-section-10 .u-gallery-nav-2 {
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
}/* =================================================================
   1. 전역 스타일 (Global Styles)
   - 웹사이트 전체의 디자인 시스템(색상, 폰트, 기본 레이아웃)을 정의합니다.
   ================================================================== */
:root {
      /* 더 깊고 신뢰감 있는 파란색 */
     /* 강조를 위한 노란색 (버튼 호버 등) */
         /* 제목 등에 사용할 부드러운 검은색 */
         /* 일반 본문 텍스트 색상 */
           /* 섹션 구분을 위한 부드러운 배경색 */
    
       /* 테두리 및 구분선 색상 */
     /* 부드러운 그림자 효과 */
}
body {
    margin: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif; /* 가독성 높은 현대적인 폰트 */
    color: #495057;
    line-height: 1.7;
    word-break: keep-all; /* 한국어 줄바꿈 최적화 */
    -webkit-font-smoothing: antialiased; /* Mac/iOS 폰트 렌더링 최적화 */
}
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 100px 20px; /* 섹션 상하 여백을 여유롭게 설정 */
}
/* 모든 섹션 제목에 일관되게 적용될 스타일 */
.section-title {
    font-size: clamp(2.2rem, 5vw, 2.8rem); /* 화면 크기에 따라 폰트 자동 조절 */
    font-weight: 800; /* 더 굵게 하여 주목도 상승 */
    text-align: center;
    margin-bottom: 20px;
    color: #212529;
}
/* 모든 섹션 부제목에 일관되게 적용될 스타일 */
.section-subtitle {
    font-size: 1.1rem;
    text-align: center;
    color: #6c757d;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
/* 세련된 버튼 스타일 (공통) */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px; /* 부드러운 알약 형태의 버튼 */
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary {
    background-color: #0066CC;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.btn-primary:hover {
    transform: translateY(-3px); /* 위로 살짝 떠오르는 효과 */
    box-shadow: 0 7px 20px rgba(0, 102, 204, 0.4);
}
.btn-lg {
    padding: 18px 40px;
    font-size: 1.1rem;
}
/* =================================================================
   2. 섹션별 스타일 (메인 페이지)
   - 각 섹션의 고유한 디자인을 정의합니다.
   ================================================================== */
/* ---------------- HERO 섹션 ---------------- */
.hero-section {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 70vh; text-align: center; color: #ffffff;
    /* 이미지 위에 어두운 그라데이션을 덮어 텍스트 가독성 확보 */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://menumingle.co.kr/stories/themepark/img/logop.jpg');
    background-size: cover; background-position: center;
}
.hero-content { 
    position: relative; z-index: 1; padding: 0 20px; 
}
.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 텍스트가 잘 보이도록 그림자 추가 */
}
.hero-content .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-bottom: 40px;
    color: rgba(255,255,255,0.9);
}
/* ---------------- 서비스 소개 섹션 (Services Section) ---------------- */
.services-section {
    /* .container 클래스가 여백을 관리하므로 추가 스타일 불필요 */
}
.services-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
}
.service-card {
    display: block;
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: #495057;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}
.service-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background-color: #e7f1ff; /* 아이콘 배경색 */
    color: #0066CC;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-card h3 {
    margin-bottom: 10px;
    color: #212529;
    font-size: 1.3rem;
}
.service-card .card-link {
    font-weight: 700;
    color: #0066CC;
    margin-top: 20px;
    display: inline-block;
}
/* ---------------- 왜 우리인가? 섹션 (Why Us Section) ---------------- */
.why-us-section {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.why-us-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    text-align: center;
}
.feature-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}
.feature-item h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #212529;
}
/* ---------------- 긴급 출동 요청 섹션 (CTA Section) ---------------- */
.cta-section {
    background: #0066CC;
    color: #ffffff;
    text-align: center;
}
.cta-section h2 {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 2.5rem);
}
.cta-section p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}
.cta-section .btn-primary {
    background-color: #ffffff;
    color: #0066CC;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-section .btn-primary:hover {
    background-color: #FFC107;
    color: #212529;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
}
/* =================================================================
   3. 반응형 디자인 (모바일 환경)
   ================================================================== */
@media (max-width: 768px) {
    .container { 
        padding: 80px 20px; /* 모바일에서 상하 여백 살짝 줄임 */
    }
    
    /* 그리드 항목들을 세로로 쌓음 */
    .why-us-grid { 
        grid-template-columns: 1fr; 
    }
}