.bannerCont{ position: relative; }
.bannerCont img{ width: 100%; }
.bannerCont .phone{ display: none; }
.bannerCont .swiper-wrapper,.bannerCont .swiper-slide{ height: auto; }
.bannerCont .swiper-button-next1{ right: 5%; bottom: 70px; width: 40px; height: 40px; margin: 0; color: #fff; top: auto; transition: all 0.3s ease; }
.bannerCont .swiper-button-prev1{ left: 5%; bottom: 70px; width: 40px; height: 40px; margin: 0;; color: #fff; top: auto; transition: all 0.3s ease; }
.bannerCont .swiper-button-next:after,.bannerCont .swiper-button-prev:after{ font-size: 40px; }
.bannerCont .swiper-button-next1:hover,.bannerCont .swiper-button-prev1:hover{ color: #008aff; }
.bannerCont .loading{ position: absolute; bottom: 70px; left: 50%; margin-left: -20px; z-index: 1; }
.bannerCont .loading .circle{ border: 2px solid #fff; width: 40px; height: 40px; border-radius: 40px; }
.bannerCont .loading .circle::after{ position: absolute; content: ''; left: 50%; margin: -2px 0 0 -2px; width: 4px; height: 4px; border-radius: 4px; background: #fff; top: 50%; }
.bannerCont .loading .circle { width: 40px; height: 40px; border-radius: 40px; position: relative; }
.bannerCont .loading .semi { position: absolute; width: 40px; height: 40px; border-radius: 40px; clip: rect(0 40px 40px 20px); }
.bannerCont .loading .semi .inner { position: absolute; width: 40px; height: 40px; border-radius: 40px; background-color: rgba(255,255,255,0.3); clip: rect(0 20px 40px 0); }
.bannerCont .loading .semi2 { clip: rect(0 20px 40px 0); }
.bannerCont .loading .semi2 .inner { clip: rect(0 40px 40px 20px); }
.bannerCont .loading .semi1.active .inner { animation: sector 4s linear 0s forwards; }
.bannerCont .loading .semi2.active .inner { animation: sector 4s linear 4s forwards; }
.bannerCont .fixText{ position: absolute; top: 30%; color: #fff; width: 100%; }
.bannerCont .fixText .num{ font-size: 19px; margin-bottom: 70px; }
.bannerCont .fixText .num span{ color: #ccc; }
.bannerCont .fixText h3{ font-size: 50px; display: inline-block; position: relative; margin-bottom: 30px; }
.bannerCont .fixText h3::after{ width: 100%; height: 10px; bottom: 5px; content: ''; background: #008aff; position: absolute; left: 0; }
.bannerCont .fixText h3 span{ position: relative; z-index: 2; }
.bannerCont .fixText p{ font-size: 25px; }
.bannerCont .fixText b{ color: #dd0024; }


.mainTitle h3{ font-family: 'Arial'; font-size: 35px; color: #008aff; margin-bottom: 5px; font-weight: 900; }
.mainTitle p{ font-size: 35px; color: #000; }

.aboutCont{ padding: 50px 0 60px; }
.aboutCont .titlebox{ width: 40%; padding-left: 110px; background: url(../images/index/logobg.png) no-repeat left top; padding-top: 40px; }
.aboutCont .titlebox .mainTitle{ margin-bottom: 50px; }
.aboutCont .titlebox .more{ line-height: 48px; display: inline-block; padding-right: 60px; background: url(../images/index/more.png) no-repeat right; font-size: 16px; color: #000; transition: all 0.3s ease; background-size: auto 100%; }
.aboutCont .titlebox .more:hover{ background: url(../images/index/more2.png) no-repeat right; }
.aboutCont .textbox{ width: 60%; padding-top: 50px; }
.aboutCont .textbox .tit{ padding-top: 30px; color: #008aff; font-size: 25px; margin-bottom: 20px; border-top: 2px solid #000; }
.aboutCont .textbox p{ line-height: 32px; color: #000; }
.aboutCont .textbox b{ color: #dd0024; }

.serviceCont{ background: url(../images/index/bg1.jpg) no-repeat center; background-attachment: fixed; padding-bottom: 220px; position: relative; z-index: 2; }
.serviceCont .all{ position: relative; }
.serviceCont .fixtext{ line-height: 55px; color: #fff; font-size: 30px; padding: 160px 0; text-align: center; }
.serviceCont .tipsbox{ position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(120%); transition: all 0.5s ease; }
.serviceCont.active .tipsbox{ transform: translateY(100%); }
.serviceCont .tipsbox .flexbox{ justify-content: space-between; }
.serviceCont .tipsbox .li{ width: 24%; background: #fff; padding: 70px 2% 70px; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 0 10px 10px rgba(204,204,204,.5); transition: all 0.3s ease; color: #000; }
.serviceCont .tipsbox .li::after{ position: absolute; content: ''; left: -90px; bottom: -90px; width: 180px; height: 180px; border: 20px solid #f2f8fd; box-sizing: border-box; border-radius: 180px; transition: all 0.3s ease; }
.serviceCont .tipsbox .li:hover::after{ border: 20px solid #fff; }
.serviceCont .tipsbox .li:hover{ background: #008aff; color: #fff; }
.serviceCont .tipsbox .li .tit{ font-size: 22px; margin-bottom: 20px; }
.serviceCont .tipsbox .li .tit b{ color: #dd0024; }
.serviceCont .tipsbox .li p{ line-height: 26px; margin-bottom: 10px }
.serviceCont .tipsbox .li span{ display: inline-block; margin-bottom: 10px; position: relative; z-index: 2; }
.serviceCont .tipsbox .li .num{ position: absolute; color: #f2f8fd; right: 20px; bottom: 30px; font-size: 35px; font-weight: 900; }
.serviceCont .tipsbox .li:hover .num{ color: #fff; }

.introCont{ padding: 300px 0 120px; position: relative; }
.introCont .picbox{ margin-left: 14%; background: url(../images/index/introImg.jpg) no-repeat center; background-size: cover; background-position: left center; }
.introCont .picbox .text{ width: 30%; float: right; background: rgba(0,0,0,0.6); color: #fff; line-height: 30px; padding: 140px 40px; }
.introCont .picbox .text p{ margin-bottom: 40px; }
.introCont .picbox .text .more{ color: #fff; padding-right: 60px; line-height: 48px; display: inline-block; background: url(../images/index/more3.png) no-repeat right center; transition: all 0.3s ease; background-size: auto 100%; }
.introCont .picbox .text .more:hover{ background: url(../images/index/more2.png) no-repeat right center; }
.introCont .all{ position: relative; }
.introCont .fixbox{ position: absolute; top: 60px; width: 28%; }
.introCont .fixbox .mainTitle{ margin-bottom: 70px; }
.introCont .fixbox .blockbox{ display: flex; flex-wrap: wrap; transition: all 0.5s ease; opacity: 0; transform: translateY(50%); }
.introCont.active .fixbox .blockbox{ opacity: 1; transform: translateY(0); }
.introCont .fixbox .blockbox .li{ width: 50%; padding: 40px 6%; box-sizing: border-box; background: #008aff; color: #fff; }
.introCont .fixbox .blockbox .li.black{ background: #1d202d; }
.introCont .fixbox .blockbox .li .num{ font-size: 50px; font-family: 'Arial'; font-weight: 900; margin: 10px 0; }

.productCont{ background: url(../images/index/bg2.jpg) no-repeat center; background-size: cover; padding: 90px 0 120px; }
.productCont .all{ position: relative; }
.productCont .flexbox{ align-items: center; justify-content: space-between; }
.productCont .topbox{ margin-bottom: 30px; }
.productCont .topbox .menu{ position: absolute; right: 0; top: 20px; }
.productCont .topbox .menu .btn{ display: inline-block; position: relative; margin: 0 20px; cursor: pointer; }
.productCont .topbox .menu .btn span{ position: relative; z-index: 1; font-size: 22px; color: #000; }
.productCont .topbox .menu .btn.active::after{ content: ''; position: absolute; left: 0; width: 100%; height: 8px; background: #008aff; bottom: 2px; }
.productCont .textbox{ width: 32%;}
.productCont .textbox h3{ font-size: 35px; color: #000; font-weight: normal; margin-bottom: 25px; }
.productCont .textbox p{ line-height: 32px }
.productCont .textbox .more{ color: #000; padding-right: 60px; line-height: 48px; display: inline-block; margin-top: 50px; background: url(../images/index/more.png) no-repeat right center; transition: all 0.3s ease; background-size: auto 100%; }
.productCont .textbox .more:hover{ background: url(../images/index/more2.png) no-repeat right center; }
.productCont .cutCont .cut{ display: none; }
.productCont .soluImg-ani{ position: relative; width: 68%; }
.productCont .soluImg-ani .gallery-top{ margin-right: 160px; height: 580px; width: 580px; }
.productCont .soluImg-ani .gallery-top .maxImg{ height: 100%; width: 100%; background-size: cover; background-position: center; background-color: #fff; border-radius: 600px; overflow: hidden; }
.productCont .soluImg-ani .btnCont{ position: absolute; top: 0; height: 578px; right: 0; width: 100px; }
.productCont .soluImg-ani .gallery-thumbs{ height: 418px; margin-top: 80px; }
.productCont .soluImg-ani .gallery-thumbs .swiper-slide{ height: 100px; position: relative; background-size: cover; background-position: center; cursor: pointer; pointer-events: auto; background-color: #fff; }
.productCont .soluImg-ani .gallery-thumbs .swiper-slide:hover::after{content: ''; position: absolute; width: 100%; height: 100%; border: 3px solid rgba(0,138,255,0.6); box-sizing: border-box; left: 0; top: 0; }
.productCont .soluImg-ani .gallery-thumbs .swiper-slide.active::after{content: ''; position: absolute; width: 100%; height: 100%; border: 3px solid #008aff; box-sizing: border-box; left: 0; top: 0; }
.productCont .soluImg-ani .cutBtn{ width: 55px; height: 55px; position: absolute; left: 22px; margin: 0; display: block; }
.productCont .soluImg-ani .cutBtn::after{ display: none; }
.productCont .soluImg-ani .swiper-button-prev{ top: 0; bottom: auto; background-image: url(../images/index/arrow1-1.png); background-repeat: no-repeat; background-position: center; background-size: auto; }
.productCont .soluImg-ani .swiper-button-next{ bottom: 0; top: auto; background-image: url(../images/index/arrow2-1.png); background-repeat: no-repeat; background-position: center; background-size: auto; }
.productCont .soluImg-ani .swiper-button-next:hover{ background-image: url(../images/index/arrow2-2.png); }
.productCont .soluImg-ani .swiper-button-prev:hover{ background-image: url(../images/index/arrow1-2.png); }
.productCont .soluImg-ani .swiper-button-next.swiper-button-disabled,.productCont .soluImg-ani .swiper-button-prev.swiper-button-disabled{ opacity: 0.7; }
.productCont .solu-tit{ padding-left: 20px; background: url(../images/solution/tit.png) no-repeat left center; font-size: 18px; color: #000; margin-bottom: 20px; }
.productCont .message{ margin-bottom: 40px; }
.productCont .message table{ width: 100%; border-top: 1px dashed #ededed; }
.productCont .message table td{ border-bottom: 1px dashed #ededed; border-right: 1px dashed #ededed; padding: 25px 0 15px 30px; }
.productCont .message table td:last-child{ border-right: none; }
.productCont .message table td .en,.productCont .mMessage li .en{ font-size: 12px; font-family: 'raj'; color: #c3c6cc; margin: 5px 0 10px; }
.productCont .message table td p,.productCont .mMessage li p{ font-size: 18px; color: #000; }
.productCont .message table td p.raj,.productCont .mMessage li p.raj{ font-family: 'raj'; }
.productCont .mMessage{ display: none; }
.productCont .mMessage li{ border-bottom: 1px solid #ededed; padding: 20px }
.productCont .text{ padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px dashed #ededed; line-height: 26px; }
.productCont .detail-page{ margin: 70px 0; }
.productCont .case-box{ padding-bottom: 0; }

.newsCont{ padding: 60px 0; }
.newsCont .topbox{ position: relative; padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; }
.newsCont .topbox .menu{ position: absolute; right: 0; top: 20px; }
.newsCont .topbox .menu .btn{ display: inline-block; position: relative; margin: 0 20px; cursor: pointer; }
.newsCont .topbox .menu .btn span{ position: relative; z-index: 1; font-size: 22px; color: #000; }
.newsCont .topbox .menu .btn.active::after{ content: ''; position: absolute; left: 0; width: 100%; height: 8px; background: #008aff; bottom: 2px; }
.newsCont .list{ display: flex; margin-bottom: 50px; }
.newsCont .list .li{ width: 23%; margin-right: 2.66%; padding-bottom: 20px; border-bottom: 1px solid #ccc; position: relative; }
.newsCont .list .li:last-child{ margin-right: 0 }
.newsCont .list .li::after{ transition: all 0.3s ease; content: ''; position: absolute; bottom: -1px; width: 0; left: 0; height: 2px; background: #008aff; }
.newsCont .list .li:hover::after{ width: 100%; }
.newsCont .list .li .top{ margin-bottom: 20px; color: #000; }
.newsCont .list .li .top span{ color: #999; }
.newsCont .list .li .imgbox{ overflow: hidden; position: relative; margin-bottom: 20px; }
.newsCont .list .li .imgbox img{ width: 100%; }
.newsCont .list .li .imgbox .pic{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all 3s ease; background-size: cover; background-repeat: no-repeat; background-position: center; }
.newsCont .list .li:hover .imgbox .pic{ transform: scale(1.1); }
.newsCont .list .li .tit{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; color: #000; margin-bottom: 20px; transition: all 0.3s ease; }
.newsCont .list .li:hover .tit{ color: #008aff; }
.newsCont .list .li p{ line-height: 24px; height: 72px; overflow: hidden; margin-bottom: 20px; }
.newsCont .list .li .more{ color: #999; line-height: 30px; display: inline-block; transition: all 0.3s ease; }
.newsCont .list .li:hover .more{ color: #008aff; }
.newsCont .cutCont .cut{ display: none; }
.newsCont .mMore{ text-align: center; }
.newsCont .mMore a{ color: #000; padding-right: 60px; line-height: 48px; display: inline-block; background: url(../images/index/more.png) no-repeat right center; transition: all 0.3s ease; background-size: auto 100%; }
.newsCont .mMore a:hover{ background: url(../images/index/more2.png) no-repeat right center; }

.sloganCont{ padding: 200px 0 400px; background: url(../images/index/bg3.jpg) no-repeat center; background-attachment: fixed; }
.sloganCont .text{ color: #fff; transition: all 0.5s ease; opacity: 0; transform: translateY(50%); }
.sloganCont.active .text{ opacity: 1; transform: translateY(0); }
.sloganCont h3{ font-size: 50px; margin: 20px 0; font-weight: normal; }
.sloganCont p{ font-size: 24px; line-height: 40px;}


@media only screen and (max-width: 1260px) {
    .serviceCont .tipsbox{ padding: 0 20px; box-sizing: border-box; }
    .bannerCont .fixText .num{ margin-bottom: 50px; }
}
@media only screen and (max-width: 1050px) {
    .serviceCont .tipsbox .li{ padding: 50px 10px 80px; }
    .serviceCont .tipsbox .li .tit{ font-size: 22px; position: relative; z-index: 2; }
    .serviceCont .tipsbox .li span,.serviceCont .tipsbox .li p{ position: relative; z-index: 2; }
    .serviceCont .fixtext{ font-size: 22px; line-height: 40px; padding: 100px 0; }
    .bannerCont .fixText h3,.sloganCont h3{ font-size: 30px; margin-bottom: 20px; }
    .bannerCont .fixText .num{ margin-bottom: 30px; }
    .bannerCont .fixText p{ font-size: 22px; }
    .bannerCont .swiper-button-next:after, .bannerCont .swiper-button-prev:after{ font-size: 30px; }
    .introCont .picbox .text,.introCont .fixbox{ width: 40%; }
    .productCont .topbox .menu{ left: auto; right: 0; }
    .productCont .topbox .menu .btn span,.newsCont .topbox .menu .btn span{ font-size: 18px; }
    .productCont .soluImg-ani{ width: 520px; }
    .productCont .soluImg-ani .gallery-top{ height: 400px; width: 400px; margin-right: 120px; }
    .productCont .soluImg-ani .btnCont{ width: 80px; height: 448px; }
    .productCont .soluImg-ani .gallery-thumbs{ height: 338px; }
    .productCont .soluImg-ani .cutBtn{ width: 40px; height: 40px; background-size: 100%; left: 20px; }
    .productCont .soluImg-ani .gallery-thumbs{ margin-top: 55px; }
    .sloganCont{ padding: 150px 0 200px; }
    .sloganCont .text img{ height: 35px; }
    .sloganCont p{ font-size: 20px; line-height: 30px; }
}
@media only screen and (max-width: 820px) {
    .introCont .picbox .text{ padding: 100px 40px; }
    .productCont .topbox .menu{ top: 70px; }
}
@media only screen and (max-width: 510px) {
    .bannerCont .pc{ display: none; }
    .bannerCont .phone{ display: block; width: 100%; margin: 0 }
    .flexbox{ flex-wrap: wrap; }
    .aboutCont .titlebox{ width: 100%; margin: 0; padding: 0; background: none; text-align: center; }
    .aboutCont .titlebox .mainTitle{ margin-bottom: 30px; }
    .mainTitle h3,.mainTitle p,.aboutCont .textbox .tit,.serviceCont .fixtext,.sloganCont h3{ font-size: 20px; }
    .aboutCont .textbox{ width: 100%; padding-top: 30px; }
    .serviceCont .tipsbox .li{ width: 100%; margin-bottom: 20px; padding: 30px 20px 50px; }
    .serviceCont .tipsbox{ position: static; }
    .serviceCont.active .tipsbox{ transform: translateY(0); }
    .serviceCont{ padding-bottom: 50px; }
    .serviceCont .fixtext{ padding: 50px 0; }
    .introCont{ padding: 40px 0; }
    .introCont .fixbox{ position: static; width: 100%; margin-bottom: 20px; }
    .introCont .fixbox .mainTitle,.introCont .picbox .text p{ margin-bottom: 30px; }
    .introCont .fixbox .blockbox .li .num{ font-size: 30px; margin: 0; }
    .introCont .picbox{ margin: 0; background-position: left; }
    .introCont .picbox .text{ width: 100%; padding: 30px 20px; box-sizing: border-box; }
    .productCont .topbox .menu,.newsCont .topbox .menu{ position: static; }
    .productCont .topbox .menu .btn,.newsCont .topbox .menu .btn{ margin: 0 20px 20px 0; }
    .productCont .mainTitle,.newsCont .mainTitle{ margin-bottom: 30px; }
    .productCont .textbox{ width: 100%; margin-bottom: 30px; }
    .productCont .textbox .more{ margin-top: 30px; }
    .productCont .soluImg-ani{ width: 100%; }
    .newsCont .topbox{ padding-bottom: 30px; }
    .newsCont .list{ flex-wrap: wrap; }
    .newsCont .list .li{ width: 100%; margin-bottom: 20px; }
    .newsCont .list{ margin-bottom: 20px; }
    .newsCont{ padding: 40px 0; }
    .sloganCont p{ font-size: 16px; }
    .serviceCont .tipsbox .li:hover::after{ opacity: 0.1 }
    .sloganCont,.serviceCont{ background-size: auto 100%; background-attachment: inherit; }
    .productCont .soluImg-ani .gallery-top{ width: 300px; height: 300px; margin: auto; }
    .productCont .soluImg-ani .btnCont{ position: static; width: 100%; height: 68px; margin-bottom: 40px; }
    .productCont .soluImg-ani .gallery-thumbs{ height: 100%; width: 290px; margin: 0 auto; }
    .productCont .soluImg-ani .gallery-thumbs .swiper-slide{ height: 100%; }
    .productCont .soluImg-ani .cutBtn::after{ display: block; font-size: 20px; }
    .productCont .soluImg-ani .swiper-button-prev{ left: 0; top: 14px; }
    .productCont .soluImg-ani .swiper-button-next{ left: auto; right: 0; top: 14px; bottom: auto; }
    .productCont .soluImg-ani .cutBtn{ display: flex; background: none; }
    .productCont .soluImg-ani .swiper-button-prev:hover,.productCont .soluImg-ani .swiper-button-next:hover{ background: none; }
}
@keyframes move{
   0%{ transform: scale(1); opacity: 0.8; }
   99%{ transform: scale(1.4); opacity: 0; }
   100%{ transform: scale(1); opacity: 1; }
}
@keyframes sector {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}