body {
    margin: 0;
    padding: 0;
}

.banner {
    height: 46.875vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.banner .mask-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 19vw;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 13.07%, rgba(34, 34, 34, 0.24) 44.03%, rgba(102, 102, 102, 0) 63.15%);
}

.banner-txts {
    position: absolute;
    z-index: 1;
    width: 72.50vw;
    height: 6.20vw;
    margin-top: 38vw;
    margin-left: 13.75vw;
    border-radius: 0.31vw;
    background-color: #DAF6FF33;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.banner-txts .line1 {
    background-color: #FFFFFF66;
    width: 0.05vw;
    height: 4.17vw;
}

.banner-txts .txts-item .sub {
    text-align: center;
    font-size: 1.25vw;
}
.banner-txts .txts-item .sup {
    text-align: center;
    font-size: 1.82vw;
    font-weight: bold;
}

.nav2 {
    width: 100%;
    background-color: #1D1D1D;
}

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

.nav2 .nav21 {
    cursor: pointer;
    width: 6.25vw;
    height: 2.50vw;
    line-height: 2.50vw;
    font-size: 0.83vw;
    color: #CFCDCD;
    text-align: center;
    text-decoration: none;
}

.nav2 .nav21:hover {
    font-weight: bold;
}

.nav2 .nav21-active {
    color: #17BBEF;
    font-weight: bold;
}


#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 .btn12 {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    margin-left: 10.42vw;
    margin-top: -1vw;
    margin-bottom: 1.67vw;
}

#design .btn12 .btn1 {
    cursor: pointer;
    width: fit-content;
    padding: 0 1vw;
    height: 2.60vw;
    line-height: 2.40vw;
    border-radius: 2.08vw;
    text-align: center;
    font-weight: 700;
    font-size: 0.94vw;
    letter-spacing: 0%;
    color: #000000;
    background-color: #FFFFFF;
    border: 0.10vw solid;
}

#design .btn12 .btn1:first-child {
    margin-right: 1vw;
}

#design .btn12 .btn1-active {
    background-color: #000;
    color: #FFF;
}

#design .swiper12 {
    width: 100%;
    overflow: hidden;
}

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

#design .swiper12 .swiper2a .swiper-slide,
#design .swiper12 .swiper2b .swiper-slide {
    width: 34.17vw;
    height: 24.06vw;
}

#design .swiper1 .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%);
}

#power {
    position: relative;
    background-color: #222A35;
    width: 100%;
    height: 98.39vw;
    box-sizing: border-box;
    padding: 9.38vw 10.94vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.6667vw;
}
#power>img {
    width: 100%;
}

.power-item {
    position: relative;
    border-radius: .3125vw;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.power-item-title {
    font-weight: 700;
    font-size: 3.3333vw;
    line-height: 100%;
    color: #FFFFFF;
    margin-bottom: .625vw;
}
.power-item-num {
    font-weight: 700;
    font-size: 2.0833vw;
    line-height: 100%;
    text-align: center;
    color: #FFFFFF;
    margin-top: 7.2917vw;
}
.power-item-num span {
    font-weight: 700;
    font-size: 5.2083vw;
    line-height: 100%;
    text-align: center;
    vertical-align: baseline;
}
.power-item-desc {
    font-weight: 500;
    font-size: 1.0417vw;
    /* line-height: 100%; */
    color: #FFFFFF;
}
.power-item-desc span {
    font-weight: 700;
    font-size: 1.25vw;
    line-height: 100%;
    color: #17BBEF;
}

.power-item-mark {
    font-size: 0.52vw;
    color: #7C7C7C;
    text-align: center;
    margin-top: auto;
    margin-bottom: 1vw;
}

.power-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.power-item:first-child {
    padding-top: 2.7083vw;
    padding-left: 4.4792vw;
    padding-right: 3.9063vw;
    width: 37.2917vw;
    height: 44.1667vw;
    display: flex;
    flex-direction: column;
}
.power-item:nth-child(2) {
    padding: 2.5vw 3.125vw 0 3.75vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 37.2917vw;
    height: 33.2813vw;
}
.power-item:nth-child(2) .power-item-desc {
    margin-top: 1.0417vw;
    width: 17.3958vw;
    text-align: center;
}
.power-item:nth-child(3) {
    padding-top: 2.7083vw;
    padding-left: 3.6979vw;
    padding-right: 10.4167vw;
    width: 38.3333vw;
    height: 33.75vw;
}
.power-item:nth-child(4) {
    padding: 2.9688vw 2.8125vw 0 5.1042vw;
    width: 38.3333vw;
    height: 43.4375vw;
    display: flex;
    flex-direction: column;
}
.power-item:hover::after {
    display: none;
}

#reliability {
    width: 100%;
    height: 55.83vw;
    overflow: hidden;
    position: relative;
    background-color: #1A1A1C;
}

#reliability>video {
    /* width: 80%;
    left: 10%;
    top: 5vw;
    position: absolute; */
    width: 100%;
}

#reliability>.txt {
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    font-size: 3.75vw;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.infos {
    background: linear-gradient(360deg, #1C222B -16.85%, #060709 73.95%);
    width: 100%;
    box-sizing: border-box;
    padding: 5.73vw 10vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5104vw;
    justify-content: center;
}
.infos-item {
    position: relative;
    background-color: #FFFFFF14;
    border-radius: 0.31vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.infos-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.infos-item:hover::after {
    display: none;
}
.infos-item-title {
    font-weight: 700;
    font-size: 1.9792vw;
    color: #A2D2FF;
    line-height: 100%;
}
.infos-item-desc {
    margin-top: 1.0417vw;
    font-weight: 600;
    font-size: 1.25vw;
    color: #CFCDCD;
    flex: 1;
}
.infos-item-bottom {
    display: flex;
    height: 7.0833vw;
}
.infos-item-bottom-item {
    margin-right: 2.0833vw;
}
.infos-item-bottom-item-text {
    font-weight: 700;
    font-size: 3.125vw;
    line-height: 100%;
    color: #fff;
}
.infos-item-bottom-item-type {
    font-weight: 600;
    font-size: 1.25vw;
    color: #CFCDCD;
}
.infos-item:first-child {
    width: 44.1667vw;
    height: 21.4063vw;
    padding-top: 3.2292vw;
    padding-left: 2.9167vw;
    padding-right: 5.5208vw;
}
.infos-item:nth-child(2) {
    /* width: 30.9375vw; */
    padding-top: 3.3854vw;
    padding-left: 2.9167vw;
    padding-right: 3.6979vw;
    width: 31.3vw;
    height: 21.4063vw;
}
.infos-item:nth-child(3) {
    padding-top: 3.2292vw;
    padding-left: 2.4479vw;
    padding-right: 1.9792vw;
    width: 24.4792vw;
    height: 27.2917vw;
}
.infos-item:nth-child(4) {
    padding-top: 3.2292vw;
    padding-left: 2.9167vw;
    padding-right: 2.9688vw;
    width: 24.4792vw;
    height: 27.2917vw;
}
.infos-item:nth-child(5) {
    padding-top: 3.2292vw;
    padding-left: 2.3958vw;
    padding-right: 1.9271vw;
    /* width: 24.4271vw; */
    width: 24.9271vw;
    height: 27.2917vw;
}

.infos .info-2 {
    justify-content: space-around;
    padding: 2vw;
    height: fit-content;
} 

.infos .info-2 .infos-item-desc {
    margin-top: 1.5vw;
}

.infos .info-oneline {
    width: 77.08vw;
}  
#sustainability {
    position: relative;
    width: 100%;
    height: 46.88vw;
}

#sustainability>img {
    position: absolute;
    width: 100%;
}

#sustainability .sup {
    position: relative;
    color: #fff;
    font-size: 3.75vw;
    text-align: center;
    padding-top: 7.81vw;
    font-weight: bold;
}

#sustainability .sub {
    position: relative;
    font-size: 1.56vw;
    text-align: center;
    color: #D9D9D9;
    margin-top: 2.60vw;
}

.calculator {
    padding-top: 8.33vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 3.65vw;
}

.calculator .sup {
    font-size: 3.75vw;
    font-weight: bold;
    color: #000;
    margin-bottom: 1.56vw;
}

.calculator .progress {
    display: flex;
}

.calculator .progress .pro {
    margin-right: 1.35vw;
}

.calculator .progress .pro .txt {
    font-size: 1.04vw;
    padding: 0 0.21vw;
    padding-bottom: 0.21vw;
    color: #9D9D9D;
    text-align: center;
}

.calculator .progress .pro .txt-active {
    font-weight: bold;
    color: #404040;
}

.calculator .progress .pro .bar {
    height: 0.47vw;
    background-color: #9D9D9D;
}

.calculator .progress .pro .bar-active {
    background-color: #17BBEF;
}

.calculator .t21 {
    margin-top: 1.04vw;
    margin-bottom: 0.31vw;
    font-size: 1.04vw;
    color: #9D9D9D;
}

.calculator .card2 {
    display: flex;
}

.calculator .card21 {
    width: 41.67vw;
    height: 28.28vw;
    margin-right: 1.04vw;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding-top: 5.21vw;
    padding-left: 5.21vw;
    padding-right: 4.43vw;
}

.calculator .card22 {
    width: 33.75vw;
    height: 28.28vw;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding-left: 3.13vw;
    padding-top: 2.08vw;
}

.calculator .card21 .info {
    border-bottom: 0.05vw solid #B1B1B1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: 1.04vw;
    padding-bottom: 1.46vw;
}

.calculator .card21 .info>input::placeholder {
    font-size: 0.7vw;
    color: #CFCDCD;
}

.calculator .card21 .info:first-child {
    padding-top: 0;
}

.calculator .card21 .info:nth-child(4) {
    border: none;
}

.calculator .card21 .info .t311 {
    font-size: 1.25vw;
    color: #404040;
    font-weight: bold;
}

.calculator .card21 .info>input {
    width: 13.80vw;
    height: 1.77vw;
    border-radius: 0.31vw;
    font-size: 0.83vw;
    border: none;
    padding: 0.21vw 0.52vw;
    box-sizing: border-box;
}

.calculator .card21 .info .t399 {
    position: absolute;
    right: 1.04vw;
    color: #000;
    font-size: 0.83vw;
    font-weight: 600;
}

.calculator .card21>button {
    width: 7.40vw;
    height: 1.56vw;
    border-radius: 1.25vw;
    background-color: #17BBEF;
    color: #FFFFFF;
    text-align: center;
    font-size: 0.83vw;
    border: none;
    position: relative;
    top: 1.04vw;
    left: calc(100% - 7.50vw);
}

.calculator .card22 .t41 {
    color: #404040;
    font-size: 1.67vw;
    font-weight: 600;
}

.calculator .card22 .t42 {
    display: flex;
}

.calculator .card22 .t421 {
    color: #17BBEF;
    font-size: 5.00vw;
    line-height: 5.73vw;
    font-weight: 800;
}

.calculator .card22 .t422 {
    position: relative;
}

.calculator .card22 .t4221 {
    color: #17BBEF;
    font-size: 1.25vw;
    font-weight: 800;
    position: absolute;
    top: 0.63vw;
    left: 1.15vw;
}

.calculator .card22 .t4222 {
    color: #17BBEF;
    font-size: 1.67vw;
    font-weight: 800;
    position: absolute;
    bottom: 0.52vw;
    left: 0.52vw;
}

.calculator .card22 .line1 {
    height: 0.05vw;
    background-color: #B1B1B1;
    width: 26.56vw;
    margin-top: 1.04vw;
    margin-bottom: 2.08vw;
}

.calculator .card22 .t51 {
    width: 28.13vw;
    display: flex;
    justify-content: space-between;
    font-size: 1.25vw;
    color: #404040;
}

.calculator .card22 .t61 {
    width: 28.13vw;
    display: flex;
    justify-content: space-between;
    font-size: 2.19vw;
    font-weight: 600;
    color: #17BBEF;
}

.calculator .t71 {
    margin-top: 2.19vw;
    font-size: 0.73vw;
    color: #CFCDCD;
    letter-spacing: -0.0.10vw;
}

#specification {
    padding-top: 3.65vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 7.08vw;
}

#specification .title {
    font-size: 3.75vw;
    font-weight: bold;
    text-align: center;
    color: #000000;
    margin-bottom: 2.92vw;
}

.calc-table {
}

.calc-table .theader {
    background-color: #F5F7F9;
}

.calc-table .theader {
    box-sizing: border-box;
    display: flex;
}

.calc-table .left{
    font-size: 1.35vw;
    font-weight: bold;
    color: #17BBEF;
    padding-left: 3.13vw;
    width: 23.13vw;
    border-right: 0.05vw solid #EFEFEF;
    box-sizing: border-box;

}

.calc-table .theader .left{
    height: 8.28vw;
    line-height: 8.28vw;
}

.calc-table .theader .xx-right {
    flex: 1;
}

.calc-table .theader .xx-right .xr1 {
    display: flex;
    margin-top: 1.56vw;
    padding-bottom: 0.73vw;
    border-bottom: 0.05vw solid #EFEFEF;
}
.calc-table .theader .xx-right .xr1 .xx11 {
    flex: 1;
    text-align: center;
    border-right: 0.05vw solid #EFEFEF;
}

.calc-table .theader .xx-right .xr1 .xx111 {
    font-size: 1.35vw;
    font-weight: bold;
    color: #17BBEF;
    margin-bottom: 0.42vw;
}

.calc-table .theader .xx-right .xr1 .xx112 {
    font-size: 0.73vw;
}

.calc-table .theader .xx-right .xr1 .xx112 > a {
    color: #17BBEF;
    text-decoration: underline;
}

.calc-table .theader .xx-right .xr1 .xx112 > a:first-child {
    margin-right: 0.4vw;
}

.calc-table .theader .xx-right .xr2 {
    display: flex;
}

.calc-table .theader .xx-right .xr2  .xx21 {
    flex: 1;
    text-align: center;
    color: #7C7C7C;
    font-size: 1.35vw;
    font-weight: 600;
    border-right: 0.05vw solid #EFEFEF;
    line-height: 2.50vw;
}

.calc-table .tbody .item .left{
    height: 3.54vw;
    line-height: 3.54vw;
    background-color: #F5F7F9;
}

.calc-table .tbody .item2 .left{
    height: 4.90vw;
    line-height: 1.56vw;
    padding-top: 0.94vw;
}

.calc-table .tbody .spacee,
.calc-table .tbody .item {
    width: 100%;
    display: flex;
}

.calc-table .tbody .right {
    flex: 1;
    display: flex;
}
.calc-table .tbody .right .t1 {
    flex: 1;
    height: 1.77vw;
    background: #fff;
    border-right: 0.05vw solid #EFEFEF;
}
.calc-table .tbody .right .t2 {
    flex: 1;
    color: #9D9D9D;
    background: #F5F7F9;
    font-size: 1.35vw;
    line-height: 3.54vw;
    text-align: center;
    border-right: 0.05vw solid #EFEFEF;
}

.calc-table .tbody .right .t21 {
    box-sizing: border-box;
    padding-top: 0.83vw;
}

.sticky-element {
    position: sticky;
    z-index: 9;
    top: 0; /* 当滚动到距离顶部 0.00vw 时固定 */
}