
@charset 'utf-8';
/* css document */
@import url('reset.css');
%center {
  margin-left:auto;
    margin-right:auto;
}

@mixin round($radius:2px) {
  -webkit-border-radius:$radius;
      border-radius:$radius;
}

@mixin opacity($opacity:0) {
  opacity:$opacity;
  fliter:alpha(opacity=$opacity*100);
}

.notic {
    display:none;
    height: 36px;
    background:#f3f3f3;
    &-wrap {
      width:960px;
      height:100%;
      margin-left:auto;
      margin-right:auto;
      overflow: hidden;
      > p {
          width: 470px;
          line-height: 36px;
          float:left;
      > a {
        display:inline-block;
        height:100%;
        color:#71bc8b;
      &:after {
        content:'>';
      }
    }
    }
    > button {
      float:right;
      width:68px;
      line-height:36px;
      border:0;
      background:none;
      cursor:pointer;
    }
    }

}
.mask {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity: 0.75;
  fliter:alpha(opacity=75);
  z-index: 1000;
}
.logBox {
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    width: 400px;
    padding: 30px 40px 40px;
    margin-top:-136px;
    margin-left:-200px;
    @include round(10px);
    background-color: #fff;
    z-index: 9999;
    opacity: 1;
    > h2 {
        margin: 0 0 25px;
        font-size: 25px;
        font-weight: 400;
        text-align: center;
        color: #323a45;
    }
    > form {
        width:400px;
        display: block;
        margin-top: 0em;
         input {
            width:200px;
            height:24px;
            margin-left:98px;
            margin-bottom:10px;
            text-indent:15px;
        }
        > button {
            width:68px;
            height:30px;
            line-height:30px;
            margin-top:4px;
            margin-left:156px;
            border:0;
            text-align:center;
            background:#00caab;
            cursor:pointer;
          }
    }
    .warning {
        margin:0;
        height:28px;
        line-height:28px;
        color:red;
        @include opacity;
    }
    .bottom-link > a {
      display:block;
      width:100%;
      color:#000;
      text-decoration:none;
      text-align:right;
      &:hover {
        text-decoration:underline;
      }
    }
}
.wrap {
  width:100%;
  min-height:2879px;
  overflow:hidden;
  @extend %center;
  @at-root .nav {
    width:960px;
    height:89px;
    @extend %center;
    &-attention {
      float:left;
      min-width:376px;
      height:25px;
      line-height:25px;
      margin-top:30px;
      > a {
        float:left;
        width:61px;
        height:25px;
        line-height:25px;
        > img {height:23px;}
      }
      > h1 {
        float:left;
        min-width:154px;
        height:25px;
        line-height:25px;
        padding-left:13px;
        border-left:1px solid #39a030;
        font-family:黑体;
        font-size:22px;
        margin-left:8px;
      }
      .attention {
        float:left;
        min-width:54px;
        height:21px;
        margin-top:2px;
        border:0;
        @include round;
        margin-left:30px;
        font-weight:bold;
        text-align:center;
        background:#21a557;
        color:#fff;
        cursor:pointer;
      }
      > p {
        float:right;
        min-width:43px;
        line-height:25px;
/*        margin-left:12px;
 */       line-height:25px;
        font-family:宋体;
        > span {
          float:right;
          text-align:right;
        }
      }
    }
    &-search {
      float:right;
      min-width:34px;
      height:25px;
      margin-top:30px;
      position:relative;
      &-input {
        position:absolute;
        left:-388px;
        top:-1px;
        width:420px;
        height:26px;
        border:1px solid #ccc;
        line-height:30px;
        text-indent:2em;
        @include round(2em);
        z-index:3;
        display:none;

      }
      &-btn {
        width:20px;
        height:22px;
        margin-top:3px;
        border:0;
        background:url("../imgs/search-btn.png") no-repeat;
        cursor:pointer;
        position:relative;
        z-index:9;
      }
    }
    &-list {
      float:right;
      height:16px;
      margin:30px 30px 0 0;
      padding:7px 0 2px 0;
      &-center {
        min-width:48px;
        margin-right:56px;
        margin-left:52px;
      }
      > li {
        float:left;
        line-height:16px;
        font-size:16px;
        color:#666666;
        cursor:pointer;
      }
    }
  }
  @at-root .banner {
    width:100%;
    min-width:1616px;
    min-height:460px;
    @extend %center;
    position:relative;
    display: flex;
      align-items: center;
      flex-direction: column;
    -webkit-transform-style: preserve-3d;
    transform-style:preserve-3d;
    &-img {
      position:absolute;
      width:100%;
      top:0;
      left:0;
      > li {
        width:100%;
        height:460px;
        position:absolute;
        display:none;
        img {
          width:100%;
          height:100%;
        }
      }
      .show {
        display:block;
      }
    }
    &-btn {
      position:absolute;
      top:93.5%;
      z-index:9;
      text-align:center;
      > li {
        float:left;
        margin-right:11px;
        width:10px;
        height:10px;
        @include round(50%);
        background:#fff;
        cursor:pointer;
      }
      .btn-last {margin:0;}
      .clik {background:#000;}
    }
  }
      @at-root .platform {
      width:960px;
      margin-top:60px;
      @extend %center;
      overflow:hidden;
      &-course,&-cloud,&-mooc {
        width:271px;
        margin-right:70px;
        float:left;
        @at-root .symbol {
          float:left;
          width:80px;
          height:80px;
          margin-top:9px;
          margin-right:20px;
          @include round(50%);
          background:url('../imgs/logo-symbol.png') no-repeat left top;
        }
        &-intro {
          float:right;
          width:171px;
          > h3 {
            width:100%;
            font-size:22px;
            line-height:22px;
            margin-bottom:20px;
            color:#333;
          }
          > p {
            width:100%;
            height:110px;
            line-height:24px;
            font-size:14px;
            color:#666;
          }
          > a {
          display:block;
          min-width:70px;
          line-height:15px;
          font-size:14px;
          margin-top:33px;
          color:#39a030;
          &:hover {
              text-decoration:underline;
            }
          }
        }
      }
      &-mooc {
        margin-right:0;
        .symbol {background:url('../imgs/logo-symbol.png') no-repeat -160px top;}
      }
      &-cloud .symbol {background:url('../imgs/logo-symbol.png') no-repeat -80px top;}

    }
    @at-root .life-photos {
      width:1616px;
      height:220px;
      @extend %center;
      margin-top:60px;
      overflow:hidden;
      > li {
        float:left;
        margin-right:4px;
      }
      .last {margin:0;}
    }
  .content {
    width:100%;
    background:#f8f8f8;
    .course-wrap {
      width:962px;
      height:1551px;
      @extend %center;
      @at-root .course {
        float:left;
        width:736px;
        height:1350px;
        margin-top:81px;
        @extend %center;
        &-catgories {
          width:400px;
          height:50px;
          border:1px solid #d4d3d3;
          margin-bottom:27px;
          margin-left:1px;
          overflow:hidden;
          > button {
            float:left;
            width:200px;
            height:50px;
            line-height:50px;
            border:0;
            font-size:20px;
            color:#666;
            background:#fff;
            text-align:center;
            cursor:pointer;
          }
          & &-now {
            color:#fff;
            background:#39a030;
          }
        }
        &-fact {
          width:736px;
          > ul {
            width:736px;
            overflow:hidden;
            margin-bottom:12px;
          }
          &-list {
            width:225px;
            height:229px;
            border:1px solid #e6e6e6;
            float:left;
            margin-right:18px;
            margin-bottom:18px;
            background:#fff;
            > a {
              display:block;
              width:223px;
              height:124px;
              margin:1px 1px 9px 1px;
              > img {
                width:100%;
                height:100%;
              }
            }
            &-definition {
              width:219px;
              @extend %center;
              padding-left:4px;
              > dt {
                line-height:12px;
                margin-bottom:10px;
                color:#6b6b6b;
              }
              &-tag {
                line-height:12px;
                margin-bottom:10px;
                color:#bdbdbd;
              }
              &-num {
                height:16px;
                line-height:16px;
                margin-bottom:10px;
                > span {
                  display:inline-block;
                  padding-left:16px;
                  padding-right:4px;
                  border:1px solid #ddd;
                  @include round(1px);
                  line-height:16px;
                  background:url('../imgs/icon-num.png') no-repeat 4px top;
                  color:#ddd;
                }
              }
              &-value {
                line-height:12px;
                color:#ff3f00;
              }
            }
          }
        }
        .pages {
          float:right;
          line-height:20px;
          font-size:14px;
          color:#959595;
          overflow:hidden;
          &-num {
            float:left;
            margin:0 12px;
            >li {
              width:20px;
              height:20px;
              float:left;
              margin-right:8px;
              text-align:center;
              cursor:pointer;
              &:hover {
                color:#fff;
                background:#9dd8b1;
              }
              &:last-child{margin-right:0;}
            }
            &-now {
              color:#fff;
              background:#9dd8b1;}
          }
          &-star,&-end {
            display:block;
            float:left;
            width:30px;
            height:20px;
            background:url('../imgs/pages-icon.png') no-repeat ;
            cursor:pointer;
          }
          &-end {background:url('../imgs/pages-icon.png') no-repeat -30px;}
        }
      }
      @at-root .sidebar {
        float:right;
        width:225px;
        height:1030px;
        margin-top:81px;
        &-intrfo {
          width:223px;
          height:230px;
          border-right:1px solid #ecebeb;
          border-bottom:1px solid #ecebeb;
          border-left:1px solid #ecebeb;
          margin-bottom:19px;
          > h3 {
            font-size:16px;
            line-height:55px;
            text-indent:20px;
            color:#333333;
          }
          &-video {
            width:180px;
            height:134px;
            padding:20px 22px;
            border-top:1px solid #ddd;
            border-bottom:1px solid #ddd;
            > p{
              line-height:14px;
              font-size:14px;
              margin-bottom:9px;
              color:#666;
            }
            .video {
              width:180px;
              height:110px;
              cursor:pointer;
              background:url('../imgs/video.png') no-repeat;
              > video {
                @include opacity;
              }
            }
          }
        }
        &-latest-list {
          width:183px;
          height:779px;
          border-right:1px solid #ecebeb;
          border-bottom:1px solid #ecebeb;
          border-left:1px solid #ecebeb;
          padding:0 20px;
          > h3 {
            font-size:16px;
            line-height:55px;
            color:#333333;
            border-bottom:1px solid #eee;
          }
          &-wrap {
            position:relative;
            height:682px;
            margin-top:19px;
            overflow:hidden;
            @at-root .list {
              width:100%;
              position:absolute;
              top:0;
              > li {
                width:183px;
                height:50px;
                margin-bottom:20px;
                overflow:hidden;
                font-size:14px;
                > a {
                  float:left;
                  display:block;
                  width:50px;
                  height:50px;
                  margin-right:12px;
                  >img {
                    width:100%;
                    height:100%;
                  }
                }
              }
              &-name {
                float:left;
                width:120px;
                line-height:14px;
                margin-bottom:10px;
                color:#484848;
              }
              &-person {
                float:left;
                width:120px;
                line-height:16px;
                text-indent:16px;
                background:url('../imgs/icon-num.png') no-repeat -1px top;
                color:#999;
              }
            }
          }
        }
      }
    }
    @at-root footer {
      width:100%;
      clear:both;
      min-width:1364px;
      min-height:180px;
      padding-top:82px;
      background:#2c3339;
      color:#a2a4a5;
      font-size:15px;
      @at-root .footer-wrap {
        width:962px;
        height:102px;
        @extend %center;
        overflow:hidden;
        > li {
          float:left;
          height:102px;
        }
        &-inInformation {
          width:394px;
          height:92px;
          margin-top:11px;
          margin-right:150px;
          > dt {
            font-size:22px;
            color:#39a030;
            line-height:22px;
            margin-bottom:26px;
          }
          > dd {
            line-height:20px;
            margin-bottom:4px;
            &:last-child {
              margin-bottom:0;
            }

          }
          &-logo {
            display:block;
            line-height:22px;
            margin-top:11px;
            font-size:28px;
            color:#39a030;
            > span {
              display:inline-block;
              min-width:164px;
              border-left:1px solid #39a030;
              margin-left:10px;
              text-indent:13px;
              font-size:22px;
            }
          }
        }
        &-link,&-about,&-response {
          width:112px;
          height:102px;
          margin-right:97px;
          > dt {
            line-height:13px;
            font-size:12px;
            margin-bottom:15px;
            color:#a2a4a5;
          }
          > dd {
            line-height:16px;
            margin-bottom:13px;
            &:last-child {
              margin-bottom:0;
            }
            > a {
              color:#a2a4a5;
              &:hover {text-decoration:underline;}
            }
          }
        }
        &-about {
          width:64px;
          margin-right:72px;
        }
        &-response {
          width:62px;
          margin-right:0;
        }
      }
    }
  }
}
