 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Arial, sans-serif;
     /* background-color: #f4f4f4; */
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
 }

 .login-container {   
     background-color: #fff;
     display: flex;
     width: 100%;
     max-width: 1920px;
     max-height: 1024px;
     /* min-height: 100vh; */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .left-section {
     width: 55%;
     background-color: #fff;
 }

 .head {
     display: block;
     font-family: Microsoft JhengHei;
     font-size: 26px;
     font-weight: 700;
     line-height: 34.59px;
     letter-spacing: 0.05em;
     text-align: left;
     top: 60px;
     text-align: center;
     color: #242424;

 }

 .right-section {
    background-color: #fff;
     width: 45%;
     /*  background-image: url('../img/login_right.png'); */
     /* 確保圖片路徑正確 */
     background-size: cover;
     /* 使背景圖片覆蓋整個區域 */
     /*   background-position: center; */
     /* 背景圖片置中顯示 */
     background-repeat: no-repeat;
     /* 防止背景圖片重複 */
     color: #fff;
     min-height: 100vh;
 }

 .welcome {
     margin: 35% 10% 0;
     font-family: Arial;
     font-size: 30px;
     font-weight: 700;
     line-height: 34.5px;
     letter-spacing: 0.04em;
     text-align: left;

 }

 .welcome p {
     margin-top: 10px;
     font-family: Arial;
     font-size: 20px;
     font-weight: 400;
     line-height: 23px;
     letter-spacing: 0.1em;
     text-align: left;
     color: #52A1F9;

 }

 .contact-input {
     width: 380px;
     margin: 60px auto 30px;
     min-height: 630px;
 }

 .tabs {
     display: flex;
     margin-bottom: 20px;
 }

 .tabs a {
     flex: 1;
     text-align: center;
     padding: 10px;
     text-decoration: none;
     color: #014091;
     border-bottom: 2px solid transparent;
     font-family: Microsoft JhengHei;
     font-size: 22px;
     font-weight: 700;
     line-height: 29.26px;
     letter-spacing: 0.15em;
     /* text-align: left; */

 }

 .tabs a:hover {
     color: #0E8888;
 }

 .tabs a.active {
     color: #0E8888;
     border-bottom: 2px solid #0E8888;
     font-weight: bold;
 }

 .tab-content {
     display: none;
 }

 .tab-content.active {
     display: block;
 }

 .login-form {
     margin-top: 10%;
 }

 .login-form label {
     display: block;
     margin-bottom: 5px;
     font-family: Inter;
     font-size: 18px;
     font-weight: 400;
     line-height: 21.78px;
     letter-spacing: 0.095em;
     text-align: left;
     color: #171717;

 }

 .login-form input {
     width: 360px;
     padding: 10px;
     margin-bottom: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }

 .captcha-image {
     margin-bottom: 20px;
 }

 .buttons {
     margin-top: 50px;
     display: flex;
     justify-content: space-between;
 }

 .buttons .cancel {
     background-color: #74787C;
     color: #fff;
     border: none;
     cursor: pointer;
     width: 140px;
     height: 45px;
     border-radius: 5%;
     border-radius: 5%;
     font-family: Microsoft JhengHei;
     font-size: 18px;
     font-weight: 700;
     line-height: 23.94px;
     letter-spacing: 0.5em;
     transition: background-color 0.3s ease;
     /* 增加平滑的過渡效果 */
 }

 /* 當滑鼠懸停時改變背景顏色 */
 .buttons .cancel:hover {
     background-color: #606367
 }

 .buttons .login {
     background-color: #0188C2;
     color: #fff;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
     width: 140px;
     height: 45px;
     border-radius: 5%;
     font-family: Microsoft JhengHei;
     font-size: 18px;
     font-weight: 700;
     line-height: 23.94px;
     letter-spacing: 0.5em;
 }
 
 .buttons .disabled {
    background-color: #c7d9f1;
    pointer-events: none;

 }
 /* 當滑鼠懸停時改變背景顏色 */
 .buttons .login:hover {
     background-color: #02A8F0;
 }

 .forgot-password {
     /* display: block; */
     margin-top: 50px;
     text-decoration: none;
     color: #1F4E76;
     text-align: right;
     font-family: Inter;
     font-size: 18px;
     font-weight: 400;
     line-height: 21.78px;
     letter-spacing: 0.05em;
 }

 /* 
.right-section {
    background: url('background-image-placeholder.png') no-repeat center center;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
} */

 .right-section h2 {
     font-size: 28px;
 }

 .contact-info {
     margin: 15% 10% 10%;
     font-family: Microsoft JhengHei;
     font-size: 16px;
     font-weight: 400;
     line-height: 21.28px;
     text-align: left;
     color: #E1EFFFE5;
 }

 .contact-info p {
     margin-bottom: 10px;
 }

 .contact-info1 {
     margin: 10% 10%;
     font-family: Microsoft JhengHei;
     font-size: 14px;
     font-weight: 400;
     line-height: 18.62px;
     text-align: left;
     color: #E1EFFF;
    
 }

 .contact-info1 .logo {
     width: 194px;
     height: 44px;
     border-radius: 3px;
     background: #73DEFF8C;
 }

 .contact-info1 .logo1 {
     width: 175px;
     height: 44px;
     border-radius: 3px;
     background: #73DEFF8C;
 }

 .footer {
     background-color: #414040;
     color: #ffffff;
     padding: 18px 0;
     text-align: center;
    /*  position: absolute; */
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
    z-index: 100; /* 確保頁腳不被其他元素遮擋 */
 }

 .footer-content p {
     margin: 0 auto;
     font-size: 12px;
 }

 code {
     color: red;
 }

 .verifyimage {
    border: 1px solid #aaa;
 }