/*-----------------[初始化]--------------*/

*,*:before,*:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    box-sizing: border-box;

    outline: none;

}

body{color: #3d3d3d;font-size: 12px;line-height: 1;font-family:"微软雅黑","Microsoft Yahei";

    }
.clearfix{zoom:1;}
.clearfix:before,.clearfix:after{display: table;line-height: 0;content: "";}
.clearfix:after{clear: both;}
img{max-width: 100%;

    transition: .5s;

    -ms-transition: .5s;

    -moz-transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}

input,textarea,select{font-size: 12px;color: #444;font-family:"微软雅黑","Microsoft Yahei";outline: 0;

}

input[type='submit'],input[type='reset'],input[type='button'],input[type='checkbox'],select{

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

input[type='submit'],input[type='reset'],input[type='button']{cursor: pointer;}

::-webkit-input-placeholder {color: #999;}

::-moz-placeholder {color: #999; }

::-ms-input-placeholder {color: #999;}

button{padding:0;border:0;cursor: pointer;}



h1,h2,h3,h4,h5{font-weight: normal;}



a{color:#333;}

a:hover{color:#026e9f;text-decoration: none;}





.wp{width: 1200px;margin: 0 auto;}





/* 头部 **************************************************/

.header{

    overflow: hidden;

}

.logo{

    float: left;

    max-width: 219px;

    line-height: 110px;

}

.logo img{

    display: inline-block;

    vertical-align: middle;

}

.hdr{

    float: right;

    width: 865px;

    overflow: hidden;

}

.nav li{

    float: left;

    width: 122px;

    margin-left: 1px;

}   

.nav a{

    display: block;

    text-align: center;

    font-size: 16px;

    color: #333;

    padding: 35px 0;

}

.nav a span{

    display: block;

    font-size: 14px;

    margin-top: 10px;

    color: #666;

    text-transform: uppercase;

}

.nav li.on a,

.nav a:hover{

    background-color: #e03636;

    color: #fff;

}

.nav li.on a span,

.nav a:hover span{

    color: #eee;

}

.hdr .tel{

    float: right;

    width: 224px;

    padding: 35px 0 32px 58px;

    font-size: 14px;

    color: #e03636;

    background: url(../images/tel.png) no-repeat left center;

}

.hdr .tel em{

    display: block;

    font-size: 24px;

    margin-top: 5px;

}

/* banner **************************************************/

.banner .item{

    display: block;

    height: 450px;

    background-repeat: no-repeat;

    background-position: center center;

    -webkit-background-size: cover;

    background-size: cover;

    text-align: center;

    position: relative;

}

.banner i{

    position: absolute;

    display: block;

    animation-duration:1.5s;

    -webkit-animation-duration:1.5s;

    animation-timing-function:linear;

    -webkit-animation-timing-function:linear;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

.banner .slick-active .i1{

    animation-name:ani1;

    -webkit-animation-name:ani1;

    animation-delay:.3s;

    -webkit-animation-delay:.3s;

}

.banner .slick-active .i2{

    animation-name:ani2;

    -webkit-animation-name:ani2;

    animation-delay:.5s;

    -webkit-animation-delay:.5s;

}

.banner .slick-active .i3{

    animation-name:ani3;

    -webkit-animation-name:ani3;

    animation-delay:.3s;

    -webkit-animation-delay:.3s;

    animation-duration:1s;

    -webkit-animation-duration:1s;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

}

.banner .slick-active .i4{

    animation-name:ani4;

    -webkit-animation-name:ani4;

    animation-delay:.3s;

    -webkit-animation-delay:.3s;

    animation-duration:.8s;

    -webkit-animation-duration:.8s;

    bottom: 0;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

}

.banner .slick-active .i5{

    animation-name:ani5;

    -webkit-animation-name:ani5;

    animation-delay:.5s;

    -webkit-animation-delay:.5s;

    z-index: 1;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

}

.banner .slick-active .i6{

    animation-name:ani6;

    -webkit-animation-name:ani6;

    

}

.banner .slick-active .i7{

    animation-name:ani7;

    -webkit-animation-name:ani7;

    

}

.banner .slick-active .i5 img,

.banner .slick-active .i6 img,

.banner .slick-active .i7 img{

    display: block;

    height: 450px;

}

@-webkit-keyframes ani1{

    0%{

        opacity: 0;

        transform:rotateY(0deg);

        left: 0;

    }

    25%{

        opacity: .3;

        transform:rotateY(90deg);

        left: 30%;

        top: 30px;

    }

    50%{

        opacity: 1;

        transform:rotateY(360deg);

        left: 35%;

        top: 50px;

    }

    

    100%{

        opacity: 1;

        transform:rotateY(360deg);

        left: 35%;

        top: 90px;

    }

}

@-webkit-keyframes ani2{

    0%{

        opacity: 0;

        transform:rotateY(0deg);

        right: 0;

    }

    25%{

        opacity: .3;

        transform:rotateY(90deg);

        right: 30%;

        bottom: 50px;

    }

    50%{

        opacity: 1;

        transform:rotateY(360deg);

        right: 40%;

        bottom: 80px;

    }

    100%{

        opacity: 1;

        transform:rotateY(360deg);

        right: 40%;

        bottom: 95px;

    }

}

@-webkit-keyframes ani3{

    0%{

        opacity: 0.5;

        top: 0;

        

    }

    25%{

        opacity: .6;

        top: 20px;

    }

    50%{

        opacity: 1;

        top: 30px;

    }

    

    100%{

        opacity: 1;

        top: 50px;

    }

}

@-webkit-keyframes ani4{

    0%{

        bottom: 0;

    }

    25%{

        bottom: 25px;

    }

    50%{

        bottom: 50px;

    }

    100%{

        bottom: 88px;

    }

}

@-webkit-keyframes ani6{

    0%{

        opacity: 0;

        left: -100%;

    }

    25%{

        opacity: .3;

        left: -50%;

    }

    50%{

        opacity: 1;

        left: -25%;

    }

    

    100%{

        opacity: 1;

        left: 0;

    }

}

@-webkit-keyframes ani7{

    0%{

        opacity: 0;

        right: -100%;

    }

    25%{

        opacity: .3;

        right: -50%;

    }

    50%{

        opacity: 1;

        right: -25%;

    }

    

    100%{

        opacity: 1;

        right: 0;

    }

}

.banner .slick-dots{position: absolute;left: 0;bottom: 30px;width: 100%;text-align: center;z-index: 1;}

.banner .slick-dots li{display: inline-block;margin: 0 4.5px;}

.banner .slick-dots li button{display: block;width: 17px;height: 17px;

    font-size: 0;line-height: 0;text-indent: 999px;background-color: #fff;border-radius: 50%;outline:none;

    border:none;cursor: pointer;

}

.banner .slick-dots li.slick-active button{background-color: #e03636;}

/* ban **************************************************/

.ban{

    height: 300px;

    background-repeat: no-repeat;

    background-position: center center;

}

/* 内容 **************************************************/

.g-tit3{

    position: relative;

    text-align: center;

    margin-bottom: 28px;

}

.g-tit3::before{

    content: '';

    position: absolute;

    top: 20px;

    left: 0;

    right: 0;

    height: 1px;

    background-color: #eeeeee;

}

.g-tit3 h3{

    position: relative;

    display: inline-block;

    font-size: 40px;

    padding: 0 36px;

    background-color: #fff;

    color: #333;

}

.g-tit3 span{

    display:block;  

    margin: 7px auto 0;

    font-size: 20px;

    color: #999;

    text-transform: uppercase;

}

.g-tit3 p{

    line-height: 15px;

    color: #ccc;

    padding: 10px 160px 0;

}

.g-more{

    display: block;

    margin: 40px auto 0; 

    width: 173px;

    height: 40px;

    line-height: 38px;

    font-size: 14px;

    color: #333;

    text-align: center;

    border: 1px solid #ccc;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

}

.g-more:hover{

    background-color: #e03636;

    border: 1px solid #e03636;

    color: #fff;

}

.main{

    overflow: hidden;

}

.ind-cases{

    padding: 43px 0 0;

}

.slick-cases{

    padding: 8px 0 0;

}

.slick-cases .slick-arrow{

    position: absolute;top: 28%;overflow: hidden;

    width: 42px;height: 42px;font-size: 0;line-height: 0;line-height: 999;

    background-repeat: no-repeat;

    background-position: center center;

    background-color: transparent;

    z-index: 1;

}

.slick-cases .slick-prev{left: -60px;background-image: url(../images/q-prev.png);}

.slick-cases .slick-next{right: -60px;background-image: url(../images/q-next.png);}

.slick-cases .slick-prev:hover{background-image: url(../images/q-prev_on.png);}

.slick-cases .slick-next:hover{background-image: url(../images/q-next_on.png);}

.m-imgbox1.box{

    margin-top: 12px;

    height: 397px;

}

.ind-step{

    height: 254px;

    background-color: #e03636;

}

.ul-step{

    overflow: hidden;

    margin: 0 -20px;

    padding: 36px 0 28px;

}

.ul-step li{

    float: left;

    width: 16.66%;

    position: relative;

    text-align: center;

}

.ul-step li::after{

    content: '';

    position: absolute;

    right: 0;

    top: 38%;

    width: 23px;

    height: 11px;

    background: url(../images/q-arrow.png) no-repeat center center;

}

.ul-step li:last-child::after{

    display: none;

}

.ul-step i{

    display: block;

    margin: 0 auto 15px;

    width: 134px;

    height: 154px;

    background-image: url(../images/q-p1.png);

    background-repeat: no-repeat;

}

.ul-step i.ico1{

    background-position: 0 0;

}

.ul-step i.ico2{

    background-position: -207px 0;

}

.ul-step i.ico3{

    background-position: -414px -6px;

}

.ul-step i.ico4{

    background-position: -621px -6px;

}

.ul-step i.ico5{

    background-position: -828px -6px;

}

.ul-step i.ico6{

    background-position: right -6px;

}

.ul-step p{

    font-size: 20px;

    color: #fff;

}

.ind-about{

    overflow: hidden;

}

.ind-about .col-l{

    width: 600px;

}

.ind-about .col-r{

    width: 510px;

}

.ind-about p{

    font-size: 14px;

    line-height: 32px;

    color: #333;

}

.ind-about .pic{

    width: 510px;

    height: 395px;

}

.ind-about .pic img{

    display: block;

    width: 100%;

    height: 100%;

}

.ind-care1{

    padding: 58px 0 0;

}

.ind-care1 .case-list{

    padding: 6px 0 0;

}

.ind-care1 .g-tit3 p{

    padding-top: 13px;

}

.ind-care1 .g-more{

    margin: 18px auto 48px;

}

.m-pic img{

    display: block;

    width: 100%;

    height: 400px;

}

.ind-care2{

    padding: 64px 0 48px;

}

.ind-care2 .g-tit3{

    margin-bottom: 36px;

}

.ind-care2 .g-tit3 p{

    padding-top: 12px;

}

.ind-care2 .g-more{

    margin: 0 auto;

}

.ind-about{

    padding: 45px 0;

}

/* 底部 **************************************************/

.h50{

    height: 50px;

}

.footer{

    background-color: #f2f2f2;

    text-align: center;

}

.fd-top{

    padding-bottom: 25px;

}

.ul-ensure{

    overflow: hidden;

    padding: 30px 0;

    border-bottom: 1px solid #ccc;

}

.ul-ensure li{

    float: left;

    width: 25%;

    overflow: hidden;

}

.ul-ensure .inner{

    display: inline-block;  

}

.ul-ensure i{

    display: inline-block;

    float: left;

    width: 64px;

    height: 64px;

    margin-right: 22px;

    background-repeat: no-repeat;

    background-position: center center;

}

.ul-ensure .txt{

    overflow: hidden;

    text-align: left;

}

.ul-ensure .txt h4{

    font-size: 20px;

    line-height: 24px;

    margin-bottom: 10px;

    color: #363636;

}

.ul-ensure .txt p{

    font-size: 14px;

}



.fd-nav{

    padding: 25px 0;

    text-align: center;

}

.fd-nav a{

    display: inline-block;

    font-size: 14px;

    color: #333;

    margin: 0 30px;

}

.fd-nav a:hover{

    color: #e03636;

}

.fd-top p,

.fd-top .mail a{

    font-size: 14px;

    color: #333;

}

.fd-top .mail a:hover{

    color: #e03636;

}

.fd-top .tel{

    font-size: 24px;

    margin: 25px 0 15px;

}

.footer .copy{

    line-height: 45px;

    font-size: 14px;

    text-align: center;

    background-color: #ddd;

    color: #333;

}