.bannerPic {
        padding-bottom: 23.44%;
    }
    
    .bannerUl .slick-dots {
        bottom: 24px;
        /* padding-right: 351px; */
        right: 0;
        text-align: right;
        margin-right: 350px;
        /* width: auto; */
    }
    
    .bannerUl .slick-dots li {
        width: 50px;
        height: 50px;
        background: #E3E3E3;
        border-radius: 50%;
        font-size: 24px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        margin: 0 14px;
        position: relative;
        cursor: pointer;
    }
    
    .bannerUl .slick-dots li.slick-active {
        background: #298DE9;
    }
    
    .bannerUl .slick-dots li button {
        text-indent: 0;
        width: 50px;
        height: 50px;
        background: #E3E3E3;
        border-radius: 50%;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
    }
    
    .bannerUl .slick-dots li::before {
        content: '';
        display: block;
        width: 60px;
        height: 60px;
        border: 1px dashed #FEC321;
        position: absolute;
        border-radius: 50%;
        left: -6px;
        top: -6px;
    }
    
    .bannerUl .slick-prev {
        background: rgba(155, 156, 158, .65) url(../images/l.png) no-repeat 6px 19px;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        left: 50%;
        top: calc(50% - 29px);
        margin-left: -600px;
    }
    
    .bannerUl .slick-prev:hover {
        background: #298de9 url(../images/l.png) no-repeat 6px 19px;
    }
    
    .bannerUl .slick-next {
        background: rgba(155, 156, 158, .65) url(../images/r.png) no-repeat 6px 17px;
        width: 58px;
        height: 58px;
        right: 50%;
        margin-right: -600px;
        border-radius: 50%;
        top: calc(50% - 29px);
    }
    
    .bannerUl .slick-next:hover {
        background: #298de9 url(../images/r.png) no-repeat 6px 17px;
    }
    /* mode1 */
    
    .mode1 {
        background: #F3F4F9;
        position: relative;
        padding-bottom: 52px;
    }
    
    .mode1::before {
        content: '';
        display: block;
        width: 44.21%;
        height: 83.6%;
        background: url(../images/mode1be.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .title {
        display: block;
        padding: 34px 0 18px 0;
        color: #298DE9;
        font-weight: bold;
    }
    
    .mode1l {
        width: 62.58%;
        display: block;
    }
    
    .mode1Pic {
        padding-bottom: 56.73%;
    }
    
    .mode1r {
        background: rgba(255, 255, 255, .82);
        padding: 32px 40px;
        display: block;
        width: 60.83%;
        width: calc(60.83% - 80px);
        margin-top: -249px;
        position: relative;
    }
    
    .mode1r p {
        line-height: 37px;
        max-height: 185px;
        overflow: hidden;
        color: #333;
    }
    
    .mode2 {
        padding: 40px 0;
        background: url(../images/mode2bg.png) no-repeat;
        background-size: cover;
    }
    
    .title2 {
        display: inline-block;
        color: #fff;
        position: absolute;
        z-index: 20;
    }
    
    .mode2l {
        padding: 47px 381px 60px 19px;
        background: url(../images/mode2lbg.png) no-repeat;
        width: calc(77.17% - 380px);
        margin-top: 90px;
        min-height: 234px;
    }
    
    .mode2lTit {
        position: relative;
        margin-bottom: 25px;
    }
    
    .mode2lTit p {
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
        color: #333;
    }
    
    .mode2lTit::before {
        content: '';
        display: block;
        width: 4px;
        height: 19px;
        background: #FFAA43;
        position: absolute;
        left: -19px;
        top: 0;
    }
    
    .mode2Infor {
        line-height: 27px;
        max-height: 108px;
        color: #999;
        overflow: hidden;
        margin-bottom: 15px;
    }
    
    .date3 {
        line-height: 38px;
        padding-left: 18px;
        position: relative;
    }
    
    .date3::before {
        content: '';
        width: 10px;
        height: 12px;
        background: url(../images/date3.png) no-repeat;
        position: absolute;
        left: 0;
        top: 5px;
    }
    
    .learn {
        width: 135px;
        height: 38px;
        display: inline-block;
        line-height: 38px;
        border-radius: 38px;
        background: #298DE9;
        text-align: center;
        /* padding-right: 42px; */
        position: relative;
        margin-right: 42px;
    }
    
    .learn::before {
        content: '';
        display: block;
        width: 57px;
        height: 16px;
        background: url(../images/mob.png) no-repeat;
        position: absolute;
        right: -33px;
        top: calc(50% - 8px);
    }
    
    .mode2 .gp-container {
        position: relative;
    }
    
    .mode2Ul a {
        display: block;
        overflow: hidden;
        position: relative;
    }
    
    .mode2r {
        width: 50%;
        position: absolute;
        right: 0;
        top: 0;
        overflow: hidden;
    }
    
    .mode2Pic {
        padding-bottom: 66.72%;
    }
    
    .mode2 .slick-dots {
        bottom: 0px;
        /* text-align: right; */
        width: 151px;
        right: 289px;
    }
    
    .mode2 .slick-dots li {
        width: 25px;
        height: 24px;
    }
    
    .mode2Ul {
        position: relative;
        z-index: 0;
        padding-right: 16.2px;
    }
    
    .mode2 .slick-dots li button {
        background-color: none;
        width: 25px;
        height: 24px;
        background: url(../images/mode2slick.png) no-repeat;
    }
    
    .mode2 .slick-dots li.slick-active button {
        background: url(../images/mode2sa.png) no-repeat;
    }
    
    .mode2 .slick-prev {
        width: 32.4px;
        height: 73px;
        left: 48.17%;
        top: calc(50% - 36.5px);
        background: #298DE9 url(../images/moe2l.png) no-repeat 8px 25px;
    }
    
    .mode2 .slick-prev:hover {
        background: #FEC321 url(../images/moe2l.png) no-repeat 8px 25px;
    }
    
    .mode2 .slick-next {
        width: 32.4px;
        height: 73px;
        right: 0;
        top: calc(50% - 36.5px);
        background: #298DE9 url(../images/mode2r.png) no-repeat 8px 25px;
    }
    
    .mode2 .slick-next:hover {
        background: #FEC321 url(../images/mode2r.png) no-repeat 8px 25px;
    }
    
    .mode2bottomUl {
        overflow: hidden;
        margin: 0 -12px;
        margin-top: 24px;
        padding-top: 15px;
    }
    
    .mode2bottomUl li {
        transition: all 1.3s ease-in-out;
    }
    
    .mode2bottomUl li:hover {
        transform: translateX(10px);
        transition: all 1.3s ease-in-out;
    }
    
    .mode2bottomUl li a {
        display: block;
        background: #fff;
        padding: 31px 29px 41px;
        margin: 0 12px;
        position: relative;
    }
    
    .date4 {
        padding: 8px;
        padding-left: 24px;
        border: 1px solid #0A50FE;
        background: #f8f8f8;
        position: absolute;
        top: -15px;
        font-size: 14px;
        line-height: 16px;
        color: #999;
    }
    
    .date4::before {
        left: 8px;
        top: 9px;
    }
    
    .mode2bottomUl li p {
        line-height: 21px;
        color: #333;
    }
    
    .mode3 {
        position: relative;
        padding-bottom: 43px;
    }
    
    .mode3::before {
        content: '';
        display: block;
        width: 731px;
        height: 391px;
        background: url(../images/mode3b.png) no-repeat;
        position: absolute;
        right: 75px;
        bottom: 0;
    }
    
    .mode3l {
        width: 791px;
        position: relative;
        z-index: 10;
    }
    
    .mode3l li {
        /* padding-bottom: 20px; */
    }
    
    .mode3l li a {
        display: block;
    }
    
    .mode3Pic {
        padding-bottom: 57.81%;
    }
    
    .mode3Infor {
        margin: 0 20px;
        background: rgba(255, 255, 255, .9);
        padding: 20px 21px 26px 22px;
        margin-top: -25px;
        position: relative;
        z-index: 10;
        min-height: 198px;
        box-shadow: 2px 0px 23px rgb(0 0 0 / 9%);
    }
    
    .mode3Tit {
        line-height: 24px;
        max-height: 48px;
        color: #333;
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
    }
    
    .mode3Infor::before {
        content: '';
        display: block;
        width: 4px;
        height: 19px;
        background: #FFAA43;
        position: absolute;
        left: 0;
        top: 22px;
    }
    
    .mode3Infor p {
        line-height: 24px;
        max-height: 72px;
        overflow: hidden;
        color: #999;
        margin-bottom: 33px;
    }
    
    .date5 {
        color: #999;
        line-height: 19px;
    }
    
    .date5::before {
        top: 3px;
    }
    
    .mode3 .slick-prev {
        width: 33px;
        height: 73px;
        left: -15px;
        top: 24.18%;
        background: #298DE9 url(../images/moe2l.png) no-repeat 8px 25px;
    }
    
    .mode3 .slick-prev:hover {
        background: #FEC321 url(../images/moe2l.png) no-repeat 8px 25px;
    }
    
    .mode3 .slick-next {
        width: 33px;
        height: 73px;
        right: -15px;
        top: 24.18%;
        background: #298DE9 url(../images/mode2r.png) no-repeat 8px 25px;
    }
    
    .mode3 .slick-next:hover {
        background: #FEC321 url(../images/mode2r.png) no-repeat 8px 25px;
    }
    
    .mode3r {
        margin-left: 822px;
        position: relative;
        z-index: 10;
    }
    
    .mode3r .til_tab {
        display: inline-block;
        padding: 34px 0 18px 0;
        /*  */
        color: #999;
        font-weight: bold;
    }
    
    .mode3r .til_tab:first-child {
        margin-right: 33px;
    }
    
    .mode3r .til_tab.on {
        color: #298DE9;
    }
    
    .datelast {
        width: 77px;
    }
    
    .datelast .days {
        font-size: 28px;
        font-weight: bold;
        color: #FEC321;
        line-height: 34px;
        padding: 0 21px;
        background: #298DE9;
    }
    
    .datelast span {
        padding: 6px 6px 5px 7px;
        display: block;
        line-height: 21px;
        color: #333;
        background: #f6f6f6;
    }
    
    .tabin {
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
        color: #333;
        margin-left: 94px;
        padding-top: 9px;
    }
    
    .tabListBox li {
        padding-bottom: 38px;
        display: block;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 38px;
        transition: all 1.3s ease-in-out;
    }
    
    .tabListBox li:last-child {
        /* border-bottom:none; */
    }
    
    .tabListBox li:hover {
        transform: translateX(5px);
        transition: all .4s ease-in-out;
    }
    
    .tabListBox li a {
        display: block;
        overflow: hidden;
    }
    
    .tabListBox li:last-child {
        margin-bottom: 0;
    }
    
    .tabListBox {
        display: none;
        position: relative;
    }
    
    .tabmore {
        position: absolute;
        right: 0;
        color: #333;
        top: -43px;
        padding-right: 20px;
    }
    
    .tabmore::before {
        content: '';
        display: block;
        width: 15px;
        height: 16px;
        background: url(../images/morex.png) no-repeat;
        background-size: 100%;
        position: absolute;
        right: 0;
        top: 4px;
    }
    
    .mode3bottomUl {
        overflow: hidden;
        background: #fff;
        margin-top: 59px;
        position: relative;
        z-index: 10;
        padding-bottom: 23px;
        padding-top: 23px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
    }
    
    .mode3bottomUl li {
        transition: all .35s ease-in-out;
    }
    /*  */
    
    .mode3bottomUl li:hover .mode3rid span {
        animation-name: expandUp;
        -webkit-animation-name: expandUp;
        animation-duration: 0.7s;
        -webkit-animation-duration: 0.7s;
        animation-timing-function: ease;
        -webkit-animation-timing-function: ease;
        visibility: visible !important;
    }
    
    @keyframes expandUp {
        0% {
            transform: translateY(100%) scale(0.6) scaleY(0.5);
        }
        60% {
            transform: translateY(-7%) scaleY(1.12);
        }
        75% {
            transform: translateY(3%);
        }
        100% {
            transform: translateY(0%) scale(1) scaleY(1);
        }
    }
    
    @-webkit-keyframes expandUp {
        0% {
            -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
        }
        60% {
            -webkit-transform: translateY(-7%) scaleY(1.12);
        }
        75% {
            -webkit-transform: translateY(3%);
        }
        100% {
            -webkit-transform: translateY(0%) scale(1) scaleY(1);
        }
    }
    
    .mode3bottomUl a {
        display: block;
        /* margin: 0 126px; */
        line-height: 21px;
        color: #333;
        font-size: 16px;
        text-align: center;
    }
    
    .mode3rid {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        background: #298DE9;
        text-align: center;
        margin: 0 auto;
        position: relative;
        margin-bottom: 14px;
    }
    
    .mode3rid::before {
        content: '';
        display: block;
        border: 1px solid #c49e34;
        width: 136px;
        height: 136px;
        border-radius: 50%;
        position: absolute;
        left: -6px;
        top: -6px;
    }
    
    .mode3rid span {
        width: 59px;
        height: 64px;
        display: inline-block;
        margin: 30px auto;
    }
    
    .mode3Ul li {
        height: 0;
    }
    
    .mode3Ul li:nth-child(1) {
        height: auto;
    }
    
    .mode3Ul li.slick-slide {
        height: auto;
    }
    
    .mode3Ul li a {
        display: block;
        /* width: 557px; */
        overflow: hidden;
        padding-bottom: 20px;
    }
    
    @media screen and (max-width:1801px) {
        .bannerUl .slick-dots {
            margin-right: 81px;
        }
    }
    
    @media screen and (max-width:1461px) {
        .bannerUl .slick-dots {
            margin-right: 81px;
        }
        .nav li>a {
            padding: 20px 2px;
            font-size: 15px;
        }
    }
    
    @media screen and (max-width:1301px) {
        .bannerUl .slick-prev {
            margin-left: -550px;
        }
        .bannerUl .slick-next {
            margin-right: -550px;
        }
        .mode2 .slick-prev,
        .mode2 .slick-next {
            top: calc(50% - 75.5px);
        }
        .bannerUl .slick-dots {
            margin-right: 76px;
        }
        .mode2 .slick-dots {
            bottom: 15px;
        }
        .mode3l {
            width: 720px;
        }
        .mode3r {
            margin-left: 753px;
        }
          .tabListBox li {
        padding-bottom: 33px;
       
        margin-bottom: 33px;
       
    }
    }
    
    @media screen and (max-width:1201px) {
        .bannerUl .slick-prev {
            margin-left: -500px;
        }
        .bannerUl .slick-next {
            margin-right: -496px;
        }
        .mode2l {
            padding: 47px 331px 60px 19px;
            width: calc(77.17% - 340px);
        }
        .bannerUl .slick-dots {
            margin-right: 60px;
        }
    }
    
    @media screen and (max-width:1100px) {
        .bannerUl .slick-dots {
            margin-right: 28px;
        }
        .bannerUl .slick-dots li,
        .bannerUl .slick-arrow {
            transform: scale(.8);
        }
        .mode3rid {
            transform: scale(.9);
        }
        .mode2 .slick-dots {
            bottom: 32px;
        }
        .mode3l {
            width: 645px;
        }
        .mode3r {
            margin-left: 672px;
        }      .tabListBox li {
        padding-bottom: 28px;
        margin-bottom: 28px;
    }
    }
    
    @media screen and (max-width: 996px) {
        .bannerUl .slick-prev {
            left: 0;
            margin-left: 20px;
        }
        .bannerUl .slick-next {
            right: 0;
            margin-right: 20px;
        }
        .mode2l {
            padding: 47px 271px 60px 19px;
            width: calc(77.17% - 300px);
        }
        .mode2 .slick-prev,
        .mode2 .slick-next {
            top: calc(50% - 143.5px);
        }
        .mode3r {
            margin-left: 489px;
        }
        .mode3l {
            width: 457px;
        }
        .tabListBox li {
            padding-bottom: 16px;
            margin-bottom: 17px;
        }
        .bannerUl .slick-dots {
            right: 0;
            transform: scale(.7);
        }
        .bannerUl .slick-dots {
            bottom: 10px;
            text-align: center;
            margin: 0;
        }
    }
    
    @media screen and (max-width: 900px) {
        .mode2l {
            padding: 47px 302px 60px 19px;
            width: calc(77.17% - 242px);
        }
    }
    
    @media screen and (max-width:768px) {
        .logo {
            padding: 15px 0;
        }
        .bannerUl .slick-dots li {
            line-height: 50px;
            margin: 0 6px;
            transform: scale(.8);
        }
        .mode1r {
            background: rgba(255, 255, 255, .82);
            padding: 22px;
            display: block;
            width: 100%;
            margin-top: 0px;
            margin-left: 0;
            box-sizing: border-box;
            position: relative;
        }
        .mode2l {
            margin-top: 0;
        }
        .title2 {
            position: static;
        }
        .mode2r {
            float: none;
            width: 100%;
            position: static;
        }
        .mode2l {
            width: calc(100% - 38px);
            float: none;
            padding: 47px 19px 60px 19px;
        }
        .mode2Ul {
            padding-left: 16.2px;
        }
        .mode2 .slick-prev {
            left: 0px;
            top: calc(50% - 25px);
        }
        .mode2 .slick-next {
            top: calc(50% - 25px);
        }
        .mode2 .slick-dots {
            display: none !important;
        }
        .mode2bottomUl li {
            margin-bottom: 38px;
        }
        .mode3r {
            margin-left: 0px;
        }
        .mode3l {
            width: 100%;
        }
        .bannerUl .slick-dots li,
        .bannerUl .slick-arrow {
            display: none !important;
        }
    }
    
    @media screen and (max-width:479px) {
        .mode2l {
            padding: 25px 19px 25px 19px;
        }
        .mode2 {
            padding: 0;
        }
        .mode3r .til_tab {
            padding-top: 18px;
        }
        .tabmore {
            top: -39px;
        }
        .bannerUl .slick-dots {
            display: none !important;
        }
        .bannerUl .slick-arrow {
            display: none !important;
        }
        header::before {
            content: '';
            display: block;
            width: 90px;
            height: 48px;
            background: url(../images/fb.png) no-repeat;
            background-size: 90px 48px;
            position: absolute;
            left: 33.61%;
            top: 12px;
        }
        header::after {
            content: '';
            display: block;
            width: 66px;
            height: 30px;
            background: url(../images/fa.png) no-repeat;
            background-size: 66px 31px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .mode1r p {
            line-height: 24px;
            max-height: 72px;
            overflow: hidden;
            color: #333;
        }
        .mode3bottomUl li {
            margin-bottom: 5px;
        }
        .mode3rid {
            transform: scale(.8);
        }
        .mode2Infor {
            margin-bottom: 15px
        }
        .mode2lTit {
            position: relative;
            margin-bottom: 10px;
        }
        .mode3Tit {
            margin-bottom: 10px;
        }
        .mode3Infor p {
            margin-bottom: 15px;
        }
        .mode1r {
            /* margin-top: -100px; */
            padding: 14px;
            position: relative;
        }
    }
    
    @media screen and (max-width:400px) {
        .mode2lTit {
            margin-bottom: 5px;
        }
        .mode2Infor {
            margin-bottom: 0;
        }
        .date3::before {
            top: 3px;
        }
        .mode3bottomUl li {
            width: 100%;
        }
        .learn::before {
            display: none;
        }
        .learn {
            margin-right: 0
        }
        .mode1r {
            margin-top: 0px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
        }
        .mode1l {
            width: 100%;
        }
    }