@font-face {
    font-family: 'impact'; /* 自定义字体名称 */
    src: url('./fonts/impact.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

.banner{ width: 100%; height: 600px;}
.banner .swiper-slide{ background-size: 100% auto; background-position: center center; background-repeat: no-repeat; position: relative;}
.banner .swiper-slide .btn-learnmore{ position: absolute; width: 120px; left: 50%; bottom: 50px; margin-left: -60px; padding: 10px 0; border-radius: 20px; background-color: #3252ac; text-align: center; color: #FFF;}

.section-title{ text-align: center; margin-bottom: 40px;}
.section-title p:nth-child(1){
    font-family: impact;
    font-size: 40px;
    color: #e0e0e0;
    text-transform: uppercase;
    height: 45px;
    line-height: 45px;
}
.section-title p:nth-child(2){
    font-size: 30px;
}
.section{ padding: 60px 0;}

/* about  */
.about .container{ display: flex; gap: 30px; justify-content: space-between;}
.about .right{ width: 50%; flex-shrink: 0;}
.about-title{ font-size: 22px;}
.about-profile{ font-size: 16px; padding: 40px 0; line-height: 1.8;}
.about .left{flex-grow: 1;}
.about .left img{display: block; width: 100%; height: 400px;}

/* products  */
.products-list{ position: relative;}
.products-list .swiper{ padding-bottom: 40px;}
.products{ background-image: url(../image/home-product.jpg); background-repeat: no-repeat; background-position: center center;}
.products .item{ background-color: #FFF; box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.02); border: 1px solid #EEE; width: 100%; height: 420px; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; box-sizing: border-box;}
.products .item img{ display: block; width: 100%; box-sizing: border-box;}
.products .item p{ text-align: center;}
.products .item p:nth-child(2){ font-size: 18px; text-align: center; padding: 20px 0;     white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

/* about  */
.solution .container{ display: flex; gap: 30px; justify-content: space-between;}
.solution .left{ width: 50%; flex-shrink: 0;}
.solution-title{ font-size: 22px;}
.solution-profile{ font-size: 16px; padding: 40px 0; line-height: 1.8;}
.solution .right{flex-grow: 1;}
.solution .right img{display: block; width: 100%; height: 400px;}

/* news  */
.news{ background-color: #f5f5f5;}
.news-list{display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.news-list .item{ background-color: #FFF; width: calc(50% - 10px); display: flex; color: var(--color-black);}
.news-list .item:hover{ box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); }
.news-list .item-img{ width: 45%; flex-shrink: 0;}
.news-list .item img{ width: 100%; height: 180px; object-fit: cover; display: block;}
.news-list .item-content{ padding: 15px;}
.news-list .news-title{ margin-bottom: 10px; border-bottom: 1px solid #EEE; padding-bottom: 10px;}
.news-list .news-desc{font-size: 12px; color: #666; width: 100%;
    display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
}
.news-list .news-itme{ margin-top: 10px; color: #888; text-align: right;}
.news-footer{ text-align: center; padding-top: 40px;}


@media screen and (max-width: 640px) {

    .banner{ height: 200px;}
    .swiper-button-next, .swiper-button-prev{ display: none !important;}
    .banner .swiper-slide{ background-size: cover;}
    .section{ padding: 20px 0;}
    .section-title {
        margin-bottom: 20px;
    }
    .section-title p:nth-child(1) {
        font-size: 26px;
        height: 30px;
        line-height: 30px;
    }
    .section-title p:nth-child(2){ font-size: 20px;}
    .about .container{ flex-direction: column; margin: 0 15px;}
    .about .left img{ height: auto;}
    .about .right {
        width: auto;
    }
    .about-profile {
        font-size: 14px;
        padding: 20px 0;
        line-height: 1.4;
    }
    .products-list{ margin: 0 15px;}
    .products .item{ height: auto; padding-bottom: 10px;}
    .solution .container {
        gap: 20px;
        flex-direction: column;
        margin: 0 15px;
    }
    .solution .left {
        width: auto;
    }
    .solution-profile{ padding:0 0 20px 0;}
    .solution .right img{ height: auto;}
    .news-list{ flex-direction: column; margin: 0 15px;}
    .news-list .item { width: auto;}
    .news-list .item img{ height: auto;}
    .news-list .item-img{ width: 40%;}
    .news-footer{ padding-top: 20px;}
}