@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* ---------- 现代化 CSS Reset ---------- */
/* 1. 盒模型统一：width/height 包含 padding 和 border */
*,
*::before,
*::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* 2. 清除所有元素的默认内外边距 */
* { margin: 0; padding: 0;}
/* 3. 设置根元素基础字体（可选，便于 rem 计算） */
html {
    font-size: 62.5%; /* 1rem = 10px（10/16=62.5%） */
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth; /* 可选平滑滚动 */}
/* 4. 全局主体样式：字体、背景、行高、文字颜色 */
body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.8rem;     /* 16px */ overflow-x: hidden;
    line-height: 1; color: #000; background-color: #fff;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
/* 5. 媒体元素：图片、视频等自适应且无额外间隙 */
img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; height: auto;}
/* 6. 表单元素继承字体（避免不一致） */
input,
button,
textarea,
select { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit;}
input:focus-visible,textarea:focus-visible{ outline: none; border: none;}
/* 7. 按钮清除默认样式并保留指针 */
button { background: none; border: none; cursor: pointer;}
/* 8. 链接去除下划线，继承颜色 */
a { color: inherit; text-decoration: none; cursor: pointer;
    -webkit-transition: color .1s linear;
    transition: color .1s linear;}
a:hover, a:focus{ color: inherit; text-decoration: none;}
ul,ol,dl,.navbar,h1, .h1, h2, .h2, h3, .h3,p{ margin: 0; padding: 0;}
input:focus,textarea:focus,select:focus{ outline: none;}

/* 9. 列表清除默认标记 */
ul, ol,li{ list-style: none;}
/* 10. 表格边框合并，单元格间距归零 */
table { border-collapse: collapse; border-spacing: 0;}
/* 11. 标题等块级元素默认继承行高，可自行按需覆盖 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: bold; line-height: 1;}
/* 12. 引用去除引号 */
blockquote,
q { quotes: none;}
blockquote::before,
blockquote::after,
q::before,
q::after { content: ''; }
/* 13. 辅助类：隐藏元素 */
.hidden {  display: none !important;}
/* 14. 清除浮动（若需要） */
.clearfix { zoom: 1; }
.clearfix::after {content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both;}

img { border: none; }
.links a:hover{ color: #0657b2; text-decoration: underline;}
.img-responsive{ display: block; max-width: 100%; height: auto; }
.text-right{ text-align: right;}

/*文本溢出处理*/
.text-overflow-1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-overflow-2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.visible-xs{ display: none!important;}
.visible-sm{ display: none!important;}
.fl{ float: left;}
.fr{ float: right;}
.container { max-width: 1560px; margin: 0 auto;}
.show{ display: block!important;}
.pos-rel{ position: relative;}

.imghover{ overflow: hidden;}
.imghover .pic{ overflow: hidden; }
.imghover img{ transition: all linear .3s; }
.imghover:hover img{ transform: scale(1.07);}


/*****base*****/
/*top*/
.top{ position: fixed; top: 0; left: 0; width: 100%; line-height: 3.6rem; font-size: 1.5rem; background: #e5e5e5; z-index: 999!important; }
.top ul{ float: right;}
.top li{ float: left; margin-left: 4rem; cursor: pointer; }
.top li i{ position: relative; top: .2rem; font-size: 1.6rem; margin-right: .8rem;}

/*daohang*/
.daohang{ position: fixed!important; top: 3.6rem!important; border-bottom: 2px solid #0657b2; background: #fff; z-index: 999!important; width: 100%;}
.logo a{ display: block; margin-top: 2rem; width: 16rem; height: 3.5rem; background: url("../images/logo.png") no-repeat center; }
.dh-tel{ position: relative; padding-left: 3.4rem; font-size: 2rem; line-height: 34px; font-weight: 700; color: #0657b2; }
.dh-tel span{ position: absolute; left: 0; top: .3rem; font-size: 2.8rem;}
.dh-tel:hover{ color: #0657b2;}
.dh-nav{ padding-top: .4rem;}
.dh-nav > li{ float: left; margin-left: 2rem; line-height: 7rem;}
.dh-nav > li > a{ display: block; padding: 0 .5rem; font-weight: 700; text-transform: uppercase;}
.dh-nav > li > a:hover{ color: #0657b2;}

.dh-sub{ display: none; position: absolute; top: 72px; font-size: 1.6rem; padding: 10px 0; width: 20rem; background: rgba(255,255,255,.95); border-bottom: 5px solid #6fa0dd; z-index: 99;}
.dh-sub li a{ display: block; line-height: 4rem; padding: 0 15px;}
.dh-sub li a:hover{ color: #fff; background: #0076e0;}

.pro-sub{ padding: 3rem 0; width: 100%; left: 0; top: 76px;}
.pro-sub dt{ margin: 1.5rem 0 .5rem; line-height: 1.4; font-weight: bold;}
.pro-sub dd{ line-height: 1.8; font-size: 1.4rem; color: #333;}
.pro-sub dl{ float: left; width: 21.25%; }
.pro-sub dl + dl{ margin-left: 5%;}
.pro-sub dl img{ width: 100%;}
.solu-sub{ width: 26rem; }
.case-sub{ width: 23rem; }
.dh-nav > li:hover .dh-sub{ display: block;}
/*****base*****/

/******index******/
/* ====================== 全屏滚动样式 ====================== */
.fullpage-wrap { width: 100%; height: 100vh; overflow: hidden; position: relative;}
.fullpage-wrap .section { width: 100%; height: 100vh; overflow: hidden;}
/* 大屏下禁止页面整体滚动 */
@media (min-width: 1169px) {
    html, body { overflow: hidden !important;}
    /* 修正原有区块padding，适配100vh高度 */
    /*.index-item { padding: 6rem 0 !important; display: flex;}*/
    /*.index-parts { padding-top: 0 !important;}*/
}
/* 宽度小于1169px：取消全屏，恢复原生流式布局 */
@media (max-width: 1168px) {
    .fullpage-wrap { height: auto; overflow: visible;}
    .fullpage-wrap .section { height: auto; overflow: visible;}
    html, body { overflow: visible !important; }
}

/*index-banner*/
.i-banner{ position: relative;}
.i-banner video{ position: absolute; left: 0; top: 0; width: 140%; height: 140%; z-index: 9;
    object-fit: cover; object-position: center center;
   }
/*.i-banner p{ position: absolute; color: #fff; z-index: 99; font-size: 7.2rem; text-align: center; width: 100%; height: 100%; font-weight: bold; display: flex; align-items: center; justify-content: center; text-shadow: 2px 1px 0 rgba(6, 6, 6, 0.3);}*/
.i-banner .txt{ position: relative; z-index: 99; top: 0; padding: 23rem 0 5rem; text-align: center; color: #fff; }
.i-banner .txt h2{ font-size: 9rem;}
.i-banner ul{ margin: 5rem 0 6rem; display: inline-block; }
.i-banner ul li{ display: inline-block; position: relative; width: 34rem; height: 34rem; padding-top: 4rem; background: transparent;}
.i-banner ul li + li{ margin-left: -2rem; }
.i-banner li i{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: url("../images/index-yuan1.png") no-repeat center/contain;}
.i-banner .li2 i, .banner-index .li4 i{ background-image: url("../images/index-yuan2.png");}
.i-banner li img{ display: inline-block; width: 15rem; height: auto; }
.i-banner li p{ font-size: 3rem;}
.i-banner li b{ display: block; margin: .2rem 0 .5rem; font-size: 2em;}
.i-banner .zixun{ display: block; width: 16em; line-height: 2.5em; margin: 0 auto; font-size: 3.2rem; color: #fff; background: #000; border-radius: 0 0 .625em; position: relative; z-index: 9;}
.i-banner .zixun i{ display: inline-block; margin-right: 0.4em; font-size: 1.5625em; vertical-align: middle; position: relative; top: -0.08em;}
.i-banner .zixun:hover{ background: #c8000a;}


.banner-index iframe,.banner-index video{ position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; transform: translate(-50%,-50%); }



.index-item{ display: flex; align-items: center; padding: 12rem 0 0; flex-direction: column; justify-content: center;}
.index-item h2{ position: relative; margin-bottom: .8em; font-size: 6rem; }
.index-item .btn{ display: inline-block; width: 20rem; font-size: 1.8rem; line-height: 5.6rem; text-align: center; border: 2px solid #df0024; color: #df0024; border-radius: 1rem; }

.index-item h2 .btn{ position: absolute; right: 0; line-height: 5rem; color: #000; }
.index-item .btn:hover{ background: #df0024; color: #fff;}
.swiper-container img{ width: 100%;}


/*index-product*/
.i-pro-swiper{ padding-bottom: 13rem;}
.i-pro-swiper .pic{ float: left; width: 58%;}
.i-pro-swiper .pic .img2{ display: none;}
.i-pro-swiper .txt{ float: right; width: 37%;}
.i-pro-swiper .txt h3{ position: relative; font-size: 3.6rem; padding-bottom: 0.5em; margin-bottom: 1em; }
.i-pro-swiper .txt h3::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 3em; height: 0.14em; background: #df0024;}
.i-pro-swiper .i-p-canshu{ line-height: 1.7; }
.i-pro-swiper .i-p-canshu p + p{ margin-top: 1.5rem;}
.i-pro-swiper .i-p-btns{ margin-top: 4rem; }
.i-pro-swiper .i-p-btns a + a{ margin-left: 1rem;}
.i-pro-swiper .i-p-pagination{ bottom: 0; width: 100%;}
.i-pro-swiper .i-p-pagination .swiper-pagination-bullet{ float: left; width: 25%; text-align: center; height: 6.5rem; line-height: 6.5rem; border-radius: 0; margin: 0; }
.i-pro-swiper .i-p-pagination .swiper-pagination-bullet-active,
.i-pro-swiper .i-p-pagination .swiper-pagination-bullet:hover{ background: #df0024; color: #fff; opacity: 1;}

/*index-parts*/
.index-parts ul{ margin: 0 -1rem;}
.index-parts li{ float: left; width: 25%; padding: 0 1rem; margin-bottom: 3rem;}
.index-parts li p{ font-weight: bold; text-align: center; padding-top: 1em;}

/*index-about*/
.index-about{ color: #fff; background: url("../images/index-about-bg.jpg") no-repeat center/cover;}
.i-a-txt{ float: left; width: 50%;}
.i-a-txt .p{ line-height: 1.33;}
.i-a-txt .p p + p{ margin-top: 2rem;}
.i-a-txt .btn{ margin-top: 3rem; color: #fff;}
.i-a-pic{ float: right; width: 46%;}
.i-a-pic .img2{ display: none;}
.i-a-swiper{ margin: 2rem -1rem 0; padding-bottom: 8rem;}
.i-a-swiper .swiper-slide{ width: 25%; padding: 0 1rem; }

.index-item div[class*='s-b']{ display: flex; flex-wrap: nowrap; align-items: center; background: none; top: auto; bottom: 0; left: 50%; right: auto; color: #fff; width: 8.5rem; height: 5.4rem; font-size: 5.4rem;}
.index-item div[class*='s-b'] svg{ fill: currentColor; }
.index-item .s-b-prev{ margin-left: -10rem;}
.index-item .s-b-next{ margin-left: 1.5rem;}
.index-item div[class*='s-b']:hover svg{ fill: #df0024; }

/*index-solu*/
.index-solu h2{ text-align: center;}
.index-solu .i-solu-p{ text-align: center; line-height: 1.4; margin-bottom: 3rem; }
.index-solu .i-solu-p a{ display: inline-block; font-weight: bold; color: #df0024; margin-top: 1rem;}
.index-solu .i-solu-p a:hover{ text-decoration: underline;}
.i-solu-swiper{ margin: 0 -1rem; padding-bottom: 8rem; }
.i-solu-swiper .swiper-slide{ width: 39%; padding: 0 1rem;}
.i-solu-swiper .swiper-slide a{ display: block; position: relative;}
.i-solu-swiper .swiper-slide p{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 6rem; font-weight: bold; text-align: center; color: #fff; text-decoration: underline; line-height: 1.25; text-shadow: 2px 1px 0 rgba(6, 6, 6, 0.3);
    background: linear-gradient(to bottom, rgba(0, 6, 68, 0.75) 0%, rgba(128, 134, 182, 0.75) 50%, rgba(0, 6, 68, 0.75) 100%);}
.i-solu-swiper .swiper-slide-active p{ background: none;}
.i-solu-swiper div[class*='s-b']{ color: #000;}

/*index-case*/
.index-case{ color: #fff; background: url("../images/index-case-bg.jpg") repeat center;}
.index-case .container{ position: relative;}
.index-case .pp{ position: absolute; left: 0; width: 33.33%; padding-right: 10rem; line-height: 1.4;}
.index-case .pp h2{ margin-bottom: 3.5rem;}
.index-case .pp .btn{ line-height: 4.6rem; color: #fff; margin-top: 3rem;}
.index-case ul{ margin: 0 -1rem;}
.index-case li{ float: left; width: 33.33%; padding: 0 1rem; margin-bottom: 2rem;}
.index-case li .pic img{ width: 100%; }
.index-case li a{ display: block; background: #fff; color: #000;}
.index-case li .txt{ padding: 2.5rem 3rem;}
.index-case li h3{ font-size: 2.1rem; line-height: 1.14; min-height: 2.28em;}
.index-case li:first-child{ margin-left: 33.33%; width: 66.67%;}
.index-case li:first-child .txt{ float: right; width: 50%; padding-right: 5rem; font-size: 2rem; font-weight: bold; line-height: 1.2;}
.index-case li:first-child h3{ font-size: 3rem; height: 2em; line-height: 1;}
.index-case li:first-child .i-c-canshu{ margin: 2rem 0; color: #a4a4a4;}
.index-case li:first-child .i-c-canshu p{ position: relative; padding-left: 2rem;}
.index-case li:first-child .i-c-canshu p::before{ content: ''; position: absolute; left: 0; top: 50%; width: 0.6rem; height: 0.6rem; background: #df0024; border-radius: 0.6rem; margin-top: -0.3rem;}
.index-case li:first-child span{ float: right; color: #df0024;}
.index-case li:first-child .pic{ float: left; width: 49.1%;}

/*index-news*/
.index-news{ }
.index-news ul{ margin: 0 -2rem;}
.index-news li{ float: left; width: 33.33%; padding: 0 2rem;}
.index-news li h3{ margin-top: 4rem; font-size: 3.6rem; line-height: 1; height: 2em;}
.index-news li .p{ line-height: 1.875; height: 3.75em; margin: 2rem 0;}
.index-news li .time{ text-align: right; display: flex; align-items: center; justify-content: flex-end;}
.index-news li .time span{ display: inline-block; margin-left: 1rem; width: 3rem; height: 3rem; border-radius: 3rem; background: #000; color: #fff; padding: .3rem;}
.index-news li .time svg{ fill: currentColor;}
.index-news li:hover .time span{ background: #df0024; }
/******index******/


/*footer*/
.footer{ color: #fff; background: #255891; line-height: 2.2; font-size: 2.2rem;}
.footer-top{ padding-bottom: 6rem;}
.footer-top dl{ float: left;}
.footer-top dl + dl{ margin-left: 8rem;}
.footer-top dt{ padding-bottom: 1rem; margin-bottom: 2rem; font-size: 3.4rem; font-weight: bold; border-bottom: 1px solid #787878;}
.footer-top dd{}
.footer-top dl:last-child .share{ margin-top: 2rem; }
.footer-top dl:last-child .share a{ float: left; margin-right: 1rem;}
.footer-top i{ display: block; width: 3.6rem; height: 3.6rem; text-align: center; line-height: 3.6rem; color: #333; background: #fff; border-radius: .5rem; }
.footer-top i svg{ position: relative; top: .8rem; left: .8rem; width: 2rem; height: 2rem; fill: #333;}
.copy{ line-height: 5rem; padding-top: 2rem; border-top: 1px solid;}
.footer a:hover{ text-decoration: underline;}
/*footer*/

/*bottom*/
.bottom{ position: fixed; bottom: 0; left: 0; /*max-width: 720px;*/ width: 100%; z-index:99; background: #c40000; }
.bottom a{ float: left; width: 25%; text-align: center; line-height: 70px; font-size: 32px; color: #fff;}
.bottom a.icon-kefu{ font-size: 42px;}
.bottom a:hover{ background: #fa3c3c;}
/*bottom*/

.liubai{ height: 55px;}
/*base*/



/*swt*/
.swt{ position: fixed; right: 0; bottom: 100px; z-index: 999;}
.swt a{ display: block; position: relative; width: 48px; height: 48px; margin-bottom: 5px; background:#f00 url(../images/swt.png) no-repeat 0 -3px; opacity: 0.8; filter: Alpha(opacity=80); cursor: pointer;}
.swt a:hover{ background-color: #bf0303;}
.swt .swt-kefu{background-position: 0 -49px;}
.swt .swt-email{ background-position: 0 -98px;}
.swt .swt-wx{ background-position: 0 -194px;}
.swt .swt-whatsapp{ background-position: 0 -242px;}
.swt .swt-img{ position: absolute; right: 48px; top: 50px; display: none; padding: 10px; background: #fff; margin-right: 15px; box-shadow: 0 2px 15px 0 rgb(0 0 0 / 30%); border-radius: 10px 0 0 10px;}
.swt .swt-img::before{
    position: absolute; right: -15px; top: 50%;
    margin-top: -16px;
    content: ''; width: 0; height: 0;
    border-width: 12px 0 12px 16px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;}
.swt .swt-img-whatsapp{ top: 100px;}
.swt .swt-img-email{ font-size: 22px; padding: 15px;}
.swt .swt-img img{ max-width: 190px; width: 190px;}
.swt a:hover + .swt-img{ display: block;}


/* 中桌面：1280px ~ 1535px */
@media (max-width: 1589px) {
    .container { max-width: 1320px; }

    /*base*/
    .dh-nav > li{ margin-left: 12px;}
    .dh-nav > li > a{ font-size: 15px; }
    .pro-sub dt{ font-size: 15px; margin: 13px 0 5px;}
    .pro-sub dd{ font-size: 13px;}
    /*base*/

    /*********index*********/
    .i-banner .txt h2{  font-size: 8rem;}
    .i-banner ul li{ width: 32rem; height: 32rem;}
    .i-banner li img{ width: 13rem;}
    .i-banner li p{ font-size: 2.6rem;}

    .index-item h2{ font-size: 5.5rem;}

    .i-solu-swiper .swiper-slide p{ font-size: 5rem;}

    .footer{ font-size: 2rem;}
    .footer-top dl + dl{ margin-left: 5rem;}
    .footer-top dt{ font-size: 2.8rem;}


}
/* 小桌面：1024px ~ 1279px */
@media (max-width: 1349px) {
    .container { max-width: 1140px; }

    .daohang{ padding: 0;}
    .daohang .icon-menu{ padding: 2px 5px 0;}
    .daohang .icon-menu svg{ width: 30px; height: 30px; fill: #0657b2;}
    .m-daohang{ display: none!important; position: fixed; top: 63px;  background: rgba(0,0,0,.7); z-index: 999; color: #fff; width: 100%; left: 0; padding: 20px 0;}
    .m-daohang a{ display: block; line-height: 40px; font-size: 14px; padding: 0 20px;}
    .m-daohang a:hover{  background: rgba(0,0,0,.7);}
    .m-daohang.show{ display: block!important;}

    /*********index*********/
    .fullpage-wrap{ font-size: 1.6rem;}

    .i-banner .txt h2{  font-size: 7rem;}
    .i-banner ul li{ width: 26rem; height: 26rem;}
    .i-banner li img{ width: 11rem;}
    .i-banner li p{ font-size: 2.2rem;}

    .index-item h2{ font-size: 5rem; }
    .index-item .btn{ line-height: 5rem;}

    .i-pro-swiper{ padding-bottom: 10rem;}
    .i-pro-swiper .txt h3{ font-size: 3.2rem;}
    .i-pro-swiper .i-p-canshu p + p{ margin-top: 1rem;}
    .i-pro-swiper .i-p-btns{ margin-top: 3rem;}
    .i-pro-swiper .i-p-pagination .swiper-pagination-bullet{ font-size: 2rem; }

    .i-a-pic{ padding-top: 4rem;}

    .i-solu-swiper .swiper-slide{ width: 45%;}
    .i-solu-swiper .swiper-slide p{ font-size: 4.5rem;}

    .index-case .pp{ padding-right: 3rem;}
    .index-case .pp h2{ margin-bottom: 2rem;}
    .index-case .pp .btn{ margin-top: 2rem;}
    .index-case li .txt{ padding: 2rem 2.5rem;}
    .index-case li h3{ font-size: 2rem;}
    .index-case li:first-child .txt{ font-size: 1.8rem;}
    .index-case li:first-child h3{ font-size: 2.5rem;}
    .index-case li:first-child .i-c-canshu p{ padding-left: 1.6rem;}

    .index-news ul{ margin: 0 -1rem;}
    .index-news li{ padding: 0 1rem;}
    .index-news li h3{ font-size: 2.5rem; margin-top: 3rem;}
    .index-news li .p{ margin: 1.5rem 0;}

    .footer{ font-size: 1.8rem;}
    .footer-top dl + dl{ margin-left: 3rem;}
    .footer-top dt{ font-size: 2.2rem;}



}

@media (max-width: 1169px) {
    html{ font-size: clamp(12px, 12px + (100vw - 767px) * 0.01527, 18px); }
    .visible-sm{ display: block!important;}
    .hidden-sm{ display: none!important;}
    .container { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto;
        /* 移动端默认：左右留白 16px + 安全区适配 */
        padding-left: max(1.6rem, env(safe-area-inset-left));
        padding-right: max(1.6rem, env(safe-area-inset-right)); }
    body{ font-size: 1.5rem; padding-top: 6rem; overflow: hidden; }

    .i-banner{ overflow: hidden!important;}
    .top{ font-size: .9rem; line-height: 2.2rem;}
    .top li{ margin-left: 2rem;}
    .top li i{ font-size: 1.1em;}
    .daohang{ padding: 0; position: fixed; top: 2.2rem!important; }
    .m-daohang{ top: 6.4rem; display: none!important;}
    .logo a{ width: 15rem; height: 4rem; margin-top: 0; }
    .daohang .icon-menu{ padding: 0; margin-top: .3rem;}
    .daohang .icon-menu svg{ fill: #000; width: 3rem; height: 3rem;}

    .fullpage-wrap{ font-size: 1.2rem;}


    .i-banner video{ top: -12vw}
    .i-banner .txt{ padding: 6vw 0 5vw;}
    .i-banner .txt h2{  font-size: 5.5vw;}
    .i-banner ul{ margin: 5vw 0 5vw;}
    .i-banner ul li{ width: 22vw; height: 22vw; padding-top: 3vw;}
    .i-banner ul li + li{ margin-left: -2vw;}
    .i-banner li img{ width: 9.5vw;}
    .i-banner li p{ font-size: 2.1vw;}
    .i-banner li p b{ margin: 0;}
    .i-banner .zixun{ width: 11em; line-height: 2.4; font-size: 3vw;}

    .index-item{ padding: 5rem 0;}
    .index-item h2{ text-align: center; font-size: 3.5rem;}
    .index-item h2 .btn{ display: none; }
    .index-item .btn{ width: 16rem; line-height: 4.2rem; font-size: 1.4rem; }
    .index-item div[class*="s-b"]{ display: none;}

    .index-product h2{ text-align: left;}
    .i-pro-swiper{ padding-bottom: 10rem;}
    .i-pro-swiper .pic{ width: 40%;}
    .i-pro-swiper .pic .img1{ display: none;}
    .i-pro-swiper .pic .img2{ display: block;}
    .i-pro-swiper .txt{ width: 54%; font-size: 1.2rem;}
    .i-pro-swiper .txt h3{ font-size: 2em;}
    .i-pro-swiper .i-p-btns{ position: absolute; width: 100%; left: 0; bottom: -7rem; text-align: center;}
    .i-pro-swiper .i-p-pagination{ bottom: 0; height: .5rem;}
    .i-pro-swiper .i-p-pagination .swiper-pagination-bullet{ float: none; font-size: 0; width: 2.5rem; height: .5rem; background: #cbcbcb; margin: 0 .5rem;}
    .i-pro-swiper .i-p-pagination .swiper-pagination-bullet-active{ width: 5rem; background: #d20001;}

    .index-parts{ padding: 0 0 3rem;}
    .index-parts .container{ position: relative;}
    .index-parts ul{ margin: 0 -.5rem;}
    .index-parts li{ padding: 0 .5rem; width: 33.33%; margin-bottom: 1rem;}
    .index-parts .btn{ position: absolute; width: 33.33%; padding: 0 0.5rem; right: 1.6rem; bottom: 10rem; border: 0; color: #000; font-size: 2rem; font-weight: bold;}
    .index-parts .btn:hover{ background: none; color: #000;}

    .i-a-pic{ padding-top: 7rem;}
    .i-a-pic .img1{ display: none;}
    .i-a-pic .img2{ display: block;}
    .i-a-txt h2{ margin-bottom: 2rem; text-align: left;}
    .i-a-txt .btn{ display: none;}
    .i-a-swiper{ padding-bottom: 0; margin: 2rem -0.4rem 0;}
    .i-a-swiper .swiper-slide{ padding: 0 .4rem; width: 33.33%;}

    .index-solu .i-solu-p a{ display: none;}
    .i-solu-cont{ overflow: hidden;}
    .i-solu-swiper{ padding-bottom: 0;}
    .i-solu-swiper .swiper-slide{ width: 70%; padding: 0 0.5rem;}
    .index-item .mbtn{ display: block; width: 80%; margin: 3rem auto 0; background: #df0024; color: #fff; border-radius: 5rem;}

    .index-case .pp{ position: static; margin-bottom: 3rem; width: 100%; text-align: center;}
    .index-case .pp .btn{ display: none;}
    .index-case ul{ margin: 0 -0.5rem;}
    .index-case li{ width: 50% !important; padding: 0 .5rem;}
    .index-case li .txt{ padding: 1.5rem 2rem;}
    .index-case li h3{ font-size: 1.6rem!important; line-height: 1.3!important; height: 2.6em!important;}
    .index-case li:first-child{ margin: 0;}
    .index-case li:first-child .txt{ width: 100%;}
    .index-case li:first-child .pic{ width: 100%;}
    .index-case li:first-child .i-c-canshu{ display: none;}
    .index-case li:first-child span{ display: none;}

    .index-news li{ width: 50%;}
    .index-news li h3{ font-size: 2rem; margin-top: 1.5rem;}
    .index-news li .p{ line-height: 1.6; height: 3.2em; margin: 1rem 0;}
    .index-news li .time span{ width: 2.2rem; height: 2.2rem;}
    .index-news li:first-child{ width: 100%; margin-bottom: 2rem;}
    .index-news li:first-child a{ display: flex; justify-content: space-between; align-items: center;}
    .index-news li:first-child .pic{ width: 48.3%; }
    .index-news li:first-child .txt{ width: 48%;}
    .index-news li:first-child .txt h3{ margin-top: 0;}
}


@media (max-width: 767px){
    html{ font-size: clamp(10px, 10px + (100vw - 320px) * 0.0152, 16px); }
    body{ font-size: 1.2rem; padding-top: 5rem;}
    .visible-xs{ display: block!important;}
    .hidden-xs{ display: none!important;}

    /*base*/
    .daohang{ padding: .5rem 0; top: 0!important;}
    .m-daohang{ top: 5.1rem; display: none!important;}

    /*index*/
    .i-banner p{ font-size: 5.2vw;}

    .index-item{ padding: 4rem 0;}
    .index-item h2{ font-size: 3.2rem;}
    .index-item .mbtn{ margin-top: 2rem;}

    .index-product h2{ text-align: center;}
    .index-product li + li{ margin-top: 3rem;}
    .index-product li img{ width: 100%;}
    .index-product li p{ font-size: 2.5rem; font-weight: bold; text-align: center; text-decoration: underline; margin-top: 1.5rem;}

    .index-parts li{ width: 50%;}
    .index-parts .btn{ position: static; width: 100%; line-height: 4.5rem; background: #df0024; color: #fff; border-radius: 5rem; margin-top: 1.5rem; font-size: 1.8rem;}

    .i-a-txt{ width: 100%;}
    .i-a-txt .p{ display: none;}
    .i-a-pic{ width: 100%; padding-top: 0;}
    .i-a-pic .img1{ display: block;}
    .i-a-pic .img2{ display: none;}
    .i-a-mtxt p{ position: relative; font-size: 2.6rem; font-weight: bold; line-height: 1.33; padding-left: 18%; margin-top: .8em;}
    .i-a-mtxt p::before{ content: ''; position: absolute; left: 11%; top: .4em; width: .5em; height: .5em; background: #df0024; border-radius: 50%;}

    .index-solu .i-solu-p br{ display: none;}
    .i-solu-swiper .swiper-slide p{ font-size: 3rem;}

    .index-case .pp{ margin-bottom: 2rem;}
    .index-case li{ width: 100% !important; margin-bottom: 1rem!important;}
    .index-case li .txt{ padding: 1rem 1.5rem!important;}

    .index-news li{ width: 100%; }
    .index-news li + li{ margin-top: 2rem;}
    .index-news li .txt{ padding: 1rem 1.5rem 0; }
    .index-news li h3{ font-size: 1.6rem; margin-top: 0; display: block; height: 1em; white-space: nowrap; text-overflow: ellipsis;}
    .index-news li:first-child a{ display: block;}
    .index-news li:first-child .pic{ width: 100%;}
    .index-news li:first-child .txt{ width: 100%;}
    .index-news li .p,.index-news li .time{ display: none;}
}
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot');
    src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-address3:before {
    content: "\e91b";
}
.icon-gongsi3:before {
    content: "\e91c";
}
.icon-share:before {
    content: "\e90f";
}
.icon-kefu:before {
    content: "\e909";
}
.icon-shouce:before {
    content: "\e919";
}
.icon-address1 .path1:before {
    content: "\e900";
    color: rgb(29, 32, 35);
}
.icon-address1 .path2:before {
    content: "\e903";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}
.icon-down:before {
    content: "\e904";
}
.icon-youtube:before {
    content: "\e905";
}
.icon-address2:before {
    content: "\e907";
}
.icon-product:before {
    content: "\e90b";
}
.icon-dongtai:before {
    content: "\e90d";
}
.icon-gallery:before {
    content: "\e90e";
}
.icon-download:before {
    content: "\e910";
}
.icon-zhuanti:before {
    content: "\e911";
}
.icon-global:before {
    content: "\e90a";
}
.icon-right:before {
    content: "\e920";
}
.icon-name:before {
    content: "\e901";
}
.icon-skype:before {
    content: "\e90c";
}
.icon-email:before {
    content: "\e916";
}
.icon-whatsapp:before {
    content: "\e902";
}
.icon-tel1:before {
    content: "\e906";
}
.icon-tel3:before {
    content: "\e912";
}
.icon-liuyan1:before {
    content: "\e91d";
}
.icon-zixun:before {
    content: "\e921";
}
.icon-time:before {
    content: "\e91a";
}
.icon-gongsi2:before {
    content: "\e917";
}
.icon-fanhui:before {
    content: "\e91e";
}
.icon-home:before {
    content: "\e915";
}
.icon-product2:before {
    content: "\e913";
}
.icon-fangan:before {
    content: "\e914";
}
.icon-list:before {
    content: "\e908";
}
.icon-gongsi1:before {
    content: "\e918";
}
.icon-tel2:before {
    content: "\e942";
}
.icon-play:before {
    content: "\ea15";
}
.icon-facebook:before {
    content: "\ea90";
}
.icon-twitter:before {
    content: "\ea96";
}
.icon-linkedin:before { content: "\eaca"; }