#wrap {
  background-attachment: fixed;
  min-height: fit-content;
}

/* header */
header {
  height: 52px;
}
header .header_wrap {
  padding: 0 20px;
}
header .header_wrap ul li:not(:last-child) {
  display: none !important;
}
header .header_wrap .util_links {
  display: none;
}
header .header_wrap > a {
  font-size: 16px;
  margin-left: 0;
}
header .header_wrap ul li button {
  width: 52px;
  height: 52px;
}
header .header_wrap ul li:last-child {
  width: fit-content;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* main lines */
#wrap
  .main_lines
  .main_line:not(:first-child):not(:last-child):not(:nth-child(2)) {
  display: none;
}
#wrap .main_lines .main_line:first-child {
  left: 19px;
}
#wrap .main_lines .main_line:last-child {
  right: 19px;
}
#wrap .main_lines .main_line:nth-child(2) {
  left: 231px;
}
#wrap .main_lines .main_line:first-child {
  animation-delay: 0.4s;
}
#wrap .main_lines .main_line:nth-child(2) {
  animation-delay: 0.55s;
}
#wrap .main_lines .main_line:last-child {
  animation-delay: 0.7s;
}
#wrap .main_lines.main .main_line:last-child {
  transform-origin: top center;
}
.line_orange {
  width: calc(100% - 40px);
  z-index: 102;
}
/* 메인: 주황선이 양쪽 세로선(19px)까지 덮는다 (모바일 메인 시안 322px) */
.main_lines.main ~ header .line_orange,
main .main_wrap.main .line_orange {
  width: calc(100% - 38px);
}

/* 모바일 전체메뉴 (more 버튼 클릭 시 오픈) */
.mo_gnb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(255, 255, 255, 0.77);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  overflow-y: auto;
}
.mo_gnb.active {
  display: block;
}
.mo_gnb .mo_gnb_header {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #95c8e4;
}
.mo_gnb .mo_gnb_header .logo {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.28px;
}
.mo_gnb .btn_close {
  flex: none;
  width: 52px;
  height: 52px;
  background: url("../../images/govpo/ico/ico_close.svg") center center no-repeat;
  cursor: pointer;
}
.mo_gnb > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 0 0;
}
.mo_gnb > ul > li {
  width: 100%;
}
.mo_gnb > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border-radius: 6px;
  color: #303030;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #333;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.18px;
}

/* main */
main .main_wrap.main {
  padding: 0 20px;
  align-items: start;
  flex-direction: column;
  justify-content: start;
  min-height: fit-content;
  margin-bottom: 52px;
  /* 버튼 아래 ~ 사진 격자 */
  gap: 54px;
}
main .main_wrap .title_wrap {
  width: 100%;
  padding: 24px 0 0;
  align-items: center;
}
main .main_wrap.main .title_wrap {
  flex: 0 0 auto;
  align-items: start;
  padding-top: 44px;
}
main .main_wrap .title_wrap .title h1 {
  font-size: 32px;
}
main .main_wrap .title_wrap .title span {
  line-height: 29px;
}
main .main_wrap .title_wrap .btn_move_timeline {
  width: 212px;
  height: 55px;
  padding: 0 24px;
  margin: 34px 0 0;
  font-size: 18px;
  letter-spacing: -0.18px;
  justify-content: space-between;
}
/* Figma 는 48x15 틀 안에 20x5 화살표가 오른쪽 4px·위쪽으로 치우쳐 있다. 같은 자리에 오도록 여백을 준다 */
main .main_wrap .title_wrap .btn_move_timeline::after {
  width: 20px;
  height: 5px;
  margin: 0 4px 6px 0;
  background: url("../../images/govpo/ico/ico_main_btn_arrow_mo.svg") center center
    no-repeat;
  background-size: 20px 5px;
}
main .main_wrap .main_grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 6px 7px;
  z-index: 102;
  position: relative;
}
main .main_wrap .main_grid .grid_item {
  background-size: cover !important;
}
/* 모바일 시안: PC 칸 중 8개만 3열로 [1][2][3] / [6][7][8] / [11 가로2칸][12] */
main .main_wrap .main_grid .grid_item:nth-child(4),
main .main_wrap .main_grid .grid_item:nth-child(5),
main .main_wrap .main_grid .grid_item:nth-child(9),
main .main_wrap .main_grid .grid_item:nth-child(10),
main .main_wrap .main_grid .grid_item:nth-child(n + 13) {
  display: none;
}
main .main_wrap .main_grid .grid_item:nth-child(-n + 3) {
  animation-delay: 1.1s;
}
main .main_wrap .main_grid .grid_item:nth-child(n + 6):nth-child(-n + 8) {
  animation-delay: 1.22s;
}
main .main_wrap .main_grid .grid_item:nth-child(11),
main .main_wrap .main_grid .grid_item:nth-child(12) {
  animation-delay: 1.34s;
}
/* 올림픽 칸은 모바일 시안이 사진을 더 넓게 보여 줘서 모바일 전용 이미지를 쓴다 */
main .main_wrap .main_grid .grid_item:nth-child(11) {
  background-image: url("../../images/govpo/img/img_main_grid_mo_07.png");
}
main .main_wrap .title_wrap .since,
main .main_wrap.main .title_wrap .since {
  bottom: -40px;
  left: 31px;
  font-size: 16px;
}
main .main_wrap.main .line_orange {
  bottom: -4px;
}

/* timeline */
#timeline,
.btn_year_jump {
  display: none;
}
.timeline_wrap .timeline_title {
  padding: 0 20px;
  height: 131px;
}
.timeline_wrap .timeline_title h1 {
  font-size: 26px;
}
.timeline_wrap .timeline_title span {
  font-size: 16px;
}

/* timeline (mobile) */
.timeline_wrap .timeline_mo {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.timeline_wrap .timeline_mo .sub_title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fe4e02;
  padding: 0 16px;
}
.timeline_wrap .timeline_mo .sub_title h2 {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
.timeline_wrap .timeline_mo .sub_title .prev,
.timeline_wrap .timeline_mo .sub_title .next {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: relative;
}
.timeline_wrap .timeline_mo .sub_title .prev::after {
  content: "";
  width: 6px;
  height: 10px;
  background: url("../../images/govpo/ico/ico_arrow_white.svg") center center
    no-repeat;
  background-size: 6px 10px;
}
.timeline_wrap .timeline_mo .sub_title .next::after {
  content: "";
  width: 6px;
  height: 10px;
  background: url("../../images/govpo/ico/ico_arrow_white.svg") center center
    no-repeat;
  background-size: 6px 10px;
  transform: rotate(180deg);
}
.timeline_wrap .timeline_mo .sub_title .prev.disabled,
.timeline_wrap .timeline_mo .sub_title .next.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.timeline_wrap .timeline_mo .detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px 20px;
  border-bottom: 1px solid #ebe7e4;
  margin-bottom: 10px;
}
@keyframes timelineFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.timeline_wrap .timeline_mo .detail.is-anim {
  animation: timelineFadeIn 0.45s ease both;
}
.timeline_wrap .timeline_mo .detail img {
  width: 100%;
}
.timeline_wrap .timeline_mo .detail > a {
  align-self: center;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  color: #494949;
  text-align: center;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.14px;
  text-decoration-line: underline;
  text-underline-offset: 2px;
  margin-top: 8px;
}
.timeline_wrap .timeline_mo .detail > a::after {
  content: "";
  position: relative;
  width: 16px;
  height: 16px;
  background: url("../../images/govpo/ico/ico_link.svg") center center no-repeat;
}
.timeline_wrap .timeline_mo .detail span {
  color: #fe4e02;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  margin-top: 28px;
}
.timeline_wrap .timeline_mo .detail h3 {
  margin-top: 8px;
  color: #25343f;
  font-size: 24px;
  font-weight: 600;
  line-height: 150%;
}
.timeline_wrap .timeline_mo .detail p {
  width: 100%;
  margin-top: 4px;
  color: #494949;
  line-height: 150%;
  letter-spacing: -0.14px;
}
.timeline_wrap .timeline_mo .list {
  padding-top: 8px;
  border-top: 1px solid #ebe7e4;
  display: flex;
  flex-direction: column;
  background: rgba(235, 231, 228, 0.3);
}
.timeline_wrap .timeline_mo .list .era {
  width: 100%;
  height: 36px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.timeline_wrap .timeline_mo .list .era span {
  color: #737373;
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}
.timeline_wrap .timeline_mo .list .era .btn_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline_wrap .timeline_mo .list .era .btn_wrap .prev,
.timeline_wrap .timeline_mo .list .era .btn_wrap .next {
  width: 24px;
  height: 24px;
  background: #fe4e02;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.timeline_wrap .timeline_mo .list .era .btn_wrap .prev:disabled,
.timeline_wrap .timeline_mo .list .era .btn_wrap .next:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.timeline_wrap .timeline_mo .list .era .btn_wrap .prev::after {
  content: "";
  width: 6px;
  height: 10px;
  background: url("../../images/govpo/ico/ico_arrow_white.svg") center center
    no-repeat;
}
.timeline_wrap .timeline_mo .list .era .btn_wrap .next::after {
  content: "";
  width: 6px;
  height: 10px;
  background: url("../../images/govpo/ico/ico_arrow_white.svg") center center
    no-repeat;
  transform: rotate(180deg);
}
.timeline_wrap .timeline_mo .list .era_list {
  display: none;
  padding: 20px 20px 45px;
}
.timeline_wrap .timeline_mo .list .era_list.active {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.timeline_wrap .timeline_mo .list .era_list .era_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 31px;
  position: relative;
}
.timeline_wrap .timeline_mo .list .era_list.active .era_item {
  animation: timelineFadeIn 0.45s ease both;
}
.timeline_wrap .timeline_mo .list .era_list .era_item .year {
  position: relative;
  color: #737373;
  font-size: 13px;
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
}
.timeline_wrap .timeline_mo .list .era_list .era_item .year::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border-radius: 30px;
  border: 3px solid #737373;
  position: absolute;
  left: -31px;
  top: 4px;
}
.timeline_wrap .timeline_mo .list .era_list .era_item.active .year::before {
  border-color: #fe4e02;
  background-color: #fe4e02;
}
.timeline_wrap .timeline_mo .list .era_list .era_item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  width: 1px;
  height: calc(100% + 21px);
  background-image: linear-gradient(to bottom, #dadada 4px, transparent 4px);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}
.timeline_wrap .timeline_mo .list .era_list .era_item .year_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline_wrap .timeline_mo .list .era_list .era_item .year_list .year_item {
  width: 100%;
  height: 40px;
  background: #fff;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid rgba(51, 51, 51, 0.5);
}
.timeline_wrap
  .timeline_mo
  .list
  .era_list
  .era_item
  .year_list
  .year_item
  button {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.timeline_wrap
  .timeline_mo
  .list
  .era_list
  .era_item
  .year_list
  .year_item
  button
  span {
  position: relative;
  padding-left: 13px;
  color: #333;
  font-size: 12px;
  line-height: 18px;
}
.timeline_wrap
  .timeline_mo
  .list
  .era_list
  .era_item
  .year_list
  .year_item
  button
  span::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #838382;
  border-radius: 50%;
  left: 0px;
  top: 6px;
}

/* 분야별 보기 */
.field_wrap .year_table {
  display: none;
}
.field_wrap .title_wrap {
  padding: 0 !important;
}
.field_wrap .title_wrap h1 {
  width: calc(100% - 40px);
  height: 36px;
  font-size: 20px;
}
.field_wrap .title_wrap .line {
  display: none;
}
.field_wrap .field_mo {
  display: block;
  padding-bottom: 40px;
}
.field_wrap .field_mo .fm_select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  height: 51px;
  margin: 11px 20px 12px; /* 위는 제목 밑줄 1px 포함 12px */
  padding: 0 20px 0 32px;
  border: 1px solid #95c8e4;
  background: #ebf2f6;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.field_wrap .field_mo .fm_select::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../../images/govpo/ico/ico_select_arrow.svg") center center
    no-repeat;
  transition: transform 0.2s ease;
}
.field_wrap .field_mo .fm_select[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.field_wrap .field_mo .fm_select_label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #447d9b;
}
.field_wrap .field_mo .fm_nav {
  display: flex;
  align-items: stretch;
  height: 52px; /* 위아래 선 1px 씩 + 칸 50px */
  border-top: 1px solid #95c8e4;
  border-bottom: 1px solid #95c8e4;
}
/* 화살표 칸(41px): 왼쪽 묶음(5년 전 · 이전 연도)을 기준으로 만들고, 오른쪽 묶음은 180도 돌려 쓴다. 칸 경계선도 함께 뒤집혀 연도 쪽을 향한다 */
.field_wrap .field_mo .fm_arrow {
  flex: none;
  width: 41px;
  border-right: 1px solid #95c8e4;
  background: #fff url("../../images/govpo/ico/ico_arrow_orange_mo.svg") center
    center no-repeat;
  cursor: pointer;
}
.field_wrap .field_mo .fm_prev5,
.field_wrap .field_mo .fm_next5 {
  background-image: url("../../images/govpo/ico/ico_arrow_double_orange_mo.svg");
}
.field_wrap .field_mo .fm_next,
.field_wrap .field_mo .fm_next5 {
  transform: rotate(180deg);
}
.field_wrap .field_mo .fm_arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
.field_wrap .field_mo .fm_year {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  padding: 19px 27px 13px;
}
/* 시대 띠: 화면 폭 전체를 채운다 */
.field_wrap .field_mo .fm_banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  border-bottom: 1px solid #95c8e4;
  background: #ebf2f6;
}
.field_wrap .field_mo .fm_banner span {
  color: #447d9b;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.field_wrap .field_mo .fm_cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  padding: 20px;
}
.field_wrap .field_mo .fm_empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: #737373;
  font-size: 14px;
}
.field_wrap .field_mo .fm_card {
  display: flex;
  flex-direction: column;
}
/* 모바일 썸네일 칸은 154:181 */
.field_wrap .field_mo .thumb {
  aspect-ratio: 154 / 181;
}
.field_wrap .field_mo .fm_cat {
  margin-top: 10px;
  color: #fe4e02;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%; /* reset.css 의 span line-height: 174% 로 카드가 커지지 않게 */
  text-align: center;
  padding: 0 4px;
}
.field_wrap .field_mo .fm_ctit {
  margin-top: 4px;
  color: #333;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  padding: 0 4px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.field_wrap .field_mo .fm_sheet_backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.field_wrap .field_mo .fm_sheet_backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.field_wrap .field_mo .fm_sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 501;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.3s ease;
}
.field_wrap .field_mo .fm_sheet.is-open {
  transform: translateY(0);
  visibility: visible;
}
.field_wrap .field_mo .fm_sheet_title {
  width: calc(100% - 74px);
  height: 60px;
  border-bottom: 1px solid #c0c0c0;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 37px;
}
.field_wrap .field_mo .fm_sheet_close {
  position: absolute;
  top: 4px;
  right: 37px;
  width: 52px;
  height: 52px;
  background: url("../../images/govpo/ico/ico_close.svg") center center no-repeat;
  cursor: pointer;
}
.field_wrap .field_mo .fm_sheet_list {
  padding: 4px 24px 70px;
}
.field_wrap .field_mo .fm_sheet_list label {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 20px 12px 12px;
  cursor: pointer;
  color: #447d9b;
  font-size: 16px;
  font-weight: 600;
}
.field_wrap .field_mo .fm_sheet_list input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 23px;
  height: 23px;
  background: url("../../images/govpo/ico/ico_checkbox_unchecked.svg") center center
    no-repeat;
  background-size: contain;
  cursor: pointer;
}
.field_wrap .field_mo .fm_sheet_list input[type="checkbox"]:checked {
  background-image: url("../../images/govpo/ico/ico_checkbox_checked.svg");
}
.field_wrap
  .field_mo
  .fm_sheet_list
  input[type="checkbox"]:not(:checked)
  + span {
  color: #a6a6a6;
}

/* sub wrap (서브 페이지) */
.sub_wrap .line {
  display: none;
}
.sub_wrap .sub_title_wrap {
  width: 100%;
  margin: 20px auto 0;
  aspect-ratio: auto;
  height: 222px;
  /* 모바일도 PC 와 같은 방식: 배경색은 CSS, 오른쪽 사진(331x222, 폰 화면용으로 2배 내보냄)은 오른쪽 끝에 높이 맞춰 붙인다.
     배경색만 PC 와 다르다 */
  background-color: #447d9b;
}
.sub_wrap .sub_title_wrap.type_01 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_01.png");
}
.sub_wrap .sub_title_wrap.type_02 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_02.png");
}
.sub_wrap .sub_title_wrap.type_03 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_03.png");
}
.sub_wrap .sub_title_wrap.type_04 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_04.png");
}
.sub_wrap .sub_title_wrap.type_05 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_05.png");
}
.sub_wrap .sub_title_wrap.type_06 {
  background-image: url("../../images/govpo/img/img_sub_bg_mo_06.png");
}
.sub_wrap .sub_title_wrap .sub_box {
  width: calc(100% - 40px);
  top: 40px;
  left: 20px;
  transform: none;
}
.sub_wrap .sub_title_wrap .sub_box .category {
  font-size: 18px;
  padding: 6px 14px;
}
.sub_wrap .sub_title_wrap .sub_box h1 {
  margin-top: 12px;
  font-size: 24px;
}
.sub_wrap .sub_title_wrap .sub_box .gov {
  margin-top: 12px;
  padding: 0;
  font-size: 16px;
}
.sub_wrap .sub_processes {
  display: flex;
  flex-direction: column;
  margin: -40px 0 20px;
  padding: 0 20px;
  gap: 8px;
}
.sub_wrap .sub_processes .sub_process {
  height: 105px;
  gap: 12px;
}
.sub_wrap .sub_processes .sub_process .title {
  font-size: 16px;
}
.sub_wrap .sub_processes .sub_process .desc {
  font-size: 14px;
}
.sub_wrap .sub_dept_goal .dept,
.sub_wrap .sub_dept_goal .goal {
  padding: 20px;
  flex-direction: column;
  gap: 12px;
  align-items: start;
}
.sub_wrap .sub_dept_goal .dept .category,
.sub_wrap .sub_dept_goal .goal .category {
  gap: 12px;
  font-size: 16px;
}
.sub_wrap .sub_dept_goal .dept .category::before {
  width: 32px;
  height: 32px;
}
.sub_wrap .sub_dept_goal .goal .category::before {
  width: 32px;
  height: 32px;
}
.sub_wrap .sub_dept_goal .dept .content,
.sub_wrap .sub_dept_goal .goal .content {
  font-size: 16px;
}
.sub_wrap .sub_info {
  padding: 20px;
  flex-direction: column;
  gap: 12px;
}
.sub_wrap .sub_info .img_box {
  width: 100%;
  min-width: 100%;
  height: 240px;
}
.sub_wrap .sub_info .img_box img {
  max-height: 100%;
}
.sub_wrap .sub_info .desc_box {
  padding: 12px;
}
.sub_wrap .sub_info .desc_box p {
  font-size: 14px;
}
.sub_wrap .more_items {
  padding: 0 0 40px 20px;
}
.sub_wrap .more_items .swiper_arrow {
  display: none;
}
.sub_wrap .more_items .more_swiper {
  touch-action: pan-y;
  padding-right: 20px;
}
.sub_wrap .more_items .more_card .img_box {
  width: 220px;
  height: 220px;
}
.sub_wrap .more_items .img_swiper {
  margin: 0;
}
.sub_wrap .more_items .more_card .card_tools {
  right: 10px;
  bottom: 10px;
}
.sub_wrap .more_items .swiper-slide {
  width: 220px;
  padding-top: 20px;
}
.sub_wrap .more_items .more_card .caption {
  margin-top: 16px;
}
.sub_wrap .more_items .more_controls {
  display: none;
}

/* record (주요기록물) */
.record_wrap .record_title,
.guide_wrap .guide_title {
  padding: 0 20px;
  height: 131px;
  justify-content: center;
}
.record_wrap .record_title h1,
.guide_wrap .guide_title h1 {
  font-size: 26px;
}
.record_wrap .record_title span,
.guide_wrap .guide_title span {
  font-size: 16px;
  font-weight: 600;
}
.record_wrap .record_box {
  padding: 19px 20px 0;
  border-top: 0;
}
.record_wrap .record_box .search_wrap {
  flex-direction: column;
  gap: 8px;
}
.record_wrap .record_box .search_wrap .search_type {
  min-width: 100%;
}
.record_wrap .record_box .search_wrap .search_type .btn_option {
  display: none;
}
.record_wrap .record_box .search_wrap input {
  padding-left: 20px;
}
.search_category {
  width: 100%;
}
.search_category.active ul {
  width: 100%;
  height: 211px;
  overflow-y: auto;
}
.record_wrap .record_box .search_wrap .btn_download {
  display: none;
}

.record_wrap .record_box .board_wrap {
  margin-top: 19px;
  margin-bottom: 28px;
  background: none;
}
.record_wrap .record_box .board_wrap .inner {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
.record_wrap .record_box .board_wrap .inner table {
  display: block;
  width: 100%;
  table-layout: auto;
}
.record_wrap .record_box .board_wrap .inner table colgroup,
.record_wrap .record_box .board_wrap .inner table thead {
  display: none;
}
.record_wrap .record_box .board_wrap .inner table tbody {
  display: block;
  width: 100%;
}
.record_wrap .record_box .board_wrap .inner table tbody tr {
  display: flex;
  flex-wrap: wrap; /* 칸마다 폭 100% 라 한 줄씩 쌓이고, 건번호·관리번호만 같은 줄에 놓인다 */
  padding: 16px 0;
  border-bottom: 1px solid #e8e5e0;
}
.record_wrap .record_box .board_wrap .inner table tbody tr:last-child td {
  border-bottom: none;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td.text_center {
  text-align: left;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:first-child {
  display: none;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td::before {
  content: attr(data-label);
  color: inherit;
  font-weight: 400;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(4) {
  order: 1;
  margin-bottom: 8px;
}
.record_wrap
  .record_box
  .board_wrap
  .inner
  table
  tbody
  tr
  td:nth-child(4)::before {
  content: none;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(4) a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #333;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(2) {
  order: 2;
  margin-bottom: 4px;
}
/* 정책명 */
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(3) {
  order: 3;
  margin-bottom: 4px;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(5) {
  order: 4;
  margin-bottom: 4px;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(6) {
  order: 5;
  margin-bottom: 4px;
  color: #4a4a51;
}
/* 기록물유형 · 소장기관 */
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(7) {
  order: 6;
  margin-bottom: 4px;
  color: #4a4a51;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(8) {
  order: 7;
  margin-bottom: 4px;
  color: #4a4a51;
}
/* 건번호(모바일 전용 칸) · 관리번호: 한 줄에 나란히, 사이에 3px 점 (양옆 12px) */
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(10) {
  order: 8;
  width: auto;
  color: #4a4a51;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(9) {
  order: 9;
  width: auto;
  padding-left: 27px;
  position: relative;
  color: #4a4a51;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td:nth-child(9)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: #4a4a51;
}
/* 원문보기 버튼 */
.record_wrap .record_box .board_wrap .inner table tbody tr td:last-child {
  order: 10;
  margin-top: 8px;
  padding: 0;
}
.record_wrap
  .record_box
  .board_wrap
  .inner
  table
  tbody
  tr
  td:last-child::before {
  content: none;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td .btn_view {
  width: 100%;
  height: 36px;
  margin: 0;
  justify-content: center;
  border-radius: 10px;
  font-weight: 500;
}
.record_wrap .record_box .board_wrap .inner table tbody tr td .btn_view {
  border: 1px solid #ffded0;
  background: #fff;
  color: #fe4e02;
}
.record_wrap .record_box .board_wrap .table_footer {
  background: none;
  padding: 28px 0 0;
  display: flex;
  justify-content: center;
}
.record_wrap .record_box .pagination_wrap a,
.record_wrap .record_box .pagination_wrap strong,
.record_wrap .record_box .pagination_wrap .prev,
.record_wrap .record_box .pagination_wrap .next {
  width: 24px;
  height: 22px;
  font-size: 12px;
}
.record_wrap .record_box .pagination_wrap {
  gap: 1px;
  padding: 0;
}
.record_wrap .record_box .pagination_wrap .prev,
.record_wrap .record_box .pagination_wrap .next {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
}
/* gap 1px 과 합쳐 번호와 12px */
.record_wrap .record_box .pagination_wrap .prev {
  margin-right: 11px;
}
.record_wrap .record_box .pagination_wrap .next {
  margin-left: 11px;
}

/* record detail (주요기록물 상세) */
.record_wrap .record_detail {
  padding: 20px;
  border-top: 0;
}
.record_wrap .record_detail .detail_box {
  min-height: 0;
  padding: 20px;
  background: #fff;
  border: 0;
  border-radius: 0;
}
.record_wrap .record_detail .detail_mo {
  display: flex;
  flex-direction: column;
}
.record_wrap .record_detail .detail_title {
  margin-bottom: 20px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
}
.record_wrap .record_detail .detail_info li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 33px; /* 밑줄 1px 포함 */
  padding: 8px 0 7px;
  border-bottom: 1px solid #90b0c3;
  font-size: 14px;
}
.record_wrap .record_detail .detail_info .label {
  flex-shrink: 0;
  width: 68px;
  color: #447d9b;
  font-weight: 400;
  line-height: 120%;
}
.record_wrap .record_detail .detail_info .value {
  color: #333;
  font-weight: 500;
  line-height: 120%;
  word-break: break-all;
}
.record_wrap .record_detail .btn_view {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #ffded0;
  border-radius: 10px;
  background: #fff;
  color: #fe4e02;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.record_wrap .record_detail .btn_view::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("../../images/govpo/ico/ico_view.svg") no-repeat center center;
  background-size: 24px 24px;
}
.record_wrap .record_detail .btn_view:hover {
  background: rgba(254, 78, 2, 0.08);
  border-color: #fe4e02;
}
.record_wrap .record_detail .detail_desc {
  min-height: 0;
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
}
.record_wrap .record_detail .detail_btns {
  margin-top: 16px;
}
.record_wrap .record_detail .btn_list {
  width: 100%;
}

/* guide (일러두기) - 모바일 디자인 없음: 좁은 화면에 맞게 여백만 줄임 */
.guide_wrap .guide_box {
  padding: 32px 20px 52px;
}
.guide_wrap .guide_section + .guide_section,
.guide_wrap .guide_contact {
  margin-top: 40px;
}
.guide_wrap .guide_menu,
.guide_wrap .guide_contact {
  padding: 20px;
}
.guide_wrap .guide_menu li + li {
  margin-top: 20px;
  padding-top: 19px;
}

/* layer popup */
.layer_wrap {
  position: relative;
  width: 1000px;
  max-width: calc(100dvw - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.layer_container .dim {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.layer_container .layer_wrap .layer_header {
  flex: none;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 20px;
}
.layer_container .layer_wrap .layer_header h2 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_header .btn_close {
  width: 24px;
  height: 23px;
  background: url("../../images/govpo/ico/ico_close_layer.svg") center center
    no-repeat;
  background-size: 24px 23px;
  cursor: pointer;
}
.layer_container .layer_wrap .layer_body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 20px;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
}
#descLayer .layer_body {
  gap: 0;
}
.layer_container .layer_wrap .layer_body .item_box {
  display: flex;
  flex-direction: column;
}
.layer_container .layer_wrap .layer_body .item_box.title {
  gap: 6px;
  padding: 16px 0 27px;
  border-top: 1px solid #e5edf2;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .item_box.title .label {
  color: #447d9b;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .item_box.title .value {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .item_box.meta {
  gap: 6px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e5edf2;
}
.layer_container .layer_wrap .layer_body .item_box.meta .item {
  display: flex;
  gap: 6px;
}
.layer_container .layer_wrap .layer_body .item_box.meta .item .label {
  width: 68px;
  min-width: 68px;
  color: #447d9b;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .item_box.meta .item .value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .content_box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 11px;
}
.layer_container .layer_wrap .layer_body .content_box .label {
  color: #447d9b;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
}
.layer_container .layer_wrap .layer_body .content_box .content_inner {
  padding: 16px;
  background-color: #f9fafa;
}
.layer_container .layer_wrap .layer_body .content_box .content_inner p {
  color: #333;
  font-size: 14px;
  line-height: 150%;
}

/* footer: 모바일은 저작권 문구만 */
/* 내용이 짧은 페이지에서도 푸터가 화면 맨 아래에 붙도록 본문 최소 높이를 맞춘다 (헤더 52px + 푸터 26px) */
main .main_wrap {
  min-height: calc(100vh - 78px);
}
footer .footer_wrap {
  height: 25px; /* 위 테두리 1px 포함 26px */
  align-items: center;
  padding: 0 20px;
}
footer .footer_logo,
footer .footer_info {
  display: none;
}
footer .footer_copy {
  color: #a6a6a6;
  font-size: 10px;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

.mo {
  display: block;
}
.pc {
  display: none;
}

/* viewer (원문보기) */
.viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.viewer-button {
  right: 19px !important;
}
/* footer 높이를 0으로 둬야 viewer.js 가 이미지를 화면 전체 기준으로 세로 가운데 정렬한다 */
.viewer-footer {
  height: 0;
  overflow: visible;
}
.viewer-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
}
.viewer-toolbar > ul {
  margin: 0 auto;
  padding: 0;
}
.viewer-toolbar > ul > li {
  width: 29px;
  height: 29px;
  border-radius: 10px !important;
}
.viewer-toolbar > ul > li + li {
  margin-left: 4px !important;
}
.viewer-toolbar .viewer-zoom-in:before {
  background-image: url("../../images/govpo/ico/ico_viewer_zoom_in_mo.svg");
}
.viewer-toolbar .viewer-zoom-out:before {
  background-image: url("../../images/govpo/ico/ico_viewer_zoom_out_mo.svg");
}
.viewer-toolbar .viewer-reset:before {
  background-image: url("../../images/govpo/ico/ico_viewer_reset_mo.svg");
}
.viewer-toolbar .viewer-prev:before {
  background-image: url("../../images/govpo/ico/ico_viewer_prev_mo.svg");
}
.viewer-toolbar .viewer-next:before {
  background-image: url("../../images/govpo/ico/ico_viewer_next_mo.svg");
}
.viewer-toolbar .viewer-rotate-left:before {
  background-image: url("../../images/govpo/ico/ico_viewer_rotate_left_mo.svg");
}
.viewer-toolbar .viewer-rotate-right:before {
  background-image: url("../../images/govpo/ico/ico_viewer_rotate_right_mo.svg");
}
.viewer-toolbar .viewer-flip-horizontal:before {
  background-image: url("../../images/govpo/ico/ico_viewer_flip_h_mo.svg");
}
.viewer-toolbar .viewer-flip-vertical:before {
  background-image: url("../../images/govpo/ico/ico_viewer_flip_v_mo.svg");
}
.viewer-navbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 0 !important;
}
.viewer-list {
  height: 36px;
  padding: 0;
}
.viewer-list > li {
  width: 49px;
  height: 36px;
}
