.flow-img,
.zhd-banner>img {
    height: auto;
    width: 100%
}

.myModal .req-btn,
.myModal-close {
    border: none;
    display: inline-block
}

.product-hover,
.sol-page.container .cols-item {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2), inset 0 0 1px 0 rgba(255, 255, 255, 1)
}

body {
    font-family: "Microsoft YaHei" !important
}

li,
ul {
    list-style-type: none
}

a,
a:active,
a:hover {
    text-decoration: none
}

h2,
h4,
li,
ol,
p,
ul {
    margin: 0;
    padding: 0
}

em,
strong {
    font-weight: 400;
    font-style: normal
}

.zhd-title h2,
h2.zhd-title-white,
h4.tw-title {
    font-weight: 700;
    text-align: center
}

.padd-l30 {
    padding-left: 30px
}

.padd-r30 {
    padding-right: 30px
}

.bg-green {
    background: #10a065
}

.padd-tb50 {
    padding: 50px 0
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.zhd-banner {
    position: relative
}

.zhd-banner .desc {
    letter-spacing: 1px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    text-align: center;
    width: 100%;
    font-size: 26px;
    color: #fff;
}

.font-52 {
    font-size: 52px !important;
    margin: 2px 0;
    color: #fff !important
}
.img1{
    width: 100%;
}
.zhd-title h2 {
    color: #333
}

.flow-img {
    padding: 10px
}

h4.tw-title {
    color: #4c4c4c;
    line-height: 150%
}

p.tw-txt {
    color: #949494;
    line-height: 26px;
    font-size: 16px
}

.tit-p{
    margin-top: 30px;
    color: #4C4C4C !important;
    font-weight: bold !important;
    font-size: 20px !important;
}
.bg-light {
    background: #f0f2f0
}
.box-style{
    margin: 0 80px;
}
.list1{
    display: flex;
    justify-content: space-between;
}
.list1 .item .item-tit{
    width: 220px;
    height: 220px;
    text-align: center;
    line-height: 220px;
    font-size: 20px;
    color: #fff;
    font-weight: bolder;
}
.list1 .item .item-img1{
    background: url('../images/retailmarket//item1.jpg') no-repeat center center;
    background-size: 100% 100%;
}
.list1 .item .item-img2{
    background: url('../images/retailmarket//item2.jpg') no-repeat center center;
    background-size: 100% 100%;
}
.list1 .item .item-img3{
    background: url('../images/retailmarket//item3.jpg') no-repeat center center;
    background-size: 100% 100%;
}
.list1 .item .item-img4{
    background: url('../images/retailmarket//item4.jpg') no-repeat center center;
    background-size: 100% 100%;
}
.list1 .item .border{
    margin: 0 auto;
    width: 1px;
    height: 200px;
    border-left: 4px dashed #7F7E7E;
}
.list1 .item .circular{
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background: #7F7E7E;
    border-radius: 50%;
}
.list1 .item .list-text{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
    text-align: center;
}
.list1 .item .list-text .item-text{
    color: #7F7E7E;
    font-size: 16px;
}
.list2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.list2 .item{
    margin-bottom: 30px;
    width: 200px;
    height: 200px;
    text-align: center;
    box-shadow: 0 0 20px 2px #ccc
}
.list2 .item:last-child{
    margin-right: 0;
}
.list2 .item img{
    margin: 20px 0;
    /* width: 80px; */
    height: 100px;
}
.list2 .item .item-text{
    font-size: 16px;
    color: #3C3C3C;
}
.list-box1{
    margin: 10px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-box2{
    background: #F0F2F0;
}
.list-box1 img{
    margin: 10px 50px 10px 10px;
    width: 400px;
    height: 300px;
}
.list-box2 img{
    margin: 10px 10px 10px 10px;
    width: 400px;
    height: 300px;
}
.list-box1 .box-content{
    margin: 10px auto;
    width: 520px;
}
.list-box1 .box-content .box-title{
    font-size: 24px;
    text-align: center;
    color: #000;
}
.list-box1 .box-content .box-tit{
    margin: 20px 0;
    font-size: 20px;
    text-align: center;
    color: #505050;
}
.list-box1 .box-content .box-text{
    font-size: 18px;
    color: #515151;
    line-height: 30px;
}
.list3{
    margin-top: 50px;
    display: flex;
}
.list3 .item{
    flex: 1;
    text-align: center;
    border-right: 1px solid #b2b2b2;
}
.list3 .item:last-child{
    border-right: none;
}
.list3 .item img{
    margin: 10px 0; 
    width: 50px;
    height: 50px;
}
.list3 .item .item-title{
    font-size: 16px;
    color: #4C4C4C;
}
h2.zhd-title-white {
    color: #fff;
    line-height: 150%;
}

.pull-center {
    text-align: center
}

.index-plan-btn {
    display: inline-block;
    color: #0b9e60;
    background: #fff
}

.swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.swiper-slide {
    text-align: center
}

.swiper-button-prev {
    background-image: url(../images/swiper-button-next.png) !important
}

.swiper-button-next {
    background-image: url(../images/swiper-button-prev.png) !important
}

.myModal-close {
    position: absolute;
    background: url(../images/icon-close.png) center no-repeat;
    background-size: cover
}

.myModal .req-btn {
    background: #0b9e60;
    color: #fff;
    border-radius: 2px
}

.icont-supplier-logo>img {
    height: 100%;
    width: auto
}

.zhd-centertxt {
    position: relative;
    height: 54px;
    line-height: 54px
}

.zhd-centertxt:after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    background: #ccc;
    z-index: 1
}

.zhd-centertxt h2 {
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 0;
    z-index: 2;
    background: #fff;
    transform: translateX(-50%)
}

@media screen and (min-width:960px) {
    .modal-dialog {
        margin: 80px auto
    }

    .myModal-close {
        right: -50px;
        top: -40px;
        width: 40px;
        height: 40px
    }

    .myModal .tw-title {
        font-size: 30px;
        margin: 30px 0 25px
    }

    .myModal .req-btn {
        height: 40px;
        line-height: 40px;
        padding: 0 80px;
        margin: 10px 0 24px
    }

    .supplier-logo.container {
        padding: 56px 0 104px
    }

    .supplier-logo.container .tw-title {
        margin-bottom: 12px
    }

    .supplier-logo.container .tw-txt {
        text-align: center;
        margin-bottom: 48px
    }

    .supplier-logo.container .zhd-cols {
        float: none;
        display: inline-block;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        width: 20%;
        overflow: hidden
    }

    .supplier-logo.container .zhd-cols>img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        margin-top: 10px;
        transform: scale(1, 1);
        transition: transform ease-in .2s
    }

    .supplier-logo.container .zhd-cols>img:hover {
        transform: scale(1.1, 1.1)
    }

    .zhd-centertxt {
        margin-bottom: 10px
    }

    .zhd-centertxt h2 {
        height: 54px;
        line-height: 54px;
        font-size: 28px;
        padding: 0 60px
    }
}

@media screen and (max-width:960px) {
    .zhd-banner .desc {
        letter-spacing: 1px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        text-align: center;
        width: 100%;
        font-size: 14px;
        color: #c9caca
    }

    .font-52 {
        font-size: 26px !important;
        margin: 2px 0;
        color: #fff !important
    }

    .modal-dialog {
        margin: 50px auto 0;
        width: 80%
    }

    .myModal-close {
        right: -30px;
        top: -20px;
        width: 20px;
        height: 20px
    }

    .myModal .tw-title {
        font-size: 18px;
        margin: 10px 0 12px
    }

    .myModal .req-btn {
        height: 40px;
        line-height: 40px;
        padding: 0 80px;
        margin: 10px 0 24px
    }

    .supplier-logo.container {
        padding-top: 30px;
        padding-bottom: 40px
    }

    .supplier-logo.container .tw-title {
        margin-bottom: 9px
    }

    .supplier-logo.container .tw-txt {
        text-align: center;
        margin-bottom: 36px
    }

    .supplier-logo.container .zhd-cols {
        display: inline-block;
        position: relative;
        min-height: 1px;
        padding-right: 8px;
        padding-left: 8px;
        width: 33.3333%
    }

    .supplier-logo.container .zhd-cols>img {
        width: 100%;
        height: auto;
        margin-bottom: 15px
    }

    .zhd-centertxt {
        margin-bottom: 5px
    }

    .zhd-centertxt h2 {
        position: absolute;
        display: inline-block;
        height: 54px;
        line-height: 54px;
        font-size: 20px;
        padding: 0 20px
    }
}

[v-cloak] {
    display: none
}

.navbar-zhd {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1000
}

.zhdbar-header a.brand {
    display: inline-block;
    background: url(../images/logo-white.png) left center no-repeat;
    background-size: auto 100%
}

.navbar-zhd.navbar-scroll a.brand {
    background: url(../images/logo.png) left center no-repeat;
    background-size: auto 100%
}

.zhdbar-header .brand>img {
    height: 100%;
    width: auto
}

.zhdbar-header .zhdbar-collapse>li {
    float: left
}

.zhdbar-header .bar-item {
    font-size: 18px;
    color: #fff
}

.zhdbar-header .bar-item.on,
.zhdbar-header .bar-item:hover {
    color: #ef8e00
}

.zhdbar-header .zhdbar-collapse>li:last-of-type {
    margin-right: 0
}

.zhdbar-header a.join {
    display: inline-block;
    text-align: center;
    background: #ef8e00;
    border-radius: 2px
}

.zhdbar-header a.join:hover {
    background: #d68100
}

.product-hover {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 780px;
    transform: translate3d(-50%, 100%, 0);
    background: #fff;
    border-radius: 6px;
    margin: 0 auto;
    text-align: left;
    padding: 0 40px;
    display: none
}

.product-hover:hover {
    display: block
}

.product-hover .product-item {
    float: left;
    padding-bottom: 36px;
    margin-right: 50px
}

.product-item.menu {
    width: 150px
}

.product-item.device {
    width: 100px
}

.product-item.control {
    width: 160px
}

.product-item.test {
    width: 140px
}

.product-hover .product-item:last-of-type {
    margin-right: 0
}

.product-hover .title {
    display: block;
    font-size: 16px;
    color: #4c4c4c;
    text-align: center;
    margin-bottom: 24px;
    line-height: 24px
}

.product-hover .product-text {
    color: #949494;
    font-size: 14px;
    line-height: 150%;
    text-align: center
}

.product-hover .product-link {
    display: block;
    margin-top: 24px;
    font-size: 14px;
    color: #0b9e60;
    text-align: center
}

.product-item .into,
.product-item:hover .tips {
    display: none
}

.product-item:hover .into {
    display: block
}

.product-hover .icont {
    display: block;
    margin: 42px 0 28px;
    height: 45px
}

.icont-menu {
    background: url(../images/icon-menu.png) center center no-repeat;
    background-size: auto 100%
}

.icont-device {
    background: url(../images/icon-device.png) center center no-repeat;
    background-size: auto 100%
}

.icont-control {
    background: url(../images/icon-control.png) center center no-repeat;
    background-size: auto 100%
}

.icont-test {
    background: url(../images/icon-test.png) center center no-repeat;
    background-size: auto 100%
}
@media screen and (max-width: 1200px) {
    .list2{
        margin: 0 auto;
        width: 790px;
    }
}
@media screen and (max-width: 1000px) {
    .list1 .item .item-tit{
        width: 180px;
        height: 180px;
        line-height: 180px;
    }
}
@media screen and (max-width: 990px) {
    .box-style{
        margin: 0 30px;
    }
    .list-box1{
        margin: 10px 30px;
    }
    .list-box1 img{
        width: 300px;
        height: 200px;
    }
}
@media screen and (min-width:960px) {
    .zhdbar-header {
        padding: 10px 50px
    }

    .zhdbar-header a.brand {
        height: 50px;
        width: 146px
    }

    .zhdbar-header .zhdbar-collapse>li {
        padding: 5px 0
    }

    .zhdbar-header .bar-item {
        position: relative;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        padding: 0 20px;
        font-size: 18px;
        cursor: pointer
    }

    .navbar-zhd.navbar-scroll {
        background: #fff;
        border-bottom: 1px solid #ececec;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2), inset 0 0 1px 0 rgba(255, 255, 255, 1)
    }

    .navbar-zhd.navbar-scroll .bar-item:not(.on) {
        color: #4c4c4c
    }

    .navbar-zhd.navbar-scroll .bar-item:hover {
        color: #ef8e00
    }

    .zhdbar-header a.join {
        width: 144px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        margin-left: 20px
    }

    #collapse.collapse.in,
    button[data-toggle=collapse] {
        display: none
    }
}

@media screen and (max-width:960px) {
    .zhdbar-header {
        padding: 10px 10px 0;
        background-color: #fff;
        border-bottom: 1px solid #eceece;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2), inset 0 0 1px 0 rgba(255, 255, 255, 1)
    }

    .zhdbar-header a.brand {
        height: 40px;
        width: 140px;
        background: url(../images/logo.png) left center no-repeat !important;
        background-size: auto 100% !important
    }

    .zhdbar-collapse {
        display: none
    }

    button[data-toggle=collapse] {
        display: block;
        float: right;
        background-color: transparent;
        border: none;
        margin-top: 5px
    }

    #collapse,
    #collapse .apply {
        border-top: 1px solid #ececec
    }

    button[data-toggle=collapse] .iconfont {
        font-size: 20px;
        color: #4c4c4c
    }

    #collapse {
        margin-top: 5px
    }

    #collapse .m-left {
        float: left;
        width: 60%;
        padding: 10px 0
    }

    #collapse .m-item {
        display: block;
        color: #4c4c4c;
        font-size: 16px
    }

    #collapse .m-right {
        width: 100%; 
        /* // border-left:1px solid #ececec; */
        padding:10px 0}
        #collapse .m-left .m-item{height:40px;line-height:40px}
        #collapse .m-left .icont-menu{display:inline-block;height:20px;width:20px}
        #collapse .m-left .icont{display:inline-block;height:20px;margin-right:10px}
        #collapse .m-left .icont-device{width:22px}#collapse .m-left .icont-control{width:21px}
        #collapse .m-left .icont-test{width:35px}
        #collapse .m-left .m-item>span{vertical-align:middle}
        #collapse .m-right .m-item{height:40px;line-height:40px;padding-left:32px}
        #collapse .apply{text-align:center}
        #collapse .apply .apply-btn{display:inline-block;margin:10px 0;color:#fff;font-size:16px;width:100px;height:30px;line-height:30px;text-align:center;background:#ef8e00;border-radius:2px}
}
        .col-sm-6.zhd-index-content li.item>a,.col-sm-8.zhd-index-content li.item>a,.zhd-details .link,.zhd-footer{color:#9fa0a0}
        .zhd-footer{background:#151515;font-size:16px}
        .zhd-details .child-li>a{position:relative;display:block;height:100%}
        .zhd-details .logo{width:100%;background:url(../images/logo-white.png) left center no-repeat;background-size:auto 100%}
        .icont-wechat{background:url(../images/icont-wechat.png) center no-repeat;background-size:auto 100%}
        .col-sm-6.zhd-index-content h4,.col-sm-6.zhd-index-content h4>a,.col-sm-8.zhd-index-content h4{color:#fff;font-size:18px}
        .col-sm-6.zhd-index-content li.item,.col-sm-8.zhd-index-content li.item{margin-bottom:10px}
        @media screen and (min-width:960px){.zhd-footer{padding:32px 50px 24px}
            .zhd-details .item{margin-bottom:12px}
            .zhd-details .logo{height:44px;margin-bottom:20px}
            .zhd-details .child-li{float:left;width:35px;height:35px;margin-right:24px}
            .wechat.child-li>img{position:absolute;display:none;left:-30px;bottom:-130px;width:120px;height:120px}
            .zhd-cols-27{float:left;width:27%;padding-left:50px}
            .zhd-cols-30{float:left;width:33.333%}
            /* .zhd-cols-30.sol{// padding-left:20px} */
            .zhd-cols-30.padd-r20{padding-right:40px}
            .zhd-cols-24{float:left;width:24%}
            .zhd-cols-24.right,.zhd-cols-30.right{text-align:right}
            .zhd-footer .copy{padding-top:82px;text-align:center;font-size:14px}
            .col-sm-6.zhd-index-content h4,.col-sm-8.zhd-index-content h4{margin:16px 0 20px}
        }
        @media screen and (max-width:960px){
            .zhd-footer{padding:32px 0 24px}
            .zhd-details .item{margin-bottom:12px}
            .zhd-details .logo{height:40px;margin-bottom:16px}
            .wechat.child-li>img{display:none;width:100px;height:100px}
            .zhd-cols-24:not(.zhd-m-5){float:left;width:100%}
            .zhd-cols-24.zhd-m-5{float:left;width:50%}
            .zhd-footer .copy{padding:24px 40px;text-align:center;font-size:14px}
            .zhd-footer .zhd-index-content .item{display:none}
            .col-sm-6.zhd-index-content h4,.col-sm-8.zhd-index-content h4{padding:10px 0}
        }
        #returnTop{position:fixed;display:none;z-index:100;background:url(../images/return-top.png) center no-repeat #fff;background-size:cover;border-radius:50%}
        @media screen and (min-width:960px){
            #returnTop{bottom:70px;right:70px;width:81px;height:80px}
        }
        @media screen and (max-width:960px){
            #returnTop{bottom:30px;right:30px;width:41px;height:40px}
        }
        .sol-page.container .zhd-cols{float:left;margin-bottom:15px}
        .cols-container{padding-left:15px}
        .sol-page.container .cols-item{position:relative;display:block;height:100%;margin-right:15px;border:1px solid #ececec;overflow:hidden;box-sizing:border-box}
        .sol-page.container .cols-wapper{position:absolute;top:0;left:0;height:200%;width:100%;transition:all ease-in .5s}
        .sol-page.container .cols-wapper:hover{top:-200px}
        .sol-page.container .icontxt{text-align:center;color:#333}
        .cols-container .cols-in>strong{display:block;font-size:18px;color:#333;text-align:center;padding:45px 0 20px}
        .cols-container .cols-in>p{font-size:14px;color:#666;margin-bottom:16px;text-align:center}
        .cols-container .cols-in>span{display:block;text-align:center;font-size:14px;color:#0b9e60}
        .icont-fresh{background:url(../images/sol-page/icon-fresh.png) center center no-repeat;background-size:auto 100%}
        .icont-food{background:url(../images/sol-page/icon-food.png) center center no-repeat;background-size:auto 100%}
        .icont-farmers{background:url(../images/sol-page/icon-farmers.png) center center no-repeat;background-size:auto 100%}
        .icont-eatery{background:url(../images/sol-page/icon-eatery.png) center center no-repeat;background-size:auto 100%}
        .icont-raise{background:url(../images/sol-page/icon-raise.png) center center no-repeat;background-size:auto 100%}
        .icont-retail{background:url(../images/sol-page/icon-retail.png) center center no-repeat;background-size:auto 100%}
        .icont-butcher{background:url(../images/sol-page/icon-butcher.png) center center no-repeat;background-size:auto 100%}
        .icont-supermarket{background:url(../images/sol-page/icon-supermarket.png) center center no-repeat;background-size:auto 100%}
        @media screen and (min-width:960px){.sol-page.container{padding:62px 0 68px}
        .sol-page.container .tw-title{font-size:28px;margin-bottom:20px}
        .sol-page.container .tw-txt{font-size:18px;text-align:center;margin-bottom:56px}
        .sol-page.container .zhd-cols{width:25%;height:200px}
        .sol-page.container .cols-in,.sol-page.container .cols-out{width:100%;height:200px;overflow:hidden}
        .cols-out .icont{height:70px;margin:40px 0 30px}
        .sol-page.container .icontxt{font-size:18px}
    }
        @media screen and (max-width:960px){.sol-page.container{padding:46px 0 50px}
        .sol-page.container .tw-txt{font-size:18px;text-align:center;margin-bottom:42px}
        .sol-page.container .zhd-cols{width:33.333%;height:150px}
        .sol-page.container .cols-in,.sol-page.container .cols-out{width:100%;height:150px;overflow:hidden}
        .cols-out .icont{height:52px;margin:30px 0 22px}
    }