*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body{
    width: 100%;
    
    display:grid;
    grid-template-columns: 1fr;
     margin: auto; 
     row-gap: 20px;
     background-color: #e3f0de;
}



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


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

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

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

.brand-name {
    font-size: 16px;
    font-weight: bold;
}

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: 60px;
      margin-left: auto;
    /* background-color: #61a93a; */
    display: flex;
}

.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: #ade048;

}

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

a{
    text-decoration: none;

}

.itemTwo:hover{
    background-color: #ade048;

}


/* 新显卡 */



 .mc{
    text-align: center;
    width: 90%;
    height: 30px;
    margin: auto;
    
} 

 .mc1{
    text-align: center;
    width: 90%;
    height:50px;

    margin: auto;
    
} 

.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;
}
.container .box1{
    position: relative;
    width: 100px;
    height:100px;
    overflow: hidden;
    transform: 0.5s;
}
.container > * {
  width: 100%;  
  height:100%;  
  border-radius: 50%;}

.container .box1:hover{
    transform: scale(1.15);
    box-shadow: 0 25px 40 rgb(0, 0, 0,0.5);
    z-index: 1;
}

.container .box1 .img-box{
    position: absolute;
    left: 0;
    top: 0;
    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: 0;
    width: 100%;
    height: 100%;
    padding: 10px 10px 10px  20px;
    display: flex;
    margin: auto;
    text-align: center;
    align-items: flex-end;
    color: #ffffff;
} 

/* .xql{
    width: 100%;
    height: 100px;
    margin: auto;
    background-color: #531a1a;

} */

/* img{
    width:  100px;
    height: 100px;
} */



/* .xx{
    display: flex;
    justify-content: center;
    align-items: center;
     width: 1000px;
    height: 500px;
    margin: auto;
    background: linear-gradient(200deg,#bae5af,#556949); 
}
.shell{
    width: 100%;
    height: 100%;
    display: flex;
}
.box2{
    flex: 1;
    overflow: hidden;
    transform: .5s;
    margin: 0 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
    border-radius: 20px;
    border: 10px solid #fff;
    background-color: #fff;
}
.box>img{
    width: 200%;
    height: 85%;
    object-fit: cover;
    transform: .5s;
}
.box2>span{
    font:200 45px 'zt';
    text-align: center;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box2:hover{
    flex-basis: 10%;
}
.box2:hover>img{
    width: 100%;
    height: 100%;
} */


 .xx {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90%;
            height: 400px;
            margin: auto;
            background: linear-gradient(200deg, #879189, #556949);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            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: 100%;
            height: 90%;
            display: flex;
            gap: 15px;
            padding: 10px;
            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(255, 255, 255, 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: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .box2 span {
            font: 500 28px '';
            text-align: center;
            height: 60px;
            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.12);
        }

 /* .tp {
     width: 80%;
    height: 300px;
    margin: auto;
    
   background: linear-gradient(200deg,#bae5af,#79946a); 
     display: grid;
   grid-template-rows:100px 100px 100px;
   grid-template-columns: 150px 500px; 
   overflow: hidden;
   gap: 5px;
 }
input{
    display: none;
}
#tab{
    grid-row: 1/4;
    grid-column: 2/3;
    background-color: #499a58;
}
.tab_s:first-child{
    background-color: #969a49;
}

.tab_s:nth-child(2){
    background-color: #496d9a;
}

.tab_s:nth-child(3){
     background-color: #9aeaa9;
}

 #b1:checked ~ #tab{
    transform: translateY(0px);
}
#b2:checked ~ #tab{
    transform: translateY(-300px);
}
#b3:checked ~ #tab{
    transform: translateY(-600px);
} 
.tab_s{
    width: 500px;
    height: 300px;
}
#l1{
 grid-row: 1/2;
    grid-column: 1/2;
     background-color: #969a49;
}
#l2{
 grid-row: 2/3;
    grid-column: 1/2;
     background-color: #496d9a;
}
#l3{
 grid-row: 3/4;
    grid-column: 1/2;
     background-color: #9aeaa9;
} */

/* .tab1{
    width: 500px;
    height: 400px;
    background: #f15c5c;
    overflow: hidden;
}
.tab1 input{
    display: none;
}
.tab1 label{
    width: 100px;
    height: 40px;
    display: inline-block;
    background-color: #a1a75f;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    float:left; /*去间距 */
    /* margin-right: 2px;
} */
 /* .bq {
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #0da2ff;
        } */
/* 
.tab1 label:hover{
    background: #203963;
}

.content{
    width: 2000px;
    height: 360px;
    background: #4f2160;
    float: left;
    transition: 0.3s;
}

.content .li{
    width: 500px;
    height: 360px;
    float: left;

}

/* 选项被选中时为橘色 

#ck1:checked~label[for="ck1"]{background: #eb6912;}
#ck2:checked~label[for="ck2"]{background: #eb6912;}
#ck3:checked~label[for="ck3"]{background: #eb6912;}
#ck4:checked~label[for="ck4"]{background: #eb6912;}


.tab img{
    width: 300px;
    height: 300px;
    margin-top: 20px;
}
 点击ul变化位置 
#ck1:checked~ul{margin-left: 0px;}
#ck2:checked~ul{margin-left: -500px;}
#ck3:checked~ul{margin-left: -1000px;}
#ck4:checked~ul{margin-left: -1500px;}
 */

.bq {
            width: 95%;
            max-width: 1800px;
            margin: 0 auto;
            padding: 0;
        }
 
        
        .tab1 {
            width: 90%;
            max-width: 1600px;
            height: auto; 
            /* background: #5cf1a9; */
            overflow: hidden;
            border-radius: 15px;
            /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); */
            margin: 0 auto;
        }
        
        .tab-controls {
            display: flex;
            background: #388b72;
            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: #879189;
            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 rgba(0, 0, 0, 0.2);
        }
        
        .tab1 label:hover {
            background: #fed89f;
            transform: translateY(-3px);
        }
        
         /* .content-container */.nr-kz{
            width: 600%; /* 4个内容面板 */
            height: 300px;
            background: #a2e48d;
            display: flex;
            transition: transform 0.5s ease;
        }
        
        /*.content-panel*/ .nr-mb {
             width: 16.666%; /*  */ /* 每个面板占100 / 6 */
            height: 100%;
            padding: 30px;
            color: #fff;
            box-sizing: border-box;
            overflow-y: auto;
        }
        
        /* 选项卡内容样式 */
       /* .season-title*/ .tm {
            font-size: 1.3em;
            text-align: left;
            margin-bottom: 0px;
            color: #55a50b;
            text-shadow: 0 2px 4px rgba(77, 77, 77, 0.5);
        }
        
        /*.season-content */ .tm-nr{
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 12px;
            text-align: justify;
             background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        /* .season-features {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        } */
        
        /* .season-features h3 {
            color: #ff9800;
            margin-bottom: 15px;
            font-size: 1.4rem;
        } */
        
        /* .season-features ul {
            padding-left: 25px;
        }
        
        .season-features li {
            margin-bottom: 10px;
            line-height: 1.6;
        } <div class="content-panel nr-mb  zwxs">
                    <h2 class="season-title  tm">zwxs</h2>
                    <div class="season-content tm-nr">
        
        /* 选中状态样式 */
        #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"] {
            background: #132017;
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        }
        
        /* 内容切换 */
        #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%);
        }
        
        /* #ck6:checked ~ .nr-kz {
            transform: translateX(-80%);
        } */
        
        /* 不同季节的背景色 */
        .zwxs { background: linear-gradient(to bottom, #4CAF50, #2E7D32); }
        .fbfw { background: linear-gradient(to bottom, #2196F3, #0D47A1); }
        .szhj { background: linear-gradient(to bottom, #FF9800, #E65100); }
        .fzff { background: linear-gradient(to bottom, #B3E5FC, #0288D1); }
        .zyjz { background: linear-gradient(to bottom, #65ae46, #003de6); }
        /* .bhxz { background: linear-gradient(to bottom, #fcb3db, #c7d102); }
         */
        /* .info-panel {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin-top: 30px;
            color: #fff;
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        .info-panel h2 {
            color: #ffeb3b;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .highlight {
            color: #ff9800;
            font-weight: bold;
        } */
        
        /* @media (max-width: 768px) {
            .tab-controls {
                flex-wrap: wrap;
            }
            
            .tab1 label {
                flex-basis: calc(50% - 10px);
                margin-bottom: 10px;
                font-size: 1rem;
            }
            
            .content-panel {
                padding: 20px;
            }
            
            .season-title {
                font-size: 1.8rem;
            }
            
            .season-content {
                font-size: 1rem;
            }
        } */

  /* #b1:checked ~ #tab .tab_s:first-child,
        #b2:checked ~ #tab .tab_s:nth-child(2),
        #b3:checked ~ #tab .tab_s:nth-child(3) {
            transform: translateX(0);
            z-index: 2;
        } */


.bw{
     width: 100%;
    height:100px; 
    margin:  auto;
    background-color: #132017;
    text-align: center;


}