:root {
    --MobNavBtnColor:#666;
}

.mobNavBtn {
    position: fixed;
    z-index: 100;
    top:5vw;
    right:5vw;
	box-sizing:border-box;
	width:25px;
	height:24px;
	border:1px solid var(--MobNavBtnColor);
	padding:5px;
	display:flex;
	justify-content:center;
	align-items:center;
    overflow: hidden;
    &:after {
        content:"";
        display:block;
        background-color:var(--MobNavBtnColor);
        width:100%;
        height:2px;
        box-shadow:
            0 5px 0 var(--MobNavBtnColor),
            0 -5px 0 var(--MobNavBtnColor);
    }
}
/* 手机导航 */
.mobNav {
	visibility:hidden;
	opacity:0;
	position:fixed;
	inset:0;
	z-index:999;
    width:100vw;
    overflow: hidden;
	overflow-y:scroll;
	background-color:#000000bb;
	transition:all 0.5s ease;
    &.show{
        visibility:visible;
        opacity:1;
        ul {
            right:0vw;
        }
    }
    .closeBtn {
        position:fixed;
        left:10vw;
        top:10vw;
        width:10vw;
        height:10vw;
        border-radius:50%;
        border:0.2vw solid white;
        &::after {
            content:'';
            position:absolute;
            left:50%;
            top:50%;
            display:block;
            width:1px;
            height:7vw;
            background:#fff;
            transform:translate(-50%,-50%) rotate(45deg);
        }
        &::before {
            content:'';
            position:absolute;
            left:50%;
            top:50%;
            display:block;
            width:1px;
            height:7vw;
            background:#fff;
            transform:translate(-50%,-50%) rotate(-45deg);
        }
    }
    & > ul {
        margin:0;
        padding:0;
        list-style:none;
        position:absolute;
        top:0;
        right:-70vw;
        width:70vw;
        min-height:100vh;
        background-color:white;
        transition:all 0.3s ease;
        > li {
            border-bottom:1px solid #999999;
            font-size:4vw;
            line-height:3;
            text-indent:6vw;
            > a {
                color:var(--mainColor);
                text-decoration:none;
            }
            > ul {
                margin:0;
                padding:0;
                list-style:none;
                background-color:var(--mainColor);
                > li {
                    font-size:3.5vw;
                    color:white;
                    text-indent:12vw;
                    > a {
                        color:white;
                    }
                }
            }
        }
    }
}
/* 底部栏目 */
.mobBottomBar {
	position:fixed;
	z-index:8;
	bottom:0;
	width:100vw;
	background-image:linear-gradient(#474747,#303030);
	border-top:1px solid #1D1D1D;
	border-bottom:1px solid #1D1D1D;
    ul {
        display:flex;
        justify-content:space-around;
        list-style: none;
        margin:0;
        padding:10px;
        li{
            a {
                color:white;
                font-size:12px;
                text-decoration: none;
            }
            span {
                display:block;
                margin:auto;
                background:url("phone-bottom-menu.png");
                background-size:25px;
                width:25px;
                height:25px;
            }
            &:nth-child(2) span {
                background-position:0 -25px;
            }
            &:nth-child(3){
                display: none;
            }
            &:nth-child(3) span {
                background-position:0 -50px;
            }
            &:nth-child(4) span {
                background-position:0 -75px;
            }
        }
    }
}

/* 手机导航按钮 */
@media (min-width: 1000px) {
    .mobNavBtn {display: none;}
    .mobNav {display: none;}
    .mobBottomBar {display: none;}
}