@font-face {
font-family: 'bt';
src: url('../font/优设标题黑.ttf') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
        font-family: 'ziti1';
        src: url('../font/Gabriola.ttf');}
/* 初始化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
.yw{
   color: #ffffff;
    font-size: 20px;
    display: block;
    text-align: center;
    font-family: 'ziti1'; 
}

/* 导航栏的宽度，高度，颜色 */

.dhl{
    
    width: 100%;
    height: 63px;
    /* background-color: #ec4f4f; */
}


/* 顶部导航栏 */

.header {
    background-color: #132017; /* #132017深绿色 */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
}

.logo {
    display: flex;
    align-items: center; 
}

.logo img {
    height: 28px; /* Logo 图标高度 */
    margin-right: 10px; /* Logo 与品牌名称之间的间距 */
}

.brand-name {
    font-family: 'bt';
    font-size: 20px;
    font-weight: 100;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;

}

.box{
    width: 60%;
    display: flex;
    /* position: fixed; */
    /* top: 50%;*/
    left: 40%; 
    /* transform: translate(-50%,-50%); */
 
}

.nav{
    width: 900px;
    height:6vh;
      margin-left: auto;
    /* background-color: #61a93a; */
    display: flex;
    z-index: 99;
}

.nav a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #ffffff;

}
.nav>.item{
    width: 20%;
    height: 100%;
    position: relative;
    transform: .4s;
}

.list{
    position: absolute;
    top: 90%;
    width: 100%;
    overflow: hidden;
    max-height: 0px;
    transition: .4s;
    border-radius: 0 0 10px 10px;
    background-color: #132017;
    z-index: 1;
}

.itemTwo{
    height: 65px;
}

.nav>.item:hover{
    background-color: #32ab0a;

}

.nav>.item:hover>.list{
    max-height: 500px;
}

a{
    text-decoration: none;

}

.itemTwo:hover{
    background-color: #32ab0a;

}


/* 两段文字说明 */


/* 名称一：一级濒危植物 */
 .mc{
    text-align: center;
    width: 90%;
    margin: auto;
    padding: 10px;
    color: #fff;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.3),
    2px 2px 5px rgba(1, 51, 11, 0.5);
    /* background-color: #748867;  */
} 


/* 名称二：信息 */
 .mc1{
    padding: 10px;
    text-align: center;
    width: 90%;
    color: #fff;
    margin: auto;
   border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.3),
    2px 2px 5px rgba(1, 51, 11, 0.5);
    /* background-color: #748867;  */
} 
/* 第二部分 选项卡 */
.xxk{
    position: relative;
    width: 90%;
    /* height: 100px; 让内容撑开盒子*/
   /* padding: 0 0 0 25px; 移动，让盒子居中 */
    margin: auto;
      /* background: linear-gradient(200deg,#bae5af,#556949);   */
    display: flex;
    align-items: center;/*单个*/
    justify-content: center;/*所有*/
     margin: auto; 
      /* row-gap: 20px;  */
}

/* 大盒子控制器 */
.container{

    display: flex;
    justify-content: center;
    align-items: center;
     flex-direction: row; /*项目从左到右排列*/
    flex-wrap: wrap;/*允许换行*/
     gap: 40px;/*间距刚好 */
     margin:0 0 0 0; 
     position: relative;
}

/* 单个圆形选项  宽高比为1:1*/
.container .box1{
    position: relative;
    width: 100px;
    height:100px;
    overflow: hidden; /*隐藏超出部分 */
    transform: 0.5s;
}

/* 上面必须1：1，让正方形成圆形  */

.container > * {
  width: 100%;  
  height:100%;  
  border-radius: 50%;
}

/* 鼠标悬停选项时效果 */
.container .box1:hover{
     transform: scale(1.15);/* 放大，数大于1放大，小于1变小*/
    box-shadow: 0 25px 10 rgba(0, 0, 0, 1);/* 技术原因没效果，先留着（x坐标，y坐标，模糊度，颜色） */
   /* z-index: 1; 我好像没用父子级，堆叠顺序，数大大，数小小 */
}

.container .box1 .img-box{
    position: absolute; /*相对定位，a的那个有时候盒子会叠在一起 */
      /*left:0;
    top:-10px; 移动 */
    width: 100%;
    height: 100%;
}

.container .box1 .img-box::before{
     content:"";/* */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,#222,transform);
    z-index: 1;
    opacity: 0;
    transform: 0.5s;
}

.container .box1 .img-box::before{
     opacity: 1;/*不透明度 */
}


.container .box1 .img-box img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /*图片覆盖盒子*/

}
/* 名称盒子 */
 .container .box1 .text-box{
     position: absolute;
    /* left: 0;
    top: 40px; */
    width:100px;
    height: 93px;
    font-size: 18px;
     /*background-color:(rgba(255, 0, 0, 1)); */
     font-weight: bold; /*字体大小，加粗*/
    /* padding: 10px 10px 10px  20px; */
    display: flex;
    margin: auto;
   align-items: end;          /* 垂直居中 */
    justify-content: center;      /* 水平居中 */
    box-sizing: border-box;       /* 包含内边距 */
    text-align: center;    
    color: #fffcfc;
} 




 .xx {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90%;
            height: 400px;
            margin: auto;
            border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.3),
    2px 2px 5px rgba(1, 51, 11, 0.5);
            overflow: hidden;
            position: relative;
        }
        
        .xx::before {
            content: '';/*  */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 径向渐变,不是很好看，改透明度明显 */
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255, 255, 255, 0) 70%);
            z-index: 1;
        }
      /* 形态特征  选项卡 */
        .shell {
            width: 98%;
            height: 90%;
            display: flex;
            gap: 20px;
            padding: 5px;
            z-index: 2;
        }
        /* 图片和名字 */
        .box2 {
            flex: 1;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            margin: 0 5px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-radius: 15px;
             border: 8px solid rgba(226, 255, 201, 0.9); /*边框颜色*/
            background-color: rgba(255, 255, 255, 0.95);
            display: flex;
           flex-direction: column; /* 项目从上往下排 */
             cursor: pointer; /*将鼠标变为手形状，表示可点击的*/
        }
        
        .box2-img-container {
            flex: 1;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .box2 img {
            width: 100%;
            height: 90%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .box2 span {
           font-size: 24px;
            text-align: center;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2c3e50;
            background: rgba(255, 255, 255, 0.9);
            padding: 0 10px;
        }
        
        .box2:hover {
            flex: 2;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            border-color: #fff;
        }
        
        .box2:hover img {
            transform: scale(1.3);
        }



.bq {
            width: 90%;
            max-width: 1800px;
            margin: 0 auto;
            padding: 0;
        }
 
        
        .tab1 {
            width: 95%;/*刚好对齐95%*/
            max-width: 1600px;
            height: auto; 
            /* background: #5cf1a9; */
            
            overflow: hidden;
            border-radius: 15px;
            /* box-shadow: 0 15px 35px rgba(255, 255, 255,0.3);两个选项卡的阴影 */
            margin: 0 auto;
        }
         .tab-box{
            padding: 20px;/*
            margin: 30px; */ 
             margin: 0 auto;
            width: 95%;
            border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.3),
    2px 2px 5px rgba(1, 51, 11, 0.5);
        } 

 /*选项控制*/
 
        .tab-controls {
        
            display: flex;
/*选项所在一栏的颜色控制*/
            background:rgba(189, 255, 162, 0.4);
        backdrop-filter: blur(10px);  /*对背景应用模糊效果 */
   /* box-shadow: 
        inset 1px 1px 6px rgba(170, 167, 167, 0.3) 内阴影，使其看起来像是嵌入在背景中 */
        /* 2px 2px 5px rgba(0, 0, 0, 0.5);/* 外阴影，增强立体感 */
           /* background: rgba(57, 141, 116, 0.3);选项卡上方背景色*/
            padding: 10px;
            border-radius: 12px 12px 0 0;
        }
        
        .tab1 input {
            display: none;
        }
        
        .tab1 label {
            flex: 1;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
/* 选项栏选项待机的颜色*/
          background-color: #FED89F; 
        /*    background:rgba(74, 70, 70, 0.3);
        backdrop-filter: blur(10px); 对背景应用模糊效果 */
    /* box-shadow: 
        inset 1px 1px 6px rgba(170, 167, 167, 0.3),  内阴影，使其看起来像是嵌入在背景中 */
      /* 2px 2px 5px rgba(0, 0, 0, 0.5);  外阴影，增强立体感 */
            text-align: center;
            line-height: 1.4;
            cursor: pointer;
            border-radius: 10px;
            margin: 0 5px;
            font-weight: bold;
            color: #fff;
            font-size: 1.4rem;
            transition: all 0.3s ease;
/*待机时的阴影*/
            /* box-shadow: 0 4px 8px rgb(170, 240, 156); */
        }
        
        .tab1 label:hover {
/*鼠标经过选项的颜色*/
            background:#32ab0a;/* #4db3b1*/
            transform: translateY(-3px);
        }
 /*内容控制*/  
 /*文字在的那栏在的那栏*/     
        .nr-kz{
            width: 600%; /* 4个内容面板 */
            height: 300px;
            /*对背景应用模糊效果 */
           backdrop-filter: blur(10px); 
           box-shadow:
            /* 内阴影，使其看起来像是嵌入在背景中 */
            inset 1px 1px 6px rgba(170, 167, 167, 0.3),
            /*外阴影，增强立体感 *//* 设置背景颜色为半透明的灰色 */
            2px 2px 5px rgba(0, 0, 0, 0.5); 
             /* 对背景应用模糊效果   */
             backdrop-filter: blur(15px); 
             /* box-shadow: 
             inset 1px 1px 6px rgba(170, 167, 167, 0.3),  内阴影，使其看起来像是嵌入在背景中 */
            /*  2px 2px 5px rgba(0, 0, 0, 0.5); 外阴影，增强立体感 */
            display: flex;
           /* transition: transform 0.5ms ease 0.1ms;卡片转播变化过度*/
        }
        
/*一个内容块*/
        .nr-mb {
             width: 16.666%; /*  */ /* 每个面板占100 / 6 */
            height: 100%;
            padding: 10px;
            color: #fff;
            box-sizing: border-box;
            overflow-y: auto;
        }
        
 /* 选项卡的选项控制（题目） */
        .tm {
            font-size: 24px;
            text-align: left;
            margin-bottom: 0px;
            color: #132017;
            
            text-shadow: 0 2px 4px rgba(77, 77, 77, 0.2);
        }
        

/*有字的背景的颜色控制（题目——内容）*/
         .tm-nr{
            font-size: 16px;
            line-height: 1.6;/*字与字的行间距*/
            margin-bottom: 12px;
            text-align: justify;
            background: #e3f0de;
            padding: 20px;
            border-radius: 15px;
            margin-top: 10px;
            color: #333;
            text-indent: 2em;
        }
        
   /* 选中状态样式 */
        #ck1:checked ~ .tab-controls label[for="ck1"],
        #ck2:checked ~ .tab-controls label[for="ck2"],
        #ck3:checked ~ .tab-controls label[for="ck3"],
        #ck4:checked ~ .tab-controls label[for="ck4"],
        #ck5:checked ~ .tab-controls label[for="ck5"],
        #ck6:checked ~ .tab-controls label[for="ck6"] {
        
/*选项卡点击后的变化（整体颜色，向Y偏移，影子）*/
            background:#32ab0a; /*#eb6912*/
            transform: translateY(-5px);
            box-shadow: 0 5px 10px #94a58b;
        }
        
/* 内容切换 */
        #ck1:checked ~ .nr-kz {
            transform: translateX(0);
        }
        
        #ck2:checked ~ .nr-kz {
            transform: translateX(-16.666%);
        }
        
        #ck3:checked ~ .nr-kz {
            transform: translateX(-33.333%);
        }
        
        #ck4:checked ~ .nr-kz {
            transform: translateX(-50%);
        }
        
        #ck5:checked ~ .nr-kz {
            transform: translateX(-66.666%);
        }
        
        #ck6:checked ~ .nr-kz {
            transform: translateX(-83.333%);
        }
        /* 有字的背景的背景·的颜色控制*/
        .zwxs {
            background-color: #e3f0de;
        }
         /* box-shadow: 
         inset 1px 1px 6px rgba(170, 167, 167, 0.3),  内阴影，使其看起来像是嵌入在背景中  
         2px 2px 5px rgba(0, 0, 0, 0.5); 外阴影，增强立体感 
         background: linear-gradient(200deg, #bae5af, #83a272); */ 
        .fbfw {  background-color: #e3f0de; /* 对背景应用模糊效果 */ }
        .szhj { background-color: #e3f0de;/* 对背景应用模糊效果 */ }
        .fzff {background-color: #e3f0de; /* 对背景应用模糊效果 */ }
        .zyjz {background-color: #e3f0de;/* 对背景应用模糊效果 */ }
        .bhxz {background-color: #e3f0de; /* 对背景应用模糊效果 */ }
         
      


        .bottom{
            width: 100%;
            background-color: #132017;

        }
        .footer{
            width: 91%;
             margin: auto; 
            margin-top: 10px;
            padding-bottom: 18px; 
            font-size: 14px;
            color: #ffffff;
            display: flex;
            justify-content: space-between;
        }
        .footer a {
            color: #ffffff;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        .footer .item1{
            padding-top: 6px;
            padding-left: 10px;
        }
        .footer .item1 img{
            height: 36px; /* Logo 图标高度 */
            margin-right: 10px;
            vertical-align: middle;/* 使图片与文字垂直居中对齐 */
        }
        .footer .item1 .brand-name {
            font-size: 20px;
            vertical-align: middle; /* 使文字与图片垂直居中对齐 */
            display: inline-block;
            line-height: 36x; /
        }
        .footer .item2{
            display: flex;
            gap: 30px;
            padding-top: 20px;
        }
        .footer .item2 .nav1 a{
            display: block;
            margin-top: 10px;
        }
        .footer .item2 .nav1 .teshu{
            display: block;
            margin-top: 0;
        }
        .footer .item3{
            text-align: right;
            padding-top: 20px;
        }
        .footer .item3 .nav4{
            margin-bottom: 14px;
        }
        .footer .item3 .nav3{
            margin-top: 10px;
        }
        .footer .item3 .nav2 a,.footer .item3 .nav3 a,.footer .item3 .nav4{
            margin-right: 10px;
        }