#app03{
  min-width: 1300px;
  background: #F7F7F7;
}

.banner {
  width: 100%;
  height: 450px;
  margin-top: 119px;
  background: url(/static/img/bookDetail/new_wonderBanner.jpg) no-repeat center center;
  background-size: cover;
}
.middleContent{
  width: 1126px;
  margin: 0 auto;
}
.feature{
  position: relative;
}
.feature h3{
  font-size:26px;
  line-height: 26px;
  color:rgba(246,141,12,1);
  margin-top: 93px;
}
.feature ul{
  margin-top: 31px;
}
.feature ul li{
  font-size:18px;
  line-height: 18px;
  margin-bottom: 22px;
  padding-left: 17px;
  color:rgba(102,102,102,1);
  position: relative;
}
.feature ul li::before{
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url(/static/img/bookDetail/xingxing.png) no-repeat;
  position:absolute;
  top: 2px;
  left: -2px;
}
.feature >img{
  position:absolute;
  top: 159px;
  left: 574px;
}
.perusal{
  background: url(/static/img/bookDetail/perusal.png) no-repeat;
  width: 590px;
  height: 290px;
  margin-top: 80px;
  position: relative;
  left: -11px;
}
.perusal h4{
  color: #fff;
  font-size:26px;
  line-height: 26px;
  padding-top: 13px;
  padding-left: 52px;
}
.perusal .line{
  width: 489px;
  height: 1px;
  background: #F3F3F3;
  margin-left: 58px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.feature .perusal ul li{
  margin-bottom: 0px;
  margin-left: 41px;
}
.tableList{
  text-align: center;
  width: 1126px;
  margin: 110px auto;
}
.tableList >ul{
  overflow: hidden;
  height: 83px;
  line-height: 83px;
}
.tableList >ul >li{
  float: left;
  background:rgba(246,141,12,1);
  font-size:16px;
  border-right:1px solid#E8E8E8;
  color:rgba(255,255,255,1);
}
.tableList >ul >li:nth-of-type(1){
  width: 131px;
  text-align: left;
  padding-left: 18px;
}
.tableList >ul >li:nth-of-type(2){
  width: 81px;
}
.tableList >ul >li:nth-of-type(3){
  width: 77px;
}
.tableList >ul >li:nth-of-type(4){
  width: 161px;
}
.tableList >ul >li:nth-of-type(5){
  width: 160px;
}
.tableList >ul >li.th{
  width: 516px;
}
.tableList .bookList{
  height: 45px;
  line-height: 45px;
  position: relative;
  border-bottom: 1px solid #E8E8E8;
}
.tableList .bookList .mobel{
  width: 108px;
  height: 45px;
  background: #8DD02B;
  position:absolute;
  left: 630px;
}
.tableList .bookList .basicMobel{
  background: #50C8AD;
  left: 707px;
  width: 106px;
}
.tableList .bookList .intermediateMobel{
  background:#2BB1D4;
  left: 774px;
  width: 141px;
}
.tableList .bookList .advancedMobel{
  background: #FFA656;
  left: 874px;
  width: 114px;
}
.tableList .bookList .masterMobel{
  background: #F84754;
  left: 952px;
  width: 112px;
}
.tableList .bookList li{
  background: #FFF;
  color: #666666;

}
.tableList .bookList .starter{
  background: #8DD02B;
  color: #fff;
}
.tableList .bookList .basic{
  background: #50C8AD;
  color: #fff;
}
.tableList .bookList .intermediate{
  background: #2BB1D4;
  color: #fff;
}
.tableList .bookList .advanced{
  background: #FFA656;
  color: #fff;
}
.tableList .bookList .master{
  background: #F84754;
  color: #fff;
}
.bookList li{
  width: 103px;
}
.th >p{
  line-height: 42px;
  height: 42px;
  border-bottom: 1px solid #E8E8E8;
}
.th >ul{
  overflow: hidden;
}
.th >ul >li{
  float: left;
  line-height: 41px;
  height: 41px;
  width: 103px;
  border-right:1px solid #E8E8E8;
}
.th >ul >li:nth-child(5){
  border-right: none;
}


.levelList h3{
  font-size:26px;
  margin-top: 96px;
  color:rgba(246,141,12,1);
  margin-bottom: 22px;
}

.courseDesc h3{
  font-size:26px;
  margin-top: 96px;
  color:rgba(246,141,12,1);
  margin-bottom: 16px;
}
.courseDesc ul li{
  font-size:18px;
  padding-left: 13px;
  color:rgba(102,102,102,1);
  line-height:40px;
  position:relative;
}
.courseDesc ul li::before{
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url(/static/img/bookDetail/xingxing.png) no-repeat;
  position:absolute;
  top: 12px;
  left: -5px;
}

.imgList >img:nth-child(1){
  margin-top: 74px;
}
.imgList >img:nth-child(2){
  margin-top: 90px;
}
.imgList >img:nth-child(3){
  margin-top: 10px;
}
.imgList > a {
  width: 305px;
  height: 62px;
  margin: 78px auto 94px;
  display: block;
  background: #f68d0c;
  border-radius: 29px;
  font-size: 26px;
  line-height: 62px;
  text-align: center;
  color: #ffffff;
}

.courseDesign{
  background: #fff;
  width:1226px;
  height:1293px;
}
.courseDesign .title{
  font-size:18px;
  line-height: 26px;
  margin-left: 50px;
  padding-top: 43px;
  margin-bottom: 53px;
  position: relative;
  color:#666666;
}
.courseDesign .title span{
  font-size:26px;
  color:rgba(246,141,12,1);
  padding-right: 23px;
}
.courseDesign .title strong{
  display: block;
  position: absolute;
  width: 1px;
  height: 23px;
  background: #DADADA;
  left: 113px;
  top: 46px;
}
.courseDesign .title i{
  color: #F68D0C;
  padding-right: 2px;
}
.courseDesign img{
  margin-left: 50px;
}
.directory{
  width: 1226px;
  overflow: hidden;
  margin-bottom: 120px;
}
.directory h3{
  font-size:26px;
  line-height: 26px;
  margin-top: 98px;
  color:rgba(246,141,12,1);
  margin-bottom: 30px;

}
.directory .directoryLeft ul li{
  width:278px;
  height:64px;
  line-height:64px;
  background:#FFFFFF;
  font-size:16px;
  padding-left: 27px;
  color:#666666;
  position: relative;
  cursor: pointer;
}
.directory .directoryLeft ul li span{
  position: absolute;
  right: 30px;
  top: 26px;
  display: inline-block;
  width: 10px;
  height: 14px;
  background: url("/static/img/icon-arrow-right.svg") no-repeat;
}
.directory .directoryLeft ul li:hover{
  color:rgba(246,141,12,1);
}
.directory .directoryLeft ul .active:hover{
  color:#fff;
}
.directory .directoryLeft ul .active{
  background:rgba(246,141,12,1);
  color:rgba(255,255,255,1);
}
.directoryRight{
  background: #fff;
  width: 930px;
  margin-left: 18px;
  font-size:18px;
}
.directoryRight .title{
  overflow: hidden;
  line-height: 76px;
  border-bottom: 1px solid #EDEDED;
}
.directoryRight .title li{
  float: left;
  margin: 0 41px;
  cursor: pointer;
}
.directoryRight .title .checked{
  border-bottom: 4px solid #F68D0C;
  color: #F68D0C;
}
.directoryRight .detail li{
  border-bottom: 1px solid #EDEDED;
  height: 79px;
  padding-left: 45px;
  line-height: 79px;
}
.directoryRight .detail li:last-child{
  border-bottom:none
}
/*底部样式*/
footer {
  width: 100%;
  height: 180px;
  background: #ebecef;
}
.footer-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer-logo {
  background: url(/static/img/logo.png);
  width: 199px;
  height: 45px;
  float: left;
  margin-top: 45px;
}
.footer-content ul {
  overflow: hidden;
  padding-top: 59px;
  margin-bottom: 44px;
}
.footer-content ul li {
  float: left;
  margin-left: 64px;
  font-size: 16px;
  color: #444444;
  cursor: pointer;
}
.footer-content ul li:hover {
  color: #f68d0c;
}
.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #999999;
}