.five { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content:
}
.col { width: calc(50% - 1rem); margin:5px; cursor: pointer;}
.front .img4 { width:100%; text-align:center;position: relative; display: inline-block; height: 80px;line-height: 80px;vertical-align: middle; overflow:hidden;}
.front img {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;max-width:100%; max-height:100%;}

.container {-webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; }
.front, .backl{
background-size:cover;
background-position:center;
-webkit-transition:-webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition:transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
text-align:center;
min-height:80px;
height:auto;
border-radius:9px;
color: #fff;
font-size: 1.5rem;
}
.backl {background: #cedce7;}
.front:after { width:100%;position: absolute; top: 0; left: 0; z-index: 1; width: 100%; content: ''; display: block; opacity: .6; background-color: #ff9100; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 40% auto; }
.container:hover .front, .container:hover .back { -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); }
.backl { position: absolute; top: 0; left: 0; width: 100%; }
.inner { -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); transform: translateY(-50%) translateZ(60px) scale(0.94); top: 50%; position: absolute; left: 0; width: 100%;font-size: .7em; -webkit-box-sizing: border-box;box-sizing: border-box;outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; }
.container .backl { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.container .front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.container:hover .backl { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.container:hover .front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.backl p{font-size:20px;}
.front .inner p{width:100%;height:80px;line-height:80px;position: relative;background-color:rgba(0,0,0,0.3);display:block;border-radius:9px;overflow:hidden;}
 @media screen and (max-width: 64rem) {
 .col {
 width: calc(25% - 1rem);
}
}
 @media screen and (max-width: 48rem) {
 .col {
 width: calc(50% - 1rem);
}
}
 @media screen and (max-width: 32rem) {
 .col {
 width: calc(50% - 1rem);
}
}

.mainbody2 { width:98%; margin:0 auto; overflow:hidden;font-family: Microsoft YaHei;}