/*########### header ###########*/
header {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    height: 80px;
    border-bottom: 1px solid #e9e9e9;
}

header .center_inner {
    display: flex;
    align-items: center;
}

/* logo_wrap */
header .logo_wrap a {
    width: 260px;
    display: flex;
    align-items: center;
}

header .logo_wrap a img {
    width: 100%;
}

/* menu_wrap */
header .menu_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 9%;
}

.menu_wrap nav {
    width: 100%;
    height: 100%;
}

ul.main_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
}

ul.main_menu>li>a {
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 23px;
    transition: 0.2s;
    display: block;
}

ul.main_menu>li>a:hover {
    transition: 0.2s;
    font-weight: 700;
}

ul.main_menu .plus_icon,
ul.main_menu .minus_icon {
    display: none;
    width: 15px;
    height: 15px;
}

ul.sub_menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex-wrap: wrap;
}

ul.sub_menu>li {
    width: 100%;
}

ul.sub_menu>li>a {
    color: #000;
    font-size: 18px;
    width: 100%;
    height: 100%;
    display: block;
    text-align: left;
}


ul.sub_menu>li>a:hover {
    font-weight: 700;
    transition: 0.2s;
}

.lang_btn {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
    border-left: 2px solid #b8b8b8;
    padding: 2px 6px;
}

.lang_btn a {
    padding: 0px 5px;
    display: flex;
    height: 14px;
    align-items: center;
    font-size: 15px;
    color: #bfbfbf;
}

.lang_btn a:last-child {
    padding-right: 0px;
    border-left: 1px solid #bfbfbf;
}

.lang_btn a.active {
    color: #016a78;
}

.menu_open_btn,
.menu_close_btn {
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.menu_open_btn:hover,
.menu_close_btn:hover {
    cursor: pointer;
}

.menu_open_btn img,
.menu_close_btn img {
    width: 30px;
}

body.menu_open {
    overflow: hidden;
    /* 배경 스크롤 방지 */
}

body.menu_open header {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 999;
}

@media (min-width:1201px) {

    /* header .center_inner {
        gap: 50px;
    } */

    .menu_open_btn,
    .menu_close_btn {
        display: none !important;
    }

    .sub_menu_background {
        position: absolute;
        background-color: rgba(1, 107, 121, 0.7);
        top: 80px;
        left: 0;
        right: 0;
        z-index: 998;
        height: 260px;

        margin-bottom: 10%;
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        pointer-events: none;
    }

    ul.sub_menu {
        display: none;
    }

    ul.sub_menu li a {
        padding: 8px 0px;
        color: #fff;
    }

    .menu_wrap nav:hover ul.sub_menu {
        display: block;
        position: absolute;
        top: 100px;
    }

    .menu_wrap nav:hover .sub_menu_background {
        display: block;
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }

    .lang_btn {
        position: relative;
        z-index: 999;

    }
}

@media (max-width:1200px) {
    header {
        height: 50px;
        position: static;
        overflow-x: hidden;
    }

    header .center_inner {}

    header .logo_wrap a {
        width: 240px;
    }

  /* menu_wrap */
    header .menu_wrap {

        padding: 0px 0%;
    }

    .menu_wrap nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        max-height: 0;
        padding: 0;
        margin: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
        overflow: hidden;
        z-index: 999;
    }

    .menu_wrap nav.open {
        max-height: 9000px;
        /* 예상되는 최대 높이 */
        padding: 50px 0px 0px;
        overflow: visible;
    }

    .sub_menu_background {
        background-color: #016B79;
        overflow: hidden;
        max-height: 0;
        padding: 0;
        margin: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .menu_wrap nav.open .sub_menu_background {
        display: flex;
        position: absolute;
        top: 0;
        left: -10%;
        width: 120%;
        height: 50px;
        max-height: 50px;
    }

    .menu_open_btn {
        display: flex;
    }

    .menu_close_btn {
        display: none;
        position: relative;
        z-index: 999;
    }

    ul.main_menu {
        display: block;
        overflow: scroll;
    }

    ul.main_menu li {}

    ul.main_menu>li>a {
        padding: 20px 5%;
        font-weight: 500;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
    }

    ul.main_menu .plus_icon,
    ul.main_menu .minus_icon {
        display: flex;
    }

    ul.main_menu .plus_icon.hidden,
    ul.main_menu .minus_icon.hidden {
        display: none;
    }


    ul.sub_menu {
        overflow: hidden;
        max-height: 0;
        padding: 0;
        margin: 0;
        background-color: #fafafa;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    ul.sub_menu>li>a {
        padding: 20px 20px 20px 8%;
        border-bottom: 1px solid #ccc;
    }

    ul.sub_menu.open {
        max-height: 800px;
        /* 예상되는 최대 높이 */
    }
}

@media (max-width:800px) {

    .menu_open_btn img,
    .menu_close_btn img {
        width: 22px;
    }
}


@media (max-width:500px) {
    header .logo_wrap a {
        width: 200px;
    }
}


/*########### footer #########*/
footer {
    background-color: #f7f7f7;
    color: #acacac;
    font-size: 14px;
}

footer .center_inner {
    background-color: #f7f7f7;
    padding: 40px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .img_wrap img {
    height: 20px;
}

footer .text_wrap p a {
    color: #acacac;
}

@media (max-width:1200px) {
    footer .center_inner {
        display: block;
    }

    footer .img_wrap img {
        height: 18px;
        margin-bottom: 10px;
    }
}




/*########## sub_page_header #############*/
section.sub_page_header {}

.sub_page_header .center_inner {
    background-color: #f1f1f1;
    padding: 2% 0px;
}

.sub_page_header .pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub_page_header .pagination .home_icon {
    height: 18px;
}

.sub_page_header .pagination img {
    height: 14px;
}

.sub_page_header .pagination span {
    font-size: 14px;
}

.sub_page_header .sub_title {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-top: 40px;
}

.sub_page_header .sub_title li {
    height: 15px;
    display: flex;
    align-items: center;
    margin: 10px 0px;
}

.sub_page_header .sub_title li:not(:last-child) {
    border-right: 1px solid #999999;
    margin-right: 14px;
    padding-right: 14px;
}

.sub_page_header .sub_title li a {
    color: #999999;
    font-size: 20px;
    transition: 0.2s;
    display: flex;
    align-items: center;
}

.sub_page_header .sub_title li a .list_style {
    font-size: 30px;
}

.sub_page_header .sub_title li a:hover {
    color: #000;

}



.sub_page_header .sub_title li.active>a {
    font-size: 36px;
    color: #000;
    font-weight: 600;
}


@media (max-width:800px) {
    .sub_page_header .sub_title {

        position: relative;
        padding-top: 40px;
    }

    .sub_page_header .sub_title li.active {
        position: absolute;
        top: 0;
        border: none;
    }
    
    .sub_page_header .sub_title li.active>a {
        font-size: 24px;
      
    }

}