@charset "utf-8";
html, html:hover,
body, body:hover,
.pin-spacer, .pin-spacer:hover,
.main_sec, .main_sec:hover,
.tech_track, .tech_track:hover {
  transition: none;
}

@media screen and (max-width: 500px) {
  .ty_body br,
  .ty_sec br,
  .ty_sec_sm br,
  .hero_tit br {
    display: none;
  }
}

/* ==========================================================================
   footer 
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--bg-color);
  /* background-image: linear-gradient(
-70.56deg, rgba(0, 91, 181, 0.4) 5%, rgba(0, 91, 181, 0) 46%); */
}

.footer_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 100vh;
  padding-block: 5rem 2.5rem;
}

/* CTA */
.footer_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.footer_cta .title_wrap {
  gap: 1.25rem;
}
.footer_cta .ty_sec_sm {
  font-weight: 700;
}

/* 중단 — 메뉴 / 연락처 / 링크 버튼 */
.footer_top {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  column-gap: 7.5rem;
  align-items: start;
}
.footer_gnb ul {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.footer_gnb a,
.footer_info dt,
.btn_pill span {
  font-family: "Nunito Sans", var(--font-st1), sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.footer_gnb a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--txt-color);
}
.footer_contact {
  display: flex;
  flex-direction: column;
  gap: 3.19rem;
}
.footer_info {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  font-size: 1rem;
}
.footer_info dt {
  margin-bottom: 0.38rem;
  font-weight: 600;
  color: var(--txt-color);
}
.footer_info dd {
  margin: 0;
  color: #d7d7d7;
}

.footer_tel span,
.footer_fax span {
  display: inline-block;
  width: 2.5rem;
  color: #aeaeae;
}
.footer_report {
  font-size: 1rem;
  font-weight: 500;
  color: var(--txt-color);
}

.footer_links {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
}

.btn_pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 17.5rem;
  height: 4.1rem;
  padding: 0 1.88rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1000px;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.btn_pill span {
  font-size: 1.25rem;
  font-weight: 600;
}
.btn_pill .material-symbols-outlined {
  font-size: 1.5rem;
  transition: transform 0.25s ease;
}
.btn_pill:hover {
  border-color: var(--txt-color);
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}
.btn_pill:hover .material-symbols-outlined {
  transform: translateX(0.25rem);
}


.family {
  position: relative;
  z-index: 2;
}
.btn_family:hover .material-symbols-outlined {
  transform: translateY(0.25rem);
}
.family.is_open .btn_family .material-symbols-outlined {
  transform: rotate(180deg);
}

.footer_bottom {
  display: flex;
  flex-direction: column;
  gap: 1.94rem;
}
.footer_logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer_copy {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #666;
}

@media screen and (max-width: 1200px) {
  .footer_top {
    grid-template-columns: 8.5rem 1fr;
    row-gap: 3rem;
    column-gap: 3rem;
  }
  .footer_links {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}
@media screen and (max-width: 900px) {
  .footer_inner {
    gap: 3rem;
  }
  .footer_cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer_top {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .footer_gnb ul {
    flex-flow: row wrap;
    gap: 0.2rem .4rem;
  }
  .footer_links {
    flex-direction: column;
  }
 
  .btn_pill {
    width: 14rem;
    max-width: 100%;
    height: 3.25rem;
    gap: 0.75rem;
    padding: 0 1.25rem;
  }
  .btn_pill span {
    font-size: 1rem;
  }
  .btn_pill .material-symbols-outlined {
    font-size: 1.25rem;
  }
  .footer_copy {
    font-size: 0.88rem;
  }
}


/* ==========================================================================
   glow_bg — 커서를 따라오는 파란 글로우 (js/common.js 가 좌표를 넣는다)
   붙이고 싶은 요소에 class="glow_bg" 만 추가하면 된다. 지금은 푸터에만 사용.
   좌표가 들어오기 전(마우스 진입 전)에는 opacity:0 이라 아무것도 안 보인다.
   ========================================================================== */
.glow_bg {
  position: relative;
  overflow: hidden;
}
.glow_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    circle var(--glow-size, 34rem) at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(0, 91, 181, 0.45) 0%,
    rgba(0, 91, 181, 0.16) 42%,
    rgba(0, 91, 181, 0) 72%
  );
}
.glow_bg.is_glow::before {
  opacity: 1;
}

/* ==========================================================================
   header — inc/header.php 
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: .4rem 1.5rem;
  transition: background-color 0.3s ease, padding 0.3s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 히어로를 지나면(js/common.js 가 80px 에서 .is_fixed 를 붙인다) 배경을 깐다.
   불투명한 판이 아니라 **뒤가 비치는 어두운 유리**다 — 2차 메뉴(.gnb_sub ul)가
   쓰는 것과 같은 어법이라 둘이 겹쳐도 한 벌로 보인다.

   ⚠⚠ **유리를 <header> 자신에게 걸지 않는다. ::before 에 건다.** (260831)
   backdrop-filter 를 가진 요소는 "backdrop root" 가 된다 — 그 **안쪽** 요소의
   backdrop-filter 는 바깥 배경을 못 읽고 그 root 안만 본다. 그래서 헤더에
   직접 걸었더니 안에 있는 2차 메뉴(.gnb_sub ul)의 블러가 통째로 죽었다.
   ::before 는 2차 메뉴의 **조상이 아니라 형제**라 서로 간섭하지 않는다.
   (그래서 .header_inner 에 z-index 를 줘 내용이 이 판 위로 오게 한다)

   ⚠ 아래 선은 border 가 아니라 inset 그림자다. border 를 쓰면 헤더 높이가
     1px 늘어 감출 때(translateY -100%) 거리와 padding 전환이 같이 흔들린다. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-color: rgb(0 0 0 / 59%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.header.is_fixed::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* 스크롤을 내리면 비켜 주고, 올리면 다시 내려온다(js/common.js 의 initHeader).
   [항상 보여야 하는 때] 서랍이 열려 있으면 닫을 수단이 사라지므로 감추지 않는다.
   JS 도 그때는 .is_hide 를 떼지만, 여기서도 한 번 더 막아 둔다. */
.header.is_hide {
  transform: translateY(-100%);
}
.header.is_menu.is_hide {
  transform: none;
}


.header_inner {
  /* 위 .header::before 유리판 위로 올린다 */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  height: 3.62rem;
}

.header_logo,
.gnb_right {
  position: relative;
  z-index: 2;
}
.header_logo a {
  display: block;
}
.header_logo img {
  display: block;
  width: 13rem;
  height: auto;
}
.header_logo .logo_symbol {
  display: none;
  width: 2.5rem;
}

/* 1차 메뉴 */
.gnb_list {
  display: flex;
  align-items: center;
  gap: 3.75rem;
}
.gnb_link {
  display: block;
  padding: 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--txt-color);
  white-space: nowrap;
}

.gnb_item {
  position: relative;
}
.gnb_sub {
  position: absolute;
  top: 70%;
  left: 50%;
  min-width: 11rem;
  padding-top: 1.5rem;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gnb_item:hover .gnb_sub,
.gnb_item:focus-within .gnb_sub {
  opacity: 1;
  visibility: visible;
}
.gnb_sub ul {
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.75rem;
  background-color: rgba(18, 18, 18, 0.4);
  backdrop-filter: blur(10px);
}
.gnb_sub a {
  display: block;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.gnb_sub a:hover,
.gnb_sub a:focus-visible {
  color: var(--main-color-light);
}

.gnb_right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn_lang {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  /* height: 3.12rem; */
  padding: .4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  color: var(--txt-color);
  cursor: pointer;
}
.btn_lang span {
  font-family: "Nunito Sans", var(--font-st1), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.btn_lang .material-symbols-outlined {
  font-size: 1.25rem;
}

.lang {
  position: relative;
}
/* 펼침 목록 패널 — 헤더 언어 · 푸터 FAMILY SITE · 게시판 검색 분류가 함께 쓴다.
   (항목 글자 모양은 각자 다르다 — 아래 `.sel_list button` 참고) */
.lang_list,
.family_list,
.sel_list {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: .5rem;
  background-color: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.lang.is_open .lang_list,
.family.is_open .family_list,
.notice_sel.is_open .sel_list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* 검색 분류는 한글이라 영문 대문자용 글자 모양을 쓰지 않는다 */
.sel_list button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--sub-txt-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sel_list button:hover,
.sel_list button:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--txt-color);
}
.sel_list [aria-selected="true"] button {
  color: var(--main-color-light);
}
.lang_list a,
.family_list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-family: "Nunito Sans", var(--font-st1), sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--sub-txt-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang_list a:hover,
.lang_list a:focus-visible,
.family_list a:hover,
.family_list a:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--txt-color);
}
.lang_list a.is_current {
  color: var(--main-color-light);
}

.btn_menu {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.btn_menu .icon_open {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.25s ease;
}
.btn_menu .icon_close {
  position: absolute;
  font-size: 1.75rem;
  color: var(--txt-color);
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.header.is_menu .btn_menu .icon_open {
  opacity: 0;
}
.header.is_menu .btn_menu .icon_close {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   1200px 이하 
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .header {
    padding: 1.5rem 2rem;
  }
  .header.is_fixed {
    padding-block: 1rem;
  }

  .gnb {
    position: fixed;
    inset: 0;
    padding: 7rem 2rem 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
  }
  .header.is_menu .gnb {
    transform: none;
    visibility: visible;
  }
  .gnb_list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 40rem;
    margin: 0 auto;
  }
  .gnb_item + .gnb_item {
    border-top: 1px solid var(--line-color-darker);
  }
  .gnb_link {
    position: relative;
    padding: 1.25rem 2rem 1.25rem 0;
    font-size: 1.5rem;
  }
  /* 2차가 있는 항목에만 화살표 */
  .gnb_item:has(.gnb_sub) > .gnb_link::after {
    content: "expand_more";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: "Material Symbols Outlined";
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.25s ease;
  }
  .gnb_item.is_open > .gnb_link::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .gnb_sub {
    position: static;
    min-width: 0;
    max-height: 0;
    padding-top: 0;
    overflow: hidden;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease;
  }
  .gnb_item:hover .gnb_sub,
  .gnb_item:focus-within .gnb_sub {
    opacity: 1;
  }
  .gnb_sub ul {
    gap: 1rem;
    padding: 0.25rem 0 1.25rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
  }
}

@media screen and (max-width: 900px) {
  .header {
    padding: 1rem;
  }
  .header_inner {
    gap: 1rem;
    height: 3.12rem;
  }
  .header_logo .logo_full {
    display: none;
  }
  .header_logo .logo_symbol {
    display: block;
  }
  .btn_lang {
    height: 2.5rem;
    padding: 0 0.8rem;
  }
  .btn_lang span {
    font-size: .9rem;
  }
  .btn_menu{
    width: 2.5rem;
    height: 2.5rem;
  }
}


/* --------------------------------------------------------------------------
   1201px 이상 
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1201px) {
  .header.is_menu .gnb {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 8rem 1.5rem 4rem; 
    overflow-y: auto;
    background-color: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(12px);
    animation: gnb_fade 0.3s ease;
  }
  @keyframes gnb_fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }


  .header.is_menu .gnb_list {
    max-width: 1500px;          /* .wFix 와 같은 축 (260828: 1660 → 1500) */
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header.is_menu .gnb_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line-color-darker);
  }
  .header.is_menu .gnb_link {
    padding: 0;
    border: 0;
    font-size: 1.75rem;
    font-weight: 700;
    transition: color 0.25s ease;
  }
  .header.is_menu .gnb_item:hover .gnb_link,
  .header.is_menu .gnb_item:focus-within .gnb_link {
    color: var(--main-color-light);
  }

  .header.is_menu .gnb_sub {
    position: static;
    min-width: 0;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .header.is_menu .gnb_sub ul {
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 0.5rem 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
  }
}


/* ==========================================================================
   MAIN 
   ========================================================================== */
.main_sec .tag {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.62rem);   /* 26px */
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--main-color-light);
}

.main_sec .ty_sec_sm {
  font-weight: 700;
  line-height: 1.2333;
  letter-spacing: -0.03em;
}

.btn_glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1000px;
  background-color: rgb(255 255 255 / 41%);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--txt-color);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.btn_glass:hover {
  background-color: rgba(255, 255, 255, 0.55);
}



/* --------------------------------------------------------------------------
   1. main_hero
   -------------------------------------------------------------------------- */
.main_hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.hero_bg,
.hero_bg_item {
  position: absolute;
  inset: 0;
}
.hero_bg_item,
.hero_bg_item:hover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.2s ease,
              transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero_bg_item.is_active {
  opacity: 1;
  transform: scale(1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 블록은 아무 일도 하지 않는다. */
  .is_reduce_motion .hero_bg_item,
  .is_reduce_motion .hero_bg_item:hover,
  .is_reduce_motion .hero_bg_item.is_active {
    transform: none;
  }
  .is_reduce_motion .hero_txt > *,
  .is_reduce_motion .hero_txt > *:hover,
  .is_reduce_motion .hero_txt.is_active > * {
    transform: none;
    transition: none;
  }
  .is_reduce_motion .hero_txt_group > .hero_txt:first-child > * {
    animation: none;
  }
}
.hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.4) 100%);
}
.hero_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.75rem;
  padding-block: 0;
}
/* 문구 5벌 겹쳐 두기 — grid 의 같은 칸(1/1)에 쌓으면 높이는 가장 큰 벌을 따라가
   문구가 바뀌어도 아래 인디케이터가 위아래로 흔들리지 않는다.
   (absolute 로 빼면 그룹 높이가 0 이 되어 점이 위로 올라붙는다) */
.hero_txt_group {
  display: grid;
}
.hero_txt {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  pointer-events: none;   /* 겹친 비활성 문구가 드래그 선택을 가로채지 않게 */
}
.hero_txt.is_active {
  pointer-events: auto;
}
/* ⚠ `:hover` 를 같이 적어야 한다 — reset.css 37행의 `*:hover{transition:all .3s}` 가
   커서가 히어로 위에 있는 동안 아래 전환을 0.3s 로 덮어쓴다(함정 0번). */
.hero_txt > *,
.hero_txt > *:hover {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.8s ease,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero_txt.is_active > * {
  opacity: 1;
  transform: none;
}
/* 태그 → 타이틀 → 본문 순으로 조금씩 늦게(배경 페이드 1.2s 안에서 끝난다) */
.hero_txt.is_active > *:nth-child(1) { transition-delay: 0.1s; }
.hero_txt.is_active > *:nth-child(2) { transition-delay: 0.2s; }
.hero_txt.is_active > *:nth-child(3) { transition-delay: 0.3s; }

/* 첫 장만 로드 직후 한 번 떠오른다(2~5장 전환은 위 트랜지션이 맡는다).

   [AOS 를 쓰지 않는 이유]
   AOS 의 값어치는 "스크롤로 뷰포트에 들어올 때" 발동하는 트리거인데 히어로는
   항상 화면 맨 위라 어차피 로드 즉시 발동한다 — 트리거가 하는 일이 없다.
   반면 대가는 크다: aos.css 의 `[data-aos^=fade][data-aos^=fade].aos-animate`
   가 (0,3,0) 이라 `.hero_txt.is_active > *`(0,2,0) 를 이기고 aos.css 가 나중에
   로드되는데, 설정이 `once:true` 라 클래스가 영구히 남는다. 그러면 2번째 장으로
   넘어가도 첫 장이 opacity:1 에 박혀 두 벌이 겹친다. 그걸 막으려면 등장이 끝난 뒤
   JS 로 data-aos 를 걷어내는 로직(+ transitionend·보험 타이머·클릭 가로채기)이
   필요했다. 아래 keyframes 는 그걸 전부 없앤다.

   ⭐⭐ `animation-fill-mode` 는 반드시 **backwards** — `both`/`forwards` 로 하면
   끝난 뒤에도 애니메이션이 끝값(opacity:1)을 계속 기여하고, 애니메이션은
   일반 선언보다 우선하므로 **AOS 와 똑같이 첫 장이 안 사라진다.**
   backwards 는 delay 구간의 시작값만 잡아 주고 끝나면 기여를 멈춰, 그 뒤는
   위의 `.hero_txt.is_active > *`(opacity:1) 가 이어받는다 — 끝 키프레임과 같은
   값이라 넘어가는 순간 튀지 않는다.
   ⭐ JS 가 죽어도 문구는 보인다(마크업에 `.is_active` 가 이미 붙어 있다). */
.hero_txt_group > .hero_txt:first-child > * {
  animation: hero_in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}
.hero_txt_group > .hero_txt:first-child > *:nth-child(1) { animation-delay: 0.1s; }
.hero_txt_group > .hero_txt:first-child > *:nth-child(2) { animation-delay: 0.2s; }
.hero_txt_group > .hero_txt:first-child > *:nth-child(3) { animation-delay: 0.3s; }

@keyframes hero_in {
  from { opacity: 0; transform: translateY(6.25rem); }   /* 100px — 사이트 fade-up 과 같은 거리 */
  to   { opacity: 1; transform: none; }
}
.hero_tit {
  font-size: clamp(3.2rem, 5vw, 6rem);   /* 130px */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--txt-color);
  white-space: nowrap;
}
.hero_scroll {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

/* 슬라이드 인디케이터 */
.slide_page {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.slide_page button {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  border: 0;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}
.slide_page button.is_active {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--txt-color);
  background-color: transparent;
}
.slide_page button.is_active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  border-radius: 100px;
  background-color: var(--txt-color);
}

@media screen and (max-width: 900px) {
  .main_hero {
    /* min-height: 80vh; */
  }
  .hero_inner {
    gap: 2.5rem;
  }
  .hero_tit {
    white-space: normal;
  }
  .btn_glass {
    height: 2.88rem;
    padding: 0 1.12rem;
    font-size: 0.88rem;
  }
}
@media screen and (max-width: 768px){
  .hero_inner{
    align-items: center;
    text-align: center;
  }
  /* 그룹이 .hero_inner 의 flex 칸을 콘텐츠 폭으로만 쓰므로 안쪽도 가운데로 */
  .hero_txt_group{
    justify-items: center;
  }
  .hero_txt{
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   2. main_intro 
   -------------------------------------------------------------------------- */
.main_intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: url("../../images/main/main_intro_bg.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.intro_inner {
  justify-items: center;
  max-width: 51.88rem;
  padding-block: 0; 
  text-align: center;
}
.intro_tit {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(2.25rem, 3.85vw, 4.62rem);   /* 74px */
  font-weight: 800;
  line-height: 1.135;
  letter-spacing: -0.03em;
  color: #3f3f3f;
}
.intro_inner .ty_body{
  margin-top: 1.5rem;
}
.intro_tit .fill_line {
  display: block;
  line-height: inherit;    
}
.intro_tit .char,
.intro_tit .char:hover {
  line-height: inherit;
  transition: none;
  pointer-events: none;
}

@media screen and (max-width: 900px) {
  .main_intro {
    min-height: 80vh;
  }
  .intro_inner {
    gap: 1rem;
  }
  .intro_tit {
    color: var(--txt-color);
  }
}


/* --------------------------------------------------------------------------
   3. main_tech — 가로 스크롤 
   -------------------------------------------------------------------------- */
.main_tech {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.tech_bg,
.tech_bg_item {
  position: absolute;
  inset: 0;
}
.tech_bg_item {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.tech_bg_item.is_active {
  opacity: 1;
}
.tech_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(116.1deg, rgba(0, 0, 0, 0.22) 8.7%, rgba(0, 0, 0, 0.09) 93.1%);
}

.tech_track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(8rem, 40.05vw, 48.06rem);   /* 769px */
  width: max-content;
  height: 100%;
  padding-left: 6.77vw;                    /* 130px */
}
.tech_item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.75rem;                            /* 60px */
  width: clamp(20rem, 46.4vw, 55.69rem); /* 891px */
}

.tech_visual {
  display: none;
}

.tech_item .tag { color: #cdcdcd; }
.tech_item .ty_sec_sm,
.tech_item .ty_body { color: #c4c4c4; }
.tech_item.is_active .tag { color: var(--main-color-light); }
.tech_item.is_active .ty_sec_sm { color: var(--txt-color); }
.tech_item.is_active .ty_body { color: rgba(255, 255, 255, 0.7); }
.tech_item .tag,
.tech_item .ty_sec_sm,
.tech_item .ty_body,
.tech_item .btn_pill {
  transition: color 0.4s ease, opacity 0.4s ease;
}
.tech_item .btn_pill {
  opacity: 0.45;
}
.tech_item.is_active .btn_pill {
  opacity: 1;
}

.tech_page {
  position: absolute;
  left: 6.77vw;
  bottom: 20vh;
  z-index: 2;
}

@media screen and (max-width: 900px) {
  .main_tech {
    height: auto;
  }
  .tech_bg {
    display: none;
  }
  .tech_visual {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tech_visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.6) 55%,
                rgba(0, 0, 0, 0.3) 100%);
  }

  .tech_item .title_wrap,
  .tech_item .btn_wrap {
    position: relative;
    z-index: 1;
  }
  .tech_track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
  }
  .tech_item {
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    /* min-height: 100vh; */
    padding: 5rem 2rem;
  }
  .tech_item .tag { color: var(--main-color-light); }
  .tech_item .ty_sec_sm { color: var(--txt-color); }
  .tech_item .ty_body { color: rgba(255, 255, 255, 0.7); }
  .tech_item .btn_pill { opacity: 1; }
  .tech_page {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   marquee_txt — 기업소개
   -------------------------------------------------------------------------- */
.main_tech + .marquee_txt {
  margin-block: var(--sec-gap);
}


/* --------------------------------------------------------------------------
   4. main_biz — 사업영역
   -------------------------------------------------------------------------- */
.main_biz {
  background-color: var(--bg-color);
}
.biz_head {
  justify-items: center;
  max-width: 61.06rem;    /* 977px */
  margin-bottom: 7.5rem;
  padding-block: 0;
  text-align: center;
}

.biz_list {
  display: flex;
  align-items: stretch;
}
.biz_item {
  position: relative;
  flex: 1 1 0;              
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: min(56.25rem, 82vh);   /* 900px */
  padding: 5rem;                 /* 80px */
  border: 1px solid #444;
  transition: flex-grow 0.6s ease;
}
.biz_item.is_active {
  flex-grow: 2.15;  
}

.biz_visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.biz_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 24% 9%;
  object-fit: contain;
  object-position: center;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
.biz_img.ty_on {
  padding: 0;
  object-fit: cover;
  opacity: 0;
}
.biz_item.is_active .biz_img {
  opacity: 0;
}
.biz_item.is_active .biz_img.ty_on {
  opacity: 1;
}

.biz_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
}

.biz_cont {
  position: relative;
  z-index: 1;
}

.biz_desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, max-height 0.6s ease;
}
.biz_item.is_active .biz_desc {
  max-height: 12rem;
  opacity: 1;
}

.biz_link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   hover_cursor 
   -------------------------------------------------------------------------- */
[data-cursor],
[data-cursor] a,
[data-cursor] button {
  cursor: none;
}

.hover_cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  transform: translate3d(var(--cx, -50vw), var(--cy, -50vh), 0);
  will-change: transform;
}
.hover_cursor,
.hover_cursor:hover {
  transition: none;
}
.hover_cursor span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;             /* 160px */
  height: 10rem;
  margin: -5rem 0 0 -5rem;  /* 좌표가 원의 중심이 되게 */
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.486);
  border: 1px solid white;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--txt-color);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(8px);
}

.hover_cursor.is_on span {
  opacity: 1;
  transform: scale(1);
}

@media screen and (max-width: 1200px) {
  .biz_item {
    padding: 3rem 2rem;
  }
}

@media screen and (max-width: 900px) {
  .biz_head {
    margin-bottom: 3rem;
  }
  .biz_list {
    flex-direction: column;
    cursor: auto;
  }
  .biz_item,
  .biz_item.is_active {
    flex: none;
    height: auto;
    min-height: 26rem;
    padding: 2rem 1.5rem;
  }
  .biz_img {
    opacity: 0;
  }
  .biz_img.ty_on {
    opacity: 1;
  }
  .biz_desc {
    max-height: none;
    opacity: 1;
  }
  .biz_visual::after {
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.6) 55%,
                rgba(0, 0, 0, 0.3) 100%);
  }
  .hover_cursor {
    display: none;
  }
  [data-cursor],
  [data-cursor] a,
  [data-cursor] button {
    cursor: auto;
  }
  [data-cursor] a,
  [data-cursor] button {
    cursor: pointer;
  }
}


/* --------------------------------------------------------------------------
   5. main_global 
   -------------------------------------------------------------------------- */
.main_global {
  position: relative;
  background-color: var(--bg-color);
}

.globe_stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
}

.globe_viz {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(72.5rem, 92vh, 92vw);
  height: min(72.5rem, 92vh, 92vw);
  transform: translate(-50%, -50%);
  pointer-events: auto; 
  cursor: grab;
}
.globe_viz:active {
  cursor: grabbing;
}

/* 지구는 대륙 점까지 다 찍힌 뒤에 켠다(main.js 의 reveal()).
   그리기 도중의 "민무늬 검은 공"이 잠깐 비쳤다가 대륙이 나중에 찍히면
   덜 만들어진 화면처럼 보이기 때문이다.
   ⚠ JS 가 is_ready 를 못 붙이는 경우를 대비해 3초 안전망을 JS 쪽에 걸어 뒀다. */
.globe_viz {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.globe_viz.is_ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 블록은 아무 일도 하지 않는다. */
  .is_reduce_motion .globe_viz {
    transition: none;
  }
}

.global_inner {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(6.5rem, 14vh, 10rem) clamp(6rem, 18vh, 14rem);
}
.global_txt {
  flex: 0 0 auto;
  justify-items: start;
}
.global_stats {
  align-self: flex-end;
  width: min(51.88rem, 100%);   /* 830px */
  margin: clamp(5rem, 14vh, 6rem) 0 0;
}

.stat_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.stat_item dt {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.38rem;
}
.stat_item em {
  font-size: clamp(2rem, 3.125vw, 3.75rem);   /* 60px */
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--txt-color);
}
/* ⚠ `dt span` (자손) 이면 안 된다 — 숫자를 `<em>CARG +<span data-count>26</span></em>`
   처럼 감싼 곳에서 **숫자까지 단위 크기(26px)로 줄어든다**(연구소 R&D INVESTMENT
   에서 7.2 만 작게 나왔다). 단위는 언제나 dt 의 직속 자식이므로 `>` 로 좁힌다. */
.stat_item dt > span,
.stat_item dd {
  font-size: clamp(1rem, 1.35vw, 1.62rem);   /* 26px */
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.stat_item dd {
  margin: 0.62rem 0 0;
  text-align: right;
}

.globe_marker {
  position: relative;
  margin: -0.62rem;
  padding: 0.62rem;
  pointer-events: auto;
  cursor: pointer;
}
.globe_dot {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #cfd3da;
  box-shadow: 0 0 0 0.25rem rgba(207, 211, 218, 0.2);
  transition: transform 0.2s ease;
}
.globe_marker.is_main .globe_dot {
  background-color: var(--main-color-light);
  box-shadow: 0 0 0 0.25rem rgba(163, 205, 255, 0.25);
}
.globe_marker:hover .globe_dot {
  transform: scale(1.3);
}
.globe_label {
  position: absolute;
  bottom: 1.38rem;
  left: 50%;
  padding: 0.44rem 0.75rem;
  border-radius: 0.38rem;
  background-color: var(--txt-color);
  font-size: 0.81rem;
  font-weight: 600;
  color: #16181d;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.38rem);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.globe_label::after { 
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 0.38rem solid transparent;
  border-top-color: var(--txt-color);
  transform: translateX(-50%);
}
.globe_marker:hover .globe_label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media screen and (max-width: 1200px) {

  .globe_viz {
    opacity: 0.4;
  }
  .global_stats {
    align-self: stretch;
    width: 100%;
  }
  .stat_item{
    padding-block: 2rem;
  }
}
@media screen and (max-width: 900px) {
  .main_global {
    min-height: 100vh;
    padding-block: var(--sec-gap) 0;
  }

  .globe_stage {
    position: absolute;
    inset: 0;
    height: 100%;
    margin-bottom: 0;
  }
  .global_inner {
    padding-block: 0;
  }
  .global_stats {
    margin-top: 2.5rem;
  }
  .stat_item {
    padding-block: 1.5rem;
  }
}


/* --------------------------------------------------------------------------
   6. main_news — NOTICE&PRESS.
   -------------------------------------------------------------------------- */
.main_news {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: radial-gradient(120% 90% at 10% 50%, rgba(0, 60, 130, 0.22), transparent 60%);
}

.news_bg {
  position: absolute;
  top: -12%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 124%;
  background: url("../../images/main/notice_bg.png") no-repeat center center / cover;
  pointer-events: none;
  will-change: transform;
}
.news_inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(20rem, 37rem) 1fr;
  gap: 2.5rem;
  align-items: start;
  padding-block: var(--sec-gap);
}
.news_head {
  justify-items: start;
  max-width: 37rem;            /* 592px */
}
.news_head .btn_pill {
  margin-top: 1rem;
}


.news_cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.75rem;
  height: min(67.5rem, 86vh);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.news_track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.news_card {
  display: block;
  margin-bottom: 3.75rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: var(--main-color);
  box-shadow: 0 1.25rem 3rem -1.25rem rgba(0, 60, 130, 0.6);
  transition: transform 0.4s ease;
}
.news_card:hover {
  transform: translateY(-0.38rem);
}

.news_col.ty_side {
  display: none;
}
.ty_up .news_track {
  animation: news_up 34s linear infinite;
}
.ty_down .news_track {
  animation: news_down 34s linear infinite;
}
@keyframes news_up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes news_down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
@keyframes news_left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.news_cards:hover .news_track,
.news_cards.is_dragging .news_track {
  animation-play-state: paused;
}

/* [260903] 드래그 전용 칸. 여기에만 인라인 transform 이 들어간다 —
   `.news_track`(자동 흐름)과 `.news_col`(스크롤 연동)이 각자 제 transform 을 쓰므로
   한 겹을 더 둬서 셋이 서로 덮어쓰지 않게 한 것이다(js/main.js 의 initNewsDrag 참고). */
.news_drag {
  will-change: transform;
}
/* 끌고 있는 동안 글자가 선택되면 파랗게 반전돼 카드가 지저분해진다.
   ⚠ 커서 모양은 건드리지 않는다 — 이 영역은 `[data-cursor]` 로 `cursor: none` 이고
     따라다니는 커스텀 커서(.hover_cursor)가 대신 그려진다. */
.news_cards.is_dragging,
.news_cards.is_dragging * {
  -webkit-user-select: none;
          user-select: none;
}

.news_card_body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15.25rem;             /* 260px */
  padding: 2rem 1.8rem;
}
.news_card_label,
.news_card_date {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.news_card_label {
  margin-bottom: 0.31rem;
  font-weight: 600;
  color: var(--main-color-light);
}
.news_card_date {
  color: var(--txt-color);
}
.news_card_tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 500;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}

.news_card_thumb {
  position: relative;
  height: 13.25rem;
  background: linear-gradient(135deg, #0a4f96 0%, #01366b 100%);
}

.news_card_thumb.ty_img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.news_card_thumb.ty_none {
  background-color: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.news_card_thumb.ty_img::after,
.news_card_thumb.ty_none::after {
  content: none;
}

.news_card_thumb::after {
  content: "IMAGE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.125em;
  color: rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 1400px) {
  .news_inner {
    grid-template-columns: 1fr;
    gap: 3.75rem;
  }
  .news_cards {
    max-width: 56.25rem;
  }
}
@media screen and (max-width: 1200px) {
  .news_inner{
    padding-left: 0;
    padding-right: 0;
  }
  .news_head{
    padding: 0 2rem;
  }
  .news_cards {
    display: block;
    height: auto;
    max-width: none;
    mask-image: none;
  }
  .news_col.ty_up,
  .news_col.ty_down {
    display: none;
  }
  .news_col.ty_side {
    display: block;
  }

  .ty_side .news_track {
    flex-direction: row;
    width: max-content;
    animation: news_left 40s linear infinite;
  }

  .ty_side .news_card {
    flex: 0 0 auto;
    width: 20rem;                 /* 320px */
    margin: 0 2.5rem 0 0;         /* 40px */
  }
  .ty_side .news_card_body {
    height: 12.5rem;              /* 200px */
    padding: 1.75rem 1.5rem;
  }
  .ty_side .news_card_thumb {
    height: 11.25rem;             /* 180px */
  }
  .ty_side .news_card_label,
  .ty_side .news_card_date {
    font-size: .9rem;
  }
}
@media screen and (max-width: 900px) {
  
  .ty_side .news_card {
    width: 16.25rem;
    margin-right: 1.5rem;
  }
  .news_card:hover{
    transform: none;
  }
  .ty_side .news_card_body {
    height: 10.5rem;
    padding: 1.25rem 1.12rem;
  }
  .ty_side .news_card_thumb {
    height: 9rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 블록은 아무 일도 하지 않는다. */
  .is_reduce_motion .ty_up .news_track,
  .is_reduce_motion .ty_down .news_track,
  .is_reduce_motion .ty_side .news_track {
    animation: none;
  }
}