.clearfix::after{
    content: '';
    clear: both;
    display: block;
}
/* 清除默认样式 */
body, html {
    margin: 0;
    padding: 0;
}

/* 树叶样式 */
@keyframes leafs-move{
    0%{}
    100% {
        transform: translateY(800px) translateX(30px) rotate(360deg);
        opacity: 0.5;
    }
}
.feafs{
    position: relative;
}
.leafs img:nth-child(1){
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transform: scale(0.5s) rotate(180deg) translateX(30px);
    animation: leafs-move 5s linear infinite;
}
.leafs img:nth-child(2){
    position: absolute;
    left: 480px;
    top: -50px;
    z-index: 1;
    transform: scale(0.5s) rotate(180deg) ;
    animation: leafs-move 1.5s linear infinite;
}
.leafs img:nth-child(3){
    position: absolute;
    left: 880px;
    top: -50px;
    z-index: 1;
    transform: scale(0.5s) rotate(180deg) translateX(-30px);
    animation: leafs-move 2s linear infinite;
}
.leafs img:nth-child(4){
    position: absolute;
    left: 1280px;
    top: -50px;
    z-index: 1;
    transform: scale(0.5s) rotate(180deg) ;
    animation: leafs-move 5.5s linear infinite;
}
.leafs img:nth-child(5){
    position: absolute;
    left: 1480px;
    top: 0;
    z-index: 1;
    transform: scale(0.5s) rotate(180deg);
    animation: leafs-move 7s linear infinite;
}

/* 设置header为相对定位，以便其子元素可以相对于它进行绝对定位 */
header {
    position: relative;
}

/* 设置图片宽度为100%以适应不同的屏幕尺寸 */
header img {
    width: 100%;
    height: 300px;
}

/* 使用绝对定位将.login-right放置在图片的右上角 */
.login-right {
    position: absolute;
    top: 10px; 
    left: 10px; 
    background-color: rgba(255, 255, 255, 0.7); 
    padding: 5px 10px; 
    border-radius: 5px; 
}

/* 调整登录和注册链接之间的间距 */
.login-right a {
    margin-left: 10px; 
    text-decoration: none;
    color: #000; 
}

nav {
    height: 50px;
    text-align: center;
    justify-content: center;
    display: flex;
    background-color: #00851d;
    align-items: center;
    font-size: 30px;
    color: #fff;
}

/* 移除头部导航列表的黑点 */
nav ul {
    list-style: none; /* 移除黑点 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
}

nav ul li {
    float: left;
    margin: 0 2em;
}
nav ul li a:hover{
    color: black;
}

/* 移除头部导航链接的下划线 */
nav ul li a {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素的颜色 */
}

/* 轮播图专用样式 */
/* 轮播图专用样式 */
.carousel {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 1500px;
    height: 300px;
    /* 移除了不必要的过渡效果 */
}

.carousel-item img {
    width: 1500px;
    height: 300px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* 隐藏非活动的轮播项，并显示活动的轮播项 */
.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}




main {
    margin: 0; /* 确保主体没有外边距 */
    padding: 0; /* 确保主体没有内边距 */
}
h1 {
    color: #00851d;
    text-align: center;
    font-size: 50px;
    margin: 0px ; /* 移除 h1 的默认外边距 */
    padding: 50px; /* 移除 h1 的默认内边距 */

}
h2 {
    color: #00851d;
    text-align: center;
    font-size: 30px;
    margin: 0px ; /* 移除 h1 的默认外边距 */
    padding: 50px; /* 移除 h1 的默认内边距 */

}




/* 三农动态与海报 */
.news {
    width: 1300px;
    margin: 0 auto;
}

.dongtai h3 {
    color: #ffffff;
    background-image: linear-gradient(to right, green, yellow);
    width: 650px;
    text-align: left;
    font-size: 25px;
    margin: 20px;
    padding: 10px 20px;
    border-radius: 50px 0px 50px 0px;
}

.dongtai {
    float: left;
    width: 710px;
    margin-right: 10px;
}

.dongtai ul {
    margin-top: 30px;
    list-style: none;
    padding: 0;
}

.dongtai li {
    padding-top: 10px;
    background: url('images/bpic_5.gif') no-repeat;
    padding-left: 30px;
    position: relative; 
    overflow: hidden; /* 清除浮动影响 */
}

.dongtai li a {    
    color: #000;    
    height: 5px;  
    text-decoration: none;  
}

.dongtai li span {
    float: right;
    font-size: 14px;
    color: #666;
}

/* 图片样式 */
.dongtai-imgs div {
    width: 330px; 
    height: 220px; 
    overflow: hidden; 
    float: left; 
    margin: 10px;
}

.dongtai-imgs img {
    width: 100%; 
    height: 100%; 
    transition: transform .5s;
    transform-origin: center;
}

.dongtai-imgs img:hover {
    transform: scale(1.2); 
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* 海报 */
.haibao{
    float: left;
    width: 530px;
    
}
.haibao h3 {
    color: #ffffff;
    background-image: linear-gradient(to right, green, yellow);
    width: 480px;
    text-align: left;
    font-size: 25px;
    margin: 20px;
    padding: 10px 20px;
    border-radius: 50px 0px 50px 0px;
}

.haibao-img a{
    color: #000;
    display: inline-block;
    width: 260px;
    height: 400px;
    position: relative;
}
.haibao-img a img{
    width: 100%;
    height: 100%;
}
.haibao-img .cover1{
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    left: 0;
    bottom: 0;
    transition: all 1s;
}
.haibao-img :hover .cover1{
    height: 40%;
    
       
}
.haibao-img .cover2{
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    left: 0;
    bottom: 0;
    transition: all 1s;
}
.haibao-img :hover .cover2{
    height: 40%;     
}

/* 立方体旋转 */
.box{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateY(20deg);
    transition: transform 2s;
}
.box div{
    width: 300px;
    height: 300px;
    font-size: 50px;
    text-align: center;
    line-height: 300px;
    color: white;
    position: absolute;
}
.box img{
    width: 300px;
    height: 300px;
}
/* 立方体各面 */
.top {
    background-color: antiquewhite;
    transform: rotateX(90deg) translateZ(150px);
}
.bottom {
    background-color: rgb(12, 185, 12);
    transform: rotateX(-90deg) translateZ(150px);
}
.left {
    background-color: rgb(204, 71, 231);
    transform: rotateY(-90deg) translateZ(150px);
}
.right {
    background-color: rgb(234, 32, 83);
    transform: rotateY(90deg) translateZ(150px);
}
.front {
    background-color: rgb(60, 174, 255);
    transform: translateZ(150px);
}
.back {
    background-color: rgb(205, 227, 3);
    transform: rotateY(180deg) translateZ(150px);
}

/* 鼠标悬停时旋转 */
.box:hover {
    transform: rotateX(200deg) rotateY(200deg);
}

 /* 清除浮动 */
 .fanzhuan::after {
    content: "";
    display: table;
    clear: both;
}
.fanzhuan ul {
    list-style: none;
    padding: 0;
    margin: 50px;
    text-align: center; /* 让li元素在其容器内水平居中 */
}
.fanzhuan li {
    width: 300px;
    height: 400px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    display: inline-block; /* 使用inline-block使li元素在行内显示 */
    float: none; /* 确保不会因为之前的样式影响布局 */
    margin-right: 20px; 
    margin-left: 20px; 
}
.fanzhuan li img,
.fanzhuan .back {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 30px 30px 30px 30px;
    left: 0;
    top: 0;
    backface-visibility: hidden; /* 确保背面不可见 */
    
    
    
    
}
.fanzhuan .back {
    background-color: rgba(0, 255, 0, 0.5); /* 背景颜色设置为半透明 */
    color: rgba(255, 255, 255, 0.5); /* 文字颜色也设置为半透明 */
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
    
}
.fanzhuan li:hover {
    transform: rotateY(180deg); 
}



/* 亲子采摘 */
.qinzi li{
    width: 300px;
    height: 400px;
    position: relative;
    transform-style: preserve-3d;
    list-style: none;
    display: inline-block; /* 使用inline-block使li元素在行内显示 */
    float: none; 
    margin-right: 20px; 
    margin-left: 20px; 
    margin: 50px;

}
.qinzi ul{
    text-align: center; /* 让li元素在其容器内水平居中 */

}
.qinzi-front,
.qinzi-back{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px #000;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    
    
}
.qinzi-back{
    
    background-color: antiquewhite;
    
    /* 修改层级 */
    z-index: -1;
}
.qinzi-front img{
    width: 100%;
    border-radius: 30px 30px 0 0;
    
}
.qinzi-front{
    transition: all 1s;
}
.qinzi-back{
    transform: rotateX(90deg) translateY(300px);
    transition: all 1s;
}
.qinzi li:hover .qinzi-front{
    transform: translateY(-200px) rotateX(90deg) ;
    /* 完全透明 */
    opacity: 0.5;
}
.qinzi li:hover .qinzi-back{
    transform: translateY(0px) rotateX(0deg) ;
    /* 完全透明 */
    opacity: 0.5;
}







main .koubei {
    text-align: center;
    background-image: linear-gradient(to right, green, yellow, yellow, green);
   
}

main .koubei .box1 {
    width: 1300px;
    height: 830px;
    background-image: url(images/bg.gif);
    overflow: hidden;
    margin: 0 auto; /* 居中 */
}

/* 半透明盒子 */
main .koubei .box2 {
    width: 1000px;
    height: 700px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    margin-bottom: 70px;
    margin-top: 60px;
    margin-left: 150px;
    font-family: 'ZCOOL XingKai', cursive;
    font-size: 20px;
}

main .koubei .box2 .item {
    float: left;
    width: 220px;
    height: 240px;
    background-color: rgb(190, 199, 129);
    margin-left: 60px;
    margin-bottom: 60px;
    margin-right: 50px;
    margin-top: 60px;
    padding: 30px;
    /* 元素添加内边距总宽度和总高度 */
    box-sizing: border-box;
    box-shadow: 5px 5px 20px #666;
    border-radius: 30px 0 0 100px/300px 20px 0 50px;
    position: relative;
    padding: 15px; /* 添加一些内边距，使文本和关闭按钮之间有空间 */
    border: 1px solid #ccc; /* 可选：添加边框以更好地看到每个评价项 */
}

main .koubei .box2 .item::after {
    content: '\2638';
    display: block;
    font-size: 20px;
    float: left;
}

main .koubei .item span {
    position: absolute;
    bottom: 10px; /* 距离底部10px */
    right: 10px; /* 距离右侧10px */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    color: #000000; /* 设置关闭按钮的颜色 */
    font-size: 14px; /* 设置关闭按钮的字体大小 */
}
/* 字体与图标模块样式 */
.why .text{
    border: 8px solid rgb(165, 96, 16);
    border-radius: 50px;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;
    margin-bottom: 100px;

}
.why .text h2{
    color:  rgb(165, 96, 16);;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    font-style: italic;
    font-family: '仿宋';
    text-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    

}
.why .text p{
    /* 行间距 */
    line-height: 250%;
    /* 首行缩进 */
    text-indent: 2em;
    /* 字符间距 */
    letter-spacing: 0;
}
.why .text img{
    position: absolute;
    margin-left: -90px;
    margin-top: -480px;
}
.why .text .img2{
    position: absolute;
    margin-left: 1000px;
    margin-top: 0px;
}
.why .icons {
    width: 1300px;
    margin: 0px auto;
    background-image: url(images/dascBg04.png);
    background-size: cover; /* 确保背景图覆盖整个容器 */
    height: auto; /* 或者设置一个足够的高度 */
    padding: 0; /* 移除默认的内边距 */
}
.why .icons ul {
    list-style: none; /* 移除黑点 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许子项换行 */
}
.why .icons ul li{
    float: left;
    width: 325px;
    text-align: center;
    box-sizing: border-box;
    height: 450px;
    line-height: 100px;
}


.footer {
    height: 100px;
    text-align: center;
    justify-content: center;
    display: flex;
    background-color: #00851d;
    align-items: center;
    color: #fff;

}

/* 移除底部列表的黑点 */
.footer ul {
    list-style: none; /* 移除黑点 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
}

.footer ul li {
    float: left;
    margin: 0 0.8em;
    
}

/* 移除底部链接的下划线 */
.footer ul li a {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素的颜色 */
}
.footer ul li a:hover{
    color: black;
}