.mediaCom .li_0, .mediaCom .li_1, .mediaCom .li:first-child, .mediaCom .li:nth-child(2){ width: calc((100% - 20px)/2); margin-bottom: 20px; } .mediaCom .li { margin-right: 20px; box-sizing: border-box; overflow: hidden; } .mediaCom .li .con { height: 400px; } .mediaCom .li:nth-child(2), .mediaCom .li:nth-child(5) { margin-right: 0; } .mediaCom .li_2, .mediaCom .li_4, .mediaCom .li:nth-child(3), .mediaCom .li:nth-child(5){ width: 420px; } .mediaCom .li_3, .mediaCom .li:nth-child(4){ width: calc(100% - 880px); } .mediaCom .hideCon { position: absolute; left: 0; bottom: 0; right: 0; padding: 20px; background: linear-gradient(0, rgba(0,0,0,0.75), transparent); flex-direction: column; opacity: 0; } .mediaCom .con:hover .hideCon{ animation: coonShow .3s linear forwards; } @keyframes coonShow{ from{opacity: 0;} to{opacity: 1;} } .mediaContact .left{ background: url(../images/mLeft.png) no-repeat center; background-size: 100% auto; width: 100%; height: 280px; } .mediaContact .right{ background: url(../images/mRight.png) no-repeat center; background-size: 100% auto; width: 100%; height: 280px; } .mediaContact .con{ /*height: 100px;*/ flex-direction: column; } .mediaContact .li:hover{ box-shadow: 0px 8px 20px 1px rgba(50, 51, 51, 0.19); transition: all .3s; } .news .li:hover img , .soluBox .li:hover img{ transform: scale(1.1); } .soluBox .li{ background:#eaeaea; min-width:(50% - 20px); margin-right: 20px; } .soluBox .li:nth-child(2n-1){ flex-direction: row-reverse; } .soluBox .li:nth-child(2n){ margin-right: 0; } @media screen and (max-width: 768px) { .mediaCom .li .con{ height: 200px; } .mediaCom .li{ width: 100% !important; margin: 0 auto 20px !important; } .mediaCom .hideCon{ opacity: 1; } }