:root{
    --arrow-btn-color:linear-gradient(90deg,#6be7ff 1%, #467bff 59%, #8c99f9 100%);
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
}
.environment-bg{
    background-color: var(--default-bg-color);
}
.page{
    width: 100%;
    flex: 1 0 auto;      /* 1 (flex-grow): 填滿剩下的所有空間
                            0 (flex-shrink): 不要比內容還小
                            auto (flex-basis): 初始大小根據內容決定 */
    position: relative;

    display: none;
    flex-direction: column;
    align-items: center;

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;

    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    &.page-active{
        opacity: 1;
        pointer-events: auto;
    }
    &.page-show{
        display: flex;        
    }
}

header, main {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
}
header{
    position: absolute;
    z-index: 10;
}
.banner{
    display: block;
    padding: 8.5cqw 0 0 13cqw;
    width: 100%;
    img{
        display: block;
        width: 74.1cqw;
        height: auto;
    }    
}
.back-btn {    
    width: 7.7cqw;
    aspect-ratio: 1/1;
    margin: 3.1cqw 0 0 8.9cqw;
    background-color: transparent;
    img { width: 100%; height: auto; }
}


.btn {    
    transition: all 0.1s ease;
    border: none;
    cursor: pointer;
    /* 去除文字底線 */
    text-decoration: none;
    /* 防止按鈕內文本被反白 */
    user-select: none;
    -webkit-user-select: none;  
    /* 去除點擊後藍框 */
    -webkit-tap-highlight-color: transparent;
    &:hover{
        filter: brightness(1.02);
    }
    &:active {
        translate: 0 0.2cqw;
        filter: brightness(0.95);
    }
}

.arrow-btn{
    height: 7.7cqw;
    aspect-ratio: 159/30;
    border: 0.26cqw solid white;
    background: var(--arrow-btn-color);
    border-radius: 1.8cqw;
    display: flex;
    align-items: center;
    .arrow{
        width: 4.1cqw;
        aspect-ratio: 49/37;
        margin-left: 4cqw;
    }
    span{
        flex: 1;
        color: white;
        letter-spacing: 2cqw;
        font-size: 3.85cqw;
    }
}




.default-btn{
    padding: 4cqw 6cqw;
    font-size: 4cqw;
    letter-spacing: 0.5cqw;   
    border-radius: 2cqw;
    font-weight: 600;
    color: #333;
    background: linear-gradient(145deg, white, #f0f0f0);
    box-shadow: 1cqw 1cqw 3cqw #d1d1d1, -1cqw -1cqw 3cqw white;
    transition: all 0.1s ease;
    &:active {
        color: var(--theme-color);
        transform: scale(0.95);
        box-shadow: inset 0.5cqw 0.5cqw 2cqw #d1d1d1, inset -0.5cqw -0.5cqw 2cqw white
    }
}

.divider {
    width: 15cqw;
    height: 3px;
    background: var(--accent-color);
    margin: 0 auto 5cqw;
}

/* 陽明交通 */
.theme-a{
    --theme-color-rgb: 0, 51, 161;
}
/* 中正 */
.theme-b{
    --theme-color-rgb: 70, 192, 255;
}
/* 海洋 */
.theme-c{
    --theme-color-rgb: 111, 100, 216;
}
/* 宜蘭 */
.theme-d{
    --theme-color-rgb: 27, 117, 225;

}

.theme-a,.theme-b, .theme-c, .theme-d{
    --theme-color: rgb(var(--theme-color-rgb));
    --theme-gradient: linear-gradient(
        90deg, 
        rgba(var(--theme-color-rgb), 1) 0%, 
        rgba(var(--theme-color-rgb), 0.3) 100%
    );
}