html,body {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50%;
	background-attachment:fixed;
	font-family:LXGW Wenkai Screen;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color: rgba(255,255,255,0);
}
#loading {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#efc9e0;
	z-index:999;
	display:block
}
.loader {
	width:7em;
	height:5em;
	position:relative;
	animation:beat 1s infinite
}
.jiazai {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	user-select:none
}
#loading p {
	padding:16px
}
.loader::before,.loader::after {
	content:"";
	position:absolute;
	top:0;
	width:50px;
	height:80px;
	border-radius:5em 5em 0 0;
	animation:coldblue 1s infinite
}
.loader::before {
	left:50px;
	transform:rotate(-45deg);
	transform-origin:0 100%
}
.loader::after {
	left:0;
	transform:rotate(45deg);
	transform-origin:100% 100%
}
@keyframes beat {
	0% {
	transform:scale(1)
}
50% {
	transform:scale(1.2)
}
100% {
	transform:scale(1)
}
}@keyframes coldblue {
	0%,100% {
	background-color:#c61717
}
50% {
	background-color:#c61717
}
}video {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:-20
}
.modal {
	display:none;
	position:fixed;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:35px;
	z-index:999;
	box-shadow:0 0 10px rgba(0,0,0,.2);
	text-align:center;
	background-color:#96ddb8;
	border-radius:10px
}
#closeModal {
	margin-top:40px
}
#biaoti {
	color:#000;
	height:28px;
	padding-left:10px;
	border-bottom:.5px dashed #99acb5;
	margin:5px 0 0
}
#neirong {
	padding-left:6px;
	border-bottom:.5px dashed #99acb5;
	margin:2px 0 0;
	height:235px;
	text-decoration:underline
}
#shijian {
	margin:3px 5px 0 0;
	text-align:right
}
.son {
	width:260px;
	height:300px;
	position:absolute;
	border-radius:5px;
	font-family:LXGW Wenkai Screen;
	user-select:none
}
.son:hover {
	box-shadow:1px 1px 5px rgba(0,0,0,.57);
	-webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,.57);
	-moz-box-shadow:1px 1px 5px 0 rgba(0,0,0,.57)
}
.zhuti {
	height:98vh;
	width:100%;
	margin:auto;
	position:relative
}
.dingbu {
    position: fixed;
    display: flex;
    top: 0;
    left: 50%;
    z-index:10;
    width: max-content;
    transform: translateX(-50%);
}
.dibu {
	width:100%;
	margin:auto
}
#bbk {
	position:fixed;
	top:45%;
	left:50%;
	transform:translate(-50%,-50%);
	width:auto;
	height:auto;
	z-index:30;
	display:none
}
#bbk textarea.name {
	width:350px;
	height:25px;
	border-radius:4px
}
#bbk textarea.zwk {
	width:350px;
	height:400px;
	border-radius:4px;
	font-size:22px;
}
#bbk textarea {
	display:block;
	padding:5px;
	resize:none;
	border:none;
	outline:none;
	font-size:17px;
	background-color: #fbe0f4;
	font-family:LXGW Wenkai Screen
}
.button-container {
	display:flex;
	justify-content:space-around;
	padding-top:10px
}
.throwbtn {
	width:45%;
	padding:10px;
	text-align:center;
	background-color:#00a0e9;
	color:#fff;
	border:none;
	border-radius:5px;
	cursor:pointer
}
.mask {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.3);
	z-index:99;
	display:none
}
.button {
	margin:5px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 30px;
	border:0;
	position:relative;
	overflow:hidden;
	border-radius:10rem;
	transition:all .02s;
	font-weight:700;
	color:#252525;
	z-index:0;
	box-shadow:0 0 7px -5px rgba(0,0,0,.5);
	font-family:LXGW Wenkai Screen
}
.button:hover {
	background:#c1e4f8;
	color:#210055
}
.button:active {
	transform:scale(.97)
}
.hoverEffect {
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1
}
.hoverEffect div {
	background:#de004b;
	background:linear-gradient(90deg,#de004b 0%,#bf46ff 49%,#00d4ff 100%);
	border-radius:40rem;
	width:10rem;
	height:10rem;
	transition:.4s;
	filter:blur(20px);
	animation:effect infinite 3s linear;
	opacity:.5
}
.button:hover .hoverEffect div {
	width:8rem;
	height:8rem
}
@keyframes effect {
	0% {
	transform:rotate(0)
}
100% {
	transform:rotate(360deg)
}
}.fabiao {
	z-index:99;
	position:fixed;
	bottom:-2%;
	left:50%;
	transform:translate(-50%,-50%)
}
.fabiao button {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:15px;
	box-shadow:rgba(10,37,64,.35)0 -2px 6px inset;
	background-color:#e8e8e8;
	font-size:20px;
	font-weight:900;
	color:#867c7c;
	font-family:monospace;
	transition:transform 400ms cubic-bezier(.68,-.55,.27,2.5),border-color 400ms ease-in-out,background-color 400ms ease-in-out;
	word-spacing:-2px;
	border-color:#ffe2e2;
	border-style:solid;
	border-width:5px;
	border-radius:50px;
	font-family:LXGW Wenkai Screen
}
@keyframes movingBorders {
	0% {
	border-color:#fce4e4
}
50% {
	border-color:#ffd8d8
}
90% {
	border-color:#fce4e4
}
}.fabiao button:hover {
	background-color:#eee;
	transform:scale(105%);
	animation:movingBorders 3s infinite
}
.fabiao button svg {
	margin-right:10px;
	fill:#ff6e6e;
	transition:opacity 100ms ease-in-out
}
.filled {
	position:absolute;
	opacity:0;
	left:16px
}
@keyframes beatingHeart {
	0% {
	transform:scale(1)
}
15% {
	transform:scale(1.15)
}
30% {
	transform:scale(1)
}
45% {
	transform:scale(1.15)
}
60% {
	transform:scale(1)
}
}button:hover .empty {
	opacity:0
}
.fabiao button:hover .filled {
	opacity:1;
	animation:beatingHeart 1.2s infinite
}
#checkbox {
	display:none
}
.Switch {
	width:40px;
	height:60px;
	background-color:#fff;
	border-radius:15px;
	z-index:99;
	cursor:pointer;
	display:flex;
	opacity: 0.5;
	align-items:center;
	justify-content:center;
	box-shadow:2px 0 5px rgba(0,0,0,.274)inset,-2px 0 5px rgba(255,255,255,.411)inset;
	position:fixed;
	bottom:0%;
	right:2%;
	transform:translate(-50%,-50%)
}

.Switch:hover {
	opacity: 1;
}

.Switch::before {
	content:"";
	background-color:#f6a8e0;
	position:absolute;
	height:80%;
	width:5px;
	border-radius:5px
}
.Switch::after {
	background-color:#eb6dd2;
	border:1px solid #1ee3d8;
	content:"";
	position:absolute;
	height:5px;
	width:25px;
	top:15px;
	transition-duration:.3s;
	box-shadow:5px 2px 5px rgba(8,8,8,.288);
	border-radius:5px
}
#checkbox:checked+.Switch::after {
	transform:translateY(25px);
	transition-duration:.3s;
	border:1px solid #a8a8af;
	background-color:#e3cedb
}

.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255 235 235 / 95%);
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    border-radius: 35px;
    color: #5f5e5b;
    z-index: 99;
    user-select: none;
}

#messageContent {
  text-align: center;
}