@charset "UTF-8";
/*适用于任何页面，通用重置样式（css reset）*/
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input, blockquote, pre, legend, textarea, th, td {
  margin: 0;
  padding: 0; }

/*不使用“*”，性能差*/
ol, ul {
  list-style: none; }

img {
  border: none; }

li {
  list-style: none; }

input, select, textarea {
  outline: none; }

a {
  text-decoration: none; }

/*清浮动，各种方法的优缺点*/
.clearfix {
  *zoom: 1;
  /*ie6,7	*/ }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

footer {
  position: ablolute;
  bottom: 0;
  height: 264px;
  width: 100%;
  background: #2c3339; }
  footer dl {
    padding-left: 120px;
    float: left;
    color: #a2a4a5; }
    footer dl dt {
      font-size: 12px; }
    footer dl dd {
      padding-top: 15px;
      font-size: 14px; }

.copyright {
  padding-top: 94px;
  padding-left: 256px;
  width: 396px;
  height: 86px; }
  .copyright a {
    width: 236px;
    height: 20px;
    background: url() 0 0 no-repeat; }

body, a {
  font-family: "微软雅黑"; }

/* 最外面的包含层*/
.wrapper {
  margin: 0 auto;
  min-width: 1206px;
  width: 100%;
  position: relative; }

.top-notice {
  height: 36px;
  padding: 0 13%;
  font-size: 12px;
  background: #f3f3f3; }

.top-notice p {
  display: inline-block;
  line-height: 36px; }

.watch-now {
  color: #4fb173; }

.watch-now:after {
  content: ">"; }

.no-notice {
  float: right;
  cursor: pointer;
  padding-left: 11px;
  line-height: 36px; }
  .no-notice a {
    display: inline-block;
    padding-right: 6px;
    width: 12px;
    height: 12px;
    background: url("../../images/icons.png") 0 2px no-repeat; }

.container {
  position: absolut;
  top: 36px; }

header {
  padding: 0 13%;
  height: 90px;
  line-height: 90px; }
  header span {
    font-size: 12px;
    padding-left: 12px; }

.logo {
  display: inline-block;
  font-family: "Gill Sans MT";
  font-size: 28px;
  font-weight: bold;
  color: #39a030;
  width: 72px;
  background: url("../../images/icons.png") 70px -2px no-repeat; }

.title {
  display: inline-block;
  font-size: 22px;
  padding-right: 32px; }

.add-attention {
  padding: 2px 10px 2px 22px;
  color: #fff;
  font-size: 12px;
  background: url("../../images/icons.png") 0 -98px no-repeat; }

.nav {
  float: right; }

.nav li {
  float: left;
  padding-right: 54px; }
  .nav li a {
    color: #666; }

.nav a:hover {
  color: #21a557; }

.top-banner {
  position: relative;
  z-index: 0;
  float: left;
  height: 375px;
  overflow: hidden; }
  .top-banner img {
    max-width: 100%; }

.top-banner li {
  display: none;
  float: left; }

.dot {
  position: absolute;
  top: 442px;
  left: 48%; }

.dot li {
  float: left;
  margin-left: 12px;
  width: 14px;
  height: 14px;
  cursor: pointer; }

.r {
  background: url("../../images/icons.png") 0 -232px no-repeat; }

.current {
  background: url("../../images/icons.png") 0 -195px no-repeat; }

.course-list {
  padding: 50px 13%;
  position: absolute;
  top: 516px;
  z-index: 0; }

.course-list li {
  float: left;
  padding: 0 24px 0 96px;
  background: url("../../images/icons.png") -418px -414px no-repeat; }
  .course-list li h4 {
    font-size: 22px;
    font-weight: normal; }
  .course-list li p {
    width: 220px;
    padding: 22px 0 36px 0;
    font-size: 14px;
    color: #989898; }
  .course-list li a {
    color: #80bc7c; }

.course-list a:after {
  content: ">"; }

#no-padding {
  padding-right: 0; }

.center-banner {
  max-width: 100%;
  height: 250px;
  position: absolute;
  top: 800px;
  margin-right: 0;
  background: #f8f8f8;
  overflow: hidden; }

.center-banner li {
  padding-top: 2px;
  padding-right: 5px;
  float: left; }
  .center-banner li img {
    height: 180px;
    width: 264px; }

.content {
  width: 100%;
  background: #f8f8f8;
  position: absolute;
  top: 1050px;
  height: 1700px; }

.main-courses {
  position: absolute;
  left: 5%;
  width: 84%; }

.tab-change li {
  float: left;
  width: 20%;
  line-height: 50px;
  text-align: center;
  box-shadow: 1px 1px 2px #ecebeb; }

.resource {
  background: #fff;
  color: #666; }

.active {
  background: #39a030;
  color: #fff; }

.tab-change li:hover {
  background: #39a030;
  color: #fff; }

.design-courses {
  width: 984px;
  height: 1250px;
  padding-top: 78px; }
  .design-courses li {
    float: left;
    margin-right: 24px;
    margin-top: 20px;
    width: 222px;
    height: 230px;
    font-size: 12px;
    background: #fff; }
  .design-courses img {
    padding-top: 1px;
    width: 222px;
    height: 126px; }
  .design-courses h5 {
    font-weight: normal;
    color: #a1a1a1;
    padding-top: 8px;
    padding-right: 6px;
    padding-left: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .design-courses span {
    display: block;
    padding-right: 6px; }

.design-members {
  margin-top: 8px;
  margin-left: 6px;
  padding-right: 6px;
  text-indent: 14px;
  width: 30px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: url("../../images/icons.png") 0 -350px no-repeat; }

.category {
  padding-top: 8px;
  padding-left: 6px;
  color: #ddd; }

.price {
  padding-top: 8px;
  padding-left: 6px;
  color: #ff582a; }

.vertify {
  position: absolute;
  height: 1348px;
  overflow: hidden; }

.p-detail {
  float: left; }

.page-change {
  position: absolute;
  top: 1428px;
  z-index: 2;
  left: 636px; }
  .page-change span {
    display: inline-block;
    width: 30px;
    height: 22px;
    color: #fff;
    background: #9dd8b1;
    text-align: center; }
  .page-change a {
    color: #fff;
    font-size: 16px; }
  .page-change ul {
    display: inline-block;
    color: #666;
    font-size: 14px;
    padding: 0 10px; }
  .page-change li {
    float: left;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    margin-right: 8px;
    cursor: pointer; }

.page-change li:hover {
  background: #9dd8b1;
  color: #fff; }

.current1 {
  color: #9dd8b1; }

.the-latest {
  position: absolute;
  right: 5%;
  width: 226px;
  border: 1px solid #ecebeb;
  background: #fff; }
  .the-latest h4 {
    padding-left: 18px;
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #ddd;
    font-weight: normal;
    font-size: 16px; }
  .the-latest div {
    font-size: 14px;
    color: #666; }

.l-padding {
  padding: 22px; }

.video-play {
  width: 180px;
  height: 110px;
  padding-top: 6px; }

.hot-c {
  position: relative;
  height: 720px;
  overflow: hidden; }

.hot-courses {
  position: absolute;
  width: 226px;
  cursor: pointer; }

.ten-detail {
  padding-bottom: 22px;
  top: 266px; }
  .ten-detail li {
    padding-top: 22px;
    padding-left: 22px;
    height: 50px;
    width: 182px; }
  .ten-detail img {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 12px; }
  .ten-detail h5 {
    font-weight: normal;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .ten-detail span {
    width: 100px;
    height: 14px;
    font-size: 10px;
    color: #999;
    padding-left: 14px;
    background: url("../../images/icons.png") 0 -350px no-repeat; }

footer {
  position: absolute;
  bottom: 0;
  height: 264px;
  width: 100%;
  background: #2c3339; }
  footer dl {
    padding-left: 120px;
    float: left;
    color: #a2a4a5; }
    footer dl dt {
      font-size: 12px; }
    footer dl dd {
      padding-top: 15px;
      font-size: 14px; }

.copyright {
  padding-top: 94px;
  padding-left: 256px;
  width: 396px;
  height: 86px; }
  .copyright a {
    width: 236px;
    height: 20px;
    background: url() 0 0 no-repeat; }

.mask {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.8;
  filter: alpha(opacity=60);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  display: none; }

#LoginBox {
  position: absolute;
  left: 460px;
  top: 150px;
  background: white;
  width: 426px;
  height: 300px;
  z-index: 10000;
  display: none; }

.row1 {
  padding: 10px 40px;
  line-height: 50px;
  height: 50px;
  font-weight: bold;
  color: #666;
  font-size: 18px; }

.row {
  height: 77px;
  line-height: 77px;
  padding: 0px 40px;
  font-size: x-large; }

.close_btn {
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  float: right;
  padding-right: 4px; }

.inputBox {
  border: 1px solid #c3c3c3;
  padding: 1px 3px 6px 8px;
  background: #fafafa;
  margin-left: 10px; }

#txtName {
  height: 27px;
  width: 290px;
  border: none;
  background: #fafafa; }

#txtPwd {
  height: 27px;
  width: 290px;
  border: none;
  background: #fafafa; }

#loginbtn {
  color: #fff;
  background: #24ac46;
  text-decoration: none;
  padding: 4px 126px;
  margin-left: 8px;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.warning {
  float: right;
  color: Red;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  display: none; }

#big-video {
  position: absolute;
  left: 192px;
  top: 874px;
  background: white;
  width: 950px;
  height: 676px;
  z-index: 10000;
  display: none; }
  #big-video a {
    display: block;
    float: right;
    font-size: 20px;
    padding-right: 12px; }
  #big-video h4 {
    float: left;
    padding-top: 36px;
    padding-left: 30px;
    color: #666; }
  #big-video video {
    height: 570px;
    width: 890px;
    padding-top: 20px;
    padding-left: 30px; }
