@charset "UTF-8";

.banenr_center {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-color: #121a38;
}

.banenr_center::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.banenr_center .banner_Ele {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    object-fit: cover;
}

.banenr_center video {
    opacity: 0.7;
}

.banenr_center .ban_text {
    position: absolute;
    left: 50%;
    bottom: 14%;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
}

.banenr_center .ban_name {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    padding-left: 1rem;
    line-height: 2.5rem;
}

.banenr_center .ban_name:before {
    content: '';
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background: #67c9f2;
    border-radius: 50%;
    left: 0;
    top: 0;
    z-index: -1;
}

.banenr_center .ban_tit {
    font-size: var(--f48);
    color: #fff;
    line-height: 125%;
    width: 50%;
    margin: 2% 0 5%;
}

.banenr_center .ban_text .ban_sum {
    color: #fff;
    line-height: 125%;
    width: 100%;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.banenr_center .ban_text .ban_sum svg {
    width: 1rem;
    height: auto;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* 第一屏 */
.h_one {
    padding: 6% 0;
    background: #f1f3f5;
}

.h_numbox {
    gap: 1.25rem;
}

.h_one .left {
    width: calc((100% - 1.25rem) / 2);
    padding: 4%;
    border-radius: .6rem;
    background: url(/src/image/a1.jpg) bottom center/cover;
    transition: all .5s ease;
    background-repeat: no-repeat;
}

.h_pulic_t {
    color: #002757;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    padding-left: 1rem;
    line-height: 2.5rem;
    font-weight: 700;
    display: inline-block;
    letter-spacing: 0.05em;
}

.h_pulic_t:before {
    content: '';
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background: #67c9f2;
    border-radius: 50%;
    left: 0;
    top: 0;
    z-index: -1;
}

.h_one_tit {
    font-size: var(--f36);
    color: #000;
    font-weight: bold;
    line-height: 117%;
    margin: 4% 0 7%;
}

.h_one .left p {
    font-size: var(--f18);
    color: #666;
    line-height: 167%;
    margin-bottom: 13%;
}

.h_one .left .h_more {
    background: var(--li);
    color: #fff;
}

.h_one .right {
    width: calc((100% - 1.25rem) / 2);
    gap: 1.25rem;
}

.h_one .right>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(/src/image/a3.jpg) bottom center / cover;
    padding: 11% 0;
    border-radius: .5rem;
    transition: all .5s ease;
}

.h_one .right>div:first-child {
    background-image: url(/src/image/a2.jpg);
}

.h_one .left:hover,
.h_one .right>div:hover {
    box-shadow: 0 0 1rem rgb(47 147 209 / 35%);
}

.h_one .right>div .num {
    font-weight: 500;
    color: var(--li);
    margin-top: 4%;
}

.h_one .right>div .num span.counter {
    font-size: var(--f60);
    line-height: 100%;
    display: inline-block;
}

.h_one .right>div .num i {
    font-size: var(--f24);
}

.h_one .right>div p {
    font-size: var(--f18);
    color: #000000;
    font-weight: 500;
    line-height: 215%;
}

.h_more {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    transition: all .5s ease;
    background: #fff;
    color: var(--li);
    line-height: var(--f60);
    padding: 0 2.57rem;
    border-radius: 5rem;
}

.h_more:hover {
    background: var(--li1);
    letter-spacing: 1px;
    color: #fff;
}

.h_one ul {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: .6rem;
    margin-bottom: 9%;
}

.h_one ul li {
    width: calc((100% - 1.8rem) / 3);
    padding: 2%;
    border-radius: .35rem;
    position: relative;
    color: #fff;
}

.h_one ul li .img1 {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    transition: all .5s ease;
    position: absolute;
    right: 5%;
    bottom: 11%;
}

.h_one ul li:hover .img1 {
    transform: translateY(-.5rem);
}

.h_one ul li p {
    font-size: var(--f18);
    line-height: 167%;
    margin: 0 0 21%;
    opacity: .7;
    width: 85%;
    min-height: calc(var(--f18) * 3.5);
}

.h_one ul li span.counter {
    font-size: var(--f72);
    display: inline-block;
    line-height: 100%;
}

.h_one ul li i {
    font-size: var(--f60);
    text-transform: uppercase;
}

/* 第二屏 */
.h_two {
    padding: 0 3% 6%;
    background: #f1f3f5;
    text-align: center;
}

.h_two_tit {
    font-size: var(--f42);
    color: #000000;
    font-weight: 700;
    line-height: 115%;
    margin: 1% 0 2%;
}

.swiper.two_swiper {
    margin-top: 4%;
}

.swiper.two_swiper .Limg_con {
    padding-bottom: 85%;
}

a.two_swiper_more {
    color: #010101;
    font-size: var(--f18);
    font-weight: 500;
    line-height: 133%;
    width: calc(var(--f18) * 17);
    display: block;
    margin: 4% auto;
    opacity: 0;
    transition: all .5s ease;
    visibility: hidden;
}

.two_swiper .swiper-slide-active .two_swiper_more {
    opacity: 1;
    visibility: visible;
}

.two_swiper .icon {
    width: var(--f60);
    height: var(--f60);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 50%;
    color: rgb(0 0 0 / 20%);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all .5s ease;
    position: absolute;
    top: 50%;
    margin-top: calc((var(--f60) / 2) * -1);
    z-index: 2;
    user-select: none;
}

.two_swiper .icon:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.two_swiper .swiper-next {
    right: 25%;
}

.two_swiper .swiper-prev {
    left: 25%;
}

a.two_swiper_more:hover {
    color: var(--li);
}

/* 第三屏 */
.h_three {
    overflow: hidden;
    position: relative;
}

.three_swiper_bg .Limg_cov {
    height: 100vh;
    background: #274b86;
}
.three_swiper_bg .Limg_cov img{
    opacity: .7;
}
.three_swiper_bg .tc {
    position: absolute;
    left: 50%;
    top: 14%;
    transform: translateX(-50%);
    justify-content: flex-start;
    color: #fff;
}

.three_swiper_bg .tc .h_pulic_t {
    color: #fff;
    width: 34%;
}

.three_swiper_bg .tc .right {
    width: 44%;
}

.three_swiper_bg .tc .right .bt_tos {
    font-size: var(--f42);
    font-weight: bold;
    line-height: 142%;
}

.three_swiper_bg .tc .right .bt_ton {
    font-size: var(--f18);
    line-height: 133%;
    margin: var(--f30) 0 var(--f54);
}

.h_three .three_swiper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    top: auto;
}

.h_three .three_swiper .Limg_con {
    padding-bottom: 100%;
    filter: brightness(0);
    -webkit-filter: brightness(0);
}

.h_three .three_swiper .flex {
    background: rgb(255 255 255 / 80%);
    border-radius: .5rem;
    padding: 10% 10% 10% 5%;
    overflow: hidden;
    align-items: center;
    cursor: pointer;
    transition: all .5s ease;
    user-select: none;
}

.h_three .three_swiper .swiper-slide-thumb-active .flex {
    background: rgb(255 255 255 / 100%);
}

.h_three .three_swiper .flex .imgs {
    width: 5rem;
    opacity: .3;
    transition: all .5s ease;
}

.h_three .three_swiper .swiper-slide-thumb-active .imgs {
    opacity: 1;
}

.h_three .three_swiper .flex .bt_tot {
    transition: all .5s ease;
    font-size: 1.25rem;
    color: #000000;
    font-weight: 700;
    width: calc(100% - 7.5rem);
    padding: 0 15% 0 5%;
    opacity: .6;
    transition: all .5s ease;
}

.h_three .three_swiper .swiper-slide-thumb-active .bt_tot {
    opacity: 1;
}

.h_three .three_swiper .flex i.icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #fff;
    border-radius: 50%;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all .5s ease;
}

.h_three .three_swiper .swiper-slide-thumb-active i.icon {
    background: var(--li);
    color: #fff;
}

/* 优势 */
.h_wcu {
    padding: 6% 0 4%;
}

.h_wcu .center {
    border-bottom: 1px solid #e5e5e5;
}

.h_wcu .wcu_info {
    width: 50%;
    color: #666666;
    line-height: 150%;
    font-size: var(--f18);
}

.h_wcu ul.bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem 0;
    margin: 5% 0;
}

.h_wcu ul.bottom li {
    width: 50%;
    border-left: .2rem solid var(--li);
    padding-left: 1.5%;
    padding-right: 5%;
}

.h_wcu ul.bottom li .flex {
    align-items: center;
}

.h_wcu ul.bottom li .txt {
    width: 62%;
}

.h_wcu ul.bottom li .img {
    width: 7rem;
    transition: all .5s ease;
}

.h_wcu ul.bottom li:hover .img {
    transform: rotateY(360deg) translateY(-1rem);
}

.h_wcu ul.bottom li .img .Limg_con {
    padding-bottom: 100%;
}

.h_wcu ul.bottom li .txt .wcu_t {
    font-size: var(--f24);
    color: #000;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 4%;
}

.h_wcu ul.bottom li .txt .wcu_in {
    color: #666666;
    line-height: 150%;
}

/* 第四屏 */
.h_four {
    overflow: hidden;
    padding-bottom: 4%;
}

.h_four .flex .four_sort {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    width: 60%;
}

.h_four .flex {
    align-items: center;
    margin-bottom: 2%;
}

.h_four .flex>div {
    width: 20%;
}

.four_sort>div {
    width: 10rem;
    height: 3.625rem;
    border: 1px solid #c0c1c1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #020202;
    font-weight: 500;
    border-radius: 10rem;
    cursor: pointer;
    transition: all .5s ease;
}

.four_sort>div:hover,
.four_sort>div.cur {
    background: var(--li);
    border-color: var(--li);
    color: #fff;
}


.h_four .tabcontrol {
    color: #adadad;
    font-weight: 500;
    font-size: 1rem;
    text-align: right;
}

.h_four .tabcontrol span.tabcontrol-fill {
    color: #002757;
}

.h_four .ab_tc>div {
    display: none;
}

.h_four .ab_tc .cur {
    display: block;
}

.h_four .button {
    margin-top: 2%;
}

.h_four .button>div {
    display: none;
    text-align: center;
}

.h_four .button>div.cur {
    display: block;
}

.h_four .button>div>div {
    display: inline-flex;
    width: var(--f60);
    height: var(--f60);
    border: 1px solid #e7e7e7;
    color: #cccccc;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 0 .5rem;
    cursor: pointer;
    transition: all .5s ease;
    font-size: 1.25rem;
    font-weight: 500;
    user-select: none;
}

.h_four .button>div>div:hover {
    color: #000;
    border-color: #0c315f;
}

.h_four_swbox>div {
    display: none;
}

.h_four_swbox>div.cur {
    display: block;
}

a.news_box {
    background: #f1f3f5;
    display: block;
    border-radius: .5rem;
    overflow: hidden;
    transition: all .5s ease;
    margin: 10% 0;
}

a.news_box .txc {
    padding: 12% 8%;
}

a.news_box .Limg_cov {
    padding-bottom: 67%;
}

a.news_box .Limg_cov {
    transition: all .5s ease;
}

a.news_box:hover .Limg_cov {
    transform: translateY(0%);
    opacity: 1;
}

a.news_box:hover {
    background: #fff;
    box-shadow: 0 0 10px rgb(0 39 87 / 50%);
}

a.news_box .news._time {
    color: #999;
}

a.news_box .news_tit {
    color: #666666;
    font-size: var(--f22);
    line-clamp: 3;
    -webkit-line-clamp: 3;
    line-height: 136%;
    min-height: calc(var(--f22) * 4.1);
    margin-top: var(--f24);
}

a.news_box .news_tit {
    color: #002757;
}


.h_five {
    position: relative;
    padding: 8% 0;
    overflow: hidden;
    z-index: 1;
}

.h_five:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

.h_five video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
    z-index: -1;
}

.h_five .h_pulic_t {
    color: #fff;
}

.h_five .h_five_in {
    font-size: var(--f36);
    color: #fff;
    line-height: 133%;
    margin: 3% 0 4%;
    max-width: calc(var(--f36) * 26);
}

@media only screen and (max-width:1500px) {}

@media only screen and (min-width:769px) {}

@media only screen and (max-width:768px) {
    br {
        display: none;
    }

    body .mySwiper2 {
        padding-top: 70px;
    }

    .banenr_center {
        height: 55vh;
    }

    .banenr_center .ban_name:before {
        top: -2px;
    }

    .banenr_center .ban_tit {
        font-size: 20px;
        line-height: 150%;
        width: 100%;
        margin: 20px auto;
    }

    .banenr_center .ban_text {
        bottom: 30%;
    }

    .banenr_center .ban_text .ban_sum {
        display: none;
    }

    .h_one .left {
        width: 100%;
        padding: 50px 20px;
    }

    .h_one_tit {
        font-size: 24px;
    }

    .h_one .right {
        width: 100%;
        border-top: none;
    }

    .h_one .right>div .img1 {
        width: 50px;
    }

    .h_one .right>div .num span.counter {
        font-size: 36px;
    }

    .h_one {
        padding: 50x 0 0;
    }

    .h_one ul li {
        width: 100%;
        padding: 20px 3%;
    }

    .h_one ul li p {
        margin: 20px 0 10px;
    }

    .h_one ul li .img1 {
        width: 5rem;
        height: 5rem;
    }

    .h_two {
        padding: 50px 3%;
    }

    .h_two_tit {
        font-size: 24px;
        margin: 20px 0;
    }

    .swiper.two_swiper {
        margin-top: 30px;
    }

    .two_swiper .icon {
        display: inline-flex;
        background: #fff;
        position: static;
        margin: 20px 10px;
    }

    .three_swiper_bg .tc .h_pulic_t {
        width: 100%;
    }

    .three_swiper_bg .tc .right {
        width: 100%;
    }

    .three_swiper_bg .tc .right .bt_tos {
        font-size: 22px;
        line-height: 133%;
        margin: 20px 0;
    }

    .h_three .three_swiper .flex i.icon {
        display: none;
    }

    .h_three .three_swiper .flex .bt_tot {
        width: 100%;
    }

    .h_three .three_swiper .flex .bt_tot {
        font-size: 14px;
        width: 100%;
        padding: 0;
        min-height: 42px;
        margin-top: 15px;
    }

    .three_swiper_bg .Limg_cov {
        height: 100%;
        position: absolute;
        width: 100%;
    }

    .three_swiper_bg .tc {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        justify-content: flex-start;
        color: #fff;
        padding: 50px 0 300px;
    }

    .h_wcu {
        padding: 50px 0;
    }

    .h_wcu .wcu_info {
        width: 100%;
        color: #666666;
        line-height: 167%;
        margin: 20px 0 40px;
    }

    .h_wcu ul.bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 0 50px;
    }

    .h_wcu ul.bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 0 50px;
    }

    .h_wcu ul.bottom li .img {
        width: 50px;
    }

    .h_wcu ul.bottom li .img {
        width: 50px;
        transition: all .5s ease;
    }

    .h_wcu ul.bottom li .txt .wcu_t {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .h_wcu ul.bottom li {
        width: 100%;
        border-left: 1px solid var(--li);
        padding: 20px;
        background: #eee;
    }

    .h_wcu ul.bottom li .txt {
        width: calc(100% - 70px);
    }

    .h_four .flex .h_pulic_t {
        width: 130px;
    }

    .h_four .flex .four_sort {
        width: calc(100% - 150px);
    }

    .four_sort>div {
        width: calc((100% - 0.65rem) / 2);
    }

    .h_four .flex .ab_tc {
        display: none;
    }

    .h_four {
        padding-bottom: 50px;
    }

    .h_five .h_five_in {
        font-size: 20px;
        color: #fff;
        line-height: 133%;
        margin: 20px 0 50px;
        max-width: calc(var(--f42) * 20);
    }

    .h_five {
        padding: 80px 0;
    }

    a.news_box .Limg_cov {
        transform: translateY(0%);
        opacity: 1;
    }


}

@media only screen and (max-height:690px) {}

@media (max-height: 750px){
    .three_swiper_bg .tc .h_pulic_t{
        width: 25%;
    }
    .three_swiper_bg .tc .right{
        width: 70%;
    }
    .h_three .three_swiper .flex{
        padding: 8% 8% 8% 5%;
    }
}