
@keyframes aniDot{
	0%{opacity: 1;transform: scale(1);}
	100%{opacity: 0;transform: scale(2.5);}
}


/* header */
.header{position: fixed;left: 0;top: 0;width: 100%;z-index: 99;line-height: 3.33rem;box-sizing: border-box;padding: 0 8.3%;color: #fff;}
.header .logo img{height: 2.53rem;filter: brightness(0) invert(1);}
.header .nav .nLi{position: relative;}
.header .nav .nLi h2 a{display: block;position: relative;font-weight: bold;padding: 0 0.66rem;}
.header .nav .nLi h2 a::before{content: "";width: 20px;height: 6px;position: absolute;bottom: 17px;left: 50%;margin-left: -10px;background: url(../images/line.svg) no-repeat center;filter: brightness(0) invert(1);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 .navSub{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 .navSub ul li{padding: 12px 0;}
.header .nav .nLi .navSub a{display: block;line-height: 24px;text-align: center;padding: 0 4px;position: relative;}
.header .nav .nLi .navSub a:hover{color: #2D5A7E;}
.header .nav .nLi .navSub a:before{content: "";width: 2px;height: 100%;background: #2D5A7E;position: absolute;left: 0;top:0;-webkit-transform: scale(1,0);transform: scale(1,0);}
.header .nav .nLi .navSub a:hover:before{-webkit-transform: scale(1);transform: scale(1);}
.header dl{padding-left: 1rem;}
.header dl dd{padding-left: 2rem;position: relative;padding-left: 1.6rem;}
.header dl dd img{filter: brightness(0) invert(1);}
.header dl dd .icon{cursor: pointer;}
.header dl dd::before{content: "";width: 1px;height: 0.6rem;background: #E9E9E9;position: absolute;left: 0.8rem;top: 50%;margin-top: -0.3rem;}
.header dl dd:first-child{padding-left: 0;}
.header dl dd:first-child::before{display: none;}
.header dl dd a:hover{color: #2D5A7E;}
.header dl dd img{height: 0.6rem;}
.header dl dd .mail{filter: brightness(0) invert(1);}
.header.fixed,
.header:hover{background: #fff;border-color: #D8D8D8;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;}
.header.fixed .logo img,
.header:hover .logo img,
.header.fixed .nav a:before,
.header:hover .nav a:before,
.header.fixed dl dd img,
.header:hover dl dd img,
.header.fixed .nav .nLi h2 a::before,
.header:hover .nav .nLi h2 a::before{filter: brightness(1) invert(0);}
.header.fixed .searchBtn,
.header:hover .searchBtn{filter: brightness(0) invert(0.1);}
.header.fixed .menuIcon span,
.header:hover .menuIcon span{background: #2D5A7E;}


/* moreBtn */
.moreBtn{width: 4.33rem;height: 1.2rem;border: 1px solid #2D5A7E;border-radius: 0.7rem;margin: 0 auto;color: #2D5A7E;}
.moreBtn:after{background-image: linear-gradient(to bottom right, rgba(255,255,255,0.79), #FFFFFF);}
.moreBtn div{width: 100%;height: 100%;}
.moreBtn img{width: 0.73rem;margin-left: 0.4rem;}
.moreBtn:hover,a:hover .moreBtn{color: #2D5A7E !important;}


/* moreBtn1 */
.moreBtn1{display: block;width: 4.8rem;height: 1.6rem;box-sizing: border-box;padding: 0 0 0 1rem;border: 1px solid #2D5A7E;border-radius: 0.8rem;margin: 0 auto;color: #2D5A7E;line-height: 1.58rem;position: relative;}
.moreBtn1 i{width: 1.33rem;height: 1.33rem;position: absolute;right: 4px;top: 50%;transform: translateY(-50%);border-radius: 50%;text-align: center;line-height: 1.33rem;}
.moreBtn1 i::before{content: "";width: 100%;height: 100%;border-radius: 0.66rem;position: absolute;right: 0;top: 0;background-image: linear-gradient(to bottom right, #2F8AB7, #2D5A7E);transition:all 0.2s linear;}
.moreBtn1 i img{position: relative;z-index: 2;filter: brightness(0) invert(1);}
.moreBtn1 span{position: relative;z-index: 2;}
.moreBtn1:hover{color: #fff;}
.moreBtn1:hover i::before{width: calc(4.8rem - 10px);}
.moreBtn1.left{margin-left: 0;margin-right: 0;}

/* prodList */
.prodList li{width: 32%;margin-right: 2%;}
.prodList li:nth-child(3n){margin-right: 0;}
.prodList .wrap{position: relative;border-radius: 0.4rem;overflow: hidden;box-shadow: 0 4px 20px rgba(187, 187, 187, 0.2);}
.prodList .wrap::before,
.prodList .wrap::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.prodList .wrap::before{background: url(../images/prodBg1.jpg) no-repeat center;background-size: cover;}
.prodList .wrap::after{background: url(../images/prodBg2.jpg) no-repeat center;background-size: cover;opacity: 0;}
.prodList .wrap .box{display: block;position: relative;z-index: 2;text-align: center;padding: 1.66rem 1rem 1rem;}
.prodList .wrap .logo{position: absolute;right: 1rem;top: 0.6rem;height: 0.6rem;}
.prodList .wrap .tit{color: #2D5A7E;line-height: 1.1;}
.prodList .wrap .desc{color: #333333;line-height: 0.7rem;margin: 0.6rem 0 0.7rem;}
.prodList .wrap .pic{height: 9rem;margin-top: 1rem;}
.prodList .wrap .pic img{max-width: 100%;max-height: 100%;}
.prodList .wrap:hover::before{opacity: 0;}
.prodList .wrap:hover::after{opacity: 1;}
.prodList .wrap:hover .tit,
.prodList .wrap:hover .desc{color: #fff;}

/* newsBtm */
.newsBtm{line-height: 1;color: #666666;}
.newsBtm .date{font-family: "DINProReg";}
.newsBtm .more{color: #2D5A7E;}
.newsBtm .more img{margin-left: 8px;}


/* footer */
.footer{background: url(../images/footerBg.jpg) no-repeat center top;background-size: cover;color: rgba(255, 255, 255, 0.9);}
.footer .top{padding: 1.2rem 8.3%;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.footer .top .logo img{height: 76px;filter: brightness(0) invert(1);height: 2rem;}
.footer .top .goTop{width: 1.73rem;height: 1.73rem;box-sizing: border-box;border: 1px solid rgba(255, 255, 255, 0.49);border-radius: 50%;background: rgba(45, 90, 126, 0.1);cursor: pointer;margin-left: 2rem;}
.footer .select{width: 8.66rem;position: relative;}
.footer .select dt{padding: 0 1.2rem;position: relative;border: 1px solid rgba(255, 255, 255, 0.49);background: rgba(45, 90, 126, 0.1);border-radius: 0.9rem;line-height: 1.7rem;color: #fff;cursor: pointer;}
.footer .select dt::before{content: "";width: 7px;height: 7px;border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;position: absolute;right: 1.2rem;top: 50%;margin-top: -6px;transform: rotateZ(-45deg);}
.footer .select dd{position: absolute;left: 0;bottom: 100%;width: 100%;background: #fff;border-radius: 0.9rem;display: none;overflow: hidden;display: none;}
.footer .select dd ul{max-height: 200px;overflow: auto;}
.footer .select dd a{display: block;padding: 10px 1.2rem;color: #666;line-height: 0.8rem;}
.footer .select dd a:hover{color: #2D5A7E;background: #eee;}
.footer .med{padding: 1.6rem 8.3% 2rem;align-items: flex-start;}
.footer .fNav dl{margin-left: 1.5rem;max-width: 12.06rem;}
.footer .fNav dl:first-child{margin-left: 0;}
.footer .fNav dl:last-child{margin-left: 2.33rem;}
.footer .fNav dl dt{line-height: 1;font-weight: bold;margin-bottom: 0.8rem;color: #fff;}
.footer .fNav dl dd{line-height: 1.33rem;}
.footer .fNav dl dd .line{display: flex;}
.footer .fNav dl dd .line span{flex-shrink: 0;}
.footer .fNav dl dd .line p{flex: 1;}
.footer .fNav a:hover{opacity: 0.8;text-decoration: underline;}
.footer .qrcode li{width: 3.6rem;margin-left: 1rem;text-align: center;line-height: 1;}
.footer .qrcode li:first-child{margin-left: 0;}
.footer .qrcode li .pic{width: 100%;margin-bottom: 0.66rem;border-radius: 6px;}
.footer .btm{padding: 0.7rem 8.3%;color: rgba(255, 255, 255, 0.8);line-height: 0.9rem;background: rgba(45, 90, 126, 0.2);}
.footer .btm .left span{margin-right: 1.66rem;}
.footer .btm .left span:last-child{margin-right: 0;}
.footer .btm .left span img{margin-right: 6px;}

@media screen and (max-width: 1880px){
.footer .btm .left span{margin-right: 0.8rem;}
.footer .qrcode li{width: 3rem;}
.footer .fNav dl{margin-left: 1rem;}
.footer .fNav dl:last-child{margin-left: 1.5rem;}
.footer .fNav dl dt{font-size: 0.5rem;}
.footer .fNav dl dd{font-size: 0.43rem;line-height: 2.2;}
.footer .qrcode li{margin-left: 0.5rem;font-size: 12px;}

}


@media screen and (max-width: 1700px){
.header .nav .nLi h2 a{padding: 0 0.4rem;}
}

@media screen and (max-width: 1480px){
.header .nav .nLi h2 a{padding: 0 0.4rem;}
.header dl dd{padding-left: 1.2rem;}
.header dl dd::before{left: 0.6rem;}
.footer .fNav dl{margin-left: 0.6rem;max-width: 10rem;}
.footer .fNav dl dt{margin-bottom: 0.4rem;}
.footer .btm{font-size: 12px;}
.footer .btm .left span{margin-right: 0.2rem;}
}

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

}

@media screen and (max-width: 1200px){
.header .logo img{height: 1.8rem;}
.header .nav .nLi h2 a{padding: 0 0.3rem;}
.footer .fNav dl:last-child{display: none;}
}
@media screen and (max-width: 1024px){
.header .nav{display: none;}
.header .menuIcon{display: block;margin-left: 1rem;}

.prodList .wrap .pic{height: 7rem;}

.footer .fNav{flex: 1;box-sizing: border-box;padding-right: 1rem;}
.footer .fNav dl{display: none;max-width: none;}
.footer .fNav dl:last-child{display: block;margin-left: 0;}
.footer .qrcode{flex-shrink: 0;}

}

@media screen and (max-width: 760px){
.header{line-height: 2.2rem;position: relative;background: #fff;border-color: #D8D8D8;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;padding: 0 5%;}
.header .logo img,
.header .nav a:before,
.header dl dd img{filter: brightness(1) invert(0);}
.header .logo img{height: 1.4rem;}
.header .searchBtn{filter: brightness(0) invert(0.1);}
.header .menuIcon span{background: #2D5A7E;}

.prodList li{width: 49%;margin-right: 0;margin-bottom: 10px;}
.prodList li:nth-child(2n){float: right;}
.prodList .wrap .pic{height: 4rem;}
.prodList .wrap .pic img{max-width: 100%;max-height: 100%;}

.footer .top,.footer .med,.footer .btm{padding: 0.5rem 5%;}
.footer .top .logo{display: none;}
.footer .top .right{justify-content: space-between;width: 100%;}
.footer .qrcode li{width: 2.5rem;}
.footer .btm{display: block;text-align: center;font-size: 12px;line-height: 20px;}
.footer .btm .left span{display: block;margin: 0;}
.footer .select dt{padding: 0 0.6rem;line-height: 1.4rem;}
.footer .select dt::before{right: 0.6rem;}
.footer .top .goTop{width: 1.5rem;height: 1.5rem;}
.footer .fNav dl dd{line-height: 1.8;}

.moreBtn1{width: 4rem;padding-left: 0.5rem;height: 1.2rem;line-height: 1.1rem;}
.moreBtn1 i{width: 0.9rem;height: 0.9rem;line-height: 0.9rem;}
.moreBtn1 i img{height: 6px;}
.moreBtn1:hover i::before{width: calc(4rem - 8px);}

.moreBtn{width: 3.8rem;line-height: 0.8rem;height: 1rem;}
.moreBtn img{margin-left: 0.3rem;height: 6px;}
}

@media screen and (max-width: 468px){
.prodList .wrap .box{padding: 1.6rem 0.2rem 0.5rem;}
.prodList .wrap .logo{right: 0.5rem;}
.prodList .wrap .tit{font-size: 0.5rem;}
.prodList .wrap .desc{font-size: 0.4rem;line-height: 0.5rem;margin: 0.3rem 0 0.4rem;}
.prodList .wrap .pic{margin-top: 0.5rem;}
}