@charset "UTF-8";



.product{
    padding: 30px 0;
    background-color: #f3f3f2;
}
.product > div{
    width: 69.9%;
    margin: auto;
    padding-bottom: 40px;
    background-color: white;
}
.product .p-nav{
    margin: 0 70px;
}
.product .p-nav ul li.on{
    /*height: 100px;
    margin-top: -12px;*/
    color: #fff;
}
.product .p-nav ul li.on{
    background:#0068b3 url("../img/libg.png") no-repeat left top/100%;
}
.product .p-nav ul li:hover{
    background:#0068b3 url("../img/libg.png") no-repeat left top/100%;
}
/*.product .p-nav ul li:nth-child(1).on{
    background:#0068b3 url("../img/01.png") no-repeat left top/100%;
}
.product .p-nav ul li:nth-child(2).on{
    background:#0068b3 url("../img/02.png") no-repeat left top/100%;
}
.product .p-nav ul li:nth-child(3).on{
    background:#0068b3 url("../img/03.png") no-repeat left top/100%;
}*/
.product .p-nav ul li:hover{
    /*height: 100px;
    margin-top: -12px;*/
    color: white;
}
/*.product .p-nav ul li:nth-child(1):hover{
    background:#0068b3 url("../img/01.png") no-repeat left top/100%;
}
.product .p-nav ul li:nth-child(2):hover{
    background:#0068b3 url("../img/02.png") no-repeat left top/100%;
}
.product .p-nav ul li:nth-child(3):hover{
    background:#0068b3 url("../img/03.png") no-repeat left top/100%;
}*/
.product .p-nav ul li{
    position: relative;
    width: 33%;
    height: 88px;
    background-color: #f2f2f2;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
}
.product .p-nav ul li + li{
    margin-left: .5%;
}
.product .p-nav ul li:hover div{
    /*height: 50px;*/
}
.product .p-nav ul li div.on{
    /*height: 50px;*/
}
.product .p-nav ul li div{
    position: absolute;
    overflow: hidden;
    top:50%;
    left: 50%;
    height: 31px;
    text-align: center;
    line-height: 25px;
    font-size: 18px;
    transform: translate(-50%,-50%);
    /*transition: .3s;*/
}
.product .p-nav ul li div h4{
    width: 320px;
}
.product .p-nav ul li div h4 span{
    display: inline-block;
    width: 39px;
    height: 31px;
    margin-right: 10px;
    vertical-align: middle;
}
.product .p-nav ul li:nth-of-type(1) div h4 span{
    background: url("../img/p01.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(2) div h4 span{
    background: url("../img/p02.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(3) div h4 span{
    background: url("../img/p03.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(1).on div h4 span{
    background: url("../img/p011.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(2).on div h4 span{
    background: url("../img/p021.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(3).on div h4 span{
    background: url("../img/p031.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(1):hover div h4 span{
    background: url("../img/p011.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(2):hover div h4 span{
    background: url("../img/p021.png") no-repeat center;
}
.product .p-nav ul li:nth-of-type(3):hover div h4 span{
    background: url("../img/p031.png") no-repeat center;
}
.product .p-nav ul li div p{
    color: #508ac2;
    font-size: 14px;
}
.product .p-nav ul li .p-nav-more{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    transform: none;
    line-height: unset;
}
.product .p-nav ul li .p-nav-more > a{
    display: block;
    width: 100%;
    height: 53px;
    line-height: 53px;
    background-color: white;
    border: 1px solid #e5e5e5;
    border-top: none;
    color: #333;
    font-size: 20px;
    box-sizing: border-box;
}
.product .p-nav ul li .p-nav-more > a:hover{
    color: #0068b4;
}
.product .p-nav ul li .p-nav-more > a.on{
    color: #0068b4;
}
.product .p-title{
    height: 46px;
    margin: 50px 70px 23px;
    background-color: #dfecf8;
    color: #0068b3;
    text-align: center;
    line-height: 46px;
}
.product .series{
    margin: 0 70px;
}
.product .series ul{
    font-size: 0;
}
.product .series ul li{
    float: none;
    display: inline-block;
    vertical-align: top;
    width: 23.5%;
    margin-left:2%;
    margin-bottom: 30px;
    font-size: 16px;
    text-align: center;
}
.product .series ul li:nth-child(4n+1){
    margin-left: 0;
}
.product .series ul li div{
    /*padding: 75px 25px;*/
    border: 1px solid #e5e5e5;
    overflow: hidden;
}
.product .series ul li :hover img{
    transform: scale(1.1);
}
.product .series ul li div img{
    width: 100%;
    height: auto;
    transition: .3s;
}
.product .series ul li p{
    margin: 17px 0 8px;
    color: black;
}
.product .series ul li span{
    color: #999;
}
.product .more{
    width: 149px;
    height: 44px;
    margin: 88px auto 129px;
    background-color: #0068b3;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    border-radius: 30px;

}