body {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 1400px; 
    overflow-x: hidden;
    /* overflow: hidden; */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
@font-face {
        font-family: '庞门正道粗书体';
        src: url(../font/庞门正道粗书体6.0.ttf);

    }
.text4 ,.text6 ,.text11,.text19{
    font-family: '庞门正道粗书体';
}
html {
    font-size: min(max(14px, 1.8vw), 18px);
}
@media (max-width: 900px) {
    .box, .box2, .box3, .box4 {
        flex-direction: column;
        gap: 4vw;
        padding: 2vw;
    }
}
nav {
    position: fixed;
    z-index: 4;
    /* top: 0; */
    background-color: #A11F1F;
    min-height: clamp(50px, 8vh, 70px); 
    /* box-shadow: 0 1px 2px #b7b3ab; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(10px, 3%, 30px); 
    width: 100%;
    transition: background-color 0.3s;
}
.nav-transparent {
    background-color: rgba(161, 31, 31, 0.8); /* 半透明 */
    transition: background-color 0.3s;
}
.navbar-logo {
    height: 100%;
    display: flex;
    align-items: center;
}
.navbar-logo img {
    height: clamp(24px, 3.5vw, 40px);
    width: auto;
    max-width: 100%;
}
.navbar-menu {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap; 
    gap: 0.5vw; 
}
.navbar-item-shici,
.navbar-item {
    min-width: max(70px, 6vw); 
    padding: 0 clamp(8px, 0.8vw, 16px); 
    line-height: clamp(40px, 6vh, 60px);
    text-align: center;
    position: relative;
    white-space: nowrap;
}
.navbar-item-shici a,
.navbar-item a {
    font-size: clamp(0.8rem, 1.1vw, 1rem); 
    color: #ffffff;
    display: block;
    height: 100%;
    transition: all 0.3s ease;
}
.navbar-item-shici a {
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
}
.navbar-item-shici a:hover,
.navbar-item a:hover {
    background-color: rgba(192, 192, 193, 0.3);
}
main{
    position: relative;
    width: 100%;
    /* height: 4420px; */
    margin: auto;
}
.box{
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100vh;
    margin: auto;
    display: flex;
}
.box2{
    display: flex;
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100vh;
    margin: auto;
    /* transform: translate3d(0px, -1080px, 0px);
    transition: all  0.2s ease; */
    flex-direction: column;
}
.box3{
    /* display: block; */
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100vh;
    margin: auto;
    /* transform: translate3d(0px, -2160px, 0px);
    transition: all  0.2s ease; */
}
.box4{
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100vh;
    margin: auto;
    /* transform: translate3d(0px, -3240px, 0px);
    transition: all  0.2s ease; */
}
.box1{
    position: absolute;
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    margin: auto;
    padding: 0;
    width: 55%;
    height: 50%;
    top: 10%;
    left: 10%; 
    letter-spacing: 2px;
    transition: all 0.2s ease;
}
.box1:hover{
    transform: scale(1.02);
}
.text1{
    font-size: 22px;
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}
.text2{
    margin: 20px;
    font-size: 16px;
    text-align: center;
}
.text3{
    font-size: 16px;
    padding: 0 240px;
    margin: auto;
}
.box1 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 5%;
    bottom: 5%;
    position: absolute;
}
.box1 a:hover{ 
    text-decoration: underline;
}
.hezi{
    position: absolute;
    background-color: rgba(161, 31, 31, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    height: 50%;
    width: 25%;
    right: 10%;
    top: 10%;
    align-items: center;
}
.text4{
    text-align: center;
    font-size: 60px;
    margin-top: 60px;
    margin-bottom: 40px;
    color: #fff;
}
.text5{
    font-size: 18px;
    padding: 0 40px;
    text-align: center;
    color: #fff;
}
.xiaohezi1{      
    position: absolute;
    width: 80%;
    height: 30%;
    bottom: 5%;
    left: 10%;
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}
.xiaohezi1:hover{
    transform: scale(1.02);
}
.xiaohezi1 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 4%;
    bottom: 10%;
    position: absolute;
}
.xiaohezi1 a:hover{ 
    text-decoration: underline;
}
.text21{
    font-size: 22px;
    margin-top: 40px;
    text-align: center;
}
.text23{
    font-size: 16px;
    margin: 20px;
    padding: 0 200px;
}
.tupian1{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 22%;
    height: auto;
    object-fit: cover;
    z-index: 2;
    /* transform: translateX(-100%);
    transition: all  1s;
    opacity: 0; */
}
/* .tupian2 .active{
    transform: translateX(0);
} */
.tupian2{
    position: absolute;
    top: 7%;
    right: 5%;
    width: 25%;
    height: auto;
    object-fit: cover;
    z-index: 2;
    /* transform: translateX(100%);
    transition: all  1s; */
}
.tupian1, .tupian2 {
    opacity: 0;
    transition: opacity 1s, transform 1s;
}
.tupian1 {
    transform: translateX(-100px);
}
.tupian2 {
    transform: translateX(100px);
}
/* 激活状态：回到原位并显示 */
.tupian-animate-in.tupian1 {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.tupian-animate-in.tupian2 {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
/* 离开时滑出动画 */
.tupian1.tupian-animate-out {
    opacity: 0 !important;
    transform: translateX(-80px) !important;
}
.tupian2.tupian-animate-out {
    opacity: 0 !important;
    transform: translateX(80px) !important;
}
.hezi2{
    position: absolute;
    background-color: rgba(161, 31, 31, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    height: 45%;
    width: 23%;
    left: 8%;
    top: 10%;
    align-items: center;  
}
.text6{
    text-align: center;
    font-size: 60px;
    color: #fff;
    margin: 20px;
}
.text7{
    font-size: 18px;
    padding: 0 30px;
    text-align: center;
    color: #fff;
}
.xiaohezi2{
    position: absolute;
    width: 23%;
    height: 30%;
    top: 60%;
    left: 8%;
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}
.xiaohezi2:hover{
    transform: scale(1.02);

}
.xiaohezi2 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 10%;
    bottom: 10%;
    position: absolute;
}
.xiaohezi2 a:hover{ 
    text-decoration: underline;
}
.text24{
    text-align: center;
    margin: 20px;
    font-size: 22px;
}
.text26{
    font-size: 16px;
    padding: 0 40px;
    margin: auto;
    text-align: center;
}
.hezi3{
    position: absolute;
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    /* margin: auto; */
    padding: 0;
    width: 40%;
    height: 600px;
    top: 10%;
    left: 33%;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}
.hezi3:hover{
    transform: scale(1.02);
}
.hezi3 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 5%;
    bottom: 4%;
    position: absolute;
}
.hezi3 a:hover{ 
    text-decoration: underline;
}
.text8{
    font-size: 22px;
    margin: 30px;
    text-align: center;
}
.text10{
    font-size: 16px;
    margin-top: 100px;
    padding: 0 80px;
}
.hezi4{
    position: absolute;
    background-color: rgba(161, 31, 31, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    width: 80%;
    height: 40%;
    margin: auto;
    display: block;
    left: 10%;
    top: 4%;
}
.text11{
    text-align: center;
    font-size: 60px;
    margin: 30px;
    color: #fff;
}
.text12{
    font-size: 18px;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
}
.hezi5{
    display: grid;
    position: absolute;
    /* background-color: rgb(168, 128, 128); */
    /* box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.25); */
    width: 80%;
    height: 50%;
    left: 10%;
    top: 47%;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
.hezi6{
    position: relative;
    /* height: 100%; */
    min-width: 250px;
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}
.hezi6:hover{
    transform: scale(1.02);
}
.text13{
    text-align: center;
    margin: 10px;
    font-size: 20px;
}
.text15{
    font-size: 16px;
    padding: 0 100px;
    text-align: center;
}
.rongqi1 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 3%;
    bottom: 6%;
    position: absolute;
}
.rongqi1 a:hover{ 
    text-decoration: underline;
}
.rongqi2 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 3%;
    bottom: 6%;
    position: absolute;
}
.rongqi2 a:hover{ 
    text-decoration: underline;
}
.rongqi3 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 3%;
    bottom: 6%;
    position: absolute;
}
.rongqi3 a:hover{ 
    text-decoration: underline;
}
.rongqi4 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 3%;
    bottom: 6%;
    position: absolute;
}
.rongqi4 a:hover{ 
    text-decoration: underline;
}
.hezi7{
    background-color: rgba(252, 252, 252, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    position: absolute;
    width: 80%;
    height: 50%;
    left: 10%;
    top: 5%;
    transition: all 0.2s ease;
}
.hezi7:hover{
    transform: scale(1.02);
}
.hezi7 a{
    list-style: none;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    right: 3%;
    bottom: 6%;
    position: absolute;
}
.hezi7 a:hover{ 
    text-decoration: underline;
}
.text16{
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 40px;
}
.text18{
    font-size: 16px;
    padding: 0 260px;
    margin: auto;
}
.hezi8{
    position: absolute;
    display: flex;
    width: 80%;
    height: 35%;
    left: 10%;
    top: 58%;
    gap: 30px;
    background-color: rgba(161, 31, 31, 1);
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: space-between;
}
.text19{
    font-size: 60px;
    margin: 0;
    color: #fff;
    padding: 0 30px;
    white-space: nowrap;
}
.text20{
    font-size: 18px;
    color: #fff;
    margin: 50px;
    padding: 0 30px;
    text-align: center;
}
.banwei{
    background-color: #333;
    height: 30vh;
    width: 100%;
    bottom: -7%;
    z-index: 3;
    position: absolute;z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 元素之间的间距 */
}
.gongan-icon {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
.banwei  a ,.banwei p{
    color: #ffffff;
    font-size: 14px;
}