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

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

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

    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.8rem; /* 中等字体 */
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2.2rem; /* 大字体 */
        --font-size-lx: 2.8rem; /* 大字体 */
        --font-size-x: 3.2rem; /* 超大字体 */
        --font-size-xl: 4.4rem; /* 超大字体 */
        --font-size-xxl: 5.6rem; /* 特大字体 */
        --font-size-xxxl: 6.6rem; /* 特大字体 */
        --font-size-xxxxl: 8rem;

    }


    .warp,.warp2 {
        padding: 0 60px;
    }

    /* 导航菜单 */
    .header nav { 
        padding: 0 100px;
    }


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

@media screen and (max-width: 1500px) {
    /* 布局调整 */
    .warp,.warp2{
        padding: 0 50px;
    } 
    
}
@media screen and (max-width: 1400px) {
    
    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.6rem; /* 中等字体 */
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2.2rem; /* 大字体 */
        --font-size-lx: 2.4rem; /* 大字体 */
        --font-size-x: 3rem; /* 超大字体 */
        --font-size-xl: 4rem; /* 超大字体 */
        --font-size-xxl: 5rem; /* 特大字体 */
        --font-size-xxxl: 6.4rem; /* 特大字体 */
        --font-size-xxxxl: 7.2rem;

    }

    .warp{
        padding: 0 40px;
    }

    .header nav { 
        padding: 0 70px;
    }
    
    .banner .swiper-slide {
        height: 720px;
    }

    .fo_info {
        padding-right: 180px;
    }

    .fo1 .warp .fo_nav{
        padding: 0;
    }


    

   
    
    
}

@media screen and (max-width: 1200px) {
    .warp,
    .warp2 {
        padding: 0 30px;
    }
    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.6rem; /* 小字体 */
        --font-size-md: 1.6rem; /* 中等字体 */
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2.2rem; /* 大字体 */
        --font-size-x: 2.8rem; /* 超大字体 */
        --font-size-xl: 3.6rem; /* 超大字体 */
        --font-size-xxl: 4.6rem; /* 特大字体 */
        --font-size-xxxl: 6rem; /* 特大字体 */
        --font-size-xxxxl:6.8rem;

    }
    /* 布局调整 */
    .header {
        padding: 20px 0;
    }
    .header nav {
        padding: 0 50px;
    }
    

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

    .banner .txt{
        width: 50%;
    }

    .search {  
        margin-left: 30px;
    }
    
}
@media screen and (max-width: 1100px) {
    
    :root {
        --font-size-xs: 1.4rem; /* 超小字体 */
        --font-size-sm: 1.4rem; /* 小字体 */
        --font-size-md: 1.6rem; /* 中等字体 */
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2.2rem; /* 大字体 */
        --font-size-x: 2.8rem; /* 超大字体 */
        --font-size-xl: 3.6rem; /* 超大字体 */
        --font-size-xxl: 4.6rem; /* 特大字体 */
        --font-size-xxxl: 5.8rem; /* 特大字体 */
        --font-size-xxxxl: 6.4rem;

    }
    
}

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

    :root {
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2.2rem; /* 大字体 */
        --font-size-lx: 2.4rem; /* 大字体 */
        --font-size-x: 2.6rem; /* 超大字体 */
        --font-size-xl: 3.2rem; /* 超大字体 */
        --font-size-xxl: 4.2rem; /* 特大字体 */
        --font-size-xxxl: 5.2rem; /* 特大字体 */
        --font-size-xxxxl: 6rem;

    }


    #hamburger { display: block !important; }
    .header,.inside .header, .faside .header{
        position: fixed;
        width: 100%;
        z-index: 8;
        border-bottom: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        background-color: #fff;
    }
    
    .header nav,.header .mune,.header-top { display: none; }
    
    
    .bottomlist { display: block; }
    
    .banner{
       padding-top: 80px;
    }
    .banners{
        margin-top: 80px;
    }
    .banner .swiper-slide {
        height: 510px;
        background-position: left bottom;
    }
    .banner .txt p{
        width: 80%;
    }

    .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, 30px);
        text-align: center;
        
    }

    

    .footer{
        margin-bottom: 51px;
        padding: 65px 0 20px 0;
        
    }
    .fo1 {
        padding-bottom: 30px;
    }
    .fo1 .warp {
        display: grid;
        grid-template-columns: 1fr;
    }
    .fo1 .warp .fo_nav{
        display: none;
    }
    .fo_info {
        padding-right: 0px;
    }

    .fo2 .fo_logo {
       
        padding: 20px 110px 20px 80px;
    }


}

@media screen and (max-width: 840px) {
    
    :root {
        
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2.2rem; /* 大字体 */
        --font-size-x: 2.4rem; /* 超大字体 */
        --font-size-xl: 2.6rem; /* 超大字体 */
        --font-size-xxl: 3.8rem; /* 特大字体 */
        --font-size-xxxl: 4.8rem; /* 特大字体 */
        --font-size-xxxxl: 5.4rem;

    }

    
    /* 布局调整 */
    .warp,
    .warp2 {
        padding: 0 30px;
    }


    

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

@media screen and (max-width: 640px) {
    /* 排版系统 */
    :root {
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2.6rem; /* 超大字体 */
        --font-size-xl: 2.8rem; /* 超大字体 */
        --font-size-xxl: 3.6rem; /* 特大字体 */
        --font-size-xxxl: 4rem; /* 特大字体 */
        --font-size-xxxxl: 5.2rem;

    }
    
    /* 布局调整 */
    .warp,
    .warp2 {
        padding: 0 30px;
    }

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

    .banner .txt h4 {
        margin-bottom: 30px;
    }
    .banner .txt h2{
        margin-bottom: 20px;
    }
    .banner .txt p{
        width: 80%;
    }
    .fo2 {
        padding: 30px 0 20px 0;
    }
    
    .fo2 .fo_logo {
        padding: 20px 70px 20px 70px;
    }
    
}


@media screen and (max-width: 460px) {
    /* 布局调整 */
    :root {
        --font-size-ld: 2rem; /* 中等字体 */
        --font-size-lg: 2rem; /* 大字体 */
        --font-size-lx: 2rem; /* 大字体 */
        --font-size-x: 2.2rem; /* 超大字体 */
        --font-size-xl: 2.4rem; /* 超大字体 */
        --font-size-xxl:3rem; /* 特大字体 */
        --font-size-xxxl: 3.8rem; /* 特大字体 */
        --font-size-xxxxl: 5rem;

    }

    .warp,
    .warp2 {
        padding: 0 20px;
    }

    
    .banner .swiper-slide {
        height: 260px;
    }
    .footer {
        margin-bottom: 50px;
        padding: 50px 0 0px 0;
    }
    .fo2{
        display: none;
    }
    
    
}

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


/*首页*/

@media screen and (max-width: 1800px) {
    .ip2_list,.ip4_list {
        padding-left: 70px;
        padding-top: 60px;
    }
}

@media screen and (max-width: 1600px) {
    .ip1 {
        padding: 80px 0 0 0;
    }
    .ip1_2 {
        text-align: left;
    }
    .ip2 {
        padding: 90px 0 60px 0;
    }
    .ip2_list,.ip4_list {
        padding-left: 60px;
    }
    .ip3{
        padding: 100px 0 160px 0;
    }
    .ip3 .txt {
        padding:60px  0 80px 0;
    }
    .ip4 {
        padding: 100px 0;
    }
    
}


@media screen and (max-width: 1400px) {
    .ip1 {
        padding: 70px 0 0 0;
    }
    .ip2 {
        padding: 70px 0 50px 0;
    }
    .ip3 {
        padding: 80px 0 120px 0;
    }
    .ip4 {
        padding: 70px 0;
    }
    .ip2_list, .ip4_list {
        padding-left:40px;
        padding-top:40px;
    }
    .tit p {
        margin-bottom: 20px;
    }
    .n_list .info {
        padding-left:50px;
    }
    .ip1 .info {
        padding: 0px 0 0px 260px;
        background-size: contain;
    }
    .ip3 a::after, .btn::after {  
        left: 70px;
    }
    
}
@media screen and (max-width: 1300px) {
    
    

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

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

    .hide{
        display: block;
    }
    .show{
        display: none;
    }

    .ip1_1 i{
        display: none;
    }
    .ip1 .info {
        padding: 0px 0 0px 240px; 
    }
    .ip2 {
        padding: 60px 0 50px 0;
    }
    .ip2_list, .ip4_list {
        padding-left: 30px;
        padding-top: 30px;
    }
    .tit h3 {
        line-height: 40px;
    }
    .ip3 {
        padding: 60px 0 80px 0;
    }
    .ip3 .txt {
        padding: 45px 0 65px 0;
    }
    .ip4 {
        padding: 60px 0;
    }

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

    .ip1_1,.ip1_2{
        padding-right: 80px;
    }
    .ip1 .info {
        padding: 0px 0 0px 200px;
    }
    .ip3 .info {
        width: 60%;
    }
    
}

@media screen and (max-width: 640px) {
    .ip1 .info {
        padding: 0px 0 100px 0px;
        background-position: left bottom;
    }
    .ip2_tit{
        display: block;
    }
    .ip2_tp{
        width: 150px;
        margin-top: 10px;
    }
    .ip2_list .img img{
        width: 100%;
    }
    .ip3 .info {
        width: 100%;
    }
    .ip1_1, .ip1_2 {
        padding-right: 0px;
    }
    .n_list .info {
        padding-left: 40px;
    }       

}

@media screen and (max-width: 420px) {
    .ip1 {
        padding: 50px 0 0 0;
    }
    .ip2 {
        padding: 50px 0 50px 0;
    }
    .ip3 {
        padding: 50px 0;
    }
    .ip4 {
        padding: 50px 0;
    }
    .ip3 .txt {
        padding: 30px 0 30px 0;
    }
    .ip2_list, .ip4_list {
        padding-left: 20px;
        padding-top: 20px;
    }
    .ip2_tp a:first-child {
        margin-right: 10px;
    }
    
}

/*about*/
@media screen and (max-width: 1600px) {
    
    
}



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

    .banners{
        height: 600px;
    }
    .ab1 {
        position: relative;
        padding: 60px 0 ;
    }
    .ab3 {
        padding: 80px 0;
    }
    .ab4 .ab4_right .info {
        padding-top: 100px;
    }
    .ab4 .ab4_fy {
        bottom: 145px; 
    }

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

    .banners{
        height: 540px;
    }
    
    .ab2_list .img {
        padding: 80px 60px;
    }
    .ab2_list .info {
        padding: 45px 45px 45px 0;
    }
    .ab3_list {
        padding-top: 40px;
    }

    .ab4_left{
        height: 850px;
    }
    .ab4 .ab4_right {
        padding: 0px 0 0 40px;
    }
    .stip {
        bottom: 45px;
    }
    .ab4 .ab4_fy {
        bottom: 200px;
    }
     .ab3_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

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


@media screen and (max-width: 1000px) {
    
    .banners{
        height: 460px;
    }
    .banners2{
        margin-top: 80px;
    }
    .ab3_list {
        gap: 20px;
    }
    .ab3_list .item {
        height: 220px; 
        padding: 0 30px;
    }
    .ab2_list .img {
        padding: 50px 40px;
    }
    .ab2_list .img .txt{
        padding-left: 0px;
    }
    .ab2_list .info2 {
        padding: 90px 0 0 50px;
    }
    .ab4_left {
        height: 750px;
    } 
    .ab4 .ab4_fy {
        bottom: 200px;
    }
    .stip {
        bottom: 30px;
    }
}

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

    .banners{
        height: 400px;
    }
    .banners2{
        height: 360px;
    }
    .ab1 {
        padding: 50px 0;
    }
    .ab3 {
        padding: 60px 0;
    }
   
    .ab3_list .item b { 
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .ab4_box {
        padding: 35px 130px;
    }
    .ab4 .ab4_fy {
        bottom: 200px;
        padding-left: 15%;
    }
    .ab4_left {
        background-position: center center;
    } 
    .ab4 .warp2 {
        display: grid;
        grid-template-columns: 100%;
        gap: 60px;
        position: relative;
        padding-bottom: 80px;
    }
    .ab4 .ab4_right .info {
        padding-top: 50px;
    }
    .ab4 .ab4_fy {
        position: initial;
        padding-left: 0;
        bottom: 200px;
        /* padding-left: 15%; */
    }
}

@media screen and (max-width: 640px) {
    
    .banners{
        height: 360px;
    }
    .banners2{
        height: 300px;
    }
    .ab2_list {
        grid-template-columns: 1fr;
    }

    .ab2_list .info2 {
        padding: 50px;
    }
    .stip {
        bottom: 25px;
    }
    .ab2_list .img .txt {
        padding: 30px 0px 0px 30px;
    }

    
}

@media screen and (max-width: 460px) {
    .banners{
        height: 220px;
    }
    .banners2 {
        height: 200px;
    }
    .stip {
        bottom: 15px;
    }
    .ab3_list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ab4_left {
        height: 400px;
    }
    .ab4 .ab4_right {
        padding: 0px 0 0 0px;
    }
    .timeline .swiper-slide::after {
        left: 44%;
    }
    .ab4_box .swiper-button-prev {
        left: 20px;
    }
    .ab4_box .swiper-button-next {
        right: 20px;
    }
    .ab4_box {
        padding: 35px 85px;
    }
}



/*product*/
@media screen and (max-width:1500px){
   
}
@media screen and (max-width:1400px){
    .pr2 {
        padding-bottom: 70px;
    }
    
}
@media screen and (max-width: 1200px) {
    .pr2 {
        padding-bottom: 60px;
    }
    .pro_box {
        grid-template-columns: repeat(2,1fr);
    }
    .pr2_left {
        width: 350px;
    }
    .pr2_right {
        width: calc(100% - 395px);
    }
    .pr2_left h4 {
        padding: 25px 0 25px 30px; 
    }
    .pr2_left a {
        padding: 25px 0 25px 45px;
    }
    .pr2_left a::before, .pr2_left a.cur::before {
        left: 30px; 
    }
}
@media screen and (max-width: 1000px) {
    .pr2 {
        padding-bottom: 50px;
    }
    .pr2_left {
       display: none;
    }
    .pr2_right {
        width: 100%;
    }
    .pr2_list {
        padding-top: 60px;
    }

    .Pagination {
        padding-top: 50px;
    }
    
}
@media screen and (max-width: 840px) {
    .pr2_list {
        padding-top:50px;
    }
    
}
@media screen and (max-width: 640px) {
    .pr2_list {
        padding-top: 50px;
    }
    .pro_box {
        grid-template-columns: 1fr;
    }
    .ab1_3 img{
        height: 40px;
    }
    .stip p{
        display: none;
    }
    
}
@media screen and (max-width:460px){
    
}
/*proshow*/
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width:1400px){
    .pro1 {
        padding: 80px 0;
        grid-gap: 80px;
    }
    .pro3 .warp2 {
        gap: 40px;
        padding-bottom: 80px;
    }

    .pro3 {
        padding: 80px 0 70px 0;
    }

    .pro2 {
        padding-bottom: 65px;
    }
    .pro1 .info .txt {
        padding: 45px 0 45px 15px;
    }
}
@media screen and (max-width: 1200px) {
    
    .pro3 {
        padding: 65px 0 60px 0;
    }
    .pro2 {
        
        grid-template-columns: 60% 40%;
        padding-bottom: 65px;
    }
}
@media screen and (max-width: 1000px) {
    .pro3 .warp2 {
        gap: 40px;
        padding-bottom: 80px;
        grid-template-columns: repeat(2,1fr);
    }
    .pro1 {
        padding: 60px 0;
        grid-gap: 40px;
    }
    .pro1 .info .txt p {
        padding-bottom: 25px;
    }
}
@media screen and (max-width: 840px) {
    .pro2 {
        padding-bottom: 45px;
        grid-template-columns: 50% 50%;
    }
    .pro3 {
        padding: 50px 0 ;
    }
    .pro2 .txt {
        padding-left: 50px;
       
    }
}
@media screen and (max-width: 640px) {
    .pro1 {
        grid-template-columns: 1fr;
    }
    .pro2 .txt {
       
        height: 65px;
        line-height: 65px;
       
    }
    .pro3 .warp2 {
        gap: 20px;
        padding-bottom: 50px; 
    }
    .pro1 .img {
        box-shadow: 1px -2px 16px rgba(153, 153, 153, 0.5);
    }

    .pro2 {
        grid-template-columns: 1fr;
        grid-gap: 35px;
    }
    .pro2 .img{
        padding-right: 60px;
    }
    .pro2 .txt{
        margin-left: 60px;
    }
    .pro3 .warp2 {
        grid-template-columns: 1fr;
    }
    .pro1 .info .txt {
        padding: 35px 0 35px 15px;
    }
}

@media screen and (max-width: 460px) {
    
}
/*news*/

@media screen and (max-width:1400px){
    .new_list .item a { 
        padding: 60px 0 0 90px;
    }
}
@media screen and (max-width: 1200px) {
    .new_list .item a { 
        padding:60px 0 0 75px;
    }
    .new2_list .item a {
        grid-template-columns: auto 350px;
    }
    .new2_list .item .box {
        grid-gap: 60px; 
    }
    .new2_list {
        grid-gap: 60px;
    }
}
@media screen and (max-width: 1100px) {
    .new2_title{
        display: block;
        padding-bottom: 15px;
    }
    .new2_title h4{
        padding-bottom: 10px;
    }
    .new2_list .item .box {
        padding-bottom: 40px;
    }
}
@media screen and (max-width: 1000px) {
    
    .new_list .item a{
        height: 100%;
        padding:60px 0 50px 75px;
    }
    .new_list .item a .kb{
        display: none;
    }
    .new_list .item a:hover, .new_list .item a.cur {
        border-radius: 0 0 0px 0;
    }

    .new2_list .item a {
        grid-template-columns: 50% 50%;
    }
    .new2_list .item .box {
        grid-gap: 20px;
        padding-bottom: 60px;
    }

    .new2_list .item .box {
        grid-template-columns: 1fr;
        padding-bottom: 20px;
    }
    
}
@media screen and (max-width: 840px) {

    .new_list .item .info{
        padding-left: 0;
    }
    .new_list .item a {
        padding: 50px 0 50px 50px;
    }

    .new2_list .item a {
        grid-gap: 30px;
    }

    .new2_list {
        grid-gap: 50px;
    }

    
}
@media screen and (max-width: 640px) {
    .news1 {
        padding: 10px 0  50px 0;
    }
    .new2_list .item a {
        grid-template-columns: 1fr;
    }
    .new2_list .item a .img img{
        width: 100%;
    }
    .new_list {
        grid-template-columns: 1fr;
    }
    .new2_list {
        padding-top: 40px;
    }
}


/*newsshow*/

@media screen and (max-width: 1024px) {
    .newsshow{
        padding: 60px 0;
    }
    .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;
        
    }
    
}
@media screen and (max-width: 800px) {
    .newsshow{
        padding:50px 0;
    }

}
@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;
    }
    
    .tit p {
        margin-bottom: 10px;
    }
    .newsshow .txt {
        padding: 20px 10px;
    }
}




/*contact*/
@media screen and (max-width: 1400px) {
    .con4 {
        padding: 90px 0 65px 0;
    }
}
@media screen and (max-width: 1300px) {
    
}
@media screen and (max-width: 1200px) {
   .con2 {
        padding: 20px 0 ;
    }
    .con_list {
        width: calc(50% - 30px);
        grid-gap: 50px;
        padding: 50px 0;
    }
}
@media screen and (max-width: 1000px) {
    .con_list {
        padding: 25px 0;
    }
    .con_list .info {
        gap: 15px;
    }
}
@media screen and (max-width: 840px) {
    .con4 .intit {
        margin-bottom: 30px;
    }
   .con_list{
        width: 100%;
   }
   .con3 .img {
        position: initial;  
        width: 100%;
        padding: 0 30px;
        margin-top: 15px;
    }
    .feed_form {
        padding: 35px;
        margin-top: 50px;
    }
    .con4 {
        padding: 70px 0 50px 0;
    }
}
@media screen and (max-width: 640px) {
    .feed_form {
        padding: 20px;
        margin-top: 40px;
    }
    .feed_form .dot textarea {
        height: 160px;
    }

    .feed_form {
        padding: 20px;
        margin-top: 30px;
    }
}