/* 就业数据 */
.v-job-data {
    display: flex;
    justify-content: space-between;
}
.v-job-data>div {
    width: 290px;
    height: 188px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #f3f6fa, #fcfdfe);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 30px;
    text-align: center;
}
.v-job-data>div .p1 {
    font-weight: '黑体';
    font-size: 24px;
    line-height: 90px;
    border-bottom: 1px dashed #b1b1b1;
}

.v-job-data>div .p1 span {
    font-size: 50px;
    font-family: '黑体';
}

.v-job-data>div .p2 {
    font-size: 24px;
    line-height: 30px;
    color: #2f2f2f;
    margin-top: 20px;
}

.v-job-data>div:nth-of-type(1) {
    background: #f2f9ff;
}

.v-job-data>div:nth-of-type(2) {
    background: #f7f2ff;
}

.v-job-data>div:nth-of-type(3) {
    background: #fff8f2;
}

.v-job-data>div:nth-of-type(4) {
    background: #f2fffb;
}

.v-job-data>div:nth-of-type(1) .p1 {
    color: #db5176;
}

.v-job-data>div:nth-of-type(2) .p1 {
    color: #7c3edf;
}

.v-job-data>div:nth-of-type(3) .p1 {
    color: #eb7510;
}

.v-job-data>div:nth-of-type(4) .p1 {
    color: #0f9d71;
}
/* 就业信息 */
.table_wraper {
    border-radius: 10px;
    font-size: 24px;
    overflow: hidden;
    box-shadow: rgba(4, 0, 0, 0.08) 0px 19px 40px;
}
.table_wraper .tableHead {
    width: 100%;
    height: 69px;
    line-height: 69px;
    font-size: 24px;
    padding-left: 30px;
}
.table_wraper ul {
    padding: 0 30px;
}

.table_wraper .bd {
    color: #333;
    background: #fefeff;
    font-size: 20px;
}

.flex_box {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

}
.table_wraper .bd li {
    border-bottom: 1px solid #f1f1f5;
}

.table_wraper .flex_box li {
    box-sizing: border-box;
}

.table_wraper .flex_box li:nth-of-type(1) {
    width: 185px;
}

.table_wraper .flex_box li:nth-of-type(2) {
    width: 185px;
}

.table_wraper .flex_box li:nth-of-type(3) {
    width: 320px;
}

.table_wraper .flex_box li:nth-of-type(4) {
    width: 300px;
}

.table_wraper li:nth-of-type(5) {
    flex: 1;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
    position: relative;
    color: #fff
}

.table_wraper .bd .flex_box li:nth-of-type(5) .mask {
    display: inline-block;
    width: 20px;
    height: 6px;
    background: #1f7fef;
    position: absolute;
    bottom: -3px;
    right: 0;
}

.table_wraper .bd .flex_box li {
    line-height: 70px;
}
/* 标题组件2 */
.v-title2 {
    text-align: center;
    min-width: 1200px;
    overflow: hidden;
}
.v-title2 .step-title {
    height: 40px;
    font-size: 93px;
    font-weight: bold;
    line-height: 73px;
    overflow: hidden;
}

.v-title2 .main-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #000;
}
.v-title2 .icon{
    font-size: 12px;
}
.v-title2 .small-title{
    font-size: 18px;
    color: #686868;
    margin-top: 5px;
}

body{
    padding-bottom: 70px;
}
.swiper-banner .cover_img{
    width: 1200px;
    height: 540px;
    margin: 0 auto;
    position: relative;
}
.swiper-banner .cover1 img{
    position: absolute;
    right: 100px;
    top: 45px;
}
.swiper-banner .cover2 img{
    position: absolute;
    right: 350px;
    top: 45px;
}
.white{
    color:white !important
}
.flex-box {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.mode-wrapper .mode:nth-child(n+2){
    display: none;
}
/* 

/* sec1 banner */
.sec1{
    position: relative;
}
/* sec2 banner下第一块  */
.sec2 {
    background: #fbfbfb;
    border-bottom: 1px solid #ececec;
}

.sec2 ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0 20px 0;
    letter-spacing: 1px;
}

.sec2 ul li.line {
    height: 51px;
    width: 1px;
    background: #bcbcbc;
}

.sec2 ul li .desc1 {
    font-size: 28px;
    color: #323232;
}

.sec2 ul li .desc2 {
    margin-top: 5px;
    font-size: 14px;
    color: #5e5e5e;
}

/* sec2 banner下第一块  end */

/* 通用标题 */
.mode_title_box {
    text-align: center;
}

.mode_title_box div {
    display: inline-block;
    vertical-align: middle;
    font-size: 28px;
    color: #171717;
}
.mode_title_box div span {
    color: #3a64d1;
    font-weight: bold;
}
.mode_title_box .icon{
    color: #9c9c9c;
    font-size: 12px;
    vertical-align: middle;
}

/* mode1 */
/* 板块1 升级背景*/
/* 板块1-1 编程语言之王 */

.mode_1_1_c {
    width: 1200px;
    height: 650px;
    background: url('../images/mode1-1.webp') no-repeat;
    position: relative;
}

.mode_1_1_c .circle {
    position: absolute;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.mode_1_1_c .circle:nth-child(-n+7) {
    border: 1px dashed #3a64d1;
    background: #fcfdff;
}

.mode_1_1_c .circle:nth-child(n+8):nth-child(-n+10) {
    background: #3a64d1;
    color: #fff;
}

.mode_1_1_c .circle:nth-child(n+11):nth-child(-n+13) {
    background: #45d8ac;
    color: #fff;
}

.mode_1_1_c .circle:nth-child(n+14):nth-child(-n+17) {
    background: #db5176;
    color: #fff;
}

.mode_1_1_c .circle:nth-of-type(1) {
    top: 50px;
    left: 90px;
}

.mode_1_1_c .circle:nth-of-type(2) {
    top: 275px;
    left: 0px;
}

.mode_1_1_c .circle:nth-of-type(3) {
    top: 180px;
    left: 315px;
}

.mode_1_1_c .circle:nth-of-type(4) {
    top: 510px;
    left: 250px;
}

.mode_1_1_c .circle:nth-of-type(5) {
    bottom: 20px;
    left: 645px;
}

.mode_1_1_c .circle:nth-of-type(6) {
    bottom: 250px;
    right: 125px;
}

.mode_1_1_c .circle:nth-of-type(7) {
    top: 65px;
    right: 110px;
}

.mode_1_1_c .circle:nth-of-type(8) {
    top: 70px;
    left: 420px;
}

.mode_1_1_c .circle:nth-of-type(9) {
    top: 200px;
    right: 250px;
}

.mode_1_1_c .circle:nth-of-type(10) {
    bottom: 15px;
    left: 410px;
}

.mode_1_1_c .circle:nth-of-type(11) {
    bottom: 175px;
    left: 150px;
}

.mode_1_1_c .circle:nth-of-type(12) {
    top: 85px;
    right: 425px;
}

.mode_1_1_c .circle:nth-of-type(13) {
    bottom: 110px;
    right: 40px;
}

.mode_1_1_c .circle:nth-of-type(14) {
    top: 210px;
    left: 150px;
}

.mode_1_1_c .circle:nth-of-type(15) {
    top: 20px;
    right: 270px;
}

.mode_1_1_c .circle:nth-of-type(16) {
    bottom: 65px;
    right: 270px;
}

.mode_1_1_c .circle:nth-of-type(17) {
    top: 175px;
    right: 5px;
}

.mode_1_1_c .circle:nth-of-type(even) {
    animation: mode1_1 3s linear infinite normal;
    -webkit-animation: mode1_1 3s linear infinite normal;
}

.mode_1_1_c .circle:nth-of-type(odd) {
    animation: mode1_1 3s linear 3s infinite normal;
    -webkit-animation: mode1_1 3s linear 1.5s infinite normal;
}

.mode_1_1_c .desc {
    position: absolute;
    width: 338px;
    height: 338px;
    border-radius: 50%;
    border: 1px dashed #3a64d1;
    top: 176px;
    left: 430px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 36px;
    justify-content: center;
    text-align: center;
}

.mode_1_1_c .desc span {
    color: #3a64d1;
    font-weight: bold;
}

.mode_1_1_c .animatioin_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: mode1_1_r 6s linear infinite normal;
    -webkit-animation: mode1_1_r 6s linear infinite normal;
}

.mode_1_1_c .animatioin_circle {
    position: absolute;
    margin: auto;
    top: -10.5px;
    left: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3a64d1;
}

@keyframes mode1_1 {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.0);
    }
}

@-webkit-keyframes mode1_1 {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.0);
    }
}

@keyframes mode1_1_r {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 板块1-1 编程语言之王 end*/

/* 板块1-2 互联网的发展 */
.mode_1_2_wrapper {
    height: 1238px;
    background: url('../images/mode1-2-bg.webp') center no-repeat;
    text-align: center;
    /* position: relative; */
}
.mode_1_2_wrapper .img-tj{
    position: relative;
}
.mode_1_2_wrapper .img-tj .bor_wrapper{
    position: absolute;
    top:0;
    right: 0;
    width: 1100px;
    height: 461px;
    box-sizing: border-box;
    padding: 0 51px 0 43px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li{
    width: 45px;
    height: 100%;
    position: relative;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li>div{
    position: absolute;
    left: 0;
    bottom: 0;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li .num{
    width: 75px;
    margin-left: -15px;
    font-size: 23px;
    text-align: center;
    color: #fff;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li .bar{
    width: 45px;
    margin-top: 10px;
    background: #45d8ac;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(1) .bar{
    height: 377px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(2) .bar{
    height: 391px;
    background: #ffea00;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(3) .bar{
    height: 367px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(4) .bar{
    height: 158px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(5) .bar{
    height: 126px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(6) .bar{
    height: 115px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(7) .bar{
    height: 58px;
}
.mode_1_2_wrapper .img-tj .bor_wrapper li:nth-of-type(8) .bar{
    height: 32px;
}

.mode_1_2_c {
    width: 1200px;
    height: 100%;
    position: relative;
}

.mode_1_2_title {
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 28px;
    vertical-align: middle;
    margin-top: 50px;
}
.mode_1_2_title .icon{
    font-size: 12px;
    vertical-align: middle;
}
.mode_1_2_skill {
    width: 1200px;
    height: 410px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 50px 0px 30px 60px;
}

.mode_1_2_skill li {
    width: 33.333%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-align: left;
}
.mode_1_2_skill li:hover .icon-wrapper{
    transform: rotateY(180deg);
}
.mode_1_2_skill li .icon-wrapper {
    width: 118px;
    height: 118px;
    background: url("../images/mode1-2-icon3.webp") center no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s linear;
}
.mode_1_2_skill li .icon-wrapper .icon{
    font-size: 40px;
    text-align: center;
    color: #3a64d1;
}
.mode_1_2_skill li .skill-title {
    font-size: 20px;
    color: #3a64d1;
}

.mode_1_2_skill li .skill-desc {
    font-size: 16px;
    line-height: 24px;
    color: #878787;
}

/* 板块1-2 互联网的发展 end*/

/* 板块1-3 岗位需求 */
.mode_1_3_wrapper {
    background: #eeeff2;
}

.mode_1_3_w {
    border-radius: 0 0 10px 10px;
    width: 1200px;
    height: 530px;
    background: #ffffff;
    box-shadow: -10px 30px 30px -20px #b4bbcc;
    position: relative;
    /* overflow: hidden; */
}
.mode_1_3_c{
    width: 1200px;
    height: 530px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 35px 100px;
    position: relative;
    overflow: hidden;
}
.mode_1_3_w p {
    font-size: 22px;
    line-height: 36px;
    color: #4e4e4e;
    text-align: center;
    margin-top: 30px;
}

.mode_1_3_w p span {
    color: #f86846;
    font-weight: bold;
}

.mode_1_3_w .mask {
    width: 1200px;
    height: 24px;
    position: absolute;
    top: -12px;
    left: 0;
    background: url("../images/mode1-3-mask.webp") no-repeat;
    background-size: cover;
}

.mode_1_3_w .line {
    width: 1px;
    height: 467px;
    background: #c0c6e2;
}

/* 板块1-3 岗位需求 end*/


/* 板块1-4 全薪升级 */
.mode_1_4_c {
    display: flex;
    justify-content: space-between;
}

.mode_1_4_c li {
    width: 386px;
    height: 265px;
    border-radius: 20px;
    box-shadow: 0 10px 24px -10px rgba(39, 82, 193, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 110px;
    transition: all 0.3s linear;
}
.mode_1_4_c li:hover{
    transform: translateY(-10px);
}

.mode_1_4_c li .icon-box {
    width: 129px;
    height: 129px;
    text-align: center;
    line-height: 120px;
    box-sizing: border-box;
    border: 1px dashed #3a64d1;
    border-radius: 50%;
    padding: 5px;
    position: absolute;
    margin: auto;
    top: -45px;
    left: 0;
    right: 0;
    background: #3a64d1;
    background-clip: content-box;
}
.mode_1_4_c li .icon-box .icon{
    font-size: 60px;
    color: #fff;
}

.mode_1_4_c li .desc1 {
    font-size: 24px;
    color: #353535;
}

.mode_1_4_c li .desc1 span {
    font-weight: bold;
    color: #3a64d1;
}

.mode_1_4_c li .line {
    width: 56px;
    height: 1px;
    background: #3a64d1;
    margin-top: 15px;
}

.mode_1_4_c li .desc2 {
    margin-top: 15px;
    font-size: 18px;
    line-height: 30px;
    color: #545454;
    text-align: center;
}

/* 板块1-4 全薪升级 end */
/* 板块1 升级背景*/

/* mode2 */
/* 专业介绍 */
/* 板块2-1 升级迭代史*/

.mode_2_1_title {
    width: 220px;
    height: 46px;
    line-height: 46px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 23px;
    background: #3a64d1;
    color: #fff;
    font-size: 22px;
    text-align: center;
}

/* 板块2-1 升级迭代史 轮播*/
.mode_2_1 .swiper-box {
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
    position: relative;
}

.mode_2_1 .swiper-upgrade .swiper-slide {
    height: 152px;
    box-sizing: border-box;
    display: flex;
}

.mode_2_1 .swiper-upgrade .swiper-slide img {
    margin-right: 15px;
}

.mode_2_1 .swiper-upgrade .swiper-slide .desc1 {
    color: #2b2b2b;
    font-size: 24px;
    line-height: 36px;
}

.mode_2_1 .swiper-upgrade .swiper-slide .desc2 {
    color: #a2a2a2;
    font-size: 20px;
    line-height: 36px;
    font-weight: 400;
    vertical-align: middle;
}

.mode_2_1 .swiper-upgrade .swiper-slide .desc2::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4970d4;
    vertical-align: middle;
    margin-right: 10px;
}

.mode_2_1 .swiper-box .swiper-button-next,
.mode_2_1 .swiper-box .swiper-button-prev {
    width: 20px;
    height: 32px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.mode_2_1 .swiper-box .swiper-button-prev {
    left: 0;
    background:none;
}
.mode_2_1 .swiper-box .icon{
    font-size: 30px;
    color: #9b9b9b;
}

.mode_2_1 .swiper-box .swiper-button-next {
    right: 0;
    background:none;
}


/* 板块2-1 升级迭代史 轮播 end */

/* 板块2-1 轮播 关联年份 */
.mode_2_1 .upgrade-years {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    margin-top: 40px;
}

.mode_2_1 .upgrade-years li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mode_2_1 .upgrade-years li .circle {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #9b9b9b;
    padding: 5px;
    background: #9b9b9b;
    background-clip: content-box;
    cursor: pointer;
}

.mode_2_1 .upgrade-years li p {
    font-size: 22px;
    color: #5e5e5e;
    margin-top: 10px;
}

.mode_2_1 .upgrade-years li.upgradeActive .circle {
    border: 1px solid #3a64d1;
    background: #3a64d1;
    background-clip: content-box;
}

/* 板块2-1 轮播 关联年份 end*/

/* 板块2-1 大牛*/
.mode_2_1 .daniel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mode_2_1 .daniel .box1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.mode_2_1 .daniel .daniel-content {
    box-sizing: border-box;
    border: 1px dashed #4970d4;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 34px -10px rgba(39, 82, 193, .5);
}

.mode_2_1 .daniel .box1>div {
    width: 590px;
    height: 79px;
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #070707;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
}

.mode_2_1 .daniel .box1>div span {
    color: #5e5e5e;
    font-size: 22px;
}
.mode_2_1 .daniel .box1 .icon{
    position: absolute;
    display: inline-block;
    font-size: 120px;
    right: 5px;
    top: 50px;
    color: #f3f6ff;
}
.mode_2_1 .daniel .arrow .icon{
    color: #3a64d1;
    font-size: 55px;
}

.mode_2_1 .daniel .box2 {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 22px;
    color: #070707;
    line-height: 36px;
}

.mode_2_1 .daniel .box2 span {
    font-weight: bold;
}

/* 板块2-1 大牛 end*/
/* 板块2-1 升级迭代史 end*/

/* 板块2 通用样式 */
.mode_public_2 {
    display: flex;
    justify-content: space-between;
    background: #fff;
}

.mode_public_2 .left,
.mode_public_2 .right {
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 10px 24px -14px rgba(39, 82, 193, .5);
}

.mode_public_2 .left {
    width: 900px;
    border: 1px dashed #4970d4;
    padding: 20px;
}

.mode_public_2 .p1 {
    font-size: 24px;
    line-height: 55px;
}

.mode_public_2 .p2 {
    font-size: 20px;
    line-height: 36px;
    color: #757575;
    vertical-align: middle;
}

.mode_public_2 .p2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.mode_public_2 .left .p1 {
    color: #3a64d1;
}

.mode_public_2 .right .p1 {
    color: #fff;
}

.mode_public_2 .left .p2 {
    color: #757575;
}

.mode_public_2 .right .p2 {
    color: #fff;
}

.mode_public_2 .left .p2::before {
    background: #3a64d1;
}

.mode_public_2 .right .p2::before {
    background: #fff;
}

.mode_public_2 .left table {
    width: 100%;
    background: #d8e0f6;
    margin-top: 15px;
}

.mode_public_2 .left table td {
    border: 2px solid #fff;
    box-sizing: border-box;
}

.mode_public_2 .left table .c1 {
    width: 154px;
    text-align: center;
    font-size: 24px;
    color: #3a64d1;
}

.mode_public_2 .left table .c2,
.mode_public_2 .left table .c3,
.mode_public_2 .left table .c4,
.mode_public_2 .left table .c5,
.mode_public_2 .left table .c6,
.mode_public_2 .left table .c7 {
    font-size: 16px;
    color: #242833;
    text-align: center;
    line-height: 24px;
}

.mode_public_2 .left table .c2 {
    width: 472px;
    text-align: left;
    padding: 8px 0 5px 10px;
}

.mode_public_2 .left table .c3 {
    width: 123px;
}

.mode_public_2 .left table .c5 {
    width: 118px;

}

.mode_public_2 .left table .c6 {
    width: 375px;
    text-align: left;
    padding: 8px 0 5px 10px;
}

.mode_public_2 .left table .c7 {
    text-align: left;
    padding: 8px 0 5px 10px;
}

.mode_public_2 .right {
    width: 288px;
}

.mode_public_2 .right_top {
    padding: 25px;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
}
.mode_2_2_wrapper,
.mode_2_3_wrapper,
.mode_2_4_wrapper
{
    background: #fbfbfb;
}
/* 板块2 通用样式 end */


/* 板块2-2 技术体系 */
.mode_2_2_c .right {
    position: relative;
    background: #3a64d1;
}
.mode_2_3_2 .right_top::before,
.mode_2_3_2 .right_top::after,
.mode_2_2_c .right::before,
.mode_2_2_c .right::after{
    width: 41px;
    height: 7px;
    content: '';
    position: absolute;
    display: inline-block;
    background-color: #789bf5;
    border-radius: 4px;
    left: -28px;
}
.mode_2_3_2 .right_top::before,
.mode_2_2_c .right::before{
    top: 50px;
}
.mode_2_2_c .right::after{
    top: 630px;
}
.mode_2_3_2 .right_top::after{
    top: 450px;
}


.mode_2_2_c .right_top {
    height: 100%;
}

.mode_2_2_c .right_top .p3 {
    margin-top: 5px;
    font-size: 18px;
    line-height: 30px;
}

.mode_2_2_c .right_top img:nth-of-type(1) {
    margin-top: 35px;
}

.mode_2_2_c .right_top img:nth-of-type(2) {
    margin-top: 10px;
}
/* 板块2-2 技术体系 end */

/* 板块2-3 项目体系 */
.mode_2_3_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 210px;
    background: url("../images/mode2-3-1-bg.png") no-repeat;
}

.mode_2_3_1 .left,
.mode_2_3_1 .center p {
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background: #3a64d1;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mode_2_3_1 .left {
    font-weight: bold;
    width: 112px;
    height: 106px;
}
.mode_2_3_1 .center {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.mode_2_3_1 .center p {
    width: 112px;
    height: 41px;
}

.mode_2_3_1 .right {
    width: 815px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mode_2_3_1 .right .right-item {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    background: #d4ddf3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 180px;
}
.mode_2_3_1 .right .right-item .p1{
    width: 95px;
    font-size: 18px;
    font-weight: bold;
    color: #23262d;
}
.mode_2_3_1 .right .right-item .p2{
    width: 1px;
    height: 38px;
    background: #3a64d1;
    margin-right: 25px;
}
.mode_2_3_1 .right .right-item .p3{
    flex: 1;
    font-size: 16px;
    color: #242424;
    line-height: 24px;
    display: flex;
    flex-wrap: wrap;
}
.mode_2_3_1 .right .right-item .p3 span{
    width: 50%;
}
.mode_2_3_2 .img-wrapper{
    margin-top: 15px;  
}
.mode_2_3_2 .right{
    background: url("../images/mode2-3-03.webp") center 100% no-repeat;
}
.mode_2_3_2 .right_top {
    background: #3a64d1;
    border-radius: 10px;
    position: relative;
}
.mode_2_3_2 .right_top .p4 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 45px;
}
.mode_2_3_2 .right_top .p5 {
    font-size: 24px;
    margin-top: 30px;
    vertical-align: middle;
    line-height: 30px;
}

.mode_2_3_2 .right_top .p5 span {
    font-size: 20px;
    color: #3a64d1;
    display: inline-block;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    margin-right: 8px;
}

.mode_2_3_2 .right_top .p6 {
    font-size: 18px;
    line-height: 36px;
    border-bottom: 1px dashed #fff;
}
/* 板块2-3 项目体系 end*/

/* 板块2-4 训练体系*/
.mode_2_4_wrapper .btn-box{
    display: flex;
    justify-content: center;
}
/* 板块2-5 技能*/
.mode_2_5_wrapper{
    height: 1245px;
    position: relative;
}
.mode_2_5_wrapper .bg-box{
    height: 1139px;
    background: url("../images/mode2-5-1.webp") center no-repeat;
    background-size: cover;
}
.mode_2_5{
    width: 1200px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.mode_2_5_c{
    width: 1130px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    position: relative;
}
.mode_2_5_c .circle{
    width: 542px;
    height: 542px;
    border-radius: 50%;
    border: 1px dashed #fff;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.mode_2_5_c .circle1{
    left: 35px;
}
.mode_2_5_c .circle2{
    right: 35px;
}
.mode_2_5_c .circle_s{
    width: 238px;
    height: 238px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.mode_2_5_c .circle3{
    left: 380px;
    z-index: 3;
    background: rgba(6,62,125,0.7);
    padding-left: 70px;
}
.mode_2_5_c .circle3 div{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:#a2e454;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: -130px;
    z-index: 4;
}
.mode_2_5_c .circle4{
    right: 380px;
    z-index: 2;
    background: #45d8ac;
    padding-left: 125px;

}
.mode_2_5_c .text{
    border: 1px dashed #fff;
    background: #fff;
    background-clip: padding-box;
    color: #283453;
    font-size: 16px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mode_2_5_c .text span{
    vertical-align: middle;
}
.mode_2_5_c .text span::before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #283453;
    margin-right: 7px;
}
.mode_2_5_c .text1{
    top: 0;
    left: 235px;
}
.mode_2_5_c .text2{
    top: 150px;
    left: 0;
}
.mode_2_5_c .text3{
    bottom: 130px;
    left: 0;
}
.mode_2_5_c .text4{
    bottom: 0px;
    left: 235px;
}
.mode_2_5_c .text5{
    top: 0;
    right: 245px;
}
.mode_2_5_c .text6{
    top: 70px;
    right: 0;
}
.mode_2_5_c .text7{
    bottom: 190px;
    right: 0;
}
.mode_2_5_c .text8{
    bottom: 0px;
    right: 220px;
}
.mode_2_5_b{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1200px;
    height: 218px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 31px 59px -20px #1f3264;
    display: flex;
    justify-content: space-around;
}
.mode_2_5_b .kefubox,
.mode_2_5_b a{
    box-sizing: border-box;
    text-align: center;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #283453;
    font-size: 22px;
}
.mode_2_5_b .img-wrapper{
    border: 1px solid blue;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    line-height: 112px;
}
.mode_2_5_b .img-wrapper .icon{
    font-size: 60px;
    color: #3a64d1;
}

.mode_2_5_b a:hover .img-wrapper{
    border: none;
    box-shadow: 0 15px 21px -5px rgba(58,100,109,0.5);
    background: #3a64d1;
}

.mode_2_5_b a:hover .img-wrapper .icon{
    color: #fff;
}

/* 板块2-7 谁可以学 end*/
.mode_2_7_c{
    display: flex;
}
.mode_2_7_c li{
    box-sizing: border-box;
    width: 25%;
    padding:0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mode_2_7_c li .img_wrap{
    width: 108px;
    height: 108px;
    background-image: url(/assets/course/java/images/mode2-7.webp);
    transition: all 0.3s linear;
    background-repeat: no-repeat;
}
.mode_2_7_c li .img_wrap.img2{
    background-position: -108px;;
}
.mode_2_7_c li .img_wrap.img3{
    background-position: -216px;;
}
.mode_2_7_c li .img_wrap.img3{
    background-position: -324px;;
}
.mode_2_7_c li:hover .img_wrap{
    transform: rotateY(180deg);
}
.mode_2_7_c li .p1{
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #2b2b2b;
    line-height: 50px;
    border-bottom: 1px solid #d3d3d3;
}
.mode_2_7_c li .line{
    width: 154px;
    height: 5px;
    border-radius: 5px;
    background: #3a64d1;
    position: relative;
    top: -3px;
}
.mode_2_7_c li .p2{
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    color: #787878;
    margin-top: 7px;
}

/* mode3 */
.mode_3_1_c{
    background: #3a64d1;
    height: 780px;
    box-sizing: border-box;
    padding: 85px 0 75px;
}
.mode_3_1_c .z-con{
    height: 626px;
}

/* 板块3-2 项目 */
.m3_item{
    border-radius: 5px;
    box-shadow: 0 11px 27px -10px rgba(31,50,100,0.5);
    overflow: hidden;
}
.m3_item .title{
    height: 104px;
    background: url("../images/mode3-2-bg.webp") center no-repeat;
    background-size: 100% 100%;
    color: #fff;
    box-sizing: border-box;
    padding:10px 35px;
}
.m3_item .title .p1{
    font-size: 30px;
    line-height: 50px;
}
.m3_item .title .p2{
    font-size: 20px;
}
.m3_item ul{
    box-sizing: border-box;
    padding:10px 35px;
}
.m3_item ul li{
    font-size: 18px;
    line-height: 40px;
    color: #242424;
    vertical-align: middle;
}
.m3_item ul li::before{
    content: '';
   vertical-align: middle;
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #3a64d1; 
   margin-right: 5px;
}

.mode_3_2_1{
    display: flex;
    justify-content: space-between;
}
.mode_3_2_1 .m3_item{
    width: 590px;
}
.mode_3_2_2{
    margin-top: 30px;
}
.mode_3_2_2 .m3_flex{
    display: flex;
    box-sizing: border-box;
    padding: 30px 150px 45px 0;
    justify-content: space-between;
}
/* 板块3-2 项目 end */
.mode_other{
    background: #fbfbfb;
    position: relative;
}
.mode_3_3_c{
    text-align: center;
}

/* 板块3-4 技术顾问 */
.mode_3_4_c{
    position: relative;
    height: 445px;
}
.mode_3_4_c .text{
    position: absolute;
}
.mode_3_4_c .text .p1{
    font-size: 22px;
    line-height: 40px;
    color: #171717;
}
.mode_3_4_c .text .p2{
    font-size: 18px;
    line-height: 24px;
    color: #6c6c6c;
}
.mode_3_4_c .text1,
.mode_3_4_c .text2{
    text-align: right;
}
.mode_3_4_c .text3,
.mode_3_4_c .text4{
    text-align: left;
}
.mode_3_4_c .text5{
    text-align: center;
}
.mode_3_4_c .text1{
    top: 0px;
    right: 755px;
}
.mode_3_4_c .text2{
    top: 150px;
    right: 815px;
}
.mode_3_4_c .text3{
    top: 0px;
    left: 765px;
}
.mode_3_4_c .text4{
    top: 155px;
    left: 800px;
}
.mode_3_4_c .text5{
    margin: auto;
    bottom:0px ;
    left: 0;
    right: 0;
}
.mode_3_4_c .text6{
    width: 358px;
    height: 342px;
    background: url("../images/mode3-4-1.webp") no-repeat;
    position: absolute;
    margin: auto;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #f58818;
    font-size: 24px;
    box-sizing: border-box;
    padding-bottom: 20px;
}

/* 板块3-5 训练系统  & 板块3-6 合作伙伴 */
.mode_3_5_c,
.mode_3_6_c
{
    text-align: center;
}


/* 板块3-7 趣味教学 */
.mode3_video{
    text-align: center;
}

/* mode6 */
.mode_6_1_c{
    display: flex;
    justify-content: space-between;
}
.mode_6_1_c>div{
    width: 390px;
    height: 260px;
    border-radius: 10px;
    background: linear-gradient(to bottom,#f3f6fa,#fcfdfe);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding:20px 50px;
    text-align: center;
}
.mode_6_1_c>div .p1{
    font-size: 33px;
    color: #db5176;
    line-height: 115px;
    border-bottom: 1px dashed #b1b1b1;
}
.mode_6_1_c>div .p1 span{
    font-size: 66px;
    font-family: '黑体';
}
.mode_6_1_c>div .p2{
    font-size: 24px;
    line-height: 30px;
    color: #2f2f2f;
    margin-top: 20px;
}

.student-wrapper{
    background: #f1f2f6;
}

.mode_6_3{
    background: #1f7fef;
    height: 637px;
}

.mode_6_3_c{
    height: 100%;
    position: relative;
}
.mode_6_3_c img{
    position: absolute;
    left: -40px;
    top: 25px;
}
.form-wrapper{
    width: 775px;
    box-sizing: border-box;
    height: 100%;
    float: right;
}
.form-wrapper .p1{
    font-size: 30px;
    color: #f1f2f6;
    margin-top: 45px;
}
.form-wrapper .p2{
    font-size: 30px;
    color: #f1f2f6;
    font-weight: bold;
}
.form-wrapper form{
    margin-top: 20px;
    width: 100%;
    height: 363px;
    border-radius: 5px;
    border: 1px dashed #1e7eee;
    background: #ffffff;
    background-clip: border-box;
    box-sizing: border-box;
    padding:15px 30px 20px;
    font-size: 18px;
    position: relative;
    /* overflow: hidden; */
}
.form-wrapper form .label{
    margin-top: 20px;
    color: #979797;
}
.form-wrapper form input{
    font-size: 18px;
}
.form-wrapper form .input-group{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px dashed #8d8d8d;
    box-sizing: border-box;
    padding-bottom: 33px;
}
.form-wrapper form .input-group p{
    width: 175px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: 30px;
}
.form-wrapper form .input-group input{
    margin-right: 8px;
    width: 18px;
    height: 18px;
    border: 1px solid #727272;
    border-radius: 0px;
}
.form-wrapper form .input-group.lianxi{
    border: none;
}
.form-wrapper form .input-group.lianxi p{
    width: 235px;
}
.form-wrapper form .input-group.lianxi input{
    width: 125px;
    margin-left: 10px;
    border: none;
    border-bottom: 1px solid #b2b2b2;
}
.form-wrapper form .input-group.lianxi p .icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #727272;
    margin-right: 10px;
    border-radius: 2px;
}
.form-wrapper form .name{
    display: flex;
    align-items: center;
}
.form-wrapper form .name input{
    width: 577px;
    height: 18px;
    border-bottom: 1px solid #8b8b8b;
    margin-top: 20px;
}
.form-wrapper form button{
    font-size: 22px;
    color: #fff;
    width: 342px;
    height: 62px;
    border-radius: 32px;
    background: #45d8ac;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -31px;
    cursor: pointer;
}
.form-wrapper form button:hover{
    background: #0abb45;
}

.form-wrapper .mask{
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px dashed #fff;
    background: #1e7eee;
    background-clip: border-box;
    border-radius: 50%;
    top: 156px;
    z-index: 13;
}
.form-wrapper .mask-l{
    left: -16px;
}
.form-wrapper .mask-r{
    right: -16px;
}

.form-wrapper .mask i{
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    background: #1f7fef;
    top: -1px;
}
.form-wrapper .mask-l i{
    left: -18px;
}
.form-wrapper .mask-r i{
    right: -18px;
}
.form-wrapper .p3{
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin-top: 60px;
}