blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0
}
a, b, body, button, dd, div, dl, dt, em, form, h1, h2, h3, h4, header, input, li, p, span, textarea, ul {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline
}
body {
  font-family: Microsoft Yahei, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
abbr, fieldset, img {
  border: 0
}
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: 400
}
li, ol, ul {
  list-style: none
}
caption, th {
  text-align: left
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: inherit
}
sup {
  vertical-align: text-top
}
sub {
  vertical-align: text-bottom
}
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit
}
legend {
  color: #000
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block
}
button, input, select, textarea {
  outline: none;
  font-family: Microsoft Yahei, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333
}
input::-ms-clear, input::-ms-reveal {
  display: none
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #999;
  opacity: 1
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #999
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #999
}
button {
  cursor: pointer
}
textarea {
  resize: none;
  overflow: auto
}
p {
  word-wrap: break-word;
  word-break: break-all
}
a:focus {
  outline: none
}
a {
  color: #333;
  text-decoration: none
}
a:hover {
  color: #999
}
a:active, a:hover {
  outline: 0
}
.container {
  width: 1480px
}
.container, .container-small {
  position: relative;
  margin: 0 auto
}
.container-small {
  width: 1210px
}
body, html {
  min-width: 1480px
}
.course-header {
  background-color: #f8f8f8;
  padding: 0 0 40px
}
.course-header .nav-breadcrumb {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.course-header .nav-breadcrumb a {
  color: #999;
  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block
}
.course-header .nav-breadcrumb a:hover {
  color: #f3793d
}
.course-header .nav-breadcrumb .js-video-name {
  display: inline-block;
  color: #f3793d
}
.course-header .nav-breadcrumb > span {
  cursor: default
}
.course-header .nav-breadcrumb > p {
  cursor: default;
  color: #fff;
  display: inline-block
}
.course-header .nav-breadcrumb {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1
}
.course-lower {
  margin-top: -76px
}
.course-lower .left-course .course-nav-wrap {
  border-radius: 4px 0 0 0
}
.course-lower .left-course .course-nav-btn {
  display: none;
  margin-left: 35px;
  padding: 0 20px;
  height: 36px;
  font-size: 16px;
  color: #333;
  line-height: 36px;
  background: #ffd100;
  border-radius: 18px;
  text-align: center;
  cursor: pointer
}
.course-lower .left-course .fix-course-nav .course-nav-btn {
  display: block
}
.course-lower .left-course .course-content-block {
  padding-bottom: 10px
}
.course-lower .left-course .course-content-block .container-small {
  width: 100%;
  border-radius: 0 0 4px 4px
}
.course-lower .left-course .course-introduce {
  padding: 20px 20px 30px
}
.course-upper {
  height: 852px;
  background: #1a1a1a
}
.course-upper .course-types {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 22px auto;
  padding-left: 40px;
  width: 1380px;
  height: 76px;
  overflow: hidden
}
.course-upper .course-types > li {
  margin-right: 12px
}
.course-upper .course-types > li > a {
  padding: 0 16px;
  height: 32px;
  display: inline-block;
  font-size: 14px;
  background: #2f2f2f;
  border-radius: 16px;
  color: #a7a7a7;
  text-align: center;
  line-height: 32px
}
.course-upper .course-types > li > a:hover {
  background: #f3793d;
  color: #fff
}
.course-txt-cent {
  font-size: 0;
  text-align: center
}
.course-txt-cent p {
  font-size: 14px
}
.course-txt-cent .left-course {
  text-align: left;
  display: inline-block;
  vertical-align: top
}
.course-txt-cent .left-course .left-wrap {
  background: #2f2f2f;
  border-radius: 0 0 0 4px;
  width: 100%;
  border-right: solid #000000 1px;
}
.course-txt-cent .right-course {
  width: 352px;
  max-height: 448px;
  text-align: left;
  margin-top: 64px;
  background: #2f2f2f;
  border-radius: 0 4px 4px 0;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top
}
.course-txt-cent .right-course .right-info-area {
  font-size: 14px
}
.course-txt-cent .right_recommend_course {
  margin-top: 12px;
  max-height: 1225px;
  background: #fff;
  border-left: 1px solid #eee;
  border-radius: 0 4px 4px 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
.course-txt-cent .mid-container {
  height: 648px
}
.course-txt-cent .course-right-list {
  position: relative;
  max-height: 1225px;
  padding: 0 16px 0 19px;
  background: #fff;
  z-index: 1;
  border-radius: 0 4px 0 0
}
.course-txt-cent .course-right-list .video-list-tit {
  width: 100%;
  height: 64px;
  line-height: 64px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #eee
}
.course-txt-cent .video-list-cont {
  margin-bottom: 20px
}
.course-txt-cent .video-list-cont .li-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
  font-size: 0
}
.course-txt-cent .video-list-cont .list-link {
  position: relative;
  font-size: 14px;
  display: inline-block;
  vertical-align: top
}
.course-txt-cent .video-list-cont a.list-link {
  margin-right: 12px
}
.course-txt-cent .video-list-cont .img-cover {
  width: 150px;
  height: 94px;
  border-radius: 4px
}
.course-txt-cent .video-list-cont .course-text {
  width: 155px;
  height: 75px
}
.course-txt-cent .video-list-cont .vid-title {
  color: #666;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden
}
.course-txt-cent .video-list-cont .vid-title:hover {
  color: #f3793d
}
.course-txt-cent .video-list-cont .fix-lab {
  position: absolute;
  width: 100%;
  bottom: 0;
  color: #999;
  line-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}
.course-txt-cent .video-list-cont .fix-lab > a {
  display: none
}
.course-txt-cent .video-list-cont .fix-lab .lab-list {
  display: inline-block;
  font-size: 12px
}
.course-txt-cent .video-list-cont .fix-lab .lab-list:first-child {
  margin-right: 15px
}
.course-txt-cent .video-list-cont .fix-lab .vip-btn {
  display: inline-block;
  width: 59px;
  height: 21px;
  font-size: 12px;
  color: #f3793d;
  line-height: 21px;
  border: 1px solid #f3793d;
  border-radius: 4px;
  text-align: center
}
.mid-container {
  margin-top: 20px
}
.mid-container .video-left-bg {
  position: relative;
  cursor: pointer;
  width: 850px;
  height: 550px
}
.mid-container .video-left-bg .cover-img {
  width: 100%;
  height: 100%
}
.mid-container .video-left-bg .mask {
  background: rgba(0, 0, 0, .4);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.mid-container .video-left-bg .play-icon {
  display: inline-block;
  position: absolute;
  z-index: 2;
  width: 57px;
  height: 57px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center
}
.mid-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative
}
.mid-container span.play-free-txt {
  margin-top: -78px
}
.mid-container span.play-free-txt:after {
  content: "免费学习";
  position: absolute;
  width: 100px;
  height: 34px;
  left: 50%;
  margin-left: -50px;
  bottom: -45px;
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  border-radius: 30px;
  background: #ff4a3b
}
.mid-container .left-wrap .link-groups {
  position: absolute;
  left: -61px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px;
  background: #222;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 3
}
.mid-container .left-wrap .link-groups .link-group {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  color: #999;
  border-bottom: 1px solid #2f2f2f;
  line-height: 16px;
  cursor: pointer
}
.mid-container .left-wrap .link-groups .link-group > i {
  display: block;
  margin: 0 auto 6px
}
.mid-container .left-wrap .link-groups .link-group:hover {
  color: #f3793d
}
.mid-container .left-wrap .link-groups .link-group:hover .share-icon {
  background-position: -48px -214px
}
.mid-container .left-wrap .link-groups .link-group:hover .love-icon {
  background-position: -223px -150px
}
.mid-container .left-wrap .link-groups .link-group:hover .download-icon {
  background-position: -86px -214px
}
.mid-container .left-wrap .link-groups .link-group:hover .loved-icon {
  background-position: -262px -150px
}
.mid-container .left-wrap .link-groups .share-icon {
  width: 18px;
  height: 20px;
  background-position: -10px -214px
}
.mid-container .left-wrap .link-groups .love-icon {
  width: 19px;
  height: 19px;
  background-position: -184px -150px
}
.mid-container .left-wrap .link-groups .loved-icon {
  background-position: -262px -150px
}
.mid-container .left-wrap .link-groups .download-icon {
  width: 17px;
  height: 20px;
  background-position: -123px -214px
}
.mid-container .left-wrap .link-groups .link-phone {
  position: relative
}
.mid-container .left-wrap .link-groups .link-phone .phone-hover {
  display: none;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  width: 180px;
  height: 209px;
  border: 1px solid #eee;
  -webkit-box-shadow: 0 2px 10px 0 rgba(194, 198, 202, .4);
  box-shadow: 0 2px 10px 0 rgba(194, 198, 202, .4);
  border-radius: 4px;
  position: absolute;
  left: 56px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 3
}
.mid-container .left-wrap .link-groups .link-phone .phone-hover > img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: block
}
.mid-container .left-wrap .link-groups .link-phone .phone-hover:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -5px
}
.mid-container .left-wrap .link-groups .link-phone .phone-hover .download-text {
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  white-space: nowrap
}
.mid-container .left-wrap .link-groups .link-phone .phone-hover .tips {
  font-size: 14px;
  color: #666;
  line-height: 1
}
.mid-container .left-wrap .link-groups .link-phone:hover {
  color: #f3793d
}
.mid-container .left-wrap .link-groups .link-phone:hover .phone-hover {
  display: block
}
.mid-container .left-wrap .link-groups .link-phone:hover .phone-hover p {
  color: #666
}
.mid-container .left-wrap .link-groups .link-phone:hover:before {
}
.mid-container .left-wrap .link-groups .link-invitation {
  display: none;
  color: #f3793d
}
.mid-container .left-wrap .link-groups .link-invitation > img {
  margin-bottom: 6px;
  width: 26px;
  height: 24px
}
.mid-container .enter-group-wrap {
  height: 49px;
  padding: 0 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 14px;
  color: #999;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 65px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.mid-container .enter-group-wrap .js_vip_no, .mid-container .enter-group-wrap .js_vip_share {
  display: none
}
.mid-container .enter-group-wrap .text-fr-vip {
  position: absolute;
  right: 20px;
  width: auto;
  top: 5px;
  height: 28px;
  font-size: 0;
  line-height: 28px
}
.mid-container .enter-group-wrap .text-fl-vip .text-right {
  width: auto;
  height: auto
}
.mid-container .enter-group-wrap .txt-link {
  display: inline-block;
  height: 100%;
  font-size: 14px;
  color: #f3793d;
  text-align: center;
  cursor: pointer
}
.mid-container .enter-group-wrap .text-left {
  display: none;
  width: 167px;
  border-radius: 14px 0 0 14px
}
.mid-container .enter-group-wrap .text-right {
  width: 155px;
  height: 40px;
  color: transparent
}
.mid-container .enter-group-wrap .item {
  margin-right: 20px;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.mid-container .enter-group-wrap .te-curriculum {
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 17px
}
.mid-container .enter-group-wrap .te-curriculum .arbitrary-learning {
  font-size: 14px;
  color: #999;
  margin-left: 17px
}
.mid-container .enter-group-wrap .te-curriculum .arbitrary-learning a {
  font-size: 14px;
  color: #ffd100;
  display: inline-block;
  margin-left: 8px
}
.mid-container .enter-group-wrap .dn-exercises {
  position: relative;
  font-size: 14px;
  color: #f3793d;
  padding-right: 12px;
  cursor: pointer
}
.mid-container .enter-group-wrap .dn-exercises:before {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  border: solid #f3793d;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.mid-container .enter-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}
.mid-container .vip-recharge-btns {
  display: none;
  margin-top: 4px;
  text-align: center
}
.mid-container .vip-recharge-btns .vip-recharge-btn {
  display:inline-block;
  margin-bottom: 1px;
  padding: 0 38px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  background: #ffd100;
  border-radius: 18px;
  cursor: pointer
}
.mid-container .vip-recharge-btns .vip-tips {
  font-size: 12px;
  color: #a7a7a7;
  line-height: 1
}
.mid-container .vip-recharge-btns .buy-month-vip {
  font-weight: 700;
  -webkit-animation: scaleDrew 2.5s ease-in-out infinite;
  animation: scaleDrew 2.5s ease-in-out infinite
}
.mid-container .vip-recharge-btns .buy-month-vip > span {
  font-size: 28px;
  color: #ce2e2e
}
.right-nav-change {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background: #242424
}
.right-nav-change .item {
  position: relative;
  width: 50%;
  font-size: 14px;
  color: #aaa;
  text-align: center;
  cursor: pointer
}
.right-nav-change .item:first-child {
  margin-left: 0
}
.right-nav-change .item:after {
  display: none;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 352px;
  height: 50px;
  background-position: -10px -80px
}
.right-nav-change .item:last-child:after {
  left: auto;
  right: 0;
  background-position: -10px -10px
}
.right-nav-change .item .item-name {
  position: relative;
  z-index: 1
}
.right-nav-change .item .item-nums {
  font-size: 12px;
  color: #a7a7a7
}
.right-nav-change .active {
  font-size: 16px;
  color: #fff;
  font-weight: 700
}
.right-nav-change .active:after {
  display: block
}
.right-nav-change .nav-slide-bar {
  height: 2px;
  width: 0;
  top: 46px !important;
  background: #f3793d;
  position: absolute;
  opacity: 0;
  z-index: 1;
  -webkit-transition: all .5s;
  transition: all .5s
}
/*** 767 ***/
@media (max-width: 767px) {}
@media (max-width:1600px) {}
@media screen and (min-width:1600px) {}
@media screen and (max-width:1600px) {
  .course-txt-cent .left-course {
    display: inline-block;
    width: 772px
  }
  .course-txt-cent .left-course .mid-container {
    height: 553px
  }
  .course-txt-cent .left-course .mid-container .video-bg {
    height: 483px
  }
  .course-txt-cent .left-course .p-text-vid {
    width: 580px
  }
  .course-txt-cent .left-course .reply-lists-wrap .p-text-vid {
    width: 500px
  }
  .course-txt-cent .left-course .course-nav-btn {
    right: -94px
  }
  .course-txt-cent .course-upper {
    height: 757px
  }
  .course-txt-cent .course-upper .course-types {
    width: 1210px
  }
  .course-txt-cent .catalog-nav-bg {
    height: 343px
  }
  .course-content-block .media-1600 {
    display: block
  }
  .course-content-block .media-1920 {
    display: none
  }
}
@media screen and (max-width:1480px) {}
@media screen and (min-width:1601px) {
  .course-txt-cent .left-course {
    width: 924px
  }
  .course-txt-cent .left-course .mid-container {
    height: 580px
  }
  .course-txt-cent .left-course .mid-container .enter-lab-name .name-video {
    width: 690px
  }
  .course-txt-cent .left-course .mid-container .video-bg {
    height: 578px
  }
  .course-txt-cent .course-upper {
    height: 852px
  }
  .course-txt-cent .course-upper .course-types {
    width: 1380px
  }
  .course-txt-cent .catalog-nav-bg {
    height: 438px
  }
}