@import '../../index.less';
@import '~antd/es/style/themes/default.less';

@prefix: ~'@{bigscreen-prefix}-background-box';
@left: 25;

.@{prefix} {
  border: 1px dashed rgba(16, 164, 239, 50%);
  overflow: hidden;
  background: url('../../assets/corner.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: calc(80/@bigscreen-base-width * 100vw);

  >div {
    padding: calc(@left/@bigscreen-base-width * 100vw);
    background-color: rgba(255, 255, 255, 5%);
    height: 100%;

    >div {

      img {
        width: calc(44.32/@bigscreen-base-width * 100vw);
        opacity: 0.7;
      }

      &.head {
        text-shadow: 0 0 calc(5/@bigscreen-base-width * 100vw) rgba(16, 164, 239, 70%);
        height: calc(56/@bigscreen-base-height * 100vh);
        line-height: $height;
      }

      &.content {
        margin-top: calc(44/@bigscreen-base-height * 100vh);
        overflow: hidden;
      }
    }
  }
}