@charset "UTF-8";


/*===CSS重置（CSS Reset）===*/
*{margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html,body{width: 100%;height: 100%;font-family: "微软雅黑","Microsoft YaHei UI";font-size: 14px;}
body{line-height: 1;}
ul,li,ol,dl,dt,dd{list-style: none;}
a{color: inherit;border: none;}
a:hover{border: none;}
a:link,a:active,a:visited{text-decoration: none;border: none;}
img{border: none;}
.clearfix{clear: both;zoom: 1;}
.clearfix:after{display: block;}

.content{
    width: 80%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

/*===header===*/
header{
    width: 100%;
    height: 51px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid transparent;
    background: transparent;
}
header.fix{
    border-color: #eeeff2;
    background: rgba(255,255,255,.95);
}
header .content{
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
header .content .logo{
    color: #fff;
    font-size: 22px;
    font-weight: bolder;
    line-height: 50px;
}
header.fix .content .logo{color: #5cadff;}
header .content nav{flex: 1}
header .content .user-box{
    height: 100%;
    padding: 0 20px;
    color: #fff;
    line-height: 50px;
    background: #5cadff;
}


/*===footer===*/
footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbbec4;
    line-height: 40px;
    padding: 20px 0;
    border-top: 1px solid #dddee1;
    background: #f8f8f9;
}