@keyframes svgAni{to{stroke-dashoffset: 0;}}
@keyframes screen-arrow {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(100%);}
}
@keyframes aniDot{
	0%{opacity: 1;transform: scale(1);}
	100%{opacity: 0;transform: scale(2);}
}

/* header */
.header{padding-left: 2.6%;line-height: 3.33rem;color: #3D3D3D;position: relative;z-index: 9;border-bottom: 1px solid #D8D8D8;}
.header .logo img{height: 1.67rem;}
.header .nav{padding-left: 3rem;}
.header .nav .nLi{padding: 0 1rem;position: relative;}
.header .nav .nLi h2 a{display: block;position: relative;}
.header .nav .nLi h2 a::before{content: "";width: 100%;height: 3px;background: #0064B2;position: absolute;left: 0;top: 0;transform: scale(0, 1);opacity: 0;}
.header .nav .nLi.on h2 a::before,
.header .nav .nLi:hover h2 a::before{transform: scale(1);opacity: 1;}
.header .nav .nLi .navSub1{position: absolute;left: 50%;top: 100%;width: 180px;margin-left: -90px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 10px 0;display: none;}
.header .nav .nLi .navSub1 ul li{padding: 12px 0;}
.header .nav .nLi .navSub1 a{display: block;line-height: 24px;text-align: center;color: #333;padding: 0 4px;position: relative;}
.header .nav .nLi .navSub1 a:hover{color: #0064B2;}
.header .nav .nLi .navSub1 a:before{content: "";width: 2px;height: 100%;background: #0064B2;position: absolute;left: 0;top:0;-webkit-transform: scale(1,0);transform: scale(1,0);}
.header .nav .nLi3{position: static;}
.header .nav .navSub2{position: absolute;left: 0;top: 100%;width: 100%;background: #FFFFFF;display: none;border-top: 1px solid #D8D8D8;}
.header .nav .navSub2 ul{display: flex;flex-wrap: wrap;margin: 1.4rem auto;overflow: hidden;}
.header .nav .navSub2 ul li{width: 33.33%;box-sizing: border-box;border-right: 1px solid #D4D4D4;border-top: 1px solid #D4D4D4;margin-top: -1px;display: flex;align-items: flex-start;padding: 1rem;}
.header .nav .navSub2 ul li:nth-child(3n){border-right: none;}
.header .nav .navSub2 ul li .pic{flex-shrink: 0;width: 4rem;margin-right: 1rem;}
.header .nav .navSub2 ul li .pic img{max-width: 100%;}
.header .nav .navSub2 ul li .right{flex: 1;overflow: hidden;}
.header .nav .navSub2 ul li .title{display: flex;align-items: center;color: #000000;line-height: 0.93rem;margin-bottom: 0.27rem;}
.header .nav .navSub2 ul li .title .arr{height: 0.43rem;margin-left: 1rem;filter: brightness(0) invert(0.5);}
.header .nav .navSub2 ul li .title:hover{color: #0064B2;}
.header .nav .navSub2 ul li .title:hover .arr{filter: brightness(1) invert(0);}
.header .nav .navSub2 ul li dd{color: #787878;line-height: 0.73rem;font-weight: bold;}
.header .nav .navSub2 ul li dd a:hover{color: #0064B2;}
.header .tel{padding: 0 1rem;height: 3.33rem;border-left: 1px solid #D8D8D8;border-right: 1px solid #D8D8D8;color: #0064B2;font-weight: bold;line-height: 1.1rem;display: flex;flex-direction: column;justify-content: center;}
.header .tel .tit{display: flex;align-items: center;line-height: 0.67rem;margin-bottom: 0.17rem;}
.header .tel .tit .icon{width: 0.6rem;margin-right: 0.3rem;}
.header .searchBtn{width: 3.33rem;height: 3.33rem;background: #0064B2;color: #fff;flex-direction: column;line-height: 0.67rem;cursor: pointer;}
.header .searchBtn .icon{height: 0.8rem;margin-bottom: 0.5rem;}

/* 切换按钮 */
.btnStyle{width: 2.33rem;height: 2.33rem;box-sizing: border-box;border: 1px solid #0064B2;border-radius: 50%;cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;}
.btnStyle.prev{left: 2.6%;}
.btnStyle.next{right: 2.6%;}
.btnStyle img{height: 30%;}
.btnStyle:hover{background: #0064B2;}
.btnStyle:hover img{filter: brightness(0) invert(1) !important;}
.btnStyle.mini{width: 1.87rem;height: 1.87rem;}

/* 查看更多 */
.moreBtn{width: 6.7rem;height: 2.27rem;box-sizing: border-box;box-sizing: border-box;border: 1px solid #0064B2;border-radius: 2.27rem;padding: 0 0.67rem;color: #0064B2;font-weight: bold;}
.moreBtn .icon{width: 1.2rem;height: 1.2rem;background: #0064B2;border-radius: 50%;transition: 0.3s;}
.moreBtn .icon img{height: 38.8%;filter: brightness(0) invert(1);}
.moreBtn:hover .icon{background: #fff;}
.moreBtn:hover .icon img{filter: brightness(1) invert(0);}

/* 分页器 */
.paginationStyle.swiper-pagination{z-index: 1;bottom: 1.67rem;width: auto;left: auto;right: 2.6%;}
.paginationStyle.swiper-pagination.center{right: auto;left: 50%;transform: translateX(-50%);bottom: 0;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet{position: relative;width: 24px;height: 24px;margin: 0 0.33rem 0 0;background: none;opacity: 0.2;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet::before{content: "";width: 10px;height: 10px;position: absolute;left: 7px;top: 7px;background: #0064B2;border-radius: 50%;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet em{display: block;width: 100%;height: 100%;transform: scale(0.25);transition: 1s;background: #0064B2;border-radius: 50%;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet svg{z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;fill: transparent;stroke-width: 2px;stroke: #0064B2;stroke-dasharray: 70;stroke-dashoffset: -70;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet-active{opacity: 1;}
.paginationStyle.swiper-pagination .swiper-pagination-bullet-active em{background-color: rgba(255,255,255,0);transform: scale(1);}
.paginationStyle.swiper-pagination .swiper-pagination-bullet-active svg{animation: svgAni 5s linear forwards;}

/* 底部 */ 
.footer{background: #F8F8F8;}
.footer .top{padding: 1.83rem 0;display: flex;justify-content: space-between;}
.footer .top .left{width: 7.3rem;}
.footer .top .left .logo img{height: 2.13rem;margin-bottom: 1.37rem;}
.footer .top .left .item{margin-bottom: 1rem;}
.footer .top .left .item .tit{display: flex;align-items: center;color: #031834;margin-bottom: 2px;}
.footer .top .left .item .tit .icon{height: 0.73rem;margin-right: 0.37rem;}
.footer .top .left .item .tel{color: #031834;font-weight: bold;line-height: 1.33rem;}
.footer .top .left .item .cont{color: #031834;line-height: 0.83rem;}
.footer .top .qrcode{cursor: pointer;position: relative;}
.footer .top .qrcode .ma {position: absolute;bottom: calc(100% + 1rem);left: 50%;transform: translateX(-50%);width: 130px;border-radius: 4px;padding: 6px;background: #fff;box-sizing: border-box;box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);visibility: hidden;opacity: 0;transition: 0.3s;}
.footer .top .qrcode .ma::before {content: "";position: absolute;bottom: -0.38rem;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 0.47rem solid transparent;border-right: 0.47rem solid transparent;border-top: 0.4rem solid #fff;}
.footer .top .qrcode .ma img {width: 100%;}
.footer .top .qrcode:hover .ma {visibility: initial;opacity: 1;bottom: calc(100% + 0.38rem);}
.footer .nav{display: flex;line-height: 1;color: #787878;}
.footer .nav dl{margin-left: 4.67rem;max-width: 3.5rem;    margin-left: 2.67rem;
    max-width: 9.5rem;}
.footer .nav dl:first-child{margin-left: 0;}
.footer .nav dt{color: #3D3D3D;font-weight: bold;line-height: 1.4;margin-bottom: 1.23rem;}
.footer .nav dd{margin-bottom: 0.67rem;}
.footer .nav dd:last-child{margin-bottom: 0;}
.footer .nav a:hover{color: #0064B2;}
.footer .btm{background: #0064B2;color: #FFFFFF;}
.footer .btm .left span{margin-right: 5px;}
.footer .btm .left span:last-child{margin-right: 0;}
.footer .select{position: relative;width: 8.73rem;}
.footer .select dt{padding: 0 0.67rem;position: relative;background: rgba(255,255,255,0.3);cursor: pointer;line-height: 2.07rem;}
.footer .select dt::before{content: "";border: 8px solid transparent;border-top-color: #fff;position: absolute;right: 0.67rem;top: 50%;transform: translateY(-50%);}
.footer .select dd{position: absolute;left: 0;bottom: 100%;width: 100%;background: #fff;display: none;}
.footer .select dd ul{max-height: 10rem;overflow: auto;}
.footer .select dd ul li a{display: block;padding: 6px 0.67rem;color: #787878;line-height: 1.6;}
.footer .select dd ul li a:hover{background: #F8F8F8;}

/* 数字滚动 */
.dataList{margin: 3rem auto 2.47rem;color: #3D3D3D;line-height: 0.73rem;}
.dataList .line{width: 1px;height: 1.47rem;background: #E5E5E5;}
.dataList .line:last-child{display: none;}
.dataList .item{width: 6.87rem;}
.dataList .item .icon{height: 1.17rem;}
.dataList .item .cont{margin-top: 0.47rem;color: #0064B2;font-weight: bold;}

/* 按钮 */
.buttonStyle{width: 1.87rem;height: 1.87rem;box-sizing: border-box;border: 1px solid rgba(120, 120, 120, 0.34);border-radius: 50%;position: relative;transition: 0.3s;}
.buttonStyle .bg{width: 100%;height: 100%;position: absolute;left: 0;top: 0;color: #0064B2;opacity: 0;transition: 0.3s;}
.buttonStyle .bg::before{content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;border: 1px solid currentColor;border-radius: 50%;animation: aniDot 3s linear infinite;}
.buttonStyle .bg::after{content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;border: 1px solid currentColor;border-radius: 50%;animation: aniDot 3s linear 1s infinite;}
.buttonStyle .box{width: 100%;height: 100%;background: #fff;border-radius: 50%;position: relative;z-index: 2;}
.buttonStyle .box img{height: 30%;filter: brightness(0) invert(0.5);}
.active .buttonStyle,
a:hover .buttonStyle{transform: scale(0.78);}
.active .buttonStyle .bg,
a:hover .buttonStyle .bg{opacity: 1;}

/* 产品 */
.prodBox{width: 22.8%;background: #FFFFFF;box-shadow: 0 0 0.93rem 0 rgba(0,0,0,0.10);position: relative;}
.prodBox.active{width: 48.57%;}
.prodBox::before{content: "";width: 100%;height: 68%;position: absolute;left: 0;top: 0;background-image: linear-gradient(180deg, #F8F8F8 0%, #E3E3E3 100%);opacity: 0;}
.prodBox .wrap{display: block;position: relative;padding: 1.67rem 0.67rem;box-sizing: border-box;height: 16.67rem;}
.prodBox .title{color: #000000;line-height: 1.4;font-weight: bold;padding-bottom: 0.67rem;border-bottom: 1px solid #D8D8D8;margin-bottom: 0.67rem;}
.prodBox ul{position: relative;z-index: 3;}
.prodBox ul li{color: #000000;line-height: 0.77rem;margin-bottom: 0.3rem;padding-left: 0.67rem;position: relative;}
.prodBox ul li::before{content: "";width: 0.2rem;height: 0.2rem;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: #0064B2;border-radius: 50%;}
.prodBox .pic{width: 6.67rem;height: 4.73rem;position: absolute;right: 0;bottom: 1.67rem;object-fit: contain;}
.prodBox .buttonStyle{position: absolute;left: 1.67rem;bottom: 1.67rem;}
.prodBox.active::before,
.prodBox:hover::before{opacity: 1;}
.prodBox.active .pic{right: 1.67rem;bottom: 1.9rem;width: 11.43rem;height: 10.4rem;}

/* 悬浮按钮 */
.float{position: fixed;right: 0;bottom: 20%;z-index: 9;}
.float li a{width: 4rem;height: 1.4rem;background: #0064B2;border-radius: 1.4rem;color: #fff;box-sizing: border-box;padding: 0 0.5rem;color: #fff;border: 1px solid #0064B2;}
.float li a img{height: 30%;margin-right: 0.3rem;filter: brightness(0) invert(1);}
.float li a:hover{background: #fff;color: #333;}
.float li a:hover img{filter: brightness(1) invert(0);}

@media screen and (max-width: 1620px){

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

}

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

@media screen and (max-width: 1200px){
.header .nav{padding-left: 1.5rem;}
.header .nav .nLi{padding: 0 0.6rem;}

.footer .nav dl{margin-left: 3rem;} 
}

@media screen and (max-width: 1024px){
.header{padding: 0 2.6%;}
.header .nav{display: none;}
.header .menuIcon{display: block;}

.footer .nav dl{margin-left: 1rem;}
}

@media screen and (max-width: 760px){
.header{line-height: 2.2rem;position: fixed;left: 0;top: 0;width: 100%;z-index: 9;background: #fff;}
.header .logo img{height: 1.3rem;}
.header .searchBtn{width: 2.2rem;height: 2.2rem;}
.header .searchBtn .icon{margin-bottom: 0;}
.header .tel{padding: 0 0.5rem;height: 2.2rem;}
.header .tel .tit{margin-bottom: 0;}

#page{padding-top: 2.2rem;}

.btnStyle{width: 1.5rem;height: 1.5rem;}

.moreBtn{width: 4.5rem;height: 1.5rem;padding: 0 0.2rem;}
.moreBtn .icon{width: 1rem;height: 1rem;}

.footer .nav{display: none;}
.footer .top .left .logo{display: none;}
.footer .top .left{width: 100%;}
.footer .top .qrcode .moreBtn{width: 6.5rem;margin: 0;}
.footer .top .left .item{margin-bottom: 0.5rem;}
.footer .btm{padding: 0.5rem 0;}
.footer .btm > .w1400{display: block;}
.footer .btm .left{margin-bottom: 0.5rem;}
.footer .select dt{line-height: 1.6rem;}

.dataList{flex-wrap: wrap;margin: 1rem auto;}
.dataList .item{width: 40%;margin-bottom: 1rem;}
.dataList .line{display: none;}
.dataList .item .icon{height: 0.8rem;}

.prodBox::before{display: none;}
.prodBox .wrap{height: 10rem;padding: 0.66rem;}
.prodBox .pic{bottom: 1rem !important;right: 0 !important;}
.prodBox.active .pic{width: 6.67rem;height: 4.73rem;}
.prodBox .buttonStyle{left: 0.66rem;}
}

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