.header-nav > div { padding: 0px; border: none; }
.productclass { display: block !important; }
.navheader .productclass { display: none !important; }
.body { padding-top: 158px; }
/*只写布局，颜色、交互效果全部不写*/
.banner { position: relative; height: 420px; overflow: hidden; }
.banner .items { height: 420px; position: absolute; left: 0px; top: 0px; }
.banner .item { float: left; width: 100%; height: 100%; background: #F8F7F7; position: relative; }
.banner .item a { height: 100%; }
.banner .item img { width: 100%; height: 100%; object-fit: cover; }
.banner .item video { width: 100%; height: 100%; object-fit: cover; }

.banner .item .text { position: absolute; left: 50%; width: 1220px; margin-left: -610px; z-index: 1; top: 50%; transform: translate(0, -55%); }

.banner .item .text-center { text-align: center; }
.banner .item .text-left { text-align: left; }
.banner .item .text-right { text-align: right; }

.banner .indexs { position: absolute; bottom: 44px; width: 100%; text-align: center; z-index: 1; }
.banner .indexs span { width: 40px; height: 4px; margin-right: 16px; opacity: 0.4; }
.banner .indexs span:last-child { margin-right: 0px; }
.banner .indexs .active { opacity: 1; }

.banner .buttons { display: none; opacity: 0; position: absolute; top: 50%; transform: translate(0, -50%); width: 44px; height: 100px; line-height: 100px; text-align: center; cursor: pointer; background: rgba(0, 0, 0, 0.2); z-index: 1; }
.banner .buttons:hover { opacity: 0.8; }
.banner:hover .buttons { display: block; }
.banner:hover .buttons i { filter: brightness(100); }
.banner .buttons-left { left: 60px; }
.banner .buttons-right { right: 60px; }
.banner .buttons-left i { background-position: -310px -1090px; }
.banner .buttons-right i { background-position: -370px -1090px; }

.banner-narrow { width: 1300px; margin: auto; position: relative; }
.banner-narrow .item .text { left: 50%; top: 50%; width: 1000px; margin-left: 0px; transform: translate(-50%, -50%); }

.category { width: 100%; position: absolute; top: 158px; left: 0px; z-index: 1; }
.category > div { width: 1300px; margin: auto; position: relative; }
.category .items { position: absolute; left: 0px; top: 0px; width: 248px; width: 248px; height: 396px; padding-top: 26px; background: rgba(0, 140, 216, 0.71); backdrop-filter: blur(10px); z-index: 10; }
.category .items ul { }
.category .items li { height: 52px; line-height: 52px; position: relative; }
.category .items li a { height: 52px; line-height: 52px; position: relative; padding: 0px 22px; display: block; color: #fff; text-decoration: none; }
.category .items li a .pic { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-right: 8px; }
.category .items li a .pic img { width: 100%; height: 100%; object-fit: cover; vertical-align: top; }
.category .items li a:hover img { filter: brightness(0); }
.category .items li a span { vertical-align: middle; }
.category .items li:hover > a { background: #fff; color: #333; }
.category .items li:hover dl { display: block; }

.category .items dl { display: none; width: 248px; position: absolute; right: -248px; top: 0px; background: rgba(0, 140, 216, 0.71); backdrop-filter: blur(10px); z-index: 200; box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.2); overflow: hidden; }
.category .items dd a { font-size: 14px; }
.category .items dd a:hover { background: #fff; color: #333; }


/*服务1*/
.service1 { }
.service1 > div { width: 1300px; margin: auto; padding: 80px 0px; }
.service1 .title { text-align: center; padding-bottom: 40px; }
.service1 .title .name { font-size: 24px; margin-top: -4px; }
.service1 .title .desc { font-size: 20px; color: rgba(0, 140, 216, 0.12); letter-spacing: 0.08em; }
.service1 .title .pic { display: none; }
.service1 .item { width: 295px; float: left; margin-top: 40px; margin-right: 40px; transition: all 0.5s ease-out; }
.service1 .item:nth-child(-n+4) { margin-top: 0px; }
.service1 .item:nth-child(4n) { margin-right: 0px; }
.service1 .item:hover { box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.1); }
.service1 .item a { text-decoration: none; }
.service1 .item .pic { height: 160px; border-radius: 5px 5px 0px 0px; overflow: hidden; }
.service1 .item .pic img { width: 100%; height: 100%; object-fit: cover; }
.service1 .item .info { height: 113px; padding: 16px; background: #F9F9F9; border-radius: 0px 0px 5px 5px; }
.service1 .item .info .name { color: #008CD8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.service1 .item .desc { height: 84px; line-height: 28px; padding-top: 8px; overflow: hidden; }

/*产品*/
.product { background: #F9F9F9; }
.product > div { width: 1300px; margin: auto; padding: 40px 0px; }

.product .title { text-align: center; padding-bottom: 40px; }
.product .title .name { font-size: 24px; margin-top: -4px; }
.product .title .desc { font-size: 20px; color: rgba(0, 140, 216, 0.12); letter-spacing: 0.08em; }
.product .item { float: left; width: 242px; height: 334px; transition: all 0.5s; position: relative; margin-right: 20px; margin-top: 20px; background: #fff; overflow: hidden; border-radius: 4px; box-shadow: 0px 4px 9px 0px rgba(150, 150, 150, 0.23); }
.product .item:nth-child(5n) { margin-right: 0px; }
.product .item:nth-child(-n+5) { margin-top: 0px; }
.product .item a { text-decoration: none; }
.product .item .pic { width: 204px; height: 130px; margin: auto; margin-top: 20px; transition: all 0.3s; }
.product .item .pic img { max-width: 100%; max-height: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.product .item .name { font-weight: bold; height: 36px; line-height: 18px; margin: 30px 20px 0px 20px; overflow: hidden; }
.product .item .info { height: 108px; padding: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.3s; position: relative; }
.product .item .info table { width: 100%; text-align: left; }
.product .item .info td { height: 24px; }
.product .item .info .price { font-weight: bold; color: #008CD8; }
.product .item .info .num { width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product .item .tags { position: absolute; top: 12px; left: 12px; }
.product .item .tags span { vertical-align: middle; }

.product .item .leadtime { font-weight: bold; }
.product .item:hover { box-shadow: 3px 4px 10px 0px rgba(162, 162, 162, 0.3); }
.product .item:hover .info { background: #0CA3F3; color: #fff; height: 116px; padding: 16px 20px; }
.product .item:hover .pic { width: 152px; height: 100px; }
.product .item:hover .name { margin: 16px 20px }
.product .item:hover .bottons { height: 32px; }
.product .item:hover .price { color: #fff !important; }
.product .item:hover .leadtime { color: #fff !important; }
.product .item .bottons { height: 0px; position: absolute; width: 204px; padding: 0px 20px; left: 0px; bottom: 14px; overflow: hidden; transition: all 0.3s; }
.product .item .bottons span { display: inline-block; width: 57px; height: 32px; text-align: center; border-radius: 16.5px; background: #FFFFFF; cursor: pointer; }

.product .btn-deep { display: block; margin: 40px auto 0px; text-align: center; border: 1px solid #008CD8; background: #008CD8; color: #fff !important; text-decoration: none !important; cursor: pointer; font-weight: normal; transition: all 0.3s; font-size: 14px; border-radius: 20px; }

/*新闻*/
.news { padding: 80px 0px 0px 0px }
.news .title { text-align: center; padding-bottom: 40px; }
.news .title .name { font-size: 24px; margin-top: -4px; }
.news .title .desc { font-size: 20px; color: rgba(0, 140, 216, 0.12); letter-spacing: 0.08em; }
.news .switcher { width: 1300px; margin: auto; position: relative; }
.news .switcher .wrap { width: 1180px; height: 414px; overflow: hidden; margin: auto; position: relative; }
.news .switcher .items { position: absolute; height: 414px; left: 0px; top: 0px; }
.news .bottons div { position: absolute; top: 190px; cursor: pointer; }
.news .bottons div:hover { opacity: 0.8; }
.news .bottons .buttons-left { left: 0px; }
.news .bottons .buttons-right { right: 0px; }
.news .indexs { text-align: center; padding-top: 36px; }
.news .indexs span { display: inline-block; width: 16px; height: 16px; margin-right: 16px; transform: rotate(45deg); background: #D8D8D8; }
.news .indexs span:last-child { margin-right: 0px; }
.news .indexs .cur { background: #0CA3F3; }
.news .btn-deep { display: block; margin: 40px auto 0px; text-align: center; border: 1px solid #008CD8; background: #008CD8; color: #fff !important; text-decoration: none !important; cursor: pointer; font-weight: normal; transition: all 0.3s; font-size: 14px; border-radius: 20px; }

.news .item { float: left; width: 380px; height: 263px; margin-right: 20px; border-radius: 10px; overflow: hidden; position: relative; transition: all 0.5s; margin-top: 72px; }
.news .item:last-child { margin-right: 0px; }
.news .item img { width: 100%; height: 100%; object-fit: cover; }
.news .item .desc { position: absolute; bottom: 0px; left: 0px; width: 348px; padding: 0px 16px; height: 54px; background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(10px); }
.news .item .name { height: 24px; line-height: 24px; overflow: hidden; color: #008CD8; margin: 16px 0px 8px 0px; }
.news .item .text { height: 84px; line-height: 28px; overflow: hidden; color: #666666; }
.news .on { height: 413px; margin-top: 0px; }
.news .on .name { height: 48px; }
.news .on .desc { height: 172px; }
.news .on .text { }

/*服务2*/
.service2 { }
.service2 > div { width: 1300px; margin: auto; padding: 80px 0px; }
.service2 .title { text-align: center; padding-bottom: 40px; }
.service2 .title .name { font-size: 24px; margin-top: -4px; }
.service2 .title .desc { font-size: 20px; color: rgba(0, 140, 216, 0.12); letter-spacing: 0.08em; }
.service2 .item { width: 228px; height: 128px; margin: 0px 40px 40px 0px; float: left; }
.service2 .item:nth-child(5n) { margin: 0px 0px 40px 0px; }
.service2 .item .pic { height: 80px; text-align: center; }
.service2 .item .pic img { width: 180px; height: 100%; object-fit: contain; }
.service2 .item .info { height: 48px; line-height: 48px; text-align: center; overflow: hidden; white-space: nowrap; background: #F9F9F9; }
.service2 .item .info a { text-decoration: none; }