@charset "UTF-8";
/*初始化css*/
body{
    /* min-width:1200px; */
    font-family:微软雅黑;color: #333;}/*min-width的宽度根据项目页面宽度决定*/
*,*:before,*:after {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,
strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,form
{margin:0;padding:0;border:0;outline:none;}
input{margin:0;padding:0;outline:none;}
li{list-style:none;}
a,ins{text-decoration:none;}
*:focus{outline:none;}
a{color:#333;}/*颜色根据通用信息列表的文字颜色决定*/
.more a{color: #999;}/*颜色根据通用更多的文字颜色决定*/
a:hover{color:#3163a4;}/*颜色根据psd主色调决定，比如很多都是蓝色*/
.more a:hover{color:#3163a4;}/*颜色根据psd主色调决定，比如很多都是蓝色*/
.fl{float:left;}
.fr{float:right;}
.cf:after{display:block;content:'';height:0;visibility:hidden;clear:both;}
.cf{zoom:1;}
.hide{display:none;}
.block{display:block;}
textarea,input{font-family:微软雅黑;}
/*命名的语义化---正常页面的几部分如下：header(top+banner+nav)	content-wrap(section1+section2+...)		footer*/
.hide {display: none;}
.block {display: block;}
.clear {clear: both;}
.main { width: 1100px;margin: 0 auto;}
.h5 {height: 5px;}
.h10 {height: 10px}
.h20 {height: 20px}
.h30 {height: 30px;}
.h40 {height: 40px;}
.h50 {height: 50px;}
/*头部通用*/

/* 背景颜色 */
.bg{
    background: #f8f8f8;
    overflow: hidden;
}
/* content */
.content{
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
}
/* banner */
.banner{
    height: 220px;
    background: url(bg.png) 100%;
    overflow: hidden;
}
/* banner-wz */
.banner-wz1{
    font-size: 36px;
    color: #fff;
    padding-top: 65px;
}
.banner-wz2{
    font-size: 20px;
    color: #fff;
}
/* 内容 */
.main{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.nr{
    color: #4c67a7;
    font-size: 20px;
    font-weight: bold;
    padding-top: 40px;
    overflow: hidden;
}
.bk{
    background: url(bk.png) 100%;
    width: 380px;
    height: 120px;
    float: left;
    margin-right: 20px;
    overflow: hidden;
    margin-top: 20px !important;

    display:table-cell;
    vertical-align:middle;
}
.bk .wz{
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 40px;
    overflow: hidden;
    padding: 0px;
    margin-right: 20px;
    display: inline-block;
    cursor: pointer;
    width: 216px;
    vertical-align: middle;
    text-align: left;
}

.bk a{
    float: left;
    display: block;
    height: 120px;
    width: 100%;
}
.bk:hover .wz,.bk:active .wz{
    color: #fff;
}
.bk:hover img,.bk:active img{
    background: url(bai.png) no-repeat;
}

.bk:hover,.bk:active{
    background: url(bk-hover.png) 100%;
}
.bk a img{
    vertical-align: middle;
    margin: 30px 0 20px;
}
@media all and (min-width: 960px) and (max-width: 1199px) { 
    .banner{
        width: 100%;
        background: url(bg.png) 100%;
        overflow: hidden;
    }
    .content{
        padding: 12px;
        margin: 0 auto;
        width: 100%;
        overflow: hidden;
    }
    .main {
        width: 100%;
        padding: 12px;
        margin: 0 auto;
        overflow: hidden;
    }
    .bk{
        width: 30%;
    }
    .bk a{
        float: left;
        display: block;
        height: 120px;
        width: 100%;
    }
    .bk a img{
        vertical-align: middle;
    }
    .bk a .wz {
        display: inline-block;
        margin-left: 30px;
        cursor: pointer;
        width: 55%;
        margin-right: 20px;
        vertical-align: middle;
        text-align: left;
    }
 }
@media all and (min-width: 768px) and (max-width: 959px) { 
    .banner{
        width: 100%;
        background: url(bg.png) 100%;
        overflow: hidden;
    }
    .banner-wz1 {
        font-size: 36px;
        color: #fff;
        padding-top: 40px;
    }
    .banner-wz2 {
        font-size: 20px;
        color: #fff;
    }
    .content{
        padding: 12px;
        width: 100%;
    }
    .main {
        width: 100%;
        padding: 12px;
    }
    .bk {
        width: 30%;
        padding-top: 0px;
    }
    .bk a{
        float: left;
        display: block;
        height: 120px;
        width: 100%;
    }
    .bk a img{
        vertical-align: middle;
        margin: 30px 0;
    }
    .bk a .wz {
        display: inline-block;
        margin-left: 25px;
        cursor: pointer;
        width: 46%;
        vertical-align: middle;
        text-align: left;
        font-size: 15px;
    }
 }
@media all and (min-width: 480px) and (max-width: 767px){ 
    .banner{
        width: 100%;
        background: url(bg.png) 100%;
        overflow: hidden;
    }
    .content{
        padding: 12px;
        width: 100%;
    }
    .main {
        width: 100%;
        padding: 12px;
    }
    .banner-wz1{
        font-size: 36px;
        color: #fff;
        padding-top: 65px;
    }
    .banner-wz2{
        font-size: 20px;
        color: #fff;
    }
    .bk {
        width: 98%;
    }
    .bk a .wz {
        width: 70%;
        margin-left: 30px;
    }
 }
@media all and (max-width: 479px) { 
    .banner{
        width: 100%;
        background: url(bg.png) 100%;
        overflow: hidden;
    }
    .main {
        width: 100%;
        padding: 12px;
    }
    .bk {
        width: 98%;
    }
    .bk a .wz {
        width: 55%;
        font-size: 15px;
        margin-left: 30px;
    }
    .banner-wz1{
        font-size: 24px;
        padding-left: 12px;
        padding-top: 65px;
    }
    .banner-wz2{
        font-size: 16px;
        padding-left: 12px;
    }
 }