@charset "UTF-8";
/* ==================== 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("/project/zhiqi/images/bannerbg.png") no-repeat center center;
    height: 506px;
    background-size: cover;
    overflow: hidden;
}
#banner .fl{
    margin-left: 80px;
    margin-top: 76px;
}
.ptitle{
    display: block;
    width: 407px;
    height: 29px;
    line-height: 29px;
    color: #362c60;
    font-size: 20px;
    background: #f6f451;
    border-radius: 14.5px;
    text-align: center;
    margin-bottom: 38px;
}
#banner .txt1{
    color: #fff;
    font-size: 36px;
    padding-top: 20px;
    text-align: left;
}

.btn{
    position: relative;
    width:302px;
    height: 45px;
    /*border: none;*/
    /*background: #6f61aa;*/
    background: rgba(42,58,104,.8);
    border: 1px solid #6f61aa;
    cursor: pointer;
    margin-top: 30px;
}
.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: #6f61aa;
}

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

#banner .pb{
    margin-right: 85px;
    margin-top: 95px;
    width: 292px;
    height: 292px;
    position: relative;

}
.pb1{
    position: absolute;
    width: 292px;
    height: 292px;
    background: rgba(54,44,96,.28);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -146px 0 0 -146px;
    -webkit-animation: circle 3s ease-out  infinite;
    animation: circle 3s ease-out  infinite;
}
.pb2{
    position: absolute;
    width: 252px;
    height: 252px;
    background: rgba(54,44,96,.51);
    /*border: 1px solid #5a5173;*/
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -126px 0 0 -126px;
    -webkit-animation: circle 3s ease-out 1s infinite;
    animation: circle 3s ease-out 1s infinite;
}
.pb3{
    position: absolute;
    width: 210px;
    height: 210px;
    background: rgba(54,44,96,1);
    border: 1px solid #5a5173;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -105px 0 0 -105px;
    -webkit-animation: circle 3s ease-out 2s infinite;
    /*!* Safari and Chrome *!*/
    animation: circle 3s ease-out 2s infinite;
}
.pb4{
    position: absolute;
    width: 174px;
    height: 174px;
    background: rgba(54,44,96,1);
    border: 1px solid #4d427e;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -87px 0 0 -87px;

}
/*.img3{*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    margin: -24px 0 0 -13px;*/
/*}*/
@keyframes circle {
    /* Safari and Chrome */
    from{
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}
@-webkit-keyframes circle {
    /* Safari and Chrome */
    from{
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

#banner .pba{
    position: relative;
    width: 292px;
    height: 292px;
    margin-right: 85px;
    margin-top: 95px;
}
.dot {
    position: relative;
    width:292px;
    height:292px;
    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;
}

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

        transform: scale(1);
    }
}


#sect1{
    position: relative;
    background: url("/project/zhiqi/images/sect1bg.png") no-repeat center center;
    height: 976px;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
#sect1 h2,#sect2 h2,#sect4 h2{
    color: #362c60;
    padding: 80px 0 25px;
}
#sect1 .divbox{
    width: 906px;
    height: 135px;
    border: 1px solid #2a3a68;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
}
#sect1 .divbox img{
    margin-top: 44px;
    margin-left: 32px;
    margin-right: 32px;
}
#sect1 .divbox>p{
    display: block;
   padding-top: 25px;
    padding-right: 25px;
    text-align: justify;
    font-size: 16px;
    color: #2a3a68;
}
.img_s1{
    margin-top: 50px;
}

#sect2{
    position: relative;
    background: url("/project/zhiqi/images/sect2bg.png") no-repeat center center;
    height: 1778px;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
#sect2 .img1{
    margin: 40px auto;
}
#sect2 .play_b{
    background: url("/project/zhiqi/images/sect2-2.png") no-repeat center center;
    height: 523px;
    margin: 0 auto;
    margin-bottom: 38px;
    text-align: center;
}
#sect2 .play_b img{
    margin-top: 200px;
}
#sect2 .t_t1{
    height: 71px;
    background: url("/project/zhiqi/images/sect2-3.png") no-repeat center center;
    margin: 0 auto;
    text-align: center;

}
#sect2 .t_t1 p{
    color: #6f61aa;
    font-size: 24px;
    line-height: 62px;
    overflow: hidden;
}
#sect2 ul{
    margin: 0 auto;
    overflow: hidden;
    margin-top: 22px;
}
#sect2 ul li{
    float: left;
    width: 228px;
    height: 247px;
    margin-right: 15px;
    background: url("/project/zhiqi/images/sect2-4.png") no-repeat;
}
#sect2 ul li:nth-child(2){
    background: url("/project/zhiqi/images/sect2-5.png") no-repeat;
}
#sect2 ul li:nth-child(3){
    background: url("/project/zhiqi/images/sect2-6.png") no-repeat;
}
#sect2 ul li:nth-child(4){
    background: url("/project/zhiqi/images/sect2-7.png") no-repeat;
}
#sect2 ul li:last-child{
    background: url("/project/zhiqi/images/sect2-8.png") no-repeat;
    margin-right: 0;
}

#sect2 ul li h4{
    padding-top: 15px;
    padding-bottom: 25px;
    color: #5d7a2a;
}
#sect2 ul li:nth-child(2) h4{
    color: #8c541b;
}
#sect2 ul li:nth-child(3) h4{
    color: #494e90;
}
#sect2 ul li:nth-child(4) h4{
    color: #f05b71;
}
#sect2 ul li:last-child h4{
    color: #50b6c4;
}
#sect2 ul li span{
    font-size: 16px;
}
#sect2 ul li p{
    padding: 0 20px;
    text-align: justify;
}
#sect2 .b_group {
    margin-top: 40px;
}
#sect2 .b_group a:last-child .btn,
#sect4 .b_group a:last-child .btn {
    line-height: 45px;
    margin-left: 42px;
}
#sect2 .btn, #sect4 .btn {
    background: none;
    border: 1px solid #6f61aa;
}
#sect2 .btn:hover, #sect4 .btn:hover{
    background: #6f61aa;
    border: none;
}
#sect2 .btn p, #sect4 .btn p{
   color: #6f61aa;
}
#sect2 .btn:hover p, #sect4 .btn:hover p{
    color: #fff;
}
#sect3{
    position: relative;
    background: url("/project/zhiqi/images/sect3bg.png") no-repeat top center;
    height: 1500px;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;

}
#sect3 h2{
    color: #fff;
    padding: 80px 0 25px;
}
#sect3 .tit-box{
    position: relative;
    border: 1px solid #b6aae8;
    width: 343px;
    height: 45px;
    margin: 0 auto;
    margin-bottom: 50px;
}
.tit-box p{
    color: #fff;
    font-size: 24px;
    text-align: left;
    padding-left: 20px;
}
.tit-box p:after{
    content: url("/project/zhiqi/images/s4.png");
    position: absolute;
    top: 6px;
}
.s1_box{
    position: relative;
    height: 1021px;
    overflow:hidden;
}
.img4{
    position: absolute;
    left: 50%;
    margin-left: -557px;
}
#sect3 .s_b1{
    position: absolute;
    width: 160px;
    height: 160px;
    margin-top: 35px;
    margin-left: 556px;
    overflow: hidden;
    z-index: 16;
}
#sect3 .pb1{
    position: absolute;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    background: rgba(95,82,149,.4);
    -webkit-animation: circle 1s linear infinite;
    animation: circle 1s linear infinite;
}
#sect3 .pb2{
    position: absolute;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    background: rgba(74,63,122,.8);
    -webkit-animation: circle 1s linear 0.8s infinite;
    animation: circle 1s linear 0.8s infinite;
}
#sect3 .pb4{
    position: absolute;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
}
#sect3 .s_img4{
    position: absolute;
    width: 12px;
    height: 17px;
    margin: -8px 0 0 -6px;
    left: 50%;
    top: 50%;
}
#sect3 .s_b2{
    position: absolute;
    width: 160px;
    height: 160px;
    margin-top: 397px;
    margin-left: 532px;
    overflow: hidden;
    z-index: 16;
}
#sect3 .s_b2 .pb1{
    background: rgba(165,169,201,.3);
    box-shadow: 0 10px 0 0rgba(159,145,218,.6);
    border: 1px solid #fff;
}
#sect3 .s_b2 .pb2{
    background: rgba(107,104,147,.51);
    box-shadow: 0 0 10px 10px rgba(159,145,218,.6);
    border: 1px solid #fff;
}
#sect3 .s_b3{
    position: absolute;
    width: 160px;
    height: 160px;
    margin-top: 820px;
    margin-left: 135px;
    overflow: hidden;
    z-index: 16;
}
#sect3 .b_group{
    margin-top: 26px;
}
#sect3 .btn{
    background: none;
    border: 1px solid #fff;
}
#sect3 .btn:hover{
    background: #fff;
}
#sect3 .btn p{
    color: #fff;
}
#sect3 .btn:hover p{
    color: #6f61aa;
}

#sect4{
    position: relative;
    background: url("/project/zhiqi/images/sect4bg.png") no-repeat center center;
    height: 1270px;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
#sect4 .img_box{
    background: url("/project/zhiqi/images/sect4-1.png") no-repeat center center;
    height: 398px;
    margin-top: 50px;
    margin-bottom: 50px;
}
#sect4 .img_box h5{
    font-size: 20px;
    color: #333;
    text-align: left;
    padding-left: 92px;
    padding-top: 50px;
}
#sect4 .img_box p{
    font-size: 24px;
    color: #6f61aa;
    text-align: left;
    padding-left: 95px;
}
#sect4 .img2{
    margin-top: 70px;
    margin-left: 622px;
}
.ul_box{
    margin: 0 auto;
    overflow: hidden;
}
.ul_box li{
     float: left;
     width: 295px;
     height: 419px;
     background: url("/project/zhiqi/images/sect4-2.png") no-repeat;
     margin-right: 6px;
 }
.ul_box li:nth-child(2){
    background: url("/project/zhiqi/images/sect4-3.png") no-repeat;
}
.ul_box li:nth-child(3){
    background: url("/project/zhiqi/images/sect4-4.png") no-repeat;
}
.ul_box li:last-child{
    background: url("/project/zhiqi/images/sect4-5.png") no-repeat;
    margin-right: 0;
}
.ul_box li h5{
    color: #362c60;
    font-size: 16px;
    text-align: left;
    padding-top: 75px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 600;
}
.ul_box li:nth-child(2) h5{
    color: #8c541b;
}
.ul_box li:nth-child(3) h5{
    color: #48601f;
}
.ul_box li:last-child h5{
    color: #016a70;
}
.ul_box li p{
    color: #333;
    text-align: justify;
    padding: 0 30px;
    padding-top: 10px;
}
#sect4 .btn{
    margin-top: 0;
}
#sect1 h2 br,#sect2 h2 br,#sect4 h2 br,#sect4 .img_box br{
    display: none;
}
@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("/project/zhiqi/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%;
        margin-bottom: 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:5%;
    }
    .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:10px;
        left: 10px;
        margin:0 auto;
        width:135px;
        height:135px;
        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:20px;
        left: 20px;
        margin:0 auto;
        width:115px;
        height:115px;
        background: rgba(54,44,96,.78);
        border-radius: 50%;
        z-index: 12;

    }
    .dot3 {
        position: absolute;
        top:30px;
        left: 30px;
        margin:0 auto;
        width:95px;
        height:95px;
        background: rgba(54,44,96,0.95);
        border: 2px solid #6f61aa;
        border-radius: 50%;
        z-index: 13;
    }
    #sect1{
        background: url("/project/zhiqi/images/sect1bg_m.jpg") no-repeat center center;
        height: auto;
        background-size: cover;
    }
    #sect1 h2,#sect2 h2{
        padding: 15% 0 5%;
    }
    #sect1 h2 br,#sect2 h2 br{
        display: block;
    }
    #sect1 .divbox {
        width: 90%;
        height: auto;
        border: 1px solid #2a3a68;
        margin: 0 auto;
        margin-top: 40px;
        text-align: center;
    }

    .divbox .fl{
        float: none;
    }

    #sect1 .divbox img {
        margin: 0 auto;
        margin-top: 5%;
    }

    #sect1 .divbox>p {
        display: block;
        padding: 5%;
        text-align: justify;
        font-size: 16px;
        color: #2a3a68;
    }
    #sect1 .mobile{
        margin-top: 5%;
    }
    #sect1 .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 100%;
        background: #ddd9eb;
        opacity: .5;
    }
    #sect1 .swiper-pagination-bullet-active {
        opacity: 1;
        background: #6f61aa;
    }
    #sect2 {
        background: url("/project/zhiqi/images/sect2bg_m.png") no-repeat center center;
        height: auto;
        background-size: cover;
    }

    #sect2 .mobile{
        margin: 0 auto;
    }
    #sect2 .img1{
        margin: 5% auto;
    }
    #sect2 .b_group a:last-child .btn, #sect4 .b_group a:last-child .btn {
        line-height: 45px;
        margin-left: 0;
        margin-bottom: 8%;
    }
    #sect3{
        height: auto;
        background: #6f61aa;
        position: relative;
    }
    .c1{
        position: relative;
        height: auto;
        overflow: hidden;
    }
    .i2,.i8{
        position: absolute;
        right: 15%;
        top:9%;
        z-index: 10;
    }
    .i3,.i5{
        margin-top: 80px;
    }
    .i8{
        top:63%;
        right: 4%;
    }
    .dt{
        position: absolute;
        z-index: 12;
        text-align: justify;
        padding: 0 5%;
        margin-top: 5%;
    }
    .dt1{
        margin-top: 2%;
    }
    .dt h3,.dt1 h3{
        color: #fff1ba;
        font-size: 20px;

    }
    .dt p,.dt1 p{
        color:#fff;

    }
    .dt1 p{
        padding: 0 5%;
        text-align: justify;
    }
    #sect3 .b_group {
       margin-bottom: 8%;
    }
    #sect4{
        background: none;
        height: auto;
    }
    #sect4 h2 br,#sect4 .img_box br{
        display: block;
    }
    #sect4 .txt1{
        text-align: center;
    }
    #sect4 .img_box{
        background: none;
        height: auto;
    }
    #sect4 .img_box h5,#sect4 .img_box p{
        text-align: center;
        padding: 0;
    }
    .ul_box li {
        float: none;
        margin: 0 auto;
    }
    .ul_box li:last-child {
       margin: 0 auto;
    }
    #sect4 .b_group a:last-child .btn{
        margin-top: 5%;
    }
}