zz
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    img.table-content-dot {
        background: transparent !important;
    }
    #head{
        margin-top: 70px;
    }
    @font-face {
        font-family: 'headfont';
        src: url('https://static.igem.wiki/teams/5918/font/belgant-aesthetic.otf') format('otf'),
        url('https://static.igem.wiki/teams/5918/font/belgan-aesthetic.woff2') format('woff2');
        /* font-weight: 900; */
        font-style: normal;
        font-display: swap; /* 控制字体加载期间的显示行为 */
      }
      @font-face {
        font-family: 'contentfont';
        src: url('https://static.igem.wiki/teams/5918/font/eina01-semibold.ttf') format('ttf'),
        url('https://static.igem.wiki/teams/5918/font/eina01-semibold.woff2') format('woff2');
        /* font-weight: 900; */
        font-style: normal;
        font-display: swap; /* 控制字体加载期间的显示行为 */
      }
      /* @font-face {
        font-family: 'normalfont';
        src: url('../font/Nexa-Heavy.ttf') format('ttf'),
        url('../font/Nexa-Heavy.woff2') format('woff2');
        font-style: normal;
        font-display: swap; 
      } */
    html{
        scroll-behavior: smooth;
    }
    #Reference a {
        word-wrap: break-word;
        display: inline-block;
        max-width: 60vw;
    }
    b{
        font-family:'Eina01-SemiBold';
        color:#ff9bb3;
    }
    u{
        text-decoration: underline #ff9bb3 wavy 3px;
        text-underline-offset: 8px;
    }
    mark{
        background-color: yellow;
    }
    .toumingdi{
        box-shadow: none!important;
        background-color: transparent!important;
    }
    a{
        font: inherit;
        color:inherit ;
        text-decoration: none;
    }
    body{
        overflow-x: hidden;
    }
    mjx-container[jax="SVG"] > svg {
        overflow: visible;
        min-height: 1px;
        min-width: 1px;
        max-width: 50ex !important;
        max-height: 8ex !important;
    }
    /* head 区样式 */
    #head {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        height: 40vh;
        width: 100%;

        background-color: #fffefe;
        background-size: 100%;
    }
    .page-title h1{
        position: relative;
        width:87vw ;
        height: auto;
        font-size: min(10vw,110px);
        font-weight: 600;
        color: #edbed2;
        /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
        font-family: 'headfont';

        /* 兼容性优化 */
        text-shadow: 
            -3px -3px 0 #fffefe,
            3px -3px 0 #fffefe,
            -3px 3px 0 #fffefe,
            3px 3px 0 #fffefe;
        
        /* 确保字体加载 */
        font-display: swap;
        /* white-space: nowrap; */
        letter-spacing: 0.05em;
        z-index: 2;

    }
    .last-two-word{
        display: inline-block;
        position: relative;
        height: 100%;
        width: 20vw;
        white-space: nowrap;
    }

    
    .last-danci{
        white-space: nowrap;
    }
    
    .last-two-word::after {
        content: "";
        position: absolute;
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%);
        right: 8vw; /* 向右偏移 */
        width:200px;
        height: 200px;
        background: url('https://static.igem.wiki/teams/5918/main-pic/headquan.webp') no-repeat center/contain;
        filter: drop-shadow(0 0 5px rgba(237, 190, 210, 0.8));
        z-index: -1;
        transition: all 0.1s;
    }
    .page-pic{
        position: absolute;
        top: 2%;
        right: 5vw;
        height: 100%;
        z-index: 0;

    }
    .page-pic img{
        height: 98%;
    }

    #content{ 
        position: relative;
        height: max-content;
        display: flex;
        background: linear-gradient(to bottom, #fffefe 0%, #f8e5ec 50%);
        background-size: 70%;
        padding-bottom: 80px;
    }
    
    /* 侧边栏样式 */
    #sider-bar{
        width: 21vw;
        /* height: min(max-content,50vh); */
        height: max-content;
        max-height: 80vh;
        position: sticky;
        top: 15vh;
        /* overflow-y: scroll; */
        overflow-y: auto;
        overflow-x: hidden;
    }
    .sider-bar-content{
        position: sticky;

        background: linear-gradient(to bottom, #ccc7d9 20%, #f0bccb 70%);
        opacity: 80%;
        border-radius: 0% 50% 100% 0% / 51% 0% 43% 50%;
        
        top: 25vh;

        margin:12.5%;
        padding-left: 10px;
        width: 75%;

        height: max-content;

    }
    #sider-bar::-webkit-scrollbar {
      width: 12px;               /* 垂直滚动条宽度 */
      height: 12px;              /* 水平滚动条高度 */
    }

    /* 滚动条轨道 */
    #sider-bar::-webkit-scrollbar-track {
      background: linear-gradient(135deg, #fdf2f8 0%, #f8f9ff 50%, #e8f4fd 100%);        /* 轨道背景色 */
      border-radius: 10px;         /* 轨道圆角 */
    }

    /* 滚动条滑块 */
    #sider-bar::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #f2bdda 0%, #ced4f7 50%, #add3f0 100%);          /* 滑块颜色 */
      border-radius: 10px;         /* 滑块圆角 */
      border: 1px solid #f1f1f1;   /* 滑块边框（与轨道背景色相同，形成间隔效果） */
    }
    .sider-bar-content a:last-child {
        margin-bottom: 7vw;
    }
    .sider-bar-content{
        padding-top: 1vw;
        padding-bottom: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .sider-bar-content::after{
        content: '';
        position: absolute;
        left:-2.4vw;
        bottom: -2.4vw;
        height:5vw;
        width:5vw;
        background: url('https://static.igem.wiki/teams/5918/main-pic/siderstar.svg') no-repeat center / contain;
        filter: drop-shadow(4px 3px 3px rgba(246, 242, 244, 0.6));
        /* offset-path: path("M 0 -20 L 210 -20 L 210 210 A 210 175 0 0 1 0 367 L 0 367"); */
        /* animation: moveAlongPath 2s ease-in forwards; */
    }
     
 
    .sider-bar-content a{
        display: flex;
        position: relative;
        align-items: center;
        color: white;
        font-size: 1.5rem;
        letter-spacing: 0.1vw;
        font-weight: 600;
        padding: 5px;
        padding-left: 10px;
    
        border-radius: 15px;
        transform: translate(0,0);
        transition: all 0.3s linear;
        cursor: pointer;

        font-family: 'headfont';
        /* font-family:'contentfont'; */
    }
    .sider-bar-content>a{
        width: 80%;
        margin-top: 1vw;
        /* margin-bottom: 1vw; */
        flex: 1;
        align-content: center;
    }
    .sider-bar-content>a:hover{
        transform: translate(5px, -5px);
        text-shadow: 
        0 0 10px rgba(75, 73, 73, 0.5),
        0 0 20px rgba(159, 132, 192, 0.7);
    }
    .sider-bar-content a::after{
        content: '';
        position: absolute;
        left:-15px;
        top:21px;
        width:10px;
        height:10px;
        background-color: white;
        transform: rotate(45deg);
        transition: all ease-out 0.3s;
    }
    .sider-bar-content a:hover::after{
        transform: rotate(90deg) scale(1.5);
    }

    
    .siderActive{
        transform: translate(5px, -5px);
        text-shadow: 
        0 0 10px rgba(75, 73, 73, 0.5),
        0 0 20px rgba(159, 132, 192, 0.7);
        color: white;
    }
    .sider-bar-content a.siderActive::after{
        transform: rotate(90deg) scale(1.5);
    }

    .sider-bar-content > a.siderActive,
    .sider-bar-content > a.siderActive:hover {
        transform: translate(5px, -5px);
        text-shadow: 
        0 0 10px rgba(75, 73, 73, 0.5),
        0 0 20px rgba(159, 132, 192, 0.7);
        color: white !important;
    }


    .stroke{
        position: absolute;
        inset: 0;
        transform: scale(1.1);           
        width: 101%;
        height: 100%;
        stroke-dasharray: 1000;
        stroke-dashoffset:-1000; 
        /* animation: name duration timing-function delay iteration-count direction fill-mode;  */
        animation: draw-after 3s alternate linear forwards 2;
        pointer-events: none;
        overflow: visible;
    }
    
    @keyframes draw-after {
        0%{
            stroke-dasharray: 400 10 40 10 500 10;
            stroke-dashoffset: -1000;
        }
        10%{ 
            stroke-dasharray: 400 10 40 10 500 10;
            stroke-dashoffset: -1000;
        }
        90% { 
            stroke-dasharray: 400 10 40 10 500 10;
            stroke-dashoffset: 0;
        }
        100%{
            stroke-dasharray: 400 10 40 10 500 10;
            stroke-dashoffset: 0;
        }
    }
    /* end 侧边栏 */

    [id^="Part_"] {
        scroll-margin-top: 2rem; /* 所有以 "Part_" 开头的 ID 都生效 */
    }
    
    
    #main-content{
        padding: max(5vw,50px);
        padding-top: 1vw;
        border-radius: 200px 0 0 0 ;


        position: relative;
        

        margin-left: 2vw;
        margin-right: 2vw;
        width: 77vw;
        
        margin-bottom: 5%;
        /* background-color: #ffffff50; */
        background:url('https://static.igem.wiki/teams/5918/main-pic/wangge.webp') 0 0 / 100% auto repeat-y;
        /* === 主阴影 === */
        box-shadow: 
        0 6px 25px rgba(180, 160, 220, 0.5),  /* 加深紫色+扩大扩散范围 */
        0 3px 10px rgba(180, 160, 220, 0.3),   /* 加强近距阴影 */
        inset 0 2px 3px rgba(255,255,255,0.9); /* 强化边缘高光 */

        /* === 可选：双层阴影进阶版 === */
        &::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        border-radius: 8px;
        background: transparent;
        box-shadow: 0 12px 40px rgba(160, 140, 210, 0.6); /* 阴影更浓+范围更大 */
        opacity: 0.8; /* 提高可见度 */
        z-index: -2;
        }
    } 
    
    
    /* parts内容规范 */
    /* 一级标题样式 */
    .parts {
        z-index: 0;
        position: relative;
    }
    .parts h1::after {
        content: "";
        position: absolute;
        top: -15px; /* 轻微上移制造叠层感 */
        right: -15px; /* 右侧超出 */
        width: 30%; 
        height: 15px;
        background: linear-gradient(to right, #f4e8e9 0%, #ecd8d9 40%);
        filter: drop-shadow(0 0 3px #b0c8e750);
        border-radius:0.5rem 0 0.5rem 0; /* 仅右侧圆角 */
      }
      .parts h1::before {
        content:"";
        background-image: url('https://static.igem.wiki/teams/5918/main-pic/popo.webp');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: -15px;
        left: -19px; 
        width: 100px; 
        height: 50px;
        filter: drop-shadow(0 0 5px #b0c8e760);
        border-radius:0.5rem 0 0.5rem 0;
      }

    .parts h1 {
        position: relative;
        background: radial-gradient(circle, #bac5e3, #b0c8e7);
        filter: drop-shadow(0 0 5px #b0c8e780);
        width: 60%;
        /* background: url('../pic/ttle.png') no-repeat center/contain; */
        /* padding: 10px; */
        text-align: center;
        margin: auto;
        padding: 1.5% !important;
        border-radius: 3rem 0  3rem 0;

        margin-top: 2rem;
        margin-bottom: 2rem;

        color: #ffffff;
        font-size: 1.9rem;
        font-weight:400 ;
        /* letter-spacing: 0.1em; */
        z-index:auto;
        z-index: 1;
    }
    
    /* 二级标题样式 */
    .parts h2{
        position: relative;
        padding: 1.2% 2.5%;
        margin: auto; /* 保持块级元素的居中 */
        color: #5d5759;
        border-radius: 20px;
        display: inline-block; /* 让 h2 宽度由内容决定 */
        /* width: 45% !important; */

        margin-top: 0rem;
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
        /* letter-spacing: 0.1em; */

        /* 二级标题修改处 */
        /* 背景圆弧框 */
        background: linear-gradient(135deg, #ffffff 0%, #f5f0f8 100%);
        border-radius: 50px;
        /* 阴影效果 */
        filter: drop-shadow(0 0 5px #dfe2e680);
    }
    .boxh2{
        text-align: center;
    }
    .parts h2::after {
        content:"";
        background-image: url('https://static.igem.wiki/teams/5918/main-pic/bluexing.webp');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top:60%;
        right: 0; 

        height: 200px;
        width: 240px;
      }
    /* 三级级标题样式 */
    .parts h3{
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
        color: #5d5759;;
        
    }
    /* 四级标题样式 */
    .parts h4{
        background: url("https://static.igem.wiki/teams/5918/ihp/h4bg.webp") center/100% 100% no-repeat;
        background-clip: padding-box;
        position: relative;
        width: 80%;
        justify-self: center;                       
        text-align: center;
        color: #5d5759;
        font-size: 1.5rem;
        letter-spacing: 0.1vw;
        font-weight: 600;
        padding: 10px;
        padding-left: 10px;
        border-radius: 15px;
        font-family: 'headfont';
    }
    /* 五级标题格式 */
    .parts h5{
        background: url("https://static.igem.wiki/teams/5918/ihp/h4bg.webp") center/100% 100% no-repeat;
        display: inline-block;  
        background-clip: padding-box;
        position: relative;
        justify-self: center;
        padding: 10px 5%;
        font-size: 1.3rem;  
        line-height: 1.8;  
        word-spacing: 2px; 
        color: #5d5759;
        text-align: center;
        /* padding: 10px; */
        border-radius: 15px;
        font-family: 'contentfont';
    }
    /* 正文样式 */
    .parts{
        width: 100%;
        /* font-family: 'Eina01-SemiBold'; */
        font-family: 'contentfont';
        font-weight: 500;
    }
    
    .parts img{
        width: 80%;
        margin-left: 10%;
    }
    .parts p{
        margin-bottom: 1.5rem; /* 段落之间的间距 */  
        font-size: 1.3rem; /* 自适应字体大小 */  
        line-height: 1.8; /* 增加行间距 */  
        word-spacing: 2px; /* 增加字间距 */  
        text-align: justify; /* 文字对齐方式 */  
        color: #5d5759;
    }
    .parts ul,.parts ol{
        margin-bottom: 1.5rem;
        margin-left: 1rem;
        color: #5d5759;
        font-family: inherit;
    }
    .parts li{
        line-height: 1.8; /* 增加行间距 */  
        word-spacing: 2px; /* 增加字间距 */  
        font-family: inherit;
        font-size: 1.3rem;
    }
    .parts img{
        border-radius: 3px;
        box-shadow: 0 0 8px 8px white; 
        background-color: white;
        /* -webkit-mask-image: radial-gradient(
            circle, 
            rgba(0,0,0,1) 70%,  
            rgba(0,0,0,0) 100%  
        );
        mask-image: radial-gradient(
            circle, 
            rgba(0,0,0,1) 70%, 
            rgba(0,0,0,0) 100%
        );
        
        mask-size: 120% 120%;
        mask-position: center; */
    }
    .underpic{
        display: block;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        color: #978a8e;
        font-family:Arial, Helvetica, sans-serif;
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;

    }
    .underpic p{
        margin-top: 1rem;
        font-size: 1.1rem !important;
        line-height: 1.5;
        word-spacing: 1.5px;
        color: #978a8e;
        font-family:Arial, Helvetica, sans-serif;
        text-align: center;
    }
    .suojin{
        margin-left: 3rem;
    }
    /* 跳转链接的样式 */
    .transb {  
        color: #9da9c8;
        text-decoration: none; /* 去掉下划线 */  
        cursor: pointer;  
    }  
    
    .transb:hover {  
        text-decoration: underline; /*下划线 */  
        color: #3b3549;
        /* 其他样式可选 */  
    }  

/* <!-- 表格 --> */

    .tabel-title{
        display: block;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        color: #978a8e;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }
    .accordion__label,
    .accordion__content {
        padding: 14px 20px;
    }
        
    .accordion__label {
        cursor: pointer;

        background: rgb(209,190,222);
        color: #fff;

        font-size: 1.5em;
        letter-spacing: 0.08rem;
        font-weight: 900;
        
        position: relative;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        padding: 20px 20px 20px 20px;

        display: flex;
        align-items: center;
        justify-content: center;      
    }
    /*小图标  */
    .accordion__label::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 12px solid #fff;
        border-bottom: none;
        transition: transform 0.4s;
    }
    .accordion__input {
        display: none;
    }
    /* 点击前 */
    .accordion__content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1);
        padding: 0;
        border: none;
        position: relative;
    }
    
    /* 点击后样式 */
    .accordion__input:checked ~ .accordion__content {
        max-height: 1000px;
        padding: 0;
        border: none;
    }
    .accordion__input:checked ~ .accordion__label::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* 表格基本样式 */
    
    .accordion__content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgb(244, 240, 250);
        margin-bottom: 2rem;
    }
    .table-content-dot {
        width: 50px !important;
        z-index: 2;
        box-shadow: none !important;
        margin-left: 0 !important;
        margin: 0.6rem;
    }
    table tr:hover td {
        background-color: #f1eaf5;
        transition: background 0.2s;
    }
    tbody td {
        text-align: center;
    }
    /* 表格行的间距 */
    
    th {
        text-align: center;
        color: #d1bede;
        font-weight: 900;
        font-size: 1.2rem;
        background: transparent;
        font-family: 'headfont';
        letter-spacing: 0.2rem;
        padding: 0!important;
    }
    td {
        background: #fff;
        padding: 8px;
        font-size: 1rem;
        color: #5d5759;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(160, 75, 210, 0.04);
    }
    table {
        border-radius: 0 0 20px 20px;
        overflow: hidden;
        border: none;
        width: 100%;
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        border-spacing: 0.6rem;
        border-collapse: separate;
        background: rgb(244,240,250);
        position: relative;
    }
    thead, tbody tr {
        display: table;
        /* width: 100%;
        table-layout: fixed;  */
      }
    thead{
        width: calc(100% - 12px); /* 预留滚动条宽度 */
    }
    tbody{
        width: 100%;
        display: block;
        overflow-y: scroll;
        max-height: 380px;
    }
    th:nth-child(1), td:nth-child(1) { width: 15%; }
    th:nth-child(2), td:nth-child(2) { width: 40%; }
    th:nth-child(3), td:nth-child(3) { width: 15%; }
    th:nth-child(4), td:nth-child(4) { width: 15%; }
    th:nth-child(5), td:nth-child(5) { width: 15%; }

    /* 滚动条整体样式 */
  tbody::-webkit-scrollbar {
    width: 10px; /* 滚动条的宽度 */
    padding-top: 10px;
  }

  /* 滚动条轨道 */
  tbody::-webkit-scrollbar-track {
    background: transparent;
  }

  /* 滚动条滑块 */
  tbody::-webkit-scrollbar-thumb {
    background: #6b4b7a; 
    border-radius: 10px; 
  }

/* 表格样式结束 */


/* 公式样式 */
    .ODE{
        padding-top: 0.1vw;
        padding-bottom: 0.1vw;
    }
    .cross-img{
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
        height: 40vw;
    }
/* 公式样式结束*/


    .reference__content {    
        font-family: Arial, sans-serif; /* 选择易读的字体 */  
        color: #333; /* 字体颜色 */  
    }  

    .reference__content p {  
        margin-bottom: 1rem; /* 段落之间的间距 */  
        font-size: 1.2rem; /* 字体大小，适合参考文献 */  
        line-height: 1.6; /* 行高增加可读性 */  
        text-align: justify; /* 文本对齐 */
        font-weight: bold; /* 加粗 */  
    }  

    .reference__content p::before {  
        content: attr(data-reference-number); /* 利用data属性显示参考文献编号 */  
        font-weight: bold; /* 加粗编号 */  
        margin-right: 0.5rem; /* 编号与文本之间的间距 */  
    }  
    
    .reference {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 35px;
        overflow: hidden;
        font-family: "Quicksand", sans-serif;
        background: white;
    }
    .reference__content {
        padding: 14px 20px;
    }
    .reference__content {
        line-height: 1.6;
    }
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 10px;
        width: 70px;
        height: 70px;
        background: url('https://static.igem.wiki/teams/5918/main-pic/backtotop.webp') no-repeat center/contain;

        cursor: pointer;
        border: none;
        z-index: 999;
      }

      .pagedott{
        position: absolute;
        right: 10px;
        bottom: 10px;
        height: 16px;
      }
      
    
    @media screen and (max-width:1500px) {
        .page-title {
           padding-left: 8vw;
        }
        .last-two-word::after {
            content: "";
            position: absolute;
            top: 50%; /* 垂直居中 */
            transform: translateY(-50%);
            right: 8vw; /* 向右偏移 */
            width:180px;
            height:180px;
            background: url('https://static.igem.wiki/teams/5918/main-pic/headquan.webp') no-repeat center/contain;
            filter: drop-shadow(0 0 5px rgba(237, 190, 210, 0.8));
            z-index: -1;
        }
        .sider-bar-content a {
            font-size: 1.5rem;
            text-align: center;
            cursor: pointer;
        }
    }
@media screen and (max-width:1100px) {
    /* 缩 */
    #main-content{
        width: 89vw;
        margin-left: 5vw;
        margin-right: 6vw;
    }
    #sider-bar{
        display: none;
    }
    .page-title {
       padding-left: 8vw;
    }

    .last-two-word::after {
        content: "";
        position: absolute;
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%);
        right: 8vw; /* 向右偏移 */
        width:120px;
        height:120px;
        background: url('https://static.igem.wiki/teams/5918/main-pic/headquan.webp') no-repeat center/contain;
        filter: drop-shadow(0 0 5px rgba(237, 190, 210, 0.8));
        z-index: -1;
    }
    .page-pic {
        position: absolute;
        top: 10%;
        right: min(30px,5vw);
        height: 100%;
        z-index: 0;
    }
    .page-pic img {
        height: 90%;
    }
    #head {
        height: 35vh;
        width: 100%;
        background-color: #fffefe;
        background-size: 100%;
    }
    th {
        text-align: center;
        color: #d1bede;
        font-weight: 900;
        font-size: 1rem;
        background: transparent;
        font-family: 'headfont';
        letter-spacing: 0.2rem;
    }
    td {
        background: #fff;
        padding: 8px;
        font-size: 0.9rem;
        color: #5d5759;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(160, 75, 210, 0.04);
    }
    
}