page {
  background: #fff;
}

.title {
  margin: 20rpx;
}

.banner {
  width: 100%;
  height: 250rpx;
  border-radius: 15rpx;
}

.banner-bg {
  width: calc(100% - 39rpx);
  height: 250rpx !important;
  z-index: 1;
  position: absolute;
}

/* 网格 */

.info {
  position: absolute;
  width: calc(100% - 39rpx);
  height: 36rpx;
  z-index: 2;
  margin-top: 75rpx;
}

.info .name {
  height: 36rpx;
  line-height: 36rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin-left: 30rpx;
  float: left;
}

.info .icon {
  height: 34rpx;
  width: 34rpx;
  float: right;
  margin-top: 1rpx;
}

.info .icon image {
  width: 34rpx;
  height: 34rpx;
}

.info .icon-right-1 {
  margin-right: 20rpx;
}

.info .icon-right-2 {
  margin-right: 49rpx;
}

/* 查看提示 */

.explain {
  position: absolute;
  width: calc(100% - 39rpx);
  height: 24rpx;
  z-index: 2;
  margin-top: 136rpx;
}

.explain .icon {
  width: 20rpx;
  height: 24rpx;
  float: left;
  margin-left: 30rpx;
}

.explain .explain-name {
  float: left;
  line-height: 24rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  opacity: 0.5;
  margin-left: 10rpx;
}

/* 切换 */

.switch {
  position: absolute;
  width: calc(100% - 39rpx);
  height: 52rpx;
  z-index: 2;
  margin-top: 167rpx;
}

.switch .img-bg {
  width: 130rpx;
  height: 52rpx;
  float: right;
}

.switch .img-bg image {
  z-index: 3;
  position: absolute;
  width: 130rpx;
  height: 52rpx;
}

.switch .qh {
  position: absolute;
  width: 130rpx;
  height: 52rpx;
  line-height: 52rpx;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.switch .qh image {
  width: 30rpx;
  height: 30rpx;
  margin-left: -30rpx;
}

.switch .qh text {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-left: 30rpx;
}

/* 文字样式 */

.detailed {
  width: 100%;
  border-top: 10rpx solid #f6f8f8;
  padding: 30rpx 0;
}

.detailed .detailed-name {
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 20rpx;
}

/** 九宫格*/

.sudoku {
  height: auto;
  background-color: red;
  box-sizing: border-box;
  margin-top: 38rpx;
}

.sudoku .content {
  width: 100%;
  height: 100%;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  grid-row-gap: 10%;
  box-sizing: border-box;
  padding: 0 20rpx;
}

.sudoku .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sudoku .item image {
  width: 64rpx;
  height: 64rpx;
  object-fit: contain;
}

.sudoku .item .name {
  font-size: 24rpx;
  color: #666;
  line-height: 60rpx;
}

.grid-hover {
  background: #f7f7f7;
}

/* 新增书记在线 */

.clerkOnline {
  display: flex;
  position: relative;
  margin-left: 10rpx;
}

.but {
  position: absolute;
  height: 140rpx;
  width: 25%;
}

.button {
  width: 100%;
  position: absolute;
  left: 0;
  background: rgba(255, 255, 255, 0);
  z-index: 10;
  height: 140rpx;
}

.button-left {
  margin-left: 0%;
}
.button-weekly{
  margin-left: 0%;
}
.button-monthly{
  margin-left: 0%;
}
.button::after {
  border: none;
}

/* 标签 */

.number {
  padding: 0 10rpx;
  background: #ff5553;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
  min-width: 30rpx;
  text-align: center;
  font-size: 22rpx;
  font-weight: 500;
  position: absolute;
  color: rgba(255, 255, 255, 1);
}

.number-left-2 {
  margin-left: 62rpx;
  margin-top: 5rpx;
}

.number-left-3 {
  margin-left: 72rpx;
  margin-top: 5rpx;
}

.number-left-4 {
  margin-left: 82rpx;
  margin-top: 5rpx;
}

.number-left-5 {
  margin-left: 92rpx;
  margin-top: 5rpx;
}

.number-left-6 {
  margin-left: 102rpx;
  margin-top: 5rpx;
}