@media screen and (max-width: 1300px) {
    .header{
        padding: 0 10px;
    }
    
}


@media screen and (max-width: 768px) {
    /* ////////////햄버거버튼 클릭했을때 나오는 부분/////////// */
    .wrap { 
        width: 100%;
        overflow: hidden; 
    }
    .wrap_container_pan{
        width:100%;
        height:3000px;
        background-color: rgba(0, 0, 0, 0.8);

        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999999;
        display: none;
    }

    /* .wrap_container_pan2{
        width:100%;
        height:40px;
        background-color: rgba(0, 0, 0, 0.8);

        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999999;
        display: none;
    } */
    .aside_menu{
        width:70%;
        height:100vh;
        position: fixed;
        left: 100%;
        top: 0;
        display: block;
    }

    .btn_area{
        width:100%;
        height:70px;
        border-bottom: 1px solid #eee;
        padding: 0 15px 0;
    }

    .btn_area > li{
        float: left;
        line-height: 70px;
        font-size: 14px;
        color: rgb(161, 161, 161);
    }

    .btn_area > .btn_close{
        float: right;
        margin-right: 28px;
        margin-top: 7px;
    }

    .menu_area_li{
        width:100%;
        height:55px;
        border-bottom: 1px solid #eee;
        padding: 0 15px 0;
        line-height: 55px;
        font-size: 13px;
        background-color: #f7f8f7;
    }

    .menu_area_li a{
        display: block;
        width:100%;
        height:100%;
    }



    /* ////////////헤더/////////// */
    .header{
        padding: 0;
    }

    .top_banner{
        height:40px;
        position: fixed;
        left:0;
        top:0;
        background: url(../img/header/m_top_banner.jpg) no-repeat center / contain;
        background-color: #b4b4b4;
    }

    .top_banner img{
        display: none;
    }

    .h_top{
        height:120px;
        margin-top: 40px;
        background-color: #fff;
    }
    .search{
        width:38px;
        background-color: #fff;
        top:0;
        left:13px;
        transform: translateY(55px);
    }

    .search > .sr{
        display: none;
    }

    .search > img{
        width:45px;
    }

    .logo{
        width:80px;
        transform: translateY(15px);
    }

    .hambuger{
        width:30px;
        height:25px;
        position: absolute;
        right:18px;
        top:0;
        transform: translateY(65px);
    }

    .h_line{
        width:100%;
        height:4px;
        background-color: #8f8f8f;
        margin-bottom: 5px;
    }

    .s_menu {
        width:100%;
        height:30px;
        border-bottom: 1px solid rgb(230, 230, 230);
        top:0;
        transform: translateY(0%);
    }
    
    .s_menu li{
        width:calc(100% / 4 - 0.1px);
        text-align: center;
        line-height: 28px;
    }
    
    .s_menu a{
        font-size: 12px;
        color:#000000;
        font-weight: 300;
        padding: 0;
    }



    /* h_bot */
    .nav{
        height:40px;
    }
        
    .nav_active{
        top:40px;
    }

    .nav_ul{
        height:40px;
        line-height: 40px;
        width:100%;
    
        left:0;
        transform: translateX(0);
        border-top:1px solid #eee;
    }

    .nav_li{
        width:calc(100% / 4 - 0.01px);
        text-align: center;
        border-right:1px solid #eee;
        box-sizing: border-box;
        display: block;
        float: left;
        padding:0;
    }

    .nav_li:last-child{
        border: none;
    }

    .nav_under_var,
    .nav_pan{
        display: none;
    }

    .nav_li > a{   
        font-size: 12px;
        font-weight: 300;
    }


    /* ////////////푸터/////////// */
    .footer{
        padding: 50px 0;
    }

    .footer_01{
        display: none;
    }

    .footer_02{
        margin-top: 0;
    }

    .footer_02 div:nth-child(1),
    .footer_02 div:nth-child(2){
        float: none;
        text-align: center;
        line-height: 20px;
    }

    .footer_03 div{
        text-align: center;
        font-size: 10px;
        line-height: 20px;
    }

    


    /*  */
    .s_btn_slide{
        display: none;
    }

    .scroll_top_in{
        display: none;
    }

}


@media screen and (max-width: 480px) {
    .header{
        padding: 0;
    }
}


@media screen and (max-width: 328px) {

    .nav_li > a {
        font-size: 11px;
    }
    
}