.nav-list {
    width: 100%;
    background-color: #00274080;
}

.sticky-element{
    position: sticky;
    /* z-index: 999; */  /* 挡住了顶部导航的悬浮菜单 */
    z-index: 9;
    top: 0;
}

.nav-box {
    width: 40.63vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-box .nav-item {
    cursor: pointer;
    width: 6.25vw;
    height: 2.50vw;
    line-height: 2.50vw;
    font-size: 0.83vw;
    color: #FFF;
    text-align: center;
    text-decoration: none;
}
.nav-box .nav-item-active {
    color: #17BBEF;
    font-weight: bold;
    border-bottom: 0.16vw solid;
}

.design-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.design-container .design-background-img {
    width: 100%;
    height: 100%;
}

.design-container .info {
    width: 35.02vw;
    position: absolute;
    top: 38%;
    left: 15%;
    color: #fff;
}

.design-container .info h2 {
    font-size: 3vw;
    font-weight: 700;
}

.design-container .info h4 {
    width: 90%;
    font-size: 1.43vw;
    font-weight: 400;
    margin-top: 0.9vw;
    word-spacing: 0.26vw;
}

.bottom-content {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-info {
    display: flex;
    width: 63vw;
    padding: 0 1vw;
    box-sizing: border-box;
    height: 7vw;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 0.52vw;
    color: #fff;
    background-color: #00274080;
}

.bottom-info .info-item {
    line-height: 1;
    text-align: center;
    position: relative;
    flex: 1;
}

.bottom-info .info-item:last-child {
    padding-left: 1vw;
}

.bottom-info .info-item h4 {
    font-size: 1.01vw;
    font-weight: 400;
}

.bottom-info .info-item h3 {
    margin-top: 0.78vw;
    font-size: 1.62vw;
    font-weight: 700;
}

.h-d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0vw;
    width: 0.05vw;
    height: 4vw;
    background-color: #fff;
}

.h-d::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0vw;
    width: 0.05vw;
    height: 4vw;
    background-color: #fff;
}

.power-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
}

.power-container .content {
    position: relative;
    padding: 9.21vw 4.73vw 5.52vw;
}

.power-container .content .left-img {
    height: 100%;
    width: 100%;
}

.power-container .content .txt-img-2 {
    position: absolute;
    right: 5.52vw;
    bottom: 5.52vw;
}

.power-container .content .txt {
    width: 41.98vw;
    height: 22.65vw;
    background: #F9F9F9;
}

.power-container .content .txt .txtt {
    padding: 1.45vw 3vw;
}

.power-container .content .txt .sup {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: #000;
    margin-bottom: 0.52vw;
}

.power-container .content .txt .sup-a {
    font-size: 1.77vw;
    font-weight: bold;
    width: fit-content;
    cursor: pointer;
}

.power-container .content .txt .sup-b {
    width: 2.08vw;
    height: 2.08vw;
    line-height: 2.08vw;
    text-align: center;
    font-size: 2.29vw;
}

.power-container .content .txt .txtt-active .sup {}

.power-container .content .sub {
    height: 0;
    overflow: hidden;
    transition: all 1s ease;
}

.power-container .content .txt .txtt-active .sub {
    height: 4.6875vw;
    line-height: 0.92vw;
    padding-bottom: 1.04vw;
    transition: all 1s ease;
    font-size: 0.73vw;
    word-spacing: 0.10vw;
}

.power-container .content .txt .sub {
    font-size: 1.04vw;
    color: #777777;
}

.power-container .content .txtt-active {
    background-color: #F4F4F4;
}

.reliability-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #000;
    padding: 3.96vw 12.76vw 0 14.58vw;
}

.reliability-container .header-title {
    color: #fff;
    text-align: center;
    margin-bottom: 5vw;
}

.reliability-container .header-title h2 {
    font-size: 2.34vw;
    font-weight: 700;
}

.reliability-container .header-title h4 {
    font-size: 1.46vw;
    font-weight: 700;
}

.reliability-container .strik-lay {
    position: sticky;
    top: 3.96vw;
}


.reliability-container .sticky-wrapper {
    position: sticky;
    top: 14.16vw;
}

.img-list .text-val {
    width: 26.04vw;
    color: #fff;
}

.img-list .text-val h2 {
    font-size: 2.4vw;
    font-weight: 700;
    margin-top: 2.8vw;
}

.img-list .text-val h5 {
    font-size: 1.1vw;
}

.reliability-container {
    position: relative;
    min-height: 300vh;
    /* 至少3屏高度，确保足够滚动空间 */
}

.sticky-wrapper {
    position: sticky;
    height: 100vh;
    /* 占满整个视口高度 */
    overflow: hidden;
    /* 防止内容溢出 */
}

.img-list {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    justify-content: space-between;
      transform-origin: right top;
     transform: scale(0.711) translateY(205%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 当前活动的 img-list 显示 */
.img-list.active {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
     transform-origin: right top;
}

/* 上一张图片向上滑出 */
.img-list.prev {
    opacity: 0;
    transform-origin: right top;
    /* 确保缩放后仍靠右对齐 */

    transform: scale(0.711) translateY(-50%) !important;
}

/* 下一张图片向下滑出 */
.img-list.next {
    opacity: 0.4;
    transform: translateY(103%);
}

/* 下一张图片向下滑出 */
.nextImg {
    transform-origin: right top;
    transform: scale(0.711);
}

.nextText{
    opacity: 0;
}

.text-val {
    width: 40%;
    padding-left: 5%;
}

.img-wrapper {
    width: 41.67vw;
    padding-top: 3.13vw;
    display: flex;
    justify-content: flex-end;
}

.img-wrapper > img {
    width: 100%;
    border-radius: 0.52vw;
}

.scale0711 {
    transform: scale(0.711);
    transform-origin: right top;
    /* 确保缩放后仍靠右对齐 */
}

.content-section {
    height: 100vh;
    display: flex;
    scroll-snap-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.text-content,
.image-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

.image-content img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* 默认状态：非当前项的文字隐藏，图片半透明 */
.content-section:not(.active) .text-content {
    opacity: 0;
    transform: translateX(-1.04vw);
}

.content-section:not(.active) .image-content img {
    opacity: 0.4;
}

/* 当前激活项样式 */
.content-section.active .text-content {
    opacity: 1;
    transform: translateX(0);
}

.content-section.active .image-content img {
    opacity: 1;
}

/* 特殊处理前一项和后一项的图片位置 */
.content-section.prev-active .image-content,
.content-section.next-active .image-content {
    position: absolute;
    width: 40%;
}

.content-section.prev-active .image-content {
    right: 60%;
}

.content-section.next-active .image-content {
    left: 60%;
}


#design {
    padding-top: 6.77vw;
}

#design .swiper-pagination {
    border-radius: 0.21vw;
    overflow: hidden;
}

#design .swiper-pagination-progressbar-fill {
    background: #000;
}

#design .sup {
    font-weight: bold;
    font-size: 3.75vw;
    color: #000000;
    padding-left: 10.42vw;
}

#design .sub {
    font-size: 1.56vw;
    padding-left: 10.42vw;
    color: #9D9D9D;
    padding-bottom: 3.91vw;
}

#design .swiper1 {
    margin-left: 10.42vw;
    width: calc(100% - 10.42vw);
    height: 100%;
    position: relative;
    overflow: hidden;
}

#design .swiper-slide {
    width: 34.17vw;
    height: 24.06vw;
}


.swiper-button-prev,
.swiper-button-next {
    margin-left: 4.69vw;
    margin-right: 4.69vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: none;
    width: 2.08vw;
    height: 2.08vw;
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 50%;
    transition: background-color 0.2s;
}

.swiper-button-prev img,
.swiper-button-next img {
    width: 1.56vw;
    height: 1.56vw;
}

/* 悬停效果 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(128, 128, 128, 0.5);
    /* 深灰色背景 */
}

#design .swiper-button-prev:after,
#design .swiper-button-next:after {
    content: '';
}


#design .swiper-ctrl {
    margin-top: 0.52vw;
    position: relative;
}

#design .swiper-ctrl .swiper-pagination {
    position: relative;
    width: 13.54vw;
    height: 0.21vw;
    left: 7.81vw;
    top: 1.16vw
}

#design .swiper-ctrl .swiper-button-next,
#design .swiper-ctrl .swiper-button-prev {
    position: relative;
    left: 0;
    top: 0;
    margin-left: 0;
    margin-top: 0;
}

#design .swiper-ctrl .swiper-button-next {
    transform: translate(200%, -100%);
}

.spe-container {
    position: relative;
    padding: 4vw 6.72vw;
    background: #ffffff;
}

.spe-container h2 {
    font-size: 3.12vw;
    font-weight: 700;
    text-align: center;
}

.spe-container .table-box {
    height: 100%;
    width: 100%;
    margin-top: 1vw;
}

.spe-container .table-box .dis-flex {
    display: flex;
}

.spe-container .table-box .addr-link {
    font-size: 0.73vw;
    color: #17BBEF;
    text-decoration: underline;
    margin-right: 0.83vw;
    font-weight: normal;
}

.spe-container .table-box .flex1 {
    flex: 1;
    border-left: 0.05vw solid #E8E8E8;
}

.spe-container .table-box .flex2 {
    flex: 2;

}

.spe-container .table-box .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;

}

.spe-container .table-box .height3 {
    height: 4.8vw;
}

.spe-container .table-box .mt70 {
    margin-top: 3vw;
}

.spe-container .table-box .height1 {
    height: 3.29vw;
}

.spe-container .table-box .mt20 {
    margin-top: 1.56vw;
}

.spe-container .table-box .text-bule {
    color: #17BBEF;
    font-size: 1vw;
    font-weight: 600;
}

.spe-container .table-box .text-gray {
    color: #9D9D9D;
    font-size: 0.85vw;
    font-weight: 600;
}



.spe-container .table-box .gray {
    background-color: #F5F7F9;
}

.spe-container .table-box .white {
    background-color: #fff;
}