body {
   word-break: keep-all;
}
/* main section1 S */
#section01 {
   max-width: 1920px;
   margin: 0 auto;
   position: relative;
   background-image: url('../images/bg_circle01.png');
   background-repeat: no-repeat;
   background-position: 140% 667px;
}
@media (max-width: 576px) {
   #section01 {
      background-position: -32% 258px;
   }
}

.box5_wrap {
   min-height: 572px;
   position: relative;
   display: flex;
   align-items: flex-end;
   width: 100%;
   aspect-ratio: 1 / 1.8;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 1rem;
   overflow: hidden;
   padding: 2rem 1.5rem;
   transition: transform 0.3s ease;
}
/* 마우스 오버 시 카드 살짝 떠오르는 효과 (선택사항) */
.box5_wrap:hover {
   transform: translateY(-5px);
}

/* 텍스트 가독성을 위한 반투명 오버레이 (그라데이션) 처리 */
.box5_wrap::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
   z-index: 1;
}
.box5_wrap h3 {
   font-size: 28px;
   font-weight: 700;
   color: #ffffff;
   word-break: keep-all;
   margin-bottom: 18px;
}
.box5_wrap h5 {
   font-size: 18px;
   color: #ffffff;
   word-break: keep-all;
}

/* 내부 텍스트를 오버레이 위로 띄우기 위한 래퍼 속성 */
.box5_wrap .content-wrap {
   position: relative;
   z-index: 2;
   width: 100%;
}

/* 모바일 분기점 처리 */
@media (max-width: 576px) {
   .box5_wrap {
      min-height: auto;
      padding: 1rem;
   }
   .box5_wrap h3 {
      font-size: 1.1rem;
   }
   .box5_wrap h5 {
      font-size: 0.8rem;
   }
}
.box5_wrap_01 {
   background: url('../images/busi01.png') no-repeat center center;
}
.box5_wrap_02 {
   background: url('../images/busi02.png') no-repeat center center;
}
.box5_wrap_03 {
   background: url('../images/busi03.png') no-repeat center center;
}
.box5_wrap_04 {
   background: url('../images/busi04.png') no-repeat center center;
}
.box5_wrap_05 {
   background: url('../images/busi05.png') no-repeat center center;
}
/* main section1 E */

/* main section2 S */
#section02 {
   max-width: 1920px;
   margin: 0 auto;
   position: relative;
   background-image: url('../images/bg_circle02.png');
   background-repeat: no-repeat;
   background-position: -14% 30px;
   padding-top: 210px;
   margin-bottom: 170px;
}
@media (max-width: 576px) {
   #section02 {
      background-position: -32% 258px;
   }
}
#section02 .ltxt {
   /* font-size: 56px; */
   font-weight: 500;
   line-height: 1.2;
}
#section02 .ltxt span {
   font-weight: 700;
}

/* main section2 E */

/* main section3 S */
#section03 {
    width: 100%;
    /* max-width: 1920px; 컨테이너 배경이 짤리지 않게 해제하거나 디자인에 맞게 유지 */
    margin: 0 auto;
    position: relative;
    background-image: url('../images/support.png');
    background-repeat: no-repeat;
    background-position: center center; /* 반응형 대응을 위해 중앙 정렬 권장 */
    background-size: cover; /* 배경 이미지가 화면 빈 곳 없이 꽉 차게 채워줌 */
    height: 827px;
    display: flex;
    align-items: center;
}

#section03 h1 {
    /* font-size: 56px; */
    font-weight: 500;
    color: #ffffff;
    line-height: 1.3; /* 줄간격 살짝 여유 있게 조절 */
    margin-bottom: 16px;
    word-break: keep-all; /* 한글 단어 단위로 줄바꿈 되도록 설정 */
}
#section03 h1 span {
    font-weight: 700;
}
#section03 h2 {
    font-size: 18px;
    color: #ffffff;
    word-break: keep-all;
}

/* 기존 인라인 스타일을 CSS로 이동 (반응형 제어 목적) */
.text-box {
    margin-bottom: 150px;
}

/* 공통 원형 스타일 */
#section03 .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    margin-left: -21px;
    box-sizing: border-box;
    flex-shrink: 0;
}
#section03 .circle a{
   color: #fff;
}
#section03 .circle:first-child {
    margin-left: 0;
}

/* 1. 후원안내 (투명 + 흰색 테두리) */
#section03 .circle-1 {
    background-color: transparent;
    border: 1px solid #ffffff;
    z-index: 1;
}

/* 2. 후원자명단 (반투명 흰색) */
#section03 .circle-2 {
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 2;
}

/* 3. 후원문의 (빨간색 + 반투명 외부 테두리) */
#section03 .circle-3 {
    background-color: #d71921;
    z-index: 3;
    border: 15px solid rgba(218, 18, 27, 0.4);
    background-clip: padding-box;
}

/* =========================================
   반응형 (태블릿 & 모바일 해상도 대응)
   ========================================= */

/* 태블릿 (992px 이하) */
@media (max-width: 992px) {
    #section03 h1 {
        /* font-size: 42px; */
    }
    /* 원형 크기 및 겹침 간격 살짝 축소 */
    #section03 .circle {
        width: 140px;
        height: 140px;
        font-size: 20px;
        margin-left: -15px;
    }
    #section03 .circle-3 {
        border-width: 12px;
    }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
    #section03 {
        height: auto;
        padding: 5rem 0; 
        /* 강제 높이 제한을 풀고 기기 화면에 맞춤 */
    }
    .text-box {
        margin-bottom: 50px; /* 답답하지 않게 여백 축소 */
    }
    #section03 h1 {
        /* font-size: 32px; */
    }
    #section03 h2 {
        font-size: 15px;
        line-height: 1.5;
    }

    /* 화면을 넘치지 않도록 원형 크기 대폭 축소 */
    #section03 .circle {
        width: 100px;
        height: 100px;
        font-size: 14px;
        margin-left: -12px;
    }
    #section03 .circle-3 {
        border-width: 8px; /* 테두리 두께도 맞춰서 얇게 조정 */
    }
}
/* main section3 E */

/* main section4 S */
#section04 {
    min-height: 100vh;
  background-color: #dd6969;
  background-image: url('../images/bg_circle03.png'), url('../images/bg_circle04.png');
  background-position: -310px -180px, 1670px 575px;
  background-repeat: no-repeat, no-repeat;

  /* PC에서는 최대 150px, 그 외에는 유동적으로 변하게 할 때 clamp 활용 가능 */
  /* 또는 단순히 절대값(px)을 주고 미디어 쿼리로 조절 */
  /* background-size: 150px, 150px; */
}

#section04 h1 {
    /* font-size: 56px; */
    font-weight: 500;
    color: #ffffff;
    line-height: 1.3; /* 줄간격 살짝 여유 있게 조절 */
    margin-bottom: 78px;
    word-break: keep-all; /* 한글 단어 단위로 줄바꿈 되도록 설정 */
}
@media (max-width:576px) {
   #section04 h1 {
       /* font-size: 44px; */
   }
}

/* 모바일 화면 (가로 768px 이하) 대응 */
@media (max-width: 768px) {
  #section04 {
   padding: 5rem 0;
    /* 모바일에서는 장식 이미지를 조금 더 작게 줄임 */
    /* background-size: 80px, 80px; */
  }
}
/* main section4 E */