/* 弹框容器样式 */
 .dialog-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     /* display: none; */
     z-index: 2000;
 }

 /* 弹框主体样式 */
 .el-message-box {
     position: relative !important;
     display: block !important;
     width: 862px !important;
     height: 486px !important;
     margin: 15vh auto;

     overflow: hidden !important;
     /* background: #fff; */
     background-image: url('/article/img/loginDialog/login-bg-semztyyk-2024.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center top;
     border-radius: 15px !important;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
     border: none !important;
 }

 /* 头部样式 */
 .el-message-box__header {
     padding: 0 !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* 关闭按钮样式 */
 .el-message-box__headerbtn {
     position: absolute;
     top: 10px;
     right: 10px;
     border: none;
     background: none;
     font-size: 16px;
     cursor: pointer;
     color: #909399;
     transition: color .2s;
 }

 /* .el-message-box__headerbtn:hover {
     color: #909399;
 } */

 /* 内容区域 */
 .el-message-box__content {
     display: flex;
     justify-content: flex-end;
     padding: 0;
     border-radius: 15px;
     overflow: hidden;
 }

 /* 按钮区域 */
 .el-message-box__btns {
     padding: 0;
     text-align: right;
 }

 .login-box {
     margin-left: 571px;
     width: 291px;
     height: 100%;
     padding: 41px 20px 0 25px;
     box-sizing: border-box;
     text-align: center;
 }

 .login-box .login-logo {
     width: 166px;
     height: 45px;
     margin-bottom: 33.9px;
 }

 .login-title {
     font-size: 18px;
     color: #333;
     font-weight: 600;
     text-align: left;
     margin-bottom: 15px;
 }

 .login-tip {
     width: 231px;
     height: 24px;
     margin-bottom: 15px;
     border-radius: 100px;
     background: linear-gradient(90deg, #ffe3c8, #e1ae7f);
     overflow: hidden;
     margin-bottom: 15px;
 }

 .login-tip .login-tip-list {
     animation: rollUp 100s ease-in-out infinite;
 }

 .login-tip .login-tip-list li {
     width: 100%;
     height: 100%;
     color: #773030;
     font-size: 12px;
     font-style: normal;
     font-weight: 380;
     line-height: 24px;
 }

 .login-btn {
     width: 230px;
     height: 40px;
     line-height: 40px;
     cursor: pointer;
     background-color: #03cb8e;
     border-radius: 4px;
     font-size: 15px;
     color: #fff;
     text-align: center;
 }

 .login-btn:hover {
     background-color: rgb(44, 230, 174);
 }

 @keyframes rollUp {
     0%, 2% {
         transform: translateY(0);
     }

     3%, 5% {
         transform: translateY(-24px);
     }

     6%, 8% {
         transform: translateY(-48px);
     }

     9%, 11% {
         transform: translateY(-72px);
     }

     12%, 14% {
         transform: translateY(-96px);
     }

     15%, 17% {
         transform: translateY(-120px);
     }

     18%, 20% {
         transform: translateY(-144px);
     }

     21%, 23% {
         transform: translateY(-168px);
     }

     24%, 26% {
         transform: translateY(-192px);
     }

     27%, 29% {
         transform: translateY(-216px);
     }

     30%, 32% {
         transform: translateY(-240px);
     }

     33%, 35% {
         transform: translateY(-264px);
     }

     36%, 38% {
         transform: translateY(-288px);
     }

     39%, 41% {
         transform: translateY(-312px);
     }

     42%, 44% {
         transform: translateY(-336px);
     }

     45%, 47% {
         transform: translateY(-360px);
     }

     48%, 50% {
         transform: translateY(-384px);
     }

     51%, 53% {
         transform: translateY(-408px);
     }

     54%, 56% {
         transform: translateY(-432px);
     }

     57%, 59% {
         transform: translateY(-456px);
     }

     60%, 62% {
         transform: translateY(-480px);
     }

     63%, 65% {
         transform: translateY(-504px);
     }

     66%, 68% {
         transform: translateY(-528px);
     }

     69%, 71% {
         transform: translateY(-552px);
     }

     72%, 74% {
         transform: translateY(-576px);
     }

     75%, 77% {
         transform: translateY(-600px);
     }

     78%, 80% {
         transform: translateY(-624px);
     }

     81%, 83% {
         transform: translateY(-648px);
     }

     84%, 86% {
         transform: translateY(-672px);
     }

     87%, 89% {
         transform: translateY(-696px);
     }

     90%, 92% {
         transform: translateY(-720px);
     }

     93%, 95% {
         transform: translateY(-744px);
     }

     96%, 98% {
         transform: translateY(-768px);
     }

     99%, 100% {
         transform: translateY(-792px);
     }
 }

 .phone-wrapper-error {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0.16);
     width: 100%;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.25);
     animation-name: appear-7ba7b340;
     animation-duration: 300ms;
 }

 .phone-error-box {
     background: white;
     position: relative;
     max-height: calc(100vh - 40px);
     text-align: left;
     display: flex;
     align-items: center;
     flex-direction: column;
     overflow: hidden;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: slide-in-7ba7b340;
     animation-duration: 0.5s;
     padding: 20px;
     width: 451px;
     border-radius: 4px;
     box-sizing: border-box;
     margin: 30vh auto;
 }

 .phone-error-close {
     color: gray;
     position: absolute;
     top: 0;
     right: 0;
     font-size: 32px;
     width: 40px;
     line-height: 40px;
     text-align: center;
     cursor: pointer;

 }

 .phone-error-box__header {
     color: #333;
     font-size: 18px;
     max-width: 64%;
     line-height: 1.7;
     text-align: center;
     font-weight: bold;
 }

 .phone-error-tab {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 80px;
     line-height: 40px;
 }

 .automatically-tab {
     font-size: 16px;
     box-sizing: border-box;
     height: 40px;
     color: rgba(51, 51, 51, 0.6);
     cursor: pointer;
 }

 .tab-active {
     color: #333;
     border-bottom: 4px solid #666;
 }

 .manual-tab {
     font-size: 16px;
     box-sizing: border-box;
     height: 40px;
     color: rgba(51, 51, 51, 0.6);
     cursor: pointer;
     margin-left: 60px;
 }

 .automatically {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .automatically img {
     width: 166px;
     height: 166px;
 }

 .automatically-tip {
     font-size: 14px;
     margin-top: 10px;
     color: #999999;
     line-height: 22px;
 }

 .manual-mail {
     width: 90px;
     height: auto;
     margin: 20px 0;
 }

 .manual {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .manual ul li {
     color: #606266;
     font-size: 14px;
     line-height: 1.6;
 }

 .phone-error-box__footer {
     padding: 20px 0;
 }

 .phone-error-box__footer-btn {
     width: 120px;
     height: 36px;
     background: linear-gradient(151deg, #ffd22e 0%, #f8c04f 100%);
     border-radius: 4px;
     color: #7a491e;
     outline: 0;
     border: none;
     cursor: pointer;
     text-align: center;
     line-height: 36px;

 }