:root {
	/* --borderColor: rosybrown; */
	--borderColor: #899ab7;
	/* --borderColor: #3147c4; */
	/* --borderColor: #c3289f */
	/* --transBg: hsla(0,0%,100%,.5); */
	--transBg: hsla(0,0%,100%,.4);
	--shadowBox: 4px 4px 8px 0px rgba(1,1,2,.13);
	--shadowTxt: 2px 2px 5px #888;
}

* {
	padding: 0;
	margin: 0;
}

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.pageWrapper {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.flex {
	display: flex;
}

.flexV {
	flex-direction: column;
}

.flexSplit {
	flex: 1;
}

.colorFemal {
	color: #d4237a;
}

.textCenter {
	text-align: center;
}

.textRight {
	text-align: right;
}

.bannerPanel {
	width: 100vw;
	justify-content: center;
	align-items: center;
}

.banner {
	flex: 1;
	height: 72px;
	padding: 0;
    margin: 4px 16px;
    color: #fff;
    background: hsl(233.31deg 48.6% 43.98% / 40%);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadowBox);
	border: 1px #492ec9 solid;
    border-radius: 10px;
    /* text-shadow: 6px 3px 5px #221f1f; */
}

.bannerLeft {
	justify-content: center;
}

.bannerRight {
	width: 128px;
	font-size: 24px;
	font-weight: 700;
	justify-content: center;
	align-items: center;
	text-shadow: var(--shadowTxt);
}

.dateCell {
    justify-content: center;
    align-items: flex-start;
    padding-left: 30px;
    font-weight: 300;
    /* color: orangered; */
    /* color: #ff3c00; */
    text-shadow: 3px 4px 4px black;
}

.wrapper {
	overflow-y: auto;
}

.bgHome {
	background: transparent url(/static/img/bg/bgHome.jpg?v=23.50.01) top left no-repeat;
	background-size: cover;
}

.bgFamily {
	background: transparent url(/static/img/bg/bgList.jpg?v=23.50.01) top left no-repeat;
	background-size: cover;
}

.homeZoneL1 {
	padding: 0 8px;
	margin: 16px;
	border-top: 3px var(--borderColor) solid;
	/* border-right: 1px var(--borderColor) solid;
	border-bottom: 1px var(--borderColor) solid;
	border-left: 1px var(--borderColor) solid; */
	border-radius: 8px;
	background: var(--transBg);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadowBox);
}

.topParend {
	padding: 16px 8px;
	border-bottom: 1px #312d2d solid;
}

.homeZoneL2 {
	width: 80%;
	margin: 8px 0 32px 20%;
	padding: 8px 0 16px 0;
}

.homeZoneL2:nth-child(odd) {
    border-top: 1px var(--borderColor) dashed;
}

.homeZoneL2:nth-child(odd):not(:last-child) {
    border-bottom: 1px var(--borderColor) dashed;
}

.homeZoneL3 {
	/* width: 60%; */
	/* padding: 8px; */
	margin-top: 8px;
	justify-content: center;
	align-items: center;
  background-color: rgb(163 172 231 / 27%);
}

.sumRow {
	justify-content: center;
    align-items: center;
    width: 80%;
    height: 32px;
    margin-left: 10%;
    color: #d8d9e1;
    margin-bottom: 64px;
	font-size: 14px;
    border: 1px #b1b056 solid;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    color: #e3d632;
    background-color: #87dec442;
    backdrop-filter: blur(3px);
    text-shadow: 1px 1px 8px #293cd5;
}

.menuBar {
	position: absolute;
	width: 100vw;
	height: 40px;
	bottom: 0;
	padding: 0;
	margin: 8px 0;
	font-size: 18px;
	font-weight: 700;
	z-index: 1000;
}

.menuItem {
    height: 32px;
    justify-content: center;
    align-items: center;
    margin: 0 16px;
    font-size: 16px;
    font-weight: 400;
    border: 1px #b1b056 solid;
    border-radius: 50px;
    /* color: #dda845; */
    /* color: #ddd; */
    background-color: #87dec442;
    backdrop-filter: blur(3px);
    text-shadow: 1px 1px 8px #000000b0;
}

.menuItem.active {
	color: #efa700;
}

.menuItem.unActive {
	color: #bbb;
}

.menuItem:nth-child(2) {
	margin: 0 4px;
}

.memberCell {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.memberCell > img {
	width: 20px;
	height: 20px;
}

.memberCell > span {
	flex: 1;
	padding-left: 4px;
}

.yearGroup:last-child {
	margin-bottom: 64px;
}

.yearTitleRow {
	padding: 8px;
    margin: 32px 16px 0 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    background: hsl(233.31deg 48.6% 43.98% / 40%);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadowBox);
    border-radius: 10px;
    text-shadow: 6px 3px 5px #221f1f;
}

.groupMonth {
	padding: 0 8px;
	margin: 0 16px 16px 16px;
	border: 1x var(--borderColor) solid;
	border-radius: 10px;
	background: var(--transBg);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadowBox);
}

.monthRow {
	padding: 8px 0;
	margin: 0 8px;
	border-bottom: 1px #333 solid;
}

.monthTag {
	font-size: 14px;
	font-weight: 700;
}

.dateBlock {
	margin: 0 8px;
	align-items: center;
	border-bottom: 1px #aaa solid;
}

.dateTag {
	width: 100px;
	padding: 0 8px;
	color: #000;
}

.memberRow {
	padding: 4px 8px;
}

.memberRow:not(:last-child) {
	border-bottom: 1px #aaa dashed;
}

.hoemTitleRow {
    padding: 16px;
    margin: 8px 16px 0 16px;
    background: hsl(63.78deg 86.32% 48.95% / 30%);
    backdrop-filter: blur(3px);
    box-shadow: var(--shadowBox);
    border-radius: 10px;
}

.shiCi {
	font-family: 'HGYBJSJT';
	font-size: 18px;
	font-weight: 100;
	writing-mode: vertical-rl;
	color: #44464c;
	-webkit-background-clip: text;
}

.titleSymbo {
	transform: rotate(90deg);
    writing-mode: vertical-lr;
}

.poetryAuthor {
	margin: 0 0 0 4px;
	font-weight: 400;
}

.shiCi > span {
	margin: 0 0 0 16px;
}

.shiCiWrapper > span {
	margin: 0 0 0 8px;
	mix-blend-mode: multiply;
}

.homeSolar {
	font-size: 38px;
    font-weight: 700;
    color: #fff;
    text-shadow: 4px 5px 18px #a255e3;
}

.homeFooter {
	position: relative;;
	width: 100vw;
	height: 240px;
	background: transparent url(/static/img/bg/bgHome.png?v=23.50.022) bottom left no-repeat;
	background-size: 100vw auto;
}

.homeMonthTitle {
	align-items: center;
	padding: 2px 0;
	margin: 16px 16px 0 16px;
	color: #000;
	font-weight: 700;
	border-bottom: 1px #aaa dashed;
	text-shadow: 1px 1px 8px #fff;
}

.homeMonthTitle > img {
	padding: 2px 0;
	margin-right: 8px;
	text-shadow: 1px 1px 8px #fff;
}

.homeMonth {
  display: flex;
  flex-direction: column;
  padding: 0;
	margin: 0 16px 10vh 16px;
	color: #000;
  font-size: 14px;
}

.homeMonth > .dayRow {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  border-bottom: 1px #aaa dashed;
}

.homeMonth > .dayRow > .dayTitle {
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  margin: 8px 0;
}

.homeMonth > .dayRow > .memberInfo {
  display: flex;
  align-items: center;
  padding-left: 32px;
}

.homeMonth > .dayRow > .memberInfo > .memberName {
  flex: 1;
}

.sloganApp {
    position: absolute;
    right: 32px;
    bottom: 72px;
    color: #f7ecec;
    font-size: 18px;
    font-family: 'HGYBJSJT';
    font-weight: 700;
    text-shadow: 2px 4px 15px #19d218b3;
}