/* 헤더 */
header {padding: 0 15rem; display: flex; justify-content: space-between;}
    /* 로고 */
    .logo {height: 40px; margin: 25px 0;}
    .logo img {height: 40px;}

    /* 메뉴 */
    .gnb {display: flex; height: 40px; margin-top: 25px;}
    .gnb > li {width: 150px; height: 40px; line-height: 40px; text-align: center; position: relative; padding-bottom: 25px;}
    .gnb > li > a {display: block; width: 100%; height: 100%;}
    .gnb > li:hover > a {color: #2D91FF; font-weight: bold;}
    .gnb > li > ul {position: absolute; top: 65px; left: 0; width: 150px; text-align: center; background-color: #11397C; color: #fff; display: block; opacity: 0; z-index: -1; transition: all .5s;}
    .gnb > li > ul::before {content: ""; display: block; width: 20px; height: 20px; position: absolute; top: -10px; left: 45%; background-color: #11397C; transform: rotate(45deg);}
    .gnb > li:hover > ul {opacity: 1; z-index: 10;}
    .gnb > li > ul > li {height: 50px; line-height: 50px; border-bottom: 1px solid #999;}
    .gnb > li > ul > li > a {display: block; width: 100%; height: 100%;}
    .gnb > li > ul > li > a:hover {color: #2D91FF;}

    /* 전체메뉴 */
    .gnb > li.fmb {width: 40px; cursor: pointer;}
    .gnb > li.fmb > div {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
    .gnb > li.fmb > div > .bar {display: block; height: 3px; width: 25px; background-color: #555; border-radius: 3px; transition: all .5s;}
    .gnb > li.fmb > div > .bar2 {margin: 4px 0;}
    .gnb > li.fmb > div > .bar1.X {transform: rotate(45deg); position: absolute;}
    .gnb > li.fmb > div > .bar2.X {display: none;}
    .gnb > li.fmb > div > .bar3.X {transform: rotate(-45deg); position: absolute;}

    /* 전체메뉴 */
    .full_menu {width: 500px; height: 80%; position: fixed; top: 90px; right: -500px; background-color: #fff; padding: 50px; box-shadow: 0 0 10px #999; z-index: 29; transition: all .5s;}
    .full_menu.show {right: 0; position: absolute;}
    .full_menu > ul > li {width: 200px; height: 60px; background-color: #fff; line-height: 60px; position: relative;}
    .full_menu > ul > li > a {display: block; width: 100%; height: 100%;}
    .full_menu > ul > li > ul {position: absolute; top: 0; left: 200px; opacity: 0; transition: all .5s; z-index: -1;}
    .full_menu > ul > li:hover > ul {opacity: 1; z-index: 30;}
    .full_menu > ul > li > ul > li {width: 200px; height: 60px;}
    .full_menu > ul > li > ul > li > a {display: block; width: 100%; height: 100%;}

    
    @media screen and (max-width:1600px) {
        header {padding: 0 11rem;}
    }
    @media screen and (max-width:1250px) {
        header {padding: 0 8rem;}
    }
    @media screen and (max-width:1000px) {
        header {padding: 0 3rem;}
        .gnb > li {width: 100px; height: 30px; line-height: 30px;}
        .logo {height: 30px;}
        .logo img {height: 30px;}

        .full_menu {top: 80px;}
    }
    @media screen and (max-width:700px) {
        .gnb > li {display: none;}
        .gnb > li:last-of-type {display: block;}

        .full_menu.show {width: 300px;}
        .full_menu > ul > li {height: auto;}
        .full_menu > ul > li > a {border-bottom: 1px solid #555;}
        .full_menu > ul > li > ul {position: static; display: none; opacity: 1;}
    }
    @media screen and (max-width:440px) {
        
        header {padding: 0 1rem;}
        .gnb {height: auto; margin: auto 0;}
        .gnb > li {height: 20px; line-height: 20px; padding-bottom: 0;}
        .logo {height: 20px; margin: 15px 0;}
        .logo img {height: 20px;}

        .full_menu {top: 50px;}
    }