.course_tabs{
    display: flex;
    margin-top: -50px;
    height: 50px;
    align-items: center;
    box-sizing: border-box;
}
.course_tab{
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    margin-right: 30px;
    border-radius: 40px;
    border: 1px solid #cbcada;
    font-size: 18px;
}
.course_tab.active{
    font-weight: 700;
    background-color: #8e33ff;
    color: #fff;
    font-weight: 700;
}
.v-syllabus{
    height: 100% !important;
}
.v-syllabus .left {
    justify-content: space-around !important;
    padding-bottom: 10px !important;
}
.v-syllabus .left .item{
    margin-top: 10px !important;
    height: 36px !important;
    line-height: 36px !important;
}

/* 就业数据 */
.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;
}

/* 专业介绍右侧按钮 */

.v-major .cover_img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

.v-major .cover_img img {
    width: 100%;
}
.v-major {
    width: 482px;
    height: 420px;
    box-shadow: 0 0 35px rgba(31, 50, 100, 0.2);
    padding: 0 80px;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
}

.v-major .zixun-wrap { 
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px 5px;
    box-sizing: border-box;
}

.v-major .mask-box {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    top: 0;
    left: 0;
    z-index: 0;
}

.zixun-wrap .kefubox {
    margin: 0;
    width: 95px;
    height: 95px;
    background-image: url(/assets/course/benet/images/icon-marjor.webp);
    background-size: 380px 95px;
    position: relative;
}

.zixun-wrap .kefubox:nth-of-type(1) {
    background-position: 0 0;
}

.zixun-wrap .kefubox:nth-of-type(2) {
    background-position: -95px 0;
}

.zixun-wrap .kefubox:nth-of-type(3) {
    background-position: -190px 0;
}

.zixun-wrap .kefubox:nth-of-type(4) {
    background-position: -285px 0;
}
.v-major .mask-box .mask {
    width: 316px;
    height: 316px;
    border-radius: 50%;
    position: absolute;
}

.v-major .mask-box .mask1 {
    top: -150px;
    left: -220px;
}

.v-major .mask-box .mask2 {
    bottom: -165px;
    right: -185px;
}


.v-major .kefubox:hover,
.v-major a:hover{
    color: #44acf3;
}

.v-major .kefubox p{
    position: absolute;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

/* 就业信息 */
.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: 80px;
}
.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;
    height: 540px;
    position: relative;
}

/* sec1 banner end*/
.sec3 {
    margin-bottom: 80px;
}


/* mode1 */
.mode1-1-c{
    display: flex;
    align-items: center;
}
.mode1-1-c .left{
    flex: 1;
    box-sizing: border-box;
    padding: 25px 25px;
    box-shadow: 0px 0px 65px 0px rgba(30, 50, 100, 0.3);
    background: #fff;
    position: relative;
    z-index: 3;
    border-radius: 5px;
    overflow: hidden;
}
.mode1-1-c .left .p1{
    color: #868686;
    font-size: 18px;
    line-height: 30px;
}

.mode1-2-c1{
    height: 479px;
    border-radius: 10px;
    box-shadow: 0px 0px 65px 0px rgba(30, 50, 100, 0.3);
    box-sizing: border-box;
    padding: 30px 30px 45px;
    position: relative;
    overflow: hidden;
}
.mode1-2-c1 .mask{
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.mode1-2-c1 .mask1{
    width: 169px;
    height: 169px;
    background: linear-gradient(45deg,#f8f0fc,#fffeff,#fff);
    top: -51px;
    right: -63px;
}
.mode1-2-c1 .mask2,
.mode1-2-c1 .mask3{
    width: 352px;
    height: 352px;
    background: linear-gradient(145deg,#f8f0fc,#fffeff,#fff);
}
.mode1-2-c1 .mask2{
    right: 0;
    bottom: -242px;
}
.mode1-2-c1 .mask3{
    right: 180px;
    bottom: -316px;
}
.mode1-2-c1 .icon{
    vertical-align: middle;
    font-size: 18px;
}
.mode1-2-c1 .p1{
    font-size: 24px;
}
.mode1-2-c1 .p2,
.mode1-2-c1 .p3{
    font-size: 18px;
    color: #686868;
}
.mode1-2-c1 .p3{
    margin-top: 60px;
}
.mode1-2-c1 .p4{
    font-size: 16px;
    color: #9d9d9d;
    margin-top: 10px;
}
.mode1-2-c1 .bar-wrapper{
    width: 1050px;
    height: 265px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 45px;
    box-sizing: border-box;
    z-index: 1;
}
.mode1-2-c1 ul{
    display: flex;
    justify-content: space-between;
    padding: 0 90px;
    box-sizing: border-box;
}
.mode1-2-c1 .bar-wrapper li{
    width: 40px;
    height: 100%;
    text-align: center;
    font-size: 18px;
    color: #272727;
    line-height: 40px;
    position: relative;
}

.mode1-2-c1 .bar-box{
    width: 100%;
    height: 230px;
    border-bottom: 1px solid #c6c6c6;
    overflow: hidden;

}
.mode1-2-c1 .bar-box li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.mode1-2-c1 .bar-box li .bar{
    width: 100%;
    background: #7200ff;
}
.mode1-2-c1 .bar-box li:nth-of-type(1) .bar{
    height: 192px;
}
.mode1-2-c1 .bar-box li:nth-of-type(2) .bar{
    background: #ff7e00;
    color: #ff7e00;
    height: 90px;
}
.mode1-2-c1 .bar-box li:nth-of-type(3) .bar{
    height: 34px;
}
.mode1-2-c1 .bar-box li:nth-of-type(4) .bar{
    height: 34px;
}
.mode1-2-c1 .bar-box li:nth-of-type(5) .bar{
    height: 22px;
}
.mode1-2-c1 .bar-box li:nth-of-type(6) .bar{
    height: 17px;
}
.mode1-2-c1 .bar-box li:nth-of-type(7) .bar{
    height: 11px;
}
.mode1-2-c2-wrapper{
    height: 700px;
    background: linear-gradient(135deg,#7200ff,#4e00ae);
    color: #fff;
    box-sizing: border-box;
    padding: 50px 25px;
}
.mode1-2-c2{
    box-sizing: border-box;
    padding: 0 25px;
}
.mode1-2-c2 .p1{
    font-size: 24px;
}
.mode1-2-c2 .p2{
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
}
.mode1-2-c2 .p3{
    margin-top: 40px;
    font-size: 24px;
}

.mode1-3{
    height: 736px;
    box-shadow: 0px 0px 65px 0px rgba(30, 50, 100, 0.3);
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.mode1-3 .mask{
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.mode1-3 .mask1{
    width: 169px;
    height: 169px;
    background: linear-gradient(45deg,#f8f0fc,#fffeff,#fff);
    top: -80px;
    right: -63px;
}
.mode1-3 .mask2{
    width: 352px;
    height: 352px;
    background: linear-gradient(145deg,#f9f0fc,#fffeff,#fff);
    right: -30px;
    bottom: -150px;
}
.mode1-3-c{
    display: flex;
    justify-content: space-between;
    padding: 0 90px;
    position: relative;
    z-index: 1;
}
.mode1-3-c>div{
    width: 445px;
}
.mode1-3-c .p1{
    font-size: 18px;
    color: #383838;
    text-align: center;
}
.mode1-3-c .p1 span{
    font-size: 36px;
    font-weight: bold;
    color: #7100fe;
}
.mode1-3-c .p2,
.mode1-3-c .p3{
    font-size: 16px;
    line-height: 24px;
    color: #999;
}
.mode1-3-c .img-wrapper{
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mode1-3-c .p3{
    text-align: justify;
}
.mode1-4-c .p1{
    font-size: 20px;
    line-height: 30px;
}
.mode1-4-c li{
    width: 282px;
    height: 373px;
    border-radius: 10px;
    box-sizing: border-box;
    padding-top: 25px;
    position: relative;
    border: 1px solid #c1c1ff;
    background: #fff;
}
.mode1-4-c li .img-box{
    width: 280px;
    height: 214px;
    background-image: url(/assets/course/python/images/mode1-4.webp);
    background-repeat: no-repeat;
    margin-top: 10px;
}
.mode1-4-c li .img-box.img2{
    background-position: -280px 0;
}
.mode1-4-c li .img-box.img3{
    background-position: -560px 0;
}
.mode1-4-c li .img-box.img4{
    background-position: -840px 0;
}
.mode1-4-c li:hover{
    border: 1px solid #d0a9ff;
}
.mode1-4-c li .kefubox{
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 39px;
    line-height: 39px;
    color: #fff;
    border-radius: 20px;
    background: #7200ff;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -20px;
    text-align: center;
    font-size: 20px;
}
.mode1-4-c li .kefubox:hover{
    background: #ff7e00;
}
.mode1-5-c .flex-box{
    align-items: center;
}
.mode1-5-c .t1{
    width: 200px;
    position: relative;
}
.mode1-5-c .t2{
    width: 925px;
}
.mode1-5-c .p1{
    text-align: center;
    font-size: 18px;
    letter-spacing: -1px;
}
.mode1-5-c .p2{
    width: 200px;
    height: 87px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #7200ff;
    font-size: 18px;
    text-align: center;
    position: relative;
}
.mode1-5-c .t2 .p2{
    width: 183px;
}
.mode1-5-c .t2-t .p2{
    background: #8566ff;
}
.mode1-5-c .t2-b .p2{
    background: #6766ff;
}
.mode1-5-c .t1::after{
    content: '';
    display: inline-block;
    width: 52px;
    height: 181px;
    background: url('../images/mode1-5-1.png') center no-repeat;
    background-size: 100%;
    position: absolute;
    right: -66px;
    top: 0px;
}
.mode1-5-c .t2 .p2::after{
    content: '';
    display: inline-block;
    width: 42px;
    height: 4px;
    background: url('../images/mode1-5-2.png') center no-repeat;
    background-size: 100%;
    position: absolute;
    margin: auto;
    right: -52px;
    top: 0;
    bottom: 0;
}
.mode1-5-c .t2-t>div:last-child .p2::after,
.mode1-5-c .t2-b .p2:last-child::after{
    display: none;
}

.mode1-5-c .t2-t>.p2::after{
    width: 40px;
    height: 124px;
    background: url('../images/mode1-5-1.png') center no-repeat;
    background-size: 88%;
}

.mot1-6-c li{
    width: 282px;
    height: 373px;
    background: #6766ff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mot1-6-c li .img-wrapper{
    width: 155px;
    height: 88px;
    border-left: 1px dashed #fff;
    border-right: 1px dashed #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:4.5px 7px;
    box-sizing: border-box;
    background: #ffffff;
    background-clip: content-box;
    margin-top: 80px;
    position: relative;
}
.mot1-6-c li .img-wrapper .img-box{
    width: 105px;
    height: 81px;
    background-image: url(/assets/course/python/images/mode1-6.webp);
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.mot1-6-c li p{
    margin-top: 80px;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
.mot1-6-c li .rotate-box{
    position: absolute;
    top: 0;
    left: 0;
    padding:4.5px 7px;
    width: 100%;
    height: 100%;
    border-left: 1px dashed #fff;
    border-right: 1px dashed #fff;
    box-sizing: border-box;
    background: #ffffff;
    background-clip: content-box;
    z-index: 0;
}
.mot1-6-c li .box1{
    transform: rotate(60deg);
}
.mot1-6-c li .box2{
    transform: rotate(120deg);
}
.mot1-6-c li:hover{
    background: #8566ff;
}

/* mode3 */
.mode3-1-c{
    align-items: center;
    box-sizing: border-box;
    padding-left: 110px;
    background: url('../images/mode3-1-bg.png') left center no-repeat;
}
.mode3-1-c .left{
    width: 540px;
    font-size: 18px;
    line-height: 30px;
    color: #686868;
}
.mode3-1-c .left .icon-wrapper{
    box-sizing: border-box;
    padding: 0 60px;
}
.mode3-1-c .left .icon-wrapper .icon{
    width: 78px;
    height: 78px;
    border-radius: 50%;
    color: #fff;
    background: #7200ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}
.mode3-2-c li{
    width: 379px;
    height: 310px;
    border-radius: 10px;
    background: pink;
    color: #fff;
    box-sizing: border-box;
    padding: 30px 60px;
    text-align: center;
    position: relative;
}
.mode3-2-c li .desc{
    position: relative;
    z-index: 1;
}
.mode3-2-c li .p1{
    font-size: 22px;
    font-weight: bold;
    line-height: 80px;
    border-bottom: 1px solid #fff;
}
.mode3-2-c li .p2{
    font-size: 18px;
    line-height: 30px;
    margin-top: 20px;
}
.mode3-2-c li:nth-of-type(1){
    background: #6766ff;
}
.mode3-2-c li:nth-of-type(2){
    background: #8566ff;
}
.mode3-2-c li:nth-of-type(3){
    background: #6766ff;
}
.mode3-2-c li:hover{
    background: #d666ff;
}
.mode3-2-c li .icon{
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 180px;
    z-index: 0;
    opacity: 0.2;
}
.mode3-3-1 li{
    width: 390px;
    height: 184px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px 85px;
}
.mode3-3-1 li:nth-of-type(1){
    background: rgba(52,40,165,0.2);
    color: #3428a5;
}
.mode3-3-1 li:nth-of-type(2){
    background: rgba(255,102,0,0.2);
    color: #ff6600;
}
.mode3-3-1 li:nth-of-type(3){
    background: rgba(136,130,25,0.2);
    color: #7ab13b;
}
.mode3-3-1 .p1{
    font-size: 48px;
    line-height: 85px;
    border-bottom-style: solid ;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
}
.mode3-3-1 .p2{
    font-size: 24px;
    margin-top: 15px;
}
.mode3-3-2{
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    color: #686868;
}
.mode3-2-3 .nav{
    width: 205px;
    height: 424px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mode3-2-3 .nav li{
    width: 205px;
    height: 97px;
    position: relative;
    cursor: pointer;
}
.mode3-2-3 .nav li .img-box{
    width: 195px;
    height: 97px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    background-image: url(/assets/course/python/images/mode3-2-1.webp);
    background-repeat: no-repeat;
}
.mode3-2-3 .nav li .img-box.img2{
    background-position: 0 -97px;
}
.mode3-2-3 .nav li .img-box.img3{
    background-position: 0 -194px;
}
.mode3-2-3 .nav li .img-box.img4{
    background-position: 0 -291px;
}
.mode3-2-3 .nav li.active .img-box{
    border: 2px solid #3428a5;

}
.mode3-2-3 .nav li .iconfont{
    display: none;
    width: 10px;
    height: 12px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 1px;
    color: #3428a5;
}
.mode3-2-3 .nav li.active .iconfont{
    display: block;
}

.mode3-2-3 .project{
    width: 989px;
    height: 424px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #3428a5;
    box-shadow: 0 19px 38px -19px rgba(84,70,210,0.35);
}

.mode3-2-3 .project .swiper-wrapper{
    width: 989px;
    height: 424px;
}
.mode3-2-3 .project .swiper-slide{
    width: 989px;
    height: 424px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: 20px;
}
.mode3-2-3 .project .swiper-slide .left{
    width: 590px;
    height: 100%;
    margin: 45px 0 0 50px;
    box-sizing: border-box;
}
.mode3-2-3 .project .swiper-slide .left .p1{
    font-size: 24px;
    color: #686868;
    font-weight: bold;
    margin-bottom: 10px;
}
.mode3-2-3 .project .swiper-slide .left .p2{
    font-size: 16px;
    line-height: 30px;
    color: #686868;
    display: flex;
    vertical-align: middle;
}
.mode3-2-3 .project .swiper-slide .left .iconfont{
    color: #ff7d26; margin-right: 8px;
}

.mode3-2-3 .project .swiper-slide .left .p2.qr1{
    margin-top: 30px;
    font-weight: bold;
}
.mode3-2-3 .project .swiper-slide .left .p2.qr2{
    font-weight: bold;
}

.mode3-2-3 .project .swiper-slide .left .p2.qr1::after{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url("../images/mode3-2-3-qr1.jpg");
    background-size: 100%;
    margin-top: -50px;
    margin-left: 80px;
}


.mode3-2-3 .project .swiper-slide .right{
    margin-top: 18px;
    width: 325px;
    height: 388px;
    background-image: url("/assets/course/python/images/mode3-2-2.webp");
    background-repeat: no-repeat;
}
.mode3-2-3 .project .swiper-slide .right.img2{
    background-position: -325px;
}
.mode3-2-3 .project .swiper-slide .right.img3{
    background-position: -650px;
}
.mode3-2-3 .project .swiper-slide .right.img4{
    background-position: -975px;
}

.mode3-4-wrapper{
    height: 323px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px -10px rgba(31,50,100,0.5);

}
.mode3-4-wrapper .mask{
    position: absolute;
    z-index: 0;
    width: 264px;
    height: 264px;
    border-radius: 50%;
}
.mode3-4-wrapper .mask1{
    background: linear-gradient(200deg,#ddc2ff,#f2e7ff,#fff,#fff,#fff,#fff);
    left: -137px;
    bottom: -154px;
}
.mode3-4-wrapper .mask2{
    background: linear-gradient(20deg,#ddc2ff,#f2e7ff,#fff,#fff,#fff,#fff);
    right: -120px;
    top: -192px;
}
.mode3-4-c{
    position: relative;
    z-index: 1;
}
.mode3-4-wrapper .nav{
    width: 421px;
    height: 323px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 0;
    align-items: center;
    border-radius:   10px 0 0 10px;
    box-shadow: 0 0 25px -10px rgba(31,50,100,0.5);
}
.mode3-4-wrapper .nav li{
    width: 359px;
    height: 54px;
    line-height: 54px;
    border-radius: 10px;
    font-size: 22px;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #e9d8ff;
    cursor: pointer;
}
.mode3-4-wrapper .nav li.active{
    background: #7200ff;
    color: #fff;
}
.mode3-4-wrapper .swiper-right{
    flex: 1;
    height: 323px;
    box-sizing: border-box;
    padding: 35px 20px 35px 45px;
    box-shadow: 0 0 25px -10px rgba(31,50,100,0.5);
    border-radius:  0 10px 10px 0;
}
.mode3-4-wrapper .swiper_mode3_4{
    width: 100%;
    height: 253px;
}
.mode3-4-wrapper .swiper_mode3_4 .swiper-wrapper{
    height: 100%;
}
.mode3-4-wrapper .swiper_mode3_4 .p1{
    font-size: 20px;
    font-weight: bold;
    color: #7200ff;
}
.mode3-4-wrapper .swiper_mode3_4 .p2{
    font-size: 18px;
    color: #686868;
    line-height: 30px;
    margin-top: 10px;
}
.mode3-4-wrapper .swiper_mode3_4 span{
    display: inline-block;
    margin-right: 80px;
}

.mode3-4-wrapper .swiper_mode3_4 .img-wrapper{
    margin-top: 20px;
    width: 700px;
    height: 134px;
    background-image: url(/assets/course/python/images/mode3-4.webp);
    background-repeat: no-repeat;
}
.mode3-4-wrapper .swiper_mode3_4 .img-wrapper.img2{
    background-position: 0 -134px;
}
.mode3-4-wrapper .swiper_mode3_4 .img-wrapper.img3{
    background-position: 0 -268px;
}
.mode3-4-wrapper .swiper_mode3_4 .img-wrapper.img4{
    background-position: 0 -402px;
}

.mode3-5-w{
    height: 790px;
    position: relative;
}
.mode3-5-w .mask-box{
    width: 1200px;
    height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    display: flex;
    align-items: center;
}
.mode3-5-w .mask{
    width: 50%;
    transform:skewX(-10deg);
} 
.mode3-5-w .mask-left{
    background: #f8f7ff;
    height: 675px;
}
.mode3-5-w .mask-right{
    height: 100%;
    background: #7200ff;
}
.mode3-5-w .mask-box2{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 0;
}
.mode3-5-w .mask-box2 .mask2{
    width: 50%;
    height: 100%;
}
.mode3-5-w .mask-box2 .mask2-left{
    background: #f8f7ff;
    height: 675px;
    margin-right: 150px;
}
.mode3-5-w .mask-box2 .mask2-right{
    margin-left: 150px;
    background: #7200ff;
}
.mode3-5-c{
    position: absolute;
    z-index: 1;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    height: 100%;
    align-items: center;
}
.mode3-5-c>div{
    width: 50%;
}
.mode3-5-c .left{
    height: 675px;
    box-sizing: border-box;
    padding: 60px 38px;
}
.mode3-5-c .left .p1{
    font-size: 18px;
    line-height: 30px;
    color: #3f3f3f;
    text-align: justify;
}
.mode3-5-c .right{
    height: 100%;
    box-sizing: border-box;
    padding: 32px 88px 0 55px;
}
.mode3-5-c .right .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mode3-5-c .right .item p{
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.mode3-5-c .right .item .p2{
    color: #3428a5;
    background: #f8f7ff;
}
.mode3-5-c .right .item .p3{
    color: #fff;
    background: #3428a5;
    background-clip: content-box;
}