.banner{ position: fixed; left: 0; top: auto; width: 100%; height: 644px; max-height: 9rem; background: url(../images/banner-bg.png) center center no-repeat; background-size: cover; overflow: hidden;}
.ban-mask{ height: 644px; max-height: 9rem;}
/* .banner::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 192 / 12; background: url(../images/ban-mask.png) center bottom no-repeat; background-size: 100% 100%; z-index: 2; pointer-events: none;} */
.ban-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.ban-text{ height: 100%; justify-content: flex-end; padding-bottom: 60px;}
.ban-top{ max-width: 1300px; margin: 0 auto .7rem;}
.ban-left{ flex-shrink: 0; width: 50%; max-width: 600px;}
.ban-con{ flex: auto; max-width: 53%; overflow: hidden; text-align: left;}
.ban-con .swiper-slide{ display: flex; flex-direction: column; justify-content: center; height: auto; direction: ltr;}
.ban-title{ line-height: 1; margin: .15rem 0; font-weight: 700;}
.ban-info{ margin-bottom: .1rem;}
.ban-des{ line-height: 1.5;}
.ban-img{ flex-shrink: 0; width: 42%; max-width: 541px; border-radius: .8rem 0 .8rem .2rem; text-align: center; overflow: hidden;}
.ban-img img{ display: block; width: 100%; height: auto; margin: 0 auto; aspect-ratio: 543 / 345;}

.ban-bot{ height: 50px;}
.ban-links{ max-width: 1230px; gap: .2rem; column-gap: 116px; margin: 0 auto; overflow: hidden;}
.ban-links a{ display: block; width: fit-content; min-width: 210px; color: var(--blue-color); padding: 1px; border-radius: 5px; text-align: center; background: var(--lbg);}
.ban-links a span{ display: block; height: 100%; line-height: 24px; padding: .1rem; background: #FFFFFF; border-radius: 5px; transition: all .3s;}
.ban-links a:hover span{ color: #FFFFFF; background-color: transparent;}

.ban-btn{ position: relative; gap: .4rem; padding: .3rem 0; background: #DDEFFC;}
.ban-prev,
.ban-next{ font-size: .32rem; color: #356aa6; font-weight: bold; cursor: pointer;}
.ban-btn .swiper-pagination{ margin: 0;}
.ban-btn .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 0 .1rem; background-color: transparent; border: 2px solid var(--blue-color);}
.ban-btn .swiper-pagination-bullet-active{ background-color: var(--blue-color); transform: scale(1.4);}
.ban-btn::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 192 / 12; background: url(../images/ban-mask.png) center bottom no-repeat; background-size: 100% 100%; z-index: 2; pointer-events: none; transform: translateY(-95%);}

.main-bg{ min-height: 120vh;}
.box1-bg{ position: relative; padding: .55rem 0 .57rem; padding: .45rem 0 .57rem; background: #F2F2F2; overflow: hidden;}
.box1-title{ padding: .4rem 0; background: #DDEFFC; overflow: hidden;}  
.box1{ overflow: hidden;}
.box1-swiper{ margin-top: .5rem;}
.box1-swiper .swiper-container{ padding: 20px; padding-top: 25px; margin: -20px; width: calc(100% + 40px);}
.box1-swiper .swiper-slide{ height: auto; max-width: 25%;}
.box1-card{ display: block; height: 100%; padding: 1px; border-radius: 10px; background: var(--lbg); margin: 0 auto; transition: all .3s;}
.box1-item{ display: block; height: 100%; border-radius: 10px; background: #FFFFFF; overflow: hidden;}
.box1-icon{ width: 70px; height: 70px; max-width: .8rem; max-height: .8rem; margin: 10px auto;}
.box1-icon img{ display: block; max-width: 100%; max-height: 100%;}
.box1-img{ padding-bottom: 77.81%;}
.box1-text{ padding-left: .4rem; padding-right: .2rem;}
.box1-name{ margin: .13rem 0;}
.box1-name a{ color: var(--blue-color);}
.box1-con{ margin: 15px 0;}
.box1-con p{ margin: .06rem 0;}
.box1-con a{ display: block; width: fit-content;; color: var(--blue-color); line-height: 1.4;}
.box1-con a:hover{ color: transparent; background: var(--lbg); background-clip: text; font-weight: bold;}
.box1-card:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); transform: translateY(-5px);}
.box1-card:hover .box1-icon img{ animation: pulse 1s linear;}


.box1-list {
    margin: 0 -20px;
    padding-top: .55rem;
}

    .box1-list li {
        width: 25%;
        padding: 0 20px;
    }

.box2-bg{ position: relative; padding: .55rem 0; padding: .45rem 0 .55rem; background: #FFFFFF; overflow: hidden;}
.box2-wrap{ margin-top: .55rem; border-radius: 2rem 0 2rem 0; overflow: hidden;}
.box2-item{ padding: .8rem .3rem .6rem; background: url(../images/box2-bg1.png) center center no-repeat; background-size: cover;}
.box2-title{ flex-shrink: 0; min-width: 3.8rem; text-align: center;}
.box2-list{ flex: auto; column-gap: 10px; text-align: center;}
.box2-list li{ flex: 1;}
.box2-link{ display: block;}
.box2-icon{ width: 90px; height: 90px; max-width: 1rem; max-height: 1rem; margin: 0 auto;}
.box2-icon img{ max-width: 100%; max-height: 100%;}
.box2-text{ position: relative; width: fit-content; min-width: 1.24rem; color: #4f4f4e; padding: 10px 15px; border-radius: .1rem; background: #A8D5F5; background: rgba(255, 255, 255, 0.7); margin: .36rem auto 0; z-index: 1; transition: all .3s;}
.box2-text::before{ display: block; content: ""; position: absolute; inset: 0; border-radius: .1rem; background: var(--lbg); z-index: -1; opacity: 0; visibility: hidden; transition: all .3s;}
.box2-item:nth-child(2n){ flex-direction: row-reverse; background-image: url(../images/box2-bg2.png);}
.box2-item:nth-child(2n) .box2-title{ color: var(--purple-color);}
/* .box2-item:nth-child(2n) .box2-text{ color: #40377b; background: #DAD6F9;} */
.box2-link:hover .box2-icon img{ animation: box2Up 1s linear;}
.box2-link:hover .box2-text{ color: #FFFFFF; background: transparent;}
.box2-link:hover .box2-text::before{ opacity: 1; visibility: visible;}
.box2-item:nth-child(2n) .box2-link:hover .box2-icon img{ animation: box2Left 1s linear;}

.box3-bg{ position: relative; padding: .55rem 0 0; padding: .45rem 0 0; z-index: 1; overflow: hidden;}
.box3-img{ position: absolute; inset: 0; z-index: -1; animation-duration: 10s; animation-iteration-count: infinite;}
.box3-title{ margin: 0.2rem 0 .5rem;}
.box3-list{ column-gap: 10px; margin: .4rem 0 1rem; margin: .4rem 0 .6rem;}
.box3-list li{ flex: 1; max-width: 215px;}
.box3-circle{ position: relative; aspect-ratio: 1 / 1; padding: 3px; margin: 60px auto 90px; border-radius: 50%; background: var(--lbg);}
.box3-circle-con{ position: relative; width: 100%; height: 100%; color: #4f4f4e; row-gap: .2rem; border-radius: 50%; background-color: #FFFFFF; z-index: 1;}
.box3-num{ font-weight: 700;}
.box3-circle-bg{ position: absolute; left: -43%; top: -43%; width: 186%; height: 186%; background: url(../images/box3-circle-bg.png) center center no-repeat; background-size: contain; animation: RturnAni 100s linear infinite; z-index: -2;}
.box3-circle-dot{ position: absolute; left: -43%; top: -43%; width: 186%; height: 186%; animation: turnAni 100s linear infinite;}
.box3-circle-dot img{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: inx_c2fade 4.5s linear infinite;}
.box3-circle-dot img:nth-child(2) { animation-delay: 1.5s;}
.box3-text{ color: #4f4f4e; line-height: 1.8; font-weight: 500;}
.box3-list li:nth-child(2n){ margin-top: .8rem;}
.box3-list li:nth-child(2n) .box3-circle-bg{ animation-name: turnAni;}
.box3-list li:nth-child(2n) .box3-circle-dot{ animation-name: RturnAni;}

.box3-swiper{ margin: .4rem 0 .6rem;}
.box3-swiper .swiper-slide{ position: relative; row-gap: .3rem; padding: .69rem .6rem; border-radius: .14rem; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); box-shadow: 0 0 7px 3px rgba(97, 67, 67, 0.35) inset; height: auto; /* 与 box1/ban 一致：覆盖 Swiper 库的 height:100%，让 flex stretch 以最高 slide 拉平 */}
.box3-item{ column-gap: .2rem; transition: all .3s;}
.box3-icon{ flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; row-gap: .2rem; width: 25%; max-width: 70px;}
.box3-icon img{ display: block; max-width: 100%; height: auto; margin: 0 auto;}
.box3-con{ flex: 1; line-height: 24px; -webkit-line-clamp: 3;}
.box3-brief{ flex: 1; line-height: 24px;}
.box3-hover{ position: absolute; inset: 0; padding: .54rem .54rem; padding-left: .74rem; opacity: 0; visibility: hidden; transition: all .3s;}
.box3-hover .box3-douhao{ position: absolute;}
.box3-hover .box3-douhao1{ left: .28rem; top: .16rem;}
.box3-hover .box3-douhao2{ right: .28rem; bottom: .1rem; transform: scaleX(-1) scaleY(-1);}
.box3-detail{ line-height: 24px; margin: .1rem 0; padding-right: 10px; margin-right: -10px; height: 100%; overflow-y: auto;}
.box3-swiper .swiper-slide:hover .box3-item{ opacity: 0; visibility: hidden;}
.box3-swiper .swiper-slide:hover .box3-hover{ opacity: 1; visibility: visible;}

.box3-bot{ background-color: #f3f3f3; overflow: hidden;}
.box3-logo{ position: relative; padding: 10px 40px; background: #f3f3f3;}
.box3-logo .swiper-slide{ width: fit-content;}
.box3-logo-img{ height: 50px;}
.box3-logo-img img{ max-height: 50px;}
.box3-prev,
.box3-next{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; color: #a8a9a9; font-weight: bold; cursor: pointer; transition: all .3s;}
.box3-prev{ left: 10px;}
.box3-next{ right: 10px;}
.box3-prev:hover,
.box3-next:hover{ color: var(--blue-color);}

.box4-bg{ position: relative; padding: .55rem 0; background-color: #FFFFFF; overflow: hidden;}
.box4-post{ flex-direction: row-reverse; margin: .4rem 0 0;}
.box4-post-img{ flex-shrink: 0; width: 44%; max-width: 638px; margin-left: -8%;}
.box4-post-img img{ width: 100%; height: 100%; object-fit: cover;}
.box4-post-right{ width: 64%; max-width: 920px; min-width: 0;}
.box4-post-list{ display: flex; flex-direction: column; row-gap: .18rem; height: 100%;}
.box4-post-list li{ flex: 1; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2); border-radius: .12rem; background: #FFFFFF; overflow: hidden;}
.box4-post-list li a{ position: relative; display: flex; flex-direction: column; justify-content: space-between; row-gap: .18rem; height: 100%; padding: .2rem .3rem 0; z-index: 1;}
.box4-post-list .time{ transition: all .3s linear;}
.box4-post-list .name{ color: #4f4f4e; transition: all .3s linear;}
.box4-post-list .line{ height: 7px; background: url(../images/box4-line.png) left center no-repeat; background-size: cover;}
.box4-post-list .more{ position: relative; color: #575555; line-height: 30px; margin: 0 -.3rem; padding: 0 .3rem; font-style: normal; transition: all .3s linear;}
.box4-post-list .more::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--lbg); z-index: -1; transition: all .3s linear;}
.box4-post-list li a:hover .more{ color: #FFFFFF;}
.box4-post-list li a:hover .more::before{ height: 100%;}

.box4-tech-list{ gap: .2rem;}
.box4-tech-list li{ flex: auto;}
.box4-tech-link{ column-gap: .2rem; border-radius: 8px; transition: all .3s linear;}
.box4-tech-icon{ flex-shrink: 0; width: 80px; height: 80px; max-width: 1rem; max-height: 1rem;}
.box4-tech-icon img{ max-width: 100%; max-height: 100%;}
.box4-tech-title{ flex: auto; line-height: 30px; font-weight: 500; overflow: hidden;}
.box4-tech-link:hover{ padding: .1rem; margin: -.1rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-5px);}
.box4-tech-link:hover .box4-tech-icon img{ transform: rotateY(360deg); transition: all 1s ease;}

.box4-promotion{ padding: 1px; background: var(--lbg);}
.box4-promotion-list{ display: grid; grid-template-columns: auto 40px; row-gap: 8px; column-gap: 1.4rem; justify-content: center; align-items: center; padding: .2rem; background-color: #FFFFFF;}
.box4-promotion-list li,
.box4-promotion-list li a{ display: contents;}
.box4-promotion-list .name{ transition: all .3s linear;}
.box4-promotion-list .calendar{ width: 55px; max-width: .6rem; height: auto;}
.box4-promotion-list li a:hover .name{ color: var(--purple-color);}
.box4-promotion-list li a:hover .calendar{ transform: rotateY(360deg); transition: all 1s ease;}

.box5-bg{ position: relative; overflow: hidden; z-index: 1;}
.box5-bg::before{ content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 169px; max-width: 2rem; aspect-ratio: 169 / 327; background: url(../images/box5-circle.png) right center no-repeat; background-size: contain;}
.box5-border{ padding: 1px; border-radius: .1rem; background: var(--lbg);}
.box5{ position: relative; column-gap: .2rem; border-radius: .1rem; background-color: #FFFFFF; overflow: hidden;}
.box5-left{ flex: auto; display: flex; flex-direction: column; justify-content: center; padding: .3rem; padding-left: .9rem; overflow: hidden;}
.box5-title{ max-width: 420px; line-height: 1.5; margin-top: .15rem; color: transparent; background: var(--lbg); background-clip: text;}
.box5-line{ column-gap: .2rem;}
.box5-line span{ flex: auto; height: 7px; background: url(../images/box4-line.png) left center no-repeat; background-size: 100% 100%;}
.box5-line img{ flex-shrink: 0;}
.box5-des{ margin: 0 0 .3rem;}
.box5-order{ display: block; width: 157px; line-height: 33px; border-radius: 20px; background: var(--lbg); background-position: 0 center; background-size: 150% auto; text-align: center; transition: all .3s linear;}
.box5-order a{ display: block; width: 100%; height: 100%; color: #FFFFFF;}
.box5-order:hover{ background-position: 50% center;}
.box5-right{ flex-shrink: 0; width: 52%; max-width: 742px; border-left: 1px solid #01b997; border-radius: 4rem 0 0 0; overflow: hidden;}
.box5-right img{ width: 100%; height: 100%; object-fit: cover;}


.box6-bg{ padding-top: 2rem; margin-top: -2rem; background: #F2F2F2 url(../images/box6-bg.png) center center no-repeat; background-size: 100% 100%;}
.box6{ padding: .55rem 0 .6rem; gap: .15rem;}
.box6-left{ flex: 1; min-width: 0;}
.box6-title{ line-height: 1.2; margin-bottom: .6rem; font-weight: normal;}
.box6-title span{ display: inline-block; background-image: var(--lbg); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.box6-line{ height: 7px; margin: .3rem 0; background: url(../images/box4-line.png) left center no-repeat; background-size: 100%;}
.box6-text{ line-height: 1.9;}
.box6-text img{ max-width: 50%; height: auto;}

.box6-right { width: 42.5%;}
.box6-form{ max-width: 555px; margin: 0 -10px; row-gap: .2rem;}
.box6-form li { width: 100%; padding: 0 10px;}
.box6-form li:nth-child(1),
.box6-form li:nth-child(2) { width: 50%;}
.box6-item{ position: relative; padding: 1px; background: var(--lbg); border-radius: 30px;}
.box6-item input { display: block; width: 100%; height: 46px; line-height: 44px; padding: 0 .25rem; border-radius: 30px; background-color: #FFFFFF; border: none;}
.box6-area { border-radius: 20px;}
.box6-item textarea { width: 100%; height: 88px; line-height: 28px; padding: 10px 25px; border-radius: 18px;}
.box6-item input:focus,
.box6-item textarea:focus { color: #333333;}

.box6-btn { padding-top: .28rem; text-align: center;}
.box6-btn-con{ width: fit-content; padding: 1px; background: var(--lbg); border-radius: 3em; margin: 0 auto; transition: all 0.5s ease;}
.box6-btn button { width: 170px; font-size: 16px; color: var(--purple-color);; line-height: 40px; border-radius: 3em; border: none; background: #FFFFFF; text-transform: uppercase; cursor: pointer; text-align: center; transition: all 0.5s ease;}
.box6-btn .box6-btn-con:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(38,104,176,0.3);}
.box6-btn .box6-btn-con:hover button{ background-color: transparent; color: #FFFFFF;}
.spinnerindex{ display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid white; border-radius: 50%; animation: RturnAni 1s linear infinite; margin-right: 10px; vertical-align: middle;}
.loading .spinnerindex{ display: inline-block;}

.box1-bg .box3-title{ margin-top: .1rem;}
.box2-bg .box3-title{ margin-top: 0;}

.box4-swiper{ position: relative; overflow: hidden;}
.box4-swiper .swiper-container::before{ display: block; content: ""; position: absolute; left: 0; bottom: calc(44px + .22rem); width: 100%; height: 1px; background: var(--lbg);}
.box4-swiper .swiper-slide{ display: block;}
.box4-swiper .box4-tech-title{ width: fit-content; margin: 0 auto;}
.box4-img{ position: relative; padding-bottom: 68.16%; overflow: hidden;
    -webkit-mask-image: url(../images/box4-mask.png);
    mask-image: url(../images/box4-mask.png);
    -webkit-mask-size: 100% 100%; /* 或者用具体像素： 400px 260px */
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.box4-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: all 1s linear;}
.box4-dot{ position: relative; margin: .22rem auto;}
.box4-dot span{ display: block; width: 29px; height: 29px; background: var(--lbg); border-radius: 50%; margin: 0 auto;}
.box4-dot::before{ position: absolute; left: 0; width: 50vw;}
.box4-swiper .swiper-slide:hover .box4-img img{ transform: scale(1.05);}
.box4-swiper .swiper-slide:hover .box4-tech-title{ color: transparent; background: var(--lbg); background-clip: text;}

.box4-bot-list{ row-gap: .4rem; margin: 0 -.5rem;}
.box4-bot-list li{ width: 50%; padding: 0 .5rem;}
.box4-bot-link{ position: relative; display: flex; flex-direction: column; row-gap: .06rem; padding: .21rem .6rem; overflow: hidden; border: 1px solid #a8d6f7; border-radius: .12rem; z-index: 1; transition: all .3s;}
.box4-bot-img{ position: absolute; inset: 0; z-index: -1; transition: all 1s linear;}
.box4-price{ font-weight: bold;}
.box4-text{ color: #4f4f4e;}
.box4-date{ color: #696969;}
.box4-bot-link:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.box4-bot-link:hover .box4-bot-img{ transform: scale(1.05);}

@media (max-width:1600px) {
    .ban-links{ max-width: 90%; column-gap: 1rem;}
    .ban-links a{ min-width: 2.8rem;}

    .box3-hover .box3-douhao{ width: 40px; max-width: .4rem;}
    .box3-hover .box3-douhao img{ width: 100%; height: auto;}
    .box6-title{ font-size: 28px; margin-bottom: .3rem;}
    .box6-btn button{ width: 160px; line-height: 40px;}
    .box4-swiper .swiper-container::before{ bottom: calc(40px + .22rem);}
    .box4-dot span{ width: 21px; height: 21px;}

    
}
@media (max-width:1400px) {
    
}
@media (max-width:1200px) {
    .banner{ max-height: 40vw;}
    .ban-mask{ max-height: 40vw;}
    .ban-text{ padding-bottom: 0; justify-content: center;}
    .ban-top{ margin: 0 0 .6rem}
    .ban-title{ margin: .1rem 0;}
    .ban-info{ font-size: 20px; margin-bottom: .1rem;}
    .ban-des{ font-size: 14px;}
    .ban-links{ column-gap: .3rem; justify-content: center;}
    .ban-links a{ min-width: 0;}

    .box1-title{ padding: .3rem 0;}
    .box1-swiper .swiper-slide{ max-width: 33.33%;}
    .box2-wrap{ margin-top: .3rem;}

    .box2-wrap{ border-radius: .6rem 0 .6rem 0;}
    .box2-item{ display: block; padding: .3rem;}
    .box2-title{ min-width: 0; margin-bottom: .3rem;}
    .box2-list{ flex-wrap: wrap; row-gap: .3rem;}
    .box2-icon{ width: 70px; height: 70px;}
    .box2-text{ font-size: 14px; padding: .1rem .2rem;}
    .box3-bg{ padding: .5rem 0 0;}
    .box3-list{ flex-wrap: wrap; gap: 0;}
    .box3-list li{ flex: none; width: 50%; max-width: none;}
    .box3-circle{ width: 65%; max-width: 185px; margin: .4rem auto;}
    .box3-title{ margin: 0 0 .3rem;}
    .box4-bg{ padding: .4rem 0 .6rem;}
    .box4-tech-list{ flex-wrap: wrap; gap: 0;}
    .box4-tech-list li{ flex: none; width: 50%; padding: .1rem;}
    .box4-tech-icon{ width: 60px; height: 60px; max-width: .8rem; max-height: .8rem;}
    .box5-bg::before{ max-width: 1rem;}
    .box5{ gap: 0;}
    .box5-left{ padding-left: .3rem;}
    .box5-title{ font-size: 30px;}
    .box5-right{ width: 40%;}
    .box6-bg{ padding-top: 1.2rem; margin-top: -1.2rem;}
    .box6{ padding: .4rem 0;}
    .box6-title{ font-size: 24px; margin-bottom: .2rem;}
    .box6-line{ margin: .2rem 0;}
    .box6-text{ font-size: 16px;}

    .box4-swiper .swiper-container::before{ bottom: calc(28px + .2rem);}
    .box4-dot{ margin: .2rem auto;}
    .box4-dot span{ width: 17px; height: 17px;}
    .box4-tech-title{ line-height: 20px;}

    .box4-bot-list{ row-gap: .2rem; margin: 0 -.1rem;}
    .box4-bot-list li{ padding: 0 .1rem;}
    .box4-bot-link{ padding: .24rem .3rem;}
}
@media (max-width:991px) {
    .box1-list li {
        width: 50%;
        padding: 20px 20px;
    }
    .banner{ max-height: 48vw;}
    .ban-mask{ max-height: 48vw;}
    .ban-top{ margin: 0 0 .3rem;}
    .ban-bot{ height: 60px;}
    .ban-links a span{ line-height: 1.2;}
    .box1-swiper .swiper-slide{ max-width: 50%;}
    .box3-swiper .swiper-slide{ padding: .4rem .3rem;}
    .box3-hover{ padding: .4rem;}
    .box3-hover .box3-douhao{ width: 30px;}
    .box3-icon{ width: 50px; max-width: .6rem;}
    .box3-douhao{ width: 80%; margin: 0 auto;}
    .box4-post{ display: block;}
    .box4-post-img{ display: none;}
    .box4-post-right{ width: 100%; max-width: 100%;}
    .box6-title{ font-size: 20px;}
    
    
    
}
@media (max-width:767px) {
    .banner{ max-height: 55vw;}
    .ban-mask{ max-height: 55vw;}
    .ban-top{ margin-top: 0;}
    .ban-con{ max-width: 100%;}
    .ban-img{ display: none;}
    .ban-links{ width: 100%; column-gap: .1rem;}

    .box1-swiper{ margin-top: .3rem;}
    .box1-swiper .swiper-container{ width: 100%; padding: 0; margin: 0;}
    .box1-card:hover{ box-shadow: none; transform: none;}
    .box3-logo{ padding: .2rem 30px;}
    .box3-logo-img{ max-height: .6rem;}
    .box3-logo-img img{ max-height: .5rem;}
    .box3-prev{ left: 5px;}
    .box3-next{ right: 5px;}

    .box5-title{ font-size: 24px;}
    .box5-line img{ max-width: .8rem; height: auto;}
    .box5-right{ display: none;}

    .box6{ flex-wrap: wrap; row-gap: .3rem;}
    .box6-left,
    .box6-right{ width: 100%; max-width: 100%;}
    .box6-title{ font-size: 20px;}
    .box6-line{ margin: .1rem 0;}
    .box6-text{ font-size: 14px;}
    .box6-form{ max-width: none;}
    .box6-btn button{ font-size: 14px;}

}
@media (max-width:640px) {
    .ban-title{ font-size: .32rem;}
    .ban-info{ font-size: .24rem;}
    .box5-title{ font-size: 20px;}
    .ban-links{ font-size: 12px;}

    .box4-bot-list li{ width: 100%;}


}
@media (max-width:460px) {
    .box1-swiper .swiper-slide{ max-width: 100%;}
    .box1-img{ padding-bottom: 50%;}

}