.container .top-banner {
  background: url("../../images/course4/1.jpg") no-repeat center;
  height: 700px;
  color: #fff;
  padding: 1px;
}
.container .top-banner h2 {
  font-size: 57px;
  font-weight: bold;
  margin-top: 250px;
}
.container .top-banner h3 {
  margin-top: 20px;
  font-size: 57px;
  line-height: 70px;
}
.container .top-banner h4 {
  margin-top: 20px;
  font-size: 36px;
  color: #fff;
}
.container .top-banner .i-button {
  width: 120px;
  height: 42px;
  background: #3f8af6;
  border-radius: 20px;
  text-align: center;
  line-height: 42px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-top: 40px;
}
.container .top-banner .i-button:hover {
  background: #fff;
  color: #3f8af6;
}
.container .course4 .c4-block1 .block1-item {
  display: flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
}
.container .course4 .c4-block1 .block1-item .item {
  width: 315px;
  height: 315px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding: 80px;
  margin-right: 27px;
}
.container .course4 .c4-block1 .block1-item .item:last-child {
  margin-right: 0;
}
.container .course4 .c4-block1 .block1-item .item:hover {
  background: #27a4fd;
}
.container .course4 .c4-block1 .block1-item .item:hover h2 {
  color: #fff;
}
.container .course4 .c4-block1 .block1-item .item:hover span {
  color: #fff;
}
.container .course4 .c4-block1 .block1-item .item span {
  margin-bottom: 40px;
  display: block;
  text-align: center;
  font-size: 55px;
  color: #4286f3;
}
.container .course4 .c4-block1 .block1-item .item h2 {
  font-size: 22px;
  color: #3b3b3b;
  text-align: center;
  line-height: 30px;
}
.container .course4 .c4-block2 .block2-one {
  margin: 0 50px;
}
.container .course4 .c4-block2 .block2-one .iconfont {
  font-size: 30px;
  color: #4286f3;
}
.container .course4 .c4-block2 .block2-two .block2-img {
  width: 1243px;
  margin: 0 auto;
}
.container .course4 .c4-block2 .block2-three ul {
  display: flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
}
.container .course4 .c4-block2 .block2-three ul li {
  position: relative;
  margin: 0 8px;
}
.container .course4 .c4-block2 .block2-three ul li:hover {
  transform: scale(1.02);
}
.container .course4 .c4-block2 .block2-three ul li > div {
  /*    position: absolute;
                            top: 135px;
                            left: 50%;
                            margin-left: -147.5px;*/
}
.container .course4 .c4-block2 .block2-three ul li > div h2 {
  position: absolute;
  top: 145px;
  left: 50%;
  margin-left: -66px;
  font-size: 22px;
  color: #3b3b3b;
  margin-bottom: 32px;
  text-align: center;
}
.container .course4 .c4-block2 .block2-three ul li > div dl {
  position: absolute;
  top: 190px;
  left: 50%;
  margin-left: -147.5px;
  width: 295px;
}
.container .course4 .c4-block2 .block2-three ul li > div dl dd {
  color: #484848;
  line-height: 28px;
  margin-bottom: 35px;
}
.container .course4 .c4-block3 .block3-item {
  display: flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
}
.container .course4 .c4-block3 .block3-item .item {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.container .course4 .c4-block3 .block3-item .item span {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  background: #4286f3;
  color: #fff;
  border-radius: 50%;
  border: 18px solid #eef1f8;
  font-size: 77px;
  position: relative;
}
.container .course4 .c4-block3 .block3-item .item span .s-shadow {
  position: absolute;
  top: 126px;
  width: 75px;
  box-shadow: 0 0 20px 5px #ccc;
  background: #eff2f8;
}
.container .course4 .c4-block3 .block3-item .item h2 {
  color: #3b3b3b;
  font-size: 24px;
  text-align: center;
  margin-top: 45px;
}
.container .course4 .c4-block3 .block3-item .item:hover span {
  transform: rotate(360deg);
  transition: 0.8s;
}
.container .course4 .c4-block3 .outline {
  width: 1287px;
  margin: 0 auto 200px;
}
.container .course4 .c4-block3 .outline .outline-item {
  width: 1288px;
  border: 1px solid #eee;
  padding: 25px;
  box-sizing: border-box;
  margin-bottom: 25px;
  box-shadow: 0 0 10px 3px #eee;
}
.container .course4 .c4-block3 .outline .outline-item .outline-title {
  width: 268px;
  padding: 120px 100px 100px;
  box-sizing: border-box;
  text-align: center;
  color: #484848;
  line-height: 27px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body {
  width: 956px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-top {
  border-bottom: 1px solid #eee;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-top h2 {
  display: inline-block;
  float: left;
  line-height: 120px;
  height: 120px;
  margin-left: 70px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-top ul {
  margin-left: 400px;
  padding-bottom: 20px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-top ul li {
  line-height: 30px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-bottom h2 {
  display: inline-block;
  float: left;
  line-height: 120px;
  height: 120px;
  margin-left: 70px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-bottom ul {
  margin-top: 30px;
  margin-left: 400px;
}
.container .course4 .c4-block3 .outline .outline-item .outline-body .body-bottom ul li {
  line-height: 30px;
}
.container .course4 .c4-block3 .outline .outline-item:hover {
  background: #4286f3;
}
.container .course4 .c4-block3 .outline .outline-item:hover .outline-title {
  color: #fff;
}
.container .course4 .c4-block3 .outline .outline-item:hover h2 {
  color: #fff;
}
.container .course4 .c4-block3 .outline .outline-item:hover li {
  color: #fff;
}