/* 手機平板樣式 */

/* 聯絡我們響應式設計 */
/* 基本重置和全域樣式 */
.hamburger-menu {
    display: none;
}

@media (max-width: 950px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
    }

    header {
        background: #FFFFFF;
        color: #000000;
        padding: 0.5em 1em;
    }

    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap; /* 在小螢幕上允許導航列換行 */
    }

    .logo {
        font-size: 1em;
        font-weight: bold;
        color: #000000;
    }

    .menu {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    .menu li {
        padding: 10px; /* 在小螢幕上增加間距 */
    }

    .menu li a {
        text-decoration: none;
        color: #000000;
        transition: color 0.3s;
    }

    .menu li a:hover {
        color: #ccc;
    }

    /* 小螢幕上的漢堡菜單 */
    .hamburger-menu {
        display: block;
        cursor: pointer;
    }

    .menu {
        display: none;
        width: 100%;
        text-align: center;
    }

    .menu.active {
        display: block;
    }

    /* 子菜單和下拉內容樣式 */
    .menu-item .submenu,
    .menu-item .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .menu-item:hover .submenu,
    .menu-item:hover .dropdown-content {
        display: block;
    }

    .submenu a,
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .submenu a:hover,
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .menu-item {
        position: relative;
    }






}

/* 圖片和表單的響應式調整 */
@media (max-width: 950px) {


    .contact-us-container, .activities-container, .date-event-container, .member-profile {
        flex-direction: column;
        align-items: center;
    }

    .contact-image img, .activity-block img, .date-event-container img, .member-profile img {
        max-width: 90%;
    }

    .contact-form, .activity-content, .date-event-info, .profile-info {
        width: 90%;
    }

    /* 聯絡我們圖片的調整 */
    .contact-image img {
        width: 80%;
        margin: 0 auto;
    }

    .contact-form {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 頁腳調整 */
    .site-footer {
        flex-wrap: wrap; /* 在小螢幕上允許內容換行 */
    }

    .footer-info p {
        text-align: left; /* 確保文字從左側開始對齊 */
    }

    /* 確保在小螢幕上表格也能良好顯示 */
    .stylish-table {
        width: 100%;
        overflow-x: auto; /* 允許水平滾動以查看過長的表格內容 */
    }



.date-event-reserve-btn{
        width: 40%;
    }





    /* history的rwd效果如下------history.html */
 .stylish-table {
        border: 0;
        min-width: 50px;
    }

    .stylish-table thead {
        display: none;
    }

    .stylish-table tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }

    .stylish-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        text-align: left;
        border-bottom: 1px dotted #ccc;
    }

    .stylish-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }


/* history的rwd效果結尾------history.html */


/* 成功登入rwd效果------success.html */

.body-login {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .success {
        padding: 20px;
        text-align: center;
        background-color: #ffffff; /* 轻微灰色背景 */
        border-radius: 10px; /* 圆角边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影以增加深度感 */
        width: 100%; /* 适应屏幕宽度 */
        max-width: 400px; /* 最大宽度限制 */
    }

    .success i {
        font-size: 48px; /* 增大图标大小 */
        color: #C9F8F7; /* 绿色，表示成功 */
    }

    .success h2 {
        margin-top: 10px;
        font-size: 24px; /* 调整标题大小 */
    }

    .success p {
        font-size: 16px; /* 调整段落文本大小 */
    }

/* 成功登入rwd效果結尾------success.html */



/* 失敗登入rwd效果------error.html */


    .error {
        padding: 20px;
        text-align: center;
        background-color: #ffffff; /* 轻微灰色背景 */
        border-radius: 10px; /* 圆角边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影以增加深度感 */
        width: 100%; /* 适应屏幕宽度 */
        max-width: 400px; /* 最大宽度限制 */
    }

    .error i {
        font-size: 48px; /* 增大圖大小 */
        color: #F4C1D1; /* 粉色，表示失敗 */
    }

    .error h2 {
        margin-top: 10px;
        font-size: 24px; /* 调整标题大小 */
    }

    .error p {
        font-size: 16px; /* 调整段落文本大小 */
    }

/* 失敗登入rwd效果結尾------error.html */


 .cards {

        /*min-height: 100vh; /* 最小高度為視窗的高度 */
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;/* 使子元素垂直排列 */
        align-items: center;
        padding: 20px; /* 小型裝置的間距 */
    }

 .card {  
  
      width: 80%; /* 破上層card的寬限制*/ 
      margin-bottom: 405px;  /* 小型裝置的間距 */
      flex: 0 1 auto

      }

/*
.card-inner
{
min-height: 50vh; 最小高度為視窗的高度
padding: 20px;  小型裝置的間距 */




.cards-login
{
height: 200vh;

}




/* 會員檔案頁面 */
 .member-profile {
        padding: 20px; /* 增加內邊距以避免內容直接貼近螢幕邊緣 */
        display: flex;
        flex-direction: column; /* 確保所有子元素都是垂直排列的 */
        align-items: center; /* 對齊元素到中心 */
        width: 100%;
    }

    .member-profile h2 {
        font-size: 1.5rem; /* 增加標題字體大小以改善可讀性 */
        text-align: center; /* 確保標題在中心對齊 */
        width: 100%; /* 確保標題佔滿整個容器寬度 */
        margin-bottom: 15px; /* 增加標題與下方內容的間距 */
    }

    .upload-photos {
        display: flex;
        justify-content: space-around; /* 確保上傳按鈕之間有均勻的間距 */
        width: 100%; /* 確保容器佔滿整個寬度 */
        margin-bottom: 15px; /* 增加與下方內容的間距 */
    }

    .photo-upload {
        width: 60px; /* 設定一個合適的大小 */
        height: 60px; /* 設定一個合適的大小 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem; /* 增加+符號的大小 */
        border: 1px solid #ccc; /* 增加邊框以便更好地視覺識別 */
        border-radius: 50%; /* 圓形邊框 */
    }

  

   .profile-buttons .reserve-btn {
    width: auto; /* 讓按鈕寬度佔滿父元素 */
    margin-bottom: 10px; /* 增加與其他元素的間距 */
}



/* 會員瀏覽聯絡區塊響應式設計 */
   .member-browsing-contact {
        padding: 20px; /* 增加內邊距以避免內容直接貼近螢幕邊緣 */
        height: 90vh;
	width:92%;
        margin:0 0.1%
    }

    .browsing-container {
        justify-content: flex-start; /* 覆蓋 justify-content, 使其失效或改為起始對齊 */
        gap: 0px; /* 移除間距 */
        display: flex;
        flex-direction: column; /* 將輪播和資訊區塊垂直堆疊 */
    }



    .carousel-container {
        width: 100%; /* 確保輪播容器佔滿整個容器寬度 */
    }

    .carousel-slide {
        background-size: cover; /* 確保背景圖片覆蓋整個元素 */
        height: 360px; /* 調整適合小螢幕的高度 20250327調整高度，200px->360px */
    }

    .info-section {
        margin-top: 20px; /* 增加與輪播容器的間距 */
    }

.browsing-info-container{
 width: auto; /* 將寬度設回預設值 */
        height: auto; /* 將高度設回依據內容決定的預設值 */

}

    .browsing-info-container div,
    .browsing-button-container button {
        font-size: 14px; /* 在小螢幕上減小字體大小 */
    }

    .browsing-button-container {
        display: flex;
        flex-direction: column; /* 將按鈕垂直堆疊 */
        align-items: center; /* 中心對齊按鈕 */
    }

    .browsing-button {
        margin: 10px 0; /* 增加按鈕間的間距 */
        padding: 10px 20px; /* 增加按鈕的內邊距 */
        width: auto; /* 讓按鈕寬度根據內容自動調整 */
    }


.ok-us-container {

 padding: 3px; /* 註冊頁欄位寬縮小 */
}






.cokiyo{
display: flex;
    justify-content: center;
	padding:0px 0px 20px 0px;

}


/* 6月修改新增用於member-browsing手機樣式*/

.member-contact-06 {

display: none;

}

    
.member-contact-06rwd {
  display: block;
 
}



}/* 950px--結尾） */



@media (min-width: 951px) {
            .member-contact-06rwd {
                                   display: none; 
                                   
                                   }/* 顯示元素 */

.browsing-button-container {
width: 85%;
}


            }        /* 950px以上--結尾） */




/* 6月修改新增用於member-browsing電腦樣式*/
.member-contact-06 {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    /*display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 10vh;/* 會影響menu bar的位置*/
    width: 70%; /* 新增的設定，將容器寬度設為50% */
    margin: 0 15%; /* 上下保持原有的margin（此處為0），左右各設為15% */
}


.member-contact-06rwd {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    /*display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 10vh;/* 會影響menu bar的位置*/
    width: 100%; /* 新增的設定，將容器寬度設為50% */
    margin: 0 3%; /* 上下保持原有的margin（此處為0），左右各設為15% */
}