.recruit-content-tab-on{
   
}
.recruit-content-tab-box { width: 100%; border-bottom: 1px solid #ededed; background-color: #fff; z-index: 99; }
.recruit-content-tab { max-width: 1400px; margin: 0 auto; display: flex;}
.recruit-content-tab div { border-bottom: 3px solid rgba(000, 000, 000, 0); cursor: pointer; border-right: 1px solid #ededed; width: 50%; padding: 24px 0; text-align: center; font-size: 25px; color: #737373; position: relative; }
.recruit-content-tab div:hover span { animation: tab-xian 0.5s ease-in-out; animation-fill-mode:forwards;}
.recruit-content-tab-on { color: #31c4b8 !important; border-bottom: 3px solid #31c4b8 !important; }
.recruit-content-tab-on2 { color: #31c4b8 !important; }

.tab-icon {    
    width: 39px;
    height: 39px;
	display: inline-block; 
    position: relative;
    top: 8px;  
    transform: scale(0.85);
}
.zp { 
    background: url("../images/icon/aboutus_1.png") no-repeat; 
}
.xx { 
    background: url("../images/icon/aboutus2.png") no-repeat; 
}

.recruit-tab-box {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bottomLine{
    position: absolute;
    left: 1200px;
    bottom:0;
    background-color: #fff;
    transition: all 0.3s ease;
    height: 4px;
    width: 42px;
    border-radius: 10px;
}

.recruit-tab-on { box-shadow:0px 0px 5px rgb(49 196 184) !important; }
.recruit-tab { cursor: pointer; width: 255px; height: 230px; text-align: center; background-color: #fff; box-shadow: 0 0px 5px rgba(000, 000, 000, 0.1); border-radius: 6px; }
.recruit-tab img { margin-top: 60px; }
.recruit-tab p { margin-top: 20px; color: #363636; font-size: 22px; }
.recruit-post-box { max-width: 1400px; margin: 0 auto; }
.recruit-post-qb { cursor: pointer; width: 68px; height: 34px; margin-top: 30px; text-align: center; line-height: 34px; border-radius: 6px; background-color: #31c4b8; color: #fff; font-size: 20px; }
.recruit-post-tab-box { 
    display: grid;
    grid-gap: 27px;
    grid-template-columns: auto auto auto auto;
    padding: 10px 0; 
    margin-top: 30px;
}
.recruit-post-tab { background-color: #fff; cursor: pointer; border: 1px solid #dbdbdb; height: 150px; border-radius: 6px; }
.recruit-post-tab-title { color: #534c4c; font-size: 22px; margin: 38px 22px 0 22px; }
.recruit-post-tab-des { margin: 24px 22px 0 22px; color: #8f8f8f; font-size: 14px; }
.recruit-post-tab:hover { background: linear-gradient(to bottom right,#41cfc1, #62e1d6); color: #fff !important; }
.recruit-post-tab:hover .recruit-post-tab-title { color: #fff; }
.recruit-post-tab:hover .recruit-post-tab-des { color: #fff; }
.recruit-tab:hover>img { 

    animation-name: rubberBand;
    -webkit-animation-name: rubberBand;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
      /*永久播放*/
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    /*动画曲线*/
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    /* animation:tiantiao1 0.5s ease-in 1 forwards,
    tiantiao2 0.2s ease-out 0.5s 1 forwards,
    tiantiao3 0.2s ease-in 0.7s 1 forwards,
    tiantiao4 0.15s ease-out 0.9s 1 forwards,
    tiantiao5 0.15s ease-in 1.05s 1 forwards; */
}
.culture-column-des {max-width: 1400px; margin: 0px auto; font-size: 22px; color: #7f7f7f; line-height: 40px; }
.timeline-row:hover .timeline-time { color: #44c8bb !important; }
.timeline-row:hover img{ animation:timeline 0.5s ease-in 1 forwards; transform:translateY(-40px); }
.recruit-post-list-on { box-shadow: 0px 0px 5px rgb(49 196 184); }

@keyframes tab-xian{
    0%{
        width: 0%;
        border-bottom: 0;
        }
    100%{
        width: 100%;    
        /* border-bottom: 3px solid #31c4b8 ; */
        }
    }

@keyframes timeline{
    0%{
        transform:translateY(0px);
        }
    100%{
        transform:translateY(-10px);
    }
    }

 @keyframes tiantiao1{
    0%{
        transform:translateY(-50px);
        }
    100%{
        transform:translateY(0);}
    }
@keyframes tiantiao2{
    0%{
        transform:translateY(0);}
    100%{
        transform:translateY(-50px);}
    }
@keyframes tiantiao3{
    0%{
        transform:translateY(-50px);}
    100%{
        transform:translateY(0);}
    }
@keyframes tiantiao4{
    0%{
        transform:translateY(0px);}
    100%{
        transform:translateY(-50px);}
    }
@keyframes tiantiao5{
    0%{
        transform:translateY(-50px);}
    100%{
        transform:translateY(0);}
    }
