.sfq-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 430px;
}

.sfq-box {
  flex: 1;
	height: 430px;
  overflow: hidden;
  transition: .5s;
  margin: 0;
/*  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);*/
  line-height: 0;
	background: #000;
	margin-right: 10px;
}

.sfq-box > img {
  width: 100%;
  height: 430px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: .5s;
}


.sfq-box:hover {
  flex: 1 1 11%;
  transition: .5s;
}

.sfq-box:hover > img {
  width: auto;
  height: 430px;
  transition: .5s;
}


.sfq-box .blue-bg{width:100%; height: 145px; position: relative; bottom: 145px; background-color:rgba(0,124,194,0.8);transition: .4s transform;}
.sfq-box .blue-bg .title1{width:100%; text-align: center;color: #fff; font-size: 18px; font-weight: bold; margin-top: 12%; position: absolute}
.sfq-box .blue-bg .line{width:70%;height: 1px; background: #fff; opacity: 0.5; margin: auto;margin-top: 19%; margin-left: 15%; position: absolute}
.sfq-box .blue-bg .title2{width:100%; color: #fff; text-align: center;opacity: 0.6;margin-top: 26%; position: absolute}
.sfq-box .blue-bg .title3{width:100%; color: #fff;text-align: center;opacity: 0.8;margin-top: 34%; position: absolute}


.sfq-box:hover .blue-bg{height: 50%;bottom: 50%;transition: .4s transform; }

.sfq-title{width:100%; margin: auto; overflow: hidden; text-align: center; font-size: 2.2em; font-family: "宋体"; font-weight: bold; margin: 2% 0; color: #000}
.sfq-title span{display:block; color: #134f97; text-transform: uppercase; font-size: 0.7em;}

/*<1300*/
@media screen and (max-width:1299px) 
{
	.sfq-box:hover {
  flex: 1 1 17%;
}
	

/*<1200*/
@media screen and (max-width:1199px) 
{
	.sfq-box:hover {
  flex: 1 1 20%;
}
		
	
/*<1100*/
@media screen and (max-width:1099px) 
{
	.sfq-box:hover {
  flex: 1 1 24%;
}
		
/*<1000*/
@media screen and (max-width:999px) 
{
	.sfq-box:hover {
  flex: 1 1 30%;
}		
/*<950*/
@media screen and (max-width:949px) 
{
	.sfq-box:hover {
  flex: 1 1 35%;
}	
/*<750*/
@media screen and (max-width:750px) 
{
	.sfq-box:hover {
  flex: 1 1 50%;
}		
/*<620*/
@media screen and (max-width:620px) 
{
	.sfq-container{display:none}
}