/*tupian*/

.index-img {

    overflow: hidden;

    position: relative;

}



.index-img:before {

    position: absolute;

    transition: 0.3s;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.2);

    content: '';

    -webkit-transform: scale3d(3, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);

    transform: scale3d(3, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);

}



.index-img:hover:before {

    -webkit-transform: scale3d(3, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);

    transform: scale3d(3, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);

}



.imgh img {

    display: block;

    width: 100%;

    height: 100%;

}



li:hover .imgh img {

    transform: scale(1.1);

}





/*按钮*/

.mm {

    transition: .5s;

}



.mm:hover {

    transform: translateY(-5px);

}



.mm:before {

    pointer-events: none;

    position: absolute;

    z-index: -1;

    content: '';

    top: 100%;

    left: 5%;

    height: 10px;

    width: 90%;

    opacity: 0;

    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

    /* W3C */

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-transition-property: transform, opacity;

    transition-property: transform, opacity;

}



.mm:hover:before {

    opacity: 1;

}



a, img {

    transition: all ease-out .5s;

}



/*banner*/



.banner {

    transition-delay: .3s;

    width: 100%;

    height: 970px;

    position: relative;

    overflow: hidden;

}



.banner-box {

    width: 100%;

    height: 970px;

    margin: 0 auto;

}



.banner .swiper-slide {

    position: relative;

}



.banner .swiper-slide:nth-child(1) {

    background: url("../images/banner1.jpg") no-repeat center;

}



.banner .swiper-slide:nth-child(2) {

    background: url("../images/banner2.jpg") no-repeat center;

}



.banner .swiper-slide:nth-child(3) {

    background: url("../images/banner3.jpg") no-repeat center;

}



.banner .swiper-slide p {

    position: absolute;

    bottom: 20%;

    left: -200%;

    transform: translateX(0);

    opacity: 0;

    transition: all .6s;

}



.banner .swiper-slide:nth-child(3) p {

    bottom: 40%;

}



.banner .swiper-slide p img:first-child {

    transition: all .6s;

}



.banner .swiper-slide p img:nth-child(2) {

    transition: all .9s;

}



.banner .ani-slide p img {

    display: block;

}



.banner .ani-slide p,

.banner .ani-slide p img {

    transform: translateX(50px);

    left: 0;

    opacity: 1;

}





.banner-but {

    position: absolute;

    bottom: 0;

    left: 504px;

    width: 456px;

    height: 100px;

    background-color: rgba(30, 19, 78, .8);

    z-index: 2;

}



.banner-dian {

    left: 180px;

    top: 47px;

}



.banner-dian .swiper-pagination-bullet {

    background: #fff;

    width: 4px;

    height: 4px;

    margin-right: 32px;

}



.banner-dian .swiper-pagination-bullet-active {

    width: 6px;

    height: 6px;

    background: #fff;

}



.banner-l {

    background: url("../images/banner-L.png") no-repeat center;

    width: 8px;

    height: 14px;

    left: 47px;

    top: 44px;

    margin-top: 0;

    -webkit-background-size: 100%;

    background-size: 100%;

    transition: all ease-out .5s;

    cursor: pointer;

}



.banner-r {

    background: url("../images/banner-R.png") no-repeat center;

    width: 8px;

    height: 14px;

    left: 105px;

    top: 44px;

    margin-top: 0;

    -webkit-background-size: 100%;

    background-size: 100%;

    transition: all ease-out .5s;

    cursor: pointer;

}



.banner-but .swiper-button-next.swiper-button-disabled, .banner-but .swiper-button-prev.swiper-button-disabled {

    opacity: 1;

}



.banner-but .banner-l:hover {

    background: url("../images/banner-L2.png") no-repeat center;

    width: 23px;

    height: 14px;

}



.banner-but .banner-r:hover {

    background: url("../images/banner-R2.png") no-repeat center;

    width: 23px;

    height: 14px;

}





/*but*/

.but {

    width: 504px;

    height: 100px;

    background-color: #c2862b;

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: 2;

}



.but-a {

    background: url("../images/but.png") no-repeat center;

    width: 18px;

    height: 40px;

    margin: 20px auto;

    display: block;

    -webkit-animation: hang linear 2s infinite;

    cursor: pointer;

}



@-webkit-keyframes hang {

    0%, 100% {

        -webkit-transform: translateY(20px);

    }

    50% {

        -webkit-transform: translateY(0);

    }

}



.title {

    display: block;

    background: url("../images/tit1.png") no-repeat center top;

    width: 296px;

    height: 142px;

    line-height: 1;

    box-sizing: border-box;

    padding-top: 106px;

    font-size: 30px;

    color: #444444;

    text-align: center;

    margin: 0 auto;

}





/*duct-box*/

.duct-box {

    margin: 67px 0 60px;

    overflow: hidden;

}



.duct {

    width: 89%;

    margin: 40px auto 0;

    position: relative;

}



.duct-list {

    width: 100%;

    position: relative;

}



.duct-list li {

    width: 33.3%;

    position: relative;

    float: left;

    overflow: hidden;

}



.duct-list li .duct-img {

    display: block;

    width: 100%;

    height: 430px;

    overflow: hidden;

}



.duct-list li .duct-img img {

    display: block;

    width: 100%;

    height: 100%;

}



.duct-list li:hover .duct-img img {

    transform: scale(1.1);

}



.duct-list li .duct-desc {

    width: 100%;

    height: 430px;

    background-color: #fafafa;

    text-align: center;

    line-height: 1;

    position: relative;

    overflow: hidden;

}



.duct-list li .duct-desc:before {

    content: '';

    position: absolute;

    top: 10px;

    left: 10px;

    transition: all ease-out .5s;

    transform: scale(0);

    width: 546px;

    height: 410px;

    border: solid 1px #fff;

    pointer-events: none;

}



.duct-list li:hover .duct-desc:before {

    transform: scale(1);

}



.duct-list li .duct-desc a {

    display: block;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    padding-top: 175px;

    font-size: 24px;

    color: #333;

    box-sizing: border-box;

    padding-left: 20px;

    padding-right: 20px;

}



.duct-list li:hover .duct-desc a {

    padding-top: 140px;

}



.duct-list li .duct-desc span {

    display: block;

    margin: 19px auto 20px;

    width: 40px;

    height: 2px;

    background-color: #1e134e;

}



.duct-list li .duct-desc i {

    display: block;

    font-family: ArialMT;

    font-size: 14px;

    color: #333;

    opacity: 0.58;

    margin-bottom: 30px;

}



.duct-list li .duct-desc p {

    width: 365px;

    margin: 0 auto;

    font-size: 14px;

    line-height: 28px;

    color: #777777;

    overflow: hidden;

    height: 140px;

    transition: all ease-out .7s;

    transform: translateY(300px);

}



.duct-list li:hover .duct-desc p {

    transform: translateY(0);

}



.duct-list li.d1,

.duct-list li.d2 {

    width: 66.3%;

}



.duct-list li.d1 .duct-img,

.duct-list li.d2 .duct-img {

    width: 50%;

    float: left;

}



.duct-list li.d1 .duct-desc,

.duct-list li.d2 .duct-desc {

    width: 50%;

    float: left;

}



.duct-list li.d2 .duct-img {

    float: right;

}



.duct-list li.d3 {

    width: 33.7%;

    top: 0;

    right: 0;

    position: absolute;

}



.dl, .dr {

    position: absolute;

    cursor: pointer;

    width: 80px;

    height: 100px;

    transition: all .5s ease-out;

    top: 45%;

}



.dl {

    background: url("../images/pl.jpg") no-repeat center;

    left: -80px;

}



.dl:hover {

    background: url("../images/pl-2.jpg") no-repeat center;

}



.dr {

    background: url("../images/pr.jpg") no-repeat center;

    right: -80px;

}



.dr:hover {

    background: url("../images/pr-2.jpg") no-repeat center;

}



/*case-box*/



.case-box {

    background: url("../images/case-bg.jpg") no-repeat center;

    height: 1390px;

    box-sizing: border-box;

    padding-top: 80px;

}



.t2 {

    background: url("../images/tit2.png") no-repeat center;

    width: 450px;

    margin: 0;

    text-align: left;

    color: #fff;

}



.case-ban {

    width: 100%;

    height: 500px;

    margin-top: 60px;

    position: relative;

}





.slideBox {

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: relative;

}



.slideBox .hd {

    width: 100%;

    height: 75px;

    overflow: hidden;

    position: absolute;

    left: 50%;

    transform: translate(-50%);

    bottom:0;

    z-index: 1;

    text-align: center;

}



.slideBox .hd ul {

    zoom: 1;

    text-align: center;

}



.slideBox .hd ul li {

    display: inline-block;

    margin: 0 10px;

    line-height: 1;

    cursor: pointer;

    position: relative;

    font-size: 14px;

    padding: 0 5px;

}

.slideBox .hd ul li a{

    color: #ccc;

}

.slideBox .hd ul li:before{

    content: '';

    background: url("../images/c-line.png") no-repeat center;

    height: 0;

    width: 7px;

    position: absolute;

    bottom: -62px;

    left: 50%;

    transform: translate(-50%);

    transition: all ease-out .5s;

}

.slideBox .hd ul li.on a{

    font-size: 16px;

    color: #fff;

}

.slideBox .hd ul li.on:before{

    height: 52px;

}

.slideBox .bd {

    position: relative;

    height: 100%;

    z-index: 0;

}



.slideBox .bd li {

    zoom: 1;

    vertical-align: middle;

    width: 100%;

    height: 100%;

}



.slideBox .bd img {

    width: 100%;

    height: 100%;

    display: block;

}



.cl, .cr {

    position: absolute;

    cursor: pointer;

    width: 50px;

    height: 60px;

    transition: all .5s ease-out;

    top: 50%;

    z-index: 2;

    cursor: pointer;

}



.cl {

    background: url("../images/cl.jpg") no-repeat center;

    left: 0;

}



.cl:hover {

    background: url("../images/cl-2.jpg") no-repeat center;

}



.cr {

    background: url("../images/cr.jpg") no-repeat center;

    right: -0;

}



.cr:hover {

    background: url("../images/cr-2.jpg") no-repeat center;

}



.case{

    width: 100%;

    margin-top: 30px;

    position: relative;

}



.case .case-list{

    width: 100%;

    height: auto;

}



.case .case-list li{

    width: 33.3%;

    height: 320px;

    position: relative;

    overflow: hidden;

    z-index: 0;

}



.case .case-list li .case-img,

.case .case-list li .case-img img{

    display: block;

    width: 100%;

    height: 100%;

}



.case .case-list li:before{

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0;

    background: #1e134e;

    transition: all ease-out .5s;

    z-index: 0;

    pointer-events: none;

}



.case .case-list li:hover:before{

    height: 100%;

}



.case .case-list li .case-name{

    display: block;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    line-height: 1;

    box-sizing: border-box;

    padding: 149px 20px 0;

    color: #fff;

    font-size: 24px;

    position: absolute;

    left: 0;

    top: 0;

    text-align: center;

    width: 100%;

    opacity: 0;

}



.case .case-list li:hover .case-name{

    padding-top: 96px;

    opacity: 1;

}



.case .case-list li i{

    display: block;

    background: url("../images/sousuo.png") no-repeat center;

    width: 46px;

    height: 46px;

    position: absolute;

    top: 150px;

    left: 50%;

    margin-left: -23px;

    transition: all ease-out .7s;

    transform: translateY(300px);

}



.case .case-list li:hover i{

    transform: translateY(0);

}



.case .case-list li p{

    box-sizing: border-box;

    padding: 0 20px;

    line-height: 1;

    text-align: center;

    font-size: 14px;

    color: #ffffff;

    opacity: 0.7;

    width: 100%;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    position: absolute;

    bottom: 30px;

    left: 0;

    transition: all ease-out .9s;

    transform: translateY(100px);

}



.case .case-list li:hover p{

    transform: translateY(0);

}





.case-dian{

    bottom: -50px !important;

    left: 0;

    width: 100%;

}

.case-dian .swiper-pagination-bullet-active {

    opacity: 1;

    background: #fff;

}

.case-dian .swiper-pagination-bullet{

    width: 14px;

    height: 14px;

    border: solid 1px rgba(255,255,255,.8);

    box-sizing: border-box;

    border-radius: 50%;

    margin: 0 5px;

}





.case-zi{

    margin-top: 134px;

    width: 100%;

    text-align:center;

    line-height: 1;

}



.case-zi .case-i{

    display: block;

    background: url("../images/c-zitit.png") no-repeat center;

    width: 563px;

    height: 127px;

    margin: 0 auto;

}



.case-zi p{

    font-size: 20px;

    color: #999999;

    margin: 49px 0 30px;

}

.case-zi span{

    display: block;

    margin: 0 auto;

    width: 54px;

    height: 2px;

    background-color: #ffffff;

}



/*about-box*/

.about-box{

    background: url("../images/about-bg.jpg") no-repeat center;

    height: 920px;

    overflow: hidden;

    padding-top: 558px;

    box-sizing: border-box;

}



.about-da{

    background: url("../images/about-zi.png") no-repeat center;

    height: 356px;

    width: 700px;

    position: absolute;

    right: 28px;

    top: -422px;

    z-index: 2;

}

.about-name{

    background: url("../images/aa1.png") no-repeat center;

    width: 582px;

    height: 154px;

    top: -250px;

    left: 132px;

    position: absolute;

}



.about-name2{

    background: url("../images/aa2.png") no-repeat center;

    width: 740px;

    height: 160px;

    top: -250px;

    right: 202px;

    position: absolute;

}





.about-desc{

    margin: 0 auto 60px;

    font-size: 24px;

    line-height: 48px;

    color: #333333;

    width: 1175px;

    text-align: center;

    height: 144px;

    overflow: hidden;

}

.about-more{

    display: block;

    margin: 0 auto;

    color: #fff;

    background: url("../images/about-more.png") no-repeat center;

    width: 180px;

    height: 50px;

    line-height: 50px;

    padding-left: 47px;

    box-sizing: border-box;

    font-family: ArialMT;

    font-size: 14px;

}



/*new-box*/

.new-box{

    background: url("../images/new-bg.jpg") no-repeat center bottom;

    padding-top: 59px;

    height: 1263px;

    box-sizing: border-box;

}



.t3{

    background: url("../images/tit-3.png") no-repeat center;

    width: 423px;

    height: 142px;

    margin: 0;

    text-align: left;

}

.new{

    padding-top: 48px;

    width: 100%;

}

.new li:first-child{

    margin-left: 0;

}

.new li{
    float: left;
    width: 450px;
    margin-left: 25px;
}



.new li .new-img{
    display: block;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.new li span{

    display: block;

    width: 100%;

    line-height: 1;

    color: #1e134e;

    font-family: ArialMT;

    font-size: 16px;

    margin: 31px 0 29px;

    position: relative;

    transition: all ease-out .5s;

    box-sizing: border-box;

    padding-right: 35px;

}

.new li span:before{

    content: '';

    position: absolute;

    right: 20px;

    top: 0;

    background: url("../images/new-j.png") no-repeat center;

    width: 0;

    height: 100%;

    transition: all ease-out .5s;

}

.new li:hover span:before{

    width: 6px;

}

.new li span i{

    font-family: Arial-BoldMT;

    font-weight: bold;

}

.new li .new-name{

    display: block;

    height: 35px;

    line-height: 1;

    font-size: 16px;

    color: #333;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    width: 100%;

}



.new li:hover .new-name{

    transform: translateX(5px);

}



.new li  b{

    display: block;

    width: 30px;

    height: 1px;

    background-color: #cccccc;

    transition: all ease-out .5s;

}

.new li:hover b{

    background-color: #1e134e;

    width: 100%;

}



.new li p{
    width: 100%;
    font-size: 14px;
    line-height: 30px;
    color: #888888;
    overflow: hidden;
    height: 60px;
    margin-top: 18px;
}





.new-list{

    width: 100%;

    height: 380px;

    background-color: #1e134e;

    margin-top: 60px;

    box-sizing: border-box;

    padding: 60px 0 0 99px;

}



.new-list-t{

    color: #fff;

    line-height: 1;

    font-family: Arial-BoldMT;

    font-size: 60px;

    font-weight: bold;

}



.new-li{

    margin-top: 35px;

}

.new-li li:nth-child(2n+1){

    margin-left: 0;

}

.new-li li:nth-child(5),

.new-li li:nth-child(6){

    border: none;

}

.new-li li{

    width: 540px;

    margin-left: 119px;

    float: left;

    line-height: 60px;

    height: 60%;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(255,255,255,.2);

}

.new-li li .newL{

    display: block;

    width: 75%;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    color: #ccc4ee;

    position: relative;

    padding-left: 16px;

    box-sizing: border-box;

    background: url("../images/new-dd.png") no-repeat 0 center;

}

.new-li li:hover .newL{

    background: url("../images/new-d.png") no-repeat 0 center;

    transform: translateX(5px);

    color: #fff;

}



.new-li li span{

    font-size: 14px;

    color: #ccc4ee;

    transition: all ease-out .5s;

}

.new-li li:hover span{

    color: #fff;

}

.new-more{

    display: block;

    box-sizing: border-box;

    padding-left: 47px;

    font-family: ArialMT;

    font-size: 14px;

    color: #333;

    background: url("../images/new-more.png") no-repeat center;

    width: 180px;

    height: 50px;

    line-height: 50px;

    margin: 70px auto 0;

}



/*coop-box*/

.coop-box{

    margin-top: 60px;

}



.t4{

    background: url("../images/tit4.png") no-repeat center;

    width: 424px;

    height: 141px;

    text-align: left;

    margin: 0;

}

.coop{

    margin-top: 40px;

    height: 320px;

    background: url("../images/coop-b.png") no-repeat center;

}

.coop li:nth-child(5n+1){

    margin-left: 0;

}

.coop li{

    float: left;

    margin: 0 0 20px 21px;

    transition: all ease-out .5s;

    width: 260px;

    height: 150px;

    background-color: #ffffff;

    position: relative;

    overflow: hidden;

}

.coop li:hover{

    box-shadow: 0px 0px 14px 0px

    rgba(51, 51, 51, 0.15);

}
.coop li a{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.coop li a img{

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    max-width: 100%;

    max-height: 100%;

    transition: all ease-out.5s;

    filter: grayscale(100%);

}



.coop li:hover img{

    filter: grayscale(0);cursor:pointer;

    transform: scale(1.1);

}



/*touch-box*/

.touch-box{

    margin: 40px 0 59px;

    overflow: hidden;

}



.touch{

    background: url("../images/touch-bg.jpg") no-repeat center;

    height: 440px;

    width: 1530px;

    margin: 0 auto;

    box-sizing: border-box;

    line-height: 1;

    color: #fff;

    padding: 104px 0 0 355px;

}



.touchL .tou1{

    font-size: 48px;

    letter-spacing: 1px;

    font-weight: bold;

}

.touchL .tou2{

    font-size: 36px;

    font-weight: bold;

    margin: 27px 0 30px;

}

.touchL .tou3{

    font-size: 16px;

}

.touchL .tou4{

    font-family: ArialMT;

    font-size: 30px;

    margin: 20px 0 40px;

}

.touchL .tou5{

    font-family: ArialMT;

    font-size: 16px;

    opacity: 0.5;

}





.touchR{

    margin: 63px 100px 0 0;

}



.touch-a{

    padding-left: 48px;

    font-size: 14px;

    color: #444444;

    padding-top: 5px;

    display: block;

    height: 38px;

}



.touch-a i{

    display: block;

    width: 110px;

    height: 28px;

    background-color: #ffffff;

    border-radius: 14px;

    text-align: center;

    line-height: 28px;

    transition: all ease-out .5s;

}

.touch-a:hover{

    transform: translateY(-5px);

}

.touch-a1{

    background: url("../images/tou-qq.png") no-repeat 0 center;

    margin-bottom: 30px;

}

.touch-a2{

    background: url("../images/tou-wei.png") no-repeat 0 center;

    transition: all ease-out .5s;

}



.touch-a2 .tou-wea{

    position: absolute;

    bottom: -90px;

    left: 50%;

    width: 90px;

    height: 90px;

    margin-left: -45px;

    transition: all ease-out .5s;

    opacity: 0;

}

.touch-a2:hover .tou-wea{

    opacity: 1;

}