.menu1 {
    position: fixed;
    z-index: 598;
    top: 0;
    right: 20%;
    bottom: 0;
    width: 60%;
    margin-right: -200%\9;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
    -webkit-transition: transform .3s;
    transition: transform .3s;
}

.menu1.on {
    margin-right: 0\9;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu1 img {
    display: block;
    width: 60%;
    max-width: 420px;
    margin: 60px auto;
}

.menu1>ul>li {
    float: left;
    width: 46%;
    /*min-height: 240px;*/
    margin: 2%;
    padding: 20px;
    background-color: #06b;
    color: #fff;
    border-radius: 4px;
    animation-duration: .3s;
}

.menu1>ul>li.home {
    display: none;
}

.menu1 li li {
    float: left;
    width: 50%;
}

.menu1 li ul {
    margin-top: 10px;
}

.menu1>ul>li>a {
    display: block;
    line-height: 40px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
}

.menu1 li li a {
    position: relative;
    display: block;
    margin: 0 10px;
    padding: 0 15px 0 25px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    border-radius: 4px;
    transition: opacity .3s;
}

.menu1 li ul:hover li:not(:hover) a {
    opacity: 0.5;
}

.menu1 li li a:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #fff;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 10px;
}

.menu1>ul>li:nth-child(1) {
    animation-delay: .4s;
}

.menu1>ul>li:nth-child(2) {
    animation-delay: .5s;
}

.menu1>ul>li:nth-child(3) {
    animation-delay: .6s;
}

.menu1>ul>li:nth-child(4) {
    animation-delay: .7s;
}

.menu1>ul>li:nth-child(5) {
    animation-delay: .8s;
}

.menu1-btn {
    display: block;
    position: fixed;
    bottom: 120px;
    right: 10px;
    z-index: 599;
    width: 88px;
    height: 88px;
    padding: 24px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    background: url(/material/images/menu.png) center no-repeat;
    color: #fff;
}

.menu1-btn>b {
    display: block;
    width: 40px;
    height: 40px;
    transition: transform .3s;
}

.menu1-btn.on b {
    line-height: 0;
    font-size: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA5LTE3VDE1OjMzOjM0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wOS0xN1QxNTozNDowNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wOS0xN1QxNTozNDowNCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MDY1NzE0My1hZGIwLTBmNDctOTI3OC1mNzA3MTE3NmZjZTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzA2NTcxNDMtYWRiMC0wZjQ3LTkyNzgtZjcwNzExNzZmY2U3IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NzA2NTcxNDMtYWRiMC0wZjQ3LTkyNzgtZjcwNzExNzZmY2U3Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MDY1NzE0My1hZGIwLTBmNDctOTI3OC1mNzA3MTE3NmZjZTciIHN0RXZ0OndoZW49IjIwMTktMDktMTdUMTU6MzM6MzQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5/rxV8AAABA0lEQVRIibWUsW3DMBBFv7SCiiDxMCo1RJLGExiwVtE0LlS7DBAD8QL2AE7/UuSYEIIkXkjngIMI8u49ENKpAvSfUdvzVdJBUnsHZmusZ0kSIOCd7/gAGtvLycYYAG/Aj2DHb5wzJY31htjFAgH7AskUvg9n08IcySJ8TvBXySp8SeCVJOFrgpTEBU8J5iS1pQvuEUwlR0sX3CsQsAVuEfhme8neCtz/ooukR1tfJT15mup0iRpJpwguW5/sbD0SV5x+LS+W8YtfHcbcCXUPY/aEeiW5cLekBO6SlMKTklCwKYAvSTaxYCyEz0nGWDAAn0BfAA/ZG2uIBQ9Adwd4yM6Y+gIsJSD6TQ2Y9QAAAABJRU5ErkJggg==) center no-repeat;
    transform: rotateZ(180deg);
}

.menu1-btn>span {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: .25s;
}

.menu1-btn>span:nth-child(1) {
    top: 36px;
}

.menu1-btn>span:nth-child(2) {
    top: 42px;
}

.menu1-btn>span:nth-child(3) {
    top: 48px;
}

.menu1-btn.on span,
.hd+.menu1-btn>span {
    background: #fff;
}

.menu1-btn.on span:nth-child(1) {
    top: 42px;
    transform: rotate(45deg);
}

.menu1-btn.on span:nth-child(2) {
    opacity: 0;
    transform: rotate(90deg);
}

.menu1-btn.on span:nth-child(3) {
    top: 42px;
    transform: rotate(135deg);
}
@media (max-height: 720px) and (min-width:1024px) {
    .menu1 img {
        width: 40%;
        margin: 20px auto;
    }

    .menu1 ul {
        /*max-height: 620px;*/
        overflow-x: hidden;
        overflow-y: auto;
    }

    .menu1>ul>li {
        /*min-height: 320px;*/
    }

    .menu1 li li a {
        line-height: 40px;
    }
}

@media (max-height: 1080px) and (min-width: 1024px){
    .menu1 ul {
        /*max-height: 500px;*/
        overflow-x: hidden;
        overflow-y: auto;
    }
}
@media (max-height: 720px) and (min-width: 1024px){
    .menu1 ul {
        /*max-height: 510px;*/
    }
}

@media (max-width: 1200px) {
    .menu1-btn {
        position: absolute;
        bottom: auto;
        top: 0px;
        right: -20px;
        background: none;
    }

    .menu1 {
        width: 90%;
        right: 5%;
    }

    .menu1 img {
        margin: 60px 0;
    }

    .modal-open .header h1 {
        background: none;
    }

    .menu1>ul>li.home {
        display: block;
        width: 96%;
        text-align: center;
    }

    .menu1>ul>li {
        min-height: inherit;
        padding: 10px;
    }

    .menu1 li ul {
        display: none;
    }

    .menu1-btn>b {
        display: none;
    }

    .menu1-btn>span {
        display: block;
    }
}

@media (max-width: 360px) {
    .menu1 li a {
        text-align: center;
    }

    .menu1 li a i {
        display: block;
        margin: 0 auto;
    }
}
.menu1 li li{
	width: 33.33% !important;
}
@media (max-width: 768px) {
	.menu1,.menu1-btn,.mask{
	display:none
}
}
.mask {
    display: none;
    position: fixed;
    z-index: 597;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity .2s;
}
.mask.on {
    display: block;
    opacity: 1;
}