@media screen and ( max-width : 991px ) {
    aside {
        padding: 50px 20px;
        width: 250px;
        min-width: 250px;
    }
    main { width: calc(100vw - 250px); }
    .cardInfo { display: block; }
    .cardInfo .card, .cardInfo .detail, .cardInfo .detail a { width: 100%; max-width: initial; }
    .cardInfo img { display: none; }
    .inputDiv label { width: 175px; }
    .inputDiv .data, .inputDiv input { width: calc(100% - 175px); }
}
@media screen and ( max-width : 767px ) {
    aside {
        width: 85px;
        min-width: 85px;
        padding: 20px;
    }
    aside .userInfo .userDetail { display: none; }
    aside ul li a span { display: none; }
    aside:hover { width: 250px; min-width: 250px; }
    aside:hover > .userInfo .userDetail { display: block; }
    aside:hover > ul li a span { display: block; }
    main { width: calc(100vw - 85px); padding: 20px; }
}
@media screen and ( max-width : 650px ) {
    .inputDiv { display: block; }
    .inputDiv label, .inputDiv .data, .inputDiv input { width: 100%  }
}
@media screen and ( max-width : 400px ) {
    main { padding: 10px; }
}