/* 导航栏做居中处理 */
#nav-right{
    flex:1;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}

#nav.show {
    display: flex;
    justify-content: center;
}

#nav .site-page {
    padding-bottom: 14px;
}
#page-header.not-top-img #nav {
    display: flex;
    justify-content: center;
}

#nav-group {
    width: 1400px;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    margin-left: auto;
    margin-right: auto;
}
/* 顶部栏宽度定义 */

#nav .menus_items .menus_item .menus_item_child {
    margin-top: 14px;
}
#nav .menus_items .menus_item .menus_item_child li a {
    /* padding: 6px 15px; 修改这个为正常值，原0 23 */
    padding-top: 6px; /* 上方padding为 6px */
    padding-right: 18px; /* 右方padding为 15px */
    padding-bottom: 6px; /* 下方padding为 6px */
    padding-left: 15px; /* 左方padding为 15px */
    text-align: center;
}
#nav #travellings {
    padding: 0 14px 0 ;
}

#nav #ten-years {
    padding: 0 14px 0 0;
}

/* 添加横向布局 */
nav.show:not(.hide-menu) .menus_item_child li:not(#sidebar-menus li){
    float: left;
    border-radius: 13px!important;
    -webkit-border-radius: 13px!important;
    -moz-border-radius: 13px!important;
    -ms-border-radius: 13px!important;
    -o-border-radius: 13px!important;
}
nav.show:not(.hide-menu) .menus_item_child:not(#sidebar-menus ul){
  /*
    left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调
  改为：*/
  left:50%;
  translate:-50%;
}

/* 添加边界和圆角 */
#nav .menus_items .menus_item .menus_item_child {
    padding: 7px 7px; /* 10px的左右padding */
    border-radius: 20px; /* 添加10px的圆角 */
}

#nav #page-name {
    position: relative;
    padding: 10px 30px /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
}

/*显示标题*/
#nav #page-name::before {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    color: #4C4948;
    top: 0;
    left: 0;
    content: '回到顶部';
    background-color: #ffffff;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    opacity: 0;
    line-height: 45px;
    /* 添加边框 */
    border: 1px solid #4C4948; /* 你可以根据需要调整边框颜色和宽度 */
}

[data-theme=dark] /*显示标题*/
#nav #page-name::before {
    color: #B9BABB;
    background-color: #000000;
    border: 1px solid #B9BABB; /* 你可以根据需要调整边框颜色和宽度 */
}


#nav #page-name:hover:before {
    opacity: 1;
}

#nav #name-container {
    transition: opacity 1.2s ease, transform 1.2s ease;
    opacity: 0; /* 初始化为隐藏 */
    transform: translateY(-80px); /* 向上移动一些，使其开始时不可见 */
    z-index: 1; /* 初始化层级为 1 */
    position: absolute; /* 让元素在同一位置上叠加 */
}

#nav .menus_items {
    transition: opacity 1.2s ease, transform 1.2s ease;
    opacity: 0; /* 初始化为隐藏 */
    transform: translateY(-80px); /* 向上移动一些，使其开始时不可见 */
    z-index: 1; /* 初始化层级为 1 */
    position: absolute; /* 让元素在同一位置上叠加 */
}

/* 当元素显示时，重置 transform 和 opacity */
#nav #name-container.visible {
    opacity: 1;
    z-index: 2;
    transform: translateY(0);
}
#nav .menus_items.visible {
    opacity: 1;
    z-index: 2;
    transform: translateY(0);
}

/* 显示隐藏 */
@media (max-width: 870px) {
    #nav #page-name {
        display:none;
    }
}