.videos{padding:30px 0}.videos .cates{margin:20px 0}.videos .cates .video-nav{display:flex;justify-content:center}.videos .cates .video-nav li{margin:0 20px}.videos .cates .video-nav li a{padding:10px 35px;border:1px solid #bbb;border-radius:30px;text-decoration:none;font-size:16px;color:#333;display:block}.videos .cates .video-nav li.active a{background-color:#e54c4c;border-color:#e54c4c;color:#fff}.videos .video-list .vi-c{display:flex;flex-wrap:wrap;margin-left:-20px}.videos .video-list .video{width:280px;margin-left:20px;margin-bottom:20px;border:1px #ddd solid;cursor:pointer;transition:all .2s}.videos .video-list .video:hover{box-shadow:0 0 12px rgba(0,0,0,.3)}.videos .video-list .video .img{width:100%;position:relative;text-align:center}.videos .video-list .video .img img{max-width:100%;height:200px}.videos .video-list .video .img .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);display:flex;justify-content:center;align-items:center}.videos .video-list .video .img .mask i{font-size:30px;color:#fff}.videos .video-list .video .text{padding:10px}.videos .video-list .video .text .title{font-size:17px;font-weight:bolder;margin:0 0 10px}.videos.mobile-videos{padding:30px 0}.videos.mobile-videos .cates{margin:20px 0}.videos.mobile-videos .cates .video-nav{display:flex;justify-content:center}.videos.mobile-videos .cates .video-nav li{margin:0 10px}.videos.mobile-videos .cates .video-nav li a{padding:5px 15px;border:1px solid #bbb;border-radius:20px;text-decoration:none;font-size:14px;color:#333;display:block}.videos.mobile-videos .cates .video-nav li.active a{background-color:#e54c4c;border-color:#e54c4c;color:#fff}.videos.mobile-videos .video-list .vi-c{display:flex;flex-wrap:wrap;margin-left:-20px}.videos.mobile-videos .video-list .video{width:100%;margin-left:20px;margin-bottom:20px;border:1px #ddd solid;cursor:pointer;transition:all .2s}.videos.mobile-videos .video-list .video:hover{box-shadow:0 0 12px rgba(0,0,0,.3)}.videos.mobile-videos .video-list .video .img{width:100%;position:relative;text-align:center}.videos.mobile-videos .video-list .video .img img{max-width:100%;height:200px}.videos.mobile-videos .video-list .video .img .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);display:flex;justify-content:center;align-items:center}.videos.mobile-videos .video-list .video .img .mask i{font-size:30px;color:#fff}.videos.mobile-videos .video-list .video .text{padding:10px}.videos.mobile-videos .video-list .video .text .title{font-size:17px;font-weight:bolder;margin:0 0 10px}