@charset "UTF-8";
/* body {
  background-color: #f0f2f4;
} */
body:has(#sc_main) {
  background-color: #f0f2f4;
}
body:has(#sc_main) footer {
  background-color: #f0f2f4;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a {
  display: inline-block;
}

.swiper .swiper-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.swiper .btn_wrap,
.swiper .btn_wrapper,
.sub_content .btn_wrapper {
  height: fit-content;
  z-index: 10;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  gap: 0.4rem;
}
.swiper .btn_wrapper {
  margin-top: 2rem;
}

/* 슬라이드 버튼 btn_arrow */
.swiper .btn_arrow,
footer .btn_arrow,
.sub_content .btn_arrow {
  position: static;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  color: #666;
  border: 1px solid #d2d2d2;
  padding: 0.6rem;
  border-radius: 6px;
  transition: 0.2s all;
  margin-left: 0 !important;
  margin-top: 0 !important;
}
.swiper .btn_arrow:hover,
footer .btn_arrow:hover,
.sub_content .btn_arrow:hover {
  border: 1px solid #666;
}
.swiper .btn svg {
  display: none;
}
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {
  display: none;
}
.swiper .btn_arrow .material-symbols-outlined,
footer .btn_arrow .material-symbols-outlined,
.sub_content .btn_arrow .material-symbols-outlined {
  font-size: 1.2rem;
  opacity: 0.5;
}
.swiper .btn_arrow:hover .material-symbols-outlined,
footer .btn_arrow:hover .material-symbols-outlined,
.sub_content .btn_arrow:hover .material-symbols-outlined {
  opacity: 1;
}
/* 슬라이드 버튼 btn_arrow */

/* 슬라이드 장수 표시 */
.swiper .swiper-pagination-current {
  font-weight: 600;
}
.swiper .swiper-pagination-total {
  opacity: 0.6;
}
.swiper .swiper-pagination-fraction,
footer .swiper-pagination-fraction,
.sub_content .swiper-pagination-fraction {
  position: static;
  width: fit-content;
  margin-right: 1rem;
}
/* 슬라이드 장수 표시 */

/* 슬라이드 버튼 */

/* header */
.header {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.8rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
}
.logo {
  height: 60px;
}
.logo a {
  display: block;
  height: 100%;
}
.logo img {
  width: auto;
  height: 100%;
}
.logo_b {
  display: none;
}
.header .gnb {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  justify-content: center;
}
.gnb_menu {
  position: static;
}
.gnb_menu > a {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  transition: all 0.2s;
}
.gnb_sub {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 3rem 2rem;
  background-color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  /* hidden 상태 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}
.gnb_menu.on > .gnb_sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gnb_sub > li > a {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
}
.gnb_sub > li > a:hover {
  color: var(--main-color);
}
.gnb_sub2 {
  margin-top: 0.4rem;
  gap: 0.2rem;
  display: flex;
  flex-direction: column;
}
.gnb_sub2 li a {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}
.gnb_sub2 li a:hover {
  color: var(--main-color);
  text-decoration: underline;
}
.gnb_right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gnb_info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 1rem;
}
.gnb_info li {
  position: relative;
}
.gnb_info li a {
  color: #ffffffd0;
}
.gnb_info li::before {
  content: "";
  width: 1px;
  height: 12px;
  position: absolute;
  background-color: #ffffff38;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}
.gnb_info li:last-child::before {
  display: none;
}
.gnb_right .btn {
  color: white;
}

/* header - 스크롤 또는 메뉴 호버 시 라이트모드 */
.header {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
/* 배경 패널(흰 배경 + 보더): 스크롤(서브) / 호버 시에만. 메인 풀페이지(.dark)는 제외 */
.header.scrolled,
.header.gnb_open {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e2e2;
}
/* 색상 다크 전환: 스크롤 / 호버 + 메인 풀페이지(.dark) → 배경 없이 색만 */
.header.scrolled .logo_w,
.header.gnb_open .logo_w,
.header.dark .logo_w {
  display: none;
}
.header.scrolled .logo_b,
.header.gnb_open .logo_b,
.header.dark .logo_b {
  display: inline-block;
}
.header.scrolled .gnb_menu > a,
.header.gnb_open .gnb_menu > a,
.header.dark .gnb_menu > a,
.header.gnb_open .gnb_info .gnb_logout_btn{
  color: #111;
}
.header.scrolled .gnb_menu > a:hover,
.header.gnb_open .gnb_menu > a:hover,
.header.dark .gnb_menu > a:hover {
  color: var(--main-color);
}
.header.scrolled .gnb_info li a,
.header.scrolled .gnb_info li button,
.header.dark .gnb_info .gnb_logout_btn,
.header.gnb_open .gnb_info li a,
.header.dark .gnb_info li a {
  color: #111111d0;
}
.header.scrolled .gnb_info li::before,
.header.gnb_open .gnb_info li::before,
.header.dark .gnb_info li::before {
  background-color: #00000038;
}
.header.scrolled .gnb_right .btn,
.header.gnb_open .gnb_right .btn,
.header.dark .gnb_right .btn {
  color: #111;
}

/* 반응형 */
@media screen and (max-width: 1440px) {
  .header {
    padding: 0.6rem 2rem;
  }
  .header .gnb {
    gap: 2rem;
  }
  .gnb_menu > a {
    font-size: 1.1rem;
  }
  .logo {
    height: 60px;
  }
}
@media screen and (max-width: 1200px) {
  .gnb_menu {
    display: none;
  }
  .header {
    padding: 0.6rem 1.5rem;
  }
  .logo {
    height: 40px;
  }
  .gnb_info {
    display: none;
  }
}

/* header */

/* ===== 검색 / 사이트맵 레이어 공통 ===== */
body.layer_open {
  overflow: hidden;
}
.layer_close {
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== 검색 레이어 ===== */
.search_layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2.5rem 3rem;
  z-index: 10000;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease,
    visibility 0.4s ease;
}
.search_layer.on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.search_inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.search_form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 2px solid #111;
  padding-bottom: 0.6rem;
}
.search_input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.2rem;
  color: #111;
  padding: 0.2rem 1rem;
  min-width: 0;
}
.search_form input[type="text"]:focus {
  box-shadow: none !important;
  border: none !important;
}
.search_submit {
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
}
.search_submit .material-symbols-outlined {
  font-size: 1.8rem;
}
.search_close .material-symbols-outlined {
  font-size: 2rem;
}

/* ===== 사이트맵(전체메뉴) 레이어 ===== */
.sitemap_layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  overflow-y: auto;
  opacity: 0;
  display: none;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
.sitemap_layer.on {
  opacity: 1;
  display: block;
}
.sitemap_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-bottom: 1px solid var(--line-color);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.sitemap_tit {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--tit-color);
}
.sitemap_close .material-symbols-outlined {
  font-size: 2.4rem;
}

.sitemap_nav {
  padding: 3rem;
  max-width: 1600px;
  margin: 0 auto;
}
/* 복제된 .gnb → 컬럼 레이아웃 */
.sitemap_nav .gnb {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.sitemap_nav .gnb_menu {
  display: block; /* 반응형에서 숨겨진 헤더 GNB와 무관하게 항상 표시 */
  position: static;
}
.sitemap_nav .gnb_menu > a {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #111;
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #111;
}
/* 서브메뉴: 항상 펼쳐서 표시 (드롭다운 스타일 무력화) */
.sitemap_nav .gnb_sub {
  position: static;
  display: block;
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.sitemap_nav .gnb_sub > li {
  margin-bottom: 1.2rem;
}
.sitemap_nav .gnb_sub > li > a {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
}
.sitemap_nav .gnb_sub2 {
  margin-top: 0.4rem;
}
.sitemap_nav .gnb_sub2 li a {
  font-size: 0.92rem;
  color: #777;
  line-height: 1.9;
  transition: color 0.2s;
}
.sitemap_nav .gnb_sub2 li a:hover,
.sitemap_nav .gnb_sub > li > a:hover {
  color: var(--main-color);
}

/* 레이어 반응형 */
@media screen and (max-width: 1200px) {
  .sitemap_top {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sitemap_nav .gnb {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 900px) {
  .sitemap_nav {
    padding: 2rem 1.5rem;
  }
  .sitemap_nav .gnb {
    grid-template-columns: repeat(2, 1fr);
  }
  .search_layer {
    padding: 1.5rem;
  }
  .search_input {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 640px) {
  .sitemap_nav .gnb {
    grid-template-columns: 1fr;
  }
}

/* footer */
/* footer {
  background-color: #f0f2f4;
} */
.f_partner {
  width: 100%;
  display: flex;
  border: 1px solid var(--line-color);
  border-width: 1px 0 1px 0;
}
.f_partner .tit_st2 {
  padding-left: 8rem;
  width: 20%;
  padding-top: 2rem;
  border-right: 1px solid var(--line-color);
  padding-bottom: 2.5rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
}
.f_partner_tit {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--tit-color);
  letter-spacing: -1px;
}
.f_partner .btn_wrapper {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.f_content {
  width: 80%;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 0;
}
.f_content .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  position: relative;
  box-sizing: border-box;
  padding: 0 10px; /* 좌우 대칭 갭 (총 20px) */
  max-height: 120px; /*260921 추가*/
}
.f_content .swiper-slide::before {
  content: "";
  width: 1px;
  height: 90%;
  position: absolute;
  right: 0; /* 슬라이드 경계 = 두 이미지 정중앙 */
  top: 50%;
  transform: translateY(-50%);
  background: var(--line-color);
}
.f_content .btn_wrap {
  justify-content: flex-start;
  padding-left: 2rem;
  padding-bottom: 1.5rem;
  gap: 0.6rem;
}
.f_bottom .wFix {
  max-width: 1820px;
  border-top: 1px solid var(--line-color);
}
.f_util {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-color);
}
.f_util a {
  font-size: 1.2rem;
  color: var(--sub-txt-color);
  font-weight: 500;
}
.f_util li:first-child a {
  color: var(--main-color);
}
.f_info {
  padding: 1.5rem 0;
  gap: 0.4rem;
  position: relative;
}
.f_address {
  margin-top: 0.4rem;
}
.f_address li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sub-txt-color);
}
.f_address li p {
  width: 64px;
}
.f_copy {
  color: #afb2b9;
  margin-top: 2rem;
}
.f_family {
  position: absolute;
  right: 0;
  top: 1.5rem;
}
.f_family_select {
  background: #e3e5eb;
  padding: 1rem 1.4rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  border: none !important;
  height: auto;
  appearance: none; /* 기본 화살표 제거 */
  -webkit-appearance: none;
  width: 200px;
}
.f_family_select:focus,
.f_family_select:focus-visible {
  outline: none !important;
  box-shadow: none;
  border: 1px solid var(--line-color) !important;
}

.f_family::after {
  content: "arrow_drop_down";
  font-family: "Material Symbols Outlined";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
@media screen and (max-width: 1440px) {
  .f_partner {
    flex-direction: column;
  }
  .f_partner > div {
    width: 100%;
  }
  .f_partner .tit_st2 {
    flex-direction: row;
    align-items: center;
    padding: 1.2rem 2rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-color);
    border-right: none;
    width: 100%;
  }
  .f_partner .btn_wrapper {
    margin-top: 0;
  }
  .f_content {
    padding: 0;
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
  }
  .f_content .btn_wrap {
    padding: 1.2rem 2rem;
    padding-bottom: 1rem;
  }
}
@media screen and (max-width: 1200px) {
  .f_util a {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 1200px) {
  .f_bottom .wFix {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .f_partner .tit_st2 {
    padding: 1rem 1.5rem;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .f_partner_tit {
    font-size: 1.2rem;
  }
  .f_content .btn_wrap {
    padding: 1.5rem;
    padding-top: 0.6rem;
    gap: 0.4rem;
  }
  .partner_swiper li a img {
    object-fit: contain;
  }
  .f_util {
    padding: 1rem 0;
    /* border-bottom: none; */
    gap: 0.6rem;
    /* padding-bottom: 0; */
    flex-direction: row;
    align-items: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .f_util li {
    line-height: 1;
  }
  .f_util a {
    font-size: 0.8rem;
  }
  .f_address li,
  .f_copy {
    font-size: 0.8rem;
  }
  .f_address li p {
    width: 50px;
  }
  .f_copy {
    margin-top: 1.5rem;
  }
  .f_info {
    padding: 1.2rem 0;
  }
  .f_logo {
    margin-top: 0.6rem;
    height: 60px;
  }
  .f_family {
    position: relative;
    width: 100%;
    top: unset;
    right: unset;
    margin-top: 1rem;
  }
  .f_family_select {
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 640px){
  .f_address{display: flex;flex-direction: column;gap: .6rem;margin-top: 1rem;padding-left: .4rem;}
  .f_address li{flex-direction: column;align-items: flex-start;gap: 0rem;}
  
}
/* footer */

/* --공통 스타일-- */
#sc_main {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #f0f2f4;
}
/* 상하 여백을 화면 높이에 비례해 축소(최대 4rem 유지).
   1080px에선 6vh≈64.8px→4rem으로 캡되어 기존 레이아웃 그대로,
   짧은 화면(1366×768 등)에선 자동으로 줄어 콘텐츠 잘림 방지 */
.wFix.content_wrap {
  padding: clamp(1.25rem, 6vh, 4rem) 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 타이틀 스타일 */
.tit_st1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tit_st1 .tit {
  font-size: 2.6rem;
  font-weight: bold;
  color: var(--tit-color);
  letter-spacing: 0;
}
.tit_st1 .tag {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  width: fit-content;
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
}

.tit_st2 {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tit_st2 .tit {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--tit-color);
  letter-spacing: -1px;
}
.tit_st2 .tit:hover {
  text-decoration: none !important;
}
.tit_st2 .txt {
  color: var(--sub-txt-color);
  font-size: 1.2rem;
}
.tit_st2 + .btn_wrap {
  justify-content: flex-start;
  margin-top: 2rem;
}

.tit_s {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--sub-tit-color);
  display: block;
}
.tit_m {
  font-size: 1.8rem;
  color: var(--sub-tit-color);
  font-weight: 600;
}
/* 타이틀 스타일 */

/* 버튼 스타일 */
.btn_df {
  padding: 1.2rem 1.6rem;
  min-width: 260px;
  background: var(--bg-sub-light);
  border-radius: 12px;
  color: var(--tit-color);
  height: 60px;
}
.btn_df:hover {
  background: var(--bg-sub-color);
}
.btn_df.bg_mainColor:hover {
  background-color: var(--main-color-dark) !important;
}

.btn_more {
  color: var(--sub-tit-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn_more .material-symbols-outlined {
  opacity: 1 !important;
}
/* 흰색 VIEW MORE — 메인 비주얼(사진 위) 전용. 글자·아이콘은 .btn_more 그대로, 색만 흰색 (테두리·패딩 없음) */
.btn_more.btn_more_w {
  color: white;
  height: 2.6rem;
  align-self: flex-start;
  margin-top: 1.5rem;
}
/* hover 는 색으로 — opacity 는 진입 애니메이션(fill: both)에 덮여서 안 먹는다 */
.btn_more.btn_more_w:hover {
  color: rgba(255, 255, 255, 0.7);
}

.btn_more2 {
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.4rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-color);
}
.btn_more2:hover {
  background: white;
  color: var(--main-color);
}
.btn_more2 .material-symbols-outlined {
  font-size: 1.4rem;
}
/* 컬러 배경 위에 놓이는 btn_more2: 기본 상태부터 흰 배경(강조형) */
.update_list > li:first-child .btn_more2,
.card_list .swiper-slide-active .btn_more2,
.main_news .content_box .img_box .btn_more2 {
  background-color: white;
  color: var(--main-color);
}

.btn_go {
  color: var(--sub-tit-color);
  background: var(--bg-sub-light);
  width: fit-content;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 400 !important;
}

.tab_st1 .btn_tab {
  color: #a8adba;
  font-size: 1.4rem;
  position: relative;
  padding-left: 1rem;
  font-weight: 400;
}
.tab_st1 .btn_tab::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #a8adba;
  position: absolute;
  left: 2px;
  border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.tab_st1 .btn_tab.on {
  color: var(--main-color);
  font-size: 1.8rem;
  font-weight: bold;
}
.tab_st1 .btn_tab.on::before {
  background-color: var(--main-color);
}

.tab_st1 .btn_tab:hover {
  color: var(--main-color);
}
.tab_st1 .btn_tab:hover::before {
  background-color: var(--main-color);
}

.tab_st2 .btn_tab {
  font-size: 1.2rem;
  color: var(--sub-txt-color);
  position: relative;
  overflow: visible;
}
.tab_st2 .btn_tab:hover {
  color: var(--main-color);
}
.tab_st2 .btn_tab::before {
  content: "";
  opacity: 0;
  transition: 0.2s all;
  width: 100%;
  height: 3px;
  background: var(--main-color);
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
}
.tab_st2 .btn_tab.on {
  font-weight: bold;
  color: var(--main-color);
}
.tab_st2 .btn_tab.on::before {
  opacity: 1;
}
/* 버튼 스타일 */

.tag_f {
  color: var(--sub-tit-color);
  background: var(--bg-sub-color);
  width: fit-content;
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
}
.content_wrap .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line-color);
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 1440px) {
  .tit_st1 {
    gap: 0.6rem;
  }
  .tit_st1 .tit {
    font-size: 2.2rem;
  }
  .tab_st1 .btn_tab {
    font-size: 1.2rem;
  }
  .tab_st1 .btn_tab.on {
    font-size: 1.4rem;
  }
  .swiper .btn_wrapper {
    margin-top: 1.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .wFix.content_wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .tab_st1 .btn_tab {
    font-size: 1rem;
  }
  .tab_st1 .btn_tab.on {
    font-size: 1.2rem;
  }
  .tit_st1 .tit {
    font-size: 1.6rem;
  }
  .tit_st1 .tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.2rem;
  }
  .tit_m {
    font-size: 1.4rem;
  }
  .tit_st2 .tit {
    font-size: 1.4rem;
  }
  .tit_st2 .txt {
    font-size: 1rem;
  }
  .tit_st2 + .btn_wrap {
    margin-top: 1rem;
  }

  .swiper .btn_arrow,
  footer .btn_arrow,
  .sub_content .btn_arrow {
    width: 2rem;
    height: 2rem;
  }
  .btn_df {
    padding: 1rem 1.2rem;
    min-width: 220px;
  }
  .btn_more {
    font-size: 0.9rem;
  }
  .btn_more .material-symbols-outlined {
    font-size: 1.2rem;
  }
  .btn_more2 {
    width: 2rem;
    height: 2rem;
  }
  .tag_f {
    font-size: 0.8rem;
  }
  .content_wrap .top {
    padding-bottom: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .btn_go {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
}
@media screen and (max-width: 1200px) {
  .tit_st1 .tit {
    font-size: 1.6rem;
  }
  .tit_st1 .tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.2rem;
  }
  .tit_s {
    font-size: 1rem;
  }
  .tit_m {
    font-size: 1.2rem;
  }
  .tit_st2 .tit {
    font-size: 1.2rem;
  }
  .tit_st2 .txt {
    font-size: 0.9rem;
  }

  .btn_more {
    font-size: 0.8rem;
  }
  .tab_st1 .btn_tab {
    font-size: 0.9rem;
  }
  .tab_st1 .btn_tab::before {
    width: 5px;
    height: 5px;
    left: 4px;
  }
  .tab_st1 .btn_tab.on {
    font-size: 1rem;
  }
  .btn_more2 {
    width: 1.8rem;
    height: 1.8rem;
  }
  .btn_more2 .material-symbols-outlined {
    font-size: 1.2rem;
  }
  .tab_st2 .btn_tab {
    font-size: 0.9rem;
  }
}

/* 풀페이지 (세로 스냅 스와이퍼) 메인*/
html,
body {
  height: 100%;
}
.fullpage {
  width: 100vw;
  height: 100vh;
}
.fullpage > .swiper-wrapper > .swiper-slide {
  height: 100vh;
  overflow: hidden;
}
.fullpage .main_content {
  width: 100%;
  height: 100vh;
}

/* 풀페이지 섹션 진입 애니메이션 (섹션 넘어갈 때마다 콘텐츠 스르륵 등장) */
@keyframes mainFadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 이동 없이 페이드만 (transform으로 정렬된 요소용 - 위치 안 틀어지게) */
@keyframes mainFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fullpage > .swiper-wrapper > .swiper-slide .content_wrap > * {
  opacity: 0;
}
.fullpage > .swiper-wrapper > .swiper-slide-active .content_wrap > * {
  animation: mainFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fullpage > .swiper-wrapper > .swiper-slide-active .content_wrap > *:nth-child(1) {
  animation-delay: 0.1s;
}
.fullpage > .swiper-wrapper > .swiper-slide-active .content_wrap > *:nth-child(2) {
  animation-delay: 0.25s;
}
.fullpage > .swiper-wrapper > .swiper-slide-active .content_wrap > *:nth-child(3) {
  animation-delay: 0.4s;
}
/* hero(main_vis) 타이틀 + 스와이퍼 컨트롤 별도 진입 (fade와 충돌 없게 자식/형제 요소만) */
.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .tit,
.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .txt,
.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .btn_more_w,
.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_content .btn_wrap,
.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_page_wrap {
  opacity: 0;
} 
.fullpage > .swiper-wrapper > .swiper-slide-active.main_vis .vis_txt .tit {
  animation: mainFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}
.fullpage > .swiper-wrapper > .swiper-slide-active.main_vis .vis_txt .txt {
  animation: mainFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}
.fullpage > .swiper-wrapper > .swiper-slide-active.main_vis .vis_txt .btn_more_w {
  animation: mainFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.5s;
}
.fullpage > .swiper-wrapper > .swiper-slide-active.main_vis .vis_content .btn_wrap,
.fullpage > .swiper-wrapper > .swiper-slide-active.main_vis .vis_page_wrap {
  animation: mainFade 0.9s ease both;
  animation-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .fullpage > .swiper-wrapper > .swiper-slide .content_wrap > *,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .tit,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .txt,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .btn_more_w,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_content .btn_wrap,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_page_wrap {
    opacity: 1;
    animation: none;
  }
}

/* 모바일(≤900px): 풀페이지 해제 */
@media screen and (max-width: 1200px) {
  html,
  body {
    height: auto;
  }
  #sc_main {
    height: auto;
    overflow: visible;
  }
  .fullpage {
    width: 100%;
    height: auto;
  }
  #sc_main > .swiper-wrapper {
    display: block;
    height: auto;
    transform: none !important;
  }
  .fullpage > .swiper-wrapper > .swiper-slide {
    height: auto;
    overflow: visible;
  }
  .fullpage .main_content {
    height: auto;
  }
  .wFix.content_wrap {
    height: auto;
  }
  /* 풀페이지 해제 시엔 active 클래스가 없으므로 진입 애니메이션 끔 (숨김 방지) */
  .fullpage > .swiper-wrapper > .swiper-slide .content_wrap > *,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .tit,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .txt,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .btn_more_w,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_content .btn_wrap,
  .fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_page_wrap {
    opacity: 1;
    animation: none;
  }
  .fullpage_pagination {
    display: none;
  }

  .fullpage .main_content.main_vis {
    height: 80vh;
    /* 최소 높이 = 글자+버튼(위) + 좌측 하단 카테고리 목록 5줄(아래)이 안 겹치는 높이.
       420px 이면 낮은 화면(1024×560 등)에서 목록이 버튼 위로 올라온다. ≤640 은 아래에서 따로 */
    min-height: 36rem;
  }
  .swiper .btn_arrow,
  footer .btn_arrow,
  .sub_content .btn_arrow {
    width: 2rem;
    height: 2rem;
  }
  footer .swiper-pagination-fraction {
    font-size: 0.9rem;
  }
}

/* 오른쪽 점 네비게이션 */
.fullpage_pagination {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.fullpage_pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgb(191 191 191 / 50%);
  opacity: 1;
}
.fullpage_pagination .swiper-pagination-bullet-active {
  background: #b4b4b4;
}

/* 메인 비주얼 슬라이드 */
.vis_swiper {
  width: 100%;
  height: 100%;
}
.vis_swiper > .swiper-slide {
  width: 100%;
  height: 100%;
}
.vis_content {
  width: 100%;
  height: 100%;
}
.main_vis {
  position: relative;
  /* 🔴 PC: 컨트롤 한 줄(1 / 5 ‹ ›)을 제목 위 고정선(--vis-ctrl-top)에 두고, 글자는 그 아래부터 쌓는다.
     둘 다 위에서 재므로 제목이 줄바꿈돼도 글자는 아래로만 자라서 컨트롤과 안 겹친다.
     (예전: 글자는 세로 가운데, 컨트롤은 top:64%·장수는 bottom:18rem 이라 기준이 제각각이라 겹쳤다)
     ≤1100 은 글자 흐름 + 컨트롤 우측 하단 (아래 반응형) */
  /* 딤드 — 슬라이드 ::before. 진하기는 이 값 하나로 조절 (≤1100 은 아래 반응형에서 따로) */
  --vis-dim: linear-gradient(90deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 65%) 45%, rgba(0, 0, 0, 0.1) 100%);
  --vis-ctrl-top: 36%;
  --vis-ctrl-h: 2.2rem;
  --vis-ctrl-gap: 1.4rem;
}
.vis_page_wrap {
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #fff;
}
.vis_page_wrap .vis_page {
  position: static;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vis_page .swiper-pagination-bullet {
  width: auto;
  height: auto;
  margin: 0 !important;
  background: transparent;
  border-radius: 0;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  transition: opacity 0.3s;
}
.vis_page .swiper-pagination-bullet .vis_dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  display: none;
  transition: all 0.3s;
}
.vis_page .swiper-pagination-bullet .vis_label {
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
}
.vis_page .swiper-pagination-bullet-active {
  opacity: 1;
  border: 1px solid #ffffff6e;
  border-radius: 200px;
  padding: 0.4rem 1rem;
}
.vis_page .swiper-pagination-bullet-active .vis_dot {
  width: 10px;
  height: 10px;
  display: block;
}
.vis_page .swiper-pagination-bullet-active .vis_label {
  font-weight: 600;
}

.vis_content .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 딤드 — 글자(.vis_txt z-index:1)보다 아래, 사진보다 위. 컨트롤(.btn_wrap)은 슬라이드 밖이라 영향 없음 */
.vis_content .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vis-dim);
  pointer-events: none;
}
.vis_txt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--vis-ctrl-top) + var(--vis-ctrl-h) + var(--vis-ctrl-gap));
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 1;
}
.vis_txt .tit {
  font-size: 3.6rem;
  color: white;
  font-weight: bold;
  letter-spacing: -2px;
  word-break: keep-all;
}
.vis_txt .txt {
  font-size: 1.2rem;
  color: #ffffff94;
}

/* 장수(1 / 5)는 화살표와 한 줄 (Swiper 가 채운다). absolute 로 따로 띄우면 제목과 겹친다 */
.vis_content .swiper-pagination-fraction {
  color: white;
  position: static;
}
.vis_content .btn_wrap {
  position: absolute;
  width: 100%;
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  top: var(--vis-ctrl-top);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.vis_content .btn_wrap .btn_arrow {
  width: var(--vis-ctrl-h);
  height: var(--vis-ctrl-h);
  padding: 0.4rem;
  color: #ffffff;
  border: 1px solid #ffffff70;
}
.vis_content .btn_wrap .btn_arrow:hover {
  border-color: #fff;
}
/* 1441~1680px — 글자·컨트롤 시작선을 왼쪽 카테고리 목록(.vis_page_wrap, left 3rem · 폭 ~150px) 오른쪽으로 (2026-10-26)
   가운데 1200px 상자의 왼쪽 끝이 폭이 줄수록 다가와 1600 에서 목록에 붙고 1536 에서 34px 겹쳤다.
   시작선 = max(가운데 정렬 자리, 16rem) — 1700px 이상은 원래 자리 그대로. ≤1440 은 목록이 아래로 가서 해당 없음 */
@media screen and (min-width: 1441px) {
  .vis_txt,
  .vis_content .btn_wrap {
    box-sizing: border-box;
    max-width: none;
    padding-left: max(calc((100% - 1200px) / 2), 16rem);
    padding-right: max(calc((100% - 1200px) / 2), 3rem);
  }
}

/* 반응형 */
@media screen and (max-width: 1440px) {
  .vis_txt {
    max-width: 100%;
    padding: 0 3rem;
  }
  .vis_page_wrap {
    transform: none;
    bottom: 3rem;
    top: unset;
  }
  .vis_page_wrap .vis_page {
    flex-direction: row;
  }
  .vis_content .btn_wrap {
    max-width: 100%;
    padding: 0 3rem;
  }
  .vis_cate_page {
    left: 3rem !important;
  }
}
@media screen and (max-width: 1440px) {
  .vis_txt .tit {
    font-size: 2.8rem;
  }
  .swiper .swiper-pagination-fraction {
    bottom: 12rem;
    font-size: 0.9rem;
    margin-right: 0.4rem;
  }
}
@media screen and (max-width: 1200px) {
  .fullpage_pagination {
    display: none;
  }

  .vis_content .swiper-slide {
    align-items: flex-start;
    padding-top: 12rem;
    background-position: 68%;
  }
  .main_vis {
    --vis-dim: linear-gradient(45deg, #0000008f, transparent);
  }
  /* static 이면 z-index 가 안 먹어 딤(::before)이 글자 위를 덮는다 → relative 로 흐름은 유지하고 위로 올림 */
  .vis_txt {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0 2rem;
  }
  .btn_more.btn_more_w {
    height: 2.2rem;
    margin-top: 1rem;
  }
  .vis_txt .tit {
    font-size: 1.8rem;
    letter-spacing: -1px;
  }
  .vis_txt .txt {
    font-size: 0.9rem;
  }

  /* 컨트롤은 우측 하단 — 좌측 하단 카테고리 목록과 같은 바닥선(2rem). 글자와 기준이 달라도 영역이 안 겹친다 */
  .vis_content .btn_wrap {
    width: auto;
    top: auto;
    bottom: 2rem;
    right: 2rem;
    left: auto;
    transform: none;
    justify-content: flex-end;
    padding: 0;
  }
  .vis_page .swiper-pagination-bullet-active {
    padding: 0.3rem 0.8rem;
  }
  .vis_page .swiper-pagination-bullet-active .vis_dot {
    width: 6px;
    height: 6px;
  }
  .swiper .swiper-pagination-fraction {
    position: static;
    width: auto;
    margin-right: 0.6rem;
    font-size: 0.9rem;
  }
  .swiper .btn_wrap .btn_arrow {
    width: 2rem;
    height: 2rem;
  }

  .vis_page_wrap {
    left: 2rem;
    bottom: 2rem;
  }
  .vis_page_wrap .vis_page {
    flex-direction: column;
    gap: 0.6rem;
  }
}
@media screen and (max-width: 640px) {
  .fullpage .main_content.main_vis {
    min-height: 33rem;
  }
  .vis_txt .tit {
    font-size: 1.7rem;
    line-height: 1.4;
  }
  .vis_content .swiper-slide {
    padding-top: 8rem;
  }
  .vis_page .swiper-pagination-bullet .vis_label {
    font-size: 0.9rem;
  }
}
/* 메인 비주얼 슬라이드 */

/* 주요 소식 안내 */
.main_update {
  background-image: url("../../images/main/content_bg.png");
}

.update_list_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.update_list_wrap .tab_st1 {
  width: 20%;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
}

.update_list {
  width: 75%;
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-template-rows: repeat(3, 1fr);
}

/* 첫 번째 = 카드 (왼쪽 열을 세로로 통째 차지) */
.update_list > li:first-child {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: var(--main-color);
  background-image: url("../../images/main/card_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  margin-right: 2rem;
  border-radius: 12px;
  transition: 0.2s all;
  align-items: flex-start;
}
.update_list > li:first-child:hover {
  box-shadow: 0 2px 10px #99a0a6;
}
.update_list > li:first-child .btn_wrap {
  justify-content: flex-end;
  width: 100%;
}
.update_list > li:first-child .btn_more2 .material-symbols-outlined {
  opacity: 1;
}
.update_list > li:first-child .tit {
  font-size: 1.5rem;
  line-height: 1.4;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}
.update_list > li:first-child .date {
  color: var(--sub-txt-color2);
  margin-top: .2rem;
  display: block;
}
.txt_box .txt_box {
  display: flex;
  flex-direction: column;
}
.txt_box .tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.4rem;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
  color: var(--sub-tit-color);
  font-weight: 500;
}
.txt_box .tit:hover {
  text-decoration: underline;
}
.list > li {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-color);
}
.list > li .txt_box .tit {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
/* 주요 소식 안내 */

/* 퀵메뉴 */
.quick_menu {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: auto;
  border-radius: 12px;
  background: white;
  overflow: hidden;
}
.quick_menu li {
  border-right: 1px solid var(--line-color-light);
}
.quick_menu li:last-child {
  border-right: none;
}

.quick_menu li:first-child {
  background: var(--main-color);
}
.quick_menu li:first-child .btn_go {
  background: white;
  color: var(--main-color);
}

.quick_menu li a {
  display: flex;
  padding: 1.4rem;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--tit-color);
}
.quick_menu li .img_box {
  height: 26px;
}
/* 퀵메뉴 */

/* 반응형 */
@media screen and (max-width: 1440px) {
  .update_list_wrap .tab_st1 {
    width: 20%;
  }
  .update_list {
    width: 80%;
  }
  .update_list > li:first-child {
    margin-right: 1rem;
  }
  .update_list > li:first-child .tit,
  .txt_box .tit {
    font-size: 1.2rem;
    margin-bottom: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-top: .4rem;
  }

  .quick_menu li a {
    font-size: 1.2rem;
  }
  .quick_menu li .img_box {
    height: 26px;
  }
}
@media screen and (max-width: 1200px) {
  .update_list_wrap {
    flex-direction: column;
  }
  .update_list_wrap .tab_st1 {
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.4rem;
  }
  .update_list {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .update_list > li:first-child {
    grid-column: 1;
    grid-row: auto;
    margin-right: 0;
    margin-bottom: 0rem;
    padding: 1.2rem;
    align-items: flex-start;
  }
  .list > li {
    grid-column: 1;
    padding: 1rem;
  }
  .update_list > li:first-child .date {
    margin-top: 0.2rem;
  }
  .update_list > li:first-child .tit,
  ul > li .tit {
    font-size: 1rem;
    margin-top: 0.4rem;
  }
  .list > li .txt_box .tit {
    font-size: 1rem;
  }

  .quick_menu {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick_menu li:nth-child(2) {
    border-right: none;
    border-bottom: 1px solid var(--line-color-light);
  }
  .quick_menu li .img_box {
    height: 20px;
  }
  .quick_menu li a {
    padding: 0.8rem;
    font-size: 1rem;
  }
}
@media screen and (max-width: 1200px) {
  .update_list_wrap {
    margin-bottom: 2.5rem;
  }
  .update_list_wrap .tab_st1 {
    margin-bottom: 1.5rem;
    gap: 0.6rem;
  }
  .txt_box {
    font-size: 0.9rem;
  }
  .update_list > li:first-child {
    padding: 1rem;
  }
  .update_list > li:first-child .tit {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .update_list > li:first-child .btn_wrap {
    /* display: none; */
    justify-content: flex-start;
  }
  .list > li {
    padding: 0.8rem;
  }
  .quick_menu {
    grid-template-columns: repeat(1, 1fr);
  }

  .quick_menu li a {
    padding: 1rem;
    font-size: 1rem;
  }
  .quick_menu li {
    border-right: none;
    border-bottom: 1px solid var(--line-color-light);
  }
  .quick_menu li:last-child {
    border-bottom: none;
  }
}
@media screen and (max-width: 640px) {
  .update_list_wrap .tab_st1 {
    gap: 0.6rem;
  }
  .update_list_wrap .btn_tab {
    padding: 0;
  }
  .update_list_wrap .btn_tab::before {
    display: none;
  }
}
/* 반응형 */
/* 퀵메뉴 + 주요소식 안내 */

/* 보도자료 + 홍보마당 */
.main_press .wFix.content_wrap {
  max-width: 1820px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 행을 컨테이너 높이에 고정(minmax 0 = 카드가 남은 높이에 맞게 축소 허용).
       카드 안 swiper(flex:1)·이미지(height:50%)가 정상적으로 줄어 잘림 방지 */
  grid-template-rows: minmax(0, 1fr);
  gap: 2rem;
}

.card_list {
  padding: 2.8rem;
  background-color: white;
  border-radius: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card_list .swiper {
  width: 100%;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card_list .swiper-wrapper {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.card_list .swiper > .btn_wrap,
.card_list .swiper > .btn_wrapper {
  flex-shrink: 0;
}
.card_list .tit_st1 {
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
.card_list .swiper-slide {
  transition: 0.2s all;
}
.card_list .swiper-slide-active {
  background-color: var(--main-color);
  padding: 1.5rem;
  border-radius: 12px;
  background-image: url("../../images/main/card_bg.png");
  background-position: center;
  background-size: cover;
  background-blend-mode: overlay;
  display: flex;
  flex-direction: column;
}
.card_list .swiper-slide-active .txt_box .tit {
  color: white;
}
.card_list .swiper-slide-active .txt_box .date {
  color: var(--sub-txt-color2);
}
.card_list .swiper-slide-active:hover {
  box-shadow: 0 2px 6px #99a0a6;
}

.card_list .swiper-slide .img_box {
  border-radius: 12px;
  overflow: hidden;
  height: 50%;
  max-height: 190px;
  width: 100%;
}
.card_list .swiper-slide .btn_wrap {
  display: none;
}
.card_list .swiper-slide-active .btn_wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
.card_list .btn_wrap {
  margin-left: auto;
}

@media screen and (max-width: 1440px) {
  .main_press .wFix.content_wrap {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }
  .card_list {
    min-height: 0;
    overflow: hidden;
    padding: 3rem;
  }
  .card_list .tit_st1 {
    margin-bottom: 2rem;
    gap: 0.4rem;
    justify-content: flex-start;
  }
  .card_list .swiper-slide{
    height: 300px;
  }
  .card_list .swiper-slide .img_box {
    max-height: none;
  }
  .card_list .swiper-slide-active {
    padding: 1.5rem;
  }
  .card_list .swiper-slide .txt_box .date {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 1200px) {
  .main_press .wFix.content_wrap {
    /* grid-template-columns: repeat(2, 1fr); */
    /* grid-template-rows: auto; */
  }
  .card_list .tit_st1 {
    flex-direction: column;
  }
  .card_list{
    padding: 2rem
  }
}
/* 보도자료 + 홍보마당 */

/* info_tex + ktdi 최신뉴스 */
.main_news {
  background-image: url("../../images/main/content_bg2.png");
}
.main_news .content_wrap {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 2rem;
  align-content: center;
}
.main_news .info_tex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main_news .content_box {
  padding-top: 1.2rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.main_news .content_box .img_box {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.main_news .content_box .img_box > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.main_news .content_box .img_box::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #0000009e, transparent);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.main_news .content_box .img_box .btn_wrap {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
}

.main_news .apply {
  padding: 1.4rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  background-color: var(--bg-sub-dark);
  border-radius: 12px;
  justify-content: space-between;
  font-weight: 600;
  color: white;
}

.main_news .top {
  padding-top: 0;
}
.main_news .list li {
  justify-content: flex-start;
}
.main_news .list .btn_wrap {
  margin-left: auto;
}
.list .thumb {
  max-height: 150px;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}
@media screen and (max-width: 640px) {
  .main_press .wFix.content_wrap {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }
}

.ktdi_news {
  overflow: hidden;
}
@media screen and (max-width: 1440px) {
  .main_news .apply {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .main_news .content_wrap {
    grid-template-columns: 4fr 6fr;
    gap: 1.2rem;
  }
  .main_news .content_box {
    padding-top: 0.8rem;
    gap: 0.8rem;
  }
  .main_news .apply {
    padding: 1rem;
    font-size: 1rem;
  }
  .main_news .list > li {
    padding: 1rem;
  }
  .main_news .list .thumb {
    max-height: 80px;
    width: 150px;
  }
}
@media screen and (max-width: 900px) {
  .main_news .content_wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-content: start;
    padding-bottom: 6rem;
  }
  .main_news .info_tex {
    height: auto;
  }
  /* 모바일에선 flex 신축이 끊기므로, 최신뉴스와 무관한 고정 400px 대신
       화면폭에 비례(60vw)하되 상한(320px)·하한(200px)을 둬 과도하게 길어지지 않게 함 */
  .main_news .content_box .img_box {
    flex: none;
    height: 60vw;
    max-height: 320px;
    min-height: 200px;
  }
  .main_news .list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem;
  }
  .main_news .list .thumb {
    width: 100%;
    height: 180px;
    max-height: none;
  }
  .main_news .list .txt_box {
    padding-left: 0.4rem;
  }
  .main_news .list .txt_box .tit {
    font-size: 1rem;
    margin-top: 0;
  }
  .main_news .list .btn_wrap {
    display: none;
  }
}
/* info_tex + ktdi 최신뉴스 */

/* 짧은 세로 해상도 단계(세로 ≤900/780/680) 3블록은 2026-10-19 삭제 — 조건이 모순(min-height 901 & max-height 900)이라
   한 번도 적용되지 않던 코드. 노트북 높이 보정은 이 파일 맨 아래 '노트북 풀페이지' 블록. 원본은 _backup-261019/main.css */


/* ============================================================================
 * [추가] KTDI 최신뉴스 3건이 좌측 INFO-TEX(.content_box) 높이에 맞춰 자동 균등 분할
 *
 * 기존 : 화면 높이(max-height 900 / 780 / 680)마다 `.main_news .list > li` 의 padding 과
 *        `.list .thumb` 의 max-height(150px → 18vh → 15vh → 13vh)를 계단식으로 줄여
 *        맞췄다. 단계 사이 높이에서는 우측이 남거나(공백) 넘쳤다.
 * 변경 : 그리드 행을 컨테이너 높이에 고정하고 li 를 flex:1 로 균등 분할한다.
 *        3건이 항상 좌측 .content_box 와 같은 높이로 꽉 찬다.
 *        li 개수가 바뀌어도(2건·4건) flex-basis:0 이라 알아서 나눠 갖는다.
 * 범위 : 풀페이지 유지 구간(1101px 이상)만. 1100px 이하는 1단 세로 적층이라 그대로 둔다.
 * ==========================================================================*/
@media screen and (min-width: 1201px) and (min-height: 640px) {

	/* 행을 컨테이너 높이에 고정 — align-content:center 때문에 내용 높이만 차지하던
	   것을 없애 좌·우 컬럼이 같은 높이로 늘어난다.
	   (기존에는 max-height:900px 구간에서만 이 값을 줬다) */
	.main_news .content_wrap {
		grid-template-rows: minmax(0, 1fr);
		align-content: stretch;
	}

	/* 우측 컬럼 — .top(제목+VIEW MORE) 아래 남은 높이를 .list 가 전부 차지 */
	.main_news .ktdi_news {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.main_news .ktdi_news .top {
		flex: 0 0 auto;
	}
	.main_news .ktdi_news .list {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	/* 균등 분할 — flex-basis:0 이라 건수에 관계없이 남은 높이를 나눠 갖는다.
	   min-height:0 이 없으면 flex 아이템의 자동 최소높이(content) 때문에 안 줄어든다. */
	.main_news .list > li {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
	}
	/* 마지막 줄 밑줄 제거 — 꽉 채우면 컬럼 바닥선과 겹쳐 두 줄로 보인다 */
	.main_news .list > li:last-child {
		border-bottom: 0;
	}

	/* 썸네일 — 가로폭은 시안 비례(150~260px)를 유지하고 **높이만** li 에 맞춰 늘어난다.
	   🔴 기존 계단식 max-height(150px·18vh·15vh·13vh)를 무력화해야 높이가 자유로워진다.
	   ⚙ 썸네일이 너무 크거나 작으면 아래 clamp 의 가운데(14vw)와 상한(260px)만 조절. */
	.main_news .list .thumb {
		flex: 0 0 auto;
		align-self: stretch;
		width: clamp(150px, 14vw, 260px);
		height: auto;
		max-height: none;
	}
	.main_news .list .thumb > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 텍스트 — 남은 가로폭 안에서 말줄임 */
	.main_news .list .txt_box {
		flex: 1 1 auto;
		min-width: 0;
	}
}


/* ============================================================================
 * [추가] 화면 높이 639px 이하에서 풀페이지(세로 스냅) 해제 (2026-10-19: 900 → 639, 노트북도 풀페이지)
 *
 * 이유 : 섹션이 height:100vh 라 세로가 짧은 화면에서 콘텐츠가 잘렸다.
 *        기존에는 max-height 900/780/680 단계마다 여백·이미지 높이를 깎아 억지로
 *        밀어넣었는데, 단계 사이에서 남거나 넘쳤고 근본 해결이 아니었다.
 *        → 세로가 짧으면 아예 스냅을 풀고 일반 스크롤로 흐르게 한다.
 *
 * 범위 : 폭은 넓고(≥1201px) 세로만 짧은 구간. 1200px 이하는 기존 모바일 블록이 담당.
 *        **2단 데스크탑 레이아웃은 그대로 유지**하고 세로 스냅만 푼다
 *        (1600×900 = 뷰포트 ~800px 처럼 흔한 해상도가 모바일 1단으로 떨어지지 않게).
 *
 * 🔴 JS 와 반드시 짝을 맞출 것 — js/overrides/main.js 의
 *      matchMedia('(max-width: 1200px), (max-height: 639px)')
 *    한쪽만 고치면 스와이퍼는 살아있는데 CSS 는 블록 레이아웃이라 화면이 깨진다.
 * ==========================================================================*/
@media screen and (min-width: 1201px) and (max-height: 639px) {

	/* ── 스냅 해제 (기존 모바일 블록의 '해제 메커니즘'만 동일하게) ── */
	html,
	body {
		height: auto;
	}
	#sc_main {
		height: auto;
		overflow: visible;
	}
	.fullpage {
		width: 100%;
		height: auto;
	}
	#sc_main > .swiper-wrapper {
		display: block;
		height: auto;
		transform: none !important;
	}
	.fullpage > .swiper-wrapper > .swiper-slide {
		height: auto;
		overflow: visible;
	}
	.fullpage .main_content {
		height: auto;
	}
	.wFix.content_wrap {
		height: auto;
	}

	/* 🔴 진입 애니메이션 끄기 — 스냅이 풀리면 .swiper-slide-active 가 없어서
	      opacity:0 인 채로 남는다(섹션이 통째로 안 보임). 반드시 같이 꺼야 한다. */
	.fullpage > .swiper-wrapper > .swiper-slide .content_wrap > *,
	.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .tit,
	.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .txt,
	.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_txt .btn_more_w,
	.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_content .btn_wrap,
	.fullpage > .swiper-wrapper > .swiper-slide.main_vis .vis_page_wrap {
		opacity: 1;
		animation: none;
	} 
	.fullpage_pagination {
		display: none;
	}

	/* ── 섹션별 높이 재지정 ────────────────────────────────────
	   height:auto 가 되면 부모 높이에 기대던(height:100%·50%·flex:1) 요소가
	   0 으로 접힌다. 스크롤 레이아웃에 맞는 고정 높이를 준다. */

	/* 비주얼은 첫 화면을 꽉 채운 채 유지 — 여기서부터 스크롤이 시작된다 */
	.fullpage .main_content.main_vis {
		height: 100vh;
		min-height: 480px;
	}

	/* 나머지 섹션 상하 여백 — 풀페이지 때는 화면 비율(6vh)이었으나 이제 고정값 */
	.fullpage .main_content:not(.main_vis) .wFix.content_wrap {
		padding: 4.5rem 0;
	}

	/* 주요소식 — 3행 균등(1fr)에서 내용 높이(auto)로. 
	   🔴 `auto` 한 줄로 줄이면 안 된다. 첫 카드가 `grid-row: 1 / -1` 로 전체 행을 관통하는데
	      `-1` 은 **명시적 그리드의 끝**을 가리키므로, 행이 1개가 되면 카드도 1행짜리로 쪼그라들고
	      나머지 형제는 암시적 행으로 밀려난다(카드 높이 ≠ 형제 높이 합).
	      행 개수(3)는 유지한 채 크기만 auto 로 바꿔야 카드 높이 = 형제 3개 높이의 합이 된다. */
	.main_update .update_list {
		grid-template-rows: repeat(3, auto);
	} 

	/* 보도자료·홍보마당 카드 — 행 고정 해제 + 카드 이미지에 실제 높이 */
	.main_press .wFix.content_wrap {
		grid-template-rows: auto;
	}
	.card_list .swiper-slide .img_box {
		height: 200px;
		max-height: none;
	}

	/* INFO-TEX — flex:1 로 늘던 이미지에 기준 높이 */
	.main_news .content_box .img_box {
		flex: none;
		height: 46vh;
		min-height: 320px;
		max-height: 560px;
	}
	/* 최신뉴스 3건 — 균등 분할 대신 고정 높이 썸네일(아래 min-height:901px 블록 미적용 구간) */
	.main_news .list .thumb {
		align-self: center;
		width: clamp(150px, 14vw, 220px);
		height: 110px;
		max-height: none;
	}

  .update_list_wrap{
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1201px) and (min-height: 640px) {
      .fullpage .main_content.main_update .wFix.content_wrap,
      .fullpage .main_content.main_press  .wFix.content_wrap,
      .fullpage .main_content.main_news   .wFix.content_wrap {
              --header-h: 85.6px;
              padding: calc(var(--header-h) + clamp(1rem, 4vh, 3rem)) 0 5rem;
      }
}

/* ============================================================================
 * 노트북 풀페이지 (2026-10-19)
 *
 * 브레이크포인트 정리 — 폭은 4단계만 쓴다: 1440 / 1200 / 900 / 640
 *   (1660·1400 → 1440, 1100 → 1200, 768 → 900, 500·480 → 640 으로 합침)
 * 풀페이지 켜짐 = 가로 1201px↑ 그리고 세로 640px↑  (예전: 1101↑ · 901↑ → 노트북은 전부 꺼졌다)
 *   🔴 js/overrides/main.js 의 matchMedia('(max-width: 1200px), (max-height: 639px)') 와 짝.
 *
 * 세로 640~799px(1366×768 · 1440×900 · 1536×864 노트북, 브라우저 안 높이 650~780)에서
 * 주요소식이 100vh 를 95px 넘쳐 아래 바로가기 줄이 0 높이로 눌렸다(1366×650 실측).
 * 여백·제목 줄·목록 칸만 줄여 1280×640 까지 안에 들어가게 했다(바로가기 줄이 바닥에서 26px 위).
 * 2026-10-26 799 → 869px : 세로 800~869px 에서도 바로가기 줄이 23~52px 잘렸다
 *   (1656×807 · 1600×800 · 1920×820 · 1500×830 실측, 125% 배율 노트북 · 작은 모니터). 870px↑ 은 원래 여백으로도 들어감.
 * 홍보마당 카드 배치는 overrides/main-combo.css 의 같은 조건 블록.
 * ==========================================================================*/
@media screen and (min-width: 1201px) and (min-height: 640px) and (max-height: 869px) {
  .fullpage .main_content.main_update .wFix.content_wrap,
  .fullpage .main_content.main_news .wFix.content_wrap {
    padding-bottom: 1.6rem;
  }
  .main_update .content_wrap .top {
    padding: 0 0 0.8rem;
    margin-bottom: 0.8rem;
  }
  .update_list > li {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .update_list > li:nth-child(-n+2) {
    padding: 1.1rem 1.2rem;
  }
  .quick_menu li a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* ── 푸터 관련사이트 — 분류 3개 셀렉트 묶음 (2026-10-20 수정사항 #11) ──
   묶음(.f_family_group)이 예전 .f_family 자리(오른쪽 위 absolute)를 맡고, 안쪽 .f_family 는 흐름 배치로 되돌린다.
   ▼ 화살표(.f_family::after)는 각 .f_family 기준이라 그대로 동작. */
.f_family_group {
  position: absolute;
  right: 0;
  top: 1.5rem;
  display: flex;
  gap: 0.6rem;
}
.f_family_group .f_family {
  position: relative;
  top: auto;
  right: auto;
}
.f_family_group .f_family_select {
  /* 2026-10-20 190→210: 190 이면 글자칸 120px < '정부·기업지원기관' 122px 라 잘렸다.
     2026-11-03 210→180: 분류가 4개(#2)로 늘었고 가장 긴 분류명이 '연구·시험기관'(7자)으로 짧아졌다. */
  width: 180px;
  padding-right: 3rem;   /* 긴 분류명(정부·기업지원기관)이 ▼ 와 겹치지 않게 */
}
@media screen and (max-width: 1200px) {
  .f_family_group {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 1rem;
  }
  .f_family_group .f_family {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
  }
  .f_family_group .f_family_select { width: 100%; }
}
@media screen and (max-width: 640px) {
  .f_family_group { flex-direction: column; gap: 0.5rem; }
}