:root {
    --font-size: 20px;
    font-family: Muli, serif;
    --font-title: 42px;
    --font-text: 20px;
}
.button-b{
    color: #2D2D2D;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 3px 15px;
    border: 2px solid #2d2d2d;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
    gap: 10px;
}
.button-b:hover{
    background-color: var(--font-color);
    color: #FFFFFF;
}
.button-b i{
    color: #FFFFFF;
    background-color: #2E2C2D;
    border-radius: 50%;
    padding: 4px 5px;
    transition: .3s;
}
.button-b:hover i{
    color: #2E2C2D;
    background-color: #FFFFFF;
}
body{
    background-color: #F4F4F4;
}

#container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.sub-container {
    max-width: 100%;
}

.background-img {
    background-size: cover; /* 使图片覆盖整个容器 */
    background-position: center; /* 使图片居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
}


@media screen and (max-width: 768px){
    :root{
        --font-title: 24px;
        --font-text: 16px;
    }
    .button-b{
        font-size: 1rem;
        padding: 0 10px;
        border-width: 1px;
    }
    .button-b i{
        padding: 2px 3px;
    }
}

/* -------------------------------轮播图------------------------------- */
/* -------------------------------轮播图------------------------------- */
/* -------------------------------轮播图------------------------------- */
/* 图片背景 */
.swiper-detail {
    color: #ffffff;
}

.swiper-position {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    padding-left: 2rem;
}

.swiper-title, .swiper-text, .swiper-industry {
    word-wrap: break-word; /* 允许长单词换行 */
    word-break: break-word; /* 控制单词换行方式 */
    overflow-wrap: break-word; /* 备用，允许长单词换行 */
}

.swiper-title {
    font-size: var(--font-size-title-1);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title-1);
    text-align: left;
    font-style: normal;
    text-transform: uppercase;
}

/* 仅在第三个轮播图显示时更改标题颜色 */
.swiper-slide[data-id="slide-47"].swiper-slide-active .swiper-title {
    color: #51575f !important; /* 更改第三个轮播图的标题颜色 */
    text-decoration: none;
}
.swiper-slide[data-id="slide-47"] .swiper-boxs {
    width: auto; /* 重置宽度 */
    height: auto; /* 重置高度 */
    background: transparent; /* 重置背景色 */
}
.swiper-slide[data-id="slide-47"] .swiper-title {
    font-size: var(--font-size-title-5);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title-1);
    text-align: left;
    padding-left: 12px;
    margin-bottom: 35px;
    text-transform: uppercase;
}
.swiper-slide[data-id='slide-47'] .swiper-btn {
    font-weight: bold;
    font-size: 1.75rem;
    line-height: 39px;
    font-style: normal;
    text-transform: uppercase;
    width: 260px;
    height: 72px;
    border-radius: 10px;
    border: 2px solid #51575f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #51575f;
    margin-top: 1rem;
    cursor: pointer;
}


.swiper-text {
    margin-top: 20px;
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-2-3);
    text-align: left;
    font-style: normal;
}

.swiper-btn {
    font-weight: bold;
    font-size: 1.75rem;
    line-height: 39px;
    font-style: normal;
    text-transform: uppercase;
    width: 260px;
    height: 72px;
    border-radius: 10px;
    border: 2px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    margin-top: 1rem;
    cursor: pointer;
}


.swiper-boxs {
    width: 209px;
    height: 3px;
    background: #ffffff;
}


.swiper-industry {
    font-weight: bold;
    font-size: 40px;
    line-height: 59px;
    text-align: left;
    font-style: normal;
    width: 572px;
    height: 137px;
    background: linear-gradient(270deg, rgba(21, 139, 104, 0) 0%, #018259 100%);
    padding-left: 20px;
}

.swiper-btn:hover,
.swiper-btn:active {
    text-decoration: none;
    /* 鼠标悬停或点击时不显示下划线 */
    color: #FFFFFF;
    background: #162F76 top left;
    /* 设置渐变背景色的起始位置为左上角 */
    transition: background-position 0.5s;
    /* 设置背景位置变化的过渡时间 */
}

@media screen and (max-width: 768px){
.swiper-slide > div > div{
    display: none;
}
}

/* -------------------------------ABOUT US------------------------------- */
/* -------------------------------ABOUT US------------------------------- */
/* -------------------------------ABOUT US------------------------------- */

.about{
    margin-top: 100px;
}

.about .top{
    display: grid;
    grid-template-columns: 9fr 8fr;
    align-items: center;
    background-color: #FFFFFF;
    padding-top: 50px;
}
.about .top .title{
    font-size: var(--font-title);
    font-weight: bold;
}
.about .top .content{
    font-size: var(--font-text);
    line-height: 2.5;
    margin-top: 30px;
    padding-right: 70px;
}
.about .top .button-b{
    width: 285px;
}
.about .top .text   {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}
.about .top .text img{
    display: none;
}
.about .top .image{
    width: 100%;
    height: 100%;
    transition: .3s;
}
.about .top .image:hover{
    box-shadow: var(--box-shadow-1);
}
.about .top .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about .bottom{
    padding-top: 60px ;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* 使用线性渐变背景 */
    background: linear-gradient(
            to bottom,           /* 渐变方向：从上到下 */
            #FFFFFF 65%,           /* 上半部分 60% 为黑色 */
            transparent 65%      /* 下半部分为透明 */
    );
}
.about .bottom .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    background-color: #343F81;
    padding-bottom: 40px;
    transition: .3s;
}
.about .bottom .item:hover{
    box-shadow: var(--box-shadow-2);
}
.about .bottom .item img{
    transition: 2s;
}
.about .bottom .item:hover img{
    transform: rotateY(360deg);
}
.about .bottom .item .content{
    color: #FFFFFF;
}
.about .bottom .item .content h3{
    font-size: 22px;
    font-weight: bold;
    line-height: 2.75;
    text-align: center;
}
.about .bottom .item .content p{
    font-size: 18px;
    text-align: center;
}

@media screen  and (max-width: 768px){
    .about{
        margin-top: 0;

    }
    .about .top{
        display: flex;
        background-color: initial;
        padding-top: 20px;
    }
    .about .top .title{
        width: 100%;
        text-align: left;
    }
    .about .top .image{
        display: none;
    }
    .about .top .text{
        gap: 0;
        align-items: center;
    }
    .about .top .text > div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about .top .text img{
        display: inline-block;
        margin: 15px 0 20px;
    }
    .about .top .content{
        padding: 0;
        line-height: 1.75;
        margin-top: 10px;
    }
    .about .top .button-b{
        width: 220px;
    }
    .about .bottom{
        padding-top: 35px;
        display: flex;
        flex-direction: column;
        background: initial;
    }
    .about .bottom .item{
        display: grid;
        grid-template-columns: 2fr 5fr;
        padding: 15px 0;
    }
    .about .bottom .item .image{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .about .bottom .item .image img {
        width: 75%;
        height: auto;
    }
    .about .bottom .item .content h3{
        line-height: 1.75;
        text-align: left;
    }
    .about .bottom .item .content p{
        font-size: 16px;
        text-align: left;
    }

}


/* -------------------------------PRODUCTS------------------------------- */
/* -------------------------------PRODUCTS------------------------------- */
/* -------------------------------PRODUCTS------------------------------- */

.products{
    margin-top: 100px;
}
.products > .title{
    font-size: var(--font-title);
    font-weight: bold;
    text-align: center;
}
.products > .content{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    margin-top: 50px;
}
.products > .content .list-title .items > .title{
    padding: 0 15px;
    background-color: initial;
    color: #2D2D2D;
}
.products > .content .list-title .items.on > .title{
    background-color: var(--font-color);
    color: #FFFFFF;
}
.products > .content .list-title .items > .title span{
    padding: 10px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #C8C8C8;
}
.products > .content .list-title .items.on > .title span{
    border-bottom: none;
}
.products > .content .list-title .items:last-child > .title span{
    border-bottom: none;
}
.products > .content .list-title .items > .title i{
    display: none;
}
.products > .content .list-title .items.on > .title i{
    color: #2D2D2D;
    background-color: #FFFFFF;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products > .content .list-content{
    padding-top: 20px;
}

.products > .content .list-title .items > .content{
    display: none;
}
.products > .content .list-content .items{
    display: none;
}

.products > .content .list-content .items.on{
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 45px;
}
.products > .content .list-content .items.on .left{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 25px;
}
.products > .content .list-content .items.on .left .image{
    aspect-ratio:1;
    overflow: hidden;
    border: 1px solid #D0D0D0;
}
.products > .content .list-content .items.on .left .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.products > .content .list-content .items.on .left .title{
    padding: 15px 0;


}
.products > .content .list-content .items.on .left .title span{
    font-size: 18px;
    text-align: center;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

}
.products > .content .list-content .items.on .right{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.products > .content .list-content .items.on .right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.products > .content .list-content .items.on .right .description1,
.products > .content .list-content .items.on .right .description2 {
    font-size: 18px;
    color: #2D2D2D;
    line-height: 1.6;
}
.products > .content .list-content .items.on .right .description2 .title{
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .products{
        margin-top: 50px;
    }
    .products > .title{
        text-align: left;
    }
    .products > .content{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .products > .content .list-title{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .products > .content .list-title .items > .title{
        background-color: #D8D8D8;
    }
    .products > .content .list-title .items > .title span{
        border: none;
    }
    .products > .content .list-title .items > .title span:after{
        content: "+";
        font-size: 32px;
        line-height: 1;
        font-weight: normal;
    }
    .products > .content .list-title .items.on > .title span:after{
        content: "-";
    }
    .products > .content .list-title .items > .title i{
        display: none!important;
    }
    .products > .content .list-title .items > .content{
        display: none;
    }
    .products > .content .list-title .items.on > .content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
    }

    .products > .content .list-title .items > .content .item .image{
        display: flex;
        border: 1px solid #A9A9A9;
        aspect-ratio: 1;
        width: 100%;
    }
    .products > .content .list-title .items > .content .item .image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .products > .content .list-title .items > .content .item .title{
        text-align: center;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

/* INDUSTRY APPLICATION */
/* INDUSTRY APPLICATION */
/* INDUSTRY APPLICATION */

.industry {
    background: url("/upload/photo/icon/industries/10 map.png") no-repeat;
    background-color: #FFFFFF;
    background-position: top 20px left;
    padding-top: 50px;
    padding-bottom: 80px;
    margin-top: 120px;
}
.industry > .title{
    font-size: var(--font-title);
    font-weight: bold;
}
.industry > .content{
    margin-top: 70px;
    display: grid;
    grid-template-columns: 129fr 184fr;
    gap: 40px;
}
.industry > .content .list-title{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 40px;
}
.industry > .content .list-title .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    border: 1px solid #F4F4F4;
    padding: 0 35px;
    background-color: #FFFFFF;

    cursor: pointer;
}
.industry > .content .list-title .item.on,
.industry > .content .list-title .item:hover{
    background-color: var(--font-color);
    color: #FFFFFF;
}
.industry > .content .list-title .item div{
    display: flex;
    align-items: center;
    gap: 15px;
}
.industry > .content .list-title .item img{
    width: auto;
    height: 35px;
    display: block;
}
.industry > .content .list-title .item img:last-child{
    display: none;
}
.industry > .content .list-title .item.on img:first-child{
    display: none;
}
.industry > .content .list-title .item.on img:last-child{
    display: block;
}
.industry > .content .list-title .item span{
    font-size: 20px;
}
.industry > .content .list-title .item i{
    display: none;
}
.industry > .content .list-title .item.on i,
.industry > .content .list-title .item:hover i {
    display: inline-flex;
    color: #2E2E2E;
    width: 25px;
    height: 25px;
    background-color: #FFFFFF;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.industry > .content .list-content .item{
    display: none;
}
.industry > .content .list-content .item.on {
    padding: 30px;
    border: 1px solid #F4F4F4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #FFFFFF;
    height: 100%;
}
.industry > .content .list-content .item.on .title{
    display: flex;
    align-items: flex-end;
    gap: 15px;
    height: 50px;
}
.industry > .content .list-content .item.on .title img{
    height: 50px;
    width: auto;
}
.industry > .content .list-content .item.on .title span{
    font-size: 26px;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 3px;
}
.industry > .content .list-content .item.on .content{
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
}
.industry > .content .list-content .item.on .content .text{
    flex: 1;
    font-size: 18px;
    position: relative;
}
.industry > .content .list-content .item.on .content .text:before{
    margin-bottom: 25px;
    content: "";
    display: block;
    height: 1px;
    width: 95%;
    background-color: #D5D5D5;
}
.industry > .content .list-content .item.on .content .image{
    width: 365px;
}
.industry > .content .list-content .item.on .button-b{
    width: 225px;
}

@media screen and (max-width: 768px) {
    .industry{
        margin-top: 60px;
        padding-bottom: 0;
        padding-top: 0;
        background: none;
    }
    .industry > .content{
        display: flex;
        flex-direction: column;

    }
    .industry > .content .list-content{
        display: flex;
        flex-direction: column;
        gap: 35px;
    }
    .industry > .content .list-content .item.on{
        padding: 20px 15px;
        align-items: center;
        gap: 10px;
    }
    .industry > .content .list-content .item.on .title{
        width: 100%;
        text-align: left;
    }
    .industry > .content .list-content .item.on .title img{
        height: 45px;
    }
    .industry > .content .list-content .item.on .content{
        margin-top: 10px;
    }
    .industry > .content .list-content .item.on .content .image{
        display: none;
    }
    .industry > .content .list-content .item.on .content .text:before{
        margin-bottom: 10px;
    }
    .industry > .content .list-content .item.on .button-b{
        font-size: 1.25rem;
        width: 190px;
    }
}
    /*NEWS ARTICLE*/
/*NEWS ARTICLE*/
/*NEWS ARTICLE*/
.media {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.media > div {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0 60px;
}

.media > div > div {
    background-color: #FFFFFF;
    padding: 15px 25px;
}

.media .title {
    display: grid;
    grid-template-columns: var(--font-size-title-1) auto;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid #EEEEEE;

    font-size: var(--font-size-title-1);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title-1);


}

.media .title > div,
.media .title > div > div {
    height: 100%;
    display: flex;
    align-items: center;
}

.media .title > div > div {
    height: 100%;
    border-bottom: 5px solid #afafaf;
}

.media .title > div:nth-child(2) > div {
    padding-left: 10px;
}
.media .title > div:nth-child(2) > div:last-child{
    width: 50px;
}

.media .title img {
    width: 100%;
    height: auto;
    margin-right: 20px;
}

.media .content {
    display: grid;
    grid-template-rows: repeat(6, 104px);
    font-size: var(--font-size-title-3);
    font-weight: var(--font-weight-content);
    line-height: var(--line-height-title-2-3);
    color: #4f4f4f;
}

.media .content > a {
    display: grid;
    grid-template-columns: 2rem 2px 1fr;
    gap: 0 10px;
    padding: 15px 10px;
    border-bottom: 2px solid #f1f1f1;
    cursor: pointer;
}

.media .content > a:hover {
    color: #FFFFFF;
    background-color: var(--font-color);
}

.media .content > a:hover span {
    background-color: #FFFFFF;
}

.media .content > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #f1f1f1;
    grid-row: 6;
    grid-column: 1;
}

.media .content > a > span {
    background-color: #d4d4d4;
}

.media .content > div > a {
    display: flex;
    align-items: center;
}

.media .content > a .date {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.2rem;
    display: flex;
    align-items: center;
}

.media .content > a .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media .content > div .button {
    background-color: #d9d9d9;

    padding: 10px 15px;
    border-radius: 30px;

    font-size: var(--font-size-title-4);

    cursor: pointer;
}

.media .content > div .button:hover {
    background-color: var(--font-color);
    color: white;

}

.media .content > div .button > div {
    padding: 0 10px;
}


.media .left .content {
    grid-template-rows: 208px repeat(4, 104px);
}

.media .left .content > a:first-of-type {
    grid-template-columns: 43% 55%;
    gap: 0 2%;
}

.media .left .content > a:first-of-type .text {
    -webkit-line-clamp: 3;
}

.media .left .content > a:first-of-type > div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 172px;
    aspect-ratio: 16 / 9;
    overflow: hidden; /* 确保内容溢出时被裁剪 */
}

.media .left .content > a:first-of-type > div:first-of-type img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 裁剪图片以适应容器 */
}

.media .left .content > a:first-of-type > div:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.media .left .content > a:first-of-type > div:last-of-type .date {
    display: flex;
    align-items: center;
    font-size: var(--font-size-title-4);
}

.media .left .content > a:first-of-type > div:last-of-type i {
    font-size: 24px;
    margin-right: 3px;
}
.media .left .content > div{
    grid-row: 5;
    grid-column: 1;
}

@media screen and (max-width: 768px) {
    .products .content .top {
        display: flex;
        flex-direction: column;
    }

    .products .content .top .item {
        width: 100%;
        height: auto;

        background-image: none;
    }

    .products .content .top .item.active {
        background-image: none;
    }

    .products .content .top .item > .text {
        padding: 0.75rem 0;
        background-color: #e0e0e0;
        border-radius: 10px;
    }

    .products .content .top .item.active > .text {
        background-color: var(--font-color);
        margin-bottom: 10px;
    }

    .products .content .top .item.active .detail {
        display: grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(2, 2fr);
        gap: 10px;
    }
    .products .content .item .product div{
        font-size: var(--font-size-content);
        font-weight: var(--font-weight-content);
        line-height: var(--line-height-content);
        height: 3.5rem;
    }

}

@media screen and (max-width: 768px) {
    .media{
        padding: 0;
        margin-top: 50px;
    }

    .media > div {
        display: flex;
        flex-direction: column;
        width: 100%!important;
    }
    .media > div > div{
        background-color: initial;
    }

    .media .content > a {
        grid-template-columns: none;
        grid-template-rows: 2fr 0 1fr;
        gap: 0;
    }

    .media .content > a .text {
        grid-row: 1;
    }

    .media .content > a span {
        grid-row: 2;
    }

    .media .content > a .date {
        grid-row: 3;
        justify-content: flex-end;
    }

    .media .left .content {
        grid-template-rows: 5fr repeat(4, 2fr);
    }

    .media .left .content > a:first-of-type {
        grid-template-columns: none;
        grid-template-rows: 70% 28%;
        gap: 2% 0;
        justify-items: center;
    }

    .media .left .content > a:first-of-type .text {
        -webkit-line-clamp: 2;
    }
    .media .left .content > a:first-of-type > div:first-of-type{
        margin-bottom: 5px;
    }

    .media .left .content > a:first-of-type > div:last-of-type {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    .media .left .content > a:first-of-type > div:last-of-type img {
        display: none;
    }

    .media .left .content > a:first-of-type > div:last-of-type .date {
        font-size: var(--font-size-content);
    }
}