*{margin:0;padding:0}
body,html{background:#fff;height:100%;width:100%}
body{display:flex;flex-wrap:wrap;flex-direction:column}
.appcontainer{display:flex;width:100%;height:50%;flex-grow:1;justify-content:center;align-items:center;flex-wrap:wrap;
    /* background:#ebebeb; */
    margin:auto;}
.app{width:24%;height:148px;color: #626262;border: 1px solid #DBDBDB;margin-top: -1px;margin-left: -1px;}
.app:hover{background: linear-gradient(180deg, rgba(103,103,103,0.05), rgba(103,103,103,0.3));}

.flex{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;flex-wrap:wrap}
.minguologo{background-image:url(/static/apps/img/minguo.svg)}
.onlinetaglogo{background-image:url(/static/apps/img/taglogo.png);background-repeat:no-repeat;background-position:center}
.zaizaologo{background-image:url(/static/apps/img/zaizaologo.png);background-repeat:no-repeat;background-position:center}
.qklogo{background-image:url(/static/apps/img/journallogo.png);background-repeat:no-repeat;background-position:center}
.bzlogo{background-image:url(/static/apps/img/baozhilogo.png);background-repeat:no-repeat;background-position:center}
.tsglogo{background-image:url(/static/apps/img/librarylogo.png);background-repeat:no-repeat;background-position:50% 50%}
.chachonglogo{background-image:url(/static/apps/img/chachonglogo.png);background-repeat:no-repeat;background-position:50% 50%}
.personlogo{background-image:url(/static/apps/img/person.png);background-repeat:no-repeat;background-position:50% 50%}
.ysllogo{background-image:url(/static/apps/img/ysl.png);background-repeat:no-repeat;background-position:50% 50%}
.tdlogo{background-image:url(/static/apps/img/ysl.png);background-repeat:no-repeat;background-position:50% 50%}
.beikelogo{background-image:url(/static/apps/img/shikelogo.svg);background-repeat:no-repeat;background-position:50% 50%}
.shumulogo{background-image:url(/static/apps/img/shumu.png);background-repeat:no-repeat;background-position:50% 50%}
.redlogo{background-image:url(/static/apps/img/red.png);background-repeat:no-repeat;background-position:50% 50%}
.jflogo{background-image:url(/static/apps/img/jf.png);background-repeat:no-repeat;background-position:50% 50%}
.checkpersonlogo{background-image:url(/static/apps/img/xiuli.png);background-repeat:no-repeat;background-position:50% 50%}
.newspaperlogo{background-image:url(/static/apps/img/xiuli.png);background-repeat:no-repeat;background-position:50% 50%}
.yonglelogo{background-image:url(/static/apps/img/yongle.png);background-repeat:no-repeat;background-position:50% 50%}
.yllogo{background-image:url(/static/apps/img/yongle.png);background-repeat:no-repeat;background-position:50% 50%}
.renwulogo{background-image:url(/static/apps/img/person2.png);background-repeat:no-repeat;background-position:50% 50%}


.appname{text-align:center;width:100%;}
.gray{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray;opacity:.7}
.active{color:#9F5858;font-weight: bold;}
.active:hover{background: linear-gradient(180deg, rgba(201,118,118,0.05), rgba(160,77,77,0.3));}
.app{cursor:pointer}
.appname::before{content:"";display:inline-block;vertical-align:middle;line-height:normal}
.logodiv{width:100%;height:32%;background:#9f5858}
.flex-column{display:flex;flex-direction:column;justify-content:center;align-items:center}
.logoimage{width:90px;height:124px;background:url(/static/apps/img/platlogo.png) no-repeat center center;background-size:cover}
.slogan{margin:20px auto;width:300px;height:40px;background:url(/static/apps/img/platformname.png) no-repeat center center;background-size:100% 100%;background-position:center;}
.foot{width:100%;height:60px;min-height:20px;background:#d0c6bd}
.username{color:#fff}
#logout{color:#fff;cursor:pointer}
#logout:hover{color:red}
.logo{width:90px;height:90px;background-repeat:no-repeat;background-position:center}
@media screen and (min-width:1200px) and (max-width:1400px){
    .logo{width:110px;height:110px;}
}
@media screen and (min-width:340px) and (max-width:501px){.circle{display:none}
    .logo{width:80px;height:80px;}
}

@media screen and (max-width:340px){.circle{display:none}
    .logo{width:60px;height:60px;}
}