.courseList {
  min-height: 100vh;
  background-color: #fff;
  background-image: linear-gradient(180deg, #7DEFE6 0%, rgba(251, 233, 213, 0) 198px);
  padding: 10px 0;
  box-sizing: border-box;
}

.periodContent {
  display: flex;
  padding: 20px;

  .cover {
    position: relative;
    width: 107px;
    min-height: 130px;
    margin-right: 30px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
    overflow: hidden;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    flex-shrink: 0;

    &>img {
      display: block;
      width: 100%;
      min-height: 140px;
      opacity: 0;
      transition: opacity .3s;
      object-fit: cover;
    }

    :global {
      .van-image__loading {
        position: relative;
        min-height: 130px;
        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
      }
    }

    &::before {
      content: '';
      position: absolute;
      left: 5px;
      width: 5px;
      height: 100%;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }

  .contentTitle {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    padding-bottom: 8px;
  }

  .contentLabel {
    font-size: 12px;
    font-weight: 400;
    color: rgb(96, 96, 96);
    line-height: 20px;
  }
}


.periodTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;

  .pIcon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .pTitle {
    font-size: 16px;
    font-weight: 600;
    color: #2D3131;
    margin-right: 8px;
  }

  .pNum {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
  }

  .left {
    display: flex;
    align-items: center;
  }

  .iconQuestion {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
}

// .periodList {
//   :global {
//     .van-cell-group--inset {
//       margin: 0;
//     }

//     .van-cell-group,
//     .van-cell {
//       background: transparent;
//     }

//     .van-cell {
//       padding: 18px 20px;

//       &::after {
//         left: 20px;
//         right: 20px;
//         border-color: rgba(242, 242, 242, 1);
//         transform: none;
//       }

//       .van-cell__title {
//         padding-right: 8px;

//         span {
//           font-size: 15px;
//           font-weight: 600;
//           color: #333333;
//           line-height: 21px;
//           word-break: break-all;
//         }

//         .van-cell__label {
//           font-size: 12px;
//           font-weight: 400;
//           color: #AAAAAA;
//           line-height: 17px;
//           margin: 0;
//         }
//       }

//       .van-cell__value {
//         flex: inherit;
//         flex-shrink: 0;
//       }
//     }
//   }

//   .baseBtn {
//     width: 73px;
//     height: 26px;
//     line-height: 1;
//     color: #fff;
//     font-size: 13px;
//     font-weight: 500;
//     border: 0;
//     border-radius: 13px;
//     flex-shrink: 0;

//     :global {
//       .van-button__text {
//         white-space: nowrap;
//       }
//     }

//     &.disabled {
//       opacity: 0.6 !important;
//     }

//     &.look {
//       background: linear-gradient(270deg, #4BE0A1 0%, #01C1B5 100%);
//     }

//     &.down {
//       background: linear-gradient(270deg, #4BE0A1 0%, #01C1B5 100%);
//       ;
//     }

//     &.downing {
//       background: linear-gradient(270deg, #47CFE5 0%, #2FB3FF 100%);
//     }

//     &.disable {
//       opacity: 1;
//       background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
//     }
//   }
// }

.periodItem {
  width: 36px;
  height: 40px;
  margin-right: 8px;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

.courseDialog {
  width: 315px;

  :global {
    .van-dialog__header {
      // padding-top: 0;

    }
  }

  .iconCross {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
    color: #ccc;
    z-index: 99;
  }
}

.periodItemModel {
  position: relative;

  .iconCachePoint {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    object-fit: contain;
    width: 13px;
    height: 13px;
  }

  .periodTip {
    position: absolute;
    left: -7px;
    top: 0;
    max-height: 15px;
    display: block;
    object-fit: contain;
  }

  .downloading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    color: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.itemTitle {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  color: #777777;

  &.itemTitleActive {
    color: #131415;

    .arrow {
      background: url('./image/icon-arrow-down.png');
      background-size: contain;
    }
  }

  .arrow {
    width: 16px;
    height: 17px;
    display: inline-block;
    margin-right: 6px;
    background: url('./image/icon-arrow.png');
    background-size: contain;

    &.arrowActive {
      background: url('./image/icon-arrow-down.png');
      background-size: contain;
    }
  }
}

.collapseParent {
  padding: 0 20px;

  :global {
    .van-cell {
      padding: 16px 0;
    }

    .van-collapse-item--border:after {
      left: 0;
      right: 0;
    }

    .van-collapse-item__content {
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0;
    }
  }
}

.collapseChild {

  :global {
    .van-collapse-item__content {
      padding-left: 22px;

      .van-cell {
        padding: 12px 0;
      }

      .van-cell__title {
        flex: 1 auto;
      }

      .van-cell__value {
        flex-shrink: 0;
        flex: 1 auto;
      }
    }
  }
}

.radioBtn {
  width: 18px;
  height: 18px;
}

.btnGroup {
  padding: 10px 25px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid #F2F2F2;
  background-color: #fff;

  :global {
    .van-button {
      border-radius: 8px;
    }
  }
}

.popupRule {
  width: 315px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;

  .title {
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: center;
  }

  .content {
    font-size: 15px;
    color: #666666;
    line-height: 26px;
    padding-bottom: 20px;
    padding-top: 15px;
  }
}