@charset "utf-8";
/* CSS Document */

body {
	margin:0;
	padding:0;
	font-family:"PingFang Sc Medium","Montserrat","微软雅黑", Arial;
	font-size:14px;
	line-height:1.5;
	color:#000;
	width: 100%;
	margin:0px auto;
	background-color:#fff;
	overflow-x: hidden;
}
a {
	color:#000;
	text-decoration:none;
}
a:hover {
	color:#000;
}
img {
	border:0;
	display:inline;
	vertical-align: bottom;
	width:auto;
	height:auto;
	max-width:100%;
}
div, ul, li, dl, dd, span, h1, h2, p, h4, h3 {
	margin:0;
	padding:0;
	list-style:none;
}
.clear {
	clear:both; width:0px; height:0px;
}

.container {
	width: 95%;
	max-width:1380px;
	margin:0px auto;
	height:auto;
}

* {
	box-sizing: border-box;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-center-y {
	display: flex;
	align-items: center;
}
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-column {
	display: flex;
	flex-direction: column;
  }

/* 首页 */
.app{ width: 100%; min-height: 100vh; position: relative; margin: 0px; padding:20px 0px;}
.app .video{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;object-fit: cover;
 object-position: center center; z-index: 0;}
.app .login_box{ background-image: url(../images/loginbg_03.jpg); background-position: center; background-size: cover; max-width: 526px; border-radius: 12px; margin: 0px auto; width: 95%;box-shadow: 0px 0px 8px rgb(0 0 0 / 28%); padding: 52px 32px 65px; position: relative; z-index: 10;text-align: center;}
.app .login_box .logo{ color: #4843e3; font-size: 28px;font-weight: 600; letter-spacing: 2px;}
.app .login_box .logo img{ width: 57px; height: auto; margin-right: 19px;
}
.app .login_box .l_title{ font-size: 32px; font-weight: 600; line-height: 1; margin: 40px 0px;}
.app .login_box .l_lab{ font-size: 16px;  color: #434343;}
.part_1{ margin-top: 38px;}
.part_1 ul{ align-items: stretch; gap: 24px;}
.part_1 ul li{ flex:1; overflow: hidden; background-color: #f0f0f0; border-radius: 12px; padding: 18px 3px 16px; font-weight: 600;}
.part_1 ul li .icon img{ height: 48px;}
.part_1 ul li .icon{ margin-bottom: 12px;}
.app .login_box .box1{ width: 82.7%; margin: 48px auto;}
.app .login_box .box1 .formbit input{ width: 100%; height: 46px; line-height: normal; border-radius: 12px; text-align: center; padding: 0px 5px; background-color: #eeeeee; border: 2px #898989 solid; font-size: 18px; font-weight: 600; outline: none;}
.app .login_box .box1 .formbit input::-webkit-input-placeholder {
color:#313131;
}
.app .login_box .box1 .beiz{ font-size: 16px; color: #616161; font-weight: 600; margin: 30px 0px;}
.app .login_box .box1 .refer .sumbit{ width: 100%;background:linear-gradient(to bottom,#2871fa 10%,#611fd1); border-radius: 12px; height: 65px; line-height: normal; border: 0px; outline: none; color: #fff; font-size: 24px; font-weight: 600; gap: 10px; cursor: pointer; transition: all .5s;}
.app .login_box .box1 .refer .sumbit.disabled{ background: linear-gradient(to bottom,#b6b7b8 10%,#444344);}
.an_list { font-size: 16px; gap: 28px; margin-top: 23px; flex-wrap: wrap;}
.an_list .items{ gap: 8px;}

.app .tips{ color: #585757; font-weight: 600;}
.app .login_box .box2{ margin:30px auto; line-height: 1.1; display: none;}
.app .login_box .box2 .analyze_1{ font-size: 26px; font-weight: 600;}
.app .login_box .box2 .analyze_2{ font-size: 24px;}
.app .login_box .box2 .analyze_3{ color: #616161;}
.app .login_box .box2 .icon{ margin-bottom: 20px;}
.app .login_box .box2 .analyze_1{ margin-bottom: 20px;}
.app .login_box .box2 .analyze_2{ margin-bottom: 20px;}
.app .login_box .box2 .analyze_3{ margin-bottom: 20px;}
.app .login_box .box2 .refer .sumbit{ width: 100%;background:linear-gradient(93deg,#70d264,#01cd1e); border-radius: 12px; height: 65px; line-height: normal; border: 0px; outline: none; color: #fff; font-size: 24px; font-weight: 600; gap: 10px; cursor: pointer; width: 82.7%; margin: 0px auto; text-decoration: underline;}
.app .login_box .box2 .an_list{gap:12px;}
.app .login_box .box2 .an_list .items{gap: 5px;}

/* 诊断动画样式 */
.app .login_box .box3{ margin:30px auto; line-height: 1.1; display: none; width: 82.7%;}
.app .login_box .box3 .analyzing_icon{ margin-bottom: 30px;}
.app .login_box .box3 .loading_spinner{ width: 80px; height: 80px; margin: 0px auto; border: 5px solid #f0f0f0; border-top-color: #2871fa; border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin{
  0%{ transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
.app .login_box .box3 .analyzing_title{ font-size: 28px; font-weight: 600; margin-bottom: 35px; color: #2871fa; letter-spacing: 1px;}
.app .login_box .box3 .analyzing_steps{ margin-bottom: 30px;}
.app .login_box .box3 .analyzing_steps .step_item{ display: flex; align-items: center; gap: 15px; margin-bottom: 20px; opacity: 0.4; transition: all 0.5s ease;}
.app .login_box .box3 .analyzing_steps .step_item.active{ opacity: 1; transform: translateX(5px);}
.app .login_box .box3 .analyzing_steps .step_item.completed{ opacity: 0.7;}
.app .login_box .box3 .analyzing_steps .step_item.completed .step_dot{ background: linear-gradient(to bottom,#2871fa 10%,#611fd1);}
.app .login_box .box3 .analyzing_steps .step_item.completed .step_text{ color: #2871fa; font-weight: 600;}
.app .login_box .box3 .analyzing_steps .step_dot{ width: 12px; height: 12px; border-radius: 50%; background-color: #d0d0d0; flex-shrink: 0; transition: all 0.5s ease;}
.app .login_box .box3 .analyzing_steps .step_item.active .step_dot{ background: linear-gradient(to bottom,#2871fa 10%,#611fd1); width: 14px; height: 14px; box-shadow: 0 0 10px rgba(40, 113, 250, 0.5); animation: pulse 1.5s ease-in-out infinite;}
@keyframes pulse{
  0%, 100%{ transform: scale(1);}
  50%{ transform: scale(1.2);}
}
.app .login_box .box3 .analyzing_steps .step_text{ font-size: 18px; color: #434343; font-weight: 500; transition: all 0.5s ease;}
.app .login_box .box3 .analyzing_steps .step_item.active .step_text{ color: #2871fa; font-weight: 600; font-size: 19px;}
.app .login_box .box3 .analyzing_progress{ width: 100%; height: 8px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; margin-top: 20px;}
.app .login_box .box3 .analyzing_progress .progress_bar{ height: 100%; background: linear-gradient(90deg, #2871fa, #611fd1); border-radius: 10px; width: 0%; transition: width 0.6s ease; box-shadow: 0 2px 8px rgba(40, 113, 250, 0.3);}

@media screen and (max-width: 1920px) {
.app .login_box .l_title{ margin: 20px 0px;}
.app .login_box{padding: 42px 32px 45px;}
.app .login_box .box2 .icon img{ height: 100px; width: auto;}
		}
@media screen and (max-width: 1640px) {

.app .login_box .box1{ margin: 28px auto;}
.part_1{ margin-top: 28px;}
.app .login_box .box1 .beiz{ margin: 20px 0px;}
		}
@media screen and (max-width: 767px) {
.app .login_box{ padding: 32px 20px 32px;}
		}
@media screen and (max-width: 540px) {
.app .login_box .box1{ width: 100%;}
.app .login_box .box2 .refer .sumbit{ width: 100%;}
.app .login_box .box3{ width: 100%;}
.app .login_box .box3 .loading_spinner{ width: 60px; height: 60px; border-width: 4px;}
.app .login_box .box3 .analyzing_title{ font-size: 24px; margin-bottom: 25px;}
.app .login_box .box3 .analyzing_steps .step_text{ font-size: 16px;}
.app .login_box .box3 .analyzing_steps .step_item.active .step_text{ font-size: 17px;}
.an_list{ gap: 12px;}
.part_1 ul{ gap: 10px;}
		}