.content-inner-box { width: 1170px; margin: 0 auto; } .brum { width: 1170px; margin:0 auto; color:#333333; font-size: 14px; margin-top: 28px; margin-bottom: 28px; } .video-top { display: flex; margin-bottom: 96px; } .recommend-video { cursor: pointer; width: 630px; height: 354px; margin-right: 90px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } .recommend-video .play { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .recommend-right { padding: 44px 0; display: flex; flex-direction: column; justify-content: space-between; } .recommend-right-title { font-size: 32px; font-weight: 600; color: #333333; line-height: 45px; } .video-title-list { display: flex; justify-content: space-between; margin: 25px 0 28px 0; } .video-title-list li { cursor:pointer; height: 40px; width: 218px; border-radius: 2px; color: #314659; border: 1px solid #CED4D9; font-size: 16px; text-align: center; line-height: 40px; } .video-title-list .current { color: #FFFFFF; background: #2F54EB; } .video-bottom .video-con { display: flex; flex-wrap: wrap; } .video-con-list { width: 373px; margin: 0 20px 30px 0px; border: 1px solid #EDEDED; } .detail-container { min-height:640px; } .video-con-list:nth-child(3n+3) { margin-right: 0px; } .video-item { cursor:pointer; height: 211px; margin-bottom: 20px; background-color: rgb(207, 203, 203); position: relative; background-size: cover; } .video-item .play { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .video-item__title { font-size: 18px; font-weight: 600; color: #000000; line-height: 25px; letter-spacing: 1px; margin:0px 20px; min-height: 48px } .video-item-time { color: #999999; line-height: 30px; font-size: 14px; text-align: left; padding-left: 24px; background: url(../img/live-courier_time.png) no-repeat left; margin-bottom: 10px; margin-left: 20px; } /* 弹窗 */ .VideoPlay { width: 100%; height: 100%; position: fixed; z-index: 111111001; top: 0; left: 0; background: rgba(0,0,0,0.7); display: none; } .videoBox { width: auto; height: 75%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; border: 4px solid #ffffff; } .videoBox div:first-child { height: 100%; } .videoBox video { width: auto; height: 100%; object-fit: cover; } .closevideo { cursor: pointer; width: .4rem; height: .4rem; position: absolute; top: -.04rem; right: -.46rem; background-color: #ffffff; } .closevideo img { width: .4rem; } @media (max-width: 768px) { .videoBox,.videoBox video { width: 7.6rem; height: auto; } .closevideo{ top: -.4rem; right: 0rem; } }