*{margin: 0;padding: 0;}
.layerEle {position: fixed;left: -340px;top: 105px;width: 100%;height: 100%;z-index: 10000;}
.maskEle {width: 100%;height: 100%;left: 0;top: 0px;position: fixed;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(3px);z-index: 20;}
.closebtn {width: 30px;height: 30px;position: absolute;top: 0;right: 5px;transition: transform .2s;z-index: 9999;}
.closebtn::before,.closebtn::after {content: '';position: absolute;height: 2px;width: 18px;top: 15px;left: 7px;margin-top: -1px;background:#c3c3c3;}
.closebtn::before {transform: rotate(45deg);}
.closebtn::after {transform: rotate(-45deg);}
a:hover.closebtn {transform: rotate(90deg);}

.Outer {width: 400px;height: auto;overflow: hidden;margin: 0 auto;border-radius: 8px;padding: 10px;background: #ffffff2e;box-shadow: 0px 0px 10px #666;position: relative;z-index: 9999;font-size: 14px;}
.inner {width: 340px;height: auto;border-radius: 8px;background: #ffffffbf;overflow: hidden;position: relative;padding: 50px 30px 20px 30px;position: relative;}
.inner h4{width: 100%; height: 30px;position: absolute; left: 0;top: 0;background: #2a2a2acc;color: #fff;text-indent: 30px; line-height: 30px;font-weight: 400;}
.inner p {line-height: 26px;font-size: 14px;}
.inner .mark{color:#b30000;margin: 0 0 30px 0;font-weight: bold;}
.loginBtn {background: linear-gradient(to right bottom, #7d7d7d, #bebebe);width: 200px;height: 34px;font-size: 14px;color: #fff;border-radius: 5px;border: none;margin: 20px auto 0 auto;display: block;cursor: pointer;box-shadow: 0 0 5px #a2a2a2;font-weight: bold;text-align: center;line-height: 34px;text-decoration: none;}
a:hover.loginBtn {background:linear-gradient(to right bottom, #4a4a4a, #7c7c7c);}
.fadeinZone {display: block;animation: fadein 0.5s;animation-fill-mode: forwards;}
.fadeoutZone {animation: fadeout 0.5s;animation-fill-mode: forwards;}
@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeout {
	from {opacity: 1;}
	to {opacity: 0;}
}