@charset "utf-8";
    .section1 {
        padding-top: 60px;
        padding-bottom: 10px;
    }
    
    .title {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .title h2 {
        position: relative;
        line-height: 40px;
        font-size: 36px;
        color: #333;
        font-weight: normal;
    }
    
    .title h2 span {
        position: relative;
        padding-left: 25px;
        font-size: 20px;
        color: #108BFB;
        text-transform: uppercase;
    }
    
    .title h2 span::after {
        content: "";
        position: absolute;
        left: 10px;
        width: 2px;
        top: 50%;
        height: 25px;
        transform: translateY(-50%) rotate(25deg);
        background: #108BFB;
    }
    
    .title .more {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .title .more a {
        display: block;
        width: 70px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: url(../images/more.png) no-repeat center center;
        background-size: 100% 100%;
        font-size: 18px;
        color: #666666;
        transition: all .6s;
    }
    
    .title .more a:hover {
        right: 5px;
        color: #108BFB;
    }
    
    .s1 {
        margin-top: 20px;
    }
    
    .s1 ul li {
        margin: 60px 10px;
        transition: all .6s;
    }
    
    .s1 ul li.slick-center {
        position: relative;
        z-index: 9;
        transform: scale(1.1);
    }
    
    .s1 ul li a {
        display: block;
        border: 1px solid #1B9ED5;
        padding: 30px;
        background: #fff;
    }
    
    .s1 ul li.slick-center a {
        border: 1px solid transparent;
        box-shadow: 0px 6px 17px 0px rgba(27, 158, 213, 0.2443);
        border-bottom: 4px solid #108BFB;
    }
    
    .s1 ul li a .pic {
        padding-top: 56.25%;
    }
    
    .s1 ul li a .text {
        margin-top: 30px;
    }
    
    .s1 ul li a .text h2 {
        font-size: 20px;
        font-weight: normal;
        line-height: 24px;
        height: 48px;
        color: #333333;
        transition: all .6s;
    }
    
    .s1 ul li:hover a .text h2 {
        color: #108BFB;
    }
    
    .s1 ul li a .text p {
        margin-top: 25px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 20px;
        height: 40px;
        color: #666666;
    }
    
    .s1 ul li a .text span {
        font-size: 16px;
        color: #666666;
    }
    
    .section2 {
        padding: 65px 0;
        background: rgba(27, 158, 213, 0.06);
    }
    
    .s2 {
        margin-top: 75px;
    }
    
    .s2 ul li {
        margin: 0 10px;
        transition: all .6s;
    }
    
    .s2 ul li a {
        display: block;
        background: #fff;
        padding: 35px 30px;
        background-position: center center;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0501);
        transition: all .6s;
    }
    
    .s2 ul li:hover a {
        background: url(../images/s2-bg.jpg) no-repeat center center;
        background-size: cover;
    }
    
    .s2 ul li a span {
        font-size: 20px;
        color: #108BFB;
        transition: all .6s;
    }
    
    .s2 ul li:hover a span {
        color: #fff;
    }
    
    .s2 ul li a h2 {
        margin-top: 15px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: normal;
        color: #333333;
        line-height: 24px;
        height: 48px;
        transition: all .6s;
    }
    
    .s2 ul li:hover a h2 {
        color: #fff;
    }
    
    .s2 ul li a p {
        font-size: 16px;
        font-weight: normal;
        color: #666666;
        line-height: 20px;
        height: 40px;
        transition: all .6s;
    }
    
    .s2 ul li:hover a p {
        color: #fff;
    }
    
    .s2 .slick-dots {
        position: relative;
        margin-top: 80px;
    }
    
    .s2 .slick-dots li {
        width: 20px;
        height: 20px;
        background: url(../images/s2-slick.png) no-repeat center center;
        transition: all .6s;
    }
    
    .s2 .slick-dots li.slick-active {
        background: url(../images/s2-slick-active.png) no-repeat center center;
    }
    
    .section3 {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    
    .s3 {
        display: flex;
        align-items: center;
        margin-top: 60px;
    }
    
    .sect3-l {
        width: 710px;
        margin-right: 70px;
    }
    
    .sect3-l .learn-pic {
        position: relative;
    }
    
    .sect3-l .learn-pic>div {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        z-index: -1;
        transition: all .6s;
    }
    
    .sect3-l .learn-pic>div.on {
        position: relative;
        opacity: 1;
        z-index: 9;
    }
    
    .sect3-l a {
        display: block;
        position: relative;
        width: 100%;
        height: 710px;
        padding: 30px;
        border-radius: 50%;
    }
    /* .sect3-l a::before {
        content: "";
        position: absolute;
        right: -13px;
        top: 50%;
        width: 13px;
        height: 13px;
        background: #108BFB;
        transform: translate(-50%, -50%) rotate(0);
        border-radius: 50%;
        transform-origin: -345px;
        animation: rotate2 20s linear infinite;
    } */
    
    .sect3-l a::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(../images/zqq.png) no-repeat center center;
        background-size: 100% 100%;
        /* border: 1px dashed rgba(16, 139, 251, .6); */
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotate2 20s linear infinite;
    }
    
    @keyframes rotate2 {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    .sect3-l a .tpp {
        position: relative;
        border-radius: 50%;
        border: 24px solid rgba(27, 158, 213, 0.1);
        z-index: 9;
    }
    
    .sect3-l a .pic {
        padding-top: 100%;
        overflow: hidden;
        border-radius: 50%;
    }
    
    .sect3-r {
        flex: 1;
        min-width: 0;
    }
    
    .sect3-r ul li {
        position: relative;
        margin: 25px 0;
        cursor: pointer;
        height: 79px;
        transition: all .6s;
    }
    
    .sect3-r ul li.on {
        height: 187px;
    }
    
    .sect3-r ul li::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 120%;
        background: url(../images/s3-r-bg.png) no-repeat right center;
        background-size: 100% 100%;
    }
    
    .sect3-r ul li a {
        display: block;
        padding: 25px 0;
    }
    
    .sect3-r ul li a h2 {
        line-height: 29px;
        padding-left: 20px;
        font-size: 20px;
        color: #333;
        font-weight: normal;
        border-left: 3px solid #108BFB;
    }
    
    .sect3-r ul li.on a h2 {
        padding-left: 0;
        border-left: 3px solid transparent;
        color: #108BFB;
    }
    
    .sect3-r ul li a p {
        margin-top: 15px;
        font-size: 16px;
        color: #666;
        display: none;
        transition: all .6s;
    }
    
    .sect3-r ul li.on a p {
        display: block;
    }
    
    .sect3-r ul li a p img {
        display: inline-block;
        vertical-align: middle;
        padding-right: 5px;
    }
    
    .section4 {
        position: relative;
        padding: 60px 0;
        background: rgba(16, 139, 251, .0573);
    }
    
    .sect4 {
        position: relative;
        z-index: 9;
    }
    
    .s4 {
        border-bottom: 1px solid rgba(16, 139, 251, .4);
    }
    
    .s4 ul li {
        position: relative;
        margin: 50px 15px;
        margin-bottom: 0;
        padding-bottom: 65px;
    }
    
    .s4 ul li::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 151px;
        height: 5px;
        background: #108BFB;
        opacity: 0;
        z-index: -1;
    }
    
    .s4 ul li:hover::after {
        opacity: 1;
        z-index: 9;
    }
    
    .s4 ul li a .tpp {
        width: 205px;
        height: 205px;
        border-radius: 50%;
        margin: 0 auto;
        transition: all .6s;
    }
    
    .s4 ul li a .pic {
        padding-top: 100%;
        border-radius: 50%;
    }
    
    .s4 ul li a:hover .tpp {
        transform: scale(1.1);
    }
    
    .s4 ul li a .pic:hover img {
        transform: scale(1);
    }
    
    .s4 ul li a .txt {
        text-align: center;
        margin-top: 15px;
    }
    
    .s4 ul li a .txt h2 {
        font-size: 20px;
        color: #333333;
        font-weight: normal;
    }
    
    .s4 ul li a .txt p {
        font-size: 16px;
        color: #333333;
    }
    
    .s4 .slick-prev {
        width: 30px;
        height: 30px;
        background: url(../images/s4-l.png) no-repeat center center;
        top: auto;
        transform: none;
        bottom: -15px;
    }
    
    .s4 .slick-next {
        width: 30px;
        height: 30px;
        background: url(../images/s4-r.png) no-repeat center center;
        top: auto;
        transform: none;
        bottom: -15px;
    }
    
    .section5 {
        padding: 60px 0;
        background: rgba(216, 216, 216, .2);
    }
    
    .s5 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 105px;
    }
    
    .s5-l {
        width: 52%;
    }
    
    .s5-l h2 {
        font-size: 30px;
        color: #108BFB;
        font-weight: normal;
        margin-bottom: 30px;
    }
    
    .s5-l p {
        font-size: 20px;
        font-weight: normal;
        line-height: 34px;
        color: #333333;
        text-indent: 2em;
        justify-content: space-between;
    }
    
    .s5-l .more {
        margin-top: 40px;
    }
    
    .s5-l .more a {
        display: block;
        width: 70px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: url(../images/more.png) no-repeat center center;
        background-size: 100% 100%;
        font-size: 18px;
        color: #666666;
        transition: all .6s;
    }
    
    .s5-l .more a:hover {
        color: #108BFB;
    }
    
    .s5-r {
        position: relative;
        width: 44.875%;
        padding: 22px;
    }
    
    .s5-r::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 44px;
        left: 44px;
        border: 1px solid #979797;
    }
    
    .s5-r .pic {
        padding-top: 55.167%;
        z-index: 9;
    }
    
    .s5-r .bf {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 48px;
        height: 48px;
        transform: translate(-50%, -50%);
        background: url(../images/bf.png) no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
    }
    
    .vwrap {
        display: none;
        z-index: 1040000;
        width: 100%;
        position: fixed;
    }
    
    .vwrap .videobtg {
        z-index: 900;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #000;
        opacity: 0.8;
        filter: alpha(opacity=80);
        overflow: hidden;
    }
    
    .vwrap .videobox {
        z-index: 1200;
        width: 1400px;
        max-width: 95%;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -700px;
        object-fit: cover;
        transform: translateY( -50%)
    }
    
    .vwrap .videobox #videobox {
        width: 100%;
        display: inline-block;
        background: #000;
    }
    
    .vwrap .videobox #videobox .img_hezi {
        padding-bottom: 60% !important
    }
    
    .vwrap .videobox #videobox video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #videobox_wrapper {
        height: 100%!important;
    }
    
    .vwrap .close {
        z-index: 999;
        width: 31px;
        height: 31px;
        cursor: pointer;
        position: absolute;
        top: 0px;
        right: -42px;
        text-align: center;
    }
    
    .vwrap .close i {
        display: block;
        width: 31px;
        height: 31px;
        -webkit-transition: 400ms;
        transition: 400ms;
    }
    
    .vwrap .close i svg {
        transition: .6s
    }
    
    .vwrap .close:hover i svg {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    @media(max-width: 992px) {
        .vwrap .videobox {
            width: 94%;
            left: 3%;
            margin-left: 0;
        }
        .vwrap .close {
            right: 0;
            top: -35px;
        }
    }
    
    .section6 {
        padding-top: 50px;
        padding-bottom: 140px;
    }
    
    .s6 {
        margin-top: 90px;
        height: 433px;
    }
    /* .s6 ul {
        display: flex;
        margin: 0 -.9275%;
    }
    
    .s6 ul li {
        margin: 0 .9275%;
        width: 18.75%;
        height: 433px;
        transform-origin: center left;
        transition: all .6s;
    }
    
    .s6 ul li.on {
        width: 36.25%;
        height: 433px;
    }
    
    .s6 ul li a {
        position: relative;
        display: block;
        height: 100%;
    }
    
    .s6 ul li a .pic {
        padding-top: 144.6%;
        height: 100%;
    }
    
    .s6 ul li a .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .s6 ul li.on a .pic {
        padding-top: 74.33%;
        height: 100%;
    }
    
    .s6 ul li a .text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px;
        transition: all .6s;
    }
    
    .s6 ul li a .text span {
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 20px;
        max-height: 40px;
        opacity: .8;
        transition: all .6s;
    }
    
    .s6 ul li a .text p {
        margin-top: 5px;
        font-size: 24px;
        line-height: 30px;
        color: #FFFFFF;
        max-height: 60px;
        transition: all .6s;
    }
    
    .s6 .slick-prev {
        left: -40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: url(../images/s6-l.png) no-repeat center center;
    }
    
    .s6 .slick-next {
        right: -40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: url(../images/s6-r.png) no-repeat center center;
    }
     */
    
    .index-ywfw {
        position: relative;
        margin-top: 80px;
        height: 434px;
    }
    
    .index-ywfw li {
        width: 18.75%;
        margin-right: 2.5%;
    }
    
    .index-ywfw li.swiper-slide-active {
        width: 36.25%;
    }
    
    .index-ywfw .pic {
        height: 434px;
    }
    
    .index-ywfw .pic img {
        background-position: left center;
        object-fit: cover;
    }
    
    .index-ywfw .text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px;
        transition: all .6s;
    }
    
    .index-ywfw .text span {
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 20px;
        max-height: 40px;
        opacity: .8;
        transition: all .6s;
    }
    
    .index-ywfw .text p {
        margin-top: 5px;
        font-size: 24px;
        line-height: 30px;
        color: #FFFFFF;
        max-height: 60px;
        transition: all .6s;
    }
    
    .index-ywfw .ywfw-prev,
    .index-ywfw .ywfw-next {
        width: 312.5px;
        height: 312.5px;
        position: absolute;
        z-index: 9;
        top: 50%;
        margin-top: -156.25px;
        cursor: pointer;
    }
    
    .index-ywfw .ywfw-prev {
        margin-top: auto;
        top: 50%;
        transform: translateY(-50%);
        left: -40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: url(../images/s6-l.png) no-repeat center center;
    }
    
    .index-ywfw .ywfw-next {
        margin-top: auto;
        top: 50%;
        transform: translateY(-50%);
        left: auto;
        right: -40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: url(../images/s6-r.png) no-repeat center center;
    }
    
    @media screen and (max-width: 1700px) {
        .index-ywfw .ywfw-prev {
            left: 0;
        }
        .index-ywfw .ywfw-next {
            right: 0;
        }
    }
    
    @media screen and (max-width: 1400px) {
        .s1 ul li {
            margin: 60px 5px;
        }
        .s2 ul li a {
            padding: 20px 15px;
        }
        .sect3-l {
            width: 490px;
        }
        .sect3-l a {
            height: 490px;
        }
        .sect3-l a::before {
            transform-origin: -240px;
        }
    }
    
    @media(max-width: 1000px) {
        .s1 ul li a {
            padding: 15px;
        }
        .section1 {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .s1 ul li {
            margin: 20px 0;
        }
        .section2,
        .section3,
        .section4,
        .section5,
        .section6 {
            padding: 20px 0;
        }
        .s2 {
            margin-top: 15px;
        }
        .s2 .slick-dots {
            margin-top: 15px;
        }
        .sect3-l {
            width: 300px;
            margin-right: 20px;
        }
        .sect3-l a {
            height: 300px;
            padding: 10px;
        }
        .sect3-l a .tpp {
            border: 10px solid rgba(27, 158, 213, 0.1);
        }
        .sect3-l a::before {
            transform-origin: -150px;
        }
        .sect3-r ul li a {
            padding: 10px 0;
        }
        .sect3-r ul li {
            height: 50px;
            margin: 10px 0;
        }
        .sect3-r ul li.on {
            height: 165px;
        }
        .s3 {
            margin-top: 15px;
        }
        .s5 {
            margin-top: 15px;
        }
        .s5-l h2 {
            font-size: 22px;
        }
        .s5-l p {
            font-size: 16px;
        }
        .index-ywfw li.swiper-slide-active {
            width: 60%;
        }
        .index-ywfw li {
            width: 17.5%;
        }
        .index-ywfw .text {
            padding: 15px;
        }
        .index-ywfw .text p {
            font-size: 18px;
        }
    }
    
    @media(max-width: 769px) {
        .s1 ul li.slick-center {
            transform: scale(1);
        }
        .s1 ul li {
            margin: 20px 5px;
        }
    }
    
    @media(max-width: 700px) {
        .title {
            justify-content: space-between;
        }
        .title h2 {
            font-size: 22px;
        }
        .title h2 span {
            font-size: 14px;
            padding-left: 20px;
        }
        .title .more a {
            font-size: 14px;
        }
        .s1 {
            margin: 0;
        }
        .s1 ul li a .text h2 {
            font-size: 18px;
        }
        .s1 ul li a .text {
            margin-top: 15px;
        }
        .s1 ul li a .text p {
            margin: 5px 0;
            font-size: 14px;
        }
        .s2 ul li a h2 {
            font-size: 18px;
            margin: 10px 0;
        }
        .s3 {
            display: block;
        }
        .sect3-l {
            margin-right: 0;
            margin: 0 auto;
        }
        .sect3-r ul li a h2 {
            font-size: 18px;
        }
        .sect3-r ul li.on {
            height: auto;
        }
        .s4 ul li a .tpp {
            width: 130px;
            height: 130px;
        }
        .s4 ul li {
            margin: 20px 15px;
            padding-bottom: 5px;
        }
        .s4 ul li::after {
            bottom: -20px;
        }
        .sect5 .title h2 span {
            display: block;
        }
        .s5 {
            flex-wrap: wrap;
        }
        .s5-l {
            width: 100%;
        }
        .s5-l h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .s5-l .more {
            margin-top: 15px;
        }
        .s5-l .more a {
            font-size: 14px;
        }
        .s5-r {
            margin-top: 15px;
            width: 100%;
            padding: 10px;
        }
        .index-ywfw li.swiper-slide-active {
            width: 100%;
        }
        .index-ywfw li {
            width: 100%;
        }
        .index-ywfw {
            margin-top: 15px;
        }
    }