/* 헤더 */
#header {width: 100%;max-width: 160px;overflow: hidden;position: fixed;display: flex;flex-direction: column;}
#hdarea{width: 100%;}

/* 메뉴 */
#navi{margin-top: 60px;}
#navi li{margin-bottom: 15px;}
#navi li a{font-size: 11px; letter-spacing: 1px; font-family:  verdana, sans-serif;}
#navi li .sub {display: block;font-size: 10px; color: #A9A9A9; letter-spacing: 1px;    font-weight: 100; margin-top: 10px !important}
#navi li a.sub:last-child{margin-top: 10px;}
#navi li.on a, #navi li a:hover {color:#5F9EA0}

/* sns */
.sns{margin-top: 20px;}
.sns li a{font-size: 10px;color: #A9A9A9;  letter-spacing: 1px; font-family:  verdana, sans-serif; display: block; margin-bottom: 10px;}
.sns li a:hover{color: #5F9EA0;}
/* mobile overlay */
.overlay {z-index: 3;position: fixed;top: 0;right: 0;width: 100%;height: 0%;opacity: 0;visibility: hidden;overflow: hidden;}


.button_container{display: none;}

/* 헤더 미디어쿼리 */
@media all and (max-width:640px) {
    #header {max-width: 100%; position: relative;}
    /*mobile button s */
    .button_container {
        display: block;
        position: absolute;
        top: 0px;
        right: 0%;
        width: 20px;
        height: 16px;
        cursor: pointer;
        z-index: 100;
        transition: opacity .25s ease;
    }
    .button_container span {
        background: #A7A7A7;
        height: 1.5px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .35s ease;
        cursor: pointer;
    }
    .button_container span:nth-of-type(2) {
        top: 7px;
    }
    .button_container span:nth-of-type(3) {
        top: 15px;
    }
    .button_container.active .top {
        transform: translateY(7px) translateX(0) rotate(45deg);
        background: #A7A7A7;
    }
    .button_container.active .middle {
        opacity: 0;
        background: #A7A7A7;
    }
    .button_container.active .bottom {
        transform: translateY(-8px) translateX(0) rotate(-45deg);
        background: #A7A7A7;
    }

    /* overlay s */
    .overlay.open {
        opacity: .95;
        visibility: visible;
        height: 100%;
    }
    .overlay.open .backdrop {
        background: #000;
        opacity: .5;
        height: 100%;
        width: 100%;
        height: 100%;
        top: 0;
        position: fixed;
        left: 0;
        z-index: 3;
    }
    .overlay.open nav {
        position: absolute;
        width: 200px;
        height: 100%;
        background: white;
        right: 0;
        z-index: 10;
        padding: 65px 0 0 27px;
        animation: fadeInRight .5s ease forwards;
    }
    .overlay nav ul{       
        margin-top:65px;  
        transition: opacity .25s ease;  
    }
    .overlay nav li{
        margin-bottom: 15px;
    }
    .overlay nav  li a{
        font-size: 11px;
        letter-spacing: 1px;
        font-family:  verdana, sans-serif;
        margin-top: 10px !important;
        transition: opacity .25s ease;  
    }
    .overlay nav  li .sub {
        display: block;
        font-size: 10px;
        letter-spacing: 1px;
        color: #A9A9A9;    
        font-weight: 100;
        
    }
    .overlay nav  li a.sub:last-child {
        margin-top: 10px;
    }
}