@media (min-width: 500px){
    #leftMenu {
        width: 80px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        border-right: 1px solid #4B4B4B;
        box-sizing: border-box;
        background: #020001;
        z-index: 10001;
    }
    
    #leftMenu .menu {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translate(-50%, 0);
        display: block;
        cursor: pointer;
        border: none;
        background: url(/image/menu.png) center no-repeat;
    }
    
    #leftMenu .menu.close{
        background: url(/image/close.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap {
        position: absolute;
        left: 50%;
        bottom: 70px;
        transform: translate(-50%, 0);
    }
    
    #leftMenu .copyright {
        position: absolute;
        left: -74px;
        bottom: 320px;
        transform: rotate(90deg);
        font-size: 12px;
        color: rgba(166, 166, 166, 0.7);
        width: 230px;
    }
    
    #leftMenu .sns_wrap button {
        display: block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-bottom: 30px;
        border: none;
    }
    
    #leftMenu .sns_wrap a button {
        display: block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-bottom: 30px;
        border: none;
    }
    
    #leftMenu .sns_wrap a:last-child button {
        margin-bottom: 0;
    }
    
    #leftMenu .sns_wrap button.facebook {
        background: url(/image/facebook.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap button.youtube {
        background: url(/image/youtube.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap button.instar {
        background: url(/image/instar.png) center no-repeat;
    }
    
    .menu_wrap{
        position: absolute;
        top: 0;
        left: -580px;
        background: #020001;
        z-index: 10000;
        width: 500px;
        height: calc(100vh - 70px);
        overflow-x: hidden;
        transition: all 0.3s;
    }
    
    .menu_wrap.on{
        left: 80px;
        transition: all 0.3s;
    }
    
    .menu_wrap .inner{
        padding: 20px 30px 0 30px;
    }
    
    .menu_wrap .logo{
        width: 67px;
    }
    
    .menu_wrap .tit{
        font-size: 2em;
        color: #fff;
        margin-top: 2em;
    }
    
    .menu_wrap .btn_wrap{
        margin-top: 2em;
    }
    
    .menu_wrap .btn_wrap::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .menu_wrap .btn_wrap a{
        width: 108px;
        height: 36px;
        line-height: 36px;
        display: block;
        float: left;
        text-align: center;
        color: #fff;
        font-size: 1.4em;
        font-weight: 500;
        border: 1px solid #c3c3c4;
        box-sizing: border-box;
        border-radius: 5px;
        margin-right: 8px;
    }
    
    .menu_wrap .btn_wrap a:last-child{
        margin-right: 0;
    }
    
    .menu_wrap .btn_wrap a.bg{
        color: #212121;
        background: #fff;
        border: none;
    }
    
    .menu_wrap .menu_icon{
        padding: 24px 0 30px 0;
        border-top: 1px solid #c3c3c4;
        border-bottom: 1px solid #c3c3c4;
        box-sizing: border-box;
        width: 100%;
        margin-top: 30px;
    }
    
    .menu_icon .inner{
        display: flex;
        justify-content: space-between;
        width: calc(100% - 40px);
        margin: auto;
        padding: 0;
    }
    
    .menu_wrap .menu_icon button{
        cursor: pointer;
        padding-top: 54px;
        width: 65px;
        text-align: center;
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        border: none;
    }
    
    .menu_wrap .menu_icon button.btn1{
        background: url(/image/icon_01.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn2{
        background: url(/image/icon_02.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn3{
        background: url(/image/icon_03.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn4{
        background: url(/image/icon_04.png) center top 0 no-repeat;
    }
    
    .menu_list_wrap{
        margin-top: 24px;
    }
    
    .menu_list_wrap .menu_list{
        max-height: 59px;
        overflow: hidden;
        transition: all 0.3s;
    }
    
    .menu_list_wrap .menu_list.on{
        max-height: 400px;
        padding-bottom: 24px;
        transition: all 0.3s;
    }
    
    .menu_list_wrap .menu_list.on .dept2{
        background: #090909;
    }
    
    .menu_list_wrap .menu_list > a{
        font-size: 1.8em;
        font-weight: 500;
        color: #fff;
        line-height: 60px;
        background: url(/image/menu_arrow.png) center right 0 no-repeat;
        display: block;
        width: calc(100% - 60px);
        margin: auto;
    }
    
    .menu_list_wrap .menu_list.on > a{
        background: url(/image/menu_arrow_on.png) center right 0 no-repeat;
    }
    
    .menu_list_wrap .menu_list > span {
        font-size: 1.8em;
        font-weight: 500;
        color: #fff;
        line-height: 60px;
        background: url(/image/menu_arrow.png) center right 0 no-repeat;
        display: block;
        width: calc(100% - 60px);
        margin: auto;
        cusrsor:pointer;
    }
    
    .menu_list_wrap .menu_list.on > span{
        background: url(/image/menu_arrow_on.png) center right 0 no-repeat;
    }
    
    .menu_list_wrap .menu_list .dept2{
        margin-top: 5px;
        padding: 20px 30px;
    }
    
    .menu_list_wrap .menu_list .dept2 li{
        margin-bottom: 20px;
    }
    
    .menu_list_wrap .menu_list .dept2 li:last-child{
        margin-bottom: 0;
    }
    
    .menu_list_wrap .menu_list .dept2 li a{
        font-size: 1.6em;
        color: rgba(255,255,255,0.4);
    }
    
    .menu_list_wrap .menu_list .dept2 li a.on{
        color: #fff;
    }
    
    .menu_wrap .ad_area{
        width: 100%;
        height: 110px;
        margin-top: 15px;
    }
    
    .menu_wrap .info_txt{
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
        background: #090909;
    }
    
    .menu_wrap .info_txt ul li{
        float: left;
        margin-right: 23px;
        position: relative;
    }
    
    .menu_wrap .info_txt ul li::after{
        content: "";
        display: block;
        width: 1px;
        height: 10px;
        background: rgba(255,255,255,0.3);
        position: absolute;
        top: 50%;
        right: -12px;
        transform: translate(0,-50%);
    }
    
    .menu_wrap .info_txt ul li:last-child{
        margin-right: 0;
    }
    
    .menu_wrap .info_txt ul li:last-child::after{
        display: none;
    }
    
    .menu_wrap .info_txt ul li a{
        font-size: 13px;
        font-weight: 500;
        color: #C4C4C4;
    }
    
    .user_info{
        margin-top: 40px;
    }
    
    .user_info .user_top::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .user_info .user_top .user_icon{
        width: 62px;
        height: 62px;
        line-height: 62px;
        text-align: center;
        background: url(/image/user_img.png) center no-repeat;
        float: left;
        font-size: 12px;
        font-weight: 700;
        color: #212121;
    }
    
    .user_info .user_top .user_txt{
        float: left;
        margin-left: 24px;
        position: relative;
        width: calc(100% - 86px);
    }
    
    .user_info .user_top .user_txt .hi{
        font-size: 2em;
        font-weight: 500;
        color: #fff;
    }
    
    .user_info .user_top .user_txt .name{
        font-size: 2em;
        font-weight: 700;
        color: #fff;
    }
    
    .user_info .user_top .user_txt .go_btn{
        width: 24px;
        height: 24px;
        background: url(/image/go_btn.png) center no-repeat;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
    }
    
    .user_info .user_num{
        margin-top: 30px;
    }
    
    .user_info .user_num::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .user_info .user_num .half{
        float: left;
        width: 50%;
        position: relative;
    }
    
    .user_info .user_num .half::after{
        content: "";
        display: block;
        width: 1px;
        height: 20px;
        background: rgba(255,255,255,0.3);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
    }
    
    .user_info .user_num .half:first-child .num{
        margin-right: 30px;
    }
    
    .user_info .user_num .half:last-child .tit{
        margin-left: 30px;
    }
    
    .user_info .user_num .half .tit{
        font-size: 2em;
        color: #fff;
        font-weight: 500;
        float: left;
        margin-top: 0;
    }
    
    .user_info .user_num .half .num{
        font-size: 2em;
        color: #fff;
        font-weight: 700;
        float: right;
    }
}



@media (max-width: 500px){
    #leftMenu {
        width: 80px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        border-right: 1px solid #4B4B4B;
        box-sizing: border-box;
        background: #020001;
        z-index: 10001;
    }
    
    #leftMenu .menu {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translate(-50%, 0);
        display: block;
        cursor: pointer;
        border: none;
        background: url(/image/menu.png) center no-repeat;
    }
    
    #leftMenu .menu.close{
        background: url(/image/close.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap {
        position: absolute;
        left: 50%;
        bottom: 70px;
        transform: translate(-50%, 0);
    }
    
    #leftMenu .copyright {
        position: absolute;
        left: -74px;
        bottom: 320px;
        transform: rotate(90deg);
        font-size: 12px;
        color: rgba(166, 166, 166, 0.7);
        width: 230px;
    }
    
    #leftMenu .sns_wrap button {
        display: block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-bottom: 30px;
        border: none;
    }
    
    #leftMenu .sns_wrap button:last-child {
        margin-bottom: 0;
    }
    
    #leftMenu .sns_wrap button.facebook {
        background: url(/image/facebook.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap button.youtube {
        background: url(/image/youtube.png) center no-repeat;
    }
    
    #leftMenu .sns_wrap button.instar {
        background: url(/image/instar.png) center no-repeat;
    }
    
    .menu_wrap{
        position: absolute;
        top: 60.05px;
        right: -580px;
        background: #020001;
        z-index: 10000;
        width: 100%;
        max-width: 500px;
        height: calc(100% - 7%);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
    }
    
    .menu_wrap.on{
        right: 0px;
        transition: all 0.3s;
    }
    
    .menu_wrap .inner{
        padding: 20px 20px 0 20px;
    }
    
    .menu_wrap .logo{
        width: 67px;
    }
    
    .menu_wrap .tit{
        font-size: 1.6em;
        color: #fff;
    }
    
    .menu_wrap .btn_wrap{
        margin-top: 2em;
    }
    
    .menu_wrap .btn_wrap::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .menu_wrap .btn_wrap a{
        width: 108px;
        height: 36px;
        line-height: 36px;
        display: block;
        float: left;
        text-align: center;
        color: #fff;
        font-size: 1.4em;
        font-weight: 500;
        border: 1px solid #c3c3c4;
        box-sizing: border-box;
        border-radius: 5px;
        margin-right: 8px;
    }
    
    .menu_wrap .btn_wrap a:last-child{
        margin-right: 0;
    }
    
    .menu_wrap .btn_wrap a.bg{
        color: #212121;
        background: #fff;
        border: none;
    }
    
    .menu_wrap .menu_icon{
        padding: 24px 0 30px 0;
        border-top: 1px solid #c3c3c4;
        border-bottom: 1px solid #c3c3c4;
        box-sizing: border-box;
        width: 100%;
        margin-top: 30px;
    }
    
    .menu_icon .inner{
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: auto;
        padding: 0;
    }
    
    .menu_wrap .menu_icon button{
        cursor: pointer;
        padding-top: 54px;
        width: 58px;
        text-align: center;
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        border: none;
    }
    
    .menu_wrap .menu_icon button.btn1{
        background: url(/image/icon_01.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn2{
        background: url(/image/icon_02.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn3{
        background: url(/image/icon_03.png) center top 0 no-repeat;
    }
    
    .menu_wrap .menu_icon button.btn4{
        background: url(/image/icon_04.png) center top 0 no-repeat;
    }
    
    .menu_list_wrap{
        margin-top: 24px;
        overflow-y: scroll;
        max-height: 400px;
    }
    .menu_list_wrap::-webkit-scrollbar {
        display: none;
    }
    
    .menu_list_wrap .menu_list{
        max-height: 59px;
        overflow: hidden;
        transition: all 0.3s;
    }
    
    .menu_list_wrap .menu_list.on{
        max-height: 400px;
        padding-bottom: 24px;
        transition: all 0.3s;
    }
    
    .menu_list_wrap .menu_list.on .dept2{
        background: #090909;
    }
    
    .menu_list_wrap .menu_list > a{
        font-size: 1.6em;
        font-weight: 500;
        color: #fff;
        line-height: 60px;
        background: url(/image/menu_arrow.png) center right 0 no-repeat;
        display: block;
        width: calc(100% - 40px);
        margin: auto;
    }
    
    .menu_list_wrap .menu_list span{font-size: 1.6em;font-weight: 500;color: #fff;line-height: 60px;background: url(/image/menu_arrow.png) center right 0 no-repeat;display: block;width: calc(100% - 40px);margin: auto;}
    
    .menu_list_wrap .menu_list.on > a{
        background: url(/image/menu_arrow_on.png) center right 0 no-repeat;
    }
    
    .menu_list_wrap .menu_list .dept2{
        margin-top: 5px;
        padding: 20px;
    }
    
    .menu_list_wrap .menu_list .dept2 li{
        margin-bottom: 20px;
    }
    
    .menu_list_wrap .menu_list .dept2 li:last-child{
        margin-bottom: 0;
    }
    
    .menu_list_wrap .menu_list .dept2 li a{
        font-size: 1.4em;
        color: rgba(255,255,255,0.4);
    }
    
    .menu_list_wrap .menu_list .dept2 li a.on{
        color: #fff;
    }
    
    .menu_wrap .ad_area{
        width: 100%;
        height: 110px;
        margin-top: 15px;
    }
    
    .menu_wrap .info_txt{
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        margin-top:auto;
    }
    
    .menu_wrap .info_txt ul li{
        float: left;
        margin-right: 23px;
        position: relative;
    }
    
    .menu_wrap .info_txt ul li::after{
        content: "";
        display: block;
        width: 1px;
        height: 10px;
        background: rgba(255,255,255,0.3);
        position: absolute;
        top: 50%;
        right: -12px;
        transform: translate(0,-50%);
    }
    
    .menu_wrap .info_txt ul li:last-child{
        margin-right: 0;
    }
    
    .menu_wrap .info_txt ul li:last-child::after{
        display: none;
    }
    
    .menu_wrap .info_txt ul li a{
        font-size: 10px;
        font-weight: 500;
        color: #C4C4C4;
    }
    
    .user_info{
    }
    
    .user_info .user_top::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .user_info .user_top .user_icon{
        width: 62px;
        height: 62px;
        line-height: 62px;
        text-align: center;
        background: url(/image/user_img.png) center no-repeat;
        float: left;
        font-size: 12px;
        font-weight: 700;
        color: #212121;
    }
    
    .user_info .user_top .user_txt{
        float: left;
        margin-left: 24px;
        position: relative;
        width: calc(100% - 86px);
    }
    
    .user_info .user_top .user_txt .hi{
        font-size: 2em;
        font-weight: 500;
        color: #fff;
    }
    
    .user_info .user_top .user_txt .name{
        font-size: 2em;
        font-weight: 700;
        color: #fff;
    }
    
    .user_info .user_top .user_txt .go_btn{
        width: 24px;
        height: 24px;
        background: url(/image/go_btn.png) center no-repeat;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
    }
    
    .user_info .user_num{
        margin-top: 30px;
    }
    
    .user_info .user_num::after{
        content: "";
        display: block;
        clear: both;
    }
    
    .user_info .user_num .half{
        float: left;
        width: 50%;
        position: relative;
    }
    
    .user_info .user_num .half::after{
        content: "";
        display: block;
        width: 1px;
        height: 20px;
        background: rgba(255,255,255,0.3);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
    }
    
    .user_info .user_num .half:first-child .num{
        margin-right: 30px;
    }
    
    .user_info .user_num .half:last-child .tit{
        margin-left: 30px;
    }
    
    .user_info .user_num .half .tit{
        font-size: 1.4em;
        color: #fff;
        font-weight: 400;
        float: left;
        margin-top: 0;
    }
    
    .user_info .user_num .half .num{
        font-size: 1.4em;
        color: #fff;
        font-weight: 700;
        float: right;
    }
}