@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : MONI
Create date : 2020-11-09
-------------------------------------------------*/
/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : 이지현
Create date : 2022-03-23
-------------------------------------------------*/
@media (max-width: 1730px) {
    .topbanner .open {
        display: none;
    }

    #gnb1 > ul .submenu .desc {
        padding-left: 5rem;
    }
}
@media (max-width: 1520px) {
    /* #gnb1 > ul .submenu .desc {
        width: 20%;
    }
    #gnb1 > ul .submenu .desc > * {
        max-width: 23rem;
    }
    #gnb1 > ul .submenu > ul {
        width: 80%;
    }
    #gnb2 .control {
        right: 3rem;
    } */
}
@media screen and (max-width: 1400px) {
    #mainMenu .gnb {
        margin-left: 10rem;
        margin-right: 5rem;
    }
    #header.mainMenuOpen .bg {
        left: 0.75rem;
        margin-left: 0;
        width: 10rem;
        overflow: hidden;
    }

    .openSrh {
        right: 3rem;
        margin-right: 0;
    }
    .allMenu {
        right: 0;
        margin-right: 0;
    }

    /*220303 추가*/
    .foot_mark .mark_list {
        position: relative;
        top: 0;
        margin-top: 0.75rem;
    }
}
@media screen and (max-width: 1280px) {
    #header > .container {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #ccc;
    } /* 201215수정 */
    #header {
        line-height: 3rem;
        border-bottom: none;
    }
    #header:before,
    #header .bg {
        display: none;
    }
    #header .logo {
        margin-top: 0.5rem;
        margin-left: 1rem;
    }
    #header .logo a {
        height: 2rem;
        background-size: auto 100%;
        width: 12rem;
    } /* 201214수정 */

    #util > li > a {
        height: 3rem;
        line-height: 3rem;
    }
    #util {
        top: 0;
        right: 6rem;
    }
    .openSrh,
    .allMenu,
    .openSrh i,
    .allMenu i {
        height: 3rem;
        line-height: 3rem;
    }
    .openSrh,
    .allMenu {
        top: 0;
    }
    .openSrh {
        right: 3rem;
    }

    #mainMenu {
        display: none;
    }

    #totalSearch {
        top: 3rem;
    }
    #totalSearch .container {
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
    #totalSearch {
        padding: 1rem 0.5rem;
    }
    #totalSearch input {
        width: calc(100% - 3.5rem);
    }
    #totalSearch a {
        position: relative;
        width: 2.5rem;
        color: transparent;
        overflow: hidden;
    }
    #totalSearch a:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-family: "xeicon";
        font-size: 1.5rem;
        color: #fff;
        content: "\e9af";
    }

    #fullMenu h2 {
        line-height: 3rem;
        font-size: 1.25rem;
    }
    #fullMenu .allMenu {
        top: 0;
    }
    #fullMenu .container {
        margin: 0;
        width: 100%;
    }
    #fullMenu .fullMenuScroll {
        padding: 0;
    }
    #fullMenu .gnb > li + li {
        margin-top: 0;
    }
    #fullMenu .gnb > li > a {
        position: relative;
        display: block;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    #fullMenu .gnb > li > a em {
        margin-right: 0.25rem;
        font-size: 1.25rem;
        font-weight: 200;
    }
    #fullMenu .gnb > li.dep > a:after {
        position: absolute;
        top: 14px;
        right: 1rem;
        font-family: "xeicon";
        font-size: 1rem;
        color: #fff;
        content: "\e943";
        transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
    }
    #fullMenu .gnb > li.dep.active > a:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    #fullMenu .gnb .depth2 {
        margin-top: 0;
        padding: 0.5rem;
        background: #093c72;
    }
    #fullMenu .gnb .depth2 > li {
        float: none;
        margin: 0;
        width: 100%;
    }
    #fullMenu .gnb .depth2 > li:nth-of-type(n + 6) {
        margin-top: 0;
    }
    #fullMenu .gnb .depth2 > li > a {
        position: relative;
        display: block;
        margin-bottom: 0;
        padding: 0.5rem 1rem;
        line-height: 1.3;
        text-align: left;
        border: none;
    }
    #fullMenu .gnb .depth2 > li.dep > a:after {
        position: absolute;
        top: 0.7rem;
        right: 1rem;
        font-family: "xeicon";
        font-size: 0.8rem;
        color: #fff;
        content: "\e9c5";
        transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
    }
    #fullMenu .gnb .depth2 > li.dep.active > a:after {
        content: "\e9c1";
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    #fullMenu .gnb {
        border-top: 1px solid rgba(255, 255, 255, 0.5);
    }
    #fullMenu .gnb .depth2 {
        display: none;
    }
    #fullMenu .gnb .depth2.active {
        display: block;
    }
    #fullMenu .gnb .depth3 {
        display: none;
        padding: 1rem;
        margin: 0 1rem;
        background: rgba(255, 255, 255, 0.1);
    }

    #fullMenu .gnb > li.depCk:before {
        position: absolute;
        right: 13px;
        top: 24px;
        width: 15px;
        height: 1px;
        background: #fff;
        content: "";
    }
    #fullMenu .gnb > li.depCk:after {
        position: absolute;
        right: 20px;
        top: 17px;
        width: 1px;
        height: 15px;
        background: #fff;
        content: "";
    }
    #fullMenu .gnb > li.depCk.on:after {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    #fullMenu .gnb .depth2 > li.depCk > a:after {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        font-family: "xeicon";
        font-size: 0.9rem;
        content: "\e942";
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }
    #fullMenu .gnb .depth2 > li.depCk.on > a:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    #footer .protectionLink .fl a {
        max-width: 16%;
    } /* 201203추가 */
}
/* @media (max-width: 1100px) {
    #gnb1 > ul {
        display: none;
    }
    #header .search .form {
        margin: 10rem 0;
    }
    #header .search .close {
        top: 2rem;
        right: 1rem;
        transform: translate(0);
    }
    #wrap.active {
        height: 100vh;
        overflow: hidden;
    }
    #hnb .hnb1 .label {
        display: block;
    }
    #hnb .hnb1 .list {
        visibility: hidden;
        overflow: hidden;
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
        left: -1px;
        top: 100%;
        width: 100%;
        background: #767676;
    }
    #hnb .hnb1 .list li {
        width: 100%;
        border: 0 none;
    }
    #hnb .hnb1 .list a {
        padding-left: 2rem;
        text-align: left;
    }
    #hnb .hnb1.active .list {
        visibility: visible;
        overflow: visible;
        width: auto;
        height: auto;
        opacity: 1;
    }
    #hnb .hnb2 a {
        padding: 0 1.5rem;
    }
    #gnb1 {
        display: none;
    }
    #gnb2 .control.close {
        color: #fff;
        top: 2rem;
    }
    #gnb2 .control.close::before {
        background-color: #fff;
        color: #000;
    }
    #gnb2 > ul {
        width: 40rem !important;
        height: calc(100vh - 8rem) !important;
        left: inherit;
        right: 0;
        transform: translateX(0);
        padding: 0 3rem 5rem;
        margin-top: 0;
        background-color: #fff;
        top: 8rem;
        overflow: hidden !important;
        overflow-y: auto !important;
    }
    #gnb2 > ul::before {
        top: -10rem;
        width: 100%;
        height: 10rem;
        right: 0;
        left: inherit;
        background-color: #fff;
        display: none;
    }
    #gnb2 > ul > li {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 0;
        text-align: left;
    }
    #gnb2 > ul > li::after,
    #gnb2 > ul > li::before {
        display: none !important;
    }
    #gnb2 > ul > li > a {
        position: relative;
        margin-bottom: 0;
        padding: 1.5rem 3rem 1.5rem 0;
        color: #333;
        border-bottom: 1px solid #ebecf0;
    }
    #gnb2 > ul > li > a::before {
        display: none;
    }
    #gnb2 > ul > li > a::after {
        position: absolute;
        top: auto;
        left: auto;
        right: auto;
        font-family: "xeicon";
        right: 1rem;
        content: "\e941";
        top: 50%;
        transform: translateY(-50%);
        color: #dcdcdc;
        font-size: 2rem;
    }
    #gnb2 > ul > li.active {
        border-bottom: 1px solid #ebecf0;
    }
    #gnb2 > ul > li.active > a::after {
        color: #222;
        transform: rotate(180deg);
        top: calc(50% - 1rem);
    }
    #gnb2 > ul > li.active .submenu {
        visibility: visible;
        overflow: visible;
        width: auto;
        height: auto;
        opacity: 1;
    }
    #gnb2 .submenu {
        visibility: hidden;
        overflow: hidden;
        width: 0;
        height: 0;
        opacity: 0;
        border-top: 1px solid #4e4e4e;
    }
    #gnb2 .submenu > ul {
        padding: 3rem 1rem;
    }
    #gnb2 .submenu > ul > li > a {
        font-size: 2rem;
    }
    #gnb2 .submenu > ul > li > a::before {
        background-color: #333;
    }
    #gnb2 .submenu a {
        display: block;
        border-radius: 0;
        color: #555;
    }
    #gnb2 .submenu div {
        margin-bottom: 2rem;
    }
    #gnb2 .submenu div a:hover,
    #gnb2 .submenu div a:focus {
        color: #555;
    }
    #gnb2.active {
        position: relative;
        z-index: 100;
        top: 0;
    }
    #gnb2.active::before {
        content: "";
        width: 40rem;
        height: 8rem;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #fff;
    }
    #gnb2.active::after {
        content: "";
        width: calc(100% + 6rem);
        height: 100vh;
        position: absolute;
        left: -3rem;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    #footer {
        padding: 2rem 0 13rem;
        text-align: center;
    }
    #footer .btn-top {
        bottom: 25rem;
    }
    #footer .mark {
        display: none;
    }
    #footer .related {
        bottom: 0;
        left: -1rem;
        z-index: 2;
        width: calc(100% + 2rem + 1px);
    }
    #footer .related .group {
        width: 100%;
        margin: 0 1px 0 0;
        border: 0 none;
        color: #fff;
        line-height: 4.5rem;
    }
    #footer .related .list {
        margin-bottom: 0;
    }
    #fnb {
        margin-bottom: 2rem;
    }
    #fnb .fnb2 {
        width: 100%;
    }
    #fnb .fnb1 {
        margin-bottom: 2rem;
        float: none;
        text-align: center;
    }
    #siteinfo {
        padding-left: 0;
    }
    #siteinfo .logo {
        display: inline-block;
        position: static;
        margin-bottom: 2rem;
    }
    #siteinfo address,
    #siteinfo .tel {
        display: block;
    }
    #siteinfo .tel {
        padding-left: 0;
    }
    #siteinfo .tel::before {
        display: none;
    }
    #siteinfo .copyright {
        display: block;
        text-align: center;
    }
} */
@media screen and (max-width: 1024px) {
    #footer {
        line-height: 1.3;
    }
    #footer .container {
        margin: 0;
        width: 100%;
    }
    #footer .protectionLink a {
        float: left;
        line-height: 6rem;
        text-align: center;
    }
    #footer .protectionLink .fl {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }
    #footer .protectionLink .fl a {
        padding: 0 3rem;
        max-width: 100%;
        width: 33%;
    } /* 201203수정 */
    #footer .protectionLink .fl a + a {
        margin-left: 0;
    }
    #footer .protectionLink .fl a img {
        max-width: 100%;
        max-height: 5rem;
    }
    #footer .protectionLink .fr {
        width: 100%;
    }
    #footer .protectionLink .fr a {
        width: 33.333%;
    }
    #footer .protectionLink .fr a + a:after {
        top: 2.4rem;
    }
    #footer .footerInfo {
        padding: 0 2rem;
    }

    #head_menu_all > li .submenu ul li div ul li > a:before {
        top: 1.2rem;
    }
}
@media (max-width: 768px) {
    html {
        font-size: 9px;
    }
    #logo {
        /* width: 17rem; */
        /* margin: 1.6rem 0 0 1.5rem; */
    }
    #logo a {
        width: 21.5rem;
    }
    #gnb2 .control.open {
        right: 1.5rem;
    }
    #header .search .control.open {
        right: 5.5rem;
    }
    #hnb {
        right: 10rem;
    }
}
@media (max-width: 500px) {
    #wrap.active #hnb {
        display: block;
        z-index: 101;
    }
    #wrap.active #hnb li,
    #wrap.active #hnb li + li {
        color: #333;
    }
    #gnb2 > ul {
        width: 100% !important;
        padding: 0 0 5rem;
    }
    #gnb2.active::before {
        width: 100%;
    }
    #gnb2 .control.close {
        right: 2rem;
    }
    #hnb {
        display: none;
    }
}