#wrap {height: 100vh;}

/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; }
#container *{ scrollbar-arrow-color: #ddd; scrollbar-Track-Color: #ddd; scrollbar-base-color: #aaa; scrollbar-Face-Color: #aaa; scrollbar-3dLight-Color: #aaa; scrollbar-DarkShadow-Color: #aaa; scrollbar-Highlight-Color: #aaa; scrollbar-Shadow-Color: #aaa;}
#container ::-webkit-scrollbar { width: 5px; }
#container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }

/* =============================================================
   메인 페이지 전용 스타일 (index.html)
   ─────────────────────────────────────────────────────────────
   목차 (대분류 → 중분류 — 줄번호는 IDE 검색 시 참고용):
     [대분류] 풀페이지 섹션 전환  (.fp-wrapper / .fp-section / .fp-nav)
     [대분류] 챗봇                (.chatbot-btn / .chatbot-modal)
     [대분류] 메인 페이지 콘텐츠
       [중분류] 공통 버튼          (.btn-primary)
       [중분류] 히어로 섹션        (.hero, .hero-bg, .hero-slides)
       [중분류] 퀵 메뉴            (.quick-menu, .quick-list)
       [중분류] 배경 장식          (.main-deco, .main-deco__img--*)
       [중분류] 섹션 공통          (.section, .section-head, .section-title)
       [중분류] 공지사항/교육자료실 카드 (.info-grid, .info-card)
       [중분류] 교육일정 캘린더    (.cal-wrap, .cal-row, .cal-bar 등)
       [중분류] 메인 캘린더 override (.cal-wrap--main 전용)
       [중분류] 활동 갤러리        (.gallery-grid, .gallery-card)
   반응형 break point: 데스크톱 >1240px / 태블릿 ≤1240px / 모바일 ≤829px
   ============================================================= */

/* =============================================================
   [대분류] 풀페이지 섹션 전환 (Full-page Section Transition)
   - 메인 페이지 전용: 섹션 간 상하 페이드 전환 효과
   - .fp-wrapper: 뷰포트 고정 컨테이너
   - .fp-section: 각 섹션 (absolute, 헤더 높이만큼 top 오프셋)
   ============================================================= */

/* [중분류] 풀페이지 - 컨테이너 */
.fp-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

/* [중분류] 풀페이지 - 섹션 기본 (비활성 상태)
   - height에 100vh + 100dvh fallback 사용
     (dvh = 모바일 브라우저 주소창을 제외한 실제 viewport 높이.
      미지원 브라우저는 100vh fallback 사용)
   - overflow-y: auto + fullpage.js 의 canScrollIn() 가드로
     콘텐츠가 viewport보다 긴 섹션은 내부 스크롤 우선 → 가장자리에서만 섹션 전환 */
.fp-section {
  position: absolute;
  top: 0; /* 상단바(50px) + 헤더(80px) = 130px */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 관성 스크롤 */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s ease;
  will-change: transform;
  background: var(--white0);
}

.fp-section.hero {
    top: 130px;
    height: calc(100vh - 130px);
    height: calc(100dvh - 130px);
}

/* .fp-section.section--info {
    background: url(/images/web/gbai/main/deco_blue.png) right -400px top -430px;
    background-attachment: fixed;
} */

.fp-section.footer {
  position: absolute;
  height: auto;
  top: auto;
  bottom: 0;
}

/* Footer 진입 시 직전 섹션(gallery)이 footer 높이만큼 위로 밀려남 */
.fp-section.active.pushed-by-footer {
  transform: translateY(calc(-1 * var(--footer-h, 238px)));
}

/* @media (max-width: 1240px) {
  .fp-section {
    top: 130px;
    height: calc(100vh - 130px);
    height: calc(100dvh - 130px);
  }
  .fp-section.footer {
    top: auto;
    height: auto;
  }
} */


/* 배너존 */
.banner_zone,
.banner_zone2 {line-height: 1; background: #fff; border-top: 1px solid #d1d8e4;}
.banner_zone .container,
.banner_zone2 .container {position: relative; height: 4rem; overflow: hidden;}
.banner_zone h2,
.banner_zone2 h2 {float:left; margin-top: 1.5rem; width: 4rem; font-size: 0.8rem; font-weight: 600; color: #302b2b;}
.banner_zone .btn,
.banner_zone2 .btn {float: left; margin-top: 1.1rem; overflow: hidden;}
.banner_zone .btn a,
.banner_zone2 .btn a {float: left; width: 1.8rem; height: 1.8rem; line-height:1.8rem; border-radius:50%; background:#f6f6f6; color: #222; text-align:center; overflow: hidden;}
.banner_zone .btn a + a,
.banner_zone2 .btn a + a {margin-left:0.25rem;}
.banner_zone .btn a.play,
.banner_zone2 .btn a.play {display:none;}
.banner_zone .bnWrap,
.banner_zone2 .bnWrap { width: calc(100% - 12rem); float:left; padding-top: 0.75rem; padding-left:1.75rem; overflow: hidden;}
.banner_zone .bnWrap a,
.banner_zone2 .bnWrap a {display: block; height: 2.5rem; line-height: 2.3rem; text-align: center; margin:0 5px; overflow: hidden;}
.banner_zone .bnWrap a img,
.banner_zone2 .bnWrap a img {max-width: 100%; max-height: 100%; vertical-align: middle;}

/* 푸터링크 */
.footer_link {padding-top: 10px; padding-bottom: 10px;}
.footer_link li a:before {border-color: rgba(255,255,255,0.2);}
.footer_link li a strong {color: #fff;}


/* 1240px 이하: 풀페이지 레이아웃 해제 → 일반 스크롤
   JS(fullpage.js)도 이 너비에서 return하므로 .active가 추가되지 않음.
   섹션을 모두 보이게 하고 normal flow로 복원한다. */
@media (max-width: 1240px) {
  #wrap {
    height: auto;
  }
  .fp-wrapper {
    position: static;
    overflow: visible;
    height: auto;
    margin-top: 140px;
  }
  .fp-section {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    overflow-y: visible;
    overflow-x: visible;
    transform: none !important;
  }
  .fp-section.hero {
    top: auto;
    height: auto;
    padding: 0;
  }
  .fp-section.footer {
    display: none;
  }
  .fp-nav {
    display: none;
  }
  
  .banner_zone .bnWrap, .banner_zone2 .bnWrap {width: calc(100% - 8rem);}  
  
}

@media (max-width: 829px) {
  .fp-wrapper {
    margin-top: 110px;
  }
  
  /* 섹션 공통 */
  .section {
    padding: 0;
  }
  .fp-section.footer {
    top: auto;
    height: auto;
  }
  
  .banner_zone h2, .banner_zone2 h2 {display:none;}
  .banner_zone .btn a, .banner_zone2 .btn a {width: 1.5rem; height: 1.5rem; line-height: 1.5rem;}
  .banner_zone2 .bnWrap { width: calc(100% - 7rem);}
}

/* [중분류] 풀페이지 - 섹션 전환 상태 클래스 */
.fp-section.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}
.fp-section.fade-out-top {
  opacity: 1;
  transform: translateY(-100vh);
  z-index: 1;
}
.fp-section.fade-out-bottom {
  opacity: 1;
  transform: translateY(100vh);
  z-index: 1;
}
.fp-section.fade-in-top {
  opacity: 1;
  transform: translateY(-100vh);
}
.fp-section.fade-in-bottom {
  opacity: 1;
  transform: translateY(100vh);
}

/* [중분류] 풀페이지 - 우측 도트 네비게이션 */
.fp-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray30);
  padding: 0;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.3s;
}
.fp-nav__dot:last-child {
    display: none;
}
.fp-nav__dot.active {
  background: var(--sub-b-basic);
  transform: scale(1.3);
}

@media (max-width: 829px) {
  .fp-nav {
    right: 14px;
    gap: 8px;
  }
  .fp-nav__dot {
    width: 7px;
    height: 7px;
  }
}

/* =============================================================
   [대분류] 챗봇 (Chatbot)
   - 메인 페이지 전용: 우하단 챗봇 버튼 + 모달 대화창
   ============================================================= */

/* [중분류] 챗봇 - 플로팅 버튼 */
.chatbot-btn {
  position: fixed;
  bottom: 1%;
  right: 2%;
  cursor: pointer;
  z-index: 100;
}

/* [중분류] 챗봇 - 모달 오버레이 */
.chatbot-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 30px;
  z-index: 200;
}
.chatbot-modal.open {
  display: flex;
}

/* [중분류] 챗봇 - 대화 패널 */
.chatbot-modal__panel {
  width: 100%;
  max-width: 445px;
  max-height: 640px;
  background: var(--white0);
  border-radius: 50px 50px 0 50px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: chatbot-in 0.25s ease-out;
}
@keyframes chatbot-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* [중분류] 챗봇 - 헤더 */
.chatbot-modal__head {
  position: relative;
  height: 81px;
  background: var(--sub-b-40);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatbot-modal__title {
  font-size: var(--title-s-b);
  font-weight: 600;
  color: var(--gray90);
}

.chatbot-modal__close {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  color: var(--gray90);
  font-size: var(--title-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chatbot-modal__close i {font-size: 24px;}

/* [중분류] 챗봇 - 대화 본문 */
.chatbot-modal__body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
.chatbot-msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chatbot-msg__avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  margin-top: 6px;
}
.chatbot-msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chatbot-msg__text {
  color: var(--gray90);
  font-size: var(--body-md);
  line-height: 150%;
}

/* [중분류] 챗봇 - 추천 질문 버튼 */
.chatbot-suggest {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chatbot-suggest button {
  padding: 16px 30px;
  border-radius: 999px;
  border: 2px solid var(--sub-b-basic);
  background: var(--white0);
  color: var(--sub-b-110);
  font-size: var(--body-s);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.chatbot-suggest button:hover {
  background: var(--sub-b-basic);
  color: var(--white0);
}

/* [중분류] 챗봇 - 입력창 */
.chatbot-modal__input {
  width: 100%;
  max-width: 385px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 28px;
  border: 1px solid var(--gray10);
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 10px;
}
.chatbot-modal__input input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: var(--body-md);
  color: var(--gray90);
  font-weight: 400;
  background: transparent;
}
.chatbot-modal__input input::placeholder {
  color: var(--gray40);
  font-size: var(--body-md);
  font-weight: 400;
}
.chatbot-modal__input input:not(:placeholder-shown) + button,
.chatbot-modal__input input:not(:placeholder-shown) + button svg {
  background: var(--sub-b-basic);
  color: var(--white0);
}
.chatbot-modal__input button {
  display: inline-flex;
  vertical-align: middle;
  text-align: center;
  padding: 8px;
  border-radius: 50%;
}
.chatbot-modal__input button svg {
  width: 20px;
  height: 20px;
}

/* [중분류] 챗봇 - 모바일 반응형 */
@media (max-width: 829px) {
  .chatbot-btn {
    bottom: 1%;
    right: 3%;
    transform: scale(0.5);
    transform-origin: bottom right;
  }
  .chatbot-modal {
    padding: 0;
  }
  .chatbot-modal__panel {
    max-width: none;
    max-height: 100%;
    border-radius: 0;
  }
}

/* =============================================================
   [대분류] 메인 페이지 콘텐츠
   - 히어로, 퀵메뉴, 공지사항, 교육자료실, 교육일정, 활동갤러리
   ============================================================= */

/* [중분류] 공통 버튼 (.btn-primary) */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  background: linear-gradient(90deg, #44b0ff 0%, #4485ff 100%), #ffffff;
  color: var(--white0);
  border-radius: 10px;
  font-size: var(--body-sm-b);
  font-weight: 700;
  transition:
    filter 0.2s,
    transform 0.2s;
  box-shadow: 0 8px 20px rgba(68, 176, 255, 0.3);
  overflow: hidden;
  z-index: 1;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #4485ff 0%, #0a44b0 80%), #0a44b0;
  transition: all 0.2s ease;
  z-index: -1;
}
.btn-primary:hover::before {
  content: '';
  right: 0;
}

.btn-primary__arrow {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* =============================================================
   [중분류] 히어로 섹션 (Hero)
   - 메인 배너: 타이틀 텍스트 + 이미지 슬라이더 + CTA 버튼
   ============================================================= */
.hero {
  overflow: hidden;
  padding: 0;
}

/* 히어로 - 배경 블롭 (그라디언트 원형 장식) */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-blob--1 {
  width: 520px;
  height: 520px;
  left: -150px;
  bottom: -120px;
  background: radial-gradient(circle, #44b0ff 0%, rgba(68, 176, 255, 0) 70%);
}
.hero-blob--2 {
  width: 380px;
  height: 380px;
  left: 35%;
  bottom: -160px;
  background: radial-gradient(circle, #ffb144 0%, rgba(255, 177, 68, 0) 70%);
  opacity: 0.35;
}

/* 히어로 - 내부 레이아웃 (텍스트 좌측 + 이미지 우측) */
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  height: 100%;
  z-index: 1;
}

/* 히어로 - 텍스트 영역 */
.hero-text {
  min-height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-tag {
  display: block;
  color: var(--sub-b-basic);
  font-size: var(--body-md-b);
  font-weight: 600;
}
.hero-title {
  font-size: 55px;
  color: var(--gray90);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 20px;
}
.hero-desc {
  color: var(--gray50);
  font-size: var(--title-s);
  font-weight: 400;
  margin-bottom: 40px;
}
.hero-text .btn-primary {
  width: fit-content;
}

/* 히어로 - 이미지 비주얼 영역 (우측 절대 배치) */
.hero-visual {
  position: absolute;
  top: 0;
  bottom: 30%;
  right: 0;
  left: 42%;
  border-radius: 50px 0 0 50px;
  overflow: hidden;
  background: var(--sub-b-30);
  z-index: 2;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 히어로 - 이미지 슬라이더 */
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  /* position: absolute; */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0; */
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
}
.hero-visual .slick-list {height: 100%;}
.hero-visual .slick-track {height: 100%;}
.hero-visual .slick-slide {vertical-align: top;}
.hero-visual i {font-size: 24px;}
.hero-visual .hero-play {display: none;}

/* 히어로 - 슬라이드 컨트롤 (이전/다음 버튼) */
.hero-controls {
  --hc-radius: 30px;
  position: absolute;
  width: 304px;
  height: 92px;
  right: 0px;
  bottom: 0px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 60px;
  border-top-left-radius: var(--hc-radius);
  background: var(--white0);
}
.hero-controls::after {
  content: '';
  position: absolute;
  left: calc(var(--hc-radius) * -1 - 1px);
  bottom: -1px;
  width: calc(var(--hc-radius) + 1px);
  height: calc(var(--hc-radius) + 1px);
  background: radial-gradient(circle at top left, transparent var(--hc-radius), var(--white0) var(--hc-radius));
  pointer-events: none;
}
.hero-controls button {
  width: 40px;
  height: 40px;
  color: var(--gray90);
  font-size: var(--title-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* =============================================================
   [중분류] 퀵 메뉴 (Quick Menu)
   - 4개 바로가기 아이콘 (찾아오는 길, 이용안내, 프로그램, 공지사항)
   ============================================================= */
/* 데스크탑·태블릿: 섹션 내용 세로 가운데 정렬 */
.quick-menu {
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 829px) {
  .quick-menu {
    display: block;
  }
}
.quick-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  width: 100%;
  margin-top: 60px;
}
.quick-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: transform 0.2s;
}
/*
.quick-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
*/
.quick-icon svg {
  max-width: 55%;
  transition: all 0.2s;
}
.quick-list a:hover .quick-icon svg {
  animation: icon-float 0.8s ease-in-out infinite;
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
/*
.quick-icon img {
  width: 86px;
  height: 86px;
  filter: brightness(0) invert(1);
}
*/
/* 퀵 메뉴 - 아이콘 색상 변형 */
.quick-icon--blue {
  background: linear-gradient(180deg, #44b0ff 0%, #4485ff 100%);
}
.quick-icon--purple {
  background: linear-gradient(180deg, #5691ff 0%, #6f39ee 100%);
}
.quick-icon--green {
  background: linear-gradient(180deg, #64cc4f 0%, #00beae 100%);
}
.quick-icon--pink {
  background: linear-gradient(180deg, #ffd9ec 0%, #ff4fa3 100%);
}
.quick-icon--orange {
  background: linear-gradient(180deg, #ffb144 0%, #ff8000 100%);
}
.quick-icon--yellow {
  background: linear-gradient(180deg, #ffe344 0%, #ffbb00 100%);
}
.quick-label {
  font-size: var(--body-md-b);
  font-weight: 500;
  color: var(--gray90);
}

/* =============================================================
   [중분류] 배경 장식 (Background Deco)
   - 섹션 우측/좌측에 빠져나오는 반투명 3D 이미지
   - 적용 섹션:
     · .section--info     (공지사항+교육자료실 통합) → --swirl-top
     · .section--calendar (교육일정)                 → --cylinder + --blue-bottom
   - 각 클래스마다 데스크톱 기본 + 태블릿(≤1279) + 모바일(≤829) 3중 위치 정의
   ============================================================= */

/* [공통] deco 컨테이너 / 이미지 베이스 */
.main-deco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.main-deco__img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* common.css의 img { max-width: 100% } override — width 지정값 그대로 적용 */
  max-width: none;
}

/* [데스크톱 기본] 클래스별 위치 — 각 섹션 코너에서 빠져나오도록 음수 좌표 */

/* 통합 섹션(공지사항+교육자료실) — 우상단 파란 3D */
.main-deco__img--swirl-top {
  top: -33%;
  right: 50%;
  transform: translateX(130%);
  width: 43%;
  opacity: 0.9;
}

/* 교육일정 — 좌하단 초록 원기둥 (살짝 회전) */
.main-deco__img--cylinder {
  bottom: 19%;
  left: 50%;
  transform: rotate(2deg) translateX(-267%);
  opacity: 0.7;
  width: 19%;
}

/* 교육일정 — 우상단 파란 데코 */
.main-deco__img--blue-bottom {
  top: -155%;
  right: -20%;
  opacity: 0.9;
}

/* [태블릿 ≤1240px] 위치/사이즈 override */
@media (max-width: 1240px) {
  .main-deco__img--swirl-top {
    width: 1200px;
    top: 250px;
    right: -200px;
  }
  .main-deco__img--cylinder {
    width: 520px;
    bottom: 5%;
    left: -15%;
  }
  .main-deco__img--blue-bottom {
    width: 1000px;
    top: -60%;
    right: -20%;
  }
}

/* [모바일 ≤829px] 위치/사이즈 override
   — 이전엔 .main-deco { display:none } 이었으나, 통합 섹션에서도 노출되어야 해서 위치만 재정의 */
@media (max-width: 829px) {
  .main-deco__img--swirl-top {
    width: 800px;
    top: 15%;
    left: -38%;
  }
  .main-deco__img--cylinder {
    width: 300px;
    bottom: 35%;
    left: -40%;
  }
  .main-deco__img--blue-bottom {
    width: 400px;
    top: -41%;
    right: 10%;
  }
}

/* =============================================================
   [중분류] 섹션 공통 (공지사항, 교육자료실, 교육일정, 활동갤러리)
   - 섹션 헤더 (제목 + 더보기 버튼)
   ============================================================= */
.section:not(.footer) {
  padding: 130px 0 50px;
}
/* 섹션 콘텐츠는 배경 데코(.main-deco, z-index:0)보다 위로 */
.section > .container {
  position: relative;
  z-index: 1;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
}
.section-title {
  font-size: var(--title-md-b);
  font-weight: 600;
  color: var(--gray90);
}
.section-more {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-b-basic);
  font-size: 22px;
  transition: transform 0.2s;
}
.section-more svg {
  width: 40px;
  height: 40px;
  color: var(--sub-b-basic);
}

/* =============================================================
   [중분류] 공지사항 / 교육자료실 카드 (Info Cards)
   - 글래스모피즘 카드 UI (NEW 뱃지, 제목, 날짜, 화살표)
   ============================================================= */
.info-grid {
  display: grid;
  gap: 30px;
}
.info-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.section-cont_wrap .info-grid--3.no-data {
  grid-template-columns: repeat(1, 1fr);
}
.section--notice .info-grid--3 li:nth-child(n + 7) {
  display: none;
}

/* 통합 섹션(.section--info) — 공지사항 + 교육자료실 한 화면에 묶음 */
.info-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 45px 0;
  height: 100%;
}
.info-inner::after {
  display: none;
}

.section-cont_wrap {
  width: 56%;
}

.section--info .section--resource {
  margin-top: 23px;
}

/* 카드 기본 스타일 */
.info-card {
  width: 100%;
  min-height: 158px;
  position: relative;
  background: rgba(199, 232, 255, 0.5);
  border-radius: 20px;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 12px;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.section-cont_wrap .info-grid--3.no-data .info-card {
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* 카드 호버 효과 */
.info-card:hover {
  background: rgba(87, 185, 255, 0.4);
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
}
.section-cont_wrap .info-grid--3.no-data .info-card:hover {
  background: rgba(199, 232, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.info-card:hover .info-card__arrow {
  background: var(--sub-b-basic);
}
.info-card:hover .info-card__arrow svg path {
  fill: var(--white0) !important;
}
.info-card:hover .info-card__date {
  color: var(--white0);
  opacity: 1;
}

/* 카드 내부 요소 */
.info-card__badge {
  width: 52px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sub-b-basic);
  color: var(--white0);
  font-size: var(--caption);
  font-weight: 400;
  border-radius: 16px;
}
.info-card__title {
  font-size: var(--body-sm-b);
  font-weight: 400;
  color: var(--gray90);
  line-height: 1.5;
  margin: 12px 0 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
	text-overflow: ellipsis;
	/* ★★ 2줄 이상은 말줄임 처리 ★★ */
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.info-card__date {
  font-size: 15px;
  font-weight: 400;
  color: #44b0ff;
  opacity: 0.7;
}
.info-card__arrow {
  position: absolute;
  right: 24px;
  bottom: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white0);
  color: var(--sub-b-basic);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s;
}
.info-card__arrow svg {
  width: 67%;
}
.info-card__arrow:hover {
  background: var(--sub-b-basic);
}

/* 카드 변형 - 와이드 (.info-card--wide) — 교육자료실 카드 */
.info-card--wide {
  min-height: 158px;
}

/* =============================================================
   [중분류] 교육일정 캘린더 (Calendar)
   - 7열 그리드 캘린더, 날짜 셀, 이벤트 바
   ============================================================= */
/* 교육일정 */
.section--calendar { position:relative; width: 39%; }
.section--calendar .heading {display: flex; align-items: center;}
.section--calendar .heading span{font-size: 0.9rem; margin-left: 0.8rem;}
.section--calendar .month { height:60px; text-align:center; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to right, #44B0FF, #4485FF); border-radius: 20px; color: #fff; position: relative;}
.section--calendar .month a {  display:inline-block; width: 3.5rem; font-size:1.15rem; transition: all 0.05s; -webkit-transition: all 0.05s; line-height: 1.1rem; }
.section--calendar .month a.next{border-left: 1px solid rgba(255,255,255,0.5);}
.section--calendar .month a.prev{border-right: 1px solid rgba(255,255,255,0.5);}
.section--calendar .month a i { -webkit-transition:all 0.3s; transition:all 0.3s; }
.section--calendar .month .date { font-size: 22px; font-weight: 300;}
.section--calendar .month .date em { position: relative; display:inline-block; font-weight: 700; }
.section--calendar .month .date em::before{content: "."; display: inline-block; font-weight: 400; position: relative; margin: 0 5px 0 2px;}
.section--calendar .sche_table { text-align:center; border-radius: 20px; background: rgba(199,232,255,0.4); border: 1px solid #C7E8FF; padding: 10px 10px 0; height: 16.9rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.section--calendar .sche_table table { font-size:0.75rem; text-align:center; }
.section--calendar .sche_table th {font-weight:600; font-size: 15px; line-height:2.25rem; color: #2086E5; letter-spacing: 0;}
.section--calendar .sche_table tr:last-child td { padding-bottom: 1rem; }
/* .section--calendar .sche_table .sun { color:#c61018; }
.section--calendar .sche_table .sat { color:#0d6dd0; } */
.section--calendar .sche_table .gary { color: rgba(0, 0, 0, 0.3); }
.section--calendar .sche_table td{width:1.65rem; line-height: 2.2rem; color: #222; font-size: 15px; font-weight: 600; position: relative; }
.section--calendar .sche_table td > a { position:relative; display:block; width: 1.5rem; height:1.5rem; line-height:1.5rem; border-radius:50%; margin:0 auto; transition: 0.2s;}
.section--calendar .sche_table td a.event { background-color: #44B0FF; color:#fff;}
.section--calendar .sche_table td a.today { background: #fff; color:#2086E5;}
.section--calendar .lst { position:relative; margin-top:1.4rem;}
.section--calendar .lst ul { height:11rem; overflow-y:auto; }
.section--calendar .lst ul li + li { margin-top:0.5rem; }
.section--calendar .lst ul li a { position:relative; display:block; line-height:1.75rem; padding-left:4.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section--calendar .lst ul li a span { position:absolute; left:0; top:0; width:3.5rem; background:#003887; text-align:center; font-weight: 600; border-radius:1.75rem; transition: all 0.2s; -webkit-transition: all 0.2s; }
.section--calendar .lst .no_data {line-height:5.8rem; font-weight:600; text-align:center;}
/* 교육일정 : 내용 .detail */
.section--calendar .sche_table td .detail{position: absolute; max-width: 300px; min-width: 286px; min-height: 4.8rem; height: auto; padding: 1rem; background-color: rgba(80, 85, 104, 0.95);color: #fff; z-index: 2; border: 2px solid #373c4d; border-radius: 0.5rem; line-height: 1.3rem; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: none;}
.section--calendar .sche_table td .detail > .detail_item{ display: flex; flex-wrap: wrap; width: 100%;}
.section--calendar .sche_table td .detail > .detail_item:nth-child(2){margin-top: 0.25rem;}
.section--calendar .sche_table td .detail > .detail_item:nth-child(n+3){display: none;}
.section--calendar .sche_table td .detail a {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 100%;}
.section--calendar .sche_table td .detail::after{content: ""; width: 5px; height: 5px; background-color: #fff; outline: 3px solid #373c4d; position: absolute; left: calc(50% - 4px); bottom: -4px; border-radius: 50%;}
.section--calendar .sche_table td .detail::before {content: ""; height: 18px; border-left: 1px solid #373c4d; position: absolute; left: calc(50% - 2px); bottom: -15px;}
.section--calendar .sche_table td .detail p { font-size: 0.75rem; font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; text-align: left;}
.section--calendar .sche_table td .detail span{ display: inline-block; max-width: 100%; padding-left: 0.5rem; position: relative; overflow: hidden; word-break: keep-all; white-space: nowrap;}
.section--calendar .sche_table td .detail span::before{content: ""; width: 3px; height: 3px ;border-radius: 50%; background-color: #fff; position: absolute; display: inline-block; top: calc(50% - 1.5px); left: 0;}
.section--calendar .sche_table td .detail .btn_close{position: absolute; display: block; width: 1.3rem; height: 1.3rem; line-height: 1.3rem; border-radius: 50%; background-color: #fff; top: -0.65rem; right: 0.65rem; font-size: 1rem; color: #000; box-shadow: 0 0 10px rgba(55, 60, 77, 0.49); }
.section--calendar .sche_table td .detail .btn_close i{transition: 0.2s; -webkit-transition: 0.2s;}
.section--calendar .sche_table td .detail .detail_item > em{ display: none;}
/** 교육일정 : active **/
.section--calendar .sche_table td .detail.on{display: block;}
.section--calendar .sche_table td .detail a:hover{text-decoration: underline;}
.section--calendar .sche_table td a.event:hover{background-color: #373c4d; color: #fff;}
.section--calendar .sche_table td a.today:hover{background-color: #287fde; color: #fff;}
.section--calendar .lst ul li a:hover span,
.section--calendar .lst ul li a:focus span { background: #383296; }
.section--calendar .sche_table td span a:not(.event):focus,
.section--calendar .sche_table td span a:not(.event):hover { text-decoration:none; cursor:auto; } /* 20230204 <span><a></a></span> 관련 수정 */
.section--calendar .month a.next:hover i,
.section--calendar .month a.next:focus i {transform: translateX(4px);}
.section--calendar .month a.prev:hover i,
.section--calendar .month a.prev:focus i {transform: translateX(-4px);}
.section--calendar .sche_table td .detail .btn_close:hover i,
.section--calendar .sche_table td .detail .btn_close:focus i {transform: rotate(180deg);}


/* =============================================================
   [중분류] 활동 갤러리 (Gallery)
   - 이미지 카드 3열 그리드, 호버 시 확대 + 그라디언트 오버레이
   ============================================================= */
/* 데스크탑·태블릿: 섹션 내용 세로 가운데 정렬 */
.section--gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.gallery-group-wrap {
  display: flex;
  gap: 40px;
  width: 100%;
}
.gallery-group-item {
  flex: 0 0 calc(50% - 20px);
  min-width: 0;
}
@media (max-width: 829px) {
  .section--gallery {
    display: block;
  }
  .gallery-group-wrap {
    flex-direction: column;
    gap: 30px;
  }
}

.section--gallery .section-head .controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.section--gallery .section-head .controls button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #ddd;
  color: var(--black100);
  font-size: var(--title-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section--gallery .section-head .controls .play,
.section--gallery .section-head .controls .stop {
  font-size: var(--title-s);
}

.section--gallery .section-head .controls .play {
  display: none;
}

.gallery-grid {
  overflow: hidden;
  height: 190px;
}

.gallery-grid .slick-list {
  height: 100%;
  margin: 0 -20px;
  width: calc(100% + 40px);
}

.gallery-grid .slick-track {
  height: 100%;
}
.gallery-card {
  position: relative;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--sub-b-30);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  margin: 0 20px;
}
.gallery-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-card:hover .gallery-card__img {
  transform: scale(1.08);
}
.gallery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75) 100%);
  transition: opacity 0.3s;
  z-index: 1;
}
.gallery-card:hover::before {
  opacity: 0.9;
}
.gallery-card__title {
  position: relative;
  display: flex;
  align-items: end;
  width: 100%;
  height: 100%;
  z-index: 2;
  font-size: var( --body-sm);
  font-weight: 400;
  color: var(--white0);
}
.gallery-card__title span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 보도자료 슬라이드 */
.press-grid {
  overflow: hidden;
  height: 190px;
}
.press-grid .slick-list {
  height: 100%;
  margin: 0 -10px;
  width: calc(100% + 20px);
}
.press-grid .slick-track { height: 100%; }
.press-card {
  height: 190px;
  border-radius: 20px;
  background: rgba(199, 232, 255, 0.5);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 0 10px;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.press-card:hover { background: rgba(87, 185, 255, 0.4); }
.press-card__date { font-size: 13px; color: #44b0ff; font-weight: 400; }
.press-card__title {
  font-size: var(--body-sm-b);
  font-weight: 400;
  color: var(--gray90);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.section--gallery .no-data {
  width: 100%;
  height: 190px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 20px;
  background: rgba(199, 232, 255, 0.5);
}

/* =============================================================
   [대분류] 메인 페이지 반응형 (Responsive)
   ============================================================= */

@media (max-width: 1520px) {
  .section-cont_wrap {
    width: 58%;
  }

  .info-grid {
    gap: 25px;
  }

  .gallery-grid .slick-list {
    margin: 0 -15px;
    width: calc(100% + 30px);
  }

  .gallery-card {
    margin: 0 15px;
  }

}

/* ------- [중분류] 태블릿 (1240px ~ 830px) ------- */
@media (max-width: 1240px) {
  /* 히어로 */
  .hero {
    padding: 80px 0 60px;
    min-height: auto;
  }
  .hero-text {
    height: 400px;
  }
  .hero-tag {
    font-size: var(--body-sm-b);
  }
  .hero-title {
    font-size: var(--title-md-b);
  }
  .hero-desc {
    font-size: var(--body-sm);
  }
  .hero-inner {
    min-height: auto;
  }
  .hero-visual {
    left: 40%;
    top: 0;
    bottom: 40%;
    height: 400px;
  }
  .hero-controls {
    width: 240px;
    height: 68px;
    padding: 20px 40px;
  }
  .hero-controls button {
    width: 40px;
    height: 40px;
  }
  .hero-visual i {
    font-size: 22px;
  }
  .btn-primary {
    font-size: var(--body-sm-b);
    height: 48px;
    padding: 0 24px;
  }
  .btn-primary svg {
    width: 20px;
    height: 20px;
  }

  /* 퀵 메뉴 */
  .quick-menu {
    padding: 100px 50px;
    min-height: 500px;
  }
  .quick-list {
    gap: 32px;
    margin-top: 30px;
  }
  .quick-list a {
    gap: 32px;
    padding: 28px 0;
  }
  .quick-icon {
    /* width: 100px; */
    height: 100px;
  }
  .quick-icon svg {
    width: 60px;
    height: 60px;
  }
  .quick-icon img {width: 100%;}
  .quick-label {
    font-size: var(--body-md-b);
    font-weight: 700;
  }

  /* 섹션 공통 */
  .section:not(.footer) {
    padding: 40px 0;
  }

  .section-cont_wrap {
    width: 100%;
  }

  .section-title {
    font-size: var(--title-md-b);
  }

  .info-inner {
    flex-direction: column;
    gap: 40px;
  }

  /* 공지사항/교육자료실 카드 */
  .info-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .section--notice .info-grid--3 li:nth-child(n + 5) {
    display: none;
  }
  .section--resource .info-grid--3 li:nth-child(n + 5) {
    display: none;
  }
  .section--info .section--resource {
    margin-top: 40px;
  }
  .info-grid {
    gap: 20px;
  }
  .info-card {
    padding: 20px;
    min-height: 150px;
  }

  /* 교육일정 */
  .section--calendar {
    width: 100%;
  }

  .section--calendar .sche_table {
    height: auto;
  }

  /* 갤러리 */
  .gallery-card {
    min-height: auto;
    border-radius: 20px;
    padding: 30px;
  }
  .gallery-card__title {
    font-size: var(--title-s);
    font-weight: 500;
  }

  /* 더보기 버튼 */
  .section-more {
    width: 24px;
    height: 24px;
  }
  .section-more svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 1024px) {
	.quick-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 0;
  }
}

/* ------- [중분류] 모바일 (829px 이하) ------- */
@media (max-width: 829px) {
  /* 히어로 — 이미지 상단 + 텍스트 하단 세로 배치 */
  .hero {
    padding: 0;
  }
  .hero-inner {
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: 100%;
  }
  .hero-visual {
    position: relative;
    left: 0;
    top: auto;
    bottom: auto;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    aspect-ratio: auto;
    border-radius: 0;
    order: -1;
    flex-shrink: 0;
  }
  .hero-text {
    padding: 30px 20px;
    text-align: left;
    align-items: flex-start;
    flex: 1;
  }
  .hero-tag {
    font-size: var(--body-s-b);
  }
  .hero-title {
    font-size: var(--title-lg-b);
    margin-bottom: 10px;
  }
  .hero-title br {
    display: none;
  }
  .hero-desc {
    font-size: var(--body-s);
    margin-bottom: 25px;
  }
  .btn-primary {
    font-size: var(--body-s-b);
    height: auto;
    padding: 10px 20px;
  }
  .btn-primary svg {
    width: 20px;
    height: 20px;
  }
  .hero-controls {
    width: 200px;
    height: 66px;
    padding: 24px 34px;
  }
  .hero-controls button {
    width: 24px;
    height: 24px;
  }

  /* 퀵 메뉴 — 2x2 그리드 */
  .quick-menu {
    padding: 120px 0;
    height: auto;
  }
  .quick-list a {
    gap: 20px;
    padding: 28px 0;
  }
  .quick-icon {
    width: 100px;
    height: 100px;
  }
  .quick-icon svg {
    width: 60px;
    height: 60px;
  }
  .quick-label {
    font-size: var( --body-sm-b);
    font-weight: 700;
  }
  .section-title {
    font-size: var(--title-s-b);
  }

  /* 공지사항/교육자료실 카드 — 1열 */
  .info-grid {
    margin-bottom: 0;
  }
  .info-grid--3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section--notice .info-grid--3 li:nth-child(n + 3) {
    display: none;
  }
  .section--resource .info-grid--3 li:nth-child(n + 2) {
    display: none;
  }
  .section--info .section--resource {
    margin-top: 40px;
  }
  .info-card {
    min-height: 140px;
  }
  .info-card__arrow {
    right: 20px;
    bottom: 20px;
  }

  /* 교육일정 */
  .section--calendar .sche_wrap{position: relative;}
  .section--calendar .sche_table td{ position: static;}
  /* 교육일정 내용 */
  .section--calendar .month {height: 50px;}
  .section--calendar .month .date { font-size: 20px;}
  .section--calendar .sche_table {padding: 5px 10px 0;}
  .section--calendar .sche_table tr:last-child td { padding-bottom: 0.5rem; }
  .section--calendar .sche_table th,
  .section--calendar .sche_table td {line-height: 2rem;}
  .section--calendar .sche_table td .detail {  width: 100%; bottom: auto; top: 25rem; max-width: 100%; padding: 1rem 0.5rem; min-width: 0;}
  .section--calendar .sche_table td .detail .detail_item{position: relative;}
  .section--calendar .sche_table td .detail .detail_item:nth-child(2){margin-top: 1rem;}
  .section--calendar .sche_table td .detail.on{display: block;}
  .section--calendar .sche_table td .detail::after { content: none;}
  .section--calendar .sche_table td .detail::before { content: none;}
  .section--calendar .sche_table td .detail .detail_item > em{display: block; width: 2.5rem; font-size: 1.75rem; font-weight: 600; text-align: left; line-height: 2.6rem;}
  .section--calendar .sche_table td .detail em::after{content: "\e93e"; font-family: 'xeicon'; font-size: 1rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 400;}
  .section--calendar .sche_table td .detail a {border: 1px solid rgba(255, 255, 255, 0.3); border-top: none;border-bottom: none; padding: 0 0.5rem; justify-content: flex-start; width: calc(100% - 3.75rem);}
  .section--calendar .sche_table td .detail p { font-size: 0.65rem; font-weight: 600; width: 100%; text-align: left; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
  .section--calendar .sche_table td .detail span{ display: inline-block; max-width: 100%; padding-left: 0.5rem; position: relative; overflow: hidden; word-break: keep-all; white-space: nowrap; margin-right: 0.5rem; font-size: 0.65rem;}

  .section--calendar .sche_table td .detail span::before{content: ""; width: 3px; height: 3px ;border-radius: 50%; background-color: #fff; position: absolute; display: inline-block; top: calc(50% - 1.5px); left: 0;}

  .section--calendar .sche_table td .detail .btn_close{ display: none;}
}

@media (max-width: 768px) {
  .gallery-grid .slick-list {
    margin: 0 -10px;
    width: calc(100% + 20px);
  }

  .gallery-card {
    margin: 0 10px;
  }
}

@media (max-width: 580px) {
  .section {
    padding: 30px 0;
  }
  
  .section-title {
    font-size: var( --body-md-b);
  }

  .section-more svg {
    width: 20px;
    height: 20px;
  }

  .hero-visual {
    height: 300px;
  }

  .section-head {
    gap: 10px;
  }

  .hero-title {
    font-size: var(--title-md-b);
  }
  
  .hero-title br {
    display: block;
  }

  .hero-controls {
    --hc-radius: 20px;
    width: 150px;
    height: 55px;
    padding: 12px 20px;
  }

  .info-inner {
    gap: 30px;
  }

  .section--info .section--resource {
    margin-top: 30px;
  }

  /* 교육일정 */
  .section--calendar .heading { font-size: 1rem;}
  .section--calendar .heading span {font-size: 0.8rem; margin-left: 0.5rem;}

  .gallery-card {
    padding: 20px;
  }

  .gallery-card__title {
    font-size: var(--body-sm);
  }

  .section--gallery .section-head .controls {
    gap: 4px;
  }

  .section--gallery .section-head .controls button {
    width: 35px;
    height: 35px;
    font-size: var(--title-s);
  }
}

@media (max-width: 380px) {
  .quick-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-list a {
    gap: 12px;
    padding: 10px 0;
  }
  .quick-icon {
    width: 80px;
    height: 80px;
  }
  .quick-label {
    font-size: var( --body-sm-b);
    font-weight: 700;
  }
}