body {
    height: 100%;
    overflow: hidden; /* 防止页面滚动条 */
}
#main-header {
    box-sizing: border-box;
    padding: 0 3.5%;
    height:90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:transparent;
    position: fixed;
    top:0;
    color:#fff;
    width:100vw;
    z-index:100;
}

#main-header a {
    color:#fff;
    font-size: var(--font-size-base);
}

.nav-item:hover {
    color: #0056b3;
}

.nav-active {
    color: #0056b3 !important;
    font-weight: bold;
}

.logo-m {
    width:16vw;
}

#main-header .list-item {
    width:60vw;
    display: flex;
    justify-content: space-around;
    margin:0 4% 0 8%;
}


section.page {
    width: 100vw;   /* 每一页宽度是屏幕宽度 */
    height: 100vh;  /* 每一页高度是屏幕高度 */
}

section.page h1 {
    font-size: 2em;
    margin: 0;
}


/* 右侧导航点 */
.right-nav-dots {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.right-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.right-dot.active {
    background: white;
    transform: scale(1.3);
}

/* 轮播图样式 */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh; /* 使轮播图占据整个屏幕 */
    overflow: hidden; /* 隐藏超出容器部分 */
}

.carousel-container {
    display: flex;
    transition: transform 1s ease; /* 平滑过渡效果 */
}

.carousel-slide {
    width: 100vw; /* 每张图片宽度占据整个屏幕 */
    height: 100vh; /* 每张图片高度占据整个屏幕 */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片覆盖整个容器 */
}

/* 控制按钮样式 */
.carousel-button {
    position: absolute;
    bottom: 12vh;
    transform: translateY(-50%);
    background: none;
    color: white;
    border: none;
    font-size: var(--font-size-base);
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel .lb-num {
    position: absolute;
    bottom: 12vh;
    left: 10vw;
    transform: translateY(-50%);
    background: none;
    color: white;
    border: none;
    font-size: var(--font-size-base);
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: 7.5vw;
}

.next {
    left: 14vw;
}

.carousel-body {
    position: relative;
    bottom: -50px; /* Start position outside the view */
    font-size: 24px;
    color: white;
    font-weight: bold;
    opacity: 0;  /* 初始隐藏 */
    transition: opacity 0.5s ease-out; /* 额外增加过渡 */
}

/* 只对当前激活的轮播图的文字应用动画 */
.carousel-slide.active .carousel-body {
    animation: slideIn 2s ease-in-out forwards;
}

.carousel-title {
    font-size: var(--font-size-large);
    line-height: 1.5;text-shadow: #000 1px 1px 1px;font-weight: bold;
}

@keyframes slideIn {
    0% {
        bottom: -50px; /* Start from bottom */
        left: 7.5vw;   /* 让文字偏移到 7.5vw */
        opacity: 0;
    }
    100% {
        bottom: 80%; /* Move to the middle */
        left: 7.5vw;   /* 让文字偏移到 7.5vw */
        transform: translateY(50%); /* Adjust for perfect centering */
        opacity: 1;
    }
}
.carousel-subtitle {
    font-size: var(--font-size-big);
    line-height: 1.5;
    display: flex;
    align-items: center;
}
.carousel-subtitle i {
    display: inline-block;
    background: #ffffff;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    transform: rotate(45deg);
}
/* 轮播图样式 */

/****page-container-2*********************************************/
.page-container-2 {
    display:flex;background-image: url('/assets/images/index/2.jpg');
    width:100vw;
    height:100vh;
    background-size: cover;
}
.left-container-2 {
    color:#fff;
    width:50vw;
    margin-left:7.5vw;
    display:flex;flex-direction: column;
    justify-content: center;
}
.container-title-2 {
    text-align:left;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight:bold;
}
.container-subtitle-2 {
    text-align:left;
    margin-top:4px;
    font-size:var(--font-size-small);
}
.container-description-2 {
    text-align:left;
    margin-top:40px;
    font-size:var(--font-size-big);
    font-weight:bold;
}
.c-content-2 {
    text-align:left;
}
.c-content-2 p {
    line-height:var(--font-line-height);
    text-indent: 2em;
    font-size:var(--font-size-small);
}
.c-detail-2 {
    text-align:left;
    margin-top:40px;
}

.left-content-2 {
    width:70%;
}
.c-detail-btn-2 {
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    width:152px;height:36px;
    font-size:var(--font-size-small);
    background-image: url('/assets/images/icon/button-about-company.png');
    background-size: cover;
}

.c-right-2 {
    margin-left:11vw;width:34vw;
    color:#fff;
    height:calc(100% - 90px);
    margin-top:90px;
    border-left:1px solid #ffffff80;
}
.c-right-2-item {
    width:100%;
    border-bottom:1px solid #ffffff80;
    box-sizing: border-box;
    height:16.66%;
}

/****page-container-3*********************************************/
.page-3 {
    background-image:url('/assets/images/index/3.1.jpg');
    background-size: cover;
    /*background-color: #e8f4fd;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.contain-3 {
    height: calc(100vh - 90px);
    margin-top:90px;
    width:85vw;
}
.c-title-3 {
    color:#fff;text-align: center;
    margin-top:4vh;
}

/* 产品图片 */
.product-3 {
    position: relative;
    width: 32%;
    margin: 2vh;
    overflow: hidden; /* 防止放大后图片溢出 */
    border-radius: 8px;
}

.product-image {
    width: 96%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.product-3:hover .product-image {
    /*transform: scale(1.1);*/
}
.product-3 .product-name {
    background-color: #fff;
    border-top:1px solid #dfdfdf;
    line-height:2;
    text-align: center;
    padding:1vh 0;
}

.product-3:hover .product-name {
    background-color:#0054A3;
    color:#fff;
}
.product-img-div {
    background-color: #fff;
    display: flex;
    justify-content: center;
}

/*.product-overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-color: rgba(0, 0, 0, 0.5); !* 半透明遮罩层 *!*/
/*    z-index: 1; !* 确保遮罩层在图片下方 *!*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

/*.product-3:hover .product-overlay {*/
/*    opacity: 1;*/
/*}*/
/****page-container-4*********************************************/
.page-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:url('/assets/images/index/4.1.jpg');
    background-size: cover;
}
.c-container-4 {
    width:85vw;
    align-items: center;
    margin-top:90px;
    height: calc(100vh - 90px);
}
.application-cases {
    position: relative;
    width: 15%;
    height: 100%;
}
.c-title-4 {
    color:#fff;text-align: center;
    margin-top:4vh;
}
.c-content-4 {
    width:85vw;
    margin-top:5vh;
    height:62vh;
}
.case-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 2;
    width: 100%;
    background: #0000008a;
    padding: 1.4vh;
    font-size: var(--font-size-small);
    box-sizing: border-box;
}
/****page-container-5*********************************************/
.page-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.c-container-5 {
    margin-top:90px;
    height: calc(100vh - 90px);
    flex:1;width:100vw;
    background-image: url('/assets/images/index/5-1.jpg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.img-5 {
    width:100%;
    height:100%;
    object-fit: cover;
}