@charset "utf-8";
body {
	margin:0;
	padding:0;
	background: url(/pubimages/web/scjg2017_jggk_bodybg2.jpg) no-repeat center top #fff; background-size:cover;  
	
}
.width1200{ width:1200px; margin:0 auto;}
.libox ul li{ float:left; margin:0 49px 49px 0; width:350px; height:150px; position:relative;    -webkit-transition: all .3s;
    transition: all .3s;}

.libox ul li:nth-child(3n){ margin:0 0 49px 0;}
.libox ul li:nth-child(1){ background:rgba(49,91,175,0.5)}
.libox ul li:nth-child(1):hover{background:rgba(49,91,175,1)}

.libox ul li:nth-child(2){ background:rgba(49,175,85,0.5)}
.libox ul li:nth-child(2):hover{ background:rgba(49,175,85,1)}

.libox ul li:nth-child(3){ background:rgba(192,82,178,0.5)}
.libox ul li:nth-child(3):hover{ background:rgba(192,82,178,1)}


.libox ul li:nth-child(4){ background:rgba(175,49,49,0.5)}
.libox ul li:nth-child(4):hover{ background:rgba(175,49,49,1)}

.libox ul li:nth-child(5){ background:rgba(144,175,49,0.5)}
.libox ul li:nth-child(5):hover{ background:rgba(144,175,49,1)}

.libox ul li:nth-child(6n){ margin:0 0 49px 0;}
.libox ul li:nth-child(6){ background:rgba(49,175,162,0.5)}
.libox ul li:nth-child(6):hover{ background:rgba(49,175,162,1)}


.libox ul li:nth-child(7){ background: rgba(3, 26, 103, 0.5);}
.libox ul li:nth-child(7):hover{background: rgba(3, 26, 103, 1);}
.path {
 font-size: 14px;
    color: #4A4848;;
    text-align: right;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right: 53px;
}
.path a{ color: #4A4848;;}
 .libox .content img{width:78px;height:78px;}
.content{ width:215px; height:80px; position:absolute; top:50%; left:50%; margin-left:-99px; margin-top:-35px;}

.content i{ display:inline-block; width:70px; height:70px; position:absolute; top:0; left:0; z-index:999 ; -webkit-transition: all .3s;
    transition: all .3s;}
.libox ul li:hover .content i{ display:inline-block; width:101px; height:101px; position:absolute; top:-10px; left:0; z-index:999 }
.content h2{ font-size:20px; color:#fff; text-align:center; font-weight:normal;     margin-left: 78px;  height: 80px; line-height: 80px;}
.content span{ display:block; font-size:16px;text-align:right;}
.toptitle{ text-align:center; padding:34px 0 40px 0;}
.ztfoot{ text-align:center; padding-top:15px; color:#fff; opacity:0.6;}

@media screen and (min-width:300px) and (max-width:960px) {
.width1200{ width:100%; margin:0 auto; padding:0 15px; box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
.libox ul li{ float:left; margin:0 0px 15px 0; width:100%; height:150px; position:relative;    -webkit-transition: all .3s;
    transition: all .3s; border-radius:5px;}
.libox ul li a{ display:block; width:100%; height:150px;  
 }
.libox ul li:nth-child(3n){ margin:0 0 15px 0;}
.libox ul li:nth-child(1){ background:rgba(49,91,175,0.5)}
.libox ul li:nth-child(1):hover{background:rgba(49,91,175,1)}
.libox ul li:nth-child(1) span{ color:#9daefb;}
.libox ul li:nth-child(2){ background:rgba(49,175,85,0.5)}
.libox ul li:nth-child(2):hover{ background:rgba(49,175,85,1)}
.libox ul li:nth-child(2) span{ color:#d5ffdf;}
.libox ul li:nth-child(3){ background:rgba(192,82,178,0.5)}
.libox ul li:nth-child(3):hover{ background:rgba(192,82,178,1)}
.libox ul li:nth-child(3) span{ color:#fbddf5;}

.libox ul li:nth-child(4){ background:rgba(175,49,49,0.5)}
.libox ul li:nth-child(4):hover{ background:rgba(175,49,49,1)}
.libox ul li:nth-child(4) span{ color:#f799a0;}
.libox ul li:nth-child(5){ background:rgba(144,175,49,0.5)}
.libox ul li:nth-child(5):hover{ background:rgba(144,175,49,1)}
.libox ul li:nth-child(5) span{ color:#f8fba3;}
.libox ul li:nth-child(6){ background:rgba(49,175,162,0.5)}
.libox ul li:nth-child(6):hover{ background:rgba(49,175,162,1)}
.libox ul li:nth-child(6) span{ color:#98e0e2;}

 
.content{ width:215px; height:80px; position:absolute; top:50%; left:50%; margin-left:-107px; margin-top:-40px;}

.content i{ display:inline-block; width:101px; height:80px; position:absolute; top:0; left:0; z-index:999 ; -webkit-transition: all .3s;
    transition: all .3s;}
	.content i img{ width:80%; height:auto;}
.libox ul li:hover .content i{ display:inline-block; width:101px; height:101px; position:absolute; top:-10px; left:0; z-index:999 }
.content h2{ font-size:20px; color:#fff; text-align:right; font-weight:normal; padding-top:20px;}
.content span{ display:block; font-size:16px;text-align:right;}
.toptitle{ text-align:center; padding:55px 0 40px 0;}
.toptitle img{ width:90%; height:auto;}
.ztfoot{ text-align:center; padding-top:10px; color:#fff; opacity:0.6; padding-bottom:35px}

	}



 @media screen and (min-width:300px) and (max-width:960px) {

}