﻿.header .h-bg, .header .rt .li-3 .li-d {
    display: block;
}

.h1-title {
    color: #333333;
    font-size: 36px;
    text-align: center;
    margin: 3% 0;
}

/*banner上的文字*/
.ban-box {
    position: absolute;
    bottom: 16%;
    width: 76%;
    left: 12%;
    text-align: center;
}

.ban-box .banner_left {
    margin: 0 2% 0 0;
    width: 13%;
}

.ban-box .banner_left img {
    width: 100%;
}

.ban-box .banner_right {

    width: 83%;
    color: #FFFFFF;
    font-size: 24px;
    overflow: hidden;
}

.ban-box .banner_right h3 {
    font-size: 30px;
    margin: 0 0 4%;

}

.ban-box li {
    /*float: left;*/
    display: inline-block;
    overflow: hidden;
    margin: 0 0 2% 8%;
    width: 40%;
    text-align: left;

}



.ban-box li > div {
    float: left;
    display: inline-block;
}

/*定制化小程序解决方案*/
.line-box {
    /*width: 1200px;*/
    width: 63%;
    height: 700px;
    z-index: 8;
    opacity: 1;
    position: relative;
    margin: -5% auto 3%;
    overflow: hidden;
}

.line-box .tit {
    display: inline-block;
    position: absolute;
    width: 26px;
    height: 26px;
    background: url(../img/ico_07.png) no-repeat center;
    top: 50%;
    margin-top: -12px;
}

.line-box .line-fir {
    width: 45.3%;
    border: 1px dashed #ededed;
    border-radius: 50%;
    -webkit-animation: rotate 30s linear 0s infinite;
    animation: rotate 30s linear 0s infinite;
    position: relative;
    margin: 0 0 0 14.83%;
    top: 17.5%;
}

.line-box .line-fir .tit {
    right: -11px;
}

.line-box .line-fir.active {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.line-box .line-sec {
    width: 42.25%;
    border: 1px dashed #ededed;
    position: absolute;
    margin: 0 0 0 16.42%;
    top: 20%;
    border-radius: 50%;
    -webkit-animation: rotate 15s linear 0s infinite;
    animation: rotate 15s linear 0s infinite;
}

.line-box .line-sec .tit {
    left: -11px;
}

.line-box .line-sec.active {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}

.line-box .point-box {
    display: block;
    width: 151px;
    height: 51px;
    position: absolute;
    opacity: 1;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 51px;
}

.line-box h4 i {
    width: 53px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background: url("../img/xcxbg_03.png") no-repeat center;
    animation: rotate 5s linear 0s infinite;
}

.line-box h4 img {
    vertical-align: middle;
}

.line-box h4 {
    display: inline-block;
    width: 51px;
    height: 51px;
    position: absolute;
    left: 0;
    top: 0;
}

.point-box span {
    margin-left: 40px;
    color: #000;
    font-size: 16px;
}

.line-box .point-fir_01 {
    background-size: cover;
    left: 56%;
    top: 18%;
}

.line-box .point-fir_02 {
    background-size: cover;

    left: 59%;
    top: 27%;
}

.line-box .point-fir_03 {
    background-size: cover;
    left: 61%;
    top: 35%;
}

.line-box .point-fir_04 {
    background-size: cover;
    left: 63%;
    top: 45%;
}

.line-box .point-fir_05 {
    background-size: cover;
    left: 63%;
    top: 55%;
}

.line-box .point-fir_06 {
    background-size: cover;
    left: 62%;
    top: 65%;
}

.line-box .point-fir_07 {
    background-size: cover;
    left: 60%;
    top: 75%;
}

.line-box .point-fir_08 {
    background-size: cover;
    left: 57%;
    top: 84%;
}

.phone {
    position: absolute;
    top: 14%;
    left: 10%;

    width: 50%;
}

.phone img {
    width: 60%;

}

/*大屏幕*/
.b-phone {
    width: 800px;
    height: 730px;
    position: relative;
    margin: 50px auto 120px;
    background: url("../img/ui-phone-bg.png") no-repeat;
    background-position: 221px 0;
}

.b-phone .btn {
    display: block;
    width: 72px;
    height: 72px;
    position: absolute;
    top: 300px;
    z-index: 4;
}

.b-phone .btnleft {
    left: 60px;
}

.b-phone .btnright {
    right: 60px;
}

.swiper-container {
    position: absolute;
    width: 1770px;
    height: 570px;
    top: 0;
    left: -480px;
    margin: 51px auto 0;
    z-index: -1;
}

.swiper-container .swiper-slide {
    -webkit-transition: -webkit-filter 1.5s, filter 0.5s;
    transition: -webkit-filter 1.5s, filter 0.5s;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    text-align: center;
}

.swiper-container .swiper-slide img {
    width: 325px;
    height: 568px;
}

.swiper-container .swiper-slide-active {
    -webkit-filter: blur(0);
    filter: blur(0);
}

/*小屏幕*/
.s-phone {
    width: 320px;
    height: 580px;
    margin: 0 auto;
    background: url("../img/ui-phone-bg.png") no-repeat center;
    background-size: cover;
    background-position: 13px 0;
    overflow: hidden;
    display: none;
}

.s-phone .swiper-container2 {
    width: 262px;
    height: 458px;
    margin: 38px auto;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.s-phone .swiper-container2 img {
    width: 100%;
    height: 100%;
}

















