.m-ban.zhan {
    background: #1f2944 url("img/banner.png") no-repeat center;
    background-size: cover
}

.zhan .zhan-ban-lnk:hover {
    color: #2589ff
}

.zhan-bg1 {
    background: #f1f1f5
}

.m-img {
    width: 780px;
    height: 544px
}

.m-tab {
    width: 320px;
    border-radius: 10px;
    overflow: hidden
}

.m-tab>li {
    padding: 26px 0 22px 30px;
    text-align: left;
    font-size: 18px;
    line-height: 31px;
    letter-spacing: 2px;
    border-radius: 10px
}

.m-tab>li,.m-tab>li.active {
    background: #f1f1f5;
    color: #595961
}

.m-tab>.m-border {
    border: none
}

.details-consult-btn {
    background: #2689ff;
    border-radius: 4px
}

.details-consult-btn:hover {
    background-color: #1668c9
}

.ban-consult {
    display: block;
    margin: 54px auto 96px;
    width: 180px;
    height: 50px;
    line-height: 50px;
    color: #FFF;
    font-size: 24px;
    background: #2689ff;
    border-radius: 5px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.ban-consult:hover {
    background: #1668c9
}

.f2-wrap {
    overflow: hidden;
    height: 704px;
    text-align: center;
    background: #f1f1f5
}

.f2-items {
    margin: 70px auto 0;
    width: 1216px;
    height: 354px
}

.f2-items>li {
    position: relative;
    float: left;
    margin: 0 17px 40px;
    width: 270px;
    height: 354px;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    -moz-box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.f2-items>li:hover {
    margin-top: -6px
}

.f2-bg {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    filter: alpha(opacity=100);
    border-radius: 10px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background: #1f2944 url("img/f2-bg.png?20191219") no-repeat center
}

.f2-bg1 {
    background-position: 0 0
}

.f2-bg2 {
    background-position: 0 -364px
}

.f2-bg3 {
    background-position: 0 -728px
}

.f2-bg4 {
    background-position: 0 -1092px
}

.f2-item-hide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    -moz-box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.f2-items>li:hover .f2-bg {
    margin-top: -6px;
    filter: alpha(opacity=1);
    opacity: 1
}

.f2-items>li:hover .f2-item-hide {
    margin-top: -6px;
    filter: alpha(opacity=100);
    opacity: 1
}

.f2-hide-qr {
    height: 180px;
    width: 180px;
    margin: 68px auto 0;
    background: url("img/f2-qr.png?20191219") no-repeat center
}

.f2-hide-qr1 {
    background-position: 0 0
}

.f2-hide-qr2 {
    background-position: 0 -190px
}

.f2-hide-qr3 {
    background-position: 0 -380px
}

.f2-hide-qr4 {
    background-position: 0 -570px
}

.f2-hide-t {
    margin-top: 34px;
    font-weight: 700;
    font-size: 22px;
    color: #595961;
    letter-spacing: 0;
    text-align: center
}

.f2-btn {
    display: block;
    width: 160px;
    height: 40px;
    margin: 88px auto 0;
    font-size: 16px;
    color: #FFF;
    line-height: 40px;
    text-align: center;
    background: #2689ff;
    border-radius: 4px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.f2-btn:hover {
    background-color: #1668c9
}

.f3-wrap {
    height: 800px;
    background: url('img/bg.png') center no-repeat;
    background-size: cover
}

.f3-wrap .switch-carousel-nav>li {
    width: 300px
}

.f3-arrow {
    position: absolute;
    top: 360px;
    width: 50px;
    height: 50px;
    z-index: 10;
    background: url('img/arrow_active.png') center no-repeat
}

.f3-arrow-left {
    left: 18px;
    background-position: 0 0
}

.f3-arrow-right {
    right: 18px;
    background-position: 0 -70px
}

.f3-arrow:hover {
    background: url('img/arrow.png') center no-repeat
}

.f3-arrow-left:hover {
    background-position: 0 0
}

.f3-arrow-right:hover {
    background-position: 0 -70px
}

.f4-details {
    width: 390px;
    margin-left: 30px;
    margin-top: 114px;
    overflow: hidden;
    text-align: left
}

.f5-details {
    width: 320px;
    float: left;
    margin-left: 10px;
    color: #595961
}

.f5-details,.f5-tab {
    overflow: hidden
}

.f5-details .m-tab>li {
    font-size: 18px;
    color: #595961;
    letter-spacing: 2px;
    line-height: 31px;
    padding-left: 20px;
    padding-right: 20px;
    background: #e7e8ec;
    border-radius: 10px
}

.f5-img,.f10-img,.f11-img,.f12-img {
    float: left
}

.f5-img .m-img,.f11-img .m-img,.f12-img .m-img,.f14-img .m-img {
    height: 654px
}

.f6-details {
    width: 360px;
    float: left;
    margin-left: 30px;
    color: #595961;
    overflow: hidden
}

.f6-swiper {
    position: relative;
    float: left;
    height: 654px;
    width: 780px
}

.f6-items {
    position: relative;
    width: 100%;
    height: 100%
}

.f6-items>li {
    position: absolute;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.07)
}

.f6-items>li>img {
    display: block;
    width: 100%;
    height: 100%
}

.f6-items .f6-item0 {
    width: 218px;
    height: 348px;
    left: 21px;
    top: 155px;
    z-index: 5;
    opacity: .2;
    filter: alpha(opacity=20)
}

.f6-items .f6-item1 {
    width: 231px;
    height: 368px;
    top: 145px;
    left: 101px;
    z-index: 7;
    opacity: .4;
    filter: alpha(opacity=40)
}

.f6-items .f6-item2 {
    width: 242px;
    height: 386px;
    top: 136px;
    left: 181px;
    z-index: 9;
    opacity: .7;
    filter: alpha(opacity=70)
}

.f6-items .f6-item3 {
    width: 256px;
    height: 408px;
    top: 125px;
    left: 261px;
    z-index: 12;
    opacity: 1;
    filter: alpha(opacity=100)
}

.f6-items .f6-item4 {
    width: 242px;
    height: 386px;
    top: 136px;
    left: 356px;
    z-index: 8;
    opacity: .7;
    filter: alpha(opacity=70)
}

.f6-items .f6-item5 {
    width: 230px;
    height: 368px;
    top: 145px;
    left: 448px;
    z-index: 6;
    opacity: .4;
    filter: alpha(opacity=40)
}

.f6-items .f6-item6 {
    width: 218px;
    height: 348px;
    left: 542px;
    top: 156px;
    z-index: 5;
    opacity: .2;
    filter: alpha(opacity=20)
}

.f6-items .f6-item7,.f6-item8,.f6-item9,.f6-item10,.f6-item11 {
    width: 218px;
    height: 348px;
    left: 542px;
    top: 156px;
    z-index: 4;
    opacity: 0;
    filter: alpha(opacity=0)
}

.f6-nav {
    position: absolute;
    top: 572px;
    width: 206px;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: 0 auto;
    text-align: center
}

.f6-nav ul li {
    list-style: none;
    float: left;
    width: 10px;
    height: 6px;
    background-color: #6d6d80;
    margin-right: 16px;
    margin-top: 10px;
    opacity: .2;
    filter: alpha(opacity=20)
}

.f6-nav ul li.active {
    opacity: 1;
    filter: alpha(opacity=100)
}

.leftbut,.rightbut {
    position: absolute;
    width: 44px;
    height: 66px;
    background: url(img/button_icon.png) center no-repeat;
    top: 294px;
    z-index: 10;
    cursor: pointer;
    border-radius: 4px
}

.leftbut {
    background-position: 0 0;
    left: 0
}

.rightbut {
    background-position: 0 -152px;
    right: 0
}

.f6-swiper .leftbut:hover {
    background-position: 0 -76px
}

.f6-swiper .rightbut:hover {
    background-position: 0 -228px
}

.f7-img,.f14-img {
    float: left
}

.f7-details,.f12-details {
    width: 320px;
    float: left;
    margin-left: 10px;
    color: #595961;
    overflow: hidden
}

.f7-details .m-tab>li,.f12-details .m-tab>li {
    background: #e7e8ec;
    border-radius: 10px
}

.f13-bx,.f13-fc,.f13-fd,.f13-gw,.f13-hq,.f13-hs,.f13-jd,.f13-jr,.f13-jy,.f13-jz,.f13-ktv,.f13-lf,.f13-ly,.f13-mj,.f13-more,.f13-mr,.f13-qc,.f13-sc,.f13-sh,.f13-ws,.f13-wy,.f13-xx,.f13-xy,.f13-yd,.f13-ylmr,.f13-zb,.f13-zx {
    background-image: url('img/zhan2.png');
    background-repeat: no-repeat
}

.f13-bx {
    background-position: 0 0;
    height: 142px;
    width: 142px
}

.f13-fc {
    background-position: 0 -147px
}

.f13-fc,.f13-fd {
    height: 142px;
    width: 142px
}

.f13-fd {
    background-position: 0 -294px
}

.f13-gw {
    background-position: 0 -441px
}

.f13-gw,.f13-hq {
    height: 142px;
    width: 142px
}

.f13-hq {
    background-position: 0 -588px
}

.f13-hs {
    background-position: 0 -735px
}

.f13-hs,.f13-jd {
    height: 142px;
    width: 142px
}

.f13-jd {
    background-position: 0 -882px
}

.f13-jr {
    background-position: 0 -1029px
}

.f13-jr,.f13-jy {
    height: 142px;
    width: 142px
}

.f13-jy {
    background-position: 0 -1176px
}

.f13-jz {
    background-position: 0 -1323px
}

.f13-jz,.f13-ktv {
    height: 142px;
    width: 142px
}

.f13-ktv {
    background-position: 0 -1470px
}

.f13-lf {
    background-position: 0 -1617px
}

.f13-lf,.f13-ly {
    height: 142px;
    width: 142px
}

.f13-ly {
    background-position: 0 -1764px
}

.f13-mj {
    background-position: 0 -1911px
}

.f13-mj,.f13-more {
    height: 142px;
    width: 142px
}

.f13-more {
    background-position: 0 -2058px
}

.f13-mr {
    background-position: 0 -2205px
}

.f13-mr,.f13-qc {
    height: 142px;
    width: 142px
}

.f13-qc {
    background-position: 0 -2352px
}

.f13-sc {
    background-position: 0 -2499px
}

.f13-sc,.f13-sh {
    height: 142px;
    width: 142px
}

.f13-sh {
    background-position: 0 -2646px
}

.f13-ws {
    background-position: 0 -2793px
}

.f13-ws,.f13-wy {
    height: 142px;
    width: 142px
}

.f13-wy {
    background-position: 0 -2940px
}

.f13-xx {
    background-position: 0 -3087px
}

.f13-xx,.f13-xy {
    height: 142px;
    width: 142px
}

.f13-xy {
    background-position: 0 -3234px
}

.f13-yd {
    background-position: 0 -3381px
}

.f13-yd,.f13-ylmr {
    height: 142px;
    width: 142px
}

.f13-ylmr {
    background-position: 0 -3528px
}

.f13-zb {
    background-position: 0 -3675px
}

.f13-zb,.f13-zx {
    height: 142px;
    width: 142px
}

.f13-zx {
    background-position: 0 -3822px
}

.lst-f13>li {
    display: inline-block;
    margin-right: -10px;
    margin-top: -14px
}

.f13-bg {
    background: url('img/zhan2_bg.png') center center no-repeat;
    height: 646px;
    background-size: cover
}

.g-mr60 {
    margin-right: 60px
}

.cases-f1-wrap {
    width: 100%;
    height: 500px;
    background-color: #393f4e
}

.cases-ban {
    overflow: hidden;
    height: 100%;
    background: url('img/ban.png')center no-repeat;
    background-size: cover
}

.cases-bgc {
    background: #f1f2f5
}

.cases-f2-items {
    overflow: hidden;
    margin: auto;
    width: 1200px
}

.cases-f2-items>li {
    float: left;
    margin: 66px 15px 96px;
    width: 270px;
    height: 420px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 20px 0 rgba(28,39,60,.12)
}

.sales-7-items>li {
    margin-bottom: 60px
}

.cases-f2-img {
    display: block;
    height: 324px;
    background: url('img/f2-img.png')center no-repeat
}

.cases-f2-img1 {
    background-position: 0 0
}

.cases-f2-img2 {
    background-position: 0 -335px
}

.cases-f2-img3 {
    background-position: 0 -670px
}

.cases-f2-img4 {
    background-position: 0 -1005px
}

.cases-item-show {
    border-radius: 16px
}

.cases-item-show,.cases-item-hide {
    height: 100%;
    background: #fff;
    overflow: hidden
}

.cases-item-hide {
    position: absolute;
    top: -1px;
    left: 0;
    opacity: 0;
    border-radius: 14px;
    filter: alpha(opacity=0);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.cases-item-hide:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cases-f2-qr {
    display: block;
    margin: 30px auto 18px;
    height: 140px;
    width: 140px;
    background: url('img/f2-qr01.png') center no-repeat
}

.cases-f2-qr1 {
    background-position: 0 0
}

.cases-f2-qr2 {
    background-position: 0 -150px
}

.cases-f2-qr3 {
    background-position: 0 -300px
}

.cases-f2-qr4 {
    background-position: 0 -450px
}

.cases-f2-line {
    display: block;
    margin: 16px auto 0;
    width: 20px;
    height: 3px;
    background: #595961
}

.cases-f2-txt {
    margin-top: 22px;
    font-size: 14px;
    color: #9797a1;
    letter-spacing: 0;
    padding: 0 24px;
    text-align: justify
}

.cases-f3-items {
    margin: 54px auto 46px;
    width: 1150px;
    overflow: hidden
}

.cases-f3-items>li {
    float: left;
    margin: 0 10px 20px;
    width: 210px;
    height: 266px
}

.cases-f3-qr {
    display: block;
    margin: 0 auto 24px;
    width: 140px;
    height: 140px;
    background: url('img/f3-qr.png?20191006') center no-repeat;
    -webkit-transform: scale(.9,.9);
    -moz-transform: scale(.9,.9);
    -ms-transform: scale(.9,.9);
    -o-transform: scale(.9,.9);
    transform: scale(.9,.9);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.cases-f3-items>li:hover .cases-f3-qr {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1)
}

.cases-f3-qr1 {
    background-position: 0 0
}

.cases-f3-qr10 {
    background-position: 0 -150px
}

.cases-f3-qr2 {
    background-position: 0 -300px
}

.cases-f3-qr3 {
    background-position: 0 -450px
}

.cases-f3-qr4 {
    background-position: 0 -600px
}

.cases-f3-qr5 {
    background-position: 0 -750px
}

.cases-f3-qr6 {
    background-position: 0 -900px
}

.cases-f3-qr7 {
    background-position: 0 -1050px
}

.cases-f3-qr8 {
    background-position: 0 -1200px
}

.cases-f3-qr9 {
    background-position: 0 -1350px
}

.popup-wrap {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 16;
    display: none;
    background: url('img/bg01.png');
    background-size: 100% 100%
}

.popup-carousel-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1000px;
    height: 563px;
    z-index: 18
}

.popup-swiper-container {
    height: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden
}

.popup-swiper-wrapper>li {
    font-size: 50px;
    line-height: 554px;
    color: #fff;
    text-align: center
}

.pageNum {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    margin: auto;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #FFF;
    letter-spacing: 2px;
    opacity: .38;
    background: #1d1b1b;
    border-radius: 6px;
    z-index: 20
}

.arrow-left {
    left: 42px;
    background: url('img/left.png') no-repeat center
}

.arrow-left,.arrow-right {
    position: absolute;
    top: 237px;
    width: 90px;
    height: 90px;
    opacity: .3
}

.arrow-right {
    right: 42px;
    background: url('img/right.png') no-repeat center;
    text-align: center
}

.popup-customer {
    display: none
}

.popup-close-btn {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 60px;
    height: 60px;
    z-index: 30;
    background: url('img/close.png')
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (-moz-min-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {
    .f2-hide-qr {
        background-image: url("img/f2-qr@2x.png?20191219")
    }

    .f2-hide-qr,.f2-bg {
        background-size: 100% auto
    }

    .f2-bg {
        background-image: url("img/f2-bg@2x.png?20191219")
    }

    .leftbut,.rightbut {
        background-image: url('img/button_icon@2x.png');
        background-size: 100% auto
    }

    .cases-ban {
        background-image: url('img/ban@2x.png');
        background-size: cover
    }

    .cases-f2-img {
        background-image: url('img/f2-img@2x.png');
        background-size: 100% auto
    }

    .cases-f3-qr {
        background-image: url('img/f3-qr@2x.png?20191006');
        background-size: 100% auto
    }

    .arrow-left {
        background-image: url('img/left@2x.png');
        background-size: 100% auto
    }

    .arrow-right {
        background-image: url('img/right@2x.png');
        background-size: 100% auto
    }

    .popup-popup-close {
        background-image: url('img/close@2x.png');
        background-size: 100% auto
    }

    .f3-arrow {
        background-image: url('img/arrow_active@2x.png');
        background-size: 100% auto
    }

    .f3-arrow:hover {
        background-image: url('img/arrow@2x.png');
        background-size: 100% auto
    }
}

@media screen and (min-width:600px) and (max-width:1300px) {
    .search-popup .company {
        position: absolute;
        text-align: center;
        width: 100%;
        top: 42%;
        font-size: 18px
    }
}

.search-popup .area {
    position: absolute;
    top: 50%;
    color: #2a3d6b;
    padding: 0 60px;
    line-height: 26px
}

.search-popup .search-notice {
    width: 370px;
    margin: 20% auto;
    padding: 20px 20px 1px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    z-index: 2;
    box-sizing: border-box
}

.search-popup .search-notice .close-btn {
    border: 1px solid #e3e2e5
}

.search-popup .close-btn {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    font-size: 18px;
    z-index: 2;
    margin: 20px auto;
    color: #595961
}

.search-popup .close-btn:hover {
    background: #f1f1f1
}

@media screen and (min-width:1600px) {
    .popup-customer {
        display: block;
        bottom: -50px;
        right: 0;
        position: absolute
    }

    .popup-customer-link {
        color: #fff;
        text-decoration: underline;
        padding-bottom: 2px;
        position: relative;
        z-index: 8;
        color: rgba(255,255,255,.7);
        animation: buss2Txt infinite 2s;
        -moz-animation: buss2Txt infinite 2s;
        -webkit-animation: buss2Txt infinite 2s;
        -o-animation: buss2Txt infinite 2s
    }

    .popup-customer-in {
        width: 40px;
        height: 40px;
        background-image: url('img/hand.png');
        background-size: 100% auto;
        position: absolute;
        right: -30px;
        top: 10px;
        z-index: 9;
        animation: buss2 infinite 2s;
        -moz-animation: buss2 infinite 2s;
        -webkit-animation: buss2 infinite 2s;
        -o-animation: buss2 infinite 2s
    }

    .popup-customer-back {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: rgba(255,255,255,.1);
        z-index: 7;
        right: 5px;
        top: 0;
        animation: buss2Back infinite 1s;
        -moz-animation: buss2Back infinite 2s;
        -webkit-animation: buss2Back infinite 2s;
        -o-animation: buss2Back infinite 2s
    }
@keyframes buss2 {
    0%{right: -30px;
        top: 10px
    }

    50% {
        right: -24px;
        top: 5px;
        transform: rotate(-5deg)
    }

    100% {
        right: -30px;
        top: 10px
    }
}

@keyframes buss2Back {
    0% {
        background-color: rgba(255,255,255,.1)
    }

    50% {
        background-color: rgba(255,255,255,.3);
        transform: scale(2)
    }

    100% {
        background-color: rgba(255,255,255,.1)
    }
}

@keyframes buss2Txt {
    0% {
        color: rgba(255,255,255,.7)
    }

    50% {
        color: #fff
    }

    100% {
        color: rgba(255,255,255,.7)
    }
}}