/*header*/
#header{
    width: 100%;
    background: #fc5709;
    padding:20px 0;
    border-radius: 0 0 30px 30px;
    z-index: 10000;
    position: fixed;
    top:0;
    transition: top 0.3s ease-in-out;
}
#header.nav_up {top: -99px;}
#header>.inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}
.logo img{width: 220px;}
.menu{
    display: flex;
    font-family: 'KimjungchulMyungjo-Regular';
    font-size: 20px;
    gap: 80px;
}
.menu li a{
    color:#fff;
}
.menu li.menu_off a{color:#ffa074}
.menu li#on a{color:#fff}

/*footer*/
#footer>div,.f_info ul, .f_info ul li{
    display: flex;
    font-size:12px
}
.f_info ul li{margin-right: 10px;}
#footer>div{
    gap: 50px;
    align-items: baseline;
    position: relative;
}
#footer h4{font-size: 12px;}
.f_info ul{margin:10px 0;}
.f_info ul p{margin-left:10px}
.kakao{
    position: absolute;
    right:0;
    background:#ffe100;
    font-size: 13px;
    border-radius: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
.kakao a{
    padding:15px 20px;
    display: block;
}
.kakao img{margin-right: 10px;}

/*반응형*/
.panel{display: none;}
@media all and (max-width:767px) {
    /*공통*/
    #header>.inner{display: block;}
    .inner{width: auto;}

    /*헤더*/
    #header{text-align: center; border-radius: 0; padding:15px 0;}
    .logo img{width: 40%;}
    .panel_wrap{position: fixed; top: 0; left:0; width: 0; overflow: hidden; height: 100%; background: #fc5709; padding:50px 0; box-sizing: border-box; z-index: 1000;}
    .nav_bg{content: ""; position: fixed; width: 100%; height: 100%; background:rgba(0,0,0,0.7); top:0; padding-top:99px; z-index: 100; display: none;}
    .menu{display: block; margin-top: 100px; text-align: left;}
    .menu li{width:230px; box-sizing: border-box; line-height: 45px; padding:0 50px}
    .menu li#on a{color: #fff;}
    .menu li.menu_off a{color:#ffa074;}

    .close {
        width: 30px;
        height: 30px;
        position: absolute;
        right:20px;
        top:20px;
    }
    .close:after {
        content: '';
        height: 30px;
        border-left: 2px solid #fff;
        position: absolute;
        transform: rotate(45deg);
        left: 14px;
        margin-top:0;
    }
    
    .close:before {
        content: '';
        height: 30px;
        border-left: 2px solid #fff;
        position: absolute;
        transform: rotate(-45deg);
        left: 14px;
    }
    .panel{display:block; position:absolute; top:50%; margin-top:-8px; left:20px;}
	.panel a{display:block;}
    .open_nav span,.open_nav:before,.open_nav:after{content:""; display:block; width:25px; height:2px; background:#fff;}
	.open_nav span{margin:5px 0; text-indent:-9999px;}
}