@media (max-width: 768px) {
  .login_right {
    margin-top: 30px;
  }
}


.signup-form .form-label span {
  margin-right: 5px;
  color: red; /* 確保＊顯示紅色 */
}


  
  .form-group02{
        margin: 20px 10px!important;}
  @media (max-width: 991.98px) {
  .signup-container01 {
    margin: 0px 10px;}
  section.signup-container02 {
    margin: 0px 10px;
}
.signup-form {
    padding: 10px;
}
.login_left {
    padding: 10px!important;
  }
.member-login
 {
    margin: 10px!important;
  }
  .login_right{
    padding: 10px!important;
  }
  
}


    .form-group {
        margin: 0px;}
  
/* 預設：桌面版顯示左右並排 */
@media (min-width: 1200px) {
  form.signup-form {
    padding: 20px;
}
  .login_right {
    height: 500px !important; /* 僅在電腦版設定高度 */
  }
  .member-login {
    margin: 0px 200px;
  }
  .signup-container {
    margin: 0px 200px;
}
}


@media (max-width: 768px) {
  .section-header {
    padding-left: 0px!important; /* 僅在手機板上去除左邊的內邊距 */
  }
}

.member-login {
  display: flex;
  justify-content: space-between;
  
}

.login_left, .login_right {
  width: 48%;  /* 設定每個區塊寬度為 48%，留出間距 */
}

/* 手機版：改為上下排列 */
@media (max-width: 768px) {
  .member-login {
    flex-direction: column;  /* 手機版時，左右區塊改為上下排列 */
    align-items: center;  /* 確保內容在垂直排列時居中 */
    margin: 0px;
  }
  .login_left, .login_right {
    width: 100%;  /* 在手機版中，讓區塊寬度佔據 100% */
    padding: 10px 0;  /* 可選，根據需要調整內邊距 */
  }

  .loin-f {
    display: flex;
    flex-direction: column;  /* 手機版時讓社群按鈕垂直排列 */
    align-items: center;  /* 社群按鈕居中 */
  }

  .loin-f a {
    margin-bottom: 10px;  /* 調整按鈕之間的間距 */
  }
}


.loin-f {
  display: flex;
  justify-content: center; /* 讓按鈕居中對齊 */
}

.loin-f a {
  display: block; /* 讓<a>佔據整個圖片的寬度和高度 */
  width: 200px;  /* 設定固定寬度 */
  height: auto;  /* 保持圖片比例 */
}

.loin-f img {
  height: auto; /* 保持圖片的高度比例 */
  display: block; /* 移除圖片的默認行內樣式 */
  border-radius: 5px; /* 如果需要圓角效果 */
  transition: transform 0.3s ease-in-out; /* 加入動畫效果 */
}




button.btn.btn-outline-secondary{
  display: inline-block;
  
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease; /* 平滑過渡效果 */
  border:1px solid #333;  
}

button.btn.btn-outline-secondary:hover {
  background-color: #333;
  color: #fff;
}

.btn.btn-primary{
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease; /* 平滑過渡效果 */
  border:none;
}


.btn.btn-primary:hover {
  background-color: #333; /* 修改底色（此處為深灰色，可以根據需求調整顏色） */
}


.member-login {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}


.section-header {
    margin-bottom: 0px!important;
}


.login_right{
    float: left;
    border: 1px solid #ccc;
    padding: 30px 80px 30px 80px;
}
.login_left {
    float: left;
    min-height: 475px!important;
    margin: 0px 15px 0px 15px;
    border:1px solid #ccc;
    padding: 30px 30px 30px 30px;
}
label.login-titie {
  min-width: 50px;
  font-weight: bold;
  color: #5D463A;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center; /* ⭐ 水平置中 */
  justify-content: center; /* 垂直置中（可選） */
  text-align: center; /* 文字也置中 */
  padding: 40px 0; /* 可自訂區塊高度或上下間距 */
}

.p-5 {
    margin: 0px 50px;
    padding: 3rem !important;
}

.login-container {
      max-width: 1000px;
      margin: 50px auto;
      background: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .login-left {
      padding: 90px 40px;
      margin: 0px 50px;
      border: 1px solid #333;
    }
    .login-title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px!important;
      color:#5D463A!important;
    }
    .form-label {
      font-weight: bold;
    }
    .form-text-link {
      font-size: 0.9rem;
      margin-left: 10px;
      font-weight: 600;
    }
    .form-btn-group button {
      min-width: 120px;
    }
    .social-login {
      margin-top: 30px;
      text-align: center;
    }
    .social-login button {
      background-color: #3b5998;
      color: white;
      border: none;
    }



    .signup-container01{
      border:1px solid #ccc;
      padding: 30px;
      border-radius: 6px;
      color: #5D463A;
    }



    .signup-title{
      background-color: #5D463A;
      color: #fff;
      padding: 15px;
      text-align: center;
      margin-top: 40px;
      margin-bottom: 0px;
    }



    label.me-2.mb-0{
      color: #5d463a !important;
      font-weight: bold;
    }

    .ms-2{
      margin-left: 0px!important;
    }
  
    

    .form-check.mb-3 {
    margin-bottom: 0px !important;
}


.form-group {
    margin-top: 10px;
}