.banner {

        position: relative;
        z-index: 10;
    }



    .banner li a {
        position: relative;
        display: block;
    }

    .banner li a::before {
        content: '';
        display: block;
        width: 100%;
        height: 138px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .45);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

    .bannerPic {
        padding-bottom: 46.7%;
        overflow: hidden;
    }

    .banner .slick-dots {
        bottom: 50px;
        display: inline-block;
        right: calc(78px + 5.3%);
        width: auto;
    }

    .banner .slick-dots li {
        margin: 0 15px;
        position: relative;
        vertical-align: top;
    }

    .banner .slick-dots li button {
        width: 10px;
        height: 10px;
        background: #d8d8d8;
        position: relative;
    }

    .banner .slick-dots li.slick-active button {
        background: #428EFF;
    }

    .banner .slick-dots li::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background: #fff;
        position: absolute;
        border-radius: 50%;
        left: 10px;
        top: 10px;

    }

    .banner .slick-dots li.slick-active::before {
        background: #428EFF;
    }

    .banner .slick-dots li.slick-active button::after {
        content: '';
        display: block;
        width: 34px;
        height: 34px;
        background: url(../images/q2.png) no-repeat;
        position: absolute;
        left: -12px;
        top: -12px;
        /* animation-name: rotate;
        -webkit-animation-name: rotate;

        animation-duration: 4s;
        -webkit-animation-duration: 4s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important; */
    }

    @keyframes rotate {
        0% {
            transform: scale(0.8) rotate(0deg);

        }

        25% {
            transform: scale(1) rotate(90deg);

        }

        50% {
            transform: rotate(180deg);

        }



        75% {
            transform: rotate(270deg);

        }


        100% {
            transform: rotate(360deg);
            background: url(../images/q5.png) no-repeat;
        }
    }

    .bannerps {
        position: absolute;
        left: 4%;
        bottom: 47px;
        width: 60%;
        overflow: hidden;
    }

    .bann {
        width: 105.3%;
        padding-right: 5.3%;
    }

    .bann .slick-prev {
        left: calc(100% - 3.9%);
        margin: 0;
        top: calc(100% - 51px);
        width: 16px;
        height: 30px;
        background: url(../images/l.png) no-repeat;

    }

    .bann .slick-next {
        left: calc(100% - 1.2%);
        margin: 0;
        top: calc(100% - 51px);
        width: 16px;
        height: 30px;
        background: url(../images/r.png) no-repeat;
    }

    .banner::before {
        content: '';
        display: block;
        width: 1px;
        height: 138px;
        background: #D8D8D8;
        position: absolute;
        left: calc(100% + 3%);
        bottom: 0;
    }

    main {
        display: block;
    }

    /* mode1 */
    .mode1 {
        background: url(../images/mode1bg.png) no-repeat;
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
    }

    .title {
        margin: 55px 0 28px;
        width: calc(100% + 37px);
        padding-right: 37px;
        /* background: rebeccapurple; */
        box-sizing: border-box;
    }

    .title i {
        display: inline-block;
        /* width: 28px; */
        /* height: 39px; */
        vertical-align: bottom;
    }

    .tit {
        display: inline-block;
        vertical-align: bottom;
        position:relative;
        
    }
 .tit::after{
     content:'';
     display:block;
     width:38px;
     height:11px;
     position:absolute;
     right: -45px;
     top: 18px;
     background:url('../images/ta.png') no-repeat;
 }
    .tit h3 {
        color: #043D92;
    /* font-size: 20px; */}

    .tit p {
        color: rgba(4, 61, 146, .4);
        font-size: 10px;
        /* display: none; */
    }

    .more {
        color: #043D92;
        line-height: 53px;
        vertical-align: middle;
        position: relative;
    }



    .more::before {
        content: '';
        display: block;
        width: 216px;
        height: 16px;
        background: url(../images/moreb.png) no-repeat;
        position: absolute;
        left: -220px;
        top: calc(50% - 8px);
    }

    .more::after {
        content: '';
        display: block;
        width: 78px;
        height: 78px;
        background: url(../images/ma.png) no-repeat;
        position: absolute;
        right: -44px;
        top: -30px;
    }

    .mode1l {
        width: 588px;
        display: block;
        overflow: hidden;
    }

    .mode1lImg {
        padding-bottom: 57.14%;
        overflow: hidden;
    }

    .mode1lInfor {
        padding: 35px 40px 39px 21px;
        box-sizing: border-box;
        background: #fff;
    }

    .mode1lInfor p {
        line-height: 21px;
        color: #333;
        margin-right: 30px;
    }

    .date {
        padding-left: 18px;
        color: #999999;
        position: relative;

    }

    .date::before {
        content: '';
        display: block;
        width: 13px;
        height: 13px;
        background: url(../images/clock.png) no-repeat;
        position: absolute;
        left: 0;
        top: 2px;
    }

    .mode1Ul {
        margin: 0 -12px;
        /* overflow: hidden; */
    }

    .mode1Ul li {
        display: block;
        float: left;
        transition: all .3s ease-in-out;
    }

    .mode1Ul li:hover {
        transform: translateX(8px);
    }

    .mode1Ul a {
        display: block;
        margin: 0 12px;
        width: 280px;

        background: #fff;
    }


    .mode1rImg {
        padding-bottom: 57.1%;
        overflow: hidden;
    }

    .mode1rInfor {
        /* background: #fff; */
        padding: 15px 13px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .mode1rInfor p.gp-f16 {
        line-height: 24px;
        height: 48px;
        overflow: hidden;
        color: #333;
        margin-bottom: 18px;

    }

    .mode1rInfor p.gp-f14 {
        line-height: 22px;
        height: 110px;
        overflow: hidden;
        color: #999;
        margin-bottom: 31px;
    }

    .mode1rInfor::before {
        content: '';
        display: block;
        width: 4px;
        height: 20px;
        background: #FFB223;
        position: absolute;
        left: 0;
        top: 17px;
    }

    .mode1Top {
        margin-bottom: 24px;
        overflow: hidden;
        clear: both;
    }

    .mode1Bottom {
        margin: 0 -12px;
        overflow: hidden;
        clear: both;
    }

    .mode1Bottom a {
        display: block;
        margin: 0 12px;
        padding: 21px 17px;
        box-sizing: border-box;
        background: #fff;
    }

    .mode1Bottom a p {
        line-height: 24px;
        height: 72px;
        overflow: hidden;
        color: #333;
        margin-bottom: 18px;
    }

    .mode1Bottom li {
        margin-bottom: 24px;
        transition: all .3s ease-in-out;
    }

    .mode1Bottom li:hover {
        transform: translateX(8px);
    }

    /* mode2 */
    .mode22 {
        overflow: hidden;
    }

    .mode2Ul {
        margin: 0 -12px;
        overflow: hidden;
    }


    .mode2Ul a {
        display: block;
        margin: 0 12px;
        padding: 21px 25px;
        background: url(../images/mode2b.png) no-repeat;
        background-size: 100% 100%;
    }

    .date2 {
        margin-bottom: 19px;
    }

    .mode2Ul a p {
        line-height: 24px;
        height: 48px;
        color: #333;
        overflow: hidden;
    }

    .mode2Ul a span {
        display: block;
        line-height: 22px;
        height: 44px;
        overflow: hidden;
        color: #999;
    }

    .preferte {
        width: 110px;
        height: 1px;
        display: block;
        margin: 12px 0;
        background: #D8D8D8;
        animation-name: preferte;
        -webkit-animation-name: preferte;

        animation-duration: .3s;
        -webkit-animation-duration: .3s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important;
    }


    @keyframes preferte {
        0% {
            width: 0;

        }

        25% {
            width: 44px;

        }

        50% {
            width: 55px;

        }



        75% {
            width: 82px;

        }


        100% {
            width: 110px;

        }
    }

    .mode2Ul li:hover {
        animation-name: uptodown;
        -webkit-animation-name: uptodown;

        animation-duration: .3s;
        -webkit-animation-duration: .3s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important;
    }

    @keyframes uptodown {
        0% {
            transform: translateY(0px);

        }

        25% {
            transform: translateY(-3px);

        }

        50% {
            transform: translateY(-6px);

        }

        75% {
            transform: translateY(-3px);

        }

        100% {
            transform: translateY(0px);

        }
    }

    /* mode3 */
    .mode3 {
        overflow: hidden;
        margin-bottom: 26px;
    }

    .mode3Ul a {
        background: #013584;

        padding: 26px 17px;
        box-sizing: border-box;
        display: block;
        position: relative;
        overflow: hidden;
    }

    .mode3Ul li:nth-child(odd) {
        margin-top: 28px;
    }

    .mode3Ul li:nth-child(odd) a {
        background: #043D92;
    }

    .mode3Ul a::before {
        content: '';
        display: block;
        width: 210px;

        height: 117px;
        background: url(../images/Fill\ 3.png) no-repeat;
        background-size: cover;
        position: absolute;
        right: -42px;
        bottom: 0;
    }

    .mode3Ul p.gp-f16 {
        line-height: 24px;
        height: 48px;
        overflow: hidden;
    }

    .mode3Ul i {
        width: 100%;
        height: 1px;
        display: block;
        margin: 22px 0;
        background: rgba(255, 255, 255, .42);
        animation-name: preferte2;
        -webkit-animation-name: preferte2;

        animation-duration: .3s;
        -webkit-animation-duration: .3s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important;
    }

    @keyframes preferte2 {
        0% {
            width: 0;

        }

        25% {
            width: 44px;

        }

        50% {
            width: 55px;

        }



        75% {
            width: 82px;

        }


        100% {
            width: 110px;

        }
    }

    .mode3Ul p.gp-f14 {
        line-height: 24px;
        color: rgba(255, 255, 255, .74);
        margin-bottom: 14px;
    }

    .mode3Ul li:hover a::before {
        animation-name: slideRight;
        -webkit-animation-name: slideRight;

        animation-duration: .8s;
        -webkit-animation-duration: .8s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important;
    }

    /* mode4 */
    .mode4 {
        overflow: hidden;
        /* margin-bottom: 20px; */
        padding-bottom: 25px;
        box-sizing: border-box;
        position: relative;
        z-index: 100;
    }

    .tabListBox {
        display: none;
    }

    .mode4Ul {
        width: 551px;

        box-shadow: 0px 2px 4px rgba(100, 100, 100, .5);
    }

    .mode4lPic {
        padding-bottom: 75.68%;
    }

    .mode4Ul2 {
        margin-left: 551px;
    }

    .mode4Ul2 li {
        padding-bottom: 25px;
        margin-bottom: 10px;
        border-bottom: 1px solid #D8D8D8;
    }

    .mode4Ul2 li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border: none;
    }

    .mode4Ul2 li a {
        display: block;
        padding: 0px 0 0 32.5px;

        position: relative;
        overflow: hidden;

        transition: all .5s ease;
        box-sizing: border-box;
    }

    .mode4Ul2 li a::before {
        content: '';
        display: block;
        width: 19px;
        height: 15px;
        background: url(../images/jt.png) no-repeat;
        position: absolute;
        z-index: 10;
        top: 31px;
        right: 16.5px;
    }

    .mode4Ul2 li a::after {
        content: '';
        display: block;
        width: 0%;
        height: 100%;
        transition: all .3s ease-in-out;
        background: #043D92;
        position: absolute;
        left: 0;
        top: 0;
    }

    .mode4Ul2 li:hover a::after {
        width: 100%;
    }

    .date3::before {
        background: url(../images/clock3.png) no-repeat;

    }

    .date3 {
        margin-bottom: 9px;
        position: relative;
        z-index: 10;
    }

    .mode4Ul2 p.gp-f16 {
        color: #333;
        margin-bottom: 16px;
        line-height: 18px;
        position: relative;
        z-index: 10;
        margin-right: 30px;
    }

    .mode4Ul2 p.gp-f14 {
        line-height: 22px;
        height: 44px;
        overflow: hidden;
        position: relative;
        z-index: 10;
        color: #999;
    }

    .mode4Ul2 li:hover {
        border: none;
        padding-bottom: 0px;

        margin-bottom: 5px;
    }

    .mode4Ul2 li:hover a {


        padding: 13px;
    }

    .mode4Ul2 li:hover .date3 {
        color: rgba(255, 255, 255, .56);
    }

    .mode4Ul2 li:hover .date3::before {
        background: url(../images/clock2.png) no-repeat;
    }

    .mode4Ul2 li:hover p.gp-f16 {
        color: #fff;
    }

    .mode4Ul2 li:hover p.gp-f14 {
        color: rgba(255, 255, 255, .56);
    }

    /* mode5 */
    .mode5 {
        padding-bottom: 54px;

        position: relative;
        z-index: 0;
    }

    .mode55 {
        position: relative;
        z-index: 10;
    }

    .mode5::before {
        content: '';
        display: block;
        width: 100%;
        height: 786px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: url(../images/mode5bg.png) no-repeat bottom;
        background-size: cover;
    }


    .mode5Ul {
        overflow: hidden;
        margin: 0 -10px;
        padding-right: 88px;
        position: relative;
        z-index: 10;
    }

    .mode5Ul a {
        display: block;
        margin: 0 10px;

    }

    .mode5Ul li:hover a {

        animation-name: expandUp;
        -webkit-animation-name: expandUp;

        animation-duration: .8s;
        -webkit-animation-duration: .8s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        visibility: visible !important;
    }

    .mode5p::before {
        content: '';
        display: block;
        width: 4px;
        height: 23px;
        background: #FFB223;
        position: absolute;
        left: 0;
        top: 15px;
    }

    .mode5Top {
        padding-bottom: 68.17%;
    }

    .mode5p {
        padding: 15px 37px 18px 17px;
        background: #fff;
        position: relative;
    }

    .mode5p p {
        line-height: 21px;
        height: 42px;
        overflow: hidden;
        color: #333;
    }

    .mode5Ul .slick-prev {
        width: 45px;
        height: 45px;
        background: url(../images/5l.png) no-repeat;
        left: calc(100% - 45px);
        margin-top: 0;
        top: calc(100% - 110px);
    }

    .mode5Ul .slick-next {
        width: 45px;
        height: 45px;
        background: url(../images/5r.png) no-repeat;
        top: calc(100% - 45px);
        left: calc(100% - 45px);
        margin-top: 0;

    }

    /* mode6 */
    .mode6 {
        position: relative;
        z-index: 10;
    }

    .mode66 {
        position: relative;
        z-index: 20;
    }

    .mode6::before {
        content: '';
        display: block;
        width: 100%;
        height: 530px;
        background: #FBFAF8;
        position: absolute;
        top: 238px;
        left: 0;
    }

    .mode6l {
        width: 693px;
    }

    .mode6Ul {
        position: relative;
    }

    .mode6Ul::before {
        content: '';
        display: block;
        width: 1px;
        height: 81px;
        background: #D8D8D8;
        position: absolute;
        /* left: calc(100% + 3%); */
        bottom: 0;
        right: 33px;
    }

    .mode6Ul li {
        overflow: hidden;
    }

    .mode6Img {
        padding-bottom: 63.6%;
    }

    .mode6r {
        margin-left: 693px;
        /* padding: 1px; */
        padding-left: 0;
        box-sizing: border-box;
    }

    .mode6rTop {
        padding: 45px 38px 25px 30px;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(100, 100, 100, .5);
    }

    .tit6 {
        padding-bottom: 28px;
        border-bottom: 1px solid #D8D8D8;
        margin-bottom: 12px;
    }

    .tit6 h2 {
        line-height: 21px;
        color: #043D92;
        font-weight: normal;
    }

    .mode6rTop p {
        line-height: 49px;
        height: 196px;
        overflow: hidden;
        color: #999;
    }

    .mode6Ul {
        animation-name: stretchRight;
        -webkit-animation-name: stretchRight;

        animation-duration: 1.5s;
        -webkit-animation-duration: 1.5s;

        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;

        transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -webkit-transform-origin: 0% 0%;
    }

    .mode6more {
        display: inline-block;
        width: 109px;
        height: 109px;
        overflow: hidden;
    }

    .mode6Ul .slick-prev {
        left: calc(100% - 65px);
        margin: 0;
        top: calc(100% - 51px);
        width: 16px;
        height: 30px;
        background: url(../images/l.png) no-repeat;

    }

    .mode6Ul .slick-next {
        left: calc(100% - 15px);
        margin: 0;
        top: calc(100% - 51px);
        width: 16px;
        height: 30px;
        background: url(../images/r.png) no-repeat;
    }

    /* mode7 */
    .mode7 {
        position: relative;
        z-index: 15;
    margin-bottom: 56px;}

    .mode7con {
        overflow: hidden;
        margin: 0 -15px;
        padding: 30px;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0px 5px 18px rgba(0, 0, 0, .05);
    }

    .mode7con ul {

        width: 33%;
        float: left;
    }

    .mode7con ul a {
        display: block;
        margin: 0 15px;
        overflow: hidden;
    }

    .mode7con li {
        position: relative;
    }

    .mode7con li a::before {
        content: '';
        display: block;
        width: 0%;
        height: 4px;
        background: #043D92;
        position: absolute;
        transition: all .3s ease-in-out;
        left: 30px;
        top: 0;

    }

    .mode72 li {
        margin-bottom: 30px;
    }

    .mode72 li:last-child {
        margin-bottom: 0;
    }

    .mode7con li:hover a::before {
        width: calc(100% - 30px);
        left: 15px;
    }

    .mode71 a {
        display: block;
        padding: 25px 15px;
        background: #fafafa;
        box-sizing: border-box;
    }

    .mode72 a {
        display: block;
        padding: 25px 27px;
        background: #fafafa;
        box-sizing: border-box;
    }

    .mode71 a h3, .mode72 a h3 {
        line-height: 24px;
        height: 48px;
        overflow: hidden;
        color: #333;
        font-weight: normal;
    }

    .mode71 a i, .mode72 a i {
        width: 194px;
        height: 1px;
        display: block;
        margin: 18px 0 23px;
        background: #FFB223;
        animation-name: preferte;
        -webkit-animation-name: preferte;
        animation-duration: .3s;
        -webkit-animation-duration: .3s;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        visibility: visible !important;
    }

    .mode71 a p {
        line-height: 31px;
        color: #999;
        height: 279px;
        overflow: hidden;
    }

    .mode72 a p {
        line-height: 28px;
        color: #999;
        height: 56px;
        overflow: hidden;
    }

    @media screen and (max-width:1600px) {
        header::before {

            height: 576px;
        }
    }

    @media screen and (max-width:1300px) {

        .bann .slick-prev {
            left: calc(100% - 4.5%);
        }

        .mode1l {
            width: 480px;
        }

        .mode1rInfor p.gp-f14 {
            height: 22px;
        }
    }

    @media screen and (max-width:1200px) {
        .mode1l {
            width: 389px;
        }
    }

    @media screen and (max-width:1100px) {
        .mode1l {
            width: 290px;
        }

        .mode1rInfor p.gp-f16 {
            height: 24px;
            margin-bottom: 10px;
        }

        .mode1rInfor p.gp-f14 {
            /* height: 88px; */
            margin-bottom: 10px;
        }

        .mode4Ul {
            width: 510px;
        }

        .mode4Ul2 {
            margin-left: 510px;
        }

        .mode4Ul2 p.gp-f16 {
            margin-bottom: 6px;
        }

        .mode4Ul2 li:hover a::before {
            top: 43px;
        }

        .mode5, .mode6, .mode7 {
            overflow: hidden;
        }

        .mode55 {
            position: relative;
            z-index: 10;

        }

        .mode6l {
            width: 520px;
        }

        .mode6r {
            margin-left: 520px;
        }

        .mode6rTop {
            padding: 20px;
        }

        .tit6 {
            padding-bottom: 15px;
        }

        .mode6rTop p {
            line-height: 32px;
            height: 130px;
        }

        .mode7con ul a {
            margin: 0 10px;
        }

        .mode7con {
            margin: 0;
            width: 100%;
        }
    }

    @media screen and (max-width:1024px) {
        .mode1l {
            width: 100%;
            float: none;
            margin-bottom: 20px;
        }

        .mode1Ul {
            float: none;
        }

        .mode1Ul a {
            height: auto !important;
            width: auto !important;
        }

        .mode1Ul li {
            width: 50%;
        }

        .mode1lInfor {
            padding: 20px;
        }
    }

    @media screen and (max-width:996px) {
        .bann .slick-prev {
            transform: scale(.8);

        }

        .bann .slick-next {
            transform: scale(.8);
        }

        .mode2Ul li, .mode3Ul li {
            margin-bottom: 24px;
        }

        .mode4Ul {
            width: 100%;
            float: none;
        }

        .mode4Ul2 {
            margin-left: 0px;
            width: 100%;
            margin-top: 20px;
        }

        .mode4Ul2 li a {
            padding-left: 13px;
        }

        .mode6l {
            width: 100%;
            float: none;
        }

        .mode6r {
            margin-left: 0px;
        }

        .mode7con ul {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    @media screen and (max-width:767px) {
        .bann .slick-prev {
            left: calc(100% - 5.5%);
            transform: scale(.6);

            bottom: 20px !important;
        }

        .bann .slick-next {
            left: calc(100% - 2.2%);
            transform: scale(.6);
            bottom: 20px !important;
        }

        .banner .slick-dots {
            right: 7.4%;
        }

        .banner .slick-dots li {
            margin: 0 10px;
        }

        .banner .slick-dots, .bannerps {
            bottom: 20px !important;
        }

        .banner::before {
            height: 73px;
        }

        .banner li a::before {

            height: 59px;
        }

        .more::before {
            content: '';
            display: block;
            width: 40px;
            height: 16px;
            background: url(../images/moreb.png) no-repeat right;
            position: absolute;
            left: -44px;
            top: calc(50% - 8px);
        }

        .title {
            margin: 20px 0;
        }

        .mode5Ul {
            padding-right: 40px;
        }
    }

    @media screen and (max-width:479px) {
        .banner .slick-dots {
            display: none !important;
        }

        header::before {
            height: 204px !important;
        }

        .mode1Ul li {
            width: 100%;
            margin-bottom: 20px;
        }

        .mode1Ul li:last-child {
            margin: 0
        }

        .mode6more {
            display: inline-block;
            width: 70px;
            height: 70px;
            overflow: hidden;
        }

        .mode7con {
            padding: 15px
        }

        .mode1rInfor p.gp-f14, .mode1Bottom a p {
            height: auto;
        }

        .mode3Ul li:nth-child(odd) {
            margin-top: 0;
        }

        .title i {
            height: 28px;
        }

        .tit h3 {
            font-size: 18px;
        }

        .more {
            line-height: 28px;
        }

        .mode3Ul p.gp-f16 {
            height: auto;
        }

        .more::before {

            width: 24px;
            height: 16px;

            left: -27px;
            top: calc(50% - 8px);
        }
    }

    @media screen and (max-width:413px) {
        .banner::before, .bann .slick-next, .bann .slick-prev {
            display: none !important;
        }

    }