main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 clamp(20px, 1.563vw, 30px);
}
.bbs-view-image{
  width: fit-content;
}
/* header */

.header {
    display: flex;
    position: fixed;
    width: 100%;
    gap: clamp(10px, 1.042vw, 20px);
    padding: clamp(15px, 1.302vw, 25px) clamp(20px, 1.563vw, 30px);
    justify-content: space-between;
    align-items: stretch;
    z-index: 100;
    background-color: #fff;
}

.header__logo {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
    flex-shrink: 0;
}



.header__logo--text {
    position: relative;
    padding: 10px 12px;
    display: flex;
    justify-content: center;
    align-self: flex-end;
    border-radius: 50px;
    background: #009F40;
    width: 105px;
    flex-shrink: 0;
    height: 36px;
    z-index: 0;
}

.header__logo--text img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 9px;
    z-index: -1;
}

/* 기본 네비게이션 스타일 유지 */
.header__nav {
    flex: 1;
    width: 100%;
    max-width: 868px;
    min-height: 100%;
    display: flex;
    /* ✅ 내부 리스트 정렬을 위한 flex 설정 */
    align-items: stretch;
    /* ✅ 네비게이션 메뉴를 중앙 정렬 */
}

.header__nav>ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    /* ✅ 부모 높이를 따라가도록 설정 */
    height: 100%;
    /* ✅ 부모 높이에 맞춰 확장 */
}

.header__nav>ul li {
    transition: transform 0.2s ease, color 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.header__nav>ul>li:hover {
    font-weight: 700;
    color: var(--color-personal-blue);
    /* transform: scale(1.05); */
}

.submenu li {
    padding-bottom: 10px;
    border-bottom: 1px solid transparent;
}

.submenu li:hover {
    font-weight: 700;
    border-bottom: 1px solid #fff;
}

/* 🔹 서브메뉴 기본 상태 (숨김) */
.header__nav .submenu {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    top: calc(100%);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-radius: 0px 0px 30px 30px;
    background: #00489C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: clamp(20px, 1.563vw, 30px);
    width: 201px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}



/* 🔹 서브메뉴 내부 항목 스타일 */
.header__nav .submenu li {
    list-style: none;
    text-align: center;
}

/* 🔹 Hover 시 서브메뉴 표시 */
.header__nav .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    /* transform: translateX(-50%) translateY(0); */
}

/* 🔹 네비게이션 hover 유지 (JavaScript 없이도 가능) */
.header__nav .has-submenu:hover,
.header__nav .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
}

.header__links {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: clamp(10px, 1.042vw, 20px);

}

.header__link,
.tourism__link,
.header__link_mo {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tourism__link.docent {
    gap: clamp(10px, 1.042vw, 20px);
}

.header__links--external,
.header__links--external_mo {
    display: flex;
    flex-shrink: 0;
}

/* index */

.index__top {
    position: relative;
    width: 100%;
    aspect-ratio: 1861 / 693;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    transition: background-image 0.8s ease-in-out;
    padding: 15px;
    /* 페이드 효과 */
}

.index__top.bg1 {
    background: url('../img/index_top_bg1.png') center / cover no-repeat;
}

.index__top.bg2 {
    background: url('../img/index_top_bg2.png') center / cover no-repeat;
}

.index__top.bg3 {
    background: url('../img/index_top_bg3.png') center / cover no-repeat;
}

.index__top.bg4 {
    background: url('../img/index_top_bg4.png') center / cover no-repeat;
}

.index__top--link1 {
    position: absolute;
    left: 0;
    top: 60%;
    background: url('../img/index_top_docent.svg') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 33px 25px;
    aspect-ratio: 1;
}

.index__top--link1--bottom {
    display: flex;
    flex-grow: 0;
    gap: 10px;
    opacity: 0.7;
}

.index__top--link1--bottom img,
.index__top--link2--bottom img,
.index__top--link3--bottom img {
    width: 7px;
}

.index__top--link2 {
    position: absolute;
    right: 0;
    top: 0;
    background: url('../img/index_top_green.svg') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    aspect-ratio: 217 / 139;
    width: 217px;
}

.index__top--link2.blue {
    top: 140px;
    background: url('../img/index_top_blue.svg') center / cover no-repeat;
    aspect-ratio: 217 / 165;
    width: 217px;
}

.index__top--link2--top {
    display: flex;
    flex: 1;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.index__top--link2--top img {
    width: 50px;
}

.index__top--link2--bottom {
    background-color: var(--color-personal-yellow);
    border-radius: 60px;
    padding: 6px 8px;
    display: flex;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.index__top--link2--bottom.blue {
    background-color: var(--color-white);
}

.index__top--title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 25px;
}

.index__top__swiper {
    position: absolute !important;
    bottom: -100px;
    margin: 0 -30px;
    width: calc(100% + 60px);
}

.mo__swiper {
    width: calc(100% + 60px);
}

#index__top__swiper .swiper-slide, #index__top__swiper__mo .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#index__top__swiper .swiper-slide>img, #index__top__swiper__mo .swiper-slide>img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px solid var(--ffffff, #FFF);
}

.index__center {
    display: flex;
    padding: clamp(50px, 7.8vw, 150px) 0px;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.index__center.event {
    padding: 0;
}

.index__center--container {
    display: flex;
    width: 100%;
    max-width: 1680px;
    justify-content: space-between;
    gap: clamp(25px, 2.604vw, 50px);
}

.index__center--container.event {
    padding: clamp(50px, 7.8vw, 150px) 0px;
    position: relative;
}

.index__center--left {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.125vw, 60px);
    width: 100%;
    max-width: 960px;
}

.index__center__text {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.index__center__text--title {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.index__center__text--title.row {
    flex-direction: row;
}

.index__center__text--head {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.line {
    width: 70px;
    height: 1px;
    background-color: var(--color-personal-blue);
}

.zigzag {
    width: 100%;
    height: 36px;
}

.index__center__text--sub {
    align-self: flex-end;
}

.index__center__navigate {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(25px, 2.344vw, 45px);

}

.index__center__navigate--link {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
    justify-content: flex-start;
    align-items: center;
}

/* Swiper 컨테이너 스타일 */
.index__center__swiper {
    width: 100%;
    max-width: 555px;
    /* 원하는 크기로 조정 */
    border-radius: 30px;
    overflow: hidden;
    /* 슬라이드가 넘치는 것을 방지 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.index__center__swiper .swiper-wrapper {
    height: auto;
}

/* 슬라이드 이미지 */
.index__center__swiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

/* 컨트롤 영역을 따로 분리 */
.index__center__swiper--control {
    position: relative;
    /* Swiper 영역과 분리 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
}

/* 페이지네이션 스타일 */
.index__center__swiper--control--pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.swiper-pagination-current {
    color: #4CAF50;
    /* 현재 페이지 강조 */
}

/* 네비게이션 버튼 */
.index__center__swiper--control--arrow {
    display: flex;
    gap: 10px;
}

.index__center__swiper--control--arrow .swiper-button-prev,
.index__center__swiper--control--arrow .swiper-button-next {
    position: static;
    display: flex;
    width: clamp(30px, 4.125vw, 60px);
    ;
    height: clamp(30px, 4.125vw, 60px);
    ;
    margin-top: 0;
    border-radius: 50%;
    background-image: url('../img/ic_swiper_arrow_left.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #008EE5;
    background-size: 20%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

.swiper-button-prev.mr15 {
    margin-right: 10px;
}

.index__center__swiper--control--arrow .swiper-button-next {
    background-image: url('../img/ic_swiper_arrow_right.svg');
}

.index__center__swiper--control--arrow .swiper-button-prev.swiper-button-disabled,
.index__center__swiper--control--arrow .swiper-button-next.swiper-button-disabled {
    background-color: #E5EEF0;
    /* 비활성화된 버튼 색상 변경 */
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/ic_swiper_arrow_left_off.svg');
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

.index__center__swiper--control--arrow .swiper-button-next.swiper-button-disabled {
    background-image: url('../img/ic_swiper_arrow_right_off.svg');
}

.swiper-button-prev,
.swiper-button-next {
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;
    color: #555;
}

.index__event {
    display: flex;
    flex-direction: column;
    padding: clamp(50px, 7.8vw, 150px) 30px;
    gap: clamp(30px, 3.125vw, 60px);
    background: linear-gradient(to bottom, #F4F8F9 50%, #00489C 50%);
    position: relative;
    justify-content: center;
    align-items: center;
    z-index: 0;
    margin: 0 -30px;
    width: calc(100% + 60px);
}

.index__event--container {
    display: flex;
    width: 100%;
    max-width: 1680px;
    justify-content: center;
    flex-direction: column;
    gap: clamp(25px, 2.604vw, 50px);
}

.index__event>img {
    position: absolute;
    left: 0;
    top: 10%;
    width: 20%;
    max-width: 390px;
    z-index: 1;
}

.index__event__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(20px, 1.563vw, 30px);
    z-index: 2;
}

.index__event__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 2;
    border-radius: 30px;
    overflow: hidden;
}

.index__event__content--item {
    display: flex;
    flex-direction: column;
}

.index__event__content--item:nth-child(1) {
    background: #FFF2D9;
}

.index__event__content--item:nth-child(2) {
    background: #008EE5;
    box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.15) inset;
}

.index__event__content--item:nth-child(3) {
    background: #FFD555;
    box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.15) inset;
}

.index__event__content--item:nth-child(4) {
    background: #009F40;
    box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.15) inset;
}

.index__event__content--text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(20px, 1.563vw, 30px);
    padding: clamp(30px, 3.125vw, 60px) 20px;
}

.index__event__content--item img {
    align-self: flex-end;
    max-width: 100%;
}

.detail__wrap {
    border-bottom: 2px solid #008EE5;
    white-space: nowrap;
}

.index__event__content__detail {
    display: flex;
    gap: 15px;
    padding-bottom: 10px;
    margin-top: auto;
    border-bottom: 2px solid #008EE5;
}

.index__event__content__detail.default {
  width: fit-content;
}
.index__event__content__detail.mt20 {
  margin-top: 20px;
}


.index__event__content--item:nth-of-type(1) .index__event__content__detail {
    border-bottom: 2px solid #008EE5;
}

.index__event__content--item:nth-of-type(2) .index__event__content__detail {
    border-bottom: 2px solid var(--color-white);
}

.index__event__content--item:nth-of-type(3) .index__event__content__detail {
    border-bottom: 2px solid var(--color-personal-green);
}

.index__event__content--item:nth-of-type(4) .index__event__content__detail {
    border-bottom: 2px solid var(--color-white);
}

.index__event__content__detail img {
    width: 7px;
    margin: auto;
}

.index__notice {
    display: flex;
    flex-direction: column;
    padding: clamp(50px, 7.8vw, 150px) 30px;
    gap: clamp(30px, 3.125vw, 60px);
    background: #EFF7F8;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 0 -30px;
    width: calc(100% + 60px);
}

.index__notice .index__event__content__detail {
    border-bottom: 2px solid #008EE5;
}

.index__notice__top .index__event__content__detail {
    width: 105.17px;
}

.index__notice__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.083vw, 40px);
}

.index__notice__data--thumb {
    display: flex;
    width: 100%;
    max-width: 248px;
}

.index__notice__list img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #fff;
}

.index__notice__data {
    padding: clamp(20px, 1.563vw, 30px);
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 2.083vw, 40px);
    border-radius: 20px;
    border-bottom: 2px solid #009F40;
    background: #FFF;
}

.index__notice__data:hover {
    background-color: #009F40;
}

.index__notice__data__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.index__notice__data__content--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDD;
}

.index__notice__data__content--datebox {
    display: flex;

}

.index__notice__data:hover .index__notice__data__content--top {
    border-bottom: 1px solid #fff;
}

.index__notice__data:hover .index__notice__data__content--date {
    color: white;
}

.index__notice__data:hover .index__notice__data__content--month {
    color: white;
}

.index__notice__data:hover .index__notice__data__content--bottom {
    color: white;
}

.index__notice__data:hover .index__notice__data__content--bottom p {
    color: white;
}

.index__notice__data__content--desc {
    margin-top: 10px;
}



/* footer */

.footer {
    background-color: var(--color-footer);
    padding: clamp(25px, 2.604vw, 50px) clamp(20px, 1.563vw, 30px) clamp(40px, 4.167vw, 80px) clamp(20px, 1.563vw, 30px);

    width: 100%;
    display: flex;
    justify-content: center;
}

.footer--container {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.083vw, 40px);
    width: 100%;
    max-width: 1680px;
}

.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}

.footer__top>img {
    max-width: 190px;
}

.footer__terms {
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.563vw, 30px);

}

.footer__families {
    width: 238px;
    font-family: 'Paperlogy', sans-serif !important;
    /* 원하는 폰트 */
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid var(--dddddd, #DDD);
    padding: 12px 20px;
    appearance: none;

    background-image: url('../img/ic_arrow_down.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    /* 오른쪽에 위치 */
    background-size: 16px;
    /* 아이콘 크기 조정 */
}

.footer__families.bgwhite {
  background-image: url('../img/ic_arrow_down_default.svg');
  border-radius: 5px;
}

.footer__families:focus {
    outline: none;
    border: 1px solid var(--dddddd, #DDD);
}

.footter__bottom {
    display: flex;
}

.footer__info {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.563vw, 30px);
}

.footer__info--top {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.042vw, 20px);
    flex-wrap: wrap;
}

.footer__info__nav--container {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
}

.footer__info--nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer__info--nav>img {
    width: 20px;
}

.footer__info--bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    white-space: nowrap;
    gap: 10px;
}

.footer__info--divide {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
}

.footer__info div {
    display: flex;
    gap: 10px;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
}



.footer__docent {
    display: flex;
    align-items: flex-end;
    gap: clamp(30px, 3.125vw, 60px);
}

.footer__docent img {
    width: 156px;
}

.footer__docent--info {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.footer__docent--info img {
    width: 77px;
}

.footer__docent--text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    gap: 8px;
}

.footer__docent--name {
    display: flex;
    gap: 15px;
}

.footer__docent--name>img {
    width: 7px;
}

/* pages */

.board__top {
    position: relative;
    width: calc(100% + 60px);
    height: 100%;
    min-height: 200px;
    aspect-ratio: 192 / 35;
    margin-left: -30px;
    margin-right: -30px;
    z-index: 0;
}

.board__top>img:nth-child(1) {
    height:100%;
    position: absolute;
    z-index: 2;
}

.board__top>img:nth-child(2) {
    height:100%;
    position: absolute;
    z-index: 1;
}

.board__top__content {
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 0 clamp(20px, 1.563vw, 30px);
    font-weight: 400;
    z-index: 3;
    margin: 0 auto;
}

.line.top {
    width: 30px;
    height: 1px;
    background-color: var(--color-white);
}

.line.event {
    width: 100%;
    height: 1px;
    background-color: #DDD;
}

.board__top__content--top {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}
.board__top__content--sub {
  text-align: center;
}

.page__bg {
    margin-left: -30px;
    margin-right: -30px;
    width: calc(100% + 60px);
    background: url('../img/bg_event_list.png') no-repeat;
    background-size: 100% 75%;
    /* 너비 100%, 높이 50% */
    background-position: bottom center;
    /* 하단 정렬 */
    padding: 0 30px;
}

.page__container {
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 6.25vw, 120px);
    padding: clamp(80px, 6.25vw, 120px) 0 clamp(100px, 7.8125vw, 150px) 0;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

.page__container.tourism {
    max-width: 1440px;
    padding-left: 0;
    padding-right: 0;
}

.page__container.external {
    max-width: 1440px;
    padding: 0;
}

.page__title {
    display: flex;
    gap: 90px;
    align-items: center;
    justify-content: space-between;
}

.page__title--tourism {
    display: flex;
    gap: clamp(35px, 3.646vw, 70px);
    align-items: center;
}

.page__title--tourism.event {
    align-items: flex-end;
}

.page__title--tourism.docent {
    gap: clamp(50px, 5.208vw, 100px);
}


.page__title--center {
    display: flex;
    flex-direction: column;
    gap: clamp(25px, 2.604vw, 50px);
    align-items: center;
    text-align: center;
}

.page__title--center>img {
    max-width: 350px;
}

.page__title--center--text {
    width: 100%;
    white-space: nowrap;

}

.page__title--side {
    /* width: 100%;
    max-width: 325px; */
}

.page__content.event {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(60px, 5.208vw, 100px) clamp(50px, 4.167vw, 80px);
    padding-bottom: clamp(60px, 5.208vw, 100px);
    grid-auto-rows: 1fr;
align-items: stretch;
}

.page__content__item {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__item--label {
    display: inline-flex;
    width: max-content;
    padding: 10px 20px 10px 20px;
    border-radius: 50px 30px 0px 50px;
    background: #F57B00;
    white-space: nowrap;
}

.page__content__item--label.v2 {
    background: #009F40;
}

.page__content__item--label.v3 {
    background: #00489C;
}

.page__content__item--label.v4 {
    background: #008EE5;
}

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

.page__content__item--inner {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.563vw, 30px);
    padding: clamp(20px, 2.083vw, 40px);
    margin-left: clamp(20px, 2.083vw, 40px);
    background-color: #fff;
    border: 1px dashed #009F40;
    border-radius: 30px;
    flex:1;
}

.page__content__item--center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex:1;
}

.page__content__item--img {
    transform: translateX(calc(clamp(50px, 4.167vw, 80px) * -1));
    display: flex;
    width: 100%;
    min-width: 200px;
}
.page__content__item__content {
  flex-basis: 80%;
}
.page__content__item__content--top {
    display: block;
    padding-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.page__content__item__content--center {
    display: block;
    padding-top: 20px;
    padding-bottom: 10px;
}

.page__content.event .page__content__item:nth-child(even) {
    transform: translateY(clamp(60px, 5.208vw, 100px));
}

.page__content {
    width: 100%;
    max-width: 14clamp(20px, 2.083vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page__content__nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin: 0 auto;
}


.page__content__nav li {
    display: flex;
    flex-basis: 25%;
    justify-content: center;
    align-items: center;
    padding: clamp(10px, 1.0465vw, 20px) clamp(20px, 2.083vw, 40px);
    background-color: #008EE5;
    height: 100%;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.page__content__nav.introduce li {

    background-color: #009F40;

}

/* ✅ 첫 번째 `li`에 왼쪽 상단 둥글게 */
.page__content__nav li:first-child {
    border-top-left-radius: 20px;
}

/* ✅ 마지막 `li`에 오른쪽 상단 둥글게 */
.page__content__nav li:last-child {
    border-top-right-radius: 20px;
}

.page__content__nav li.on {
    padding: clamp(20px, 1.563vw, 30px) clamp(20px, 2.083vw, 40px);
    border-radius: 20px 20px 0 0;
    margin-top: -10px;
    background-color: #fff;
    border: 1px solid #008EE5;
    border-bottom: 0;
    color: #000;
}

.page__content__nav.introduce li.on {
    border: 1px solid #009F40;
    border-bottom: 0;
    color: #009F40;
}

.page__content__nav li.on>span {
    color: #008EE5;
    /* font-size: clamp(18px, 1.8vw, 24px); */
}

.page__content__detail--container {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 4.167vw, 80px);
    border: solid #008EE5;
    border-width: 0 1px 1px 1px;
    border-radius: 0px 0px 20px 20px;
    padding: clamp(20px, 4.167vw, 80px) clamp(15px, 3.125vw, 60px);
}

.page__content__detail--container.apply {
    border: none;
    padding: 0;
}

.page__content__detail {
    display: flex;
    flex-direction: column;
}

.page__content__detail--title {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.083vw, 40px);
    margin-bottom: 30px;
}

.page__content__detail--sub {
    white-space: nowrap;
}

.page__content__detail--intro {
    display: flex;
    border-radius: 30px;
    overflow: hidden;
}

.page__content__detail--intro--left {
    width: 100%;
    display: flex;
    gap: clamp(25px, 2.604vw, 50px);
    padding: clamp(25px, 2.604vw, 50px);
    align-items: center;
    background: #F6FAFB;
}

.page__content__detail--intro--img {
    display: flex;
    flex-shrink: 0;
}

.page__title--tourism .page__content__detail--intro--content {
  width: 100%;
  max-width: fit-content;
}

.page__content__detail--intro--content--top {
    margin-bottom: 20px;
}

.page__content__detail--intro--content--top.introduce {
    margin-bottom: clamp(20px, 2.083vw, 40px);
    text-align: center;
}

.page__content__detail--intro--content--center {
    margin-bottom: 5px;
}

.page__content__detail--intro--content--center.introduce {
    text-align: center;
    margin-bottom: 0;
}

.page__content__detail--inner {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 0 clamp(20px, 1.563vw, 30px);
}

.page__content__detail--inner--content {
    display: flex;
    gap: clamp(20px, 1.563vw, 30px);
    align-items: center;
}

.page__content__detail--inner--content>span:first-child {
  width: 100%;
    max-width: 100px;
}

.page__content__detail--inner--content.top {
    align-items: flex-start;
}

.page__content__detail--inner--content--sub {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--inner--content--sub.column {
    flex-direction: column;
    gap: 10px;
}

.page__content__detail--inner--divide {
    background-color: #ddd;
    width: 100%;
    height: 1px;
}

.page__content__detail--divide {
    width: 100%;
    height: 1px;
    border: 1px dashed #9F9F9F;
}

.page__content__detail--default {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.563vw, 30px);
}

.page__content__detail--default.apply {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 4.167vw, 80px);
}

.page__content__detail--default.row {
    flex-direction: row;
    justify-content: space-between;
}

.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex.items-center.justify-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex.justify-center {
    display: flex;
    justify-content: center;
}

.justify-center {
  justify-content: center;
}

.event__table {
    width: 100%;
    border-collapse: collapse;
    /* ✅ 테이블 셀의 개별 테두리 유지 */
    border-spacing: 0;
    /* ✅ 셀 간 간격 없애기 */
    border: none;
    /* ✅ 테이블 전체 외곽 `border` 제거 */
    overflow: scroll;
    background: #fff;
}

.event__table th {
    border-top: 1px solid #ddd;
    border-bottom: 2px solid #008EE5;
    border-right: 1px solid #ddd;
    /* ✅ 각 `th` 사이에 `border` 추가 */
    background-color: #F5FAFB;
    padding: 20px 10px;
    width: 33.3%;
}

.event__table.fix th {
    width: auto;
}

.event__table th:last-child {
    border-right: none;
}

.event__table td:first-child {
    border-left: none;
}

.event__table td {
    border: 1px solid #ddd;
    text-align: center;
}

.event__table.fix td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 30px 0;
}

.event__table.fix td:first-child {
    border-left: none;
    background-color: #EAF6F9;

}

.event__table td:last-child {
    border-right: none;
}

.event__table .rowspan {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: clamp(20px, 2.083vw, 40px);
    gap: clamp(20px, 1.563vw, 30px);
}

.event__table .rowspan .inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inner--wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--methods {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--methods.bg {
    width: 100%;
    max-width: 1068px;
    border-radius: 20px;
    background: #F5FAFB;
    padding: clamp(20px, 1.563vw, 30px);
}

.page__content__detail--method {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
    align-items: center;
}

.page__content__detail--method.baseline {
    align-items: flex-start;
}

.circle__number {
    width: 100%;
    max-width: clamp(30px, 2.083vw, 40px);
    aspect-ratio: 1/1;
    color: #fff;
    border-radius: clamp(20px, 2.083vw, 40px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle__number.orange {
    background-color: #F57B00;
}

.circle__number.blue {
    background-color: #00489C;
}


.page__content__detail--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 70px clamp(20px, 2.083vw, 40px);
}

.page__content__detail--grid.apply {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.083vw, 40px);
}

.page__content__detail--grid.apply .page__content__detail--method {
    display: flex;
    flex-direction: column;

}

.page__content__detail--grid .page__content__detail--item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.btn--round {
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 10px clamp(20px, 2.083vw, 40px);
    border-radius: 500px;
}

.btn--round.w-full {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 10px clamp(20px, 2.083vw, 40px);
    border-radius: 500px;
}

.btn--round.lg {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: clamp(10px, 1.042vw, 20px) clamp(20px, 2.083vw, 40px);
    border-radius: 500px;
}

.btn--round.sm {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 5px 10px;
    border-radius: 500px;
}

.btn--round.semi-sm {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: 10px 20px;
    border-radius: 500px;
}

.btn--round.semi-sm.justify-start {
    justify-content: flex-start;
}

.btn--round.orange {
    background: #F57B00;
}

.btn--round.dark-gray {
  background: #3E3A39;
}

.btn--round.blue {
    background: #008EE5;
}

.btn--round.blue.border {
    border: 2px solid #008EE5;
    background: #fff;

}

.btn--round.dark-blue {
    background: #00489C;
}

.btn--round.green {
    background: #009F40;
}

.page__content__detail--answer {
    display: flex;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #DDD;
    background: #FFF;
    margin-bottom: 10px;
}

.page__content__detail--courses {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.083vw, 40px);
}

.page__content__detail--course {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--course--content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: clamp(20px, 1.563vw, 30px);
    border-radius: 20px;
    border: 1px solid #DDD;
}

.page__content__detail--course--content--title {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--applies {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 2.083vw, 40px);
}

.page__content__detail--apply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    width: 100%;
    border-radius: 20px;
    background: #F5FAFB;
    padding: clamp(20px, 1.563vw, 30px);
}

.page__content__detail--apply.taxi {
    gap: clamp(20px, 2.083vw, 40px);
}

.page__content__detail--apply--icon {
    display: flex;
    width: 70px;
    height: 70px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 2px solid #EBF8FB;
    background: #FFF;
    padding: 10px;
}

.page__content__detail--apply--content {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    margin-top: auto;
}

.page__content__detail--apply--content.w-full {
    width: 100%;
}

.page__content__detail--apply--content--top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page__content__detail--apply--content--top.border {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    width: 100%;
}

.page__content__detail--apply--content--btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.page__content__detail--stamp--content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__content__detail--stamp--content--title {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    margin-bottom: 10px;
}

.page__content__detail--stamp {
    display: flex;
    gap: clamp(50px, 4.167vw, 80px);
}

.page__content__detail--stamp--content--sub {
    display: flex;
    justify-content: space-between;
}

.page__content__detail--stamps {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.563vw, 30px);
}

.tourism__map {
    width: 100%;
    aspect-ratio: 1440 / 321;
    display: flex;
    justify-content: flex-end;
    padding: clamp(20px, 1.563vw, 30px);
    background: url('../img/map_tourism.png') center / cover no-repeat;
    /* 페이드 효과 */
    border-radius: 20px;
    margin-bottom: clamp(35px, 3.646vw, 70px);
}

.tourism__map--box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 401px;
    padding: clamp(20px, 1.563vw, 30px);
    gap: clamp(20px, 1.563vw, 30px);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
}

.tourism__map--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
}

.tourism__sites {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(50px, 5.208vw, 100px);
    margin-bottom: clamp(35px, 3.646vw, 70px);
}

.tourism__site {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    gap: clamp(10px, 1.042vw, 20px);
}

.tourism__site--title {
    display: flex;
    justify-content: space-between;
}
.tourism__site--title.justify-center {
  justify-content: center;
}

.tourism__full {
    background: var(--00489-c, #00489C);
    margin-left: -30px;
    margin-right: -30px;
    width: calc(100% + 60px);

}

.tourism__full.docent {
    background: #F5FAFB;
    padding: clamp(80px, 6.25vw, 120px) 30px clamp(100px, 7.8125vw, 150px) 30px;
}

.tourism__full.external {
    background: url('../img/bg_tourism_external.png') center / cover no-repeat;
    padding: 0 clamp(20px, 1.563vw, 30px);
}

.tourism__full.bg {
    background: var(--00489-c, #00489C);
}

.tourism__external {
    display: flex;
}

.tourism__external__item {
    display: flex;
    justify-content: center;
    flex-basis: 33%;
    gap: clamp(30px, 3.125vw, 60px);
    padding: clamp(20px, 2.083vw, 40px) clamp(10px, 1.042vw, 20px);
}

.tourism__external__item:hover {
    background: #F5FAFB;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.tourism__external__item--title {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
    align-items: center;
}

.tourism__download__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px);
    padding: clamp(40px, 4.167vw, 80px) 0;

}

.tourism__download__box {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
}

.page__title--introduce {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.083vw, 40px);
    align-items: center;
    justify-content: center;
}

.green__bar__title {
    display: flex;
    gap: clamp(20px, 1.563vw, 30px);
    align-items: stretch;
}

.green__bar__title.has-divide {
  padding-bottom: clamp(25px, 2.604vw, 50px);
  border-bottom: 1px solid #ddd;
}

.green__bar {
    width: 4px;
    background: #009F40;
}

.green__bar__title span {
    display: block;
}

.introduce__container {
    display: flex;
    flex-direction: column;
    gap: clamp(25px, 2.604vw, 50px);
}

.introduce__content__container {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 5.208vw, 100px);
}

.introduce__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(30px, 3.125vw, 60px);
}

.introduce__content.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: clamp(30px, 3.125vw, 60px);
}

.introduce__content.combine {
    background: url(../img/ic_introduce_bg.png) no-repeat;
    background-size: 35% 90%;
    background-position: bottom center;

}

.introduce__combine {
    display: flex;
    padding: 0;
    gap: clamp(50px, 4.167vw, 80px);
    margin-bottom: clamp(20px, 2.083vw, 40px);
}

.introduce__combine__item {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
    padding: clamp(20px, 2.083vw, 40px);
    border-radius: 500px;
    background: var(--ffffff, #FFF);
}

.introduce__combine__item.blue {
    border: 10px solid #83CCFB;
}

.introduce__combine__item.green {
    border: 10px solid #93E5AF;
}

.introduce__combine__item--content {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: auto;
}

.intrinsic {
    width: auto;
    height: auto;
    max-width: none;
    /* ✅ 부모 요소에 의해 크기가 제한되지 않도록 설정 */
    max-height: none;
    /* ✅ 필요 시 높이 제한 해제 */
    display: block;
    flex: none;
    /* ✅ 불필요한 여백 방지 */
}

.introduce__content__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(20px, 2.083vw, 40px);
}

.introduce__content__grid__item {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.introduce__content__grid__item--img {
    position: relative;
    display: inline-block;
    /* ✅ 부모 요소의 크기 유지 */
}

.introduce__content__grid__item--img--text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 20px;
    border-radius: 5px;
    color: white;
    z-index: 2;
    white-space: nowrap;
}

.introduce__content__grid__item__content {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.563vw, 30px);
    padding: clamp(20px, 1.563vw, 30px);
    border-radius: 20px;
    flex: 1;

}

.introduce__content__grid__item__content.green {
    background: #F5FAFB;
}

.introduce__content__grid__item__content.blue {
    background: #EAF3FF;
}

.introduce__content__grid__item__content--inner {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
}

.introduce__content__grid__item__content--inner--desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #009F40;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1000;
    /* 다른 요소 위에 배치 */
}

.scroll-to-top:hover {
    background: #007a30;
}

.mobile-nav {
    display: none;
}

.docent__items {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 3.125vw, 60px);
    justify-content: center;
}

.terms__content {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.125vw, 60px);
}

.modal__content {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.563vw, 30px);
  padding: 50px clamp(20px, 2.083vw, 40px);
  justify-content: center;
  text-align: center;
}

.modal__input__container {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.042vw, 20px);
}

.modal__input--box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.form__wrapper {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  max-width: 8clamp(20px, 2.083vw, 40px);
  gap:30px;
}

.form--title {
  display: flex;
  gap: clamp(20px, 1.563vw, 30px);
  padding-bottom: 30px;
  border-bottom: 1px solid black;
}

.form__datas {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.042vw, 20px);
  height: 100%;
}

.form__datas > .form__data--text, .form__datas > .form__data--radio {
    height: 49px;
}

.form__data--radio {
  display: flex;
  gap: 10px clamp(30px, 3.125vw, 60px);
  flex-wrap: wrap;
}

.form__data--radiobox {
  display: flex;
  gap: clamp(10px, 1.042vw, 20px);
  align-items: center;
}

.form__data--text {
  display: flex;
  gap: clamp(20px, 1.563vw, 30px);
  align-items: center;
  width: 100%;
}

.form__data--double {
  display: flex;
  justify-content: space-between;
  gap: clamp(30px, 3.125vw, 60px);
}

.form--name {
  width: 100%;
  max-width: 140px;
  flex-shrink: 0;
}
.form--value {
  padding: 15px 10px;
  border-bottom: 1px solid black;
  width: 100%;
}

.form__terms {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.042vw, 20px);
  padding: clamp(20px, 1.563vw, 30px);
  border-radius: 20px;
  background: #F5FAFB;
}
.form__terms.gap30{
  gap:30px;
  text-align: center;
  justify-content: center;
}

.form__btn {
  display: flex;
  justify-content: center;
  padding-top: 80px;
  border-top: 1px dashed #9f9f9f;
}

#apply_form {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 4.167vw, 80px);
  justify-content: center;
}

.result__msg {
  padding-top: clamp(20px, 1.563vw, 30px);
  padding-bottom: clamp(20px, 1.563vw, 30px);
  text-align: center;
}

.result__box {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.042vw, 20px);
  padding: clamp(20px, 1.563vw, 30px);
  border-radius: 20px;
  background: #fff;
}

.result__box.start {
  text-align: start;
  align-self: start;
}

.mo {
  display: none;
}

.flcol {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.authorModal {
  border-radius: 20px;
  width: 100%;
  max-width: unset;
  overflow: hidden;
  position: relative;
}

.modal__btn {
  position: absolute;
  bottom: -60px; /* 모달 바깥으로 위치 */
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50px;
  background: #008EE5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.author {
  background: transparent;
  max-width: 1920px;
  box-shadow: unset;
}
#fullImg {
  display: block; /* Removes default inline spacing */
  width: 100%;
}





@media screen and (max-width: 1400px) {
    .header__nav {
        display: none;
    }

    .btn-menu {
        position: relative;
        display: flex;
        width: 40px;
        height: 40px;
        z-index: 1000;
    }

    .btn-menu .toggle {
        position: absolute;
        width: 40px;
        height: 40px;
        background: url(../img/icon_open.svg) no-repeat center;
        background-size: 50% 50%;
        z-index: 1000;
    }

    .btn-menu.on .toggle {
        background: url(../img/icon_close.svg) no-repeat center;
        background-size: 40% 40%;
        z-index: 1000;
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
        z-index: 999;
    }

    .mobile-overlay.on {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 480px;
        height: 100vh;
        background: #fff;
        transition: right 0.3s ease-in-out;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        z-index: 999;
        display: flex;
        flex-direction: column;
    }

    .mobile-nav--top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(15px, 1.302vw, 25px) clamp(20px, 1.563vw, 30px);
        background-color: #008EE5;
    }

    .mobile-nav.on {
        right: 0;
    }

    .mobile-nav>ul {
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1.042vw, 20px);
        padding: clamp(15px, 1.302vw, 25px) 40px clamp(15px, 1.302vw, 25px) clamp(20px, 2.083vw, 40px);
        height: 100%;
    }

    .mobile-nav>ul>ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-nav>ul>li {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }

    .mobile-nav>ul>ul>li {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .mobile-nav .btn-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 30px;
        cursor: pointer;
    }

    /* 모바일 메뉴 내 소셜 링크 */
    .mobile-nav__links {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EFF7F8;
        flex-direction: column;
        gap: 10px;
        padding: 20px;
    }

    .divide_mo {
        width: 15px;
        height: 2px;
        background: #D9D9D9;
    }
}

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

    .index__top--link1 {
        top: 50%;
    }
}

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

    .index__event__content {
        grid-template-columns: repeat(2, 1fr);
    }

    .index__center--container {
        flex-direction: column;
    }

    .index__center--left {
        max-width: unset;
    }

    .index__center__swiper {
        max-width: unset;
    }
}

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

    .index__top--link2,
    .index__top--link2.blue {
        display: none;
    }

.board__top>img:nth-child(1) {
  object-fit: cover;
}
.board__top>img:nth-child(2) {
  object-fit: cover;
}
}

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

    .page__content.event {
        grid-template-columns: repeat(1, 1fr);
    }

    .page__content.event .page__content__item:nth-child(even) {
        transform: translateY(0);
    }

    .page__content__detail--grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

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

    .introduce__combine {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .introduce__combine__item {
      align-items: center;
    }
    .introduce__content.combine {
      background: none;
    }
    .page__title--tourism.docent {
      flex-direction: column;
    }
    .page__title--tourism .page__content__detail--intro--content {
      max-width: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .docent-title {
      width: 100%;
      max-width: fit-content;
    }
}



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

    .footer__docent {
        flex-direction: column;
        gap: 10px;
    }

    .footer__info {
        justify-content: flex-end;
    }
}

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

    .header__link {
        display: none;
    }

    .index__notice__list {
        grid-template-columns: repeat(1, 1fr);
    }
}

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

    .index__top--link1,
    .index__top--link2,
    .index__top--link3 {
        display: none;
    }

    .index__top {
        margin-left: -30px;
        margin-right: -30px;
        width: calc(100% + 60px);
        aspect-ratio: 430 / 536;
    }

    .index__top.bg1 {
        background: url('../img/index_top_bg1_mo.png') center / cover no-repeat;
    }

    .index__top.bg2 {
        background: url('../img/index_top_bg2_mo.png') center / cover no-repeat;
    }

    .index__top.bg3 {
        background: url('../img/index_top_bg3_mo.png') center / cover no-repeat;
    }

    .index__top.bg4 {
        background: url('../img/index_top_bg4_mo.png') center / cover no-repeat;
    }

    .footer__terms {
        flex-direction: column;
        align-items: flex-end;
    }

    .index__top__swiper {
      display: none;
    }

    .index__top {
        margin-bottom: 0;
    }

    .mo {
      display: flex;
      margin-left: -30px;
      margin-right: -30px;
      width: calc(100% + 60px);
    }
    .mo.slide {
      width: 100%;
      margin-top: -10%;
      margin-bottom: 30px;
    }

    .mo__navigate {
      display: flex;
      width: 100%;
    }
    .mo__navigate__item {
      display: flex;
      align-items: center;
      flex-direction: column;
      flex: 1;
      gap: 15px;
      text-align: center;
      padding: 15px 0;
    }
    .mo__navigate__item.v1 {
      background: #008EE5;
    }
    .mo__navigate__item.v2 {
      background: #009F40;
    }
    .mo__navigate__item.v3 {
      background: #00489C;
    }
}


@media screen and (max-width: 730px) {
  .page__content__detail--grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page__content__detail--default.row {
    flex-direction: column;
  }
  .page__content__detail--method {
    align-items: flex-start;
  }
}

@media screen and (max-width: 700px) {
  .page__content__detail--course {
    flex-direction: column;
    align-items: center;
  }
  .page__content__detail--course > .flex {
    width: 100%;
    max-width: 300px;
  }
  .tourism__sites {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 800px) {
  .page__content__nav {
      flex-wrap: wrap;
  }


  .page__content__nav li {
      flex-basis: 50%;
  }

  .page__content__nav li.on {
      padding: clamp(10px, 1.0465vw, 20px) clamp(20px, 2.083vw, 40px);
      border-radius: 0;
      margin-top: 0;
      background-color: #fff;
      border: 1px solid #008EE5;
      border-bottom: 0;
      color: #000;
  }

  /* ✅ 첫 번째 `li`에 왼쪽 상단 둥글게 */
  .page__content__nav li:first-child {
      border-top-left-radius: 20px;
  }
  .page__content__nav li:nth-child(2) {
      border-top-right-radius: 20px;
  }
  /* ✅ 마지막 `li`에 오른쪽 상단 둥글게 */
  .page__content__nav li:last-child {
      border-top-right-radius: 0;
  }

  /* ✅ 첫 번째 `li`에 왼쪽 상단 둥글게 */
  .page__content__nav li.on:first-child {
      border-right: 0;
      border-bottom: 0;
  }
  .page__content__nav li.on:nth-child(2) {
      border-left: 0;
      border-bottom: 0;
  }
  .page__content__nav li.on:nth-child(3) {
      border-bottom: 0;
      border-top: 0;
  }
  /* ✅ 마지막 `li`에 오른쪽 상단 둥글게 */
  .page__content__nav li.on:last-child {
    border-bottom: 0;
    border-top: 0;
  }

  .introduce__content__grid {

    grid-template-columns: repeat(2, 1fr);
  }

  .page__content__detail--intro {
    flex-direction: column;
  }

  .page__content__detail--grid.apply {
    grid-template-columns: repeat(2, 1fr);
  }

}

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

    .footer__docent {
        display: none;
    }

    .index__center__text--title.row {
        flex-direction: column;
    }

    .page__title--side {
        display: none;
    }

    .page__title {
        justify-content: center;
    }

    .page__title--center--text {
        white-space: wrap;
    }

    .page__content__detail--stamp {
      flex-direction: column;
      gap: clamp(20px, 1.563vw, 30px);
    }
}

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

  .form__data--double {
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px);
  }
}

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

    main {
        margin-top: 60px;
    }

    .header__logo--text {
      display: none;
    }

    .header {
        height: 60px;
    }

    #deco {
        display: none;
    }

    .mobile-nav--top {
        height: 60px;
    }

    .header__logo img {
        height: 30px;
    }

    .header__links--external {
        display: none;
    }

    .index__center__text {
        flex-direction: column;
        gap: clamp(20px, 1.563vw, 30px);
    }

    .index__center__text--sub {
        align-self: normal;
    }

    .tourism__external {
        display: flex;
        flex-wrap: wrap;
    }

    .tourism__external__item {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
        gap: clamp(30px, 3.125vw, 60px);
        padding: clamp(20px, 2.083vw, 40px) clamp(10px, 1.042vw, 20px);
    }

    .tourism__download__container {
      flex-direction: column;
      gap: 20px;
    }

    .tourism__download__box {
      flex-wrap: wrap;
      justify-content: center;

    }

}

@media screen and (max-width: 550px) {
    .index__center__navigate {
        grid-template-columns: repeat(3, 1fr);
    }
    .page__content__detail--intro--left {
      flex-direction: column;
    }
    .page__content__detail--intro--content {
      text-align: center;
    }
    .page__content__detail--inner--content {
      flex-direction: column;
      align-items: flex-start;
    }
    .page__content__detail--stamp--content--sub{
      flex-direction: column;
      gap:10px;
    }
    .page__title--tourism {
      flex-direction: column;
    }
    .page__title--tourism .page__content__detail--intro--content {
      align-items: center;
    }

}

@media screen and (max-width: 520px) {
    .index__event__content {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer__top {
        flex-direction: column;
        gap: clamp(10px, 1.042vw, 20px);
        align-items: flex-start;
    }

    .footer__terms {
        align-items: flex-start;
    }

    .page__content__item--center {
        flex-direction: column;
    }

    .page__content__item--img {
        transform: translateX(0);
        margin-bottom: 20px;
    }

    .page__content__detail--grid {
      grid-template-columns: repeat(1, 1fr);
    }

}

@media screen and (max-width: 500px) {
  .page__content__nav li {
      flex-basis: 100%;
  }

  /* ✅ 첫 번째 `li`에 왼쪽 상단 둥글게 */
  .page__content__nav li:first-child {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
  }
  .page__content__nav li:nth-child(2) {
      border-top-right-radius: 0;
  }
  /* ✅ 마지막 `li`에 오른쪽 상단 둥글게 */
  .page__content__nav li:last-child {
      border-top-right-radius: 0;
  }

  /* ✅ 첫 번째 `li`에 왼쪽 상단 둥글게 */
  .page__content__nav li.on:first-child {
      border-right: 1px solid #008EE5;
      border-bottom: 0;
  }
  .page__content__nav.introduce li.on:first-child {
      border-right: 1px solid #009F40;
      border-bottom: 0;
  }
  .page__content__nav li.on:nth-child(2) {
      border-left: 1px solid #008EE5;
      border-right: 1px solid #008EE5;
      border-bottom: 0;
  }
  .page__content__nav.introduce li.on:nth-child(2) {
    border-left: 1px solid #009F40;
    border-right: 1px solid #009F40;
      border-bottom: 0;
  }
  .page__content__nav li.on:nth-child(3) {
      border-bottom: 0;
      border-top: 0;
  }
  /* ✅ 마지막 `li`에 오른쪽 상단 둥글게 */
  .page__content__nav li.on:last-child {
    border-bottom: 0;
    border-top: 0;
  }

  .introduce__content__grid {

    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 450px) {
    .footer__info--divide {
        flex-wrap: wrap;
    }

    .index__top {
        /* margin-bottom: 0; */
    }

    .index__top__swiper {
        /* display: none; */
    }

    .page__content__item--top {
        flex-direction: column;
        gap: 15px;
    }
    .page__content__detail--title {
      flex-direction: column;
    }
    .page__content__detail--grid.apply {
        grid-template-columns: repeat(1, 1fr);
    }
    .tourism__sites {
      grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 400px) {
    .footer__info--divide {
        flex-wrap: wrap;
    }
    .tourism__map--top {
      flex-direction: column-reverse;
    }
    .tourism__map--box {
      text-align: center;
    }
}

.flex-col {
    flex-direction: column;
}

.text-start {
    text-align: start;
}

.justify-start {
    justify-content: flex-start;
}

.items-start {
    align-items: flex-start;
}

.flex {
    display: flex;
}

.gap10 {
    gap: 10px;
}

.underline {
    text-decoration: underline;
}

.shrink-0 {
    flex-shrink: 0;
}