@charset "utf-8";

.section1 {
    box-shadow: 6px 3px 10px 0px rgba(221, 232, 241, 0.4);
}

.s1 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 9;

}

.s1 ul li {
    width: 50%;

}


.s1 ul li {
    width: 25%;
    padding: 15px;
    display: flex;
    align-items: center;
    height: 154px;
    /* margin: 60px 0; */
    transition: all .6s;
}

.s1 ul li a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.home5-t ul li:nth-child(2n) a {
    justify-content: flex-end;
}

.s1 ul li a .icon {
    width: 75px;
    height: 75px;
    border: 1.5px dashed #005CB7;
    border-radius: 50%;
    padding: 7px;
    margin-right: 20px;
}

.s1 ul li:nth-child(2n) a .icon {
    border: 1.5px dashed #14A0E1;
}

.s1 ul :hover .icon img {
    animation: icon-yh 0.6s linear;
}

@keyframes icon-yh {
    0% {
        transform: rotateZ(0);
    }

    10% {
        transform: rotateZ(10deg);
    }

    20% {
        transform: rotateZ(0);
    }

    30% {
        transform: rotateZ(-10deg);
    }

    40% {
        transform: rotateZ(0);
    }

    50% {
        transform: rotateZ(10deg);
    }

    60% {
        transform: rotateZ(0);
    }

    70% {
        transform: rotateZ(-10deg);
    }

    80% {
        transform: rotateZ(0);
    }

    90% {
        transform: rotateZ(10deg);
    }

    100% {
        transform: rotateZ(0);
    }
}

.s1 ul li:hover a .icon {
    border: 0.01rem dashed #0135A3;
}



.s1 ul li a .icon span {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: #005CB7;
    border-radius: 50%;
}

.s1 ul li:nth-child(2n) a .icon span {
    background: #14A0E1;
}

.s1 ul li:hover a .icon span {
    background: #0135A3;
}

.s1 ul li:nth-child(2n-1):hover a .icon span {
    background: #14A0E1;
}

.s1 ul li a .text {
    flex: 1;
    min-width: 0;
}

.s1 ul li a .text h2 {
    font-size: 22px;
    color: #262525;
    ;

}

.s1 ul li a .text p {
    font-size: 18px;
    line-height: 24px;
    color: #999999;

}

.list li {
    line-height: 61px;
    position: relative;
    padding-right: 105px;
    border-bottom: 1px solid #E8E8E8;
}

.list li a {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.list li span {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    color: #A7A7A7;
}

.list li:hover span {
    color: rgba(5, 81, 178, 0.7);
}

.list li:hover a {
    color: #0551B2;
}

.section3 {
    padding: 50px 0;
    background: url(../images/sect2-bg.jpg) no-repeat center center/cover;
}

.sect3 .infolist14_3_tit .h3 .con {
    border-image: linear-gradient(to bottom, #fff, #fff);
    border-image-slice: 1;
}

.sect3 .infolist14_3_tit h3 {
    color: #fff;
}

.sect3 .infolist14_3_tit p {
    color: rgba(255, 255, 255, 0.6);
}

.sect3 .wp {
    display: flex;
    justify-content: space-between;
}

.sect3-l {
    width: 49%;
}

.sect3-r {
    width: 49%;
}

.sect3 .modulepic {
    padding-top: 54.38%;
}

.sect3 .modulepic.play .bf {
    display: none;
}

.sect3 .modulepic video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sect3 .modulepic:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.sect3 .modulepic .bf {
    content: "";
    position: absolute;
    width: 107px;
    height: 107px;
    border-radius: 50%;
    background: url(../images/bf.png) no-repeat center center/100% 100%;
    z-index: 9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.section4 {
    padding: 130px 0 55px;
    background: url(../images/sect4-bg.jpg) no-repeat center center/cover;
    overflow: hidden;
}

.sect4 .infolist14_3_tit .con {
    position: relative;
    padding: 0;
    border-image-slice: 0;
    cursor: pointer;
    margin-right: 50px;
}

.sect4 .infolist14_3_tit .con:after {
    content: "";
    position: absolute;
    top: 30%;

    right: calc(100% + 20px);
    width: 15px;
    height: 10px;
    background: url(../images/s4-tit-icon.png) no-repeat center center/100% 100%;
}

.sect4 .infolist14_3_tit .con:first-child::after {
    display: none;
}

.sect4 .infolist14_3_tit h3 {
    font-weight: normal;
}

.sect4 .infolist14_3_tit p {
    opacity: 0;
    z-index: -1;
}

.sect4 .infolist14_3_tit .con.on {
    border-image-slice: 1;
    padding-left: 15px;
}

.sect4 .infolist14_3_tit .con.on h3 {
    font-weight: bold;
}

.sect4 .infolist14_3_tit .con.on p {
    opacity: 1;
    z-index: 9;
}

.sect4 .infolist14_3_tit .more a {
    display: none;
}

.sect4 .infolist14_3_tit .more a.on {
    display: block;
}

.s4 {
    position: relative;

}

.s4 .s4-list {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% + (100vw - 1600px)/2);
    opacity: 0;
    z-index: -1;
    transition: all .6s;
}

.s4 .s4-list.on {
    position: relative;
    opacity: 1;
    z-index: 9;
}

.s4-list ul li a {
    position: relative;
    display: block;
    margin: 0 5px;
    padding: 10px;
    padding-top: 0;
    transition: all .6s;
}

.s4-list ul li:hover a {
    background: #fff;
}

.s4-list ul li a p {
    position: relative;
    line-height: 60px;
    margin-right: 20px;
    font-size: 20px;
    color: #353535;
    background: #fff;
    text-align: center;
    transition: all .6s;
    z-index: 9;
padding-left: 10px;
}

.s4-list ul li:hover a p {
    color: #1578DB;
}

.s4-list ul li:hover a p {
    margin-right: 0;
}

.s4-list ul .slick-list {
    padding-right: 275px;
}

.s4-list ul li a:after {
    content: "";
    position: absolute;
    right: 15px;
    top: 13px;
    width: 11px;
    height: 47px;
    background: url(../images/s4-xx.png) no-repeat center center/100% 100%;
}

.s4-list ul li a .pic {
    padding-top: 66.95%;
}

.s4-list .jt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 180px;
    margin-top: 40px;
}

.s4-list .jt:after {
    content: "";
    position: absolute;
    width: 100vw;
    right: 126px;
    height: 1px;
    background: linear-gradient(270deg, #1578DB 0%, rgba(21, 120, 219, 0) 100%);
}

.s4-list .jt>div {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-left: 30px;
    cursor: pointer;
}

.s4-list .jt .jt-l {
    background: #fff url(../images/jt-l.png) no-repeat center center;
    cursor: pointer;
}

.s4-list .jt .jt-l:hover {
    background: #1578DB url(../images/jt-ll.png) no-repeat center center;
}

.s4-list .jt .jt-r {
    background: #fff url(../images/jt-r.png) no-repeat center center;
    cursor: pointer;
}

.s4-list .jt .jt-r:hover {
    background: #1578DB url(../images/jt-rr.png) no-repeat center center;
}

@media screen and (max-width:1600px) {
    .s4 .s4-list {
        width: 100%;
    }

    .s4-list ul .slick-list {
        padding-right: 0;
    }

    .s4-list .jt {
        margin-right: 0;
    }
}

@media screen and (max-width:1200px) {
    .s1 ul li {
        width: 50%;
        height: 100px;
    }

    .section4 {
        padding: 20px 0;
    }
}

@media screen and (max-width:768px) {
    .sect3 .wp {
        display: block;
    }

    .sect3-l {
        margin-bottom: 15px;
    }

    .sect3-l,
    .sect3-r {
        width: 100%;
    }
}

@media screen and (max-width:600px) {
    .section4 {
        position: relative;
        padding-bottom: 40px;
    }

    .s1 ul li {
        width: 100%;
    }

    .list li span {
        font-size: 15px;
    }

    .list li a {
        font-size: 18px;
    }

    .list li {
        line-height: 45px;
    }

    .section3 {
        padding: 20px 0;
    }

    .sect4 .infolist14_3_tit .con {
        margin-right: 10px;
    }

    .sect4 .infolist14_3_tit .more {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .s4-list .jt {
        margin-top: 15px;
    }

    .sect4 .infolist14_3_tit .con:after {
        display: none;
    }

    .sect4 .infolist14_3_tit h3 {
        font-size: 20px !important;
    }

    .sect4 .infolist14_3_tit p {
        font-size: 14px !important;
    }
}