.baseHeader {
    position  : fixed;
    top       : 0px;
    left      : 0px;
    width     : 100%;
    z-index   : 100;
    transition: all .5s;
    height    : 80px;

    &.showUp {
        transform: translateY(0px);
    }

    &.showDown {
        transform: translateY(-100px);
    }

    .m {
        width     : 100%;
        padding   : 0px 20px;
        box-sizing: border-box;
        display   : flex;
        flex-wrap : wrap;
    }

    .logo {
        margin  : 22px 0px;
        position: relative;
        z-index : 2;
        height  : 36px;
        position: relative;
        width   : 160px;

        img {
            position: absolute;
            top     : 0px;
            left    : 0px;
            display : block;
            height  : 100%;
        }
    }

    .nav {
        position       : relative;
        z-index        : 2;
        flex           : 1;
        text-align     : center;
        display        : flex;
        cursor         : pointer;
        justify-content: flex-end;

        .item {
            width   : 10vw;
            position: relative;

            .hh {
                display      : block;
                font-size    : 18px;
                line-height  : 80px;
                // background: rgba(0,0,0,0.1);
            }

            .mm {
                background    : #fff;
                box-shadow    : 0px 10px 10px 10px rgba(0, 0, 0, 0.05);
                color         : #777;
                // padding    : 0px 0px 30px 0px;
                font-size     : 18px;
                line-height   : 60px;
                transition    : all .5s;
                visibility    : hidden;
                opacity       : 0;
                display       : none;

                .li {
                    display   : block;
                    transition: all 0.5s;

                    &:hover {
                        background: #e3e3e3;
                        color     : #333;
                    }
                }
            }


            &::after {
                transition : all 0.5s;
                z-index    : 3;
                content    : ' ';
                position   : absolute;
                top        : 60px;
                left       : 50%;
                display    : block;
                height     : 3px;
                width      : 0px;
                margin-left: 0px;

            }

            &:hover,
            &.true {

                // background: #fff;
                // box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.05);s
                & ::after {
                    width      : 20px;
                    margin-left: -10px;
                }
            }

            &:hover {


                .mm {
                    display   : block;
                    visibility: visible;
                    opacity   : 1;
                }
            }
        }
    }

    .language {
        position       : relative;
        z-index        : 2;
        margin         : 25px 0px;
        width          : 200px;
        display        : flex;
        align-items    : center;
        justify-content: flex-end;
        height         : 30px;
        display        : none;

        .s1 {
            transition   : all 0.5s;
            padding      : 0px 10px;
            margin       : 0px 10px;
            line-height  : 24px;
            border-radius: 2px;
            cursor       : pointer;

            &:hover {
                background: rgba(255, 255, 255, 0.8);
                color     : #333;
            }
        }
    }

    .but_sj {
        display: none;
    }

    .use_sj {
        display: none;
    }

    // 黑色logo模式
    &.typeHei {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.20);

        .logo {
            .h {
                opacity: 1;
            }

            .b {
                opacity: 0;
            }
        }

        .nav {
            color: #333;

            .item {
                &::after {
                    background: #194ac3;
                }
            }
        }

        .language {
            color: #333;
        }

        .but_sj {
            color: #333;
        }
    }

    // 白色logo模式
    &.typeBai {
        box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.20);

        .logo {
            .h {
                opacity: 0;
            }

            .b {
                opacity: 1;
            }
        }

        .nav {
            color: #fff;

            .item {
                &::after {
                    background: #fff;
                }
            }
        }

        .language {
            color: #fff;
        }

        .but_sj {
            color: #fff;
        }

    }

    .menu_class {
        position  : fixed;
        top       : 0px;
        left      : 0px;
        width     : 100vw;
        background: rgba(0, 0, 0, 0.7);
        z-index   : 10;

        transition: all .5s;


        .ww {
            width     : 240px;
            height    : 100vh;
            background: #fff;
            transition: all .5s;
            overflow  : hidden;
            overflow-y: auto;

            .top {
                width        : 100%;
                position     : sticky;
                top          : 0px;
                left         : 0px;
                z-index      : 1;
                padding      : 10px 0px;
                border-bottom: 1px solid #e3e3e3;
                display      : flex;
                background   : #fff;

                .lo {

                    img {
                        height : 20px;
                        display: block;
                        padding: 5px 10px;

                    }
                }

                .close {
                    text-align   : right;
                    padding-right: 20px;
                    flex         : 1;
                    line-height  : 30px;
                    font-size    : 20px;
                }
            }

            .nn {
                padding: 20px 0px;

                .item {
                    display    : block;
                    padding    : 10px 10px 10px 30px;
                    font-size  : 20px;
                    line-height: 40px;
                }
            }
        }


        &.true {

            visibility: visible;
            opacity   : 1;

            .ww {
                transform: translateX(0px);
            }
        }

        &.false {
            visibility: hidden;
            opacity   : 0;

            .ww {
                transform: translateX(-1000px);
            }
        }
    }

    @media screen and (max-width: 1000px) {
        height: 50px;

        .m {
            padding: 0px 10px;
        }

        .logo {
            height: 24px;
            margin: 13px 0px;
            flex  : 1;
        }

        .nav {
            display: none;
        }

        .but_sj {
            display    : block;
            height     : 100%;
            margin-left: 20px;
            font-size  : 14px;
            line-height: 50px;
            text-align : right;
            padding    : 0px 15px 0px 5px;
        }

        .use_sj {
            display      : block;
            height       : 30px;
            border-radius: 3px;
            margin-top   : 10px;
            padding      : 0px 10px;
            background   : #19be6b;
            color        : #fff;
            font-size    : 12px;
            line-height  : 30px;
        }
    }
}




.baseFooter {
    position: relative;
    width   : 100%;


    .top {
        padding:60px 0px;
        position           : relative;
        z-index            : 2;
        background-image   : url("/img/3L_bg.png");
        background-repeat  : no-repeat;
        background-size    : cover;
        background-position: center center;
        text-align: center;
        .m {
            .text {
                color         : rgba(255, 255, 255, 0.9);
                font-size     : 28px;
                padding-bottom: 30px;
                //font-family   : "webFontAlibabaChaoxi" !important;
                font-weight: bold;
            }

            .but {
                height       : 50px;
                margin       : 0px auto;
                width        : 240px;
                line-height  : 50px;
                text-align   : center;
                border-radius: 60px;
                color        : rgba(255, 255, 255, 0.9);
                border       : 1px solid rgba(255, 255, 255, 0.4);
                font-size    : 20px;
                cursor       : pointer;
                transition   : all 0.5s;

                &:hover {
                    background: rgba(255, 255, 255, 0.7);
                    color     : rgba(0, 0, 0, .95);
                }
            }
        }
    }

    .center {
        padding        : 60px 30px;
        display        : flex;
        justify-content: center;
        align-items    : center;

        .logo {
            width:420px;
            flex:none;
            img {
                width  : 200px;
                display: block;
            }

            .tel {
                padding-top: 20px;
                line-height: 24px;
                font-size: 14px; font-weight: bold;
            }
        }

        .link {
            flex           : auto;
            padding        : 0px 30px;
            text-align     : center;
            display        : flex;
            flex-wrap      : wrap;
            justify-content: center;
            align-items    : center;

            .dd {
                display  : flex;
                flex-wrap: wrap;
            }

            .li {
                padding      : 0px 14px;
                border-radius: 4px;
                ;
                margin       : 5px 5px;
                line-height  : 40px;
                height       : 40px;
                // background: #fff;
                font-size    : 16px;

                &:hover {
                    background: #2C53B4;
                    color     : #fff;
                }
            }
        }

        .lianxi {
            img {
                width  : 100px;
                display: block;
                margin : 0px auto;
            }
        }
    }

    .bottom {
        padding   : 20px 0px;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        text-align: center;
        font-size : 14px;

        .a1 {
            margin-left: 10px;

            &:hover {
                color: #2C53B4;
            }
        }

        .a2 {
            margin-left: 20px;

            &:hover {
                color: #2C53B4;
            }
        }
    }


    .goTop {
        cursor          : pointer;
        z-index         : 10;
        position        : fixed;
        bottom          : 50px;
        right           : 50px;
        height          : 50px;
        width           : 50px;
        background-color: #2C53B4;
        box-shadow      : 0 0 6px rgba(0, 0, 0, .12);
        display         : flex;
        align-items     : center;
        justify-content : center;

        transition: all .5s;

        .icon {
            width           : 30px;
            height          : 30px;
            background-image: url("/img/goTop.png");
            background-size : cover;
        }

        &:hover {
            background: #272727;
        }
    }



    @media screen and (max-width: 900px) {
        padding:0px;
        .top{
            padding:30px 0px;
            .m {
                .text {
                    font-size     : 18px;
                    padding-bottom: 20px;
                }
    
                .but {
                    height       : 40px;
                    width:100%;
                    max-width        : 240px;
                    line-height  : 40px;
                    border-radius: 60px;
                    font-size    : 16px;
                }
            }
        }
        .center{
            padding        : 20px 0px;
            display: block;
            .logo {
                width:auto;
                text-align: center;
                img {
                    margin:0px auto;
                    width  : 200px;
                }
                padding-bottom:20px;
            }
    
            .link {
                border-top:1px solid #e3e3e3;
                padding        :20px 0px;
                text-align     : center;
                display        : flex;
                flex-wrap      : wrap;
                justify-content: center;
                align-items    : center;
    
                .dd {
                    display  : flex;
                    flex-wrap: wrap;
                }
    
                .li {
                    padding      : 0px 10px;
                    border-radius: 4px;
                    margin       : 5px 5px;
                    line-height  : 30px;
                    height       : 30px;
                    // background: #fff;
                    font-size    : 14px;
    
                    &:hover {
                        background: #2C53B4;
                        color     : #fff;
                    }
                }
            }
    
            .lianxi {
                img {
                    width  : 100px;
                    display: block;
                    margin : 0px auto;
                }
            }
        }
    }

    @media screen and (max-width: 400px) {


        .goTop {

            bottom: 10px;
            right : 10px;
            height: 40px;
            width : 40px;

            &:hover {
                background: #2C53B4;
            }
        }
    }
}



.baseUseBox {
    position       : fixed;
    top            : 0px;
    left           : 0px;
    z-index        : 101;
    width          : 100%;
    height         : 100%;
    // background  :rgba(0,0,0,0.8);
    background     : #f5f7fa;
    display        : flex;
    align-items    : center;
    justify-content: center;
    visibility     : visible;
    opacity        : 1;
    transition     : all .5s;

    &.false {
        visibility: hidden;
        opacity   : 0;

        .wrap {
            transform: translateY(1000px);
        }
    }

    .wrap {
        width     : 800px;
        // 
        // 
        position  : relative;
        overflow  : hidden;
        box-sizing: border-box;

    }

    .useBox {

        .close {
            width      : 60px;
            height     : 60px;
            position   : fixed;
            top        : 40px;
            right      : 40px;
            font-size  : 20px;
            background : #414141;
            color      : #fff;
            text-align : center;
            line-height: 60px;
            transition : all .5s;
            cursor     : pointer;

            &:hover {
                transform: scale(1.1, 1.1);
            }
        }

        .title1 {
            font-size  : 40px;
            color      : rgba(0, 0, 0, 0.9);
            line-height: 60px;
        }

        .title2 {
            font-size  : 14px;
            line-height: 50px;
            color      : rgba(0, 0, 0, 0.7);
        }

        .input {
            width     : 100%;
            height    : 70px;
            box-sizing: border-box;
            background: #fff;
            overflow  : hidden;
            margin-top: 20px;
            padding   : 10px 20px;
            border    : 1px solid #e3e3e3;

            input {
                line-height: 50px;
                font-size  : 20px;
                width      : 100%;
                height     : 50px;
                display    : block;
            }
        }

        .bottom {
            margin-top: 20px;
            display   : flex;

            .but {
                transition : all .5s;
                cursor     : pointer;
                text-align : center;
                line-height: 70px;
                font-size  : 20px;

                &:hover {
                    opacity: 0.8;
                }
            }

            .but1 {
                flex        : 2;
                margin-right: 20px;
                background  : #2d8cf0;
                color       : #fff;
            }

            .but2 {
                flex      : 1;
                background: rgba(0, 0, 0, 0.1);
            }
        }
    }

}



@media screen and (max-width: 900px) {
    .baseUseBox {
        display: block;

        .wrap {
            width     : 100%;
            padding   : 20px 15px;
            box-sizing: border-box;

        }

        .useBox {

            .close {
                width      : 40px;
                height     : 40px;
                line-height: 40px;
                top        : 20px;
                right      : 15px;
            }

            .title1 {
                font-size  : 24px;
                line-height: 40px;
            }

            .title2 {
                font-size  : 14px;
                line-height: 20px;
            }

            .input {
                height : 50px;
                padding: 0px 20px;

                input {
                    font-size: 16px;
                }
            }

            .bottom {
                .but {
                    line-height: 50px;
                    font-size  : 16px;
                }
            }
        }

    }
}