html, body {font-size: 0;padding: 0;margin: 0;}
#top-area {position: fixed;left: 0;top: 0;width: 100%;height: 80px;z-index: 9;}
#top-flex {width: 100%;margin: auto;height: 100%;display: flex;align-items: center;background-color: #55899ff0;color: #333;box-shadow: 0 0 5px #fff;font-size: 3vw;}
#top-flex>.top-item {height: 36px;line-height: 36px;}
#top-flex>.top-item.logo {padding: 0 10px;height: 30px;}
#top-flex>.top-item.btn-item {width: 16%;text-align: center;}
#top-flex>.top-item.btn-item>div {cursor: pointer;display: inline-block;padding: 0 2px;}
#top-flex>.top-item.btn-item>div:hover {color: #eee;}
#top-flex>.top-item.btn-item>div:active {color: #fff;}
#top-flex>.top-item.btn-item.active>div {border-bottom: 5px solid #fff;color: #fff;}
#body {width: 100%;margin: auto;padding-top: 80px;position: relative;}

@media(min-width: 960px) {
    #top-flex {width: 960px;font-size: calc(960px / 43);}
    #body {width: 960px;}
    #top-flex>.top-item {height: 50px;line-height: 50px;}
    #top-flex>.top-item.logo {padding: 0 20px;height: 50px;}
    #top-flex>.top-item.btn-item>div {padding: 0 5px;}
    #top-flex>.top-item.btn-item {width: 15%;}
}