.content{
  background-color: #F6FAFF;
  padding-bottom:1vw;
}
.content .nav{
  width: 90%;
  max-width: 1200px;
  padding: 2vh 0px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
}
.content .nav img{
  margin: 0px 5px;
}
.content .course{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.course>div{
  background-color: #fff;
  padding: 1vw;
  box-sizing: border-box;
}
.course .course_t{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1vw;
}
.course .course_t>img{
  width: 40%;
}
.course .course_t>div{
  width: 55%;
}
.course .course_t>div h2{
  margin: 2vw 0px;
}
.course .course_t>div h4{
  width: fit-content;
  background-color: #008CD7;
  color: #fff;
  font-weight: 400;
  border-radius: 999px;
  padding: .5vw 2vw;
  margin-top: 2vw;
}
.course .course_t>div ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.course .course_t>div ul li{
  margin-right: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: end;
}
.course .course_t>div ul li img{
  margin-right: 5px;
}
.course_b .nav_box{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-bottom:1px solid  #EEEEEE;
  padding: 1vw 0;
}
.course_b .nav_box h3{
  position: relative;
  cursor: pointer;
}
.course_b .nav_box .active::after{
  content: '';
  width: 100%;
  height: 3px;
  background-color: #008CD7;
  position: absolute;
  bottom: -1vw;
  left: 0px;
}
.course_b .course_msg,
.course_b .course_mulu
{
  padding: 2vw;
  box-sizing: border-box;
}
.course_b .course_msg h4{
  margin: 1vw 0;
  position: relative;
  color: #444;
}
.course_b .course_msg h4::before{
  content: '';
  width: 4px;
  height: 100%;
  background-color: #008CD7;
  position: absolute;
  bottom: 0;
  left: -10px;
}
.course_b .course_msg>div{
  font-size: 14px;
  color: #666;
  line-height: 25px;
}
.course_b .course_msg>div pre{
  white-space: unset;
}

.course_mulu{
  display: none;
}
.course_mulu .item{
  margin-bottom: 1vw;
}
.course_mulu .item>div{
  padding-bottom: 1vw;
  border-bottom:1px solid #EEEEEE;
}
.course_mulu .item h4{
  color: #444;
  max-width: 80%;
}
.course_mulu .item p{
  cursor: pointer;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.course_mulu .item div p img{
  margin-left: 10px;
  transform: rotate(-90deg);
}
.course_mulu .item .close{
  display: none;
}
.course_mulu .item .open img{
  transform: rotate(90deg);
}
.course_mulu .item ul{
  display: none;
}
.course_mulu .item ul .play{
  cursor: pointer;
}
.course_mulu .item ul .play:hover h5,
.course_mulu .item ul .play:hover span{
  color: #008CD7;
}
.course_mulu .item ul li{
  color: #666;
  font-size: 14px;
  padding:1vw 2vw; 
  box-sizing: border-box;
  border-bottom:1px solid #EEEEEE;
}
.course_mulu .item ul li h5{
  color: #666;
  font-size: 14px;
}
.course_mulu .item ul li div{
  display: flex;
  align-items: center;
  max-width: 80%;
}
.course_mulu .item ul li div img{
  margin-right: 10px;
}