﻿.wrap .img_ad_list{ width: 1175px;height: 330px;border:1px solid #cecece}
.wrap .img_ad_list ul li{ float: left;width: 235px;height: 165px;border: 1px solid #cecece;border-right:0;margin-left: -1px;margin-top: -1px;}

.section02 .case_list ul li{ float: left;width: 20%;}
    .section02 .case_list ul li img { width:100%; height:auto;}
.case {
    display: block;
    z-index: 2;
    position: relative;
}

    .case:before {
        display: block;
        content: "";
        width: 100%;
        height: 550px;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
    }

    .case .Content {
        width: 98%;
        margin:0px auto;
    }

        .case .Content ul {
            width: 100%;
            display: block;
            font-size: 0;
        }

        .case .Content li {
            display: inline-block;
            width: 20%;
            position: relative;
            overflow: hidden;
        }

        .case .Content a {
            width: 100%;
        }

        .case .Content .Img {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

            .case .Content .Img img {
                width: 100%;
                height: auto;
                transform: scale(1);
            }

        .case .Content .Txt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: #000;
            background: rgba(0,0,0,.6);
            opacity: 0;
        }

            .case .Content .Txt span {
                font-size: 18px;
                color: #fff;
                display: block;
                width: 90%;
                margin: 0 auto;
                position: relative;
                top: 50%;
                margin-top: 0;
                opacity: 0;
                text-align: center;
                line-height: 50px;
                height: 50px;
                transform: translateY(-20px);
                -moz-transform: translateY(-20px);
                -webkit-transform: translateY(-20px);
            }

            .case .Content .Txt small {
                content: "";
                display: block;
                width: 90%;
                height: 0;
                position: absolute;
                top: 50%;
                left: 5%;
                border-bottom: 1px solid rgba(255,255,255,.5);
                transform: scale(0,1);
                -moz-transform: scale(0,1);
                -webkit-transform: scale(0,1);
            }
.iconfont img {
    width:100%;
}
            .case .Content .Txt i {
                font-size: 40px;
                color: #fff;
                display: block;
                width: 90%;
                height: 0;
                position: absolute;
                top: 50%;
                margin-top: -90px;
                left: 5%;
                text-align: center;
                opacity: 0;
                transform: translateY(20px);
                -moz-transform: translateY(20px);
                -webkit-transform: translateY(20px);
            }

        .case .Content li .Txt {
            transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -webkit-transition: all .5s ease-in-out;
        }

        .case .Content .Txt small {
            transition: all .6s ease-out;
            -moz-transition: all .6s ease-out;
            -webkit-transition: all .6s ease-out;
        }

        .case .Content .Txt i, .case .Content .Txt span {
            transition: all .4s cubic-bezier(.3,.8,.6,1) .2s;
            -moz-transition: all .4s cubic-bezier(.3,.8,.6,1) .2s;
            -webkit-transition: all .4s cubic-bezier(.3,.8,.6,1) .2s;
        }

        .case .Content li:hover .Txt {
            opacity: 1;
        }

            .case .Content li:hover .Txt small {
                transform: scale(1);
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
            }

            .case .Content li:hover .Txt i, .case .Content li:hover .Txt span {
                opacity: 1;
                transform: translateY(0);
                -moz-transform: translateY(0);
                -webkit-transform: translateY(0);
            }

        .case .Content .Img img {
            transition: all 1.5s ease-out;
            -moz-transition: all 1.5s ease-out;
            -webkit-transition: all 1.5s ease-out;
        }

        .case .Content li:hover .Img img {
            transform: scale(1.1);
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
        }

.hover_deg {
        transition: all 1s;
    }
    
    .hover_deg-2:hover {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    
    .z-center-img1 {
        /* css3 动画 */
        animation: rotate-a 2s linear 0.5s infinite normal both;
    }
    /*.z-center:hover */
    
    .z-center-img2 {
        /* css3 动画 */
        animation: rotate-b 2s linear 0.5s infinite normal both;
    }
    
    .hover_deg:hover {
        animation: zoom 500ms linear 0s infinite alternate both;
    }
    
    @keyframes zoom {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
    
    @keyframes rotate-a {
        0% {
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @keyframes rotate-b {
        0% {
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    
    .img_ad_list li {
        position: relative;
    }
    
    .img_ad_list img {
        transition: opacity 0.4s, transform 0.8s;
    }
    
    .img_ad_list img:nth-child(2) {
        top: 0;
        left: 0;
        position: absolute;
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        opacity: 1;
        filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
    
    .img_ad_list img:nth-child(1) {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        opacity: 0;
    }
    
    .img_ad_list li:hover img:nth-child(1) {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        opacity: 1;
    }
    
    .img_ad_list li:hover img:nth-child(2) {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        opacity: 0;
    }
    
    .section02-0-1 {
        /*background-color: #f1f1f1;*/
        /*height: 665px;*/
        overflow: hidden;
        position: relative;
        left: 0;
        right: 0;
        width: 1200px;
        /*width:100% ;*/
        margin-right: auto;
        margin-left: auto;
        height: 665px;
    }
    
    .bg {
        background-image: url("/templates/zhuojie/images/youneed.jpg");
        background-size: 1920px 100%;
    }
    
    .z-wltg,
    .z-wx,
    .z-ys,
    .z-sj,
    .z-app,
    .z-tgyy,
    .z-center,
    .z-text-left,
    .z-text-right {
        position: absolute;
    }
    
    .z-wltg a:hover,
    .z-wx a:hover,
    .z-ys a:hover,
    .z-sj a:hover,
    .z-app a:hover,
    .z-tgyy a:hover,
    .z-center a:hover {
        text-decoration: none;
    }
    
    .z-wltg:hover *,
    .z-wx:hover *,
    .z-ys:hover *,
    .z-sj:hover *,
    .z-app:hover *,
    .z-tgyy:hover *,
    .z-center:hover * {
        color: #dc0000;
    }
    
    .z-wltg {
        top: 367px;
        left: 246px;
    }
    
    .z-wx {
        top: 247px;
        left: 106px;
    }
    
    .z-ys {
        top: 125px;
        left: 152px;
    }
    
    .z-sj {
        top: 125px;
        left: 603px;
    }
    
    .z-app {
        top: 250px;
        left: 655px;
    }
    
    .z-tgyy {
        top: 374px;
        left: 487px;
    }
    
    .z-center {
        font-size: 25.76px;
        top: 279px;
        left: -38px;
    }
    
    .z-center .z-center-img2 {
        top: 47px;
        left: -123px;
    }
    
    .z-text-left,
    .z-text-right {
        top: 508px;
        line-height: 1.4;
    }
    
    .z-text-left {
        left: 60px;
    }
    
    .z-text-right {
        left: 729px;
    }
    
    .section02-0-1 ul {
        width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .section02-0-1 ul {}
    
    .section02-0-1 li {
        position: relative;
        float: left;
    }
    
    .section02-0-1 h3 {
        font-size: 24px;
        font-weight: bold;
        color: #626262;
    }
    
    .section02-0-1 span {
        font-size: 20px;
        color: #646464;
    }
    
    .section02-0-1 img {
        position: absolute;
        left: -100px;
        top: 0;
    }
    
    .section02-0-2 h3 {
        color: #6c7a81;
        font-size: 28px;
    }
    
    .section02-0-2 h3 span {
        color: #c0272d;
        font-size: 28px;
    }
    
    .z-yxjssj .z-yxjssj-1 h1.hed,
    .z-yxjssj .z-yxjssj-2 h1.hed,
    .z-yxjssj .z-yxjssj-3 h1.hed {
        color: #800000;
        font-family: '黑体';
        font-weight: bold;
    }
    
    .z-yxjssj .z-yxjssj-1 h1,
    .z-yxjssj .z-yxjssj-2 h1,
    .z-yxjssj .z-yxjssj-3 h1,
    .z-yxjssj .z-yxjssj-4 h1 {
        font-size: 36px;
        color: #636363;
    }
    .z-yxjssj .z-yxjssj-3 h1 {
        display: inline-block;
    }
    .z-yxjssj .z-yxjssj-1 p,
    .z-yxjssj .z-yxjssj-2 p,
    .z-yxjssj .z-yxjssj-3 p {
        font-size: 18px;
        color: #636363;
        font-family: 'Bebas Regular';
    }
    
    .z-yxjssj .z-yxjssj-1 :hover,
    .z-yxjssj .z-yxjssj-2 :hover,
    .z-yxjssj .z-yxjssj-3 :hover {
        color: #800000;
    }
    
    .z-yxjssj .z-yxjssj-4 h1 {
        font-size: 25px;
    }
  .z-yxjssj {
    position: relative;
  }
  .z-yxjssj-1,
  .z-yxjssj-2,
  .z-yxjssj-3,
  .z-yxjssj-4{
    position: absolute;
  }
  .z-yxjssj .z-yxjssj-1 {
     top: 186px;
    left: 484px;
  }
    .z-yxjssj .z-yxjssj-2 {
           top: 161px;
    left: 1060px;
    }
    .z-yxjssj .z-yxjssj-3 {
        top: 318px;
    left: 1061px;
    }
    .z-yxjssj .z-yxjssj-4{
            top: 449px;
    left: 780px;
    }
    .z-yxjssj .z-yxjssj-4 h1{
         transition: all 1s;
    }
    .z-yxjssj .z-yxjssj-4 h1:hover{
          transform: scale(1.2);
    }
     .text-center {
        text-align: center;
    }
    
    .bg0 {
        background: #f1f1f1;
    }
    

    .section02 {
        position: relative;
    }
    
    .section02-0-1 {
        position: absolute;
        z-index: 50;
        top: -5px;
    }
    
    .section02-0-1 img {
        position: absolute;
        left: -66px;
        top: 0;
    }
    
    .section02-0-1 .z-center-img1 {
        left: -76px;
    }