*{
    font-family: '微軟正黑體','sans-serif';
    margin: 0;
    padding: 0;
    font-size: 1vw;}
body{
    background: #000 url('../images/bg.jpg') 0 0 no-repeat ;
    background-size: cover;
    overflow: hidden;
    height: 100vh;}
main{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;}
.text_box{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;}
.main{
    background-color: rgba(0, 0, 0, 0.45);
    color: #FFF;
    padding: 0.5% 2%;
    border: 3px solid #FFF;
    filter: drop-shadow(1px 1px 3px rgb(0, 0, 0,0.8));}
.main_list {
    margin: 3% 0;
    width: fit-content;}
h2{
    font-size: 2.2vw;
    margin-bottom: 1.5vw;
    color: rgb(165, 246, 255);}
.people{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
}
.people img{width: 100%;}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 768px) {
    *{
        font-size: 3vw
    }
    body{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .logo{
        height: 14%;
        justify-content: center;
    }
    .logo img {
        width: 34vw;
    }
    h2{
        font-size: 4vw;
        margin-bottom: 2vw;
    }
    main{
        flex-direction: column;
        justify-content: space-evenly;
        padding: 5% 2% 0;
    }
    .main{
        padding:0.5% 4%;
    }
    .people{
        order: 1;
        width: 65%;
        margin: 3% 0;
    }
}
@media screen and (max-width: 480px) {
    h2{
        font-size: 6vw;
    }
    .logo img {
        width: 50vw;
    }
    .people {
        width: 85%;
    }
}
@media screen and (max-width: 360px) {}