@media (max-width: 575.98px) {
    body {
        font-size: 1.2rem;
    }
    main { padding: 10px 0 !important; }

    #logo img { max-width: 80%;}

    .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.5rem !important; background-color: rgba(255,255,255,0.5); padding: 10px 5px; color: var(--base_color) !important; }

    .container { padding-left: 10px; padding-right: 10px; }
    .row { margin-left: -10px; margin-right: -10px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{ padding-left: 10px; padding-right: 10px; }

    .in_title small { font-size: 12px; }

    .de-page-mian .page-inner .prev,.de-page-mian .page-inner .next,.de-page-mian .page-inner span,.de-page-mian .page-inner input,.de-page-mian .page-inner .page-btn { display: none !important; }
    .de-page-mian .page-inner { border-right: 1px solid #dddddd; }

    .swiper-button-next, .swiper-button-prev { width: 13px !important; height: 22px !important; margin-top: -11px !important; background-size: 100% !important; }

}

@media (min-width: 576px) {

    body {
        font-size: 1.2rem;
    }
    main { padding: 10px 0 !important; }

    .fs-sm-12 { font-size: 1.2rem;}
    .fs-sm-14 { font-size: 1.4rem;}
    .fs-sm-16 { font-size: 1.6rem;}
    .fs-sm-18 { font-size: 1.8rem;}
    .fs-sm-24 { font-size: 2.4rem;}
    .fs-sm-30 { font-size: 3.0rem;}
    .fs-sm-40 { font-size: 4.0rem;}

    #logo img { max-width: 80%;}


    .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.5rem !important; background-color: rgba(255,255,255,0.5); padding: 10px 5px; color: var(--base_color) !important; }

    .container { padding-left: 10px; padding-right: 10px; }
    .row { margin-left: -10px; margin-right: -10px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{ padding-left: 10px; padding-right: 10px; }

    .in_title small { font-size: 12px; }

    .de-page-mian .page-inner span,.de-page-mian .page-inner input,.de-page-mian .page-inner .page-btn { display: none !important; }

     .swiper-button-next, .swiper-button-prev { width: 13px !important; height: 22px !important; margin-top: -11px !important; background-size: 100% !important; }
    
}

@media (min-width: 768px) {

    .container { padding-left: 15px; padding-right: 15px; }
    .row { margin-left: -15px; margin-right: -15px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{ padding-left: 15px; padding-right: 15px; }

    .fs-md-12 { font-size: 1.2rem;}
    .fs-md-14 { font-size: 1.4rem;}
    .fs-md-15 { font-size: 1.5rem;}
    .fs-md-16 { font-size: 1.6rem;}
    .fs-md-18 { font-size: 1.8rem;}
    .fs-md-24 { font-size: 2.4rem;}
    .fs-md-30 { font-size: 3.0rem;}
    .fs-md-40 { font-size: 4.0rem;}

    #logo img {max-width: 100%; max-height: 40px; }

    .in_title .title:before { width: 160px; }
    .in_title .title:after { width: 160px;}

    .swiper-button-next:after, .swiper-button-prev:after { font-size: 3.0rem !important; }

    .pro_gd { height: 440px; }

    .de-page-mian .page-inner .prev,.de-page-mian .page-inner .next,.de-page-mian .page-inner span,.de-page-mian .page-inner input,.de-page-mian .page-inner .page-btn { display: block !important; }

}

@media (min-width: 992px) {
    .fs-lg-12 { font-size: 1.2rem;}
    .fs-lg-14 { font-size: 1.4rem;}
    .fs-lg-16 { font-size: 1.6rem;}
    .fs-lg-17 { font-size: 1.7rem;}
    .fs-lg-18 { font-size: 1.8rem;}
    .fs-lg-24 { font-size: 2.4rem;}
    .fs-lg-30 { font-size: 3.0rem;}
    .fs-lg-40 { font-size: 4.0rem;}

    main { padding: 30px 0 !important; }

    #logo img { max-height: 50px; }


    .in_title .title:before { width: 260px; margin-top: 15px;}
    .in_title .title:after { width: 260px; margin-top: 15px;}
    .in_title .title small { top: -5px; }

    .sliderBox { height: 262px; overflow: hidden; }
    .swiper_box { padding: 0 50px; }
    .in_content { height: 90px; overflow: hidden; }

    .mImg { max-width: 600px !important; }

    .ysList li { margin-left: 30px; }
    .ysList li:before {
                content: "●";
                font-size: 20px;
                color: var(--base_color);
                position: absolute;
                left: -30px;
                top: 15px;
            }

    .swiper-button-next:after, .swiper-button-prev:after { font-size: 3.0rem !important; }
    .pro_gd { height: 454px; }
}



@media (min-width: 1200px) {

    .py-5 { padding: 52px 0 !important; }
    .fs-xl-14 { font-size: 1.4rem;}
    .fs-xl-15 { font-size: 1.5rem;}
    .fs-xl-16 { font-size: 1.6rem;}
    .fs-xl-24 { font-size: 2.4rem;}
    .fs-xl-30 { font-size: 3.0rem;}
    .fs-xl-35 { font-size: 3.5rem;}
    .fs-xl-37 { font-size: 3.7rem;}
    .fs-xl-38 { font-size: 3.8rem;}
    .fs-xl-40 { font-size: 4.0rem;}
    .fs-xl-45 { font-size: 4.5rem;}


    main { padding: 44px 0 !important; }

    .name_box_w .col-auto { height: 80px; }

    #logo img { max-height: 100% !important; }

    #top_tel { right: 15px !important; }


    .in_title .title:before { width: 434px; margin-top: 15px;}
    .in_title .title:after { width: 434px; margin-top: 15px;}
    .in_title .title small { top: -5px; }

    .lf_product_box ,.lf_contact_box{ padding-top: 10px; padding-bottom: 10px; }
    
    .sliderBox { height: 445px; overflow: hidden; }

    .hjsb_show { width: 546px; float: right; }

    .swiper_box { padding: 0 50px; }

    .content_box { transform: translate(-93px,0px); width: 778px; }
    .in_content { height: 120px; overflow: hidden; }

    .picList .content { height: 66px; line-height: 22px; }


    .ysList li { margin-left: 30px; }
    .ysList li:before {
            content: "●";
            font-size: 20px;
            color: var(--base_color);
            position: absolute;
            left: -30px;
            top: 15px;
    }


    .swiper-button-next:after, .swiper-button-prev:after { font-size: 4.4rem !important; }

    #sider {
        flex: 0 0 20%;
        max-width: 20%;
    }

    #right { flex: 0 0 80%;
            max-width: 80%;
    }



    .pro_gd { height: 690px; overflow: hidden; }



}

@media (min-width: 1440px) {

    .d-xxl-block { display: block !important; }

    .container { max-width: 1430px;}

    #banner_box .flash {
        position: relative;
        width: 1920px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    #page_banner_box img {
        position: relative;
        width: 1920px;
        max-width: 1920px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }


}