@charset "utf-8";

#course-vs {
  .content {
    width: 1140px !important;
  }

  .top {
    padding: 8px 0;
    height: 60px;

    .tabs.text {
      background: none;
      padding: 0;
      display: inline-block;
    }

    .f-r {
      height: 44px;
      line-height: 44px;
    }
  }

  .center {
    background: #fff;

    .content {

      .item-list {
        margin: 0 -20px;
        margin-bottom: 20px;

        .item {
          display: inline-block;
          margin: 0 20px;
          border: 3px solid #F7F7F7FF;
          background: #F7F7F7FF;
          border-radius: 4px;
          width: 254px;
          padding: 20px 20px 30px 60px;
          position: relative;
          cursor: pointer;

          .assets {
            position: absolute;
            left: 15px;
            top: 30px;
          }
        }

        .item.active {
          border: 3px solid rgba(66, 146, 240, 1);
          background: #fff;
        }
      }

      .item-detail {
        overflow: hidden;

        .left {
          float: left;
          width: 450px;
          height: 500px;
          background: #eee;
        }

        .right {
          padding-left: 490px;

          p {
            margin: 0;
          }

          .input {
            position: relative;
            line-height: 32px;

            .up {
              cursor: pointer;
              position: absolute;
              left: 160px;
              top: 5px;
              font-size: 10px;
              color: #D0D8E2;
              transform: scale(0.8);

            }

            .down {
              cursor: pointer;
              position: absolute;
              left: 160px;
              top: 15px;
              font-size: 10px;
              color: #D0D8E2;
              transform: scale(0.8);
            }

            input {
              line-height: 32px;
              background: #F7F7F7FF;
            }
          }

          .action {
            margin-bottom: 10px;
            overflow: hidden;
            padding-top: 40px;

            .button {}

            .default.button {
              color: #4292F0;
            }
          }
        }
      }
    }
  }

  .bottom {
    background: #FAFAFAFF;

    .content {
      padding: 20px 0;

      .tab-layout {
        padding-top: 20px;

        .tab-title {
          border-left: 6px solid #7876FCFF;
          padding-left: 5px;
          color: #303036FF;
          font-size: 18px;
          margin-bottom: 5px;
          font-weight: bold;
        }

        .tab-desc {
          margin-bottom: 30px;
          font-size: 18x;
        }

        .qr-layout {
          text-align: center;
          padding: 20px;
        }

        .other-answer-carousel {
          padding: 30px 0;
        }

        .teach-item {
          position: relative;
          overflow: hidden;
          padding: 40px 0;

          .left {
            float: left;
            width: 240px;
          }

          .right {
            padding-left: 280px;
          }
        }
      }
    }
  }
}