@charset "utf-8";

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;}
.banner{ overflow: hidden; }
.banner: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.4) 100%);z-index: 1;height: 2.78rem;pointer-events: none;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; transform: scale(1);}
.banner .imgBox .img{padding-bottom: 100vh;transition: 0s;background: none;}
.banner .imgBox .img img{ transition: 0s;}
.banner video{pointer-events: none;-webkit-user-select: none;user-select: none;}


.banner .dots{position: absolute;bottom: .3rem;display: flex;left: auto;z-index: 2;justify-content: center;}
.banner .dots span{width: .32rem;height: .32rem; margin: 0 .1rem !important;opacity: 1; position: relative; background: transparent;}
.banner .dots span::before{ content: ""; position: absolute; top: 50%; left: 50%; width: .12rem; height: .12rem; background: #fff; transform: translate(-50%, -50%); transition: .5s;}
.banner .dots span::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/ba_d.svg) center no-repeat; background-size: 100% auto; opacity: 0; transition: .5s;}
.banner .dots span.active{ margin: 0 .15rem !important;}
.banner .dots span.active::before{ opacity: 0;}
.banner .dots span.active::after{ opacity: 1;}

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

.mousedown{ position: absolute; left: 50%; transform: translateX(-50%); bottom: .4rem; z-index: 2;}
.mousedown img{ width: .32rem; animation: Tmouse 0.8s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;}
@keyframes Tmouse {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
}


.tit1{margin: 0 0 .55rem;position: relative;z-index: 2;}
.tit1 h3{font-size: .64rem;color: #000000;font-family: Marcellus;line-height: 1.125;font-weight: normal;}
.tit1 p{ font-size: .24rem; color: #999999; line-height: 1.25; margin: .24rem 0 0;}

.home1{ background: url(../images/ho1_b.jpg) center no-repeat; background-size: cover;}
.home1 .tit1{width: 13.16rem;max-width: 100%;margin: 0 auto .8rem;text-align: center;}
.home1 .tit1 p{ font-size: .36rem; color: #000}

.home2{ background: #F4F5F7;}

.home2 .left{width: 73.125%;position: relative;}
.home2 .right{ width: 22.375%;}

.lt1{ width: 66.66%;}
.lt1 .imgBox .img{ padding-bottom: 63.07%;}
.lt1 .txt{ margin: .28rem 0 0;}
.lt1 h4{ font-size: .36rem; color: #000000; line-height: .4rem;}
.lt1 p{margin: .3rem 0;}

.lt2{ width: 30.59%; display: flex; flex-direction: column; gap: .72rem;}
.lt2 li{ width: 100%;}
.lt2 .imgBox .img{ padding-bottom: 68.71%;}
.lt2 h4{ margin: .32rem 0;}

.lt3 .imgBox .img{padding-bottom: 157%;}
.lt3 .tit{font-size: .3rem;color: #9C1320;align-items: center;margin: .36rem 0 .22rem;}
.lt3 .tit img{ width: .34rem; margin: 0 .06rem 0 0;}
.lt3 p{ margin: .1rem 0 0}
.lt3 h6{margin: .3rem 0 .65rem;}

.lt3Box .bottom{ align-items: center;}
.lt3Box .bottom .line{flex: 1;height: 1px;background: #05284E;margin: 0 .35rem 0 0;}
.arr1Box{ gap: .12rem; align-items: center;}
.arr1{width: .52rem;height: .52rem;background: rgba(255, 255, 255, 0.44);border-radius: 50vw;font-size: .24rem;color: #05284E;font-family: 'lib';display: flex;align-items: center;justify-content: center;transition: .5s; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.44);}

.more1{font-size: .36rem;color: #9C1320;align-items: center;text-decoration: underline;position: absolute;left: 0;bottom: 0;}
.more1 i{position: relative;border: #9C1320 1px solid;border-radius: 50vw;margin: 0 0 0 .32rem;transition: .5s;}
.more1 i span{display: flex;align-items: center;justify-content: center;width: .52rem;height: .52rem;position: relative;}
.more1 i span:before{content: "";position: absolute;width: .1rem;height: .1rem;background: #0043B8;border-radius: 50vw;transition: .5s;opacity: 0;}
.more1 i span:after{content: "";position: absolute;width: .1rem;height: .1rem;background: #9C1320;border-radius: 50vw;transition: .5s;}

.home3 .tit1{ margin-bottom: .9rem}

.home4 .tit1{ position: relative; z-index: 2; width: 14.9rem; max-width: 100%;}

.mapBox{position: relative;margin: -.8rem 0 0;}
.mapBox .circle1{position: absolute;width: 86.14vw;height: 86.14vw;left: 38%;top: 47%;transform: translate(-50%, -50%);mask: linear-gradient(0deg, transparent 30%, black 50%, black, black 50%, transparent 70%);}
.mapBox .circle1:after{content: "";position: absolute;width: .2rem;height: .2rem;background: #0043B8;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50vw;}
.mapBox .circle1::before{content: "";position: absolute;width: 1.25rem;height: 1.25rem;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50vw;border: 1px solid #BBCBDC;}
.mapBox .circle1 span{width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50vw;transform: scale(1);animation: circleScale 10s linear infinite;z-index: -1;opacity: 0;background: radial-gradient(50% 50% at 50% 50%, #0043b800 0%, #0043b812 100%);border: 3px dashed #08509E;box-shadow: 0px 0px 100px 0px rgba(0, 67, 184, 0.13);}
.mapBox .circle1 span:nth-of-type(2) { animation-delay: 2s;}
.mapBox .circle1 span:nth-of-type(3) { animation-delay: 4s;}
.mapBox .circle1 span:nth-of-type(4) { animation-delay: 6s;}
.mapBox .circle1 span:nth-of-type(5) { animation-delay: 8s;}
@keyframes circleScale {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(1, 1);
    }
}

.lt4{gap: .2rem .54rem;width: 10.14rem;position: relative;z-index: 2;margin: -4.45rem 0 0;max-width: 100%;}
.lt4 li{ flex: 1;}
.lt4 h3{font-size: .72rem;color: #000000;font-family: 'Gilroy Medium';font-weight: normal;}
.lt4 h5{font-size: .24rem;color: #000000;border-bottom: #9C1320 .04rem solid;padding: .15rem 0 .44rem;font-family: 'Gilroy Medium';}
.lt4 h4{ margin: .48rem 0 .15rem;}

.home5{ background: url(../images/ho5_b.jpg) center no-repeat; background-size: cover;}
.home5 .tit1{width: 11.3rem;max-width: 100%;margin: 0 auto;text-align: center;}

.home3 .left{ width: calc(100% - 10.6rem - .75rem);}
.home3 .right{ width: 10.6rem;}

.lt6Box{ overflow: visible;}

.lt7Box{width: 100%;}
.lt7 .a{ display: block; position: relative;}
.lt7 .imgBox:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;height: 60%;background: linear-gradient(180deg, #00000000 33%, #000000 100%);}
.lt7 .imgBox .img{padding-bottom: 57.26%;}
.lt7 .txt{position: absolute;right: 0;bottom: 0;left: 0;z-index: 1;padding: 0 .5rem .36rem;}
.lt7 .txt .ll{width: .76rem;margin: 0 .3rem 0 0;}
.lt7 .txt .rr{ flex: 1; overflow: hidden}
.lt7 h4{color: #fff !important;font-size: .24rem;line-height: .32rem;}
.lt7 .bottom{font-size: .22rem;color: #fff;align-items: center;margin: .1rem 0 0;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;line-height:1.25;flex-wrap: nowrap;justify-content: flex-end;}
.lt7 .bottom i{position: relative;transition: .5s;border: #fff 1px solid;border-radius: 50vw;margin: 0 .1rem 0 0; transition: .5s;}
.lt7 .bottom i span{display: flex;align-items: center;justify-content: center;width: .28rem;height: .28rem;position: relative;}
.lt7 .bottom i span:before{ content: ""; position: absolute; width: .06rem; height: .06rem; background: rgba(255,255,255,.6); border-radius: 50vw; transition: .5s;}
.lt7 .bottom i span:after{ content: ""; position: absolute; width: .06rem; height: .06rem; background: rgba(255,255,255,1); border-radius: 50vw; }

.lt5 li{ position: relative;}
.lt5 li::before{ content: ""; position: absolute; left: 0; width: .12rem; height: .12rem; background: #9C1320; border-radius: 50vw; top: 50%; margin: -.06rem 0 0;}
.lt5 li:nth-child(2):before{ background: #05284E;}
.lt5 li:nth-child(3):before{ background: #0F6AC2;}
.lt5 li:nth-child(4):before{ background: #00933F;}
.lt5 .a{font-size: .42rem;color: #000000;font-family: 'Gilroy Medium';height: 1.5rem;align-items: center;position: relative;padding: 0 .15rem 0 .38rem;}
.lt5 .a::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 74%; height: 1px; background: #D8D8D8;}
.lt5 .a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background: #9C1320; transition: .5s;}
.lt5 .a i{font-size: .4rem;color: #9C1320;font-family: 'lib';opacity: 0;transition: .5s;}

.lt5 li.on .a::after{ width: 100%;}
.lt5 li.on .a i{ opacity: 1;}
.lt5 li.on .a{ color: #05284E}
.lt5 li:nth-child(1).on .a{ color: #9C1320;}
.lt5 li:nth-child(2).on .a{ color: #05284E;}
.lt5 li:nth-child(3).on .a{ color: #0F6AC2;}
.lt5 li:nth-child(4).on .a{ color: #00933F;}


#slider {position: relative;width: 100%;overflow: hidden;cursor: grab;}
.xqzfpages>div.on #slider{transform: translateY(0);opacity: 1; }
#slider.move {cursor: grabbing;}
/* ★ 掉帧修复：移除常驻 will-change —— viewport 的 transform 是静态的，
   常驻合成层会在页面滚动时白白跟随，浪费 GPU 内存与合成带宽；
   内部卡片的持续 transform 动画会被浏览器自动提升为合成层，无需手动声明 */
.viewport {width: 100%;position: relative;left: 50%;transform: translate(-50%, 0);height: 28vw;overflow: hidden;margin: 0 0 .8rem;}
.wrapper {position: relative;height: 100%;width: 100%;overflow: hidden;}
.media {display: block;position: absolute;bottom: 0;left: 50%;opacity: 1;transition: opacity 0.3s ease;-webkit-user-drag: none;user-select: none;color: inherit;text-decoration: none;overflow: hidden;height: auto !important;}

.lt8 .a{ display: block; position: relative;}
.lt8 .imgBox{ border-radius: .1rem; transition: .5s;}
.lt8 .imgBox .img{ padding-bottom: 120%; transition: .5s; }
.lt8 .imgBox1{opacity: 0;}
.lt8 .imgBox2{position: absolute;top: 50%;right: 0;left: 0;transform: translateY(-50%);}
.lt8 .imgBox2:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5, 40, 78, 0.35); transition: .5; opacity: 0;}
.lt8 .txt{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;padding: 0 .3rem;text-align: center;z-index: 2; opacity: 0; transition: .5s;}
.lt8 .txt h4{ font-family: 'Marcellus';font-size: .3rem;color: #fff !important;}
.arr2Box{gap: .22rem;align-items: center;justify-content: center;position: relative;z-index: 2;}
.arr2{width: .68rem;height: .68rem;background: rgba(255, 255, 255, 0.44);border-radius: 50vw;font-size: .24rem;color: #9C1320;font-family: 'lib';display: flex;align-items: center;justify-content: center;transition: .5s; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.44);}

.more2{position: absolute;bottom: 0;right: calc((100vw - 16rem)/2);font-size: .36rem;color: #9C1320;align-items: center;z-index: 2;text-decoration: underline;}
.more2 i{position: relative;transition: .5s;border: #9C1320 1px solid;border-radius: 50vw;margin: 0 0 0 .35rem;transition: .5s;}
.more2 i span{display: flex;align-items: center;justify-content: center;width: .52rem;height: .52rem;position: relative;}
.more2 i span:before{content: "";position: absolute;width: .1rem;height: .1rem;background: #0043B8;border-radius: 50vw;transition: .5s;opacity: 0;}
.more2 i span:after{content: "";position: absolute;width: .1rem;height: .1rem;background: #9C1320;border-radius: 50vw;transition: .5s;}

.mtab1 .hd{ position: relative; z-index: 1;}
/* ★ 掉帧修复：.before/.after 原为 z-index:-1，负 z-index 元素无法被合成器独立提升，
   GSAP 对其做 transform 动画（home1 滚动动画）时整块区域每帧强制重绘 → 掉帧。
   改为 z-index:0 并给 ul 建立 position+z-index:1，视觉层级完全不变（卡片仍在上层），
   但元素可正常提升为合成层，动画走 GPU */
.mtab1 .hd .before{width: 40vw;height: 40vw;content: "";position: absolute;top: 50%;left: 0;margin-left: -2.25rem;margin-top: -20vw;background: url(../images/mtab1_b1.svg) center no-repeat;background-size: cover !important;z-index: 0;}
.mtab1 .hd .after{width: 40vw;height: 40vw;content: "";position: absolute;top: 50%;right: 0;margin-right: -5.25rem;margin-top: -20vw;background: url(../images/mtab1_b2.svg) center no-repeat;background-size: auto 100% !important;z-index: 0;}
.mtab1 .hd ul{ display: flex; align-items: center; position: relative; z-index: 1;}
.mtab1 .hd ul li{flex: 1;margin: 0 -.2rem;position: relative;z-index: 0;}
.mtab1 .hd ul li:nth-child(3){ z-index: 1;}
.mtab1 .hd ul .a{display: block;position: relative;z-index: 1;transition: .5s;}
.mtab1 .hd ul .imgBox{ border-radius: 50vw;}
.mtab1 .hd ul .imgBox .img{background: #9C1320;padding-bottom: 100%;}
.mtab1 .hd ul .imgBox .img img{opacity: 1;}
.mtab1 .hd ul li:nth-child(2) .txt{background: rgba(0, 0, 0, 0.6);}
.mtab1 .hd ul li:nth-child(4) .txt{background: rgba(4, 5, 6, 0.6);}
.mtab1 .hd ul li:nth-child(3) .imgBox .img{background: #02458D;}
.mtab1 .hd ul li:nth-child(5) .imgBox .img{background: #8A9EAF;}

.mtab1 .hd ul li:nth-child(1){ z-index: 5}
.mtab1 .hd ul li:nth-child(2){ z-index: 4}
.mtab1 .hd ul li:nth-child(3){ z-index: 3}
.mtab1 .hd ul li:nth-child(4){ z-index: 2}
.mtab1 .hd ul li:nth-child(5){ z-index: 1}

.mtab1 .hd ul li.on{ z-index: 6;}

.mtab1 .hd ul .txt{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;padding: 0 .55rem;text-align: center;z-index: 2;transition: .5s;border-radius: 50vw;}
.mtab1 .hd ul .txt h4{ font-family: 'Marcellus';font-size: .3rem;color: #fff !important;}
.mtab1 .bd{margin: .4rem 0 .6rem;position: relative;z-index: 2;}
.mtab1 .bd p{width: 11.6rem;margin: 0 auto;max-width: 100%;font-size: .24rem;color: #666;line-height: 1.25;text-align: center;}

.mtab1 .hd .imgBg{ width: 40vw; height: 40vw; content: "";position: absolute;top: 50%;left: 50%;margin-left: -20vw;margin-top: -20vw;background: url(../images/mtab1_b1.svg) center no-repeat;background-size: cover !important;z-index: 0;transition: left .5s, top .5s;pointer-events: none;}

.mtab1 .hd ul li.on .a{box-shadow: 0 .15rem .15rem rgba(0,0,0,.2);border-radius: 50vw}

@media(min-width: 769px){
    .arr1:hover{ border: 1px solid #9C1320; color: #9C1320;}

    .more1:hover i{ mask: linear-gradient(90deg, transparent 0%, black 0%, black, black calc(100% - .08rem), transparent calc(100% - .08rem));}
    .more1:hover i span:before{transform: translateX(.08rem) scale(1.4);opacity: 1;}
    .more1:hover i span:after{transform: scale(1.4); }

    .lt7 .a:hover .bottom i{ mask: linear-gradient(90deg, transparent 0%, black 0%, black, black calc(100% - .04rem), transparent calc(100% - .04rem));}
    .lt7 .a:hover .bottom i span:before{ transform: translateX(.04rem);}

    .arr2:hover{ border: 1px solid #9C1320; color: #9C1320;}

    .lt8 .a:hover .imgBox2{ border-radius: 50vw;}
    .lt8 .a:hover .imgBox2 .img{ padding-bottom: 100%;}
    .lt8 .a:hover .imgBox2:after{ opacity: 1;}
    .lt8 .a:hover .txt{ opacity: 1;}

    .more2:hover i{ mask: linear-gradient(90deg, transparent 0%, black 0%, black, black calc(100% - .08rem), transparent calc(100% - .08rem));}
    .more2:hover i span:before{transform: translateX(.08rem) scale(1.4);opacity: 1;}
    .more2:hover i span:after{transform: scale(1.4); }
}
@media(max-width: 1025px){
    .banner .imgBox .img{ padding-bottom: 50%;}

    .banner .dots{ bottom: .2rem;}

    
}
@media(max-width: 769px){
    .pad1{ padding: .4rem 0;}

    #slider{ margin: -10vw 0 0}


    .mousedown img{ width: .2rem}

    .banner .imgBox .img{ padding-bottom: 55%;}

    .tit1{margin: 0 0 .3rem !important;}
    .tit1 h3{font-size: .3rem;}
    .tit1 p, .home1 .tit1 p{font-size: .18rem;margin: .18rem 0 0;}

    .mtab1 .hd ul{flex-wrap: wrap;justify-content: center;margin: 0 -.1rem;}
    .mtab1 .hd ul li{min-width: 33.33%;margin: -.05rem -.05rem;flex: inherit;}
    .mtab1 .hd ul .txt{ padding: .15rem}

    .mtab1 .hd .before{margin-left: -14vw;top: 9%;width: 60vw;height: 60vw;}
    .mtab1 .hd .after{margin-right: -22vw;top: 68%;}

    .mtab1 .bd p{font-size: .16rem;}
    .mtab1 .bd{ margin: .4rem 0 .1rem;}

    .home2 .left{ width: 100%;}
    .home2 .right{ width: 100%;}

    .lt7 .txt .ll{width: .4rem;margin: 0 .2rem 0 0;}

    .lt1{ width: 100%;}
    .lt2{width: 100%;margin: .3rem 0 0;flex-direction: row;gap: .15rem 14px;}

    .lt1 p{margin: .15rem 0 .2rem;}

    .mtab1 .hd ul .txt h4{ font-size: .18rem !important; line-height: 1.25 !important;}
    .lt2 h4{margin: .2rem 0;font-size: .2rem !important;}

    .more1{font-size: .24rem;position: relative;margin: .25rem 0 .4rem;}
    .more1 svg{ width: .35rem; margin: 0 0 0 .2rem;}
    .lt3 .tit{font-size: .24rem;margin: .2rem 0 .12rem;}
    .lt3 .tit img{ width: .28rem}
    .lt3 h6{ margin: .24rem 0 .25rem}
    .lt3 h6 br{ display: none;}

    .home3 .left{ width: 100%;}
    .home3 .right{width: 100%;padding: .4rem 0 0;}

    .lt5 .a{font-size: .22rem;height: .5rem;padding: 0 .1rem 0 .26rem;}
    .lt5 li::before{ transform: scale(.6)}
    .lt5 .a::before{width: 90%;}
    .lt5 .a i{font-size: .3rem;}

    .lt7Box{width: 100%;}
    .lt7 h4{-webkit-line-clamp: 3;line-clamp: 3;}

    .mapBox{ margin: -5vw 0 0}
    .lt4{margin: -10vw 0 0;gap: .2rem 14px;}
    .lt4 h3{ font-size: .36rem}
    .lt4 h5{font-size: .2rem;line-height: .24rem;min-height: .8rem;padding: .1rem 0 .2rem;}
    .lt4 h4{margin: .2rem 0 .15rem;}

    .mapBox .circle1::before{ width: 16vw; height: 16vw;}
    .mapBox .circle1:after{ width: .14rem; height: .14rem;}

    .viewport{height: 54vw;margin: 0 0 .4rem;}
    .arr2{width: .5rem;height: .5rem;}



    .arr1{ width: .4rem; height: .4rem;}

    .home4{ padding-top: .2rem;}
    .lt7 .bottom{font-size: .16rem;margin: .15rem 0 0;}
    .lt7 .bottom i span{width: .18rem;height: .18rem;}

    .lt7 .txt{padding: 0 .15rem .2rem;}

    .more1 i span{ width: .32rem; height: .32rem;}
    .more1 i{ margin: 0 0 0 .2rem}

    .more2{font-size: .24rem;position: relative;margin: .25rem 0 .4rem;}
    .more2 svg{ width: .35rem; margin: 0 0 0 .2rem;}
    .more2{position: relative;right: auto;margin: .2rem 0 0;justify-content: center;}
    .more2 i span{ width: .32rem; height: .32rem;}
    .more2 i{ margin: 0 0 0 .2rem}
}

.dingwei li{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;width: .5rem;height: .5rem;transform-origin: center;}
.dingwei li:nth-child(1){top: 23%;left: 19%;}
.dingwei li:nth-child(2){top: 27%;left: 20%;}
.dingwei li:nth-child(3){top: 34%;left: 22%;}
.dingwei li:nth-child(4){top: 41%;left: 13.5%;}
.dingwei li:nth-child(5){top: 43%;left: 23%;}
.dingwei li .txt{position: absolute;left: 100%;top: -.1rem;opacity: 0;visibility: hidden;transition: .5s;pointer-events: none;padding: 0 0 0 .25rem;}
.dingwei li .txt .con{ background: #fff;filter: drop-shadow(0px 0px 10px rgba(0, 67, 184, 0.44));padding: .12rem .2rem; position: relative; z-index: 1}
.dingwei li .txt .con:before{content: "";position: absolute;left: -.29rem;top: .12rem;border-bottom: #fff .15rem solid;border-left: transparent .3rem solid;}
.dingwei li .txt p{font-size: .24rem;color: #000;white-space: nowrap;}
.dingwei li:hover .txt{opacity: 1;visibility: visible;pointer-events: inherit;}
.dingwei li:hover{z-index: 11;}

@media(max-width: 769px){
    .dingwei li{ width: .2rem; height: .2rem}
    .dingwei li .txt p{ font-size: .16rem;}
}