/**
 * @file common/container/recruitment.css
 * @author zhengyuanqing01(zhengyuanqing01@baidu.com)
 */

.recruitment .banner {
    color: #fff;
    width: 100%;
    height: 495px;
    position: relative;
    z-index: 0;
    background: url(../img/recruitment_banner.jpg) 50% -2px no-repeat;
}
    .recruitment .banner .title{
        width: 600px;
        margin: 0 auto;
        height: 60px;
        font-size: 42px;
        text-align: center;
        position: relative;
        top: 140px;
        letter-spacing: 5px;
    }
    .recruitment .banner .desc{
        width: 100%;
        height: 45px;
        font-size: 20px;
        text-align: center;
        position: relative;
        top: 150px;
        opacity: .7;
        letter-spacing: 4px;
    }
    .recruitment .banner .joinLink {
        width: 170px;
        height: 40px;
        margin: 0 auto;
        position: relative;
        top: 170px;
    }
    .recruitment .banner .joinButton {
        width: 170px;
        height: 40px;
        background-color: #1f8eeb;
        margin: 0 auto;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        border: none;
    }

.recruitment .content {
    width: 100%;
    height: 1080px;
    text-align: center;
    position: relative;
    z-index: 0;
    background-color: #ececec;
}
    .recruitment .content .title {
        width: 100%;
        height: 35px;
        font-size: 32px;
        color: #000;
        margin: 0 auto;
        position: relative;
        top: 115px;
        text-align: center;
    }
    .recruitment .content .summary {
        width: 680px;
        height: 20px;
        font-size: 18px;
        letter-spacing: 1px;
        color: rgba(136, 136, 136, 0.6);
        margin: 0 auto;
        position: relative;
        top: 140px;
        font-weight: 600;
    }
     @-webkit-keyframes breathe {
        0% {
            opacity: .1;
        }
        50% {
            opacity: .65;
        }
        100% {
            opacity: .1;
        }
     }
    .recruitment .content .canvas {
        width: 1000px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        top: 180px;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-name: breathe;
        -webkit-animation-duration: 2700ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
    }
    .recruitment .content .image {
        width: 675px;
        height: 440px;
        margin: 0 auto;
        position: relative;
        background: url(../img/recruitment_contentImage.png) no-repeat;
        background-position-x: 10px;
        top: -165px;
    }
    .recruitment .content .desc {
        width: 795px;
        height: 215px;
        line-height: 2;
        margin: 0 auto;
        position: relative;
        top: -120px;
        font-size: 16px;
        color: #2b1212;
        text-indent: 30px;
        text-align: left;
    }
.recruitment .features {
    width: 100%;
    height: 1200px;
    position: relative;
    z-index: 0;
    background: url(../img/recruitment_featuresBg.png) 50% -2px no-repeat;
}
    .recruitment .features .title {
        width: 900px;
        height: 35px;
        line-height: 1;
        text-align: center;
        margin: 0 auto;
        font-size: 32px;
        position: relative;
        top: 120px;
        color: #000;
    }
    .recruitment .features .wrapper {
        width: 990px;
        height: 930px;
        margin: 0 auto;
        position: relative;
        top: 200px;
    }
        @-webkit-keyframes translation0 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(5px, 2px);
            }
            100% {
                transform: translate(-5px, -2px);
            }
        }
        @-webkit-keyframes translation1 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-5px, -4px);
            }
            100% {
                transform: translate(5px, 4px);
            }
        }
        @-webkit-keyframes translation2 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(8px, -3px);
            }
            100% {
                transform: translate(-8px, 3px);
            }
        }
        @-webkit-keyframes translation3 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-4px, 6px);
            }
            100% {
                transform: translate(4px, 6px);
            }
        }
        @-webkit-keyframes translation4 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-6px, -3px);
            }
            100% {
                transform: translate(6px, 3px);
            }
        }
        .recruitment .features .wrapper .feature0 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 65px;
            left: 65px;
            display: inline-block;
            background: url(../img/recruitment_feature0.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation0;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature1 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 235px;
            left: -450px;
            display: inline-block;
            background: url(../img/recruitment_feature1.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation1;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature2 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 255px;
            left: -260px;
            display: inline-block;
            background: url(../img/recruitment_feature2.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation2;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature3 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 285px;
            left: 100px;
            display: inline-block;
            background: url(../img/recruitment_feature3.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation3;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature4 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 450px;
            left: -315px;
            display: inline-block;
            background: url(../img/recruitment_feature4.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation4;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature5 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 50px;
            left: 185px;
            display: inline-block;
            background: url(../img/recruitment_feature5.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation2;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature6 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 70px;
            left: 525px;
            display: inline-block;
            background: url(../img/recruitment_feature6.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation3;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature7 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 210px;
            left: 155px;
            display: inline-block;
            background: url(../img/recruitment_feature7.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation4;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature8 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 240px;
            left: 385px;
            display: inline-block;
            background: url(../img/recruitment_feature8.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation0;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .recruitment .features .wrapper .feature9 {
            width: 265px;
            height: 130px;
            position: relative;
            top: 240px;
            left: 563px;
            display: inline-block;
            background: url(../img/recruitment_feature9.png) 50% no-repeat;
            background-size: contain;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: translation1;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
.recruitment .partner {
    width: 100%;
    height: 935px;
    color: #fff;
    background-color: #303030;
    margin-top: -8px;
}
    .recruitment .partner .title {
        width: 350px;
        height: 60px;
        font-size: 56px;
        text-align: center;
        margin: 0 auto;
    }
    .recruitment .partner .title {
        width: 350px;
        height: 60px;
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        margin: 0 auto;
        position: relative;
        top: 75px;
    }
    .recruitment .partner .summary {
        width: 375px;
        height: 30px;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        margin: 0 auto;
        position: relative;
        top: 70px;
        color: #d4d4d4;
    }
    .recruitment .partner .partnerTypes {
        width: 885px;
        height: 235px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        position: relative;
        top: 120px;
    }
        .recruitment .partner .partnerType {
            width: 425px;
            height: 235px;
            text-align: center;
            background-color: #434547;
            box-shadow: 0 0 40px #000;
        }
            .recruitment .partner .name {
                width: 150px;
                height: 80px;
                line-height: 80px;
                margin: 0 auto;
                font-size: 22px;
                font-weight: 600;
            }
            .recruitment .partner .desc {
                width: 355px;
                height: 150px;
                margin: 0 auto;
                font-size: 16px;
                color: #d4d4d4;
                line-height: 1.5;
            }
    .recruitment .partner .partnerFunctions {
        width: 885px;
        height: 340px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
        position: relative;
        top: 145px;
        background-color: #434547;
        box-shadow: 0 0 40px #000;
    }
        .recruitment .partner .partnerFunction {
            width: 200px;
            height: 340px;
            box-sizing: border-box;
        }
            .recruitment .partner .partnerFunction .avatar0 {
                width: 122px;
                height: 122px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                top: 50px;
                background: #808284 url(../img/recruitment_avatar0.png) no-repeat 40% 50% ;
                background-size: 50%;
            }
            .recruitment .partner .partnerFunction .avatar0:hover,
            .recruitment .partner .partnerFunction .avatar1:hover,
            .recruitment .partner .partnerFunction .avatar2:hover,
            .recruitment .partner .partnerFunction .avatar3:hover {
                background-color: #1f8eeb;
            }
            .recruitment .partner .partnerFunction .avatar1 {
                width: 122px;
                height: 122px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                top: 50px;
                background: #808284 url(../img/recruitment_avatar1.png) no-repeat 50% ;
                background-size: 50%;
            }
            .recruitment .partner .partnerFunction .avatar2 {
                width: 122px;
                height: 122px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                top: 50px;
                background: #808284 url(../img/recruitment_avatar2.png) no-repeat 50% ;
                background-size: 50%;
            }
            .recruitment .partner .partnerFunction .avatar3 {
                width: 122px;
                height: 122px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                top: 50px;
                background: #808284 url(../img/recruitment_avatar3.png) no-repeat 50% ;
                background-size: 50%;
            }
            .recruitment .partner .partnerFunction .name {
                width: 120px;
                height: 30px;
                line-height: 30px;
                margin: 0 auto;
                text-align: center;
                font-size: 20px;
                position: relative;
                top: 75px;
            }
            .recruitment .partner .partnerFunction .desc {
                width: 200px;
                height: 50px;
                line-height: 30px;
                margin: 0 auto;
                text-align: center;
                font-size: 14px;
                color: #c5c5c5;
                position: relative;
                top: 95px;
            }
    .recruitment .partner .joinLink {
        width: 170px;
        height: 40px;
        margin: 0 auto;
        position: relative;
        top: 185px;
    }
    .recruitment .partner .joinButton {
        width: 170px;
        height: 40px;
        background-color: #1f8eeb;
        margin: 0 auto;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        border: none;
    }