@charset "UTF-8";

/* =================================================
   TABLET VERSION (801px ~ 1024px)
   모바일 CSS 참고하여 재구성
================================================= */
@media (min-width: 801px) and (max-width: 1064px) {

	 .intro_area .box_inner {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        flex-direction: column;
    }
	
  /* =========================
     1. 상단 배너 (크기만 축소)
  ========================= */
  .top-banner {
    padding: 90px 0 120px;
  }

  .banner-text h2 {
    font-size: 32px !important;
    margin-bottom: 50px !important;
  }

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

  /* =========================
     2. SIMPLE PLAN (위계 유지)
  ========================= */
  .simple-plan {
    padding: 60px 0 30px;
  }

  .sp-top-text h3 { font-size: 22px; }
  .sp-top-text h2 { font-size: 34px; }
  .sp-top-text p  { font-size: 18px; }

  .sp-icon img { width: 160px; }

  .sp-percent { font-size: 56px; }
  .sp-sub     { font-size: 18px; }

  /* =========================
     3. One Point / 링크 영역
     (PC 구조 유지 핵심)
  ========================= */
  .link-section {
    display: flex;              
    flex-direction: row;        
    gap: 28px;
    justify-content: center;
  }

  .link-image img {
    max-width: 220px;
  }

  /* =========================
     4. 카드 영역 (2 + 1)
  ========================= */
  .flat-row {
    max-width: 100vw;       
    padding: 0 24px;         
    box-sizing: border-box;
    gap: 24px;               
  }

  /* 3열 유지 */
  .flat-item {
    flex: 1;                 
  }

  /* 이미지 과대 방지 */
  .flat-item img {
    max-width: 260px;
    margin: 0 auto 16px;
    display: block;
  }

  /* 텍스트 스케일만 축소 */
  .flat-item h3 {
    font-size: 22px;
  }

  .flat-item p {
    font-size: 15px;
    line-height: 1.6;
  }


  /* =========================
     5. 타이틀 계층 축소
  ========================= */
  .section-title,
  .section-title-left {
    font-size: 40px;
  }

  .section-desc {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .title-with-icon {
    font-size: 22px;
  }

  /* =========================
     6. 하단 배너
  ========================= */
  .blue-banner {
    margin-bottom: 80px;
  }

  .blue-banner .banner-line1,
  .blue-banner .banner-line2 {
    font-size: 20px;
  }

}