메인 페이지 디자인 수정

This commit is contained in:
현성필
2025-11-18 12:43:24 +09:00
parent c94ede55aa
commit 176326ff21
12 changed files with 213 additions and 360 deletions
@@ -10,6 +10,7 @@ import com.eactive.apim.portal.apps.community.notice.service.PortalNoticeFacade;
import com.eactive.apim.portal.apps.main.service.MainApiFacade;
import com.eactive.apim.portal.common.util.SecurityUtil;
import com.eactive.apim.portal.portalproperty.service.PortalPropertyService;
import java.util.*;
import java.util.stream.Collectors;
@@ -25,13 +26,12 @@ public class IndexController {
private final ApiSearchFacade apiSearchFacade;
private final MainApiFacade mainApiFacade;
private final PortalNoticeFacade portalNoticeFacade;
private final PortalPropertyService portalPropertyService;
/**
* 메인 페이지 API는 Portal Property 에 main.service.list 에 등록된 그룹을 기준으로 API를 조회함.
* 프로퍼티에 등록되어 있어도 어드민의 그룹 표시 설정이 N이면 표시 되지 않음.
* 어드민의 API 스펙의 표시 설정이 N이면 표시되지 않음.
* 그룹 또는 권한이 지정된 경우, 해당사용자의 권한 또는 기관이 일치해야 표시됨.
* 어드민의 API 스펙의 표시 설정이 N이면 표시되지 않음. 그룹 또는 권한이 지정된 경우, 해당사용자의 권한 또는 기관이 일치해야 표시됨.
* <p>
* 검색어는 Portal Property 또는 메인 관리 화면에 main.keyword.list 에 등록된 내용이 표시 됨.
*
@@ -40,23 +40,15 @@ public class IndexController {
*/
@GetMapping("/")
public String index(Model model) {
Map<String, String> propertyMap = portalPropertyService.getPortalPropertiesAsMap("Portal");
String serviceList = propertyMap.get("main.service.list");
// Step 1: Fetch and sort API services
List<ApiServiceDTO> apiServices = getSortedApiServices(null);
// Step 2: Create a map of API ID to ApiServiceDTO for icon mapping
Map<String, ApiServiceDTO> mainIconsMap = createMainIconsMap(apiServices);
// Step 3: Merge all API lists from apiServices
List<ApiServiceApiDTO> allApis = getAllApis(apiServices);
// Step 4: Enrich API spec info DTOs with main icon and service info
List<ApiSpecInfoDto> apiSpecInfoDtos = enrichApiSpecInfo(apiServices, allApis, mainIconsMap);
// Step 5: Calculate total API count
// Step 2: Calculate total API count
int totalApiCount = calculateTotalApiCount(apiServices);
// Step 6: Fetch portal notices and hashtags
List<PortalNoticeDTO> portalNotices = portalNoticeFacade.getLatestNotices();
List<String> hashTags = mainApiFacade.getHashTags();
ApiGroupSearch search = new ApiGroupSearch();
@@ -70,8 +62,7 @@ public class IndexController {
// 승인된 기업 건수
int approvedOrgCount = mainApiFacade.getApprovedOrgCount();
// Step 7: Add attributes to model
addAttributesToModel(model, apiServices, apiSearchFacade.sortApisByService(apiSpecInfoDtos, apiServices), totalApiCount, portalNotices, hashTags, serviceCount, approvedOrgCount, selectedApiCount);
addAttributesToModel(model, apiServices, totalApiCount, hashTags, serviceCount, approvedOrgCount, selectedApiCount);
return "apps/main/index";
}
@@ -82,89 +73,17 @@ public class IndexController {
return apiServices;
}
private Map<String, ApiServiceDTO> createMainIconsMap(List<ApiServiceDTO> apiServices) {
Map<String, ApiServiceDTO> mainIconsMap = new HashMap<>();
apiServices.forEach(service ->
service.getApiGroupApiList().forEach(api ->
mainIconsMap.put(api.getApiId(), service)
)
);
return mainIconsMap;
}
private List<ApiServiceApiDTO> getAllApis(List<ApiServiceDTO> apiServices) {
return apiServices.stream()
.flatMap(service -> service.getApiGroupApiList().stream())
.collect(Collectors.toList());
}
private List<ApiSpecInfoDto> enrichApiSpecInfo(List<ApiServiceDTO> services, List<ApiServiceApiDTO> allApis, Map<String, ApiServiceDTO> mainIconsMap) {
List<String> apiIds = allApis.stream().map(ApiServiceApiDTO::getApiId).collect(Collectors.toList());
List<ApiSpecInfoDto> apiSpecInfoDtos = mainApiFacade.getOpenApis(apiIds);
apiSpecInfoDtos.forEach(spec -> {
ApiServiceDTO serviceDTO = mainIconsMap.get(spec.getApiId());
if (serviceDTO != null) {
spec.setMainIcon(serviceDTO.getMainIcon());
spec.setService(serviceDTO.getGroupName());
}
});
boolean isAuthenticated = SecurityUtil.isAuthenticated();
String roleCode;
String org;
if (isAuthenticated) {
roleCode = SecurityUtil.getPortalAuthenticatedUser().getRoleCode().toString();
org = SecurityUtil.getUserOrg().getId();
} else {
roleCode = null;
org = null;
}
List<ApiSpecInfoDto> filteredApiSpecInfoDtos = apiSpecInfoDtos.stream()
.filter(spec -> {
if (!isAuthenticated) {
return spec.getDisplayOrg() == null && spec.getDisplayRoleCode() == null;
}
boolean orgMatch = false;
if (org != null) {
orgMatch = spec.getDisplayOrg() == null || spec.getDisplayOrg().isEmpty() || spec.getDisplayOrg().contains(org);
}
boolean roleMatch = spec.getDisplayRoleCode() == null || spec.getDisplayRoleCode().isEmpty() || spec.getDisplayRoleCode().contains(roleCode);
return orgMatch || roleMatch;
})
.collect(Collectors.toList());
Set<String> filteredApiIds = filteredApiSpecInfoDtos.stream()
.map(ApiSpecInfoDto::getApiId)
.collect(Collectors.toSet());
services.forEach(service -> {
if (service.getApiGroupApiList() != null) {
List<ApiServiceApiDTO> filteredApiList = service.getApiGroupApiList().stream()
.filter(api -> filteredApiIds.contains(api.getApiId()))
.collect(Collectors.toList());
service.setApiGroupApiList(filteredApiList);
}
});
return filteredApiSpecInfoDtos.stream().collect(Collectors.toList());
}
private int calculateTotalApiCount(List<ApiServiceDTO> apiServices) {
return apiServices.stream()
.mapToInt(service -> service.getApiGroupApiList().size())
.sum();
.mapToInt(service -> service.getApiGroupApiList().size())
.sum();
}
private void addAttributesToModel(Model model, List<ApiServiceDTO> apiServices,
List<ApiSpecInfoDto> apiSpecInfoDtos, int totalApiCount,
List<PortalNoticeDTO> portalNotices, List<String> hashTags, int serviceCount, int approvedOrgCount, int selectedApiCount) {
int totalApiCount, List<String> hashTags, int serviceCount, int approvedOrgCount, int selectedApiCount) {
model.addAttribute("services", apiServices);
model.addAttribute("apis", apiSpecInfoDtos);
model.addAttribute("totalApiCount", totalApiCount);
model.addAttribute("portalNotices", portalNotices);
model.addAttribute("hashtags", hashTags);
model.addAttribute("serviceCount", serviceCount);
@@ -172,15 +91,4 @@ public class IndexController {
model.addAttribute("selectedApiCount", selectedApiCount);
}
@GetMapping("/api_fragments")
public String getApiFragments(@RequestParam(value = "id", required = false) String id, Model model) {
List<ApiServiceDTO> apiServices = getSortedApiServices(id);
Map<String, ApiServiceDTO> mainIconsMap = createMainIconsMap(apiServices);
List<ApiServiceApiDTO> allApis = getAllApis(apiServices);
List<ApiSpecInfoDto> apiSpecInfoDtos = enrichApiSpecInfo(apiServices, allApis, mainIconsMap);
model.addAttribute("apis", apiSpecInfoDtos);
return "apps/main/apiListFragment :: apiListFragment";
}
}
+87 -139
View File
@@ -4843,8 +4843,18 @@ select.form-control {
.api-search-section {
position: relative;
padding: 0;
margin-bottom: 80px;
margin-top: -80px;
overflow: hidden;
background: #e9f9ff;
}
.api-search-section .search-background {
position: absolute;
inset: 0;
background-image: url("/img/bg_main_intersect.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.api-search-section .search-content-wrapper {
position: relative;
@@ -5061,6 +5071,16 @@ select.form-control {
align-items: center;
padding: 80px 0 100px;
background: #FFFFFF;
overflow: hidden;
}
.api-showcase .showcase-background {
position: absolute;
inset: 0;
background-image: url("/img/bg_main_recommend_apis.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.api-showcase .showcase-wrapper {
max-width: 1228px;
@@ -5068,6 +5088,7 @@ select.form-control {
padding: 0 20px;
position: relative;
width: 100%;
z-index: 1;
}
.api-showcase .section-header {
text-align: center;
@@ -5121,30 +5142,35 @@ select.form-control {
top: 64px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 20px;
justify-content: center;
gap: 21px;
padding: 12px 24px;
font-family: "Noto Sans KR", sans-serif;
font-size: 18px;
font-weight: 500;
color: #000000;
color: #FFFFFF;
background: #008ae2;
text-decoration: none;
border-radius: 6px;
border-radius: 10px;
transition: all 0.3s ease;
min-height: 44px;
}
@media (max-width: 1024px) {
.api-showcase .btn-all-apis {
position: static;
margin-top: 24px;
justify-content: center;
}
}
.api-showcase .btn-all-apis svg {
width: 7px;
height: 15px;
width: 11px;
height: 17px;
transition: transform 0.3s ease;
}
.api-showcase .btn-all-apis svg path {
stroke: #FFFFFF;
}
.api-showcase .btn-all-apis:hover {
background: #F5F5F5;
background: rgb(0, 106.8584070796, 175);
}
.api-showcase .btn-all-apis:hover svg {
transform: translateX(4px);
@@ -5349,18 +5375,18 @@ select.form-control {
transform: translateY(0);
}
.info-section .action-btn-primary {
background: #00acdd;
background: #0049B4;
color: #FFFFFF;
}
.info-section .action-btn-primary:hover {
background: rgb(0, 132.3076923077, 170);
background: rgb(0, 52.3166666667, 129);
}
.info-section .action-btn-secondary {
background: #d5a654;
background: #00ACDD;
color: #FFFFFF;
}
.info-section .action-btn-secondary:hover {
background: rgb(197.4929577465, 143.2112676056, 48.5070422535);
background: rgb(0, 132.3076923077, 170);
}
.info-section .info-image {
flex: 1;
@@ -5383,21 +5409,10 @@ select.form-control {
.support-center {
position: relative;
padding: 100px 0;
background: #f2f6fb;
background: #eef7fd;
overflow: hidden;
min-height: 980px;
}
.support-center .support-background-pattern {
position: absolute;
right: 320px;
top: 0;
width: 700px;
height: 660px;
background-image: url("/img/bg_main_community.png");
background-size: cover;
background-position: center;
pointer-events: none;
}
.support-center .container {
position: relative;
z-index: 1;
@@ -5435,6 +5450,7 @@ select.form-control {
display: flex;
gap: 32px;
align-items: flex-start;
justify-content: center;
}
@media (max-width: 1024px) {
.support-center .support-grid {
@@ -5442,55 +5458,6 @@ select.form-control {
align-items: stretch;
}
}
.support-center .support-card-large {
flex: 1;
max-width: 598px;
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;
min-height: 377px;
}
.support-center .support-card-large .card-icon {
width: 104px;
height: 104px;
margin-bottom: 42px;
}
.support-center .support-card-large .card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.support-center .support-card-large h3 {
font-family: "Noto Sans KR", sans-serif;
font-size: 36px;
font-weight: 700;
color: #212529;
margin: 0 0 10px 0;
text-align: center;
}
.support-center .support-card-large p {
font-family: "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 400;
color: #515961;
margin: 0;
text-align: center;
}
.support-center .support-card-large:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024px) {
.support-center .support-card-large {
max-width: 100%;
}
}
.support-center .support-cards-small {
display: flex;
flex-direction: row;
@@ -5507,55 +5474,80 @@ select.form-control {
flex-direction: column;
}
}
.support-center .support-card-small {
width: 283px;
.support-center .support-card {
width: 388px;
height: 377px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 55px 52px 37px;
background: #FAFAFA;
border: 1px solid #DDDDDD;
background: #FFFFFF;
border-radius: 20px;
text-decoration: none;
transition: all 0.3s ease;
min-height: 377px;
}
.support-center .support-card-small .card-icon {
width: 160px;
height: 160px;
margin-bottom: 30px;
.support-center .support-card .card-icon {
width: 120px;
height: 120px;
margin-bottom: 36px;
}
.support-center .support-card-small .card-icon img {
.support-center .support-card .card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.support-center .support-card-small .card-content {
text-align: center;
}
.support-center .support-card-small .card-content h3 {
.support-center .support-card h3 {
font-family: "Noto Sans KR", sans-serif;
font-size: 36px;
font-weight: 700;
color: #000000;
color: #212529;
margin: 0 0 10px 0;
text-align: center;
}
.support-center .support-card p {
font-family: "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 400;
color: #515961;
margin: 0;
text-align: center;
}
.support-center .support-card .card-content {
text-align: center;
}
.support-center .support-card .card-content h3 {
font-family: "Noto Sans KR", sans-serif;
font-size: 36px;
font-weight: 700;
color: #212529;
margin: 0 0 10px 0;
}
.support-center .support-card-small .card-content p {
.support-center .support-card .card-content p {
font-family: "Noto Sans KR", sans-serif;
font-size: 24px;
font-weight: 500;
font-size: 20px;
font-weight: 400;
color: #515961;
margin: 0;
}
.support-center .support-card-small:hover {
.support-center .support-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
background: #FFFFFF;
}
.support-center .support-card--notice {
background: #FFFEF4;
}
.support-center .support-card--faq {
background: #DAF0FF;
}
.support-center .support-card--qna {
background: #D9F5F8;
}
@media (max-width: 1024px) {
.support-center .support-card-small {
.support-center .support-card {
width: 100%;
height: auto;
min-height: 377px;
}
}
@@ -11549,50 +11541,6 @@ select.form-control {
gap: 4px;
align-items: center;
}
.user-action-buttons .btn-action {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.user-action-buttons .btn-action.btn-sm {
padding: 4px 10px;
font-size: 11px;
}
.user-action-buttons .btn-action.btn-primary {
background-color: #0049b4;
color: #FFFFFF;
}
.user-action-buttons .btn-action.btn-primary:hover {
background-color: rgb(0, 52.3166666667, 129);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.user-action-buttons .btn-action.btn-danger {
background-color: #FF6B6B;
color: #FFFFFF;
}
.user-action-buttons .btn-action.btn-danger:hover {
background-color: #ff3838;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.user-action-buttons .btn-action.btn-warning {
background-color: #FFD93D;
color: #1F2937;
}
.user-action-buttons .btn-action.btn-warning:hover {
background-color: rgb(255, 207.0103092784, 10);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.user-action-buttons .btn-action:active {
transform: scale(0.98);
}
.user-empty-state {
text-align: center;
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.

Before

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 149 KiB

@@ -369,8 +369,19 @@
.api-search-section {
position: relative;
padding: 0;
margin-bottom: 80px;
margin-top: -80px;
overflow: hidden;
background: #e9f9ff;
.search-background {
position: absolute;
inset: 0;
background-image: url('/img/bg_main_intersect.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.search-content-wrapper {
position: relative;
@@ -599,6 +610,17 @@
align-items: center; // 수직 중앙 정렬
padding: 80px 0 100px;
background: $white;
overflow: hidden;
.showcase-background {
position: absolute;
inset: 0;
background-image: url('/img/bg_main_recommend_apis.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.showcase-wrapper {
max-width: 1228px;
@@ -606,6 +628,7 @@
padding: 0 20px;
position: relative;
width: 100%;
z-index: 1;
}
.section-header {
@@ -659,30 +682,36 @@
top: 64px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 20px;
justify-content: center;
gap: 21px;
padding: 12px 24px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 18px;
font-weight: 500;
color: #000000;
color: #FFFFFF;
background: #008ae2;
text-decoration: none;
border-radius: 6px;
border-radius: 10px;
transition: all 0.3s ease;
min-height: 44px;
@include respond-to('md') {
position: static;
margin-top: 24px;
justify-content: center;
}
svg {
width: 7px;
height: 15px;
width: 11px;
height: 17px;
transition: transform 0.3s ease;
path {
stroke: #FFFFFF;
}
}
&:hover {
background: #F5F5F5;
background: darken(#008ae2, 10%);
svg {
transform: translateX(4px);
@@ -912,20 +941,20 @@
}
.action-btn-primary {
background: #00acdd;
background: #0049B4;
color: #FFFFFF;
&:hover {
background: darken(#00acdd, 10%);
background: darken(#0049B4, 10%);
}
}
.action-btn-secondary {
background: #d5a654;
background: #00ACDD;
color: #FFFFFF;
&:hover {
background: darken(#d5a654, 10%);
background: darken(#00ACDD, 10%);
}
}
@@ -959,22 +988,10 @@
.support-center {
position: relative;
padding: $spacing-6xl 0;
background: #f2f6fb;
background: #eef7fd;
overflow: hidden;
min-height: 980px;
.support-background-pattern {
position: absolute;
right: 320px;
top: 0;
width: 700px;
height: 660px;
background-image: url('/img/bg_main_community.png');
background-size: cover;
background-position: center;
pointer-events: none;
}
.container {
position: relative;
z-index: 1;
@@ -1015,6 +1032,7 @@
display: flex;
gap: 32px;
align-items: flex-start;
justify-content: center;
@include respond-to('md') {
flex-direction: column;
@@ -1022,10 +1040,26 @@
}
}
// 공지사항 - 카드
.support-card-large {
flex: 1;
max-width: 598px;
// 오른쪽 작은 카드들 컨테이너
.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;
@@ -1035,12 +1069,11 @@
border-radius: 20px;
text-decoration: none;
transition: all 0.3s ease;
min-height: 377px;
.card-icon {
width: 104px;
height: 104px;
margin-bottom: 42px;
width: 120px;
height: 120px;
margin-bottom: 36px;
img {
width: 100%;
@@ -1067,59 +1100,6 @@
text-align: center;
}
&:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
@include respond-to('md') {
max-width: 100%;
}
}
// 오른쪽 작은 카드들 컨테이너
.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;
}
}
// FAQ, Q&A - 작은 카드
.support-card-small {
width: 283px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 55px 52px 37px;
background: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 20px;
text-decoration: none;
transition: all 0.3s ease;
min-height: 377px;
.card-icon {
width: 160px;
height: 160px;
margin-bottom: 30px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.card-content {
text-align: center;
@@ -1127,14 +1107,14 @@
font-family: 'Noto Sans KR', sans-serif;
font-size: 36px;
font-weight: 700;
color: #000000;
color: #212529;
margin: 0 0 10px 0;
}
p {
font-family: 'Noto Sans KR', sans-serif;
font-size: 24px;
font-weight: 500;
font-size: 20px;
font-weight: 400;
color: #515961;
margin: 0;
}
@@ -1143,11 +1123,27 @@
&:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
background: #FFFFFF;
}
// 공지사항 카드 색상
&--notice {
background: #FFFEF4;
}
// FAQ 카드 색상
&--faq {
background: #DAF0FF;
}
// Q&A 카드 색상
&--qna {
background: #D9F5F8;
}
@include respond-to('md') {
width: 100%;
height: auto;
min-height: 377px;
}
}
}
@@ -95,6 +95,7 @@
<!-- API 검색 섹션 -->
<section class="api-search-section">
<div class="search-background"></div>
<div class="search-content-wrapper">
<div class="search-character">
<img th:src="@{/img/img_search_character.png}" alt="검색">
@@ -132,14 +133,15 @@
<!-- 추천 API 섹션 -->
<section class="api-showcase">
<div class="showcase-background"></div>
<div class="showcase-wrapper">
<div class="section-header">
<h2 class="section-title">추천 API</h2>
<p class="section-subtitle">다양한 금융 API상품을 소개합니다.</p>
<a th:href="@{/apis}" class="btn-all-apis">
API 전체보기
<svg width="7" height="15" viewBox="0 0 7 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 7.5L1 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
전체보기
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.509766 13.5496L7.50977 7.04956L0.509766 0.549561" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
</a>
</div>
@@ -227,7 +229,6 @@
<!-- 지원 센터 섹션 -->
<section class="support-center">
<div class="support-background-pattern"></div>
<div class="container">
<div class="section-header">
<h2 class="section-title">
@@ -236,8 +237,8 @@
</h2>
</div>
<div class="support-grid">
<!-- 공지사항 - 카드 -->
<a th:href="@{/portalnotice}" class="support-card support-card-large">
<!-- 공지사항 카드 -->
<a th:href="@{/portalnotice}" class="support-card support-card--notice">
<div class="card-icon">
<img th:src="@{/img/icon_notice.png}" alt="공지사항">
</div>
@@ -245,9 +246,9 @@
<p>광주은행 API의 새로운 소식을 확인해보세요.</p>
</a>
<!-- 오른쪽 작은 카드들 -->
<!-- 오른쪽 카드들 -->
<div class="support-cards-small">
<a th:href="@{/faq_list}" class="support-card support-card-small">
<a th:href="@{/faq_list}" class="support-card support-card--faq">
<div class="card-icon">
<img th:src="@{/img/icon_faq.png}" alt="FAQ">
</div>
@@ -256,7 +257,7 @@
<p>자주 묻는 질문</p>
</div>
</a>
<a th:href="@{/inquiry}" class="support-card support-card-small">
<a th:href="@{/inquiry}" class="support-card support-card--qna">
<div class="card-icon">
<img th:src="@{/img/icon_qna.png}" alt="Q&A">
</div>
@@ -284,13 +285,13 @@
<div class="stat-card">
<p class="stat-label">서비스 이용 수</p>
<div class="stat-icon">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100" height="100" fill="url(#pattern0_2007_122)"/>
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="90" height="90" fill="url(#pattern0_892_75)"/>
<defs>
<pattern id="pattern0_2007_122" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2007_122" transform="translate(0 -0.00684932) scale(0.00684932)"/>
<pattern id="pattern0_892_75" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_892_75" transform="scale(0.00537634)"/>
</pattern>
<image id="image0_2007_122" width="146" height="148" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACUCAYAAAB4InCTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjE2MEY5MTNCMUQwMTFGMEI4MkNBREYwOTFGQThDQ0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjE2MEY5MTRCMUQwMTFGMEI4MkNBREYwOTFGQThDQ0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMTYwRjkxMUIxRDAxMUYwQjgyQ0FERjA5MUZBOENDRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMTYwRjkxMkIxRDAxMUYwQjgyQ0FERjA5MUZBOENDRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtyO1z0AAAQbSURBVHja7N3BaxxlGMDhmWYT1myQNKlFFBHBg7fSCgUp8RAQLyIVevImnvwD9F/w4FXwJN48CYpIIVRz6KUgaOnNg9CDGMSULUqyW5qk4zt2rGabxOzOZmaSfR54mZKS3fm++ZHdaUOSZlmWQFmnbAFCojnyl7aT/vIW62vHfBizllVnrXjO9kT0c9JDirW1Yr7L6pM/d+ukhzQJL21vxyzX+PzLxTl4j3TMveEchDQOZ52DkBASQoIhtSZ9A7a2tpLNzc1Sj9HpdJLp6WkhTbKdnZ2k3++Xeox2uz3xIXlpQ0gICSGBkBASQkJIICSEhJAQEggJISEkEBJCQkgICYSEkBASQgIhISSEhJBASAgJIYGQGKND/XykLMteisPTFZxP/gO/f07T9FeX5sDr8WwcXoxJK3i63+J6/FQqpDjh83H4LOZcxRv1dRzejQXckc2ufTkTh09j3qz4eW/F4Z24HjeHfmmLT34+DqtVR1TIN2rlJP/E/BEuZr4XK1VHVMgbWC2aGPo90gcx8zXu3YWYKxJ65EqxJ3WZL5oYOqRLDdi8Jf00ai8ujRLSfANOvKOfRu3FvNt/jpSQEBLNMfLtda/XSzY2Nko9+cLCQtJqucMfh+3t7aTb7ZZ6jLm5uWR2drbakPLfGpj/1Pwy/Ibv8an7enhpw3skhISQQEgICSEhJBASQkJICAmEhJAQEggJISEkhARCQkgICSGBkBASQkJIICSEhJBASAgJISEkEBJCQkgICYSEkBASQgIhISSEBEJCSAgJIYGQEBJCQkggJISEkBASCAkhIST4r9aonzg1NZXMzMyUq/hU/R3n52Ad/17TykNqt9t/z3GXb/7i4uKxX0ceQZ3r8NKGkBASExTSegPO748xPEa3AevoNmQvylofJaTVBpz4t2N4jGsNWMe1huxFWfs2kWZZ9vAPabrrL+LjT8Xhh5jnatz81+O8sjIPEut4Ig43Ys7VtI5bMa/EOvol15FfoJWY12paxy8xL8c61gfO6+CvSMUnLMV8E/OgwhPON/zjmMtlIyrWkT/ecsznMfcrXMf94jmXy0ZUrCPfi8vF3vQrXMeDooGlwYgO9RVpoLon47BQ0YmvxbkcyQWPdczG4WxF6/g91tE7onXk//L4TFXv72Idfx5wLocPCf4vJLf/HPntPwgJISEkhARCQkgICYTEWD32PdtZlp2Ow6sxp20Pe7gbcz1N07v7hhQRvReHj2I69osDbEYr70dMn/zzgUf/aZs8/BaFL+0RQ3gr5qvBkH6MOW9vGMLNmAuDIe14882Q8m96mxq8a7tnXxjSvb1u/6/aF4Z0da832y/EfB9zxv5wCHdiLsbc3vUVKW7lbhd/8UVMzz6xj17RyMWimce+IsHI3KUhJJrjLwEGAL+X+MkwwRFJAAAAAElFTkSuQmCC"/>
<image id="image0_892_75" width="186" height="186" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALoAAAC6CAYAAAAZDlfxAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADHdJREFUeNrsXYuR2kgQha0LgAysDJYMVhmYi2CVwXIRmIsAbwRiI2AdAdoIxEYgHIG4CDgNHnx4Dcf0fHtmXlepcLlYkN48vXndPSPGI8TVOBwOpfzn6fV+OCYf/o8aO3mc/v19OPbDsRWv4/F4C+TtxxgQHAk9HV7EUQzHg3wtAp7SVt4E7/Lf2+EG2GGkQHQdpS4lqadnKs05hOo3w/Emid+AviD6JcUWxP5sYDk4E/8Vip8p0Qdyz6RizwLbEF8hiP46HC/w+YkTXSr343BUkdgRkB5EVyZ3IVX7KRPl1klsX4ZjNZB+D6LHmVA+SZIj1GIlVb4B0fkTXNiSL1BvY5V/Hgi/AtF5kVv47blU8Al4atXLP+dga8YRkFwkmBsGBD92Lkf/dTPP/081irOZ6NRlLRjMTntJ+K+pEn7MnOSCAK1nkjeSwN/l685HjVpeqzhE7vFp9KORNQ1A+L9StDTcib6UlsXlwApii6ZLw7EUJ5NuQfgHeRP4uOl3kvCvcHd+Brk92I/1cMylJYoRk6k8/83BfWxixSm2QbUR/XDUolojk9qU8JnI61o7JvwyNexSUvR1iuRWIL0rpe/lsgqEg8FbEAejk39TZI5bIXHoHFk/qLsDlaLEAqj9hqELlYe6OxiomqLoQOx69YaIpUrUUHe70zAlKqB2E0+bhO9QmYGqcye8zWoNBAaqzt7SbGBloOo5Ja02qjQtyG42EFOoupcq18JSVQa+3WAgKFPsBogZiUprgewQG4PplRIlUDPCe4EkNcyU2lMXJQE9Fuq+BJK3gZ4ZJklQdTtCszStyADJ6+DaqPNC1e2KTg+y8wH0Y6ACwMfKgOwWVRzg8h6nOmfwSkfLSk9RgKKsqjI1AHMTUHU3Y1cZjMkCUyBUPbbZWDenqpDUQNVjG09dss8Ayu3VctT6LhYc8RvX9NbGGHq68xVy0zP708MXRk/2LhkRskByAeDcMJntoepsyd6C5GcqfiWphaqnQfZlzBdtukdxofAdUPV0yF7lRvJedVEWHo3BdvxnySenhnaFvCUL2+2S4kGbA8lrze/EJmq+fFgm59cNST43/G6oOl9e6HTBS64XY9IMqix8P1SdL9EnGgv3+NXXJcl6l0knVD3LSsyS293acsiw8WiMJPO3ksvJrzmVkfBoDPZkp5adOw4nPedWK5VLR7GJOi2/vgjtuVguzYSqsyd7qSGORSx3pTdPDFWPguzU+nod4iR1fPnc8zlC1dOzMKXPE9RZw1AHAJKa4ePRGPwtzMbnXUithbYBgexYT40InSpM6eOk1lEkEfqqXoB6QSxMz6bcqDHNsEjyoOpRkH3OpqgRVe0Tqh4j2bvgqq7xoKE2YhCh6mHGiFrkmNk+AZ0FW1NmIFJvVGy3CzNO4UrCGlnxgiGA2EQdB9HDNPo01ni3jEHEJur0VL229aV1bFUWqHp2ql6YfiFVzesIQISqx0H21psgEdU8ClLg0RjREL3yUmrUUPNFRCBiu10c49Q5LzVSyRDTFI9N1NGME8Vmrn1M71WEIELV07OZE5d3UhcpiFD19ASpon54lwMBoOpRjNHMiX0hfnDU5Tc8GiPJpPQ3Pt5d+dxHwjk8j8fjfawADue+HV4awp88gnZB4pXw3pnKnUM1/0UCaoFN1GnNvGuVD6QU6euEgMQm6nTsS6/yYesclQ2qHsUYLa2MD9G2dAkCCVVPx74s/y8ZpbRQXxPE8oXw3hLb7YIUDlQLH6Ut2zJNVDWw3Y73+NQmZcbTh/S5N06wiTqp8Sl/sy7yP1UbP6+pAjlMj6vhZUf4ky+gn9doKPby0p2yyN22QNWTs5cbk4pDDzDh1SPx6f2lqkuZu20xqMDMsN3Oa7wrvm9ymm3vzvy5arxlAubXkXopS5B8Dv55iy3hvdNzRZ86+pKYk1JB8mfCnzxB1b2NTaNL9HvFP9rLon0uAVWPX9XvdRQ9J5JD1XnHjiBAZKK/ZQjoV8J7BagVOMgqIT3mn3fEGvA2NzSlqq8oqg4OsktIj4pOIfouU1D/Jry3wHY7L6G8q01UFe9G6vXzUWaJ6Pl174iqjmUB7sekoSo6bAtUPfU4KrpyaTFzBYGqR+zT70bqKxa3wJVUaix8/Aw8fLp9ov8DX0h+NAYqMDziQRAdv5TszquX2ETNw7r8QfjQBrj+yPYH8gosVAkslpTugJyTKFwQHfGrqpeEwSgAWdi4AwR6qo4ZDkTPJV4AQTQxAdH1VX01yndJRGwxBdHNvToC1iX5uAcEUUQDoptFBQiiiDcQXTNkex+7ifiHaCp9BdH14zMgiILkf4rNM2gY6ak5dcscktbrIX4qp1B4325EK+luB4K/ng8afiacTvQKT/GyhuXGB47CujSAW0uFVOMb4LIS302JrhqfgPWPH+Edqa9z2f8yfSIuhZfVs4LoqovXC4zJMSibKVaA62Z42fgjiP5u+YRSD8pmCqyH+f/ZkaLme1Ois5piIhgY1Zltl+tTExyo+RFPb8lo6j8AYDkJfQaPb4ZqrnPanG5EdMoH5O7TK8J7kYTeDtUCh/HMeEe8U7JVdGLLvzFVoExClU/GWN4R75iHjAeF0vJHEmqX6O++iZ6lomu0/GFbbmNaEt6+tUV08m/CZBak2rl8Ai/CnmhaIzrlg8oMBwUtf/uhaoP3VvMdLFK6iktBwKYHf5VxVf2V8rWN7ztvGDUOpvHsbAsorERyYVtUK1jvtomu+rMtk8waR2j5hxWPxvZdVhKm6GUuykPApAN/lXFtfVvBn4pO/AWBXBJStPwd5DyEiktjnegyVOu/00zKjBXhvaid27ct31wR/ZsjEsSoPGj5h58lG1eDW8CT/sSiJmBRgb/Wc56WS6JwSPUh96Llf6AFNqWo4bokYGr15+YvbbyglMgeEx0TtPxTz3mgZqRHMBzwg1zKmFZsbMvZSa1zfd4LWv4sLHHl66RmuQ628IZonFnHlNKM7L26BFFVybHqQLxu/KKffStY+z65RW6lRrT8g6u5f/EgetUkVD1k+QtqfoxNqJOsc1I4whrpQ6Y7rVyreRXqRKmqvoh4UGbslSdtNe9iOlm/GXO42asCja0KR3hMNaafOsJBQcs/bPWq43LSG9aZs/n14cH+4Sp2fGZIYtnNXws3zI2Mlr/dvK7jdgF1iokpWv7BZ/+KIyH61CwMWv7BsORbvdLwXm0Eg4OWvz17SxXCknN1oiNezJL54KDlbwfLNqnqnEa5kW0Ch5Z/EBzj6bcQ16ufLqxgeB1o+ZtjWKUifNcsDNWPtZzuYrT8g/nyTWwXOdO4k2tG54+Wv/98rY9yZtSwMCzq62j5W8GvTdayWLqrgyskWv5eZ8M0cNRYHhCc7Gj5eyd5m8SsqNERC9YwQMvfO8n7pBptsYCAlr/X8U0vkTdIUHqf9gAtf68kX6YKiM7CL293Plr+Xkm+Th2YKVeyo+VPnqF1SZ5G8qkA0uygH0uH54WWv1sbepDWcJITWJUB2de2wULLnzQjd5rj1meZ1xiSvbUJGlr+yuPVg+T+yW6lIoOWv/X8BSR3QPaDVOOJp+/P7ZexpwZ+HCR3QPZOt5NKXHw2y2hM5gZWBSR3SPaDnGInhO9Ey/8yJhvDcQDJb4BcGqoISd3R8v8Nj4UF/NsDli4r+8Legrqvb9W7if5zmrjAdBYw34Dk9EpIe7ATF+0MWv4/MdjYwhnM1R+I2tIg9HJanmiWzOaJ4VpYxrYCW+0kqb1lwhfEqbpIyKLYIvgpH0LSyaiea+Q7ExGLjWVc1vDj7nz7MgDRq0jxKuTs1VnGA1YlsgpBci1/KQaVw9lvc8DDmpJUd/YDK23d3LG161Negz+OQd2HF1HWcp0QbYejGY438e/xeLwLSWx5vQ/DIa7f9Y24Go6/hmveg+gMki1JeF82YyePN3kT7AciNLZnLUlocXySr6VHWLeS4M0o8RjHdLKSGGJ6ffJI+EtxIoZQwHfC3z3I14mHGerWTfz3QPBVLlZ4HONJS0/9ZThQGaDFXir4KrcLH8d88meEnwVWeO5xVPDheE3ZhydLdIaWhlsID/6co4InSfQLSeuj56SOWwhiv+SQZGZL9A+25knamiIT9X4RJM/VnmRJ9A+kF2T/nKCXP9X+n0PW/UF0nqSfnlmbGFflCWJ/k4klyA2iKyexgvAPjIkviC2aVg08N4huk/wnwt9Lb+8rqd1LKyIO0YQSyxC2GBEQ3bfyT0e/djQ/XUhyP3Y8myu++p8zYo+g1O7jXwEGAPdSo6KkqXZPAAAAAElFTkSuQmCC"/>
</defs>
</svg>
</div>
@@ -302,13 +303,13 @@
<div class="stat-card">
<p class="stat-label">API 이용 건수</p>
<div class="stat-icon">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100" height="100" fill="url(#pattern0_2007_127)"/>
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="90" height="90" fill="url(#pattern0_892_81)"/>
<defs>
<pattern id="pattern0_2007_127" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2007_127" transform="translate(0 -0.00684932) scale(0.00684932)"/>
<pattern id="pattern0_892_81" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_892_81" transform="scale(0.00543478)"/>
</pattern>
<image id="image0_2007_127" width="146" height="148" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACUCAYAAAB4InCTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDM4MERCNkFCMUQwMTFGMDhFRkQ5RTJDMzIxRTM5RTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDM4MERCNkJCMUQwMTFGMDhFRkQ5RTJDMzIxRTM5RTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MzgwREI2OEIxRDAxMUYwOEVGRDlFMkMzMjFFMzlFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MzgwREI2OUIxRDAxMUYwOEVGRDlFMkMzMjFFMzlFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlF4bcgAAAgiSURBVHja7J0LiBVV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"/>
<image id="image0_892_81" width="184" height="184" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
</div>
@@ -320,13 +321,13 @@
<div class="stat-card">
<p class="stat-label">API 활용 기업</p>
<div class="stat-icon">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100" height="100" fill="url(#pattern0_2007_161)"/>
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="90" height="90" fill="url(#pattern0_892_93)"/>
<defs>
<pattern id="pattern0_2007_161" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2007_161" transform="translate(0 -0.00684932) scale(0.00684932)"/>
<pattern id="pattern0_892_93" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_892_93" transform="scale(0.00540541)"/>
</pattern>
<image id="image0_2007_161" width="146" height="148" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACUCAYAAAB4InCTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkU5Mzk4MDhCMUQwMTFGMDlFMzFEOEYxRTE4RTBGOUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkU5Mzk4MDlCMUQwMTFGMDlFMzFEOEYxRTE4RTBGOUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTkzOTgwNkIxRDAxMUYwOUUzMUQ4RjFFMThFMEY5QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTkzOTgwN0IxRDAxMUYwOUUzMUQ4RjFFMThFMEY5QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvePPbQAAAbISURBVHja7J1biFVV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"/>
<image id="image0_892_93" width="185" height="185" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAAC5CAYAAAB0rZ5cAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA55JREFUeNrs3eFt01AUgFEbdYCyQUbICM4ITNAyAhPUmaBigqYTwAYJE5ARvEGzweOZGKlUQraT28QJ50imPzB59PqrZVpil0UnpVTlDw95qwqmoMnbsizLlVEcp+wCv88fnoxjklY59M/GcETk3Rl8bRST1p7Ra2M4PPK1S5TJ2+XIPxrD4ZEnY7gIixz6xhjG+2AEiBxEDiIHkYPI4Qg3I/f/kretsYWY5+3RGKYX+db3amP48YTLFRA5iBxEjshB5CByEDmIHEQOIgeRI3IQOYgcRA4iB5GDyBE5iBxEDiKH/yvylFKd4tQD16wC1/RkDpGDyEHkIHIQOYgckYPIQeQgchA5iBxEDjdGcDHu2v9JaQyDtE8p/C7yy3NvBMPlE0KTP3zKsW9drnCtZnlb59jnIuea3ebtSeRcu3mZxj3/euGx42HXjO0/Ir2N7gScyRE5iBxEDiIHkcMx/Fj/cvj27StjvvXtTI7LFRA5iBxEDiIHkYPIETmIHEQOIgeRg8hB5CByRA4ih0t0lre/pZRmxf6GjBGasiybAWu298WbB625a++WOtWDGnmL57633LU31Cz29xyM0N5yeXcVkRf72xA/BL3WMm/1gP3agxF1W7b2wC8mfPKKvP1c2fP7j3mL+qJadLN1uQIiB5EjchA5iBxEDiIHkYPIQeSIHEQOIgeRg8hB5NDnXO8Maoq4d4A0A/fbBa65nfhx3ZxwrchZ7N7lb5jGqZwXwuZemf1punW5gmtyEDmIHEQOIgeRg8gROYgcRA4iB5GDyEHkIHJEDiIHkYPIQeQgchA5vHGWmwt19xCpgl5u0/f8927NWbF/3HmEJq+5mupBzZ9rHfVa+fOse9ZqZzoLWm6V12uuIvIu8IfA19sM2GcWuGa73mQjD55t3xfMXeQJqxh+RzSXKyByRA4iB5GDyEHkIHIQOYgckYPIQeQgchA5iBxEjshB5HDJzvUez80ZXqvJ2zJozWbix3V5wrWe8/Zj0nNN41TOC2Fzr8z+NN26XME1OYgcRA4iB5GDyEHkiBxEDiIHkYPIQeQgchA5IgeRg8hB5CByEDmIHESOyEHkIHIQOYgcRA4iB5Ejct7f1ghOF3kzYv/GyGKUZbkbOU9fFAfOo4186PNlVvnAiDzW84jZ74zrL18H7rf5/WtKad3z2JWfebs113hmf9Tsnnpm95K32es/8PiPHb8Z8rsfLLM/fHZ1F/Nb6z+B/xJgACa/EiM9CgOoAAAAAElFTkSuQmCC"/>
</defs>
</svg>
</div>