@charset "utf-8";
@import url(swiper.css);

/* -------------------------- 首页banner轮播样式 -------------------------- */
/* banner容器基础样式：高度自适应，最小高度保障 */
.home-banner #banner-swiper {
    height: 100%;
    min-height: 370px;
}

/* banner分页器默认显示 */
.home-banner .swiper-pagination {
    display: block;
}

/* banner轮播项链接：块级占满容器 */
.home-banner .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* banner轮播图片：宽度自适应 */
.home-banner .swiper-slide a img {
    width: 100%;
}

/* 轮播箭头基础样式：圆形无背景、flex居中、过渡动画 */
.home-banner .swiper-button-next,
.home-banner .swiper-button-prev {
    background: 0 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8f8f8;
    transition: all .1s linear;
}

/* 隐藏swiper默认箭头文字 */
.home-banner .swiper-button-next::after,
.home-banner .swiper-button-prev::after {
    display: none;
}

/* 轮播箭头hover效果：背景色+文字色变化 */
.home-banner .swiper-button-next:hover,
.home-banner .swiper-button-prev:hover {
    background: #0056b3;
    color: #FFF;
}

/* 轮播箭头图标大小 */
.home-banner .swiper-button-next i,
.home-banner .swiper-button-prev i {
    font-size: 25px;
}

/* 轮播箭头位置调整 */
.home-banner .swiper-button-next {
    right: 10px;
}
.home-banner .swiper-button-prev {
    left: 10px;
}

/* 轮播指示器激活态：蓝色背景 */
.home-banner .swiper-pagination-bullet-active {
    background: #0056b3;
}

/* 响应式图片控制：PC端显示，移动端隐藏（强制优先级） */
.home-banner .slide-pc,
.home-banner .slide-pc img {
    display: block !important;
}
.home-banner .slide-mb,
.home-banner .slide-mb img {
    display: none !important;
}

/* -------------------------- 首页服务模块样式 -------------------------- */
/* 服务模块容器：最大宽度+居中+flex布局+自动换行 */
.home-service .service-wrap {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 服务项：25%宽度、深色背景、边框、内边距、过渡动画、相对定位 */
.home-service .service-wrap .service-item {
    width: 25%;
    background: #20242d;
    color: #FFF;
    border: 1px solid #4d5057;
    padding: 60px 40px 50px;
    transition: all .2s linear;
    position: relative;
}

/* 服务项hover：背景色切换为蓝色 */
.home-service .service-wrap .service-item:hover {
    background: #FFF;
}

/* 服务项hover：标题下划线切换为白色 */
.home-service .service-wrap .service-item:hover .title::after {
    background: #FFF;
}

/* 服务项hover：右下角图标色变化 */
.home-service .service-wrap .service-item:hover .bg i {
    color: #007aff;
}

/* 服务项标题：字体大小+相对定位+下划线+单行溢出省略 */
.home-service .service-wrap .service-item .title {
    font-size: 18px;
    position: relative;
    padding-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* 服务项标题下划线：蓝色短横线 */
.home-service .service-wrap .service-item .title::after {
    content: "";
    width: 40px;
    height: 3px;
    background: #0056b3;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 服务项描述：内边距+字体大小+行高+浅灰色+3行溢出省略 */
.home-service .service-wrap .service-item .text {
    padding-top: 25px;
    font-size: 16px;
    line-height: 1.8;
    color: #DFDFDF;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 服务项图标容器：上外边距 */
.home-service .service-wrap .service-item .icon {
    margin-top: 20px;
}

/* 服务项图标大小 */
.home-service .service-wrap .service-item .icon i {
    font-size: 30px;
}

/* 服务项右下角背景图标：绝对定位 */
.home-service .service-wrap .service-item .bg {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* 服务项背景图标：灰色+大号字体 */
.home-service .service-wrap .service-item .bg i {
    color: #494c54;
    font-size: 60px;
}

/* -------------------------- 首页产品模块样式 -------------------------- */
/* 产品列表容器：相对定位+左右内边距 */
.home-product .product-list {
    position: relative;
    padding: 0 80px;
}

/* 产品轮播箭头：垂直居中（30%位置） */
.home-product .product-list .home-button-next,
.home-product .product-list .home-button-prev {
    top: 30%;
}

/* 全局分页器默认隐藏（各模块按需显示） */
.swiper-pagination {
    display: none;
}

/* 产品轮播项底部装饰：初始高度0，hover展开 */
.home-product .swiper .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #17375d;
    transition: all .2s linear;
}

/* 产品轮播项hover：底部装饰条展开为6px */
.home-product .swiper .swiper-slide:hover::after {
    height: 6px;
}

/* 产品轮播项hover：图片缩放 */
.home-product .swiper .swiper-slide:hover .img img {
    transform: scale(1.1);
}

/* 产品图片容器：宽度100%+浅灰色边框 */
.home-product .swiper .swiper-slide .img {
    width: 100%;
    border: 1px solid #DFDFDF;
}

/* 产品图片链接：块级占满+溢出隐藏（配合图片缩放） */
.home-product .swiper .swiper-slide .img a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 产品图片：宽高100%+对象覆盖+过渡动画 */
.home-product .swiper .swiper-slide .img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s linear;
}

/* 产品信息容器：内边距+宽度100%+相对定位 */
.home-product .swiper .swiper-slide .info {
    padding: 20px 30px 30px 10px;
    width: 100%;
    position: relative;
}

/* 产品标题：字体大小+颜色+首字母大写 */
.home-product .swiper .swiper-slide .info .title {
    font-size: 18px;
    color: #222;
    text-transform: capitalize;
}

/* 产品描述：字体大小+灰色 */
.home-product .swiper .swiper-slide .info .text {
    font-size: 14px;
    color: #666;
}

/* 产品信息右侧图标：绝对定位+垂直居中+深蓝色 */
.home-product .swiper .swiper-slide .info i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #17375d;
    font-size: 20px;
}

/* -------------------------- 通用轮播箭头样式 -------------------------- */
/* 通用箭头基础样式：绝对定位+无背景+边框+flex居中+过渡+鼠标指针 */
.home-button-next,
.home-button-prev {
    position: absolute;
    left: 0;
    top: 40%;
    background: 0 0;
    width: 40px;
    height: 40px;
    border: 1px solid #DFDFDF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s linear;
    cursor: pointer;
}

/* 通用箭头hover：蓝色背景+边框色同步 */
.home-button-next:hover,
.home-button-prev:hover {
    background: #0056b3;
    border-color: #0056b3;
}

/* 通用箭头hover：图标白色 */
.home-button-next:hover i,
.home-button-prev:hover i {
    color: #FFF;
}

/* 通用箭头图标：黑色 */
.home-button-next i,
.home-button-prev i {
    color: #000;
}

/* 通用下一个箭头：右侧定位 */
.home-button-next {
    left: auto;
    right: 0;
}

/* -------------------------- 首页应用模块样式 -------------------------- */
/* 应用模块背景：浅灰色 */
.home-application {
    background: #f9f9f9;
}

/* 应用列表容器：内边距+相对定位 */
.home-application .applist {
    padding: 0 80px;
    position: relative;
}

/* 应用项：白色背景+宽度100%+过渡+鼠标指针+文字色 */
.home-application .applist .item {
    background: #FFF;
    width: 100%;
    transition: all .1s linear;
    cursor: pointer;
    color: #222;
}

/* 应用项hover：深蓝色背景+白色文字+轻微缩放 */
.home-application .applist .item:hover {
    background: #0056b3;
    color: #FFF;
    transform: scale(1.01);
}

/* 应用项hover：标题下划线白色 */
.home-application .applist .item:hover .title::after {
    background: #FFF;
}

/* 应用项信息容器：内边距 */
.home-application .applist .item .info {
    padding: 30px 20px;
}

/* 应用项图标行高：消除默认行高影响 */
.home-application .applist .item .icon {
    line-height: 1;
}

/* 应用项图标大小 */
.home-application .applist .item .icon i {
    font-size: 44px;
}

/* 应用项标题：字体大小+内边距+相对定位 */
.home-application .applist .item .title {
    font-size: 18px;
    padding: 10px 0;
    position: relative;
}

/* 应用项标题下划线：深蓝色短横线 */
.home-application .applist .item .title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #17375d;
}

/* 应用项图片：宽度自适应+高度自动 */
.home-application .applist .item .pic img {
    width: 100%;
    height: auto;
}

/* -------------------------- 首页视频模块样式 -------------------------- */
/* 视频列表容器：相对定位+内边距+flex布局+自动换行+两端对齐 */
.home-video .videowrap {
    position: relative;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 视频项：浅灰色背景+过渡+下外边距+23%宽度 */
.home-video .videowrap .videoitem {
    background: #f8f8f8;
    transition: all .2s linear;
    margin-bottom: 20px;
    width: 23%;
}

/* 视频项hover：中灰色背景+文字白色 */
.home-video .videowrap .videoitem:hover {
    background: #cccccc;
    color: #FFF;
}

/* 视频项hover：图标深蓝色 */
.home-video .videowrap .videoitem:hover i {
    color: #17375d;
}

/* 视频内容容器：相对定位+宽度100% */
.home-video .videowrap .videoinner {
    position: relative;
    width: 100%;
}

/* 视频封面图：宽高100%+对象覆盖 */
.home-video .videowrap .videoinner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频/iframe容器：宽高100%适配 */
.home-video .videowrap .videoinner iframe,
.home-video .videowrap .videoinner video {
    width: 100%;
    height: 100%;
}

/* 视频播放按钮：绝对定位+居中+白色+大号字体+鼠标指针 */
.home-video .videowrap .videoinner i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 40px;
    cursor: pointer;
}

/* 视频标题容器：固定高度+行高+内边距+flex左对齐+文字左对齐 */
.home-video .videowrap .title {
    height: 60px;
    line-height: 20px;
    padding: 0 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Flex 布局下，水平方向改为左对齐（核心修改） */
    text-align: left;          
}

/* -------------------------- 首页荣誉模块样式 -------------------------- */
/* 荣誉模块背景：背景图+居中+覆盖式缩放 */
.home-honor {
    background: url(../images/1.jpg) no-repeat center;
    background-size: cover;
}

/* 荣誉列表容器：相对定位+无内边距 */
.home-honor .honorwrap {
    position: relative;
    padding: 0 0px;
}

/* 荣誉项：宽度100%+溢出隐藏+过渡动画 */
.home-honor .honorwrap .item {
    width: 100%;
    overflow: hidden;
    transition: all .2s linear;
}

/* 荣誉项hover：轻微放大 */
.home-honor .honorwrap .item:hover {
    transform: scale(1.05);
}

/* 荣誉图片：宽高100%适配 */
.home-honor .honorwrap .item img {
    width: 100%;
    height: 100%;
}

/* -------------------------- 首页新闻模块样式 -------------------------- */
/* 新闻列表容器：相对定位+无内边距+flex布局+自动换行 */
.home-news .newswrap {
    position: relative;
    padding: 0 0px;
    display: flex;
    flex-wrap: wrap;
}

/* 新闻项：23%宽度+过渡+相对定位+右外边距 */
.home-news .newswrap .item {
    width: 23%;
    transition: all .2s linear;
    position: relative;
    margin-right: 2.66%;
}

/* 新闻项：第4项消除右外边距（4列布局） */
.home-news .newswrap .item:nth-child(4n) {
    margin-right: 0;
}

/* 新闻图片：宽高100%+对象覆盖 */
.home-news .newswrap .item .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 新闻信息容器：上下内边距 */
.home-news .newswrap .item .news-info {
    padding: 20px 0;
}

/* 新闻标题：字体大小+深色+中等字重 */
.home-news .newswrap .item .news-info .title {
    font-size: 18px;
    color: #222;
    font-weight: 500;
}

/* 新闻日期：字体大小+深蓝色+上下内边距 */
.home-news .newswrap .item .news-info .date {
    font-size: 16px;
    color: #17375d;
    padding: 10px 0;
}

/* 新闻描述：字体大小+灰色+行高 */
.home-news .newswrap .item .news-info .text {
    font-size: 14px;
    color: #666;
    line-height: 24px;
}

/* 新闻项底部装饰：初始高度0，hover展开 */
.home-news .newswrap .item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #17375d;
    transition: all .2s linear;
}

/* 新闻项hover：图片轻微放大 */
.home-news .newswrap .item:hover img {
    transform: scale(1.05);
}

/* 新闻项hover：底部装饰条展开为6px */
.home-news .newswrap .item:hover::after {
    height: 6px;
}

/* -------------------------- 首页关于我们模块样式 -------------------------- */
/* 关于我们容器：左右内边距 */
.home-about .l-wrap {
    padding: 0 80px;
}

/* -------------------------- 首页静态模块样式 -------------------------- */
/* 静态模块列表：左右内边距 */
.home-static .list {
    padding: 0 50px;
}

/* 静态模块：相对定位+层级1（高于伪元素） */
.home-static {
    position: relative;
    z-index: 1;
}

/* 静态模块遮罩：绝对定位+全宽高+黑色半透明+层级-1（低于内容） */
.home-static::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    z-index: -1;
}

/* -------------------------- 响应式样式 - 中等屏幕（≤1366px） -------------------------- */
@media (max-width: 1366px) {
    /* 新闻列表：左右内边距 */
    .home-news .newswrap {
        padding: 10px;
    }
}

/* -------------------------- 响应式样式 - 平板屏幕（≤1024px） -------------------------- */
@media (max-width: 1024px) {
    /* banner：最小高度降低 */
    .home-banner #banner-swiper {
        min-height: 100px;
    }

    /* 服务项：改为2列布局 */
    .home-service .service-wrap .service-item {
        width: 50%;
    }

    /* 关于我们：消除内边距 */
    .home-about .l-wrap {
        padding: 0;
    }

    /* 视频列表：消除内边距 */
    .home-video .videowrap {
        padding: 0;
    }

    /* 静态模块列表：消除内边距 */
    .home-static .list {
        padding: 0;
    }

    /* 视频项：改为2列布局 */
    .home-video .videowrap .videoitem {
        width: 48%;
    }

    /* 新闻项：改为2列布局+下外边距+调整右外边距 */
    .home-news .newswrap .item {
        width: 48%;
        margin-bottom: 20px;
        margin-right: 4%;
    }

    /* 新闻项：第2项消除右外边距（2列布局） */
    .home-news .newswrap .item:nth-child(2n) {
        margin-right: 0;
    }
}

/* -------------------------- 响应式样式 - 移动设备（≤768px） -------------------------- */
@media (max-width: 768px) {
    /* banner下一个箭头：位置左移+尺寸缩小 */
    .home-banner .swiper-button-next {
        right: 10px;
        width: 30px;
        height: 30px;
    }

    /* banner上一个箭头：位置右移+尺寸缩小 */
    .home-banner .swiper-button-prev {
        left: 10px;
        width: 30px;
        height: 30px;
    }

    /* 关于我们标题：居中对齐 */
    .home-about .about-info .home-title {
        text-align: center;
    }

    /* 关于我们标题下划线：居中 */
    .home-about .about-info .home-title-line {
        margin: 0 auto;
    }

    /* 头部信息：左右内边距 */
    .head-info {
        padding: 0 15px;
    }

    /* 头部导航链接：vw单位适配屏幕 */
    .head-info #nav ul li a {
        font-size: 3.46667vw;
    }

    /* 应用/荣誉/产品列表：消除内边距，仅保留左右10px */
    .home-application .applist,
    .home-honor .honorwrap,
    .home-product .product-list {
        padding: 0 10px;
    }

    /* 应用/荣誉/产品轮播：底部内边距（给分页器留空间） */
    .home-application .applist .swiper,
    .home-honor .honorwrap .swiper,
    .home-product .product-list .swiper {
        padding-bottom: 40px;
    }

    /* 通用箭头：尺寸调整+白色背景+默认隐藏（移动端显示分页器） */
    .home-button-next,
    .home-button-prev {
        width: 35px;
        height: 35px;
        background: #FFF;
        display: none;
    }

    /* 服务项：改为1列布局+减少内边距 */
    .home-service .service-wrap .service-item {
        width: 100%;
        padding: 20px 15px 10px;
    }

    /* 服务项描述：减少上内边距+字体缩小 */
    .home-service .service-wrap .service-item .text {
        padding-top: 15px;
        font-size: 14px;
    }

    /* 服务项图标：减少上外边距 */
    .home-service .service-wrap .service-item .icon {
        margin-top: 10px;
    }

    /* 服务项背景图标：位置上移 */
    .home-service .service-wrap .service-item .bg {
        bottom: 10px;
    }

    /* 服务项背景图标：字体缩小 */
    .home-service .service-wrap .service-item .bg i {
        font-size: 40px;
    }

    /* 产品信息：减少内边距+增加上外边距 */
    .home-product .swiper .swiper-slide .info {
        padding: 0 30px 15px 10px;
        margin-top: 15px;
    }

    /* 应用项信息：减少内边距 */
    .home-application .applist .item .info {
        padding: 15px;
    }

    /* 应用项标题：字体缩小+中等字重 */
    .home-application .applist .item .info .title {
        font-size: 16px;
        font-weight: 500;
    }

    /* 应用项图标：vw单位适配屏幕 */
    .home-application .applist .item .info i {
        font-size: 5.86667vw;
    }

    /* 新闻标题：字体缩小+行高调整 */
    .home-news .newswrap .item .news-info .title {
        font-size: 16px;
        line-height: 1.2;
    }

    /* 新闻描述：行高调整+隐藏 */
    .home-news .newswrap .item .news-info .text {
        line-height: 20px;
        display: none;
    }

    /* 分页器：显示+底部对齐 */
    .swiper-pagination {
        display: block;
        bottom: 0 !important;
    }

    /* 分页器激活态：深蓝色背景 */
    .swiper-pagination .swiper-pagination-bullet-active {
        background:#17375d;
    }

    /* 视频项：改为1列布局 */
    .home-video .videowrap .videoitem {
        width: 100%;
    }

    /* 产品标题：居中对齐+块级显示 */
    .home-product .swiper .swiper-slide .info .title {
        text-align: center;
        display: block;
    }

    /* 产品描述：隐藏 */
    .home-product .swiper .swiper-slide .info .text {
        display: none;
    }
}