.index-swiper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.swiper-slide.full-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.mobile .swiper-slide.full-screen {
    height: auto;
}

.swiper-slide.full-screen .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-banner-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
}

.index-banner-swiper .scroll-pic {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 5;
    width: max(30px, calc(var(--ratio-size) * 38));
    height: max(41px, calc(var(--ratio-size) * 52));
    animation: scrollTips 1s linear infinite alternate;
    cursor: pointer;
}

@keyframes scrollTips {
    100% {
        transform: translateY(30%);
    }
}


.index-banner-swiper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.index-banner-swiper .swiper-slide .text-content {
    position: relative;
    z-index: 2;
}

.index-banner-swiper .swiper-slide .text-content .title {
    /* font-size: var(--title-big-size); */
    font-size: max(20px, calc(var(--ratio-size) * 40));
    line-height: 1.4;
}

.index-banner-swiper .swiper-slide .text-content .title .splitLines {
    overflow: hidden;
}

.index-banner-swiper .swiper-slide .text-content .common-btn-arrow {
    margin-top: max(calc(var(--ratio-size) * 45), 25px);
}

.index-banner-swiper .index-banner-pagination {
    position: absolute;
    bottom: 80px;
    z-index: 3;
    text-align: center;
}

.index-banner-swiper .index-banner-pagination .swiper-pagination-bullet {
    width: 60px;
    height: 6px;
    border-radius: var(--half-border-radius);
    background-color: #fff;
    opacity: .3;
}

.index-banner-swiper .index-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.about-bc-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #F2F2F2;
}

.about-bc-screen .common-title-effect {
    margin-top: calc(var(--ratio-size) * 110);
}

.about-bc-screen .top-part {
    position: relative;
    z-index: 3;
}

.about-bc-screen .top-part .text {
    margin-top: max(15px, calc(var(--ratio-size) * 25));
    text-align: center;
    font-size: var(--text-big-size);
    color: #333;
    line-height: 1.58;
}

.about-bc-screen .top-part .common-btn-arrow {
    margin-top: max(35px, calc(var(--ratio-size) * 70));
    text-align: center;
}

.about-bc-screen .list {
    display: flex;
    /* padding: max(30px, calc(var(--ratio-size) * 60)); */
    min-height: calc(var(--ratio-size) * 345);
    background-color: #fff;
}

.about-bc-screen .list.default .mobile-list-pic {
    display: none;
}

.about-bc-screen .list.float-top {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    opacity: 0;
}

.about-bc-screen .list.float-top::after {
    display: none;
}

.about-bc-screen .list .item {
    flex: 1;
    position: relative;
    /* height: 100%; */
    padding: max(30px, calc(var(--ratio-size) * 60));
    font-size: var(--text-normal-size);
    line-height: 1.4;
    transition: all .5s;
}

.about-bc-screen .list .item-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    cursor: pointer;
    height: 100%;
}

.about-bc-screen .list .item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(70deg, #0B58CB, #1785C5, #3ABD1B);
    opacity: 0;
    transition: all .5s;
}

.about-bc-screen .list .item.active::after {
    opacity: .5;
}

.about-bc-screen .list .item.active {
    color: #fff;
}

.about-bc-screen .list .item .pic {
    /* width: max(60px, calc(100rem / 16));
    height: max(60px, calc(100rem / 16)); */
    width: min(100%, calc(100rem / 16));
    height: min(100%, calc(100rem / 16));
}

.about-bc-screen .list .item .title {
    margin-top: max(20px, calc(var(--ratio-size) * 30));
    font-size: var(--text-bigger-size);
}

.about-bc-screen .list .item .text {
    opacity: 0;
    /* visibility: hidden; */
    padding-top: 10px;
}

.about-bc-screen .screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.about-bc-screen .screen-bg img {
    width: 40%;
}

.ecology-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #05082A;
    color: #fff;
    overflow: hidden;
}

.ecology-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background-image: linear-gradient(to right, #112461, #05082A00);
}

.ecology-content {
    position: relative;
    z-index: 2;
    padding-left: var(--type-area);
}

.ecology-content ul {
    width: calc(var(--ratio-size) * 420);
    margin-top: max(35px, calc(var(--ratio-size) * 50));
}

.ecology-content ul li {
    padding-top: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.ecology-content ul li:first-child {
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.ecology-content ul li .name {
    display: flex;
    /* font-size: max(20px, calc(var(--ratio-size) * 38)); */
    font-size: max(20px, calc(var(--ratio-size) * 32));
}

.mobile .ecology-screen .mobile-text {
    display: block;
}

.ecology-screen .mobile-text {
    position: relative;
    z-index: 2;
    display: none;
    width: 100%;
    padding: 30px var(--type-area);
}

.ecology-screen .mobile-text ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ecology-screen .mobile-text ul li {
    padding-bottom: 10px;
    border-bottom: 1px solid #c1c1c1;
}

.ecology-screen .mobile-text ul .title {
    font-size: 18px;
}

.ecology-screen .earth-content {
    position: relative;
}

.ecology-screen .earth-mobile {
    display: none;
}

.earth-content .core-content {
    position: relative;
    width: calc(var(--ratio-size) * 999);
    height: calc(var(--ratio-size) * 562);
}

.earth-content .core-content .main-bg {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
}

.earth-content .core-content .svg-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.earth-content .core-content .core-message .color-logo {
    width: calc(var(--ratio-size) * 73);
}

.earth-content .first-floor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--ratio-size) * 680);
    height: calc(var(--ratio-size) * 680);
}

.earth-content .second-floor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--ratio-size) * 892);
    height: calc(var(--ratio-size) * 892);
}

.earth-content .third-floor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--ratio-size) * 1200);
    height: calc(var(--ratio-size) * 1200);
}

.earth-content .border-bg {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 50%;
}

.earth-content .second-floor>.border-bg {
    border-color: rgba(255, 255, 255, .7);
}

.earth-content .third-floor>.border-bg {
    border-color: rgba(255, 255, 255, .4);
}

.earth-content .earth-line-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--ratio-size) * 1200);
    height: calc(var(--ratio-size) * 1200);
    border-radius: 50%;
}

.earth-content .more-message {
    position: absolute;
    z-index: 2;
    /* font-size: var(--text-big-size); */
    font-size: calc(16rem / 16);
    line-height: 1.16;
    cursor: pointer;
}

.earth-content .more-message .ball {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 120);
    height: calc(var(--ratio-size) * 120);
    text-align: center;
}

.earth-content .more-message .ball>* {
    position: relative;
    z-index: 2;
}

.earth-content .more-message .ball::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px 0px rgb(88, 207, 247);
    background: #080F37;
    animation: scaleAn 3s infinite alternate;
}

@keyframes scaleAn {
    100% {
        transform: scale(1.2);
    }
}

.earth-content .more-message .text {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translate(80%, -50%);
    z-index: 2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    text-shadow: 1px 0 0 #444444, -1px 0 0 #444444, 0 1px 0 #444444, 0 -1px 0 #444444;
    transition: all .5s;
}

.earth-content .more-message:hover .text {
    opacity: 1;
    visibility: visible;
    transform: translate(100%, -50%);
}

.earth-content .first-floor .more-message:nth-child(1) {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.earth-content .first-floor .more-message:nth-child(2) {
    right: 6%;
    bottom: 2%;
}

.earth-content .second-floor>.more-message .ball::after {
    box-shadow: inset 0px 0px 20px 0px #4BC12A;
}

.earth-content .second-floor>.more-message:nth-child(1) {
    left: 1%;
    top: 63%;
    transform: translate(-50%, -50%);
}

.earth-content .second-floor>.more-message:nth-child(2) {
    right: 0;
    top: 30%;
    transform: translate(20%, -50%);
}

.earth-content .third-floor>.more-message:nth-child(1) {
    left: 0;
    top: 20%;
    transform: translate(20%, 0);
}

.earth-content .third-floor>.more-message:nth-child(2) {
    left: 0;
    top: 45%;
    transform: translate(-50%, 0);
}

.earth-content .third-floor>.more-message:nth-child(3) {
    left: 0;
    top: 70%;
    transform: translate(20%, 0);
}

.earth-content .first-floor .more-message:nth-child(2) .text,
.earth-content .second-floor>.more-message:nth-child(2) .text {
    right: auto;
    left: -20px;
    transform: translate(-80%, -50%);
}

.earth-content .first-floor .more-message:nth-child(2):hover .text,
.earth-content .second-floor>.more-message:nth-child(2):hover .text {
    transform: translate(-100%, -50%);
}

.earth-content .earth-line-content .core-message {
    position: absolute;
    top: 52%;
    left: 51%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--ratio-size) * 72);
}

.earth-content .earth-line-content .core-more-message {
    position: relative;
    cursor: pointer;
}

.earth-content .earth-line-content .core-more-message .text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    /* font-size: var(--text-big-size); */
    font-size: var(--text-bigger-size);
    text-shadow: 1px 0 0 #444444, -1px 0 0 #444444, 0 1px 0 #444444, 0 -1px 0 #444444;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
}

.earth-content .earth-line-content .core-more-message:hover .text {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, calc(-100% - 10px));
}

.advantage-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.advantage-screen>* {
    position: relative;
    z-index: 2;
}

.advantage-screen .advantage-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advantage-screen .description-text {
    margin-top: max(15px, calc(var(--ratio-size) * 25));
    text-align: center;
    font-size: var(--text-big-size);
}

.advantage-screen .advantage-main-content {
    display: flex;
    justify-content: center;
    padding: 0 30px;
    margin-top: max(15px, calc(var(--ratio-size) * 30));
}

.advantage-screen .advantage-main-content .list-item {
    text-align: center;
    flex: 1;
}

.advantage-screen .advantage-main-content .list-item .item:nth-child(1) {
    margin-bottom: max(30px, calc(var(--ratio-size) * 60));
}

.advantage-screen .advantage-main-content .list-item .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(40px, calc(var(--ratio-size) * 140));
    height: max(40px, calc(var(--ratio-size) * 140));
    box-shadow: inset 0px 0px 30px 0px rgb(88, 207, 247);
    background: rgb(255, 255, 255);
    border-radius: 50%;
    margin: auto;
    animation: breath 3s infinite;
}

@keyframes breath {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.advantage-screen .advantage-main-content .list-item .pic img {
    max-width: 60%;
    max-height: 60%;
}

.advantage-screen .advantage-main-content .list-item .name {
    margin-top: max(10px, calc(var(--ratio-size) * 20));
    /* font-size: calc(31rem / 16); */
    font-size: max(14px, calc(var(--ratio-size) * 31));
}

.advantage-screen .advantage-main-content .list-item .text {
    margin-top: 6px;
    color: #666;
}

.advantage-screen .advantage-main-content .main-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27%;
    border-radius: 50%;
    margin: 0 calc(var(--ratio-size) * 200);
}

.advantage-screen .advantage-main-content .main-content::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    aspect-ratio: 1/1;
    background: url('../images/advantage-main-boxshadow.png') no-repeat 100%/100%;
}

.advantage-screen .advantage-main-content .main-content .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 33.7%;
}

.advantage-screen .advantage-main-content .main-content svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
}

.advantage-screen .advantage-main-content .main-content svg .svg-circle-1,
.advantage-screen .advantage-main-content .main-content svg .svg-circle-2,
.advantage-screen .advantage-main-content .main-content svg .svg-circle-3 {
    transform-origin: center;
    animation: rotateAn 3s linear infinite;
}

.advantage-screen .advantage-main-content .main-content svg .svg-circle-2 {
    animation-direction: alternate;
}

@keyframes rotateAn {
    100% {
        transform: rotate(360deg);
    }
}

.business-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #112460, #05082A);
}

.business-screen .platform {
    position: relative;
    width: 100%;
}

.mobile .business-screen .platform {
    display: none;
}

.mobile .business-screen .mobile-pic {
    display: block;
}

.mobile .business-screen .mobile-pic img {
    margin-top: -10px;
}

.business-screen .platform .top-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: calc(var(--ratio-size) * 20);
    text-align: center;
}

.business-screen .platform .top-content .text-btn {
    display: inline-block;
    padding: calc(var(--ratio-size) * 7) calc(var(--ratio-size) * 22);
    margin-top: calc(var(--ratio-size) * 20);
    border-radius: var(--half-border-radius);
    color: #fff;
    font-size: calc(var(--ratio-size) * 22);
    background-image: linear-gradient(to right, #3885B1, #0E6CA4);
}

.business-screen .platform .top-content .text {
    margin-top: max(15px, calc(var(--ratio-size) * 25));
    /* font-size: var(--text-big-size); */
    font-size: calc(20rem / 16);
    color: #fff;
    text-align: center;
}

.business-screen .main-platform {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.business-screen .main-platform .pic-collect {
    position: relative;
    width: 95%;
    height: 95%;
}

.business-screen .main-platform .pic-collect>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.business-screen .main-platform .pic-collect>div:not(.pos-relative) {
    position: absolute;
    top: 0;
    left: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.business-screen .main-platform img {
    max-width: 95%;
    max-height: 95%;
}

.business-screen .main-platform .platform-pic {
    /* position: absolute;
    top: 0;
    left: 0; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.business-screen .pc-effect {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
}

.business-screen .pc-effect .left {
    position: absolute;
    /* background-color: rgba(255, 0, 0, .5); */
}

.business-screen .pc-effect .middle {
    position: absolute;
    /* background-color: rgba(0, 255, 0, .5); */
}

.business-screen .pc-effect .right {
    position: absolute;
    /* background-color: rgba(255, 255, 0, .5); */
}

.business-screen .pc-effect .bottom {
    position: absolute;
    /* background-color: rgba(0, 0, 255, .5); */
}

.business-screen .mobile-pic {
    display: none;
    width: 100%;
}


.case-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-screen .index-case-swiper {
    margin-top: max(25px, calc(var(--ratio-size) * 50));
}

.case-screen .index-case-swiper .swiper-wrapper {
    height: auto;
}

.case-screen .index-case-swiper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: max(200px, calc(var(--ratio-size) * 550));
    padding: max(60px, calc(var(--ratio-size) * 60)) max(30px, calc(var(--ratio-size) * 60));
    border-radius: 30px;
}

.case-screen .index-case-swiper .swiper-slide .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.case-screen .index-case-swiper .swiper-slide:hover .bg {
    transform: scale(1.05);
}

.case-screen .index-case-swiper .swiper-slide .text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */
    padding: 35px;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.case-screen .index-case-swiper .swiper-slide .text-content .name {
    font-size: var(--text-bigger-size);
}

.case-screen .index-case-swiper .swiper-slide .text-content ul {
    margin-top: max(35px, calc(var(--ratio-size) * 50));
    color: #333333;
    font-size: var(--text-normal-size);
}

.case-screen .index-case-swiper .swiper-slide .text-content ul li {
    display: flex;
    align-items: center;
}

.case-screen .index-case-swiper .swiper-slide .text-content ul .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

.case-screen .index-case-swiper .swiper-slide .text-content ul .icon img {
    max-width: 100%;
    max-height: 100%;
}

.case-screen .index-case-swiper .swiper-slide .text-content .more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    margin-left: auto;
    font-size: var(--text-small-size);
}

.case-screen .case-swiper-function {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: max(30px, calc(var(--ratio-size) * 66));
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.case-screen .case-swiper-function .index-case-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    display: block;
    width: auto;
    transform: none;
}

.case-screen .case-swiper-function .index-case-pagination .swiper-pagination-bullet {
    background-color: #000;
    border-radius: var(--half-border-radius);
    transition: all .5s;
}

.case-screen .case-swiper-function .index-case-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* width: 40px; */
    background-color: #4BC12A;
}

.case-screen .case-swiper-function .swiper-btn {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F2F2F2;
    cursor: pointer;
    transition: all .5s;
}

.case-screen .case-swiper-function .swiper-btn:hover {
    background-color: #4BC12A;
}

.case-screen .case-swiper-function .swiper-btn svg {
    width: 15%;
}

.case-screen .case-swiper-function .swiper-btn svg path {
    transition: all .5s;
}

.case-screen .case-swiper-function .swiper-btn:hover svg path {
    stroke: #fff;
}

.case-screen .case-swiper-function .index-case-pagination {
    flex: 0 1 auto;
}

.footer-screen {
    height: auto;
    background-color: #F2F2F2;
}