/*banner*/
.banner-position { position: relative; height: 100vh; overflow: hidden; }
.banner-position:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; background: #000; opacity: 0.36; left: 0; top: 0; }
svg { width: 100%; overflow: visible; }
.banner-position .txt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 2; padding: 0 160px }
.banner-position .txt h3 { color: #fff; font-size: 5.8rem; line-height: 1.2; margin-bottom: 4rem; font-weight: bold; }
.banner-position .txt p { color: #fff; font-size: 1.8rem; width: 60%;font-family: 'hlight'; }
.slides-box { width: 100%; height: 100%; margin: auto; overflow: hidden; }
.slides { position: relative; height: 100%; width: 100%; margin: auto; float: left; }
.slides li { position: absolute; width: 100%; height: 100%; }
.slides li img { display: block; width: 100%; margin: auto; animation: ban 5s ease-out; }
.hd .prev, .hd .next { position: absolute; z-index: 99; top: 50%; margin-top: -4rem; left: 0; height: 7rem; width: 3rem; color: #fff; cursor: pointer; background-color: #000; opacity: .5; }
.hd .prev:hover, .hd .next:hover { opacity: .7; }
.hd .prev { background-image: url("../icon-left1.webp"); }
.hd .next { left: auto; right: 0; background-image: url("../icon-right1.webp"); }
.pagination { position: absolute; bottom: 0; z-index: 99; width:160rem; margin: 0 8rem; height: 10rem; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; }
.pagination li { padding: 0.5rem 0.3rem; float: left; }
.pagination li a { display: block; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; border-radius: 2.5rem; color: #fff; opacity: 0.5; text-align: center; font-family: Arial; text-decoration: none; position: relative; font-size: 1.4rem; }
.pagination .active { opacity: 1; }
.pagination .active:after { content: ''; display: block; width: 0.6rem; height: 0.2rem; background: #fff; position: absolute; left: 50%; margin-left: -0.2rem; bottom: -1.5rem; }
.banner-position .more { margin-top: 4rem; float: left; }
@keyframes ban { 0% {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
 100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
/************  about  *************/
.about { background: rgba(8, 99, 196, 0.04); overflow: hidden; }
.about .left { width: 60%; float: left; }
.honor { width: 100%; float: left; overflow: hidden; }
.swiper-container { margin-left: auto; margin-right: auto; position: relative; z-index: 1; width: 100%; }
.swiper-container-no-flexbox .swiper-slide { float: left }
.swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column }
.swiper-wrapper { position: relative; width: 10%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; align-items: center; height: 43rem; }
.swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate(0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 50%; height: 100%; position: relative; padding: 0; display: flex; align-items: center; }
.swiper-button-next, .swiper-button-prev { top: 0; width: 4rem; height: 20rem; background-size: auto 2rem; background-position: center; background-repeat: no-repeat; cursor: pointer; margin: 0 2rem; opacity: 0.64; transition: all 0.3s; }
.swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 }
.swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; display: inline-block; border-radius: 100%; border: 1px solid #0863c4; opacity: 0.48; margin: 0 0.5rem; cursor: pointer; }
.swiper-slide:hover img { box-shadow: rgba(8,99,196,.24) 0px 0px 2.4rem; }
.banner-box { width: 100%; float: left; position: relative; overflow: hidden; }
.swiper-slide { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transform: scale(.8); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transition: transform 1.0s; -moz-transition: transform 1.0s; -ms-transition: transform 1.0s; -o-transition: transform 1.0s; -webkit-transform: scale(0.7); -moz-box-shadow: rgba(0,0,0,.2) 0px 0px 3rem; }
.swiper-slide-active, .swiper-slide-duplicate-active { -webkit-transform: scale(1); transform: scale(1); }
.swiper-slide img { width: auto; height: auto; margin: 0 auto; display: block; max-width: 100%; max-height: 38rem; background: #fff; padding: 1rem; border-radius: 0.8rem; }
.swiper-slide p { text-align: center; opacity: 0; font-weight: bold; font-size: 1.6rem; color: #333; margin-top: 2rem; }
.swiper-slide-active p { opacity: 1; }
.swiper-pagination { position: relative; padding: 1.9rem 0; }
.swiper-pagination-bullet-active { opacity: 1; background: #0863c4; }
 @media screen and (max-width: 668px) {
.swiper-pagination { position: relative; margin-bottom: 20px; }
.swiper-pagination-bullet-active { opacity: 1; background: rgba(0,0,0,.8); }
}
.banner-arrow { height: 4rem; width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 2rem; }
.swiper-button-prev { background: url("../../images/left.svg") center no-repeat; }
.swiper-button-next { background: url("../../images/right.svg")center no-repeat; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: 1; }
._quan { position: absolute; top: 50%; left: 25%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 38rem; height: 38rem; background-color: #e4eef8; border-radius: 50%; z-index: -1; pointer-events: none }
._quan s { pointer-events: none; left: 0; top: 0; width: 100%; height: 100%; position: absolute; border-radius: inherit; border: solid 1px rgba(197,214,223,.8); -webkit-animation: spread 6s linear infinite; animation: spread 6s linear infinite; z-index: -1; will-change: transform }
._quan s:nth-child(1) { -webkit-animation-delay: -2s; animation-delay: -2s }
._quan s:nth-child(2) { -webkit-animation-delay: -4s; animation-delay: -4s }
._quan s:nth-child(3) { -webkit-animation-delay: -6s; animation-delay: -6s }
@-webkit-keyframes spread { 0% {
 -webkit-transform:scale(1);
 transform:scale(1);
 opacity:.8
}
 100% {
 -webkit-transform:scale(3);
 transform:scale(3);
 opacity:0
}
}
@keyframes spread { 0% {
 -webkit-transform:scale(1);
 transform:scale(1);
 opacity:.8
}
 100% {
 -webkit-transform:scale(3);
 transform:scale(3);
 opacity:0
}
}
.about .right .box-tit { text-align: left; justify-content: left; }
.about .box-tit p { color: #0863C4; }
.about .right { width: 33.75%; float: right;margin-right: 6.25%; }
.about .right .box-content { margin-top: 4rem; }
.about .right .box-content .company-desc{width: 100%;font-family: 'hlight';font-size: 1.6rem;text-align: justify;}
.product{background:url("../../images/pro-bg.jpg") center no-repeat;}
.product .wrap{position:relative;}
.product .box-tit{justify-content: flex-start; text-align:left; position: absolute;left:0;top:0;}
.product .tab{width:100%;float:left;}
.product .tab .tab-hd{float:right;font-size: 1.6rem;width:20%;margin-top:6rem;}
.product .tab .tab-hd li{height:8.5rem;display: flex;align-items: center; cursor: pointer;}
.product .tab .tab-hd li i{width:0;height: 0;margin-left:1.5rem;}
.product .tab .tab-hd li:hover i,.product .tab .tab-hd li.active i{width:24px;height: 14px;margin-left:1.5rem;}
.product .tab .tab-hd li:hover span,.product .tab .tab-hd li.active span{color:#0863c4;}
.product .tab .tab-bd{float:left;width:80%;}
.product .tab .tab-bd li{display:none;}
.product .tab .tab-bd li.thisclass{ display:list-item;}
.product .pro-info{width:45%;float:left;padding-top:16rem;}
.product .pro-info .pro-tit{font-size: 3.6rem;line-height: 1;}
.product .pro-info .con{font-size: 1.6rem;line-height: 3rem;color: #333;margin: 2rem 0 3rem 0;font-family: 'hlight';text-align: justify}
.product .pro-info .txt .t{font-size:2.4rem;font-family: 'hlight';}
.product .pro-info .txt .t span{font-size:2.4rem;}
.product .pro-info .txt .t span em{font-family:Impact; margin:0 0.5rem;}
.product .pro-info .txt .t{display:inline-block; font-size:2.4rem; color:#333; vertical-align:text-bottom;margin-right:3rem;}
.product .pro-img{float:right;width:54%; height:53rem;}
.product .pro-img a{display: flex;width:100%;height: 100%;floata:left; justify-content: center; align-items: center;}
.product .pro-img a img{width:auto;height: auto;max-width: 80%;max-height: 80%;}
.news{ background:#FAFAFA;}
.news .box-content{margin: 0;}
.news .left{width:20rem;float:left;}
.news .box-tit{justify-content: flex-start; text-align: left;}
.news .tab-hd {overflow:hidden; zoom:1;width:100%;float: left; margin-top: 6rem;}
.news .tab-hd li{ float:left; width:100%; text-align:left; cursor:pointer; font-size: 1.6rem; height: 5rem;line-height: 5rem;}
.news .tab-hd li.active{color:#0863c4; font-size: 2.4rem; text-decoration: underline;}
.news .tab-bd{width:135rem;float: right;}
.news .tab-bd li{display:none;width:100%;}
.news .tab-bd li.thisclass{ display:list-item;}
.news .tab-bd li a{ display: block;width:calc(33.33% - 5rem); height: 55rem; float: left;margin-left: 5rem; border-radius: 6px 6px 0 0 ; overflow: hidden;}
.news .tab-bd li a .img{width:100%;height: 25rem; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.news .tab-bd li a .img img{width:100%; height: auto; min-height: 100%;}
.news .tab-bd li a .info{width:100%;background: #fff; position: relative; height: calc(100% - 25rem);}
.news .tab-bd li a .info .tit{font-size:1.8rem; font-family: 'hbold'; padding: 3rem 3rem 2rem 3rem;}
.news .tab-bd li a .info .con{font-size: 1.6rem;color:#666; margin:0;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;text-align: justify;font-family: 'hlight';padding:0 3rem;}
.news .tab-bd li a .info .bottom{ margin-top: 2rem;width:100%; height: 6rem; line-height: 6rem;padding-left: 3rem; position: absolute;bottom:0;}
.news .tab-bd li a .info .bottom span{float:left;font-size: 1.4rem;color:#999;}
.news .tab-bd li a .info .bottom i{float:right;width:6rem;height: 6rem; background: #0863c4; display: flex;justify-content: center;align-items: center; overflow: hidden;position: relative;}
.news .tab-bd li a .info .bottom i img{width:1.4rem;position: absolute;}
.news .tab-bd li a .info .bottom i img:first-of-type{left:-5rem;}
.news .tab-bd li a:hover .info .bottom i img:first-of-type{left:50%; margin-left:-0.7rem;}
.news .tab-bd li a:hover .info .bottom i img:last-of-type{ opacity: 0;}
.news .tab-bd li a:hover .img{display: none;}
.news .tab-bd li a:hover .info{height: 100%; background: #0863c4;}
.news .tab-bd li a:hover .info .tit,.news .tab-bd li a:hover .info .con,.news .tab-bd li a:hover .info .bottom span{color:#fff;}
.news .more{float:left;}
.service{background: url("../../images/inservice-bg.jpg") center no-repeat;background-attachment: fixed;}
.service .box-tit p,.service .box-tit span{color:#fff;}
.service .box-tit i{background:#fff;}
.service .more{ justify-content: center;}
.service .more a:before{ background: #fff;}
.service .more a span{color:#0863c4;}
.service .more a:hover span{color:#fff;}
@media screen and (max-width: 992px) {
  .banner-position .txt{padding:10px;}
  .banner-position .txt h3{font-size:40px; text-align: center; line-height:1.5;}
  .banner-position .txt p{width:100%; text-align: center;}
  .banner-position .more{justify-content: center;width:100%;}
  .pagination{width:100%;}
  .slides li{display:flex; justify-content: center;}
  .slides li img{width:auto;height:100%;max-width:none;}
  .about .left{width:100%; margin-top:30px;}
  .about .right{width:100%; padding:0 10px 10px 10px; margin: 0;}
  .swiper-wrapper{height:auto;}
  ._quan{top:auto;bottom:80px;left:50%;width:160px;height: 160px;}
  .about .right .box-content{margin-top:30px;}
  .about .right .box-content .company-desc p{margin-bottom:10px;}
  .about .right .more{ justify-content: center;}
  .about .right .box-tit{justify-content: center;text-align: center;}
  .product .box-tit{justify-content: center; text-align: center;}
  .product .tab .tab-hd{width:100%;display: flex;}
  .product .tab .tab-hd li{line-height: 1.5; padding: 0 10px !important;width:33.33%; background: #f5f5f5; margin: 0 5px;justify-content: center;}
  .product .tab .tab-hd li span{text-align: center;}
  .product .tab .tab-hd li:hover i,.product .tab .tab-hd li.active i{display: none;}
  .product .tab .tab-hd li:hover,.product .tab .tab-hd li.active{background: #0863c4;}
  .product .tab .tab-hd li:hover span,.product .tab .tab-hd li.active span{color:#fff; }
  .product .tab .tab-bd{width:100%;}
  .product .pro-info{width:100%;padding-top:40px;}
  .product .tab .tab-hd{margin-top:80px;}
  .more-box{margin-top:20px;justify-content: center;}
  .more-box .more{margin:0 10px;}
  .product .pro-img{width:100%; height:240px; margin-top:40px;}
  .news .box-tit{ justify-content: center; text-align: center;}
  .news .left{width:100%;}
  .news .tab-hd{display: flex; margin:20px 0;width:100%;justify-content: center;}
  .news .tab-hd li{width:auto; margin: 0 15px;}
  .news .tab-hd li.active{font-size:18px;}
  .news .tab-bd{width:100%;}
  .news .tab-bd li a{width:100%; margin:0 0 20px 0;}
  .news{padding-bottom:100px;}
  .news .more{width:100%;justify-content: center; margin:20px 0; position: absolute;bottom:10px;}
}