.flex {
 display: flex;
}
.courseware{
  padding-top: 100px;
}
.courseware .common-teaching{
  background-image: url(../img/courseware/bg-1.png);
  height: 796px;
  background-position:center;
  background-size: cover;
}
.courseware  .common-title{
  position: relative;
  font-size: 47px;
  padding: 40px 0 50px;
  margin-bottom: 20px;
  z-index: 1;
}
.courseware .common-title .before {
  position: absolute;
  top: 10px;
  font-weight: bold;
  left: calc(50% - 478.5px);
  color: #f1f1f1;
  z-index: -1;
}
.courseware .common-title .after {
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: #1f3db4;
  right: calc(50% - 35px);
  bottom: 30px;
}
/* grid布局 */
.grid {
	display: flex;
	flex-wrap: wrap;
}

.grid.col-3>div {
	width: 33.33%;
}
.courseware .common-teaching .grid.col-3{
  width: 1200px;
  margin: auto;
}
.courseware .common-teaching .grid.col-3>div{
  padding: 17px 0;
}
.courseware .common-teaching .item{
  width: 378px;
  height: 249.4px;
  margin: auto;
  color: #ffffff;
  padding: 34px 21px 0;
  background-position:center;
  background-size: cover;
}
.courseware .common-teaching .item1{
  background-image: url(../img/courseware/physical.png);
}
.courseware .common-teaching .item2{
  background-image: url(../img/courseware/chemistry.png);
}
.courseware .common-teaching .item3{
  background-image: url(../img/courseware/geography.png);
}
.courseware .common-teaching .item4{
  background-image: url(../img/courseware/history.png);
}
.courseware .common-teaching .item5{
  background-image: url(../img/courseware/science.png);
}
.courseware .common-teaching .item6{
  background-image: url(../img/courseware/biological.png);
}
.courseware .common-teaching .title{
  font-size: 25px;
  position: relative;
  padding-bottom: 40px;
}
.courseware .common-teaching .title::before{
  content: '';
  position: absolute;
  display: block;
  width: 21px;
  height: 3px;
  top: 40px;
  background-color: #ffffff;
}
.courseware .common-teaching .content{
  font-size: 15px;
  line-height: 1.6;
}
.courseware .painpoints-need{
  padding-top: 50px;
}
.courseware .painpoints-need .common-title2 .before{
  left: calc(50% - 442.5px);
}
.text-white{
  color: #ffffff;
}
.need{
  flex: 1;
  height: 350px;
  background-position:center;
  background-size: cover;
  position: relative;
}
.need1{
  background-image: url(../img/courseware/readBook.png);
}
.need2{
  background-image: url(../img/courseware/experiment.png);
}
.need3{
  background-image: url(../img/courseware/exercise.png);
}
.need4{
  background-image: url(../img/courseware/dull.png);
}
.need5{
  flex: 1;
  height: 701px;
  background-image: url(../img/courseware/taste.png);
  background-position:center;
  background-size: cover;
}
.need>div{
  width: 282px;
  height: max-content;
  position: absolute;
  font-size: 17px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #fff;
  margin: auto;
  text-align: center;
}
.need>div span{
  display: block;
  width: 23.5px;
  height: 3.3px;
  margin: 24px auto 0;
  background-color: white;
}
.need5>div{
  width: 471px;
  height: max-content;
  position: absolute;
  font-size: 24px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #fff;
  margin: auto;
  text-align: center;
}
.need5>div .image{
  padding-bottom: 48px;
}
.need5>div span{
  display: block;
  width: 31.8px;
  height: 4.5px;
  margin: 33px auto 0;
  background-color: white;
}
.list>div {
  width: 25%;
  padding: 8px;
}
.need6, .need7, .need8, .need9{
  width: 100%;
  height: 206px;
  background-position:center;
  background-size: cover;
  display: flex;
  justify-content: center;
}
.need6{
  background-image: url(../img/courseware/组18.png);
}
.need7{
  background-image: url(../img/courseware/组19.png);
}
.need8{
  background-image: url(../img/courseware/组20.png);
}
.need9{
  background-image: url(../img/courseware/组21.png);
}
.need6>div, .need7>div, .need8>div, .need9>div{
  width: 235px;
  height: 100%;
  padding: 24px 0 30px 0;
  position: absolute;
  font-size: 14px;
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  justify-content: space-between;
}
.need6>div span, .need7>div span, .need8>div span, .need9>div span{
  display: block;
  width: 23.5px;
  height: 3.3px;
  margin: 20px auto 0;
  background-color: white;
}
.charact-advantage{
  height: 1194px;
  padding-top: 130px;
  background-image: url(../img/courseware/bg-2.png);
  background-position:center;
  background-size: cover;
}
.charact-advantage .common-title3 .before{
  left: calc(50% - 497.5px);
}




.charact-nav .slide-conten{
  overflow: hidden;
  position: relative;
  width: 1093px;
  margin: auto;
}
.charact-nav .slide-conten a.abtn {
  position: absolute;
  bottom: 199px;
  display: block;
  height: 77px;
  width: 54px;
}
.charact-nav .slide-conten a.aleft{
  background: url(../img/courseware/icon_01.png) no-repeat;
  left: 0;
}
.charact-nav .slide-conten a.aright{
  background: url(../img/courseware/icon_02.png) no-repeat;
  right: 0;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body{
  width: 862px;
  height: 742px;
  overflow: hidden;
  margin: auto;
  position: relative;/*必要元素*/
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body .new-img{
  width: 100%;
  height: 475px;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body .new-img img {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul {
  width: 20000px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li {
  width: 862px;
  height: 742px;
  position: relative;
  float: left;
  display: block;
  z-index: 10002;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li a {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li .new-body{
  width: 797px;
  margin: auto;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li .new-body .new-body-title{
  font-size: 33px;
  padding-bottom: 20px;
}
.courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li .new-body .new-body-content{
  font-size: 20px;
  /* padding-bottom: 138px; */
}
/* .courseware .charact-advantage .charact-nav .slide-conten .slide-item-body ul li:hover {
  -ms-transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  z-index: 1002;
  position: relative;
  left: 0;
} */





.courseware .solve-program{
  height: 909px;
  padding-top: 50px;
  background-image: url(../img/courseware/solve-program.png);
  background-position:center;
  background-size: cover;
  color: #ffffff;
}
.courseware .solve-program .common-title4{
  font-size: 47px;
}
.courseware .solve-program .common-title4 .before{
  left: calc(50% - 525px);
  color: #979595;
}
.courseware .solve-program .common-title4 .after{
  background-color: #fff;
}
.solve-flex{
  padding-top: 100px;
}
.solve-image{
  width: 765px;
  height: 430px;
  padding-right: 85px;
}
.solve-image img{
  width: 100%;
  height: 100%;
}
.solve-content {
  width: 664px;
  padding-left: 85px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.solve-content .solve-title{
  font-size: 42px;
}
.solve-content .solve-info{
  font-size: 27px;
}
.solve-content .solve-info span{
  font-size: 45px;
}
.solve-btn{
  display: block;
  width: 273px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 44.59px;
  color: #fff;
  background-color: #ffb400;
  border-radius: 35px;
  cursor: pointer;
}
.solve-btn:focus, .solve-btn:hover{
  color: #fff;
}