.banner { margin-top: 20px; }

.swiper-container { width: 100%; height: 100%; }

.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

.swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color: #fff; opacity: 1; background: rgba(0, 0, 0, 0.2); }

.swiper-pagination-bullet-active { color: #fff; background: #007aff; }

.swiper-slide img { width: 100%; }

.course-box { padding: 3px; border: 1px solid #CFDEE6; text-align: center; font-size: 13px; }

.course-box .rukou { border-bottom: 1px solid #CFDEE6; padding: 5px; font-size: 15px; background-color: #48ABDE; color: white; }

.course-box .course { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 5px 15px; }

.course .item { width: 28%; border: 1px solid #CFDEE6; margin: 5px 0; padding: 2%; }

.course .item img { width: 110px; height: 120px; transition: all 1s; }

.course .item:hover img { transform: scale(1.2); }

.course .item div { font-size: 17px; font-weight: bold; margin: 10px 0; color: #555; }

.course .item:hover div { color: #006395 }

.video-title { color: #555; font-size: 20px; line-height: 40px; cursor: pointer; display: block; }

.video-box { border: #ccc 1px solid; background: #fff; padding: 15px; overflow: hidden; }

.video-box .video { width: 280px; height: 231px; float: left; border: #fff 1px solid; padding: 10px; overflow: hidden; font-size: 14px; }

.video-box .video .img { height: 150px; width: 100%; overflow: hidden; display: flex; align-items: center; }

.video-box .video .img img { max-width: 100%; }

.video-box .video .title { width: 270px; line-height: 20px; padding: 10px 0; text-overflow: ellipsis; height: 40px; color: #555; display: block; font-size: 14px; }

.video-box .video .footer .look { font-weight: 700; color: #09f; float: left; }

.video-box .video .footer .name,
.video-box .video .footer .xueshi { color: #aaa; float: right; }

.video-box .video .footer .xueshi { display: none; }

.video-box .video:hover { border: #09f 1px solid }

.video-box .video:hover .footer .xueshi { display: block; }

.video-box .video:hover .footer .name { display: none; }