body{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
li{
    float:left;
    text-align: left;
    justify-content: left;
    align-items: left;
    width: 100%;
}

.full_size_image{
    width:100%;
}
.member_card{
    text-align: center;
    width: 100%;
}
.intro{
    text-align: center;
    margin-left: 250px;
    margin-right: 250px;
}
.image{
    width: 100%;
    height: 60%;
}
.person_img{
    /* height: 100%; */
    width: 100%;
    object-fit: cover;
    object-position: center top;
    overflow: hidden;
    display:inline-block;
    /* border-radius:5%; */
}



h1{
  color:#EA2B1F;
  font-weight:bolder;
  font-size:70px !important;
  padding-top:100px;
  padding-bottom:100px;
  }


p{
    color:#390099;
    font-weight: 500;
    font-size:30px ;
    padding: left 30% right 30%;
}


.member_portrait{
    width: 100%;
    height: 100%;
    left:0;
    position: absolute;
    background-color:transparent;
    border:transparent solid 0em;
    padding: 0;
    color: aliceblue;
    /* background-color: #000000; */
    font-size: 2em;
}

.button_floating{
    height:100%;
}
.row {
    --bs-gutter-x: 0rem;
}
.bulletin{
    display: table;
    border: #ca8646 1em solid;
    border-radius: 1.5em;
    background-color: #7f4625;
    position: relative;
    margin-bottom: 5%;
}
.leaders_title{
    width: 100%;
    padding-bottom: calc(5%/3*4);
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.leaders_person{
    width: 25%;
    padding-bottom: calc(25%/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    transition: .5s;
    display:inline-block;
    left: 0;
    top: 0;
    /* invert(80%)負片 
    sepia(80%)懷舊 
    brightness(70%)亮度 
    contrast(150%)對比 
    saturate(200%)飽和 
    grayscale(50%)灰階 
    hue-rotate(90deg)色相翻轉 
    blur(5px)模糊 
    opacity(30%)透明 */
    /* -webkit-filter: brightness(70%) contrast(200%);
    filter: brightness(70%) contrast(200%); */
}
.wet_lab_title{
    width: 38%;
    padding-bottom: calc(15%/3*4);
    position: relative;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.wet_lab_person{
    width: 15%;
    padding-bottom: calc(15%/3*4);
    position: relative;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.dry_lab_title{
    width: 100%;
    padding-bottom: calc(5%/3*4);
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.dry_lab_person{
    --width: 25%;
    width: var(--width);
    padding-bottom: calc(var(--width)/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.hp_person{
    width: 15%;
    padding-bottom: calc(15%/3*4);
    position: relative;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.primary_title{
    --width: 30%;
    width: var(--width);
    padding-bottom: calc(var(--width)/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 4%;
    margin-bottom: 4%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.primary_person{
    --width: 30%;
    width: var(--width);
    padding-bottom: calc(var(--width)/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 4%;
    margin-bottom: 4%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.secondary_title{
    width: 100%;
    padding-bottom: calc(7%/3*4);
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.secondary_person{
    --width: 23%;
    width: var(--width);
    padding-bottom: calc(var(--width)/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.instructors_title{
    width: 100%;
    padding-bottom: calc(7%/3*4);
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.instructors_person{
    --width: 23%;
    width: var(--width);
    padding-bottom: calc(var(--width)/3*4);
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    /* transition: .5s; */
    display:inline-block;
    left: 0;
    top: 0;
}
.carousel-control-next {
    width: 10%;
}
.carousel-control-prev{
    width: 10%;
}
.a_group{
    width: 100%;
    height: 100%;
    padding:2% 7%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.modal-dialog{
    max-width: none;
    width:60%;
    min-width:50em;
}

.modal-content{
    border: #aa8eda 0.5em solid;
    border-radius: 1.5em;
}
.person_card{
    width:100%;
    display: flex;
    padding: 2%;
    padding-bottom: 0%;
}
.card_left{
    width:30%;
    float: left;
    position: relative;
}
.card_right{
    width:70%;
    float: left;
    padding-left: 3%;
}
.card_img_div{
    width: 100%;
    padding-bottom:130%;
    float: left;
    position: relative;
}
.card_img{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    object-fit: cover;
    object-position: center top;
    overflow: hidden;
    border-radius:5%;
}
.person_name{
    width: 100%;
    position: relative;
    font-size: 1.5em;
    font-weight: 700;
    display: table;

    background-size: 100% 100%;
    background-position: left;
}
.job_title{
    width :100%;
    position: relative;
    color:#d9bf98;
    font-weight: 400;
    display: table;
}
.person_tag{
    width :100%;
    position: relative;
    display: flex;
    text-align: left;
    font-size: 2em;
    color:#004aad;
    font-weight: 700;
}
.title_explain{
    width :100%;
    border: #000000 0.2em solid;
    border-radius: 1.5em;
    color:#ff1616;
    padding: 0.5em 0.5em;
    font-size: 1.2em;
    margin-top: 5%;
    font-weight: 500;
}
.person_data{
    width :100%;
    font-size: 1.2em;
    padding-left: 5%;
    font-weight: 500;
}
/* .carousel-item{
    transition: 0.1s;
} */
@media all and (max-aspect-ratio:1/1){
    .leaders_title{
        width: 80%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .leaders_person{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
        margin-left: 30%;
        margin-right: 30%;
    }
    .wet_lab_title{
        width: 80%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .wet_lab_person{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .dry_lab_title{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .dry_lab_person{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
        margin-left: 30%;
        margin-right: 30%;
    }
    .hp_person{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .primary_title{
        width: 40%;
        order: var(--id);
        padding-bottom: calc(40%/3*4);
    }
    .primary_person{
        width: 60%;
        order: var(--id);
        padding-bottom: calc(60%/3*4);
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 2%;
        margin-bottom: 2%;
    }
    .secondary_title{
        width: 100%;
        order: var(--id);
        padding-bottom: calc(20%/3*4);
    }
    .secondary_person{
        width: 35%;
        order: var(--id);
        padding-bottom: calc(35%/3*4);
        margin-left: 32.5%;
        margin-right: 32.5%;
        margin-top: 1.5%;
        margin-bottom: 1.5%;
    }
    .instructors_title{
        width: 100%;
        order: var(--id);
        padding-bottom: calc(20%/3*4);
    }
    .instructors_person{
        width: 35%;
        order: var(--id);
        padding-bottom: calc(35%/3*4);
        margin-left: 32.5%;
        margin-right: 32.5%;
        margin-top: 1.5%;
        margin-bottom: 1.5%;
    }
    .modal-dialog{
        width:90%;
        min-width:0;
        margin: 1.75rem auto;
    }
    .person_card{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .card_left{
        width:90%;
        position: relative;
        display: inline-block;
    }
    .card_right{
        width:100%;
        /* float: left; */
        display: inline-block;
        padding-left: 3%;
    }
    .person_name{
        font-size: 6vw;
    }
    .job_title{
        font-size: 4vw;
    }
    .person_tag{
        font-size: 3.5vw;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .title_explain{
        font-size: 3vw;
    }
    .person_data{
        font-size: 3vw;
    }.close_button{
        font-size: 3vw;
    }
}