body {
               font-family: Arial, sans-serif;
               background-color: #f2f2f2;
               margin: 0;
               padding: 0;
               display: flex;
               justify-content: center;
               align-items: center;
               min-height: 100vh;
           }
           
           .container {
             max-width: 600px;
               width: 90%;
               padding: 20px;
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
               border-radius: 8px;
               background-color: #ffffff;
               text-align: center;
			   margin:0px auto;
           }
           
           .logo {
               margin-bottom: 40px;
           }
           
           .logo img {
               max-height: 60px;
           }
           
           .tab {
               display: flex;
               justify-content: space-between;
               margin-bottom: 20px;
           }
           
           .tab button {
               flex: 1;
               padding: 10px;
               border: none;
               background-color: transparent;
               cursor: pointer;
               font-size: 18px;
               transition: all 0.3s ease;
           }
           
           .tab button.active {
             
               color: #333;
               font-weight: bold;
			   position: relative;
           }
           
           .form-group {
               margin-bottom: 20px;
               position: relative;
               display: flex;
               align-items: center;
           }
           
           .form-group label {
               position: absolute;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               color: #777;
               pointer-events: none;
               transition: all 0.3s ease;
               font-size: 12px;
           }
           
           .form-group input {
               width: 100%;
               padding: 10px;
               border: 1px solid #cccccc;
               border-radius: 5px;
               box-sizing: border-box;
               transition: border-color 0.3s ease, box-shadow 0.3s ease;
           }
           
           .form-group input:focus {
               outline: none;
               border-color: #333;
               box-shadow: 0 0 5px rgba(51, 51, 51, 0.5);
           }
           
           .form-group input:focus + label {
               top: -10px;
               left: 20px;
               font-size: 12px;
               color: #333;
               opacity: 0;
           }
           
           .form-group .button {
               width: 100%;
               padding: 10px;
               border: none;
               border-radius: 5px;
               background-color: #333333;
               color: #ffffff;
               font-size: 16px;
               cursor: pointer;
               transition: background-color 0.3s ease;
           }
           
           .form-group .button:hover {
               background-color: #555;
           }
       
           #codeBtn {
               width: 35%;
               display: inline-block;
               margin-left: auto;
               float: right;
               margin-left: auto;
           }
       
           #codeInput {
               width: 62%;
               display: inline-block;
           }
       
           .fa {
               margin-right: 5px;
           }
		   .tab button.active::after {
		       content: ''; /* 必须提供非空的content属性 */
		       display: block; /* 使伪元素显示为块级元素 */
		       width: 30%; /* 红线的宽度 */
		       height: 3px; /* 红线的高度 */
		       background: #333; /* 红线的背景颜色 */
		       position: absolute; /* 绝对定位 */
		       bottom: -0px; /* 红线距离父元素底部的距离 */
		       left: 50%; /* 红线距离父元素左侧的水平位置，这里设置为50%即居中 */
		       transform: translateX(-50%); /* 使用变换向左移动红线，使其完全居中 */
		   }
		   .custom-dialog{width:40%;margin:0px auto;}
		   .custom-dialog  .el-dialog{width:100%;}
		   #register{text-align: left;}
		   
		   .el-dialog__body{padding:10px;text-align: left;line-height: 30px;}
		   #sex{
			   width: 100%;
			     /*! padding-left: 30%; */
			     /*! padding: 10px 10%; */
			     height: 38px;
			     line-height: 38px;
			   
			   padding: 10px 10px 10px 10px;
		   }
		   .containerlogin{
          
            padding: 20px;
          
            margin: 0 auto;
        }
       .containerlogin h1 {
            color: #4CAF50;
            font-size: 24px;
        }
       .containerlogin p {
            color: #555;
            font-size: 16px;
        }
       .containerlogin .button {
            display: inline-block;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            margin-top: 20px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s;
        }
      .containerlogin  .button:hover {
            background-color: #45a049;
        }
		@media (max-width: 768px) {
		
			body{display: block;}
			.container{width:100%;box-sizing: border-box;}
			 .custom-dialog {
			        width: 100%;
			    }
			
			    .custom-dialog .el-dialog {
			        width: 80%;
			    }
			  .form-group.formcode #code{width:60%;}
		}
		
		@media (min-width: 768px) and (max-width: 1024px) {
		
			body{display: block;}
			.container{width:100%;}
			/* iPad端样式 */
			    .custom-dialog {
			        width: 80%;
			    }
			
			    .custom-dialog .el-dialog {
			        width: 80%;
			    }
			    .form-group.formcode #code{width:60%;}
		}