@media screen and (min-width:768px) {

    /* banner */
    .banner {
        max-width: 1920px;
        margin: 0 auto;
    }

    .banner .swiper-container {
        height: auto !important;
    }

    .banner .swiper-slide {
        height: auto !important;
    }

    .banner .swiper-slide img {
        display: block;
        width: 100%;
    }

    .banner .swiper-pagination span {
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 5px;
        margin: 0 6px;
        opacity: 1 !important;
    }

    .banner .swiper-pagination span.swiper-pagination-bullet-active {
        background: #005acc;
    }

    .mbanner {
        display: none;
    }

    /* 图标 */
    .box1 {
        /* background: #f5f5f7; */
        padding: 30px 0;
    }

    .box1 li {
        float: left;
        width: 240px;
    }

    .box1 .icon {
        display: block;
        width: 147px;
        height: 147px;
        margin: 0 auto;
        border-radius: 50%;
    }

    .box1 p {
        padding: 10px 0 0;
        font-size: 16px;
        color: #464646;
        text-align: center;
    }

    /* 产品 */
    .box2 {
        background: #f5f5f7;
        padding: 30px 0;
    }

    .box2 .tit1 {
        margin-bottom: 30px;
    }

    .box2 .fl {
        float: left;
        padding: 15px 10px;
        background: #005acc;
        width: 280px;
    }

    .box2 .fl .tit2 {
        line-height: 43px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        margin-bottom: 15px;
    }

    .box2 .fl .pro_type {
        padding: 15px 10px;
        background: #fff;
    }

    .box2 .fl .pro_type a {
        display: block;
        padding: 0 10px;
        height: 43px;
        line-height: 43px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        background: #005acc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 15px;
    }

    .box2 .fl .pro_type a:hover {
        background: #d10707;
    }

    .box2 .fl .pro_type a:last-child {
        margin-bottom: 0;
    }

    .box2 .fr {
        float: right;
        width: 880px;
    }

    .box2 .fr .item {
        float: left;
        width: 280px;
        margin-bottom: 20px;
    }

    .box2 .fr .item:nth-child(3n+2) {
        margin: 0 20px 20px;
    }

    .box2 .fr .item .pic {
        height: 280px;
        overflow: hidden;
    }

    .box2 .fr .item .pic img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s;
    }

    .box2 .fr .item .pic img:hover {
        transform: scale(1.1);
    }

    .box2 .fr .item p {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 优势 */
    .box3 {
        /* margin-top: 30px; */
        padding-top:30px;
        background: url(../images/img01.jpg) no-repeat center 0;
    }

    .box3 .tit1 {
        margin-bottom: 20px;
    }

    .box3 .main {
        /* background: url(../images/img01.jpg) no-repeat center 0; */
        height: 760px;
    }

    .box3 .main .w12 {
        position: relative;
    }

    .box3 .main .dot1 {
        background: url(../images/icon13.png) no-repeat 0 0;
        width: 69px;
        height: 97px;
        opacity: 0;
        float: left;
        margin-right: 20px;
    }

    .box3 .main .dot1 em {
        font-size: 33px;
        color: #ffffff;
        display: block;
        text-align: center;
        font-weight: bold;
        font-style: normal;
        line-height: 70px;
    }

    .box3 .main .bfont {
        float: left;
        width: 360px;
        opacity: 0;
    }

    .box3 .main.bfont .btit2 {
        height: 40px;
        font-size: 24px;
        color: #005eb6;
        line-height: 48px;
        font-weight: bold;
    }

    .box3 .main .bfont p {
        font-size: 14px;
        color: #595959;
        line-height: 28px;
        margin: 8px 0 0;
    }

    .box3 .main li:nth-child(1) {
        position: absolute;
        top: 10px;
        left: 0;
    }

    .box3 .main li:nth-child(2) {
        position: absolute;
        top: 190px;
        left: 0;
    }

    .box3 .main li:nth-child(3) {
        position: absolute;
        top: 390px;
        right: 0;
    }

    .box3 .main li:nth-child(4) {
        position: absolute;
        top: 580px;
        right: 0;
    }

    .box3 .main .am2 {
        animation: atop 2s;
        -moz-animation: atop 2s;
        -webkit-animation: atop 2s;
        -o-animation: atop 2s;
        opacity: 1;
    }


    .box3 .main .am10 {
        animation: wrimg 2s;
        -moz-animation: wrimg 2s;
        -webkit-animation: wrimg 2s;
        -o-animation: wrimg 2s;
        opacity: 1;
    }

    @keyframes atop {
        from {
            transform: matrix3d(1, 0, 0, 0, 0, 0, 1, -0.00166, 0, -1, 0, 0, 0, 0, 0, 1);
            opacity: 0;
        }

        to {
            transform: translate3d(0px, 0px, 0px);
            transform-origin: center center 0;
            opacity: 1
        }
    }

    @-moz-keyframes atop {
        from {
            transform: matrix3d(1, 0, 0, 0, 0, 0, 1, -0.00166, 0, -1, 0, 0, 0, 0, 0, 1);
            opacity: 0;
        }

        to {
            transform: translate3d(0px, 0px, 0px);
            transform-origin: center center 0;
            opacity: 1
        }
    }

    @-webkit-keyframes atop {
        from {
            transform: matrix3d(1, 0, 0, 0, 0, 0, 1, -0.00166, 0, -1, 0, 0, 0, 0, 0, 1);
            opacity: 0;
        }

        to {
            transform: translate3d(0px, 0px, 0px);
            transform-origin: center center 0;
            opacity: 1
        }
    }

    @-o-keyframes atop {
        from {
            transform: matrix3d(1, 0, 0, 0, 0, 0, 1, -0.00166, 0, -1, 0, 0, 0, 0, 0, 1);
            opacity: 0;
        }

        to {
            transform: translate3d(0px, 0px, 0px);
            transform-origin: center center 0;
            opacity: 1
        }
    }

    @keyframes wrimg {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    @-moz-keyframes wrimg {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    @-webkit-keyframes wrimg {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    @-o-keyframes wrimg {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    /* 简介 */
    .box4 {
        max-width: 1920px;
        margin: 0 auto;
        background: url(../images/img02.jpg) no-repeat center 0;
    }

    .box4 .w12 {
        position: relative;
        height: 590px;
    }

    .box4 .about {
        position: absolute;
        top: 330px;
        left: 50%;
        margin-left: -270px;
        width: 540px;
    }

    .box4 .about .h1 {
        line-height: 40px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    .box4 .about .cont {
        margin-top: 26px;
        height: 120px;
        line-height: 30px;
        font-size: 15px;
        color: #676869;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .box4 .about .more {
        display: block;
        margin: 10px auto 0;
        width: 190px;
        height: 35px;
        background: #005eb6;
        line-height: 35px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 30px;
    }

    .box4 .btnbox .ab1 {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 400px;
        left: 30px;
        opacity: 0;
    }

    .box4 .btnbox .ab2 {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 239px;
        left: 120px;
        opacity: 0;
    }

    .box4 .btnbox .ab3 {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 41px;
        left: 442px;
        opacity: 0;
    }

    .box4 .btnbox .ab4 {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 98px;
        right: 289px;
        opacity: 0;
    }

    .box4 .btnbox .ab5 {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 234px;
        right: 110px;
        opacity: 0;
    }

    .box4 .btnbox .icon {
        display: block;
        margin: 22px auto 0;
    }

    .box4 .btnbox p {
        line-height: 26px;
        font-size: 18px;
        color: #005eb6;
        text-align: center;
    }

    /* 案例 */
    .box5 {
        padding: 30px 0;
        /* background: #f5f5f7; */
    }

    .box5 .list1 {
        margin-top: 20px;
        position: relative;
        padding-bottom: 30px;
    }

    .box5 .list1 .swiper-slide {
        width: 285px;
    }

    .box5 .list1 .swiper-slide .item {
        display: block;
        border: 1px solid #ddd;
    }

    .box5 .list1 .pic {
        height: 283px;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
    }

    .box5 .list1 .pic img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 1s;
    }

    .box5 .list1 .pic img:hover {
        transform: scale(1.1);
    }

    .box5 .list1 p {
        padding: 10px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box5 .list1 .swiper-pagination {
        bottom: 0;
    }

    .box5 .list1 .swiper-pagination span {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        /* background: #fff; */
        margin: 0 6px;
    }

    .box5 .list1 .swiper-pagination span.swiper-pagination-bullet-active {
        background: #005acc;
    }

    .box5 .list2 {
        display: none;
    }

    /* box6 */
    .box6 {
        max-width: 1920px;
        margin: 0 auto;
    }

    .box6 .ad01 {
        display: block;
        width: 100%;
    }

    .box6 .ad02 {
        display: none;
    }

    /* 新闻 */
    .box7 {
        padding: 30px 0;
        background: #f5f5f7;
    }

    .box7 .list {
        margin-top: 20px;
    }

    .box7 .list .item {
        float: left;
        width: 570px;
        padding: 10px;
        background: #fff;
        margin: 0 20px 20px 0;
    }

    .box7 .list .item:nth-child(2n) {
        margin-right: 0;
    }

    .box7 .list .fl {
        float: left;
        width: 80px;
        padding-top: 8px;
    }

    .box7 .list .day {
        line-height: 40px;
        font-size: 36px;
        color: #000;
        text-align: center;
    }

    .box7 .list .year {
        line-height: 30px;
        font-size: 16px;
        color: #000;
        text-align: center;
    }

    .box7 .list .fr {
        float: right;
        width: 470px;
    }

    .box7 .list .title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box7 .list .info {
        margin-top: 4px;
        height: 48px;
        line-height: 24px;
        font-size: 15px;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .box7 .list .item:hover {
        background: #0457b7;
    }

    .box7 .list .item:hover * {
        color: #fff;
    }
}

@media screen and (max-width:768px) {
    .banner {
        display: none;
    }

    .mbanner .swiper-container {
        width: 100%;
        height: auto !important;
    }

    .mbanner .swiper-slide {
        height: auto !important;
    }

    .mbanner .swiper-slide img {
        display: block;
        width: 100%;
    }

    .mbanner .swiper-slide img {
        display: block;
        width: 100%;
    }

    .mbanner .swiper-pagination span {
        width: 0.1rem;
        height: 0.1rem;
        background: #fff;
        border-radius: 0.05rem;
        margin: 0 0.06rem;
        opacity: 1 !important;
    }

    .mbanner .swiper-pagination span.swiper-pagination-bullet-active {
        background: #005acc;
    }

    .box1 {
        display: none;
    }

    .box2 {
        padding: 0.3rem 0.25rem;
        background: #f5f5f7;
    }

    .box2 .fl {
        display: none;
    }

    .box2 .fr {
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .box2 .fr .item {
        width: 3.35rem;
        margin-bottom: 0.2rem;
    }

    .box2 .fr .pic {
        height: 3.35rem;
        overflow: hidden;
    }

    .box2 .fr .pic img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .box2 .fr .item p {
        margin-top: 0.06rem;
        padding: 0 0.1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.26rem;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box3 {
        padding: 0.3rem 0.25rem;
    }

    .box3 .main {
        margin-top: 0.2rem;
    }

    .box3 li {
        display: flex;
        margin-bottom: 0.2rem;
    }

    .box3 li .dot1 {
        background: url(../images/icon13.png) no-repeat 0 0;
        background-size: 100% 100%;
        width: 0.7rem;
        height: 0.98rem;
        margin-right: 0.2rem;
    }

    .box3 li .dot1 em {
        display: block;
        line-height: 0.7rem;
        font-size: 0.36rem;
        color: #ffffff;
        text-align: center;
    }

    .box3 li .bfont {
        width: 6.1rem;
    }

    .box3 li .bfont .btit2 {
        line-height: 0.5rem;
        font-size: 0.3rem;
        color: #000;
    }

    .box3 li .bfont p {
        margin-top: 0.04rem;
        line-height: 0.44rem;
        font-size: 0.26rem;
        color: #595959;
    }

    .box4 {
        padding: 0.3rem 0.25rem;
        background: #005acc;
    }

    .box4 .about {
        background: #fff;
        padding: 0.4rem 0.25rem;
    }

    .box4 .h1 {
        line-height: 0.5rem;
        font-size: 0.36rem;
        font-weight: bold;
        text-align: center;
        background: url(../images/icon12.png) no-repeat center center;
    }

    .box4 .cont {
        margin-top: 0.2rem;
        line-height: 0.5rem;
        font-size: 0.28rem;
        color: #000;
    }

    .box4 .more {
        display: block;
        margin: 0.2rem auto 0;
        width: 4rem;
        line-height: 0.7rem;
        font-size: 0.28rem;
        color: #fff;
        text-align: center;
        border-radius: 0.36rem;
        background: #005acc;
    }

    .box4 .btnbox {
        margin-top: 0.3rem;
        /* margin-bottom: 0.2rem; */
        display: flex;
        justify-content: space-between;
    }

    .box4 .btnbox .ab1 {
        display: none;
    }

    .box4 .btnbox a {
        width: 1.6rem;
        padding-top: 0.3rem;
        height: 1.3rem;
        background: #fff;
        border-radius: 50%;
    }

    .box4 .btnbox .icon {
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        margin: 0 auto;
    }

    .box4 .btnbox p {
        line-height: 0.5rem;
        font-size: 0.26rem;
        color: #005eb6;
        text-align: center;
    }

    .box5 {
        padding: 0.3rem 0.25rem;
        background: #f5f5f7;
    }

    .box5 .list1 {
        display: none;
    }

    .box5 .list2 {
        margin-top: 0.2rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .box5 .list2 .item {
        width: 3.35rem;
        margin-bottom: 0.2rem;
    }

    .box5 .list2 .pic {
        height: 3.35rem;
        overflow: hidden;
    }

    .box5 .list2 .pic img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .box5 .list2 .item p {
        margin-top: 0.06rem;
        padding: 0 0.1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.26rem;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box6 {
        width: 100%;
    }

    .box6 .ad01 {
        display: none;
    }

    .box6 .ad02 {
        display: block;
        width: 100%;
    }

    .box7 {
        padding: 0.3rem 0.2rem;
        background: #f5f5f7;
    }

    .box7 .list {
        margin-top: 0.2rem;
    }

    .box7 .list .item {
        padding: 0.1rem;
        background: #fff;
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
    }

    .box7 .list .fl {
        width: 1.5rem;
        margin-right: 0.2rem;
    }

    .box7 .list .fl .day {
        line-height: 0.6rem;
        font-size: 0.5rem;
        color: #000;
        text-align: center;
    }

    .box7 .list .fl .year {
        line-height: 0.5rem;
        font-size: 0.3rem;
        text-align: center;
        color: #000;
    }

    .box7 .list .fr {
        width: 5.3rem;
    }

    .box7 .list .fr .title {
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
    }

    .box7 .list .fr .info {
        margin-top: 0.06rem;
        height: 0.82rem;
        line-height: 0.42rem;
        font-size: 0.26rem;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}