.animate__animated.animate__bounceOutLeft,.animate__animated.animate__fadeInRight{--animate-duration:1.2s}.list-card{margin:50px auto 0;max-width:1200px}.list-card .card-title{font-size:24px;font-weight:700}.list-card .card-body{margin-top:30px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.list-card .card-body li{-webkit-box-flex:0;-ms-flex:0 0 31%;flex:0 0 31%}.list-card .card-body li:hover .img:before{display:block}.list-card .card-body li .img{position:relative}.list-card .card-body li .img img{width:100%}.list-card .card-body li .img:before{display:none;content:"";position:absolute;left:0;bottom:0;right:0;height:4px;background-color:#bcff2f}.list-card .card-body li .title{padding:0 16px;margin-top:20px;font-size:16px;font-weight:700}@media (max-width:769px){.list-card .card-body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.list-card .card-body li{margin-top:32px}.list-card .card-body li:first-child{margin-top:0}.list-card .card-body li .title{padding:0;font-size:15px;line-height:28px}}.solution{margin-top:120px}.solution .solution-head{text-align:center}.solution .solution-head h3{font-size:32px;font-weight:700;line-height:60px}.solution .solution-head p{margin-top:20px;font-size:18px;line-height:32px}.solution .solution-body .solution-card{margin-top:60px;border-radius:8px;border:1px solid #fff;padding:50px 50px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.solution .solution-body .solution-card .card-left{width:35%}.solution .solution-body .solution-card .card-left img{width:100%}.solution .solution-body .solution-card .card-left p{font-size:22px;font-weight:700}.solution .solution-body .solution-card .card-right{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:10%}.solution .solution-body .solution-card .card-right .dl{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;margin-bottom:50px;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.solution .solution-body .solution-card .card-right .dl dt{font-size:18px;font-weight:700;margin-bottom:20px}.solution .solution-body .solution-card .card-right .dl dd{font-size:16px;line-height:32px;padding-left:4px}.solution .solution-body .solution-card .card-right .dl dd p{position:relative;padding-left:16px}.solution .solution-body .solution-card .card-right .dl dd p:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;position:absolute;left:0;top:15px}@media (max-width:769px){.solution{margin-top:60px}.solution .solution-head h3{font-size:20px;line-height:48px}.solution .solution-head p{font-size:14px}.solution .solution-body .solution-card{padding:30px 16px 20px;margin-top:40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.solution .solution-body .solution-card .card-left{width:100%}.solution .solution-body .solution-card .card-left img{width:100%}.solution .solution-body .solution-card .card-right{margin-top:20px;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.solution .solution-body .solution-card .card-right .dl{margin-bottom:24px;padding:0}}



@media only screen and (max-width: 768px) {
    .newswith {
        width:100%;
        background: #fff;
    }

    .okx-art {
        width: 100%;
        margin: 0px auto;
        padding: 20px 0;
        overflow: hidden;
        font-size: 14px;
    }

    .okx-art h1 {
        width: 100%;
        margin: 10px auto;
        font-size: 36px;
        line-height: 50px;
        padding: 20px 0;
        overflow: hidden; color:#000;
    }

    .oknav {
        width: 100%;
        font-size: 14px;
        margin: 30px 0 10px 0;
        text-align: left;
        color: #999;
    }

    .oknav a {
        color: #000;
    }

    .oktime {
        width: 100%;
        color: #999;
        margin: 20px 0 20px 0
    }

    .okx-text {
        border-top: 1px solid #ddd;
        float: left;
        font-size: 16px;
        width: 100%;
        padding: 20px 0%;
        margin: 0px 0 30px 0%;
        color: #000;
    }

    .okx-text p {
        float: left;
        width: 100%;
        line-height: 35px;
        margin: 0 0 24px 0;
    }

    .okx-text img {
        box-shadow: 0 0px 5px #ddd;
        float: left;
        width: 100%;
        margin: 20px 0
    }

    .listwith {
        width: 100%;
        background: linear-gradient(-45deg, #333, #000);
        padding: 100px 0
    }

    .ok-listtt {
        width: 100%;
        border-bottom: 0px solid #333;
        color: #fff;
        height: 50px;
        line-height: 50px;
        float: left;
        font-weight: 700;
        font-size: 32px;
        margin: 0% 0% 30px 0%
    }

    .ok-list {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        margin: 0 0 20px 0
    }

    .ok-list li {
        border-bottom: 1px solid #333;
        width: 100%;
        margin: 0px 0 10px 0;
        padding: 10px 0 20px 0;
        float: left;
    }

    .ok-list a {
        float: left;
        background: url(../image/10.webp) 0% 12px no-repeat;
        line-height: 28px;
        font-size: 16px;
        background-size: 5px 5px;
        color: #fff;
        padding: 0 0 0 20px;
        text-align: left;
    }

    .ok-listo {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        margin: 0 0 80px 0
    }

    .ok-listo li {
        border-bottom: 1px solid #ddd;
        width: 100%;
        margin: 0px 0 10px 0;
        padding: 10px 0 20px 0;
        float: left;
    }

    .ok-listo a {
        float: left;
        background: url(../image/11.webp) 0% 12px no-repeat;
        line-height: 28px;
        font-size: 16px;
        background-size: 5px 5px;
        color: #000;
        padding: 0 0 0 20px;
        text-align: left;
    }

    .ok-listo a:hover {
        color: #149f00;
    }

    a:hover {
        color: #bcff2f;
        transition: all 1s ease 0s;
    }
}

@media only screen and (min-width: 768px) {
    .newswith {
        width:100%;
        background: #fff;
    }

    .okx-art {
        width: 100%;
        margin: 0px auto;
        padding: 20px 0;
        overflow: hidden;
        font-size: 14px;
    }

    .okx-art h1 {
        width: 100%;
        margin: 10px auto;
        font-size: 36px;
        line-height: 32px;
        padding: 20px 0; color:#000;
        overflow: hidden;
    }

    .oknav {
        width: 100%;
        font-size: 14px;
        margin: 30px 0 10px 0;
        text-align: left;
        color: #999;
    }

    .oknav a {
        color: #000;
    }

    .oktime {
        width: 100%;
        color: #999;
        margin: 20px 0 20px 0
    }

    .okx-text {
        border-top: 1px solid #ddd;
        float: left;
        font-size: 18px;
        width: 80%;
        padding: 20px 10%;
        margin: 0px 0 30px 0%;
        color: #000;
    }

    .okx-text p {
        float: left;
        width: 100%;
        line-height: 40px;
        margin: 0 0 24px 0;
    }

    .okx-text img {
        box-shadow: 0 0px 5px #ddd;
        float: left;
        width: 100%;
        margin: 20px 0
    }

    .listwith {
        width: 100%;
        background: linear-gradient(-45deg, #000, #333);
        padding: 100px 0
    }

    .ok-listtt {
        width: 100%;
        border-bottom: 0px solid #333;
        color: #fff;
        height: 50px;
        line-height: 50px;
        float: left;
        font-weight: 700;
        font-size: 32px;
        margin: 0% 0% 5% 0%
    }

    .ok-list {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        margin: 0 0 20px 0
    }

    .ok-list li {
        border-bottom: 1px solid #333;
        width: 100%;
        float: left;
        height: 80px;
        overflow: hidden;
    }

    .ok-list a {
        float: left;
        background: url(../image/10.webp) 0% 36px no-repeat;
        line-height: 80px;
        font-size: 16px;
        background-size: 10px 10px;
        color: #fff;
        padding: 0 0 0 30px;
    }

    .ok-listo {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        margin: 0 0 80px 0
    }

    .ok-listo li {
        border-bottom: 1px solid #ddd;
        width: 100%;
        float: left;
        height: 80px;
        overflow: hidden;
    }

    .ok-listo a {
        float: left;
        background: url(../image/11.webp) 0% 38px no-repeat;
        line-height: 80px;
        font-size: 16px;
        background-size: 7px 7px;
        color: #000;
        padding: 0 0 0 30px;
    }

    .ok-listo a:hover {
        color: #149f00;
    }

    a:hover {
        color: #bcff2f;
        transition: all 1s ease 0s;
    }
}
@media only screen and (max-width: 768px) {
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, input, select, textarea, div, table, td, th, tr, dt, dd, dl {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul, ol {
        list-style: none;
    }

    em, i {
        font-style: normal;
    }

    img {
        object-fit: cover;
        border: 0;
        vertical-align: middle;
    }

    input, select {
        vertical-align: middle;
        outline: none;
    }

    a {
        text-decoration: none;
    }

    img {
        border: none;
    }

    body {
        background: #000;
        width: 100%;
        font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
        font-size: 14px;
    }

    body {
        transform: scale(x, y);
        /***-webkit-user-select:none;-moz-user-select:none; -ms-user-select:none;user-select:none;**/
    }

    .wart {
        width: 90;
        margin: 0 5%;
        overflow: hidden;
    }

   

    .vdwith {
        float: left;
        width: 90%;
        margin: 5% 5% 5% 5%;
        min-height: 75vh
    }

    .okleft {
        float: left;
        width: 100%;
    }

    .okleft-1 {
        float: left;
        line-height: 50px;
        text-align: center;
        font-size: 32px;
        margin: 30px 0 20px 0;
        font-weight: 700;
        color: #fff;
    }

    .okleft-1 p {
        width: 100%;
        float: left;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        margin: 18px 0 0 0;
        font-weight: 500;
        color: #bbb;
    }

    .okleft-2 {
        float: left;
        width: 100%;
        /**height:130px;**/
        overflow: hidden;
        margin: 0px auto;
    }

    .okleft-2 a {
        float: left;
        width: 100%;
        border-radius: 100px;
        margin: 30px 5% 0 0%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: #fff;
        color: #000;
        font-size: 18px
    }

    .okleft-2 a:hover {
        transition: all 1s ease 0s;
        font-weight: 700;
        color: #000
    }

    .okleft-2 a.bbk {
        background: #bcff2f;
        ;color: #000;
    }

    .okright {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%;
        float: right;
        flex: 0 0 auto;
        margin: 50px 0
    }

    .pp-img {
        width: 100%;
    }

    .okleft-3 {
        display: none;
        float: left;
        font-size: 0px;
        width: 100%;
        height: 190px;
        margin: 0px 0;
        background: #000 url(../image/okdd.webp) 0% 80px no-repeat;
        background-size: 100% auto
    }

    .newith {
        width: 100%;
        margin: 0px auto;
        padding: 100px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #000, #333);
        font-size: 14px;
    }

    .ne-tit {
        width: 100%;
        font-size: 32px;
        line-height: 50px;
        margin: 0 0 20px 0;
        font-weight: 700;
        text-align: center;
        color: #fff;
    }

    .ne-titw {
        width: 100%;
        font-size: 16px;
        margin: 0 0 30px 0;
        line-height: 30px;
        font-weight: 500;
        text-align: center;
        color: #ccc;
    }

    .ne-tex {
        width: 100%
    }

    .ne-tex li {
        float: left;
        width: 40%;
        padding: 0 0%;
        margin: 0px 5%;
        color: #fff;
        height: 350px;
        overflow: hidden;
    }

    .ne-tex li img {
        max-width: 100%;
        display: block;
        margin: 20px auto;
        height: 118px
    }

    .ne-tex .ntit {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        font-size: 16px;
        margin: 0 0 20px 0
    }

    .ne-tex .ntxt {
        float: left;
        width: 100%;
        margin: 0%;
        color: #ccc;
        font-size: 14px;
        line-height: 25px;
    }

    .jr {
        width: 100%;
        padding: 100px 0;
        background: linear-gradient(-45deg, #333, #000);
    }

    .jr-tit {
        float: left;
        width: 100%;
        text-align: center;
        margin: 0 0 50px 0;
        font-weight: 700;
        color: #fff;
        font-size: 28px;
        line-height: 40px;
    }

    .jr-ms {
        float: left;
        width: 80%;
        border-radius: 100px;
        margin: 0px 10%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: #fff;
    }

    .jr-ms a {
        color: #000;
        font-weight: 700;
        font-size: 22px
    }

    .jr-ms:hover {
        transition: all 1s ease 0s;
        background: #bcff2f;
    }

    .jr-ms a:hover {
        transition: all 1s ease 0s;
        color: #000;
    }

    .imwith {
        width: 100%;
        margin: 0px auto;
        padding: 100px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #000, #333);
        font-size: 14px;
    }

    .imwith img {
        width: 100%;
    }

    .nswith {
        width: 100%;
        margin: 0px auto;
        padding: 100px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #000, #333);
        font-size: 14px;
    }

    .nlist dd {
        width: 100%;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
    }

    .nlist dd a {
        color: #fff;
        background: url(../image/10.webp) 0% 8px no-repeat;
        line-height: 40px;
        font-size: 14px;
        background-size: 5px 5px;
        border-bottom: 0px solid #666;
        padding: 0 0 0 15px;
    }

    .nlist dd a:hover {
        transition: all 1s ease 0s;
        color: #bcff2f;
    }

    .foot {
        width: 100%;
        float: left;
        margin: 100px 0
    }

    .logofoot {
        float: left;
        width: 100%;
        margin: 0 1% 50px 1%;
    }

    .logofoot img {
        height: 45px;
        display: block;
        margin: 0px auto;
    }

    .logofoot a {
        color: #fff;
        line-height: 40px;
    }

    .logofoot p {
        color: #fff;
        line-height: 50px;
        font-size: 12px;
        text-align: center
    }

    .menufoot {
        display: none;
        float: left;
        width: 14.666%;
        margin: 0 1% 50px 1%;
    }

    .menufoot li {
        line-height: 40px;
    }

    .menufoot a {
        color: #666;
    }

    .titfoot {
        color: #fff;
        font-size: 16px;
        margin: 20px 0;
        font-weight: 700;
    }

    .footer {
        text-align: center;
        height: 40px;
        line-height: 20px;
        color: #555;
        font-size: 12px;
        border-top: 1px solid #333;
        margin: 0px 0 60px 0 ;
        padding: 20px 0 0 0;
    }

    .titfootxz {
        float: left;
        width: 90%;
        border-radius: 100px;
        margin: 0px 5%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #fff;
    }

    .titfootxz a {
        color: #000;
        font-weight: 700;
        font-size: 16px
    }

    .titfootxz:hover {
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        background: #bcff2f;
    }

    .titfootxz a:hover {
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        color: #000
    }

    .titfootewm {
        float: left;
        width: 90%;
        border-radius: 100px;
        margin: 30px 5%;
    }

    .titfootewm img {
        width: 100%;
        border-radius: 16px;
    }

    #oktop {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background: url(../image/top.png) no-repeat;
        background-size: 40px 40px;
        position: fixed;
        bottom: 158px;
        right: 5%;
        display: none;
    }

    #okxz {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #bcff2f;
        color: white;
        font-size: 16px;
        padding: 10px 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
    }

    #okxz a {
        color: #000;
        font-size: 16px;
    }
}

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

    .wart {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }

    

    .vdwith {
        float: left;
        width: 90%;
        margin: 5% 5% 5% 5%;
        min-height: 75vh
    }

    .okleft {
        float: left;
        width: 65%;
    }

    .okleft-1 {
        float: left;
        line-height: 50px;
        font-size: 59px;
        margin: 80px 0 0 0;
        font-weight: 700;
        color: #fff;
    }

    .okleft-1 p {
        float: left;
        line-height: 50px;
        font-size: 22px;
        margin: 28px 0 0 0;
        font-weight: 500;
        color: #bbb;
    }

    .okleft-2 {
        float: left;
        width: 100%;
        margin: 0px auto;
    }

    .okleft-2 a {
        float: left;
        width: 30%;
        border-radius: 100px;
        margin: 50px 5% 0 0%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: #fff;
        color: #000;
        font-size: 18px
    }

    .okleft-2 a:hover {
        transition: all 1s ease 0s;
        font-weight: 700;
        color: #000
    }

    .okleft-2 a.bbk {
        background: #bcff2f;
        ;color: #000;
    }

    .okright {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 35%;
        float: right;
        flex: 0 0 auto;
    }

    .pp-img {
        width: 100%;
    }

    .okleft-3 {
        float: left;
        font-size: 0px;
        width: 100%;
        height: 190px;
        margin: 0 0;
        background: #000 url(../image/okdd.webp) 0% 80px no-repeat;
        background-size: 500px 100px
    }

    .newith {
        width: 100%;
        margin: 0px auto;
        padding: 150px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #000, #333);
        font-size: 14px;
    }

    .ne-tit {
        width: 100%;
        font-size: 32px;
        margin: 0 0 20px 0;
        font-weight: 700;
        text-align: center;
        color: #fff;
    }

    .ne-titw {
        width: 100%;
        font-size: 16px;
        margin: 0 0 80px 0;
        font-weight: 500;
        text-align: center;
        color: #ccc;
    }

    .ne-tex {
        width: 100%
    }

    .ne-tex li {
        float: left;
        width: 17%;
        padding: 0 2%;
        margin: 0 1.5%;
        color: #fff;
    }

    .ne-tex li img {
        max-width: 100%;
        display: block;
        margin: 10px auto;
        height: 149px
    }

    .ne-tex .ntit {
        float: left;
        text-align: center;
        font-weight: 700;
        width: 100%;
        font-size: 16px;
        margin: 0 0 20px 0
    }

    .ne-tex .ntxt {
        float: left;
        width: 100%;
        margin: 0%;
        color: #ccc;
        font-size: 16px;
        line-height: 28px;
    }

    .jr {
        width: 100%;
        padding: 200px 0;
        background: linear-gradient(-45deg, #333, #000);
    }

    .jr-tit {
        float: left;
        width: 100%;
        text-align: center;
        margin: 0 0 80px 0;
        font-weight: 700;
        color: #fff;
        font-size: 52px;
        line-height: 60px;
    }

    .jr-ms {
        float: left;
        width: 30%;
        border-radius: 100px;
        margin: 0px 35%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: #fff;
    }

    .jr-ms a {
        color: #000;
        font-weight: 700;
        font-size: 22px
    }

    .jr-ms:hover {
        transition: all 1s ease 0s;
        background: #bcff2f;
    }

    .jr-ms a:hover {
        transition: all 1s ease 0s;
        color: #000;
    }

    .imwith {
        width: 100%;
        margin: 0px auto;
        padding: 100px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #000, #333);
        font-size: 14px;
    }

    .imwith img {
        width: 100%;
    }

    .nswith {
        width: 100%;
        margin: 0px auto;
        padding: 100px 0;
        overflow: hidden;
        background: linear-gradient(-45deg, #333, #000);
        font-size: 14px;
    }

    .nlist dd {
        width: 100%;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
    }

    .nlist dd a {
        color: #fff;
        background: url(../image/10.webp) 0% 8px no-repeat;
        line-height: 40px;
        font-size: 14px;
        background-size: 5px 5px;
        border-bottom: 0px solid #666;
        padding: 0 0 0 15px;
    }

    .nlist dd a:hover {
        transition: all 1s ease 0s;
        color: #bcff2f;
    }

   
    .menufoot {
        float: left;
        width: 14.666%;
        margin: 0 1% 50px 1%;
    }

    .menufoot li {
        line-height: 40px;
    }

    .menufoot a {
        color: #666;
    }

    .titfoot {
        color: #fff;
        font-size: 16px;
        margin: 20px 0;
        font-weight: 700;
    }

    

    .titfootxz {
        float: left;
        width: 90%;
        border-radius: 100px;
        margin: 0px 5%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #fff;
    }

    .titfootxz a {
        color: #000;
        font-weight: 700;
        font-size: 16px
    }

    .titfootxz:hover {
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        background: #bcff2f;
    }

    .titfootxz a:hover {
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        color: #000
    }

    .titfootewm {
        float: left;
        width: 90%;
        border-radius: 100px;
        margin: 30px 5%;
    }

    .titfootewm img {
        width: 100%;
        border-radius: 16px;
    }

    #oktop {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background: url(../image/top.png) no-repeat;
        background-size: 40px 40px;
        position: fixed;
        bottom: 158px;
        right: 5%;
        display: none;
    }

    #okxz {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #bcff2f;
        color: white;
        font-size: 16px;
        padding: 10px 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
    }

    #okxz a {
        color: #000;
        font-size: 16px;
    }
}

/**翻页**/
.pagebar{margin:20px 0 0 0;text-align: center;}
.pagebar .page{display:inline-block;background-color:#fff;line-height:32px;width:32px;border-radius:3px;margin:0 5px;color:#b2b2b2;text-align:center}
.pagebar .page:hover , .pagebar .now-page{background-color:#23292f;color:#fff}