/* ==================== tags ==================== */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    line-height: 1.6;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 40px;
}

h3{
    font-size: 24px;
}
h4 {
    font-size: 20px;
}
p {
    font-size: 16px;
    line-height: 1.75;
}
a,a:link,a:visited ,a:hover{
    text-decoration: none !important;
    color:inherit;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.pc{
    display: block;
}
.mobile{
    display: none;
}
.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    overflow: hidden;
}
.txt1{
    color: #333;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
}
/* banner */
#banner{
    position: relative;
    background: url("../image/bannerbg14.jpg") no-repeat center center;
    height: 506px;
    background-size: cover;
    overflow: hidden;
}
#banner .fl{
    margin-left: 64px;
    margin-top: 114px;
}
.t_b{
    display: block;
    width: 251px;
    height: 32px;
    line-height: 32px;
    color: #001a39;
    background: #00b2ff;
    border-radius: 18px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 38px;
    margin-left: 10px;
}
#banner .txt1{
    color: #fff;
    font-size: 28px;
    padding-top: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 1.6;
}
#banner .txt1 span{
    color: #00ffc6;
}
#banner .b_group{
    margin-left: 10px;
}

.btn{
    position: relative;
    width:302px;
    height: 45px;
    /*border: none;*/
    /*background: #6f61aa;*/
    background: rgba(0,87,192,.5);
    border: 1px solid #009de1;
    cursor: pointer;
    margin-top: 40px;
}
.btn p{
    display: block;
    position: relative;
    color: #fff;
    font-size: 18px;
    line-height:45px;
    outline: none;
}
.b_group a:last-child .btn{
    line-height: 45px;
    margin-left: 42px;
}
.btn:hover{
    border: none;
    background: #0090ff;
}

.img3{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -34px 0 0 -26px;
    z-index: 100;
}



#banner .pba{
    position: relative;
    width: 320px;
    height: 320px;
    margin-right: 85px;
    margin-top: 95px;
}
.dot {
    position: relative;
    width:292px;
    height:292px;
    background: rgba(0, 157, 125,0.28);
    border-radius: 50%;
    animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    animation-duration: 3s;/*动画持续时间*/
    animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    animation-delay: 0s;/*动画延迟时间*/
    animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    animation-direction: alternate;/*定义动画方式*/
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 3s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
}
.dot1 {
    position: absolute;
    top:20px;
    left: 20px;
    margin:0 auto;
    width:252px;
    height:252px;
    background: rgba(0,157,225,0.51);
    border-radius: 50%;
    animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    animation-duration: 3s;/*动画持续时间*/
    animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    animation-delay: 1s;/*动画延迟时间*/
    animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    animation-direction: alternate;/*定义动画方式*/
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 3s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 1s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
}
.dot2 {
    position: absolute;
    top:40px;
    left: 40px;
    margin:0 auto;
    width:212px;
    height:212px;
    background: rgba(0,157,225,1);
    border-radius: 50%;
    z-index: 12;

}
.dot3 {
    position: absolute;
    top:62px;
    left: 62px;
    margin:0 auto;
    width:168px;
    height:168px;
    background: rgba(0,157,225,1);
    border: 2px solid #00ffff;
    border-radius: 50%;
    z-index: 13;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {

        transform: scale(1);
    }
}
.t_1{
    text-align: center;
    color: #fff;
}
#sect1{
    background: url("../image/sect1bg4.png") no-repeat center center;
    height: 725px;
    background-size: cover;
    margin: 0 auto;
    text-align: center;
 }
#sect1 h2,#sect2 h2,#sect4 h2{
    color: #01499e;
    padding: 80px 0 25px;
}
.img1{
    margin-left: 185px;
    margin-top: 80px;
}
#sect1 .fr {
    display: block;
    width: 442px;
    text-align: justify;
    margin-top: 80px;
    margin-right: 185px;
}
.h_line{
    height:2px;
    border:none;
    border-top:2px dotted #a0a0a0;
}
.txt2 span{
    color: #009de1;
}

p.txt3:before{
    content: url("../image/s2.png");
}
p.txt3:after{
    content: url("../image/s11.png");
    margin-left: 404px;
}

#sect2{
    margin: 0 auto;
    height: auto;
    text-align: center;
    overflow: hidden;
}
#sect2 .btn,#sect4 .btn{
    margin-bottom: 100px;
    border: 1px solid #005aff;
    background: none;
}
#sect2 .btn p,#sect4 .btn p{
    color: #005aff;
}
#sect2 .btn:hover,#sect4 .btn:hover{
    background: #005aff;
    border: none;
}
#sect2 .btn:hover p,#sect4 .btn:hover p{
    color: #fff;
}
#sect2 .swiper-pagination{
    width: 100%;
    height: 52px;
    background: url("../image/linebg.png") no-repeat center center !important;
    margin-top: 40px;
    top: 0;
}
#sect2 .swiper-pagination-bullet {
    width: 287px;
    height: 52px;
    display: inline-block;
    border-radius: 0;
    background: none;
    opacity: 0;
}
#sect2 .swiper-pagination-bullet-active {
    opacity: 1;
    /*background: url("../images/s2-101.png") no-repeat;*/
}
#sect2 .swiper-pagination-bullet-active:first-child img{
    margin-left: -31px;
}
#sect2 .swiper-pagination-bullet-active:last-child img{
    margin-left: 6px;
}
#sect2 .swiper-slide{
    height: 696px;
    overflow: hidden;
    margin-top: 120px;
    margin-bottom: 80px;
}
.s1 .swiper-pagination-bullet {
    position: relative !important;
    width: 145px !important;
    height: 140px !important;
    display: inline-block;
    border-radius:0 !important;
    /*background: url("../images/sect3_h01.png") no-repeat !important; */
    background: none !important;
    opacity: 1 !important;
    margin: 0 25px !important;
}
#sect3{
    background: url("../image/sect3bg4.png") no-repeat center center;
    height: 885px;
    background-size: cover;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
#sect3 h2{
    color: #fff;
    padding: 80px 0 25px;
}
#sect3 .txt1{
    color: #fff;
    padding-bottom: 55px;
}
#sect3 .btn{
    border: 1px solid #fff;
    background: none;
    margin-top: 100px;
}
#sect3 .btn:hover{
    background: #fff;
    border: none;
}
#sect3 .btn:hover p{
    color: #208dce;
}

#sect4{
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
#sect4 ul{
    overflow: hidden;
    margin: 0 auto;
    margin-top: 70px;
}
#sect4 ul li{
    position: relative;
    float: left;
    width: 377px;
    height: 247px;
    margin-right: 34px;
}

#sect4 ul li:last-child{
    margin-right: 0;
}
#sect4 .b_group{
    margin-top: 88px;
}
.fadeout{
    position: relative;
}
.fadeout .tp{
    position: absolute;
    z-index: 10;
    right: 18px;
    top: 200px;
}
.fadeout .tp .fl,.fadeout .tp .fr{
    display: block;
    background: #fff;
    border-radius: 5px;
    padding: 0 2px;
    text-align: center;
    color: #00163f;
}
.fadeout .tp .fl{
    margin-right: 5px;
}
.fadein{
    position: absolute;
    top:130%;
    width: 377px;
    height: 247px;
    background: rgba(0,22,63,.8);
}
.fadein .tb{
    /*width: 340px;*/
    height: 170px;
    margin: 0 auto;
    margin: 25px 15px;
}
.fadein .tb h4{
    text-align: left;
    color: #fff;
    font-size: 20px;
    padding-bottom: 15px;
}
.fadein .tb p{
    text-align: left;
    color: #fff;
    font-size: 20px;
}
.fadein .tb p span{
    color: #00e3ff;
}
.tb_1{
    padding-left: 20px;
}
.tb_2{
    position: relative;
}
.tb_2:after{
    position: absolute;
    content: url("../image/m1.png");
    top:4px;
    margin-left: 10px;
}
.h1{
    border-top:1px solid #a0a0a0;
}
@media (max-width:768px) {
    .pc{
        display: none;
    }
    .mobile{
        display: block;
    }
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 28px;
    }

    h3{
        font-size: 22px;
    }
    h4 {
        font-size: 18px;
    }
    p {
        font-size: 16px;
        line-height: 1.75;
    }
    .txt1{
        padding: 0 5%;
        font-size: 20px;
        text-align: justify;
    }
    #banner{
        position: relative;
        background: url("https://www.digiwin.com/project/xinwu/images/bannerbg_h.png") no-repeat center center;
        height: 597px;
        background-size: cover;
        overflow: hidden;
    }
    #banner .fl{
        float: none;
        margin-left: 0;
    }
    #banner .ximg{
        margin-left: 5%;
    }
    .ptitle {
        width: 80%;
        font-size: 16px;
        margin-left: 5%;
    }
    #banner .txt1 {
        color: #fff;
        font-size: 24px;
        padding-top: 5px;
        text-align: left;
        padding-left: 6%;
    }
    .b_group{
        text-align: center;
    }
    .btn{
        margin: 0 auto;
        margin-top:30px;
    }
    .b_group a:last-child .btn {
        line-height: 45px;
        margin-left: 0;
    }
    #banner .fr{
        float: none;
    }
    #banner .pba{
        position: relative;
        width: 155px;
        height: 155px;
        margin: 0 auto;
    }
    .dot {
        position: relative;
        width:155px;
        height:155px;
        background: rgba(54, 44, 96,0.28);
        border-radius: 50%;
        animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
        animation-duration: 3s;/*动画持续时间*/
        animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        animation-delay: 0s;/*动画延迟时间*/
        animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
        animation-direction: alternate;/*定义动画方式*/
        -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
        -webkit-animation-duration: 3s;/*动画持续时间*/
        -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        -webkit-animation-delay: 0s;/*动画延迟时间*/
        -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
        -webkit-animation-direction: alternate;/*定义动画方式*/
    }
    .dot1 {
        position: absolute;
        top:20px;
        left: 20px;
        margin:0 auto;
        width:252px;
        height:252px;
        background: rgba(54,44,96,0.51);
        border-radius: 50%;
        animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
        animation-duration: 3s;/*动画持续时间*/
        animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        animation-delay: 1s;/*动画延迟时间*/
        animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
        animation-direction: alternate;/*定义动画方式*/
        -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
        -webkit-animation-duration: 3s;/*动画持续时间*/
        -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        -webkit-animation-delay: 1s;/*动画延迟时间*/
        -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
        -webkit-animation-direction: alternate;/*定义动画方式*/
    }
    .dot2 {
        position: absolute;
        top:40px;
        left: 40px;
        margin:0 auto;
        width:212px;
        height:212px;
        background: rgba(54,44,96,.78);
        border-radius: 50%;
        z-index: 12;

    }
    .dot3 {
        position: absolute;
        top:62px;
        left: 62px;
        margin:0 auto;
        width:168px;
        height:168px;
        background: rgba(54,44,96,0.95);
        border: 2px solid #6f61aa;
        border-radius: 50%;
        z-index: 13;
    }
}