@charset "utf-8";

/**
 * ============================================================
 * 여수시 청년정책 플랫폼 - 레이아웃 통합 스타일
 * ============================================================
 *
 * 목적: 메인페이지(yeosu/css/components.css)와 동일한 헤더/푸터 스타일
 * 전략: CSS 변수를 하드코딩 값으로 치환, 필요한 곳만 !important 사용
 *
 * 원본:
 *   - 헤더: /build/site/yeosu/css/components.css (lines 1452-1887)
 *   - 푸터: /build/site/yeosu/css/main.css (lines 724-860)
 * 작성일: 2024-11-24
 * 최종수정: 2024-11-26 (헤더/푸터 통합)
 * ============================================================
 */


/* ============================================================
   PART 1: 헤더 (HEADER)
   ============================================================ */

/* ========================================
   헤더 컨테이너
   ======================================== */
#header {
    position: sticky !important;
    top: 0 !important;
    width: 100%;
    height: auto !important;  /* layout.css 덮어쓰기: padding으로 높이 결정 */
    padding-top: 64px !important;  /* layout.css 덮어쓰기 */
    padding-bottom: 64px !important;  /* layout.css 덮어쓰기 */
    padding-left: 0;
    padding-right: 0;
    background-color: #FFFFFF;
    transition: box-shadow 300ms cubic-bezier(0, 0, 0.2, 1),
                border-bottom-color 300ms cubic-bezier(0, 0, 0.2, 1);
    border-bottom: 1px solid transparent;
    z-index: 500;
    box-sizing: border-box;
}

#header:hover {
    border-bottom-color: #CCCCCC;
}

#header .header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 1920px;
    padding: 0 100px;
}

/* 더 높은 specificity로 강제 */
header#header .header_inner,
#header > .header_inner,
#header .header-in,
body #header .header_inner {
    margin: 0 auto !important;
    padding: 0 100px !important;
}

/* layout.css의 gnb-wrap height 덮어쓰기 */
#header #wrap-header .gnb-wrap,
#header .gnb-wrap,
#header .head-gnb {
    height: auto !important;
    min-height: 0 !important;
}

/* ========================================
   로고 영역
   ======================================== */
#header .header_left {
    flex-shrink: 0;
    height: auto !important;
    line-height: 1;
}

#header .logo {
    margin: 0;
    height: auto !important;
    padding: 0 !important;  /* layout.css:243의 padding-bottom: 3rem 제거 */
    padding-bottom: 0 !important;
}

#header .logo .img {
    height: 50px !important;  /* layout.css:256 덮어쓰기 */
    width: auto;
}

#header .btn_home {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.nav_gnb .submenu li a {
    position: relative;
}

.sitemap-wrap .a2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sitemap-wrap .nav_gnb .submenu li a[target="_blank"]::after {
    content: "";
    position: static !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: none !important;
    margin-left: auto !important;
    width: 1rem;
    height: 1rem;
    background-image: url(/build/site/yeosu/img/external-link--i.svg);
    /*content: "";*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    /*position: absolute;*/
    /*right: 24px !important;*/
    /*left: auto !important;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    /*width: 1rem;*/
    /*height: 1rem;*/
    /*background-image: url(/build/site/yeosu/img/external-link--i.svg);*/
}

#m-gnb #gnb .dept2 .a2 {
    display: flex;
    font-size: 1.9rem;
    padding: 1.5rem .5rem;
    border-bottom: 1px solid #E4E7EA;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.m-gnb-wrap .submenu li a[target="_blank"]::after {
    content: "";
    position: static !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: none !important;
    margin-left: auto !important;
    width: 1rem;
    height: 1rem;
    background-image: url(/build/site/yeosu/img/external-link--i.svg);
}

.m-gnb-wrap .m-gnb-head .m-gnb-login a img {
    height: 17px !important;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login a {
    display: flex;
    gap: 10px;
    align-items: center;
}

#header .btn_home img,
#header .logo img,
#header img {
    height: 50px;  /* layout.css 덮어쓰기 */
    width: auto;
    max-height: 50px;
}

#header .btn_home[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: #222222;
    color: #FFFFFF;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 10;
}

#header .btn_home[data-tooltip]:hover::after {
    opacity: 1;
}

/* ========================================
   GNB 네비게이션
   ======================================== */
#header .nav_cover {
    display: none;
}

.nav_gnb {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 30px;
    position: static;
}


#header > .header_inner > .nav_gnb > ul {
    display: flex;
    align-items: center;
    gap: 48px;
}

#header > .header_inner > .nav_gnb > ul > li {
    position: static;
    line-height: 1;
}

/* 1depth 메뉴 링크 */
#header > .header_inner > .nav_gnb > ul > li > a {
    display: inline-block;
    padding: 8px 4px;
    color: #222222;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#header > .header_inner > .nav_gnb > ul > li > a:hover {
    color: #036BAC;
}

/* ========================================
   2depth 메가메뉴
   ======================================== */
#header > .header_inner > .nav_gnb .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    margin-left: calc(-100vw / 2 + 50%);
    background-color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #CCCCCC;
    padding: 40px calc((100vw - 1720px) / 2);
    opacity: 0 !important;  /* 인라인 스타일 덮어쓰기 */
    visibility: hidden !important;  /* 인라인 스타일 덮어쓰기 */
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 100;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0 80px;
}

#header > .header_inner > .nav_gnb .has-submenu:hover .submenu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 서브메뉴 li 항목 - 한 줄에 4개씩 배치 */
#header > .header_inner > .nav_gnb .submenu > li {
    list-style: none;
    text-align: left;
    width: calc((100% - 240px) / 4);
    box-sizing: border-box;
}

#header > .header_inner > .nav_gnb .submenu > li:nth-child(4n) {
    margin-right: 0;
}

/* 2depth 메뉴 링크 */
#header > .header_inner > .nav_gnb .submenu > li > a {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 200px;
    padding: 12px 48px 12px 24px;
    margin-bottom: 16px;
    color: #333333;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    background-color: #FFFFFF;
    transition: all 300ms ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#header > .header_inner > .nav_gnb .submenu > li > a::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.2L1.25002 0L6.25014 4.8L5.00012 6L0 1.2Z' fill='%23666666'/%3E%3Cpath d='M5.00012 6L3.74986 4.80019L8.74998 0.000186968L10 1.20019L5.00012 6Z' fill='%23666666'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

#header > .header_inner > .nav_gnb .submenu > li > a:hover {
    color: #333333;
    background-color: #E0EEF6;
    border-color: #036BAC;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#header > .header_inner > .nav_gnb .submenu > li > a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.7L1.25002 0.5L6.25014 5.3L5.00012 6.5L0 1.7Z' fill='black'/%3E%3Cpath d='M5.00012 6.5L3.74986 5.30019L8.74998 0.500187L10 1.70019L5.00012 6.5Z' fill='black'/%3E%3C/svg%3E%0A");
}

/* ========================================
   3depth 서브메뉴
   ======================================== */
#header > .header_inner > .nav_gnb .submenu-3depth {
    display: block;
    padding: 0 0 12px 12px;
}

#header > .header_inner > .nav_gnb .submenu-3depth li {
    list-style: none;
    margin-bottom: 8px;
}

#header > .header_inner > .nav_gnb .submenu-3depth li:last-child {
    margin-bottom: 0;
}

#header > .header_inner > .nav_gnb .submenu-3depth a {
    display: block;
    position: relative;
    padding: 4px 0 4px 14px;
    color: #343A40;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color 200ms ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#header > .header_inner > .nav_gnb .submenu-3depth a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #036BAC;
    border-radius: 50%;
}

#header > .header_inner > .nav_gnb .submenu-3depth a:hover {
    color: #036BAC;
}

/* ========================================
   유틸리티 메뉴
   ======================================== */
#header .header_right {
    flex-shrink: 0;
}

#header .util_menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

#header .util_icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700);
    font-size: 17px;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
    cursor: pointer;
    gap: 10px;
    line-height: 1;

}

#header .util_icon[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: #222222;
    color: #FFFFFF;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 10;
}

#header .util_icon[aria-label]:hover::after {
    opacity: 1;
}

#header .util_icon:hover {
    color: #000000;
}

#header .util_icon:hover img {
    filter: brightness(0);
}

#header .util_icon:focus {
    outline: none;
}

#header .util_icon:active {
    transform: scale(0.95);
}

#header .util_icon.util_lock img,
#header .util_icon.util_user img,
#header .util_icon.util_bell img,
#header .util_icon.util_bell img,
#header .util_icon.util_unlock img,
#header .util_icon.util_mypage img {
    width: 24px;
    height: 24px !important;
    object-fit: contain;
}

/* 알림 뱃지 */
#header .util_icon.has_badge .badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #F15D3E;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 8px;
    z-index: 2;
}

/* ========================================
   햄버거 메뉴 버튼
   ======================================== */
#header .btn_open_nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #036BAC;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
                transform 150ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 1000;
    text-decoration: none;
    color: transparent;
}

/* 데스크톱(1299px 초과): 사이트맵 버튼만 표시 */
#header .btn_open_sitemap {
    display: flex;
}

#header .btn_open_menu {
    display: none;
}

#header .btn_open_sitemap[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: #222222;
    color: #FFFFFF;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 10;
}

#header .btn_open_sitemap[aria-label]:hover::after {
    opacity: 1;
}

#header .btn_open_nav:hover {
    background-color: #000000;
    transform: scale(1.05);
}

#header .btn_open_nav:active {
    transform: scale(0.95);
}

#header .btn_open_nav div {
    position: relative;
    width: 24px;
    height: 3px;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: background-color 0ms 150ms;
}

#header .btn_open_nav div::before,
#header .btn_open_nav div::after {
    position: absolute;
    content: '';
    right: 0;
    width: 24px;
    height: 3px;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: all 150ms ease-in-out 150ms, transform 150ms ease-in-out;
}

#header .btn_open_nav div::before {
    top: -8px;
    transform: rotate(0deg);
}

#header .btn_open_nav div::after {
    top: 8px;
    transform: rotate(0deg);
}

/* 모바일 전체 메뉴 (LNB) - 데스크톱에서는 숨김 */
#header .nav_lnb {
    display: none;
}


/* ========================================
   헤더 반응형 미디어쿼리
   ======================================== */

@media screen and (max-width: 1720px) {
    #header > .header_inner > .nav_gnb > ul {
        gap: 20px;
    }

    #header > .header_inner > .nav_gnb > ul > li > a {
        font-size: 19px;
    }
}

@media screen and (max-width: 1440px) {
    .nav_gnb {
        margin: 0 30px;
    }
}

/* 데스크톱 (1280px 이하) */
@media screen and (max-width: 1280px) {
    #header .header_inner {
        padding: 0 30px !important;
    }
}

/* 태블릿 (1299px 이하) - 모바일 메뉴로 전환 */
@media screen and (max-width: 1299px) {
    #header {
        border-bottom: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 100px !important;
    }

    #header:hover {
        border-bottom: none !important;
    }

    #header .header_inner,
    body #header .header_inner,
    header#header .header_inner {
        padding: 0 30px !important;
        gap: 16px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    #header .logo,
    #header .btn_home {
        padding: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* GNB, 유틸리티 아이콘 숨김 */
    #header > .header_inner > .nav_gnb,
    #header .util_icon {
        display: none !important;
    }

    /* 모바일에서 모든 툴팁 숨김 */
    #header .btn_home[data-tooltip]::after,
    #header .util_icon[aria-label]::after,
    #header .btn_open_sitemap[aria-label]::after {
        display: none !important;
    }

    /* 모바일(1025px 이하): 사이트맵 버튼 숨기고 메뉴 버튼 표시 */
    #header .btn_open_sitemap {
        display: none !important;
    }

    #header .btn_open_menu {
        display: flex !important;
    }
}

/* 가로모드 태블릿 (992px 이하, landscape) */
@media screen and (max-width: 992px) and (orientation: landscape) {
    #header {
        height: 60px !important;
    }

    #header .header_inner {
        height: 100% !important;
    }
}

/* 태블릿 (768px 이하) */
@media screen and (max-width: 768px) {
    #header .header_inner {
        padding: 0 30px !important;
    }
}

/* 모바일 (576px 이하) */
@media screen and (max-width: 576px) {
    #header .header_inner {
        padding: 0 16px !important;
    }

    #header .btn_home img,
    #header .logo img,
    #header img {
        height: 45px;
        width: auto;
        max-height: 45px !important;
    }

    #header .btn_open_nav {
        width: 50px;
        height: 50px;
    }

    #header .btn_open_nav div {
        width: 26px;
        height: 3px;
    }

    #header .btn_open_nav div::before,
    #header .btn_open_nav div::after {
        width: 26px;
        height: 3px;
    }
}

/* 초소형 모바일 (400px 이하) */
@media screen and (max-width: 400px) {
    #header .util_menu {
        gap: 4px;
    }
}

/* 초소형 모바일 (360px 이하) */
@media screen and (max-width: 360px) {
    #header .header_inner {
        padding: 0 12px !important;
    }

    #header .btn_home img,
    #header .logo img,
    #header img {
        height: 45px;
        max-height: 45px;
    }

    #header .btn_open_nav {
        width: 50px;
        height: 50px;
    }
}

/* 모바일 메뉴 표시 제어 */
@media screen and (min-width: 1300px) {
    .m-gnb-wrap,
    #m-gnb {
        display: none !important;
    }
}

#header .btn_open_menu,
#header #btn-mobile-gnb {
    z-index: 99;
}

body.open_nav #header .btn_open_menu,
body.open_nav #header #btn-mobile-gnb,
html.m-open #header .btn_open_menu,
html.m-open #header #btn-mobile-gnb {
    display: none !important;
}

.m-gnb-wrap,
#m-gnb {
    z-index: 1002 !important;
}

.black-bg,
.nav_cover {
    z-index: 1001 !important;
}

.black-bg,
.nav_cover {
    display: none;
}

html.m-open .black-bg,
html.m-open .nav_cover,
body.open_nav .black-bg,
body.open_nav .nav_cover {
    display: block !important;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    cursor: pointer;
}


/* ============================================================
   PART 2: 푸터 (FOOTER)
   ============================================================ */

/* ===================================
   관련사이트 배너 (Partner Banner)
   =================================== */
.partner_banner {
    margin-bottom: 30px;
}

.width_con {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 24px;
}

.partner_slider {
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px 0px;
    margin: 0 auto;
    padding: 0 64px;
    height: 80px;
    max-width: 1200px;
    position: relative;
    display: block;
    box-sizing: border-box;
    transition: all 1.2s ease-out 0.6s;
}

.partner_item {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.partner_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1);
}

.partner_item a:hover {
    opacity: 0.7;
}

.partner_item img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Partner Slider Custom Arrows */
.partner_slider .slick-prev,
.partner_slider .slick-next {
    width: 10px !important;
    height: 16px !important;
    z-index: 10 !important;
    top: 50% !important;
    margin-top: -8px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
}

.partner_slider .slick-prev {
    left: 30px !important;
}

.partner_slider .slick-next {
    right: 30px !important;
}

.partner_slider .slick-prev:before,
.partner_slider .slick-next:before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.6 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-family: inherit !important;
    color: transparent !important;
}

.partner_slider .slick-prev:before {
    background-image: url('/build/site/yeosu/img/arrow-left.svg') !important;
}

.partner_slider .slick-next:before {
    background-image: url('/build/site/yeosu/img/arrow-right.svg') !important;
}

.partner_slider .slick-prev:hover,
.partner_slider .slick-prev:focus,
.partner_slider .slick-next:hover,
.partner_slider .slick-next:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

.partner_slider .slick-prev:hover:before,
.partner_slider .slick-next:hover:before {
    opacity: 1 !important;
}

.partner_slider .slick-prev.slick-disabled:before,
.partner_slider .slick-next.slick-disabled:before {
    opacity: 0.25 !important;
}


/* ===================================
   푸터 (Footer)
   =================================== */
.sections {
    position: relative;
    padding: 60px 0;
    background-color: #F8F8F8;
}

.section_footer {
    background-color: #F8F8F8;
    color: #222222;
    padding: 60px 0;
}

.footer_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer_logo {
    display: flex;
    justify-content: center;
    padding: 30px 0 0 0;
}

.footer_logo img {
    height: 60px;
    width: auto;
}

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

.footer_menu ul {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer_menu li {
    position: relative;
    padding: 0 20px;
}

.footer_menu a {
    color: #222222;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0, 0, 0.2, 1);
    white-space: nowrap;
}

.footer_menu li:first-child a {
    color: #036BAC;
}

.footer_menu a:hover {
    color: #036BAC;
}

.footer_info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer_info.center,
.footer_info address,
.footer_info address p {
    text-align: center;
}

.footer_info address {
    font-style: normal;
    color: #495057;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.footer_info address p {
    margin: 4px 0;
}

.footer_info .tel,
.footer_info .fax {
    font-weight: 700;
}

.divider-vertical::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #DEE2E6;
    margin: 0 20px;
    vertical-align: middle;
}

.footer_info a {
    color: #495057;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0, 0, 0.2, 1);
}

.footer_info a:hover {
    color: #036BAC;
}

.copyright {
    color: #666666;
    font-size: 17px;
    font-weight: 500;
    margin-top: 8px;
    text-align: center;
    line-height: 27.2px;
    word-break: keep-all;
}

.center {
    text-align: center;
}

/* ===================================
   푸터 반응형 (Responsive)
   =================================== */

/* 태블릿 (768px 이하) */
@media screen and (max-width: 768px) {
    .width_con {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .partner_slider {
        padding: 0 32px;
    }
}

/* 모바일 (700px 이하) */
@media screen and (max-width: 700px) {
    .width_con {
        /*width: calc(100% - 30px);*/
        width: 100% !important;
        max-width: 100%;
        padding: 0 15px;
    }

    .partner_slider {
        padding: 0 24px;
        height: 70px;
    }

    .partner_item,
    .partner_item a {
        height: 70px;
    }

    .partner_item img {
        max-height: 50px;
    }

    /* 푸터 */
    .footer_inner {
        width: 368px;
        max-width: 368px;
        padding: 0;
    }

    .footer_logo {
        padding: 30px 0 0 0;
    }

    .footer_logo img {
        height: 48px;
    }

    .footer_menu {
        width: 100%;
    }

    .footer_menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 8px;
    }

    .footer_menu li {
        padding: 0;
        flex-basis: auto;
    }

    .footer_menu li:nth-child(1),
    .footer_menu li:nth-child(2),
    .footer_menu li:nth-child(3) {
        order: 0;
    }

    .footer_menu li:nth-child(4),
    .footer_menu li:nth-child(5) {
        order: 1;
    }

    .footer_menu li::after {
        display: none;
    }

    .footer_menu a {
        font-size: 17px;
    }

    .footer_info {
        gap: 8px;
        align-items: center;
    }

    .footer_info address {
        font-size: 17px;
    }

    .footer_info address p {
        margin: 4px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .footer_info .tel,
    .footer_info .fax {
        display: block;
    }

    .footer_info .divider-vertical::after {
        display: none;
    }

    .copyright {
        font-size: 14px;
    }
}

/* 초소형 모바일 (360px 이하) */
@media screen and (max-width: 360px) {
    /* 푸터 */
    .footer_inner {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
}