/*
 *  style.css by 453883682@qq.com
 */
 /* loading */
 .loading{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; overflow: hidden;}
 .loading-logo{ position: absolute; left: 50%; top: 50%; width: 100%; height: 101%; transform: translate(-50%,-50%);}
 .loading-logo img{ display: block; width: 100%; height: 100%; object-fit: cover;}
 .loading-left{ position: absolute; left: 0; top: 0; width: 40%; max-width: 780px; height: 100%; background: url(../images/loading-left.png) right center no-repeat; background-size: cover;}
 .loading-right{ position: absolute; right: 0; bottom: 0; width: 24%; max-width: 460px; height: 72%; background: url(../images/loading-right.png) left center no-repeat; background-size: cover;}
 .loading-text{ position: absolute; left: 0;right: 0; padding: 0 .3rem; top: 62%; text-align: center;}
 .loading-slogan{ position: absolute; left: 0; right: 0; bottom: 5%; width: fit-content; line-height: 1; padding: .12rem .2rem; margin: 0 auto; background-color: var(--hover-color); font-weight: bold;}
 .loading-slogan span{ display: inline-block; vertical-align: middle; width: 6px; height: 6px; background-color: #FFFFFF; border-radius: 50%; margin: 0 .2rem; margin-top: -4px;}


/* 横屏 */
@media (orientation: landscape) {
    .loading-logo{ animation: loadLogo 1.5s ease-in-out forwards 1s;}
    .loading-logo .pc{ display: block;}
    .loading-logo .mobile{ display: none;}
}
/* 竖屏 */
@media (orientation: portrait) {
    .loading-logo img{ animation: loadLogo2 1.5s ease-in-out forwards 1s;}
    .loading-logo .pc{ display: none;}
    .loading-logo .mobile{ display: block;}
}


 /* .section{ height: 100vh; overflow: hidden;} */
 .hm1Bg{ position: relative; background-color: #FFFFFF; overflow: hidden; z-index: 2;}
.banner{  position: relative; height: 100vh; background-color: #FFFFFF;}
/* .banner .swiper-slide{ clip-path: none; opacity: 0; z-index: 0;} */
/* .banner .swiper-slide-prev{ clip-path: polygon(0% -150%, 100% -150%, 100% -20%, 0% 0%); opacity: 0; transition: clip-path 1400ms cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease; z-index: 3;} */
/* .banner .swiper-slide-active{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 150%); opacity: 1; transition: clip-path 1400ms cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease; z-index: 2;} */
/* .banner .swiper-slide-next{ z-index: 1;} */
.banImg{  position: relative; width: 100%; height: 100%; overflow: hidden; transition: all .5s;}
.banImg::before,
.banImg::after{ display: block; content: ""; position: absolute; left: 0; right: 0; width: 100%; z-index: 1;}
.banImg::before{ top: 0; height: 50%; max-height: 4rem; background: linear-gradient( 180deg, rgba(5,15,24,0.4) 0%, rgba(5,15,24,0) 100%);}
.banImg::after{ bottom: 0; height: 50%; max-height: 4rem; background: linear-gradient( 180deg, rgba(5,15,24,0) 0%, rgba(5,15,24,0.4) 100%);}
.banImg video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.banText{ position: absolute; left: 0; top: 0; bottom: 0; width: 100%; color: #FFFFFF; overflow: hidden; z-index: 2; text-align: left;}
.banText::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( 270deg, rgba(5,15,24,0) 0%, rgba(5,15,24,0.4) 100%); opacity: 0.6;}
.banCn{ line-height: 1.125; margin: .1rem 0 .2rem; font-weight: bold;}
.banEn{ line-height: 1.3; max-width: 640px; font-weight: bold; margin: .2rem 0 0;}
.banner .swiper-slide-active .banImg{ animation: aniImgBig 6s linear;}

.banBot{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .34rem 0; z-index: 1;}
.banTab{ flex: auto; line-height: 1; overflow: hidden;}
.banTab li{ flex: 1; cursor: pointer;}
.banTab span{ display: block; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 2; padding: .2rem 0; transition: all .3s;}
.banTab i{ position: relative; display: block; width: 100%; min-width: 1.5rem; height: 1px; background-color: rgba(255, 255, 255, .3);}
.banTab i::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background-color: #FFFFFF;}
.banTab li.active i::after{ animation: aniWidth 6s linear;}
.banBtn{ flex-shrink: 0; margin-left: .6rem;}

.banPage{ position: absolute; left: 0; right: 0; bottom: 35px; z-index: 2; text-align: center; display: none;}
.banPage .swiper-pagination-bullet{ position: relative; width: 30px; height: 3px; background-color: rgba(255, 255, 255, 0.35); opacity: 1; border-radius: 0; margin: 0 4px;}
.banPage .swiper-pagination-bullet i{ display: block; width: 0; height: 100%; background-color: #FFFFFF;}
.banPage .swiper-pagination-bullet-active i{ animation: aniWidth 5s;}

/* hm2 产品库 */
.hm2Bg{ position: relative; background-color: #FFFFFF; z-index: 1; overflow: hidden;}
.hm2-wrap{display: flex; width:100%; height:100%;}
.hm2-wrap .hm2-left-wrap{position: relative; width: 50%; height:100%; overflow: hidden;}
.hm2-wrap .hm2-left{ position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding:10.41vw 7.8125vw; box-sizing:border-box; background:no-repeat center; background-size:cover; z-index: 1;}
.hm2-wrap .hm2-left::before,
.hm2-wrap .hm2-left::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;}
.hm2-wrap .hm2-left::before{ background: url(../images/index/box2-bg.png) left top no-repeat; background-size: 53% auto;}
.hm2-wrap .hm2-left::after{ background: url(../images/index/box2-bg2.png) right bottom no-repeat; background-size: 26.45% auto;}
.hm2-wrap .hm2-right-wrap{display: flex; flex-wrap:wrap; width:50%; overflow: hidden;}
.hm2-wrap .hm2-right{ width:100%; height:50%;}
.hm2-wrap .right-top{ display: flex;}
.hm2-wrap .hm2-item{ display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 50%; padding: .3rem .5rem .6rem; background-color: #F7F7F7; z-index: 1;}
.hm2-wrap .hm2-item:nth-child(2) .hm2-info{ opacity: .7;}
.hm2-wrap .hm2-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;}
.hm2-wrap .hm2-item .hm2-num{ margin-top: .4rem;}
.hm2-wrap .hm2-bottom{ position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: .5rem;}
.hm2-wrap .hm2-bottom .hm2-text{ max-width: 480px;}
.hm2-wrap .hm2-bottom .hm2-info{ opacity: .7;}

.hm2-title{ margin-bottom: .25rem;}
.hm2-title-sub{ margin-bottom: .4rem; font-weight: bold;}
.hm2-title-sub span{ color: var(--main-color);}
.hm2-info{ line-height: 1.6;}
.hm2-list{ list-style: none;}
.hm2-list li{ margin-right: .2rem;}
.hm2-des{ line-height: 1.25;}
.hm2-num{ line-height: 1;}
.hm2-num span{ line-height: .8; margin-right: 5px; font-weight: bold;}

/* 更多 */
.hm2-btn{ position: relative; display: flex; align-items:center; justify-content:space-between; width:180px; height:60px; border-radius:30px; padding:0 20px; overflow: hidden;}
.hm2-btn:before{ position: absolute; content:''; top:0; left:0; width:100%; height:100%; border:2px solid var(--title-color); border-radius:30px; box-sizing: border-box;}
.hm2-btn .txt{ position: relative; display: block; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; font-size:16px; color:var(--title-color); z-index:1; transition:all 0.4s ease-in-out;}
.hm2-btn .icon{ position: absolute; top:50%; right:25px; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:var(--main-color); transition:all 0.4s ease-in-out;}
.hm2-btn .hover-icon{ position: absolute; top:50%; right:25px; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:#fff; transition:all 0.4s ease-in-out; opacity:0;}
.hm2-btn:hover .txt{color:#fff;}
.hm2-btn:hover .icon{ width:400px; height:400px; right:-180px;}
.hm2-btn:hover .hover-icon{ opacity:1;}
/* 白色 */
.hm2-btn.white:before{border-color:#fff;}
.hm2-btn.white .txt{color:#fff;}
.hm2-btn.white .icon{background:#fff;}
.hm2-btn.white .hover-icon{background:#000;}
.hm2-btn.white:hover .txt{color:#000;}
/* 效果 */
.hm2-effect-box{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transition:all 0.4s ease-in-out; overflow: hidden;}
.hm2-effect-box::before{ display: block; width: 100%; height: 100%; content: ''; position: absolute; top: 0; left: 0; background-color: var(--main-color); transform-origin: 0 50%; transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index: 3;}
.active .hm2-effect-box{ width: 100%;}
.active .hm2-effect-box:before{transform: scale(0, 1); transition-delay: .6s; transform-origin: 100% 50%;}

.hm3Bg{ position: relative; background: #F7F7F7; overflow: hidden; z-index: 1;}
.hm3Bg::after{ display: block; content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: linear-gradient( 180deg, #4595E6 0%, #1255B3 100%); opacity: 0.05; clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%); transform: translateX(100%); transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index: -2;}
.hm3Bg.active::after{ transform: translateX(0); transition-delay: .6s; opacity: 0.05;}
.hm3Swiper{ width: 50%; max-width: 700px;}
.hm3Swiper .swiper-pagination{ display: none;}
.hm3-item{}
.hm3-text{ max-width: 700px;}
.hm3-title{ margin-bottom: .25rem;}
.hm3-title-sub{ max-width: 480px; margin-bottom: .4rem; font-weight: bold;}
.hm3-info{ line-height: 1.6; line-clamp: 7; -webkit-line-clamp: 7; margin-bottom: .5rem;}
.hm3-more{ gap: .2rem; margin-bottom: .2rem;}
.hm3-more .hm2-btn{ flex: auto; width: auto;}
/* .hm3-title,
.hm3-title-sub,
.hm3-info,
.hm3-more{ opacity: 0; visibility: hidden;} */
/* .swiper-slide-active .hm3-title{ animation: fadeInRight .6s linear 0s forwards; visibility: visible;}
.swiper-slide-active .hm3-title-sub{ animation: fadeInRight .6s linear 0.2s forwards; visibility: visible;}
.swiper-slide-active .hm3-info{ animation: fadeInRight .6s linear 0.4s forwards; visibility: visible;}
.swiper-slide-active .hm3-more{ animation: fadeInRight .6s linear 0.6s forwards; visibility: visible;} */
.hm3Swiper2{ position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 62vw; max-width: 1190px; text-align: center; z-index: -1;}
.hm3-img img{ max-width: 100%; height: auto; max-height: 70vh; object-fit: contain;}
.hm3Bot .banTab i{ background-color: rgba(117, 122, 128, .3);}
.hm3Bot .banTab i::after{ background-color: var(--title-color);}
.hm3Bot .banTab .active{ color: var(--title-color);}

/* 最新资讯 */
.hm4Bg{ position: relative; background: url(../images/index/box4-bg.png) center bottom no-repeat; background-size: cover; overflow: hidden; z-index: 1;}
.hm4Bg.active::before{ transform: scaleX(1); transition: all 0.6s linear .5s;}
.hm4Box{ padding-top: 50px;}
.hm4Lef{ flex-shrink: 0; width: 22%; max-width: 300px;}
.hm4-title{ margin-bottom: .15rem;}
.hm4-title-sub{ line-height: 1.4;}
.hm4Tab{ margin: .3rem 0;}
.hm4Tab li{ margin: .36rem 0;}
.hm4Tab li span{ position: relative; display: block; line-height: 1.2; padding: .16rem 0; cursor: pointer; transition: all .3s;}
.hm4Tab li span::before,
.hm4Tab li span::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; height: 2px;}
.hm4Tab li span::before{ width: 100%; background-color: rgba(117, 122, 128, .3);}
.hm4Tab li span::after{ width: 0; background: var(--title-color); transition: all .3s;}
.hm4Tab li span:hover,
.hm4Tab li.active span{ color: var(--title-color);}
.hm4Tab li.active span::after{ width: 100%;}

.hm4Rig{ width: 75%;}
.hm4List{ margin: 0 -.15rem;}
.hm4List li{ width: 33.33%; padding: 0 .15rem;}
.hm4Link{ display: block; padding: .3rem; background: #F8F8F8; transition: all .3s;}
.hm4Time{ margin-bottom: .3rem; font-weight: bold;}
.hm4Time strong{ margin-right: .1rem;}
.hm4Tit{ line-height: 24px; height: 48px; -webkit-line-clamp: 2; margin-bottom: .15rem; transition: all .3s;}
.hm4Con{ line-height: 24px; height: 72px; margin-bottom: .3rem;}
.hm4Img{ padding-bottom: 60%; margin-bottom: .3rem;}
.hm4-btn{ width: 50px; height: 50px; transition: all .3s;}
.hm4-btn .txt{ color: #FFFFFF; white-space: nowrap; overflow: hidden; opacity: 0; transition: all .3s;}
.hm4-btn .icon{ right: 20px; background-color: var(--hover-color);}
.hm4Link:hover{ background-color: #FFFFFF; box-shadow: 0px 2px 30px 0px rgba(0,0,0,0.05);}
.hm4Link:hover .hm4Tit{ color: var(--main-color);}
.hm4Link:hover .hm4Img .imgBg{ transform: scale(1.05);}
.hm4Link:hover .hm4-btn{  width: 160px;}
.hm4Link:hover .hm4-btn .icon{ width: 400px; height: 400px; right: -180px;}
.hm4Link:hover .hm4-btn .hover-icon{ opacity: 1;}
.hm4Link:hover .hm4-btn .txt{ opacity: 1; transition: all .3s linear .3s;}

.hm5Bg{ position: relative; background: #F2F5FA; overflow: hidden;}
.hm5Box{ padding-top: 100px;}
.hm5-title{ margin-bottom: .15rem;}
.hm5-title-sub{ margin-bottom: .2rem;}
.hm5Map{ position: relative; height: 400px; max-height: 50vh; pointer-events: none;}
.hm5Map img{ position: absolute; left: 50%; transform: translateX(-50%); top: -10%; width: 100vw; max-width: 1920px;}
.hm5Swiper{ position: relative; width: 87.5%; max-width: 1400px; margin: 0 auto;}
.hm5Swiper .prev,
.hm5Swiper .next{ position: absolute; top: 50%; transform: translateY(-50%);}
.hm5Swiper .prev{ right: 100%; margin-right: .2rem;}
.hm5Swiper .next{ left: 100%; margin-left: .2rem;}
.hm5Link{ position: relative; display: block; height: 0; padding-bottom: 38%; background-color: #FFFFFF; overflow: hidden;}
.hm5Link span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.hm5Link span img{ transition: all 1s;}
.hm5Link:hover span img{ transform: scale(1.05);}

#banIn{ position: relative;}
#banIn .banImg{ transition: none;}
#banIn .banText{ justify-content: flex-end; padding-bottom: 2.48rem;}

/* 集团简介 */
.a-bg1{ padding: 1.2rem 0 .9rem; overflow: hidden;}
.a1-box{ line-height: 1.6;}
.a1-left{ width: 49%; max-width: 640px;}
.a1-right{ width: 49%; max-width: 640px;}
.a1-text{ margin-top: .3rem;}

.a-bg2{ overflow: hidden;}
.a-bg2 img{ width: 100%; height: auto;}

.a-bg3{ padding: 1.1rem 0; background-color: #F2F5FA; overflow: hidden;}
.a3-list{ margin: 0 -.15rem;}
.a3-list li{ width: 33.33%; padding: 0 .15rem; margin-top: .3rem;}
.a3-item{ position: relative; height: 100%; padding: .4rem; background: #FFFFFF; border-radius: .2rem; overflow: hidden; z-index: 1;}
.a3-item::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient( 180deg, #4595E6 0%, #1255B3 100%); transition: all .3s; z-index: -1;}
.a3-icon{ position: relative; width: 64px; height: 64px; max-width: .7rem; max-height: .7rem; margin-bottom: .3rem;}
.a3-icon img:nth-child(2){ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; transition: all .3s;}
.a3-title{ margin-bottom: .3rem; transition: all .3s;}
.a3-text{ margin-bottom: .3rem; transition: all .3s;}
.a3-item:hover::before{ height: 100%;}
.a3-item:hover .a3-icon{ animation: swing 1s linear 1;}
.a3-item:hover .a3-icon img:nth-child(1){ opacity: 0; visibility: hidden;}
.a3-item:hover .a3-icon img:nth-child(2){ opacity: 1; visibility: visible;}
.a3-item:hover .a3-title,
.a3-item:hover .a3-text{ color: #FFFFFF;}

/* 百年 */
.com-title{ margin-bottom: .35rem; font-weight: bold;}
.com-text{ line-height: 1.6;}

.com-bg1{ padding: 1.2rem 0;}
.com1-img{ position: relative; margin-top: .7rem;}
.com1-img img{ width: 100%; height: auto;}
.com1-img .playBtn{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.com-bg1 + .com-bg2{ padding-top: .6rem; margin-top: -.6rem;}
.com-bg2{ padding: 1.2rem 0;}
.com2-left{ flex-shrink: 0; width: 42.42%; max-width: 560px; margin-right: 7%;}
.com2-right{ flex: auto; max-width: 660px; overflow: hidden;}
.com2-swiper .swiper-slide{ width: 413px; max-width: 65%; margin: 0 auto;}
.com2-img{ padding-bottom: 72.64%; background-color: #FFFFFF; border-radius: 6px;}
.com2-img .imgBg{ background-size: contain;}

.com-bg3{ position: relative; padding: 1rem 0 0; background: url(../images/about/com3-bg.png) center center no-repeat; background-size: cover; overflow: hidden;}
.com3-box{ width: 52%; max-width: 640px; margin-left: auto; margin-right: 18px;}
.com3-img{ bottom: 0;}
.com3-img img{ width: 100%; height: auto;}

.com-bg4{ position: relative; padding: 30px 0 .7rem; background-color: #F2F5FA; z-index: 1; overflow: hidden;}
.com-bg4::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; max-height: 4rem; background: linear-gradient( 180deg, #EAE9ED 0%, #F2F5FA 100%); z-index: -1;}
.com4-box{ max-width: 1080px; margin: 0 auto;}
.com4-tab{ margin: .5rem -.2rem; font-weight: bold;}
.com4-tab li{ padding: 0 .2rem;}
.com4-tab li span{ position: relative; height: .7rem; padding: 0 .48rem; cursor: pointer; transition: all .3s;}
.com4-tab li span::before,
.com4-tab li span::after{ display: block; content: ""; position: absolute; top: 0; width: .4rem; height: 100%;}
.com4-tab li span::before{ left: 0; background: url(../images/about/com4-left.png) left center no-repeat; background-size: contain;}
.com4-tab li span::after{ right: 0; background: url(../images/about/com4-right.png) right center no-repeat; background-size: contain;}
.com4-tab li span:hover,
.com4-tab li.active span{ color: var(--main-color);}

.com4-item{ position: relative;}
.com4-item .swiper-pagination{ width: 5rem; max-width: 400px; height: 2px; background-color: rgba(117, 122, 128, .3); margin: 0 auto; margin-top: .5rem;}
.com4-item .swiper-pagination-progressbar-fill{ background-color: var(--title-color);}
.com4-swiper{ position: relative;}
.com4-swiper .swiperBtn span{ position: absolute; top: 50%; transform: translateY(-50%);}
.com4-swiper .prev{ right: 100%; margin-right: .5rem;}
.com4-swiper .next{ left: 100%; margin-left: .5rem;}
.com4-img{ padding-bottom: 141.67%;}
.com4-img .imgBg{ background-size: contain;}

/* industrial */
.ind-bg{ background-color: #FFFFFF; padding: .8rem 0; overflow: hidden;}
.ind-bg:nth-child(2n){ background-color: #F2F5FA;}

.ind1-left{ flex-shrink: 0; width: 40%; max-width: 480px;}
.ind1-right{ width: 55%; max-width: 640px; overflow: hidden;}
.ind1-right img{ max-width: 100%; height: auto;}

.ind-bg2 .com-title{ margin-bottom: .2rem;}
.ind2-info{ font-weight: bold;}
.ind2-top{ padding: .4rem; background-color: #FFFFFF; border-radius: .2rem; margin-top: .4rem; margin-bottom: .2rem;}
.ind2-name{ max-width: 485px; margin: 0 auto;}
.ind2-bot{ padding: .15rem .2rem; background-color: #FFFFFF; border-radius: .2rem; font-weight: bold;}
.ind2-list{ margin: 0 -.17rem;}
.ind2-list li{ width: 20%; padding: 0 .17rem; margin-top: .3rem;}
.ind2-item{ height: 100%; min-height: 200px; padding: .4rem .3rem; background-color: rgba(69, 149, 230, .1); border-radius: .1rem;}
.ind2-head{ margin-bottom: .2rem;}

.ind-bg3 .ind2-top{ background-color: #F2F5FA;}
.ind-bg3 .ind2-top .ind2-item p{ line-height: 1.2; padding: .1rem; margin: .2rem 0; background-color: #FFFFFF; border-radius: .1rem;}
.ind-bg3 .ind2-info{ gap: .15rem;}
.ind-bg3 .ind2-info img{ flex-shrink: 0; width: 30%; max-width: 4rem;}
.ind-bg3 .ind2-info span{ flex: 1;}

/* service */
.ser-bg{ padding: 1.2rem 0; overflow: hidden;}
.ser-top{ max-width: 1080px; margin: 0 auto;}
.ser-bot img{ max-width: 100%; height: auto;}

/* case */
.case-bg{ padding: .8rem 0;}
.case-list{ margin: 0 -.15rem;}
.case-list li{ width: 33.33%; padding: 0 .15rem; margin-top: .4rem;}
.case-img{ padding-bottom: 71.43%;}
.case-title{ margin: .15rem 0; transition: all .3s;}
.case-con{ -webkit-line-clamp: 2;}
.case-link:hover .imgBg{ transform: scale(1.05);}
.case-link:hover .case-title{ color: var(--hover-color);}

.case-swiper{ position: relative; margin: .6rem auto;}
.case-swiper .swiperBtn span{ color: #FFFFFF; background-color: rgba(255, 255, 255, .2); margin: 0;}
.case-swiper .swiperBtn .prev,
.case-swiper .swiperBtn .next{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; backdrop-filter: blur(5px);}
.case-swiper .swiperBtn .prev{ left: .18rem;}
.case-swiper .swiperBtn .next{ right: .18rem;}

.case-bot{ margin: .6rem auto 1.6rem;}
.case-left{ flex-shrink: 0; width: 65%; max-width: 840px;}
.case-name{ margin-bottom: .24rem;}
.case-right{ flex-shrink: 0; width: 30%; max-width: 330px; line-height: 30px;}
.case-right p{ padding-left: 30px; background-position: left 7px; background-repeat: no-repeat; background-size: 16px auto;}
.case-right .address{ background-image: url(../images/case/case-icon1.png);}
.case-right .area{ background-image: url(../images/case/case-icon2.png);}
.case-right .height{ background-image: url(../images/case/case-icon3.png);}
.case-right .floor{ background-image: url(../images/case/case-icon4.png);}

/* news */
.news-list{}
.news-list li{ margin-top: .4rem;}
.news-link{ background-color: #FFFFFF; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.news-img{ flex-shrink: 0; width: 33.33%; max-width: 440px; overflow: hidden;}
.news-img .imgBg{ height: 100%; transition: all 1s;}
.news-text{ flex: auto; max-width: 840px; padding: .4rem .6rem; overflow: hidden;}
.news-title{ margin-bottom: .2rem; transition: all .3s;}
.news-con{ line-height: 24px; height: 72px; margin-bottom: .4rem;}
.news-time{ margin-bottom: .14rem;}
.news-link:hover .imgBg{ transform: scale(1.05);}
.news-link:hover .news-title{ color: var(--hover-color);}

.news-name{ margin-top: .65rem; margin-bottom: .2rem;}
.news-info{ gap: .54rem; padding: .15rem 0; border-bottom: 1px solid rgba(45, 47, 49, .1);}
.news-body{ line-height: 1.8; margin: .34rem 0;}
.news-body img{ max-width: 100%; height: auto;}
.news-page{ margin: .45rem 0 1.2rem; border-top: 1px solid rgba(45, 47, 49, .1);}
.news-page p{ display: flex; align-items: center; padding: .14rem .2rem; border-bottom: 1px solid rgba(45, 47, 49, .1);}
.news-page span{ display: block; flex-shrink: 0;}
.news-page span i{ font-size: 80%; margin: 0 .36rem; font-weight: bold;}
.news-page a{ color: var(--title-color); padding-left: .4rem; border-left: 1px solid rgba(45, 47, 49, .1); overflow: hidden; transition: all .3s;}
.news-page a:hover{ color: var(--hover-color);}

/* contact */
.con-bg .com-title{ margin-bottom: .1rem;}
.con-top{ margin: 1.2rem auto;}
.con-left{ width: 38%; max-width: 480px; padding: .5rem .4rem; background-color: #F2F5FA;}
.con-tel{ line-height: 40px; padding-left: 50px; margin: .4rem 0 .2rem; background: url(../images/contact/con-tel.png) left center no-repeat; font-weight: bold;}
.con-text{ line-height: 16px; margin: .2rem 0;}
.con-text p{ position: relative; padding-left: 20px; margin: .14rem 0; background-repeat: no-repeat; background-size: 16px auto;}
.con-text .phone{ background-image: url(../images/contact/icon-phone.png);}
.con-text .address{ background-image: url(../images/contact/icon-address.png);}
.con-wx{ gap: .3rem; margin-top: .35rem; text-align: center;}
.con-wx li{ max-width: 130px;}
.con-wx li img{ max-width: 100%; height: auto; margin-bottom: 5px;}
.con-right{ width: 60%; max-width: 800px;}
.con-right img{ width: 100%; height: 100%; object-fit: cover;}

.con-bot{ margin: 1.2rem auto;}
.message{ margin: 0 -.15rem; padding-top: .3rem;}
.message li{ width: 33.33%; padding: 0 .15rem; margin-top: .3rem;}
.message li.one{ width: 100%;}
.mess-input{ display: block; width: 100%; height: 50px; font-size: 16px; padding: .1rem .2rem; border: 1px solid rgba(45, 47, 49, .2);}
textarea.mess-input{ height: 200px; max-height: 3rem; resize: none;}
.yzm{ gap: .1rem;}
.yzm .mess-input{ max-width: 240px; margin-right: .1rem;}
.yzm img{ width: 160px; max-width: 2rem; height: 50px; cursor: pointer;}
.yzm span{ flex-shrink: 0;}
.btn{ gap: .2rem;}
.btn button{ width: 2.4rem; height: 50px; font-size: 16px; border: none; color: #FFFFFF; cursor: pointer; transition: all .3s;}
.btn button[type=submit]{ background-color: var(--hover-color);}
.btn button[type=reset]{ background-color: #757A80;}
.btn button[type=submit]:hover{ box-shadow: 0 .04rem .1rem rgba(69, 149, 230, .5);}
.btn button[type=reset]:hover{ box-shadow: 0 .04rem .1rem rgba(45, 47, 49, .5);}

/* product */
.pro-bg{ padding: .8rem 0; overflow: hidden;}
.pro-bg:nth-child(2n){ background-color: #F2F5FA;}
.pro1-box1{ padding-top: .4rem;}
.pro1-box1-img{ position: relative; text-align: center;}
.pro1-box1-img img{ max-width: 90%; height: auto;}
.pro1-box1-text{ position: absolute; width: 1600px; max-width: 90vw; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .1; text-transform: uppercase; font-weight: bold;}

.pro1-box1-title{ margin-top: .7rem; margin-bottom: .15rem;}
.pro1-box1-left{ flex-shrink: 0; width: 38%; max-width: 480px; line-height: 1.67; margin: .15rem 0;}
.pro1-box1-right{ flex: auto; max-width: 780px; overflow: hidden; text-align: right;}
.pro1-box1-right img{ max-width: 100%; height: auto;}

.pro1-box2-title{ margin-bottom: .4rem;}
.pro1-box2{ position: relative;}
.pro1-box2 .swiperBtn span{ position: absolute; top: 50%; transform: translateY(-100%);}
.pro1-box2 .prev{ right: 100%; margin-right: .5rem;}
.pro1-box2 .next{ left: 100%; margin-left: .5rem;}
.pro1-box2-img{ padding-bottom: 53.125%; margin-bottom: .2rem;}
.pro1-box2-name{ margin-bottom: .1rem; transition: all .3s;}
.pro1-box2-con{ -webkit-line-clamp: 2;}
.pro1-box2-link:hover .imgBg{ transform: scale(1.05);}
.pro1-box2-link:hover .pro1-box2-name{ color: var(--main-color);}

.pro1-bg3{ background-color: #F7F7F7;}
.pro1-box3-title{ margin: .2rem 0;}
.pro1-box3-des{ max-width: 1080px; line-height: 1.67; margin: .2rem auto;}
.pro1-box3-img{ margin: .4rem auto; text-align: center;}
.pro1-box3-img img{ max-width: 100%; height: auto;}
.pro1-box3-h4{ position: relative; width: fit-content; min-width: 240px; padding: .15rem .2rem; line-height: 30px; border-radius: 30px; background-color: var(--hover-color); margin: 0 auto; transform: translateY(50%); z-index: 1;}
.pro1-box3-list{ gap: .4rem;}
.pro1-box3-item{ flex: 1; padding: .3rem .4rem; background-color: #FFFFFF;}
.pro1-box3-left{ flex-shrink: 0; max-width: 62.5%; margin-right: .3rem;}
.pro1-box3-left img{ max-width: 100%; height: auto;}
.pro1-box3-right{ flex: auto; padding-top: .1rem; overflow: hidden;}
.pro1-box3-name{ margin: .2rem 0;}
.pro1-box3-item:nth-child(2n){ flex-direction: row-reverse; animation-name: fadeInRight;}
.pro1-box3-item:nth-child(2n) .pro1-box3-left{ margin-right: 0; margin-left: .3rem;}

.pro1-bg4{ background: #FFFFFF !important;}
.pro1-box4-title{ margin-bottom: .4rem;}
.pro1-box4-img{ padding-bottom: 136%;}
.pro1-box4-name{ margin-top: .2rem;}

.pro2-box1-bot .pro1-box1-left,
.pro1-box1-bot .pro1-box1-right{ width: 100%; max-width: 100%; animation-name: fadeInUp; text-align: center;}
.pro2-box1-bot .pro1-box1-left{ max-width: 1080px; margin: 0 auto;}

.pro2-bg3{ padding: 1.1rem 0; background: url(../images/product/pro2-bg3.png) center center no-repeat; background-size: cover;}
.pro2-bg3 .pro1-box3-des{ max-width: 640px; margin: .2rem 0 .4rem;}
.pro2-box3-list{ gap: .44rem; margin-top: .6rem;}
.pro2-box3-num{ font-weight: bold;}
.pro2-box3-num strong{ font-weight: 900;}

.pro2-box4 .pro1-box4-img{ padding-bottom: 57.14%;}

.pro3-tab{ gap: .2rem; margin-bottom: .8rem; font-weight: bold;}
.pro3-tab-item{ position: relative; width: fit-content; min-width: 2.8rem; height: 100%; padding: .1rem; background-color: #FFFFFF; cursor: pointer; transition: all .3s;}
.pro3-tab-item::before{ display: block; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; border-left: .14rem solid transparent; border-right: .14rem solid transparent; border-top: .14rem solid var(--hover-color); display: none;}
.pro3-tab-img{ flex-shrink: 0;}
.pro3-tab-img img{ display: block; width: auto; max-height: .8rem;}
.pro3-tab li .pro3-tab-item:hover,
.pro3-tab li.active .pro3-tab-item{ box-shadow: 0 0 0 2px var(--hover-color) inset;}
.pro3-tab li.active .pro3-tab-item::before{ display: block;}

.pro3-item{ position: relative;}
.pro3-item .swiperBtn span{ position: absolute; top: 50%; transform: translateY(-100%);}
.pro3-item .prev{ right: 100%; margin-right: .5rem;}
.pro3-item .next{ left: 100%; margin-left: .5rem;}
.pro3-item .pro1-box2-img{ padding-bottom: 70.97%;}


.product{ padding: .7rem 0 1.1rem;}
.pro-left{ flex-shrink: 0; width: 280px; margin-right: .6rem;}
.pro-top{ position: relative; padding: .3rem; margin-bottom: .1rem; background: url(../images/product/pro-sort.png) center center no-repeat; background-size: cover;}
.pro-top p{ opacity: .5;}
.pro-h2{ margin-bottom: .15rem;}
.pro-btn{ position: absolute; right: .2rem; top: .3rem; font-weight: bold; cursor: pointer; display: none; transition: all .3s;}
.pro-list{ list-style: none;}
.pro-list ul{ list-style: none; display: none;}
.pro-list ul li{ padding-left: 20px;}
.pro-list ul li a{ color: var(--title-color);}
.pro-list > li{ padding-bottom: .2rem;}
.pro-list > li > a{ font-size: 18px; line-height: 20px; color: var(--title-color); margin-bottom: .2rem; font-weight: bold;}
.pro-list > li > ul > li{ margin-bottom: .15rem;}
.pro-list > li > ul > li > a{ position: relative; display: block; font-size: 16px; color: var(--title-color);}
.pro-list > li > ul > li > a > p{ font-size: 12px;}
.pro-list > li > ul > li > a::after{ display: block; content: ""; position: absolute; left: -20px; top: 8px; width: 10px; height: 4px; background: #757A80;}
.pro-list > li > ul > li > ul{ margin: 5px 0;}
.pro-list > li > ul > li > ul > li{ margin: .1rem 0;}
.pro-list > li > ul > li > ul > li > a{ position: relative; color: var(--title-color); letter-spacing: 0.4px;}
.pro-list > li > ul > li > ul > li > a::after{ display: block; content: ""; position: absolute; left: -20px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background-color: #757A80;}
.pro-list .dropdown > a{ position: relative; display: block; padding-right: 40px;}
.pro-list .dropdown > a::before{ display: block; content: "\e65e"; position: absolute; right: 0; top: 0; font-size: 14px; color: var(--title-color); line-height: 20px; font-family: "iconfont" !important; font-weight: bold;}
.pro-list .dropdown.active > a::before,
.pro-list .dropdown.open > a::before{ transform: rotate(180deg); color: var(--main-color);}
.pro-list .active > ul{ display: block;}
.pro-list .active > a{ color: var(--main-color);}
.pro-list .active > a::after{ background-color: var(--main-color);}

.pro-right{ flex: auto; overflow: hidden;}
.pro-right .news-page{ margin-bottom: 0;}
.pro-right img{ max-width: 100%; height: auto;}
.pro-text ul{ margin: .4rem 0; border-top: 1px solid #757A80; border-bottom: 1px solid #757A80;}
.pro-text ul li{ padding: .2rem 0;}
.pro-text ul li + li{ border-top: 1px solid #DDDDDD;}
.pro-sort{ display: block;}
.pro-title{ margin-bottom: .34rem;}


/* video */
.video-top{ position: relative; margin-top: .4rem;}
.video-top-img{ padding-bottom: 30.3%;}
.video-top-img::after{ transform: translate(0,-50%); left: auto; right: 1.1rem;}
.video-top-text{ position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 65%;}
.video-top-title{ margin-bottom: .3rem;}
.video-top-con{ width: 100%; max-width: 560px; opacity: .8;}

.video-list{ margin: 0 -.15rem;}
.video-list li{ width: 33.33%; padding: 0 .15rem; margin-top: .5rem;}
.video-link::after{ display: none;}
.video-img{ padding-bottom: 61.9%;}
.video-img::after{ display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 108px; height: 108px; max-width: 1.1rem; max-height: 1.1rem; background: url(../images/icon-play.png) center center no-repeat; background-size: cover; opacity: 0; visibility: hidden; transition: all .3s;}
.video-title{ padding: .22rem .2rem; background-color: #F2F5FA; transition: all .3s;}
.video-link:hover .video-img::after{ opacity: 1; visibility: visible;}
.video-link:hover .video-title{ background: var(--hover-color); color: #FFFFFF;}