﻿html,body{
    /*height: auto;*/
    background-color: #f5f5f5;
    /*overflow: hidden;*/
    margin: 0;
}
/*头部 start*/
.logo_nav{
    height: 73px;
}
.logo_nav .fr{
    text-align: right;
}
.tel_num{
    color: #ff5b00;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
}
/*头部 end*/
/*尾部 start*/
.dgg_footer{
    background-color:#25262a ;
}
.dgg_footer .link_list li a{
    color: #bdc1c4;
}
/*尾部  end*/
/*第一屏 start*/
.four-advan{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 650px;
    min-width: 1180px;
    overflow: visible;
}
.four-advan .bg{
    position: absolute;
    top: 0;
    z-index: 0;
    background-image: url("/zt/imagesoa/four-advan-bg.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 0;
    width: 100%;
    height: 650px;
}
.four-advan-box{
    padding-top: 118px;
    position: relative;
}
.circle{
    position: relative;
    text-align: center;
    width: 362px;
    height: 362px;
    margin: 0 auto;
    z-index: 1;
}
.circle-piece{
    position: absolute;
}
.circle .one{
    top: 0;
    left: 50%;
    margin-left: -129px;
}
.circle .two{
    top: 53px;
    right: 2px;
}
.circle .three{
    bottom: 1px;
    left: 50%;
    margin-left: -129px;
}
.circle .four{
    top: 51px;
    left: 0;
}
.circle .s-circle{
    position: absolute;
    z-index: 2;
    width: 110px;
    height: 110px;
    left: 50%;
    top: 50%;
    margin-left: -55px;
    margin-top: -55px;
}
.four-advan-box .describe{
    position: absolute;
    width: 1180px;
    height: 650px;
    top: 0;
    z-index: 0;
}
.four-advan-box .describe .one{
    top: 80px;
    left: 193px;
}
.four-advan-box .describe .two{
    top: 213px;
    right: 44px;
}
.four-advan-box .describe .three{
    top: 455px;
    right: 44px;
}
.four-advan-box .describe .four{
    top: 300px;
    left: 30px;
}
/*第一屏 end*/
/*第二屏 start*/
.second-piece{
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 1180px;
    height: 690px;
    margin-top: -80px;
    background: url("/zt/imagesoa/second-bg.png") no-repeat center 0;
    background-attachment: scroll;
    overflow: hidden;
}
.second-piece .bg{
    background: url("/zt/imagesoa/second-bg.png") no-repeat center 0;
    background-attachment: scroll;
    width: 100%;
    min-width: 1180px;
    height: 690px;
}
.site-planning{
    position: relative;
    height: 690px;

}
.site-planning .left-img{
    position: absolute;
    top: 190px;
    left: 0;
    width: 840px;
    height: 401px;
    background: url("/zt/imagesoa/site-planning-img.png") no-repeat;
}
.site-planning .right-txt{
    position: absolute;
    right: 10px;
    color: white;
    width: 460px;
    padding-left: 220px;
    height: 450px;
    background: url("/zt/imagesoa/second-right.png") no-repeat;
    top: 100px;
    text-align: right;
    padding-top: 30px;
}
.site-planning .right-txt .til{
    font-size: 40px;
    font-weight: bold;
    border-bottom: 3px solid;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding-right: 15px;
}
.site-planning .right-txt .sub-til{
    font-size: 18px;
    padding: 15px 0 15px;
}
.site-planning .right-txt .info{
    text-align: left;

}
/*第二屏 end*/
/*第三屏 start*/
.third-piece{
    position: relative;
    z-index: 4;
    width: 100%;
    min-width: 1180px;
    height: 814px;
    margin-top: -80px;
    background: url("/zt/imagesoa/third-bg.png") no-repeat center 0;
    background-attachment: scroll;
    overflow: hidden;
}
.function-selection{
    position: relative;
    height: 644px;
    padding-top: 170px;
}
.function-selection .top-til{
    padding-left: 10px;
    background: url("/zt/imagesoa/third-til-bg.png") no-repeat;
    color: #333;
}
.function-selection .top-til .til{
    font-weight: bold;
    font-size: 40px;
    border-bottom: 3px solid;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.function-selection .top-til .sub-til{
    font-size: 16px;
    padding-top: 10px;
}
.function-selection .bottom-detail{
    padding: 0 26px 0 55px;
    overflow: hidden;
}
.function-selection .bottom-detail .left-img{
    float: left;
}
.function-selection .bottom-detail ul{
    overflow: hidden;
    float: right;
    width: 570px;
    padding-top: 65px;
}
.function-selection .bottom-detail ul li{
    float: left;
    width: 160px;
    height: 160px;
    background: url("/zt/imagesoa/yellow-circle.png") no-repeat;
    margin-left: 30px;
    text-align: center;
    color: #333;
    font-size: 16px;
    margin-bottom: 30px;
}
.function-selection .bottom-detail ul li i{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 108px;
    height: 97px;
    background: url("/zt/imagesoa/function-selection-icon.png") no-repeat;
    margin-top: 15px;
}
.function-selection .bottom-detail ul li i.icon2{
    background-position: -108px 0;
}
.function-selection .bottom-detail ul li i.icon3{
    background-position: -216px 0;
}
.function-selection .bottom-detail ul li i.icon4{
    background-position: -324px 0;
}
.function-selection .bottom-detail ul li i.icon5{
    background-position: -432px 0;
}
.function-selection .bottom-detail ul li i.icon6{
    background-position: -540px 0;
}
/*第三屏 end*/
/*第四屏 start*/
.fourth-piece{
    position: relative;
    z-index: 5;
    width: 100%;
    min-width: 1180px;
    height: 730px;
    margin-top: -80px;
    background: url("/zt/imagesoa/fourth-bg.png") no-repeat center 0;
    background-attachment: scroll;
    overflow: hidden;
}
.function-development{
    padding-top: 167px;
    height: 563px;
}
.function-development .top-til{
    background: url("/zt/imagesoa/fourth-til-bg.png") no-repeat;
    color: white;
}
.function-development .top-til .til{
    font-size: 40px;
    font-weight: bold;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding-left: 15px;
}
.function-development .top-til .sub-til{
    font-size: 16px;
    padding-top: 10px;
}
.function-development .bottom-detail{
    /*overflow: hidden;*/
    zoom: 1;
    padding: 25px 10px 0;
    color: white;
}
.function-development .bottom-detail:after{
    clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;
}
.function-development .bottom-detail .left-txt{
    width: 580px;
    float: left;
}
.function-development .bottom-detail .til{
    font-size: 24px;
    font-weight: bold;
}
.function-development .bottom-detail .sub-til{
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 15px;
}
.function-development .bottom-detail .info{
    text-indent: 20px;
    line-height: 1.8;
}
.function-development .bottom-detail .right-img{
    float: right;
    margin-top: 5px;
}
/*第四屏 end*/
/*第五屏  start*/
.fifth-piece{
    background-color: #f5f5f5;
    position: relative;
    z-index: 6;
    width: 100%;
    min-width: 1180px;
    height: 545px;
}
.top-img{
    position: relative;
    top: -140px;
    /*overflow: hidden;*/
    zoom: 1;
}
.top-img:after{
    clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;
}
.img-box{
    width: 280px;
    height: 274px;
    overflow: hidden;
    position: relative;
}


.img-box .show-box div{
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.img-box img{
    width: 100%;
}
.img-box .big-til{
    color: #333;
    font-size: 16px;
    text-align: center;
    height: 54px;
    line-height: 54px;
    background-color: white;
}

.top-img .img-box{
    float: left;
    /*padding-left: 10px;*/
}
.top-img .left-txt{
    text-align: left;
    float: left;
    margin-left: 45px;
    margin-top: 180px;
}
.top-img .left-txt .til{
    color: #333;
    font-size: 24px;
    font-weight: bold;
}
.top-img .left-txt .sub-til{
    color: #ff5b00;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.animation-container {
    z-index: 0;
}
.hide-box {
    width: 280px;
    height: 100%;
    position: absolute;
    background:url("/zt/imagesoa/img-box-bg1.png") no-repeat center center;
    top:-100%;
    left: -100%;
    color: white;
    text-align: center;
}
.hide-box .til{
    padding: 15px 0 10px;
    font-size: 16px;
    font-weight: bold;
}
.hide-box .info{
    padding: 0 15px;
    text-indent: 10px;
    font-size: 14px;
    text-align: left;
}
.img-box:hover{
    box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
}


.img-box1{
    width: 280px;
    height: 174px;
    overflow: hidden;
    position: relative;
}
.img-box1 .show-box1 div{
    width: 100%;
    height: 120px;
    overflow: hidden;
}
.img-box1 img{
    width: 100%;
}
.img-box1 .big-til1{
    color: #333;
    font-size: 16px;
    text-align: center;
    height: 54px;
    line-height: 54px;
    background-color: white;
}
.animation-container {
    z-index: 0;
}
.hide-box1 {
    width: 280px;
    height: 100%;
    position: absolute;
    background:url("/zt/imagesoa/img-box-bg.png") no-repeat center center;
    top:-100%;
    left: -100%;
    color: white;
    text-align: center;
}
.hide-box1 .til1{
    padding: 15px 0 10px;
    font-size: 16px;
    font-weight: bold;
}
.hide-box1 .info1{
    padding: 0 15px;
    text-indent: 10px;
    font-size: 14px;
    text-align: left;
}
.img-box1:hover{
    box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
}





.fifth-piece .bottom-detail{
    position: relative;
    top: -120px;
}
.fifth-piece .bottom-detail ul{
    zoom: 1;
}
.fifth-piece .bottom-detail ul:after{
    clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;
}
.fifth-piece .bottom-detail ul li{
    float: left;
    margin-left: 20px;
}
.fifth-piece .bottom-detail ul li:first-child{
    margin-left: 0;
}
/*第五屏 end*/