@import url(../comm/base.css);
@import url(../comm/Nav.css);
@import url(../case/comm.css);

.product {
    width: 1200px;
    margin: 30px auto;
}

.product .nav {
    width: 1200px;
    height: 144px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.06);
    display: flex;

}

.product .nav>div {
    width: 21.2%;
    float: left;
    height: 140px;
    line-height: 200px;
    font-size: 18px;
    color: #333;
    text-align: center;
}

.product .nav>div a {
    color: #333;
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

/* 电力 */
#electricity {
    background: url("../../images/case/nav/electricity.png") no-repeat center 40px;
}

#electricity.active {
    background: url("../../images/case/nav/electricity_active.png") no-repeat center 40px;
}

#traffic {
    background: url("../../images/case/nav/交通行业显示.png") no-repeat center 40px;
}

#traffic.active {
    background: url("../../images/case/nav/交通行业选中.png") no-repeat center 40px;
}

#education {
    background: url("../../images/case/nav/教育行业显示.png") no-repeat center 40px;
}

#education.active {
    background: url("../../images/case/nav/教育行业选中.png") no-repeat center 40px;
}

#medical {
    background: url("../../images/case/nav/医疗行业显示.png") no-repeat center 40px;
}

#medical.active {
    background: url("../../images/case/nav/医疗行业选中.png") no-repeat center 40px;
}

#communication {
    background: url("../../images/case/nav/通信行业显示.png") no-repeat center 40px;
}

#communication.active {
    background: url("../../images/case/nav/通信行业选中.png") no-repeat center 40px;
}

#mail {
    background: url("../../images/case/nav/邮政行业显示.png") no-repeat center 40px;
}

#mail.active {
    background: url("../../images/case/nav/邮政行业选中.png") no-repeat center 40px;
}

/* #zzst { */
/* background: url("../../images/product/nav/zzst.png") no-repeat center 40px; */
/* background-size: 40px 40px; */
/* } */
/*  */
/* #zzst.active { */
/* background: url("../../images/product/nav/zzst_active.png") no-repeat center 40px; */
/* background-size: 40px 40px; */
/* } */
/*  */
.product .product-list {
    margin: 40px 0 0 0;
    width: 1200px;
    float: left;
    overflow: hidden;
}

.product .product-list>div {
    height: 500px;
    width: 100%;
    margin-bottom: 32px;
    float: left;
    position: relative;
    padding: 0;
}

.djy {
    background: url(../../images/product/djy/djy_banner.png) no-repeat #b1001c;
}

.djy .link {
    display: block;
    position: absolute;
    left: 77px;
    top: 235px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    width: 100px;
    height: 29px;
    line-height: 27px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    text-decoration: none;
}

.hzt {
    background: url(../../images/product/hzt_bg.png) no-repeat;
}

.hzt .link {
    display: block;
    width: 175px;
    height: 48px;
    position: absolute;
    left: 653px;
    bottom: 196px;
    color: #ffffff;
    font-size: 0;
    text-align: center;
}

.hjy {
    background: url(../../images/product/hjy_bg.png) no-repeat;
}

.hjy .link {
    display: block;
    width: 164px;
    height: 46px;
    position: absolute;
    left: 77px;
    bottom: 67px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
}

.ygcg {
    background: url(../../images/product/ygcg_bg.png) no-repeat;
}

.ygcg .link {
    display: block;
    width: 144px;
    height: 44px;
    position: absolute;
    left: 675px;
    bottom: 92px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
}

.mdeical_5G {
    background: url(../../images/product/ycyl_5g_bg.png) no-repeat;
}

.mdeical_5G .link {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 488px;
    bottom: 85px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
    border-radius: 25px;
}

.mdeical_gjhlwyy {
    background: url(../../images/product/gjhlwyy_bg.png) no-repeat;
}

.mdeical_gjhlwyy .link {
    display: block;
    width: 160px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 116px;
    bottom: 118px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
    border-radius: 25px;
}

.oa {
    background: url(../../images/product/oa_bg.png) no-repeat;
}

.oa .link {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 115px;
    bottom: 150px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
    border-radius: 25px;
}

.oa1 {
    background: url(../../images/product/oa_onecode.png) no-repeat;
}

.oa1 .link {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 115px;
    bottom: 100px;
    color: #234DB9;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 25px;
    background-color: #ffffff;
}

.zzst {
    background: url(../../images/product/zzst/title.png) no-repeat;
    background-size: 100% 100%;
}

.zzst .link {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 36px;
    position: absolute;
    left: 115px;
    bottom: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 25px;
    background-color: transparent;
    border: 2px solid #ffffff;
}

.zcgl {
    background: url(../../images/product/zcgl_bg.png) no-repeat;
}

.zcgl .link {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 125px;
    bottom: 84px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
    border-radius: 25px;
}

.safety_4A {
    background: url(../../images/product/safety_4A_bg.png) no-repeat;
}

.safety_4A .link {
    display: block;
    width: 145px;
    height: 43px;
    line-height: 43px;
    position: absolute;
    left: 655px;
    bottom: 118px;
    color: #ffffff;
    font-size: 0px;
    text-align: center;
    border-radius: 25px;
}

.photo img {
    width: 272px;
    height: 156px;
}