메인 퍼블 변경

src/main/resources/static/css/main.css

@@ -653,6 +653,7 @@ hr {
 }
 .global-header .container {
   height: 100%;
+  padding: 0;
 }
 .global-header .container .header-content {
   height: 100%;
@@ -6510,7 +6511,7 @@ select.form-control {
 .hero-carousel-container {
   position: relative;
   width: 100%;
-  height: 720px;
+  height: 580px;
   overflow: hidden;
   background-color: #E9F9FF;
 }
@@ -6530,13 +6531,19 @@ select.form-control {
   width: 100%;
   height: 100%;
 }
+@media (min-width: 1280px) {
+  .hero-carousel-track {
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+}
 
 .hero-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 580px;
+  height: 440px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6549,13 +6556,13 @@ select.form-control {
   visibility: visible;
 }
 .hero-slide[data-slide="0"] {
-  background: #E5F8FF;
+  background: #E9F9FF;
 }
 .hero-slide[data-slide="1"] {
-  background: #E5F8FF;
+  background: #E9F9FF;
 }
 .hero-slide[data-slide="2"] {
-  background: #E5F8FF;
+  background: #E9F9FF;
 }
 
 .hero-slide-content {
@@ -6565,18 +6572,12 @@ select.form-control {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 80px;
   position: relative;
   margin: 0 auto;
 }
-@media (min-width: 1440px) {
-  .hero-slide-content {
-    padding: 0 320px;
-  }
-}
 @media (min-width: 1280px) {
   .hero-slide-content {
-    padding: 0 160px;
+    padding: 0 26px;
   }
 }
 @media (max-width: 1024px) {
@@ -6603,6 +6604,7 @@ select.form-control {
   flex-direction: column;
   gap: 46px;
   z-index: 2;
+  width: 593px;
 }
 @media (max-width: 1024px) {
   .hero-text-content {
@@ -6622,9 +6624,9 @@ select.form-control {
 
 .hero-text .hero-subtitle {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 36px;
+  font-size: 32px;
   font-weight: 400;
-  line-height: 1;
+  line-height: 99.94%;
   color: #212529;
   margin: 0 0 12px 0;
 }
@@ -6644,9 +6646,9 @@ select.form-control {
 }
 .hero-text .hero-title {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 50px;
+  font-size: 46px;
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 99.94%;
   color: #000000;
   margin: 0;
 }
@@ -6714,14 +6716,14 @@ select.form-control {
 }
 @media (min-width: 1280px) {
   .hero-image-content {
-    width: 450px;
-    height: 370px;
+    width: 410px;
+    height: 300px;
   }
 }
 @media (max-width: 1024px) {
   .hero-image-content {
-    width: 400px;
-    height: 330px;
+    width: 410px;
+    height: 300px;
   }
 }
 @media (max-width: 768px) {
@@ -6777,9 +6779,9 @@ select.form-control {
 .hero-nav-prev svg {
   transform: rotate(180deg);
 }
-@media (min-width: 1280px) {
+@media (max-width: 768px) {
   .hero-nav-prev {
-    left: 100px;
+    left: 20px;
   }
 }
 @media (max-width: 1024px) {
@@ -6787,18 +6789,18 @@ select.form-control {
     left: 40px;
   }
 }
-@media (max-width: 768px) {
+@media (min-width: 1280px) {
   .hero-nav-prev {
-    left: 20px;
+    left: calc(50vw - 640px - 80px);
   }
 }
 
 .hero-nav-next {
   right: 210px;
 }
-@media (min-width: 1280px) {
+@media (max-width: 768px) {
   .hero-nav-next {
-    right: 100px;
+    right: 20px;
   }
 }
 @media (max-width: 1024px) {
@@ -6806,16 +6808,16 @@ select.form-control {
     right: 40px;
   }
 }
-@media (max-width: 768px) {
+@media (min-width: 1280px) {
   .hero-nav-next {
-    right: 20px;
+    right: calc(50vw - 640px - 80px);
   }
 }
 
 .hero-carousel-indicators {
   position: absolute;
   bottom: 160px;
-  left: 50%;
+  left: calc(50vw - 640px + 72px);
   transform: translateX(-50%);
   display: flex;
   gap: 12px;
@@ -6901,11 +6903,12 @@ select.form-control {
   padding: 0;
   overflow: hidden;
   background: #e9f9ff;
+  height: 314px;
 }
 .api-search-section .search-background {
   position: absolute;
   inset: 0;
-  background-image: url("/img/bg_main_intersect.png");
+  background-image: url("/img/bg_main_intersect.svg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -7223,7 +7226,7 @@ select.form-control {
   padding: 75px 0 100px;
   background: #FFFFFF;
   overflow: hidden;
-  height: 1000px;
+  height: 870px;
 }
 @media (max-width: 768px) {
   .api-showcase {
@@ -7243,7 +7246,6 @@ select.form-control {
 .api-showcase .showcase-wrapper {
   max-width: 1228px;
   margin: 0 auto;
-  padding: 0 20px;
   position: relative;
   width: 100%;
   z-index: 1;
@@ -7375,11 +7377,6 @@ select.form-control {
   gap: 32px;
   justify-content: center;
 }
-@media (min-width: 1280px) {
-  .api-showcase .api-cards-container {
-    gap: 24px;
-  }
-}
 @media (max-width: 1024px) {
   .api-showcase .api-cards-container {
     flex-wrap: wrap;
@@ -7492,7 +7489,7 @@ select.form-control {
   padding: 100px 0;
   background: #FFFFFF;
   overflow: hidden;
-  min-height: 980px;
+  height: 740px;
   display: flex;
   align-items: center;
 }
@@ -7599,7 +7596,7 @@ select.form-control {
 }
 .info-section .info-description {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 400;
   line-height: 1.6;
   color: #000000;
@@ -7727,10 +7724,12 @@ select.form-control {
 
 .support-center {
   position: relative;
-  padding: 150px 0;
+  padding: 0;
+  padding-top: 102px;
+  padding-bottom: 126px;
   background: #eef7fd;
   overflow: hidden;
-  min-height: 980px;
+  height: 720px;
 }
 @media (max-width: 768px) {
   .support-center {
@@ -7775,7 +7774,8 @@ select.form-control {
   z-index: 1;
   max-width: 1280px;
   margin: 0 auto;
-  padding: 0 40px;
+  padding: 0 26px;
+  height: 492px;
 }
 @media (max-width: 768px) {
   .support-center .container {
@@ -7785,7 +7785,7 @@ select.form-control {
   }
 }
 .support-center .section-header {
-  margin-bottom: 80px;
+  margin-bottom: 40px;
   text-align: center;
 }
 @media (max-width: 768px) {
@@ -7796,10 +7796,11 @@ select.form-control {
 }
 .support-center .section-header .section-title {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 44px;
-  line-height: 1.6;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.4;
   color: #000000;
-  margin: 0;
+  margin: 0 0 24px 0;
   text-align: left;
 }
 @media (max-width: 1024px) {
@@ -7815,15 +7816,13 @@ select.form-control {
     letter-spacing: -0.32px;
   }
 }
-.support-center .section-header .section-title .title-regular {
-  font-weight: 400;
-}
 @media (max-width: 768px) {
   .support-center .section-header .section-title .title-regular {
     font-weight: 500;
   }
 }
 .support-center .section-header .section-title .title-bold {
+  font-size: 38px;
   font-weight: 700;
 }
 @media (max-width: 768px) {
@@ -7838,6 +7837,7 @@ select.form-control {
   justify-content: center;
   align-items: stretch;
   max-width: 1228px;
+  height: 320px;
   margin: 0 auto;
 }
 @media (max-width: 1024px) {
@@ -7865,7 +7865,7 @@ select.form-control {
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
-  height: 377px;
+  height: 320px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card {
@@ -7968,11 +7968,11 @@ select.form-control {
   }
 }
 .support-center .support-card--notice {
-  width: 598px;
+  width: 388px;
   flex-shrink: 0;
   flex-direction: column;
   align-items: center;
-  padding: 60px 40px;
+  padding: 50px 40px;
   background: #0049B4;
 }
 @media (max-width: 1024px) {
@@ -7990,7 +7990,7 @@ select.form-control {
   }
 }
 .support-center .support-card--notice .card-icon {
-  width: 174px;
+  width: 120px;
   height: 120px;
   margin-bottom: 36px;
 }
@@ -8000,7 +8000,7 @@ select.form-control {
 }
 .support-center .support-card--notice .card-content h3 {
   color: #FFFFFF;
-  font-size: 36px;
+  font-size: 30px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card--notice .card-content h3 {
@@ -8015,7 +8015,7 @@ select.form-control {
 }
 .support-center .support-card--notice .card-content p {
   color: rgba(255, 255, 255, 0.9);
-  font-size: 20px;
+  font-size: 22px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card--notice .card-content p {
@@ -8032,11 +8032,11 @@ select.form-control {
   background: rgb(0, 62.6583333333, 154.5);
 }
 .support-center .support-card--faq, .support-center .support-card--qna {
-  width: 283px;
+  width: 388px;
   flex-shrink: 0;
   flex-direction: column;
   align-items: center;
-  padding: 60px 40px;
+  padding: 50px 40px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card--faq, .support-center .support-card--qna {
@@ -8062,7 +8062,7 @@ select.form-control {
   flex: none;
 }
 .support-center .support-card--faq .card-content h3, .support-center .support-card--qna .card-content h3 {
-  font-size: 36px;
+  font-size: 30px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card--faq .card-content h3, .support-center .support-card--qna .card-content h3 {
@@ -8075,7 +8075,7 @@ select.form-control {
   }
 }
 .support-center .support-card--faq .card-content p, .support-center .support-card--qna .card-content p {
-  font-size: 20px;
+  font-size: 22px;
 }
 @media (max-width: 1024px) {
   .support-center .support-card--faq .card-content p, .support-center .support-card--qna .card-content p {
@@ -8102,8 +8102,10 @@ select.form-control {
 
 .api-stats-section {
   position: relative;
-  min-height: 720px;
-  padding: 100px 0;
+  height: 630px;
+  padding: 0;
+  padding-top: 132px;
+  padding-bottom: 134px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -8149,7 +8151,7 @@ select.form-control {
 }
 .api-stats-section .section-header {
   text-align: center;
-  margin-bottom: 80px;
+  height: 100px;
 }
 @media (max-width: 768px) {
   .api-stats-section .section-header {
@@ -8164,10 +8166,9 @@ select.form-control {
 }
 .api-stats-section .section-title .title-top {
   display: block;
-  font-size: 32px;
+  font-size: 28px;
   font-weight: 400;
   color: #E8E8E8;
-  margin-bottom: 8px;
 }
 @media (max-width: 1024px) {
   .api-stats-section .section-title .title-top {
@@ -8183,7 +8184,7 @@ select.form-control {
   }
 }
 .api-stats-section .section-title .title-highlight {
-  font-size: 44px;
+  font-size: 38px;
   font-weight: 700;
   color: #81D5FF;
 }
@@ -8198,8 +8199,8 @@ select.form-control {
   }
 }
 .api-stats-section .section-title {
-  font-size: 44px;
-  font-weight: 400;
+  font-size: 38px;
+  font-weight: 700;
   color: #E8E8E8;
 }
 @media (max-width: 1024px) {
@@ -8280,8 +8281,8 @@ select.form-control {
   }
 }
 .api-stats-section .stat-card .stat-icon {
-  width: 100px;
-  height: 100px;
+  width: 70px;
+  height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8329,15 +8330,21 @@ select.form-control {
 }
 .api-stats-section .stats-divider {
   width: 1px;
-  height: 240px;
+  height: 200px;
   margin: 0 60px;
   flex-shrink: 0;
+  background-color: #ffffff;
 }
 @media (max-width: 1024px) {
   .api-stats-section .stats-divider {
     display: none;
   }
 }
+@media (min-width: 1280px) {
+  .api-stats-section .stats-divider {
+    margin: 0 120px;
+  }
+}
 @media (max-width: 768px) {
   .api-stats-section .stats-divider {
     display: block !important;

src/main/resources/static/img/bg_main_intersect.svg

@@ -0,0 +1,3 @@
+<svg width="1920" height="314" viewBox="0 0 1920 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1920 314H0V0.447266C158.076 115.873 527.685 196.879 958.538 196.999H960.462C1391.87 196.878 1761.87 115.662 1919.61 0H1920V314Z" fill="#CFF2FF"/>
+</svg>

src/main/resources/static/sass/layout/_header.scss

@@ -59,6 +59,7 @@
   }
   .container {
     height: 100%;
+    padding: 0;
 
     .header-content {
       height: 100%;

src/main/resources/static/sass/pages/_index.scss

@@ -11,7 +11,7 @@
 .hero-carousel-container {
   position: relative;
   width: 100%;
-  height: 720px;
+  height: 580px;
   overflow: hidden;
   background-color: #E9F9FF;
 
@@ -28,6 +28,11 @@
   position: relative;
   width: 100%;
   height: 100%;
+
+  @include respond-to('lg') {
+    max-width: 1280px;
+    margin: 0 auto;
+  }
 }
 
 // Individual slide
@@ -36,7 +41,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 580px;
+  height: 440px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -51,15 +56,15 @@
 
   // Slide backgrounds
   &[data-slide="0"] {
-    background: #E5F8FF;
+    background: #E9F9FF;
   }
 
   &[data-slide="1"] {
-    background: #E5F8FF;
+    background: #E9F9FF;
   }
 
   &[data-slide="2"] {
-    background: #E5F8FF;
+    background: #E9F9FF;
   }
 }
 
@@ -70,16 +75,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 80px; // 기본 패딩 줄임
   position: relative;
   margin: 0 auto; // 가운데 정렬 보장
 
-  @include respond-to('xl') {
-    padding: 0 320px; // 1440px 이상에서만 큰 패딩
-  }
-
   @include respond-to('lg') {
-    padding: 0 160px; // 1280px 이상에서 중간 패딩
+    padding: 0 26px; // 1280px 이상에서 중간 패딩
   }
 
   @include respond-to('md') {
@@ -105,6 +105,7 @@
   flex-direction: column;
   gap: 46px;
   z-index: 2;
+  width: 593px;
 
   @include respond-to('md') {
     align-items: center;
@@ -124,9 +125,9 @@
 .hero-text {
   .hero-subtitle {
     font-family: $font-family-primary;
-    font-size: 36px;
+    font-size: 32px;
     font-weight: 400;
-    line-height: 1;
+    line-height: 99.94%;
     color: #212529;
     margin: 0 0 12px 0;
 
@@ -146,9 +147,9 @@
 
   .hero-title {
     font-family: $font-family-primary;
-    font-size: 50px;
+    font-size: 46px;
     font-weight: 700;
-    line-height: 1.2;
+    line-height: 99.94%;
     color: #000000;
     margin: 0;
 
@@ -216,13 +217,13 @@
   z-index: 1;
 
   @include respond-to('lg') {
-    width: 450px;
-    height: 370px;
+    width: 410px;
+    height: 300px;
   }
 
   @include respond-to('md') {
-    width: 400px;
-    height: 330px;
+    width: 410px;
+    height: 300px;
   }
 
   @include respond-to('sm') {
@@ -284,32 +285,36 @@
     transform: rotate(180deg);
   }
 
-  @include respond-to('lg') {
-    left: 100px;
+  @include respond-to('sm') {
+    left: 20px;
   }
 
   @include respond-to('md') {
     left: 40px;
   }
 
-  @include respond-to('sm') {
-    left: 20px;
+  // 1280px 이상에서는 화면 가운데 기준으로 위치 계산
+  // calc(50vw - 640px + offset) = 화면 중앙에서 컨텐츠 왼쪽 끝 + offset
+  @include respond-to('lg') {
+    left: calc(50vw - 640px - 80px);
   }
 }
 
 .hero-nav-next {
   right: 210px;
 
-  @include respond-to('lg') {
-    right: 100px;
+  @include respond-to('sm') {
+    right: 20px;
   }
 
   @include respond-to('md') {
     right: 40px;
   }
 
-  @include respond-to('sm') {
-    right: 20px;
+  // 1280px 이상에서는 화면 가운데 기준으로 위치 계산
+  // calc(50vw - 640px + offset) = 화면 중앙에서 컨텐츠 오른쪽 끝 + offset
+  @include respond-to('lg') {
+    right: calc(50vw - 640px - 80px);
   }
 }
 
@@ -317,7 +322,7 @@
 .hero-carousel-indicators {
   position: absolute;
   bottom: 160px;
-  left: 50%;
+  left: calc(50vw - 640px + 72px);
   transform: translateX(-50%);
   display: flex;
   gap: 12px;
@@ -418,11 +423,12 @@
   //margin-top: -80px;
   overflow: hidden;
   background: #e9f9ff;
+  height: 314px;
 
   .search-background {
     position: absolute;
     inset: 0;
-    background-image: url('/img/bg_main_intersect.png');
+    background-image: url('/img/bg_main_intersect.svg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -760,7 +766,7 @@
   padding: 75px 0 100px;
   background: $white;
   overflow: hidden;
-  height: 1000px;
+  height: 870px;
 
   @include respond-to('sm') {
     height: auto;
@@ -781,7 +787,7 @@
   .showcase-wrapper {
     max-width: 1228px;
     margin: 0 auto;
-    padding: 0 20px;
+    //padding: 0 20px;
     position: relative;
     width: 100%;
     z-index: 1;
@@ -919,9 +925,9 @@
     gap: 32px;
     justify-content: center;
 
-    @include respond-to('lg') {
-      gap: 24px;
-    }
+    //@include respond-to('lg') {
+    //  gap: 24px;
+    //}
 
     @include respond-to('md') {
       flex-wrap: wrap;
@@ -1048,7 +1054,7 @@
   padding: $spacing-6xl 0;
   background: #FFFFFF;
   overflow: hidden;
-  min-height: 980px;
+  height: 740px;
   display: flex;
   align-items: center;
 
@@ -1169,7 +1175,7 @@
 
   .info-description {
     font-family: $font-family-primary;
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 400;
     line-height: 1.6;
     color: #000000;
@@ -1317,10 +1323,12 @@
 // -----------------------------------------------------------------------------
 .support-center {
   position: relative;
-  padding: 150px 0;
+  padding: 0;
+  padding-top: 102px;
+  padding-bottom: 126px;
   background: #eef7fd;
   overflow: hidden;
-  min-height: 980px;
+  height: 720px;
 
   @include respond-to('sm') {
     // Figma 모바일: 392px 높이, 패딩 60px 20px
@@ -1369,7 +1377,8 @@
     z-index: 1;
     max-width: 1280px;
     margin: 0 auto;
-    padding: 0 40px;
+    padding: 0 26px;
+    height: 492px;
 
     @include respond-to('sm') {
       padding: 0;
@@ -1379,7 +1388,7 @@
   }
 
   .section-header {
-    margin-bottom: 80px;
+    margin-bottom: 40px;
     text-align: center;
 
     @include respond-to('sm') {
@@ -1390,10 +1399,11 @@
 
     .section-title {
       font-family: $font-family-primary;
-      font-size: 44px;
-      line-height: 1.6;
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 1.4;
       color: #000000;
-      margin: 0;
+      margin: 0 0 $spacing-lg 0;
       text-align: left;
 
       @include respond-to('md') {
@@ -1409,7 +1419,6 @@
       }
 
       .title-regular {
-        font-weight: 400;
 
         @include respond-to('sm') {
           font-weight: 500;
@@ -1417,6 +1426,7 @@
       }
 
       .title-bold {
+        font-size: 38px;
         font-weight: 700;
 
         @include respond-to('sm') {
@@ -1434,6 +1444,7 @@
     justify-content: center;
     align-items: stretch;
     max-width: 1228px; // 598 + 283 + 283 + (32 * 2) = 1228px
+    height: 320px;
     margin: 0 auto;
 
     @include respond-to('md') {
@@ -1462,7 +1473,7 @@
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
-    height: 377px; // 모든 카드 동일 높이
+    height: 320px; // 모든 카드 동일 높이
 
     @include respond-to('md') {
       width: 100%;
@@ -1565,13 +1576,13 @@
       }
     }
 
-    // 공지사항 카드 (598px width)
+    // 공지사항 카드
     &--notice {
-      width: 598px;
+      width: 388px;
       flex-shrink: 0;
       flex-direction: column;
       align-items: center;
-      padding: 60px 40px;
+      padding: 50px 40px;
       background: #0049B4;
 
       @include respond-to('md') {
@@ -1588,7 +1599,7 @@
       }
 
       .card-icon {
-        width: 174px;
+        width: 120px;
         height: 120px;
         margin-bottom: 36px;
       }
@@ -1599,7 +1610,7 @@
 
         h3 {
           color: #FFFFFF;
-          font-size: 36px;
+          font-size: 30px;
 
           @include respond-to('md') {
             font-size: 32px;
@@ -1613,7 +1624,7 @@
 
         p {
           color: rgba(255, 255, 255, 0.9);
-          font-size: 20px;
+          font-size: 22px;
 
           @include respond-to('md') {
             font-size: 18px;
@@ -1631,13 +1642,13 @@
       }
     }
 
-    // FAQ & Q&A Cards (283px width each)
+    // FAQ & Q&A Cards
     &--faq, &--qna {
-      width: 283px;
+      width: 388px;
       flex-shrink: 0;
       flex-direction: column;
       align-items: center;
-      padding: 60px 40px;
+      padding: 50px 40px;
 
       @include respond-to('md') {
         width: 100%;
@@ -1664,7 +1675,7 @@
         flex: none;
 
         h3 {
-          font-size: 36px;
+          font-size: 30px;
 
           @include respond-to('md') {
             font-size: 32px;
@@ -1677,7 +1688,7 @@
         }
 
         p {
-          font-size: 20px;
+          font-size: 22px;
 
           @include respond-to('md') {
             font-size: 18px;
@@ -1718,8 +1729,10 @@
 
 .api-stats-section {
   position: relative;
-  min-height: 720px;
-  padding: $spacing-6xl 0;
+  height: 630px;
+  padding: 0;
+  padding-top: 132px;
+  padding-bottom: 134px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -1766,7 +1779,7 @@
 
   .section-header {
     text-align: center;
-    margin-bottom: 80px;
+    height: 100px;
 
     @include respond-to('sm') {
       // Figma 모바일: 타이틀 왼쪽 정렬
@@ -1782,10 +1795,9 @@
 
     .title-top {
       display: block;
-      font-size: 32px;
+      font-size: 28px;
       font-weight: 400;
       color: #E8E8E8;
-      margin-bottom: 8px;
 
       @include respond-to('md') {
         font-size: 28px;
@@ -1801,7 +1813,7 @@
     }
 
     .title-highlight {
-      font-size: 44px;
+      font-size: 38px;
       font-weight: 700;
       color: #81D5FF;
 
@@ -1816,8 +1828,8 @@
     }
 
     // Rest of the title text
-    font-size: 44px;
-    font-weight: 400;
+    font-size: 38px;
+    font-weight: 700;
     color: #E8E8E8;
 
     @include respond-to('md') {
@@ -1900,8 +1912,8 @@
     }
 
     .stat-icon {
-      width: 100px;
-      height: 100px;
+      width: 70px;
+      height: 70px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1958,14 +1970,20 @@
   // Vertical divider between cards
   .stats-divider {
     width: 1px;
-    height: 240px;
+    height: 200px;
     margin: 0 60px;
     flex-shrink: 0;
+    background-color: #ffffff;
 
     @include respond-to('md') {
       display: none;
     }
 
+    // 1280px 이상: stat-card(145px) <- 120px -> divider <- 120px -> stat-card
+    @include respond-to('lg') {
+      margin: 0 120px;
+    }
+
     @include respond-to('sm') {
       // Figma 모바일: 세로 구분선 표시
       display: block !important;