﻿/*导航栏CSS K*/

html{
    overflow-y:scroll;
    -webkit-text-size-adjust:100%
}
html *{
    -webkit-tap-highlight-color:transparent;
    -webkit-tap-highlight-color:transparent
}
html,body{
    /*font-family:sans-serif;*/
    -webkit-overflow-scrolling:touch
}
body,div,ul,ol,li,footer,header,nav,section{
    margin:0;
    padding:0
}

ul,ol{
    list-style:none
}


html {
    background: #f3f3f3;
}
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
}
body {
    max-width: 1000px;
    margin: 0 auto;
}


/*************************/


@media only screen and (max-width: 359px){
    .nav-container{
        font-size:12px
    }
}
@media only screen and (min-width: 360px) and (max-width: 374px){
    .nav-container{
        font-size:13px
    }
}
@media only screen and (min-width: 375px) and (max-width: 399px){
    .nav-container{
        font-size:14px
    }
}
@media only screen and (min-width: 400px) and (max-width: 413px){
    .nav-container{
        font-size:15px
    }
}
@media only screen and (min-width: 414px) and (max-width: 479px){
    .nav-container{
        font-size:15px
    }
}
@media only screen and (min-width: 480px) and (max-width: 539px){
    .nav-container{
        font-size:18px
    }
}
@media only screen and (min-width: 540px) and (max-width: 639px){
    .nav-container{
        font-size:20px
    }
}
@media only screen and (min-width: 640px) and (max-width: 719px){
    .nav-container{
        font-size:24px
    }
}
@media only screen and (min-width: 720px){
    .nav-container{
        font-size:26px
    }
}


/*************************/


   .nav-container {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    max-width: 1000px;
    margin: 0 auto;
    background: #e04f4c;
    height: 2.5em;
    position: relative;
    line-height: 1.6em;
    font-family: -apple-system, "\82F9\65B9-\7B80", Helvetica Neue, Helvetica, STHeitiSC-Light, Arial, sans-serif;
            }


        .nav-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            padding: 0 20px;
        }


.nav-links li {
    list-style: none;
}


ul.nav-links.active {  
    z-index: 1000; /* 确保菜单覆盖其他内容 */  
} 

.logo {
    background-size: auto 2em;
    width: 4.31578947368em;
    height: 2em;
    text-decoration: none;
    background-image: url(/index/images/logo.png);
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

        .nav-links {
            display: flex;
            gap: 0.6em;
            list-style: none;
            transition: max-height 0.3s ease; /* 优化过渡效果‌:ml-citation{ref="1" data="citationList"} */
            box-sizing: border-box;
        }

        .nav-links a {
            color: #ffffff;
            text-decoration: none;
            padding: 0.1em;
            transition: color 0.3s;
            font-size: 0.65em;
    font-weight: 550;
        }

        .hamburger {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 2em;
            cursor: pointer;
            padding: 0.15em;
        }



@media (min-width: 768.1px) and (max-width: 880px) {
  .nav-links {gap: 0.445em;}
}



@media (max-width: 820px) {
.nav-links a {font-size: 0.6em;}
}

@media (max-width: 768px) {
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* 完全透明 */
    z-index: 900; /* 确保在其他内容之上但低于菜单 */
    display: none; /* 默认隐藏 */
}

.nav-container {
     height: 4em; /* 固定高度避免抖动‌:ml-citation{ref="2" data="citationList"} */
     position: relative;
     position: fixed;
     z-index: 905;
     width: 100%;
     isolation: isolate;
     top: 0;
}

section.calendar {margin-top: 4.2em;}

     .logo {
    background-size: auto 3.44444em;
    width: 7.43265263157em;
    height: 3.44444em;
    text-decoration: none;
     }
            .nav-links {
                position: fixed;
                top: 4em !important; /* 强制紧贴父容器底部 */
                /*top: 60px; /* 对齐导航栏高度‌:ml-citation{ref="2" data="citationList"} */
                right: -100%;
                width: 53%;
                /*height: 50%;*/
                height: calc(100vh - 60px); 
                background: #bf100dcf;
                flex-direction: column;
                padding: 2em 1em;
                box-shadow: -5px 0 15px rgba(0,0,0,0.2);
                z-index: 1000;
                transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 贝塞尔曲线优化‌:ml-citation{ref="4" data="citationList"} */
            }
        .nav-links {
            gap: 1.6em;
        }
            .nav-links.active {
                right: 0;
            }

            .hamburger {
                display: block;
                z-index: 2000;
            }

            /* 按钮动画优化 */
            .hamburger::after {
                content: "☰";
                display: inline-block;
                transition: transform 0.3s;
            }
            .hamburger.active::after {
                content: "×";
                transform: rotate(180deg) scale(1.2);
            }

        .nav-links a {
    font-size: 1.1em;
        }

.nav-links {
    padding-top: max(12px, env(safe-area-inset-top));
}

        }



@media (max-width: 768px) {
  .nav-links {
    /* 核心高度控制 */
  height: 55vh;           /* 传统视口单位兜底 */
  height: 55dvh;           /*动态调整优先 */
  max-height: 55svh;      /* 限制在小视口模式的高度 */
  max-height: 55dvh;      /* 覆盖旧浏览器无法识别的 svh */
  max-height: 55vh;      /* 覆盖旧浏览器无法识别的 vh */

    
    /* 定位优化 */
   /* top: calc(100% + 1px);  消除亚像素缝隙 */
    /*margin-top: -1px;  反向补偿 */
    
    /* 滚动支持 */
    overflow-y: auto;
    scrollbar-gutter: stable;
    
    /* 兼容性适配 */
    @supports not (height: 53dvh) {
      height: calc(53svh - env(safe-area-inset-top));
    }
  }
}


/* 折叠屏设备 */
@media (spanning: single-fold-vertical) {
  .nav-links {
    height: calc(53dvh - env(fold-height));
  }
}







/*************************/


@media only screen and (max-width: 359px){
    .t-top  {font-size: 12px;}
    .nav-top {font-size: 12px;}
}
@media only screen and (min-width: 360px) and (max-width: 374px){
    .t-top  {font-size: 13px;}
    .nav-top {font-size: 13px;}
}
@media only screen and (min-width: 375px) and (max-width: 399px){
    .t-top  {font-size: 14px;}
    .nav-top {font-size: 14px;}
}
@media only screen and (min-width: 400px) and (max-width: 413px){
    .t-top {font-size: 15px;}
    .nav-top {font-size: 15px;}
}
@media only screen and (min-width: 414px) and (max-width: 479px){
    .t-top  {font-size: 15px;}
    .nav-top {font-size: 15px;}
}
@media only screen and (min-width: 480px) and (max-width: 539px){
    .t-top  {font-size: 18px;}
    .nav-top {font-size: 18px;}
}
@media only screen and (min-width: 540px) and (max-width: 639px){
   .t-top {font-size: 20px;}
   .nav-top {font-size: 20px;}
}
@media only screen and (min-width: 640px) and (max-width: 719px){
.t-top {font-size: 24px;}
.nav-top {font-size: 24px;}
}
@media only screen and (min-width: 720px){
.t-top {font-size: 26px;}
.nav-top {font-size: 26px;}
}


/*************************/



.h-top{margin-top:0.55em;}

@media (max-width: 768px) {
    .h-top{margin-top:4.6em;}
}


.h-bottom{margin-top:0.55em;}


.nav-top {
    margin-top: 0.55em;
}

@media (max-width: 768px) {
    .nav-top {
        margin-top: 4.2em;
    }
}



/****/


.nav-links li a {
    padding: 0.5em 0.5em;
}

.nav-links li a:hover {
    background: #fff;
    color: #d2514c;
    border-radius: 5px;
}

.nav-links li a.nav-active {
    background: #fff;
    color: #d2514c;
    border-radius: 5px;
}

.nav-links li a.nav-active:hover {
    background: #fff;
    color: #d2514c;
    border-radius: 5px;
}

/*导航栏CSS j*/


/*把time隐藏掉*/
.nav-links li a[href="/time/"] {
    display: none;
}

