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

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
}

div {
    display: flex;
}

body {
    font-family: "Noto Sans TC", Arial, sans-serif;
    background-color: #1C2D5D;
}

hr {
    width: 80%;
    border-color: #7DB9DE;
}

header {
    position: fixed;
    left: 50%;
    top: 3vh;
    width: 80vw;
    height: 12vh;
    transform: translate(-50%, 0%);
    z-index: 500;
    background-color: #091C44;
    transition: top 0.3s ease-in-out;
    transition: width 0.3s ease, height 0.3s ease;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2%;

    .logo {
        height: 100%;
        max-width: 30%;
        align-items: center;
    
        img {
            max-width: 50%;
            max-height: 100%;
            padding: 0.2% 0.5%;
        }
    }
    
    .nav {
        height: 100%;
        flex-grow: 1;
        justify-content: flex-end;
        align-items: center;
    
        a {
            height: 100%;
            line-height: 100%;
            font-size: 1.8vw;
        
            padding: 1% 1%;
            display: flex;
            align-items: center;
        
            text-shadow: 0.1em 0.1em 0.2em #000000;
            &:hover {
                color: #D7C4BB;
                text-shadow: 0.1em 0.1em 0.2em #393939;
                background-color: #7DB9DE;
            }
        }
    }
}

main {
    width: 100vw;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    text-align: justify;

    section {
        width: 100%;
        padding: 3.5%;
        scroll-margin-top: 10vh; /* 跳轉時，確保與 header 下方有間距 */

        .container {
            align-items: flex-start;
            flex-direction: column;
        }
        .twoColumn {
            width: 100%;
            justify-content: space-between;
            .content {
                width: 48%;
                flex-direction: column;
            }
        }
        .imgBox {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

            img {
                object-fit: contain;
                padding: 1%;
            }
        }
    }

    .title {
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
        padding-bottom: 2%;
    }
    
    #home {
        height: 100vh;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .container {
            width: 70%;
            height: 70%;
            justify-content: center;
            align-items: center;
            img {
                max-width: 100%;
                max-height: 50%;
                min-height: 30%;
                margin-bottom: 3%;
            }
            #slogan {
                font-size: 4vw;
                font-weight: bold;
                text-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.6);
            }
            #project {
                font-size: 1.5vw;
            }
            #scroll {
                position: absolute;
                bottom: 2vh;
                left: 50%;
                transform: translateX(-50%);
                background-color: #00000000;
                border: 0;
                font-size: 2rem;
                cursor: pointer;
                &:hover {color: #7DB9DE;}
            }
        }
    }

    #profile {
        #profileTable {
            width: 50%;
            height: 8rem;
            flex-direction: column;
            flex-wrap: wrap;
            padding-left: 5%;
            .profileL {
                width: 100%;
                height: 33.33%;
                gap: 1rem;
                align-items: center;
                border: 0.1rem solid #7DB9DE;
                background-color: #091C44;
                padding: 2% 5%;
                text-wrap: nowrap;
                overflow: scroll;
                .tableName {
                    width: 5rem;
                    text-align-last: justify;
                }
            }
        }
    }

    #equipments {
        #equipmentList, #softwareList {
            width: 100%;
            flex-direction: column;
        }
        .equipment, .software {
            width: 100%;
            height: 2rem;
            align-items: center;
        }
        .equipmentNames, .softwareName {
            width: 80%;
            gap: 1rem;
            .equipmentName {color: #D7C4BB;}
        }
        .equipmentSet, .softwareUnit {
            width: 20%;
            align-items: center;
        }
        .equipmentNames, .equipmentSet, .softwareName, .softwareUnit {
            height: 2rem;
            border: 0.1rem solid #7DB9DE;
            background-color: #091C44;
            justify-content: flex-start;
            padding-left: 1%;
            text-wrap: nowrap;
            overflow: scroll;
        }
        .tableTitle {
            width: 100%;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #7DB9DE;
        }
    }

    #products .container {
        width: 100%; height: 50vh;

        .slider-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            justify-content: center;
            align-items: center;
    
            .slider {
                position: relative;
                overflow: hidden;
                width: 60%;
                height: 100%;
                border: 0.1rem dashed #7DB9DE;
                .slide {
                    width: 100%;
                    height: 100%;
                    transition: all 1s;
                    position: absolute;
                    top: 0;
                    left: 100%;
                    z-index:1;
                    justify-content: center;
                    align-items: center;
                    background-color: #1C2D5D;
        
                    img {
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: contain;
                    }
                }
    
                .prev {left: -100%;}
                .next {left: 100%;}
                .active{
                    left: 0%;
                    z-index:10;
                }
            }
      
            .btnPrev, .btnNext {
                margin: 1rem;
                cursor: pointer;
                font-size: 2rem;
                text-align: center;
                z-index: 1001;
                &:hover {color: #7DB9DE;}
            }
        }
    }
}

footer {
    width: 100vw;
    min-height: 45vh;
    background-color: #091C44;
    padding: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .footer {
        width: 90%;
        flex-grow: 1;
        justify-content: space-around;
        align-items: center;
    
        div {
            height: 100%;
            width: 45%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        img {
            max-height: 40%;
            max-width: 90%;
            margin: 2%;
        }
    }
    
    address {
        height: 100%;
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4%;
        align-items: flex-start;
        font-size: 1.5vw;
        padding: 2%;
    
        p {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        a:hover{color: #7DB9DE;}
        
        .footer-content {
            width: 80%;
        }
    }
    
    #copyright {
        font-size: 1vw;
    }
}

#backToTop {
    position: fixed;
    bottom: 8vh;
    right: 4vw;
    background-color: #1E3A6D;
    border-radius: 33%;
    border: 0;
	width: 3.5rem;
	height: 3.5rem;
    font-size: 2rem;
    cursor: pointer;
    display: none;
    z-index: 1000;
    &:hover {color: #D7C4BB;background-color: #7DB9DE;}
}