.bannerPic {
        padding-bottom: 34.37%;
    }
    
    .main {
        display: block;
    }
    
    .mode1Top {
        margin: 0px -1px;
        margin-top: -70px;
        position: relative;
        z-index: 10;
        padding: 10px 0;
        margin-bottom: 20px;
    }
    
    .mode1Top a {
        margin: 0 1px;
        padding: 10px;
        background: #f5f5fa;
        display: block;
    }
    
    .mode1PIc {
        padding-bottom: 71.67%;
    }
    
    .mode1msg {
        color: #2b76c7;
        line-height: 38px;
        text-align: center;
        position: relative;
    }
    
    .mode1msg::before {
        content: '';
        position: absolute;
        width: calc(50% - 45px);
        height: 1px;
        background: #dcdcdc;
        left: 0;
        top: 50%;
    }
    
    .mode1msg::after {
        content: '';
        position: absolute;
        width: calc(50% - 45px);
        height: 1px;
        background: #dcdcdc;
        right: 0;
        top: 50%;
    }
    
    .mode1Top p {
        line-height: 26px;
        height: 52px;
        overflow: hidden;
        text-align: center;
        color: #666;
        padding: 0 25px;
    }
    
    .mode1Top li:hover {
        /* padding: 10px 0; */
        margin: -10px 0;
    }
    
    .mode1Top li:hover a {
        background: #2b76c7;
        box-shadow: 10px 15px 20px rgba(43, 118, 199, .15);
        padding-bottom: 30px;
    }
    
    .mode1Top li:hover .mode1msg,
    .mode1Top li:hover p {
        color: #fff;
    }
    
    .mode1Top li:nth-child(4) .mode1msg::before {
        content: '';
        position: absolute;
        width: calc(50% - 75px);
        height: 1px;
        background: #dcdcdc;
        left: 0;
        top: 50%;
    }
    
    .mode1Top li:nth-child(4) .mode1msg::after {
        content: '';
        position: absolute;
        width: calc(50% - 75px);
        height: 1px;
        background: #dcdcdc;
        right: 0;
        top: 50%;
    }
    
    .mode1 {
        padding-bottom: 47px;
        position: relative;
        z-index: 2000;
    }
    
    .mode1l {
        width: calc(50% - 30px);
        display: inline-block;
    }
    
    .mode1r {
        width: calc(50% - 30px);
        display: inline-block;
    }
    
    .title {
        margin: 30px 0;
        position: relative;
    }
    
    .title::before {
        content: '';
        display: block;
        width: calc(100% - 178px);
        height: 1px;
        background: #dcdcdc;
        position: absolute;
        right: 38px;
        top: 50%;
    }
    
    .title i {
        width: 27px;
        height: 26px;
        display: inline-block;
        margin-right: 9px;
        vertical-align: middle;
    }
    
    .title h3 {
        line-height: 26px;
        color: #333;
        display: inline-block;
        vertical-align: middle;
    }
    
    .more {
        line-height: 26px;
        color: #999;
    }
    
    .mode1lUl span {
        line-height: 26px;
        color: #999;
        margin-left: 20px;
    }
    
    .mode1lUl p {
        line-height: 26px;
        color: #333;
    }
    
    .mode1lUl li {
        margin-bottom: 10px;
        transition: all .4s ease-in-out;
    }
    
    .mode1lUl li:hover {
        transform: translateX(5px);
    }
    
    .mode1lUl li:last-child {
        margin-bottom: 0;
    }
    
    .title2 {
        text-align: center;
        position: relative;
    }
    
    .title2::before {
        content: '';
        display: block;
        width: calc(50% - 105px);
        height: 1px;
        background: #dcdcdc;
        position: absolute;
        right: 38px;
        top: 50%;
    }
    
    .title2::after {
        content: '';
        display: block;
        width: calc(50% - 90px);
        height: 1px;
        background: #dcdcdc;
        position: absolute;
        left: 0;
        top: 50%;
    }
    
    .mode2 {
        overflow: hidden;
        padding-bottom: 35px;
        background: #f5f5fa;
    }
    
    .mode2Ul {
        font-size: 0;
        margin: 0 -15px;
        overflow: hidden;
    }
    
    .mode2Ul li {
        width: 10%;
        margin-bottom: 15px;
        display: inline-block;
        transition: all .4s ease-in-out;
    }
    
    .mode2Ul li:hover i {
        transition: all .4s ease-in-out;
        transform-style: preserve-3d;
        transform: rotateY(360deg);
    }
    
    .mode2Ul li a {
        display: block;
        margin: 0 15px;
        padding: 15px 0;
        border: 1px dashed #2b76c7;
        border-radius: 10px;
        text-align: center;
    }
    
    .mode2Ul li a i {
        display: inline-block;
        width: 52px;
        margin-bottom: 7px;
        height: 42px;
    }
    
    .mode2Ul li a p {
        line-height: 26px;
        color: #333;
    }
    
    @media screen and (max-width: 1201px) {
        .mode2Ul li a {
            display: block;
            margin: 0 5px;
        }
        .mode2Ul {
            margin: 0 -5px;
        }
    }
    
    @media screen and (max-width: 1100px) {
        .mode1Top p {
            padding: 0;
        }
    }
    
    @media screen and (max-width: 997px) {
        .mode1Top li {
            margin-bottom: 20px;
        }
        .mode1l {
            width: 100%;
        }
        .mode1r {
            width: 100%;
        }
        .mode1Top {
            margin-bottom: 0;
            margin-top: 20px;
        }
        .title {
            margin: 18px 0;
            position: relative;
        }
        .mode2Ul li {
            width: 20%;
        }
    }
    
    @media screen and (max-width:768px) {
        .mode2Ul li {
            width: 25%;
        }
    }
    
    @media screen and (max-width:479px) {
        .mode2Ul li {
            width: 33.333%;
        }
    }
    
    @media screen and (max-width:400px) {
        .mode1Top li {
            width: 100%;
        }
        .mode2Ul li {
            width: 50%;
        }
    }