@charset "utf-8";
/* CSS Document */
body{
    font-size: 1.2rem;
   }
ul li {list-style-type: none;}
.in_banner{ width: 100%; height: 100vh;  }
.in_banner .swiper-slide{width: 100%; height: 100vh;background-size:100% 100%; }

/* 导航栏样式保持不变 */
.navbar-light .navbar-nav .active>.nav-link, 
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .show>.nav-link{color:rgb(255 255 255 / 99%);}
.navbar-light .navbar-nav .nav-link{color: rgba(255,255,255,.99);}
.navbar-light .navbar-text a{color: rgba(255,255,255,.99);}
.navbar-light .navbar-text{width:25%; text-align: right;}
.navbar-expand-lg .navbar-nav{ width: 75%; justify-content: center;}
.navbar-expand-lg .navbar-nav .nav-link{padding-right: 1.6rem; padding-left: 1.6rem;}
.navbar{    padding:1.2rem 1rem;     border-bottom: 1px solid #ffffff2e;    z-index: 1030; /* Bootstrap导航栏默认层级，不改动 */	background: #0f1d1557;}
.navbar-light .navbar-text a:hover{ color: #fff}



.swiper {
            width: 100%;
            height: 100vh; /* 让轮播占满整个视口高度 */
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; /* 为了让文字绝对定位 */
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper {
            margin-left: auto;
            margin-right: auto;
        }

        /* 动画相关样式 */
        .banner_p1, .banner_p2 {
            opacity: 0; /* 初始不显示 */
            transform: translateY(50px); /* 初始位置在下方 */
            transition: all 0.8s ease-out; /* 动画过渡效果 */
            position: absolute;
			margin-top: -100px;
        }
		.banner_p2{margin-top: -60px;}
        /* 动画激活状态 */
        .banner_p1.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .banner_p2.animate {
            opacity: 1;
            transform: translateY(0);
        }



/* 关键修复：产品栏布局 - 固定在版权栏上方 */
.in_prod{ 
    position: fixed;
    bottom: 80px; 
    left: 500px; /* 保持远离左侧的距离 */
    width: calc(100% - 500px); /* 整体宽度不变 */
    margin: 0 auto;
    padding: 0 10px; /* 新增左右内边距，避免边缘项被裁剪 */
    overflow: hidden; 
    z-index: 20; 
    padding-top: 20px;
}

/* 核心调整：箭头显示在最顶层 */
.prod-arrow {
    /* 脱离产品栏定位，改为基于整个页面的固定定位，确保在最顶层 */
	position:absolute;
    left: 440px; /* 固定在页面左侧320px处（产品栏left:380px - 箭头宽度40px - 间距20px） */
    width: 36px;
    height: 36px;
    background-color: rgba(35,72,10,0.8); /* 深色背景确保可见 */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 9999; /* 极高层级，确保覆盖所有元素（导航栏z-index:1030也会被覆盖） */
    box-shadow: 0 3px 10px rgba(0,0,0,0.7); /* 增强阴影，提升视觉层级 */
    font-size: 18px; /* 增大箭头字体，更易点击 */
    border: 1px solid #3a5311; /* 白色边框，进一步突出箭头 */
}
/* 箭头上下位置调整，垂直居中对齐产品栏 */
.arrow-left {
    bottom: 270px; /* 上箭头：版权栏top=0 + 产品栏height=180px + 间距20px */
}
.arrow-right {
    bottom: 220px; /* 下箭头：上箭头bottom - 箭头间距40px - 箭头高度40px */
}
/* 箭头悬停效果增强，强化交互感知 */
.prod-arrow:hover {
    background-color: #233400; /* 高亮色，吸引注意 */
    color: white;
    transform: scale(1.1); /* 放大效果，突出交互 */
    box-shadow: 0 5px 15px rgba(35,52,0,0.8); /* 高亮阴影 */
}

/* 产品列表样式保持不变 */
.in_prod ul{ 
    display: flex;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease; /* 平滑滚动效果 */
    align-items: center; /* 垂直居中产品项 */
}
.in_prod ul li{ 
    width: 32%; /* 宽度从32%微调为31.8%，留出更多空间 */
    flex-shrink: 0; 
    margin: 0px 0.66%; /* 间距从0.66%增大到0.8%，但总占比仍可控 */
    box-sizing: border-box;
    transition: transform 0.3s ease; 
    background: #202a0d;
    border-radius:5px;
    border: 6px solid #192d0c;
    overflow: hidden;
}
.in_prod img{ 
    width:100%;
    object-fit: cover; /* 图片自适应填充 */
    transition: transform 0.3s ease; /* 图片缩放动画 */
}
.in_prod p {
    text-align: center;
    color: #5b9b69; /* 文字颜色加深，确保可见 */
    font-weight: 400;
	position: relative;
	margin-top: -50px;
	line-height: 50px;
	margin-bottom: 0rem;
	background: #000000a3;
	font-size: 16px;
	
	 white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
}

/* 鼠标悬停效果 */
.in_prod ul li:hover {
    transform: translateY(-20px); /* 向上移动10px，防止溢出 */
}
.in_prod ul li:hover img {
    transform: scale(1.05); /* 图片缩放比例调整，防止溢出 */
}

/* 版权栏样式 - 固定在最底部 */
.in_footer{ 
    position: fixed;
    bottom: 0; /* 最底部 */
    left: 0;
    right: 0;
    font-size: 16px; 
    color: #fff; 
    padding: 20px 10px 60px; /* 内边距调整 */
    z-index: 10; /* 层级最低，确保不遮挡其他元素 */
   box-sizing: border-box;
}

/* 修复Swiper导航按钮层级（避免被箭头覆盖时冲突） */
.swiper-button-next, .swiper-button-prev {
    z-index: 100; /* 低于箭头z-index:9999，但高于轮播内容 */
}
.swiper-pagination {
    z-index: 100; /* 分页器层级也低于箭头 */
}
.navbar-light .navbar-toggler{border-color: rgb(255 255 255 / 65%);}
.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
@media (max-width: 1600px) {
.arrow-left { bottom: 220px; }
.arrow-right { bottom: 180px;}
}
@media (max-width: 1400px) {
.arrow-left { bottom: 200px; }
.arrow-right { bottom: 160px;}
.navbar-light .navbar-text{ display: none;}
.navbar-expand-lg .navbar-nav { width: 100%;  justify-content: right;}
}
@media (max-width: 1300px) {
.in_prod{position: absolute; width:100%; left: 0px; bottom: 140px;}
.prod-arrow{position: fixed;left: 20px; display: none}
.arrow-left { bottom: 210px; }
.arrow-right { bottom: 210px; left: 70px;}
.in_footer{ position: inherit; background:#142301;  margin-top: 0px; text-align: center;  padding-bottom: 20px;}
}
@media (max-width: 991px){
	.navbar{background: #0f1d15e3;}
	.navbar-expand-lg .navbar-nav{background-color: #0f380f;}
	.in_prod p { font-size: 14px; }
	.navbar-brand img{ width: 170px;}
	
}
@media (max-width: 560px){
	.in_banner{ display: none;}
.in_banner_x{ display: block; height: calc(100vh - 112px);}
	.in_prod p { font-size: 12px;}
}
.swiper {
      width: 100%;
      height: 100%;
    }
@media (max-width: 560px){.swiper {
      width: 80%;
      height: 100%;
    }}