style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  background-color: #fff;
}

header {
  background: none;
  background-image: url('./assets/bg_top 1-2.png');
  background-size: auto 100%;
  position: relative;
  z-index: 0;
}

.container {
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 0 1.25rem; /* 20px */
  
}

/* 상단 바 스타일 */
.top-bar {
 
  background-color: transparent;
  height: 3.75rem; /* 60px */
  display: flex;
  align-items: center;
  position: relative;
  width: 64.3%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.wave-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/wave.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.1;
  z-index: 1;
}

.top-bar .container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0.625rem; /* 10px */
}

.logo img {
  flex : 1;
  height: 3rem; /* 42px */
  width: auto;
  object-fit: contain;
  transform: scale(1.0);
  transform-origin: left center;
}

.space p {
  flex : 2;
}


.top-menu {
  flex : 3;
  display: flex;
  gap: 0rem; 
  font-size :0; /* 16px */
}

.top-menu a {
  text-decoration: none;
  color: #222;
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  line-height: 1;
}

.top-menu a:hover {
  color: #ffd600;
}

/* 소비자보호포털, 상품공시실 메뉴 스타일 */
.top-menu a:nth-last-child(3),
.top-menu a:nth-last-child(2),
.top-menu a:last-child {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
}

/* 메인 메뉴 바 스타일 */
.main-menu-bar {
  background-color: #fff;
  height: 3.75rem; /* 60px */
  display: flex;
  align-items: center;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  margin-top: 0;
  width: 64.3%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.main-menu-bar .container {
  display: flex;
  justify-content:center;
  align-items: center;
  width: 100%;
  position: relative;
  height: 100%;
  padding:0px;
}

.main-menu {
  display: flex;
  flex:7;
  gap: 1.5rem; /* 40px */
  align-items: center;
  justify-content: center;
  height: 100%;
}

.main-menu a {
  text-decoration: none;
  color: #333;
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  display: flex;
  align-items: center;
  height: 100%;
}

.main-menu a:hover {
  color: #0046FF;
}

/* 메인 헤더 스타일 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2.5rem; /* 12px 40px */
  height: 3.75rem; /* 60px */
}

.header-icons {
  display: flex;
  gap: 1.25rem; /* 20px */
  font-size: 1.25rem; /* 20px */
  color: #333;
}

.header-icons span {
  cursor: pointer;
}

.header-icons span:hover {
  color: #0046FF;
}

/* 상단 네비게이션 */
.top-nav {
  background-color: #052c59;
  color: white;
  padding: 0.75rem 1.5rem; /* 12px 24px */
}

.top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-menu .logo {
  font-size: 1.3rem;
  font-weight: bold;
  flex : 4;
}

.top-menu .space {
  font-size: 1.3rem;
  font-weight: bold;
  flex : 3;
}

.top-menu nav ul {
  flex : 7;
  display: flex;
  list-style: none;
  gap: 1.25rem; /* 20px */
}

.top-menu nav ul li {
  cursor: pointer;
}

.top-icons button {
  background: none;
  border: none;
  color: white;
  margin-left: 0.625rem; /* 10px */
  font-size: 1.2rem;
}

/* 메인 레이아웃 */
.main-layout {
  display: flex;
  padding: 1.875rem; /* 30px */
  gap: 1.875rem; /* 30px */
}

/* 본문 영역 */
.main-content {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
}

.main-hero,
.guide-section,
.analysis-section,
.asset-section,
.portfolio-section {
  background-color: white;
  padding: 1.25rem; /* 20px */
  border-radius: 0.5rem; /* 8px */
  min-height: 9.375rem; /* 150px */
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
}

/* 사이드바 */
.right-sidebar {
  flex: 1;
  background-color: #e9eff5;
  padding: 1.25rem; /* 20px */
  border-radius: 0.5rem; /* 8px */
  height: fit-content;
}

/* 푸터 스타일 */
.footer {
  background-color: #f9f9f9;
  padding: 3.75rem 2.5rem 2.5rem; /* 60px 40px 40px */
  margin-top: 3.125rem; /* 50px */
}

.footer-top {
  display: flex;
  justify-content: space-between;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  gap: 2.5rem; /* 40px */
}

/* 왼쪽 영역 */
.footer-left {
  flex: 1;
}

.customer-center h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  margin-bottom: 0.9375rem; /* 15px */
  color: #333;
}

.phone-number {
  font-size: 2rem; /* 32px */
  font-weight: 700;
  color: #0046FF;
  margin-bottom: 0.625rem; /* 10px */
}

.ai-service p {
  font-size: 0.875rem; /* 14px */
  color: #666;
  margin-bottom: 1.25rem; /* 20px */
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.contact-list a {
  text-decoration: none;
  color: #666;
  font-size: 0.875rem; /* 14px */
}

.contact-list a:hover {
  color: #0046FF;
}

/* 가운데 영역 */
.footer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}

.footer-links {
  display: flex;
  gap: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

.footer-links a {
  text-decoration: none;
  color: #666;
  font-size: 0.875rem; /* 14px */
}

.footer-links a:hover {
  color: #0046FF;
}

.company-info {
  color: #999;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.6;
}

/* 오른쪽 영역 */
.footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}

.service-icons, .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9375rem; /* 15px */
}

.service-icons a, .social-icons a {
  text-decoration: none;
  color: #666;
  font-size: 0.875rem; /* 14px */
  display: flex;
  align-items: center;
  gap: 0.3125rem; /* 5px */
}

.service-icons a:hover, .social-icons a:hover {
  color: #0046FF;
}

.awards {
  display: flex;
  gap: 0.9375rem; /* 15px */
  margin-top: 1.25rem; /* 20px */
}

.awards img {
  height: 2.5rem; /* 40px */
}

.top-button {
  align-self: flex-end;
  background-color: #0046FF;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  border-radius: 0.25rem; /* 4px */
  cursor: pointer;
  font-size: 0.875rem; /* 14px */
  margin-top: 1.25rem; /* 20px */
}

.top-button:hover {
  background-color: #0033CC;
}

.nav-buttons {
  
  display: flex;
  background-color: #009cde;
  height: 100%;
  margin-left: 0;

  align-items: center;
}

.icon-btn {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease;
  padding: 0;
}

.icon-btn img {
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.icon-btn:hover {
  filter: brightness(1.05);
}

.icon-btn:hover img {
  filter: brightness(0) invert(1) brightness(1.05);
}

/* 펀드 상세 본문 */
.fund-detail-main {
  max-width: 56.25rem; /* 900px */
  margin: 2.5rem auto 3.75rem auto; /* 40px auto 60px auto */
  padding: 0 1.25rem; /* 0 20px */
  text-align: center;
}

/* [1] 상단 정보 카드 */
.fund-info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
  justify-content: flex-start;
}
.fund-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  min-width: 140px;
  flex: 1 1 140px;
  padding: 18px 20px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.card-label {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.card-value {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.fund-yield {
  color: #e23a3a;
  font-weight: 700;
}

/* [2] 펀드 정보 탭 */
.fund-tabs {
  margin-bottom: 32px;
}
.fund-tabs input[type="radio"] {
  display: none;
}
.fund-tabs label {
  display: inline-block;
  padding: 10px 28px;
  margin-right: 2px;
  background: #f5f5f5;
  color: #666;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fund-tabs input[type="radio"]:checked + label {
  background: #fff;
  color: #009cde;
  border-bottom: 2px solid #009cde;
  z-index: 2;
  position: relative;
}
.fund-tabs .tab-content {
  display: none;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 28px 24px;
  margin-top: -1px;
}
#tab1:checked ~ .tab1-content,
#tab2:checked ~ .tab2-content,
#tab3:checked ~ .tab3-content {
  display: block;
}

/* [3] 데이터 표 */
.fund-table-section {
  margin-top: 32px;
}
.fund-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fafbfc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.fund-data-table th,
.fund-data-table td {
  padding: 14px 18px;
  font-size: 15px;
  text-align: left;
}
.fund-data-table th {
  background: #f0f2f5;
  color: #666;
  font-weight: 500;
  width: 180px;
  border-bottom: 1px solid #e5e5e5;
}
.fund-data-table td {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #e5e5e5;
}
.fund-data-table tr:last-child th,
.fund-data-table tr:last-child td {
  border-bottom: none;
}
.fund-data-table input[type="checkbox"][checked][disabled] {
  accent-color: #0058A3;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
  cursor: not-allowed;
}

/* 펀드 상세 상단 요약 정보 */
.fund-summary {
  margin-bottom: 36px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 32px 32px 28px 32px;
}
.fund-summary-grid {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  gap: 20px;
  align-items: flex-start;
}

.fund-summary-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 160px;
}
.fund-yield-label {
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}
.fund-yield-value {
  font-size: 28px;
  font-weight: 700;
  color: #e23a3a;
  margin-bottom: 8px;
}
.fund-yield-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.fund-yield-tabs span {
  font-size: 13px;
  color: #888;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 2px 12px;
  cursor: pointer;
}
.fund-yield-tabs .active {
  background: #122072;
  color: #fff;
  font-weight: 500;
}
.fund-yield-graph {
  width: 100%;
  height: 240px;
  padding-bottom: 20px;
  background: #f0f2f7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 13px;
  margin-top: 8px;
}

.fund-summary-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.fund-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.fund-tag {
  background: #f5f7fa;
  color: #122072;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  padding: 3px 14px 3px 14px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}
.fund-title {
  font-size: 20px;
  font-weight: 700;
  color: #122072;
  margin-bottom: 10px;
}
.fund-class {
  font-size: 15px;
  color: #888;
  font-weight: 400;
  margin-left: 8px;
}
.fund-code {
  font-size: 13px;
  color: #bbb;
  font-weight: 400;
  margin-left: 8px;
}
.fund-base-info {
  display: flex;
  gap: 28px;
}
.fund-base-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.base-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 2px;
}
.base-value {
  font-size: 16px;
  font-weight: 600;
  color: #122072;
}

.fund-summary-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 160px;
}
.fund-rating {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.star {
  font-size: 20px;
  color: #e0e4ef;
  margin-right: 2px;
}
.star.filled {
  color: #ffc700;
}
.rating-score {
  font-size: 15px;
  color: #888;
  margin-left: 6px;
  font-weight: 500;
}
.fund-info-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.info-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.info-label {
  color: #888;
}
.info-value {
  color: #122072;
  font-weight: 600;
}

.fund-detail-title {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin: 40px 0 28px 0;
  letter-spacing: -1px;
  font-family: 'Noto Sans KR', sans-serif;
}

.tab1-content {
  text-align: left;
}
.info-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem; /* 40px */
  text-align: left;
}
.info-icon {
  width: 4.5rem; /* 72px */
  height: 4.5rem; /* 72px */
  min-width: 4rem; /* 64px */
  min-height: 4rem; /* 64px */
  max-width: 5rem; /* 80px */
  max-height: 5rem; /* 80px */
  margin-right: 1.25rem; /* 20px */
  object-fit: contain;
  border-radius: 0.75rem; /* 12px */
  background: #f5f7fa;
  box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.04);
  display: block;
}
.info-text {
  flex: 1;
  text-align: left;
}
.info-text h4 {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  margin-bottom: 0.625rem; /* 10px */
  color: #222;
}
.info-text p {
  font-size: 0.9375rem; /* 15px */
  color: #444;
  line-height: 1.6;
  margin-bottom: 0.5rem; /* 8px */
}

.fund-stats-section {
  background: #fff;
  margin: 2.5rem 0 0 0; /* 40px 0 0 0 */
  border-radius: 0.875rem; /* 14px */
  overflow: hidden;
}
.fund-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}
.fund-stats-title-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem; /* 20px */
  text-align: center;
}
.stats-icon-bg {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: #009cde;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.625rem auto; /* 0 auto 10px auto */
}
.stats-icon-bg img {
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
  display: block;
}
.stats-title {
  color: #009cde;
  font-size: 1rem; /* 16px */
  font-weight: bold;
  margin-bottom: 0.25rem; /* 4px */
}
.stats-desc {
  color: #888;
  font-size: 0.8125rem; /* 13px */
  margin-bottom: 0;
}
.fund-stats-cell {
  padding: 1.25rem; /* 20px */
  text-align: center;
  font-size: 0.9375rem; /* 15px */
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stats-value {
  display: block;
  font-size: 1.5rem; /* 24px */
  font-weight: bold;
  color: #122072;
  margin-top: 0.375rem; /* 6px */
}

.top-wave-bg {
  width: 100%;
  height: 9.375rem; /* 150px */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.shinhan-info-box {
  background: #fff;
  border: 1.5px solid #dbe8f7;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
  padding: 2rem 5rem 1.5rem 1.5rem;
  margin: 2.5rem 0 1.5rem 0;
  font-size: 1.3rem;
  color: #222;
  position: relative;
}
.shinhan-info-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #0070c0;
}
.shinhan-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: #eaf3fa;
  color: #1a9bd7;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  margin-right: 0.75rem;
  border: 2px solid #1a9bd7;
}
.shinhan-info-title-text {
  color: #0070c0;
  font-weight: 700;
  font-size: 1.15rem;
}
.shinhan-info-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.84rem;
}
.shinhan-info-list li {
  margin-bottom: 0.35rem;
  line-height: 1.7;
  color: #222;
}
.shinhan-info-list li.red {
  color: #e94e77;
  font-weight: 500;
}
.shinhan-info-footnote {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #888;
  text-align: right;
}
.floating-bar-exact {
  position: fixed;
  top: 19.8125rem; /* 317px → 19.8125rem */
  left: 50%;
  width: 6rem; /* 96px → 6rem */
  margin-left: 32.5rem; /* 520px → 32.5rem */
  padding: 0.3125rem; /* 5px → 0.3125rem */
  box-sizing: border-box;
  height: 14.5rem; /* 232px → 14.5rem */
  background: #fafbfc;
  z-index: 1000;
  pointer-events: none;
}
.floating-bar-inner {
  width: 100%;
  height: 100%;
  background: none;
  border-radius: 3rem 3rem 3.75rem 3.75rem / 3rem 3rem 6.25rem 6.25rem;
  box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  position: relative;
}
.floating-circle-exact {
  width: 5.375rem; /* 86px → 5.375rem */
  height: 5.375rem;
  background: #16a8e3;
  border-radius: 50%;
  margin: 0 auto 0.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.10);
  position: relative;
}
.floating-headset-icon {
  display: block;
  width: 1.25rem; /* 20px → 1.25rem */
  height: 1.25rem;
  margin-bottom: 0.3125rem;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 11v-1c0-4.42 3.58-8 8-8s8 3.58 8 8v1" stroke="%23fff" stroke-width="1.5" stroke-linecap="round"/><rect x="3.5" y="11" width="3" height="5" rx="1.5" stroke="%23fff" stroke-width="1.5"/><rect x="13.5" y="11" width="3" height="5" rx="1.5" stroke="%23fff" stroke-width="1.5"/><path d="M6.5 16v1a2 2 0 0 0 2 2h1" stroke="%23fff" stroke-width="1.5" stroke-linecap="round"/><path d="M16.5 16v1a2 2 0 0 1-2 2h-1" stroke="%23fff" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat center/contain;
}
.floating-title-exact {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.0625rem;
}
.floating-menu-exact {
  width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.floating-menu-item-exact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  color: #666;
  font-size: 0.98rem;
  font-weight: 400;
  padding: 0;
}
.floating-menu-icon-exact {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
.floating-menu-icon-exact.clock {
  background: url('data:image/svg+xml;utf8,<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="7.5" stroke="%23666" stroke-width="1.5" fill="none"/><path d="M9 3.5v5l3 3" stroke="%23666" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat center/contain;
}
.floating-menu-icon-exact.heart {
  background: url('data:image/svg+xml;utf8,<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16s-6-3.73-6-8.25A4.25 4.25 0 0 1 9 3.5a4.25 4.25 0 0 1 6 4.25C15 12.27 9 16 9 16Z" stroke="%23666" stroke-width="1.5" fill="none"/></svg>') no-repeat center/contain;
}
.floating-menu-label {
  color: #666;
  font-size: 0.98rem;
  font-weight: 400;
  text-align: center;
  margin-top: 0;
  letter-spacing: -0.0625rem;
}
.floating-tail-exact {
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  background: #e6e6ee;
  border-radius: 50%;
  margin: 0.5rem auto 0 auto;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
  position: relative;
  left: 0.25rem;
  opacity: 0.5;
}

.top-menu .dot {
  color: #999;
  margin: 0.25rem;
  font-size: 1rem;
  user-select: none;
}



/* 여기서부터 gnb 메뉴 스타일 */

.gnb-sub-menu {
  background: #f5f7fa;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e8ef;
  width: 64.3%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Noto Sans KR', sans-serif;
}

.gnb-sub-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gnb-home-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 8px;
}

.gnb-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.gnb-links a {
  color: #222;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}

.gnb-links a:hover {
  color: #0046FF;
}

.gnb-icon-list {
  width: 80px;
  height: 80px;
  object-fit: contain;
}