/* #region**************** 一、头部 **************** */

        header {
            z-index: 100;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 24px 0px;
            transition: 0.5s ease;
            background-color: rgb(6, 90, 158)
        }

        header .hinner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* background-color: #17793d; */
            /* 测试 宽度换成图片占屏宽,直接弹到边界对齐 */
            width: 80%;
            margin: 0 auto;
        }


        header .brand {
            color: #fff;
            font-size: 1.6em;
        }

        /* logo 设置大小 */

        header .brand img {
            width: 1em;
            background-image: url(./images/logo-w.png);
            transform: scale(2.5);
        }

        header .navigation {
            z-index: 100;
            position: relative;
        }

        header .navigation-items a {
            position: relative;
            color: #fff;
            font-size: 1em;
            font-weight: 900;
            text-decoration: none;
            margin-right: 30px;
            transition: 0.3s ease;
        }

        /* 下面展开的 导航需要也设置一下底边  */
        header .navigation .navigation-items a::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            background-color: #fff;
            width: 0%;
            /* w为0，hover出来↑，↓3px的下边框 */
            height: 3px;
            transition: 0.3s ease;
        }

        header .navigation .navigation-items a:hover::before {
            width: 100%;
        }


        /* #endregion 头部结束 */


        /* #region**************** 三、响应式 **************** */
        @media (max-width:890px) {
            header {
                /* 控制台调试 得来 */
                padding: 17px 0.0em;
            }

            .menu-btn {
                padding-top: 10px;
                padding-right: 90px;
            }

            header .navigation {
                position: relative;
                display: none;
            }

            /* 中部 展开缩小的导航栏 */
            header .navigation.active {
                position: fixed;
                /* 全屏中间 */
                width: 100%;
                height: 100vh;
                top: 0;
                left: 0;
                display: flex;
                /* 居中 */
                justify-content: center;
                align-items: center;
                /* 背景暗下来突出导航部分 */
                background: rgba(5, 5, 5, 0.5);
            }


            header .navigation .navigation-items {
                background: #fff;
                width: 600px;
                max-width: 600px;
                margin: 20px;
                padding: 40px;
                display: flex;
                /* 切换主轴方向 */
                flex-direction: column;
                align-items: center;
                border-radius: 6px;
                box-shadow: 0, 6px 35px rgba(2, 2, 2, 0.2)
            }


            /* 给展开的 导航再设置a的样式，下底边也要重新设置，上面清除了 */
            header .navigation.active .navigation-items a {
                color: #222;
                font-size: 1.2em;
                margin: 20px;
            }

            header .navigation .navigation-items a::before {
                background-color: #222;
                /* font-size: 1.2em; */
                height: 5px;
                bottom: -0.4em;
            }

            /* 导航按钮 */
            header .menu-btn {
                opacity: 1;
                background: url(./images/menu.png)no-repeat;
                background-size: 40px;
                background-position: center;
                width: 40px;
                height: 40px;
                cursor: pointer;
                transition: .26s ease;
                /* html 里嵌入js */
                z-index: 101;
                padding: 0;
            }

            .menu-btn.active {
                background: url(./images/close.png) no-repeat;
                color: #fff;
                background-size: 40px;
                background-position: center;
            }

            /* 有调好的图片再细调响应式 */
        }

        /* #endregion */