.cxfw {
 display: flex;
 flex-wrap: wrap;
}

.cxfw li {
 width: 19.57vw;
 height: 13.2vw;
 margin-right: 1.89vw;
 margin-bottom: 2.29vw;
 box-sizing: border-box;
}
.cxfw.bottom li{
 width: 14.2vw;
}

.cxfw li:nth-child(3n) {
 margin-right: 0;
}
.cxfw.bottom li:nth-child(4n) {
  margin-right: 0;
}
.cxfw.bottom li:nth-child(3n) {
 margin-right: 1.89vw;;
}
.cxfw li>a {
 display: block;
 width: 100%;
 height: 100%;
 background: #fff;
 border-top: 0.23vw solid #245CCE;
 box-sizing: border-box;
 text-align: center;
 padding: 1.88vw 1.93vw 0;
 position: relative;
 transition: all 0.2s;
box-shadow: 0px 11px 17px 0px rgba(29, 61, 171, 0.1);
}

.cxfw li>a img.default {
 width: 3.13vw;
 height: 2.93vw;
 margin-bottom: 1.04vw;
}

.cxfw li>a h1 {
 font-size: 1.47vw;
 position: relative;
 color: #252B42;
}

.cxfw li>a h1.titlehover {
 display: none;
}

.cxfw li>a>p {
 font-size: 0.64vw;
 color: #737373;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 margin-top: 1.88vw;
 padding: 0 4vw;
}
.cxfw.bottom li>a>p{
 padding: 0 2vw;
}
.cxfw li>a img.hover {
 display: none;
}
.cxfw.bottom li>a img.hover{
 width: 5vw;
 height: auto;
}

.cxfw li>a h1::after {
 content: '';
 width: 2.29vw;
 height: 0.09vw;
 background: #8E8E8E;
 position: absolute;
 bottom: -1vw;
 left: 50%;
 transform: translateX(-50%);
}

.cxfw li>a:hover {
 background: #375CDD;
 color: #fff;
 padding-top: 1vw;
 border-color: #FAD7A1;
 padding-left: 1.04vw;
}

.cxfw li>a:hover .default {
 display: none;
}

.cxfw li>a:hover .hover {
 display: block;
}

.cxfw li>a img.hover {
 /* width: 6.3vw; */
 height: 6.3vw;
}

.cxfw li>a:hover h1 {
 color: #fff;
 position: absolute;
 right: 1.97vw;
 top: 4vw;
}
.cxfw.bottom li>a:hover h1{
 top: 3vw;
 font-size: 1.2vw;
}
.cxfw li>a:hover h1.titlehover {
 display: block;
}

.cxfw li>a:hover h1.titledefault {
 display: none;
}

.cxfw li>a:hover h1::after {
 background: #fff;
 right: 0;
 left: inherit;
 transform: none;
}

.cxfw li>a:hover>p {
 color: #fff;
 padding: 0;
 white-space: normal;
 text-overflow: inherit;
 margin-top: 1vw;
 text-align: justify;
}

@media screen and (max-width:768px) {
 .cxfw li {
 width: 100%;
 height: 42vw;
 margin-right: 0;
 margin-bottom: 2vw;
 }
 .cxfw.bottom li{
  width:100%;
 }
 .cxfw li>a:hover {
 padding-top: 2vw;
 padding-left: 2vw;
 }
 .cxfw li>a {
 width: 100%;
 height: 100%;
 ;
 padding: 2vw 2vw 0;
 }
 .cxfw li>a img.default {
 width: 18vw;
 height: 16vw;
 margin-bottom: 2vw;
 }
 .cxfw li>a img.hover {
 width: 12vw;
 height: 12vw;
 }
 .cxfw li>a h1 {
 font-size: 22px;
 }
 .cxfw li>a h1::after {
 width: 15vw;
 }
 .cxfw li>a>p {
 font-size: 14px;
 margin-top: 4vw;
 padding: 0 4vw;
 }
}