/* -----------------------------------------------------------------------
   공통 변수
----------------------------------------------------------------------- */
:root {
    --sec01-bg      : #deefff;
    /*--sec01-height  : 700px;   !* 지도 기준 높이 *!*/
    --right-gap     : 25px;
}

/* -----------------------------------------------------------------------
   sec01 : 지도(좌) + 우측 컨텐츠(우) 2단 레이아웃
   모바일(~767px) : 세로 1단으로 전환
----------------------------------------------------------------------- */
.sec01 {
    background-color: color-mix(in srgb, var(--sec01-bg) 65%, transparent);
}
.sec01-wrap {
    display        : flex;
    flex-wrap      : nowrap;
    width          : 100%;
    align-items    : flex-end;
}

/* 좌측 - 지도 영역 */
.sec01 .sec01_left {
    flex           : 0 0 65%;
    display        : flex;
    flex-direction : column;
    /*min-height     : var(--sec01-height);*/
    justify-content: space-between;
    gap            : 9px;

    position: relative; /*임시이미지 삭제 시 같이 삭제*/
}
.sec01 .sec01_left .box01-bar {
    padding        : 20px 20px 0 0;
    text-align     : center;
}
.sec01 .sec01_left .box01-bar .info-box {
    display: flex;
    align-items: center;
    gap: 40px;
    background-color: #2d6afa;
    border-radius: 12px;
    padding: 15px 50px;
    color: #fff;
}

.sec01 .sec01_left .box01-bar .info-box .info-box-tit {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sec01 .sec01_left .box01-bar .info-box .info-box-tit strong {
    font-size: 23px;
    white-space: nowrap;
}
.sec01 .sec01_left .box01-bar .info-box .info-box-list {
    text-align: left;
}
.sec01 .sec01_left .box01-bar .info-box .info-box-list > li {
    position: relative;
    font-size: 18px;
    line-height: 1.8;
    padding-left: 13px;
}
.sec01 .sec01_left .box01-bar .info-box .info-box-list > li:before {
    content: '';
    position: absolute;
    top: 14px;
    left: 0;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
}

.sec01 .sec01_left .box01-tit-txt {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.sec01 .sec01_left .box01-map {
    flex           : 1;          /* 남은 높이를 지도가 채움 */
    min-height     : 450px;
    padding        : 10px 20px 10px 0;
    padding-bottom : 20px;
    height         : 450px;
}
.sec01 .sec01_left .box01-map iframe {
    width          : 100%;
    /*height         : 450px;*/
    height         : 497px;
    border-radius  : 15px;
    display        : block;
    margin-top    : 10px;
}

/* 임시이미지 영역 -> 지도 개발 후 삭제 예정 */
.sec01 .sec01_left .temp-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 98.5%;
    height: 96.5%;
    background-color: #FFFFFF;
}
.sec01 .sec01_left .temp-img img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: scale-down;
}
@media (max-width: 1024px) {
    .sec01 .sec01_left .temp-img {
        width: 100%;
        height: 100%;
    }
}



/* 우측 - 컨텐츠 영역 */
.sec01 .sec01_right {
    flex           : 0 0 35%;
    display        : flex;
    flex-direction : column;
    gap            : /*var(--right-gap)*/ 15px;
    padding        : 20px 0 20px 16px;
    max-height     : var(--sec01-height);
    overflow-y     : auto;
    box-sizing     : border-box;
    justify-content: center !important;
}

/* -----------------------------------------------------------------------
   모바일 대응 (1460px 미만)
----------------------------------------------------------------------- */
@media (max-width: 1320px) {
    .sec01-wrap {
        width: auto;
    }
    .sec01 .sec01_left {
        flex: 0 0 60%;
    }
    .sec01 .sec01_right {
        flex: 0 0 40%;
    }
}

/* -----------------------------------------------------------------------
   모바일 대응 (1100px 미만)
----------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sec01 .sec01_left .box01-map {
        min-height: 100%;
    }
    .sec01 .sec01_left .box01-map iframe {
        height: 400px;
    }

    .sec01 .sec01_left .box01-bar .info-box {
        padding: 15px 20px;
    }
    .sec01 .sec01_left .box01-bar .info-box .info-box-tit strong {
        font-size: 18px;
    }
    .sec01 .sec01_left .box01-bar .info-box .info-box-list > li {
        font-size: 1rem;
    }
}


/* -----------------------------------------------------------------------
   모바일 대응 (1024px 이하)
----------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sec01-wrap {
        flex-direction : column;
    }
    .sec01 .sec01_left,
    .sec01 .sec01_right {
        flex           : none;
        width          : 100%;
        max-height     : none;
        overflow-y     : visible;
    }
    .sec01 .sec01_left {
        min-height     : 300px;
    }
    .sec01 .sec01_left .box01-bar {
        padding-right: 0;
    }
    .sec01 .sec01_left .box01-map {
        min-height     : 250px;
        height         : 300px;
        padding        : 10px 0;
    }
    .sec01 .sec01_left .box01-map iframe {
        width          : 100%;
        height         : 300px;
        border         : 0;
        display        : block;
    }
    .sec01 .sec01_left .box01-tit-txt {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
    }
}

/* -----------------------------------------------------------------------
   모바일 대응 (500px 이하)
----------------------------------------------------------------------- */
@media (max-width: 500px) {
    .sec01 .sec01_left .box01-bar .info-box {
        flex-direction: column;
        gap: 20px;
    }
    .sec01 .sec01_left .box01-tit-txt {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-direction: column;
    }
    .sec01 .sec01_left .box01-tit-txt > span {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------
   검색창 (sec01_right 내부)
----------------------------------------------------------------------- */
.sec01 .sec01_right {
    padding-left: 0;
}
.sec01_right .search-container {
    display        : flex;
    align-items    : center;
    width          : 100%;
    height         : 65px;
    border         : 3px solid #2d6afa;
    border-radius  : 50px;
    overflow       : hidden;
    background     : #fff;
}
.sec01_right .search-container input[type="text"] {
    flex           : 1;
    border         : none;
    outline        : none;
    padding        : 10px 16px;
    font-size      : 1rem;
    text-align     : center;
}
.sec01_right .search-container input[type="text"]::placeholder {
    color: rgba(17, 56, 115, 0.65);
}
.sec01_right .search-container input[type="text"]:focus {
    text-align     : left;
    padding-left: 20px !important;
}
.sec01_right .search-container input[type="text"]:focus::placeholder {
    color: transparent;
}
.sec01_right .search-container button[type="submit"] {
    width          : 55px;
    height         : 55px;
    background     : #2d6afa;
    color          : #fff;
    border-radius  : 50%;
    cursor         : pointer;
    font-size      : 0.95rem;
    white-space    : nowrap;
}
.sec01_right .search-container input::placeholder {
    color          : #ccc;
}
.sec01_right .search-container button[type="submit"]:hover {
    background     : #2455c8;
}
.sec01 .sec01_right .search-container input[type="text"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* -----------------------------------------------------------------------
   모바일 대응 (375px 이하)
----------------------------------------------------------------------- */
@media (max-width: 375px) {
    /*.sec01 .sec01_right {*/
    /*    padding: 0 0 20px 16px;*/
    /*}*/
    .sec01_right .search-container input[type="text"] {
        font-size: 14px !important;
    }
    .sec01_right .search-container button[type="submit"] {
        width: 50px;
        height: 50px;
    }
    /* 우측 - 컨텐츠 영역 */
    .sec01 .sec01_right {
        padding        : 0 0 20px 16px;
        padding-left   : 0 ;
    }

    /* -----------------------------------------------------------------------
       검색창 (sec01_right 내부)
    ----------------------------------------------------------------------- */

    .sec01_right .search-container {
        display        : flex;
        align-items    : center;
        width          : 100%;
        height         : 50px;
        border         : 3px solid #2d6afa;
        border-radius  : 50px;
        overflow       : hidden;
        background     : #fff;
    }
    .sec01_right .search-container input[type="text"] {
        flex           : 1;
        border         : none;
        outline        : none;
        padding        : 10px 16px;
        font-size      : 1rem;
        text-align     : center;
    }
    .sec01_right .search-container input[type="text"]::placeholder {
        color: rgba(17, 56, 115, 0.65);
    }
    .sec01_right .search-container button[type="submit"] {
        width          : 40px;
        height         : 40px;
        background     : #2d6afa;
        color          : #fff;
        border-radius  : 50%;
        cursor         : pointer;
        font-size      : 0.95rem;
        white-space    : nowrap;
    }
    .sec01_right .search-container button[type="submit"] img {
        width          : 20px !important;
        height         : 20px !important;
    }
    .sec01_right .search-container input::placeholder {
        color          : #ccc;
    }
    .sec01_right .search-container button[type="submit"]:hover {
        background     : #2455c8;
    }
    .sec01 .sec01_right .search-container input[type="text"]:focus {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .area-shortcut .shortcut-title {
        font-size: 1.13rem !important;
    }
}


/* -----------------------------------------------------------------------
   검색창 (sec01_right 내부), 검색어 입력 시 아래 검색 결과 띄우기 CSS
----------------------------------------------------------------------- */

.search_area {
    position: relative;
}

.search_area .ui-autocomplete {
    position: absolute !important;
    top: 94% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 50;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    max-height: 280px;
    overflow-y: auto;
}

.search_area .ui-autocomplete .ui-menu-item > a
, .search_area .ui-autocomplete .ui-menu-item-wrapper {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    text-decoration: none;
}

.search_area .ui-autocomplete .ui-menu-item > a.ui-state-active
, .search_area .ui-autocomplete .ui-menu-item > a.ui-state-focus
, .search_area .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: #f5f7fa;
    border: 0;
    margin: 0;
}




/* -----------------------------------------------------------------------
   바로가기 메뉴 (area-shortcut)
----------------------------------------------------------------------- */
.area-shortcut {
    background     : #fff;
    border-radius  : 12px;
    padding        : 14px 16px;
    border         : 1px solid #e0eaf5;
}
.area-shortcut .shortcut-title {
    font-size      : 1.25rem;
    font-weight    : 700;
    color          : #2d6afa;
    margin-bottom  : 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.area-shortcut .shortcut-grid {
    display        : grid;
    grid-template-columns: repeat(4, 1fr);
    gap            : 8px;
    text-align     : center;
}
.area-shortcut .shortcut-grid a {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 3px;
    font-size      : 0.9rem;
    color          : #1d2843;
    padding        : 8px 4px;
    border-radius  : 8px;
    text-decoration: none;
    transition     : background 0.2s;
    word-break     : keep-all;
    line-height    : 1.4;
}
.area-shortcut .shortcut-grid a:hover {
    background     : #ebf5ff;
    color          : #2463f7;
}
.area-shortcut .shortcut-grid a img {
    width: 70px;
    /*height: 70px;*/
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 6px;
}

/* -----------------------------------------------------------------------
   모바일 대응 (1100px 미만)
----------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .area-shortcut .shortcut-grid a {
        font-size: 0.90rem;
    }
    .area-shortcut .shortcut-grid a img {
        width: 60px;
    }
}

/* -----------------------------------------------------------------------
   모바일 대응 (375px 이하)
----------------------------------------------------------------------- */
@media (max-width: 375px) {
    .area-shortcut .shortcut-grid a {
        font-size: 0.8rem;
    }
    .area-shortcut .shortcut-grid a img {
        width: 45px;
    }
}


/* -----------------------------------------------------------------------
   탭 게시판 (area-tab-board)
----------------------------------------------------------------------- */
.area-tab-board {
    background     : #fff;
    border-radius  : 12px;
    border         : 1px solid #e0eaf5;
    overflow       : hidden;
    /*flex           : 1;         !* 남은 공간 채움 *!*/
    display        : flex;
    flex-direction : column;
    /*min-height     : 0;
    max-height     : 200px;*/     /*임시 height 삭제 시 주석 해제*/

    height         : 260px;      /*임시 height*/
}
/* 탭 버튼 목록 */
.area-tab-board .tab-nav {
    display        : flex;
    border-bottom  : 2px solid #e0eaf5;
    position       : relative;
    margin         : 12px 16px 0 16px;
}
.area-tab-board .tab-nav li {
    list-style     : none;
}
.area-tab-board .tab-nav li > a.tab-btn {
    display        : block;
    padding        : 10px 15px 8px 15px;
    font-size      : 0.93rem;
    font-weight    : 500;
    color          : #888;
    text-decoration: none;
    border-bottom  : 2px solid transparent;
    margin-bottom  : -2px;
    transition     : color 0.2s, border-color 0.2s;
    white-space    : nowrap;
}
.area-tab-board .tab-nav li > a.tab-btn:hover {
    color          : #2d6afa;
    font-weight    : 600;
}
.area-tab-board .tab-nav li.active > a.tab-btn {
    color          : #2463f7;
    font-weight    : 600;
    border-radius  : 8px 8px 0 0;
    background     : #ebf5ff;
}
/* -----------------------------------------------------------------------
   모바일 대응 (375px 이하)
----------------------------------------------------------------------- */
@media (max-width: 375px) {
    .area-tab-board .tab-nav li > a.tab-btn {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* 더보기 버튼 */
.area-tab-board .tab-nav .tab-more {
    display        : flex;
    align-items    : center;
    gap            : 2px;
    position       : absolute;
    right          : 0;
    top            : 50%;
    transform      : translateY(-50%);
    font-size      : 0.78rem;
    color          : #888;
    text-decoration: none;
}
.area-tab-board .tab-nav .tab-more img {
    transition: 0.3s;
}
.area-tab-board .tab-nav .tab-more:hover img {
    transform: rotate(90deg);
}
/* 탭 컨텐츠 패널 */
.area-tab-board .tab-panels {
    flex           : 1;
    /*overflow-y     : auto;*/
    padding        : 12px 16px;
    max-height     : 200px;
}
.area-tab-board .tab-panel {
    display        : none;
}
.area-tab-board .tab-panel.active {
    display        : block;
}
/* 게시글 카드 */
.area-tab-board .board-item {
    display        : flex;
    gap            : 5px;
    padding        : 19.7px 0;
    border-bottom  : 1px solid #f0f0f0;
    text-decoration: none;
    color          : inherit;
    justify-content: space-between;
    align-items    : center;
}
.area-tab-board .board-item:last-child {
    border-bottom  : none;
}
.area-tab-board .board-item h3 {
    position: relative;
    font-size      : 0.95rem;
    font-weight    : 400;
    color          : #222;
    padding-left   : 18px;
    /*margin-bottom  : 4px;*/
    /* 긴 제목 말줄임 */
    overflow       : hidden;
    text-overflow  : ellipsis;
    white-space    : nowrap;
}
.area-tab-board .board-item h3::before {
    content        : '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("../../images/sub/main-blt-icon.png") no-repeat center center / cover;
}
.area-tab-board .board-item:hover h3 {
    box-shadow     : inset 0 -1px 0 0 #000;
}

.area-tab-board .board-item .date {
    font-size      : 0.78rem;
    color          : #aaa;
    white-space    : normal;
    flex-shrink    : 0;
    /*margin-bottom  : 6px;*/
}
.area-tab-board .board-item .con {
    font-size      : 0.82rem;
    color          : #666;
    /* 본문 2줄 말줄임 */
    display        : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow       : hidden;
    line-height    : 1.5;
}
.area-tab-board .board-empty {
    padding        : 20px 0;
    text-align     : center;
    color          : #aaa;
    font-size      : 0.88rem;
}

/* -----------------------------------------------------------------------
   sec03 : 홍보자료 카드 슬라이더
----------------------------------------------------------------------- */
.sec03 {
    /*padding : 50px 20px 20px;*/
    padding : 25px 20px 20px;
    background : rgba(159,191,255,0.7);
}
.sec03 .sec03_con {
    max-width : 1280px;
    margin : 0 auto;
    padding : 0;
    overflow : hidden;
}
.sec03 .sec03_con .title {
    font-size : 1.50rem;
    font-weight : 700;
    color : #1d2843;
    margin-bottom : 12px;
}
.sec03-wrap {
    display : flex;
    align-items : center;
    gap : 20px;
}
.sec03-wrap .swiper {
    min-width: 0;
    flex : 1;
    overflow : hidden !important;
    padding-bottom : 36px;
}
.sec03 .swiper-pagination-bullet-active {
    background : #fff;
}
@media (max-width: 768px) {
    .sec03 {
        padding : 24px 16px;
    }
    .sec03 .sec03_con .title {
        font-size: 1.13rem;
    }
    .sec03-wrap {
        gap: 13px;
    }
    /*.sec03-wrap .swiper {*/
    /*    width: 100%;*/
    /*    overflow: hidden !important;*/
    /*}*/
    /*.sec03Swiper .swiper-slide {*/
    /*    margin-right: 10px;*/
    /*}*/
    /*.sec03-wrap .swiper {*/
    /*    width: calc(100% - 80px) !important;*/
    /*}*/
    .sec01 .sec01_left .box01-tit-txt {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-direction: column;
        margin-top: 0;
        padding-left: 0;
    }
    .sec01 .sec01_left .box01-tit-txt > span {
        font-size: 13px;
    }
}

.sec03-wrap .swiper-button-prev,
.sec03-wrap .swiper-button-next {
    position: static !important;
    width: 27px;
    margin-bottom: 36px;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------
   sec03 : 카드
----------------------------------------------------------------------- */
.promo-card {
    display : block;
    text-decoration: none;
    background : #fff;
    border-radius : 12px;
    overflow : hidden;
    box-shadow : 0 2px 8px rgba(0,0,0,0.08);
    transition : box-shadow 0.2s;
}
.promo-card:hover {
    box-shadow : 0 4px 16px rgba(0,0,0,0.15);
}
.promo-card__img {
    width : 100%;
    height : 230px;
    overflow : hidden;
}
.promo-card__img img {
    width : 100%;
    height : 100%;
    object-fit : cover;
    display : block;
    padding: 5px;
    transition : transform 0.3s;
}
.promo-card:hover .promo-card__img img {
    transform : scale(1.03);
}
.promo-card__body {
    padding : 12px 14px;
}
.promo-card__title {
    font-size : 1rem;
    font-weight : 600;
    color : #222;
    margin-bottom : 8px;
    height: 48px;
    display : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow : hidden;
    line-height : 1.5;
}
.promo-card__meta {
    display : flex;
    justify-content: space-between;
    align-items : center;
    font-size : 0.85rem;
    color : #aaa;
}
/*@media (max-width: 767px) {*/
/*    .sec03 { padding : 24px 16px;*/
/*    }*/
/*}*/

.main_visual {
    margin-bottom: 0 !important;
    height: auto !important;
}



/*메인화면 반응형 적용위해 css 임시 추가, ax지도 개발 완료시 해당 부분 삭제 START*/
@media (max-width: 500px) {
    /*메인화면 지도영역이랑 글자영역 없애기*/
    .box01-tit-txt {
        display: none !important;
    }
    .box01-map {
        display: none !important;
    }
}
/*메인화면 반응형 적용위해 css 임시 추가, ax지도 개발 완료시 해당 부분 삭제 END*/