* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

body {
    background     : url("../imgs/bg.png") no-repeat center 0 fixed;
    background-size: auto;
}

.beian {
    position       : absolute;
    text-align     : center;
    width          : 130px;
    left           : 50%;
    margin-left    : -65px;
    font-size      : 12px;
    text-decoration: none;
    color          : rgba(0, 0, 0, .9);
    bottom         : 2px;
}

.navigation-bar {
    height    : 50px;
    width     : 100%;
    background: linear-gradient(#00000060, #ffffff60);

    top: 0;

    li {
        a {
            width          : 100%;
            min-width      : 100px;
            height         : 50px;
            line-height    : 50px;
            display        : block;
            color          : white;
            padding        : 0 25px;
            text-decoration: none;
            font-size      : 15px;
            display        : flex;
            align-items    : center;
            justify-content: left;

            img {
                width       : 20px;
                height      : 20px;
                margin-right: 8px;
            }
        }

        a:hover {
            background-color: #eeeeee80;
        }
    }

    ul {
        list-style-type: none;
    }

    .ul1 {
        // margin-left: 10%;
        margin  : 0 auto;
        width   : fit-content;
        padding : 0;
        overflow: hidden;
        display : flex;

        li:hover ul {
            display: block;
        }
    }

    .ul2 {
        @keyframes mymove {
            0% {
                transform: translateY(-100%);
                opacity  : 0;
            }

            100% {
                transform: translateY(0);
                opacity  : 1;
            }
        }

        animation        : mymove 0.5s;
        width            : auto;
        background-color : #fff;
        border-radius    : 5px;
        position         : absolute;
        display          : none;
        overflow         : hidden;

        a {
            color     : #000;
            text-align: left;
        }
    }
}


.searsh {
    margin-top: 3.6rem;
    text-align: center;
    position  : relative;

    input {
        position        : absolute;
        width           : 8rem;
        height          : .675rem;
        left            : 50%;
        margin-left     : -3.875rem;
        font-size       : .25rem;
        padding-left    : .1875rem;
        padding-right   : .1875rem;
        background      : rgba(255, 255, 255, .9);
        // background   : rgb(255, 255, 255);
        border          : #00000000 1px solid;
        border-radius   : .0875rem;
        outline         : 0 solid #00000000;
        box-shadow      : 5px 5px 10px 5px rgba(0, 0, 0, .2);
        animation       : myshadow1 .3s;
    }

    // 盒子阴影动画1
    @keyframes myshadow1 {
        0% {
            box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .2);
        }

        100% {
            box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, .2);

        }
    }

    // 盒子阴影动画2
    @keyframes myshadow2 {
        0% {
            box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, .2);
        }

        100% {
            box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .2);
        }
    }

    input:hover {
        animation : myshadow2 .3s;
        box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .2);
    }

    .sugList {
        margin-top : .7875rem;
        position   : absolute;
        left       : 50%;
        margin-left: -3.875rem;

        ul {
            background     : #fff;
            width          : 8rem;
            box-shadow     : 5px 5px 10px 5px rgba(0, 0, 0, .2);
            border-radius  : .0875rem;
            margin         : 0 auto;
            list-style-type: none;
        }

        li {
            background   : fff;
            border-radius: .0875rem;
            height       : .725rem;
            line-height  : .725rem;
            font-size    : .22rem;
            padding-left : .1875rem;
            text-align   : left;
            user-select  : none;

        }

        li:hover {
            background   : #ededed !important;
            border-radius: .0875rem;
            cursor       : pointer;
        }
    }

}

.lbls {
    width      : fit-content;
    margin     : 0 auto;
    margin-top : 5.5rem;
    user-select: none;

    .line {
        display: flex;
    }

    a {
        margin         : .1rem;
        width          : 2.0625rem;
        text-align     : center;
        font-size      : .25rem;
        text-decoration: none;
        color          : #fff;
    }

    a:link {
        color: #fff;
    }

    a:visited {
        color: #fff;
    }

    a:hover {
        color: #fff;
    }

    p {
        width           : 1.5rem;
        height          : 1.5rem;
        line-height     : 1.4375rem;
        background-color: #df5f47;
        border-radius   : 50%;
        margin          : 0 auto;
        margin-bottom   : .0625rem;
        font-size       : .5rem;
    }

    @keyframes myscale {
        0% {
            transform: scale(1.01);
        }

        100% {
            transform: scale(1);
        }

    }

    p:hover {
        animation : myscale .2s;
        box-shadow: 0 0 5px 3px rgba(9, 208, 243, 0.3);
    }

    span {
        color    : #000;
        font-size: .225rem;

    }



}