.content-center {
  width: 1200px;
  margin: 0 auto;
}
.content-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.backImg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.title {
  display: block;
  width: 100%;
  text-align: center;
}
.desc {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.tl,
.tl-s,
.desc-tl,
.desc-s {
  display: block;
  text-align: center;
}
#wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #ffffff;
}
#wrap #header {
  width: 100%;
  height: 550px;
}
#wrap #header .header-nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 90px;
  z-index: 999;
}
#wrap #header .header-nav .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 1200px;
  height: 100%;
  padding: 10px 0;
}
#wrap #header .header-nav .nav .logo {
  width: 175px;
  padding: 10px 0;
  line-height: 100%;
  cursor: pointer;
}
#wrap #header .header-nav .nav .logo img {
  width: 100%;
}
#wrap #header .header-nav .nav .nav-bar {
  width: 880px;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#wrap #header .header-nav .nav .nav-bar li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 4px solid transparent;
  transition: 0.3s;
}
#wrap #header .header-nav .nav .nav-bar li a {
  display: block;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  text-decoration: none;
}
#wrap #header .header-nav .nav .nav-bar li .nav-model {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 100%);
  width: 140px;
  padding-top: 30px;
}
#wrap #header .header-nav .nav .nav-bar li .nav-model .model-main {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 10px;
}
#wrap #header .header-nav .nav .nav-bar li .nav-model .model-main div {
  width: 100%;
  height: 40px;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
}
#wrap #header .header-nav .nav .nav-bar li .nav-model .model-main div a {
  line-height: 40px;
  text-align: center;
  color: #858585;
}
#wrap #header .header-nav .nav .nav-bar li .nav-model .model-main div:nth-last-child(1) {
  border: none;
}
#wrap #header .header-nav .nav .nav-bar li:hover {
  border-color: #ffffff;
}
#wrap #header .header-nav .nav .nav-bar li:hover .nav-model {
  display: block;
}
#wrap #header .header-nav .nav .nav-bar .active {
  border-bottom: 4px solid #ffffff;
}
#wrap #header .banner {
  width: 100%;
  min-width: 1200px;
  height: 100%;
}
#wrap #header .banner .swiper-container {
  width: 100%;
  height: 100%;
}
#wrap #header .banner .swiper-container img {
  display: block;
  width: 100%;
  height: 100%;
}
#wrap #header .banner .swiper-container .swiper-slide {
  position: relative;
}
#wrap #header .banner .swiper-container .swiper-slide .center {
  position: absolute;
  width: 1200px;
  height: 550px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../images/onlineClassroom/images/center_02.png");
}
#wrap #header .banner .swiper-container .swiper-pagination {
  margin-bottom: 26px;
}
#wrap #header .banner .swiper-container .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.3;
}
#wrap #header .banner .swiper-container .swiper-pagination-bullet-active {
  background: #ffffff;
  opacity: 1;
}
#wrap #content .introduce {
  height: 900px;
  background: #ffffff;
  overflow: hidden;
}
#wrap #content .introduce .list {
  display: flex;
  justify-content: space-between;
  padding-top: 77px;
  width: 100%;
}
#wrap #content .introduce .list .item {
  width: 170px;
  height: 170px;
  border-radius: 10px;
  transition: 0.3s;
}
#wrap #content .introduce .list .item .icon {
  display: block;
  margin: 22px auto 0;
  width: 68px;
  height: 84px;
  background-image: url("../images/onlineClassroom/images/jinglingtu.png");
  background-repeat: no-repeat;
}
#wrap #content .introduce .list .item .desc-tl {
  width: 100%;
  font-size: 20px;
  line-height: 20px;
  margin-top: 26px;
  color: #ae51fe;
}
#wrap #content .introduce .list .item:hover {
  background-color: #ae51fe;
}
#wrap #content .introduce .list .item:hover .desc-tl {
  color: #ffffff;
}
#wrap #content .introduce .list .item:nth-child(1) .icon {
  background-position: -16px -34px;
}
#wrap #content .introduce .list .item:nth-child(2) .icon {
  background-position: -218px -32px;
}
#wrap #content .introduce .list .item:nth-child(3) .icon {
  background-position: -420px -32px;
}
#wrap #content .introduce .list .item:nth-child(4) .icon {
  width: 100px;
  background-position: -607px -32px;
}
#wrap #content .introduce .list .item:nth-child(5) .icon {
  background-position: -824px -28px;
}
#wrap #content .introduce .list .item:nth-child(6) .icon {
  background-position: -1026px -28px;
}
#wrap #content .introduce .list .item:nth-child(1):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .list .item:nth-child(2):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .list .item:nth-child(3):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .list .item:nth-child(4):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .list .item:nth-child(5):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .list .item:nth-child(6):hover .icon {
  background-position-y: -218px;
}
#wrap #content .introduce .title {
  padding-top: 88px;
  font-size: 30px;
  line-height: 30px;
  color: #3a3a3a;
}
#wrap #content .introduce .tree {
  position: relative;
  margin-top: 24px;
}
#wrap #content .introduce .tree .line {
  position: relative;
  margin: 0 auto;
  width: 4px;
  height: 530px;
  background-color: #342db3;
}
#wrap #content .introduce .tree .line .line-lf,
#wrap #content .introduce .tree .line .line-rt {
  position: relative;
}
#wrap #content .introduce .tree .line .line-lf span,
#wrap #content .introduce .tree .line .line-rt span {
  display: block;
}
#wrap #content .introduce .tree .line .line-lf .dt,
#wrap #content .introduce .tree .line .line-rt .dt {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #da32be;
  box-shadow: 0px 0px 18px 0px rgba(52, 45, 179, 0.79);
  border: solid 5px #342db3;
  border-radius: 50%;
}
#wrap #content .introduce .tree .line .line-lf .sq,
#wrap #content .introduce .tree .line .line-rt .sq {
  width: 82px;
  height: 4px;
  background-image: linear-gradient(-90deg, #342db3 0%, #ffffff 100%), linear-gradient(#da32be, #da32be);
}
#wrap #content .introduce .tree .line .line-lf .dt {
  top: -8px;
  right: -102px;
}
#wrap #content .introduce .tree .line .line-rt .dt {
  top: -8px;
  right: 0;
}
#wrap #content .introduce .tree .line .line-rt .sq {
  background-image: linear-gradient(-90deg, #ffffff 0%, #342db3 100%), linear-gradient(#da32be, #da32be);
}
#wrap #content .introduce .tree .line .item1 {
  top: 66px;
  left: -90px;
}
#wrap #content .introduce .tree .line .item2 {
  top: 152px;
  left: 12px ;
}
#wrap #content .introduce .tree .line .item3 {
  top: 252px;
  left: -90px;
}
#wrap #content .introduce .tree .line .item4 {
  top: 348px;
  left: 12px ;
}
#wrap #content .introduce .tree .item {
  position: absolute;
  width: 320px;
  background: #ffffff;
  box-shadow: 0 0 2px 4px #ffffff;
}
#wrap #content .introduce .tree .item .tl {
  font-size: 50px;
  line-height: 50px;
  color: #342db3;
  margin-bottom: 20px;
}
#wrap #content .introduce .tree .item .desc-tl {
  font-size: 16px;
  line-height: 16px;
  color: #292929;
}
#wrap #content .introduce .tree .lf .tl,
#wrap #content .introduce .tree .lf .desc-tl {
  text-align: right;
}
#wrap #content .introduce .tree .rt .tl,
#wrap #content .introduce .tree .rt .desc-tl {
  text-align: left;
}
#wrap #content .introduce .tree .item1 {
  top: 42px;
  left: 190px;
}
#wrap #content .introduce .tree .item2 {
  top: 134px;
  left: 690px;
}
#wrap #content .introduce .tree .item3 {
  top: 238px;
  left: 190px;
}
#wrap #content .introduce .tree .item4 {
  top: 338px;
  left: 690px;
}
#wrap #content .curriculum-introduction {
  height: 902px;
  background-image: url("../images/onlineClassroom/images/zaixianBanner_02.png");
}
#wrap #content .curriculum-introduction .title {
  position: relative;
  padding-top: 120px;
  padding-bottom: 52px;
  font-size: 30px;
  line-height: 30px;
  color: #fefefe;
  letter-spacing: 2px;
  z-index: 1;
}
#wrap #content .curriculum-introduction .title span {
  position: absolute;
  top: 130px;
  left: 660px;
  width: 136px;
  height: 30px;
  background-color: #cf41bb;
  opacity: 0.5;
  z-index: -1;
}
#wrap #content .curriculum-introduction .desc {
  font-size: 16px;
  line-height: 16px;
  color: #fffefe;
  padding-bottom: 6px;
}
#wrap #content .curriculum-introduction .cards {
  display: flex;
  justify-content: space-between;
  margin: 43px auto 0;
  width: 978px;
}
#wrap #content .curriculum-introduction .cards .card {
  width: 410px;
  height: 480px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
#wrap #content .curriculum-introduction .cards .card img {
  display: block;
  width: 100%;
  height: 230px;
}
#wrap #content .curriculum-introduction .cards .card .tl {
  font-size: 20px;
  line-height: 20px;
  color: #053aff;
  padding-top: 25px;
  padding-bottom: 21px;
}
#wrap #content .curriculum-introduction .cards .card .list {
  width: 100%;
  text-align: left;
  list-style: circle;
}
#wrap #content .curriculum-introduction .cards .card .list span {
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  color: #424242;
}
#wrap #content .curriculum-introduction .cards .card .list .circle {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #606060;
  margin-right: 11px;
  border-radius: 50%;
  margin-bottom: 2px;
}
#wrap #content .curriculum-introduction .cards .card .btn {
  display: block;
  margin: 28px auto 0;
  width: 280px;
  height: 48px;
  background-image: linear-gradient(180deg, #ce38ff 0%, #9806ff 100%), linear-gradient(#000000, #000000);
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 44px;
  color: #ffffff;
  cursor: pointer;
}
#wrap #content .curriculum-introduction .cards .card .pl132 {
  padding-left: 132px;
}
#wrap #content .curriculum-introduction .cards .card .pl83 {
  padding-left: 83px;
}
#wrap #content .system-introduction {
  height: 721px;
  background: #ffffff;
}
#wrap #content .system-introduction .title {
  position: relative;
  padding-top: 120px;
  margin-bottom: 45px;
  font-size: 30px;
  line-height: 30px;
  color: #3a3a3a;
  z-index: 2;
}
#wrap #content .system-introduction .title span {
  position: absolute;
  top: 128px;
  left: 731px;
  display: block;
  width: 121px;
  height: 30px;
  background-color: #cf41bb;
  opacity: 0.25;
  z-index: -1;
}
#wrap #content .system-introduction .desc {
  font-size: 16px;
  line-height: 28px;
  color: #292929;
}
#wrap #content .system-introduction .cards {
  width: 100%;
  margin-top: 43px;
  display: flex;
  justify-content: space-between;
}
#wrap #content .system-introduction .cards .card {
  width: 360px;
  height: 300px;
  background-color: #ffffff;
  box-shadow: 0px 10px 29px 3px rgba(9, 0, 40, 0.33);
  border-radius: 10px;
}
#wrap #content .system-introduction .cards .card .tl {
  padding-top: 40px;
  padding-bottom: 26px;
  font-size: 76px;
  line-height: 76px;
  color: #c514f1;
  font-weight: bold;
}
#wrap #content .system-introduction .cards .card .tl-s {
  font-size: 20px;
  line-height: 20px;
  color: #292929;
  margin-bottom: 23px;
}
#wrap #content .system-introduction .cards .card .desc-tl {
  margin: 0 auto;
  text-align: justify;
  width: 290px;
  font-size: 16px;
  line-height: 28px;
  color: #464646;
}
#wrap #content .experience-course {
  height: 844px;
  background-image: url("../images/onlineClassroom/images/sandapinleiBanner_02.png");
}
#wrap #content .experience-course .title {
  padding-top: 120px;
  padding-bottom: 52px;
  font-size: 30px;
  line-height: 30px;
  color: #ffffff;
}
#wrap #content .experience-course .desc {
  font-size: 16px;
  line-height: 16px;
  margin-bottom: 6px;
  color: #ffffff;
}
#wrap #content .experience-course .video-dom {
  display: flex;
  justify-content: space-between;
  margin-top: 49px;
  padding: 46px;
  width: 1200px;
  height: 422px;
  background-color: #ffffff;
  box-shadow: 0px 10px 29px 3px rgba(9, 0, 40, 0.33);
  border-radius: 10px;
}
#wrap #content .experience-course .video-dom .video-wrap {
  position: relative;
  width: 554px;
  height: 330px;
}
#wrap #content .experience-course .video-dom .video-wrap .bg {
  position: absolute;
  top: 25px;
  left: 277px;
  display: block;
  width: 554px;
  height: 50px;
  background-color: #000000;
  opacity: 0.7;
  border-radius: 0;
}
#wrap #content .experience-course .video-dom .video-wrap .bg:nth-child(2) {
  left: 277px;
  top: 305px;
}
#wrap #content .experience-course .video-dom .video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/onlineClassroom/images/video_07.png");
}
#wrap #content .experience-course .video-dom .video-wrap span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
}
#wrap #content .experience-course .video-dom .video-wrap span .i {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/onlineClassroom/images/jinglingtu.png");
  background-repeat: no-repeat;
  background-position: -22px -385px;
}
#wrap #content .experience-course .video-dom .info {
  margin-top: 27px;
  width: 509px;
}
#wrap #content .experience-course .video-dom .info .desc-tl {
  text-align: justify;
  font-size: 16px;
  line-height: 28px;
  color: #464646;
}
#wrap #content .experience-course .video-dom .info .btn {
  display: block;
  text-align: center;
  width: 280px;
  height: 48px;
  background-image: linear-gradient(180deg, #ce38ff 0%, #9806ff 100%), linear-gradient(#000000, #000000);
  border-radius: 8px;
  font-size: 20px;
  line-height: 44px;
  color: #ffffff;
  margin: 87px auto 0;
  cursor: pointer;
}
#wrap #content .teacher {
  height: 607px;
  background: #ffffff;
}
#wrap #content .teacher .line-title {
  width: 880px;
  margin: 0 auto;
  padding-top: 108px;
  padding-bottom: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#wrap #content .teacher .line-title .title {
  width: 120px;
  font-size: 30px;
  line-height: 30px;
  color: #3a3a3a;
}
#wrap #content .teacher .line-title .line {
  display: block;
  width: 360px;
  height: 1px;
  background-color: #3a3a3a;
}
#wrap #content .teacher #swiper04 {
  width: 100%;
  position: relative;
}
#wrap #content .teacher #swiper04 .swiper-container {
  width: 1065px;
  height: 320px;
}
#wrap #content .teacher #swiper04 .swiper-slide {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  /* 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;
}
#wrap #content .teacher #swiper04 .swiper-slide img {
  display: block;
  width: 240px;
  height: 100%;
  border-radius: 10px;
}
#wrap #content .teacher #swiper04 .swiper-slide .info {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 50px;
  background-color: rgba(150, 13, 255, 0.6);
  transition: 0.5s;
  border-radius: 0 0 10px 10px;
}
#wrap #content .teacher #swiper04 .swiper-slide .info .desc-s {
  font-size: 20px;
  line-height: 50px;
  color: #ffffff;
}
#wrap #content .teacher #swiper04 .swiper-slide .info .desc-tl {
  margin: -6px auto 0;
  width: 168px;
  text-align: justify;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  display: none;
}
#wrap #content .teacher #swiper04 .swiper-slide:hover .info {
  height: 320px;
  border-radius: 10px;
  align-items: center;
}
#wrap #content .teacher #swiper04 .swiper-slide:hover .info .desc-tl {
  display: block;
}
#wrap #content .teacher #swiper04 .next,
#wrap #content .teacher #swiper04 .prev {
  position: absolute;
  width: 44px;
  height: 44px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bolder;
  background-color: #cbcbcb;
  border-radius: 4px;
  transition: 0.5s background-color;
  top: 50%;
  transform: translateY(-50%);
}
#wrap #content .teacher #swiper04 .next {
  right: 0;
}
#wrap #content .teacher #swiper04 .prev {
  left: 0;
}
#wrap #content .teacher #swiper04 .next:hover,
#wrap #content .teacher #swiper04 .prev:hover {
  background-color: #960dff;
}
#wrap #content .teacher #swiper04 .swiper-button-prev::after,
#wrap #content .teacher #swiper04 .swiper-button-next::after {
  content: '' !important;
}
#wrap #content .teacher #swiper04 .swiper-button-prev,
#wrap #content .teacher #swiper04 .swiper-button-next {
  outline: none;
  margin-top: 0 !important;
}
#wrap #content .teacher #swiper04 .desc-tl {
  margin-top: 15px;
  font-size: 16px;
  line-height: 28px;
  color: #fefefe;
}
#wrap #content .customized-courses {
  height: 793px;
  background-image: url("../images/onlineClassroom/images/dingziBanner_02.png");
}
#wrap #content .customized-courses .title {
  padding-top: 120px;
  padding-bottom: 46px;
  font-size: 30px;
  line-height: 30px;
  color: #ffffff;
}
#wrap #content .customized-courses .desc {
  font-size: 16px;
  line-height: 28px;
  color: #fffefe;
}
#wrap #content .customized-courses .cards {
  width: 100%;
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
}
#wrap #content .customized-courses .cards .card {
  width: 580px;
  height: 220px;
  border-radius: 10px;
  border: solid 2px #ffffff;
}
#wrap #content .customized-courses .cards .card .tl {
  padding-top: 50px;
  padding-bottom: 29px;
  font-size: 40px;
  line-height: 40px;
  color: #ffffff;
}
#wrap #content .customized-courses .cards .card .desc-tl {
  margin: 0 auto;
  width: 487px;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
}
#wrap #content .customized-courses .btn {
  display: block;
  margin: 100px auto 0;
  width: 280px;
  height: 52px;
  background-color: #ffffff;
  border-radius: 8px;
  color: #3f3e37;
  font-size: 24px;
  line-height: 52px;
  text-align: center;
  cursor: pointer;
}
#wrap #content .community {
  height: 2839px;
  background: #ffffff;
}
#wrap #content .community .title {
  padding-top: 120px;
  padding-bottom: 48px;
  font-size: 30px;
  line-height: 30px;
  color: #3a3a3a;
}
#wrap #content .community .desc {
  font-size: 16px;
  line-height: 28px;
  color: #3a3a3a;
}
#wrap #content .community .list {
  padding-top: 50px;
  width: 100%;
}
#wrap #content .community .list .item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}
#wrap #content .community .list .item img {
  display: block;
  width: 700px;
  height: 450px;
  border-radius: 10px;
}
#wrap #content .community .list .item .info {
  padding-left: 50px;
  width: 410px;
  height: 100%;
}
#wrap #content .community .list .item .info .tl {
  text-align: left;
  padding-top: 100px;
  padding-bottom: 31px;
  font-size: 20px;
  line-height: 20px;
  color: #3a3a3a;
}
#wrap #content .community .list .item .info .desc-tl {
  text-align: left;
  font-size: 16px;
  line-height: 28px;
  color: #3a3a3a;
}
#wrap #content .community .list .item:nth-child(even) {
  flex-direction: row-reverse;
}
#wrap #content .community .list .item:nth-child(even) .info {
  padding-left: 0;
  padding-right: 50px;
}
#wrap #content .community .list .item:nth-child(even) .info .tl {
  text-align: right;
}
#wrap #content .community .list .item:nth-child(even) .info .desc-tl {
  text-align: right;
}
#wrap #content .honor-show {
  height: 1620px;
  background: #5b05ae;
}
#wrap #content .honor-show .title {
  padding-top: 120px;
  padding-bottom: 45px;
  font-size: 30px;
  line-height: 30px;
  color: #ffffff;
}
#wrap #content .honor-show .title:nth-child(2) {
  padding-top: 108px;
}
#wrap #content .honor-show .desc {
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
}
#wrap #content .honor-show .photos {
  width: 100%;
  margin-top: 43px;
  display: flex;
  justify-content: space-between;
}
#wrap #content .honor-show .photos .photo-l {
  width: 420px;
  height: 590px;
}
#wrap #content .honor-show .photos .photo-l img {
  display: block;
  width: 100%;
  height: 100%;
}
#wrap #content .honor-show .photos .photo-r {
  width: 723px;
}
#wrap #content .honor-show .photos .photo-r div {
  display: flex;
  justify-content: space-between;
}
#wrap #content .honor-show .photos .photo-r div img:nth-child(1) {
  width: 232px;
  height: 290px;
}
#wrap #content .honor-show .photos .photo-r div img:nth-child(2) {
  width: 462px;
  height: 290px;
}
#wrap #content .honor-show .photos .photo-r div:nth-child(2) {
  margin-top: 20px;
}
#wrap #content .honor-show .photos .photo-r div:nth-child(2) img:nth-child(1) {
  width: 232px;
  height: 280px;
}
#wrap #content .honor-show .photos .photo-r div:nth-child(2) img:nth-child(2) {
  width: 462px;
  height: 280px;
}
#wrap #content .honor-show #swiper05 {
  width: 100%;
  position: relative;
}
#wrap #content .honor-show #swiper05 .swiper-container {
  width: 1062px;
  height: 330px;
}
#wrap #content .honor-show #swiper05 .swiper-slide {
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  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;
}
#wrap #content .honor-show #swiper05 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
#wrap #content .honor-show #swiper05 .next,
#wrap #content .honor-show #swiper05 .prev {
  position: absolute;
  width: 44px;
  height: 44px;
  background-color: #cbcbcb;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bolder;
  border-radius: 4px;
  transition: 0.5s;
  top: 50%;
  transform: translateY(-50%);
}
#wrap #content .honor-show #swiper05 .next:hover,
#wrap #content .honor-show #swiper05 .prev:hover {
  background-color: #ffffff;
}
#wrap #content .honor-show #swiper05 .next {
  right: 0;
}
#wrap #content .honor-show #swiper05 .prev {
  left: 0;
}
#wrap #content .honor-show #swiper05 .next::after,
#wrap #content .honor-show #swiper05 .prev::after {
  content: '' !important;
}
#wrap #content .honor-show #swiper05 .swiper-button-prev,
#wrap #content .honor-show #swiper05 .swiper-button-next {
  outline: none;
  margin-top: 0 !important;
}
#wrap #content .honor-show #swiper05 .next:hover,
#wrap #content .honor-show #swiper05 .prev:hover {
  color: #5b05ae;
}
#wrap #content .honor-show #swiper05 .desc-tl {
  margin-top: 15px;
  font-size: 16px;
  line-height: 28px;
  color: #fefefe;
}
#wrap #content .honor-show .btn {
  display: block;
  text-align: center;
  margin: 49px auto 0;
  width: 280px;
  height: 52px;
  background-color: #ffffff;
  border-radius: 8px;
  color: #4d04b5;
  font-size: 26px;
  line-height: 52px;
  cursor: pointer;
}
#wrap #content .online-courses {
  height: 1400px;
  background: #ffffff;
}
#wrap #content .online-courses .line-title {
  width: 1000px;
  margin: 0 auto;
  padding-top: 108px;
  padding-bottom: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#wrap #content .online-courses .line-title .title {
  width: 300px;
  font-size: 30px;
  line-height: 30px;
  color: #3a3a3a;
}
#wrap #content .online-courses .line-title .line {
  display: block;
  width: 346px;
  height: 1px;
  background-color: #3a3a3a;
}
#wrap #content .online-courses .tl360 {
  width: 880px;
}
#wrap #content .online-courses .tl360 .title {
  width: 120px;
}
#wrap #content .online-courses .tl360 .line {
  width: 360px;
}
#wrap #content .online-courses #swiper06 {
  width: 1240px;
  position: relative;
}
#wrap #content .online-courses #swiper06 .swiper-container {
  box-sizing: content-box;
  width: 1200px;
  height: 536px;
  padding: 20px;
}
#wrap #content .online-courses #swiper06 .swiper-slide {
  margin-bottom: 10px;
  background-color: red;
  position: relative;
  /* 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;
  width: 1200px;
  height: 536px;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 268px;
  background-color: #eeeeee;
  transition: 0.3s transform;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox img {
  width: 100%;
  height: 100%;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox .info {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox .info span {
  display: block;
  text-align: center;
  width: 70px;
  height: 34px;
  background-color: #960dff;
  opacity: 0.8;
  font-size: 16px;
  line-height: 34px;
  color: #ffffff;
  float: left;
  margin-right: 2px;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox:hover {
  box-sizing: content-box;
  border: solid 2px #960dff;
  transform: scale(1.05);
  z-index: 4;
}
#wrap #content .online-courses #swiper06 .swiper-slide .videoBox:hover .info {
  opacity: 1;
}
#wrap #content .online-courses #swiper06 .swiper-slide > .videoBox:nth-child(2) {
  left: 400px;
}
#wrap #content .online-courses #swiper06 .swiper-slide > .videoBox:nth-child(3) {
  left: 800px;
}
#wrap #content .online-courses #swiper06 .swiper-slide > .videoBox:nth-child(4) {
  top: 268px;
  left: 0;
}
#wrap #content .online-courses #swiper06 .swiper-slide > .videoBox:nth-child(5) {
  top: 268px;
  left: 400px;
}
#wrap #content .online-courses #swiper06 .swiper-slide > .videoBox:nth-child(6) {
  top: 268px;
  left: 800px;
}
#wrap #content .online-courses #swiper06 .next,
#wrap #content .online-courses #swiper06 .prev {
  position: absolute;
  width: 80px;
  height: 80px;
  color: #FFFFFF;
  font-weight: bolder;
  font-size: 38px;
  background-color: #d0d0d0;
  border-radius: 4px;
  transition: 0.5s;
  top: 50%;
  transform: translateY(-50%);
}
#wrap #content .online-courses #swiper06 .next:hover,
#wrap #content .online-courses #swiper06 .prev:hover {
  background-color: #960dff;
}
#wrap #content .online-courses #swiper06 .swiper-button-prev,
#wrap #content .online-courses #swiper06 .swiper-button-next {
  outline: none;
  margin-top: 0 !important;
}
#wrap #content .online-courses #swiper06 .next {
  right: -110px;
}
#wrap #content .online-courses #swiper06 .next::after,
#wrap #content .online-courses #swiper06 .prev::after {
  content: '' !important;
  font-size: 38px;
  color: #ffffff;
}
#wrap #content .online-courses #swiper06 .prev {
  left: -110px;
}
#wrap #content .online-courses #swiper06 .desc-tl {
  margin-top: 15px;
  font-size: 16px;
  line-height: 28px;
  color: #fefefe;
}
#wrap #content .online-courses .problems {
  position: absolute;
  width: 1200px;
}
#wrap #content .online-courses .problems li {
  margin-bottom: 22px;
}
#wrap #content .online-courses .problems .tl {
  text-align: left;
  font-size: 20px;
  line-height: 20px;
  color: #3a3a3a;
  margin-bottom: 11px;
}
#wrap #content .online-courses .problems .desc-tl {
  text-align: left;
  font-size: 16px;
  line-height: 28px;
  color: #3a3a3a;
}
#wrap #content .online-courses .problems .desc-s {
  text-align: left;
  font-size: 16px;
  line-height: 28px;
  color: #3a3a3a;
  text-indent: 32px;
}
#wrap #content .online-courses .problems .QR-code {
  position: absolute;
  top: 10px;
  right: 90px;
  width: 139px;
  height: 191px;
}
#wrap #content .online-courses .problems .QR-code span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #3a3a3a;
}
#wrap #content .online-courses .problems .QR-code img {
  border: 1px solid #3a3a3a;
  width: 139px;
  height: 139px;
  margin-bottom: 12px;
}
#wrap #footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-image: linear-gradient(-13deg, #6c07c5 0%, #19369c 100%), linear-gradient(#5e05ac, #5e05ac);
}
#wrap #footer .info {
  /*width: 540px;*/
  font-size: 15px;
  color: #ffffff;
}
#wrap #footer .info span {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 24px;
  letter-spacing: 3px;
}
/*# sourceMappingURL=onlineClassroom.css.map */