main { width: 1376px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .banner-column, .swiper, .swiper-slide img { width: 663px; height: 443px; } .swiper-slide { position: relative; } .swiper-slide .title { position: absolute; bottom: 0; padding-left: 32px; width: 450px; height: 50px; line-height: 50px; background: rgba(190, 2, 2, 0.33); color: #fff; } .banner-column .swiper-pagination { text-align: right; } .banner-column .cutover { text-align: center; display: inline-block; background: #f8b93b; width: 25px; height: 25px; line-height: 25px; color: #fff; border-radius: 5px; } .column { width: 663px; height: 447px; color: #515151; margin-bottom: 30px; } .column a { color: #515151; } .video-column { width: 1376px; margin-bottom: 30px; } .icon-xxlh { background: url(/uploads/image/limages/xxlh.png) no-repeat center center; } .icon-gzdt { background: url(/uploads/image/limages/gzdt.png) no-repeat center center; } .icon-xlsc { background: url(/uploads/image/limages/xlsc.png) no-repeat center center; } .icon-jcsj { background: url(/uploads/image/limages/jcsj.png) no-repeat center center; } .column .top { display: flex; justify-content: space-between; font-family: microsoft yahei; color: #515151; line-height: 40px; } .column .top .title { font-size: 24px; } .column .top .more { padding-right: 16px; background: url(/uploads/image/limages/more.png) no-repeat right center; font-size: 16px; color: #515151; } .column .line { height: 2px; background: #be0202; margin-left: 32px; } .column .list { margin: 0; padding: 0; list-style: none; } .column .list li { margin-top: 30px; padding-bottom: 16px; display: flex; justify-content: space-between; border-bottom: dashed 1px #84988e; } .column .list li a::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #be0202; border-radius: 50%; margin-right: 8px; } .video-column .title { line-height: 40px; font-size: 24px; color: #515151; } .video-column .line { margin: 8px 0 30px 37px; width: 96px; height: 2px; background: #be0202; } .video-column .list { margin: 0 30px; padding: 0; list-style: none; display: flex; justify-content: space-between; } .video-column .list li { position: relative; } .video-column .list li img.cover { width: 320px; height: 200px; } .video-column .list li .mask { position: absolute; left: 100px; top: 50px; width: 100px; height: 100px; background: rgba(0,0,0,.5); border-radius: 5px; } .video-column .list li .mask img { margin: 15px 15px; width: 70px; }