input#navcheck, #navcheck + label {display: none}

@media screen and (max-width: 880px) {
    
    body {font-size: 15px; line-height: 1.75rem;}
    .nav, .sub {text-align: center; float: none; width: 100%; margin: 0;}
    
    #navcheck + label {
        display: inline-block; 
        width: 50px;
        height: 50px; 
        border: 2px solid #f4d3bc;
        border-radius: 25px; 
        position: relative; 
        top: -25px; background: #fff;
    transition: all .4s ease-in-out;}
    
    
    #navcheck + label span, #navcheck + label span::before, #navcheck + label span::after {
        display: inline-block; 
        content: "";
        width: 40px; 
        height: 4px;
        top: 8px;
        background: #aaa; 
        position: relative;
    box-shadow: 0 4px 4px rgba(0,0,0,.2);
    transition: all .4s ease-in-out;}
    
    #navcheck + label span::before, #navcheck + label span::after {
        position: absolute; 
        top: -10px; 
        left: 5px; 
        width: 30px;}
    
    #navcheck + label span::after {top: 10px;}
    
    #navcheck ~ .nav {max-height: 0; overflow: hidden; transition: all .4s ease-in-out}
    #navcheck:checked ~ .nav {max-height: 800px; overflow: hidden}
    
    #navcheck:checked ~ label span {transform: rotate(45deg); 
    box-shadow: 2px 2px 4px rgba(0,0,0,.2);}
    #navcheck:checked ~ label span::before, #navcheck:checked ~ label span::after {transform: rotate(90deg); top: 0; width: 40px; left: 0;
    box-shadow: 2px -2px 4px rgba(0,0,0,.2);}
    
    * {box-sizing: border-box; float: none;}
    #wrapper, #footer, .head, .logo, .wl, .content {width: 100%;}
    .logo {text-align: center;}
    .logo img, .slogan {max-width: 90%;}
    .wl {}
    .header, .nav ul li, .nav ul li ul li, .nav h3 {
    text-align: center;
}
    
    .contentinner p {text-align: left}
    
    .header img {width: 100%;}
    
    .nav a {padding: 8px 0; line-height: 2.5rem; border-top: 1px dotted #aaa; display: inline-block;}
    .contentinner {width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 15px;}
    .contentinner .block1, .contentinner .block2 {float: none; width: 100%;}
    .footer, .footerinner, .footerinner ul {width: 100%; padding: 0; text-align: center; height: auto;}
    .footer { box-shadow: 0 -5px 10px rgba(0,0,0,.2)}
    .footerinner ul li {display: block; float: none; margin: 0; padding: 0; line-height: 3.5rem; box-shadow: inset 0 -5px 10px rgba(0,0,0,.2)}
}