.navigation,
.navigation *,
.footer,
.footer *{box-sizing: border-box;}

.navigation{position: relative;height: 80px;background: #fff;}
.navigation .home{position: absolute;left: 20px; top: 20px;width: 354px;height: 40px;background: url(../img/logo.png) no-repeat center/cover;}
.navigation .menu{position: absolute;top: 0;right: 20px;}
.navigation .menu>li{float: left;position: relative;}
.navigation .link>a{display: block;height: 80px;line-height: 80px;padding: 0 25px;color: #737373;font-size: 16px;border-bottom: solid 4px transparent;transition: padding ease 0.2s;-webkit-transition: padding ease 0.2s;}
.navigation .link.act>a,
.navigation .link:hover>a{color: #17a2b8;border-bottom-color: #17a2b8;}
.navigation .link:hover ul{display: block;}
.navigation .link ul{display: none;position: absolute;top: 80px;left: 0;right: 0;z-index: 100;padding: 10px 0;background: #17a2b8;}
.navigation .link li a{display: block;height: 34px;line-height: 34px;font-size: 14px;color: #ffffff;padding-left: 20px;}
.navigation .link ul.text-center a{padding: 0;}
.navigation .link li a:hover{background: #17a2b8;}
.navigation .account{font-size: 0;}
.navigation .account>a{display: inline-block;width: 80px;height: 38px;line-height: 36px;font-size: 16px;color: #17a2b8;border: solid 1px #17a2b8;text-align: center;margin: 21px 0 0 0;margin-right: 10px;}
.navigation .account>a:first-child{color:#59c0ae;border-color:#59c0ae;background:#f1fcfa;}
.navigation .account>a:last-child{margin-right: 0;}
.navigation .user{position: relative;margin-top: 20px;margin-left: 20px;}
.navigation .user .head{position: relative;cursor: pointer;}
.navigation .user .head span{position: absolute;top: 0;left: -5px;height: 18px;line-height: 18px;padding: 0 10px;color: #fff;background: #ff3526;border-radius: 9px;-webkit-border-radius: 9px;z-index: 2;}
.navigation .user .head img{position: absolute;top: 0;left: 0;width: 40px;height: 40px;border-radius: 100%;-webkit-border-radius: 100%;z-index: 1;}
.navigation .user .head p{color: #17a2b8;font-size: 14px;height: 40px;line-height: 40px;padding: 0 20px 0 60px;background: url(../img/user-drop.png) no-repeat right center;max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.navigation .user ul{display: none;position: absolute;background: #fff;top: 40px;right: 0;border: solid 1px #eee;border-radius: 0 0 3px 3px;z-index: 100;}
.navigation .user li{width: 150px;height: 40px;line-height: 40px;padding-left: 30px;background: url(../img/arrow-right.png) no-repeat right 20px center;}
.navigation .user li a{color: #737373;font-size: 14px}
.navigation .user li:not(.quit) a:hover{color: #17a2b8;text-decoration: underline;}
.navigation .user li.quit{background: #f5f5f5;text-align: center;padding: 0;}
.navigation .user li.quit a{color: #ff5a4e;}
.navigation .user:hover>a{background-color: #fff;border-color: #EEEEEE;}
.navigation .user:hover ul{display: block;}
.navigation .newsHead {vertical-align:middle;position:relative;height:80px;}
.navigation .newsHead a{background:url(../images/icon-msg.png) no-repeat;width:28px;height:27px;vertical-align:middle;margin:28px 25px 20px 25px;text-align:center;padding:0}
.navigation .newsHead .newsNum{display:none;position:absolute;top:18px;right:20px;width:25px;height:25px;border-radius:100%;background:#f0564e;color:#fff;font-size:12px;border:2px solid #fff;text-align:center;line-height:20px;}
.navigation .newsHead .news-msg{position:absolute;top:72px;left:0;background:#117a8b;color:#fff;border-radius:25px;height:32px;line-height:32px;font-size:12px;width:100%;text-align:center;z-index:100;visibility:hidden;}
.navigation .newsHead .news-msg:before{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #117a8b;position:absolute;top:-10px;left:32px;content:'';}
.navigation .newsHead:hover a,.navigation .newsHead.act{border:0;border-bottom-color:transparent;}
/*.navigation .newsHead:hover .news-msg{visibility:visible;}*/
@media only screen and (max-width: 1400px){
    .navigation .home{left:20px;}
    .navigation .link>a{padding: 0 20px;}
    .navigation .user{margin-left: 20px;}
    .navigation .link li a{padding-left: 0;text-align: center;}
    .navigation .newsHead a{margin:28px 22px 20px 22px;padding:0;}
    .navigation .newsHead .newsNum{right:12px;}
    .navigation .newsHead .news-msg:before{left:28px;}
}