html {
  background: no-repeat top;
  background-color: #f0f4f6;
  -webkit-background-size: 100% 716px;
          background-size: 100% 716px;
}
.detail .detail-header {
  margin-bottom: 50px;
}
.detail .detail-header .detail-header-box {
  margin-bottom: 30px;
}
.detail .detail-header .detail-header-box .wws-header-box {
  background: transparent;
}
.detail .detail-header .crumbs {
  margin-bottom: 32px;
}
.detail .detail-header .crumbs .span {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}
.detail .detail-header .crumbs .span2 {
  color: #fff;
}
.detail .detail-header .detail-infor {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(130, 152, 176, 0.75);
          box-shadow: 0px 0px 8px 0px rgba(130, 152, 176, 0.75);
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.detail .detail-header .detail-infor .detail-infor-fl {
  width: 800px;
  height: 460px;
}
.detail .detail-header .detail-infor .detail-infor-fl .img {
  width: 100%;
  height: 100%;
}
.detail .detail-header .detail-infor .detail-infor-fr {
  width: 400px;
  height: 460px;
  background-color: #25303a;
  color: #fff;
  font-size: 14px;
  padding: 16px 30px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-name {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-teacher {
  margin-bottom: 10px;
  line-height: 1;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-time {
  margin-bottom: 12px;
  line-height: 1;
  margin-bottom: 22px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-des {
  line-height: 1.6;
  margin-bottom: 26px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-price {
  width: 338px;
  height: 50px;
  line-height: 50px;
  -webkit-border-radius: 8px;
          border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  margin-bottom: 70px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-price .span1 {
  padding-left: 14px;
  font-size: 28px;
  letter-spacing: 0px;
  color: #ff9900;
  margin-right: 10px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-price .span2 {
  font-size: 18px;
  text-decoration: line-through;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit {
  width: 338px;
  height: 51px;
  -webkit-border-radius: 25px;
          border-radius: 25px;
  padding-top: 14px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit .span1 {
  padding-left: 50px;
  padding-right: 50px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  cursor: pointer;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit .span2 {
  display: inline-block;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit .span2 .img {
  height: 20px;
  position: relative;
  left: 42px;
  top: 3px;
  cursor: pointer;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit.grayBtn {
  background-color: #ccc!important;
}
.detail .detail-header .detail-infor .detail-infor-fr .checkBefore {
  background-color: #276dfa;
}
.detail .detail-header .detail-infor .detail-infor-fr .more-group {
  text-align: center;
  margin-top: 10px;
}
.detail .detail-header .detail-infor .detail-infor-fr .more-group .num-group {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ff5851;
}
.detail .detail-header .detail-infor .detail-infor-fr .more-group .go-group {
  display: inline-block;
  width: 13px;
  height: 13px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background: #ff5851;
  color: #25303a;
  text-align: center;
  line-height: 12px;
}
.detail .detail-header .detail-infor .detail-infor-fr .more-group:hover {
  cursor: pointer;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit,
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit2,
.detail .detail-header .detail-infor .detail-infor-fr .infor-submit3 {
  width: 338px;
  height: 51px;
  -webkit-border-radius: 25px;
          border-radius: 25px;
  padding-top: 14px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}
.detail .detail-header .detail-infor .detail-infor-fr .it-bg {
  background-color: #276dfa;
}
.detail .detail-header .detail-infor .detail-infor-fr .cook-bg {
  background-color: #fd7430;
}
.detail .detail-header .detail-infor .detail-infor-fr .omq-bg {
  background-color: #cf9652;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-num {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0 16px;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-num .infor-study-num {
  padding-right: 30px;
  border-right: 1px solid #ccc;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-study {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-study .img {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  margin-right: 5px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-header .detail-infor .detail-infor-fr .infor-study.hide {
  display: none;
}
.detail .detail-main {
  padding-bottom: 100px;
}
.detail .detail-main .detail-main-fl {
  width: 1200px;
}
.detail .detail-main .detail-main-fl .main-tab-box {
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab {
  height: 88px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 28px;
  padding-left: 20px;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab .main-tab-item {
  width: 108px;
  height: 32px;
  font-size: 18px;
  text-align: center;
  line-height: 32px;
  -webkit-border-radius: 15px;
          border-radius: 15px;
  margin-right: 10px;
  cursor: pointer;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab .active {
  background-color: #276dfa;
  color: #fff;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab .cook-active {
  background-color: #fd7430;
  color: #fff;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab .omq-active {
  background-color: #cf9652;
  color: #fff;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab-other .tab-other-item {
  padding-top: 36px;
  padding-right: 18px;
  margin-right: 18px;
  position: relative;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab-other .tab-other-item .img {
  width: 14px;
  margin-right: 10px;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab-other .tab-other-item.item1 .share-parent {
  display: none;
  width: 200px;
}
.detail .detail-main .detail-main-fl .main-tab-box .main-tab-other .tab-other-item.item1:hover .share-parent {
  display: block;
  position: absolute;
  top: 0px;
  left: 0;
}
.detail .detail-main .detail-main-fl .main-tab-content {
  background: #fff;
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item {
  display: none;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .course-intro {
  padding: 40px 36px 40px 20px;
  min-height: 200px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .course-intro img {
  max-width: 100%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul {
  padding-bottom: 100px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title {
  padding-left: 26px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fl {
  font-size: 22px;
  color: #4f5961;
  width: 500px;
  position: relative;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  padding: 32px 0 40px 40px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fl .img {
  width: 22px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fl:before {
  content: '';
  position: absolute;
  top: 38px;
  left: 5px;
  width: 19px;
  height: 19px;
  background-color: #276dfa;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fl:after {
  content: '';
  position: absolute;
  top: 27px;
  left: 26px;
  width: 8px;
  height: 8px;
  background-color: #ff9900;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fr {
  padding-right: 30px;
  padding-top: 30px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fr .span1 {
  font-size: 20px;
  color: #61717e;
  display: block;
  width: 60px;
  text-align: center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-title .mul-title-fr .span2 {
  font-size: 17px;
  color: #8896a1;
  display: block;
  width: 60px;
  text-align: center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl {
  padding-left: 132px;
  position: relative;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dt {
  width: 754px;
  height: 50px;
  margin-bottom: 20px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dt .mul-dt-fl {
  font-size: 18px;
  color: #1e354d;
  padding-top: 16px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dt .mul-dt-fr {
  padding-top: 13px;
  padding-right: 30px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dt .mul-dt-fr .span1 {
  font-size: 14px;
  color: #61717e;
  display: block;
  width: 60px;
  text-align: center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dt .mul-dt-fr .span2 {
  font-size: 12px;
  color: #8896a1;
  display: block;
  width: 60px;
  text-align: center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd {
  padding-bottom: 20px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li {
  width: 680px;
  height: 50px;
  background-color: #f6f8fe;
  -webkit-border-radius: 24px;
          border-radius: 24px;
  font-size: 14px;
  color: #4381ff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 22px;
  margin-bottom: 20px;
  cursor: pointer;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li .li-fl {
  padding-top: 16px;
  width: 500px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li .li-fr {
  padding-top: 16px;
  width: 120px;
  text-align: right;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li .li-fr .img {
  display: inline-block;
  width: 20px;
  height: 16px;
  background: url(../img/detail-play-icon.png) no-repeat center;
  position: relative;
  top: 3px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li:hover {
  background: #276dfa;
  color: #fff;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl .mul-dd .mul-dd-li:hover .li-fr .img {
  background: url(../img/detail-play-icon2.png) no-repeat center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl:before {
  position: absolute;
  top: 20px;
  left: 30px;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  background: #276dfa;
  border: 4px solid #cedaff;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .mul .mul-dl:after {
  position: absolute;
  top: 0;
  left: 38px;
  display: block;
  content: '';
  width: 1px;
  height: 100%;
  border-left: 1px dashed #4381ff;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .package-title {
  height: 32px;
  background: #f0f4f6;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .package-title .package-title-fr .package-title-li {
  font-size: 12px;
  color: #2e3559;
  margin-right: 20px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .package-title .package-title-fr .package-title-li .img {
  width: 16px;
  position: relative;
  top: 3px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .package-title .package-title-fr .package-title-li .span1 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #82acfe;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: relative;
  top: 3px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .package-title .package-title-fr .package-title-li .span2 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #d9d9d9;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: relative;
  top: 3px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul {
  padding-bottom: 100px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li {
  padding-top: 40px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl {
  padding-left: 20px;
  padding-bottom: 20px;
  position: relative;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt {
  position: relative;
  padding-left: 58px;
  padding-right: 26px;
  padding-bottom: 60px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt .pack-dt-fl {
  font-size: 22px;
  color: #4f5961;
  line-height: 1;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt .pack-dt-fl:before {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  width: 19px;
  height: 19px;
  background-color: #276dfa;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt .pack-dt-fl:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 26px;
  width: 8px;
  height: 8px;
  background-color: #ff9900;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt .pack-dt-fr {
  font-size: 14px;
  color: #141c47;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt .pack-dt-fr .img {
  width: 14px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-name {
  font-size: 18px;
  color: #1e354d;
  padding-bottom: 26px;
  padding-left: 70px;
  position: relative;
  cursor: pointer;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-name:before {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  background: #276dfa;
  border: 4px solid #cedaff;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd {
  padding-bottom: 58px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-name {
  font-size: 18px;
  color: #1e354d;
  padding-bottom: 26px;
  padding-left: 80px;
  position: relative;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-name .img {
  width: 18px;
  height: 18px;
  position: relative;
  top: 3px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-name .img:hover + .chapter-des {
  display: block;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-name .chapter-des {
  position: absolute;
  top: 26px;
  left: 200px;
  z-index: 10;
  width: 603px;
  height: 96px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(13, 4, 9, 0.11);
          box-shadow: 0px 0px 10px 0px rgba(13, 4, 9, 0.11);
  -webkit-border-radius: 6px;
          border-radius: 6px;
  font-size: 12px;
  line-height: 20px;
  color: #2e3559;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 14px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-name:before {
  position: absolute;
  top: 5px;
  left: 9px;
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  background: #276dfa;
  border: 2px solid #cedaff;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li {
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-left: 80px;
  width: 751px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage {
  width: 250px;
  height: 40px;
  border: 1px solid #f0f0f0;
  line-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 6px;
  cursor: pointer;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-span {
  width: 16px;
  height: 16px;
  display: inline-block;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: relative;
  top: -12px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-span.studying {
  background: url(../img/detail-studing.png) no-repeat center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-span.studyed {
  background: url(../img/detail-studyed.png) no-repeat center;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-span.nostudy {
  background: #82acfe;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-span.soon {
  background: #d9d9d9;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl .pack-dt-next .pack-next-li .pack-dd .chapter-li .chapter-stage .stage-name {
  font-size: 14px;
  color: #2e3559;
  width: 220px;
  display: inline-block;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .package .pack-ul .pack-li .pack-dl:before {
  position: absolute;
  top: 0;
  left: 34px;
  display: block;
  content: '';
  width: 1px;
  height: 100%;
  border-left: 1px dashed #4381ff;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul {
  padding-top: 30px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li {
  margin-bottom: 26px;
  padding-left: 20px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li .img-box {
  margin-right: 22px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li .img-box img {
  width: 120px;
  height: 120px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li .teacher-right {
  width: 576px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li .teacher-right .teacher-name {
  font-size: 16px;
  line-height: 2;
  color: #222;
  margin-bottom: 12px;
}
.detail .detail-main .detail-main-fl .main-tab-content .content-item .teacher-ul .teacher-li .teacher-right .teacher-des {
  text-align: justify;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
.detail .detail-main .detail-main-fr {
  width: 294px;
  display: none;
}
.detail .detail-main .detail-main-fr .common-course--title {
  background: #fff;
  height: 88px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.detail .detail-main .detail-main-fr .common-course--title .course-title {
  line-height: 88px;
  color: #333;
  font-size: 16px;
}
.detail .detail-main .detail-main-fr .common-course--title .course-title .img {
  margin-right: 6px;
  position: relative;
  top: 8px;
}
.detail .detail-main .detail-main-fr .common-course--title .course-control {
  line-height: 88px;
}
.detail .detail-main .detail-main-fr .common-course--title .course-control .course-control-num {
  margin-right: 12px;
  color: #333;
}
.detail .detail-main .detail-main-fr .common-course--title .course-control .course-control-left {
  cursor: pointer;
  margin-right: 10px;
}
.detail .detail-main .detail-main-fr .common-course--title .course-control .course-control-right {
  cursor: pointer;
}
.detail .detail-main .detail-main-fr .recommend-course {
  margin-bottom: 26px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont {
  background: #fff;
  margin-top: 16px;
  -webkit-border-radius: 8px;
          border-radius: 8px;
  height: 250px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .img-bg-line {
  position: relative;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .img-bg-line .img-icon {
  position: absolute;
  top: -16px;
  z-index: 1;
  width: 4px;
  height: 16px;
  background-color: #66707a;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .img-bg-line .img-icon1 {
  left: 52px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .img-bg-line .img-icon2 {
  right: 52px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li {
  width: 294px;
  margin-right: 12px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .img-bg {
  display: block;
  width: 100%;
  height: 170px;
  position: relative;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .img-bg .img-icon {
  position: absolute;
  top: -16px;
  z-index: 1;
  width: 4px;
  height: 16px;
  background-color: #66707a;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .img-bg .img-icon1 {
  left: 52px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .img-bg .img-icon2 {
  right: 52px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .img-bg .img {
  width: 294px;
  height: 170px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details {
  padding: 0 16px;
  height: 80px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details .course-details-text {
  font-size: 16px;
  color: #222;
  line-height: 1;
  padding: 8px 0 16px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details .course-details-bott .item1 {
  font-size: 18px;
  line-height: 1;
  color: #fb0935;
  margin-right: 22px;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details .course-details-bott .item2 {
  position: relative;
  top: 3px;
  font-size: 14px;
  line-height: 1;
  color: #666;
  text-decoration: line-through;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details .course-details-bott .item3 {
  position: relative;
  top: 3px;
  font-size: 14px;
  line-height: 1;
  color: #a2aab2;
}
.detail .detail-main .detail-main-fr .recommend-course .recommend-course-cont .fine-course-li .course-details .course-details-bott .item3 img {
  width: 12px;
  vertical-align: baseline;
}
.detail .detail-main .detail-main-fr .hot-course {
  background: #fff;
  margin-bottom: 26px;
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul {
  padding-top: 20px;
  padding-bottom: 18px;
  overflow: hidden;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li {
  display: block;
  padding-left: 16px;
  margin-bottom: 20px;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .img-box {
  margin-right: 14px;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .img-box .img {
  display: block;
  width: 114px;
  height: 86px;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .course-li-right {
  width: 140px;
  font-size: 14px;
  line-height: 1;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .course-li-right .course-li-name {
  color: #222;
  line-height: 1.6;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .course-li-right .course-li-num {
  font-size: 12px;
  color: #444;
  padding: 10px 0 20px;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .course-li-right .course-li-price .span1 {
  color: #DE0041;
}
.detail .detail-main .detail-main-fr .hot-course .hot-course-ul .hot-course-li .course-li-right .course-li-price .span2 {
  font-size: 12px;
  color: #555;
  text-decoration: line-through;
}
.detail .detail-main .detail-main-fr .trainee {
  overflow: hidden;
  -webkit-border-radius: 8px;
          border-radius: 8px;
  background: #fff;
}
.detail .detail-main .detail-main-fr .trainee .trainee-cont {
  padding-top: 20px;
}
.detail .detail-main .detail-main-fr .trainee .trainee-cont .trainee-ul .trainee-li {
  padding-left: 18px;
  margin-bottom: 20px;
}
.detail .detail-main .detail-main-fr .trainee .trainee-cont .trainee-ul .trainee-li .trainee-img {
  margin-right: 22px;
}
.detail .detail-main .detail-main-fr .trainee .trainee-cont .trainee-ul .trainee-li .trainee-img img {
  width: 58px;
  height: 58px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.detail .detail-main .detail-main-fr .trainee .trainee-cont .trainee-ul .trainee-li .trainee-name {
  height: 58px;
  line-height: 58px;
  color: #222;
  font-size: 18px;
}
.comment-wrap .comment {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 46px;
}
.comment-wrap .comment .comment-title {
  font-size: 20px;
  color: #276dfa;
  line-height: 1;
  padding-bottom: 16px;
  padding-left: 22px;
  margin-bottom: 41px;
  padding-top: 20px;
  border-bottom: 1px solid #e7e8e9;
}
.comment-wrap .comment .comment-title img {
  vertical-align: sub;
  margin: 0 16px 0 -10px;
}
.comment-wrap .comment .comment-box {
  padding-left: 32px;
}
.comment-wrap .comment .comment-box .comment-box-img img {
  width: 52px;
  height: 52px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.comment-wrap .comment .comment-box .comment-box-input {
  margin-left: 28px;
  width: 94%;
}
.comment-wrap .comment .comment-box .comment-box-input textarea {
  padding-left: 10px;
  padding-top: 10px;
  resize: none;
  outline: none;
  width: 100%;
  height: 160px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0px 0px 8px 0px rgba(209, 204, 206, 0.75);
          box-shadow: inset 0px 0px 8px 0px rgba(209, 204, 206, 0.75);
  -webkit-border-radius: 6px;
          border-radius: 6px;
  border: solid 1px #eeeaeb;
}
.comment-wrap .comment .comment-box .comment-box-input .comment-box-bottom {
  text-align: right;
}
.comment-wrap .comment .comment-box .comment-box-input .comment-box-submit {
  display: inline-block;
  margin-top: 16px;
  width: 94px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  color: #fff;
  background-color: #276dfa;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  margin-bottom: 42px;
  cursor: pointer;
}
.comment-wrap .comment .comment-no {
  text-align: center;
  color: #999;
  margin-bottom: 50px;
}
.comment-wrap .comment .comment-content {
  padding-left: 32px;
  padding-right: 14px;
}
.comment-wrap .comment .comment-content .comment-li {
  padding-right: 27px;
  padding-top: 23px;
  padding-bottom: 30px;
  border-top: 1px solid #e5e5e5;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-avatar {
  width: 52px;
  height: 52px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  margin-right: 23px;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-name {
  font-size: 16px;
  color: #276dfa;
  line-height: 1;
  padding-top: 8px;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-item {
  color: #222;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-item .comment-li-thumb {
  cursor: pointer;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-item .comment-li-thumb img {
  vertical-align: middle;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-people .comment-li-item .comment-li-reply {
  cursor: pointer;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-content {
  position: relative;
  font-size: 14px;
  color: #444;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 76px;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-content .comment-li-text {
  width: 74%;
  line-height: 1.6;
  text-align: justify;
}
.comment-wrap .comment .comment-content .comment-li .comment-li-content .comment-li-time {
  position: absolute;
  bottom: 0;
  right: 0;
}
.comment-wrap .comment .comment-content .comment-li .comment-reply {
  display: none;
  padding-bottom: 43px;
  position: relative;
  margin-left: 76px;
  margin-top: 42px;
}
.comment-wrap .comment .comment-content .comment-li .comment-reply .comment-reply-textarea {
  padding-left: 10px;
  padding-top: 10px;
  resize: none;
  outline: none;
  width: 747px;
  height: 160px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0px 0px 8px 0px rgba(209, 204, 206, 0.75);
          box-shadow: inset 0px 0px 8px 0px rgba(209, 204, 206, 0.75);
  -webkit-border-radius: 6px;
          border-radius: 6px;
  border: solid 1px #eeeaeb;
}
.comment-wrap .comment .comment-content .comment-li .comment-reply .comment-reply-bottom {
  height: 28px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.comment-wrap .comment .comment-content .comment-li .comment-reply .comment-reply-bottom .comment-reply-cancel {
  width: 54px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  color: #777777;
  font-size: 14px;
  cursor: pointer;
}
.comment-wrap .comment .comment-content .comment-li .comment-reply .comment-reply-bottom .comment-reply-submit {
  width: 54px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #276dfa;
  color: #fff;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.comment-wrap .comment .comment-content .comment-li .comment-child {
  width: 68%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #f2f6fd;
  margin-left: 76px;
  margin-top: 10px;
  padding: 16px;
}
.comment-wrap .comment .comment-content .comment-li .comment-child .comment-child-li {
  border-bottom: 1px solid #ebecec;
  padding-bottom: 24px;
  margin-bottom: 20px;
  position: relative;
}
.comment-wrap .comment .comment-content .comment-li .comment-child .comment-child-li .comment-child-li-avatar {
  width: 30px;
  position: absolute;
  top: -4px;
  left: 0;
}
.comment-wrap .comment .comment-content .comment-li .comment-child .comment-child-li .comment-child-name {
  font-size: 16px;
  color: #276dfa;
  margin-bottom: 22px;
  padding-left: 40px;
}
.comment-wrap .comment .comment-content .comment-li .comment-child .comment-child-li .comment-child-content {
  font-size: 14px;
  color: #444;
  line-height: 1.4;
}
.comment-wrap .comment .comment-content .comment-li .comment-child .comment-child-more {
  text-align: center;
  font-size: 16px;
  color: #111;
  cursor: pointer;
}
.comment-wrap .comment .reviewSys .current {
  color: #276dfa;
  border: 1px solid #276dfa;
}
.comment-wrap .paginate {
  padding: 50px 0 100px;
}
.group-dialog {
  display: none;
  position: fixed;
  top: 15%;
  left: 35%;
  z-index: 2;
  width: 400px;
  height: 500px;
  background: #fff;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  text-align: center;
  padding: 0 15px;
}
.group-dialog .group-title-content .group-title {
  display: inline-block;
  font-size: 20px;
  color: #222222;
  margin-top: 14px;
}
.group-dialog .group-title-content .group-close {
  font-size: 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background: #cacaca;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
}
.group-dialog .group-title-content .group-close:hover {
  cursor: pointer;
}
.group-dialog .group-content .content-li {
  margin-top: 20px;
  white-space: nowrap;
  border-bottom: 1px solid #e5e5e5;
  height: 60px;
}
.group-dialog .group-content .content-li .li-left {
  height: 45px;
  text-align: left;
  display: inline-block;
}
.group-dialog .group-content .content-li .li-left .li-img {
  width: 30px;
  height: 30px;
  display: inline-block;
}
.group-dialog .group-content .content-li .li-left .li-content {
  text-align: left;
  width: 270px;
  margin-left: 20px;
  display: inline-block;
}
.group-dialog .group-content .content-li .li-left .li-content .name {
  font-size: 16px;
  color: #222222;
}
.group-dialog .group-content .content-li .li-left .li-content .num {
  font-size: 16px;
  color: #888888;
  margin-left: 5px;
}
.group-dialog .group-content .content-li .li-left .li-content .time {
  font-size: 14px;
  color: #888888;
  display: block;
}
.group-dialog .group-content .content-li .li-right {
  display: inline-block;
  float: right;
  height: 45px;
}
.group-dialog .group-content .content-li .li-right .li-btn {
  background: #fb5b03;
  color: #fff;
  width: 70px;
  height: 30px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  display: inline-block;
}
.group-dialog .group-content .content-li .li-right .li-btn:hover {
  cursor: pointer;
}
.group-dialog .group-bottom {
  margin-top: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
}
.group-dialog .group-bottom .del {
  width: 14px;
  height: 14px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background: #cacaca;
  text-align: center;
  line-height: 12px;
  color: #fff;
  display: inline-block;
  margin-right: 10px;
}
.group-dialog .group-bottom .add {
  width: 14px;
  height: 14px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background: #fb5b03;
  text-align: center;
  line-height: 12px;
  color: #fff;
  display: inline-block;
  margin-left: 10px;
}
.group-dialog .group-bottom .add:hover {
  cursor: pointer;
}
.group-dialog .group-bottom .del:hover {
  cursor: pointer;
}
.group-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}