body{
    margin: 0px;
    padding: 0px;
    background-color: rgb(235, 235, 235);
    font-family: '微軟正黑體' !important;
    color: rgb(109, 109, 109);
    padding-bottom: 5%;
    position: relative;
}
h1{
    font-size: 1.5em;
    margin-top: calc((76px - 1.5em)/2);
    font-weight: 400;
}
h2{
    font-size: 27px;
}
h5{
    color: rgb(145, 145, 145);
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.clear{
    clear: both;
}
.logo{
     width:50px;
     
}
.nav{
    width: 100%;
    height: 76px;
    background-color: white;
    display: flex;
    box-shadow: 0px 1px 10px 1px #b9b9b9;
    position: fixed;
    top: 0;
    z-index: 99;
}
.nav img{
    float: left;
    align-self: center;
    margin-left: 6%;
}
.nav h1{
    float: left;
}
.wrap{
    max-width: 1080px;
    margin: 0 auto;
    background-color: #ffffff;
    padding-bottom: 3%;
    padding-top: 76px;
}
.wrap-nocolor{
    max-width: 1080px;
    margin: 0 auto;
}
.flex-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flex-content a:link, a:active{
    text-decoration: none;
    text-decoration-color: rgb(109, 109, 109);
    color: rgb(109, 109, 109);
}

.big-block{
    width: 310px;
    height: 300px;
    margin-top: 4%;
    box-shadow: 0px 0px 5px 1px #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.big-block:hover{
    box-shadow: 1px 1px 10px 1px #b4b4b4;
    transition: 0.5s;
}
.big-block:hover h2{
    font-size: 30px;
    transition: 0.5s;
}
.big-block:hover h2::before{
    content: "-";
}
.big-block:hover h2::after{
    content: "-";
}
.big-block img{
    margin-top:5%;
    width: 180px;
}
.small-block{
    width: 310px;
    height: 100px;
    margin-top: 20px;
    box-shadow: 0px 0px 5px 1px #e0e0e0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.small-block:hover{
    box-shadow: 1px 1px 10px 1px #b4b4b4;
    transition: 0.5s;
}
.small-block:hover h2{
    font-size: 30px;
    transition: 0.5s;
}
.small-block:hover h2::before{
    content: "-";
}
.small-block:hover h2::after{
    content: "-";
}
.small-block img{
    width: 60px;
    margin-right: 7%;
}

.senpai-info{
    width: 80%;
    margin: 0 auto;
    display: flex;
    margin-top: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.senpai-info input{
    width: 200px;
    height: 25px;
    border: 1px solid #88c5ff;
}
.senpai-info button{
    width: 180px;
    background-color: #43a4ff;
    color: white;
    border-radius: 99em;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    font-size: 17px;
    font-family: '微軟正黑體';
    outline:none;
}
.senpai-info button:hover{
    background-color: #2395ff;
    cursor: pointer;
}
.response{
    width: 80%;
    height: 300px;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px #e0e0e0;
    margin:0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    }
.response img{
    width: 200px;
    margin: 5%;
}
#calendar{
    padding: 5%;
}
.fc-next-button::before{
    content: ">"
}
.fc-prev-button::before{
    content: "<"
}
.content{
    width: 80%;
    margin: 0 auto;
    line-height: 2em;
    padding-top: 3%;
}

th, td {
    padding: 7px 0px;
}
.show-meal-map a{
    display: block;
    background-color: #43a4ff;
    border-radius: 10px;
    color: #ffffff;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    height: 25px;
    text-align: center;
}
.show-meal-map a:hover{
    background-color: #2395ff;

}
.meal-info table{
    width: 90%;
    margin: 0 auto;
    border-spacing: 0px;
    text-align: left;
}
.meal-info table tbody td:nth-child(3){
    text-align: center;
}
.meal-info table tr td:nth-child(1){
    text-align: left;
    padding-left: 1%;
}
.meal-info table tr td:nth-child(2){
    text-align: left;
}
.graduate{
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
    
}
.graduate tr:hover{
    background-color: #e7e7e7;
    transition: 0.2s;
}
.meal-info tr:hover{
    background-color: #e7e7e7;
    transition: 0.2s;
}
em{
    font-weight: bold;
}
#map{
    height: 450px;
}

.eatwhat{
    margin: 15px auto;
    text-align: center;
}
.eatwhat a{
    padding: 3px 30px;
    color: #ffffff;
    border-radius: 20px;
    font-size: 20px;
    background-color: #2ba0ff;
}
.eatwhat a:hover{
    background-color: #0054a3;
}
.eatwhat .eathis{
    margin: 20px auto;
    font-size: 20px;
}
.honio{
    border: 0px;
}
.footer p{
    text-align: center;
}
.team ul li a{
    text-decoration: none;
    color: #0054a3;
}
.team ul li a:hover{
    text-decoration: none;
    color: #2ba0ff;
    transition: 0.5s;
}
.team ul , .DormitoryList ul{
    text-align: center;
    padding-left: -40px;
}
.team ul li , .DormitoryList ul li{
    display: inline-block;
    margin: 5px 10px;
    padding: 2px 2px;
    font-size: 20px;
}
.team img{
    width: 80%;
}
.team .LinkSpace{
    margin-top: 50px;
}

.Dormitory a:hover{
    color:#2395ff;
    transition: 0.2s;
}
.Dormitory img{
    width: 80%;
}
.light-blue-link *{
    color: #2395ff;
    border-bottom: 2px solid #ffffff;
}
.light-blue-link:hover *{
    color: #5fb1fd;
    transition: 0.5s;
    border-bottom: 2px solid #5fb1fd;
    box-sizing: border-box;
}
.BoyBring{
    float: left;
    width: 40%;
    margin: 5px 10px;
    padding: 0 15px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
.btnBoy{
    padding: 4px 4px;
}
.GirlBring{
    float: left;
    width: 40%;
    margin: 5px 10px;
    padding: 0 15px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
.btnGirl{
    padding: 4px 4px;
}
.BoyBring .toggleBoy em , .GirlBring .toggleGirl em{
    text-decoration: line-through;
}
.eatwhat{
    cursor: pointer;
}
.footer{
    font-size: 10px;
}
.footer a{
    display: inline-block;
    color: rgb(109, 109, 109);
    border-bottom: 1px solid rgb(235, 235, 235);
    font-weight: bold;
}
.footer a:hover{
    border-bottom: 1px solid #000000;
    transition: 0.5s;
}
.time-selector{
    margin-top: 10px;
    border: #b4b4b4;
    width: 100%;
    display: flex;
}
.time-selector:nth-child(odd){
    border: 1px 0px solid #b4b4b4;
}
.time{
    display: inline-flex;
    background-color: #ffffff;
    border: 1px solid #b4b4b4;
    margin: 0px;
    flex-direction: column;
    flex-flow: column;
    flex: 3;
}
.selected-time{
    display: inline-flex;
    background-color: #ffffff;
    border: 1px solid #b4b4b4;
    margin: 0px;
    flex-direction: column;
    flex-flow: column;
    flex: 3;
}
.selected-time a{
    padding-top: calc((30px - 1em) / 2);
    display: block;
    text-align: center;
    height: 30px;
    background-color: #b4b4b4;
    color: #ffffff;
    cursor: pointer;
}
.selected-time a:hover{
    background-color: #b4b4b4;
    color: #ffffff;
}
.time a{
    padding-top: calc((30px - 1em) / 2);
    display: block;
    text-align: center;
    height: 30px;
    cursor: pointer;
}
.time a:hover{
    background-color: #e7e7e7;
    transition: 0.5s;
}
#hospital{
    width: 80%;
    height: 720px;
    margin-left: 10%;
}

@media(max-width:767px){
.nav{
    position: relative;

}
    .meal-info table tr td:nth-child(2){
        display: none;
}
.meal-info table tr th:nth-child(2){
        display: none;
}
.chatroom{
    width: 100%;
}
.BoyBring{
    clear: both;
    width: 85%;
    transition: 0.4s;
}
.GirlBring{
    clear: both;
    width: 85%;
    transition: 0.4s;
}
}