section.banner-outer{height:50px}.banner{height:50px;background-color:#fff;box-shadow:0 0 3px #999;transition:all .4s}.banner.fixed{position:fixed;left:0;top:-50px;right:0;z-index:10000;opacity:.8}.banner.showing{top:0}.banner .m-btn{display:none}.banner .banner-inner{width:1170px;margin:0 auto;height:50px;line-height:50px;display:flex;justify-content:space-between;flex-wrap:nowrap;font-size:16px}.banner .banner-inner .title,.banner .banner-inner .link{flex-shrink:0;cursor:pointer;transition:all .3s;color:#333;text-decoration:none}.banner .banner-inner .title{font-weight:700}.banner .banner-inner .title:hover{text-shadow:0 0 4px #aaa}.banner .banner-inner .links{flex-basis:100%;display:flex;justify-content:flex-end}.banner .banner-inner .link{margin-left:10px;padding:0 10px;position:relative}.banner .banner-inner .link::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:4px;background:#1e9bd4;width:0%;transition:all .3s}.banner .banner-inner .link:hover::after{width:100%}@media screen and (max-width: 1170px){.banner .banner-inner{width:800px}}@media screen and (max-width: 800px){.banner{height:auto;position:fixed;top:0;left:0;right:0;z-index:10000}.banner.fixed{top:0;transform:translateY(-100%)}.banner.showing{transform:translateY(0)}.banner .banner-inner{width:auto;padding:0 1.2rem;justify-content:space-between;background:#fff;height:auto}.banner .banner-inner .links{flex-direction:column;flex-basis:auto;padding-top:50px}.banner .banner-inner .links.open .link{display:block}.banner .banner-inner .links.open .m-btn::before{top:15px;transform:translateX(-50%) rotateZ(45deg)}.banner .banner-inner .links.open .m-btn::after{top:15px;transform:translateX(-50%) rotateZ(-45deg)}.banner .banner-inner .link{display:none;padding:0}.banner .banner-inner .m-btn{display:block;width:30px;height:30px;position:absolute;right:10px;top:10px}.banner .banner-inner .m-btn::before{content:"";position:absolute;width:20px;height:2px;background-color:#333;top:10px;left:50%;transform:translateX(-50%);transition:all .3s}.banner .banner-inner .m-btn::after{content:"";position:absolute;width:20px;height:2px;background-color:#333;top:20px;left:50%;transform:translateX(-50%);transition:all .3s}}
