@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@font-face {
    font-family: 'Paperlogy-En';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    unicode-range: U+0020-007E; 
}
@font-face {
    font-family: 'Paperlogy-En';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    unicode-range: U+0020-007E;
}
@font-face {
    font-family: 'Paperlogy-En';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    unicode-range: U+0020-007E;
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html {
/* overflow: hidden;
    height: 100%; */
}
body {
    /* overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch; */

}
div, li, ul, p, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: #000;
}
.container {
    width: 1400px;
    margin: 0 auto; 
}

.animate {
    opacity: 0;
}

/* PC 버전 애니메이션 초기화 */
@media(min-width: 992px) {
    .wiz_animation, .wiz_swiper {
        opacity: 0;
        visibility: hidden;
        transition: 1s ease-out;
    }

    /* 활성화 되었을 때 */
    .wiz_animation.wiz_active, 
    .wiz_swiper.wiz_active {
        opacity: 1 !important;
        transform: translateX(0) !important;
        visibility: visible;
    }
}

/* 모바일에서는 애니메이션 없이 바로 보이게 */
@media(max-width: 991px) {
    .wiz_animation, .wiz_swiper {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}
@media(max-width:1440px) {
    .container {
        width: 100%;
        max-width: 100%;

        }
}


.visual {
     position: relative;
     height: 100%;
    background: url('../img/landing08/visual.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display:flex;
    justify-content: center;
    align-items: center;
}

.visual .container {
    padding-left: 20px;
}

.visual .visual-top-desc {
    position: relative;
    padding-left: 28px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.visual .visual-top-desc::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #fff;
}

.visual .visual-top-desc p.strong-text {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #fff;
    transition: .6s ease-out; 
transform: translateX(-20px);
 transition-delay: 0.2s;
 opacity: 0;

}

.visual .visual-top-desc p:not(.strong-text) {
    font-size: 25px;
    font-weight: 500;
    opacity: 0.95;
    color: #fff;
    transition: .6s ease-out; 
transform: translateX(-20px);
 transition-delay: 0.4s;
 opacity: 0;


}

.visual h1.visual-title {
    margin-bottom: 50px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.15);
    color: #fff;
    font-size:68px;
    font-weight:800;
    line-height: 84px;
        transition: .6s ease-out; 
transform: translateY(-30px);
 transition-delay: 0.6s;
 opacity: 0;
} 
 
.visual .visual-eng-desc {

    
   
}

.visual .visual-eng-desc p {
     font-size:18px;
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.8);
         transition: .6s ease-out; 
transform: translateY(-30px);
 transition-delay: 0.7s;
 opacity: 0;
}
.section01 {
    width: 100%;
    font-family: 'Pretendard', sans-serif;
    padding-top: 100px;
    box-sizing: border-box;
    transition: 1s ease-out; 
    transform: translateY(20px);
    transition-delay: 0.2s;
}

.section01 .container {
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 140px;
}

.section01 h2 {
    margin-bottom: 50px;
    font-size:54px;
    font-weight:800;
}

.section01 h2 .highlight {
    /* color: #004a8d;
    border-bottom: 3px solid #004a8d;
    padding-bottom: 2px; */
     position: relative;
     display:inline-block;
     color: #004a8d;
}
.section01 h2 .highlight::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #004a8d;
    content: '';
    margin-top: 58px;
}

.section01 .quote-area {
    text-align: center;
   
}

.section01 .quote-area .quote-text {
    position: relative;
    display: inline-block;
     font-size:37px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    margin-top: 17px;
}

/* 따옴표 공통 속성 */
.section01 .quote-area .quote-text::before,
.section01  .quote-area .quote-text::after {
    position: absolute;
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조 지정 */
    font-size: 156px;
    font-weight: 400; /* 폰트 굵기를 주어 이미지처럼 두껍게 표현 */
    color: #e0e5eb;
    line-height: 1;
}

/* 여는 따옴표 */
.section01  .quote-area .quote-text::before {
    content: '\201C'; /* 둥근 여는 따옴표 유니코드 */
    top: -20px;
    left: -100px;
}

/* 닫는 따옴표 */
.section01  .quote-area .quote-text::after {
    content: '\201D'; /* 둥근 닫는 따옴표 유니코드 */
    bottom: -120px;
    right: -100px;
}

.section01 .quote-area .quote-text strong {
    font-weight: 800;
}

.section01 .flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 687px;
}

.section01 .flex .box {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.section01 .flex .left-box {
    background-color: #f2f2f2;
    background: url('../img/landing08/section01_bg01.png');
    background-position: left center;
}

.section01 .flex .left-box .content {
    max-width: 500px;
}

.section01 .flex .left-box .content .logo-img {
}

.section01 .flex .left-box .content .desc {
    font-size: 16px;
    color: #111;
    font-weight: 500;
    line-height: 1.5;
}

.section01 .flex .right-box {
    background-color: #004a8d;
    background: url('../img/landing08/section01_bg02.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    text-align: center;
    color: #fff;
    
}

.section01 .flex .right-box .content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section01 .flex .right-box .content .sub-title { 
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;  
    
} 

.section01 .flex .right-box .content .sub-title span {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    color: #dee9fc;
    font-size:24px;
    font-weight:500;
}

.section01 .flex .right-box .content .main-title {
    font-size: 63px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 40px;
    color: #fff;
}

.section01 .flex .right-box .content .main-title .highlight-green {
    background: linear-gradient(to right, #abffd6, #abffd6, #f9c18a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
/* 공통 타이틀 스타일 */
h2 { font-size: 62px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em;  }
h2 small { font-size: 28px; font-weight: 500; display: block; margin-top: 5px; color: #000; }

/* 레이아웃 */
.flex { display: flex; }

.section02 {
    padding: 140px 0 0px;
}
.section02 .sec_box {
     border-bottom: 1px #e5e5e5 solid;
     padding-bottom: 70px;
     margin-bottom: 130px;
     background: url('../img/landing08/section02_image.png');
     background-position: 120px 100%;
     background-repeat: no-repeat;
     transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

 
}
.section02 .sec_box.medi {
     border-bottom: 0;
     padding-bottom: 120px;
     margin-bottom: 0px;
     background: url('../img/landing08/section02_image02.png');
     background-position: 0px 100%;
     background-repeat: no-repeat;
 
}
.section02 .container .track-item {
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
    margin-bottom: 120px;
   
}

.section02 .container .track-item:last-child {
    margin-bottom: 0;
}

/* 왼쪽 영역 */
.section02 .left-box {
    width: 620px;
    position: relative;
}
.section02 .left-box .sub-tit {
    font-size: 30px;
    font-weight: 700;
    text-underline-offset: 6px;
    margin-bottom: 35px;
     position: relative;
     display:inline-block;
}
.section02 .left-box .sub-tit::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    content: '';
    margin-top: 40px;
}
.section02 .left-box h2 .blue {
    color: #0153b4;
}
.section02 .left-box h2 .orange {
    color: #d07116;
}
.section02 .left-box .badge {
    display: inline-block;
    background: #f2f1ed;
    padding: 17px 38px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 26px;
    margin: 50px 0;
    color: #000;
}
.section02 .left-box .badge strong {
    font-weight:800;
}
.section02 .left-box .img-wrap {
    width: 100%;
    margin-top: 20px;
}
.section02 .left-box .img-wrap img {
    width: 100%;
}

/* 오른쪽 영역 */
.section02 .right-box {
    flex: 1;
}
.section02 .right-box .info-group {
    margin-bottom: 45px;
}
.section02 .right-box .info-group:last-child {
    margin-bottom: 0;
}

.section02 .right-box .info-tit {
    font-size: 26px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.section02 .right-box .info-tit span { 
    display:block;
    background: #ddd;
    width:  41px;
    height: 41px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: .3em;
    margin-right: 14px;
    font-family: "Noto Color Emoji", sans-serif;
    font-size:20px;
}
.section02 .right-box .info-tit span.num01 {
    background: #fdeffa;
}
.section02 .right-box .info-tit span.num02 {
    background: #eff8fd;
}
.section02 .right-box .info-tit span.num03 {
    background: #fff0e0;
}
.section02 .right-box .info-tit span.num04 {
    background: #eff8fd;
}
.section02 .right-box .info-tit span.num05 {
    background: #fdf8ef;
}
.section02 .right-box .info-tit span.num06 {
    background: #fff0e0;
}
.section02 .right-box .info-tit.line {
    width: 100%;
}
.section02 .right-box .info-tit.line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
    margin-left: 15px;
}

.section02 .right-box .desc-box {
    padding: 30px 45px;
    border-radius: 12px;
    font-size:20px;
    line-height: 1.7;
}
.section02 .right-box .desc-box.bg-blue {
    background-color: #f1f6fa;
}
.section02 .right-box .desc-box.bg-beige {
    background-color: #f9f7f2;
}
.section02 .right-box .desc-box .blue-bold {
    color: #0153b4;
    font-weight: 700;
}

/* 리스트 스타일 */
.section02 .right-box .list-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}
.section02 .right-box .list-wrap li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
}
.section02 .right-box .list-wrap li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #555;
}
.section02 .right-box .list-wrap li:last-child {
    margin-bottom: 0;
}
/* 기본 초기화 (필요시 기존 폰트/리셋 적용) */


/* Section03 스타일 */
.section03 {
  background-color: #f2f3f4; /* 전체 배경색 */
  padding: 140px 0px;
  font-family: 'Pretendard', sans-serif; /* 사용하시는 폰트로 변경 */
  color: #333;
  transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

}

.section03 .inner {
  max-width: 1170px;
  margin: 0 auto;
}

/* Header */
.section03 .sec-header {
  text-align: center;
  margin-bottom: 90px;
}

.section03 .sec-header h2 {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #111;
   display: inline-block;
    position: relative;
}

.section03 .sec-header h2::before {
  content: '\201C'; /* 왼쪽 큰따옴표(“) 유니코드 */
  position: absolute;
  top: -30px;     /* 상하 위치 미세 조정 */
  left: -110px;    /* 좌우 위치 미세 조정 */
  font-size: 140px;
  font-weight:600;
  color: #d1d6db;
  line-height: 1;
  font-family: sans-serif; /* 폰트에 따라 따옴표 모양이 다르니 필요시 변경하세요 */
}

/* 오른쪽 따옴표 (::after) */
.section03 .sec-header h2::after {
  content: '\201D'; /* 오른쪽 큰따옴표(”) 유니코드 */
  position: absolute;
  top: 20px;      /* 상하 위치 미세 조정 */
  right: -110px;   /* 좌우 위치 미세 조정 */
  font-size: 140px;
  color: #d1d6db;
  line-height: 1;
  font-family: sans-serif; 
}

.section03 .sec-header .subtitle {
  font-size: 29px;
  font-weight:500;
  color: #000;
  margin-bottom: 25px;
}

.section03 .badge {
  display: inline-flex;
  align-items: center;
  background-color: #e1e0e0;
  padding: 20px 42px;
  border-radius: 30px;
  font-size: 21px;
  font-weight: 700;
  color: #1d1d1d;
   position: relative;
}
.section03 .badge strong {
     position: relative;
     display: inline-block;
     z-index: 10;
}
.section03 .badge strong::before {
    position: absolute;
    width: 100%;
    height: 7px;
    background: #cdc8c8;
    content: '';
    margin-top: 19px;
    z-index: -1;
}

.section03 .badge .arrow {
  margin: 0 10px;
  color: #000;
}

.section03 .badge .highlight {
  color: #694242;
  font-weight:700;
}

/* Compare Layout */
.section03 .compare-wrap {
   display: flex;
  align-items: stretch; /* center를 stretch로 변경하면 양쪽 박스 높이가 동일해집니다 */
  justify-content: space-between;
  position: relative;
  margin-bottom: 50px;
  gap: 115px;
   z-index: 1; /* ✨ 추가: 배경 블러가 section03 뒤로 숨지 않게 가둬주는 역할! */
}

/* Common Box Style */
.section03 .box {
  width: calc(50% - 40px); /* 화살표 공간 고려 */
  border-radius: 20px;
  padding: 40px 30px;
}

.section03 .box-head {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  gap: 12px;
}

.section03 .box-head .icon {
  width: 48px;
  height: 48px;
  background-color: #e7e2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  font-family: "Noto Color Emoji", sans-serif;
}

.section03 .box-head h3 {
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 8px;
}

.section03 .box-head p {
  font-size: 16px;
  color: #696969;
}

.section03 .list li {
  padding: 21px 26px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.5;
  /* color: #616161; */
  font-weight:500;
}
.section03 .list li:last-child {
  margin-bottom: 0;
}

/* Left Box (혼자 준비) */
.section03 .box-left {
    background-color: #ece9e9;
  /* 상단 8px 그라데이션 라인 추가 */
  background-image: linear-gradient(to right, #cebb8e, #bfa5a5);
  background-size: 100% 8px;
  background-position: top left;
  background-repeat: no-repeat;
}
.section03 .box-left .list li {
  background-color: rgba(255, 255, 255, .54);
}
.section03 .txt-red {
  color: #9e4c4c;
  font-weight: 700;
  text-decoration: underline;
    text-underline-offset: 4px;
}

/* Center Arrow */
.section03 .center-arrow {
  width: 68px;
  height: 68px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.section03 .center-arrow::after {
  content: '';
  width: 14px;
  height: 14px;
  border-top: 2px solid #888888;
  border-right: 2px solid #888888;
  transform: rotate(45deg);
  margin-left: -4px;
}

/* Right Box (나무 컨설팅) */
.section03 .box-right {
   position: relative; 
  background-color: #fff;
  background-image: linear-gradient(to right, #2db8ff, #aadc46); /* 상단 선 색상 */
  background-size: 100% 8px;
  background-position: top left;
  background-repeat: no-repeat;

}

/* ⭐ 두번째 박스 뒤 색상있는 백그라운드 이미지 처리 영역 ⭐ */
.section03 .box-right::before {
  content: '';
  position: absolute;
  /* 박스 바깥으로 살짝 튀어나오게 영역을 잡습니다 */
  top: -15px;    
  left: -15px;   
  right: -15px;  
  bottom: -15px; 
  
  /* 1. 배경 색상 (좌상단에서 우하단으로 파랑->초록->노랑으로 변함) */
  background: linear-gradient(135deg, #2db8ff, #42dc9d, #f0f812); 
  
  /* 2. 하이라이트! 블러 효과로 이미지를 쓴 것처럼 부드럽게 퍼지게 만듭니다 */
  filter: blur(20px); 
  
  border-radius: 5px; 
  z-index: -1; /* 흰색 박스 뒤로 배치 */
  
  /* 3. 투명도 조절 (너무 진하면 이 값을 0.4 ~ 0.5 정도로 낮추시면 됩니다) */
  opacity: 0.3; 
}

.section03 .box-right .box-head .icon {
  background-color: #e4edfa;
}

.section03 .box-right .list li {
  background-color: #f4f7fb;
}

.section03 .txt-blue {
  color: #2b509f;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Footer */
.section03 .sec-footer {
  text-align: center;
  font-size:22px;
  line-height: 1.6;
  color: #303030;
  padding-top: 34px;
}

.section03 .sec-footer .underline {
     position: relative;
     display:inline-block;
     font-weight:700;
}
.section03 .sec-footer .underline::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    content: '';
    margin-top: 30px;
}
/* 기본 초기화 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Section04 배경 및 기본 설정 */
.section04 {
  /* 준비하신 배경 이미지 경로를 여기에 넣어주세요 */
  background-image: url('../img/landing08/section04_bg.jpg'); 
  background-color: #2a1b38; /* 이미지 로딩 전 임시 배경색 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 140px 0px;
  text-align: center;
  overflow: hidden;
  transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

}



/* 상단 타이틀 영역 */
.section04 .sec-header {
  margin-bottom: 100px;
}

.section04 .sec-header h2 {
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.section04 .gradient-text {
  background: linear-gradient(to right, #d1a8fb, #fba175);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section04 .subtitle {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.5px;
}

.section04 .subtitle .light-purple {
  color: #dbc9fe;
}

.section04 .subtitle .underline {
     position: relative;
     display:inline-block
}
.section04 .subtitle .underline::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .5);
    content: '';
    margin-top: 36px;
}

/* ⭐ 그래프 외부 래퍼 및 흰색 반투명 링 ⭐ */
.section04 .chart-wrap {
  position: relative;
  width: 650px;
  height: 650px;
  margin: 0 auto;
  border-radius: 50%;
  /* 바깥쪽 흰색 투명도 링 만들기 */
  box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.05); 
}

/* 실제 그래프 원형 영역 */
.section04 .chart {
    position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* border: 4px solid #111;  */
}

/* 그래프 배경 색상 (Conic Gradient) */
.section04 .chart-visual {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: conic-gradient(
    #fca311 0deg 60deg,      
    #f9df14 60deg 120deg,    
    #00bbf0 120deg 180deg,   
    #00a896 180deg 240deg,   
    #c41e82 240deg 300deg,   
    #ef5b25 300deg 360deg    
  );
  border-radius: 50%; /* ✨ 추가: 배경색이 밖으로 삐져나오지 않게 둥글게 깎아줌 */
  z-index: 1;
}

/* 그래프 구분선 (방사형 라인) */
.section04 .line {
  position: absolute;
  top: 0; left: calc(50% - 2px);
  width: 5px; height: 50%;
  background-color: #111;
  transform-origin: bottom center;
  z-index: 2;
  pointer-events: none; /* 마우스 간섭 방지 */
}

/* 중앙 원 */
.section04 .center-circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  
  /* ✨ 바깥쪽 투명한 흰색 원 테두리 추가 ✨ */
  /* 순서대로: x축, y축, 흐림 정도(0으로 줘서 선명하게), 테두리 두께, 색상 */
  box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.15); 
}
.section04 .center-circle::before {

}

.section04 .center-circle img {
  margin-bottom: 8px;
}

/* ⭐ 파이 조각 (Hover 및 말풍선 트리거 영역) ⭐ */
.section04 .slice-wrap {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10;
  /* ✨ 추가: 투명한 사각형 전체 영역은 마우스를 인식하지 않고 통과시키도록 설정! */
  pointer-events: none; 
}

/* 정확히 60도 부채꼴 모양의 클릭/호버 영역 */
.section04 .wedge-hover-area {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  
  /* ✨ 수정: 60도를 완벽하게 잘라내는 정밀한 수학 공식(다각형)으로 깎아냄 */
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 21.13%);
  cursor: pointer;
  
  /* ✨ 추가: 오직 잘려진 이 부채꼴 영역만 마우스를 인식하도록 설정! */
  pointer-events: auto; 
}

/* 마우스 올렸을 때 조각이 살짝 밝아지는 효과 */


/* 텍스트 앵커 (조각의 정중앙에 텍스트를 배치하기 위한 회전 장치) */
.section04 .content-anchor {
  position: absolute;
  top: 50%; left: 50%;
  /* 30도를 돌려서 중앙을 맞추고, 바깥쪽(위쪽)으로 밀어냅니다 */
  transform: rotate(30deg) translateY(-210px); 
  width: 0; height: 0;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; /* 텍스트가 호버 영역을 가리지 않도록 방지 */
}

/* 텍스트 본체 (다시 역회전시켜서 글씨가 정방향으로 보이게 함) */
.section04 .content-inner {
  position: absolute;
  text-align: center;
  white-space: nowrap;
}

.section04 .text {
  color: #111;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

/* ⭐ 말풍선 (Tooltip) 디자인 ⭐ */
.section04 .tooltip {
  position: absolute;
  bottom: calc(100% + 20px); /* 텍스트와의 최적의 간격 */
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  width: 260px; /* 텍스트 가독성이 가장 좋은 너비 */
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px 24px 20px;
  
  /* 디자인 포인트 1: 아주 은은한 테두리와 깊이감 있는 다중 그림자 (Premium 무드) */
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  
  opacity: 0;
  visibility: hidden;
  
  /* 디자인 포인트 2: 나타날 때 살짝 탄력 있게 튕기는 애니메이션 (Bouncing Effect) */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  
  text-align: left;
  z-index: 100;
  white-space: normal; 
}

/* 말풍선 아래쪽 뾰족한 꼬리 (삼각형) */
.section04 .tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 9px 9px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

/* 말풍선 제목 (h4) */
.section04 .tooltip h4 {
  font-size: 17px;
  font-weight: 800; /* 너무 두껍지 않게 세련된 굵기 */
  color: #111;
  margin-bottom: 8px; /* 본문과의 간격 좁혀서 밀도감 상승 */
  line-height: 1.3;
}

/* 말풍선 본문 설명 (p) */
.section04 .tooltip p {
  font-size: 15px;
  font-weight: 400;
  color: #666; /* 제목과 시각적 대비를 주기 위해 부드러운 그레이톤 사용 */
  line-height: 1.5;
  word-break: keep-all; /* 한국어 단어가 중간에 잘리지 않게 보호 */
  margin: 0;
}
/* 마우스 올린 파이 조각이 무조건 맨 위로 오도록 처리 (말풍선 겹침 방지) */
.section04 .slice-wrap:hover {
  z-index: 20; 
}
.section04 .slice-wrap:hover .tooltip {
  opacity: 1;
  visibility: visible;
  /* 아래에서 위로 살짝 올라오며 나타남 */
  transform: translateX(-50%) translateY(0); 
}
/* 공통 초기화 (필요시 사용) */

/* Section05 배경 및 기본 설정 */
.section05 {
  padding: 120px 20px;
  /* 우측에 여학생이 있는 전체 배경 이미지 경로를 넣어주세요 */
  background-image: url('../img/landing08/section05_bg.jpg'); 
  background-color: #f7f7f7; /* 배경 이미지 로드 전 임시 컬러 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Pretendard', sans-serif;
    transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;
}


/* 상단 타이틀 */
.section05 .sec-header {
  text-align: center;
  margin-bottom: 70px;
}

.section05 .sec-header h2 {
  font-size: 52px;
  font-weight: 800;
  color: #111;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

.section05 .sec-header p {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.section05 .sec-header p .highlight {
  color: #b55f39; /* 이미지 상의 브라운 계열 컬러 추출 */
  font-weight:700;
   position: relative;
   display:inline-block
}
.section05 .sec-header p .highlight::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #daaf96;
    content: '';
    margin-top: 36px;
}

/* 4개의 카드 레이아웃 */
.section05 .card-wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 70px;
}

.section05 .card {
  width: calc(25% - 15px);
  border-radius: 20px;
  overflow: hidden; /* 이미지와 캡션의 바깥쪽 모서리를 둥글게 잘라냄 */
  display: flex;
  flex-direction: column;
}

/* 카드 이미지 영역 */
.section05 .card .img-box {
  width: 100%;
  height: 297px; /* 이미지 비율에 맞춰 높이 조절 */
  background-color: #e5e5e5; /* 임시 배경색 */
  overflow: hidden; 
}

.section05 .card .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-in-out; 
}
.section05 .card:hover .img-box img {
  /* 1.08배 확대 (원하시는 만큼 숫자를 조절해 보세요. 예: 1.05 ~ 1.1) */
  transform: scale(1.08); 
}
/* 카드 캡션 영역 */
.section05 .card .caption {
  background-color: #eae4df; /* 요청하신 백그라운드 컬러 */
  padding: 20px 20px;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
  flex-grow: 1; /* 글줄 수가 달라도 4개 카드의 세로 길이를 동일하게 맞춤 */
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.5px;
}

/* 하단 텍스트 */
.section05 .sec-footer {
  text-align: center;
}

.section05 .sec-footer p {
  color: #373737; /* 요청하신 텍스트 컬러 */
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* 텍스트 그라데이션 및 밑줄 효과 */
.section05 .gradient-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #d1a8fb, #fba175);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 글자가 잘리는 현상을 방지하기 위해 padding 추가 */
  padding-bottom: 2px; 
  font-weight:800;
}

/* 그라데이션 텍스트 전용 밑줄 (가상요소 사용) */
.section05 .gradient-text::after {
  content: '';
  position: absolute;
  margin-top: 40px;
  left: 0;
  width: 100%;
  height: 5px; /* 밑줄 두께 */
  background: linear-gradient(
  to right, 
  rgba(209, 168, 251, 0.4), /* #d1a8fb의 80% 투명도 */
  rgba(251, 161, 117, 0.4)  /* #fba175의 80% 투명도 */
);
}
/* =========================================
   [Namu Module] 전역 변수 설정
   ========================================= */
.nm-landing-wrap {
  --nm-bg-light: #f8fafc;
  --nm-bg-white:rgba(255, 255, 255, .7);
  --nm-text-main: #111111;
  --nm-text-sub: #000;
  --nm-text-gray: #888888;
  
  --nm-c-pink: #fff; --nm-bg-pink: #c13394;
  --nm-c-blue: #f7f7fd; --nm-bg-blue: #605ee2;
  --nm-c-green: rgb(245, 255, 252); --nm-bg-green: #2abc8a;
  --nm-c-orange: #fff8f3; --nm-bg-orange: #e2905e;
  --nm-c-blue2: #5089fa;

  font-family: 'Pretendard', sans-serif;
  color: var(--nm-text-main);
  line-height: 1.5;
  word-break: keep-all;
  overflow: hidden;
}

/* 글로벌 태그 충돌 방지용 초기화 */
.nm-landing-wrap * {
    box-sizing: border-box;
}
.nm-landing-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nm-landing-wrap a {
    text-decoration: none;
}
.nm-landing-wrap h2,
.nm-landing-wrap h3,
.nm-landing-wrap h4,
.nm-landing-wrap p {
    margin: 0;
    padding: 0;
}

/* 유틸리티 클래스 */
.nm-bg-light {
    background-color: var(--nm-bg-light);
    
}
.nm-bg-white {
    background-color: var(--nm-bg-white);
}
.nm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 140px 20px 160px;
}
.nm-mt-40 {
    margin-top: 50px !important;
}

/* =========================================
   공통 헤더 (.nm-sec-header)
   ========================================= */
.nm-sec-header {
    text-align: center;
    margin-bottom: 86px;
}
.nm-sec-header h2 {
    font-size: 52px;
    font-weight: 800;
    color: #111;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}
.nm-sec-header p {
    font-size: 26px;
    font-weight: 500;
    color: var(--nm-text-sub);
    line-height: 1.5;
    letter-spacing: -0.5px;
}
.nm-underline-black {
    position: relative;
    /* display: inline-block; font-weight: 800; color: #111; 
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;  */
    display: inline-block;
}
.nm-underline-black::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    content: '';
    margin-top: 35px;
}
/* =========================================
   그리드 시스템 (.nm-grid-3, .nm-grid-4)
   ========================================= */
.nm-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.nm-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
section.section07 {
    background-image: url('../img/landing08/section07_bg.png');
    background-position: 50% 70%;
    background-repeat: no-repeat;
    padding-bottom: 70px;
    transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

}
section.section08 {
    background-color: #dfe5ea;
    transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

    

}
section.section09 {
      transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

}
section.section10 {
    background: #f3f4f6;
    transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;

}
/* =========================================
   하얀색 카드 (.nm-white-card)
   ========================================= */
.nm-white-card {
    background: var(--nm-bg-white);
    border-radius: 24px;
    padding: 30px 30px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
.nm-white-card .nm-icon-wrap {
    margin-bottom: 20px;
    font-family: "Noto Color Emoji", sans-serif;
    background: #ddd;
    display:inline-block;
    width: 56px;
    height: 52px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .4em;
    line-height: 0;
    background: #fdf7f2;
    font-size:26px;
}
.nm-white-card:nth-child(2) .nm-icon-wrap {
    background: #eff6ff;
}
.nm-white-card:nth-child(3) .nm-icon-wrap {
    background: #f3f0ff;
}
.nm-white-card h4 {
    font-size: 23px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    border-bottom: 1px #ddd solid;
    padding-bottom: 12px;
    margin-bottom: 20px;
    letter-spacing: -1px;
  
}
.section07 h4 {
    border: 0;
    margin-bottom: 2px;
}
.nm-white-card p {
    font-size: 16px;
    font-weight: 400;
    color: #787878;
    line-height: 1.6;
}

/* Sec 07: 글로우 효과 (다중 그림자로 깔끔하게 구현) */
.nm-glow-card {
    position: relative;
    
}

/* =========================================
   로드맵 카드 & 화살표 (Sec 08)
   ========================================= */
.nm-roadmap-card {
    padding: 40px 30px;
    position: relative;
}
.nm-roadmap-card:nth-child(1) .nm-check-list li.nm-active {
    color: #c13394;
    font-weight:700;
}
.nm-roadmap-card:nth-child(2) .nm-check-list li.nm-active {
    color: #605ee2;
    font-weight:700;
}
.nm-roadmap-card:nth-child(3) .nm-check-list li.nm-active {
    color: #2abc8a;
    font-weight:700;
}
.nm-roadmap-card:nth-child(4) .nm-check-list li.nm-active {
    color: #e2905e;
    font-weight:700;
}
.nm-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
  
}
.nm-tag-pink {
    background: var(--nm-bg-pink);
    color: var(--nm-c-pink);
}
.nm-tag-blue {
    background: var(--nm-bg-blue);
    color: var(--nm-c-blue);
}
.nm-tag-green {
    background: var(--nm-bg-green);
    color: var(--nm-c-green);
}
.nm-tag-orange {
    background: var(--nm-bg-orange);
    color: var(--nm-c-orange);
}

.nm-check-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: #434343;
}
.nm-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    font-weight: 800;
    color: #cbd5e1;
}
.nm-check-list li.nm-active {
    font-weight: 600;
    color: #111;
}
.nm-check-pink.nm-active::before {
    color: var(--nm-c-pink);
}
.nm-check-blue.nm-active::before {
    color: var(--nm-c-blue);
}
.nm-check-green.nm-active::before {
    color: var(--nm-c-green);
}
.nm-check-orange.nm-active::before {
    color: var(--nm-c-orange);
}

/* 원 안의 삼각형 화살표 */
.nm-with-arrows > div:not(:last-child)::after {
    font-family: 'bootstrap-icons';
    content: '\F285';
    position: absolute;
    top: 50%;
    right: -36px;
    transform: translateY(-50%);
    width: 47px;
    height: 47px;
    background: #d6dadf;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 10;
}

/* =========================================
   그라데이션 컬러 카드 (.nm-color-card) (Sec 09, 10, 11)
   ========================================= */
section.section10 .nm-color-card{
    padding: 30px 30px;
    /* background-image: url('../img/landing08/sec10_bg.png');
    background-repeat: no-repeat;
    background-size: contain; */
    position: relative;
    
}
section.section10 .nm-color-card::before{
    content: "";
     position: absolute;
     background: url('../img/landing08/sec10_bg.png');
    background-repeat: no-repeat;
    background-position: 100% 0%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.section09 {
    transition: 1s ease-out; 
transform: translateY(20px);
 transition-delay: 0.2s;


}
section.section09 .nm-color-card, 
section.section11 .nm-color-card{ 
    height: 362px;
    padding: 50px 35px;
}
.nm-color-card {
    border-radius: 24px;
    padding: 30px 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    min-height: 248px;
}
.nm-grad-blue-dark {
    background: #5089fa;
}
.nm-grad-green-dark {
    background: #00caa4
}
.nm-grad-cyan {
    background: #00bfe9;
}
.nm-grad-purple-dark {
    background: #a574ed
}

.nm-grad-sat {
    
    background: linear-gradient(135deg, #7cb2f4, #7e7cf4);
    
}
.nm-grad-mcat {
    background: linear-gradient(135deg, #d390f5, #e05ef7);
}
.nm-grad-toefl {
    background: linear-gradient(135deg, #f4c07c, #f4957c);
}

.nm-grad-app-blue {
    background: #5089fa
}
.nm-grad-app-green {
    background: #00caa4;
}
.nm-grad-app-cyan {
    background: #00bfe9
}
.nm-grad-app-purple {
    background: #a574ed;
}

.nm-color-card .nm-small-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 3em;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
}
section.section11 .nm-grid-4 .nm-color-card:nth-child(2) .nm-small-tag {
    background: #00a183;
}
section.section11 .nm-grid-4 .nm-color-card:nth-child(3) .nm-small-tag {
    background: #028ac2;
}
section.section11 .nm-grid-4 .nm-color-card:nth-child(4) .nm-small-tag {
    background: #8f5cdb;
}

.nm-color-card.nm-grad-blue-dark .nm-small-tag {
    background: #2c6be7;
}
.nm-color-card.nm-grad-green-dark .nm-small-tag {
    background: #00a183;
}
.nm-color-card.nm-grad-cyan .nm-small-tag {
    background: #028ac2;
}
.nm-color-card.nm-grad-purple-dark .nm-small-tag {
    background: #8f5cdb;
}
.nm-color-card .nm-small-tag.type-text {
    background: #5090de;
    color: #dfe8fe;
    padding: 0;
    margin-bottom: 12px;
    font-size: 14px;
    opacity: 0.9;
    padding: 6px 16px;
}
.nm-grid-3 .nm-color-card:nth-child(2) .nm-small-tag.type-text {
    background: #b75ae0;
    color: #f1d0ff;
}
.nm-grid-3 .nm-color-card:nth-child(3) .nm-small-tag.type-text {
    background: #f5901c;
    color: #ffebd5;
}
.nm-color-card h4 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 35px;
    color: #fff;
   font-family: 'Paperlogy-En';
}
.nm-color-card .nm-divider {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,0.8);
    margin-bottom: 35px;
}
section.section10 .nm-color-card p {
    font-size:20px;
    font-weight:600;
    margin-top: 10px;
     position: relative;
     display:inline-block

}
section.section10 .nm-color-card p::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .6);
    content: '';
    margin-top: 30px;
}

.nm-color-card p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}
.nm-color-card .nm-bg-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 40px;
}

/* 점수 카드 (Sec 10) */
.nm-score-card {
    padding: 45px 35px;
}
.nm-score-card .nm-score {
    font-size: 46px;
    font-weight: 900;
    margin-bottom: 0;
    line-height: 1.1;
    letter-spacing: 2px;
      font-family: 'DM Sans', sans-serif;
      color: #fff;

}
.nm-score-card .nm-score span {
    font-size: 32px;
    font-weight: 600;
}
.nm-score-card .nm-watermark {
    position: absolute;
    bottom: 17px;
    right: 30px;
    font-size: 51px;
    font-weight: 100;
    opacity: 0.3;
    line-height: 1;
    /* letter-spacing: -3px; */
    font-family: 'Paperlogy-en';
}

/* 작은 아이콘 카드 (Sec 10) */
.nm-feat-card {
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    padding: 35px 25px;
}
.nm-feat-card .nm-icon-circle {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 24px;
}
.nm-feat-card h4 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: 'Paperlogy-en';
}
.nm-feat-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--nm-text-gray);
}
section.section10  .nm-feat-card h4 {
    border: 0;
}
/* =========================================
   프로세스 플로우 박스 (.nm-process-box)
   ========================================= */
.nm-process-box {
    background: linear-gradient(135deg, #f3f8fa, #e3f2f9);
    border-radius: 24px;
    margin-top: 50px;
    display: flex;
    align-items: stretch;
    
}
.nm-process-flow {
    flex: 1;
    padding: 50px 70px;
}
.nm-process-flow h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #111;
}

.nm-text-grad-allinone {
    background: linear-gradient(to right, #80a5f9, #72e79e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nm-text-grad-app {
    background: linear-gradient(to right, #80a5f9, #72e79e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nm-steps-wrap {
    display: flex; justify-content: space-between; position: relative; text-align: left;
}

/* 원본처럼 굵은 검정 네모 점선 만들기 */
.nm-steps-wrap .nm-dashed-line {
     position: absolute; 
  top: 15px; /* 원의 중앙 높이 (36px의 절반) */
  left: 0; /* 1번 원의 중앙에서 시작 */
  width: 96%; /* 4번 원의 중앙까지만 선이 가도록 완벽한 비율(75%) 설정 */
  height: 1px; 
  z-index: 1;
    background-image: linear-gradient(to right, #c2d1da 50%, transparent 50%) !important;
    background-size: 14px 4px;
    background-repeat: repeat-x;
}
.nm-thick-dash {
    background-image: linear-gradient(to right, #0f172a 50%, transparent 50%) !important;
}

.nm-steps-wrap .nm-step {
    position: relative; z-index: 2; flex: 1; 
}
/* 원(숫자)을 왼쪽으로 정렬 (margin: 0 auto 제거) */
.nm-steps-wrap .nm-circle {
  width: 29px; height: 29px; background: #5089fa; color: #ebf1ff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; 
  margin: 0 0 22px 0; /* 왼쪽 정렬을 위해 수정된 마진 */
  font-weight: 800; font-size: 15px;
}

/* 영문 텍스트 & 파란색 점(•) 불릿 기호 추가 */
.nm-steps-wrap .nm-en { 
  position: relative; font-size: 15px; font-weight: 500; color: var(--nm-text-gray); 
  margin-bottom: 6px; padding-left: 18px; 
  font-family: 'Poppins', 'Noto Sans KR', sans-serif;
}
.nm-steps-wrap .nm-en::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #5089fa; /* 파란색 점 컬러 */
  font-size: 18px;
  line-height: 1;
}
.nm-steps-wrap .nm-ko {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* 우측 결과 박스 (Sec 09) */
.nm-process-result {
    width: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.nm-outcome-box {
    background: #fff;
    width: 100%;
    padding: 20px 0 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: left;
    border: 1px #cddbe7 solid;
}
.nm-outcome-box .nm-star {
    font-size: 15px;
    font-weight: 500;
    color: #8d8d8d;;
    margin-bottom: 22px;
    display: block;
    font-family: "Noto Color Emoji", sans-serif;
    border-bottom: 1px #ebf2f7 solid;
    padding-bottom: 12px;
    padding-left: 25px;
    padding-right: 25px;
}
.nm-outcome-box p {
    font-size: 16px;
    font-weight: 700;
    color: #444;
    line-height: 1.5;
    margin-bottom: 24px;
    padding-left: 25px;
    padding-right: 25px;
}
.nm-btn-blue {
    display: block;
    background: #5089fa;
    color: #fff;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 17px;
    margin-left: 25px;
    margin-right: 25px;
}

/* Sec 11 독립적인 Flow Box */
.nm-app-flow-box {
    display: block;
    background: #f0f7ff;
    padding: 50px;
    border: none;
}
.nm-app-flow-box .nm-flow-title {
   font-size: 26px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #111;
}
.flex {
    display: flex;
}

/* section12 */
.section12 {
    width: 100%;
    min-height: 830px;
    background-position: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 100px 20px;
    box-sizing: border-box;
    background: url('../img/landing08/section12_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex; /* centering을 위해 flex 추가 */
    flex-direction: column;
}

.section12 .content-box {
    width: 100%;
    max-width: 900px;
}

.section12 .content-box .main-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 25px;
    color: #fff;
}

.section12 .content-box .sub-desc {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #f0f0f0;
}

.section12 .content-box .vertical-line {
    width: 1px;
    height: 45px;
    background-color: #fff;
    margin: 0 auto 40px auto;
}

.section12 .content-box .quote-wrap {
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.section12 .content-box .quote-wrap::before,
.section12 .content-box .quote-wrap::after {
    font-size: 120px;
    font-weight: 700;
    line-height: 0.8;
    color: #fff;
}

.section12 .content-box .quote-wrap::before {
   content: '\201C';
    font-family: sans-serif
}

.section12 .content-box .quote-wrap::after {
    content: '\201D';
    font-family: sans-serif;
    margin-top: 70px;
}

.section12 .content-box .quote-wrap .quote-text {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.5;
    padding-top: 5px;
    color: #fff;
}

.section12 .content-box .quote-wrap .quote-text .highlight {
    display: inline-block;
     font-size: 42px;
    font-weight: 800;
    color: rgba(254,249,195);
     position: relative;
     display:inline-block;
     line-height: 50px;
}
.section12 .content-box .quote-wrap .quote-text .highlight::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(254,249,195, .9);
    content: '';
    margin-top: 50px;
}
@media (max-width: 1440px) {

 .section01 .flex .left-box .content img {
        width: 90%;
    }
        h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
    .section02 .left-box {
    width: 420px;
    position: relative;
}
.section02 .left-box .sub-tit {
    font-size: 24px;
    font-weight: 700;
    text-underline-offset: 6px;
    margin-bottom: 15px;
     position: relative;
     display:inline-block;
}
.section02 .left-box .sub-tit::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    content: '';
    margin-top: 30px;
}
  .section02 .sec_box {
        background-position: -20% 100%; /* 배경 이미지 위치 조정 */
        margin-bottom: 80px;
        background-size: 50%;
    }
    .section02 .sec_box.medi {
     border-bottom: 0;
     padding-bottom: 80px;
     margin-bottom: 0px;
     /* background-position: 0px 100%; */
     background-size: 40%;
     background-repeat: no-repeat;
 
}
}
/* 태블릿 및 작은 모니터 (max-width: 1140px) */
@media (max-width: 1140px) {
    .visual h1.visual-title {
        font-size: 52px; /* 68px -> 52px 감소 */
        line-height: 1.1;
        margin-bottom: 40px;
    }
    
    .visual .visual-top-desc {
        margin-bottom: 35px;
        margin-top: 35px;
    }

    .visual .visual-top-desc p.strong-text {
        font-size: 19px;
    }

    .visual .visual-top-desc p:not(.strong-text) {
        font-size: 22px;
    }
     .section01 {
        padding-top: 80px;
    }

    .section01 .container {
        padding-bottom: 100px;
    }

    .section01 h2 {
        font-size: 42px; /* 54px -> 42px */
        margin-bottom: 40px;
    }

    .section01 h2 .highlight::before {
        margin-top: 48px; /* 폰트 크기에 맞춰 선 위치 조정 */
    }

    .section01 .quote-area .quote-text {
        font-size: 28px; /* 37px -> 28px */
        padding: 0 40px; /* 따옴표 여백 확보 */
    }

    /* 따옴표 크기 및 위치 조정 (화면 밖으로 나가는 현상 방지) */
    .section01 .quote-area .quote-text::before,
    .section01 .quote-area .quote-text::after {
        font-size: 100px;
    }

    .section01 .quote-area .quote-text::before {
        left: -40px;
        top: -10px;
    }

    .section01 .quote-area .quote-text::after {
        right: -40px;
        bottom: -80px;
    }

    .section01 .flex {
        height: auto; /* 고정 높이 해제 */
    }

    .section01 .flex .right-box .content .main-title {
        font-size: 32px; /* 63px -> 48px */
    }
    .section01 .flex .right-box .content .sub-title span {
    font-size: 19px;
}
    h2 { 
        font-size: 36px; /* 62px -> 48px */
    }
    h2 small { 
        font-size: 22px; 
    }

    .section02 {
        padding: 100px 0 0;
    }

    .section02 .sec_box {
        background-position: -20% 100%; /* 배경 이미지 위치 조정 */
        margin-bottom: 80px;
        background-size: 50%;
    }
    .section02 .sec_box.medi {
        /* background: none; */
        margin-bottom: 0;
        padding-bottom: 0;
        background-position: 0% 100%; /* 배경 이미지 위치 조정 */
    }

    .section02 .container .track-item {
        gap: 40px; /* 간격 축소 */
        margin-bottom: 80px;
    }

    .section02 .left-box {
        width: 40%; /* 고정폭 620px 해제 및 비율 조정 */
    }

    .section02 .left-box .sub-tit {
        font-size: 19px;
        margin-bottom: 05px;
    }
    
    .section02 .left-box .sub-tit::before {
        margin-top: 24px; /* 폰트 크기에 맞춰 선 위치 조정 */
    }

    .section02 .left-box .badge {
        font-size: 20px;
        padding: 12px 25px;
        margin: 30px 0;
    }

    .section02 .right-box .info-tit {
        font-size: 19px;
    }

    .section02 .right-box .desc-box {
        padding: 25px 30px;
        font-size: 16px;
    }
     .section03 {
        padding: 100px 0;
    }

    .section03 .sec-header h2 {
        font-size: 42px;
    }

    /* 따옴표 크기 및 위치 조정 */
    .section03 .sec-header h2::before,
    .section03 .sec-header h2::after {
        font-size: 100px;
    }
    .section03 .sec-header h2::before { left: -70px; top: -20px; }
    .section03 .sec-header h2::after { right: -70px; top: 10px; }

    .section03 .sec-header .subtitle {
        font-size: 24px;
    }

    .section03 .compare-wrap {
        gap: 80px; /* 간격 축소 */
    }

    .section03 .box-head h3 {
        font-size: 20px;
    }
      .section04 {
        padding: 100px 0;
    }

    .section04 .sec-header {
        margin-bottom: 70px;
    }

    .section04 .sec-header h2 {
        font-size: 40px;
    }

    .section04 .subtitle {
        font-size: 22px;
    }

    /* 그래프 크기 축소 (650px -> 500px) */
    .section04 .chart-wrap {
        width: 500px;
        height: 500px;
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.05);
    }

    .section04 .center-circle {
        width: 170px;
        height: 170px;
        font-size: 15px;
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.15);
    }

    /* 텍스트 위치 재조정 (반지름이 줄어들었으므로 위로 올리는 수치 변경) */
    .section04 .content-anchor {
        transform: rotate(30deg) translateY(-160px); 
    }

    .section04 .text {
        font-size: 17px;
    }

    .section04 .tooltip {
        width: 220px;
        padding: 12px 18px;
    }
    .section05 {
        padding: 80px 20px;
    }

    .section05 .sec-header h2 {
        font-size: 40px;
    }

    .section05 .sec-header p {
        font-size: 22px;
    }

    /* 카드 2열 배치로 변경 */
    .section05 .card-wrap {
        flex-wrap: wrap;
        gap: 20px;
    }

    .section05 .card {
        width: calc(50% - 10px); /* 2열 배치 */
    }

    .section05 .sec-footer p {
        font-size: 26px;
    }
     /* 4열 -> 2열 변경 */
    .nm-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* 3열 -> 2열 변경 (한 개는 아래로) */
    .nm-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* 로드맵 카드 사이의 화살표 제거 (열이 바뀌면 위치가 어긋남) */
    .nm-with-arrows > div:not(:last-child)::after {
        display: none;
    }

    /* 섹션 09 프로세스 박스 조정 */
    .nm-process-box {
        flex-direction: column; /* 가로에서 세로로 */
    }
    .nm-process-flow {
        padding: 40px;
    }
    .nm-process-result {
        width: 100%; /* 우측 박스 전체 너비로 */
        padding: 0 40px 40px;
    }
    .nm-outcome-box {
        margin: 0;
    }

    /* 섹션 09, 11 컬러 카드 높이 고정 해제 */
    section.section09 .nm-color-card, 
    section.section11 .nm-color-card {
        height: auto;
        min-height: 280px;
    }
     .section12 {
        min-height: 700px; /* 높이 약간 축소 */
        padding: 80px 40px;
    }

    .section12 .content-box .main-title {
        font-size: 36px; /* 42px -> 36px */
    }

    .section12 .content-box .sub-desc {
        font-size: 22px; /* 26px -> 22px */
    }

    .section12 .content-box .quote-wrap .quote-text {
        font-size: 34px; /* 42px -> 34px */
    }
    
    .section12 .content-box .quote-wrap .quote-text .highlight {
        font-size: 34px;
        line-height: 1.3;
    }

    .section12 .content-box .quote-wrap::before,
    .section12 .content-box .quote-wrap::after {
        font-size: 90px; /* 따옴표 크기 축소 */
    }
    
}

/* 모바일 (max-width: 768px) */
@media (max-width: 768px) {
    .visual {
        height: 70%;
        padding: 0; /* 모바일에서 높이가 너무 작아지지 않게 패딩 부여 */
        background-position: 60% 50%;
    }

    .visual .visual-top-desc {
        padding-left: 15px; /* 간격 축소 */
        margin-bottom: 30px;
        margin-top: 0;
    }

    .visual .visual-top-desc::before {
        width: 4px; /* 선 굵기 조절 */
    }

    .visual .visual-top-desc p.strong-text {
        font-size: 16px; /* 폰트 축소 */
    }

    .visual .visual-top-desc p:not(.strong-text) {
        font-size: 16px; /* 폰트 축소 */
    }

    .visual h1.visual-title {
        font-size: 24px; /* 모바일에 맞게 대폭 축소 */
        line-height: 1.2;
        font-weight:700;
        margin-bottom: 30px;
        word-break: keep-all; /* 한글 단어 끊김 방지 */
    }

    .visual .visual-eng-desc p {
        font-size: 13px; /* 영문 설명 축소 */
        line-height: 10px;
    }
     .section01 {
        padding-top: 60px;
    }

    .section01 .container {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .section01 h2 {
        font-size: 30px;
        margin-bottom: 30px;
        word-break: keep-all;
    }

    .section01 h2 .highlight::before {
        margin-top: 35px;
    }

    .section01 .quote-area .quote-text {
        font-size: 20px;
        padding: 0 20px;
        margin-top: 10px;
    }

    /* 모바일 따옴표 최적화 */
    .section01 .quote-area .quote-text::before,
    .section01 .quote-area .quote-text::after {
        font-size: 60px;
        opacity: 0.5; /* 너무 크면 본문을 가리므로 투명도 조절 */
    }

    .section01 .quote-area .quote-text::before {
        left: -20px;
        top: -15px;
    }

    .section01 .quote-area .quote-text::after {
        right: -20px;
        bottom: -50px;
    }

    /* flex 레이아웃을 세로로 변경 */
    .section01 .flex {
        flex-direction: column;
        height: auto;
    }

    .section01 .flex .box {
        width: 100%;
        padding: 60px 20px; /* 패딩 축소 */
    }

    .section01 .flex .left-box .content .desc {
        font-size: 15px;
    }

    .section01 .flex .right-box .content .sub-title span {
        font-size: 18px;
    }

    .section01 .flex .right-box .content .main-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
     .section01 .flex .left-box .content {
        text-align: center;
        margin: 0 auto;

     }
    .section01 .flex .left-box .content img {
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
     h2 { 
        font-size: 32px; /* 모바일용 크기 */
        line-height: 1.3;
    }
    h2 small { 
        font-size: 18px; 
    }

    .section02 {
        padding: 70px 0;
    }

    .section02 .sec_box {
        background-image: none; /* 모바일에서 배경이 복잡하면 가독성을 위해 제거 (선택사항) */
        padding-bottom: 40px;
        margin-bottom: 60px;
    }
    .section02 .sec_box.medi { 
        background-image: none;
    }

    /* 가로 배치를 세로 배치로 변경 */
    .section02 .container .track-item {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }

    .section02 .left-box {
        width: 100%; /* 전체 너비 사용 */
    }

    .section02 .left-box .sub-tit {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .section02 .left-box .sub-tit::before {
        margin-top: 24px;
    }

    .section02 .left-box .badge {
        font-size: 18px;
        padding: 10px 20px;
        margin: 10px 0;
        text-align: left;
    }

    .section02 .right-box {
        width: 100%;
    }

    .section02 .right-box .info-group {
        margin-bottom: 35px;
    }

    .section02 .right-box .info-tit {
        font-size: 18px;
    }

    .section02 .right-box .info-tit span {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .section02 .right-box .desc-box {
        padding: 20px;
        font-size: 16px;
        line-height: 1.6;
    }

    .section02 .right-box .list-wrap li {
        font-size: 15px;
    }
     .section03 {
        padding: 70px 20px;
    }

    .section03 .sec-header {
        margin-bottom: 40px;
    }

    .section03 .sec-header h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    /* 모바일에서 따옴표 숨기거나 아주 작게 조정 (가로 스크롤 방지) */
    .section03 .sec-header h2::before,
    .section03 .sec-header h2::after {
        font-size: 60px;
        opacity: 0.3;
    }
    .section03 .sec-header h2::before { left: -40px; top: -15px; }
    .section03 .sec-header h2::after { right: -40px; top: 10px; }

    .section03 .sec-header .subtitle {
        font-size: 16px;
    }

    .section03 .badge {
        padding: 15px 25px;
        font-size: 16px;
        flex-wrap: wrap;
        justify-content: center;
        line-height: 1.4;
        border-radius: 3em;
    }
    .section03 .badge strong::before {
    position: absolute;
    width: 100%;
    height: 5px;
    background: #cdc8c8;
    content: '';
    margin-top: 16px;
    z-index: -1;
    display:none;
}

    /* 세로 배치로 변경 */
    .section03 .compare-wrap {
        flex-direction: column;
        gap: 70px; /* 화살표가 들어갈 공간 */
        margin-bottom: 30px;
    }

    .section03 .box {
        width: 100%; /* 전체 너비 */
        padding: 30px 20px;
    }
    .section03 .box-head {
        align-items: flex-start;
        margin-bottom: 12px;
    }
    .section03 .box-left .box-head .icon,
    .section03 .box-right .box-head .icon  { background-color:  transparent;
        margin-top: 7px;
            box-shadow: none;
            width: auto;
            padding: 0;
    }
    .section03 .box-head h3 {
        font-size:18px;
    }
    .section03 .box-head p {
        font-size:15px;
    }

    /* 가운데 화살표를 첫번째 박스 아래로 이동 및 방향 변경 */
    .section03 .center-arrow {
        left: 50%;
        top: auto; /* 기존 중앙 위치 해제 */
        bottom: 49%; /* 첫 번째 박스 아래쪽으로 배치 */
        transform: translateX(-50%); /* 가로 중앙만 유지 */
        width: 48px;
    height: 48px;
    }

    .section03 .center-arrow::after {
        transform: rotate(135deg); /* 오른쪽(45도)에서 아래쪽(135도)으로 회전 */
        margin-left: 0;
        margin-top: -6px; /* 화살표 촉 위치 미세 조정 */
    }

    .section03 .box-right::before {
        /* 모바일에서 블러 효과가 너무 과하면 줄임 */
        top: -10px; left: -10px; right: -10px; bottom: -10px;
        filter: blur(15px);
    }

    .section03 .sec-footer {
        font-size: 17px;
        word-break: keep-all;
    }
    
    .section03 .sec-footer .underline::before {
        margin-top: 24px;
    }

    .section03 .list li {
        font-size: 15px;
        padding: 15px 20px;
    }
     .section04 {
        padding: 70px 0;
        /* 말풍선이 화면 밖으로 나갈 수 있으므로 좌우 패딩 확보 */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 요청하신 폰트 사이즈 적용 */
    .section04 .sec-header h2 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .section04 .subtitle {
        font-size: 16px;
    }
    
    .section04 .subtitle .underline::before {
        margin-top: 24px;
    }

    .section04 .sec-header {
        margin-bottom: 50px;
    }

    /* 그래프 크기 대폭 축소 (500px -> 320px) */
    .section04 .chart-wrap {
        width: 320px;
        height: 320px;
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.05);
    }

    .section04 .center-circle {
        width: 110px;
        height: 110px;
        font-size: 12px;
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.15);
    }
    
    .section04 .center-circle img {
        width: 30px; /* 로고 크기 축소 */
        margin-bottom: 5px;
    }

    /* 텍스트 위치 재조정 */
    .section04 .content-anchor {
        transform: rotate(30deg) translateY(-105px); 
    }

    .section04 .text {
        font-size: 13px;
    }

    /* 말풍선 최적화 (모바일에서는 터치 시 노출) */
    .section04 .tooltip {
        width: 180px; /* 모바일 너비에 맞게 축소 */
        padding: 10px 15px;
        bottom: calc(100% + 10px);
    }

    .section04 .tooltip h4 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .section04 .tooltip p {
        font-size: 12px;
        line-height: 1.4;
    }

    /* 모바일에서는 호버 대신 터치로 동작하므로 말풍선이 겹치지 않게 조절 */
    .section04 .slice-wrap:hover .tooltip {
        transform: translateX(-50%) translateY(-5px);
    }
     .section05 {
        padding: 60px 15px;
        background-position: 70% center; /* 모바일에서 인물 위치 최적화 */
    }

    /* 요청하신 768px 전용 타이틀 스타일 적용 */
    .section05 .sec-header h2 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .section05 .sec-header p {
        font-size: 16px; /* 요청하신 subtitle 16px 적용 */
    }

    .section05 .sec-header p .highlight::before {
        margin-top: 24px; /* 줄어든 폰트에 맞춰 밑줄 위치 조정 */
    }

    .section05 .sec-header {
        margin-bottom: 40px;
    }

    /* 카드 1열 배치로 변경 (가독성 향상) */
    .section05 .card-wrap {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 50px;
    }

    .section05 .card {
        width: 100%;
    }

    .section05 .card .img-box {
        height: 200px; /* 모바일에서 너무 길지 않게 조정 */
    }

    .section05 .card .caption {
        font-size: 18px;
        padding: 15px;
    }

    /* 하단 푸터 텍스트 */
    .section05 .sec-footer p {
        font-size: 19px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .section05 .gradient-text::after {
        height: 3px;
        margin-top: 28px; /* 줄어든 폰트에 맞춰 그라데이션 밑줄 조정 */
    }
    .nm-container {
            padding: 60px 15px 60px;
    }
    section.section07 {
        padding-bottom: 0
    }
      /* 모든 그리드 1열로 변경 */
    .nm-grid-3, .nm-grid-4 {
        grid-template-columns: 1fr;
    }

    /* 타이틀 크기 조정 */
    .nm-sec-header h2 {
        font-size: 26px;
        line-height: 1.3;
        word-break: keep-all;
    }
    .nm-sec-header p {
        font-size: 16px;
    }

    /* 프로세스 단계(Steps) 가로에서 세로로 변경 */
    .nm-steps-wrap {
        flex-direction: column;
        padding-left: 40px; /* 점선 공간 확보 */
        gap: 30px;
    }

    /* 프로세스 점선 세로로 변경 */
    .nm-steps-wrap .nm-dashed-line {
        left: 14px; /* 숫자 원 중앙 위치 */
        top: 0;
        width: 1px;
        height: 100%;
        background-image: linear-gradient(to bottom, #c2d1da 50%, transparent 50%) !important;
        background-size: 1px 12px; /* 세로 점선 간격 */
        background-repeat: repeat-y;
    }

    /* 숫자 원 마진 조정 */
    .nm-steps-wrap .nm-circle {
        margin-left: -40px; /* padding-left 상쇄하여 점선 위에 배치 */
        float: left;
    }
    
    .nm-steps-wrap .nm-en, .nm-steps-wrap .nm-ko {
        padding-left: 10px;
    }

    /* 점수 카드 크기 조정 */
    .nm-score-card {
        padding: 30px 25px;
    }
    .nm-score-card .nm-score {
        font-size: 40px;
    }
    .nm-score-card .nm-watermark {
        font-size: 40px;
        bottom: 10px;
    }

    /* 앱 플로우 박스 패딩 감소 */
    .nm-app-flow-box {
        padding: 30px 20px;
    }
    
    /* 카드 내 폰트 조정 */
    .nm-white-card h4 {
        font-size: 19px;
    }
    .nm-color-card h4 {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .nm-color-card .nm-divider {
        margin-bottom: 20px;
    }
    .nm-sec-header {
        margin-bottom: 60px;
    }
    section.section09 .nm-color-card, section.section11 .nm-color-card {
        padding-top: 35px
    }
        .nm-process-flow {
        padding: 40px 35px 40px
    }
    .nm-steps-wrap .nm-en {
        font-size:14px;
    }
    .nm-steps-wrap .nm-ko {
    font-size: 16px;
    }
        .nm-process-result {
        width: 100%;
        padding: 0 20px 40px;
    }
     .section12 {
        min-height: 600px; /* 모바일 높이 최적화 */
        padding: 60px 20px;
        background-attachment: scroll; /* 모바일 배터리/성능 위해 고정 해제 권장 */
    }

    .section12 .content-box .main-title {
        font-size: 22px; /* 모바일 가독성 크기 */
        line-height: 1.4;
        margin-bottom: 15px;
        word-break: keep-all; /* 한글 단어 단위 끊기 */
    }

    .section12 .content-box .sub-desc {
        font-size: 16px;
        margin-bottom: 20px;
        word-break: keep-all;
    }

    .section12 .content-box .vertical-line {
        height: 20px;
        margin-bottom: 20px;
    }

    /* 모바일 인용구 레이아웃 조정 */
    .section12 .content-box .quote-wrap {
        flex-direction: column; /* 따옴표와 텍스트 세로 배치 고려 */
        gap: 10px;
        justify-content: center;
        align-items: center;
         position: relative;
    }

    .section12 .content-box .quote-wrap::before,
    .section12 .content-box .quote-wrap::after {
        font-size: 50px; /* 따옴표 대폭 축소 */
        height: auto;
        line-height: 1;
        display: block;
         position: absolute;

    }
    .section12 .content-box .quote-wrap::before {
        left: 5px;
        top: 10px;
    }

    .section12 .content-box .quote-wrap::after {
        margin-top: 10px; /* 모바일에서 위로 바짝 붙임 */
        text-align: right;
        right: 5px;
        top: 70px;
    }

    .section12 .content-box .quote-wrap .quote-text {
        font-size: 24px; /* 42px -> 24px */
        line-height: 1.4;
        word-break: keep-all;
    }

    .section12 .content-box .quote-wrap .quote-text .highlight {
        font-size: 22px;
        line-height: 1.4;
    }
    
    /* 하단 강조선 위치 조정 */
    .section12 .content-box .quote-wrap .quote-text .highlight::before {
        margin-top: 28px;
    }
}
@media (max-width: 350px) {
    .section04 .chart-wrap {
        width: 280px;
        height: 280px;
    }
    .section04 .content-anchor {
        transform: rotate(30deg) translateY(-90px);
    }
    .section04 .text {
        font-size: 11px;
    }
     .section05 .sec-footer p {
        font-size: 17px;
    }
    
    .section05 .card .caption {
        font-size: 16px;
    }
      .section12 .content-box .main-title {
        font-size: 22px;
    }
    .section12 .content-box .quote-wrap .quote-text {
        font-size: 20px;
    }
    .section12 .content-box .quote-wrap .quote-text .highlight {
        font-size: 20px;
    }
}
/* .visual, */

/* header,
.quickmenu_wrap,
.right_quick,
.index_06,
.footer {
    display:none;
} */