@media screen and (max-height: 800px) {

}

   /*  #typing-text{
            position: relative;
        }
    /* 定义光标样式 */
    #typing-text::after {
        content: "";
        bottom: 0;
        /* 必须设置 content 属性 */
        position: absolute;
        /* 调整横线与段落的距离 */
        width: 38px;
        /* 横线宽度与段落宽度一致 */
        height: 6px;
        /* 横线的粗细 */
        background: #ffffff;
        animation: carouselLlink 1.4s step-end infinite;
        margin-left: 6px;
    }
    /* 定义光标闪烁动画 */
    @keyframes carouselLlink {
        from,
        to {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

.block-visual{
    --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
    --un-ring-shadow: 0 0 rgba(0, 0, 0, 0);
    .cont{
        width: 100%;
        height: 100vh;
        position: relative;
        background-image: url(/webasset/qld/images/index/block-visual-01.webp);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .slogan{
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -60%);
            .inner-cont{
                position: relative;
                height: 120px;
                z-index: 200;
                width: 100%;
                >div{
                    text-align: center;
                }
                .title{
                    background: -webkit-linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 800;
                    font-family: system-ui;
                    font-size:90px;
                }
            }
            .desc{
                color: #ffffff;
                margin-top: 26px;
            }
        }
        .ecology-h5{
            display: none;
        }
        .ecology{
            position: absolute;
            left: 0;
            bottom: 64px;
            width: 100%;
            .tip{
                padding-left: 64px;
                color: #ffffff;
                margin-bottom: 36px;
            }
            .row{
                margin-left: 0;
                margin-right: 0;
                padding-left: 40px;
                padding-right: 40px;
                .col-md-3:nth-child(1) .item {
                    --un-shadow: 0 30px 30px 0 var(--un-shadow-color, rgba(247, 197, 68, .8));
                }
                .col-md-3:nth-child(2) .item {
                    --un-shadow: 0 30px 30px 0 var(--un-shadow-color, rgba(24, 55, 124));
                }
                .col-md-3:nth-child(3) .item {
                    --un-shadow: 0 30px 30px 0 var(--un-shadow-color, rgba(255, 255, 255));
                }
                .col-md-3:nth-child(4) .item {
                    --un-shadow: 0 30px 30px 0 var(--un-shadow-color, rgba(247, 197, 68, .8));
                }
                .item{
                    background: #1F2123;
                    border-radius: 100px;
                    height: 160px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition-duration: .6s;
                    &:hover{
                        box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
                        filter: brightness(1.4);
                    }
                    .img{
                        width: 74px;
                        height: 74px;
                    }
                    .title{
                        line-height: 30px;
                        margin-left: 24px;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}
.block-product{
    .main-title{
            padding-top: 100px;
            color: #181818;
            text-align: center;
            .en{
                font-family: Arial, sans-serif;
                letter-spacing: 0.08em;
                font-size: 100px;
                color: #181818;
            }
            .cn{
                color: #181818;
            }
        }
}

.block-about{
    .cont{
        background: #000000;
        border-radius: 72px;
        overflow: hidden;
        .title{
            padding-left: 55px;
            padding-top: 100px;
            color: #ffffff;
            width: 534px;
            text-align: right;
            .en{
                font-family: Arial, sans-serif;
                letter-spacing: 0.08em;
                font-size: 100px;
            }
        }
        .cont-card{
            .left{
                padding-left: 55px;
                .company-title{
                    color: #2F6FFF;
                    margin-top: 100px;
                }
                .card-title{
                    margin-top: 40px;
                    font-size: 54px;
                    line-height: 70px;
                    color: #ffffff;
                    padding-right: 120px;
                }
                .card-desc{
                    color: #ffffff;
                    margin-top: 30px;
                    padding-right: 154px;
                    line-height: 34px;
                }
            }
            .right{
                display: flex;
                justify-content: end;
                padding-right: 55px;
                align-items: end;
                .one-img{
                    opacity: 0;
                    >img{
                        max-height: 480px;
                        margin-right: 20px;
                    }
                }
                .two-img{
                    >img{
                        max-height: 650px;
                    }
                }
            }
        }
         .cont-slide{
            background-image: url(/webasset/qld/images/index/block-about-03.webp);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding-top: 160px;
            padding-bottom: 200px;
            .left{
                padding-left: 55px;
                .slide-left-item{
                    .slide-title{
                        color: #ffffff;
                    }
                    .slide-desc{
                        color: #ffffff;
                        margin-top: 56px;
                        text-align: justify;
                        line-height: 34px;
                    }
                }
                .slide-but{
                    width: 100%;
                    margin-top: 68px;
                    display: flex;
                    align-items: center;
                    .line{
                        height: 1px;
                        width: 100%;
                        background: #ffffff;
                    }
                    .pagination{
                        margin-left: 40px;
                    .prev,
                    .next{
                        user-select: none;
                        background: rgba(54, 47, 36, 0.8);
                        cursor: pointer;
                        width: 68px;
                        height: 68px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        border: solid 1px #ffffff;
                        font-size: 40px;
                        &:hover{
                            --but-start-color: #18377C;
                            --but-end-color: #111111;
                            color: #ffffff;
                            background: linear-gradient(90deg, var(--but-start-color) 0%, var(--but-end-color) 100%);
                            box-shadow: 0 6px 20px 0 rgba(24, 55, 124, .6);
                        }
                    }
                    .prev{

                    }
                    .next{
                        margin-left: 30px;
                    }
                }
                }
            }
            .right{
                height: 600px;
                padding-left: 40px;
                margin-right: -40px;
                 .swiper {
                      width: 960px;
                      height: 100%;
                      margin-right: 0px;
                    }
                    .swiper-slide {
                      text-align: center;
                      font-size: 18px;
                      background: #fff;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 480px;
                      border-radius: 36px;
                       &:before{
                             content: "";
                              position: absolute;
                              top: 0;
                              left: 0;
                              right: 0;
                              bottom: 0;
                              background-color: rgba(0, 0, 0, 0.4);
                              z-index: 1;
                        }
                    }
                    .swiper-slide-active{
                        &:before{
                            display: none;
                        }
                    }
                    .swiper-slide img {
                      width: 100%;
                      height: 100%;
                      border-radius: 26px;
                    }
            }
        }
    }
}
@keyframes partnerMagnify0 {
    0% {
        transform: scale(1);
        opacity: .1
    }

    to {
        transform: scale(2.5);
        opacity: 0
    }
}

@keyframes partnerMagnify1 {
    0% {
        transform: scale(1);
        opacity: .1
    }

    to {
        transform: scale(2.5);
        opacity: 0
    }
}

.block-partner{
    .title{
        padding-left: 55px;
        padding-top: 100px;
        padding-bottom: 80px;
        color: #181818;
        text-align: center;
        .en{
            font-family: Arial, sans-serif;
            font-size: 100px;
            letter-spacing: 0.08em;
            color: #181818;
        }
        .cn{
            color: #181818;
        }
    }
    .cont{
        overflow: hidden;
        padding-bottom: 100px;
        .round{
        margin: 0 auto;
        height: 800px;
        position: relative;
        .center-h5{
            display: none;
        }
        .center{
            width: 800px;
            height: 800px;
            border-radius: 50%;
            position: absolute;
            background: rgba(228, 235, 252, 0);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            padding: 280px;
            .center-cont{
                width: 240px;
                height: 240px;
                background: rgba(24, 55, 124, 1);
                box-shadow: 0px 0px 32px 0px rgba(165,189,251,0.32);
                border-radius: 50%;
                .circle-one{
                    z-index: 2;
                    animation: partnerMagnify0 5s 0s infinite linear;
                }
                .circle-two{
                    z-index: 5;
                    animation: partnerMagnify1 5s 2.5s infinite linear;
                }
                .circle-animation{
                    position: absolute;
                    top: 280px;
                    left: 280px;
                    border-radius: 50%;
                    background-color: rgba(24, 55, 124, 1);
                    width: 240px;
                    height: 240px;
                }
                .center-cont-txt{
                    position: absolute;
                    z-index: 6;
                    text-align: center;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    >img{
                        width: 240px;
                    }
                }
            }
        }
         .row-common{
            position: absolute;
            display: flex;
            gap: 28px;
            .item{
                >img{
                    width: 140px;
                    height: 80px;
                }
            }
        }
        .left{
            opacity: 0;
        .left-row-1{
            left: 90px;
        }
        .left-row-2{
            top:100px;
            left: 50px;
        }
        .left-row-3{
            top:200px;
            left: 30px;
        }
        .left-row-4{
            top: 300px;
        }
        .left-row-5{
            top: 400px;
        }
        .left-row-6{
            left: 30px;
            top: 500px;
        }
        .left-row-7{
            left: 50px;
            top: 600px;
        }
        .left-row-8{
            left: 90px;
            top: 700px;
        }
        }
        .right{
            opacity: 0;
        .right-row-1{
            right: 90px;
        }
        .right-row-2{
            top:100px;
            right: 50px;
        }
        .right-row-3{
            top:200px;
            right: 30px;
        }
        .right-row-4{
            top: 300px;
            right: 0;
        }
        .right-row-5{
            top: 400px;
            right: 0;
        }
        .right-row-6{
            right: 30px;
            top: 500px;
        }
        .right-row-7{
            right: 50px;
            top: 600px;
        }
        .right-row-8{
            right: 90px;
            top: 700px;
        }
        }
    }
    }

}







@keyframes partnerRotate {
  0% {
    transform: rotate(0deg); /* 起始角度 0 度 */
  }
  100% {
    transform: rotate(360deg); /* 结束角度 360 度 */
  }
}

@media (max-width: 1024px) {
    .block-visual{
        padding-bottom: 40px;
        .cont{
            background-size: contain;
            height: 100%;
            .slogan{
                top: 60px;
                left: 10px;
                transform:none !important;
                .inner-cont{
                    #typing-text::after{
                        height: 3px !important;
                        width: 20px !important;
                    }
                    height: 50px;
                    .title{
                        font-size: 28px !important;
                    }
                }
                .desc{
                        font-size: 18px !important;
                    }
            }
            .ecology{
                display: none;
            }
            .ecology-h5{
                display: block;
                padding-top: 240px;
                .tip{
                    color: #1F2123;
                    margin-left: 10px;
                }
                .item{
                    background: #1F2123;
                    border-radius: 100px;
                    padding: 10px;
                    width: 50%;
                    margin: 10px;
                    text-align: center;
                    .img{
                        width: 30px;
                        height: 30px;
                    }
                    .title{
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .block-about{
        .cont{
            .title{
                width: 100%;
                text-align: left;
                padding-left: 10px;
                .en{
                    font-size: 50px !important;
                }
            }
            .cont-card{
                .left{
                    padding: 10px;
                    .card-title{
                        font-size: 30px !important;
                        line-height: 42px;
                    }
                }
                .right{
                    padding: 10px;
                    justify-content: space-between;
                    .one-img{
                        >img{
                            max-height: 200px !important;
                        }
                    }
                    .two-img{
                        >img{
                            max-height: 300px !important;
                        }
                    }
                }
            }
            .cont-slide{
                padding-bottom: 40px;
                .left{
                    padding: 10px !important;
                }
                .right{
                    height: auto  !important;
                    padding: 10px;
                    margin: 20px 0 0 0;
                    .swiper{
                        width: 100% !important;
                    }
                    .swiper-slide{
                        width: 100% !important;
                    }
                }
            }
        }
    }
    .block-partner {
        .title {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 40px;
            padding-bottom: 40px;
            color: #333333;
            text-align: center;
            .en{
                font-size: 50px;
            }
        }
    }
    .block-partner {
        overflow: hidden;
            .cont {
                .round {
                    min-width: 100%;
                    height: 100%;
                    .center{
                        display: none;
                    }
                    .center-h5{
                        display: block;
                        padding: 20px;
                        text-align: center;
                        >img{
                            width: 90px;
                             animation: partnerRotate 20s linear infinite;
                        }
                    }
                    .row-common {
                            position: relative;
                            top: 0 !important;
                            left: 0 !important;
                            right: 0 !important;
                            display: flex;
                            gap:0;
                            .item{
                                >img{
                                    width: 100%;
                                    height: auto;
                                }
                            }
                        }
                    .left {
                        height: 100%;
                    }
                    .right{
                        height: 100%;
                    }
                }
            }
        }
        .block-product{
            overflow: hidden;
            .main-title{
                padding-top: 0px;
                .en{
                    font-size: 50px;
                }
            }
    }
}


@media screen and (max-width: 1500px) {
    #typing-text::after{
        bottom: 14px;
    }
    .block-visual {
     .cont {
         .slogan{
            transform: translate(-50%, -70%);
            .inner-cont{
                .title{
                    font-size: 80px;
                }
            }
         }
         .ecology {
            bottom: 30px;
             .row {
                 .item {
                    height: 130px;
                    .img{
                        width: 64px;
                        height: 64px;
                    }
                    .title {
                        line-height: 30px;
                        margin-left: 14px;
                        font-size: 18px;
                        line-height: 28px;
                    }
                }
            }
        }
    }
    }
    .block-about {
        .cont {
            .cont-card {
                .left{
                    .card-title{
                        font-size: 46px;
                        padding-right: 0;
                    }
                    .card-desc{
                        font-size: 20px;
                        padding-right: 0;
                    }
                }
                .right {
                    .one-img {
                        >img{
                            max-height: 380px;
                        }
                    }
                    .two-img{
                        >img{
                            max-height: 450px;
                        }
                    }
                }
            }
            .cont-slide{
                .right{
                    height: 480px;
                    .swiper{
                        width: 800px;
                        .swiper-slide{
                            width: 380px;
                        }
                    }
                }
            }
        }
    }
}