@charset "utf-8";
/* CSS Document */


#staff{margin: 0 auto; padding: 60px 0;}
#staff>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#staff>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#staff>.display{margin: 0 auto; padding: 50px 0;}
#staff>.display .list>ul>li{display: block;float: left; width: 22.75%; margin-bottom: 3%; margin-right:3%; transition: all .35s; }
#staff>.display .list>ul>li:nth-child(4n){ margin-right: 0;}
#staff>.display .list>ul>li>a{display: block;}
#staff>.display .list>ul>li>a .img{ position: relative; overflow: hidden;}
#staff>.display .list>ul>li>a .img:after{position: absolute;z-index: 10; left: 0;bottom: 0;width: 100%;height: 0; background: rgba(1,83,139,.4); content: ''; transition: all .6s;}
#staff>.display .list>ul>li>a .img>img{width: 100%;height: auto; transition: all 1s;}
#staff>.display .list>ul>li>a .box{padding: 20px 5px;}
#staff>.display .list>ul>li>a .box>.tit{ height: 50px; font-size: 1.8rem;color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#staff>.display .list>ul>li>a .box>.time{ display: none; background: #f7f7f7; margin-top: 10px; padding: 8px 16px; font-size: 1.4rem; color: #999;}
#staff>.display .list>ul>li>a:hover .tit{color: rgba(1,83,139,1);}
#staff>.display .list>ul>li>a:hover .img>img{transform: scale(1.1);}
#staff>.display .list>ul>li>a:hover .img:after{height: 100%;}



@media only screen and (max-width: 1360px) {

    #staff>.display .list>ul>li{width: 48%; margin-right: 0; }
    #staff>.display .list>ul>li:nth-child(even){ float: right;}

}


@media only screen and (max-width: 980px) {

    #staff{padding: 30px 0;}
    #staff>.title{padding: 10px 0;}
    #staff>.title>h3{ font-size: 3.2rem;}
    #staff>.display .list>ul>li>a .box>.tit{font-size: 1.8rem;}

}


@media only screen and (max-width: 640px) {

    #staff>.title>h3{ font-size: 2.8rem;}

    #staff>.display .list>ul>li{width: 100%; float: none; }
    #staff>.display .list>ul>li:nth-child(even){ float: none;}
    #staff>.display .list>ul>li>a .box>.tit{ font-size: 1.6rem; height: auto; -webkit-line-clamp: none;}


}

@media only screen and (max-width: 520px) {

    #staff>.title>h3{ font-size: 2.4rem;}
    #staff>.display{padding:30px 0;}



}