@import './mixins.less';
@import './vars.less';

body {
  background: #000000;
  color: @color-active;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: @z-index-content;
  pointer-events: none;
}
.bg {
  width: 100%;
  height: 100%;
  .screen-bg('bg');
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header {
  width: 2045px;
  height: 63px;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  pointer-events: all;
}

.body {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
}

.left {
  z-index: 1;
  pointer-events: all;
  margin: 40px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 602px;
  overflow: hidden;
}

.center {
  // position: absolute;
  top: 0;
  bottom: 0;
  // width: 2357px;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.right {
  width: 602px;
  pointer-events: all;
  margin: 40px;
  overflow: hidden;
  z-index: 5;
  position: relative;
}

.cardList {
  display: flex;
  flex-wrap: wrap;
  width: 854px;
}

//普通屏
.contentNormal {
  .left {
    margin-top: 110px;
    width: 702px;
  }
  .right {
    margin-top: 110px;
    width: 802px;
  }
  .bg {
    background-size: cover;
    .screen-bg('normal_screen_light');
  }
}
