@charset "utf-8";
/* CSS Document */
/*all*/

/* =============== 全局断点设置 =============== */
@media screen and (max-width: 1800px) {
    /* 布局调整 */
    .warp {
        padding: 0 70px;
        max-width: 100%;
    }
    
    /* 横幅区域 */
    

    
}

@media screen and (max-width: 1700px) {
    .warp {
        padding: 0 60px;
    }

    /* 导航菜单 */
    .header nav a{
        margin: 0px 10px
    }

    .header .list .dot {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1500px) {
    /* 布局调整 */
    .warp{
        padding: 0 50px;
    }
    
    .header .logo{
        width: 450px;
    }
    
    
    
    
}
@media screen and (max-width: 1400px) {
    
    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2.6rem; /* 大字体 */
        --font-size-x: 3.2rem; /* 超大字体 */
        --font-size-xl: 4.4rem; /* 超大字体 */
        --font-size-xxl: 5.6rem; /* 特大字体 */
    }

    
    .header nav a {
        margin: 0px 6px;
    }

    .header .search input{
        width: 100px;
    }

    .banner .swiper-slide{
        height: 560px;
    }
    

    .fo1 .item{
        margin-right: 100px;
    }
    .fo3{
        padding: 20px 0;
    }
    
    
}
@media screen and (max-width: 1300px) {
    
    .header .logo{
        width: 350px;
    }
    
    .fo2 .warp .fo_nav{
        grid-template-columns: 1fr 1fr 2fr
    }


}
@media screen and (max-width: 1260px) {
    .warp,
    .warp2 {
        padding: 0 50px;
    }
}
@media screen and (max-width: 1200px) {
    /* 布局调整 */
    

    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2.2rem; /* 大字体 */
        --font-size-x: 3rem; /* 超大字体 */
        --font-size-xl: 4rem; /* 超大字体 */
        --font-size-xxl: 5rem; /* 特大字体 */
    }
    
    .banner .swiper-slide {
        height: 460px;
    }

    .header .logo{
        width: 300px;
    }
    
}
@media screen and (max-width: 1100px) {
    #hamburger { display: block !important; }
    .header{
        position: fixed;
        width: 100%;
        z-index: 8;
        border-bottom: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .header .mune,.header-top { display: none; }
    .header .logo {
        width:380px;
        padding: 10px 0;
    } 
    
    
    .banner,.banners, .banners2{
        padding-top: 71px;
    }
    
}

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

    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 1.8rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2.8rem; /* 超大字体 */
        --font-size-xl: 3rem; /* 超大字体 */
        --font-size-xxl: 4rem; /* 特大字体 */
    }
    .banner .swiper-slide{
        background-position: right 10% bottom;
    }
    .banner .txt{
        display: none;
    }
    
    .bottomlist { display: block; }
    .footer{
        margin-bottom: 51px;
    }
    .fo1,.fo2{
        display: none;
    }

    .banner .swiper-slide {
        height: 400px;
    }

    .banner .swiper-horizontal>.swiper-pagination-bullets, .banner .swiper-pagination-bullets.swiper-pagination-horizontal, .banner .swiper-pagination-custom, .banner .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 10px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%;
}
}

@media screen and (max-width: 840px) {
    
    
    /* 布局调整 */
    .warp,
    .warp2 {
        padding: 0 30px;
    }


    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 1.8rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2.4rem; /* 超大字体 */
        --font-size-xl: 3rem; /* 超大字体 */
        --font-size-xxl: 4rem; /* 特大字体 */
    }

    .banner .swiper-slide {
        height: 360px;
    }
    
    
    
}

@media screen and (max-width: 640px) {
    /* 排版系统 */
    
    
    /* 布局调整 */
    .warp,
    .warp2 {
        padding: 0 30px;
    }

    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 1.8rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2.2rem; /* 超大字体 */
        --font-size-xl: 2.8rem; /* 超大字体 */
        --font-size-xxl: 3.8rem; /* 特大字体 */
    }
    .banner .swiper-slide {
        height: 300px;
    }
}


@media screen and (max-width: 460px) {
    /* 布局调整 */
    .warp,
    .warp2 {
        padding: 0 20px;
    }

    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-lg: 1.8rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2rem; /* 超大字体 */
        --font-size-xl: 2.4rem; /* 超大字体 */
        --font-size-xxl: 3.4rem; /* 特大字体 */
    }

    .banner .swiper-slide {
        height: 240px;
    }

    .header .logo {
        width: 270px;
        padding: 18px 0;
    }
}

/* =============== 移动端优先断点 =============== */
/* 375px断点保留作为扩展点 */
@media screen and (max-width: 375px) {
    /* 可在此添加超小屏幕样式 */
}


/*首页*/

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

@media screen and (max-width: 1600px) {
    .ip4{
        display: block;
        background-size: auto;
        padding-top: 0px;
    }
    .ip4_title{
        position: relative;
        top: 0;
        padding: 100px 0;
    }
    .ip4_swiper{
        width: 100%;
        
    }
    .ip4_swiper .swiper-slide img{
        width:100%;
    }
    .ip4_title .more{
        margin-top: 100px;
    }
}

@media screen and (max-width: 1500px) {
    
    
    
}
@media screen and (max-width: 1400px) {
    .ip4_title{
        padding: 70px 0;
    }
}
@media screen and (max-width: 1300px) {
    
    

}
@media screen and (max-width: 1200px) {
    .ip1,.ip3,.ip5{
        padding: 65px 0;
    }
    .ip2{
        padding: 30px;
    }
    .ip2 .img{
        padding-left: 0;
    }
        
}
@media screen and (max-width: 1100px) {
    .ip1_right {
        padding: 30px;
        
    }
    .ip1_left .title{
        padding-right: 0;
    }
}

@media screen and (max-width: 1000px) {
    .ip1 .warp2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .app_page .img{
        display: none;
    }
    .app_page .txt{
        text-align: center;
        padding: 0 15px;
        display: block;
        width: 100%;
    }
    
    .app_page .swiper-pagination-bullet-active .img{
        display: none;
    }

    .application .swiper-slide .txt{
        display:grid;
    }


}
@media screen and (max-width: 850px) {
    .ip3_list {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 60px;
    }

    .ip3_list .item:nth-child(3n-1),.ip3_list .item:nth-child(3n-1):after{
        background-color: #f6f9ff;
    }
    .ip3_list .item:nth-child(3n-1) h3{
        color: #000;  
    }
    .ip3_list .item:nth-child(3n-1) h4{  
        color: #555;  
    }
    .ip3_list .item:nth-child(3n-1) p{
        color: #555;
    }
    .ip3_list .item:nth-child(3n-1) i{
        color: #d8065f;
    }

    .ip3_list .item:nth-child(2n),.ip3_list .item:nth-child(2n):after{
        background-color: var(--primary-color);
    }
    .ip3_list .item:nth-child(2n) h3{
        color: #fff;  
    }
    .ip3_list .item:nth-child(2n) h4{  
        color: #fff;  
    }
    .ip3_list .item:nth-child(2n) p{
        color: #b3ccff;
    }
    .ip3_list .item:nth-child(2n) i{
        color: #fff;
    }
    
    .app_page{
        display: initial;
    }
    .app_page .txt{
        display: none;
    }
    .app_page .swiper-pagination-bullet-active .img,.app_page .swiper-pagination-bullet-active .txt{
        display: none;
    }

    .app_page .swiper-pagination-bullet{
        width: 50px;
        height:5px;
        padding: 0;
        background-color: #fff;
        display: inline-block;
        border: none;
        
    }
    .application .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .application .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
        margin: 0 4px;
    }
    .application .swiper-horizontal>.swiper-pagination-bullets, .application .swiper-pagination-bullets.swiper-pagination-horizontal, .application .swiper-pagination-custom, .application .swiper-pagination-fraction{
        bottom: 15px;
    }
    .app_page .swiper-pagination-bullet-active{
        background-color: #d8065f;
    }
    
    
}

@media screen and (max-width: 640px) {
    .ip2{
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: center;
        padding: 50px 30px;
    }
    .ip2 .img,.ip2 .txt{
        width: 100%;
    }

    .ip3_list {
        grid-template-columns: 1fr;
        
    }

    .ip1_right .box2{
        display: block;
    }

    .fo3 .warp{
        display:block;
    }


}

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

/*about*/
@media screen and (max-width: 1700px) {
   
}
@media screen and (max-width: 1500px) {
   
}
@media screen and (max-width: 1400px) {
    .banners .pro{
        padding-left: 0;
    }

}
@media screen and (max-width: 1200px) {
    .banners .info{
        padding-top: 0;
        padding-bottom: 20px;
    }
    
    .history{
        margin: 0 40px;
    }

    .ab3 .list .img{
        top: -20%;
    }

}
@media screen and (max-width: 1100px) {
    .ab3 .list .img{
        top: -12%;
    }
    
    
}


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

    .banners::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 300px;
        height: 20px;
        background-color: #0a54ac;
    }

    .ab3 .list .dl{
        width: 100%;
    }
    .ab3 .list .img{
        position: initial;
        width: 100%;
        padding-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
}

@media screen and (max-width: 840px) {
    /* .banners .warp{
        display: block;
    } */
    /* .banners .pro{
        width: 50%;
    } */
    .banners .info h5{
        display: none;
    }

    .intit::after{
        font-size: 70px;
    }

    .ab1,.ab3{
        padding: 60px 0;
    }
    .ab1 .about-info{
        display: block;
    }
    .ab1 .ab1_left, .ab1 .ab1_right{
        width: 100%;
    }
    .ab1 .ab1_left{
        padding-bottom: 30px;
    }
    

    
}

@media screen and (max-width: 640px) {
    .intit::after{
        font-size: 48px;
    }
    .banners, .banners2{
        height: auto;
    }

    .banners .warp {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .banners .pro{
        width: 300px;
        padding-top: 30px;
    }
    .banners .info{
        width: 100%;
        padding-bottom: 20px;
    }
    .banners .info h3{
        line-height: 40px;
        padding: 10px 0;
    }

    .ab1,.ab3{
        padding: 50px 0;
    }

    .ab1 .about_img{
        grid-template-columns: 1fr 1fr;
        padding-top: 20px;
    }
    .ab1 .about_img img{
        width: 100%;
    }
    .ab3 .list .dl{
        grid-template-columns: 1fr;
        padding-bottom: 40px;
    }
    .ab3 .list{
        padding: 40px;
        margin-top: 30px;
    }
    
}

@media screen and (max-width: 460px) {
    
    .ab1 .ab1_right .info h6{
        font-size: 2em;
    }
    .ab5 {
        padding: 50px 0 60px 0;
    }
    .ab3 .list {
        padding: 30px;
    }
    .ab3 .list .img .item{
        width: 100%;
        margin-bottom: 15px;
    }
}

/*product*/
@media screen and (max-width: 1400px) {
    .pro1,.pros1,.news1{
        padding: 80px 0 60px 0;
    }
}
@media screen and (max-width: 1300px) {
    
    
}
@media screen and (max-width: 1200px) {
    
    .pro_box {
        grid-template-columns: repeat(2, 1fr);
    }
    .pro_main{
        padding-top: 50px;
    }
    
}
@media screen and (max-width: 1000px) {
    .pro_main{
        padding-top: 30px;
    }

    .pros1 .ps1{
        grid-template-columns: 1fr;

    }
    .ps1 .img_box{
        justify-content: center;
        padding-top: 30px;
        padding-left: 0;
        margin-left: 0;
    }

    .pro2 i {
        margin-top: 50px;
    }
    
    
}
@media screen and (max-width: 840px) {
    .pro_main{
        grid-template-columns: 1fr;
        padding-top:20px;
        grid-gap: 20px;
    }
    
}
@media screen and (max-width: 640px) {
    .pro1,.pros1,.news1 {
        padding:50px 0 40px 0;
    }
    .pro_box {
        grid-template-columns: 1fr;
    }
    .product2 .pro{
        width: 250px;
    }
    .pagelink{
        padding-top:50px ;
    }
    .pagelink a{
        width: 160px;
        font-size: 14px;
    }
    .pagelink a::after{
        left: 20px;
    }
    .pagelink a:last-child::after {
        right: 20px;
    }
    .ps1 .img_box .img{
        margin: 0 20px;
    }

    .pros2 .pro_other{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .pro_list{
        display: none;
    }

    .f2_list {
        margin-bottom: 5px;
    }
    .pro_list a.f1{
        height: 50px;
        line-height:50px;
    }
    .pro_list a.f2{
        height: 40px;
        line-height:40px;
    }
    
}
@media screen and (max-width: 460px) {
    .pros2 .pro_other{
        grid-template-columns: 1fr;
    }
}


/*news*/

@media screen and (max-width:1400px){
    
}
@media screen and (max-width: 1200px) {
    
}
@media screen and (max-width: 1000px) {
    .newbox .dot a{
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}
@media screen and (max-width: 840px) {
    .newbox .dot a{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    
    
}
@media screen and (max-width: 640px) {
    .newbox .dot {
        padding: 25px 0;
    }
}


/*newsshow*/

@media screen and (max-width: 1024px) {
    .newsshow{
        padding-bottom: 20px;
    }
    .newsshow .tit2,.newsshow .btn{ padding:40px 20px;}  
    .newsshow .txt{ padding:20px;}
    .newsshow .boxs{
        padding: 20px 0 0 0
    }
    .newsshow .btn a{
        font-size: 1.4em;
        padding: 15px 50px 15px 120px;
    }
    .newsshow .btn a:last-child{
        padding: 15px 120px 15px 50px;
    }
}
@media screen and (max-width: 800px) {
    

}
@media screen and (max-width: 640px) {
    .newsshow .tit2 h3{ font-size:1.6em;}
    .newsshow .tit2 .dot h4{ font-size:1em; padding:10px 2px;}
    .newsshow .tit2{ padding:30px 20px 0 20px;}
    .newsshow .btn{ padding: 40px 20px;}    
    .newsshow .btn a {
        width: 100%;
        margin-bottom: 10px;
    }
    .newsshow .btn a:first-child{
        text-align: right;
    }
    
}




/*contact*/
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1300px) {
    
}
@media screen and (max-width: 1200px) {
    .con1{
        padding: 60px 0;
    }
    .con2{
        padding: 0 0 60px 0;
    }
}
@media screen and (max-width: 1000px) {
    .con1_lx_box{
        display: block;
    }
    .con1_lx_box:nth-child(3) .dot:first-child{
        padding-bottom: 35px;
        border-bottom: 1px solid #dcdcdc;
        margin-bottom: 35px;
    }
    .line{
        display: none;
    }
}
@media screen and (max-width: 840px) {
    .con1{
        padding: 60px 0 40px 0;
    }
    
}
@media screen and (max-width: 640px) {
    .con1_box{
        grid-template-columns: 1fr;
        margin-top: 40px;
    }
    .con1_box .item:last-child{
        background: #f5f9fd;
    }
    .add2{
        display: block;
    }

    .con1_box .item:first-child{
        padding-bottom: 60px;
        margin-bottom: 20px;
    }
    .con_add{
        padding-bottom: 60px;
    }
    .feed_form{
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }
}