/* Above all are from animate.css by daneden http://daneden.me/animate/ */

.from-top {
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.from-left {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.from-right {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.from-bottom {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.from-top, .from-left {
    -webkit-animation: enter-clockwise 0.23s ease-out;
    -moz-animation: enter-clockwise 0.23s ease-out;
    -ms-animation: enter-clockwise 0.23s ease-out;
    animation: enter-clockwise 0.23s ease-out;
}

.from-right, .from-bottom {
    -webkit-animation: enter-anti-clockwise 0.23s ease-out;
    -moz-animation: enter-anti-clockwise 0.23s ease-out;
    -ms-animation: enter-anti-clockwise 0.23s ease-out;
    animation: enter-anti-clockwise 0.23s ease-out;
}

.to-top {
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.to-left {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.to-right {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.to-bottom {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.to-top, .to-left {
    -webkit-animation: leave-anti-clockwise 0.23s ease-out;
    -moz-animation: leave-anti-clockwise 0.23s ease-out;
    -ms-animation: leave-anti-clockwise 0.23s ease-out;
    animation: leave-anti-clockwise 0.23s ease-out;
}

.to-right, .to-bottom {
    -webkit-animation: leave-clockwise 0.23s ease-out;
    -moz-animation: leave-clockwise 0.23s ease-out;
    -ms-animation: leave-clockwise 0.23s ease-out;
    animation: leave-clockwise 0.23s ease-out;
}

@-webkit-keyframes enter-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(-90deg);
    }
    to {
        z-index: 3;
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes enter-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(-90deg);
    }
    to {
        z-index: 3;
        -moz-transform: rotate(0deg);
    }
}

@-ms-keyframes enter-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(-90deg);
    }
    to {
        z-index: 3;
        -ms-transform: rotate(0deg);
    }
}

@keyframes enter-clockwise {
    from {
        z-index: 3;
        transform: rotate(-90deg);
    }
    to {
        z-index: 3;
        transform: rotate(0deg);
    }
}

@-webkit-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(90deg);
    }
    to {
        z-index: 3;
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(90deg);
    }
    to {
        z-index: 3;
        -moz-transform: rotate(0deg);
    }
}

@-ms-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(90deg);
    }
    to {
        z-index: 3;
        -ms-transform: rotate(0deg);
    }
}

@keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        transform: rotate(90deg);
    }
    to {
        z-index: 3;
        transform: rotate(0deg);
    }
}

@-webkit-keyframes leave-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -webkit-transform: rotate(90deg);
    }
}

@-moz-keyframes leave-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -moz-transform: rotate(90deg);
    }
}

@-ms-keyframes leave-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -ms-transform: rotate(90deg);
    }
}

@keyframes leave-clockwise {
    from {
        z-index: 3;
        transform: rotate(0deg);
    }
    to {
        z-index: 3;
        transform: rotate(90deg);
    }
}

@-webkit-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -webkit-transform: rotate(-90deg);
    }
}

@-moz-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -moz-transform: rotate(-90deg);
    }
}

@-ms-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(0deg);
    }
    to {
        z-index: 3;
        -ms-transform: rotate(-90deg);
    }
}

@keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        transform: rotate(0deg);
    }
    to {
        z-index: 3;
        transform: rotate(-90deg);
    }
}

.boxa {
    width: 1200px;
    height: 560px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.boxa .dv {
    position: absolute;
    overflow: hidden;
}

.boxa .dv .p1 {
    color: #fff;
    font-size: 24px;
}

.boxa .dv .p2 {
    color: #31a4ff;
    font-size: 12px;
}

.boxa .dv img {
    position: absolute;
}

.boxa .dv .bg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.boxa .dv .con {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
}

.boxa .d1 .bg {
    background: #01003c url(../images/bg-box-5.png) bottom no-repeat;
    background-size: cover;
}

.boxa .d1 {
    width: 504px;
    height: 311px;
    left: 0;
    top: 0;
    z-index: 9;
}

.boxa .d1 p {
    margin-left: 55px;
}

.boxa .d1 .p1 {
    margin-top: 60px;
}

.boxa .d1 img {
    right: 35px;
    bottom: 6px;
}

.boxa .d2 .bg {
    background: #01003c url(../images/bg-box-2.png);
}

.boxa .d2 {
    width: 348px;
    height: 311px;
    left: 505px;
    top: 0;
    z-index: 9;
}

.boxa .d2 p {
    margin-left: 40px;
}

.boxa .d2 .p1 {
    margin-top: 40px;
}

.boxa .d2 img {
    right: 85px;
    bottom: 40px;
}

.boxa .d3 .bg {
    background: #01003c url(../images/bg-box-3.png);
}

.boxa .d3 {
    width: 346px;
    height: 224px;

    right: 0;
    bottom: 0;
    z-index: 9;
}

.boxa .d3 p {
    margin-left: 55px;
}

.boxa .d3 .p1 {
    margin-top: 40px;
}

.boxa .d3 img {
    right: 0;
    bottom: -20px;
}

.boxa .d4 .bg {
    background: #01003c url(../images/bg-box-4.png);
}

.boxa .d4 {
    width: 347px;
    height: 248px;
    left: 0;
    bottom: 0;
    z-index: 9;
}

.boxa .d4 p {
    margin-left: 45px;
}

.boxa .d4 .p1 {
    margin-top: 45px;
}

.boxa .d4 img {
    right: 44px;
    bottom: 40px;
}

.boxa .d5 .bg {
    background: #01003c url(../images/bg-box-5.png);
}

.boxa .d5 {
    width: 505px;
    height: 248px;
    left: 348px;
    bottom: 0;
    z-index: 9;
}

.boxa .d5 p {
    margin-left: 45px;
}

.boxa .d5 .p1 {
    margin-top: 50px;
}

.boxa .d5 img {
    right: 36px;
    bottom: 28px;
}

.boxa .d6 .bg {
    background: #01003c url(../images/bg-box-6.png);
}

.boxa .d6 {
    width: 346px;
    height: 335px;
    right: 0;
    top: 0;
    z-index: 9;
}

.boxa .d6 p {
    margin-left: 45px;
}

.boxa .d6 .p1 {
    margin-top: 45px;
}

.boxa .d6 img {
    right: 66px;
    bottom: 66px;
}

@media (max-width: 720px) {
    .h2 .line{
        display: none;
    }
    .boxa {
        width: 100%;
        height: 6.6rem;
    }

    .boxa .dv .p1 {
        font-size: .22rem;
    }

    .boxa .dv .p2 {
        font-size: .14rem;
    }

    .boxa .d1 .bg {
        background: #01003c url(../images/bg-box-5.png) bottom no-repeat;
        background-size: 127%;
    }

    .boxa .d1 {
        width: 3.9rem;
        height: 2.4rem;
    }

    .boxa .d1 p {
        margin-left: .3rem;
    }

    .boxa .d1 .p1 {
        margin-top: .35rem;
    }

    .boxa .d1 img {
        right: .65rem;
        bottom: -0.02rem;
        width: 42%;
    }

    .boxa .d2 .bg {
        background: #01003c url(../images/bg-box-2.png);
        background-size: 100%;
    }

    .boxa .d2 {
        width: 2.7rem;
        height: 2.4rem;
        left: 3.91rem;
        top: 0;
        z-index: 9;
    }

    .boxa .d2 p {
        margin-left: .3rem;
    }

    .boxa .d2 .p1 {
        margin-top: .3rem;
    }

    .boxa .d2 img {
        right: .68rem;
        bottom: 0.25rem;
        width: 50%;
    }

    .boxa .d3 .bg {
        background: #01003c url(../images/bg-box-3.png);
        background-size: 100%;
    }

    .boxa .d3 {
        width: 2.7rem;
        height: 1.9rem;
        left: 0;
        top: 2.41rem;
        z-index: 9;
    }

    .boxa .d3 p {
        margin-left: .3rem;
    }

    .boxa .d3 .p1 {
        margin-top: .3rem;
    }

    .boxa .d3 img {
        right: 0;
        bottom: -.2rem;
        width: 50%;
    }

    .boxa .d4 .bg {
        background: #01003c url(../images/bg-box-4.png);
        background-size: 100%;
    }

    .boxa .d4 {
        width: 3.9rem;
        height: 1.9rem;
        left: 2.71rem;
        top: 2.41rem;
        z-index: 9;
    }

    .boxa .d4 p {
        margin-left: .3rem;
    }

    .boxa .d4 .p1 {
        margin-top: .3rem;
    }

    .boxa .d4 img {
        right: .3rem;
        bottom: .13rem;
        width: 50%;
    }

    .boxa .d5 .bg {
        background: #01003c url(../images/bg-box-5.png);
        background-size: 100%;
    }

    .boxa .d5 {
        width: 3.45rem;
        height: 2.25rem;
        left: 0;
        top: 4.33rem;
        z-index: 9;
    }

    .boxa .d5 p {
        margin-left: .3rem;
    }

    .boxa .d5 .p1 {
        margin-top: .3rem;
    }

    .boxa .d5 img {
        right: .38rem;
        bottom: .36rem;
        width: 25%;
    }

    .boxa .d6 .bg {
        background: #01003c url(../images/bg-box-6.png);
        background-size: 100%;
    }

    .boxa .d6 {
        width: 3.15rem;
        height: 2.25rem;
        left: 3.46rem;
        top: 4.33rem;
        z-index: 9;
    }

    .boxa .d6 p {
        margin-left: .3rem;
    }

    .boxa .d6 .p1 {
        margin-top: .3rem;
    }

    .boxa .d6 img {
        right: .4rem;
        bottom: .4rem;
        width: 30%;
    }
}

.boxa .dv .cover {
    width: 100%;
    height: 100%;
    z-index: -1;
    padding: 1px;
    margin: -1px;
    background: #0a4f79;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
}

.boxa .dv:hover .cover {
    z-index: 99;
}

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

.boxb .dv {
    width: 567px;
    height: 160px;
    padding: 16px;
    background: url(../images/bg-boxbs.png) no-repeat center;
    float: left;
    cursor: pointer;
}

.boxb .dv:hover {
    background-image: url(../images/bg-boxb.png);
}

.boxb .dv .img {
    width: 72px;
    height: 73px;
    line-height: 71px;
    border-radius: 50%;
    background: #108bed;
    text-align: center;
    vertical-align: center;
    margin-left: 54px;
    margin-top: 40px;
    float: left;
}

.boxb .dv .img img {
    vertical-align: middle;
}

.boxb .dv .txt {
    width: 340px;
    float: left;
    margin-left: 25px;
    margin-top: 40px;
}

.boxb .dv .txt .p1 {
    font-size: 22px;
    color: #1d1d1d;
}

.boxb .dv .txt .p2 {
    color: #6d6d6d;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .boxb .dv {
        width: 50%;
        height: 1.3rem;
        padding: .08rem;
        box-sizing: border-box;
        background: none;
        margin-bottom: .3rem;
    }

    .boxb .dv:hover {
        background-image: none;
    }

    .boxb .dv .img {
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        background: #108bed;
        text-align: center;
        vertical-align: center;
        margin-left: 0;
        margin-top: .2rem;
        float: left;
        position: relative;
    }

    .boxb .dv .img img {
        vertical-align: middle;
        width: .6rem;
        height: .6rem;
        position: absolute;
        top: .05rem;
        left: .05rem;
    }

    .boxb .dv .txt {
        width: 2.1rem;
        float: left;
        margin-left: .2rem;
        margin-top: 0;
    }

    .boxb .dv .txt .p1 {
        font-size: .24rem;
        color: #1d1d1d;
    }

    .boxb .dv .txt .p2 {
        color: #6d6d6d;
        font-size: .18rem;
        line-height: 1.6;
    }
}

.ct {
    width: 100%;
    float: left;
    text-align: center;
}

.ct > div {
    display: inline-block;
    width: 195px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin: 10px;
    border-radius: 5px;
}

.ct .cc {
    background: #108bed;
    color: #fff;
}

.ct .cc a {
    color: #fff;
}

.ct .cs {
    background: #f6f6f6 url(../images/i-down.png) no-repeat 170px 50%;
    position: relative;
}

.ct .cs:hover .sb {
    display: block;
}

.ct .cs .sb {
    top: 40px;
    width: 100%;
    position: absolute;
    border-left: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
    background: #fff;
    z-index: 999;
    display: none;
}

.ct .cs .p2 {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f6f6f6;
}

@media (max-width: 720px) {

    .ct > div {
        display: inline-block;
        width: 1.9rem;
        height: .45rem;
        text-align: center;
        line-height: .45rem;
        margin: .1rem;
        font-size: .18rem;
        border-radius: 5px;
    }

    .ct .cs {
        background: #f6f6f6 url(../images/i-down.png) no-repeat 1.5rem 50%;
        background-size: auto .1rem;
        position: relative;
    }

    .ct .cs .sb {
        top: .45rem;
        width: 100%;
    }

    .ct .cs .p2 {
        height: .45rem;
        line-height: .45rem;
        border-bottom: 1px solid #f6f6f6;
    }

}

.case-rec li {
    padding: 15px;
    width: 33.3333333333%;
    float: left;
}

.case-rec li .tit {
    margin-top: 10px;
    padding: 0 15px;
}

.case-rec li .intro {
    margin-top: 10px;
    padding: 0 15px;
    font-size: 12px;
    color: #a0a0a0;
    white-space: nowrap;
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-rec li .img {
    width: 100%;
    float: left;
    overflow: hidden;
}

.case-rec li .img img {
    float: left;
    width: 376px;
    height: 251px;
}

.case-rec li .img img {
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}

.case-rec li .img img:hover {
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}

.case-rec li .txt {
    float: left;
    width: 100%;
    padding-bottom: 20px;
    background: url("../images/icon-more.png") right center no-repeat;
    background-position: 95% 50%;
}

.case-rec li:hover .txt {
    background-color: #0175BA;
    color: #fff;
    background-image: url("../images/icon-more-on.png");
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: bounceIn;
}

.case-rec li:hover .txt .intro {
    color: #fff;
}

@media (max-width: 720px) {

    .case-rec {
        margin-top: .8rem;
    }

    .case-rec {
        margin-top: .5rem;
        width: 6.88rem;
        margin-left: -.12rem;
    }

    .case-rec li {
        margin: .12rem;
        width: 3.18rem;
        height: 2.8rem;
        float: left;
        padding: 0;
        position: relative;

    }

    .case-rec li .img img {
        float: left;
        width: 3.2rem;
        height: 2.8rem;
    }

    .case-rec li .txt {
        float: left;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 0;
        height: .52rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .18rem;
        background-image: none;
        background: rgba(0, 0, 0, .5);
        text-align: center;
        color: #fff;
    }

    .case-rec li:hover .txt {
        color: #fff;
        background-image: none;
    }

}

.boxc {
    width: 100%;
    float: left;
    height: 320px;
}

.boxc .dv {
    width: 239px;
    border-right: 1px solid #fff;
    float: left;
    position: relative;
    height: 320px;
    overflow: hidden;
}

.boxc .dv .img img {
    width: 100%;
    height: 320px;
    float: left;
}

.boxc .dv .tit {
    width: 100%;
    background: #343434;
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.boxc .cover {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -240px;
    top: 0;
    z-index: 999;
    background: rgba(16, 139, 237, .9);
    color: #fff;
    text-align: center;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.boxc .dv:hover .cover {
    opacity: 1;
    left: 0;
}

.boxc .cover .p1 {
    font-size: 22px;
    height: 22px;
    line-height: 1;
    margin-top: 60px;
    margin-bottom: 40px;
}

.boxc .cover .p2 {
    width: 170px;
    margin: 0 35px;
    line-height: 2;
}

.boxc .cover .p3 {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 40px;
}

@media (max-width: 720px) {

    .boxc {
        width: 100%;
        float: left;
        height: auto;
    }

    .boxc .dv {
        width: 100%;
        border-right: none;
        float: left;
        position: relative;
        height: 2.5rem;
        overflow: hidden;
        margin-bottom: .28rem;
    }

    .boxc .dv .img img {
        width: 50%;
        float: left;
    }

    .boxc .dv .tit {
        display: none;
    }

    .boxc .cover {
        opacity: 1;
        width: 50%;
        height: 100%;
        left: 50.5%;
        top: 0;
    }
    
    .boxc .dv:nth-child(odd) .img img {
        float: right;
        width: 49.5%;
    }

    .boxc .dv:nth-child(odd) .cover {
        opacity: 1;
        width: 50%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .boxc .dv:hover .cover {
        opacity: 1;
        left: 50.5%;
    }
    .boxc .dv:nth-child(odd):hover .cover{
        left:0;
    }
    .boxc .cover .p1 {
        text-align: left;
        box-sizing: border-box;
        padding: 0;
        padding-left: .4rem;
        font-size: .24rem;
        height: .24rem;
        line-height: 1;
        margin: 0;
        margin-top: .4rem;
    }

    .boxc .cover .p2 {
        text-align: left;
        box-sizing: border-box;
        padding-left: 0;
        width: 100%;
        font-size: .18rem;
        line-height: 1.5;
        margin-left: 0;
        padding-right: .4rem;
        height: .5rem;
        overflow: hidden;
        padding-left: .4rem;
        margin-top: .2rem;
        clear: both;
        float: left;
    }

    .boxc .cover .p3 {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: .45rem;
        text-align: left;
        left: .4rem;
    }

    .boxc .cover .p3 img {
        width: 40%;
    }
}

.fw {
    width: 100%;
    float: left;
    height: 744px;
    background: url(../images/bg-fw.png);
}

.fw .tit {
    margin-top: 76px;
    font-size: 30px;
    text-align: center;
}

.fw .tit .cn {
    color: #108bed;
}

.fw .tit .cn em {
    color: #535353;
}

.fw .con {
    width: 1000px;
    padding: 85px 75px;
    height: 390px;
    position: relative;
    background: url(../images/bg-fw2.png) no-repeat center;

}

.fw .con .fl .p1 {
    color: #108bed;
    font-size: 24px;
}

.fw .con .fl .p2 {
    color: #108bed;
    font-size: 36px;
    height: 76px;
    line-height: 76px;
    background: url(../images/bg-fw-line.png) no-repeat bottom left;
}

.fw .con .fl .p3 {
    font-size: 12px;
    color: #3e3e3e;
    line-height: 2;
    margin-top: 36px;
}

.fw .con .fl .p4 {
    width: 100%;
    float: left;
    margin-top: 36px;
}

.fw .con .fl .p4 img {
    float: left;
}

.fw .con .fl .p4 .p4d {
    float: left;
    margin-top: 15px;
    line-height: 30px;
    margin-left: 20px;
    font-size: 13px;
}

.fw .con .fl .kfimg {
    position: absolute;
    left: 380px;
    top: 280px;

}

.fw .con .fr .p1 .s1 {
    font-size: 18px;
    color: #108bed;
}

.fw .con .fr .p1 .s2 {
    font-size: 12px;
    color: #6e6e6e;
}

.fw .con .fr .fi {
    width: 427px;
    height: 38px;
    border: 1px solid #efefef;
    margin: 5px 0;
    display: block;
}

.fw .con .fr .fi input,
.fw .con .fr .fi textarea {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 10px;
}

.fw .con .fr .fi.text {
    height: 105px;
}

.fw .con .fr .fi.submit {
    background: #108bed;
    color: #fff;
    text-align: center;
    line-height: 38px;
}

.fw .con .fr .fi.sel {
    display: table;

}

.fw .con .fr .fi.sel em {
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #efefef;
}

.fw .con .fr .fi.sel em.on {
    background: #108bed;
    color: #fff;
}

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

.flow .item {
    width: 240px;
    float: left;
    text-align: center;
    padding-bottom: 50px;
    background: url(../images/i-fw1.png) 220px 52px no-repeat;
}

.flow .item:nth-child(5) {
    background: url(../images/i-fw3.png) 50% 175px no-repeat;
}

.flow .item.i6,
.flow .item.i7,
.flow .item.i8,
.flow .item.i9,
.flow .item.i10 {
    float:right;
    background-image: url(../images/i-fw2.png);
}

.flow .item.i6 {
    background: none;
}

.flow .item .img {
    text-align: center;
    display: inline-block;
    width: 124px;
    height: 124px;
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    text-align: center;
    line-height: 124px;
    margin-bottom: 10px;
}

.flow .item .img img {
    vertical-align: middle;
}

@media(max-width:720px){

    .flow .item {
        width: 33.33%;
        float: left;
        text-align: center;
        margin:.25rem 0;
        background: none;
        padding:0;
        font-size: .18rem;
    }

    .flow .item:nth-child(5) {
        background:none;
    }

    .flow .item.i6,
    .flow .item.i7,
    .flow .item.i8,
    .flow .item.i9 {
        background-image:none;
        float:left;
    }

    .flow .item.i10 {
        background: none;
        display: none;
    }

    .flow .item .img {
        text-align: center;
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid #e9e9e9;
        border-radius: 50%;
        text-align: center;
        line-height: 1.25rem;
        margin-bottom: 10px;
    }

    .flow .item .img img {
        vertical-align: middle;
        width: .5rem;
    }
}

@media(max-width:720px){

    .fw {
        width: 100%;
        float: left;
        height: auto;
        background:none;
    }

    .fw .tit {
        margin-top: .8rem;
        font-size: .3rem;
        text-align: center;
    }

    .fw .tit .cn {
        color: #108bed;
    }

    .fw .tit .cn em {
        color: #535353;
    }

    .fw .con {
        width: 100%;
        padding: 0;
        height: auto;
        position: relative;
        background: none;

    }
    .fw .con .fl{
        width: 100%;
    }
    .fw .con .fl .p1 {
        color: #108bed;
        font-size: .3rem;
        text-align: center;
    }

    .fw .con .fl .p2 {
        color: #108bed;
        font-size: .3rem;
        height: .4rem;
        line-height: .4rem;
        background: none;
        text-align: center;
    }

    .fw .con .fl .p3 {
        font-size: .16rem;
        color: #3e3e3e;
        line-height: 2;
        margin-top: 36px;
        text-align: center;
    }

    .fw .con .fl .p4 {
        display: none;
    }

    .fw .con .fl .p4 img {
        float: left;
    }

    .fw .con .fl .p4 .p4d {
        float: left;
        margin-top: 15px;
        line-height: 30px;
        margin-left: 20px;
        font-size: 13px;
    }

    .fw .con .fl .kfimg {
        position: absolute;
        left: 380px;
        top: 280px;

    }
    .fw .con .fr{
        width: 100%;
        margin-top:.4rem;
    }
    .fw .con .fr .p1 .s1 {
        font-size: .2rem;
        color: #108bed;
        clear: both;
        width: 100%;
        display: block;
        text-align: center;
    }

    .fw .con .fr .p1 .s2 {
        font-size: .16rem;
        line-height: 2;
        color: #6e6e6e;
        clear: both;
        display: block;
        text-align: center;
    }

    .fw .con .fr .fi {
        font-size: .16rem;
        width: 100%;
        height: .5rem;
        border: 1px solid #efefef;
        margin: 5px 0;
        display: block;
    }
    .fw .con .fr .fi:nth-child(1),
    .fw .con .fr .fi:nth-child(2){
        width: 50%;
        float: left;
        box-sizing: border-box;
    }
    .fw .con .fr .fi:nth-child(1){
        padding-right:10px;
    }
    .fw .con .fr .fi input,
    .fw .con .fr .fi textarea {
        font-size: .16rem;
        border: none;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .fw .con .fr .fi.text {
        height: 1rem;
    }

    .fw .con .fr .fi.submit {
        background: #108bed;
        color: #fff;
        text-align: center;
        line-height: .55rem;
        height: .55rem;
    }

    .fw .con .fr .fi.sel {
        display: table;

    }

    .fw .con .fr .fi.sel em {
        cursor: pointer;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #efefef;
    }

    .fw .con .fr .fi.sel em.on {
        background: #108bed;
        color: #fff;
    }
}