.box1 img,.box1:after,.box1:before{width:100%;transition:all .3s ease 0s}
.icon,.box4,.icon li a{text-align:center}
.box4:before{content:""}
.box4,.icon li a{overflow:hidden}
.box4 .title{letter-spacing:1px}
.box4 .post{font-style:normal}

.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mb-30{margin-bottom:0px}


/*********************** Box 4*******************/
.box4{position:relative}
.box4:before{width:0;height:200%;background:rgba(0,0,0,.5);position:absolute;top:0;left:-250px;bottom:0;transform:skewX(-36deg);transition:all .5s ease 0s}
.box4:hover:before{width:200%}
.box4 img{width:100%;height:auto}
.box4 .box-content{width:100%;height:100%;padding-top:10%;position:absolute;top:0;left:0;transform:scale(0);transition:all .3s ease 0s}
.box4 .icon,.box5 .icon{list-style:none;padding:0}
.box4:hover .box-content{transform:scale(1)}
.box4 .title{font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box4 .post{display:block;font-size:1rem;font-weight:400;color:#fff;margin-bottom:10px}
.box4 .icon{margin:0}
.box4 .icon li{display:inline-block}
.box4 .icon li a{display:block;width:35px;height:35px;line-height:35px;font-size:20px;background:#fff;color:#ee4266;margin-right:10px;transition:all .3s ease 0s}

@media only screen and (max-width:990px){.box4{margin-bottom:30px}
}
@media only screen and (max-width:767px){
    .box4:before{left:-400px}
    .box4:hover:before{width:300%}
    .box4 .box-content{width:100%;height:100%;padding-top:3%;position:absolute;top:0;left:0;transform:scale(0);transition:all .3s ease 0s}
}