.visual-swiper {
    --swiper-pagination-bottom: calc(80 * var(--rpx));
    --swiper-pagination-bullet-width: clamp(calc(30 * var(--rpx)), 4.6875vw, calc(90 * var(--rpx)));
    --swiper-pagination-bullet-height: 3px;
    --swiper-pagination-bullet-border-radius: 300px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, .3);
    --swiper-pagination-bullet-inactive-opacity: 1;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin-top: var(--header-h);
}

@supports (height: 100dvh) {
    .visual-swiper .visual-swiper {
        height: 100dvh;
    }
}

.visual-swiper .swiper-wrapper {
    height: 100%;
}

.visual-swiper .swiper-slide {
    position: relative;
}

.visual-swiper .swiper-slide__img {
    width: 100%;
    height: 100%;
}

.visual-swiper .swiper-slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-swiper .swiper-slide__content {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.visual-swiper .swiper-slide__content .title {
    font-size: var(--font-size-68);
}

.introduce-layer .introduce-wrapper {
    margin-right: clamp(calc(20 * var(--rpx)), 7.08333vw, calc(136 * var(--rpx)));
}

.introduce-layer .introduce-wrapper .introduce-info {
    width: 100%;
    max-width: calc(440 * var(--rpx));
    font-size: var(--font-size-18);
    font-weight: 300;
    line-height: 1.5;
    margin: clamp(calc(30 * var(--rpx)), 5.46875vw,calc(105 * var(--rpx))) auto 0;
}

.introduce-layer .introduce-wrapper .introduce-info .more-btn {
    margin-top: calc(40 * var(--rpx));
}

.introduce-layer .introduce-wrapper .introduce-logo {
    max-width: calc(536 * var(--rpx));
    width: 100%;
    margin-left: auto;
    margin-top: calc(40 * var(--rpx));
}

.introduce-layer .introduce-img {
    aspect-ratio: 480 / 640;
    max-width: calc(480 * var(--rpx));
    width: 100%;
}

.introduce-layer .circle-box {
    max-width: 100%;
    width: fit-content;
    margin: calc(40 * var(--rpx)) auto 0;
    position: relative;
    z-index: 1;
}

.introduce-layer .circle-box__content {
    height: calc(490 * var(--rpx));
    gap: 0 calc(170 * var(--rpx));
}

.introduce-layer .circle-box__item {
    text-align: center;
    height: calc(240 * var(--rpx));
    aspect-ratio: 1 / 1;
    font-size: var(--font-size-14);
    position: relative;
    background-color: #fff;
    z-index: 1;
    cursor: pointer;
}

.introduce-layer .circle-box__item::after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #fff;
    z-index: -1;
}

.introduce-layer .circle-box__item.active {
    height: calc(490 * var(--rpx));
    transition: height .3s linear;
}

.introduce-layer .circle-box__item-content {
    height: 100%;
    border-radius: 50%;
    border: calc(30 * var(--rpx)) solid #78BE21;
    position: relative;
    z-index: 2;
    transition: border .3s linear;
}

.introduce-layer .circle-box__item:nth-of-type(2) .circle-box__item-content {
    border-color: #007CBA;
}

.introduce-layer .circle-box__item:nth-of-type(3) .circle-box__item-content {
    border-color: #2A2B8A;
}

.introduce-layer .circle-box__item.active .circle-box__item-content {
    border-color: transparent;
}

.introduce-layer .circle-box__item-content .circle-box__img {
    height: calc(120 * var(--rpx));
    aspect-ratio: 181 / 120;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.introduce-layer .circle-box__item.active .circle-box__item-content .circle-box__img {
    position: static;
    top: 0;
    left: 0;
    transform: translate(0, 0);
}

.introduce-layer .circle-box__item-content .circle-box__img img {
    opacity: 0;
    transition: opacity .3s linear;
}

.introduce-layer .circle-box__item.active .circle-box__img img {
    opacity: 1;
}

.introduce-layer .circle-box__item-content .circle-box__img-content {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.introduce-layer .circle-box__item-content .circle-box__img-content .title {
    font-size: var(--font-size-24);
    font-weight: 700;
}

.introduce-layer .circle-box__item-content .desc {
    width: fit-content;
    padding: 0 calc(30 * var(--rpx));
    transform: translate(0, calc(120 * var(--rpx)));
    opacity: -1;
    transition: transform .3s linear;
}

.introduce-layer .circle-box__item.active .desc {
    transform: translate(0, 0);
    margin-top: calc(20 * var(--rpx));
    opacity: 1;
}

.introduce-layer .circle-box__bg {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s linear;
}

.introduce-layer .circle-box__item.active .circle-box__bg {
    opacity: 1;
}

.introduce-layer .circle-box__border {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: -1;
}

/*  */
.layer-plan {
    position: relative;
}

.layer-plan .layer-header {
    text-align: center;
}

.layer-plan .plan-wrapper {
    --c: 3;
    --g: calc(50 * var(--rpx));
    --w: calc((100% - var(--g) * (var(--c) - 1)) / var(--c));
    margin-top: calc(50 * var(--rpx));
    flex-wrap: wrap;
    gap: var(--g);
}

.layer-plan .plan-box {
    color: #fff;
    width: var(--w);
    aspect-ratio: 500 / 280;
    position: relative;
    transition: all .3s linear;
    cursor: pointer;
}

.layer-plan .plan-box__content {
    width: 100%;
    padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all .3s linear;
    z-index: 1;
}

.layer-plan .plan-box.more {
    border: 1px solid rgba(0, 0, 0, .2);
    transition: border .3s linear;
}

.layer-plan .plan-box.more:hover {
    border-color: var(--border);
}

.layer-plan .plan-box.more .plan-box__content {
    height: 100%;
}

.layer-plan .plan-box.more .plan-box__content::after {
    display: none;
}

.layer-plan .plan-box.more .plan-box__desc {
    font-size: var(--font-size-24);
    font-weight: 300;
    text-align: center;
    color: rgba(37, 37, 37, 1);
    margin-bottom: calc(22 * var(--rpx));
    transition: color .3s linear;
}

.layer-plan .plan-box.more:hover .plan-box__desc {
    color: var(--primary);
}

.layer-plan .plan-box__content::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180.00deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 100%);
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .2s linear;
    z-index: -1;
}

.layer-plan .plan-box:hover .plan-box__content::after {
    opacity: .5;
}

.layer-plan .plan-box__content .plan-box__name {
    font-size: var(--font-size-24);
    transition: all .3s linear;
}

.layer-plan .plan-box:hover .plan-box__name {
    letter-spacing: 2px;
}

.layer-plan .plan-box__poster {
    width: 100%;
    height: 100%;
}

.layer-plan .plan-box__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer-plan .layer-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.layer-plan .layer-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*  */
.layer-product-center {
    padding: 0;
    overflow-x: clip;
}

.layer-product-center .layer-main {
    position: relative;
}

.layer-product-center .layer-content {
    position: sticky;
    top: 0;
    width: max-content;
    flex-wrap: nowrap;
}

.layer-product-center .product-section {
    padding: calc(var(--header-h) + 20px) 20px 0;
    aspect-ratio: 960 / 1080;
    height: 100vh;
    height: 100dvh;
    position: relative;
}

.layer-product-center .product-section__content {
    color: #fff;
    text-align: center;
}

.layer-product-center .product-section__content .sub-title {
    font-size: var(--font-size-20);
}

.layer-product-center .product-section__content .title {
    font-size: var(--font-size-48);
}

.layer-product-center .product-section__content .more-btn {
    color: #fff;
    border-color: #fff;
    margin-top: calc(30 * var(--rpx));
}

.layer-product-center .product-section__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.layer-product-center .product-box {
    aspect-ratio: 640 / 1080;
    height: 100vh;
    height: 100dvh;
    position: relative;
    z-index: 1;
}

.layer-product-center .product-box .product-box__content {
    padding: calc(var(--header-h) + 20px) calc(60 * var(--rpx)) 0;
}

.layer-product-center .product-box .product-box__content .icon {
    --l: calc(80 * var(--rpx));
    width: var(--l);
    height: var(--l);
    backdrop-filter: blur(30px);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin-bottom: calc(20 * var(--rpx));
}

.layer-product-center .product-box .product-box__content .icon img {
    max-width: 55%;
    max-height: 50%;
}

.layer-product-center .product-box .product-box__content .desc {
    color: #fff;
    font-size: var(--font-size-24);
}

.layer-product-center .product-box .product-box__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
}

/*  */
.layer-industrial {
    text-align: center;
    position: relative;
    overflow: hidden;
    background: #F0F0F0;
    padding-bottom: 0;
}

.layer-industrial .layer-header .more-btn {
    margin: calc(46 * var(--rpx)) auto 0;
}
.layer-industrial .layer-header {
    margin-bottom: calc(40 * var(--rpx));
    position: relative;
    z-index: 1;
}
.layer-industrial .layer-main {
    --w: calc(1358 * var(--rpx));
    --space: calc(20 * var(--rpx));
    --border-l-w: calc(var(--w) - clamp(var(--space), 7.8125vw, calc(150 * var(--rpx))));
    --border-ll-w: calc(var(--border-l-w) - clamp(var(--space), 6.51041vw, calc(125 * var(--rpx))));
    --border-lll-w: calc(var(--border-ll-w) - clamp(var(--space), 6.51041vw, calc(125 * var(--rpx))));
    --earth-w: calc(var(--border-lll-w) - clamp(var(--space), 9.5833333vw, calc(184 * var(--rpx))));
    max-width: var(--w);
    width: calc(100% - 40px);
    margin: auto;
}

.layer-industrial .earth {
    aspect-ratio: 1 / 1;
    margin: 0 auto -65%;
    position: relative;
}

.layer-industrial .earth-box {
    width: var(--earth-w);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.layer-industrial .earth-box .address-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: translate(-50%, -100%);
}

.layer-industrial .earth-box .address-box__content {
    width: max-content;
    background-color: #fff;
    padding: calc(20 * var(--rpx)) calc(5 * var(--rpx));
}

.layer-industrial .earth-box .address-box__img {
    width: calc(150 * var(--rpx));
    height: calc(150 * var(--rpx));
}

.layer-industrial .earth-box .address-box__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer-industrial .earth-box .address-box__info {
    font-size: var(--font-size-14);
    text-align: left;
    padding: 0 calc(20 * var(--rpx));
    align-items: flex-start;
}

.layer-industrial .earth-box .address-box__info .name {
    font-size: var(--font-size-16);
    font-weight: bold;
}
.layer-industrial .earth-box .address-box__info .address .icon img {
    max-height: calc(18 * var(--rpx));
}
.layer-industrial .earth-box .address-box__info .address .inner-text {
    padding-left: calc(12 * var(--rpx));
}

.layer-industrial .earth-box .address-box .solid {
    width: 1px;
    height: calc(200 * var(--rpx));
    background-color: rgba(0, 0, 0, .5);
    margin-top: calc(-5 * var(--rpx));
}

.layer-industrial .earth-box .address-box .solid::before {
    content: '';
    width: calc(10 * var(--rpx));
    height: calc(10 * var(--rpx));
    background-color: #fff;
    border: calc(3 * var(--rpx)) solid var(--primary);
    display: block;
    border-radius: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.layer-industrial .circle-l {
    width: var(--border-l-w);
    aspect-ratio: 1 / 1;
    background: url(../images/border-1.png) no-repeat center / 100% 100%;
    animation: rotateLoop 60s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layer-industrial .circle-ll {
    width: var(--border-ll-w);
    aspect-ratio: 1 / 1;
    background: url(../images/border-2.png) no-repeat center / 100% 100%;
    animation: rotateLoop 90s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layer-industrial .circle-lll {
    width: var(--border-lll-w);
    aspect-ratio: 1 / 1;
    background: url(../images/border-3.png) no-repeat center / 100% 100%;
    animation: rotateLoop 120s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes rotateLoop {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*  */
.layer-news .layer-title {
    line-height: 1;
}

.layer-news .layer-title__sub {
    margin-bottom: calc(24 * var(--rpx));
}

.layer-news .layer-header .more-btn {
    align-self: flex-end;
}

.layer-news .layer-main {
    margin-top: calc(60 * var(--rpx));
    margin-left: max(20px ,calc((100% - var(--max-content-width)) / 2));
    overflow: hidden;
}

.layer-news .news-swiper {
    --count: 4;
    --space: clamp(12px, 1.5625vw,calc(30 * var(--rpx)));
    --w: calc((100vw - ((100vw - var(--max-content-width)) / 2)) / var(--count));
    --scale: calc(710 / 420);
    overflow: visible;
    /* --w: calc((100% - ((100% - var(--max-content-width)) / 2)) / var(--count)); */
}

.layer-news .swiper-wrapper {
    margin-left: calc((var(--scale) - 1) * var(--w));
}

.layer-news .swiper-slide {
    width: var(--w);
    position: relative;
}

.layer-news .new-box {
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, .2);
    padding: 0 var(--space);
    overflow: hidden;
    cursor: pointer;
}
.layer-news .swiper-slide-prev .new-box {
    opacity: 0;
}
.layer-news .swiper-slide-active .new-box {
    width: calc(100% * var(--scale));
    height: max-content;
    padding-left: 0;
    margin-left: calc((var(--scale) - 1) * -100%);
    /* position: absolute;
    top: 0;
    right: 0; */
}

.layer-news .swiper-slide .new-box__poster {
    aspect-ratio: 360 / 240;
}

.layer-news .swiper-slide-active .new-box__poster {
    aspect-ratio: 680 / 450;
}

.layer-news .new-box .new-box__content {
    padding-top: calc(24 * var(--rpx));
    align-items: unset;
}

.layer-news .new-box .new-box__content .time {
    font-size: var(--font-size-14);
    color: rgba(37, 37, 37, .5);
}

.layer-news .new-box .new-box__content .title {
    font-size: var(--font-size-16);
    margin-top: calc(10 * var(--rpx));
    transition: color .3s linear;
}

.layer-news .new-box .new-box__content:hover .title {
    color: var(--primary);
}

.layer-news .swiper-slide-active .new-box .new-box__content .title {
    font-size: var(--font-size-24);
}

.layer-news .new-box .new-box__content .new-box__desc {
    color: rgba(37, 37, 37, .5);
    font-size: var(--font-size-14);
    opacity: -1;
    transition: all .5s linear;
    display: none;
}

.layer-news .swiper-slide-active .new-box .new-box__content .new-box__desc {
    display: block;
    margin-top: calc(20 * var(--rpx));
    opacity: 1;
}

.layer-news .layer-main {
    position: relative;
}
.layer-news .layer-main .swiper-box__btns{
    --btn-l: calc(56 * var(--rpx));
    gap: 0 calc(20 * var(--rpx));
    position: absolute;
    right: max(20px ,calc((100vw - var(--max-content-width)) / 2));
    bottom: 0;
    z-index: 1;
}

.layer-news .layer-main .swiper-box__btns .btn {
    width: var(--btn-l);
    height: var(--btn-l);
    border-radius: 50%;
    background: #e8e8e8;
    cursor: pointer;
    transition: background .3s linear;
}
.layer-news .layer-main .swiper-box__btns .btn img{
    width: 50%;
}

.layer-news .layer-main .swiper-box__btns .btn:hover {
    background-color: var(--primary);
}
.layer-news .layer-main .swiper-box__btns .btn:hover img {
    filter: url(#white-overlay);
}

/*  */
.layer-help {
    width: 100%;
    color: #fff;
    text-align: center;
    background: url(../images/bg-4.jpg) no-repeat center center / cover;
    padding: calc(90 * var(--rpx)) 0;
}

.layer-help .layer-header .layer-title {
    font-size: calc(38 * var(--rpx));
}

.layer-help .layer-header .layer-title__sub {
    font-size: var(--font-size-18);
    font-weight: 300;
    margin-top: calc(12rem / var(--base));
}

.layer-help .layer-header .more-btn {
    --color: #fff;
    --border-color: #fff;
    margin: calc(25 * var(--rpx)) auto 0;
}

@media screen and (max-width: 1600px) {
    .layer-industrial .layer-main {
        --w: calc(100vw - calc(200 * var(--rpx)));
    }
}

@media screen and (max-width: 960px) {
    .introduce-layer .circle-box {
        width: 100%;
    }
    .introduce-layer .circle-box__content {
        position: relative;
    }
    .introduce-layer .circle-box__border {
        display: none;
    }
    .introduce-layer .circle-box__item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: -1;
    }
    .introduce-layer .circle-box__item.active {
        position: unset;
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
    .layer-news .news-swiper {
        --count: 3;
    }
}

@media screen and (max-width: 750px) {
    .layer-news .news-swiper {
        --scale: calc(522 / 420);
    }
    .introduce-content {
        flex-wrap: wrap;
    }
    .introduce-layer .introduce-wrapper {
        width: 100%;
        margin-right: 0;
    }
    .introduce-layer .introduce-img {
        margin: calc(30 * var(--rpx)) auto 0;
    }

    .layer-plan .plan-wrapper {
        --c: 2;
        --g: calc(20 * var(--rpx));
    }

    .layer-plan .plan-box.more .plan-box__desc {
        font-size: 12px;
    }

    .layer-product-center .product-section,
    .layer-product-center .product-box {
        width: 100vw;
        aspect-ratio: unset;
    }
    .layer-industrial .layer-header {
        margin-bottom: 55vw;
    }
    .layer-industrial .layer-main {
        --w: 100vw;
        width: var(--w);
    }
    .layer-industrial .earth {
        height: calc(var(--w) / 2 + calc(100 * var(--rpx)));
        aspect-ratio: unset;
    }
    .layer-industrial .earth-box .address-box__img {
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
    }
}