.live-box .obl-mian { max-width: 1200px; margin-top: 20px; font-size: 0; -webkit-text-size-adjust:none; } .live-box .obl-mian .obl-box { position: relative; font-size: 14px; display: inline-block; width: 23.75%; color: #666; margin: 0 0 0 1%; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0px 2px 2px 0px rgba(7, 17, 27, 0.2); position: relative; transition: all 0.25s linear; box-sizing: border-box; cursor: pointer; } .live-box .obl-mian .obl-box1 { margin-left: 0; } .live-box .obl-mian .obl-box .live-time { width: 100%; text-align: center; padding: 2%; font-size: 16px; font-weight: bold; background-color: rgba(0,0,0,0.35); color: #fff; position: absolute; bottom: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .live-box .obl-mian .obl-box .live-label { display: block; padding: 2.2% 3.2%; font-size: 15px; line-height: 15px; background-color: rgba(0,153,255,0.9); color: #fff; text-align: center; border-radius: 0 15px 15px 0; position: absolute; left: 0; top: 4%; } .live-box .obl-mian .obl-box .live-label .live-sign { display: inline-block; width: 6px; height: 6px; border-radius: 10px; background-color: #f14f49; vertical-align: top; margin: 4.5px 4px 0 0; } .live-box .obl-box .playback { background-color: rgba(0,0,0,0.4)!important; } .live-box .obl-mian .obl-box .play-hover { width: 100%; position: relative; } .live-box .obl-mian .play-hover .play-box { position: absolute; top: 0; opacity: 0; filter: alpha(opacity=0); width: 100%; height: 100%; background: rgba(0, 0, 0, .35); background-image: initial; background-position-x: initial; background-position-y: initial; background-size: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgba(0, 0, 0, 0.35); transition: all .5s; transition-property: all; transition-duration: 0.5s; transition-timing-function: initial; transition-delay: initial; } .live-box .obl-mian .obl-box .play-hover .play-img { display: block; width: 100%; border: none; border-radius: 6px 6px 0 0; } .live-box .obl-mian .play-hover .play-box .play { display: block; width: 18%; position: absolute; left: 50%; top: 50%; margin-left:-10%; margin-top:-20px; transform: translate(0, -25%); border: none; } .live-box .obl-mian .obl-box .obl-con { padding: 5%; height: 40%; box-sizing: border-box; } .live-box .obl-mian .obl-box .obl-con p { font-size: 16px; color: #333; line-height: 21px; height: 42px; margin: 0 0 10px 0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .live-box .obl-mian .obl-box .obl-con .views { height: 22px; line-height: 22px; font-size: 12px; color: #666; } .live-box .obl-mian .obl-box .obl-con .views .views-num { float: right; } .live-box .obl-mian .obl-box .obl-con .views .views-num .num { color: #09f; margin: 0 6px; } .live-box .obl-mian .obl-box .obl-con .views .views-place { display: inline-block; line-height: 12px; font-size: 12px; color: #fff; padding: 5px 6px; background: #09f; border-radius: 2px; } .live-box .obl-mian .obl-box:hover { box-shadow: 0px 10px 10px 0px rgba(7,17,27,0.2); transform:translate(0px,-6px); } .live-box .obl-mian .obl-box .play-hover:hover .play-box { opacity: 1; filter: alpha(opacity=100); }