@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* 웹폰트 적용 */

html,
body,
body *,
body *::before,
body *::after,
button,
input,
textarea,
select,
option {
  font-family: 'Noto Sans', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', sans-serif !important;
}
.commit-icon img {
   filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(6231%) hue-rotate(204deg) brightness(88%) contrast(85%);
}

/* 전체 이미지 공통 설정 */
img {
  max-width: 100% !important;
}
/* 히어로 서브 타이틀 */
.hero-sub {
  color:#666675 !important;
  font-weight:700 !important;
}

/* Pain Points 카드 이미지 영역 */
.pain-card {
  align-items: center !important;
  }



/* Pain Points 카드 이미지 */
.pain-card-img {
  
  border-radius: 12px !important;
  }

/* Journey CTA 버튼 묶음 공통 */
.journey-cta {
  display: flex !important;
  width: 100% !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Journey CTA 내부 버튼 공통 */
.journey-cta .btn {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* 하단 배너 제목 */
.banner-bottom-inner h2{
  color:#3c4f9c !important;
}


/* 하단 배너 문장 */
  .banner-bottom-inner p {
  color:#3c4f9c !important;
}


/* =========================================================
   스마트폰 사이즈
========================================================= */

@media screen and (max-width: 767px) {

  /* 전체 페이지 여백 및 기본 글자 크기 */
  html,
  body {
    overflow-x: hidden !important;
    font-size: 16px !important;
  }

  /* 공통 섹션 여백 */
  .section,
  .journey-section,
  .final-cta {
    padding: 24px 12px !important;
  }

  /* 히어로 전체 영역 */
  .hero {
    min-height: unset !important;
    height: auto !important;
    /*히어로 섹션 버튼 아래 간격 조정*/
    padding-bottom: 48px !important;  
    justify-content: flex-start !important;
 
  }

  /* 히어로 배경 이미지 */
  .hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 히어로 텍스트 영역 */
  .hero-main {
    align-items: flex-start !important;
    padding: 0 12px !important;
    /*히어로 섹션 글자 위치 위로 올리기 */
    gap: 0px !important;
    margin-top: -40px !important;
  }

  /* 히어로 메인 타이틀 */
  .hero-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
  }

  /* 히어로 서브 타이틀 */
  .hero-sub {
    font-size: 12px !important;
    font-weight:700 !important;
    line-height: 1.2 !important;
    width: 160px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    
  }


  /* 버튼 공통 */
  .btn {
    width: 100% !important;
    max-width: 335px !important;
    padding: 4px 12px !important;
    font-size: 18px !important;
    min-height: 36px !important;

    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;

  }
  /* 히어로 버튼 */
  .hero .btn{
 	  font-size: 12px !important;
    padding: 4px 12px !important;
  	min-height: 36px !important;
    width: 100% !important;
  }


  /* 섹션 제목 */
  .section-heading,
  .compare-heading {
    font-size: 16px !important;
    font-weight:700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
  }

  /* Pain Points 카드 묶음 */
  .pain-cards {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Pain Points 카드 */
  .pain-card {
    padding: 20px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }

  /* Pain Points 카드 이미지 영역 */
  .pain-card-img {
    width: 100% !important;
    height: 240px !important;
    border-radius: 12px !important;
  }

  /* Pain Points 카드 이미지 */
  .pain-card-img img {
    object-fit: contain !important;
    object-position: center !important;
  }

  /* 본문 텍스트 */
  .body-text,
  .compare-item {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* 블루 배너 영역 */
  .banner-blue {
    padding: 24px 12px !important;
  }

  /* 블루 배너 보조 문구 */
  .banner-blue .sub {
    font-size: 14px !important;
    font-weight:700 !important;
    line-height: 1.2 !important;
  }

  /* 블루 배너 핵심 문구 */
  .banner-blue .quote {
    font-size: 16px !important;
    font-weight:700 !important;
    line-height: 1.2 !important;
  }

  /* Commitments 제목 영역 */
  .commit-heading .hl {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }


  /* Commitments 제목 영역 */
  .commit-heading .sub {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Commitments 카드 묶음 */
  .commit-cards {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Commitments 카드 */
  .commit-card {
    padding: 24px 12px !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }

  /* Commitments 아이콘 */
  .commit-icon {
    width: 96px !important;
    height: 96px !important;

  }

  /* Commitments 카드 제목 */
  .commit-card h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  /* Commitments 카드 본문 */
  .commit-card p {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }


  /* Journey 전체 단계 묶음 */
  .journey-steps {
    gap: 24px !important;
  }

  /* Journey 제목 */
  .journey-title {
    font-size: 16px !important;
    font-weight:700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 24px !important;
  }



  /* Journey Step 카드 공통 */
  .step-card {

    border-radius: 18px !important;
  }

  /* Journey Step 1 카드 */
  .step1 {
    padding: 16px 16px 210px !important; 
  }

  /* Journey Step 번호 */
  .step-num {
    font-size: 16px !important;
    line-height: 1.24 !important;
    margin-bottom: 12px !important;
  }


  /* 서비스 로드맵 본문 텍스트 */
  .option-body{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .step-body {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Journey Step 1 선택 영역 */
  .step1-opts {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Journey Step 1 옵션 박스 */
  .option-inner {
    padding: 24px 12px !important;
    border-radius: 18px !important;
  }

  /* Journey Step 1 옵션 라벨 */
  .option-label {
    font-size: 16px !important;
  }

  /* Journey Step 1 옵션 제목 */
  .option-title {
    font-size: 16px !important;
    font-weight:700 !important;
    text-align: left !important;
  }

  /* Journey Step 1 하단 이미지 */
  .step1-img {
    width: 220px !important;
    height: 176px !important;
    right: 20px !important;
    bottom: 20px !important;
  }

  /* Journey 일반 Step 카드 */
  .step-reg {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 12px !important;
    gap: 28px !important;
  }


  /* Journey Step 정보 영역 */
  .step-info {
    gap: 14px !important;
  }

  /* Journey Step 설명 캡션 */
  .step-caption {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Journey Step 이미지 영역 */
  .step-img {
    width: 100% !important;
    max-width: 260px !important;
    height: 208px !important;
    margin: 0 auto !important;
  }

  /* 아래 방향 화살표 */
  .arrow {
    width: 34px !important;
    height: 34px !important;
  }

  /* Journey CTA 버튼 묶음 */
  .journey-cta {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Journey CTA 내부 버튼 */
  .journey-cta .btn {
    width: 100% !important;
    max-width: 240px !important;
    min-height: 36px !important;
    padding: 4px 12px !important;
    font-size: 16px !important;
  }



  /* 비교 섹션 제목 */
  .compare-heading {
    margin-bottom: 24px !important;
  }

  /* 비교 카드 전체 레이아웃 */
  .compare-grid {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* 비교 카드 */
  .compare-card {
    padding: 24px 24px !important;
    gap: 0px !important;
    border-radius: 18px !important;
  }

  /* 비교 카드 제목 */
  .compare-card h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* 비교 카드 리스트 */
  .compare-list {
    gap: 6px !important;
  }

  /* 비교 카드 화살표 */
  .compare-arrow {
    width: 34px !important;
    height: 34px !important;
    transform: none !important;
  }

  /* 하단 배너 전체 영역 */
  .banner-bottom {
    min-height: 200px !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  /* 하단 배너 배경 이미지 */
  .banner-bottom-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 하단 배너 텍스트 영역 */
  .banner-bottom-inner {
    padding: 12px !important;
    text-align: left !important;
	  max-width: 260px !important;
    margin-top: 40px !important;


  }

  /* 하단 배너 제목 */
  .banner-bottom-inner h2 {
    font-size: 14px !important;
    line-height: 1.2 !important;
    
    margin: 0 !important;
    letter-spacing: -0.03em !important;

  }

  /* 하단 배너 문장 */
  .banner-bottom-inner p {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-top: 12px !important;

  }

  /* 최종 CTA 영역 */
  .final-cta {
    gap: 24px !important;
  }

  /* 최종 CTA 보조 문구 */
  .final-cta-text .sub {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* 최종 CTA 메인 문구 */
  .final-cta-text .main {
    font-size: 16px !important;
    line-height: 1.2 !important;
   
  }


  /* 최종 CTA 메인 버튼 */
  .final-cta .btn{
    width: 100% !important;
    max-width: 240px !important;
    min-height: 36px !important;
    padding: 4px 12px !important;
    font-size: 16px !important;

    
  }
}


/* =========================================================
   태블릿 스크린 사이즈
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

  /* 전체 페이지 기본 설정 */
  html,
  body {
    overflow-x: hidden !important;
    font-size: 18px !important;
  }

  /* 공통 섹션 여백 */
  .section,
  .journey-section {
    padding: 24px 24px !important;
  }

  /* 히어로 전체 영역 */
  .hero {

    height: auto !important;
    /*히어로 섹션 버튼 아래 간격 조정*/
    padding-bottom: 96px !important;
  }

  /* 히어로 배경 이미지 */
  .hero-bg {
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 히어로 텍스트 영역 */
  .hero-main {
    align-items: flex-start !important;
    padding: 0 40px !important;
    /*히어로 섹션 글자 위치 위로 올리기 */
    gap: 0px !important;
    margin-top: -40px !important;
  }

  /* 히어로 메인 타이틀 */
  .hero-title {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 히어로 서브 타이틀 */
  .hero-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* 버튼 공통 */
  .btn {
    padding: 12px 24px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* 히어로 버튼 */
  .hero .btn{
 	margin-top: 36px !important;
 	font-size: 18px !important;
  	padding: 12px 24px !important;
  }
  /* 섹션 제목 */
  .section-heading{
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Pain Points 카드 묶음 */
  .pain-cards {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Pain Points 카드 */
  .pain-card {
    padding: 24px !important;
    border-radius: 20px !important;
    gap: 24px !important;
  }

  /* Pain Points 카드 이미지 영역 */
  .pain-card-img {
  	width: 100% !important;
    height: 360px !important;
    border-radius: 12px !important;
  }

  /* Pain Points 카드 이미지 */
  .pain-card-img img {
    object-fit: contain !important;
    object-position: center !important;
  }


  /* 본문 텍스트 */
  .body-text,
  .compare-item {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* 블루 배너 영역 */
  .banner-blue {
    padding: 36px 24px !important;
  }

  /* 블루 배너 보조 문구 */
  .banner-blue .sub {
    font-size: 24px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 블루 배너 핵심 문구 */
  .banner-blue .quote {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 제목 메인 */
  .commit-heading .hl {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 제목 서브 */
  .commit-heading .sub {
    font-size: 24px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 묶음 */
  .commit-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Commitments 카드 */
  .commit-card {
    padding: 24px 24px !important;
    gap: 12px !important;
    border-radius: 20px !important;
  }

  /* Commitments 아이콘 */
  .commit-icon {
    width: 110px !important;
    height: 110px !important;
  }

  /* Commitments 카드 제목 */
  .commit-card h3 {
    font-size: 24px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 본문 */
  .commit-card p {
    font-size: 18px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Journey 제목 */

  .journey-title {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 24px !important;
  }

  /* Journey 전체 단계 묶음 */
  .journey-steps {
    gap: 24px !important;
  }

  /* Journey Step 카드 공통 */
  .step-card {
    border-radius: 20px !important;
    /* 카드 내부 여백 조정 */
    padding: 36px 36px !important;
  }

  /* Journey Step 1 카드 */
  .step1 {
  	/* 카드 내부 여백 조정 */
    padding: 36px 36px 240px !important;
  }

  /* Journey Step 번호 */
  .step-num {
    font-size: 24px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }

/* 서비스 로드맵 본문 텍스트 */
  .option-body{
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
  .step-body {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* Journey Step 1 선택 영역 */
  .step1-opts {
    flex-direction: row !important;
    gap: 24px !important;
  }

  .step1 .option .no-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .step1 .option .no-col {
    width: 100% !important;
    flex: none !important;
  }


  /* Journey Step 1 옵션 박스 */
  .option-inner {
    padding: 42px 30px !important;
    border-radius: 20px !important;
  }

  /* Journey Step 1 옵션 제목 */
  .option-title {
    font-size: 24px !important;
    font-weight: 700 !important;
  }


  /* Journey Step 1 옵션 라벨 */
  .option-label {
    font-size: 18px !important;
  }

  /* Journey Step 1 하단 이미지 */
  .step1-img {
    width: 300px !important;
    height: 240px !important;
    right: 40px !important;
    bottom: 40px !important;
  }

  /* Journey 일반 Step 카드 */
  .step-reg {
    flex-direction: row !important;
    align-items: center !important;

    gap: 40px !important;
  }

  /* Journey Step 이미지 영역 */
  .step-img {
    width: 280px !important;
    height: 224px !important;
  }

  /* Journey Step 설명 캡션 */
  .step-caption {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* 아래 방향 화살표 */
  .arrow {
    width: 44px !important;
    height: 44px !important;
  }


  /* Journey CTA 버튼 묶음 */
  .journey-cta {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Journey CTA 내부 버튼 */
  .journey-cta .btn {
    width: 100% !important;
    max-width: 335px !important;
    min-height: 36px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 18px !important;
  }


  /* 비교 섹션 제목 */
  .compare-heading {
    margin-bottom: 24px !important;
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }



  /* 비교 카드 전체 레이아웃 */
  .compare-grid {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* 비교 카드 */
  .compare-card {
    padding: 40px !important;
    gap: 34px !important;
  }

  /* 비교 카드 제목 */
  .compare-card h3 {
    font-size: 24px !important;
  }

  /* 비교 카드 화살표 */
  .compare-arrow {
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  /* 하단 배너 전체 영역 */
  .banner-bottom {
    min-height: 480px !important;
  }

  /* 하단 배너 배경 이미지 */
  .banner-bottom-bg {
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  /* 하단 배너 텍스트 영역 */
  .banner-bottom-inner {
    padding: 48px 24px 180px !important;
    text-align: left !important;
    max-width: 680px !important;
    margin-top: 80px !important;
  }

  /* 하단 배너 제목 */
  .banner-bottom-inner h2 {
    font-size: 24px !important;
    line-height: 1.5 !important;
    
    margin: 0 !important;
  }

  /* 하단 배너 문장 */
  .banner-bottom-inner p {
    font-size: 36px !important;
    line-height: 1.5 !important;

  }

  /* 최종 CTA 영역 */

  .final-cta {
    padding: 24px 24px !important;
    gap:0px !important;

  }

  /* 최종 CTA 보조 문구 */
  .final-cta-text .sub {
    font-size: 24px !important;

  }

  /* 최종 CTA 메인 문구 */
  .final-cta-text .main {
    font-size: 36px !important;
    line-height: 1.5 !important;
    padding-bottom: 24px !important;
  }



  /* 최종 CTA 메인 버튼 */
  .final-cta .btn{
    width:100% !important;
    max-width: 360px !important;
    min-height: 36px !important;
    padding: 12px 12px !important;
    font-size: 18px !important;

    
  }
}


/* =========================================================
   작은 데스크톱 스크린 사이즈
========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

  /* 전체 페이지 기본 설정 */
  html,
  body {
    overflow-x: hidden !important;
    font-size: 18px !important;
  }

  /* 공통 섹션 여백 */
  .section,
  .journey-section{
    padding: 36px 36px !important;
  }

  /* 히어로 전체 영역 */
  .hero {
    /*min-height: 160px !important;*/
    height: auto !important;
    overflow: hidden !important;
    /*히어로 섹션 버튼 아래 간격 조정*/
    padding-bottom: 96px !important;
    
  }

  /* 히어로 배경 이미지 */
  .hero-bg {
  	/*
    width: 100% !important;
    height: 100% !important;*/
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 히어로 텍스트 영역 */
  .hero-main {
    align-items: flex-start !important;
    padding: 0 40px !important;
    /*히어로 섹션 글자 위치 위로 올리기 */
    gap: 0px !important;
    margin-top: -40px !important;
  }

  /* 히어로 메인 타이틀 */
  .hero-title {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 히어로 서브 타이틀 */
  .hero-sub {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }

  /* 버튼 공통 */
  .btn {
    padding: 18px 24px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* 히어로 버튼 */
  .hero .btn {
    margin-top: 36px !important;
    font-size: 18px !important;
    padding: 18px 24px !important;
  }


  /* 섹션 제목 */
  .section-heading {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  .pain-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    align-items: center !important;
  }

  /* Pain Points 카드 묶음 */
  .pain-cards {
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* Pain Points 카드 */
  .pain-card {
    padding: 18px !important;
    gap: 18px !important;
  }


  /* Pain Points 카드 이미지 */
  .pain-card-img img {
    object-fit: cover !important;
    object-position: center !important;
  }
    /* Pain Points 카드 이미지 영역 */
  .pain-card-img {
  	width: 100% !important;
    height: 240px !important;
  }


  /* 본문 텍스트 */
  .body-text,
  .compare-item {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* 블루 배너 영역 */
  .banner-blue {
    padding: 36px 24px !important;
  }

  /* 블루 배너 보조 문구 */
  .banner-blue .sub {
    font-size: 28px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 블루 배너 핵심 문구 */
  .banner-blue .quote {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 제목 메인 */
  .commit-heading .hl {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 제목 서브 */
  .commit-heading .sub {
    font-size: 28px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 묶음 */
  .commit-cards {
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* Commitments 카드 */
  .commit-card {
    padding: 36px 24px !important;
    gap: 12px !important;
    border-radius: 20px !important;
  }

  /* Commitments 아이콘 */
  .commit-icon {
    width: 110px !important;
    height: 110px !important;
  }

  /* Commitments 카드 제목 */
  .commit-card h3 {
    font-size: 24px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 본문 */
  .commit-card p {
	font-size: 18px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Journey 제목 */

  .journey-title {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 36px !important;
  }

  /* Journey 전체 단계 묶음 */
  .journey-steps {
    gap: 36px !important;
  }


  /* Journey Step 카드 공통 */
  .step-card {
    border-radius: 20px !important;
    /* 카드 내부 여백 조정 */
    padding: 36px 36px !important;
  }

  /* Journey Step 1 카드 */
  .step1 {
  	/* 카드 내부 여백 조정 */
     padding: 36px 36px 240px !important;
  }

  /* Journey Step 번호 */
  .step-num {
    font-size: 28px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }


/* 서비스 로드맵 본문 텍스트 */
  .option-body{
    font-size: 24px !important;
    line-height: 1.5 !important;
  }
  .step-body {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }

  /* Journey Step 1 선택 영역 */
  .step1-opts {
    flex-direction: row !important;
    gap: 24px !important;
  }

  .step1 .option .no-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .step1 .option .no-col {
    width: 100% !important;
    flex: none !important;
  }



  /* Journey Step 1 옵션 박스 */
  .option-inner {
    padding: 42px 30px 72px !important;
    border-radius: 20px !important;
  }

  /* Journey Step 1 옵션 제목 */
  .option-title {
    font-size: 28px !important;
    font-weight: 700 !important;
  }

  /* Journey Step 1 옵션 라벨 */
  .option-label {
    font-size: 24px !important;
  }

  /* Journey Step 1 하단 이미지 */
  .step1-img {
    width: 340px !important;
    height: 272px !important;
    right: 48px !important;
    bottom: 48px !important;
  }

  /* Journey 일반 Step 카드 */
  .step-reg {
    flex-direction: row !important;
    align-items: center !important;

    gap: 48px !important;
  }

  /* Journey Step 이미지 영역 */
  .step-img {
    width: 330px !important;
    height: 264px !important;
  }

  /* Journey Step 설명 캡션 */
  .step-caption {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }


  /* 아래 방향 화살표 */
  .arrow {
    width: 64px !important;
    height: 64px !important;
  }


  /* Journey CTA 버튼 묶음 */
  .journey-cta {
    /*세로 정렬 
    flex-direction: column !important;
    gap: 12px !important;
    */
  }

  /* Journey CTA 내부 버튼 */
  .journey-cta .btn {
    width: 100% !important;
    max-width: 350px !important;
    min-height: 48px !important;
    padding: 18px 36px !important;
    font-size: 20px !important;
  }



  .compare-heading {
  	margin-bottom: 24px !important;
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }


  /* 비교 카드 전체 레이아웃 */
  .compare-grid {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* 비교 카드 */
  .compare-card {
    padding: 36px !important;
    gap: 36px !important;
  }

  /* 비교 카드 제목 */
  .compare-card h3 {
    font-size: 28px !important;
  }

  /* 비교 카드 화살표 */
  .compare-arrow {
    width: 60px !important;
    height: 60px !important;
    transform: rotate(-90deg) !important;
  }

  /* 하단 배너 전체 영역 */
  .banner-bottom {
    min-height: 540px !important;
    
  }

  /* 하단 배너 배경 이미지 */
  .banner-bottom-bg {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 하단 배너 텍스트 영역 */
  .banner-bottom-inner {
    padding: 48px 24px 180px !important;
    text-align: left !important;
    max-width: 680px !important;
    margin-top: 120px !important;
  }

  /* 하단 배너 제목 */
  .banner-bottom-inner h2 {
    font-size: 28px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
  }

  /* 하단 배너 문장 */
  .banner-bottom-inner p {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  .final-cta {
    padding: 36px 36px !important;
    gap:0px !important;
  }

  /* 최종 CTA 보조 문구 */
  .final-cta-text .sub {
    font-size: 28px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 최종 CTA 메인 문구 */
  .final-cta-text .main {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    padding-bottom: 36px !important;
  }

  /* 최종 CTA 메인 버튼 */
  .final-cta .btn{

    width: 100% !important;
    max-width: 350px !important;
    min-height: 48px !important;
    padding: 18px 36px !important;
    font-size: 20px !important;
    
  }
}


/* =========================================================
   큰 데스크톱 스크린 사이즈
========================================================= */

@media (min-width: 1200px) {

  /* 전체 페이지 기본 설정 */
  html,
  body {
    overflow-x: hidden !important;
    font-size: 18px !important;
  }

  /* 공통 섹션 여백 */
  .section,
  .journey-section,
  .final-cta {
    padding: 36px clamp(80px, 10vw, 192px) !important;
  }

  /* 히어로 전체 영역 */
  .hero {
    overflow: hidden !important;
    background-color: #ffffff !important;

    min-height: 860px !important;
    height: auto !important;
    gap: 88px !important;
 
  }

  /* 히어로 배경 이미지 감싸는 영역 */
  .hero > picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
  }


  /* 히어로 배경 이미지 */
  .hero-bg {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(100vw, 1920px) !important;
    max-width: 1920px !important;
    height: 100% !important;

    transform: translateX(-50%) !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 히어로 텍스트 영역 */
  .hero-main {

  	width: min(100%, 1920px) !important;
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(80px, 10vw, 192px) !important;
    padding-right: clamp(80px, 10vw, 192px) !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;

    gap: 0px !important;

  }

  /* 히어로 메인 타이틀 */
  .hero-title {
    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 히어로 서브 타이틀 */
  .hero-sub {
    font-size: 24px !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
  }

  /* 버튼 공통 */
  .btn {
    padding: 24px 36px !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
  }

  /* 히어로 버튼 */
  .hero .btn {
    margin-top: 36px !important;
    font-size: 24px !important;
    padding: 18px 36px !important;
  }

  /* 섹션 제목 */
  .section-heading {
    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }


  .pain-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    align-items: center !important;
  }

  /* Pain Points 카드 묶음 */
  .pain-cards {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* Pain Points 카드 */
  .pain-card {
    padding: 24px !important;
    gap: 24px !important;
    border-radius: 20px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
  }

  /* Pain Points 카드 이미지 영역 */
  .pain-card-img {
    width: 100% !important;
    max-width: 520px !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;


  }

  /* Pain Points 카드 이미지 */
  .pain-card-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;

  }

  /* 본문 텍스트 */
  .body-text,
  .compare-item {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }

  /* 블루 배너 영역 */
  .banner-blue {
    padding: 48px 36px !important;
  }

  /* 블루 배너 보조 문구 */
  .banner-blue .sub {
    font-size: 36px !important;
    line-height: 1.45 !important;
  }

  /* 블루 배너 핵심 문구 */
  .banner-blue .quote {
    font-size: 48px !important;
    line-height: 1.3 !important;
  }

  /* Commitments 제목 메인 */
  .commit-heading .hl {
    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 제목 서브 */
  .commit-heading .sub {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 묶음 */
  .commit-cards {
    flex-direction: row !important;
    gap: 24px !important;
  }

  /* Commitments 카드 */
  .commit-card {
    padding: 36px 36px !important;
    gap: 24px !important;
    border-radius: 20px !important;
  }

  /* Commitments 아이콘 */
  .commit-icon {
    width: 120px !important;
    height: 120px !important;
  }

  /* Commitments 카드 제목 */
  .commit-card h3 {
    font-size: 28px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Commitments 카드 본문 */
  .commit-card p {
    font-size: 24px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* Journey 제목 */
  .journey-title {
    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 36px !important;
   
  }

  /* Journey 전체 단계 묶음 */
  .journey-steps {
    gap: 36px !important;
  }

  /* Journey Step 카드 공통 */
  .step-card {
    border-radius: 20px !important;
    /* 카드 내부 여백 조정 */
    padding: 36px 36px !important;
  }

  /* Journey Step 1 카드 */
  .step1 {
    padding: 36px 36px 260px !important;
  }

  /* Journey Step 번호 */
  .step-num {
    font-size: 36px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }


  /* 서비스 로드맵 본문 텍스트 */
  .option-body{
    font-size: 24px !important;
    line-height: 1.5 !important;
  }
  .step-body {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }


  /* Journey Step 1 선택 영역 */
  .step1-opts {
    flex-direction: row !important;
    gap: 24px !important;
  }

  .step1 .option .no-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .step1 .option .no-col {
    width: 100% !important;
    flex: none !important;
  }


  /* Journey Step 1 옵션 박스 */
  .option-inner {
    padding: 56px 48px 160px !important;
    border-radius: 20px !important;
  }

  /* Journey Step 1 옵션 제목 */
  .option-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    
  }

  /* Journey Step 1 옵션 라벨 */
  .option-label {
    font-size: 28px !important;
  }


  /* Journey Step 1 하단 이미지 */
  .step1-img {
    width: 400px !important;
    height: 320px !important;
    right: 60px !important;
    bottom: 64px !important;
  }

  /* Journey 일반 Step 카드 */
  .step-reg {
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px !important;
  }

  /* Journey Step 이미지 영역 */
  .step-img {
    width: 400px !important;
    height: 320px !important;
  }

  /* Journey Step 설명 캡션 */
  .step-caption {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }



  /* 아래 방향 화살표 */
  .arrow {
    width: 64px !important;
    height: 64px !important;
  }

  /* Journey CTA 내부 버튼 */
  .journey-cta .btn {
    width: 100% !important;
    max-width: 380px !important;
    min-height: 48px !important;
    padding: 18px 36px !important;
    font-size: 24px !important;
  }


  /* 비교 섹션 제목 */
  .compare-heading {

    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 36px !important;
  }

  /* 비교 카드 전체 레이아웃 */
  .compare-grid {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* 비교 카드 */
  .compare-card {
    padding: 36px !important;
    gap: 36px !important;
  }

  /* 비교 카드 제목 */
  .compare-card h3 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }


  /* 비교 카드 화살표 */
  .compare-arrow {
    width: 60px !important;
    height: 60px !important;
    transform: rotate(-90deg) !important;
  }

/* 하단 배너 전체 영역 */
  .banner-bottom {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 860px !important;
    height: auto !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}


/* 하단 배너 배경 이미지 감싸는 영역 */
  .banner-bottom > picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}


  /* 하단 배너 배경 이미지 */
  .banner-bottom-bg {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(100vw, 1920px) !important;
    max-width: 1920px !important;
    height: 100% !important;

    transform: translateX(-50%) !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 하단 배너 텍스트 영역 */
  .banner-bottom-inner {
    /*
    padding: 48px 48px 180px !important;
    text-align: left !important;
    max-width: 680px !important;
*/

    position: relative !important;
    z-index: 1 !important;

    width: min(100%, 1920px) !important;
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: clamp(80px, 10vw, 192px) !important;
    padding-right: clamp(80px, 10vw, 192px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box !important;
    text-align: left !important;
    margin-top:-180px !important;



  }

  /* 하단 배너 제목 */
  .banner-bottom-inner h2 {
    margin: 0 !important;
    width: 100% !important;
    max-width: 800px !important;

    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;


  }

  /* 하단 배너 문장 */
  .banner-bottom-inner p {

    width: 100% !important;
    max-width: 900px !important;
    margin-top: 36px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 최종 CTA 영역 */
  .final-cta {
    padding: 36px 36px !important;
    gap:0px !important;
  }

  /* 최종 CTA 보조 문구 */
  .final-cta-text .sub {
    font-size: 36px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
  }

  /* 최종 CTA 메인 문구 */
  .final-cta-text .main {
    font-size: 48px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.03em !important;
    padding-bottom: 36px !important;
  }

  /* 최종 CTA 메인 버튼 */
  .final-cta .btn{

    width: 100% !important;
    max-width: 380px !important;
    min-height: 48px !important;
    padding: 18px 36px !important;
    font-size: 24px !important;
    
  }

}