/* 这里是导航栏的css样式表 */
    body {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    /* 一级 */
    .nav > ul {
        margin: 0;
        padding: 0;
        display: flex;
    }

    .nav .nav-litem {
        position: relative;
        flex: 0 0 8.3%;
        z-index: 999999;
    }

        .nav .nav-litem > a {
            text-transform: uppercase;
            font-size: 13px;
            color: white;
            text-align: center;
            background-color: #224E9C;
            display: block;
            line-height: 40px;
            transition: .3s;
        }

            .nav .nav-litem > a:hover {
                background-color: #3C6BBF;
                /*rgb(218, 141, 0)*/
            }

        /* 二级菜单 */
        .nav .nav-litem > ul {
            visibility: hidden;
            position: absolute;
            top: 100%;
            transition: all .3s;
            width: 100%;
            padding: 8px 0;
            text-align: center;
            background-color: #3560A9;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
        }

            .nav .nav-litem > ul > li:hover {
                /*background-color: rgb(248, 248, 248);*/
                background-color: #3C6BBF;
            }

            .nav .nav-litem > ul > li > a {
                color: white;
                line-height: 40px;
                display: block;
                /*color: rgb(100, 100, 100);*/
            }

        /* 第一种：下拉 */
        /*.nav .nav-litem:nth-child(1) > ul {
            padding: 0;
            overflow: hidden;
            height: 0px;
            visibility: visible;
        }

        .nav .nav-litem:nth-child(1):hover > ul {
            height: 78px;
            padding: 8px 0;
        }*/

        /* 第二种：上移 */
        /*.nav .nav-litem:nth-child(2) > ul {
            top: 150%;
            opacity: 0;
            visibility: hidden;
        }

        .nav .nav-litem:nth-child(2):hover > ul {
            top: 100%;
            visibility: visible;
            opacity: 0.9;
        }*/

        /* 第三种：淡出 */
        /*.nav .nav-litem:nth-child(3) > ul {
            transition: .5s;
            opacity: 0;
            visibility: hidden;
        }

        .nav .nav-litem:nth-child(3):hover > ul {
            visibility: visible;
            opacity: 1;
        }*/

        /* 第四种：左移 */
        /*.nav .nav-litem:nth-child(4) > ul {
            left: -20%;
            opacity: 0;
            visibility: hidden;
        }

        .nav .nav-litem:nth-child(4):hover > ul {
            left: 0%;
            visibility: visible;
            opacity: 1;
        }*/
        .nav .nav-litem:nth-child(2) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(2):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }
        .nav .nav-litem:nth-child(3) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(3):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }

        .nav .nav-litem:nth-child(4) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(4):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }

        /* 第五种：翻转 */
        .nav .nav-litem:nth-child(5) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(5):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }

        /* 第9种：翻转 */
        .nav .nav-litem:nth-child(9) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(9):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }
        /* 第10种：翻转 */
        .nav .nav-litem:nth-child(10) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(10):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }
        /* 第11种：翻转 */
        .nav .nav-litem:nth-child(11) > ul {
            opacity: 0;
            visibility: hidden;
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
        }

        .nav .nav-litem:nth-child(11):hover > ul {
            visibility: visible;
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }



   
        * {
margin: 0;
padding: 0;
}

.parent {
position: relative;
}
.search2 {
width: 300px;
height: 40px;
border-radius: 18px;
outline: none;
border: 1px solid #ccc;
padding-left: 20px;
position: absolute;
}
.btn {
height: 35px;
width: 35px;
position: absolute;
background: url("../img/mg.png") no-repeat ;
top: 6px;
left: 265px;
border: none;
outline: none;
cursor: pointer;
}