body {
    font-size: 10px;
}

main {
    background: #ffffff;
}

.headerImg {
    height: 3.41rem;
    width: 100%;
}

.content {
    width: 12rem;
    height: 6.91rem;
    margin: 0 auto;
    display: flex;
   
}

.sectionHeader {
    display: flex;
    align-items: center;
    margin-top: 1.1rem;
    margin-bottom: 0.54rem;
}

.nextheaderText {
    font-size: 0.35rem;
    color: #343434;
}

.nextheaderText2 {
    font-size: 0.35rem;
    font-weight: 200;
    color: #666666;
    margin-left: 0.1rem;
    margin-right: 0.06rem;
}

.nextheaderText3 {
    font-size: 0.18rem;
    color: #206ca3;
}

.nextheaderText3_BOM {
    font-size: 0.18rem;
    color: #343434;
}

.contentLeftBox {
    width: 50%;
    font-size: 0.35rem;
    font-weight: 400;
    color: #ffffff;
}

.imgBox {
    width: 5rem;
    position: relative;
}

.contentImgBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topBox {
    width: 3.25rem;
    height: 1.64rem;
    background: url('../images/hrImg/onTop@2x.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0.84rem;
    z-index: 9;
    transition: linear 3s;
}

.leftBox {
    position: absolute;
    z-index: 8;
    width: 1.63rem;
    height: 3.25rem;
    background: url('../images/hrImg/onleft@2x.png') no-repeat;
    background-size: 100% 100%;
    top: 0.86rem;
    transition: linear 2s;
}

.rightBox {
    position: absolute;
    width: 1.63rem;
    height: 3.25rem;
    background: url('../images/hrImg/onRight@2x.png') no-repeat;
    background-size: 100% 100%;
    top: 0.86rem;
    left: 3.3rem;
    transition: linear 4s;
}

.downBox {
    position: absolute;
    width: 3.25rem;
    height: 1.63rem;
    background: url('../images/hrImg/onDown@2x.png') no-repeat;
    background-size: 100% 100%;
    left: 0.84rem;
    top: 3.33rem;
    transition: linear 1s;
}

.contentImg {
    width: 0.88rem;
    height: 0.49rem;
}

.contentBox {
    font-size: 0.2rem;
    text-align: center;
    font-weight: bold;
    color: #0e6eb2;
    position: absolute;
    left: 1.9rem;
    top: 2rem;
    transition: linear 2s;
}

.contentRightText {
    font-size: 0.16rem;
    font-weight: 400;
    color: #333333;
    line-height: 0.3rem;
    margin-bottom: 0.3rem;
}

.bottomBox {
    background: #f5f5f5;
    margin-bottom: 1rem;
}

.bottomContent {
    width: 12rem;
    margin: 0 auto;
    padding-top: 1.08rem;
}

.bottomHeader {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0.98rem;
}

.bottomHeader span {
    font-size: 0.2rem;
    padding-bottom: 0.21rem;
    cursor: pointer;
}

.bottomHeader span:hover {
    color: #0e6eb2;
}

.bottomImgBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.bottomImg {
    width: 2.57rem;
    height: 2.97rem;
}

.hoverBox1 {
    border-bottom: 0.01rem solid #0e6eb2;
}

.bottomImgHoverBox2 {
    display: none;
}

.bottomImgHoverBox3 {
    display: none;
}

.bottomImgHoverBox4 {
    display: none;
}

.bottomImgHoverBox5 {
    display: none;
}

.onRight {
    position: absolute;
    display: none;
    top: 0.5rem;
    right: 0;
}

.onTop {
    position: absolute;
    display: none;
    top: 0.4rem;
    left: 0.4rem;
}

.onDown {
    position: absolute;
    display: none;
    top: 3.85rem;
    right: 0.5rem;
}

.onDown p {
    text-align: end;
}

.onLeft {
    position: absolute;
    top: 2.5rem;
    display: none;
    left: 0.4rem;
}

.rightBox:hover .imgBox>.onRight {
    display: block;
}

.onhoverBox {
    font-size: 0.16rem;
    font-weight: 400;
    color: #0e6eb2;
}



.contentLeftBox {
    position: relative;
}

.talents {
    position: absolute;
    left: 0;
    height: 7rem;
    width: 4.53rem;
    height: 4.53rem;
    margin-top: .7rem;
    /* top: 50%; */
    /* margin-top: -2.5rem; */
    /* height: 6.06rem;
    width: 6.06rem; */
}

.talentstop,
.talentsleft,
.talentsright,
.talentsbot {
    position: absolute;
    transition: all .5s;
}

.talentstop label,
.talentsleft label,
.talentsright label,
.talentsbot label {
    display: block;
    font-size: .4rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
}

.talentstop label,
.talentsbot label {
    line-height: 1.53rem;
}

.talentsright label,
.talentsleft label {
    line-height: 3.03rem;
}

.talentstop p,
.talentsleft p,
.talentsright p,
.talentsbot p {
    font-size: .16rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
    display: none;
}

.talentstop p {
    display: block;
    color: #53A4DD;
}

.talentsleft p {
    display: none;
    color: #42CFD4;
}

.talentsright p {
    display: none;
    color: #8E77CF;
}

.talentsbot p {
    display: none;
    color: #0E6EB2;
}

.talentstop p {
    position: absolute;
    top: 32%;
    left: -.6rem;
}

.talentsright p {
    position: absolute;
    top: -.8rem;
    left: 32%;
}

.talentsbot p {
    position: absolute;
    top: 55%;
    right: -.6rem;
}

.talentsleft p {
    position: absolute;
    bottom: -.8rem;
    left: 32%;
}

.talentscenter {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 1.53rem;
    top: 1.53rem;
    /* background: green; */
}

.talentscenter img {
    margin: .2rem auto .15rem;
    display: block;
}

.talentscenter p {
    font-size: .24rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #0E6EB2;
    text-align: center;
}

.talentscenter p:last-child {
    font-size: .18rem;
    font-weight: normal;
}

.talentsleft,
.talentsright {
    width: 1.53rem;
    height: 3.03rem;
}

.talentstop,
.talentsbot {
    width: 3.03rem;
    height: 1.53rem;
}

.talentstop {
    background: url('../images/hrImg/hrtop2.png') no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: .75rem;
    z-index: 11;
}

.talentstop {
    background: url('../images/hrImg/hrtop1.png') no-repeat;
    background-size: 100% 100%;
    z-index: 15;
}

.talentstop span {
    display: block;
    position: absolute;
    height: .04rem;
    background: #53A4DD;
    top: 50%;
    right: 1rem;
    z-index: -1;
    transition: all .5s;
}

.talentstop span {
    width: 2.6rem;
}

.talentstop span::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: .05rem solid #53A4DD;
    position: absolute;
    left: 0rem;
    top: -.03rem;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    z-index: -2;
}

.talentsright {
    background: url('../images/hrImg/hrright2.png') no-repeat;
    background-size: 100% 100%;
    right: 0rem;
    top: .75rem;
    z-index: 8;
}

.talentsright span {
    display: none;
    position: absolute;
    width: .04rem;
    background: #8E77CF;
    left: 50%;
    bottom: 1rem;
    z-index: -1;
    transition: all .5s;
    height: 2.6rem;
}

/* .talentsright:hover span {
} */

.talentsright span::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: .05rem solid #8E77CF;
    position: absolute;
    left: -.03rem;
    top: 0rem;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    z-index: -2;
}

.talentsright:hover {
    background: url('../images/hrImg/hrright1.png') no-repeat;
    background-size: 100% 100%;
    z-index: 15;
}

.talentsbot {
    background: url('../images/hrImg/hrbot2.png') no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    left: .75rem;
    z-index: 9;
}

.talentsbot:hover {
    background: url('../images/hrImg/hrbot1.png') no-repeat;
    background-size: 100% 100%;
    z-index: 15;
}

.talentsbot span {
    display: none;
    position: absolute;
    height: .05rem;
    background: #0E6EB2;
    top: 50%;
    left: 1rem;
    z-index: -1;
    width: 2.6rem;
    transition: all .5s;
    /* width: 2.6rem; */
}

.talentsbot span::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: .05rem solid #0E6EB2;
    position: absolute;
    bottom: -.02rem;
    right: -.01rem;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    z-index: -2;
}

/* .talentsbot span {
} */

.talentsleft {
    background: url('../images/hrImg/hrleft2.png') no-repeat;
    background-size: 100% 100%;
    left: 0rem;
    top: .75rem;
    z-index: 10;
}

.talentsleft:hover {
    background: url('../images/hrImg/hrleft1.png') no-repeat;
    background-size: 100% 100%;
    z-index: 15;
}

.talentsleft span {
    display: block;
    position: absolute;
    width: .05rem;
    background: #42CFD4;
    left: 50%;
    top: 1rem;
    z-index: -1;
    transition: all .5s;
    /* height: 2.6rem; */
    /* display: none; */
}

.talentsleft span::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: .05rem solid #42CFD4;
    position: absolute;
    bottom: 0;
    left: -.03rem;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    z-index: -2;
}

.talentsleft span {
    display: none;
    height: 2.6rem;
}
.contentRightBox{
  width: 50%;
}