/*只写布局，颜色、交互效果全部不写*/
.banner { position: relative; height: 488px; overflow: hidden; }
.banner .items { height: 488px; position: absolute; left: 0px; top: 0px; white-space: nowrap; }
.banner .item { display: inline-block; width: 100%; height: 100%; background: #F8F7F7; position: relative; }
.banner .item a { height: 100%; }
.banner .item .info { width: 100%; 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: 1200px; 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: 32px; z-index: 10; width: 100%; text-align: center; }
.banner .indexs span { display: inline-block; width: 16px; height: 16px; line-height: 16px; border: 1px solid #5EC5DE; border-radius: 2px; transform: rotate(45deg); margin-right: 8px; text-align: center; position: relative; }
.banner .indexs span:last-child { margin-right: 0px; }
.banner .indexs em { display: inline-block; width: 8px; height: 8px; background: #FFFFFF; border-radius: 2px; position: absolute; left: 4px; top: 4px; }
.banner .indexs .active { border: 1px solid #fff; }
.banner .indexs .active em { background: #5EC5DE; }

.banner .buttons { display: none; position: absolute; top: 50%; transform: translate(0, -50%); width: 60px; height: 60px; text-align: center; z-index: 1; cursor: pointer; }
.banner .buttons:hover { opacity: 0.8; }
.banner:hover .buttons { display: block; }
.banner .buttons-left { left: 320px; }
.banner .buttons-right { right: 320px; }

/*服务1*/
.service1 { }
.service1 > div { width: 1200px; margin: auto; margin-top: 96px; }
.service1 .title { text-align: center; }
.service1 .title .name { font-size: 28px; font-weight: bold; padding-bottom: 40px; color: #000; }
.service1 .title .desc { line-height: 28px; padding-bottom: 24px; }
.service1 .items { }
.service1 .item { float: left; width: 270px; padding-right: 40px; padding-bottom: 46px; }
.service1 .item:nth-child(4n) { padding-right: 0px; }
.service1 .item .pic { position: relative; width: 100%; height: 168px;overflow:hidden; }
.service1 .item .pic img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; }
.service1 .item .pic img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); }
.service1 .item .name { padding: 16px 0px 8px 0px; font-size: 16px; font-weight: bold; }
.service1 .item .desc { height: 48px; overflow: hidden; line-height: 24px; }
/*服务2*/
.service2 { }
.service2 > div { max-width: 1360px; height: 300px; margin: 50px auto 0px; position: relative; font-size: 28px; }
.service2 .title { }
.service2 .title .name .pic { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.service2 .title .name .pic img { width: 100%; height: 100%; object-fit: cover; }
.service2 .title .name span { display: block; width: 100%; padding-top: 77px; line-height: 41px; z-index: 1; position: relative; text-align: center; }
.service2 .title .name label { display: block; z-index: 1; position: relative; text-align: center; padding: 10px 0px 28px 0px; line-height: 41px; }
.service2 .items { display: none; }
.service2 .btn-deep { background: #fff; z-index: 1; position: relative; margin: auto; }
.service2 .btn-deep a { color: #02A1F1 !important; font-size: 14px; }
/*关于我们*/
.aboutus { }
.aboutus > div { max-width: 1360px; margin: auto; margin-top: 96px; display: flex; }
.aboutus .items { width: 925px; height: 300px; padding: 40px 80px 0px 80px; box-sizing: border-box; color: #fff; background-size: cover; margin-right: 8px; position: relative; color: #fff; }
.aboutus .items .pic { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
.aboutus .items .pic img { width: 100%; height: 100%; object-fit: cover; }
.aboutus .title { font-size: 28px; font-weight: bold; position: relative; z-index: 1; padding-bottom: 14px; }
.aboutus .desc { position: relative; z-index: 1; line-height: 28px; }
.aboutus .desc p:before { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; background: #D9D9D9; border-radius: 50%; margin: -2px 14px 0px 0px; }
.aboutus .vedio { width: 437px; height: 300px; position: relative; flex: 1; }
.aboutus .vedio img { width: 100%; height: 100%; object-fit: cover; }
.aboutus .vedio i { text-decoration: none; display: block; width: 144px; height: 144px; position: absolute; left: 50%; top: 50%; margin-left: -72px; margin-top: -72px; }

/*产品*/
.product { }
.product > div { width: 1200px; margin: auto; margin-top: 96px; }

.product .title { text-align: center; padding-bottom: 40px; color: #000; font-size: 28px; font-weight: bold; }

.product .items { width: 1124px; margin: auto; }
.product .item { float: left; width: 224px; height: 294px; margin: 0 0 -1px -1px; transition: all 0.5s; position: relative; line-height: 20px; background: #fff; font-size: 14px; }
.product .item:hover { box-shadow: 0px 8px 11px 6px rgba(160, 160, 160, 0.16); z-index: 1; }
.product .item a { display: block; padding: 24px 16px 0px 16px; text-decoration: none; }
.product .item .pic { width: 192px; height: 104px; margin: auto; }
.product .item .pic img { max-width: 100%; max-height: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.product .item .num { padding: 36px 0px 8px 0px; color: #000; }
.product .item .name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; }
.product .item .term { height: 20px; padding: 8px 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; }
.product .item .term span:after { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 14px; background: #ddd; margin: -2px 4px 0px 6px; }
.product .item .term span:last-child:after { display: none; }
.product .item .price label { font-weight: bold; }
.product .item .buttons { position: absolute; top: 4px; right: 4px; cursor: pointer; display: none; }
.product .item:hover .buttons { display: block; }
.product .item .tags { position: absolute; top: 12px; left: 12px; line-height: 20px; font-size: 12px; }
.product .item .tags span { display: inline-block; height: 20px; padding: 0px 4px; border-radius: 3px; }

.product .bsize-l { border: 1px solid #008CD4; margin: auto; margin-top: 40px; }
.product .action { display: none; }
/*新闻*/
.news { }
.news > div { width: 1200px; margin: 96px auto 0px; }
.news .title { text-align: center; padding-bottom: 40px; color: #000; font-size: 28px; font-weight: bold; }

.news .item { float: left; width: 293px; margin-right: 8px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.news .item a { text-decoration: none; }
.news .item .pic { height: 266px; width: 100%; background: #ddd; }
.news .item .pic img { width: 100%; height: 100%; object-fit: cover; }
.news .item .info { height: 56px; line-height: 56px; padding: 0px 16px; background: #F9F9F9; }
.news .item .name { color: #008CD4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: bold; }
.news .item .desc { display: none; height: 112px; line-height: 28px; overflow: hidden; }
.news .item:first-child { width: 598px; }
.news .item:first-child .pic { height: 374px; }
.news .item:first-child .info { height: 230px; padding: 0px 24px; }
.news .item:first-child .name { padding: 40px 0px 16px 0px; line-height: 23px; }
.news .item:first-child .desc { display: block; }
.news .item:nth-child(3) { margin-right: 0px; }
.news .item:last-child { width: 594px; margin-right: 0px; margin-top: 8px; }
.news .item:last-child .pic { height: 217px; }
.news .item:hover { box-shadow: 0px 10px 10px rgb(0 0 0 / 4%), 0px 20px 25px rgb(0 0 0 / 10%); }
.news .bsize-l { border: 1px solid #008CD4; margin: auto; margin-top: 40px; }