.top-nav{
    width: 1200px;
    margin:0 auto;
    background: #fff;
    border: 1px solid #e2e2e2;
}
.top-nav ul{
    margin-top: 24px;
    margin-left: 5px;
    padding-bottom: 10px;
}
.top-nav ul li{
    margin-left: 20px;
    margin-bottom: 12px;
    width: 145px;
    height: 46px;
    float: left;
}
.top-nav ul li a{
    display: block;
    text-align: center;
    line-height: 46px;
}
.top-nav ul li a em{
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: top;
    margin-top: 8px;
    margin-right: 6px;
}
.top-nav ul li:hover a,.active a{
    color: #fff !important;
}
.nav-1 em{
    background: url(../ui_img/top-icons.png) no-repeat 0 0;
}
.nav-2 em{
    background: url(../ui_img/top-icons.png) no-repeat -28px 0;
}
.nav-3 em{
    background: url(../ui_img/top-icons.png) no-repeat -56px 0;
}
.nav-4 em{
    background: url(../ui_img/top-icons.png) no-repeat -84px 0;
}
.nav-5 em{
    background: url(../ui_img/top-icons.png) no-repeat -112px 0;
}
.nav-6 em{
    background: url(../ui_img/top-icons.png) no-repeat -140px 0;
}
.nav-7 em{
    background: url(../ui_img/top-icons.png) no-repeat -168px 0;
}
.nav-8 em{
    background: url(../ui_img/top-icons.png) no-repeat -196px 0;
}
.nav-9 em{
    background: url(../ui_img/top-icons.png) no-repeat -224px 0;
}
.nav-10 em{
    background: url(../ui_img/top-icons.png) no-repeat -252px 0;
}
.nav-11 em{
    background: url(../ui_img/top-icons.png) no-repeat -280px 0;
}
.nav-12 em{
    background: url(../ui_img/top-icons.png) no-repeat -308px 0;
}
.nav-13 em{
    background: url(../ui_img/top-icons.png) no-repeat -336px 0;
}
.nav-14 em{
    background: url(../ui_img/top-icons.png) no-repeat -364px 0;
}
.nav-15 em{
    background: url(../ui_img/top-icons.png) no-repeat -392px 0;
}
.nav-16 em{
    background: url(../ui_img/top-icons.png) no-repeat -420px 0;
}
.nav-17 em{
    background: url(../ui_img/top-icons.png) no-repeat -449px 0;
}
.nav-18 em{
    background: url(../ui_img/top-icons.png) no-repeat -475px 0;
}
.nav-19 em{
    background: url(../ui_img/top-icons.png) no-repeat -503px 0;
}
.nav-20 em{
    background: url(../ui_img/top-icons.png) no-repeat -532px 0;
}
.nav-21 em{
    background: url(../ui_img/top-icons.png) no-repeat -561px 0;
}
.nav-1:hover em,.nav-1.active em{
    background: url(../ui_img/top-icons.png) no-repeat 0 -28px !important;
}
.nav-2:hover em,.nav-2.active em{
    background: url(../ui_img/top-icons.png) no-repeat -28px -28px !important;
}
.nav-3:hover em,.nav-3.active em{
    background: url(../ui_img/top-icons.png) no-repeat -56px -28px !important;
}
.nav-4:hover em,.nav-4.active em{
    background: url(../ui_img/top-icons.png) no-repeat -84px -28px !important;
}
.nav-5:hover em,.nav-5.active em{
    background: url(../ui_img/top-icons.png) no-repeat -112px -28px !important;
}
.nav-6:hover em,.nav-6.active em{
    background: url(../ui_img/top-icons.png) no-repeat -140px -28px !important;
}
.nav-7:hover em,.nav-7.active em{
    background: url(../ui_img/top-icons.png) no-repeat -168px -28px !important;
}
.nav-8:hover em,.nav-8.active em{
    background: url(../ui_img/top-icons.png) no-repeat -196px -28px !important;
}
.nav-9:hover em,.nav-9.active em{
    background: url(../ui_img/top-icons.png) no-repeat -224px -28px !important;
}
.nav-10:hover em,.nav-10.active em{
    background: url(../ui_img/top-icons.png) no-repeat -252px -28px !important;
}
.nav-11:hover em,.nav-11.active em{
    background: url(../ui_img/top-icons.png) no-repeat -280px -28px !important;
}
.nav-12:hover em,.nav-12.active em{
    background: url(../ui_img/top-icons.png) no-repeat -308px -28px !important;
}
.nav-13:hover em,.nav-13.active em{
    background: url(../ui_img/top-icons.png) no-repeat -336px -28px !important;
}
.nav-14:hover em,.nav-14.active em{
    background: url(../ui_img/top-icons.png) no-repeat -364px -28px !important;
}
.nav-15:hover em,.nav-15.active em{
    background: url(../ui_img/top-icons.png) no-repeat -392px -28px !important;
}
.nav-16:hover em,.nav-16.active em{
    background: url(../ui_img/top-icons.png) no-repeat -420px -28px !important;
}
.nav-17:hover em,.nav-17.active em{
    background: url(../ui_img/top-icons.png) no-repeat -449px -28px !important;
}
.nav-18:hover em,.nav-18.active em{
    background: url(../ui_img/top-icons.png) no-repeat -475px -28px !important;
}
.nav-19:hover em,.nav-19.active em{
    background: url(../ui_img/top-icons.png) no-repeat -503px -28px !important;
}
.nav-20:hover em,.nav-20.active em{
    background: url(../ui_img/top-icons.png) no-repeat -532px -28px !important;
}
.nav-21:hover em,.nav-21.active em{
    background: url(../ui_img/top-icons.png) no-repeat -559px -27px !important;
}
.nav-1 a{
    color: #fe483a;
}
.nav-2 a{
    color: #7cd7fd;
}
.nav-3 a{
    color: #cb94ff;
}
.nav-4 a{
    color: #ffb094;
}
.nav-5 a{
    color: #619cc2;
}
.nav-6 a{
    color: #66bb6a;
}
.nav-7 a{
    color: #ff9a98;
}
.nav-8 a{
    color: #0091ff;
}
.nav-9 a{
    color: #8ddad4;
}
.nav-10 a{
    color: #f46060;
}
.nav-11 a{
    color: #86dd72;
}
.nav-12 a{
    color: #8598f9;
}
.nav-13 a{
    color: #ffb230;
}
.nav-14 a{
    color: #a45fed;
}
.nav-15 a{
    color: #42d342;
}
.nav-16 a{
    color: #ce93d8;
}
.nav-17 a{
    color: #ff9854;
}
.nav-18 a{
    color: #619cc2;
}
.nav-19 a{
    color: #ff9a98;
}
.nav-20 a{
    color: #54a0ff;
}
.nav-21 a{
    color: #8ddad4;
}

.nav-1{
    border:1px solid #fe483a;
}
.nav-2{
    border:1px solid #7cd7fd;
}
.nav-3{
    border:1px solid #cb94ff;
}
.nav-4{
    border:1px solid #ffb094;
}
.nav-5{
    border:1px solid #619cc2;
}
.nav-6{
    border:1px solid #66bb6a;
}
.nav-7{
    border:1px solid #ff9a98;
}
.nav-8{
    border:1px solid #0091ff;
}
.nav-9{
    border:1px solid #8ddad4;
}
.nav-10{
    border:1px solid #f46060;
}
.nav-11{
    border:1px solid #86dd72;
}
.nav-12{
    border:1px solid #8598f9;
}
.nav-13{
    border:1px solid #ffb230;
}
.nav-14{
    border:1px solid #a45fed;
}
.nav-15{
    border:1px solid #42d342;
}
.nav-16{
    border:1px solid #ce93d8;
}
.nav-17{
    border: 1px solid #ff9854;
}
.nav-18{
    border: 1px solid#619cc2;
    
}
.nav-19{
    border: 1px solid#ff9a98;
}
.nav-20{
    border: 1px solid #54a0ff;
}
.nav-21{
    border:1px solid #8ddad4;
}
.nav-1:hover,.nav-1.active{
    background:#fe483a;
}
.nav-2:hover,.nav-2.active{
    background:#7cd7fd;
}
.nav-3:hover,.nav-3.active{
    background:#cb94ff;
}
.nav-4:hover,.nav-4.active{
    background:#ffb094;
}
.nav-5:hover,.nav-5.active{
    background:#619cc2;
}
.nav-6:hover,.nav-6.active{
    background:#66bb6a;
}
.nav-7:hover,.nav-7.active{
    background:#ff9a98;
}
.nav-8:hover,.nav-8.active{
    background:#0091ff;
}
.nav-9:hover,.nav-9.active{
    background:#8ddad4;
}
.nav-10:hover,.nav-10.active{
    background:#f46060;
}
.nav-11:hover,.nav-11.active{
    background:#86dd72;
}
.nav-12:hover,.nav-12.active{
    background:#8598f9;
}
.nav-13:hover,.nav-13.active{
    background:#ffb230;
}
.nav-14:hover,.nav-14.active{
    background:#a45fed;
}
.nav-15:hover,.nav-15.active{
    background:#42d342;
}
.nav-16:hover,.nav-16.active{
    background:#ce93d8;
}
.nav-17:hover,.nav-17.active{
    background:#ff9854;
}
.nav-18:hover,.nav-18.active{
    background:#619cc2;
}
.nav-19:hover,.nav-19.active{
    background:#ff9a98;
}
.nav-20:hover,.nav-20.active{
    background:#54a0ff;
}
.nav-21:hover,.nav-21.active{
    background:#8ddad4;
}
.xz-list{
    width: 1200px;
    margin: 30px auto;
    overflow: hidden;
}
.box-tit-box{
    width: 1200px;
    margin:0px auto;
    
}
.box-tit {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    line-height: 35px;
    float: left;
    margin-right: 5px;
}
.box-tit em {
    display: inline-block;
    width: 40px;
    height: 35px;
    margin-right: 10px;
    vertical-align: top;
    background: url(../ui_img/detail-icons.png) no-repeat -42px -56px;
}
.line {
    float: left;
    width: 1070px;
    height: 1px;
    margin-top: 15px;
    background: #e2e2e2;
}
.xz{
    margin-top: 20px;
    width: 1250px;

}
.xz-item{
    width: 284px;
    float: left;
    margin-right: 20px;
    background: #fff;
    margin-bottom: 20px;
    border: 1px solid #e2e2e2;
}
.xz-item-img{
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
}
.xz-item-img img{
    width: 100%;
    height: 100%;
}
.xz-item-tit{
    display: block;
    width: 90%;
    margin: 15px auto 10px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
}
.xz-item-label{
    font-size: 14px;
    text-align: center;
    color: #dadada;
    margin: 15px auto;
}
.xz-item-label span{
    margin-right: 3px;
    color: #009cff;
}
.xz-item-label i{
    color: #999999;
    margin-left: 3px;
}
.xz-item-time{
    font-size: 14px;
    color: #999999;
    text-align: center;
    margin-bottom: 10px;
}
.xz-item-intro{
    width: 90%;
    margin: 0 auto;
    height: 46px;
    font-size: 14px;
    color: #999999;
    line-height: 23px;
    overflow: hidden;      
    text-overflow: ellipsis;      
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    margin-bottom: 20px;
}
.xz-item-intro span{
    font-weight: bold;
    color: #fe483a;
}
.xz-item-load{
    display: none;
    width: 100%;
    height:58px;
    font-size: 20px;
    text-align: center;
    line-height: 58px;
    color: #fff;
    background: #fe483a;
    margin-top: 18px;
}
.xz-item:hover .xz-item-load{
    display: block;
}
.xz-item:hover .xz-item-intro{
    display: none;
}
.xz-item:hover{
    transition: all 0.2s;
    transform: translateY(-10px);
    box-shadow: 0 0 10px #cccccc;
}
.xz-item:hover .xz-item-tit{
    color: #fe483a !important;
}
#page {
    clear: both;
    margin: 0px;
    height: auto;
    font-size: 15px;
    padding-top: 12px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 36px;
    text-align: center;
}

#page a.selected {
    color: #fff;
    background-color: #343434;
    border: 1px solid #343434;

}

#page a {
    box-shadow: 0px 0px 4px #f7f7f7;
    display: inline-block;
    height: 37px;
    line-height: 37px;
    padding: 0 16px;
    margin: 0 3px;
    color: #666;
    background-color: #fff;
  
    vertical-align: middle;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid #dddddd;
}

#page a:hover {
    display: inline-block;
    height: 37px;
    line-height: 37px;
    padding: 0 16px;
    margin: 0 3px;
    color: #fff !important;
    background-color: #343434;
   
    vertical-align: middle;
    font-size: 15px;
    text-decoration: none;
}