#give-courses {
  @mixin px2px($name, $px) {
    #{$name}: round($px / 2) * 1px;
  }
  @function px2rem($px) {
    @return #{$px}px;
  }
  background: #3d1aaf;
  padding-bottom: px2rem(45);

  .banner {
    width: 100%;
    height: 187.5px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .give-box {
    background-color: #1c008c;
    box-shadow: 0 0 4px 0 #1c008c;
    margin: px2rem(10);
    padding: px2rem(10) px2rem(5) 0 px2rem(5);

    .give-course {
      width: 100%;
      height: px2rem(125);
      background-color: #fff;
      border-radius: 2px;
      margin-bottom: px2rem(10);
      padding: px2rem(8) px2rem(5);
      display: flex;
      justify-content: space-between;

      .give-course-img {
        width: px2rem(150);
        height: px2rem(108);

        img {
          width: 100%;
          height: 100%;
        }
      }

      .give-course-mess {
        width: px2rem(178);
        height: px2rem(108);
        margin-left: px2rem(7);
        position: relative;
        text-align: left;

        .course-title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .course-title a {
          color: #353535;
          @include px2px(font-size, 26);
        }

        .course-teacher {
          @include px2px(font-size, 24);
          color: #666;
          margin-top: px2rem(12);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .course-time {
          @include px2px(font-size, 24);
          color: #666;
          margin-top: px2rem(7);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .tag {
          display: inline-block;
          color: #555;
          background-color: #f2f2f2;
          margin-right: px2rem(4);
          padding: px2rem(2) px2rem(4);
        }

        .toreceive {
          width: px2rem(93);
          height: px2rem(24);
          @include px2px(font-size, 24);
          color: #fff;
          background-color: #09f;
          border-radius: 4px;
          line-height: px2rem(24);
          text-align: center;
          position: absolute;
          bottom: 0;
        }
      }
    }

    .rule-title {
      color: #2ff8ff;
      @include px2px(font-size, 32);
      text-align: left;
      padding-left: px2rem(5);
    }

    .rule-list {
      text-align: left;
      color: #fff;
      @include px2px(font-size, 24);
      padding-left: px2rem(5);
    }

    .marquee_box {
      width: px2rem(355);
      height: px2rem(30);
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.5);
      margin-left: px2rem(-5);
      margin-top: px2rem(15);

      .marquee_list {
        li {
          color: #fff;
          height: px2rem(30);
          line-height: px2rem(30);
          @include px2px(font-size, 24);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;

          img {
            width: px2rem(18);
            height: px2rem(18);
            vertical-align: middle;
            border-radius: 50%;
          }

          span {
            color: #0099ff;
            display: inline-block;
            margin: 0 5px;
          }
        }
      }

      .marquee_top {
        transition: all 0.5s;
        margin-top: -30px;
      }
    }
  }

  .set-prize {
    background-color: #fcecb1;
    border-radius: px2rem(3);
    margin: px2rem(20) px2rem(10) 0 px2rem(10);
    padding: px2rem(18) px2rem(15) px2rem(20) px2rem(15);

    .set-prize-title {
      width: 100%;
      text-align: center;
      color: #f75e18;
      @include px2px(font-size, 28);

      img {
        width: px2rem(19);
        height: px2rem(19);
        margin-right: px2rem(10);
        vertical-align: sub;
      }
    }

    .set-prize-content {
      text-align: left;
      color: #6e1517;
      @include px2px(font-size, 24);
      display: flex;
      flex-wrap: wrap;

      p {
        margin-top: px2rem(12);
      }
    }
  }

  .ranking-list {
    margin: px2rem(30) px2rem(10) 0 px2rem(10);

    .ranking_title {
      width: 100%;
      text-align: center;

      img {
        width: px2rem(18);
        height: px2rem(20);
        vertical-align: text-bottom;
      }

      span {
        color: #fff;
        @include px2px(font-size, 28);
        display: inline-block;
        margin-left: px2rem(10);
      }

      p {
        color: #fee600;
        @include px2px(font-size, 24);
        margin-top: 10px;
      }
    }

    table {
      text-align: center;
      margin-top: px2rem(15);
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
      width: 100%;
      border-radius: 6px 6px 0 0;
      overflow: hidden;

      thead tr {
        background-color: #fadc7f;
        height: px2rem(30);
        line-height: px2rem(30);
        @include px2px(font-size, 26);
        color: #ad4700;
      }

      tbody tr:nth-of-type(even) {
        background-color: #fadc7f;
        height: px2rem(35);
      }

      tbody tr:nth-of-type(odd) {
        background-color: #ffe794;
        height: px2rem(35);
      }

      tbody tr {
        color: #333;
        @include px2px(font-size, 24);
      }

      tbody tr td {
        width: 30%;
      }

      tbody tr td:nth-child(2) {
        text-align: left;
        padding-left: px2rem(15);
      }

      tbody tr td:nth-child(2) span {
        display: inline-block;
        width: 55%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        top: 5px;
        margin-left: px2rem(5);
      }

      tbody tr td:nth-child(1) img {
        vertical-align: middle;
        width: px2rem(18);
        height: px2rem(22);
      }

      tbody tr td:nth-child(2) img {
        width: px2rem(20);
        height: px2rem(20);
        vertical-align: middle;
        border-radius: 50%;
      }

      tbody .ismylist td {
        background-color: #ad4700;
        color: #fff;
      }
    }

    .btm {
      width: 100%;
      height: px2rem(10);
      background-color: #ffe794;
      border-radius: 0 0 6px 6px;
    }
  }

  .julynotice {
    margin: px2rem(60) auto px2rem(30) auto;
    color: #fee600;
    @include px2px(font-size, 13);
    text-align: center;
  }

  .code-mbc {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    text-align: center;

    .code-box {
      width: 80%;
      background-color: #fff;
      border-radius: px2rem(10);
      text-align: center;
      margin: px2rem(200) auto 0 auto;
      padding-top: px2rem(15);

      .code-title {
        color: #333;
        @include px2px(font-size, 36);

        i {
          color: #f00;
          @include px2px(font-size, 36);
          font-style: normal;
        }
      }

      #qrCodeWpay {
        width: px2rem(150);
        height: px2rem(150);
        margin: px2rem(10) auto 0 auto;
      }

      .btmmess {
        color: #666;
        padding-bottom: px2rem(15);
        margin-top: px2rem(-5);
      }
    }

    .close {
      display: inline-block;
      @include px2px(font-size, 60);
      color: #fff;
      margin-top: px2rem(20);
    }
  }
}


#give-courses ~ .year19-index {
    display: none;
}