/* 顶栏开始 */
.app-content {
    padding-top: 60px;
}

.header {
    height: 60px;
    overflow: hidden;
}

.Topbar {
    /* 设置宽度 */
    width: 100%;
    /* 设置颜色 */
    color: var(--font-color);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 20px var(--box-shadow-1), 5px 5px 20px var(--box-shadow-2);
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    justify-content: space-between !important;
}

.mu-appbar-title {
    /* 设置文本的粗细 */
    font-weight: 600;
    padding: 0;
}

.Topbar .logo {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    flex-shrink: 0;
}

.Topbar .logo img {
    max-width: 100%;
    height: 2.25rem;
    vertical-align: middle;

}

/* 打开侧边按钮 */
.Topbar .Left_button {
    /* 设置宽度 */
    width: 48px;
    /* 设置高度 */
    height: 48px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 设置字体大小 */
    font-size: 20px;
    /* 给鼠标添加可点击样式：一个手指 */
    cursor: pointer;
}

/* 侧边栏开始 */
.sidebar {
    /* 设置宽度 */
    width: 100%;
    /* 设置高度 */
    height: 100%;
    /* 设置背景颜色 */
    background-color: var(--body-bg);
}

/* 侧边栏logo */
.sidebar .sidebar_logo img {
    /* 设置宽度 */
    width: 50%;
    /* 设置高度 */
    height: 50%;
    /* 设置顶部外间距 */
    margin-top: 25px;

}

.sidebar .sidebar_button button {
    /* 根据父元素的位置居中 */
    /*  上   右   下   左 */
    margin: 10px 0px 10px 0px;
    /* 设置宽度 */
    width: 80%;
    /* 设置高度*/
    height: 48px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
}

/* 设置按钮中的span标签样式 */
.sidebar .sidebar_button span {
    /* 设置字体大小 */
    font-size: 16px;
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 根据父元素的位置居中 */
    /* margin: 0 auto; */
    text-align: center;
    /* 设置左边距 */
    margin-left: 20px;
    /* 向左浮动 */
    float: left;
}

/* 设置按钮中的span标签中的i标签样式 */
.sidebar .sidebar_button button span i {
    /* 设置元素的粗细 */
    font-weight: 600;
    /* 设置外右边距 */
    margin-right: 6px;
}

/* 侧边栏结束 */


/* 登录、注册按钮 */
.Topbar .logon_register {
    /* 设置宽度 */
    width: 76px;
    /* 设置高度 */
    height: 40px;
    /* 设置字体大小 */
    font-size: 10px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 给鼠标添加可点击样式：一个手指 */
    cursor: pointer;
}

.Topbar .log_reg_button {
    /* 定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
    cursor: pointer;
    /* 设置宽度 */
    width: 48px;
    /* 设置高度 */
    height: 48px;
    /* 设置字体大小 */
    font-size: 20px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 给鼠标添加可点击样式：一个手指 */
    cursor: pointer;
}

.Topbar .log_reg_menu {
    /* 设置颜色 */
    color: var(--font-color);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 20px var(--box-shadow-1), 5px 5px 20px var(--box-shadow-2);
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
}

.el-dropdown-menu {
    /* 设置颜色 */
    color: var(--font-color);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 20px var(--box-shadow-1), 5px 5px 20px var(--box-shadow-2);
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    border: 0px;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: var(--Neumorphism-bg);
}

.el-dropdown-menu__item {
    color: var(--font-color);
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: transparent;
    color: var(--font-color);
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}

.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: var(--Neumorphism-bg);
}

.el-drawer__body {
    background-color: var(--Neumorphism-bg);
}

/* 顶栏结束 */

/* 顶部图片 */
.Top_Picture {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    height: 25rem;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    position: relative;
}

/* 顶部图片内标题 */
.Top_Picture .Top_title {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 0;
    letter-spacing: .05em;
    color: var(--Neumorphism-bg);
}

/* 顶部图片内副标题 */
.Top_Picture .Top_content {
    font-size: .75rem;
    line-height: 1rem;
    margin-top: 1rem;
    letter-spacing: .05em;
    color: var(--Neumorphism-bg);
}

.log_reg_button_xs {
    /* 默认隐藏 */
    display: none;
}

.log_reg_button_sm {
    /* 默认显示 */
    display: block;
}

/* 当屏幕大于768像素时的样式 */
@media (min-width: 768px) {
    .Topbar .logo .dark_logo {
        display: block;
    }

    .Topbar .logo .light_logo {
        display: none;
    }

    .Top_Picture .Top_title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .Top_Picture .Top_content {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .log_reg_button_xs {
        display: block;
    }

    .log_reg_button_sm {
        display: none;
    }
}