메인 페이지 퍼블 완료

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

@@ -60,7 +60,7 @@
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 1000;
-  height: 90px;
+  height: 112px;
   transition: all 0.3s ease;
   border-bottom: 1px solid #dddddd;
 }
@@ -693,9 +693,7 @@
   transition: all 0.3s ease;
 
   &:hover {
-    background: var(--light-bg);
     color: var(--primary-blue);
-    transform: translateY(-2px);
   }
 }
 
@@ -788,7 +786,7 @@
 // Body Layout Compensation
 // ===========================
 body {
-  padding-top: 65px; // Compensate for fixed header
+  padding-top: 112px; // Compensate for fixed header (112px height)
 }
 
 // ===========================
@@ -796,7 +794,7 @@ body {
 // ===========================
 @media (max-width: 768px) {
   .global-header {
-    height: 60px;
+    height: 90px;
 
     .container .header-content {
       padding: 0 16px;

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

@@ -49,6 +49,7 @@
 @import 'pages/notice';
 @import 'pages/inquiry';
 @import 'pages/org-register';
+@import 'pages/partnership';
 @import 'pages/user-management';
 @import 'pages/commission';
 @import 'pages/terms-agreements';

src/main/resources/static/sass/pages/_api-market.scss

@@ -6,21 +6,22 @@
 .api-market-container {
   display: flex;
   min-height: 100vh;
-  background-color: $gray-bg;
+  background-color: $white;
   position: relative;
 }
 
 // Sidebar Navigation
 .api-market-sidebar {
-  width: 280px;
+  width: 283px;
-  background-color: $white;
+  background-color: #FDFDFD;
-  border-right: 1px solid $border-gray;
+  border-radius: 20px;
   padding: $spacing-2xl $spacing-lg;
   position: sticky;
-  top: 0;
+  top: $spacing-lg;
-  height: 100vh;
+  height: calc(100vh - 32px);
   overflow-y: auto;
   flex-shrink: 0;
+  margin: $spacing-md;
 
   @media (max-width: $breakpoint-md) {
     width: 240px;
@@ -35,6 +36,8 @@
     box-shadow: $shadow-lg;
     z-index: $z-index-modal;
     height: calc(100vh - 60px); // Full height minus header
+    margin: 0;
+    border-radius: 0;
 
     &.mobile-open {
       transform: translateX(0);
@@ -42,30 +45,59 @@
   }
 }
 
+.api-sidebar-header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: $spacing-xl;
+  padding-bottom: $spacing-lg;
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
 .api-sidebar-nav {
   .menu-section {
-    margin-bottom: $spacing-xs;
+    margin-bottom: 0;
+    border-bottom: 1px solid #DDDDDD;
+
+    &:last-child {
+      border-bottom: none;
+    }
   }
 
   .menu-title {
-    padding: 12px $spacing-md;
+    padding: 16px 10px;
     font-size: $font-size-sm;
     font-weight: $font-weight-semibold;
-    color: $secondary-blue;
+    color: $text-dark;
     cursor: pointer;
-    border-radius: $border-radius-md;
     transition: $transition-base;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
 
     &:hover {
-      background-color: $gray-bg;
+      background-color: rgba($primary-blue, 0.05);
     }
 
     &.active {
-      background-color: $light-bg;
       color: $secondary-blue;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px 0 6px 8px;
+        border-color: transparent transparent transparent $text-dark;
+      }
     }
 
     .api-count {
@@ -303,9 +335,15 @@
 // Card Grid
 .api-card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(3, 1fr);  // 3 cards per row on desktop
   gap: $spacing-lg;
 
+  // Tablet view - 2 cards per row
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  // Mobile view - 1 card per row
   @media (max-width: $breakpoint-sm) {
     grid-template-columns: 1fr;
   }
@@ -317,119 +355,80 @@
   border-radius: $border-radius-lg;
   padding: $spacing-xl;
   box-shadow: $shadow-sm;
-  transition: $transition-base;
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: $spacing-md;
-  min-height: 220px;
+  min-height: 180px;
   position: relative;
-  overflow: hidden;
+  border: 1px solid $border-gray;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: $gradient-primary;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.3s ease;
-  }
-
-  &:hover {
-    box-shadow: $shadow-lg;
-    transform: translateY(-5px);
-
-    &::before {
-      transform: scaleX(1);
-    }
-
-    .api-card-icon {
-      transform: scale(1.1);
-    }
-  }
 
   &:active {
-    transform: translateY(-3px);
+    transform: scale(0.98);
   }
 }
 
-.api-card-header {
+// Group Info Section (Icon + Name)
+.api-card-group {
   display: flex;
   align-items: center;
   gap: $spacing-sm;
-  margin-bottom: $spacing-md;
 }
 
-.api-card-badge {
+.api-card-group-icon {
-  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
-  padding: 6px 12px;
+  background: $gray-bg;
-  background-color: $gray-bg;
+  border-radius: $border-radius-md;
-  border-radius: $border-radius-sm;
+  flex-shrink: 0;
-  font-size: $font-size-xs;
-  color: $text-gray;
-  font-weight: $font-weight-medium;
 
-  &::before {
+  img {
-    content: "◉";
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+
+  i {
+    font-size: 16px;
     color: $primary-blue;
-    font-size: 10px;
   }
 }
 
-.api-card-title {
+.api-card-group-name {
-  font-size: $font-size-md;
+  font-size: $font-size-sm;
+  color: $text-gray;
+  font-weight: $font-weight-medium;
+}
+
+// API Name (Title)
+.api-card-name {
+  font-size: $font-size-lg;
   font-weight: $font-weight-semibold;
   color: $text-dark;
-  margin-bottom: 12px;
   line-height: $line-height-tight;
+  margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  text-align: left;
 }
 
+// API Description
 .api-card-description {
   font-size: $font-size-sm;
   color: $text-gray;
   line-height: $line-height-normal;
+  margin: 0;
   flex-grow: 1;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-}
+  text-align: left;
-
-.api-card-icon {
-  text-align: center;
-  margin-top: $spacing-lg;
-  font-size: 48px;
-  opacity: 0.8;
-  transition: transform 0.3s ease;
-
-  img {
-    max-width: 60px;
-    max-height: 60px;
-    object-fit: contain;
-  }
-}
-
-// Icon color variations
-.api-card:nth-child(3n+1) .api-card-icon {
-  color: #60a5fa;
-}
-
-.api-card:nth-child(3n+2) .api-card-icon {
-  color: #34d399;
-}
-
-.api-card:nth-child(3n+3) .api-card-icon {
-  color: #818cf8;
 }
 
 // Empty State
@@ -777,4 +776,4 @@
       color: $primary-blue;
     }
   }
-}
+}

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

@@ -11,7 +11,7 @@
 .hero-carousel-container {
   position: relative;
   width: 100%;
-  height: 800px;
+  height: 720px;
   overflow: hidden;
 
   @include respond-to('md') {
@@ -369,7 +369,7 @@
 .api-search-section {
   position: relative;
   padding: 0;
-  margin-top: -80px;
+  //margin-top: -80px;
   overflow: hidden;
   background: #e9f9ff;
 
@@ -389,7 +389,6 @@
     align-items: center;
     justify-content: center;
     gap: 40px;
-    padding-top: 60px;
     z-index: 1;
 
     @include respond-to('md') {
@@ -538,12 +537,13 @@
     align-items: center;
     justify-content: center;
     gap: 12px;
-    padding: 0 20px 40px;
+    padding: 0 20px 0px;
     z-index: 1;
 
     @include respond-to('md') {
       flex-direction: column;
-      align-items: flex-start;
+      align-items: center;
+      justify-content: center;
       gap: 8px;
       padding: 0 20px 30px;
     }
@@ -564,6 +564,7 @@
     flex-wrap: wrap;
 
     @include respond-to('md') {
+      justify-content: center;
       gap: 10px;
     }
   }
@@ -608,7 +609,7 @@
   position: relative;
   display: flex;
   align-items: center; // 수직 중앙 정렬
-  padding: 80px 0 100px;
+  padding: 175px 0 100px;
   background: $white;
   overflow: hidden;
 
@@ -633,11 +634,12 @@
 
   .section-header {
     text-align: center;
-    margin-bottom: 140px;
+    margin-bottom: 24px;
     position: relative;
+    padding-right: 150px; // 버튼 공간 확보
 
     @include respond-to('md') {
-      margin-bottom: 80px;
+      padding-right: 0;
     }
   }
 
@@ -647,7 +649,7 @@
     font-weight: 700;
     line-height: 1.3;
     color: #000000;
-    margin: 0 0 16px 0;
+    margin: 0;
 
     @include respond-to('md') {
       font-size: 36px;
@@ -664,7 +666,7 @@
     font-weight: 400;
     line-height: 1.5;
     color: #1E1E1E;
-    margin: 0;
+    margin-bottom: 30px;
 
     @include respond-to('md') {
       font-size: 20px;
@@ -678,26 +680,29 @@
 
   .btn-all-apis {
     position: absolute;
+    top: 50%;
     right: 0;
-    top: 64px;
+    transform: translateY(-50%);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 21px;
     padding: 12px 24px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 18px;
+    font-size: 15px;
     font-weight: 500;
     color: #FFFFFF;
     background: #008ae2;
     text-decoration: none;
     border-radius: 10px;
     transition: all 0.3s ease;
-    min-height: 44px;
+    height: 40px;
+    width: 135px;
 
     @include respond-to('md') {
       position: static;
-      margin-top: 24px;
+      transform: none;
+      margin: 24px auto 0;
     }
 
     svg {
@@ -737,16 +742,17 @@
 
   .api-card {
     width: 283px;
-    height: 360px;
+    height: 320px;
     background: #FFFFFF;
     border: 1px solid #DDDDDD;
-    border-radius: 30px;
+    border-radius: 20px;
-    padding: 56px 25px 48px;
+    padding: 36px 38px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
     transition: all 0.3s ease;
+    gap: 0px;
 
     @include respond-to('md') {
       width: calc(50% - 10px);
@@ -765,12 +771,12 @@
     font-weight: 700;
     line-height: 1.67;
     color: #2A2A2A;
-    margin: 0 0 16px 0;
+    margin: 0 0 20px 0;
   }
 
   .card-description {
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 400;
     line-height: 1.43;
     color: #515151;
@@ -780,13 +786,13 @@
   }
 
   .card-illustration {
-    width: 110px;
+    width: 90px;
-    height: 110px;
+    height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: auto;
-    align-self: center;
+    align-self: flex-end;
 
     img {
       width: 100%;
@@ -812,7 +818,6 @@
   min-height: 980px;
   display: flex;
   align-items: center;
-  margin-top: 150px;
 
   .info-background {
     position: absolute;
@@ -923,6 +928,7 @@
     white-space: nowrap;
     transition: all 0.3s ease;
     min-width: 310px;
+    height: 128px;
 
     @include respond-to('sm') {
       font-size: 20px;
@@ -982,40 +988,70 @@
 // Support Center section styles
 // -----------------------------------------------------------------------------
 
+// -----------------------------------------------------------------------------
+// Support Center Section - 비지니스의 시작 (Figma Design)
+// -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // Support Center Section - 비지니스의 시작 (Figma Design)
 // -----------------------------------------------------------------------------
 .support-center {
   position: relative;
-  padding: $spacing-6xl 0;
+  padding: 150px 0;
   background: #eef7fd;
   overflow: hidden;
   min-height: 980px;
 
+  .support-background {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    max-width: 1920px;
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 17px; // Figma: top-[3234px] relative to page, section starts at ~3217px
+      left: 46%; // Approximate positioning
+      width: 693px;
+      height: 597px;
+      background-image: url('/img/bg_support_center.png'); // Assuming this image exists or use placeholder
+      background-size: cover;
+      background-repeat: no-repeat;
+      opacity: 0.5; // Adjust based on visual
+    }
+  }
+
   .container {
     position: relative;
     z-index: 1;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 40px;
   }
 
   .section-header {
-    margin-bottom: $spacing-4xl;
+    margin-bottom: 80px;
-    text-align: left;
+    text-align: center;
 
     .section-title {
       font-family: 'Noto Sans KR', sans-serif;
       font-size: 44px;
-      line-height: 70px;
+      line-height: 1.6;
       color: #000000;
       margin: 0;
+      text-align: left;
 
       @include respond-to('md') {
         font-size: 36px;
-        line-height: 60px;
+        line-height: 1.4;
       }
 
       @include respond-to('sm') {
         font-size: 28px;
-        line-height: 50px;
       }
 
       .title-regular {
@@ -1031,49 +1067,46 @@
   .support-grid {
     display: flex;
     gap: 32px;
-    align-items: flex-start;
     justify-content: center;
+    align-items: stretch;
+    max-width: 1228px; // 598 + 283 + 283 + (32 * 2) = 1228px
+    margin: 0 auto;
 
     @include respond-to('md') {
       flex-direction: column;
-      align-items: stretch;
+      align-items: center;
-    }
-  }
-
-  // 오른쪽 작은 카드들 컨테이너
-  .support-cards-small {
-    display: flex;
-    flex-direction: row;
-    gap: 32px;
-
-    @include respond-to('md') {
-      flex-direction: column;
       gap: 20px;
     }
-
-    @include respond-to('sm') {
-      flex-direction: column;
-    }
   }
 
   // 통합 Support Card
   .support-card {
-    width: 388px;
-    height: 377px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 55px 52px 37px;
     background: #FFFFFF;
     border-radius: 20px;
     text-decoration: none;
     transition: all 0.3s ease;
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    height: 377px; // 모든 카드 동일 높이
+
+    @include respond-to('md') {
+      width: 100%;
+      max-width: 598px;
+      height: auto;
+      min-height: 260px;
+    }
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px rgba(0, 73, 180, 0.15);
+    }
 
     .card-icon {
-      width: 120px;
+      display: flex;
-      height: 120px;
+      align-items: center;
-      margin-bottom: 36px;
+      justify-content: center;
 
       img {
         width: 100%;
@@ -1082,68 +1115,147 @@
       }
     }
 
-    h3 {
-      font-family: 'Noto Sans KR', sans-serif;
-      font-size: 36px;
-      font-weight: 700;
-      color: #212529;
-      margin: 0 0 10px 0;
-      text-align: center;
-    }
-
-    p {
-      font-family: 'Noto Sans KR', sans-serif;
-      font-size: 20px;
-      font-weight: 400;
-      color: #515961;
-      margin: 0;
-      text-align: center;
-    }
-
     .card-content {
-      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
       h3 {
         font-family: 'Noto Sans KR', sans-serif;
-        font-size: 36px;
+        font-size: 32px;
         font-weight: 700;
         color: #212529;
         margin: 0 0 10px 0;
+        line-height: 1.3;
+
+        @include respond-to('md') {
+          font-size: 28px;
+        }
       }
 
       p {
         font-family: 'Noto Sans KR', sans-serif;
-        font-size: 20px;
+        font-size: 18px;
         font-weight: 400;
         color: #515961;
         margin: 0;
+        line-height: 1.4;
+
+        @include respond-to('md') {
+          font-size: 16px;
+        }
       }
     }
 
-    &:hover {
+    // 공지사항 카드 (598px width)
-      transform: translateY(-8px);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-    }
-
-    // 공지사항 카드 색상
     &--notice {
-      background: #FFFEF4;
+      width: 598px;
+      flex-shrink: 0;
+      flex-direction: column;
+      align-items: center;
+      padding: 60px 40px;
+      background: #0049B4;
+
+      @include respond-to('md') {
+        width: 100%;
+        max-width: 598px;
+        padding: 50px 40px;
+      }
+
+      .card-icon {
+        width: 174px;
+        height: 120px;
+        margin-bottom: 36px;
+      }
+
+      .card-content {
+        align-items: center;
+        text-align: center;
+
+        h3 {
+          color: #FFFFFF;
+          font-size: 36px;
+
+          @include respond-to('md') {
+            font-size: 32px;
+          }
+        }
+
+        p {
+          color: rgba(255, 255, 255, 0.9);
+          font-size: 20px;
+
+          @include respond-to('md') {
+            font-size: 18px;
+          }
+        }
+      }
+
+      &:hover {
+        background: darken(#0049B4, 5%);
+      }
     }
 
-    // FAQ 카드 색상
+    // FAQ & Q&A Cards (283px width each)
+    &--faq, &--qna {
+      width: 283px;
+      flex-shrink: 0;
+      flex-direction: column;
+      align-items: center;
+      padding: 60px 40px;
+
+      @include respond-to('md') {
+        width: 100%;
+        max-width: 598px;
+        padding: 40px;
+      }
+
+      .card-icon {
+        width: 120px;
+        height: 120px;
+        margin-bottom: 36px;
+
+      }
+
+      .card-content {
+        align-items: center;
+        text-align: center;
+        flex: none;
+
+        h3 {
+          font-size: 36px;
+
+          @include respond-to('md') {
+            font-size: 32px;
+          }
+        }
+
+        p {
+          font-size: 20px;
+
+          @include respond-to('md') {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    // FAQ Card Specifics
     &--faq {
       background: #DAF0FF;
+
+      .card-content h3 {
+        color: #212529;
+      }
     }
 
-    // Q&A 카드 색상
+    // Q&A Card Specifics
     &--qna {
-      background: #D9F5F8;
+      background: #D9F6F8;
-    }
 
-    @include respond-to('md') {
+      .card-content h3 {
-      width: 100%;
+        color: #212529;
-      height: auto;
+      }
-      min-height: 377px;
     }
   }
 }

src/main/resources/static/sass/pages/_org-register.scss

@@ -13,7 +13,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: $spacing-4xl;
   overflow: hidden;
 
   &::before {

src/main/resources/templates/views/apps/main/index.html

@@ -147,47 +147,44 @@
       </div>
 
       <div class="api-cards-container">
-        <!-- 1원 이체 인증 -->
         <div class="api-card">
-          <h3 class="card-title">1원 이체 인증</h3>
+          <h3 class="card-title">금융서비스</h3>
           <p class="card-description">
-            고객이 기존에 가지고 있는 계좌로 이체를 통해서 간편하게 비대면 실명확인을 도와드리는 서비스입니다.
+            금융 서비스 설명이 표시됩니다. 금융 서비스 설명이 표시됩니다. 금융 서비스 설명이 표시됩니다.
           </p>
           <div class="card-illustration">
-            <img th:src="@{/img/api_icon_1won.png}" alt="1원 이체 인증">
+            <img th:src="@{/img/api_icon_finance.png}" alt="금융서비스">
           </div>
         </div>
 
-        <!-- 수신 -->
         <div class="api-card">
-          <h3 class="card-title">수신</h3>
+          <h3 class="card-title">대출금리비교</h3>
           <p class="card-description">
-            광주은행 수신 계좌들을 조회하는 서비스입니다.
+            대출금리비교 설명이 표시됩니다. 대출금리비교 설명이 표시됩니다. 대출금리비교 설명이 표시됩니다.
           </p>
           <div class="card-illustration">
-            <img th:src="@{/img/api_icon_deposit.png}" alt="수신">
+            <img th:src="@{/img/api_icon_loan.png}" alt="대출금리비교">
           </div>
         </div>
 
-        <!-- 여신 -->
         <div class="api-card">
-          <h3 class="card-title">여신</h3>
+          <h3 class="card-title">소액해외송금</h3>
           <p class="card-description">
-            대출관련 한도, 금리와 대출 계좌들을 조회하는 서비스입니다.
+            소액해외송금 설명이 표시됩니다. 소액해외송금 설명이 표시됩니다. 소액해외송금 설명이 표시됩니다.
           </p>
           <div class="card-illustration">
-            <img th:src="@{/img/api_icon_loan.png}" alt="여신">
+            <img th:src="@{/img/api_icon_remittance.png}" alt="소액해외송금">
           </div>
         </div>
 
         <!-- 간편결제 -->
         <div class="api-card">
-          <h3 class="card-title">간편결제</h3>
+          <h3 class="card-title">P2P투자대출</h3>
           <p class="card-description">
-            광주은행 간편결제 승인/취소와 제휴 대사자료 생성/전송 요청하는 서비스입니다.
+            P2P투자대출 설명이 표시됩니다. P2P투자대출 설명이 표시됩니다. P2P투자대출 설명이 표시됩니다.
           </p>
           <div class="card-illustration">
-            <img th:src="@{/img/api_icon_payment.png}" alt="간편결제">
+            <img th:src="@{/img/api_icon_p2p.png}" alt="간편결제">
           </div>
         </div>
       </div>
@@ -229,6 +226,7 @@
 
   <!-- 지원 센터 섹션 -->
   <section class="support-center">
+    <div class="support-background"></div>
     <div class="container">
       <div class="section-header">
         <h2 class="section-title">
@@ -237,36 +235,38 @@
         </h2>
       </div>
       <div class="support-grid">
-        <!-- 공지사항 카드 -->
+        <!-- 공지사항 카드 (50% width) -->
         <a th:href="@{/portalnotice}" class="support-card support-card--notice">
           <div class="card-icon">
             <img th:src="@{/img/icon_notice.png}" alt="공지사항">
           </div>
-          <h3>공지사항</h3>
+          <div class="card-content">
-          <p>광주은행 API의 새로운 소식을 확인해보세요.</p>
+            <h3>공지사항</h3>
+            <p>광주은행 API의 새로운 소식을 확인해보세요.</p>
+          </div>
         </a>
 
-        <!-- 오른쪽 카드들 -->
+        <!-- FAQ Card (25% width) -->
-        <div class="support-cards-small">
+        <a th:href="@{/faq_list}" class="support-card support-card--faq">
-          <a th:href="@{/faq_list}" class="support-card support-card--faq">
+          <div class="card-icon">
-            <div class="card-icon">
+            <img th:src="@{/img/icon_faq.png}" alt="FAQ">
-              <img th:src="@{/img/icon_faq.png}" alt="FAQ">
+          </div>
-            </div>
+          <div class="card-content">
-            <div class="card-content">
+            <h3>FAQ</h3>
-              <h3>FAQ</h3>
+            <p>자주 묻는 질문</p>
-              <p>자주 묻는 질문</p>
+          </div>
-            </div>
+        </a>
-          </a>
+
-          <a th:href="@{/inquiry}" class="support-card support-card--qna">
+        <!-- Q&A Card (25% width) -->
-            <div class="card-icon">
+        <a th:href="@{/inquiry}" class="support-card support-card--qna">
-              <img th:src="@{/img/icon_qna.png}" alt="Q&A">
+          <div class="card-icon">
-            </div>
+            <img th:src="@{/img/icon_qna.png}" alt="Q&A">
-            <div class="card-content">
+          </div>
-              <h3>Q&A</h3>
+          <div class="card-content">
-              <p>문의하기</p>
+            <h3>Q&A</h3>
-            </div>
+            <p>문의하기</p>
-          </a>
+          </div>
-        </div>
+        </a>
       </div>
     </div>
   </section>

src/main/resources/templates/views/fragment/kjbank/header_container.html

@@ -29,6 +29,7 @@
                   <li><a th:href="@{/portalnotice}">공지사항</a></li>
                   <li><a th:href="@{/faq_list}">FAQ</a></li>
                   <li><a th:href="@{/inquiry}">Q&amp;A</a></li>
+                  <li><a th:href="@{/partnership}">사업 제휴 문의</a></li>
                 </ul>
               </li>
             </ul>