.box {
  width: vw(1280);
  height: vh(444);
  box-sizing: border-box;
  margin-bottom: vh(24);
  box-sizing: border-box;
  border: 2px solid #DFE0F3;
  box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
  background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
  border-radius: vw(8);
  padding: vh(24);
  position: relative;
}

:deep(.el-carousel) {
  height: 100%;

  .el-carousel__container {
    height: 100%;

    .el-carousel__item {
      section {
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, vw(186));
        justify-content: space-between;
        align-content: space-between;

        >div {
          height: vh(112);
          box-sizing: border-box;
          background: linear-gradient(180deg, rgba(232, 238, 255, 0.4) 0%, #E8EEFF 100%);
          border: 2px solid #E3E5FD;
          border-radius: vw(8);

          p {
            font-size: vw(22);
            color: #000;
            text-align: center;
            letter-spacing: 2px;
            line-height: vh(54);
          }

          .line {
            height: 1px;
            background: linear-gradient(90deg, rgba(0, 109, 171, 0) -1%, #A7DFFF 50%, rgba(0, 109, 171, 0) 98%);
          }

          div:last-of-type {
            box-sizing: border-box;
            height: vh(54);
            padding: 0 vw(20);
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            span {
              color: #000;
              font-size: vw(20);
              letter-spacing: 1px;
            }
          }

          &.opEnter {
            p {
              color: #0F69D6;
            }

            div:last-of-type {
              span {
                color: #0F69D6;
              }
            }

          }

          &.anesStart {
            p {
              color: #424CFE;
            }

            div:last-of-type {
              span {
                color: #424CFE;
              }
            }

          }

          &.opStart {
            p {
              color: #8B2CAD;
            }

            div:last-of-type {
              span {
                color: #8B2CAD;
              }
            }

          }

          &.opEnd {
            p {
              color: #37900B;
            }

            div:last-of-type {
              span {
                color: #37900B;
              }
            }

          }

          &.anesEnd {
            p {
              color: #5B4CAF;
            }

            div:last-of-type {
              span {
                color: #5B4CAF;
              }
            }

          }

          &.empty {
            p {
              color: #037E7E;
            }

            div:last-of-type {
              span {
                color: #037E7E;
              }
            }

          }
        }
      }
    }
  }
}
