body{
    font-family: 微軟正黑體,simsun, Comic Sans MS;
    background-image:url("s_b.png");
    background-size: cover;
    height:auto; max-height:100%; max-width:100%; width:auto;

}

/*直接飛*/
.space_fly{
    animation-name:spacefly;
    animation-duration:2s;
}
/*等太空人後才能飛*/
.space_wait_fly{
    animation-delay:3.5s;
    -webkit-animation-delay:3.5s;
    animation-name:spacefly;
    animation-duration:6s;
}
/*太空人走向space*/
.man_enter_space{
    animation-name:man_enter_space;
    animation-duration:6s;
}
/*太空人走進去後消失*/
.man_display{
    transition: 3.8s ease-out; 
    visibility: hidden;
}
/*動畫軌跡*/
@keyframes spacefly{
    from{
        bottom:0;
    }
    to{
        bottom:100vh;
    }
}
@keyframes man_enter_space{
    from{
        right:0;
    }
    to{
           right:85vw;          
           height:27vh;  width:23vh;
    }
}
/*背景先載入*/
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(m_b.png) url(m_space2.png) url(m_man2.png)  ;
}

.nav-pills .nav-link {
    border-radius: 6px;
 }

/*hover樣子*/ 
#nav-item_u:hover  {
    background-color: #F8F8F8;
    border-radius: 6px; 
    
}

/*標題列顏色等*/
#u:hover{
    color: black;
}
#g{
    color:white;
}
#g:hover{
    color:white;
}
#nav-item_u:hover  {
    background-color: #F8F8F8;
    border-radius: 6px; 
    
}
#nav-item_g:hover  {
    background-color: rgb(29,70,146);
    border-radius: 6px; 
    
}


.nav-pills #u.active{
    color: black;
    background-color: #F8F8F8;
}
.nav-pills #g.active{
    color: white;
    background-color: rgb(29,70,146);
}


/*show model 文字自動縮排*/
#show_content{
    word-wrap:break-word;
}

/*底下一大段是響應式排版*/

/*電腦大螢幕*/
@media only screen and (min-width: 993px) {
    .modal-dialog {
        max-width: 80%; 
    }
    /*太空人和太空艙排版及大小*/
    #man{     
        position:absolute;  
        z-index:1;
        bottom:2.5vh;
        right:2vw;	  
    }
    #space{
        position:absolute;  
        bottom:2.5vh;
        left:0 	
    }
    #man1{    
        position:absolute;  
        z-index:1;
        bottom:3vh;
        right:2vw;	   
    }
    #space1{
        position:absolute;
        bottom:0vh;
        left:0	
    }
    #man {
        height:30vh;  width:24vh;
    }
    #space {
        height:45vh;  width:31vh;
    }
    #man1 {
        height:28vh;  width:22vh;
    }
    #space1 {
        height:48vh;  width:32vh;
    }
    
    #tab{
        padding-top: 2%;
        padding-left: 16%;
        padding-right: 14%;
    }
    .grid {
        padding-top:3%;
        padding-bottom :2%;
        display: grid;
        grid-auto-rows: 100px;
        grid-auto-columns:19%;
        align-content:center;
        margin-left:14%;
        grid-gap: 14px 14px; 
           
      }
    /*給那些排版會莫名噴錯的*/
    .special{
        margin-left:18%;      
    }
    .p_ugly{
        padding-top:2%;
        margin-left:21%;
        grid-auto-rows: 60px;
        grid-auto-columns:15%;
        grid-gap: 5%; 
    }

        /*一連串的grid排版*/
    .money {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .room {
        grid-area: 1 / 2 / span 1 / span 1;
    }
    .notice{
        grid-area:  1/ 3 / span 2 / span 2;
    }
    .enter{
        grid-area: 2 / 1 / span 2 / span 1;
    }
    .solider{
        grid-area: 2 / 2 / span 1 / span 1;
    }
    .control{
        grid-area: 3 / 2 / span 1 / span 2;
    }
    .bike{
        grid-area: 3 / 4 / span 1 / span 1;
    }
    .a {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .b {
        grid-area: 1 / 2 / span 1 / span 1;
    }
    .c{
        grid-area:  2/ 1 / span 1 / span 2;
    }
    .d{
        grid-area: 3 / 1 / span 1 / span 1;
    }
    .e{
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .a2 {
        grid-area: 1 / 3 / span 1 / span 1;
      }
    .b2 {
        grid-area: 1 / 4 / span 1 / span 1;
    }
    .c2{
        grid-area:  2/ 3 / span 1 / span 2;
    }
    .d2{
        grid-area: 3 / 3 / span 1 / span 1;
    }
    .e2{
        grid-area: 3 / 4 / span 1 / span 1;
    }
    .introduce {
        grid-area: 1 / 3 / span 1 / span 1;
      }
    .lms {
        grid-area: 1/ 4 / span 2 / span 1;
    }
    .portal{
        grid-area:  2/ 3 / span 2 / span 1;
    }
    .ask{
        grid-area: 3 / 4 / span 1 / span 1;
    }
    .first{
        grid-area: 1 /  1/ span 2 / span 2;
    }
    .second{
        grid-area: 1 / 3 / span 2 / span 2;
    }
    .box a{
        font-size: 20px;
    }
    
    
    /*大學生研究生按鈕*/
    h2{
        text-align:center;
        font-size:40px;
        margin-top:2%;
        
    }
    h2 a:hover,h2 a:active{
        color: white;
        text-decoration:none;
        font-size:40px;
    }
    

    /*變大*/
    .big{
        font-size:40px;
        color: white;
        font-weight: bold;

    }
    .small{
        font-size:30px;
    }
    
}

/*電腦螢幕縮小，調字體，調長度*/   
@media only screen and (min-width: 768px) and (max-width: 993px) {
    .modal-dialog {
        max-width: 90%; 
    }
    
    #man{     
        position:absolute;  
        z-index:1;
        bottom:3.5vh;
        right:0vw;	  
    }
    #space{
        position:absolute;  
        bottom:3vh;
        left:0 	
    }
    #man1{    
        position:absolute;  
        z-index:1;
        bottom:3.6vh;
        right:0vw;	   
    }
    #space1{
        position:absolute;
        bottom:1.5vh;
        left:0	
    }
    #man {
        height:25vh;  width:19vh;
    }
    #space {
        height:42vh;  width:26vh;
    }
    #man1 {
        height:25vh;  width:19vh;
    }
    #space1 {
        height:42vh;  width:26vh;
    }
       #tab{
        padding-top: 2%;
        padding-left: 14%;
        padding-right: 14%;
        
    }
    a .nav-link{
        font-size: 9px;
        
    }

        a{
            font-size: 15px;
        }

        .grid {
            padding-top:2%;
            padding-bottom:2%;
            display: grid;
            grid-auto-rows: 75px;
            grid-auto-columns:19%;
            align-content:center;
            margin-left:9%;
            grid-gap: 12px 12px;          
        }
        .special{
            margin-left:17%;         
        }
        .p_ugly{
            padding-top:2%;
            margin-left:21%;
            grid-auto-rows: 60px;
            grid-auto-columns:15%;
            grid-gap: 5%; 
        }
        /*跟上面一樣，但不寫排版既沒了....可用less*/
        .money {
            grid-area: 1 / 1 / span 1 / span 1;
        }
        .room {
            grid-area: 1 / 2 / span 1 / span 1;
        }
        .notice{
            grid-area:  1/ 3 / span 2 / span 2;
        }
        .enter{
            grid-area: 2 / 1 / span 2 / span 1;
        }
        .solider{
            grid-area: 2 / 2 / span 1 / span 1;
        }
        .control{
            grid-area: 3 / 2 / span 1 / span 2;
        }
        .bike{
            grid-area: 3 / 4 / span 1 / span 1;
        }
        .a {
            grid-area: 1 / 1 / span 1 / span 1;
          }
        .b {
            grid-area: 1 / 2 / span 1 / span 1;
        }
        .c{
            grid-area:  2/ 1 / span 1 / span 2;
        }
        .d{
            grid-area: 3 / 1 / span 1 / span 1;
        }
        .e{
            grid-area: 3 / 2 / span 1 / span 1;
        }
        .a2 {
            grid-area: 1 / 3 / span 1 / span 1;
          }
        .b2 {
            grid-area: 1 / 4 / span 1 / span 1;
        }
        .c2{
            grid-area:  2/ 3 / span 1 / span 2;
        }
        .d2{
            grid-area: 3 / 3 / span 1 / span 1;
        }
        .e2{
            grid-area: 3 / 4 / span 1 / span 1;
        }
        .introduce {
            grid-area: 1 / 3 / span 1 / span 1;
          }
        .lms {
            grid-area: 1/ 4 / span 2 / span 1;
        }
        .portal{
            grid-area:  2/ 3 / span 2 / span 1;
        }
        .ask{
            grid-area: 3 / 4 / span 1 / span 1;
        }
        .first{
            grid-area: 1 /  1/ span 2 / span 2;
        }
        .second{
            grid-area: 1 / 3 / span 2 / span 2;
        }
        
    h2{
        text-align:center;
        font-size:40px;
        
        
    }
    h2 a:hover{
        color: white;
        position: relative; 
        top: 1px;
        left: 1px;
        text-decoration:none;
        font-size:40px;
    }
    .big{
        font-size:40px;
        color: white;
        font-weight: bold;
    }
    .small{
        font-size:30px;
    }
    
        
}

/*為了處理太空人和太空艙的電腦螢幕新排版....*/
@media only screen and (min-width: 480px) and (max-width: 768px){
    .modal-dialog {
        max-width: 90%; 
    }
    .grid {
        padding-top:35px;
        padding-bottom:40%;
        display: grid;
        grid-auto-rows:70px;
        grid-auto-columns:30%;
        align-content:center;
        margin-left:4%;
        grid-gap: 10px 10px;    
    }
    #man{     
        position:absolute;  
        z-index:1;
        bottom:2vh;
        right:15vw;	  
    }
    #space{
        position:absolute;  
        bottom:2vh;
        left:15vw; 	
    }
    #man1{    
        position:absolute;  
        z-index:1;
        bottom:2vh;
        right:15vw;	   
    }
    #space1{
        position:absolute;
        bottom:0vh;
        left:15vw	
    }
    #man {
        height:25vh;  width:19vh;
    }
    #space {
        height:36vh;  width:25vh;
    }
    #man1 {
        height:25vh;  width:19vh;
    }
    #space1 {
        height:36vh;  width:25vh;
    }
    a{
     font-size: 15px;
    }
  
    .p_grid {
        padding-top:2%;
        display: grid;
        grid-auto-rows: 90px;
        grid-auto-columns:45%;
        align-content:center;
        margin-left:6%;
        grid-gap: 10px 10px;
        
    }
    /*研究生新生周活動的排版*/
    .p_ugly {
        padding-top:5%;
        display: grid;
        grid-auto-rows: 90px;
        grid-auto-columns:40%;
        align-content:center;
        margin-left:12%;
        grid-gap: 10px 20px;
        
    }

    /*新grid排版*/
    .p_money {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .p_notice{
        grid-area: 1/ 2 / span 2 / span 2;
    }
    .p_bike{
        grid-area: 2 / 1 / span 1 / span 1;
    }
    .p_enter{
        grid-area: 3 / 1 / span 2 / span 1;
    }
    .p_room {
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .p_solider{
        grid-area: 3 / 3 / span 1 / span 1;
    }
    .p_control{
        grid-area: 4 / 2 / span 1 / span 2;
    }

    .a {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .b {
        grid-area: 1 / 2 / span 1 / span 1;
    }
    .c{
        grid-area:  2/ 1 / span 1 / span 2;
    }
    .d{
        grid-area: 3 / 1 / span 1 / span 1;
    }
    .e{
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .a2 {
        grid-area: 4 / 1 / span 1 / span 1;
      }
    .b2 {
        grid-area: 4 / 2 / span 1 / span 1;
    }
    .c2{
        grid-area:  5/ 1 / span 1 / span 2;
    }
    .d2{
        grid-area: 6 / 2 / span 1 / span 1;
    }
    .e2{
        grid-area: 6 / 1 / span 1 / span 1;
    }
    .introduce {
        grid-area: 4 / 1 / span 1 / span 1;
      }
    .lms {
        grid-area: 4/ 2 / span 2 / span 1;
    }
    .portal{
        grid-area:  5/ 1 / span 2 / span 1;
    }
    .ask{
        grid-area: 6 / 2 / span 1 / span 1;
    }
    .first{
        grid-area: 1 /  1/ span 1 / span 2;
    }
    .second{
        grid-area: 2 / 1 / span 1 / span 2;
    }
    h2{
        text-align:center;
        font-size:25px;
        margin-top:2%;
        
    }
    /*字體大小有修*/
    h2 a:hover{
        color: white;
        position: relative; 
        top: 1px;
        left: 1px;
        text-decoration:none;
        font-size:30px;
    }
    .big{
        font-size:30px;
        color: white;
        font-weight: bold;

    }
    .small{
        font-size:25px;
    }
    
}
/*手機螢幕大小*/
 @media only screen  and (max-width: 480px){
    .modal-dialog {
        max-width: 100%; 
    }
    #man{     
        position:absolute;  
        z-index:1;
        bottom:2vh;
        right:15vw;	  
    }
    #space{
        position:absolute;  
        bottom:2vh;
        left:15vw; 	
    }
    #man1{    
        position:absolute;  
        z-index:1;
        bottom:2vh;
        right:15vw;	   
    }
    #space1{
        position:absolute;
        bottom:0vh;
        left:15vw	
    }
    #man {
        height:25vh;  width:19vh;
    }
    #space {
        height:36vh;  width:25vh;
    }
    #man1 {
        height:25vh;  width:19vh;
    }
    #space1 {
        height:36vh;  width:25vh;
    }
    a{
     font-size: 15px;
    }
  
    .grid {
        padding-top:35px;
        padding-bottom:75%;
        display: grid;
        grid-auto-rows:70px;
        grid-auto-columns:30%;
        align-content:center;
        margin-left:4%;
        grid-gap: 10px 10px;    
    }
    .p_grid {
        padding-top:2%;
        display: grid;
        grid-auto-rows: 90px;
        grid-auto-columns:45%;
        align-content:center;
        margin-left:6%;
        grid-gap: 10px 10px;
        
    }
    /*研究生新生周活動的排版*/
    .p_ugly {
        padding-top:5%;
        display: grid;
        grid-auto-rows: 90px;
        grid-auto-columns:40%;
        align-content:center;
        margin-left:12%;
        grid-gap: 10px 20px;
        
    }
    .p_money {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .p_notice{
        grid-area: 1/ 2 / span 2 / span 2;
    }
    .p_bike{
        grid-area: 2 / 1 / span 1 / span 1;
    }
    .p_enter{
        grid-area: 3 / 1 / span 2 / span 1;
    }
    .p_room {
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .p_solider{
        grid-area: 3 / 3 / span 1 / span 1;
    }
    .p_control{
        grid-area: 4 / 2 / span 1 / span 2;
    }

    .a {
        grid-area: 1 / 1 / span 1 / span 1;
      }
    .b {
        grid-area: 1 / 2 / span 1 / span 1;
    }
    .c{
        grid-area:  2/ 1 / span 1 / span 2;
    }
    .d{
        grid-area: 3 / 1 / span 1 / span 1;
    }
    .e{
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .a2 {
        grid-area: 4 / 1 / span 1 / span 1;
      }
    .b2 {
        grid-area: 4 / 2 / span 1 / span 1;
    }
    .c2{
        grid-area:  5/ 1 / span 1 / span 2;
    }
    .d2{
        grid-area: 6 / 2 / span 1 / span 1;
    }
    .e2{
        grid-area: 6 / 1 / span 1 / span 1;
    }
    .introduce {
        grid-area: 4 / 1 / span 1 / span 1;
      }
    .lms {
        grid-area: 4/ 2 / span 2 / span 1;
    }
    .portal{
        grid-area:  5/ 1 / span 2 / span 1;
    }
    .ask{
        grid-area: 6 / 2 / span 1 / span 1;
    }
    .first{
        grid-area: 1 /  1/ span 1 / span 2;
    }
    .second{
        grid-area: 2 / 1 / span 1 / span 2;
    }
    /*大學生研究生*/
    h2{
        text-align:center;
        font-size:25px;
        margin-top:2%;
        
    }
    h2 a:hover{
        color: white;
        position: relative; 
        top: 1px;
        left: 1px;
        text-decoration:none;
        font-size:30px;
    }

    /*變大*/
    .big{
        font-size:30px;
        color: white;
        font-weight: bold;

    }
    .small{
        font-size:25px;
    }

    
}






/*每個按鈕*/
.box {
  
  border-radius: 8px; 
  font-size: 25px;
  
}

#tab{
    padding-top:2%;   
}

/*標題、tab字*/    
a{
    color:black;
    text-decoration:none;
}

.child, .toomuch {
    cursor: pointer;
}
   
* {
    user-select: none;
}
/*按鈕動畫圖片*/
.child {
    
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    text-align: center;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-radius: 6px;     
}

.parent:hover .child, .parent:focus .child {
    
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    text-decoration: none;
}

/*抓按鈕過大的bug*/
.toomuch {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    text-align: center;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-radius: 6px;
    
}

.parent:hover .toomuch, .parent:focus .toomuch{
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    text-decoration: none;
}


/*為手機版設浮動按鈕固定下方*/
@media only screen and (min-width: 0px) and (max-width: 475px){
    .modal {
        overflow: hidden;
    }
    .modal .modal-body {
        height: var(--height);
        overflow: auto;
    }
    
    /*浮動式按鈕*/
    #b_close {
        border-radius: 0px;
        background-color:rgb(110, 97, 226);
        width:100%;
        position:fixed;
        left:0;
        bottom:1px;
      
    }
}








/*大一配色*/
.bg1{background-color: rgba(132, 206, 226,0.86);}
.bg3{background-color:	rgba(255, 243, 162,0.86)}
.bg5{background-color: rgba(96, 189, 173,0.86)}
/*碩一配色*/
.bg2{background-color: rgba(200,195,248,0.86)}
.bg4{background-color: rgba(129,212,239,0.86)}
.bg6{background-color: rgba(226, 224, 224, 0.86)}