@charset "utf-8"; /* CSS Document */
body {
    max-width: 750px;
    background: #ffffff;
}

.swiper-pagination-bullet {
    opacity: 1;
}

.no-animate {
    opacity: 0;
}

@-webkit-keyframes fadeInDown2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-50%,0);
        transform: translate3d(0,-50%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-50%,0);
        transform: translate3d(0,-50%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown2 {
    -webkit-animation-name: fadeInDown2;
    animation-name: fadeInDown2
}

@-webkit-keyframes fadeInLeftDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftDown {
    -webkit-animation-name: fadeInLeftDown;
    animation-name: fadeInLeftDown
}

@-webkit-keyframes fadeInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp2 {
    -webkit-animation-name: fadeInUp2;
    animation-name: fadeInUp2
}

@-webkit-keyframes fadeOutUp2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }
}

@keyframes fadeOutUp2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }
}

.fadeOutUp2 {
    -webkit-animation-name: fadeOutUp2;
    animation-name: fadeOutUp2
}

@-webkit-keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft2 {
    -webkit-animation-name: fadeInLeft2;
    animation-name: fadeInLeft2
}

@-webkit-keyframes fadeInRight2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight2 {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2
}

@-webkit-keyframes fadeOutRight2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0)
    }
}

@keyframes fadeOutRight2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0)
    }
}

.fadeOutRight2 {
    -webkit-animation-name: fadeOutRight2;
    animation-name: fadeOutRight2
}

@-webkit-keyframes fadeInLeft3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0%,0,0);
        transform: translate3d(0%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0%,0,0);
        transform: translate3d(0%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft3 {
    -webkit-animation-name: fadeInLeft3;
    animation-name: fadeInLeft3
}

@-webkit-keyframes fadeInRight3 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight3 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight3 {
    -webkit-animation-name: fadeInRight3;
    animation-name: fadeInRight3
}

@-webkit-keyframes fadeInDown3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-60px,0);
        transform: translate3d(0,-60px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-60px,0);
        transform: translate3d(0,-60px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown3 {
    -webkit-animation-name: fadeInDown3;
    animation-name: fadeInDown3
}

@-webkit-keyframes fadeInHeight {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInHeight {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInHeight {
    -webkit-animation-name: fadeInHeight;
    animation-name: fadeInHeight
}

@-webkit-keyframes fadeInUp3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,30%,0);
        transform: translate3d(0,30%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp3 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,30%,0);
        transform: translate3d(0,30%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp3 {
    -webkit-animation-name: fadeInUp3;
    animation-name: fadeInUp3
}

@-webkit-keyframes fadeInwidth2 {
    0% {
        opacity: 0;
        width: 0%;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

@keyframes fadeInwidth2 {
    0% {
        opacity: 0;
        width: 0%;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

.fadeInwidth2 {
    -webkit-animation-name: fadeInwidth2;
    animation-name: fadeInwidth2
}

@-webkit-keyframes flip_x {
    0% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,-360deg);
        transform: perspective(4000px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(4000px) scale3d(.95,.95,.95);
        transform: perspective(4000px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(4000px);
        transform: perspective(4000px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip_x {
    0% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,-360deg);
        transform: perspective(4000px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(4000px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(4000px) scale3d(.95,.95,.95);
        transform: perspective(4000px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(4000px);
        transform: perspective(4000px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@-webkit-keyframes slideOutDown_s {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }

    50% {
        visibility: hidden;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px);
        opacity: 0;
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0,0px,0);
        transform: translate3d(0,0px);
        opacity: 1;
    }
}

@keyframes slideOutDown_s {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }

    50% {
        visibility: hidden;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
        opacity: 0;
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0,0px,0);
        transform: translate3d(0,0px,0);
        opacity: 1;
    }
}

.animated.fadeOutRight2 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.fadeInRight2 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.fadeInRight3 {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@keyframes flips {
    0% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,-180deg);
    }

    100% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,0deg);
    }
}

@keyframes flipright {
    0% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,180deg);
    }

    100% {
        -webkit-transform: perspective(4000px) rotate3d(0,1,0,0deg);
    }
}


.s_h_footer {
    padding-top: 0.1rem !important;
}



.foot {
    background: url(../images/foots_02.jpg) no-repeat center;
    height: 1.2rem;
    background-size: 100% 100%;
    margin-top: -1px;
}

.foot ul {
    display: grid;
    grid-template-columns: repeat(5,1fr);
}

.foot li {
    height: 1.2rem;
}

.foot li a {
    display: block;
    height: 100%;
}

.foot{/* width:93.75%; */background: #000;/* height:.94rem; */background-size:100% 100%;margin:0 auto;}
.foot li a{display:block;height:100%;background: url(/images/t1.png) no-repeat center top .28rem;background-size: .29rem auto;}
.foot li a::after{content:"首页";display:block;text-align:center;padding-top: .4rem;color:#fff;font-size:.2rem;}
.foot li:nth-child(2) a{background-image:url(/images/t2.png);}
.foot li:nth-child(2) a::after{content:"服务";}
.foot li:nth-child(3) a{background-image:url(/images/t3.png);}
.foot li:nth-child(3) a::after{content:"案例";}
.foot li:nth-child(4) a{background-image:url(/images/t4.png);}
.foot li:nth-child(4) a::after{content:"地址";}
.foot li:nth-child(5) a{background-image:url(/images/t5.png);}
.foot li:nth-child(5) a::after{content:"联系";}

.s_h_jiejue{width:100%;overflow:hidden;}








.main_w{padding:0 .4rem;}
.brin{width:100%;overflow:hidden;background:url(../images/sc.jpg) no-repeat center;height:5.22rem;background-size:100% auto;}
.ztnr{width:100%;overflow:hidden;}
.ztnr .tit{text-align:center;}
.ztnr .tit font{display:inline-block;background:url(../images/k1.png) no-repeat left center;background-size:.52rem auto;padding-left:0.77rem;height:0.55rem;color:#1786d3;font-size:0.36rem;margin-top:0.38rem;font-weight:bold;}
.ztnr .cnron{font-size:0.24rem;line-height:2;margin-top:0.2rem;padding-bottom:0.78rem;overflow:hidden;}
.ztnr .list{margin-top:.3rem;}
.ztnr .list ul{display:grid;grid-template-columns: repeat(2,1fr);gap: .4rem 0.8rem;}
.ztnr .list li{overflow:hidden;}
.ztnr .list li div{background:url(../images/k2.png) no-repeat center;background-size:cover;width:2.61rem;height:2.61rem;text-align:center;padding-top:0.8rem;box-sizing: border-box;font-size:0.24rem;color:#fff;margin:0 auto;}
.ztnr .list li p{color:#0c0307;font-size:0.22rem;margin-top:0.2rem;line-height:1.666;}
.ztnr .list2{margin-top:0.4rem;margin-bottom:0.4rem;}
.ztnr .list2 ul{display:grid;grid-template-columns: repeat(1,1fr);gap:0.2rem;}
.ztnr .list2 li{background:#d5eeff;overflow:hidden;border-radius:0.1rem;padding:0.08rem;padding-bottom:0.14rem;}
.ztnr .list2 li font{color:#fff;background:#1786d3;display:inline-block;padding:0.13rem 0.25rem;font-weight:bold;border-radius:0.1rem;font-size:0.24rem;}
.ztnr .list2 li p{color:#202020;font-size:0.22rem;line-height:1.65;margin-top:0.14rem;padding:0 0.15rem;min-height:0.65rem;}
.ztnr .list li:nth-child(2) div{background-image:url(../images/k3.png);}
.ztnr .list li:nth-child(3) div{background-image:url(../images/k4.png);}
.ztnr .list li:nth-child(4) div{background-image:url(../images/k5.png);}