.nav {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    height: 100vh;
}
    .nav a {
        box-sizing: border-box;
    }

    .nav li {
        position: relative;
    }

    .nav .hd {
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 27px;
        width: 24px;
        height: 24px;
        border-radius: 12px;
    }

    .nav .bd a[href] {
        color: #fff;
    }

        .nav .hd::before {
            content: '';
            position: absolute;
            left: -1px;
            top: -1px;
            display: block;
            width: 26px;
            height: 26px;
            background: url(../images/oval-in.svg) center no-repeat;
            background-size: contain;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .nav .hd::after {
            content: '';
            position: absolute;
            left: -5px;
            top: -5px;
            display: block;
            width: 34px;
            height: 34px;
            background: url(../images/oval-out.svg) center no-repeat;
            background-size: contain;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .nav .hd:hover::before {
            -webkit-transform: rotate(-270deg);
            transform: rotate(-270deg);
        }

        .nav .hd:hover::after {
            -webkit-transform: rotate(540deg);
            transform: rotate(540deg);
        }

        .nav .hd a {
            position: relative;
            z-index: 2;
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            background: url(../images/menu-c.svg) center no-repeat;
            cursor: pointer;
        }

            .nav .hd a::before {
                content: '';
                position: absolute;
                left: 6px;
                top: 11px;
                width: 6px;
                height: 2px;
                background-color: #2BD9E6;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

            .nav .hd a::after {
                content: '控制台';
                position: absolute;
                top: 0;
                right: -59px;
                font-size: 15px;
                line-height: 24px;
                color: #38e2fb;
                font-weight: 500;
            }

            .nav .hd a.active::before {
                width: 12px;
            }

    .nav .bd {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh;
        padding-top: 70px;
        /*display: none;*/
        /*background-color: rgba(0, 0, 0, 0.2);*/
        /*background-image: -webkit-gradient(linear, left bottom, left top, from(#09387c), to(rgba(6, 12, 27, 0.9)));
	background-image: linear-gradient(0deg, #09387c 0%, rgba(6, 12, 27, 0.9) 100%);*/
        background: rgba(40,56,106,.95);
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        color: #fff;
        font-size: 14px;
    }

        .nav .bd.active {
            width: 200px;
            height: 100%;
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .nav .bd .scroll {
            height: calc(100vh - 70px);
        }

            /*.nav .bd .scroll>ul {
	height: calc(100vh - 50px);
}*/

            .nav .bd .scroll > ul::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: rgba(44, 224, 232, 0.2);
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }

            .nav .bd .scroll > ul > li a {
                display: block;
                width: 100%;
                height: 100%;
            }

            .nav .bd .scroll > ul > li > a {
                padding-left: 45px;
            }

            .nav .bd .scroll > ul > li > ul > li + li {
                border-top: 1px solid #1e2649;
            }

            .nav .bd .scroll > ul > li a:hover {
                background-image: -webkit-gradient(linear, left top, right top, from(rgba(37, 96, 211, 0.00)), to(rgba(55, 190, 229, 0.15)));
                background-image: linear-gradient(90deg, rgba(37, 96, 211, 0.00) 0%, rgba(55, 190, 229, 0.15) 100%);
            }

            .nav .bd .scroll > ul > li::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background: rgba(44, 224, 232, 0.2);
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }

            .nav .bd .scroll > ul li.active a {
                border-right: 2px solid #2BD9E6;
                color: #2BD9E6;
            }

            .nav .bd .scroll > ul li.active i {
                color: #2BD9E6;
            }

            .nav .bd .scroll ul li.fold::before {
                content: '';
                position: absolute;
                right: 14px;
                top: 16px;
                width: 0;
                height: 0;
                border-style: solid;
                border-color: transparent transparent transparent #fff;
                border-width: 4px 0 4px 4px;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

            .nav .bd .scroll ul li.fold-o::before {
                -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }

            .nav .bd .scroll > ul > li > i {
                position: absolute;
                left: 12px;
                font-size: 12px;
                line-height: 45px;
            }

            .nav .bd .scroll > ul > li > a {
                /*font-weight: 600;*/
                line-height: 45px;
            }

            .nav .bd .scroll > ul > li ul {
                background: rgba(31,43,83,.9);
            }

            .nav .bd .scroll > ul > li > ul > li > a {
                padding-left: 42px;
                line-height: 45px;
            }

                .nav .bd .scroll > ul > li > ul > li > a::before {
                    content: '';
                    position: absolute;
                    left: 32px;
                    top: 0;
                    width: 1px;
                    height: 45px;
                    background: rgba(44, 224, 232, 0.2);
                }

                .nav .bd .scroll > ul > li > ul > li > a::after {
                    content: '';
                    position: absolute;
                    left: 32px;
                    top: 22px;
                    width: 8px;
                    height: 1px;
                    background: rgba(44, 224, 232, 0.2);
                }

            .nav .bd .scroll > ul > li > ul > li:last-child > a::before {
                height: 22px;
            }

            .nav .bd .scroll > ul > li > ul > li > ul > li > a {
                padding-left: 52px;
                line-height: 34px;
                font-size: 12px;
            }

                .nav .bd .scroll > ul > li > ul > li > ul > li > a::before {
                    content: '';
                    position: absolute;
                    left: 42px;
                    top: 0;
                    width: 1px;
                    height: 34px;
                    background: rgba(44, 224, 232, 0.2);
                }

                .nav .bd .scroll > ul > li > ul > li > ul > li > a::after {
                    content: '';
                    position: absolute;
                    left: 42px;
                    top: 17px;
                    width: 8px;
                    height: 1px;
                    background: rgba(44, 224, 232, 0.2);
                }

            .nav .bd .scroll > ul > li > ul > li > ul > li:last-child > a::before {
                height: 17px;
            }