.fqj{width:50%;overflow:hidden;height:100%;position:relative;background:#b0b0b0;float:left;}
.fqj:nth-child(2){background:#cdcdcd;}
.fqj_3{width:100%;height:100%; opacity: 0;transition: opacity .5s ease-in-out;}
.fqj_3 img{width:100%;height:100%;}
.fqj_1{position:absolute;top:21.6%;left:0px;text-align:center;width:100%;opacity:1;transition: opacity .5s ease-in-out;will-change: opacity;}
.fqj_1 font{display:inline-block;color:#000000;font-size:14.2vh;line-height:1;}
.fqj_1 p{display:inline-block;color:#000000;font-size:.26rem;}

.fqj_4{position:absolute;top:21.6%;left:0px;text-align:center;width:100%;opacity:0;transition: opacity .5s ease-in-out;will-change: opacity;}
.fqj_4 font{display:inline-block;color:#fff;font-size:14.2vh;line-height:1;}
.fqj_4 p{display:inline-block;color:#fff;font-size:.26rem;}

.fqj_2{position:absolute;left:0px;bottom:21.6%;width:100%;text-align:center;}
.fqj_2 img{width:6.06rem;}
.fqj:hover .fqj_3{opacity:1;}
.fqj:hover .fqj_1{opacity:0;}
.fqj:hover .fqj_4{opacity:1;} 

@media (max-width: 999px)
{
    .fqj_1{top:20px;}
    .fqj_1 font{font-size:20px;}
    .fqj_1 p{font-size:16px;}
    .fqj_4{top:20px;}
    .fqj_4 font{font-size:20px;}
    .fqj_4 p{font-size:16px;}
    .fqj_2{bottom:20px;}
    .fqj_2 img{max-width:80%;}
}
@media (max-width: 640px)
{
	.fqj{width:100%;height:calc(50vh - 150px);}
}