﻿

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;height: 100vh; background: #f2f3f4;}
.banner{ overflow: hidden; }
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; }
.banner .imgBox .img{padding-bottom: calc(100vh - .6rem);transition: 0s;}
.banner.on ul li.swiper-slide-active .a .imgBox img, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox img, .banner.on ul li.swiper-slide-prev .a .imgBox img{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.banner .txt .wp{height: 100%;flex-direction: column;justify-content: center;}
.banner h3{font-size: .48rem;color: #fff !important;opacity: 0;font-weight: normal;line-height: 1.2;position: relative;z-index: 1;padding: 0 0 0 .46rem;width: 8rem;max-width: 100%;font-family: 'Poppins SemiBold';bottom:80px;}
.banner h3::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255,255,255,.3);}
.banner h5{font-size: .16rem;color: #fff !important;opacity: 0;position: relative;z-index: 1;padding: 0 0 0 .46rem;width: 8rem;max-width: 100%;margin: .3rem 0 .7rem;line-height: 2;}
.banner .more1w{padding: 0 0 0 .46rem;opacity: 0;display: flex;}

.banner .swiper-slide.swiper-slide-active h3{ animation: enter 2s forwards .2s;}
.banner .swiper-slide.swiper-slide-active h5{ animation: enter 2s forwards .3s;}
.banner .swiper-slide.swiper-slide-active .more1w{ animation: enter 2s forwards .4s;}

@-webkit-keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
@keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}


.banner_box .bottom{ position: absolute; right: 0; bottom: 0; width: 13.4rem; max-width: 100%; height: 1.3rem; padding: 0 .7rem 0 1rem; z-index: 2; }
.banner_box .bottom .box{ height: 100%; align-items: center; }
.banner_box .bottom::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #062e5b; z-index: -1; transform: skewX(-15deg); transform-origin: left bottom;}
.banner_box .bottom .dots span{width: .14rem;height: .14rem;border-radius: 50vw;border: #fff 2px solid;transition: .5s;margin: 0 .14rem 0 0;opacity: 1;background: transparent;}

.banner_box .bottom .dots span.active{ background: #fff;}

.ar1{ width: .7rem; align-items: center;}
.ar1 .arrow{ font-size: .2rem; color: #fff; font-family: 'lib'; transition: .5s; cursor: pointer;}

.pad1{ padding: 1rem 0; overflow: hidden;}

.tit1{ margin: 0 0 .8rem;}
.tit1 h3{ font-size: .52rem; color: #292f32; font-family: 'Poppins SemiBold';}
.tit1 p{ font-size: .16rem; color: #454545; line-height: 1.75; margin: .15rem 0 0;}

.ls2 li{ margin-bottom: .15rem;}
.ls2 .a{font-size: .2rem;color: #95979b;font-family: 'Poppins Medium';position: relative;}
.ls2 .a:before{content: "";position: absolute;border-top: transparent .06rem solid;border-bottom: transparent .06rem solid;border-left: #1c4992 .08rem solid;left: -.22rem;top: 50%;transform: translateY(-50%); transition: .5s; opacity: 0;}

.ls2 li.on .a:before{ opacity: 1;}
.ls2 li.on .a{ color: #1c4992;}

.ar2{ width: 1.34rem; align-items: center;}
.ar2 .arrow{ width: .6rem; height: .6rem; align-items: center; justify-content: center; border: #c3c3c3 2px solid; font-size: .22rem; color: #666666; font-family: 'lib'; transition: .5s; cursor: pointer;}

.index1{ background: #f2f3f4;}
.index1 .left{ width: 4.86rem;}
.index1 .left .hd{ margin-bottom: 1.6rem;}
.index1 .right{ width: calc(100% - 4.86rem);}

.ls3Box{ width: calc((100vw - 14.4rem)/2 + 100%);}
.ls3 .a{ align-items: center; transition: .5s; opacity: .2;}
.ls3 .ls3Box1{width: 6.96rem;}
.ls3 .imgBox{width: 100%;clip-path: polygon(0 100%, 1.9rem 0, 100% 0, 100% 0, 100% 0, calc(100% - 1.9rem) 100%, 0 100%, 0 100%); max-width: 100%}
.ls3 .imgBox .img{ padding-bottom: 89.79%; background: url(../image/ls3_b.jpg) center no-repeat; background-size: cover;}
.ls3 .imgBox .img img{width: auto;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);right: auto;bottom: auto;max-width: 80%;max-height: 80%;}
.ls3 .txt{ width: calc(100% - 6.96rem);}
.ls3 .txt .con{ margin: 0 0 0 -.2rem;}

.ls3 h3{ font-size: .4rem; color: #292f32; font-family: 'Poppins SemiBold'; line-height: 1.15;}
.ls3 p{ font-size: .16rem; color: #7e7e7f; line-height: 1.75; margin: .15rem 0 .4rem;}

.ls3 .swiper-slide-active .a{ opacity: 1;}

.index2{ background: url(../image/in2_b.jpg) center no-repeat; background-size: cover; padding-bottom: 3.7rem;}
.index2 .left{ width: 7.88rem; max-width: calc(100% - 3.8rem - .4rem);}
.index2 .right{ width: 3.8rem; padding: .5rem 0 0;}

.tit2{ margin: 0 0 .8rem;}
.tit2 h6{font-size: .18rem;color: #fff;font-family: 'Poppins Medium';text-transform: uppercase;margin: 0 0 .15rem;}
.tit2 h4{font-size: .5rem;color: #fff;font-family: 'Poppins Medium';text-transform: uppercase;line-height: 1.1;margin: 0;}
.tit2 .arc-con{color: #fff;margin: .25rem 0 0;}

.ls4 li{ border-top: rgba(255,255,255,.6) 1px solid; padding: .1rem 0 0; margin-bottom: .6rem;}
.ls4 .a{ align-items: flex-start;}
.ls4 .h3{ line-height: 1; width: 2.2rem; color: #fff; align-items: flex-end;}
.ls4 .h3 .scNum{ font-size: .6rem; font-family: 'DINPro-Bold';}
.ls4 .h3 small{font-size: .4rem;margin: 0 0 0 .04rem;font-family: 'DINPro-Bold';}
.ls4 .h6{ font-size: .16rem; color: rgba(255,255,255,.6); padding: .02rem 0;}
.ls4 li:last-child{ margin-bottom: 0;}

.index3{ margin: -3rem 0 0; position: relative; z-index: 2; overflow: hidden;}

.ls5 .a{display: block; position: relative}
.ls5 .imgBox .img{ padding-bottom: 43.05%}
.ls5 .ico{ position: absolute; top: 40px;  left: 40px; align-items: center; justify-content: center; z-index: 1}
.ls5 .ico i{ position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 1.2rem; height: 1.2rem}
.ls5 .ico i:before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../image/ls5_b.png) center no-repeat;background-size: cover;z-index: -1; animation: roted 4s linear infinite;}

.index4 .wp{ align-items: center;}
.index4 .left{ width: calc(100% - 6.6rem);}
.index4 .right{width: 6.6rem;position: relative;z-index: 1;padding: .85rem 0;}
.index4 .right::before{ content: ""; position: absolute; top: 0; right: calc((100vw - 14.4rem)/2*-1); bottom: 0; left: 1.9rem; background: url(../image/in4_b1.jpg) center no-repeat; background-size: cover; z-index: -1; clip-path: polygon(0 100%, 1.9rem 0, 100% 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);}

.slides3 .hd{ width: 1.55rem; margin: 0 1.1rem 0 0; }
.slides3 .hd ul{ position: relative;}
.slides3 .hd ul li::before{content: "";position: absolute;width: .05rem;top: .1rem;bottom: -.1rem;background: #567bbd;left: .04rem; transition: .5s;}
.slides3 .hd ul li{ min-height: 1.12rem; position: relative; padding: 0 0 0 .3rem; position: relative;}
.slides3 .hd ul li:after{content: "";position: absolute;top: .06rem;left: 0;width: .13rem;height: .13rem;border-radius: 50%;border: #fff 2px solid;background: #567bbd;box-sizing: border-box; transition: .5s;}
.slides3 .hd ul li a{ font-size: .16rem; color: #292f32; line-height: 1.375; font-family: 'Poppins Medium'}

.slides3 .hd ul li.on::before, .slides3 .hd ul li.on+li::before, .slides3 .hd ul li.on+li+li::before{ background: #eaeaea;}
.slides3 .hd ul li.on+li:after, .slides3 .hd ul li.on+li+li:after, .slides3 .hd ul li.on+li+li+li:after{ border: #eaeaea 2px solid;background: #fff;}
.slides3 .hd ul li:last-child::before{ display: none}

.slides3 .bd{ flex: 1; overflow: hidden;}
.slides3 .bd .ico{ width: .6rem; height: .6rem; border: #1c4992 2px solid; border-radius: 50%; display: flex;align-items: center;justify-content: center;}
.slides3 .bd .ico img{ width: 100%; height: 100%; object-fit: cover;max-width: 50%;max-height: 50%;}
.slides3 .bd h4{ font-size: .3rem; color: #292f32; font-family: 'Poppins Medium'; line-height: 1.375; margin: .16rem 0 .3rem;}
.slides3 .bd p{ font-size: .18rem; color: #414141; line-height: 1.875;}

.tit2.flexjs{ align-items: flex-end;}
.tit2 .ll1{ width: 7.1rem; max-width: calc(100% - 2rem - .3rem);}
.tit2 .ll1 h4{ text-transform: capitalize;}
.tit2.flexjs .more1{}

.index5{ background: url(../image/in5_b.jpg) center no-repeat; background-size: cover;}

.ls6Box{ width: calc((100vw - 14.4rem)/2 + 100%);}
.ls6 .a{ display: block; position: relative; overflow: hidden;}
.ls6 .imgBox .img{ padding-bottom: 57.55%}
.ls6 .txt{ position: absolute; top: 0; bottom: 0; left: -1px; z-index: 1; display: flex; justify-content: center; flex-direction: column; padding: 0 .42rem; width: 100%; background: url(../image/ls6_t.png) left center no-repeat; background-size: auto 100%;}
.ls6 h4{ width: 1.9rem; max-width: 100%; font-size: .24rem; color: #fff !important; line-height: .3rem; max-height: .6rem\0; text-transform: uppercase; font-family: Poppins;}
.ls6 .ico{ height: .44rem; margin: .2rem 0 0;}
.ls6 .ico img{ height: 100%;    filter: brightness(10);}
.hd_text{color: #fff;    font-size: .15rem;margin: 0 0 0 .5rem;}
.ls6W{ margin-bottom: .44rem}
.ls6W1 .swiper-scrollbar{height: 60px;bottom: auto;border-radius: 0;z-index: 1;background: none;}
.ls6W1 .swiper-scrollbar:before{ content: ""; position: absolute; right: 0; top: 50%; left: 0; height: 1px; background:#d8e1ed; z-index: -1}
.ls6W1 .swiper-scrollbar-drag{background: #fff url(../image/drag.png) center no-repeat;height: 60px;cursor: pointer;margin-left: 0;border-radius: 50vw;background-size: 100% 100%;}

.index6 .tit2 { width: 8.2rem; max-width: 100%;}
.index6 .tit2 h4{ text-transform: capitalize; font-size: .4rem;}

.h3-1{ font-size: .54rem; color: #fff; font-family: 'Poppins SemiBold'; text-align: center; margin-bottom: .5rem;}

.index6{ background: url(../image/in6_b.jpg) center no-repeat; background-size: cover;}
.index6 .fl1{ position: relative; z-index: 1;}

.other{position: absolute;top: 50%;right: 0;left: 0;pointer-events: none;z-index: -1;transform: translateY(-50%);}
.other > svg {width: 100%;}
.other > svg .wave {animation: wave 3s linear;animation-iteration-count: infinite;stroke: rgba(255, 255, 255, 0.3);stroke-width: 0.1px;fill: transparent;}
.other > svg .wave#wave3 {animation-duration: 7s;opacity: 0.3;}
.other > svg .wave#wave2 {animation-duration: 5s;animation-direction: reverse;opacity: .3;}

@keyframes wave {
    to {
      transform: translateX(-100%);
    }
}

.ls7{ margin: 0 -7px;}
.ls7 li{ flex: 1; text-align: center; padding: 0 7px;}
.ls7 .ico{ width: .95rem; height: .95rem; background: #386ac4; border-radius: 50vw; margin: 0 auto;}
.ls7 .ico img{ width: 100%; height: 100%; object-fit: cover}
.ls7 h4{ font-size: .22rem; color: #fff !important; font-family: 'Poppins Medium'; margin: .2rem 0 .08rem;}
.ls7 h6{ font-size: .17rem; color: rgba(255,255,255,.7); line-height: 1.875; width: 2.6rem; max-width: 100%; margin: 0 auto;}

.tit2b h4{ color: #292f32; font-family: 'Poppins SemiBold';}

.index7 .tit2{ margin-bottom: .6rem;}
.index7 .content{ margin-bottom: .2rem;}
.index7 .left, .index7 .right{ width: calc(50% - .1rem);}

.ls8 .a{ position: relative;}
.ls8 .imgBox .img{ padding-bottom: 4.36rem;}
.ls8 .imgBox:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);z-index: 1;height: .8rem;}
.ls8 .txt{ position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0 .3rem .3rem;}
.ls8 h4{ margin: .1rem 0 0; color: #fff !important}
.ls8 h6{ color: rgba(255,255,255,.7)}

.ls9{ margin: 0 -.1rem;}
.ls9 li{ width: 50%; padding: 0 .1rem;}
.ls9 .imgBox .img{ padding-bottom: 2.3rem;}
.ls9 .txt{ height: 2.06rem; border: #eaeaeb 1px solid; padding: 0 .3rem; display: flex; flex-direction: column; justify-content: center;}
.ls9 h4{ margin: .1rem 0 .34rem;}

.more5{ font-size: .16rem; color: #374757;}

.index8{ border-top: #eaeaea 1px solid; padding: .5rem 0;}
.ls9s1 li{ width: 25%;}

.ls10W{ position: relative;}
.ls10W .arrow{ font-size: .2rem; color: #212a43; font-family: 'lib'; transition: .5s; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%);}
.ls10W .arrow.prev1{ left: -.5rem;}
.ls10W .arrow.next1{ right: -.5rem;}
.ls10 .imgBox .img{ padding-bottom: 37.83%; background: #fff;}



@media(min-width: 769px){
    .ar2 .arrow:hover{ background: #1c4992; color: #fff; border: #1c4992 2px solid;}

    
}
@media(max-width: 769px){
    .banner h3{font-size: .2rem;padding: 0 0 0 .2rem;margin: .3rem 0 0;}
    .banner h5{font-size: .14rem;padding: 0 0 0 .2rem;margin: .15rem 0 .3rem;display: none;}
    .banner .more1w{padding: .3rem 0 0 .2rem;}

    

    .banner_box .bottom{height: .5rem;width: 97%;padding: 0 15px 0 .3rem;}
    .banner .imgBox .img{padding-bottom: 75vw;transition: 0s;}
    .banner_box{height: calc(75vw + .2rem);}
    .banner_box .bottom .dots span{ width: .1rem; height: .1rem}
    .ar1 .arrow{ font-size: .14rem}
}
@media(max-width: 769px){
    .ar1{ width: .6rem;}

    .pad1{ padding: .4rem 0;}

    .tit1 h3{ font-size: .24rem;}
    .tit1 p{font-size: .14rem;margin: .1rem 0 0;}

    .tit1{ margin: 0 0 .25rem;}
    .index1 .left .hd{margin-bottom: .25rem;}
    .ls2{margin: 0 0 0 .24rem;display: flex;}
    .ls2 .a{ font-size: .18rem;}
    .ls2 li{ margin-right: .3rem}

    .ar2{width: 1rem;position: absolute;left: 0;bottom: .01rem;}
    .ar2 .arrow{ width: .44rem; height: .44rem;}

    .index1 .left{width: 100%;position: relative;}
    .index1 .right{width: 100%;padding: 0;}
    .ls3Box{ width: 100%;}
    .ls3 .ls3Box1{width: 100%;}
    .ls3 .imgBox{width: 100%;clip-path: polygon(0 100%, .6rem 0, 100% 0, 100% 0, 100% 0, calc(100% - .6rem) 100%, 0 100%, 0 100%);max-width: 100%}
    .ls3 .txt{width: 100%;/* width: calc(100% - 1.75rem); */padding: .25rem 0 0;}
    .ls3 .imgBox .img{padding-bottom: 60%;}

    .ls3 .txt .con{ margin: 0 ;}
    .ls3 h3{font-size: .2rem;}
    .ls3 p{font-size: .14rem;margin: .06rem 0 .1rem;}

    .index2 .left{width: 100%;max-width: 100%;}
    .index2 .right{width: 100%;padding: .4rem 0 0;}

    .tit2 h4{ font-size: .24rem}
    .tit2{ margin: 0 0 .3rem;}
    .tit2 h6{ margin: 0 0 .1rem;}

    .ls4 .h3 .scNum{ font-size: .3rem;}

    .index3{margin: 0;padding-top: .4rem;}
    .ls4 .h3{width: 1.35rem;}
    .ls4 li{margin-bottom: .25rem;border-top: rgba(255, 255, 255, .3) 1px solid;}
    .ls4 .h6{ font-size: .14rem}

    .ls5 .ico i{ width: .6rem; height: .6rem}

    .slides3 .hd{width: 100%;margin: 0;}
    .slides3 .bd{ flex: auto; width: 100%}

    .index4 .left{ width: 100%}
    .index4 .right{width: 100%;margin: .3rem 0 0;padding: .3rem 25%;}

    .slides3 .hd ul li{ min-height: .5rem}
    .slides3 .bd .ico{width: .4rem;height: .4rem;border: #1C4992 1px solid;}
    .slides3 .bd h4{ font-size: .22rem; margin: .16rem 0 .15rem;}

    .index4 .right::before{right: -15px;left: 1.1rem;}

    .tit2 .ll1{width: 100%;max-width: 100%;margin-bottom: .2rem;}

    .ls6W1 .swiper-scrollbar{ height: 30px;}
    .ls6Box{ width: 100%}
    .ls6W1 .swiper-scrollbar-drag{width: 30px !important;height: 30px;}

    .index6 .tit2 h4{ font-size: .24rem}

    .h3-1{font-size: .24rem;margin-bottom: .3rem;}

    .ls7 .ico{ width: .6rem; height: .6rem;}
    .ls7 li{ max-width: 33.33%;}
    .ls7 h4{ font-size: .18rem; margin: .1rem 0 .04rem;}
    .ls7 h6{ font-size: .14rem; line-height: 1.35;}

    .more3c{ justify-content: center; margin: .25rem 0 0;}

    .index7 .tit2{ margin-bottom: .3rem;}
    .index7 .left, .index7 .right{ width: 100%;}
    .more3{ transform-origin: center}

    .ls8 .imgBox .img{ padding-bottom: 60%}

    .index7 .right{ padding: .25rem 0 0}
    .ls9s1 li{ width: 50%; margin-bottom: .2rem}
    .ls9 .imgBox .img{ padding-bottom: 60%;}

    .ls9{ margin: 0 -7px;}
    .ls9 li{ width: 50%; padding: 0 7px;}
    .ls9 .txt{padding: 0 .2rem;height: 1.6rem;}
    .ls9 h4{ margin: .05rem 0 .15rem;}
    .more5{ font-size: .14rem}

    .ls10W .arrow{ display: none}

    .index8{ padding: .2rem 0;}
    .ls8 .txt{ padding: 0 .2rem .2rem;}

    .index7{ padding-bottom: .2rem;}

    .banner .swiper-slide.swiper-slide-active h3{ animation: enter 1s forwards .2s;}
    .banner .swiper-slide.swiper-slide-active h5{ animation: enter 1s forwards .3s;}
    .banner .swiper-slide.swiper-slide-active .more1w{ animation: enter 1s forwards .4s;}

    @-webkit-keyframes enter {
        0% { opacity: 0; transform:translateY(20px); -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); }
        20% { opacity: 0; transform:translateY(20px); -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); }
        100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
    }
    @keyframes enter {
        0% { opacity: 0; transform:translateY(20px); -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); }
        20% { opacity: 0; transform:translateY(20px); -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); -o-transform:translateY(20px); }
        100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
    }
} 
@media(max-width: 560px){
} 
