@charset "utf-8";
/*------  media框架CSS B ------*/
.media-frame{
    display: table;
    width: 100%;
    margin-top: 20px;
}
.media-aside, 
.media-content{
    display: table-cell;
    vertical-align: top;
}
.media-aside{
    width: 210px;
}
.media-aside .personal-block{
    width: 210px;
}
.media-aside .personal-block figure img{
    width: 100%;
}
/*如果使用者之視窗寬度介於 768px ~ 991px，將會再載入這裡的 CSS。*/
@media screen and (max-width: 768px) {
    .media-aside{
        width: 50px;
    }
    .media-aside .personal-block{
        width: 50px;
    }
}
/*------ media框架CSS E ------*/

/*------ 個人資料左側 架構 B ------*/
.asideNav > ul{
    padding: 0px;
}
.asideNav > ul li {
    list-style-type: none;
    display: block;
}
.asideNav > ul > li {
    border-bottom: 1px solid #FFF;
}
.asideNav > ul > li > a, 
.asideNav > ul > li div {
    display: block;
    font-weight: 700;
    color: #000;
    background-color: #EEE;
    padding: 15px 18px 15px 15px;
}
.asideNav > ul > li:hover > a, 
.asideNav > ul > li.active > a, 
.asideNav > ul > li:hover div, 
.asideNav > ul > li.active div {
    background: #F2F9FF none repeat scroll 0% 0%;
    color: #FE5621;
    outline: 0px none;
    text-decoration: none;
}
/*------ 個人資料左側 架構 E ------*/


/*------ 個人照片hover CSS B ------*/
.personal-block {
    position: relative;
}
.personal-block figure figcaption{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #000;
    color: #FFF;
    opacity: 0;
    text-align: center;
}
.personal-block figure:hover figcaption{
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    opacity: 1;
}
/*------ 個人照片hover CSS E ------*/

/*------ 列表hover CSS B ------*/
.asideNav li .hand{
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.asideNav li:hover .hand{
    opacity: 1;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
/*------ 列表hover CSS E ------*/