@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	background-image: url("../img/zjnu.jpg");
	background-repeat: no-repeat; /* 不重复图片 */  
    background-size: cover; /* 图片覆盖整个元素 */  
    background-position: center; /* 图片居中显示 */  
	color: #a0a5a8;
}
.back{
    position:absolute;
    color: #aaa;  
    font-size: 38px;  
    font-weight: bold;  
    cursor: pointer;
    z-index: 999;
	margin-left: 900px;
}
a{
	text-decoration: none;
}
.shell {
	position: relative;
	width: 1000px;
	min-width: 1000px;
	min-height: 600px;
	height: 600px;
	padding: 25px;
	background-color: #ecf0f3;
	border-radius: 12px;
	overflow: hidden;
}

/* 设置响应式 */
@media (max-width: 1200px) {
	.shell {
		transform: scale(0.7);
	}
}

@media (max-width: 1000px) {
	.shell {
		transform: scale(0.6);
	}
}

@media (max-width: 800px) {
	.shell {
		transform: scale(0.5);
	}
}

@media (max-width: 600px) {
	.shell {
		transform: scale(0.4);
	}
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	width: 600px;
	height: 100%;
	padding: 25px;
	background-color: #ecf0f3;
	transition: 1.25s;
}

.form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.iconfont {
	margin: 0 5px;
	border: rgba(0, 0, 0, 0.5) 2px solid;
	border-radius: 50%;
	font-size: 25px;
	padding: 3px;
	opacity: 0.5;
	transition: 0.1s;
}

.iconfont:hover {
	opacity: 1;
	transition: 0.15s;
	cursor: pointer;
}

.form_input {
	width: 350px;
	height: 40px;
	margin: 4px 0;
	padding-left: 25px;
	font-size: 13px;
	letter-spacing: 0.15px;
	border: none;
	outline: none;
	background-color: #ecf0f3;
	transition: 0.25s ease;
	border-radius: 8px;
	box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}

.form_input:focus {
	box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}

.form_span {
	margin-top: 30px;
	margin-bottom: 12px;
}

.form_link {
	color: #181818;
	font-size: 15px;
	margin-top: 25px;
	border-bottom: 1px solid #a0a5a8;
	line-height: 2;
}

.title {
	font-size: 34px;
	font-weight: 700;
	line-height: 3;
	color: #181818;
	letter-spacing: 10px;
}

.description {
	font-size: 14px;
	letter-spacing: 0.25px;
	text-align: center;
	line-height: 1.6;
}

.button {
	width: 180px;
	height: 50px;
	border-radius: 25px;
	margin-top: 50px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.15px;
	background-color: #4B70E2;
	color: #f9f9f9;
	box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
	border: none;
	outline: none;
}

.a-container {
	z-index: 100;
	left: calc(100% - 600px);
}

.b-container {
	left: calc(100% - 600px);
	z-index: 0;
}

.switch {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 400px;
	padding: 50px;
	z-index: 200;
	transition: 1.25s;
	background-color: #ecf0f3;
	overflow: hidden;
	box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
}

.switch_circle-t {
	top: -30%;
	left: 60%;
	width: 300px;
	height: 300px;
}

.switch_container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: absolute;
	width: 400px;
	padding: 50px 55px;
	transition: 1.25s;
}

.switch_button {
	cursor: pointer;
}

.switch_button:hover,
.submit:hover {
	box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
	transform: scale(0.985);
	transition: 0.25s;
}

.switch_button:active,
.switch_button:focus {
	box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
	transform: scale(0.97);
	transition: 0.25s;
}

.is-txr {
	left: calc(100% - 400px);
	transition: 1.25s;
	transform-origin: left;
}

.is-txl {
	left: 0;
	transition: 1.25s;
	transform-origin: right;
}

.is-z {
	z-index: 200;
	transition: 1.25s;
}

.is-hidden {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: 1.25s;
}

.is-gx {
	animation: is-gx 1.25s;
}

@keyframes is-gx {

	0%,
	10%,
	100% {
		width: 400px;
	}

	30%,
	50% {
		width: 500px;
	}
}
.modal {  
  display: none; /* 隐藏弹窗 */  
  position: fixed; /* 固定在视口 */  
  z-index: 999; /* 弹窗在其他内容之上 */  
  left: 0;  
  top: 0;  
  width: 100%; /* 全屏宽度 */  
  height: 100%; /* 全屏高度 */  
  overflow: auto; /* 允许滚动 */  
  background-color: rgba(0,0,0,0.4); /* 黑色背景，半透明 */  
}  
  
/* 弹窗内容 */  
.modal-content {  
  background-color: #fefefe;  
  margin: 20% auto; /* 15% 从顶部开始，水平居中 */  
  padding: 100px;  
  border: 1px solid #888;  
  width: 40%; /* 弹窗宽度 */ 
  font-size: 36px;
}  
  
/* 关闭按钮 */  
.close {  
  color: #aaa;  
  float: right;  
  font-size: 38px;  
  font-weight: bold;  
  cursor: pointer;  
}  
  
.close:hover,  
.close:focus {  
  color: black;  
  text-decoration: none;  
  cursor: pointer;  
}