*{margin:0;padding:0;}
a {text-decoration: none;}
.cf {clear: both;}
.pageMain {background-color:#F4F8FC;position: relative;}
.yjBanner {
    height:479px;
    background:url("http://tyjr.bjtlyc.com/pcimages/banner_yjjz.jpg") no-repeat center;
    background-size: cover;
}
/* .hoverAddOn {
margin-top:80px;
} */
.hoverAddOn ul {
    width:1250px;
    margin:0 auto;
}
.hoverAddOn ul li{
    float:left;
    margin:15px 10px 0 0;
    }
.hoverAddOn ul li:nth-child(5),.hoverAddOn ul li:last-child{
    margin-right:none;
}
.hoverAddOn ul li a {
    position: relative;
    display:block;
    width:229px;
    height:190px;
    text-align:center;
    background-color:#fff;
    border-radius:6px;
}
.xf::affter{
    content: "111";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #027DDB;
    transition: top .4s;
    }
.hoverAddOn a span{
    display:block;
    position: relative;
    width:69px;
    height:69px;
    left:50%;
    top:35px;
    margin-left:-35px;
    texe-align:center;
    background:url("http://tyjr.bjtlyc.com/pcimages/ico_yjjz_1.png");
    background-repeat:no-repaet;
}
.hoverAddOn li+li a span {
    background-position:0px -80px;
}
.hoverAddOn li+li+li a span {
    background-position:0px -160px;
}
.hoverAddOn li+li+li+li a span {
    background-position:0px -239px;
}
.hoverAddOn li+li+li+li+li a span {
    background-position:0px -318px;
}
.hoverAddOn li+li+li+li+li+li a span {
    background-position:0px -397px;
}
.hoverAddOn li+li+li+li+li+li+li a span {
    background-position:0px -476px;
}
.hoverAddOn li+li+li+li+li+li+li+li a span {
    background-position:0px -553px;
}
.hoverAddOn li+li+li+li+li+li+li+li+li a span {
    background-position:0px -631px;
}
.hoverAddOn li+li+li+li+li+li+li+li+li+li a span {
    background-position:0px -709px;
}
.hoverAddOn li:first-child a:hover span {
    background-position:-80px 0px;
}
.hoverAddOn li+li a:hover span {
    background-position:-80px -80px;
}
.hoverAddOn li+li+li a:hover span {
    background-position:-80px -160px;
}
.hoverAddOn li+li+li+li a:hover span {
    background-position:-81px -238px;
}
.hoverAddOn li+li+li+li+li a:hover span {
    background-position:-81px -317px;
}
.hoverAddOn li+li+li+li+li+li a:hover span {
    background-position:-81px -397px;
}
.hoverAddOn li+li+li+li+li+li+li a:hover span {
    background-position:-82px -475px;
}
.hoverAddOn li+li+li+li+li+li+li+li a:hover span {
    background-position:-82px -553px;
}
.hoverAddOn li+li+li+li+li+li+li+li+li a:hover span {
    background-position:-82px -630px;
}
.hoverAddOn li+li+li+li+li+li+li+li+li+li a:hover span {
    background-position:-82px -708px;
}
.hoverAddOn a h3 {
    position: relative;
    bottom:-55px;
    text-align:center;
    font-size:30px;
    color:#373737;
}
.hoverAddOn ul li a:hover h3 {
    color:#fff;
}
.hoverAddOn ul li a:hover {
    color:#fff;
    background:#2f94f1;
    transition: all linear .7s;
}
.pclb{
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -150px;
}
.pclb_img{
    color: #ffffff;
    height: auto;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding-bottom: 12px;
    padding-top: 15px;
    }
.pclb .pclb_text {
    position: absolute;
    top: 18px;
    left: 0px;
    width: 52px;
    height: 229px;
    background: url(http://tyjr.bjtlyc.com/pcimages/znts_rightbg.png) top center no-repeat;
    color: #ffffff;
    padding-top: 40px;
    text-decoration: none;
}
.pclb .pclb_text span{
    color: #ffffff;
    width: 20px;
    height: auto;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    display: block;
    margin: 0 auto;
}
.pclb .pclb_Qr {
    width: 0px;
    position: absolute;
    top: 70px;
    left: 52px;
    transition: all linear .5s;
}
.pclb .pclb_text:hover .pclb_Qr {
    width: 150px;
}
.hint {
    position: absolute;
    right:0;
    bottom:-264px;
    z-index: 10px;
    }
.hint img {
    width:300px;
    z-index:2;
}
.close {
    display:inline-block;
    width:20px;
    height:20px;
    position:absolute;
    right:0;
    cursor: pointer;
    top:17px;
    right:17px;
    background: url("http://tyjr.bjtlyc.com/pcimages/yjjz_close.png");
    background-repeat: no-repeat;
    background-size: 20px;
}

@media screen and (max-width: 1200px) {
    .yjBanner { height: 220px; background-size: cover;}
    .hoverAddOn { width: 100%; margin: 10px 0 15px 0; padding: 0 10px;}
    .hoverAddOn a h3 {font-size: 24px;}
    .hint,.pclb {display: none;}
    .hoverAddOn ul { width: 100%;}
    .hoverAddOn ul::after { content: ""; display: block; clear: both;}
    .hoverAddOn ul li { width: 30%; margin: 1.5%;}
    .hoverAddOn ul li a { width:100%}    
}

@media screen and (max-width: 760px) {
    .yjBanner { height: 140px; background-size: cover; background-image: url(http://tyjr.bjtlyc.com/pcimages/yjjz_banner_13.jpg);}
    .hoverAddOn ul li { width: 46%; margin: 2%;}

    
}