/* 自定義樣式 */
:root{
    font-size: 14px;
}

body {
    font-family: 'Arial', sans-serif;
    max-width: 100%;
}

.custom-header {
    background-color: #f8f9fa;
    padding: 20px 0;
}

.custom-footer {
    background: #FFFFFF;
    color: #343a40;
    padding: 2% 0;
    max-width: 100%;
}

.custom-main {
    min-height: 500px;
    padding: 40px 0;
}

.login-mode-btn {
    width: calc(33.33% - 1rem); /* 减去间距 */
    max-width: none;
}

.left-section{
    max-width: 100%;
    z-index: 1;
}

.right-section{
    max-width: 100%;
    z-index: 0;
    
}

.login-title{
    font-size: 36px;
}

#login-container{
    position: relative;
    right: 10%;
    height: 60vh;
    z-index: 0;

}

main{
    background-color: #FDF9FF;
}

@media screen and (max-width: 1200px) {
    :root{
        font-size: 14px;
    }
    
    .logo-section .logo-image{
        display: none;  
    }

    #login-container{
        width: 100%;
        height: auto;
        margin: auto;
        display: flex;         /* 新增：使用 flex 布局 */
        justify-content: center; /* 新增：水平置中 */
        align-items: center;   /* 新增：垂直置中 */
        right: 0;             /* 重置原本的 right: 10% */
    }

    .right-section {
        padding: 0;  /* 新增：移除 padding */
    }

    .login-image{
        max-width: 80%;
    }

    .custom-footer{
        font-size: 12px;
    }

    .login-title{
        font-size: 24px;
    }
    
}