#tel,
#nav-drawer {
    display: none;
}

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

    #tel {
        width: 64px;
        height: 64px;
        display: block;
        position: fixed;
        top: 0;
        right: 64px;
    }

    #tel a {
        display: block;
        color: #ffffff;
        background-color: #009250;
        height: 64px;
        line-height: 64px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }

    #tel i {
        position: relative;
        top: -5px;
    }

    #nav-drawer {
        width: 64px;
        height: 64px;
        line-height: 64px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        background-color: #3d3d3e;
        text-align: center;
    }

    /*¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹µÈ¤Ï·Ç±íʾ¤Ë*/
    .nav-unshown {
        display:none;
    }

    /*¥¢¥¤¥³¥ó¤Î¥¹¥Ú©`¥¹*/
    #nav-open {
        display: inline-block;
        width: 23px; /* 30px */
        height: 22px;
        margin: 0; /* -5px 0 0 */
        padding: 0 0 0 2px;
        vertical-align: middle;
    }

    /*¥Ï¥ó¥Ð©`¥¬©`¥¢¥¤¥³¥ó¤òCSS¤À¤±¤Ç±í¬F*/
    #nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*¾€¤ÎÌ«¤µ*/
        width: 24px;/*éL¤µ*/
        border-radius: 3px;
        background: #ffffff;
        display: block;
        content: '';
        cursor: pointer;
    }

    #nav-open span:before {
        bottom: -8px;
    }

    #nav-open span:after {
        bottom: -16px;
    }

    /*é]¤¸¤ëÓäα¡ü\¥«¥Ð©`*/
    #nav-close {
        display: none;/*¤Ï¤¸¤á¤ÏëL¤·¤Æ¤ª¤¯*/
        position: fixed;
        z-index: 99;
        top: 0;/*È«Ìå¤ËŽÚ¤¬¤ë¤è¤¦¤Ë*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }

    /*ÖÐÉí*/
    #nav-content {
        position: fixed;
        overflow-y: scroll;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 80%; /* 84% */ /*Ó҂ȤË϶ég¤ò×÷¤ë£¨é]¤¸¤ë¥«¥Ð©`¤ò±íʾ£©*/
        max-width: 296px; /* 330px *//*×î´ó·ù£¨Õ{Õû¤·¤Æ¤¯¤À¤µ¤¤£©*/
        height: 100%;
        background: #ffffff;
        transition: .3s ease-in-out;/*»¬¤é¤«¤Ë±íʾ*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*×ó¤ËëL¤·¤Æ¤ª¤¯*/
        line-height: normal;
    }

    /*¥Á¥§¥Ã¥¯¤¬Èë¤Ã¤¿¤é¤â¤í¤â¤í±íʾ*/
    #nav-input:checked ~ #nav-close {
        display: block;/*¥«¥Ð©`¤ò±íʾ*/
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*ÖÐÉí¤ò±íʾ£¨ÓҤإ¹¥é¥¤¥É£©*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }

    #nav-content h1 {
        position: static;
        width: 190px;
        margin: 7px auto !important;
        transform: translateY(0);
    }

    #nav-content h1 a {
        display: block;
    }

    #nav-content h1 a img {
        width: 100%;
        height: auto;
    }

    /***** ¥á¥Ë¥å©` *****/
    #nav-content nav {
        position: static;
        display: block;
        width: 96%;
        text-align: left;
        margin: -4px 2% 0; /* 0 2% */
        padding: 0;
        overflow: hidden;
    }

    #nav-content nav ul {
        width: 100%;
        margin: 0 0 15px;
        overflow: hidden;
    }

    #nav-content nav ul li a span {
        display: block;
        font-family: 'Cairo', sans-serif;
        text-transform: capitalize;
    }

    /*
    #nav-content nav ul li:nth-child(1),
    #nav-content nav ul li:nth-child(2) {
        border-top: 1px solid #dddddd;
    }
    */

    #nav-content nav ul li:nth-child(1) {
        list-style: none;
        width: 99.4% !important;
        float: none;
        border-top: 1px solid #dddddd;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #nav-content nav ul li {
        list-style: none;
        width: calc(50% - 1px);
        float: left;
        margin: 0;
        padding: 0;
        border-left: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }

    #nav-content nav ul li:nth-child(odd) {
        list-style: none;
        width: calc(50% - 1px);
        float: left;
        margin: 0;
        padding: 0;
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }

    #nav-content nav ul li::after {
        display: none;
    }

    #nav-content nav ul li a {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 82% !important;
        padding: 10px 0;
        display: block;
        color: #3d3d3e;
        box-sizing: border-box;
    }

    nav ul li a:hover {
        color: #213a7d;
    }

    #nav-content .box p {
        font-size: 100%;
        font-weight: bold;
        margin: 0 0 5px;
    }

    #nav-content .box span {
        display: block;
    }

    #nav-content .box {
        width: calc(96% - 2px);
        margin: 0 2% 15px;
        padding: 10px;
        border: 1px solid #dddddd;
        /*background-color: #ffffff;*/
        box-sizing: border-box;
    }

    #nav-content .box ul {
        text-align: left;
    }

    #nav-content .box p {
        line-height: 1.5;
    }

    #nav-content .box ul li {
        line-height: 1.5;
        font-size: 90%;
    }

    #nav-content .box ul li a {
        padding: 15px 0;
        display: block;
    }

    #nav-content .box ul li:nth-child(2) a {
        border-top: 1px solid #dddddd; /* #404040 */
        border-bottom: 1px solid #dddddd; /* #404040 */
    }

    #nav-content .box ul li span {
        display: block;
        text-transform: capitalize;
    }

}


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

    #nav-content nav ul li:nth-child(1) {
        width: 99% !important;
    }

    #nav-content nav {
        margin: -4px 2% 0;
    }

    #nav-content .box p {
        font-size: 100%;
    }

}